From c8e00421b2660d096efa6b3127f7dfac213d69a5 Mon Sep 17 00:00:00 2001
From: ko1234 <ko.ko@mjmtech.com.tw>
Date: Tue, 1 Apr 2025 10:22:13 +0800
Subject: [PATCH] =?UTF-8?q?navbar=E3=80=81=E5=91=8A=E8=AD=A6=E8=A8=AD?=
 =?UTF-8?q?=E5=AE=9A=E3=80=81=E8=B3=87=E7=94=A2=E7=AE=A1=E7=90=86=E3=80=81?=
 =?UTF-8?q?=E9=81=8B=E7=B6=AD=E7=AE=A1=E7=90=86=E3=80=81mqtt=20=E5=8A=A0?=
 =?UTF-8?q?=E4=B8=8Abuilding=5Fguid=20|=20=E8=B3=87=E7=94=A2=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=B0=8F=E9=A1=9E=E8=83=BD=E4=B8=8A=E5=82=B3=E5=9C=96?=
 =?UTF-8?q?=E7=89=87=20|=20=E9=A6=96=E9=A0=81=E9=A1=AF=E7=A4=BA=E5=B0=8F?=
 =?UTF-8?q?=E9=A1=9Eicon=20|=20=E8=83=BD=E6=BA=90=E7=AE=A1=E7=90=86=20:=20?=
 =?UTF-8?q?=E5=8D=B3=E6=99=82=E9=9C=80=E9=87=8F=E4=B8=B2=E6=8E=A5api=20?=
 =?UTF-8?q?=E3=80=81=20=E5=9C=96=E8=A1=A8=E5=88=9D=E5=A7=8B=E5=8C=96?=
 =?UTF-8?q?=E8=A8=AD=E5=AE=9A=E3=80=81=E6=96=B0=E5=A2=9E=E6=97=A5=E6=9C=9F?=
 =?UTF-8?q?=E8=88=87=E6=99=82=E9=96=93=E5=8D=80=E9=96=93=20|=20=E7=B3=BB?=
 =?UTF-8?q?=E7=B5=B1=E7=9B=A3=E6=8E=A7=E5=8A=A0=E4=B8=8A=E9=83=A8=E9=96=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/alert/index.js                       |   8 +-
 src/apis/asset/index.js                       |  21 +-
 src/apis/building/index.js                    |   6 +-
 src/apis/energy/api.js                        |   1 +
 src/apis/energy/index.js                      |  10 +
 src/apis/system/index.js                      |   8 +-
 src/components/navbar/NavbarItem.vue          |   8 +-
 .../components/AssetMainList.vue              |  16 +-
 .../components/AssetMainListAddModal.vue      |   4 +
 .../components/AssetSubList.vue               |  49 ++--
 .../components/AssetSubListAddModal.vue       |  91 ++++----
 .../components/AlertSetting/AlertSubList.vue  |  17 +-
 .../dashboard/components/DashboardSysCard.vue |  15 +-
 .../EnergyChart/ImmediateDemandChart.vue      | 216 ++++++++++--------
 .../EnergyChart/IntervalBillChart.vue         |   6 +-
 .../EnergyHistoryTable/EnergyDataCahrt.vue    |  11 +-
 .../EnergyHistoryTable/EnergySidebar.vue      |   4 +-
 .../history/components/HistorySearchTime.vue  |   6 +-
 .../components/OperationSearchSubSys.vue      |  16 +-
 src/views/setting/components/MQTTList.vue     |  16 +-
 src/views/system/System.vue                   |  19 +-
 src/views/system/components/SystemDeptBar.vue |   7 +-
 22 files changed, 345 insertions(+), 210 deletions(-)

diff --git a/src/apis/alert/index.js b/src/apis/alert/index.js
index edce98d..8e279e8 100644
--- a/src/apis/alert/index.js
+++ b/src/apis/alert/index.js
@@ -65,8 +65,12 @@ export const postOperationRecord = async (formData) => {
   });
 };
 
