diff --git a/apps/web-antd/src/api/property/resident/person/model.d.ts b/apps/web-antd/src/api/property/resident/person/model.d.ts
index 17413393..d748edb1 100644
--- a/apps/web-antd/src/api/property/resident/person/model.d.ts
+++ b/apps/web-antd/src/api/property/resident/person/model.d.ts
@@ -144,9 +144,9 @@ export interface PersonForm extends BaseEntity {
    */
   authGroupId?: string | number
 
-  begDate?: string
+  authBegDate?: string
 
-  endDate?: string
+  authEndDate?: string
 }
 
 export interface PersonQuery extends PageQuery {
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/electricEnergy/electricTrend/index.vue b/apps/web-antd/src/views/property/electricEnergy/electricTrend/index.vue
index 8600d414..7f6fa54e 100644
--- a/apps/web-antd/src/views/property/electricEnergy/electricTrend/index.vue
+++ b/apps/web-antd/src/views/property/electricEnergy/electricTrend/index.vue
@@ -1,11 +1,28 @@
 <script setup lang="ts">
 import * as echarts from 'echarts';
-import {onMounted} from "vue";
+import {onMounted, ref} from "vue";
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import { DatePicker } from 'ant-design-vue';
+
+const currentDay = ref<Dayjs>(dayjs());
+const currentMonth = ref<Dayjs>(dayjs());
+const currentYear = ref<Dayjs>(dayjs());
+const disabledDay = (current: Dayjs) => {
+  return current && current > dayjs().endOf('day');
+};
+const disabledMonth = (current: Dayjs) => {
+  return current && current > dayjs().endOf('month');
+};
+const disabledYear = (current: Dayjs) => {
+  return current && current > dayjs().endOf('year');
+};
 
 onMounted(()=>{
-  const chartDom = document.getElementById('main');
-  const myChart = echarts.init(chartDom);
-  const option = {
+  //day
+  const chartDay = document.getElementById('day');
+  const myChartDay = echarts.init(chartDay);
+  const optionDay = {
     tooltip: {
       trigger: 'axis'
     },
@@ -24,7 +41,7 @@ onMounted(()=>{
       {
         type: 'category',
         name:'时',
-        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+        data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00','12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
       }
     ],
     yAxis: [
@@ -38,7 +55,7 @@ onMounted(()=>{
         name: '当日',
         type: 'bar',
         data: [
-          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
         ],
         markPoint: {
           data: [
@@ -50,6 +67,146 @@ onMounted(()=>{
       {
         name: '昨日',
         type: 'bar',
+        data: [
+          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 152.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+        ],
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' }
+          ]
+        },
+      }
+    ],
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: 0,
+        zoomOnMouseWheel: true,
+        filterMode: 'filter',
+      },
+    ],
+  };
+  optionDay && myChartDay.setOption(optionDay);
+
+  //month
+  const chartMonth = document.getElementById('month');
+  const myChartMonth = echarts.init(chartMonth);
+  const optionMonth = {
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: ['当月', '上月']
+    },
+    toolbox: {
+      show: true,
+      feature: {
+        magicType: { show: true, type: ['line', 'bar'] },
+        restore: { show: true },
+      }
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: 'category',
+        name:'日',
+        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name:'KW.h'
+      }
+    ],
+    series: [
+      {
+        name: '当月',
+        type: 'bar',
+        data: [
+          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
+        ],
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' }
+          ]
+        },
+      },
+      {
+        name: '上月',
+        type: 'bar',
+        data: [
+          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
+        ],
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' }
+          ]
+        },
+      }
+    ],
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: 0,
+        zoomOnMouseWheel: true,
+        filterMode: 'filter',
+      },
+    ],
+  };
+  optionMonth && myChartMonth.setOption(optionMonth);
+
+  //year
+  const chartYear = document.getElementById('year');
+  const myChartYear = echarts.init(chartYear);
+  const optionYear = {
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: ['当年', '去年']
+    },
+    toolbox: {
+      show: true,
+      feature: {
+        magicType: { show: true, type: ['line', 'bar'] },
+        restore: { show: true },
+      }
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: 'category',
+        name:'月',
+        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name:'KW.h'
+      }
+    ],
+    series: [
+      {
+        name: '当年',
+        type: 'bar',
+        data: [
+          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+        ],
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' }
+          ]
+        },
+      },
+      {
+        name: '去年',
+        type: 'bar',
         data: [
           2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
         ],
@@ -60,24 +217,119 @@ onMounted(()=>{
           ]
         },
       }
