Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

chenzeping

2021-04-13 af153c8d632eef5bcf6210182a5585b313a35e27

Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop

 src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue

@@ -15,13 +15,13 @@
          <div class="pickerData">
            <span> 开始时间:</span>
            <span class="pickerTable">
              <el-date-picker  type="datetime"   v-model="value1"></el-date-picker>
              <el-date-picker  type="datetime"   v-model="formInline.timeStart"></el-date-picker>
            </span>
          </div>
          <div class="pickerData">
            <span >结束时间:</span>
            <span class="pickerTable">
              <el-date-picker type="datetime"  v-model="value2"></el-date-picker>
              <el-date-picker type="datetime"  v-model="formInline.timeEnd"></el-date-picker>
            </span>
          </div>
        </div>
@@ -66,81 +66,271 @@
  },
  data () {
    return {
      value1: '',
      value2: '',
      watchData: [],
      dialogVisible: false,
      myChar: null,
      value: '',
      formInline: {
        user: '',
        region: ''
        region: '',
        timeStart: '',
        timeEnd: ''
      },
      info: this.series
      info: this.series,
      JsonDayCharts: {
        id: 'mychartsDay',
        title: '加热炉烟气',
        legend: [
          {
            icon: 'image://../assets/imgs/legend/NOX.png',
            itemHeight: 5,
            itemWidth: 20,
            textStyle: {
              color: '#CCC'
            },
            name: '氮氧化物'
          },
          {
            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/WenDu.png',
            itemHeight: 5,
            itemWidth: 20,
            name: '温度',
            textStyle: { color: '#ccc' }
          },
          {
            icon: 'image://../assets/imgs/legend/VOCs.png',
            itemHeight: 5,
            itemWidth: 20,
            name: '废气流量',
            textStyle: { color: '#ccc' }
          }
        ],
        xdata: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日'],
        ydatas: [
          { name: '氮氧化物', data: ['40.01', '44.38', '44.71', '40.43', '42.79', '46.00', '52.66', '48.75', '45.75', '49.24', '54.22', '52.25', '53.34', '65.72', '60.01', '54.20', '48.37', '45.56', '42.58', '40.96', '45.14', '49.31', '54.21', '57.89', '51.18', '60.21', '57.76', '60.33', '48.34', '45.66', '53.38'], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 100 },
          { name: '二氧化硫', data: ['9.22', '8.07', '8.69', '9.16', '6.25', '5.78', '15.91', '3232992.75', '11.34', '13.63', '14.13', '11.47', '8.48', '9.46', '7.85', '5.91', '4.64', '4.77', '6.99', '5.82', '5.59', '5.30', '6.62', '9.00', '13.35', '2.68', '1.89', '0.70', '3.68', '6.25', '5.14'], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 50 },
          {
            name: '废气流量',
            data: ['2827518.25', '2763525.75', '2776435.50', '2742003.50', '2856001.75', '2890287.00', '2832898.25', '2803715.50', '2513925.75', '2753303.50', '2749836.00', '2786188.50', '2738838.00', '2733660.25', '2815521.25', '2830217.25', '2798918.00', '2803543.50', '2770175.25', '2823321.25', '2856329.25', '2801588.00', '2798103.50', '2766343.00', '2750489.50', '2697786.25', '2796775.50', '2808028.50', '2813561.75', '2757129.25', '2720755.50'],
            zdcbcolor: 'red',
            zxcolor: '#9ACD32',
            bzz: null
          },
          { name: '烟尘', data: ['3.88', '3.48', '3.85', '3.99', '3.99', '4.48', '3.96', '3.36', '2.79', '4.65', '4.70', '5.08', '4.55', '4.90', '4.43', '3.10', '2.64', '2.84', '2.63', '2.69', '2.56', '2.32', '2.51', '3.29', '3.40', '3.06', '2.94', '2.90', '2.80', '3.07', '4.55'], zdcbcolor: 'red', zxcolor: '#f48183', bzz: 30 }
        ],
        yname: ' 浓度(mg/m³)',
        // id:'mychartDay',
        datatype: 1
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
      this.CreateChart(this.JsonDayCharts.id, this.JsonDayCharts.title, this.JsonDayCharts.legend, this.JsonDayCharts.xdata, this.JsonDayCharts.ydatas, this.JsonDayCharts.yname, this.JsonDayCharts.id, this.JsonDayCharts.datatype)
    },
    drawChart: function () {
      window.onresize = function () {
        var h1 = document.documentElement.clientHeight// 获取屏幕的高度
        if (h1 > 700) {
          this.myChart.getDom().style.height = 3 + 'rem'
          this.myChart.getDom().style.width = 6 + 'rem'

    CreateChart: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) {
      this.mychartDay = this.$echarts.init(this.$refs.main)
      this.mychartDay.clear()
      var dataUnit = ''
      if (datatype === 1) {
        dataUnit = '气量(m³/d)'
        } else {
          this.myChart.getDom().style.height = 3 + 'rem'
          this.myChart.getDom().style.width = 6 + 'rem'
        dataUnit = '气量(m³/h)'
        }
        this.myChart.resize()

      var 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
        }
      }

      for (var i = 0; i < ydatas.length; i++) {
        // var zdcbcolor = ydatas[i].zdcbcolor
        var bzz = ydatas[i].bzz
        var obj
        if (bzz == null) {
          obj = {
            name: ydatas[i].name,
            symbol: 'circle', // 折点形状
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            yAxisIndex: 1,
            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 > 999999999999) {
                //     return zdcbcolor
                //   } else {
                //     return '#33c95f'
                //   }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                },
                borderColor: ydatas[i].zxcolor, // 折点边框的颜色
                label: { // 显示值
                  show: false
                }
      }
    },
    initOptions: function (dateDate, series) {
      var options = {
        title: {
          // text: '折线图堆叠'
            type: 'line',
            data: ydatas[i].data
          }
        } else {
          obj = {
            name: ydatas[i].name,
            symbol: 'circle', // 折点形状
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，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 > biaozhuiz) {
                //     return zdcbcolor
                //   } else if (c.value > biaozhuiz * 0.9) {
                //     return '#FFA500'
                //   } else {
                //     return '#33c95f'
                //   }
        },
        color: ['#446cdc', '#c4c916', '#c1187e'],
        tooltip: {
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                },
                borderColor: ydatas[i].zxcolor, // 折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }
            },
            type: 'line',
            data: ydatas[i].data,
            markLine: { // 平均值 ， 和 指标上限
              symbol: 'none',
              data: [
                /* {
                 type: 'average',
                 name: '日平均值',
                 label: {
                     normal: {
                         position: 'end',  //显示位置
                         formatter:  ydatas[i].name+'\n日平均值'+'{c}' //显示样式
                     }
                 },
                 lineStyle:{   // 颜色
                     color: 'yellow',
                     type:'solid'
                 }
             }, */ {
                  label: {
                    normal: {
                      position: 'end',
                      formatter: '' // ydatas[i].name+'标准值'//+'{c}'
                    }
                  },
                  name: '标准值',
                  yAxis: bzz,
                  lineStyle: {
                    color: ydatas[i].zxcolor,
                    type: 'dashed',
                    width: 2
                  }
                }
              ]
            }
          }
        }
        serLists.push(obj)
      }

      var option = {
        tooltip: { // 提示框
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color: '#1a4245'
            }
          },
          formatter: function (params) {
            var s = params[0].name + '<br/>'
            for (var i = 0; i < params.length; i++) {
              // const name = params[i].name
              // 图表title名称
              var seriesName = params[i].seriesName
              // 值
              var value = params[i].value
              var valueFliter
              if (value === 'NaN') {
                valueFliter = ''
              } else {
                // valueFliter = 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>'
              }
              s += maker + seriesName + ':' + valueFliter + '<br />'
            }
            return s
          }
        },
        legend: {
          x: '200px',
          y: '30px',
          data: [{
            name: 'COD',
            textStyle: {
              color: '#00d0f9'
        toolbox: { // 打印等工具
          show: false,
          feature: {
            saveAsImage: {}
            }
          },
          {
            name: '氨氮',
            textStyle: {
              color: '#00d0f9'
            }
        grid: { // 网格
          top: '20%',
          left: '5%'
          // containLabel: true
          },
          {
            name: '废水流量',
            textStyle: {
              color: '#00d0f9'
            }
          }]
        legend: { // 图例
          data: legend
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {},
        // 图标缩放设置
        dataZoom: [{
          type: 'inside',
          start: 0,
@@ -149,6 +339,7 @@
          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',
@@ -158,17 +349,14 @@
            shadowOffsetY: 2
          }
        }],
        // x轴的设置
        xAxis: {
        xAxis: { // x 轴设置
          type: 'category',
          boundaryGap: false,
          data: dateDate,
          axisLabel: { // x轴全部显示
            rotate: 20,
            interval: 0,
            textStyle: {
              color: '#fff',
              fontSize: 10
              color: '#fff'
            }
          },
          splitLine: { // 网格垂直线为虚线
@@ -185,93 +373,334 @@
              color: '#FFFFFF',
              width: 1 // 这里是为了突出显示加上的
            }
          }
        },
        // Y 轴的设置
          data: xdata
        },
        yAxis: [{
          type: 'value',
          position: 'left', // 多 Y 轴使用
          name: '浓度(mg/m³)',
          name: yname,
          // max: function (value) {
          //   var max_val_list = [] // 所有显示折线的标准值
          //   if (exhbzzList && exhbzzList.length > 0) {
          //     if (value.max != '-Infinity') { // 获取所有监测指标的max值 2020/12/31
          //       valMax = parseInt(value.max + 5)
          //     }
          //     $.each(exhbzzList, function (index, item) {
          //       if (item.bzhui != null) {
          //         max_val_list.push(item.bzhui)
          //       }
          //     })
          //   }
          //   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]
          //   return parseInt(ma)
          // },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff' // 坐标的字体颜色
              color: '#fff'
            }
          },
          axisPointer: {
            snap: true // 自动吸附最近的点
            snap: true
          },
          splitLine: {
            show: false // y轴 网格线不显示
          },
            show: false
          }, // y轴 网格线不显示,
          axisLine: {
            lineStyle: {
              color: '#ffffff', // 坐标轴的颜色
              width: 1
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
            }
          }
        },
        {
        }, {
          type: 'value',
          position: 'right', // 多 Y 轴使用
          name: '流量(m³/h³)',
          name: dataUnit,
          max: function (value) {
            var ma = value.max > 120 ? value.max : 120
            return parseInt(ma)
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff' // 坐标的字体颜色
              color: '#fff'
            }
          },
          axisPointer: {
            snap: true // 自动吸附最近的点
            snap: true
          },
          splitLine: {
            show: false // y轴 网格线不显示
          },
            show: false
          }, // y轴 网格线不显示,
          axisLine: {
            lineStyle: {
              color: '#ffffff', // 坐标轴的颜色
              width: 1
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
            }
          }
        }],
        series: series
        series: serLists
      }
      return options
      this.mychartDay.setOption(option)

      // this.mychartDay.on('legendselectchanged', function (params) {
      //   var StdVal = null
      //   var op = { yAxis: {} }
      //   var max_val_list = [] // 所有显示折线的标准值
      //   if (exhbzzList && exhbzzList.length > 0) {
      //     max_val_list.push(valMax) // 将监测指标的max值也放入数组 2020/12/31
      //     $.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
      //   }
      //   this.mychartDay.setOption(op)
      // })

      /**
   * 解决mychartDay.on('click',function(){...})事件重复触发的问题
   * Date: 20200720
   */
      this.mychartDay.off('click')

      /**
   *  图标点击事件
   *  20190426 add
   * */
      // this.mychartDay.on('click', function (params) {
      //   // 获取当前时间，小时
      //   var nowHours = new Date().Format('hh')
      //   // 点击折线图折点对应的时间
      //   // 需要传的时间为
      //   var _date = null
      //   if (params.name.indexOf('时') !== -1) {
      //     var hours = params.name.substring(0, params.name.indexOf('时'))
      //     if (parseInt(hours) < parseInt(nowHours)) {
      //       _date = new Date().Format('yyyy-MM-dd') + ' ' + hours + ':00:00'
      //     } else {
      //       var currentDate = new Date()
      //       // 24小时之前时间
      //       var stringDate = new Date(currentDate.getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')
      //       _date = stringDate + ' ' + hours + ':00:00'
      //     }
      //   } else if (params.name.indexOf('日') !== -1) {
      //     var day = params.name.substring(0, params.name.indexOf('日') - 1)
      //     _date = new Date().Format('yyyy-MM') + '-' + day.trim()
      //   }

      // todo 调接口 查凭证
      // if (params.color != 'red') {
      //   var poltMtrlId
      //   var monItemId = 28
      //   for (var i = 0; i < wrwIDS.length; i++) {
      //     if (params.seriesName == wrwIDS[i].name) {
      //       poltMtrlId = wrwIDS[i].id
      //     }
      //   }
      //   getCBMX(jcdID, poltMtrlId, monItemId, _date, function (res) {
      //     createDivByMouse(res, params.event)
      //   })
      // }
      // createDivByMouse("s",params.event);
      // })
    },
    drawChart: function () {
      window.onresize = function () {
        var h1 = document.documentElement.clientHeight// 获取屏幕的高度
        if (h1 > 700) {
          this.mychartDay.getDom().style.height = 3 + 'rem'
          this.mychartDay.getDom().style.width = 6 + 'rem'
        } else {
          this.mychartDay.getDom().style.height = 3 + 'rem'
          this.mychartDay.getDom().style.width = 6 + 'rem'
    }
        this.mychartDay.resize()
      }
    }
    // initOptions: function (dateDate, series) {
    //   var options = {
    //     title: {
    //       // text: '折线图堆叠'
    //     },
    //     color: ['#446cdc', '#c4c916', '#c1187e'],
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: {
    //         type: 'cross',
    //         label: {
    //           color: '#1a4245'
    //         }
    //       }
    //     },
    //     legend: {
    //       x: '200px',
    //       y: '30px',
    //       data: [{
    //         name: 'COD',
    //         textStyle: {
    //           color: '#00d0f9'
    //         }
    //       },
    //       {
    //         name: '氨氮',
    //         textStyle: {
    //           color: '#00d0f9'
    //         }
    //       },
    //       {
    //         name: '废水流量',
    //         textStyle: {
    //           color: '#00d0f9'
    //         }
    //       }]
    //     },
    //     grid: {
    //       left: '3%',
    //       right: '3%',
    //       bottom: '3%',
    //       containLabel: true
    //     },
    //     toolbox: {},
    //     // 图标缩放设置
    //     dataZoom: [{
    //       type: 'inside',
    //       start: 0,
    //       end: 100
    //     }, {
    //       start: 0,
    //       end: 100,
    //       show: false,
    //       handleSize: '80%',
    //       handleStyle: {
    //         color: '#fff',
    //         shadowBlur: 3,
    //         shadowColor: 'rgba(0, 0, 0, 0.6)',
    //         shadowOffsetX: 2,
    //         shadowOffsetY: 2
    //       }
    //     }],
    //     // x轴的设置
    //     xAxis: {
    //       type: 'category',
    //       boundaryGap: false,
    //       data: dateDate,
    //       axisLabel: { // x轴全部显示
    //         rotate: 20,
    //         interval: 0,
    //         textStyle: {
    //           color: '#fff',
    //           fontSize: 10
    //         }
    //       },
    //       splitLine: { // 网格垂直线为虚线
    //         show: true,
    //         lineStyle: {
    //           type: 'dashed'
    //         }
    //       },
    //       axisTick: { // x 轴刻度显示
    //         show: false
    //       },
    //       axisLine: {
    //         lineStyle: {
    //           color: '#FFFFFF',
    //           width: 1 // 这里是为了突出显示加上的
    //         }
    //       }
    //     },
    //     // Y 轴的设置
    //     yAxis: [{
    //       type: 'value',
    //       position: 'left', // 多 Y 轴使用
    //       name: '浓度(mg/m³)',
    //       axisLabel: {
    //         formatter: '{value}',
    //         textStyle: {
    //           color: '#fff' // 坐标的字体颜色
    //         }
    //       },
    //       axisPointer: {
    //         snap: true // 自动吸附最近的点
    //       },
    //       splitLine: {
    //         show: false // y轴 网格线不显示
    //       },
    //       axisLine: {
    //         lineStyle: {
    //           color: '#ffffff', // 坐标轴的颜色
    //           width: 1
    //         }
    //       }
    //     },
    //     {
    //       type: 'value',
    //       position: 'right', // 多 Y 轴使用
    //       name: '流量(m³/h³)',
    //       axisLabel: {
    //         formatter: '{value}',
    //         textStyle: {
    //           color: '#fff' // 坐标的字体颜色
    //         }
    //       },
    //       axisPointer: {
    //         snap: true // 自动吸附最近的点
    //       },
    //       splitLine: {
    //         show: false // y轴 网格线不显示
    //       },
    //       axisLine: {
    //         lineStyle: {
    //           color: '#ffffff', // 坐标轴的颜色
    //           width: 1
    //         }
    //       }
    //     }],
    //     series: series
    //   }
    //   return options
    // }
  },
  mounted () {
    this.$nextTick(() => {
      this.drawChart()
      const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonDateData)).reverse()
      console.log(dataWatch)
      var dateDate = []
      // {COD:[3,4,5]}
      var data = {}
      for (var n = 0; n < dataWatch.length; n++) {
        var d = dataWatch[n].MonTimeStr.substring(5, 9)
        if (dateDate.indexOf(d) < 0) {
          dateDate.push(d)
        }
        if (data[dataWatch[n].PoltmtrlName]) {
          data[dataWatch[n].PoltmtrlName].push(dataWatch[n].MonQty)
        } else {
          data[dataWatch[n].PoltmtrlName] = [dataWatch[n].MonQty]
        }
      }
      var series = []
      for (var k in data) {
        series.push({
          name: k,
          type: 'line',
          yAxisIndex: k === '废水流量' ? 1 : 0,
          data: data[k]
        })
      }
      console.log(series)
      const opitons = this.initOptions(dateDate, series)
      this.myChart = this.$echarts.init(this.$refs.main)
      this.myChart.setOption(opitons)
    })
    // this.$nextTick(() => {
    //   this.drawChart()
    //   const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonDateData)).reverse()
    //   console.log(dataWatch)
    //   var dateDate = []
    //   // {COD:[3,4,5]}
    //   var data = {}
    //   for (var n = 0; n < dataWatch.length; n++) {
    //     var d = dataWatch[n].MonTimeStr.substring(5, 9)
    //     if (dateDate.indexOf(d) < 0) {
    //       dateDate.push(d)
    //     }
    //     if (data[dataWatch[n].PoltmtrlName]) {
    //       data[dataWatch[n].PoltmtrlName].push(dataWatch[n].MonQty)
    //     } else {
    //       data[dataWatch[n].PoltmtrlName] = [dataWatch[n].MonQty]
    //     }
    //   }
    //   var series = []
    //   for (var k in data) {
    //     series.push({
    //       name: k,
    //       type: 'line',
    //       yAxisIndex: k === '废水流量' ? 1 : 0,
    //       data: data[k]
    //     })
    //   }
    //   console.log(series)
    //   const opitons = this.initOptions(dateDate, series)
    //   this.mychartDay = this.$echarts.init(this.$refs.main)
    //   this.mychartDay.setOption(opitons)
    // })
  }
}
</script>

 src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue

