废气点加载

wangqi

2021-03-29 645386bef783a5a1f2ae32f0173a6aba713703e0

废气点加载

 public/static/airQuality.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.214483532361875,
        "positionY":118.80441341164345
      },
      {
        "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.22122596740723,
        "positionY": 118.7843091583252
      },
      {
        "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.232299575805664,
        "positionY": 118.78950408935547
      },
      {
        "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.24092555999756,
        "positionY": 118.75035759735107
      },
      {
        "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.21459850282962,
        "positionY": 118.75664928244586
      },
      {
        "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.22176451502621,
        "positionY": 118.75520774508638
      }
    ]
  }
}

 src/api/request.js

@@ -1,5 +1,5 @@
import $http from '@utils/axios'

// import axios from 'axios'
// // 固废接口
// export const requestSolidWaste = (url, data = {}) => {
//   return $http.post('./static/SolidWaste.json', data)
@@ -7,3 +7,22 @@
export const requestSolidWaste = (url) => {
  return $http.get('./static/SolidWaste.json')
}
export const FlueGas = (url) => {
  return $http.get('./static/airQuality.json')
}
// export function FlueGas () {
//   return axios.post('http://10.246.162.140:8080/EPInterface/DataService/EPMapService.asmx/ObtainningConInfo', {
//     companyId: 3900100145,
//     id: '',
//     monType: 2,
//     userCode: 'wenchun.deng',
//     monDuration: '',
//     epName: '',
//     secdDeptId: '',
//     contrLevel: '',
//     dataStatus: '',
//     dataFlag: '',
//     runStatus: '',
//     emissTypeId: ''
//   })
// }

 src/components/flueGas/GasComponents/GasECharts.vue

New file
@@ -0,0 +1,107 @@
<template>
  <div id="echarts" style="width:300px;height:222px" ref="main"></div>
</template>

<script>
export default {
  name: 'GasECharts',
  methods: {
    drawChart: function () {
      const myChart = this.$echarts.init(this.$refs.main)
      const option = {
        title: {
          text: '折线图堆叠'
        },
        // color: '#fff',
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
            textStyle: {
              color: '#7edae8' // 坐标的字体颜色
            }
          },
          axisLine: {
            show: false, // 隐藏坐标轴
            lineStyle: {
              color: '#00eeff' // 坐标轴的颜色
            }
          }
        },
        yAxis: [{
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#7edae8' // 坐标的字体颜色
            }
          },
          axisLine: {
            show: false, // 隐藏坐标轴
            lineStyle: {
              color: '#00eeff' // 坐标轴的颜色
            }
          }
        }],
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
      myChart.setOption(option)
    }
  },
  mounted () {
    this.drawChart()
  }
}
</script>

<style scoped lang="less">

</style>

 src/components/flueGas/GasComponents/GasTable.vue

