废水图表问题修改

chenzeping

2021-04-25 a7dc80523af0b970764df72fb190c80cf7f8527e

废水图表问题修改

 src/components/BaseNav/WasteWater/DayData.vue

@@ -295,9 +295,10 @@
      } else {
        dataUnit = '流量(m³/h)'
      }
      const bzzList = this.bzzList
      var serLists = []
      for (var i = 0; i < ydatas.length; i++) {
        // var zdcbcolor = ydatas[i].zdcbcolor
        var zdcbcolor = ydatas[i].zxcolor
        var bz = ydatas[i].bzz
        var obj
        if (bz) {
@@ -306,8 +307,8 @@
            symbol: 'circle', // 折点形状
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            // itemStyle: {
            //   normal: {
            itemStyle: {
              normal: {
            //     color: function (c) { // 根据value 显示不同的折点颜色
            //       // var biaozhuiz
            //       let bzlist = this.bzzList
@@ -324,16 +325,16 @@
            //         return '#33c95f'
            //       }
            //     },
            //     lineStyle: { // 折线的颜色
            //       color: ydatas[i].zxcolor,
            //       width: 5
            //     },
            //     borderColor: 'black', // 折点边框的颜色
            //     label: { // 显示值
            //       show: false
            //     }
            //   }
            // },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                },
                borderColor: 'black', // 折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }
            },
            type: 'line',
            data: ydatas[i].data,
            markLine: { // 平均值 ， 和 指标上限
@@ -363,31 +364,33 @@
            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
          }

 src/components/BaseNav/WasteWater/HourData.vue

@@ -18,8 +18,8 @@
          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>
@@ -33,7 +33,7 @@
<script>
import PublicDataStandard from '../PublicDataStandard'
import dayjs from 'dayjs'
import mapApi from '@/api/mapApi'
import mapApi from '../../../api/mapApi'

export default {
  name: 'HourData',
@@ -85,11 +85,11 @@
          }
        }],
      formData: {
        region: '25',
        regionList: [25, 50, 75, 100],
        startTime: dayjs().subtract(16, 'hour').format('YYYY-MM-DD HH'),
        endTime: dayjs().format('YYYY-MM-DD HH')
      },
      region: '25',
      regionList: [25, 50, 75, 100],
      chart: null,
      jcdID: 1,
      dataType: 2,
@@ -102,6 +102,7 @@
    this.draw24Chart()
  },
  methods: {
    // 点击查询功能
    querySearch () {

    },
@@ -114,26 +115,24 @@
        dataType: this.dataType
      }
      const result = (await mapApi.getQueryOnlineMonData(data)).Result.DataInfo
      // console.log(result)
      this.get24HourDate(result)
    },
    // 绘制小时数据
    get24HourDate (res) {
      if (res.length > 0) {
        const d = res
    // 绘制小时数据折线图
    get24HourDate (result) {
      if (result.length > 0) {
        const d = result
        const nameList = [] // 存放图例
        const dateList = [] // 存放时间
        let dataList = [] // 存放数据
        let data = []
        const bzh = []
        // wrwIDS = []
        for (let i = 0; i < d.length; i++) {
          if (d[i].MonItemId === '29') {
            continue
          }

          const MonTimeStr = d[i].MonTimeStr

          // getWRW(d[i])

          let strDate
          const d1 = MonTimeStr.split('/') // 月
@@ -179,8 +178,6 @@
          if (nameList.length === 0) {
            nameList.push(d[i].PoltmtrlName.trim())
            dateList.push(strDate)
            /*  let data=new Array();
              data.push(d.MonQty); */
            if ((d[i].PoltmtrlName === '废水流量' || d[i].PoltmtrlName === '废水') && d[i].MonQty < 0) {
              d[i].MonQty = 0
            }
@@ -212,9 +209,6 @@
            data.push(d[i].MonQty)
          }
        }
        // 处理数据结束

        // dateList=get24DateTime();

        const newList = []

@@ -224,31 +218,28 @@
        }
        dataList = newList

        const divid = 'mycharteff'
        const title = name

        const lengList = []
        let objTemp

        for (let l = 0; l < nameList.length; l++) {
          let obj
          let iconurl
          let iconUrl
          if (nameList[l] === 'COD') {
            iconurl = 'image://../assets/imgs/legend/SO2.png'
            iconUrl = 'image://../assets/imgs/legend/SO2.png'
          } else if (nameList[l] === '氨氮') {
            iconurl = 'image://../assets/imgs/legend/NOX.png'
            iconUrl = 'image://../assets/imgs/legend/NOX.png'
          } else if (nameList[l] === '总磷') {
            iconurl = 'image://../assets/imgs/legend/YanChen.png'
            iconUrl = 'image://../assets/imgs/legend/YanChen.png'
          } else if (nameList[l] === '总氮') {
            iconurl = 'image://../assets/imgs/legend/zongdan.png'
            iconUrl = 'image://../assets/imgs/legend/zongdan.png'
          } else {
            iconurl = 'image://../assets/imgs/legend/VOCs.png'
            iconUrl = 'image://../assets/imgs/legend/VOCs.png'
          }

          if (nameList[l] === '废水' || nameList[l] === '废水流量') { // 将废水流量排到数组最后
            objTemp = {
              name: nameList[l],
              icon: iconurl,
              icon: iconUrl,
              textStyle: {
                color: '#ccc'
              },
@@ -258,7 +249,7 @@
          } else {
            obj = {
              name: nameList[l],
              icon: iconurl,
              icon: iconUrl,
              textStyle: {
                color: '#ccc'
              },
@@ -282,15 +273,9 @@
          } else if (nameList[j] === '氨氮') {
            zdcbcolor = 'red'
            zxcolor = '#00B0F0'
          } else if (nameList[j] === '总磷') {
            zdcbcolor = 'red'
            zxcolor = '#f48183'
          } else if (nameList[j] === '废水流量') {
            zdcbcolor = 'red'
            zxcolor = '#9ACD32'
          } else {
            zdcbcolor = 'red'
            zxcolor = '#d9f2f4'
            zxcolor = '#8fdc6e'
          }
          const ydata = {
            name: nameList[j],
@@ -307,26 +292,31 @@
          this.bzzList.push(this.bzz)
          ydatas.push(ydata)
        }
        console.log(ydatas)
        // console.log(ydatas)

        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) {
    effChartShow (legend, xdata, ydatas, yname, jcdID, datatype) {
      // console.log(ydatas)
      // 初始化图标
      this.chart = this.$echarts.init(this.$refs.echartsHour)
      console.log(ydatas)
      // this.chart.clear()
      this.chart.clear()
      // const bzlist = this.bzzList
      // const bzz = this.bz

      let dataUnit = ''
      if (datatype === 1) {
        dataUnit = '流量(m³/d)'
      } else {
        dataUnit = '流量(m³/h)'
      }
      const bzzList = this.bzzList
      const serLists = []
      for (let i = 0; i < ydatas.length; i++) {
        // let zdcbcolor = ydatas[i].zdcbcolor
        const zdcbcolor = ydatas[i].zxcolor
        const bz = ydatas[i].bzz
        let obj
        if (bz) {
@@ -337,17 +327,15 @@
            smooth: false, // 直线 ，true 为曲线
            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
                // color: function (c) {
                //   for (let i = 0; i < bzlist.length; i++) {
                //     if (bzlist[i].name === c.seriesName) {
                //       this.bzz = bzlist[i].bzhui
                //     }
                //   }
                //   if (c.value > this.bz) {
                //   if (c.value > bzz) {
                //     return zdcbcolor
                //   } else if (c.value > this.bz * 0.9) {
                //   } else if (c.value > bzz * 0.9) {
                //     return '#FFA500'
                //   } else {
                //     return '#33c95f'
@@ -381,8 +369,7 @@
                  type: 'dashed',
                  width: 2
                }
              }
              ]
              }]
            }
          }
        } else {
@@ -392,31 +379,33 @@
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            yAxisIndex: 1,
            // itemStyle: {
            //   normal: {
            //     color: function (c) { // 根据value 显示不同的折点颜色
            //       // let 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
          }
@@ -424,10 +413,7 @@
        serLists.push(obj)
      }
      const option = {
        /*  title: {
          text: title,
      }, */
        tooltip: { // 提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
@@ -464,7 +450,7 @@
            return s
          }
        },
        toolbox: { // 打印等工具
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {}

 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,7 +16,7 @@
            <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>