-    ]
+    ],
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: 0,
+        zoomOnMouseWheel: true,
+        filterMode: 'filter',
+      },
+    ],
   };
-  option && myChart.setOption(option);
-})
+  optionYear && myChartYear.setOption(optionYear);
 
+  // 鼠标悬停时激活缩放
+  myChartDay.on('mouseover', { seriesIndex: 0 }, () => {
+    myChartDay.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: true,
+    });
+  });
+
+  // 鼠标离开时取消缩放
+  myChartDay.on('mouseout', { seriesIndex: 0 }, () => {
+    myChartDay.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: false,
+    });
+  });
+
+  // 鼠标悬停时激活缩放
+  myChartYear.on('mouseover', { seriesIndex: 0 }, () => {
+    myChartYear.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: true,
+    });
+  });
+
+  // 鼠标离开时取消缩放
+  myChartYear.on('mouseout', { seriesIndex: 0 }, () => {
+    myChartYear.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: false,
+    });
+  });
+
+  // 鼠标悬停时激活缩放
+  myChartMonth.on('mouseover', { seriesIndex: 0 }, () => {
+    myChartMonth.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: true,
+    });
+  });
+
+  // 鼠标离开时取消缩放
+  myChartMonth.on('mouseout', { seriesIndex: 0 }, () => {
+    myChartMonth.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: false,
+    });
+  });
+})
 </script>
 
 <template>
-<div>
-  <div>
-    <div>
+<div class="box">
+  <div class="left" style="background: red"></div>
+  <div class="right">
+    <div style="background: #fff;border-radius: 8px;padding: 10px">
+      <div>
+        <div style="display: flex;justify-content: space-between;">
+          <DatePicker
+            v-model:value="currentDay"
+            :disabled-date="disabledDay"
+          />当日能耗总值：125.04KW.h</div>
+      </div>
+      <div id="day" style="height: 250px;width: 100%;"></div>
+    </div>
+    <div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 10px;">
+      <div>
+        <div style="display: flex;justify-content: space-between;">
+          <DatePicker
+            v-model:value="currentMonth"
+            :disabled-date="disabledMonth"
+            picker="month"
+          />当月能耗总值：125.04KW.h</div>
+      </div>
+      <div id="month" style="height: 250px;width: 100%;"></div>
+    </div>
+    <div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 10px;">
+      <div>
+        <div style="display: flex;justify-content: space-between;">
+          <DatePicker
+            v-model:value="currentYear"
+            :disabled-date="disabledYear"
+            picker="year"
+          />当年能耗总值：125.04KW.h</div>
+      </div>
+      <div id="year" style="height: 250px;width: 100%;"></div>
     </div>
-    <div id="main" style="height: 400px;width: 100%"></div>
-    <div></div>
   </div>
 </div>
 </template>
 
 <style scoped lang="scss">
-
+.box{
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: 30px;
+  padding: 10px;
+}
 </style>
diff --git a/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/data.ts b/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/data.ts
new file mode 100644
index 00000000..74dc092e
--- /dev/null
+++ b/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/data.ts
@@ -0,0 +1,81 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import {getDictOptions} from "#/utils/dict";
+import dayjs from 'dayjs';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('pro_qoq_type'),
+    },
+    fieldName: 'date',
+    label: '日期',
+    defaultValue: '0',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: (formData) => {
+      const type: 0 | 1 | 2 | 3 = formData.date ?? 0;
+      const today = dayjs();
+      const propsMap = {
+        0: {
+          picker: 'date',
+          format: 'YYYY-MM-DD',
+          valueFormat: 'YYYY-MM-DD',
+          showTime: false,
+          defaultValue: today.format('YYYY-MM-DD'),
+        },
+        1: {
+          picker: 'week',
+          format: 'YYYY-MM-DD',
+          valueFormat: 'YYYY-MM-DD',
+          showTime: false,
+          defaultValue: today.startOf('week').format('YYYY-MM-DD'),
+        },
+        2: {
+          picker: 'month',
+          format: 'YYYY-MM',
+          valueFormat: 'YYYY-MM',
+          showTime: false,
+          defaultValue: today.format('YYYY-MM'),
+        },
+        3: {
+          picker: 'year',
+          format: 'YYYY',
+          valueFormat: 'YYYY',
+          showTime: false,
+          defaultValue: today.format('YYYY'),
+        },
+      };
+      return propsMap[type];
+    },
+    fieldName: 'chioceDate',
+    dependencies: {
+      triggerFields: ['date'],
+    },
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '能源节点',
+    field: 'roomNumber',
+  },
+  {
+    title: '当月用能(kw.h)',
+    field: 'chargeItem',
+  },
+  {
+    title: '上月用能(kw.h)',
+    field: 'chargeCycle',
+  },
+  {
+    title: '增加值(kw.h)',
+    field: 'startTime',
+  },
+  {
+    title: '环比(%)',
+    field: 'endTime',
+  },
+];
diff --git a/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/index.vue b/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/index.vue
index 63cf316b..240d96bf 100644
--- a/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/index.vue
+++ b/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/index.vue
@@ -1,11 +1,72 @@
 <script setup lang="ts">
