摄像机树增加导入功能

zhangzengfei

2020-09-07 929cf4c7be11bfd1e134d0cb0d7cbbe94772ebdf

 src/components/LeftNav.vue

@@ -4,6 +4,7 @@
      class="left-tree-box"
      :style="`height:${height}px;animation-duration: 0.7s`"
      v-show="TreeDataPool.showTreeBox"
      v-loading="menuLoading"
    >
      <el-tabs v-model="TreeDataPool.treeActiveName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="摄像机" name="camera" :style="`height:${height - 56}px;`" v-if="showCam">
@@ -75,6 +76,16 @@
              </el-tooltip>
            </div>

            <!-- 导入设备 -->
            <div class="tree-edit import-btn" v-show="!TreeDataPool.readonly">
              <el-tooltip content="导入设备" placement="bottom" popper-class="atooltip">
                <button @click="importCameras('0')">
                  <!-- <i class="el-icon-video-camera"></i> -->
                  <span class="iconfont icondaoru" style="font-size:16px;"></span>
                </button>
              </el-tooltip>
            </div>

            <!-- 树操作锁 -->
            <div class="tree-edit tree-lock" v-show="showLock">
              <button @click="lockSwitch">
@@ -101,6 +112,7 @@
                  :node="TreeDataPool.treeData"
                  :height="height"
                  @addDevice="addCamera"
                  @import="importCameras"
                />
              </el-menu-item-group>
            </el-submenu>
@@ -213,6 +225,20 @@
          <file-upload v-show="fileUploadBox" @close="fileUploadBox= false" />
        </el-tab-pane>
      </el-tabs>

      <!-- 导入设备组件 事件触发 -->
      <el-upload
        class="upload-btn"
        action="https://jsonplaceholder.typicode.com/posts/"
        accept=".xlsx"
        :on-exceed="exceed"
        :limit="10"
        :on-remove="remove"
        :http-request="uploadFile"
        :show-file-list="false"
      >
        <button ref="import-btn" v-show="false"></button>
      </el-upload>
    </div>
  </transition>
</template>
@@ -225,10 +251,15 @@
  updateStatus
} from "@/api/localVedio";

import {
  createCamera,
} from "@/api/camera";

import bus from "@/plugin/bus"
import TreeMenu from "@/components/treeMenu/index";
import LocalVedioList from '@/components/subComponents/LocalVedioList';
import FileUpload from '@/components/subComponents/FileUpload/index';
import XLSX from 'xlsx'

export default {
  components: {
@@ -335,27 +366,11 @@
      ],
      timeout: null,
      fileUploadBox: false,
      loadingGBTree: false
      loadingGBTree: false,
      importAreaId: "",
      menuLoading: false
    };
  },
  // watch: {
  //   $route(to, from) {
  //     switch (to.name) {
  //       case "Searching":
  //         this.cameraAuth = "videoSearch:camera"
  //         this.dataStack = "videoSearch:dataStack"
  //         break
  //       case "VideoManage":
  //         this.cameraAuth = "VIDEOCAMERA:camera"
  //         this.dataStack = "VIDEOCAMERA:dataStack"
  //         break
  //       default:
  //         this.cameraAuth = "videoMonitor:camera"
  //         this.dataStack = "videoMonitor:dataStack"
  //     }
  //     // console.log("路由变化：", to, from)
  //   }
  // },
  created() {
    if (this.showCam) {
      this.TreeDataPool.treeActiveName = "camera"
@@ -507,6 +522,91 @@
    refrash(current, pageSize) {
      this.TreeDataPool.localCurrentPage = current;
    },

    importCameras(area) {
      this.importAreaId = area
      this.$refs["import-btn"].click()
    },

    async uploadFile(params) {
      const _file = params.file;
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        this.menuLoading = true;
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: 'binary'
          });

          for (let sheet in workbook.Sheets) {
            //循环读取每个文件
            const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
            //若当前sheet没有数据，则continue
            if (sheetArray.length == 0) {
              continue;
            }

            let succeed = 0;
            let failed = 0;

            for (let item in sheetArray) {
              let camera = this.newCamera();
              camera.areaid = this.importAreaId;
              camera.name = String(sheetArray[item].name);
              camera.rtsp = String(sheetArray[item].rtsp);
              camera.addr = String(sheetArray[item].addr);

              createCamera(camera).then(rsp => {
                if (rsp && rsp.success) {
                  succeed++;
                } else {
                  failed++;
                }
              }).catch(err => {
                failed++;
              })
            }

            let _this = this
            setTimeout(() => {
              this.menuLoading = false;
              _this.$message({
                type: "success",
                message: "操作完成, 导入成功:" + succeed + "个 失败:" + failed + "个"
              })
              _this.TreeDataPool.fetchTreeData();
            }, 2000)
          }
        } catch (e) {
          this.menuLoading = false
          this.$message.warning('文件类型不正确！');
        }
      };
      fileReader.readAsBinaryString(_file);
    },
    exceed() {
      this.$message.error("最多只能上传1个xls文件");
    },
    //删除文件
    remove() {

    },
    newCamera() {
      return {
        latitude: 0,
        rtsp: "",
        longitude: 0,
        name: "",
        addr: "",
        areaid: "",
        reserved: "",
        run_type: -1,
        username: "",
        password: "",
        sensors: []
      }
    }
  }
};
</script>
@@ -736,6 +836,10 @@
.camera-add {
  left: 128px;
}

.import-btn {
  left: 156px;
}
.tree-font {
  font-family: PingFangSC-Medium;
  font-size: 14px;