集群节点展示测试

hanbaoshan

2020-10-14 d5144e7cb7ccf2795e02098b850e282eb2a6e74f

 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>
@@ -138,6 +150,9 @@
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-tab-pane>
        <el-tab-pane label="集群" name="cluster" :style="`height:${height - 56}px;`" v-if="showCluster">
          
        </el-tab-pane>
        <el-tab-pane
          label="数据栈"
@@ -213,6 +228,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 +254,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: {
@@ -257,6 +291,9 @@
    },
    showCam() {
      return this.appName === "Camera" || this.appName === "Search";
    },
    showCluster() {
      return this.appName === "Cluster"
    },
    showDataStack() {
      return this.appName === "DataStack" || this.appName === "Search";
@@ -335,27 +372,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"
@@ -376,7 +397,6 @@
    },
    lockSwitch() {
      this.TreeDataPool.readonly = !this.TreeDataPool.readonly;
      console.log(this.TreeDataPool.readonly)
    },
    gbLockSwitch() {
      this.TreeDataPool.gbReadonly = !this.TreeDataPool.gbReadonly;
@@ -507,6 +527,92 @@
    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;
            let promiseArr = [];
            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);

              promiseArr.push(createCamera(camera));
            }
            let _this = this;
            Promise.allSettled(promiseArr).then(res=>{
              res.forEach(item=>{
                if(item.status === 'fulfilled'){
                  succeed++;
                }else{
                  failed++;
                }
              });
              _this.menuLoading = false;
              _this.$message({
                type: "success",
                message: "操作完成, 导入成功:" + succeed + "个 失败:" + failed + "个"
              })
              _this.TreeDataPool.fetchTreeData();
            }).catch(e=>{
              console.log(e)
            });
            
          }
        } 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>
@@ -523,8 +629,9 @@
    border: none;
    box-shadow: none;
    .el-tabs__header {
      display: none;
      border-bottom: none;
      margin: 0 0 15px;
      //margin: 0 0 15px;
    }
    .el-tabs__content {
      padding: 0;
@@ -651,6 +758,7 @@
    .search-input {
      padding-top: 8px;
      padding-bottom: 12px;
      text-align: left;
      .dev-tree-close {
        width: 10%;
        margin-left: 10px;
@@ -736,6 +844,10 @@
.camera-add {
  left: 128px;
}

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