admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

湖里大屏(数字工地)：新增视频监测弹框

Browse Source
This commit is contained in:
Jack 2022-08-16 16:40:47 +08:00
parent 026d581ca8
commit 64d345c2b1
4 changed files with 283 additions and 497 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

647
src/components/areaTree.vue
View File

@ -1,236 +1,130 @@
<template>
<div
class="areaTreeBox"
:class="
videoType == 1 || modules == 'markingRoom' || modules == 'carManage'
? 'hasVedio'
: 'noVideo'
"
:class="videoType == 1 || modules == 'markingRoom' || modules == 'carManage' ? 'hasVedio' : 'noVideo'"
id="videoTreeBox"
>
<div
class="areaTreeInner whiteBlock fullHeight"
v-show="
expandOnoff ||
videoType == 1 ||
modules == 'markingRoom' ||
modules == 'carManage'
"
:class="$props.styleType ? 'black': ''"
v-show="expandOnoff || videoType == 1 || modules == 'markingRoom' || modules == 'carManage'"
:class="$props.styleType ? 'black' : ''"
>
<div class="pageTitle" v-if="videoType == 1">视频列表</div>
<p
:class="
modules == 'markingRoom' || modules == 'carManage'
? 'pageTitle'
: 'treeTitle'
"
v-else
>
<p :class="modules == 'markingRoom' || modules == 'carManage' ? 'pageTitle' : 'treeTitle'" v-else>
查看全部工地
</p>
<div class="treeBox">
<vue-scroll v-if="treeData.length > 0 || videoType != 1">
<el-tree
:data="treeData"
@node-click="handleNodeClick"
:props="defaultProps"
node-key="itemId"
ref="tree"
>
<el-tree :data="treeData" @node-click="handleNodeClick" :props="defaultProps" node-key="itemId" ref="tree">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span v-show="data.videoName" class="icon-video" :class="data.deviceType == 2 ? 'icon-video2' : ''"> </span>
<span
v-show="data.videoName"
class="icon-video"
:class="data.deviceType == 2 ? 'icon-video2' : ''"
>
<!-- <img v-if="data.deviceType==2" src="@/assets/images/icon-video2.png"> -->
<!-- <img v-else src="@/assets/images/icon-video.png"> -->
</span>
<!-- <el-popover v-if="modules=='markingRoom'&&data.projectName"
placement="top"
width="300"
trigger="hover" @show="getMarkRoomDev(data.projectSn)">
<el-table :data="markRoomDevList" class="tables" style="min-height:auto" height="130">
<el-table-column property="laboratoryName" label="设备名称"></el-table-column>
<el-table-column
prop="isEnable"
:label="'是否报警'"
align="center"
>
<template slot-scope="scope">{{
$t("message.alarmValueSet.dialog_edit.isEnableArr")[scope.row.isEnable]
}}</template>
</el-table-column>
<el-table-column property="reason" label="禁用原因"></el-table-column>
</el-table>
<span slot="reference">{{ node.label }}</span>
</el-popover> -->
<span
:class="
data.videoName
? 'videoName'
: data.projectName
? 'projectName'
: data.companyType == 2
? 'companyName2'
: ''
"
:class="data.videoName ? 'videoName' : data.projectName ? 'projectName' : data.companyType == 2 ? 'companyName2' : ''"
>{{ node.label }}</span
>
<span v-show="data.projectNum && videoType == 0"
>({{ data.projectNum }})</span
>
<el-tooltip
effect="dark"
content="播放项目所有视频"
placement="top"
>
<span v-show="data.projectNum && videoType == 0">({{ data.projectNum }})</span>
<el-tooltip effect="dark" content="播放项目所有视频" placement="top">
<span
class="playAllBtn"
v-show="
videoType == 1 && data.projectName && data.list.length > 0
"
v-show="videoType == 1 && data.projectName && data.list.length > 0"
@click.stop="playMutipleVideo(data)"
></span>
</el-tooltip>
<span
v-show="data.projectName && modules == 'markingRoom'"
class="statusImgBox"
>
<img
v-show="data.standardDevStopUsingNum != 0"
src="@/assets/images/no_alarm.png"
alt=""
srcset=""
/>
<img
v-show="data.standardDevNotOnline != 0"
src="@/assets/images/offline_alarm.png"
alt=""
srcset=""
/>
<img
v-show="data.standardTemperatureAlarmNum != 0"
src="@/assets/images/temp_alarm.png"
alt=""
srcset=""
/>
<img
v-show="data.standardHumidityAlarmNum != 0"
src="@/assets/images/humi_alarm.png"
alt=""
srcset=""
/>
<span v-show="data.projectName && modules == 'markingRoom'" class="statusImgBox">
<img v-show="data.standardDevStopUsingNum != 0" src="@/assets/images/no_alarm.png" alt="" srcset="" />
<img v-show="data.standardDevNotOnline != 0" src="@/assets/images/offline_alarm.png" alt="" srcset="" />
<img v-show="data.standardTemperatureAlarmNum != 0" src="@/assets/images/temp_alarm.png" alt="" srcset="" />
<img v-show="data.standardHumidityAlarmNum != 0" src="@/assets/images/humi_alarm.png" alt="" srcset="" />
</span>
</span>
</el-tree>
</vue-scroll>
<div class="placeholderBox" v-else>
<img
src="@/assets/images/longguang/noData2.png"
alt=""
srcset=""
v-if="company == 'longguang'"
/>
<img src="@/assets/images/longguang/noData2.png" alt="" srcset="" v-if="company == 'longguang'" />
<img src="@/assets/images/noData2.png" alt="" srcset="" v-else />
<p>{{ $t("message.videoManage.empty") }}</p>
<p>{{ $t('message.videoManage.empty') }}</p>
</div>
</div>
</div>
<div
class="onoffBtn"
:class="expandOnoff ? 'active' : ''"
v-show="
videoType == 0 && modules != 'markingRoom' && modules != 'carManage'
"
v-show="videoType == 0 && modules != 'markingRoom' && modules != 'carManage'"
@click="expandOnoff = !expandOnoff"
>
<i
v-show="expandOnoff"
class="el-icon-caret-left"
></i>
<span v-show="!expandOnoff"
><i class="el-icon-caret-right"></i>查看所有工地</span
>
<i v-show="expandOnoff" class="el-icon-caret-left"></i>
<span v-show="!expandOnoff"><i class="el-icon-caret-right"></i>查看所有工地</span>
</div>
</div>
</template>
<script>
import { getstandardDevListApi } from "@/assets/js/api/markingRoom";
import {
getComapnyStatisticsListApi,
getComapnyVideoListApi,
getComapnyParentNameApi,
} from "@/assets/js/api/company/project";
import { getVideoItemInfoApi } from "@/assets/js/api/equipmentCenter/cameraList";
import { getstandardDevListApi } from '@/assets/js/api/markingRoom'
import { getComapnyStatisticsListApi, getComapnyVideoListApi, getComapnyParentNameApi } from '@/assets/js/api/company/project'
import { getVideoItemInfoApi } from '@/assets/js/api/equipmentCenter/cameraList'
export default {
props: ["videoType", "modules", "activeLive","styleType",'videoSn'],
props: ['videoType', 'modules', 'activeLive', 'styleType', 'videoSn'],
data() {
return {
treeData: [],
defaultProps: {
children: "list",
label: "name",
children: 'list',
label: 'name'
},
expandOnoff: false,
searchsn: "",
searchsn: '',
videoList: [],
expandKeys: [],
numIndex: 1, //用于不用账号登录左边组织机构的点击
markRoomDevList: [],
company: "",
};
company: ''
}
},
mounted() {
this.company = COMPANY;
this.loadData();
this.company = COMPANY
this.loadData()
},
methods: {
getMarkRoomDev(sn) {
getstandardDevListApi({ projectSn: sn }).then((res) => {
this.markRoomDevList = res.result;
});
getstandardDevListApi({ projectSn: sn }).then(res => {
this.markRoomDevList = res.result
})
},
loadData() {
console.log(isDockingToWoer)
console.log(this.$props.videoSn)
if(this.$props.videoSn){
if (this.$props.videoSn) {
this.searchsn = this.$props.videoSn
console.log(this.searchsn)
}else{
if(isDockingToWoer) {
this.searchsn = this.$store.state.projectSn;
} else {
if (isDockingToWoer) {
this.searchsn = this.$store.state.projectSn
} else {
var backArr = this.$store.state.mapBackArr;
var backArr = this.$store.state.mapBackArr
switch (Number(this.$store.state.userInfo.accountType)) {
case 2:
this.searchsn = this.$store.state.userInfo.headquartersSn;
this.numIndex = 2;
this.searchsn = this.$store.state.userInfo.headquartersSn
this.numIndex = 2
break;
break
case 3:
this.searchsn = this.$store.state.userInfo.sn;
this.numIndex = 3;
break;
this.searchsn = this.$store.state.userInfo.sn
this.numIndex = 3
break
case 4:
this.searchsn = this.$store.state.userInfo.sn;
this.numIndex = 4;
break;
this.searchsn = this.$store.state.userInfo.sn
this.numIndex = 4
break
case 7:
this.searchsn = this.$store.state.userInfo.sn;
this.numIndex = 5;
break;
this.searchsn = this.$store.state.userInfo.sn
this.numIndex = 5
break
}
if (this.videoType == 1 && backArr.length > 0) {
this.searchsn = backArr[backArr.length - 1].sn;
this.searchsn = backArr[backArr.length - 1].sn
}
if (this.$route.path.indexOf("/project/") != -1) {
this.searchsn = this.$store.state.projectSn;
if (this.$route.path.indexOf('/project/') != -1) {
this.searchsn = this.$store.state.projectSn
}
}
}
@ -246,373 +140,152 @@ export default {
getComapnyStatisticsListApi({
sn: this.searchsn,
videoType: this.videoType,
standardType: this.modules == "markingRoom" ? 1 : 0,
}).then((res) => {
standardType: this.modules == 'markingRoom' ? 1 : 0
}).then(res => {
console.log('-----tree')
this.treeData = res.result.companyList
? res.result.companyList
: res.result.projectList
? res.result.projectList
: res.result.videoList;
console.log('this.$route.path',this.$route.path)
: res.result.videoList
console.log('this.$route.path', this.$route.path)
console.log(this.treeData)
if (this.$route.path.indexOf("dataBoard/digitalSite") == -1) {
console.log("areaTree.vue传递设备列表数据");
this.$emit("playParams", this.treeData);
if (this.$route.path.indexOf('dataBoard/digitalSite') == -1) {
console.log('areaTree.vue传递设备列表数据')
this.$emit('playParams', this.treeData)
console.log(this.treeData)
}
if (this.$route.path.indexOf("/firm/towerManage") != -1) {
this.$emit("getTreeData", this.treeData);
if (this.$route.path.indexOf('/firm/towerManage') != -1) {
this.$emit('getTreeData', this.treeData)
}
if (this.activeLive) {
// console.log(this.activeLive,this.treeData)
this.treeData.forEach((item) => {
this.treeData.forEach(item => {
if (this.activeLive.devSn == item.serialNumber) {
this.handleNodeClick(item);
// console.log(item.id)
this.handleNodeClick(item)
this.$nextTick(() => {
this.$refs["tree"].setCurrentKey(item.itemId.toString());
});
this.$refs['tree'].setCurrentKey(item.itemId.toString())
})
}
});
})
}
// console.log(this.activeLive,this.treeData)
// if(this.treeData.length>0){
// this.expandKeys.push(this.treeData[0].id)
// }
});
})
},
//获取视频播放url
getVideo(itemId, videoType, item) {
//videoType 1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
//playType 播放方式，1高清RTMP,2流畅RTMP,3高清HLS,4流畅HLS,5高清轻量级插件，6流畅轻量级插件
getVideoItemInfoApi({
itemId: itemId,
}).then((res) => {
var result = res.result;
var url = "";
itemId: itemId
}).then(res => {
var result = res.result
var url = ''
if (videoType == 1) {
switch (Number(result.projectVideoConfig.playType)) {
case 1:
url = result.videoInfo.rtmpHd;
break;
url = result.videoInfo.rtmpHd
break
case 2:
url = result.videoInfo.rtmp;
break;
url = result.videoInfo.rtmp
break
case 3:
url = result.videoInfo.hdFlvAddress;
break;
url = result.videoInfo.hdFlvAddress
break
case 4:
url = result.videoInfo.flvAddress;
break;
url = result.videoInfo.flvAddress
break
case 5:
url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.hd.live`;
break;
url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.hd.live`
break
case 6:
url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`;
break;
url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`
break
default:
url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`;
break;
url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`
break
}
this.$emit("playParams", [
this.$emit('playParams', [
{
accessToken: result.accessToken,
url: url,
videoType: videoType,
playType: result.projectVideoConfig.playType,
},
]);
playType: result.projectVideoConfig.playType
}
])
}
if (videoType == 2) {
// url=`imou://open.lechange.com/${item.serialNumber}/${item.channelId}/1?streamId=1`
// this.$emit('playParams',{accessToken:result.accessToken,url:url,videoType:item.videoType})
this.$emit("playParams", [
this.$emit('playParams', [
{
accessToken: result.accessToken,
url: item.liveRadioUrl,
videoType: item.videoType,
},
]);
videoType: item.videoType
}
])
}
// if(videoType==3){
// item.date = new Date()
// this.$emit('playParams',[item])
// }
// console.log('视频播放url',url)
});
})
},
// handleNodeClick(data) {
// console.log(data);
// if (this.videoType == 1) {
// //用于企业级视频监控页面
// if (data.videoName) {
// if (data.videoType == 3) {
// data.date = new Date();
// this.$emit("playParams", [data]);
// } else {
// this.getVideo(data.itemId, data.videoType, data);
// }
// }
// } else {
// var sn1 = data.projectSn ? data.projectSn : data.companySn;
// var parentName = "",
// parentSn = "";
// // if (sn1) {
// var array = this.treeData;
// for (let i = 0; i < array.length; i++) {
// const element = array[i];
// var onoff = this.setBackArrData(sn1, element, this.numIndex);
// if (onoff) {
// return;
// }
// if (this.$store.state.userInfo.accountType == 2) {
// parentName = element.companyName;
// parentSn = element.companySn;
// }
// if (element.list) {
// var arr2 = element.list;
// for (let j = 0; j < arr2.length; j++) {
// const item2 = arr2[j];
// var onoff = this.setBackArrData(
// sn1,
// item2,
// this.numIndex + 1,
// parentName,
// parentSn
// );
// if (onoff) {
// return;
// }
// if (item2.list) {
// var arr3 = item2.list;
// //账号类型为2时执行
// console.log("账号类型为2时执行");
// for (let k = 0; k < arr3.length; k++) {
// const item3 = arr3[k];
// var onoff = this.setBackArrData(
// sn1,
// item3,
// this.numIndex + 2,
// parentName,
// parentSn
// );
// if (onoff) {
// return;
// }
// // if (item3.list) {
// // console.log("8888888888");
// // var arr4 = item3.list;
// // //账号类型为2时执行
// // // console.log("账号类型为2时执行");
// // for (let k = 0; k < arr4.length; k++) {
// // const item4 = arr4[k];
// // if(item2.companyType==4){
// // parentName=element.companyName
// // parentSn=element.companySn
// // }
// // var onoff2 = this.setBackArrData(
// // sn1,
// // item4,
// // this.numIndex + 2,
// // parentName,
// // parentSn
// // );
// // if (onoff2) {
// // return;
// // }
// // }
// // } else if (item3.projectName) {
// // console.log("777777777");
// // var onoff3 = this.setBackArrData(
// // sn1,
// // item3,
// // this.numIndex + 3,
// // parentName,
// // parentSn
// // );
// // if (onoff3) {
// // return;
// // }
// // }
// }
// } else if (item2.projectName) {
// console.log("账号类型为3时执行");
// // if(item2.companyType==5){
// // parentName=element.companyName
// // parentSn=element.companySn
// // }
// var onoff = this.setBackArrData(
// sn1,
// item2,
// this.numIndex + 3,
// parentName,
// parentSn
// );
// if (onoff) {
// return;
// }
// }
// }
// } else if (element.projectName) {
// //账号类型为4时执行
// console.log("账号类型为4时执行");
// var onoff = this.setBackArrData(
// sn1,
// element,
// this.numIndex + 3,
// parentName,
// parentSn
// );
// if (onoff) {
// return;
// }
// }
// }
// // }
// //这里是用于只点击项目生效
// // if (data.projectSn) {
// // var array = this.treeData;
// // for (let i = 0; i < array.length; i++) {
// // const element = array[i];
// // if (element.list) {
// // var arr2 = element.list;
// // for (let j = 0; j < arr2.length; j++) {
// // const item2 = arr2[j];
// // if (item2.list) {
// // var arr3 = item2.list;
// // //账号类型为2时执行
// // console.log("账号类型为2时执行");
// // for (let k = 0; k < arr3.length; k++) {
// // const item3 = arr3[k];
// // if (item3.projectSn == data.projectSn) {
// // var arr5 = [];
// // arr5.push({
// // sn: array[i].companySn,
// // name: array[i].name,
// // });
// // arr5.push({ sn: arr2[j].companySn, name: arr2[j].name });
// // arr5.push({ sn: arr3[k].projectSn, name: arr3[k].name });
// // this.$store.commit("setMapBackArr", arr5);
// // this.$parent.initData();
// // }
// // }
// // } else if (item2.projectName) {
// // console.log("账号类型为3时执行");
// // //账号类型为3时执行
// // if (data.projectSn == item2.projectSn) {
// // var backArr = this.$store.state.mapBackArr;
// // backArr = backArr.splice(0, 1);
// // backArr.push({ name: element.name, sn: element.companySn });
// // backArr.push({ name: item2.name, sn: item2.projectSn });
// // this.$store.commit("setMapBackArr", backArr);
// // this.$parent.initData();
// // }
// // }
// // }
// // } else if (element.projectName) {
// // //账号类型为4时执行
// // console.log("账号类型为4时执行");
// // if (data.projectSn == element.projectSn) {
// // var backArr = this.$store.state.mapBackArr;
// // backArr = backArr.splice(0, 2);
// // backArr.push({ name: data.name, sn: data.projectSn });
// // this.$store.commit("setMapBackArr", backArr);
// // this.$parent.initData();
// // }
// // }
// // }
// // }
// }
// },
handleNodeClick(data) {
console.log(data,this.videoType, '5555');
console.log(data, this.videoType, '5555')
let companyType = data.companyType
if (this.videoType == 1) {
//用于企业级视频监控页面
if (data.videoName) {
if (data.videoType == 3) {
data.date = new Date();
this.$emit("playParams", [data]);
data.date = new Date()
this.$emit('playParams', [data])
} else {
this.getVideo(data.itemId, data.videoType, data);
this.getVideo(data.itemId, data.videoType, data)
}
}
} else {
let sn1 = data.projectSn ? data.projectSn : data.companySn;
let sn1 = data.projectSn ? data.projectSn : data.companySn
getComapnyParentNameApi({
sn: sn1,
}).then((res) => {
let backArr = [];
let data = res.result;
sn: sn1
}).then(res => {
let backArr = []
let data = res.result
console.log(res)
backArr.push({
name: data.firstCompanyName,
sn: data.firstCompanySn,
});
sn: data.firstCompanySn
})
if (data.secondCompanyName) {
backArr.push({
name: data.secondCompanyName,
sn: data.secondCompanySn,
});
sn: data.secondCompanySn
})
}
if (data.thirdCompanyName) {
backArr.push({
name: data.thirdCompanyName,
sn: data.thirdCompanySn,
});
sn: data.thirdCompanySn
})
}
if (data.projectName) {
backArr.push({ name: data.projectName, sn: data.projectSn });
backArr.push({ name: data.projectName, sn: data.projectSn })
}
if(!companyType){
backArr[backArr.length-1].isProject = true
if (!companyType) {
backArr[backArr.length - 1].isProject = true
}
console.log(companyType,backArr)
this.$store.commit("setMapBackArr", backArr);
this.$parent.initData();
});
console.log(companyType, backArr)
this.$store.commit('setMapBackArr', backArr)
this.$parent.initData()
})
}
},
// setBackArrData(sn1, data, index, parentName, parentSn) {
// // sn1是点击的sn
// var sn2 = data.projectSn ? data.projectSn : data.companySn;
// if (sn1 == sn2) {
// var backArr = this.$store.state.mapBackArr;
// if (parentName) {
// backArr = [];
// backArr.push({ name: parentName, sn: parentSn });
// }
// if (data.projectSn) {
// backArr = backArr.splice(0, 1);
// backArr.push({ name: data.companyName, sn: data.companySn });
// } else {
// //
// if (backArr.length >= data.companyType - 1) {
// backArr = backArr.splice(0, data.companyType - 2);
// }
// }
// backArr.push({ name: data.name, sn: sn2 });
// this.$store.commit("setMapBackArr", backArr);
// this.$parent.initData();
// return true;
// } else {
// return false;
// }
// },
playMutipleVideo(data) {
this.$emit("playParams", data.list);
},
},
};
this.$emit('playParams', data.list)
}
}
}
</script>
<style lang="less" scoped>
.treeTitle {
@ -671,11 +344,9 @@ export default {
color: #5181f6;
// font-weight: bold;
.icon-video {
background: url("../assets/images/icon-video-blue.png") center center
no-repeat;
background: url('../assets/images/icon-video-blue.png') center center no-repeat;
&.icon-video2 {
background: url("../assets/images/icon-video2-blue.png") center
center no-repeat;
background: url('../assets/images/icon-video2-blue.png') center center no-repeat;
}
}
}
@ -771,11 +442,11 @@ export default {
width: 14px;
height: 20px;
display: inline-block;
background: url("../assets/images/icon-video.png") center center no-repeat;
background: url('../assets/images/icon-video.png') center center no-repeat;
// background-size: 14px auto ;
vertical-align: top;
&.icon-video2 {
background: url("../assets/images/icon-video2.png") center center no-repeat;
background: url('../assets/images/icon-video2.png') center center no-repeat;
}
}
.playAllBtn {
@ -788,10 +459,9 @@ export default {
right: 0;
top: 50%;
transform: translateY(-50%);
background: url("../assets/images/icon-play.png") center center no-repeat;
background: url('../assets/images/icon-play.png') center center no-repeat;
&:hover {
background: url("../assets/images/icon-play-blue.png") center center
no-repeat;
background: url('../assets/images/icon-play-blue.png') center center no-repeat;
}
}
.statusImgBox {
@ -811,74 +481,70 @@ export default {
color: #5181f6;
// font-weight: bold;
.icon-video {
background: url("../assets/images/longguang/icon-video-blue.png") center
center no-repeat !important;
background: url('../assets/images/longguang/icon-video-blue.png') center center no-repeat !important;
&.icon-video2 {
background: url("../assets/images/longguang/icon-video2-blue.png")
center center no-repeat !important;
background: url('../assets/images/longguang/icon-video2-blue.png') center center no-repeat !important;
}
}
}
}
.playAllBtn {
&:hover {
background: url("../assets/images/longguang/icon-watch-video.png") center center
no-repeat !important;
}
&:hover {
background: url('../assets/images/longguang/icon-watch-video.png') center center no-repeat !important;
}
}
}
// 以下为龙光大屏video组件引入此组件时的样式
.black {
float: left;
background-color: #011536 !important;
color: white !important;
height: calc(100% - 70px);
.pageTitle{
float: left;
background-color: #011536 !important;
color: white !important;
height: calc(100% - 70px);
.pageTitle {
box-sizing: border-box;
padding: 5px 10px;
margin-bottom: 20px;
background-color: #021330;
height: 20px;
line-height: 10px;
&::before{
&::before {
background-color: #fff;
}
font-size: 18px;
}
.treeBox{
.treeBox {
background-color: #021330 !important;
position: relative;
}
.companyName2{
color:#fff;
.companyName2 {
color: #fff;
font-weight: 100 !important;
font-size: 15px;
font-family: '黑体', '微软雅黑', "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif !important;
font-family: '黑体', '微软雅黑', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif !important;
}
.custom-tree-node{
color:#fff;
.custom-tree-node {
color: #fff;
}
.areaTreeBox {
/deep/ .el-tree-node__expand-icon{
/deep/ .el-tree-node__expand-icon {
color: #fff !important;
}
/deep/ .el-tree-node__content{
/deep/ .el-tree-node__content {
color: #fff !important;
}
}
.icon-video {
background: url("../assets/images/icon-video-white.png") center center no-repeat;
background: url('../assets/images/icon-video-white.png') center center no-repeat;
// background-size: 14px auto ;
vertical-align: top;
&.icon-video2 {
background: url("../assets/images/icon-video2.png") center center no-repeat;
background: url('../assets/images/icon-video2.png') center center no-repeat;
}
}
.projectName:hover {
color:#5181f6;
color: #5181f6;
&::before {
content: "";
content: '';
display: inline-block;
background-color: #fff;
width: 1.5%;
@ -886,13 +552,13 @@ export default {
position: absolute;
top: 0%;
left: 0%;
background-color:#5181f6;
background-color: #5181f6;
}
}
.custom-tree-node:hover{
color:#5181f6;
.custom-tree-node:hover {
color: #5181f6;
&::before {
content: "";
content: '';
display: inline-block;
background-color: #fff;
width: 1.5%;
@ -900,9 +566,8 @@ export default {
position: absolute;
top: 0%;
left: 0%;
background-color:#5181f6;
background-color: #5181f6;
}
}
}
</style>

5
src/views/projectAdmin/dataBoard/digitalSite/index.vue
View File

@ -2592,7 +2592,6 @@ export default {
this.afterAnalysisDataInfo = ''
this.showBoltDetails = false
this.showVideoDialog = false
// this.activeLiveData = ""
this.playList = []
this.selectList = []
console.log(this.playList)
@ -2902,11 +2901,9 @@ export default {
this.showHeight = 0
break
case 4:
// this.activeLiveData = {}
console.log(item)
console.log(item, '老子操')
this.activeLiveData = item
this.showVideoDialog = true
// this.playList = []
console.log(this.videoList, 'video')
this.videoList.forEach(element => {
if (element.devSn == item.devSn) {

10
src/views/projectAdmin/jlw/digitalSite/centerTop.vue
View File

@ -10,6 +10,7 @@
></div>
<FaceGageDialog v-if="faceGateDialog" :close="() => (faceGateDialog = false)" :data="faceGateData" />
<EnvironmentDialog v-if="environmentDialog" :data="environmentInfo" :close="() => (environmentDialog = false)" />
<VideoDialog v-if="videoDialog" :close="() => (videoDialog = false)" />
</div>
<div class="tabs">
<div class="tab" :class="{ checked: index === tabIndex }" v-for="(tab, index) in tabs" :key="index" @click="changeTab(index)">
@ -24,10 +25,11 @@ import Card from '../components/Card.vue'
import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
import FaceGageDialog from './components/FaceGageDialog.vue'
import EnvironmentDialog from './components/EnvironmentDialog.vue'
import VideoDialog from './components/VideoDialog.vue'
import { selectWorkerAttendanceByDevApi } from '@/assets/js/api/dataBoard'
import { getRealTimeDustNoiseDataApi } from '@/assets/js/api/environmentManage'
export default {
components: { Card, JNestedRingChart, FaceGageDialog, EnvironmentDialog },
components: { Card, JNestedRingChart, FaceGageDialog, EnvironmentDialog, VideoDialog },
props: {
title: {
type: String,
@ -57,7 +59,8 @@ export default {
ufaceDev: { deviceState: 1 }
},
environmentDialog: false,
environmentInfo: {}
environmentInfo: {},
videoDialog: false
}
},
methods: {
@ -73,6 +76,9 @@ export default {
case 'environment':
this.environmentDialog = true
break
case 'video':
this.videoDialog = true
break
default:
break
}

118
src/views/projectAdmin/jlw/digitalSite/components/VideoDialog.vue Normal file
View File

@ -0,0 +1,118 @@
<template>
<el-dialog title="视频监测" :visible="true" :modal-append-to-body="false" width="95%" top="0vh" class="videoDialog" @close="close">
<div class="pointDialog_l">
<div class="pointDialogContent">
<AreaTree @playParams="getPlayParams" :activeLive="activeLiveData" :videoType="1"></AreaTree>
<VideoModule
class="playVideoBox playVideoBox2"
:class="{ isIframe: isIframe }"
:value="playList"
:type="'1x1'"
:displayBottomMod="true"
:winNumBer="9"
:autoplay="false"
:showCaptrue="false"
:showControl="false"
:showPlayback="false"
:hiddenSelectBox="true"
:scrrenPosition="0"
></VideoModule>
</div>
</div>
</el-dialog>
</template>
<script>
import AreaTree from '@/components/areaTree'
import VideoModule from '@/components/videoModule/videoModule'
export default {
components: { AreaTree, VideoModule },
props: {
close: {
type: Object,
default: () => false
}
},
data() {
return {
videoList: [],
playList: [],
activeLiveData: { devSn: '' }
}
},
methods: {
getPlayParams(data) {
console.log(data, '大罗勒密河')
if (!this.showVideoDialog) {
this.videoList = data
} else {
this.playList = data
}
}
}
}
</script>
<style lang="less" scoped>
.videoDialog {
overflow: inherit;
.pointDialog_l {
width: 100%;
height: 800px;
padding-top: 1px;
background-size: 100% 100%;
z-index: 3;
.pointDialogContent {
margin: 40px 70px;
height: calc(100% - 80px);
/deep/.areaTreeInner {
background-color: transparent;
text-align: left;
padding: 0;
height: 100%;
width: 224px;
margin-right: 25px;
border: 1px solid rgba(26, 76, 90, 1);
.pageTitle {
display: none;
}
.treeBox {
background-color: transparent;
height: 100%;
}
.el-tree {
color: white;
}
}
}
}
}
.el-dialog__wrapper {
/deep/ .el-dialog {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0px;
.el-dialog__body {
background: #262d47;
}
.el-dialog__header {
text-align: center;
background: #262d47;
.el-dialog__title {
color: #6ce9f0;
font-size: 17px;
font-weight: 900;
.el-dialog__headerbtn {
.el-dialog__close {
color: #262d47;
}
}
}
.el-dialog__title::before {
background: #262d47;
}
}
}
}
</style>