From 77ea86cdbeca40bdd52a12a266a552462172f289 Mon Sep 17 00:00:00 2001
From: ko1234 <ko.ko@mjmtech.com.tw>
Date: Mon, 14 Oct 2024 14:57:00 +0800
Subject: [PATCH] =?UTF-8?q?forge=E6=9C=AC=E5=9C=B0=20|=20=E8=83=BD?=
 =?UTF-8?q?=E6=BA=90=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 .env.production                               |   4 +-
 src/components/forge/Forge.vue                | 263 ++++--------------
 .../components/DashboardSysProgress.vue       |   2 +-
 .../energyManagement/EnergyManagement.vue     |  50 ++--
 .../components/BillingDegreeChart.vue         |  88 +++---
 .../components/CarbonEmissionChart.vue        |  99 +++++++
 .../components/ElecConsumption.vue            |  33 ++-
 .../components/ElectricityBillChart.vue       |  80 ------
 .../components/ImmediateDemandChart.vue       |  34 ++-
 .../components/IntervalBillChart.vue          | 111 ++++++++
 .../components/MonthlyElecBillChart.vue       | 112 ++++++++
 .../components/UsageInformation.vue           |  77 +++--
 vite.config.js                                |   2 +-
 14 files changed, 556 insertions(+), 401 deletions(-)
 create mode 100644 src/views/energyManagement/components/CarbonEmissionChart.vue
 delete mode 100644 src/views/energyManagement/components/ElectricityBillChart.vue
 create mode 100644 src/views/energyManagement/components/IntervalBillChart.vue
 create mode 100644 src/views/energyManagement/components/MonthlyElecBillChart.vue

diff --git a/.env.development b/.env.development
index 9fe4572..b5dd21c 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,3 @@
 VITE_API_BASEURL = "http://192.168.0.206:8060"
-VITE_FILE_API_BASEURL = ""
+VITE_FILE_API_BASEURL = "http://192.168.0.206:8088"
 VITE_FORGE_BASEURL = "http://localhost:5173"
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 7b0e2d0..013439b 100644
--- a/.env.production
+++ b/.env.production
@@ -1,3 +1,3 @@
-VITE_API_BASEURL = "http://220.132.206.5:8060"
-VITE_FILE_API_BASEURL = "http://220.132.206.5:8085/file"
+VITE_API_BASEURL = "http://192.168.0.206:8060"
+VITE_FILE_API_BASEURL = "http://192.168.0.206:8088"
 VITE_FORGE_BASEURL = "http://202.39.218.221:8080/file/netzero"
\ No newline at end of file
diff --git a/src/components/forge/Forge.vue b/src/components/forge/Forge.vue
index e01517f..5013130 100644
--- a/src/components/forge/Forge.vue
+++ b/src/components/forge/Forge.vue
@@ -1,221 +1,79 @@
 <script setup>
-import {
-  ref,
-  onMounted,
-  defineProps,
-  computed,
-  onUnmounted,
-  watch,
-  provide,
-} from "vue";
-import { getUrn, getAccessToken } from "@/apis/forge";
-import { twMerge } from "tailwind-merge";
-import hexToRgb from "@/util/hexToRgb";
-import getModalPosition from "@/util/getModalPosition";
-import useSystemStatusByBaja from "@/hooks/baja/useSystemStatusByBaja";
-import ForgeInfoModal from "./ForgeInfoModal.vue";
-import useAlarmStore from "@/stores/useAlarmStore";
+import { ref, onMounted, onUnmounted } from "vue";
 
-const props = defineProps({
-  initialData: Object,
-  cubeStyle: {
-    type: Object,
-    default: {
-      right: 25,
-      top: 2,
-    },
-  },
-});
-
-const heat_bar_isShow = ref(false);
-const updateHeatBarIsShow = (isShow) => {
-  heat_bar_isShow.value = isShow;
-};
-
-const {
-  subscribeData,
-  visibleDbid,
-  updateDbidPosition,
-  hideAllObjects,
-  updateForgeViewer,
-  urn,
-  loadModel,
-  updateInitialData,
-  subComponents,
-} = useSystemStatusByBaja(updateHeatBarIsShow);
-
-watch(
-  () => props.initialData,
-  (newValue) => {
-    newValue && updateInitialData(newValue);
-  },
-  {
-    deep: true,
-  }
-);
-
-const store = useAlarmStore();
-const subscribeDataWithErrorMsg = computed(() => {
-  let data = { ...subscribeData.value };
-
-  for (let [key, value] of Object.entries(subscribeData.value)) {
-    const alarm = store.alarmData.find(
-      ({ device_number }) => device_number === key
-    );
-    data[key].alarmMsg = alarm ? alarm.msg : "";
-  }
-  console.log("baja update data: ", data);
-  return data;
-});
+const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL; 
 
 const forgeDom = ref(null);
