From 704af2eb18cc5d9f01e6f584eb4e931905320ce2 Mon Sep 17 00:00:00 2001 From: huliang <1539398430@qq.com> Date: Mon, 19 May 2025 12:06:36 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A1=86=E6=9E=B6UI=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/config.json | 3 +- src/App.vue | 19 +-- src/components/dashboard/dashboardBuild.vue | 57 ++++--- .../dashboard/dashboardElecChart.vue | 18 +-- src/components/dashboard/dashboardStat.vue | 9 +- src/components/dashboard/dashboardTag.vue | 14 +- src/components/navbar/LeftSidebar.vue | 32 +++- src/components/navbar/NavAlarm.vue | 4 +- src/components/navbar/NavWeather.vue | 148 ++---------------- src/components/navbar/Navbar.vue | 6 +- src/stores/useElecTotalMeterStore.js | 13 +- src/stores/useWeatherDataStore.js | 128 +++++++++++++++ src/style.css | 7 +- src/views/dashboard/DashboardPage.vue | 26 +-- 14 files changed, 257 insertions(+), 227 deletions(-) create mode 100644 src/stores/useWeatherDataStore.js diff --git a/public/config.json b/public/config.json index 6121918..c47a853 100644 --- a/public/config.json +++ b/public/config.json @@ -1,3 +1,4 @@ { - "systemName": "關渡醫院中央監控" + "systemName": "關渡醫院中央監控", + "is3D": true } diff --git a/src/App.vue b/src/App.vue index c11b887..107bd52 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,7 +8,7 @@ import useNiagaraDataStore from "@/stores/useNiagaraDataStore"; import useNavDataStore from "@/stores/useNavDataStore"; const showSidebar = ref(false); -const systemName = ref(""); +const is3D = ref(false); const userStore = useUserStore(); const niagaraStore = useNiagaraDataStore(); const navStore = useNavDataStore(); @@ -20,29 +20,24 @@ const toggleSidebar = () => { onMounted(async () => { const json = await fetch("./config.json"); const res = await json.json(); - systemName.value = res.systemName; + is3D.value = res.is3D; await userStore.loadUserInfo(); await niagaraStore.getSystemData(); await navStore.getNavData(); }); + +provide("app_config", { is3D }); diff --git a/src/components/navbar/Navbar.vue b/src/components/navbar/Navbar.vue index 35e7a54..90a0eb6 100644 --- a/src/components/navbar/Navbar.vue +++ b/src/components/navbar/Navbar.vue @@ -6,7 +6,7 @@ import NavWeather from "./NavWeather.vue"; import NavAlarm from "./NavAlarm.vue"; import useNiagaraDataStore from "@/stores/useNiagaraDataStore"; import useNavDataStore from "@/stores/useNavDataStore"; - +const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL; const router = useRouter(); const route = useRoute(); const niagaraStore = useNiagaraDataStore(); @@ -163,7 +163,7 @@ watch( - + user_icon {{ props.userName }} @@ -217,11 +217,13 @@ watch( width: 30px; height: 30px; vertical-align: middle; + margin-left: 20px; } .icon { width: 30px; height: 30px; vertical-align: middle; + fill: #69B0CF; } diff --git a/src/stores/useElecTotalMeterStore.js b/src/stores/useElecTotalMeterStore.js index 4d9de1f..ec60291 100644 --- a/src/stores/useElecTotalMeterStore.js +++ b/src/stores/useElecTotalMeterStore.js @@ -56,7 +56,7 @@ const useElecStore = defineStore("elecData", () => { eleclist.push({ slotPath: record.get("slotPath"), displayName: record.get("parent$2edisplayName"), - id: record.get("NumericInterval$2ehistoryConfig$2eid").$cEncStr, + id: record.get("NumericInterval$2ehistoryConfig$2eid"), out: record.get("out")?.get("value") ?? null, }); }, @@ -77,15 +77,15 @@ const useElecStore = defineStore("elecData", () => { const gettimeToHistory = (item) => { const id = item.id; - const startTime = dayjs() + const startTime = dayjs("2025-05-08T16:30:00.000+08:00") .subtract(13, "day") .startOf("day") .format("YYYY-MM-DDTHH:mm:ss.000+08:00"); - const endTime = dayjs() + const endTime = dayjs("2025-05-08T16:30:00.000+08:00") .endOf("day") .format("YYYY-MM-DDTHH:mm:ss.000+08:00"); - const ordString = `local:|foxs:4918|history:${id}?period=timerange;;start=${startTime};end=${endTime}|bql:history:HistoryRollup.rollup(baja:RelTime '3600000')`; //每小时一个rollup + const ordString = `local:|foxs:4918|history:${id}?period=timerange;start=${startTime};end=${endTime}|bql:history:HistoryRollup.rollup(baja:RelTime '3600000')`; //每小时一个rollup console.log(ordString); // @ts-ignore window.require && @@ -105,6 +105,7 @@ const useElecStore = defineStore("elecData", () => { const timestamp = record.get("timestamp").$cEncStr; if ( currentValue !== null && + !isNaN(currentValue) && currentValue !== 0 && timestamp !== null ) { @@ -129,8 +130,8 @@ const useElecStore = defineStore("elecData", () => { // 提取今天和昨天的数据 for (const [timestamp, value] of dataMap) { const date = dayjs(timestamp).format("YYYY-MM-DD"); - const today = dayjs().format("YYYY-MM-DD"); - const yesterday = dayjs().subtract(1, "day").format("YYYY-MM-DD"); + const today = dayjs("2025-05-08T16:30:00.000+08:00").format("YYYY-MM-DD"); + const yesterday = dayjs("2025-05-08T16:30:00.000+08:00").subtract(1, "day").format("YYYY-MM-DD"); if (date === today) { todayelecdata.value.set(timestamp, value); diff --git a/src/stores/useWeatherDataStore.js b/src/stores/useWeatherDataStore.js new file mode 100644 index 0000000..a905aeb --- /dev/null +++ b/src/stores/useWeatherDataStore.js @@ -0,0 +1,128 @@ +import { defineStore } from "pinia"; +import { ref } from "vue"; +import { + imagesWeatherDay, + imagesWeatherNight, + orderWeather, +} from "@/constants"; + +const useWeatherDataStore = defineStore("weatherData", () => { + const weatherStateText = ref("N/A"); + const weatherStateImage = ref(null); + const actualWeather = ref("Clear"); + const temperature = ref("N/A"); + const humidity = ref("N/A"); + const actualNighttime = ref(false); + const dateTime = ref("N/A"); + + const subscribers = ref([]); + const subscribeToWeather = () => { + window.require && + window.requirejs(["baja!"], (baja) => { + const subscriber = new baja.Subscriber(); // 初始化 subscriber + subscriber.attach("changed", (prop) => { + // 根據 slotName 判斷資料類型 + if (prop.$slotName === "temp") { + temperature.value = prop.$getValue().getValueDisplay(); + } else if (prop.$slotName === "humidity") { + humidity.value = prop.$getValue().getValueDisplay(); + } else if (prop.$slotName === "state") { + actualWeather.value = prop.$getValue().getValueDisplay(); + loadWeather(actualWeather.value); // 載入天氣資料 + } else if (prop.$slotName === "sunDown") { + actualNighttime.value = !prop.$getValue().getValueDisplay(); + loadWeather(actualWeather.value); // 重新載入天氣資料 + } + }); + + // 訂閱 Niagara 資料 + baja.Ord.make( + "station:|slot:/Services/WeatherService/WeatherService/WeatherService/current" + ) + .get({ subscriber }) + .then((result) => { + console.log("Successfuly subscribed to weather data", result); + }) + .catch((err) => { + console.error(`訂閱 weather 失敗: ${err.message}`); + subscriber.detach("changed"); // 發生錯誤時取消訂閱 + }); + subscribers.value.push(subscriber); + }); + }; + + // 載入天氣資料函數 + const loadWeather = (actualWeather) => { + let weatherStateTextTemp = "Unknown"; + let weatherStateImageTemp = null; + + // 找到 actualWeather 在 orderWeather 中的索引 + const actualWeatherIndex = orderWeather.indexOf( + actualWeather.replace(/\s/g, "") + ); + + if (actualWeatherIndex === -1) { + // 如果找不到，表示 weather 狀態不在 orderWeather 中 + console.error( + "天氣狀態不在 orderWeather 陣列中！實際值：" + actualWeather + ); + weatherStateTextTemp = "Unknown"; + weatherStateImageTemp = imagesWeatherDay[weatherStateTextTemp]; + } else if (actualWeather === "none") { + console.warn("未設定天氣狀態或點不存在"); + weatherStateTextTemp = "Unknown"; + weatherStateImageTemp = imagesWeatherDay[weatherStateTextTemp]; + } else { + if (actualNighttime.value) { + console.log("Nighttime activ"); + weatherStateTextTemp = orderWeather[actualWeatherIndex]; + weatherStateImageTemp = imagesWeatherNight[weatherStateTextTemp]; + } else { + console.log("Daytime activ"); + weatherStateTextTemp = orderWeather[actualWeatherIndex]; + weatherStateImageTemp = imagesWeatherDay[weatherStateTextTemp]; + } + } + + weatherStateImage.value = weatherStateImageTemp; + weatherStateText.value = weatherStateTextTemp; // 更新天氣狀態 + }; + + const updateTime = () => { + const date = new Date(); + window.require && + window.requirejs(["baja!"], (baja) => { + const bAbsTime = baja.AbsTime.make({ jsDate: date }); + bAbsTime + .toDateTimeString() + .then((dateTimeStr) => { + dateTime.value = dateTimeStr; + }) + .catch((error) => { + console.error("轉換時間字串失敗:", error); + }); + }); + }; + + const clearAllSubscriber = () => { + subscribers.value.forEach((subscriber) => { + subscriber.detach("changed"); + }); + subscribers.value = []; + }; + + return { + weatherStateText, + weatherStateImage, + actualWeather, + temperature, + humidity, + actualNighttime, + dateTime, + subscribeToWeather, + updateTime, + clearAllSubscriber, + }; +}); + +export default useWeatherDataStore; diff --git a/src/style.css b/src/style.css index 59ea8a9..5fa03aa 100644 --- a/src/style.css +++ b/src/style.css @@ -1,4 +1,9 @@ @import "tailwindcss"; :root { - font-family:"Microsoft JhengHei", "Noto Sans CJK TC", STHeiti, sans-serif, serif; + font-family: "Microsoft JhengHei", "Noto Sans CJK TC", STHeiti, sans-serif, + serif; +} + +a { + color: #69b0cf; } diff --git a/src/views/dashboard/DashboardPage.vue b/src/views/dashboard/DashboardPage.vue index b15a545..37bed6c 100644 --- a/src/views/dashboard/DashboardPage.vue +++ b/src/views/dashboard/DashboardPage.vue @@ -16,25 +16,25 @@ const elecStat = ref([ value: 0, label: "今日用電量", unit: "kWH", - icon: "leaf", + icon: "elec", }, { value: 0, label: "昨日用電量", unit: "kWH", - icon: "leaf", + icon: "elec", }, { value: 0, label: "即時功率", unit: "kW", - icon: "bolt", + icon: "power", }, { value: 0, label: "契約容量佔比", unit: "%", - icon: "charging-station", + icon: "pie", }, ]); const elecDemand_P = ref(0); // 即時趨勢 @@ -43,11 +43,11 @@ const yesterdayTodayData = ref({ categories: [], values: [ { - name: `${dayjs().format("YYYY-MM-DD")} 用電量`, + name: `${dayjs("2025-05-08T16:30:00.000+08:00").format("YYYY-MM-DD")} 用電量`, value: [], }, { - name: `${dayjs().subtract(1, "day").format("YYYY-MM-DD")} 用電量`, + name: `${dayjs("2025-05-08T16:30:00.000+08:00").subtract(1, "day").format("YYYY-MM-DD")} 用電量`, value: [], }, ], @@ -68,7 +68,7 @@ const weekComparisonData = ref({ }); const generateWeekCategories = () => { - const today = dayjs(); + const today = dayjs("2025-05-08T16:30:00.000+08:00"); const currentDay = today.day(); const daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const dynamicCategories = []; @@ -91,8 +91,8 @@ watch( (newElecData) => { console.log("elecStandCostSummary", newElecData); if (newElecData && newElecData.dailyResults) { - const today = dayjs().format("YYYY-MM-DD"); - const yesterday = dayjs().subtract(1, "day").format("YYYY-MM-DD"); + const today = dayjs("2025-05-08T16:30:00.000+08:00").format("YYYY-MM-DD"); + const yesterday = dayjs("2025-05-08T16:30:00.000+08:00").subtract(1, "day").format("YYYY-MM-DD"); const todayData = newElecData.dailyResults.find( (item) => item.dateStr === today @@ -107,11 +107,11 @@ watch( elecStat.value = [ { ...elecStat.value[0], - value: todayElecCost, + value: todayElecCost.toFixed(2), }, { ...elecStat.value[1], - value: yesterdayElecCost, + value: yesterdayElecCost.toFixed(2), }, { ...elecStat.value[2], @@ -151,8 +151,8 @@ watch( ([newTodayData, newYesterdayData]) => { console.log("todayyesterday", newTodayData, newYesterdayData); - const todayDate = dayjs().format("YYYY-MM-DD"); - const yesterdayDate = dayjs().subtract(1, "day").format("YYYY-MM-DD"); + const todayDate = dayjs("2025-05-08T16:30:00.000+08:00").format("YYYY-MM-DD"); + const yesterdayDate = dayjs("2025-05-08T16:30:00.000+08:00").subtract(1, "day").format("YYYY-MM-DD"); const categories = []; const todayValues = [];