暂存

ZZJ

2021-12-20 832896ccaf8ac6a8ca31394e55577f064bc5eacf

 src/components/treeMenu/index.vue

@@ -29,13 +29,18 @@
          <!-- 摄像机状态图标 -->
          <i
            class="iconfont iconjiankongshexiangji"
            style="padding-left:4px;font-size:13px;line-height: 28px;"
            style="padding-left: 4px; font-size: 13px; line-height: 28px"

            role="presentation"
            v-if="!_.model.loading && _.model.type === '4' && !_.model.isAI"
          ></i>
          <i
            class="iconfont iconfenxishexiangji"
            style="padding-left:4px;color:#3D68E1; font-size:13px;line-height: 28px;"
            style="

              padding-left: 4px;

              color: #3d68e1;

              font-size: 13px;

              line-height: 28px;

            "

            role="presentation"
            v-if="!_.model.loading && _.model.isAI"
          ></i>
@@ -44,7 +49,8 @@
          <span
            class="tree-name"
            :style="_.model.isRunning ? `color:#3d68e1` : '' "
          >{{ _.model.name }}</span>
            >{{ _.model.name }}</span

          >


          <div
            v-if="gb28181"
@@ -55,7 +61,11 @@
            "
            class="tree-item-handle"
          >
            <el-tooltip content="编辑区域" placement="bottom" popper-class="atooltip">
            <el-tooltip

              content="编辑区域"

              placement="bottom"

              popper-class="atooltip"

            >

              <button @click="editNode($event, _.model, gb28181)">
                <i class="el-icon-edit"></i>
              </button>
@@ -71,38 +81,72 @@
            "
            class="tree-item-handle"
          >
            <el-tooltip content="添加区域" placement="bottom" popper-class="atooltip">
            <el-tooltip

              content="添加区域"

              placement="bottom"

              popper-class="atooltip"

            >

              <button @click="addNode($event, _.model)">
                <i class="el-icon-circle-plus-outline"></i>
              </button>
            </el-tooltip>

            <el-tooltip content="删除区域" placement="bottom" popper-class="atooltip">
              <button @click="delNode(_.model)" v-show="!_.model.children" style="color:#f53d3d">
            <el-tooltip

              content="删除区域"

              placement="bottom"

              popper-class="atooltip"

            >

              <button

                @click="delNode(_.model)"

                v-show="!_.model.children"

                style="color: #f53d3d"

              >

                <i class="el-icon-remove-outline"></i>
              </button>
            </el-tooltip>

            <el-tooltip content="编辑区域" placement="bottom" popper-class="atooltip">
            <el-tooltip

              content="编辑区域"

              placement="bottom"

              popper-class="atooltip"

            >

              <button @click="editNode($event, _.model, gb28181)">
                <i class="el-icon-edit"></i>
              </button>
            </el-tooltip>

            <el-tooltip content="添加设备" placement="bottom" popper-class="atooltip">
            <el-tooltip

              content="添加设备"

              placement="bottom"

              popper-class="atooltip"

            >

              <button @click="addCamera(_.model.id)">
                <span
                  class="iconfont iconshishishipin"
                  style="font-size:15px; margin-left:3px; position:relative; top:2px;"
                  style="

                    font-size: 15px;

                    margin-left: 3px;

                    position: relative;

                    top: 2px;

                  "

                ></span>
              </button>
            </el-tooltip>

            <el-tooltip content="导入设备" placement="bottom" popper-class="atooltip">
            <el-tooltip

              content="导入设备"

              placement="bottom"

              popper-class="atooltip"

            >

              <button @click="importCameras(_.model.id)">
                <span
                  class="iconfont icondaoru"
                  style="font-size:17px; margin-left:9px; position:relative; top:2px;"
                  style="

                    font-size: 17px;

                    margin-left: 9px;

                    position: relative;

                    top: 2px;

                  "

                ></span>
              </button>
            </el-tooltip>