+let viewer = null;
 
+// 初始化 Forge Viewer
 const initViewer = (container) => {
   return new Promise(function (resolve, reject) {
-    Autodesk.Viewing.Initializer({ getAccessToken }, function () {
-      const config = {
-        extensions: ["Autodesk.DataVisualization", "Autodesk.DocumentBrowser"],
-      };
-      let viewer = new Autodesk.Viewing.GuiViewer3D(container, config);
-      Autodesk.Viewing.Private.InitParametersSetting.alpha = true;
-      viewer.start();
-      resolve(viewer);
-    });
+    Autodesk.Viewing.Initializer(
+      {
+        env: "Local",
+        language: "en",
+      },
+      function () {
+        const config = {
+          extensions: [
+            "Autodesk.DataVisualization",
+            "Autodesk.DocumentBrowser",
+          ],
+        };
+        viewer = new Autodesk.Viewing.GuiViewer3D(container, config);
+        Autodesk.Viewing.Private.InitParametersSetting.alpha = true;
+        viewer.start();
+        viewer.setGroundShadow(false);
+        viewer.impl.renderer().setClearAlpha(0);
+        viewer.impl.glrenderer().setClearColor(0xffffff, 0);
+        viewer.impl.invalidate(true);
+        resolve(viewer);
+      }
+    );
   });
 };
 
