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

chenzeping

2021-04-14 6fdf72287c433eb9e9bafbb258de3c1a759b060b

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

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

@@ -4,15 +4,17 @@
        <div class="border_corner border_corner_right_top"></div>
        <div class="border_corner border_corner_left_bottom"></div>
        <div class="border_corner border_corner_right_bottom"></div>
        <ul class="tab">
<!--            <li @click='tabTaggle("ECharts")'>实时数据</li>-->
<!--            <li @click='tabTaggle("EChartsHour")'>小时数据</li>-->
<!--            <li @click='tabTaggle("EChartsDate")'>日数据</li>-->
<!--            <li @click='tabTaggle("EChartsDate")'>人工数据</li>-->
        <ul class="tab" v-if="this.$attrs.value === 'feiqi'">
            <li :class="active==0?'hover':''" @click='tabTaggle("ECharts",0)'>实时数据</li>
            <li :class="active==1?'hover':''" @click='tabTaggle("EChartsHour",1)'>小时数据</li>
            <li :class="active==2?'hover':''" @click='tabTaggle("EChartsDate",2)'>日数据</li>
            <li :class="active==3?'hover':''" @click='tabTaggle("EChartsTable",3)'>人工数据</li>
        </ul>
        <ul class="tab" v-else>
            <li :class="active==0?'hover':''" @click='tabTaggle("EChartsRealWasteWater",0)'>实时数据</li>
            <li :class="active==1?'hover':''" @click='tabTaggle("EChartsHourWasteWater",1)'>小时数据</li>
            <li :class="active==2?'hover':''" @click='tabTaggle("EChartsDateWasteWater",2)'>日数据</li>
            <li :class="active==3?'hover':''" @click='tabTaggle("EChartsWasteWaterTable",3)'>人工数据</li>
        </ul>
        <div class="legend" >
            <span >正常</span>
@@ -27,12 +29,15 @@
</template>

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

import EChartsRealWasteWater from './echarts/EChartsRealWasteWater'
import EChartsHourWasteWater from './echarts/EChartsHourWasteWater'
import EChartsTable from '@components/BaseNav/PublicBounced/common/echarts/EChartsTable'
import EChartsDateWasteWater from './echarts/EChartsDateWasteWater'
import EChartsWasteWaterTable from './echarts/EChartsWasteWaterTable'

export default {
  name: 'PublicChart',
@@ -40,16 +45,19 @@
    EChartsHour,
    EChartsDate,
    ECharts,
    // EChartsDate
    EChartsTable,
    EChartsRealWasteWater,
    EChartsHourWasteWater,
    EChartsTable
    EChartsDateWasteWater,
    EChartsWasteWaterTable
  },
  mounted () {
    this.$refs.Echatrs.CreateChart()
    this.$refs.Echatrs.effChartShow()
  },
  data () {
    return {
      currentTab: 'EChartsHour',
      currentTab: this.current(),
      active: '1'
    }
  },
@@ -58,6 +66,14 @@
      this.currentTab = taggleMenu
      this.active = num
      // debugger
    },
    current (currentTab) {
      if (this.$attrs.value === 'feishui') {
        currentTab = 'EChartsHourWasteWater'
      } else {
        currentTab = 'EChartsHour'
      }
      return currentTab
    }
  }
}

 src/components/BaseNav/PublicBounced/common/echarts/EChartsDateWasteWater.vue

New file
@@ -0,0 +1,711 @@
<!--  日数据  -->
<template>
  <div id="Tab">
    <div class="animation">
      <div class="infomation">
        <span class="grid-content">COD :<i style="color: #e8ee0b">8.115</i>  标准 : <i style="color: #fff">20</i></span>
        <span class="grid-content">氨氮 : <i style="color: #e8ee0b">0.31</i> 标准 : <i style="color: #fff">5</i></span>
        <span class="grid-content">pH : <i style="color: #e8ee0b">7.673</i> 标准 : <i style="color: #fff">9</i></span>
        <span class="grid-content">废水流量 : <i style="color: #e8ee0b">5191.693848</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">-->
<!--            <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 class="detailbtn" @click="dialogVisible = true" >明细表</div>
      </div>
      <div class="boxChart">
        <div style="width:5rem;height:1.5rem" id="popChart" ref="main">
        </div>
      </div>
    </div>
    <!-- 明细弹框 -->
    <el-dialog :visible.sync="dialogVisible"
               :append-to-body="true"
               :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"
               width="68%"
               center
               v-dialogDrag
    >
      <div class="el-dialog-div" style="height: 260px">
        <public-detailed-list v-bind="$attrs"></public-detailed-list>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'

