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

chenyabin

2021-04-27 4f35a8b56c12315c82fd5bd136f32da2dcadc5e2

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

 src/Sgis.js

@@ -1,7 +1,7 @@
// 初始化显示
import MapConfig from '@/conf/MapConfig'
import MapConfig from './conf/MapConfig'
import '@components/plugin/PathDashFlow' // 流动线图
import DownLoad from '@components/plugin/DownLoad'
import DownLoad from './components/plugin/DownLoad'
// 测量
import '@components/plugin/leaflet-measure-path/leaflet-measure-path'

@@ -14,11 +14,9 @@
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'

// import eventBus from '@/eventBus'
import eventBus from './eventBus'
import BasemapHelper from './components/helpers/BasemapHelper'
import VectorLayerHelper from './components/helpers/VectorLayerHelper'
// import eventBus from './eventBus'

let map = null
const L = window.L
@@ -34,7 +32,7 @@
    console.log(event, a, b)
  })

  eventBus.$emit('map-obj', map)
  // eventBus.$emit('map-obj', map)

  window.map = map
  window.L = L

 src/assets/css/map/map-panel-style.less

@@ -731,3 +731,60 @@
  background: @background-color;color:@color-highlight;border-color:@color-highlight
}

/****************************废水弹框公共样式***/
.echarts-box {
  .tab-scroll {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .time-select {
      cursor: pointer;
      padding: 5px;
      border: 1px solid #2b87c8;
      border-radius: 4px;
      text-align: center;
      color: #fff;
      font-size: 11px;
      width: 280px;
    }
  }

  .echarts-form {
    height: 0.3rem;
    line-height: 0.3rem;

    .demonstration {
      color: #00fff6;
      font-size: 12px;
      margin-left: 10px;
    }

    .el-input__inner {
      height: 0.15rem;
      background-color: #2e4967;
      color: #fff;
      font-size: 12px;
      padding: 0;
      border-color: #00fff6;
      text-align: center;
    }

    .el-button {
      margin: 0 15px;
      width: 0.3rem;
      height: 0.15rem;
      display: inline-block;
      background-color: #2e4967;
      color: #fff;
      font-size: 12px;
      padding: 0;
      border-color: #00fff6;
      text-align: center;
    }
  }

  .el-icon-time:before {
    content: " ";
  }
}

 src/components/BaseNav/PublicChart.vue

New file
@@ -0,0 +1,37 @@
<template>
  <!--  <div class="public-chart">-->
  <div style="width:800px;height:200px;" ref="publicChart"></div>
  <!--  </div>-->
</template>

<script>
export default {
  name: 'PublicChart',
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      publicChart: null
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.publicChart = this.$echarts.init(this.$refs.publicChart)
      this.publicChart.clear()
      this.publicChart.setOption(this.propsData)
      window.onresize = this.publicChart.resize()
    })
  },
  methods: {}
}
</script>

<style lang="less" scoped>

</style>

 src/components/BaseNav/WasteGas/DayData.vue

@@ -218,14 +218,16 @@
        for (var l = 0; l < nameList.length; l++) {
          var obj
          var iconurl
          if (nameList[l] === 'COD') {
          if (nameList[l] === '二氧化硫') {
            iconurl = 'image://../assets/imgs/legend/SO2.png'
          } else if (nameList[l] === '氨氮') {
          } else if (nameList[l] === '氮氧化物') {
            iconurl = 'image://../assets/imgs/legend/NOX.png'
          } else if (nameList[l] === '总磷') {
          } else if (nameList[l] === '烟尘') {
            iconurl = 'image://../assets/imgs/legend/YanChen.png'
          } else if (nameList[l] === '总氮') {
            iconurl = 'image://../assets/imgs/legend/zongdan.png'
          } else if (nameList[l] === '非甲烷总烃') {
            iconurl = 'image://../assets/imgs/legend/grn.png'
          } else if (nameList[l] === '温度') {
            iconurl = 'image://../assets/imgs/legend/WenDu.png'
          } else {
            iconurl = 'image://../assets/imgs/legend/VOCs.png'
          }
@@ -267,21 +269,21 @@

        for (let j = 0; j < nameList.length; j++) {
          var zdcbcolor, zxcolor
          if (nameList[j] === 'COD') {
          if (nameList[j] === '二氧化硫') {
            zdcbcolor = 'red'
            zxcolor = '#fff21c'
          } else if (nameList[j] === '氨氮') {
          } else if (nameList[j] === '氮氧化物') {
            zdcbcolor = 'red'
            zxcolor = '#00B0F0'
          } else if (nameList[j] === '总磷') {
            zdcbcolor = 'red'
            zxcolor = '#f48183'
          } else if (nameList[j] === '总氮') {
          } else if (nameList[j] === '废气流量') {
            zdcbcolor = 'red'
            zxcolor = '#d9f2f4'
            zxcolor = '#70ff49'
          } else {
            zdcbcolor = 'red'
            zxcolor = '#9ACD32'
            zxcolor = '#d9f2f4'
          }

          let sdata = []
@@ -326,8 +328,10 @@
        }
      }

      const bzzList = this.bzzList

      for (let i = 0; i < ydatas.length; i++) {
        // const zdcbcolor = ydatas[i].zdcbcolor
        const zdcbcolor = ydatas[i].zdcbcolor
        const bzz = ydatas[i].bzz
        let obj
        if (bzz == null) {
@@ -337,31 +341,33 @@
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            yAxisIndex: 1,
            // itemStyle: {
            //   normal: {
            //     color: function (c) { // 根据value 显示不同的折点颜色
            //       let biaozhuiz
            //       for (let i = 0; i < exhbzzList.length; i++) {
            //         if (exhbzzList[i].name === c.seriesName) {
            //           biaozhuiz = exhbzzList[i].bzhui
            //         }
            //       }
            //       if (c.value > 999999999999) {
            //         return zdcbcolor
            //       } else {
            //         return '#33c95f'
            //       }
            //     },
            //     lineStyle: { // 折线的颜色
            //       color: ydatas[i].zxcolor,
            //       width: 5
            //     },
            //     borderColor: ydatas[i].zxcolor, // 折点边框的颜色
            //     label: { // 显示值
            //       show: false
            //     }
            //   }
            // },
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (let i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name === c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > biaozhuiz * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                },
                borderColor: ydatas[i].zxcolor, // 折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }
            },
            type: 'line',
            data: ydatas[i].data
          }
@@ -371,33 +377,33 @@
            symbol: 'circle', // 折点形状
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            // itemStyle: {
            //   normal: {
            //     color: function (c) { // 根据value 显示不同的折点颜色
            //       let biaozhuiz
            //       for (let i = 0; i < exhbzzList.length; i++) {
            //         if (exhbzzList[i].name == c.seriesName) {
            //           biaozhuiz = exhbzzList[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: ydatas[i].zxcolor, // 折点边框的颜色
            //     label: { // 显示值
            //       show: false
            //     }
            //   }
            // },
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (let i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name === c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > biaozhuiz * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                },
                borderColor: ydatas[i].zxcolor, // 折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }
            },
            type: 'line',
            data: ydatas[i].data,
            markLine: { // 平均值 ， 和 指标上限
@@ -471,8 +477,8 @@
                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:#F206FF;"></span>'
              } else {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>'
              } else if (seriesName === '废气流量') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#70ff49;"></span>'
              }
              s += maker + seriesName + ':' + valueFliter + '<br />'
            }
