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

wangqi

2021-04-13 e5b3ac602230c6782afcd2ddb5f55020c87b2f25

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


 Conflicts:

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

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

	src/components/BaseNav/PublicBounced/PublicBounced.vue

 public/assets/images/map/solidwaste/gf_green.png

 public/assets/images/map/solidwaste/gf_green2.png

 public/assets/images/map/wastewater/fs_bright_green.png

 public/assets/images/map/wastewater/fs_bright_greens.png

 src/Sgis.js

@@ -1,7 +1,6 @@
import BasemapHelper from '@components/helpers/BasemapHelper'
import VectorLayerHelper from '@components/helpers/VectorLayerHelper'

// 初始化显示
import '@components/plugin/PathDrag'

import MapConfig from '@/conf/MapConfig'
import '@components/plugin/PathDashFlow' // 流动线图
import DownLoad from '@components/plugin/DownLoad'
@@ -17,7 +16,8 @@
import '@/components/plugin/magicMarker.css'
import '@components/plugin/pulse/Pulse' // marker 外圈波
import '@components/plugin/pulse/Pulse.css' // marker 外圈波 css

import BasemapHelper from '@components/helpers/BasemapHelper'
import VectorLayerHelper from '@components/helpers/VectorLayerHelper'
let map = null
const L = window.L
const initMap = (div, mapOption) => {

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

@@ -58,7 +58,6 @@

<script>
import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList'
// import dayjs from 'dayjs'

export default {
  name: 'ECharts',

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

@@ -154,7 +154,7 @@
    },
    CreateChart: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) {
      this.myChart = this.$echarts.init(this.$refs.main)
      // this.myChart.clear()
      this.myChart.clear()
      var dataUnit = ''
      if (datatype === 1) {
        dataUnit = '气量(m³/d)'
@@ -339,7 +339,6 @@
        },
        legend: { // 图例
          data: legend
          // color:
        },
        dataZoom: [{
          type: 'inside',
@@ -537,6 +536,7 @@
    //   }
    // }
  }

}
</script>


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

New file
@@ -0,0 +1,678 @@
<!--  小时数据  -->
<template>
    <div id="Tab">
        <div class="infomation">
          <div>
            <span class="grid-content">氮氧化物 :<i>29.93</i>  标准 : 100</span>
            <span class="grid-content">二氧化硫 : <i>17.34</i> 标准 : 50</span>
            <span class="grid-content">烟尘 : <i>6.93</i> 标准 : 30</span>
            <span class="grid-content">废气流量 : <i>120343.18</i></span>
          </div>
        </div>
        <div class="form-echrts">
            <div class="from-search">
                <div class="pickerMon">
                    <div class="pickerData">
                        <span> 开始时间:</span>
                        <span class="pickerTable">
                          <el-date-picker  type="datetime"   v-model="formInline.timeStart">
                      </el-date-picker>
                      </span>
                    </div>
                    <div class="pickerData">
                        <span >结束时间:</span>
                        <span class="pickerTable">
                        <el-date-picker
                                type="datetime"
                                v-model="formInline.timeEnd"
                        >
                      </el-date-picker>
                      </span>
                    </div>
                </div>
                <div>
                    采样点数:
                    <el-select v-model="formInline.region">
                        <el-option label="0" value="0"></el-option>
                        <el-option label="25" value="25"></el-option>
                        <el-option label="50" value="50"></el-option>
                        <el-option label="75" value="75"></el-option>
                        <el-option label="100" value="100"></el-option>
                    </el-select>
                </div>
                <div class="detailbtn"  @click="onSubmit">查询</div>
                <div class="detailbtn" @click="dialogVisible = true" >明细表</div>
             </div>
            <div style="width:5rem;height:2rem;" id="echarts" ref="main">
            </div>
        </div>
        <!-- 明细弹框 -->
        <el-dialog :visible.sync="dialogVisible"
                   :append-to-body="true"
                   :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"
                   width="68%"
                   center
                   v-dialogDrag
        >
            <div class="el-dialog-div" style="height: 500px">
                <public-detailed-list v-bind="$attrs"></public-detailed-list>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList'

export default {
  name: 'ECharts',
  components: {
    PublicDetailedList
  },
  data () {
    return {
      value1: '',
      value2: '',
      watchData: [],
      dialogVisible: false,
      myChar: null,
      value: '',
      formInline: {
        region: '',
        timeStart: '',
        timeEnd: ''
      },
      myChart: null,
      JsonWater: {
        id: 'mycharteff',
        title: '',
        datatype: 2,
        jcdID: '1020',
        legend: [
          {
            icon: 'image://../assets/imgs/legend/SO2.png',
            itemHeight: 5,
            itemWidth: 20,
            name: 'COD',
            testStyle: {
              color: '#ccc'
            }
          },
          {
            icon: 'image://../assets/imgs/legend/NOX.png',
            itemHeight: 5,
            itemWidth: 20,
            name: '氨氮',
            testStyle: {
              color: '#ccc'
            }
          },
          {
            icon: 'image://../assets/imgs/legend/VOCs.png',
            itemHeight: 5,
            itemWidth: 20,
            name: '废水流量',
            testStyle: {
              color: '#ccc'
            }
          }
        ],
        xdata: ['17时', '18时', '19时', '20时', '21时', '22时', '23时', '0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时'],
        ydatas: [
          { name: 'COD', data: [5.602, 5.617, 5.612, 5.647, 5.652, 5.673, 5.665, 5.702, 5.69, 5.722, 5.729, 5.755, 5.754, 5.784, 8.593, 12.826, 11.125, 8.582, 8.047, 7.325, 6.452, 5.175, 5.522, 6.039], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 80 },
          { name: '氨氮', data: [0.196, 0.184, 0.189, 0.193, 0.199, 0.201, 0.21, 0.211, 0.214, 0.213, 0.214, 0.214, 0.214, 0.214, 0.214, 0.214, 0.213, 0.195, 0.183, 0.183, 0.183, 0.204, 0.223, 0.38], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 25 },
          { name: '废水流量', data: [226.766998, 223.709, 104.838997, 259.417999, 292.963989, 282.291992, 293.272003, 182.985992, 174.287003, 175.011993, 174.307007, 187.044998, 252.026001, 250.365005, 155.317993, 164.723007, 243.785995, 135.520996, 98.18, 185.481995, 226.473999, 215.171005, 250.393005, 254.643997], zdcbcolor: 'red', zxcolor: '#9ACD32', bzz: null }
        ],
        yname: '浓度(mg/l)'
      }
    }
  },
  methods: {
    onSubmit () {
      console.log(1)

      // const date = [this.value1, this.value2, this.formInline.region]
      this.effChartShow(this.JsonWater.id, this.JsonWater.title, this.JsonWater.legend, this.JsonWater.xdata, this.JsonWater.ydatas, this.JsonWater.yname, this.JsonWater.id, this.JsonWater.datatype)
      // console.log(date)
      // if (date) {
      //   var date1 = new Date(date)
      //   date1 = new Date(date1.getTime() - (8 * 3600000))
      //   console.log(date1)
      // var dateUtil = new DateUtil()
      // var datePkg = dateUtil.getTowDate(date1, "a", 24 * 3600000 - 1);
      // var datatype = 2;
    },
    effChartShow: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) {
      this.myChart = this.$echarts.init(this.$refs.main)
      this.myChart.clear()
      var dataUnit = ''
      if (datatype === 1) {
        dataUnit = '流量(m³/d)'
      } else {
        dataUnit = '流量(m³/h)'
      }

      var serLists = []
      for (var j = 0; j < ydatas.length; j++) {
        var len = ydatas[j].data.length
        for (var k = 0; k < len; k++) {
          var it = ydatas[j].data[k]
          var it2 = parseFloat(it).toFixed(2)
          ydatas[j].data[k] = it2
        }
      }
      for (var i = 0; i < ydatas.length; i++) {
        // var zdcbcolor = ydatas[i].zdcbcolor
        var bz = ydatas[i].bzz
        var obj
        if (bz) {
          obj = {
            name: ydatas[i].name,
            symbol: 'circle', // 折点形状
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  /* var biaozhuiz
                  for (var i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name == c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value > biaozhuiz * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  } */
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                },
                borderColor: 'black', // 折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }

            },
            type: 'line',
            data: ydatas[i].data,
            markLine: { // 平均值 ， 和 指标上限
              symbol: 'none',
              data: [{
                label: {
                  normal: {
                    position: 'end',
                    formatter: '' // ydatas[i].name+'标准值' //+'{c}'
                  }
                },
                name: '标准值',
                yAxis: bz,
                lineStyle: {
                  color: ydatas[i].zxcolor,
                  type: 'dashed',
                  width: 2
                }
              }
              ]
            }
          }
        } else {
          obj = {
            name: ydatas[i].name,
            symbol: 'circle', // 折点形状
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  /* var biaozhuiz
                  for (var i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name == c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value > 9999999) {
                    return zdcbcolor
                  } else {
                    return '#33c95f'
                  } */
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                },
                borderColor: 'black', // 折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }
            },
            type: 'line',
            data: ydatas[i].data
          }
        }
        serLists.push(obj)
      }
      var option =
    {
      /*  title: {
        text: title,
    }, */
      tooltip: { // 提示框
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            color: '#1a4245'
          }
        },
        formatter: function (params) {
          var s = params[0].name + '<br />'
          for (var i = 0; i < params.length; i++) {
            // var name = params[i].name
            // 图表title名称
            var seriesName = params[i].seriesName
            // 值
            var value = params[i].value
            var valueFliter
            if (value === 'NaN') {
              valueFliter = ''
            } else {
              // valueFliter = formatter(value)
            }
            var maker = params[i].marker
            if (seriesName === 'COD') {
              maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>'
            } else if (seriesName === '氨氮') {
              maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00B0F0;"></span>'
            } else if (seriesName === '总磷') {
              maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f48183;"></span>'
            } else if (seriesName === '总氮') {
              maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#d9f2f4;"></span>'
            } else {
              maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#9ACD32;"></span>'
            }
            s += maker + seriesName + ':' + valueFliter + '<br />'
          }
          return s
        }
      },
      toolbox: { // 打印等工具
        show: false,
        feature: {
          saveAsImage: {}
        }
      },
      grid: { // 网格
        top: '20%',
        left: '5%'
      },
      legend: {
        data: legend
      },
      dataZoom: [{
        type: 'inside',
        start: 0,
        end: 100
      }, {
        start: 0,
        end: 100,
        show: false,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
          color: '#fff',
          shadowBlur: 3,
          shadowColor: 'rgba(0, 0, 0, 0.6)',
          shadowOffsetX: 2,
          shadowOffsetY: 2
        }
      }],
      xAxis: { // x 轴设置
        type: 'category',
        boundaryGap: false,
        axisLabel: { // x轴全部显示
          rotate: 20,
          interval: 0,
          textStyle: {
            color: '#fff'
          }
        },
        splitLine: { // 网格垂直线为 虚线
          show: true,
          lineStyle: {
            type: 'dashed'
          }
        },
        axisTick: { // x 轴刻度显示
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#FFFFFF',
            width: 1// 这里是为了突出显示加上的
          }
        },
        data: xdata
      },
      yAxis: [{
        type: 'value',
        name: yname,
        /* max: function (value) {
          var max_val_list = [] // 所有显示折线的标准值
          if (bzzList && bzzList.length > 0) {
            $.each(bzzList, function (index, item) {
              max_val_list.push(item.bzhui)
            })
          }
          max_val_list = max_val_list.sort(function (a, b) {
            return a - b
          }) // 排序
          var ma = value.max > max_val_list[max_val_list.length - 1] ? value.max + 5 : max_val_list[max_val_list.length - 1]
          return parseInt(ma)
        }, */
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#fff'
          }
        },
        axisPointer: {
          snap: true
        },
        splitLine: {
          show: false
        }, // y轴 网格线不显示,
        axisLine: {
          lineStyle: {
            color: '#FFFFFF',
            width: 1// 这里是为了突出显示加上的
          }
        }
      }, {
        type: 'value',
        name: dataUnit,
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#fff'
          }
        },
        axisPointer: {
          snap: true
        },
        splitLine: {
          show: false
        }, // y轴 网格线不显示,
        // inverse: true,
        // nameLocation: 'start',
        // max:500,
        axisLine: {
          lineStyle: {
            color: '#FFFFFF',
            width: 1// 这里是为了突出显示加上的
          }
        }
      }],
      series: serLists
    }
      this.myChart.setOption(option)
      /*
      myChart.on('legendselectchanged', function (params) {
        // console.log(params);
        var StdVal = null
        var op = { yAxis: {} }
        if (params.selected.COD) {
          if (bzzList && bzzList.length > 0) {
            for (let i = 0; i < bzzList.length; i++) {
              if (bzzList[i].name == 'COD') {
                StdVal = bzzList[i].bzhui
              }
            }
          }

          op.yAxis.max = function (value) {
            var ma
            if (value.max < StdVal) {
              ma = StdVal
            } else {
              ma = Math.ceil(value.max)
            }
            return ma
          }
        } else if (params.selected['总氮']) {
          if (bzzList && bzzList.length > 0) {
            for (let i = 0; i < bzzList.length; i++) {
              if (bzzList[i].name == '总氮') {
                StdVal = bzzList[i].bzhui
              }
            }
          }
          op.yAxis.max = function (value) {
            var ma
            if (value.max < StdVal) {
              ma = StdVal
            } else {
              ma = Math.ceil(value.max)
            }
            return ma
          }
        } else if (params.selected['氨氮']) {
          if (bzzList && bzzList.length > 0) {
            for (let i = 0; i < bzzList.length; i++) {
              if (bzzList[i].name == '氨氮') {
                StdVal = bzzList[i].bzhui
              }
            }
          }
          op.yAxis.max = function (value) {
            var ma
            if (value.max < StdVal) {
              ma = StdVal
            } else {
              ma = Math.ceil(value.max)
            }
            return ma
          }
        } else if (params.selected['总磷']) {
          if (bzzList && bzzList.length > 0) {
            for (let i = 0; i < bzzList.length; i++) {
              if (bzzList[i].name == '总磷') {
                StdVal = bzzList[i].bzhui
              }
            }
          }
          op.yAxis.max = function (value) {
            var ma
            if (value.max < StdVal) {
              ma = StdVal
            } else {
              ma = Math.ceil(value.max)
            }
            return ma
          }
        }
        myChart.setOption(op)
      })
      */

      /**
   * 解决myChart.on('click',function(){...})事件重复触发的问题
   * Date: 20200720
   */
      this.myChart.off('click')

      /**
   *  图标点击事件
   *  20190426 add
   * */
      /* myChart.on('click', function (params) {
        // console.log('[监测点id=%s]',jcdID)

        // 获取当前时间，小时
        var nowHours = new Date().Format('hh')
        // console.log('[当前小时是：%s]',nowHours);

        // 点击折线图折点对应的时间
        // 需要传的时间为
        var _date = null
        if (params.name.indexOf('时') != -1) {
          var hours = params.name.substring(0, params.name.indexOf('时'))
          // console.log('[坐标轴对应的时间为%s]',hours);

          if (parseInt(hours) < parseInt(nowHours)) {
            _date = new Date().Format('yyyy-MM-dd') + ' ' + hours + ':00:00'
          } else {
            var currentDate = new Date()
            // 24小时之前时间
            var stringDate = new Date(currentDate.getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')

            _date = stringDate + ' ' + hours + ':00:00'
          }

          // console.log('[需要传递的时间为：%s]',_date);
        } else if (params.name.indexOf('日') != -1) {
          var day = params.name.substring(0, params.name.indexOf('日') - 1)
          _date = new Date().Format('yyyy-MM') + '-' + day.trim()
        }

        // todo 调接口 查凭证

        if (params.color != 'red') {
          var poltMtrlId
          var monItemId = 28
          for (var i = 0; i < wrwIDS.length; i++) {
            if (params.seriesName == wrwIDS[i].name) {
              poltMtrlId = wrwIDS[i].id
            }
          }

          getCBMX(jcdID, poltMtrlId, monItemId, _date, function (res) {
            createDivByMouse(res, params.event)
          })
        }
        // createDivByMouse("s",params.event);
      }) */
    },
    drawChart: function () {
      window.onresize = function () {
        var h1 = document.documentElement.clientHeight// 获取屏幕的高度
        if (h1 > 700) {
          this.myChart.getDom().style.height = 3 + 'rem'
          this.myChart.getDom().style.width = 6 + 'rem'
        } else {
          this.myChart.getDom().style.height = 3 + 'rem'
          this.myChart.getDom().style.width = 6 + 'rem'
        }
        this.myChart.resize()
      }
    }

  }

}
</script>