export default {
  name: 'EChartsDateWasteWater',
  components: {
    PublicDetailedList
  },
  data () {
    return {
      watchData: [],
      dialogVisible: false,
      myChar: null,
      value: '',
      formInline: {
        user: '',
        region: '',
        timeStart: '2021-03-14 00:00:00',
        timeEnd: '2021-04-12 00:00:00'
      },
      JsonDateWater: {
        datatype: 1,
        id: 'mychart1eff',
        jcdID: '1020',
        legend: [
          {
            name: 'COD',
            icon: 'image://../assets/imgs/legend/SO2.png',
            textStyle: { color: '#CCC' },
            itemWidth: 20,
            itemHeight: 5
          },
          {
            name: '氨氮',
            icon: 'image://../assets/imgs/legend/NOX.png',
            textStyle: { color: '#CCC' },
            itemWidth: 20,
            itemHeight: 5
          },
          {
            name: 'pH',
            icon: 'image://../assets/imgs/legend/WenDu.png',
            textStyle: { color: '#CCC' },
            itemWidth: 20,
            itemHeight: 5
          },
          {
            name: '废水流量',
            icon: 'image://../assets/imgs/legend/VOCs.png',
            textStyle: { color: '#CCC' },
            itemWidth: 20,
            itemHeight: 5
          }
        ],
        xdata: ['15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日', '1 日', '2 日', '3 日', '4 日', '5 日', '6 日', '7 日', '8 日', '9 日', '10日', '11日', '12日', '13日'],
        ydatas: [
          {
            name: 'COD',
            data: [18.271, 18.806, 18.615, 20.938, 18.933001, 18.789, 17.612, 17.319, 18.403999, 17.724001, 17.450001, 17.299, 17.906, 17.761, 16.913, 17.087, 16.094, 13.851, 15.783, 15.785, 15.503, 17.163, 15.008, 12.056, 14.812, 15.243, 15.562, 13.034, 11.11, 10.746],
            zdcbcolor: 'red',
            zxcolor: '#fff21c',
            bzz: 25
          },
          {
            name: '氨氮',
            data: [0.1, 0.169, 0.125, 0.266, 0.126, 0.156, 0.174, 0.161, 0.224, 0.178, 0.166, 0.152, 0.146, 0.138, 0.125, 0.171, 0.145, 0.147, 0.123, 0.117, 0.109, 0.106, 0.159, 0.121, 0.133, 0.181, 0.208, 0.115, 0.108, 0.162],
            zdcbcolor: 'red',
            zxcolor: '#00B0F0',
            bzz: 5
          },
          {
            name: 'pH',
            data: [7.461, 7.486, 7.495, 7.498, 7.512, 7.526, 7.535, 7.555, 7.585, 7.585, 7.512, 7.365, 7.334, 7.349, 7.367, 7.397, 7.399, 7.384, 7.424, 7.466, 7.496, 7.527, 7.599, 7.612, 7.613, 7.614, 7.618, 7.644, 7.661, 7.673],
            zdcbcolor: 'red',
            zxcolor: '#F206FF',
            bzz: 9
          },
          {
            name: '废水流量',
            data: [49.395836, 49.337986, 48.906597, 51.755833, 48.786461, 48.124866, 47.832222, 70.607361, 77.931816, 63.092083, 70.620911, 63.302162, 66.679314, 66.482918, 81.546745, 95.860214, 87.731102, 53.503544, 63.230419, 70.389374, 63.531391, 63.028618, 63.168613, 63.55653, 63.631458, 51.364937, 28.757296, 31.669098, 26.574379, 30.628475],
            zdcbcolor: 'red',
            zxcolor: '#9ACD32',
            bzz: null
          }
        ],
        yname: '浓度(mg/l)'
      }
    }
  },
  mounted () {
    this.onSubmit()
  },
  methods: {
    onSubmit () {
      this.effChartShow(this.JsonDateWater.id, this.JsonDateWater.title, this.JsonDateWater.legend, this.JsonDateWater.xdata, this.JsonDateWater.ydatas, this.JsonDateWater.yname, this.JsonDateWater.id, this.JsonDateWater.datatype)
    },
    effChartShow: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) {
      this.myChart = this.$echarts.init(this.$refs.main)
      this.myChart.clear()
      var dataUnit = ''
      if (datatype === 1) {
        dataUnit = '流量(m³/d)'
      } else {
        dataUnit = '流量(m³/h)'
      }

      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: false, // 直线 ，true 为曲线
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  /* var biaozhuiz
                  for (var i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name == c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value > biaozhuiz * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  } */
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 4
                },
                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: false, // 直线 ，true 为曲线
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  /* var biaozhuiz
                  for (var i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name == c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value > 9999999) {
                    return zdcbcolor
                  } else {
                    return '#33c95f'
                  } */
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 4
                },
                borderColor: 'black', // 折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }

            },
            type: 'line',
            data: ydatas[i].data
          }
        }
        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
                  var valueFliter
                  if (value === 'NaN') {
                    valueFliter = ''
                  } else {
                    // valueFliter = formatter(value)
                  }
                  var maker = params[i].marker
                  if (seriesName === 'COD') {
                    maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>'
                  } else if (seriesName === '氨氮') {
                    maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00B0F0;"></span>'
                  } else if (seriesName === '总磷') {
                    maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f48183;"></span>'
                  } else if (seriesName === '总氮') {
                    maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#d9f2f4;"></span>'
                  } else {
                    maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#9ACD32;"></span>'
                  }
                  s += maker + seriesName + ':' + valueFliter + '<br />'
                }
                return s
              }
            },
            toolbox: { // 打印等工具
              show: false,
              feature: {
                saveAsImage: {}
              }
            },
            grid: { // 网格
              top: '20%',
              left: '7%',
              bottom: '10%'
            },
            legend: {
              data: legend
            },
            dataZoom: [{
              type: 'inside',
              start: 0,
              end: 100
            }, {
              start: 0,
              end: 100,
              show: false,
              handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
              handleSize: '80%',
              handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
              }
            }],
            xAxis: { // x 轴设置
              type: 'category',
              boundaryGap: false,
              nameTextStyle: {
                fontSize: 10
              },
              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// 这里是为了突出显示加上的
                }
              },
              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)
              }, */
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
              axisPointer: {
                snap: true
              },
              splitLine: {
                show: false
              }, // y轴 网格线不显示,
              axisLine: {
                lineStyle: {
                  color: '#FFFFFF',
                  width: 1// 这里是为了突出显示加上的
                }
              }
            }, {
              type: 'value',
              name: dataUnit,
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
              axisPointer: {
                snap: true
              },
              splitLine: {
                show: false
              }, // y轴 网格线不显示,
              // inverse: true,
              // nameLocation: 'start',
              // max:500,
              axisLine: {
                lineStyle: {
                  color: '#FFFFFF',
                  width: 1// 这里是为了突出显示加上的
                }
              }
            }],
            series: serLists
          }
      this.myChart.setOption(option)

      /* myChart.on('legendselectchanged', function (params) {
        // console.log(params);
        var StdVal = null
        var op = { yAxis: {} }
        if (params.selected.COD) {
          if (bzzList && bzzList.length > 0) {
            for (let i = 0; i < bzzList.length; i++) {
              if (bzzList[i].name == 'COD') {
                StdVal = bzzList[i].bzhui
              }
            }
          }

          op.yAxis.max = function (value) {
            var ma
            if (value.max < StdVal) {
              ma = StdVal
            } else {
              ma = Math.ceil(value.max)
            }
            return ma
          }
        } else if (params.selected['总氮']) {
          if (bzzList && bzzList.length > 0) {
            for (let i = 0; i < bzzList.length; i++) {
              if (bzzList[i].name == '总氮') {
                StdVal = bzzList[i].bzhui
              }
            }
          }
          op.yAxis.max = function (value) {
            var ma
            if (value.max < StdVal) {
              ma = StdVal
            } else {
              ma = Math.ceil(value.max)
            }
            return ma
          }
        } else if (params.selected['氨氮']) {
          if (bzzList && bzzList.length > 0) {
            for (let i = 0; i < bzzList.length; i++) {
              if (bzzList[i].name == '氨氮') {
                StdVal = bzzList[i].bzhui
              }
            }
          }
          op.yAxis.max = function (value) {
            var ma
            if (value.max < StdVal) {
              ma = StdVal
            } else {
              ma = Math.ceil(value.max)
            }
            return ma
          }
        } else if (params.selected['总磷']) {
          if (bzzList && bzzList.length > 0) {
            for (let i = 0; i < bzzList.length; i++) {
              if (bzzList[i].name == '总磷') {
                StdVal = bzzList[i].bzhui
              }
            }
          }
          op.yAxis.max = function (value) {
            var ma
            if (value.max < StdVal) {
              ma = StdVal
            } else {
              ma = Math.ceil(value.max)
            }
            return ma
          }
        }

        myChart.setOption(op)
      }) */

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

      /**
   *  图标点击事件
   *  20190426 add
   * */
      /* myChart.on('click', function (params) {
        // console.log('[监测点id=%s]',jcdID)

        // 获取当前时间，小时
        var nowHours = new Date().Format('hh')
        // console.log('[当前小时是：%s]',nowHours);

        // 点击折线图折点对应的时间
        // 需要传的时间为
        var _date = null
        if (params.name.indexOf('时') != -1) {
          var hours = params.name.substring(0, params.name.indexOf('时'))
          // console.log('[坐标轴对应的时间为%s]',hours);

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

          // console.log('[需要传递的时间为：%s]',_date);
        } 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.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()
      }
    }
  }
}
</script>

<style scoped lang="less">
//.animation{
//  padding: 0 1rem;
//  overflow: hidden;
//  //width: 1rem;
//  .infomation{
//    display: flex;
//    //margin: 0 1rem;
//    overflow: hidden;
//    animation: move 1s linear 0s infinite;
//    @keyframes move {
//      0% {
//      }
//      100% {
//        transform: translateX(-10%);
//      }
//    }
//    /* 鼠标经过marquee 就停止动画 */
//    &:hover {
//      //z-index: 9999999;
//      animation-play-state: paused;
//    }
//  }
//}
.grid-content{
  font-size: 8px;
  background-color: #2e4967;
  text-align: center;
  border-radius: 2px;
  margin-right: 10px;
  padding:0 10px
}
.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: #ffffff;
      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;
      text-align: center;
    }
    input::-webkit-calendar-picker-indicator {
      opacity: 100;
    }
    .detailbtn{
      background-color:#2e4967;
      text-align: center;
      padding: 0 7px;
      line-height: 24px;
      border-radius: 4px;
      margin-right: 6px;
    }
    .detailbtn:hover{
      box-shadow: 0 0 0.03rem #fff700 !important;
      color:#fff700 !important;
      cursor: pointer;
    }
  }
  .el-dialog-div {
    //height: 50vh!important;
    overflow: auto;
    //overflow: hidden;
  }

  #popChart {
    margin: 0;
    padding: 0;
  }
}
</style>

 src/components/BaseNav/PublicBounced/common/echarts/EChartsHourWasteWater.vue

