909 lines
27 KiB
Vue
909 lines
27 KiB
Vue
|
<template>
|
|||
|
|
<div
|
|||
|
|
class="areaTreeBox"
|
|||
|
|
: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': ''"
|
|||
|
|
>
|
|||
|
|
<div class="pageTitle" v-if="videoType == 1">视频列表</div>
|
|||
|
|
<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"
|
|||
|
|
>
|
|||
|
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
|||
|
|
<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'
|
|||
|
|
: ''
|
|||
|
|
"
|
|||
|
|
>{{ node.label }}</span
|
|||
|
|
>
|
|||
|
|
<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
|
|||
|
|
"
|
|||
|
|
@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>
|
|||
|
|
</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/noData2.png" alt="" srcset="" v-else />
|
|||
|
|
<p>{{ $t("message.videoManage.empty") }}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
class="onoffBtn"
|
|||
|
|
:class="expandOnoff ? 'active' : ''"
|
|||
|
|
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
|
|||
|
|
>
|
|||
|
|
</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";
|
|||
|
|
export default {
|
|||
|
|
props: ["videoType", "modules", "activeLive","styleType",'videoSn'],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
treeData: [],
|
|||
|
|
defaultProps: {
|
|||
|
|
children: "list",
|
|||
|
|
label: "name",
|
|||
|
|
},
|
|||
|
|
expandOnoff: false,
|
|||
|
|
searchsn: "",
|
|||
|
|
videoList: [],
|
|||
|
|
expandKeys: [],
|
|||
|
|
numIndex: 1, //用于不用账号登录左边组织机构的点击
|
|||
|
|
markRoomDevList: [],
|
|||
|
|
company: "",
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.company = COMPANY;
|
|||
|
|
this.loadData();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getMarkRoomDev(sn) {
|
|||
|
|
getstandardDevListApi({ projectSn: sn }).then((res) => {
|
|||
|
|
this.markRoomDevList = res.result;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
loadData() {
|
|||
|
|
console.log(isDockingToWoer)
|
|||
|
|
console.log(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 {
|
|||
|
|
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;
|
|||
|
|
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
this.searchsn = this.$store.state.userInfo.sn;
|
|||
|
|
this.numIndex = 3;
|
|||
|
|
break;
|
|||
|
|
case 4:
|
|||
|
|
this.searchsn = this.$store.state.userInfo.sn;
|
|||
|
|
this.numIndex = 4;
|
|||
|
|
break;
|
|||
|
|
case 7:
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
if (this.$route.path.indexOf("/project/") != -1) {
|
|||
|
|
this.searchsn = this.$store.state.projectSn;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// getComapnyVideoListApi({
|
|||
|
|
// sn: this.searchsn
|
|||
|
|
// }).then((res) => {
|
|||
|
|
// this.videoList = res.result.videoList;
|
|||
|
|
// if(this.videoList[0].videoType==3){
|
|||
|
|
// this.$emit('playParams',this.videoList)
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
getComapnyStatisticsListApi({
|
|||
|
|
sn: this.searchsn,
|
|||
|
|
videoType: this.videoType,
|
|||
|
|
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)
|
|||
|
|
console.log(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.activeLive) {
|
|||
|
|
// console.log(this.activeLive,this.treeData)
|
|||
|
|
this.treeData.forEach((item) => {
|
|||
|
|
if (this.activeLive.devSn == item.serialNumber) {
|
|||
|
|
this.handleNodeClick(item);
|
|||
|
|
// console.log(item.id)
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
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 = "";
|
|||
|
|
|
|||
|
|
if (videoType == 1) {
|
|||
|
|
switch (Number(result.projectVideoConfig.playType)) {
|
|||
|
|
case 1:
|
|||
|
|
url = result.videoInfo.rtmpHd;
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
url = result.videoInfo.rtmp;
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
url = result.videoInfo.hdFlvAddress;
|
|||
|
|
break;
|
|||
|
|
case 4:
|
|||
|
|
url = result.videoInfo.flvAddress;
|
|||
|
|
break;
|
|||
|
|
case 5:
|
|||
|
|
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;
|
|||
|
|
default:
|
|||
|
|
url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
this.$emit("playParams", [
|
|||
|
|
{
|
|||
|
|
accessToken: result.accessToken,
|
|||
|
|
url: url,
|
|||
|
|
videoType: videoType,
|
|||
|
|
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", [
|
|||
|
|
{
|
|||
|
|
accessToken: result.accessToken,
|
|||
|
|
url: item.liveRadioUrl,
|
|||
|
|
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');
|
|||
|
|
let companyType = data.companyType
|
|||
|
|
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 {
|
|||
|
|
let sn1 = data.projectSn ? data.projectSn : data.companySn;
|
|||
|
|
getComapnyParentNameApi({
|
|||
|
|
sn: sn1,
|
|||
|
|
}).then((res) => {
|
|||
|
|
let backArr = [];
|
|||
|
|
let data = res.result;
|
|||
|
|
console.log(res)
|
|||
|
|
backArr.push({
|
|||
|
|
name: data.firstCompanyName,
|
|||
|
|
sn: data.firstCompanySn,
|
|||
|
|
});
|
|||
|
|
if (data.secondCompanyName) {
|
|||
|
|
backArr.push({
|
|||
|
|
name: data.secondCompanyName,
|
|||
|
|
sn: data.secondCompanySn,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (data.thirdCompanyName) {
|
|||
|
|
backArr.push({
|
|||
|
|
name: data.thirdCompanyName,
|
|||
|
|
sn: data.thirdCompanySn,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (data.projectName) {
|
|||
|
|
backArr.push({ name: data.projectName, sn: data.projectSn });
|
|||
|
|
}
|
|||
|
|
if(!companyType){
|
|||
|
|
backArr[backArr.length-1].isProject = true
|
|||
|
|
}
|
|||
|
|
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);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.treeTitle {
|
|||
|
|
padding: 0px 0 20px 0px;
|
|||
|
|
}
|
|||
|
|
.pageTitle {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.onoffBtn {
|
|||
|
|
color: white;
|
|||
|
|
width: 20px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
position: absolute;
|
|||
|
|
right: -20px;
|
|||
|
|
top: calc(50% - 93px);
|
|||
|
|
padding: 35px 0;
|
|||
|
|
text-align: center;
|
|||
|
|
background-color: #bbb;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border-top-right-radius: 4px;
|
|||
|
|
border-bottom-right-radius: 4px;
|
|||
|
|
.el-icon-caret-left {
|
|||
|
|
line-height: 116px;
|
|||
|
|
}
|
|||
|
|
&.active {
|
|||
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.custom-tree-node {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.areaTreeBox {
|
|||
|
|
/deep/.el-tree {
|
|||
|
|
font-size: 15px;
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: transparent;
|
|||
|
|
.el-tree-node {
|
|||
|
|
white-space: normal;
|
|||
|
|
&:focus > .el-tree-node__content {
|
|||
|
|
background-color: transparent;
|
|||
|
|
}
|
|||
|
|
&.is-current > .el-tree-node__content {
|
|||
|
|
background-color: rgba(81, 129, 246, 0.14);
|
|||
|
|
color: #5181f6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.el-tree-node__content {
|
|||
|
|
// height: 32px;
|
|||
|
|
padding: 7px 0;
|
|||
|
|
height: auto;
|
|||
|
|
line-height: 16px;
|
|||
|
|
position: relative;
|
|||
|
|
// margin-bottom: 7px;
|
|||
|
|
&:hover {
|
|||
|
|
background-color: rgba(81, 129, 246, 0.14);
|
|||
|
|
color: #5181f6;
|
|||
|
|
// font-weight: bold;
|
|||
|
|
.icon-video {
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.videoName {
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
.projectName {
|
|||
|
|
font-size: 14px;
|
|||
|
|
width: calc(100% - 30px);
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
.companyName2 {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.el-tree-node__expand-icon {
|
|||
|
|
font-size: 16px;
|
|||
|
|
padding: 0 6px;
|
|||
|
|
&.is-leaf {
|
|||
|
|
color: transparent !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.noVideo.areaTreeBox {
|
|||
|
|
height: calc(100% + 48px);
|
|||
|
|
position: absolute;
|
|||
|
|
top: -48px;
|
|||
|
|
left: 0;
|
|||
|
|
.treeTitle {
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
/deep/.el-tree {
|
|||
|
|
color: #ffffff;
|
|||
|
|
|
|||
|
|
.el-tree-node__content:hover,
|
|||
|
|
.el-tree-node:focus > .el-tree-node__content {
|
|||
|
|
background-color: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-tree__empty-text {
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/deep/.el-tree-node__expand-icon {
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.areaTreeInner {
|
|||
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|||
|
|
width: 300px;
|
|||
|
|
padding: 20px 15px;
|
|||
|
|
height: calc(100% - 40px);
|
|||
|
|
}
|
|||
|
|
.treeBox {
|
|||
|
|
height: calc(100% - 42px);
|
|||
|
|
}
|
|||
|
|
.hasVedio.areaTreeBox {
|
|||
|
|
height: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
top: 0;
|
|||
|
|
float: left;
|
|||
|
|
.treeBox {
|
|||
|
|
background-color: rgba(216, 216, 216, 0.2);
|
|||
|
|
}
|
|||
|
|
.el-tree {
|
|||
|
|
padding: 20px 10px;
|
|||
|
|
height: calc(100% - 50px);
|
|||
|
|
width: calc(100% - 20px);
|
|||
|
|
.disabled {
|
|||
|
|
opacity: 0.5;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.treeTitle {
|
|||
|
|
background-color: #f7f7f7;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.areaTreeInner {
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
}
|
|||
|
|
/deep/.el-tree-node__expand-icon {
|
|||
|
|
// color: rgba(42, 46, 63, 0.3);
|
|||
|
|
}
|
|||
|
|
// /deep/.el-tree-node__expand-icon.is-leaf{
|
|||
|
|
// color: rgba(42, 46, 63, 0.3);
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
.icon-video {
|
|||
|
|
margin-right: 13px;
|
|||
|
|
width: 14px;
|
|||
|
|
height: 20px;
|
|||
|
|
display: inline-block;
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.playAllBtn {
|
|||
|
|
width: 18px;
|
|||
|
|
height: 18px;
|
|||
|
|
// display: inline-block;
|
|||
|
|
// margin-left: 10px;
|
|||
|
|
// vertical-align: text-top;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
background: url("../assets/images/icon-play.png") center center no-repeat;
|
|||
|
|
&:hover {
|
|||
|
|
background: url("../assets/images/icon-play-blue.png") center center
|
|||
|
|
no-repeat;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.statusImgBox {
|
|||
|
|
float: right;
|
|||
|
|
img {
|
|||
|
|
margin-left: 5px;
|
|||
|
|
&:first-child {
|
|||
|
|
margin-left: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.longguang {
|
|||
|
|
.el-tree-node__content {
|
|||
|
|
&:hover {
|
|||
|
|
background-color: rgba(81, 129, 246, 0.14);
|
|||
|
|
color: #5181f6;
|
|||
|
|
// font-weight: bold;
|
|||
|
|
.icon-video {
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.playAllBtn {
|
|||
|
|
&: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{
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 5px 10px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
background-color: #021330;
|
|||
|
|
height: 20px;
|
|||
|
|
line-height: 10px;
|
|||
|
|
&::before{
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
.treeBox{
|
|||
|
|
background-color: #021330 !important;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
.custom-tree-node{
|
|||
|
|
color:#fff;
|
|||
|
|
}
|
|||
|
|
.areaTreeBox {
|
|||
|
|
/deep/ .el-tree-node__expand-icon{
|
|||
|
|
color: #fff !important;
|
|||
|
|
}
|
|||
|
|
/deep/ .el-tree-node__content{
|
|||
|
|
color: #fff !important;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.icon-video {
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.projectName:hover {
|
|||
|
|
color:#5181f6;
|
|||
|
|
&::before {
|
|||
|
|
content: "";
|
|||
|
|
display: inline-block;
|
|||
|
|
background-color: #fff;
|
|||
|
|
width: 1.5%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0%;
|
|||
|
|
left: 0%;
|
|||
|
|
background-color:#5181f6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.custom-tree-node:hover{
|
|||
|
|
color:#5181f6;
|
|||
|
|
&::before {
|
|||
|
|
content: "";
|
|||
|
|
display: inline-block;
|
|||
|
|
background-color: #fff;
|
|||
|
|
width: 1.5%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0%;
|
|||
|
|
left: 0%;
|
|||
|
|
background-color:#5181f6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|