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

chenzeping

2021-04-12 8bb5942235c86ea771c4215a77c46b1245c30a93

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

@@ -2,13 +2,12 @@
<template>
    <div id="Tab">
        <div class="infomation">
            <el-row>
            <el-col :span="6"><div class="grid-content bg-purple">氮氧化物:29.93标准:100</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">二氧化硫:17.34标准:50</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">烟尘:6.93 标准:30</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">废气流量:120343.18</div></el-col>
            <!--            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
            </el-row>
          <div>
            <span class="grid-content">氮氧化物 : 29.93 标准 : 100</span>
            <span class="grid-content">二氧化硫 : 17.34 标准 : 50</span>
            <span class="grid-content">烟尘 : 6.93 标准 : 30</span>
            <span class="grid-content">废气流量 : 120343.18</span>
          </div>
        </div>
        <div class="form-echrts">
            <div class="from-search">
@@ -33,8 +32,8 @@
                </div>
                <div>
                    采样点数:
                    <input list="source" id="ipt" class="echatsInput">
                    <datalist id="source">
                    <input list="source" id="ipt" class="echatsInput" value="50">
                    <datalist id="source" >
                        <option value="0" />
                        <option value="25" />
                        <option value="50" />
@@ -56,7 +55,7 @@
                   center
                   v-dialogDrag
        >
            <div class="el-dialog-div">
            <div class="el-dialog-div" style="height: 500px">
                <public-detailed-list v-bind="$attrs"></public-detailed-list>
            </div>
        </el-dialog>
@@ -102,12 +101,12 @@
        this.myChart.resize()
      }
    },
    initOptions: function (dataDate, series) {
    initOptions: function (dataDate, dataValue1, dataValue2, dataValue3) {
      var options = {
        title: {
          // text: '折线图堆叠'
        },
        color: ['#002fb3', '#8ce55e', '#ff0087'],
        color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
@@ -241,7 +240,29 @@
            }
          }
        }],
        series: series
        series: [
          {
            name: 'COD',
            type: 'line',
            stack: '总量',
            data: dataValue1,
            yAxisIndex: 0
          },
          {
            name: '氨氮',
            type: 'line',
            stack: '总量',
            data: dataValue2,
            yAxisIndex: 0
          },
          {
            name: '废水流量',
            type: 'line',
            stack: '总量',
            data: dataValue3,
            yAxisIndex: 1
          }
        ]
      }
      return options
    }
@@ -249,33 +270,25 @@
  mounted () {
    this.$nextTick(() => {
      this.drawChart()
      const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonHourData)).reverse()
      const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonData)).reverse()
      console.log(dataWatch)
      var dateDate = []
      // {COD:[3,4,5]}
      var data = {}
      var dataValue1 = []
      var dataValue2 = []
      var dataValue3 = []
      var dataDate = []
      for (var i = 0; i < 24; i++) {
        dataDate.push(dataWatch[i].MonTimeStr.substring(9))
      }
      for (var n = 0; n < dataWatch.length; n++) {
        var d = dataWatch[n].MonTimeStr.substring(9)
        if (dateDate.indexOf(d) < 0) {
          dateDate.push(d)
        }
        if (data[dataWatch[n].PoltmtrlName]) {
          data[dataWatch[n].PoltmtrlName].push(dataWatch[n].MonQty)
        } else {
          data[dataWatch[n].PoltmtrlName] = [dataWatch[n].MonQty]
        if (dataWatch[n].PoltmtrlName === 'COD') {
          dataValue1.push(dataWatch[n].MonQty)
        } else if (dataWatch[n].PoltmtrlName === '氨氮') {
          dataValue2.push(dataWatch[n].MonQty)
        } else if (dataWatch[n].PoltmtrlName === '废水流量') {
          dataValue3.push(dataWatch[n].MonQty)
        }
      }
      var series = []
      for (var k in data) {
        series.push({
          name: k,
          type: 'line',
          yAxisIndex: k === '废水流量' ? 1 : 0,
          data: data[k]
        })
      }
      console.log(series)
      const opitons = this.initOptions(dateDate, series)
      const opitons = this.initOptions(dataDate, dataValue1, dataValue2, dataValue3)
      this.myChart = this.$echarts.init(this.$refs.main)
      this.myChart.setOption(opitons)
    })
@@ -293,18 +306,6 @@
}
.Infomation {
  margin-left: 10px;
}

.el-tag {
  height: 25px;
    width: 140px;
  line-height: 25px;
  margin-right: 10px;
  font-size: 10px;
  background-color: rgba(0, 255, 246, 0.14);
  color: #00d0f9;
  border: none;
  padding: 0 15px;
}

.form-echrts {
@@ -326,10 +327,14 @@
          >span{line-height: 22px}
        .pickerTable{
          margin-left: 6px;
            /deep/.el-input__prefix{
            /deep/.el-input{
              font-size: 0px;
              .el-input__prefix{
                width: 100%;
              }
            }
          /deep/.el-input__icon {
             font-size: 0;
             //font-size: 0;
              width: 100%;
          }
        }
@@ -340,6 +345,8 @@
    }
    /deep/.el-input__inner{
      position: relative;
      width: 0.9rem!important;
      height: 0.125rem!important;
      background-color: #2e4967;
      color: #ffffff;
      font-size: 12px;
@@ -356,6 +363,9 @@
      width: 80px;
        height: 22px;
    }
    input::-webkit-calendar-picker-indicator {
      opacity: 100;
    }
    .detailbtn{
      background-color:#2e4967;
      text-align: center;