fix bug screen 8

Reviewed-on: #84

assets/scss/common.scss

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

assets/scss/common/grid.scss

@@ -10,6 +10,14 @@
   &-container {
     width: 100%;
     border-radius: 10px;
+
+    .tui-select-box-input {
+      p {
+        font-size: 14px;
+        font-family: inherit
+      }
+    }
+
   }
 
   &-content-area {
@@ -23,6 +31,7 @@
 
   &-no-scroll-y {
     .tui-grid-rside-area {
+
       .tui-grid-header-area,
       .tui-grid-summary-area {
         margin-right: 0 !important;
@@ -145,6 +154,55 @@
   }
 }
 
+.tui-grid-editor-select-box-layer {
+  min-width: 116px !important;
+
+  .tui-select-box-input {
+    border-radius: 6px;
+
+    .tui-select-box-icon {
+      width: 14px;
+      height: 14px;
+
+      background-repeat: no-repeat;
+      background-size: contain;
+      margin-top: -20px;
+    }
+  }
+
+  .tui-select-box-dropdown {
+    margin-top: 1px;
+    border-radius: 4px;
+    padding: 4px;
+    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+
+
+    .tui-select-box-item {
+      font-size: 14px;
+      margin-bottom: 4px;
+      position: relative;
+
+      &:before {
+        bottom: 0;
+        content: '';
+        left: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: 0
+      }
+
+      &:hover {
+        &::before {
+          opacity: 0.04
+        }
+      }
+
+    }
+  }
+}
+
 .treeGrid {
   .tui-grid {
     &-header-area {
@@ -166,44 +224,6 @@
   @include theme($theme);
 
   .v-application.#{$theme}-mode {
-    .enrg-effc {
-      .tui-grid-rside-area {
-        .tui-grid-table {
-          tr {
-
-            td:nth-child(4),
-            td:nth-child(10) {
-              .tui-grid-cell-content {
-                color: map-deep-get($config,
-                  #{$theme},
-                  "router-tab-item-active-color"
-                );
-              }
-            }
-          }
-
-          .tui-grid {
-
-            &-row-odd,
-            &-row-even {
-              &:hover {
-
-                >td:nth-child(4),
-                td:nth-child(10) {
-                  .tui-grid-cell-content {
-                    color: map-deep-get($config,
-                      #{$theme},
-                      "router-tab-item-active-color"
-                    );
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
     .tui-grid-content-area {
       .tui-grid-header-area {
         height: auto !important;
@@ -677,7 +697,7 @@
       }
 
       &-tree-button-expand {
-        z-index: 9999;
+        z-index: 7;
 
         .tui-grid-btn-tree {
           i {
@@ -697,7 +717,7 @@
       }
 
       &-tree-button-collapse {
-        z-index: 9999;
+        z-index: 7;
 
         .tui-grid-btn-tree {
           i {
@@ -756,6 +776,154 @@
             }
           }
         }
+
+        select {
+          &.selectbox {
+            background: map-deep-get($config,
+              #{$theme},
+              "tui-grid-cell-backgroundColor"
+            );
+            border-color:map-deep-get($config,
+              #{$theme},
+              "v-input-fieldset-color"
+            );
+            color: map-deep-get($config,
+              #{$theme},
+              "tui-grid-cell-color"
+            );
+
+            .calendarOption {
+              background: map-deep-get($config,
+                #{$theme},
+                "tui-grid-cell-backgroundColor"
+              );
+              border-color:map-deep-get($config,
+                #{$theme},
+                "v-input-fieldset-color"
+              );
+              color: map-deep-get($config,
+                #{$theme},
+                "tui-grid-cell-color"
+              );
+
+              &:hover {
+                background: #d9d9d9;
+                color: map-deep-get($config,
+                  #{$theme},
+                  "tui-grid-cell-color"
+                );
+              }
+
+              &:checked {
+                background: #E6F4FF;
+                color: map-deep-get($config,
+                  #{$theme},
+                  "tui-grid-cell-color"
+                );
+              }
+            }
+          }
+        }
+
+      }
+    }
+
+    .tui-grid-editor-select-box-layer {
+
+      .tui-select-box-input {
+        background: map-deep-get($config,
+          #{$theme},
+          "tui-grid-cell-backgroundColor"
+        );
+        border-color:map-deep-get($config,
+          #{$theme},
+          "v-input-fieldset-color"
+        );
+        color: map-deep-get($config,
+          #{$theme},
+          "tui-grid-cell-color"
+        );
+
+        .tui-select-box-icon {
+
+          @if $theme ==dark {
+            background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba(255%2C%20255%2C%20255%2C%200.45)%22%20d%3D%22M1.90728%203.65546L8.20371%2012.3358C8.43228%2012.6501%208.90014%2012.6501%209.12692%2012.3358L15.4251%203.65546C15.4406%203.63411%2015.4499%203.60889%2015.452%203.58259C15.454%203.55628%2015.4487%203.52993%2015.4367%203.50644C15.4247%203.48296%2015.4064%203.46326%2015.3839%203.44954C15.3613%203.43581%2015.3354%203.42859%2015.3091%203.42868H13.9698C13.8787%203.42868%2013.793%203.47332%2013.7394%203.54653L8.66621%2010.5394L3.593%203.54653C3.53942%203.47332%203.45371%203.42868%203.36264%203.42868H2.02335C1.90728%203.42868%201.83943%203.56082%201.90728%203.65546Z%22/%3E%3C/svg%3E");
+          }
+
+          @else {
+            background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba(0%2C%200%2C%200%2C%200.45)%22%20d%3D%22M1.90728%203.65546L8.20371%2012.3358C8.43228%2012.6501%208.90014%2012.6501%209.12692%2012.3358L15.4251%203.65546C15.4406%203.63411%2015.4499%203.60889%2015.452%203.58259C15.454%203.55628%2015.4487%203.52993%2015.4367%203.50644C15.4247%203.48296%2015.4064%203.46326%2015.3839%203.44954C15.3613%203.43581%2015.3354%203.42859%2015.3091%203.42868H13.9698C13.8787%203.42868%2013.793%203.47332%2013.7394%203.54653L8.66621%2010.5394L3.593%203.54653C3.53942%203.47332%203.45371%203.42868%203.36264%203.42868H2.02335C1.90728%203.42868%201.83943%203.56082%201.90728%203.65546Z%22/%3E%3C/svg%3E");
+          }
+        }
+
+      }
+
+      .tui-select-box-dropdown {
+        background-color: map-deep-get($config,
+          #{$theme},
+          "tui-datepicker-backgroundColor"
+        );
+        border: 1px solid map-deep-get($config, #{$theme}, "tui-datepicker-border-color");
+        color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
+
+        .tui-select-box-item {
+
+          color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
+
+          &:before {
+            opacity: map-deep-get($config,
+              #{$theme},
+              "selected-bg-opacity"
+            );
+          }
+        }
+
+
+        .tui-select-box-highlight {
+          background: none !important;
+
+          &:before {
+            background: map-deep-get($config,
+              #{$theme},
+              "tui-grid-cell-color"
+            );
+            opacity: map-deep-get($config,
+              #{$theme},
+              "highlighted-bg-opacity"
+            );
+          }
+
+        }
+
+        .tui-select-box-selected {
+          background: map-deep-get($config,
+            #{$theme},
+            "v-treeview-node-label-active-bg"
+          );
+          color: map-deep-get($config,
+            #{$theme},
+            "tui-grid-cell-color"
+          );
+
+          &:before {
+            // opacity: map-deep-get($config,
+            //   #{$theme},
+            //   "selected-bg-opacity"
+            // );
+            background: map-deep-get($config,
+              #{$theme},
+              "ant-btn-primary-bg"
+            ) !important;
+
+
+            opacity: map-deep-get($config,
+              #{$theme},
+              "selected-bg-opacity"
+            ) !important;
+
+          }
+
+        }
+
       }
     }
 

assets/scss/common/input.scss

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

assets/scss/common/pagination.scss

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

assets/scss/layout.scss

@@ -1,18 +1,27 @@
-.loading {
+.loading-container {
-  z-index: 99;
   position: fixed;
-  top: 50%;
+  top: 0;
-  left: 50%;
+  left: 0;
-  width: 100%;
+  width: 100vw;
-  height: 100%;
+  height: 100vh;
-  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
   background-color: rgba(0, 0, 0, 0.4);
   //box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
 }
 
-.v-spinner {
+.loading-img {
-  top: 50%;
+  width: 64px;
-  left: 50%;
+  height: 64px;
+  animation: spin 3s linear infinite;
+}
+ 
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 ::v-deep {
@@ -182,6 +191,7 @@
       height: calc(100vh - 110px);
       max-height: calc(100vh - 115px);
       padding: 20px;
+      background-color: transparent !important;
     }
 
     .router-tab__slot-end {
@@ -436,6 +446,70 @@
         }
       }
 
+      .router-tab {
+        .router-tab__header {
+          // background-color: map-deep-get($config, #{$theme}, "router-header");
+          // border-color: map-deep-get($config, #{$theme}, "router-header");
+          height: 46px;
+          z-index: 7;
+          max-width: calc(100vw - 290px);
+        }
+  
+        .router-tab__item {
+          background-color: map-deep-get($config, #{$theme}, "router-tab-item");
+          border-color: map-deep-get($config, #{$theme}, "router-tab-item");
+          color: map-deep-get($config, #{$theme}, "router-tab-item-color");
+  
+          &:not(.is-active) {
+            &:hover {
+              &>span {
+                color: map-deep-get($config,
+                  #{$theme},
+                  "router-tab-item-hover-color"
+                );
+              }
+            }
+          }
+  
+          .v-icon {
+            color: map-deep-get($config, #{$theme}, "router-tab-item-icon-color");
+          }
+  
+          &.is-active {
+            background-color: map-deep-get($config,
+              #{$theme},
+              "router-tab-item-active"
+            );
+            border-color: map-deep-get($config,
+              #{$theme},
+              "router-tab-item-active-color"
+            ) !important;
+            color: map-deep-get($config,
+              #{$theme},
+              "router-tab-item-active-color"
+            );
+  
+            .v-icon {
+              color: map-deep-get($config,
+                #{$theme},
+                "router-tab-item-icon-active-color"
+              );
+            }
+  
+          }
+        }
+  
+        .router-tab__slot-end {
+          .v-btn {
+            background-color: map-deep-get($config,
+              #{$theme},
+              "router-tab-slot-end-button-backgroundColor"
+            );
+            box-shadow: none;
+          }
+        }
+      }
+
     }
   }
 }

assets/scss/theme.scss

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

assets/scss/var.scss

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

components/common/AdminMenu.vue

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

components/common/Calendar.vue

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

components/common/Datepicker.vue

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

components/common/DatepickerTimeSelectBox.vue

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

components/common/DatepickerTopView.vue

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

components/common/DatepickerWidget.vue

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

components/common/PastRsltDatePicker.vue

@@ -58,6 +58,11 @@ export default {
 			require: false,
 			default: false,
 		},
+		required: {
+			type: Boolean,
+			require: false,
+			default: false,
+		},
 		labelCols: {
 			type: Number,
 			require: false,
@@ -317,8 +322,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "@/assets/scss/datepicker.scss";
-
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;

components/common/chartoptions/GaugeChart.js

@@ -1,5 +1,6 @@
 // Gauge chart options
-export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
+export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97,
+    value = 0 }) {
     const colorRanges = isDarkMode
         ? [
             [60 / 160, '#49AA19'], // Dark Green
@@ -24,6 +25,9 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
     //     [0.8, "#f7931e"],
     //     [1.0, "#ed1c24"],
     // ];
+    
+    const valueLength = String(value).length;
+    const dynamicFontSize = valueLength >= 4 ? 21 : 30;
     return {
         grid: {
             // top: '-10%',
@@ -109,7 +113,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
                     valueAnimation: true,
                     fontWeight: 500, // or "normal", "lighter", "bolder", or a number like 600
                     fontFamily: "Oxanium, sans-serif", // or any custom font
-                    fontSize: 30,
+                    fontSize: dynamicFontSize,
                     lineHeight: 25,
                     offsetCenter: [0, "60%"],
                     color: isDarkMode ? "#fff" : "#333333",
@@ -130,7 +134,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
                 },
                 data: [
                     {
-                        value: 16,
+                        value: value,
                         name: "에너지사용효율", // "Energy Usage Efficiency"
                     },
                 ],

components/common/modal/ElecPowChrgPop.vue

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

components/common/modal/EnrgEffcEqpmDetailPop.vue

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

components/common/modal/EnrgEffcGdIdxDetPop.vue

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

components/common/modal/EqpmSelectPop.vue

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

components/common/modal/EvtObjPop.vue

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

layouts/default.vue

@@ -104,7 +104,9 @@
                   :items="treevieItems" activatable hoverable color="#3896ff" open-on-click @update:open="openNode">
                   <template slot="label" slot-scope="{ item }">
                     <button :class="{ 'justify-center': miniVariant }" @mouseover="doMouseOver">
-                      
+                      <!-- <span v-if="['MNU0065', 'MNU0027'].includes(item.menuId)" >
+                        {{ item }}
+                      </span> -->
                       <v-icon 
                         v-if="item.lvl === 1 && menuIconKeys.includes(item.menuId)"
                         :class="{ 'mr-2': !miniVariant }" 
@@ -142,167 +144,25 @@
               </v-navigation-drawer>
             </div>
 
-            <v-col>
+            <v-col :class="`${isDarkMode ? 'dark' : 'light'}`">
-              <router-tab ref="routerTab" :tabs="treevieItems" :keep-last-tab="false" :contextmenu="false">
+              <router-tab ref="routerTab" 
+                :tabs="treevieItems" 
+                :keep-last-tab="false" 
+                :contextmenu="false"
+              >
                 <template slot-scope="{ title, closable, to, base }">
                   <span>{{ title }}</span>
                   <v-icon size="20" class="ml-2" v-if="closable" @click.stop="onCloseTab(to)">mdi-close</v-icon>
                 </template>
                 <template #end v-if="false">
-                  <v-menu offset-y>
-                    <template v-slot:activator="{ on, attrs }">
-                      <!-- <v-btn :ripple="false" tile class="btn-close" v-bind="attrs" v-on="on">
-                        <span class="body-2">닫기</span>
-                        <v-icon size="20">mdi-chevron-down</v-icon>
-                      </v-btn> -->
-                      <a-button style="width: 80px; height: 36px" class="btn-close">
-                        <span class="body-2">닫기</span>
-                        <v-icon size="20">mdi-chevron-down</v-icon></a-button>
-                    </template>
-                    <v-list class="py-2 btn-close-menu-list" >
-                      <v-list-item class="px-2">
-                        <v-list-item-title @click="delAllTabsData()" class="body-2">전체 닫기</v-list-item-title>
-                      </v-list-item>
-                      <v-list-item class="px-2">
-                        <v-list-item-title @click="deleteSblingsTab()" class="body-2">나머지 닫기</v-list-item-title>
-                      </v-list-item>
-                    </v-list>
-                  </v-menu>
-                  <v-menu offset-y>
-                    <template v-slot:activator="{ on, attrs }">
-                      <!-- <v-btn
-                        :ripple="false"
-                        tile
-                        class="btn-close"
-                        v-bind="attrs"
-                        v-on="on"
-                        style="width: 100px"
-                      >
-                        <span class="body-2">즐겨찾기</span>
-                        <v-icon size="20">mdi-chevron-down</v-icon>
-                      </v-btn> -->
-                      <a-button style="width: 100px; height: 36px" class="btn-close">
-                        <span class="body-2">즐겨찾기</span>
-                        <v-icon size="20">mdi-chevron-down</v-icon></a-button>
-                    </template>
-                    <v-list v-if="myMenuList.length > 0" class="py-2 btn-close-menu-list" >
-                      <v-list-item v-for="item in myMenuList" :key="item.menuId" class="px-2" style="cursor: pointer">
-                        <v-list-item-title @click="moveToMyMenu(item.url, item.menuId, item.prgmId)" class="body-2">{{
-                          item.menuNm
-                        }}</v-list-item-title>
-                      </v-list-item>
-                    </v-list>
-                  </v-menu>
-                  <a-button id="refresh" :style="{
-                    padding: '0',
-                    width: '36px',
-                    height: '36px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: '4px', // square corners
-                  }" type="text" @click="removeBookMark" v-if="bookmarkBtn == 1">
-                    <span class="material-icons" style="font-size: 17px; vertical-align: middle">star</span>
-                  </a-button>
-                  <a-button id="refresh" :style="{
-                    padding: '0',
-                    width: '36px',
-                    height: '36px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: '4px', // square corners
-                  }" type="text" @click="addBookMark" v-if="bookmarkBtn == 0">
-                    <span class="material-icons" style="font-size: 17px; vertical-align: middle">star_border</span>
-                  </a-button>
-                  <v-btn style="
-                      background-color: white;
-                      color: #fff;
-                      border: 0.2px solid rgb(217, 217, 217);
-                    " id="refresh" icon tile :ripple="false" @click="refreshTab()">
-                    <v-icon style="color: rgba(0, 0, 0, 0.54)">mdi-refresh</v-icon>
-                  </v-btn>
-                  <v-btn style="
-                      background-color: white;
-                      color: #fff;
-                      border: 0.2px solid rgb(217, 217, 217);
-                    " icon tile :ripple="false" @click="toggle()">
-                    <v-icon style="color: rgba(0, 0, 0, 0.54)" v-if="!fullscreen">mdi-arrow-expand-all</v-icon>
-                    <v-icon style="color: rgba(0, 0, 0, 0.54)" v-else>mdi-arrow-collapse-all</v-icon>
-                  </v-btn>
-                  <!-- <v-btn
-                    icon
-                    tile
-                    :ripple="false"
-                    @click="removeBookMark()"
-                    v-if="bookmarkBtn == 1"
-                  >
-                    <span
-                      class="material-icons"
-                      style="font-size: 17px; vertical-align: middle"
-                      >star</span
-                    >
-                  </v-btn> -->
-                  <!-- <v-btn
-                    icon
-                    tile
-                    :ripple="false"
-                    @click="addBookMark()"
-                    v-if="bookmarkBtn == 0"
-                  >
-                    <span
-                      class="material-icons"
-                      style="font-size: 17px; vertical-align: middle"
-                      >star_border</span
-                    >
-                  </v-btn> -->
-                  <!-- <a-button
-                    id="refresh"
-                    :style="{
-                      padding: '0',
-                      width: '36px',
-                      height: '36px',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: '4px', // square corners
-                    }"
-                    type="text"
-                    @click="refreshTab"
-                  >
-                    <v-icon >mdi-refresh</v-icon>
-                  </a-button> -->
-                  <!-- <a-button id="refresh" type="text" @click="setDrawer" class="icon-button">
-                        <i class="mdi mdi-crop-free" style="font-size: 20px"></i>  
-                  </a-button>
-                  <a-button type="text" @click="setDrawer" class="icon-button">
-                        <i class="mdi mdi-crop-free" style="font-size: 20px"></i>  
-                  </a-button> -->
-                  <!-- <a-button
-                    :style="{
-                      padding: '0',
-                      width: '36px',
-                      height: '36px',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: '4px', // square corners
-                    }"
-                    type="text"
-                    @click="toggle"
-                  >
-                    <v-icon v-if="!fullscreen">mdi-arrow-expand-all</v-icon>  
-                    <v-icon v-else>mdi-arrow-collapse-all</v-icon>
-                  </a-button> -->
                 </template>
               </router-tab>
             </v-col>
           </v-row>
         </v-container>
         <div v-if="loadingStackCnt > 0" class="loading-container">
-          <div class="loading">
+            <!-- <Fade-loader color="#717577" />   -->
-            <Fade-loader />
+          <img class="loading-img" src="@/assets/images/loading.png" alt="Loading..." />
-          </div>
         </div>
       </v-main>
     </fullscreen>
@@ -487,6 +347,12 @@ export default {
         //console.log("localPageData", this.pageData);
       },
     },
+    isDarkMode(){
+      this.loadingStackCnt = 1;
+      setTimeout(() => {
+        this.loadingStackCnt = 0;
+      }, 1000);
+    },
     // menuLink: {
     //   deep: true,
     //   handler() {
@@ -848,3 +714,15 @@ export default {
 @import '@/assets/scss/layout.scss';
 
 </style>
+
+<style lang="scss">
+.light .router-tab .router-tab__header {
+    background-color: #fff;
+    border-color: #fff;
+}
+
+.dark .router-tab .router-tab__header {
+    background-color: #212224;
+    border-color: #212224;
+}
+</style>

nuxt.config.js

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

pages/comm/base/CalendarMngPage.vue

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

pages/comm/base/NoticeMngPage.vue

@@ -4,7 +4,7 @@
 		<!-- 리스트 페이지 시작 -->
 		<div v-if="pageActionFlag == 'list'" class="h1001">
 			<v-card class="">
-				<div class="pa-5">
+				<div class="pa-5 pb-0">
 					<v-row align="center" no-gutters>
 						<v-col :cols="12" class="d-flex align-center justify-space-between">
 							<v-card-title class="pa-0 custom-title-4">공지사항</v-card-title>
@@ -15,11 +15,15 @@
 								<!-- <v-btn @click="listPageButtonGroupClickEvent('delete')" :ripple="false">삭제</v-btn> -->
 							</div>
 						</v-col>
-						<v-col :cols="12" ref="contents" class="mt-5" style="min-height: calc(100% - 76px);">
+						<v-col :cols="12" ref="contents" class="mt-5" style="min-height: calc(100% - 73px);">
-							<div ref="gridParent" class="px-50" style="min-height: 70vh;">
+							<div ref="gridParent" class="px-50" style="min-height: 64vh;">
 								<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
 									:parentPrgmId="myPrgmId" @getRowsData="getRowData" />
 							</div>
+							<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
+								<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
+									@loadData="changeGrid" />
+							</div>
 						</v-col>
 					</v-row>
 				</div>
@@ -37,7 +41,7 @@
 								class="mr-1" icon="unordered-list">목록</a-button>
 							<a-button @click="viewPageButtonGroupClickEvent('reply')" type="primary" :ripple="false"
 								class="mr-1" icon="send-outlined">
-								<v-icon small :class="['mr-2']" >$icoSend</v-icon>
+								<v-icon small :class="['mr-2']">$icoSend</v-icon>
 								답글
 							</a-button>
 							<a-button @click="viewPageButtonGroupClickEvent('update')" type="primary" :ripple="false"
@@ -60,11 +64,8 @@
 						<v-card-title class="custom-title-7 pa-0">
 							파일목록
 						</v-card-title>
-						<div v-for="fileData in viewActionData.fileData" 
+						<div v-for="fileData in viewActionData.fileData" :key="fileData.apndFileId"
-							:key="fileData.apndFileId" 
+							:class="['file-item', isDarkMode ? 'dark' : 'light']" style="background-color: unset;">
-							:class="['file-item', isDarkMode?'dark':'light']"
-							style="background-color: unset;"
-						>
 							<a @click.prevent="downloadFile(fileData)" class="pa-0">
 								<div class="d-flex justify-start search-box-label mb-0">
 									<v-icon>mdi-paperclip</v-icon>
@@ -93,15 +94,14 @@
 						</v-col>
 						<v-col :cols="12" style="min-height: calc(100vh - 450px);">
 							<editor ref="tuiEditor" height="100%" initialEditType="wysiwyg"
-							:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/>
+								:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']" />
 						</v-col>
 
 						<v-col :cols="6" class="mt-5">
 							<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 							<div class="" v-if="writeActionData.fileData">
 								<div v-for="(fileData, index) in writeActionData.fileData" :key="fileData.apndFileId"
-									:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
+									:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
-								>
 									<div class="file-item-detail">
 										<v-icon>mdi-paperclip</v-icon>
 										<span href="#" class="file-item-name">{{ fileData.name }}</span>
@@ -110,17 +110,16 @@
 										@click="writeActionData.업로드fileData.splice(index, 1)" />
 								</div>
 							</div>
-							<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload" @click="$refs.writeInputFile.$refs.input.click()">
+							<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload"
+								@click="$refs.writeInputFile.$refs.input.click()">
 								업로드
 							</a-button>
 							<v-file-input ref="writeInputFile" v-model="writeActionData.fileData" multiple outlined
 								hide-input class="d-none" prepend-icon="mdi-tray-arrow-up"></v-file-input>
 						</v-col>
 						<v-col :cols="12" class="text-right">
-							<a-button @click="writePageButtonGroupClickEvent('cancel')" 
+							<a-button @click="writePageButtonGroupClickEvent('cancel')" :ripple="false"
-								:ripple="false"
+								class="ant-btn-popup-default mr-2" color="primary">취소</a-button>
-								class="ant-btn-popup-default mr-2" 
-								color="primary" >취소</a-button>
 							<a-button @click="writePageButtonGroupClickEvent('write')" :ripple="false"
 								type="primary">등록</a-button>
 						</v-col>
@@ -142,15 +141,14 @@
 						</v-text-field>
 					</v-col>
 					<v-col :cols="12" style="height: calc(100vh - 270px);" class="mt-2">
-						<editor ref="tuiReplyEditor" height="100%" initialEditType="wysiwyg" 
+						<editor ref="tuiReplyEditor" height="100%" initialEditType="wysiwyg"
-						:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/>
+							:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']" />
 					</v-col>
 					<v-col :cols="6" class="mt-5">
 						<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 						<div class="" v-if="replyActionData.fileData">
 							<div v-for="(fileData, index) in replyActionData.fileData" :key="fileData.apndFileId"
-								:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
+								:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
-							>
 								<div class="file-item-detail">
 									<v-icon>mdi-paperclip</v-icon>
 									<span href="#" class="file-item-name">{{ fileData.name }}</span>
@@ -159,7 +157,8 @@
 									@click="replyActionData.fileData.splice(index, 1)" />
 							</div>
 						</div>
-						<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload" @click="$refs.replyInputFile.$refs.input.click()">
+						<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload"
+							@click="$refs.replyInputFile.$refs.input.click()">
 							업로드
 						</a-button>
 						<v-file-input ref="replyInputFile" multiple show-size v-model="replyActionData.fileData"
@@ -167,10 +166,8 @@
 						</v-file-input>
 					</v-col>
 					<v-col :cols="12" class="text-right">
-						<a-button @click="replyPageButtonGroupClickEvent('cancel')" 
+						<a-button @click="replyPageButtonGroupClickEvent('cancel')" class="ant-btn-popup-default mr-2"
-							class="ant-btn-popup-default mr-2" 
+							color="primary" :ripple="false">취소</a-button>
-							color="primary"
-							:ripple="false">취소</a-button>
 						<a-button @click="replyPageButtonGroupClickEvent('reply')" :ripple="false"
 							type="primary">등록</a-button>
 					</v-col>
@@ -195,14 +192,13 @@
 						<v-col :cols="12" style="height: calc(90vh - 270px);" class="mt-4">
 							<editor ref="tuiUpdateEditor" height="100%" initialEditType="wysiwyg"
 								:initialValue="updateActionData.content"
-								:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/>
+								:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']" />
 						</v-col>
 						<v-col :cols="6" class="mt-5">
 							<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 							<div class="" v-if="updateActionData.fileData">
 								<div v-for="(fileData, index) in updateActionData.fileData" :key="fileData.apndFileId"
-									:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
+									:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
-								>
 									<div class="file-item-detail">
 										<v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
 										<span href="#" class="file-item-name">{{ fileData.name }}</span>
@@ -214,8 +210,7 @@
 							<div class="current-files" v-if="updateActionData.currentFileList">
 								<div v-for="(fileData, index) in updateActionData.currentFileList"
 									:key="fileData.apndFileId"
-									:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
+									:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
-								>
 									<div class="file-item-detail">
 										<v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
 										<span @click.prevent="downloadFile(fileData)" href="#"
@@ -226,7 +221,8 @@
 										@click="addFileToDeleteFileList(fileData)" />
 								</div>
 							</div>
-							<a-button class="ant-btn-popup-default mt-2" color="primary" icon="upload" @click="$refs.updateInputFile.$refs.input.click()">
+							<a-button class="ant-btn-popup-default mt-2" color="primary" icon="upload"
+								@click="$refs.updateInputFile.$refs.input.click()">
 								업로드
 							</a-button>
 							<v-file-input ref="updateInputFile" multiple show-size v-model="updateActionData.fileData"
@@ -234,10 +230,8 @@
 							</v-file-input>
 						</v-col>
 						<v-col :cols="12" class="text-right">
-							<a-button @click="updatePageButtonGroupClickEvent('cancel')" 
+							<a-button @click="updatePageButtonGroupClickEvent('cancel')"
-								class="ant-btn-popup-default mr-2" 
+								class="ant-btn-popup-default mr-2" color="primary">취소</a-button>
-								color="primary"
-							>취소</a-button>
 							<a-button @click="updatePageButtonGroupClickEvent('update')" type="primary">등록</a-button>
 						</v-col>
 					</v-row>
@@ -258,6 +252,7 @@ import '@toast-ui/editor/dist/toastui-editor.css';
 import { Editor } from '@toast-ui/vue-editor';
 import '@toast-ui/editor/dist/toastui-editor-viewer.css';
 import { Viewer } from '@toast-ui/vue-editor';
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 // const myPrgmId = "PRG0034";
@@ -284,6 +279,7 @@ export default {
 		Utility,
 		Editor,
 		Viewer,
+		pagination,
 	},
 	data() {
 		return {
@@ -298,6 +294,11 @@ export default {
 			loadGrid: false,
 			selectedRowKey: null,
 			selectedRowData: null,
+			itemsPerPage: 10,
+			itemsPerPageArray: [10, 20, 30],
+			limit: 20,
+			page: 1,
+			totalCount: 0,
 			writeActionData: {
 				title: '',
 				postNo: null,
@@ -339,7 +340,10 @@ export default {
 	},
 	watch: {
 		chkIsFind(val) {
-			if (val) this.search();
+			if (val) {
+				this.page = 1;
+				this.search();
+			}
 		},
 	},
 	async beforeCreate() {
@@ -425,7 +429,7 @@ export default {
 			this.getGridData();
 		},
 		gridInit() {
-			const gridHeight = this.$refs.contents.offsetHeight - 76;
+			const gridHeight = this.$refs.contents.offsetHeight - 120;
 
 			const myOptions = {
 				header: {
@@ -497,16 +501,29 @@ export default {
 		async getGridData() {
 			var params = {
 				bordNo: 'BORD0001',
+				limit: this.limit,
+				page: this.page,
+				offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
 			};
 
 			this.loadGrid = false;
 
 			const res = await this.postApiReturn({
-				apiKey: 'selectPostList',
+				apiKey: 'selectPostPage',
-				resKey: 'postData',
+				resKey: 'postPage',
 				sendParam: params,
 			});
 
+			const res2 = await this.postApiReturn({
+				apiKey: 'selectPostPageTotal',
+				resKey: 'postPageTotal',
+				sendParam: {
+					bordNo: 'BORD0001',
+				}
+			});
+
+			this.totalCount = res2[0].totalcount;
+
 			this.setGridData({
 				gridKey: this.gridName,
 				value: res,
@@ -1038,6 +1055,12 @@ export default {
 
 			return resultFlag;
 		},
+		changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			this.search();
+		},
 	},
 };
 
@@ -1090,7 +1113,7 @@ const defaultData = {
 
 @each $theme in dark, light {
 	@include theme($theme);
-	
+
 	::v-deep {
 		.toastui-editor-#{$theme} {
 			.toastui-editor-mode-switch {
@@ -1098,7 +1121,7 @@ const defaultData = {
 					border: none;
 					background-color: transparent;
 					color: map-deep-get($config, #{$theme}, "card-title-color") !important;
-	
+
 					&.active {
 						color: map-deep-get($config, #{$theme}, "card-text-info-color") !important;
 						border-top: 1px solid map-deep-get($config, #{$theme}, "card-text-info-color");
@@ -1106,7 +1129,7 @@ const defaultData = {
 
 				}
 			}
-	
+
 		}
 	}
 

pages/ems/base/AddInfoMngPage.vue

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

pages/ems/base/DashboardPage.vue

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

pages/ems/base/GdIdxMngPage.vue

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

pages/ems/base/GdStndMngPage.vue

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

pages/ems/base/PastRsltDataReadPage.vue

@@ -38,7 +38,7 @@
 					<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
 							<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
 								@loadData="changeGrid" />
-						</div>
+					</div>
 				</v-card>
 
 			</v-col>

pages/ems/base/ReadObjectMngPage.vue

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

pages/ems/base/ReadResultCloseMngPage.vue

@@ -129,10 +129,20 @@ let myPrgmId;
 export default {
   mixins: [mixinGlobal, resize],
   async asyncData(context) {
-    const myState = context.store.state;
+    // console.log('----DEBUG-----ReadResultCloseMngPage--asyncData:', Utility.setFormatDate(new Date(), "YYYYMMDD"));
-    myPrgmId = context.route.query.prgmId;
+    try{
-    await context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
+      myPrgmId = context.route.query.prgmId;
-    myTitle = await myState.activeMenuInfo.menuNm;
+      const myState = context.store.state;
+      const activeMenuInfo = myState.menuData[myPrgmId];
+      myTitle = activeMenuInfo.menuNm;
+
+      // console.log('-----DEBUG----store.commit----setActiveMenuInfo:', activeMenuInfo);
+      await context.store.commit("setActiveMenuInfo", activeMenuInfo);
+      myTitle = await myState.activeMenuInfo.menuNm;
+      // console.log('-----DEBUG----store.commit----setActiveMenuInfo---Compeleted:', myState.activeMenuInfo);
+    }catch(err){
+      // console.log('-----DEBUG----err', err);
+    }
   },
   meta: {
     title: () => {
@@ -206,18 +216,21 @@ export default {
       this.setPageData({ isFind: true });
     },
   },
-  async beforeCreate() {
+  beforeCreate() { 
+    // console.log('----DEBUG-----ReadResultCloseMngPage--beforeCreate:', Utility.setFormatDate(new Date(), "YYYYMMDD"));
     myPrgmId = this.$route.query.prgmId;
-    await this.$store.dispatch("chkOpenTabList", {
+    const context = {
       key: "create",
       prgmId: myPrgmId,
       defaultData: defaultData,
-    });
+    };
+    this.$store.dispatch("chkOpenTabList", context);
   },
   mounted() {
     this.init();
   },
-  created() {},
+  created() { 
+  },
   methods: {
     ...mapMutations({
       setPageData: "setPageData",

pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue

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

pages/ems/effc/EnrgEffcTotSummPage.vue

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

pages/ems/effc/EnrgMapPage.vue

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

pages/ems/effc/EnrgUsePlanPage.vue

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

pages/ems/effc/EnrgUseTotSummPage.vue

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

pages/ems/effc/EqpmIndMntrPage.vue

@@ -282,13 +282,13 @@ export default {
     changeGrid: async function (pageNum, limit) {
       this.page = pageNum;
       this.limit = limit;
-      this.search();
+      this.getGridData(true);
     },
     async init() {
       await this.getSelectValueList();
       await this.setQueryParams();
       this.gridInit();
-      await this.getGridData();
+      await this.getGridData(false);
 
       this.initedFlag = true;
     },
@@ -588,8 +588,10 @@ export default {
         value: columnList,
       });
     },
-    async getGridData() {
+    async getGridData(isPaging) {
-      this.loadGrid = false;
+      if(!isPaging) {
+        this.loadGrid = false;
+      }
       this.enrgUseMainIdxDesc = [];
       var apiKey = null;
       var apiKey2 = null;
@@ -611,20 +613,34 @@ export default {
         apiKey = "selectMonthlyEnrgUseMainIdx";
         apiKey2 = "selectMonthlyEnrgUseMainIdxPageTotal";
       }
-      var res = await this.postApiReturn({
-        apiKey: apiKey,
-        resKey: "eqpmIndMntrData",
-        sendParam: params,
-      });
 
-      var res2 = await this.postApiReturn({
+      
-        apiKey: apiKey2,
+      var [res, res2] = await Promise.all([
-        resKey: "eqpmIndMntrPageTotal",
+        this.postApiReturn({
-        sendParam: params,
+          apiKey: apiKey,
-      });
+          resKey: "eqpmIndMntrData",
+          sendParam: params,
+        }),
+        this.postApiReturn({
+          apiKey: apiKey2,
+          resKey: "eqpmIndMntrPageTotal",
+          sendParam: params,
+        }),
+      ]);
+
+      // var res = await this.postApiReturn({
+      //   apiKey: apiKey,
+      //   resKey: "eqpmIndMntrData",
+      //   sendParam: params,
+      // });
+
+      // var res2 = await this.postApiReturn({
+      //   apiKey: apiKey2,
+      //   resKey: "eqpmIndMntrPageTotal",
+      //   sendParam: params,
+      // });
 
       this.totalCount = res2[0].totalcount;
-
       this.enrgUseMainIdxDesc = await this.postApiReturn({
         apiKey: "selectEnrgUseMainIdxDesc",
         resKey: "eqpmIndMntrData",
@@ -640,18 +656,16 @@ export default {
           no: i + 1,
         });
       }
-
       this.setGridData({
         gridKey: this.gridName,
         value: newRes,
       });
 
       this.loadGrid = true;
-
       this.makeTooltip();
     },
     async search() {
-      await this.getGridData();
+      await this.getGridData(false);
     },
     async makeTooltip() {
       var gdIdxList = [

pages/ems/effc/TagTrndPage.vue

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

pages/login/index.vue

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

store/index.js

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

store/modules/list.js

@@ -514,6 +514,8 @@ const INIT_URL_STATE = {
 
 	// prgmId: "PRG0003" 공지사항
 	selectPostList: 'comm/base/NoticeMngCtr/selectPostList',
+	selectPostPage: 'comm/base/NoticeMngCtr/selectPostPage',
+	selectPostPageTotal: 'comm/base/NoticeMngCtr/selectPostPageTotal',
 	deletePostList: 'comm/base/NoticeMngCtr/deletePost',
 
 	//prgmId: "PRG0121" 공지사항 게시물 상세조회
@@ -902,6 +904,8 @@ const INIT_URL_STATE = {
 	//prgmId: PRG0079 에너지사용량계획
 	selectFabCodeList: 'ems/effc/EnrgUsePlanCtr/selectFabCodeList',
 	selectEnrgUsePlanData: 'ems/effc/EnrgUsePlanCtr/selectEnrgUsePlanData',
+	selectEnrgUsePlanPageTotal: 'ems/effc/EnrgUsePlanCtr/selectEnrgUsePlanPageTotal',
+
 	saveEmsEqpmMmPlanDatas: 'ems/effc/EnrgUsePlanCtr/saveEmsEqpmMmPlanDatas',
 
 	//prgmId : PRG0080 에너지 사용량 - Total Summary