From 45abc1d097c88e3d9d5b4a7a71a2257cab9dd3ba Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 17 九月 2020 16:40:51 +0800
Subject: [PATCH] 可视化左侧树组件替换

---
 src/pages/cameraAccess/index/App.vue |    9 +-
 src/pages/visual/index/mixins.ts     |    3 +
 src/pages/visual/index/App.vue       |  162 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/pages/search/index/App.vue       |    2 
 4 files changed, 169 insertions(+), 7 deletions(-)

diff --git a/src/pages/cameraAccess/index/App.vue b/src/pages/cameraAccess/index/App.vue
index f6e5d1b..7997a48 100644
--- a/src/pages/cameraAccess/index/App.vue
+++ b/src/pages/cameraAccess/index/App.vue
@@ -61,7 +61,7 @@
 <style lang="scss" scoped>
 .column {
   overflow-y: hidden;
-  display: flex;
+  //display: flex;
   width: 100%;
   height: 100%;
 }
@@ -72,10 +72,11 @@
   // height: inherit;
   background-color: #fff;
   position: relative;
+  float: left;
 }
 .column-right {
   position: relative;
-  flex: 1;
+  //flex: 1;
   background-color: #fff;
   box-sizing: border-box;
   overflow-y: hidden;
@@ -90,7 +91,7 @@
   left: 0;
   padding: 14px;
   overflow-x: hidden;
-  overflow-y: hidden;
+  //overflow-y: hidden;
 }
 .resize-bar {
   width: 310px;
@@ -111,7 +112,7 @@
   border-right: 2px solid #efefef;
   border-left: 1px solid #e0e0e0;
   pointer-events: none;
-  cursor: ew-resize;
+  //cursor: ew-resize;
 }
 .resize-bar:hover ~ .resize-line,
 .resize-bar:active ~ .resize-line {
diff --git a/src/pages/search/index/App.vue b/src/pages/search/index/App.vue
index 5d69c6b..08426d8 100644
--- a/src/pages/search/index/App.vue
+++ b/src/pages/search/index/App.vue
@@ -100,7 +100,7 @@
   opacity: 0;
   overflow: scroll;
   max-width: 500px; //璁惧畾鏈�澶ф媺浼搁暱搴�
-  min-width: 310px; //璁惧畾鏈�灏忓搴�
+  min-width: 33px; //璁惧畾鏈�灏忓搴�
 }
 /* 鎷栨嫿绾� */
 .resize-line {
diff --git a/src/pages/visual/index/App.vue b/src/pages/visual/index/App.vue
index 2b9fb70..51303f5 100644
--- a/src/pages/visual/index/App.vue
+++ b/src/pages/visual/index/App.vue
@@ -9,7 +9,7 @@
         style="animation-duration: 0.7s;background: #051130;width:315px;float:left;height:100%"
       >
         <div class="tree-box" style="border: 2px solid #182c65;margin-top:7px">
-          <left-nav :height="screenHeight - 30"></left-nav>
+          <left-nav appName="Camera" :height="screenHeight - 30"></left-nav>
         </div>
       </div>
 
@@ -19,7 +19,8 @@
 </template>
 
 <script>
-import LeftNav from "../components/LeftNav.vue";
+//import LeftNav from "../components/LeftNav.vue";
+import LeftNav from "@/components/LeftNav.vue";
 import TopNav from "../components/TopNav.vue";
 import Home from "./home";
 
@@ -217,3 +218,160 @@
   }
 }
 </style>
