添加摄像机导出功能

zhangzengfei

2022-10-09 d50b0eafa1fcee6e547255cff5b85fe61730860f

添加摄像机导出功能

 src/Pool/TreeData.ts

@@ -72,6 +72,8 @@

  // 记录摄像机所属的父节点名称
  public cameraParents: object
  // 记录所有的子节点
  public childNodes: Array<object>

  constructor() {
    this.openeds = [true, true, false]
@@ -115,6 +117,7 @@
    this.clusterId = ""
    this.devId = ""
    this.cameraParents = {}
    this.childNodes = []
  }

  setVideoArr(index: number, value: object, vue: any): void {
@@ -350,6 +353,7 @@
      } else {
        if (n.type != "MENU") {
          this.cameraParents[n.id] = parentName
          this.childNodes.push(n)
        }
      }
    })
@@ -436,6 +440,8 @@

  async fetchTreeData() {
    this.cameraParents = {}
    this.childNodes = []

    if (this.openeds[0]) {
      await this.fetchLocalTree()
    }

 src/components/CameraLeft.vue

@@ -74,6 +74,28 @@
                  </el-tooltip>
                </div>

                <!-- 导出设备 -->
                <div class="tree-edit export-btn" v-show="!TreeDataPool.readonly">
                  <el-tooltip content="导出设备" placement="bottom" popper-class="atooltip">
                    <download-excel
                      class="export-excel-wrapper"
                      :data="TreeDataPool.childNodes"
                      :fields="json_fields"
                      :name="'摄像机列表.xlsx'"
                    >
                      <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
                      <!-- <el-button type="primary" size="small">导出EXCEL</el-button> -->
                      <!-- <div class="btnArea">
                      <div class="button light">
                        <span class="iconfont">&#xe643;</span>
                        导出数据
                      </div>
                    </div> -->
                      <span class="iconfont" style="font-size: 16px">&#xe643;</span>
                    </download-excel>
                  </el-tooltip>
                </div>

                <!-- 树操作锁 -->
                <div class="tree-edit tree-lock" v-show="showLock">
                  <button @click="lockSwitch">
@@ -401,7 +423,32 @@
      importAreaId: "",
      menuLoading: false,
      clusterName: "",
      cluster: ""
      cluster: "",
      json_fields: {
        部门: {
          field: "id",
          //自定义回调函数
          callback: (value) => {
            let org = ""
            if (this.TreeDataPool.cameraParents.hasOwnProperty(value)) {
              org = this.TreeDataPool.cameraParents[value]
            }
            return org
          }
        },
        // 告警标记: "",
        // 整改描述: "",
        摄像机通道号: "rtsp",
        摄像机ID: "id",
        摄像机名称: "name",
        开启分析: {
          field: "isAI",
          //自定义回调函数
          callback: (value) => {
            return value ? "是" : "否"
          }
        }
      }
    }
  },
  created() {
@@ -571,6 +618,9 @@
      this.TreeDataPool.localCurrentPage = current
    },

    exportCameras() {
      console.log(this.TreeDataPool.treeData)
    },
    importCameras(area) {
      this.importAreaId = area
      this.$refs["import-btn"].click()
@@ -918,12 +968,6 @@
    color: #000;
  }
}
.area-add {
  right: 62px;
}
.camera-add {
  right: 36px;
}

.closeIcon,
.openIcon {
@@ -939,9 +983,23 @@
  margin-right: 6px;
}

.import-btn {
  right: 10px;
.area-add {
  right: 85px;
}

.camera-add {
  right: 60px;
}

.import-btn {
  right: 35px;
}

.export-btn {
  right: 10px;
  transform: rotate(90deg);
}

.tree-font {
  font-family: PingFangSC-Medium;
  font-size: 14px;