refactor(property): 重构能源管理和通行记录模块

2025-08-28 15:05:10 +08:00
parent d2102ac20a
commit 4a4cbb6075
4 changed files with 231 additions and 307 deletions
--- a/apps/web-antd/src/views/property/energyManagement/electricEnergy/electricTrend/index.vue
+++ b/apps/web-antd/src/views/property/energyManagement/electricEnergy/electricTrend/index.vue
@@ -1,374 +1,262 @@
 <script setup lang="ts">
-import * as echarts from "echarts";
-import { onMounted, ref } from "vue";
-import type { Dayjs } from "dayjs";
-import dayjs from "dayjs";
-import { Page } from "@vben/common-ui";
-import { DatePicker } from "ant-design-vue";
-import FloorTree from "../components/floor-tree.vue";
-import { meterRecordTrend } from "#/api/property/energyManagement/meterRecord";
+import * as echarts from 'echarts';
+import { onMounted, ref } from 'vue';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import { Page } from '@vben/common-ui';
+import { DatePicker } from 'ant-design-vue';
+import FloorTree from '../components/floor-tree.vue';
+import { meterRecordTrend } from '#/api/property/energyManagement/meterRecord';

 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");
+  return current && current > dayjs().endOf('day');
 };
 const disabledMonth = (current: Dayjs) => {
-  return current && current > dayjs().endOf("month");
+  return current && current > dayjs().endOf('month');
 };
 const disabledYear = (current: Dayjs) => {
-  return current && current > dayjs().endOf("year");
+  return current && current > dayjs().endOf('year');
 };

+const chartInstances = ref({
+  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");
-  const myChartDay = echarts.init(chartDay);
+  const chartDay = document.getElementById('day');
+  chartInstances.value.day = echarts.init(chartDay);
  const optionDay = {
    tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
    },
    legend: {
-      data: ["当日", "昨日"],
+      data: ['当日', '昨日'],
    },
    toolbox: {
      show: true,
      feature: {
-        magicType: { show: true, type: ["line", "bar"] },
+        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
      },
    },
    calculable: true,
    xAxis: [
      {
-        type: "category",
-        name: "时",
-        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",
-        ],
+        type: 'category',
+        name: '时',
+        data: [],
      },
    ],
    yAxis: [
      {
-        type: "value",
-        name: "KW.h",
+        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,
-        ],
+        name: '当日',
+        type: 'bar',
+        data: [],
        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, 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" },
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' },
          ],
        },
      },
    ],
    dataZoom: [
      {
-        type: "inside",
+        type: 'inside',
        xAxisIndex: 0,
        zoomOnMouseWheel: true,
-        filterMode: "filter",
+        filterMode: 'filter',
      },
    ],
  };
-  optionDay && myChartDay.setOption(optionDay);
+  optionDay && chartInstances.value.day.setOption(optionDay);

  //month
-  const chartMonth = document.getElementById("month");
-  const myChartMonth = echarts.init(chartMonth);
+  const chartMonth = document.getElementById('month');
+  chartInstances.value.month = echarts.init(chartMonth);
  const optionMonth = {
    tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
    },
    legend: {
-      data: ["当月", "上月"],
+      data: ['当月', '上月'],
    },
    toolbox: {
      show: true,
      feature: {
-        magicType: { show: true, type: ["line", "bar"] },
+        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",
-        ],
+        type: 'category',
+        name: '日',
+        data: [],
      },
    ],
    yAxis: [
      {
-        type: "value",
-        name: "KW.h",
+        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,
-        ],
+        name: '当月',
+        type: 'bar',
+        data: [],
        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" },
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' },
          ],
        },
      },
    ],
    dataZoom: [
      {
-        type: "inside",
+        type: 'inside',
        xAxisIndex: 0,
        zoomOnMouseWheel: true,
-        filterMode: "filter",
+        filterMode: 'filter',
      },
    ],
  };
