设备管理 样式调整

mark

2022-10-25 f20a554bdb24e9dfde9dc6a69d78595944f61d15

 src/components/giantTree/index.vue

@@ -1,5 +1,28 @@
<template>
  <div class="tree-menu" :style="`max-height:${height - 200}px;`">
    <div class="devArea">
      <swiper :options="swiperOption" v-if="showDevArea">
        <swiper-slide
          v-for="item in nodeList"
          :key="item.devId"
          :class="{ active: activeTabObj.devId === item.devId }"
        >
          <div class="tab" @click="chooseTab(item)">
            {{ item.devName }}
          </div>
        </swiper-slide>
      </swiper>
      <div class="swiper-pre-border" v-if="showDevArea">
        <div class="icon-btn" slot="button-prev">
          <i class="iconfont">&#xe618;</i>
        </div>
      </div>
      <div class="swiper-next-border" v-if="showDevArea">
        <div class="icon-btn" slot="button-next">
          <i class="iconfont">&#xe623;</i>
        </div>
      </div>
    </div>
    <z-tree
      :nodes="node"
      :show-checkbox="TreeDataPool.multiple"
@@ -18,7 +41,9 @@
      @onExpand="itemExpand"
      @onCollapse="itemCollapse"
      @onShowPic="showCameraPic"
      :search="search"
    />
    <div class="empty" v-if="!node.length">暂无摄像机数据,请添加摄像机!</div>
    <div class="dialog-box-bg" v-show="showDialog" @click="hideDialogBox"></div>
    <div
      class="dialog-box"
@@ -86,6 +111,15 @@
        return {};
      },
    },
    search: {
      type: Boolean,
      default: false,
    },
    showDevArea: {
      type: Boolean,
      default: false,
    },
    nodeList: {},
  },
  data() {
    return {
@@ -102,9 +136,27 @@
        ],
      },
      curNodeTid: "",

      activeTabObj: {},
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 0,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-next-border",
          prevEl: ".swiper-pre-border",
        },
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
      },
    };
  },
  created() {
    this.activeTabObj =
      this.nodeList && this.nodeList.length > 0 ? this.nodeList[0] : "";
    this.TreeDataPool.zTree = true;
    this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndexVideo
      ? Number(sessionStorage.activeIndexVideo)
@@ -115,6 +167,9 @@
      if (newValue !== this.treeName) {
        this.TreeDataPool.cleanTree(this.treeName);
      }
    },
    showDevArea: function () {
      this.$forceUpdate();
    },
  },
  methods: {
@@ -147,6 +202,12 @@

        this.ztreeObj.selectNode(node, false, true);
      }
    },
    chooseTab(item) {
      this.$emit("saveTree", this.activeTabObj);
      setTimeout(() => {
        this.activeTabObj = item;
      }, 100);
    },

    findTidByIdFromArr(arr) {
@@ -287,7 +348,9 @@
      this.showDialog = true;
    },
    itemClick(evt, treeId, treeNode) {
      console.log("click");
      this.TreeDataPool.selectedNode = treeNode;
      this.TreeDataPool.activeNode = treeNode;
      this.TreeDataPool.treeType = this.treeName;

      // 多选
@@ -313,8 +376,11 @@
    //   this.TreeDataPool.updateZTreeCheckNodes([treeNode]);
    // },
    itemCheck(evt, treeId, treeNode) {
      this.TreeDataPool.selectedNode = treeNode;
      if (treeNode) {
        this.TreeDataPool.selectedNode = treeNode;
      }
      this.TreeDataPool.treeType = this.treeName;

      // 多选
      // this.ztreeObj.checkNode(treeNode, true, false, false);
      let checkedNodes = this.ztreeObj.getCheckedNodes(true);
@@ -325,6 +391,7 @@

      // 保存一份数据
      this.TreeDataPool.activeTreeData = this.ztreeObj.getNodes();
      this.$emit("itemChecked", treeNode);
    },
    //展开
    itemExpand(e, id, node) {
@@ -345,6 +412,9 @@
};
</script>
<style lang="scss" scoped>
.devArea {
}

.dialog-box {
  position: absolute;
  width: 220px;
@@ -402,9 +472,13 @@
}
.tree-menu {
  // max-width: 350px;
  min-height: 92px;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 4px;
}
.empty {
  line-height: 76px;
}
.tree-menu::-webkit-scrollbar {
  /*滚动条整体样式*/
@@ -429,4 +503,75 @@
.tree-menu:hover {
  overflow-y: auto;
}

.devArea {
  position: relative;
  margin: 20px;
  background: #f0f5fa;
  padding: 0 40px;

  .swiper-slide {
    display: flex;
    align-items: center;
    height: 46px;

    &.active {
      .tab {
        color: #0064ff;
      }
      border-bottom: 2px solid #0064ff;
    }

    .tab {
      margin: 0 12px 0 24px;
      font-size: 14px;
      color: #666;
      cursor: pointer;
    }

    .iconfont {
      font-size: 12px;
      color: #dbdbdb;
    }
  }

  .swiper-pre-border {
    position: absolute;
    padding-bottom: 13px;
    padding-right: 18px;
    top: 12px;
    left: 10px;
    cursor: pointer;

    i {
      font-size: 16px;
      color: #999;
    }
  }

  .swiper-next-border {
    position: absolute;
    top: 12px;
    right: 10px;
    padding-bottom: 13px;
    padding-left: 18px;
    cursor: pointer;

    i {
      font-size: 16px;
      color: #999;
    }
  }

  .swiper-button-disabled {
    cursor: not-allowed;
    i {
      color: #dbdbdb;
    }
  }

  .del {
    cursor: pointer;
  }
}
</style>