Merge branch 'dev' of http://218.237.212.51:30003/gitadmin/sk_fems_ui into dev-trungvq7-0729

Reviewed-on: #72

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");
     }
@@ -760,7 +789,7 @@ a {
 	
 				.v-list-item__title {
 					color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
-				}
+        }
 			}
 	
 			&.v-select-list{
@@ -808,6 +837,7 @@ a {
       font-size: 2rem;
       font-weight: bold;
       padding-left: 8px;
+      margin-top: 2px;
 
       img {
         width: 139px;
@@ -824,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/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;
     }
   }
 
@@ -80,9 +89,57 @@
   }
 
   .tui-grid-cell {
-    &:last-child {
-      input[type=checkbox] {
-        margin-top: 8px;
+    input[type=checkbox] {
+      margin-top: 8px;
+      appearance: none;
+      -webkit-appearance: none;
+      width: 16px;
+      height: 16px;
+      border: 1px solid;
+      border-radius: 2px;
+      cursor: pointer;
+      position: relative;
+
+      &:checked {
+        &::after {
+          content: "";
+          position: absolute;
+          left: 5px;
+          top: 1px;
+          width: 5px;
+          height: 9px;
+          border: solid;
+          border-width: 0 2px 2px 0;
+          transform: rotate(45deg);
+        }
+      }
+    }
+  }
+}
+
+.tui-grid-layer-editing {
+  input[type=checkbox] {
+    margin-top: 8px;
+    appearance: none;
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1px solid;
+    border-radius: 2px;
+    cursor: pointer;
+    position: relative;
+
+    &:checked {
+      &::after {
+        content: "";
+        position: absolute;
+        left: 5px;
+        top: 1px;
+        width: 5px;
+        height: 9px;
+        border: solid;
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
       }
     }
   }
@@ -109,6 +166,44 @@
   @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;
@@ -152,6 +247,35 @@
             #{$theme},
             "tui-grid-cell-borderStyle-darkmode"
           );
+
+          input[type=checkbox] {
+            border-color: map-deep-get($config,
+              #{$theme},
+              "ant-checkbox-border"
+            );
+            background: map-deep-get($config,
+              #{$theme},
+              "ant-checkbox-bg"
+            );
+
+            &:checked {
+              background-color: map-deep-get($config,
+                #{$theme},
+                "ant-btn-primary-bg"
+              );
+              border-color: map-deep-get($config,
+                #{$theme},
+                "ant-btn-primary-bg"
+              );
+
+              &::after {
+                border-color: map-deep-get($config,
+                  #{$theme},
+                  "ant-checkbox-bg"
+                );
+              }
+            }
+          }
         }
       }
 
@@ -204,7 +328,7 @@
         overflow: auto;
 
         &::-webkit-scrollbar {
-          // width: $scrollbar-width !important;
+          width: $scrollbar-width !important;
           height: $scrollbar-width !important;
           -webkit-appearance: initial;
           background-color: rgba(0, 0, 0, 0) !important;
@@ -358,6 +482,15 @@
             //   "tui-grid-cell-insert-color"
             // );
           }
+
+          span {
+            &.custom-link {
+              color: map-deep-get($config,
+                #{$theme},
+                "router-tab-item-active-color"
+              );
+            }
+          }
         }
       }
 
@@ -406,7 +539,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"
@@ -593,6 +726,37 @@
       &-frozen-border {
         background-color: transparent;
       }
