827 lines
29 KiB
Vue
827 lines
29 KiB
Vue
<template>
|
||
<div class="ucs-leaflet-map">
|
||
<div id="contain">
|
||
<div class="map-box">
|
||
<div :id="mapId" class="normal-map-content">
|
||
<tiled-map :hi-map="hiMap" :map-id="mapId" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="searchPoint">
|
||
<!-- 第一版 -->
|
||
<!-- <el-autocomplete
|
||
class="inline-input"
|
||
prefix-icon="Search"
|
||
v-model="state"
|
||
:fetch-suggestions="querySearchAsync"
|
||
placeholder="搜索地点"
|
||
:trigger-on-focus="false"
|
||
@select="handleSelect"
|
||
:teleported="false"
|
||
popper-class="my-autocomplete"
|
||
>
|
||
<template v-slot="{ item }">
|
||
<div style="margin-bottom: -10px" class="name">
|
||
{{ item.text || '' }}
|
||
</div>
|
||
<span style="font-size: 10px; color: #afbcc5">
|
||
{{ item.detail.address || '' }}
|
||
</span>
|
||
</template>
|
||
<template v-slot:append>搜索</template>
|
||
</el-autocomplete> -->
|
||
<!-- 第二版 -->
|
||
<el-select class="input-with-select" v-model="addressType" style="width: 115px" @change="address=''">
|
||
<el-option label="兴趣点" value="1" />
|
||
<el-option label="点位" value="2" />
|
||
</el-select>
|
||
<el-autocomplete
|
||
v-if="addressType==1"
|
||
v-model="address"
|
||
:fetch-suggestions="querySearch"
|
||
clearable
|
||
class="input-with-select"
|
||
placeholder="请输入关键字"
|
||
@select="
|
||
(addressItem) => {
|
||
selectedAddress(addressItem, i)
|
||
}
|
||
"
|
||
/>
|
||
<!-- <el-input
|
||
v-model="address"
|
||
placeholder="请输入关键词"
|
||
class="input-with-select"
|
||
@keyup.enter="handleEnter"
|
||
>
|
||
</el-input> -->
|
||
<el-autocomplete
|
||
v-else-if="addressType==2"
|
||
v-model="address"
|
||
placeholder="请输入关键字"
|
||
:fetch-suggestions="
|
||
(queryString, cb) => {
|
||
searchAddressByKeyWord(queryString, cb, i)
|
||
}
|
||
"
|
||
:trigger-on-focus="false"
|
||
:popper-append-to-body="false"
|
||
class="address-auto-complete-input"
|
||
@select="
|
||
(addressItem) => {
|
||
selectedAddress(addressItem, i)
|
||
}
|
||
"
|
||
/>
|
||
</div>
|
||
<svg
|
||
t="1656319660834"
|
||
class="icon"
|
||
viewBox="0 0 1024 1024"
|
||
version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
p-id="1691"
|
||
width="0.48rem"
|
||
height="0.48rem"
|
||
@click="circleMode()"
|
||
>
|
||
<path
|
||
d="M736.21333333 638.08l69.76-54.08c5.22666667-4.05333333 8-10.45333333 7.46666667-17.06666667-0.53333333-6.61333333-4.37333333-12.48-10.24-15.57333333L450.02666666 361.38666666c-6.82666667-3.62666667-15.04-2.98666667-21.12 1.70666667-6.08 4.69333333-8.85333333 12.58666667-7.04 20.05333333l95.57333334 389.54666667c1.6 6.4 6.29333333 11.62666667 12.48 13.76 6.18666667 2.13333333 13.12 1.06666667 18.34666666-2.98666667l69.86666667-54.08L769.06666666 924.37333333c3.2 4.05333333 7.78666667 6.72 12.90666667 7.36 0.85333333 0.10666667 1.6 0.10666667 2.45333333 0.10666667 4.26666667 0 8.53333333-1.38666667 11.94666667-4.05333334l87.25333333-67.52c8.53333333-6.61333333 10.02666667-18.88 3.52-27.30666666L736.21333333 638.08zM178.24 282.02666666l-31.25333334-21.01333333c-14.61333333 21.76-27.30666667 44.90666667-37.86666666 68.90666667l34.56 15.14666666c9.6-21.86666667 21.22666667-43.09333333 34.56-63.04zM549.54666666 103.89333333l3.2-37.54666667c-26.02666667-2.24-52.69333333-2.13333333-78.50666666 0.21333334l3.41333333 37.54666666c23.57333333-2.13333333 48-2.24 71.89333333-0.21333333zM120.74666666 413.22666666l-36.69333333-8.74666666c-6.08 25.38666667-9.92 51.52-11.30666667 77.76l37.65333334 2.13333333c1.38666667-24 4.8-47.89333333 10.34666666-71.14666667zM112.64 556.26666666l-37.44 4.48c3.09333333 26.02666667 8.64 51.94666667 16.32 76.90666667l36.05333333-11.09333333c-7.04-22.82666667-12.05333333-46.50666667-14.93333333-70.29333334zM919.36 327.46666666c-10.66666667-23.89333333-23.46666667-46.93333333-38.29333334-68.58666666l-31.14666666 21.22666666c13.44 19.84 25.28 40.96 34.98666666 62.82666667l34.45333334-15.46666667zM831.36 197.97333333c-18.34666667-18.77333333-38.4-35.94666667-59.62666667-51.09333333L749.86666666 177.6c19.52 13.86666667 37.86666667 29.65333333 54.61333334 46.82666666l26.88-26.45333333zM703.89333333 107.09333333c-23.68-11.2-48.53333333-20.37333333-73.81333333-27.09333333l-9.81333334 36.37333333c23.14666667 6.18666667 45.86666667 14.61333333 67.52 24.85333333l16.10666667-34.13333333zM277.76 178.98666666l-22.08-30.50666666c-21.22666667 15.36-41.17333333 32.64-59.41333334 51.52l27.09333334 26.13333333c16.74666667-17.28 35.09333333-33.06666667 54.4-47.14666667zM348.90666666 918.08c24.32 9.81333333 49.6 17.49333333 75.2 22.82666666l7.68-36.90666666c-23.46666667-4.90666667-46.61333333-11.94666667-68.8-20.90666667l-14.08 34.98666667zM503.25333333 912.42666666l-1.06666667 37.65333334c4.16 0.10666667 8.42666667 0.21333333 12.58666667 0.21333333 21.97333333 0 44.16-1.6 65.81333333-4.90666667l-5.54666666-37.22666666c-23.57333333 3.52-47.89333333 4.90666667-71.78666667 4.26666666zM944.85333333 401.81333333l-36.58666667 8.96c5.65333333 23.14666667 9.28 47.14666667 10.77333334 71.04l37.65333333-2.34666667c-1.70666667-26.13333333-5.65333333-52.26666667-11.84-77.65333333zM396.8 80.64c-25.28 6.93333333-50.02666667 16.21333333-73.6 27.62666666l16.32 33.92c21.54666667-10.34666667 44.26666667-18.88 67.30666666-25.17333333L396.8 80.64zM121.17333333 710.4c11.94666667 23.25333333 26.13333333 45.54666667 42.13333333 66.34666666l29.86666667-22.93333333c-14.61333333-18.98666667-27.52-39.46666667-38.50666667-60.69333333L121.17333333 710.4zM216.42666666 834.66666666c19.30666667 17.70666667 40.42666667 33.70666667 62.50666667 47.68l20.05333333-31.89333333c-20.26666667-12.8-39.46666667-27.41333333-57.17333333-43.62666667l-25.38666667 27.84z"
|
||
p-id="1692"
|
||
fill="#1296db"
|
||
data-spm-anchor-id="a313x.7781069.0.i0"
|
||
></path>
|
||
</svg>
|
||
<img class="icon-poylon" @click="areaMode()" src="~@/supermap/image/icon-poylon.png">
|
||
|
||
</div>
|
||
<video-play
|
||
v-if="openVideo"
|
||
:key="channelCode"
|
||
:channel-id="channelCode"
|
||
></video-play>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { ElMessage } from 'element-plus'
|
||
import { message } from 'ant-design-vue'
|
||
import { HieimpMap } from '@/supermap/map-init'
|
||
import TiledMap from './components/tiledMap'
|
||
import { createCameraDetailsPop } from '@/supermap/createMarkerPopup'
|
||
import VideoPlay from './components/VideoPlay'
|
||
import {
|
||
getCameraAll,
|
||
getCameraLabel,
|
||
getCameraAllLabel,
|
||
searchCamera,
|
||
getCameraAllOrgan,
|
||
getCameraByParentId,
|
||
selectByLabelName,
|
||
selectByChannelName,
|
||
} from '@/api/videoSurveillance'
|
||
import { getCameraByCondition,getListForPOI,CameraConditionPlaceType } from '@/api/file'
|
||
import mybus from '@/myplugins/mybus'
|
||
import * as turf from '@turf/turf';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
hiMap: new HieimpMap(), // 地图全局对象
|
||
mapId: 'map-single', // 地图容器的id
|
||
cameraAllData: [],
|
||
checkboxGroup: [],
|
||
tabList: [],
|
||
state: '',
|
||
timeout: null,
|
||
camreaTree: [],
|
||
camreaTreeIsShow: true,
|
||
camreaTreeSingle: [],
|
||
checkStatus: '2',
|
||
labelSearch: '',
|
||
timer: null,
|
||
openVideo: false,
|
||
channelCode: [],
|
||
circleModeFlag: false,
|
||
areaModeFlag: false,
|
||
addressMatchUrl: '',
|
||
address: '',
|
||
addressType:'1',
|
||
whoShow1: whoShow,
|
||
mapSearchParam: {
|
||
// 地图搜索初始化数据
|
||
parentId: '',
|
||
checkStatus: '1',
|
||
pageNum: '1',
|
||
pageSize: '20000',
|
||
gpsX: '',
|
||
gpsY: '',
|
||
radius: '',
|
||
borderPolygonList: [],
|
||
type: 0, //0是无，1画圆，2不规则
|
||
},
|
||
pointAllData:[],
|
||
restaurants:[],
|
||
}
|
||
},
|
||
components: {
|
||
TiledMap,
|
||
VideoPlay
|
||
},
|
||
created() {},
|
||
watch: {
|
||
checkStatus(newV, oldV) {
|
||
console.log(newV)
|
||
this.$refs.tree.filter(newV)
|
||
},
|
||
},
|
||
mounted() {
|
||
this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj)
|
||
this.multiScreenFun = this.hiMap.multiScreenFun(
|
||
this.hiMap.mapObj,
|
||
this.hiMapFun
|
||
)
|
||
// this.hiMap.mapObj.map.flyTo({ lat: 36.06, lng: 120.3899 }, 16)
|
||
this.addressMatchUrl = window.SITE_CONFIG.POI_URL
|
||
// 初始化地址检索服务
|
||
this.initAddressMatchService()
|
||
this.getCameraAllLabel()
|
||
// 初始化展示所有摄像头,地图上扎点
|
||
this.getCameraAllPage()
|
||
// this.getMapPoint()
|
||
// 点击左侧根据parentId查询摄像头列表
|
||
mybus.off('getCameraByParentId')
|
||
mybus.on('getCameraByParentId', (parentId) => {
|
||
this.mapSearchParam.parentId = parentId
|
||
this.mapSearchParam.type = "1"
|
||
this.mapSearchParam.pageSize = 10000
|
||
this.getCameraByParentId()
|
||
})
|
||
//表格勾选
|
||
mybus.off('selectTablePoint')
|
||
mybus.on('selectTablePoint', (pointlist) => {
|
||
console.log("mounted -> pointlist", pointlist);
|
||
for(let i=0;i<this.pointAllData.length;i++){
|
||
this.pointAllData[i].active = false
|
||
for(let j=0;j<pointlist.length;j++){
|
||
if(this.pointAllData[i].channelCode == pointlist[j].channelCode){
|
||
this.pointAllData[i].active = true
|
||
}
|
||
}
|
||
}
|
||
//this.addResourceTomap('videoMap', this.pointAllData);
|
||
})
|
||
|
||
//所有摄像头数据上图
|
||
mybus.off('cameraDataOnMap')
|
||
mybus.on('cameraDataOnMap', (data) => {
|
||
this.addResourceTomap('videoMap', data)
|
||
})
|
||
//行政区划点击查询摄像头
|
||
mybus.off('CameraConditionPlaceType')
|
||
mybus.on('CameraConditionPlaceType', (data) => {
|
||
this.queryCameraConditionPlace(data)
|
||
|
||
})
|
||
},
|
||
methods: {
|
||
//查询标签视频
|
||
queryCameraConditionPlace(data) {
|
||
let params = {
|
||
placeTypeCode: data,
|
||
pageNum: "1",
|
||
pageSize: 30000,
|
||
}
|
||
CameraConditionPlaceType(params).then((res) => {
|
||
this.addResourceTomap('videoMap', res.data.data)
|
||
})
|
||
},
|
||
// 查询
|
||
querySearch (queryString, cb) {
|
||
console.log('querySearch',queryString, cb,this.restaurants)
|
||
if(queryString){
|
||
getListForPOI({keywords:queryString}).then(res => {
|
||
if(res.data.data.rows[0]){
|
||
res.data.data.rows.map( val =>{
|
||
let arr = val.location.split(',')
|
||
val.location = {y:arr[1],x:arr[0]}
|
||
val.value = val.name
|
||
})
|
||
const results =res.data.data.rows
|
||
cb(results)
|
||
}else{
|
||
ElMessage({
|
||
showClose: true,
|
||
message: '未查询到兴趣点！',
|
||
type: 'warning',
|
||
})
|
||
}
|
||
})
|
||
}else{
|
||
cb([])
|
||
}
|
||
// const results = queryString
|
||
// ? this.restaurants.filter(createFilter(queryString))
|
||
// : this.restaurants
|
||
// call callback function to return suggestions
|
||
},
|
||
createFilter (queryString) {
|
||
return (restaurant) => {
|
||
return (
|
||
restaurant.toLowerCase().indexOf(queryString.toLowerCase()) === 0
|
||
)
|
||
}
|
||
},
|
||
// 查询
|
||
handleEnter(queryString, cb){
|
||
console.log('查询',this.address,this.addressType)
|
||
if(this.address){
|
||
getListForPOI({keywords:this.address}).then(res => {
|
||
console.log('POI=========>',res.data.data)
|
||
if(res.data.data.rows[0]){
|
||
let arr = res.data.data.rows[0].location.split(',')
|
||
this.selectedAddress({location:{y:arr[1],x:arr[0]}})
|
||
}else{
|
||
ElMessage({
|
||
showClose: true,
|
||
message: '未查询到兴趣点！',
|
||
type: 'warning',
|
||
})
|
||
}
|
||
})
|
||
}else{
|
||
ElMessage({
|
||
showClose: true,
|
||
message: '请输入兴趣点！',
|
||
type: 'warning',
|
||
})
|
||
}
|
||
},
|
||
selectedAddress(item, index) {
|
||
mybus.emit('clearChoose')
|
||
this.getCameraAllPage()
|
||
// 跳转到相应经纬度
|
||
console.log('跳转', item)
|
||
const latLng = {
|
||
lat: item.location.y,
|
||
lng: item.location.x,
|
||
}
|
||
this.hiMapFun.mapFlyTo(latLng)
|
||
},
|
||
//框选
|
||
areaSelectResource(){
|
||
// 修改控件提示
|
||
L.drawLocal.draw.handlers.polygon.tooltip.start = '单击开始绘制形状'
|
||
L.drawLocal.draw.handlers.polygon.tooltip.cont = '单击继续绘制形状'
|
||
L.drawLocal.draw.handlers.polygon.tooltip.end =
|
||
'单击继续绘制形状,双击结束绘制'
|
||
|
||
this.hiMap.mapObj.map.off('draw:created')
|
||
this.hiMap.mapObj.drawPolygon.enable()
|
||
this.hiMap.mapObj.map.once('draw:created', (e) => {
|
||
const type = e.layerType
|
||
const circleLayer = e.layer
|
||
console.log('查询图层draw:created', e)
|
||
if (type === 'polygon') {
|
||
const polygonLayer = e.layer;
|
||
this.hiMap.mapObj.featureGroup.addLayer(polygonLayer);
|
||
this.hiMap.mapObj.layerGroup.set('rectangleSelectLayer', polygonLayer);
|
||
const arr = [];
|
||
const latlngs = []; //选择的坐标组
|
||
polygonLayer._latlngs[0].map(item => {
|
||
// const bdLonLat = wgs84LL2bdLL();
|
||
arr.push(turf.point([item.lng, item.lat]));
|
||
latlngs.push([item.lat,item.lng])
|
||
});
|
||
const points = turf.featureCollection(arr);
|
||
const rect = turf.convex(points);
|
||
|
||
this.mapSearchParam.borderPolygonList = latlngs
|
||
this.mapSearchParam.type = 2
|
||
const params = {
|
||
borderPolygonList: latlngs,
|
||
type: this.mapSearchParam.type,
|
||
}
|
||
// mybus.emit('getListByMap', params);
|
||
this.getCameraByParentId('map');
|
||
console.log("areaSelectResource -> latlngs", latlngs)
|
||
}
|
||
})
|
||
},
|
||
// 圈选方法
|
||
circleSelectResource() {
|
||
L.drawLocal.draw.handlers.circle.tooltip.start = '请圈选区域'
|
||
L.drawLocal.draw.handlers.circle.radius = '半径'
|
||
L.drawLocal.draw.handlers.circle.tooltip.end = '松开绘制完成'
|
||
|
||
this.hiMap.mapObj.map.off('draw:created')
|
||
this.hiMap.mapObj.drawCircle.enable()
|
||
this.hiMap.mapObj.map.once('draw:created', (e) => {
|
||
const type = e.layerType
|
||
const circleLayer = e.layer
|
||
if (type === 'circle') {
|
||
const radius = e.layer._mRadius
|
||
if (radius > 5000) {
|
||
message.info('最大支持5km范围的圈选')
|
||
} else {
|
||
const circlePloygonLayer =
|
||
this.multiScreenFun.createCircleLayer(circleLayer)
|
||
this.hiMap.mapObj.featureGroup.addLayer(circlePloygonLayer)
|
||
this.hiMap.mapObj.layerGroup.set(
|
||
'circlePloygonLayer',
|
||
circlePloygonLayer
|
||
)
|
||
console.log('查询图层为何发生了改变', e.layer)
|
||
this.mapSearchParam.gpsX = e.layer._latlng.lng
|
||
this.mapSearchParam.gpsY = e.layer._latlng.lat
|
||
this.mapSearchParam.radius = radius
|
||
this.mapSearchParam.type = 1
|
||
const params = {
|
||
gpsX: this.mapSearchParam.gpsX,
|
||
gpsY: this.mapSearchParam.gpsY,
|
||
radius: radius,
|
||
type: this.mapSearchParam.type,
|
||
}
|
||
// mybus.emit('getListByMap', params)
|
||
this.getCameraByParentId('map')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getCameraByParentId(type) {
|
||
if (!this.whoShow1.itShowXiHaiAn) {
|
||
getCameraByParentId(this.mapSearchParam).then((res) => {
|
||
console.log('根据parent查询摄像头', res.data.data)
|
||
this.addResourceTomap('videoMap', res.data.data)
|
||
})
|
||
} else {
|
||
console.log('根据parent查询摄像头111111',this.mapSearchParam)
|
||
let params = {
|
||
regionId:
|
||
this.mapSearchParam.parentId ||
|
||
'70be8c5b664f4bcf869d82f2e8335051',
|
||
pageNum: this.mapSearchParam.pageNum,
|
||
pageSize: this.mapSearchParam.type!=0?this.mapSearchParam.pageSize:10,
|
||
name: this.mapSearchParam.cameraName || '',
|
||
longitude: this.mapSearchParam.gpsX || '',
|
||
latitude: this.mapSearchParam.gpsY || '',
|
||
radius: this.mapSearchParam.radius || '',
|
||
type: this.mapSearchParam.type,
|
||
borderPolygonList: this.mapSearchParam.borderPolygonList || [],
|
||
}
|
||
let paramsFather = ''
|
||
let i = 1
|
||
for (var key in params) {
|
||
if (params[key] === '') {
|
||
delete params[key]
|
||
} else {
|
||
if (i != 1) {
|
||
paramsFather += `&${key}=` + params[key]
|
||
i += 1
|
||
} else if (i == 1) {
|
||
paramsFather += `${key}=` + params[key]
|
||
i += 1
|
||
}
|
||
}
|
||
}
|
||
params.type='0';
|
||
getCameraByCondition(params).then((res) => {
|
||
//console.log('根据parent查询摄像头44444', res.data.data)
|
||
if(type=='map'){
|
||
let params = this.mapSearchParam;
|
||
params.dataSource = res.data.data||0;
|
||
params.total = res.data.count||0;
|
||
mybus.emit('getListByMap', params);
|
||
}
|
||
this.pointAllData = res.data.data;
|
||
if(this.mapSearchParam.type!=0){
|
||
this.addResourceTomap('videoMap', res.data.data)
|
||
}
|
||
else
|
||
{this.addResourceTomap('videoMap', []) } //查询全部时不打点}
|
||
|
||
})
|
||
}
|
||
},
|
||
// 初始化地址匹配服务
|
||
initAddressMatchService() {
|
||
this.L = window.L || {}
|
||
// this.addressMatchService = L.supermap.addressMatchService(
|
||
// this.addressMatchUrl
|
||
// )
|
||
},
|
||
areaMode(){
|
||
// 转换不规则形状模式
|
||
if(this.circleModeFlag){
|
||
this.resetCircle();
|
||
this.circleModeFlag = false;
|
||
}
|
||
|
||
this.areaModeFlag = !this.areaModeFlag;
|
||
|
||
if (this.areaModeFlag) {
|
||
// 打开不规则形状模式模式
|
||
this.areaSelectResource()
|
||
} else {
|
||
this.resetArea();
|
||
}
|
||
},
|
||
circleMode() {
|
||
if(this.areaModeFlag){
|
||
this.resetArea();
|
||
this.areaModeFlag = false;
|
||
}
|
||
// 转换圈选模式
|
||
this.circleModeFlag = !this.circleModeFlag
|
||
if (this.circleModeFlag) {
|
||
// 打开圈选模式
|
||
this.circleSelectResource()
|
||
} else {
|
||
this.resetCircle();
|
||
}
|
||
},
|
||
resetCircle(){
|
||
// 关闭圈选模式，清空圈选内容，重新上图
|
||
this.hiMapFun.removeLayerByLayerName('circlePloygonLayer')
|
||
// 重置内容
|
||
this.mapSearchParam.gpsX = ''
|
||
this.mapSearchParam.gpsY = ''
|
||
this.mapSearchParam.radius = ''
|
||
this.mapSearchParam.type = 0;
|
||
const params = {
|
||
gpsX: this.mapSearchParam.gpsX,
|
||
gpsY: this.mapSearchParam.gpsY,
|
||
radius: this.mapSearchParam.radius,
|
||
type: this.mapSearchParam.type
|
||
}
|
||
this.getCameraByParentId('map')
|
||
// mybus.emit('getListByMap', params);
|
||
},
|
||
resetArea(){
|
||
// 关闭不规则形状模式模式，清空不规则形状模式内容，重新上图
|
||
this.hiMapFun.removeLayerByLayerName('rectangleSelectLayer');
|
||
// 重置内容
|
||
this.mapSearchParam.borderPolygonList = [];
|
||
this.mapSearchParam.type = 0;
|
||
const params = {
|
||
borderPolygonList: this.mapSearchParam.borderPolygonList,
|
||
type: this.mapSearchParam.type
|
||
}
|
||
this.getCameraByParentId('map')
|
||
// mybus.emit('getListByMap', params);
|
||
},
|
||
//查询地址建议匹配
|
||
async searchAddressByKeyWord(queryString, cb, indexX) {
|
||
console.log('querySearch',queryString, cb,this.restaurants)
|
||
if(queryString){
|
||
getCameraByCondition({
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
regionId: "70be8c5b664f4bcf869d82f2e8335051",
|
||
type: "0",
|
||
name:queryString,
|
||
}).then(res => {
|
||
if(res.data.data[0]){
|
||
res.data.data.map( val =>{
|
||
val.location = {y:val.gpsY,x:val.gpsX}
|
||
val.value = val.channelName
|
||
})
|
||
const results = res.data.data
|
||
cb(results)
|
||
}else{
|
||
ElMessage({
|
||
showClose: true,
|
||
message: '未查询到点位！',
|
||
type: 'warning',
|
||
})
|
||
}
|
||
})
|
||
}else{
|
||
cb([])
|
||
}
|
||
},
|
||
getCameraAllPage(page) {
|
||
let params = {
|
||
regionId: "70be8c5b664f4bcf869d82f2e8335051",
|
||
pageNum: "1",
|
||
pageSize: 30000,
|
||
type: 0,
|
||
borderPolygonList: []
|
||
}
|
||
getCameraByCondition(params).then((res) => {
|
||
// let t1 = new Date().getTime();
|
||
// this.cameraAllData = res.data.data
|
||
this.addResourceTomap('videoMap', res.data.data)
|
||
// let t2 = new Date().getTime();
|
||
// console.log("时间#############" + (t2 - t1));
|
||
})
|
||
},
|
||
getCameraAllLabel() {},
|
||
tabChange(item) {
|
||
if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
|
||
if (item.labelName == '全部') {
|
||
this.addResourceTomap('全部', this.cameraAllData)
|
||
this.checkboxGroup = ['全部']
|
||
} else {
|
||
this.hiMapFun.removeLayerByLayerName('全部')
|
||
getCameraLabel({ labelCode: item.labelCode }).then((res) => {
|
||
this.addResourceTomap(item.labelName, res.data.data)
|
||
res.data.data.forEach((item) => {
|
||
this.camreaTreeSingle.forEach((val) => {
|
||
if (item.nodeName == val.channelName) {
|
||
val.children.push(item)
|
||
}
|
||
})
|
||
})
|
||
this.camreaTreeIsShow = false
|
||
})
|
||
}
|
||
} else {
|
||
this.hiMapFun.removeLayerByLayerName(item.labelName)
|
||
this.checkStatus = '2'
|
||
this.camreaTreeIsShow = true
|
||
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
|
||
(res) => {
|
||
this.camreaTree = res.data.data
|
||
}
|
||
)
|
||
}
|
||
},
|
||
|
||
addResourceTomap(type, data) {
|
||
console.log('datadatadata',data);
|
||
const dataEvent = []
|
||
if(data&&data.length>0){
|
||
data.forEach((item) => {
|
||
const arr = [0, 0.0, '', '0', '0.0']
|
||
if (arr.indexOf(item.gpsX) == -1) {
|
||
dataEvent.push({
|
||
latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
|
||
data: item,
|
||
active: item.active,
|
||
type: 'videoSurveillance',
|
||
})
|
||
}
|
||
})
|
||
}
|
||
console.log('点击后上上图数据', dataEvent)
|
||
this.getMapPoint(dataEvent, 'icon_camare.png', type)
|
||
},
|
||
getMapPoint(data, img, type) {
|
||
this.hiMapFun.clearAllLayers();
|
||
const features = data
|
||
// debugger
|
||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
|
||
features,
|
||
img,
|
||
type,
|
||
createCameraDetailsPop,
|
||
'icon_camare_active.png'
|
||
)
|
||
},
|
||
|
||
querySearchAsync(queryString, cb) {
|
||
if (queryString.length > 0) {
|
||
searchCamera(queryString).then((res) => {
|
||
cb(res.data.suggestions)
|
||
})
|
||
}
|
||
},
|
||
handleSelect(item) {
|
||
console.log('1111',item)
|
||
this.hiMapFun.clearAllLayers()
|
||
//定时器方法
|
||
let arr = item.detail.location.split(',')
|
||
const searchDataDetail = [
|
||
{
|
||
latLng: { lat: arr[1], lng: arr[0] },
|
||
data: item,
|
||
},
|
||
]
|
||
this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] })
|
||
this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0])
|
||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
|
||
searchDataDetail,
|
||
'poi-red.png',
|
||
'address'
|
||
)
|
||
this.timer = setTimeout(() => {
|
||
this.addResourceTomap('全部', this.cameraAllData)
|
||
}, 1000)
|
||
this.checkboxGroup = []
|
||
},
|
||
handleNodeClick(data) {
|
||
console.log(data)
|
||
getCameraAllOrgan({ parentId: data.id }).then((res) => {
|
||
this.camreaTree.forEach((item) => {
|
||
item.children = res.data.data
|
||
})
|
||
console.log(this.camreaTree)
|
||
})
|
||
},
|
||
|
||
treeCameraClick(data) {
|
||
console.log(data)
|
||
if (data.channelCode) {
|
||
const cameraTree = [
|
||
{
|
||
latLng: { lat: data.gpsY, lng: data.gpsX },
|
||
data: data,
|
||
type: 'cameraTree',
|
||
},
|
||
]
|
||
this.hiMapFun.removeLayerByLayerName('cameraTree')
|
||
this.hiMapFun.openPopupVideoSurveillance(cameraTree[0])
|
||
const arr = [0, 0.0, '', '0', '0.0']
|
||
if (arr.indexOf(data.gpsX) == -1) {
|
||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
|
||
cameraTree,
|
||
'poi-red.png',
|
||
'cameraTree'
|
||
)
|
||
this.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX })
|
||
}
|
||
}
|
||
},
|
||
searchLabel(value) {
|
||
const params = {
|
||
labelName: value,
|
||
}
|
||
selectByLabelName(params).then((res) => {
|
||
console.log(res)
|
||
this.tabList = res.data.data
|
||
})
|
||
},
|
||
searchCameraTree(value) {
|
||
if (value.length > 0) {
|
||
const params = {
|
||
channelName: value,
|
||
}
|
||
selectByChannelName(params).then((res) => {
|
||
console.log(res)
|
||
this.camreaTree = []
|
||
res.data.data.forEach((item) => {
|
||
this.camreaTree.push({
|
||
name: item.channelName,
|
||
gpsX: item.gpsX,
|
||
gpsY: item.gpsY,
|
||
channelCode: item.channelCode,
|
||
leaf: true,
|
||
})
|
||
})
|
||
})
|
||
} else {
|
||
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
|
||
(res) => {
|
||
this.camreaTree = res.data.data
|
||
}
|
||
)
|
||
}
|
||
},
|
||
refresh() {
|
||
this.hiMapFun.clearAllLayers()
|
||
this.addResourceTomap('全部', this.cameraAllData)
|
||
this.checkboxGroup = []
|
||
},
|
||
reset() {
|
||
this.checkboxGroup = []
|
||
this.checkStatus = '1'
|
||
this.camreaTreeIsShow = true
|
||
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
|
||
(res) => {
|
||
this.camreaTree = res.data.data
|
||
}
|
||
)
|
||
document.getElementById('tree').scrollTop = 0
|
||
},
|
||
filterNode(value, data) {
|
||
if (value == '2') return true
|
||
if (value == '0') {
|
||
return data.checkStatus == 0
|
||
}
|
||
if (value == '1') {
|
||
return data.checkStatus == 1
|
||
}
|
||
},
|
||
},
|
||
beforeUnmount() {
|
||
clearInterval(this.timer) // 清除定时器
|
||
this.timer = null
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.map-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
// height: 624px;
|
||
position: absolute;
|
||
.normal-map-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
}
|
||
}
|
||
#contain {
|
||
.searchPoint {
|
||
position: absolute;
|
||
z-index: 800;
|
||
top: 0.1rem;
|
||
right: 0.1rem;
|
||
border-radius: 4px;
|
||
.reset-button {
|
||
margin-left: 20px;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
z-index: 1008;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="less">
|
||
.ucs-leaflet-map {
|
||
.iclient-leaflet-logo {
|
||
display: none;
|
||
}
|
||
.leaflet-control-attribution {
|
||
display: none;
|
||
}
|
||
svg,.icon-poylon {
|
||
position: absolute;
|
||
bottom: 0.1rem;
|
||
right: 0.1rem;
|
||
z-index: 988;
|
||
cursor: pointer;
|
||
}
|
||
.input-with-select{
|
||
width: 2.4rem;
|
||
svg{
|
||
position: relative;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
.icon-poylon {
|
||
width: 0.46rem;
|
||
bottom: 0.6rem;
|
||
}
|
||
.address-auto-complete-input {
|
||
width: 2.4rem;
|
||
}
|
||
::v-deep.el-autocomplete .el-popper {
|
||
width: auto !important;
|
||
max-width: 2.4rem;
|
||
}
|
||
}
|
||
|
||
.input-with-select{
|
||
width: 2.4rem;
|
||
svg{
|
||
position: relative;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
</style>
|