updatecode

Reviewed-on: #79

assets/scss/common.scss

@@ -1,5 +1,17 @@
 // router-tab (header)
+@import "./var.scss";
 @import "./mixin.scss";
+@import "./common/fonts.scss";
+@import "./common/text.scss";
+@import "./common/input.scss";
+@import "./common/button.scss";
+@import "./common/grid.scss";
+@import "./common/card.scss";
+@import "./common/tabs.scss";
+@import "./common/numericInput.scss";
+@import "./common/pagination.scss";
+@import "./common/editor.scss";
+
 
 html,
 body {
@@ -227,7 +239,8 @@ a {
 
     .ant-checkbox-disabled .ant-checkbox-inner
     {
-      background-color: #f5f5f5 !important;
+      background-color: map-deep-get($config, #{$theme}, "ant-checkbox-disabled-bg") !important;
+      border: map-deep-get($config, #{$theme}, "ant-checkbox-disabled-border") !important;
     }
 
     .v-list-item__title {
@@ -322,6 +335,74 @@ a {
       }
     }
 
+    .router-tab {
+      .router-tab__header {
+        background-color: map-deep-get($config, #{$theme}, "router-header");
+        border-color: map-deep-get($config, #{$theme}, "router-header");
+        height: 46px;
+        z-index: 7;
+        max-width: calc(100vw - 290px);
+      }
+
+      .router-tab__container {
+        background-color: map-deep-get($config, #{$theme}, "router-container");
+      }
+
+      .router-tab__item {
+        background-color: map-deep-get($config, #{$theme}, "router-tab-item");
+        border-color: map-deep-get($config, #{$theme}, "router-tab-item");
+        color: map-deep-get($config, #{$theme}, "router-tab-item-color");
+
+        &:not(.is-active) {
+          &:hover {
+            &>span {
+              color: map-deep-get($config,
+                #{$theme},
+                "router-tab-item-hover-color"
+              );
+            }
+          }
+        }
+
+        .v-icon {
+          color: map-deep-get($config, #{$theme}, "router-tab-item-icon-color");
+        }
+
+        &.is-active {
+          background-color: map-deep-get($config,
+            #{$theme},
+            "router-tab-item-active"
+          );
+          border-color: map-deep-get($config,
+            #{$theme},
+            "router-tab-item-active-color"
+          ) !important;
+          color: map-deep-get($config,
+            #{$theme},
+            "router-tab-item-active-color"
+          );
+
+          .v-icon {
+            color: map-deep-get($config,
+              #{$theme},
+              "router-tab-item-icon-active-color"
+            );
+          }
+
+        }
+      }
+
+      .router-tab__slot-end {
+        .v-btn {
+          background-color: map-deep-get($config,
+            #{$theme},
+            "router-tab-slot-end-button-backgroundColor"
+          );
+          box-shadow: none;
+        }
+      }
+    }
+
     .border-bottom-1 {
       border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color");
     }

assets/scss/common/grid.scss

@@ -145,6 +145,44 @@
   }
 }
 
+.tui-grid-editor-select-box-layer {
+  min-width: 116px !important;
+
+  .tui-select-box-input {
+    border-radius: 6px;
+  }
+
+  .tui-select-box-dropdown {
+    margin-top: 1px;
+    border-radius: 4px;
+    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 {
+      margin-bottom: 4px;
+      position: relative;
+
+      &:before {
+        bottom: 0;
+        content: '';
+        left: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: 0
+      }
+
+      &:hover {
+        &::before {
+          opacity: 0.04
+        }
+      }
+
+    }
+  }
+}
+
 .treeGrid {
   .tui-grid {
     &-header-area {
@@ -756,6 +794,142 @@
             }
           }
         }
+
+        select {
+          &.selectbox {
+            background: map-deep-get($config,
+              #{$theme},
+              "tui-grid-cell-backgroundColor"
+            );
+            border-color:map-deep-get($config,
+              #{$theme},
+              "v-input-fieldset-color"
+            );
+            color: map-deep-get($config,
+              #{$theme},
+              "tui-grid-cell-color"
+            );
+
+            .calendarOption {
+              background: map-deep-get($config,
+                #{$theme},
+                "tui-grid-cell-backgroundColor"
+              );
+              border-color:map-deep-get($config,
+                #{$theme},
+                "v-input-fieldset-color"
+              );
+              color: map-deep-get($config,
+                #{$theme},
+                "tui-grid-cell-color"
+              );
+
+              &:hover {
+                background: #d9d9d9;
+                color: map-deep-get($config,
+                  #{$theme},
+                  "tui-grid-cell-color"
+                );
+              }
+
+              &:checked {
+                background: #E6F4FF;
+                color: map-deep-get($config,
+                  #{$theme},
+                  "tui-grid-cell-color"
+                );
+              }
+            }
+          }
+        }
+
+      }
+    }
+
+    .tui-grid-editor-select-box-layer {
+
+      .tui-select-box-input {
+        background: map-deep-get($config,
+          #{$theme},
+          "tui-grid-cell-backgroundColor"
+        );
+        border-color:map-deep-get($config,
+          #{$theme},
+          "v-input-fieldset-color"
+        );
+        color: map-deep-get($config,
+          #{$theme},
+          "tui-grid-cell-color"
+        );
+
+      }
+
+      .tui-select-box-dropdown {
+        background-color: map-deep-get($config,
+          #{$theme},
+          "tui-datepicker-backgroundColor"
+        );
+        border: 1px solid map-deep-get($config, #{$theme}, "tui-datepicker-border-color");
+        color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
+
+        .tui-select-box-item {
+
+          color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
+
+          &:before {
+            opacity: map-deep-get($config,
+              #{$theme},
+              "selected-bg-opacity"
+            );
+          }
+        }
+
+
+        .tui-select-box-highlight {
+          background:none !important;
+          &:before {
+            background: map-deep-get($config,
+              #{$theme},
+              "tui-grid-cell-color"
+            );
+            opacity: map-deep-get($config,
+              #{$theme},
+              "highlighted-bg-opacity"
+            );
+          }
+
+        }
+
+        .tui-select-box-selected {
+          background: map-deep-get($config,
+            #{$theme},
+            "v-treeview-node-label-active-bg"
+          );
+          color: map-deep-get($config,
+            #{$theme},
+            "tui-grid-cell-color"
+          );
+
+          &:before {
+            // opacity: map-deep-get($config,
+            //   #{$theme},
+            //   "selected-bg-opacity"
+            // );
+            background: map-deep-get($config,
+              #{$theme},
+              "ant-btn-primary-bg"
+            ) !important;
+
+
+            opacity: map-deep-get($config,
+              #{$theme},
+              "selected-bg-opacity"
+            ) !important;
+
+          }
+
+        }
+
       }
     }
 

assets/scss/common/pagination.scss

@@ -10,13 +10,25 @@
       margin-top: 10px;
     }
 
+    .ant-pagination-disabled {
+      color: map-deep-get($config, #{$theme}, "paging-disable") !important;;
+      cursor: not-allowed !important;
+      pointer-events: none; /* disables hover and click */
+      background-color: transparent;
+    }
+
+    .ant-pagination-disabled:hover {
+      color: map-deep-get($config, #{$theme}, "paging-disable") !important;;
+      background-color: transparent !important;
+    }
+
     .ant-pagination-item,
     .ant-pagination-prev,
     .ant-pagination-next {
       // border: none !important;
       // box-shadow: none !important;
       background-color: map-deep-get($config, #{$theme}, "paging-background") !important;
-      color: map-deep-get($config, #{$theme}, "paging-text") !important;
+      color: map-deep-get($config, #{$theme}, "paging-text");
       border: none;
 
       .ant-pagination-item-link {

assets/scss/layout.scss

@@ -182,7 +182,6 @@
       height: calc(100vh - 110px);
       max-height: calc(100vh - 115px);
       padding: 20px;
-      background-color: transparent !important;
     }
 
     .router-tab__slot-end {
@@ -437,70 +436,6 @@
         }
       }
 
-      .router-tab {
-        .router-tab__header {
-          background-color: map-deep-get($config, #{$theme}, "router-header");
-          border-color: map-deep-get($config, #{$theme}, "router-header");
-          height: 46px;
-          z-index: 7;
-          max-width: calc(100vw - 290px);
-        }
-  
-        .router-tab__item {
-          background-color: map-deep-get($config, #{$theme}, "router-tab-item");
-          border-color: map-deep-get($config, #{$theme}, "router-tab-item");
-          color: map-deep-get($config, #{$theme}, "router-tab-item-color");
-  
-          &:not(.is-active) {
-            &:hover {
-              &>span {
-                color: map-deep-get($config,
-                  #{$theme},
-                  "router-tab-item-hover-color"
-                );
-              }
-            }
-          }
-  
-          .v-icon {
-            color: map-deep-get($config, #{$theme}, "router-tab-item-icon-color");
-          }
-  
-          &.is-active {
-            background-color: map-deep-get($config,
-              #{$theme},
-              "router-tab-item-active"
-            );
-            border-color: map-deep-get($config,
-              #{$theme},
-              "router-tab-item-active-color"
-            ) !important;
-            color: map-deep-get($config,
-              #{$theme},
-              "router-tab-item-active-color"
-            );
-  
-            .v-icon {
-              color: map-deep-get($config,
-                #{$theme},
-                "router-tab-item-icon-active-color"
-              );
-            }
-  
-          }
-        }
-  
-        .router-tab__slot-end {
-          .v-btn {
-            background-color: map-deep-get($config,
-              #{$theme},
-              "router-tab-slot-end-button-backgroundColor"
-            );
-            box-shadow: none;
-          }
-        }
-      }
-
     }
   }
 }

assets/scss/theme.scss

@@ -1,3 +1,10 @@
+// @import './var.scss';
+// @import './functions.scss';
+// @import './mixin.scss';
+
+
+
+
 // @each $theme in dark, light{
 //   @include theme($theme);
 //   .v-application.#{$theme}-mode{

assets/scss/var.scss

@@ -184,7 +184,12 @@ $config: (
     ant-btn-popup-border: #424242,
     paging-background: #212224,
     paging-text: #FFFFFFD9,
+    paging-disable: #FFFFFF40,
     icon-datepicker-color: #FFFFFF73,
+    selected-bg-opacity: 0.32,
+    highlighted-bg-opacity: 0.08,
+    ant-checkbox-disabled-bg: #FFFFFF14,
+    ant-checkbox-disabled-border: #424242,
   ),
   light: (w-g5: $--color-gray_555,
     g5-w: $--color-white,
@@ -332,6 +337,11 @@ $config: (
     ant-btn-popup-border: #D9D9D9,
     paging-background: #FFFFFF,
     paging-text: #000000E0,
+    paging-disable: #00000040,
     icon-datepicker-color: #00000073,
+    selected-bg-opacity: 0.16,
+    highlighted-bg-opacity: 0.04,
+    ant-checkbox-disabled-bg: #0000000A,
+    ant-checkbox-disabled-border: #D9D9D9,
   ),
 );

components/common/AdminMenu.vue

@@ -112,6 +112,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import '@/assets/scss/var.scss';
 @each $theme in dark, light {
 	.v-application.#{$theme}-mode {
 		.mdi-account {

components/common/Calendar.vue

@@ -180,6 +180,8 @@ const myDetail = [];
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/scss/var.scss';
+@import '@/assets/scss/mixin.scss';
 
 ::-webkit-scrollbar {
 	width: 0px;

components/common/Datepicker.vue

@@ -431,6 +431,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+// @import "@/assets/scss/datepicker.scss";
+
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;

components/common/DatepickerTimeSelectBox.vue

@@ -539,6 +539,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import "@/assets/scss/datepicker.scss";
 
 ::v-deep {
   .tui-timepicker-row {

components/common/DatepickerTopView.vue

@@ -405,6 +405,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import "@/assets/scss/datepicker.scss";
+
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;

components/common/DatepickerWidget.vue

@@ -355,6 +355,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import "@/assets/scss/datepicker.scss";
+
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;

components/common/PastRsltDatePicker.vue

@@ -317,6 +317,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import "@/assets/scss/datepicker.scss";
+
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;

components/common/modal/ElecPowChrgPop.vue

@@ -683,6 +683,7 @@ const myColumns = [
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/scss/var.scss';
 @each $theme in dark, light {
 	.v-application.#{$theme}-mode {
 		.tui-grid {

components/common/modal/EnrgEffcEqpmDetailPop.vue

@@ -408,6 +408,7 @@ var eqpmDetlPop = {
 // 전력량 요금(원/kWh)
 </script>
 <style lang="scss" scoped>
+// @import '@/assets/scss/common/grid.scss';
 .tui-grid-scrollbar-left-bottom {
 	display: none !important;
 }

components/common/modal/EnrgEffcGdIdxDetPop.vue

@@ -329,6 +329,7 @@ var gdIdxDetPop = {
 // 전력량 요금(원/kWh)
 </script>
 <style lang="scss" scoped>
+// @import '@/assets/scss/common/grid.scss';
 .tui-grid-scrollbar-left-bottom {
   display: none !important;
 }

components/common/modal/EvtObjPop.vue

@@ -12,7 +12,7 @@
 				readonly
 				v-model="selectValue"
 				append-icon="mdi-magnify"
-				class="v-input__custom"
+				:class="['v-select__custom', customClass]"
 				@click="dialogOpenCloseEvent(dialog)"
 				outlined
 				:hide-details="true"

layouts/default.vue

@@ -149,6 +149,151 @@
                   <v-icon size="20" class="ml-2" v-if="closable" @click.stop="onCloseTab(to)">mdi-close</v-icon>
                 </template>
                 <template #end v-if="false">
+                  <v-menu offset-y>
+                    <template v-slot:activator="{ on, attrs }">
+                      <!-- <v-btn :ripple="false" tile class="btn-close" v-bind="attrs" v-on="on">
+                        <span class="body-2">닫기</span>
+                        <v-icon size="20">mdi-chevron-down</v-icon>
+                      </v-btn> -->
+                      <a-button style="width: 80px; height: 36px" class="btn-close">
+                        <span class="body-2">닫기</span>
+                        <v-icon size="20">mdi-chevron-down</v-icon></a-button>
+                    </template>
+                    <v-list class="py-2 btn-close-menu-list" >
+                      <v-list-item class="px-2">
+                        <v-list-item-title @click="delAllTabsData()" class="body-2">전체 닫기</v-list-item-title>
+                      </v-list-item>
+                      <v-list-item class="px-2">
+                        <v-list-item-title @click="deleteSblingsTab()" class="body-2">나머지 닫기</v-list-item-title>
+                      </v-list-item>
+                    </v-list>
+                  </v-menu>
+                  <v-menu offset-y>
+                    <template v-slot:activator="{ on, attrs }">
+                      <!-- <v-btn
+                        :ripple="false"
+                        tile
+                        class="btn-close"
+                        v-bind="attrs"
+                        v-on="on"
+                        style="width: 100px"
+                      >
+                        <span class="body-2">즐겨찾기</span>
+                        <v-icon size="20">mdi-chevron-down</v-icon>
+                      </v-btn> -->
+                      <a-button style="width: 100px; height: 36px" class="btn-close">
+                        <span class="body-2">즐겨찾기</span>
+                        <v-icon size="20">mdi-chevron-down</v-icon></a-button>
+                    </template>
+                    <v-list v-if="myMenuList.length > 0" class="py-2 btn-close-menu-list" >
+                      <v-list-item v-for="item in myMenuList" :key="item.menuId" class="px-2" style="cursor: pointer">
+                        <v-list-item-title @click="moveToMyMenu(item.url, item.menuId, item.prgmId)" class="body-2">{{
+                          item.menuNm
+                        }}</v-list-item-title>
+                      </v-list-item>
+                    </v-list>
+                  </v-menu>
+                  <a-button id="refresh" :style="{
+                    padding: '0',
+                    width: '36px',
+                    height: '36px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: '4px', // square corners
+                  }" type="text" @click="removeBookMark" v-if="bookmarkBtn == 1">
+                    <span class="material-icons" style="font-size: 17px; vertical-align: middle">star</span>
+                  </a-button>
+                  <a-button id="refresh" :style="{
+                    padding: '0',
+                    width: '36px',
+                    height: '36px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: '4px', // square corners
+                  }" type="text" @click="addBookMark" v-if="bookmarkBtn == 0">
+                    <span class="material-icons" style="font-size: 17px; vertical-align: middle">star_border</span>
+                  </a-button>
+                  <v-btn style="
+                      background-color: white;
+                      color: #fff;
+                      border: 0.2px solid rgb(217, 217, 217);
+                    " id="refresh" icon tile :ripple="false" @click="refreshTab()">
+                    <v-icon style="color: rgba(0, 0, 0, 0.54)">mdi-refresh</v-icon>
+                  </v-btn>
+                  <v-btn style="
+                      background-color: white;
+                      color: #fff;
+                      border: 0.2px solid rgb(217, 217, 217);
+                    " icon tile :ripple="false" @click="toggle()">
+                    <v-icon style="color: rgba(0, 0, 0, 0.54)" v-if="!fullscreen">mdi-arrow-expand-all</v-icon>
+                    <v-icon style="color: rgba(0, 0, 0, 0.54)" v-else>mdi-arrow-collapse-all</v-icon>
+                  </v-btn>
+                  <!-- <v-btn
+                    icon
+                    tile
+                    :ripple="false"
+                    @click="removeBookMark()"
+                    v-if="bookmarkBtn == 1"
+                  >
+                    <span
+                      class="material-icons"
+                      style="font-size: 17px; vertical-align: middle"
+                      >star</span
+                    >
+                  </v-btn> -->
+                  <!-- <v-btn
+                    icon
+                    tile
+                    :ripple="false"
+                    @click="addBookMark()"
+                    v-if="bookmarkBtn == 0"
+                  >
+                    <span
+                      class="material-icons"
+                      style="font-size: 17px; vertical-align: middle"
+                      >star_border</span
+                    >
+                  </v-btn> -->
+                  <!-- <a-button
+                    id="refresh"
+                    :style="{
+                      padding: '0',
+                      width: '36px',
+                      height: '36px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      borderRadius: '4px', // square corners
+                    }"
+                    type="text"
+                    @click="refreshTab"
+                  >
+                    <v-icon >mdi-refresh</v-icon>
+                  </a-button> -->
+                  <!-- <a-button id="refresh" type="text" @click="setDrawer" class="icon-button">
+                        <i class="mdi mdi-crop-free" style="font-size: 20px"></i>  
+                  </a-button>
+                  <a-button type="text" @click="setDrawer" class="icon-button">
+                        <i class="mdi mdi-crop-free" style="font-size: 20px"></i>  
+                  </a-button> -->
+                  <!-- <a-button
+                    :style="{
+                      padding: '0',
+                      width: '36px',
+                      height: '36px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      borderRadius: '4px', // square corners
+                    }"
+                    type="text"
+                    @click="toggle"
+                  >
+                    <v-icon v-if="!fullscreen">mdi-arrow-expand-all</v-icon>  
+                    <v-icon v-else>mdi-arrow-collapse-all</v-icon>
+                  </a-button> -->
                 </template>
               </router-tab>
             </v-col>
@@ -701,4 +846,5 @@ export default {
 
 <style lang="scss" scoped>
 @import '@/assets/scss/layout.scss';
+
 </style>

nuxt.config.js

@@ -58,9 +58,9 @@ module.exports = {
 
 	// Modules: https://go.nuxtjs.dev/config-modules
 	modules: ['@nuxtjs/axios', '@nuxtjs/dayjs', '@nuxtjs/style-resources' ],
-	// styleResources: {
+	styleResources: {
-	// 	scss: ['./assets/scss/*.scss'],
+		scss: ['./assets/scss/*.scss'],
-	// },
+	},
 	proxy: {
 	  "/api/": {
 	    target: "http://0.0.0.0:9999/",

pages/comm/base/BatchLogMngPage.vue

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

pages/comm/base/CalendarMngPage.vue

@@ -261,18 +261,18 @@ export default {
 					formatter({ value }) {
 						return value == 1 ? '휴일' : '평일';
 					},
-					editor: {
-						type: CustomSelectBoxEditor,
-					},
 					// editor: {
-					// 	type: 'select',
+					// 	type: CustomSelectBoxEditor,
-					// 	options: {
-					// 		listItems: [
-					// 			{ text: '휴일', value: '1' },
-					// 			{ text: '평일', value: '0' },
-					// 		],
-					// 	},
 					// },
+					editor: {
+						type: 'select',
+						options: {
+							listItems: [
+								{ text: '휴일', value: '1' },
+								{ text: '평일', value: '0' },
+							],
+						},
+					},
 				},
 				{ header: '휴일명', name: 'hldyNm', editor: 'text' },
 			];
@@ -482,6 +482,8 @@ const defaultData = {
 		height: 100%;
 		padding: 0;
 		margin: 0;
+		border: 1px solid;
+		border-radius: 6px;
 	}
 
 	select.selectbox {
@@ -510,10 +512,8 @@ const defaultData = {
 		/* 네이티브 외형 감추기 */
 		-moz-appearance: auto;
 		appearance: auto;
-		background: #fff;
+		border: 1px solid;
-		border: 1px solid #d9d9d9;
 		border-radius: 6px;
-		color: rgba(0,0,0,0.87843);
 	}
 
 	.tui-grid-layer-editing {

pages/ems/base/AddInfoMngPage.vue

@@ -626,3 +626,6 @@ const myDetail = [
 	},
 ];
 </script>
+<style lang="scss">
+@import '@/assets/scss/common.scss';
+</style>

pages/ems/base/DashboardPage.vue

@@ -635,15 +635,15 @@ export default {
       this.setChart04Data(chart04Dat);
 
       let chartOption2 = getLineChartOption({
-            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_02].xAxisData,
+            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_02].xAxis.data,
-            seriesData: this.$store.state.pageData[myPrgmId][this.chart_02].seriesData,
+            seriesData: this.$store.state.pageData[myPrgmId][this.chart_02].series,
             isDarkMode: this.isDarkMode,
           });
       this.$store.state.pageData[myPrgmId][this.chart_02] = chartOption2
 
       let chartOption5 = getLineChartOption({
-            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_05].xAxisData,
+            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_05].xAxis.data,
-            seriesData: this.$store.state.pageData[myPrgmId][this.chart_05].seriesData,
+            seriesData: this.$store.state.pageData[myPrgmId][this.chart_05].series,
             isDarkMode: this.isDarkMode,
           });
       this.$store.state.pageData[myPrgmId][this.chart_05] = chartOption5
@@ -754,7 +754,7 @@ export default {
     changeGrid: async function (pageNum, limit) {
       this.page = pageNum;
       this.limit = limit;
-      await this.getGridData();
+      await this.getGridData(true);
     },
     async search() {
       await new Promise((resolve) => setTimeout(resolve, 1500));
@@ -766,7 +766,7 @@ export default {
         await this.getTodayEfficiencyStatus();
         await this.getTodayNgTopTen();
         await this.getCompareEqpmTGdChart();
-        await this.getGridData();
+        await this.getGridData(false);
       }
     },
     async gridInit() {
@@ -944,8 +944,13 @@ export default {
       this.loadGrid = true;
       // this.getGridData();
     },
-    async getGridData() {
+    async getGridData(isPaging) {
-      this.loadGrid = false;
+
+      // Do not hide grid when trigger paging function
+      if (!isPaging) {
+          this.loadGrid = false; 
+      }
+
       // Get total records of grid
       const totalRes =  await this.postApiReturn({
         apiKey: "selectIssueGdIdxDataPageTotal",

pages/ems/base/EnrgCostCenterMngPage.vue

@@ -1028,4 +1028,4 @@ const myDetail = [
 		value: { '1': true, '0': false },
 	},
 ];
-</script>
+</script>

pages/ems/base/GdIdxMngPage.vue

@@ -41,7 +41,7 @@
 					<div class="h100 px-4" style="height:calc(100% - 70px)">
 						<div ref="gridParent" style="height: 26%">
 							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
-								:parentPrgmId="myPrgmId" @getRowsData="getRowData" :dataPath="dataPathExample" />
+								:parentPrgmId="myPrgmId" @getRowsData="getRowData" />
 						</div>
 						<div class="d-flex py-4 mt-4">
 							<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"

pages/ems/base/GdStndMngPage.vue

@@ -210,62 +210,6 @@ export default {
 			selectValueList02: [],
 			selectValue03: null,
 			selectValueList03: [],
-			// dataPathExample: {
-			// 	"rowGrid": {
-			// 		data: [
-
-			// 			{
-			// 				eqpmId: 'EQ001',
-			// 				originEqpmId: 'ORIG001',
-			// 				eqpmNm: '냉각기 A',
-			// 				careStndVal: 75,
-			// 				warnStndVal: 90,
-			// 			},
-			// 			{
-			// 				eqpmId: 'EQ002',
-			// 				originEqpmId: 'ORIG002',
-			// 				eqpmNm: '펌프 B',
-			// 				careStndVal: 60,
-			// 				warnStndVal: 80,
-			// 			},
-			// 			{
-			// 				eqpmId: 'EQ003',
-			// 				originEqpmId: 'ORIG003',
-			// 				eqpmNm: '모터 C',
-			// 				careStndVal: 50,
-			// 				warnStndVal: 70,
-			// 			},
-			// 			{
-			// 				eqpmId: 'EQ004',
-			// 				originEqpmId: 'ORIG004',
-			// 				eqpmNm: '밸브 D',
-			// 				careStndVal: 65,
-			// 				warnStndVal: 85,
-			// 			},
-			// 			{
-			// 				eqpmId: 'EQ005',
-			// 				originEqpmId: 'ORIG005',
-			// 				eqpmNm: '컨트롤러 E',
-			// 				careStndVal: 55,
-			// 				warnStndVal: 75,
-			// 			},
-
-			// 		],
-			// 		column: [
-			// 			{ header: '설비', name: 'eqpmId', align: 'left' },
-			// 			{
-			// 				header: 'origin설비',
-			// 				name: 'originEqpmId',
-			// 				align: 'center',
-			// 				hidden: true,
-			// 			},
-			// 			{ header: '설비명', name: 'eqpmNm', align: 'left' },
-			// 			{ header: '주의기준', name: 'careStndVal', align: 'right' },
-			// 			{ header: '심각기준', name: 'warnStndVal', align: 'right' },
-			// 		]
-
-			// 	}
-			// }
 		};
 	},
 	computed: {

pages/ems/base/ReadObjectMngPage.vue

@@ -855,6 +855,7 @@ const myDetail = [
 ];
 </script>
 <style lang="scss" scoped>
+@import '@/assets/scss/common.scss';
 ::v-deep {
 	.tui-grid-layer-state {
 		top: 40px !important;

pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue

@@ -60,20 +60,21 @@
 			</v-col>
 		</v-row>
 		<v-row ref="contents" class="pt-3">
-			<v-col :cols="12" >
+			<v-col :cols="12" style="height: 100%">
-				<v-card class="pb-5">
+				<v-card class="pb-3">
 					<div class="d-flex align-center justify-space-between pa-4">
 						<v-card-title class="pa-0">설비별 현황 리스트</v-card-title>
 					</div>
-					<div class="px-4" >
+					<div class="px-4" style="height:calc(100% - 120px)">
 						<div ref="gridParent" class="w100 h100 enrg-effc">
 							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
 								:parentPrgmId="myPrgmId" :columnClickEventFlag="true" @columnClick="columnClick" />
-							<div class="d-flex align-center justify-center pa-5 pb-0" v-if="loadGrid && totalCount > 0">
+							
+						</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"
 									@loadData="changeGrid" />
 							</div>
-						</div>
 
 					</div>
 

pages/ems/effc/EnrgEffcTotSummPage.vue

@@ -411,3 +411,15 @@ const defaultData = {
   fromDt: Utility.setFormatDate(new Date(), "YYYYMMDD"), // 조회 시작일
 };
 </script>
+<style lang="scss" scoped>
+// @import "@/assets/scss/common.scss";
+
+// .echarts::v-deep > div > canvas:hover {
+//     cursor: pointer;
+// }
+// ::v-deep{
+// 	.echarts:hover > div:nth-child(1){
+// 		cursor:pointer !important;
+// 	}
+// }
+</style>

pages/ems/effc/EnrgUsePlanPage.vue

@@ -819,6 +819,8 @@ const defaultData = {
 };
 </script>
 <style lang="scss" scoped>
+// @import '@/assets/scss/common.scss';
+@import '@/assets/scss/var.scss';
 @each $theme in dark, light {
 	.v-application.#{$theme}-mode {
 		.tui-grid {

pages/ems/effc/EqpmIndMntrPage.vue

@@ -282,13 +282,13 @@ export default {
     changeGrid: async function (pageNum, limit) {
       this.page = pageNum;
       this.limit = limit;
-      this.search();
+      this.getGridData(true);
     },
     async init() {
       await this.getSelectValueList();
       await this.setQueryParams();
       this.gridInit();
-      await this.getGridData();
+      await this.getGridData(false);
 
       this.initedFlag = true;
     },
@@ -588,8 +588,10 @@ export default {
         value: columnList,
       });
     },
-    async getGridData() {
+    async getGridData(isPaging) {
-      this.loadGrid = false;
+      if(!isPaging) {
+        this.loadGrid = false;
+      }
       this.enrgUseMainIdxDesc = [];
       var apiKey = null;
       var apiKey2 = null;
@@ -651,7 +653,7 @@ export default {
       this.makeTooltip();
     },
     async search() {
-      await this.getGridData();
+      await this.getGridData(false);
     },
     async makeTooltip() {
       var gdIdxList = [

pages/ems/effc/TagTrndPage.vue

@@ -153,7 +153,7 @@
           <v-card class="pb-5 px-2">
             <div class="d-flex align-center justify-space-between">
               <v-card-title class="d-flex align-center justify-space-between pa-5">{{
-                "ICHEON.HVAC.EQP_HT_CH004.UT_HT_CH201.CHI_AMP_1A_PV"
+                'TAG를 선택해주세요'
               }}</v-card-title>
             </div>
             <div :ref="'chartParent' + 0" style="height: 100%; overflow: visible">
@@ -1214,6 +1214,7 @@ const defaultData = {
 };
 </script>
 <style lang="scss" scoped>
+@import "@/assets/scss/var.scss";
 
 ::v-deep {
   .datepicker-container {

pages/login/index.vue

@@ -200,6 +200,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import '@/assets/scss/var.scss';
+@import '@/assets/scss/mixin.scss';
 
 ::v-deep {
 	.v-avatar {