+
+      &-layer-editing {
+        input[type=checkbox] {
+          border-color: map-deep-get($config,
+            #{$theme},
+            "ant-checkbox-border"
+          );
+          background: map-deep-get($config,
+            #{$theme},
+            "ant-checkbox-bg"
+          );
+
+          &:checked {
+            background-color: map-deep-get($config,
+              #{$theme},
+              "ant-btn-primary-bg"
+            );
+            border-color: map-deep-get($config,
+              #{$theme},
+              "ant-btn-primary-bg"
+            );
+
+            &::after {
+              border-color: map-deep-get($config,
+                #{$theme},
+                "ant-checkbox-bg"
+              );
+            }
+          }
+        }
+      }
     }
 
     [class*="tui-grid-tree-wrapper"] {

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,

components/common/Grid.vue

@@ -174,6 +174,10 @@ 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.add('tui-grid-no-scroll-y');
+			}
 		}
 	},
 	methods: {

components/pages/ems/DataSetInfo/DataSetTagRelTab.vue

@@ -39,8 +39,6 @@
 import { mapState, mapMutations, mapActions } from 'vuex';
 import Buttons from '~/components/common/button/Buttons';
 import Grid from '~/components/common/Grid';
-import { CustomCheckbox } from '~/plugins/gridUtility';
-import { CustomNumberEditor } from '~/plugins/gridUtility';
 import Form from '~/components/common/form/Form';
 import mixinGlobal from '@/mixin/global.js';
 import Utility from '~/plugins/utility';
@@ -70,18 +68,6 @@ export default {
       loadGrid: false,
       gridName: 'rowDataSetTagRelGrid',
       detailDataSetTagList: myDataSetTagDetail,
-      dataPathMock: {
-        "rowDataSetTagRelGrid": {
-          column: [
-            { header: 'TAG ID', name: 'id', headerAlign: 'left' },
-            { header: 'TAG 명', name: 'name', headerAlign: 'left' },
-            { header: '모델 Data 구분', name: 'type', headerAlign: 'left' }
-          ],
-          data: dataPathDataExample,
-          defaultRow: dataPathDataExample,
-          option: {}
-        }
-      },
     };
   },
   computed: {
@@ -324,7 +310,7 @@ const myDataSetTagDetail = [
     valueNm: 'tagNm',
     disabled: false,
     cols: 6,
-    class: 'py-2 mt-2',
+    class: 'py-2 mt-1',
     required: true,
     labelCols: 12,
     textCols: 12,
@@ -350,12 +336,11 @@ const myDataSetTagDetail = [
     valueNm: 'useFg',
     disabled: false,
     cols: 5,
-    class: 'py-2 mt-2',
+    class: 'py-2 mt-1',
     value: { '1': true, '0': false },
     required: true,
     textCols: 12,
     iconShow: true,
-    // class: "d-flex align-end"
   },
   {
     type: 'TextArea',
@@ -369,23 +354,4 @@ const myDataSetTagDetail = [
     required: false,
   },
 ];
-
-
-const dataPathDataExample = [
-  {
-    id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
-    name: 'INCHEON 고온 냉동기 101호기 - 호로1',
-    type: '합계'
-  },
-  {
-    id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
-    name: 'INCHEON 고온 냉동기 101호기 - 호로1',
-    type: '합계'
-  },
-  {
-    id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
-    name: 'INCHEON 고온 냉동기 101호기 - 호로1',
-    type: '합계'
-  },
-];
 </script>

components/pages/ems/EccInfo/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/CalendarMngPage.vue

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

pages/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/effc/EnrgEffcEqpmDetlMntrPage.vue

@@ -60,17 +60,23 @@
 			</v-col>
 		</v-row>
 		<v-row ref="contents" class="pt-3">
-			<v-col :cols="12" style="height: 100%">
+			<v-col :cols="12" >
 				<v-card class="pb-5">
 					<div class="d-flex align-center justify-space-between pa-4">
 						<v-card-title class="pa-0">설비별 현황 리스트</v-card-title>
 					</div>
-					<div class="px-4" style="height:calc(100% - 76px)">
-						<div ref="gridParent" class="w100 h100">
+					<div class="px-4" >
+						<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"
+									@loadData="changeGrid" />
+							</div>
 						</div>
+
 					</div>
+
 				</v-card>
 			</v-col>
 		</v-row>
@@ -92,6 +98,7 @@ import Datepicker from '~/components/common/Datepicker';
 import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
 import EnrgEffcEqpmDetailPop from '~/components/common/modal/EnrgEffcEqpmDetailPop';
 import EnrgEffcGdIdxDetPop from '~/components/common/modal/EnrgEffcGdIdxDetPop';
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 let myPrgmId;
@@ -124,6 +131,7 @@ export default {
 		EnrgEffcEqpmDetailPop,
 		EqpmSelectPop,
 		EnrgEffcGdIdxDetPop,
+		pagination
 	},
 	data() {
 		return {
@@ -149,7 +157,12 @@ export default {
 			eqpmGrpFlag: false,
 			eqpmGdIdxFlag: false,
 			fabFlag: false,
+			itemsPerPage: 10,
+			itemsPerPageArray: [10, 20, 30],
+			limit: 20,
+			page: 1,
 			routeData: {},
+			totalCount: 0,
 		};
 	},
 	computed: {
@@ -377,6 +390,7 @@ export default {
 				resKey: 'eqpmKindCodeLists',
 				sendParam: {},
 			});
+
 			if (res.length > 0) {
 				this.selectValueList01 = await res.map(item => {
 					return {
@@ -680,9 +694,29 @@ export default {
 					fabId: this.selectValue02,
 					eqpmKindId: this.selectValue01,
 					okFg: this.selectValue06,
+					limit: this.limit,
+					page: this.page,
+					offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
 				},
 			});
 
+			const res2 = await this.postApiReturn({
+				apiKey: 'selectEnrgEffcEqpmDetlMntrPageTotal',
+				resKey: 'eqpmDetlDataPageTotal',
+				sendParam: {
+					eqpmId: this.selectValue04.eqpmId,
+					eqpmGrpId: this.selectValue03,
+					fromDt: this.pageData.fromDt,
+					toDt: this.pageData.toDt,
+					gdIdxId: this.selectValue05,
+					fabId: this.selectValue02,
+					eqpmKindId: this.selectValue01,
+					okFg: this.selectValue06,
+				},
+			});
+
+			this.totalCount = res2[0]?.totalcount;
+
 			this.setGridData({
 				gridKey: this.gridName,
 				value: res,
@@ -722,6 +756,12 @@ export default {
 				});
 			}
 		},
+		changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			this.search();
+		},
 	},
 };
 

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

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',
@@ -942,6 +943,8 @@ const INIT_URL_STATE = {
 	//prgmId : PRG0084 설비별 운전가이드
 	selectEqpmCodeList: 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEqpmCodeList',
 	selectEnrgEffcEqpmDetlMntr:'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcEqpmDetlMntr',
+	selectEnrgEffcEqpmDetlMntrPageTotal:
+		'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcEqpmDetlMntrPageTotal', // 일일검침정보
 	selectEqpmDetailPop: 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEqpmDetailPop',
 	selectEnrgEffcGdIdxDetPop : 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcGdIdxDetPop',
 
@@ -969,4 +972,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',
 };