-const initForge = () => {
-  getUrn().then((res) => {
-    if (!res.isSuccess) return;
-    urn.value = res.data[0].urn_3D;
-    initViewer(forgeDom.value).then((viewer) => {
-      loadModel(viewer, res.data[0].urn_3D).then(() => {
-        viewer.addEventListener(
-          Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
-          async function () {
-            console.log(
-              "Autodesk.Viewing.GEOMETRY_LOADED_EVENT",
-              viewer.isLoadDone()
-            );
-            updateForgeViewer(viewer);
-
-            const tree = viewer.model.getData().instanceTree;
-            hideAllObjects(tree, visibleDbid.value);
-          }
-        );
-        viewer.addEventListener(
-          Autodesk.Viewing.CAMERA_CHANGE_EVENT,
-          function (e) {
-            viewer.isLoadDone() &&
-              updateDbidPosition(this, subscribeData.value);
-            console.log(
-              "camera position changed: ",
-              NOP_VIEWER.navigation.getTarget(),
-              e.camera.position
-            );
-          }
-        );
-       
-      });
-    });
+// 使用本地 .svf 文件加載模型
+const loadModel = (filePath) => {
+  return new Promise((resolve, reject) => {
+    viewer.loadModel(
+      filePath,
+      {},
+      (model) => {
+        viewer.impl.invalidate(true);
+        viewer.fitToView();
+        resolve(model);
+        console.log("模型加載完成");
+      },
+      reject
+    );
   });
 };
 
-onMounted(() => {
+onMounted(async () => {
   console.log("Forge 加載");
-  initForge();
+  await initViewer(forgeDom.value);
+  const filePath = `${FILE_BASEURL}/upload/forge/0.svf`; 
+  loadModel(filePath);
 });
 
-// 傳遞目前點擊資訊
-const currentInfoModalData = ref(null);
-const isMobile = (pointerType) => {
-  return pointerType !== "mouse"; // is desktop
-};
-const getCurrentInfoModalData = (e, position, value) => {
-  const mobile = isMobile(e.pointerType);
-  currentInfoModalData.value = {
-    initPos: mobile
-      ? { left: `50%`, top: `50%` }
-      : { left: `${position.left}px`, top: `${position.top}px` },
-    value,
-    isMobile: mobile,
-  };
-  forge_info_modal.showModal();
-};
 onUnmounted(() => {
   console.log("Forge 銷毀");
-  console.log("sub", subComponents);
-  subComponents.value?.unsubscribeAll();
-  subComponents.value?.detach();
-  updateForgeViewer(null);
-  NOP_VIEWER.tearDown();
+  if (viewer) {
+    viewer.tearDown();
+    viewer.finish();
+    viewer = null;
+  }
 });
 </script>
 
 <template>
-  <ForgeInfoModal :data="currentInfoModalData" />
-    <div
-      id="forge-preview"
-      ref="forgeDom"
-      class="relative w-full h-full min-h-full"
-    >
-      <div v-show="heat_bar_isShow" class="absolute z-10 heatbar">
-        <div class="w-40 flex justify-between text-[10px] mb-1">
-          <span class="text-gradient-1">10 °C</span>
-          <span class="text-gradient-2">20 °C</span>
-          <span class="text-gradient-3">30 °C</span>
-          <span class="text-gradient-4">40 °C</span>
-        </div>
-        <div
-          class="w-40 h-3"
-          style="
-            background: linear-gradient(
-              to right,
-              #0000ff 0%,
-              #00ff00 33%,
-              #ffff00 66%,
-              #ff0000 100%
-            );
-          "
-        ></div>
-      </div>
-      <!-- label -->
-      <!-- https://github.com/augustogoncalves/forge-plant-operation/blob/master/forgeSample/wwwroot/js/iconExtension.js -->
-      <!-- https://github.com/dukedhx/viewer-iot-react-feathersjs/blob/master/src/client/iconExtension.js -->
-
-      <label
-        v-for="(value, key) in subscribeDataWithErrorMsg"
-        :key="key"
-        :data-dbid="value.forge_dbid"
-        :class="
-          twMerge(
-            `after:border-t-[${value.currentColor}]`,
-            'flex items-center justify-center h-12 -translate-x-1/2 -translate-y-1/5 absolute z-50 px-5 py-4 text-center rounded-md text-lg border-2 border-white',
-            'after:absolute after:border-t-[10px] after:border-x-[12px] after:border-x-transparent after:-bottom-[8px] after:left-1/2 after:-translate-x-1/2 ',
-            'before:absolute before:border-t-[12px] before:border-x-[14px] before:border-x-transparent before:-bottom-[12px] before:left-1/2 before:-translate-x-1/2 before:border-white'
-          )
-        "
-        :style="{
-          left: `${Math.floor(value.device_coordinate_3d.x)}px`,
-          top: `${Math.floor(value.device_coordinate_3d.y) - 100}px`,
-          display: value.is_show,
-          backgroundColor: value.currentColor,
-        }"
-        @click.prevent="
-          (e) =>
-            getCurrentInfoModalData(
-              e,
-              { left: e.clientX, top: e.clientY },
-              value
-            )
-        "
-      >
-        <span class="mr-2">{{ value.full_name }}</span>
-        <span v-if="value.alarmMsg">{{ value.alarmMsg }}</span>
-        <span v-else>{{ value.show_value }}</span>
-      </label>
-    </div>
-
+  <div
+    id="forge-preview"
+    ref="forgeDom"
+    class="relative w-full h-full min-h-full"
+  ></div>
 </template>
 
 <style lang="css">
@@ -228,17 +86,4 @@ onUnmounted(() => {
   bottom: 200px;
 }
 
-.viewcubeWrapper {
-  right: v-bind("`${props.cubeStyle.right}%`") !important;
-  top: v-bind("`${props.cubeStyle.top}%`") !important;
-}
-
-.homeViewWrapper {
-  transform: scale(1.5) !important;
-}
-
-.heatbar {
-  right: v-bind("`${props.cubeStyle.right + 2}%`") !important;
-  top: 0% !important;
-}
 </style>
diff --git a/src/views/dashboard/components/DashboardSysProgress.vue b/src/views/dashboard/components/DashboardSysProgress.vue
index 231f73e..b443226 100644
--- a/src/views/dashboard/components/DashboardSysProgress.vue
+++ b/src/views/dashboard/components/DashboardSysProgress.vue
@@ -80,7 +80,7 @@ const getProgressValue = (group) => {
                 <span>{{ group[1].value }}</span>
               </div>
               <progress
-                class="progress progress-error"
+                class="progress [&::-webkit-progress-value]:bg-red-600 [&::-moz-progress-bar]:bg-red-600"
                 :value="getProgressValue(group)"
                 max="100"
                 size=""
diff --git a/src/views/energyManagement/EnergyManagement.vue b/src/views/energyManagement/EnergyManagement.vue
index 6e9a8e8..6072a78 100644
--- a/src/views/energyManagement/EnergyManagement.vue
+++ b/src/views/energyManagement/EnergyManagement.vue
@@ -2,39 +2,37 @@
 import ImmediateDemandChart from "./components/ImmediateDemandChart.vue";
 import ElecConsumption from "./components/ElecConsumption.vue";
 import UsageInformation from "./components/UsageInformation.vue";
-import ElectricityBillChart from "./components/ElectricityBillChart.vue";
+import MonthlyElecBillChart from "./components/MonthlyElecBillChart.vue";
+import CarbonEmissionChart from "./components/CarbonEmissionChart.vue";
 import BillingDegreeChart from "./components/BillingDegreeChart.vue";
-
+import IntervalBillChart from "./components/IntervalBillChart.vue";
 </script>
 
 <template>
-    <div class="grid gap-4 grid-cols-5 mb-4">
-        <div class="col-span-2">
-            <ElecConsumption />
-        </div>
-        <div class="col-span-3">
-            <ImmediateDemandChart />
-        </div>
+  <div class="flex flex-wrap items-center mb-4">
+    <div class="w-full xl:w-5/12 lg:w-1/2">
+      <ElecConsumption />
     </div>
-    <div class="grid gap-4 grid-cols-3 mb-4">
-        <div class="col-span-1">
-            <UsageInformation />
-        </div>
-        <div class="col-span-1">
-            <ElectricityBillChart />
-        </div>
-        <div class="col-span-1">
-            <BillingDegreeChart />
-        </div>
+    <div class="w-full xl:w-7/12 lg:w-1/2">
+      <ImmediateDemandChart />
     </div>
-    <div class="grid gap-4 grid-cols-3">
-        <div class="col-span-1">
-            <BillingDegreeChart />
-        </div>
-        <div class="col-span-2">
-            <ElectricityBillChart />
-        </div>
+    <div class="w-full xl:w-1/3 px-3">
+      <UsageInformation />
     </div>
+    <div class="w-full xl:w-1/3 px-3">
+      <MonthlyElecBillChart />
+    </div>
+    <div class="w-full xl:w-1/3 px-3">
+      <CarbonEmissionChart />
+    </div>
+    <div class="w-full xl:w-1/3 px-3">
+      <BillingDegreeChart />
+    </div>
+    <div class="w-full xl:w-2/3 px-3">
+      <IntervalBillChart />
+    </div>
+  </div>
+  <div class="grid gap-4 grid-cols-3"></div>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/energyManagement/components/BillingDegreeChart.vue b/src/views/energyManagement/components/BillingDegreeChart.vue
index bfdca33..38a5f15 100644
--- a/src/views/energyManagement/components/BillingDegreeChart.vue
+++ b/src/views/energyManagement/components/BillingDegreeChart.vue
@@ -6,81 +6,101 @@ const defaultChartOption = ref({
   tooltip: {
     trigger: "axis",
     axisPointer: {
-      type: "shadow"
-    }
+      type: "shadow",
+    },
   },
   legend: {
-    data: ['尖峰', '半尖峰', '離峰度數'],
+    data: ["尖峰", "半尖峰", "離峰度數"],
     textStyle: {
       color: "#ffffff",
       fontSize: 16,
     },
-    orient: "horizontal", 
+    orient: "horizontal",
     bottom: "0%",
   },
   grid: {
-    top: '5%',
-    left: '0%',
-    right: '0%',
-    bottom: '10%',
-    containLabel: true
+    top: "5%",
+    left: "0%",
+    right: "0%",
+    bottom: "15%",
+    containLabel: true,
   },
   xAxis: {
-    type: 'category',
-    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    type: "category",
+    data: [
+      "1月",
+      "2月",
+      "3月",
+      "4月",
+      "5月",
+      "6月",
+      "7月",
+      "8月",
+      "9月",
+      "10月",
+      "11月",
+      "12月",
+    ],
     axisLabel: {
       color: "#ffffff",
     },
   },
   yAxis: {
-    type: 'value',
+    type: "value",
     axisLabel: {
       color: "#ffffff",
     },
   },
   series: [
     {
-      name: '尖峰',
-      type: 'bar',
-      stack: 'total',
-      data: [5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500, 5500],
+      name: "尖峰",
+      type: "bar",
+      stack: "total",
+      data: [
+        5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500,
+        5500,
+      ],
       itemStyle: {
-        color: '#3c50e0',
+        color: "#45f4ef",
       },
     },
     {
-      name: '半尖峰',
-      type: 'bar',
-      stack: 'total',
-      data: [3000, 3200, 4500, 4800, 5200, 5800, 6000, 6100, 6200, 5300, 4500, 4000],
+      name: "半尖峰",
+      type: "bar",
+      stack: "total",
+      data: [
+        3000, 3200, 4500, 4800, 5200, 5800, 6000, 6100, 6200, 5300, 4500, 4000,
+      ],
       itemStyle: {
-        color: '#6577f3',
+        color: "#ffd345",
       },
     },
     {
-      name: '離峰度數',
-      type: 'bar',
-      stack: 'total',
-      data: [2000, 2500, 3500, 4000, 4500, 5000, 5200, 5300, 5400, 4500, 4000, 3500],
+      name: "離峰度數",
+      type: "bar",
+      stack: "total",
+      data: [
+        2000, 2500, 3500, 4000, 4500, 5000, 5200, 5300, 5400, 4500, 4000, 3500,
+      ],
       itemStyle: {
-        color: '#8fd0ef',
+        color: "#64ed81",
       },
-    }
-  ]
+    },
+  ],
 });
 
 onMounted(() => {
-  // 
+  //
 });
 </script>
 
 <template>
-  <div class="card bg-slate-800 w-full h-full rounded-md">
-    <div class="card-body">
-      <h2 class="card-title">每月計費度數 (kWh)</h2>
+  <div class="bg-slate-800 p-3">
+    <div class="text-white mb-3 text-base">每月計費度數 (kWh)</div>
+    <div class="bar-box">
       <BarChart
         id="billing_degree_chart"
-        class="min-h-[250px]"
+        class="min-h-[200px] w-full h-full"
         :option="defaultChartOption"
         ref="degree_chart"
       />
diff --git a/src/views/energyManagement/components/CarbonEmissionChart.vue b/src/views/energyManagement/components/CarbonEmissionChart.vue
new file mode 100644
index 0000000..b5043e1
--- /dev/null
+++ b/src/views/energyManagement/components/CarbonEmissionChart.vue
@@ -0,0 +1,99 @@
+<script setup>
+import BarChart from "@/components/chart/BarChart.vue";
+import { ref, onMounted } from "vue";
+
+const defaultChartOption = ref({
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow",
+    },
+  },
+  legend: {
+    data: ["碳排當量", "減量目標"],
+    textStyle: {
+      color: "#ffffff",
+      fontSize: 16,
+    },
+    orient: "horizontal",
+    bottom: "0%",
+  },
+  grid: {
+    top: "5%",
+    left: "0%",
+    right: "0%",
+    bottom: "15%",
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    data: [
+      "1月",
+      "2月",
+      "3月",
+      "4月",
+      "5月",
+      "6月",
+      "7月",
+      "8月",
+      "9月",
+      "10月",
+      "11月",
+      "12月",
+    ],
+    axisLabel: {
+      color: "#ffffff",
+    },
+  },
+  yAxis: {
+    type: "value",
+    axisLabel: {
+      color: "#ffffff",
+    },
+  },
+  series: [
+    {
+      name: "碳排當量",
+      type: "bar",
+      data: [
+        5400, 6500, 7200, 7500, 9800, 9500, 11200, 11500, 11800, 7500, 6500,
+        5500,
+      ],
+      itemStyle: {
+        color: "#45f4ef",
+      },
+    },
+    {
+      name: "減量目標",
+      type: "bar",
+      data: [
+        5000, 6000, 6000, 7000, 9500, 9000, 10000, 11000, 10000, 7200, 6000,
+        5000,
+      ],
+      itemStyle: {
+        color: "#ffd345",
+      },
+    },
+  ],
+});
+
+onMounted(() => {
+  //
+});
+</script>
+
+<template>
+  <div class="bg-slate-800 p-3">
+    <div class="text-white mb-3 text-base">
+      每月碳排當量 (kgCO2e) 與減量目標
+    </div>
+    <div class="bar-box">
+      <BarChart
+        id="electricity_bill_chart"
+        class="min-h-[200px] w-full h-full"
+        :option="defaultChartOption"
+        ref="bill_chart"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/views/energyManagement/components/ElecConsumption.vue b/src/views/energyManagement/components/ElecConsumption.vue
index fd51b92..272857e 100644
--- a/src/views/energyManagement/components/ElecConsumption.vue
+++ b/src/views/energyManagement/components/ElecConsumption.vue
@@ -59,19 +59,34 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="card bg-gray-800 h-full rounded-sm">
-    <div class="card-body">
-      <h2 class="card-title relative mb-4">用電即時分佈</h2>
-      <div class="chart-container">
-        <div ref="chartDiv" class="w-full min-h-[250px]"></div>
-      </div>
+  <div class="p-3">
+    <h2 class="text text-lg text-white mb-5 relative">用電即時分佈</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">160.05</span>
+        </li>
+        <li class="pr-5 relative z-20">
+          <span class="pr-3.5">綠電 (kWh)</span>
+          <span class="pr-3.5">39.50</span>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
 
-<style scoped>
-.card-title::after {
-  @apply absolute -bottom-2 left-0 h-[1px] w-[60%] bg-slate-400;
+<style lang="scss" scoped>
+.text::after {
+  @apply absolute -bottom-2.5 left-0 block w-3/5 h-[1px] bg-slate-600;
+  content: "";
+}
+
+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>
diff --git a/src/views/energyManagement/components/ElectricityBillChart.vue b/src/views/energyManagement/components/ElectricityBillChart.vue
deleted file mode 100644
index 5c73cde..0000000
--- a/src/views/energyManagement/components/ElectricityBillChart.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script setup>
-import BarChart from "@/components/chart/BarChart.vue";
-import { ref, onMounted } from "vue";
-
-const defaultChartOption = ref({
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      type: "shadow"
-    }
-  },
-  legend: {
-    data: ['基本電費', '流動電費'],
-    textStyle: {
-      color: "#ffffff",
-      fontSize: 16,
-    },
-    orient: "horizontal", 
-    bottom: "0%",
-  },
-  grid: {
-    top: '5%',
-    left: '0%',
-    right: '0%',
-    bottom: '10%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'category',
-    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-    axisLabel: {
-      color: "#ffffff",
-    },
-  },
-  yAxis: {
-    type: 'value',
-    axisLabel: {
-      color: "#ffffff",
-    },
-  },
-  series: [
-    {
-      name: '基本電費',
-      type: 'bar',
-      stack: 'total',
-      data: [5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500, 5500],
-      itemStyle: {
-        color: '#37c640',
-      },
-    },
-    {
-      name: '流動電費',
-      type: 'bar',
-      stack: 'total',
-      data: [15000, 16000, 20000, 21000, 25000, 26000, 30000, 31000, 35000, 27600, 16500, 15000],
-      itemStyle: {
-        color: '#8ee894',
-      },
-    }
-  ]
-});
-
-onMounted(() => {
-  // 
-});
-</script>
-
-<template>
-  <div class="card bg-slate-800 w-full h-full rounded-md">
-    <div class="card-body">
-      <h2 class="card-title">每月電費分析</h2>
-      <BarChart
-        id="electricity_bill_chart"
-        class="min-h-[250px]"
-        :option="defaultChartOption"
-        ref="bill_chart"
-      />
-    </div>
-  </div>
-</template>
diff --git a/src/views/energyManagement/components/ImmediateDemandChart.vue b/src/views/energyManagement/components/ImmediateDemandChart.vue
index fd03231..cea5fb9 100644
--- a/src/views/energyManagement/components/ImmediateDemandChart.vue
+++ b/src/views/energyManagement/components/ImmediateDemandChart.vue
@@ -113,19 +113,29 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="card bg-slate-700 h-full relative rounded-sm">
-    <div class="card-body">
-      <h2 class="card-title flex justify-between">
-        <div class="title">即時需量<span>279.09</span>Kw</div>
-      </h2>
-      <LineChart
-        id="immediate_demand_chart"
-        class="min-h-[250px]"
-        :option="defaultChartOption"
-        ref="demand_chart"
-      />
+  <div class="p-3">
+    <div class="flex text-white mb-5">
+      <div class="flex items-end text-base relative text mr-32">
+        即時需量
+        <span class="text-2xl px-2.5">245.48 kw</span>
+      </div>
+      <div class="flex items-end text-base">
+        平均需量
+        <span class="text-2xl px-2.5">230.8 kw</span>
+      </div>
     </div>
