添加摄像机权限

zhangzengfei

2022-08-19 3e4904fda5c78cfd8b40fa925fd2970b01850224

 src/components/CameraLeft.vue

@@ -2,22 +2,9 @@
  <transition name="slideLeft">
    <div class="CameraLeft">
      <div class="tree">
        <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"
            >
        <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
                :default-openeds="openeds"
                background-color="#fff"
@@ -30,11 +17,7 @@
                @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"
@@ -48,11 +31,7 @@
                    clearable
                    @input="querySearchAsync('camera')"
                  >
                    <i
                      class="iconfont searchIcon"
                      style="color: #dcdfe6"
                      slot="suffix"
                      @click="searchAreaData"
                    <i class="iconfont searchIcon" style="color: #dcdfe6" slot="suffix" @click="searchAreaData"
                      >&#xe607;</i
                    >
                  </el-input>
@@ -68,11 +47,7 @@
                </li>

                <div class="tree-edit area-add" v-show="!TreeDataPool.readonly">
                  <el-tooltip
                    content="添加区域"
                    placement="bottom"
                    popper-class="atooltip"
                  >
                  <el-tooltip content="添加区域" placement="bottom" popper-class="atooltip">
                    <button @click="addNode($event)">
                      <i class="iconfont">&#xe641;</i>
                    </button>
@@ -80,39 +55,21 @@
                </div>

                <!-- 添加设备图标 -->
                <div
                  class="tree-edit camera-add"
                  v-show="!TreeDataPool.readonly"
                >
                  <el-tooltip
                    content="添加设备"
                    placement="bottom"
                    popper-class="atooltip"
                  >
                <div class="tree-edit camera-add" v-show="!TreeDataPool.readonly">
                  <el-tooltip content="添加设备" placement="bottom" popper-class="atooltip">
                    <button @click="addCamera('0')">
                      <!-- <i class="el-icon-video-camera"></i> -->
                      <span class="iconfont" style="font-size: 14px"
                        >&#xe642;</span
                      >
                      <span class="iconfont" style="font-size: 14px">&#xe642;</span>
                    </button>
                  </el-tooltip>
                </div>

                <!-- 导入设备 -->
                <div
                  class="tree-edit import-btn"
                  v-show="!TreeDataPool.readonly"
                >
                  <el-tooltip
                    content="导入设备"
                    placement="bottom"
                    popper-class="atooltip"
                  >
                <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" style="font-size: 16px"
                        >&#xe643;</span
                      >
                      <span class="iconfont" style="font-size: 16px">&#xe643;</span>
                    </button>
                  </el-tooltip>
                </div>
@@ -129,9 +86,7 @@
                <el-submenu index="0">
                  <template slot="title">
                    <!-- <i class="iconfont iconjiankongshexiangji"></i> -->
                    <span class="iconfont closeIcon" v-if="openeds[0] === '0'"
                      >&#xe64a;</span
                    >
                    <span class="iconfont closeIcon" v-if="openeds[0] === '0'">&#xe64a;</span>
                    <span class="iconfont openIcon" v-else>&#xe64b;</span>
                    <span class="iconfont cameraIcon">&#xe645;</span>
                    <b class="tree-font">摄像机</b>
@@ -151,9 +106,7 @@
                <el-submenu index="1">
                  <template slot="title">
                    <!-- <i class="iconfont iconjiankongshexiangji"></i> -->
                    <span class="iconfont closeIcon" v-if="openeds[0] === '1'"
                      >&#xe64a;</span
                    >
                    <span class="iconfont closeIcon" v-if="openeds[0] === '1'">&#xe64a;</span>
                    <span class="iconfont openIcon" v-else>&#xe64b;</span>
                    <span class="iconfont cameraIcon">&#xe64c;</span>
                    <b class="tree-font">GB28181</b>
@@ -170,16 +123,8 @@
              </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">
@@ -198,9 +143,7 @@
                <el-submenu index="2">
                  <template slot="title">
                    <!-- <i class="iconfont iconjiankongshexiangji"></i> -->
                    <span class="iconfont closeIcon" v-if="openeds[0] === '2'"
                      >&#xe64a;</span
                    >
                    <span class="iconfont closeIcon" v-if="openeds[0] === '2'">&#xe64a;</span>
                    <span class="iconfont openIcon" v-else>&#xe64b;</span>
                    <span class="iconfont cameraIcon">&#xe64d;</span>
                    <b class="tree-font">图片</b>
@@ -208,21 +151,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"
@@ -230,9 +164,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="搜索"
@@ -248,18 +180,9 @@
                    </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
