270 lines
6.7 KiB
Vue
270 lines
6.7 KiB
Vue
<template>
|
|
<div class="monitor">
|
|
<div class="title">
|
|
<Card title="总平面图" style="width:390%">
|
|
<div style="width:326px;height:170px;position: absolute;">
|
|
<img style="width:310px;height:170px;margin-top: 20px;" src="~@/assets/images/zjsj/monitor.jpg" alt="">
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
<Card title="监控设备列表" style="width: 16% !important;margin: 13% 0px 0 -100px; ">
|
|
<!-- 左边列表 -->
|
|
<div class="videoLeft">
|
|
|
|
<div class="videoList" v-if="dataType == 1">
|
|
<vue-scroll style="height:630px;width:320px">
|
|
|
|
<!-- <el-table-column type="index" label="序号"></el-table-column> -->
|
|
<el-tree
|
|
:data="dataList"
|
|
:props="defaultProps"
|
|
@node-click="changeVideo"
|
|
>
|
|
|
|
</el-tree>
|
|
</vue-scroll>
|
|
</div>
|
|
|
|
<div class="videoBox" v-else>
|
|
<vue-scroll style="height:200px">
|
|
<el-collapse v-model="activeNames" style="padding: 0 20px">
|
|
<el-collapse-item
|
|
:title="item.name"
|
|
:name="index"
|
|
v-for="(item, index) in devList"
|
|
:key="index"
|
|
>
|
|
<ul v-if="item.list.length > 0">
|
|
<li
|
|
@click="changeVideo(data)"
|
|
v-for="(data, index2) in item.list"
|
|
:key="index2"
|
|
>
|
|
<img
|
|
v-if="data.deviceType == 2"
|
|
src="@/assets/images/icon-video2-white.png"
|
|
/>
|
|
<img v-else src="@/assets/images/icon-video-white.png" />
|
|
{{ data.videoName }}
|
|
</li>
|
|
</ul>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</vue-scroll>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<!-- 右边视频 -->
|
|
<Card title="视频监控" style="width: 80%; margin-right: 40px">
|
|
<div class="videoTight">
|
|
<VideoModule
|
|
class="playVideoBox"
|
|
:type="'project'"
|
|
:value="selectList"
|
|
:displayBottomMod="false"
|
|
:winNumBer="9"
|
|
:autoplay="false"
|
|
:showCaptrue="false"
|
|
:showControl="false"
|
|
:showPlayback="false"
|
|
:xxx="7"
|
|
></VideoModule>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import Left from "./left.vue";
|
|
// import Right from "./right.vue"
|
|
import {
|
|
selectProjectVideoListApi,
|
|
selectUserVideoListApi,
|
|
} from "@/assets/js/api/equipmentCenter/cameraList";
|
|
import Card from "../components/Card.vue";
|
|
import VideoModule from "@/components/videoModule/videoModule.vue";
|
|
export default {
|
|
components: { Card, VideoModule },
|
|
data() {
|
|
return {
|
|
devList: [],
|
|
selectList: [],
|
|
dataType: 1,
|
|
activeNames: [0],
|
|
screens: {},
|
|
pluginType: "",
|
|
current: -1,
|
|
threeIndex: -1,
|
|
currentTwo: -1,
|
|
dataList: [],
|
|
defaultProps: {
|
|
children: "list",
|
|
label: "videoName",
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
// console.dir(window.parent)
|
|
// console.log(window.parent.document.getElementById("myFrame"), 12312313)
|
|
if (this.$store.state.userInfo.accountType != 6) {
|
|
this.loadData();
|
|
} else {
|
|
this.loadData2();
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
changeVideo(item) {
|
|
console.log(item, "xxxxxxxxxx");
|
|
this.selectList = [item];
|
|
console.log("右边的值", this.selectList);
|
|
},
|
|
loadData() {
|
|
selectProjectVideoListApi({
|
|
projectSn: this.$store.state.projectSn,
|
|
}).then((res) => {
|
|
this.dataList=res.result.videoList
|
|
for(let i = 1; i <= this.dataList.length;i++) {
|
|
this.dataList[i-1].videoName = i+"."+this.dataList[i-1].videoName
|
|
}
|
|
|
|
this.selectList = [this.dataList[0],this.dataList[1],this.dataList[2],this.dataList[3]];
|
|
console.log("视频的列表", res);
|
|
this.dataType = res.result.type;
|
|
});
|
|
},
|
|
loadData2() {
|
|
selectUserVideoListApi({
|
|
projectSn: this.$store.state.projectSn,
|
|
userId: this.$store.state.userInfo.userId,
|
|
}).then((res) => {
|
|
var DATA = res.result.videoList;
|
|
this.devList = DATA;
|
|
this.dataType = res.result.type;
|
|
});
|
|
},
|
|
showThree(a, b) {},
|
|
next2(item) {
|
|
// this.secondId = item.id;
|
|
// this.loadRigthtList();
|
|
},
|
|
next(index, $event, data, type) {
|
|
console.log("data", data);
|
|
this.currentTwo = -1;
|
|
//
|
|
if (this.current != index) {
|
|
this.threeIndex = -1;
|
|
}
|
|
|
|
this.threeData = [];
|
|
this.type = type;
|
|
this.parentid1 = data.id;
|
|
if (this.current == index) {
|
|
this.current = -1;
|
|
} else {
|
|
this.current = index;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.monitor {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.topImg{
|
|
position: absolute;
|
|
}
|
|
.textSize {
|
|
font-size: 15px !important;
|
|
}
|
|
.videoLeft {
|
|
width: 20%;
|
|
height: 100%;
|
|
.videoList {
|
|
margin-top: 20px;
|
|
margin-left: 2px !important;
|
|
}
|
|
}
|
|
.videoTight {
|
|
width: 99%;
|
|
height: 90%;
|
|
margin-left: 9px;
|
|
margin-top: 1.5%;
|
|
}
|
|
|
|
::v-deep .el-tree-node__expand-icon {
|
|
// position: absolute;
|
|
// right: -600%;
|
|
// color: red;
|
|
font-size: 16px;
|
|
margin-left: -33px;
|
|
}
|
|
::v-deep .el-tree-node__label {
|
|
font-size: 16px;
|
|
margin-left: 15px;
|
|
color: #fff;
|
|
}
|
|
::v-deep .el-tree-node {
|
|
// color: #fff;
|
|
height: 30px;
|
|
margin-top: 15px;
|
|
width: 300px !important;
|
|
background: url('~@/assets/images/zjsj/zjsj_bgi.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
::v-deep .el-tree-node__content {
|
|
font-size: 15px;
|
|
}
|
|
::v-deep .el-tree-node__children {
|
|
width: 300px;
|
|
color: #fff !important;
|
|
}
|
|
::v-deep .el-tree-node__content {
|
|
color:#fff !important;
|
|
width: 300px !important;
|
|
|
|
// color: #fff !important;
|
|
font-size: 20px;
|
|
|
|
}
|
|
::v-deep .el-tree__empty-text {
|
|
width: 200px;
|
|
position: absolute;
|
|
left: 250%;
|
|
top: 600%;
|
|
transform: translate(-50%, -50%);
|
|
color: #737996;
|
|
font-size: 18px;
|
|
}
|
|
::v-deep .el-tree-node:focus > .el-tree-node__content{
|
|
background-color:none
|
|
}
|
|
::v-deep .el-tree-node:focus > .el-tree-node__content {
|
|
/*设置选中的样式 */
|
|
height: 30px;
|
|
background-color: #66D4D9 !important;
|
|
}
|
|
::v-deep .el-tree-node__content:hover {
|
|
/*设置鼠标飘过的颜色 */
|
|
background: #66D4D9 !important;
|
|
color: #fff;
|
|
height: 30px;
|
|
|
|
}
|
|
|
|
::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
|
/*current选中的样式 */
|
|
height: 30px;
|
|
|
|
color: #fff;
|
|
font-weight: bold;
|
|
background-color: #66D4D9 !important;
|
|
}
|
|
}
|
|
</style>
|