添加摄像机区域管理应用

hanbaoshan

2020-08-29 21a340c24815a55a07db2dc3d2e5a19e7de440cd

 src/components/LeftNav.vue

@@ -6,12 +6,7 @@
      v-show="TreeDataPool.showTreeBox"
    >
      <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 +22,6 @@
              <el-select
                v-model="TreeDataPool.searchCamType"
                placeholder="请选择"
                
                @change="searchAreaData"
              >
                <el-option
@@ -43,7 +37,6 @@
                placeholder="搜索"
                clearable
                @input="querySearchAsync('camera')"
                
              >
                <i
                  class="el-icon-search el-input__icon"
@@ -52,7 +45,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 +53,7 @@
                    @click="closeTree"
                  ></i>
                </el-tooltip>
              </div>
              </div>-->
            </li>

            <!-- 添加区域图标 -->
@@ -150,7 +143,7 @@
          label="数据栈"
          name="dataStack"
          :style="`height:${height - 56}px;`"
          v-if="isShow(dataStack)"
          v-if="showDataStack"
        >
          <div class="local-vedio-area">
            <!-- 搜索 -->
@@ -187,13 +180,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,21 +209,9 @@
              </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>
    </div>
  </transition>
@@ -244,6 +225,7 @@
  updateStatus
} from "@/api/localVedio";

import bus from "@/plugin/bus"
import TreeMenu from "@/components/treeMenu/index";
import LocalVedioList from '@/components/subComponents/LocalVedioList';
import FileUpload from '@/components/subComponents/FileUpload/index';
@@ -270,6 +252,15 @@
  },

  computed: {
    showTab() {
      return true;
    },
    showCam() {
      return this.appName === "Camera" || this.appName === "Search";
    },
    showDataStack() {
      return this.appName === "DataStack" || this.appName === "Search";
    },
    showLock() {
      return this.edit;
    },
@@ -347,52 +338,40 @@
      loadingGBTree: 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)
    }
  },
  // 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')) {
    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()
      // }
    });
  },
  methods: {
    isShow(authority) {
      if (this.isAdmin) {
        return true;
      } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
        return true;
      } else {
        return false;
      }
    },
    searchAreaData() {
      this.TreeDataPool.fetchTreeData();
    },
    searchDataStack() {
      debugger
      this.DataStackPool.fetchFiles();
    },
    lockSwitch() {
@@ -407,16 +386,16 @@
    },
    closeTree() {
      this.TreeDataPool.showTreeBox = false;
      // bus.$emit('refreshCompareImg')
      bus.$emit('refreshCompareImg')
    },
    addNode(event) {
      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;
@@ -536,6 +515,10 @@
.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;
@@ -577,7 +560,7 @@
  .navTopSelect {
    display: flex;
    text-align: left;
    

    .el-input__icon {
      line-height: 34px;
    }
@@ -598,6 +581,10 @@
    font-size: 20px;
    padding: 0px 5px;
  }
  // .el-input__inner:focus {
  //     outline: none;
  //     border-color: #3D68E1;
  // }
  .el-menu {
    border-right: none;
  }