首頁UI修改

src/components/dashboard/dashboardAlert.vue

@@ -21,7 +21,14 @@ const alarmDataStore = useAlarmDataStore();
       </thead>
       <tbody>
         <tr v-for="(item, index) in alarmDataStore.alarmData" :key="index">
-          <td>{{ item.name }}</td>
+          <td>
+            <font-awesome-icon
+              v-if="item.alarmCount > 0"
+              :icon="['fas', 'exclamation-circle']"
+              class="text-rose-600 text-lg animate-pulse -ms-5"
+            />
+            {{ item.name }}
+          </td>
           <td>{{ item.alarmCount }}</td>
           <td>{{ item.unackedCount }}</td>
           <td>

src/components/dashboard/dashboardElecChart.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted } from "vue";
-import * as echarts from "echarts"; // 引入 echarts
+import * as echarts from "echarts";
 
 // 定義用電比較資料
 const yesterdayTodayData = {
@@ -51,29 +51,70 @@ const weekComparisonChart = ref(null);
 onMounted(() => {
   // 初始化昨天和今天用電比較圖表
   const yesterdayTodayEChart = echarts.init(yesterdayTodayChart.value);
-  yesterdayTodayEChart.setOption(getBarChartOptions(yesterdayTodayData));
+  yesterdayTodayEChart.setOption(
+    generateCylinderChartOption(yesterdayTodayData)
+  );
 
   // 初始化本週和上週用電比較圖表
   const weekComparisonEChart = echarts.init(weekComparisonChart.value);
-  weekComparisonEChart.setOption(getBarChartOptions(weekComparisonData));
+  weekComparisonEChart.setOption(
+    generateCylinderChartOption(weekComparisonData)
+  );
 });
 
-// 封裝長條圖的設定
+// 生成圓柱圖表的 option
-const getBarChartOptions = (data) => {
+const generateCylinderChartOption = (data) => {
+  const barWidth = 15;
+  const color1 = {
+    // 今天用電量顏色
+    type: "linear",
+    x: 0,
+    y: 0,
+    x2: 1,
+    y2: 0,
+    colorStops: [
+      { offset: 0, color: "#1890ff" }, // 左側顏色
+      { offset: 0.5, color: "#acd7e4" }, // 中間顏色
+      { offset: 1, color: "#1890ff" }, // 右側顏色
+    ],
+  };
+  const color2 = {
+    // 昨天用電量顏色
+    type: "linear",
+    x: 0,
+    y: 0,
+    x2: 1,
+    y2: 0,
+    colorStops: [
+      { offset: 0, color: "#91cc75" }, // 左側顏色
+      { offset: 0.5, color: "#d2f0c2" }, // 中間顏色
+      { offset: 1, color: "#91cc75" }, // 右側顏色
+    ],
+  };
+
   return {
     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: {
       data: data.values.map((item) => item.name),
+      bottom: "0%",
     },
     grid: {
-      left: "3%",
+      left: "2%",
-      right: "4%",
+      right: "2%",
-      bottom: "3%",
+      top: "5%",
+      bottom: "10%",
       containLabel: true,
     },
     xAxis: {
@@ -83,15 +124,82 @@ const getBarChartOptions = (data) => {
     yAxis: {
       type: "value",
     },
-    series: data.values.map((item) => ({
+    series: [
-      name: item.name,
+      {
-      type: "bar",
+        name: data.values[0].name,
-      barGap: 0.1,
+        type: "bar",
-      emphasis: {
+        barWidth: barWidth,
-        focus: "series",
+        data: data.values[0].value,
+        itemStyle: {
+          color: color1,
+        },
       },
-      data: item.value,
+      {
-    })),
+        name: data.values[1].name,
+        type: "bar",
+        barWidth: barWidth,
+        data: data.values[1].value,
+        itemStyle: {
+          color: color2,
+        },
+      },
+      // 圓柱頂部
+      {
+        name: null,
+        type: "pictorialBar",
+        symbolSize: [barWidth, 5],
+        symbolOffset: [-9, -4], // 置中
+        symbolPosition: "end",
+        data: data.values[0].value,
+        z: 12,
+        itemStyle: {
+          color: "#acd7e4",
+          borderWidth: 0,
+          borderColor: "#fff",
+          borderType: "solid",
+        },
+      },
+      {
+        name: null,
+        type: "pictorialBar",
+        symbolSize: [barWidth, 5],
+        symbolOffset: [9, -4], // 置中
+        symbolPosition: "end",
+        data: data.values[1].value,
+        itemStyle: {
+          color: "#d2f0c2",
+          borderWidth: 1,
+          borderColor: "#91cc75",
+          borderType: "solid",
+        },
+        z: 12,
+      },
+      // 圓柱底部
+      {
+        name: null,
+        type: "pictorialBar",
+        symbolSize: [barWidth, 5],
+        symbolOffset: [-9, 4], // 置中
+        symbolPosition: "start",
+        data: data.values[0].value,
+        z: 12,
+        itemStyle: {
+          color: "#1890ff",
+        },
+      },
+      {
+        name: null,
+        type: "pictorialBar",
+        symbolSize: [barWidth, 5],
+        symbolOffset: [9, 4], // 置中
+        symbolPosition: "start",
+        data: data.values[1].value,
+        itemStyle: {
+          color: "#91cc75",
+        },
+        z: 12,
+      },
+    ],
   };
 };
 </script>
@@ -107,5 +215,4 @@ const getBarChartOptions = (data) => {
   </a-row>
 </template>
 
-<style scoped>
+<style scoped></style>
-</style>

src/components/dashboard/dashboardStat.vue

@@ -33,10 +33,10 @@ const mockData = [
       <a-card class="number">
         <a-row :gutter="24" align="middle" justify="space-between">
           <a-col :span="18">
-            <span>{{ item.label }}</span>
             <h3>
               {{ item.value }}<small>{{ item.unit }}</small>
             </h3>
+            <span>{{ item.label }}</span>
           </a-col>
           <a-col :span="6" class="pl-0">
             <div class="icon-box">
@@ -60,7 +60,7 @@ const mockData = [
 .number h3 {
   font-weight: 700;
   margin-bottom: 0;
-  font-size: 30px;
+  font-size: 33px;
 }
 .number h3 small {
   font-weight: 500;

src/components/dashboard/dashboardTag.vue

@@ -53,7 +53,7 @@ const handleClick = (ord) => {
 </script>
 
 <template>
-  <a-card class="card h-full">
+  <a-card class="card h-full mb-4">
     <div class="flex items-cemter justify-between mb-4">
       <h5>System</h5>
       <NavBuild />

src/main.js

@@ -22,7 +22,8 @@ import {
   faAngleDown,
   faLeaf,
   faBolt,
-  faChargingStation
+  faChargingStation,
+  faExclamationCircle,
 } from "@fortawesome/free-solid-svg-icons";
 library.add(
   faTv,
@@ -40,7 +41,8 @@ library.add(
   faAngleDown,
   faLeaf,
   faBolt,
-  faChargingStation
+  faChargingStation,
+  faExclamationCircle,
 );
 const pinia = createPinia();
 const app = createApp(App);