标准值颜色标准

chenzeping

2021-04-26 52afe2d58776967da3a03b00d7f635fc6fd7d1a8

标准值颜色标准

 src/components/BaseNav/WasteGas/WasteGasRealChart.vue

@@ -22,7 +22,6 @@
        <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="echarts"></div>

 src/components/BaseNav/WasteWater/HourData.vue

File was deleted

 src/components/BaseNav/WasteWater/WasteWaterDayChart.vue

File was renamed from src/components/BaseNav/WasteWater/DayData.vue
@@ -2,7 +2,7 @@
  <div class="echarts-box">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
      <span class="time-select">{{ formData.timeStart }}—{{ formData.timeEnd }}</span>
      <span class="time-select">{{ formData.timeStart }}日—{{ formData.timeEnd }}日</span>
    </div>
    <div class="echarts-form">
      <span class="demonstration">开始时间：</span>
@@ -25,7 +25,7 @@
      <el-button>明细表</el-button>
    </div>
    <div class="echarts-chart">
      <div style="width:5rem;height:1.5rem;" ref="echartsday"></div>
      <div style="width:5rem;height:1.5rem;" ref="echartsDay"></div>
    </div>
  </div>
</template>
@@ -36,9 +36,8 @@
import mapApi from '@/api/mapApi'