@@ -270,6 +193,7 @@
                    :height="height"
                    @addDevice="addCamera"
                    @import="importCameras"
                    style="width:400px"
                  />
                </div>
              </div>
@@ -322,15 +246,8 @@
                <!-- 本地视频源列表 -->
                <div class="dev-vedio-list">
                  <!-- 添加文件夹图标 -->
                  <div
                    class="tree-edit area-add"
                    v-show="!DataStackPool.readonly"
                  >
                    <el-tooltip
                      content="添加文件夹"
                      placement="bottom"
                      popper-class="atooltip"
                    >
                  <div class="tree-edit area-add" v-show="!DataStackPool.readonly">
                    <el-tooltip content="添加文件夹" placement="bottom" popper-class="atooltip">
                      <button @click="addDir($event)">
                        <i class="iconfont iconhebingxingzhuang"></i>
                      </button>
@@ -344,15 +261,10 @@
                      <i v-else class="el-icon-unlock"></i>
                    </button>
                  </div>
                  <LocalVedioList
                    :dataList="TreeDataPool.localVedioList"
                  ></LocalVedioList>
                  <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>

@@ -376,90 +288,86 @@
</template>

<script>
import { changeEnable, deleteLocalFile, updateStatus } from "@/api/localVedio";
import { changeEnable, deleteLocalFile, updateStatus } from "@/api/localVedio"

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