@@ -3,10 +3,10 @@
    <div id="Tab">
        <div class="infomation">
          <div>
            <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>
            <span class="grid-content">COD : <i style="color: #e8ee0b">6.039</i>  标准 : <i style="color: #fff">12</i></span>
            <span class="grid-content">氨氮 : <i style="color: #e8ee0b">0.38</i> 标准 : <i style="color: #fff">5</i></span>
              <span class="grid-content">pH : <i style="color: #e8ee0b">7.674</i> 标准 : <i style="color: #fff">9</i></span>
            <span class="grid-content">废水流量 : <i style="color: #e8ee0b">254.643997</i></span>
          </div>
        </div>
        <div class="form-echrts">
@@ -22,28 +22,27 @@
                    <div class="pickerData">
                        <span >结束时间:</span>
                        <span class="pickerTable">
                        <el-date-picker
                                type="datetime"
                                v-model="formInline.timeEnd"
                        >
                        <el-date-picker type="datetime" v-model="formInline.timeEnd">
                      </el-date-picker>
                      </span>
                    </div>
                </div>
                <div>
                    采样点数:
                    <el-select v-model="formInline.region">
                        <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>-->
<!--                    采样点数:-->
<!--                    <el-select v-model="formInline.region">-->
<!--                        <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 class="detailbtn" @click="dialogVisible = true" >明细表</div>
             </div>
            <div style="width:5rem;height:2rem;" id="echarts" ref="main">
            <div class="boxChart">
                <div style="width: 5rem;height:1.5rem;" id="popChart" ref="main">
                </div>
            </div>
        </div>
        <!-- 明细弹框 -->
@@ -54,7 +53,7 @@
                   center
                   v-dialogDrag
        >
            <div class="el-dialog-div" style="height: 500px">
            <div class="el-dialog-div" style="height: 260px">
                <public-detailed-list v-bind="$attrs"></public-detailed-list>
            </div>
        </el-dialog>
