touchwave/src/views/dehumidificationSystem/history.vue

<template>
  <div class="dashboard-editor-container">
    <el-card class="box-card block-group">
      <div slot="header" class="block-title">
        <span>{{alarmTit}}</span>
      </div>
      <div class="load-box" v-loading="loadprogress">
        <el-row class="line-chart-box">
          <el-col :xs="24" :sm="24" :lg="24">
            <lineChart :chartData="echartsObj"></lineChart>
          </el-col>
        </el-row>
      </div>

    </el-card>
  </div>
</template>

<script>
  import { parseTime, turnTime } from '@/utils'
  import lineChart from './lineChart/LineChart'
  import request from '@/utils/request'

  export default {
    data() {
      return {
        historyM: true,
        alarmTit: '',
        alarmList: [],
        loadprogress: false,
        array: [],
        truObject: {},
        echartsObj: {
          legend: [],
          xAxis: [],
          yAxis: [],
          series: []
        }
      }
    },
    components: {
      lineChart
    },
    created() {
      this.truObject = JSON.parse(this.$route.query.id)
      Object.keys(this.truObject).forEach(res => {
        this.array.push(res)
      })
      this.alarmTit = this.$route.query.title
      this.getDustrurDetail()
    },
    methods: {
      seriesFun(name, stringType, idx, ydata) {
        return {
          name: name,
          type: stringType,
          yAxisIndex: idx,
          data: ydata
        }
      },
      yAxisFun(name, min, max, position, color, unit) {
        return {
          type: 'value',
          name: name,
          min: min,
          max: max,
          position: position,
          axisLine: {
            lineStyle: {
              color: color
            }
          },
          axisLabel: {
            formatter: '{value} ' + unit
          }
        }
      },
      getDustrurDetail() {
        this.loadprogress = true
        request({
          url: 'ajax/envData/history',
          method: 'get',
          params: {
            bt: this.getDate(),
            transducers: this.array
          }
        }).then(res => {
          if (res.success) {
            const $data = res.data
            let flag = false
            const echObj = {
              color: [],
              legend: [],
              xAxis: [],
              yAxis: [],
              series: []
            }
            Object.keys($data).forEach(key => {
              const idx = echObj.legend.length
              switch (this.truObject[key]) {
                case '01':
                  echObj.color.push('#5793f3')
                  echObj.yAxis.push(this.yAxisFun('温度', -20, 100, 'left', '#5793f3', '℃'))
                  echObj.series.push(this.seriesFun('温度', 'line', idx, []))
                  echObj.legend.push('温度')
                  break
                case '02':
                  const yAxisItem = this.yAxisFun('湿度', 0, 100, 'left', '#d14a61', '%')
                  if (idx === 1) {
                    yAxisItem.offset = 60
                  }
                  echObj.color.push('#d14a61')
                  echObj.yAxis.push(yAxisItem)
                  echObj.series.push(this.seriesFun('湿度', 'line', idx, []))
                  echObj.legend.push('湿度')
                  break
                case '03':
                  echObj.color.push('#675bba')
                  echObj.yAxis.push(this.yAxisFun('压力', 0, 10, 'right', '#675bba', 'kPa'))
                  echObj.series.push(this.seriesFun('压力', 'bar', idx, []))
                  echObj.legend.push('压力')
                  break
                case '04':
                  const yItem = this.yAxisFun('风量', 0, 100, 'right', '#67C23A', 'm³/h')
                  if (echObj.color.indexOf('#675bba') >= 0) {
                    yItem.offset = 80
                  }
                  echObj.color.push('#67C23A')
                  echObj.yAxis.push(yItem)
                  echObj.series.push(this.seriesFun('风量', 'bar', idx, []))
                  echObj.legend.push('风量')
                  break
              }
              $data[key].forEach((item, index) => {
                if (index % 2 === 0) {
                  if (!flag) {
                    const startTime = parseTime(item.createTime, true, true).substr(0, 16)
                    echObj.xAxis.unshift(startTime)
                  }
                  echObj.series[idx].data.unshift(item.itemValue)
                } else {
                  if (!flag) {
                    echObj.xAxis.unshift('')
                  }
                  echObj.series[idx].data.unshift(item.itemValue)
                }
              })
              flag = true
            })
            this.echartsObj = echObj
            this.loadprogress = false
          }
        })
      },
      getDate() {
        const currentTime = new Date(new Date().getTime() - 6 * 60 * 60 * 1000)
        return `${turnTime(currentTime, 'time').substr(0, 12)}00`
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container .block-group .block-title {
    justify-content: flex-start;

    span {
      margin-right: 15px;
    }
  }
</style>