| | |
| | | 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" |
| | |
| | | <el-select |
| | | v-model="TreeDataPool.searchCamType" |
| | | placeholder="请选择" |
| | | style="width: 134px;height: 34px;margin-left: 10px;" |
| | | @change="searchAreaData" |
| | | > |
| | | <el-option |
| | |
| | | placeholder="搜索" |
| | | clearable |
| | | @input="querySearchAsync('camera')" |
| | | style="width: 103px;" |
| | | > |
| | | <i |
| | | class="el-icon-search el-input__icon" |
| | |
| | | @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" |
| | |
| | | @click="closeTree" |
| | | ></i> |
| | | </el-tooltip> |
| | | </div> |
| | | </div> --> |
| | | </li> |
| | | |
| | | <!-- 添加区域图标 --> |
| | |
| | | label="数据栈" |
| | | name="dataStack" |
| | | :style="`height:${height - 56}px;`" |
| | | v-if="isShow(dataStack)" |
| | | v-if="showDataStack" |
| | | > |
| | | <div class="local-vedio-area"> |
| | | <!-- 搜索 --> |
| | |
| | | ></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> |
| | | |
| | | <!-- 本地视频源列表 --> |
| | |
| | | </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> |
| | |
| | | }, |
| | | |
| | | computed: { |
| | | showTab() { |
| | | return true; |
| | | }, |
| | | showCam() { |
| | | return this.appName === "Camera" || this.appName === "Search"; |
| | | }, |
| | | showDataStack() { |
| | | return this.appName === "DataStack" || this.appName === "Search"; |
| | | }, |
| | | showLock() { |
| | | return this.edit; |
| | | }, |
| | |
| | | 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() { |
| | |
| | | <style lang="scss"> |
| | | .left-tree-box { |
| | | float: left; |
| | | width: 300px; |
| | | width: 100%; |
| | | .el-tabs__nav-prev,.el-tabs__nav-next{ |
| | | display: none; |
| | | } |
| | | .el-tabs--border-card { |
| | | border: none; |
| | | box-shadow: none; |
| | |
| | | } |
| | | .el-tabs__content { |
| | | padding: 0; |
| | | width: 100%; |
| | | } |
| | | } |
| | | ul { |
| | |
| | | .el-submenu__icon-arrow { |
| | | font-size: 12px !important; |
| | | padding-right: 2px !important; |
| | | left: 270px !important; |
| | | right: unset; |
| | | right: 0; |
| | | //right: unset; |
| | | } |
| | | i { |
| | | padding-right: 10px !important; |
| | |
| | | } |
| | | } |
| | | .navTopSelect { |
| | | display: flex; |
| | | text-align: left; |
| | | |
| | | .el-input__icon { |
| | | line-height: 34px; |
| | | } |
| | |
| | | font-size: 20px; |
| | | padding: 0px 5px; |
| | | } |
| | | // .el-input__inner:focus { |
| | | // outline: none; |
| | | // border-color: #3D68E1; |
| | | // } |
| | | .el-menu { |
| | | border-right: none; |
| | | } |