完善国标树配置功能

zhangzengfei

2021-12-23 8de8ffd91ab6f96f35cf1357fd025051471ad4af

 src/components/giantTree/index.vue

@@ -5,9 +5,12 @@
      :show-checkbox="TreeDataPool.multiple"
      :readonly="TreeDataPool.readonly"
      :gb28181="gb28181"
      :setting="setting"
      :search="search"
      @onCreated="handleCreated"
      @onClick="itemClick"
      @onCheck="itemCheck"
      @onAfterSearch="itemCheck"
      @onDblClick="onDblClick"
      @onAddNode="addNode"
      @onRemoveNode="delNode"
@@ -16,13 +19,10 @@
      @onImport="importCameras"
      @onExpand="itemExpand"
      @onCollapse="itemCollapse"
      @onShowPic="showCameraPic"
    />
    <div class="dialog-box-bg" v-show="showDialog" @click="hideDialogBox"></div>
    <div
      class="dialog-box"
      v-show="showDialog"
      :style="{ left: clientX + 'px', top: clientY + 'px' }"
    >
    <div class="dialog-box" v-show="showDialog" :style="{ left: clientX + 'px', top: clientY + 'px' }">
      <el-card :body-style="{ padding: '10px' }">
        <el-form :model="dialogForm" size="mini" :rules="rules" ref="dialogForm" label-width="70px">
          <el-form-item label="名称：" prop="name">
@@ -63,9 +63,24 @@
      type: Boolean,
      default: false
    },
    search: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 0
    },
    setting: {
      type: Object,
      require: false,
      default: function() {
        return {}
      }
    },
    clickType: {
      type: String,
      default: ""
    }
  },
  data() {
@@ -83,28 +98,28 @@
          { min: 2, max: 10, message: "长度在2到10个字", trigger: "change" }
        ]
      },
      curNodeTid: '',
    };
      curNodeTid: ""
    }
  },
  created() {
    // console.log(this.height, '树高度')
    this.TreeDataPool.zTree = true;
    this.TreeDataPool.zTree = true

    this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndexVideo
      ? Number(sessionStorage.activeIndexVideo)
      : this.TreeDataPool.activeVideoIndex;
      : this.TreeDataPool.activeVideoIndex
  },
  watch: {
    "TreeDataPool.treeType": function (newValue) {
    "TreeDataPool.treeType": function(newValue) {
      if (newValue !== this.treeName) {
        this.TreeDataPool.cleanTree(this.treeName);
        this.TreeDataPool.cleanTree(this.treeName)
      }
    }
  },
  methods: {
    handleCreated: function (ztreeObj) {
      let _this = this;
      this.ztreeObj = ztreeObj;
    handleCreated: function(ztreeObj) {
      let _this = this
      this.ztreeObj = ztreeObj
      // console.log("handleCreated")
      // onCreated 中操作ztreeObj对象展开第一个节点
      // ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
@@ -113,21 +128,18 @@
      if (this.TreeDataPool.selectedNode.id) {
        // 取消所有多选的节点,仅保留当前单选的节点
        this.TreeDataPool.selectedNodes = [this.TreeDataPool.selectedNode.id]
        this.curNodeTid = this.TreeDataPool.selectedNode.tId;
        this.curNodeTid = this.TreeDataPool.selectedNode.tId
        //摄像机信息更新信息后，如果节点位置有变tId就不准了,this.TreeDataPool.selectedNode此时还是旧的信息
        let ztreeNodes = ztreeObj.getNodes();
        let ztreeNodes = ztreeObj.getNodes()
        //var curNodeTid = '';
        console.log(ztreeNodes)
        _this.findTidByIdFromArr(ztreeNodes);
        console.log('curNodeTid', _this.curNodeTid)
        this.TreeDataPool.selectedNode.tId = _this.curNodeTid;
        _this.findTidByIdFromArr(ztreeNodes)
        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);
          this.ztreeObj.checkNode(node, true, false, false);
          this.ztreeObj.checkAllNodes(false)
          this.ztreeObj.checkNode(node, true, false, false)
        }

        this.ztreeObj.selectNode(node, false, true)
@@ -135,91 +147,74 @@
    },

    findTidByIdFromArr(arr) {
      let len = arr.length;
      let _this = this;
      let len = arr.length
      let _this = this
      for (var i = 0; i < len; i++) {
        if (arr[i].id == this.TreeDataPool.selectedNode.id) {
          _this.curNodeTid = arr[i].tId;
          break;
          _this.curNodeTid = arr[i].tId
          break
        }
        if (arr[i].children) {
          this.findTidByIdFromArr(arr[i].children);
          this.findTidByIdFromArr(arr[i].children)
        }
      }

    },
    onDblClick(evt, treeId, item) {
      if (item.type !== "4" || this.app !== "Camera") {
        return;
      if (!item || item.type !== "4" || this.app !== "Camera") {
        return
      }
      // console.log('activeForceChoose', this.TreeDataPool.activeForceChoose)
      this.TreeDataPool.activeVideoId = item.id;
      let videoArr = this.TreeDataPool.videoArr;
      let nullVideoIndex = "";
      this.TreeDataPool.activeVideoId = item.id
      let videoArr = this.TreeDataPool.videoArr
      let nullVideoIndex = ""

      if (
        this.TreeDataPool.activeForceChoose &&
        this.TreeDataPool.activeVideoIndex !== "" &&
        this.TreeDataPool.activeVideoIndex <= videoArr.length - 1
      ) {
        this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this);
        this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this)
        this.$nextTick(() => {
          this.TreeDataPool.setVideoArr(
            this.TreeDataPool.activeVideoIndex,
            item,
            this
          );
          this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, item, this)
        })
        return;
        return
      }

      for (let i = 0; i < videoArr.length; i++) {
        // eslint-disable-next-line
        if (
          videoArr[i] === "" ||
          videoArr[i] === undefined ||
          videoArr[i] === null
        ) {
          nullVideoIndex = i;
          break;
        if (videoArr[i] === "" || videoArr[i] === undefined || videoArr[i] === null) {
          nullVideoIndex = i
          break
        } else {
          nullVideoIndex = "";
          nullVideoIndex = ""
        }
      }
      if (nullVideoIndex === "") {
        this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this);
        this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this)
        this.$nextTick(() => {
          this.TreeDataPool.setVideoArr(
            this.TreeDataPool.activeVideoIndex,
            item,
            this
          );
          this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, item, this)
        })
      } else {
        // this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this);
        this.$nextTick(() => {
          this.TreeDataPool.setVideoArr(
            this.TreeDataPool.activeVideoIndex,
            item,
            this
          );
          this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, item, this)
        })
        this.TreeDataPool.activeVideoIndex = nullVideoIndex;
        this.TreeDataPool.activeVideoIndex = nullVideoIndex
      }
    },
    addCamera(node) {
      this.$emit("addDevice", node);
      this.$emit("addDevice", node)
    },
    importCameras(node) {
      this.$emit("import", node);
      this.$emit("import", node)
    },
    addNode(node) {
      this.dialogForm = {
        text: "",
        method: "add",
        node: node.id
      };
      this.showDialogBox(event);
      }
      this.showDialogBox(event)
    },
    editNode(node) {
      this.dialogForm = {
@@ -228,57 +223,60 @@
        node: node.id,
        alias: node.alias,
        gb28181: this.gb28181
      };
      this.showDialogBox(event);
      }
      this.showDialogBox(event)
    },
    delNode(node) {
      this.TreeDataPool.del(node.id);
      this.TreeDataPool.del(node.id)
    },
    submitForm() {
      // 提交新增或者编辑区域节点表单
      this.$refs.dialogForm.validate(valid => {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          if (this.dialogForm.method == "add") {
            this.TreeDataPool.add(this.dialogForm.text, this.dialogForm.node);
            this.TreeDataPool.add(this.dialogForm.text, this.dialogForm.node)
          } else if (this.dialogForm.method == "edit") {
            this.TreeDataPool.update(
              this.dialogForm.text,
              this.dialogForm.node,
              this.gb28181 ? this.dialogForm.text : "",
              this.dialogForm.gb28181
            );
            )
          }
        } else {
          return false;
          return false
        }
      });
      this.hideDialogBox();
      })
      this.hideDialogBox()
    },
    hideDialogBox() {
      this.showDialog = false;
      this.dialogForm = { text: "" };
      this.showDialog = false
      this.dialogForm = { text: "" }
    },
    showDialogBox(event) {
      let { clientX = 0, offsetY = 0 } = event;
      let { clientX = 0, offsetY = 0 } = event
      // this.clientX = clientX - 120;
      this.clientX = 50;
      this.clientY = offsetY;
      this.showDialog = true;
      this.clientX = 50
      this.clientY = offsetY
      this.showDialog = true
    },
    itemClick(evt, treeId, treeNode) {
      console.log(evt, treeId)
      if (this.clickType == "multiple") {
        evt.target.parentNode.parentNode.querySelector(".chk").click()
        return
      }

      this.TreeDataPool.selectedNode = treeNode;
      this.TreeDataPool.treeType = this.treeName;
      this.TreeDataPool.selectedNode = treeNode
      this.TreeDataPool.treeType = this.treeName

      // 多选
      if (this.TreeDataPool.multiple) {
        // 单击某一个节点文字时 取消所有勾选状态 然后选中自身
        this.ztreeObj.checkAllNodes(false);
        this.ztreeObj.checkNode(treeNode, true, false, false);
        this.ztreeObj.checkAllNodes(false)
        this.ztreeObj.checkNode(treeNode, true, false, false)
      }

      this.TreeDataPool.updateZTreeCheckNodes([treeNode]);
      this.TreeDataPool.updateZTreeCheckNodes([treeNode])
    },
    // itemClick(treeNode) {
    //   this.TreeDataPool.selectedNode = treeNode;
