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

zhangshuaibao

2021-03-25 8a4c97660ea09d838af36fd4ed99b6a2b70f0f74

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


 Conflicts:

	src/views/MapTemplate.vue

 public/static/SolidWaste.json

New file
@@ -0,0 +1,81 @@
{
  "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.22118377685547,
        "positionY": 118.78057479858398
      },
      {
        "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.23122596740723,
        "positionY": 118.7743091583252
      },
      {
        "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.222299575805664,
        "positionY": 118.74950408935547
      },
      {
        "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.23092555999756,
        "positionY": 118.75735759735107
      }
    ]
  }
}

 src/Sgis.js

@@ -1,22 +1,28 @@
import BasemapHelper from '@components/helpers/BasemapHelper'
import VectorLayerHelper from '@components/helpers/VectorLayerHelper'
// 初始化显示
import ServiceLayerHelper from '@components/helpers/ServiceLayerHelper'

import '@components/plugin/PathDrag'
// import MagicMarker from '@components/plugin/MagicMarker'
// import WmtsSupport from '@components/plugin/wmts_plugins'
import MapConfig from '@/conf/MapConfig'
import '@components/plugin/PathDashFlow' // 流动线图
// import CanvasMarkers from '@components/plugin/CanvasMarkers'
// import FullScreen from '@components/plugin/FullScreen'
import DownLoad from '@components/plugin/DownLoad'
// 测量
import '@components/plugin/leaflet-measure-path/leaflet-measure-path'

import 'leaflet.markercluster'
// import 'leaflet-canvas-markers'
import './components/plugin/Leaflet.GridLayer.FadeOut' // 瓦片图层切换淡入淡出
import './components/plugin/leaflet-canvas-markers' // 画布marker
import './components/plugin/Editable' // 标绘操作
import './components/plugin/MagicMarker' // 动画Marker
import './assets/css/map/magic.min.css' // 动画Marker css
import './components/BaseNav/Pulse'
import './components/BaseNav/Pulse.css'

// import WmtsSupport from '@components/plugin/wmts_plugins'
// import CanvasMarkers from '@components/plugin/CanvasMarkers'
// import FullScreen from '@components/plugin/FullScreen'
// import 'leaflet-canvas-markers'

let map = null
const L = window.L
@@ -35,8 +41,8 @@
  // 全屏
  // FullScreen.init(L)
  // 下载
  DownLoad.init(L)
  // LeafletMeasurePath.init(L)
  DownLoad.init(L)

  map = L.map(div, MapConfig.mapOptions)

@@ -46,7 +52,11 @@

  window.map = map
  window.L = L

  // L.sgis = L.sgis || L

  initTileLayersHelper(map)

  return map
}

@@ -68,7 +78,6 @@
  var serviceLayerHelper = new ServiceLayerHelper({ map })
  return serviceLayerHelper
}

