admin-vben5/apps/web-antd/src/views/property/electricEnergy/elctricitySituation/index.vue

<template>
  <div class="energy-monitor-page">
    <div class="left-content">
      <FloorTree></FloorTree>
    </div>
    <div class="right-content">
      <div class="row">
        <div class="comparison-section-container">
          <div class="section-header">
            <div class="header-title">环比</div>
          </div>
          <div class="comparison-grid">
            <div class="comparison-item">
              <div class="item-value">{{ chainData.todayEnergy }}</div>
              <div class="item-title">今日用能(kW.h)</div>
            </div>
            <div class="comparison-item">
              <div class="item-value">{{ chainData.yesterdaySamePeriodEnergy }}</div>
              <div class="item-title">昨日同期(kW.h)</div>
            </div>
            <div class="comparison-item">
              <div class="item-top">
                <div class="item-percent">{{ chainData.dayTrendPercentage }}</div>
                <div>{{ chainData.dayTrendValue }}<span class="item-unit">kW.h</span></div>
              </div>
              <div class="item-title">趋势</div>
            </div>
            <div class="comparison-item">
              <div class="item-value">{{ chainData.currentMonthEnergy }}</div>
              <div class="item-title">当月用能(kW.h)</div>
            </div>
            <div class="comparison-item">
              <div class="item-value">{{ chainData.lastMonthSamePeriodEnergy }}</div>
              <div class="item-title">上月同期(kW.h)</div>
            </div>
            <div class="comparison-item">
              <div class="item-top">
                <div class="item-percent">{{ chainData.monthTrendPercentage }}</div>
                <div>{{ chainData.monthTrendValue }}
                  <span class="item-title">kW.h</span>
                </div>
              </div>
              <div class="item-title">趋势</div>
            </div>
            <div class="comparison-item">
              <div class="item-value">{{ chainData.currentYearEnergy }}</div>
              <div class="item-title">当年用能(kW.h)</div>

            </div>
            <div class="comparison-item">
              <div class="item-value">{{ chainData.lastYearSamePeriodEnergy }}</div>
              <div class="item-title">去年同期(kW.h)</div>
            </div>
            <div class="comparison-item">
              <div class="item-top">
                <div class="item-percent">{{ chainData.yearTrendPercentage }}</div>
                <div>{{ chainData.yearTrendValue }}
                  <span class="item-title">kW.h</span>
                </div>
              </div>
              <div class="item-title">趋势</div>
            </div>
          </div>
        </div>
        <div class="energy-trend-container">
          <div class="energy-trend-top">
            <div class="section-header">
              <div class="header-title">能耗趋势</div>
            </div>
            <RadioGroup v-model:value="energyTrendTime"
                        button-style="solid"
                        size="small" @change="buildingEnergyTrendData(energyTrendTime)">
              <RadioButton value="1">当日</RadioButton>
              <RadioButton value="2">当月</RadioButton>
              <RadioButton value="3">当年</RadioButton>
            </RadioGroup>
          </div>
          <div class="chart-placeholder" ref="energyTrendChart">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="power-curve-container">
          <div class="section-header">
            <div class="header-title">日用电功率曲线</div>
          </div>
<!--          <div class="chart-placeholder" ref="powerCurveChart">-->
          <div class="power-chart" ref="powerCurveChart">
          </div>
        </div>
        <div class="power-peak-container">
          <div class="section-header">
            <div class="header-title">电功率峰值</div>
          </div>
          <div class="peak-item">
            <p class="value">{{ peakData.todayPeakPower }}</p>
            <p class="time">{{ peakData.todayPeakTime }}</p>
            <div class="bottom-text">当日(kW)</div>
          </div>
          <div class="peak-item">
            <p class="value">{{ peakData.yesterdayPeakPower }}</p>
            <p class="time">{{ peakData.yesterdayPeakTime }}</p>
            <div class="bottom-text">昨日(kW)</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {RadioGroup, RadioButton} from 'ant-design-vue'
import {ref, onMounted, onBeforeUnmount, reactive} from 'vue'
import * as echarts from 'echarts'
import type {ECharts, EChartsOption} from 'echarts'
import FloorTree from "./floor-tree.vue";
import dayjs from "dayjs";

const chainData = reactive({
  todayEnergy: '231.78',
  yesterdaySamePeriodEnergy: '269.56',
  dayTrendPercentage: '-14.02%',
  dayTrendValue: '-37.78',
  currentMonthEnergy: '18758.39',
  lastMonthSamePeriodEnergy: '--',
  monthTrendPercentage: '--',
  monthTrendValue: '--',
  currentYearEnergy: '18758.39',
  lastYearSamePeriodEnergy: '--',
  yearTrendPercentage: '--',
  yearTrendValue: '--',
})

const peakData = reactive({
  todayPeakPower: '2961.08',
  todayPeakTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  yesterdayPeakPower: '2993.89',
  yesterdayPeakTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
})

const energyTrendTime = ref('1')

// 能耗趋势图表容器
const energyTrendChart = ref<HTMLElement | null>(null)
const energyTrendInstance = ref<ECharts | null>(null)

const energyTrendOption: EChartsOption = {
  tooltip: {
    trigger: 'item',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: [],
    name: '时间',
  },
  yAxis: {
    type: 'value',
    name: 'kW.h',
  },
  series: [
    {
      data: [],
      type: 'bar',
      markPoint: {
        data: [
          {type: 'max', name: 'Max'},
          {type: 'min', name: 'Min'}
        ]
      },
    }
  ],
}

const initEnergyTrendChart = () => {
  if (energyTrendChart.value) {
    // 销毁旧实例
    energyTrendInstance.value?.dispose()
    // 创建新实例
    energyTrendInstance.value = echarts.init(energyTrendChart.value)
    // 设置配置项
    energyTrendInstance.value.setOption(energyTrendOption)
    buildingEnergyTrendData('1')
    // 可选：添加窗口大小变化监听
    const resizeHandler = () => {
      energyTrendInstance.value?.resize()
    }
    window.addEventListener('resize', resizeHandler)

    // 在组件卸载前移除监听
    onBeforeUnmount(() => {
      window.removeEventListener('resize', resizeHandler)
    })
  }
}

function buildingEnergyTrendData(val: string) {
  const now = new Date();
  let timeArr = [];
  let valArr = [];
  let name = '时间';
  if (val == '1') {
    const hour = now.getHours()
    for (let i = 0; i < hour; i++) {
      timeArr.push(i);
      valArr.push(parseFloat((Math.random() * 35).toFixed(2)));
    }
  } else if (val == '2') {
    const day = now.getDate()
    for (let i = 1; i < day; i++) {
      timeArr.push(i);
      valArr.push(parseFloat((Math.random() * 800).toFixed(2)));
    }
    name = '日期';
  } else {
    const month = now.getMonth() + 1;
    for (let i = 1; i < month; i++) {
      timeArr.push(i);
      valArr.push(parseFloat((Math.random() * 21000).toFixed(2)));
    }
    name = '月份';
  }

  if (energyTrendInstance.value) {
    energyTrendInstance.value.setOption({
      xAxis: {data: timeArr, name},
      series: [{data: valArr}],
    });
  }
}

//日用电率
const powerCurveChart = ref<HTMLElement | null>(null)
const powerCurveInstance = ref<ECharts | null>(null)


const powerCurveOption: EChartsOption = {
  tooltip: {
    trigger: 'item',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      magicType: {show: true, type: ['line', 'bar']},
      restore: {show: true},
    }
  },
  legend: {
    data: ['今日', '昨日']
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow'
      },
      name: '时'
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'kW',
    },
  ],
  series: [
    {
      name: '今日',
      type: 'line',
      smooth: true,
      data: [],
      markPoint: {
        data: [
          {type: 'max',},
          {type: 'min',}
        ]
      },
    },
    {
      name: '昨日',
      type: 'line',
      smooth: true,
      data: [],
      markPoint: {
        data: [
          {type: 'max',},
          {type: 'min',}
        ]
      },
      itemStyle: {color: '#cbb0e3'}, // 数据点颜色
      lineStyle: {color: '#cbb0e3'}  // 线条颜色
    },
  ]
};

const initPowerCurveChart = () => {
  if (powerCurveChart.value) {
    // 销毁旧实例
    powerCurveInstance.value?.dispose()
    // 创建新实例
    powerCurveInstance.value = echarts.init(powerCurveChart.value)
    // 设置配置项
    powerCurveInstance.value.setOption(powerCurveOption)
    buildingPowerCurveData()
    // 可选：添加窗口大小变化监听
    const resizeHandler = () => {
      powerCurveInstance.value?.resize()
    }
    window.addEventListener('resize', resizeHandler)

    // 在组件卸载前移除监听
    onBeforeUnmount(() => {
      window.removeEventListener('resize', resizeHandler)
    })
  }
}

function buildingPowerCurveData() {
  const now = new Date();
  const hour = now.getHours()
  let yesterday = [];
  let today = [];
  let timeDate = []
  for (let i = 0; i < 24; i++) {
    timeDate.push(i);
    yesterday.push(parseFloat((Math.random() * 3000).toFixed(2)));
    if (hour > i) {
      today.push(parseFloat((Math.random() * 3000).toFixed(2)));
    }
  }
  if (powerCurveInstance.value) {
    powerCurveInstance.value.setOption({
      xAxis: {data: timeDate},
      series: [{data: today}, {data: yesterday}],
    });
  }
}

// 组件挂载后初始化图表
onMounted(() => {
  initEnergyTrendChart()
  initPowerCurveChart()
})

// 组件卸载前销毁图表实例
onBeforeUnmount(() => {
  energyTrendInstance.value?.dispose();
  powerCurveInstance.value?.dispose();
})


</script>

<style scoped>
.energy-monitor-page {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background-color: #f4f4f4;
  min-height: 100vh;
}

.left-content {
  flex: 1;
  height: 95vh;
}

.right-content {
  display: flex;
  flex: 4;
  flex-direction: column;
  gap: 1rem;
}

.row {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.comparison-section-container {
  flex: 2;
}

.energy-trend-container {
  flex: 3;
}

.power-curve-container {
  flex: 5;
}

.power-peak-container {
  flex: 1;
}

.energy-trend-top {
  display: flex;
  justify-content: space-between
}

.section-header {
  border-left: 4px solid #3671e8;
  margin-bottom: 15px;
  padding-left: 16px;
}

.header-title {
  font-size: 16px;
  color: #333;
}

.comparison-section-container,
.energy-trend-container,
.power-curve-container,
.power-peak-container {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1rem;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.comparison-item {
  padding: 5px 10px;
  border: 1px solid #e0e0e0;
  text-align: center;
}

.item-value {
  font-size: 22px;
  color: #333;
  margin-bottom: 10px;
}

.item-title {
  font-size: 12px;
  color: #666;
}

.item-top {
  font-size: 16px;
  margin-bottom: 10px;
}

.item-percent {
  color: #7fb926;
  margin-bottom: 5px;
  border-bottom: 1px solid #666;
}

.item-unit {
  font-size: 12px;
  color: #999;
  margin-left: 3px;
}

.chart-placeholder {
  height: 36vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.power-chart{
  height: 38vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.peak-item {
  padding: 15px 0 0 0;
  border: 1px solid #3671e8;
  text-align: center;
  margin-bottom: 1rem;

  .bottom-text {
    background-color: #3671e8;
    color: white;
    line-height: 40px;
  }
}

.peak-item .value {
  font-size: 22px;
  color: #333;
}

.peak-item .time {
  font-size: 12px;
  color: #999;
  margin: 5px 0;
}
</style>