From d6bf6c38fe15510aac8e56569ca0450fb8656c89 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期四, 30 七月 2020 18:55:09 +0800
Subject: [PATCH] 调整摄像机接入页面
---
src/pages/cameraAccess/index/App.vue | 377 +++++++++++++----------------------------------------
1 files changed, 93 insertions(+), 284 deletions(-)
diff --git a/src/pages/cameraAccess/index/App.vue b/src/pages/cameraAccess/index/App.vue
index d06b1f3..c88ca57 100644
--- a/src/pages/cameraAccess/index/App.vue
+++ b/src/pages/cameraAccess/index/App.vue
@@ -1,307 +1,116 @@
<template>
- <div class="s-video-manage">
- <el-tabs 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-tab-pane
- label="绠楀姏閰嶇疆"
- name="poll-setting"
- v-if="this.TreeDataPool.treeActiveName == 'camera' && isShow('VIDEOCAMERA:camera:resourceCalc')"
- >
- <poll-setting ref="pullSetting" />
- </el-tab-pane>
- <el-tab-pane
- label="绠楀姏閰嶇疆"
- name="poll-setting"
- v-if="this.TreeDataPool.treeActiveName == 'dataStack' && isShow('VIDEOCAMERA:dataStack:resourceCalc')"
- >
- <poll-setting ref="pullSetting" />
- </el-tab-pane>
- </el-tabs>
+ <div class="column">
+ <div class="column-left" :style="`height:${screenHeight}px;`">
+ <div class="resize-bar"></div>
+ <div class="resize-line"></div>
+ <div class="resize-save">
+ <left-nav :appName="'Video'" :height="screenHeight - 40"></left-nav>
+ </div>
+ </div>
+ <div class="column-right" :style="`height:${screenHeight}px;`">
+ <right-side />
+ </div>
</div>
</template>
<script>
-import CameraInfo from "@/components/camera/CameraInfo";
-import DataStackInfo from "@/components/camera/DataStackInfo"
-import SeparateRules from "@/components/camera/SeparateRules";
-import LinkageRule from "@/components/camera/LinkageRule";
-import PollSetting from "@/components/camera/PollSetting";
-// import fTemplate from "@/components/common/fTemplate";
-// import localSeparate from "@/components/camera/localSeparate";
-
-//import bus from "@/main";
-import TreeDataPool from "@/Pool/TreeData";
+import LeftNav from "@/components/LeftNav";
+// import CameraVideo from "./components/Video.vue";
+import RightSide from "./VideoManage"
export default {
+ name: "SearchPage",
components: {
- CameraInfo,
- DataStackInfo,
- SeparateRules,
- LinkageRule,
- PollSetting
+ LeftNav,
+ RightSide
},
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" ? "鎽勫儚鏈轰俊鎭�" : "鏁版嵁鏍堜俊鎭�"
+ screenHeight: 0,
}
- },
- 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)
+ this.screenHeight = document.documentElement.clientHeight - 20;
+ window.onresize = () => {
+ return (() => {
+ this.screenHeight = document.documentElement.clientHeight - 20;
+ })();
+ };
},
- 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%;
+
+<style lang="scss" scoped>
+.column {
+ overflow: hidden;
+}
+.column-left {
+ height: inherit;
+ background-color: #fff;
+ position: relative;
+ float: left;
+}
+.column-right {
height: 100%;
- float: right;
- box-sizing: border-box;
padding: 16px;
- background-color: #e9ebf2;
- .el-tabs--border-card {
- box-shadow: none;
- -webkit-box-shadow: none;
- border: none;
+ background-color: #eee;
+ box-sizing: border-box;
+ overflow: hidden;
+}
+.resize-save {
+ position: absolute;
+ top: 0;
+ right: 5px;
+ bottom: 0;
+ left: 0;
+ padding: 16px;
+ overflow-x: hidden;
+}
+.resize-bar {
+ width: 310px;
+ height: inherit;
+ resize: horizontal;
+ cursor: ew-resize;
+ opacity: 0;
+ overflow: scroll;
+ max-width: 500px; //璁惧畾鏈�澶ф媺浼搁暱搴�
+ min-width: 310px; //璁惧畾鏈�灏忓搴�
+}
+/* 鎷栨嫿绾� */
+.resize-line {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border-right: 2px solid #eee;
+ border-left: 1px solid #bbb;
+ pointer-events: none;
+}
+.resize-bar:hover ~ .resize-line,
+.resize-bar:active ~ .resize-line {
+ border-left: 1px dashed skyblue;
+}
+.resize-bar::-webkit-scrollbar {
+ width: 200px;
+ height: inherit;
+}
+
+/* Firefox鍙湁涓嬮潰涓�灏忓潡鍖哄煙鍙互鎷変几 */
+@supports (-moz-user-select: none) {
+ .resize-bar:hover ~ .resize-line,
+ .resize-bar:active ~ .resize-line {
+ border-left: 1px solid #bbb;
}
- // .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%;
- .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%;
- height: calc(100% - 52px);
- box-sizing: border-box;
- padding: 13px 38px;
- }
- .el-tab-pane {
- width: 100%;
- height: 100%;
+ .resize-bar:hover ~ .resize-line::after,
+ .resize-bar:active ~ .resize-line::after {
+ content: "";
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ bottom: 0;
+ right: -8px;
+ // background: url(./resize.svg);
+ background-size: 100% 100%;
}
}
</style>
--
Gitblit v1.8.0