废气图标

wangqi

2021-04-15 e5f105b1acb3c63df8aac97ce1c67ad070c0de2d

 src/components/panel/topicSearch/GasWasteSearch.vue

@@ -64,8 +64,8 @@
      </el-form>
    </div>
    <el-scrollbar style="height:264px">
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
      <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" @click="handleLocation(item)"><!--  -->
        <img src="../../../../public/assets/images/map/exhaust/fq_green2.png" alt="" class="state"/>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
@@ -98,15 +98,14 @@

<script>
import mapApi from '@/api/mapApi'

// import WfsHelper from '@components/helpers/WfsHelper'
import publicBounced from '@/components/BaseNav/PublicBounced/PublicBounced'// import WfsHelper from '@components/helpers/WfsHelper'
import ImagGreen from '../../../../public/assets/images/map/exhaust/fq_green2.png'
export default {
  name: 'GasWasteSearch',
  data () {
    return {
      gdVisible: true,
      list: [],
      // labelList: PipelineTypeOptions[0].labelList,
      total: 0,
      inareaTypeOptions: [],
      enterpriseTypeOptions: [],
@@ -158,24 +157,83 @@
        pipelineType: this.form.pipelineType,
        dataType: this.form.dataType
      }
      console.log(param)
      // var wfsHelper = new WfsHelper()
      // wfsHelper.addTypeName(this.form.query.layerName)
      // wfsHelper.addLike(this.form.query.key, this.form.keyword)
      // const _this = this
      // const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {})
      const res = await mapApi.getWasteGas()
      console.log(res)
      if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) {
        this.list = res.data.features
      }
      // console.log(param)
      const res = await mapApi.getWasteGas(param)
      // console.log(res)
      this.list = res.Result.DataInfo
    },
    handleLocation (val) {
    // 弹窗展示
    async handleLocation (val) {
      console.log(val)
      const bound = this.L.geoJSON([val], {}).getBounds()
      var layer = window.serviceLayerHelper.getByLayerId(val.id)
      layer && layer.openPopup()
      this.$store.state.map.map.flyToBounds(bound)
      const pos = [val.Latitude, val.Longitude]
      window.map.flyTo(pos, 13)
      const positionX = val.Latitude
      const positionY = val.Longitude

      // 定义类型 用来区分数据的不同 1.接口接口数据来进行数据的判断 2.根据数据类型的不同，进行不同类型的图片显示
      const ContrLevel = val.ContrLevel
      var iconUrl = this.differentTypes(ContrLevel)

      const marker = this.L.marker([positionX, positionY], {
        // totransferData: this.searchDataDisplay[i],
        icon: this.L.icon({
          iconUrl: iconUrl,
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        })
      })
      this.layer.addLayer(marker)
      const t1 = setTimeout(async () => {
        const dataValue = {
          StoragePlaceId: val.StoragePlaceId
        }
        // 弹框标题
        const title = val.Name
        console.log(title)
        // 基本信息 tabs
        const result = await mapApi.getWasteGas(dataValue)
        const GasOnlinedata = {
          onLineMonEmissPointId: '23',
          monItemId: '28,31',
          beginTime: '2020-04-06 15:13:20',
          endTime: '2020-04-07 15:13:20',
          dataType: '1'
        }
        const GasManualData = {
          companyId: '3900100145',
          labMonPointId: '219',
          beginTime: '2020-04-06 15:13:20',
          endTime: ' 2020-04-07 15:13:20'
        }
        const ManualData = await mapApi.getWasteGasManualData(GasManualData)
        const Mondata = await mapApi.getWasteGasMonData(GasOnlinedata)
        // 绑定弹框实例
        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.setGasData(title, result.Result.DataInfo, Mondata.Result.DataInfo, ManualData.Result.DataInfo, 'feiqi')
        // this.setPanTo(pos, 250)
      }, 1000)
      console.log(t1)
    },
    // 不同类型图片加载
    differentTypes (ContrLevel) {
      var effectOfChange
      /*
       if (ContrLevel === 1) {
         effectOfChange = ImgBlue
       } else if (ContrLevel === 2) {
      */
      effectOfChange = ImagGreen
      // } else if (ContrLevel === 3) {
      //   effectOfChange = ImagBright
      // } else {
      //   effectOfChange = ImgGray
      // }
      return effectOfChange
    }
  }
}