@@ -117,12 +161,20 @@
      :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

          :model="dialogForm"

          size="mini"

          :rules="rules"

          ref="dialogForm"

          label-width="70px"

        >

          <el-form-item label="名称：" prop="name">
            <el-input v-model="dialogForm.text"></el-input>
          </el-form-item>
          <div class="text-center pb-2">
            <el-button size="mini" type="primary" @click="submitForm">保存</el-button>
            <el-button size="mini" type="primary" @click="submitForm"

              >保存</el-button

            >

            <el-button size="mini" @click="hideDialogBox">取消</el-button>
          </div>
        </el-form>
@@ -137,28 +189,28 @@
export default {
  name: "TreeMenu",
  components: {
    VJstree
    VJstree,

  },
  props: {
    app: {
      type: String,
      default: "Video"
      default: "Video",

    },
    node: {
      type: Array
      type: Array,

    },
    treeName: {
      type: String,
      default: ""
      default: "",

    },
    gb28181: {
      type: Boolean,
      default: false
      default: false,

    },
    height: {
      type: Number,
      default: 0
    }
      default: 0,

    },

  },
  data() {
    return {
@@ -178,14 +230,18 @@
            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
              );
            })
            });

            return;
          }

@@ -203,14 +259,18 @@
            }
          }
          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
              );
            })
            });

          } else {
            // this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this);
            this.$nextTick(() => {
@@ -219,27 +279,28 @@
                item,
                this
              );
            })
            });

            this.TreeDataPool.activeVideoIndex = nullVideoIndex;
          }
          // this.TreeDataPool.setVideoArr(videoArr.length - 1, item, this);
        }
        },

      },
      showDialog: false,
      clientX: 0,
      clientY: 0,
      dialogForm: {
        text: ""
        text: "",

      },
      rules: {
        text: [
          { required: true, message: "请输入节点名称", trigger: "change" },
          { min: 2, max: 10, message: "长度在2到10个字", trigger: "change" }
        ]
      }
          { min: 2, max: 10, message: "长度在2到10个字", trigger: "change" },

        ],

      },

    };
  },
  created() {
    console.log("------------");

    // console.log(this.height, '树高度')
    this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndexVideo
      ? Number(sessionStorage.activeIndexVideo)
@@ -253,7 +314,7 @@
    },
    node: function (newValue) {
      this.$refs.jstree.initializeData(newValue);
    }
    },

  },
  methods: {
    addCamera(node) {
@@ -266,7 +327,7 @@
      this.dialogForm = {
        text: "",
        method: "add",
        node: node.id
        node: node.id,

      };
      this.showDialogBox(event);
    },
@@ -276,7 +337,7 @@
        method: "edit",
        node: node.id,
        alias: node.alias,
        gb28181: isGb
        gb28181: isGb,

      };
      this.showDialogBox(event);
    },
@@ -291,7 +352,7 @@
    },
    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);
@@ -321,23 +382,23 @@
      this.showDialog = true;
    },
    itemClick(node, item, e) {
      console.log('jsTree index.vue', item)
      console.log("jsTree index.vue", item);

      this.TreeDataPool.selectedNode = item;
      this.TreeDataPool.updateSelectedNodes();
      this.TreeDataPool.treeType = this.treeName;
    },
    itemToggle(node, item, e) {
      if (item.opened) {
        delete this.TreeDataPool.foldNodeList[item.id]
        delete this.TreeDataPool.foldNodeList[item.id];

      } else {
        this.TreeDataPool.foldNodeList[item.id] = true
        this.TreeDataPool.foldNodeList[item.id] = true;

      }
    },
    dropNode(node, item, draggedItem, e) {
      console.log('dropNode', node, item, draggedItem);
      this.TreeDataPool.dropNode(draggedItem.id, item.id)
    }
  }
      console.log("dropNode", node, item, draggedItem);

      this.TreeDataPool.dropNode(draggedItem.id, item.id);

    },

  },

};
</script>
<style lang="scss" scoped>