弹框废水固废问题修改

ChenZeping

2021-04-27 4e725a04dbe02d7c631a82da0526c5ef5defa15c

弹框废水固废问题修改

 package.json

@@ -13,6 +13,7 @@
  },
  "dependencies": {
    "@jiaminghi/data-view": "^2.10.0",
    "audit": "0.0.6",
    "axios": "^0.21.1",
    "babel-polyfill": "^6.26.0",
    "core-js": "^3.6.5",
@@ -20,6 +21,7 @@
    "echarts": "^4.2.1",
    "element-ui": "^2.14.1",
    "esri-leaflet": "^3.0.1",
    "fix": "0.0.6",
    "fullscreen": "^1.1.1",
    "jquery": "^3.5.1",
    "js-cookie": "^2.2.0",

 src/components/BaseNav/WasteSolid/PublicTable.vue

@@ -54,11 +54,11 @@
      ]
    }
  },
  mounted () {
    this.$nextTick(() => {
      // this.listData.push(this.listData2, {}, {}, {}, {}, {})
    })
  },
  // mounted () {
  //   this.$nextTick(() => {
  //
  //   })
  // },
  methods: {
    async refsDataTable (data) {
      const StoragePlaceId = {
@@ -66,6 +66,8 @@
      }
      const result = await mapApi.getSolidWasteDetail(StoragePlaceId)
      this.listData = result.Result.DataInfo[0]
      this.listData.push({}, {}, {}, {}, {})
      // console.log(this.listData)
    },
    // 隔行颜色设置
    tableRowClassName ({
@@ -85,6 +87,13 @@

<style lang="less" scoped>

/deep/ .el-table thead tr {
  color: #02a6b5 !important;
  //.el-table .has-gutter tr th .cell {
  //  //color: #fff; 435
  //}
}

/deep/ .el-table td {
  border-bottom: none !important;
}

 src/components/BaseNav/WasteWater/WasteWaterHoursChart.vue

New file
@@ -0,0 +1,583 @@
<template>
  <div class="echarts-box">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
      <span class="time-select">{{ formData.startTime }}时—{{ formData.endTime }}时</span>
    </div>
    <div class="echarts-form">
      <span class="demonstration">开始时间：</span>
      <el-date-picker
          v-model="formData.startTime"
          value-format="yyyy-MM-dd HH"
          type="datetime">
      </el-date-picker>
      <span class="demonstration">结束时间：</span>
      <el-date-picker
          v-model="formData.endTime"
          value-format="yyyy-MM-dd HH"
          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="echartsHour"></div>
    </div>
  </div>
</template>

<script>
import PublicDataStandard from '../PublicDataStandard'
import dayjs from 'dayjs'
import mapApi from '../../../api/mapApi'

export default {
  name: 'WasteWaterHoursChart',
  components: {
    PublicDataStandard
  },
  data () {
    return {
      // tab栏传递接收数据
      dataStandard: [
        {
          current: {
            name: '氮氧化物',
            val: 29.93
          },
          standard: {
            name: '标准',
            val: 100
          }
        },
        {
          current: {
            name: '二氧化硫',
            val: 17.34
          },
          standard: {
            name: '标准',
            val: 50
          }
        },
        {
          current: {
            name: '烟尘',
            val: 6.93
          },
          standard: {
            name: '标准',
            val: 30
          }
        },
        {
          current: {
            name: '废气流量',
            val: 120
          },
          standard: {
            name: '',
            val: null
          }
        }],
      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')
      },
      chart: null,
      jcdID: 1,
      dataType: 2,
      bzz: null,
      bzzList: [],
      bz: ''
    }
  },
  mounted () {
    this.draw24Chart()
  },
  methods: {
    // 点击查询功能
    querySearch () {

    },
    // 初始化数据请求
    async draw24Chart () {
      const data = {
        onLineMonEmissPointId: 23,
        monItemId: 28,
        beginTime: this.formData.startTime,
        endTime: this.formData.endTime,
        dataType: this.dataType
      }
      const result = (await mapApi.getQueryOnlineMonData(data)).Result.DataInfo
      // console.log(result)
      this.get24HourDate(result)
    },
    // 绘制小时数据折线图
    get24HourDate (result) {
      if (result.length > 0) {
        const d = result
        const nameList = [] // 存放图例
        const dateList = [] // 存放时间
        let dataList = [] // 存放数据
        let data = []
        const bzh = []
        for (let i = 0; i < d.length; i++) {
          if (d[i].MonItemId === '29') {
            continue
          }

          const MonTimeStr = d[i].MonTimeStr

          let strDate
          const d1 = MonTimeStr.split('/') // 月
          const d2 = d1[2].split(' ')
          const t = MonTimeStr.split(' ')
          const hlist = t[1].split(':')
          const h = hlist[0]
          if (d1[1] > 9) {
            //  strDate=MonTimeStr.substring(8,10)+"日";
            if (d2[0] > 9) {
              strDate = ''
              if (h > 9) {
                strDate += MonTimeStr.substring(11, 13) + '时'
              } else {
                strDate += MonTimeStr.substring(11, 12) + '时'
              }
            } else {
              strDate = ''
              if (h > 9) {
                strDate += MonTimeStr.substring(10, 12) + '时'
              } else {
                strDate += MonTimeStr.substring(10, 11) + '时'
              }
            }
          } else {
            if (d2[0] > 9) {
              strDate = ''
              if (h > 9) {
                strDate += MonTimeStr.substring(10, 12) + '时'
              } else {
                strDate += MonTimeStr.substring(10, 11) + '时'
              }
            } else {
              strDate = ''
              if (h > 9) {
                strDate += MonTimeStr.substring(9, 11) + '时'
              } else {
                strDate += MonTimeStr.substring(9, 10) + '时'
              }
            }
          }

          if (nameList.length === 0) {
            nameList.push(d[i].PoltmtrlName.trim())
            dateList.push(strDate)
            if ((d[i].PoltmtrlName === '废水流量' || d[i].PoltmtrlName === '废水') && d[i].MonQty < 0) {
              d[i].MonQty = 0
            }
            data.push(d[i].MonQty)
            bzh.push(d[i].StdValue)
          } else if (nameList.indexOf(d[i].PoltmtrlName.trim()) < 0) {
            nameList.push(d[i].PoltmtrlName)
            bzh.push(d[i].StdValue)
            dataList.push(data)
            data = []
            if ((d[i].PoltmtrlName === '废水流量' || d[i].PoltmtrlName === '废水') && d[i].MonQty < 0) {
              d[i].MonQty = 0
            }
            data.push(d[i].MonQty)
          } else if (i === d.length - 1) {
            if ((d[i].PoltmtrlName === '废水流量' || d[i].PoltmtrlName === '废水') && d[i].MonQty < 0) {
              d[i].MonQty = 0
            }
            data.push(d[i].MonQty)
            dataList.push(data)
          } else {
            if (dateList.indexOf(strDate) < 0) {
              dateList.push(strDate)
            }
            // data.push()
            if ((d[i].PoltmtrlName === '废水流量' || d[i].PoltmtrlName === '废水') && d[i].MonQty < 0) {
              d[i].MonQty = 0
            }
            data.push(d[i].MonQty)
          }
        }

        const newList = []

        for (let i = 0; i < dataList.length; i++) {
          const list = dataList[i].reverse()
          newList.push(list)
        }
        dataList = newList

        const lengList = []
        let objTemp

        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] === '氨氮') {
            iconUrl = 'image://../assets/imgs/legend/NOX.png'
          } else if (nameList[l] === '总磷') {
            iconUrl = 'image://../assets/imgs/legend/YanChen.png'
          } else if (nameList[l] === '总氮') {
            iconUrl = 'image://../assets/imgs/legend/zongdan.png'
          } else {
            iconUrl = 'image://../assets/imgs/legend/VOCs.png'
          }

          if (nameList[l] === '废水' || nameList[l] === '废水流量') { // 将废水流量排到数组最后
            objTemp = {
              name: nameList[l],
              icon: iconUrl,
              textStyle: {
                color: '#ccc'
              },
              itemWidth: 20,
              itemHeight: 5
            }
          } else {
            obj = {
              name: nameList[l],
              icon: iconUrl,
              textStyle: {
                color: '#ccc'
              },
              itemWidth: 20,
              itemHeight: 5
            }
            lengList.push(obj)
          }
        }
        lengList.push(objTemp)

        const legend = lengList
        const xdata = dateList.reverse()
        const ydatas = []

        for (let j = 0; j < nameList.length; j++) {
          let zdcbcolor, zxcolor
          if (nameList[j] === 'COD') {
            zdcbcolor = 'red'
            zxcolor = '#fff21c'
          } else if (nameList[j] === '氨氮') {
            zdcbcolor = 'red'
            zxcolor = '#00B0F0'
          } else if (nameList[j] === '废水流量') {
            zdcbcolor = 'red'
            zxcolor = '#8fdc6e'
          }
          const ydata = {
            name: nameList[j],
            data: dataList[j],
            zdcbcolor: zdcbcolor,
            zxcolor: zxcolor,
            bzz: bzh[j]
          }

          this.bzz = {
            name: nameList[j],
            bzhui: bzh[j]
          }
          this.bzzList.push(this.bzz)
          ydatas.push(ydata)
        }
        // console.log(ydatas)

        const yname = '浓度(mg/l)'

        this.effChartShow(legend, xdata, ydatas, yname, this.jcdID, this.datatype)
      }
    },
    effChartShow (legend, xdata, ydatas, yname, jcdID, datatype) {
      // console.log(ydatas)
      // 初始化图标
      this.chart = this.$echarts.init(this.$refs.echartsHour)
      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++) {
        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 显示不同的折点颜色
                  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: { // 平均值 ， 和 指标上限
              symbol: 'none',
              data: [{
                label: {
                  normal: {
                    position: 'end',
                    formatter: ''// ydatas[i].name+'标准值' //+'{c}'
                  }
                },
                name: '标准值',
                yAxis: bz,
                lineStyle: {
                  color: ydatas[i].zxcolor,
                  type: 'dashed',
                  width: 2
                }
              }]
            }
          }
        } else {
          obj = {
            name: ydatas[i].name,
            symbol: 'circle', // 折点形状
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            yAxisIndex: 1,
            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)
      }
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color: '#1a4245'
            }
          },
          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

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

              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:#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 />'
            }
            return s
          }
        },
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        grid: { // 网格
          top: '20%'
          // left: '15%'
        },
        legend: {
          data: legend
        },
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 100
        }, {
          start: 0,
          end: 100,
          show: false,
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        }],
        xAxis: { // x 轴设置
          type: 'category',
          boundaryGap: false,
          axisLabel: { // x轴全部显示
            // rotate: 20,
            // interval: 0,
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: { // 网格垂直线为 虚线
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisTick: { // x 轴刻度显示
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
            }
          },
          data: xdata
        },
        yAxis: [{
          type: 'value',
          name: yname,
          // max: function (value) {
          //   let max_val_list = [] // 所有显示折线的标准值
          //   if (bzzList && bzzList.length > 0) {
          //     $.each(bzzList, function (index, item) {
          //       max_val_list.push(item.bzhui)
          //     })
          //   }
          //   max_val_list = max_val_list.sort(function (a, b) {
          //     return a - b
          //   }) // 排序
          //   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: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
          axisPointer: {
            snap: true
          },
          splitLine: {
            show: false
          }, // y轴 网格线不显示,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
            }
          }
        }, {
          type: 'value',
          name: dataUnit,
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
          axisPointer: {
            snap: true
          },
          splitLine: {
            show: false
          }, // y轴 网格线不显示,
          // inverse: true,
          // nameLocation: 'start',
          // max:500,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
            }
          }
        }],
        series: serLists
      }
      this.chart.setOption(option)
      window.onresize = this.chart.resize
    }
  }
}
</script>

<style scoped lang="less">

</style>

 src/components/BaseNav/WasteWater/WasteWaterRealChart.vue

@@ -510,8 +510,7 @@
          }
        },
        grid: {
          top: '20%',
          left: '15%'
          top: '20%'
        },
        legend: {
          data: this.legendList