/**
 * 矢量地图初始化
 * @param map

 src/api/request.js

New file
@@ -0,0 +1,9 @@
import $http from '@utils/axios'

// // 固废接口
// export const requestSolidWaste = (url, data = {}) => {
//   return $http.post('./static/SolidWaste.json', data)
// }
export const requestSolidWaste = (url) => {
  return $http.get('./static/SolidWaste.json')
}

 src/assets/airQuality.json

New file
@@ -0,0 +1,10 @@
{"type":"FeatureCollection", "features": [
  {"type":"Feature","geometry":{"type":"Point","coordinates":["38.8381779195697","117.410229850655"]},"properties":{"name":"水务站","ID":2,"cameraIds":"12010254001310000010","online":"8ae64ac4638cbf3e016439d4a6ad0006","addr":"位于公司西北厂界水务部化工厂院内","desc":"","dept":"水务部"}},
  {"type":"Feature","geometry":{"type":"Point","coordinates":["38.82248319987435","117.43366062641144"]},"properties":{"name":"烯烃北站","ID":3,"cameraIds":"12010254001310000015","online":"8ae64ac4638cbf3e016439dc12490009","addr":"位于烯烃部北厂界","desc":"","dept":"烯烃部"}},
  {"type":"Feature","geometry":{"type":"Point","coordinates":["38.84116530418396","117.42481470108032"]},"properties":{"name":"物装站","ID":4,"cameraIds":"12010254001310000012","online":"8ae64ac4638cbf3e016439d45f5a0005","addr":"位于公司东北厂界物装部正门外","desc":"","dept":"物装部"}},
  {"type":"Feature","geometry":{"type":"Point","coordinates":["38.80886547541369","117.42767179031944"]},"properties":{"name":"烯烃南站","ID":5,"cameraIds":"12010254001310000011","online":"8ae64ac4638cbf3e016439d560ea0008","addr":"位于烯烃部南厂界","desc":"","dept":"烯烃部"}},
  {"type":"Feature","geometry":{"type":"Point","coordinates":["38.8332098722457","117.447918949615"]},"properties":{"name":"生活区站","ID":6,"cameraIds":"12010254001310000013","online":"8ae64ac4638cbf3e016439dd4963000a","addr":"位于公司培训中心院内","desc":"","dept":"生活区"}},
  {"type":"Feature","geometry":{"type":"Point","coordinates":["38.8314127922058","117.427905955039"]},"properties":{"name":"安环站","ID":7,"cameraIds":"12010254001310000014","online":"8ae64ac4638cbf3e016439de9875000c","addr":"位于公司东厂界原培训中心院内","desc":"","dept":"安全环保部"}},
  {"type":"Feature","geometry":{"type":"Point","coordinates":["38.82397315436005","117.39679098129272"]},"properties":{"name":"炼油站","ID":8,"cameraIds":"12010254001310000009","online":"8ae64ac4638cbf3e016439de2af2000b","addr":"位于公司西南厂界炼油部西南侧","desc":"","dept":"炼油部"}},
  {"type":"Feature","geometry":{"type":"Point","coordinates":["38.82355982342607","117.421976923697"]},"properties":{"name":"热电站","ID":9,"cameraIds":"12010254001310000016","online":"8ae64ac4638cbf3e016439d4f1080007","addr":"位于公司东南厂界热电部北门","desc":"","dept":"热电部"}}
]}

 src/components/BaseNav/Pulse.css

New file
@@ -0,0 +1,34 @@
.leaflet-pulsing-icon {
    border-radius: 100%;
    box-shadow: 1px 1px 8px 0 rgba(0,0,0,0.75);
}

.leaflet-pulsing-icon:after {
    content: "";
    border-radius: 100%;
    height: 300%;
    width: 300%;
    position: absolute;
    margin: -100% 0 0 -100%;

}

@keyframes pulsate {
    0% {
        transform: scale(0.1, 0.1);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
    50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }
    100% {
        transform: scale(1.2, 1.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
}

 src/components/BaseNav/Pulse.js

New file
@@ -0,0 +1,77 @@
/* eslint-disable */
(function (window) {

  L.Icon.Pulse = L.DivIcon.extend({

    options: {
      className: '',
      iconSize: [12, 12],
      fillColor: 'red',
      color: 'red',
      animate: true,
      heartbeat: 1,
    },

    initialize: function (options) {
      L.setOptions(this, options)

      // css

      var uniqueClassName = 'lpi-' + new Date().getTime() + '-' + Math.round(Math.random() * 100000)

      var before = ['background-color: ' + this.options.fillColor]
      var after = [

        'box-shadow: 0 0 6px 2px ' + this.options.color,

        'animation: pulsate ' + this.options.heartbeat + 's ease-out',
        'animation-iteration-count: infinite',
        'animation-delay: ' + (this.options.heartbeat + .1) + 's',
      ]

      if (!this.options.animate) {
        after.push('animation: none')
        after.push('box-shadow:none')
      }

      var css = [
        '.' + uniqueClassName + '{' + before.join(';') + ';}',
        '.' + uniqueClassName + ':after{' + after.join(';') + ';}',
      ].join('')

      var el = document.createElement('style')
      if (el.styleSheet) {
        el.styleSheet.cssText = css
      } else {
        el.appendChild(document.createTextNode(css))
      }

      document.getElementsByTagName('head')[0].appendChild(el)

      // apply css class

      this.options.className = this.options.className + ' leaflet-pulsing-icon ' + uniqueClassName

      // initialize icon

      L.DivIcon.prototype.initialize.call(this, options)

    }
  })

  L.icon.pulse = function (options) {
    return new L.Icon.Pulse(options)
  }

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

  L.marker.pulse = function (latlng, options) {
    return new L.Marker.Pulse(latlng, options)
  }

})(window)

 src/components/BaseNav/SolidContent.vue

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