@@ -141,22 +141,16 @@
      }
    }
  },
  // mounted () {
  //   // this.$nextTick(() => {
  //   //   console.log(1)
  //   this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
  //   // }
  // },
  methods: {
    onSubmit () {
      console.log(1)

      // const date = [this.value1, this.value2, this.formInline.region]
      // if (this.$attrs.)
      // console.log(this.$attrs.)
      console.log(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
      this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
      // console.log(date)
      // if (date) {
      //   var date1 = new Date(date)
      //   date1 = new Date(date1.getTime() - (8 * 3600000))
      //   console.log(date1)
      // var dateUtil = new DateUtil()
      // var datePkg = dateUtil.getTowDate(date1, "a", 24 * 3600000 - 1);
      // var datatype = 2;
    },
    CreateChart: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) {
      this.myChart = this.$echarts.init(this.$refs.main)
@@ -311,9 +305,10 @@
              var valueFliter
              if (value === 'NaN') {
                valueFliter = ''
              } else {
                // valueFliter = formatter(value)
              }
              // else {
              //   // valueFliter = 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>'
@@ -526,21 +521,20 @@
        }
        // createDivByMouse("s",params.event);
      }) */
    },
    drawChart: function () {
      window.onresize = function () {
        var h1 = document.documentElement.clientHeight// 获取屏幕的高度
        if (h1 > 700) {
          this.myChart.getDom().style.height = 3 + 'rem'
          this.myChart.getDom().style.width = 6 + 'rem'
        } else {
          this.myChart.getDom().style.height = 3 + 'rem'
          this.myChart.getDom().style.width = 6 + 'rem'
        }
        this.myChart.resize()
      }
    }

    // drawChart: function () {
    //   window.onresize = function () {
    //     var h1 = document.documentElement.clientHeight// 获取屏幕的高度
    //     if (h1 > 700) {
    //       this.myChart.getDom().style.height = 3 + 'rem'
    //       this.myChart.getDom().style.width = 6 + 'rem'
    //     } else {
    //       this.myChart.getDom().style.height = 3 + 'rem'
    //       this.myChart.getDom().style.width = 6 + 'rem'
    //     }
    //     this.myChart.resize()
    //   }
    // }
  }

}

 src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue

@@ -1,10 +1,49 @@
<template>
  <div style="width:5rem;height:2rem;margin-top: 0.3rem" ref="echarts"></div>
  <div id="Tab">
    <div class="animation">
      <div class="infomation">
        <span class="grid-content">氮氧化物 :<i>29.93</i>  标准 : 100</span>
        <span class="grid-content">二氧化硫 : <i>17.34</i> 标准 : 50</span>
        <span class="grid-content">烟尘 : <i>6.93</i> 标准 : 30</span>
        <span class="grid-content">废气流量 : <i>120343.18</i></span>
      </div>
    </div>
    <div class="form-echrts">
      <div class="from-search">
        <div class="pickerMon">
          <div class="pickerData">
            <span> 开始时间:</span>
            <span class="pickerTable">
              <el-date-picker  type="datetime"   v-model="formInline.timeStart"></el-date-picker>
            </span>
          </div>
          <div class="pickerData">
            <span >结束时间:</span>
            <span class="pickerTable">
              <el-date-picker type="datetime"  v-model="formInline.timeEnd"></el-date-picker>
            </span>
          </div>
        </div>
        <div>
          采样点数:
          <el-select v-model="formInline.region" placeholder="50">
            <el-option label="0" value="0"></el-option>
            <el-option label="25" value="25"></el-option>
            <el-option label="50" value="50"></el-option>
            <el-option label="75" value="75"></el-option>
            <el-option label="100" value="100"></el-option>
          </el-select>
        </div>
        <div class="detailbtn"  @click="onSubmit">查询</div>
      </div>
      <div style="width:5rem;height:2rem;" ref="echarts"></div>
      </div>
    </div>
