zhangzengfei
2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09
src/components/LeftNav.vue
@@ -1,11 +1,6 @@
<template>
  <transition name="slideLeft">
    <div
      class="left-tree-box"
      :style="`height:${height}px;animation-duration: 0.7s`"
      v-show="TreeDataPool.showTreeBox"
      v-loading="menuLoading"
    >
    <div class="left-tree-box" 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">
          <el-menu
@@ -13,18 +8,14 @@
            background-color="#fff"
            text-color="#303133"
            active-text-color="#409EFF"
            style="height: 100%;"
            style="height: 100%"
            class="el-menu-vertical-demo"
            unique-opened
            @open="menuOpen"
            @close="menuClose"
          >
            <li class="navTopSelect">
              <el-select
                v-model="TreeDataPool.searchCamType"
                placeholder="请选择"
                @change="searchAreaData"
              >
              <el-select v-model="TreeDataPool.searchCamType" placeholder="请选择" @change="searchAreaData">
                <el-option
                  v-for="item in searchTypeOptions"
                  :key="item.value"
@@ -32,7 +23,7 @@
                  :value="item.value"
                ></el-option>
              </el-select>
              <span style="display: inline-block;padding: 0px 3px;"></span>
              <span style="display: inline-block; padding: 0px 3px"></span>
              <el-input
                v-model="TreeDataPool.searchInput"
                placeholder="搜索"
@@ -41,7 +32,7 @@
              >
                <i
                  class="el-icon-search el-input__icon"
                  style="color:#DCDFE6"
                  style="color: #dcdfe6"
                  slot="prefix"
                  @click="searchAreaData"
                ></i>
@@ -57,7 +48,6 @@
              </div>-->
            </li>
            <!-- 添加区域图标 -->
            <div class="tree-edit area-add" v-show="!TreeDataPool.readonly">
              <el-tooltip content="添加区域" placement="bottom" popper-class="atooltip">
                <button @click="addNode($event)">
@@ -71,7 +61,7 @@
              <el-tooltip content="添加设备" placement="bottom" popper-class="atooltip">
                <button @click="addCamera('0')">
                  <!-- <i class="el-icon-video-camera"></i> -->
                  <span class="iconfont iconshishishipin" style="font-size:14px;"></span>
                  <span class="iconfont iconshishishipin" style="font-size: 14px"></span>
                </button>
              </el-tooltip>
            </div>
@@ -81,7 +71,7 @@
              <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>
                  <span class="iconfont icondaoru" style="font-size: 16px"></span>
                </button>
              </el-tooltip>
            </div>
@@ -98,10 +88,7 @@
            <el-submenu index="0">
              <template slot="title">
                <!-- <i class="iconfont iconjiankongshexiangji"></i> -->
                <span
                  class="iconfont iconjiankongshexiangji"
                  style="padding-right:10px;font-size:13px;"
                ></span>
                <span class="iconfont iconjiankongshexiangji" style="padding-right: 10px; font-size: 13px"></span>
                <b class="tree-font">摄像机</b>
              </template>
              <el-menu-item-group class="item-group">
@@ -118,23 +105,23 @@
            </el-submenu>
            <el-submenu index="1">
              <template slot="title">
                <i class="iconfont iconGBx" style="margin-left:-4px;"></i>
                <i class="iconfont iconGBx" style="margin-left: -4px"></i>
                <b class="tree-font">GB28181</b>
              </template>
              <!-- 国标刷新图标 -->
              <div class="tree-edit gb-refresh" v-show="!TreeDataPool.gbReadonly">
              <!-- <div class="tree-edit gb-refresh" v-show="!TreeDataPool.gbReadonly">
                <el-tooltip content="刷新" placement="top" popper-class="atooltip">
                  <button @click="refreshGB">
                    <i v-if="loadingGBTree" class="el-icon-loading" style="font-size:16px"></i>
                    <i v-else class="el-icon-refresh" style="font-size:16px"></i>
                  </button>
                </el-tooltip>
              </div>
              </div>-->
              <div class="tree-edit gb-lock" v-show="showLock">
                <button @click="gbLockSwitch">
                  <i v-if="TreeDataPool.gbReadonly" class="el-icon-lock" style="font-size:16px"></i>
                  <i v-else class="el-icon-unlock" style="font-size:16px"></i>
                  <i v-if="TreeDataPool.gbReadonly" class="el-icon-lock" style="font-size: 16px"></i>
                  <i v-else class="el-icon-unlock" style="font-size: 16px"></i>
                </button>
              </div>
              <el-menu-item-group class="item-group">
