gb18186

ZZJ

2022-07-27 0daac085e308ab5dd5557048bbcb28473ae1b7df

 src/views/GB28181/components/TreeArea.vue

@@ -1,6 +1,27 @@
<template>
  <div class="TreeArea">
    <div class="refresh">
      <span v-if="nodeList && nodeList.length > 0">配置规则</span>
      <el-switch
        v-model="ruleType"
        active-color="#0065FF"
        inactive-color="#ED7E2F"
        :width="52"
        v-if="nodeList && nodeList.length > 0"
      >
      </el-switch>
      <span
        class="des1"
        @click="ruleType = false"
        v-if="ruleType && nodeList && nodeList.length > 0"
        >自动</span
      >
      <span
        class="des2"
        @click="ruleType = true"
        v-if="!ruleType && nodeList && nodeList.length > 0"
        >手动</span
      >
      <div class="button" @click="updateCamerasFromVideosvr">刷新</div>
      单台设备最大支持配置500路摄像机，集群最大支持配置路数=集群内设备总量*500
    </div>
@@ -18,7 +39,10 @@
          :node="TreeDataPool.treeData"
          :height="600"
          :setting="treeSettings"
          :showDevArea="!ruleType"
          :nodeList="nodeList"
          @itemChecked="onItemCheck"
          @saveTree="tempSaveTree"
          search
          style="width: 450px; min-height: 600px"
        />
@@ -68,7 +92,7 @@
</template>

<script>
import { saveGb28181CamTree } from "@/api/Gb28181";
import { saveGb28181CamTree, saveTree } from "@/api/Gb28181";
import TreeMenu from "@/components/giantTree/index";
import ZTree from "@/components/giantTree/zTree/ztree";

@@ -76,6 +100,10 @@
  components: {
    TreeMenu,
    ZTree,
  },
  props: {
    id: {},
    nodeList: {},
  },
  data() {
    return {
@@ -91,7 +119,13 @@
      },
      dstTreeData: [],
      loading: null,
      ruleType: true,
      allTreeData: {},
    };
  },
  created() {
    this.TreeDataPool.clusterId = this.id.clusterId ? this.id.clusterId : "";
    this.TreeDataPool.devId = this.id.devId ? this.id.devId : "";
  },
  mounted() {
    this.TreeDataPool.multiple = true;
@@ -127,6 +161,13 @@
        this.TreeDataPool.activeTreeData
      );
    },
    tempSaveTree(tab) {
      console.log(1212);
      console.log(tab);
      this.allTreeData[tab.devId] = this.TreeDataPool.newTreeByChecked(
        this.TreeDataPool.activeTreeData
      );
    },
    saveChecked() {
      localStorage.setItem(
        "ztree_fold_list",
@@ -148,8 +189,12 @@
        this.TreeDataPool.activeTreeData
      );

      saveGb28181CamTree({ checkedMenus: treeData })
        .then((rsp) => {
      if (this.ruleType) {
        saveGb28181CamTree({
          clusterId: this.id.clusterId ? this.id.clusterId : "",
          devId: this.id.devId ? this.id.devId : "",
          checkedMenus: treeData,
        }).then((rsp) => {
          if (rsp && rsp.success) {
            this.$message({
              type: "success",
@@ -157,14 +202,30 @@
            });
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "保存失败",
        });
      } else {
        let tab = this.$refs["ztree"].activeTabObj;
        this.allTreeData[tab.devId] = treeData;
        let params = [];
        for (const key in this.allTreeData) {
          params.push({
            devId: key,
            checkedMenus: this.allTreeData[key],
          });
        }

        saveTree({
          list: params,
        }).then((rsp) => {
          if (rsp && rsp.success) {
            this.$message({
              type: "success",
              message: "保存成功",
            });
          }
          this.loading = false;
        });
      }
    },
  },
};
@@ -181,6 +242,34 @@
    align-items: center;
    font-size: 12px;
    color: #666666;
    position: relative;

    span {
      font-size: 14px;
    }

    .el-switch {
      margin-left: 16px;
      margin-right: 32px;
    }

    .des1 {
      top: 7px;
      left: 78px;
      position: absolute;
      font-size: 12px;
      color: #fff;
      cursor: pointer;
    }

    .des2 {
      top: 7px;
      left: 92px;
      position: absolute;
      font-size: 12px;
      color: #fff;
      cursor: pointer;
    }

    .button {
      margin-right: 10px;