@@ -79,14 +78,13 @@
      value: '',
      formInline: {
        region: '',
        timeStart: '',
        timeEnd: ''
        timeStart: '2021-04-12 17:00:00',
        timeEnd: '2021-04-13 16:00:00'
      },
      myChart: null,
      JsonWater: {
      JsonHourWater: {
        id: 'mycharteff',
        title: '',
        datatype: 2,
        jcdID: '1020',
        legend: [
          {
@@ -108,6 +106,15 @@
            }
          },
          {
            icon: 'image://../assets/imgs/legend/WenDu.png',
            itemHeight: 5,
            itemWidth: 20,
            name: 'pH',
            testStyle: {
              color: '#ccc'
            }
          },
          {
            icon: 'image://../assets/imgs/legend/VOCs.png',
            itemHeight: 5,
            itemWidth: 20,
@@ -117,32 +124,35 @@
            }
          }
        ],
        xdata: ['17时', '18时', '19时', '20时', '21时', '22时', '23时', '0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时'],
        xdata: ['10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时', '0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时'],
        ydatas: [
          { name: 'COD', data: [5.602, 5.617, 5.612, 5.647, 5.652, 5.673, 5.665, 5.702, 5.69, 5.722, 5.729, 5.755, 5.754, 5.784, 8.593, 12.826, 11.125, 8.582, 8.047, 7.325, 6.452, 5.175, 5.522, 6.039], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 80 },
          { name: '氨氮', data: [0.196, 0.184, 0.189, 0.193, 0.199, 0.201, 0.21, 0.211, 0.214, 0.213, 0.214, 0.214, 0.214, 0.214, 0.214, 0.214, 0.213, 0.195, 0.183, 0.183, 0.183, 0.204, 0.223, 0.38], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 25 },
          { name: '废水流量', data: [226.766998, 223.709, 104.838997, 259.417999, 292.963989, 282.291992, 293.272003, 182.985992, 174.287003, 175.011993, 174.307007, 187.044998, 252.026001, 250.365005, 155.317993, 164.723007, 243.785995, 135.520996, 98.18, 185.481995, 226.473999, 215.171005, 250.393005, 254.643997], zdcbcolor: 'red', zxcolor: '#9ACD32', bzz: null }
          { name: 'COD', data: [11.197, 11.5, 11.33, 11.2, 11.54, 11.8, 11.195, 10.7, 10.645, 10.6, 10.875, 11.1, 10.715, 10.4, 10.95, 11.4, 11.193, 11, 11.267, 11.5, 10.725, 10, 10.8, 11.5], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 12 },
          { name: '氨氮', data: [0.186, 0.179, 0.165, 0.159, 0.149, 0.146, 0.141, 0.136, 0.128, 0.13, 0.133, 0.133, 0.134, 0.13, 0.122, 0.124, 0.128, 0.139, 0.16, 0.147, 0.123, 0.127, 0.134, 0.128], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 5 },
          { name: '废水流量', data: [35.15667, 35.445004, 32.91, 31.478336, 33.038334, 33.46167, 33.348335, 33.515003, 33.735001, 31.503336, 31.411667, 32.880001, 33.100002, 31.870001, 30.841667, 31.873335, 32.658333, 32.178337, 30.656668, 30.65667, 32.241669, 32.521667, 31.225002, 30.476669], zdcbcolor: 'red', zxcolor: '#9ACD32', bzz: null },
          { name: 'pH', data: [7.666, 7.669, 7.67, 7.672, 7.677, 7.682, 7.685, 7.688, 7.689, 7.689, 7.688, 7.689, 7.69, 7.69, 7.69, 7.69, 7.691, 7.69, 7.685, 7.681, 7.681, 7.678, 7.674, 7.674], zdcbcolor: 'red', zxcolor: '#F206FF', bzz: 9 }
        ],
        yname: '浓度(mg/l)'
        yname: '浓度(mg/l)',
        datatype: 2
      }
    }
  },
  mounted () {
    this.onSubmit()
  },
  methods: {
    onSubmit () {
      console.log(1)

      // const date = [this.value1, this.value2, this.formInline.region]
      this.effChartShow(this.JsonWater.id, this.JsonWater.title, this.JsonWater.legend, this.JsonWater.xdata, this.JsonWater.ydatas, this.JsonWater.yname, this.JsonWater.id, this.JsonWater.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;
      this.effChartShow()
    },
    effChartShow: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) {
    effChartShow: function () {
      // var id = this.JsonHourWater.id
      // var title = this.JsonHourWater.title
      var legend = this.JsonHourWater.legend
      var xdata = this.JsonHourWater.xdata
      var ydatas = this.JsonHourWater.ydatas
      var yname = this.JsonHourWater.yname
      // var jcdId = this.JsonHourWater.jcdID
      var datatype = this.JsonHourWater.datatype

      this.myChart = this.$echarts.init(this.$refs.main)
      this.myChart.clear()
      var dataUnit = ''
@@ -161,6 +171,7 @@
          ydatas[j].data[k] = it2
        }
      }

      for (var i = 0; i < ydatas.length; i++) {
        // var zdcbcolor = ydatas[i].zdcbcolor
        var bz = ydatas[i].bzz
@@ -197,11 +208,10 @@
                  show: false
                }
              }

            },
            type: 'line',
            data: ydatas[i].data,
            markLine: { // 平均值 ， 和 指标上限
            markLine: { // 平均值  和 指标上限
              symbol: 'none',
              data: [{
                label: {
@@ -245,7 +255,7 @@
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                  width: 4
                },
                borderColor: 'black', // 折点边框的颜色
                label: { // 显示值
@@ -311,10 +321,14 @@
      },
      grid: { // 网格
        top: '20%',
        left: '5%'
        left: '7%',
        bottom: '10%'
      },
      legend: {
        data: legend
        data: legend,
        textStyle: {
          color: '#fff'
        }
      },
      dataZoom: [{
        type: 'inside',
@@ -341,7 +355,8 @@
          rotate: 20,
          interval: 0,
          textStyle: {
            color: '#fff'
            color: '#fff',
            fontSize: 10
          }
        },
        splitLine: { // 网格垂直线为 虚线
@@ -559,20 +574,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/common/echarts/EChartsRealWasteWater.vue

New file
@@ -0,0 +1,695 @@
<!--  废水实时数据  -->
<template>
  <div id="Tab">
    <div class="animation">
      <div class="infomation">
        <span class="grid-content">COD : <i style="color: #e8ee0b">11.24385</i> 标准 : <i style="color: #fff">50</i>></span>
        <span class="grid-content">氮氧 :<i style="color: #e8ee0b">0.1889014</i>  标准 : <i style="color: #fff">30</i></span>
        <span class="grid-content">总磷 : <i style="color: #e8ee0b">0.03812287</i> 标准 : <i style="color: #fff">5</i></span>
        <span class="grid-content">废水流量 : <i style="color: #e8ee0b">32.16287</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 class="boxChart">
        <div style="width: 5rem;height: 1.5rem;" id="popChart" ref="main"></div>
      </div>
    </div>
  </div>
</template>

<script>
import 'dayjs/locale/es'
import dayjs from 'dayjs'

export default {
  name: 'ECharts',
  data () {
    return {
      value1: '',
      value2: '',
      watchData: [],
      dialogVisible: false,
      myChar: null,
      RealTimeChart: null,
      value: '',
      days: dayjs(new Date()).format('YYYYMMDDHHmmss'),
      formInline: {
        region: '',
        timeStart: '2021-04-13 12:47:18',
        timeEnd: '2021-04-13 12:52:18'
      },
      JsonRealWasteWater: {
        id: 'mycharteff_second ',
        title: 'COD',
        legend: [
          {
            icon: 'image://../assets/imgs/legend/NOX.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/SO2.png',
            itemHeight: 5,
            itemWidth: 20,
            name: '总氮',
            textStyle: { color: '#ccc' }
          },
          {
            icon: 'image://../assets/imgs/legend/NOX.png',
            itemHeight: 5,
            itemWidth: 20,
            name: 'COD',
            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 12:47:18 GMT+0800 (中国标准时间)', 0.1900156] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:47:33 GMT+0800 (中国标准时间)', 0.1902795] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:47:48 GMT+0800 (中国标准时间)', 0.1892689] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:48:03 GMT+0800 (中国标准时间)', 0.1882582] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:48:18 GMT+0800 (中国标准时间)', 0.1882284] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:48:33 GMT+0800 (中国标准时间)', 0.1886617] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:48:48 GMT+0800 (中国标准时间)', 0.1873395] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:49:03 GMT+0800 (中国标准时间)', 0.1866319] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:49:18 GMT+0800 (中国标准时间)', 0.1895212] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:49:33 GMT+0800 (中国标准时间)', 0.1898232] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:49:48 GMT+0800 (中国标准时间)', 0.1880916] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:50:03 GMT+0800 (中国标准时间)', 0.1883546] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:50:18 GMT+0800 (中国标准时间)', 0.1907846] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:50:33 GMT+0800 (中国标准时间)', 0.1887416] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:50:48 GMT+0800 (中国标准时间)', 0.1873472] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:51:03 GMT+0800 (中国标准时间)', 0.1886214] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:51:18 GMT+0800 (中国标准时间)', 0.1891896] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:51:33 GMT+0800 (中国标准时间)', 0.1891176] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:51:48 GMT+0800 (中国标准时间)', 0.1890455] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:52:03 GMT+0800 (中国标准时间)', 0.1889734] },
              { name: '氮氧', value: ['Tue Apr 13 2021 12:52:18 GMT+0800 (中国标准时间)', 0.1889014] }],
            zdcbcolor: 'red',
            zxcolor: '#00B0F0',
            bzz: 3
          },
          {
            name: '总磷',
            data: [{ name: '总磷', value: ['Tue Apr 13 2021 12:47:18 GMT+0800 (中国标准时间)', 0.03813388] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:47:33 GMT+0800 (中国标准时间)', 0.03813333] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:47:48 GMT+0800 (中国标准时间)', 0.03813278] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:48:03 GMT+0800 (中国标准时间)', 0.03813223] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:48:18 GMT+0800 (中国标准时间)', 0.03813168] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:48:33 GMT+0800 (中国标准时间)', 0.03813113] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:48:48 GMT+0800 (中国标准时间)', 0.03813057] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:49:03 GMT+0800 (中国标准时间)', 0.03813003] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:49:18 GMT+0800 (中国标准时间)', 0.03812947] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:49:33 GMT+0800 (中国标准时间)', 0.03812892] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:49:48 GMT+0800 (中国标准时间)', 0.03812837] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:50:03 GMT+0800 (中国标准时间)', 0.03812782] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:50:18 GMT+0800 (中国标准时间)', 0.03812727] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:50:33 GMT+0800 (中国标准时间)', 0.03812672] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:50:48 GMT+0800 (中国标准时间)', 0.03812617] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:51:03 GMT+0800 (中国标准时间)', 0.03812562] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:51:18 GMT+0800 (中国标准时间)', 0.03812507] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:51:33 GMT+0800 (中国标准时间)', 0.03812452] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:51:48 GMT+0800 (中国标准时间)', 0.03812397] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:52:03 GMT+0800 (中国标准时间)', 0.03812342] },
              { name: '总磷', value: ['Tue Apr 13 2021 12:52:18 GMT+0800 (中国标准时间)', 0.03812287] }],
            zdcbcolor: 'red',
            zxcolor: '#f48183',
            bzz: 0.3
          },
          {
            name: '总氮',
            data: [{ name: '总氮', value: ['Tue Apr 13 2021 12:47:18 GMT+0800 (中国标准时间)', 2.779342] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:47:33 GMT+0800 (中国标准时间)', 2.779337] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:47:48 GMT+0800 (中国标准时间)', 2.779331] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:48:03 GMT+0800 (中国标准时间)', 2.779823] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:48:18 GMT+0800 (中国标准时间)', 2.779321] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:48:33 GMT+0800 (中国标准时间)', 2.779344] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:48:48 GMT+0800 (中国标准时间)', 2.779452] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:49:03 GMT+0800 (中国标准时间)', 2.779224] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:49:18 GMT+0800 (中国标准时间)', 2.779133] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:49:33 GMT+0800 (中国标准时间)', 2.779445] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:49:48 GMT+0800 (中国标准时间)', 2.779743] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:50:03 GMT+0800 (中国标准时间)', 2.779332] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:50:18 GMT+0800 (中国标准时间)', 2.779562] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:50:33 GMT+0800 (中国标准时间)', 2.779560] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:50:48 GMT+0800 (中国标准时间)', 2.779534] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:51:03 GMT+0800 (中国标准时间)', 2.779412] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:51:18 GMT+0800 (中国标准时间)', 2.779673] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:51:33 GMT+0800 (中国标准时间)', 2.779452] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:51:48 GMT+0800 (中国标准时间)', 2.779397] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:52:03 GMT+0800 (中国标准时间)', 2.779342] },
              { name: '总氮', value: ['Tue Apr 13 2021 12:52:18 GMT+0800 (中国标准时间)', 2.779287] }],
            zdcbcolor: 'red',
            zxcolor: '#e0ffff',
            bzz: 15
          },
          {
            name: '废水流量',
            data: [{ name: '废水流量', value: ['Tue Apr 13 2021 12:47:18 GMT+0800 (中国标准时间)', 31.63029] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:47:33 GMT+0800 (中国标准时间)', 31.9791] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:47:48 GMT+0800 (中国标准时间)', 31.92095] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:48:03 GMT+0800 (中国标准时间)', 32.05784] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:48:18 GMT+0800 (中国标准时间)', 32.01669] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:48:33 GMT+0800 (中国标准时间)', 32.39344] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:48:48 GMT+0800 (中国标准时间)', 32.66452] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:49:03 GMT+0800 (中国标准时间)', 32.45224] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:49:18 GMT+0800 (中国标准时间)', 32.42133] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:49:33 GMT+0800 (中国标准时间)', 32.88445] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:49:48 GMT+0800 (中国标准时间)', 32.36743] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:50:03 GMT+0800 (中国标准时间)', 32.83332] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:50:18 GMT+0800 (中国标准时间)', 32.15562] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:50:33 GMT+0800 (中国标准时间)', 32.61560] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:50:48 GMT+0800 (中国标准时间)', 32.89534] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:51:03 GMT+0800 (中国标准时间)', 32.72412] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:51:18 GMT+0800 (中国标准时间)', 32.48673] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:51:33 GMT+0800 (中国标准时间)', 32.03452] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:51:48 GMT+0800 (中国标准时间)', 32.93397] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:52:03 GMT+0800 (中国标准时间)', 32.84342] },
              { name: '废水流量', value: ['Tue Apr 13 2021 12:52:18 GMT+0800 (中国标准时间)', 32.16287] }],
            zdcbcolor: 'red',
            zxcolor: '#9ACD32',
            bzz: null
          },
          {
            name: 'COD',
            data: [{ name: 'COD', value: ['Tue Apr 13 2021 12:47:18 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:47:33 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:47:48 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:48:03 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:48:18 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:48:33 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:48:48 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:49:03 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:49:18 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:49:33 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:49:48 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:50:03 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:50:18 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:50:33 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:50:48 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:51:03 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:51:18 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:51:33 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:51:48 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:52:03 GMT+0800 (中国标准时间)', 11.24385] },
              { name: 'COD', value: ['Tue Apr 13 2021 12:52:18 GMT+0800 (中国标准时间)', 11.24385] }],
            zdcbcolor: 'red',
            zxcolor: '#fff21c',
            bzz: 35
          }
        ],
        yname: ' 浓度(mg/l)'
      }
    }
  },
  mounted () {
    // this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
    // this.formInline.timeStart = dayjs().subtract(1, 'minute').format('YYYY-MM-DD HH:mm:ss')
    // this.DrawEXHRealTimeDateChart(this.JsonRealWasteWater.id, this.JsonRealWasteWater.title, this.JsonRealWasteWater.legend, this.JsonRealWasteWater.ydatas, this.JsonRealWasteWater.yname)
  },
  methods: {
    onSubmit () {
      this.DrawRealTimeDateChart(this.JsonRealWasteWater.id, this.JsonRealWasteWater.title, this.JsonRealWasteWater.legend, this.JsonRealWasteWater.ydatas, this.JsonRealWasteWater.yname)
    },
    DrawRealTimeDateChart (id, title, legend, ydatas, yname) {
      this.RealTimeChart = this.$echarts.init(this.$refs.echarts)
      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: 3,   //大小
            smooth: true, // 直线 ，true 为曲线
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  // var biaozhuiz
                  // for (var i = 0; i < bzzList.length; i++) {
                  //   if (bzzList[i].name == c.seriesName) {
                  //     biaozhuiz = bzzList[i].bzhui
                  //   }
                  // }
                  // if (c.value[1] > biaozhuiz) {
                  //   return zdcbcolor
                  // } else if (c.value[1] > biaozhuiz * 0.9) {
                  //   return '#FFA500'
                  // }
                  // {
                  //   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: 3,   //大小
            smooth: true, // 直线 ，true 为曲线
            yAxisIndex: 1,
            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 = formatter(value)

              var maker = params[i].marker
              var colo = ''
              switch (seriesName) {
                case 'COD':
                  colo = '#fff21c'
                  break
                case '氨氮':
                  colo = '#00B0F0'
                  break
                case '总磷':
                  colo = '#f48183'
                  break
                case '总氮':
                  colo = '#e0ffff'
                  break
                default:
                  colo = '#9ACD32'
                  break
              }
              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
          } */
        },
        toolbox: { // 打印等工具
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        grid: { // 网格
          top: '20%',
          left: '7%',
          bottom: '10%'
        },
        legend: {
          data: legend
        },
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 100
        }, {
          start: 0,
          end: 100,
          show: false,
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        }],
        xAxis: { // x 轴设置
          type: 'time',
          boundaryGap: false,
          axisLabel: { // x轴全部显示
            // rotate: 30,
            margin: 6,
            interval: 0,
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: { // 网格垂直线为 虚线
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisTick: { // x 轴刻度显示
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
            }
          }
          // data: xdata
        },
        yAxis: [{
          type: 'value',
          name: yname,
          max: function (value) {
            return parseInt(value.max + 30)
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
          axisPointer: {
            snap: true
          },
          splitLine: {
            show: false
          }, // y轴 网格线不显示,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
            }
          }
        }, {
          type: 'value',
          name: '流量(m³/h)',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
          axisPointer: {
            snap: true
          },
          splitLine: {
            show: false
          }, // y轴 网格线不显示,
          // inverse: true,
          // nameLocation: 'start',
          // max:500,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
            }
          }
        }],
        series: serLists
      }
      this.RealTimeChart.setOption(option)
      /* RealTimeChart.on('legendselectchanged', function (params) {
        // console.log(params);
        var StdVal = null
        var op = { yAxis: {} }
        if (params.selected.COD) {
          if (bzzList && bzzList.length > 0) {
            for (let i = 0; i < bzzList.length; i++) {
              if (bzzList[i].name == 'COD') {
                StdVal = bzzList[i].bzhui
              }
            }
          }

          op.yAxis.max = function (value) {
            var ma
            if (value.max < StdVal) {
              ma = StdVal
            } else {
              ma = Math.ceil(value.max)
            }
            return ma
          }
        } else if (params.selected['总氮']) {
          if (bzzList && bzzList.length > 0) {
            for (let i = 0; i < bzzList.length; i++) {
              if (bzzList[i].name == '总氮') {
                StdVal = bzzList[i].bzhui
              }
            }
          }
          op.yAxis.max = function (value) {
            var ma
            if (value.max < StdVal) {
              ma = StdVal
            } else {
              ma = Math.ceil(value.max)
            }
            return ma
          }
        } else if (params.selected['氨氮']) {
          if (bzzList && bzzList.length > 0) {
            for (let i = 0; i < bzzList.length; i++) {
              if (bzzList[i].name == '氨氮') {
                StdVal = bzzList[i].bzhui
              }
            }
          }
          op.yAxis.max = function (value) {
            var ma
            if (value.max < StdVal) {
              ma = StdVal
            } else {
              ma = Math.ceil(value.max)
            }
            return ma
          }
        } else if (params.selected['总磷']) {
          if (bzzList && bzzList.length > 0) {
            for (let i = 0; i < bzzList.length; i++) {
              if (bzzList[i].name == '总磷') {
                StdVal = bzzList[i].bzhui
              }
            }
          }
          op.yAxis.max = function (value) {
            var ma
            if (value.max < StdVal) {
              ma = StdVal
            } else {
              ma = Math.ceil(value.max)
            }
            return ma
          }
        }
        RealTimeChart.setOption(op)
      }) */
    }
  }
}
</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
}
.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: #ffffff;
      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;
      text-align: center;
    }
    input::-webkit-calendar-picker-indicator {
      opacity: 100;
    }
    .detailbtn{
      background-color:#2e4967;
      text-align: center;
      padding: 0 7px;
      line-height: 24px;
      border-radius: 4px;
      margin-right: 6px;
    }
    .detailbtn:hover{
      box-shadow: 0 0 0.03rem #fff700 !important;
      color:#fff700 !important;
      cursor: pointer;
    }
  }
  .el-dialog-div {
    //height: 50vh!important;
    overflow: auto;
    //overflow: hidden;
  }

  #echarts {
    margin: 0;
    padding: 0;
  }
}
</style>

 src/components/BaseNav/PublicBounced/common/echarts/EChartsWasteWaterTable.vue