import bus from "@/plugin/bus";
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: {
    TreeMenu,
    LocalVedioList,
    FileUpload,
    FileUpload
  },
  props: {
    appName: {
      type: String,
      default: "Video",
      default: "Video"
    },
    edit: {
      type: Boolean,
      default: false,
      default: false
    },
    height: {
      type: Number,
      default: 0,
    },
      default: 0
    }
  },

  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))
      );
        (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
    },

    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 true;
    },
      return true
    }
  },
  data() {
    return {
@@ -467,25 +375,24 @@
      dataStack: "videoMonitor:dataStack",
      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
      installedApps: sessionStorage.getItem("apps") || [],
      loginName:
        JSON.parse(sessionStorage.getItem("userInfo")).username || "用户名",
      loginName: JSON.parse(sessionStorage.getItem("userInfo")).username || "用户名",
      searchTypeOptions: [
        {
          value: 0,
          label: "全部摄像机",
          label: "全部摄像机"
        },
        {
          value: 1,
          label: "分析摄像机",
          label: "分析摄像机"
        },
        {
          value: 2,
          label: "监控摄像机",
          label: "监控摄像机"
        },
        {
          value: 3,
          label: "联动摄像机",
        },
          label: "联动摄像机"
        }
      ],
      timeout: null,
      fileUploadBox: false,
@@ -493,258 +400,252 @@
      importAreaId: "",
      menuLoading: false,
      clusterName: "",
      cluster: "",
    };
      cluster: ""
    }
  },
  created() {
    if (this.showCam) {
      this.TreeDataPool.treeActiveName = "camera";
      this.TreeDataPool.treeActiveName = "camera"
      //  this.TreeDataPool.fetchTreeData();
    } else {
      this.TreeDataPool.treeActiveName = "dataStack";
      this.DataStackPool.fetchFiles();
      this.TreeDataPool.treeActiveName = "dataStack"
      this.DataStackPool.fetchFiles()
    }
    if (this.showCluster) {
      this.TreeDataPool.treeActiveName = "cluster";
      this.TreeDataPool.fetchClusterTree();
      this.TreeDataPool.treeActiveName = "cluster"
      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.$set(this.openeds, 0, index);
      this.TreeDataPool.openeds[index] = true;
      this.$set(this.openeds, 0, index)
      this.TreeDataPool.openeds[index] = true
    },
    menuClose(index) {
      this.$set(this.openeds, 0, "");
      this.TreeDataPool.openeds[index] = false;
      this.$set(this.openeds, 0, "")
      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();
        this.DataStackPool.fetchFiles()
        this.DataStackPool.clean()
        this.TreeDataPool.clean()
      }
      this.TreeDataPool.treeActiveName = event.name;
      console.log("当前激活name：", this.TreeDataPool.treeActiveName);
      this.TreeDataPool.treeActiveName = event.name
    },
    async changeEnable() {
      if (this.PollData.localVideo === 0) {
        this.$notify({
          title: "失败",
          type: "warning",
          message: "开启本地数据视频分析处理，需先为本地数据手动设置算力资源！",
        });
        return false;
          message: "开启本地数据视频分析处理，需先为本地数据手动设置算力资源！"
        })
        return false
      }
      let res = await changeEnable({
        enable: this.TreeDataPool.vedioAnaliyseSwitch,
      });
        enable: this.TreeDataPool.vedioAnaliyseSwitch
      })
      if (res && res.success) {
        console.log(res, "切换本地文件分析开关");
        console.log(res, "切换本地文件分析开关")
      }
    },
    getCheckedFiles() {
      let list1 = this.TreeDataPool.localVedioList.filter((i) => {
        return i.checkStatus;
      });
      return list1;
        return i.checkStatus
      })
      return list1
    },
    async stopVedio(status) {
      // let list1 = this.getCheckedFiles();
      if (this.TreeDataPool.checkedLocalVedio.length == 0) {
        this.$notify({
          type: "warning",
          message: "请先选择需要停止的视频！",
        });
          message: "请先选择需要停止的视频！"
        })
        // this.$notify({
        //   type:"info",
        //   message:"请先选择需要停止的视频！"
        // })
        return false;
        return false
      }
      let res = await updateStatus({
        ids: this.TreeDataPool.checkedLocalVedio.map((i) => {
          return i.id;
          return i.id
        }),
        status: status,
      });
        status: status
      })
      if (res && res.success) {
        console.log(res, "开启暂停参数");
        console.log(res, "开启暂停参数")
      }
    },
    async deleteLocalFiles() {
      let list1 = this.getCheckedFiles();
      console.log(list1, "已勾选的视频");
      let list1 = this.getCheckedFiles()
      console.log(list1, "已勾选的视频")
      if (list1.length == 0) {
        return false;
        return false
      }
      let res = await deleteLocalFile({
        ids: list1.map((i) => {
          return i.id;
        }),
      });
          return i.id
        })
      })
      if (res && res.success) {
        this.$notify({
          type: "success",
          message: "删除成功！！",
        });
          message: "删除成功！！"
        })
      } else {
        this.$notify({
          type: "error",
          message: "删除失败！",
        });
          message: "删除失败！"
        })
      }
    },

    refrash(current, pageSize) {
      this.TreeDataPool.localCurrentPage = current;
      this.TreeDataPool.localCurrentPage = current
    },

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

    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)

              let tem = {
                camera: camera,
                sensors: camera.sensors,
              };
              tem.camera.clusterId = this.TreeDataPool.clusterId;
              tem.camera.devId = this.TreeDataPool.devId;
              tem.camera.parentUserId = "";
              tem.camera.enable = false;
              delete tem.camera.sensors;
                sensors: camera.sensors
              }
              tem.camera.clusterId = this.TreeDataPool.clusterId
              tem.camera.devId = this.TreeDataPool.devId
              tem.camera.parentUserId = ""
              tem.camera.enable = false
              delete tem.camera.sensors

              promiseArr.push(createCamera(tem));
              promiseArr.push(createCamera(tem))
            }
            let _this = this;
            let _this = this
            Promise.allSettled(promiseArr)
              .then((res) => {
                res.forEach((item) => {
                  if (item.status === "fulfilled") {
                    succeed++;
                    succeed++
                  } else {
                    failed++;
                    failed++
                  }
                });
                _this.menuLoading = false;
                })
                _this.menuLoading = false
                _this.$message({
                  type: "success",
                  message:
                    "操作完成, 导入成功:" +
                    succeed +
                    "个 失败:" +
                    failed +
                    "个",
                });
                _this.TreeDataPool.fetchTreeData();
                  message: "操作完成, 导入成功:" + succeed + "个 失败:" + failed + "个"
                })
                _this.TreeDataPool.fetchTreeData()
              })
              .catch((e) => {
                console.log(e);
              });
                console.log(e)
              })
          }
        } catch (e) {
          this.menuLoading = false;
          this.$message.warning("文件类型不正确！");
          this.menuLoading = false
          this.$message.warning("文件类型不正确！")
        }
      };
      fileReader.readAsBinaryString(_file);
      }
      fileReader.readAsBinaryString(_file)
    },
    exceed() {
      this.$message.error("最多只能上传1个xls文件");
      this.$message.error("最多只能上传1个xls文件")
    },
    //删除文件
    remove() {},
@@ -760,11 +661,11 @@
        run_type: -1,
        username: "",
        password: "",
        sensors: [],
      };
    },
  },
};
        sensors: []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@@ -1069,4 +970,4 @@
.flex-box {
  display: flex;
}
</style>
</style>