diff --git a/public/css/largeScreenStyle.css b/public/css/largeScreenStyle.css index 17bf225..cc07812 100644 --- a/public/css/largeScreenStyle.css +++ b/public/css/largeScreenStyle.css @@ -2724,8 +2724,8 @@ table{ padding: 10px; } .video-list-min{ - height: 430px; - overflow: auto; + height: 920px; + 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%; diff --git a/src/api/video/index.js b/src/api/video/index.js index 663488e..84b5aba 100644 --- a/src/api/video/index.js +++ b/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' }) } diff --git a/src/components/list-menu.js b/src/components/list-menu.js index 9d469a2..cad6300 100644 --- a/src/components/list-menu.js +++ b/src/components/list-menu.js @@ -8,8 +8,8 @@ Vue.component("list-menu", { diff --git a/src/pages/projectVideo.vue b/src/pages/projectVideo.vue index 7a9258b..37d14d9 100644 --- a/src/pages/projectVideo.vue +++ b/src/pages/projectVideo.vue @@ -70,8 +70,21 @@ - +
+
+
+
{{item.project_abbreviation}}
+ +
    +
  • + + {{video.videoName}} +
    • +
+ +
+
+
@@ -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 + 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 vehicle = this.vehicleListData - for (let i = 0; i < vehicle.length; i++) { - vehicle[i].type = false - for (let j = 0; j < vehicle[i].videoList.length; j++) { - vehicle[i].videoList[j].type = false - } - } - this.vehicleListData = vehicle + //修改车辆数据 + var vehicle = this.vehicleListData + for (let i = 0; i < vehicle.length; i++) { + vehicle[i].type = false + for (let j = 0; j < vehicle[i].videoList.length; j++) { + vehicle[i].videoList[j].type = false + } + } + this.vehicleListData = vehicle - //视频和车辆切换 - this.videoType = true - this.vehicleType = false - //组件返回值 - this.videoReturnData = e - this.clearContext() - this.playVideo(); + // //视频和车辆切换 + 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 = { - deptId:this.dept?.id||0, - projectId:this.proojectInfo?.projectId||0 - }; - listVideoView(param).then((response) => { - this.videoListData = response.data; + var videoListData = []; + + var cqVideoListData = {}; + //var cqVideoList = []; + var dgVideoListData = {}; + //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 = { - id: id, - videoDvrNumber: this.videoDvrNumber, - passageState: "2", - }; - editPassageState(param); - }, + this.$api.video.editPassageState(id,this.videoDvrNumber,"2"); + }, }, @@ -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; } \ No newline at end of file