+<style lang="scss">
+.left-tree-box {
+  width: 315px;
+  margin-left: 5px;
+
+  .el-menu {
+    border-right: solid 0px #e6e6e6 !important;
+  }
+  ul {
+    li {
+      .el-menu-item-group__title {
+        padding: none;
+      }
+    }
+    .el-submenu__title,
+    .el-menu-item {
+      padding-left: 10px !important;
+      color: #222222 !important;
+      font-size: 17px !important;
+      height: 35px;
+      line-height: 35px;
+      .el-submenu__icon-arrow {
+        font-size: 12px !important;
+        padding-right: 2px !important;
+      }
+      i {
+        padding-right: 10px !important;
+        font-size: 24px !important;
+        color: #95b7ff !important;
+      }
+    }
+  }
+  .navTopSelect {
+    .el-input__icon {
+      line-height: 34px;
+    }
+    // padding: 24px 0px;
+    padding-top: 24px;
+    padding-bottom: 12px;
+    input:nth-child(1) {
+      height: 34px;
+      box-shadow: 0 2px 11px -6px rgba(95, 95, 95, 0.5);
+    }
+    input:nth-child(2) {
+      height: 34px;
+      width: 103px;
+      box-shadow: 0 2px 11px -6px rgba(95, 95, 95, 0.5);
+    }
+  }
+
+  .el-input__inner {
+    background: #0e2457;
+    border: 1px solid #053e83;
+    box-shadow: 0 2px 11px -6px rgba(95, 95, 95, 0.5);
+    border-radius: 4px;
+    color: #95b7ff;
+  }
+  .el-select .el-input .el-select__caret {
+    color: #95b7ff;
+  }
+  input::-webkit-input-placeholder,
+  textarea::-webkit-input-placeholder {
+    /* WebKit browsers */
+    color: #9fbcfc;
+  }
+  .isCollapse {
+    font-size: 20px;
+    padding: 0px 5px;
+  }
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    .fontFamily,
+    .el-submenu__title .fontFamily,
+    .el-submenu__title .fontFamily {
+      padding-right: 20px;
+      font-size: 22px;
+    }
+  }
+  .tree-anchor .fontFamily {
+    font-size: 16px !important;
+    color: #2074ef;
+    padding-right: 0px !important;
+  }
+  .el-submenu__title,
+  .el-menu-item {
+    text-align: left;
+  }
+
+  .item-group {
+    margin-left: 33px;
+    margin-top: -12px;
+  }
+}
+.tree-close {
+  width: 10%;
+  margin-left: 10px;
+  font-size: 20px;
+  display: inline-block;
+  color: #9ea0a0;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.tree-edit {
+  z-index: 1;
+  font-size: 16px;
+  position: absolute;
+  top: 81px;
+  cursor: pointer;
+  button {
+    border: 0px;
+    color: #3d68e1;
+
+    background-color: transparent;
+    cursor: pointer;
+    outline: none;
+  }
+  button:hover {
+    color: rgb(82, 193, 245);
+  }
+}
+.tree-lock {
+  left: 76%;
+  button {
+    color: #000;
+  }
+}
+
+.gb-lock {
+  left: 76%;
+  top: -27px;
+  button {
+    color: #000;
+  }
+}
+.area-add {
+  left: 35%;
+}
+.camera-add {
+  left: 45%;
+}
+.tree-font {
+  font-family: PingFangSC-Medium;
+  font-size: 14px;
+  color: #95b7ff;
+}
+
+.gb-refresh {
+  top: -27px;
+  left: 113px;
+}
+.atooltip.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
+  border-bottom-color: #00000090;
+}
+.atooltip.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
+  border-bottom-color: #68666690;
+}
+</style>
diff --git a/src/pages/visual/index/mixins.ts b/src/pages/visual/index/mixins.ts
index f83ef5e..7970419 100644
--- a/src/pages/visual/index/mixins.ts
+++ b/src/pages/visual/index/mixins.ts
@@ -5,6 +5,7 @@
 import VideoPhotoData from "../Pool/VideoPhotoData";
 import VideoTaskData from "@/Pool/VideoTaskData";
 import VideoCaptrue from "@/Pool/VideoCapture";
+import DataStackPool from"@/Pool/dataStack";
 
 /* eslint-disable */
 const onlyTreeDataPool = new TreeDataPool;
@@ -14,6 +15,7 @@
 const onlyVideoPhotoData = new VideoPhotoData;
 const onlyVideoTaskData = new VideoTaskData;
 const onlyVideoCaptrue = new VideoCaptrue;
+const onlyDataStackPool = new DataStackPool;
 
 const mixin = {
   data() {
@@ -25,6 +27,7 @@
       VideoPhotoData: onlyVideoPhotoData,
       VideoTaskData: onlyVideoTaskData,
       VideoCaptrue: onlyVideoCaptrue,
+      DataStackPool: onlyDataStackPool
     };
   },
 };

--
Gitblit v1.8.0