Merge pull request 'Update default pagination' (#93) from dev-nghiantt-fix-bugs into dev

Reviewed-on: #93

assets/images/SwapRight.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4369 8.15117L10.1947 5.30742C10.1538 5.25551 10.1017 5.21353 10.0423 5.18464C9.98285 5.15575 9.91764 5.14071 9.85156 5.14062H8.96562C8.87402 5.14062 8.82344 5.2459 8.87949 5.31836L10.8523 7.82031H2.57812C2.51797 7.82031 2.46875 7.86953 2.46875 7.92969V8.75C2.46875 8.81016 2.51797 8.85938 2.57812 8.85938H12.0924C12.4588 8.85938 12.6625 8.43828 12.4369 8.15117Z" fill="black" fill-opacity="0.45"/>
+</svg>

assets/images/SwapRight_Dark.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4369 8.15117L10.1947 5.30742C10.1538 5.25551 10.1017 5.21353 10.0423 5.18464C9.98285 5.15575 9.91764 5.14071 9.85156 5.14062H8.96562C8.87402 5.14062 8.82344 5.2459 8.87949 5.31836L10.8523 7.82031H2.57812C2.51797 7.82031 2.46875 7.86953 2.46875 7.92969V8.75C2.46875 8.81016 2.51797 8.85938 2.57812 8.85938H12.0924C12.4588 8.85938 12.6625 8.43828 12.4369 8.15117Z" fill="white" fill-opacity="0.45"/>
+</svg>

assets/scss/common.scss

@@ -1,17 +1,5 @@
 // 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 {
@@ -231,6 +219,41 @@ a {
   .v-application.#{$theme}-mode {
     min-width: 1000px;
 
+    .ant-checkbox-wrapper.ant-checkbox-wraBapper-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;
+    }
+
+    .btn-close-menu-list {
+      min-width: 100px;
+      border-color: transparent;
+      background-color: map-deep-get($config, #{$theme}, "btn-header-select-bg") !important;
+  
+      .v-list-item {
+        min-height: 30px;
+      }
+  
+      .v-list-item__title {
+        color: map-deep-get($config, #{$theme}, "btn-header-select-color") !important;
+  
+        &:hover {
+          color: #46c0ff !important;
+          cursor: pointer;
+        }
+      }
+    }
+
     .icon-datepicker-color {
       color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
     }
@@ -253,16 +276,12 @@ a {
       color: map-deep-get($config, #{$theme}, "v-select-label-color");
     }
 
-    // .header {
-    //   background-color: map-deep-get($config, #{$theme}, "header-backgroud");
-    //   border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-header-border");
-    // }
-
     .custom-chart{
       border: 1px solid map-deep-get($config, #{$theme}, "v-chart-border");
     }
 
     .v-icon {
+      color: currentColor;
       &.icon-orange {
         svg {
           fill:map-deep-get($config,
@@ -304,74 +323,6 @@ 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");
     }
@@ -574,6 +525,7 @@ a {
         & th,
         & td {
           height: 48px;
+          color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
         }
       }
 
@@ -811,6 +763,7 @@ a {
       font-size: 2rem;
       font-weight: bold;
       padding-left: 8px;
+      margin-top: 2px;
 
       img {
         width: 139px;
@@ -827,20 +780,11 @@ a {
   .btn-close-menu-list {
     min-width: 100px;
     border-color: transparent;
-    background-color: map-deep-get($config, #{$theme}, "btn-header-select-bg") !important;
 
     .v-list-item {
       min-height: 30px;
     }
 
-    .v-list-item__title {
-      color: map-deep-get($config, #{$theme}, "btn-header-select-color");
-
-      &:hover {
-        color: #46c0ff;
-      }
-    }
-
     .v-btn {
       background-color: transparent !important;
       color: map-deep-get($config, #{$theme}, "btn-header-select-color") !important;

assets/scss/common/grid.scss

@@ -10,6 +10,14 @@
   &-container {
     width: 100%;
     border-radius: 10px;
+
+    .tui-select-box-input {
+      p {
+        font-size: 14px;
+        font-family: inherit
+      }
+    }
+
   }
 
   &-content-area {
@@ -21,11 +29,21 @@
     display: none;
   }
 
+  &-no-scroll-y {
+    .tui-grid-rside-area {
+
+      .tui-grid-header-area,
+      .tui-grid-summary-area {
+        margin-right: 0 !important;
+      }
+    }
+  }
+
   &-rside-area {
 
     .tui-grid-header-area,
     .tui-grid-summary-area {
-      margin-right: $scrollbar-width;
+      margin-right: $scrollbar-width !important;
     }
   }
 
@@ -62,9 +80,11 @@
   }
 
 
+
 }
 
 .tui-grid-table {
+
   .tui-grid-cell-header,
   .tui-grid-cell-has-input .tui-grid-cell-content {
     padding: 8px;
@@ -76,6 +96,111 @@
     }
 
   }
+
+  .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);
+        }
+      }
+    }
+  }
+}
+
+.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 {
@@ -142,6 +267,35 @@
             #{$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"
+                );
+              }
+            }
+          }
         }
       }
 
@@ -155,6 +309,7 @@
         width: auto !important;
 
         .tui-grid-table-container {
+
           // width: 100% !important;
           .tui-grid-table {
             // width: 100% !important;
@@ -166,6 +321,13 @@
             // }
           }
         }
+
+        .tui-grid-layer-editing {
+          border-color: map-deep-get($config,
+            #{$theme},
+            "tui-grid-border-vertical-color"
+          );
+        }
       }
 
       &-summary-area,
@@ -285,6 +447,7 @@
               #{$theme},
               "ant-btn-primary-color"
             );
+
             .radio-mark {
               border-color: map-deep-get($config,
                 #{$theme},
@@ -294,6 +457,7 @@
                 #{$theme},
                 "arow-line-btn-bg-color"
               );
+
               &::after {
                 content: "";
                 position: absolute;
@@ -311,6 +475,43 @@
             }
           }
         }
