refactor(property): 1

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import * as echarts from 'echarts';
-import { onMounted, ref, nextTick } from 'vue';
-import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
+import { Dayjs } from 'dayjs';
+import * as echarts from 'echarts';
 import { Page } from '@vben/common-ui';
 import { DatePicker } from 'ant-design-vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import FloorTree from '../components/floor-tree.vue';
 import { meterRecordTrend } from '#/api/property/energyManagement/meterRecord';
 
@@ -21,13 +21,24 @@ const disabledYear = (current: Dayjs) => {
   return current && current > dayjs().endOf('year');
 };
 
+onMounted(() => {
+  setTimeout(() => {
+    initChart();
+  }, 300);
+  window.addEventListener('resize', resizeChart);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizeChart);
+});
+
 const chartInstances = {
   day: null as echarts.ECharts | null,
   month: null as echarts.ECharts | null,
   year: null as echarts.ECharts | null,
 };
 
-onMounted(() => {
+function initChart() {
   //day
   const chartDay = document.getElementById('day');
   chartInstances.day = echarts.init(chartDay);
@@ -36,14 +47,10 @@ onMounted(() => {
       show: true,
       trigger: 'axis',
     },
-    legend: {
-      data: ['当日', '昨日'],
-    },
     toolbox: {
       show: true,
       feature: {
         magicType: { show: true, type: ['line', 'bar'] },
-        restore: { show: true },
       },
     },
     calculable: true,
@@ -51,32 +58,6 @@ onMounted(() => {
       {
         type: 'category',
         name: '时',
-        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: [
@@ -95,14 +76,10 @@ onMounted(() => {
     tooltip: {
       trigger: 'axis',
     },
-    legend: {
-      data: ['当月', '上月'],
-    },
     toolbox: {
       show: true,
       feature: {
         magicType: { show: true, type: ['line', 'bar'] },
-        restore: { show: true },
       },
     },
     calculable: true,
@@ -110,10 +87,6 @@ onMounted(() => {
       {
         type: 'category',
         name: '日',
-        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: [
@@ -140,14 +113,10 @@ onMounted(() => {
     tooltip: {
       trigger: 'axis',
     },
-    legend: {
-      data: ['当年', '去年'],
-    },
     toolbox: {
       show: true,
       feature: {
         magicType: { show: true, type: ['line', 'bar'] },
-        restore: { show: true },
       },
     },
     calculable: true,
@@ -155,7 +124,6 @@ onMounted(() => {
       {
         type: 'category',
         name: '月',
-        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
       },
     ],
     yAxis: [
@@ -228,7 +196,13 @@ onMounted(() => {
       dataZoomSelectActive: false,
     });
   });
-});
+}
+
+function resizeChart() {
+  chartInstances.day && chartInstances.day.resize();
+  chartInstances.month && chartInstances.month.resize();
+  chartInstances.year && chartInstances.year.resize();
+}
 
 const hourTotal = ref<number>();
 const dayTotal = ref<number>();
@@ -253,11 +227,18 @@ async function handleSelectFloor(selectedKeys, info) {
 
   // 更新日数据图表
   if (chartInstances.day && trend.hour) {
+    const yesterday = currentDay.value
+      .clone()
+      .subtract(1, 'day')
+      .format('YYYY-MM-DD');
     hourTotal.value = trend.hour.today.total;
     chartInstances.day.setOption({
+      legend: {
+        data: [yesterday, data.day],
+      },
       series: [
         {
-          name: '昨日',
+          name: yesterday,
           type: 'bar',
           data: trend.hour.yesterday.data || [],
           markPoint: {
@@ -271,7 +252,7 @@ async function handleSelectFloor(selectedKeys, info) {
           },
         },
         {
-          name: '当日',
+          name: data.day,
           type: 'bar',
           data: trend.hour.today.data || [],
           markPoint: {
@@ -290,11 +271,18 @@ async function handleSelectFloor(selectedKeys, info) {
 
   // 更新月数据图表
   if (chartInstances.month && trend.day) {
+    const lastMonth = currentDay.value
+      .clone()
+      .subtract(1, 'month')
+      .format('YYYY-MM');
     dayTotal.value = trend.day.nowMonth.total;
     chartInstances.month.setOption({
+      legend: {
+        data: [lastMonth, data.month],
+      },
       series: [
         {
-          name: '上月',
+          name: lastMonth,
           type: 'bar',
           data: trend.day.lastMonth.data || [],
           markPoint: {
@@ -308,7 +296,7 @@ async function handleSelectFloor(selectedKeys, info) {
           },
         },
         {
-          name: '当月',
+          name: data.month,
           type: 'bar',
           data: trend.day.nowMonth.data || [],
           markPoint: {
@@ -327,11 +315,18 @@ async function handleSelectFloor(selectedKeys, info) {
 
   // 更新年数据图表
   if (chartInstances.year && trend.month) {
+    const lastYear = currentDay.value
+      .clone()
+      .subtract(1, 'year')
+      .format('YYYY');
     monthTotal.value = trend.month.nowYear.total;
     chartInstances.year.setOption({
+      legend: {
+        data: [lastYear, data.year],
+      },
       series: [
         {
-          name: '去年',
+          name: lastYear,
           type: 'bar',
           data: trend.month.lastYear.data || [],
           markPoint: {
@@ -345,7 +340,7 @@ async function handleSelectFloor(selectedKeys, info) {
           },
         },
         {
-          name: '当年',
+          name: data.year,
           type: 'bar',
           data: trend.month.nowYear.data || [],
           markPoint: {