-  optionMonth && myChartMonth.setOption(optionMonth);
+  optionMonth && chartInstances.value.month.setOption(optionMonth);

  //year
-  const chartYear = document.getElementById("year");
-  const myChartYear = echarts.init(chartYear);
+  const chartYear = document.getElementById('year');
+  chartInstances.value.year = echarts.init(chartYear);
  const optionYear = {
    tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
    },
    legend: {
-      data: ["当年", "去年"],
+      data: ['当年', '去年'],
    },
    toolbox: {
      show: true,
      feature: {
-        magicType: { show: true, type: ["line", "bar"] },
+        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",
-        ],
+        type: 'category',
+        name: '月',
+        data: [],
      },
    ],
    yAxis: [
      {
-        type: "value",
-        name: "KW.h",
+        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,
-        ],
+        name: '当年',
+        type: 'bar',
+        data: [],
        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" },
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' },
          ],
        },
      },
    ],
    dataZoom: [
      {
-        type: "inside",
+        type: 'inside',
        xAxisIndex: 0,
        zoomOnMouseWheel: true,
-        filterMode: "filter",
+        filterMode: 'filter',
      },
    ],
  };
-  optionYear && myChartYear.setOption(optionYear);
+  optionYear && chartInstances.value.year.setOption(optionYear);

  // 鼠标悬停时激活缩放
