<template>
|
<div class="s-video-manage">
|
<el-tabs
|
class="video-tab"
|
ref="topTab"
|
v-model="activeName"
|
type="border-card"
|
@tab-click="handleClick"
|
>
|
<el-tab-pane
|
:label="firstLabeName"
|
name="camera-info"
|
v-if="
|
this.TreeDataPool.treeActiveName == 'camera' &&
|
isShow('cameraAccess:cameraInfo')
|
"
|
>
|
<camera-info ref="cameraInfo" />
|
</el-tab-pane>
|
<el-tab-pane
|
:label="firstLabeName"
|
name="camera-info"
|
v-if="
|
this.TreeDataPool.treeActiveName == 'dataStack' &&
|
isShow('dataStack:cameraInfo')
|
"
|
>
|
<data-stack-info ref="dataStackInfo" />
|
</el-tab-pane>
|
<el-tab-pane
|
label="独立场景"
|
name="separate-rule"
|
v-if="
|
this.TreeDataPool.treeActiveName == 'camera' &&
|
isShow('cameraAccess: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('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('cameraAccess: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 "@/plugin/bus";
|
//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) {
|
console.log(this.TreeDataPool.selectedNode);
|
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, node.cameraType);
|
}
|
},
|
"TreeDataPool.selectedNodes": {
|
handler() {
|
if (this.activeName == "linkage-rule") {
|
this.$refs.linkRule.initCameraData(
|
this.TreeDataPool.selectedNode.cameraType
|
);
|
}
|
},
|
deep: true,
|
},
|
"DataStackPool.selectedDir": {
|
handler(node, oldNode) {
|
if (this.TreeDataPool.treeActiveName !== "dataStack") {
|
return;
|
}
|
this.$nextTick(() => {
|
if (this.activeName == "camera-info") {
|
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("cameraAccess:cameraInfo")) {
|
this.activeName = "camera-info";
|
} else if (this.isShow("cameraAccess:selfRule")) {
|
this.activeName = "separate-rule";
|
} else if (this.isShow("cameraAccess:linkRule")) {
|
this.activeName = "linkage-rule";
|
}
|
} else {
|
if (this.isShow("dataStack:cameraInfo")) {
|
this.activeName = "camera-info";
|
} else if (this.isShow("dataStack:selfRule")) {
|
this.activeName = "separate-rule";
|
}
|
}
|
|
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.PollData.statisticTaskInfo();
|
this.intervalTimer = setInterval(() => {
|
_this.PollData.statisticTaskInfo();
|
}, 10000);
|
},
|
methods: {
|
isShow(authority) {
|
return (
|
this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
|
);
|
},
|
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) {
|
console.log(this.TreeDataPool);
|
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,
|
this.TreeDataPool.selectedNode.cameraType
|
);
|
} 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%;
|
min-width: 1599px;
|
float: left;
|
box-sizing: border-box;
|
user-select: none;
|
.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 {
|
width: 100%;
|
&.video-tab {
|
& > .el-tabs__header {
|
//position: fixed;
|
//position: absolute;
|
//top:0;
|
//left: 0;
|
height: 54px;
|
overflow-y: hidden;
|
}
|
}
|
.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;
|
}
|
}
|
}
|
.video-tab > .el-tabs__content {
|
width: 100%;
|
//margin-top: 52px;
|
box-sizing: border-box;
|
overflow-y: auto;
|
padding: 0;
|
}
|
.video-tab > .el-tabs__content::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
|
height: 6px;
|
}
|
.el-tab-pane {
|
width: 100%;
|
//height: 100%;
|
}
|
}
|
</style>
|
