废水弹框相关修改

chenzeping

2021-04-22 2b249104b536535697157adfa224a4cc51c28351

废水弹框相关修改

 src/components/BaseNav/WasteGas/WasteGasIndex.vue

@@ -56,7 +56,7 @@
import PublicVideo from '../PublicVideo'
import PublicSector from '../PublicSector'
// 图表组件
import RealData from './RealData'
import RealData from './WasteGasRealChart'
import HourData from './HourData'
import DayData from './DayData'
import Detail from './Detail'

 src/components/BaseNav/WasteGas/WasteGasRealChart.vue

File was renamed from src/components/BaseNav/WasteGas/RealData.vue
@@ -42,7 +42,7 @@
import dayjs from 'dayjs'

export default {
  name: 'ECharts',
  name: 'WasteGasRealChart',
  components: {
    PublicDataStandard
  },
@@ -101,11 +101,14 @@
        timeStart: ''
      },

      res: [],

      // 实时数据列表
      EXHRealTimeDataList: [],
      bzz: null,
      exhbzz: [],
      exhbzzList: []
      exhbzzList: [],
      biaozhuiz: ''
    }
  },
  mounted () {
@@ -114,15 +117,22 @@
    })
  },
  methods: {
    // 点击查询按钮功能
    querySearch () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      this.formInline.timeEnd = dayjs().format('YYYYMMDD HHmmss')
      this.formInline.timeStart = dayjs().subtract(3, 'minute').format('YYYYMMDD HHmmss')
      this.initEchartsData()
    },
    // 初始化数据获取echarts的options数据
    async initEchartsData () {
      const data = {
        $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM',
        $startTime: dayjs().subtract(3, 'minute').format('YYYYMMDD HHmmss'),
        $endTime: dayjs().format('YYYYMMDD HHmmss'),
        $step: 15
      }
      this.res = (await mapApi.DataItems(data)).data
      this.getRtdb15s(this.res)
    },
    // 点击查询按钮功能
    async querySearch () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      // this.formInline.timeEnd = dayjs().format('YYYYMMDD HHmmss')
      // this.formInline.timeStart = dayjs().subtract(3, 'minute').format('YYYYMMDD HHmmss')
      const data = {
        $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM',
        $startTime: this.formInline.timeEnd,
@@ -293,20 +303,22 @@
          // 临时数据
          const BBZMAPPING = [
            {
              二氧化碳: 35,
              ph: 9,
              总氮: 15,
              总磷: 0.3,
              氨氮: 3
              氮氧化物: 35,
              烟尘: 9,
              二氧化磷: 15,
              ph: 0.3
            }
          ]
          for (let m = 0; m < this.EXHRealTimeDataList.length; m++) {
            let stdValue = null
            if (this.EXHRealTimeDataList[m].name === nameList[j]) {
              for (const i in this.BBZMAPPING) {
                console.log(i)
              // for (let i in BBZMAPPING) {
              //   i++
              //   stdValue = BBZMAPPING[this.EXHRealTimeDataList[m].name]
              // }
              BBZMAPPING.forEach(item => {
                stdValue = BBZMAPPING[this.EXHRealTimeDataList[m].name]
              }
              })

              ydata = {
                name: nameList[j],
@@ -339,6 +351,7 @@
      for (let i = 0; i < ydatas.length; i++) {
        const zdcbcolor = ydatas[i].zdcbcolor
        const bz = ydatas[i].bzz
        // console.log(bz)
        let obj
        if (bz) {
          obj = {
@@ -349,15 +362,14 @@
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (let i = 0; i < this.bzzList.length; i++) {
                    if (this.bzzList[i].name === c.seriesName) {
                      biaozhuiz = this.bzzList[i].bzhui
                  for (let i = 0; i < this.exhbzzList.length; i++) {
                    if (this.exhbzzList[i].name === c.seriesName) {
                      this.biaozhuiz = this.exhbzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
                  if (c.value[1] > this.biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > biaozhuiz * 0.9) {
                  } else if (c.value[1] > this.biaozhuiz * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
@@ -372,7 +384,6 @@
                  show: false
                }
              }

            },
            type: 'line',
            data: ydatas[i].data,
@@ -406,7 +417,19 @@
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  return '#33c95f'
                  // let biaozhuiz
                  // for (let i = 0; i < this.exhbzzList.length; i++) {
                  //   if (this.exhbzzList[i].name === c.seriesName) {
                  //     this.biaozhuiz = this.exhbzzList[i].bzhui
                  //   }
                  // }
                  if (c.value[1] > 20) {
                    return zdcbcolor
                  } else if (c.value[1] > 15 * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
@@ -417,13 +440,11 @@
                  show: false
                }
              }

            },
            type: 'line',
            data: ydatas[i].data
          }
        }

        if (ydatas[i].name === '氮氧化物' || ydatas[i].name === '废气') {
          obj.yAxisIndex = 1
        }

 src/components/BaseNav/WasteWater/DayData.vue

@@ -110,7 +110,7 @@
      formInline: {
        region: '',
        timeStart: '',
        timeEnd: ''
        timeEnd: dayjs().format('YYYY-MM-DD')
      },
      timeStart: '',
      timeEnd: '',
@@ -125,16 +125,16 @@
    this.$nextTick(() => {
      this.draw24Chart()
    })
    this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
    this.formInline.timeStart = dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss')
    this.formInline.timeEnd = dayjs().format('YYYY-MM-DD')
    this.formInline.timeStart = dayjs().subtract(1, 'month').format('YYYY-MM-DD')
    this.timeEnd = dayjs().format('YYYY-MM-DD')
    this.timeStart = dayjs().subtract(1, 'month').format('YYYY-MM-DD')
  },
  methods: {
    async draw24Chart () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
      this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss')
      this.formInline.timeEnd = dayjs().format('YYYY-MM-DD')
      this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD')
      const data = {
        onLineMonEmissPointId: 23,
        monItemId: 28,
@@ -581,6 +581,7 @@
        series: serLists
      }
      this.chart.setOption(option)
      window.onresize = this.chart.resize
    }
  }
}

 src/components/BaseNav/WasteWater/Detail.vue

@@ -1,9 +1,5 @@
<template>
  <div class="detail" style="width: 5.5rem">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
      <span class="time-select">{{ timeStart }}——{{ timeEnd }}</span>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%;"
@@ -20,7 +16,7 @@
            label="监测值">
        </el-table-column>
        <el-table-column
            prop="StdValue"
            prop="LabMonValue"
            label="标准值">
        </el-table-column>
      </el-table-column>
@@ -31,7 +27,7 @@
            label="监测值">
        </el-table-column>
        <el-table-column
            prop="StdValue"
            prop="LabMonValue"
            label="标准值">
        </el-table-column>
      </el-table-column>
@@ -42,7 +38,7 @@
            label="监测值">
        </el-table-column>
        <el-table-column
            prop="StdValue"
            prop="LabMonValue"
            label="标准值">
        </el-table-column>
      </el-table-column>
@@ -53,7 +49,7 @@
            label="监测值">
        </el-table-column>
        <el-table-column
            prop="StdValue"
            prop="LabMonValue"
            label="标准值">
        </el-table-column>
      </el-table-column>
@@ -77,61 +73,20 @@

<script>

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

export default {
  name: 'Detail',
  components: {
    PublicDataStandard
    // PublicDataStandard
  },
  data () {
    return {
      tableData: [],
      // tab栏传递接收数据
      dataStandard: [
        {
          current: {
            name: '氮氧化物',
            val: 29.93
          },
          standard: {
            name: '标准',
            val: 100
          }
        },
        {
          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
          }
        }],
      timeEnd: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      timeStart: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss')
    }
@@ -152,6 +107,12 @@
      const result = (await mapApi.getQueryLabMonData(data)).Result.DataInfo
      // console.log(result)
      this.tableData = result
      for (let i = 0; i < result.length; i++) {
        console.log(result[i].LabMonValue)
        if (result[i].LabMonValue === '0') {
          return '-'
        }
      }
    }
  }
}
@@ -166,21 +127,4 @@
/*/deep/ .el-table {*/
/*  border: none !important;*/
/*}*/

