feat(waterTrend): 水耗趋势页面

apps/web-antd/src/views/property/energyManagement/waterPower/waterTrend/index.vue

@@ -1,80 +1,126 @@
 <script setup lang="ts">
-import dayjs from 'dayjs'
-import type { Dayjs } from 'dayjs'
-import * as echarts from 'echarts'
-import { onMounted, ref } from "vue"
-import { Page } from '@vben/common-ui'
-import { DatePicker } from 'ant-design-vue'
-import FloorTree from "../components/floor-tree.vue"
+import * as echarts from 'echarts';
+import { onMounted, ref, nextTick } 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 currentMonth = ref<Dayjs>(dayjs())
-const currentYear = ref<Dayjs>(dayjs())
+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')
-}
+  return current && current > dayjs().endOf('month');
+};
 const disabledYear = (current: Dayjs) => {
-  return current && current > dayjs().endOf('year')
-}
+  return current && current > dayjs().endOf('year');
+};
+
+const chartInstances = {
+  day: null as echarts.ECharts | null,
+  month: null as echarts.ECharts | null,
+  year: null as echarts.ECharts | null,
+};
 
 onMounted(() => {
-  //month
-  const chartMonth = document.getElementById('month')
-  const myChartMonth = echarts.init(chartMonth)
-  const optionMonth = {
+  //day
+  const chartDay = document.getElementById('day');
+  chartInstances.day = echarts.init(chartDay);
+  const optionDay = {
     tooltip: {
-      trigger: 'axis'
+      show: true,
+      trigger: 'axis',
     },
     legend: {
-      data: ['当月', '上月']
+      data: ['当日', '昨日'],
     },
     toolbox: {
       show: true,
       feature: {
         magicType: { show: true, type: ['line', 'bar'] },
         restore: { show: true },
-      }
+      },
+    },
+    calculable: true,
+    xAxis: [
+      {
+        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: [
+      {
+        type: 'value',
+        name: 'KW.h',
+      },
+    ],
+  };
+  optionDay && chartInstances.day.setOption(optionDay);
+
+  //month
+  const chartMonth = document.getElementById('month');
+  chartInstances.month = 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']
-      }
+        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: [
       {
         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: 'KW.h',
       },
-      },
-      {
-        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: [
       {
@@ -84,67 +130,39 @@ onMounted(() => {
         filterMode: 'filter',
       },
     ],
-  }
-  optionMonth && myChartMonth.setOption(optionMonth)
+  };
+  optionMonth && chartInstances.month.setOption(optionMonth);
 
   //year
-  const chartYear = document.getElementById('year')
-  const myChartYear = echarts.init(chartYear)
+  const chartYear = document.getElementById('year');
+  chartInstances.year = echarts.init(chartYear);
   const optionYear = {
     tooltip: {
-      trigger: 'axis'
+      trigger: 'axis',
     },
     legend: {
-      data: ['当年', '去年']
+      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']
-      }
+        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 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: 'KW.h',
       },
-      },
-      {
-        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: [
       {
@@ -154,67 +172,263 @@ onMounted(() => {
         filterMode: 'filter',
       },
     ],
+  };
+  optionYear && chartInstances.year.setOption(optionYear);
+
+  // 鼠标悬停时激活缩放
+  chartInstances.day.on('mouseover', { seriesIndex: 0 }, () => {
+    chartInstances.day.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: true,
+    });
+  });
+
+  // 鼠标离开时取消缩放
+  chartInstances.day.on('mouseout', { seriesIndex: 0 }, () => {
+    chartInstances.day.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: false,
+    });
+  });
+
+  // 鼠标悬停时激活缩放
+  chartInstances.year.on('mouseover', { seriesIndex: 0 }, () => {
+    chartInstances.year.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: true,
+    });
+  });
+
+  // 鼠标离开时取消缩放
+  chartInstances.year.on('mouseout', { seriesIndex: 0 }, () => {
+    chartInstances.year.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: false,
+    });
+  });
+
+  // 鼠标悬停时激活缩放
+  chartInstances.month.on('mouseover', { seriesIndex: 0 }, () => {
+    chartInstances.month.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: true,
+    });
+  });
+
+  // 鼠标离开时取消缩放
+  chartInstances.month.on('mouseout', { seriesIndex: 0 }, () => {
+    chartInstances.month.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: false,
+    });
+  });
+});
+
+const hourTotal = ref<number>();
+const dayTotal = ref<number>();
+const monthTotal = ref<number>();
+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'),
+    meterType: 2,
+    meterId: null,
+    floorId: null,
+  };
+
+  if (info.node.level == 3) {
+    data.floorId = selectedKeys[0];
+  } else {
+    data.meterId = selectedKeys[0];
   }
-  optionYear && myChartYear.setOption(optionYear)
 
-  // 鼠标悬停时激活缩放
-  myChartYear.on('mouseover', { seriesIndex: 0 }, () => {
-    myChartYear.dispatchAction({
-      type: 'takeGlobalCursor',
-      key: 'dataZoomSelect',
-      dataZoomSelectActive: true,
-    })
-  })
+  const trend = await meterRecordTrend(data);
 
