更改废水坐标显示代码

zhangshuaibao

2021-03-25 b820052f5bd13f1a88131f39055c49437652bd2c

更改废水坐标显示代码

 public/static/WasteWater.json

New file
@@ -0,0 +1,117 @@
{
  "Result": {
    "IsSuccess": 1,
    "code": 1,
    "ErrorMsg": "",
    "DataInfo": [
      {
        "StoragePlaceId": 124.0,
        "StoragePlaceName": "炼油部含油污水排放口",
        "HazaWasteStorageDate": "0001-01-01T00:00:00",
        "HazaWasteCatgrName": null,
        "SurplusQuantityWarning": 0,
        "LongDayWarning": 0,
        "DesignFloorArea": 95.0,
        "HazaWasteName": null,
        "EstimateFloorArea": 0.0,
        "HazaWasteDeptName": null,
        "SurplusFloorArea": 95.0,
        "HazaWasteStorageDays": 0.0,
        "StorageQty": 0.0,
        "HazaWasteStorageQty": 0.0,
        "positionX": 32.234354069955536,
        "positionY": 118.76172605141248
      },
      {
        "StoragePlaceId": 123.0,
        "StoragePlaceName": "水务部烯烃外部排水口",
        "HazaWasteStorageDate": "0001-01-01T00:00:00",
        "HazaWasteCatgrName": null,
        "SurplusQuantityWarning": 0,
        "LongDayWarning": 0,
        "DesignFloorArea": 260.0,
        "HazaWasteName": null,
        "EstimateFloorArea": 0.0,
        "HazaWasteDeptName": null,
        "SurplusFloorArea": 260.0,
        "HazaWasteStorageDays": 0.0,
        "StorageQty": 0.0,
        "HazaWasteStorageQty": 0.0,
        "positionX": 32.21783286123124,
        "positionY": 118.74581627024358
      },
      {
        "StoragePlaceId": 127.0,
        "StoragePlaceName": "聚醚部废水排放口",
        "HazaWasteStorageDate": "0001-01-01T00:00:00",
        "HazaWasteCatgrName": null,
        "SurplusQuantityWarning": 0,
        "LongDayWarning": 0,
        "DesignFloorArea": 351.0,
        "HazaWasteName": null,
        "EstimateFloorArea": 0.0,
        "HazaWasteDeptName": null,
        "SurplusFloorArea": 351.0,
        "HazaWasteStorageDays": 0.0,
        "StorageQty": 0.0,
        "HazaWasteStorageQty": 0.0,
        "positionX": 32.21761792102056,
        "positionY": 118.7694434198091
      },
      {
        "StoragePlaceId": 126.0,
        "StoragePlaceName": "水务部雨水排放口",
        "HazaWasteStorageDate": "0001-01-01T00:00:00",
        "HazaWasteCatgrName": null,
        "SurplusQuantityWarning": 0,
        "LongDayWarning": 1.0,
        "DesignFloorArea": 54.0,
        "HazaWasteName": null,
        "EstimateFloorArea": 0.0,
        "HazaWasteDeptName": null,
        "SurplusFloorArea": 54.0,
        "HazaWasteStorageDays": 0.0,
        "StorageQty": 1.0,
        "HazaWasteStorageQty": 0.0,
        "positionX": 32.22328407752166,
        "positionY": 118.7645304033338
      },
      {
        "StoragePlaceId": 122.0,
        "StoragePlaceName": "生产废水排放口",
        "HazaWasteStorageDate": "0001-01-01T00:00:00",
        "HazaWasteCatgrName": null,
        "SurplusQuantityWarning": 0,
        "LongDayWarning": 1.0,
        "DesignFloorArea": 124.0,
        "HazaWasteName": null,
        "EstimateFloorArea": 0.0,
        "HazaWasteDeptName": null,
        "SurplusFloorArea": 124.0,
        "HazaWasteStorageDays": 0.0,
        "StorageQty": 1.0,
        "HazaWasteStorageQty": 0.0,
        "positionX": 32.22478169721047,
        "positionY": 118.75309838487216
      },
      {
        "StoragePlaceId": 129.0,
        "StoragePlaceName": "化学硫化品排水口",
        "HazaWasteStorageDate": "0001-01-01T00:00:00",
        "HazaWasteCatgrName": null,
        "SurplusQuantityWarning": 0,
        "LongDayWarning": 0,
        "DesignFloorArea": 78.0,
        "HazaWasteName": null,
        "EstimateFloorArea": 0.0,
        "HazaWasteDeptName": null,
        "SurplusFloorArea": 78.0,
        "HazaWasteStorageDays": 0.0,
        "StorageQty": 0.0,
        "HazaWasteStorageQty": 0.0,
        "positionX": 32.228692681454525,
        "positionY": 118.77199913186048
      }
    ]
  }
}

 src/api/request.js

