| | |
| | | <div class="police-page container"> |
| | | <div v-show="boxShow" class="container-content"> |
| | | <el-main v-loading="equimentLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" |
| | | element-loading-background="rgba(0, 0, 0, 0.2)"> |
| | | <div class="switch-box" v-show="!detailFlag && !equimentLoading"> |
| | | element-loading-background="rgba(0, 0, 0, 0.2)" style="overflow: hidden;padding: 0px;"> |
| | | <div class="switch-box" v-show="!detailFlag"> |
| | | 资源类别: |
| | | <el-select v-model="typeValue" @change="navClick" placeholder="请选择" class="type-select-css"> |
| | | <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" |
| | |
| | | </el-select> |
| | | </div> |
| | | |
| | | <div class="list-show" v-if="!detailFlag && !equimentLoading"> |
| | | <div class="list-show" v-if="!detailFlag"> |
| | | <div class="search-box"> |
| | | 资源名称: |
| | | <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入…" /> |
| | |
| | | <div class="state-box" :class="{ online: scope.row.status == '1' }"></div> |
| | | </template> |
| | | </el-table-column> |
| | | <div slot="empty" style="text-align: left;">{{ emptyText }}</div> |
| | | <el-table-column label="操作" align="center" |
| | | :min-width="typeValue == 0 || typeValue == 2 ? '30%' : '18%'"> |
| | | <template slot-scope="scope"> |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | |
| | | <div class="pages all-pagination-sty" ref="tablePagination"> |
| | | <div class="pages all-pagination-sty" ref="tablePagination" style="padding-top:-15px"> |
| | | <el-pagination background layout="prev, pager, next" :page-size="equimentPage.pageSize" |
| | | :page-count="equimentPage.count" :pager-count="4" :current-page="equimentPage.currentPage" |
| | | @current-change="handleCurrentChange"></el-pagination> |
| | |
| | | export default { |
| | | inject: ['userInfo'], |
| | | |
| | | data () { |
| | | data() { |
| | | return { |
| | | emptyText: '', |
| | | navType: 0, |
| | | equimentLoading: false, |
| | | dialogTitle: '', |
| | |
| | | equimentTableData: [], |
| | | equimentPage: { |
| | | total: 0, |
| | | pageSize: 25, |
| | | pageSize: 22, |
| | | count: 0, |
| | | currentPage: 1 |
| | | }, |
| | |
| | | } |
| | | }, |
| | | |
| | | created () { |
| | | created() { |
| | | window.addEventListener('resize', this.setTableHeight) |
| | | }, |
| | | |
| | | mounted () { |
| | | mounted() { |
| | | this.$parent.$parent.resize('400px', true) |
| | | |
| | | this.navClick() |
| | |
| | | |
| | | methods: { |
| | | // 搜索框改变事件 |
| | | searchChange () { |
| | | searchChange() { |
| | | this.detailFlag = false |
| | | |
| | | this.$EventBus.$emit('mapClearLayer', { |
| | |
| | | }) |
| | | |
| | | this.equimentPage.currentPage = 1 |
| | | this.equimentPage.count = 0 |
| | | // this.equimentTableData = [] |
| | | |
| | | this.$EventBus.$emit('mapClearLayer', { |
| | | layerName: 'carLayers', |
| | |
| | | layerName: 'policeMonitoringLayers', |
| | | type: 'VectorLayer' |
| | | }) |
| | | this.equimentLoading = true |
| | | |
| | | // 查询分页数据 |
| | | this.getEquipmentPaging({ type: this.navType }) |
| | | }, |
| | | |
| | | // 设备分页处理 |
| | | handleCurrentChange (currentPage) { |
| | | handleCurrentChange(currentPage) { |
| | | this.equimentPage.currentPage = currentPage |
| | | |
| | | this.getEquipmentPaging({ type: this.navType }) |
| | | }, |
| | | |
| | | // 获取设备分页数据 |
| | | getEquipmentPaging (params) { |
| | | setTimeout(() => { |
| | | this.equimentLoading = false |
| | | }, 1000) |
| | | getEquipmentPaging(params) { |
| | | this.equimentTableData = [] |
| | | this.equimentLoading = true |
| | | this.emptyText = "" |
| | | getEquipmentPaging({ page: this.equimentPage.currentPage, count: this.equimentPage.pageSize, ...params, query: this.searchValue, dwbh: this.userInfo.dept_id }).then(res => { |
| | | this.equimentTableData = [] |
| | | this.equimentPage.count = 0 |
| | | |
| | | var total = res.data.data.total |
| | | console.log(total, 6666) |
| | | if (total == 0) { |
| | | if (this.navType == 0) { |
| | | this.emptyText = "暂无警车数据" |
| | | } |
| | | if (this.navType == 1) { |
| | | this.emptyText = "暂无摄像头数据" |
| | | } |
| | | if (this.navType == 2) { |
| | | this.emptyText = "暂无手台数据" |
| | | } |
| | | if (this.navType == 3) { |
| | | this.emptyText = "暂无执法记录仪数据" |
| | | } |
| | | } |
| | | if (res.data.data.list.length > 0) { |
| | | this.equimentTableData = res.data.data.list.map(item => { |
| | | let newName = '' |
| | |
| | | incident: this.siteClick |
| | | }) |
| | | } else if (this.navType == 2) { |
| | | |
| | | this.$EventBus.$emit('layerPointAdd', { |
| | | layerName: 'policeMonitoringLayers', |
| | | type: 'billboard', |
| | |
| | | } |
| | | }) |
| | | |
| | | |
| | | this.equimentPage.count = res.data.data.pages |
| | | this.equimentLoading = false |
| | | } else { |
| | | this.equimentTableData = [] |
| | | |
| | | this.equimentPage.total = 0 |
| | | this.equimentLoading = false |
| | | } |
| | | |
| | | }) |
| | | }, |
| | | |
| | | // 类别切换 |
| | | navClick (type) { |
| | | navClick(type) { |
| | | if (type && type == this.navType) return |
| | | this.detailFlag = false |
| | | |
| | |
| | | }, |
| | | |
| | | // 表格行点击查看定位 |
| | | rowClick (row) { |
| | | rowClick(row) { |
| | | if (row.lng == 0 || row.lat == 0) { |
| | | this.$message.error('暂无位置信息!') |
| | | |
| | |
| | | }, |
| | | |
| | | // 表格行点击查看轨迹 |
| | | equipmentTrack (row) { |
| | | equipmentTrack(row) { |
| | | this.detailFlag = true |
| | | |
| | | this.currentSelectEquipment = row |
| | | }, |
| | | |
| | | async play (row) { |
| | | async play(row) { |
| | | this.videoPlayShow = true |
| | | |
| | | if (this.flvPlayer != null) { |
| | |
| | | } |
| | | }, |
| | | |
| | | async getDevices (channelId) { |
| | | async getDevices(channelId) { |
| | | let flvAddress = '' |
| | | await getDevices(channelId).then(res => { |
| | | if ('data' in res.data) { |
| | |
| | | return flvAddress |
| | | }, |
| | | |
| | | siteClick (e) { |
| | | siteClick(e) { |
| | | this.play(e.overlay.attrParams) |
| | | }, |
| | | |
| | | dialogBeforeClose () { |
| | | dialogBeforeClose() { |
| | | this.$refs.videoElement.pause() |
| | | this.dialogVisible = false |
| | | }, |
| | | |
| | | // 轨迹返回 |
| | | goBack () { |
| | | goBack() { |
| | | this.detailFlag = !this.detailFlag |
| | | this.trackTime = [] |
| | | |
| | |
| | | }, |
| | | |
| | | // 查看轨迹 |
| | | async lookTrack () { |
| | | async lookTrack() { |
| | | global.viewer.scene.globe.depthTestAgainstTerrain = false |
| | | |
| | | if (this.trackTime.length == 0) { |
| | |
| | | }, |
| | | |
| | | // 处理时间补零操作 |
| | | disposeTime (s) { |
| | | disposeTime(s) { |
| | | return s < 10 ? '0' + s : s |
| | | }, |
| | | |
| | | setTableHeight () { |
| | | setTableHeight() { |
| | | this.currentTableHeight = this.$refs.tableBox.offsetHeight - this.$refs.tablePagination.offsetHeight |
| | | }, |
| | | |
| | | // 大小重置 |
| | | boxResize (val) { |
| | | boxResize(val) { |
| | | this.boxShow = val |
| | | }, |
| | | |
| | | async getHistoricalTrack (params) { |
| | | async getHistoricalTrack(params) { |
| | | let positionArr = [] |
| | | |
| | | await getHistoricalTrack(params).then(res => { |
| | |
| | | }, |
| | | |
| | | // 大搜 |
| | | getSearchExtensively (ak, region, query) { |
| | | getSearchExtensively(ak, region, query) { |
| | | getSearchExtensively(ak, region, query).then(res => { |
| | | this.searchExtensivelyArray = res.data.result |
| | | }) |
| | | }, |
| | | |
| | | searchExtensivelyClick () { |
| | | searchExtensivelyClick() { |
| | | this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue) |
| | | this.searchExtensivelyValBoxShow = false |
| | | if (this.searchExtensivelyArray.length > 0) { |
| | |
| | | } |
| | | }, |
| | | |
| | | searchExtensivelyChange () { |
| | | searchExtensivelyChange() { |
| | | if (this.searchExtensivelyValue == '') { |
| | | this.searchExtensivelyValBoxShow = false |
| | | this.isShowClearBtn = false |
| | |
| | | }) |
| | | }, |
| | | |
| | | searchExtensivelyVlaClick (item) { |
| | | searchExtensivelyVlaClick(item) { |
| | | this.searchExtensivelyValBoxShow = false |
| | | this.searchExtensivelyValue = item.name |
| | | this.$EventBus.$emit('toPosition', { |
| | |
| | | }) |
| | | }, |
| | | |
| | | searchExtensivelyFocus () { |
| | | searchExtensivelyFocus() { |
| | | this.searchExtensivelyValBoxShow = true |
| | | this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue) |
| | | }, |
| | | |
| | | clearSearchValue () { |
| | | clearSearchValue() { |
| | | this.searchExtensivelyValue = '' |
| | | this.searchExtensivelyChange() |
| | | } |
| | | }, |
| | | |
| | | destroyed () { |
| | | destroyed() { |
| | | this.$EventBus.$emit('mapRemoveLayer', { |
| | | layerName: 'carLayers', |
| | | type: 'VectorLayer' |
| | |
| | | :deep(.el-main) { |
| | | padding: 0; |
| | | width: 100%; |
| | | overflow: hidden !important; |
| | | ; |
| | | } |
| | | } |
| | | |