<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-03-24 16:36:55
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-08-15 09:32:31
|
* @FilePath: \srs-police-affairs\src\views\activity\index.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
|
<template>
|
<div class="activity-page container">
|
<div v-show="boxShow" class="container-content">
|
<div class="title">电子沙盘</div>
|
<div class="search-box">
|
<div>
|
<div class="category">名称：</div>
|
<div class="category-value search-activity">
|
<el-input size="small" placeholder="请输入…" v-model="searchActivity" @change="activeSearch"
|
clearable></el-input>
|
</div>
|
</div>
|
</div>
|
|
<div class="result-content">
|
<div class="table-box">
|
<el-collapse v-show="activityList.length > 0" v-model="activeActivityIndex" accordion
|
@change="handleActivityChange" class="activity-list">
|
<el-collapse-item v-for="item in activityList" :name="item.id" :key="item.id">
|
<template slot="title">{{ item.name }}({{ item.plotType == 1 ? '二维' : '三维' }})</template>
|
<el-collapse class="collapse-item-box" v-model="activeActivityElementIndex" accordion>
|
<el-collapse-item title="要素资源" :name="yszy">
|
<el-collapse class="collapse-item-box-child" v-model="elementPoliceIndex" accordion>
|
<el-collapse-item title="警车" :name="jc">
|
<ul class="collapse-item-box-child-child">
|
<li v-for="carItem in chooseActivityPoliceCarList" :key="carItem.id"
|
@click="carOrPoliceItemClick(carItem.position, 'point')">{{
|
carItem.serialNumber }}</li>
|
</ul>
|
</el-collapse-item>
|
</el-collapse>
|
<el-collapse class="collapse-item-box-child" v-model="elementPoliceCarIndex" accordion>
|
<el-collapse-item title="警员" :name="jy">
|
<ul class="collapse-item-box-child-child">
|
<li v-for="policeItem in chooseActivityPoliceManList" :key="policeItem.id"
|
@click="carOrPoliceItemClick(policeItem.position, 'point')">{{
|
policeItem.policeName }}</li>
|
</ul>
|
</el-collapse-item>
|
</el-collapse>
|
<el-collapse class="collapse-item-box-child" v-model="elementCustomIndex" accordion>
|
<el-collapse-item title="自定义图片标注" :name="wxrw">
|
<ul class="collapse-item-box-child-child">
|
<li v-for="(item, index) in customList" :key="item.id"
|
@click="carOrPoliceItemClick(item.position, 'people')">
|
{{ item.remark && item.remark.trim() != '' ? item.remark :
|
`自定义图片标注${index + 1}` }}
|
</li>
|
</ul>
|
</el-collapse-item>
|
</el-collapse>
|
<el-collapse class="collapse-item-box-child" v-model="elementNormalIndex" accordion>
|
<el-collapse-item title="其他" :name="wxrw">
|
<ul class="collapse-item-box-child-child">
|
<li v-for="(item, index) in restList" :key="item.id"
|
@click="carOrPoliceItemClick(item.position, 'people')">
|
{{ item.remark && item.remark.trim() != '' ? item.remark :
|
restCurType(item, index) }}
|
</li>
|
</ul>
|
</el-collapse-item>
|
</el-collapse>
|
</el-collapse-item>
|
</el-collapse>
|
<el-collapse class="collapse-item-box" v-model="activeActivityArrowIndex" accordion>
|
<el-collapse-item title="作战标绘" :name="zzbh">
|
<el-collapse class="collapse-item-box-child" v-model="attackArrowIndex" accordion
|
v-show="item.plotType == 1">
|
<el-collapse-item title="进攻箭头" :name="jgjt">
|
<ul class="collapse-item-box-child-child">
|
<li v-for="(attackItem, index) in attackArrowList" :key="attackItem.id"
|
@click="carOrPoliceItemClick(attackItem.position, 'arrow')">
|
{{ attackItem.remark && attackItem.remark.trim() != '' ?
|
attackItem.remark : `进攻箭头${index +
|
1}` }}
|
</li>
|
</ul>
|
</el-collapse-item>
|
</el-collapse>
|
<el-collapse class="collapse-item-box-child" v-model="doubleArrowIndex" accordion
|
v-show="item.plotType == 1">
|
<el-collapse-item title="双箭头" :name="sjt">
|
<ul class="collapse-item-box-child-child">
|
<li v-for="(doubleItem, index) in doubleArrowList" :key="doubleItem.id"
|
@click="carOrPoliceItemClick(doubleItem.position, 'arrow')">
|
{{ doubleItem.remark && doubleItem.remark.trim() != '' ?
|
doubleItem.remark : `双箭头${index
|
+ 1}` }}
|
</li>
|
</ul>
|
</el-collapse-item>
|
</el-collapse>
|
<el-collapse class="collapse-item-box-child" v-model="fineArrowIndex" accordion
|
v-show="item.plotType == 1">
|
<el-collapse-item title="直箭头" :name="zjt">
|
<ul class="collapse-item-box-child-child">
|
<li v-for="(fineItem, index) in fineArrowList" :key="fineItem.id"
|
@click="carOrPoliceItemClick(fineItem.position, 'arrow')">
|
{{ fineItem.remark && fineItem.remark.trim() != '' ? fineItem.remark :
|
`直箭头${index +
|
1}` }}
|
</li>
|
</ul>
|
</el-collapse-item>
|
</el-collapse>
|
<el-collapse class="collapse-item-box-child" v-model="tailedAttackArrowIndex" accordion
|
v-show="item.plotType == 1">
|
<el-collapse-item title="燕尾箭头" :name="ywjt">
|
<ul class="collapse-item-box-child-child">
|
<li v-for="(tailedItem, index) in tailedAttackArrowList"
|
:key="tailedItem.id"
|
@click="carOrPoliceItemClick(tailedItem.position, 'arrow')">
|
{{ tailedItem.remark && tailedItem.remark.trim() != '' ?
|
tailedItem.remark : `燕尾箭头${index
|
+ 1}` }}
|
</li>
|
</ul>
|
</el-collapse-item>
|
</el-collapse>
|
<el-collapse class="collapse-item-box-child" v-model="polygonArrowIndex" accordion>
|
<el-collapse-item title="多边形" :name="dbx">
|
<ul class="collapse-item-box-child-child">
|
<li v-for="(polygonItem, index) in polygonList" :key="polygonItem.id"
|
@click="carOrPoliceItemClick(polygonItem.position, 'polygon')">
|
{{ polygonItem.remark && polygonItem.remark.trim() != '' ?
|
polygonItem.remark :
|
`多边形${index + 1}` }}
|
</li>
|
</ul>
|
</el-collapse-item>
|
</el-collapse>
|
<el-collapse class="collapse-item-box-child" v-model="borkenlineIndex" accordion>
|
<el-collapse-item title="折线" :name="dbx">
|
<ul class="collapse-item-box-child-child">
|
<li v-for="(polygonItem, index) in borkenList" :key="polygonItem.id"
|
@click="carOrPoliceItemClick(polygonItem.position, 'polygon')">
|
{{ polygonItem.remark && polygonItem.remark.trim() != '' ?
|
polygonItem.remark : `折线${index
|
+ 1}` }}
|
</li>
|
</ul>
|
</el-collapse-item>
|
</el-collapse>
|
</el-collapse-item>
|
</el-collapse>
|
<el-collapse class="collapse-item-box" v-model="activeActivityLineIndex" accordion>
|
<el-collapse-item title="巡逻路线" :name="xllx">
|
<ul class="collapse-item-box-child-child">
|
<li v-for="(lineItem, index) in chooseActivityLineList" :key="lineItem.id"
|
@click="carOrPoliceItemClick(lineItem.position, 'line')">
|
{{ lineItem.remark && lineItem.remark.trim() != '' ? lineItem.remark :
|
`路线${index + 1}` }}
|
</li>
|
</ul>
|
</el-collapse-item>
|
</el-collapse>
|
</el-collapse-item>
|
</el-collapse>
|
|
<div v-show="activityList == 0" class="no-data">暂无数据</div>
|
</div>
|
<div class="pages all-pagination-sty">
|
<el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
|
:current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
|
</div>
|
</div>
|
</div>
|
|
<div class="second-container" :class="{ 'spread': boxShow, 'take-back': !boxShow }">
|
<el-tree :data="treeData" show-checkbox node-key="id" @check="treeCheckClick"
|
@check-change="treeCheckChange"></el-tree>
|
</div>
|
|
<map-search-box></map-search-box>
|
|
<public-index ref="PublicIndexPage" :activityDeptId="activityDeptId"></public-index>
|
</div>
|
</template>
|
|
<script>
|
import { getSecurityList, getPoliceList, getSearchInfo } from '@/api/activity/index.js'
|
import { getEquipmentAll } from '@/api/home/index.js'
|
|
import publicIndex from './components/publicIndex.vue'
|
import { initMapPosition } from '@/utils/mapPositionInit'
|
import { computerCapacity } from "@/utils/turfPolygon.js"
|
import { getPoliceStationTree } from '@/api/home/'
|
|
let regionAllData = []
|
let loading = null
|
|
let cameraList = []
|
let carList = []
|
let carEquipmentList = []
|
let talkBackEquipmentPublicList = []
|
let talkBackEquipmentList = []
|
let policeCarmeraList = []
|
let curLinePolygonPosition = ''
|
let curLinePosition = ''
|
let realPoliceTimer = {}
|
|
import {
|
getSecurityPlotList,
|
getSecurityPoliceList,
|
getSecurityCarList
|
} from '@/api/activity/index.js'
|
|
export default {
|
inject: ['userInfo'],
|
|
data () {
|
return {
|
activeActivityIndex: '',
|
elementPoliceCarIndex: '',
|
elementPoliceIndex: '',
|
elementNormalIndex: '',
|
elementProtectedIndex: '',
|
elementDangerousIndex: '',
|
elementCustomIndex: '',
|
attackArrowIndex: '',
|
doubleArrowIndex: '',
|
tailedAttackArrowIndex: '',
|
fineArrowIndex: '',
|
polygonArrowIndex: '',
|
activeActivityPoliceManIndex: '',
|
activeActivityElementIndex: '',
|
activeActivityArrowIndex: '',
|
activeActivityLineIndex: '',
|
chooseActivityPoliceManList: [],
|
chooseActivityPoliceCarList: [],
|
chooseActivityLineList: [],
|
attackArrowList: [],
|
doubleArrowList: [],
|
tailedAttackArrowList: [],
|
fineArrowList: [],
|
polygonList: [],
|
borkenlineIndex: '',
|
borkenList: [],
|
normalPeopleList: [],
|
protectedPeopleList: [],
|
dangerousPeopleList: [],
|
customList: [],
|
boxShow: true,
|
searchActivity: '',
|
currentPage: 1,
|
pagesize: 4,
|
pagesCount: 1,
|
activityList: [],
|
policemanOption: [],
|
activityType: '',
|
treeData: [{
|
id: 1,
|
label: '数据地图',
|
children: [{
|
id: 2,
|
label: '实时警力',
|
children: [{
|
id: 7,
|
label: '警车',
|
}, {
|
id: 8,
|
label: '手台',
|
children: [
|
{
|
id: 10,
|
label: '公网',
|
},
|
{
|
id: 11,
|
label: '专网',
|
}
|
]
|
}, {
|
id: 9,
|
label: '执法记录仪',
|
}]
|
}, {
|
id: 3,
|
label: '视频监控'
|
},
|
// {
|
// id: 5,
|
// label: '重点单位',
|
// children: [{
|
// id: 13,
|
// label: '大中型商超',
|
// lng: 116.023293,
|
// lat: 28.680986,
|
// alt: 100,
|
// },
|
// {
|
// id: 14,
|
// label: '幼儿园',
|
// lng: 116.0275001,
|
// lat: 28.679361,
|
// alt: 100,
|
// },
|
// {
|
// id: 15,
|
// label: '政府机关',
|
// lng: 116.024398,
|
// lat: 28.678066,
|
// alt: 100,
|
// },
|
// {
|
// id: 16,
|
// label: '机场',
|
// lng: 116.0268529,
|
// lat: 28.6829572,
|
// alt: 100,
|
// },
|
// {
|
// id: 17,
|
// label: '银行',
|
// lng: 116.025595,
|
// lat: 28.681225,
|
// alt: 100,
|
// }]
|
// },
|
// {
|
// id: 6,
|
// label: '特殊场所',
|
// children: [{
|
// id: 18,
|
// label: '印刷店',
|
// lng: 116.020370,
|
// lat: 28.680075,
|
// alt: 100,
|
// },
|
// {
|
// id: 19,
|
// label: '废旧金属收购',
|
// lng: 116.030054,
|
// lat: 28.683692,
|
// alt: 100,
|
// },
|
// {
|
// id: 20,
|
// label: '开锁店',
|
// lng: 116.022703,
|
// lat: 28.679435,
|
// alt: 100,
|
// },
|
// {
|
// id: 21,
|
// label: '酒店',
|
// lng: 115.028703,
|
// lat: 28.684435,
|
// alt: 100,
|
// }]
|
// }
|
]
|
}],
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
|
policeChooseVisible: false,
|
policeChooseCarVisible: false,
|
showingSecurityId: '',
|
policeIconIsCreated: false,
|
|
//当前登录用户的数据
|
userInfo: {},
|
|
chooseCarColor: '#1CA085',
|
choosePoliceColor: '#1CA085',
|
chooseLineData: {},
|
plotId: '',
|
|
isNeedName: false,
|
plotSaveType: 1,
|
arrowPositionSre: '',
|
|
addLinePosition: '',
|
|
plotPointPositionStr: '',
|
pointAreaWidth: 100,
|
dataTreeCheckedNodes: [],
|
|
currentTreeItem: '',
|
activityDeptId: ''
|
}
|
},
|
|
components: { publicIndex },
|
|
computed: {
|
restList () {
|
return [...this.normalPeopleList, ...this.protectedPeopleList, ...this.dangerousPeopleList]
|
},
|
|
restCurType () {
|
return (item, index) => {
|
if (item.type == 7) {
|
return `普通群众${index + 1}`
|
} else if (item.type == 8) {
|
return `保护对象${index + 1}`
|
} else if (item.type == 9) {
|
return `危险人物${index + 1}`
|
}
|
}
|
}
|
},
|
|
created () {
|
this.$nextTick(() => {
|
initMapPosition()
|
})
|
|
let userInfo = sessionStorage.getItem("userInfo")
|
if (userInfo != null) {
|
// 将JSON格式的对象解析为js对象
|
this.userInfo = JSON.parse(userInfo)
|
}
|
|
this.getPoliceList()
|
|
// 获取面板列表数据
|
this.getSecurityList(this.currentPage, this.pagesize)
|
|
//摄像头
|
this.getEquipmentAll({ type: 1 }, '')
|
//警车
|
this.getEquipmentAll({ type: 0 }, '')
|
//手台-公网
|
this.getEquipmentAll({ type: "2-1" }, '')
|
//手台-专网
|
this.getEquipmentAll({ type: "2-2" }, '')
|
//执法记录仪
|
this.getEquipmentAll({ type: 3 }, '')
|
|
this.$EventBus.$on('activeDeletePolygon', () => {
|
this.activeDeletePolygon()
|
})
|
|
this.$EventBus.$on('activeDeleteLineOrPoint', (type) => {
|
this.activeDeleteLineOrPoint(type)
|
})
|
|
getPoliceStationTree(1).then(res => {
|
regionAllData = res.data.data
|
})
|
},
|
|
mounted () {
|
this.$parent.$parent.resize('400px', true)
|
},
|
|
updated () {
|
},
|
|
methods: {
|
activeDeletePolygon () {
|
const securityId = this.showingSecurityId
|
getSecurityPlotList(securityId).then(res => {
|
// 要素资源
|
this.normalPeopleList = res.data.data.filter(item => item.type == 6)
|
this.protectedPeopleList = res.data.data.filter(item => item.type == 7)
|
this.dangerousPeopleList = res.data.data.filter(item => item.type == 8)
|
this.customList = res.data.data.filter(item => item.type == 11)
|
|
// 作战标绘
|
this.attackArrowList = res.data.data.filter(item => item.type == 1)
|
this.doubleArrowList = res.data.data.filter(item => item.type == 2)
|
this.tailedAttackArrowList = res.data.data.filter(item => item.type == 3)
|
this.fineArrowList = res.data.data.filter(item => item.type == 4)
|
this.polygonList = res.data.data.filter(item => item.type == 5)
|
this.borkenList = res.data.data.filter(item => item.type == 10)
|
|
this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
|
})
|
},
|
|
activeDeleteLineOrPoint (type) {
|
const securityId = this.showingSecurityId
|
if (type == 'policeman') {
|
getSecurityPoliceList(securityId).then(res => {
|
this.chooseActivityPoliceManList = res.data.data.filter(item => item.type == 3)
|
|
this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
|
})
|
} else {
|
getSecurityCarList(securityId).then(res => {
|
this.chooseActivityPoliceCarList = res.data.data.filter(item => item.type == 3)
|
this.chooseActivityLineList = res.data.data.filter(item => item.type == 1)
|
|
this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
|
})
|
}
|
},
|
|
// 展开活动列表面板
|
handleActivityChange (val) {
|
if (this.currentTreeItem == val) return
|
if (!val) return
|
let unfoldingItem = this.activityList.find((item) => {
|
if (item.id === val) {
|
return item
|
}
|
})
|
|
this.currentTreeItem = val
|
this.activityListClick(unfoldingItem, val)
|
},
|
|
// 获取列表
|
getSecurityList (current, size, name) {
|
this.loading()
|
var deptId = ""
|
if (this.userInfo.dept_id != '1123598813738675201') {
|
deptId = this.userInfo.dept_id
|
}
|
|
this.$EventBus.$emit('mapClearLayer', {
|
layerName: 'activityLayers',
|
type: 'VectorLayer'
|
})
|
|
this.$nextTick(() => {
|
this.$refs.PublicIndexPage.closeActivityDetails()
|
})
|
|
this.showingSecurityId = ''
|
|
getSecurityList({ current, size, name, deptId }).then(res => {
|
this.activityList = res.data.data.records.map(item => {
|
item.startTime = item.startTime.substring(0, 16)
|
item.endTime = item.endTime.substring(0, 16)
|
|
return item
|
})
|
|
this.pagesCount = res.data.data.pages
|
|
this.activityList.forEach(item => {
|
let positionObj = this.convertBillboardPositionDate(item, 'activity')
|
|
this.$EventBus.$emit('layerPointAdd', {
|
layerName: 'activityLayers',
|
type: "billboard",
|
params: positionObj,
|
incident: this.houseSiteClick
|
})
|
})
|
|
setTimeout(() => {
|
loading.close()
|
}, 1500)
|
})
|
},
|
|
/**
|
* @description: 点击列表
|
* @param {*} item
|
* @param {*} index
|
* @return {*}
|
*/
|
activityListClick (item, index) {
|
item.plotType == 1 && this.$EventBus.$emit('closeMxTileset')
|
item.plotType == 3 && this.$EventBus.$emit('highOrLightChange', 'light', 'default')
|
|
// 当前选中的ID
|
this.showingSecurityId = item.id
|
|
this.$refs.PublicIndexPage.reloadAll({ id: item.id, deptId: item.deptId, item })
|
|
this.activityDeptId = item.deptId
|
|
// 定位至活动区域
|
let positionObj = this.convertBillboardPositionDate(item, 'activity')
|
this.$EventBus.$emit('toPosition', {
|
siteJd: positionObj.lng,
|
siteWd: positionObj.lat,
|
siteGd: 1500
|
})
|
|
// 遍历实时警力
|
this.eachDataTreeCheckedNodes(this.dataTreeCheckedNodes)
|
},
|
|
// 点击警车列表定位
|
carOrPoliceItemClick (position, type) {
|
let lng = ''
|
let lat = ''
|
if (type == 'point') {
|
let positionStr = position.slice(6, position.length - 1)
|
lng = Number(positionStr.split(" ")[0])
|
lat = Number(positionStr.split(" ")[1])
|
} else if (type == 'people') {
|
let positionStr = position.slice(11, position.length - 1)
|
lng = Number(positionStr.split(",")[0].split(' ')[0])
|
lat = Number(positionStr.split(",")[0].split(' ')[1])
|
} else if (type == 'polygon' || type == 'line') {
|
let itPositionStr = position.slice(11, position.length - 1)
|
let positionArr = itPositionStr.split(',')
|
positionArr = positionArr.map(item => {
|
return {
|
lng: Number(item.split(' ')[0]),
|
lat: Number(item.split(' ')[1])
|
}
|
})
|
|
computerCapacity(positionArr, '')
|
|
return
|
} else if (type == 'arrow') {
|
let positionStr = position.slice(11, position.length - 1)
|
lng = Number(positionStr.split(",")[0].split(' ')[0])
|
lat = Number(positionStr.split(",")[0].split(' ')[1])
|
}
|
this.$EventBus.$emit('toPosition', {
|
siteJd: lng,
|
siteWd: lat,
|
siteGd: 1500
|
})
|
},
|
|
// 分页页码变化事件
|
handleCurrentChange (currentPage) {
|
this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
|
this.currentPage = currentPage
|
this.currentTreeItem = ''
|
this.activeActivityIndex = ''
|
this.getSecurityList(this.currentPage, this.pagesize)
|
},
|
|
loading () {
|
loading = this.$loading({
|
lock: true,
|
text: '拼命加载中',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.5)'
|
})
|
},
|
|
// 生成热力图坐标
|
generatePosition (num) {
|
let list = []
|
for (let i = 0; i < num; i++) {
|
let lng = 115.974 + Math.random() * 0.5
|
let lat = 28.628 + Math.random() * 0.5
|
list.push(new global.DC.Position(lng, lat))
|
}
|
return list
|
},
|
|
// 获取警员列表，生成下拉数据
|
getPoliceList () {
|
getPoliceList().then(res => {
|
res.data.data.forEach(item => {
|
this.policemanOption.push({ value: `${item.id}`, label: `${item.name}` })
|
})
|
})
|
},
|
|
// 树形控件选中事件
|
treeCheckClick (e1, e2) {
|
// 没有选中就不展示实时图标
|
const that = this
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activeHeatLayer',
|
type: 'HeatLayer'
|
})
|
|
if (e2.checkedNodes.some(item => item.$treeNodeId == e1.$treeNodeId)) {
|
if (this.userInfo.dept_id == '1123598813738675201') {
|
|
computerCapacity(regionAllData, 'all')
|
} else {
|
let arr = regionAllData.find(item => item.id == this.userInfo.dept_id)
|
|
// 获取图标中心跳转
|
computerCapacity([arr], 'single')
|
}
|
}
|
|
|
if (e1.label == '热力图' && e2.checkedKeys.some(item => {
|
return item == 777
|
})) {
|
this.$EventBus.$emit('layerPointAdd', {
|
layerName: 'activeHeatLayer',
|
type: "HeatPoint",
|
layerType: 'HeatLayer',
|
params: {
|
positions: that.generatePosition(2000)
|
}
|
})
|
} else {
|
e2.checkedNodes.forEach(item => {
|
if (item.id != 1 && item.id != 2 && item.id != 3 && item.id != 7 && item.id != 8 && item.id != 9 && item.lng) {
|
if (item.label == '大中型商超') {
|
this.getSearchInfo(this.userInfo.dept_id, '大中型商超', 'supermarket')
|
} if (item.label == '幼儿园') {
|
this.getSearchInfo(this.userInfo.dept_id, '幼儿园', 'kindergarten')
|
} else if (item.label == '政府机关') {
|
this.getSearchInfo(this.userInfo.dept_id, '政府机关', 'Government')
|
} else if (item.label == '机场') {
|
this.getSearchInfo(this.userInfo.dept_id, '机场', 'airport')
|
} else if (item.label == '银行') {
|
this.getSearchInfo(this.userInfo.dept_id, '银行', 'bank')
|
} else if (item.label == '印刷店') {
|
this.getSearchInfo(this.userInfo.dept_id, '印刷店', 'printing')
|
} else if (item.label == '废旧金属收购') {
|
this.getSearchInfo(this.userInfo.dept_id, '废旧金属收购', 'metal')
|
} else if (item.label == '开锁店') {
|
this.getSearchInfo(this.userInfo.dept_id, '开锁店', 'lockpick-shop')
|
} else if (item.label == '酒店') {
|
this.getSearchInfo(this.userInfo.dept_id, '酒店', 'hotel')
|
}
|
}
|
})
|
}
|
this.dataTreeCheckedNodes = e2.checkedNodes
|
this.eachDataTreeCheckedNodes(this.dataTreeCheckedNodes)
|
},
|
|
//树形控件选中状态改变事件
|
treeCheckChange (e1, e2) {
|
if (e2 && !e1.children) {
|
let iconArr = []
|
if (e1.label == '视频监控') {
|
iconArr = cameraList
|
} else if (e1.label == '警车') {
|
iconArr = carList
|
} else if (e1.label == '公网') {
|
iconArr = talkBackEquipmentPublicList
|
} else if (e1.label == '专网') {
|
iconArr = talkBackEquipmentList
|
} else if (e1.label == '执法记录仪') {
|
iconArr = policeCarmeraList
|
}
|
|
}
|
},
|
|
// 遍历树数据实时图标
|
eachDataTreeCheckedNodes (data) {
|
// 清除定时器
|
if (realPoliceTimer != {}) {
|
for (let item in realPoliceTimer) {
|
clearInterval(realPoliceTimer[item])
|
}
|
}
|
if (data != []) {
|
data.some(item => {
|
return item.label == '视频监控'
|
}) ? this.iconImageShowOrHidden('/img/icon/video.png', '/img/icon/video-off.png', cameraList, 'activityCameraLayers') : this.clearLayerIconForMap('activityCameraLayers')
|
|
data.some(item => {
|
return item.label == '警车'
|
}) ? this.iconImageShowOrHidden('/img/icon/real-car.png', '/img/icon/real-car-ok.png', carList, 'activityCarLayers') : this.clearLayerIconForMap('activityCarLayers')
|
|
data.some(item => {
|
return item.label == '公网'
|
}) ? this.iconImageShowOrHidden('/img/icon/real-public-recorder.png', '/img/icon/real-public-recorder-ok.png', talkBackEquipmentPublicList, 'activityTalkBackEquipmentPublicLayers') : this.clearLayerIconForMap('activityTalkBackEquipmentPublicLayers')
|
|
data.some(item => {
|
return item.label == '专网'
|
}) ? this.iconImageShowOrHidden('/img/icon/real-recorder.png', '/img/icon/real-recorder-ok.png', talkBackEquipmentList, 'activityTalkBackEquipmentLayers') : this.clearLayerIconForMap('activityTalkBackEquipmentLayers')
|
|
data.some(item => {
|
return item.label == '执法记录仪'
|
}) ? this.iconImageShowOrHidden('/img/icon/real-phone.png', '/img/icon/real-phone-ok.png', policeCarmeraList, 'activityPoliceCameraLayers') : this.clearLayerIconForMap('activityPoliceCameraLayers')
|
}
|
},
|
|
/**
|
* 清除当前图层数据
|
* @param {*} layerName 图层名称
|
*/
|
clearLayerIconForMap (layerName) {
|
realPoliceTimer[layerName] && clearInterval(realPoliceTimer[layerName])
|
this.$EventBus.$emit('mapClearLayer', {
|
layerName: layerName,
|
type: 'VectorLayer'
|
})
|
},
|
|
/**
|
* 实时图标显示隐藏
|
* @param {*} img 图标地址
|
* @param {*} data 传入的数据（摄像头，手台等集合数据）
|
* @param {*} layerName 选中图层名称
|
*/
|
iconImageShowOrHidden (img, imgOk, data, layerName, isChooseSecurity) {
|
if (this.showingSecurityId && !isChooseSecurity) {
|
// 实时图标刷新时间间隔
|
let refreshTime = 60000
|
this.searchRealResources(layerName)
|
realPoliceTimer[layerName] = setInterval(() => this.searchRealResources(layerName), refreshTime)
|
} else {
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: layerName,
|
type: 'VectorLayer'
|
})
|
if (data.length > 0) {
|
data.forEach(item => {
|
if (item.longitude && item.latitude) {
|
let url = item.clockStatus == 0 ? img : imgOk
|
|
if (img == '/img/icon/video.png') {
|
url = item.status == 1 ? '/img/icon/video.png' : '/img/icon/video-off.png'
|
}
|
|
this.$EventBus.$emit('layerPointAdd', {
|
layerName: layerName,
|
type: "billboard",
|
layerType: 'ClusterLayer',
|
params: {
|
...item,
|
lng: item.longitude,
|
lat: item.latitude,
|
alt: 1,
|
url
|
},
|
})
|
}
|
})
|
}
|
}
|
},
|
|
// 定时查找实时警力资源
|
searchRealResources (layerName) {
|
let type = ''
|
if (layerName == 'activityCarLayers') {
|
type = 0
|
} else if (layerName == 'activityTalkBackEquipmentPublicLayers') {
|
type = '2-1'
|
} else if (layerName == 'activityTalkBackEquipmentLayers') {
|
type = '2-2'
|
} else if (layerName == 'activityPoliceCameraLayers') {
|
type = 3
|
}
|
this.getEquipmentAll({ type: type, query: this.showingSecurityId }, layerName)
|
},
|
|
// 大小重置
|
boxResize (val) {
|
this.boxShow = val
|
if (!val) {
|
let videoList = document.querySelectorAll('.item')
|
videoList.forEach(item => {
|
item.classList.add('item-new-width')
|
})
|
document.querySelector('.video1').classList.add('video1-new-left')
|
document.querySelector('.video2').classList.add('video2-new-left')
|
document.querySelector('.video3').classList.add('video3-new-left')
|
document.querySelector('.video4').classList.add('video4-new-left')
|
} else {
|
let videoList = document.querySelectorAll('.item')
|
videoList.forEach(item => {
|
item.classList.remove('item-new-width')
|
})
|
document.querySelector('.video1').classList.remove('video1-new-left')
|
document.querySelector('.video2').classList.remove('video2-new-left')
|
document.querySelector('.video3').classList.remove('video3-new-left')
|
document.querySelector('.video4').classList.remove('video4-new-left')
|
}
|
},
|
|
// 搜索数据地图对应场所
|
getSearchInfo (deptId, search, iconType) {
|
getSearchInfo(deptId, search).then(res => {
|
res.data.data.forEach(item => {
|
let itemData = JSON.parse(item)
|
itemData.result.forEach(item => {
|
this.$EventBus.$emit('layerPointAdd', {
|
layerName: 'activityCameraLayers',
|
type: "billboard",
|
params: {
|
...item,
|
lng: item.location.lng,
|
lat: item.location.lat,
|
alt: 1,
|
url: `/img/icon/${iconType}.png`
|
},
|
})
|
})
|
})
|
})
|
},
|
|
// 获取面的中心点
|
getCenter (str, type) {
|
let positionNewArr = []
|
|
if (type == 'line') {
|
// 前端保存的面坐标格式
|
let positionArr = str.slice(0, str.length - 1).split(';')
|
positionArr.forEach(item => {
|
positionNewArr.push([Number(item.split(',')[0]), Number(item.split(',')[1])])
|
})
|
} else if (type == 'polygon') {
|
// 后台获取的面坐标格式
|
let itPositionStr = str.slice(11, str.length - 1)
|
let positionArr = itPositionStr.split(',')
|
positionArr.forEach(item => {
|
positionNewArr.push([Number(item.split(' ')[0]), Number(item.split(' ')[1])])
|
})
|
positionNewArr.push([Number(positionArr[0].split(' ')[0]), Number(positionArr[0].split(' ')[1])])
|
}
|
|
let polygon = this.$turf.polygon([positionNewArr])
|
let center = this.$turf.centroid(polygon)
|
|
return [center.geometry.coordinates[0], center.geometry.coordinates[1]]
|
},
|
|
// 获取设备列表
|
getEquipmentAll (params, layerName) {
|
getEquipmentAll({ ...params, deptId: this.userInfo.dept_id }).then(res => {
|
if (params.type == 0) {
|
//警车
|
carList = res.data.data
|
if (layerName) {
|
this.iconImageShowOrHidden('/img/icon/real-car.png', '/img/icon/real-car-ok.png', carList, layerName, true)
|
}
|
} else if (params.type == 1) {
|
//摄像头
|
cameraList = res.data.data
|
} else if (params.type == '2-1') {
|
//公网-手台
|
talkBackEquipmentPublicList = res.data.data
|
if (layerName) {
|
this.iconImageShowOrHidden('/img/icon/real-public-recorder.png', '/img/icon/real-public-recorder-ok.png', talkBackEquipmentPublicList, layerName, true)
|
}
|
} else if (params.type == '2-2') {
|
//专网-手台
|
talkBackEquipmentList = res.data.data
|
if (layerName) {
|
this.iconImageShowOrHidden('/img/icon/real-phone.png', '/img/icon/real-phone-ok.png', talkBackEquipmentList, layerName, true)
|
}
|
} else {
|
//执法记录仪
|
policeCarmeraList = res.data.data
|
if (layerName) {
|
this.iconImageShowOrHidden('/img/icon/real-recorder.png', '/img/icon/real-recorder-ok.png', policeCarmeraList, layerName, true)
|
}
|
}
|
})
|
},
|
|
// 转换 点 坐标数据
|
convertBillboardPositionDate (data, iconName) {
|
let positionStr = data.position
|
positionStr = data.position.slice(6, positionStr.length - 1)
|
let positionArr = positionStr.split(" ")
|
let positionObj = {}
|
if (iconName == 'activity') {
|
positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0, url: '/img/icon/activity.png' }
|
} else if (iconName == 'policeman') {
|
positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.05, url: '/img/icon/man3.png', data: data }
|
} else if (iconName == 'policecar') {
|
positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.05, url: '/img/icon/car3.png', data: data }
|
}
|
return positionObj
|
},
|
|
// 转换 线面 坐标数据
|
convertPolylineOrPolygonPositionDate (data, type) {
|
let positionStr = data.slice(11, data.length - 1)
|
let positionArr = positionStr.split(',')
|
let positionNewArr = ''
|
positionArr.forEach(item => {
|
if (type == 1) {
|
positionNewArr += item.split(' ')[0] + ',' + item.split(' ')[1] + ';'
|
} else {
|
positionNewArr += item.split(' ')[0] + ',' + item.split(' ')[1] + ',' + 0 + ';'
|
}
|
})
|
return positionNewArr
|
},
|
|
cleartAllTimer () {
|
if (realPoliceTimer != {}) {
|
for (let item in realPoliceTimer) {
|
clearInterval(realPoliceTimer[item])
|
}
|
}
|
},
|
|
activeSearch (e) {
|
this.currentPage = 1
|
this.getSecurityList(this.currentPage, this.pagesize, e)
|
}
|
},
|
|
watch: {
|
policeChooseVisible (val) {
|
if (val) {
|
this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
|
}
|
},
|
|
policeChooseCarVisible (val) {
|
if (val) {
|
this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
|
}
|
}
|
},
|
|
beforeDestroy () {
|
|
// 清除定时器
|
this.cleartAllTimer()
|
},
|
|
destroyed () {
|
loading && loading.close()
|
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activityLayers',
|
type: 'VectorLayer'
|
})
|
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activeHeatLayer',
|
type: 'HeatLayer'
|
})
|
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activityCameraLayers',
|
type: 'VectorLayer'
|
})
|
|
// 警车
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activityCarLayers',
|
type: 'VectorLayer'
|
})
|
|
// 手台-公网
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activityTalkBackEquipmentPublicLayers',
|
type: 'VectorLayer'
|
})
|
|
// 手台-专网
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activityTalkBackEquipmentLayers',
|
type: 'VectorLayer'
|
})
|
|
// 执法记录仪
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activityPoliceCameraLayers',
|
type: 'VectorLayer'
|
})
|
|
global.viewer.scene.globe.depthTestAgainstTerrain = false
|
|
this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
|
this.$parent.$parent.resize('0px')
|
|
this.$EventBus.$off('activeDeletePolygon')
|
this.$EventBus.$off('activeDeleteLineOrPoint')
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
height: 100%;
|
width: 100%;
|
position: relative;
|
|
&-content {
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
height: 100%;
|
color: #fff;
|
background: $bg-color;
|
|
.title {
|
height: 40px;
|
line-height: 40px;
|
font-weight: 700;
|
font-size: 24px;
|
letter-spacing: 20px;
|
}
|
|
.search-box {
|
padding: 0 10px;
|
|
&>div:first-child {
|
margin-top: 0;
|
}
|
|
&>div {
|
margin-top: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.category {
|
width: 88px;
|
font-size: 16px;
|
}
|
|
.category-value {
|
flex: 1;
|
}
|
|
.search-activity {
|
position: relative;
|
|
.clear {
|
position: absolute;
|
top: 0;
|
right: 70px;
|
cursor: pointer;
|
|
img {
|
width: 12px;
|
height: 12px;
|
margin-top: 8px;
|
}
|
}
|
}
|
|
input {
|
width: 209px;
|
height: 32px;
|
font-size: 12px;
|
text-indent: 1em;
|
color: #ffffff;
|
background-color: rgba(24, 79, 202, 0.6);
|
border: 1px solid rgb(0, 92, 169);
|
border-radius: 5px 0 0 5px;
|
}
|
|
input:focus {
|
outline: none;
|
}
|
|
input::-webkit-input-placeholder {
|
color: rgba(238, 238, 238, 0.7);
|
}
|
|
button {
|
font-size: 20px;
|
font-weight: 700;
|
width: 60px;
|
height: 32px;
|
background-color: $table-body-tr-2n-color;
|
color: #fff;
|
border: 1px solid rgb(0, 92, 169);
|
cursor: pointer;
|
border-radius: 0 5px 5px 0;
|
vertical-align: top;
|
}
|
|
button:active {
|
background-color: $table-body-tr-2n-color;
|
border: 1px solid rgb(0, 92, 169);
|
color: rgb(189, 185, 185) !important;
|
}
|
}
|
}
|
|
.result-content {
|
flex: 1;
|
margin-top: 8px;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
|
.table-box {
|
flex: 1;
|
overflow-x: hidden;
|
overflow-y: auto;
|
|
.row-box {
|
margin: 10px;
|
padding: 10px;
|
cursor: pointer;
|
font-size: 14px;
|
border-radius: 8px;
|
|
.row-content {
|
&>div {
|
display: flex;
|
line-height: 28px;
|
|
.category {
|
width: 88px;
|
}
|
|
.category-value {
|
flex: 1;
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
}
|
}
|
}
|
|
&:nth-child(2n) {
|
background: $table-body-tr-2n-color;
|
}
|
|
&:nth-child(2n-1) {
|
background: $table-body-tr-n-color;
|
}
|
}
|
|
.row-box:hover {
|
background-color: rgba(29, 92, 228, 0.7) !important;
|
}
|
|
.row-box.on {
|
background-color: rgba(29, 92, 228, 0.7) !important;
|
}
|
|
:deep(.el-dialog) {
|
margin-right: 0px;
|
}
|
|
.tableClass {
|
margin: 0 auto;
|
width: 400px;
|
// height: 400px;
|
border-collapse: collapse;
|
}
|
|
.tableClass td {
|
width: 300px;
|
}
|
}
|
|
.pages {
|
height: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
|
.second-container {
|
position: absolute;
|
top: 10px;
|
display: flex;
|
flex-direction: column;
|
width: 240px;
|
background: $bg-color;
|
|
:deep(.el-tree) {
|
background: transparent;
|
}
|
|
:deep(.el-tree-node__content) {
|
background: transparent;
|
}
|
|
:deep(.el-tree-node) {
|
background: transparent;
|
color: #fff;
|
}
|
}
|
|
.second-container.spread {
|
left: 444px;
|
}
|
|
.second-container.take-back {
|
left: 10px;
|
}
|
|
.item-new-width {
|
width: 25vw;
|
}
|
}
|
|
::v-deep(.collapse-item-box) {
|
background: #85A5FF;
|
|
.collapse-item-box-child {
|
background: #597EF7;
|
}
|
|
.collapse-item-box-child-child {
|
background: #2F54EB;
|
}
|
}
|
</style>
|
