UI修改

src/components/dashboard/dashboardAlert.vue

@@ -9,23 +9,27 @@ const alarmDataStore = useAlarmDataStore();
 
 <template>
   <a-card class="card">
-    <h5>Alarm</h5>
+    <h5>異常告警</h5>
     <table className="table w-full">
       <thead>
         <tr>
-          <th>Name</th>
+          <th>異常類別</th>
-          <th>In Alarm Count</th>
+          <th>發報中</th>
-          <th>Unacked Count</th>
+          <th>未確認</th>
           <th></th>
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(item, index) in alarmDataStore.alarmData" :key="index">
+        <tr
+          v-for="(item, index) in alarmDataStore.alarmData"
+          :key="index"
+          :class="item.alarmCount > 0 ? 'animate-pulse' : ''"
+        >
           <td>
             <font-awesome-icon
               v-if="item.alarmCount > 0"
               :icon="['fas', 'exclamation-circle']"
-              class="text-rose-600 text-lg animate-pulse -ms-5"
+              class="text-rose-600 text-base -ms-5"
             />
             {{ item.name }}
           </td>
@@ -35,10 +39,11 @@ const alarmDataStore = useAlarmDataStore();
             <router-link
               :to="{
                 name: 'baja',
-                query: { ord: encodeURIComponent(item.Ord) },
+                query: { pagename: 'alert',
+                ord: encodeURIComponent(item.Ord) },
               }"
               class="flex items-center justify-between gap-8"
-              >view</router-link
+              >查看</router-link
             >
           </td>
         </tr>
@@ -53,21 +58,21 @@ const alarmDataStore = useAlarmDataStore();
 h5 {
   margin: 0;
   font-weight: 700;
-  font-size: 18px;
+  font-size: 33px;
   color: #141414;
 }
 
 .table th {
   text-align: left;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  font-size: 15px;
+  font-size: 1.125rem;
   font-weight: 600;
   padding: 8px 0;
   color: #8c8c8c;
 }
 .table td {
-  font-size: 15px;
+  font-size: 1.125rem;
-  padding: 16px 0px;
+  padding: 8px 0px;
   white-space: nowrap;
 }
 </style>

src/components/dashboard/dashboardElecChart.vue

