废水图表实时数据展示

chenzeping

2021-04-20 06a11cbc631b4e362cef0e3c487d680f2c0266a7

废水图表实时数据展示

 src/components/BaseNav/WasteWater/PublicBorder.vue

New file
@@ -0,0 +1,62 @@
<template>
  <div class="public-border">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</template>

<script>
export default {
  name: 'PublicBorder'
}
</script>

<style lang="less" scoped>
.public-border {
  position: relative;
  background-color: @background-color;
  border: 1px solid #396d83;
}

.public-border span:nth-child(1) {
  position: absolute;
  left: -1px;
  top: -1px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 1px 0 0 1px;
}

.public-border span:nth-child(2) {
  position: absolute;
  right: -1px;
  top: -1px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 1px 1px 0 0;
}

.public-border span:nth-child(3) {
  position: absolute;
  right: -1px;
  bottom: -1px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 0 1px 1px 0;
}

.public-border span:nth-child(4) {
  position: absolute;
  left: -1px;
  bottom: -1px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 0 0 1px 1px;
}
</style>

 src/components/BaseNav/WasteWater/PublicForm.vue

New file
@@ -0,0 +1,144 @@
<template>
  <div class="public-form">
    <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>
</template>

<script>
export default {
  name: 'PublicForm',
  data () {
    return {
      formInline: {
        timeStart: '',
        timeEnd: ''
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('onsubmit')
    }
  }
}
</script>

<style lang="less" scoped>
.public-form {
  width: 100%;
  border-top: 1px solid #396d83;
  //margin: 10px 10px 10px 10px;
  .from-search {
    display: flex;
    padding: 5px;

    > div {
      margin-left: 10px
    }

    .pickerMon {
      display: flex;

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

      .pickerData {
        flex: 1;
        display: flex;

        > span {
          line-height: 22px
        }

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

    /deep/ .el-date-editor--datetime {
      width: 100%;
    }

    /deep/ .el-input__inner {
      position: relative;
      width: 140px;
      background-color: #2e4967;
      color: #fff;
      font-size: 12px;
      height: 24px;
      padding: 0;
      border-color: #00fff6;
      text-align: center;
      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;
      background-color: #2e4967;
      border: none;
      border-radius: 6px;
      width: 80px;
      height: 22px;
    }

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

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

  }

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

 src/components/BaseNav/WasteWater/RealData.vue

@@ -52,7 +52,7 @@
      dataStandard: [
        {
          current: {
            name: '氮氧化物1',
            name: '氮氧化物',
            val: 29.93
          },
          standard: {
@@ -108,10 +108,10 @@
        yname: ' 浓度(mg/m³)'
      },

      JSONTimeData: {
        id: 21,
        unionTagCodeList: []
      }
      // 实时数据列表
      RealTimeDataList: [],
      bzz: null,
      bzzList: []
    }
  },
  mounted () {
@@ -120,6 +120,10 @@
    })
  },
  methods: {
    // 点击查询按钮功能
    onSubmit () {
      this.DrawEXHRealTimeDateChart()
    },
    // 初始化数据获取echarts的options数据
    async initEchartsData () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
@@ -132,547 +136,253 @@
        $step: 15
      }
      const result = (await mapApi.DataItems(data)).data
      console.log(result)

      // this.hash(result)
      // this.hashtime(result)
      // this.dealwithData(result)
      this.DrawEXHRealTimeDateChart()
      this.myChart.hideLoading()
      this.getRtdb15s(result)
    },
    // 数据处理
    dealwithData (result) {
      // 处理数据开始
      const d = result
      // const nameList = [] // 存放图例
    // echarts数据处理
    getRtdb15s (res) {
      if (res.length > 0) {
        // 处理数据开始
        const d = res
        const nameList = [] // 存放图例
        // 数据类型// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]}
        let data = {}
        // 存放data的数组
        let datalist
        // var bzh = []

      let data // 数据类型// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]}
      // const datalist // 存放data的数组
      // const bzh = []
      for (let i = 0; i < d.length; i++) {
        const name = d[i].UnionTagCode
        const newdate = d[i].ReadTime
        data = {
          name: name,
          value: [newdate, d[i].TagValue]
        for (let i = 0; i < d.length; i++) {
          if (d[i].ErrorMessage != null) {
            continue
          }
          // 临时name数据
          const nameListTemp = [
            {
              'TJIP45.lscl2tbAIA-10505-1': '氮氧化物',
              'TJIP45.lscl2tbAIA-10505-2': '烟尘',
              'TJIP45.lscl2tb552AISA11202A': '二氧化磷',
              'TJIP45.lscl2tb552AISA11201B': 'ph',
              'TJIP45.lscl2tb552AI10710': '二氧化碳'
            }
          ]

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

          if (nameList.length === 0) {
            nameList.push(name)
            const newdate = new Date(d[i].ReadTime)
            data = {
              name: name,
              value: [newdate, d[i].TagValue]
            }
            datalist = {
              name: name,
              data: [data]
            }

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

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

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

            data = {
              name: name,
              value: [newdate, d[i].TagValue]
            }
            datalist = {
              name: name,
              data: [data]
            }
            this.RealTimeDataList.push(datalist)
          } else if (i === d.length - 1) {
            if (nameList.indexOf(name) < 0) {
              nameList.push(name)
              // bzh.push(d[i].StdValue);
              const newdate = new Date(d[i].ReadTime)
              data = {
                name: name,
                value: [newdate, d[i].TagValue]
              }
              datalist = {
                name: name,
                data: [data]
              }
              this.RealTimeDataList.push(datalist)
            } else {
              const newdate = new Date(d[i].ReadTime)
              data = {
                name: name,
                value: [newdate, d[i].TagValue]
              }
              for (var k = 0; k < this.RealTimeDataList.length; k++) {
                if (this.RealTimeDataList[k].name === name) {
                  this.RealTimeDataList[k].data.push(data)
                }
              }
            }
          } else {
            const newdate = new Date(d[i].ReadTime)
            data = {
              name: name,
              value: [newdate, d[i].TagValue]
            }
            for (let k = 0; k < this.RealTimeDataList.length; k++) {
              if (this.RealTimeDataList[k].name === name) {
                this.RealTimeDataList[k].data.push(data)
              }
            }
          }
        }
        console.log(data)
        // for (var k = 0; k < RealTimeDataList.length; k++) {
        //   if (RealTimeDataList[k].name == name) {
        //     RealTimeDataList[k].data.push(data)
        //   }
        // }

        const divid = 'mycharteff_second'
        const title = name

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

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

          if (nameList[l] === '废水' || nameList[l] === '废水流量') { // 将废水流量排到数组最后
            // eslint-disable-next-line no-const-assign
            objTemp = {
              name: nameList[l],
              icon: iconurl,
              textStyle: {
                color: '#ccc'
              },
              itemWidth: 20,
              itemHeight: 5
            }
          } else {
            obj = {
              name: nameList[l],
              icon: iconurl,
              textStyle: {
                color: '#ccc'
              },
              itemWidth: 20,
              itemHeight: 5
            }
            lengList.push(obj)
          }
          // console.log(lengList)
        }
        lengList.push(objTemp)

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

        for (let j = 0; j < nameList.length; j++) {
          let zdcbcolor, zxcolor
          if (nameList[j] === 'ph') {
            zdcbcolor = 'red'
            zxcolor = '#f206ff'
          } else if (nameList[j] === '烟尘') {
            zdcbcolor = 'red'
            zxcolor = '#e0ffff'
          } else if (nameList[j] === '氮氧化物') {
            zdcbcolor = 'red'
            zxcolor = '#00B0F0'
          } else if (nameList[j] === '二氧化碳') {
            zdcbcolor = 'red'
            zxcolor = '#9ACD32'
          } else if (nameList[j] === '二氧化磷') {
            zdcbcolor = 'red'
            zxcolor = '#f48183'
          }
          let ydata
          // 临时数据
          const BBZMAPPING = [
            {
              COD: 35,
              废水流量: null,
              总氮: 15,
              总磷: 0.3,
              黯淡: 3
            }
          ]
          for (let m = 0; m < this.RealTimeDataList.length; m++) {
            let stdValue = null
            if (this.RealTimeDataList[m].name === nameList[j]) {
              // for (let p in BBZMAPPING) {
              //   stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
              // }
              BBZMAPPING.forEach((item) => {
                stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
              })
              ydata = {
                name: nameList[j],
                data: this.RealTimeDataList[m].data,
                zdcbcolor: zdcbcolor,
                zxcolor: zxcolor,
                bzz: stdValue
              }
              this.bzz = {
                name: nameList[j],
                bzhui: stdValue
              }
              this.bzzList.push(this.bzz)
              ydatas.push(ydata)
            }
          }
        }
        const yname = '浓度(mg/l)'
        this.DrawRealTimeDateChart(divid, title, legend, ydatas, yname)
        //
        // this.IntervalRealTimeDate(id, unionTagCodeList, BBZMAPPING)
        this.IntervalRealTimeDate()
      }
    },
    // hash (result) {
    //   // const hash = []
    //   // for (let i = 0; i < result.length; i++) {
    //   //   if (hash.indexOf(result[i].UnionTagCode) === -1) {
    //   //     hash.push(result[i].UnionTagCode)
    //   //   }
    //   // }
    //   // console.log(hash)
    //   // this.JSONTimeData.unionTagCodeList = hash
    //   // var lengList = []
    //   var lengList = result
    //   var objTemp
    //
    //   for (var l = 0; l < lengList.length; l++) {
    //     var obj
    //     var iconurl
    //     if (lengList[l] == 'COD') {
    //       iconurl = 'image://../assets/imgs/legend/SO2.png'
    //     } else if (nameList[l] == '氨氮') {
    //       iconurl = 'image://../assets/imgs/legend/NOX.png'
    //     } else if (nameList[l] == '总磷') {
    //       iconurl = 'image://../assets/imgs/legend/YanChen.png'
    //     } else if (nameList[l] == '总氮') {
    //       iconurl = 'image://../assets/imgs/legend/zongdan.png'
    //     } else {
    //       iconurl = 'image://../assets/imgs/legend/VOCs.png'
    //     }
    //
    //     if (nameList[l] == '废水' || nameList[l] == '废水流量') { // 将废水流量排到数组最后
    //       objTemp = {
    //         name: nameList[l],
    //         icon: iconurl,
    //         textStyle: {
    //           color: '#ccc'
    //         },
    //         itemWidth: 20,
    //         itemHeight: 5
    //       }
    //     } else {
    //       obj = {
    //         name: nameList[l],
    //         icon: iconurl,
    //         textStyle: {
    //           color: '#ccc'
    //         },
    //         itemWidth: 20,
    //         itemHeight: 5
    //       }
    //       lengList.push(obj)
    //     }
    //   }
    //   lengList.push(objTemp)
    // },
    hashtime (result) {
      const hashtime = []
      for (let i = 0; i < result.length; i++) {
        if (hashtime.indexOf(result[i].ReadTime) === -1) {
          hashtime.push(result[i].ReadTime)
        }
      }
      console.log(hashtime)
    },
    DrawEXHRealTimeDateChart () {
      // 赋值的数据
      // var legend = this.echartsOptions.legend
      // var ydatas = this.echartsOptions.ydatas
      const yname = this.echartsOptions.yname
      const ydatas = [
        {
          name: '氮氧化物',
          zdcbcolor: '#00B0F0',
          zxcolor: '#00B0F0',
          bzz: 50,
          data: [{
            name: '氮氧化物',
            value: ['2021/04/13 09:18:19', 39.51431]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:18:34', 38.76508]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:18:49', 37.57471]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:19:04', 36.3796]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:19:19', 36.10718]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:19:34', 35.81126]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:19:49', 35.9184]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:20:04', 36.08839]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:20:19', 36.3718]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:20:34', 36.8966]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:20:49', 37.3998]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:21:04', 37.11937]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:21:19', 36.12424]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:21:34', 34.99567]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:21:49', 34.48063]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:22:04', 34.62222]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:22:19', 34.84583]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:22:34', 35.80923]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:22:49', 35.93465]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:23:04', 35.78891]
          },
          {
            name: '氮氧化物',
            value: ['2021/04/13 09:23:19', 35.54268]
          }]
        },
        {
          name: '二氧化硫',
          data: [{
            name: '二氧化硫',
            value: ['2021/04/13 09:18:19', 5.112573]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:18:34', 4.578955]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:18:49', 4.869465]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:19:04', 5.270735]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:19:19', 5.355475]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:19:34', 5.242907]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:19:49', 5.230558]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:20:04', 5.262951]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:20:19', 5.268744]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:20:34', 5.159671]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:20:49', 4.955352]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:21:04', 5.110546]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:21:19', 5.235723]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:21:34', 5.443502]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:21:49', 5.708939]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:22:04', 5.882327]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:22:19', 6.017494]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:22:34', 5.410021]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:22:49', 5.379694]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:23:04', 5.551433]
          },
          {
            name: '二氧化硫',
            value: ['2021/04/13 09:23:19', 5.819743]
          }],
          zdcbcolor: 'red',
          zxcolor: '#fff21c',
          bzz: 50
        },
        {
          name: '废气流量',
          data: [{
            name: '废气流量',
            value: ['2021/04/13 09:18:19', 5.012617]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:18:34', 4.992213]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:18:49', 5.026886]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:19:04', 5.052861]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:19:19', 5.038826]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:19:34', 5.062339]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:19:49', 5.071915]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:20:04', 5.053693]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:20:19', 5.03562]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:20:34', 5.043983]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:20:49', 5.059231]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:21:04', 5.042176]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:21:19', 5.028253]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:21:34', 5.024891]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:21:49', 5.01542]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:22:04', 5.025787]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:22:19', 5.038269]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:22:34', 5.01441]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:22:49', 5.010105]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:23:04', 5.012341]
          },
          {
            name: '废气流量',
            value: ['2021/04/13 09:23:19', 4.996146]
          }],
          zdcbcolor: 'red',
          zxcolor: '#9ACD32',
          bzz: null
        },
        {
          name: '烟尘',
          data: [{
            name: '烟尘',
            value: [['2021/04/13 09:18:19', 0.8297127]]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:18:34', 0.8347292]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:18:49', 0.9218481]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:19:04', 0.913429]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:19:19', 0.9026684]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:19:34', 0.8060119]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:19:49', 0.781314]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:20:04', 0.8958074]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:20:19', 0.9093901]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:20:34', 0.8743498]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:20:49', 0.9024854]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:21:04', 0.9456897]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:21:19', 0.9747347]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:21:34', 0.9200308]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:21:49', 0.8987293]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:22:04', 0.8613345]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:22:19', 0.8747463]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:22:34', 0.8883187]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:22:49', 0.881333]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:23:04', 0.9142911]
          },
          {
            name: '烟尘',
            value: ['2021/04/13 09:23:19', 0.9569058]
          }],
          zdcbcolor: 'red',
          zxcolor: '#f48183',
          bzz: 10
        }]
      // const legend = [
      //   // data: 'legend'
      //   {
      //     name: '氮氧化物',
      //     icon: 'image://../assets/imgs/legend/NOX.png',
      //     textStyle: { color: '#ccc' },
      //     itemWidth: 20,
      //     itemHeight: 15
      //   },
      //   {
      //     icon: 'image://../assets/imgs/legend/SO2.png',
      //     itemHeight: 5,
      //     itemWidth: 20,
      //     name: '二氧化硫',
      //     textStyle: {
      //       color: '#CCC'
      //     }
      //   },
      //   {
      //     icon: 'image://../assets/imgs/legend/YanChen.png',
      //     itemHeight: 5,
      //     itemWidth: 20,
      //     name: '烟尘',
      //     textStyle: { color: '#ccc' }
      //   },
      //   {
      //     icon: 'image://../assets/imgs/legend/VOCs.png',
      //     itemHeight: 5,
      //     itemWidth: 20,
      //     name: '废气流量',
      //     textStyle: { color: '#ccc' }
      //   }
      // ]
      // const iconlist = ['image://../assets/imgs/legend/NOX.png', 'image://../assets/imgs/legend/VOCs.png']
      //     {
      //   icon: 'image://../assets/imgs/legend/NOX.png'
      // }, {
      //   icon: 'image://../assets/imgs/legend/SO2.png'
      // }, {
      //   icon: 'image://../assets/imgs/legend/YanChen.png'
      // },
      // {
      //   icon: 'image://../assets/imgs/legend/VOCs.png'
      // }]

      // 初始化echarts
    // 获取数据用于echarts图表绘制
    DrawRealTimeDateChart (id, title, legend, ydatas, yname) {
      this.myChart = this.$echarts.init(this.$refs.echarts)

      // echarts的series数据
      const serLists = []
      // for (var j = 0; j < ydatas.length; j++) {
      //   var len = ydatas[j].data.length
      //   for (var k = 0; k < len; k++) {
      //     var it = ydatas[j].data[k]
      //     var it2 = parseFloat(it).toFixed(2)
      //     ydatas[j].data[k] = it2
      //   }
      // }
      let dataUnit
      for (let i = 0; i < ydatas.length; i++) {
        var bz = ydatas[i].bzz
        var obj
        const zdcbcolor = ydatas[i].zdcbcolor
        const bz = ydatas[i].bzz
        let obj
        if (bz) {
          obj = {
            name: ydatas[i].name,
            smooth: true,
            // symbol:'circle', // 折点形状
            // symbolSize: 3,   //大小
            smooth: true, // 直线 ，true 为曲线
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  // var biaozhuiz
                  // for (var i = 0; i < exhbzzList.length; i++) {
                  //   if (exhbzzList[i].name == c.seriesName) {
                  //     biaozhuiz = exhbzzList[i].bzhui
                  //   }
                  // }
                  // if (c.value[1] > biaozhuiz) {
                  //   return zdcbcolor
                  // } else if (c.value[1] > biaozhuiz * 0.9) {
                  //   return '#FFA500'
                  // } else {
                  //   return '#33c95f'
                  // }
                  let biaozhuiz
                  for (var i = 0; i < this.bzzList.length; i++) {
                    if (this.bzzList[i].name === c.seriesName) {
                      biaozhuiz = this.bzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > biaozhuiz * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
@@ -683,6 +393,7 @@
                  show: false
                }
              }

            },
            type: 'line',
            data: ydatas[i].data,
@@ -702,13 +413,17 @@
                  type: 'dashed',
                  width: 2
                }
              }]
              }
              ]
            }
          }
        } else {
          obj = {
            name: ydatas[i].name,
            smooth: true,
            // symbol:'circle', // 折点形状
            // symbolSize: 3,   //大小
            smooth: true, // 直线 ，true 为曲线
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
@@ -723,18 +438,30 @@
                  show: false
                }
              }

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

        if (ydatas[i].name === '废气流量' || ydatas[i].name === '废气') {
          obj.yAxisIndex = 1
        }
        // 临时
        const datatype = 1
        if (datatype === 1) {
          dataUnit = '流量(m³/d)'
        } else {
          dataUnit = '流量(m³/h)'
        }
        serLists.push(obj)
      }
      const option = {
        tooltip: {
        /*  title: {
              text: title,
          }, */
        tooltip: { // 提示框
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
@@ -743,27 +470,41 @@
            }
          },
          formatter: function (params) {
            var s = params[0].name + '<br />'
            for (var i = 0; i < params.length; i++) {
            let s = params[0].name + '<br />'
            for (let i = 0; i < params.length; i++) {
              // var name = params[i].name
              // 图表title名称
              var seriesName = params[i].seriesName
              const seriesName = params[i].seriesName
              // 值
              var value = params[i].value[1]
              // var valueFliter = this.formatter(value)
              var maker = params[i].marker
              if (seriesName === '二氧化硫') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>'
              } else if (seriesName === '氮氧化物') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00B0F0;"></span>'
              } else if (seriesName === '烟尘') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f48183;"></span>'
              } else if (seriesName === '温度') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#F206FF;"></span>'
              } else {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>'
              const value = params[i].value[1]

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

              let maker = params[i].marker
              let colo = ''
              switch (seriesName) {
                case 'ph':
                  colo = '#f206ff'
                  break
                case '氮氧化物':
                  colo = '#00B0F0'
                  break
                case '烟尘':
                  colo = '#e0ffff'
                  break
                case '二氧化碳':
                  colo = '#9ACD32'
                  break
                case '二氧化磷':
                  colo = '#f48183'
                  break
                default:
                  colo = ''
                  break
              }
              s += maker + seriesName + ':' + value + '<br />'
              maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + colo + ';"></span>'
              s += maker + seriesName + ':' + valueFliter + '<br />'
            }
            return s
          }
