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

chenyibo

2021-03-30 9185072c775eaf1cd3df53d06bc81dc5bfc8264b

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


 Conflicts:

	src/main.js

	src/utils/axios.js

 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/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
      }
    ]
  }
}

 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
      }
    ]
  }
}

 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

@@ -1,22 +1,24 @@
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/plugin/magicMarker.css'
import '@components/plugin/pulse/Pulse' // marker 外圈波
import '@components/plugin/pulse/Pulse.css' // marker 外圈波 css

let map = null
const L = window.L
@@ -24,19 +26,7 @@
  if (map != null) {
    map.remove()
  }

  // Leaflet扩展代码
  // Editable.init(L) // 图层编辑
  // PathDrag.init(L) // 路径拖拽
  // MagicMarker.init(L) // 动画Marker
  // WmtsSupport.init(L) // 扩展，使支持WMTS
  // CustomPopup.init(L) // 自定义弹出框
  // CanvasMarkers.init(L)// 画布图层
  // 全屏
  // FullScreen.init(L)
  // 下载
  DownLoad.init(L)
  // LeafletMeasurePath.init(L)

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

@@ -46,7 +36,9 @@

  window.map = map
  window.L = L

  initTileLayersHelper(map)

  return map
}

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

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

 src/api/request.js

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

export const QueryStoragePlaceListByCompanyAndName = (data = {}) => {
  return $http.post('/EPInterface/DataService/EPMapService.asmx/QueryStoragePlaceListByCompanyAndName', Qs.stringify(data), {
    headers: {
      'Content-Type': 'application/json'
    }
  })
}
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/assets/images/map-pages/basenav/solidwaste/gf_green.png

 src/assets/images/map-pages/basenav/solidwaste/voc.png

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

New file
@@ -0,0 +1,164 @@
<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 class="main-echarts">
        <div id="echarts" style="width:100%;height:100%" ref="main"></div>
      </div>
    </div>
  </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">
.win {
  width: 100%;
  height: 100%;
  position: relative;
  //display: inline-block;
  background-color: rgba(33, 41, 69,0.9);
}
.border_corner{
  z-index: 2500;
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(0,0,0,0);
  border: 1.5px 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_corner_right_bottom{
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}
.main {
  width: 100%;
  height: 100%;
  .main-echarts{
    border: 1px solid #396d83;
  }
}
</style>

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

New file
@@ -0,0 +1,123 @@
<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 class="main-matter">
        <el-row type="flex" class="row-bg row-item-one" justify="space-around">
          <el-col :span="12">监测点名称:{{ displayContent.Name }}</el-col>
          <el-col :span="12">生产单位:{{ displayContent.DeptSname }}</el-col>
          <el-col :span="12">排放类型加载:{{ displayContent.EmissTypeName }}</el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="12">排放去向:{{ displayContent.EmissTypeDirectName }}</el-col>
          <el-col :span="12">控制级别名称:{{ displayContent.ContrLevelShowName }}</el-col>
          <el-col :span="12">内/外排口:{{ displayContent.OrOutPortName }}</el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GasTable',
  props: ['displayContent'],
  data () {
    return {}
  }
}
</script>

<style scoped lang="less">

.win {
  position: relative;
  //display: inline-block;
  margin-bottom: 13px;
  background-color: rgba(33, 41, 69,0.9);
}
.main {
  width: 100%;
  height: 100%;
  .main-matter{
    font-size: 13px;
    padding: 9px 7px;
    font-weight: normal;
    border: 1px solid #396d83;
    .row-item-one{
      margin-bottom: 7px;
    }
    .el-row {
      width: 100%;
      color: #00d0f9;
      display: flex;
      font-size: 12px!important;
      .el-col{
        flex: 1;
        width: 100%;
        background-color: #243a55;;
        text-align: center;
        line-height: 28px;
        margin-left: 6px;
        border-radius: 4px;
        &:nth-child(1){
          margin-left:0;
        }
      }
    }
  }
}
.border_corner{
  z-index: 2500;
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(0,0,0,0);
  border: 1.5px 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_corner_right_bottom{
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}
//.el-row {
//  width: 100%;
//  color: #00d0f9;
//  .el-col{
//    width: 180px;
//    height: 28px;
//    background-color: #243a55;;
//    text-align: center;
//    line-height: 28px;
//    margin-left: 6px;
//    border-radius: 4px;
//    &:nth-child(1){
//      margin-left:0;
//    }
//  }
//}
</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,74 @@
<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 class="main-video">
        <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 lang="less">
.win {
  /*width: 100%;*/
  /*height: 100%;*/
  position: relative;
  //display: inline-block;
  background-color: rgba(33, 41, 69,0.9);
/*//border: 1px solid #396d83;*/
}
.main {
  width: 100%;
  height: 100%;
  .main-video {
    padding: 7px;
    border: 1px solid #396d83;
  }
}
.border_corner{
  z-index: 2500;
  position: absolute;
  width: 14px;
  height: 14px;
  background: rgba(0,0,0,0);
  border: 1.5px 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_corner_right_bottom{
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}
</style>

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

New file
@@ -0,0 +1,53 @@
<template>
  <div class="public-table">
    <table border="1">
      <tr>
        <th>111</th>
        <th>111</th>
        <th>111</th>
        <th>111</th>
        <th>111</th>
        <th>111</th>
      </tr>
      <tr>
        <td>4444444444</td>
        <td>4444444444</td>
        <td>4444444444</td>
        <td>4444444444</td>
        <td>4444444444</td>
        <td>4444444444</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'PublicTable',
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>

<style lang="less" scoped>

</style>

 src/components/BaseNav/PublicBounced/PublicBounced.vue

New file
@@ -0,0 +1,97 @@
<template>
  <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">
      <div class="public-bounced-content-left">
        <GasTab :displayContent="displayContent"></GasTab>
        <PublicTable v-if="value === 'gufei'"></PublicTable>
        <GasECharts v-else></GasECharts>
      </div>
      <div class="public-bounced-content-right">
        <GasVideo></GasVideo>
      </div>
    </div>
  </div>
</template>

<script>

import '@/components/BaseNav/SolidWaste/directive'
import GasTab from '@components/BaseNav/PublicBounced/GasComponents/GasTab'
import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable'
import GasECharts from '@components/BaseNav/PublicBounced/GasComponents/GasECharts'
import GasVideo from '@components/BaseNav/PublicBounced/GasComponents/GasVideo'

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

<style lang="less" scoped>
.public-bounced {
  z-index: 999;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #002432;
  border: 1px #9fc5c8 solid;

  .public-bounced-title {
    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;
    }
  }

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

    .public-bounced-content-left {
    }

    .public-bounced-content-right {
    }
  }

}
</style>

 src/components/BaseNav/SolidWaste/SolidWaste.js