<style scoped lang="less">
.grid-content{
    font-size: 8px;
    background-color: #2e4967;
    text-align: center;
    border-radius: 2px;
    margin-right: 10px;
    padding:0 10px
}
.infomation {
  padding: 5px 10px;
}

.form-echrts {
    width: 100%;
    border-top: 1px solid #396d83;
    //margin: 10px 10px 10px 10px;
    .from-search{
        display: flex;
        padding:5px;
        >div{margin-left: 10px}
        .pickerMon{
            display: flex;
            >div:first-child {
                margin-right: 10px;
            }
            .pickerData{
                flex: 1;
                display: flex;
                >span{line-height: 22px}
                .pickerTable {
                    margin-left: 3px;
                }
            }
        }
        /deep/.el-date-editor--datetime{
            width: 100%;
        }
        /deep/.el-input__inner{
            position: relative;
            width:140px;
            background-color: #2e4967;
            color: #ffffff;
            font-size: 12px;
            height: 24px;
            padding: 0;
            border-color:#00fff6;
            text-align: center;
            //padding-left:20px ;
            //padding: 0!important;
        }
        /deep/.el-input__icon{
            display: block;
            width: 140px;
            height: 22px;
            line-height: 22px;
            cursor: pointer;
            font-size: 0;
        }
        .echatsInput{
            color: #00ffff;
            background-color: #2e4967;
            border: none;
            border-radius: 6px;
            width: 80px;
            height: 22px;
            text-align: center;
        }
        input::-webkit-calendar-picker-indicator {
            opacity: 100;
        }
        .detailbtn{
            background-color:#2e4967;
            text-align: center;
            padding: 0 7px;
            line-height: 24px;
            border-radius: 4px;
            margin-right: 6px;
        }
        .detailbtn:hover{
            box-shadow: 0 0 0.03rem #fff700 !important;
            color:#fff700 !important;
            cursor: pointer;
        }
    }
    .el-dialog-div {
        //height: 50vh!important;
        overflow: auto;
        //overflow: hidden;
    }

    #echarts {
        margin: 0;
        padding: 0;
    }
}
</style>

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

