From 14187ad9bc38738be19544c583b92ac0f7ef067e Mon Sep 17 00:00:00 2001 From: ko1234 Date: Wed, 21 May 2025 18:00:17 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A0=81UI=E8=AA=BF=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 7 -- package.json | 1 - src/config/cn.json | 26 ++++-- src/config/tw.json | 50 +++++++---- src/config/us.json | 26 ++++-- src/main.js | 1 - .../components/DashboardElecRank.vue | 89 +++++++++++-------- .../dashboard/components/DashboardStat.vue | 10 ++- .../components/DashboardSysProgress.vue | 48 ++++------ .../components/DashboardSysProgressModal.vue | 56 ++++++++++-- .../EnergyChart/MonthlyElecBillChart.vue | 4 +- .../components/SystemInfoModalDesktop.vue | 18 +++- 12 files changed, 211 insertions(+), 125 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5156f20..1b86ebb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,6 @@ "date-fns": "^3.3.1", "dayjs": "^1.11.10", "echarts": "^5.4.3", - "flag-icons": "^7.2.3", "jquery-ui": "^1.14.1", "json-schema-generator": "^2.0.6", "mqtt": "^5.10.3", @@ -2621,12 +2620,6 @@ "node": ">=8" } }, - "node_modules/flag-icons": { - "version": "7.2.3", - "resolved": "https://registry.npmjs.org/flag-icons/-/flag-icons-7.2.3.tgz", - "integrity": "sha512-X2gUdteNuqdNqob2KKTJTS+ZCvyWeLCtDz9Ty8uJP17Y4o82Y+U/Vd4JNrdwTAjagYsRznOn9DZ+E/Q52qbmqg==", - "license": "MIT" - }, "node_modules/follow-redirects": { "version": "1.15.3", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", diff --git a/package.json b/package.json index aae4f0a..abef3dc 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,6 @@ "date-fns": "^3.3.1", "dayjs": "^1.11.10", "echarts": "^5.4.3", - "flag-icons": "^7.2.3", "jquery-ui": "^1.14.1", "json-schema-generator": "^2.0.6", "mqtt": "^5.10.3", diff --git a/src/config/cn.json b/src/config/cn.json index 7630185..e416b64 100644 --- a/src/config/cn.json +++ b/src/config/cn.json @@ -8,7 +8,10 @@ "table": { "no_data": "表中数据为空", "in_otal": "笔资料", - "skip_to": "跳至" + "skip_to": "跳至", + "serial_number": "序列号", + "name": "名称", + "time": "时间" }, "upload": { "title": "选择一个文件或拖放到这里", @@ -20,8 +23,10 @@ "elec_consumption_comparison": "用电量比较", "elec_consumption_comparison_trend": "用电量比较趋势", "electricity_consumption": "用电量", - "today_electricity_consumption": "今日用电量", - "yesterday_electricity_consumption": "昨天用电量", + "today_electricity_consumption": "今日用电量 ( kWH )", + "yesterday_electricity_consumption": "昨天用电量 ( kWH )", + "instant_power": "即时功率 ( kW )", + "instant_contract_capacity_ratio": "契約容量佔比 ( % )", "this_last_week": "本周/上周", "thisweek_electricity_consumption": "本周用电量", "lastweek_electricity_consumption": "上周用电量", @@ -44,7 +49,9 @@ "this_month": "本月", "last_month": "上月", "this_year": "今年", - "last_year": "去年" + "last_year": "去年", + "work_order": "工单", + "system_status": "系统状态" }, "history": { "title": "历史资料", @@ -174,7 +181,7 @@ "alarmClass": "告警条件", "device_name": "设备名称", "device_number": "设备编号", - "device_point_name":"点位名称", + "device_point_name": "点位名称", "date": "发生日期", "time": "发生时间", "error_msg": "异常原因", @@ -231,7 +238,10 @@ "saturday": "星期六", "schedule_name": "时段名称", "schedule_content": "时段内容", - "reorganization": "MQTT 告警重整" + "reorganization": "MQTT 告警重整", + "online": "在线", + "offline": "离线", + "alarm": "告警" }, "operation": { "title": "运维管理", @@ -260,6 +270,8 @@ "responsible_vendor": "负责厂商", "not_completed": "未完成", "completed": "已完成", + "complete": "已完成", + "incomplete": "未完成", "worker_id": "工作人员编号", "notice": "注意事项", "result_description": "结果描述", @@ -387,7 +399,7 @@ "sure_to_delete_permanent": "是否确认永久删除该项目?", "delete_success": "删除成功", "delete_failed": "删除失败", - "mqtt_refresh":"重新设定成功" + "mqtt_refresh": "重新设定成功" }, "setting": { "MQTT_parse": "MQTT 解析", diff --git a/src/config/tw.json b/src/config/tw.json index e25cd65..b47894c 100644 --- a/src/config/tw.json +++ b/src/config/tw.json @@ -8,7 +8,10 @@ "table": { "no_data": "表中數據為空", "in_otal": "筆資料", - "skip_to": "跳至" + "skip_to": "跳至", + "serial_number": "序號", + "name": "姓名", + "time": "時間" }, "upload": { "title": "選擇一個文件或拖放到這裡", @@ -20,8 +23,10 @@ "elec_consumption_comparison": "用電量比較", "elec_consumption_comparison_trend": "用電量比較趨勢", "electricity_consumption": "用電量", - "today_electricity_consumption": "今日用電量", - "yesterday_electricity_consumption": "昨天用電量", + "today_electricity_consumption": "今日用電量 ( kWH )", + "yesterday_electricity_consumption": "昨天用電量 ( kWH )", + "instant_power": "即時功率 ( kW )", + "instant_contract_capacity_ratio": "契約容量佔比 ( % )", "this_last_week": "本週/上週", "thisweek_electricity_consumption": "本周用電量", "lastweek_electricity_consumption": "上週用電量", @@ -44,7 +49,9 @@ "this_month": "本月", "last_month": "上月", "this_year": "今年", - "last_year": "去年" + "last_year": "去年", + "work_order": "工單", + "system_status": "系統狀態" }, "history": { "title": "歷史資料", @@ -174,7 +181,7 @@ "alarmClass": "告警條件", "device_name": "設備名稱", "device_number": "設備編號", - "device_point_name":"點位名稱", + "device_point_name": "點位名稱", "date": "發生日期", "time": "發生時間", "error_msg": "異常原因", @@ -231,7 +238,10 @@ "saturday": "星期六", "schedule_name": "時段名稱", "schedule_content": "時段內容", - "reorganization": "MQTT 告警重整" + "reorganization": "MQTT 告警重整", + "online": "在線", + "offline": "離線", + "alarm": "告警" }, "operation": { "title": "運維管理", @@ -260,6 +270,8 @@ "responsible_vendor": "負責廠商", "not_completed": "未完成", "completed": "已完成", + "complete": "已完成", + "incomplete": "未完成", "worker_id": "工作人員編號", "notice": "注意事項", "result_description": "結果描述", @@ -380,28 +392,28 @@ "restore": "復原", "stop_edit": "停止修改", "start_edit": "開始修改", - "convert":"轉換" + "convert": "轉換" }, "msg": { "sure_to_delete": "是否確認刪除該項目?", "sure_to_delete_permanent": "是否確認永久刪除該項目?", "delete_success": "刪除成功", "delete_failed": "刪除失敗", - "mqtt_refresh":"重新設定成功" + "mqtt_refresh": "重新設定成功" }, "setting": { "MQTT_parse": "MQTT 解析", - "schema":"架構", - "point":"點位", - "description":"描述", - "IoT_point_name":"IoT 點位名稱", - "IoT_point_code":"IoT 點位代號", - "number_of_decimal_places":"小數位數", - "boolean_value":"布林值", - "hide_point":"點位顯示", - "schema_name":"架構名稱", - "IoT_point_structure" :"IoT點位結構", - "system_point_name":"系統點位名稱", + "schema": "架構", + "point": "點位", + "description": "描述", + "IoT_point_name": "IoT 點位名稱", + "IoT_point_code": "IoT 點位代號", + "number_of_decimal_places": "小數位數", + "boolean_value": "布林值", + "hide_point": "點位顯示", + "schema_name": "架構名稱", + "IoT_point_structure": "IoT點位結構", + "system_point_name": "系統點位名稱", "json_format_text": "請貼上 JSON 格式數據", "json_click_text": "請在左側輸入JSON並點選轉換按鈕" } diff --git a/src/config/us.json b/src/config/us.json index 8627648..1bdf52b 100644 --- a/src/config/us.json +++ b/src/config/us.json @@ -8,7 +8,10 @@ "table": { "no_data": "No data", "in_otal": "items in total", - "skip_to": "Skip to" + "skip_to": "Skip to", + "serial_number": "Serial Number", + "name": "Name", + "time": "Time" }, "upload": { "title": "Select a file or drag and drop here", @@ -20,8 +23,10 @@ "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", + "today_electricity_consumption": "Today's electricity consumption in kWH", + "yesterday_electricity_consumption": "Yesterday's electricity consumption in kWH", + "instant_power": "Instant power kW", + "instant_contract_capacity_ratio": "Instant contract capacity ratio %", "this_last_week": "This Week's / Last Week's", "thisweek_electricity_consumption": "This week’s electricity consumption", "lastweek_electricity_consumption": "Last week’s electricity consumption", @@ -44,7 +49,9 @@ "this_month": "This month", "last_month": "Last month", "this_year": "This year", - "last_year": "Last year" + "last_year": "Last year", + "work_order": "Work Order", + "system_status": "System Status" }, "history": { "title": "Historical Data", @@ -174,7 +181,7 @@ "alarmClass": "Alarm Conditions", "device_name": "Device Name", "device_number": "Device Number", - "device_point_name":"Point Name", + "device_point_name": "Point Name", "date": "Occurrence Date", "time": "Occurrence Time", "error_msg": "Abnormal Cause", @@ -231,7 +238,10 @@ "saturday": "Saturday", "schedule_name": "Time period name", "schedule_content": "Time period content", - "reorganization": "MQTT Alarm Reorganization" + "reorganization": "MQTT Alarm Reorganization", + "online": "Online", + "offline": "Offline", + "alarm": "Alarm" }, "operation": { "title": "Operation And Maintenance Management", @@ -260,6 +270,8 @@ "responsible_vendor": "Responsible Vendor", "not_completed": "Not Completed", "completed": "Completed", + "complete": "Comp", + "incomplete": "Inc", "worker_id": "Worker ID", "notice": "Notice", "result_description": "Result Description", @@ -387,7 +399,7 @@ "sure_to_delete_permanent": "Are you sure you want to permanently delete this item?", "delete_success": "Delete successfully", "delete_failed": "Delete failed", - "mqtt_refresh":"MQTT reset successful" + "mqtt_refresh": "MQTT reset successful" }, "setting": { "MQTT_parse": "MQTT Parse", diff --git a/src/main.js b/src/main.js index 1c847f2..d8f3d6a 100644 --- a/src/main.js +++ b/src/main.js @@ -17,7 +17,6 @@ import "virtual:svg-icons-register"; // 引入项目中的全部全局组件 import SvgIcon from "@/components/svgIcon.vue"; import library from "./fontawsomeIconRegister"; -import "flag-icons/css/flag-icons.min.css"; /* import font awesome icon component */ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; diff --git a/src/views/dashboard/components/DashboardElecRank.vue b/src/views/dashboard/components/DashboardElecRank.vue index 40f6bd7..ed7b3fd 100644 --- a/src/views/dashboard/components/DashboardElecRank.vue +++ b/src/views/dashboard/components/DashboardElecRank.vue @@ -10,12 +10,19 @@ const props = defineProps({ }, }); -const currentEnergyType = ref("month"); - -const toggleEnergyType = () => { - currentEnergyType.value = - currentEnergyType.value === "month" ? "day" : "month"; -}; +const energyTypeList = ref([ + { + title: t("dashboard.today_energy_consumption"), + key: "today", + }, + { + title: t("dashboard.this_month_energy_consumption"), + key: "month", + }, +]); +const currentEnergyType = ref({ + name: "month", +}); // 取得當前能耗資料 const getCurrentEnergyData = () => { @@ -23,7 +30,7 @@ const getCurrentEnergyData = () => { return []; // 或者返回一些默认值 } - return currentEnergyType.value === "month" + return currentEnergyType.value.name === "month" ? props.energyCostData?.rank.month || [] : props.energyCostData?.rank.day || []; }; @@ -31,44 +38,50 @@ const getCurrentEnergyData = () => { diff --git a/src/views/dashboard/components/DashboardStat.vue b/src/views/dashboard/components/DashboardStat.vue index 662e238..5013210 100644 --- a/src/views/dashboard/components/DashboardStat.vue +++ b/src/views/dashboard/components/DashboardStat.vue @@ -3,7 +3,9 @@ import { ref, watch, onMounted, onUnmounted } from "vue"; import { getEnergyInfo } from "@/apis/dashboard"; import useBuildingStore from "@/stores/useBuildingStore"; import { twMerge } from "tailwind-merge"; +import { useI18n } from "vue-i18n"; +const { t } = useI18n(); const store = useBuildingStore(); const energyData = ref([]); let intervalId = null; @@ -16,21 +18,21 @@ const getEnergyInfos = async () => { energyData.value = [ { value: apiData.todayKWH ? apiData.todayKWH : "N/A", - label: "Today's electricity consumption in kWH", + label: t("dashboard.today_electricity_consumption"), }, { value: apiData.yesterdayKWH ? apiData.yesterdayKWH : "N/A", - label: "Yesterday's electricity consumption in kWH", + label: t("dashboard.yesterday_electricity_consumption"), }, { value: apiData.instantKW ? apiData.instantKW : "N/A", - label: "Instant power kW", + label: t("dashboard.instant_power"), }, { value: apiData.instantContractRatio ? apiData.instantContractRatio : "N/A", - label: "Instant contract capacity ratio %", + label: t("dashboard.instant_contract_capacity_ratio"), }, ]; } catch (error) { diff --git a/src/views/dashboard/components/DashboardSysProgress.vue b/src/views/dashboard/components/DashboardSysProgress.vue index f16c670..537ca06 100644 --- a/src/views/dashboard/components/DashboardSysProgress.vue +++ b/src/views/dashboard/components/DashboardSysProgress.vue @@ -4,14 +4,17 @@ import { useRouter } from "vue-router"; import { getAlarmOperationInfo } from "@/apis/dashboard"; import useBuildingStore from "@/stores/useBuildingStore"; import DashboardSysProgressModal from "./DashboardSysProgressModal.vue"; +import { useI18n } from "vue-i18n"; + +const { t } = useI18n(); const router = useRouter(); const store = useBuildingStore(); const equipmentData = ref({ - title: "System Status", + title: t("dashboard.system_status"), items: [], }); const orderData = ref({ - title: "Work Order", + title: t("dashboard.work_order"), items: [], }); const modalData = ref({}); @@ -38,12 +41,12 @@ const getAlarmsInfos = async () => { if (apiData && apiData.operation) { orderData.value.items = [ { - label: "Repair", + label: t("operation.repair"), complete: apiData.operation.repair.complete || 0, incomplete: apiData.operation.repair.incomplete || 0, }, { - label: "Upkeep", + label: t("operation.maintenance"), complete: apiData.operation.upkeep.complete || 0, incomplete: apiData.operation.upkeep.incomplete || 0, }, @@ -65,7 +68,7 @@ const navigateToMaintenance = (item) => { const openModal = (item) => { modalData.value = item; - system_status_modal.showModal(); + system_status_modal.showModal(); }; const onCancel = () => { @@ -109,8 +112,8 @@ onUnmounted(() => { - Comp - Inc + {{ $t("operation.complete") }} + {{ $t("operation.incomplete") }} @@ -141,9 +144,9 @@ onUnmounted(() => { - Online - Offline - Alarm + {{ $t("alert.online") }} + {{ $t("alert.offline") }} + {{ $t("alert.alarm") }} @@ -151,33 +154,16 @@ onUnmounted(() => { v-for="(item, index) in equipmentData.items" :key="index" class="border-cyan-400 cursor-pointer hover:text-info" + @click.stop.prevent="openModal(item)" > {{ item.label }} - + {{ item.online.length }} - + {{ item.offline.length }} - + {{ item.alarm.length }} diff --git a/src/views/dashboard/components/DashboardSysProgressModal.vue b/src/views/dashboard/components/DashboardSysProgressModal.vue index 6781805..f4915ce 100644 --- a/src/views/dashboard/components/DashboardSysProgressModal.vue +++ b/src/views/dashboard/components/DashboardSysProgressModal.vue @@ -1,18 +1,56 @@