废水实时数据弹框相关修改

chenzeping

2021-04-23 ffafeb1548168dd8ee9526030e0ec3a7e7c7089a

废水实时数据弹框相关修改

 src/components/BaseNav/WasteWater/RealData.vue

@@ -2,17 +2,19 @@
  <div class="echarts-box">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
      <span class="time-select">{{ startTime }}—{{ endTime }}</span>
      <span class="time-select">{{ formData.startTime }}—{{ formData.endTime }}</span>
    </div>
    <div class="echarts-form">
      <span class="demonstration">开始时间：</span>
      <el-date-picker
          v-model="startTime"
          v-model="formData.startTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime">
      </el-date-picker>
      <span class="demonstration">结束时间：</span>
      <el-date-picker
          v-model="endTime"
          v-model="formData.endTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime">
      </el-date-picker>
      <span class="demonstration">采样点数：</span>
@@ -87,260 +89,260 @@
          }
        }],
      formData: {
        startTime: '',
        endTime: ''
        startTime: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
      },
      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: []
      bzzList: [],
      nameList: [],
      // legend类别图表展示设置数组
      lengList: [],
      ydatas: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.myChart = this.$echarts.init(this.$refs.echarts)
      this.initEchartsData()
    })
  },
  methods: {
    // 查询搜索功能
    async querySearch () {
    querySearch () {
      this.initEchartsData()
    },
    async initEchartsData () {
      const data = {
        $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM',
        $startTime: this.formData.startTime,
        $endTime: this.formData.endTime,
        $step: 15
      }
      // console.log(data)
      const result = (await mapApi.getDataItems(data)).data
      // console.log(result)
      this.dealWithData(result)
      this.pointsSet(result)
      this.legendSet()
      this.yDataSet()
      this.drawRealTimeDateChart()
    },
    async initEchartsData () {
      const data = {
        $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM',
        $startTime: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss'),
        $endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        $step: 15
      }
      const result = (await mapApi.getDataItems(data)).data
      // this.result = result
      this.dealWithData(result)
    },
    // 数据处理
    dealWithData (result) {
      // 接收数据正确 进行数据处理
      if (result.length > 0) {
        // 处理数据开始
        const d = result
        const nameList = []

        let data
        let datalist

        // 数据判断
        for (let i = 0; i < d.length; i++) {
          if (d[i].ErrorMessage != null) {
            continue
    // 接口数据按照 数据内分类别设置
    pointsSet (d) {
      let data = []
      let datalist = []
      for (let i = 0; i < d.length; i++) {
        // this.RealTimeDataList = []
        // 判断是否继续执行
        if (d[i].ErrorMessage != null) {
          continue
        }
        // temp 临时数据判断方法
        const tempList = [
          {
            'TJIP45.lscl2tbAIA-10505-1': '氮氧化物',
            'TJIP45.lscl2tbAIA-10505-2': '烟尘',
            'TJIP45.lscl2tb552AISA11202A': '二氧化磷',
            'TJIP45.lscl2tb552AISA11201B': 'pH',
            'TJIP45.lscl2tb552AI10710': '二氧化碳'
          }

          // temp 临时数据判断方法
          const tempList = [
            {
              'TJIP45.lscl2tbAIA-10505-1': '氮氧化物',
              'TJIP45.lscl2tbAIA-10505-2': '烟尘',
              'TJIP45.lscl2tb552AISA11202A': '二氧化磷',
              'TJIP45.lscl2tb552AISA11201B': 'pH',
              'TJIP45.lscl2tb552AI10710': '二氧化碳'
            }
          ]
          const name = tempList[0][d[i].UnionTagCode]

          if (nameList.length === 0) {
            nameList.push(name)
            const newdate = new Date(d[i].ReadTime)
        ]
        // 指标
        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,
            value: [newDate, d[i].TagValue]
          }
          datalist = {
            name: name,
            data: [data]
          }
          // console.log('1111111')
          this.RealTimeDataList.push(datalist)
        } else if (this.nameList.indexOf(name) < 0) {
          // 没有指标时
          this.nameList.push(name)
          const newDate = new Date(d[i].ReadTime)
          data = {
            name: name,
            value: [newDate, d[i].TagValue]
          }
          datalist = {
            name: name,
            data: [data]
          }
          // console.log('222222222')
          this.RealTimeDataList.push(datalist)
        } else if (i === d.length - 1) {
          // 循环到最后
          if (this.nameList.indexOf(name) < 0) {
            this.nameList.push(name)
            const newDate = new Date(d[i].ReadTime)
            data = {
              name: name,
              value: [newdate, d[i].TagValue]
              value: [newDate, d[i].TagValue]
            }
            datalist = {
              name: name,
              data: [data]
            }
            // console.log('3333333')
            this.RealTimeDataList.push(datalist)
          } else if (nameList.indexOf(name) < 0) {
            nameList.push(name)
            const newdate = new Date(d[i].ReadTime)
            data = {
              name: name,
              value: [newdate, d[i].TagValue]
            }
            datalist = {
              name: name,
              data: [data]
            }
            this.RealTimeDataList.push(datalist)
          } else if (i === d.length - 1) {
            if (nameList.indexOf(name) < 0) {
              nameList.push(name)
              const newdate = new Date(d[i].ReadTime)
              data = {
                name: name,
                value: [newdate, d[i].TagValue]
              }
              datalist = {
                name: name,
                data: [data]
              }
              this.RealTimeDataList.push(datalist)
            } else {
              const newdate = new Date(d[i].ReadTime)
              data = {
                name: name,
                value: [newdate, d[i].TagValue]
              }
              for (let k = 0; k < this.RealTimeDataList.length; k++) {
                if (this.RealTimeDataList[k].name === name) {
                  this.RealTimeDataList[k].data.push(data)
                }
              }
            }
          } else {
            const newdate = new Date(d[i].ReadTime)
            const newDate = new Date(d[i].ReadTime)
            data = {
              name: name,
              value: [newdate, d[i].TagValue]
              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)
              }
            }
          }
        }
        const lengList = []
        let objTemp

        for (let l = 0; l < nameList.length; l++) {
          let obj
          let IconUrl
          if (nameList[l] === 'pH') {
            IconUrl = 'image://../assets/imgs/legend/WenDu.png'
          } else if (nameList[l] === '氮氧化物') {
            IconUrl = 'image://../assets/imgs/legend/NOX.png'
          } else if (nameList[l] === '烟尘') {
            IconUrl = 'image://../assets/imgs/legend/zongdan.png'
          } else if (nameList[l] === '二氧化磷') {
            IconUrl = 'image://../assets/imgs/legend/YanChen.png'
          } else if (nameList[l] === '二氧化碳') {
            IconUrl = 'image://../assets/imgs/legend/VOCs.png'
        } else {
          const newDate = new Date(d[i].ReadTime)
          data = {
            name: name,
            value: [newDate, d[i].TagValue]
          }

          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 ydatas = []

        // console.log(nameList)
        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 = '#f48183'
          } else if (nameList[j] === '总氮') {
            zdcbcolor = 'red'
            zxcolor = '#e0ffff'
          } else {
            zdcbcolor = 'red'
            zxcolor = '#9ACD32'
          }
          let ydata

          // 临时数据
          const BBZMAPPING = {
            COD: 35,
            pH: 9,
            总氮: 15,
            总磷: 0.3,
            氨氮: 3
          }
          for (let m = 0; m < this.RealTimeDataList.length; m++) {
            let stdValue = null
            if (this.RealTimeDataList[m].name === 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 = {
                name: nameList[j],
                bzhui: stdValue
              }
              ydata = {
                name: nameList[j],
                data: this.RealTimeDataList[m].data,
                zdcbcolor: zdcbcolor,
                zxcolor: zxcolor,
                bzz: stdValue
              }
              // console.log(stdValue)
              this.bzzList.push(this.bzz)
              ydatas.push(ydata)
          for (let k = 0; k < this.RealTimeDataList.length; k++) {
            if (this.RealTimeDataList[k].name === name) {
              this.RealTimeDataList[k].data.push(data)
            }
          }
        }
        const yname = '浓度(mg/l)'
        this.DrawRealTimeDateChart(legend, ydatas, yname)
      }
      console.log(this.RealTimeDataList)
    },
    // legend类别图表展示设置数组
    legendSet () {
      this.lengList = []
      let objTemp
      for (let l = 0; l < this.nameList.length; l++) {
        let obj
        let IconUrl
        if (this.nameList[l] === 'pH') {
          IconUrl = 'image://../assets/imgs/legend/WenDu.png'
        } else if (this.nameList[l] === '氮氧化物') {
          IconUrl = 'image://../assets/imgs/legend/NOX.png'
        } else if (this.nameList[l] === '烟尘') {
          IconUrl = 'image://../assets/imgs/legend/zongdan.png'
        } else if (this.nameList[l] === '二氧化碳') {
          IconUrl = 'image://../assets/imgs/legend/YanChen.png'
        } else if (this.nameList[l] === '二氧化磷') {
          IconUrl = 'image://../assets/imgs/legend/VOCs.png'
        }
        if (this.nameList[l] === '废水' || this.nameList[l] === '废水流量') { // 将废水流量排到数组最后
          objTemp = {
            name: this.nameList[l],
            icon: IconUrl,
            textStyle: {
              color: '#ccc'
            },
            itemWidth: 20,
            itemHeight: 5
          }
        } else {
          obj = {
            name: this.nameList[l],
            icon: IconUrl,
            textStyle: {
              color: '#ccc'
            },
            itemWidth: 20,
            itemHeight: 5
          }
          this.lengList.push(obj)
        }
      }
      this.lengList.push(objTemp)
    },
    // yDataSet 数据处理
    yDataSet () {
      this.bzzList = []
      this.ydatas = []
      for (let j = 0; j < this.nameList.length; j++) {
        let zdcbcolor, zxcolor
        if (this.nameList[j] === 'pH') {
          zdcbcolor = 'red'
          zxcolor = '#900090'
        } else if (this.nameList[j] === '氨氮') {
          zdcbcolor = 'red'
          zxcolor = '#00B0F0'
        } else if (this.nameList[j] === '烟尘') {
          zdcbcolor = 'red'
          zxcolor = '#f48183'
        } else if (this.nameList[j] === '总氮') {
          zdcbcolor = 'red'
          zxcolor = '#e0ffff'
        } else {
          zdcbcolor = 'red'
          zxcolor = '#9ACD32'
        }
        let ydata

        // 临时数据
        const BBZMAPPING = {
          COD: 35,
          pH: 9,
          总氮: 15,
          总磷: 0.3,
          氨氮: 3
        }
        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 = {
              name: this.nameList[j],
              bzhui: stdValue
            }
            ydata = {
              name: this.nameList[j],
              data: this.RealTimeDataList[m].data,
              zdcbcolor: zdcbcolor,
              zxcolor: zxcolor,
              bzz: stdValue
            }
            // console.log(stdValue)
            this.bzzList.push(this.bzz)
            this.ydatas.push(ydata)
          }
        }
      }
    },
    // 根据处理好的数组进行echarts图标的渲染
    drawRealTimeDateChart () {
      this.myChart = this.$echarts.init(this.$refs.echarts)
      this.myChart.clear()

    // 指标根据标准值判断，如果大于标准值是红色
    // 标准线绘制
    DrawRealTimeDateChart (legend, ydatas, yname) {
      const serLists = []
      const legend = this.lengList
      const yname = '浓度(mg/m³)'
      const bzzList = this.bzzList
      for (let i = 0; i < ydatas.length; i++) {
        const zdcbcolor = ydatas[i].zdcbcolor
        const bz = ydatas[i].bzz

      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
        if (bz) {
          obj = {
            name: ydatas[i].name,
            name: this.ydatas[i].name,
            // symbol:'circle', // 折点形状
            // symbolSize: 3,   //大小
            smooth: true, // 直线 ，true 为曲线
@@ -362,7 +364,7 @@
                  }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  color: this.ydatas[i].zxcolor,
                  width: 2
                },
                // borderColor:'black',  //折点边框的颜色
@@ -372,7 +374,7 @@
              }
            },
            type: 'line',
            data: ydatas[i].data,
            data: this.ydatas[i].data,
            markLine: { // 平均值 ， 和 指标上限
              symbol: 'none',
              data: [{
@@ -386,12 +388,7 @@
                yAxis: bz,
                lineStyle: {
                  normal: {
                    type: 'dashed',
                    width: 2,
                    // color: ydatas[i].zxcolor,
                    // color: '#4ec99c',
                    color: function (c) {
                      console.log(c)
                    color: function (c) { // 根据value 显示不同的折点颜色
                      let biaozhuiz
                      for (let i = 0; i < bzzList.length; i++) {
                        if (bzzList[i].name === c.seriesName) {
@@ -414,7 +411,7 @@
          }
        } else {
          obj = {
            name: ydatas[i].name,
            name: this.ydatas[i].name,
            symbol: 'circle', // 折点形状
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
@@ -436,7 +433,7 @@
            //       }
            //     },
            //     lineStyle: { // 折线的颜色
            //       color: ydatas[i].zxcolor,
            //       color: this.ydatas[i].zxcolor,
            //       width: 5
            //     },
            //     borderColor: 'black', // 折点边框的颜色
@@ -446,27 +443,23 @@
            //   }
            // },
            type: 'line',
            data: ydatas[i].data
            data: this.ydatas[i].data
          }
        }

        if (ydatas[i].name === '废气流量' || ydatas[i].name === '废气') {
        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)'
      } else {
        dataUnit = '流量(m³/h)'
      }

      // echarts图表option数据
      const options = {
        /*  title: {
              text: title,
          }, */
        tooltip: { // 提示框
          trigger: 'axis',
          axisPointer: {
@@ -491,15 +484,15 @@
              let colo = ''
              switch (seriesName) {
                case 'pH':
                  colo = '#f206ff'
                  colo = '#900090'
                  break
                case '氮氧化物':
                case '二氧化碳':
                  colo = '#00B0F0'
                  break
                case '烟尘':
                  colo = '#e0ffff'
                  break
                case '二氧化碳':
                case '氮氧化物':
                  colo = '#9ACD32'
                  break
                case '二氧化磷':
@@ -624,16 +617,9 @@
        }],
        series: serLists
      }
      this.myChart.setOption(options)
      this.myChart.setOption(options, true)
      console.log(options)
      window.onresize = this.myChart.resize
    },
    // 定时器 根据时间间隔请求数据
    IntervalRealTimeDate (id, unionTagCodeList, BBZMAPPING) {
      // const interValHander = setInterval(function () {
      //   this.initEchartsData()
      // console.log('间隔请求数据')
      // }, 1500)
      // console.log(interValHander)
    }
  }
}