@@ -9,6 +9,10 @@
            <li @click='tabTaggle("EChartsHour")'>小时数据</li>
            <li @click='tabTaggle("EChartsDate")'>日数据</li>
            <li @click='tabTaggle("EChartsDate")'>人工数据</li>
            <li :class="active==0?'hover':''" @click='tabTaggle("EChartsHour",0)'>实时数据</li>
            <li :class="active==1?'hover':''" @click='tabTaggle("EChartsHour",1)'>小时数据</li>
            <li :class="active==2?'hover':''" @click='tabTaggle("EChartsHourWasteWater",2)'>日数据</li>
            <li :class="active==3?'hover':''" @click='tabTaggle("ECharts",3)'>人工数据</li>
        </ul>
        <div class="legend" >
            <span >正常</span>
@@ -26,28 +30,31 @@
import EChartsHour from './EChartsHour'
import EChartsDate from './EChartsDate'
import ECharts from './Echarts'
// import EChartsDate from './EChartsDate'
import EChartsHourWasteWater from './EChartsHourWasteWater'

export default {
  name: 'PublicChart',
  components: {
    EChartsHour,
    EChartsDate,
    ECharts
    ECharts,
    // EChartsDate
    EChartsHourWasteWater
  },
  data () {
    return {
      currentTab: 'EChartsHour'
      currentTab: 'EChartsHour',
      active: '0'
    }
  },
  methods: {
    tabTaggle (taggleMenu) {
    tabTaggle (taggleMenu, num) {
      this.currentTab = taggleMenu
      this.active = num
      // debugger
    }
  }
  // created () {
  //   this.$refs.CreateChart
  // }
}

</script>
@@ -112,10 +119,10 @@
    margin-right: 10px;
    padding:0 15px
}

