修复可视化树的样式

zhangzengfei

2020-09-17 c534501542feeaa6711f78c6cd91661f04eb4bcf

修复可视化树的样式

 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")
    }
  }


 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);

 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;

 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>

 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>