派生自 wuyushui/SewerAndRainNetwork

chenyabin
2021-05-14 0e2a48bddcf9270f546f87c8b19ea68c3ab4f0b4
src/components/BaseNav/WasteGas/HourData.vue
@@ -1,175 +1,371 @@
<!--  小时数据  -->
<template>
    <div id="Tab">
        <div class="infomation">
          <div>
            <span class="grid-content">氮氧化物 :<i style="color: #e8ee0b">29.93</i>  标准 : 100</span>
            <span class="grid-content">二氧化硫 : <i style="color: #e8ee0b">17.34</i> 标准 : 50</span>
            <span class="grid-content">烟尘 : <i style="color: #e8ee0b">6.93</i> 标准 : 30</span>
            <span class="grid-content">废气流量 : <i style="color: #e8ee0b">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" @click="pickerBtn"></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 class="detailbtn"  @click="onSubmit">查询</div>
                <div class="detailbtn" @click="dialogVisible = true" >明细表</div>
             </div>
            <div style="width:5rem;height:1.5rem;" id="echarts" ref="main"></div>
        </div>
        <!-- 明细弹框 -->
        <el-dialog :visible.sync="dialogVisible"
                   :append-to-body="true"
                   width="68%"
                   center
                   v-dialogDrag
        >
            <div class="el-dialog-div" style="height: 500px">
                <public-detailed-list v-bind="$attrs"></public-detailed-list>
            </div>
        </el-dialog>
  <div class="echarts-box">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
    </div>
    <div class="echarts-form">
      <span class="demonstration">开始时间:</span>
      <el-date-picker v-model="formData.timeStart" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini"></el-date-picker>
      <span class="demonstration">结束时间:</span>
      <el-date-picker v-model="formData.timeEnd" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini"></el-date-picker>
      <span class="demonstration">采样点数:</span>
      <el-select v-model="formData.region" placeholder="请选择" size="mini" >
        <el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option>
      </el-select>
      <el-button @click="querySearch">查询</el-button>
      <el-button @click="ScheduleShow">明细表</el-button>
    </div>
    <div class="echarts-chart">
      <div ref="wastegashour"></div>
    </div>
    <span class="time-select">{{ formData.timeStart }}时—{{ formData.timeEnd }}时</span>
    <!--    明细弹框-->
    <el-dialog :visible.sync="showSchedule" :modal="false" v-dialogDrag>
      <div class="el-dialog-div" style="height: 200px">
        <Scheduleof></Scheduleof>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'