-  myChartDay.on("mouseover", { seriesIndex: 0 }, () => {
-    myChartDay.dispatchAction({
-      type: "takeGlobalCursor",
-      key: "dataZoomSelect",
+  chartInstances.value.day.on('mouseover', { seriesIndex: 0 }, () => {
+    chartInstances.value.day.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
      dataZoomSelectActive: true,
    });
  });

  // 鼠标离开时取消缩放
-  myChartDay.on("mouseout", { seriesIndex: 0 }, () => {
-    myChartDay.dispatchAction({
-      type: "takeGlobalCursor",
-      key: "dataZoomSelect",
+  chartInstances.value.day.on('mouseout', { seriesIndex: 0 }, () => {
+    chartInstances.value.day.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
      dataZoomSelectActive: false,
    });
  });

  // 鼠标悬停时激活缩放
-  myChartYear.on("mouseover", { seriesIndex: 0 }, () => {
-    myChartYear.dispatchAction({
-      type: "takeGlobalCursor",
-      key: "dataZoomSelect",
+  chartInstances.value.year.on('mouseover', { seriesIndex: 0 }, () => {
+    chartInstances.value.year.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
      dataZoomSelectActive: true,
    });
  });

  // 鼠标离开时取消缩放
-  myChartYear.on("mouseout", { seriesIndex: 0 }, () => {
-    myChartYear.dispatchAction({
-      type: "takeGlobalCursor",
-      key: "dataZoomSelect",
+  chartInstances.value.year.on('mouseout', { seriesIndex: 0 }, () => {
+    chartInstances.value.year.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
      dataZoomSelectActive: false,
    });
  });

  // 鼠标悬停时激活缩放
-  myChartMonth.on("mouseover", { seriesIndex: 0 }, () => {
-    myChartMonth.dispatchAction({
-      type: "takeGlobalCursor",
-      key: "dataZoomSelect",
+  chartInstances.value.month.on('mouseover', { seriesIndex: 0 }, () => {
+    chartInstances.value.month.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
      dataZoomSelectActive: true,
    });
  });

  // 鼠标离开时取消缩放
-  myChartMonth.on("mouseout", { seriesIndex: 0 }, () => {
-    myChartMonth.dispatchAction({
-      type: "takeGlobalCursor",
-      key: "dataZoomSelect",
+  chartInstances.value.month.on('mouseout', { seriesIndex: 0 }, () => {
+    chartInstances.value.month.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
      dataZoomSelectActive: false,
    });
  });
 });

-function handleSelectFloor(selectedKeys, info) {
+const trendData = ref<any>({});
+async function handleSelectFloor(selectedKeys, info) {
  let data = {
-    day: currentDay.value.format("YYYY-MM-DD"),
-    month: currentMonth.value.format("YYYY-MM"),
-    year: currentYear.value.format("YYYY"),
+    day: currentDay.value.format('YYYY-MM-DD'),
+    month: currentMonth.value.format('YYYY-MM'),
+    year: currentYear.value.format('YYYY'),
    meterType: 1,
+    meterId: null,
+    floorId: null,
  };

  if (info.node.level == 3) {
@@ -377,47 +265,117 @@ function handleSelectFloor(selectedKeys, info) {
    data.meterId = selectedKeys[0];
  }

-  meterRecordTrend(data);
+  const trend = await meterRecordTrend(data);
+
+  // 更新日数据图表
+  if (chartInstances.value.day && trend.hour) {
+    chartInstances.value.day.setOption({
+      xAxis: {
+        data: trend.hour.categories || [],
+      },
+      series: [
+        {
+          name: '当月',
+          data: trend.hour.data || [],
+        },
+      ],
+    });
+  }
+
+  // 更新月数据图表
+  if (chartInstances.value.month && trend.day) {
+    chartInstances.value.month.setOption({
+      xAxis: {
+        data: trend.day.categories || [],
+      },
+      series: [
+        {
+          name: '当月',
+          data: trend.day.data || [],
+        },
+      ],
+    });
+  }
+
+  // 更新年数据图表
+  if (chartInstances.value.year && trend.month) {
+    chartInstances.value.year.setOption({
+      xAxis: {
+        data: trend.month.categories || [],
+      },
+      series: [
+        {
+          name: '当年',
+          data: trend.month.data || [],
+        },
+      ],
+    });
+  }
 }
 </script>

 <template>
  <Page :auto-content-height="true">
    <div class="flex h-full gap-[8px]">
-      <FloorTree class="w-[260px]"
-                 @select="handleSelectFloor"></FloorTree>
-      <div class=" flex-1 overflow-hidden">
-        <div style="background: #fff;border-radius: 8px;padding: 10px;height: 33%">
+      <FloorTree class="w-[260px]" @select="handleSelectFloor"></FloorTree>
+      <div class="flex-1 overflow-hidden">
+        <div
+          style="
+            background: #fff;
+            border-radius: 8px;
+            padding: 10px;
+            height: 33%;
+          "
+        >
          <div>
-            <div style="display: flex;justify-content: space-between;">
-              <DatePicker v-model:value="currentDay"
-                          :disabled-date="disabledDay" />当日能耗总值：125.04KW.h
+            <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: 100%;width: 100%;"></div>
+          <div id="day" style="height: 100%; width: 100%"></div>
        </div>
-        <div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 16px;height: 33%">
+        <div
+          style="
+            background: #fff;
+            border-radius: 8px;
+            padding: 10px;
+            margin-top: 16px;
+            height: 33%;
+          "
+        >
          <div>
-            <div style="display: flex;justify-content: space-between;">
-              <DatePicker v-model:value="currentMonth"
-                          :disabled-date="disabledMonth"
-                          picker="month" />当月能耗总值：125.04KW.h
+            <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: 100%;width: 100%;"></div>
+          <div id="month" style="height: 100%; width: 100%"></div>
        </div>
-        <div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 16px;height: 33%">
+        <div
+          style="
+            background: #fff;
+            border-radius: 8px;
+            padding: 10px;
+            margin-top: 16px;
+            height: 33%;
+          "
+        >
          <div>
-            <div style="display: flex;justify-content: space-between;">
-              <DatePicker v-model:value="currentYear"
-                          :disabled-date="disabledYear"
-                          picker="year" />当年能耗总值：125.04KW.h
+            <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: 100%;width: 100%;"></div>
+          <div id="year" style="height: 100%; width: 100%"></div>
        </div>
      </div>
    </div>