diff --git a/src/apis/dashboard/index.js b/src/apis/dashboard/index.js index e238c40..4d60e1d 100644 --- a/src/apis/dashboard/index.js +++ b/src/apis/dashboard/index.js @@ -69,19 +69,14 @@ export const getDashboardFormulaRoom = async ({ timeInterval, typeOption }) => { export const getDashboardTemp = async ({ timeInterval, tempOption, - typeOption = "", + building_guid, }) => { - const res = typeOption - ? await instance.post(GET_DASHBOARD_TEMP_API, { - timeInterval, - tempOption, - typeOption, - }) - : await instance.post(GET_DASHBOARD_TEMP_API, { - timeInterval, - tempOption, - }); - console.log(res); + const res = await instance.post(GET_DASHBOARD_TEMP_API, { + timeInterval, + tempOption, + building_guid, + }); + return apihandler(res.code, res.data, { msg: res.msg, code: res.code, diff --git a/src/apis/energy/api.js b/src/apis/energy/api.js index 9f427a0..3f7cd70 100644 --- a/src/apis/energy/api.js +++ b/src/apis/energy/api.js @@ -1,3 +1,7 @@ +export const GET_REALTIME_DATA_API = `/api/Energe/GetRealTimeData`; +export const GET_ELEC_MONTH_API = `/api/Energe/GetElecUseMonth`; +export const GET_ELEC_DAY_API = `/api/Energe/GetElecUseDay`; + export const GET_REALTIME_DIST_API = `/api/Energe/GetRealTimeDistribution`; export const GET_ELECUSE_DAY_API = `/api/Energe/GetElecUseDay`; export const GET_TAI_POWER_API = `/api/Energe/GetTaipower`; diff --git a/src/apis/energy/index.js b/src/apis/energy/index.js index 1e7057c..b739a40 100644 --- a/src/apis/energy/index.js +++ b/src/apis/energy/index.js @@ -1,4 +1,7 @@ import { + GET_REALTIME_DATA_API, + GET_ELEC_MONTH_API, + GET_ELEC_DAY_API, GET_REALTIME_DIST_API, GET_ELECUSE_DAY_API, GET_TAI_POWER_API, @@ -18,6 +21,33 @@ import instance, { fileInstance } from "@/util/request"; import apihandler from "@/util/apihandler"; import downloadExcel from "@/util/downloadExcel"; +export const getRealTimeData = async () => { + const res = await instance.post(GET_REALTIME_DATA_API); + + return apihandler(res.code, res.data, { + msg: res.msg, + code: res.code, + }); +}; + +export const getElecUseMonth = async () => { + const res = await instance.post(GET_ELEC_MONTH_API); + + return apihandler(res.code, res.data, { + msg: res.msg, + code: res.code, + }); +}; + +export const getElecUseofDay = async () => { + const res = await instance.post(GET_ELEC_DAY_API); + + return apihandler(res.code, res.data, { + msg: res.msg, + code: res.code, + }); +}; + export const getRealTimeDist = async ({ building_guid, department_id_list, diff --git a/src/apis/system/index.js b/src/apis/system/index.js index 900ac6d..7eb0813 100644 --- a/src/apis/system/index.js +++ b/src/apis/system/index.js @@ -18,15 +18,9 @@ export const getSystemFloors = async (building_tag, sub_system_tag) => { }); }; -export const getSystemDevices = async ({ - sub_system_tag, - building_guid, - department_id_list, -}) => { +export const getSystemDevices = async ({ building_guid }) => { const res = await instance.post(GET_SYSTEM_DEVICE_LIST_API, { - sub_system_tag, building_guid, - department_id_list, }); return apihandler(res.code, res.data, { diff --git a/src/components/navbar/NavbarItem.vue b/src/components/navbar/NavbarItem.vue index 59e5320..15e2d6c 100644 --- a/src/components/navbar/NavbarItem.vue +++ b/src/components/navbar/NavbarItem.vue @@ -30,8 +30,8 @@ const open = ref(false); const showDrawer = async (authCode) => { if (authCode === "PF1") { emit("show-drawer", buildingStore.selectedBuilding.building_guid); // 使用 emit 呼叫父組件的函数 - } else if (authCode === "PF2" || authCode === "PF11") { - emit("getSubPage", authCode === "PF2" ? "Energy" : "Setting"); + } else if (authCode === "PF11") { + emit("getSubPage", "Setting"); } currentAuthCode.value = authCode; open.value = true; @@ -75,11 +75,7 @@ const handleOpenChange = (keys) => { :key="page.authCode" > { @@ -56,27 +56,39 @@ const useBuildingStore = defineStore("buildingInfo", () => { // 獲取樓層資料 const fetchFloorList = async (building_guid) => { const res = await getAssetFloorList(building_guid); - floorList.value = res.data[0]?.floors.map((d) => ({ - ...d, - title: d.full_name, - key: d.floor_guid, - })) || []; + floorList.value = + res.data[0]?.floors.map((d) => ({ + ...d, + title: d.full_name, + key: d.floor_guid, + })) || []; }; // 獲取部門資料 const fetchDepartmentList = async () => { const res = await getDepartmentList(); - deptList.value = res.data.map((d) => ({ - ...d, - title: d.name, - key: d.id, - })) || []; + deptList.value = + res.data.map((d) => ({ + ...d, + title: d.name, + key: d.id, + })) || []; }; - // 當 selectedBuilding 改變時，更新 floorList 和 deptList + // 取得大小類 + const getSubMonitorPage = async (building_guid) => { + const res = await getAllSysSidebar(building_guid); + mainSubSys.value = res.data.history_Main_Systems; + }; + + // 當 selectedBuilding 改變時，更新 floorList 和 deptList 和 mainSubSys watch(selectedBuilding, async (newBuilding) => { if (newBuilding) { - await Promise.all([fetchFloorList(newBuilding.building_guid), fetchDepartmentList()]); + await Promise.all([ + fetchFloorList(newBuilding.building_guid), + fetchDepartmentList(), + getSubMonitorPage(newBuilding.building_guid) + ]); } }); diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue index f6dda68..9383947 100644 --- a/src/views/dashboard/Dashboard.vue +++ b/src/views/dashboard/Dashboard.vue @@ -2,104 +2,79 @@ import DashboardFloorBar from "./components/DashboardFloorBar.vue"; import DashboardEffectScatter from "./components/DashboardEffectScatter.vue"; import DashboardSysCard from "./components/DashboardSysCard.vue"; -import DashboardTemp from "./components/DashboardTemp.vue"; +import DashboardRefrigTemp from "./components/DashboardRefrigTemp.vue"; +import DashboardIndoorTemp from "./components/DashboardIndoorTemp.vue"; import DashboardElectricity from "./components/DashboardElectricity.vue"; import DashboardEmission from "./components/DashboardEmission.vue"; import DashboardAlert from "./components/DashboardAlert.vue"; +import { computed, inject, ref, watch } from "vue"; +import useBuildingStore from "@/stores/useBuildingStore"; +import { getSystemDevices, getSystemRealTime } from "@/apis/system"; const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL; +const buildingStore = useBuildingStore() -const systemData = { - '85e7d4b3-9570-4149-95d4-3739c00cee6a': [ - [ - 120.1, - 480, - { - full_name: "空氣偵測器", - state: "online", - temperature: "25°C", - icon: `${FILE_BASEURL}/upload/device_icon/3454f5e0-3afa-4ace-ae54-a68bf7183e7d.png`, - bgColor: "rgba(100, 166, 182,0.5)", - bgSize: 60, - }, - ], - [ - 580, - 800, - { - full_name: "空調", - state: "offline", - temperature: "-5°C", - icon: `${FILE_BASEURL}/upload/device_icon/9d8e1dd3-8187-46e3-8a6a-ae116210ecff.png`, - bgColor: "rgba(255, 0, 0,0.5)", - bgSize: 60, - }, - ], - [ - 940, - 960, - { - full_name: "電錶", - state: "online", - temperature: "25°C", - icon: `${FILE_BASEURL}/upload/device_icon/83deea51-a97e-4757-ba15-5cd94cb25929.png`, - bgColor: "rgba(100, 166, 182,0.5)", - bgSize: 60, - }, - ], - ], - '5cf3c8da-a5b4-42da-8b1a-14d5a44a0456': [ - [ - 280, - 280, - { - full_name: "空氣偵測器", - state: "offline", - temperature: "25°C", - icon: `${FILE_BASEURL}/upload/device_icon/3454f5e0-3afa-4ace-ae54-a68bf7183e7d.png`, - bgColor: "rgba(255, 0, 0,0.5)", - bgSize: 60, - }, - ], - [ - 2800, - 3000, - { - full_name: "電錶", - state: "online", - temperature: "25°C", - icon: `${FILE_BASEURL}/upload/device_icon/83deea51-a97e-4757-ba15-5cd94cb25929.png`, - bgColor: "rgba(100, 166, 182,0.5)", - bgSize: 60, - }, - ], - [ - 250, - 3000, - { - full_name: "電錶", - state: "online", - temperature: "25°C", - icon: `${FILE_BASEURL}/upload/device_icon/83deea51-a97e-4757-ba15-5cd94cb25929.png`, - bgColor: "rgba(100, 166, 182,0.5)", - bgSize: 60, - }, - ], - ], - 'f5e5215b-d689-4d25-9c95-421964040bf8': [ - [ - 940, - 960, - { - full_name: "電錶", - state: "online", - temperature: "25°C", - icon: `${FILE_BASEURL}/upload/device_icon/83deea51-a97e-4757-ba15-5cd94cb25929.png`, - bgColor: "rgba(100, 166, 182,0.5)", - bgSize: 60, - }, - ], - ], -}; +const subscribeData = ref([]); +const systemData = ref({}); +const getData = async () => { + const res = await getSystemDevices({ + building_guid: buildingStore.selectedBuilding?.building_guid, + }) + + subscribeData.value = res.data + console.log("devices", subscribeData.value) + + // 轉換資料格式 + const transformedData = {}; + + subscribeData.value.forEach(floor => { + if (floor.device_list && floor.device_list.length > 0) { + const fullUrl = floor.floor_map_name; + const uuid = fullUrl ? fullUrl.replace(/\.svg$/, "") : ""; + transformedData[uuid] = floor.device_list.map(device => { + // 解析座標 + const coordinates = JSON.parse(device.device_coordinate || '[0,0]'); + const x = coordinates[0]; + const y = coordinates[1]; + + // 決定設備狀態和顏色 + let state = "online"; + let bgColor = "rgba(255, 255, 255)"; + + if (device.device_status === "offline" || device.device_status === null) { + state = "offline"; + bgColor = "rgba(34, 51, 85)"; + } + + return [ + x, + y, + { + full_name: device.full_name, + state: state, + icon: device.device_image ? `${FILE_BASEURL}/upload/device_icon/${device.device_image}` : '', + bgColor: bgColor, + bgSize: 50, + } + ]; + }); + } + }); + + console.log("transformedData", transformedData); + systemData.value = transformedData; +} + +watch( + () => buildingStore.selectedBuilding, + (newBuilding) => { + if (newBuilding) { + getData(); + } + }, + { + immediate: true + } +);