New file
@@ -0,0 +1,182 @@
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'

// 底图业务展示点
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 (data) {
    QueryStoragePlaceListByCompanyAndName(data).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].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.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.bindTooltip(data[i].Name, {
          permanent: true,
          offset: [0, -16],
          direction: 'top',
          className: ''
        })
        // 点击 事件
        marker.on('click', (e) => {
          try {
            // console.log(e)
            // console.log(this.map.getCenter())
            // console.log(this.map.setCenter([e.target.getLatLng().lat, e.target.getLatLng().lng]))
            // this.map.flyTo([e.target.getLatLng().lat, e.target.getLatLng().lng])
            // this.map.panTo([e.target.getLatLng().lat, e.target.getLatLng().lng], 100)
            this.setPanTo(e.target.getLatLng(), 30)
            this.EffectOfPulse(e.target.getLatLng())
            this.SolidWastePopup.setData(data[i], 'gufei')
            return this.SolidWastePopup.$el
          } catch (error) {
            console.log(error)
          }
        })
        // 设置内容添加到图层
        this.SolidWasteLayerGroup.addLayer(marker)
      }
    }
  }

  // panTo
  setPanTo (pos, value) {
    var position = pos
    position = this.map.latLngToLayerPoint(position)
    position.y += value
    position = this.map.layerPointToLatLng(position)
    this.map.setView(position)
    // this.map.flyTo(position)
  }

  // 固废点击进行的 内容的设置
  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((e) => {
      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/SolidWaste/directive.js

New file
@@ -0,0 +1,59 @@
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
  }
})

 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/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/BaseNav/flueGas/flueGas.js

New file
@@ -0,0 +1,178 @@
import { FlueGas } from '@/api/request'
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 {
  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.setData(data[i])
          // this.FlueGasPopup.setData(data[i])
          return this.FlueGasPopup.$el
        } catch (error) {
          console.log(error)
        }
      })
      // 设置内容添加到图层
      this.FlueGasLayerGroup.addLayer(marker)
      // }
    }
  }

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

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

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

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

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

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

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

export default AddGasHelper

 src/components/LayerController/logic/Sample.js

New file
@@ -0,0 +1,9 @@
module.exports = function () {
  this.init = (layer) => {
    console.log('sample init !!!')
  }

  this.clickListener = (list) => {
    console.log('sample clickListener !!!')
  }
}

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -1,134 +1,134 @@
<template>
    <div class="inner-panel">
