Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

zhangshuaibao

2021-03-29 7b4d8a5ee0cae50a5f473e3765ba84f28fe8ba4b

Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop


 Conflicts:

	src/Sgis.js

	src/api/request.js

	src/components/BaseNav/SolidWaste/SolidWaste.js

	src/components/plugin/MagicMarker.js

	src/views/MapTemplate.vue

 package.json

@@ -28,6 +28,7 @@
    "leaflet.markercluster": "^1.4.1",
    "lodash": "^4.17.10",
    "nprogress": "^0.2.0",
    "qs": "^6.10.1",
    "rbush": "^3.0.1",
    "screenfull": "^3.3.3",
    "style-resources-loader": "^1.4.1",

 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/Sgis.js

@@ -16,7 +16,7 @@
import './components/plugin/Editable' // 标绘操作
import './components/plugin/MagicMarker' // 动画Marker
import './assets/css/map/magic.min.css' // 动画Marker css
// import './assets/css/map/leaflet.magicMarker.css' // 动画marker
import '@/components/plugin/magicMarker.css'
import '@components/plugin/pulse/Pulse' // marker 外圈波
import '@components/plugin/pulse/Pulse.css' // marker 外圈波 css


 src/api/request.js

@@ -1,11 +1,21 @@
import $http from '@utils/axios'
import Qs from 'qs'
// import axios from 'axios'