.tab-scroll {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.time-select {
  cursor: pointer;
  padding: 5px;
  border: 1px solid #2b87c8;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  font-size: 11px;
  width: 280px;
}
</style>

 src/components/BaseNav/WasteWater/HourData.vue

@@ -87,8 +87,8 @@
          }
        }],
      formInline: {
        timeStart: '',
        timeEnd: ''
        timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH'),
        timeEnd: dayjs().format('YYYY-MM-DD HH')
      },
      timeEnd: dayjs().format('YYYY-MM-DD HH'),
      timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH'),
@@ -106,8 +106,8 @@
  methods: {
    async draw24Chart () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
      this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss')
      this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH')
      this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH')
      const data = {
        onLineMonEmissPointId: 23,
        monItemId: 28,
@@ -586,6 +586,7 @@
        series: serLists
      }
      this.chart.setOption(option)
      window.onresize = this.chart.resize
    }
  }
}

 src/components/BaseNav/WasteWater/RealData.vue

@@ -1,37 +1,28 @@
<template>
  <div id="Tab">
  <div class="echarts-box">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
      <span class="time-select">{{ formInline.timeStart }}——{{ formInline.timeEnd }}</span>
      <span class="time-select">{{ startTime }}—{{ endTime }}</span>
    </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>
          <span>采样点数:</span>
          <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="echarts-form">
      <span class="demonstration">开始时间：</span>
      <el-date-picker
          v-model="startTime"
          type="datetime">
      </el-date-picker>
      <span class="demonstration">结束时间：</span>
      <el-date-picker
          v-model="endTime"
          type="datetime">
      </el-date-picker>
      <span class="demonstration">采样点数：</span>
      <el-select v-model="region" placeholder="请选择" style="width: 80px">
        <el-option v-for="(item,index) in regionList" :key="index" :label="item" :value="item"></el-option>
      </el-select>
      <el-button @click="querySearch()">查询</el-button>
      <el-button>明细表</el-button>
    </div>
    <div class="echarts-chart">
      <div style="width:5rem;height:1.5rem;" ref="echarts"></div>
    </div>
  </div>