@@ -581,7 +587,7 @@
          type: 'value',
          name: dataUnit,
          max: function (value) {
            const ma = value.max > 120 ? value.max : 120
            const ma = value.max > 12 ? value.max : 120
            return parseInt(ma)
          },
          axisLabel: {

 src/components/BaseNav/WasteGas/HourData.vue

@@ -23,7 +23,7 @@
      </div>
      <div style="width:5rem;height:1.5rem;" id="echarts" ref="wastegashour"></div>
    </div>
<!--    明细弹框-->
    <!--    明细弹框-->
    <el-dialog :visible.sync="showSchedule"
               :modal="false"
               v-dialogDrag
@@ -276,7 +276,7 @@
            iconurl = 'image://../assets/imgs/legend/grn.png'
          } else if (nameList[l] === '温度') {
            iconurl = 'image://../assets/imgs/legend/WenDu.png'
          } else {
          } else if (nameList[l] === '废气流量') {
            iconurl = 'image://../assets/imgs/legend/VOCs.png'
          }

@@ -314,18 +314,15 @@
          if (nameList[j] === '二氧化硫') {
            zdcbcolor = 'red'
            zxcolor = '#fff21c'
          } else if (nameList[j] === '氨氮') {
          } else if (nameList[j] === '氮氧化物') {
            zdcbcolor = 'red'
            zxcolor = '#00B0F0'
          } else if (nameList[j] === '烟尘') {
            zdcbcolor = 'red'
            zxcolor = '#f48183'
          } else if (nameList[j] === '温度') {
          } else if (nameList[j] === '废气流量') {
            zdcbcolor = 'red'
            zxcolor = '#F206FF'
          } else {
            zdcbcolor = 'red'
            zxcolor = '#9ACD32'
            zxcolor = '#8fdc6e'
          }
          const ydata = {
            name: nameList[j],
@@ -358,6 +355,8 @@
        dataUnit = '气量(m³/h)'
      }

      const bzzList = this.exhbzzList

      const serLists = []
      for (let j = 0; j < ydatas.length; j++) {
        const len = ydatas[j].data.length
@@ -369,7 +368,7 @@
      }

      for (let i = 0; i < ydatas.length; i++) {
        // const zdcbcolor = ydatas[i].zdcbcolor
        const zdcbcolor = ydatas[i].zdcbcolor
        const bzz = ydatas[i].bzz
        let obj
        if (bzz == null) {
@@ -379,31 +378,33 @@
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            yAxisIndex: 1,
            // itemStyle: {
            //   normal: {
            //     color: function (c) { // 根据value 显示不同的折点颜色
            //       let biaozhuiz
            //       for (let i = 0; i < exhbzzList.length; i++) {
            //         if (exhbzzList[i].name === c.seriesName) {
            //           biaozhuiz = exhbzzList[i].bzhui
            //         }
            //       }
            //       if (c.value > 999999999999) {
            //         return zdcbcolor
            //       } else {
            //         return '#33c95f'
            //       }
            //     },
            //     lineStyle: { // 折线的颜色
            //       color: ydatas[i].zxcolor,
            //       width: 5
            //     },
            //     borderColor: ydatas[i].zxcolor, // 折点边框的颜色
            //     label: { // 显示值
            //       show: false
            //     }
            //   }
            // },
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (let i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name === c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > biaozhuiz * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                },
                borderColor: ydatas[i].zxcolor, // 折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }
            },
            type: 'line',
            data: ydatas[i].data
          }
@@ -415,21 +416,21 @@
            smooth: false, // 直线 ，true 为曲线
            itemStyle: {
              normal: {
                // color: function (c) { // 根据value 显示不同的折点颜色
                //   let biaozhuiz
                //   for (let i = 0; i < exhbzzList.length; i++) {
                //     if (exhbzzList[i].name == c.seriesName) {
                //       biaozhuiz = exhbzzList[i].bzhui
                //     }
                //   }
                //   if (c.value > biaozhuiz) {
                //     return zdcbcolor
                //   } else if (c.value > biaozhuiz * 0.9) {
                //     return '#FFA500'
                //   } else {
                //     return '#33c95f'
                //   }
                // },
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (let i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name === c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > biaozhuiz * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
@@ -513,7 +514,7 @@
                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:#F206FF;"></span>'
              } else {
              } else if (seriesName === '废气流量') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>'
              }
              s += maker + seriesName + ':' + valueFliter + '<br />'
@@ -623,7 +624,7 @@
          type: 'value',
          name: dataUnit,
          max: function (value) {
            const ma = value.max > 120 ? value.max : 120
            const ma = value.max > 12 ? value.max : 12
            return parseInt(ma)
          },
          axisLabel: {

 src/components/BaseNav/WasteGas/WasteGasIndex.vue

@@ -16,13 +16,13 @@
            <div :class="active===2?'hover':''" class="uncheck" @click='tabTaggle("DayData",2)'>日数据</div>
            <div :class="active===3?'hover':''" class="uncheck" @click='tabTaggle("Detail",3)'>人工监测数据</div>
          </div>
          <div class="navigation-right">
          <div class="navigation-right" v-if="active !== 3">
            <p>正常</p>
            <i style=" background: #4ec99c;"></i>
            <p>预警</p>
            <i style=" background: orange;"></i>
            <i style=" background: #fc9303;"></i>
            <p>超标</p>
            <i style=" background: red;"></i>
            <i style=" background: #fc1d04;"></i>
          </div>
        </div>
        <component :is="currentTab" ref="RealData"></component>

 src/components/BaseNav/WasteGas/WasteGasRealChart.vue

@@ -22,16 +22,16 @@
        <el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option>
      </el-select>
      <el-button @click="querySearch">查询</el-button>
      <el-button>明细表</el-button>
    </div>
    <div class="echarts-chart">
      <div style="width:5rem;height:1.5rem;" ref="echarts"></div>
      <!--      <public-chart :propsData="propsData"></public-chart>-->
    </div>
  </div>
</template>

<script>

// import PublicChart from '../PublicChart'
import PublicDataStandard from '../PublicDataStandard'
import mapApi from '../../../api/mapApi'
import 'dayjs/locale/es'
@@ -40,6 +40,7 @@
export default {
  name: 'WasteGasRealChart',
  components: {
    // PublicChart,
    PublicDataStandard
  },
  data () {
@@ -86,6 +87,7 @@
            val: null
          }
        }],
      propsData: {},

      // 开始 /结束 时间 和采样点值的绑定值数据
      formData: {
@@ -148,9 +150,9 @@
          const nameListTemp = [
            {
              'TJIP45.y2h508CEMS01NOX': '氮氧化物',
              'TJIP45.y2h508CEMS01SO2': '烟尘',
              'TJIP45.y2h508CEMS01F': '二氧化磷',
              'TJIP45.y2h508CEMS01PM': 'ph'
              'TJIP45.y2h508CEMS01SO2': '氧含量',
              'TJIP45.y2h508CEMS01F': '温度',
              'TJIP45.y2h508CEMS01PM': '废气流量'
              // 'TJIP45.lscl2tb552AI10710': '二氧化碳'
            }
          ]
@@ -223,15 +225,15 @@
        for (let l = 0; l < nameList.length; l++) {
          let obj
          let iconUrl
          if (nameList[l] === 'ph') {
          if (nameList[l] === '温度') {
            iconUrl = 'image://../assets/imgs/legend/WenDu.png'
          } else if (nameList[l] === '氮氧化物') {
            iconUrl = 'image://../assets/imgs/legend/NOX.png'
          } else if (nameList[l] === '烟尘') {
            iconUrl = 'image://../assets/imgs/legend/zongdan.png'
          } else if (nameList[l] === '二氧化磷') {
            iconUrl = 'image://../assets/imgs/legend/YanChen.png'
          } else if (nameList[l] === '二氧化碳') {
          } else if (nameList[l] === '氧含量') {
            iconUrl = 'image://../assets/imgs/legend/VOCs.png'
          } else if (nameList[l] === '废气流量') {
            iconUrl = 'image://../assets/imgs/legend/VOCs.png'
          }

@@ -265,7 +267,7 @@

        for (let j = 0; j < nameList.length; j++) {
          let zdcbcolor, zxcolor
          if (nameList[j] === 'ph') {
          if (nameList[j] === '温度') {
            zdcbcolor = 'red'
            zxcolor = '#f206ff'
          } else if (nameList[j] === '烟尘') {
@@ -274,23 +276,21 @@
          } else if (nameList[j] === '氮氧化物') {
            zdcbcolor = 'red'
            zxcolor = '#00B0F0'
          } else if (nameList[j] === '二氧化碳') {
          } else if (nameList[j] === '废气流量') {
            zdcbcolor = 'red'
            zxcolor = '#9ACD32'
          } else if (nameList[j] === '二氧化磷') {
          } else if (nameList[j] === '氧含量') {
            zdcbcolor = 'red'
            zxcolor = '#f48183'
            zxcolor = '#008000'
          }
          let ydata
          // 临时数据
          const BBZMAPPING = [
            {
              氮氧化物: 35,
              烟尘: 9,
              二氧化磷: 15,
              ph: 0.3
            }
          ]
          const BBZMAPPING = {
            氮氧化物: 30,
            烟尘: 9,
            二氧化磷: 15,
            ph: 0.3
          }
          for (let m = 0; m < this.EXHRealTimeDataList.length; m++) {
            let stdValue = null
            if (this.EXHRealTimeDataList[m].name === nameList[j]) {
@@ -298,9 +298,14 @@
              //   i++
              //   stdValue = BBZMAPPING[this.EXHRealTimeDataList[m].name]
              // }
              BBZMAPPING.forEach(item => {
              // BBZMAPPING.forEach(item => {
              //   stdValue = BBZMAPPING[this.EXHRealTimeDataList[m].name]
              // })
              for (const p in BBZMAPPING) {
                // console.log('p' + p)
                this.a = p
                stdValue = BBZMAPPING[this.EXHRealTimeDataList[m].name]
              })
              }

              ydata = {
                name: nameList[j],
@@ -335,6 +340,9 @@
        const zdcbcolor = ydatas[i].zdcbcolor
        const bz = ydatas[i].bzz
        let obj
        let biaozhuiz
        const exhbzzList = this.exhbzzList
        // console.log(exhbzzList)
        if (bz) {
          obj = {
            name: ydatas[i].name,
@@ -344,14 +352,14 @@
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  for (let i = 0; i < this.exhbzzList.length; i++) {
                    if (this.exhbzzList[i].name === c.seriesName) {
                      this.biaozhuiz = this.exhbzzList[i].bzhui
                  for (let i = 0; i < exhbzzList.length; i++) {
                    if (exhbzzList[i].name === c.seriesName) {
                      biaozhuiz = exhbzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > this.biaozhuiz) {
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > this.biaozhuiz * 0.9) {
                  } else if (c.value[1] > biaozhuiz * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
@@ -399,15 +407,14 @@
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  // let biaozhuiz
                  // for (let i = 0; i < this.exhbzzList.length; i++) {
                  //   if (this.exhbzzList[i].name === c.seriesName) {
                  //     this.biaozhuiz = this.exhbzzList[i].bzhui
                  //   }
                  // }
                  if (c.value[1] > 20) {
                  for (let i = 0; i < exhbzzList.length; i++) {
                    if (exhbzzList[i].name === c.seriesName) {
                      biaozhuiz = exhbzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > 15 * 0.9) {
                  } else if (c.value[1] > biaozhuiz * 0.8) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
@@ -466,7 +473,7 @@
              let maker = params[i].marker
              let colo = ''
              switch (seriesName) {
                case 'ph':
                case '温度':
                  colo = '#f206ff'
                  break
                case '氮氧化物':
@@ -475,11 +482,11 @@
                case '烟尘':
                  colo = '#e0ffff'
                  break
                case '二氧化碳':
                case '废气流量':
                  colo = '#9ACD32'
                  break
                case '二氧化磷':
                  colo = '#f48183'
                case '氧含量':
                  colo = '#008000'
                  break
                default:
                  colo = ''

 src/components/BaseNav/WasteWater/HourData.vue

File was deleted

 src/components/BaseNav/WasteWater/WasteWaterDayChart.vue

File was renamed from src/components/BaseNav/WasteWater/DayData.vue
@@ -1,31 +1,31 @@
<!--  日数据  -->
<template>
  <div id="Tab">
  <div class="echarts-box">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
      <span class="time-select">{{ formInline.timeStart }}日——{{ formInline.timeEnd }}日</span>
      <span class="time-select">{{ formData.timeStart }}日—{{ formData.timeEnd }}日</span>
    </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" value-format="yyyy-MM-dd" v-model="formInline.timeStart"></el-date-picker>
            </span>
          </div>
          <div class="pickerData">
            <span>结束时间:</span>
            <span class="pickerTable">
              <el-date-picker type="datetime" value-format="yyyy-MM-dd" v-model="formInline.timeEnd"></el-date-picker>
            </span>
          </div>
        </div>
        <div class="detailbtn hover-bottom">查询</div>
        <div class="detailbtn hover-bottom">明细表</div>
      </div>
      <div style="width:5rem;height:1.5rem;" id="echarts" ref="echartsday">
      </div>
    <div class="echarts-form">
      <span class="demonstration">开始时间：</span>
      <el-date-picker
          v-model="formData.timeStart"
          value-format="yyyy-MM-dd"
          type="datetime">
      </el-date-picker>
      <span class="demonstration">结束时间：</span>
      <el-date-picker
          v-model="formData.timeEnd"
          value-format="yyyy-MM-dd"
          type="datetime">
      </el-date-picker>
      <span class="demonstration">采样点数：</span>
      <el-select v-model="formData.region" placeholder="请选择" style="width: 80px">
        <el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option>
      </el-select>
      <el-button @click="querySearch()">查询</el-button>
      <el-button>明细表</el-button>
    </div>
    <div class="echarts-chart">
      <div style="width:5rem;height:1.5rem;" ref="echartsDay"></div>
    </div>
  </div>
</template>
@@ -36,9 +36,8 @@
import mapApi from '@/api/mapApi'

export default {
  name: 'DayData',
  name: 'WasteWaterDayChart',
  components: {
    // PublicDetailedList
    PublicDataStandard
  },
  data () {
@@ -85,13 +84,12 @@
            val: null
          }
        }],
      formInline: {
        region: '',
      formData: {
        region: '25',
        regionList: [25, 50, 75, 100],
        timeStart: dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
        timeEnd: dayjs().format('YYYY-MM-DD')
      },
      timeStart: '',
      timeEnd: '',
      chart: null,
      dataType: 1,
      jcdID: 1,
@@ -105,15 +103,15 @@
    })
  },
  methods: {
    querySearch () {

    },
    async draw24Chart () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      this.formInline.timeEnd = dayjs().format('YYYY-MM-DD')
      this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD')
      const data = {
        onLineMonEmissPointId: 23,
        monItemId: 28,
        beginTime: this.formInline.timeStart,
        endTime: this.formInline.timeEnd,
        beginTime: this.formData.timeStart,
        endTime: this.formData.timeEnd,
        dataType: this.dataType
      }
      const result = (await mapApi.getQueryOnlineMonData(data)).Result.DataInfo
@@ -129,18 +127,14 @@
        let data
        const bzh = []

        // wrwIDS = []

        for (let i = 0; i < d.length; i++) {
          if (d[i].MonItemId === '29') {
            continue
          }
          // 20190430 add  获取监测点id 污染物id  检测项id
          // getWRW(d[i])
          const MonTimeStr = d[i].MonTimeStr

          const d1 = MonTimeStr.split('/')
          // var d2=d1[2].split(' ');
          // let d2=d1[2].split(' ');
          let strDate
          if (d1[1] > 9) {
            // if(d2[0]>9){
@@ -178,7 +172,7 @@
            if (dateList.indexOf(strDate) < 0) {
              dateList.push(strDate)
            }
            for (var j = 0; j < dataList.length; j++) {
            for (let j = 0; j < dataList.length; j++) {
              if (d[i].PoltmtrlName.trim() === dataList[j].name) {
                dataList[j].data.push(d[i].MonQty)
              }
@@ -187,16 +181,12 @@
        }
        // 处理数据结束

        var divid = 'mychart1eff'
        const lengList = []
        let objTemp

        var title = name

        var lengList = []
        var objTemp

        for (var l = 0; l < nameList.length; l++) {
          var obj
          var iconurl
        for (let l = 0; l < nameList.length; l++) {
          let obj
          let iconurl
          if (nameList[l] === 'COD') {
            iconurl = 'image://../assets/imgs/legend/SO2.png'
          } else if (nameList[l] === '氨氮') {
@@ -245,7 +235,7 @@
        const ydatas = []

        for (let j = 0; j < nameList.length; j++) {
          var zdcbcolor, zxcolor
          let zdcbcolor, zxcolor
          if (nameList[j] === 'COD') {
            zdcbcolor = 'red'
            zxcolor = '#fff21c'
@@ -282,58 +272,59 @@
        }

        const yname = '浓度(mg/l)'
        this.effChartShow(divid, title, legend, xdata, ydatas, yname, this.jcdID, this.datatype)
        this.effChartShow(legend, xdata, ydatas, yname, this.jcdID, this.datatype)
      }
    },
    effChartShow (divid, title, legend, xdata, ydatas, yname, jcdID, datatype) {
      this.chart = this.$echarts.init(this.$refs.echartsday)
    effChartShow (legend, xdata, ydatas, yname, jcdID, datatype) {
      this.chart = this.$echarts.init(this.$refs.echartsDay)
      this.chart.clear()
      // console.log(this.chart)
      this.chart.clear()
      var dataUnit = ''
      let dataUnit = ''
      if (datatype === 1) {
        dataUnit = '流量(m³/d)'
      } else {
        dataUnit = '流量(m³/h)'
      }
      var serLists = []
      for (var i = 0; i < ydatas.length; i++) {
        // var zdcbcolor = ydatas[i].zdcbcolor
        var bz = ydatas[i].bzz
        var obj
      const bzzList = this.bzzList
      const serLists = []
      for (let i = 0; i < ydatas.length; i++) {
        const zdcbcolor = ydatas[i].zxcolor
        const bz = ydatas[i].bzz
        let obj
        if (bz) {
          obj = {
            name: ydatas[i].name,
            symbol: 'circle', // 折点形状
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            // itemStyle: {
            //   normal: {
            //     color: function (c) { // 根据value 显示不同的折点颜色
            //       // var biaozhuiz
            //       let bzlist = this.bzzList
            //       for (let i = 0; i < this.bzzList.length; i++) {
            //         if (this.bzzList[i].name === c.seriesName) {
            //           this.bz = this.bzzList[i].bzhui
            //         }
            //       }
            //       if (c.value > this.bz) {
            //         return zdcbcolor
            //       } else if (c.value > this.bz * 0.9) {
            //         return '#FFA500'
            //       } else {
            //         return '#33c95f'
            //       }
            //     },
            //     lineStyle: { // 折线的颜色
            //       color: ydatas[i].zxcolor,
            //       width: 5
            //     },
            //     borderColor: 'black', // 折点边框的颜色
            //     label: { // 显示值
            //       show: false
            //     }
            //   }
            // },
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (let i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name === c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > 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: { // 平均值 ， 和 指标上限
@@ -363,38 +354,40 @@
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            yAxisIndex: 1,
            // itemStyle: {
            //   normal: {
            //     color: function (c) { // 根据value 显示不同的折点颜色
            //       // var biaozhuiz
            //       for (let i = 0; i < this.bzzList.length; i++) {
            //         if (this.bzzList[i].name === c.seriesName) {
            //           this.bz = this.bzzList[i].bzhui
            //         }
            //       }
            //       if (c.value > 9999999) {
            //         return zdcbcolor
            //       } else {
            //         return '#33c95f'
            //       }
            //     },
            //     lineStyle: { // 折线的颜色
            //       color: ydatas[i].zxcolor,
            //       width: 5
            //     },
            //     borderColor: 'black', // 折点边框的颜色
            //     label: { // 显示值
            //       show: false
            //     }
            //   }
            // },
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (let i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name === c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > 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
          }
        }
        serLists.push(obj)
      }
      var option = {
      const option = {
        /*  title: {
          text: title,
      }, */
@@ -407,18 +400,18 @@
            }
          },
          formatter: function (params) {
            var s = params[0].name + '<br />'
            for (var i = 0; i < params.length; i++) {
              // var name = params[i].name
            let s = params[0].name + '<br />'
            for (let i = 0; i < params.length; i++) {
              // let name = params[i].name
              // 图表title名称
              var seriesName = params[i].seriesName
              const seriesName = params[i].seriesName
              // 值
              var value = params[i].value
              const value = params[i].value

              // var valueFliter = formatter(value)
              var valueFliter = parseFloat(value).toFixed(2)
              // let valueFliter = formatter(value)
              const valueFliter = parseFloat(value).toFixed(2)

              var maker = params[i].marker
              let 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 === '氨氮') {
@@ -497,7 +490,7 @@
          type: 'value',
          name: yname,
          // max: function (value) {
          //   var max_val_list = [] // 所有显示折线的标准值
          //   let max_val_list = [] // 所有显示折线的标准值
          //   if (bzzList && bzzList.length > 0) {
          //     $.each(bzzList, function (index, item) {
          //       max_val_list.push(item.bzhui)
@@ -506,7 +499,7 @@
          //   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]
          //   let 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: {
@@ -563,124 +556,4 @@

<style scoped lang="less">

.animation {
  .infomation {
    padding: 0.02rem 0.04rem;

    .grid-content {
      font-size: 0.08rem;
      background-color: #2e4967;
      text-align: center;
      border-radius: 0.01rem;
      height: 0.15rem;
      line-height: 0.15rem;
      margin-right: 0.04rem;
      padding: 0 0.04rem
    }
  }
}

.tab-scroll {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .time-select {
    cursor: pointer;
    padding: 5px;
    border: 1px solid #2b87c8;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    font-size: 11px;
    width: 280px;
  }
}

.form-echrts {
  width: 100%;
  border-top: 1px solid #396d83;
  //margin: 10px 10px 10px 10px;
  .from-search {
    display: flex;
    padding: 15px 0;

    > div {
      margin-left: 10px
    }

    .pickerMon {
      display: flex;

      > div:first-child {
        margin-right: 10px;
      }

      .pickerData {
        flex: 1;
        display: flex;

        > span {
          line-height: 22px;
          margin-right: 15px;
        }

        .pickerTable {
          margin-left: 3px;
        }
      }
    }

    /deep/ .el-date-editor--datetime {
      width: 100%;
    }

    /deep/ .el-input__inner {
      position: relative;
      width: 1rem;
      background-color: #2e4967;
      color: #fff;
      font-size: 0.08rem;
      height: 0.15rem;
      padding: 0;
      border: none;
      text-align: center;
      z-index: 9999;
      //padding-left:20px ;
      //padding: 0!important;
    }

    /deep/ .el-input__icon {
      display: block;
      width: 1rem;
      height: 0.15rem;
      line-height: 0.15rem;
      cursor: pointer;
      font-size: 0;
    }

    input::-webkit-calendar-picker-indicator {
      opacity: 100;
    }

    .detailbtn {
      background-color: #2e4967;
      text-align: center;
      padding: 0 7px;
      height: 0.15rem;
      line-height: 0.15rem;
      border-radius: 4px;
      margin-right: 6px;
    }
  }

  .el-dialog-div {
    overflow: auto;
  }

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

 src/components/BaseNav/WasteWater/WasteWaterIndex.vue

@@ -9,20 +9,6 @@
        <span></span>
        <span></span>
        <span></span>
        <!--        <el-tabs v-model="activeName" @tab-click="handleClick">-->
        <!--          <el-tab-pane label="实时数据" name="first">-->
        <!--            <RealData></RealData>-->
        <!--          </el-tab-pane>-->
        <!--          <el-tab-pane label="小时数居" name="second">-->
        <!--            <HourData></HourData>-->
        <!--          </el-tab-pane>-->
        <!--          <el-tab-pane label="日数据" name="third">-->
        <!--            <DayData></DayData>-->
        <!--          </el-tab-pane>-->
        <!--          <el-tab-pane label="人工监测数据" name="fourth">-->
        <!--            <Detail></Detail>-->
        <!--          </el-tab-pane>-->
        <!--        </el-tabs>-->
        <div class="navigation">
          <div class="navigation-left">
            <div :class="active===0?'hover':''" class="uncheck" @click='tabTaggle("RealData",0)'>实时数据</div>
@@ -30,13 +16,13 @@
            <div :class="active===2?'hover':''" class="uncheck" @click='tabTaggle("DayData",2)'>日数据</div>
            <div :class="active===3?'hover':''" class="uncheck" @click='tabTaggle("Detail",3)'>人工监测数据</div>
          </div>
          <div class="navigation-right">
          <div class="navigation-right" v-if="active !== 3">
            <p>正常</p>
            <i style=" background: #4ec99c;"></i>
            <p>预警</p>
            <i style=" background: orange;"></i>
            <i style=" background: #fc9303;"></i>
            <p>超标</p>
            <i style=" background: red;"></i>
            <i style=" background: #fc1d04;"></i>
          </div>
        </div>
        <component :is="currentTab" ref="RealData"></component>
@@ -55,8 +41,8 @@
import PublicSector from '../PublicSector'
// 图表组件
import RealData from './WasteWaterRealChart'
import HourData from './HourData'
import DayData from './DayData'
import HourData from './WasteWaterHoursChart'
import DayData from './WasteWaterDayChart'
import Detail from './Detail'

export default {
@@ -117,23 +103,23 @@

    .default-uncheck {
      background-color: #0e639e;
      color: #fff;
      color: #C0C0C0;
      cursor: pointer;
    }

    .hover {
      background-color: #0e639e;
      color: #fff;
      background-color: #0e539e;
      color: #ffffff;
      cursor: pointer;
    }

    .hover:hover {
      cursor: pointer;
      padding: 5px;
      border: 1px solid #2b87c8;
      border: 1px solid #5F9EA0;
      border-radius: 4px;
      text-align: center;
      color: #fff;
      color: #F0FFFF;
    }
  }


 src/components/BaseNav/WasteWater/WasteWaterRealChart.vue

@@ -18,11 +18,11 @@
          type="datetime">
      </el-date-picker>
      <span class="demonstration">采样点数：</span>
      <el-select v-model="region" placeholder="请选择" style="width: 80px">
        <el-option v-for="(item,index) in regionList" :key="index" :label="item" :value="item"></el-option>
      <el-select v-model="formData.region" placeholder="请选择" style="width: 80px">
        <el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option>
      </el-select>
      <el-button @click="querySearch()">查询</el-button>
      <el-button>明细表</el-button>
      <!--      <el-button>明细表</el-button>-->
    </div>
    <div class="echarts-chart">
      <div style="width:5rem;height:1.5rem;" ref="echarts"></div>
@@ -45,7 +45,6 @@
  },
  data () {
    return {
      a: '',
      // tab栏传递接收数据
      dataStandard: [
        {
@@ -88,19 +87,22 @@
            val: null
          }
        }],
      // 表单数据绑定值
      formData: {
        region: '25',
        regionList: [25, 50, 75, 100],
        startTime: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
      },
      region: '25',
      regionList: [25, 50, 75, 100],
      datatype: 1,
      // 数据分类处理存储列表
      RealTimeDataList: [],
      bzz: null,
      bzzList: [],
      // 用于处理标准值
      standardValues: null,
      // 标准值列表
      standardValuesList: [],
      // 用于图表展示设置数组
      nameList: [],
      // legend类别图表展示设置数组
      lengList: [],
      legendList: [],
      ydatas: []
    }
  },
@@ -122,46 +124,47 @@
        $endTime: this.formData.endTime,
        $step: 15
      }
      // console.log(data)
      const result = (await mapApi.getDataItems(data)).data
      // 数据按类别分组
      this.pointsSet(result)
      // 图标存储处理
      this.legendSet()
      // ydata数据
      // y轴data数据
      this.yDataSet()
      // 根据已有数据绘制图表
      this.drawRealTimeDateChart()
    },
    // 接口数据按照 数据内分类别设置
    pointsSet (d) {
      let data = []
      let datalist = []
      // 数组数据置空
      this.nameList = []
      this.RealTimeDataList = []

      let data = []
      let datalist = []

      for (let i = 0; i < d.length; i++) {
        // this.RealTimeDataList = []
        // 判断是否继续执行
        if (d[i].ErrorMessage != null) {
          continue
        }

        // temp 临时数据判断方法
        const tempList = [
          {
            'TJIP45.lscl2tbAIA-10505-1': '氮氧化物',
            'TJIP45.lscl2tbAIA-10505-2': '烟尘',
            'TJIP45.lscl2tb552AISA11202A': '二氧化磷',
            'TJIP45.lscl2tb552AISA11201B': 'pH',
            'TJIP45.lscl2tb552AI10710': '二氧化碳'
            'TJIP45.lscl2tb552AISA11201B': 'COD',
            'TJIP45.lscl2tbAIA-10505-1': '氨氮',
            'TJIP45.lscl2tbAIA-10505-2': '总磷',
            'TJIP45.lscl2tb552AI10710': '总氮',
            'TJIP45.lscl2tb552AISA11202A': '废水流量'
          }
        ]
        // 指标
        // 指标 临时用于数据处理
        const name = tempList[0][d[i].UnionTagCode]
        // 判断市局类型进行分组

        // 判断市局类型进行分组 =>数组为空时
        if (this.nameList.length === 0) {
          // 数组为空时
          this.nameList.push(name)
          // todo 用dayjs
          const newDate = new Date(d[i].ReadTime)
          data = {
            name: name,
@@ -171,7 +174,6 @@
            name: name,
            data: [data]
          }
          // console.log('1111111')
          this.RealTimeDataList.push(datalist)
        } else if (this.nameList.indexOf(name) < 0) {
          // 没有指标时
@@ -185,7 +187,6 @@
            name: name,
            data: [data]
          }
          // console.log('222222222')
          this.RealTimeDataList.push(datalist)
        } else if (i === d.length - 1) {
          // 循环到最后
@@ -200,7 +201,6 @@
              name: name,
              data: [data]
            }
            // console.log('3333333')
            this.RealTimeDataList.push(datalist)
          } else {
            const newDate = new Date(d[i].ReadTime)
@@ -208,7 +208,6 @@
              name: name,
              value: [newDate, d[i].TagValue]
            }
            // console.log('444444')
            for (let k = 0; k < this.RealTimeDataList.length; k++) {
              if (this.RealTimeDataList[k].name === name) {
                this.RealTimeDataList[k].data.push(data)
@@ -228,24 +227,23 @@
          }
        }
      }
      // console.log(this.RealTimeDataList)
    },
    // legend类别图表展示设置数组
    legendSet () {
      this.lengList = []
      this.legendList = []
      let objTemp
      for (let l = 0; l < this.nameList.length; l++) {
        let obj
        let IconUrl
        if (this.nameList[l] === 'pH') {
          IconUrl = 'image://../assets/imgs/legend/WenDu.png'
        } else if (this.nameList[l] === '氮氧化物') {
        if (this.nameList[l] === 'COD') {
          IconUrl = 'image://../assets/imgs/legend/SO2.png'
        } else if (this.nameList[l] === '氨氮') {
          IconUrl = 'image://../assets/imgs/legend/NOX.png'
        } else if (this.nameList[l] === '烟尘') {
          IconUrl = 'image://../assets/imgs/legend/zongdan.png'
        } else if (this.nameList[l] === '二氧化碳') {
        } else if (this.nameList[l] === '总磷') {
          IconUrl = 'image://../assets/imgs/legend/YanChen.png'
        } else if (this.nameList[l] === '二氧化磷') {
        } else if (this.nameList[l] === '总氮') {
          IconUrl = 'image://../assets/imgs/legend/zongdan.png'
        } else if (this.nameList[l] === '废水流量') {
          IconUrl = 'image://../assets/imgs/legend/VOCs.png'
        }
        if (this.nameList[l] === '废水' || this.nameList[l] === '废水流量') { // 将废水流量排到数组最后
@@ -268,66 +266,60 @@
            itemWidth: 20,
            itemHeight: 5
          }
          this.lengList.push(obj)
          this.legendList.push(obj)
        }
      }
      this.lengList.push(objTemp)
      this.legendList.push(objTemp)
    },
    // yDataSet 数据处理
    yDataSet () {
      this.bzzList = []
      // 数组添加数据 置空
      this.standardValuesList = []
      this.ydatas = []
      for (let j = 0; j < this.nameList.length; j++) {
        let zdcbcolor, zxcolor
        if (this.nameList[j] === 'pH') {
          zdcbcolor = 'red'
          zxcolor = '#900090'
        let pointColor, lineColor
        if (this.nameList[j] === 'COD') {
          pointColor = 'red'
          lineColor = '#ffff00'
        } else if (this.nameList[j] === '氨氮') {
          zdcbcolor = 'red'
          zxcolor = '#00B0F0'
        } else if (this.nameList[j] === '烟尘') {
          zdcbcolor = 'red'
          zxcolor = '#f48183'
          pointColor = 'red'
          lineColor = '#00B0F0'
        } else if (this.nameList[j] === '总磷') {
          pointColor = 'red'
          lineColor = '#f48183'
        } else if (this.nameList[j] === '总氮') {
          zdcbcolor = 'red'
          zxcolor = '#e0ffff'
        } else {
          zdcbcolor = 'red'
          zxcolor = '#9ACD32'
          pointColor = 'red'
          lineColor = '#e0ffff'
        } else if (this.nameList[j] === '废水流量') {
          pointColor = 'red'
          lineColor = '#9ACD32'
        }
        let ydata

        // 临时数据
        const BBZMAPPING = {
          COD: 35,
          pH: 9,
          总氮: 15,
          氨氮: 30,
          总磷: 0.3,
          氨氮: 3
          总氮: 15,
          废水流量: 3
        }
        for (let m = 0; m < this.RealTimeDataList.length; m++) {
          let stdValue = null
          if (this.RealTimeDataList[m].name === this.nameList[j]) {
            for (const p in BBZMAPPING) {
              // console.log('p' + p)
              this.a = p
              stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
            }
            // console.log(stdValue)
            this.bzz = {
            stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
            this.standardValues = {
              name: this.nameList[j],
              bzhui: stdValue
              standardValue: stdValue
            }
            ydata = {
            const yData = {
              name: this.nameList[j],
              data: this.RealTimeDataList[m].data,
              zdcbcolor: zdcbcolor,
              zxcolor: zxcolor,
              bzz: stdValue
              pointColor: pointColor,
              lineColor: lineColor,
              standardValue: stdValue
            }
            // console.log(stdValue)
            this.bzzList.push(this.bzz)
            this.ydatas.push(ydata)
            this.standardValuesList.push(this.standardValues)
            this.ydatas.push(yData)
          }
        }
      }
@@ -337,53 +329,58 @@
      this.myChart = this.$echarts.init(this.$refs.echarts)
      this.myChart.clear()

      const legend = this.lengList
      const yname = '浓度(mg/m³)'
      const bzzList = this.bzzList
      // y轴侧边标题neme
      const ySideName = '浓度(mg/m³)'
      // 标准值列表
      const standardValuesList = this.standardValuesList

      // 应用于数据结果判断标准值
      let standardValue

      // series数据存储
      const serLists = []

      for (let i = 0; i < this.ydatas.length; i++) {
        const zdcbcolor = this.ydatas[i].zdcbcolor
        const bz = this.ydatas[i].bzz
        // console.log(bz)
        let obj
        // 应用于数据处理
        const pointColor = this.ydatas[i].pointColor
        // 数据标准值
        const bz = this.ydatas[i].standardValue
        let seriesObj

        if (bz) {
          obj = {
          seriesObj = {
            name: this.ydatas[i].name,
            // symbol:'circle', // 折点形状
            // symbolSize: 3,   //大小
            smooth: true, // 直线 ，true 为曲线
            smooth: true,
            type: 'line',
            data: this.ydatas[i].data,
            // borderColor: this.ydatas[i].pointColor,
            borderColor: '#fff',
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (let i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name === c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                color: function (c) {
                  for (let i = 0; i < standardValuesList.length; i++) {
                    if (standardValuesList[i].name === c.seriesName) {
                      standardValue = standardValuesList[i].standardValue
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > biaozhuiz * 0.9) {
                  if (c.value[1] > standardValue) {
                    return pointColor
                  } else if (c.value[1] > standardValue * 0.7) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: { // 折线的颜色
                  color: this.ydatas[i].zxcolor,
                lineStyle: {
                  color: this.ydatas[i].lineColor,
                  width: 2
                },
                // borderColor:'black',  //折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }
            },
            type: 'line',
            data: this.ydatas[i].data,
            markLine: { // 平均值 ， 和 指标上限
            markLine: {
              symbol: 'none',
              data: [{
                label: {
@@ -396,16 +393,15 @@
                yAxis: bz,
                lineStyle: {
                  normal: {
                    color: function (c) { // 根据value 显示不同的折点颜色
                      let biaozhuiz
                      for (let i = 0; i < bzzList.length; i++) {
                        if (bzzList[i].name === c.seriesName) {
                          biaozhuiz = bzzList[i].bzhui
                    color: function (c) {
                      for (let i = 0; i < standardValuesList.length; i++) {
                        if (standardValuesList[i].name === c.seriesName) {
                          standardValue = standardValuesList[i].standardValue
                        }
                      }
                      if (c.value[1] > biaozhuiz) {
                        return zdcbcolor
                      } else if (c.value[1] > biaozhuiz * 0.9) {
                      if (c.value[1] > standardValue) {
                        return pointColor
                      } else if (c.value[1] > standardValue * 0.7) {
                        return '#FFA500'
                      } else {
                        return '#33c95f'
@@ -413,62 +409,55 @@
                    }
                  }
                }
              }
              ]
              }]
            }
          }
        } else {
          obj = {
          seriesObj = {
            name: this.ydatas[i].name,
            symbol: 'circle', // 折点形状
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            symbol: 'circle',
            symbolSize: 10,
            smooth: false,
            yAxisIndex: 1,
            // itemStyle: {
            //   normal: {
            //     color: function (c) { // 根据value 显示不同的折点颜色
            //       for (let i = 0; i < this.bzzList.length; i++) {
            //         let biaozhuizs
            //         if (this.bzzList[i].name === c.seriesName) {
            //           biaozhuizs = this.bzzList[i].bzhui
            //         }
            //         console.log(biaozhuizs)
            //       }
            //       if (c.value[1] > 9) {
            //         return zdcbcolor
            //       } else {
            //         return '#33c95f'
            //       }
            //     },
            //     lineStyle: { // 折线的颜色
            //       color: this.ydatas[i].zxcolor,
            //       width: 5
            //     },
            //     borderColor: 'black', // 折点边框的颜色
            //     label: { // 显示值
            //       show: false
            //     }
            //   }
            // },
            // borderColor:'black',
            type: 'line',
            data: this.ydatas[i].data
            data: this.ydatas[i].data,
            itemStyle: {
              normal: {
                color: function (c) {
                  for (let i = 0; i < standardValuesList.length; i++) {
                    if (standardValuesList[i].name === c.seriesName) {
                      standardValue = standardValuesList[i].standardValue
                    }
                  }
                  if (c.value[1] > standardValue) {
                    return pointColor
                  } else if (c.value[1] > standardValue * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: { // 折线的颜色
                  color: this.ydatas[i].lineColor,
                  width: 2
                },
                label: { // 显示值
                  show: false
                }
              }
            }
          }
        }
        if (this.ydatas[i].name === '废气流量' || this.ydatas[i].name === '废气') {
          obj.yAxisIndex = 1
        if (this.ydatas[i].name === '废水流量' || this.ydatas[i].name === '废水') {
          seriesObj.yAxisIndex = 1
        }
        serLists.push(obj)
        serLists.push(seriesObj)
      }
      // console.log(serLists)
      let dataUnit = ''
      if (this.datatype === 1) {
        dataUnit = '流量(m³/d)'
      } else {
        dataUnit = '流量(m³/h)'
      }
      const dataUnit = '流量(m³/h)'
      // echarts图表option数据
      const options = {
        tooltip: { // 提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
@@ -479,8 +468,6 @@
          formatter: function (params) {
            let s = params[0].name + '<br />'
            for (let i = 0; i < params.length; i++) {
              // let name = params[i].name
              // 图表title名称
              const seriesName = params[i].seriesName
              // 值
              const value = params[i].value[1]
@@ -491,19 +478,19 @@
              let maker = params[i].marker
              let colo = ''
              switch (seriesName) {
                case 'pH':
                  colo = '#900090'
                case 'COD':
                  colo = '#ffff00'
                  break
                case '二氧化碳':
                case '氨氮':
                  colo = '#00B0F0'
                  break
                case '烟尘':
                case '总氮':
                  colo = '#e0ffff'
                  break
                case '氮氧化物':
                case '废水流量':
                  colo = '#9ACD32'
                  break
                case '二氧化磷':
                case '总磷':
                  colo = '#f48183'
                  break
                default:
@@ -516,17 +503,18 @@
            return s
          }
        },
        toolbox: { // 打印等工具
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        grid: { // 网格
          top: '20%'
        grid: {
          top: '20%',
          left: '15%'
        },
        legend: {
          data: legend
          data: this.legendList
        },
        dataZoom: [{
          type: 'inside',
@@ -546,10 +534,10 @@
            shadowOffsetY: 2
          }
        }],
        xAxis: { // x 轴设置
        xAxis: {
          type: 'time',
          boundaryGap: false,
          axisLabel: { // x轴全部显示
          axisLabel: {
            // rotate: 30,
            margin: 6,
            interval: 0,
@@ -557,7 +545,7 @@
              color: '#fff'
            }
          },
          splitLine: { // 网格垂直线为 虚线
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
@@ -569,16 +557,15 @@
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
              width: 1
            }
          }
          // data: xdata
        },
        yAxis: [{
          type: 'value',
          name: yname,
          name: ySideName,
          max: function (value) {
            return parseInt(value.max + 30)
            return parseInt(value.max + 3)
          },
          axisLabel: {
            formatter: '{value}',
@@ -591,11 +578,11 @@
          },
          splitLine: {
            show: false
          }, // y轴 网格线不显示,
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
              width: 1
            }
          }
        }, {
@@ -612,14 +599,14 @@
          },
          splitLine: {
            show: false
          }, // y轴 网格线不显示,
          },
          // inverse: true,
          // nameLocation: 'start',
          // max:500,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
              width: 1
            }
          }
        }],
@@ -633,60 +620,5 @@
</script>

<style scoped lang="less">
.echarts-box {
  .tab-scroll {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .time-select {
      cursor: pointer;
      padding: 5px;
      border: 1px solid #2b87c8;
      border-radius: 4px;
      text-align: center;
      color: #fff;
      font-size: 11px;
      width: 280px;
    }
  }

  .echarts-form {
    height: 0.3rem;
    line-height: 0.3rem;

    .demonstration {
      color: #00fff6;
      font-size: 12px;
      margin-left: 10px;
    }

    /deep/ .el-input__inner {
      height: 0.15rem;
      background-color: #2e4967;
      color: #fff;
      font-size: 12px;
      padding: 0;
      border-color: #00fff6;
      text-align: center;
    }

    .el-button {
      margin: 0 15px;
      width: 0.3rem;
      height: 0.15rem;
      display: inline-block;
      background-color: #2e4967;
      color: #fff;
      font-size: 12px;
      padding: 0;
      border-color: #00fff6;
      text-align: center;
    }
  }

  /deep/ .el-icon-time:before {
    content: " ";
  }
}
</style>

 src/components/LayerController/service/LayerFactory.js

@@ -117,8 +117,8 @@
      for (var j in configs) {
        const config = configs[j]
        const checked = config.checked
        console.log(zoom)
        console.log(k)
        // console.log(zoom)
        // console.log(k)
        if (checked && zoom > k) {
          this.show(config)
        } else if (checked && zoom < k) {
@@ -196,7 +196,7 @@
      this.findLayerById(layer.getLayers(), id)
    } else {
      layer.eachLayer(function (layer) {
        console.log(layer)
        // console.log(layer)
      })
    }
  }

 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/DrawLine.js

@@ -1,5 +1,5 @@
import L from 'leaflet'
import eventBus from '@/eventBus'
import eventBus from '../../../../../eventBus'

class DrawLine {
  constructor (map) {
@@ -38,11 +38,11 @@
    }

    dbClick = (e) => {
      console.log('双击结束', e)
      // console.log('双击结束', e)
      this.polyline.addTo(this.layers)
      // this.close(e.latlng);
      this.map.off('click', this.click).off('mousemove', this.mousemove).off('dblclick', this.dbClick)
      console.log(this.points)
      // console.log(this.points)
      eventBus.$emit('draw-hdm-line', this.points)
    }


 src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue

@@ -17,8 +17,8 @@
                       title="根据起始、结束管段进行连通性分析">清除
            </el-button>
            <el-scrollbar style="height:450px">
              <el-card shadow="hover"> <!-- style="height: 300px"-->
                <span class="clearfixs">起始管段</span>
              <el-card shadow="hover">
                <span class="fixed-style">起始管段</span>
                <el-table
                    ref="singleTable"
                    highlight-current-row
@@ -62,7 +62,7 @@
                    </template>
                  </el-table-column>
                </el-table>
                <span class="clearfixs">结束管段</span>
                <span class="fixed-style">结束管段</span>
                <el-table
                    max-height="200"
                    highlight-current-row
@@ -105,7 +105,7 @@
                    </template>
                  </el-table-column>
                </el-table>
                <span class="clearfixs">分析结果:<span style="color: red;">{{ currentLinkIsTrue }}</span></span>
                <span class="fixed-style">分析结果:<span style="color: red;">{{ currentLinkIsTrue }}</span></span>
                <el-table
                    highlight-current-row
                    max-height="200"
@@ -160,7 +160,7 @@
            <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" title="清除绘制">清除
            </el-button>
            <el-card shadow="hover">
              <span class="clearfixs">发生爆裂的管段</span>
              <span class="fixed-style">发生爆裂的管段</span>
              <el-table
                  ref="singleTable"
                  highlight-current-row
@@ -202,7 +202,7 @@
                  </template>
                </el-table-column>
              </el-table>
              <span class="clearfixs">需要关闭的阀门</span>
              <span class="fixed-style">需要关闭的阀门</span>
              <el-table
                  highlight-current-row
                  :data="bgFm"
@@ -343,7 +343,7 @@
            <el-button type="primary" @click="jdmClear" size="mini" style="margin-bottom: 5px;" title="清除截断面分析结果">清除
            </el-button>
            <el-card class="box-card">
              <div slot="header" class="clearfixs">
              <div slot="header" class="fixed-style">
                <span>管线查询结果</span>
              </div>
              <el-table
@@ -371,11 +371,11 @@
              </el-table>
            </el-card>
            <el-card class="box-card">
              <div slot="header" class="clearfixs">
              <div slot="header" class="fixed-style">
                <span>断面图</span>
              </div>
              <span v-show="!myChartShow" style="color: #909399;font-size: 12px;">暂无数据</span>
              <div v-show="myChartShow" id="echarts_box" style="width: 600px;height:300px;"></div>
              <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 600px;height:300px;"></div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
@@ -388,8 +388,7 @@

import eventBus from '../../../../eventBus'
import DrawLine from './AnalysisChoose/DrawLine'
// import main from "../leaflet/app/main"
import mapApi from '@/api/mapApi'
import mapApi from '../../../../api/mapApi'

export default {
  name: 'SewersAnalysis',
@@ -398,12 +397,13 @@
      // 地图点击类型 first连通性点击  second爆管点击  third流向点击 fourth横断面
      activeName: 'first',
      measure: null,
      map: null,
      map: window.map,

      myChart: null,
      myChartShow: false,
      flowPipeLine: null,

      // 用于判断
      currentSelectStart: null,
      currentSelectEnd: null,
      currentSelectStartLine: null,
@@ -443,12 +443,8 @@
    }
  },
  mounted () {
    // this.myChart = this.$echarts.init(document.getElementById('echarts_box'))
    // 全局map传递 || this.map = window.map
    this.map = window.map
    eventBus.$on('map-obj', (mapObj) => {
      this.map = mapObj
    })
    // 初始化echarts图表
    this.myChart = this.$echarts.init(this.$refs.myChart)
    // 使用 DrwLine方法
    eventBus.$on('draw-hdm-line', (points) => {
      this.getHdmPoint(points)
@@ -473,11 +469,11 @@

    // 流向地图上点击
    selectPipeLine () {
      this.map.on('click', this.selectClick)
      window.map.on('click', this.selectClick)
    },
    // 地图上点击回调
    selectClick (e) {
      this.map.off('click', this.selectClick)
      window.map.off('click', this.selectClick)
      const point = [e.latlng.lng, e.latlng.lat]
      console.log(point)
      this.getPipeLine(point)
@@ -776,12 +772,12 @@

    // 流向数据请求
    async getPipeLine (point) {
      const param = {
        x: point[0],
        y: point[1],
        radius: 3
      }
      console.log(param)
      // const param = {
      //   x: point[0],
      //   y: point[1],
      //   radius: 3
      // }
      // console.log(param)

      // 根据参数请求接口数据
      // const res = await api.getPipeline(param)
@@ -813,6 +809,7 @@
      console.log('正流向显示')
      console.log(e)

      // 清除流向方法
      this.clearLX()
      // const param = {
      //   points: e.data,
@@ -862,7 +859,8 @@
    // 横断面数据请求
    async getHdmPoint (line) {
      console.log('横断面的绘制线')
      console.table(line)
      // console.table(line)
      // 横断面数据
      this.hdmParam = {
        x1: line[0].lng,
        y1: line[0].lat,
@@ -958,7 +956,7 @@
  padding: 0;
}

/deep/ .clearfixs {
/deep/ .fixed-style {
  display: inline-block;
  color: #ffffff;
  margin: 15px;