574 lines
16 KiB
Vue
574 lines
16 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' : ''"> </span>
|
||
<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) {
|
||
this.treeData.forEach(item => {
|
||
if (this.activeLive.devSn == item.serialNumber) {
|
||
this.handleNodeClick(item)
|
||
this.$nextTick(() => {
|
||
this.$refs['tree'].setCurrentKey(item.itemId.toString())
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//获取视频播放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, 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()
|
||
})
|
||
}
|
||
},
|
||
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>
|