<script>

import SolidWasteTable from '@components/BaseNav/SolidWasteTable'

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

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

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

  .content-left {
    width: 35%;
  }

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

 src/components/BaseNav/SolidWaste.js

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

// 底图业务展示点
class AddSolidWasteHelper {
  constructor (options) {
    this.map = options.map
    this.L = window.L
    this.SolidWasteLayerGroup = this.L.layerGroup().addTo(this.map)
    this.SolidWastePopup = null
    this.L.sgis = this.L.sgis || this.L
    this.solidWasteMarkersLabels = []
    this.pulseHeighLightMarker = null
  }

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

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

    // //加载数据前如果存在图层组 那么清除掉
    if (this.SolidWasteLayerGroup) {
      this.SolidWasteLayerGroup.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.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, {
        permanent: true,
        offset: [0, -16],
        direction: 'top',
        className: ''
      })
      // 点击 事件
      marker.on('click', (e) => {
        try {
          // console.log(e)
          this.EffectOfPulse(e.target.getLatLng())
          this.SolidWastePopup.setDate(data[i])
        } catch (error) {
          console.log(error)
        }
      })
      // 设置内容添加到图层
      this.SolidWasteLayerGroup.addLayer(marker)
      // }
    }
  }

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

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

  // 根据类型返回图片加载url
  SolidWasteIconUrl (determineValueOne, determineValueTwo, position) {
    var EffectOfChange
    if (determineValueOne === 1 || determineValueTwo === 1) {
      EffectOfChange = defaultImg
      this.EffectOfPulse(position, this.solidWasteMarkersLabels, this.SolidWasteLayerGroup)
    } 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.SolidWasteLayerGroup)
      this.PulseCountSetting()
    }
  }

  // 对图标脉冲 进行set设置  // 高亮图层
  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.SolidWasteLayerGroup) {
      // this.SolidWasteLayerGroup.clearLayers()
    } else {
      this.SolidWasteLayerGroup = this.L.layerGroup().addTo(this.map)
    }
    if ((this.pulseHeighLightMarker)) {
      this.pulseHeighLightMarker.remove()
    }
  }
}

export default AddSolidWasteHelper

 src/components/BaseNav/SolidWasteExtend.js

