Merge remote-tracking branch 'origin/develop' into develop

徐旺旺

2021-03-29 6ab6b11a0ba0bc20c099b9f7b73e9d03fe7d5b8e

Merge remote-tracking branch 'origin/develop' into develop

 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

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

export const QueryStoragePlaceListByCompanyAndName = (data = {}) => {
  return $http.post('/EPInterface/DataService/EPMapService.asmx/QueryStoragePlaceListByCompanyAndName', Qs.stringify(data), {
@@ -9,10 +8,14 @@
    }
  })
}
// export const FlueGas = (url) => {
//   return $http.get('./static/airQuality.json')
// }
export function FlueGas (data = {}) {
export const FlueGas = (data = {}) => {
  return $http.post('/EPInterface/DataService/EPMapService.asmx/ObtainningConInfo', Qs.stringify(data), {
    headers: {
      'Content-Type': 'application/json'
    }
  })
}
export function requestWasteWater (data = {}) {
  return $http.post('EPInterface/DataService/EPMapService.asmx/ObtainningConInfo', Qs.stringify(data), {
    headers: {
      'Content-Type': 'application/json'

 src/assets/css/map/leaflet.magicMarker.css

New file
@@ -0,0 +1,13 @@
.magicDiv{
    height: 0;
    width: 0;
}
.magicIcon{
    position:relative;
    top:-5px;
    left:-16px;
}
.leaflet-div-icon{
    background: transparent;
    border:none;
}

 src/assets/images/map-pages/basenav/Waste-water/fs_blue.png

 src/assets/images/map-pages/basenav/Waste-water/fs_bright_green.png

 src/assets/images/map-pages/basenav/Waste-water/fs_gray.png

 src/assets/images/map-pages/basenav/Waste-water/fs_green.png

 src/assets/images/map-pages/basenav/Waste-water/fs_green_xc.png

 src/assets/images/map-pages/basenav/Waste-water/fs_orange.png

 src/assets/images/map-pages/basenav/Waste-water/fs_red.png

 src/assets/images/map-pages/basenav/Waste-water/fs_yellow.png

 src/assets/images/map-pages/basenav/flugas/green_airquality_2.png

 src/assets/images/map-pages/basenav/flugas/green_airquality_3.png

 src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue

 src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue

New file
@@ -0,0 +1,97 @@
<template>
  <!-- 框 -->
  <div class="win">
    <!-- 四个角的边框效果 -->
    <div class="border_corner border_corner_left_top"></div>
    <div class="border_corner border_corner_right_top"></div>
    <div class="border_corner border_corner_left_bottom"></div>
    <div class="border_corner border_corner_right_bottom"></div>
    <div class="main">
      <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>
    </div>
  </div>
</template>

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

<style scoped lang="less">

.win {
  position: relative;
  display: inline-block;
  //border: 1px solid #396d83;
}
.main {
  width: 100%;
  height: 100%;
}
.border_corner{
  z-index: 2500;
  position: absolute;
  width: 14px;
  height: 14px;
  background: rgba(0,0,0,0);
  border: 2px solid #47d5ea;
}
.border_corner_left_top{
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}
.border_corner_right_top{
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}
.border_corner_left_bottom{
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: 4px;
}
.border_corner_right_bottom{
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}
.el-row {
  color: #00d0f9;
  .el-col{
    width: 200px;
    height: 28px;
    background-color: #243a55;;
    text-align: center;
    line-height: 28px;
  }
}
</style>

 src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue

New file
@@ -0,0 +1,20 @@
<template>
<div>
  <el-tabs v-model="activeName">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</div>
</template>

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

<style scoped>

</style>

 src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue

New file
@@ -0,0 +1,70 @@
<template>
  <div class="win">
    <!-- 四个角的边框效果 -->
    <div class="border_corner border_corner_left_top"></div>
    <div class="border_corner border_corner_right_top"></div>
    <div class="border_corner border_corner_left_bottom"></div>
    <div class="border_corner border_corner_right_bottom"></div>
    <div class="main">
      <div>
        <video width="100%" height="100%" controls>
          <source src="movie.mp4" type="video/mp4">
          <source src="movie.ogg" type="video/ogg">
        </video>
      </div>
    </div>
  </div>
</template>

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

<style scoped>
.win {
  width: 100%;
  /*height: 100%;*/
  position: relative;
  display: inline-block;
//border: 1px solid #396d83;
}
.main {
  width: 100%;
  height: 100%;
}
.border_corner{
  z-index: 2500;
  position: absolute;
  width: 14px;
  height: 14px;
  background: rgba(0,0,0,0);
  border: 2px solid #47d5ea;
}
.border_corner_left_top{
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}
.border_corner_right_top{
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}
.border_corner_left_bottom{
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: 4px;
}
.border_corner_right_bottom{
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}
</style>

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -1,28 +1,43 @@
<template>
  <div class="public-bounced" v-show="flag">
  <div class="public-bounced" v-draw 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>-->
      <popup-gas></popup-gas>
      <div class="public-bounced-content-left">
        <GasTable></GasTable>
        <GasECharts></GasECharts>
<!--        <GasTabs></GasTabs>-->
      </div>
      <div class="public-bounced-content-right">
        <GasVideo></GasVideo>
      </div>
    </div>
  </div>
</template>

<script>
import PopupGas from '@components/flueGas/popup-gas'

import '@/components/BaseNav/SolidWaste/directive'
import GasTable from '@components/BaseNav/PublicBounced/GasComponents/GasTable'
import GasECharts from '@components/BaseNav/PublicBounced/GasComponents/GasECharts'
import GasVideo from '@components/BaseNav/PublicBounced/GasComponents/GasVideo'
// import GasTabs from '@components/BaseNav/PublicBounced/GasComponents/GasTabs'

export default {
  name: 'PublicBounced',
  components: {
    // GasTabs,
    GasTable,
    GasECharts,
    GasVideo
  },
  data () {
    return {
      displayContent: [],
      flag: false
    }
  },
  components: {
    PopupGas
  },
  methods: {
    setData (data) {
@@ -46,7 +61,7 @@
  left: 10%;
  background-color: #002432;
  margin: 1% auto;
  border: 1px #a5bfd8 solid;
  border: 1px #9fc5c8 solid;

  .public-bounced-title {
    width: 100%;
@@ -69,5 +84,23 @@
    }
  }

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

    .public-bounced-content-left {
      width: 48%;
      height: 400px;
    }

    .public-bounced-content-right {
      width: 48%;
      height: 400px;
    }
  }

}
</style>

 src/components/BaseNav/SolidWaste/directive.js

@@ -2,9 +2,9 @@

// 自定义元素实现弹框拖拽[重点]
Vue.directive('draw', {
  inserted: function (el, binding, vNode) {
    el.setAttribute('style', 'position: fixed; z-index: 9999')
  },
  // inserted: function (el, binding, vNode) {
  //   el.setAttribute('style', 'position: fixed; z-index: 9999')
  // },
  bind: function (el, bindding, vNode) {
    el.setAttribute('draggable', true)
    let left, top, width, height

 src/components/BaseNav/WasteWater/WasteWater.js

New file
@@ -0,0 +1,177 @@
import { requestWasteWater } from '@/api/request'
// 展示图片
import defaultImg from '@assets/images/map-pages/basenav/Waste-water/fs_green.png'
import Setting from '@assets/images/map-pages/basenav/Waste-water/fs_yellow.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 (data) {
    requestWasteWater(data).then(res => {
      console.log(res)
      this.DrawWasteWaterContent(res.Result.DataInfo)
      // console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }

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

    // //加载数据前如果存在图层组 那么清除掉
    if (this.WasteWaterLayerGroup) {
      this.WasteWaterLayerGroup.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
      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.magic([positionX, positionY], { icon: Icon, magic: 'vanishIn' })

      marker.bindPopup(() => {
        return this.WasteWaterPopup.$el
      }, {
        className: 's-map-popup',
        minWidth: 1000,
        closeButton: true,
        autoClose: false
      })
      // 划过出现 展示数据
      marker.bindTooltip(data[i].Name, {
        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])
          return this.WasteWaterPopup.$el
        } 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/WasteWater/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/WasteWater/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/WasteWater/WasteWaterTable.vue

New file
@@ -0,0 +1,69 @@
<template>
  <el-tabs>
    <el-tab-pane :label="displayContent.StoragePlaceName" name="" class="ShowTable">
      <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/components/BaseNav/WasteWater/directive.js

New file
@@ -0,0 +1,132 @@
import Vue from 'vue'

// 自定义元素实现弹框拖拽[重点]
Vue.directive('draw', {
  inserted: function (el, binding, vNode) {
    el.setAttribute('style', 'position: fixed; z-index: 9999')
  },
  bind: function (el, bindding, vNode) {
    el.setAttribute('draggable', true)
    let left, top, width, height
    el._dragstart = function (event) {
      event.stopPropagation()
      left = event.clientX - el.offsetLeft
      top = event.clientY - el.offsetTop
      width = el.offsetWidth
      height = el.offsetHeight
    }
    el._checkPosition = function () { // 防止被拖出边界
      const width = el.offsetWidth
      const height = el.offsetHeight
      let left = Math.min(el.offsetLeft, document.body.clientWidth - width)
      left = Math.max(0, left)
      let top = Math.min(el.offsetTop, document.body.clientHeight - height)
      top = Math.max(0, top)
      el.style.left = left + 'px'
      el.style.top = top + 'px'
      el.style.width = width + 'px'
      el.style.height = height + 'px'
    }
    el._dragEnd = function (event) {
      event.stopPropagation()
      left = event.clientX - left
      top = event.clientY - top
      el.style.left = left + 'px'
      el.style.top = top + 'px'
      el.style.width = width + 'px'
      el.style.height = height + 'px'
      el._checkPosition()
    }
    el._documentAllowDraop = function (event) {
      event.preventDefault()
    }
    document.body.addEventListener('dragover', el._documentAllowDraop)
    el.addEventListener('dragstart', el._dragstart)
    el.addEventListener('dragend', el._dragEnd)
    window.addEventListener('resize', el._checkPosition)
  },

  unbind: function (el, bindding, vNode) {
    document.body.removeEventListener('dragover', el._documentAllowDraop)
    el.removeEventListener('dragstart', el._dragstart)
    el.removeEventListener('dragend', el._dragEnd)
    window.removeEventListener('resize', el._checkPosition)
    delete el._documentAllowDraop
    delete el._dragstart
    delete el._dragEnd
    delete el._checkPosition
  }
})

// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
  bind (el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cursor = 'move'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      // 获取到的值带px 正则匹配替换
      let styL, styT

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes('%')) {
        styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100)
        styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100)
      } else {
        styL = +sty.left.replace(/px/g, '')
        styT = +sty.top.replace(/px/g, '')
      }

      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX
        const t = e.clientY - disY

        // 移动当前元素
        dragDom.style.left = `${l + styL}px`
        dragDom.style.top = `${t + styT}px`

        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      }

      document.onmouseup = function (e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

// v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive('dialogDragWidth', {
  bind (el, binding, vnode, oldVnode) {
    const dragDom = binding.value.$el.querySelector('.el-dialog')

    el.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - el.offsetLeft

      document.onmousemove = function (e) {
        e.preventDefault() // 移动时禁用默认事件

        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX
        dragDom.style.width = `${l}px`
      }

      document.onmouseup = function (e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

 src/components/BaseNav/flueGas/flueGas.js

File was renamed from src/components/flueGas/flueGas.js
@@ -1,6 +1,6 @@
import { FlueGas } from '@/api/request'
import defaultImg from '@components/flueGas/green_airquality_2.png'
import Setting from '@components/flueGas/green_airquality_3.png'
import defaultImg from '@assets/images/map-pages/basenav/flugas/green_airquality_2.png'
import Setting from '@assets/images/map-pages/basenav/flugas/green_airquality_3.png'
// 图片

class AddGasHelper {
@@ -73,9 +73,10 @@
      // 点击 事件
      marker.on('click', (e) => {
        try {
          console.log(e)
          // console.log(e)
          this.EffectOfPulse(e.target.getLatLng())
          this.FlueGasPopup.setData(data[i])
          // this.FlueGasPopup.setData(data[i])
          return this.FlueGasPopup.$el
        } catch (error) {
          console.log(error)
@@ -117,7 +118,7 @@
  // 脉冲效果设置实现
  EffectOfPulse (position, markers, layerGroup) {
    // // 区分直接执行 和判断执行的不同区别
    let differentColor = ''
    var differentColor = ''
    if (markers) {
      differentColor = '#ff0000'
    } else {

 src/components/flueGas/GasComponents/GasTable.vue

File was deleted

 src/components/flueGas/GasComponents/GasVideo.vue

File was deleted

 src/components/flueGas/popup-gas.vue

File was deleted

 src/components/plugin/MagicMarker.js

@@ -1,27 +1,45 @@
/* eslint-disable */
!(function (i) {
  var c = function (i, c) {
    for (var n in c) i[n] = c[n]
    return i
(function (window) {
  console.log(window)
  const setOptions = function (obj, options) {
    for (const i in options) {
      obj[i] = options[i]
    }
    return obj
  }
  L.Icon.Magic = function (i) {
    if (i.iconUrl) {
      var n = { html: '<div class=\'magicDiv\'><div class=\'magictime ' + i.magic + '\'>' + i.html + '<img id=\'migic\' src=\'' + i.iconUrl + '\'/></div></div>' }
  L.Icon.Magic = function (options) {
    let opts
    // console.log(options)
    if (options.iconUrl) {
      opts = {
        html: '<div class=\'magicDiv\'><div class=\'magictime ' + options.magic + '\'>' + options.html + '</div></div>'
        // className: 'magicDiv',L
      }
    } else {
      var n = { html: '<div class=\'magicDiv\'><div class=\'magictime ' + i.magic + '\'>' + i.html + '</div></div>' }
      opts = {
        html: '<div class=\'magicDiv\'><div class=\'magictime ' + options.magic + '\'><img id=\'migic\' src=\'' + options.icon.options.iconUrl + '\'/></div></div>'
        // className: 'magicDiv',
      }
    }
    delete i.html
    var a = c(n, i)
    console.log(a)
    var r = L.divIcon(a)
    return r
  }, L.icon.magic = function (i) {
    return new L.Icon.Magic(i)
  }, L.Marker.Magic = L.Marker.extend({
    initialize: function (i, c) {
      c.icon = L.icon.magic(c), L.Marker.prototype.initialize.call(this, i, c)
    }
  }), L.marker.magic = function (i, c) {
    return new L.Marker.Magic(i, c)
    delete options.html
    const magicIconOpts = setOptions(opts, options)
    // console.log(magicIconOpts)
    const magicIcon = L.divIcon(magicIconOpts)
    return magicIcon
  }
}(window))

  L.icon.magic = function (options) {
    return new L.Icon.Magic(options)
  }

  L.Marker.Magic = L.Marker.extend({
    initialize: function (latlng, options) {
      options.icon = L.icon.magic(options)
      L.Marker.prototype.initialize.call(this, latlng, options)
    }
  })

  L.marker.magic = function (latlng, options) {
    return new L.Marker.Magic(latlng, options)
  }
})(window)

 src/conf/MapConfig.js

@@ -61,9 +61,27 @@
  }
}

/**
 *
 */
// const MagicMaker = {
//   Current: 'vanishIn',
//   ARRAY: [
//     'twisterInDown', 'twisterInUp', 'swap',
//     'puffIn', 'vanishIn',
//     'openDownLeftReturn', 'openDownRightReturn', 'openUpLeftReturn', 'openUpRightReturn',
//     'perspectiveDownReturn', 'perspectiveUpReturn', 'perspectiveLeftReturn', 'perspectiveRightReturn',
//     'slideDownReturn', 'slideUpReturn', 'slideLeftReturn', 'slideRightReturn',
//     'swashIn', 'foolishIn',
//     'tinRightIn', 'tinLeftIn', 'tinUpIn', 'tinDownIn',
//     'boingInUp',
//     'spaclInUp', 'spaceInRight', 'spaceInDown', 'spaceInLeft']
// }

export default {
  mapOptions,
  mapConfig,
  TokenConfig,
  BLUEMAP_HOST
  // MagicMaker
}

 src/img/fs_yellow.7fe82c5d.png

 src/views/MapTemplate.vue

@@ -17,6 +17,7 @@
    <enterprise></enterprise>
    <!--    <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>
    <el-button type="primary" @click="ChangeWaterState" class="Waste-water">废水</el-button>
    <el-button type="primary" @click="AddGasHelper" class="flue-gas">废气</el-button>
    <PublicBounced ref="PublicBounced"></PublicBounced>
  </div>
@@ -39,9 +40,8 @@
import Enterprise from '../components/table/enterprise'
// 底图业务js逻辑
import AddSolidWasteHelper from '@components/BaseNav/SolidWaste/SolidWaste'
// import SolidContent from '@components/SolidWaste/SolidContent'
// 废气
import AddGasHelper from '@components/flueGas/flueGas'
import AddWasteWaterHelper from '@components/BaseNav/WasteWater/WasteWater'
import AddGasHelper from '@components/BaseNav/flueGas/flueGas'
// import PopupGas from '@/components/flueGas/popup-gas'
// // 公共展示数据
import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
@@ -116,6 +116,28 @@
      AddSolidWaste.requestData(data)
      AddSolidWaste.SetSolidWasteContent(this.config, this.$refs.PublicBounced)
    },
    ChangeWaterState () {
      const data = {
        companyId: 3900100145,
        id: '',
        monType: 1,
        userCode: 'wenchun.deng',
        monDuration: '',
        epName: '',
        secdDeptId: '',
        contrLevel: '',
        dataStatus: '',
        dataFlag: '',
        runStatus: '',
        emissTypeId: ''
      }
      const AddWasteWater = new AddWasteWaterHelper({ map: this.map })
      AddWasteWater.requestData(data)
      AddWasteWater.SetWasteWaterContent(this.config, this.$refs.PublicBounced)
    },
    // isShowHidden () {
    //   this.isShowBtn = !this.isShowBtn
    // },
    saveMapStatus () {
      window.serviceLayerHelper = this.serviceLayerHelper
      this.$store.commit('setMapObj', this.map)
@@ -147,6 +169,7 @@

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

      this.saveMapStatus()
      // this.setMapObj(this.mapObj)
@@ -196,15 +219,23 @@

<style lang="less">
.flue-gas {
  position:fixed;
  position: fixed;
  top: 88px;
  left: 180px;
  z-index: 500;
}

.solid-waste {
  position: absolute;
  top: 88px;
  left: 88px;
  z-index: 999;
}

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

@@ -237,5 +268,16 @@
  .leaflet-custom-icon {
    background: white;
  }

  .leaflet-marker-icon {
    background: none;
  }

  #migic {
    width: 48px;
    height: 48px;
    margin: -18px -20px;
    z-index: 999;
  }
}
</style>