<!--        <div class="title">-->
<!--            图层控制-->
<!--        </div>-->
<!--        <div class="wms-panel">-->
<!--            <div v-for="item in serviceLayers" :key="item.code" class="layerbox">-->
<!--                <div><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code"-->
<!--                            @change="swAllLayers(item)"/>{{ item.name }} <span @click="swFilter(item)"-->
<!--                                                                               class="btn-filter">过滤</span>-->
<!--                </div>-->
<!--                <div class="layerbox-item">-->
<!--                    <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code"><input type="checkbox"-->
<!--                                                                                                      :name="'wmsSublayers_'+item.code+'_'+itm.code"-->
<!--                                                                                                      :checked="itm.checked"-->
<!--                                                                                                      :value="itm.code"-->
<!--                                                                                                      @change="swWmsLayer(item.url,itm)"/>{{-->
<!--                        itm.name }}-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <lc-service-layer-filter v-if="layerFilterVisible" ref="serviceLayerFilter"></lc-service-layer-filter>-->
        <div class="title">
            图层控制
        </div>
        <div class="wms-panel">
            <div v-for="item in serviceLayers" :key="item.code" class="layerbox">
                <div><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code"
                            @change="swAllLayers(item)"/>{{ item.name }} <span @click="swFilter(item)"
                                                                               class="btn-filter">过滤</span>
                </div>
                <div class="layerbox-item">
                    <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code"><input type="checkbox"
                                                                                                      :name="'wmsSublayers_'+item.code+'_'+itm.code"
                                                                                                      :checked="itm.checked"
                                                                                                      :value="itm.code"
                                                                                                      @change="swWmsLayer(itm)"/>{{
                        itm.name }}
                    </div>
                </div>
            </div>
        </div>
        <lc-service-layer-filter v-if="layerFilterVisible" ref="serviceLayerFilter"></lc-service-layer-filter>
    </div>
</template>

<!--<script>-->
<!--import WfsHelper from '../../helpers/WfsHelper'-->
<!--import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'-->
<!--import AjaxUtils from '../../../utils/AjaxUtils'-->
<script>
import WfsHelper from '../../helpers/WfsHelper'
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
import AjaxUtils from '../../../utils/AjaxUtils'