@@ -775,25 +516,12 @@
          }
        },
        grid: {
          top: '20%'
          top: '20%',
          bottom: '15%'
        },
        // legend: {
        //   data: legend
        // },
        legend: [
          {
            // icon: iconlist.map(item => {
            //   return item
            // }),
            icon: 'image://../assets/imgs/legend/VOCs.png',
            itemHeight: 20,
            itemWidth: 30,
            textStyle: { color: '#ccc' },
            data: ydatas.map(item => {
              return item.name
            })
          }
        ],
        legend: {
          data: legend
        },
        dataZoom: [{
          type: 'inside',
          start: 0,
@@ -812,38 +540,39 @@
            shadowOffsetY: 2
          }
        }],
        xAxis: {
        xAxis: { // x 轴设置
          type: 'time',
          boundaryGap: false,
          axisLabel: {
          axisLabel: { // x轴全部显示
            // rotate: 30,
            margin: 6,
            interval: 0,
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: {
          splitLine: { // 网格垂直线为 虚线
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisTick: {
          axisTick: { // x 轴刻度显示
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
              width: 1// 这里是为了突出显示加上的
            }
          }
          // data: xdata
        },
        yAxis: [{
          type: 'value',
          name: yname,
          max: function (value) {
            var ma = value.max > 100 ? value.max : 100
            return parseInt(ma)
            return parseInt(value.max + 30)
          },
          axisLabel: {
            formatter: '{value}',
@@ -856,16 +585,16 @@
          },
          splitLine: {
            show: false
          },
          }, // y轴 网格线不显示,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
              width: 1// 这里是为了突出显示加上的
            }
          }
        }, {
          type: 'value',
          name: '废气流量(m3/h)',
          name: dataUnit,
          axisLabel: {
            formatter: '{value}',
            textStyle: {
@@ -877,215 +606,29 @@
          },
          splitLine: {
            show: false
          },
          }, // y轴 网格线不显示,
          // inverse: true,
          // nameLocation: 'start',
          // max:500,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
              width: 1// 这里是为了突出显示加上的
            }
          }
        }],
        series: serLists
      }
      this.myChart.setOption(option)
      window.addEventListener('resize', this.myChart.resize)
      // 显示加载动画
      this.myChart.showLoading()
      // this.IntervalEXHRealTimeDate()

      // this.myChart.on('legendselectchanged', function (params) {
      //   var StdVal = null
      //   var op = { yAxis: {} }
      //   var max_val_list = [] // 所有显示折线的标准值
      //   if (exhbzzList && exhbzzList.length > 0) {
      //     $.each(exhbzzList, function (index, item) {
      //       params.selected[item.name] ? max_val_list.push(item.bzhui) : ''
      //       if (item.name === params.name) {
      //         item.name === 'VOCs' ? StdVal = 20 : StdVal = item.bzhui
      //       }
      //     })
      //   }
      //   max_val_list = max_val_list.sort(function (a, b) { return a - b }) // 排序
      //   op.yAxis.max = function (value) {
      //     var ma = value.max < StdVal ? StdVal : Math.ceil(value.max)
      //     max_val_list ? ma = max_val_list[max_val_list.length - 1] : ''// 选择最大值
      //     return ma
      //   }
      //   myChart.setOption(op)
      // })
      // myChart.on('click', function (params) {
      //   var nowDate = new Date().Format()
      // })
    },
    // 点击查询按钮功能
    onSubmit () {
      this.DrawEXHRealTimeDateChart()
      this.myChart.hideLoading()
    // 定时器 根据时间间隔请求数据
    IntervalRealTimeDate (id, unionTagCodeList, BBZMAPPING) {
      // const interValHander = setInterval(function () {
      //   this.initEchartsData()
      console.log('间隔请求数据')
      // }, 1500)
      // console.log(interValHander)
    }
    // getRtdbFormat (res) {
    //   var data = res.collection.items
    //   var dataArray = []
    //   for (var i = 0; i < data.length; i++) {
    //     var dataFormat = {
    //       UnionTagCode: data[i].data[0].value,
    //       TagValue: parseFloat(data[i].data[1].value),
    //       ReadTime: data[i].data[3].value,
    //       ErrorMessage: data[i].data[5].value
    //     }
    //     dataArray.push(dataFormat)
    //   }
    //   return dataArray
    // },
    // 1.坐标轴实现,画实时数据
    // getRtdb15s (unionTagCodeList, startTime, endTime, step, res) {
    //   if (this.res.length > 0) {
    //     // 处理数据开始
    //     var d = res
    //     var nameList = [] // 存放图例
    //
    //     var data // 数据类型// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]}
    //     var datalist // 存放data的数组
    //     // var bzh = []
    //     for (var i = 0; i < d.length; i++) {
    //       if (d[i].ErrorMessage != null) {
    //         continue
    //       }
    //       // var name = CFG.DATA_REALTIME_TAGCODETABLE[d[i].UnionTagCode].TagName
    //
    //       if (nameList.length === 0) {
    //         nameList.push(name)
    //
    //         var newdate = new Date(this.res.ReadTime)
    //         data = {
    //           name: name,
    //           value: [newdate, this.res.TagValue]
    //         }
    //
    //         datalist = {
    //           name: name,
    //           data: [data]
    //         }
    //
    //         this.EXHRealTimeDataList.push(datalist)
    //       } else if (nameList.indexOf(name) < 0) {
    //         nameList.push(name)
    //
    //         // var newdate = new Date(d[i].ReadTime)
    //
    //         data = {
    //           name: name,
    //           value: [newdate, d[i].TagValue]
    //         }
    //         datalist = {
    //           name: name,
    //           data: [data]
    //         }
    //         this.EXHRealTimeDataList.push(datalist)
    //       } else if (i === d.length - 1) {
    //         if (nameList.indexOf(name) < 0) {
    //           nameList.push(name)
    //
    //           // var newdate = new Date(d[i].ReadTime)
    //
    //           data = {
    //             name: name,
    //             value: [newdate, d[i].TagValue]
    //           }
    //           datalist = {
    //             name: name,
    //             data: [data]
    //           }
    //           // EXHRealTimeDataList.push(datalist)
    //         } else {
    //           // var newdate = new Date(d[i].ReadTime)
    //           data = {
    //             name: name,
    //             value: [newdate, d[i].TagValue]
    //           }
    //           for (var k = 0; k < this.EXHRealTimeDataList.length; k++) {
    //             if (this.EXHRealTimeDataList[k].name === name) {
    //               this.EXHRealTimeDataList[k].data.push(data)
    //             }
    //           }
    //         }
    //       } else {
    //         const newdate = new Date(d[i].ReadTime)
    //         data = {
    //           name: name,
    //           value: [newdate, d[i].TagValue]
    //         }
    //         for (let k = 0; k < this.EXHRealTimeDataList.length; k++) {
    //           if (this.EXHRealTimeDataList[k].name === name) {
    //             this.EXHRealTimeDataList[k].data.push(data)
    //           }
    //         }
    //       }
    //     }
    //
    //     // var divid = 'mychart_ss'
    //     // var title = name
    //     var lengList = []
    //     var objTemp
    //
    //     for (var l = 0; l < nameList.length; l++) {
    //       var obj
    //       var iconurl
    //       if (nameList[l] === '二氧化硫') {
    //         iconurl = 'image://../assets/imgs/legend/SO2.png'
    //       } else if (nameList[l] === '氮氧化物') {
    //         iconurl = 'image://../assets/imgs/legend/NOX.png'
    //       } else if (nameList[l] === '烟尘') {
    //         iconurl = 'image://../assets/imgs/legend/YanChen.png'
    //       } else if (nameList[l] === '非甲烷总烃') {
    //         iconurl = 'image://../assets/imgs/legend/grn.png'
    //       } else if (nameList[l] === '温度') {
    //         iconurl = 'image://../assets/imgs/legend/WenDu.png'
    //       } else {
    //         iconurl = 'image://../assets/imgs/legend/VOCs.png'
    //       }
    //
    //       if (nameList[l] === '废气' || nameList[l] === '废气流量') { // 将废气流量排到数组最后
    //         objTemp = {
    //           name: nameList[l],
    //           icon: iconurl,
    //           textStyle: {
    //             color: '#ccc'
    //           },
    //           itemWidth: 20,
    //           itemHeight: 5
    //         }
    //       } else {
    //         obj = {
    //           name: nameList[l],
    //           icon: iconurl,
    //           textStyle: {
    //             color: '#ccc'
    //           },
    //           itemWidth: 20,
    //           itemHeight: 5
    //         }
    //         lengList.push(obj)
    //       }
    //     }
    //     lengList.push(objTemp)
    //
    //     this.DrawEXHRealTimeDateChart(this.echartsOptions.id, this.echartsOptions.title, this.echartsOptions.legend, this.echartsOptions.ydatas, this.echartsOptions.yname)
    //   }
    // },
    // 钩子调用实时
    // IntervalEXHRealTimeDate () {
    //   // 定时器函数
    //   this.DrawEXHRealTimeDateChart()
    //   setInterval(function () {
    //     // $('.RealTime').empty()
    //     this.startTime = dayjs().subtract(5, 'minute').format('YYYY-MM-DD HH:mm:ss')
    //     this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
    //     this.step = '15'
    //     // this.getRtdb15s(this.unionTagCodeList, this.startTime, this.endTime, this.step, this.res)
    //     // PreQueryTime=endTime;
    //   }, 1500)
    // }

  }
}
</script>

 src/components/BaseNav/WasteWater/WasteWaterIndex.vue

