fix bug

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 {
@@ -219,18 +231,12 @@ a {
   .v-application.#{$theme}-mode {
     min-width: 1000px;
 
-    .ant-checkbox-wrapper.ant-checkbox-wraBapper-disabled,
+    .ant-checkbox-wrapper.ant-checkbox-wrapper-disabled,
     .ant-checkbox-disabled .ant-checkbox-input
     {
       cursor: default !important;
     }
 
-    .ant-checkbox-disabled .ant-checkbox-inner
-    {
-      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 {
       font-family: var(--desktop-normal-font-family, "Inter-Regular", sans-serif) !important;
     }
@@ -323,6 +329,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

@@ -10,14 +10,6 @@
   &-container {
     width: 100%;
     border-radius: 10px;
-
-    .tui-select-box-input {
-      p {
-        font-size: 14px;
-        font-family: inherit
-      }
-    }
-
   }
 
   &-content-area {
@@ -31,7 +23,6 @@
 
   &-no-scroll-y {
     .tui-grid-rside-area {
-
       .tui-grid-header-area,
       .tui-grid-summary-area {
         margin-right: 0 !important;
@@ -98,111 +89,14 @@
   }
 
   .tui-grid-cell {
-    input[type=checkbox] {
-      margin-top: 8px;
-      appearance: none;
-      -webkit-appearance: none;
-      width: 16px;
-      height: 16px;
-      border: 1px solid;
-      border-radius: 2px;
-      cursor: pointer;
-      position: relative;
-
-      &:checked {
-        &::after {
-          content: "";
-          position: absolute;
-          left: 5px;
-          top: 1px;
-          width: 5px;
-          height: 9px;
-          border: solid;
-          border-width: 0 2px 2px 0;
-          transform: rotate(45deg);
-        }
+    &:last-child {
+      input[type=checkbox] {
+        margin-top: 8px;
       }
     }
   }
 }
 
-.tui-grid-layer-editing {
-  input[type=checkbox] {
-    margin-top: 8px;
-    appearance: none;
-    -webkit-appearance: none;
-    width: 16px;
-    height: 16px;
-    border: 1px solid;
-    border-radius: 2px;
-    cursor: pointer;
-    position: relative;
-
-    &:checked {
-      &::after {
-        content: "";
-        position: absolute;
-        left: 5px;
-        top: 1px;
-        width: 5px;
-        height: 9px;
-        border: solid;
-        border-width: 0 2px 2px 0;
-        transform: rotate(45deg);
-      }
-    }
-  }
-}
-
-.tui-grid-editor-select-box-layer {
-  min-width: 116px !important;
-
-  .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 {
-    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 {
-      font-size: 14px;
-      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 {
@@ -267,35 +161,6 @@
             #{$theme},
             "tui-grid-cell-borderStyle-darkmode"
           );
-
-          input[type=checkbox] {
-            border-color: map-deep-get($config,
-              #{$theme},
-              "ant-checkbox-border"
-            );
-            background: map-deep-get($config,
-              #{$theme},
-              "ant-checkbox-bg"
-            );
-
-            &:checked {
-              background-color: map-deep-get($config,
-                #{$theme},
-                "ant-btn-primary-bg"
-              );
-              border-color: map-deep-get($config,
-                #{$theme},
-                "ant-btn-primary-bg"
-              );
-
-              &::after {
-                border-color: map-deep-get($config,
-                  #{$theme},
-                  "ant-checkbox-bg"
-                );
-              }
-            }
-          }
         }
       }
 
@@ -502,15 +367,6 @@
             //   "tui-grid-cell-insert-color"
             // );
           }
-
-          span {
-            &.custom-link {
-              color: map-deep-get($config,
-                #{$theme},
-                "router-tab-item-active-color"
-              );
-            }
-          }
         }
       }
 
@@ -697,7 +553,7 @@
       }
 
       &-tree-button-expand {
-        z-index: 7;
+        z-index: 9999;
 
         .tui-grid-btn-tree {
           i {
@@ -717,7 +573,7 @@
       }
 
       &-tree-button-collapse {
-        z-index: 7;
+        z-index: 9999;
 
         .tui-grid-btn-tree {
           i {
@@ -746,185 +602,6 @@
       &-frozen-border {
         background-color: transparent;
       }
-
-      &-layer-editing {
-        input[type=checkbox] {
-          border-color: map-deep-get($config,
-            #{$theme},
-            "ant-checkbox-border"
-          );
-          background: map-deep-get($config,
-            #{$theme},
-            "ant-checkbox-bg"
-          );
-
-          &:checked {
-            background-color: map-deep-get($config,
-              #{$theme},
-              "ant-btn-primary-bg"
-            );
-            border-color: map-deep-get($config,
-              #{$theme},
-              "ant-btn-primary-bg"
-            );
-
-            &::after {
-              border-color: map-deep-get($config,
-                #{$theme},
-                "ant-checkbox-bg"
-              );
-            }
-          }
-        }
-
-        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-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 {
-        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;
-
-          }
-
-        }
-
-      }
     }
 
     [class*="tui-grid-tree-wrapper"] {

assets/scss/common/input.scss

@@ -266,13 +266,6 @@ input[type="checkbox"] {
         }
       }
     }
-    .ant-checkbox-wrapper-disabled {
-      .ant-checkbox-inner {
-        &.ant-checkbox-inner::after {
-          border-color: map-deep-get($config, #{$theme}, "ant-checkbox-disabled-color") !important;
-        }
-      }
-    }
 
     .v-input-popup__custom {
       .v-input__slot {

assets/scss/common/pagination.scss

@@ -10,25 +10,13 @@
       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");
+      color: map-deep-get($config, #{$theme}, "paging-text") !important;
       border: none;
 
       .ant-pagination-item-link {

assets/scss/layout.scss

@@ -1,27 +1,18 @@
-.loading-container {
+.loading {
+  z-index: 99;
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  transform: translate(-50%, -50%);
   background-color: rgba(0, 0, 0, 0.4);
   //box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
 }
 
-.loading-img {
-  width: 64px;
-  height: 64px;
-  animation: spin 3s linear infinite;
-}
- 
-@keyframes spin {
-  100% {
-    transform: rotate(360deg);
-  }
+.v-spinner {
+  top: 50%;
+  left: 50%;
 }
 
 ::v-deep {
@@ -191,7 +182,6 @@
       height: calc(100vh - 110px);
       max-height: calc(100vh - 115px);
       padding: 20px;
-      background-color: transparent !important;
     }
 
     .router-tab__slot-end {
@@ -446,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,13 +184,7 @@ $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,
-    ant-checkbox-disabled-color: #FFFFFF40,
   ),
   light: (w-g5: $--color-gray_555,
     g5-w: $--color-white,
@@ -338,12 +332,6 @@ $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,
-    ant-checkbox-disabled-color: #00000040,
   ),
 );

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/Grid.vue

@@ -160,6 +160,7 @@ export default {
 	},
 	created() { },
 	async mounted() {
+		// console.log(this.dataPath);
 		if (this.gridName) {
 			this.gridInstance = this.$refs['tuigrid' + this.gridName];
 
@@ -173,8 +174,9 @@ export default {
 				this.gridScrollTop = e.target.scrollTop;
 				this.gridScrollLeft = e.target.scrollLeft;
 			});
-
-			if (!(this.scrollBody.scrollHeight > this.scrollBody.clientHeight)) {
+			if (this.scrollBody.scrollHeight > this.scrollBody.clientHeight) {
+				this.gridInstance.$el.getElementsByClassName('tui-grid-content-area')[0].classList.remove('tui-grid-no-scroll-y');
+			} else {
 				this.gridInstance.$el.getElementsByClassName('tui-grid-content-area')[0].classList.add('tui-grid-no-scroll-y');
 			}
 		}
@@ -271,9 +273,12 @@ export default {
 			});
 		},
 		focusChangeEvt(e) {
+			// console.log('focusChangeEvt1...')
 			if (this.preventFocusChangeEvent(e)) {
+				// console.log('prevent focusChangeEvt')
 				return;
 			}
+			// console.log('focusChangeEvt2...')
 			// cell 선택시 row 선택 method
 			if (e.rowKey > -1) {
 				this.$emit(
@@ -288,6 +293,7 @@ export default {
 			this.sendSelectedRowData(e.rowKey);
 		},
 		startEditing(e) {
+			// console.log('startEditing1...')
 			if (this.preventFocusChangeEvent(e)) {
 				return;
 			}
@@ -297,6 +303,7 @@ export default {
 				return;
 			}
 
+			// console.log('startEditing2...')
 			if (this.editorGrid && e.rowKey >= 0) {
 				this.editorStartKey = e.rowKey;
 				this.gridInstance.invoke('startEditing', e.rowKey, e.columnName, 'row-modify');
@@ -310,6 +317,7 @@ export default {
 			}
 		},
 		async editingFinish(e) {
+			// console.log("Editing END E::", e);
 			// editor 간 이동시 수정되는 문제 수정
 			// e.rowEditingFg: grid의 한 row를 한번에 수정할 시 각각의 cell 마다 click 이벤트가 발생하지 않아 this.editorStartKey값이 제대로 입력 되지 않는 경우를 대비하여 만든 Fg
 			if (this.editorGrid) {
@@ -332,6 +340,7 @@ export default {
 				rowKey: rowIdxKey,
 			};
 			const isBaseRow = this.isBaseDataRow(rowIdxKey);
+			// console.log("END E::", rowIdxKey, e);
 			const rowStat = this.gridInstance.invoke('getRow', rowIdxKey).rowStat;
 			if (rowStat == 'D') {
 				this.gridInstance.invoke(
@@ -512,7 +521,10 @@ export default {
 				return item.rowKey == data.rowKey;
 			});
 			let count = 0;
+			// console.log("dataKeyArr", dataKeyArr);
+			// console.log("selectedRowData", selectedRowData);
 			for (let i = 0; i < dataKeyArr.length; i++) {
+				// console.log(dataKeyArr[i], selectedRowData[dataKeyArr[i]], rowData[dataKeyArr[i]]);
 				if (selectedRowData[dataKeyArr[i]] == rowData[dataKeyArr[i]]) {
 					count++;
 				}
@@ -582,6 +594,7 @@ export default {
 					delete item.rowKey;
 					return item;
 				});
+			// console.log("dataArr::", dataArr, saveTargetRows);
 			return dataArr;
 		},
 		getData() {
@@ -594,6 +607,7 @@ export default {
 			return this.gridInstance.invoke('getCheckedRowKeys');
 		},
 		setCheck(list) {
+			// console.log("setCheck:: ", list);
 			list.map(item => this.gridInstance.invoke('check', item));
 		},
 		refreshLayout() {
@@ -603,11 +617,14 @@ export default {
 			// this.gridInstance.invoke('refreshLayout');
 		},
 		refreshGrid() {
+			// console.log("refreshLayout",this.$refs['tuigrid' + this.gridName])
 			var store = this.$refs['tuigrid' + this.gridName].gridInstance.store;
 			var containerEl = this.$refs['tuigrid' + this.gridName].$el;
 			// var containerEl = document.querySelector('.tui-grid-container')
 			var parentEl = containerEl.parentElement;
 
+			// console.log("---------DEBUG---containerEl: ",containerEl);
+			// console.log('---------DEBUG---parentEl: ', parentEl)
 			// 	function refreshLayout(store, containerEl, parentEl) {
 			var dimension = store.dimension;
 			var autoWidth = dimension.autoWidth, fitToParentHeight = dimension.fitToParentHeight;
@@ -620,6 +637,11 @@ export default {
 			this.setWidth(store, clientWidth, autoWidth);
 			// store.dimension.autoWidth = autoWidth;
 			// store.dimension.width = clientWidth;
+			// console.log("###",getComputedStyle(parentEl));
+			// console.log("fitToParentHeight : ",fitToParentHeight);
+			// console.log("parentEl : ",parentEl)
+			// console.log("parentEl.clientHeight" , parentEl.clientHeight)
+			// console.log("clientHeight : ",clientHeight);
 			if (parentEl && parentEl.clientHeight !== clientHeight) {
 				var _b = getComputedStyle(parentEl), paddingTop = _b.paddingTop, paddingBottom = _b.paddingBottom;
 				this.setHeight(store, parentEl.clientHeight - (parseFloat(paddingTop) + parseFloat(paddingBottom)));
@@ -627,20 +649,25 @@ export default {
 			// }
 		},
 		setOffsetTop(store, offsetTop) {
+			// console.log("---------DEBUG---setOffsetTop: ");
 			store.dimension.offsetTop = offsetTop;
 		},
 		setWidth(_a, width, autoWidth) {
+			// console.log("---------DEBUG---setWidth: ");
 			var dimension = _a.dimension;
 			dimension.autoWidth = autoWidth;
 			dimension.width = width;
 		},
 		setHeaderHeight(store, height) {
+			// console.log("---------DEBUG---setHeaderHeight: ");
 			store.dimension.headerHeight = height;
 		},
 		setOffsetLeft(store, offsetLeft) {
+			// console.log("---------DEBUG---setOffsetLeft: ");
 			store.dimension.offsetLeft = offsetLeft;
 		},
 		setHeight(_a, height) {
+			// console.log("---------DEBUG---setHeight: ");
 			var dimension = _a.dimension;
 			var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth;
 			dimension.bodyHeight = height - headerHeight - summaryHeight - tableBorderWidth;
@@ -669,6 +696,7 @@ export default {
 			});
 		},
 		// resetData() {
+		//   // console.log("resetData = ", this.tuigridProps.data);
 		//   this.$refs.tuigrid.invoke("resetData", this.tuigridProps.data);
 		// },
 	},

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/ThemeSwitch.vue

@@ -13,7 +13,6 @@ export default {
 	data() {
 		return {
 			mode: null,
-			// isLoading: false
 		};
 	},
 	computed: {
@@ -29,10 +28,11 @@ export default {
 			setThemeChange: 'setThemeChange',
 		}),
 		themeChange() {
-			// this.isLoading = true;
 			this.mode = !this.mode;
 			this.$vuetify.theme.isDark = this.mode;
 			this.setThemeChange(this.mode);
+			// console.log(this.mode)
+			// console.log(this.$vuetify.theme.isDark)
 		},
 	},
 };

components/common/chartoptions/GaugeChart.js

@@ -1,6 +1,5 @@
 // Gauge chart options
-export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97,
-    value = 0 }) {
+export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
     const colorRanges = isDarkMode
         ? [
             [60 / 160, '#49AA19'], // Dark Green
@@ -25,9 +24,6 @@ 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%',
@@ -113,7 +109,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: dynamicFontSize,
+                    fontSize: 30,
                     lineHeight: 25,
                     offsetCenter: [0, "60%"],
                     color: isDarkMode ? "#fff" : "#333333",
@@ -134,7 +130,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
                 },
                 data: [
                     {
-                        value: value,
+                        value: 16,
                         name: "에너지사용효율", // "Energy Usage Efficiency"
                     },
                 ],

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

@@ -8,22 +8,12 @@
 			</label>
 		</v-col>
 		<v-col :cols="option.textCols" class="py-0">
-			<v-text-field
-				readonly
-				v-model="selectValue"
-				append-icon="mdi-magnify"
-				:class="['v-select__custom', customClass]"
-				@click="dialogOpenCloseEvent(dialog)"
-				outlined
-				:hide-details="true"
-				:required="item.required || false"
-				:disabled="item.disabled || false"
-			>
-			<template v-slot:append>
-				<!-- Custom SVG icon -->
-				<v-icon>$icoSearch</v-icon>
-			</template>
-			</v-text-field>
+			<v-text-field readonly append-icon="" :class="['v-select__custom', customClass]" outlined :hide-details="true"
+				v-model="selectValue" @keyup.enter="typeEnterKey" @click="dialogOpenCloseEvent(dialog)" style="padding: 0;"
+				:required="item.required || false"><template v-slot:append>
+					<!-- Custom SVG icon -->
+					<v-icon>$icoSearch</v-icon>
+				</template></v-text-field>
 		</v-col>
 
 		<v-dialog v-model="dialog" scrollable width="1000px">

components/pages/ems/DataSetInfo/DataSetTagRelTab.vue

@@ -68,6 +68,18 @@ export default {
       loadGrid: false,
       gridName: 'rowDataSetTagRelGrid',
       detailDataSetTagList: myDataSetTagDetail,
+      dataPathMock: {
+        "rowDataSetTagRelGrid": {
+          column: [
+            { header: 'TAG ID', name: 'id', headerAlign: 'left' },
+            { header: 'TAG 명', name: 'name', headerAlign: 'left' },
+            { header: '모델 Data 구분', name: 'type', headerAlign: 'left' }
+          ],
+          data: dataPathDataExample,
+          defaultRow: dataPathDataExample,
+          option: {}
+        }
+      },
     };
   },
   computed: {

components/pages/ems/EccInfo/EccAddInfoTab.vue

@@ -112,10 +112,10 @@ export default {
 				bodyHeight: gridHeight,
 				minBodyHeight: gridHeight,
 				header: {
-					height: 37,
+					height: 28,
 				},
-				rowHeight: 37,
-				minRowHeight: 37,
+				rowHeight: 29,
+				minRowHeight: 29,
 				selectionUnit: 'row',
 				editingEvent: 'click',
 			};

components/pages/ems/EccInfo/EccIaoTab.vue

@@ -270,14 +270,12 @@ export default {
 		async getRowData(data, gridName) {
 			if (data.rowStat === 'I') {
 				this.detailList[0].disabled = false;
-				this.detailList[1].disabled = false;
 				this.detailList[2].disabled = false;
 				this.detailList[3].disabled = false;
 				this.detailList[4].disabled = false;
 				this.detailList[5].disabled = false;
 			} else {
 				this.detailList[0].disabled = true;
-				this.detailList[1].disabled = true;
 				this.detailList[2].disabled = true;
 				this.detailList[3].disabled = true;
 				this.detailList[4].disabled = true;
@@ -296,7 +294,6 @@ export default {
 				case 'add':
 					this.$refs[this.gridName].addRow();
 					this.detailList[0].disabled = false;
-					this.detailList[1].disabled = false;
 					this.detailList[2].disabled = false;
 					this.detailList[3].disabled = false;
 					this.detailList[4].disabled = false;
@@ -379,6 +376,7 @@ const myDetail = [
 	{
 		type: 'SelectBox',
 		label: '대상 유형',
+		disabled: false,
 		cols: 6,
 		class: 'pr-4 py-2 mt-1',
 		list: 'emMapDivList',
@@ -394,7 +392,6 @@ const myDetail = [
 	{
 		type: 'ReadPlcPop',
 		label: '대상 항목',
-		modalTitle:'대상 항목',
 		valueNm: 'objId',
 		disabled: true,
 		cols: 6,
@@ -403,7 +400,8 @@ const myDetail = [
 		bindNm: 'objNm',
 		labelCols: 12,
 		textCols: 12,
-		disableContent: true,
+		iconShow: true,
+		noText: true,
 		iconShow: true,
 	},
 	{
@@ -482,7 +480,6 @@ const myDetail = [
 		disabledFg: 'objKind',
 		labelCols: 12,
 		textCols: 12,
-		iconShow: true,
 	},
 	{
 		type: 'InputText',

components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue

@@ -205,8 +205,8 @@ export default {
 				header: {
 					height: 38,
 				},
-				rowHeight: 37,
-				minRowHeight: 37,
+				rowHeight: 29,
+				minRowHeight: 29,
 				selectionUnit: 'row',
 				editingEvent: 'click',
 			};
@@ -383,15 +383,5 @@ function numberFormatter({ value }) {
 		.tab-datepicker {
 			width: 64% !important;
 		}
-
-		.tui-grid-layer-state {
-			top: 40px !important;
-		}
-
-		.tui-grid-layer-selection,
-		.tui-grid-cell-content-editor{
-			height: 36px !important;
-			// border: none;
-		}
 	}
 </style>

layouts/default.vue

@@ -149,14 +149,160 @@
                   <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>
           </v-row>
         </v-container>
         <div v-if="loadingStackCnt > 0" class="loading-container">
-            <!-- <Fade-loader color="#717577" />   -->
-          <img class="loading-img" src="@/assets/images/loading.png" alt="Loading..." />
+          <div class="loading">
+            <Fade-loader />
+          </div>
         </div>
       </v-main>
     </fullscreen>
@@ -700,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: {
-	// 	scss: ['./assets/scss/*.scss'],
-	// },
+	styleResources: {
+		scss: ['./assets/scss/*.scss'],
+	},
 	proxy: {
 	  "/api/": {
 	    target: "http://0.0.0.0:9999/",

pages/comm/auth/RoleMngPage.vue

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

pages/comm/auth/UserRoleMngPage.vue

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

pages/comm/base/BatchLogMngPage.vue

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

pages/comm/base/CalendarMngPage.vue

@@ -41,7 +41,7 @@
 					<v-card-title>
 						<span class="custom-title-4">캘린더 미리보기</span>
 					</v-card-title>
-					<v-card-actions class="px-5 d-block">
+					<v-card-actions class="px-5 d-block" >
 						<Calendar :parentPrgmId="myPrgmId" :gridName="gridName" :headerVisible="false"
 							:showTitle="false" />
 					</v-card-actions>
@@ -261,18 +261,18 @@ export default {
 					formatter({ value }) {
 						return value == 1 ? '휴일' : '평일';
 					},
-					// editor: {
-					// 	type: CustomSelectBoxEditor,
-					// },
 					editor: {
-						type: 'select',
-						options: {
-							listItems: [
-								{ text: '휴일', value: '1' },
-								{ text: '평일', value: '0' },
-							],
-						},
+						type: CustomSelectBoxEditor,
 					},
+					// editor: {
+					// 	type: 'select',
+					// 	options: {
+					// 		listItems: [
+					// 			{ text: '휴일', value: '1' },
+					// 			{ text: '평일', value: '0' },
+					// 		],
+					// 	},
+					// },
 				},
 				{ header: '휴일명', name: 'hldyNm', editor: 'text' },
 			];
@@ -470,76 +470,71 @@ const defaultData = {
 };
 </script>
 <style lang="scss" scoped>
+.selectbox:focus {
+	outline: none;
+}
+
+.calendarOption {
+	box-sizing: border-box;
+	position: relative;
+	width: 100%;
+	height: 100%;
+	padding: 0;
+	margin: 0;
+}
+
+select.selectbox {
+	box-sizing: border-box;
+	position: relative;
+	width: 100%;
+	height: 100%;
+	/* 높이 초기화 */
+	padding: 0;
+	margin: 0;
+	line-height: normal;
+	/* line-height 초기화 */
+	font-family: inherit;
+	/* 폰트 상속 */
+	border: 0;
+	// opacity: 0;  /* 숨기기 */
+	// filter:alpha(opacity=0);  /* IE8 숨기기 */
+	// -webkit-appearance: none; /* 네이티브 외형 감추기 */
+	// -moz-appearance: none;
+	// appearance: none;
+	opacity: 1;
+	/* 숨기기 */
+	filter: alpha(opacity=1);
+	/* IE8 숨기기 */
+	-webkit-appearance: auto;
+	/* 네이티브 외형 감추기 */
+	-moz-appearance: auto;
+	appearance: auto;
+}
+
+.tui-grid-layer-editing {
+	position: absolute;
+	background: #fff;
+	// background-image: initial;
+	// background-position-x: initial;
+	// background-position-y: initial;
+	// background-size: initial;
+	// background-repeat-x: initial;
+	// background-repeat-y: initial;
+	// background-attachment: initial;
+	// background-origin: initial;
+	// background-clip: initial;
+	// background-color: rgb(255, 255, 255);
+	// z-index: 15;
+	padding: 0;
+	margin: 0;
+	/* border-style: solid; */
+	/* border-width: 1px; */
+	white-space: nowrap;
+	border-width: 0px;
+	// box-sizing: border-box;
+}
+
 ::v-deep {
-	.selectbox:focus {
-		outline: none;
-	}
-
-	.calendarOption {
-		box-sizing: border-box;
-		position: relative;
-		width: 100%;
-		height: 100%;
-		padding: 0;
-		margin: 0;
-		border: 1px solid;
-		border-radius: 6px;
-	}
-
-	select.selectbox {
-		box-sizing: border-box;
-		position: relative;
-		width: 100%;
-		height: 100%;
-		/* 높이 초기화 */
-		padding: 0;
-		margin: 0;
-		line-height: normal;
-		/* line-height 초기화 */
-		font-family: inherit;
-		/* 폰트 상속 */
-		border: 0;
-		// opacity: 0;  /* 숨기기 */
-		// filter:alpha(opacity=0);  /* IE8 숨기기 */
-		// -webkit-appearance: none; /* 네이티브 외형 감추기 */
-		// -moz-appearance: none;
-		// appearance: none;
-		opacity: 1;
-		/* 숨기기 */
-		filter: alpha(opacity=1);
-		/* IE8 숨기기 */
-		-webkit-appearance: auto;
-		/* 네이티브 외형 감추기 */
-		-moz-appearance: auto;
-		appearance: auto;
-		border: 1px solid;
-		border-radius: 6px;
-	}
-
-	.tui-grid-layer-editing {
-		position: absolute;
-		background: #fff;
-		// background-image: initial;
-		// background-position-x: initial;
-		// background-position-y: initial;
-		// background-size: initial;
-		// background-repeat-x: initial;
-		// background-repeat-y: initial;
-		// background-attachment: initial;
-		// background-origin: initial;
-		// background-clip: initial;
-		// background-color: rgb(255, 255, 255);
-		// z-index: 15;
-		padding: 0;
-		margin: 0;
-		/* border-style: solid; */
-		/* border-width: 1px; */
-		white-space: nowrap;
-		border-width: 0px;
-		// box-sizing: border-box;
-	}
-
-
 	.custom-vc-calender {
 		.vc-header {
 			display: none;

pages/comm/base/NoticeMngPage.vue

@@ -509,7 +509,7 @@ export default {
 			this.loadGrid = false;
 
 			const res = await this.postApiReturn({
-				apiKey: 'selectPostPage',
+				apiKey: 'selectPostData',
 				resKey: 'postPage',
 				sendParam: params,
 			});

pages/comm/base/PrgmMngPage.vue

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

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].xAxis.data,
-            seriesData: this.$store.state.pageData[myPrgmId][this.chart_02].series,
+            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_02].xAxisData,
+            seriesData: this.$store.state.pageData[myPrgmId][this.chart_02].seriesData,
             isDarkMode: this.isDarkMode,
           });
       this.$store.state.pageData[myPrgmId][this.chart_02] = chartOption2
 
       let chartOption5 = getLineChartOption({
-            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_05].xAxis.data,
-            seriesData: this.$store.state.pageData[myPrgmId][this.chart_05].series,
+            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_05].xAxisData,
+            seriesData: this.$store.state.pageData[myPrgmId][this.chart_05].seriesData,
             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(true);
+      await this.getGridData();
     },
     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(false);
+        await this.getGridData();
       }
     },
     async gridInit() {
@@ -944,13 +944,8 @@ export default {
       this.loadGrid = true;
       // this.getGridData();
     },
-    async getGridData(isPaging) {
-
-      // Do not hide grid when trigger paging function
-      if (!isPaging) {
-          this.loadGrid = false; 
-      }
-
+    async getGridData() {
+      this.loadGrid = false;
       // Get total records of grid
       const totalRes =  await this.postApiReturn({
         apiKey: "selectIssueGdIdxDataPageTotal",
@@ -1386,9 +1381,6 @@ export default {
           textStyle: {
             color: this.isDarkMode ? "#fff" : "#333333",
           },
-          itemStyle: {        
-            borderWidth: 0
-          }
         },
         series: seriesData,
       };

pages/ems/base/EnrgCostCenterMngPage.vue

@@ -1028,11 +1028,4 @@ const myDetail = [
 		value: { '1': true, '0': false },
 	},
 ];
-</script>
-<style lang="scss" scoped>
-	::v-deep{
-		.tui-grid-layer-state{
-			top: 40px !important;
-		}
-	}
-</style>
+</script>

pages/ems/base/EquipmentMasterMngPage.vue

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

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" />
+								:parentPrgmId="myPrgmId" @getRowsData="getRowData" :dataPath="dataPathExample" />
 						</div>
 						<div class="d-flex py-4 mt-4">
 							<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"

pages/ems/base/GdStndMngPage.vue

@@ -210,6 +210,62 @@ 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/PastRsltDataReadPage.vue

@@ -12,7 +12,7 @@
 						</v-col>
 						<v-col :cols="3">
 							<component :is="'EvtObjPop'" :parentPrgmId="myPrgmId" :item="evtObjPopItem"
-								class="no-gutters" customClass="select-large" />
+								class="no-gutters" customClass="select-large pa-0" />
 						</v-col>
 						<v-col :cols="3">
 							<!-- 대상일 -->

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/base/ReadResultCloseMngPage.vue

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

pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue

@@ -61,23 +61,16 @@
 		</v-row>
 		<v-row ref="contents" class="pt-3">
 			<v-col :cols="12" style="height: 100%">
-				<v-card class="pb-3">
+				<v-card class="pb-5">
 					<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" style="height:calc(100% - 120px)">
-						<div ref="gridParent" class="w100 h100 enrg-effc">
+					<div class="px-4" style="height:calc(100% - 76px)">
+						<div ref="gridParent" class="w100 h100">
 							<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"
-								@loadData="changeGrid" />
-						</div>
-
 					</div>
-
 				</v-card>
 			</v-col>
 		</v-row>
@@ -99,7 +92,6 @@ import Datepicker from '~/components/common/Datepicker';
 import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
 import EnrgEffcEqpmDetailPop from '~/components/common/modal/EnrgEffcEqpmDetailPop';
 import EnrgEffcGdIdxDetPop from '~/components/common/modal/EnrgEffcGdIdxDetPop';
-import pagination from '~/components/common/Pagination';
 
 let myTitle;
 let myPrgmId;
@@ -132,7 +124,6 @@ export default {
 		EnrgEffcEqpmDetailPop,
 		EqpmSelectPop,
 		EnrgEffcGdIdxDetPop,
-		pagination
 	},
 	data() {
 		return {
@@ -158,12 +149,7 @@ export default {
 			eqpmGrpFlag: false,
 			eqpmGdIdxFlag: false,
 			fabFlag: false,
-			itemsPerPage: 10,
-			itemsPerPageArray: [10, 20, 30],
-			limit: 20,
-			page: 1,
 			routeData: {},
-			totalCount: 0,
 		};
 	},
 	computed: {
@@ -391,7 +377,6 @@ export default {
 				resKey: 'eqpmKindCodeLists',
 				sendParam: {},
 			});
-
 			if (res.length > 0) {
 				this.selectValueList01 = await res.map(item => {
 					return {
@@ -589,39 +574,6 @@ 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',
@@ -666,13 +618,7 @@ export default {
 				{
 					header: '가이드명',
 					name: 'gdIdxNm',
-					width: 250,
-					renderer: {
-						type: CustomButton,
-						options: {
-							value: "보기",
-						}
-					},
+					width: 200,
 				},
 				{
 					header: '주의',
@@ -707,12 +653,6 @@ export default {
 					name: 'ngCnt',
 					align: 'right',
 					width: 80,
-					renderer: {
-						type: CustomButton,
-						options: {
-							value: "보기",
-						}
-					},
 				},
 			];
 
@@ -740,29 +680,9 @@ export default {
 					fabId: this.selectValue02,
 					eqpmKindId: this.selectValue01,
 					okFg: this.selectValue06,
-					limit: this.limit,
-					page: this.page,
-					offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
 				},
 			});
 
-			const res2 = await this.postApiReturn({
-				apiKey: 'selectEnrgEffcEqpmDetlMntrPageTotal',
-				resKey: 'eqpmDetlDataPageTotal',
-				sendParam: {
-					eqpmId: this.selectValue04.eqpmId,
-					eqpmGrpId: this.selectValue03,
-					fromDt: this.pageData.fromDt,
-					toDt: this.pageData.toDt,
-					gdIdxId: this.selectValue05,
-					fabId: this.selectValue02,
-					eqpmKindId: this.selectValue01,
-					okFg: this.selectValue06,
-				},
-			});
-
-			this.totalCount = res2[0]?.totalcount;
-
 			this.setGridData({
 				gridKey: this.gridName,
 				value: res,
@@ -802,12 +722,6 @@ export default {
 				});
 			}
 		},
-		changeGrid: async function (pageNum, limit) {
-			this.page = pageNum;
-			this.limit = limit;
-
-			this.search();
-		},
 	},
 };
 

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

@@ -854,6 +854,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/EnrgUseTotSummPage.vue

@@ -442,7 +442,7 @@ export default {
 
           chartOption = getGaugeChartOption({
             title: chartKey,
-            value: currentChartData["effcRt"],
+            value: 75,
             isDarkMode: this.isDarkMode,
             backgroundRadius: 89,
           });

pages/ems/effc/EqpmIndMntrPage.vue

@@ -282,13 +282,13 @@ export default {
     changeGrid: async function (pageNum, limit) {
       this.page = pageNum;
       this.limit = limit;
-      this.getGridData(true);
+      this.search();
     },
     async init() {
       await this.getSelectValueList();
       await this.setQueryParams();
       this.gridInit();
-      await this.getGridData(false);
+      await this.getGridData();
 
       this.initedFlag = true;
     },
@@ -588,10 +588,8 @@ export default {
         value: columnList,
       });
     },
-    async getGridData(isPaging) {
-      if(!isPaging) {
-        this.loadGrid = false;
-      }
+    async getGridData() {
+      this.loadGrid = false;
       this.enrgUseMainIdxDesc = [];
       var apiKey = null;
       var apiKey2 = null;
@@ -613,34 +611,20 @@ export default {
         apiKey = "selectMonthlyEnrgUseMainIdx";
         apiKey2 = "selectMonthlyEnrgUseMainIdxPageTotal";
       }
+      var res = await this.postApiReturn({
+        apiKey: apiKey,
+        resKey: "eqpmIndMntrData",
+        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,
-      // });
+      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",
@@ -656,16 +640,18 @@ export default {
           no: i + 1,
         });
       }
+
       this.setGridData({
         gridKey: this.gridName,
         value: newRes,
       });
 
       this.loadGrid = true;
+
       this.makeTooltip();
     },
     async search() {
-      await this.getGridData(false);
+      await this.getGridData();
     },
     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">{{
-                'TAG를 선택해주세요'
+                "ICHEON.HVAC.EQP_HT_CH004.UT_HT_CH201.CHI_AMP_1A_PV"
               }}</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 {

store/modules/list.js

@@ -514,7 +514,7 @@ const INIT_URL_STATE = {
 
 	// prgmId: "PRG0003" 공지사항
 	selectPostList: 'comm/base/NoticeMngCtr/selectPostList',
-	selectPostPage: 'comm/base/NoticeMngCtr/selectPostPage',
+	selectPostData: 'comm/base/NoticeMngCtr/selectPostData',
 	selectPostPageTotal: 'comm/base/NoticeMngCtr/selectPostPageTotal',
 	deletePostList: 'comm/base/NoticeMngCtr/deletePost',
 
@@ -947,8 +947,6 @@ const INIT_URL_STATE = {
 	//prgmId : PRG0084 설비별 운전가이드
 	selectEqpmCodeList: 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEqpmCodeList',
 	selectEnrgEffcEqpmDetlMntr:'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcEqpmDetlMntr',
-	selectEnrgEffcEqpmDetlMntrPageTotal:
-		'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcEqpmDetlMntrPageTotal', // 일일검침정보
 	selectEqpmDetailPop: 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEqpmDetailPop',
 	selectEnrgEffcGdIdxDetPop : 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcGdIdxDetPop',