摄像机树增加导入功能

zhangzengfei

2020-09-07 929cf4c7be11bfd1e134d0cb0d7cbbe94772ebdf

摄像机树增加导入功能

 package.json

@@ -30,7 +30,8 @@
    "vue-js-toggle-button": "^1.3.3",
    "vue-photo-preview": "^1.1.3",
    "vue-qrcode-component": "^2.1.1",
    "vuex": "^3.5.1"
    "vuex": "^3.5.1",
    "xlsx": "^0.16.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.10.0",

 src/Pool/dataStack.ts

@@ -41,7 +41,17 @@
  public async fetchFiles() {
    const rsp: any = await getDataStackDirs({ name: this.searchInput, type: this.searchType, page: 1, size: 100 });
    if (rsp && rsp.success) {
      this.dirs = rsp.data.dataList;
      this.dirs = rsp.data.dataList.sort(function (obj1: any, obj2: any) {
        var val1 = obj1.name;
        var val2 = obj2.name;
        if (val1 < val2) {
          return -1;
        } else if (val1 > val2) {
          return 1;
        } else {
          return 0;
        }
      });
    }
  }


 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;

 src/components/treeMenu/index.vue

@@ -97,6 +97,15 @@
                ></span>
              </button>
            </el-tooltip>

            <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;"
                ></span>
              </button>
            </el-tooltip>
          </div>
        </div>
      </template>
