diff --git a/assets/images/loading.png b/assets/images/loading.png new file mode 100644 index 0000000..b430ae7 Binary files /dev/null and b/assets/images/loading.png differ 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 @@
-
- -
+ + Loading...
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() {