首頁: 用電比較修改 | 系統監控元件卸載時清除計時器

src/config/cn.json

@@ -17,6 +17,8 @@
   "dashboard": {
     "yesterday_today": "昨天/今天",
     "elec_consumption_comparison": "用电量比较",
+    "elec_consumption_comparison_trend": "用电量比较趋势",
+    "electricity_consumption": "用电量",
     "today_electricity_consumption": "今日用电量",
     "yesterday_electricity_consumption": "昨天用电量",
     "this_last_week": "本周/上周",

src/config/tw.json

@@ -17,6 +17,8 @@
   "dashboard": {
     "yesterday_today": "昨天/今天",
     "elec_consumption_comparison": "用電量比較",
+    "elec_consumption_comparison_trend": "用電量比較趨勢",
+    "electricity_consumption": "用電量",
     "today_electricity_consumption": "今日用電量",
     "yesterday_electricity_consumption": "昨天用電量",
     "this_last_week": "本週/上週",

src/config/us.json

@@ -35,6 +35,8 @@
   "dashboard": {
     "yesterday_today": "Yesterday / Today's",
     "elec_consumption_comparison": "Electricity Consumption Comparison",
+    "elec_consumption_comparison_trend": "Electricity Consumption Comparison Trend",
+    "electricity_consumption": "electricity consumption",
     "today_electricity_consumption": "Today’s electricity consumption",
     "yesterday_electricity_consumption": "Yesterday’s electricity consumption",
     "this_last_week": "This Week's / Last Week's",

src/views/dashboard/components/DashboardElecChart.vue

@@ -2,18 +2,19 @@
 import { ref, onMounted } from "vue";
 import * as echarts from "echarts";
 import BarChart from "@/components/chart/BarChart.vue";
-
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
 // 定義用電比較資料
 const yesterdayTodayData = {
-  categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+  categories: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00"],
   values: [
     {
-      name: "Today's electricity consumption",
+      name: `2024.10.21 ${t("dashboard.electricity_consumption")}`,
-      value: [8, 8, 8, 8, 8, 15, 25, 65, 75, 60],
+      value: [8, 8, 8, 8, 8, 15, 25, 65, 75, 60, 70, 65],
     },
     {
-      name: "Yesterday's electricity consumption",
+      name: `2024.10.20 ${t("dashboard.electricity_consumption")}`,
-      value: [10, 10, 10, 10, 10, 20, 30, 80, 90, 70],
+      value: [10, 10, 10, 10, 10, 20, 30, 80, 90, 70, 80, 85],
     },
   ],
 };
@@ -23,11 +24,11 @@ const weekComparisonData = {
   categories: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
   values: [
     {
-      name: "This week's electricity consumption",
+      name: `${t("dashboard.thisweek_electricity_consumption")}`,
       value: [850, 200, 350, 850, 950, 950, 900],
     },
     {
-      name: "Last week's electricity consumption",
+      name: `${t("dashboard.lastweek_electricity_consumption")}`,
       value: [800, 150, 300, 750, 900, 900, 800],
     },
   ],
@@ -201,17 +202,17 @@ const weekComparisonOption = generateCylinderChartOption(
       <div class="flex flex-wrap items-center">
         <h2 class="text-xs font-light w-1/2 relative">
           {{ $t("dashboard.yesterday_today") }}<br />
-          {{ $t("dashboard.elec_consumption_comparison") }}
+          {{ $t("dashboard.elec_consumption_comparison_trend") }}
           (kWH)
         </h2>
         <div class="w-[48%]">
           <div class="text-con">
             <img src="@ASSET/img/chart-title01.svg" />
-            <span>{{ $t("dashboard.today_electricity_consumption") }}</span>
+            <span>2024.10.20 {{ $t("dashboard.electricity_consumption") }}</span>
           </div>
           <div class="text-con">
             <img src="@ASSET/img/chart-title02.svg" />
-            <span>{{ $t("dashboard.yesterday_electricity_consumption") }}</span>
+            <span>2024.10.21 {{ $t("dashboard.electricity_consumption") }}</span>
           </div>
         </div>
       </div>

src/views/system/System.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { RouterView, useRoute } from 'vue-router';
-import { computed, watch, provide, ref, onMounted } from "vue";
+import { computed, watch, provide, ref, onMounted, onBeforeUnmount } from "vue";
 import SystemFloorBar from './components/SystemFloorBar.vue';
 import useBuildingStore from "@/stores/useBuildingStore";
 import ForgeForSystem from "@/components/forge/ForgeForSystem.vue";
@@ -220,6 +220,9 @@ const clearSelectedDeviceInfo = () => {
 
 provide("system_selectedDevice", { selectedDeviceRealtime, selectedDevice, getCurrentInfoModalData, clearSelectedDeviceInfo, selectedDeviceCog, })
 
+onBeforeUnmount(() => {
+  clearInterval(timeId.value);
+});
 </script>
 
 <template>