update code

Reviewed-on: #84

assets/scss/common/grid.scss

@@ -10,6 +10,14 @@
   &-container {
     width: 100%;
     border-radius: 10px;
+
+    .tui-select-box-input {
+      p {
+        font-size: 14px;
+        font-family: inherit
+      }
+    }
+
   }
 
   &-content-area {
@@ -23,6 +31,7 @@
 
   &-no-scroll-y {
     .tui-grid-rside-area {
+
       .tui-grid-header-area,
       .tui-grid-summary-area {
         margin-right: 0 !important;
@@ -150,6 +159,15 @@
 
   .tui-select-box-input {
     border-radius: 6px;
+
+    .tui-select-box-icon {
+      width: 14px;
+      height: 14px;
+
+      background-repeat: no-repeat;
+      background-size: contain;
+      margin-top: -20px;
+    }
   }
 
   .tui-select-box-dropdown {
@@ -158,7 +176,9 @@
     padding: 4px;
     box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
 
+
     .tui-select-box-item {
+      font-size: 14px;
       margin-bottom: 4px;
       position: relative;
 
@@ -204,44 +224,6 @@
   @include theme($theme);
 
   .v-application.#{$theme}-mode {
-    .enrg-effc {
-      .tui-grid-rside-area {
-        .tui-grid-table {
-          tr {
-
-            td:nth-child(4),
-            td:nth-child(10) {
-              .tui-grid-cell-content {
-                color: map-deep-get($config,
-                  #{$theme},
-                  "router-tab-item-active-color"
-                );
-              }
-            }
-          }
-
-          .tui-grid {
-
-            &-row-odd,
-            &-row-even {
-              &:hover {
-
-                >td:nth-child(4),
-                td:nth-child(10) {
-                  .tui-grid-cell-content {
-                    color: map-deep-get($config,
-                      #{$theme},
-                      "router-tab-item-active-color"
-                    );
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
     .tui-grid-content-area {
       .tui-grid-header-area {
         height: auto !important;
@@ -715,7 +697,7 @@
       }
 
       &-tree-button-expand {
-        z-index: 9999;
+        z-index: 7;
 
         .tui-grid-btn-tree {
           i {
@@ -735,7 +717,7 @@
       }
 
       &-tree-button-collapse {
-        z-index: 9999;
+        z-index: 7;
 
         .tui-grid-btn-tree {
           i {
@@ -862,6 +844,17 @@
           "tui-grid-cell-color"
         );
 
+        .tui-select-box-icon {
+
+          @if $theme ==dark {
+            background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba(255%2C%20255%2C%20255%2C%200.45)%22%20d%3D%22M1.90728%203.65546L8.20371%2012.3358C8.43228%2012.6501%208.90014%2012.6501%209.12692%2012.3358L15.4251%203.65546C15.4406%203.63411%2015.4499%203.60889%2015.452%203.58259C15.454%203.55628%2015.4487%203.52993%2015.4367%203.50644C15.4247%203.48296%2015.4064%203.46326%2015.3839%203.44954C15.3613%203.43581%2015.3354%203.42859%2015.3091%203.42868H13.9698C13.8787%203.42868%2013.793%203.47332%2013.7394%203.54653L8.66621%2010.5394L3.593%203.54653C3.53942%203.47332%203.45371%203.42868%203.36264%203.42868H2.02335C1.90728%203.42868%201.83943%203.56082%201.90728%203.65546Z%22/%3E%3C/svg%3E");
+          }
+
+          @else {
+            background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba(0%2C%200%2C%200%2C%200.45)%22%20d%3D%22M1.90728%203.65546L8.20371%2012.3358C8.43228%2012.6501%208.90014%2012.6501%209.12692%2012.3358L15.4251%203.65546C15.4406%203.63411%2015.4499%203.60889%2015.452%203.58259C15.454%203.55628%2015.4487%203.52993%2015.4367%203.50644C15.4247%203.48296%2015.4064%203.46326%2015.3839%203.44954C15.3613%203.43581%2015.3354%203.42859%2015.3091%203.42868H13.9698C13.8787%203.42868%2013.793%203.47332%2013.7394%203.54653L8.66621%2010.5394L3.593%203.54653C3.53942%203.47332%203.45371%203.42868%203.36264%203.42868H2.02335C1.90728%203.42868%201.83943%203.56082%201.90728%203.65546Z%22/%3E%3C/svg%3E");
+          }
+        }
+
       }
 
       .tui-select-box-dropdown {
@@ -886,7 +879,8 @@
 
 
         .tui-select-box-highlight {
-          background:none !important;
+          background: none !important;
+
           &:before {
             background: map-deep-get($config,
               #{$theme},

assets/scss/layout.scss

@@ -1,18 +1,27 @@
-.loading {
+.loading-container {
-  z-index: 99;
   position: fixed;
-  top: 50%;
+  top: 0;
-  left: 50%;
+  left: 0;
-  width: 100%;
+  width: 100vw;
-  height: 100%;
+  height: 100vh;
-  transform: translate(-50%, -50%);
+  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 {
+.loading-img {
-  top: 50%;
+  width: 64px;
-  left: 50%;
+  height: 64px;
+  animation: spin 3s linear infinite;
+}
+ 
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 ::v-deep {

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"
                     },
                 ],

layouts/default.vue

@@ -155,9 +155,8 @@
           </v-row>
         </v-container>
         <div v-if="loadingStackCnt > 0" class="loading-container">
-          <div class="loading">
+            <!-- <Fade-loader color="#717577" />   -->
-            <Fade-loader />
+          <img class="loading-img" src="@/assets/images/loading.png" alt="Loading..." />
-          </div>
         </div>
       </v-main>
     </fullscreen>

pages/comm/auth/RoleMngPage.vue

@@ -505,3 +505,10 @@ const myDetail = [
 	},
 ];
 </script>
+<style lang="scss" scoped>
+	::v-deep{
+		.tui-grid-layer-state{
+			top: 40px !important;
+		}
+	}
+</style>

pages/comm/auth/UserRoleMngPage.vue

@@ -1085,4 +1085,11 @@ function sha512(str) {
 		.update(str)
 		.digest('hex');
 }
-</script>
+</script>
+<style lang="scss" scoped>
+	::v-deep{
+		.tui-grid-layer-state{
+			top: 40px !important;
+		}
+	}
+</style> 

pages/comm/base/PrgmMngPage.vue

@@ -522,3 +522,10 @@ const myDetail = [
 	},
 ];
 </script>
+<style lang="scss" scoped>
+	::v-deep{
+		.tui-grid-layer-state{
+			top: 40px !important;
+		}
+	}
+</style> 

pages/ems/base/EnrgCostCenterMngPage.vue

@@ -1029,3 +1029,10 @@ const myDetail = [
 	},
 ];
 </script>
+<style lang="scss" scoped>
+	::v-deep{
+		.tui-grid-layer-state{
+			top: 40px !important;
+		}
+	}
+</style>

pages/ems/base/EquipmentMasterMngPage.vue

@@ -1005,3 +1005,10 @@ const dataPathDataExample = getPathDataExample({
 		field2: '2222',
 	});
 </script>
+<style lang="scss" scoped>
+	::v-deep{
+		.tui-grid-layer-state{
+			top: 40px !important;
+		}
+	}
+</style>

pages/ems/base/ReadResultCloseMngPage.vue

@@ -452,3 +452,10 @@ const myColumns = [
   },
 ];
 </script>
+<style lang="scss" scoped>
+	::v-deep{
+		.tui-grid-layer-state{
+			top: 40px !important;
+		}
+	}
+</style>

pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue

@@ -69,12 +69,12 @@
 						<div ref="gridParent" class="w100 h100 enrg-effc">
 							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
 								:parentPrgmId="myPrgmId" :columnClickEventFlag="true" @columnClick="columnClick" />
-							
+
 						</div>
 						<div class="d-flex align-center justify-center pa-5 pb-0" v-if="loadGrid && totalCount > 0">
-								<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
+							<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
-									@loadData="changeGrid" />
+								@loadData="changeGrid" />
-							</div>
+						</div>
 
 					</div>
 
@@ -589,6 +589,39 @@ export default {
 			});
 
 			const _this = this;
+			class CustomButton {
+				constructor(props) {
+					const { grid, rowKey, columnInfo } = props;
+
+					const gridData = grid.store.data.rawData;
+					const value = gridData[rowKey][columnInfo.name];
+
+					this.disabled = columnInfo.renderer.options.disabled || false;
+					const elDiv = document.createElement('div');
+					if (value != null) {
+						elDiv.innerHTML = `<span>${value}</span>`;
+						$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
+						const el2 = document.createElement('button');
+						$(el2).addClass('edit-btn blue--text');
+						el2.innerText = '보기';
+						elDiv.appendChild(el2);
+					} else {
+						elDiv.innerHTML = `<span></span>`;
+					}
+
+					this.el = elDiv;
+
+				}
+				getElement() {
+					return this.el;
+				}
+				getValue() {
+					// return this.el.value;
+				}
+				mounted() {
+					// this.el.focus();
+				}
+			}
 			const myColumns = [
 				{
 					header: 'FAB',
@@ -633,7 +666,13 @@ export default {
 				{
 					header: '가이드명',
 					name: 'gdIdxNm',
-					width: 200,
+					width: 250,
+					renderer: {
+						type: CustomButton,
+						options: {
+							value: "보기",
+						}
+					},
 				},
 				{
 					header: '주의',
@@ -668,6 +707,12 @@ export default {
 					name: 'ngCnt',
 					align: 'right',
 					width: 80,
+					renderer: {
+						type: CustomButton,
+						options: {
+							value: "보기",
+						}
+					},
 				},
 			];
 

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,
           });

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,
+      var [res, res2] = await Promise.all([
-        resKey: "eqpmIndMntrPageTotal",
+        this.postApiReturn({
-        sendParam: params,
+          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() {