圓柱體chart | 系統監控的menu新增大類

src/components/navbar/Navbar.vue

@@ -92,10 +92,11 @@ 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">
-                <a
+                <router-link
-                  href="/logout"
+                  to="logout"
+                  type="link"
                   class="flex flex-col justify-center items-center"
-                  >{{ $t("sign_out") }}</a
+                  >{{ $t("sign_out") }}</router-link
                 >
               </li>
             </ul>
@@ -108,7 +109,7 @@ const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
 
 <style lang="css">
 .sub-drawer {
-  @apply bg-dark bg-opacity-80 shadow-xl !important;
+  @apply bg-dark bg-opacity-90 shadow-xl !important;
 }
 /**menu**/
 .menu-box {

src/components/navbar/NavbarItem.vue

@@ -7,9 +7,10 @@ import useUserInfoStore from "@/stores/useUserInfoStore";
 import { useI18n } from "vue-i18n";
 const { locale } = useI18n();
 const store = useUserInfoStore();
-
 const buildingStore = useBuildingStore();
 
+const openKeys = ref([]); // 追蹤當前打開的子菜單
+
 const iniFroList = async () => {
   const res = await getAuth(locale.value);
 
@@ -17,9 +18,9 @@ const iniFroList = async () => {
     res.data.map((d) =>
       AUTHPAGES.find(({ authCode }) => authCode === d.authCode)
         ? {
-          ...d,
+            ...d,
-          ...AUTHPAGES.find(({ authCode }) => authCode === d.authCode),
+            ...AUTHPAGES.find(({ authCode }) => authCode === d.authCode),
-        }
+          }
         : d
     )
   );
@@ -42,20 +43,12 @@ const onClose = () => {
   open.value = false;
 };
 
-const navigateToSub = (sub) => {
+const handleOpenChange = (keys) => {
-  // buildingStore.selectedSystem = sub;
+  if (keys.length > 0) {
-  onClose()
+    openKeys.value = [keys[keys.length - 1]]; // 只保留最後一個打開的子菜單
-  // console.log("navigateToSub", sub);
+  } else {
-  // let pageAct = JSON.parse(sessionStorage.getItem("pageAct"));
+    openKeys.value = [];
-  // pageAct = {
+  }
-  //   ...pageAct,
-  //   sysMainTag: sub.main_system_tag,
-  //   sysSubTag: sub.sub_system_tag,
-  //   sysSubName: sub.full_name,
-  // };
-  // sessionStorage.setItem("lastPage", "systemMonitor");
-  // sessionStorage.setItem("pageAct", JSON.stringify(pageAct));
-  // window.location.href = "/file/index.html";
 };
 
 watch(
@@ -85,7 +78,7 @@ onMounted(() => {
         <font-awesome-icon
           :icon="['fas', 'home']"
           size="2x"
-          class=" w-10 m-auto"
+          class="w-10 m-auto"
         />
         {{ $t("home") }}
       </router-link>
@@ -115,32 +108,69 @@ onMounted(() => {
         <font-awesome-icon
           :icon="['fas', page.icon]"
           size="2x"
-          class=" w-10 m-auto"
+          class="w-10 m-auto"
         />
         {{ page.subName }}
       </router-link>
     </li>
   </ul>
-  <a-drawer :width="200" placement="left" :open="open" :closable="false" @close="onClose" class="sub-drawer"
+  <a-drawer
-    :maskStyle="{ opacity: 0.5 }" :bodyStyle="{ paddingLeft: 0, paddingRight: 0 }">
+    :width="250"
-    <ul>
+    placement="left"
-      <li v-for="sub in buildingStore.subSys" :key="sub.sub_system_tag"
+    :open="open"
-        class="group text-xl text-center py-3 hover:bg-black" @click="() => navigateToSub(sub)">
+    :closable="false"
-
+    @close="onClose"
-
+    class="sub-drawer"
-        <router-link
+    :maskStyle="{ opacity: 0 }"
-          :to="{ name: 'sub_system', params: { main_system_id: sub.main_system_tag, sub_system_id: sub.sub_system_tag }, }"
+    :bodyStyle="{ paddingLeft: 0, paddingRight: 0 }"
-          type="link" class="group-hover:text-info">
+  >
-
+    <a-menu
-          {{ sub.full_name }}
+      mode="inline"
-        </router-link>
+      theme="dark"
-
+      class="text-lg bg-transparent"
-      </li>
+      :openKeys="openKeys"
-    </ul>
+      @openChange="handleOpenChange"
+    >
+      <a-sub-menu
+        v-for="main in buildingStore.mainSubSys"
+        :key="main.main_system_tag"
+        :title="main.full_name"
+      >
+        <a-menu-item
+          v-for="sub in main.history_Sub_systems"
+          :key="sub.sub_system_tag"
+          @click="() => onClose()"
+        >
+          <router-link
+            :to="{
+              name: 'sub_system',
+              params: {
+                main_system_id: main.main_system_tag,
+                sub_system_id: sub.sub_system_tag,
+              },
+            }"
+          >
+            {{ sub.full_name }}
+          </router-link>
+        </a-menu-item>
+      </a-sub-menu>
+    </a-menu>
   </a-drawer>
 </template>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .router-link-active.router-link-exact-active {
   color: #93c0dc;
 }
+
+::v-deep .ant-menu-submenu-title:active {
+  background-color: #35759d !important;
+}
+
+::v-deep .ant-menu-item-selected {
+  background-color: #35759d !important;
+
+  a {
+    color: #fff !important;
+  }
+}
 </style>

src/router/index.js

@@ -94,6 +94,16 @@ const router = createRouter({
       name: "mytestfile",
       component: Test,
     },
+    {
+      path: "/logout",
+      name: "logout",
+      beforeEnter: (to, from, next) => {
+        const auth = useUserInfoStore();
+        document.cookie = "JWT-Authorization="; 
+        auth.user.token = ""; 
+        next({ path: "/login", replace: true });
+      },
+    },
   ],
 });
 
@@ -105,13 +115,6 @@ router.beforeEach(async (to, from, next) => {
   const auth = useUserInfoStore();
   const token = useGetCookie("JWT-Authorization");
 
-  if (location.pathname.includes("logoutConfirm")) {
-    document.cookie = "JWT-Authorization=";
-    auth.user.token = "";
-    // 清除 cookie token
-    next({ path: "/login" });
-  }
-
   if ((authRequired && !token) || to.path === "/") {
     auth.user.token = "";
     next({ path: "/login" });

src/views/dashboard/components/DashboardElecChart.vue

@@ -1,112 +1,171 @@
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import * as echarts from "echarts";
 import BarChart from "@/components/chart/BarChart.vue";
 
-// 昨天與今天的用電比較資料
+// 定義用電比較資料
 const yesterdayTodayData = {
-  data: {
+  categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-    categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+  values: [
-    values: [
-      {
-        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],
-      },
-    ],
-  },
-};
-
-// 本週與上週的用電比較資料
-const weekComparisonData = {
-  data: {
-    categories: ["週五", "週六", "週日", "週一", "週二", "週三", "週四"],
-    values: [
     {
-        name: "This week's electricity consumption",
+      name: "Today's electricity consumption",
-        value: [850, 200, 350, 850, 950, 950, 900],
+      value: [8, 8, 8, 8, 8, 15, 25, 65, 75, 60],
-      },
-      {
-        name: "Last week's electricity consumption",
-        value: [800, 150, 300, 750, 900, 900, 800],
-      },
-
-    ],
-  },
-};
-
-// 生成每個圖表的 option，並隱藏 legend
-const generateChartOption = (categories, values) => ({
-  xAxis: {
-    type: "category",
-    data: categories,
-    axisLine: {
-      lineStyle: {
-        color: "#fff",
-      },
-    },
-  },
-  yAxis: {
-    type: "value",
-    axisLine: {
-      lineStyle: {
-        color: "#fff",
-      },
-    },
-    splitLine: {
-      lineStyle: {
-        color: "#ccc",
-      },
-    },
-  },
-  series: [
-    {
-      name: values[0].name,
-      data: values[0].value,
-      type: "bar",
-      barWidth: "35%",
-      itemStyle: {
-        color: "#00BFFF", // 藍色
-      },
     },
     {
-      name: values[1].name,
+      name: "Yesterday's electricity consumption",
-      data: values[1].value,
+      value: [10, 10, 10, 10, 10, 20, 30, 80, 90, 70],
-      type: "bar",
-      barWidth: "35%",
-      itemStyle: {
-        color: "#FFD700", // 黃色
-      },
     },
   ],
-  grid: {
+};
-    left: "3%",
+
-    right: "4%",
+// 本週與上週用電比較資料
-    bottom: "3%",
+const weekComparisonData = {
-    containLabel: true,
+  categories: ["週五", "週六", "週日", "週一", "週二", "週三", "週四"],
-  },
+  values: [
-  tooltip: {
+    {
-    trigger: "axis",
+      name: "This week's electricity consumption",
-    axisPointer: {
+      value: [850, 200, 350, 850, 950, 950, 900],
-      type: "shadow",
     },
-  },
+    {
-  legend: {
+      name: "Last week's electricity consumption",
-    show: false, // 隱藏 legend
+      value: [800, 150, 300, 750, 900, 900, 800],
-  },
+    },
-});
+  ],
+};
+
+// 生成圓柱圖表的 option
+const generateCylinderChartOption = (categories, values) => {
+  const barWidth = 15; // 圓柱體寬度
+  return {
+    xAxis: {
+      type: "category",
+      data: categories,
+      axisLine: {
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+    },
+    yAxis: {
+      type: "value",
+      axisLine: {
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#ccc",
+        },
+      },
+    },
+    series: [
+      {
+        name: values[0].name,
+        type: "bar",
+        barWidth: barWidth,
+        data: values[0].value,
+        itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1, // 向右漸層
+            y2: 0, // 水平漸層
+            colorStops: [
+              { offset: 0, color: "#acd7e4" }, // 左側顏色
+              { offset: 0.5, color: "#0ca9d4" }, // 中間顏色
+              { offset: 1, color: "#acd7e4" }, // 右側顏色
+            ],
+          },
+        },
+      },
+      {
+        name: values[1].name,
+        type: "bar",
+        barWidth: barWidth,
+        data: values[1].value,
+        itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1, // 向右漸層
+            y2: 0, // 水平漸層
+            colorStops: [
+              { offset: 0, color: "#fff6b3" }, // 左側顏色
+              { offset: 0.5, color: "#ffe000" }, // 中間顏色
+              { offset: 1, color: "#fff6b3" }, // 右側顏色
+            ],
+          },
+        },
+      },
+      // 圓柱頂部
+      {
+        name: null,
+        type: "pictorialBar",
+        symbolSize: [barWidth, 5],
+        symbolOffset: [-9, -5],
+        symbolPosition: "end",
+        data: values[0].value,
+        z: 12,
+        itemStyle: {
+          color: "#0b86a7",
+          borderWidth: 10,
+          borderColor: "#fff",
+          borderType: "solid",
+        },
+      },
+      {
+        name: null,
+        type: "pictorialBar",
+        symbolSize: [barWidth, 5],
+        symbolOffset: [9, -5],
+        symbolPosition: "end",
+        data: values[1].value,
+        itemStyle: {
+          color: "#c3ae1a",
+          borderWidth: 10,
+          borderColor: "#fff",
+          borderType: "solid",
+        },
+        z: 12,
+      },
+    ],
+    grid: {
+      left: "3%",
+      right: "3%",
+      bottom: "3%",
+      top: "15%",
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+      formatter: function (params) {
+        // 僅顯示 bar 系列的資料
+        const barData = params.filter((item) => item.seriesType === "bar");
+        return barData
+          .map((item) => `${item.seriesName}: ${item.data}`)
+          .join("<br/>");
+      },
+    },
+    legend: {
+      show: false, // 隱藏 legend
+    },
+  };
+};
 
 // 分別生成每個圖表的 option
-const yesterdayTodayOption = generateChartOption(
+const yesterdayTodayOption = generateCylinderChartOption(
-  yesterdayTodayData.data.categories,
+  yesterdayTodayData.categories,
-  yesterdayTodayData.data.values
+  yesterdayTodayData.values
 );
-
+const weekComparisonOption = generateCylinderChartOption(
-const weekComparisonOption = generateChartOption(
+  weekComparisonData.categories,
-  weekComparisonData.data.categories,
+  weekComparisonData.values
-  weekComparisonData.data.values
 );
 </script>