@@ -152,21 +139,12 @@
            </el-submenu>
          </el-menu>
        </el-tab-pane>
        <el-tab-pane
          label="集群"
          name="cluster"
          :style="`height:${height - 56}px;`"
          v-if="showCluster"
        >
        <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-select v-model="TreeDataPool.searchCamType" placeholder="请选择" @change="searchClusterData">
                  <el-option
                    v-for="item in searchTypeOptions"
                    :key="item.value"
@@ -174,7 +152,7 @@
                    :value="item.value"
                  ></el-option>
                </el-select>
                <span style="display: inline-block;padding: 0px 3px;"></span>
                <span style="display: inline-block; padding: 0px 3px"></span>
                <el-input
                  v-model="TreeDataPool.searchInput"
                  placeholder="搜索"
@@ -183,16 +161,16 @@
                >
                  <i
                    class="el-icon-search el-input__icon"
                    style="color:#DCDFE6"
                    style="color: #dcdfe6"
                    slot="prefix"
                    @click="searchClusterData"
                  ></i>
                </el-input>
              </div>
            </div>
            <div class="top-menu" style="margin:0 0 10px;text-align:left;">
              <span class="iconfont iconjiqun" style="font-size:20px;"></span>
              <span style="font-size:14px; margin-left: 5px;font-weight: 600;">{{clusterName}}</span>
            <div class="top-menu" style="margin: 0 0 10px; text-align: left">
              <span class="iconfont iconjiqun" style="font-size: 20px"></span>
              <span style="font-size: 14px; margin-left: 5px; font-weight: 600">{{ clusterName }}</span>
            </div>
            <div class="cluster-list">
              <tree-menu
@@ -216,7 +194,7 @@
                v-model="DataStackPool.searchType"
                placeholder="请选择"
                size="small"
                style="width: 134px;height: 34px;margin-left: 10px;"
                style="width: 134px; height: 34px; margin-left: 10px"
                @change="searchDataStack"
              >
                <el-option
@@ -226,7 +204,7 @@
                  :value="item.value"
                ></el-option>
              </el-select>
              <span style="display: inline-block;padding: 0px 3px;"></span>
              <span style="display: inline-block; padding: 0px 3px"></span>
              <el-input
                v-model="DataStackPool.searchInput"
                placeholder="请输入"
@@ -237,7 +215,7 @@
              >
                <i
                  class="el-icon-search el-input__icon"
                  style="color:black"
                  style="color: black"
                  slot="prefix"
                  @click="searchDataStack"
                ></i>
@@ -273,7 +251,7 @@
              <LocalVedioList :dataList="TreeDataPool.localVedioList"></LocalVedioList>
            </div>
          </div>
          <file-upload v-show="fileUploadBox" @close="fileUploadBox= false" />
          <file-upload v-show="fileUploadBox" @close="fileUploadBox = false" />
        </el-tab-pane>
      </el-tabs>