<!--export default {-->
<!--  name: 'LcServiceLayer',-->
<!--  components: { LcServiceLayerFilter },-->
<!--  data () {-->
<!--    return {-->
<!--      layerFilterVisible: false-->
<!--    }-->
<!--  },-->
<!--  computed: {-->
<!--    serviceLayers () {-->
<!--      return this.$store.state.map.serviceLayers.LayerSewersLine-->
<!--    }-->
<!--  },-->
<!--  mounted () {-->
<!--    // console.log('03步骤：', this.helper)-->
<!--    this.updateServiceLayerList()-->
<!--  },-->
<!--  methods: {-->
<!--    swAllLayers (item) {-->
<!--      // eslint-disable-next-line no-debugger-->
<!--      item.checked = !item.checked-->
<!--      for (let i = 0, len = item.layers.length; i < len; ++i) {-->
<!--        item.layers[i].checked = item.checked-->
<!--      }-->
<!--      this.updateWms()-->
<!--    },-->
<!--    loadWfs () {-->
<!--      var wfsHelper = new WfsHelper()-->
<!--      wfsHelper.addTypeName('管线点')-->
<!--      wfsHelper.addEquals('pipename', '研究院01路YS000001')-->
export default {
  name: 'LcServiceLayer',
  components: { LcServiceLayerFilter },
  data () {
    return {
      layerFilterVisible: false
    }
  },
  computed: {
    serviceLayers () {
      return this.$store.state.map.serviceLayers.LayerSewersLine
    }
  },
  mounted () {
    // console.log('03步骤：', this.helper)
    this.updateServiceLayerList()
  },
  methods: {
    swAllLayers (item) {
      // eslint-disable-next-line no-debugger
      item.checked = !item.checked
      for (let i = 0, len = item.layers.length; i < len; ++i) {
        item.layers[i].checked = item.checked
      }
      this.updateWms()
    },
    loadWfs () {
      var wfsHelper = new WfsHelper()
      wfsHelper.addTypeName('管线点')
      wfsHelper.addEquals('pipename', '研究院01路YS000001')

<!--      AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => {-->
<!--        console.log(res)-->
<!--      })-->
<!--    },-->
<!--    swWmsLayer (url, itm) {-->
<!--      itm.checked = !itm.checked-->
<!--      if (itm.checked) {-->
<!--        window.serviceLayerHelper.loadGeojsonLayer(url, itm)-->
<!--      } else {-->
<!--        window.serviceLayerHelper.removeLayer(itm)-->
<!--      }-->
<!--      // this.updateWms()-->
<!--    },-->
<!--    swFilter (item) {-->
<!--      this.layerFilterVisible = !this.layerFilterVisible-->
<!--    },-->
<!--    updateServiceLayerList () {-->
      AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => {
        console.log(res)
      })
    },
    swWmsLayer (itm) {
      itm.checked = !itm.checked
      if (itm.checked) {
        window.layerFactory.show(itm.code)
      } else {
        window.layerFactory.hide(itm.code)
      }
      // this.updateWms()
    },
    swFilter (item) {
      this.layerFilterVisible = !this.layerFilterVisible
    },
    updateServiceLayerList () {

<!--    },-->
<!--    updateWms () {-->
<!--      var mapConfig = this.mapConfig-->
<!--      var wmsHelper = new WfsHelper()-->
<!--      wmsHelper.initMapConfig(mapConfig)-->
<!--      var wmsLayersMap = wmsHelper.getWmsLayersMap()-->
<!--      for (var k in wmsLayersMap) {-->
<!--        var layers = wmsLayersMap[k]-->
<!--        var tileLayer = window.serviceLayerHelper.getTileLayer(k)-->
<!--        if (tileLayer) {-->
<!--          tileLayer.setParams({ layers: layers.join(',') }, false)-->
<!--          tileLayer.setUrl(tileLayer.config.url, false)-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
    },
    updateWms () {
      var mapConfig = this.mapConfig
      var wmsHelper = new WfsHelper()
      wmsHelper.initMapConfig(mapConfig)
      var wmsLayersMap = wmsHelper.getWmsLayersMap()
      for (var k in wmsLayersMap) {
        var layers = wmsLayersMap[k]
        var tileLayer = window.serviceLayerHelper.getTileLayer(k)
        if (tileLayer) {
          tileLayer.setParams({ layers: layers.join(',') }, false)
          tileLayer.setUrl(tileLayer.config.url, false)
        }
      }
    }
  }
}
</script>

<!--<style scoped lang="less">-->
<!--    .inner-panel {-->
<!--        .title{-->
<!--            color: #ffffff;-->
<!--            font-size: 16px;-->
<!--            font-weight: 600;-->
<!--            margin: 10px;-->
<!--            text-align: center;-->
<!--        }-->
<!--        .btn-filter {-->
<!--            cursor: pointer;-->
<!--            color: #ffffff;-->
<!--        }-->
<style scoped lang="less">
    .inner-panel {
        .title{
            color: #ffffff;
            font-size: 16px;
            font-weight: 600;
            margin: 10px;
            text-align: center;
        }
        .btn-filter {
            cursor: pointer;
            color: #ffffff;
        }

<!--        .wms-panel {-->
<!--            width: 250px;-->
        .wms-panel {
            width: 250px;

<!--            .layerbox {-->
<!--                width: 100%;-->
            .layerbox {
                width: 100%;

<!--                .layerbox-item {-->
<!--                    display: flex;-->
<!--                    flex-flow: row wrap;-->
<!--                    margin-left: 15px;-->
<!--                    margin-top: 5px;-->
                .layerbox-item {
                    display: flex;
                    flex-flow: row wrap;
                    margin-left: 15px;
                    margin-top: 5px;

<!--                    .basemap-layer-item {-->
<!--                        width: 50%;-->
<!--                    }-->
<!--                }-->
<!--            }-->
<!--        }-->
<!--    }-->
                    .basemap-layer-item {
                        width: 50%;
                    }
                }
            }
        }
    }

<!--</style>-->
</style>

 src/components/LayerController/service/BusiLayerService.js

New file
@@ -0,0 +1,32 @@
/**
 * 加载业务数据图层
 */
import { logicMapper } from '@src/conf/Constants'

class BusiLayerService {
  constructor (config) {
    this.L = window.L
    this.map = window.map
    this.config = config
  }

  init (layer) {
    // 引入 关联的js，在constant.js中根据config配置的id得到处理js
    const id = this.config.code
    console.log(logicMapper)
    const file = logicMapper[id]
    if (!file) {
      console.log('找不到逻辑处理js!!!')
    } else {
      console.log('-----' + file)
      var BusiLayer = require('../logic/' + file)
      console.log(BusiLayer)
      var busiLayer = new BusiLayer()
      // 调用init
      busiLayer.init(layer)
      // 调用click事件
    }
  }
}

export default BusiLayerService

 src/components/LayerController/service/LayerFactory.js

New file
@@ -0,0 +1,88 @@
import store from '@/store'
import WfsLayerService from './WfsLayerService'
import BusiLayerService from './BusiLayerService'
import WmsLayerService from './WmsLayerService'
class LayerFactory {
  constructor (options) {
    this.L = options.L
    this.map = window.map
    this.layers = {}
  }

  createLayerGroup () {
    return this.L.layerGroup().addTo(this.map)
  }

  init () {
    // 1. 遍历layer config
    var layerConfig = store.state.map.serviceLayers.LayerSewersLine
    for (var i = 0, l = layerConfig.length; i < l; i++) {
      var config = layerConfig[i]
      var layers = config.layers
      for (var j = 0; j < layers.length; j++) {
        var childConfig = layers[j]
        var code = childConfig.code
        var wfs = childConfig.wfs
        var wms = childConfig.wms
        var url = childConfig.url
        // 判断是否已经加载过，加载过就 忽略掉
        const layer = this.layers[code]
        if (!layer) {
          const newLayer = this.createLayerGroup()
          this.layers[code] = newLayer
          // 2. 判断类型
          if (wfs) {
            // 3. 实例化具体service
            // var busiLayerService = new BusiLayerService()
            // busiLayerService.init()
            var wfsLayerService = new WfsLayerService(childConfig)
            wfsLayerService.init(newLayer)
          }
          if (wms) {
            var wmsLayerService = new WmsLayerService(childConfig)
            wmsLayerService.init(newLayer)
          }
          // 请求业务数据接口
          if (url) {
            var busiLayerService = new BusiLayerService(childConfig)
            busiLayerService.init(newLayer)
          }
        } else {
          this.show(code)
        }
      }
    }
  }

  show (code) {
    var _layer = this.layers[code].addTo(this.map)
    this.setZIndex(_layer)
  }

  hide (code) {
    var layer = this.layers[code]
    layer && this.map.removeLayer(layer)
  }

  toggle (code) {

  }

  /**
   * 设置index,线在最下面，点在上面
   * @param layerGroup 图层组
   */
  setZIndex (layerGroup) {
    var layers = layerGroup.getLayers()
    if (layers.length > 0) {
      var layer = layers[0]
      if (layer.feature && (layer.feature.geometry.type === 'LineString' || layer.feature.geometry.type === 'MultiLineString')) {
        layerGroup.bringToBack()
      } else {
        layerGroup.bringToFront()
      }
    }
  }
}

export default LayerFactory

 src/components/LayerController/service/PopupService.js

 src/components/LayerController/service/WfsLayerService.js

New file
@@ -0,0 +1,119 @@
/**
 * 加载业务数据图层
 */

import styles from '../../../conf/Styles'
import AjaxUtils from '../../../utils/AjaxUtils'

class WfsLayerService {
  constructor (config) {
    this.config = config
    this.params = {
      version: '1.0.0',
      REQUEST: 'getfeature',
      OUTPUTFORMAT: 'json',
      maxFeatures: 20000
    }
    this.popupComp = window.popupComp
    this.L = window.L
    this.map = window.map
    this.regex = /\{(.+?)\}/g // 匹配{}
  }

  init (layer) {
    const wfsUrl = this.config.wfs
    if (wfsUrl) {
      AjaxUtils.get4JsonDataByUrl(wfsUrl, this.params, (res) => this.draw(layer, res.data.features))
    }
  }

  draw (layer, features) {
    const icon = this.config.icon
    const geojson = this.L.geoJSON(features, {
      style: function (feature) {
        return {
          fill: styles.defaultLineStyle.fill,
          weight: styles.defaultLineStyle.weight,
          fillColor: styles.defaultLineStyle.fillColor,
          color: styles.defaultLineStyle.color,
          fillOpacity: styles.defaultLineStyle.fillOpacity,
          opacity: styles.defaultLineStyle.opacity,
          dashArray: styles.defaultLineStyle.dashArray,
          dashSpeed: styles.defaultLineStyle.dashSpeed
        }
      },
      pointToLayer: (geoJsonPoint, latlng) => {
        return this.L.canvasMarker(latlng,
          {
            img: {
              // url: 'assets/images/map/marker-icon.png',
              url: '/assets/images/map/' + icon,
              size: styles.defaultLineStyle.size
            }
          })
      },
      onEachFeature: (feature, layer) => {
        layer.bindPopup((layer) => {
          this.popupComp.setDatas(layer)
          this.popupComp.setShow()
          return this.popupComp.$el
        }, {
          className: 's-map-popup',
          minWidth: 300,
          closeButton: false,
          autoClose: false
        })
          .bindTooltip((layer) => this.tooltipListener(layer), { direction: 'bottom', offset: [0, 15], sticky: true })
          .on('mouseover', (e) => this.mouseOverListener(e, layer)).on('mouseout', (e) => this.mouseOutListener(e, layer))
      }
    }).addTo(layer)
    return geojson
  }

  mouseOverListener (e, layer) {
    const icon = this.config.icon
    const type = e.target.feature.geometry.type
    if (type === 'LineString' || type === 'MultiLineString') {
      layer.setStyle({ weight: 8, color: '#00ffff' })
    } else if (type === 'Point' || type === 'MultiPoint') {
      layer.setStyle({
        img: {
          url: '/assets/images/map/' + icon,
          size: [25, 25]
        }
      })
      layer.bringToFront()
    }
  }

  mouseOutListener (e, layer) {
    const icon = this.config.icon
    const type = e.target.feature.geometry.type
    if (type === 'LineString' || type === 'MultiLineString') {
      layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color })
    }
    if (type === 'Point' || type === 'MultiPoint') {
      layer.setStyle({
        img: {
          url: '/assets/images/map/' + icon,
          size: styles.defaultLineStyle.size
        }
      })
    }
  }

  tooltipListener (layer) {
    const nameId = layer.feature.id
    let name = ''
    if (nameId.indexOf('三通') !== -1 || nameId.indexOf('四通') !== -1 || nameId.indexOf('窨井') !== -1) {
      name = layer.feature.properties.pointnumber
    } else {
      name = layer.feature.properties.name
    }
    if (name === undefined) {
      name = ''
    }
    return name
  }
}
export default WfsLayerService

 src/components/LayerController/service/WmsLayerService.js

New file
@@ -0,0 +1,11 @@
class WfsLayerService {
  constructor (config) {
    this.config = config
  }

  init () {

  }
}

export default WfsLayerService

 src/components/panel/topicSearch/SewersSearch.vue

@@ -101,7 +101,7 @@
</template>

<script>
import { PipelineTypeOptions } from '@/conf/LayerSewers'
import { PipelineTypeOptions } from '@/conf/layers/LayerSewers'

import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'

 src/components/plugin/MagicMarker.js

@@ -1,49 +1,45 @@
const init = (L) => {
  (function (window) {
    console.log(window)
    const setOptions = function (obj, options) {
      for (const i in options) {
        obj[i] = options[i]
/* eslint-disable */
(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 (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
      }
      return obj
    }
    L.Icon.Magic = function (options) {
      let opts
      if (options.iconUrl) {
        opts = {
          html: "<div class='magicDiv'><div class='magictime " + options.magic + "'><img id='migic' src='" + options.iconUrl + "'/></div></div>"
          // className: 'magicDiv',
        }
      } else {
        opts = {
          html: "<div class='magicDiv'><div class='magictime " + options.magic + "'>" + options.html + '</div></div>'
          // className: 'magicDiv',
        }
    } else {
      opts = {
        html: '<div class=\'magicDiv\'><div class=\'magictime ' + options.magic + '\'><img id=\'migic\' src=\'' + options.icon.options.iconUrl + '\'/></div></div>'
        // className: 'magicDiv',
      }
      delete options.html
      const magicIconOpts = setOptions(opts, options)
      // console.log(magicIconOpts)
      const magicIcon = L.divIcon(magicIconOpts)
      return magicIcon
    }
    delete options.html
    const magicIconOpts = setOptions(opts, options)
    // console.log(magicIconOpts)
    const magicIcon = L.divIcon(magicIconOpts)
    return magicIcon
  }

    L.icon.magic = function (options) {
      return new L.Icon.Magic(options)
  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 = 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)
}

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

 src/components/plugin/pulse/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/plugin/pulse/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/conf/Constants.js

@@ -4,6 +4,12 @@
  POLYGON: 'polygon'
}

export const logicMapper = {
  fsqy: 'Sample.js',
  fspfk: 'Sample.js',
  fsjcd: 'Sample.js'
}

export const props = {
  pipename: '管线名称',
  pipecode: '管线编码',

 src/conf/LayerWasteWater.js

File was deleted

 src/conf/Layers.js

File was deleted

 src/conf/MapConfig.js

@@ -1,7 +1,10 @@
import * as L from 'leaflet'
import TDT from './TDT'
import { LayerSewersLine, LayerSewersPoint } from './LayerSewers'
import { LayerWasteWater } from './LayerWasteWater'
import { LayerSewersLine, LayerSewersPoint } from './layers/LayerSewers'
import { LayerWasteWater } from './layers/LayerWasteWater'
import { LayerSolidWaste } from './layers/LayerSolidWaste'
import { LayerWasteGas } from './layers/LayerWasteGas'

const curWwwPath = window.document.location.href
const pathname = window.document.location.pathname
const pos = curWwwPath.indexOf(pathname)
@@ -22,7 +25,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 +41,10 @@
  // defaultBasemapCode: 'tianditu_img', // 默认显示 地图类型
  IntranetBaseMaps: TDT.intranet,
  InternetBaseMaps: TDT.internet,
  Layers: { LayerSewersLine: [LayerSewersLine, LayerWasteWater], layerSewersPoint: LayerSewersPoint } // 污雨水图层配置
  Layers: {
    LayerSewersLine: [LayerSewersLine, LayerWasteWater, LayerWasteGas, LayerSolidWaste],
    layerSewersPoint: LayerSewersPoint
  } // 污雨水图层配置
}

/**
@@ -55,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/conf/layers/LayerSewers.js

File was renamed from src/conf/LayerSewers.js
@@ -1,13 +1,11 @@
const APP_GIS_HOST_2 = 'http://xearth.cn:8088'
const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine/wfs'
// const APP_GIS_HOST_2 = 'http://localhost:3000'
// const APP_GIS_HOST_2 = 'http://192.168.31.226:8088'
export const LayerSewersLine = {
  code: 'pipeline',
  name: '管网数据',
  type: 'geojson',
  // url: APP_GIS_HOST_2 + '/server/ogcserver/PipeLineTest/wms?version=1.1.1',
  // url: APP_GIS_HOST_2 + '/layer/findLayer?layerName={sname}',
  url: APP_GIS_HOST_2 + '/server/ogcserver/PipeLine/wfs?version=1.0.0&TYPENAME={sname}&REQUEST=getfeature&OUTPUTFORMAT=json&maxFeatures=20000',
  checked: true,
  layers: [
    {
@@ -15,7 +13,7 @@
      name: '雨水线',
      sname: '管网', // 表名
      checked: true, // 默认选中状态
      filter: {},
      wfs: WFS_URL + '?TYPENAME=管网',
      minZoom: 10, // 在指定级别显示
      childLayer: 'fsss,hbss' // 关联PointLayers
    },
@@ -24,7 +22,7 @@
      name: '含油污水线',
      sname: '含油污水',
      checked: true, // 默认选中状态
      filter: {},
      wfs: WFS_URL + '?TYPENAME=含油污水',
      minZoom: 10,
      childLayer: 'fsss,hbss' // 关联PointLayers
    },
@@ -33,7 +31,7 @@
      name: '含盐污水线',
      sname: '含盐污水',
      checked: true, // 默认选中状态
      filter: {},
      wfs: WFS_URL + '?TYPENAME=含盐污水',
      minZoom: 10,
      childLayer: 'fsss,hbss' // 关联PointLayers
    },
@@ -42,7 +40,7 @@
      name: '含碱污水线',
      sname: '含碱污水',
      checked: true, // 默认选中状态
      filter: {},
      wfs: WFS_URL + '?TYPENAME=含碱污水',
      minZoom: 10,
      childLayer: 'fsss,hbss' // 关联PointLayers
    },
@@ -51,7 +49,7 @@
      name: '排口',
      sname: '排口',
      checked: true, // 默认选中状态
      filter: {},
      wfs: WFS_URL + '?TYPENAME=排口',
      minZoom: 10,
      childLayer: 'pk' // 关联PointLayers
    },
@@ -60,7 +58,7 @@
      name: '事故水线',
      sname: '事故水',
      checked: true, // 默认选中状态
      filter: {},
      wfs: WFS_URL + '?TYPENAME=事故水',
      minZoom: 10,
      childLayer: 'fsss,hbss' // 关联PointLayers
    },
@@ -69,7 +67,7 @@
      name: '循环水线',
      sname: '循环水',
      checked: true, // 默认选中状态
      filter: {},
      wfs: WFS_URL + '?TYPENAME=循环水',
      minZoom: 10,
      childLayer: 'fsss,hbss' // 关联PointLayers
    },
@@ -78,7 +76,7 @@
      name: '净化水线',
      sname: '净化水',
      checked: true, // 默认选中状态
      filter: {},
      wfs: WFS_URL + '?TYPENAME=净化水',
      minZoom: 10,
      childLayer: 'fsss,hbss' // 关联PointLayers
    },
@@ -87,7 +85,7 @@
      name: '生活污水',
      sname: '生活污水',
      checked: true, // 默认选中状态
      filter: {},
      wfs: WFS_URL + '?TYPENAME=生活污水',
      minZoom: 10,
      childLayer: 'fsss,hbss' // 关联PointLayers
    },

 src/conf/layers/LayerSolidWaste.js

New file
@@ -0,0 +1,27 @@
/**
 * 固废图层
 * @type {string}
 */
export const LayerSolidWaste = {
  code: 'solidWaste',
  name: '固废',
  checked: true,
  layers: [
    {
      code: 'solidWasteQy',
      name: '企业',
      sname: '企业', // 表名
      checked: true, // 默认选中状态
      url: 'http://www.baidu.com', // 请求业务数据接口
      minZoom: 10 // 在指定级别显示
    },
    {
      code: 'solidWasteJcd',
      name: '监测点',
      sname: '监测点',
      checked: true, // 默认选中状态
      url: 'http://www.baidu2.com',
      minZoom: 10
    }
  ]
}

 src/conf/layers/LayerWasteGas.js

New file
@@ -0,0 +1,51 @@
/**
 * 废气图层
 * @type {string}
 */
export const LayerWasteGas = {
  code: 'wasteGas',
  name: '废气',
  checked: true,
  layers: [
    {
      code: 'wasteGasQy',
      name: '企业',
      sname: '企业', // 表名
      checked: true, // 默认选中状态
      url: 'http://www.baidu.com', // 请求业务数据接口
      minZoom: 10 // 在指定级别显示
    },
    {
      code: 'wasteGasJcd',
      name: '监测点',
      sname: '监测点',
      checked: true, // 默认选中状态
      url: 'http://www.baidu2.com',
      minZoom: 10
    },
    {
      code: 'wasteGasVocs',
      name: 'VOCs',
      sname: 'VOCs',
      checked: true, // 默认选中状态
      url: '',
      minZoom: 10
    },
    {
      code: 'wasteGasKrq',
      name: '可燃气',
      sname: '可燃气',
      checked: true, // 默认选中状态
      url: '',
      minZoom: 10
    },
    {
      code: 'wasteGasYhq',
      name: '有害气',
      sname: '有害气',
      checked: true, // 默认选中状态
      url: '',
      minZoom: 10
    }
  ]
}

 src/conf/layers/LayerWasteWater.js

New file
@@ -0,0 +1,37 @@
/**
 * 废水图层
 * @type {string}
 */
export const LayerWasteWater = {
  code: 'pipeline',
  name: '废水',
  checked: true,
  layers: [
    {
      code: 'fsqy',
      name: '企业',
      sname: '企业', // 表名
      checked: true, // 默认选中状态
      url: 'http://www.baidu.com', // 请求业务数据接口
      minZoom: 10 // 在指定级别显示
    },
    {
      code: 'fsjcd',
      name: '监测点',
      sname: '监测点',
      checked: true, // 默认选中状态
      url: 'http://www.baidu2.com',
      minZoom: 10,
      childLayer: 'fsss,hbss' // 关联PointLayers
    },
    {
      code: 'fspfk',
      name: '排放口',
      sname: '排放口',
      checked: true, // 默认选中状态
      url: '',
      minZoom: 10,
      childLayer: 'fsss,hbss' // 关联PointLayers
    }
  ]
}

 src/img/fs_yellow.7fe82c5d.png

 src/main.js

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


 src/styles/theme-dark/variable.less

@@ -1,4 +1,4 @@
@import "../common/variable";
//@import "../common/variable";

/* 主题色
-------------------------- */

 src/utils/AjaxUtils.js

@@ -33,7 +33,7 @@
  axios({
    method: 'get',
    url: pUrl,
    data: pData
    params: pData
  }).then(function (response) {
    pBackFun(response)
  })

 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)

 src/views/MapTemplate.vue

@@ -9,20 +9,23 @@
      <lc-service-layer class="barline" v-if="lcServiceLayerVisible"></lc-service-layer>
    </sgis-layer-controller>
    <monitor-panel></monitor-panel>
<!--            <top-enterprise-panel></top-enterprise-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>
    <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>
</template>

<script>
import 'leaflet/dist/leaflet.css'
import Sgis from '@src/Sgis'
// import Vue from 'vue'
// import mapConfig from '@/conf/MapConfig'
import SgisLayerController from '@components/LayerController/LayerController'
import LcBasemap from '@components/LayerController/modules/LcBaseMap'
@@ -35,6 +38,13 @@
// import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'
import Enterprise from '../components/table/enterprise'
// 底图业务js逻辑
import AddSolidWasteHelper from '@components/BaseNav/SolidWaste/SolidWaste'
import AddWasteWaterHelper from '@components/BaseNav/WasteWater/WasteWater'
import AddGasHelper from '@components/BaseNav/flueGas/flueGas'
// // 公共展示数据
import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
import LayerFactory from '@components/LayerController/service/LayerFactory'

export default {
  name: 'MapTemplate',
@@ -49,10 +59,12 @@
    LcBasemap,
    LcServiceLayer,
    Popup,
    summarySheets
    summarySheets,
    PublicBounced
  },
  data () {
    return {
      // isShowBtn: false,
      map: null,
      lcServiceLayerVisible: false,
      basemapHelper: {},
@@ -66,14 +78,61 @@
    }
  },
  beforeMount () {
    // import('@/assets/airQuality.json').then(res => {
    //   console.log(res.features)
    // })
    this.$nextTick(() => {
      this.init()
    })
  },
  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(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)
    },
    saveMapStatus () {
      window.serviceLayerHelper = this.serviceLayerHelper
      this.$store.commit('setMapObj', this.map)
@@ -83,32 +142,100 @@

      this.lcServiceLayerVisible = true
    },
    init: function () {
    init () {
      const mapcontainer = this.$refs.rootmap
      this.map = Sgis.initMap(mapcontainer)
      this.$refs.toolBox.map = this.map

      window.popupComp = this.$refs.popup
      var layerFactory = new LayerFactory({
        L: window.L,
        map: this.map
      })
      layerFactory.init()
      window.layerFactory = layerFactory

      this.basemapHelper = Sgis.initBasemapsHelper(this.map) // 初始化基础底图助手
      this.basemapHelper.initBasemap(this.config, false) // 第二个参数，表示是否内网底图

      this.serviceLayerHelper = Sgis.initTileLayersHelper(this.map) // 初始化业务底图助手
      console.log('-------' + this.$refs.popup.$el)
      this.serviceLayerHelper.initServiceLayers(this.config, this.$refs.popup)
      // this.serviceLayerHelper = Sgis.initTileLayersHelper(this.map) // 初始化业务底图助手
      // console.log('-------' + this.$refs.popup.$el)
      // this.serviceLayerHelper.initServiceLayers(this.config, this.$refs.popup)

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

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

      this.saveMapStatus()
      // this.setMapObj(this.mapObj)
      // this.setBasemapHelper(this.basemapHelper)
      // this.setServiceLayerHelper(this.serviceLayerHelper)
      // this.setVectorLayerHelper(this.vectorLayerHelper)
      this.addMarker()
    },
    addMarker () {
      const L = this.L
      var icon = new L.Icon({
        iconUrl: 'assets/images/map/marker-icon.png',
        shadowUrl: 'assets/images/map/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
      })
      var marker = L.marker([32.2221, 118.7843], {
        icon: icon
      }).addTo(this.map)
        .bindPopup(() => this.$refs.popup.$el, {
          className: 's-map-popup',
          minWidth: 300,
          closeButton: false,
          autoClose: false
        })
        .bindTooltip('字体光晕效果t.', {
          // permanent : true,
          offset: [0, 0], // 偏移
          direction: 'right', // 放置位置
          // sticky:true,//是否标记在点上面
          className: 'anim-tooltip'// CSS控制
        })

      marker.on('popupopen', this.onLayerClick)
    },
    onLayerClick () {
      this.$refs.popup.setShow()
    },
    callPopup (val) {
      console.log(val)
    }
  }
}
</script>

<style lang="less">
.flue-gas {
  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;
}

.full-screen {
  width: 100%;
@@ -128,14 +255,27 @@
    //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;
  }

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

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

 vue.config.js

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