@@ -14,8 +14,8 @@ const props = defineProps({
 
 const yesterdayTodayChart = ref(null);
 const weekComparisonChart = ref(null);
-let yesterdayTodayEChart = null; 
+let yesterdayTodayEChart = null;
-let weekComparisonEChart = null; 
+let weekComparisonEChart = null;
 
 watch(
   () => props.yesterdayTodayData,
@@ -70,7 +70,21 @@ onUnmounted(() => {
 
 // 生成圓柱圖表的 option
 const generateCylinderChartOption = (data) => {
-  const barWidth = 15;
+  const dataCount = data.categories.length; // 數據筆數
+  let barWidth = 15; // 寬度
+  let symbolOffset = 0; // 偏移量
+
+  if (dataCount <= 7) {
+    barWidth = 15;
+    symbolOffset = 9;
+  } else if (dataCount <= 10) {
+    barWidth = 10;
+    symbolOffset = 6;
+  } else {
+    barWidth = 8;
+    symbolOffset = 5;
+  }
+
   const color1 = {
     // 今天用電量顏色
     type: "linear",
@@ -157,7 +171,7 @@ const generateCylinderChartOption = (data) => {
         name: null,
         type: "pictorialBar",
         symbolSize: [barWidth, 5],
-        symbolOffset: [-9, -4], // 置中
+        symbolOffset: [-symbolOffset, -4], // 置中
         symbolPosition: "end",
         data: data.values[0].value,
         z: 12,
@@ -172,7 +186,7 @@ const generateCylinderChartOption = (data) => {
         name: null,
         type: "pictorialBar",
         symbolSize: [barWidth, 5],
-        symbolOffset: [9, -4], // 置中
+        symbolOffset: [symbolOffset, -4], // 置中
         symbolPosition: "end",
         data: data.values[1].value,
         itemStyle: {
@@ -188,7 +202,7 @@ const generateCylinderChartOption = (data) => {
         name: null,
         type: "pictorialBar",
         symbolSize: [barWidth, 5],
-        symbolOffset: [-9, 4], // 置中
+        symbolOffset: [-symbolOffset, 4], // 置中
         symbolPosition: "start",
         data: data.values[0].value,
         z: 12,
@@ -200,7 +214,7 @@ const generateCylinderChartOption = (data) => {
         name: null,
         type: "pictorialBar",
         symbolSize: [barWidth, 5],
-        symbolOffset: [9, 4], // 置中
+        symbolOffset: [symbolOffset, 4], // 置中
         symbolPosition: "start",
         data: data.values[1].value,
         itemStyle: {

src/components/dashboard/dashboardTag.vue

@@ -46,7 +46,9 @@ const handleClick = (ord) => {
   if (ord) {
     router.push({
       name: "baja",
-      query: { ord: encodeURIComponent(ord) },
+      query: { 
+        pagename: 'system',
+        ord: encodeURIComponent(ord) },
     });
   }
 };
@@ -54,8 +56,8 @@ const handleClick = (ord) => {
 
 <template>
   <a-card class="card h-full mb-4">
-    <div class="flex items-cemter justify-between mb-4">
+    <div class="flex items-center justify-between mb-4">
-      <h5>System</h5>
+      <h5>系統監控</h5>
       <NavBuild />
     </div>
     <div v-if="flattenedItems.length > 0">
@@ -93,7 +95,7 @@ const handleClick = (ord) => {
 h5 {
   margin: 0;
   font-weight: 700;
-  font-size: 18px;
+  font-size: 33px;
   color: #141414;
 }
 </style>

src/components/navbar/LeftSidebar.vue

@@ -18,7 +18,12 @@ const preOpenKeys = ref([]); // 用於儲存之前展開的 submenu
 
 const filteredItems = computed(() => {
   if (navStore.menuList && navStore.menuList.length > 0) {
-    return navStore.menuList[0].children;
+    if(navStore.menuList[0].children.length > 1){
+      return navStore.menuList[0].children;
+    }else{
+      return navStore.menuList[0].children[0].children;
+    }
+    
   }
   return [];
 });
@@ -27,7 +32,8 @@ const handleClick = (ord) => {
   if (ord) {
     router.push({
       name: "baja",
-      query: { ord: encodeURIComponent(ord) },
+      query: { pagename: 'system',
+      ord: encodeURIComponent(ord) },
     });
   }
 };

src/components/navbar/NavAlarm.vue

@@ -44,7 +44,7 @@ onBeforeUnmount(() => {
           <router-link
             :to="{
               name: 'baja',
-              query: { ord: encodeURIComponent(child.Ord) },
+              query: { pagename: 'alarm', ord: encodeURIComponent(child.Ord) },
             }"
             class="flex items-center justify-between gap-8"
           >
@@ -54,7 +54,7 @@ onBeforeUnmount(() => {
         </a-menu-item>
       </a-menu>
     </template>
-    <a-badge :count="totalAlarmCount" :overflow-count="999">
+    <a-badge :count="totalAlarmCount" :overflow-count="999" class="!mt-3">
       <a class="flex flex-col items-center">
         <font-awesome-icon :icon="['fas', 'bell']" size="2x" />
         <span class="text-sm">告警</span>

src/components/navbar/NavBuild.vue

@@ -26,7 +26,7 @@ watch(
 
 <template>
   <a-select
-    v-if="buildmenu && buildmenu.length > 0"
+    v-if="buildmenu && buildmenu.length > 1"
     :default-value="buildmenu[0] ? buildmenu[0].label : null"
     @change="handleBuildClick"
     placeholder="請選擇建築"

src/components/navbar/NavWeather.vue

@@ -108,19 +108,24 @@ const updateTime = () => {
   if (window.require && window.requirejs) {
     window.requirejs(["baja!"], (baja) => {
       const bAbsTime = baja.AbsTime.make({ jsDate: date });
-      bAbsTime.toDateTimeString().then((dateTimeStr) => {
+      bAbsTime
-        dateTime.value = dateTimeStr;
+        .toDateTimeString()
-      });
+        .then((dateTimeStr) => {
+          dateTime.value = dateTimeStr;
+        })
+        .catch((error) => {
+          console.error("轉換時間字串失敗:", error);
+        });
     });
   }
 };
 
 onMounted(() => {
-  setTimeout(() => {
-    initializeData(); // 初始化資料
-  }, 500);
   updateTime(); // 更新時間
   intervalId = setInterval(updateTime, 1000);
+    setTimeout(() => {
+    initializeData();
+  }, 1000);
 });
 
 onUnmounted(() => {

src/components/navbar/Navbar.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { computed, defineProps } from "vue";
+import { computed, defineProps, ref, watch } from "vue";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import NavBuild from "./NavBuild.vue";
 import NavWeather from "./NavWeather.vue";
 import NavAlarm from "./NavAlarm.vue";
@@ -8,6 +8,7 @@ import useNiagaraDataStore from "@/stores/useNiagaraDataStore";
 import useNavDataStore from "@/stores/useNavDataStore";
 
 const router = useRouter();
+const route = useRoute();
 const niagaraStore = useNiagaraDataStore();
 const navStore = useNavDataStore();
 
@@ -16,8 +17,14 @@ const props = defineProps({
   userName: String,
 });
 
+const activePageName = ref("home");
+
+const openSystemMonitor = () => {
+  props.open();
+};
+
 function correctImageUrl(imageUrl) {
-  if (!imageUrl) return ''; // 處理空值的情況
+  if (!imageUrl) return ""; // 處理空值的情況
 
   const stringUrlNiagara = "file:^";
   const stringUrlNiagara2 = "station:|file:^";
@@ -62,53 +69,64 @@ const dynamicMenu = computed(() =>
 );
 const userList = computed(() => niagaraStore.userList?.children || []);
 
+watch(
+  () => route.query.pagename,
+  (newPagename) => {
+      activePageName.value = newPagename || "home" ; //  更新
+  },
+  {
+    immediate: true,
+  }
+);
 </script>
 
 <template>
   <a-layout-header class="header">
     <div class="flex items-center">
       <img v-if="logoUrl" :src="logoUrl" alt="Logo" class="logo" />
-      <a href="./index.html" class="text-2xl font-bold mx-4">{{
+      <a href="./index.html" class="text-[33px] font-bold mx-4">{{
         systemName
       }}</a>
       <!-- <NavBuild /> -->
     </div>
     <ul class="nav-menu flex gap-10">
-      <li>
+      <li :class="{ 'link-active': activePageName === 'home' }">
         <router-link
           :to="
             homeData.ord !== 'null'
               ? {
                   name: 'baja',
-                  query: { ord: encodeURIComponent(homeData.ord) },
+                  query: {
+                    pagename: 'home',
+                    ord: encodeURIComponent(homeData.ord),
+                  },
                 }
               : '/'
           "
+          class="nav-link"
         >
-          <img
+          <img :src="homeData.icon" alt="home_icon" class="icon" />
-            :src="homeData.icon"
-            alt="home_icon"
-            class="icon"
-          />
           <span class="text-sm">首頁</span>
         </router-link>
       </li>
 
-      <li>
+      <li :class="{ 'link-active': activePageName === 'system' }">
-        <a
+        <a @click.prevent="openSystemMonitor" class="nav-link">
-        @click="props.open"
+          <img :src="systemData.icon" alt="system_icon" class="icon" />
-        >
-          <img
-            :src="systemData.icon"
-            alt="system_icon"
-            class="icon"
-          />
           <span class="text-sm">系統監控</span>
         </a>
       </li>
-      <li v-for="item in dynamicMenu" :key="item.key">
+      <li
+        v-for="item in dynamicMenu"
+        :key="item.key"
+        :class="{ 'link-active': activePageName === item.ord }"
+      >
         <router-link
-          :to="{ name: 'baja', query: { ord: encodeURIComponent(item.ord) } }"
+          :to="{
+            name: 'baja',
+            query: { pagename: item.ord, ord: encodeURIComponent(item.ord) },
+          }"
+          class="nav-link"
         >
           <img :src="item.icon" alt="menu_icon" class="icon" />
           <span class="text-sm">{{ item.name }}</span>
@@ -130,7 +148,10 @@ const userList = computed(() => niagaraStore.userList?.children || []);
                 <router-link
                   :to="{
                     name: 'baja',
-                    query: { ord: encodeURIComponent(child.ord) },
+                    query: {
+                      pagename: 'user',
+                      ord: encodeURIComponent(child.ord),
+                    },
                   }"
                 >
                   {{ child.name }}
@@ -158,6 +179,13 @@ const userList = computed(() => niagaraStore.userList?.children || []);
   align-items: center;
 }
 
+.nav-menu li.link-active .icon {
+  filter: brightness(1.2);
+}
+.nav-menu li.link-active span {
+  color: #43daff;
+}
+
 .header {
   background-color: #fff;
   width: 100%;

src/style.css

@@ -1 +1,4 @@
 @import "tailwindcss";
+:root {
+  font-family:"Microsoft JhengHei", "Noto Sans CJK TC", STHeiti, sans-serif, serif;
+}

src/views/dashboard/DashboardPage.vue

@@ -32,7 +32,7 @@ const elecStat = ref([
   },
   {
     value: 0,
-    label: "容積占比",
+    label: "契約容量佔比",
     unit: "%",
     icon: "charging-station",
   },

src/views/system/NotFound.vue

@@ -1,13 +1,28 @@
 <script setup>
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import useNiagaraDataStore from "@/stores/useNiagaraDataStore";
+
 const niagaraStore = useNiagaraDataStore();
+const router = useRouter();
+
 const homeData = computed(() => {
   const data = niagaraStore.headerList.children?.[2] || {};
   return {
     ...data,
   };
 });
+
+onMounted(() => {
+  router.push({
+    name: "NotFound",
+    query: {
+      pagename: "notfound",
+      ord: null,
+    },
+  });
+});
+
 </script>
 <template>
   <a-result status="404" title="404" sub-title="抱歉，您造訪的頁面不存在">
@@ -18,7 +33,10 @@ const homeData = computed(() => {
             homeData.ord !== 'null'
               ? {
                   name: 'baja',
-                  query: { ord: encodeURIComponent(homeData.ord) },
+                  query: {
+                    pagename: 'notfound',
+                    ord: encodeURIComponent(homeData.ord),
+                  },
                 }
               : '/'
           "