<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>