New file
@@ -0,0 +1,46 @@
<template>
  <el-row>
    <el-row>
      <el-col :span="8">监测点名称:{{name}}</el-col>
      <el-col :span="8">生产单位:{{ DeptSname }}</el-col>
      <el-col :span="8">排放类型加载:{{EmissTypeName}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="8">排放去向:{{EmissTypeDirectName}}</el-col>
      <el-col :span="8">控制级别名称:{{ContrLevelShowName}}</el-col>
      <el-col :span="8">内/外排口:{{OrOutPortName}}</el-col>
    </el-row>
  </el-row>
</template>

<script>
export default {
  name: 'GasTable',
  props: ['displayContent'],
  data () {
    return {
      name: '聚酯热媒炉03烟气排放口',
      DeptSname: '大芳烃装置',
      EmissTypeName: '废气',
      EmissTypeDirectName: '大气',
      ContrLevelShowName: '市控',
      OrOutPortName: '外排'
    }
  }
}
</script>

<style scoped lang="less">
.el-row {
  color: #00d0f9;
  .el-col{
    width: 240px;
    height: 28px;
    background-color: #243a55;
    border-radius: 0.05rem;
    margin: 5px;
    text-align: center;
    line-height: 28px;
  }
}
</style>

 src/components/flueGas/GasComponents/GasVideo.vue

New file
@@ -0,0 +1,24 @@
<template>
<div>
<!--  <video>-->
    <video width="100%" height="100%" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
<!--      您的浏览器不支持 HTML5 video 标签。-->
    </video>
<!--    <span class="ico ico-sound" :class="{ active: isMute }" v-on:click="closeSoundClick()"></span>-->
<!--    <span class="ico ico-skip"></span>-->
<!--    <span class="ico ico-video" :class="{ hide: isPlay }" v-on:click="playClick()"></span>-->
<!--  </video>-->
</div>
</template>

<script>
export default {
  name: 'GasVideo'
}
</script>

<style scoped>

</style>

 src/components/flueGas/flueGas.js

New file
@@ -0,0 +1,176 @@
import { FlueGas } from '@/api/request'
import defaultImg from '@components/flueGas/green_airquality_2.png'
import Setting from '@components/flueGas/green_airquality_3.png'
// 图片

class AddGasHelper {
  constructor (options) {
    this.map = options.map
    this.L = window.L
    this.FlueGasLayerGroup = this.L.layerGroup().addTo(this.map)
    this.FlueGasPopup = null
    this.L.sgis = this.L.sgis || this.L
    this.FlueGasMarkersLabels = []
    this.pulseHeighLightMarker = null
  }

  // 获取数据
  requestData () {
    FlueGas().then(res => {
      console.log(res)
      this.DrawFlueGasContent(res.Result.DataInfo)
    }).catch(err => {
      console.log(err)
    })
  }

  // 根据获取数据 画出 内容
  DrawFlueGasContent (data) {
    // 图标样式扩展
    var FlueGasIcon = this.PlueGasIcon()

    // //加载数据前如果存在图层组 那么清除掉
    if (this.FlueGasLayerGroup) {
      this.FlueGasLayerGroup.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
      var determineValueTwo = data[i].StorageQty
      const positionArea = [positionX, positionY]

      // 图标展示
      var iconUrl = this.PlueGasIconUrl(determineValueOne, determineValueTwo, positionArea)
      var Icon = new FlueGasIcon({ iconUrl: iconUrl })
      // var url = Icon.options.iconUrl

      const marker = this.L.marker([positionX, positionY], { icon: Icon })
      // const latlngs = positionArea[2]
      // // 线
      // var polyline = this.L.polyline(latlngs, { color: 'red' }).addTo(this.map)
      // console.log(polyline)
      marker.bindPopup(() => {
        return this.FlueGasPopup.$el
      }, {
        className: 's-map-popup',
        minWidth: 1548,
        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.FlueGasPopup.setDate(data[i])
        } catch (error) {
          console.log(error)
        }
      })
      // 设置内容添加到图层
      this.FlueGasLayerGroup.addLayer(marker)
      // }
    }
  }

  // 点击进行的 内容的设置
  SetPlueGasContent (config, containerPopup) {
    this.FlueGasPopup = containerPopup
  }

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

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

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

  PulseCountSetting () {
    var HeightLightTime = 5
    var PulseNumber = 5
    const pulseinterver = setInterval(() => {
      if (PulseNumber > 0) {
        PulseNumber--
      } else {
        this.pulseClear(pulseinterver)
        PulseNumber = HeightLightTime
      }
    }, 1000)
  }

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

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

export default AddGasHelper

 src/components/flueGas/green_airquality_2.png

 src/components/flueGas/green_airquality_3.png

 src/components/flueGas/popup-gas.vue

New file
@@ -0,0 +1,54 @@
<template>
  <div v-if="!isShow" class="popupGas">
    <el-row>
      <el-col :span="12">
        <el-row>
          <gas-table :displayContent="displayContent"></gas-table>
        </el-row>
        <el-row>
          <gas-e-charts></gas-e-charts>
        </el-row>
      </el-col>
      <el-col :span="12">
        <gas-video></gas-video>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import GasTable from '@components/flueGas/GasComponents/GasTable'
import GasECharts from '@components/flueGas/GasComponents/GasECharts'
import GasVideo from '@components/flueGas/GasComponents/GasVideo'

export default {
  name: 'popup-gas',
  components: {
    GasTable,
    GasECharts,
    GasVideo
  },
  data: function () {
    return {
      isShow: false,
      displayContent: []
    }
  },
  methods: {
    setDate (data) {
      console.log(data)
      this.displayContent = data
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .popupGas {
  color: #fff;

  .leaflet-popup-content-wrapper {
    width: 100% !important;
  }
}
</style>

 src/main.js

@@ -21,6 +21,7 @@
Vue.use(ElementUI)
Vue.prototype.$cancels = []
Vue.prototype.L = L
Vue.prototype.$echarts = echarts // 挂载echarts
// 注册指令7
// registerDirectives(Vue)


 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="AddGasHelper" class="flue-gas">废气</el-button>
    <popup-gas ref="FlueGas"></popup-gas>
  </div>
</template>

@@ -39,7 +41,9 @@
import SolidContent from '@components/BaseNav/SolidContent'
// 底图业务js逻辑
import AddSolidWasteHelper from '@components/BaseNav/SolidWaste'

// 废气
import AddGasHelper from '@components/flueGas/flueGas'
import PopupGas from '@/components/flueGas/popup-gas'
export default {
  name: 'MapTemplate',
  components: {
@@ -54,7 +58,8 @@
    LcServiceLayer,
    Popup,
    summarySheets,
    SolidContent
    SolidContent,
    PopupGas
  },
  data () {
    return {
@@ -71,19 +76,24 @@
      return this.$store.state.map.config
    }
  },
  // created () {
  //   this.FlueGas()
  // },
  beforeMount () {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    AddGasHelper () {
      const AddGas = new AddGasHelper({ map: this.map })
      AddGas.requestData()
      AddGas.SetPlueGasContent(this.config, this.$refs.FlueGas)
    },
    ChangeState () {
      const AddSolidWaste = new AddSolidWasteHelper({ map: this.map })
      AddSolidWaste.requestData()
      AddSolidWaste.SetSolidWasteContent(this.config, this.$refs.SolidWastePopup)
    },
    isShowHidden () {
      this.isShowBtn = !this.isShowBtn
    },
    saveMapStatus () {
      window.serviceLayerHelper = this.serviceLayerHelper
@@ -110,6 +120,7 @@
      this.vectorLayerHelper.initVectorLayers(this.config)

      // this.ChangeState()
      // this.AddGasHelper()

      this.saveMapStatus()
      // this.setMapObj(this.mapObj)
@@ -158,7 +169,12 @@
</script>

<style lang="less">

.flue-gas {
  position:fixed;
  top: 88px;
  left: 180px;
  z-index: 500;
}
.solid-waste {
  position: absolute;
  top: 88px;