New file
@@ -0,0 +1,363 @@
// /* -------------------------------------------------------------------------------------------------------------------------- */
// import { requestSolidWaste } from '@/api/request'
//
// /* -------------------------------------------------------------------------------------------------------------------------- */
// import '@components/BaseNav/style.css'
//
// /* -------------------------------------------------------------------------------------------------------------------------- */
// // 展示图片
// import defaultImg from '@components/BaseNav/magicMarker.png'
// import Setting from '@components/BaseNav/voc.png'
//
// /* -------------------------------------------------------------------------------------------------------------------------- */
//
// // 底图业务展示点
// class AddSolidWasteHelper {
//   /* -------------------------------------------------------------------------------------------------------------------------- */
//   constructor (options) {
//     this.map = options.map
//     this.L = window.L
//     this.SolidWasteLayerGroup = this.L.layerGroup().addTo(this.map)
//     this.SolidWastePopup = null
//     this.L.sgis = this.L.sgis || this.L
//     this.solidWasteMarkersLabels = []
//     this.pulseHeighLightMarker = null
//   }
//
//   /* -------------------------------------------------------------------------------------------------------------------------- */
//
//   // 请求数据 data 为参数， 请求后台数据时 携带data参数
//   requestData () {
//     requestSolidWaste().then(res => {
//       // console.log(res)
//       this.DrawTheSolidWasteContent(res.Result.DataInfo)
//     }).catch(err => {
//       console.log(err)
//     })
//   }
//
//   /* -------------------------------------------------------------------------------------------------------------------------- */
//
//   // 根据获取数据 画出 内容
//   DrawTheSolidWasteContent (data) {
//     // 图标样式扩展
//     var SolidWasteIcon = this.SolidWasteIcon()
//
//     // //加载数据前如果存在图层组 那么清除掉
//     if (this.SolidWasteLayerGroup) {
//       this.SolidWasteLayerGroup.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.SolidWasteIconUrl(determineValueOne, determineValueTwo, positionArea)
//         var Icon = new SolidWasteIcon({ iconUrl: iconUrl })
//         // var url = Icon.options.iconUrl
//
//         // 弹出框div内容
//         // var storevoinfo=null,storevodelinfo=[];
//         // for(var j=0;j<storevo.length;j++){
//         //   if(itm.StoragePlaceId==storevo[j].StoragePlaceId){
//         //     storevoinfo=storevo[j];
//         //   }
//         // }
//         // for(var k=0;k<storedel.length;k++){
//         //   if(itm.StoragePlaceId==storedel[k].StoragePlaceId){
//         //     storevodelinfo.push(storedel[k]);
//         //   }
//         // }
//         const content = this.solidWastePpopupContent(data[i], 'c', 'z')
//         // console.log(content)
//
//         const marker = this.L.marker([positionX, positionY], { icon: Icon })
//
//         marker.bindPopup(content, () => {
//           return this.SolidWastePopup.$el
//         }, {
//           className: 's-map-popup',
//           minWidth: 200,
//           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.SolidWastePopup.SetDisplayContent(content)
//             this.EffectOfPulse(e.target.getLatLng())
//           } catch (error) {
//             console.log(error)
//           }
//         })
//         marker.on('popupopen', (e) => {
//           try {
//             this.solidWastePpopupContent(content)
//           } catch (e) {
//             console.log(e)
//           }
//         })
//         // 设置内容添加到图层
//         // this.solidWasteMarkersLabels.push(marker)
//         this.SolidWasteLayerGroup.addLayer(marker)
//       }
//     }
//   }
//
//   /* -------------------------------------------------------------------------------------------------------------------------- */
//
//   // 固废点击进行的 内容的设置
//   SetSolidWasteContent (config, containerPopup) {
//     this.SolidWastePopup = containerPopup
//   }
//
//   /* -------------------------------------------------------------------------------------------------------------------------- */
//
//   // 图标样式扩展 => 光圈 图标脉冲
//   SolidWasteIcon () {
//     return this.L.Icon.extend({
//       options: {
//         iconSize: [40, 40],
//         iconAnchor: [20, 20]
//       }
//     })
//   }
//
//   /* -------------------------------------------------------------------------------------------------------------------------- */
//
//   // 根据类型返回图片加载url
//   SolidWasteIconUrl (determineValueOne, determineValueTwo, position) {
//     var EffectOfChange
//     if (determineValueOne === 1 || determineValueTwo === 1) {
//       EffectOfChange = defaultImg
//       this.EffectOfPulse(position, 'SolidWaste', this.solidWasteMarkersLabels, this.SolidWasteLayerGroup)
//     } else {
//       EffectOfChange = Setting
//     }
//     return EffectOfChange
//   }
//
//   /* -------------------------------------------------------------------------------------------------------------------------- */
//
//   // 脉冲效果设置实现
//   EffectOfPulse (position, name, 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: [25, 25],
//       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.SolidWasteLayerGroup)
//       this.PulseCountSetting()
//     }
//   }
//
//   /* -------------------------------------------------------------------------------------------------------------------------- */
//
//   // 对图标脉冲 进行set设置  // 高亮图层
//   PulseCountSetting () {
//     var HeightLightTime = 1
//     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.SolidWasteLayerGroup) {
//       // this.SolidWasteLayerGroup.clearLayers()
//     } else {
//       this.SolidWasteLayerGroup = this.L.layerGroup().addTo(this.map)
//     }
//     if ((this.pulseHeighLightMarker)) {
//       this.pulseHeighLightMarker.remove()
//     }
//   }
//
//   /* -------------------------------------------------------------------------------------------------------------------------- */
//
//   // 点击业务内容 弹出数据的数据进行修改
//   solidWastePpopupContent (data) {
//     console.log(data)
//     const html = data.StoragePlaceName
//     return html
//   }
//
//   /* -------------------------------------------------------------------------------------------------------------------------- */
// }
//
// export default AddSolidWasteHelper