+    <LineChart
+      id="immediate_demand_chart"
+      class="w-full h-full min-h-[220px]"
+      :option="defaultChartOption"
+      ref="demand_chart"
+    />
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.text:after {
+  @apply absolute top-0 -bottom-2.5 left-full block w-28 h-[1px] bg-slate-600 m-auto z-10;
+  content: "";
+}
+</style>
diff --git a/src/views/energyManagement/components/IntervalBillChart.vue b/src/views/energyManagement/components/IntervalBillChart.vue
new file mode 100644
index 0000000..d50c96e
--- /dev/null
+++ b/src/views/energyManagement/components/IntervalBillChart.vue
@@ -0,0 +1,111 @@
+<script setup>
+import BarChart from "@/components/chart/BarChart.vue";
+import { ref, onMounted } from "vue";
+
+const generateDateRange = () => {
+  const dates = [];
+  for (let day = 1; day <= 15; day++) {
+    const formattedDay = day < 10 ? `0${day}` : day;
+    dates.push(`11 / ${formattedDay}`);
+  }
+  return dates;
+};
+
+const defaultChartOption = ref({
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow",
+    },
+  },
+  legend: {
+    data: ["尖峰", "半尖峰", "離峰度數"],
+    textStyle: {
+      color: "#ffffff",
+      fontSize: 16,
+    },
+    orient: "horizontal",
+    bottom: "0%",
+  },
+  grid: {
+    top: "5%",
+    left: "0%",
+    right: "0%",
+    bottom: "10%",
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    data: generateDateRange(), 
+    axisLabel: {
+      color: "#ffffff",
+    },
+  },
+  yAxis: {
+    type: "value",
+    axisLabel: {
+      color: "#ffffff",
+    },
+  },
+  series: [
+    {
+      name: "尖峰",
+      type: "bar",
+      stack: "total",
+      data: [
+        5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500,
+        5500, 6000, 6200, 5800,
+      ],
+      itemStyle: {
+        color: "#3c50e0",
+      },
+    },
+    {
+      name: "半尖峰",
+      type: "bar",
+      stack: "total",
+      data: [
+        3000, 3200, 4500, 4800, 5200, 5800, 6000, 6100, 6200, 5300, 4500, 4000,
+        4200, 4300, 4100,
+      ],
+      itemStyle: {
+        color: "#6577f3",
+      },
+    },
+    {
+      name: "離峰度數",
+      type: "bar",
+      stack: "total",
+      data: [
+        2000, 2500, 3500, 4000, 4500, 5000, 5200, 5300, 5400, 4500, 4000, 3500,
+        3700, 3800, 3600,
+      ],
+      itemStyle: {
+        color: "#8fd0ef",
+      },
+    },
+  ],
+});
+
+onMounted(() => {
+  //
+});
+</script>
+
+<template>
+  <div class="bg-slate-700 p-3">
+    <div class="text-white mb-3 text-base">
+      區間計費度數 2024 / 11 / 01 ~ 2024 / 11 / 15
+    </div>
+    <div class="bar-box">
+      <BarChart
+        id="billing_degree_chart"
+        class="min-h-[200px] w-full h-full"
+        :option="defaultChartOption"
+        ref="degree_chart"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/energyManagement/components/MonthlyElecBillChart.vue b/src/views/energyManagement/components/MonthlyElecBillChart.vue
new file mode 100644
index 0000000..beca711
--- /dev/null
+++ b/src/views/energyManagement/components/MonthlyElecBillChart.vue
@@ -0,0 +1,112 @@
+<script setup>
+import BarChart from "@/components/chart/BarChart.vue";
+import { ref, onMounted } from "vue";
+
+const defaultChartOption = ref({
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow",
+    },
+  },
+  legend: {
+    data: [ "流動電費","基本電費", "電費總額"],
+    textStyle: {
+      color: "#ffffff",
+      fontSize: 16,
+    },
+    orient: "horizontal",
+    bottom: "0%",
+  },
+  grid: {
+    top: "5%",
+    left: "0%",
+    right: "0%",
+    bottom: "15%",
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    data: [
+      "1月",
+      "2月",
+      "3月",
+      "4月",
+      "5月",
+      "6月",
+      "7月",
+      "8月",
+      "9月",
+      "10月",
+      "11月",
+      "12月",
+    ],
+    axisLabel: {
+      color: "#ffffff",
+    },
+  },
+  yAxis: {
+    type: "value",
+    axisLabel: {
+      color: "#ffffff",
+    },
+  },
+  series: [
+    {
+      name: "流動電費",
+      type: "bar",
+      stack: "total",
+      data: [
+        15000, 16000, 20000, 21000, 25000, 26000, 30000, 31000, 35000, 27600,
+        16500, 15000,
+      ],
+      itemStyle: {
+        color: "#45f4ef",
+      },
+    },
+    {
+      name: "基本電費",
+      type: "bar",
+      stack: "total",
+      data: [
+        5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500,
+        5500,
+      ],
+      itemStyle: {
+        color: "#ffd345",
+      },
+    },
+
+    {
+      name: "電費總額",
+      type: "bar",
+      stack: "total",
+      data: [
+        3000, 3000, 4000, 5000, 12000, 17000, 20000, 20000, 12000, 12000, 5000,
+        0,
+      ],
+      itemStyle: {
+        color: "#64ed81",
+      },
+    },
+  ],
+});
+
+onMounted(() => {
+  //
+});
+</script>
+
+<template>
+  <div class="bg-slate-800 p-3">
+    <div class="text-white mb-3 text-base">每月用電分析</div>
+    <div class="bar-box">
+      <BarChart
+        id="electricity_bill_chart"
+        class="min-h-[200px] w-full h-full"
+        :option="defaultChartOption"
+        ref="bill_chart"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/views/energyManagement/components/UsageInformation.vue b/src/views/energyManagement/components/UsageInformation.vue
index 937869f..aaab3c9 100644
--- a/src/views/energyManagement/components/UsageInformation.vue
+++ b/src/views/energyManagement/components/UsageInformation.vue
@@ -1,35 +1,60 @@
 <script setup>