@@ -7,3 +7,8 @@
export const requestSolidWaste = (url) => {
  return $http.get('./static/SolidWaste.json')
}

// 废水接口
export const requestWasteWater = (url) => {
  return $http.get('./static/WasteWater.json')
}

 src/components/BaseNav/SolidWaste.js

@@ -28,7 +28,7 @@
  // 根据获取数据 画出 内容
  DrawTheSolidWasteContent (data) {
    // 图标样式扩展
    var SolidWasteIcon = this.SolidWasteIcon()
    const SolidWasteIcon = this.SolidWasteIcon()

    // //加载数据前如果存在图层组 那么清除掉
    if (this.SolidWasteLayerGroup) {
@@ -43,13 +43,13 @@
      // if (positionX != null && positionY != null) {
      // 用于 判断 => 判断是否展示脉冲效果 => temp(临时)
      const determineValueOne = data[i].LongDayWarning
      var determineValueTwo = data[i].StorageQty
      const determineValueTwo = data[i].StorageQty
      const positionArea = [positionX, positionY]

      // 图标展示
      var iconUrl = this.SolidWasteIconUrl(determineValueOne, determineValueTwo, positionArea)
      var Icon = new SolidWasteIcon({ iconUrl: iconUrl })
      // var url = Icon.options.iconUrl
      const iconUrl = this.SolidWasteIconUrl(determineValueOne, determineValueTwo, positionArea)
      const Icon = new SolidWasteIcon({ iconUrl: iconUrl })
      // let url = Icon.options.iconUrl

      const marker = this.L.marker([positionX, positionY], { icon: Icon })

@@ -101,7 +101,7 @@

  // 根据类型返回图片加载url
  SolidWasteIconUrl (determineValueOne, determineValueTwo, position) {
    var EffectOfChange
    let EffectOfChange
    if (determineValueOne === 1 || determineValueTwo === 1) {
      EffectOfChange = defaultImg
      this.EffectOfPulse(position, this.solidWasteMarkersLabels, this.SolidWasteLayerGroup)
@@ -114,19 +114,19 @@
  // 脉冲效果设置实现
  EffectOfPulse (position, markers, layerGroup) {
    // // 区分直接执行 和判断执行的不同区别
    var differentColor = ''
    let differentColor = ''
    if (markers) {
      differentColor = '#ff0000'
    } else {
      differentColor = '#98FB98'
    }
    // 坐标数据：报警传进来的是数组 / 点击传进来的是object
    var FinalPosition = position instanceof Array ? {
    const FinalPosition = position instanceof Array ? {
      lat: position[0],
      lng: position[1]
    } : position
    // 插件 效果实现
    var pulsingIcon = this.L.icon.pulse({
    const pulsingIcon = this.L.icon.pulse({
      iconSize: [20, 20],
      color: differentColor,
      fillColor: ''
@@ -135,7 +135,7 @@
      // markers.push(this.L.marker(FinalPosition, { icon: pulsingIcon }))
      // this.L.layerGroup(markers).addLayer(layerGroup)
    } else {
      var picGroupMarker = new this.L.FeatureGroup()
      const picGroupMarker = new this.L.FeatureGroup()
      this.L.marker(FinalPosition, { icon: pulsingIcon }).addTo(picGroupMarker)
      this.pulseHeighLightMarker = picGroupMarker.addTo(this.SolidWasteLayerGroup)
      this.PulseCountSetting()
@@ -144,8 +144,8 @@

  // 对图标脉冲 进行set设置  // 高亮图层
  PulseCountSetting () {
    var HeightLightTime = 5
    var PulseNumber = 5
    const HeightLightTime = 5
    let PulseNumber = 5
    const pulseinterver = setInterval(() => {
      if (PulseNumber > 0) {
        PulseNumber--

 src/components/BaseNav/WasteWater.js

New file
@@ -0,0 +1,175 @@
import { requestWasteWater } from '@/api/request'
// 展示图片
import defaultImg from '@components/BaseNav/magicMarker.png'
import Setting from '@components/BaseNav/voc.png'

// 底图业务展示点
class AddWasteWaterHelper {
  constructor (options) {
    this.map = options.map
    this.L = window.L
    this.WasteWaterLayerGroup = this.L.layerGroup().addTo(this.map)
    this.WasteWaterPopup = null
    this.L.sgis = this.L.sgis || this.L
    this.WasteWaterMarkersLabels = []
    this.pulseHeighLightMarker = null
  }

  // 请求数据 data 为参数， 请求后台数据时 携带data参数
  requestData () {
    requestWasteWater().then(res => {
      this.DrawTheWasteWaterContent(res.Result.DataInfo)
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }

  // 根据获取数据 画出 内容
  DrawTheWasteWaterContent (data) {
    // 图标样式扩展
    const WasteWaterIcon = this.WasteWaterIcon()

    // //加载数据前如果存在图层组 那么清除掉
    if (this.WasteWaterLayerGroup) {
      this.WasteWaterLayerGroup.clearLayers()
    }
    for (let i = 0; i < data.length; i++) {
      // 经纬度 位置
      const positionX = data[i].positionX
      const positionY = data[i].positionY

      // 判断 经纬度位置信息是否存在
      // if (positionX != null && positionY != null) {
      // 用于 判断 => 判断是否展示脉冲效果 => temp(临时)
      const determineValueOne = data[i].LongDayWarning
      const determineValueTwo = data[i].StorageQty
      const positionArea = [positionX, positionY]

      // 图标展示
      const iconUrl = this.WasteWaterIconUrl(determineValueOne, determineValueTwo, positionArea)
      const Icon = new WasteWaterIcon({ iconUrl: iconUrl })
      // let url = Icon.options.iconUrl

      const marker = this.L.marker([positionX, positionY], { icon: Icon })

      marker.bindPopup(() => {
        return this.WasteWaterPopup.$el
      }, {
        className: 's-map-popup',
        minWidth: 600,
        closeButton: true,
        autoClose: false
      })
      // 划过出现 展示数据
      marker.bindTooltip(data[i].StoragePlaceName, {
        permanent: true,
        offset: [0, -16],
        direction: 'top',
        className: ''
      })
      // 点击 事件
      marker.on('click', (e) => {
        try {
          // console.log(e)
          this.EffectOfPulse(e.target.getLatLng())
          this.WasteWaterPopup.setDate(data[i])
        } catch (error) {
          console.log(error)
        }
      })
      // 设置内容添加到图层
      this.WasteWaterLayerGroup.addLayer(marker)
      // }
    }
  }

  // 固废点击进行的 内容的设置
  SetWasteWaterContent (config, containerPopup) {
    this.WasteWaterPopup = containerPopup
  }

  // 图标样式扩展 => 光圈 图标脉冲
  WasteWaterIcon () {
    return this.L.Icon.extend({
      options: {
        iconSize: [50, 50],
        iconAnchor: [25, 25]
      }
    })
  }

  // 根据类型返回图片加载url
  WasteWaterIconUrl (determineValueOne, determineValueTwo, position) {
    let EffectOfChange
    if (determineValueOne === 1 || determineValueTwo === 1) {
      EffectOfChange = defaultImg
      this.EffectOfPulse(position, this.WasteWaterMarkersLabels, this.WasteWaterLayerGroup)
    } else {
      EffectOfChange = Setting
    }
    return EffectOfChange
  }

  // 脉冲效果设置实现
  EffectOfPulse (position, markers, layerGroup) {
    // // 区分直接执行 和判断执行的不同区别
    let differentColor = ''
    if (markers) {
      differentColor = '#ff0000'
    } else {
      differentColor = '#98FB98'
    }
    // 坐标数据：报警传进来的是数组 / 点击传进来的是object
    const FinalPosition = position instanceof Array ? {
      lat: position[0],
      lng: position[1]
    } : position
    // 插件 效果实现
    const pulsingIcon = this.L.icon.pulse({
      iconSize: [20, 20],
      color: differentColor,
      fillColor: ''
    })
    if (markers) {
      // markers.push(this.L.marker(FinalPosition, { icon: pulsingIcon }))
      // this.L.layerGroup(markers).addLayer(layerGroup)
    } else {
      const picGroupMarker = new this.L.FeatureGroup()
      this.L.marker(FinalPosition, { icon: pulsingIcon }).addTo(picGroupMarker)
      this.pulseHeighLightMarker = picGroupMarker.addTo(this.WasteWaterLayerGroup)
      this.PulseCountSetting()
    }
  }

  // 对图标脉冲 进行set设置  // 高亮图层
  PulseCountSetting () {
    const HeightLightTime = 5
    let PulseNumber = 5
    const pulseinterver = setInterval(() => {
      if (PulseNumber > 0) {
        PulseNumber--
      } else {
        this.pulseClear(pulseinterver)
        PulseNumber = HeightLightTime
      }
    }, 1000)
  }

  // 清除 图层
  pulseClear (pulseinterver) {
    clearInterval(pulseinterver)
    pulseinterver = null

    if (this.WasteWaterLayerGroup) {
      // this.WasteWaterLayerGroup.clearLayers()
    } else {
      this.WasteWaterLayerGroup = this.L.layerGroup().addTo(this.map)
    }
    if ((this.pulseHeighLightMarker)) {
      this.pulseHeighLightMarker.remove()
    }
  }
}

export default AddWasteWaterHelper

 src/components/BaseNav/WasteWaterContent.vue

New file
@@ -0,0 +1,52 @@
<template>
  <div class="wastewater-content">
    <div class="content-left">
      <span>{{ displayContent.StoragePlaceName }}</span>
    </div>
    <div class="content-right">
      <WasteWaterTable :displayContent="displayContent"></WasteWaterTable>
    </div>
  </div>
</template>

<script>

import WasteWaterTable from '@components/BaseNav/WasteWaterTable'

export default {
  name: 'WasteWaterContent',
  components: { WasteWaterTable },
  data () {
    return {
      displayContent: []
    }
  },
  methods: {
    setDate (data) {
      this.displayContent = data
    }
  }
}
</script>

<style lang="less" scoped>
span {
  font-size: 22px;
  color: red;
}

.wastewater-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .content-left {
    width: 35%;
  }

  .content-right {
    width: 60%;
  }
}
</style>

 src/components/BaseNav/WasteWaterTable.vue

New file
@@ -0,0 +1,69 @@
<template>
  <el-tabs>
    <el-tab-pane :label="displayContent.StoragePlaceName" name="">
      <el-table
          :data="tableData" :fit="true">
        <el-table-column
            type="index"
            label="序号">
        </el-table-column>
        <el-table-column
            type="index"
            label="序号">
        </el-table-column>
        <el-table-column
            type="index"
            label="序号">
        </el-table-column>
        <el-table-column label="废水(t)">
          <el-table-column
              prop="province"
              label="累计产生量">
          </el-table-column>
          <el-table-column
              prop="city"
              label="当月产生量">
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>

</template>

<script>
export default {
  name: 'WasteWaterTable',
  props: ['displayContent'],
  data () {
    return {
      tableData: [{
        date: '集团公司',
        name: '35',
        province: '23',
        city: '11',
        address: 235,
        zip: 23
      }, {
        date: '天津石化',
        name: 32,
        province: 33,
        city: 44,
        address: 53,
        zip: 200333
      }, {
        date: '济南炼化',
        name: 35,
        province: 13,
        city: 33,
        address: 44,
        zip: 200333
      }]
    }
  }
}
</script>

<style lang="less" scoped>

</style>

 src/views/MapTemplate.vue

@@ -18,6 +18,8 @@
    <!--    <el-button id="map-btn" el-icon-c-scale-to-original icon="el-icon-c-scale-to-original" circle @click="isShowHidden"></el-button>-->
    <el-button type="primary" @click="ChangeState" class="solid-waste">固废</el-button>
    <SolidContent ref="SolidWastePopup"></SolidContent>
    <el-button type="primary" @click="ChangeWaterState" class="Waste-water">废水</el-button>
    <WasteWaterContent ref="WasteWaterPopup"></WasteWaterContent>
  </div>
</template>

@@ -37,8 +39,10 @@
import LegendPanel from '@components/panel/LegendPanel'
import Enterprise from '../components/table/enterprise'
import SolidContent from '@components/BaseNav/SolidContent'
import WasteWaterContent from '@components/BaseNav/WasteWaterContent'
// 底图业务js逻辑
import AddSolidWasteHelper from '@components/BaseNav/SolidWaste'
import AddWasteWaterHelper from '@components/BaseNav/WasteWater'

export default {
  name: 'MapTemplate',
@@ -54,7 +58,8 @@
    LcServiceLayer,
    Popup,
    summarySheets,
    SolidContent
    SolidContent,
    WasteWaterContent
  },
  data () {
    return {
@@ -82,9 +87,14 @@
      AddSolidWaste.requestData()
      AddSolidWaste.SetSolidWasteContent(this.config, this.$refs.SolidWastePopup)
    },
    isShowHidden () {
      this.isShowBtn = !this.isShowBtn
    ChangeWaterState () {
      const AddWasteWater = new AddWasteWaterHelper({ map: this.map })
      AddWasteWater.requestData()
      AddWasteWater.SetWasteWaterContent(this.config, this.$refs.WasteWaterPopup)
    },
    // isShowHidden () {
    //   this.isShowBtn = !this.isShowBtn
    // },
    saveMapStatus () {
      window.serviceLayerHelper = this.serviceLayerHelper
      this.$store.commit('setMapObj', this.map)
@@ -166,6 +176,13 @@
  z-index: 999;
}

.Waste-water {
  position: absolute;
  top: 88px;
  left: 180px;
  z-index: 999;
}

.full-screen {
  width: 100%;
  height: 100%;