剩余场景视频配置读取&npm添加视频相关库

wj-data-vision/package.json

@@ -43,6 +43,8 @@
     "vue-clipboard2": "^0.3.1",
     "vue-router": "^3.4.6",
     "vue-seamless-scroll": "^1.1.23",
-    "vuex": "^3.5.1"
+    "vuex": "^3.5.1",
+    "flv.js": "^1.6.2",
+    "video.js": "^8.6.1"
   }
 }

wj-data-vision/src/views/mobileBaseStation/left/index.vue

 <template>
   <div class="home-left">
     <msg-card title="可移动智慧基站">
-      <div style="height: 100%; width: 100%; display: flex;flex-direction: column;">
-
-      <local-camera :border="true" ref="videoItemL" class="videoItem" v-for="(item,key) of [1,2]" :key="key" :video-data="`kydjz_${item}`"/>
+      <div
+        style="height: 100%; width: 100%; display: flex; flex-direction: column"
+      >
+        <local-camera
+          :border="true"
+          ref="videoItemL"
+          class="videoItem"
+          v-for="(item, key) of videos"
+          :key="key"
+          :video-data="item"
+        />
       </div>
     </msg-card>
   </div>
@@ -12,40 +20,41 @@
 <script>
 import CameraVideo from "../../../components/Standard/cameraVideo.vue";
 import MsgCard from "../../../components/Standard/msg-card.vue";
-import {getCameraListByType} from "../../../dao/api";
+import { getCameraListByType } from "../../../dao/api";
 import WMap from "../../../components/Standard/mapboxMap.vue";
 import dict from "../../../config/holo/dictionary";
 import LocalCamera from "../../../components/Standard/localCamera.vue";
 
-let map
+let map;
 export default {
   name: "homeLeft",
-  components: {LocalCamera, WMap, MsgCard, CameraVideo},
-  computed: {},
+  components: { LocalCamera, WMap, MsgCard, CameraVideo },
+  computed: {
+    videos() {
+      return situation_mobileBaseStation.videos.slice(0, 2);
+    },
+  },
   data() {
     return {
       timer: null,
       angle: 0,
     };
   },
-  mounted() {
-    // this.init()
-  },
+  mounted() {},
   methods: {
     startVideo(time) {
-      console.log(this.$refs.videoItemL)
+      console.log(this.$refs.videoItemL);
       for (let item of this.$refs.videoItemL) {
-        item.setTime(time)
+        item.setTime(time);
       }
-    }
+    },
   },
 
-  beforeDestroy() {
-  },
+  beforeDestroy() {},
 };
 </script>
 
-<style lang='less' scoped>
+<style lang="less" scoped>
 .video-mobile {
   aspect-ratio: 4/3;
 }
@@ -194,7 +203,11 @@ export default {
   height: 50%;
   width: 668px;
   background-color: rgba(3, 11, 25, 0.45);
-  background-image: linear-gradient(90deg, rgba(8, 20, 31, 0) 0%, rgba(6, 16, 26, 1) 100%);
+  background-image: linear-gradient(
+    90deg,
+    rgba(8, 20, 31, 0) 0%,
+    rgba(6, 16, 26, 1) 100%
+  );
   padding: 15px 25px;
   display: flex;
   flex-direction: column;
@@ -218,8 +231,6 @@ export default {
       position: relative;
       flex-flow: row wrap;
       height: 100%;
-
-
     }
   }
 
