fix bug ui scrren 12 28

Reviewed-on: #68

assets/scss/common.scss

@@ -231,6 +231,35 @@ a {
   .v-application.#{$theme}-mode {
     min-width: 1000px;
 
+    .ant-checkbox-wrapper.ant-checkbox-wrapper-disabled,
+    .ant-checkbox-disabled .ant-checkbox-input
+    {
+      cursor: default !important;
+    }
+
+    .v-list-item__title {
+      font-family: var(--desktop-normal-font-family, "Inter-Regular", sans-serif) !important;
+    }
+
+    .btn-close-menu-list {
+      min-width: 100px;
+      border-color: transparent;
+      background-color: map-deep-get($config, #{$theme}, "btn-header-select-bg") !important;
+  
+      .v-list-item {
+        min-height: 30px;
+      }
+  
+      .v-list-item__title {
+        color: map-deep-get($config, #{$theme}, "btn-header-select-color") !important;
+  
+        &:hover {
+          color: #46c0ff !important;
+          cursor: pointer;
+        }
+      }
+    }
+
     .icon-datepicker-color {
       color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
     }
@@ -253,16 +282,12 @@ a {
       color: map-deep-get($config, #{$theme}, "v-select-label-color");
     }
 
-    // .header {
-    //   background-color: map-deep-get($config, #{$theme}, "header-backgroud");
-    //   border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-header-border");
-    // }
-
     .custom-chart{
       border: 1px solid map-deep-get($config, #{$theme}, "v-chart-border");
     }
 
     .v-icon {
+      color: currentColor;
       &.icon-orange {
         svg {
           fill:map-deep-get($config,
@@ -764,7 +789,7 @@ a {
 	
 				.v-list-item__title {
 					color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
-				}
+        }
 			}
 	
 			&.v-select-list{
@@ -812,6 +837,7 @@ a {
       font-size: 2rem;
       font-weight: bold;
       padding-left: 8px;
+      margin-top: 2px;
 
       img {
         width: 139px;
@@ -828,20 +854,11 @@ a {
   .btn-close-menu-list {
     min-width: 100px;
     border-color: transparent;
-    background-color: map-deep-get($config, #{$theme}, "btn-header-select-bg") !important;
 
     .v-list-item {
       min-height: 30px;
     }
 
-    .v-list-item__title {
-      color: map-deep-get($config, #{$theme}, "btn-header-select-color");
-
-      &:hover {
-        color: #46c0ff;
-      }
-    }
-
     .v-btn {
       background-color: transparent !important;
       color: map-deep-get($config, #{$theme}, "btn-header-select-color") !important;

assets/scss/common/editor.scss

@@ -92,6 +92,15 @@
   background-color: #36383f;
 }
 
+.toastui-editor-dark .toastui-editor-popup-add-heading h1,
+.toastui-editor-dark .toastui-editor-popup-add-heading h2,
+.toastui-editor-dark .toastui-editor-popup-add-heading h3,
+.toastui-editor-dark .toastui-editor-popup-add-heading h4,
+.toastui-editor-dark .toastui-editor-popup-add-heading h5,
+.toastui-editor-dark .toastui-editor-popup-add-heading h6 {
+  color: #eee;
+}
+
 .toastui-editor-dark .toastui-editor-popup-body label {
   color: #9a9da3;
 }

assets/scss/common/grid.scss

@@ -21,11 +21,20 @@
     display: none;
   }
 
+  &-no-scroll-y {
+    .tui-grid-rside-area {
+      .tui-grid-header-area,
+      .tui-grid-summary-area {
+        margin-right: 0 !important;
+      }
+    }
+  }
+
   &-rside-area {
 
     .tui-grid-header-area,
     .tui-grid-summary-area {
-      margin-right: $scrollbar-width;
+      margin-right: $scrollbar-width !important;
     }
   }
 
@@ -56,25 +65,35 @@
     font-weight: 400;
   }
 
-  
+
   th[data-column-name="_checked"] {
     padding-left: 0;
   }
 
 
+
 }
 
-.tui-grid-table{
+.tui-grid-table {
+
   .tui-grid-cell-header,
   .tui-grid-cell-has-input .tui-grid-cell-content {
     padding: 8px;
   }
 
   th[data-column-name="_checked"] {
-    &.tui-grid-cell-header  {
+    &.tui-grid-cell-header {
       padding-left: 0;
     }
-    
+
+  }
+
+  .tui-grid-cell {
+    &:last-child {
+      input[type=checkbox] {
+        margin-top: 8px;
+      }
+    }
   }
 }
 
@@ -99,8 +118,8 @@
   @include theme($theme);
 
   .v-application.#{$theme}-mode {
-    .tui-grid-content-area{
-      .tui-grid-header-area{
+    .tui-grid-content-area {
+      .tui-grid-header-area {
         height: auto !important;
       }
     }
@@ -115,9 +134,9 @@
         "tui-grid-title-color"
       );
     }
-    
-    .grid-toggle-section{
-      .tui-grid-rside-area{
+
+    .grid-toggle-section {
+      .tui-grid-rside-area {
         .tui-grid-body-area {
           height: auto !important;
 
@@ -145,16 +164,17 @@
         }
       }
 
-      &-border-line-right{
+      &-border-line-right {
         opacity: 0;
       }
 
-      &-body-container{
+      &-body-container {
         border-right: 0;
         // position: relative;
         width: auto !important;
 
-        .tui-grid-table-container{
+        .tui-grid-table-container {
+
           // width: 100% !important;
           .tui-grid-table {
             // width: 100% !important;
@@ -166,12 +186,19 @@
             // }
           }
         }
+
+        .tui-grid-layer-editing {
+          border-color: map-deep-get($config,
+            #{$theme},
+            "tui-grid-border-vertical-color"
+          );
+        }
       }
 
       &-summary-area,
       &-container {
         font-family: Inter;
- 
+
         .tui-grid-cell {
           &.tui-grid-cell-summary {
             color: map-deep-get($config,
@@ -285,7 +312,8 @@
               #{$theme},
               "ant-btn-primary-color"
             );
-            .radio-mark{
+
+            .radio-mark {
               border-color: map-deep-get($config,
                 #{$theme},
                 "arow-line-color"
@@ -294,6 +322,7 @@
                 #{$theme},
                 "arow-line-btn-bg-color"
               );
+
               &::after {
                 content: "";
                 position: absolute;
@@ -311,12 +340,40 @@
             }
           }
         }
+
+        .tui-grid-cell-content {
+
+          input[type='text'],
+          input[type='password'] {
+            border-color: map-deep-get($config,
+              #{$theme},
+              "v-input-fieldset-color"
+            );
+            background: map-deep-get($config,
+              #{$theme},
+              "v-input-backgroundColor"
+            );
+            border-radius: 4px;
+            color: map-deep-get($config,
+              #{$theme},
+              "tui-grid-cell-color"
+            );
+          }
+
+          &.tui-grid-layer-editing {
+            background: transparent;
+            // background:map-deep-get($config,
+            //   #{$theme},
+            //   "tui-grid-cell-insert-color"
+            // );
+          }
+        }
       }
 
       &-cell {
         &:last-child {
           padding-right: 1px;
-          border-right: 1px solid ;
+          border-right: 1px solid;
           border-right-color: map-deep-get($config,
             #{$theme},
             "tui-grid-cell-borderColor"
@@ -349,7 +406,7 @@
           "tui-grid-border-vertical-color"
         );
         color: map-deep-get($config,
-        #{$theme},
+          #{$theme},
           "tui-grid-header-color"
         );
 
@@ -358,7 +415,7 @@
       &-header-area {
         // background-color: none;
         border: none;
-        margin-right: 0 !important;
+        // margin-right: 0 !important;
         background-color: map-deep-get($config,
           #{$theme},
           "tui-grid-cell-backgroundColor"
@@ -395,14 +452,14 @@
           background-color: map-deep-get($config,
             #{$theme},
             "tui-grid-cell-insert-color"
-          );
+          ) !important;
         }
 
         &.row-modify {
           background-color: map-deep-get($config,
             #{$theme},
             "tui-grid-cell-modify-color"
-          );
+          ) !important;
         }
 
         &.row-removed {
@@ -497,6 +554,7 @@
 
       &-tree-button-expand {
         z-index: 9999;
+
         .tui-grid-btn-tree {
           i {
             width: 16px;
@@ -516,6 +574,7 @@
 
       &-tree-button-collapse {
         z-index: 9999;
+
         .tui-grid-btn-tree {
           i {
             width: 16px;

assets/scss/common/pagination.scss

@@ -2,6 +2,13 @@
 
   // @include theme($theme);
   .v-application.#{$theme}-mode {
+    .pagination-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 12px 0;
+      margin-top: 10px;
+    }
 
     .ant-pagination-item,
     .ant-pagination-prev,

assets/scss/layout.scss

@@ -79,6 +79,8 @@
             &>.v-treeview-node__root:before {
               border-radius: 6px;
               z-index: -1;
+              background-color: rgba(0, 0, 0, 0);
+              transition-duration: 0s;
             }
     
             &>.v-treeview-node__root:hover:before {
@@ -379,21 +381,21 @@
               .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);
+                      
+                      &:before {
+                        opacity: 1 !important;
+                        border: 1px solid  map-deep-get($config, #{$theme}, "v-input-textarea-border");
+                        border-radius: 8px;
+                      }
+
                       .v-treeview-node__content {
                         .v-treeview-node__label {
                           color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
@@ -418,6 +420,12 @@
                       }
                     }
   
+                    .v-treeview-node__content {
+                      .v-treeview-node__label {
+                        color: map-deep-get($config, #{$theme}, "card-default-color");
+                      }
+                    }
+
                   }
                 }
   

assets/scss/var.scss

@@ -113,7 +113,7 @@ $config: (
     tui-grid-cell-color: #FFFFFFD9,
     tui-grid-cell-insert-color: #2B2111,
     tui-grid-cell-selected-color: #0A224F,
-    tui-grid-cell-modify-color: #13636c,
+    tui-grid-cell-modify-color: #2B2111,
     tui-grid-cell-removed-color: #2A1215,
     tui-grid-cell-disabled-color: rgb(170, 170, 170),
     tui-grid-cell-hover-backgroundColor: #2d4571,
@@ -263,7 +263,7 @@ $config: (
     tui-grid-cell-color: #000000E0,
     tui-grid-cell-insert-color: #FFFBE6,
     tui-grid-cell-selected-color: #E6F4FF,
-    tui-grid-cell-modify-color: #e6f5f7,
+    tui-grid-cell-modify-color: #FFFBE6,
     tui-grid-cell-removed-color: #FFF1F0,
     tui-grid-cell-hover-backgroundColor: #f5f5f5,
     v-tabs-items-border-color: #0000000F,

components/common/Grid.vue

@@ -174,6 +174,11 @@ export default {
 				this.gridScrollTop = e.target.scrollTop;
 				this.gridScrollLeft = e.target.scrollLeft;
 			});
+			if (this.scrollBody.scrollHeight > this.scrollBody.clientHeight) {
+				this.gridInstance.$el.getElementsByClassName('tui-grid-content-area')[0].classList.remove('tui-grid-no-scroll-y');
+			} else {
+				this.gridInstance.$el.getElementsByClassName('tui-grid-content-area')[0].classList.add('tui-grid-no-scroll-y');
+			}
 		}
 	},
 	methods: {
@@ -301,7 +306,7 @@ export default {
 			// console.log('startEditing2...')
 			if (this.editorGrid && e.rowKey >= 0) {
 				this.editorStartKey = e.rowKey;
-				this.gridInstance.invoke('startEditing', e.rowKey, e.columnName);
+				this.gridInstance.invoke('startEditing', e.rowKey, e.columnName, 'row-modify');
 				this.$emit(
 					'getRowsData',
 					this.gridInstance.invoke('getRow', e.rowKey),

components/common/modal/EqpmSelectPop.vue

@@ -94,7 +94,7 @@
 				</div>
 
 				<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
-					<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="mr-2">닫기</a-button>
+					<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="ant-btn-popup-default mr-2">닫기</a-button>
 					<a-button :ripple="false" type="primary" @click="setUpdate($event)">확인</a-button>
 				</v-card-actions>
 			</v-card>

components/common/modal/PlanPop.vue

@@ -238,7 +238,13 @@ export default {
 			type: Object,
 			require: false,
 			default: () => {
-				return {};
+				return {
+					selectTimeValue1: "00 : 00", // selectBoxTime에 필요한 prop
+					selectTimeValueList1: [], // selectBoxTime에 필요한 prop
+					selectTimeValue2: "01 : 00", // selectBoxTime에 필요한 prop
+					selectTimeValueList2: [], // selectBoxTime에 필요한 prop
+					minInterval: 10,
+				};
 			},
 		},
 	},
@@ -536,8 +542,8 @@ export default {
 			let returnData = res[0];
 			this.strtDt = Utility.setFormatDate(returnData.strtDt, 'YYYY-MM-DD');
 			this.endDt = Utility.setFormatDate(returnData.endDt, 'YYYY-MM-DD');
-			this.selectTimeValue1 = returnData.strtHh+' : '+  returnData.strtMm;
-			this.selectTimeValue2 = returnData.endHh+' : '+  returnData.endMm;
+			this.selectTimeValue1 = returnData.strtHh + ' : ' + returnData.strtMm;
+			this.selectTimeValue2 = returnData.endHh + ' : ' + returnData.endMm;
 			this.planTitle = returnData.planTitle;
 			this.planCntn = returnData.planCntn;
 			this.planColor = returnData.planColor;

components/common/select/SelectBoxTime.vue

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

components/icons/icoSend.vue

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

components/pages/ems/DataSetInfo/DataSetTagRelTab.vue

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

components/pages/ems/EccInfo/EccIaoTab.vue

@@ -98,19 +98,17 @@ export default {
 	watch: {
 		selectedObjId(val) {
 			if (val === 'TAG') {
-				this.detailList[1].class = 'd-none';
-				this.detailList[2].class = 'd-block pl-4';
+				this.detailList[1].class = 'd-none ';
+				this.detailList[2].class = 'd-block pl-4 mt-2';
 				this.detailList[3].class = 'd-block';
+				this.detailList[4].class = 'pl-4 mt-2';
 			} else {
 				// }else if(val==="READ_PLC"){
+				this.detailList[4].class = 'pl-4 mt-2';
 				this.detailList[3].class = 'd-block';
 				this.detailList[2].class = 'd-none';
-				this.detailList[1].class = 'd-block pl-4';
+				this.detailList[1].class = 'd-block pl-4 mt-1 pb-0';
 			}
-			this.detailList[4].class = 'pl-4 mt-2';
-			
-			console.log(val)
-			console.log(this.detailList)
 		},
 	},
 	created() {},
@@ -380,7 +378,7 @@ const myDetail = [
 		label: '대상 유형',
 		disabled: false,
 		cols: 6,
-		class: 'pr-4 py-2',
+		class: 'pr-4 py-2 mt-1',
 		list: 'emMapDivList',
 		valueNm: 'objKind',
 		itemText: 'commCdNm',

components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue

@@ -6,7 +6,7 @@
 					<v-row>
 						<v-col :cols="8" style="padding:0px">
 							<!-- 조회기간 -->
-							<DatePicker :parentPrgmId="parentPrgmId" label="조회기간" />
+							<DatePicker :parentPrgmId="parentPrgmId" label="조회기간" customClass="tab-datepicker" />
 						</v-col>
 						<v-col cols="4" class="d-flex justify-end align-center">
 							<Buttons
@@ -378,3 +378,10 @@ function numberFormatter({ value }) {
 	return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 }
 </script>
+<style lang="scss" scoped>
+	::v-deep {
+		.tab-datepicker {
+			width: 64% !important;
+		}
+	}
+</style>

pages/comm/auth/UserRoleMngPage.vue

@@ -912,17 +912,6 @@ const myColumns = [
 ];
 
 const unAsgnRoleByUserColumns = [
-	{
-		header: '',
-		name: '',
-		align: 'center',
-		width: 50,
-		formatter: (props) => {
-			return `<label class="custom-radio">
-						<span class="radio-mark"></span>
-					</label>`;
-		}
-	},	
 	{ header: '역할ID', name: 'roleId', align: 'left' },
 	{ header: '역할명', name: 'roleNm' },
 	{ header: '적용시작일', name: 'aplyStartDt', hidden: true },
@@ -932,8 +921,7 @@ const unAsgnRoleByUserColumns = [
 ];
 
 const asgnRoleByUserColumns = [
-	
-	{ header: '역할ID', name: 'roleId', align: 'center' },
+	{ header: '역할ID', name: 'roleId', align: 'left' },
 	{ header: '역할명', name: 'roleNm' },
 	{
 		header: '적용시작일',
@@ -947,6 +935,17 @@ const asgnRoleByUserColumns = [
 ];
 
 const asgnMenuByUserColumns = [
+	{
+		header: '',
+		name: '',
+		align: 'center',
+		width: 50,
+		formatter: (props) => {
+			return `<label class="custom-radio">
+						<span class="radio-mark"></span>
+					</label>`;
+		}
+	},	
 	{ header: '메뉴명', name: 'menuNm' }];
 
 const myDetail = blocCdList => {

pages/comm/base/BatchLogMngPage.vue

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

pages/comm/base/NoticeMngPage.vue

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

pages/ems/base/DashboardPage.vue

@@ -512,7 +512,7 @@
       <v-col cols="12" sm="12" xl="12" style="height: 300px">
         <v-card style="border-radius: 4px" class="pb-5">
           <div style="height: 20px"></div>
-          <div class="h100 px-5" style="height: calc(100% - 30px)">
+          <div class="h100 px-5" style="height: calc(100% - 70px)">
             <div ref="gridParent" class="h100 w100">
               <component
                 :is="loadGrid ? 'Grid' : null"
@@ -521,6 +521,16 @@
                 :ref="gridName"
                 @dblClick="gridClickEvent"
               />
+              <div v-if="loadGrid && totalCount > 0" class="pagination-wrapper">
+                <pagination
+                  id="pagination"
+                  :total-count="totalCount"
+                  :page-num="page"
+                  :limit="limit"
+                  :itemsPerPageArray="itemsPerPageArray"
+                  @loadData="changeGrid"
+                />
+              </div>
             </div>
           </div>
         </v-card>
@@ -539,6 +549,7 @@ import DateUtility from "~/plugins/dateUtility";
 import Utility from "~/plugins/utility";
 import Grid from "~/components/common/Grid";
 import Chart from "~/components/common/Chart";
+import pagination from "~/components/common/Pagination";
 
 import AntCard from "~/components/common/card/AntCard";
 
@@ -579,7 +590,8 @@ export default {
     Chart,
     UnusedStatPopPage,
     EtcStatPopPage,
-    PageTitle
+    PageTitle,
+    pagination
   },
   computed: {
     ...mapState({
@@ -697,6 +709,10 @@ export default {
 
       gridName: "dashBoard_grid_01",
       loadGrid: false,
+      itemsPerPageArray: [10, 20, 50],
+      limit: 10,
+      page: 1,
+      totalCount: 0,
       isGridLoading: true,
     };
   },
@@ -735,6 +751,11 @@ export default {
       }
       this.timer = setInterval(this.search, 90000); //15분 주기마다 갱신
     },
+    changeGrid: async function (pageNum, limit) {
+      this.page = pageNum;
+      this.limit = limit;
+      await this.getGridData();
+    },
     async search() {
       await new Promise((resolve) => setTimeout(resolve, 1500));
       if (this.$router.currentRoute.fullPath == this.myHome.root) {
@@ -756,6 +777,41 @@ export default {
         // gridHeight = gridHeight*0.9
         gridHeight = this.$refs.gridParent.offsetHeight - 35;
       }
+      // Define custom button
+      class CustomButton {
+        constructor(props, pageData) {
+          const { grid, rowKey, columnInfo } = props;
+          const gridData = grid.store.data.rawData;
+          const value = gridData[rowKey][columnInfo.name];
+          const onClickCallback = columnInfo.renderer.options.onClick;
+
+          this.disabled = columnInfo.renderer.options.disabled || false;
+          const elDiv = document.createElement("div");
+          elDiv.innerHTML = `<span>${value}</span>`;
+          $(elDiv).addClass("tui-grid-cell-content d-flex justify-space-between");
+          const el2 = document.createElement("button");
+          $(el2).addClass("edit-btn blue--text");
+          el2.innerText = "보기";
+          elDiv.appendChild(el2);
+          this.el = elDiv;
+          if (!this.disabled && typeof onClickCallback === "function") {
+            // click 이벤트
+            this.el.addEventListener("click", function (event) {
+              onClickCallback(rowKey);
+            });
+          }
+        }
+        getElement() {
+          return this.el;
+        }
+        getValue() {
+          // return this.el.value;
+        }
+        mounted() {
+          // this.el.focus();
+        }
+      }
+
       const myOptions = {
         // scrollX: false,
         setScroll: true,
@@ -840,7 +896,42 @@ export default {
         { header: "주의", name: "careStndVal", align: "right", width: 40 },
         { header: "경고", name: "warnStndVal", align: "right", width: 40 },
         { header: "가이드", name: "totVal", align: "right", width: 40 },
-        { header: "알람 내용", name: "alrmMsg", align: "left", resizable: false },
+        { header: "알람 내용", name: "alrmMsg", align: "left", resizable: false,
+          // Render custom button to switch page instead of double click on row
+          renderer: {
+            type: CustomButton,
+            options: {
+              value: "보기",
+              onClick: (rowKey) => {
+                var gridInstance = this.$refs[this.gridName].gridInstance;
+                var eventRowData = gridInstance.invoke("getRow", rowKey);
+                var data = {
+                  cmCycle: "CYC_DAY",
+                  fromDt:
+                    eventRowData.totDttm != undefined
+                      ? eventRowData.totDttm
+                      : Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm"),
+                  fabId: eventRowData.fabId,
+                  eqpmKindId: eventRowData.eqpmKindId,
+                  eqpmGrpId: eventRowData.eqpmGrpId,
+                  eqpmId: eventRowData.eqpmId,
+                };
+                var key = "tick_" + Math.random();
+                this.$router.push({
+                  name: "ems-effc-EnrgUseEqpmDetlMntrPage",
+                  query: {
+                    prgmId: "PRG0082",
+                    // tick:key
+                  },
+                  params: {
+                    ...data,
+                    key: key,
+                  },
+                });
+              },
+            },
+          },
+         },
         { header: "설비종류", name: "eqpmKindId", align: "left", hidden: true },
         { header: "설비종류", name: "eqpmKindNm", align: "left", hidden: true },
       ];
@@ -855,11 +946,21 @@ export default {
     },
     async getGridData() {
       this.loadGrid = false;
-      // console
+      // Get total records of grid
+      const totalRes =  await this.postApiReturn({
+        apiKey: "selectIssueGdIdxDataPageTotal",
+        resKey: "issueGdIdxDataPageTotal",
+      }); 
+      this.totalCount = totalRes[0].totalcount;
+
       const res = await this.postApiReturn({
         apiKey: "selectIssueGdIdxData",
         resKey: "issueGdIdxData",
-        sendParam: {},
+        sendParam: {
+          limit: this.limit,
+          page: this.page,
+          offset: (this.page - 1) * this.limit,
+        },
       });
       // let fakeData = [
       // 	{

pages/ems/base/EnrgResourceCenterMngPage.vue

@@ -84,67 +84,64 @@
 				</v-card>
 			</v-col>
 		</v-row>
-		<v-row >
-			<v-col :cols="5" class="h100">
-				<v-card class="pb-5">
-					<v-card-title class="d-flex justify-space-between align-end">
-						<span class="tit ft-size_20 ft-weight_600">에너지원 정보</span>
-						<Buttons
-							:parentPrgmId="myPrgmId"
-							:bindingData="gridName"
-							:detailList="detailList"
-							:btnActionsFnc="btnActions"
-						/>
-					</v-card-title>
-					<div class="px-5" style="height:calc(100% - 106px)">
-						<div ref="gridParent" class="w100 h100">
-							<component
-								:ref="gridName"
-								:is="loadGrid ? 'Grid' : null"
-								:gridName="gridName"
-								:parentPrgmId="myPrgmId"
-								@getRowsData="getRowData"
-								@sendSelectedRowStatInfo="getSelectedRowStatInfo"
-								:selectedRowDataWatchFlag="true"
-							/>
-						</div>
+		<v-row align="stretch">
+			<v-col :cols="5">
+				<v-card class="d-flex flex-column h100">
+				<v-card-title class="d-flex justify-space-between align-end">
+					<span class="tit ft-size_20 ft-weight_600">에너지원 정보</span>
+					<Buttons
+					:parentPrgmId="myPrgmId"
+					:bindingData="gridName"
+					:detailList="detailList"
+					:btnActionsFnc="btnActions"
+					/>
+				</v-card-title>
+				<div class="px-5" style="height: auto;">
+					<div ref="gridParent" class="w100">
+					<component
+						:ref="gridName"
+						:is="loadGrid ? 'Grid' : null"
+						:gridName="gridName"
+						:parentPrgmId="myPrgmId"
+						@getRowsData="getRowData"
+						@sendSelectedRowStatInfo="getSelectedRowStatInfo"
+						:selectedRowDataWatchFlag="true"
+					/>
 					</div>
+				</div>
 				</v-card>
 			</v-col>
-			<v-col :cols="7" class="h100">
-				<v-card class="pb-5">
-					<v-card-title>에너지원 상세</v-card-title>
-					<div class="px-5" style="min-height: auto;">
-						<v-tabs v-model="tab">
-							<v-tab
-								v-for="item in items"
-								:key="item.id"
-								:disabled="item.disabledFlag"
-							>
-								{{ item.name }}
-							</v-tab>
-						</v-tabs>
-						<v-tabs-items
-							v-model="tab"
-							class="py-6"
-							style="min-height: auto;"
-						>
-							<v-tab-item v-for="(item, idx) in items" :key="item.id">				
-								<component
-										v-if="item.id == 'ercInfoTab'"
-										:is="'Form'"
-										:parentPrgmId="myPrgmId"
-										:detailList="detailList"
-										@gridEditingFinish="gridEditingFinish"
-								/>
-								<ErcChrgInfoTab
-										v-if="item.id == 'ercChrgInfoTab'"
-										:parentPrgmId="myPrgmId"
-										:innerTabGridInfo="{ tab, idx }"
-								/>
-							</v-tab-item>
-						</v-tabs-items>
-					</div>
+
+			<v-col :cols="7">
+				<v-card class="d-flex flex-column h100">
+				<v-card-title>에너지원 상세</v-card-title>
+				<div class="px-5" style="height: auto;">
+					<v-tabs v-model="tab">
+					<v-tab
+						v-for="item in items"
+						:key="item.id"
+						:disabled="item.disabledFlag"
+					>
+						{{ item.name }}
+					</v-tab>
+					</v-tabs>
+					<v-tabs-items v-model="tab" class="py-6">
+					<v-tab-item v-for="(item, idx) in items" :key="item.id">
+						<component
+						v-if="item.id == 'ercInfoTab'"
+						:is="'Form'"
+						:parentPrgmId="myPrgmId"
+						:detailList="detailList"
+						@gridEditingFinish="gridEditingFinish"
+						/>
+						<ErcChrgInfoTab
+						v-if="item.id == 'ercChrgInfoTab'"
+						:parentPrgmId="myPrgmId"
+						:innerTabGridInfo="{ tab, idx }"
+						/>
+					</v-tab-item>
+					</v-tabs-items>
+				</div>
 				</v-card>
 			</v-col>
 		</v-row>

pages/ems/base/PastRsltDataReadPage.vue

@@ -12,7 +12,7 @@
 						</v-col>
 						<v-col :cols="3">
 							<component :is="'EvtObjPop'" :parentPrgmId="myPrgmId" :item="evtObjPopItem"
-								class="no-gutters" customClass="select-large" />
+								class="no-gutters" customClass="select-large pa-0" />
 						</v-col>
 						<v-col :cols="3">
 							<!-- 대상일 -->
@@ -30,15 +30,15 @@
 		</v-row>
 		<v-row ref="contents">
 			<v-col :cols="12" class="h100">
-				<v-card class="px-5 py-5">
-					<div ref="gridParent" class="px-5" style="height:calc(100% - 40px)">
+				<v-card class="pa-5 pb-0">
+					<div ref="gridParent" class="px-5" style="height:calc(100% - 70px)">
 						<component ref="myGrid" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
 							:parentPrgmId="myPrgmId" />
 					</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>
+					</div>
 				</v-card>
 
 			</v-col>

pages/ems/effc/EnrgReptMngPage.vue

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

pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue

@@ -152,16 +152,16 @@
             </div>
           </div>
         </v-row>
-        <v-row class="pa-1" style="height: 52%; width: 100%">
+        <v-row class="pa-1" style="height: 45%; width: 100%">
           <v-card class="pa-1" style="height: 100%; width: 100%; overflow: hidden">
             <div style="height: 15%">
-              <v-card-title class="d-flex align-center justify-space-between pl-3">
+              <v-card-title class="d-flex align-center justify-space-between pl-3 pt-2">
                 <span class="tit ft-size_20 ft-weight_600">가이드 알람정보</span>
               </v-card-title>
             </div>
             <div
               ref="gridParent01"
-              class="pl-3 mt-5"
+              class="pl-3 mt-3"
               style="height: 75%; overflow: hidden;"
             >
               <component

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();

store/modules/list.js

@@ -281,6 +281,7 @@ const INIT_URL_STATE = {
 
 	// prgmId: "PRG0020" 배치로그
 	selectBatchLog: 'comm/base/BatchLogCtr/selectBatchLog', // 배치 로그
+	selectBatchLogPageTotal: 'comm/base/BatchLogCtr/selectBatchLogPageTotal', // 배치 로그
 
 	// prgmId: "PRG0017" 검침개소 기간별 비교
 	selectSameReadPlcTime: 'ems/base/sameReadPlcCtr/selectSameReadPlcTime',
@@ -513,6 +514,8 @@ const INIT_URL_STATE = {
 
 	// prgmId: "PRG0003" 공지사항
 	selectPostList: 'comm/base/NoticeMngCtr/selectPostList',
+	selectPostData: 'comm/base/NoticeMngCtr/selectPostData',
+	selectPostPageTotal: 'comm/base/NoticeMngCtr/selectPostPageTotal',
 	deletePostList: 'comm/base/NoticeMngCtr/deletePost',
 
 	//prgmId: "PRG0121" 공지사항 게시물 상세조회
@@ -901,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
@@ -969,4 +974,5 @@ const INIT_URL_STATE = {
 	selectTodayNgTopTen: 'ems/base/DashboardCtr/selectTodayNgTopTen',
 	selectCompareEqpmTGdChart: 'ems/base/DashboardCtr/selectCompareEqpmTGdChart',
 	selectIssueGdIdxData: 'ems/base/DashboardCtr/selectIssueGdIdxData',
+	selectIssueGdIdxDataPageTotal: 'ems/base/DashboardCtr/selectIssueGdIdxDataPageTotal',
 };