应用中心安装提示bug修复

hanbaoshan

2020-10-20 98a6297b10a4b97c3022f84d3ba7908c178d9ee0

 src/components/LeftNav.vue

@@ -4,14 +4,10 @@
      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="isShow(cameraAuth)"
        >
        <el-tab-pane label="摄像机" name="camera" :style="`height:${height - 56}px;`" v-if="showCam">
          <el-menu
            :default-openeds="openeds"
            background-color="#fff"
@@ -27,7 +23,6 @@
              <el-select
                v-model="TreeDataPool.searchCamType"
                placeholder="请选择"
                
                @change="searchAreaData"
              >
                <el-option
@@ -43,7 +38,6 @@
                placeholder="搜索"
                clearable
                @input="querySearchAsync('camera')"
                
              >
                <i
                  class="el-icon-search el-input__icon"
@@ -52,7 +46,7 @@
                  @click="searchAreaData"
                ></i>
              </el-input>
              <div class="tree-close">
              <!-- <div class="tree-close">
                <el-tooltip content="收起目录树" placement="bottom" popper-class="atooltip">
                  <i
                    class="el-icon-s-fold"
@@ -60,7 +54,7 @@
                    @click="closeTree"
                  ></i>
                </el-tooltip>
              </div>
              </div>-->
            </li>

            <!-- 添加区域图标 -->
@@ -78,6 +72,16 @@
                <button @click="addCamera('0')">
                  <!-- <i class="el-icon-video-camera"></i> -->
                  <span class="iconfont iconshishishipin" style="font-size:14px;"></span>
                </button>
              </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>
@@ -108,6 +112,7 @@
                  :node="TreeDataPool.treeData"
                  :height="height"
                  @addDevice="addCamera"
                  @import="importCameras"
                />
              </el-menu-item-group>
            </el-submenu>
@@ -147,15 +152,66 @@
          </el-menu>
        </el-tab-pane>
        <el-tab-pane
          label="集群"
          name="cluster"
          :style="`height:${height - 56}px;`"
          v-if="showCluster"
        >
          <div class="local-vedio-area">
            <!-- 搜索 -->
            <div class="navTopSelect">
              <div class="search-input flex-box">
                <el-select
                  v-model="TreeDataPool.searchCamType"
                  placeholder="请选择"
                  @change="searchClusterData"
                >
                  <el-option
                    v-for="item in searchTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <span style="display: inline-block;padding: 0px 3px;"></span>
                <el-input
                  v-model="TreeDataPool.searchInput"
                  placeholder="搜索"
                  clearable
                  @input="querySearchAsync('cluster')"
                >
                  <i
                    class="el-icon-search el-input__icon"
                    style="color:#DCDFE6"
                    slot="prefix"
                    @click="searchClusterData"
                  ></i>
                </el-input>
              </div>
            </div>
            <div class="cluster-list">
              <tree-menu
                ref="tree"
                :app="appName"
                :treeName="'localTree'"
                :node="TreeDataPool.clusterData"
                :height="height"
                @addDevice="addCamera"
                @import="importCameras"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="数据栈"
          name="dataStack"
          :style="`height:${height - 56}px;`"
          v-if="isShow(dataStack)"
          v-if="showDataStack"
        >
          <div class="local-vedio-area">
            <!-- 搜索 -->
            <div class="search-input">
              <span style="display: inline-block;padding: 0px 3px;"></span>
              <!-- <span style="display: inline-block;padding: 0px 3px;"></span> -->
              <el-select
                v-model="DataStackPool.searchType"
                placeholder="请选择"
@@ -187,13 +243,13 @@
                ></i>
              </el-input>
              <!-- 隐藏树按钮 -->
              <div class="dev-tree-close">
              <!-- <div class="dev-tree-close">
                <i
                  class="el-icon-s-fold"
                  style="color: #3D68E1;line-height: 22px;font-size: 27px;"
                  @click="closeTree"
                ></i>
              </div>
              </div>-->
            </div>

            <!-- 本地视频源列表 -->