-export const getAlertSubList = async () => {
-  const res = await instance.post(GET_ALERT_SUB_LIST_API, {});
+export const getAlertSubList = async (
+  building_guid
+) => {
+  const res = await instance.post(GET_ALERT_SUB_LIST_API, {
+    building_guid
+  });
 
   return apihandler(res.code, res.data, {
     msg: res.msg,
diff --git a/src/apis/asset/index.js b/src/apis/asset/index.js
index 12a3dc1..e124482 100644
--- a/src/apis/asset/index.js
+++ b/src/apis/asset/index.js
@@ -31,8 +31,8 @@ import instance from "@/util/request";
 import apihandler from "@/util/apihandler";
 import { object } from "yup";
 
-export const getAssetMainList = async () => {
-  const res = await instance.post(GET_ASSET_MAIN_LIST_API);
+export const getAssetMainList = async (building_guid) => {
+  const res = await instance.post(GET_ASSET_MAIN_LIST_API,{building_guid});
 
   return apihandler(res.code, res.data, {
     msg: res.msg,
@@ -49,11 +49,12 @@ export const deleteAssetMainItem = async (id) => {
   });
 };
 
-export const postAssetMainList = async ({ id, system_key, system_value }) => {
+export const postAssetMainList = async ({ id, system_key, system_value, building_guid }) => {
   const res = await instance.post(POST_ASSET_MAIN_LIST_API, {
     id,
     system_key,
     system_value,
+    building_guid
   });
 
   return apihandler(res.code, res.data, {
@@ -71,18 +72,8 @@ export const getAssetSubList = async (id) => {
   });
 };
 
-export const postAssetSubList = async ({
-  system_key,
-  system_value,
-  system_parent_id,
-  id,
-}) => {
-  const res = await instance.post(POST_ASSET_SUB_LIST_API, {
-    system_key,
-    system_value,
-    system_parent_id,
-    id,
-  });
+export const postAssetSubList = async (formData) => {
+  const res = await instance.post(POST_ASSET_SUB_LIST_API, formData);
 
   return apihandler(res.code, res.data, {
     msg: res.msg,
diff --git a/src/apis/building/index.js b/src/apis/building/index.js
index 559820b..0c3579e 100644
--- a/src/apis/building/index.js
+++ b/src/apis/building/index.js
@@ -49,10 +49,8 @@ export const getAuth = async (lang) => {
   });
 };
 
-export const getAllSysSidebar = async () => {
-  const res = await instance.post(GET_SUBAUTHPAGE_API, {
-    building_tag: "",
-  });
+export const getAllSysSidebar = async (building_guid) => {
+  const res = await instance.post(GET_SUBAUTHPAGE_API, {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 b10f171..9f427a0 100644
--- a/src/apis/energy/api.js
+++ b/src/apis/energy/api.js
@@ -12,6 +12,7 @@ export const GET_Excel_API = `/api/Energe/GetReportExcel`;
 export const GET_DEMAND_API = `/api/Energe/SearchDemandValue`;
 export const POST_ADD_DEMAND_API = `/api/Energe/AddDemandValue`;
 export const POST_EDIT_DEMAND_API = `/api/Energe/UpdateDemandValue`;
+export const GET_REALTIME_DEMAND_API = `/api/Energe/GetRealTimeDemand`;
 
 // 碳排係數
 export const GET_CARBON_API = `/api/Energe/SearchCarbonValue`;
diff --git a/src/apis/energy/index.js b/src/apis/energy/index.js
index 7bb4eba..1e7057c 100644
--- a/src/apis/energy/index.js
+++ b/src/apis/energy/index.js
@@ -8,6 +8,7 @@ import {
   GET_Excel_API,
   GET_DEMAND_API,
   POST_EDIT_DEMAND_API,
+  GET_REALTIME_DEMAND_API,
   GET_CARBON_API,
   POST_EDIT_CARBON_API,
   GET_TIME_ELEC_API,
@@ -199,6 +200,15 @@ export const postEditCarbonValue = async ({
   });
 };
 
+export const getRealTimeDemand = async (building_guid) => {
+  const res = await instance.post(GET_REALTIME_DEMAND_API, { building_guid });
+
+  return apihandler(res.code, res.data, {
+    msg: res.msg,
+    code: res.code,
+  });
+};
+
 export const getTimeElec = async (building_guid) => {
   const res = await instance.post(GET_TIME_ELEC_API, { building_guid });
 
diff --git a/src/apis/system/index.js b/src/apis/system/index.js
index 4810014..900ac6d 100644
--- a/src/apis/system/index.js
+++ b/src/apis/system/index.js
@@ -20,13 +20,13 @@ export const getSystemFloors = async (building_tag, sub_system_tag) => {
 
 export const getSystemDevices = async ({
   sub_system_tag,
-  building_tag,
-  floor_tag,
+  building_guid,
+  department_id_list,
 }) => {
   const res = await instance.post(GET_SYSTEM_DEVICE_LIST_API, {
     sub_system_tag,
-    building_tag,
-    floor_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 2ad7d4b..245aa17 100644
--- a/src/components/navbar/NavbarItem.vue
+++ b/src/components/navbar/NavbarItem.vue
@@ -37,8 +37,8 @@ const authPages = computed(() =>
 );
 
 const open = ref(false);
-const getSubMonitorPage = async (building) => {
-  const res = await getAllSysSidebar();
+const getSubMonitorPage = async (building_guid) => {
+  const res = await getAllSysSidebar(building_guid);
   buildingStore.mainSubSys = res.data.history_Main_Systems;
   menu_array.value = res.data.history_Main_Systems;
 };
@@ -48,7 +48,7 @@ const getSubPage = async (system_type) => {
 };
 const showDrawer = async (authCode) => {
   if (authCode === "PF1") {
-    await getSubMonitorPage();
+    await getSubMonitorPage(buildingStore.selectedBuilding.building_guid);
   } else if (authCode === "PF2" || authCode === "PF11") {
     await getSubPage(authCode === "PF2" ? "Energy" : "Setting");
   }
@@ -71,7 +71,7 @@ watch(
   () => buildingStore.selectedBuilding,
   (newVal) => {
     if (newVal !== null) {
-      getSubMonitorPage(newVal.building_tag);
+      getSubMonitorPage(newVal.building_guid);
     }
   }
 );
diff --git a/src/views/AssetManagement/components/AssetMainList.vue b/src/views/AssetManagement/components/AssetMainList.vue
index 85e96cf..7fdfb49 100644
--- a/src/views/AssetManagement/components/AssetMainList.vue
+++ b/src/views/AssetManagement/components/AssetMainList.vue
@@ -5,6 +5,8 @@ import { ref, onMounted, watch, inject } from "vue";
 import useSearchParam from "@/hooks/useSearchParam";
 import useActiveBtn from "@/hooks/useActiveBtn";
 import { useI18n } from "vue-i18n";
+import useBuildingStore from "@/stores/useBuildingStore";
+const store = useBuildingStore();
 const { t } = useI18n();
 const { searchParams, changeParams } = useSearchParam();
 const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
@@ -17,7 +19,7 @@ const formState = ref({
 });
 
 const getMainSystems = async () => {
-  const res = await getAssetMainList();
+  const res = await getAssetMainList(store.selectedBuilding.building_guid);
   const cate = res.data.map((d, index) => ({
     ...d,
     title: d.system_key,
@@ -60,9 +62,15 @@ const deleteItem = async (id) => {
   });
 };
 
-onMounted(() => {
-  getMainSystems();
-});
+watch(
+  () => store.selectedBuilding,
+  (newBuilding) => {
+    if (newBuilding) {
+      getMainSystems();
+    }
+  },
+  { immediate: true }
+);
 
 watch(selectedBtn, (newValue) => {
   changeParams({
diff --git a/src/views/AssetManagement/components/AssetMainListAddModal.vue b/src/views/AssetManagement/components/AssetMainListAddModal.vue
index 7d01386..6804bf6 100644
--- a/src/views/AssetManagement/components/AssetMainListAddModal.vue
+++ b/src/views/AssetManagement/components/AssetMainListAddModal.vue
@@ -3,8 +3,11 @@ import { ref, defineProps, inject } from "vue";
 import * as yup from "yup";
 import useFormErrorMessage from "@/hooks/useFormErrorMessage";
 import { postAssetMainList } from "@/apis/asset";
+import useBuildingStore from "@/stores/useBuildingStore";
 import useSearchParam from "@/hooks/useSearchParam";
 import { useI18n } from "vue-i18n";
+
+const storeBuild = useBuildingStore();
 const { t } = useI18n();
 const { openToast } = inject("app_toast");
 const { searchParams, changeParams } = useSearchParam();
@@ -30,6 +33,7 @@ const onOk = async () => {
   const res = await postAssetMainList({
     ...props.formState,
     id: props.formState ? props.formState.id : 0,
+    building_guid:storeBuild.selectedBuilding?.building_guid || null,
   });
 
   if (res.isSuccess) {
diff --git a/src/views/AssetManagement/components/AssetSubList.vue b/src/views/AssetManagement/components/AssetSubList.vue
index c6908e7..ea7e847 100644
--- a/src/views/AssetManagement/components/AssetSubList.vue
+++ b/src/views/AssetManagement/components/AssetSubList.vue
@@ -45,21 +45,41 @@ watch(
     deep: true,
   }
 );
+const formState = ref({
+  id: 0,
+  system_key: "",
+  system_value: "",
+  system_parent_id: 0,
+  file: [],
+});
 
-const editRecord = ref(null);
-// 編輯 modal
-const openModal = () => {
+
+
+const openModal = (item) => {
+  if (item.id) {
+    formState.value = { ...item };
+
+    if (item.device_image) {
+      const subFile = item
+        ? {
+            name: item.device_image,
+            src: item.device_image,
+            ext: item.device_image?.split(".")[1],
+          }
+        : {};
+      formState.value.file = [subFile];
+    }
+  } else {
+    formState.value = {
+      id: 0,
+      system_key: "",
+      system_value: "",
+      system_parent_id: 0,
+      file: [],
+    };
+  }
   asset_add_sub_item.showModal();
 };
-const onCancel = () => {
-  editRecord.value = null;
-  asset_add_sub_item.close();
-};
-
-const edit = (item) => {
-  editRecord.value = item;
-  openModal();
-};
 
 const deleteItem = async (id) => {
   openToast("warning", t("msg.sure_to_delete"), "body", async () => {
@@ -83,9 +103,8 @@ const deleteItem = async (id) => {
       </h2>
       <AssetSubListAddModal
         :openModal="openModal"
-        :onCancel="onCancel"
         :getData="getSubSystems"
-        :editRecord="editRecord"
+        :formState="formState"
       />
       <button
         @click.stop.prevent="isEditMode = !isEditMode"
@@ -112,7 +131,7 @@ const deleteItem = async (id) => {
         <template v-if="isEditMode">
           <span
             class="ml-2 text-base text-warning"
-            @click.stop.prevent="() => edit(item)"
+            @click.stop.prevent="() => openModal(item)"
           >
             <FontAwesomeIcon :icon="['fas', 'pencil-alt']"></FontAwesomeIcon>
           </span>
diff --git a/src/views/AssetManagement/components/AssetSubListAddModal.vue b/src/views/AssetManagement/components/AssetSubListAddModal.vue
index 665ea00..eefb406 100644
--- a/src/views/AssetManagement/components/AssetSubListAddModal.vue
+++ b/src/views/AssetManagement/components/AssetSubListAddModal.vue
@@ -5,21 +5,25 @@ import useFormErrorMessage from "@/hooks/useFormErrorMessage";
 import useSearchParam from "@/hooks/useSearchParam";
 import { getAssetMainList, postAssetSubList } from "@/apis/asset";
 import { useI18n } from "vue-i18n";
+import useBuildingStore from "@/stores/useBuildingStore";
+const store = useBuildingStore();
 const { t } = useI18n();
 const { searchParams, changeParams } = useSearchParam();
 const props = defineProps({
   openModal: Function,
-  onCancel: Function,
   getData: Function,
-  editRecord: Object,
+  formState: Object,
 });
-
+const form = ref(null);
 const mainSystem = ref([]);
+
 const updateFileList = (files) => {
-  formState.value.icon = files;
+  console.log("file", files);
+  props.formState.file = files;
 };
+
 const getMainSystems = async () => {
-  const res = await getAssetMainList();
+  const res = await getAssetMainList(store.selectedBuilding.building_guid);
   mainSystem.value = res.data.map((d) => ({ ...d, key: d.id }));
 };
 
@@ -27,53 +31,55 @@ let subSysSchema = yup.object({
   system_key: yup.string().required(t("button.required")), // 名稱
   system_value: yup.string().required(t("button.required")), // 代稱
   system_parent_id: yup.number().required(t("button.required")), // 大類id
+  file: yup.array(),
 });
 
 const { formErrorMsg, handleSubmit, handleErrorReset } =
   useFormErrorMessage(subSysSchema);
 
-const formState = ref({
-  system_key: "",
-  system_value: "",
-  system_parent_id: 0,
-  icon: [],
-});
-
-const resetForm = () => {
-  formState.value = {
+const onCancel = () => {
+  props.formState = {
+    id: 0,
     system_key: "",
     system_value: "",
     system_parent_id: 0,
-    icon: [],
+    file: [],
   };
+  asset_add_sub_item.close();
+  updateFileList([]);
+  handleErrorReset();
 };
 
-onMounted(() => {
-  getMainSystems();
-});
-
 watch(
-  () => props.editRecord,
-  (newValue) => {
-    if (newValue) {
-      formState.value = newValue;
-    } else {
-      resetForm();
+  () => store.selectedBuilding,
+  (newBuilding) => {
+    if (newBuilding) {
+      getMainSystems();
     }
-  }
+  },
+  { immediate: true }
 );
 
 const onOk = async () => {
   // 編輯
-  const value = await handleSubmit(subSysSchema, formState.value);
-  const res = await postAssetSubList({
-    ...formState.value,
-    id: props.editRecord ? props.editRecord.id : 0,
-  });
+  const value = await handleSubmit(subSysSchema, props.formState);
+  console.log("props.formState", props.formState);
 
+  const formData = new FormData(form.value);
+  formData.delete("file");
+  formData.append("id", props.formState.id);
+
+  if (props.formState.file[0]) {
+    formData.append("file", props.formState.file[0]);
+  }
+  if (props.formState.Device_image) {
+    formData.append("Device_image", props.formState.Device_image);
+  }
+
+  const res = await postAssetSubList(formData);
   if (res.isSuccess) {
     props.getData(parseInt(searchParams.value.mainSys_id));
-    props.onCancel();
+    onCancel();
   }
 };
 </script>
@@ -84,7 +90,11 @@ const onOk = async () => {
   </button>
   <Modal
     id="asset_add_sub_item"
-    :title="props.editRecord?.id ? t('assetManagement.edit_device_category') : t('assetManagement.add_device_category')"
+    :title="
+      props.formState?.id
+        ? t('assetManagement.edit_device_category')
+        : t('assetManagement.add_device_category')
+    "
     :open="open"
     :onCancel="onCancel"
     width="300"
@@ -99,7 +109,11 @@ const onOk = async () => {
             </span></template
           >
         </Input>
-        <Input name="system_value" :value="formState" :readonly="props.editRecord?.id">
+        <Input
+          name="system_value"
+          :value="formState"
+          :readonly="props.formState?.id"
+        >
           <template #topLeft>{{ $t("assetManagement.system_value") }}</template>
           <template #bottomLeft
             ><span class="text-error text-base">
@@ -114,7 +128,7 @@ const onOk = async () => {
           name="system_parent_id"
           :value="formState"
           selectClass="border-info  focus-within:border-info"
-          :disabled="props.editRecord?.id"
+          :disabled="props.formState?.id"
         >
           <template #topLeft>{{
             $t("assetManagement.system_parent")
@@ -126,13 +140,12 @@ const onOk = async () => {
           >
         </Select>
         <Upload
-          name="icon"
-          :fileList="formState.icon"
+          name="file"
+          :fileList="formState.file || []"
           :getFileList="updateFileList"
           :multiple="false"
-          :baseUrl="`${BASEURL}/upload/graph_manage`"
         >
-        <template #topLeft>{{ $t("operation.upload_file") }}</template>
+          <template #topLeft>{{ $t("operation.upload_file") }}</template>
         </Upload>
       </form>
     </template>
diff --git a/src/views/alert/components/AlertSetting/AlertSubList.vue b/src/views/alert/components/AlertSetting/AlertSubList.vue
index 1b7674d..684b062 100644
--- a/src/views/alert/components/AlertSetting/AlertSubList.vue
+++ b/src/views/alert/components/AlertSetting/AlertSubList.vue
@@ -3,12 +3,13 @@ import { ref, onMounted, watch } from "vue";
 import useSearchParam from "@/hooks/useSearchParam";
 import useActiveBtn from "@/hooks/useActiveBtn";
 import { getAlertSubList } from "@/apis/alert";
-
+import useBuildingStore from "@/stores/useBuildingStore";
+const store = useBuildingStore();
 const { searchParams, changeParams } = useSearchParam();
 const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
 
 const getSubSystems = async () => {
-  const res = await getAlertSubList();
+  const res = await getAlertSubList(store.selectedBuilding.building_guid);
   const history_Sub_systems = res.data.history_Main_Systems.flatMap(
     (mainSystem) => {
       return mainSystem.history_Sub_systems;
@@ -24,9 +25,15 @@ const getSubSystems = async () => {
   setItems(subSystems);
 };
 
-onMounted(() => {
-  getSubSystems();
-});
+watch(
+  () => store.selectedBuilding,
+  (newBuilding) => {
+    if (newBuilding) {
+      getSubSystems();
+    }
+  },
+  { immediate: true }
+);
 
 watch(selectedBtn,
   (newValue) => {
diff --git a/src/views/dashboard/components/DashboardSysCard.vue b/src/views/dashboard/components/DashboardSysCard.vue
index bebb532..ac68ad5 100644
--- a/src/views/dashboard/components/DashboardSysCard.vue
+++ b/src/views/dashboard/components/DashboardSysCard.vue
@@ -5,7 +5,7 @@ import { twMerge } from "tailwind-merge";
 import useBuildingStore from "@/stores/useBuildingStore";
 const store = useBuildingStore();
 const router = useRouter();
-
+const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
 const navigateToSubSystem = (mainSystemId, subSystemId) => {
   router.push({
     name: "sub_system",
@@ -17,7 +17,7 @@ const navigateToSubSystem = (mainSystemId, subSystemId) => {
   });
 };
 
-console.log("subSys",store.subSys)
+// console.log("subSys", store.subSys);
 </script>
 
 <template>
@@ -43,11 +43,16 @@ console.log("subSys",store.subSys)
 
       <div class="equipment-item">
         <div class="w-16">
-          <!-- <FontAwesomeIcon
+          <img
+            v-if="item.device_image_url"
+            class="w-7 m-auto"
+            :src="`${FILE_BASEURL}/${item.device_image_url}`"
+          />
+          <FontAwesomeIcon
+            v-else
             class="text-2xl mt-1 m-auto"
             :icon="['fas', 'tv']"
-          ></FontAwesomeIcon> -->
-          <img class="w-7 m-auto" src="https://cgems.cvilux-group.com:8088/upload/device_icon/3454f5e0-3afa-4ace-ae54-a68bf7183e7d.png">
+          ></FontAwesomeIcon>
         </div>
         <div class="icon-text">
           <div class="">
diff --git a/src/views/energyManagement/components/EnergyChart/ImmediateDemandChart.vue b/src/views/energyManagement/components/EnergyChart/ImmediateDemandChart.vue
index 54d78f4..7990966 100644
--- a/src/views/energyManagement/components/EnergyChart/ImmediateDemandChart.vue
+++ b/src/views/energyManagement/components/EnergyChart/ImmediateDemandChart.vue
@@ -1,92 +1,29 @@
 <script setup>
 import LineChart from "@/components/chart/LineChart.vue";
-import { ref, onMounted,watch } from "vue";
+import { ref, onMounted, watch, onUnmounted } from "vue";
 import ImmediateDemandModal from "./ImmediateDemandModal.vue";
-import { getDemand } from "@/apis/energy";
+import { getDemand, getRealTimeDemand } from "@/apis/energy";
 import { useI18n } from "vue-i18n";
 import useBuildingStore from "@/stores/useBuildingStore";
+import dayjs from "dayjs";
+
 const store = useBuildingStore();
 const { t } = useI18n();
 
 const demandData = ref(null);
-// 假資料
-const data = {
-  categories: [
-    "16:22:29",
-    "16:22:37",
-    "16:22:47",
-    "16:23:00",
-    "16:23:08",
-    "16:23:18",
-  ],
-  series: [
-    {
-      name: t("energy.real_time_Trend"), // 即時趨勢
-      type: "line",
-      data: [320, 310, 300, 305, 310, 300],
-      smooth: true,
-      lineStyle: {
-        width: 3,
-      },
-      itemStyle: {
-        color: "#17CEE3",
-      },
-    },
-    {
-      name: t("energy.contract_capacity"), // 契約容量
-      type: "line",
-      data: [400, 400, 400, 400, 400, 400],
-      smooth: true,
-      lineStyle: {
-        width: 3,
-      },
-      itemStyle: {
-        color: "#E4EA00",
-      },
-    },
-    {
-      name: t("energy.alert_capacity"), // 警戒容量
-      type: "line",
-      data: [350, 350, 350, 350, 350, 350],
-      smooth: true,
-      lineStyle: {
-        width: 3,
-      },
-      itemStyle: {
-        color: "#62E39A",
-      },
-    },
-    {
-      name: t("energy.reset_value"), // 偵測值
-      type: "line",
-      data: [280, 300, 290, 295, 300, 290],
-      smooth: true,
-      lineStyle: {
-        width: 3,
-      },
-      itemStyle: {
-        color: "#E9971F",
-      },
-    },
-  ],
-};
-
+const realTimeDemand = ref([]);
 const demand_chart = ref(null);
+const intervalId = ref(null);
+// 預設為空，避免 `null` 造成 `ECharts` 失敗
 const defaultChartOption = ref({
-  tooltip: {
-    trigger: "axis",
-  },
+  tooltip: { trigger: "axis" },
   legend: {
-    data: data.series.map((s) => s.name),
-    textStyle: {
-      color: "#ffffff",
-      fontSize: 16,
-    },
-    orient: "horizontal",
+    data: [],
+    textStyle: { color: "#ffffff", fontSize: 16 },
     bottom: "0%",
   },
   grid: {
-    top: "10%",
+    top: "3%",
     left: "0%",
     right: "0%",
     bottom: "15%",
@@ -94,42 +31,126 @@ const defaultChartOption = ref({
   },
   xAxis: {
     type: "category",
-    splitLine: {
-      show: false,
-    },
-    axisLabel: {
-      color: "#ffffff",
-    },
-    data: data.categories,
+    splitLine: { show: false },
+    axisLabel: { color: "#ffffff" },
+    data: [], // 預設空值，避免 undefined
   },
   yAxis: {
     type: "value",
-    splitLine: {
-      show: false,
-    },
-    axisLabel: {
-      color: "#ffffff",
-    },
+    splitLine: { show: false },
+    axisLabel: { color: "#ffffff" },
   },
-  series: data.series,
+  series: [],
 });
 
+// 取得契約數據
 const getData = async () => {
   if (store.selectedBuilding.building_guid) {
-  const res = await getDemand(store.selectedBuilding.building_guid);
-  demandData.value = res.data[0];
+    const res = await getDemand(store.selectedBuilding.building_guid);
+    demandData.value = res.data[0];
+    updateChart();
   }
 };
 
+// 取得即時數據
+const getRealTime = async () => {
+  if (store.selectedBuilding.building_guid) {
+    const res = await getRealTimeDemand(store.selectedBuilding.building_guid);
+    realTimeDemand.value = res.data.reverse();
+    updateChart();
+  }
+};
+
+// 更新圖表資料
+const updateChart = () => {
+  if (!demandData.value || !realTimeDemand.value.length) return;
+
+  defaultChartOption.value = {
+    ...defaultChartOption.value,
+    legend: {
+      ...defaultChartOption.value.legend,
+      data: [
+        t("energy.real_time_Trend"),
+        t("energy.contract_capacity"),
+        t("energy.alert_capacity"),
+        t("energy.reset_value"),
+      ],
+    },
+    xAxis: {
+      ...defaultChartOption.value.xAxis,
+      data: realTimeDemand.value.map(({ time }) =>
+        dayjs(time).format("HH:mm:ss")
+      ),
+    },
+    series: [
+      {
+        name: t("energy.real_time_Trend"),
+        type: "line",
+        data: realTimeDemand.value.map((d) => d.value),
+        smooth: true,
+        lineStyle: { width: 3 },
+        itemStyle: { color: "#17CEE3" },
+      },
+      {
+        name: t("energy.contract_capacity"),
+        type: "line",
+        data: Array(realTimeDemand.value.length).fill(
+          demandData.value.contract
+        ),
+        smooth: true,
+        lineStyle: { width: 3 },
+        itemStyle: { color: "#E4EA00" },
+      },
+      {
+        name: t("energy.alert_capacity"),
+        type: "line",
+        data: Array(realTimeDemand.value.length).fill(demandData.value.alert),
+        smooth: true,
+        lineStyle: { width: 3 },
+        itemStyle: { color: "#62E39A" },
+      },
+      {
+        name: t("energy.reset_value"),
+        type: "line",
+        data: Array(realTimeDemand.value.length).fill(demandData.value.reset),
+        smooth: true,
+        lineStyle: { width: 3 },
+        itemStyle: { color: "#E9971F" },
+      },
+    ],
+  };
+
+  // 確保 `chart` 有更新
+  if (demand_chart.value?.chart) {
+    // demand_chart.value.chart.clear();
+    demand_chart.value.chart.setOption(defaultChartOption.value);
+  }
+};
+
+// 監聽建築變更時重新抓取數據
 watch(
   () => store.selectedBuilding,
   (newBuilding) => {
     if (newBuilding) {
       getData();
+      getRealTime();
+      // 每 30 秒重新取得即時數據
+      if (intervalId.value) {
+        clearInterval(intervalId.value);
+      }
+      // 設置新的定時器
+      intervalId.value = setInterval(getRealTime, 30000);
     }
   },
-  { immediate: true } 
+  { immediate: true }
 );
+
+onUnmounted(() => {
+  // 清除定時器
+  clearInterval(intervalId.value); // 使用 intervalId.value
+  intervalId.value = null; // 清空 intervalId
+  console.log("Interval cleared!");
+});
 </script>
 
 <template>
@@ -137,11 +158,14 @@ watch(
     <div class="flex items-center text-white mb-5">
       <div class="flex items-end text-base relative text mr-32">
         {{ $t("energy.immediate_demand") }}
-        <span class="text-2xl px-2.5">245.48 kw</span>
-      </div>
-      <div class="flex items-end text-base">
-        {{ $t("energy.average_demand") }}
-        <span class="text-2xl px-2.5">230.8 kw</span>
+        <span class="text-2xl px-2.5"
+          >{{
+            realTimeDemand.length > 0
+              ? realTimeDemand[realTimeDemand.length - 1].value
+              : "---"
+          }}
+          kw</span
+        >
       </div>
       <ImmediateDemandModal :demandData="demandData" :getData="getData" />
     </div>
diff --git a/src/views/energyManagement/components/EnergyChart/IntervalBillChart.vue b/src/views/energyManagement/components/EnergyChart/IntervalBillChart.vue
index 924ee34..ecfd31c 100644
--- a/src/views/energyManagement/components/EnergyChart/IntervalBillChart.vue
+++ b/src/views/energyManagement/components/EnergyChart/IntervalBillChart.vue
@@ -109,7 +109,7 @@ const chartOption = computed(() => {
 
 const loadData = async (value) => {
   const res = await getElecUseDay(value);
-  if (res.isSuccess) {
+  if (res.isSuccess && res.data) {
     dataSource.value = res.data
       .sort((a, b) => a.time.localeCompare(b.time))
       .map((d) => ({ ...d, key: d.id }));
@@ -119,6 +119,10 @@ const loadData = async (value) => {
       min: dates[0],
       max: dates[dates.length - 1],
     };
+  } else {
+    // 初始化圖表
+    dataSource.value = [];
+    dateRange.value = { min: null, max: null };
   }
 };
 
diff --git a/src/views/energyManagement/components/EnergyHistoryTable/EnergyDataCahrt.vue b/src/views/energyManagement/components/EnergyHistoryTable/EnergyDataCahrt.vue
index db534fd..edfaef3 100644
--- a/src/views/energyManagement/components/EnergyHistoryTable/EnergyDataCahrt.vue
+++ b/src/views/energyManagement/components/EnergyHistoryTable/EnergyDataCahrt.vue
@@ -3,8 +3,10 @@ import { inject, computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import LineChart from "@/components/chart/LineChart.vue";
 import { SECOND_CHART_COLOR } from "@/constant";
+import useSearchParam from "@/hooks/useSearchParam";
 import dayjs from "dayjs";
 
+const { searchParams } = useSearchParam();
 const { t } = useI18n();
 const { tableData } = inject("energy_table_data");
 const history_chart = ref(null);
@@ -46,7 +48,10 @@ const defaultChartOption = {
     splitLine: { show: false },
     axisLabel: {
       color: "#ffffff",
-      formatter: (value) => dayjs(value).format("HH:mm"), // 格式化為時間
+      formatter: (value) =>
+        searchParams.value.Type == 2
+          ? dayjs(value).format("HH:mm")
+          : dayjs(value).format("MM-DD"), // 格式化為時間
     },
     data: [],
   },
@@ -54,6 +59,10 @@ const defaultChartOption = {
     type: "value",
     splitLine: { show: false },
     axisLabel: { color: "#ffffff" },
+    // interval: 100, //Y 軸的刻度間隔
+    min: "dataMin",
+    max: "dataMax",
+    // splitArea: { show: false },
   },
   series: [],
 };
diff --git a/src/views/energyManagement/components/EnergyHistoryTable/EnergySidebar.vue b/src/views/energyManagement/components/EnergyHistoryTable/EnergySidebar.vue
index 89e61e3..2d5bbbf 100644
--- a/src/views/energyManagement/components/EnergyHistoryTable/EnergySidebar.vue
+++ b/src/views/energyManagement/components/EnergyHistoryTable/EnergySidebar.vue
@@ -1,11 +1,13 @@
 <script setup>
 import Checkbox from "@/components/customUI/Checkbox.vue";
 import { computed, ref, watch, inject } from "vue";
+import { useRoute } from "vue-router";
 import useBuildingStore from "@/stores/useBuildingStore";
 import useSearchParam from "@/hooks/useSearchParam";
 import { getHistorySideBar } from "@/apis/history";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
+const route = useRoute();
 const storeBuild = useBuildingStore();
 const buildingGuid = computed(() => storeBuild.selectedBuilding?.building_guid);
 const { searchParams, changeParams } = useSearchParam();
@@ -22,7 +24,7 @@ const getDeviceData = async ({
   const res = await getHistorySideBar({
     sub_system_tag,
     department_id,
-    elec_type_id,
+    elec_type_id: route.params.type == 3 ? elec_type_id : [],
     building_guid: buildingGuid.value,
   });
   deviceData.value = (res.data || []).map((building) => ({
diff --git a/src/views/history/components/HistorySearchTime.vue b/src/views/history/components/HistorySearchTime.vue
index 6771d8a..32a4662 100644
--- a/src/views/history/components/HistorySearchTime.vue
+++ b/src/views/history/components/HistorySearchTime.vue
@@ -22,12 +22,12 @@ const itemsForEndTime = ref();
 const initializeItems = () => {
   setItems([
     {
-      title: t("history.date_range"),
+      title: t("history.time_range"),
       key: "dateRange",
       active: searchParams.value.Type
-        ? parseInt(searchParams.value.Type) === 1
+        ? parseInt(searchParams.value.Type) === 2
         : true,
-      Type: 1,
+      Type: 2,
     },
     // {
     //   title: t("history.time_range"),
diff --git a/src/views/operation/components/OperationSearchSubSys.vue b/src/views/operation/components/OperationSearchSubSys.vue
index 4ca981c..f1862e6 100644
--- a/src/views/operation/components/OperationSearchSubSys.vue
+++ b/src/views/operation/components/OperationSearchSubSys.vue
@@ -4,6 +4,8 @@ import { computed, onMounted, ref, watch,inject } from "vue";
 import useSearchParam from "@/hooks/useSearchParam";
 import useActiveBtn from "@/hooks/useActiveBtn";
 import { useI18n } from "vue-i18n";
+import useBuildingStore from "@/stores/useBuildingStore";
+const store = useBuildingStore();
 const { t } = useI18n();
 const { searchParams, changeParams } = useSearchParam();
 const { search } = inject("operation_table");
@@ -23,7 +25,7 @@ const {
 } = useActiveBtn("multiple");
 
 const getMainSystems = async () => {
-  const res = await getAssetMainList();
+  const res = await getAssetMainList(store.selectedBuilding.building_guid);
   const cate = res.data.map((d, index) => ({
     ...d,
     title: d.system_key,
@@ -48,9 +50,15 @@ const getSubSystems = async (id) => {
   setSysItems(sub);
 };
 
-onMounted(() => {
-  getMainSystems();
-});
+watch(
+  () => store.selectedBuilding,
+  (newBuilding) => {
+    if (newBuilding) {
+      getMainSystems();
+    }
+  },
+  { immediate: true }
+);
 
 watch(selectedMainSysItems, (newValue) => {
   changeParams({
diff --git a/src/views/setting/components/MQTTList.vue b/src/views/setting/components/MQTTList.vue
index 930a337..b1f7e2e 100644
--- a/src/views/setting/components/MQTTList.vue
+++ b/src/views/setting/components/MQTTList.vue
@@ -11,6 +11,8 @@ import useActiveBtn from "@/hooks/useActiveBtn";
 import MQTTListAddModal from "./MQTTListAddModal.vue";
 import PointListAddModal from "./PointListAddModal.vue";
 import { useI18n } from "vue-i18n";
+import useBuildingStore from "@/stores/useBuildingStore";
+const store = useBuildingStore();
 const { t } = useI18n();
 const { openToast, cancelToastOpen } = inject("app_toast");
 const MQTTDataSource = ref([]);
@@ -35,7 +37,7 @@ const {
 } = useActiveBtn();
 
 const getMainSystems = async () => {
-  const res = await getAssetMainList();
+  const res = await getAssetMainList(store.selectedBuilding.building_guid);
   const cate = res.data.map((d, index) => ({
     ...d,
     title: d.system_key,
@@ -179,9 +181,15 @@ watch(
   }
 );
 
-onMounted(() => {
-  getMainSystems();
-});
+watch(
+  () => store.selectedBuilding,
+  (newBuilding) => {
+    if (newBuilding) {
+      getMainSystems();
+    }
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
diff --git a/src/views/system/System.vue b/src/views/system/System.vue
index 0d1cfc9..6f9cfd2 100644
--- a/src/views/system/System.vue
+++ b/src/views/system/System.vue
@@ -38,6 +38,7 @@ const raw_data = ref([]);
 const data = ref([]); // filter data
 const route = useRoute();
 const floors = ref([]);
+const deptData = ref([]);
 const companyOptions = ref([]);
 const selected_dbid = ref([]);
 
@@ -55,7 +56,8 @@ const getData = async () => {
   if (!route.params.sub_system_id) return
   const res = await getSystemDevices({
     sub_system_tag: route.params.sub_system_id,
-    building_tag: buildingStore.selectedBuilding?.building_tag,
+    building_guid: buildingStore.selectedBuilding?.building_guid,
+    department_id_list:deptData.value,
   })
   const devices = res.data.map(d => ({
     ...d,
@@ -136,6 +138,19 @@ watch(
   }
 );
 
+watch(
+  () => deptData.value,
+  (newVal) => {
+    if (newVal) {
+      getData();
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
 watch(
   () => route.params.sub_system_id,
   (newRoute, oldRoute) => {
@@ -230,7 +245,7 @@ const clearSelectedDeviceInfo = () => {
   selectedDevice.value.value = null;
 }
 
-provide("system_selectedDevice", { selectedDeviceRealtime, selectedDevice, getCurrentInfoModalData, clearSelectedDeviceInfo, selectedDeviceCog, selected_dbid })
+provide("system_selectedDevice", { selectedDeviceRealtime, selectedDevice, getCurrentInfoModalData, clearSelectedDeviceInfo, selectedDeviceCog, selected_dbid, deptData })
 
 onBeforeUnmount(() => {
   clearInterval(timeId.value);
diff --git a/src/views/system/components/SystemDeptBar.vue b/src/views/system/components/SystemDeptBar.vue
index 2f0f2a9..6adc128 100644
--- a/src/views/system/components/SystemDeptBar.vue
+++ b/src/views/system/components/SystemDeptBar.vue
@@ -4,7 +4,7 @@ import { getDepartmentList } from "@/apis/asset";
 import { onMounted, ref, watch, inject } from "vue";
 import useActiveBtn from "@/hooks/useActiveBtn";
 import useBuildingStore from "@/stores/useBuildingStore";
-
+const { deptData } = inject("system_selectedDevice");
 const storeBuild = useBuildingStore();
 // 選部門
 const {
@@ -23,6 +23,7 @@ watch(
         active: true,
       }));
       setDeptItems(deptList);
+      deptData.value = deptList.map((d) => d.key);
     }
   },
   {
@@ -30,6 +31,10 @@ watch(
     immediate: true,
   }
 );
+
+watch(selectedDeptItems, (newVal) => {
+  deptData.value = newVal.map((d) => d.key);
+});
 </script>
 
 <template>