import Scheduleof from '@components/BaseNav/WasteGas/Scheduleof'
import PublicDataStandard from '../PublicDataStandard'
import 'dayjs/locale/es'
import dayjs from 'dayjs'
import mapApi from '@/api/mapApi'
export default {
  name: 'HourData',
  components: {
    PublicDetailedList
    // PublicDetailedList
    PublicDataStandard,
    Scheduleof
  },
  data () {
    return {
      watchData: [],
      dialogVisible: false,
      myChar: null,
      value: '',
      formInline: {
        timeStart: null,
        timeEnd: null
      },
      myChart: null,
      JsonCtarts: {
        id: 'mychart',
        title: '加热炉烟气',
        legend: [
          {
            icon: 'image://../assets/imgs/legend/NOX.png',
            itemHeight: 5,
            itemWidth: 20,
            textStyle: {
              color: '#CCC'
            },
            name: '氮氧化物'
      // tab栏传递接收数据
      dataStandard: [
        {
          current: {
            name: '氮氧化物',
            val: 29.93
          },
          {
            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' }
          standard: {
            name: '标准',
            val: 100
          }
        ],
        xdata: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时'],
        ydatas: [
          { name: '氮氧化物', data: ['34.44', '36.91', '37.65', '37.16', '38.03', '38.23', '37.21', '37.67', '37.97', '37.58', '36.61', '37.76', '37.27', '37.24', '35.86', '36.61', '37.21'], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 50 },
          { name: '二氧化硫', data: ['4.98', '4.57', '4.19', '3.14', '3.80', '3.62', '3.33', '2.80', '3.13', '2.54', '3.08', '2.48', '1.97', '1.76', '0.82', '1.01', '1.5'], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 35 },
          { name: '废气流量', data: ['381907.22', '376474.19', '378572.31', '379369.44', '385225.72', '388657.56', '330667.31', '26560.98', '0.00', '0.00', '49567.43', '357837.31', '376972.66', '379693.50', '379982.22', '379693.50', '379982.22'], zdcbcolor: 'red', zxcolor: '#9ACD32', bzz: null },
          { name: '烟尘', data: ['4.02', '4.17', '4.31', '4.00', '4.45', '4.40', '4.40', '4.25', '4.26', '4.18', '4.58', '4.21', '3.96', '3.83', '3.78', '3.83', '3.78'], zdcbcolor: 'red', zxcolor: '#f48183', bzz: 10 },
          { name: '温度', data: ['46.55', '46.70', '46.47', '46.56', '46.57', '46.58', '46.56', '46.58', '46.69', '46.47', '46.58', '46.60', '46.54', '46.55', '46.60', '46.55', '46.60'], zdcbcolor: 'red', zxcolor: '#F206FF', bzz: null }
        ],
        yname: ' 浓度(mg/m³)',
        // id:'mychart',
        datatype: 2
      }
        },
        {
          current: {
            name: '二氧化硫',
            val: 17.34
          },
          standard: {
            name: '标准',
            val: 50
          }
        },
        {
          current: {
            name: '烟尘',
            val: 6.93
          },
          standard: {
            name: '标准',
            val: 30
          }
        },
        {
          current: {
            name: '废气流量',
            val: 120
          },
          standard: {
            name: '',
            val: null
          }
        }],
      formData: {
        region: '25',
        regionList: [25, 50, 75, 100],
        timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss'),
        timeEnd: dayjs().format('YYYY-MM-DD HH:mm:ss')
      },
      showSchedule: false,
      dataType: 2,
      myChart: null,
      exhbzz: null,
      jcdID: 1,
      exhbzzList: []
    }
  },
  created () {
  },
  mounted () {
    this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
    this.formInline.timeStart = dayjs().subtract(12, 'hour').format('YYYY-MM-DD HH:mm:ss')
    this.onSubmit()
    this.$nextTick(() => {
      this.initnData()
    })
  },
  methods: {
    pickerBtn () {
      this.formInline.timeEnd = ''
      this.formInline.timeStart = ''
      console.log(1)
    ScheduleShow () {
      this.showSchedule = !this.showSchedule
    },
    onSubmit () {
      this.CreateChart()
    querySearch () {
      console.log('查询')
    },
    CreateChart () {
      // var id = this.JsonCtarts.id
      // var title = this.JsonCtarts.title
      var legend = this.JsonCtarts.legend
      var xdata = this.JsonCtarts.xdata
      var ydatas = this.JsonCtarts.ydatas
      var yname = this.JsonCtarts.yname
      // var jcdId = this.JsonCtarts.jcdID
      var datatype = this.JsonCtarts.datatype
    async initnData () {
      const data = {
        onLineMonEmissPointId: 23,
        monItemId: 28,
        beginTime: this.formData.timeStart,
        endTime: this.formData.timeEnd,
        dataType: this.dataType
      }
      const result = (await mapApi.getWasteGasMonData(data)).Result.DataInfo
      // console.log(result)
      this.get24HourDate(result)
    },
    get24HourDate (res) {
      if (res.length > 0) {
        // 处理数据开始
        const d = res
        const nameList = [] // 存放图例
        const dateList = [] // 存放时间
        let dataList = [] // 存放数据
        const bzh = [] // 标准值
        let data = []
        // wrwIDS = []
        for (let i = 0; i < d.length; i++) {
          const MonTimeStr = d[i].MonTimeStr
      this.myChart = this.$echarts.init(this.$refs.main)
      this.myChart.clear()
      var dataUnit = ''
          // 20190430 add  获取监测点id 污染物id  检测项id
          // getWRW(d[i])
          /*  if(i==0){
                let wrw ={
                    name: d[0].PoltmtrlName,
                    id:d[0].PoltmtrlId
                }
                wrwIDS.push(wrw);
            }else {
                    let flag=true;
                wrwIDS.forEach(item=>{
                    if(d[i].PoltmtrlId==item.id){
                        flag=false;
                    }
                })
                if(flag){
                    let wrw ={
                        name: d[i].PoltmtrlName,
                        id:d[i].PoltmtrlId
                    }
                    wrwIDS.push(wrw);
                }
            }
*/
          let strDate
          const d1 = MonTimeStr.split('/')
          const d2 = d1[2].split(' ')
          const t = MonTimeStr.split(' ')
          const hlist = t[1].split(':')
          const h = hlist[0]
          if (d1[1] > 9) {
            //  strDate=MonTimeStr.substring(8,10)+"日";
            if (d2[0] > 9) {
              strDate = ''
              if (h > 9) {
                strDate += MonTimeStr.substring(11, 13) + '时'
              } else {
                strDate += MonTimeStr.substring(11, 12) + '时'
              }
            } else {
              strDate = ''
              if (h > 9) {
                strDate += MonTimeStr.substring(10, 12) + '时'
              } else {
                strDate += MonTimeStr.substring(10, 11) + '时'
              }
            }
          } else {
            if (d2[0] > 9) {
              strDate = ''
              if (h > 9) {
                strDate += MonTimeStr.substring(10, 12) + '时'
              } else {
                strDate += MonTimeStr.substring(10, 11) + '时'
              }
            } else {
              strDate = ''
              if (h > 9) {
                strDate += MonTimeStr.substring(9, 11) + '时'
              } else {
                strDate += MonTimeStr.substring(9, 10) + '时'
              }
            }
          }
          // console.log("时间",strDate);
          if (nameList.length === 0) {
            nameList.push(d[i].PoltmtrlName.trim())
            dateList.push(strDate)
            if ((d[i].PoltmtrlName === '废气流量' || d[i].PoltmtrlName === '废气') && d[i].MonQty < 0) {
              d[i].MonQty = 0
            }
            data.push(d[i].MonQty)
            bzh.push(d[i].StdValue)
          } else if (nameList.indexOf(d[i].PoltmtrlName.trim()) < 0) {
            nameList.push(d[i].PoltmtrlName)
            bzh.push(d[i].StdValue)
            dataList.push(data)
            data = []
            if ((d[i].PoltmtrlName === '废气流量' || d[i].PoltmtrlName === '废气') && d[i].MonQty < 0) {
              d[i].MonQty = 0
            }
            data.push(d[i].MonQty)
          } else if (i === d.length - 1) {
            if ((d[i].PoltmtrlName === '废气流量' || d[i].PoltmtrlName === '废气') && d[i].MonQty < 0) {
              d[i].MonQty = 0
            }
            data.push(d[i].MonQty)
            dataList.push(data)
          } else {
            if (dateList.indexOf(strDate) < 0) {
              dateList.push(strDate)
            }
            if ((d[i].PoltmtrlName === '废气流量' || d[i].PoltmtrlName === '废气') && d[i].MonQty < 0) {
              d[i].MonQty = 0
            }
            data.push(d[i].MonQty)
          }
        }
        // 处理数据结束
        // dateList=get24DateTime();
        const newList = []
        for (let i = 0; i < dataList.length; i++) {
          const list = dataList[i].reverse()
          newList.push(list)
        }
        dataList = newList
        const id = 'containerDomId' || 'mychart'
        const title = '加热炉烟气'
        const lengList = []
        let objTemp
        for (let l = 0; l < nameList.length; l++) {
          let obj
          let iconurl
          if (nameList[l] === '二氧化硫') {
            iconurl = 'image://../assets/imgs/legend/SO2.png'
          } else if (nameList[l] === '氮氧化物') {
            iconurl = 'image://../assets/imgs/legend/NOX.png'
          } else if (nameList[l] === '烟尘') {
            iconurl = 'image://../assets/imgs/legend/YanChen.png'
          } else if (nameList[l] === '非甲烷总烃') {
            iconurl = 'image://../assets/imgs/legend/grn.png'
          } else if (nameList[l] === '温度') {
            iconurl = 'image://../assets/imgs/legend/WenDu.png'
          } else if (nameList[l] === '废气流量') {
            iconurl = 'image://../assets/imgs/legend/VOCs.png'
          }
          if (nameList[l] === '废气' || nameList[l] === '废气流量') { // 将废气流量排到数组最后
            objTemp = {
              name: nameList[l],
              icon: iconurl,
              textStyle: {
                color: '#ccc'
              },
              itemWidth: 20,
              itemHeight: 5
            }
          } else {
            obj = {
              name: nameList[l],
              icon: iconurl,
              textStyle: {
                color: '#ccc'
              },
              itemWidth: 20,
              itemHeight: 5
            }
            lengList.push(obj)
          }
        }
        lengList.push(objTemp)
        const legend = lengList
        const xdata = dateList.reverse()
        const ydatas = []
        for (let j = 0; j < nameList.length; j++) {
          let zdcbcolor, zxcolor
          if (nameList[j] === '二氧化硫') {
            zdcbcolor = 'red'
            zxcolor = '#fff21c'
          } else if (nameList[j] === '氮氧化物') {
            zdcbcolor = 'red'
            zxcolor = '#00B0F0'
          } else if (nameList[j] === '烟尘') {
            zdcbcolor = 'red'
            zxcolor = '#f48183'
          } else if (nameList[j] === '废气流量') {
            zdcbcolor = 'red'
            zxcolor = '#8fdc6e'
          }
          const ydata = {
            name: nameList[j],
            data: dataList[j],
            zdcbcolor: zdcbcolor,
            zxcolor: zxcolor,
            bzz: bzh[j]
          }
          this.exhbzz = {
            name: nameList[j],
            bzhui: bzh[j]
          }
          this.exhbzzList.push(this.exhbzz)
          ydatas.push(ydata)
        }
        const yname = '浓度(mg/m³)'
        this.CreateChart(id, title, legend, xdata, ydatas, yname, this.jcdID, this.datatype)
      }
    },
    CreateChart (id, title, legend, xdata, ydatas, yname, jcdID, datatype) {
      this.myChart = this.$echarts.init(this.$refs.wastegashour)
      // this.myChart .clear()
      let dataUnit = ''
      if (datatype === 1) {
        dataUnit = '废气气量(m³/d)'
        dataUnit = '气量(m³/d)'
      } else {
        dataUnit = '废气气量(m³/h)'
        dataUnit = '气量(m³/h)'
      }
      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)
      const bzzList = this.exhbzzList
      const serLists = []
      for (let j = 0; j < ydatas.length; j++) {
        const len = ydatas[j].data.length
        for (let k = 0; k < len; k++) {
          const it = ydatas[j].data[k]
          const 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
      for (let i = 0; i < ydatas.length; i++) {
        const zdcbcolor = ydatas[i].zdcbcolor
        const bzz = ydatas[i].bzz
        let obj
        if (bzz == null) {
          obj = {
            name: ydatas[i].name,
@@ -180,17 +376,19 @@
            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
                  let biaozhuiz
                  for (let i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name === c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value > 999999999999) {
                  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,
@@ -214,20 +412,19 @@
            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
                  let biaozhuiz
                  for (let i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name === c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value > biaozhuiz) {
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value > biaozhuiz * 0.9) {
                  } else if (c.value[1] > biaozhuiz * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  }
                  */
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
@@ -279,7 +476,7 @@
        serLists.push(obj)
      }
      var option = {
      const option = {
        tooltip: { // 提示框
          trigger: 'axis',
          axisPointer: {
@@ -289,20 +486,21 @@
            }
          },
          formatter: function (params) {
            var s = params[0].name + '<br/>'
            for (var i = 0; i < params.length; i++) {
            let s = params[0].name + '<br/>'
            for (let i = 0; i < params.length; i++) {
              // const name = params[i].name
              // 图表title名称
              var seriesName = params[i].seriesName
              const seriesName = params[i].seriesName
              // 值
              var value = params[i].value
              // var valueFliter
              // if (value === 'NaN') {
              //   valueFliter = ''
              // } else {
              //   valueFliter = this.formatter(value)
              // }
              var maker = params[i].marker
              const value = params[i].value
              let valueFliter
              if (value === 'NaN') {
                valueFliter = ''
              } else {
                // valueFliter = formatter(value)
                valueFliter = value
              }
              let 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 === '氮氧化物') {
@@ -311,10 +509,10 @@
                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 {
              } else if (seriesName === '废气流量') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>'
              }
              s += maker + seriesName + ':' + value + '<br />'
              s += maker + seriesName + ':' + valueFliter + '<br />'
            }
            return s
          }
@@ -327,8 +525,7 @@
        },
        grid: { // 网格
          top: '20%',
          left: '6%',
          bottom: '15%'
          left: '15%'
          // containLabel: true
        },
        legend: { // 图例
@@ -356,8 +553,8 @@
          type: 'category',
          boundaryGap: false,
          axisLabel: { // x轴全部显示
            rotate: 20,
            interval: 0,
            // rotate: 20,
            // interval: 0,
            textStyle: {
              color: '#fff'
            }
@@ -382,22 +579,24 @@
        yAxis: [{
          type: 'value',
          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)
          }, */
          // max: function (value) {
          //   let 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
          //   }) // 排序
          //   const 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: {
@@ -420,7 +619,7 @@
          type: 'value',
          name: dataUnit,
          max: function (value) {
            var ma = value.max > 120 ? value.max : 120
            const ma = value.max > 12 ? value.max : 12
            return parseInt(ma)
          },
          axisLabel: {
@@ -444,180 +643,11 @@
        }],
        series: serLists
      }
      // console.log(option)
      this.myChart.setOption(option)
      /*
      this.myChart.on('legendselectchanged', function (params) {
        var StdVal = null
        var op = { yAxis: {} }
        const 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.myChart.setOption(op)
      })
        */
      /**
       * 解决myChart.on('click',function(){...})事件重复触发的问题
       * Date: 20200720
       */
      this.myChart.off('click')
      /**
       *  图标点击事件
       *  20190426 add
       * */
      /* this.myChart.on('click', function (params) {
        // 获取当前时间,小时
        var nowHours = new Date().Format('hh')
        // 点击折线图折点对应的时间
        // 需要传的时间为
        const dates = null
        if (params.name.indexOf('时') !== -1) {
          var hours = params.name.substring(0, params.name.indexOf('时'))
          if (parseInt(hours) < parseInt(nowHours)) {
            dates = 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')
            dates = stringDate + ' ' + hours + ':00:00'
          }
        } else if (params.name.indexOf('日') !== -1) {
          var day = params.name.substring(0, params.name.indexOf('日') - 1)
          dates = 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 {
        .infomation {
            padding: 0.02rem 0.04rem;
            .grid-content {
                font-size: 0.08rem;
                background-color: #2e4967;
                text-align: center;
                border-radius: 0.01rem;
                height: 0.15rem;
                line-height: 0.15rem;
                margin-right: 0.04rem;
                padding:0 0.04rem
            }
        }
    }
    .form-echrts {
        width: 100%;
        border-top: 1px solid #396d83;
        //margin: 10px 10px 10px 10px;
        .from-search{
            display: flex;
            padding:0.02rem;
            >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:1rem;
                background-color: #2e4967;
                color: #fff;
                font-size: 0.08rem;
                height: 0.15rem;
                padding: 0;
                border:none;
              z-index: 9999;
                text-align: center;
                //padding-left:20px ;
                //padding: 0!important;
            }
            /deep/.el-input__icon{
                display: block;
                width:1rem;
                height: 0.15rem;
                line-height: 0.15rem;
                cursor: pointer;
                font-size: 0;
            }
            input::-webkit-calendar-picker-indicator {
                opacity: 100;
            }
            .detailbtn{
                background-color:#2e4967;
                text-align: center;
                padding: 0 7px;
                height: 0.15rem;
                line-height: 0.15rem;
                border-radius: 4px;
                margin-right: 6px;
            }
        }
        .el-dialog-div {
            overflow: auto;
        }
        #echarts {
            margin: 0;
            padding: 0;
        }
    }
</style>