ZZJ
2021-11-09 3db7e74be3bf1c4c239def25b51ba58acf5e2598
src/components/giantTree/index.vue
@@ -5,6 +5,7 @@
      :show-checkbox="TreeDataPool.multiple"
      :readonly="TreeDataPool.readonly"
      :gb28181="gb28181"
      :setting="setting"
      @onCreated="handleCreated"
      @onClick="itemClick"
      @onCheck="itemCheck"
@@ -16,6 +17,7 @@
      @onImport="importCameras"
      @onExpand="itemExpand"
      @onCollapse="itemCollapse"
      @onShowPic="showCameraPic"
    />
    <div class="dialog-box-bg" v-show="showDialog" @click="hideDialogBox"></div>
    <div
@@ -66,9 +68,16 @@
    height: {
      type: Number,
      default: 0
    }
    },
    setting: {
      type: Object,
      require: false,
      default: function () {
        return {};
      },
    },
  },
  data () {
  data() {
    return {
      hoverNodeId: "",
      showDialog: false,
@@ -86,7 +95,7 @@
      curNodeTid: '',
    };
  },
  created () {
  created() {
    // console.log(this.height, '树高度')
    this.TreeDataPool.zTree = true;
@@ -117,13 +126,10 @@
        //摄像机信息更新信息后,如果节点位置有变tId就不准了,this.TreeDataPool.selectedNode此时还是旧的信息
        let ztreeNodes = ztreeObj.getNodes();
        //var curNodeTid = '';
        console.log(ztreeNodes)
        _this.findTidByIdFromArr(ztreeNodes);
        console.log('curNodeTid', _this.curNodeTid)
        this.TreeDataPool.selectedNode.tId = _this.curNodeTid;
        let node = this.ztreeObj.getNodeByTId(this.TreeDataPool.selectedNode.tId)
        console.log('selecBode', this.TreeDataPool.selectedNode)
        console.log('selectedNode.tId', this.TreeDataPool.selectedNode.tId)
        // 多选时, 选中单选单击的节点
        if (this.TreeDataPool.multiple) {
          this.ztreeObj.checkAllNodes(false);
@@ -134,7 +140,7 @@
      }
    },
    findTidByIdFromArr (arr) {
    findTidByIdFromArr(arr) {
      let len = arr.length;
      let _this = this;
      for (var i = 0; i < len; i++) {
@@ -142,13 +148,13 @@
          _this.curNodeTid = arr[i].tId;
          break;
        }
        if(arr[i].children){
        if (arr[i].children) {
          this.findTidByIdFromArr(arr[i].children);
        }
      }
    },
    onDblClick (evt, treeId, item) {
    onDblClick(evt, treeId, item) {
      if (item.type !== "4" || this.app !== "Camera") {
        return;
      }
@@ -207,13 +213,13 @@
        this.TreeDataPool.activeVideoIndex = nullVideoIndex;
      }
    },
    addCamera (node) {
    addCamera(node) {
      this.$emit("addDevice", node);
    },
    importCameras (node) {
    importCameras(node) {
      this.$emit("import", node);
    },
    addNode (node) {
    addNode(node) {
      this.dialogForm = {
        text: "",
        method: "add",
@@ -221,7 +227,7 @@
      };
      this.showDialogBox(event);
    },
    editNode (node) {
    editNode(node) {
      this.dialogForm = {
        text: node.name,
        method: "edit",
@@ -231,10 +237,10 @@
      };
      this.showDialogBox(event);
    },
    delNode (node) {
    delNode(node) {
      this.TreeDataPool.del(node.id);
    },
    submitForm () {
    submitForm() {
      // 提交新增或者编辑区域节点表单
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
@@ -254,19 +260,18 @@
      });
      this.hideDialogBox();
    },
    hideDialogBox () {
    hideDialogBox() {
      this.showDialog = false;
      this.dialogForm = { text: "" };
    },
    showDialogBox (event) {
    showDialogBox(event) {
      let { clientX = 0, offsetY = 0 } = event;
      // this.clientX = clientX - 120;
      this.clientX = 50;
      this.clientY = offsetY;
      this.showDialog = true;
    },
    itemClick (evt, treeId, treeNode) {
      console.log(evt, treeId)
    itemClick(evt, treeId, treeNode) {
      this.TreeDataPool.selectedNode = treeNode;
      this.TreeDataPool.treeType = this.treeName;
@@ -293,7 +298,7 @@
    //   this.TreeDataPool.updateZTreeCheckNodes([treeNode]);
    // },
    itemCheck (evt, treeId, treeNode) {
    itemCheck(evt, treeId, treeNode) {
      this.TreeDataPool.selectedNode = treeNode;
      this.TreeDataPool.treeType = this.treeName;
@@ -301,18 +306,27 @@
      // this.ztreeObj.checkNode(treeNode, true, false, false);
      let checkedNodes = this.ztreeObj.getCheckedNodes(true);
      this.TreeDataPool.updateZTreeCheckNodes(checkedNodes);
      // 实时统计选中个数
      this.TreeDataPool.countCheckedNodes(checkedNodes);
      // 保存一份数据
      this.TreeDataPool.activeTreeData = this.ztreeObj.getNodes()
    },
    //展开
    itemExpand (e, id, node) {
      this.TreeDataPool.foldNodeList[node.id] = true
    },
    // 折叠
    itemCollapse (e, id, node) {
    itemExpand(e, id, node) {
      delete this.TreeDataPool.foldNodeList[node.id]
    },
    dropNode (node, item, draggedItem, e) {
    // 折叠
    itemCollapse(e, id, node) {
      this.TreeDataPool.foldNodeList[node.id] = true
    },
    dropNode(node, item, draggedItem, e) {
      // console.log('dropNode', node, item, draggedItem);
      this.TreeDataPool.dropNode(draggedItem.id, item.id)
    },
    showCameraPic(nodeId) {
      this.TreeDataPool.showBaseImage(nodeId)
    }
  }
};