@@ -4,7 +4,7 @@
      <public-tabs :storagePlaceId="storagePlaceId"></public-tabs>
    </template>
    <template v-slot:publicPart>
      <div class="publicPart">
      <div class="public-part">
        <span></span>
        <span></span>
        <span></span>
@@ -56,86 +56,20 @@
  },
  data () {
    return {
      activeName: 'first',
      currentTab: RealData,
      active: '0',
      displayContentTable: '',
      flag: false,
      tabTaggle (taggleMenu, num) {
        this.currentTab = taggleMenu
        this.active = num
      }
      activeName: 'first'
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.refsData()
    })
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    refsData () {
      // 请求数据需要携带的参数
      // const data = this.EpsGisMonPointId
      this.$refs.refsTabsData.refsDataTabs()
    }
  }
}
</script>

<style lang="less" scoped>
.public-bounced {
  z-index: 2000;
  position: absolute;
  top: 35%;
  left: 20%;

  .public-bounced-title {
    cursor: move;
    height: 0.1rem;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      color: #f4f7ff;
      margin: 0 15px;
      font-size: 14px;
    }

    i {
      color: #C0C4CC;
      margin: 0 15px;
      font-size: 22px;
      cursor: pointer;
    }

    i:hover {
      color: #00fff6;
    }
  }

  .public-bounced-content {
    padding: 0.1rem;
    display: flex;
    //align-items: center;
    //justify-content: space-around;

    .public-bounced-content-left {
      //width: 4.8rem;
    }

    .public-bounced-content-right {
      //width: 3rem;
      margin-left: 0.1rem;
    }
  }
}

.publicPart {
.public-part {
  position: relative;
  margin-bottom: 0.1rem;
  background-color: @background-color;
@@ -145,7 +79,7 @@
  border: 1px solid #396d83;
}

.publicPart span:nth-child(1) {
.public-part span:nth-child(1) {
  position: absolute;
  left: -2px;
  top: -2px;
@@ -155,7 +89,7 @@
  border-width: 2px 0 0 2px;
}

.publicPart span:nth-child(2) {
.public-part span:nth-child(2) {
  position: absolute;
  right: -2px;
  top: -2px;
@@ -165,7 +99,7 @@
  border-width: 2px 2px 0 0;
}

.publicPart span:nth-child(3) {
.public-part span:nth-child(3) {
  position: absolute;
  right: -2px;
  bottom: -2px;
@@ -175,7 +109,7 @@
  border-width: 0 2px 2px 0;
}

.publicPart span:nth-child(4) {
.public-part span:nth-child(4) {
  position: absolute;
  left: -2px;
  bottom: -2px;
@@ -183,94 +117,6 @@
  border-style: solid;
  border-color: #02a6b5;
  border-width: 0 0 2px 2px;
}

.win {
  position: relative;
  background: @background-color;
  border: 0.8px solid #396d83;
}

.border_corner {
  z-index: 999;
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0);
  border: 1.5px solid #47d5ea;
}

.border_corner_left_top {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.border_corner_right_top {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

.border_corner_left_bottom {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

.border_corner_right_bottom {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

.tab {
  display: flex;
  border-bottom: 1px solid #396d83;
  padding: 0.02rem 0.04rem;
}

.tab li {
  background-color: #243a55;
  line-height: 0.15rem;
  height: 0.15rem;
  text-align: center;
  border-radius: 5px;
  margin-right: 0.04rem;
  padding: 0 0.04rem;
}

.tab li.hover,
.tab li:hover {
  background-color: #0e639e;
  color: #fff;
  cursor: pointer;
}

.legend {
  position: absolute;
  top: 0.05rem;
  right: 0;
  display: flex;
  justify-items: center;
}

.legend i {
  display: block;
  width: 0.2rem;
  height: 0.09rem;
  margin: 0 0.1rem 0 0.05rem;
  border-radius: 0.02rem;
}

.legend span {
  line-height: 0.09rem;
  height: 0.09rem;
  font-size: 0.06rem;
}

</style>