</template>

<script>

import mapApi from '@/api/mapApi'
// import mapApi from '@/api/mapApi'
import 'dayjs/locale/es'
import dayjs from 'dayjs'

@@ -13,134 +52,310 @@
  data () {
    return {
      days: dayjs(new Date()).format('YYYYMMDDHHmmss'),
      myChart: [],
      // x轴数据
      xAxis: [],
      seriesData: [],
      seriesName: []
    }
      watchData: [],
      dialogVisible: false,
      myChar: null,
      value: '',
      formInline: {
        region: '',
        timeStart: '',
        timeEnd: ''
  },
  mounted () {
    this.$nextTick(() => {
      this.initEchartsData()
      this.upDateEchartsData()
    })
  },
  methods: {
    // 初始化数据
    async initEchartsData () {
      const endTime = dayjs().add(1, 's')
      const data = {
        $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
        $startTime: this.dayjs,
        $endTime: endTime,
        $step: 15
      }
      const result = (await mapApi.DataItems(data)).data
      for (var i = 0; i < result.length; i++) {
        // console.log(result[i])
        this.xAxis.push(result[i].ReadTime)
        this.seriesData.push(result[i].TagValue)
        this.seriesName = result[i].UnionTagCode
      }
      this.upDateEchartsinit()
    },
    // 实时数据刷新
    upDateEchartsData () {
      // const interValHander =
      setInterval(async () => {
        const endTime = dayjs().add(1, 's')
        const data = {
          $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
          $startTime: this.dayjs,
          $endTime: endTime,
          $step: 15
        }
        const result = (await mapApi.DataItems(data)).data
        for (var i = 0; i < result.length; i++) {
          // console.log(result[i])
          // this.xAxis.shift()
          this.xAxis.push(result[i].ReadTime)
          this.seriesData.push(result[i].TagValue)
          this.seriesName = result[i].UnionTagCode
        }
        this.upDateEchartsinit()
      }, 1500)
    },
    // 初始化echarts
    upDateEchartsinit () {
      this.myChart = this.$echarts.init(this.$refs.echarts)
      // 图表的配置项数据
      const xAxisData = this.xAxis
      const legendData = [this.seriesName, 'TJIP45.lscl2tb552AISA11201B', 'TJIP45.lscl2tb552AISA11202A', 'TJIP45.lscl2tbAIA-10505-1', 'TJIP45.lscl2tbAIA-10505-2']
      const seriesData = [
      RealTimeChart: null,
      info: this.series,
      JsonTimeCtarts: {
        id: 'mychart_ss ',
        title: '烟尘',
        legend: [
          { name: '氮氧化物', icon: 'image://../assets/imgs/legend/NOX.png', textStyle: { color: '#ccc' }, itemWidth: 20, itemHeight: 5 },
        {
          name: this.seriesName,
          type: 'line',
          stack: '总量',
          data: this.seriesData
        },
        {
          name: 'TJIP45.lscl2tb552AISA11201B',
          type: 'line',
          stack: '总量',
          data: [2.20, 1.82, 1.91, 2.34, 2.90, 3.30, 3.10]
        }
      ]
      const option = {
        title: {
          // text: '实时数据',
          target: 'blank',
          left: '5%',
            icon: 'image://../assets/imgs/legend/SO2.png',
            itemHeight: 5,
            itemWidth: 20,
            name: '二氧化硫',
          textStyle: {
            color: '#fff',
            fontSize: 15,
            bottom: 20
              color: '#CCC'
          }
        },
        tooltip: {
          {
            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' }
          }
        ],
        ydatas: [
          {
            name: '氮氧化物',
            data: [{ name: '氮氧化物', value: ['Tue Apr 13 2021 09:18:19 GMT+0800 (中国标准时间)', 39.51431] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:18:34 GMT+0800 (中国标准时间)', 38.76508] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:18:49 GMT+0800 (中国标准时间)', 37.57471] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:19:04 GMT+0800 (中国标准时间)', 36.3796] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:19:19 GMT+0800 (中国标准时间)', 36.10718] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:19:34 GMT+0800 (中国标准时间)', 35.81126] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:19:49 GMT+0800 (中国标准时间)', 35.9184] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:20:04 GMT+0800 (中国标准时间)', 36.08839] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:20:19 GMT+0800 (中国标准时间)', 36.3718] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:20:34 GMT+0800 (中国标准时间)', 36.8966] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:20:49 GMT+0800 (中国标准时间)', 37.3998] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:21:04 GMT+0800 (中国标准时间)', 37.11937] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:21:19 GMT+0800 (中国标准时间)', 36.12424] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:21:34 GMT+0800 (中国标准时间)', 34.99567] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:21:49 GMT+0800 (中国标准时间)', 34.48063] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:22:04 GMT+0800 (中国标准时间)', 34.62222] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:22:19 GMT+0800 (中国标准时间)', 34.84583] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:22:34 GMT+0800 (中国标准时间)', 35.80923] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:22:49 GMT+0800 (中国标准时间)', 35.93465] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:23:04 GMT+0800 (中国标准时间)', 35.78891] },
              { name: '氮氧化物', value: ['Tue Apr 13 2021 09:23:19 GMT+0800 (中国标准时间)', 35.54268] }],
            zdcbcolor: 'red',
            zxcolor: '#00B0F0',
            bzz: 50
          },
          {
            name: '二氧化硫',
            data: [{ name: '二氧化硫', value: ['Tue Apr 13 2021 09:18:19 GMT+0800 (中国标准时间)', 5.112573] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:18:34 GMT+0800 (中国标准时间)', 4.578955] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:18:49 GMT+0800 (中国标准时间)', 4.869465] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:19:04 GMT+0800 (中国标准时间)', 5.270735] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:19:19 GMT+0800 (中国标准时间)', 5.355475] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:19:34 GMT+0800 (中国标准时间)', 5.242907] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:19:49 GMT+0800 (中国标准时间)', 5.230558] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:20:04 GMT+0800 (中国标准时间)', 5.262951] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:20:19 GMT+0800 (中国标准时间)', 5.268744] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:20:34 GMT+0800 (中国标准时间)', 5.159671] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:20:49 GMT+0800 (中国标准时间)', 4.955352] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:21:04 GMT+0800 (中国标准时间)', 5.110546] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:21:19 GMT+0800 (中国标准时间)', 5.235723] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:21:34 GMT+0800 (中国标准时间)', 5.443502] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:21:49 GMT+0800 (中国标准时间)', 5.708939] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:22:04 GMT+0800 (中国标准时间)', 5.882327] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:22:19 GMT+0800 (中国标准时间)', 6.017494] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:22:34 GMT+0800 (中国标准时间)', 5.410021] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:22:49 GMT+0800 (中国标准时间)', 5.379694] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:23:04 GMT+0800 (中国标准时间)', 5.551433] },
              { name: '二氧化硫', value: ['Tue Apr 13 2021 09:23:19 GMT+0800 (中国标准时间)', 5.819743] }],
            zdcbcolor: 'red',
            zxcolor: '#fff21c',
            bzz: 50
          },
          {
            name: '废气流量',
            data: [{ name: '废气流量', value: ['Tue Apr 13 2021 09:18:19 GMT+0800 (中国标准时间)', 5.012617] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:18:34 GMT+0800 (中国标准时间)', 4.992213] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:18:49 GMT+0800 (中国标准时间)', 5.026886] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:19:04 GMT+0800 (中国标准时间)', 5.052861] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:19:19 GMT+0800 (中国标准时间)', 5.038826] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:19:34 GMT+0800 (中国标准时间)', 5.062339] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:19:49 GMT+0800 (中国标准时间)', 5.071915] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:20:04 GMT+0800 (中国标准时间)', 5.053693] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:20:19 GMT+0800 (中国标准时间)', 5.03562] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:20:34 GMT+0800 (中国标准时间)', 5.043983] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:20:49 GMT+0800 (中国标准时间)', 5.059231] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:21:04 GMT+0800 (中国标准时间)', 5.042176] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:21:19 GMT+0800 (中国标准时间)', 5.028253] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:21:34 GMT+0800 (中国标准时间)', 5.024891] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:21:49 GMT+0800 (中国标准时间)', 5.01542] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:22:04 GMT+0800 (中国标准时间)', 5.025787] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:22:19 GMT+0800 (中国标准时间)', 5.038269] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:22:34 GMT+0800 (中国标准时间)', 5.01441] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:22:49 GMT+0800 (中国标准时间)', 5.010105] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:23:04 GMT+0800 (中国标准时间)', 5.012341] },
              { name: '废气流量', value: ['Tue Apr 13 2021 09:23:19 GMT+0800 (中国标准时间)', 4.996146] }],
            zdcbcolor: 'red',
            zxcolor: '#9ACD32',
            bzz: null
          },
          {
            name: '烟尘',
            data: [{ name: '烟尘', value: [['Tue Apr 13 2021 09:18:19 GMT+0800 (中国标准时间)', 0.8297127]] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:18:34 GMT+0800 (中国标准时间)', 0.8347292] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:18:49 GMT+0800 (中国标准时间)', 0.9218481] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:19:04 GMT+0800 (中国标准时间)', 0.913429] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:19:19 GMT+0800 (中国标准时间)', 0.9026684] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:19:34 GMT+0800 (中国标准时间)', 0.8060119] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:19:49 GMT+0800 (中国标准时间)', 0.781314] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:20:04 GMT+0800 (中国标准时间)', 0.8958074] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:20:19 GMT+0800 (中国标准时间)', 0.9093901] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:20:34 GMT+0800 (中国标准时间)', 0.8743498] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:20:49 GMT+0800 (中国标准时间)', 0.9024854] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:21:04 GMT+0800 (中国标准时间)', 0.9456897] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:21:19 GMT+0800 (中国标准时间)', 0.9747347] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:21:34 GMT+0800 (中国标准时间)', 0.9200308] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:21:49 GMT+0800 (中国标准时间)', 0.8987293] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:22:04 GMT+0800 (中国标准时间)', 0.8613345] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:22:19 GMT+0800 (中国标准时间)', 0.8747463] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:22:34 GMT+0800 (中国标准时间)', 0.8883187] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:22:49 GMT+0800 (中国标准时间)', 0.881333] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:23:04 GMT+0800 (中国标准时间)', 0.9142911] },
              { name: '烟尘', value: ['Tue Apr 13 2021 09:23:19 GMT+0800 (中国标准时间)', 0.9569058] }],
            zdcbcolor: 'red',
            zxcolor: '#f48183',
            bzz: 10
          }],
        yname: ' 浓度(mg/m³)'
      }
    }
  },
  // mounted () {
  //   this.DrawEXHRealTimeDateChart()
  // },
  methods: {
    onSubmit () {
      this.DrawEXHRealTimeDateChart(this.JsonTimeCtarts.id, this.JsonTimeCtarts.title, this.JsonTimeCtarts.legend, this.JsonTimeCtarts.ydatas, this.JsonTimeCtarts.yname)
    },
    // formatter (value, index) {
    //   return parseFloat(value).toFixed(2)
    // },
    DrawEXHRealTimeDateChart (id, title, legend, ydatas, yname) {
      this.RealTimeChart = this.$echarts.init(this.$refs.echarts)
      // this.myChart.clear()
      var serLists = []
      for (var i = 0; i < ydatas.length; i++) {
        // var zdcbcolor = ydatas[i].zdcbcolor
        var bz = ydatas[i].bzz
        var obj
        if (bz) {
          obj = {
            name: ydatas[i].name,
            // symbol:'circle', // 折点形状
            // symbolSize: 10,   //大小
            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'
                  // }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 2
                },
                // borderColor:'black',  //折点边框的颜色
                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: true, // 直线 ，true 为曲线
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  return '#33c95f'
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 2
                },
                // borderColor:'black',  //折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }
            },
            type: 'line',
            data: ydatas[i].data
          }
        }
        if (ydatas[i].name === '废气流量' || ydatas[i].name === '废气') {
          obj.yAxisIndex = 1
        }
        serLists.push(obj)
      }
      var option = {
        /*  title: {
          text: title,
      }, */
        tooltip: { // 提示框
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color: '#1a4245'
            }
          },
          formatter: function (params) {
            var s = params[0].name + '<br />'
            for (var i = 0; i < params.length; i++) {
              // var name = params[i].name
              // 图表title名称
              var 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>'
          }
          // formatter: function (params) {
          //   // console.log(params)
          //   var UnionTagCode = params[0].seriesName + '<br />'
          //   for (var i = 0; i < params.length; i++) {
          //     var seriesName = params[i].seriesName
          //     // 值
          //     var value = params[i].value[1]
          //
          //     // var valueFliter = formatter(value)
          //     var valueFliter = value
          //
          //     var maker = params[i].marker
          //     var colo = ''
          //     switch (seriesName) {
          //       case 'TJIP45.lscl2tb552AI10710':
          //         colo = '#fff21c'
          //         break
          //       default:
          //         colo = 'red'
          //         break
          //     }
          //     maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + colo + ';"></span>'
          //     UnionTagCode += maker + seriesName + ':' + valueFliter + '<br />'
          //   }
          //   return UnionTagCode
          // }
              s += maker + seriesName + ':' + valueFliter + '<br />'
            }
            return s
          }
        },
        grid: {
          top: '20%'
        },
        toolbox: {
        toolbox: { // 打印等工具
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        grid: { // 网格
          top: '20%'
        },
        legend: {
          data: legend
        },
        dataZoom: [{
          type: 'inside',
@@ -160,62 +375,49 @@
            shadowOffsetY: 2
          }
        }],
        legend: {
          data: legendData,
          textStyle: {
            color: '#ffffff',
            fontSize: 12
          }
        },
        xAxis: {
          type: 'category',
          // type: 'time',
        xAxis: { // x 轴设置
          type: 'time',
          boundaryGap: false,
          axisLabel: {
          axisLabel: { // x轴全部显示
            // rotate: 20,
            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: xAxisData
          }
          // data: xdata
        },
        yAxis: [{
          type: 'value',
          name: 'yname',
          // max: function (value) {
          //   var 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
          //   }); //排序
          //   var 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);
          // },
          name: yname,
          max: function (value) {
            var ma = value.max > 100 ? value.max : 100
            return parseInt(ma)
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
          axisPointer: {
            snap: true
          },
          splitLine: {
            show: false
@@ -223,36 +425,157 @@
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
              width: 1// 这里是为了突出显示加上的
            }
          }
        }, {
        }, { // 流量轴
          type: 'value',
          name: 'dataUnit',
          name: '废气流量(m3/h)',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
          axisPointer: {
            snap: true
          },
          splitLine: {
            show: false
          },
          }, // y轴 网格线不显示,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
              width: 1// 这里是为了突出显示加上的
            }
          }
        }],
        series: seriesData
        series: serLists
      }
      this.myChart.setOption(option)
      this.RealTimeChart.setOption(option)

      // this.RealTimeChart.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
      //   }
      //   RealTimeChart.setOption(op)
      // })
      // RealTimeChart.on('click', function (params) {
      //   var nowDate = new Date().Format()
      // })
    }
  }
}
</script>