@@ -295,24 +273,15 @@
</template>
<script>
import {
  show,
  changeEnable,
  deleteLocalFile,
  updateStatus
} from "@/api/localVedio";
import {
  createCamera,
} from "@/api/camera";
import { createCamera } from "@/api/camera"
import bus from "@/plugin/bus"
// import TreeMenu from "@/components/treeMenu/index";
import TreeMenu from "@/components/giantTree/index";
import LocalVedioList from '@/components/subComponents/LocalVedioList';
import FileUpload from '@/components/subComponents/FileUpload/index';
import XLSX from 'xlsx'
import { findCluster } from "@/api/clusterManage";
import TreeMenu from "@/components/giantTree/index"
import LocalVedioList from "@/components/subComponents/LocalVedioList"
import FileUpload from "@/components/subComponents/FileUpload/index"
import XLSX from "xlsx"
import { findCluster } from "@/api/clusterManage"
export default {
  components: {
@@ -337,65 +306,65 @@
  computed: {
    showTab() {
      return true;
      return true
    },
    showCam() {
      return this.appName === "Camera" || this.appName === 'Cluster' || (this.appName === "Search" && (this.buttonAuthority.indexOf("search:camera") >= 0 || this.isAdmin));
      return (
        this.appName === "Camera" ||
        this.appName === "Cluster" ||
        (this.appName === "Search" && (this.buttonAuthority.indexOf("search:camera") >= 0 || this.isAdmin))
      )
    },
    showCluster() {
      return this.appName === "Cluster";
      return this.appName === "Cluster"
    },
    // 数据栈配置必须显示。 检索通过权限控制显示, 未安装数据栈也不显示
    showDataStack() {
      if (this.appName === "DataStack") {
        return true;
        return true
      }
      if (this.appName === "Search") {
        // 未安装数据栈配置
        if (this.installedApps.indexOf("dataStack") >= 0) {
          if (this.isAdmin) {
            return true;
            return true
          }
          if (this.buttonAuthority.indexOf("search:stack") >= 0) {
            return true;
            return true
          }
        }
      }
      return false;
      return false
    },
    showLock() {
      return this.edit;
      return this.edit
    },
    openeds() {
      let arry = [];
      let arry = []
      for (let i = 0; i < this.TreeDataPool.openeds.length; i++) {
        if (this.TreeDataPool.openeds[i]) {
          arry.push(i + "");
          // 默认展开一颗有数据的树
          break;
          arry.push(i + "")
          // 默认展开一颗有数据的树 . 功能有问题. 注销
          // break
        }
      }
      return arry;
      return arry
    },
    isAdmin() {
      if (
        sessionStorage.getItem("userInfo") &&
        sessionStorage.getItem("userInfo") !== ""
      ) {
        let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
        return loginName === "superadmin" || loginName === "basic";
      if (sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "") {
        let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username
        return loginName === "superadmin" || loginName === "basic"
      }
      return false;
      return false
    }
  },
  data() {
    return {
      cameraAuth: "videoMonitor:camera",
      dataStack: "videoMonitor:dataStack",
      activeIndexVideo: "",
      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
      installedApps: sessionStorage.getItem("apps") || [],
      loginName: JSON.parse(sessionStorage.getItem("userInfo")).username || "用户名",
@@ -417,203 +386,114 @@
          label: "联动摄像机"
        }
      ],
      searchTypeLocalVideo: [
        {
          value: 0,
          label: "全部"
        },
        {
          value: 1,
          label: "处理完成"
        },
        {
          value: 2,
          label: "处理中"
        },
        {
          value: 3,
          label: "未配规则"
        },
        {
          value: 4,
          label: "未开启"
        }
      ],
      timeout: null,
      fileUploadBox: false,
      loadingGBTree: false,
      importAreaId: "",
      menuLoading: false,
      clusterName: ''
    };
      clusterName: ""
    }
  },
  created() {
    console.log(this.appName)
    console.log(this.showCam)
    if (this.showCam) {
      this.TreeDataPool.treeActiveName = "camera"
      this.TreeDataPool.fetchTreeData();
      this.TreeDataPool.fetchTreeData()
    } else {
      this.TreeDataPool.treeActiveName = "dataStack"
      this.DataStackPool.fetchFiles();
      this.DataStackPool.fetchFiles()
    }
    if (this.showCluster) {
      this.TreeDataPool.treeActiveName = "cluster"
      this.TreeDataPool.fetchClusterTree();
      findCluster().then(res => {
      this.TreeDataPool.fetchClusterTree()
      findCluster().then((res) => {
        if (res.success) {
          this.clusterName = res.data.clusterName;
          this.clusterName = res.data.clusterName
        }
      })
    }
  },
  methods: {
    searchAreaData() {
      this.TreeDataPool.fetchTreeData();
      this.TreeDataPool.fetchTreeData()
    },
    searchDataStack() {
      this.DataStackPool.fetchFiles();
      this.DataStackPool.fetchFiles()
    },
    searchClusterData() {
      this.TreeDataPool.fetchClusterTree();
      this.TreeDataPool.fetchClusterTree()
    },
    lockSwitch() {
      this.TreeDataPool.readonly = !this.TreeDataPool.readonly;
      this.TreeDataPool.readonly = !this.TreeDataPool.readonly
    },
    gbLockSwitch() {
      this.TreeDataPool.gbReadonly = !this.TreeDataPool.gbReadonly;
      this.TreeDataPool.gbReadonly = !this.TreeDataPool.gbReadonly
    },
    dataStackLockSwitch() {
      this.DataStackPool.readonly = !this.DataStackPool.readonly;
      this.DataStackPool.readonly = !this.DataStackPool.readonly
    },
    closeTree() {
      this.TreeDataPool.showTreeBox = false;
      bus.$emit('refreshCompareImg')
      this.TreeDataPool.showTreeBox = false
      bus.$emit("refreshCompareImg")
    },
    addNode(event) {
      this.$refs.tree.addNode(event, { id: 0 });
      this.$refs.tree.addNode(event, { id: 0 })
    },
    addCamera(node) {
      bus.$emit("addCameraOnTree", node);
      bus.$emit("addCameraOnTree", node)
    },
    addDir(node) {
      bus.$emit("addDirOnTree", node);
      bus.$emit("addDirOnTree", node)
    },
    menuOpen(index) {
      this.TreeDataPool.openeds[index] = true;
      this.TreeDataPool.openeds[index] = true
    },
    menuClose(index) {
      this.TreeDataPool.openeds[index] = false;
      this.TreeDataPool.openeds[index] = false
    },
    refreshGB() {
      // 防止重复刷新
      if (this.loadingGBTree) {
        return;
        return
      }
      // 国标摄像机数据是国标服务分批推送的,请求刷新列表后,需要等待约1分钟的时间后端才能同步完数据。
      this.TreeDataPool.refreshGB28181();
      this.loadingGBTree = true;
      this.TreeDataPool.refreshGB28181()
      this.loadingGBTree = true
      setTimeout(() => {
        this.TreeDataPool.fetchGbTree();
        this.loadingGBTree = false;
      }, 1000 * 60);
        this.TreeDataPool.fetchGbTree()
        this.loadingGBTree = false
      }, 1000 * 60)
    },
    querySearchAsync(type) {
      clearTimeout(this.timeout);
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        if (type === "camera") {
          this.TreeDataPool.fetchTreeData();
          this.TreeDataPool.fetchTreeData()
        }
        if (type === "cluster") {
          this.TreeDataPool.fetchClusterTree();
          this.TreeDataPool.fetchClusterTree()
        }
        if (type === "dir") {
          this.DataStackPool.fetchFiles();
          this.DataStackPool.fetchFiles()
        }
      }, 500);
      }, 500)
    },
    handleClick(event) {
      if (event.name == 'dataStack') {
        this.DataStackPool.fetchFiles();
        this.DataStackPool.clean();
        this.TreeDataPool.clean();
      if (event.name == "dataStack") {
        this.DataStackPool.fetchFiles()
        this.DataStackPool.clean()
        this.TreeDataPool.clean()
      }
      this.TreeDataPool.treeActiveName = event.name
      console.log("当前激活name:", this.TreeDataPool.treeActiveName)
    },
    async changeEnable() {
      if (this.PollData.localVideo === 0) {
        this.$notify({
          title: "失败",
          type: "warning",
          message: "开启本地数据视频分析处理,需先为本地数据手动设置算力资源!"
        })
        return false;
      }
      let res = await changeEnable({
        enable: this.TreeDataPool.vedioAnaliyseSwitch
      })
      if (res && res.success) {
        console.log(res, '切换本地文件分析开关')
      }
    },
    getCheckedFiles() {
      let list1 = this.TreeDataPool.localVedioList.filter(i => {
      let list1 = this.TreeDataPool.localVedioList.filter((i) => {
        return i.checkStatus
      })
      return list1
    },
    async stopVedio(status) {
      // let list1 = this.getCheckedFiles();
      if (this.TreeDataPool.checkedLocalVedio.length == 0) {
        this.$notify({
          type: "warning",
          message: "请先选择需要停止的视频!"
        });
        // this.$notify({
        //   type:"info",
        //   message:"请先选择需要停止的视频!"
        // })
        return false;
      }
      let res = await updateStatus({
        ids: this.TreeDataPool.checkedLocalVedio.map(i => {
          return i.id
        }),
        status: status
      })
      if (res && res.success) {
        console.log(res, '开启暂停参数')
      }
    },
    async deleteLocalFiles() {
      let list1 = this.getCheckedFiles();
      console.log(list1, '已勾选的视频')
      if (list1.length == 0) {
        return false
      }
      let res = await deleteLocalFile({
        ids: list1.map(i => { return i.id })
      })
      if (res && res.success) {
        this.$notify({
          type: 'success',
          message: '删除成功!!'
        })
      } else {
        this.$notify({
          type: "error",
          message: "删除失败!"
        })
      }
    },
    refrash(current, pageSize) {
      this.TreeDataPool.localCurrentPage = current;
      this.TreeDataPool.localCurrentPage = current
    },
    importCameras(area) {
@@ -622,70 +502,69 @@
    },
    async uploadFile(params) {
      const _file = params.file;
      const fileReader = new FileReader();
      const _file = params.file
      const fileReader = new FileReader()
      fileReader.onload = (ev) => {
        this.menuLoading = true;
        this.menuLoading = true
        try {
          const data = ev.target.result;
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary'
          });
            type: "binary"
          })
          for (let sheet in workbook.Sheets) {
            //循环读取每个文件
            const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
            const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
            //若当前sheet没有数据,则continue
            if (sheetArray.length == 0) {
              continue;
              continue
            }
            let succeed = 0;
            let failed = 0;
            let promiseArr = [];
            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);
              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));
              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 + "个"
            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()
              })
              _this.TreeDataPool.fetchTreeData();
            }).catch(e => {
              console.log(e)
            });
              .catch((e) => {
                console.log(e)
              })
          }
        } catch (e) {
          this.menuLoading = false
          this.$message.warning('文件类型不正确!');
          this.$message.warning("文件类型不正确!")
        }
      };
      fileReader.readAsBinaryString(_file);
      }
      fileReader.readAsBinaryString(_file)
    },
    exceed() {
      this.$message.error("最多只能上传1个xls文件");
      this.$message.error("最多只能上传1个xls文件")
    },
    //删除文件
    remove() {
    },
    remove() {},
    newCamera() {
      return {
        latitude: 0,
@@ -702,7 +581,7 @@
      }
    }
  }
};
}
</script>
<style lang="scss">
@@ -868,16 +747,10 @@
    .dev-vedio-list {
      padding: 0 15px;
      box-sizing: border-box;
      height: calc(100vh - 80px);
      // height: calc(100vh - 80px);
      //max-height: 740px;
      overflow-x: hidden;
      overflow-y: auto;
      // @media screen and (max-height: 720px) {
      //   max-height: 580px;
      // }
      // @media screen and (min-height: 900px) {
      //   max-height: 740px;
      // }
      // overflow-x: hidden;
      overflow: auto;
    }
    .dev-vedio-list::-webkit-scrollbar {
      /*滚动条整体样式*/
@@ -967,4 +840,4 @@
.flex-box {
  display: flex;
}
</style>
</style>