+import { Page, type VbenFormProps } from '@vben/common-ui';
+import {
+  useVbenVxeGrid,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+import {
+  paymentReviewList,
+} from '#/api/property/costManagement/paymentReview';
+import { columns, querySchema } from './data';
 
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 30,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    highlight: true,
+    reserve: true,
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await paymentReviewList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'property-paymentReview-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
 </script>
 
 <template>
-
+  <div class="box">
+    <div class="left" style="background: red;margin: 16px 0 16px 16px"></div>
+    <div class="right">
+      <Page :auto-content-height="true">
+        <BasicTable table-title="用电环比分析列表"/>
+      </Page>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
-
+.box{
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: 30px;
+}
 </style>
diff --git a/apps/web-antd/src/views/property/resident/person/data.ts b/apps/web-antd/src/views/property/resident/person/data.ts
index 6dc2548d..476d7318 100644
--- a/apps/web-antd/src/views/property/resident/person/data.ts
+++ b/apps/web-antd/src/views/property/resident/person/data.ts
@@ -5,6 +5,7 @@ import { renderDict } from "#/utils/render"
 import { resident_unitList } from "#/api/property/resident/unit"
 import { authGroupList } from '#/api/sis/authGroup'
 import type { AuthGroupVO, AuthGroupQuery } from '#/api/sis/authGroup/model'
+import { toRaw } from 'vue'
 
 
 export const querySchema: FormSchemaGetter = () => [
@@ -151,15 +152,16 @@ export const modalSchema: FormSchemaGetter = () => [
     label: '性别',
     fieldName: 'gender',
     component: "Select",
-    componentProps:{
+    componentProps: {
       options: getDictOptions('sys_user_sex')
     },
     rules: 'required',
   },
   {
-    label: '身份证号',
+    label: '证件号',
     fieldName: 'idCard',
     component: "Input",
+    rules: 'required',
   },
   {
     label: '邮箱',
@@ -221,11 +223,26 @@ export const modalSchema: FormSchemaGetter = () => [
       format: 'YYYY-MM-DD HH:mm:ss',
       valueFormat: 'YYYY-MM-DD HH:mm:ss',
     },
+<<<<<<< HEAD
+=======
+    dependencies: {
+      show: (values) => {
+        return typeof (values.id) !== 'undefined'
+      },
+      triggerFields: ['id'],
+    }
+>>>>>>> 54ed694271a4aeb1c3d592f9200e037fb524361f
   },
   {
     label: '通行权限组',
     fieldName: 'authGroupId',
     component: 'ApiSelect',
+    dependencies: {
+      show: (values) => {
+        return typeof (values.id) !== 'undefined'
+      },
+      triggerFields: ['id'],
+    },
     componentProps: {
       allowClear: true,
       resultField: 'list', // 根据API返回结构调整
@@ -244,7 +261,11 @@ export const modalSchema: FormSchemaGetter = () => [
         }
         return authGroupArr
       },
+<<<<<<< HEAD
     },
+=======
+    }
+>>>>>>> 54ed694271a4aeb1c3d592f9200e037fb524361f
   },
   {
     label: '人脸图片',
diff --git a/apps/web-antd/src/views/property/resident/person/person-modal.vue b/apps/web-antd/src/views/property/resident/person/person-modal.vue
index 38ebe8ed..06d9678a 100644
--- a/apps/web-antd/src/views/property/resident/person/person-modal.vue
+++ b/apps/web-antd/src/views/property/resident/person/person-modal.vue
@@ -1,56 +1,60 @@
 <script setup lang="ts">
-import {computed, reactive, ref} from 'vue';
-import {useVbenModal} from '@vben/common-ui';
-import {$t} from '@vben/locales';
-import {cloneDeep} from '@vben/utils';
-import {useVbenForm} from '#/adapter/form';
-import {personAdd, personInfo, personUpdate} from '#/api/property/resident/person';
-import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
-import {modalSchema} from './data';
-import QueryUserList from './query-user-list.vue'
-import QueryUnitList from './query-unit-list.vue'
+import { computed, reactive, ref } from "vue";
+import { useVbenModal } from "@vben/common-ui";
+import { $t } from "@vben/locales";
+import { cloneDeep } from "@vben/utils";
+import { useVbenForm } from "#/adapter/form";
+import {
+  personAdd,
+  personInfo,
+  personUpdate,
+} from "#/api/property/resident/person";
+import { defaultFormValueGetter, useBeforeCloseDiff } from "#/utils/popup";
+import { modalSchema } from "./data";
+import QueryUserList from "./query-user-list.vue";
+import QueryUnitList from "./query-unit-list.vue";
 
 const emit = defineEmits<{ reload: [] }>();
 
 const isUpdate = ref(false);
 const title = computed(() => {
-  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+  return isUpdate.value ? $t("pages.common.edit") : $t("pages.common.add");
 });
 let userInfo = reactive({
-  userId: '',
-  userName: '',
-  phone: '',
-  gender: '',
+  userId: "",
+  userName: "",
+  phone: "",
+  gender: "",
 });
-let unitName = ref('');
+let unitName = ref("");
 const userId = ref<number | string>(0);
-const unitId = ref<string>('');
+const unitId = ref<string>("");
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     // 默认占满两列
-    formItemClass: 'col-span-1',
+    formItemClass: "col-span-1",
     // 默认label宽度 px
     labelWidth: 100,
     // 通用配置项 会影响到所有表单项
     componentProps: {
-      class: 'w-full',
-    }
+      class: "w-full",
+    },
   },
   schema: modalSchema(),
   showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
