forked from srs-police-affairs
src/views/video/list.vue
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2022-08-18 16:18:17 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2023-01-12 17:08:15 * @LastEditTime: 2023-02-08 11:21:57 * @FilePath: \srs-police-affairs\src\views\video\list.vue * @Description: 辖区管理 * @@ -14,13 +14,7 @@ <div v-show="boxShow" class="container-content"> <div class="search-box"> 点位名称： <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" /> <button @click="searchClick" class="el-icon-search"></button> <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" /> </div> <div class="draw-btn"> @@ -37,79 +31,49 @@ <button @click="changeRange" class="btn">确定</button> </div> <div v-show="searchValBoxShow" class="search-val-box"> <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index" >{{ item.name }}</div> <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }} </div> </div> <div class="down-tree"> <el-scrollbar> <el-tree :props="props" :load="loadNode" lazy @node-click="treeClick"></el-tree> <el-tree v-show="searchLazyFlag" :props="props" :load="loadNode" lazy @node-click="treeClick"></el-tree> <el-tree v-show="searchLazyFlag == false" :data="searchTreeData" :props="defaultProps" :default-expand-all="true" @node-click="treeClick"></el-tree> </el-scrollbar> </div> <div class="list-show" v-if="false"> <div class="car-list"> <div class="list-box"> <el-table :data="monitoringList" style="width: 100%" <el-table :data="monitoringList" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick" > <el-table-column :show-overflow-tooltip="true" prop="name" label="点位名称" min-width="35%" ></el-table-column> <el-table-column :show-overflow-tooltip="true" prop="pTZTypeText" label="点位类型" min-width="35%" ></el-table-column> <el-table-column :show-overflow-tooltip="true" prop="status" label="状态" min-width="30%" > :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick"> <el-table-column :show-overflow-tooltip="true" prop="name" label="点位名称" min-width="35%"></el-table-column> <el-table-column :show-overflow-tooltip="true" prop="pTZTypeText" label="点位类型" min-width="35%"></el-table-column> <el-table-column :show-overflow-tooltip="true" prop="status" label="状态" min-width="30%"> <template slot-scope="scope"> <div class="state-box" :class="{ online: scope.row.status == '1' }" ></div> <div class="state-box" :class="{ online: scope.row.status == '1' }"></div> </template> </el-table-column> </el-table> </div> <div class="pages"> <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount" :current-page="currentPage" pager-count="5" @current-change="handleCurrentChange" ></el-pagination> <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount" :current-page="currentPage" pager-count="5" @current-change="handleCurrentChange"></el-pagination> </div> </div> </div> </div> <div class="search-content"> <input v-model="searchExtensivelyValue" @input="searchExtensivelyChange" @focus="searchExtensivelyFocus" type="text" placeholder="请输入搜索条件" /> <input v-model="searchExtensivelyValue" @input="searchExtensivelyChange" @focus="searchExtensivelyFocus" type="text" placeholder="请输入搜索条件" /> <div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空"> <img src="../../../public/img/icon/clear.png" alt /> </div> @@ -117,39 +81,17 @@ </div> <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box"> <div> <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray" :key="index" >{{ item.name }}</div> <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray" :key="index">{{ item.name }}</div> </div> </div> <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box" > <video id="videoElement" autoplay controls width="100%" height="100%" style="object-fit: fill" ></video> <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box"> <video id="videoElement" autoplay controls width="100%" height="100%" style="object-fit: fill"></video> </el-dialog> <el-dialog :title="drawDialogTitle" :modal="false" :visible.sync="drawDialogVisible" :before-close="drawDialogBeforeClose" :close-on-click-modal="true" class="video-draw-box" > <el-dialog :title="drawDialogTitle" :modal="false" :visible.sync="drawDialogVisible" :before-close="drawDialogBeforeClose" :close-on-click-modal="true" class="video-draw-box"> <input type="text" v-model="drawName" placeholder="请输入绘制线或面的名称" /> <button @click="saveDrawInfo">保存</button> </el-dialog> @@ -159,13 +101,15 @@ <script> import EntityDraw from "@/utils/EntityDraw.js" import { listQuery, accurateSearch } from "@/utils/search.js" import { getVideoList, getDevices, getRegionList, insertRegionSaveList, getTreeDevices } from '@/api/video/index.js' import { getVideoList, getDevices, getRegionList, insertRegionSaveList, getTreeDevices, getSearchTreeDevices } from '@/api/video/index.js' import { getSearchExtensively } from '@/api/dept/index.js' import flvjs from 'flv.js' let graphicLayer = null export default { inject: ['userInfo'], data () { return { currentPage: 1, @@ -195,12 +139,16 @@ props: { label: 'name', children: 'zones', isLeaf: (data, node) => { if (data.parent == false) { return true } } isLeaf: 'leaf' }, defaultProps: { children: "children", //代表children为子级 label: "name", //根据name渲染tree列表 }, searchLazyFlag: true, searchTreeData: [] } }, @@ -325,31 +273,21 @@ this.drawName = '' }, searchChange () { if (this.searchValue == '') { this.searchValBoxShow = false this.searchArray = [] this.getVideoList(this.currentPage, this.pagesize, this.searchValue) this.$message({ message: '请输入搜索内容', type: 'warning' }) } else { this.searchArray = listQuery(this.monitoringSaveList, this.searchValue, 'name') this.searchValBoxShow = true this.getVideoList(this.currentPage, this.pagesize, this.searchValue) } }, searchChange (e) { if (e.target.value.trim() != '') { this.searchLazyFlag = false searchClick () { if (this.searchValue != '') { this.searchValBoxShow = false this.getVideoList(this.currentPage, this.pagesize, this.searchValue) } else { this.$message({ message: '请输入搜索内容', type: 'warning' this.searchTreeData = [] getSearchTreeDevices({ deviceId: '36110000002009999000', parentId: '361102', deptId: this.userInfo.dept_id, name: this.searchValue.trim() }).then(res => { this.searchTreeData = res.data.data }) } else { this.searchLazyFlag = true } }, @@ -592,62 +530,71 @@ }, async loadNode (node, resolve) { if (node.level === 0) { return resolve([{ name: '信州分局' }]) let type = Number(node.level) + 1 let data = null let parentId = null if (type == 1 || type == 2) { parentId = 361102 } else { parentId = node.data.id } if (node.level === 1) { let data = [] await getTreeDevices({ page: 1, count: 100, parentId: 361102, onlyCatalog: false }).then(res => { data = res.data.data.list }) return resolve(data) } if (node.level > 1) { let data = [] await getTreeDevices({ page: 1, count: 100, parentId: node.data.id, onlyCatalog: false }).then(res => { data = res.data.data.list }) return resolve(data) } await getTreeDevices({ deviceId: '36110000002009999000', parentId, deptId: this.userInfo.dept_id, type, sourceId: type == 4 ? '' : '36110202', }).then(res => { data = res.data.data data.forEach(item => item.leaf = !item.parent) }) return resolve(data) }, async treeClick (node) { if (node.parent == false) { console.log(node, node.name, node.id, node.basicData.channelId, node.basicData.longitude, node.basicData.latitude) this.$EventBus.$emit('toPosition', { siteJd: node.basicData.longitude, siteWd: node.basicData.latitude, siteGd: 600, }) this.$EventBus.$emit('mapClearLayer', { layerName: 'searchLayer', type: 'VectorLayer' }) this.$EventBus.$emit('layerPointAdd', { layerName: 'searchLayer', type: 'label', params: { lng: node.basicData.longitude, lat: node.basicData.latitude, alt: 0, text: node.name } }) this.$EventBus.$emit('layerPointAdd', { layerName: 'searchLayer', type: "billboard", params: { name: node.name, lng: node.basicData.longitude, lat: node.basicData.latitude, alt: 100, url: '/img/icon/video.png', channelId: node.id }, incident: this.siteClick }) if (node.parent == true) return } this.$EventBus.$emit('toPosition', { siteJd: node.longitude, siteWd: node.latitude, siteGd: 600, }) this.$EventBus.$emit('mapClearLayer', { layerName: 'searchLayer', type: 'VectorLayer' }) this.$EventBus.$emit('layerPointAdd', { layerName: 'searchLayer', type: 'label', params: { lng: node.longitude, lat: node.latitude, alt: 0, text: node.name } }) this.$EventBus.$emit('layerPointAdd', { layerName: 'searchLayer', type: "billboard", params: { name: node.name, lng: node.longitude, lat: node.latitude, alt: 100, url: '/img/icon/video.png', channelId: node.id }, incident: this.siteClick }) }, }, @@ -699,14 +646,12 @@ input { flex: 1; height: 100%; font-size: 18px; font-size: 16px; text-indent: 1em; color: #ffffff; background-color: rgba(24, 79, 202, 0.6); // border: 1px solid rgb(0, 92, 169); border: 1px solid rgb(24, 79, 202); border-radius: 20px 0 0 20px; } input:focus { @@ -750,7 +695,7 @@ border-radius: 10px; overflow-y: auto; & > div { &>div { height: 100%; padding: 0 10px; line-height: 36px; @@ -824,7 +769,7 @@ .list-show { flex: 1; & > div { &>div { height: 100%; display: flex; flex-direction: column; @@ -858,12 +803,15 @@ } .down-tree { height: 100%; flex: 1; overflow: hidden; :deep(.el-tree-node.is-expanded > .el-tree-node__children) { display: inline; } :deep(.el-scrollbar) { height: calc(100% - 80px); height: 100%; } } } @@ -944,7 +892,7 @@ border-radius: 10px; overflow: hidden; & > div { &>div { height: 100%; overflow-y: auto;
