提交代码
姜玉琦
parent
542310a7d8
commit
89121eb36d
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<span>{{user.title}}</span>
|
||||
<button :class="user.signalState == 1?'video-state-zx':'video-state-lx'"></button>
|
||||
<span>{{user.videoName}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</el-collapse-transition>
|
||||
|
|
|
|||
|
|
@ -70,8 +70,21 @@
|
|||
</el-col>
|
||||
<el-col :span="3">
|
||||
<module-one-3-1 label="视频列表">
|
||||
<list-menu :data="videoListData" @project="videoProjectOneData"
|
||||
@equipment="videoEquipmentData"></list-menu>
|
||||
<div class="video-list-max">
|
||||
<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
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue