企业应急-事件上报-搜索定位/经纬度定位修改

陈泽平

2021-05-29 b3d9e0d7a9479ba8e615a82e6f454fd2ebf62ac6

企业应急-事件上报-搜索定位/经纬度定位修改

 src/components/base-page/enterprise-emergency/events-reported/ReportLocation.vue

@@ -20,7 +20,8 @@
                        </el-form>
                    </div>
                    <div class="place-right">
                        <el-button type="primary" @click="mapPoints">定位</el-button>
                        <el-button type="primary" size="small" @click="mapPoints">点击定位</el-button>
                        <el-button type="primary" size="small" @click="dataPoints">数据定位</el-button>
                    </div>
                </el-row>
                <div class="place-bottom" style="text-align: center;margin: 5px">
@@ -36,6 +37,8 @@
// 管段定位组件
import ReportLocationSection from './ReportLocationSection'
import ReportLocationSearch from './ReportLocationSearch'

import { pulseEffect } from '../../../../utils/utils'

import iconUrl from '../../../../../public/assets/images/map/loc.png'

@@ -56,36 +59,33 @@
      }
    }
  },
  // mounted () {
  //   // 接收规定 每次重新选择定位 都指定 选择第一个开始
  //   eventBus.$on('tab-change', (obj) => {
  //     this.activeName = obj
  //   })
  // },
  methods: {
    // 地图上点击
    selectPipeLine () {
      window.map.on('click', this.selectClick)
      // window.mapManager.clickDialogSwitch = false
    // 点击定位
    mapPoints () {
      window.map.on('click', (e) => {
        this.LongLatPos.longPos = parseFloat(e.latlng.lng).toFixed(6)
        this.LongLatPos.latPos = parseFloat(e.latlng.lat).toFixed(6)
        const as = [this.LongLatPos.latPos, this.LongLatPos.longPos]
        // console.log(as)
        window.map.setView(as, 17)
        pulseEffect(as)
        const marker = window.L.marker(as, {
          icon: window.L.icon({
            iconUrl: iconUrl,
            iconSize: [30, 30],
            iconAnchor: [15, 15]
          })
        })
        window.map.addLayer(marker)
        window.map.off('click')
      })
    },
    // 地图上点击回调
    selectClick (e) {
      window.map.off('click', this.selectClick)
      // const point = [e.latlng.lng, e.latlng.lat]
      const pointX = e.latlng.lng
      const pointY = e.latlng.lat
      // let marker = window.L.marker(point,{
      //
      // })
      this.clickLocation = '\'' + pointX + '\'' + pointY + ''
      this.mapPointResult(e)
    },
    mapPointResult (e) {
      console.log(e)
      this.LongLatPos.longPos = e.latlng.lng
      this.LongLatPos.latPos = e.latlng.lat
      const as = [e.latlng.lat, e.latlng.lng]
    // 通过数据定位
    dataPoints () {
      const as = [this.LongLatPos.latPos, this.LongLatPos.longPos]
      // console.log(as)
      window.map.setView(as, 17)
      pulseEffect(as)
      const marker = window.L.marker(as, {
        icon: window.L.icon({
          iconUrl: iconUrl,
@@ -94,14 +94,8 @@
        })
      })
      window.map.addLayer(marker)
    },
    // 获得焦点 进行定位
    focusLocation () {
      this.selectPipeLine()
    },
    // 经纬度定位
    mapPoints () {
      this.selectPipeLine()
      this.LongLatPos.latPos = ''
      this.LongLatPos.longPos = ''
    },
    // 点击确认按钮事件
    confirm () {

 src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue

@@ -3,6 +3,21 @@
        <el-row>
            <el-input type="text" v-model="clickLocation" clearable @change="focusLocation"></el-input>
        </el-row>
        <el-scrollbar style="height:86.22px">
            <el-row v-for="(item,index) in searchList" :key="index" style="display: flex;align-items: center">
                <el-col :span="12">
                    <span>{{ item.name }}</span>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(item)">定位
                    </el-button>
                </el-col>
                <!--            <el-pagination-->
                <!--                    layout="prev, pager, next"-->
                <!--                    :total="50">-->
                <!--            </el-pagination>-->
            </el-row>
        </el-scrollbar>
        <el-row>
            <el-button type="primary" @click="confirm" style="text-align: right">确认</el-button>
        </el-row>
@@ -14,12 +29,15 @@
import { reportLocationSearch } from '../../../../api/request'
import { pulseEffect } from '../../../../utils/utils'
import eventBus from '../../../../eventBus'
import iconUrl from '../../../../../public/assets/images/map/loc.png'

export default {
  name: 'ReportLocationSearch',
  data () {
    return {
      // 点击定位绑定数据
      clickLocation: ''
      clickLocation: '',
      searchList: []
    }
  },
  methods: {
@@ -43,18 +61,50 @@
      }
      // console.log(data)
      reportLocationSearch(data).then(res => {
        console.log(res)
        // console.log(res)
        this.searchList = res.pois
        // console.log(this.searchList)
        // const as = res.pois[0].lonlat.trim().split(' ')
        // window.map.setView([as[1], as[0]], 17)
        // pulseEffect([as[1], as[0]])
        for (let i = 0; i < res.pois.length; i++) {
          const as = res.pois[i].lonlat.trim().split(' ')
          if (res.pois[i].name.indexOf(this.clickLocation) >= 0) {
            window.map.setView([as[1], as[0]], 17)
            pulseEffect([as[1], as[0]])
          }
        }
        // for (let i = 0; i < res.pois.length; i++) {
        //   const as = res.pois[i].lonlat.trim().split(' ')
        //   if (res.pois[i].name.indexOf(this.clickLocation) >= 0) {
        //     window.map.setView([as[1], as[0]], 17)
        //     pulseEffect([as[1], as[0]])
        //   }
        // }
      })
    },
    // 点击定位
    locationMapClick (val) {
      console.log(val)
      const ps = val.lonlat.trim().split(' ')
      // const htmls = '<div><ul><li>' + val.name + '</li> + <li>' + val.adress + '</li></ul></div>'
      // var myIcon = window.L.divIcon({
      //   html: htmls,
      //   className: 'company-bindTooltip',
      //   iconSize: 16
      // })
      const htmls = '<div><ul><li>' + val.name + '</li> <br/> <li>' + val.address + '</li> <br/> <li>' + val.phone + '</li></ul></div>'
      const marker = window.L.marker([ps[1], ps[0]], {
        icon: window.L.icon({
          iconUrl: iconUrl,
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        })
        // icon: myIcon
      })
        .bindTooltip(htmls, {
          // permanent: 'true',
          direction: 'bottom',
          offset: [0, 10],
          sticky: true,
          className: ''
        })
      window.map.addLayer(marker)
      window.map.setView([ps[1], ps[0]], 17)
      pulseEffect([ps[1], ps[0]])
    },
    // 点击确认按钮事件
    confirm () {
@@ -68,6 +118,16 @@
</script>

<style lang="less" scoped>
    /*/deep/ .el-row {*/
    /*    margin: 2px 0 !important;*/
    /*    padding: 0;*/
    /*    height: 10px;*/
    /*    max-height: 10px;*/
    /*}*/
    .div-list-search {

    }

    .click-location {
        margin: 0 auto;
        text-align: center;

 src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue

@@ -284,6 +284,7 @@
        // 附属设施
        this.affFacData(e)
        // })
        window.map.off('click')
      })
      // 数据 重新获取 进行置空
      this.tableList = []