@@ -39,10 +30,11 @@

<script>

import PublicDataStandard from '@/components/BaseNav/PublicDataStandard'
import mapApi from '@/api/mapApi'
import 'dayjs/locale/es'
import dayjs from 'dayjs'

import mapApi from '../../../api/mapApi'
import PublicDataStandard from '../PublicDataStandard'

export default {
  name: 'ECharts',
@@ -51,6 +43,7 @@
  },
  data () {
    return {
      a: '',
      // tab栏传递接收数据
      dataStandard: [
        {
@@ -93,27 +86,15 @@
            val: null
          }
        }],

      // echarts的数据设置
      myChart: null,

      // 开始 /结束 时间 和采样点值的绑定值数据
      formInline: {
        region: '',
        timeStart: '',
        timeEnd: ''
      formData: {
        startTime: '',
        endTime: ''
      },
      // timeStart:,
      // timeEnd:'',

      // echarts的options数据传入
      echartsOptions: {
        legend: [],
        ydatas: [],
        yname: ' 浓度(mg/m³)'
      },

      // 实时数据列表
      startTime: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss'),
      endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      region: '25',
      regionList: [25, 50, 75, 100],
      datatype: 1,
      RealTimeDataList: [],
      bzz: null,
      bzzList: []
@@ -121,56 +102,63 @@
  },
  mounted () {
    this.$nextTick(() => {
      this.myChart = this.$echarts.init(this.$refs.echarts)
      this.initEchartsData()
    })
  },
  methods: {
    // 点击查询按钮功能
    onSubmit () {
      this.DrawEXHRealTimeDateChart()
    },
    // 初始化数据获取echarts的options数据
    async initEchartsData () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
      this.formInline.timeStart = dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss')
    // 查询搜索功能
    async querySearch () {
      const data = {
        $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM',
        $startTime: this.formInline.timeEnd,
        $endTime: this.formInline.timeStart,
        $startTime: this.formData.startTime,
        $endTime: this.formData.endTime,
        $step: 15
      }
      // console.log(data)
      const result = (await mapApi.getDataItems(data)).data
      // console.log(result)
      this.dealWithData(result)
    },
    async initEchartsData () {
      const data = {
        $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM',
        $startTime: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss'),
        $endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        $step: 15
      }
      const result = (await mapApi.getDataItems(data)).data
      this.getRtdb15s(result)
      // this.result = result
      this.dealWithData(result)
    },
    // echarts数据处理
    getRtdb15s (res) {
      if (res.length > 0) {
    // 数据处理
    dealWithData (result) {
      // 接收数据正确 进行数据处理
      if (result.length > 0) {
        // 处理数据开始
        const d = res
        const nameList = [] // 存放图例
        // 数据类型// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]}
        let data = {}
        // 存放data的数组
        let datalist
        // var bzh = []
        const d = result
        const nameList = []

        let data
        let datalist

        // 数据判断
        for (let i = 0; i < d.length; i++) {
          if (d[i].ErrorMessage != null) {
            continue
          }
          // 临时name数据
          const nameListTemp = [

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

          const name = nameListTemp[0][d[i].UnionTagCode]
          const name = tempList[0][d[i].UnionTagCode]

          if (nameList.length === 0) {
            nameList.push(name)
@@ -183,17 +171,10 @@
              name: name,
              data: [data]
            }

            this.RealTimeDataList.push(datalist)
            // console.log(this.RealTimeDataList)

            // bzh.push(d[i].StdValue);
          } else if (nameList.indexOf(name) < 0) {
            nameList.push(name)
            // bzh.push(d[i].StdValue);

            const newdate = new Date(d[i].ReadTime)

            data = {
              name: name,
              value: [newdate, d[i].TagValue]
@@ -206,7 +187,6 @@
          } else if (i === d.length - 1) {
            if (nameList.indexOf(name) < 0) {
              nameList.push(name)
              // bzh.push(d[i].StdValue);
              const newdate = new Date(d[i].ReadTime)
              data = {
                name: name,
@@ -223,7 +203,7 @@
                name: name,
                value: [newdate, d[i].TagValue]
              }
              for (var k = 0; k < this.RealTimeDataList.length; k++) {
              for (let k = 0; k < this.RealTimeDataList.length; k++) {
                if (this.RealTimeDataList[k].name === name) {
                  this.RealTimeDataList[k].data.push(data)
                }
@@ -242,34 +222,28 @@
            }
          }
        }

        const divid = 'mycharteff_second'
        const title = name

        const lengList = []
        let objTemp = []
        // console.log(objTemp)
        let objTemp

        for (let l = 0; l < nameList.length; l++) {
          let obj
          let iconurl
          if (nameList[l] === 'ph') {
            iconurl = 'image://../assets/imgs/legend/WenDu.png'
          let IconUrl
          if (nameList[l] === 'pH') {
            IconUrl = 'image://../assets/imgs/legend/WenDu.png'
          } else if (nameList[l] === '氮氧化物') {
            iconurl = 'image://../assets/imgs/legend/NOX.png'
            IconUrl = 'image://../assets/imgs/legend/NOX.png'
          } else if (nameList[l] === '烟尘') {
            iconurl = 'image://../assets/imgs/legend/zongdan.png'
            IconUrl = 'image://../assets/imgs/legend/zongdan.png'
          } else if (nameList[l] === '二氧化磷') {
            iconurl = 'image://../assets/imgs/legend/YanChen.png'
            IconUrl = 'image://../assets/imgs/legend/YanChen.png'
          } else if (nameList[l] === '二氧化碳') {
            iconurl = 'image://../assets/imgs/legend/VOCs.png'
            IconUrl = 'image://../assets/imgs/legend/VOCs.png'
          }

          if (nameList[l] === '废水' || nameList[l] === '废水流量') { // 将废水流量排到数组最后
            // eslint-disable-next-line no-const-assign
            objTemp = {
              name: nameList[l],
              icon: iconurl,
              icon: IconUrl,
              textStyle: {
                color: '#ccc'
              },
@@ -279,7 +253,7 @@
          } else {
            obj = {
              name: nameList[l],
              icon: iconurl,
              icon: IconUrl,
              textStyle: {
                color: '#ccc'
              },
@@ -288,52 +262,54 @@
            }
            lengList.push(obj)
          }
          // console.log(lengList)
        }
        lengList.push(objTemp)

        const legend = lengList
        // const xdata = dateList.reverse();
        const ydatas = []

        // console.log(nameList)
        for (let j = 0; j < nameList.length; j++) {
          let zdcbcolor, zxcolor
          if (nameList[j] === 'ph') {
          if (nameList[j] === 'COD') {
            zdcbcolor = 'red'
            zxcolor = '#f206ff'
          } else if (nameList[j] === '烟尘') {
            zdcbcolor = 'red'
            zxcolor = '#e0ffff'
          } else if (nameList[j] === '氮氧化物') {
            zxcolor = '#fff21c'
          } else if (nameList[j] === '氨氮') {
            zdcbcolor = 'red'
            zxcolor = '#00B0F0'
          } else if (nameList[j] === '二氧化碳') {
            zdcbcolor = 'red'
            zxcolor = '#9ACD32'
          } else if (nameList[j] === '二氧化磷') {
          } else if (nameList[j] === '总磷') {
            zdcbcolor = 'red'
            zxcolor = '#f48183'
          } else if (nameList[j] === '总氮') {
            zdcbcolor = 'red'
            zxcolor = '#e0ffff'
          } else {
            zdcbcolor = 'red'
            zxcolor = '#9ACD32'
          }
          let ydata

          // 临时数据
          const BBZMAPPING = [
            {
              COD: 35,
              ph: 9,
              总氮: 15,
              总磷: 0.3,
              氨氮: 3
            }
          ]
          const BBZMAPPING = {
            COD: 35,
            pH: 9,
            总氮: 15,
            总磷: 0.3,
            氨氮: 3
          }
          for (let m = 0; m < this.RealTimeDataList.length; m++) {
            let stdValue = null
            if (this.RealTimeDataList[m].name === nameList[j]) {
              // for (let p in BBZMAPPING) {
              //   stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
              // }
              BBZMAPPING.forEach((item) => {
              for (const p in BBZMAPPING) {
                // console.log('p' + p)
                this.a = p
                stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
              })
              }
              // console.log(stdValue)
              this.bzz = {
                name: nameList[j],
                bzhui: stdValue
              }
              ydata = {
                name: nameList[j],
                data: this.RealTimeDataList[m].data,
@@ -341,30 +317,26 @@
                zxcolor: zxcolor,
                bzz: stdValue
              }
              this.bzz = {
                name: nameList[j],
                bzhui: stdValue
              }
              // console.log(stdValue)
              this.bzzList.push(this.bzz)
              ydatas.push(ydata)
            }
          }
        }
        const yname = '浓度(mg/l)'
        this.DrawRealTimeDateChart(divid, title, legend, ydatas, yname)
        //
        // this.IntervalRealTimeDate(id, unionTagCodeList, BBZMAPPING)
        this.IntervalRealTimeDate()
        this.DrawRealTimeDateChart(legend, ydatas, yname)
      }
    },
    // 获取数据用于echarts图表绘制
    DrawRealTimeDateChart (id, title, legend, ydatas, yname) {
      this.myChart = this.$echarts.init(this.$refs.echarts)

    // 指标根据标准值判断，如果大于标准值是红色
    // 标准线绘制
    DrawRealTimeDateChart (legend, ydatas, yname) {
      const serLists = []
      let dataUnit
      const bzzList = this.bzzList
      for (let i = 0; i < ydatas.length; i++) {
        const zdcbcolor = ydatas[i].zdcbcolor
        const bz = ydatas[i].bzz
        // console.log(bz)
        let obj
        if (bz) {
          obj = {
@@ -376,9 +348,9 @@
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (var i = 0; i < this.bzzList.length; i++) {
                    if (this.bzzList[i].name === c.seriesName) {
                      biaozhuiz = this.bzzList[i].bzhui
                  for (let i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name === c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
@@ -398,7 +370,6 @@
                  show: false
                }
              }

            },
            type: 'line',
            data: ydatas[i].data,
@@ -408,15 +379,34 @@
                label: {
                  normal: {
                    position: 'end',
                    formatter: ''// ydatas[i].name+'标准值' //+'{c}'
                    formatter: bz
                  }
                },
                name: '标准值',
                yAxis: bz,
                lineStyle: {
                  color: ydatas[i].zxcolor,
                  type: 'dashed',
                  width: 2
                  normal: {
                    type: 'dashed',
                    width: 2,
                    // color: ydatas[i].zxcolor,
                    // color: '#4ec99c',
                    color: function (c) {
                      console.log(c)
                      let biaozhuiz
                      for (let 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'
                      } else {
                        return '#33c95f'
                      }
                    }
                  }
                }
              }
              ]
@@ -425,26 +415,36 @@
        } else {
          obj = {
            name: ydatas[i].name,
            // symbol:'circle', // 折点形状
            // symbolSize: 3,   //大小
            smooth: true, // 直线 ，true 为曲线
            symbol: 'circle', // 折点形状
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  return '#33c95f'
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 2
                },
                // borderColor:'black',  //折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }

            },
            // itemStyle: {
            //   normal: {
            //     color: function (c) { // 根据value 显示不同的折点颜色
            //       for (let i = 0; i < this.bzzList.length; i++) {
            //         let biaozhuizs
            //         if (this.bzzList[i].name === c.seriesName) {
            //           biaozhuizs = this.bzzList[i].bzhui
            //         }
            //         console.log(biaozhuizs)
            //       }
            //       if (c.value[1] > 9) {
            //         return zdcbcolor
            //       } else {
            //         return '#33c95f'
            //       }
            //     },
            //     lineStyle: { // 折线的颜色
            //       color: ydatas[i].zxcolor,
            //       width: 5
            //     },
            //     borderColor: 'black', // 折点边框的颜色
            //     label: { // 显示值
            //       show: false
            //     }
            //   }
            // },
            type: 'line',
            data: ydatas[i].data
          }
@@ -453,16 +453,17 @@
        if (ydatas[i].name === '废气流量' || ydatas[i].name === '废气') {
          obj.yAxisIndex = 1
        }
        // 临时
        const datatype = 1
        if (datatype === 1) {
          dataUnit = '流量(m³/d)'
        } else {
          dataUnit = '流量(m³/h)'
        }
        serLists.push(obj)
      }
      const option = {

      let dataUnit = ''
      if (this.datatype === 1) {
        dataUnit = '流量(m³/d)'
      } else {
        dataUnit = '流量(m³/h)'
      }

      const options = {
        /*  title: {
              text: title,
          }, */
@@ -477,19 +478,19 @@
          formatter: function (params) {
            let s = params[0].name + '<br />'
            for (let i = 0; i < params.length; i++) {
              // var name = params[i].name
              // let name = params[i].name
              // 图表title名称
              const seriesName = params[i].seriesName
              // 值
              const value = params[i].value[1]

              // var valueFliter = formatter(value)
              // const valueFliter = formatter(value)
              const valueFliter = parseFloat(value).toFixed(2)

              let maker = params[i].marker
              let colo = ''
              switch (seriesName) {
                case 'ph':
                case 'pH':
                  colo = '#f206ff'
                  break
                case '氮氧化物':
@@ -514,15 +515,14 @@
            return s
          }
        },
        toolbox: {
        toolbox: { // 打印等工具
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          top: '20%',
          bottom: '15%'
        grid: { // 网格
          top: '20%'
        },
        legend: {
          data: legend
@@ -624,7 +624,8 @@
        }],
        series: serLists
      }
      this.myChart.setOption(option)
      this.myChart.setOption(options)
      window.onresize = this.myChart.resize
    },
    // 定时器 根据时间间隔请求数据
    IntervalRealTimeDate (id, unionTagCodeList, BBZMAPPING) {
@@ -639,144 +640,60 @@
</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;

  > i {
    color: #ffffff;
  }
}

.tab-scroll {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .time-select {
    //margin: 0 10px;
    cursor: pointer;
    padding: 5px;
    border: 1px solid #2b87c8;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    font-size: 11px;
    width: 280px;
  }
}

.animation {
  //width: 600px;
  //height: 0.06rem;
  .infomation {
    padding: 5px 10px;
  }
}

.form-echrts {
  width: 100%;
  border-top: 1px solid #396d83;
  //margin: 10px 10px 10px 10px;
  .from-search {
.echarts-box {
  .tab-scroll {
    display: flex;
    //justify-content: space-evenly;
    padding: 15px 0;
    align-items: center;
    justify-content: space-between;

    > div {
      margin-left: 10px
    .time-select {
      cursor: pointer;
      padding: 5px;
      border: 1px solid #2b87c8;
      border-radius: 4px;
      text-align: center;
      color: #fff;
      font-size: 11px;
      width: 280px;
    }
  }

    .pickerMon {
      display: flex;
  .echarts-form {
    height: 0.3rem;
    line-height: 0.3rem;

      > div:first-child {
        margin-right: 10px;
      }

      .pickerData {
        flex: 1;
        display: flex;

        > span {
          line-height: 22px;
          margin-right: 15px;
        }

        .pickerTable {
          margin-left: 3px;
        }
      }
    }

    /deep/ .el-date-editor--datetime {
      width: 100%;
    .demonstration {
      color: #00fff6;
      font-size: 12px;
      margin-left: 10px;
    }

    /deep/ .el-input__inner {
      position: relative;
      width: 140px;
      height: 0.15rem;
      background-color: #2e4967;
      color: #fff;
      font-size: 12px;
      height: 24px;
      padding: 0;
      border-color: #00fff6;
      text-align: center;
      z-index: 9999;
      //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;
    .el-button {
      margin: 0 15px;
      width: 0.3rem;
      height: 0.15rem;
      display: inline-block;
      background-color: #2e4967;
      border: none;
      border-radius: 6px;
      width: 80px;
      height: 22px;
    }

    input::-webkit-calendar-picker-indicator {
      opacity: 100;
    }

    .detailbtn {
      background-color: #2e4967;
      color: #fff;
      font-size: 12px;
      padding: 0;
      border-color: #00fff6;
      text-align: center;
      padding: 0 7px;
      line-height: 20px;
      border-radius: 4px;
      margin-right: 6px;
    }

  }

  .el-dialog-div {
    //height: 50vh!important;
    overflow: auto;
    //overflow: hidden;
  }

  #echarts {
    margin: 0;
    padding: 0;
    //height: 3rem;
    //border: 1px solid #396d83;
    //margin: 10px 10px 10px 10px;
  /deep/ .el-icon-time:before {
    content: " ";
  }
}
</style>