修改語言包、傳入參數格式、欄位必填等bug

2025-06-19 15:33:47 +08:00 · 2025-06-19 15:33:47 +08:00 · 68d834aec9
commit 68d834aec9
parent 3e96223bd9
52 changed files with 195 additions and 136 deletions
--- a/src/components/customUI/FileSystemCollapse.vue
+++ b/src/components/customUI/FileSystemCollapse.vue
@ -64,10 +64,11 @@ watch(
      twMerge(
        'flex-col text-xl',
        cls,
-        openChildren.includes(dataParentKey) || open ? 'flex' : 'hidden'
+        openChildren.includes(d.key) || open ? 'flex' : 'hidden'
      )
    "
    v-for="d in data"
+    :key="d.key"
    :data-parent="d.key"
    :open="open"
  >
--- a/src/components/customUI/Input.vue
+++ b/src/components/customUI/Input.vue
@ -9,7 +9,7 @@ const props = defineProps({
    type: String,
    default: "",
  },
-  value: String,
+  value: Object,
  isTopLabelExist: {
    type: Boolean,
    default: true,
--- a/src/components/customUI/InputNumber.vue
+++ b/src/components/customUI/InputNumber.vue
@ -9,7 +9,7 @@ const props = defineProps({
    type: String,
    default: "",
  },
-  value: String,
+  value: Object,
  isTopLabelExist: {
    type: Boolean,
    default: true,
--- a/src/components/customUI/Modal.vue
+++ b/src/components/customUI/Modal.vue
@ -51,7 +51,7 @@ onMounted(() => {
      : 'focus-visible:outline-none backdrop:bg-transparent',
  )" :style="modalStyle" v-draggable="draggable">
    <div :class="twMerge(
-      'modal-box static rounded-md border border-info py-5 px-6 overflow-y-scroll bg-normal',
+      'modal-box static rounded-md border border-info py-5 px-6 overflow-y-auto bg-normal',
      modalClass
    )
      " :style="{ minWidth: isNaN(width) ? width : `${width}px` }">
--- a/src/components/customUI/RadioGroup.vue
+++ b/src/components/customUI/RadioGroup.vue
@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";

 const props = defineProps({
  name: String,
-  value: String,
+  value: Object,
  items: Array,
  isLabelExist: {
    type: Boolean,
--- a/src/components/customUI/SearchSelect.vue
+++ b/src/components/customUI/SearchSelect.vue
@ -18,7 +18,7 @@ const props = defineProps({
  Attribute: String,
  onChange: Function,
  selectClass: String,
-  value: String || Number,
+  value: Object,
  isTopLabelExist: {
    type: Boolean,
    default: true,
--- a/src/components/customUI/Select.vue
+++ b/src/components/customUI/Select.vue
@ -18,7 +18,7 @@ const props = defineProps({
  Attribute: String,
  onChange: Function,
  selectClass: String,
-  value: String || Number,
+  value: Object,
  isTopLabelExist: {
    type: Boolean,
    default: true,
@ -70,9 +70,7 @@ const props = defineProps({
        :class="twMerge(disabled ? `text-white` : 'text-dark')"
        :value="option.value || option.key || option"
      >
-        <span>
          {{ option[Attribute] || option }}
-        </span>
      </option>
    </select>
    <div :class="twMerge(isBottomLabelExist ? 'label' : '')">
--- a/src/components/customUI/Textarea.vue
+++ b/src/components/customUI/Textarea.vue
@ -3,7 +3,7 @@ import { defineProps } from "vue";

 const props = defineProps({
  name: String,
-  value: String,
+  value: Object,
  placeholder: String,
 });
 </script>
--- a/src/components/navbar/Navbar.vue
+++ b/src/components/navbar/Navbar.vue
@ -1,5 +1,6 @@
 <script setup>
 import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 import NavbarItem from "./NavbarItem.vue";
 import NavbarBuilding from "./NavbarBuilding.vue";
 import Logo from "@/assets/img/logo.svg";
@ -10,6 +11,7 @@ import { twMerge } from "tailwind-merge";

 const user = ref("");
 const menuShow = ref(true);
+const router = useRouter();

 const store = useUserInfoStore();
 onMounted(() => {
@ -24,12 +26,25 @@ const toggleMenu = () => {
 };

 const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
+
+const logout = () => {
+  document.cookie = "JWT-Authorization=; Max-Age=0";
+  document.cookie = "user_name=; Max-Age=0";
+  store.user.token = "";
+  store.user.user_name = "";
+  router.push({ path: "/login" });
+};
 </script>

 <template>
  <header class="navbar bg-dark text-light-info w-full relative z-50">
    <div class="navbar-start min-w-[480px] lg:min-w-[440px]">
-      <div tabindex="0" role="button" class="btn btn-ghost lg:hidden" @click="toggleMenu">
+      <div
+        tabindex="0"
+        role="button"
+        class="btn btn-ghost lg:hidden"
+        @click="toggleMenu"
+      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
@ -93,12 +108,12 @@ const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
              class="dropdown-content translate-y-2 z-[100] menu py-3 shadow rounded w-32 bg-[#4c625e] border text-center"
            >
              <li class="text-white">
-                <router-link
-                  to="logout"
-                  type="link"
+                <a
+                  href="#"
+                  @click.prevent="logout"
                  class="flex flex-col justify-center items-center"
                  >{{ $t("sign_out") }}
-                </router-link>
+                </a>
              </li>
            </ul>
          </div>
--- a/src/config/cn.json
+++ b/src/config/cn.json
@ -399,7 +399,8 @@
    "sure_to_delete_permanent": "是否确认永久删除该项目?",
    "delete_success": "删除成功",
    "delete_failed": "删除失败",
-    "mqtt_refresh": "重新设定成功"
+    "mqtt_refresh": "重新设定成功",
+    "schema_name_required": "架构名称栏位必填"
  },
  "setting": {
    "MQTT_parse": "MQTT 解析",
--- a/src/config/tw.json
+++ b/src/config/tw.json
@ -399,7 +399,8 @@
    "sure_to_delete_permanent": "是否確認永久刪除該項目?",
    "delete_success": "刪除成功",
    "delete_failed": "刪除失敗",
-    "mqtt_refresh": "重新設定成功"
+    "mqtt_refresh": "重新設定成功",
+    "schema_name_required": "架構名稱欄位必填"
  },
  "setting": {
    "MQTT_parse": "MQTT 解析",
--- a/src/config/us.json
+++ b/src/config/us.json
@ -399,7 +399,8 @@
    "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",
+    "schema_name_required": "The schema name field is required"
  },
  "setting": {
    "MQTT_parse": "MQTT Parse",
--- a/src/router/index.js
+++ b/src/router/index.js
@ -107,15 +107,6 @@ router.beforeEach(async (to, from, next) => {
  const token = useGetCookie("JWT-Authorization");
  const user_name = useGetCookie("user_name");

-  if (to.path === "/logout") {
-    document.cookie = "JWT-Authorization=; Max-Age=0";
-    document.cookie = "user_name=; Max-Age=0";
-    auth.user.token = "";
-    auth.user.user_name = "";
-    window.location.reload();
-    next({ path: "/login" });
-  }
-
  if ((authRequired && !token) || to.path === "/") {
    auth.user.token = "";
    next({ path: "/login" });
--- a/src/views/AssetManagement/components/AssetMainListAddModal.vue
+++ b/src/views/AssetManagement/components/AssetMainListAddModal.vue
@ -61,9 +61,8 @@ const onReset = () => {
        ? t('assetManagement.edit_system_category')
        : t('assetManagement.add_system_category')
    "
-    :open="open"
    :onCancel="onReset"
-    width="300"
+    :width="300"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 flex flex-col items-center">
@ -75,7 +74,7 @@ const onReset = () => {
            </span></template
          >
        </Input>
-        <Input name="system_value" :value="formState" :readonly="props.formState?.id">
+        <Input name="system_value" :value="formState" :readonly="Boolean(props.formState?.id)">
          <template #topLeft>{{ $t("assetManagement.system_value") }}</template>
          <template #bottomLeft
            ><span class="text-error text-base">
--- a/src/views/AssetManagement/components/AssetSubListAddModal.vue
+++ b/src/views/AssetManagement/components/AssetSubListAddModal.vue
@ -95,9 +95,8 @@ const onOk = async () => {
        ? t('assetManagement.edit_device_category')
        : t('assetManagement.add_device_category')
    "
-    :open="open"
    :onCancel="onCancel"
-    width="300"
+    :width="300"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 flex flex-col items-center">
@ -112,7 +111,7 @@ const onOk = async () => {
        <Input
          name="system_value"
          :value="formState"
-          :readonly="props.formState?.id"
+          :readonly="Boolean(props.formState?.id)"
        >
          <template #topLeft>{{ $t("assetManagement.system_value") }}</template>
          <template #bottomLeft
@ -128,7 +127,7 @@ const onOk = async () => {
          name="system_parent_id"
          :value="formState"
          selectClass="border-info  focus-within:border-info"
-          :disabled="props.formState?.id"
+          :disabled="Boolean(props.formState?.id)"
        >
          <template #topLeft>{{
            $t("assetManagement.system_parent")
--- a/src/views/AssetManagement/components/AssetTable.vue
+++ b/src/views/AssetManagement/components/AssetTable.vue
@ -4,12 +4,14 @@ import { onMounted, ref, watch, inject, provide, computed } from "vue";
 import useSearchParam from "@/hooks/useSearchParam";
 import AssetTableAddModal from "./AssetTableAddModal.vue";
 import { getOperationCompanyList } from "@/apis/operation";
-import { getAssetFloorList } from "@/apis/asset";
+import { postMQTTRefresh } from "@/apis/alert";
 import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 const { openToast, cancelToastOpen } = inject("app_toast");
-const { companyOptions, departmentList, floors } = inject("asset_modal_options");
+const { companyOptions, departmentList, floors } = inject(
+  "asset_modal_options"
+);
 const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
 const { searchParams, changeParams } = useSearchParam();

@ -33,7 +35,8 @@ const getAssetData = async () => {
      floor: floors.value.find(({ floor_guid }) => d.floor_guid === floor_guid)
        ?.full_name,
      company: companyOptions.value.find(({ id }) => d.operation_id === id),
-      department: departmentList.value.find(({ id }) => d.department_id === id)?.name,
+      department: departmentList.value.find(({ id }) => d.department_id === id)
+        ?.name,
      buying_date: d?.buying_date
        ? dayjs(d?.buying_date).format("YYYY-MM-DD")
        : "",
@ -44,6 +47,15 @@ const getAssetData = async () => {
  }
 };

+const refreshMQTT = async () => {
+  const res = await postMQTTRefresh();
+  if (res.isSuccess) {
+    openToast("success", t("msg.mqtt_refresh"));
+  } else {
+    openToast("error", res.msg, "#outliers_add_table_item");
+  }
+};
+
 onMounted(async () => {
  getAssetData();
 });
@ -113,8 +125,8 @@ watch(
  (newValue) => {
    if (newValue.value?.subSys_id) {
      getAssetData();
-    }else{
-      tableData.value=[];
+    } else {
+      tableData.value = [];
    }
  },
  {
@ -162,7 +174,7 @@ const remove = async (id) => {
    const res = await deleteAssetItem(id);
    if (res.isSuccess) {
      getAssetData();
-      openToast("success",  t("msg.delete_success"));
+      openToast("success", t("msg.delete_success"));
    } else {
      openToast("error", res.msg);
    }
@ -175,14 +187,21 @@ provide("asset_table_data", {
 </script>

 <template>
-  <div class="flex justify-start items-center mt-10">
-    <h3 class="text-xl mr-5">{{ $t("assetManagement.device_list") }}</h3>
-    <AssetTableAddModal
-      :openModal="openModal"
-      :onCancel="onCancel"
-      :editRecord="editRecord"
-      :getData="getAssetData"
-    />
+  <div class="flex justify-between items-center mt-10">
+    <div class="flex">
+      <h3 class="text-xl mr-5">{{ $t("assetManagement.device_list") }}</h3>
+      <AssetTableAddModal
+        :openModal="openModal"
+        :onCancel="onCancel"
+        :editRecord="editRecord"
+        :getData="getAssetData"
+      />
+    </div>
+    <button class="btn btn-sm btn-add" @click.prevent="refreshMQTT">
+      <font-awesome-icon :icon="['fas', 'cog']" />{{
+        $t("alert.reorganization")
+      }}
+    </button>
  </div>
  <Table :columns="columns" :dataSource="tableData" class="mt-3">
    <template #bodyCell="{ record, column, index }">
--- a/src/views/AssetManagement/components/AssetTableAddModal.vue
+++ b/src/views/AssetManagement/components/AssetTableAddModal.vue
@ -108,9 +108,8 @@ const closeModal = () => {
  <Modal
    id="asset_add_table_item"
    :title="editRecord?.main_id ? $t('assetManagement.edit_device') : $t('assetManagement.add_device')"
-    :open="open"
    :onCancel="closeModal"
-    width="1600"
+    :width="1600"
  >
    <template #modalContent>
      <form ref="form" class="grid grid-cols-5 gap-5">
--- a/src/views/AssetManagement/components/AssetTableModalLeftInfoDept.vue
+++ b/src/views/AssetManagement/components/AssetTableModalLeftInfoDept.vue
@ -127,7 +127,7 @@ const onCancel = () => {
    id="asset_add_dept"
    :title="t('assetManagement.department')"
    :onCancel="onCancel"
-    width="400"
+    :width="400"
  >
    <template #modalContent>
      <form ref="form">
--- a/src/views/AssetManagement/components/AssetTableModalLeftInfoGraph.vue
+++ b/src/views/AssetManagement/components/AssetTableModalLeftInfoGraph.vue
@ -138,7 +138,7 @@ onMounted(async () => {
    id="asset_add_graph_item"
    :title="t('graphManagement.title')"
    :onCancel="onCancel"
-    width="500"
+    :width="500"
  >
    <template #modalContent>
      <ul class="menu bg-base-200 rounded-box text-lg w-full mt-3">
--- a/src/views/AssetManagement/components/AssetTableModalLeftInfoIoT.vue
+++ b/src/views/AssetManagement/components/AssetTableModalLeftInfoIoT.vue
@ -225,7 +225,7 @@ const deleteItem = (value) => {
    id="asset_add_IoT_item"
    :title="t('assetManagement.associated_device')"
    :onCancel="onCancel"
-    width="900"
+    :width="900"
  >
    <template #modalContent>
      <ButtonGroup
--- a/src/views/AssetManagement/components/AssetTableModalLeftInfoMQTT.vue
+++ b/src/views/AssetManagement/components/AssetTableModalLeftInfoMQTT.vue
@ -106,7 +106,7 @@ const onCancel = () => {
    </button>
  </div>

-  <Modal id="mqtt_test" title="MQTT Topic" :onCancel="onCancel" width="400">
+  <Modal id="mqtt_test" title="MQTT Topic" :onCancel="onCancel" :width="400">
    <template #modalContent>
      <!-- 顯示接收到的訊息 -->
      <div v-if="receivedMessages.length > 0" class="overflow-y-auto h-96">
--- a/src/views/accountManagement/AccountManagement.vue
+++ b/src/views/accountManagement/AccountManagement.vue
@ -2,7 +2,7 @@
 import ButtonGroup from "@/components/customUI/ButtonGroup.vue";
 import Account from "./components/Account.vue";
 import Role from "./components/Role.vue";
-import { computed, watch, onBeforeMount } from "vue";
+import { computed, watch, onBeforeMount, markRaw } from "vue";
 import useActiveBtn from "@/hooks/useActiveBtn";
 import { useI18n } from "vue-i18n";
 const { t, locale } = useI18n();
@ -18,13 +18,13 @@ const initializeItems = () => {
      title: t("accountManagement.account_title"),
      key: "account",
      active: true,
-      component: Account,
+      component: markRaw(Account),
    },
    {
      title: t("accountManagement.role_title"),
      key: "role",
      active: false,
-      component: Role,
+       component: markRaw(Role),
    },
  ]);
 };
--- a/src/views/accountManagement/components/AccountModal.vue
+++ b/src/views/accountManagement/components/AccountModal.vue
@ -127,7 +127,7 @@ const onOk = async () => {
    id="account_user_modal"
    :title="formState?.Id ? t('button.edit') : t('button.add')"
    :onCancel="onCancel"
-    width="710"
+    :width="710"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
--- a/src/views/accountManagement/components/AccountPasswordModal.vue
+++ b/src/views/accountManagement/components/AccountPasswordModal.vue
@ -9,7 +9,7 @@ const { t } = useI18n();
 const { openToast } = inject("app_toast");

 const props = defineProps({
-  account: String,
+  account: Object,
 });

 const formState = ref({
@ -48,7 +48,7 @@ const onOk = async () => {
    id="account_user_password_modal"
    :title="t('accountManagement.change_password')"
    :onCancel="onCancel"
-    width="710"
+   :width="710"
  >
    <template #modalContent>
      <p class="mt-10 text-3xl">{{ account.Name }}</p>
--- a/src/views/accountManagement/components/RoleAuthModal.vue
+++ b/src/views/accountManagement/components/RoleAuthModal.vue
@ -13,7 +13,7 @@ import useActiveBtn from "@/hooks/useActiveBtn";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 const props = defineProps({
-  selectedRole: String,
+  selectedRole: Object,
  cancelModal: Function,
  disabled: Boolean,
  update: Function,
--- a/src/views/alert/AlertManagement.vue
+++ b/src/views/alert/AlertManagement.vue
@ -2,7 +2,7 @@
 import ButtonGroup from "@/components/customUI/ButtonGroup.vue";
 import AlertQuery from "./components/AlertQuery/AlertQuery.vue";
 import AlertSetting from "./components/AlertSetting/AlertSetting.vue";
-import { computed, watch, onBeforeMount } from "vue";
+import { computed, watch, onBeforeMount, markRaw } from "vue";
 import useActiveBtn from "@/hooks/useActiveBtn";
 import { useI18n } from "vue-i18n";
 const { t, locale } = useI18n();
@ -18,13 +18,13 @@ const initializeItems = () => {
      title: t("alert.query_title"),
      key: "Query",
      active: true,
-      component: AlertQuery,
+      component: markRaw(AlertQuery),
    },
    {
      title: t("alert.setting_title"),
      key: "Setting",
      active: false,
-      component: AlertSetting,
+      component: markRaw(AlertSetting),
    },
  ]);
 };
--- a/src/views/alert/components/AlertQuery/AlertTableModal.vue
+++ b/src/views/alert/components/AlertQuery/AlertTableModal.vue
@ -160,7 +160,7 @@ watch(
    id="alert_action_item"
    :title="t('alert.repair_order')"
    :onCancel="onCancel"
-    width="710"
+    :width="710"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
@ -199,7 +199,7 @@ watch(
            {
              key: 1,
              value: 1,
-              title: $t('alert.maintenance'),
+              title: $t('operation.maintenance'),
            },
            {
              key: 2,
--- a/src/views/alert/components/AlertSetting/AlertNotifyTableAddModal.vue
+++ b/src/views/alert/components/AlertSetting/AlertNotifyTableAddModal.vue
@ -94,9 +94,8 @@ const closeModal = () => {
  <Modal
    id="notify_add_table_item"
    :title="t('alert.notify_list')"
-    :open="open"
    :onCancel="closeModal"
-    width="300"
+    :width="300"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 flex flex-col items-center">
@ -128,7 +127,7 @@ const closeModal = () => {
          <p class="text-light text-base">{{ $t("alert.notify_items") }}</p>
          <AlertNoticesTable
            :SaveCheckAuth="SaveCheckAuth"
-            :NoticeData="[noticeList[2]]"
+            :NoticeData="[noticeList[1]]"
            :onChange="onChange"
          />
          <span class="text-error text-base">
--- a/src/views/alert/components/AlertSetting/AlertOutliersTableAddModal.vue
+++ b/src/views/alert/components/AlertSetting/AlertOutliersTableAddModal.vue
@ -119,9 +119,8 @@ const closeModal = () => {
  <Modal
    id="outliers_add_table_item"
    :title="t('alert.alarm_settings')"
-    :open="open"
    :onCancel="closeModal"
-    width="710"
+    :width="710"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
--- a/src/views/alert/components/AlertSetting/AlertSetting.vue
+++ b/src/views/alert/components/AlertSetting/AlertSetting.vue
@ -10,17 +10,17 @@ const { locale } = useI18n();
 const timesList = ref([]);
 const noticeList = ref([]);

-const timesListData = async () => {
-  const res = await getAlarmScheduleList();
-  timesList.value = res.data.map((items) => ({
-    ...items,
-    key:items.id,
-    schedule_array: JSON.parse(items.schedule_json).map((time, index) => ({
-      day: index + 1,
-      time,
-    })),
-  }));
-};
+// const timesListData = async () => {
+//   const res = await getAlarmScheduleList();
+//   timesList.value = res.data.map((items) => ({
+//     ...items,
+//     key:items.id,
+//     schedule_array: JSON.parse(items.schedule_json).map((time, index) => ({
+//       day: index + 1,
+//       time,
+//     })),
+//   }));
+// };

 const NoticeListData = async () => {
  const res = await getNoticeList(locale.value);
@ -32,11 +32,15 @@ watch(locale, () => {
 });

 onMounted(() => {
-  timesListData();
+  // timesListData();
  NoticeListData();
 });

-provide("notify_table", { timesList, noticeList, timesListData });
+provide("notify_table", {
+  timesList,
+  noticeList,
+  // timesListData
+});
 </script>

 <template>
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@ -16,7 +16,7 @@ import { twMerge } from "tailwind-merge";
 const store = useBuildingStore();
 const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
 let intervalId = null;
-const energyCostData = ref(null);
+const energyCostData = ref({});
 const formState = ref({
  building_guid: null,
  floor_guid: "all",
--- a/src/views/dashboard/components/DashboardElecRank.vue
+++ b/src/views/dashboard/components/DashboardElecRank.vue
@ -26,7 +26,7 @@ const currentEnergyType = ref({

 // 取得當前能耗資料
 const getCurrentEnergyData = () => {
-  if (!props.energyCostData) {
+  if (!props.energyCostData || !props.energyCostData.rank) { 
    return []; // 或者返回一些默认值
  }

--- a/src/views/dashboard/components/DashboardSysProgressModal.vue
+++ b/src/views/dashboard/components/DashboardSysProgressModal.vue
@ -35,6 +35,16 @@ watch(selectedBtn, (newVal, oldVal) => {
    detailData.value = props.modalData[newVal.key];
  }
 });
+
+watch(
+  () => props.modalData,
+  (newVal, oldVal) => {
+    if (newVal) {
+      changeActiveBtn(items.value[0]);
+    }
+  },
+  { immediate: true }
+);
 </script>

 <template>
@ -51,13 +61,13 @@ watch(selectedBtn, (newVal, oldVal) => {
            }
          "
        />
-        <Button
+        <button
          type="link"
          class="btn-link btn-text-without-border px-2"
          @click="onCancel"
        >
          <font-awesome-icon :icon="['fas', 'times']" class="text-[#a5abb1]" />
-        </Button>
+        </button>
      </div>
    </template>
    <template #modalContent>
--- a/src/views/energyManagement/EnergyManagement.vue
+++ b/src/views/energyManagement/EnergyManagement.vue
@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, markRaw } from "vue";
 import { useRoute } from "vue-router";

 import EnergyChart from "./components/EnergyChart/EnergyChart.vue";
@ -14,12 +14,12 @@ const updateComponent = () => {

  if (main_system_id === "energy_chart") {
    if (sub_system_id === "chart") {
-      currentComponent.value = EnergyChart;
+      currentComponent.value = markRaw(EnergyChart);
    } else {
-      currentComponent.value = EnergyHistoryTable;
+      currentComponent.value = markRaw(EnergyHistoryTable);
    }
  } else if (main_system_id === "energy_report") {
-    currentComponent.value = EnergyReport;
+    currentComponent.value = markRaw(EnergyReport);
  } else {
    currentComponent.value = null; 
  }
--- a/src/views/energyManagement/components/EnergyChart/CarbonEmissionModal.vue
+++ b/src/views/energyManagement/components/EnergyChart/CarbonEmissionModal.vue
@ -42,7 +42,7 @@ const onOk = async () => {

  const res = await postEditCarbonValue({
    ...values,
-    "building_guid":store.selectedBuilding.building_guid,
+    building_guid: store.selectedBuilding.building_guid,
  });
  if (res.isSuccess) {
    props.getData();
@ -67,19 +67,24 @@ const closeModal = () => {
 </script>

 <template>
-  <button class="btn btn-sm btn-success ms-auto me-3" @click.stop.prevent="openModal">
+  <button
+    class="btn btn-sm btn-success ms-auto me-3"
+    @click.stop.prevent="openModal"
+  >
    {{ $t("button.edit") }}
  </button>
  <Modal
    id="carbon_emission_item"
    :title="t('energy.edit_carbon_emission')"
    :onCancel="closeModal"
-    width="300"
+    :width="300"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 flex flex-col items-center">
        <Input :value="formState" class="w-full" name="coefficient">
-          <template #topLeft>{{$t('energy.carbon_emission_coefficient')}}</template>
+          <template #topLeft>{{
+            $t("energy.carbon_emission_coefficient")
+          }}</template>
          <template #bottomLeft>
            <span class="text-error text-base">
              {{ formErrorMsg.coefficient }}
--- a/src/views/energyManagement/components/EnergyChart/ElecConsumption.vue
+++ b/src/views/energyManagement/components/EnergyChart/ElecConsumption.vue
@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, nextTick, watch, inject } from "vue";
+import { ref, onMounted, watch, inject } from "vue";
 import * as echarts from "echarts";
 import { getRealTimeDist } from "@/apis/energy";
 import { useI18n } from "vue-i18n";
@ -7,6 +7,7 @@ const { search_data } = inject("energy_data");
 const { t } = useI18n();

 const chartDiv = ref(null);
+let myChart = null;  // 添加 myChart 变量

 const chartOption = {
  tooltip: {
@ -91,12 +92,18 @@ const loadData = async (value) => {
      chartOption.series[0].links = links;

      // 初始化圖表
-      const myChart = echarts.init(chartDiv.value);
+      if (myChart) {
+        myChart.dispose();  // 銷毀之前的實例
+      }
+      myChart = echarts.init(chartDiv.value);
      myChart.setOption(chartOption);
    }
  } else {
-    // 初始化圖表
-    echarts.init(chartDiv.value).clear();
+    // 清空圖表
+    if (myChart) {
+      myChart.dispose();  // 銷毀之前的實例
+      myChart = null;
+    }
  }
 };

@ -115,6 +122,12 @@ watch(
    deep: true,
  }
 );
+
+onMounted(() => {
+  // 初始化圖表
+  myChart = echarts.init(chartDiv.value);
+  myChart.setOption(chartOption);
+});
 </script>

 <template>
@ -138,4 +151,4 @@ ul li:last-child:after {
  @apply absolute top-0 bottom-0 left-full block w-full h-[1px] bg-slate-600 m-auto z-10;
  content: "";
 }
-</style>
+</style>
--- a/src/views/energyManagement/components/EnergyChart/ImmediateDemandModal.vue
+++ b/src/views/energyManagement/components/EnergyChart/ImmediateDemandModal.vue
@ -81,7 +81,7 @@ const onCancel = () => {
    id="immediate_demand_add_item"
    :title="t('energy.edit_automatic_demand')"
    :onCancel="closeModal"
-    width="300"
+    :width="300"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 flex flex-col items-center">
--- a/src/views/energyManagement/components/EnergyHistoryTable/EnergyDataTable.vue
+++ b/src/views/energyManagement/components/EnergyHistoryTable/EnergyDataTable.vue
@ -132,7 +132,7 @@ const columns = computed(() => {
        key: "endTime",
      },
      {
-        title: t("energy.ectricity_classification"),
+        title: t("energy.electricity_classification"),
        key: "elecType",
      },
      {
--- a/src/views/graphManagement/components/GraphModal.vue
+++ b/src/views/graphManagement/components/GraphModal.vue
@ -126,7 +126,7 @@ watch(
  <button class="btn btn-add mr-3" @click.stop.prevent="openModal">
    <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
  </button>
-  <Modal id="graph_add_item" :title="t('graphManagement.upload')" :onCancel="onCancel" width="800">
+  <Modal id="graph_add_item" :title="t('graphManagement.upload')" :onCancel="onCancel" :width="800">
    <template #modalContent>
      <form ref="form" class="mt-5">
        <div class="mb-2">
--- a/src/views/history/components/HistorySidebar.vue
+++ b/src/views/history/components/HistorySidebar.vue
@ -110,7 +110,7 @@ const checkedBuilding = computed(() => {

    if (
      selectedDeviceNumber.value?.filter(
-        (d) => d.split("_")[1] === building_tag
+        (d) => d?.split("_")[1] === building_tag
      ).length === allDevices.length
    ) {
      selected.push(building_tag);
--- a/src/views/operation/components/OperationSearchType.vue
+++ b/src/views/operation/components/OperationSearchType.vue
@ -7,7 +7,7 @@ import { twMerge } from "tailwind-merge";
 import { useI18n } from 'vue-i18n';
 const { t, locale } = useI18n(); 
 const props = defineProps({
-  selected: String,
+  selected: Object,
 });

 const { searchParams, changeParams } = useSearchParam();
--- a/src/views/operation/components/OperationTableModal.vue
+++ b/src/views/operation/components/OperationTableModal.vue
@ -226,7 +226,7 @@ watch(
 </script>

 <template>
-  <Modal id="operation_action_item" :onCancel="onCancel" width="710">
+  <Modal id="operation_action_item" :onCancel="onCancel" :width="710">
    <template #modalContent>
      <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
        <template v-if="searchParams?.work_type < 3">
--- a/src/views/setting/SettingManagement.vue
+++ b/src/views/setting/SettingManagement.vue
@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, markRaw } from "vue";
 import { useRoute } from "vue-router";

 import Dept from "./components/Dept.vue";
@ -19,21 +19,21 @@ const updateComponent = () => {
  const { main_system_id, sub_system_id } = route.params;

  if (sub_system_id === "Department") {
-    currentComponent.value = Dept;
+    currentComponent.value =  markRaw(Dept);
  } else if (sub_system_id === "ElecType") {
-    currentComponent.value = ElecType;
+    currentComponent.value = markRaw(ElecType);
  } else if (sub_system_id === "Vendor") {
-    currentComponent.value = Vendor;
+    currentComponent.value = markRaw(Vendor);
  } else if (sub_system_id === "Floor") {
-    currentComponent.value = Floors;
+    currentComponent.value = markRaw(Floors);
  } else if (sub_system_id === "Building") {
-    currentComponent.value = Building;
+    currentComponent.value = markRaw(Building);
  } else if (sub_system_id === "ElecPricing") {
-    currentComponent.value = ElecPriceManagement;
+    currentComponent.value = markRaw(ElecPriceManagement);
  } else if (sub_system_id === "MQTT_Result") {
-    currentComponent.value = MQTTList;
+    currentComponent.value = markRaw(MQTTList);
  } else if (sub_system_id === "Demand") {
-    currentComponent.value = Demand;
+    currentComponent.value = markRaw(Demand);
  } 
 };

--- a/src/views/setting/components/BuildingModal.vue
+++ b/src/views/setting/components/BuildingModal.vue
@ -46,7 +46,7 @@ const onOk = async () => {
    id="build_modal"
    :title="props.formState?.building_guid ? t('button.edit') : t('button.add')"
    :onCancel="onCancel"
-    width="400"
+    :width="400"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
--- a/src/views/setting/components/DeptModal.vue
+++ b/src/views/setting/components/DeptModal.vue
@ -48,7 +48,7 @@ const onOk = async () => {
    id="dept_modal"
    :title="props.formState?.id ? t('button.edit') : t('button.add')"
    :onCancel="onCancel"
-    width="400"
+    :width="400"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
--- a/src/views/setting/components/ElecPriceManagement.vue
+++ b/src/views/setting/components/ElecPriceManagement.vue
@ -2,7 +2,7 @@
 import ButtonGroup from "@/components/customUI/ButtonGroup.vue";
 import ElecPriceRes from "./ElecPriceRes.vue";
 import ElecPriceStd from "./ElecPriceStd.vue";
-import { computed, watch, onBeforeMount, ref, provide } from "vue";
+import { computed, watch, onBeforeMount, ref, provide, markRaw } from "vue";
 import useActiveBtn from "@/hooks/useActiveBtn";
 import { useI18n } from "vue-i18n";
 import { getTimeElec } from "@/apis/energy";
@ -26,13 +26,13 @@ const initializeItems = () => {
      title: t("energy.residential"),
      key: "Residential",
      active: true,
-      component: ElecPriceRes,
+      component: markRaw(ElecPriceRes),
    },
    {
      title: t("energy.standard"),
      key: "Standard",
      active: false,
-      component: ElecPriceStd,
+      component: markRaw(ElecPriceStd),
    },
  ]);
 };
--- a/src/views/setting/components/ElecTypeModal.vue
+++ b/src/views/setting/components/ElecTypeModal.vue
@ -46,7 +46,7 @@ const onOk = async () => {
    id="elec_modal"
    :title="props.formState?.id ? t('button.edit') : t('button.add')"
    :onCancel="onCancel"
-    width="400"
+    :width="400"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
--- a/src/views/setting/components/FloorsModal.vue
+++ b/src/views/setting/components/FloorsModal.vue
@ -66,7 +66,7 @@ const onOk = async () => {
    id="floor_modal"
    :title="props.formState?.floor_guid ? t('button.edit') : t('button.add')"
    :onCancel="onCancel"
-    width="400"
+    :width="400"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
--- a/src/views/setting/components/MQTTListAddModal.vue
+++ b/src/views/setting/components/MQTTListAddModal.vue
@ -102,6 +102,10 @@ watch(
 );

 const onOk = async () => {
+  if (!schemaName.value) {
+    openToast("error", t("msg.schema_name_required"), "#MQTT_Parse_item");
+    return;
+  }
  const points = formStates.value.map((state) => ({
    PointOrg: state.PointOrg,
    PointSys: props.pointsData.find((point) => point.id === state.item_id)
@ -181,13 +185,14 @@ const onCancel = () => {
            type="text"
            v-model.text="schemaName"
            class="input border-info focus-within:border-info"
+            required
          />
        </div>
        <table class="table w-1/2 mt-2">
          <thead>
            <tr>
-              <th>{{$t("setting.IoT_point_structure")}}</th>
-              <th>{{$t("setting.system_point_name")}}</th>
+              <th>{{ $t("setting.IoT_point_structure") }}</th>
+              <th>{{ $t("setting.system_point_name") }}</th>
            </tr>
          </thead>
          <tbody>
--- a/src/views/setting/components/VendorModal.vue
+++ b/src/views/setting/components/VendorModal.vue
@ -60,7 +60,7 @@ const onOk = async () => {
    id="company_modal"
    :title="props.formState?.id ? t('button.edit') : t('button.add')"
    :onCancel="onCancel"
-    width="710"
+    :width="710"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
--- a/src/views/system/components/SystemCard.vue
+++ b/src/views/system/components/SystemCard.vue
@ -32,7 +32,7 @@ const cancelDialog = () => {
      frameborder="0"
      class="w-full h-full"
    ></iframe>
-    <Button
+    <button
      type="link"
      class="btn-link btn-text-without-border z-20 absolute right-[2.3rem] top-[2.2rem]"
      @click="cancelDialog"
@ -41,7 +41,7 @@ const cancelDialog = () => {
        :icon="['fas', 'times']"
        class="text-[#a5abb1] text-2xl"
      />
-    </Button>
+    </button>
  </dialog>

  <template v-if="showData.length > 0">
--- a/src/views/system/components/SystemInfoModalContent.vue
+++ b/src/views/system/components/SystemInfoModalContent.vue
@ -33,25 +33,25 @@ const onCancel = () => {
    <div class="card-title py-2 border-b border-zinc-700 justify-between">
      <h3>{{ data?.value?.full_name }}</h3>
      <div>
-        <Button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('desktop')">
+        <button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('desktop')">
          <font-awesome-icon :icon="['fas', 'desktop']" size="lg"
            :class="twMerge(currentTab === 'desktop' ? 'text-success' : 'text-[#a5abb1]')" />
-        </Button>
-        <Button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('image')">
+        </button>
+        <button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('image')">
          <font-awesome-icon :icon="['fas', 'image']" size="lg"
            :class="twMerge(currentTab === 'image' ? 'text-success' : 'text-[#a5abb1]')" />
-        </Button>
-        <Button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('cog')">
+        </button>
+        <button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('cog')">
          <font-awesome-icon :icon="['fas', 'cog']" size="lg"
            :class="twMerge(currentTab === 'cog' ? 'text-success' : 'text-[#a5abb1]')" />
-        </Button>
+        </button>
        <!-- <Button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('chart')">
          <font-awesome-icon :icon="['fas', 'chart-line']" size="lg"
            :class="twMerge(currentTab === 'chart' ? 'text-success' : 'text-[#a5abb1]')" />
        </Button> -->
-        <Button type="link" class="btn-link btn-text-without-border px-2" @click="onCancel">
+        <button type="link" class="btn-link btn-text-without-border px-2" @click="onCancel">
          <font-awesome-icon :icon="['fas', 'times']" size="lg" class="text-[#a5abb1]" />
-        </Button>
+        </button>
      </div>
    </div>
    <div class="card-body p-0">