废水图标完善

zhangshuaibao

2021-04-14 a19ce43fb54c9d5e3aeb237ca3b2ca2f2abe0ba8

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

@@ -3,9 +3,9 @@
    <div id="Tab">
        <div class="infomation">
          <div>
            <span class="grid-content">COD :<i>6.039</i>  标准 : 100</span>
            <span class="grid-content">氨氮 : <i>0.38</i> 标准 : 50</span>
            <span class="grid-content">废水流量 : <i>254.643997</i></span>
            <span class="grid-content">COD : <i style="color: #e8ee0b">6.039</i>  标准 : 10</span>
            <span class="grid-content">氨氮 : <i style="color: #e8ee0b">0.38</i> 标准 : 5</span>
            <span class="grid-content">废水流量 : <i style="color: #e8ee0b">254.643997</i></span>
          </div>
        </div>
        <div class="form-echrts">
@@ -14,35 +14,34 @@
                    <div class="pickerData">
                        <span> 开始时间:</span>
                        <span class="pickerTable">
                          <el-date-picker  type="datetime"   v-model="formInline.timeStart">
                          <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 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>-->
<!--                    采样点数:-->
<!--                    <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 class="boxChart" style="height: 260px">
                <div style="width: 100%;height: 100%;" id="popChart" ref="main">
                </div>
            </div>
        </div>
        <!-- 明细弹框 -->
@@ -53,7 +52,7 @@
                   center
                   v-dialogDrag
        >
            <div class="el-dialog-div" style="height: 500px">
            <div class="el-dialog-div" style="height: 260px">
                <public-detailed-list v-bind="$attrs"></public-detailed-list>
            </div>
        </el-dialog>
@@ -78,8 +77,8 @@
      value: '',
      formInline: {
        region: '',
        timeStart: '',
        timeEnd: ''
        timeStart: '2021-04-12 17:00:00',
        timeEnd: '2021-04-13 16:00:00'
      },
      myChart: null,
      JsonHourWater: {
@@ -126,22 +125,23 @@
      }
    }
  },
  mounted () {
    this.onSubmit()
  },
  methods: {
    onSubmit () {
      console.log(1)

      // const date = [this.value1, this.value2, this.formInline.region]
      this.effChartShow(this.JsonHourWater.id, this.JsonHourWater.title, this.JsonHourWater.legend, this.JsonHourWater.xdata, this.JsonHourWater.ydatas, this.JsonHourWater.yname, this.JsonHourWater.id, this.JsonHourWater.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;
      this.effChartShow()
    },
    effChartShow: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) {
    effChartShow: function () {
      // var id = this.JsonHourWater.id
      // var title = this.JsonHourWater.title
      var legend = this.JsonHourWater.legend
      var xdata = this.JsonHourWater.xdata
      var ydatas = this.JsonHourWater.ydatas
      var yname = this.JsonHourWater.yname
      // var jcdId = this.JsonHourWater.jcdID
      var datatype = this.JsonHourWater.datatype

      this.myChart = this.$echarts.init(this.$refs.main)
      this.myChart.clear()
      var dataUnit = ''
@@ -160,6 +160,7 @@
          ydatas[j].data[k] = it2
        }
      }

      for (var i = 0; i < ydatas.length; i++) {
        // var zdcbcolor = ydatas[i].zdcbcolor
        var bz = ydatas[i].bzz
@@ -196,11 +197,10 @@
                  show: false
                }
              }

            },
            type: 'line',
            data: ydatas[i].data,
            markLine: { // 平均值 ， 和 指标上限
            markLine: { // 平均值  和 指标上限
              symbol: 'none',
              data: [{
                label: {
@@ -244,7 +244,7 @@
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                  width: 4
                },
                borderColor: 'black', // 折点边框的颜色
                label: { // 显示值
@@ -310,10 +310,14 @@
      },
      grid: { // 网格
        top: '20%',
        left: '5%'
        left: '7%',
        bottom: '10%'
      },
      legend: {
        data: legend
        data: legend,
        textStyle: {
          color: '#fff'
        }
      },
      dataZoom: [{
        type: 'inside',
@@ -340,7 +344,8 @@
          rotate: 20,
          interval: 0,
          textStyle: {
            color: '#fff'
            color: '#fff',
            fontSize: 10
          }
        },
        splitLine: { // 网格垂直线为 虚线
@@ -558,20 +563,20 @@
        }
        // 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()
      }
    }
    // 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()
    //   }
    // }

  }

@@ -586,6 +591,9 @@
    border-radius: 2px;
    margin-right: 10px;
    padding:0 10px
  //>i{
  //    color: #f00;
  //  }
}
.infomation {
  padding: 5px 10px;