energy_storage/web/src/components/Home/Alarm.vue

<template>
  <div class="alarm">
    <div class="text_Cur">
      <div v-for="item in curList" :key="item.key">
        <div>{{ item.name }}</div>
        <span class="mark">{{ item.value ? item.value : 0 }}</span>
        <span class="d">{{ item.d }}</span>
      </div>
    </div>
    <div id="alarm-chart"></div>
  </div>
</template>

<script>
import {processData} from '@/utils/dealWithData'
export default {
  name: '',
  props: {
    total:{
      type:Object,
      default:()=>{}
    },
    deviceInfo: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      curList: [
        {
          name: '光伏设备告警',
          key: 'solar_num_err',
          lineColor: '#22E4FF',
          value: 1111,
          d: ''
        },
        {
          name: '储能设备告警',
          key: 'storage_num_err',
          lineColor: '#0E68E4',
          value: 0,
          d: ''
        },
        {
          name: '充电设备告警',
          key: 'charge_num_err',
          lineColor: '#00BAAD',
          value: 0,
          d: ''
        },
        // {
        //   name: '负荷设备告警',
        //   key: 'key4',
        //   lineColor: '#FF8D1A',
        //   value: 0,
        //   d: ''
        // }
      ],
      faultChart: null,
      lineChartData: {
        ydata: [],
        xdata: []
      }
    }
  },
  watch: {
    deviceInfo: {
      handler(n) {
        let that=this
        this.$nextTick(() => {
          
          this.drawLineChart()
        })
      }
      // immediate: true
    },
    total:{
      handler(n){
        if(n){

          let that=this
          that.curList.forEach((item)=>{
            item.value=that.total[item.key]
          })
        }
       
      },
      deep: true, // 深度监听
      immediate: true,

    }
  },
  mounted() {},
  beforeUnmount() {
    this.faultChart = null
    window.removeEventListener('resize', this.handleResize)
  },

  methods: {
    handleResize() {
      this.faultChart.resize()
    },
 
    getChargeData() {
      const arr = this.curList
      const keyList = this.curList.map((item) => item.key)
      const result = processData(this.deviceInfo, keyList)

      this.lineChartData.xdata = result.dates
      arr.forEach((item, index) => {
        this.lineChartData.ydata[index] = {
          name: item.name,
          smooth: true,
          type: 'bar',
          barWidth: 5,
          itemStyle: {
            borderRadius: [5, 5, 0, 0],
            color: item.lineColor
          },
          emphasis: {
            focus: 'series'
          },
          global: false,
          showSymbol: false,
          data: result.values[index]
        }
      })
    },

    drawLineChart(activeKey) {
      this.getChargeData(activeKey)
      const chartDom = document.getElementById('alarm-chart')
      let faultChart = this.$echarts.init(chartDom)
      this.faultChart = faultChart
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: 10,
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          top: '32%',
          // containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.lineChartData.xdata,
          axisLine: {
            lineStyle: { type: 'dashed', color: '#435463' }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: { type: 'dashed', color: '#435463' }
          },
          axisLabel: {
            interval: 4,
            color: '#fff',
            fontSize:12

          }
        },
        series: this.lineChartData.ydata
      }
      option && faultChart.setOption(option)
      window.addEventListener('resize', this.handleResize)
    }
  }
}
</script>

<style lang="scss" scoped>
.alarm {
  height: calc(100% - 45px);

  #alarm-chart {
    height: calc(100% - 45px);
  }
}

</style>