.tab li.hover,
.tab li:hover {
  background-color: #0e639e;
  color: #682000;
  color: #fff;
  cursor: pointer;
}
.legend{

 src/components/LayerController/logic/SolidWaste.js

@@ -4,7 +4,7 @@

// 区分不同类型 使用不同img
const defaultImg = '/assets/images/map/solidwaste/voc.png'
const setting = '/assets/images/map/solidwaste/gf_green.png'
const setting = '/assets/images/map/solidwaste/gf_green2.png'

// 请求接口数据
const mapApi = require('../../../api/mapApi').default
@@ -88,7 +88,7 @@
    // 通过方法 向绑定弹框传递数据
    instance.setData(resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei')
    /* flyTo()弹出框平移事件 */
    this.setPanTo(e.latlng, 80)
    this.setPanTo(e.latlng, 200)
  }

  // flayTo() 弹框的可滑动事件

 src/components/LayerController/logic/WasteWater.js

@@ -6,10 +6,10 @@
// 弹窗数据引进
const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default

const NormalImg = '/assets/images/map/wastewater/fs_green.png' // 正常
const NormalImg = '/assets/images/map/wastewater/fs_bright_green.png' // 正常
const OffImg = '/assets/images/map/wastewater/fs_gray.png' // 停运
const AbnormalImg = '/assets/images/map/wastewater/fs_blue.png' // 异常
const MissImg = '/assets/images/map/wastewater/fs_yellow.png' // 缺失
const MissImg = '/assets/images/map/wastewater/fs_bright_green.png' // 缺失
const AlarmImg = '/assets/images/map/wastewater/fs_red.png' // 报警闪烁
const WarnImg = '/assets/images/map/wastewater/fs_orange.png' // 预警闪烁

@@ -73,7 +73,7 @@
    }
    const hourData = await mapApi.getQueryOnlineMonData(hourValue)
    const dateData = await mapApi.getQueryOnlineMonData(dateValue)
    console.log(dateData)
    // console.log(dateData)
    // const drawback = await mapApi.getWasteWaterMonitoring()
    // console.log(drawback)
    const result = await mapApi.getWasteWaterMonitoringDetails(dataValue)

 src/components/LayerController/modules/LcBaseMap.vue