@@ -294,13 +292,22 @@
    //   this.TreeDataPool.updateZTreeCheckNodes([treeNode]);
    // },
    itemCheck(evt, treeId, treeNode) {
      this.TreeDataPool.selectedNode = treeNode;
      this.TreeDataPool.treeType = this.treeName;
      if (treeNode) {
        this.TreeDataPool.selectedNode = treeNode
      }
      this.TreeDataPool.treeType = this.treeName

      // 多选
      // this.ztreeObj.checkNode(treeNode, true, false, false);
      let checkedNodes = this.ztreeObj.getCheckedNodes(true);
      this.TreeDataPool.updateZTreeCheckNodes(checkedNodes);
      let checkedNodes = this.ztreeObj.getCheckedNodes(true)
      this.TreeDataPool.updateZTreeCheckNodes(checkedNodes)

      // 实时统计选中个数
      this.TreeDataPool.countCheckedNodes(checkedNodes)

      // 保存一份数据
      this.TreeDataPool.activeTreeData = this.ztreeObj.getNodes()
      this.$emit("itemChecked", treeNode)
    },
    //展开
    itemExpand(e, id, node) {
@@ -313,9 +320,12 @@
    dropNode(node, item, draggedItem, e) {
      // console.log('dropNode', node, item, draggedItem);
      this.TreeDataPool.dropNode(draggedItem.id, item.id)
    },
    showCameraPic(nodeId) {
      this.TreeDataPool.showBaseImage(nodeId)
    }
  }
};
}
</script>
<style lang="scss" scoped>
.dialog-box {