视频监控新交互

videoSurveillance/src/views/videoSurveillance/index.vue

@@ -3,7 +3,9 @@
         <div class="leftAssembly">
             <div class="titles">设备列表</div>
             <div class="componentsBlock">
-                <div class="devList active" v-for="(item, index) in devList" :key="index">{{ item.deviceName }}</div>
+                <div class="devList active" @click="clickPlay(item.deviceCode)" v-for="(item, index) in devList" :key="index">
+                    {{ item.deviceName }}
+                </div>
             </div>
         </div>
         <div class="contentShow">
@@ -41,9 +43,10 @@
                     </div>
                 </div>
             </div>
-            <div class="videoView"></div>
+            <div class="videoView">
+                <video-list :videoUrlList="videoUrlList"></video-list>
+            </div>
         </div>
-        <!-- <video-list :videoUrlList="videoUrlList"></video-list> -->
     </div>
 </template>
 
@@ -56,7 +59,8 @@ export default {
     },
     data() {
         return {
-            devList: []
+            devList: [],
+            videoUrlList: []
         };
     },
     watch: {
@@ -74,6 +78,9 @@ export default {
                 this.devList = data;
                 console.log(data);
             });
+        },
+        clickPlay(val) {
+            this.videoUrlList = [val];
         }
     }
 };
@@ -124,6 +131,7 @@ export default {
         height: rem(30);
         line-height: rem(30);
         padding: 0 rem(10);
+        cursor: pointer;
         &.active {
             background: #0eaeff36;
             border-radius: rem(4);
@@ -174,6 +182,7 @@ export default {
         height: calc(100% - #{rem(120)});
         background: #171f32;
         border-radius: rem(4);
+        overflow: hidden;
     }
 }
 .bg1 {

videoSurveillance/src/views/videoSurveillance/myVideoPlayer.vue

@@ -97,4 +97,14 @@ export default {
         playerReadied(player) {}
     }
 };
-</script>
+</script>
+<style lang="scss" scoped>
+.video-player{
+    height: 100% !important;
+}
+/deep/ .video-js.vjs-fluid{
+    padding-top: 0 !important;
+    height: 100%;
+}
+
+</style>

videoSurveillance/src/views/videoSurveillance/video.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="videoContent" :class="`content${urlArr.length > 1 ? '_most' : ''}`">
+    <div class="videoContent">
         <div class="videoList" v-for="(item, index) in urlArr" :key="index">
             <my-video-playerVue
                 :videoData="[
@@ -35,23 +35,22 @@ export default {
     },
     data() {
         return {
-            urlArr: [
-                // 'http://cmgw-vpc.lechange.com:8888/LCO/7D100C2PAZ6C590/0/0/20220112T081910/051edef3559a8eca65febb70e504acdb.m3u8',
-            ]
+            urlArr: ['http://cmgw-vpc.lechange.com:8888/LCO/7D100C2PAZ6C590/0/0/20220112T081910/051edef3559a8eca65febb70e504acdb.m3u8']
         };
     },
     methods: {
         getVideo(urlId) {
-            this.$http
-                .post('/sc-community/dahuaDevice/getRealTimeUrl', { channelId: urlId, streamType: '1', type: 'hls' })
-                .then(({ status, data, msg }) => {
-                    if (status === 0 && data) {
-                        if (data.indexOf('10.35.239.168:7086') != -1) {
-                            let newUrl = data.replace('10.35.239.168:7086', '60.191.94.122:20046');
-                            this.urlArr.push(newUrl);
-                        }
-                    }
-                });
+            // this.urlArr = `http://cmgw-vpc.lechange.com:8888/LCO/7D100C2PAZ6C590/0/0/20220112T081910/051edef3559a8eca65febb70e504acdb.m3u8`;
+            // this.$http
+            //     .post('/sc-community/dahuaDevice/getRealTimeUrl', { channelId: urlId, streamType: '1', type: 'hls' })
+            //     .then(({ status, data, msg }) => {
+            //         if (status === 0 && data) {
+            //             if (data.indexOf('10.35.239.168:7086') != -1) {
+            //                 let newUrl = data.replace('10.35.239.168:7086', '60.191.94.122:20046');
+            //                 this.urlArr.push(newUrl);
+            //             }
+            //         }
+            //     });
         }
     },
     mounted() {}
@@ -59,12 +58,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .videoContent {
-    &.content_most {
-        display: grid;
-        row-gap: 20px;
-        column-gap: 20px;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
+    height: 100%;
     .videoList {
         width: 100%;
         height: 100%;