refactor(property): 重构用电趋势页面并优化图表展示

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

@@ -260,63 +260,6 @@ function handleSelectFloor() {
       <FloorTree class="w-[260px]"></FloorTree>
       <div class="flex-1 overflow-hidden">
         <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">
@@ -338,7 +281,6 @@ function handleSelectFloor() {
             <div class="section-header">
               <div class="header-title">日用电功率曲线</div>
             </div>
-            <!--          <div class="chart-placeholder" ref="powerCurveChart">-->
             <div class="power-chart" ref="powerCurveChart">
             </div>
           </div>

apps/web-antd/src/views/property/energyManagement/electricEnergy/electricTrend/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import * as echarts from 'echarts';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, nextTick } from 'vue';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import { Page } from '@vben/common-ui';
@@ -21,18 +21,19 @@ const disabledYear = (current: Dayjs) => {
   return current && current > dayjs().endOf('year');
 };
 
-const chartInstances = ref({
+const chartInstances = {
   day: null as echarts.ECharts | null,
   month: null as echarts.ECharts | null,
   year: null as echarts.ECharts | null,
-});
+};
 
 onMounted(() => {
   //day
   const chartDay = document.getElementById('day');
-  chartInstances.value.day = echarts.init(chartDay);
+  chartInstances.day = echarts.init(chartDay);
   const optionDay = {
     tooltip: {
+      show: true,
       trigger: 'axis',
     },
     legend: {
@@ -50,7 +51,32 @@ onMounted(() => {
       {
         type: 'category',
         name: '时',
-        data: [],
+        data: [
+          '0:00',
+          '1:00',
+          '2:00',
+          '3:00',
+          '4:00',
+          '5:00',
+          '6:00',
+          '7:00',
+          '8:00',
+          '9: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: [
@@ -59,33 +85,12 @@ onMounted(() => {
         name: 'KW.h',
       },
     ],
-    series: [
-      {
-        name: '当日',
-        type: 'bar',
-        data: [],
-        markPoint: {
-          data: [
-            { type: 'max', name: 'Max' },
-            { type: 'min', name: 'Min' },
-          ],
-        },
-      },
-    ],
-    dataZoom: [
-      {
-        type: 'inside',
-        xAxisIndex: 0,
-        zoomOnMouseWheel: true,
-        filterMode: 'filter',
-      },
-    ],
   };
-  optionDay && chartInstances.value.day.setOption(optionDay);
+  optionDay && chartInstances.day.setOption(optionDay);
 
   //month
   const chartMonth = document.getElementById('month');
-  chartInstances.value.month = echarts.init(chartMonth);
+  chartInstances.month = echarts.init(chartMonth);
   const optionMonth = {
     tooltip: {
       trigger: 'axis',
@@ -105,7 +110,10 @@ onMounted(() => {
       {
         type: 'category',
         name: '日',
-        data: [],
+        data: [
+          1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
+          21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
+        ],
       },
     ],
     yAxis: [
@@ -114,19 +122,6 @@ onMounted(() => {
         name: 'KW.h',
       },
     ],
-    series: [
-      {
-        name: '当月',
-        type: 'bar',
-        data: [],
-        markPoint: {
-          data: [
-            { type: 'max', name: 'Max' },
-            { type: 'min', name: 'Min' },
-          ],
-        },
-      },
-    ],
     dataZoom: [
       {
         type: 'inside',
@@ -136,11 +131,11 @@ onMounted(() => {
       },
     ],
   };
-  optionMonth && chartInstances.value.month.setOption(optionMonth);
+  optionMonth && chartInstances.month.setOption(optionMonth);
 
   //year
   const chartYear = document.getElementById('year');
-  chartInstances.value.year = echarts.init(chartYear);
+  chartInstances.year = echarts.init(chartYear);
   const optionYear = {
     tooltip: {
       trigger: 'axis',
@@ -160,7 +155,7 @@ onMounted(() => {
       {
         type: 'category',
         name: '月',
-        data: [],
+        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
       },
     ],
     yAxis: [
@@ -169,19 +164,6 @@ onMounted(() => {
         name: 'KW.h',
       },
     ],
-    series: [
-      {
-        name: '当年',
-        type: 'bar',
-        data: [],
-        markPoint: {
-          data: [
-            { type: 'max', name: 'Max' },
-            { type: 'min', name: 'Min' },
-          ],
-        },
-      },
-    ],
     dataZoom: [
       {
         type: 'inside',
@@ -191,11 +173,11 @@ onMounted(() => {
       },
     ],
   };
-  optionYear && chartInstances.value.year.setOption(optionYear);
+  optionYear && chartInstances.year.setOption(optionYear);
 
   // 鼠标悬停时激活缩放
-  chartInstances.value.day.on('mouseover', { seriesIndex: 0 }, () => {
-    chartInstances.value.day.dispatchAction({
+  chartInstances.day.on('mouseover', { seriesIndex: 0 }, () => {
+    chartInstances.day.dispatchAction({
       type: 'takeGlobalCursor',
       key: 'dataZoomSelect',
       dataZoomSelectActive: true,
@@ -203,8 +185,8 @@ onMounted(() => {
   });
 
   // 鼠标离开时取消缩放
-  chartInstances.value.day.on('mouseout', { seriesIndex: 0 }, () => {
-    chartInstances.value.day.dispatchAction({
+  chartInstances.day.on('mouseout', { seriesIndex: 0 }, () => {
+    chartInstances.day.dispatchAction({
       type: 'takeGlobalCursor',
       key: 'dataZoomSelect',
       dataZoomSelectActive: false,
@@ -212,8 +194,8 @@ onMounted(() => {
   });
 
   // 鼠标悬停时激活缩放
-  chartInstances.value.year.on('mouseover', { seriesIndex: 0 }, () => {
-    chartInstances.value.year.dispatchAction({
+  chartInstances.year.on('mouseover', { seriesIndex: 0 }, () => {
+    chartInstances.year.dispatchAction({
       type: 'takeGlobalCursor',
       key: 'dataZoomSelect',
       dataZoomSelectActive: true,
@@ -221,8 +203,8 @@ onMounted(() => {
   });
 
   // 鼠标离开时取消缩放
-  chartInstances.value.year.on('mouseout', { seriesIndex: 0 }, () => {
-    chartInstances.value.year.dispatchAction({
+  chartInstances.year.on('mouseout', { seriesIndex: 0 }, () => {
+    chartInstances.year.dispatchAction({
       type: 'takeGlobalCursor',
       key: 'dataZoomSelect',
       dataZoomSelectActive: false,
@@ -230,8 +212,8 @@ onMounted(() => {
   });
 
   // 鼠标悬停时激活缩放
-  chartInstances.value.month.on('mouseover', { seriesIndex: 0 }, () => {
-    chartInstances.value.month.dispatchAction({
+  chartInstances.month.on('mouseover', { seriesIndex: 0 }, () => {
+    chartInstances.month.dispatchAction({
       type: 'takeGlobalCursor',
       key: 'dataZoomSelect',
       dataZoomSelectActive: true,
@@ -239,8 +221,8 @@ onMounted(() => {
   });
 
   // 鼠标离开时取消缩放
-  chartInstances.value.month.on('mouseout', { seriesIndex: 0 }, () => {
-    chartInstances.value.month.dispatchAction({
+  chartInstances.month.on('mouseout', { seriesIndex: 0 }, () => {
+    chartInstances.month.dispatchAction({
       type: 'takeGlobalCursor',
       key: 'dataZoomSelect',
       dataZoomSelectActive: false,
@@ -270,48 +252,93 @@ async function handleSelectFloor(selectedKeys, info) {
   const trend = await meterRecordTrend(data);
 
   // 更新日数据图表
-  if (chartInstances.value.day && trend.hour) {
-    hourTotal.value = trend.hour.total;
-    chartInstances.value.day.setOption({
-      xAxis: {
-        data: trend.hour.categories || [],
-      },
+  if (chartInstances.day && trend.hour) {
+    hourTotal.value = trend.hour.today.total;
+    chartInstances.day.setOption({
       series: [
         {
-          name: '当月',
-          data: trend.hour.data || [],
+          name: '昨日',
+          type: 'bar',
+          data: trend.hour.yesterday.data || [],
+          markPoint: {
+            data: [
+              { type: 'max', name: 'Max' },
+              { type: 'min', name: 'Min' },
+            ],
+          },
+        },
+        {
+          name: '当日',
+          type: 'bar',
+          data: trend.hour.today.data || [],
+          markPoint: {
+            data: [
+              { type: 'max', name: 'Max' },
+              { type: 'min', name: 'Min' },
+            ],
+          },
         },
       ],
     });
   }
 
   // 更新月数据图表
-  if (chartInstances.value.month && trend.day) {
-    dayTotal.value = trend.day.total;
-    chartInstances.value.month.setOption({
-      xAxis: {
-        data: trend.day.categories || [],
-      },
+  if (chartInstances.month && trend.day) {
+    dayTotal.value = trend.day.nowMonth.total;
+    chartInstances.month.setOption({
       series: [
+        {
+          name: '上月',
+          type: 'bar',
+          data: trend.day.lastMonth.data || [],
+          markPoint: {
+            data: [
+              { type: 'max', name: 'Max' },
+              { type: 'min', name: 'Min' },
+            ],
+          },
+        },
         {
           name: '当月',
-          data: trend.day.data || [],
+          type: 'bar',
+          data: trend.day.nowMonth.data || [],
+          markPoint: {
+            data: [
+              { type: 'max', name: 'Max' },
+              { type: 'min', name: 'Min' },
+            ],
+          },
         },
       ],
     });
   }
 
   // 更新年数据图表
-  if (chartInstances.value.year && trend.month) {
-    monthTotal.value = trend.month.total;
-    chartInstances.value.year.setOption({
-      xAxis: {
-        data: trend.month.categories || [],
-      },
+  if (chartInstances.year && trend.month) {
+    monthTotal.value = trend.month.nowYear.total;
+    chartInstances.year.setOption({
       series: [
+        {
+          name: '去年',
+          type: 'bar',
+          data: trend.month.lastYear.data || [],
+          markPoint: {
+            data: [
+              { type: 'max', name: 'Max' },
+              { type: 'min', name: 'Min' },
+            ],
+          },
+        },
         {
           name: '当年',
-          data: trend.month.data || [],
+          type: 'bar',
+          data: trend.month.nowYear.data || [],
+          markPoint: {
+            data: [
+              { type: 'max', name: 'Max' },
+              { type: 'min', name: 'Min' },
+            ],
+          },
         },
       ],
     });
@@ -359,7 +386,7 @@ async function handleSelectFloor(selectedKeys, info) {
                 :disabled-date="disabledMonth"
                 picker="month"
               />
-              <span>当日能耗总值：{{ dayTotal }}KW.h</span>
+              <span>当月能耗总值：{{ dayTotal }}KW.h</span>
             </div>
           </div>
           <div id="month" style="height: 100%; width: 100%"></div>
@@ -380,7 +407,7 @@ async function handleSelectFloor(selectedKeys, info) {
                 :disabled-date="disabledYear"
                 picker="year"
               />
-              <span>当日能耗总值：{{ monthTotal }}KW.h</span>
+              <span>当年能耗总值：{{ monthTotal }}KW.h</span>
             </div>
           </div>
           <div id="year" style="height: 100%; width: 100%"></div>

apps/web-antd/src/views/property/resident/personPassRecordManagement/record-detail-modal.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { Empty } from "ant-design-vue";
+import { Empty } from 'ant-design-vue';
 import { useVbenModal } from '@vben/common-ui';
 
-
 const emit = defineEmits<{ reload: [] }>();
 
-const picture1 = ref('')
-const picture2 = ref('')
+const picture1 = ref('');
+const picture2 = ref('');
 // const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
 //   {
 //     initializedGetter: defaultFormValueGetter(formApi),
@@ -26,9 +25,9 @@ const [BasicModal, modalApi] = useVbenModal({
       return null;
     }
     modalApi.modalLoading(true);
-    const {data} = modalApi.getData() as { data:any };
+    const { data } = modalApi.getData() as { data: any };
     picture1.value = data.voucherUrl;
-    picture2.value = data.pictureUrl
+    picture2.value = data.pictureUrl;
     modalApi.modalLoading(false);
   },
 });
@@ -44,9 +43,7 @@ async function handleConfirm() {
     modalApi.lock(false);
   }
 }
-async function handleClosed() {
- 
-}
+async function handleClosed() {}
 </script>
 
 <template>
@@ -54,20 +51,35 @@ async function handleClosed() {
     <div class="detail-wrapper">
       <div class="detail-grid">
         <div class="detail-card">
-      <img class="detail-thumb" :src="picture1"></img>
+          <img v-if="picture1" class="detail-thumb" :src="picture1" />
+          <Empty
+            v-else
+            class="detail-thumb"
+            :image="Empty.PRESENTED_IMAGE_SIMPLE"
+            description="暂无数据"
+          />
           <div class="detail-caption">人脸凭证照片</div>
         </div>
         <div class="detail-card">
-      <Empty class="detail-thumb" :image="Empty.PRESENTED_IMAGE_SIMPLE"
-                   description="暂无数据" />
+          <Empty
+            class="detail-thumb"
+            :image="Empty.PRESENTED_IMAGE_SIMPLE"
+            description="暂无数据"
+          />
           <div class="detail-caption">监控设备抓拍</div>
         </div>
         <div class="detail-card">
-      <img class="detail-thumb" :src="picture2"></img>
+          <img v-if="picture2" class="detail-thumb" :src="picture2" />
+          <Empty
+            v-else
+            class="detail-thumb"
+            :image="Empty.PRESENTED_IMAGE_SIMPLE"
+            description="暂无数据"
+          />
           <div class="detail-caption">人脸门禁抓拍</div>
         </div>
       </div>
-</div>
+    </div>
   </BasicModal>
 </template>