+
+        .tui-grid-cell-content {
+
+          input[type='text'],
+          input[type='password'] {
+            border-color: map-deep-get($config,
+              #{$theme},
+              "v-input-fieldset-color"
+            );
+            background: map-deep-get($config,
+              #{$theme},
+              "v-input-backgroundColor"
+            );
+            border-radius: 4px;
+            color: map-deep-get($config,
+              #{$theme},
+              "tui-grid-cell-color"
+            );
+          }
+
+          &.tui-grid-layer-editing {
+            background: transparent;
+            // background:map-deep-get($config,
+            //   #{$theme},
+            //   "tui-grid-cell-insert-color"
+            // );
+          }
+
+          span {
+            &.custom-link {
+              color: map-deep-get($config,
+                #{$theme},
+                "router-tab-item-active-color"
+              );
+            }
+          }
+        }
       }
 
       &-cell {
@@ -358,7 +559,7 @@
       &-header-area {
         // background-color: none;
         border: none;
-        margin-right: 0 !important;
+        // margin-right: 0 !important;
         background-color: map-deep-get($config,
           #{$theme},
           "tui-grid-cell-backgroundColor"
@@ -395,14 +596,14 @@
           background-color: map-deep-get($config,
             #{$theme},
             "tui-grid-cell-insert-color"
-          );
+          ) !important;
         }
 
         &.row-modify {
           background-color: map-deep-get($config,
             #{$theme},
             "tui-grid-cell-modify-color"
-          );
+          ) !important;
         }
 
         &.row-removed {
@@ -496,7 +697,8 @@
       }
 
       &-tree-button-expand {
-        z-index: 9999;
+        z-index: 7;
+
         .tui-grid-btn-tree {
           i {
             width: 16px;
@@ -515,7 +717,8 @@
       }
 
       &-tree-button-collapse {
-        z-index: 9999;
+        z-index: 7;
+
         .tui-grid-btn-tree {
           i {
             width: 16px;
@@ -543,6 +746,185 @@
       &-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,6 +266,13 @@ 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

@@ -2,6 +2,29 @@
 
   // @include theme($theme);
   .v-application.#{$theme}-mode {
+    .pagination-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 12px 0;
+      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-ellipsis {
+      color: map-deep-get($config, #{$theme}, "paging-text") !important;
+    }
 
     .ant-pagination-item,
     .ant-pagination-prev,
@@ -9,8 +32,8 @@
       // 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;
-      border: 0.5px solid #424242;
+      color: map-deep-get($config, #{$theme}, "paging-text");
+      border: none;
 
       .ant-pagination-item-link {
         border: none;
@@ -19,13 +42,13 @@
     }
 
     .ant-pagination-item-active {
-      border-color: #1890ff !important;
+      border: 1px solid #1890ff !important;
       color: #1890ff !important
     }
 
     .ant-pagination-options-size-changer {
       .ant-select-selection {
-        border: 0.5px solid #424242;
+        border: 0.5px solid map-deep-get($config, #{$theme}, "v-input-fieldset-color") !important;
         background: map-deep-get($config, #{$theme}, "paging-background") !important;
         color: map-deep-get($config, #{$theme}, "paging-text") !important;
       }

assets/scss/layout.scss

@@ -1,18 +1,27 @@
-.loading {
-  z-index: 99;
+.loading-container {
   position: fixed;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  transform: translate(-50%, -50%);
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
   background-color: rgba(0, 0, 0, 0.4);
   //box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
 }
 
-.v-spinner {
-  top: 50%;
-  left: 50%;
+.loading-img {
+  width: 64px;
+  height: 64px;
+  animation: spin 3s linear infinite;
+}
+ 
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 ::v-deep {
@@ -79,6 +88,8 @@
             &>.v-treeview-node__root:before {
               border-radius: 6px;
               z-index: -1;
+              background-color: rgba(0, 0, 0, 0);
+              transition-duration: 0s;
             }
     
             &>.v-treeview-node__root:hover:before {
@@ -180,6 +191,7 @@
       height: calc(100vh - 110px);
       max-height: calc(100vh - 115px);
       padding: 20px;
+      background-color: transparent !important;
     }
 
     .router-tab__slot-end {
@@ -379,11 +391,6 @@
               .v-treeview-node__children {
                 .v-treeview-node {
                   >.v-treeview-node__root {
-                    .v-treeview-node__content {
-                      .v-treeview-node__label {
-                        color: map-deep-get($config, #{$theme}, "card-default-color");
-                      }
-                    }
                     
                     *:hover,
                     :hover {
@@ -391,9 +398,14 @@
                     }
   
                     &:hover {
+                      background-color: rgba(0, 0, 0, 0);
+                      
+                      &:before {
+                        opacity: 1 !important;
                         border: 1px solid  map-deep-get($config, #{$theme}, "v-input-textarea-border");
                         border-radius: 8px;
-                      background-color: rgba(0, 0, 0, 0);
+                      }
+
                       .v-treeview-node__content {
                         .v-treeview-node__label {
                           color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
@@ -418,6 +430,12 @@
                       }
                     }
   
+                    .v-treeview-node__content {
+                      .v-treeview-node__label {
+                        color: map-deep-get($config, #{$theme}, "card-default-color");
+                      }
+                    }
+
                   }
                 }
   
@@ -428,6 +446,70 @@
         }
       }
 
+      .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,10 +1,3 @@
-// @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

@@ -113,7 +113,7 @@ $config: (
     tui-grid-cell-color: #FFFFFFD9,
     tui-grid-cell-insert-color: #2B2111,
     tui-grid-cell-selected-color: #0A224F,
-    tui-grid-cell-modify-color: #13636c,
+    tui-grid-cell-modify-color: #2B2111,
     tui-grid-cell-removed-color: #2A1215,
     tui-grid-cell-disabled-color: rgb(170, 170, 170),
     tui-grid-cell-hover-backgroundColor: #2d4571,
@@ -184,7 +184,13 @@ $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,
@@ -263,7 +269,7 @@ $config: (
     tui-grid-cell-color: #000000E0,
     tui-grid-cell-insert-color: #FFFBE6,
     tui-grid-cell-selected-color: #E6F4FF,
-    tui-grid-cell-modify-color: #e6f5f7,
+    tui-grid-cell-modify-color: #FFFBE6,
     tui-grid-cell-removed-color: #FFF1F0,
     tui-grid-cell-hover-backgroundColor: #f5f5f5,
     v-tabs-items-border-color: #0000000F,
@@ -332,6 +338,12 @@ $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,7 +112,6 @@ 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,8 +180,6 @@ 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

@@ -23,14 +23,14 @@
 						<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
 					</template> -->
 					<template v-slot:append>
-						<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
+						<a-icon v-show="!isRange" class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
 					</template>
 					<template #append-outer>
 						<div ref="startpicker-container" id="startpicker-container"></div>
 					</template>
 				</v-text-field>
 				<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
-					<img :src="arrowIcon" alt="">
+					<img :src="arrowIcon">
 				</div>
 				<v-text-field
 					v-show="isRange"
@@ -43,7 +43,9 @@
 					outlined
 				>
 					<template #append>
-						<v-icon size="20">$icoCalendar</v-icon>
+						<div class="pr-1">
+							<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
+						</div>
 					</template>
 					<template #append-outer>
 						<div ref="endpicker-container" id="endpicker-container"></div>
@@ -212,9 +214,9 @@ export default {
 		},
 		arrowIcon() {
 			if(this.isDarkMode){
-				return require('@/assets/images/arrow_datepicker_dm.png');
+				return require('@/assets/images/SwapRight_Dark.svg');
 			}
-			return require('@/assets/images/arrow_datepicker.png');
+			return require('@/assets/images/SwapRight.svg');
 		}
 	},
 	watch: {
@@ -429,8 +431,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-// @import "@/assets/scss/datepicker.scss";
-
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;

components/common/DatepickerTimeSelectBox.vue

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

components/common/DatepickerTopView.vue

@@ -5,10 +5,7 @@
 				<!-- <v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
 					>mdi-record-circle</v-icon
 				> -->
-				<v-icon
-					small
-					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
-					>
+				<v-icon small :class="['mr-1', required ? 'icon-orange' : 'icon-blue']">
 					$icoBulletPoint
 				</v-icon>
 				{{ label }}
@@ -16,17 +13,11 @@
 		</v-col>
 		<v-col :cols="label ? textCols : ''">
 			<div class="datepicker-container">
-				<v-text-field
-					id="startpicker"
-					ref="startpicker"
-					v-model="fromDtValue"
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
-					:hide-details="true"
-					readonly
-					outlined
-				>
-					<template #append >
-						<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
+				<v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
+					outlined>
+					<template v-slot:append>
+						<a-icon v-show="!isRange" class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
 					</template>
 					<template #append-outer>
 						<div ref="startpicker-container" id="startpicker-container"></div>
@@ -36,18 +27,13 @@
 				<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">
 					<img :src="arrowIcon" alt="">
 				</div>
-				<v-text-field
-					v-show="isRange"
-					id="endpicker"
-					ref="endpicker"
-					v-model="toDtValue"
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
-					:hide-details="true"
-					readonly
-					outlined
-				>
+				<v-text-field v-show="isRange" id="endpicker" ref="endpicker" v-model="toDtValue"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
+					outlined>
 					<template #append>
-						<v-icon size="20">$icoCalendar</v-icon>
+						<div class="pr-1">
+							<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
+						</div>
 					</template>
 					<template #append-outer>
 						<div ref="endpicker-container" id="endpicker-container"></div>
@@ -183,7 +169,8 @@ export default {
 				toDt: Utility.setFormatDate(
 					this.searchParam.toDt,
 					this.myOptions.viewFormat,
-			)};
+				)
+			};
 		},
 		fromDtChange() {
 			return {
@@ -191,7 +178,8 @@ export default {
 				fromDt: Utility.setFormatDate(
 					this.searchParam.fromDt,
 					this.myOptions.viewFormat,
-			)};
+				)
+			};
 		},
 		defaultRange() {
 			return this.searchParam.defaultRange
@@ -206,9 +194,9 @@ export default {
 		},
 		arrowIcon() {
 			if (this.isDarkMode) {
-				return require('@/assets/images/arrow_datepicker_dm.png');
+				return require('@/assets/images/SwapRight_Dark.svg');
 			}
-			return require('@/assets/images/arrow_datepicker.png');
+			return require('@/assets/images/SwapRight.svg');
 		}
 	},
 	watch: {
@@ -417,13 +405,12 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "@/assets/scss/datepicker.scss";
-
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;
 		justify-content: space-around;
 		background-color: #edf4fc;
+
 		.tui-timepicker-column.tui-timepicker-colon {
 			color: #000 !important;
 		}

components/common/DatepickerWidget.vue

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

components/common/Grid.vue

@@ -160,7 +160,6 @@ export default {
 	},
 	created() { },
 	async mounted() {
-		// console.log(this.dataPath);
 		if (this.gridName) {
 			this.gridInstance = this.$refs['tuigrid' + this.gridName];
 
@@ -174,6 +173,11 @@ export default {
 				this.gridScrollTop = e.target.scrollTop;
 				this.gridScrollLeft = e.target.scrollLeft;
 			});
+			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');
+			}
 		}
 	},
 	methods: {
@@ -268,12 +272,9 @@ 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,7 +289,6 @@ export default {
 			this.sendSelectedRowData(e.rowKey);
 		},
 		startEditing(e) {
-			// console.log('startEditing1...')
 			if (this.preventFocusChangeEvent(e)) {
 				return;
 			}
@@ -298,10 +298,9 @@ export default {
 				return;
 			}
 
-			// console.log('startEditing2...')
 			if (this.editorGrid && e.rowKey >= 0) {
 				this.editorStartKey = e.rowKey;
-				this.gridInstance.invoke('startEditing', e.rowKey, e.columnName);
+				this.gridInstance.invoke('startEditing', e.rowKey, e.columnName, 'row-modify');
 				this.$emit(
 					'getRowsData',
 					this.gridInstance.invoke('getRow', e.rowKey),
@@ -312,7 +311,6 @@ export default {
 			}
 		},
 		async editingFinish(e) {
-			// console.log("Editing END E::", e);
 			// editor 간 이동시 수정되는 문제 수정
 			// e.rowEditingFg: grid의 한 row를 한번에 수정할 시 각각의 cell 마다 click 이벤트가 발생하지 않아 this.editorStartKey값이 제대로 입력 되지 않는 경우를 대비하여 만든 Fg
 			if (this.editorGrid) {
@@ -335,7 +333,6 @@ 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(
@@ -516,10 +513,7 @@ 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++;
 				}
@@ -589,7 +583,6 @@ export default {
 					delete item.rowKey;
 					return item;
 				});
-			// console.log("dataArr::", dataArr, saveTargetRows);
 			return dataArr;
 		},
 		getData() {
@@ -602,7 +595,6 @@ export default {
 			return this.gridInstance.invoke('getCheckedRowKeys');
 		},
 		setCheck(list) {
-			// console.log("setCheck:: ", list);
 			list.map(item => this.gridInstance.invoke('check', item));
 		},
 		refreshLayout() {
@@ -612,14 +604,11 @@ 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;
@@ -632,11 +621,6 @@ 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)));
@@ -644,25 +628,20 @@ 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;
@@ -691,7 +670,6 @@ export default {
 			});
 		},
 		// resetData() {
-		//   // console.log("resetData = ", this.tuigridProps.data);
 		//   this.$refs.tuigrid.invoke("resetData", this.tuigridProps.data);
 		// },
 	},

components/common/Pagination.vue

@@ -34,7 +34,7 @@ export default {
 		},
 		itemsPerPageArray: {
 			type: Array,
-			default: () => [20, 50, 100],
+			default: () => [10, 20, 50],
 		},
 	},
 	data() {

components/common/PastRsltDatePicker.vue

@@ -3,24 +3,18 @@
 		<v-col v-if="label" :cols="labelCols">
 			<label for="" class="search-box-label">
 				<v-icon small color="primary"
-				:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
-				>$icoBulletPoint</v-icon>
+					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
 				{{ label }}
 			</label>
 		</v-col>
 		<v-col :cols="label ? textCols : ''">
 			<div :class="['datepicker-container', customClass]">
-				<v-text-field
-					id="startpicker"
-					ref="startpicker"
-					v-model="fromDtValue"
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
-					:hide-details="true"
-					readonly
-					outlined
-				>
+				<v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
+					outlined>
 					<template #append>
-						<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
+						<a-icon class="v-icon" v-show="!isRange" type="calendar" style="width: 14px; height: 14px;" />
+						<!-- <v-icon size="20" v-show="!isRange">$icoCalendar</v-icon> -->
 					</template>
 					<template #append-outer>
 						<div ref="startpicker-container" id="startpicker-container"></div>
@@ -29,18 +23,13 @@
 				<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
 					<img :src="arrowIcon" alt="">
 				</div>
-				<v-text-field
-					v-show="isRange"
-					id="endpicker"
-					ref="endpicker"
-					v-model="toDtValue"
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
-					:hide-details="true"
-					readonly
-					outlined
-				>
+				<v-text-field v-show="isRange" id="endpicker" ref="endpicker" v-model="toDtValue"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
+					outlined>
 					<template #append>
-						<v-icon size="20">$icoCalendar</v-icon>
+						<div class="pr-1">
+							<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
+						</div>
 					</template>
 					<template #append-outer>
 						<div ref="endpicker-container" id="endpicker-container"></div>
@@ -69,6 +58,11 @@ export default {
 			require: false,
 			default: false,
 		},
+		required: {
+			type: Boolean,
+			require: false,
+			default: false,
+		},
 		labelCols: {
 			type: Number,
 			require: false,
@@ -98,6 +92,7 @@ export default {
 			searchParam(state) {
 				return state.pageData[this.parentPrgmId];
 			},
+			isDarkMode: "isDarkMode",
 		}),
 		myCmCycle() {
 			return this.searchParam.cmCycle;
@@ -139,9 +134,9 @@ export default {
 		},
 		arrowIcon() {
 			if (this.isDarkMode) {
-				return require('@/assets/images/arrow_datepicker_dm.png');
+				return require('@/assets/images/SwapRight_Dark.svg');
 			}
-			return require('@/assets/images/arrow_datepicker.png');
+			return require('@/assets/images/SwapRight.svg');
 		}
 	},
 	watch: {
@@ -327,13 +322,12 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "@/assets/scss/datepicker.scss";
-
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;
 		justify-content: space-around;
 		background-color: #edf4fc;
+
 		.tui-timepicker-column.tui-timepicker-colon {
 			color: #000 !important;
 		}

components/common/ThemeSwitch.vue

@@ -13,6 +13,7 @@ export default {
 	data() {
 		return {
 			mode: null,
+			// isLoading: false
 		};
 	},
 	computed: {
@@ -28,11 +29,10 @@ 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,16 +1,15 @@
 // Gauge chart options
-export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
+export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97,
+    value = 0 }) {
     const colorRanges = isDarkMode
         ? [
-            [0.375, '#49AA19'], // Dark Green
-            // [0.5, '#B8860B'],   // Dark Yellow
-            [0.625, '#D89614'], // Dark Orange
+            [60 / 160, '#49AA19'], // Dark Green
+            [100 / 160, '#D89614'], // Dark Orange
             [1, '#D32029'],     // Dark Red
         ]
         : [
-            [0.375, '#52C41A'], // Light Green
-            // [0.5, '#FFD700'],   // Light Yellow
-            [0.625, '#FAAD14'], // Light Orange
+            [60 / 160, '#52C41A'], // Light Green
+            [100 / 160, '#FAAD14'], // Light Orange
             [1, '#F5222D'],     // Light Red
         ];
     // Old color range
@@ -26,6 +25,9 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
     //     [0.8, "#f7931e"],
     //     [1.0, "#ed1c24"],
     // ];
+    
+    const valueLength = String(value).length;
+    const dynamicFontSize = valueLength >= 4 ? 21 : 30;
     return {
         grid: {
             // top: '-10%',
@@ -56,6 +58,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
                 endAngle: -45,
                 min: min,
                 max: max,
+                splitNumber: 8,
                 // progress: {
                 //   show: true,
                 //   width: 15,
@@ -110,7 +113,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
                     valueAnimation: true,
                     fontWeight: 500, // or "normal", "lighter", "bolder", or a number like 600
                     fontFamily: "Oxanium, sans-serif", // or any custom font
-                    fontSize: 30,
+                    fontSize: dynamicFontSize,
                     lineHeight: 25,
                     offsetCenter: [0, "60%"],
                     color: isDarkMode ? "#fff" : "#333333",
@@ -131,7 +134,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
                 },
                 data: [
                     {
-                        value: 16,
+                        value: value,
                         name: "에너지사용효율", // "Energy Usage Efficiency"
                     },
                 ],

components/common/chartoptions/LineChart.js

@@ -34,6 +34,8 @@ export default function getLineChartOption({
         legend: {
             // data: legendData,
             icon: 'circle',
+            itemWidth: 15, // Width of the legend icon
+            itemHeight: 15, 
             top: '0%',
             right: '5%',
             orient: 'horizontal',

components/common/modal/ElecPowChrgPop.vue

@@ -17,20 +17,24 @@
 				{{ item.label }}
 			</label>
 		</v-col>
-		<v-col :cols="label ? item.textCols : ''">
+		<v-col :cols="label ? item.textCols : ''" class="py-0">
 			<!-- <v-col :cols="label ? 9 : ''"> -->
 			<!-- :value="textfield" -->
 			<v-text-field
 				readonly
 				v-model="selectValue"
-				append-icon="mdi-magnify"
 				class="v-input__custom"
 				@click="dialog = !dialog"
 				outlined
 				:hide-details="true"
 				:disabled="item.disabled || false"
 				:required="item.required || false"
-			></v-text-field>
+			>
+			<template v-slot:append>
+				<!-- Custom SVG icon -->
+				<v-icon>$icoSearch</v-icon>
+			</template>
+			</v-text-field>
 		</v-col>
 
 		<!-- <v-row justify="center"> -->
@@ -679,7 +683,6 @@ 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,7 +408,6 @@ 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,7 +329,6 @@ 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/EqpmSelectPop.vue

@@ -2,17 +2,14 @@
 	<v-row class="search-box" align="center" no-gutters>
 		<v-col v-if="label" :cols="labelCols" class="mr-2">
 			<label for="" class="search-box-label">
-				<v-icon v-if="iconShow" small
-					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
+				<v-icon v-if="iconShow" small :class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
 				{{ label }}
 			</label>
 		</v-col>
 		<v-col :cols="textCols">
 			<v-text-field readonly v-model="selectValue" append-icon="" :class="['v-input__custom', customClass]"
 				@click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true" :required="required || false"
-				:disabled="disabled || false"
-				:placeholder="placeholder"
-				>
+				:disabled="disabled || false" :placeholder="placeholder">
 				<template v-slot:append>
 					<!-- Custom SVG icon -->
 					<v-icon>$icoSearch</v-icon>
@@ -31,15 +28,15 @@
 					<v-row align="end">
 						<v-col :cols="3.5">
 							<!-- 설비그룹 -->
-							<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01"
-								:label="'설비그룹'" :disabled="eqpmGrpDisabled" @update:propsValue="selectValue01 = $event"
-								:labelCols="12" :textCols="12" :iconShow="true" />
+							<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01" :label="'설비그룹'"
+								:disabled="eqpmGrpDisabled" @update:propsValue="selectValue01 = $event" :labelCols="12" :textCols="12"
+								:iconShow="true" />
 						</v-col>
 						<v-col>
 							<!-- FAB -->
-							<component :is="'SelectBoxMulti'" :propsValue="selectValue02" :itemList="selectValueList02"
-								:label="'FAB'" :labelCols="12" :multiple="true" :disabled="fabDisabled"
-								@update:propsValue="selectValue02 = $event" :textCols="12" :iconShow="true" />
+							<component :is="'SelectBoxMulti'" :propsValue="selectValue02" :itemList="selectValueList02" :label="'FAB'"
+								:labelCols="12" :multiple="true" :disabled="fabDisabled" @update:propsValue="selectValue02 = $event"
+								:textCols="12" :iconShow="true" />
 						</v-col>
 						<v-col>
 							<v-row>
@@ -86,15 +83,16 @@
 				</div>
 
 				<div class="pa-5" style="height:calc(100% - 30px)">
-					<div ref="modalGridParent" class="h100 w100">
+					<div ref="modalGridParent" :class="['h100', 'w100', isDarkMode ? 'dark-mode' : 'light-mode']">
 						<component :ref="gridName" :is="loadGrid ? 'Grid' : null"
-							:dataPath="searchParam.eqpmSelectPopData.eqpmSelectPop" :gridName="gridName"
-							:parentPrgmId="parentPrgmId" @getRowsData="getRowData" />
+							:dataPath="searchParam.eqpmSelectPopData.eqpmSelectPop" :gridName="gridName" :parentPrgmId="parentPrgmId"
+							@getRowsData="getRowData" />
 					</div>
 				</div>
 
 				<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
-					<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="mr-2">닫기</a-button>
+					<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)"
+						class="ant-btn-popup-default mr-2">닫기</a-button>
 					<a-button :ripple="false" type="primary" @click="setUpdate($event)">확인</a-button>
 				</v-card-actions>
 			</v-card>
@@ -247,6 +245,7 @@ export default {
 					eqpmKindId: data.eqpmKindId,
 				}
 			},
+			isDarkMode: "isDarkMode",
 		}),
 		selectValue: {
 			get() {
@@ -400,7 +399,6 @@ export default {
 				header: {
 					height: 'auto',
 				},
-				// rowHeaders:[{ type: 'checkbox' }],
 				rowHeight: 'auto',
 			};
 			if (this.isMulti) {
@@ -408,8 +406,6 @@ export default {
 				myOptions['rowHeight'] = 'auto';
 			}
 
-
-
 			this.setModalGridOption({
 				modalKey: this.myModalKey,
 				gridKey: this.gridName,
@@ -463,8 +459,6 @@ export default {
 				modalDataKey: this.modalDataKey,
 				value: myColumns,
 			});
-
-
 			// this.getRowGridData();
 		},
 		async getRowGridData() {
@@ -588,6 +582,35 @@ var eqpmSelectPop = {
 		overflow-y: hidden;
 	}
 
+	.tui-grid-lside-area {
+		.tui-grid-table {
+
+			.tui-grid-cell-header {
+				&.tui-grid-cell {
+					input[type=checkbox] {
+						margin-top: 0px;
+					}
+				}
+			}
+		}
+	}
 }
 
+@each $theme in dark, light {
+	@include theme($theme);
+
+	.#{$theme}-mode {
+		::v-deep {
+			.tui-grid-lside-area {
+				.tui-grid-table{
+					border-right: 1px solid map-deep-get($config,
+						#{$theme},
+						"tui-grid-border-vertical-color"
+					) !important;
+				}
+			}
+		}
+	}
+
+}
 </style>

components/common/modal/EvtObjPop.vue

@@ -8,12 +8,22 @@
 			</label>
 		</v-col>
 		<v-col :cols="option.textCols" class="py-0">
-			<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>
+			<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>
+			</template>
+			</v-text-field>
 		</v-col>
 
 		<v-dialog v-model="dialog" scrollable width="1000px">

components/common/modal/PlanPop.vue

@@ -238,7 +238,13 @@ export default {
 			type: Object,
 			require: false,
 			default: () => {
-				return {};
+				return {
+					selectTimeValue1: "00 : 00", // selectBoxTime에 필요한 prop
+					selectTimeValueList1: [], // selectBoxTime에 필요한 prop
+					selectTimeValue2: "01 : 00", // selectBoxTime에 필요한 prop
+					selectTimeValueList2: [], // selectBoxTime에 필요한 prop
+					minInterval: 10,
+				};
 			},
 		},
 	},

components/common/modal/ReadPlcPop.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-row class="search-box" align="center">
+	<v-row class="search-box" align="center" no-gutters>
 		<!-- <v-col v-if="label" cols="2"> -->
 		<v-col v-if="item.label" :cols="item.labelCols" class="py-0">
 			<label for="" class="search-box-label">

components/common/select/SelectBoxTime.vue

@@ -20,7 +20,7 @@
         item-value="value"
         solo
         outlined
-        :menu-props="{ auto: true, offsetY: true }"
+        :menu-props="{ top: false, offsetY: true }"
         :hide-details="true"
         :class="['v-select__custom', customClass]"
         :disabled="disabled"

components/icons/icoSend.vue

@@ -1,5 +1,5 @@
 <template>
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M15.4899 7.76897L0.552358 0.279682C0.491643 0.249325 0.422 0.242182 0.355929 0.258253C0.282599 0.276381 0.219441 0.322828 0.180282 0.387423C0.141124 0.452017 0.129156 0.529497 0.147 0.602896L1.68629 6.89218C1.7095 6.98682 1.77914 7.06361 1.872 7.09397L4.5095 7.99932L1.87379 8.90468C1.78093 8.93682 1.71129 9.01182 1.68986 9.10647L0.147 15.4047C0.130929 15.4708 0.138072 15.5404 0.168429 15.5993C0.238072 15.7404 0.4095 15.7975 0.552358 15.7279L15.4899 8.28147C15.5452 8.25468 15.5899 8.20825 15.6184 8.15468C15.6881 8.01182 15.6309 7.8404 15.4899 7.76897ZM1.90771 13.6154L2.80593 9.94397L8.07736 8.13504C8.11843 8.12075 8.15236 8.08861 8.16664 8.04575C8.19164 7.97075 8.15236 7.8904 8.07736 7.86361L2.80593 6.05647L1.91129 2.39932L13.1256 8.02254L1.90771 13.6154Z" fill="white"/>
+  <path d="M15.4899 7.76897L0.552358 0.279682C0.491643 0.249325 0.422 0.242182 0.355929 0.258253C0.282599 0.276381 0.219441 0.322828 0.180282 0.387423C0.141124 0.452017 0.129156 0.529497 0.147 0.602896L1.68629 6.89218C1.7095 6.98682 1.77914 7.06361 1.872 7.09397L4.5095 7.99932L1.87379 8.90468C1.78093 8.93682 1.71129 9.01182 1.68986 9.10647L0.147 15.4047C0.130929 15.4708 0.138072 15.5404 0.168429 15.5993C0.238072 15.7404 0.4095 15.7975 0.552358 15.7279L15.4899 8.28147C15.5452 8.25468 15.5899 8.20825 15.6184 8.15468C15.6881 8.01182 15.6309 7.8404 15.4899 7.76897ZM1.90771 13.6154L2.80593 9.94397L8.07736 8.13504C8.11843 8.12075 8.15236 8.08861 8.16664 8.04575C8.19164 7.97075 8.15236 7.8904 8.07736 7.86361L2.80593 6.05647L1.91129 2.39932L13.1256 8.02254L1.90771 13.6154Z" fill="currentColor"/>
 </svg>
 </template>

components/pages/ems/DataSetInfo/DataSetTagRelTab.vue

@@ -39,8 +39,6 @@
 import { mapState, mapMutations, mapActions } from 'vuex';
 import Buttons from '~/components/common/button/Buttons';
 import Grid from '~/components/common/Grid';
-import { CustomCheckbox } from '~/plugins/gridUtility';
-import { CustomNumberEditor } from '~/plugins/gridUtility';
 import Form from '~/components/common/form/Form';
 import mixinGlobal from '@/mixin/global.js';
 import Utility from '~/plugins/utility';
@@ -70,18 +68,6 @@ 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: {
@@ -175,7 +161,7 @@ export default {
           header: '사용여부',
           name: 'useFg',
           align: 'left',
-          width: 100,
+          minWidth: 80,
           formatter({ value }) {
             value = value === true ? '1' : '0';
             const newValue = _this.pageData.useFgList.filter(
@@ -190,7 +176,7 @@ export default {
           //   }
           // }
         },
-        { header: '비고', name: 'rmrk', align: 'left' },
+        { header: '비고', name: 'rmrk', align: 'left', minWidth: 50, },
       ];
 
       this.setGridColumn({
@@ -324,7 +310,7 @@ const myDataSetTagDetail = [
     valueNm: 'tagNm',
     disabled: false,
     cols: 6,
-    class: 'py-2 mt-2',
+    class: 'py-2 mt-1',
     required: true,
     labelCols: 12,
     textCols: 12,
@@ -350,12 +336,11 @@ const myDataSetTagDetail = [
     valueNm: 'useFg',
     disabled: false,
     cols: 5,
-    class: 'py-2 mt-2',
+    class: 'py-2 mt-1',
     value: { '1': true, '0': false },
     required: true,
     textCols: 12,
     iconShow: true,
-    // class: "d-flex align-end"
   },
   {
     type: 'TextArea',
@@ -369,23 +354,4 @@ const myDataSetTagDetail = [
     required: false,
   },
 ];
-
-
-const dataPathDataExample = [
-  {
-    id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
-    name: 'INCHEON 고온 냉동기 101호기 - 호로1',
-    type: '합계'
-  },
-  {
-    id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
-    name: 'INCHEON 고온 냉동기 101호기 - 호로1',
-    type: '합계'
-  },
-  {
-    id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
-    name: 'INCHEON 고온 냉동기 101호기 - 호로1',
-    type: '합계'
-  },
-];
 </script>

components/pages/ems/EccInfo/EccAddInfoTab.vue

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

components/pages/ems/EccInfo/EccIaoTab.vue

@@ -99,18 +99,16 @@ export default {
 		selectedObjId(val) {
 			if (val === 'TAG') {
 				this.detailList[1].class = 'd-none ';
-				this.detailList[2].class = 'd-block pl-4';
+				this.detailList[2].class = 'd-block pl-4 mt-2';
 				this.detailList[3].class = 'd-block';
+				this.detailList[4].class = 'pl-4 mt-2';
 			} else {
 				// }else if(val==="READ_PLC"){
+				this.detailList[4].class = 'pl-4 mt-2';
 				this.detailList[3].class = 'd-block';
 				this.detailList[2].class = 'd-none';
-				this.detailList[1].class = 'd-block pl-4';
+				this.detailList[1].class = 'd-block pl-4 mt-1 pb-0';
 			}
-			this.detailList[4].class = 'pl-4 mt-2';
-			
-			console.log(val)
-			console.log(this.detailList)
 		},
 	},
 	created() {},
@@ -272,12 +270,14 @@ 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,6 +296,7 @@ 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;
@@ -378,9 +379,8 @@ const myDetail = [
 	{
 		type: 'SelectBox',
 		label: '대상 유형',
-		disabled: false,
 		cols: 6,
-		class: 'pr-4',
+		class: 'pr-4 py-2 mt-1',
 		list: 'emMapDivList',
 		valueNm: 'objKind',
 		itemText: 'commCdNm',
@@ -394,16 +394,16 @@ const myDetail = [
 	{
 		type: 'ReadPlcPop',
 		label: '대상 항목',
+		modalTitle:'대상 항목',
 		valueNm: 'objId',
-		disabled: false,
+		disabled: true,
 		cols: 6,
 		class: 'pl-4 py-2',
 		required: true,
 		bindNm: 'objNm',
 		labelCols: 12,
 		textCols: 12,
-		iconShow: true,
-		noText: true,
+		disableContent: true,
 		iconShow: true,
 	},
 	{

components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue

@@ -6,7 +6,7 @@
 					<v-row>
 						<v-col :cols="8" style="padding:0px">
 							<!-- 조회기간 -->
-							<DatePicker :parentPrgmId="parentPrgmId" label="조회기간" />
+							<DatePicker :parentPrgmId="parentPrgmId" label="조회기간" customClass="tab-datepicker" />
 						</v-col>
 						<v-col cols="4" class="d-flex justify-end align-center">
 							<Buttons
@@ -21,9 +21,9 @@
 			</v-col>
 		</v-row>
 		<!-- Create the line between date picker and form -->
-		<v-row class="my-5" no-gutters>
+		<v-row class="mt-6 mb-7" no-gutters>
 			<v-col>
-				<div style="height: 1px; background-color: #ccc;"></div>
+				<div style="height: 1px; background-color: #0000000F;"></div>
 			</v-col>
 		</v-row>
 		<v-row class="search-box" align="center" no-gutters style="height: 44px;">
@@ -43,7 +43,7 @@
 				<div
 					ref="gridParent"
 					class="w100"
-					style="height: calc((100vh - 600px) / 2);"
+					style="height: calc((100vh - 500px) / 2);"
 				>
 					<Grid
 						:ref="gridName"
@@ -57,7 +57,7 @@
 				</div>
 			</v-col>
 		</v-row>
-		<v-row class="search-box" align="center" no-gutters style="height: 44px;">
+		<v-row class="search-box mt-2" align="center" no-gutters style="height: 44px;">
 			<v-col :cols="4">
 				<label for="" class="search-box-label">
 					<!-- <v-icon x-small color="primary" class="mr-1"
@@ -77,7 +77,7 @@
 				<div
 					ref="chartParent"
 					class="h100 w100"
-					style="height: calc((100vh - 600px) / 2  - 30px);"
+					style="height: calc((100vh - 500px) / 2);"
 				>
 					<component
 						class="w100 h100"
@@ -205,8 +205,8 @@ export default {
 				header: {
 					height: 38,
 				},
-				rowHeight: 29,
-				minRowHeight: 29,
+				rowHeight: 37,
+				minRowHeight: 37,
 				selectionUnit: 'row',
 				editingEvent: 'click',
 			};
@@ -378,3 +378,20 @@ function numberFormatter({ value }) {
 	return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 }
 </script>
+<style lang="scss" scoped>
+	::v-deep {
+		.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

@@ -104,7 +104,9 @@
                   :items="treevieItems" activatable hoverable color="#3896ff" open-on-click @update:open="openNode">
                   <template slot="label" slot-scope="{ item }">
                     <button :class="{ 'justify-center': miniVariant }" @mouseover="doMouseOver">
-                      
+                      <!-- <span v-if="['MNU0065', 'MNU0027'].includes(item.menuId)" >
+                        {{ item }}
+                      </span> -->
                       <v-icon 
                         v-if="item.lvl === 1 && menuIconKeys.includes(item.menuId)"
                         :class="{ 'mr-2': !miniVariant }" 
@@ -142,167 +144,25 @@
               </v-navigation-drawer>
             </div>
 
-            <v-col>
-              <router-tab ref="routerTab" :tabs="treevieItems" :keep-last-tab="false" :contextmenu="false">
+            <v-col :class="`${isDarkMode ? 'dark' : 'light'}`">
+              <router-tab ref="routerTab" 
+                :tabs="treevieItems" 
+                :keep-last-tab="false" 
+                :contextmenu="false"
+              >
                 <template slot-scope="{ title, closable, to, base }">
                   <span>{{ title }}</span>
                   <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">
-          <div class="loading">
-            <Fade-loader />
-          </div>
+            <!-- <Fade-loader color="#717577" />   -->
+          <img class="loading-img" src="@/assets/images/loading.png" alt="Loading..." />
         </div>
       </v-main>
     </fullscreen>
@@ -487,6 +347,12 @@ export default {
         //console.log("localPageData", this.pageData);
       },
     },
+    isDarkMode(){
+      this.loadingStackCnt = 1;
+      setTimeout(() => {
+        this.loadingStackCnt = 0;
+      }, 1000);
+    },
     // menuLink: {
     //   deep: true,
     //   handler() {
@@ -848,3 +714,15 @@ export default {
 @import '@/assets/scss/layout.scss';
 
 </style>
+
+<style lang="scss">
+.light .router-tab .router-tab__header {
+    background-color: #fff;
+    border-color: #fff;
+}
+
+.dark .router-tab .router-tab__header {
+    background-color: #212224;
+    border-color: #212224;
+}
+</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,3 +505,10 @@ const myDetail = [
 	},
 ];
 </script>
+<style lang="scss" scoped>
+	::v-deep{
+		.tui-grid-layer-state{
+			top: 40px !important;
+		}
+	}
+</style>

pages/comm/auth/UserRoleMngPage.vue

@@ -912,17 +912,6 @@ const myColumns = [
 ];
 
 const unAsgnRoleByUserColumns = [
-	{
-		header: '',
-		name: '',
-		align: 'center',
-		width: 50,
-		formatter: (props) => {
-			return `<label class="custom-radio">
-						<span class="radio-mark"></span>
-					</label>`;
-		}
-	},	
 	{ header: '역할ID', name: 'roleId', align: 'left' },
 	{ header: '역할명', name: 'roleNm' },
 	{ header: '적용시작일', name: 'aplyStartDt', hidden: true },
@@ -932,8 +921,7 @@ const unAsgnRoleByUserColumns = [
 ];
 
 const asgnRoleByUserColumns = [
-	
-	{ header: '역할ID', name: 'roleId', align: 'center' },
+	{ header: '역할ID', name: 'roleId', align: 'left' },
 	{ header: '역할명', name: 'roleNm' },
 	{
 		header: '적용시작일',
@@ -1098,3 +1086,10 @@ function sha512(str) {
 		.digest('hex');
 }
 </script>
+<style lang="scss" scoped>
+	::v-deep{
+		.tui-grid-layer-state{
+			top: 40px !important;
+		}
+	}
+</style> 

pages/comm/base/BatchLogMngPage.vue

@@ -7,41 +7,21 @@
 				<v-card class="searchFilter">
 					<v-row align="end" no-gutters>
 						<v-col :cols="2.5">
-							<InputText
-								:parentPrgmId="myPrgmId"
-								label="배치ID"
-								valueNm="batchId"
-								:searchOption="true"
-								customClass="input-large"
-							/>
+							<InputText :parentPrgmId="myPrgmId" label="배치ID" valueNm="batchId" :searchOption="true"
+								customClass="input-large" />
 						</v-col>
 						<v-col :cols="2.5">
-							<InputText
-								:parentPrgmId="myPrgmId"
-								label="배치명"
-								valueNm="batchNm"
-								:searchOption="true"
-								customClass="input-large"
-							/>
+							<InputText :parentPrgmId="myPrgmId" label="배치명" valueNm="batchNm" :searchOption="true"
+								customClass="input-large" />
 						</v-col>
 						<v-col :cols="2.5">
-							<component
-								:is="'selectCodeList'"
-								:parentPrgmId="myPrgmId"
-								:label="'실행 결과'"
-								:dataKey="'execRsltCd'"
-								:sendParam="{ commGrpCd: 'CO_BATCH_EXEC_RSLT', useFg: '1' }"
-								:addAll="true"
-								customClass="select-large"
-							/>
+							<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'실행 결과'"
+								:dataKey="'execRsltCd'" :sendParam="{ commGrpCd: 'CO_BATCH_EXEC_RSLT', useFg: '1' }"
+								:addAll="true" customClass="select-large" />
 						</v-col>
 						<v-col :cols="2.5">
-							<component
-								:is="'Datepicker'"
-								:parentPrgmId="myPrgmId"
-								:label="'조회기간'"
-								customClass="datepicker-large"
-							/>
+							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'조회기간'"
+								customClass="datepicker-large" />
 						</v-col>
 						<div class="text-right d-flex align-end justify-end pl-9" style="gap: 8px">
 							<BtnSearch />
@@ -54,37 +34,30 @@
 
 		<v-row ref="contents">
 			<!-- 배치 리스트 -->
-			<v-col :cols="12" style="height:50%">
-				<v-card class="pb-5 h100">
+			<v-col :cols="12" style="height:70%">
+				<v-card class="h100">
 					<v-card-title>배치 리스트</v-card-title>
-					<div class="h100" style="height:calc(100% - 70px)">
+					<div class="h100" style="height:calc(100% - 150px)">
 						<div ref="gridParent" class="px-5 h100">
-							<component
-								:ref="gridName"
-								:is="loadGrid ? 'Grid' : null"
-								:parentPrgmId="myPrgmId"
-								:gridName="gridName"
-								@getRowsData="getRowData"
-							/>
+							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :parentPrgmId="myPrgmId"
+								:gridName="gridName" @getRowsData="getRowData" />
+						</div>
+						<div class="d-flex align-center justify-center pt-7" 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-col :cols="12" style="height:50%">
-				<v-card class="pb-5 h100">
+			<v-col :cols="12" style="height:30%">
+				<v-card class="h100">
 					<div class="d-flex align-center justify-space-between pa-5">
 						<v-card-title class="pa-0">배치 상세</v-card-title>
 					</div>
-					<div style="height:calc(100% - 50px)">
-						<div ref="gridParent" class="px-5 h100">
-							<component
-								:is="'Form'"
-								:parentPrgmId="myPrgmId"
-								:detailList="detailList"
-								@gridEditingFinish="gridEditingFinish"
-							/>
-						</div>
+					<div style="height:calc(100% - 50px)" class="px-5">
+						<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
+							@gridEditingFinish="gridEditingFinish" />
 					</div>
 				</v-card>
 			</v-col>
@@ -105,6 +78,7 @@ import Buttons from '~/components/common/button/Buttons';
 import Grid from '~/components/common/Grid';
 import Form from '~/components/common/form/Form';
 import Utility from '~/plugins/utility';
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 let myPrgmId;
@@ -133,6 +107,7 @@ export default {
 		BtnSearch,
 		BtnExcelDownload,
 		Buttons,
+		pagination,
 	},
 	data() {
 		return {
@@ -141,6 +116,11 @@ export default {
 			gridName: 'rowGrid',
 			// rowGridOrigin: [],
 			detailList: myDetail,
+			itemsPerPage: 20,
+			itemsPerPageArray: [10, 20, 50],
+			limit: 20,
+			page: 1,
+			totalCount: 0,
 		};
 	},
 	computed: {
@@ -161,7 +141,10 @@ export default {
 	},
 	watch: {
 		chkIsFind(val) {
-			if (val) this.search();
+			if (val) {
+				this.page = 1;
+				this.search(false);
+			}
 		},
 		chkExecRsltCd() {
 			this.setPageData({ isFind: true });
@@ -197,17 +180,16 @@ export default {
 		//   chkOpenTabList: "chkOpenTabList"
 		// }),
 		init() {
-			// this.layoutInit();
+			this.layoutInit();
 			this.gridInit();
 		},
-		// layoutInit() {
-		//   const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
-		//   this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`;
-		// },
+		layoutInit() {
+			const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
+			this.$refs.contents.style.height = `calc(100% - 30px - ${searchFilterHeight}px)`;
+		},
 		gridInit() {
 			this.loadGrid = false;
 			const gridHeight = this.$refs.gridParent.offsetHeight - 30;
-
 			const myOptions = {
 				scrollX: false,
 			};
@@ -219,10 +201,10 @@ export default {
 
 			const _this = this;
 			const myColumns = [
-				{ header: 'No.', name: 'batchLogSeq', align: 'right', width: 100 },
-				{ header: '배치ID', name: 'batchId', align: 'right', width: 100 },
+				{ header: 'No.', name: 'batchLogSeq', align: 'right', width: 90 },
+				{ header: '배치ID', name: 'batchId', align: 'right', width: 90 },
 				{ header: '배치명', name: 'batchNm', align: 'left', width: 150 },
-				{ header: '실행 일자', name: 'execDt', align: 'right', width: 80 },
+				{ header: '실행 일자', name: 'execDt', align: 'right', width: 70 },
 				{
 					header: '실행 결과',
 					name: 'execRsltCd',
@@ -252,9 +234,9 @@ export default {
 					align: 'center',
 					width: 160,
 				},
-				{ header: '등록자NO', name: 'regUserNo', width: 120 },
+				{ header: '등록자NO', name: 'regUserNo', width: 100 },
 				{ header: '등록일시', name: 'regDttm', align: 'center', width: 160 },
-				{ header: '수정자NO', name: 'procUserNo', width: 120 },
+				{ header: '수정자NO', name: 'procUserNo', width: 100 },
 				{ header: '수정일시', name: 'procDttm', align: 'center', width: 160 },
 			];
 
@@ -267,13 +249,20 @@ export default {
 
 			this.loadGrid = true;
 		},
-		async search() {
-			await this.getRowGridData();
+		async search(isPaging) {
+			await this.getRowGridData(isPaging);
 			await this.setPageData({
 				isFind: false,
 			});
 		},
-		async getRowGridData() {
+		async getRowGridData(isPaging) {
+			if(!isPaging) {
+				this.loadGrid = false;
+			}
+			// this.setGridData({
+			// 	gridKey: this.gridName,
+			// 	value: [],
+			// });
 			const res = await this.postApiReturn({
 				apiKey: 'selectBatchLog',
 				resKey: 'batchLogData',
@@ -282,8 +271,24 @@ export default {
 					batchNm: this.pageData.batchNm, // 검색키워드: 배치명
 					execRsltCd: this.pageData.execRsltCd, //배치 실행 결과
 					fromDt: this.pageData.fromDt,
+					limit: this.limit,
+					page: this.page,
+					offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
 				},
 			});
+
+			const res2 = await this.postApiReturn({
+				apiKey: 'selectBatchLogPageTotal',
+				resKey: 'batchLogPageTotal',
+				sendParam: {
+					batchId: this.pageData.batchId, // 검색키워드: 배치ID
+					batchNm: this.pageData.batchNm, // 검색키워드: 배치명
+					execRsltCd: this.pageData.execRsltCd, //배치 실행 결과
+					fromDt: this.pageData.fromDt,
+				},
+			});
+			this.totalCount = res2[0].totalcount;
+
 			const newRes = res.map(item => {
 				const newObj = {
 					...item,
@@ -302,6 +307,7 @@ export default {
 			});
 
 			this.$nextTick(() => {
+				this.loadGrid = true;
 				if (newRes.length > 0) {
 					this.$refs[this.gridName].focus({
 						rowKey: this.chkRowGridSelectKey || 0,
@@ -361,6 +367,12 @@ export default {
 			}
 			return retVal;
 		},
+		changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			this.search(true);
+		},
 	},
 };
 
@@ -428,6 +440,14 @@ const myDetail = [
 		readonly: true,
 		cols: 12,
 		class: 'py-2',
+		rows: 3
 	},
 ];
 </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',
-					// 	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,6 +470,7 @@ const defaultData = {
 };
 </script>
 <style lang="scss" scoped>
+::v-deep {
 	.selectbox:focus {
 		outline: none;
 	}
@@ -481,6 +482,8 @@ const defaultData = {
 		height: 100%;
 		padding: 0;
 		margin: 0;
+		border: 1px solid;
+		border-radius: 6px;
 	}
 
 	select.selectbox {
@@ -509,6 +512,8 @@ select.selectbox {
 		/* 네이티브 외형 감추기 */
 		-moz-appearance: auto;
 		appearance: auto;
+		border: 1px solid;
+		border-radius: 6px;
 	}
 
 	.tui-grid-layer-editing {
@@ -534,7 +539,7 @@ select.selectbox {
 		// box-sizing: border-box;
 	}
 
-::v-deep {
+
 	.custom-vc-calender {
 		.vc-header {
 			display: none;

pages/comm/base/NoticeMngPage.vue

@@ -4,7 +4,7 @@
 		<!-- 리스트 페이지 시작 -->
 		<div v-if="pageActionFlag == 'list'" class="h1001">
 			<v-card class="">
-				<div class="pa-5">
+				<div class="pa-5 pb-0">
 					<v-row align="center" no-gutters>
 						<v-col :cols="12" class="d-flex align-center justify-space-between">
 							<v-card-title class="pa-0 custom-title-4">공지사항</v-card-title>
@@ -15,11 +15,15 @@
 								<!-- <v-btn @click="listPageButtonGroupClickEvent('delete')" :ripple="false">삭제</v-btn> -->
 							</div>
 						</v-col>
-						<v-col :cols="12" ref="contents" class="mt-5" style="min-height: calc(100% - 76px);">
-							<div ref="gridParent" class="px-50" style="min-height: 70vh;">
+						<v-col :cols="12" ref="contents" class="mt-5" style="min-height: calc(100% - 73px);">
+							<div ref="gridParent" class="px-50" style="min-height: 64vh;">
 								<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
 									:parentPrgmId="myPrgmId" @getRowsData="getRowData" />
 							</div>
+							<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
+								<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
+									@loadData="changeGrid" />
+							</div>
 						</v-col>
 					</v-row>
 				</div>
@@ -60,9 +64,10 @@
 						<v-card-title class="custom-title-7 pa-0">
 							파일목록
 						</v-card-title>
-						<div v-for="fileData in viewActionData.fileData" :key="fileData.apndFileId" class="file-item" style="background-color: unset;">
-							<a @click.prevent="downloadFile(fileData)">
-								<div class="d-flex justify-start search-box-label">
+						<div v-for="fileData in viewActionData.fileData" :key="fileData.apndFileId"
+							:class="['file-item', isDarkMode ? 'dark' : 'light']" style="background-color: unset;">
+							<a @click.prevent="downloadFile(fileData)" class="pa-0">
+								<div class="d-flex justify-start search-box-label mb-0">
 									<v-icon>mdi-paperclip</v-icon>
 									<span class="file-item-name ml-2">{{ fileData.apndFileNm + '.' +
 										fileData.apndFileExt }}</span>
@@ -96,7 +101,7 @@
 							<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 							<div class="" v-if="writeActionData.fileData">
 								<div v-for="(fileData, index) in writeActionData.fileData" :key="fileData.apndFileId"
-									class="file-item d-flex justify-space-between">
+									:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
 									<div class="file-item-detail">
 										<v-icon>mdi-paperclip</v-icon>
 										<span href="#" class="file-item-name">{{ fileData.name }}</span>
@@ -105,7 +110,8 @@
 										@click="writeActionData.업로드fileData.splice(index, 1)" />
 								</div>
 							</div>
-							<a-button class="mt-2" icon="upload" @click="$refs.writeInputFile.$refs.input.click()">
+							<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload"
+								@click="$refs.writeInputFile.$refs.input.click()">
 								업로드
 							</a-button>
 							<v-file-input ref="writeInputFile" v-model="writeActionData.fileData" multiple outlined
@@ -113,7 +119,7 @@
 						</v-col>
 						<v-col :cols="12" class="text-right">
 							<a-button @click="writePageButtonGroupClickEvent('cancel')" :ripple="false"
-								class="mr-2">취소</a-button>
+								class="ant-btn-popup-default mr-2" color="primary">취소</a-button>
 							<a-button @click="writePageButtonGroupClickEvent('write')" :ripple="false"
 								type="primary">등록</a-button>
 						</v-col>
@@ -142,7 +148,7 @@
 						<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 						<div class="" v-if="replyActionData.fileData">
 							<div v-for="(fileData, index) in replyActionData.fileData" :key="fileData.apndFileId"
-								class="file-item d-flex justify-space-between">
+								:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
 								<div class="file-item-detail">
 									<v-icon>mdi-paperclip</v-icon>
 									<span href="#" class="file-item-name">{{ fileData.name }}</span>
@@ -151,7 +157,8 @@
 									@click="replyActionData.fileData.splice(index, 1)" />
 							</div>
 						</div>
-						<a-button class="mt-3" icon="upload" @click="$refs.replyInputFile.$refs.input.click()">
+						<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload"
+							@click="$refs.replyInputFile.$refs.input.click()">
 							업로드
 						</a-button>
 						<v-file-input ref="replyInputFile" multiple show-size v-model="replyActionData.fileData"
@@ -159,7 +166,8 @@
 						</v-file-input>
 					</v-col>
 					<v-col :cols="12" class="text-right">
-						<a-button @click="replyPageButtonGroupClickEvent('cancel')" :ripple="false">취소</a-button>
+						<a-button @click="replyPageButtonGroupClickEvent('cancel')" class="ant-btn-popup-default mr-2"
+							color="primary" :ripple="false">취소</a-button>
 						<a-button @click="replyPageButtonGroupClickEvent('reply')" :ripple="false"
 							type="primary">등록</a-button>
 					</v-col>
@@ -168,7 +176,7 @@
 		</div>
 		<!-- 답글 작성 페이지 끝 -->
 		<!-- 수정 페이지 시작 -->
-		<div v-if="pageActionFlag == 'update'">
+		<div v-if="pageActionFlag == 'update'" class="update">
 			<v-card>
 				<div class="pa-5">
 					<v-row align="center" no-gutters>
@@ -190,7 +198,7 @@
 							<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 							<div class="" v-if="updateActionData.fileData">
 								<div v-for="(fileData, index) in updateActionData.fileData" :key="fileData.apndFileId"
-									class="file-item d-flex justify-space-between">
+									:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
 									<div class="file-item-detail">
 										<v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
 										<span href="#" class="file-item-name">{{ fileData.name }}</span>
@@ -199,9 +207,10 @@
 										@click="updateActionData.fileData.splice(index, 1)" />
 								</div>
 							</div>
-							<div class="" v-if="updateActionData.currentFileList">
+							<div class="current-files" v-if="updateActionData.currentFileList">
 								<div v-for="(fileData, index) in updateActionData.currentFileList"
-									:key="fileData.apndFileId" class="file-item d-flex justify-space-between">
+									:key="fileData.apndFileId"
+									:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
 									<div class="file-item-detail">
 										<v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
 										<span @click.prevent="downloadFile(fileData)" href="#"
@@ -212,7 +221,8 @@
 										@click="addFileToDeleteFileList(fileData)" />
 								</div>
 							</div>
-							<a-button class="mt-2" icon="upload" @click="$refs.updateInputFile.$refs.input.click()">
+							<a-button class="ant-btn-popup-default mt-2" color="primary" icon="upload"
+								@click="$refs.updateInputFile.$refs.input.click()">
 								업로드
 							</a-button>
 							<v-file-input ref="updateInputFile" multiple show-size v-model="updateActionData.fileData"
@@ -220,7 +230,8 @@
 							</v-file-input>
 						</v-col>
 						<v-col :cols="12" class="text-right">
-							<a-button @click="updatePageButtonGroupClickEvent('cancel')">취소</a-button>
+							<a-button @click="updatePageButtonGroupClickEvent('cancel')"
+								class="ant-btn-popup-default mr-2" color="primary">취소</a-button>
 							<a-button @click="updatePageButtonGroupClickEvent('update')" type="primary">등록</a-button>
 						</v-col>
 					</v-row>
@@ -241,6 +252,7 @@ import '@toast-ui/editor/dist/toastui-editor.css';
 import { Editor } from '@toast-ui/vue-editor';
 import '@toast-ui/editor/dist/toastui-editor-viewer.css';
 import { Viewer } from '@toast-ui/vue-editor';
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 // const myPrgmId = "PRG0034";
@@ -267,6 +279,7 @@ export default {
 		Utility,
 		Editor,
 		Viewer,
+		pagination,
 	},
 	data() {
 		return {
@@ -281,6 +294,11 @@ export default {
 			loadGrid: false,
 			selectedRowKey: null,
 			selectedRowData: null,
+			itemsPerPage: 10,
+			itemsPerPageArray: [10, 20, 50],
+			limit: 20,
+			page: 1,
+			totalCount: 0,
 			writeActionData: {
 				title: '',
 				postNo: null,
@@ -322,7 +340,10 @@ export default {
 	},
 	watch: {
 		chkIsFind(val) {
-			if (val) this.search();
+			if (val) {
+				this.page = 1;
+				this.search();
+			}
 		},
 	},
 	async beforeCreate() {
@@ -405,10 +426,10 @@ export default {
 			}
 		},
 		search() {
-			this.getGridData();
+			this.getGridData(false);
 		},
 		gridInit() {
-			const gridHeight = this.$refs.contents.offsetHeight - 76;
+			const gridHeight = this.$refs.contents.offsetHeight - 120;
 
 			const myOptions = {
 				header: {
@@ -477,19 +498,32 @@ export default {
 			});
 			this.getGridData();
 		},
-		async getGridData() {
+		async getGridData(isPaging) {
 			var params = {
 				bordNo: 'BORD0001',
+				limit: this.limit,
+				page: this.page,
+				offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
 			};
-
+			if(!isPaging) {
 				this.loadGrid = false;
-
+			}
 			const res = await this.postApiReturn({
-				apiKey: 'selectPostList',
-				resKey: 'postData',
+				apiKey: 'selectPostData',
+				resKey: 'postPage',
 				sendParam: params,
 			});
 
+			const res2 = await this.postApiReturn({
+				apiKey: 'selectPostPageTotal',
+				resKey: 'postPageTotal',
+				sendParam: {
+					bordNo: 'BORD0001',
+				}
+			});
+
+			this.totalCount = res2[0].totalcount;
+
 			this.setGridData({
 				gridKey: this.gridName,
 				value: res,
@@ -1021,6 +1055,13 @@ export default {
 
 			return resultFlag;
 		},
+		changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			// this.search();
+			this.getGridData(true);
+		},
 	},
 };
 
@@ -1042,17 +1083,6 @@ const defaultData = {
 	cursor: pointer;
 }
 
-.file-item {
-	width: auto;
-	margin: 2px 0;
-	padding: 4px;
-	background-color: #0000000A;
-
-	.file-item-name {
-		color: #1677FF;
-	}
-}
-
 ::v-deep {
 	.v-input__slot {
 		padding-left: 8px;
@@ -1076,17 +1106,46 @@ const defaultData = {
 		font-size: 1.0rem !important;
 	}
 
-	.toastui-editor-mode-switch .tab-item.active {
-		color: #1677FF
-	}
-
-	.toastui-editor-light .toastui-editor-mode-switch .tab-item {
-		color: #000000E0
-	}
-
 	.v-icon.anticon-delete svg {
 		width: 14px;
 		height: 14px;
 	}
 }
+
+@each $theme in dark, light {
+	@include theme($theme);
+
+	::v-deep {
+		.toastui-editor-#{$theme} {
+			.toastui-editor-mode-switch {
+				>.tab-item {
+					border: none;
+					background-color: transparent;
+					color: map-deep-get($config, #{$theme}, "card-title-color") !important;
+
+					&.active {
+						color: map-deep-get($config, #{$theme}, "card-text-info-color") !important;
+						border-top: 1px solid map-deep-get($config, #{$theme}, "card-text-info-color");
+					}
+
+				}
+			}
+
+		}
+	}
+
+	.file-item {
+		&.#{$theme} {
+			width: auto;
+			margin: 2px 0;
+			padding: 4px;
+			background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color");
+
+			.file-item-name {
+				color: map-deep-get($config, #{$theme}, "card-text-info-color");
+			}
+
+		}
+	}
+}
 </style>

pages/comm/base/PrgmMngPage.vue

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

pages/comm/base/PrgmMngPage_Pagination.vue

@@ -134,7 +134,7 @@ export default {
 			// rowGridOrigin: [],
 			detailList: myDetail,
 			itemsPerPage: 10,
-			itemsPerPageArray: [10, 20, 30],
+			itemsPerPageArray: [10, 20, 50],
 			limit: 20,
 			page: 1,
 			totalCount: 0,

pages/ems/base/AddInfoMngPage.vue

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

pages/ems/base/DashboardPage.vue

@@ -512,7 +512,7 @@
       <v-col cols="12" sm="12" xl="12" style="height: 300px">
         <v-card style="border-radius: 4px" class="pb-5">
           <div style="height: 20px"></div>
-          <div class="h100 px-5" style="height: calc(100% - 30px)">
+          <div class="h100 px-5" style="height: calc(100% - 70px)">
             <div ref="gridParent" class="h100 w100">
               <component
                 :is="loadGrid ? 'Grid' : null"
@@ -521,6 +521,16 @@
                 :ref="gridName"
                 @dblClick="gridClickEvent"
               />
+              <div v-if="loadGrid && totalCount > 0" class="pagination-wrapper">
+                <pagination
+                  id="pagination"
+                  :total-count="totalCount"
+                  :page-num="page"
+                  :limit="limit"
+                  :itemsPerPageArray="itemsPerPageArray"
+                  @loadData="changeGrid"
+                />
+              </div>
             </div>
           </div>
         </v-card>
@@ -539,6 +549,7 @@ import DateUtility from "~/plugins/dateUtility";
 import Utility from "~/plugins/utility";
 import Grid from "~/components/common/Grid";
 import Chart from "~/components/common/Chart";
+import pagination from "~/components/common/Pagination";
 
 import AntCard from "~/components/common/card/AntCard";
 
@@ -579,7 +590,8 @@ export default {
     Chart,
     UnusedStatPopPage,
     EtcStatPopPage,
-    PageTitle
+    PageTitle,
+    pagination
   },
   computed: {
     ...mapState({
@@ -623,15 +635,15 @@ export default {
       this.setChart04Data(chart04Dat);
 
       let chartOption2 = getLineChartOption({
-            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_02].xAxisData,
-            seriesData: this.$store.state.pageData[myPrgmId][this.chart_02].seriesData,
+            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_02].xAxis.data,
+            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,
-            seriesData: this.$store.state.pageData[myPrgmId][this.chart_05].seriesData,
+            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_05].xAxis.data,
+            seriesData: this.$store.state.pageData[myPrgmId][this.chart_05].series,
             isDarkMode: this.isDarkMode,
           });
       this.$store.state.pageData[myPrgmId][this.chart_05] = chartOption5
@@ -697,6 +709,10 @@ export default {
 
       gridName: "dashBoard_grid_01",
       loadGrid: false,
+      itemsPerPageArray: [10, 20, 50],
+      limit: 10,
+      page: 1,
+      totalCount: 0,
       isGridLoading: true,
     };
   },
@@ -735,6 +751,11 @@ export default {
       }
       this.timer = setInterval(this.search, 90000); //15분 주기마다 갱신
     },
+    changeGrid: async function (pageNum, limit) {
+      this.page = pageNum;
+      this.limit = limit;
+      await this.getGridData(true);
+    },
     async search() {
       await new Promise((resolve) => setTimeout(resolve, 1500));
       if (this.$router.currentRoute.fullPath == this.myHome.root) {
@@ -745,7 +766,7 @@ export default {
         await this.getTodayEfficiencyStatus();
         await this.getTodayNgTopTen();
         await this.getCompareEqpmTGdChart();
-        await this.getGridData();
+        await this.getGridData(false);
       }
     },
     async gridInit() {
@@ -756,6 +777,41 @@ export default {
         // gridHeight = gridHeight*0.9
         gridHeight = this.$refs.gridParent.offsetHeight - 35;
       }
+      // Define custom button
+      class CustomButton {
+        constructor(props, pageData) {
+          const { grid, rowKey, columnInfo } = props;
+          const gridData = grid.store.data.rawData;
+          const value = gridData[rowKey][columnInfo.name];
+          const onClickCallback = columnInfo.renderer.options.onClick;
+
+          this.disabled = columnInfo.renderer.options.disabled || false;
+          const elDiv = document.createElement("div");
+          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);
+          this.el = elDiv;
+          if (!this.disabled && typeof onClickCallback === "function") {
+            // click 이벤트
+            this.el.addEventListener("click", function (event) {
+              onClickCallback(rowKey);
+            });
+          }
+        }
+        getElement() {
+          return this.el;
+        }
+        getValue() {
+          // return this.el.value;
+        }
+        mounted() {
+          // this.el.focus();
+        }
+      }
+
       const myOptions = {
         // scrollX: false,
         setScroll: true,
@@ -840,7 +896,42 @@ export default {
         { header: "주의", name: "careStndVal", align: "right", width: 40 },
         { header: "경고", name: "warnStndVal", align: "right", width: 40 },
         { header: "가이드", name: "totVal", align: "right", width: 40 },
-        { header: "알람 내용", name: "alrmMsg", align: "left", resizable: false },
+        { header: "알람 내용", name: "alrmMsg", align: "left", resizable: false,
+          // Render custom button to switch page instead of double click on row
+          renderer: {
+            type: CustomButton,
+            options: {
+              value: "보기",
+              onClick: (rowKey) => {
+                var gridInstance = this.$refs[this.gridName].gridInstance;
+                var eventRowData = gridInstance.invoke("getRow", rowKey);
+                var data = {
+                  cmCycle: "CYC_DAY",
+                  fromDt:
+                    eventRowData.totDttm != undefined
+                      ? eventRowData.totDttm
+                      : Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm"),
+                  fabId: eventRowData.fabId,
+                  eqpmKindId: eventRowData.eqpmKindId,
+                  eqpmGrpId: eventRowData.eqpmGrpId,
+                  eqpmId: eventRowData.eqpmId,
+                };
+                var key = "tick_" + Math.random();
+                this.$router.push({
+                  name: "ems-effc-EnrgUseEqpmDetlMntrPage",
+                  query: {
+                    prgmId: "PRG0082",
+                    // tick:key
+                  },
+                  params: {
+                    ...data,
+                    key: key,
+                  },
+                });
+              },
+            },
+          },
+         },
         { header: "설비종류", name: "eqpmKindId", align: "left", hidden: true },
         { header: "설비종류", name: "eqpmKindNm", align: "left", hidden: true },
       ];
@@ -853,13 +944,28 @@ export default {
       this.loadGrid = true;
       // this.getGridData();
     },
-    async getGridData() {
+    async getGridData(isPaging) {
+
+      // Do not hide grid when trigger paging function
+      if (!isPaging) {
           this.loadGrid = false; 
-      // console
+      }
+
+      // Get total records of grid
+      const totalRes =  await this.postApiReturn({
+        apiKey: "selectIssueGdIdxDataPageTotal",
+        resKey: "issueGdIdxDataPageTotal",
+      }); 
+      this.totalCount = totalRes[0].totalcount;
+
       const res = await this.postApiReturn({
         apiKey: "selectIssueGdIdxData",
         resKey: "issueGdIdxData",
-        sendParam: {},
+        sendParam: {
+          limit: this.limit,
+          page: this.page,
+          offset: (this.page - 1) * this.limit,
+        },
       });
       // let fakeData = [
       // 	{
@@ -1196,7 +1302,8 @@ export default {
             show: false,
           },
           left: "22%",
-          radius: ["50%", "80%"], // Bigger inner and outer radius
+          bottom: "23",
+          radius: ["67%", "97%"], // Bigger inner and outer radius
           center: ["60%", "50%"], // Shift chart slightly right to make room for legend
           itemStyle: {
             borderColor: "#fff", // Color of the gap
@@ -1272,10 +1379,16 @@ export default {
           top: "middle",
           type: "scroll",
           orient: "vertical",
-          left: "left",
+          left: "20",
+          icon: 'rect',     
+          itemWidth: 15, // Width of the legend icon
+          itemHeight: 15, 
           textStyle: {
             color: this.isDarkMode ? "#fff" : "#333333",
           },
+          itemStyle: {        
+            borderWidth: 0
+          }
         },
         series: seriesData,
       };

pages/ems/base/EnrgCostCenterMngPage.vue

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

pages/ems/base/EnrgReadPlaceMngPage.vue

@@ -923,51 +923,6 @@ const defaultData = {
 	},
 };
 
-const sampleData = [
-	{
-		readPlcNm: '서울 본사',
-		plcKind: '본사',
-		useFg: '사용',
-		_children: [
-			{
-				readPlcNm: '서울 본사 - 1층',
-				plcKind: '층',
-				useFg: '사용',
-			},
-			{
-				readPlcNm: '서울 본사 - 2층',
-				plcKind: '층',
-				useFg: '미사용',
-			},
-		],
-	},
-	{
-		readPlcNm: '부산 지사',
-		plcKind: '지사',
-		useFg: '사용',
-		_children: [
-			{
-				readPlcNm: '부산 지사 - A동',
-				plcKind: '건물',
-				useFg: '사용',
-				_children: [
-					{
-						readPlcNm: '부산 지사 - A동 1층',
-						plcKind: '층',
-						useFg: '사용',
-					},
-				],
-			},
-		],
-	},
-	{
-		readPlcNm: '대전 창고',
-		plcKind: '창고',
-		useFg: '미사용',
-	},
-];
-
-
 const myDetail = [
 	{
 		type: 'InputText',

pages/ems/base/EnrgResourceCenterMngPage.vue

@@ -84,9 +84,9 @@
 				</v-card>
 			</v-col>
 		</v-row>
-		<v-row >
-			<v-col :cols="5" class="h100">
-				<v-card class="pb-5">
+		<v-row align="stretch">
+			<v-col :cols="5">
+				<v-card class="d-flex flex-column h100">
 				<v-card-title class="d-flex justify-space-between align-end">
 					<span class="tit ft-size_20 ft-weight_600">에너지원 정보</span>
 					<Buttons
@@ -96,8 +96,8 @@
 					:btnActionsFnc="btnActions"
 					/>
 				</v-card-title>
-					<div class="px-5" style="height:calc(100% - 106px)">
-						<div ref="gridParent" class="w100 h100">
+				<div class="px-5" style="height: auto;">
+					<div ref="gridParent" class="w100">
 					<component
 						:ref="gridName"
 						:is="loadGrid ? 'Grid' : null"
@@ -111,10 +111,11 @@
 				</div>
 				</v-card>
 			</v-col>
-			<v-col :cols="7" class="h100">
-				<v-card class="pb-5">
+
+			<v-col :cols="7">
+				<v-card class="d-flex flex-column h100">
 				<v-card-title>에너지원 상세</v-card-title>
-					<div class="px-5" style="min-height: auto;">
+				<div class="px-5" style="height: auto;">
 					<v-tabs v-model="tab">
 					<v-tab
 						v-for="item in items"
@@ -124,11 +125,7 @@
 						{{ item.name }}
 					</v-tab>
 					</v-tabs>
-						<v-tabs-items
-							v-model="tab"
-							class="py-6"
-							style="min-height: auto;"
-						>
+					<v-tabs-items v-model="tab" class="py-6">
 					<v-tab-item v-for="(item, idx) in items" :key="item.id">
 						<component
 						v-if="item.id == 'ercInfoTab'"
@@ -835,7 +832,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-3 pr-4',
 		required: false,
 		placeholder: '시스템 자동입력',
 	},
@@ -848,7 +845,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-3 pl-4',
 		required: true,
 	},
 	{
@@ -860,7 +857,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-3 pr-4 mt-2',
 		list: 'ercKindList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -875,7 +872,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-3 pl-4 mt-2',
 		list: 'readObjList',
 		itemText: 'readObjNm',
 		itemValue: 'readObjId',
@@ -890,7 +887,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-3 pr-4 mt-2',
 		list: 'chrgKindList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -905,7 +902,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-3 pl-4 mt-2',
 	},
 	{
 		type: 'InputText',
@@ -916,7 +913,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-3 pr-4 mt-2',
 
 	},
 	{
@@ -928,7 +925,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-3 pl-4 mt-2',
 		list: 'blocMstrList',
 		itemText: 'blocNm',
 		itemValue: 'blocId',
@@ -944,7 +941,7 @@ const myDetail = [
 		textCols: 12,
 		iconShow: true,
 		// class: 'py-2',
-		class: 'pb-0 mb-0 pr-4',
+		class: 'pb-0 mb-0 pr-4 mt-2',
 		disableContent: true,
 	},
 	{
@@ -956,7 +953,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'pb-0 mb-0 pl-4 mt-2',
 	},
 	{
 		type: 'InputText',
@@ -981,7 +978,7 @@ const myDetail = [
 		disabled: false,
 		cols: 6,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-3 pr-4 mt-2',
 		value: { '1': true, '0': false },
 	},
 	{
@@ -991,7 +988,7 @@ const myDetail = [
 		disabled: false,
 		cols: 6,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-3 pl-4 mt-2',
 		value: { '1': true, '0': false },
 		required: true,
 	},

pages/ems/base/EquipmentMasterMngPage.vue

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

pages/ems/base/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/PastRsltDataReadPage.vue

@@ -12,7 +12,7 @@
 						</v-col>
 						<v-col :cols="3">
 							<component :is="'EvtObjPop'" :parentPrgmId="myPrgmId" :item="evtObjPopItem"
-								customClass="select-large" />
+								class="no-gutters" customClass="select-large pa-0" />
 						</v-col>
 						<v-col :cols="3">
 							<!-- 대상일 -->
@@ -29,17 +29,18 @@
 			</v-col>
 		</v-row>
 		<v-row ref="contents">
-			<v-col :cols="12" style="height: 100%" class="h100">
-				<v-card class="px-5 py-5 h100">
-					<div ref="gridParent" class="h100 px-5" style="height: 100%">
+			<v-col :cols="12" class="h100">
+				<v-card class="px-5 py-5">
+					<div ref="gridParent" class="px-5" style="height:calc(100% - 40px)">
 						<component ref="myGrid" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
 							:parentPrgmId="myPrgmId" />
 					</div>
-					<div class="d-flex align-center justify-space-between">
+					<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
 							<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
 								@loadData="changeGrid" />
 					</div>
 				</v-card>
+
 			</v-col>
 		</v-row>
 	</div>
@@ -61,7 +62,7 @@ import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
 import DateUtility from '~/plugins/dateUtility';
 // import Search from "~/components/common/search";
 import EvtObjPop from '~/components/common/modal/EvtObjPop';
-import pagination from '~/components/Pagination';
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 // const myPrgmId = "PRG0052";
@@ -116,7 +117,7 @@ export default {
 				formFg: false,
 			},
 			itemsPerPage: 10,
-			itemsPerPageArray: [10, 20, 30],
+			itemsPerPageArray: [10, 20, 50],
 			limit: 20,
 			page: 1,
 			totalCount: 0,
@@ -143,17 +144,17 @@ export default {
 		chkIsFind(val) {
 			if (val) {
 				this.page = 1;
-				this.search();
+				this.search(false);
 			}
 		},
 		chkTagId(val) {
 			if (this.initFlag && val != null) {
-				this.search();
+				this.search(false);
 			}
 		},
 		chkTagNm() {
 			if (this.initFlag) {
-				this.search();
+				this.search(false);
 			}
 		},
 		chkReadPlcId() {
@@ -192,13 +193,13 @@ export default {
 			postApiReturn: 'modules/list/postApiReturn',
 			chkOpenTabList: 'chkOpenTabList',
 		}),
-		async search() {
+		async search(isPaging) {
 			// this.gridInit();
 			if (this.initFlag) {
 				if (this.pageData.tagId == '' || this.pageData.tagId == null) {
 					alert('TAG를 선택해 주세요');
 				} else {
-					this.getRowGridData();
+					this.getRowGridData(isPaging);
 				}
 			}
 			this.setPageData({
@@ -212,7 +213,7 @@ export default {
 		},
 		layoutInit() {
 			const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
-			this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`;
+			this.$refs.contents.style.height = `calc(100% - 30px - ${searchFilterHeight}px) `;
 		},
 		async setFromDt() {
 			this.pageData.fromDt = Utility.setBeforetDate(
@@ -220,7 +221,6 @@ export default {
 				this.pageData.toDt,
 				'YYYYMMDD',
 			);
-			// this.pageData.toDt = Utility.setAftertDate(this.pageData, this.pageData.fromDt, "YYYYMMDD");
 		},
 		gridInit() {
 			this.loadGrid = false;
@@ -289,9 +289,10 @@ export default {
 
 			this.loadGrid = true;
 		},
-		async getRowGridData() {
+		async getRowGridData(isPaging) {
+			if(!isPaging) {
 				this.loadGrid = false;
-
+			}
 			let res = [];
 			let res2 = [];
 			let yearQuarterData = [];
@@ -476,7 +477,7 @@ export default {
 			this.page = pageNum;
 			this.limit = limit;
 
-			this.search();
+			this.search(true);
 		},
 	},
 };

pages/ems/base/ReadObjectMngPage.vue

@@ -855,7 +855,6 @@ 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

@@ -100,6 +100,10 @@
                 :gridName="gridName"
               />
           </div>
+					<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
+            <pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
+								@loadData="changeGrid" />
+						</div>
         </v-card>
       </v-col>
     </v-row>
@@ -117,6 +121,7 @@ import selectCodeList from "@/components/common/select/selectCodeList";
 import SelectMttList from "@/components/common/select/SelectMttList";
 import Datepicker from "~/components/common/Datepicker";
 import BtnExcelDownload from "~/components/common/button/BtnExcelDownload";
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 // const myPrgmId = "PRG0018";
@@ -124,10 +129,20 @@ let myPrgmId;
 export default {
   mixins: [mixinGlobal, resize],
   async asyncData(context) {
-    const myState = context.store.state;
+    // console.log('----DEBUG-----ReadResultCloseMngPage--asyncData:', Utility.setFormatDate(new Date(), "YYYYMMDD"));
+    try{
       myPrgmId = context.route.query.prgmId;
-    await context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
+      const myState = context.store.state;
+      const activeMenuInfo = myState.menuData[myPrgmId];
+      myTitle = activeMenuInfo.menuNm;
+
+      // console.log('-----DEBUG----store.commit----setActiveMenuInfo:', activeMenuInfo);
+      await context.store.commit("setActiveMenuInfo", activeMenuInfo);
       myTitle = await myState.activeMenuInfo.menuNm;
+      // console.log('-----DEBUG----store.commit----setActiveMenuInfo---Compeleted:', myState.activeMenuInfo);
+    }catch(err){
+      // console.log('-----DEBUG----err', err);
+    }
   },
   meta: {
     title: () => {
@@ -144,27 +159,18 @@ export default {
     Datepicker,
     Search,
     Grid,
+    pagination,
   },
   data() {
     return {
       myPrgmId: myPrgmId,
       gridName: "rowGrid",
       loadGrid: false,
-      dataPathMock: {
-        rowGrid: {
-          column: [
-            { header: "태그", name: "id", headerAlign: "left" },
-            { header: "배율", name: "lable", headerAlign: "left" },
-            { header: "설비비", name: "type", headerAlign: "left" },
-            { header: "설비배분비율", name: "note", headerAlign: "left" },
-            { header: "금일데이터", name: "note", headerAlign: "left" },
-            { header: "최종마감시각", name: "date", headerAlign: "left" },
-          ],
-          data: dataPathDataExample,
-          defaultRow: dataPathDataExample,
-          option: {},
-        },
-      },
+			itemsPerPage: 10,
+			itemsPerPageArray: [10, 20, 50],
+			limit: 20,
+			page: 1,
+			totalCount: 0,
     };
   },
   computed: {
@@ -190,7 +196,10 @@ export default {
   },
   watch: {
     chkIsFind(val) {
-      if (val) this.search();
+      if (val) {
+				this.page = 1;
+				this.search(false);
+			}
     },
     chkBlocId() {
       this.setPageData({ isFind: true });
@@ -207,18 +216,21 @@ export default {
       this.setPageData({ isFind: true });
     },
   },
-  async beforeCreate() {
+  beforeCreate() { 
+    // console.log('----DEBUG-----ReadResultCloseMngPage--beforeCreate:', Utility.setFormatDate(new Date(), "YYYYMMDD"));
     myPrgmId = this.$route.query.prgmId;
-    await this.$store.dispatch("chkOpenTabList", {
+    const context = {
       key: "create",
       prgmId: myPrgmId,
       defaultData: defaultData,
-    });
+    };
+    this.$store.dispatch("chkOpenTabList", context);
   },
   mounted() {
     this.init();
   },
-  created() {},
+  created() { 
+  },
   methods: {
     ...mapMutations({
       setPageData: "setPageData",
@@ -243,10 +255,6 @@ export default {
         columnOptions: {
           resizable: true,
         },
-        pageOptions: {
-					useClient: true,
-					perPage: 13,
-				},
       };
       this.setGridOption({
         gridKey: this.gridName,
@@ -257,10 +265,13 @@ export default {
         value: myColumns,
       });
     },
-    async search() {
-      await this.getRowGridData();
+    async search(isPaging) {
+      await this.getRowGridData(isPaging);
     },
-    async getRowGridData() {
+    async getRowGridData(isPaging) {
+      if(!isPaging) {
+        this.loadGrid = false;
+      }
       if (
         this.pageData.blocMstrList.length > 0 &&
         this.pageData.commCdList.length > 0 &&
@@ -274,8 +285,25 @@ export default {
             mttCd: this.pageData.commCd, // 검침대상유형
             mttTp: this.pageData.readObjId, // 검침대상
             readDt: this.pageData.fromDt, // 조회기간
+            limit: this.limit,
+					  page: this.page,
+					  offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
           },
         });
+
+        const res2 = await this.postApiReturn({
+					apiKey: 'selectReadResultCloseMngPageTotal',
+					resKey: 'cdKindPageTotal',
+          sendParam: {
+            blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId, // 사업장
+            mttCd: this.pageData.commCd, // 검침대상유형
+            mttTp: this.pageData.readObjId, // 검침대상
+            readDt: this.pageData.fromDt, // 조회기간
+          },
+				});
+
+				this.totalCount = res2[0].totalcount;
+
         this.setGridData({
           gridKey: this.gridName,
           value: res.map((item) => ({
@@ -325,6 +353,12 @@ export default {
         this.setPageData({ isFind: true });
       }
     },
+    changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			this.search(true);
+		},
   },
 };
 
@@ -431,13 +465,11 @@ const myColumns = [
     },
   },
 ];
-
-import { getPathDataExample } from "@/const/const";
-const dataPathDataExample = getPathDataExample({
-  id: "INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV",
-  lable: "INCHEON 고온 냉동기 101호기 - 호로1",
-  type: "사용",
-  note: "-",
-  date: "2023-01-10 20:02:00",
-});
 </script>
+<style lang="scss" scoped>
+	::v-deep{
+		.tui-grid-layer-state{
+			top: 40px !important;
+		}
+	}
+</style>

pages/ems/base/TagMngPage_Pagination.vue

@@ -153,7 +153,7 @@ export default {
 			detailList: myDetail,
 			alrmFg: null,
 			itemsPerPage: 10,
-			itemsPerPageArray: [10, 20, 30],
+			itemsPerPageArray: [10, 20, 50],
 			limit: 20,
 			page: 1,
 			totalCount: 0,

pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue

@@ -61,16 +61,23 @@
 		</v-row>
 		<v-row ref="contents" class="pt-3">
 			<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" style="height:calc(100% - 76px)">
-						<div ref="gridParent" class="w100 h100">
+					<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>
+						<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>
@@ -92,6 +99,7 @@ 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;
@@ -124,6 +132,7 @@ export default {
 		EnrgEffcEqpmDetailPop,
 		EqpmSelectPop,
 		EnrgEffcGdIdxDetPop,
+		pagination
 	},
 	data() {
 		return {
@@ -149,7 +158,12 @@ export default {
 			eqpmGrpFlag: false,
 			eqpmGdIdxFlag: false,
 			fabFlag: false,
+			itemsPerPage: 10,
+			itemsPerPageArray: [10, 20, 50],
+			limit: 20,
+			page: 1,
 			routeData: {},
+			totalCount: 0,
 		};
 	},
 	computed: {
@@ -197,7 +211,7 @@ export default {
 			}
 		},
 		chkIsFind(val) {
-			if (val) this.search();
+			if (val) this.search(false);
 		},
 		fabId(val) { },
 		fabNm(val) { },
@@ -357,8 +371,8 @@ export default {
 			}
 			await this.gridInit();
 		},
-		async search() {
-			await this.getRowGridData();
+		async search(isPaging) {
+			await this.getRowGridData(isPaging);
 			this.setPageData({
 				isFind: false,
 			});
@@ -377,6 +391,7 @@ export default {
 				resKey: 'eqpmKindCodeLists',
 				sendParam: {},
 			});
+
 			if (res.length > 0) {
 				this.selectValueList01 = await res.map(item => {
 					return {
@@ -574,6 +589,39 @@ export default {
 			});
 
 			const _this = this;
+			class CustomButton {
+				constructor(props) {
+					const { grid, rowKey, columnInfo } = props;
+
+					const gridData = grid.store.data.rawData;
+					const value = gridData[rowKey][columnInfo.name];
+
+					this.disabled = columnInfo.renderer.options.disabled || false;
+					const elDiv = document.createElement('div');
+					if (value != null) {
+						elDiv.innerHTML = `<span>${value}</span>`;
+						$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
+						const el2 = document.createElement('button');
+						$(el2).addClass('edit-btn blue--text');
+						el2.innerText = '보기';
+						elDiv.appendChild(el2);
+					} else {
+						elDiv.innerHTML = `<span></span>`;
+					}
+
+					this.el = elDiv;
+
+				}
+				getElement() {
+					return this.el;
+				}
+				getValue() {
+					// return this.el.value;
+				}
+				mounted() {
+					// this.el.focus();
+				}
+			}
 			const myColumns = [
 				{
 					header: 'FAB',
@@ -618,7 +666,13 @@ export default {
 				{
 					header: '가이드명',
 					name: 'gdIdxNm',
-					width: 200,
+					width: 250,
+					renderer: {
+						type: CustomButton,
+						options: {
+							value: "보기",
+						}
+					},
 				},
 				{
 					header: '주의',
@@ -653,6 +707,12 @@ export default {
 					name: 'ngCnt',
 					align: 'right',
 					width: 80,
+					renderer: {
+						type: CustomButton,
+						options: {
+							value: "보기",
+						}
+					},
 				},
 			];
 
@@ -665,9 +725,10 @@ export default {
 
 			this.getRowGridData();
 		},
-		async getRowGridData() {
+		async getRowGridData(isPaging) {
+			if(!isPaging) {
 				this.loadGrid = false;
-
+			}
 			var res = await this.postApiReturn({
 				apiKey: 'selectEnrgEffcEqpmDetlMntr',
 				resKey: 'eqpmDetlData',
@@ -680,9 +741,29 @@ 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,
@@ -722,6 +803,12 @@ export default {
 				});
 			}
 		},
+		changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			this.search(true);
+		},
 	},
 };
 

pages/ems/effc/EnrgEffcTotSummPage.vue

@@ -411,15 +411,3 @@ 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/EnrgMapPage.vue

@@ -239,7 +239,7 @@ export default {
 			try{
 				await this.getChartData();
 			}catch(err){
-				this.initTestChart();
+				// this.initTestChart();
 			}
 			this.setPageData({
 				isFind: false,

pages/ems/effc/EnrgReptMngPage.vue

@@ -35,7 +35,7 @@
 						</v-col>
 						<v-col :cols="6.5" class="text-right d-flex align-end justify-end align-self-end">
 							<!-- 조회버튼 -->
-							<a-button icon="file-excel" class="d-inline-flex-1 mr-1" size="large" @click="createExcel()">엑셀</a-button>
+							<a-button type="default" icon="file-excel" class="d-inline-flex-1 mr-1" size="large" @click="createExcel()">엑셀</a-button>
 							<BtnSearch @click="search" size="large"  />
 						</v-col>
 					</v-row>

pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue

@@ -152,16 +152,17 @@
             </div>
           </div>
         </v-row>
-        <v-row class="pa-1" style="height: 52%; width: 100%">
+        <v-row class="pa-1" style="height: 45%; width: 100%">
           <v-card class="pa-1" style="height: 100%; width: 100%; overflow: hidden">
-            <div style="height: 25%">
-              <v-card-title class="d-flex align-center justify-space-between pa-5">
+            <div style="height: 15%">
+              <v-card-title class="d-flex align-center justify-space-between pl-3 pt-2">
                 <span class="tit ft-size_20 ft-weight_600">가이드 알람정보</span>
               </v-card-title>
             </div>
             <div
               ref="gridParent01"
-              style="height: 75%; overflow: hidden; margin-top: 15px"
+              class="pl-3 mt-3"
+              style="height: 75%; overflow: hidden;"
             >
               <component
                 :ref="gridName01"
@@ -177,12 +178,12 @@
             <v-row style="height: 100%">
               <v-col :cols="5" class="">
                 <v-card class="pa-1" style="height: 100%; width: 100%">
-                  <div style="height: 25%">
-                    <v-card-title class="d-flex align-center justify-space-between pa-5">
+                  <div style="height: 15%">
+                    <v-card-title class="d-flex align-center justify-space-between pl-3">
                       <span class="tit ft-size_20 ft-weight_600">설비 상세 정보</span>
                     </v-card-title>
                   </div>
-                  <div ref="gridParent02" style="height: 75%">
+                  <div ref="gridParent02" style="height: 75%" class="pl-3 mt-5">
                     <component
                       :ref="gridName02"
                       :is="loadGrid02 ? 'Grid' : null"

pages/ems/effc/EnrgUsePlanPage.vue

@@ -32,15 +32,19 @@
 		</v-row>
 		<v-row ref="contents">
 			<v-col :cols="12" >
-				<v-card class="pb-5">
+				<v-card>
 					<div class="d-flex align-center justify-space-between py-4 px-4">
 						<v-card-title class="pa-0 custom-title-4">설비별 에너지 계획 리스트</v-card-title>
 						<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
 					</div>
-					<div ref="gridParent" class="px-5" style="min-height: 60vh;">
+					<div ref="gridParent" class="px-5" style="min-height: 50vh;">
 						<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
 							:editorGrid="true" @getRowsData="getRowData" />
 					</div>
+					<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
+							<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
+								@loadData="changeGrid" />
+					</div>
 				</v-card>
 			</v-col>
 		</v-row>
@@ -57,7 +61,7 @@ import Grid from '~/components/common/Grid';
 import Utility from '~/plugins/utility';
 import Buttons from '~/components/common/button/Buttons';
 import EnrgUsePlanModiPop from '~/components/common/modal/EnrgUsePlanModiPop';
-import DateUtility from '~/plugins/dateUtility';
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 let myPrgmId;
@@ -86,6 +90,7 @@ export default {
 		Grid,
 		Buttons,
 		EnrgUsePlanModiPop,
+		pagination
 	},
 	data() {
 		return {
@@ -104,7 +109,11 @@ export default {
 			fromDt: new Date().getFullYear(),
 			rowKey: null,
 			edtingFinishFlag: 'Y',
-			// gridName: 'rowGrid',
+			itemsPerPage: 10,
+			itemsPerPageArray: [10, 20, 50],
+			limit: 20,
+			page: 1,
+			totalCount: 0,
 		};
 	},
 	computed: {
@@ -134,7 +143,10 @@ export default {
 			this.fromDt = val;
 		},
 		chkIsFind(val) {
-			if (val) this.search();
+			if (val) {
+				this.page = 1;
+				this.search();
+			}
 		},
 		async selectValue01(val) {
 			if (this.initedFlag) {
@@ -265,7 +277,7 @@ export default {
 		gridInit() {
 			this.loadGrid = false;
 			let _this = this;
-			const gridHeight = this.$refs.gridParent.offsetHeight - 50;
+			const gridHeight = this.$refs.gridParent.offsetHeight - 40;
 			let yyyyCol = this.pageData.fromDt + '년';
 			let childCols1 = [];
 			let myComplexColumns = [
@@ -358,14 +370,14 @@ export default {
 				{
 					header: 'FAB',
 					name: 'fab',
-					width: 100,
+					width: 85,
 					align: 'left',
 					// hidden: true,
 				},
 				{
 					header: '공정명',
 					name: 'eccNm',
-					width: 100,
+					width: 150,
 					align: 'left',
 					hidden: true,
 				},
@@ -415,7 +427,7 @@ export default {
 				{
 					header: '구분',
 					name: 'gubun',
-					width: 200,
+					width: 150,
 					align: 'left',
 					// hidden: true,
 					formatter({ value }) {
@@ -447,7 +459,7 @@ export default {
 				myColumns.push({
 					header: i.toString() + '월',
 					name: qty,
-					width: 80,
+					width: 70,
 					align: 'right',
 					editor: 'text',
 					formatter: this.numberFormatter,
@@ -500,8 +512,25 @@ export default {
 					pastDt: parseInt(this.fromDt) - 1,
 					eqpmGrpId: this.selectValue03,
 					eccId: this.selectValue01,
+					limit: this.limit,
+					page: this.page,
+					offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
 				},
 			});
+
+			const res2 = await this.postApiReturn({
+				apiKey: 'selectEnrgUsePlanPageTotal',
+				resKey: 'enrgUsePlanPageTotal',
+				sendParam: {
+					fromDt: this.fromDt,
+					pastDt: parseInt(this.fromDt) - 1,
+					eqpmGrpId: this.selectValue03,
+					eccId: this.selectValue01,
+				},
+			});
+
+			this.totalCount = res2[0].totalcount;
+
 			let fabText = this.pageData.eccIdList.filter(item => {
 				return item.value == this.selectValue01;
 			})[0]['text'];
@@ -734,6 +763,12 @@ export default {
 				}
 			}
 		},
+		changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			this.search();
+		},
 	},
 };
 const dt = new Date();
@@ -819,8 +854,6 @@ 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

@@ -47,13 +47,14 @@
     <v-row ref="contents" style="overflow: auto">
       <v-col>
         <div v-for="(value, key, index) in contentData" :key="'key1_' + index">
+          <v-card style="background: none">
             <v-card-title class="d-flex align-center justify-space-between pa-3">
               <span class="tit ft-size_20 ft-weight_600">{{ value.eqpmGrpNm }}</span>
             </v-card-title>
+          </v-card>
           <v-row>
             <v-col :cols="3" v-for="(item, i) in value.chartData" :key="'key2_' + i">
             <v-card>
-
               <div
                 class="v-box"
                 style="height: 330px; position: relative"
@@ -126,7 +127,6 @@
                 </v-col>
               </div>
             </v-card>
-
             </v-col>
           </v-row>
         </div>
@@ -442,7 +442,7 @@ export default {
 
           chartOption = getGaugeChartOption({
             title: chartKey,
-            value: 75,
+            value: currentChartData["effcRt"],
             isDarkMode: this.isDarkMode,
             backgroundRadius: 89,
           });

pages/ems/effc/EqpmIndMntrPage.vue

@@ -105,8 +105,7 @@
                 :gridName="gridName"
                 :parentPrgmId="myPrgmId"
               />
-
-              <div class="pagination-wrapper">
+              <div v-if="loadGrid && totalCount > 0" class="pagination-wrapper">
                 <pagination
                   id="pagination"
                   :total-count="totalCount"
@@ -201,7 +200,7 @@ export default {
       gridName: "grid01",
 
       enrgUseMainIdxDesc: [],
-      itemsPerPageArray: [10, 20, 30],
+      itemsPerPageArray: [10, 20, 50],
       limit: 10,
       page: 1,
       totalCount: 0,
@@ -283,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;
     },
@@ -589,8 +588,10 @@ export default {
         value: columnList,
       });
     },
-    async getGridData() {
+    async getGridData(isPaging) {
+      if(!isPaging) {
         this.loadGrid = false;
+      }
       this.enrgUseMainIdxDesc = [];
       var apiKey = null;
       var apiKey2 = null;
@@ -612,20 +613,34 @@ export default {
         apiKey = "selectMonthlyEnrgUseMainIdx";
         apiKey2 = "selectMonthlyEnrgUseMainIdxPageTotal";
       }
-      var res = await this.postApiReturn({
+
+      
+      var [res, res2] = await Promise.all([
+        this.postApiReturn({
           apiKey: apiKey,
           resKey: "eqpmIndMntrData",
           sendParam: params,
-      });
-
-      var res2 = await this.postApiReturn({
+        }),
+        this.postApiReturn({
           apiKey: apiKey2,
           resKey: "eqpmIndMntrPageTotal",
           sendParam: params,
-      });
+        }),
+      ]);
+
+      // var res = await this.postApiReturn({
+      //   apiKey: apiKey,
+      //   resKey: "eqpmIndMntrData",
+      //   sendParam: params,
+      // });
+
+      // var res2 = await this.postApiReturn({
+      //   apiKey: apiKey2,
+      //   resKey: "eqpmIndMntrPageTotal",
+      //   sendParam: params,
+      // });
 
       this.totalCount = res2[0].totalcount;
-
       this.enrgUseMainIdxDesc = await this.postApiReturn({
         apiKey: "selectEnrgUseMainIdxDesc",
         resKey: "eqpmIndMntrData",
@@ -641,18 +656,16 @@ export default {
           no: i + 1,
         });
       }
-
       this.setGridData({
         gridKey: this.gridName,
         value: newRes,
       });
 
       this.loadGrid = true;
-
       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,7 +1214,6 @@ const defaultData = {
 };
 </script>
 <style lang="scss" scoped>
-@import "@/assets/scss/var.scss";
 
 ::v-deep {
   .datepicker-container {

pages/login/index.vue

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

store/index.js

@@ -513,6 +513,7 @@ export const actions = {
 				//commit("pageInit", {});
 				break;
 			case 'create':
+				// console.log("---------DEBUGmyPrgmId:", myPrgmId);
 				if (!list.some(it => it === myPrgmId)) {
 					// console.log("클릭 한 메뉴가 기존 목록에 없다 => 새로 push"); // & 초기화 세팅
 					localStorage.setItem('pageData', JSON.stringify(state.pageData));

store/modules/list.js

@@ -210,6 +210,8 @@ const INIT_URL_STATE = {
 	// prgmId: "TMP0013" 검침실적마감관리 ems/ReadResultCloseMngPage
 	selectReadResultCloseMng:
 		'ems/base/ReadResultCloseMngCtr/selectReadResultCloseMng', // 일일검침정보
+	selectReadResultCloseMngPageTotal:
+		'ems/base/ReadResultCloseMngCtr/selectReadResultCloseMngPageTotal', // 일일검침정보
 	saveReadResultCloseMngSP:
 		'ems/base/ReadResultCloseMngCtr/saveReadResultCloseMngSP', // 전월 or 일 마감
 	saveReadResultCloseMngSPMM:
@@ -279,6 +281,7 @@ const INIT_URL_STATE = {
 
 	// prgmId: "PRG0020" 배치로그
 	selectBatchLog: 'comm/base/BatchLogCtr/selectBatchLog', // 배치 로그
+	selectBatchLogPageTotal: 'comm/base/BatchLogCtr/selectBatchLogPageTotal', // 배치 로그
 
 	// prgmId: "PRG0017" 검침개소 기간별 비교
 	selectSameReadPlcTime: 'ems/base/sameReadPlcCtr/selectSameReadPlcTime',
@@ -511,6 +514,8 @@ const INIT_URL_STATE = {
 
 	// prgmId: "PRG0003" 공지사항
 	selectPostList: 'comm/base/NoticeMngCtr/selectPostList',
+	selectPostData: 'comm/base/NoticeMngCtr/selectPostData',
+	selectPostPageTotal: 'comm/base/NoticeMngCtr/selectPostPageTotal',
 	deletePostList: 'comm/base/NoticeMngCtr/deletePost',
 
 	//prgmId: "PRG0121" 공지사항 게시물 상세조회
@@ -899,6 +904,8 @@ const INIT_URL_STATE = {
 	//prgmId: PRG0079 에너지사용량계획
 	selectFabCodeList: 'ems/effc/EnrgUsePlanCtr/selectFabCodeList',
 	selectEnrgUsePlanData: 'ems/effc/EnrgUsePlanCtr/selectEnrgUsePlanData',
+	selectEnrgUsePlanPageTotal: 'ems/effc/EnrgUsePlanCtr/selectEnrgUsePlanPageTotal',
+
 	saveEmsEqpmMmPlanDatas: 'ems/effc/EnrgUsePlanCtr/saveEmsEqpmMmPlanDatas',
 
 	//prgmId : PRG0080 에너지 사용량 - Total Summary
@@ -940,6 +947,8 @@ 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',
 
@@ -967,4 +976,5 @@ const INIT_URL_STATE = {
 	selectTodayNgTopTen: 'ems/base/DashboardCtr/selectTodayNgTopTen',
 	selectCompareEqpmTGdChart: 'ems/base/DashboardCtr/selectCompareEqpmTGdChart',
 	selectIssueGdIdxData: 'ems/base/DashboardCtr/selectIssueGdIdxData',
+	selectIssueGdIdxDataPageTotal: 'ems/base/DashboardCtr/selectIssueGdIdxDataPageTotal',
 };