@@ -30,13 +30,14 @@
  methods: {
    updateBasemapList () {
      this.basemapList = this.basemapHelper.getBasemapList()
      console.log(this.basemapList)
      // console.log(this.basemapList)
    },
    changeBasemap (itm) {
      // console.log(itm)
      const code = itm.code
      this.basemapList.forEach((item) => {
        if (item.code === code) {
          console.log(this.currentBaseMapCode)
          // console.log(this.currentBaseMapCode)
          if (this.currentBaseMapCode == null || this.currentBaseMapCode !== code) {
            this.currentBaseMapCode = code
            this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, true)

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -7,7 +7,7 @@
                    <i class="downUp el-icon-caret-bottom" @click="item.isShow=!item.isShow" :class="item.isShow?'':'active'" ></i><!-- el-icon-arrow-down -->
                    <!-- 一级图层遍历 -->
                    <div style="padding-left:25px;padding-top:10px;color:#fff">
                        <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item)"/>{{ item.name }}
                        <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item,'')"/>{{ item.name }}
                    </div>
                    <div class="layerbox-item" v-show="item.isShow">
                        <!-- 二级图层遍历 -->
@@ -16,7 +16,7 @@
                                   :name="'wmsSublayers_'+item.code+'_'+itm.code"
                                   :checked="itm.checked"
                                   :value="itm.code"
                                   @change="swAllLayers(itm)"/>{{ itm.name }}
                                   @change="swAllLayers(itm,item.name)"/>{{ itm.name }}
                            <!-- 三级图层遍历 -->
                            <div class="layerbox-item-3">
                                <div class="basemap-layer-item" v-for="layer in itm.layers" :key="layer.code">
@@ -24,7 +24,7 @@
                                           :name="'wmsSublayers_'+item.code+'_'+layer.code"
                                           :checked="layer.checked"
                                           :value="layer.code"
                                           @change="swAllLayers(layer)"/>
                                           @change="swAllLayers(layer,'')"/>
                                    <span :style="'color:'+layer.color">{{ layer.name }}</span>
                                </div>
                            </div>
@@ -39,7 +39,7 @@

<script>
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'

import bus from '@/eventBus'
export default {
  name: 'LcServiceLayer',
  components: { LcServiceLayerFilter },
@@ -51,11 +51,14 @@
  mounted () {
  },
  methods: {
    swAllLayers (item) {
    swAllLayers (item, v) {
      // eslint-disable-next-line no-debugger
      item.checked = !item.checked
      this.toggleLayer(item)
      this.swLayers(item.layers, item.checked)
      if (v === '专题图层') {
        bus.$emit('changeSearchBar', item)
      }
    },
    swLayers (layers, checked) {
      if (layers) {

 src/components/helpers/BasemapHelper.js

@@ -1,6 +1,6 @@
/* eslint-disable no-debugger */
import AjaxUtils from '@/utils/AjaxUtils'
import * as utils from '../../utils/utils'
// import * as utils from '../../utils/utils'
/**
 * 底图管理助手，负责底图创建及开关
 */
@@ -79,10 +79,8 @@
      const internetBasemaps = config.mapConfig.InternetBaseMaps
      for (let i = 0, len = internetBasemaps.length; i < len; ++i) {
        const basemapConfig = internetBasemaps[i]
        const mapToken = utils.getRandomTDTToken()
        const mapUrl = utils.changeURLArg(basemapConfig.map.url, 'tk', mapToken)
        const basemapLayer = this.L.tileLayer(mapUrl, basemapConfig.map.option)
        const basemapAnnotationLayer = this.L.tileLayer(mapUrl, basemapConfig.annotation.option)
        const basemapLayer = this.L.tileLayer(basemapConfig.map.url, basemapConfig.map.option)
        const basemapAnnotationLayer = this.L.tileLayer(basemapConfig.annotation.url, basemapConfig.annotation.option)

        const basemap = {
          code: basemapConfig.code,

 src/components/panel/LegendPanel.vue

@@ -32,7 +32,7 @@
import { LayerPipeLines } from '../../conf/layers/LayerPipeLines'
import { LayerPk } from '../../conf/layers/LayerPk'
import { LayerArea } from '../../conf/layers/LayerArea'

import bus from '@/eventBus'
export default {
  name: 'LegendPanel',
  data () {
@@ -42,10 +42,23 @@
      serviceLayers: [LayerSoilGroundWater, LayerEnvRisk, LayerAirQuality, LayerWasteSolid, LayerWasteGas, LayerWasteWater, LayerArea, LayerPk, LayerPipeLines]
    }
  },
  mounted () {
    const that = this
    bus.$on('changeState', function (state) {
      if (state.num !== 4 && state.type) {
        that.isShow = false
      }
    })
  },
  methods: {
    // 图标 控制内容的展示与隐藏
    legendChange () {
      this.isShow = !this.isShow
      const state = {
        type: this.isShow,
        num: 4
      }
      bus.$emit('changeState', state)
    }
  }
}

 src/components/panel/RightSearchPanel.vue

@@ -12,7 +12,7 @@
                              </div>
                          </li>
                      </ul> -->
                      <ul  v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" >
                      <ul  v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" v-show="item.isShow" >
                          <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
                              <li>
                                  <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
@@ -26,11 +26,11 @@
                      <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
                  </div>
                  <div :class="'search-container map-background'" v-show="selectGroup" >
                      <div @click="setSearchPanelChange" type="button" class="el-button special-button el-button--default ">
                      <div @click="setSearchPanelChange" class="el-button special-button el-button--default ">
                          <i class=" el-icon-d-arrow-right" v-if="selectGroup"></i>
                          <i class=" el-icon-d-arrow-left" v-else ></i>
                      </div>
                      <div class="el-message-box__content" style="padding:0 6px 6px 6px;font-size: 13px;">
                      <div class="el-message-box__content" style="padding:0;font-size: 13px;">
                          <component :title="title" :is="gcComp"></component>
                      </div>
                  </div>
@@ -55,6 +55,7 @@
import SolidWasteSearch from '@components/panel/topicSearch/SolidWasteSearch'
import SewersSearch from '@components/panel/topicSearch/SewersSearch'
import SoilGroundWaterSearch from '@components/panel/topicSearch/SoilGroundWaterSearch.vue'
import bus from '@/eventBus'
export default {
  name: 'MonitorPanel',
  components: { GasWasteSearch, WaterWasteSearch, SolidWasteSearch, EnvRiskSearch, DischargeSearch },
@@ -66,7 +67,6 @@
      topicCheckedList: [],
      isPanelVisible: false,
      gcComp: SewersSearch,

      gdVisible: true,
      hbVisible: false,
      pkVisible: false,
@@ -74,7 +74,7 @@

      title: '污雨水管网',
      isCollapse: true,
      selectGroup: true
      selectGroup: false
    }
  },
  computed: {},
@@ -116,13 +116,13 @@
        case '污染源':
          this.gcComp = DischargeSearch
          break
        case '废水监测':
        case '废水':
          this.gcComp = WaterWasteSearch
          break
        case '废气监测':
        case '废气':
          this.gcComp = GasWasteSearch
          break
        case '固废管理':
        case '固废':
          this.gcComp = SolidWasteSearch
          break
        case '环境风险':
@@ -131,7 +131,7 @@
        case '土壤及地下水':
          this.gcComp = SoilGroundWaterSearch
          break
        case '污雨水管网':
        case '管网':
          this.gcComp = SewersSearch
          break
      }
@@ -180,9 +180,32 @@
    //       speed: 1000
    //     })
    //   }
    },
    defaultLastOne () {
      let v = {}
      this.topicList.forEach((item) => {
        if (item.isShow) {
          v = item
        }
      })
      this.selected(v)
    }
  },
  mounted () {
    const that = this
    bus.$on('changeSearchBar', function (obj) {
      // console.log(obj.checked, obj.name)
      that.topicList.forEach((item) => {
        if (item.name === obj.name) {
          item.isShow = obj.checked
          if (item.isShow) {
            that.selected(item)
          } else {
            that.defaultLastOne()
          }
        }
      })
    })
  }
}
</script>
@@ -199,7 +222,7 @@
.search-container {
    position: relative;
    width: 1.79167rem;
    /*height: 5.6475rem;*/
  /*  height: 5.6475rem;*/
    overflow: hidden;
}
.module-wrap{
@@ -716,7 +739,7 @@
        .panel-title{}
        .search-panel{
            background-color: transparent;
            padding: 10px 0;
            padding: 10px;
            border-bottom: 1px solid @background-color-split;
            // .el-input{width:calc(100% - 40px);position: relative}
            /deep/ input {

 src/components/panel/ToolBoxPanel.vue

@@ -278,7 +278,6 @@
    })
  },
  methods: {

    init (map) {
      this.map = map
      this.toolBoxPanelVisible = true
@@ -288,7 +287,7 @@
        this.drawLayer = this.L.layerGroup().addTo(this.map)
      }
      this.active = index
      console.log(this.basemapList)
      // console.log(this.basemapList)
      for (let i = 0; i < this.isShow.length; i++) {
        if (i !== index) {
          this.isShow[i] = false

 src/components/plugin/PathDrag.js

@@ -136,4 +136,4 @@
    });
  }

});
});

 src/conf/MapConfig.js