New file
@@ -0,0 +1,140 @@
<template>
<!--  <el-table :data="tableData" style="width:730px" height="200px">-->
<!--    <el-table-column v-for="(item, index) in tableLabel" :key="index" :prop="item.prop"-->
<!--                     :label="item.label">-->
<!--       <el-table-column v-for="(item1, index1) in item.label" :key="index1" :prop="item1.prop" :label="item1.label">-->
<!--      </el-table-column>-->
<!--    </el-table-column>-->
<!--  </el-table>-->
  <el-table
      :data="tableData"
      style="width: 100%;height: 100%">
    <el-table-column
        prop="tableData.LabMonTime"
        label="检测时间">
    </el-table-column>
    <el-table-column
        label="COD">
      <el-table-column
          prop="tableData.MonItemId"
          label="监测值">
      </el-table-column>
      <el-table-column
          prop="tableData.LabMonTime"
          label="标准值">
      </el-table-column>
    </el-table-column>
    <el-table-column
        label="PH">
      <el-table-column
          prop="tableData.MonItemId"
          label="监测值">
      </el-table-column>
      <el-table-column
          prop="tableData.LabMonTime"
          label="标准值">
      </el-table-column>
    </el-table-column>
    <el-table-column
        label="BOD5">
      <el-table-column
          prop="tableData.MonItemId"
          label="监测值">
      </el-table-column>
      <el-table-column
          prop="tableData.LabMonTime"
          label="标准值">
      </el-table-column>
    </el-table-column>
    <el-table-column
        label="氨氮">
      <el-table-column
          prop="tableData.MonItemId"
          label="监测值">
      </el-table-column>
      <el-table-column
          prop="tableData.LabMonTime"
          label="标准值">
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'EChartsTable',
  data () {
    return {
      // tableLabel: [
      //   {
      //     label: '检测时间',
      //     prop: 'StoragePlaceId'
      //   },
      //   {
      //     label: '二氧化硫',
      //     prop: [
      //       {
      //         label: '监测值',
      //         NOMonitor: ''
      //       },
      //       {
      //         label: '标准值',
      //         NOtandard: ''
      //       }]
      //   },
      //   {
      //     label: '氮氧化物',
      //     prop: [
      //       {
      //         label: '监测值',
      //         NOMonitor: ''
      //       },
      //       {
      //         label: '标准值',
      //         NOtandard: ''
      //       }]
      //   },
      //   {
      //     label: '烟尘',
      //     prop: [
      //       {
      //         label: '监测值',
      //         NOMonitor: ''
      //       },
      //       {
      //         label: '标准值',
      //         NOtandard: ''
      //       }]
      //   },
      //   {
      //     label: '黑度',
      //     prop: [
      //       {
      //         label: '监测值',
      //         NOMonitor: ''
      //       },
      //       {
      //         label: '标准值',
      //         NOtandard: ''
      //       }]
      //   }
      // ],
      tableData: []
    }
  },
  created () {
    this.$nextTick(() => {
      this.$attrs.ManualData.forEach(item => {
        this.tableData = [...item]
      })
      this.tableData.LabMonTime = 100
      console.log(this.tableData)
    })
  }
}

