派生自 wuyushui/SewerAndRainNetwork

zhangshuaibao
2021-04-14 6ace815c16170b0a7fc68bf280f63bffe96612e6
src/components/panel/topicSearch/SolidWasteSearch.vue
@@ -43,6 +43,7 @@
<script>
import mapApi from '@/api/mapApi'
import publicBounced from '@/components/BaseNav/PublicBounced/PublicBounced'
export default {
  name: 'SolidWasteSearch',
@@ -135,7 +136,13 @@
        }
      ],
      // 数据搜索之后,存储数据的
      searchDataDisplay: []
      searchDataDisplay: [],
      instance: null,
      intervals: [],
      layer: window.map,
      L: window.L,
      times: 5,
      colors: ['#98FB98', '#ff0000']
    }
  },
  methods: {
@@ -143,13 +150,64 @@
    async handleSearch (data) {
      // console.log(this.form.keyword)
      const result = await mapApi.getSolidWaste(data)
      console.log(result)
      this.searchDataDisplay = result.Result.DataInfo
    },
    // 数据展示,点击进行弹框及点的展示
    setBounced (val) {
    async setBounced (val) {
      const pos = [val.Latitude, val.Longitude]
      window.map.flyTo(pos, 11)
      const t1 = setTimeout(async () => {
        const dataValue = {
          StoragePlaceId: val.StoragePlaceId
        }
        // 弹框标题
        const title = val.Name
        // 基本信息 tabs
        const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue)
        // 详细信息展示 table
        const resultDetailed = await mapApi.getSolidWasteDetail(dataValue)
        // 绑定弹框实例
        this.instance && this.instance.closePopup()
        const PublicBounced = window.Vue.extend(publicBounced)
        this.instance = new PublicBounced().$mount()
        document.body.appendChild(this.instance.$el)
        // document.body.removeChild(instance.$el)
        // 通过方法 向绑定弹框传递数据
        this.instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei')
        this.setPanTo(pos, 250)
      }, 1000)
      console.log(t1)
      // clearTimeout(t1)
      this.pulseEffect(pos)
    },
    // flayTo() 弹框的可滑动事件
    setPanTo (pos, value) {
      var position = pos
      position = window.map.latLngToLayerPoint(position)
      position.y += value
      position = window.map.layerPointToLatLng(position)
      window.map.flyTo(position)
    },
    pulseEffect (xy) {
      // 插件 效果实现
      var pulsingIcon = this.L.icon.pulse({
        iconSize: [20, 20],
        color: this.colors[0],
        fillColor: ''
      })
      var picGroupMarker = this.L.marker(xy, { icon: pulsingIcon }).addTo(this.layer)
      var times = this.times
      // 定时
      var timeInterval = setInterval(() => {
        if (times > 0) {
          times--
        } else {
          clearInterval(timeInterval)
          picGroupMarker.remove()
        }
      }, 1000)
    },
    // select的option的数据选择
    handlePipelineType (val) {