+import { ref } from "vue";
+import { twMerge } from "tailwind-merge";
 
+// 假資料
+const dataItems = ref([
+  { title: "今年電費累計(元)", data: "3,255,458" },
+  { title: "區間電費(元)", data: "205,110" },
+  { title: "今年碳排當量累計(公斤)", data: "455,128" },
+  { title: "區間碳排當量", time: "2023-11-01~2023-11-19", data: "25,351" },
+  { title: "今年用電度數(kWh)", data: "864,830" },
+  { title: "區間用電度數(kWh)", time: "2023-11-01~2023-11-19", data: "50,355" },
+]);
+
+// 背景顏色處理
+const getItemBackground = (index) => {
+  return index === 0 || index === 3 || index === 4
+    ? "bg-slate-600"
+    : "bg-slate-800";
+};
 </script>
 
 <template>
-  <div className="stats w-full h-[48%] p-2 mb-4 bg-slate-900 rounded-lg border border-cyan-200/20 shadow-md shadow-cyan-500/20">
-    <!-- 電壓資訊 -->
-    <div className="stat place-items-start">
-      <div className="stat-title text-gray-200 3xl:text-[2rem]">今年電費總計 (元)</div>
-      <div className="stat-value text-success text-5xl 3xl:text-[6rem]">516,519</div>
-      <div className="stat-desc text-gray-400 3xl:text-[2rem]">2024-01-01 ~ 2024-08-08</div>
-    </div>
-    <div className="stat place-items-start">
-      <div className="stat-title text-gray-200 3xl:text-[2rem]">區間電費總計 (元)</div>
-      <div className="stat-value text-success text-5xl 3xl:text-[6rem]">22,432</div>
-      <div className="stat-desc text-gray-400 3xl:text-[2rem]">2024-07-01 ~ 2024-07-31</div>
-    </div>
-  </div>
-
-  <div className="stats w-full h-[48%] p-2 mb-4 bg-slate-900 rounded-lg border border-cyan-200/20 shadow-md shadow-cyan-500/20">
-    <!-- 電流資訊 -->
-    <div className="stat place-items-start">
-      <div className="stat-title text-gray-200 3xl:text-[2rem]">今年用電度數 (kWh)</div>
-      <div className="stat-value text-success text-5xl 3xl:text-[6rem]">172,173</div>
-      <div className="stat-desc text-gray-400 3xl:text-[2rem]">2024-01-01 ~ 2024-08-08</div>
-    </div>
-    <div className="stat place-items-start">
-      <div className="stat-title text-gray-200 3xl:text-[2rem]">區間用電度數 (kWh)</div>
-      <div className="stat-value text-success text-5xl 3xl:text-[6rem]">7,477</div>
-      <div className="stat-desc text-gray-400 3xl:text-[2rem]">2024-07-01 ~ 2024-07-31</div>
+  <div class="six-data">
+    <div
+      v-for="(item, index) in dataItems"
+      :key="index"
+      :class="
+        twMerge(
+          'item w-1/2 py-0 px-5 h-[85px] text-white flex justify-center flex-col',
+          index == 0 || index == 3 || index == 4
+            ? 'bg-slate-800'
+            : 'bg-slate-700'
+        )
+      "
+    >
+      <div class="title">{{ item.title }}</div>
+      <div v-if="item.time" class="time">{{ item.time }}</div>
+      <div class="data">{{ item.data }}</div>
     </div>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.six-data {
+  @apply flex flex-wrap mb-2.5;
+
+  .title {
+    @apply text-sm;
+  }
+
+  .time {
+    @apply text-xs;
+  }
+
+  .data {
+    @apply text-2xl;
+  }
+}
+</style>
diff --git a/vite.config.js b/vite.config.js
index 0f3edd8..00df2bc 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -16,7 +16,7 @@ export default defineConfig({
   server: {
     proxy: {
       '/upload': {
-        target: "http://220.132.206.5:8008",
+        target: "http://192.168.0.206:8088/upload",
         changeOrigin: true,
         secure: false,
       },