派生自 wuyushui/SewerAndRainNetwork

chenzeping
2021-04-20 06a11cbc631b4e362cef0e3c487d680f2c0266a7
src/components/BaseNav/WasteWater/RealData.vue
@@ -52,7 +52,7 @@
      dataStandard: [
        {
          current: {
            name: '氮氧化物1',
            name: '氮氧化物',
            val: 29.93
          },
          standard: {
@@ -108,10 +108,10 @@
        yname: ' 浓度(mg/m³)'
      },
      JSONTimeData: {
        id: 21,
        unionTagCodeList: []
      }
      // 实时数据列表
      RealTimeDataList: [],
      bzz: null,
      bzzList: []
    }
  },
  mounted () {
@@ -120,6 +120,10 @@
    })
  },
  methods: {
    // 点击查询按钮功能
    onSubmit () {
      this.DrawEXHRealTimeDateChart()
    },
    // 初始化数据获取echarts的options数据
    async initEchartsData () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
@@ -132,547 +136,253 @@
        $step: 15
      }
      const result = (await mapApi.DataItems(data)).data
      console.log(result)
      // this.hash(result)
      // this.hashtime(result)
      // this.dealwithData(result)
      this.DrawEXHRealTimeDateChart()
      this.myChart.hideLoading()
      this.getRtdb15s(result)
    },
    // 数据处理
    dealwithData (result) {
      // 处理数据开始
      const d = result
      // const nameList = [] // 存放图例
    // echarts数据处理
    getRtdb15s (res) {
      if (res.length > 0) {
        // 处理数据开始
        const d = res
        const nameList = [] // 存放图例
        // 数据类型// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]}
        let data = {}
        // 存放data的数组
        let datalist
        // var bzh = []
      let data // 数据类型// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]}
      // const datalist // 存放data的数组
      // const bzh = []
      for (let i = 0; i < d.length; i++) {
        const name = d[i].UnionTagCode
        const newdate = d[i].ReadTime
        data = {
          name: name,
          value: [newdate, d[i].TagValue]
        for (let i = 0; i < d.length; i++) {
          if (d[i].ErrorMessage != null) {
            continue
          }
          // 临时name数据
          const nameListTemp = [
            {
              'TJIP45.lscl2tbAIA-10505-1': '氮氧化物',
              'TJIP45.lscl2tbAIA-10505-2': '烟尘',
              'TJIP45.lscl2tb552AISA11202A': '二氧化磷',
              'TJIP45.lscl2tb552AISA11201B': 'ph',
              'TJIP45.lscl2tb552AI10710': '二氧化碳'
            }
          ]
          const name = nameListTemp[0][d[i].UnionTagCode]
          if (nameList.length === 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)
            console.log(this.RealTimeDataList)
            // bzh.push(d[i].StdValue);
          } else if (nameList.indexOf(name) < 0) {
            nameList.push(name)
            // bzh.push(d[i].StdValue);
            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)
              // bzh.push(d[i].StdValue);
              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 (var 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)
            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)
              }
            }
          }
        }
        console.log(data)
        // for (var k = 0; k < RealTimeDataList.length; k++) {
        //   if (RealTimeDataList[k].name == name) {
        //     RealTimeDataList[k].data.push(data)
        //   }
        // }
        const divid = 'mycharteff_second'
        const title = name
        const lengList = []
        let objTemp = []
        console.log(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'
          }
          if (nameList[l] === '废水' || nameList[l] === '废水流量') { // 将废水流量排到数组最后
            // eslint-disable-next-line no-const-assign
            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)
          }
          // console.log(lengList)
        }
        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] === 'ph') {
            zdcbcolor = 'red'
            zxcolor = '#f206ff'
          } else if (nameList[j] === '烟尘') {
            zdcbcolor = 'red'
            zxcolor = '#e0ffff'
          } else if (nameList[j] === '氮氧化物') {
            zdcbcolor = 'red'
            zxcolor = '#00B0F0'
          } else if (nameList[j] === '二氧化碳') {
            zdcbcolor = 'red'
            zxcolor = '#9ACD32'
          } else if (nameList[j] === '二氧化磷') {
            zdcbcolor = 'red'
            zxcolor = '#f48183'
          }
          let ydata
          // 临时数据
          const BBZMAPPING = [
            {
              COD: 35,
              废水流量: null,
              总氮: 15,
              总磷: 0.3,
              黯淡: 3
            }
          ]
          for (let m = 0; m < this.RealTimeDataList.length; m++) {
            let stdValue = null
            if (this.RealTimeDataList[m].name === nameList[j]) {
              // for (let p in BBZMAPPING) {
              //   stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
              // }
              BBZMAPPING.forEach((item) => {
                stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
              })
              ydata = {
                name: nameList[j],
                data: this.RealTimeDataList[m].data,
                zdcbcolor: zdcbcolor,
                zxcolor: zxcolor,
                bzz: stdValue
              }
              this.bzz = {
                name: nameList[j],
                bzhui: stdValue
              }
              this.bzzList.push(this.bzz)
              ydatas.push(ydata)
            }
          }
        }
        const yname = '浓度(mg/l)'
        this.DrawRealTimeDateChart(divid, title, legend, ydatas, yname)
        //
        // this.IntervalRealTimeDate(id, unionTagCodeList, BBZMAPPING)
        this.IntervalRealTimeDate()
      }
    },
    // hash (result) {
    //   // const hash = []
    //   // for (let i = 0; i < result.length; i++) {
    //   //   if (hash.indexOf(result[i].UnionTagCode) === -1) {
    //   //     hash.push(result[i].UnionTagCode)
    //   //   }
    //   // }
    //   // console.log(hash)
    //   // this.JSONTimeData.unionTagCodeList = hash
    //   // var lengList = []
    //   var lengList = result
    //   var objTemp
    //
    //   for (var l = 0; l < lengList.length; l++) {
    //     var obj
    //     var iconurl
    //     if (lengList[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)
    // },
    hashtime (result) {
      const hashtime = []
      for (let i = 0; i < result.length; i++) {
        if (hashtime.indexOf(result[i].ReadTime) === -1) {
          hashtime.push(result[i].ReadTime)
        }
      }
      console.log(hashtime)
    },
    DrawEXHRealTimeDateChart () {
      // 赋值的数据
      // var legend = this.echartsOptions.legend
      // var ydatas = this.echartsOptions.ydatas
      const yname = this.echartsOptions.yname
      const ydatas = [
        {
          name: '氮氧化物',
          zdcbcolor: '#00B0F0',
          zxcolor: '#00B0F0',
          bzz: 50,
          data: [{
            name: '氮氧化物',
            value: ['2021/04/13 09:18:19', 39.51431]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:18:34', 38.76508]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:18:49', 37.57471]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:19:04', 36.3796]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:19:19', 36.10718]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:19:34', 35.81126]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:19:49', 35.9184]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:20:04', 36.08839]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:20:19', 36.3718]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:20:34', 36.8966]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:20:49', 37.3998]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:21:04', 37.11937]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:21:19', 36.12424]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:21:34', 34.99567]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:21:49', 34.48063]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:22:04', 34.62222]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:22:19', 34.84583]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:22:34', 35.80923]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:22:49', 35.93465]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:23:04', 35.78891]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:23:19', 35.54268]
          }]
        },
        {
          name: '二氧化硫',
          data: [{
            name: '二氧化硫',
            value: ['2021/04/13 09:18:19', 5.112573]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:18:34', 4.578955]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:18:49', 4.869465]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:19:04', 5.270735]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:19:19', 5.355475]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:19:34', 5.242907]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:19:49', 5.230558]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:20:04', 5.262951]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:20:19', 5.268744]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:20:34', 5.159671]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:20:49', 4.955352]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:21:04', 5.110546]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:21:19', 5.235723]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:21:34', 5.443502]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:21:49', 5.708939]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:22:04', 5.882327]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:22:19', 6.017494]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:22:34', 5.410021]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:22:49', 5.379694]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:23:04', 5.551433]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:23:19', 5.819743]
          }],
          zdcbcolor: 'red',
          zxcolor: '#fff21c',
          bzz: 50
        },
        {
          name: '废气流量',
          data: [{
            name: '废气流量',
            value: ['2021/04/13 09:18:19', 5.012617]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:18:34', 4.992213]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:18:49', 5.026886]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:19:04', 5.052861]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:19:19', 5.038826]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:19:34', 5.062339]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:19:49', 5.071915]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:20:04', 5.053693]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:20:19', 5.03562]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:20:34', 5.043983]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:20:49', 5.059231]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:21:04', 5.042176]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:21:19', 5.028253]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:21:34', 5.024891]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:21:49', 5.01542]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:22:04', 5.025787]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:22:19', 5.038269]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:22:34', 5.01441]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:22:49', 5.010105]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:23:04', 5.012341]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:23:19', 4.996146]
          }],
          zdcbcolor: 'red',
          zxcolor: '#9ACD32',
          bzz: null
        },
        {
          name: '烟尘',
          data: [{
            name: '烟尘',
            value: [['2021/04/13 09:18:19', 0.8297127]]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:18:34', 0.8347292]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:18:49', 0.9218481]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:19:04', 0.913429]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:19:19', 0.9026684]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:19:34', 0.8060119]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:19:49', 0.781314]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:20:04', 0.8958074]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:20:19', 0.9093901]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:20:34', 0.8743498]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:20:49', 0.9024854]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:21:04', 0.9456897]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:21:19', 0.9747347]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:21:34', 0.9200308]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:21:49', 0.8987293]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:22:04', 0.8613345]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:22:19', 0.8747463]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:22:34', 0.8883187]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:22:49', 0.881333]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:23:04', 0.9142911]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:23:19', 0.9569058]
          }],
          zdcbcolor: 'red',
          zxcolor: '#f48183',
          bzz: 10
        }]
      // const legend = [
      //   // data: 'legend'
      //   {
      //     name: '氮氧化物',
      //     icon: 'image://../assets/imgs/legend/NOX.png',
      //     textStyle: { color: '#ccc' },
      //     itemWidth: 20,
      //     itemHeight: 15
      //   },
      //   {
      //     icon: 'image://../assets/imgs/legend/SO2.png',
      //     itemHeight: 5,
      //     itemWidth: 20,
      //     name: '二氧化硫',
      //     textStyle: {
      //       color: '#CCC'
      //     }
      //   },
      //   {
      //     icon: 'image://../assets/imgs/legend/YanChen.png',
      //     itemHeight: 5,
      //     itemWidth: 20,
      //     name: '烟尘',
      //     textStyle: { color: '#ccc' }
      //   },
      //   {
      //     icon: 'image://../assets/imgs/legend/VOCs.png',
      //     itemHeight: 5,
      //     itemWidth: 20,
      //     name: '废气流量',
      //     textStyle: { color: '#ccc' }
      //   }
      // ]
      // const iconlist = ['image://../assets/imgs/legend/NOX.png', 'image://../assets/imgs/legend/VOCs.png']
      //     {
      //   icon: 'image://../assets/imgs/legend/NOX.png'
      // }, {
      //   icon: 'image://../assets/imgs/legend/SO2.png'
      // }, {
      //   icon: 'image://../assets/imgs/legend/YanChen.png'
      // },
      // {
      //   icon: 'image://../assets/imgs/legend/VOCs.png'
      // }]
      // 初始化echarts
    // 获取数据用于echarts图表绘制
    DrawRealTimeDateChart (id, title, legend, ydatas, yname) {
      this.myChart = this.$echarts.init(this.$refs.echarts)
      // echarts的series数据
      const serLists = []
      // for (var j = 0; j < ydatas.length; j++) {
      //   var len = ydatas[j].data.length
      //   for (var k = 0; k < len; k++) {
      //     var it = ydatas[j].data[k]
      //     var it2 = parseFloat(it).toFixed(2)
      //     ydatas[j].data[k] = it2
      //   }
      // }
      let dataUnit
      for (let i = 0; i < ydatas.length; i++) {
        var bz = ydatas[i].bzz
        var obj
        const zdcbcolor = ydatas[i].zdcbcolor
        const bz = ydatas[i].bzz
        let obj
        if (bz) {
          obj = {
            name: ydatas[i].name,
            smooth: true,
            // symbol:'circle', // 折点形状
            // symbolSize: 3,   //大小
            smooth: true, // 直线 ,true 为曲线
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  // var biaozhuiz
                  // for (var i = 0; i < exhbzzList.length; i++) {
                  //   if (exhbzzList[i].name == c.seriesName) {
                  //     biaozhuiz = exhbzzList[i].bzhui
                  //   }
                  // }
                  // if (c.value[1] > biaozhuiz) {
                  //   return zdcbcolor
                  // } else if (c.value[1] > biaozhuiz * 0.9) {
                  //   return '#FFA500'
                  // } else {
                  //   return '#33c95f'
                  // }
                  let biaozhuiz
                  for (var i = 0; i < this.bzzList.length; i++) {
                    if (this.bzzList[i].name === c.seriesName) {
                      biaozhuiz = this.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,
@@ -683,6 +393,7 @@
                  show: false
                }
              }
            },
            type: 'line',
            data: ydatas[i].data,
@@ -702,13 +413,17 @@
                  type: 'dashed',
                  width: 2
                }
              }]
              }
              ]
            }
          }
        } else {
          obj = {
            name: ydatas[i].name,
            smooth: true,
            // symbol:'circle', // 折点形状
            // symbolSize: 3,   //大小
            smooth: true, // 直线 ,true 为曲线
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
@@ -723,18 +438,30 @@
                  show: false
                }
              }
            },
            type: 'line',
            data: ydatas[i].data
          }
        }
        if (ydatas[i].name === '废气流量' || ydatas[i].name === '废气') {
          obj.yAxisIndex = 1
        }
        // 临时
        const datatype = 1
        if (datatype === 1) {
          dataUnit = '流量(m³/d)'
        } else {
          dataUnit = '流量(m³/h)'
        }
        serLists.push(obj)
      }
      const option = {
        tooltip: {
        /*  title: {
              text: title,
          }, */
        tooltip: { // 提示框
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
@@ -743,27 +470,41 @@
            }
          },
          formatter: function (params) {
            var s = params[0].name + '<br />'
            for (var i = 0; i < params.length; i++) {
            let s = params[0].name + '<br />'
            for (let i = 0; i < params.length; i++) {
              // var name = params[i].name
              // 图表title名称
              var seriesName = params[i].seriesName
              const seriesName = params[i].seriesName
              // 值
              var value = params[i].value[1]
              // var valueFliter = this.formatter(value)
              var maker = params[i].marker
              if (seriesName === '二氧化硫') {
                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:#F206FF;"></span>'
              } else {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>'
              const value = params[i].value[1]
              // var valueFliter = formatter(value)
              const valueFliter = parseFloat(value).toFixed(2)
              let maker = params[i].marker
              let colo = ''
              switch (seriesName) {
                case 'ph':
                  colo = '#f206ff'
                  break
                case '氮氧化物':
                  colo = '#00B0F0'
                  break
                case '烟尘':
                  colo = '#e0ffff'
                  break
                case '二氧化碳':
                  colo = '#9ACD32'
                  break
                case '二氧化磷':
                  colo = '#f48183'
                  break
                default:
                  colo = ''
                  break
              }
              s += maker + seriesName + ':' + value + '<br />'
              maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + colo + ';"></span>'
              s += maker + seriesName + ':' + valueFliter + '<br />'
            }
            return s
          }
@@ -775,25 +516,12 @@
          }
        },
        grid: {
          top: '20%'
          top: '20%',
          bottom: '15%'
        },
        // legend: {
        //   data: legend
        // },
        legend: [
          {
            // icon: iconlist.map(item => {
            //   return item
            // }),
            icon: 'image://../assets/imgs/legend/VOCs.png',
            itemHeight: 20,
            itemWidth: 30,
            textStyle: { color: '#ccc' },
            data: ydatas.map(item => {
              return item.name
            })
          }
        ],
        legend: {
          data: legend
        },
        dataZoom: [{
          type: 'inside',
          start: 0,
@@ -812,38 +540,39 @@
            shadowOffsetY: 2
          }
        }],
        xAxis: {
        xAxis: { // x 轴设置
          type: 'time',
          boundaryGap: false,
          axisLabel: {
          axisLabel: { // x轴全部显示
            // rotate: 30,
            margin: 6,
            interval: 0,
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: {
          splitLine: { // 网格垂直线为 虚线
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisTick: {
          axisTick: { // x 轴刻度显示
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
              width: 1// 这里是为了突出显示加上的
            }
          }
          // data: xdata
        },
        yAxis: [{
          type: 'value',
          name: yname,
          max: function (value) {
            var ma = value.max > 100 ? value.max : 100
            return parseInt(ma)
            return parseInt(value.max + 30)
          },
          axisLabel: {
            formatter: '{value}',
@@ -856,16 +585,16 @@
          },
          splitLine: {
            show: false
          },
          }, // y轴 网格线不显示,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
              width: 1// 这里是为了突出显示加上的
            }
          }
        }, {
          type: 'value',
          name: '废气流量(m3/h)',
          name: dataUnit,
          axisLabel: {
            formatter: '{value}',
            textStyle: {
@@ -877,215 +606,29 @@
          },
          splitLine: {
            show: false
          },
          }, // y轴 网格线不显示,
          // inverse: true,
          // nameLocation: 'start',
          // max:500,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
              width: 1// 这里是为了突出显示加上的
            }
          }
        }],
        series: serLists
      }
      this.myChart.setOption(option)
      window.addEventListener('resize', this.myChart.resize)
      // 显示加载动画
      this.myChart.showLoading()
      // this.IntervalEXHRealTimeDate()
      // this.myChart.on('legendselectchanged', function (params) {
      //   var StdVal = null
      //   var op = { yAxis: {} }
      //   var max_val_list = [] // 所有显示折线的标准值
      //   if (exhbzzList && exhbzzList.length > 0) {
      //     $.each(exhbzzList, function (index, item) {
      //       params.selected[item.name] ? max_val_list.push(item.bzhui) : ''
      //       if (item.name === params.name) {
      //         item.name === 'VOCs' ? StdVal = 20 : StdVal = item.bzhui
      //       }
      //     })
      //   }
      //   max_val_list = max_val_list.sort(function (a, b) { return a - b }) // 排序
      //   op.yAxis.max = function (value) {
      //     var ma = value.max < StdVal ? StdVal : Math.ceil(value.max)
      //     max_val_list ? ma = max_val_list[max_val_list.length - 1] : ''// 选择最大值
      //     return ma
      //   }
      //   myChart.setOption(op)
      // })
      // myChart.on('click', function (params) {
      //   var nowDate = new Date().Format()
      // })
    },
    // 点击查询按钮功能
    onSubmit () {
      this.DrawEXHRealTimeDateChart()
      this.myChart.hideLoading()
    // 定时器 根据时间间隔请求数据
    IntervalRealTimeDate (id, unionTagCodeList, BBZMAPPING) {
      // const interValHander = setInterval(function () {
      //   this.initEchartsData()
      console.log('间隔请求数据')
      // }, 1500)
      // console.log(interValHander)
    }
    // getRtdbFormat (res) {
    //   var data = res.collection.items
    //   var dataArray = []
    //   for (var i = 0; i < data.length; i++) {
    //     var dataFormat = {
    //       UnionTagCode: data[i].data[0].value,
    //       TagValue: parseFloat(data[i].data[1].value),
    //       ReadTime: data[i].data[3].value,
    //       ErrorMessage: data[i].data[5].value
    //     }
    //     dataArray.push(dataFormat)
    //   }
    //   return dataArray
    // },
    // 1.坐标轴实现,画实时数据
    // getRtdb15s (unionTagCodeList, startTime, endTime, step, res) {
    //   if (this.res.length > 0) {
    //     // 处理数据开始
    //     var d = res
    //     var nameList = [] // 存放图例
    //
    //     var data // 数据类型// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]}
    //     var datalist // 存放data的数组
    //     // var bzh = []
    //     for (var i = 0; i < d.length; i++) {
    //       if (d[i].ErrorMessage != null) {
    //         continue
    //       }
    //       // var name = CFG.DATA_REALTIME_TAGCODETABLE[d[i].UnionTagCode].TagName
    //
    //       if (nameList.length === 0) {
    //         nameList.push(name)
    //
    //         var newdate = new Date(this.res.ReadTime)
    //         data = {
    //           name: name,
    //           value: [newdate, this.res.TagValue]
    //         }
    //
    //         datalist = {
    //           name: name,
    //           data: [data]
    //         }
    //
    //         this.EXHRealTimeDataList.push(datalist)
    //       } else if (nameList.indexOf(name) < 0) {
    //         nameList.push(name)
    //
    //         // var newdate = new Date(d[i].ReadTime)
    //
    //         data = {
    //           name: name,
    //           value: [newdate, d[i].TagValue]
    //         }
    //         datalist = {
    //           name: name,
    //           data: [data]
    //         }
    //         this.EXHRealTimeDataList.push(datalist)
    //       } else if (i === d.length - 1) {
    //         if (nameList.indexOf(name) < 0) {
    //           nameList.push(name)
    //
    //           // var newdate = new Date(d[i].ReadTime)
    //
    //           data = {
    //             name: name,
    //             value: [newdate, d[i].TagValue]
    //           }
    //           datalist = {
    //             name: name,
    //             data: [data]
    //           }
    //           // EXHRealTimeDataList.push(datalist)
    //         } else {
    //           // var newdate = new Date(d[i].ReadTime)
    //           data = {
    //             name: name,
    //             value: [newdate, d[i].TagValue]
    //           }
    //           for (var k = 0; k < this.EXHRealTimeDataList.length; k++) {
    //             if (this.EXHRealTimeDataList[k].name === name) {
    //               this.EXHRealTimeDataList[k].data.push(data)
    //             }
    //           }
    //         }
    //       } else {
    //         const newdate = new Date(d[i].ReadTime)
    //         data = {
    //           name: name,
    //           value: [newdate, d[i].TagValue]
    //         }
    //         for (let k = 0; k < this.EXHRealTimeDataList.length; k++) {
    //           if (this.EXHRealTimeDataList[k].name === name) {
    //             this.EXHRealTimeDataList[k].data.push(data)
    //           }
    //         }
    //       }
    //     }
    //
    //     // var divid = 'mychart_ss'
    //     // var title = name
    //     var lengList = []
    //     var objTemp
    //
    //     for (var l = 0; l < nameList.length; l++) {
    //       var obj
    //       var iconurl
    //       if (nameList[l] === '二氧化硫') {
    //         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/grn.png'
    //       } else if (nameList[l] === '温度') {
    //         iconurl = 'image://../assets/imgs/legend/WenDu.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)
    //
    //     this.DrawEXHRealTimeDateChart(this.echartsOptions.id, this.echartsOptions.title, this.echartsOptions.legend, this.echartsOptions.ydatas, this.echartsOptions.yname)
    //   }
    // },
    // 钩子调用实时
    // IntervalEXHRealTimeDate () {
    //   // 定时器函数
    //   this.DrawEXHRealTimeDateChart()
    //   setInterval(function () {
    //     // $('.RealTime').empty()
    //     this.startTime = dayjs().subtract(5, 'minute').format('YYYY-MM-DD HH:mm:ss')
    //     this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
    //     this.step = '15'
    //     // this.getRtdb15s(this.unionTagCodeList, this.startTime, this.endTime, this.step, this.res)
    //     // PreQueryTime=endTime;
    //   }, 1500)
    // }
  }
}
</script>