修改路徑 | 首頁小卡修改

.env.development

@@ -1,3 +1,3 @@
-VITE_API_BASEURL = "http://192.168.0.206:8060"
+VITE_API_BASEURL = "https://ibms-cvilux-api.production.mjmtech.com.tw"
-VITE_FILE_API_BASEURL = "http://192.168.0.206:8088"
+VITE_FILE_API_BASEURL = "https://ibms-cvilux.production.mjmtech.com.tw"
 VITE_FORGE_BASEURL = "http://localhost:5173"

.env.production

@@ -1,3 +1,3 @@
-VITE_API_BASEURL = "http://192.168.0.206:8060"
+VITE_API_BASEURL = "https://ibms-cvilux-api.production.mjmtech.com.tw"
-VITE_FILE_API_BASEURL = "http://192.168.0.206:8088"
+VITE_FILE_API_BASEURL = "https://ibms-cvilux.production.mjmtech.com.tw"
 VITE_FORGE_BASEURL = "http://202.39.218.221:8080/file/netzero"

src/apis/alert/index.js

@@ -79,8 +79,8 @@ export const getAlarmMemberList = async () => {
   });
 };
 
-export const getNoticeList = async () => {
+export const getNoticeList = async (lang) => {
-  const res = await instance.post(GET_NOTICE_LIST_API, {});
+  const res = await instance.post(GET_NOTICE_LIST_API, { lang });
 
   return apihandler(res.code, res.data, {
     msg: res.msg,

src/apis/building/index.js

@@ -16,8 +16,10 @@ export const getBuildings = async () => {
   });
 };
 
-export const getAuth = async () => {
+export const getAuth = async (lang) => {
-  const res = await instance.post(GET_AUTHPAGE_API);
+  const res = await instance.post(GET_AUTHPAGE_API, {
+    lang,
+  });
   return apihandler(res.code, res.data, {
     msg: res.msg,
     code: res.code,

src/components/alarm/AlarmDrawer.vue

@@ -24,13 +24,13 @@ const toggleErrIcon = () => {
           v-if="!showErr"
           :icon="['fas', 'comment-dots']"
           size="2x"
-          class="text-white menu-icon"
+          class="text-white w-10 m-auto"
         />
         <font-awesome-icon
           v-else
           :icon="['fas', 'comment-slash']"
           size="2x"
-          class="text-white menu-icon"
+          class="text-white w-10 m-auto"
         />
         <span class="text-white"> {{ $t("alarm.title") }}</span>
       </label>

src/components/customUI/Pagination.vue

@@ -2,6 +2,8 @@
 import { defineProps, ref, computed, inject, watch } from "vue";
 import { twMerge } from "tailwind-merge";
 import { data } from "autoprefixer";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
 /* -------------------------------------------------------------
 > 6 頁 => 會有 input 跳頁，且前三後三顯示
 ---------------------------------------------------------------- */
@@ -117,7 +119,7 @@ const pageInput = computed(() => {
       v-if="totalPage < 6"
       class="absolute -bottom-8 -translate-x-1/2 text-base text-center"
     >
-      共 {{ dataSource.length }} 筆</span
+      {{ dataSource.length }} {{ $t("table.in_otal") }}</span
     >
     <label
       v-if="totalPage > 6"
@@ -127,7 +129,7 @@ const pageInput = computed(() => {
         type="text"
         maxlength="6"
         class="bg-transparent h-full w-20 font-extrabold italic text-lg"
-        placeholder="跳至"
+        :placeholder="t('table.skip_to')"
         :value="pageInput"
         @change="
           (e) => {
@@ -143,7 +145,7 @@ const pageInput = computed(() => {
       <span
         class="w-full text-center absolute -bottom-8 left-1/2 -translate-x-1/2 text-base"
       >
-        共 {{ totalItems || dataSource.length }} 筆</span
+       {{ totalItems || dataSource.length }} {{ $t("table.in_otal") }}</span
       >
     </label>
     <ul

src/components/customUI/Table.vue

@@ -4,6 +4,8 @@ import { computed, defineProps, provide, ref, watch } from "vue";
 import Pagination from "@/components/customUI/Pagination.vue";
 import Checkbox from "@/components/customUI/Checkbox.vue";
 import dayjs from "dayjs";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
 /*
 column={
 	title,key,class, width, filter:Boolean, sort:Boolean
@@ -246,14 +248,14 @@ watch(
                           <input
                             type="reset"
                             class="btn btn-sm text-white btn-error"
-                            value="重置"
+                            :value="t('button.reset')"
                             @click="() => onFilter(column.key, true)"
                           />
                           <button
                             class="btn btn-sm btn-success"
                             @click.stop.prevent="() => onFilter(column.key)"
                           >
-                            確定
+                            {{ $t("button.submit") }}
                           </button>
                         </div>
                       </div>
@@ -270,7 +272,7 @@ watch(
               </td>
             </tr>
             <tr v-else-if="currentDataSource.length == 0">
-              <td :colspan="columns.length">表中數據為空</td>
+              <td :colspan="columns.length">{{ $t("table.no_data") }}</td>
             </tr>
             <template v-else :sort="sortRule">
               <tr

src/components/customUI/Upload.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { ref, defineProps, watch, onMounted } from "vue";
 import { twMerge } from "tailwind-merge";
-
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
 const props = defineProps({
   name: String,
   fileList: Array,
@@ -262,8 +263,8 @@ const revokeURL = (src) => {
           <div>
             <font-awesome-icon size="2x" :icon="['fas', 'cloud-upload-alt']" />
           </div>
-          <p class="text-2xl my-2">選擇一個文件或拖放到這裡</p>
+          <p class="text-2xl my-2">{{ $t("upload.title") }}</p>
-          <p class="mb-0 col-grey">檔案不超過 10MB</p>
+          <p class="mb-0 col-grey">{{ $t("upload.description") }}</p>
         </div>
       </div>
 

src/components/navbar/Navbar.vue

@@ -6,8 +6,10 @@ import Logo from "@/assets/img/logo.svg";
 import useGetCookie from "@/hooks/useGetCookie";
 import AlarmDrawer from "@/components/alarm/AlarmDrawer.vue";
 import NavbarLang from "./NavbarLang.vue";
+import { twMerge } from "tailwind-merge";
 
 const user = ref("");
+const menuShow = ref(true);
 
 onMounted(() => {
   const name = useGetCookie("niagara_userid");
@@ -16,43 +18,51 @@ onMounted(() => {
   }
 });
 
+const toggleMenu = () => {
+  menuShow.value = !menuShow.value;
+};
+
 const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
 </script>
 
 <template>
-  <header class="navbar bg-dark text-success w-full relative z-50">
+  <header class="navbar bg-dark text-light-info w-full relative z-50">
     <div class="navbar-start">
-      <div class="dropdown">
+      <div tabindex="0" role="button" class="btn btn-ghost lg:hidden" @click="toggleMenu">
-        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+        <svg
-          <svg
+          xmlns="http://www.w3.org/2000/svg"
-            xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5"
-            class="h-5 w-5"
+          fill="none"
-            fill="none"
+          viewBox="0 0 24 24"
-            viewBox="0 0 24 24"
+          stroke="currentColor"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M4 6h16M4 12h8m-8 6h16"
-            />
-          </svg>
-        </div>
-        <ul
-          class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
         >
-          <NavbarItem />
+          <path
-        </ul>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 6h16M4 12h8m-8 6h16"
+          />
+        </svg>
       </div>
-      <router-link to="/dashboard" class="rounded-lg pl-4 text-2xl font-bold text-white flex items-center">
+
+      <router-link
+        to="/dashboard"
+        class="rounded-lg pl-4 text-2xl font-bold text-white flex items-center"
+      >
         <img :src="src" alt="logo" class="w-8 me-1" />
         CviLux Group
       </router-link>
       <NavbarBuilding />
     </div>
 
-    <div class="navbar-center hidden lg:flex">
+    <div
+      :class="
+        twMerge(
+          'navbar-center flex absolute lg:relative top-full bg-dark',
+          menuShow ? 'block' : 'hidden'
+        )
+      "
+    >
       <NavbarItem />
     </div>
     <div class="navbar-end mr-4">
@@ -73,7 +83,7 @@ const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
               <font-awesome-icon
                 :icon="['fas', 'user-circle']"
                 size="2x"
-                class="text-white menu-icon"
+                class="text-white w-10 m-auto"
               />
               <span class="text-white"> {{ user || "webUser" }}</span>
             </button>
@@ -102,7 +112,7 @@ const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
 }
 /**menu**/
 .menu-box {
-  @apply flex justify-center;
+  @apply flex flex-wrap justify-center ;
   position: relative;
   z-index: 0;
 }
@@ -130,11 +140,6 @@ const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
   z-index: 0;
 }
 
-.menu-icon {
-  width: 40px;
-  margin: auto;
-}
-
 .menu-box .btn-group span {
   color: #fff;
   display: block;

src/components/navbar/NavbarItem.vue

@@ -4,13 +4,14 @@ import { AUTHPAGES } from "@/constant";
 import { getAuth, getAllSysSidebar } from "@/apis/building";
 import useBuildingStore from "@/stores/useBuildingStore";
 import useUserInfoStore from "@/stores/useUserInfoStore";
-
+import { useI18n } from "vue-i18n";
+const { locale } = useI18n();
 const store = useUserInfoStore();
 
 const buildingStore = useBuildingStore();
 
 const iniFroList = async () => {
-  const res = await getAuth();
+  const res = await getAuth(locale.value);
 
   store.updateAuthPage(
     res.data.map((d) =>
@@ -64,6 +65,10 @@ watch(
   }
 );
 
+watch(locale, () => {
+  iniFroList();
+});
+
 onMounted(() => {
   iniFroList();
 });
@@ -78,9 +83,9 @@ onMounted(() => {
         <font-awesome-icon
           :icon="['fas', 'home']"
           size="2x"
-          class="menu-icon"
+          class=" w-10 m-auto"
         />
-        首頁
+        {{ $t("home") }}
       </router-link>
     </li>
     <li
@@ -95,7 +100,7 @@ onMounted(() => {
         <font-awesome-icon
           :icon="['fas', page.icon]"
           size="2x"
-          class="menu-icon"
+          class="w-10 m-auto"
         />
         {{ page.subName }}
       </a>
@@ -108,7 +113,7 @@ onMounted(() => {
         <font-awesome-icon
           :icon="['fas', page.icon]"
           size="2x"
-          class="menu-icon"
+          class=" w-10 m-auto"
         />
         {{ page.subName }}
       </router-link>

src/components/navbar/NavbarLang.vue

@@ -3,12 +3,10 @@ import { useI18n } from "vue-i18n";
 import { ref, onMounted } from "vue";
 
 const { locale } = useI18n(); // 使用 I18n
-const language = ref(locale.value)
 // 切換語言
 const toggleLanguage = (lang) => {
   locale.value = lang;
   localStorage.setItem("CviLanguage", lang);
-  language.value = lang;
 };
 </script>
 
@@ -20,7 +18,7 @@ const toggleLanguage = (lang) => {
       class="flex flex-col justify-center items-center btn-group"
     >
       <span
-        :class="`fi fi-${language} fis text-3xl rounded-full border-1 border-white`"
+        :class="`fi fi-${locale} fis text-3xl rounded-full border-1 border-white`"
       ></span>
       <span class="text-white">{{ $t("language") }}</span>
     </button>

src/config/cn.json

@@ -1,9 +1,28 @@
 {
   "language": "简体中文",
+  "home": "首页",
   "sign_out": "登出",
   "log_in": "登入",
   "account": "帐号",
   "password": "密码",
+  "table": {
+    "no_data": "表中数据为空",
+    "in_otal": "笔资料",
+    "skip_to": "跳至"
+  },
+  "upload": {
+    "title": "选择一个文件或拖放到这里",
+    "description": "档案不超过 10MB"
+  },
+  "dashboard": {
+    "yesterday_today": "昨天/今天",
+    "elec_consumption_comparison": "用电量比较",
+    "today_electricity_consumption": "今日用电量",
+    "yesterday_electricity_consumption": "昨天用电量",
+    "this_last_week": "本周/上周",
+    "thisweek_electricity_consumption": "本周用电量",
+    "lastweek_electricity_consumption": "上周用电量"
+  },
   "history": {
     "title": "历史资料",
     "building_name": "厂区",
@@ -21,6 +40,23 @@
     "end_date": "结束日期",
     "end_time": "结束时间"
   },
+  "energy": {
+    "elec_consumption": "用电即时分布",
+    "total_elec": "总用电",
+    "green_elec": "绿电",
+    "immediate_demand": "即时需量",
+    "average_demand": "平均需量",
+    "elec_bills": "今年电费累计(元)",
+    "interval_elec_charges": "区间电费(元)",
+    "year_carbon_emission": "今年碳排当量累计(公斤)",
+    "interval_carbon_emission": "区间碳排当量",
+    "year_elec_consumption": "今年用电度数(kWh)",
+    "interval_elec_consumption": "区间用电度数(kWh)",
+    "monthly_elec_consumption": "每月用电分析",
+    "monthly_carbon_emission_and_reduction": "每月碳排当量 (kgCO2e) 与减量目标",
+    "monthly_bill_power": "每月计费度数 (kWh)",
+    "interval_bill_degree": "区间计费度数"
+  },
   "alarm": {
     "title": "显示警告",
     "notify": "异常通知",

src/config/tw.json

@@ -1,9 +1,28 @@
 {
   "language": "繁體中文",
+  "home": "首頁",
   "sign_out": "登出",
   "log_in": "登入",
   "account": "帳號",
   "password": "密碼",
+  "table": {
+    "no_data": "表中數據為空",
+    "in_otal": "筆資料",
+    "skip_to": "跳至"
+  },
+  "upload": {
+    "title": "選擇一個文件或拖放到這裡",
+    "description": "檔案不超過 10MB"
+  },
+  "dashboard": {
+    "yesterday_today": "昨天/今天",
+    "elec_consumption_comparison":"用電量比較",
+    "today_electricity_consumption":"今日用電量",
+    "yesterday_electricity_consumption":"昨天用電量",
+    "this_last_week":"本週/上週",
+    "thisweek_electricity_consumption":"本周用電量",
+    "lastweek_electricity_consumption":"上週用電量"
+  },
   "history": {
     "title": "歷史資料",
     "building_name": "廠區",
@@ -21,6 +40,23 @@
     "end_date": "結束日期",
     "end_time": "結束時間"
   },
+  "energy": {
+    "elec_consumption": "用電即時分佈",
+    "total_elec": "總用電",
+    "green_elec": "綠電",
+    "immediate_demand": "即時需量",
+    "average_demand": "平均需量",
+    "elec_bills": "今年電費累計(元)",
+    "interval_elec_charges": "區間電費(元)",
+    "year_carbon_emission": "今年碳排當量累計(公斤)",
+    "interval_carbon_emission": "區間碳排當量",
+    "year_elec_consumption": "今年用電度數(kWh)",
+    "interval_elec_consumption": "區間用電度數(kWh)",
+    "monthly_elec_consumption": "每月用電分析",
+    "monthly_carbon_emission_and_reduction": "每月碳排當量 (kgCO2e) 與減量目標",
+    "monthly_bill_power": "每月計費度數 (kWh)",
+    "interval_bill_degree": "區間計費度數"
+  },
   "alarm": {
     "title": "顯示警告",
     "notify": "異常通知",

src/config/us.json

@@ -1,9 +1,19 @@
 {
   "language": "English",
+  "home": "Home",
   "sign_out": "Sign out",
   "log_in": "Log in",
   "account": "Account",
   "password": "Password",
+  "table": {
+    "no_data": "No data",
+    "in_otal": "items in total",
+    "skip_to": "Skip to"
+  },
+  "upload": {
+    "title": "Select a file or drag and drop here",
+    "description": "File size cannot exceed 10MB"
+  },
   "history": {
     "title": "Historical Data",
     "building_name": "Building",
@@ -21,6 +31,32 @@
     "end_date": "End date",
     "end_time": "End time"
   },
+  "dashboard": {
+    "yesterday_today": "Yesterday / Today's",
+    "elec_consumption_comparison": "Electricity Consumption Comparison",
+    "today_electricity_consumption": "Today’s electricity consumption",
+    "yesterday_electricity_consumption": "Yesterday’s electricity consumption",
+    "this_last_week": "This Week's / Last Week's",
+    "thisweek_electricity_consumption": "This week’s electricity consumption",
+    "lastweek_electricity_consumption": "Last week’s electricity consumption"
+  },
+  "energy": {
+    "elec_consumption": "Real-time distribution of electricity consumption",
+    "total_elec": "Total electricity consumption",
+    "green_elec": "Green electricity",
+    "immediate_demand": "immediate demand",
+    "average_demand": "average demand",
+    "elec_bills": "Total electricity bills this year (yuan)",
+    "interval_elec_charges": "Interval electricity charges (yuan)",
+    "year_carbon_emission": "Cumulative carbon emission equivalent this year (kg)",
+    "interval_carbon_emission": "Interval carbon emission equivalent",
+    "year_elec_consumption": "This year's electricity consumption (kWh)",
+    "interval_elec_consumption": "Interval electricity consumption (kWh)",
+    "monthly_elec_consumption": "Monthly electricity consumption analysis",
+    "monthly_carbon_emission_and_reduction": "Monthly carbon emission equivalent (kgCO2e) and reduction target",
+    "monthly_bill_power": "Monthly billing power (kWh)",
+    "interval_bill_degree": "Interval billing degree"
+  },
   "alarm": {
     "title": "Warning",
     "notify": "Notification",

src/fontawsomeIconRegister.js

@@ -40,6 +40,20 @@ import {
   faFilePowerpoint,
   faFileAlt,
   faDatabase,
+  faBuilding,
+  faVideo,
+  faFan,
+  faTemperatureHigh,
+  faLightbulb,
+  faBolt,
+  faChargingStation,
+  faTint,
+  faWater,
+  faCarBattery,
+  faFireExtinguisher,
+  faDoorOpen,
+  faCar,
+  faWind
 } from "@fortawesome/free-solid-svg-icons";
 
 /* add icons to the library */
@@ -81,6 +95,20 @@ library.add(
   faFilePowerpoint,
   faFileAlt,
   faDatabase,
+  faBuilding,
+  faVideo,
+  faFan,
+  faTemperatureHigh,
+  faLightbulb,
+  faBolt,
+  faChargingStation,
+  faTint,
+  faWater,
+  faCarBattery,
+  faFireExtinguisher,
+  faDoorOpen,
+  faCar,
+  faWind
 );
 
 export default library;

src/views/AssetManagement/components/AssetTableModalRightInfo.vue

@@ -167,14 +167,14 @@ const onCancel = () => {
         :options="floors"
         :isBottomLabelExist="false"
       >
-        <template #topLeft>{{ t("assetManagement.floor") }}</template>
+        <template #topLeft>{{ $t("assetManagement.floor") }}</template>
       </Select>
       <button
         type="button"
         class="btn btn-success mt-10 ml-5"
         @click="openModal"
       >
-        {{ t("assetManagement.add_floor") }}
+        {{ $t("assetManagement.add_floor") }}
       </button>
     </div>
     <!-- <button type="button" class="btn btn-success mt-10">確認座標</button> -->
@@ -195,7 +195,7 @@ const onCancel = () => {
       v-if="!currentFloor?.floor_map_url"
       class="absolute top-0 left-0 flex justify-center items-center min-h-[500px] w-full border border-stone-900 shadow-lg bg-sub-success bg-opacity-25 rounded-md"
     >
-      <p class="text-2xl">{{ t("assetManagement.add_floor_text") }}</p>
+      <p class="text-2xl">{{ $t("assetManagement.add_floor_text") }}</p>
     </div>
   </div>
   <Modal

src/views/alert/components/AlertSetting/AlertSetting.vue

@@ -2,15 +2,22 @@
 import AlertSubList from "./AlertSubList.vue";
 import AlertOutliersTable from "./AlertOutliersTable.vue";
 import AlertNotifyTable from "./AlertNotifyTable.vue";
-import { ref, provide, onMounted } from "vue";
+import { ref, provide, onMounted, watch } from "vue";
 import { getNoticeList } from "@/apis/alert";
+import { useI18n } from "vue-i18n";
+const { locale } = useI18n();
+
 const noticeList = ref([]);
 
 const NoticeListData = async () => {
-  const res = await getNoticeList();
+  const res = await getNoticeList(locale.value);
   noticeList.value = res.data;
 };
 
+watch(locale, () => {
+  NoticeListData();
+});
+
 onMounted(() => {
   NoticeListData();
 });

src/views/dashboard/components/DashboardElecChart.vue

@@ -7,14 +7,14 @@ const yesterdayTodayData = {
   data: {
     categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
     values: [
-      {
-        name: "Yesterday's electricity consumption",
-        value: [10, 10, 10, 10, 10, 20, 30, 80, 90, 70],
-      },
       {
         name: "Today's electricity consumption",
         value: [8, 8, 8, 8, 8, 15, 25, 65, 75, 60],
       },
+      {
+        name: "Yesterday's electricity consumption",
+        value: [10, 10, 10, 10, 10, 20, 30, 80, 90, 70],
+      },
     ],
   },
 };
@@ -24,14 +24,15 @@ const weekComparisonData = {
   data: {
     categories: ["週五", "週六", "週日", "週一", "週二", "週三", "週四"],
     values: [
+    {
+        name: "This week's electricity consumption",
+        value: [850, 200, 350, 850, 950, 950, 900],
+      },
       {
         name: "Last week's electricity consumption",
         value: [800, 150, 300, 750, 900, 900, 800],
       },
-      {
+
-        name: "This week's electricity consumption",
-        value: [850, 200, 350, 850, 950, 950, 900],
-      },
     ],
   },
 };
@@ -67,7 +68,7 @@ const generateChartOption = (categories, values) => ({
       type: "bar",
       barWidth: "35%",
       itemStyle: {
-        color: "#FFD700", // 黃色
+        color: "#00BFFF", // 藍色
       },
     },
     {
@@ -76,7 +77,7 @@ const generateChartOption = (categories, values) => ({
       type: "bar",
       barWidth: "35%",
       itemStyle: {
-        color: "#00BFFF", // 藍色
+        color: "#FFD700", // 黃色
       },
     },
   ],
@@ -115,16 +116,18 @@ const weekComparisonOption = generateChartOption(
     <div class="lg:w-1/2 w-full chart-data relative px-8 py-3">
       <div class="flex flex-wrap items-center">
         <h2 class="text-xs font-light w-1/2 relative">
-          Yesterday / Today's<br />Electricity Consumption Comparison (kWH)
+          {{ $t("dashboard.yesterday_today") }}<br />
+          {{ $t("dashboard.elec_consumption_comparison") }}
+          (kWH)
         </h2>
         <div class="w-[48%]">
           <a href="#" class="text-con">
             <img src="@ASSET/img/chart-title01.svg" />
-            <span>Today’s electricity consumption</span>
+            <span>{{ $t("dashboard.today_electricity_consumption") }}</span>
           </a>
           <a href="#" class="text-con">
             <img src="@ASSET/img/chart-title02.svg" />
-            <span>Yesterday’s electricity consumption</span>
+            <span>{{ $t("dashboard.yesterday_electricity_consumption") }}</span>
           </a>
         </div>
       </div>
@@ -141,16 +144,18 @@ const weekComparisonOption = generateChartOption(
     <div class="lg:w-1/2 w-full chart-data relative px-8 py-3">
       <div class="flex flex-wrap items-center">
         <h2 class="text-xs font-light w-1/2 relative">
-          This Week's / Last Week's <br />Electricity Consumption Comparison (kWH)
+          {{ $t("dashboard.this_last_week") }}<br />
+          {{ $t("dashboard.elec_consumption_comparison") }}
+          (kWH)
         </h2>
         <div class="w-[48%]">
           <a href="#" class="text-con">
             <img src="@ASSET/img/chart-title01.svg" />
-            <span>This week’s electricity consumption</span>
+            <span>{{ $t("dashboard.thisweek_electricity_consumption") }}</span>
           </a>
           <a href="#" class="text-con">
             <img src="@ASSET/img/chart-title02.svg" />
-            <span>Last week’s electricity consumption</span>
+            <span>{{ $t("dashboard.lastweek_electricity_consumption") }}</span>
           </a>
         </div>
       </div>

src/views/dashboard/components/DashboardSysCard.vue

@@ -3,34 +3,22 @@ import { ref } from "vue";
 
 // 假資料
 const mockData = ref([
-  { title: "Elevator system", icon: "EL", isError: false },
+  { title: "Elevator system", icon: "building", isError: false },
-  { title: "CCTV system", icon: "C", isError: true },
+  { title: "Air Conditioning System", icon: "fan", isError: false },
-  { title: "Emergency rescue system", icon: "P", isError: true },
+  { title: "Environmental sensing equipment", icon: "temperature-high", isError: false },
-  { title: "Air Conditioning System", icon: "M10", isError: false },
+  { title: "Lighting system", icon: "lightbulb", isError: false },
-  { title: "Lighting system", icon: "L1", isError: false },
+  { title: "Meter system", icon: "bolt", isError: false },
-  { title: "Fire Equipment", icon: "F1", isError: false },
+  { title: "High voltage switchboard", icon: "charging-station", isError: false },
-  { title: "Water supply system", icon: "W2", isError: false },
+  { title: "Low voltage switchboard", icon: "charging-station", isError: false },
-  {
+  { title: "Water supply system", icon: "tint", isError: false },
-    title: "Sewage and wastewater equipment",
+  { title: "Sewage and wastewater equipment", icon: "water", isError: false },
-    icon: "P1",
+  { title: "Emergency generator", icon: "car-battery", isError: false },
-    isError: false,
+  { title: "Fire Equipment", icon: "fire-extinguisher", isError: false },
-  },
+  { title: "CCTV system", icon: "video", isError: true },
-  { title: "High voltage switchboard", icon: "E1", isError: false },
+  { title: "Access control system", icon: "door-open", isError: false },
-  { title: "Low voltage switchboard", icon: "E2", isError: false },
+  { title: "Shutdown system", icon: "car", isError: false },
-  { title: "Meter system", icon: "E4-1", isError: false },
+  { title: "Emergency rescue system", icon: "exclamation-triangle", isError: true },
-  { title: "Emergency generator", icon: "E3", isError: false },
+  { title: "Air supply and exhaust system", icon: "wind", isError: false },
-  { title: "Shutdown system", icon: "PSC", isError: false },
-  { title: "Access control system", icon: "R", isError: false },
-  {
-    title: "Environmental sensing equipment",
-    icon: "M12",
-    isError: false,
-  },
-  {
-    title: "Air supply and exhaust system",
-    icon: "M5-2",
-    isError: false,
-  },
 ]);
 </script>
 
@@ -48,15 +36,11 @@ const mockData = ref([
       <img v-else src="@ASSET/img/equipment-item-background04.svg" />
 
       <div class="equipment-item">
-        <div class="w-20">
+        <div class="w-16">
-          <img
+          <FontAwesomeIcon  class="text-2xl mt-1 m-auto" :icon="['fas', item.icon]"></FontAwesomeIcon>
-            class="w-14 p-2 m-auto"
-            :src="`./icon/${item.icon}.png`"
-            alt="icon"
-          />
         </div>
         <div class="icon-text">
-          <div class="text-slate-300 text-xs">{{ item.title }}</div>
+          <div class="text-slate-300 text-sm">{{ item.title }}</div>
         </div>
       </div>
     </div>
@@ -68,7 +52,7 @@ const mockData = ref([
   @apply flex items-center absolute top-1/2 w-[90%] left-0 right-0 m-auto text-center -translate-y-1/2;
 }
 .icon-text {
-  @apply text-start font-light p-1 relative z-20;
+  @apply w-52 text-start p-3 relative z-20;
 }
 .icon-text:before {
   @apply absolute -left-3 top-0 bottom-0 m-auto h-10 w-5 z-10;

src/views/energyManagement/components/BillingDegreeChart.vue

@@ -96,7 +96,9 @@ onMounted(() => {
 
 <template>
   <div class="bg-slate-800 p-3">
-    <div class="text-white mb-3 text-base">每月計費度數 (kWh)</div>
+    <div class="text-white mb-3 text-base">
+      {{ $t("energy.monthly_bill_power") }}
+    </div>
     <div class="bar-box">
       <BarChart
         id="billing_degree_chart"

src/views/energyManagement/components/CarbonEmissionChart.vue

@@ -85,7 +85,7 @@ onMounted(() => {
 <template>
   <div class="bg-slate-800 p-3">
     <div class="text-white mb-3 text-base">
-      每月碳排當量 (kgCO2e) 與減量目標
+      {{ $t("energy.monthly_carbon_emission_and_reduction") }}
     </div>
     <div class="bar-box">
       <BarChart

src/views/energyManagement/components/ElecConsumption.vue

@@ -36,7 +36,6 @@ const chartOption = {
       label: {
         position: "right",
         fontSize: 12,
-        borderWidth: 0,
       },
       itemStyle: {
         borderWidth: 0,
@@ -60,18 +59,20 @@ onMounted(() => {
 
 <template>
   <div class="p-3">
-    <h2 class="text text-lg text-white mb-5 relative">用電即時分佈</h2>
+    <h2 class="text text-lg text-white mb-5 relative">
+      {{ $t("energy.elec_consumption") }}
+    </h2>
     <div class="chart-container">
       <div ref="chartDiv" class="w-full min-h-[190px] h-full"></div>
     </div>
     <div class="text-sm mt-3.5">
       <ul class="flex flex-wrap items-center text-white">
         <li class="pr-5 relative z-20">
-          <span class="pr-3.5">總用電 (kWh)</span>
+          <span class="pr-3.5"> {{ $t("energy.total_elec") }} (kWh)</span>
           <span class="pr-3.5">160.05</span>
         </li>
         <li class="pr-5 relative z-20">
-          <span class="pr-3.5">綠電 (kWh)</span>
+          <span class="pr-3.5">{{ $t("energy.green_elec") }} (kWh)</span>
           <span class="pr-3.5">39.50</span>
         </li>
       </ul>

src/views/energyManagement/components/ImmediateDemandChart.vue

@@ -116,11 +116,11 @@ onMounted(() => {
   <div class="p-3">
     <div class="flex 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>
       </div>
     </div>

src/views/energyManagement/components/IntervalBillChart.vue

@@ -95,7 +95,7 @@ onMounted(() => {
 <template>
   <div class="bg-slate-700 p-3">
     <div class="text-white mb-3 text-base">
-      區間計費度數 2024 / 11 / 01 ~ 2024 / 11 / 15
+      {{ $t("energy.interval_bill_degree") }} 2024 / 11 / 01 ~ 2024 / 11 / 15
     </div>
     <div class="bar-box">
       <BarChart

src/views/energyManagement/components/MonthlyElecBillChart.vue

@@ -99,7 +99,7 @@ onMounted(() => {
 
 <template>
   <div class="bg-slate-800 p-3">
-    <div class="text-white mb-3 text-base">每月用電分析</div>
+    <div class="text-white mb-3 text-base">{{$t("energy.monthly_elec_consumption")}}</div>
     <div class="bar-box">
       <BarChart
         id="electricity_bill_chart"

src/views/energyManagement/components/UsageInformation.vue

@@ -1,23 +1,33 @@
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { twMerge } from "tailwind-merge";
+import { useI18n } from "vue-i18n";
+const { t, locale } = useI18n();
 
-// 假資料
+const updateDataItems = () => {
-const dataItems = ref([
+  return [
-  { title: "今年電費累計(元)", data: "3,255,458" },
+    { title: t("energy.elec_bills"), data: "3,255,458" },
-  { title: "區間電費(元)", data: "205,110" },
+    { title: t("energy.interval_elec_charges"), data: "205,110" },
-  { title: "今年碳排當量累計(公斤)", data: "455,128" },
+    { title: t("energy.year_carbon_emission"), data: "455,128" },
-  { title: "區間碳排當量", time: "2023-11-01~2023-11-19", data: "25,351" },
+    {
-  { title: "今年用電度數(kWh)", data: "864,830" },
+      title: t("energy.interval_carbon_emission"),
-  { title: "區間用電度數(kWh)", time: "2023-11-01~2023-11-19", data: "50,355" },
+      time: "2023-11-01~2023-11-19",
-]);
+      data: "25,351",
-
+    },
-// 背景顏色處理
+    { title: t("energy.year_elec_consumption"), data: "864,830" },
-const getItemBackground = (index) => {
+    {
-  return index === 0 || index === 3 || index === 4
+      title: t("energy.interval_elec_consumption"),
-    ? "bg-slate-600"
+      time: "2023-11-01~2023-11-19",
-    : "bg-slate-800";
+      data: "50,355",
+    },
+  ];
 };
+
+const dataItems = ref(updateDataItems());
+
+watch(locale, () => {
+  dataItems.value = updateDataItems();
+});
 </script>
 
 <template>
@@ -27,7 +37,7 @@ const getItemBackground = (index) => {
       :key="index"
       :class="
         twMerge(
-          'item w-1/2 py-0 px-5 h-[85px] text-white flex justify-center flex-col',
+          'item w-1/2 py-0 px-3 h-[85px] text-white flex justify-center flex-col',
           index == 0 || index == 3 || index == 4
             ? 'bg-slate-800'
             : 'bg-slate-700'

vite.config.js

@@ -16,7 +16,7 @@ export default defineConfig({
   server: {
     proxy: {
       '/upload': {
-        target: "http://192.168.0.206:8088/upload",
+        target: "https://ibms-cvilux.production.mjmtech.com.tw",
         changeOrigin: true,
         secure: false,
       },