// <template>
//   <div class="full-screen">
//     <div id="map" ref="rootmap"></div>
//     <el-button type="primary" @click="ChangeState">固废</el-button>
//   <SolidContent ref="SolidWastePopup" @callPopup="callPopup"></SolidContent>
// </div>
// </template>
//
// <script>
//   import 'leaflet/dist/leaflet.css'
//   import Sgis from '@/Sgis'
//
//   // 底图业务js逻辑
//   import AddSolidWasteHelper from '@components/BaseNav/SolidWaste'
//
//   // 底图绑定 点击 弹出的数据
//   import SolidContent from '@components/BaseNav/SolidContent'
//
//   export default {
//   name: 'HomePage',
//   components: {
//   SolidContent
// },
//   data () {
//   return {
//   map: null,
//   lcServiceLayerVisible: false,
//   basemapHelper: {},
//   serviceLayerHelper: {},
//   vectorLayerHelper: {}
// }
// },
//   computed: {
//   config () {
//   return this.$store.state.map.config
// },
//   SolidWasteConfig () {
//   return this.$store.state.map.SolidWasteConfig
// }
// },
//   beforeMount () {
//   this.$nextTick(() => {
//   this.init()
// })
// },
//   methods: {
//   init () {
//   const mapcontainer = this.$refs.rootmap
//   this.map = Sgis.initMap(mapcontainer)
//
//   this.basemapHelper = Sgis.initBasemapsHelper(this.map) // 初始化基础底图助手
//   this.basemapHelper.initBasemap(this.config, false) // 第二个参数，表示是否内网底图
//
//   this.ChangeState()
// },
//   ChangeState () {
//   // 请求数据 携带参数 data
//   // const data = {
//   //   // companyId: 3900100145,
//   //   // companyCode: 31800000,
//   //   // monDuration: 4
//   // }
//   // 引入业务逻辑 js
//   const AddSolidWaste = new AddSolidWasteHelper({ map: this.map })
//   // 业务逻辑js 的请求数据 // 并且传递图片 用于创建点的 icon
//   AddSolidWaste.requestData()
//   // // 点击 设置 弹出内容事件 de 设置 console.log(this.$refs.popup.$el)
//   // AddSolidWaste.SetSolidWasteContent(this.SolidWasteConfig, this.$refs.SolidWastePopup)
// },
//   callPopup (val) {
//   console.log(val)
// },
//   displayDefault () {
//   // this.serviceLayerHelper = Sgis.initTileLayersHelper(this.map) // 初始化业务底图助手
//   // this.serviceLayerHelper.initServiceLayers(this.config, this.$refs.popup)
//
//   // this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 初始化动态要素图层助手
//   // this.vectorLayerHelper.initVectorLayers(this.config)
// }
// }
// }
// </script>
//
// <style lang="less">
//
//   .leaflet-div-icon {
//   background: none;
//   border: none;
// }
//
//   .full-screen {
//   width: 100%;
//   height: 100%;
//   margin: 0;
//   padding: 0;
//   position: absolute;
//
//   button {
//   position: absolute;
//   top: 88px;
//   left: 88px;
//   z-index: 999;
// }
//
//   #map {
//   height: 100%;
//   width: 100%;
// }
//
//   .barline {
//   //width: 100%;
//   //height: 1px;
//   //background-color: #0661AE;
//   border-top: 1px solid #0661AE;
// }
//
//   #map-btn {
//   position: fixed;
//   top: 20px;
//   left: 100px;
//   z-index: 9999;
// }
//
//   .leaflet-custom-icon {
//   background: white;
// }
// }
// </style>

 src/components/BaseNav/SolidWasteTable.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: 'SolidWasteTable',
  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/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/magicMarker.png

 src/components/BaseNav/style.css

