提交代码

public/css/largeScreenStyle.css

@@ -2724,8 +2724,8 @@ table{
     padding: 10px;
 }
 .video-list-min{
-    height: 430px;
+    height: 920px;
-    overflow: auto;
+    overflow: scroll;
     padding-right: 5px;
 }
 .video-list-min::-webkit-scrollbar {
@@ -2801,6 +2801,8 @@ table{
 .video-enlarge-content{
     margin-top: 15px;
     background: rgba(0,0,0,0.5);
+    height: 905;
+    z-index: 999999;
 }
 .video-enlarge-content video{
     width: 100%;

src/api/video/index.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 const listView=(deptId,projectId)=> {
   return request({
-    url: `/bgscreen/video/listView?videoDvrNumberd=${deptId||0}&projectId=${projectId||0}`,
+    url: `/bgscreen/video/listView?deptId=${deptId||0}&projectId=${projectId||0}`,
     method: 'get'
   })
 }

src/components/list-menu.js

@@ -8,8 +8,8 @@ Vue.component("list-menu", {
                     <el-collapse-transition>
                         <ul class="video-list-ul" v-show="item.type">
                             <li :class="user.type==true?'active':''" v-for="user in item.videoList" @click.stop="onVideoListLi(user)">
-                                <button :class="user.state == 0?'video-state-zx':'video-state-lx'"></button>
+                                <button :class="user.signalState == 1?'video-state-zx':'video-state-lx'"></button>
-                                <span>{{user.title}}</span>
+                                <span>{{user.videoName}}</span>
                             </li>
                         </ul>
                     </el-collapse-transition>

src/pages/projectVideo.vue

@@ -70,8 +70,21 @@
                     </el-col>
                     <el-col :span="3">
                         <module-one-3-1 label="视频列表">
-                            <list-menu :data="videoListData" @project="videoProjectOneData"
+                            <div class="video-list-max">
-                                @equipment="videoEquipmentData"></list-menu>
+                                <div class="video-list-min">
+                                    <div class="video-list-for" v-for="item in videoListData">
+                                        <div class="video-list-title">{{item.project_abbreviation}}</div>
+                                        <el-collapse-transition>
+                                            <ul class="video-list-ul" v-show="item.type">
+                                                <li :class="video.type==true?'active':''" v-for="(video,idx) in item.videoList" @click.stop="handlePlay(video,idx)">
+                                                    <button :class="video.signalState == 1?'video-state-zx':'video-state-lx'"></button>
+                                                    <span>{{video.videoName}}</span>
+                                                </li>
+                                            </ul>
+                                        </el-collapse-transition>
+                                    </div>
+                                </div>
+                            </div>
                         </module-one-3-1>
                     </el-col>
                     <el-col :span="15">
@@ -179,13 +192,9 @@ import '../components/background_video'
 import '../components/header'
 import '../components/staff-survey-chart'
 import '../components/classify-bar'
-import '../components/list-menu'
 import '../components/amplify/shipinguanli/amplify-spjk'
 
 export default {
-    components: {
-
-    },
     data() {
         return {
             //视频概况
@@ -279,11 +288,11 @@ export default {
         });
         this.$bus.$on("loadProjects", prjs => {
             this.projectInfo = prjs;
-            this.initVideoMenu();
+            //this.initVideoMenu();
         })
         this.$bus.$on("deptChange", dept => {
             this.dept = dept;
-            this.initVideoMenu();
+            //this.initVideoMenu();
         }); 
     },
     created() {
@@ -389,8 +398,9 @@ export default {
     methods: {
         init() {
 
+            //this.initVideoMenu();
             //视频列表
-            this.getVideoData()
+            //this.getVideoData()
             //车辆数据初始化
             //this.getVehicleData()
 
@@ -529,10 +539,9 @@ export default {
             dgVideoListData.project_abbreviation = '吊钩监控'
             aiVideoListData.project_abbreviation = 'AI视频'
 
-
             var data = []
             axios.post("//video.makalu.cc/ca/isc/info/getVideoPage", {
-                deptID: "00010001000300020008"
+               deptID: "00010001000300020008"
             }).then(res => {
                 let token = res.data.data.token
                 axios.post("//video.makalu.cc/ca/isc/info/getVideoListFromDeptID", {
@@ -613,12 +622,12 @@ export default {
                         }
 
                         this.videoListData = videoListData
-
+                        debugger
                         this.playVideo();
 
 
                         //视频概况，监控点位图
-                        this.getVideoOverview()
+                        //this.getVideoOverview()
 
                     }
                 })
@@ -631,37 +640,39 @@ export default {
         },
         //点击视频项目返回数据   默认第一台设备数据
         videoProjectOneData(e) {
-            var VideoDistribution = this.VideoDistribution
-            for (let i = 0; i < VideoDistribution.length; i++) {
-                if (e.token == VideoDistribution[i].token) {
-                    VideoDistribution[i].type = true
-                } else {
-                    VideoDistribution[i].type = false
-                }
-            }
-            this.VideoDistribution = VideoDistribution
             
-            //修改车辆数据
+             var VideoDistribution = this.VideoDistribution
-            var vehicle = this.vehicleListData
+             for (let i = 0; i < VideoDistribution.length; i++) {
-            for (let i = 0; i < vehicle.length; i++) {
+                 if (e.token == VideoDistribution[i].token) {
-                vehicle[i].type = false
+                     VideoDistribution[i].type = true
-                for (let j = 0; j < vehicle[i].videoList.length; j++) {
+                 } else {
-                    vehicle[i].videoList[j].type = false
+                     VideoDistribution[i].type = false
-                }
+                 }
-            }
+             }
-            this.vehicleListData = vehicle
+             this.VideoDistribution = VideoDistribution
 
-            //视频和车辆切换
+             //修改车辆数据
-            this.videoType = true
+             var vehicle = this.vehicleListData
-            this.vehicleType = false
+             for (let i = 0; i < vehicle.length; i++) {
-            //组件返回值
+                 vehicle[i].type = false
-            this.videoReturnData = e
+                 for (let j = 0; j < vehicle[i].videoList.length; j++) {
-            this.clearContext()
+                     vehicle[i].videoList[j].type = false
-            this.playVideo();
+                 }
+             }
+             this.vehicleListData = vehicle
+
+            // //视频和车辆切换
+             this.videoType = true
+             this.vehicleType = false
+             //组件返回值
+             this.videoReturnData = e
+             this.clearContext()
+            // this.playVideo();
         },
         //点击视频设备返回数据
         videoEquipmentData(e) {
-            var VideoDistribution = this.VideoDistribution
+            
+             var VideoDistribution = this.VideoDistribution
             for (let i = 0; i < VideoDistribution.length; i++) {
                 if (e.token == VideoDistribution[i].token) {
                     VideoDistribution[i].type = true
@@ -672,13 +683,12 @@ export default {
             this.VideoDistribution = VideoDistribution
 
 
-
+            // //组件返回值
-            //组件返回值
             this.videoReturnData = e
             this.token = e.token
             this.type = e.videoType
             this.clearContext()
-            this.playVideo();
+            //this.playVideo();
         },
 
         //车辆获取数据
@@ -1363,18 +1373,87 @@ export default {
         },
         /** 查询视频配置列表 */
         initVideoMenu() {
-            let param = {
+            var videoListData = [];
-                deptId:this.dept?.id||0,
+
-                projectId:this.proojectInfo?.projectId||0
+            var cqVideoListData = {};
-            };
+            //var cqVideoList = [];
-            listVideoView(param).then((response) => {
+            var dgVideoListData = {};
-                this.videoListData = response.data;
+            //var dgVideoList = [];
+            var aiVideoListData = {};
+            //var aiVideoList = [];
+            //var onlineVideoList = [];
+
+            cqVideoListData.id=1;
+            cqVideoListData.type=true;
+            cqVideoListData.project_abbreviation = '项目监控'
+            dgVideoListData.id=1;
+            dgVideoListData.type=true;
+            dgVideoListData.project_abbreviation = '吊钩监控'
+            aiVideoListData.id=1;
+            aiVideoListData.type=true;
+            aiVideoListData.project_abbreviation = 'AI视频'
+
+            this.$api.video.listView(this.dept?.id||0,this.projectInfo?.projectId||0).then((response) => {
+                cqVideoListData.videoList = response.data;
+                videoListData.push(cqVideoListData);
+                videoListData.push(dgVideoListData);
+                videoListData.push(aiVideoListData);
+                this.videoListData = videoListData;
+                this.cqNum=response.data.length;
+                let offNum=0;
+                response.data.forEach((it) =>{
+                    if(it.signalState!="1"){
+                        offNum++;
+                    }
+                });
+                this.offLineNum = offNum;
             });
         },
          // 表格滚动调用的函数
         beforeDestroy() {
             clearInterval(this.warningInterval);
         },
+        handlePlay(it, idx) {
+            this.videoReturnData=it;
+        this.currentIndex = idx;
+        this.showVideo = false;
+        this.url0 = "";
+        this.url1 = "";
+        this.url2 = "";
+        this.url3 = "";
+        this.showVideoView0 = true;
+        this.showVideoView1 = true;
+        this.showVideoView2 = true;
+        this.showVideoView3 = true;
+        this.videoDvrNumber = it.videoDvrNumber;
+        this.initVideo(
+            it.videoDvrNumber,
+            this.request.replace("{{videoDvrNumber}}", it.videoDvrNumber)
+            );
+        },
+            //查询视频通道
+    initVideo(videoDvrNumber, url) {
+      let that = this;
+      this.$api.video.getVideoPassage(videoDvrNumber).then((response) => {
+        let data = response.data;
+        this.videoPassageList = data;
+        that.showVideo = true;
+        data.forEach((it, idx) => {
+          if (idx == 0) {
+            that.url0 = url.replace("{{passage}}", it.passageValue);
+          }
+          if (idx == 1) {
+            that.url1 = url.replace("{{passage}}", it.passageValue);
+          }
+          if (idx == 2) {
+            that.url2 = url.replace("{{passage}}", it.passageValue);
+          }
+          if (idx == 3) {
+            that.url3 = url.replace("{{passage}}", it.passageValue);
+          }
+        });
+      });
+    },
         handleOnError0(error) {
         this.showVideoView0 = false;
         console.log("error: ", error);
@@ -1396,13 +1475,8 @@ export default {
         this.updatePassageState(this.videoPassageList[3].id);
         },
         updatePassageState(id) {
-        let param = {
+        this.$api.video.editPassageState(id,this.videoDvrNumber,"2");
-            id: id,
+        },
-            videoDvrNumber: this.videoDvrNumber,
-            passageState: "2",
-        };
-      editPassageState(param);
-    },
 
     },
    
@@ -1416,11 +1490,11 @@ export default {
     color: aliceblue;
     float: left;
     width: 50%;
-    height: 50%;
+    height: 452.5px;
 }
 .videoViewError {
     background-color: #575e65;
     text-align: center;
-    line-height: 324px;
+    line-height: 420px;
 }
 </style>