From c534501542feeaa6711f78c6cd91661f04eb4bcf Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期四, 17 九月 2020 17:48:46 +0800
Subject: [PATCH] 修复可视化树的样式

---
 src/pages/visual/components/LeftNav.vue        |   18 +---
 src/pages/visual/components/treeMenu/index.vue |    8 +
 src/pages/visual/Pool/CategoryData.ts          |    2 
 src/pages/visual/Pool/VideoPhotoData.ts        |    1 
 src/pages/visual/index/App.vue                 |  169 +----------------------------------------
 5 files changed, 19 insertions(+), 179 deletions(-)

diff --git a/src/pages/visual/Pool/CategoryData.ts b/src/pages/visual/Pool/CategoryData.ts
index 6dbe433..4464105 100644
--- a/src/pages/visual/Pool/CategoryData.ts
+++ b/src/pages/visual/Pool/CategoryData.ts
@@ -136,7 +136,7 @@
     // console.log(res,'棰勮鍒楄〃鏁版嵁')
     if (res && res.success) {
       this.personList = res.data.dataList
-      console.log(this.personList, "realTimeCapture")
+      // console.log(this.personList, "realTimeCapture")
     }
   }
 
diff --git a/src/pages/visual/Pool/VideoPhotoData.ts b/src/pages/visual/Pool/VideoPhotoData.ts
index cf36a9c..dbd7303 100644
--- a/src/pages/visual/Pool/VideoPhotoData.ts
+++ b/src/pages/visual/Pool/VideoPhotoData.ts
@@ -88,7 +88,6 @@
     // this.cardsForHome.length = 0
     this.cardsForHome.length = 0
     if (res && res.success) {
-      console.log("鍝堝搱鍝�", res)
       res.data.dataList.forEach((item, index) => {
         if (index < this.pageSize) {
           this.cardsForHome.push(item as any);
diff --git a/src/pages/visual/components/LeftNav.vue b/src/pages/visual/components/LeftNav.vue
index 2e2df43..77866ba 100644
--- a/src/pages/visual/components/LeftNav.vue
+++ b/src/pages/visual/components/LeftNav.vue
@@ -8,6 +8,7 @@
         active-text-color="#409EFF"
         style="height: 100%;"
         class="el-menu-vertical-demo"
+        unique-opened
         @open="menuOpen"
         @close="menuClose"
       >
@@ -84,6 +85,7 @@
               ref="tree"
               :treeName="'localTree'"
               :node="TreeDataPool.treeData"
+              :height="height"
               @addDevice="addCamera"
             />
           </el-menu-item-group>
@@ -118,18 +120,6 @@
             />
           </el-menu-item-group>
         </el-submenu>
-        <el-menu-item index="2">
-          <i class="font_family icon-benditupianx"></i>
-          <b slot="title" class="tree-font">鏈湴鍥剧墖</b>
-        </el-menu-item>
-        <el-menu-item index="3">
-          <i class="font_family icon-bendishipinx"></i>
-          <b slot="title" class="tree-font">鏈湴瑙嗛</b>
-        </el-menu-item>
-        <el-menu-item index="4">
-          <i class="font_family icon-zaixianshipinx"></i>
-          <b slot="title" class="tree-font">鍦ㄧ嚎瑙嗛</b>
-        </el-menu-item>
       </el-menu>
     </div>
   </transition>
@@ -137,6 +127,7 @@
 
 <script>
 import TreeMenu from "./treeMenu/index";
+// import TreeMenu from "@/components/treeMenu";
 import bus from "@/plugin/bus"
 
 export default {
@@ -320,6 +311,9 @@
     text-align: left;
   }
 
+  .el-submenu__title:hover {
+    background-color: #07284e !important;
+  }
   .item-group {
     margin-left: 33px;
     margin-top: -12px;
diff --git a/src/pages/visual/components/treeMenu/index.vue b/src/pages/visual/components/treeMenu/index.vue
index be62532..fb742f3 100644
--- a/src/pages/visual/components/treeMenu/index.vue
+++ b/src/pages/visual/components/treeMenu/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tree-menu">
+  <div class="tree-menu" :style="`max-height:${height - 170}px;`">
     <v-jstree
       :data="node"
       :item-events="itemClickEvents"
@@ -127,6 +127,10 @@
     gb28181: {
       type: Boolean,
       default: false
+    },
+    height: {
+      type: Number,
+      default: 0
     }
   },
   data() {
@@ -349,7 +353,7 @@
 }
 .tree-menu:hover {
   overflow-x: visible;
-  overflow-y: hidden;
+  overflow-y: auto;
   margin-bottom: 0px;
 }
 </style>
diff --git a/src/pages/visual/index/App.vue b/src/pages/visual/index/App.vue
index 51303f5..1ff4523 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 appName="Camera" :height="screenHeight - 30"></left-nav>
+          <left-nav :height="screenHeight - 30"></left-nav>
         </div>
       </div>
 
@@ -20,7 +20,7 @@
 
 <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";
 
@@ -71,18 +71,18 @@
 .tree-menu {
   max-width: 270px !important;
 }
-.box-card .s-card-right-double{
+.box-card .s-card-right-double {
   background-color: transparent;
 }
-.box-card .s-card-right-signal{
+.box-card .s-card-right-signal {
   background-color: transparent;
 }
 .left-tree-box .el-menu-vertical-demo:hover {
   overflow-y: visible;
   overflow-x: hidden;
 }
-.el-menu-vertical-demo::-webkit-scrollbar{
-  background-color: transparent!important;
+.el-menu-vertical-demo::-webkit-scrollbar {
+  background-color: transparent !important;
 }
 .el-menu-vertical-demo::-webkit-scrollbar-thumb {
   background-color: transparent !important;
@@ -216,162 +216,5 @@
     color: #3d68e1;
     cursor: pointer;
   }
-}
-</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>

--
Gitblit v1.8.0