@@ -45,10 +45,6 @@
  } // 污雨水图层配置
}

const mapTokenArray = ['5d76218063082952d18b76da5005f490',
  'f1b72b5e7cb1175acddfa485f1bc9770',
  'ac8bbce8119b337d75d4b06696f6186d',
  '9bf834ce1ba3ba01c568147e9bfcab7c']
/**
 * 内网GIS，获取token参数
 */
@@ -84,7 +80,7 @@
  mapOptions,
  mapConfig,
  TokenConfig,
  BLUEMAP_HOST,
  mapTokenArray
  BLUEMAP_HOST
  // mapTokenArray
  // MagicMaker
}

 src/conf/TDT.js

@@ -1,7 +1,15 @@
// basemap主机配置

const SINOPEC_GIS_HOST = 'http://10.246.132.249:8080' // 内网天地图主机地址
const TIANDITU_GIS_HOST = 'http://t0.tianditu.gov.cn' // 公网天地图主机地址
const TIANDITU_GIS_TOKEN = '5d76218063082952d18b76da5005f490' // 备用tk: f1b72b5e7cb1175acddfa485f1bc9770

const mapTokenArray = ['5d76218063082952d18b76da5005f490',
  'f1b72b5e7cb1175acddfa485f1bc9770',
  'ac8bbce8119b337d75d4b06696f6186d',
  '9bf834ce1ba3ba01c568147e9bfcab7c']

