派生自 wuyushui/SewerAndRainNetwork

徐旺旺
2021-04-22 20bac7bbc63788b14a40757da47a7f200d4155c1
src/components/BaseNav/WasteWater/HourData.vue
@@ -1,6 +1,9 @@
<template>
  <div id="Tab">
    <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
      <span class="time-select">{{ timeStart }}时——{{ timeEnd }}时</span>
    </div>
    <div class="form-echrts">
      <div class="from-search">
        <div class="pickerMon">
@@ -87,6 +90,8 @@
        timeStart: '',
        timeEnd: ''
      },
      timeEnd: dayjs().format('YYYY-MM-DD HH'),
      timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH'),
      chart: null,
      jcdID: 1,
      dataType: 2,
@@ -128,7 +133,7 @@
            continue
          }
          var MonTimeStr = d[i].MonTimeStr
          const MonTimeStr = d[i].MonTimeStr
          // getWRW(d[i])
@@ -176,7 +181,7 @@
          if (nameList.length === 0) {
            nameList.push(d[i].PoltmtrlName.trim())
            dateList.push(strDate)
            /*  var data=new Array();
            /*  let data=new Array();
              data.push(d.MonQty); */
            if ((d[i].PoltmtrlName === '废水流量' || d[i].PoltmtrlName === '废水') && d[i].MonQty < 0) {
              d[i].MonQty = 0
@@ -216,7 +221,7 @@
        const newList = []
        for (let i = 0; i < dataList.length; i++) {
          var list = dataList[i].reverse()
          const list = dataList[i].reverse()
          newList.push(list)
        }
        dataList = newList
@@ -267,11 +272,11 @@
        }
        lengList.push(objTemp)
        var legend = lengList
        var xdata = dateList.reverse()
        var ydatas = []
        const legend = lengList
        const xdata = dateList.reverse()
        const ydatas = []
        for (var j = 0; j < nameList.length; j++) {
        for (let j = 0; j < nameList.length; j++) {
          let zdcbcolor, zxcolor
          if (nameList[j] === 'COD') {
            zdcbcolor = 'red'
@@ -282,12 +287,12 @@
          } else if (nameList[j] === '总磷') {
            zdcbcolor = 'red'
            zxcolor = '#f48183'
          } else if (nameList[j] === '总氮') {
            zdcbcolor = 'red'
            zxcolor = '#d9f2f4'
          } else {
          } else if (nameList[j] === '废水流量') {
            zdcbcolor = 'red'
            zxcolor = '#9ACD32'
          } else {
            zdcbcolor = 'red'
            zxcolor = '#d9f2f4'
          }
          const ydata = {
            name: nameList[j],
@@ -304,61 +309,62 @@
          this.bzzList.push(this.bzz)
          ydatas.push(ydata)
        }
        console.log(ydatas)
        var yname = '浓度(mg/l)'
        const yname = '浓度(mg/l)'
        this.effChartShow(divid, title, legend, xdata, ydatas, yname, this.jcdID, this.datatype)
      }
    },
    effChartShow (divid, title, legend, xdata, ydatas, yname, jcdID, datatype) {
      this.chart = this.$echarts.init(this.$refs.echartsHour)
      // console.log(this.chart)
      this.chart.clear()
      var dataUnit = ''
      console.log(ydatas)
      // this.chart.clear()
      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 serLists = []
      for (let i = 0; i < ydatas.length; i++) {
        // let zdcbcolor = ydatas[i].zdcbcolor
        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
                //   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
                }
              }
            },
            type: 'line',
            data: ydatas[i].data,
            markLine: { // 平均值 , 和 指标上限
@@ -391,7 +397,7 @@
            // itemStyle: {
            //   normal: {
            //     color: function (c) { // 根据value 显示不同的折点颜色
            //       // var biaozhuiz
            //       // let biaozhuiz
            //       for (let i = 0; i < this.bzzList.length; i++) {
            //         if (this.bzzList[i].name === c.seriesName) {
            //           this.bz = this.bzzList[i].bzhui
@@ -419,7 +425,7 @@
        }
        serLists.push(obj)
      }
      var option = {
      const option = {
        /*  title: {
          text: title,
      }, */
@@ -432,28 +438,28 @@
            }
          },
          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 === '氨氮') {
                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 {
              } else if (seriesName === '废水流量') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#9ACD32;"></span>'
              } else {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#d9f2f4;"></span>'
              }
              s += maker + seriesName + ':' + valueFliter + '<br />'
            }
@@ -467,8 +473,8 @@
          }
        },
        grid: { // 网格
          top: '20%',
          left: '5%'
          top: '20%'
          // left: '15%'
        },
        legend: {
          data: legend
@@ -522,7 +528,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)
@@ -531,7 +537,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: {
@@ -586,6 +592,24 @@
</script>
<style scoped lang="less">
.tab-scroll {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .time-select {
    //margin: 0 10px;
    cursor: pointer;
    padding: 5px;
    border: 1px solid #2b87c8;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    font-size: 11px;
    width: 280px;
  }
}
.grid-content {
  font-size: 8px;
  background-color: #2e4967;
@@ -608,10 +632,10 @@
  //margin: 10px 10px 10px 10px;
  .from-search {
    display: flex;
    padding: 5px;
    padding: 15px 0;
    > div {
      margin-left: 10px
      margin-left: 30px
    }
    .pickerMon {
@@ -626,7 +650,8 @@
        display: flex;
        > span {
          line-height: 22px
          line-height: 22px;
          margin-right: 15px;
        }
        .pickerTable {