@@ -156,16 +165,10 @@
      hoverNodeId: "",
      itemClickEvents: {
        dblclick: (VNode, item, e) => {
          console.log('dblclick',item);
          console.log('dblclick',this.TreeDataPool.videoArr);
          console.log(this.app)
          // if (item.type !== "4" || this.app !== "Video") {
          //   return;
          // }
          if (item.type !== "4" || this.app !== "Camera") {
            return;
          }
          console.log('activeForceChoose',this.TreeDataPool.activeForceChoose)
          // console.log('activeForceChoose', this.TreeDataPool.activeForceChoose)
          this.TreeDataPool.activeVideoId = item.id;
          let videoArr = this.TreeDataPool.videoArr;
          let nullVideoIndex = "";
@@ -175,7 +178,6 @@
            this.TreeDataPool.activeVideoIndex !== "" &&
            this.TreeDataPool.activeVideoIndex <= videoArr.length - 1
          ) {
            console.log('setVideoArr')
            this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this);
            this.$nextTick(() => {
              this.TreeDataPool.setVideoArr(
@@ -257,6 +259,9 @@
    addCamera(node) {
      this.$emit("addDevice", node);
    },
    importCameras(node) {
      this.$emit("import", node);
    },
    addNode(event, node) {
      this.dialogForm = {
        text: "",
@@ -316,7 +321,7 @@
      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;

 src/pages/cameraAccess/components/CameraInfo.vue

@@ -207,25 +207,6 @@
      eventAudio: new Audio(),
      soundPath: '',
      form: {
        latitude: 0,
        rtsp: "",
        longitude: 0,
        name: "",
        addr: "",
        alias: "",
        areaid: "",
        brand: "",
        id: "",
        ip: "",
        reserved: "",
        run_type: 0,
        isAI: false,
        username: "",
        password: "",
        cameraType: 0,
        resolution: "",
        voiceId: "",
        voiceEnable: false
      },
      // 记录添加状态
      isAdd: false,
@@ -321,7 +302,7 @@
      if (node.type === "4") {
        getCameraInfo(node.id).then(res => {
          if (res.success) {
            console.log(res, '获取摄像机信息')
            // console.log(res, '获取摄像机信息')
            if (res.data.resolutions) {
              let list = res.data.resolutions.map(i => {
                let obj = {}
@@ -353,20 +334,22 @@
    // 保存
    onSubmit(formName) {
      let list = this.$refs.cameraEditor.getResult()
      console.log(list, "sensor")
      // console.log(list, "sensor")
      // id为空，新增摄像机
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const isRequire = this.verifyRequrie();
          if (!isRequire) return false;

          this.form.latitude = Number.isNaN(parseFloat(this.form.latitude)) ? 0 : parseFloat(this.form.latitude);
          this.form.longitude = Number.isNaN(parseFloat(this.form.longitude)) ? 0 : parseFloat(this.form.longitude);
          this.form.sensors = list
          this.form.resolution_width = Number(this.form.resolution.split("*")[0])
          this.form.resolution_height = Number(this.form.resolution.split("*")[1])

          // 更新
          if (this.form.id !== "") {
            this.form.areaid = this.TreeDataPool.getParent(this.form.id, this.isGb28182);
            this.form.latitude = Number.isNaN(parseFloat(this.form.latitude)) ? 0 : parseFloat(this.form.latitude);
            this.form.longitude = Number.isNaN(parseFloat(this.form.longitude)) ? 0 : parseFloat(this.form.longitude);
            this.form.sensors = list
            this.form.resolution_width = Number(this.form.resolution.split("*")[0])
            this.form.resolution_height = Number(this.form.resolution.split("*")[1])
            updateCameraInfo(this.form).then(rsp => {
              if (rsp.success) {
                this.$notify({
@@ -384,26 +367,7 @@
            });
          } else {
            this.form.areaid = this.addParentId;
            this.form.sensors = list
            const { ...json } = this.form;
            createCamera({
              latitude: parseFloat(json.latitude),
              rtsp: this.form.rtsp,
              longitude: parseFloat(json.longitude),
              name: this.form.name,
              addr: this.form.addr,
              areaid: this.form.areaid,
              brand: this.form.brand,
              id: this.form.id,
              ip: this.form.ip,
              port: parseFloat(json.port),
              reserved: this.form.reserved,
              run_type: this.form.isAI ? this.form.run_type : -1,
              username: this.form.username,
              password: this.form.password,
              areaId: this.form.areaId,
              sensors: this.form.sensors
            }).then(rsp => {
            createCamera(this.form).then(rsp => {
              if (rsp.success) {
                this.$notify({
                  type: "success",
@@ -494,7 +458,7 @@
        id: "",
        ip: "",
        reserved: "",
        run_type: 0,
        run_type: -1,
        isAI: false,
        username: "",
        password: "",
@@ -508,96 +472,6 @@
      this.isAdd = true;
      this.addParentId = node;
      this.initFormData();
    },
    //实时、轮询切换
    changePoll(row) {
      // console.log(row,'实时、轮询切换',this.form,this.PollData.RealTimeSum)
      //判断是新增还是更新
      if (this.form.id && this.form.id !== undefined) {
        if (this.PollData.RealTimeSum < 16) {
          if (row.value) {
            this.form.run_type = 1
          } else {
            this.form.run_type = 0
          }
          changeRunType({ camera_ids: [this.form.id], run_type: this.form.run_type }).then(
            rsp => {
              if (rsp && rsp.success) {
                this.$notify({
                  type: "success",
                  message: "配置成功"
                });
              } else {
                this.$notify({
                  type: "error",
                  message: "配置失败"
                });
              }
            }
          );
        } else {
          if (this.form.run_type === 1) {
            this.form.run_type = 0
            changeRunType({ camera_ids: [this.form.id], run_type: this.form.run_type }).then(
              rsp => {
                if (rsp && rsp.success) {
                  this.$notify({
                    type: "success",
                    message: "配置成功"
                  });
                } else {
                  this.$notify({
                    type: "error",
                    message: "配置失败"
                  });
                }
              }
            );
          }
          this.$nextTick(() => {
            this.$set(this.form, 'run_type', 0)
          })
          // this.$notify({
          //   type: 'warning',
          //   message: '实时处理路数已达最大处理路数！'
          // })
        }
        this.TreeDataPool.fetchTreeData();
        this.PollData.statisticTaskInfo();
      }
    },
    //是否进行视频分析处理
    pollEnable(row) {
      // console.log(row,'实时、轮询切换')
      if (row) {
        if (this.PollData.RealTimeSum < 16) {
          this.form.run_type = 1
        } else {
          this.form.run_type = 0
        }
      } else {
        this.form.run_type = -1
      }
      if (this.form.id && this.form.id !== undefined) {
        changeRunType({ camera_ids: [this.form.id], run_type: this.form.run_type }).then(
          rsp => {
            if (rsp && rsp.success) {
              this.$notify({
                type: "success",
                message: "配置成功"
              });
            } else {
              this.$notify({
                type: "error",
                message: "配置失败"
              });
            }
            this.selectCamera(this.TreeDataPool.selectedNode)
          }
        );
      }
      this.TreeDataPool.fetchTreeData();
      this.PollData.statisticTaskInfo();
    }
  }
};

 src/scripts/httpRequest.ts

@@ -154,23 +154,6 @@
          errJson.message = `连接出错(${error.response.status})!`
      }

      if (errJson.status >= 400 && errJson.status < 500) {
        // 跳转错误页面
        // router.push({
        //   path: "/error",
        //   query: errJson
        // });
      } else {
        // 服务器错误退出系统，弹窗提示
        // Message({
        //   showClose: true,
        //   message: errJson.message,
        //   type: "error"
        // });
        // router.push({
        //   path: "/login"
        // });
      }
    } else {
      errJson.message = '连接服务器失败!'
      Notification({