</script>

<style scoped>

</style>

 src/components/BaseNav/PublicBounced/common/echarts/Echarts.vue

@@ -64,7 +64,6 @@
        timeEnd: ''
      },
      RealTimeChart: null,
      info: this.series,
      JsonTimeCtarts: {
        id: 'mychart_ss ',
        title: '烟尘',
@@ -442,7 +441,7 @@
          }
        }, { // 流量轴
          type: 'value',
          name: '废气流量(m3/h)',
          name: '流量(m3/h)',
          axisLabel: {
            formatter: '{value}',
            textStyle: {

 src/components/table/components/WasteWater.vue

@@ -1,14 +1,7 @@
<template>
   <div class="waste-water">
           <el-table
                   class="tableBox"
                   :data="tableData"
                   @cell-click="handle"
           >
               <el-table-column
                       width="30px"
                        label=""
               >
           <el-table class="tableBox" :data="tableData" @cell-click="handle">
               <el-table-column width="30px" label="">
                 <template slot-scope="{row,$index}">
<!--                   <i class="el-icon-caret-right" v-if="$index ===1"></i>-->
                 <el-popover
@@ -23,60 +16,33 @@
                 </el-popover>
                   </template>
               </el-table-column>
               <el-table-column
                       label="序号"
                       width="45px"
                       type="index">
               </el-table-column>
               <el-table-column
                       prop="UserName"
                       label="企业名称"
                       width="120px">
               <el-table-column label="序号" width="45px" type="index"></el-table-column>
               <el-table-column prop="UserName" label="企业名称" width="120px">
                 <template slot-scope="scope">
                   <div v-if="scope.row.UserName==='集团名称'" style="color: #00ffff">{{scope.row.UserName}}</div>
                   <div v-else-if="scope.row.UserName==='天津石化'" style="color: #00ffff">{{scope.row.UserName}}</div>
                   <div v-else >{{scope.row.UserName}}</div>
                 </template>
               </el-table-column>
               <el-table-column prop="WasteWaters" label="外排废水量（m³）"></el-table-column>
               <el-table-column prop="WasteWaters">
                   <div slot="header">
                      <span>外排废水量</span>
                       <div>（m³）</div>
                   </div>
               </el-table-column>
               <el-table-column label="COD  (t)">
                   <el-table-column
                           prop="AddOutPut"
                           label="累计产生量"
                           width="70px">
                   </el-table-column>
                   <el-table-column
                               prop="MonthOutPut"
                               label="当月生产量"
                               width="70px">
                   </el-table-column>
                   <el-table-column prop="AddOutPut" label="累计产生量" width="70px"></el-table-column>
                   <el-table-column prop="MonthOutPut" label="当月生产量" width="70px"></el-table-column>
               </el-table-column>
               <el-table-column label="氨氮  (t)">
                   <el-table-column
                           prop="NH4NPut"
                           label="累计产生量"
                           width="70px">
                   </el-table-column>
                   <el-table-column
                           prop="NH4NMonth"
                           label="当月生产量"
                           width="70px">
                   </el-table-column>
                   <el-table-column prop="NH4NPut" label="累计产生量" width="70px"></el-table-column>
                   <el-table-column prop="NH4NMonth" label="当月生产量" width="70px"></el-table-column>
               </el-table-column>
               <el-table-column label="排放口检测统计状态">
                   <el-table-column
                           prop="normal"
                           label="正常"
                           width="60px">
                   <el-table-column prop="normal" label="正常" width="60px">
                     <template slot-scope="{row,$index}">
                       <u v-if="$index!=2" >{{row.normal}}</u>
                       <el-popover v-else
                           placement="bottom-end"
                           width="200"
                           trigger="click"
                                   popper-class="popovers"
                           title="监测点明细表"
                       >
                       <el-popover v-else placement="bottom-end" width="200" trigger="click" popper-class="popovers" title="监测点明细表">
                         <refinery></refinery>
                         <u slot="reference" style="color: #00ffff">{{row.normal}}</u>
                         <!--                       <i class="el-icon-caret-bottom" v-else-if="isShowIcon&&scope.row.index===1"></i>-->
@@ -85,21 +51,9 @@
                       </el-popover>
                     </template>
                   </el-table-column>
                   <el-table-column
                           prop="overProof"
                           label="超标"
                           width="60px">
                   </el-table-column>
                   <el-table-column
                           prop="Abnormal"
                           label="异常"
                           width="60px">
                   </el-table-column>
                   <el-table-column
                           prop="StopProduction"
                           label="停产"
                           width="60px">
                   </el-table-column>
                   <el-table-column prop="overProof" label="超标" width="60px"></el-table-column>
                   <el-table-column prop="Abnormal" label="异常" width="60px"></el-table-column>
                   <el-table-column prop="StopProduction" label="停产" width="60px"></el-table-column>
                   <el-table-column
                           prop="deficiency"
                           label="缺失"

 src/components/table/components/componented/ChemicalWastewater.vue

@@ -1,67 +1,26 @@
<template>
    <div class="Chemical-Waste-water" id="Chemical-Waste-water">
        <el-row type="flex" class="head-area" align="middle">
        <!-- <el-row type="flex" class="head-area" align="middle">
            <el-col>
                <span>监测点排放明细</span>
            </el-col>
<!--            <el-col class="head-area-button">-->
<!--                <el-button style="float: right; padding: 3px 0" icon="el-icon-close" type="info" @click="closeBtns"></el-button>-->
<!--            </el-col>-->
        </el-row>
        <el-table
                class="tableBox"
                :data="tableData"
        >
            <el-table-column
                    label="序号"
                    width="60px"
                    type="index">
            </el-table-column>
            <el-table-column
                    prop="UserName"
                    label="企业名称"
                    width="120px">
            </el-table-column>
            <el-table-column
                    prop="WasteWaters"
                    label="工业外排废水量（m³）"
                    width="200px">
            </el-table-column>
        </el-row> -->
        <div class="panel-title">监测点排放明细</div>
        <el-table class="tableBox" :data="tableData">
            <el-table-column label="序号" width="60px" type="index"></el-table-column>
            <el-table-column prop="UserName" label="企业名称" width="120px"></el-table-column>
            <el-table-column prop="WasteWaters" label="工业外排废水量（m³）" width="200px"></el-table-column>
            <el-table-column label="产生量 （吨）">
                <el-table-column
                        prop="AddOutPut"
                        label="一般固废"
                        width="100px">
                </el-table-column>
                <el-table-column
                        prop="MonthOutPut"
                        label="危险废物"
                        width="100px">
                </el-table-column>
                <el-table-column prop="AddOutPut" label="一般固废" width="100px"></el-table-column>
                <el-table-column prop="MonthOutPut" label="危险废物" width="100px"></el-table-column>
            </el-table-column>
            <el-table-column label="贮存状态（个）">
                <el-table-column
                        prop="normal"
                        label="正常"
                        width="100px">
                </el-table-column>
                <el-table-column
                        prop="warning"
                        label="预警"
                        width="100px">
                </el-table-column>
                <el-table-column prop="normal" label="正常" width="100px"></el-table-column>
                <el-table-column prop="warning" label="预警" width="100px"></el-table-column>
            </el-table-column>
            <el-table-column label="贮存状态（个）">
                <el-table-column
                        prop="normal"
                        label="正常"
                        width="100px">
                </el-table-column>
                <el-table-column
                        prop="warning"
                        label="预警"
                        width="100px">
                </el-table-column>
                <el-table-column prop="normal" label="正常" width="100px"></el-table-column>
                <el-table-column prop="warning" label="预警" width="100px"></el-table-column>
            </el-table-column>
        </el-table>
    </div>

 src/components/table/components/tabHandover.vue

@@ -1,19 +1,24 @@
<template>
  <el-tabs  v-model="activeName">
    <el-tab-pane label="废水" name="first">
  <div>
    <el-tabs  v-model="activeName" @tab-click="handleClick">
      <!-- <el-tab-pane label="废水" name="first">
      <waste-water></waste-water>
    </el-tab-pane>
    <el-tab-pane label="废气" name="second">
      <waste-water></waste-water>
<!--      <waste-gas></waste-gas>-->
    </el-tab-pane>
    <el-tab-pane label="固废" name="third">
      <solid-waste></solid-waste>
    </el-tab-pane>
    <el-tab-pane label="空气质量" name="fourth">
      <AirQuality></AirQuality>
    </el-tab-pane>
      </el-tab-pane> -->
      <el-tab-pane v-for="(item,index) in topicList" :key="index" :label="item.name" :name="item.name"></el-tab-pane>
  </el-tabs>
    <div>
      <component :is="gcComp"></component>
    </div>
  </div>
</template>

<script>
@@ -21,6 +26,9 @@
// import WasteGas from '@components/table/components/WasteGas'
import SolidWaste from '@components/table/components/SolidWaste'
import AirQuality from '@components/table/components/AirQuality'

import { TopicList } from '../../../conf/Topic'

export default {
  name: 'tabHandover',
  components: {
@@ -31,7 +39,37 @@
  },
  data () {
    return {
      activeName: 'first'
      activeName: 'first',
      topicList: TopicList,
      gcComp: AirQuality
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab.label)
      switch (tab.label) {
        case '污染源':
          this.gcComp = AirQuality
          break
        case '废水':
          this.gcComp = WasteWater
          break
        case '废气':
          this.gcComp = WasteWater
          break
        case '固废':
          this.gcComp = SolidWaste
          break
        case '环境风险':
          this.gcComp = AirQuality
          break
        case '土壤及地下水':
          this.gcComp = AirQuality
          break
        case '管线':
          this.gcComp = AirQuality
          break
      }
    }
  }
}