hi-ucs/front/src/views/home/videoSurveillance/index.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>