New file
@@ -0,0 +1,4 @@
.s-map-popup {
    background: red;
    height: 100px;
}

 src/components/BaseNav/voc.png

 src/utils/axios.js

@@ -117,10 +117,10 @@
// request拦截器
Service.interceptors.request.use(
  config => {
  // 临时追加
  //   if ($store.state.user.account) {
  //     config.headers.account = $store.state.user.account
  //   }
    // 临时追加
    //   if ($store.state.user.account) {
    //     config.headers.account = $store.state.user.account
    //   }
    const copyConfig = Object.assign({}, config)
    // copyConfig = filterOauthData(copyConfig)
    // showDebugInfo(copyConfig)
@@ -139,13 +139,14 @@
// respone拦截器
Service.interceptors.response.use(
  response => {
    const res = response.data
    if (Number(res.code) !== 200 && Number(res.code) !== 0) {
      $T.warning(res.message)
      return Promise.reject(res.message)
    } else {
      return res
    }
    // const res = response.data
    // if (Number(res.code) !== 200 && Number(res.code) !== 0) {
    //   $T.warning(res.message)
    //   return Promise.reject(res.message)
    // } else {
    //   return res
    // }
    return response.data
  },
  error => {
    if (error.message && error.message.includes('timeout')) {

 src/views/MapTemplate.vue

@@ -11,11 +11,13 @@
    <monitor-panel></monitor-panel>
    <!--        <top-enterprise-panel></top-enterprise-panel>-->
    <tool-box-panel ref="toolBox"></tool-box-panel>
<!--    <menu-special></menu-special>-->
    <!--    <menu-special></menu-special>-->
    <legend-panel></legend-panel>
    <summary-sheets></summary-sheets>
    <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 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>
  </div>
</template>

@@ -34,6 +36,9 @@
// import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'
import Enterprise from '../components/table/enterprise'
import SolidContent from '@components/BaseNav/SolidContent'
// 底图业务js逻辑
import AddSolidWasteHelper from '@components/BaseNav/SolidWaste'

export default {
  name: 'MapTemplate',
@@ -48,7 +53,8 @@
    LcBasemap,
    LcServiceLayer,
    Popup,
    summarySheets
    summarySheets,
    SolidContent
  },
  data () {
    return {
@@ -71,6 +77,11 @@
    })
  },
  methods: {
    ChangeState () {
      const AddSolidWaste = new AddSolidWasteHelper({ map: this.map })
      AddSolidWaste.requestData()
      AddSolidWaste.SetSolidWasteContent(this.config, this.$refs.SolidWastePopup)
    },
    isShowHidden () {
      this.isShowBtn = !this.isShowBtn
    },
@@ -97,6 +108,8 @@

      this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 初始化动态要素图层助手
      this.vectorLayerHelper.initVectorLayers(this.config)

      // this.ChangeState()

      this.saveMapStatus()
      // this.setMapObj(this.mapObj)
@@ -146,6 +159,13 @@

<style lang="less">

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

.full-screen {
  width: 100%;
  height: 100%;
@@ -164,13 +184,15 @@
    //background-color: #0661AE;
    border-top: 1px solid #0661AE;
  }

  #map-btn {
    position: fixed;
    top: 20px;
    left: 100px;
    z-index: 9999;
  }
  .leaflet-custom-icon{

  .leaflet-custom-icon {
    background: white;
  }
}