From 832896ccaf8ac6a8ca31394e55577f064bc5eacf Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 20 十二月 2021 11:05:48 +0800
Subject: [PATCH] 暂存
---
src/pages/cameraAccess/index/VideoManage.vue | 619 +++++++++++++++++++++++++++++---------------------------
1 files changed, 319 insertions(+), 300 deletions(-)
diff --git a/src/pages/cameraAccess/index/VideoManage.vue b/src/pages/cameraAccess/index/VideoManage.vue
index 217ac51..1e264f4 100644
--- a/src/pages/cameraAccess/index/VideoManage.vue
+++ b/src/pages/cameraAccess/index/VideoManage.vue
@@ -1,300 +1,319 @@
-<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) {
- 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) {
- 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) {
- 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%;
- min-width: 1599px;
- height: 100%;
- float: left;
- 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;
- //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;
- height: calc(100% - 36px);
- 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>
+<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) {
+ 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) {
+ 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);
+ } 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;
+ height: 100%;
+ float: left;
+ 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;
+ //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;
+ height: calc(100% - 36px);
+ 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>
--
Gitblit v1.8.0