-  // 鼠标离开时取消缩放
-  myChartYear.on('mouseout', { seriesIndex: 0 }, () => {
-    myChartYear.dispatchAction({
-      type: 'takeGlobalCursor',
-      key: 'dataZoomSelect',
-      dataZoomSelectActive: false,
-    })
-  })
+  // 更新日数据图表
+  if (chartInstances.day && trend.hour) {
+    hourTotal.value = trend.hour.today.total;
+    chartInstances.day.setOption({
+      series: [
+        {
+          name: '昨日',
+          type: 'bar',
+          data: trend.hour.yesterday.data || [],
+          markPoint: {
+            data: [
+              { type: 'max', name: 'Max' },
+              { type: 'min', name: 'Min' },
+            ],
+          },
+          markLine: {
+            data: [{ type: 'average', name: 'Avg' }],
+          },
+        },
+        {
+          name: '当日',
+          type: 'bar',
+          data: trend.hour.today.data || [],
+          markPoint: {
+            data: [
+              { type: 'max', name: 'Max' },
+              { type: 'min', name: 'Min' },
+            ],
+          },
+          markLine: {
+            data: [{ type: 'average', name: 'Avg' }],
+          },
+        },
+      ],
+    });
+  }
 
-  // 鼠标悬停时激活缩放
-  myChartMonth.on('mouseover', { seriesIndex: 0 }, () => {
-    myChartMonth.dispatchAction({
-      type: 'takeGlobalCursor',
-      key: 'dataZoomSelect',
-      dataZoomSelectActive: true,
-    })
-  })
+  // 更新月数据图表
+  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' },
+            ],
+          },
+          markLine: {
+            data: [{ type: 'average', name: 'Avg' }],
+          },
+        },
+        {
+          name: '当月',
+          type: 'bar',
+          data: trend.day.nowMonth.data || [],
+          markPoint: {
+            data: [
+              { type: 'max', name: 'Max' },
+              { type: 'min', name: 'Min' },
+            ],
+          },
+          markLine: {
+            data: [{ type: 'average', name: 'Avg' }],
+          },
+        },
+      ],
+    });
+  }
 
-  // 鼠标离开时取消缩放
-  myChartMonth.on('mouseout', { seriesIndex: 0 }, () => {
-    myChartMonth.dispatchAction({
-      type: 'takeGlobalCursor',
-      key: 'dataZoomSelect',
-      dataZoomSelectActive: false,
-    })
-  })
-})
+  // 更新年数据图表
+  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' },
+            ],
+          },
+          markLine: {
+            data: [{ type: 'average', name: 'Avg' }],
+          },
+        },
+        {
+          name: '当年',
+          type: 'bar',
+          data: trend.month.nowYear.data || [],
+          markPoint: {
+            data: [
+              { type: 'max', name: 'Max' },
+              { type: 'min', name: 'Min' },
+            ],
+          },
+          markLine: {
+            data: [{ type: 'average', name: 'Avg' }],
+          },
+        },
+      ],
+    });
+  }
+}
 </script>
 
 <template>
   <Page :auto-content-height="true">
     <div class="flex h-full gap-[8px]">
-      <FloorTree class="w-[260px]"></FloorTree>
+      <FloorTree class="w-[260px]" @select="handleSelectFloor"></FloorTree>
       <div class="flex-1 overflow-hidden">
-        <div style="background: #fff;border-radius: 8px;padding: 10px;height: 50%;">
+        <div
+          style="
+            background: #fff;
+            border-radius: 8px;
+            padding: 10px;
+            height: 33%;
+          "
+        >
           <div>
-            <div style="display: flex;justify-content: space-between;">
-              <DatePicker v-model:value="currentMonth" :disabled-date="disabledMonth" picker="month" />当月能耗总值：30.00t
+            <div style="display: flex; justify-content: space-between">
+              <DatePicker
+                v-model:value="currentDay"
+                :disabled-date="disabledDay"
+              />
+              <span>当日能耗总值：{{ hourTotal }}立方米</span>
             </div>
           </div>
-          <div id="month" 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: 50%;">
+        <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" />当年能耗总值：59.00t
+            <div style="display: flex; justify-content: space-between">
+              <DatePicker
+                v-model:value="currentMonth"
+                :disabled-date="disabledMonth"
+                picker="month"
+              />
+              <span>当月能耗总值：{{ dayTotal }}立方米</span>
             </div>
           </div>
-          <div id="year" 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>
+            <div style="display: flex; justify-content: space-between">
+              <DatePicker
+                v-model:value="currentYear"
+                :disabled-date="disabledYear"
+                picker="year"
+              />
+              <span>当年能耗总值：{{ monthTotal }}立方米</span>
+            </div>
+          </div>
+          <div id="year" style="height: 100%; width: 100%"></div>
         </div>
       </div>
     </div>