Merge remote-tracking branch 'origin/develop' into develop

XingChuan

2021-05-30 2d5e75bbc04d8c4c5c7dc6bb141ad16ffa2d9936

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

@@ -3,8 +3,23 @@
        <el-row>
            <el-input type="text" v-model="clickLocation" clearable @change="focusLocation"></el-input>
        </el-row>
        <el-row>
            <el-button type="primary" @click="confirm" style="text-align: right">确认</el-button>
        <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 style="text-align: right">
            <el-button type="primary" @click="confirm">确认</el-button>
        </el-row>
    </div>
</template>
@@ -13,16 +28,21 @@

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: [],
      marker: null
    }
  },
  methods: {
    // 获得焦点 进行定位
    // 搜索定位
    focusLocation () {
      // console.log(this.clickLocation)
      // console.log(window.map.getZoom())
@@ -42,30 +62,75 @@
      }
      // 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]])
        //   }
        // }
      })
      this.clickLocation = ''
    },
    // 点击定位
    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>'
      this.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(this.marker)
      window.map.setView([ps[1], ps[0]], 17)
      pulseEffect([ps[1], ps[0]])
    },
    // 点击确认按钮事件
    confirm () {
      // 通过子组件向父组件传递数据
      this.$emit('locationClick', this.LongLatPos)
      console.log('搜索定位')
      window.mapManager.clearHighlight()
      window.map.removeLayer(this.marker)
      this.searchList = []
      this.clickLocation = ''
      eventBus.$emit('location-setChange', true)
    }
  }
}
</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;