export default {
  name: 'DayData',
  name: 'WasteWaterDayChart',
  components: {
    // PublicDetailedList
    PublicDataStandard
  },
  data () {
@@ -128,18 +127,14 @@
        let data
        const bzh = []

        // wrwIDS = []

        for (let i = 0; i < d.length; i++) {
          if (d[i].MonItemId === '29') {
            continue
          }
          // 20190430 add  获取监测点id 污染物id  检测项id
          // getWRW(d[i])
          const MonTimeStr = d[i].MonTimeStr

          const d1 = MonTimeStr.split('/')
          // var d2=d1[2].split(' ');
          // let d2=d1[2].split(' ');
          let strDate
          if (d1[1] > 9) {
            // if(d2[0]>9){
@@ -177,7 +172,7 @@
            if (dateList.indexOf(strDate) < 0) {
              dateList.push(strDate)
            }
            for (var j = 0; j < dataList.length; j++) {
            for (let j = 0; j < dataList.length; j++) {
              if (d[i].PoltmtrlName.trim() === dataList[j].name) {
                dataList[j].data.push(d[i].MonQty)
              }
@@ -186,16 +181,12 @@
        }
        // 处理数据结束

        var divid = 'mychart1eff'
        const lengList = []
        let objTemp

        var title = name

        var lengList = []
        var objTemp

        for (var l = 0; l < nameList.length; l++) {
          var obj
          var iconurl
        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] === '氨氮') {
@@ -244,7 +235,7 @@
        const ydatas = []

        for (let j = 0; j < nameList.length; j++) {
          var zdcbcolor, zxcolor
          let zdcbcolor, zxcolor
          if (nameList[j] === 'COD') {
            zdcbcolor = 'red'
            zxcolor = '#fff21c'
@@ -281,26 +272,26 @@
        }

        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) {
      this.chart = this.$echarts.init(this.$refs.echartsday)
    effChartShow (legend, xdata, ydatas, yname, jcdID, datatype) {
      this.chart = this.$echarts.init(this.$refs.echartsDay)
      this.chart.clear()
      // console.log(this.chart)
      this.chart.clear()
      var dataUnit = ''
      let dataUnit = ''
      if (datatype === 1) {
        dataUnit = '流量(m³/d)'
      } else {
        dataUnit = '流量(m³/h)'
      }
      const bzzList = this.bzzList
      var serLists = []
      for (var i = 0; i < ydatas.length; i++) {
        var zdcbcolor = ydatas[i].zxcolor
        var bz = ydatas[i].bzz
        var obj
      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,
@@ -309,22 +300,21 @@
            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'
                //   }
                // },
                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
@@ -397,7 +387,7 @@
        }
        serLists.push(obj)
      }
      var option = {
      const option = {
        /*  title: {
          text: title,
      }, */
@@ -410,18 +400,18 @@
            }
          },
          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 === '氨氮') {
@@ -500,7 +490,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)
@@ -509,7 +499,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: {

 src/components/BaseNav/WasteWater/WasteWaterIndex.vue

@@ -41,8 +41,8 @@
import PublicSector from '../PublicSector'
// 图表组件
import RealData from './WasteWaterRealChart'
import HourData from './HourData'
import DayData from './DayData'
import HourData from './WasteWaterHoursChart'
import DayData from './WasteWaterDayChart'
import Detail from './Detail'

export default {
@@ -103,23 +103,23 @@

    .default-uncheck {
      background-color: #0e639e;
      color: #fff;
      color: #C0C0C0;
      cursor: pointer;
    }

    .hover {
      background-color: #0e639e;
      color: #fff;
      background-color: #0e539e;
      color: #ffffff;
      cursor: pointer;
    }

    .hover:hover {
      cursor: pointer;
      padding: 5px;
      border: 1px solid #2b87c8;
      border: 1px solid #5F9EA0;
      border-radius: 4px;
      text-align: center;
      color: #fff;
      color: #F0FFFF;
    }
  }


 src/components/BaseNav/WasteWater/WasteWaterRealChart.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>-->
@@ -45,7 +45,6 @@
  },
  data () {
    return {
      a: '',
      // tab栏传递接收数据
      dataStandard: [
        {
@@ -88,19 +87,22 @@
            val: null
          }
        }],
      // 表单数据绑定值
      formData: {
        region: '25',
        regionList: [25, 50, 75, 100],
        startTime: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
      },
      region: '25',
      regionList: [25, 50, 75, 100],
      datatype: 1,
      // 数据分类处理存储列表
      RealTimeDataList: [],
      bzz: null,
      bzzList: [],
      // 用于处理标准值
      standardValues: null,
      // 标准值列表
      standardValuesList: [],
      // 用于图表展示设置数组
      nameList: [],
      // legend类别图表展示设置数组
      lengList: [],
      legendList: [],
      ydatas: []
    }
  },
@@ -122,29 +124,31 @@
        $endTime: this.formData.endTime,
        $step: 15
      }
      // console.log(data)
      const result = (await mapApi.getDataItems(data)).data
      // 数据按类别分组
      this.pointsSet(result)
      // 图标存储处理
      this.legendSet()
      // ydata数据
      // y轴data数据
      this.yDataSet()
      // 根据已有数据绘制图表
      this.drawRealTimeDateChart()
    },
    // 接口数据按照 数据内分类别设置
    pointsSet (d) {
      let data = []
      let datalist = []
      // 数组数据置空
      this.nameList = []
      this.RealTimeDataList = []

      let data = []
      let datalist = []

      for (let i = 0; i < d.length; i++) {
        // this.RealTimeDataList = []
        // 判断是否继续执行
        if (d[i].ErrorMessage != null) {
          continue
        }

        // temp 临时数据判断方法
        const tempList = [
          {
@@ -155,13 +159,12 @@
            'TJIP45.lscl2tb552AISA11202A': '废水流量'
          }
        ]
        // 指标
        // 指标 临时用于数据处理
        const name = tempList[0][d[i].UnionTagCode]
        // 判断市局类型进行分组

        // 判断市局类型进行分组 =>数组为空时
        if (this.nameList.length === 0) {
          // 数组为空时
          this.nameList.push(name)
          // todo 用dayjs
          const newDate = new Date(d[i].ReadTime)
          data = {
            name: name,
@@ -171,7 +174,6 @@
            name: name,
            data: [data]
          }
          // console.log('1111111')
          this.RealTimeDataList.push(datalist)
        } else if (this.nameList.indexOf(name) < 0) {
          // 没有指标时
@@ -185,7 +187,6 @@
            name: name,
            data: [data]
          }
          // console.log('222222222')
          this.RealTimeDataList.push(datalist)
        } else if (i === d.length - 1) {
          // 循环到最后
@@ -200,7 +201,6 @@
              name: name,
              data: [data]
            }
            // console.log('3333333')
            this.RealTimeDataList.push(datalist)
          } else {
            const newDate = new Date(d[i].ReadTime)
@@ -208,7 +208,6 @@
              name: name,
              value: [newDate, d[i].TagValue]
            }
            // console.log('444444')
            for (let k = 0; k < this.RealTimeDataList.length; k++) {
              if (this.RealTimeDataList[k].name === name) {
                this.RealTimeDataList[k].data.push(data)
@@ -228,11 +227,10 @@
          }
        }
      }
      // console.log(this.RealTimeDataList)
    },
    // legend类别图表展示设置数组
    legendSet () {
      this.lengList = []
      this.legendList = []
      let objTemp
      for (let l = 0; l < this.nameList.length; l++) {
        let obj
@@ -268,34 +266,34 @@
            itemWidth: 20,
            itemHeight: 5
          }
          this.lengList.push(obj)
          this.legendList.push(obj)
        }
      }
      this.lengList.push(objTemp)
      this.legendList.push(objTemp)
    },
    // yDataSet 数据处理
    yDataSet () {
      this.bzzList = []
      // 数组添加数据 置空
      this.standardValuesList = []
      this.ydatas = []
      for (let j = 0; j < this.nameList.length; j++) {
        let zdcbcolor, zxcolor
        let pointColor, lineColor
        if (this.nameList[j] === 'COD') {
          zdcbcolor = 'red'
          zxcolor = '#ffff00'
          pointColor = 'red'
          lineColor = '#ffff00'
        } else if (this.nameList[j] === '氨氮') {
          zdcbcolor = 'red'
          zxcolor = '#00B0F0'
          pointColor = 'red'
          lineColor = '#00B0F0'
        } else if (this.nameList[j] === '总磷') {
          zdcbcolor = 'red'
          zxcolor = '#f48183'
          pointColor = 'red'
          lineColor = '#f48183'
        } else if (this.nameList[j] === '总氮') {
          zdcbcolor = 'red'
          zxcolor = '#e0ffff'
          pointColor = 'red'
          lineColor = '#e0ffff'
        } else if (this.nameList[j] === '废水流量') {
          zdcbcolor = 'red'
          zxcolor = '#9ACD32'
          pointColor = 'red'
          lineColor = '#9ACD32'
        }
        let ydata

        // 临时数据
        const BBZMAPPING = {
@@ -308,26 +306,20 @@
        for (let m = 0; m < this.RealTimeDataList.length; m++) {
          let stdValue = null
          if (this.RealTimeDataList[m].name === this.nameList[j]) {
            for (const p in BBZMAPPING) {
              // console.log('p' + p)
              this.a = p
              stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
            }
            // console.log(stdValue)
            this.bzz = {
            this.standardValues = {
              name: this.nameList[j],
              bzhui: stdValue
              standardValue: stdValue
            }
            ydata = {
            const yData = {
              name: this.nameList[j],
              data: this.RealTimeDataList[m].data,
              zdcbcolor: zdcbcolor,
              zxcolor: zxcolor,
              bzz: stdValue
              pointColor: pointColor,
              lineColor: lineColor,
              standardValue: stdValue
            }
            // console.log(stdValue)
            this.bzzList.push(this.bzz)
            this.ydatas.push(ydata)
            this.standardValuesList.push(this.standardValues)
            this.ydatas.push(yData)
          }
        }
      }
@@ -337,53 +329,58 @@
      this.myChart = this.$echarts.init(this.$refs.echarts)
      this.myChart.clear()

      const legend = this.lengList
      const yname = '浓度(mg/m³)'
      const bzzList = this.bzzList
      // y轴侧边标题neme
      const ySideName = '浓度(mg/m³)'
      // 标准值列表
      const standardValuesList = this.standardValuesList

      // 应用于数据结果判断标准值
      let standardValue

      // series数据存储
      const serLists = []

      for (let i = 0; i < this.ydatas.length; i++) {
        const zdcbcolor = this.ydatas[i].zdcbcolor
        const bz = this.ydatas[i].bzz
        // console.log(bz)
        let obj
        // 应用于数据处理
        const pointColor = this.ydatas[i].pointColor
        // 数据标准值
        const bz = this.ydatas[i].standardValue
        let seriesObj

        if (bz) {
          obj = {
          seriesObj = {
            name: this.ydatas[i].name,
            // symbol:'circle', // 折点形状
            // symbolSize: 3,   //大小
            smooth: true, // 直线 ，true 为曲线
            smooth: true,
            type: 'line',
            data: this.ydatas[i].data,
            // borderColor: this.ydatas[i].pointColor,
            borderColor: '#fff',
            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
                color: function (c) {
                  for (let i = 0; i < standardValuesList.length; i++) {
                    if (standardValuesList[i].name === c.seriesName) {
                      standardValue = standardValuesList[i].standardValue
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > biaozhuiz * 0.9) {
                  if (c.value[1] > standardValue) {
                    return pointColor
                  } else if (c.value[1] > standardValue * 0.7) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: { // 折线的颜色
                  color: this.ydatas[i].zxcolor,
                lineStyle: {
                  color: this.ydatas[i].lineColor,
                  width: 2
                },
                // borderColor:'black',  //折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }
            },
            type: 'line',
            data: this.ydatas[i].data,
            markLine: { // 平均值 ， 和 指标上限
            markLine: {
              symbol: 'none',
              data: [{
                label: {
@@ -396,16 +393,15 @@
                yAxis: bz,
                lineStyle: {
                  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
                    color: function (c) {
                      for (let i = 0; i < standardValuesList.length; i++) {
                        if (standardValuesList[i].name === c.seriesName) {
                          standardValue = standardValuesList[i].standardValue
                        }
                      }
                      if (c.value[1] > biaozhuiz) {
                        return zdcbcolor
                      } else if (c.value[1] > biaozhuiz * 0.9) {
                      if (c.value[1] > standardValue) {
                        return pointColor
                      } else if (c.value[1] > standardValue * 0.7) {
                        return '#FFA500'
                      } else {
                        return '#33c95f'
@@ -413,62 +409,55 @@
                    }
                  }
                }
              }
              ]
              }]
            }
          }
        } else {
          obj = {
          seriesObj = {
            name: this.ydatas[i].name,
            symbol: 'circle', // 折点形状
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            symbol: 'circle',
            symbolSize: 10,
            smooth: false,
            yAxisIndex: 1,
            // itemStyle: {
            //   normal: {
            //     color: function (c) { // 根据value 显示不同的折点颜色
            //       for (let i = 0; i < this.bzzList.length; i++) {
            //         let biaozhuizs
            //         if (this.bzzList[i].name === c.seriesName) {
            //           biaozhuizs = this.bzzList[i].bzhui
            //         }
            //         console.log(biaozhuizs)
            //       }
            //       if (c.value[1] > 9) {
            //         return zdcbcolor
            //       } else {
            //         return '#33c95f'
            //       }
            //     },
            //     lineStyle: { // 折线的颜色
            //       color: this.ydatas[i].zxcolor,
            //       width: 5
            //     },
            //     borderColor: 'black', // 折点边框的颜色
            //     label: { // 显示值
            //       show: false
            //     }
            //   }
            // },
            // borderColor:'black',
            type: 'line',
            data: this.ydatas[i].data
            data: this.ydatas[i].data,
            itemStyle: {
              normal: {
                color: function (c) {
                  for (let i = 0; i < standardValuesList.length; i++) {
                    if (standardValuesList[i].name === c.seriesName) {
                      standardValue = standardValuesList[i].standardValue
          }
        }
        if (this.ydatas[i].name === '废气流量' || this.ydatas[i].name === '废气') {
          obj.yAxisIndex = 1
        }
        serLists.push(obj)
      }
      // console.log(serLists)
      let dataUnit = ''
      if (this.datatype === 1) {
        dataUnit = '流量(m³/d)'
                  if (c.value[1] > standardValue) {
                    return pointColor
                  } else if (c.value[1] > standardValue * 0.9) {
                    return '#FFA500'
      } else {
        dataUnit = '流量(m³/h)'
                    return '#33c95f'
      }
                },
                lineStyle: { // 折线的颜色
                  color: this.ydatas[i].lineColor,
                  width: 2
                },
                label: { // 显示值
                  show: false
                }
              }
            }
          }
        }
        if (this.ydatas[i].name === '废水流量' || this.ydatas[i].name === '废水') {
          seriesObj.yAxisIndex = 1
        }
        serLists.push(seriesObj)
      }
      const dataUnit = '流量(m³/h)'
      // echarts图表option数据
      const options = {
        tooltip: { // 提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
@@ -479,8 +468,6 @@
          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[1]
@@ -516,18 +503,18 @@
            return s
          }
        },
        toolbox: { // 打印等工具
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        grid: { // 网格
        grid: {
          top: '20%',
          left: '15%'
        },
        legend: {
          data: legend
          data: this.legendList
        },
        dataZoom: [{
          type: 'inside',
@@ -547,10 +534,10 @@
            shadowOffsetY: 2
          }
        }],
        xAxis: { // x 轴设置
        xAxis: {
          type: 'time',
          boundaryGap: false,
          axisLabel: { // x轴全部显示
          axisLabel: {
            // rotate: 30,
            margin: 6,
            interval: 0,
@@ -558,7 +545,7 @@
              color: '#fff'
            }
          },
          splitLine: { // 网格垂直线为 虚线
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
@@ -570,14 +557,13 @@
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
              width: 1
            }
          }
          // data: xdata
        },
        yAxis: [{
          type: 'value',
          name: yname,
          name: ySideName,
          max: function (value) {
            return parseInt(value.max + 3)
          },
@@ -592,11 +578,11 @@
          },
          splitLine: {
            show: false
          }, // y轴 网格线不显示,
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
              width: 1
            }
          }
        }, {
@@ -613,14 +599,14 @@
          },
          splitLine: {
            show: false
          }, // y轴 网格线不显示,
          },
          // inverse: true,
          // nameLocation: 'start',
          // max:500,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
              width: 1
            }
          }
        }],