<template>
|
<div class="s-video-manage">
|
<el-tabs class="video-tab" v-model="activeName" type="border-card" @tab-click="handleClick">
|
<el-tab-pane
|
:label="firstLabeName"
|
name="camera-info"
|
v-if="this.TreeDataPool.treeActiveName == 'camera' && isShow('VIDEOCAMERA:camera:info')"
|
>
|
<camera-info ref="cameraInfo" />
|
</el-tab-pane>
|
<el-tab-pane
|
:label="firstLabeName"
|
name="camera-info"
|
v-if="this.TreeDataPool.treeActiveName == 'dataStack' && isShow('VIDEOCAMERA:dataStack:stackInfo')"
|
>
|
<data-stack-info ref="dataStackInfo" />
|
</el-tab-pane>
|
<el-tab-pane
|
label="独立场景"
|
name="separate-rule"
|
v-if="this.TreeDataPool.treeActiveName == 'camera' && isShow('VIDEOCAMERA:camera:selfRule')"
|
>
|
<separate-rules ref="sepRule" />
|
<!-- <local-separate ref="localSeparate" v-else></local-separate> -->
|
</el-tab-pane>
|
<el-tab-pane
|
label="独立场景"
|
name="separate-rule"
|
v-if="this.TreeDataPool.treeActiveName == 'dataStack' && isShow('VIDEOCAMERA:dataStack:selfRule')"
|
>
|
<separate-rules ref="sepRule" />
|
<!-- <local-separate ref="localSeparate" v-else></local-separate> -->
|
</el-tab-pane>
|
<el-tab-pane
|
label="联动场景"
|
name="linkage-rule"
|
v-if="(isShow('VIDEOCAMERA:camera:linkRule') || isShow('VIDEOCAMERA:dataStack:linkRule')) && this.TreeDataPool.treeActiveName == 'camera'"
|
>
|
<linkage-rule ref="linkRule" />
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
|
<script>
|
import CameraInfo from "../components/CameraInfo";
|
import DataStackInfo from "../components/DataStackInfo"
|
import SeparateRules from "../components/SeparateRules";
|
import LinkageRule from "../components/LinkageRule";
|
// import fTemplate from "@/components/common/fTemplate";
|
// import localSeparate from "@/components/camera/localSeparate";
|
|
//import bus from "@/main";
|
//import TreeDataPool from "@/Pool/TreeData";
|
|
export default {
|
components: {
|
CameraInfo,
|
DataStackInfo,
|
SeparateRules,
|
LinkageRule },
|
data() {
|
return {
|
activeName: "camera-info",
|
buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
|
intervalTimer: null
|
};
|
},
|
computed: {
|
isAdmin() {
|
if (
|
sessionStorage.getItem("userInfo") &&
|
sessionStorage.getItem("userInfo") !== ""
|
) {
|
let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
|
return loginName === "superadmin" || loginName === "basic";
|
}
|
return false;
|
},
|
firstLabeName() {
|
return this.TreeDataPool.treeActiveName === "camera" ? "摄像机信息" : "数据栈信息"
|
}
|
},
|
watch: {
|
// 数据栈不显示联动规则，防止在选中联动规则tab中切换到数据栈
|
"TreeDataPool.treeActiveName": function (val) {
|
if (val === "dataStack" && this.activeName === "linkage-rule") {
|
this.activeName = "camera-info";
|
}
|
},
|
"TreeDataPool.selectedNode": function (node) {
|
if (this.activeName == "camera-info") {
|
if (this.TreeDataPool.treeActiveName == 'camera') {
|
this.$refs.cameraInfo.selectCamera(node);
|
}
|
} else if (this.activeName === "separate-rule") {
|
this.$refs.sepRule.Camera = {}
|
this.$refs.sepRule.initCameraData(node.id);
|
}
|
},
|
"TreeDataPool.selectedNodes": {
|
handler(nodes) {
|
if (this.activeName == "linkage-rule") {
|
this.$refs.linkRule.initCameraData();
|
}
|
},
|
deep: true
|
},
|
"DataStackPool.selectedDir": {
|
handler(node, oldNode) {
|
console.log(this.activeName)
|
console.log(node, '勾选本地视频')
|
if (this.TreeDataPool.treeActiveName !== 'dataStack') {
|
return
|
}
|
this.$nextTick(() => {
|
if (this.activeName == "camera-info") {
|
console.log("dataStackInfo.selectDir(node)")
|
this.$refs.dataStackInfo.selectDir(node);
|
} else if (this.activeName == "separate-rule" && node.length !== 0) {
|
this.$refs.sepRule.initCameraData(node.id);
|
}
|
})
|
},
|
deep: true
|
}
|
},
|
created() {
|
if (this.TreeDataPool.treeActiveName == 'camera') {
|
if (this.isShow('VIDEOCAMERA:camera:info')) {
|
this.activeName = "camera-info"
|
} else if (this.isShow('VIDEOCAMERA:camera:selfRule') || this.isShow('VIDEOCAMERA:datastack:selfRule')) {
|
this.activeName = "separate-rule"
|
} else if (this.isShow('VIDEOCAMERA:camera:linkRule') || this.isShow('VIDEOCAMERA:datastack:linkRule')) {
|
this.activeName = "linkage-rule"
|
} else if (this.isShow('VIDEOCAMERA:camera:resourceCalc') || this.isShow('VIDEOCAMERA:datastack:resourceCalc')) {
|
this.activeName = "poll-setting"
|
}
|
} else {
|
if (this.isShow('VIDEOCAMERA:camera:info')) {
|
this.activeName = "camera-info"
|
} else if (this.isShow('VIDEOCAMERA:camera:selfRule') || this.isShow('VIDEOCAMERA:datastack:selfRule')) {
|
this.activeName = "separate-rule"
|
} else if (this.isShow('VIDEOCAMERA:camera:linkRule') || this.isShow('VIDEOCAMERA:datastack:linkRule')) {
|
this.activeName = "linkage-rule"
|
} else if (this.isShow('VIDEOCAMERA:camera:resourceCalc') || this.isShow('VIDEOCAMERA:datastack:resourceCalc')) {
|
this.activeName = "poll-setting"
|
}
|
}
|
this.TreeDataPool.readonly = true;
|
this.TreeDataPool.gbReadonly = true;
|
this.TreeDataPool.multiple = false;
|
this.TreeDataPool.selectedNode = "";
|
this.selectedNodes = [];
|
this.VideoManageData.init();
|
},
|
beforeDestroy() {
|
clearInterval(this.intervalTimer);
|
//this.TreeDataPool.treeActiveName = "camera";
|
},
|
mounted() {
|
this.$nextTick(() => {
|
// bus.$on("addCameraOnTree", node => {
|
// this.handAddDevice(node);
|
// });
|
// bus.$on("addDirOnTree", node => {
|
// this.handAddDIr(node);
|
// });
|
// this.TreeDataPool.clean();
|
});
|
|
let _this = this
|
this.intervalTimer = setInterval(() => {
|
_this.PollData.statisticTaskInfo();
|
}, 10000)
|
},
|
methods: {
|
isShow(authority) {
|
if (this.isAdmin) {
|
return true;
|
} else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
|
return true;
|
} else if ("videoCamera:pollSetting" === authority) {
|
return true;
|
} else {
|
return false;
|
}
|
},
|
handAddDevice(node) {
|
let _this = this;
|
setTimeout(() => {
|
_this.$refs.cameraInfo.addDevice(node);
|
_this.activeName = "camera-info";
|
}, 100);
|
},
|
handAddDIr(node) {
|
let _this = this;
|
setTimeout(() => {
|
_this.$refs.dataStackInfo.addDir(node);
|
_this.activeName = "camera-info";
|
}, 100);
|
},
|
handleClick(tab, event) {
|
this.TreeDataPool.multiple = tab.name === "linkage-rule";
|
if (tab.name === "camera-info") {
|
if (this.TreeDataPool.treeActiveName == 'camera') {
|
this.$refs.cameraInfo.selectCamera(this.TreeDataPool.selectedNode);
|
} else if (this.TreeDataPool.treeActiveName == 'dataStack') {
|
this.$refs.dataStackInfo.selectDir(this.DataStackPool.selectedDir);
|
}
|
} else if (tab.name === "separate-rule") {
|
if (this.TreeDataPool.treeActiveName == 'camera') {
|
this.$refs.sepRule.initCameraData(this.TreeDataPool.selectedNode.id);
|
} else if (this.TreeDataPool.treeActiveName == 'dataStack') {
|
this.$refs.sepRule.initCameraData(this.DataStackPool.selectedDir.id);
|
}
|
} else if (this.activeName == "linkage-rule") {
|
this.$refs.linkRule.initCameraData();
|
} else if (this.activeName == "poll-setting") {
|
this.$nextTick(() => {
|
this.$refs.pullSetting.initLineChart();
|
})
|
}
|
}
|
}
|
};
|
</script>
|
<style lang="scss">
|
.s-video-manage {
|
width: 100%;
|
height: 100%;
|
float: right;
|
box-sizing: border-box;
|
.el-tabs--border-card {
|
box-shadow: none;
|
-webkit-box-shadow: none;
|
border: none;
|
}
|
// .s-video-manage-breadcrumb {
|
// height: 5%;
|
// -webkit-box-sizing: border-box;
|
// border: 1px solid #e4e7ed;
|
// -webkit-box-shadow: #e4e7ed 0px 0px 9px inset;
|
// box-shadow: #e4e7ed 0px 0px 9px inset;
|
// border-radius: 5px;
|
// }
|
.el-tabs--border-card {
|
height: 100%;
|
width: 100%;
|
&.video-tab{
|
&>.el-tabs__header{
|
position: fixed;
|
top:0;
|
width:100%;
|
z-index:9;
|
}
|
}
|
.el-tabs__header {
|
|
.is-active {
|
color: #3d68e1 !important;
|
}
|
.el-tabs__item:not(.is-disabled):hover {
|
color: #3d68e1 !important;
|
}
|
height: 52px;
|
border-bottom: none;
|
background-color: #f8f9fb;
|
.el-tabs__nav-wrap,
|
.el-tabs__nav-scroll,
|
.el-tabs__nav,
|
.el-tabs__item {
|
height: calc(100% + 1px);
|
}
|
.el-tabs__item {
|
line-height: 52px;
|
width: 144px;
|
border-right-color: transparent;
|
border-left-color: transparent;
|
font-family: PingFangSC-Medium;
|
font-size: 14px;
|
color: #222222;
|
}
|
}
|
}
|
.el-tabs__content {
|
width: 100%;
|
margin-top: 52px;
|
//height: calc(100% - 52px);
|
box-sizing: border-box;
|
padding: 13px 0;
|
}
|
.el-tab-pane {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
</style>
|
