diff --git a/apps/web-antd/src/views/property/electricEnergy/electricityYOY/index.vue b/apps/web-antd/src/views/property/electricEnergy/electricityYOY/index.vue
index 63cf316b..a2dde930 100644
--- a/apps/web-antd/src/views/property/electricEnergy/electricityYOY/index.vue
+++ b/apps/web-antd/src/views/property/electricEnergy/electricityYOY/index.vue
@@ -1,11 +1,173 @@
 <script setup lang="ts">
+import * as echarts from 'echarts';
+import {onMounted, ref} from "vue";
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import { Table } from 'ant-design-vue'
+import { DatePicker } from 'ant-design-vue';
+import { SearchOutlined } from '@ant-design/icons-vue';
 
+const currentYear = ref<Dayjs>(dayjs());
+const disabledYear = (current: Dayjs) => {
+  return current && current > dayjs().endOf('year');
+};
+
+onMounted(()=>{
+  //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
+        ],
+        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,
+    });
+  });
+})
+
+const columns = [
+  {
+    title: '本期时间',
+    dataIndex: 'name',
+  },
+  {
+    title: '本期能耗(kw.h)',
+    dataIndex: 'age',
+  },
+  {
+    title: '同比能耗(kw.h)',
+    dataIndex: 'address',
+  },
+  {
+    title: '同比(%)',
+    dataIndex: 'address',
+  },
+];
+
+const data = [...Array(32)].map((_, i) => ({
+  key: i,
+  name: `${i+1}`,
+  age: '--',
+  address: `--`,
+}));
 </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-bottom: 10px;">
+        <div>
+          年份
+          <DatePicker
+            style="margin: 0 10px;"
+            v-model:value="currentYear"
+            :disabled-date="disabledYear"
+            picker="year"
+          />
+          <a-button type="primary">
+            <template #icon><SearchOutlined /></template>
+            查询
+          </a-button>
+        </div>
+        <div id="year" style="height: 250px;width: 100%;"></div>
+      </div>
+      <div>
+        <Table
+          style="border-radius: 8px;"
+          :columns="columns"
+          :data-source="data"
+          :pagination="false"
+          :scroll="{ y: 270 }"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
-
+.box{
+  background-color: blue;
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: 30px;
+  padding: 10px;
+}
 </style>
diff --git a/apps/web-antd/src/views/property/waterPower/waterYOY/index.vue b/apps/web-antd/src/views/property/waterPower/waterYOY/index.vue
index 63cf316b..75e4e442 100644
--- a/apps/web-antd/src/views/property/waterPower/waterYOY/index.vue
+++ b/apps/web-antd/src/views/property/waterPower/waterYOY/index.vue
@@ -1,11 +1,173 @@
 <script setup lang="ts">
+import * as echarts from 'echarts';
+import {onMounted, ref} from "vue";
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import { Table } from 'ant-design-vue'
+import { DatePicker } from 'ant-design-vue';
+import { SearchOutlined } from '@ant-design/icons-vue';
 
+const currentYear = ref<Dayjs>(dayjs());
+const disabledYear = (current: Dayjs) => {
+  return current && current > dayjs().endOf('year');
+};
+
+onMounted(()=>{
+  //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,
+    });
+  });
+})
+
+const columns = [
+  {
+    title: '本期时间',
+    dataIndex: 'name',
+  },
+  {
+    title: '本期能耗(t)',
+    dataIndex: 'age',
+  },
+  {
+    title: '同比能耗(t)',
+    dataIndex: 'address',
+  },
+  {
+    title: '同比(%)',
+    dataIndex: 'address',
+  },
+];
+
+const data = [...Array(32)].map((_, i) => ({
+  key: i,
+  name: `${i+1}`,
+  age: '--',
+  address: `--`,
+}));
 </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-bottom: 10px;">
+        <div>
+          年份
+          <DatePicker
+            style="margin: 0 10px;"
+            v-model:value="currentYear"
+            :disabled-date="disabledYear"
+            picker="year"
+          />
+          <a-button type="primary">
+            <template #icon><SearchOutlined /></template>
+            查询
+          </a-button>
+        </div>
+        <div id="year" style="height: 250px;width: 100%;"></div>
+      </div>
+      <div>
+        <Table
+          style="border-radius: 8px;"
+          :columns="columns"
+          :data-source="data"
+          :pagination="false"
+          :scroll="{ y: 270 }"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
-
+.box{
+  background-color: blue;
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: 30px;
+  padding: 10px;
+}
 </style>