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 @@