From 50aefda2a0d892a4800e4c423bc75d098a824b10 Mon Sep 17 00:00:00 2001
From: Michael <20074391@skcc.com>
Date: Wed, 20 Aug 2025 17:19:39 +0900
Subject: [PATCH] Update loading + Combine 2 api call in paging + Add dynamic
 font size for gauge chart

---
 assets/images/loading.png                    | Bin 0 -> 1587 bytes
 assets/scss/layout.scss                      |  29 +++++++++-----
 components/common/chartoptions/GaugeChart.js |  10 +++--
 layouts/default.vue                          |   5 +--
 pages/ems/effc/EnrgUseTotSummPage.vue        |   2 +-
 pages/ems/effc/EqpmIndMntrPage.vue           |  38 ++++++++++++-------
 6 files changed, 54 insertions(+), 30 deletions(-)
 create mode 100644 assets/images/loading.png

diff --git a/assets/images/loading.png b/assets/images/loading.png
new file mode 100644
index 0000000000000000000000000000000000000000..b430ae76214143dc9373c505925f7527f5a3301f
GIT binary patch
literal 1587
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

literal 0
HcmV?d00001

diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
index c93766d..715c112 100644
--- a/assets/scss/layout.scss
+++ b/assets/scss/layout.scss
@@ -1,18 +1,27 @@
-.loading {
-  z-index: 99;
+.loading-container {
   position: fixed;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  transform: translate(-50%, -50%);
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
   background-color: rgba(0, 0, 0, 0.4);
   //box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
 }
 
-.v-spinner {
-  top: 50%;
-  left: 50%;
+.loading-img {
+  width: 64px;
+  height: 64px;
+  animation: spin 3s linear infinite;
+}
+ 
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 ::v-deep {
diff --git a/components/common/chartoptions/GaugeChart.js b/components/common/chartoptions/GaugeChart.js
index e2917cc..c5249ba 100644
--- a/components/common/chartoptions/GaugeChart.js
+++ b/components/common/chartoptions/GaugeChart.js
@@ -1,5 +1,6 @@
 // Gauge chart options
-export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
+export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97,
+    value = 0 }) {
     const colorRanges = isDarkMode
         ? [
             [60 / 160, '#49AA19'], // Dark Green
@@ -24,6 +25,9 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
     //     [0.8, "#f7931e"],
     //     [1.0, "#ed1c24"],
     // ];
+    
+    const valueLength = String(value).length;
+    const dynamicFontSize = valueLength >= 4 ? 21 : 30;
     return {
         grid: {
             // top: '-10%',
@@ -109,7 +113,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
                     valueAnimation: true,
                     fontWeight: 500, // or "normal", "lighter", "bolder", or a number like 600
                     fontFamily: "Oxanium, sans-serif", // or any custom font
-                    fontSize: 30,
+                    fontSize: dynamicFontSize,
                     lineHeight: 25,
                     offsetCenter: [0, "60%"],
                     color: isDarkMode ? "#fff" : "#333333",
@@ -130,7 +134,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
                 },
                 data: [
                     {
-                        value: 16,
+                        value: value,
                         name: "에너지사용효율", // "Energy Usage Efficiency"
                     },
                 ],
diff --git a/layouts/default.vue b/layouts/default.vue
index 5e9f6bd..d32df3a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -155,9 +155,8 @@
           </v-row>
         </v-container>
         <div v-if="loadingStackCnt > 0" class="loading-container">
-          <div class="loading">
-            <Fade-loader />
-          </div>
+            <!-- <Fade-loader color="#717577" />   -->
+          <img class="loading-img" src="@/assets/images/loading.png" alt="Loading..." />
         </div>
       </v-main>
     </fullscreen>
diff --git a/pages/ems/effc/EnrgUseTotSummPage.vue b/pages/ems/effc/EnrgUseTotSummPage.vue
index c96e661..8532a6b 100644
--- a/pages/ems/effc/EnrgUseTotSummPage.vue
+++ b/pages/ems/effc/EnrgUseTotSummPage.vue
@@ -442,7 +442,7 @@ export default {
 
           chartOption = getGaugeChartOption({
             title: chartKey,
-            value: 75,
+            value: currentChartData["effcRt"],
             isDarkMode: this.isDarkMode,
             backgroundRadius: 89,
           });
diff --git a/pages/ems/effc/EqpmIndMntrPage.vue b/pages/ems/effc/EqpmIndMntrPage.vue
index 0c00d5e..45a448c 100644
--- a/pages/ems/effc/EqpmIndMntrPage.vue
+++ b/pages/ems/effc/EqpmIndMntrPage.vue
@@ -613,20 +613,34 @@ export default {
         apiKey = "selectMonthlyEnrgUseMainIdx";
         apiKey2 = "selectMonthlyEnrgUseMainIdxPageTotal";
       }
-      var res = await this.postApiReturn({
-        apiKey: apiKey,
-        resKey: "eqpmIndMntrData",
-        sendParam: params,
-      });
 
-      var res2 = await this.postApiReturn({
-        apiKey: apiKey2,
-        resKey: "eqpmIndMntrPageTotal",
-        sendParam: params,
-      });
+      
+      var [res, res2] = await Promise.all([
+        this.postApiReturn({
+          apiKey: apiKey,
+          resKey: "eqpmIndMntrData",
+          sendParam: params,
+        }),
+        this.postApiReturn({
+          apiKey: apiKey2,
+          resKey: "eqpmIndMntrPageTotal",
+          sendParam: params,
+        }),
+      ]);
+
+      // var res = await this.postApiReturn({
+      //   apiKey: apiKey,
+      //   resKey: "eqpmIndMntrData",
+      //   sendParam: params,
+      // });
+
+      // var res2 = await this.postApiReturn({
+      //   apiKey: apiKey2,
+      //   resKey: "eqpmIndMntrPageTotal",
+      //   sendParam: params,
+      // });
 
       this.totalCount = res2[0].totalcount;
-
       this.enrgUseMainIdxDesc = await this.postApiReturn({
         apiKey: "selectEnrgUseMainIdxDesc",
         resKey: "eqpmIndMntrData",
@@ -642,14 +656,12 @@ export default {
           no: i + 1,
         });
       }
-
       this.setGridData({
         gridKey: this.gridName,
         value: newRes,
       });
 
       this.loadGrid = true;
-
       this.makeTooltip();
     },
     async search() {
-- 
2.50.1.windows.1