@@ -239,7 +250,7 @@ export default {
         justify-content: space-between;
 
         span {
-          width: 40%
+          width: 40%;
         }
 
         span:first-child {
@@ -271,4 +282,4 @@ export default {
 .m-b-10 {
   margin-bottom: 10px;
 }
-</style>
\ No newline at end of file
+</style>

wj-data-vision/src/views/mobileBaseStation/right/index.vue

@@ -2,7 +2,7 @@
   <div class="home-right">
     <msg-card title="可移动基站">
       <div style="height: 100%; width: 100%; display: flex;flex-direction: column;">
-        <local-camera ref="videoItemR" :border="true" class="videoItem" v-for="(item,index) of [3,4]" :key="index" :video-data="`kydjz_${item}`"/>
+        <local-camera ref="videoItemR" :border="true" class="videoItem" v-for="(item,index) of videos" :key="index" :video-data="item"/>
       </div>
     </msg-card>
   </div>
@@ -20,7 +20,11 @@ let topViewer, bottomViewer;
 export default {
   name: "homeRight",
   components: {LocalCamera, CrossControl, CameraVideo, MsgCard, CesiumMap},
-  computed: {},
+  computed: {
+    videos() {
+      return situation_mobileBaseStation.videos.slice(2, 4);
+    },
+  },
   data() {
     return {};
   },

wj-data-vision/src/views/phaseAirPlay/left/index.vue

@@ -3,7 +3,7 @@
     <div class="topI">
       <msg-card title="路口现场监控">
         <div class="videos">
-          <local-camera ref="videoItem" class="videoItem" v-for="(item,index) of [3]" :key="index" :video-data="`xwkf_${item}`"/>
+          <local-camera ref="videoItem" class="videoItem" v-for="(item,index) of videos" :key="index" :video-data="item"/>
           <span class="top-left"></span>
           <span class="top-right"></span>
           <span class="bottom-left"></span>
@@ -39,7 +39,11 @@ import LocalCamera from "../../../components/Standard/localCamera.vue";
 export default {
   name: "homeLeft",
   components: {LocalCamera, MsgCard, CameraVideo},
-  computed: {},
+  computed: {
+    videos(){
+      return situation_phaseAirPlay.videos.slice(0, 1);
+    }
+  },
   data() {
     return {
       time: '09:10:00 - 09:12:30',
@@ -60,7 +64,6 @@ export default {
       for (let item of this.$refs.videoItem) {
         item.setTime(time)
       }
-      // this.$refs.videoItem.setTime(time)
     },
   },
 

wj-data-vision/src/views/slowTraffic/left/index.vue

@@ -3,7 +3,7 @@
     <div class="topI">
       <msg-card title="慢行交通现场监控">
         <div class="videos">
-          <local-camera ref="videoItem" class="videoItem" v-for="(item,index) of [1]" :key="index" :video-data="`mxjt_${item}`"/>
+          <local-camera ref="videoItem" class="videoItem" v-for="(item,index) of videos" :key="index" :video-data="item"/>
           <span class="top-left"></span>
           <span class="top-right"></span>
           <span class="bottom-left"></span>
@@ -47,7 +47,11 @@ import LocalCamera from "../../../components/Standard/localCamera.vue";
 export default {
   name: "homeLeft",
   components: {LocalCamera, MsgCard, CameraVideo},
-  computed: {},
+  computed: {
+    videos(){
+      return situation_slowTraffic.videos.slice(0, 1);
+    }
+  },
   data() {
     return {
       cameras: [],

wj-data-vision/src/views/straightLeftConflict/left/index.vue

@@ -6,9 +6,9 @@
           <local-camera
             ref="videoItem"
             class="videoItem"
-            v-for="(item, index) of [2]"
+            v-for="(item, index) of videos"
             :key="index"
-            :video-data="`zzct_${item}`"
+            :video-data="item"
           />
           <span class="top-left"></span>
           <span class="top-right"></span>
@@ -51,15 +51,18 @@
 </template>
 
 <script>
-import CameraVideo from "../../../components/Standard/cameraVideo.vue";
 import MsgCard from "../../../components/Standard/msg-card.vue";
 import { getCameraListByType } from "../../../dao/api";
 import LocalCamera from "../../../components/Standard/localCamera.vue";
 
 export default {
   name: "homeLeft",
-  components: { LocalCamera, MsgCard, CameraVideo },
-  computed: {},
+  components: { LocalCamera, MsgCard },
+  computed: {
+    videos(){
+      return situation_straightLeftConflict.videos.slice(0, 1);
+    }
+  },
   data() {
     return {
       cameras: [],
@@ -68,7 +71,6 @@ export default {
         ifConflict: '',
         duration: '',
         reason: "",
-        direction: "",
       },
     };
   },
@@ -77,8 +79,6 @@ export default {
     this.content.ifConflict = situation_straightLeftConflict.ifConflict
     this.content.duration = situation_straightLeftConflict.duration
     this.content.reason = situation_straightLeftConflict.reason
-    this.content.direction = situation_straightLeftConflict.direction
-
   },
   methods: {
     startVideo(time) {