+  wrapperClass: "grid-cols-2",
 });
 
-const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
   {
     initializedGetter: defaultFormValueGetter(formApi),
     currentGetter: defaultFormValueGetter(formApi),
-  },
+  }
 );
 
 const [BasicModal, modalApi] = useVbenModal({
   // 在这里更改宽度
-  class: 'w-[70%]',
+  class: "w-[70%]",
   fullscreenButton: false,
   onBeforeClose,
   onClosed: handleClosed,
@@ -61,14 +65,14 @@ const [BasicModal, modalApi] = useVbenModal({
     }
     modalApi.modalLoading(true);
 
-    const {id} = modalApi.getData() as { id?: number | string };
+    const { id } = modalApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
 
     if (isUpdate.value && id) {
       const record = await personInfo(id);
       userId.value = record.userId;
       unitId.value = record.unitId.toString();
-      record.state=record.state?.toString()
+      record.state = record.state?.toString();
       await formApi.setValues(record);
     }
     await markInitialized();
@@ -80,7 +84,7 @@ const [BasicModal, modalApi] = useVbenModal({
 async function handleConfirm() {
   try {
     modalApi.lock(true);
-    const {valid} = await formApi.validate();
+    const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
@@ -91,15 +95,17 @@ async function handleConfirm() {
     //   data.phone = userInfo.phone
     //   data.gender = userInfo.gender
     // }
-    if(unitName.value){
-      data.unitName = unitName.value
+    if (unitName.value) {
+      data.unitName = unitName.value;
     }
 
-    data.begDate = data.authTime[0]
-    data.endDate = data.authTime[1]
+    if (isUpdate.value && data.authTime !== 0) {
+      data.authBegDate = data.authTime[0];
+      data.authEndDate = data.authTime[1];
+    }
     await (isUpdate.value ? personUpdate(data) : personAdd(data));
     resetInitialized();
-    emit('reload');
+    emit("reload");
     modalApi.close();
   } catch (error) {
     console.error(error);
@@ -126,10 +132,16 @@ function getUnitInfo(unit: { name: string }) {
   <BasicModal :title="title">
     <BasicForm>
       <template #userId="slotProps">
-        <QueryUserList @update:userInfo="getUserInfo" v-bind="slotProps" :isUpdate="isUpdate" :userId="userId"/>
+        <QueryUserList @update:userInfo="getUserInfo"
+                       v-bind="slotProps"
+                       :isUpdate="isUpdate"
+                       :userId="userId" />
       </template>
       <template #unitId="slotProps">
-        <QueryUnitList @update:unitInfo="getUnitInfo" v-bind="slotProps" :isUpdate="isUpdate" :unitId="unitId"/>
+        <QueryUnitList @update:unitInfo="getUnitInfo"
+                       v-bind="slotProps"
+                       :isUpdate="isUpdate"
+                       :unitId="unitId" />
       </template>
     </BasicForm>
   </BasicModal>
diff --git a/apps/web-antd/src/views/property/waterPower/waterQOQ/data.ts b/apps/web-antd/src/views/property/waterPower/waterQOQ/data.ts
new file mode 100644
index 00000000..630cf3d4
--- /dev/null
+++ b/apps/web-antd/src/views/property/waterPower/waterQOQ/data.ts
@@ -0,0 +1,81 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import {getDictOptions} from "#/utils/dict";
+import dayjs from 'dayjs';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('pro_qoq_type'),
+    },
+    fieldName: 'date',
+    label: '日期',
+    defaultValue: '0',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: (formData) => {
+      const type: 0 | 1 | 2 | 3 = formData.date ?? 0;
+      const today = dayjs();
+      const propsMap = {
+        0: {
+          picker: 'date',
+          format: 'YYYY-MM-DD',
+          valueFormat: 'YYYY-MM-DD',
+          showTime: false,
+          defaultValue: today.format('YYYY-MM-DD'),
+        },
+        1: {
+          picker: 'week',
+          format: 'YYYY-MM-DD',
+          valueFormat: 'YYYY-MM-DD',
+          showTime: false,
+          defaultValue: today.startOf('week').format('YYYY-MM-DD'),
+        },
+        2: {
+          picker: 'month',
+          format: 'YYYY-MM',
+          valueFormat: 'YYYY-MM',
+          showTime: false,
+          defaultValue: today.format('YYYY-MM'),
+        },
+        3: {
+          picker: 'year',
+          format: 'YYYY',
+          valueFormat: 'YYYY',
+          showTime: false,
+          defaultValue: today.format('YYYY'),
+        },
+      };
+      return propsMap[type];
+    },
+    fieldName: 'chioceDate',
+    dependencies: {
+      triggerFields: ['date'],
+    },
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '能源节点',
+    field: 'roomNumber',
+  },
+  {
+    title: '当月用能(t)',
+    field: 'chargeItem',
+  },
+  {
+    title: '上月用能(t)',
+    field: 'chargeCycle',
+  },
+  {
+    title: '增加值(t)',
+    field: 'startTime',
+  },
+  {
+    title: '环比(%)',
+    field: 'endTime',
+  },
+];
diff --git a/apps/web-antd/src/views/property/waterPower/waterQOQ/index.vue b/apps/web-antd/src/views/property/waterPower/waterQOQ/index.vue
index 63cf316b..240d96bf 100644
--- a/apps/web-antd/src/views/property/waterPower/waterQOQ/index.vue
+++ b/apps/web-antd/src/views/property/waterPower/waterQOQ/index.vue
@@ -1,11 +1,72 @@
 <script setup lang="ts">
+import { Page, type VbenFormProps } from '@vben/common-ui';
+import {
+  useVbenVxeGrid,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+import {
+  paymentReviewList,
+} from '#/api/property/costManagement/paymentReview';
+import { columns, querySchema } from './data';
 
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 30,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    highlight: true,
+    reserve: true,
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await paymentReviewList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'property-paymentReview-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
 </script>
 
 <template>
-
+  <div class="box">
+    <div class="left" style="background: red;margin: 16px 0 16px 16px"></div>
+    <div class="right">
+      <Page :auto-content-height="true">
+        <BasicTable table-title="用电环比分析列表"/>
+      </Page>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
-
+.box{
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: 30px;
+}
 </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>
diff --git a/apps/web-antd/src/views/property/waterPower/waterTrend/index.vue b/apps/web-antd/src/views/property/waterPower/waterTrend/index.vue
index 63cf316b..0cc039ac 100644
--- a/apps/web-antd/src/views/property/waterPower/waterTrend/index.vue
+++ b/apps/web-antd/src/views/property/waterPower/waterTrend/index.vue
@@ -1,11 +1,233 @@
 <script setup lang="ts">
+import * as echarts from 'echarts';
+import {onMounted, ref} from "vue";
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import { DatePicker } from 'ant-design-vue';
 
+const currentMonth = ref<Dayjs>(dayjs());
+const currentYear = ref<Dayjs>(dayjs());
+const disabledMonth = (current: Dayjs) => {
+  return current && current > dayjs().endOf('month');
+};
+const disabledYear = (current: Dayjs) => {
+  return current && current > dayjs().endOf('year');
+};
+
+onMounted(()=>{
+  //month
+  const chartMonth = document.getElementById('month');
+  const myChartMonth = echarts.init(chartMonth);
+  const optionMonth = {
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: ['当月', '上月']
+    },
+    toolbox: {
+      show: true,
+      feature: {
+        magicType: { show: true, type: ['line', 'bar'] },
+        restore: { show: true },
+      }
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: 'category',
+        name:'日',
+        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name:'t'
+      }
+    ],
+    series: [
+      {
+        name: '当月',
+        type: 'bar',
+        data: [
+          2.0, 4.9, 7.0, 23.2, 25.6, 0.0, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 0.0, 7.0, 23.2, 0.0, 76.7, 135.6, 162.2, 32.6, 0.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
+        ],
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' }
+          ]
+        },
+      },
+      {
+        name: '上月',
+        type: 'bar',
+        data: [
+          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 0.0, 48.7, 18.8, 6.0, 2.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 0.0, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
+        ],
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' }
+          ]
+        },
+      }
+    ],
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: 0,
+        zoomOnMouseWheel: true,
+        filterMode: 'filter',
+      },
+    ],
+  };
+  optionMonth && myChartMonth.setOption(optionMonth);
+
+  //year
+  const chartYear = document.getElementById('year');
+  const myChartYear = echarts.init(chartYear);
+  const optionYear = {
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: ['当年', '去年']
+    },
+    toolbox: {
+      show: true,
+      feature: {
+        magicType: { show: true, type: ['line', 'bar'] },
+        restore: { show: true },
+      }
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: 'category',
+        name:'月',
+        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name:'t'
+      }
+    ],
+    series: [
+      {
+        name: '当年',
+        type: 'bar',
+        data: [
+          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+        ],
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' }
+          ]
+        },
+      },
+      {
+        name: '去年',
+        type: 'bar',
+        data: [
+          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+        ],
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' }
+          ]
+        },
+      }
+    ],
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: 0,
+        zoomOnMouseWheel: true,
+        filterMode: 'filter',
+      },
+    ],
+  };
+  optionYear && myChartYear.setOption(optionYear);
+
+  // 鼠标悬停时激活缩放
+  myChartYear.on('mouseover', { seriesIndex: 0 }, () => {
+    myChartYear.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: true,
+    });
+  });
+
+  // 鼠标离开时取消缩放
+  myChartYear.on('mouseout', { seriesIndex: 0 }, () => {
+    myChartYear.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: false,
+    });
+  });
+
+  // 鼠标悬停时激活缩放
+  myChartMonth.on('mouseover', { seriesIndex: 0 }, () => {
+    myChartMonth.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: true,
+    });
+  });
+
+  // 鼠标离开时取消缩放
+  myChartMonth.on('mouseout', { seriesIndex: 0 }, () => {
+    myChartMonth.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: false,
+    });
+  });
+})
 </script>
 
 <template>
-
+<div class="box">
+  <div class="left" style="background: red"></div>
+  <div class="right">
+    <div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 10px;">
+      <div>
+        <div style="display: flex;justify-content: space-between;">
+          <DatePicker
+            v-model:value="currentMonth"
+            :disabled-date="disabledMonth"
+            picker="month"
+          />当月能耗总值：30.00t</div>
+      </div>
+      <div id="month" style="height: 250px;width: 100%;"></div>
+    </div>
+    <div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 10px;">
+      <div>
+        <div style="display: flex;justify-content: space-between;">
+          <DatePicker
+            v-model:value="currentYear"
+            :disabled-date="disabledYear"
+            picker="year"
+          />当年能耗总值：59.00t</div>
+      </div>
+      <div id="year" style="height: 250px;width: 100%;"></div>
+    </div>
+  </div>
+</div>
 </template>
 
 <style scoped lang="scss">
-
+.box{
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: 30px;
+  padding: 10px;
+}
 </style>