fix bugs css menu

Reviewed-on: #58

assets/scss/common.scss

@@ -9,6 +9,7 @@
 @import "./common/card.scss";
 @import "./common/tabs.scss";
 @import "./common/numericInput.scss";
+@import "./common/pagination.scss";
 @import "./common/editor.scss";
 
 
@@ -127,219 +128,6 @@ a {
   background: #383f5d;
 }
 
-// router-tab header
-.router-tab {
-  height: 100%;
-
-  &__header {
-    align-items: flex-end;
-    height: 52px;
-    margin: -5px -5px 0;
-    padding: 0 20px;
-    box-sizing: border-box;
-    border-bottom: none !important;
-  }
-
-  &-page {
-    height: 100%;
-  }
-
-  & .router-tab__container {
-    overflow-y: auto;
-    height: calc(100vh - 105px);
-    max-height: calc(100vh - 105px);
-    padding: 20px;
-  }
-
-  .router-tab__slot-end {
-    align-self: center;
-    display: flex;
-    align-items: center;
-
-    >* {
-      flex: none;
-      margin-right: 6px;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
-    .v-menu+.v-btn {
-      padding: 0 3px;
-    }
-
-    .v-btn {
-      border-radius: 4px;
-    }
-  }
-
-  .router-tab__nav {
-    padding-left: 0;
-  }
-
-  .router-tab__scroll {
-    height: 46px;
-  }
-
-  .router-tab__item {
-    height: 46px;
-    padding: 0 !important;
-
-    &:first-child {
-      border-left: none
-    }
-
-    &>span {
-      font-size: 14px;
-    }
-
-    &.is-active {
-      border-bottom: 2px solid;
-
-      &>span {
-        font-weight: 400;
-      }
-    }
-
-    &+.router-tab__item {
-      margin-left: 16px;
-    }
-
-    border:none;
-  }
-
-}
-
-// v-navigation-drawer (sidebar)
-.v-navigation-drawer {
-  box-shadow: none; // 0 0 10px 0 rgba(0, 0, 0, 0.15);
-
-  &--fixed {
-    z-index: 20;
-  }
-
-  .home {
-    display: block;
-    line-height: 0;
-  }
-
-  &__border {
-    display: none;
-  }
-
-  &__append {
-    padding: 0 17px;
-    margin: 0 0 26px;
-
-    >p {
-      margin-bottom: 0;
-    }
-  }
-
-  .v-treeview {
-    padding: 0 10px;
-    box-sizing: border-box;
-
-    .v-treeview-node__level {
-      width: 9px;
-    }
-
-    >.v-treeview-node {
-      margin-top: 10px;
-
-      &:first-child {
-        margin-top: 0;
-      }
-
-      >.v-treeview-node__root {
-        min-height: 44px !important;
-      }
-    }
-
-    .v-treeview-node {
-      .v-treeview-node__toggle {
-        display: none !important;
-      }
-
-      &>.v-treeview-node__root:before {
-        border-radius: 6px;
-        z-index: -1;
-      }
-
-      &>.v-treeview-node__root:hover:before {
-        opacity: 0 !important;
-      }
-
-      .v-treeview-node__children {
-        .v-treeview-node__label {
-          >button>span {
-            font-size: 0.875rem;
-          }
-        }
-      }
-    }
-
-    .v-treeview-node--click[aria-expanded="true"] {
-      &>.v-treeview-node__root:before {
-        opacity: 0 !important;
-      }
-    }
-
-    .v-treeview-node[aria-expanded="true"] {
-      &>.v-treeview-node__root>.v-treeview-node__content
-      >.v-treeview-node__label>button {
-        >.anticon,
-        >.v-icon.mdi-chevron-down {
-          transform: rotate(-180deg);
-        }
-      }
-    }
-
-    .v-treeview-node__label {
-      &>button {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        // justify-content: center;
-      }
-
-      & .anticon,
-      & .v-icon.mdi-chevron-down {
-        margin-left: auto;
-        animation-duration: 0.5s;
-      }
-    }
-  }
-
-  .v-treeview-node--active {
-    &:before {
-      opacity: 0 !important;
-    }
-  }
-
-  &.v-navigation-drawer--mini-variant {
-    .home {
-      display: none;
-    }
-
-    .v-treeview-node__content {
-      margin-left: 0;
-    }
-
-    .v-treeview-node__content span:not(.v-icon),
-    .v-treeview-node__root>button,
-    .v-treeview-node__level,
-    .v-treeview-node__content .v-icon.mdi-chevron-down,
-    .v-treeview-node__content .anticon {
-      display: none;
-    }
-
-    .v-navigation-drawer__append {
-      display: none;
-    }
-  }
-}
 
 .chart {
   height: 100%;
@@ -443,12 +231,12 @@ a {
   .v-application.#{$theme}-mode {
     min-width: 1000px;
 
-    .head-logo {
+    .icon-datepicker-color {
-      gap: 8px;
+      color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
     }
 
-    .v-navigation-drawer {
+    .head-logo {
-      background: map-deep-get($config, #{$theme}, "menu-bg-color");
+      gap: 8px;
     }
 
     .v-window__container {
@@ -461,51 +249,19 @@ a {
       }
     }
 
-    ::-webkit-scrollbar {
-      width: 4px;
-      border-radius: 3px;
-    }
-
-    ::-webkit-scrollbar-track {
-      background-color: map-deep-get($config, #{$theme}, "scrollbar-track");
-    }
-
-    ::-webkit-scrollbar-thumb {
-      width: 4px;
-      border-radius: 3px;
-      background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
-      background-clip: content-box;
-    }
-
     .search-box-label {
       color: map-deep-get($config, #{$theme}, "v-select-label-color");
     }
 
-    .header {
+    // .header {
-      background-color: map-deep-get($config, #{$theme}, "header-backgroud");
+    //   background-color: map-deep-get($config, #{$theme}, "header-backgroud");
-      border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-header-border");
+    //   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");
     }
 
-    .btn-header {
-      background-color: map-deep-get($config, #{$theme}, "v-btn-header-background");
-      border:1px solid map-deep-get($config, #{$theme}, "v-btn-header-border");
-      color: map-deep-get($config, #{$theme}, "v-btn-header-text");
-    }
-
-    .container--fluid {
-      background-color: map-deep-get($config, #{$theme}, "container-fluid");
-
-      .menu-container {
-        height:calc(100vh - 60px);
-        overflow-y: auto;
-        border-right: 1px solid map-deep-get($config, #{$theme}, "v-sidebar-border") ;
-      }
-    }
-
     .v-icon {
       &.icon-orange {
         svg {
@@ -527,7 +283,6 @@ a {
 
       }
 
-
       &.custom-chevron-down {
 
         fill:map-deep-get($config,
@@ -617,12 +372,6 @@ a {
       }
     }
 
-    .v-navigation-drawer__append {
-      >p {
-        color: map-deep-get($config, #{$theme}, "v-banner-border-color" ) !important;
-      }
-    }
-
     .border-bottom-1 {
       border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color");
     }
@@ -659,130 +408,6 @@ a {
       height: 282px;
     }
 
-    .v-treeview {
-      .v-treeview-node+.v-treeview-node {
-        margin-top: 2px;
-      }
-
-      .v-treeview-node__root+.v-treeview-node__children {
-        margin-top: 2px;
-      }
-
-      &>.v-treeview-node {
-        .v-treeview-node__root {
-          border-radius: 8px;
-          &:hover {
-            background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color" );
-          }
-          .v-treeview-node__content {
-            .v-treeview-node__label {
-              color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
-            }
-          }
-
-        }
-
-        &[aria-expanded="true"]{
-
-          // Level 1
-          &>.v-treeview-node__root {
-            background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg" );
-            border: 1px solid map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
-            color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
-
-            &:before {
-              background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor");
-            }
-
-            .v-treeview-node__content {
-              .v-treeview-node__label {
-                color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
-              }
-
-              .v-icon:first-child,
-              .v-icon:first-child::before {
-                color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
-              }
-            }
-          }
-
-          &>.v-treeview-node__children {
-            // Level 2
-            .v-treeview-node__root {
-              color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
-              &:hover {
-                background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor");
-              }
-            }
-            &>[aria-expanded="true"] >.v-treeview-node__root,
-            .v-treeview-node__root.v-treeview-node--active {
-              background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" );
-              .v-treeview-node__content {
-                .v-treeview-node__label {
-                  color: map-deep-get($config, #{$theme}, "card-title-color");
-                }
-
-                .v-icon,
-                .v-icon::before,
-                .anticon {
-                  color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
-                }
-              }
-            }
-            
-            // Level 3
-            .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 {
-                    border-width: 0;
-                  }
-
-                  &:hover {
-                    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");
-                      }
-                    }
-
-                  }
-
-                  &.v-treeview-node--active {
-                    // color: map-deep-get($config, #{$theme}, "card-title-color");
-                    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");
-                      }
-      
-                      .v-icon,
-                      .v-icon::before,
-                      .anticon {
-                        color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
-                      }
-                    }
-                  }
-
-                }
-              }
-
-            }
-
-          }
-        }
-      }
-    }
-
     .vc-weeks {
       >.vc-weekday {
         background-color: map-deep-get($config,

assets/scss/common/button.scss

@@ -140,6 +140,7 @@
       &.ant-btn-popup-default {
         background:map-deep-get($config, #{$theme}, "ant-btn-popup-bg");
         color:map-deep-get($config, #{$theme}, "ant-btn-popup-color");
+        border: 1px solid map-deep-get($config, #{$theme}, "ant-btn-popup-border");
       }
 
       &.ant-btn-danger {

assets/scss/common/pagination.scss

@@ -0,0 +1,43 @@
+@each $theme in dark, light {
+
+  // @include theme($theme);
+  .v-application.#{$theme}-mode {
+
+    .ant-pagination-item,
+    .ant-pagination-prev,
+    .ant-pagination-next {
+      // border: none !important;
+      // box-shadow: none !important;
+      background-color: map-deep-get($config, #{$theme}, "paging-background") !important;
+      color: map-deep-get($config, #{$theme}, "paging-text") !important;
+      border: 0.5px solid #424242;
+
+      .ant-pagination-item-link {
+        border: none;
+        background-color: map-deep-get($config, #{$theme}, "paging-background") !important;
+      }
+    }
+
+    .ant-pagination-item-active {
+      border-color: #1890ff !important;
+      color: #1890ff !important
+    }
+
+    .ant-pagination-options-size-changer {
+      .ant-select-selection {
+        border: 0.5px solid #424242;
+        background: map-deep-get($config, #{$theme}, "paging-background") !important;
+        color: map-deep-get($config, #{$theme}, "paging-text") !important;
+      }
+
+      .ant-select-arrow {
+        color: map-deep-get($config, #{$theme}, "paging-text") !important;
+      }
+
+      .ant-select-selection__rendered {
+        margin-right: 30px;
+      }
+    }
+
+  }
+}

assets/scss/datepicker.scss

@@ -66,6 +66,10 @@
           }
         }
       }
+      
+      .v-icon {
+        color: map-deep-get($config, #{$theme}, "v-icon-chevron-down") !important;
+      }
     }
 
     .v-input__custom {

assets/scss/layout.scss

@@ -0,0 +1,433 @@
+.loading {
+  z-index: 99;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(0, 0, 0, 0.4);
+  //box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
+}
+
+.v-spinner {
+  top: 50%;
+  left: 50%;
+}
+
+::v-deep {
+  .container--fluid {
+    .menu-container {
+      height:calc(100vh - 60px);
+      overflow-y: auto;
+      min-width: 200px;
+      
+      // v-navigation-drawer (sidebar)
+      .v-navigation-drawer {
+        box-shadow: none; // 0 0 10px 0 rgba(0, 0, 0, 0.15);
+        min-width: 200px !important;
+        // transform: none !important;
+        // visibility: visible !important;
+    
+        &--fixed {
+          z-index: 20;
+        }
+    
+        .home {
+          display: block;
+          line-height: 0;
+        }
+    
+        &__border {
+          display: none;
+        }
+    
+        &__append {
+          padding: 0 17px;
+          margin: 0 0 26px;
+    
+          >p {
+            margin-bottom: 0;
+          }
+        }
+    
+        .v-treeview {
+          padding: 0 10px;
+          box-sizing: border-box;
+    
+          .v-treeview-node__level {
+            width: 9px;
+          }
+    
+          >.v-treeview-node {
+            margin-top: 10px;
+    
+            &:first-child {
+              margin-top: 0;
+            }
+    
+            >.v-treeview-node__root {
+              min-height: 44px !important;
+            }
+          }
+    
+          .v-treeview-node {
+            .v-treeview-node__toggle {
+              display: none !important;
+            }
+    
+            &>.v-treeview-node__root:before {
+              border-radius: 6px;
+              z-index: -1;
+            }
+    
+            &>.v-treeview-node__root:hover:before {
+              opacity: 0 !important;
+            }
+    
+            .v-treeview-node__children {
+              .v-treeview-node__label {
+                >button>span {
+                  font-size: 0.875rem;
+                }
+              }
+            }
+          }
+    
+          .v-treeview-node--click[aria-expanded="true"] {
+            &>.v-treeview-node__root:before {
+              opacity: 0 !important;
+            }
+          }
+    
+          .v-treeview-node[aria-expanded="true"] {
+            &>.v-treeview-node__root>.v-treeview-node__content
+            >.v-treeview-node__label>button {
+              >.anticon,
+              >.v-icon.mdi-chevron-down {
+                transform: rotate(-180deg);
+              }
+            }
+          }
+    
+          .v-treeview-node__label {
+            &>button {
+              width: 100%;
+              display: flex;
+              align-items: center;
+              // justify-content: center;
+            }
+    
+            & .anticon,
+            & .v-icon.mdi-chevron-down {
+              margin-left: auto;
+              animation-duration: 0.5s;
+              font-size: 12px;
+            }
+          }
+        }
+    
+        .v-treeview-node--active {
+          &:before {
+            opacity: 0 !important;
+          }
+        }
+    
+        &.v-navigation-drawer--mini-variant {
+          .home {
+            display: none;
+          }
+    
+          .v-treeview-node__content {
+            margin-left: 0;
+          }
+    
+          .v-treeview-node__content span:not(.v-icon),
+          .v-treeview-node__root>button,
+          .v-treeview-node__level,
+          .v-treeview-node__content .v-icon.mdi-chevron-down,
+          .v-treeview-node__content .anticon {
+            display: none;
+          }
+    
+          .v-navigation-drawer__append {
+            display: none;
+          }
+        }
+      }
+     }
+  }
+
+  // router-tab header
+  .router-tab {
+    height: 100%;
+
+    &__header {
+      align-items: flex-end;
+      height: 52px;
+      margin: -5px -5px 0;
+      padding: 0 20px;
+      box-sizing: border-box;
+      border-bottom: none !important;
+    }
+
+    &-page {
+      height: 100%;
+    }
+
+    & .router-tab__container {
+      overflow-y: auto;
+      height: calc(100vh - 110px);
+      max-height: calc(100vh - 115px);
+      padding: 20px;
+    }
+
+    .router-tab__slot-end {
+      align-self: center;
+      display: flex;
+      align-items: center;
+
+      >* {
+        flex: none;
+        margin-right: 6px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+
+      .v-menu+.v-btn {
+        padding: 0 3px;
+      }
+
+      .v-btn {
+        border-radius: 4px;
+      }
+    }
+
+    .router-tab__nav {
+      padding-left: 0;
+    }
+
+    .router-tab__scroll {
+      height: 46px;
+    }
+
+    .router-tab__item {
+      height: 46px;
+      padding: 0 !important;
+
+      &:first-child {
+        border-left: none
+      }
+
+      &>span {
+        font-size: 14px;
+      }
+
+      &.is-active {
+        border-bottom: 2px solid;
+        &>span {
+          font-weight: 400;
+        }
+      }
+
+      &+.router-tab__item {
+        margin-left: 16px;
+      }
+      border:none;
+    }
+
+  }
+}
+
+@each $theme in dark, light {
+  @include theme($theme);
+  
+  .v-application.#{$theme}-mode {
+    ::v-deep {
+
+      ::-webkit-scrollbar {
+        width: 4px;
+        border-radius: 3px;
+      }
+  
+      ::-webkit-scrollbar-track {
+        background-color: map-deep-get($config, #{$theme}, "scrollbar-track");
+      }
+  
+      ::-webkit-scrollbar-thumb {
+        width: 4px;
+        border-radius: 3px;
+        background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
+        background-clip: content-box;
+      }
+
+      .header {
+        background-color: map-deep-get($config, #{$theme}, "header-backgroud");
+        border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-header-border");
+      }
+
+      .btn-header {
+        background-color: map-deep-get($config, #{$theme}, "v-btn-header-background");
+        border:1px solid map-deep-get($config, #{$theme}, "v-btn-header-border");
+        color: map-deep-get($config, #{$theme}, "v-btn-header-text");
+      }
+
+      .container--fluid {
+        background-color: map-deep-get($config, #{$theme}, "container-fluid");
+        .menu-container {
+          border-right: 1px solid map-deep-get($config, #{$theme}, "v-sidebar-border") ;
+          .v-navigation-drawer__append {
+            >p {
+              color: map-deep-get($config, #{$theme}, "v-banner-border-color" ) !important;
+            }
+          }
+        }
+      }
+  
+      .v-navigation-drawer {
+        background: map-deep-get($config, #{$theme}, "menu-bg-color");
+      }
+
+      .v-treeview {
+        .v-treeview-node+.v-treeview-node {
+          margin-top: 2px;
+        }
+  
+        .v-treeview-node__root+.v-treeview-node__children {
+          margin-top: 2px;
+        }
+  
+        &>.v-treeview-node {
+          .v-treeview-node__root {
+            border-radius: 8px;
+            &:hover {
+              background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color" );
+            }
+            .v-treeview-node__content {
+              .v-icon,
+              .v-treeview-node__label {
+                color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
+              }
+              
+              .anticon.anticon-down {
+                color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
+              }
+            }
+          }
+  
+          &[aria-expanded="true"]{
+            // Level 1
+            &>.v-treeview-node__root {
+              background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg" );
+              border: 1px solid map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+              color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
+  
+              &:before {
+                background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor");
+              }
+  
+              .v-treeview-node__content {
+                .v-treeview-node__label {
+                  color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
+                }
+  
+                .v-icon:first-child,
+                .v-icon:first-child::before,
+                .anticon.anticon-down {
+                  color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+                }
+                
+              }
+            }
+  
+            &>.v-treeview-node__children {
+              // Level 2
+              .v-treeview-node__root {
+                color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
+  
+                &:hover {
+                  background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor");
+                }
+                
+                .v-treeview-node__content {
+                  .v-icon,
+                  .v-icon::before {
+                    color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
+                  }
+                }
+              }
+  
+              &>[aria-expanded="true"] >.v-treeview-node__root,
+              .v-treeview-node__root.v-treeview-node--active {
+                background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" );
+                .v-treeview-node__content {
+                  .v-treeview-node__label {
+                    color: map-deep-get($config, #{$theme}, "card-title-color");
+                  }
+  
+                  .v-icon,
+                  .v-icon::before,
+                  .anticon.anticon-down {
+                    color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+                  }
+                }
+              }
+              
+              // Level 3
+              .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 {
+                      border-width: 0;
+                    }
+  
+                    &:hover {
+                      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");
+                        }
+                      }
+  
+                    }
+  
+                    &.v-treeview-node--active {
+                      // color: map-deep-get($config, #{$theme}, "card-title-color");
+                      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");
+                        }
+        
+                        .v-icon,
+                        .v-icon::before,
+                        .anticon {
+                          color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+                        }
+                      }
+                    }
+  
+                  }
+                }
+  
+              }
+  
+            }
+          }
+        }
+      }
+
+    }
+  }
+}

assets/scss/var.scss

@@ -181,6 +181,10 @@ $config: (
     ant-checkbox-border: #424242,
     ant-btn-popup-bg: #212224,
     ant-btn-popup-color: #FFFFFFD9,
+    ant-btn-popup-border: #424242,
+    paging-background: #212224,
+    paging-text: #FFFFFFD9,
+    icon-datepicker-color: #FFFFFF73,
   ),
   light: (w-g5: $--color-gray_555,
     g5-w: $--color-white,
@@ -325,5 +329,9 @@ $config: (
     ant-checkbox-border: #D9D9D9,
     ant-btn-popup-bg: #FFFFFF,
     ant-btn-popup-color: #000000E0,
+    ant-btn-popup-border: #D9D9D9,
+    paging-background: #FFFFFF,
+    paging-text: #000000E0,
+    icon-datepicker-color: #00000073,
   ),
 );

components/common/CheckBox.vue

@@ -1,14 +1,12 @@
 <template>
   <v-row class="search-box" align="center" no-gutters>
-    <v-col v-if="label" :cols="labelCols">
+    <v-col v-if="label" :cols="labelCols" >
       <label for="" class="search-box-label">
         <v-icon v-if="iconShow" small :class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
         {{ label }}
       </label>
     </v-col>
     <v-col :cols="label ? textCols : ''">
-
-
       <a-checkbox v-model="chkValue" :disabled="disabledFlag" :readonly="readonly || false"
         :required="required || false" @change="modifyValue">
       </a-checkbox>

components/common/Datepicker.vue

@@ -19,8 +19,11 @@
 					readonly
 					outlined
 				>
-					<template #append >
+					<!-- <template #append >
 						<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;" />
 					</template>
 					<template #append-outer>
 						<div ref="startpicker-container" id="startpicker-container"></div>

components/common/Grid.vue

@@ -158,7 +158,7 @@ export default {
 			}, 500);
 		},
 	},
-	created() {},
+	created() { },
 	async mounted() {
 		// console.log(this.dataPath);
 		if (this.gridName) {
@@ -166,9 +166,9 @@ export default {
 
 			this.scrollBody = document
 				.getElementsByClassName('tui-grid-rside-area')
-				[
+			[
-					document.getElementsByClassName('tui-grid-rside-area').length - 1
+				document.getElementsByClassName('tui-grid-rside-area').length - 1
-				].getElementsByClassName('tui-grid-body-area')[0];
+			].getElementsByClassName('tui-grid-body-area')[0];
 
 			this.scrollBody.addEventListener('scroll', e => {
 				this.gridScrollTop = e.target.scrollTop;
@@ -344,14 +344,14 @@ export default {
 					'row-removed',
 				);
 			}
-			
+
 			await this.gridInstance.invoke(
 				e.rowEditingFg != undefined ? 'setValue' : this.editorGrid ? 'finishEditing' : 'setValue',
 				rowIdxKey,
 				columnName,
 				value,
 			);
-			
+
 
 			if (isBaseRow) {
 				const isSameData = await this.compareData(editingData);
@@ -606,18 +606,20 @@ export default {
 			list.map(item => this.gridInstance.invoke('check', item));
 		},
 		refreshLayout() {
-			// console.log("---------DEBUG---refreshLayout: ");
+			setTimeout(() => {
-			this.gridInstance.invoke('refreshLayout');
+				this.gridInstance.invoke('refreshLayout');
+			}, 150);
+			// this.gridInstance.invoke('refreshLayout');
 		},
-		refreshGrid(){
+		refreshGrid() {
 			// console.log("refreshLayout",this.$refs['tuigrid' + this.gridName])
-      var store = this.$refs['tuigrid' + this.gridName].gridInstance.store;
+			var store = this.$refs['tuigrid' + this.gridName].gridInstance.store;
-      var containerEl = this.$refs['tuigrid' + this.gridName].$el;
+			var containerEl = this.$refs['tuigrid' + this.gridName].$el;
-      // var containerEl = document.querySelector('.tui-grid-container')
+			// var containerEl = document.querySelector('.tui-grid-container')
-      var parentEl = containerEl.parentElement;
+			var parentEl = containerEl.parentElement;
 
 			// console.log("---------DEBUG---containerEl: ",containerEl);
-      // console.log('---------DEBUG---parentEl: ', parentEl)
+			// console.log('---------DEBUG---parentEl: ', parentEl)
 			// 	function refreshLayout(store, containerEl, parentEl) {
 			var dimension = store.dimension;
 			var autoWidth = dimension.autoWidth, fitToParentHeight = dimension.fitToParentHeight;
@@ -636,35 +638,35 @@ export default {
 			// 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;
+				var _b = getComputedStyle(parentEl), paddingTop = _b.paddingTop, paddingBottom = _b.paddingBottom;
-					this.setHeight(store, parentEl.clientHeight - (parseFloat(paddingTop) + parseFloat(paddingBottom)));
+				this.setHeight(store, parentEl.clientHeight - (parseFloat(paddingTop) + parseFloat(paddingBottom)));
 			}
-    // }
+			// }
 		},
-    setOffsetTop(store, offsetTop) {
+		setOffsetTop(store, offsetTop) {
 			// console.log("---------DEBUG---setOffsetTop: ");
-      store.dimension.offsetTop = offsetTop;
+			store.dimension.offsetTop = offsetTop;
-    },
+		},
-    setWidth(_a, width, autoWidth) {
+		setWidth(_a, width, autoWidth) {
 			// console.log("---------DEBUG---setWidth: ");
-      var dimension = _a.dimension;
+			var dimension = _a.dimension;
-      dimension.autoWidth = autoWidth;
+			dimension.autoWidth = autoWidth;
-      dimension.width = width;
+			dimension.width = width;
-    },
+		},
-    setHeaderHeight(store, height) {
+		setHeaderHeight(store, height) {
 			// console.log("---------DEBUG---setHeaderHeight: ");
-      store.dimension.headerHeight = height;
+			store.dimension.headerHeight = height;
-    },
+		},
-    setOffsetLeft(store, offsetLeft) {
+		setOffsetLeft(store, offsetLeft) {
 			// console.log("---------DEBUG---setOffsetLeft: ");
-      store.dimension.offsetLeft = offsetLeft;
+			store.dimension.offsetLeft = offsetLeft;
-    },
+		},
-		setHeight(_a,height){
+		setHeight(_a, height) {
 			// console.log("---------DEBUG---setHeight: ");
-      var dimension = _a.dimension;
+			var dimension = _a.dimension;
-      var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth;
+			var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth;
-      dimension.bodyHeight = height - headerHeight - summaryHeight - tableBorderWidth;
+			dimension.bodyHeight = height - headerHeight - summaryHeight - tableBorderWidth;
-    },
+		},
 		sendSelectedRowData(eventRowKey) {
 			if (this.selectedRowDataWatchFlag) {
 				var rowKey =

components/common/Pagination.vue

@@ -0,0 +1,93 @@
+
+<template>
+  <div class="custom-pagination">
+    <a-pagination
+      :current="pageNum"
+      :total="totalCount"
+      :page-size="itemsPerPage"
+      :show-size-changer="useLimit"
+      :page-size-options="itemsPerPageArray.map(String)"
+      @change="handlePageChange"
+      @showSizeChange="changePageLeng"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+	props: {
+		useLimit: {
+			type: Boolean,
+			default: true,
+		},
+		totalCount: {
+			type: Number,
+			default: 0,
+		},
+		pageNum: {
+			type: Number,
+			default: 0,
+		},
+		limit: {
+			type: Number,
+			default: 0,
+		},
+		itemsPerPageArray: {
+			type: Array,
+			default: () => [20, 50, 100],
+		},
+	},
+	data() {
+		return {
+			moveToPage: '',
+		};
+	},
+	computed: {
+		page: function() {
+			return this.numberOfPages + '-' + this.lastPage;
+		},
+		lastPage: function() {
+			//grid data가 없을 경우 1 리턴
+			if (this.totalCount == 0) return 1;
+
+			let pageLength = Math.floor(this.totalCount / this.itemsPerPage);
+			if (this.totalCount % this.itemsPerPage > 0) {
+				pageLength++;
+			}
+			return pageLength;
+		},
+		itemsPerPage: function() {
+			return this.limit;
+		},
+		numberOfPages: function() {
+			return Number(this.pageNum);
+		},
+		plusPage: function() {
+			return Number(this.pageNum) + 1;
+		},
+		minusPage: function() {
+			return Number(this.pageNum) - 1;
+		},
+	},
+	watch: {
+		totalCount: function(newData) {
+			return (this.moveToPage = newData > 0 ? this.moveToPage : '');
+		},
+		moveToPage: function() {
+			return (this.moveToPage = this.moveToPage.replaceAll(/[^0-9]/g, ''));
+		},
+	},
+	methods: {	
+		handlePageChange(newPage) {
+		// Emit an event to the parent to load data for the selected page
+		this.$emit('loadData', newPage, this.itemsPerPage);
+		},
+		changePageLeng: function(current, newLimit) {
+			//부모 컴포넌트에서 loadData(데이터 조회) 구현
+			//this.$emit('loadData', this.pageNum, limit);
+			// limit 변경 시 1 페이지로 초기화
+			this.$emit('loadData', 1, newLimit);
+		},
+	},
+};
+</script>

components/common/button/ActionButtons.vue

@@ -2,9 +2,9 @@
 	<div class="d-flex justify-center align-center" 
 		:class="directionBtn === 'vertically'?'flex-row':'flex-column'" 
 		style="gap: 12px">
-		<a-button @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="icons.remove" class="custom-action-btn">
+		<a-button   @click="directionBtn === 'vertically' ? btnActionsFnc('removeRightToLeft') : btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="directionBtn === 'vertically'? icons.remove :icons.add " class="custom-action-btn">
 		</a-button>
-		<a-button   @click="btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="icons.add" class="custom-action-btn">
+		<a-button @click="directionBtn === 'vertically' ? btnActionsFnc('removeRightToLeft') :btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="directionBtn === 'vertically'? icons.add :icons.remove" class="custom-action-btn">
 		</a-button>
 	</div>
 </template>

components/common/chartoptions/LineChart.js

@@ -70,6 +70,7 @@ export default function getLineChartOption({
             },
             splitLine: {
                 lineStyle: {
+                    type: 'dashed', // Options: 'solid', 'dashed', 'dotted'
                     color: isDarkMode ? '#444444' : '#EEEEEE',
                 },
             },

components/common/modal/ChangeUserPswdPopPage.vue

@@ -3,12 +3,13 @@
 		<v-col v-if="item.label" :cols="item.labelCols !== undefined ? item.labelCols : item.cols == 12 ? 2 : 4">
 			<label for="" class="search-box-label">
 				<v-icon
-					x-small
+					v-if="item.iconShow"
-					:color="item.required ? '#fb8200' : 'primary'"
+					small
-					class="mr-1"
+					:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
-					>mdi-record-circle</v-icon
+					>$icoBulletPoint</v-icon
 				>
 				{{ item.label }}
+				<span v-if="item.essential">*</span>
 			</label>
 			<!-- <label for="" class="search-box-label ft-size_14 ft-clr_g-c">
         {{ item.label }}
@@ -39,12 +40,12 @@
 			</template>
 		</v-col>
 
-		<v-dialog v-model="dialog" scrollable width="540px">
+		<v-dialog v-model="dialog" scrollable width="504px">
 			<v-card style="height: 100%">
-				<v-card-title>
+				<v-card-title class="px-4">
-					<span class="custom-title-4">비밀번호 {{ isPassword }}</span>
+					<span class="custom-title-4" style="padding-left: 1px;">비밀번호 {{ isPassword }}</span>
 				</v-card-title>
-				<v-card-text class="pb-4">
+				<v-card-text class="pb-4 px-3">
 					<v-col>
 						<label for="" class="search-box-label">
 							{{ isPassword }}할 비밀번호를 입력하세요
@@ -75,7 +76,7 @@
 				<v-card-actions class="pb-4">
 					<v-spacer></v-spacer>
 					<!-- <v-btn color="primary" dark @click="setUpdate()">확인</v-btn> -->
-					<div class="pr-3">
+					<div class="d-flex" style="gap: 8px">
 						 <a-button @click="close()" class="ant-btn-popup-default">닫기</a-button>
 						 <a-button type="primary" @click="setUpdate()" class="v-btn-add-text">
 							 확인

components/common/modal/EvtObjPop.vue

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

components/icons/anticonAppStore.vue

@@ -0,0 +1,7 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M7.143 1.42969H1.71443C1.55728 1.42969 1.42871 1.55826 1.42871 1.7154V7.14397C1.42871 7.30112 1.55728 7.42969 1.71443 7.42969H7.143C7.30014 7.42969 7.42871 7.30112 7.42871 7.14397V1.7154C7.42871 1.55826 7.30014 1.42969 7.143 1.42969ZM6.21443 6.2154H2.643V2.64397H6.21443V6.2154ZM14.2859 1.42969H8.85728C8.70014 1.42969 8.57157 1.55826 8.57157 1.7154V7.14397C8.57157 7.30112 8.70014 7.42969 8.85728 7.42969H14.2859C14.443 7.42969 14.5716 7.30112 14.5716 7.14397V1.7154C14.5716 1.55826 14.443 1.42969 14.2859 1.42969ZM13.3573 6.2154H9.78586V2.64397H13.3573V6.2154ZM7.143 8.57255H1.71443C1.55728 8.57255 1.42871 8.70112 1.42871 8.85826V14.2868C1.42871 14.444 1.55728 14.5725 1.71443 14.5725H7.143C7.30014 14.5725 7.42871 14.444 7.42871 14.2868V8.85826C7.42871 8.70112 7.30014 8.57255 7.143 8.57255ZM6.21443 13.3583H2.643V9.78683H6.21443V13.3583ZM14.2859 8.57255H8.85728C8.70014 8.57255 8.57157 8.70112 8.57157 8.85826V14.2868C8.57157 14.444 8.70014 14.5725 8.85728 14.5725H14.2859C14.443 14.5725 14.5716 14.444 14.5716 14.2868V8.85826C14.5716 8.70112 14.443 8.57255 14.2859 8.57255ZM13.3573 13.3583H9.78586V9.78683H13.3573V13.3583Z" 
+            fill="currentColor" />
+    </svg>
+</template>

components/icons/anticonBulb.vue

@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8.14258 14.7143H3.85686C3.77829 14.7143 3.71401 14.7786 3.71401 14.8571V15.4286C3.71401 15.7446 3.96936 16 4.28544 16H7.71401C8.03008 16 8.28544 15.7446 8.28544 15.4286V14.8571C8.28544 14.7786 8.22115 14.7143 8.14258 14.7143ZM5.99972 0C2.76579 0 0.142578 2.62321 0.142578 5.85714C0.142578 8.025 1.32115 9.91786 3.07115 10.9304V13C3.07115 13.3161 3.32651 13.5714 3.64258 13.5714H8.35686C8.67294 13.5714 8.92829 13.3161 8.92829 13V10.9304C10.6783 9.91786 11.8569 8.025 11.8569 5.85714C11.8569 2.62321 9.23365 0 5.99972 0ZM8.28365 9.81786L7.64258 10.1893V12.2857H4.35686V10.1893L3.71579 9.81786C2.31044 9.00536 1.42829 7.50893 1.42829 5.85714C1.42829 3.33214 3.47472 1.28571 5.99972 1.28571C8.52472 1.28571 10.5711 3.33214 10.5711 5.85714C10.5711 7.50893 9.68901 9.00536 8.28365 9.81786Z" fill="currentColor" />
+    </svg>
+</template>

components/icons/anticonDesktop.vue

@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.4286 0.359253H0.571429C0.255357 0.359253 0 0.61461 0 0.930682V9.78782C0 10.1039 0.255357 10.3593 0.571429 10.3593H7.35714V12.3593H4.28571C4.12857 12.3593 4 12.4878 4 12.645V13.5021C4 13.5807 4.06429 13.645 4.14286 13.645H11.8571C11.9357 13.645 12 13.5807 12 13.5021V12.645C12 12.4878 11.8714 12.3593 11.7143 12.3593H8.64286V10.3593H15.4286C15.7446 10.3593 16 10.1039 16 9.78782V0.930682C16 0.61461 15.7446 0.359253 15.4286 0.359253ZM14.7143 9.07354H1.28571V1.64497H14.7143V9.07354Z" fill="currentColor" />
+    </svg>
+</template>

components/icons/anticonDrag.vue

@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.0943 7.89787L12.8157 6.09966C12.7967 6.08466 12.7738 6.07534 12.7496 6.07276C12.7255 6.07018 12.7012 6.07444 12.6794 6.08507C12.6576 6.09569 12.6392 6.11224 12.6264 6.13282C12.6135 6.15341 12.6067 6.17719 12.6068 6.20144V7.3568H8.64251V3.39251H9.79966C9.9068 3.39251 9.96751 3.26751 9.90144 3.18359L8.10144 0.905014C8.08953 0.889595 8.07424 0.877112 8.05675 0.868523C8.03926 0.859935 8.02003 0.855469 8.00055 0.855469C7.98106 0.855469 7.96184 0.859935 7.94435 0.868523C7.92686 0.877112 7.91157 0.889595 7.89966 0.905014L6.09966 3.18359C6.08466 3.20265 6.07534 3.22555 6.07276 3.24967C6.07018 3.27379 6.07444 3.29815 6.08507 3.31995C6.09569 3.34176 6.11224 3.36013 6.13282 3.37296C6.15341 3.3858 6.17719 3.39257 6.20144 3.39251H7.3568V7.3568H3.39251V6.19966C3.39251 6.09252 3.26751 6.0318 3.18359 6.09787L0.905014 7.89787C0.889595 7.90979 0.877112 7.92508 0.868523 7.94256C0.859935 7.96005 0.855469 7.97928 0.855469 7.99877C0.855469 8.01825 0.859935 8.03748 0.868523 8.05497C0.877112 8.07246 0.889595 8.08774 0.905014 8.09966L3.1818 9.89966C3.26573 9.96573 3.39073 9.9068 3.39073 9.79787V8.64252H7.35501V12.6068H6.19787C6.09073 12.6068 6.03001 12.7318 6.09609 12.8157L7.89609 15.0925C7.94787 15.1586 8.04787 15.1586 8.09787 15.0925L9.89787 12.8157C9.96394 12.7318 9.90501 12.6068 9.79608 12.6068H8.64251V8.64252H12.6068V9.79966C12.6068 9.9068 12.7318 9.96752 12.8157 9.90144L15.0925 8.10144C15.1079 8.08937 15.1203 8.07398 15.129 8.05644C15.1376 8.03889 15.1422 8.01964 15.1423 8.00009C15.1425 7.98054 15.1383 7.9612 15.13 7.94351C15.1216 7.92582 15.1095 7.91022 15.0943 7.89787Z" fill="currentColor"/>
+    </svg>
+</template>

components/icons/anticonFileText.vue

@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M13.1174 4.01071L9.27458 0.167857C9.16744 0.0607143 9.0228 0 8.87101 0H1.2853C0.969224 0 0.713867 0.255357 0.713867 0.571429V15.4286C0.713867 15.7446 0.969224 16 1.2853 16H12.7139C13.0299 16 13.2853 15.7446 13.2853 15.4286V4.41607C13.2853 4.26429 13.2246 4.11786 13.1174 4.01071ZM11.9674 4.67857H8.60673V1.31786L11.9674 4.67857ZM11.9996 14.7143H1.99958V1.28571H7.39244V5.14286C7.39244 5.34177 7.47146 5.53254 7.61211 5.67319C7.75276 5.81384 7.94353 5.89286 8.14244 5.89286H11.9996V14.7143ZM6.85673 9.89286H3.57101C3.49244 9.89286 3.42815 9.95714 3.42815 10.0357V10.8929C3.42815 10.9714 3.49244 11.0357 3.57101 11.0357H6.85673C6.9353 11.0357 6.99958 10.9714 6.99958 10.8929V10.0357C6.99958 9.95714 6.9353 9.89286 6.85673 9.89286ZM3.42815 7.60714V8.46429C3.42815 8.54286 3.49244 8.60714 3.57101 8.60714H10.4282C10.5067 8.60714 10.571 8.54286 10.571 8.46429V7.60714C10.571 7.52857 10.5067 7.46429 10.4282 7.46429H3.57101C3.49244 7.46429 3.42815 7.52857 3.42815 7.60714Z" fill="currentColor" />
+    </svg>
+</template>

components/icons/anticonLineChart.vue

@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M13.714 12.0006H1.42829V0.857701C1.42829 0.779129 1.36401 0.714844 1.28544 0.714844H0.285435C0.206864 0.714844 0.142578 0.779129 0.142578 0.857701V13.1434C0.142578 13.222 0.206864 13.2863 0.285435 13.2863H13.714C13.7926 13.2863 13.8569 13.222 13.8569 13.1434V12.1434C13.8569 12.0648 13.7926 12.0006 13.714 12.0006ZM3.31758 9.2452C3.37294 9.30056 3.46222 9.30056 3.51936 9.2452L5.98901 6.78806L8.26758 9.08092C8.32294 9.13627 8.41401 9.13627 8.46937 9.08092L13.3872 4.16484C13.4426 4.10949 13.4426 4.01842 13.3872 3.96306L12.6801 3.25592C12.6532 3.22933 12.617 3.21442 12.5792 3.21442C12.5414 3.21442 12.5051 3.22933 12.4783 3.25592L8.37115 7.36127L6.09615 5.07199C6.0693 5.0454 6.03304 5.03049 5.99526 5.03049C5.95747 5.03049 5.92122 5.0454 5.89437 5.07199L2.61222 8.33449C2.58564 8.36134 2.57072 8.39759 2.57072 8.43538C2.57072 8.47316 2.58564 8.50942 2.61222 8.53627L3.31758 9.2452Z" fill="currentColor" />
+    </svg>
+</template>

components/icons/anticonMessage.vue

@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M7.14296 8C7.14296 8.22733 7.23326 8.44535 7.39401 8.60609C7.55475 8.76684 7.77277 8.85714 8.0001 8.85714C8.22743 8.85714 8.44545 8.76684 8.60619 8.60609C8.76694 8.44535 8.85724 8.22733 8.85724 8C8.85724 7.77267 8.76694 7.55465 8.60619 7.39391C8.44545 7.23316 8.22743 7.14286 8.0001 7.14286C7.77277 7.14286 7.55475 7.23316 7.39401 7.39391C7.23326 7.55465 7.14296 7.77267 7.14296 8ZM10.7144 8C10.7144 8.22733 10.8047 8.44535 10.9654 8.60609C11.1262 8.76684 11.3442 8.85714 11.5715 8.85714C11.7989 8.85714 12.0169 8.76684 12.1776 8.60609C12.3384 8.44535 12.4287 8.22733 12.4287 8C12.4287 7.77267 12.3384 7.55465 12.1776 7.39391C12.0169 7.23316 11.7989 7.14286 11.5715 7.14286C11.3442 7.14286 11.1262 7.23316 10.9654 7.39391C10.8047 7.55465 10.7144 7.77267 10.7144 8ZM3.57153 8C3.57153 8.22733 3.66184 8.44535 3.82258 8.60609C3.98333 8.76684 4.20134 8.85714 4.42867 8.85714C4.656 8.85714 4.87402 8.76684 5.03476 8.60609C5.19551 8.44535 5.28582 8.22733 5.28582 8C5.28582 7.77267 5.19551 7.55465 5.03476 7.39391C4.87402 7.23316 4.656 7.14286 4.42867 7.14286C4.20134 7.14286 3.98333 7.23316 3.82258 7.39391C3.66184 7.55465 3.57153 7.77267 3.57153 8ZM15.3787 4.9C14.9751 3.94107 14.3965 3.08036 13.659 2.34107C12.9267 1.60607 12.0573 1.02182 11.1001 0.621429C10.118 0.208929 9.0751 0 8.0001 0H7.96439C6.88224 0.00535714 5.83403 0.219643 4.84832 0.641071C3.89931 1.04557 3.03807 1.63085 2.3126 2.36429C1.58224 3.10179 1.00903 3.95893 0.612601 4.91429C0.201887 5.90357 -0.00525583 6.95536 0.000101308 8.0375C0.00616068 9.27763 0.299551 10.4995 0.857244 11.6071V14.3214C0.857244 14.5393 0.943787 14.7482 1.09783 14.9023C1.25188 15.0563 1.46082 15.1429 1.67867 15.1429H4.39474C5.50241 15.7006 6.72426 15.9939 7.96439 16H8.00189C9.07153 16 10.109 15.7929 11.0858 15.3875C12.0382 14.9919 12.9043 14.4144 13.6358 13.6875C14.3733 12.9571 14.9537 12.1036 15.359 11.1518C15.7805 10.1661 15.9947 9.11786 16.0001 8.03572C16.0055 6.94821 15.7947 5.89286 15.3787 4.9ZM12.6805 12.7214C11.4287 13.9607 9.76796 14.6429 8.0001 14.6429H7.96974C6.89296 14.6375 5.82332 14.3696 4.87867 13.8661L4.72867 13.7857H2.21439V11.2714L2.13403 11.1214C1.63046 10.1768 1.3626 9.10714 1.35724 8.03036C1.3501 6.25 2.03046 4.57857 3.27867 3.31964C4.5251 2.06071 6.19117 1.36429 7.97153 1.35714H8.00189C8.89474 1.35714 9.76081 1.53036 10.5769 1.87321C11.3733 2.20714 12.0876 2.6875 12.7019 3.30179C13.3144 3.91429 13.7965 4.63036 14.1305 5.42679C14.4769 6.25179 14.6501 7.12679 14.6465 8.03036C14.6358 9.80893 13.9376 11.475 12.6805 12.7214Z" fill="currentColor" />
+    </svg>
+</template>

components/icons/anticonNoteExpand.vue

@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.8571 8.78318C15.9357 8.78318 16 8.71889 16 8.64032V7.64032C16 7.56175 15.9357 7.49746 15.8571 7.49746H4.17857C4.05067 7.18077 3.83102 6.90955 3.54782 6.71864C3.26463 6.52772 2.93082 6.42582 2.58929 6.42603C1.64286 6.42603 0.875 7.19389 0.875 8.14032C0.875 9.08675 1.64286 9.8546 2.58929 9.8546C3.30893 9.8546 3.925 9.41175 4.17857 8.78318H6.8625V11.4975C6.8625 12.4832 7.6625 13.2832 8.64821 13.2832H15.8571C15.9357 13.2832 16 13.2189 16 13.1403V12.1403C16 12.0617 15.9357 11.9975 15.8571 11.9975H8.64821C8.37143 11.9975 8.14821 11.7742 8.14821 11.4975V8.78318H15.8571ZM7 3.99746H11.7143V5.75103C11.7143 5.89568 11.8839 5.9796 11.9964 5.88853L15.0768 3.45639C15.1661 3.38675 15.1661 3.25282 15.0768 3.18318L11.9964 0.749247C11.8821 0.658175 11.7143 0.740318 11.7143 0.886747V2.64032H7C6.92143 2.64032 6.85714 2.7046 6.85714 2.78318V3.8546C6.85714 3.93318 6.92143 3.99746 7 3.99746Z" fill="currentColor" />
+    </svg>
+</template>

components/icons/anticonPieChart.vue

@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14.2854 8.10545H7.89259V1.7126C7.89259 1.63402 7.8283 1.56974 7.74973 1.56974H7.28545C6.34741 1.5682 5.41833 1.75216 4.55165 2.11103C3.68497 2.4699 2.89781 2.99659 2.23545 3.66081C1.58314 4.3111 1.06339 5.08193 0.705089 5.93045C0.332241 6.81052 0.140919 7.75681 0.142589 8.7126C0.141053 9.65063 0.32501 10.5797 0.683878 11.4464C1.04275 12.3131 1.56944 13.1002 2.23366 13.7626C2.88902 14.418 3.6533 14.934 4.5033 15.293C5.38337 15.6658 6.32966 15.8571 7.28545 15.8555C8.22348 15.857 9.15257 15.673 10.0192 15.3142C10.8859 14.9553 11.6731 14.4286 12.3354 13.7644C12.9908 13.109 13.5069 12.3447 13.8658 11.4947C14.2387 10.6147 14.43 9.66838 14.4283 8.7126V8.24831C14.4283 8.16974 14.364 8.10545 14.2854 8.10545ZM11.4587 12.9233C10.9057 13.472 10.2499 13.9061 9.52892 14.2009C8.80791 14.4957 8.03581 14.6453 7.25688 14.6412C5.68366 14.634 4.20509 14.018 3.09259 12.9055C1.97295 11.7858 1.35687 10.2965 1.35687 8.7126C1.35687 7.12867 1.97295 5.63938 3.09259 4.51974C4.06759 3.54474 5.32295 2.9501 6.6783 2.81438V9.31974H13.1837C13.0462 10.6822 12.4462 11.9447 11.4587 12.9233ZM15.8569 7.1126L15.8104 6.60903C15.6587 4.96438 14.9283 3.4126 13.7533 2.24117C12.5775 1.06759 11.0289 0.341284 9.37473 0.187596L8.86938 0.141167C8.78545 0.134025 8.71402 0.19831 8.71402 0.282239V7.14117C8.71402 7.21974 8.7783 7.28402 8.85688 7.28402L15.714 7.26617C15.7979 7.26617 15.864 7.19474 15.8569 7.1126ZM9.92473 6.07331V1.49117C11.0496 1.72661 12.0819 2.2837 12.8962 3.09474C13.7122 3.90902 14.2712 4.94474 14.5033 6.06081L9.92473 6.07331Z" fill="currentColor" />
+    </svg>
+</template>

components/icons/anticonSearch.vue

@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.1003 14.1183L10.4628 9.4808C11.1824 8.55045 11.5717 7.41295 11.5717 6.21652C11.5717 4.78438 11.0128 3.44152 10.0021 2.42902C8.99135 1.41652 7.64492 0.859375 6.21456 0.859375C4.78421 0.859375 3.43778 1.4183 2.42706 2.42902C1.41456 3.43973 0.857422 4.78438 0.857422 6.21652C0.857422 7.64688 1.41635 8.9933 2.42706 10.004C3.43778 11.0165 4.78242 11.5737 6.21456 11.5737C7.41099 11.5737 8.54671 11.1844 9.47707 10.4665L14.1146 15.1022C14.1282 15.1158 14.1443 15.1266 14.1621 15.134C14.1799 15.1414 14.1989 15.1452 14.2181 15.1452C14.2374 15.1452 14.2564 15.1414 14.2742 15.134C14.292 15.1266 14.3081 15.1158 14.3217 15.1022L15.1003 14.3254C15.1139 14.3118 15.1247 14.2957 15.132 14.2779C15.1394 14.2602 15.1432 14.2411 15.1432 14.2219C15.1432 14.2026 15.1394 14.1836 15.132 14.1658C15.1247 14.148 15.1139 14.1319 15.1003 14.1183ZM9.04314 9.04509C8.28599 9.80045 7.28242 10.2165 6.21456 10.2165C5.14671 10.2165 4.14314 9.80045 3.38599 9.04509C2.63064 8.28795 2.21456 7.28438 2.21456 6.21652C2.21456 5.14866 2.63064 4.1433 3.38599 3.38795C4.14314 2.63259 5.14671 2.21652 6.21456 2.21652C7.28242 2.21652 8.28778 2.6308 9.04314 3.38795C9.79849 4.14509 10.2146 5.14866 10.2146 6.21652C10.2146 7.28438 9.79849 8.28973 9.04314 9.04509Z" fill="currentColor" />
+    </svg>
+</template>

components/icons/anticonSetting.vue

@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.3712 10.033L14.2016 9.03304C14.257 8.69375 14.2855 8.34732 14.2855 8.00089C14.2855 7.65446 14.257 7.30804 14.2016 6.96875L15.3712 5.96875C15.4595 5.89323 15.5226 5.79264 15.5523 5.68035C15.5819 5.56807 15.5767 5.44942 15.5373 5.34018L15.5212 5.29375C15.1992 4.3938 14.7171 3.55953 14.098 2.83125L14.0659 2.79375C13.9908 2.70545 13.8907 2.64198 13.7788 2.61169C13.6669 2.58141 13.5485 2.58574 13.4391 2.62411L11.9873 3.14018C11.4516 2.70089 10.8534 2.35446 10.207 2.11161L9.92659 0.59375C9.90544 0.47954 9.85004 0.374469 9.76775 0.292496C9.68546 0.210524 9.58017 0.15553 9.46588 0.134821L9.41767 0.125893C8.48731 -0.0419643 7.50874 -0.0419643 6.57838 0.125893L6.53017 0.134821C6.41587 0.15553 6.31059 0.210524 6.2283 0.292496C6.146 0.374469 6.0906 0.47954 6.06945 0.59375L5.78731 2.11875C5.14604 2.36166 4.54886 2.7079 4.01945 3.14375L2.55695 2.62411C2.4476 2.58543 2.32908 2.58095 2.21712 2.61125C2.10516 2.64155 2.00508 2.7052 1.93017 2.79375L1.89802 2.83125C1.27971 3.56004 0.797622 4.39417 0.474808 5.29375L0.458737 5.34018C0.37838 5.56339 0.444451 5.81339 0.624808 5.96875L1.80874 6.97946C1.75338 7.31518 1.72659 7.65804 1.72659 7.99911C1.72659 8.34196 1.75338 8.68482 1.80874 9.01875L0.624808 10.0295C0.536586 10.105 0.473445 10.2056 0.44378 10.3179C0.414115 10.4301 0.419331 10.5488 0.458737 10.658L0.474808 10.7045C0.798023 11.6045 1.27659 12.4348 1.89802 13.167L1.93017 13.2045C2.00526 13.2928 2.10535 13.3562 2.21724 13.3865C2.32913 13.4168 2.44757 13.4125 2.55695 13.3741L4.01945 12.8545C4.55159 13.292 5.14624 13.6384 5.78731 13.8795L6.06945 15.4045C6.0906 15.5187 6.146 15.6237 6.2283 15.7057C6.31059 15.7877 6.41587 15.8427 6.53017 15.8634L6.57838 15.8723C7.51728 16.0411 8.47876 16.0411 9.41767 15.8723L9.46588 15.8634C9.58017 15.8427 9.68546 15.7877 9.76775 15.7057C9.85004 15.6237 9.90544 15.5187 9.92659 15.4045L10.207 13.8866C10.8531 13.6444 11.4547 13.2968 11.9873 12.858L13.4391 13.3741C13.5484 13.4128 13.667 13.4173 13.7789 13.387C13.8909 13.3567 13.991 13.293 14.0659 13.2045L14.098 13.167C14.7194 12.433 15.198 11.6045 15.5212 10.7045L15.5373 10.658C15.6177 10.4384 15.5516 10.1884 15.3712 10.033ZM12.9337 7.17946C12.9784 7.44911 13.0016 7.72589 13.0016 8.00268C13.0016 8.27946 12.9784 8.55625 12.9337 8.82589L12.8159 9.54197L14.1498 10.683C13.9476 11.1489 13.6923 11.5899 13.3891 11.9973L11.732 11.4098L11.1712 11.8705C10.7444 12.2205 10.2695 12.4955 9.75516 12.6884L9.07481 12.9438L8.75516 14.6759C8.25083 14.733 7.74165 14.733 7.23731 14.6759L6.91767 12.9402L6.24267 12.6813C5.73374 12.4884 5.26052 12.2134 4.83731 11.8652L4.27659 11.4027L2.60874 11.9955C2.30517 11.5866 2.05159 11.1455 1.84802 10.6813L3.19624 9.52946L3.08017 8.81518C3.03731 8.54911 3.01409 8.27411 3.01409 8.00268C3.01409 7.72946 3.03552 7.45625 3.08017 7.19018L3.19624 6.47589L1.84802 5.32411C2.04981 4.85804 2.30517 4.41875 2.60874 4.00982L4.27659 4.60268L4.83731 4.14018C5.26052 3.79196 5.73374 3.51696 6.24267 3.32411L6.91945 3.06875L7.23909 1.33304C7.74088 1.27589 8.25338 1.27589 8.75695 1.33304L9.07659 3.06518L9.75695 3.32054C10.2695 3.51339 10.7462 3.78839 11.173 4.13839L11.7337 4.59911L13.3909 4.01161C13.6945 4.42054 13.948 4.86161 14.1516 5.32589L12.8177 6.46696L12.9337 7.17946ZM7.99981 4.68125C6.26409 4.68125 4.85695 6.08839 4.85695 7.82411C4.85695 9.55982 6.26409 10.967 7.99981 10.967C9.73552 10.967 11.1427 9.55982 11.1427 7.82411C11.1427 6.08839 9.73552 4.68125 7.99981 4.68125ZM9.41409 9.23839C9.2286 9.42442 9.00815 9.57194 8.76543 9.67246C8.52271 9.77298 8.26252 9.82452 7.99981 9.82411C7.46588 9.82411 6.96409 9.61518 6.58552 9.23839C6.39949 9.0529 6.25198 8.83245 6.15146 8.58973C6.05094 8.34701 5.9994 8.08682 5.99981 7.82411C5.99981 7.29018 6.20874 6.78839 6.58552 6.40982C6.96409 6.03125 7.46588 5.82411 7.99981 5.82411C8.53374 5.82411 9.03552 6.03125 9.41409 6.40982C9.60012 6.59532 9.74764 6.81577 9.84816 7.05848C9.94868 7.3012 10.0002 7.5614 9.99981 7.82411C9.99981 8.35804 9.79088 8.85982 9.41409 9.23839Z" fill="currentColor" />
+    </svg>
+</template>

components/pages/ems/EccInfo/EccAddInfoTab.vue

@@ -4,7 +4,7 @@
 			class="d-flex justify-space-between align-center"
 			style="height: 80px;"
 		>
-			<span class="txt custom-title-4-new">공정 추가 정보</span>
+			<span class="txt custom-subtitle-tab">공정 추가 정보</span>
 			<Buttons
 				:parentPrgmId="parentPrgmId"
 				:bindingData="gridName"

components/pages/ems/EccInfo/EccIaoTab.vue

@@ -4,14 +4,14 @@
 			class="d-flex justify-space-between align-center"
 			style="height: 80px;"
 		>
-			<span class="txt custom-title-4-new">공정 입출력 정보</span>
+			<span class="txt custom-subtitle-tab">공정 입출력 정보</span>
 			<Buttons
 				:parentPrgmId="parentPrgmId"
 				:bindingData="gridName"
 				:btnActionsFnc="btnActions"
 			/>
 		</div>
-		<div ref="gridParent" >
+		<div ref="gridParent" style="height: calc(90vh - 700px);">
 			<component
 				:ref="gridName"
 				:is="loadGrid ? 'Grid' : null"
@@ -21,7 +21,7 @@
 				:innerTabGridInfo="innerTabGridInfo"
 			/>
 		</div>
-		<div>
+		<div style="height: 25vh;" class="mt-5">
 			<component
 				:is="'Form'"
 				:bindingData="gridName"
@@ -98,17 +98,19 @@ export default {
 	watch: {
 		selectedObjId(val) {
 			if (val === 'TAG') {
-				this.detailList[2].class = 'py-2 d-none';
+				this.detailList[1].class = 'd-none';
-				this.detailList[3].class = 'py-2 d-none';
+				this.detailList[2].class = 'd-block pl-4';
-				this.detailList[4].class = 'py-2';
+				this.detailList[3].class = 'd-block';
-				this.detailList[5].class = 'py-2';
 			} else {
 				// }else if(val==="READ_PLC"){
-				this.detailList[5].class = 'py-2 d-none';
+				this.detailList[3].class = 'd-block';
-				this.detailList[4].class = 'py-2 d-none';
+				this.detailList[2].class = 'd-none';
-				this.detailList[3].class = 'py-2';
+				this.detailList[1].class = 'd-block pl-4';
-				this.detailList[2].class = 'py-2';
 			}
+			this.detailList[4].class = 'pl-4 mt-2';
+			
+			console.log(val)
+			console.log(this.detailList)
 		},
 	},
 	created() {},
@@ -188,6 +190,7 @@ export default {
 				{ header: '대상 명', name: 'objNm', width: 300, align: 'left' },
 				{
 					header: '에너지원 명',
+					width: 150,
 					name: 'ercId',
 					align: 'left',
 					formatter({ value }) {
@@ -204,8 +207,9 @@ export default {
 				},
 				{
 					header: '대상 유형',
+					width: 150,
 					name: 'objKind',
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						var retVal = '';
 
@@ -221,7 +225,8 @@ export default {
 				{
 					header: '투입 생산 유형',
 					name: 'inProdKind',
-					align: 'center',
+					width: 150,
+					align: 'left',
 					formatter({ value }) {
 						var retVal = '';
 
@@ -237,7 +242,8 @@ export default {
 				{
 					header: '계산 여부',
 					name: 'calcFg',
-					align: 'center',
+					width: 150,
+					align: 'left',
 					formatter({ value }) {
 						value = value === true ? '1' : '0';
 						const newValue = _this.pageData.useFgList.filter(
@@ -247,7 +253,7 @@ export default {
 						// return value === true ? "사용" : "사용안함";
 					},
 				},
-				{ header: '분배율(1~100)', name: 'distRt', align: 'right' },
+				{ header: '분배율(1~100)', name: 'distRt', align: 'right', width: 150 },
 				{ header: '사업장', name: 'blocId', align: 'center', hidden: true },
 				{ header: '등록 사용자', name: 'regUserNo', hidden: true },
 				{ header: '등록 일자', name: 'regDttm', hidden: true },
@@ -374,7 +380,7 @@ const myDetail = [
 		label: '대상 유형',
 		disabled: false,
 		cols: 6,
-		class: 'py-2 pr-4',
+		class: 'pr-4',
 		list: 'emMapDivList',
 		valueNm: 'objKind',
 		itemText: 'commCdNm',
@@ -391,7 +397,7 @@ const myDetail = [
 		valueNm: 'objId',
 		disabled: false,
 		cols: 6,
-		class: 'pt-2 pb-0 mb-0 pl-4',
+		class: 'pl-4 py-2',
 		required: true,
 		bindNm: 'objNm',
 		labelCols: 12,
@@ -400,24 +406,6 @@ const myDetail = [
 		noText: true,
 		iconShow: true,
 	},
-	{
-		// 공백 처리
-		type: 'Label',
-		cols: 6,
-		class: 'py-2 pr-4',
-		disabled: false,
-	},
-	{
-		type: 'InputText',
-		valueNm: 'objNm',
-		readonly: true,
-		disabled: true,
-		cols: 6,
-		class: 'pl-4',
-		labelCols: 12,
-		textCols: 12,
-		iconShow: true,
-	},
 	{
 		type: 'EvtObjPop',
 		labelContent: '대상 항목',
@@ -428,16 +416,23 @@ const myDetail = [
 		disabled: true,
 		required: true,
 		cols: 6,
-		class: 'd-none pr-4',
+		class: 'd-none pr-4 py-2',
 		disableContent: true,
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
 	},
+	{
+		// 공백 처리
+		type: 'Label',
+		cols: 6,
+		class: 'py-2 pr-4',
+		disabled: false,
+	},
 	{
 		type: 'InputText',
 		cols: 6,
-		class: 'd-none pt-0 pl-4',
+		class: 'pt-0 pl-4 mt-2 py-2',
 		valueNm: 'objNm',
 		readonly: true,
 		disabled: true,
@@ -450,7 +445,7 @@ const myDetail = [
 		label: '에너지원',
 		disabled: false,
 		cols: 6,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 mt-2',
 		list: 'ercNmList',
 		valueNm: 'ercId',
 		itemText: 'text',
@@ -465,7 +460,7 @@ const myDetail = [
 		label: '투입생산유형',
 		disabled: false,
 		cols: 6,
-		class: 'py-2 pl-4',
+		class: 'py-2 pl-4 mt-2',
 		list: 'cmInoutList',
 		valueNm: 'inProdKind',
 		itemText: 'commCdNm',
@@ -478,7 +473,7 @@ const myDetail = [
 	{
 		type: 'CheckBox',
 		cols: 6,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 mt-2',
 		label: '계산 여부',
 		valueNm: 'calcFg',
 		disabled: false,
@@ -495,7 +490,7 @@ const myDetail = [
 		valueNm: 'distRt',
 		readonly: false,
 		cols: 6,
-		class: 'py-2 pl-4',
+		class: 'py-2 pl-4 mt-2',
 		required: true,
 		labelCols: 12,
 		textCols: 12,
@@ -503,3 +498,10 @@ const myDetail = [
 	},
 ];
 </script>
+<style lang="scss" scoped>
+	::v-deep{
+		.tui-grid-layer-state{
+			top: 40px !important;
+		}
+	}
+</style>

components/pages/ems/ReadObjInfo/ReadObjAddInfoTab.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div
-			class="d-flex justify-space-between"
+			class="d-flex justify-space-between mb-3 pr-4"
 			style="height: 45px;"
 		>
 			<span class="txt custom-subtitle-tab">검침 대상 추가 정보</span>
@@ -102,7 +102,7 @@ export default {
 			this.gridInit();
 		},
 		gridInit() {
-			const gridHeight = this.$refs.gridParent.offsetHeight - 30;
+			const gridHeight = this.$refs.gridParent.offsetHeight - 31;
 
 			const myOptions = {
 				columnOptions: {
@@ -113,8 +113,8 @@ export default {
 				header: {
 					height: 28,
 				},
-				rowHeight: 29,
+				rowHeight: 36,
-				minRowHeight: 29,
+				minRowHeight: 36,
 				selectionUnit: 'row',
 				editingEvent: 'click',
 			};
@@ -440,3 +440,15 @@ export default {
 	},
 };
 </script>
+<style lang="scss" scoped >
+::v-deep {
+	.tui-grid-layer-state {
+		top: 40px !important;
+	}
+	
+	.tui-grid-cell-content-editor {
+		height: 36px !important;
+	}
+
+}
+</style>

components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab.vue

@@ -332,7 +332,7 @@ const myReadPlcTagDetail = [
 		valueNm2: 'tagNm',
 		disabled: true,
 		cols: 6,
-		class: 'pr-4 pb-2 py-2',
+		class: 'pr-4 pb-2 py-2 mt-2',
 		required: true,
 		labelCols: 12,
 		textCols: 12,
@@ -345,7 +345,7 @@ const myReadPlcTagDetail = [
 		valueNm: 'ercId',
 		disabled: false,
 		cols: 6,
-		class: 'pl-4 pb-2 py-3',
+		class: 'pl-4 pb-2 py-3 mt-2',
 		list: 'ercNmList',
 		itemText: 'text',
 		itemValue: 'value',
@@ -360,7 +360,7 @@ const myReadPlcTagDetail = [
 		readonly: true,
 		cols: 6,
 		textCols: 12,
-		class: 'pt-1 py-3 pr-4',
+		class: 'pt-1 py-3 pr-4 mt-2',
 		required: true,
 	},
 	{
@@ -372,7 +372,7 @@ const myReadPlcTagDetail = [
 		valueNm: 'distRt',
 		disabled: false,
 		cols: 6,
-		class: 'py-3 pr-4',
+		class: 'py-3 pr-4 mt-2',
 		inputType: 'number',
 		min: 1,
 		max: 100,
@@ -387,7 +387,7 @@ const myReadPlcTagDetail = [
 		valueNm: 'reprTagFg',
 		disabled: false,
 		cols: 6,
-		class: 'py-3 pl-4',
+		class: 'py-3 pl-4 mt-2',
 		value: { '1': true, '0': false },
 		required: true,
 		labelCols: 12,
@@ -401,7 +401,7 @@ const myReadPlcTagDetail = [
 		valueNm: 'useFg',
 		disabled: false,
 		cols: 6,
-		class: 'py-3 pr-4',
+		class: 'py-3 pr-4 mt-2',
 		value: { '1': true, '0': false },
 		required: true,
 		labelCols: 12,
@@ -414,7 +414,7 @@ const myReadPlcTagDetail = [
 		valueNm: 'rmrk',
 		disabled: false,
 		cols: 6,
-		class: 'py-3 pl-4',
+		class: 'py-3 pl-4 mt-2',
 		inputType: 'string',
 		labelCols: 12,
 		textCols: 12,

layouts/default.vue

@@ -90,23 +90,40 @@
         <v-container fluid>
           <v-row class="flex-nowrap">
             <div class="menu-container">
-              <v-navigation-drawer ref="navigationdrawer" :value="drawer" :mini-variant="miniVariant" :clipped="clipped"
+              <v-navigation-drawer ref="navigationdrawer"
-                :absolute="false" mini-variant-width="60">
+                class="pt-2" 
+                :clipped="clipped"
+                :absolute="false" 
+                :mini-variant="miniVariant"
+                :value="drawer"  
+                mini-variant-width="260"
+              >
 
                 <component ref="changePswdPop" :is="'ChangePswdPop'" v-show="false" :comId="this.userInfo.comId" />
                 <v-treeview ref="treeview" :active.sync="activeTree" active-class="v-treeview-node--active"
                   :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">
-                      <v-icon v-if="item.lvl === 1 && menuIconKeys.includes(item.menuId)"
+                      
-                        v-text="menuIconById[item.menuId]" :class="{ 'mr-2': !miniVariant }" size="20"></v-icon>
+                      <v-icon 
-                      <v-icon v-else-if="item.lvl === 1 && !menuIconKeys.includes(item.menuId)"
+                        v-if="item.lvl === 1 && menuIconKeys.includes(item.menuId)"
-                        :class="{ 'mr-2': !miniVariant }" size="20">mdi-package-variant-closed</v-icon>
+                        :class="{ 'mr-2': !miniVariant }" 
-                      <v-icon v-else-if="item.lvl === 2" :class="{ 'mr-2': !miniVariant }" size="10">
+                        size="14"
+                        v-text="menuIconById[item.menuId]"
+                      ></v-icon>
+                      <v-icon 
+                        v-else-if="item.lvl === 1 && !menuIconKeys.includes(item.menuId)"
+                        :class="{ 'mr-2': !miniVariant }" 
+                        size="14">mdi-package-variant-closed</v-icon>
+                      <v-icon 
+                        v-else-if="item.lvl === 2" :class="{ 'mr-2': !miniVariant }" 
+                        size="8">
                         mdi-checkbox-blank
                       </v-icon>
-                      <v-icon v-else-if="item.lvl >= 3 && item.childeVo.length === 0 && item.url"
+                      <v-icon 
-                        :class="miniVariant === false ? 'mr-2' : ''" size="9">
+                        v-else-if="item.lvl >= 3 && item.childeVo.length === 0 && item.url"
+                        :class="miniVariant === false ? 'mr-2' : ''" 
+                        size="8">
                         $depth3rdBulletDark
                       </v-icon>
                       <span v-if="item.url">
@@ -298,6 +315,7 @@ import ThemeSwitch from "@/components/common/ThemeSwitch";
 import AdminMenu from "@/components/common/AdminMenu";
 import FadeLoader from "vue-spinner/src/FadeLoader.vue";
 import ChangePswdPop from "~/components/common/modal/ChangePswdPop";
+
 export default {
   components: {
     ThemeSwitch,
@@ -318,19 +336,17 @@ export default {
       myPrgmId: null,
       treeValue: [],
       menuIconById: {
-        // MNU0003: 'mdi-chart-line',
+        MNU0110: "$anticonAppStore",
-        // MNU0004: 'mdi-alarm-light',
+        MNU0002: "$anticonDesktop",
-        // MNU0005: 'mdi-pencil-box-outline',
+        MNU0003: "$anticonDrag",
-        // MNU0006: 'mdi-cog-outline',
+        MNU0091: "$anticonLineChart",
-        MNU0002: "mdi-monitor",
+        MNU0102: "$anticonBulb",
-        MNU0091: "mdi-chart-box",
+        MNU0103: "$anticonFileText",
-        MNU0102: "mdi-human-male-board-poll",
+        MNU0104: "$anticonNoteExpand",
-        MNU0103: "mdi-file-chart-outline",
+        MNU0106: "$anticonPieChart",
-        MNU0104: "mdi-chart-sankey-variant",
+        MNU0105: "$anticonSearch",
-        MNU0106: "mdi-database-edit-outline",
+        MNU0006: "$anticonMessage",
-        MNU0105: "mdi-chart-bell-curve",
+        MNU0007: "$anticonSetting",
-        MNU0006: "mdi-bulletin-board",
-        MNU0007: "mdi-cog",
       },
       isLoading: false,
       loadingStackCnt: 0,
@@ -829,21 +845,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// @import '@/assets/scss/common.scss';
+@import '@/assets/scss/layout.scss';
-.loading {
-  z-index: 99;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  transform: translate(-50%, -50%);
-  background-color: rgba(0, 0, 0, 0.4);
-  //box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
-}
 
-.v-spinner {
-  top: 50%;
-  left: 50%;
-}
 </style>

pages/comm/auth/RoleMngPage.vue

@@ -432,7 +432,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 mt-2',
 		value: { '1': true, '0': false },
 		required: true,
 	},
@@ -445,7 +445,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-2 pl-4 mt-2',
 	},
 	// {
 	//   type: "InputText",
@@ -464,7 +464,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 mt-2',
 		placeholder: '시스템 자동입력',
 	},
 	{
@@ -476,7 +476,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-2 pl-4 mt-2',
 		placeholder: '시스템 자동입력',
 	},
 	{
@@ -488,7 +488,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 mt-2',
 		placeholder: '시스템 자동입력',
 	},
 	{
@@ -500,7 +500,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-2 pl-4 mt-2',
 		placeholder: '시스템 자동입력',
 	},
 ];

pages/comm/auth/UserRoleMngPage.vue

@@ -90,7 +90,7 @@
 			<!-- 사용자 정보 -->
 			<v-col :cols="7" class="h100">
 				<v-card class="pb-5 h100">
-					<v-card-title class="custom-title-4">사용자 정보</v-card-title>
+					<v-card-title class="custom-title-4 pb-0">사용자 정보</v-card-title>
 					<div class="px-5" :style="{ height: 'calc(100% - 62.5px)' }">
 						<v-tabs v-model="tab">
 							<v-tab
@@ -971,7 +971,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pr-4',
+			class: 'py-2 pr-4 mt-2',
 			iconShow: true,
 			required: false,
 			placeholder: '시스템 자동입력',
@@ -983,7 +983,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pl-4',
+			class: 'py-2 pl-4 mt-2',
 			iconShow: true,
 			required: true,
 		},
@@ -996,8 +996,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pr-4',
+			class: 'py-2 pr-4 mt-2',
-			iconShow: true,
 			required: true,
 		},
 		{
@@ -1007,7 +1006,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pl-4',
+			class: 'py-2 pl-4 mt-2',
 			iconShow: true,
 			required: true,
 		},
@@ -1018,7 +1017,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pr-4',
+			class: 'py-2 pr-4 mt-2',
 			iconShow: true,
 			list: blocCdList.map(item => ({
 				text: item.blocNm,
@@ -1033,7 +1032,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pl-4',
+			class: 'py-2 pl-4 mt-2',
 			iconShow: true,
 		},
 		{
@@ -1044,7 +1043,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pr-4',
+			class: 'py-2 pr-4 mt-2',
 			iconShow: true,
 			placeholder: '시스템 자동입력',
 		},
@@ -1056,7 +1055,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pl-4',
+			class: 'py-2 pl-4 mt-2',
 			iconShow: true,
 			placeholder: '시스템 자동입력',
 		},
@@ -1068,7 +1067,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pr-4',
+			class: 'py-2 pr-4 mt-2',
 			iconShow: true,
 			placeholder: '시스템 자동입력',
 		},
@@ -1080,7 +1079,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pl-4',
+			class: 'py-2 pl-4 mt-2',
 			iconShow: true,
 			placeholder: '시스템 자동입력',
 		},

pages/comm/base/NoticeMngPage.vue

@@ -49,7 +49,7 @@
 					<v-col :cols="12" class="mt-5 pb-4">
 						<v-card-title class="custom-title-6 pa-0">{{ viewActionData.title }}</v-card-title>
 					</v-col>
-					<v-col :cols="12" style="min-height: 30vh;" class="pa-0 custom-view">
+					<v-col :cols="12" style="min-height: 50vh;" class="pa-0 custom-view">
 						<v-card class="pa-3" style="overflow-y:auto;">
 							<viewer v-if="viewActionData.viewerFlag" ref="tuiViewer" height="inherit"
 								:initialValue="viewActionData.content" theme="white"

pages/ems/base/AddInfoMngPage.vue

@@ -1,5 +1,6 @@
 <template>
 	<div ref="mainDiv" class="l-layout">
+		<CommonPageTitle/>
 		<v-row ref="searchFilter">
 			<v-col :cols="12">
 				<v-card class="searchFilter">
@@ -287,7 +288,7 @@ export default {
 					header: 'Data 형식',
 					name: 'addInfoDataKind',
 					minWidth: 85,
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						let retVal = '';
 						const newValue = _this.pageData.addInfoDataKindList.filter(
@@ -304,7 +305,7 @@ export default {
 					header: '사용여부',
 					name: 'useFg',
 					minWidth: 85,
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						let retVal = '';
 						value = value === true ? '1' : '0';

pages/ems/base/EnrgCostCenterMngPage.vue

@@ -1,5 +1,6 @@
 <template>
 	<div class="l-layout">
+		<CommonPageTitle/>
 		<v-row ref="searchFilter">
 			<v-col :cols="12">
 				<v-card class="searchFilter">
@@ -12,6 +13,7 @@
 								dataKey="searchLocKind"
 								:sendParam="{ commGrpCd: 'EM_LOC_KIND', useFg: '1' }"
 								:addAll="true"
+								customClass="select-large"
 							/>
 						</v-col>
 						<v-col :cols="2.5">
@@ -22,6 +24,7 @@
 								dataKey="searchEccKind"
 								:sendParam="{ commGrpCd: 'EM_ECC_KIND', useFg: '1' }"
 								:addAll="true"
+								customClass="select-large"
 							/>
 						</v-col>
 						<!-- 사업장 -->
@@ -42,6 +45,7 @@
 								dataKey="useFg"
 								:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
 								:addAll="true"
+								customClass="select-large"
 							/>
 						</v-col>
 						<v-col :cols="2.5">
@@ -52,6 +56,7 @@
 								:labelCols="12"
 								:textCols="12"
 								:searchOption="true"
+								customClass="input-large"
 							/>
 						</v-col>
 						<v-col class="text-right">
@@ -64,6 +69,7 @@
 									:is="'SelectBlocMstr'"
 									ref="SelectBlocMstr"
 									:parentPrgmId="myPrgmId"
+									customClass="select-large"
 								/>
 							</div>
 					</v-row>
@@ -99,7 +105,7 @@
 			</v-col>
 			<v-col :cols="7" style="min-height:75vh;">
 				<v-card class="pb-5">
-					<v-card-title class="custom-title-4" style="min-height:76px;"
+					<v-card-title class="custom-title-4 pb-0" style="min-height:65px;"
 						>공정 상세
 					</v-card-title>
 					<div class="px-5" style="height:calc(100% - 76px)">
@@ -471,7 +477,7 @@ export default {
 					header: '사용 여부',
 					name: 'useFg',
 					width: gridWidth * 0.18,
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						value = value === true ? '1' : '0';
 						const newValue = _this.pageData.useFgList.filter(
@@ -895,7 +901,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pl-4',
+		class: 'py-2 px-4',
 		required: true,
 		iconShow: true
 	},
@@ -921,7 +927,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'pb-0 mb-0 pr-4',
+		class: 'pb-0 mb-0 pr-4 mt-2',
 		disableContent: true,
 	},
 	{
@@ -932,7 +938,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 mb-0 pb-0 pl-4',
+		class: 'py-2 mb-0 pb-0 px-4 mt-2',
 		list: 'locKindList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -944,13 +950,13 @@ const myDetail = [
 		valueNm: 'upEccNm',
 		readonly: true,
 		cols: 6,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 mt-2',
 	},
 	{
 		// 공백 처리
 		type: 'Label',
 		cols: 6,
-		class: 'py-2 pl-4',
+		class: 'py-2 px-4 mt-2',
 		disabled: false,
 		labelCols: 12,
 		textCols: 12,
@@ -964,7 +970,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 mt-2',
 		list: 'eccKindList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -979,7 +985,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pl-4',
+		class: 'py-2 px-4 mt-2',
 		inputType: 'number',
 		iconShow: true
 		// onkeydown : "if(this.value > 100) this.value = 100;if(this.value < 0) this.value = 0;if(this.value == '') this.value = 0;"
@@ -992,7 +998,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 mt-2',
 		list: 'blocIdList',
 		itemText: 'blocNm',
 		itemValue: 'blocId',
@@ -1006,7 +1012,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pl-4',
+		class: 'py-2 px-4 mt-2',
 		value: { '1': true, '0': false },
 		iconShow: true,
 		required: true,
@@ -1017,7 +1023,7 @@ const myDetail = [
 		valueNm: 'eccFg',
 		disabled: false,
 		cols: 6,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 mt-2',
 		iconShow: true,
 		value: { '1': true, '0': false },
 	},

pages/ems/base/ReadObjectMngPage.vue

@@ -50,7 +50,7 @@
 			<v-col :cols="5" class="h100">
 				<v-card class="pb-5">
 					<div class="d-flex align-center justify-space-between pa-5">
-						<v-card-title class="pa-0 custom-title-4-new"
+						<v-card-title class="pa-0 custom-title-4"
 							>검침 대상 정보</v-card-title
 						>
 						<Buttons
@@ -75,7 +75,7 @@
 			</v-col>
 			<v-col :cols="7" class="h100">
 				<v-card class="pb-5">
-					<v-card-title class="custom-title-4-new" style="min-height:76px;"
+					<v-card-title class="custom-title-4-new pb-0" style="min-height:65px;"
 						>검침대상 상세
 					</v-card-title>
 					<div class="px-5" style="height:calc(100% - 76px)">
@@ -315,7 +315,7 @@ export default {
 					header: '검침 대상 ID',
 					name: 'readObjId',
 					width: 130,
-					align: 'center',
+					align: 'left',
 				},
 				{
 					header: '검침 대상 명',
@@ -385,7 +385,7 @@ export default {
 				{
 					header: '사용여부',
 					name: 'useFg',
-					align: 'center',
+					align: 'left',
 					width: 100,
 					formatter({ value }) {
 						value = value === true ? '1' : '0';
@@ -742,7 +742,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-2',
+		class: 'py-2 pr-2 mt-2',
 		required: false,
 		placeholder: '시스템 자동입력',
 	},
@@ -754,7 +754,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2',
+		class: 'py-2 mt-2',
 		required: true,
 		iconShow: true,
 	},
@@ -766,7 +766,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pr-2',
+		class: 'py-2 pr-2 mt-2',
 		list: 'readObjKindDetailList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -781,7 +781,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2',
+		class: 'py-2 mt-2',
 		list: 'readObjGrpList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -796,7 +796,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pr-2',
+		class: 'py-2 pr-2 mt-2',
 		iconShow: true,
 		inputType: 'number',
 	},
@@ -808,7 +808,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2',
+		class: 'py-2 mt-2',
 		iconShow: true,
 		inputType: 'number',
 	},
@@ -820,7 +820,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pr-2',
+		class: 'py-2 pr-2 mt-2',
 		iconShow: true,
 		inputType: 'number',
 	},
@@ -832,7 +832,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2',
+		class: 'py-2 mt-2',
 		list: 'unitCdList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -847,13 +847,24 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pr-2',
+		class: 'py-2 pr-2 mt-2',
 		value: { '1': true, '0': false },
 		iconShow: true,
 		required: true,
 	},
 ];
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 @import '@/assets/scss/common.scss';
-</style>
+::v-deep {
+	.tui-grid-layer-state {
+		top: 40px !important;
+	}
+
+	.tui-grid-layer-selection,
+	.tui-grid-cell-content-editor{
+		height: 36px !important;
+	}
+	
+}
+</style>

pages/ems/effc/EnrgEffcTotSummPage.vue

@@ -33,7 +33,7 @@
             </v-col>
             <v-col :cols="6" class="text-right">
               <!-- 조회버튼 -->
-              <BtnSearch style="margin-top: 20px" size="large" @click="search" />
+              <BtnSearch style="margin-top: 25px" size="large" @click="search" />
             </v-col>
           </v-row>
         </v-card>

pages/ems/effc/EnrgUsePlanPage.vue

@@ -304,7 +304,7 @@ export default {
 					$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
 					const el2 = document.createElement('button');
 					$(el2).addClass('edit-btn blue--text');
-					el2.innerText = '편집하다';
+					el2.innerText = '수정';
 					elDiv.appendChild(el2);
 
 					this.el = elDiv;
@@ -415,7 +415,7 @@ export default {
 				{
 					header: '구분',
 					name: 'gubun',
-					width: 80,
+					width: 200,
 					align: 'left',
 					// hidden: true,
 					formatter({ value }) {
@@ -447,7 +447,7 @@ export default {
 				myColumns.push({
 					header: i.toString() + '월',
 					name: qty,
-					width: 73,
+					width: 80,
 					align: 'right',
 					editor: 'text',
 					formatter: this.numberFormatter,

pages/ems/effc/EnrgUseTotSummPage.vue

@@ -52,6 +52,8 @@
           </v-card-title>
           <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"
@@ -73,7 +75,7 @@
                 <!-- Information area -->
                 <v-col :cols="5" style="height: 100%">
                   <div style="height: 10%">
-                    <strong style="font-size: 20px; font-weight: 600">{{
+                    <strong class="v-card v-card__title pa-0" >{{
                       item.fabNm
                     }}</strong>
                   </div>
@@ -123,6 +125,8 @@
                   </div>
                 </v-col>
               </div>
+                          </v-card>
+
             </v-col>
           </v-row>
         </div>

pages/ems/effc/EqpmIndMntrPage.vue

@@ -97,14 +97,25 @@
           <v-card-title class="d-flex align-center justify-space-between pa-5">
             <span class="tit ft-size_20 ft-weight_600">설비별 현황 리스트</span>
           </v-card-title>
-          <div class="px-5" style="height: calc(100% - 106px)">
+          <div class="px-5" style="height: calc(100% - 56px)">
-            <div ref="gridParent" class="w100 h100">
+            <div ref="gridParent" class="w100 h100" style="height: calc(100% - 166px)">
               <component
                 :ref="gridName"
                 :is="loadGrid ? 'Grid' : null"
                 :gridName="gridName"
                 :parentPrgmId="myPrgmId"
               />
+
+              <div class="pagination-wrapper">
+                <pagination
+                  id="pagination"
+                  :total-count="totalCount"
+                  :page-num="page"
+                  :limit="limit"
+                  :itemsPerPageArray="itemsPerPageArray"
+                  @loadData="changeGrid"
+                />
+              </div>
               <!--
 							<component
 								:ref="gridName"
@@ -142,6 +153,7 @@ import SelectBox from "@/components/common/select/SelectBox";
 import SelectCmCycle from "@/components/common/select/SelectCmCycle";
 import DatePicker from "@/components/common/Datepicker";
 import Grid from "~/components/common/Grid";
+import pagination from "~/components/common/Pagination";
 
 let myTitle;
 let myPrgmId;
@@ -168,6 +180,7 @@ export default {
     SelectCmCycle,
     DatePicker,
     Grid,
+    pagination,
   },
   data() {
     return {
@@ -188,6 +201,10 @@ export default {
       gridName: "grid01",
 
       enrgUseMainIdxDesc: [],
+      itemsPerPageArray: [10, 20, 30],
+      limit: 10,
+      page: 1,
+      totalCount: 0,
 
       // tooltipData: {
       // 	show: false,
@@ -263,6 +280,11 @@ export default {
     this.chkOpenTabList({ key: "destroy", prgmId: myPrgmId });
   },
   methods: {
+    changeGrid: async function (pageNum, limit) {
+      this.page = pageNum;
+      this.limit = limit;
+      this.search();
+    },
     async init() {
       await this.getSelectValueList();
       await this.setQueryParams();
@@ -367,50 +389,57 @@ export default {
       const _this = this;
       // Define custom button
       class CustomButton {
-				constructor(props,pageData) {
+        constructor(props, pageData) {
-					const { grid, rowKey, columnInfo } = props;
+          const { grid, rowKey, columnInfo } = props;
-					const gridData = grid.store.data.rawData;
+          const gridData = grid.store.data.rawData;
-					const value = gridData[rowKey][columnInfo.name];
+          const value = gridData[rowKey][columnInfo.name];
-          const onClickCallback = columnInfo.renderer.options.onClick; 
+          const onClickCallback = columnInfo.renderer.options.onClick;
 
-					this.disabled = columnInfo.renderer.options.disabled || false;
+          this.disabled = columnInfo.renderer.options.disabled || false;
-					const elDiv = document.createElement('div');
+          const elDiv = document.createElement("div");
-					elDiv.innerHTML = `<span>${value}</span>`;
+          elDiv.innerHTML = `<span>${value}</span>`;
-					$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
+          $(elDiv).addClass("tui-grid-cell-content d-flex justify-space-between");
-					const el2 = document.createElement('button');
+          const el2 = document.createElement("button");
-					$(el2).addClass('edit-btn blue--text');
+          $(el2).addClass("edit-btn blue--text");
-					el2.innerText = '보기';
+          el2.innerText = "보기";
-					elDiv.appendChild(el2);
+          elDiv.appendChild(el2);
-					this.el = elDiv;
+          this.el = elDiv;
-					if (!this.disabled && typeof onClickCallback === 'function') {
+          if (!this.disabled && typeof onClickCallback === "function") {
-						// click 이벤트
+            // click 이벤트
-						this.el.addEventListener('click', function(event) {
+            this.el.addEventListener("click", function (event) {
-							onClickCallback(rowKey); 
+              onClickCallback(rowKey);
-						});
+            });
-					}
+          }
-				}
+        }
-				getElement() {
+        getElement() {
-					return this.el;
+          return this.el;
-				}
+        }
-				getValue() {
+        getValue() {
-					// return this.el.value;
+          // return this.el.value;
-				}
+        }
-				mounted() {
+        mounted() {
-					// this.el.focus();
+          // this.el.focus();
-				}
+        }
-			}
+      }
 
       var columnList = [
         { header: "NO", name: "no", align: "right", width: 80 },
         { header: "fabId", name: "fabId", hidden: true },
         { header: "FAB", name: "fabNm", align: "left" },
         { header: "eqpmGrpId", name: "eqpmGrpId", hidden: true },
-        { header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 200,
+        {
+          header: "설비그룹",
+          name: "eqpmGrpNm",
+          align: "left",
+          width: 200,
+        },
+        { header: "eqpmId", name: "eqpmId", hidden: true },
+        { header: "설비명", name: "eqpmNm", align: "left", width: 200,
           // Render custom button to switch page instead of double click on row
           renderer: {
             type: CustomButton,
             options: {
-              value: '보기',
+              value: "보기",
               onClick: (rowKey) => {
                 const gridInstance = this.$refs[this.gridName].gridInstance;
                 const eventRowData = gridInstance.invoke("getRow", rowKey);
@@ -434,12 +463,10 @@ export default {
                     key: key,
                   },
                 });
-              }
+              },
-            }
+            },
-          }
+          },
         },
-        { header: "eqpmId", name: "eqpmId", hidden: true },
-        { header: "설비명", name: "eqpmNm", align: "left", width: 200 },
         {
           header: "계획량",
           name: "planVal",
@@ -546,10 +573,10 @@ export default {
             },
           ],
         },
-        pageOptions: {
+        // pageOptions: {
-          useClient: true,
+        //   useClient: true,
-          perPage: 3,
+        //   perPage: 3,
-        }
+        // }
       };
 
       this.setGridOption({
@@ -566,26 +593,39 @@ export default {
       this.loadGrid = false;
       this.enrgUseMainIdxDesc = [];
       var apiKey = null;
+      var apiKey2 = null;
       var params = {
         fabId: this.selectValue01,
         eqpmKindId: this.selectValue02,
         eqpmGrpId: this.selectValue03,
         fromDt: this.pageData.fromDt,
+        limit: this.limit,
+        page: this.page,
+        offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
       };
 
       if (this.pageData.cmCycle == "CYC_DAY") {
         params["fromDtMm"] = String(this.pageData.fromDt).substring(0, 6);
         apiKey = "selectDailyEnrgUseMainIdx";
+        apiKey2 = "selectDailyEnrgUseMainIdxPageTotal";
       } else if (this.pageData.cmCycle == "CYC_MONTH") {
         apiKey = "selectMonthlyEnrgUseMainIdx";
+        apiKey2 = "selectMonthlyEnrgUseMainIdxPageTotal";
       }
-
       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",
@@ -654,7 +694,7 @@ export default {
         // id값 설정
         elementList[i].id = "tooltipTargetElement_" + i;
         tooltipElement.id = "tooltipElement_" + i;
-
+        tooltipElement.classList.add(this.isDarkmode ? "dark-mode" : "light-mode");
         // element 추가
         elementList[i].append(tooltipElement);
       }
@@ -849,5 +889,12 @@ function numberFormatter({ value }) {
       overflow-y: visible;
     }
   }
+
+  .pagination-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 12px 0;
+  }
 }
 </style>

plugins/ant-design-vue.js

@@ -1,6 +1,6 @@
 import Vue from "vue";
 // import Antd from "ant-design-vue";
-import { Row, Col, Card, Button, Checkbox, DatePicker, Select, Table, Modal, Input, Icon, Divider } from "ant-design-vue";
+import { Row, Col, Card, Button, Checkbox, DatePicker, Select, Table, Modal, Input, Icon, Divider, Pagination } from "ant-design-vue";
 
 import 'ant-design-vue/dist/antd.css'
 // import { RangePicker } from "ant-design-vue/types/date-picker/range-picker";
@@ -17,4 +17,5 @@ Vue.component(Modal.name, Modal)
 Vue.component(Input.name, Input)
 Vue.component(Icon.name, Icon)
 Vue.component(Divider.name, Divider)
+Vue.component(Pagination.name, Pagination)
 // Vue.component(RangePicker.name, RangePicker)

plugins/vuetify.js

@@ -16,7 +16,38 @@ import 'material-design-icons-iconfont/dist/material-design-icons.css';
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
 
+import anticonAppStore from '~/components/icons/anticonAppStore';
+import anticonBulb from '~/components/icons/anticonBulb';
+import anticonDesktop from '~/components/icons/anticonDesktop';
+import anticonDrag from '~/components/icons/anticonDrag';
+import anticonFileText from '~/components/icons/anticonFileText';
+import anticonLineChart from '~/components/icons/anticonLineChart';
+import anticonMessage from '~/components/icons/anticonMessage';
+import anticonNoteExpand from '~/components/icons/anticonNoteExpand';
+import anticonPieChart from '~/components/icons/anticonPieChart';
+import anticonSearch from '~/components/icons/anticonSearch';
+import anticonSetting from '~/components/icons/anticonSetting';
 
+const anticons = {
+	anticonAppStore,
+	anticonBulb,
+	anticonDesktop,
+	anticonDrag,
+	anticonFileText,
+	anticonLineChart,
+	anticonMessage,
+	anticonNoteExpand,
+	anticonPieChart,
+	anticonSearch,
+	anticonSetting,
+};
+
+const anticonVal = {};
+Object.keys(anticons).forEach(key => {
+	anticonVal[`${key}`] = {
+		component: anticons[key]
+	}
+});
 
 Vue.use(Vuetify);
 
@@ -77,6 +108,7 @@ export default new Vuetify({
 			icoExpandAlt: {
 				component: icoExpandAlt,
 			},
+			...anticonVal,
 		},
 	},
 });

store/modules/list.js

@@ -910,6 +910,11 @@ const INIT_URL_STATE = {
 		'ems/effc/eqpmIndMntrCtr/selectDailyEnrgUseMainIdx',
 	selectMonthlyEnrgUseMainIdx:
 		'ems/effc/eqpmIndMntrCtr/selectMonthlyEnrgUseMainIdx',
+	selectDailyEnrgUseMainIdxPageTotal:
+		'ems/effc/eqpmIndMntrCtr/selectDailyEnrgUseMainIdxPageTotal',
+	selectMonthlyEnrgUseMainIdxPageTotal:
+		'ems/effc/eqpmIndMntrCtr/selectMonthlyEnrgUseMainIdxPageTotal',
+
 
 	//prgmId : PRG0082 에너지 사용량 - 설비상세 모니터링
 	selectDailyEnrgUseMainGuideIdx: