diff --git a/apps/web-antd/src/views/property/electricEnergy/elctricitySituation/floor-tree.vue b/apps/web-antd/src/views/property/electricEnergy/elctricitySituation/floor-tree.vue
new file mode 100644
index 00000000..a5819758
--- /dev/null
+++ b/apps/web-antd/src/views/property/electricEnergy/elctricitySituation/floor-tree.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import { onMounted, ref } from 'vue';
+import { Empty, Skeleton, Tree } from 'ant-design-vue';
+import { communityTree } from "#/api/property/community";
+import type { CommunityVO } from "#/api/property/community/model";
+
+defineOptions({ inheritAttrs: false });
+
+withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
+
+const emit = defineEmits<{
+  reload: [];
+  select: [];
+}>();
+
+const selectFloorId = defineModel('selectFloorId', {
+  type: Array as PropType<string[]>,
+});
+
+const searchValue = defineModel('searchValue', {
+  type: String,
+  default: '',
+});
+
+type TreeArray = CommunityVO[];
+const treeArray = ref<TreeArray>([]);
+const showTreeSkeleton = ref<boolean>(true);
+
+async function loadTree() {
+  showTreeSkeleton.value = true;
+  searchValue.value = '';
+  selectFloorId.value = [];
+  treeArray.value = await communityTree(4);
+  showTreeSkeleton.value = false;
+}
+
+async function handleReload() {
+  await loadTree();
+  emit('reload');
+}
+
+onMounted(loadTree);
+</script>
+
+<template>
+  <div class="h-full flex flex-col">
+    <Skeleton
+      :loading="showTreeSkeleton"
+      :paragraph="{ rows: 8 }"
+      active
+      class="p-[8px] flex-1 min-h-0"
+    >
+    <div class="bg-background flex flex-col h-full rounded-lg">
+      <div class="flex-1 overflow-y-auto px-[8px] mt-2.5 min-h-0">
+        <Tree
+          class="tree-background"
+          v-bind="$attrs"
+          v-if="treeArray.length > 0"
+          v-model:selected-keys="selectFloorId"
+          :field-names="{ title: 'label', key: 'id' }"
+          :show-line="{ showLeafIcon: false }"
+          :tree-data="treeArray"
+          :virtual="false"
+          default-expand-all
+          @select="$emit('select')"
+        >
+          <template #title="{ label }">
+              <span v-if="label.indexOf(searchValue) > -1">
+                {{ label.substring(0, label.indexOf(searchValue)) }}
+                <span style="color: #f50">{{ searchValue }}</span>
+                {{ label.substring(label.indexOf(searchValue) + searchValue.length) }}
+              </span>
+            <span v-else>{{ label }}</span>
+          </template>
+        </Tree>
+        <div v-else class="mt-5">
+          <Empty
+            :image="Empty.PRESENTED_IMAGE_SIMPLE"
+            description="暂无数据"
+          />
+        </div>
+      </div>
+    </div>
+    </Skeleton>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(html),
+:deep(body),
+:deep(#app) {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+.bg-background{
+  background-color: white;
+  :deep(.ant-tree){
+    background-color: white;
+    color: #333;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/property/electricEnergy/elctricitySituation/index.vue b/apps/web-antd/src/views/property/electricEnergy/elctricitySituation/index.vue
index e3ba3c35..88b4f4b9 100644
--- a/apps/web-antd/src/views/property/electricEnergy/elctricitySituation/index.vue
+++ b/apps/web-antd/src/views/property/electricEnergy/elctricitySituation/index.vue
@@ -1,11 +1,500 @@
+<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>
+        </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>
 
-<template>
-aaaaaaaaaaaaa
-</template>
+<style scoped>
+.energy-monitor-page {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  background-color: #f4f4f4;
+  min-height: 100vh;
+}
 
-<style scoped lang="scss">
+.left-content {
+  flex: 1;
+}
 
+.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: 310px;
+  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>
diff --git a/apps/web-antd/src/views/property/waterPower/waterSituation/index.vue b/apps/web-antd/src/views/property/waterPower/waterSituation/index.vue
index 63cf316b..9bcfcd23 100644
--- a/apps/web-antd/src/views/property/waterPower/waterSituation/index.vue
+++ b/apps/web-antd/src/views/property/waterPower/waterSituation/index.vue
@@ -1,11 +1,396 @@
+<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.currentMonthEnergy }}</div>
+              <div class="item-title">当月用水(t)</div>
+            </div>
+            <div class="comparison-item">
+              <div class="item-value">{{ chainData.lastMonthSamePeriodEnergy }}</div>
+              <div class="item-title">上月同期(t)</div>
+            </div>
+            <div class="comparison-item">
+              <div class="item-top">
+                <div class="item-percent">{{ chainData.monthTrendPercentage }}</div>
+                <div>{{ chainData.monthTrendValue }}
+                  <span class="item-title">t</span>
+                </div>
+              </div>
+              <div class="item-title">趋势</div>
+            </div>
+            <div class="comparison-item">
+              <div class="item-value">{{ chainData.currentYearEnergy }}</div>
+              <div class="item-title">当年用水(t)</div>
+
+            </div>
+            <div class="comparison-item">
+              <div class="item-value">{{ chainData.lastYearSamePeriodEnergy }}</div>
+              <div class="item-title">去年同期(t)</div>
+            </div>
+            <div class="comparison-item">
+              <div class="item-top">
+                <div class="item-percent">{{ chainData.yearTrendPercentage }}</div>
+                <div>{{ chainData.yearTrendValue }}
+                  <span class="item-title">t</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="2">当月</RadioButton>
+              <RadioButton value="3">当年</RadioButton>
+            </RadioGroup>
+          </div>
+          <div class="energy-chart" 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="power-chart" ref="powerCurveChart">
+          </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 "../../electricEnergy/elctricitySituation/floor-tree.vue";
+
+const chainData = reactive({
+  currentMonthEnergy: '9',
+  lastMonthSamePeriodEnergy: '--',
+  monthTrendPercentage: '--',
+  monthTrendValue: '--',
+  currentYearEnergy: '59',
+  lastYearSamePeriodEnergy: '--',
+  yearTrendPercentage: '--',
+  yearTrendValue: '--',
+})
+
+const energyTrendTime = ref('2')
+
+// 能耗趋势图表容器
+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: 't',
+  },
+  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('2')
+    // 可选：添加窗口大小变化监听
+    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 == '2') {
+    const day = now.getDate()
+    for (let i = 1; i < day; i++) {
+      timeArr.push(i);
+      valArr.push(parseFloat((Math.random() * 10).toFixed(2)));
+    }
+  } else {
+    const month = now.getMonth() + 1;
+    for (let i = 1; i < month; i++) {
+      timeArr.push(i);
+      valArr.push(parseFloat((Math.random() * 80).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: 't',
+    },
+  ],
+  series: [
+    {
+      name: '今年',
+      type: 'line',
+      smooth: true,
+      data: [],
+      markPoint: {
+        data: [
+          {type: 'max',},
+          {type: 'min',}
+        ]
+      },
+    },
+  ]
+};
+
+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 month = now.getMonth()+1;
+  let yearData = [];
+  let timeDate = []
+  for (let i = 1; i < month; i++) {
+    timeDate.push(i+'月');
+    yearData.push(parseFloat((Math.random() * 60).toFixed(2)));
+  }
+  if (powerCurveInstance.value) {
+    powerCurveInstance.value.setOption({
+      xAxis: {data: timeDate},
+      series: [{data: yearData}],
+    });
+  }
+}
+
+// 组件挂载后初始化图表
+onMounted(() => {
+  initEnergyTrendChart()
+  initPowerCurveChart()
+})
+
+// 组件卸载前销毁图表实例
+onBeforeUnmount(() => {
+  energyTrendInstance.value?.dispose();
+  powerCurveInstance.value?.dispose();
+})
+
 
 </script>
 
-<template>
+<style scoped>
+.energy-monitor-page {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  background-color: #f4f4f4;
+  min-height: 100vh;
+}
 
-</template>
+.left-content {
+  flex: 1;
+}
 
-<style scoped lang="scss">
+.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;
+}
+.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{
+  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: 15px 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;
+}
+
+.power-chart{
+  height: 380px;
+}
+
+.energy-chart{
+  height: 240px;
+}
 
 </style>