const TIANDITU_GIS_TOKEN = mapTokenArray[Math.floor(Math.random() * mapTokenArray.length)] // 备用tk: f1b72b5e7cb1175acddfa485f1bc9770

const intranet = [
  {
    code: 'tianditu_img',

 src/conf/Topic.js

@@ -15,42 +15,49 @@
  name: '污染源',
  id: 1,
  check: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '废水监测',
  name: '废水',
  id: 2,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '废气监测',
  name: '废气',
  id: 3,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '固废管理',
  name: '固废',
  id: 4,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '环境风险',
  id: 5,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '土壤及地下水',
  id: 6,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '污雨水管网',
  name: '管线',
  id: 7,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}]

 src/main.js

@@ -15,6 +15,7 @@
import '@/utils/dialogDrag.js'
import '@components/plugin/leaflet-measure-path/leaflet-measure-path.css'
import '@components/plugin/leaflet-measure-path/leaflet-measure-path'
import '@components/plugin/PathDrag'
const appConfig = require('@/app.config')
Vue.config.productionTip = false


 src/utils/utils.js

@@ -4,7 +4,6 @@
* arg_val 替换后的参数的值
* return url 参数替换后的url
*/
import MapConfig from '../conf/MapConfig'
export function changeURLArg (url, arg, argValue) {
  var pattern = arg + '=([^&]*)'
  var replaceText = arg + '=' + argValue
@@ -22,7 +21,4 @@
  }
  // eslint-disable-next-line no-unreachable
  return url + '\n' + arg + '\n' + argValue
}
export function getRandomTDTToken () {
  return MapConfig.mapTokenArray[Math.floor(Math.random() * MapConfig.mapTokenArray.length)]
}