// // 固废接口
export const requestSolidWaste = (url) => {
  return $http.get('./static/SolidWaste.json')
export const QueryStoragePlaceListByCompanyAndName = (data = {}) => {
  return $http.post('/EPInterface/DataService/EPMapService.asmx/QueryStoragePlaceListByCompanyAndName', Qs.stringify(data), {
    headers: {
      'Content-Type': 'application/json'
}

// 废水接口
export const requestWasteWater = (url) => {
  return $http.get('./static/WasteWater.json')
  })
}
// export const FlueGas = (url) => {
//   return $http.get('./static/airQuality.json')
// }
export function FlueGas (data = {}) {
  return $http.post('EPInterface/DataService/EPMapService.asmx/ObtainningConInfo', Qs.stringify(data), {
    headers: {
      'Content-Type': 'application/json'
    }
  })
}

 src/components/BaseNav/PublicBounced/PublicBounced.vue

New file
@@ -0,0 +1,69 @@
<template>
  <div class="public-bounced" v-show="flag">
    <div class="public-bounced-title">
      <span>{{ displayContent.Name }}</span>
      <i class="el-icon-circle-close" @click="closePopup"></i>
    </div>
    <div class="public-bounced-content">
      <span>内容</span>
    </div>
  </div>
</template>

<script>

export default {
  name: 'PublicBounced',
  data () {
    return {
      displayContent: [],
      flag: false
    }
  },
  methods: {
    setData (data) {
      this.displayContent = data
      this.flag = true
    },
    closePopup () {
      this.flag = false
    }
  }
}
</script>

<style lang="less" scoped>
.public-bounced {
  width: 80%;
  height: 450px;
  z-index: 999;
  position: absolute;
  top: 25%;
  left: 10%;
  background-color: #002432;
  margin: 1% auto;
  border: 1px #a5bfd8 solid;

  .public-bounced-title {
    width: 100%;
    border: 1px #a4c0d8 solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;

    span {
      color: #f4f7ff;
      margin: 0 15px;
      font-size: 14px;
    }

    i {
      color: white;
      margin: 0 15px;
      font-size: 22px;
    }
  }

}
</style>

 src/components/BaseNav/SolidWaste/Popup.vue

New file
@@ -0,0 +1,111 @@
<template>
  <div class="box" @click.stop="clo_box">
    <div class="popup_content">
      <div class="popup_title">{{ this.title }}</div>
      <div class="popup_center">
        <div v-if="this.content_text">{{ this.content_text }}</div>
        <slot></slot>
      </div>
      <div class="popup_bottom">
        <button @click="popup_sub">确定{{ displayContent.Name }}</button>
        <button @click="popup_clo">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SolidContent',
  data () {
    return {
      displayContent: []
    }
  },
  props: {
    title: {
      type: String,
      default: '默认标题'
    },
    content_text: {
      type: String,
      default: ''
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 点击确定事件
    popup_sub () {
      this.$emit('popup_sub')
    },
    // 点击了取消事件
    popup_clo () {
      this.$emit('popup_clo')
    },
    // 点击了弹出框以外区域
    clo_box (e) {
      if (e.target._prevClass === 'box') {
        this.$emit('clo_box')
      }
    }
  }
}
</script>

<style scoped>
.box {
  width: 80%;
  z-index: 999;
  position: absolute;
  top: 50%;
  left: 25%;
  background-color: rgba(128, 128, 128, 0.507);
}

.popup_content {
  background-color: white;
  padding: 1%;
  border-radius: 20px;
  width: 40%;
  margin: 10% auto;
}

.popup_title {
  text-align: center;
  font-weight: 600;
  font-size: 30px;
}

.popup_center {
  padding: 10%;
  font-size: 20px;
}

.popup_bottom {
  display: flex;
  justify-content: space-around;
}

button {
  width: 25%;
  height: 20%;
  padding: 2%;
  border: 1px solid gray;
  border-radius: 10px;
}

button:nth-child(1) {
  background-color: orangered;
  color: white;
  font-size: 20px;
}

button:nth-child(2) {
  background-color: gray;
  color: black;
  font-size: 20px;
}
</style>

 src/components/BaseNav/SolidWaste/SolidContent.vue

@@ -1,53 +1,82 @@
<template>
  <div class="solid-content">
    <div class="content-left">
      <span>{{ displayContent.StoragePlaceName }}</span>
    </div>
    <div class="content-right">
      <SolidWasteTable :displayContent="displayContent"></SolidWasteTable>
  <div class="public-bounced" v-show="flag">
    <div class="popup_title">{{ displayContent.Name }}</div>
    <div class="popup_bottom">
      <button @click="closePopup">确定</button>
      <button @click="closePopup">取消</button>
    </div>
  </div>
</template>

<script>

import SolidWasteTable from '@components/BaseNav/SolidWaste/SolidWasteTable'
import '@/components/BaseNav/SolidWaste/directive'

export default {
  name: 'SolidContent',
  components: { SolidWasteTable },
  data () {
    return {
      displayContent: []
      displayContent: [],
      flag: false
    }
  },
  methods: {
    setDate (data) {
      // console.log(data)
    setData (data) {
      this.displayContent = data
      this.flag = true
    },
    closePopup () {
      this.flag = false
    }
  }
}
</script>

<style lang="less" scoped>
span {
  font-size: 22px;
  color: red;
<style scoped>
.public-bounced {
  width: 80%;
  z-index: 499;
  position: absolute;
  top: 15%;
  left: 10%;
  background-color: rgba(128, 128, 128, 0.507);
  padding: 1%;
  border-radius: 20px;
  margin: 10% auto;
}

.solid-content {
  width: 100%;
.popup_title {
  text-align: center;
  font-weight: 600;
  font-size: 30px;
}

.popup_center {
  padding: 10%;
  font-size: 20px;
}

.popup_bottom {
  display: flex;
  align-items: center;
  justify-content: space-around;

  .content-left {
    width: 35%;
  }

  .content-right {
    width: 60%;
button {
  width: 25%;
  height: 20%;
  padding: 2%;
  border: 1px solid gray;
  border-radius: 10px;
  }

button:nth-child(1) {
  background-color: orangered;
  color: white;
  font-size: 20px;
}

button:nth-child(2) {
  background-color: gray;
  color: black;
  font-size: 20px;
}
</style>

 src/components/BaseNav/SolidWaste/SolidWaste.js

@@ -1,4 +1,4 @@
import { requestSolidWaste } from '@/api/request'
import { QueryStoragePlaceListByCompanyAndName } from '@/api/request'
// 展示图片
import defaultImg from '@assets/images/map-pages/basenav/solidwaste/voc.png'
import Setting from '@assets/images/map-pages/basenav/solidwaste/gf_green.png'
@@ -16,8 +16,8 @@
  }

  // 请求数据 data 为参数， 请求后台数据时 携带data参数
  requestData () {
    requestSolidWaste().then(res => {
  requestData (data) {
    QueryStoragePlaceListByCompanyAndName(data).then(res => {
      // console.log(res)
      this.DrawTheSolidWasteContent(res.Result.DataInfo)
    }).catch(err => {
@@ -28,7 +28,7 @@
  // 根据获取数据 画出 内容
  DrawTheSolidWasteContent (data) {
    // 图标样式扩展
    const SolidWasteIcon = this.SolidWasteIcon()
    var SolidWasteIcon = this.SolidWasteIcon()

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

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

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

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

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

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

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

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

 src/components/BaseNav/WireSurface/index.js

New file
@@ -0,0 +1,22 @@
// // 引入用于处理接口数据获取的方法
// import {} from '@src/api/request'
//
// class initWireSurface {
//   constructor (options) {
//     this.map = options.map
//     this.L = window.L
//     this.initWireSurfaceMap = new Map()
//     this.initWireSurfacePopup = this.L.layerGroup().addTo(this.map)
//   }
//
//   // 获取页面线/面数据
//   getDataInitWireSurface () {
//     ().then(res => {
//       console.log(res)
//     }).catch(error => {
//       console.log(error)
//     })
//   }
// }
//
// export default initWireSurface

 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 (data) {
    FlueGas(data).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].Latitude
      const positionY = data[i].Longitude

      // 判断 经纬度位置信息是否存在
      // 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].porltName, {
        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) {
    // // 区分直接执行 和判断执行的不同区别
    let 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/conf/MapConfig.js

@@ -2,6 +2,7 @@
import TDT from './TDT'
import { LayerSewersLine, LayerSewersPoint } from './LayerSewers'
import { LayerWasteWater } from './LayerWasteWater'

const curWwwPath = window.document.location.href
const pathname = window.document.location.pathname
const pos = curWwwPath.indexOf(pathname)
@@ -22,7 +23,7 @@
  minZoom: 3,
  maxZoom: 18,
  // center: [26, 104],
  center: [32.224016189575195, 118.77070426940918],
  center: [38.828558921813965, 117.41676807403564],
  zoom: 14,
  worldCopyJump: true,
  inertia: true,
@@ -38,7 +39,10 @@
  // defaultBasemapCode: 'tianditu_img', // 默认显示 地图类型
  IntranetBaseMaps: TDT.intranet,
  InternetBaseMaps: TDT.internet,
  Layers: { LayerSewersLine: [LayerSewersLine, LayerWasteWater], layerSewersPoint: LayerSewersPoint } // 污雨水图层配置
  Layers: {
    LayerSewersLine: [LayerSewersLine, LayerWasteWater],
    layerSewersPoint: LayerSewersPoint
  } // 污雨水图层配置
}

/**

 src/main.js

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

// 注册echarts皮肤

 src/utils/axios.js

@@ -83,7 +83,8 @@

// 创建axios实例
const Service = axios.create({
  timeout: 1000
  timeout: 5000,
  baseURL: 'http://10.246.162.140:8080/'
})

const CancelToken = axios.CancelToken

 src/views/MapTemplate.vue

@@ -20,6 +20,10 @@
    <SolidContent ref="SolidWastePopup"></SolidContent>
    <el-button type="primary" @click="ChangeWaterState" class="Waste-water">废水</el-button>
    <WasteWaterContent ref="WasteWaterPopup"></WasteWaterContent>
<!--    <SolidContent ref="SolidWastePopup"></SolidContent>-->
    <el-button type="primary" @click="AddGasHelper" class="flue-gas">废气</el-button>
    <popup-gas ref="FlueGas"></popup-gas>
    <PublicBounced ref="PublicBounced"></PublicBounced>
  </div>
</template>

@@ -44,6 +48,12 @@
import AddSolidWasteHelper from '@components/BaseNav/SolidWaste/SolidWaste'
import AddWasteWaterHelper from '@components/BaseNav/WasteWater/WasteWater'

// import SolidContent from '@components/SolidWaste/SolidContent'
// 废气
import AddGasHelper from '@components/flueGas/flueGas'
import PopupGas from '@/components/flueGas/popup-gas'
// // 公共展示数据
import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
export default {
  name: 'MapTemplate',
  components: {
@@ -60,10 +70,14 @@
    summarySheets,
    SolidContent,
    WasteWaterContent
    // SolidContent,
    PopupGas,
    PublicBounced
  },
  data () {
    return {
      show: true,
      // isShowBtn: false,
      map: null,
      lcServiceLayerVisible: false,
      basemapHelper: {},
@@ -82,7 +96,33 @@
    })
  },
  methods: {
    AddGasHelper () {
      const data = {
        companyId: 3900100145,
        id: '',
        monType: 2,
        userCode: 'wenchun.deng',
        monDuration: '',
        epName: '',
        secdDeptId: '',
        contrLevel: '',
        dataStatus: '',
        dataFlag: '',
        runStatus: '',
        emissTypeId: ''
      }
      const AddGas = new AddGasHelper({ map: this.map })
      AddGas.requestData(data)
      AddGas.SetPlueGasContent(this.config, this.$refs.PublicBounced)
    },
    ChangeState () {
      const data = {
        companyId: 3900100145,
        userCode: 'wenchun.deng',
        name: '',
        marginWarr: '',
        longDayWarr: ''
      }
      const AddSolidWaste = new AddSolidWasteHelper({ map: this.map })
      AddSolidWaste.requestData()
      AddSolidWaste.SetSolidWasteContent(this.config, this.$refs.SolidWastePopup)
@@ -93,6 +133,8 @@
        AddWasteWater.requestData()
        AddWasteWater.SetWasteWaterContent(this.config, this.$refs.WasteWaterPopup)
      }
      AddSolidWaste.requestData(data)
      AddSolidWaste.SetSolidWasteContent(this.config, this.$refs.PublicBounced)
    },
    // isShowHidden () {
    //   this.isShowBtn = !this.isShowBtn
@@ -121,6 +163,8 @@
      this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 初始化动态要素图层助手
      this.vectorLayerHelper.initVectorLayers(this.config)

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

@@ -171,7 +215,12 @@
</script>

<style lang="less">

.flue-gas {
  position:fixed;
  top: 88px;
  left: 180px;
  z-index: 500;
}
.solid-waste {
  position: absolute;
  top: 88px;
@@ -182,7 +231,7 @@
.Waste-water {
  position: absolute;
  top: 88px;
  left: 180px;
  left: 380px;
  z-index: 999;
}


 vue.config.js

@@ -27,7 +27,7 @@
  devServer: {
    // host: 'localhost',
    // open: true,
    port: 8888,
    port: 8080,
    // overlay: false,
    overlay: {
      warnings: true,