<style scoped lang="less">
.grid-content {
  font-size: 8px;
  background-color: #2e4967;
  text-align: center;
  border-radius: 2px;
  margin-right: 10px;
  padding:0 10px
}
.animation {
  //width: 600px;
  //height: 0.06rem;
  .infomation {
    padding: 5px 10px;
  }
}
.form-echrts {
  width: 100%;
  border-top: 1px solid #396d83;
  //margin: 10px 10px 10px 10px;
  .from-search{
    display: flex;
    padding:5px;
    >div{margin-left: 10px}
    .pickerMon{
      display: flex;
      >div:first-child {
        margin-right: 10px;
      }
      .pickerData{
        flex: 1;
        display: flex;
        >span{line-height: 22px}
        .pickerTable {
          margin-left: 3px;
        }
      }
    }
    /deep/.el-date-editor--datetime{
      width: 100%;
    }
    /deep/.el-input__inner{
      position: relative;
      width:140px;
      background-color: #2e4967;
      color: #fff;
      font-size: 12px;
      height: 24px;
      padding: 0;
      border-color:#00fff6;
      text-align: center;
      //padding-left:20px ;
      //padding: 0!important;
    }
    /deep/.el-input__icon{
      display: block;
      width: 140px;
      height: 22px;
      line-height: 22px;
      cursor: pointer;
      font-size: 0;
    }
    .echatsInput{
      color: #00ffff;
      background-color: #2e4967;
      border: none;
      border-radius: 6px;
      width: 80px;
      height: 22px;
    }
    input::-webkit-calendar-picker-indicator {
      opacity: 100;
    }
    .detailbtn{
      background-color:#2e4967;
      text-align: center;
      padding: 0 7px;
      line-height: 20px;
      border-radius: 4px;
      margin-right: 6px;
    }
  }
  .el-dialog-div {
    //height: 50vh!important;
    overflow: auto;
    //overflow: hidden;
  }

  #echarts {
    margin: 0;
    padding: 0;
    //height: 3rem;
    //border: 1px solid #396d83;
    //margin: 10px 10px 10px 10px;
  }
}
</style>

 src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue

@@ -5,10 +5,10 @@
        <div class="border_corner border_corner_left_bottom"></div>
        <div class="border_corner border_corner_right_bottom"></div>
        <ul class="tab">
            <li :class="active==0?'hover':''" @click='tabTaggle("EChartsHour",0)'>实时数据</li>
            <li :class="active==1?'hover':''" @click='tabTaggle("EChartsHour",1)'>小时数据</li>
            <li :class="active==2?'hover':''" @click='tabTaggle("EChartsHourWasteWater",2)'>日数据</li>
            <li :class="active==3?'hover':''" @click='tabTaggle("ECharts",3)'>人工数据</li>
            <li @click='tabTaggle("ECharts")'>实时数据</li>
            <li @click='tabTaggle("EChartsHour")'>小时数据</li>
            <li @click='tabTaggle("EChartsDate")'>日数据</li>
            <li @click='tabTaggle("EChartsDate")'>人工数据</li>
        </ul>
        <div class="legend" >
            <span >正常</span>
@@ -18,12 +18,14 @@
            <span >超标</span>
            <i style=" background: orange;"></i>
        </div>
        <component :is="currentTab"></component>
        <component :is="currentTab" v-bind="$attrs"></component>
    </div>
</template>

<script>
import EChartsHour from './EChartsHour'
import EChartsDate from './EChartsDate'
import ECharts from './Echarts'
// import EChartsDate from './EChartsDate'
import EChartsHourWasteWater from './EChartsHourWasteWater'