@@ -216,22 +272,24 @@
              </div>
              <LocalVedioList :dataList="TreeDataPool.localVedioList"></LocalVedioList>
            </div>
            <!-- 分页 -->
            <!-- <div class="paginationClass flex-box">
                <el-pagination
                  @current-change="refrash"
                  :current-page="TreeDataPool.localCurrentPage"
                  :page-size="TreeDataPool.localPageSize"
                  style="margin: 10px 0;"
                  :total="TreeDataPool.localTotal"
                ></el-pagination>
            </div>-->
          </div>
          <file-upload v-show="fileUploadBox" @close="fileUploadBox= false" />
        </el-tab-pane>
        <!-- <el-tab-pane label="本地图片" name="localPic" v-if="isShow('VIDEOCAMERA:image')">本地图片</el-tab-pane>
        <el-tab-pane label="本地音频" name="localAudio" v-if="isShow('VIDEOCAMERA:audio')">本地音频</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>
@@ -244,9 +302,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: {
@@ -270,10 +334,40 @@
  },

  computed: {
    showLock() {
    showTab () {
      return true;
    },
    showCam () {
      return this.appName === "Camera" || this.appName === 'Cluster' || (this.appName === "Search" && (this.buttonAuthority.indexOf("search:camera") >= 0 || this.isAdmin));
    },
    showCluster () {
      return this.appName === "Cluster";
    },
    // 数据栈配置必须显示。 检索通过权限控制显示, 未安装数据栈也不显示
    showDataStack () {
      if (this.appName === "DataStack") {
        return true;
      }

      if (this.appName === "Search") {
        // 未安装数据栈配置
        if (this.installedApps.indexOf("dataStack") >= 0) {
          if (this.isAdmin) {
            return true;
          }

          if (this.buttonAuthority.indexOf("search:stack") >= 0) {
            return true;
          }
        }
      }

      return false;
    },
    showLock () {
      return this.edit;
    },
    openeds() {
    openeds () {
      let arry = [];
      for (let i = 0; i < this.TreeDataPool.openeds.length; i++) {
        if (this.TreeDataPool.openeds[i]) {
@@ -284,7 +378,7 @@
      }
      return arry;
    },
    isAdmin() {
    isAdmin () {
      if (
        sessionStorage.getItem("userInfo") &&
        sessionStorage.getItem("userInfo") !== ""
@@ -295,12 +389,13 @@
      return false;
    }
  },
  data() {
  data () {
    return {
      cameraAuth: "videoMonitor:camera",
      dataStack: "videoMonitor:dataStack",
      activeIndexVideo: "",
      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
      installedApps: sessionStorage.getItem("apps") || [],
      loginName: JSON.parse(sessionStorage.getItem("userInfo")).username || "用户名",
      searchTypeOptions: [
        {
@@ -344,87 +439,67 @@
      ],
      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.isShow('VIDEOCAMERA:camera')) {
  created () {
    console.log(this.appName)
    console.log(this.showCam)
    if (this.showCam) {
      this.TreeDataPool.treeActiveName = "camera"
      this.TreeDataPool.fetchTreeData();

    } else {
      this.TreeDataPool.treeActiveName = "dataStack"
      this.DataStackPool.fetchFiles();

    }
    this.TreeDataPool.fetchTreeData().then(_ => {
      // todo
      // if (this.$route.path == '/Layout/Searching') {
      //   this.TreeDataPool.filterLocalVideoWell()
      // }
    });
    if (this.showCluster) {
      this.TreeDataPool.treeActiveName = "cluster"
      this.TreeDataPool.fetchClusterTree();
    }
  },
  methods: {
    isShow(authority) {
      if (this.isAdmin) {
        return true;
      } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
        return true;
      } else {
        return false;
      }
    },
    searchAreaData() {
    searchAreaData () {
      this.TreeDataPool.fetchTreeData();
    },
    searchDataStack() {
      debugger
    searchDataStack () {
      this.DataStackPool.fetchFiles();
    },
    lockSwitch() {
      this.TreeDataPool.readonly = !this.TreeDataPool.readonly;
      console.log(this.TreeDataPool.readonly)
    searchClusterData () {
      this.TreeDataPool.fetchClusterTree();
    },
    gbLockSwitch() {
    lockSwitch () {
      this.TreeDataPool.readonly = !this.TreeDataPool.readonly;
    },
    gbLockSwitch () {
      this.TreeDataPool.gbReadonly = !this.TreeDataPool.gbReadonly;
    },
    dataStackLockSwitch() {
    dataStackLockSwitch () {
      this.DataStackPool.readonly = !this.DataStackPool.readonly;
    },
    closeTree() {
    closeTree () {
      this.TreeDataPool.showTreeBox = false;
      // bus.$emit('refreshCompareImg')
      bus.$emit('refreshCompareImg')
    },
    addNode(event) {
    addNode (event) {
      this.$refs.tree.addNode(event, { id: 0 });
    },
    addCamera(node) {
      // bus.$emit("addCameraOnTree", node);
    addCamera (node) {
      bus.$emit("addCameraOnTree", node);
    },
    addDir(node) {
      // bus.$emit("addDirOnTree", node);
    addDir (node) {
      bus.$emit("addDirOnTree", node);
    },
    menuOpen(index) {
    menuOpen (index) {
      this.TreeDataPool.openeds[index] = true;
    },
    menuClose(index) {
    menuClose (index) {
      this.TreeDataPool.openeds[index] = false;
    },
    refreshGB() {
    refreshGB () {
      // 防止重复刷新
      if (this.loadingGBTree) {
        return;
@@ -438,7 +513,7 @@
        this.loadingGBTree = false;
      }, 1000 * 60);
    },
    querySearchAsync(type) {
    querySearchAsync (type) {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        if (type === "camera") {
@@ -449,7 +524,7 @@
        }
      }, 500);
    },
    handleClick(event) {
    handleClick (event) {
      if (event.name == 'dataStack') {
        this.DataStackPool.fetchFiles();
        this.DataStackPool.clean();
@@ -458,7 +533,7 @@
      this.TreeDataPool.treeActiveName = event.name
      console.log("当前激活name：", this.TreeDataPool.treeActiveName)
    },
    async changeEnable() {
    async changeEnable () {
      if (this.PollData.localVideo === 0) {
        this.$notify({
          title: "失败",
@@ -474,13 +549,13 @@
        console.log(res, '切换本地文件分析开关')
      }
    },
    getCheckedFiles() {
    getCheckedFiles () {
      let list1 = this.TreeDataPool.localVedioList.filter(i => {
        return i.checkStatus
      })
      return list1
    },
    async stopVedio(status) {
    async stopVedio (status) {
      // let list1 = this.getCheckedFiles();
      if (this.TreeDataPool.checkedLocalVedio.length == 0) {
        this.$notify({
@@ -503,7 +578,7 @@
        console.log(res, '开启暂停参数')
      }
    },
    async deleteLocalFiles() {
    async deleteLocalFiles () {
      let list1 = this.getCheckedFiles();
      console.log(list1, '已勾选的视频')
      if (list1.length == 0) {
@@ -525,9 +600,95 @@
      }
    },

    refrash(current, pageSize) {
    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>
@@ -536,12 +697,17 @@
.left-tree-box {
  float: left;
  width: 100%;
  .el-tabs__nav-prev,
  .el-tabs__nav-next {
    display: none;
  }
  .el-tabs--border-card {
    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;
@@ -577,7 +743,7 @@
  .navTopSelect {
    display: flex;
    text-align: left;
    

    .el-input__icon {
      line-height: 34px;
    }
@@ -598,6 +764,10 @@
    font-size: 20px;
    padding: 0px 5px;
  }
  // .el-input__inner:focus {
  //     outline: none;
  //     border-color: #3D68E1;
  // }
  .el-menu {
    border-right: none;
  }
@@ -664,6 +834,7 @@
    .search-input {
      padding-top: 8px;
      padding-bottom: 12px;
      text-align: left;
      .dev-tree-close {
        width: 10%;
        margin-left: 10px;
@@ -749,6 +920,10 @@
.camera-add {
  left: 128px;
}

.import-btn {
  left: 156px;
}
.tree-font {
  font-family: PingFangSC-Medium;
  font-size: 14px;
@@ -775,4 +950,7 @@
    color: #606266;
  }
}
.flex-box{
  display: flex;
}
</style>