@@ -31,19 +33,19 @@
  name: 'PublicChart',
  components: {
    EChartsHour,
    EChartsDate,
    ECharts,
    // EChartsDate
    EChartsHourWasteWater
  },
  data () {
    return {
      currentTab: 'EChartsHour',
      active: '0'
      currentTab: 'EChartsHour'
    }
  },
  methods: {
    tabTaggle (taggleMenu, num) {
    tabTaggle (taggleMenu) {
      this.currentTab = taggleMenu
      this.active = num
      // debugger
    }
  }

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -15,6 +15,7 @@
                        :value="value"
                        :getQueryOnlineMonData="getQueryOnlineMonData"
                        :getWasteWaterMonitoringDetails='getWasteWaterMonitoringDetails'
                        ref="PublicChart"
          >
          </public-chart>
        </div>
@@ -56,6 +57,12 @@
      getQueryOnlineMonData: []
      // getGasQueryOnlineMonData: []
    }
  },
  mounted () {
    // this.$nextTick(() => {
    // console.log(this.$refs.publicBounced)
    // console.log(this.$refs.PublicChart)
    // })
  },
  methods: {
    closePopup () {
@@ -99,7 +106,7 @@
.public-bounced {
  z-index: 2000;
  position: absolute;
  top: 45%;
  top: 15%;
  left: 20%;

  .public-bounced-title {

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -7,7 +7,7 @@
                    <i class="downUp el-icon-caret-bottom" @click="item.isShow=!item.isShow" :class="item.isShow?'':'active'" ></i><!-- el-icon-arrow-down -->
                    <!-- 一级图层遍历 -->
                    <div style="padding-left:25px;padding-top:10px;color:#fff">
                        <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item)"/>{{ item.name }}
                        <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item,'')"/>{{ item.name }}
                    </div>
                    <div class="layerbox-item" v-show="item.isShow">
                        <!-- 二级图层遍历 -->
@@ -16,7 +16,7 @@
                                   :name="'wmsSublayers_'+item.code+'_'+itm.code"
                                   :checked="itm.checked"
                                   :value="itm.code"
                                   @change="swAllLayers(itm)"/>{{ itm.name }}
                                   @change="swAllLayers(itm,item.name)"/>{{ itm.name }}
                            <!-- 三级图层遍历 -->
                            <div class="layerbox-item-3">
                                <div class="basemap-layer-item" v-for="layer in itm.layers" :key="layer.code">
@@ -24,7 +24,7 @@
                                           :name="'wmsSublayers_'+item.code+'_'+layer.code"
                                           :checked="layer.checked"
                                           :value="layer.code"
                                           @change="swAllLayers(layer)"/>
                                           @change="swAllLayers(layer,'')"/>
                                    <span :style="'color:'+layer.color">{{ layer.name }}</span>
                                </div>
                            </div>
@@ -39,7 +39,7 @@

<script>
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'

import bus from '@/eventBus'
export default {
  name: 'LcServiceLayer',
  components: { LcServiceLayerFilter },
@@ -51,11 +51,14 @@
  mounted () {
  },
  methods: {
    swAllLayers (item) {
    swAllLayers (item, v) {
      // eslint-disable-next-line no-debugger
      item.checked = !item.checked
      this.toggleLayer(item)
      this.swLayers(item.layers, item.checked)
      if (v === '专题图层') {
        bus.$emit('changeSearchBar', item)
      }
    },
    swLayers (layers, checked) {
      if (layers) {

 src/components/panel/LegendPanel.vue

@@ -32,7 +32,7 @@
import { LayerPipeLines } from '../../conf/layers/LayerPipeLines'
import { LayerPk } from '../../conf/layers/LayerPk'
import { LayerArea } from '../../conf/layers/LayerArea'

import bus from '@/eventBus'
export default {
  name: 'LegendPanel',
  data () {
@@ -42,10 +42,23 @@
      serviceLayers: [LayerSoilGroundWater, LayerEnvRisk, LayerAirQuality, LayerWasteSolid, LayerWasteGas, LayerWasteWater, LayerArea, LayerPk, LayerPipeLines]
    }
  },
  mounted () {
    const that = this
    bus.$on('changeState', function (state) {
      if (state.num !== 4 && state.type) {
        that.isShow = false
      }
    })
  },
  methods: {
    // 图标 控制内容的展示与隐藏
    legendChange () {
      this.isShow = !this.isShow
      const state = {
        type: this.isShow,
        num: 4
      }
      bus.$emit('changeState', state)
    }
  }
}

 src/components/panel/RightSearchPanel.vue

@@ -12,7 +12,7 @@
                              </div>
                          </li>
                      </ul> -->
                      <ul  v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" >
                      <ul  v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" v-show="item.isShow" >
                          <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
                              <li>
                                  <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
@@ -26,11 +26,11 @@
                      <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
                  </div>
                  <div :class="'search-container map-background'" v-show="selectGroup" >
                      <div @click="setSearchPanelChange" type="button" class="el-button special-button el-button--default ">
                      <div @click="setSearchPanelChange" class="el-button special-button el-button--default ">
                          <i class=" el-icon-d-arrow-right" v-if="selectGroup"></i>
                          <i class=" el-icon-d-arrow-left" v-else ></i>
                      </div>
                      <div class="el-message-box__content" style="padding:0 6px 6px 6px;font-size: 13px;">
                      <div class="el-message-box__content" style="padding:0;font-size: 13px;">
                          <component :title="title" :is="gcComp"></component>
                      </div>
                  </div>
@@ -55,6 +55,7 @@
import SolidWasteSearch from '@components/panel/topicSearch/SolidWasteSearch'
import SewersSearch from '@components/panel/topicSearch/SewersSearch'
import SoilGroundWaterSearch from '@components/panel/topicSearch/SoilGroundWaterSearch.vue'
import bus from '@/eventBus'
export default {
  name: 'MonitorPanel',
  components: { GasWasteSearch, WaterWasteSearch, SolidWasteSearch, EnvRiskSearch, DischargeSearch },
@@ -66,7 +67,6 @@
      topicCheckedList: [],
      isPanelVisible: false,
      gcComp: SewersSearch,

      gdVisible: true,
      hbVisible: false,
      pkVisible: false,
@@ -74,7 +74,7 @@

      title: '污雨水管网',
      isCollapse: true,
      selectGroup: true
      selectGroup: false
    }
  },
  computed: {},
@@ -116,13 +116,13 @@
        case '污染源':
          this.gcComp = DischargeSearch
          break
        case '废水监测':
        case '废水':
          this.gcComp = WaterWasteSearch
          break
        case '废气监测':
        case '废气':
          this.gcComp = GasWasteSearch
          break
        case '固废管理':
        case '固废':
          this.gcComp = SolidWasteSearch
          break
        case '环境风险':
@@ -131,7 +131,7 @@
        case '土壤及地下水':
          this.gcComp = SoilGroundWaterSearch
          break
        case '污雨水管网':
        case '管网':
          this.gcComp = SewersSearch
          break
      }
@@ -180,9 +180,32 @@
    //       speed: 1000
    //     })
    //   }
    },
    defaultLastOne () {
      let v = {}
      this.topicList.forEach((item) => {
        if (item.isShow) {
          v = item
        }
      })
      this.selected(v)
    }
  },
  mounted () {
    const that = this
    bus.$on('changeSearchBar', function (obj) {
      // console.log(obj.checked, obj.name)
      that.topicList.forEach((item) => {
        if (item.name === obj.name) {
          item.isShow = obj.checked
          if (item.isShow) {
            that.selected(item)
          } else {
            that.defaultLastOne()
          }
        }
      })
    })
  }
}
</script>
@@ -716,7 +739,7 @@
        .panel-title{}
        .search-panel{
            background-color: transparent;
            padding: 10px 0;
            padding: 10px;
            border-bottom: 1px solid @background-color-split;
            // .el-input{width:calc(100% - 40px);position: relative}
            /deep/ input {

 src/conf/Topic.js

@@ -15,42 +15,49 @@
  name: '污染源',
  id: 1,
  check: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '废水监测',
  name: '废水',
  id: 2,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '废气监测',
  name: '废气',
  id: 3,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '固废管理',
  name: '固废',
  id: 4,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '环境风险',
  id: 5,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '土壤及地下水',
  id: 6,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '污雨水管网',
  name: '管线',
  id: 7,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}]