add paging for page 38

Reviewed-on: #58

assets/images/SwapRight.svg

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

assets/images/SwapRight_Dark.svg

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

assets/scss/common.scss

@@ -9,6 +9,7 @@
 @import "./common/card.scss";
 @import "./common/tabs.scss";
 @import "./common/numericInput.scss";
+@import "./common/pagination.scss";
 @import "./common/editor.scss";
 
 
@@ -443,6 +444,10 @@ a {
   .v-application.#{$theme}-mode {
     min-width: 1000px;
 
+    .icon-datepicker-color {
+      color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
+    }
+
     .head-logo {
       gap: 8px;
     }
@@ -949,6 +954,7 @@ a {
         & th,
         & td {
           height: 48px;
+          color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
         }
       }
 

assets/scss/common/grid.scss

@@ -25,7 +25,7 @@
 
     .tui-grid-header-area,
     .tui-grid-summary-area {
-      margin-right: $scrollbar-width;
+      margin-right: $scrollbar-width !important;
     }
   }
 
@@ -358,7 +358,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"

assets/scss/common/pagination.scss

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

assets/scss/datepicker.scss

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

assets/scss/var.scss

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

components/common/CheckBox.vue

@@ -61,10 +61,6 @@ export default {
       require: false,
       default: true
     },
-    labelClass: {
-      type: String,
-      require: false,
-    },
   },
   data() {
     return {

components/common/Datepicker.vue

@@ -19,15 +19,18 @@
 					readonly
 					outlined
 				>
-					<template #append >
+					<!-- <template #append >
 						<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
+					</template> -->
+					<template v-slot:append>
+						<a-icon v-show="!isRange" class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
 					</template>
 					<template #append-outer>
 						<div ref="startpicker-container" id="startpicker-container"></div>
 					</template>
 				</v-text-field>
 				<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
-					<img :src="arrowIcon" alt="">
+					<img :src="arrowIcon">
 				</div>
 				<v-text-field
 					v-show="isRange"
@@ -40,7 +43,9 @@
 					outlined
 				>
 					<template #append>
-						<v-icon size="20">$icoCalendar</v-icon>
+						<div class="pr-1">
+							<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
+						</div>
 					</template>
 					<template #append-outer>
 						<div ref="endpicker-container" id="endpicker-container"></div>
@@ -209,9 +214,9 @@ export default {
 		},
 		arrowIcon() {
 			if(this.isDarkMode){
-				return require('@/assets/images/arrow_datepicker_dm.png');
+				return require('@/assets/images/SwapRight_Dark.svg');
 			}
-			return require('@/assets/images/arrow_datepicker.png');
+			return require('@/assets/images/SwapRight.svg');
 		}
 	},
 	watch: {

components/common/DatepickerTopView.vue

@@ -5,10 +5,7 @@
 				<!-- <v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
 					>mdi-record-circle</v-icon
 				> -->
-				<v-icon
+				<v-icon small :class="['mr-1', required ? 'icon-orange' : 'icon-blue']">
-					small
-					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
-					>
 					$icoBulletPoint
 				</v-icon>
 				{{ label }}
@@ -16,17 +13,11 @@
 		</v-col>
 		<v-col :cols="label ? textCols : ''">
 			<div class="datepicker-container">
-				<v-text-field
+				<v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
-					id="startpicker"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
-					ref="startpicker"
+					outlined>
-					v-model="fromDtValue"
+					<template v-slot:append>
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
+						<a-icon v-show="!isRange" class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
-					:hide-details="true"
-					readonly
-					outlined
-				>
-					<template #append >
-						<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
 					</template>
 					<template #append-outer>
 						<div ref="startpicker-container" id="startpicker-container"></div>
@@ -36,18 +27,13 @@
 				<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">
 					<img :src="arrowIcon" alt="">
 				</div>
-				<v-text-field
+				<v-text-field v-show="isRange" id="endpicker" ref="endpicker" v-model="toDtValue"
-					v-show="isRange"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
-					id="endpicker"
+					outlined>
-					ref="endpicker"
-					v-model="toDtValue"
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
-					:hide-details="true"
-					readonly
-					outlined
-				>
 					<template #append>
-						<v-icon size="20">$icoCalendar</v-icon>
+						<div class="pr-1">
+							<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
+						</div>
 					</template>
 					<template #append-outer>
 						<div ref="endpicker-container" id="endpicker-container"></div>
@@ -91,9 +77,9 @@ export default {
 			require: false,
 			default: false,
 		},
-		isRangeOption:{
+		isRangeOption: {
-			type:Boolean,
+			type: Boolean,
-			require:false,
+			require: false,
 			default: true
 		}
 	},
@@ -177,21 +163,23 @@ export default {
 				this.myOptions.viewFormat,
 			);
 		},
-		toDtChange(){
+		toDtChange() {
 			return {
-				isCheck:this.searchParam.isCheck ,
+				isCheck: this.searchParam.isCheck,
-				toDt : Utility.setFormatDate(
+				toDt: Utility.setFormatDate(
-				this.searchParam.toDt,
+					this.searchParam.toDt,
-				this.myOptions.viewFormat,
+					this.myOptions.viewFormat,
-			)};
+				)
+			};
 		},
-		fromDtChange(){
+		fromDtChange() {
 			return {
-				isCheck:this.searchParam.isCheck ,
+				isCheck: this.searchParam.isCheck,
-				fromDt : Utility.setFormatDate(
+				fromDt: Utility.setFormatDate(
 					this.searchParam.fromDt,
 					this.myOptions.viewFormat,
-			)};
+				)
+			};
 		},
 		defaultRange() {
 			return this.searchParam.defaultRange
@@ -205,10 +193,10 @@ export default {
 			);
 		},
 		arrowIcon() {
-			if(this.isDarkMode){
+			if (this.isDarkMode) {
-				return require('@/assets/images/arrow_datepicker_dm.png');
+				return require('@/assets/images/SwapRight_Dark.svg');
 			}
-			return require('@/assets/images/arrow_datepicker.png');
+			return require('@/assets/images/SwapRight.svg');
 		}
 	},
 	watch: {
@@ -242,24 +230,24 @@ export default {
 				this.endDatepickerInstance.setDate(new Date(newVal));
 			}
 		},
-		fromDtChange:{
+		fromDtChange: {
-			deep:true,
+			deep: true,
-			handler(){
+			handler() {
-				if(this.fromDtChange.isCheck){
+				if (this.fromDtChange.isCheck) {
 					this.fromDtChanged(this.fromDtChange.fromDt);
 					this.setPageData({
-						isCheck : false
+						isCheck: false
 					})
 				}
 			}
 		},
-		toDtChange:{
+		toDtChange: {
-			deep:true,
+			deep: true,
-			handler(){
+			handler() {
-				if(this.toDtChange.isCheck){
+				if (this.toDtChange.isCheck) {
 					this.toDtChanged(this.toDtChange.toDt);
 					this.setPageData({
-						isCheck : false
+						isCheck: false
 					})
 				}
 			}
@@ -370,7 +358,7 @@ export default {
 			if (
 				(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
 				defaultDt.format(this.myOptions.sendFormat) ===
-					compareDt.format(this.myOptions.sendFormat)
+				compareDt.format(this.myOptions.sendFormat)
 			) {
 				// if(this.cmCycleFlag){
 				this.setPageData({ isFind: true });
@@ -400,7 +388,7 @@ export default {
 			if (
 				(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
 				defaultDt.format(this.myOptions.sendFormat) ===
-					compareDt.format(this.myOptions.sendFormat)
+				compareDt.format(this.myOptions.sendFormat)
 			) {
 				this.setPageData({ isFind: true });
 			} else {
@@ -424,6 +412,7 @@ export default {
 		display: flex;
 		justify-content: space-around;
 		background-color: #edf4fc;
+
 		.tui-timepicker-column.tui-timepicker-colon {
 			color: #000 !important;
 		}

components/common/Grid.vue

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

components/common/Pagination.vue

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

components/common/PastRsltDatePicker.vue

@@ -3,24 +3,18 @@
 		<v-col v-if="label" :cols="labelCols">
 			<label for="" class="search-box-label">
 				<v-icon small color="primary"
-				:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
+					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
-				>$icoBulletPoint</v-icon>
 				{{ label }}
 			</label>
 		</v-col>
 		<v-col :cols="label ? textCols : ''">
-			<div :class="['datepicker-container', customClass]"  >
+			<div :class="['datepicker-container', customClass]">
-				<v-text-field
+				<v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
-					id="startpicker"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
-					ref="startpicker"
+					outlined>
-					v-model="fromDtValue"
+					<template #append>
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
+						<a-icon class="v-icon" v-show="!isRange" type="calendar" style="width: 14px; height: 14px;" />
-					:hide-details="true"
+						<!-- <v-icon size="20" v-show="!isRange">$icoCalendar</v-icon> -->
-					readonly
-					outlined
-				>
-					<template #append >
-						<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
 					</template>
 					<template #append-outer>
 						<div ref="startpicker-container" id="startpicker-container"></div>
@@ -29,18 +23,13 @@
 				<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
 					<img :src="arrowIcon" alt="">
 				</div>
-				<v-text-field
+				<v-text-field v-show="isRange" id="endpicker" ref="endpicker" v-model="toDtValue"
-					v-show="isRange"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
-					id="endpicker"
+					outlined>
-					ref="endpicker"
-					v-model="toDtValue"
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
-					:hide-details="true"
-					readonly
-					outlined
-				>
 					<template #append>
-						<v-icon size="20">$icoCalendar</v-icon>
+						<div class="pr-1">
+							<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
+						</div>
 					</template>
 					<template #append-outer>
 						<div ref="endpicker-container" id="endpicker-container"></div>
@@ -98,6 +87,7 @@ export default {
 			searchParam(state) {
 				return state.pageData[this.parentPrgmId];
 			},
+			isDarkMode: "isDarkMode",
 		}),
 		myCmCycle() {
 			return this.searchParam.cmCycle;
@@ -138,10 +128,10 @@ export default {
 			);
 		},
 		arrowIcon() {
-			if(this.isDarkMode){
+			if (this.isDarkMode) {
-				return require('@/assets/images/arrow_datepicker_dm.png');
+				return require('@/assets/images/SwapRight_Dark.svg');
 			}
-			return require('@/assets/images/arrow_datepicker.png');
+			return require('@/assets/images/SwapRight.svg');
 		}
 	},
 	watch: {
@@ -280,7 +270,7 @@ export default {
 			if (
 				(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
 				defaultDt.format(this.myOptions.sendFormat) ===
-					compareDt.format(this.myOptions.sendFormat)
+				compareDt.format(this.myOptions.sendFormat)
 			) {
 				// if(this.cmCycleFlag){
 				this.setPageData({ isFind: true });
@@ -310,7 +300,7 @@ export default {
 			if (
 				(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
 				defaultDt.format(this.myOptions.sendFormat) ===
-					compareDt.format(this.myOptions.sendFormat)
+				compareDt.format(this.myOptions.sendFormat)
 			) {
 				this.setPageData({ isFind: true });
 			} else {
@@ -334,6 +324,7 @@ export default {
 		display: flex;
 		justify-content: space-around;
 		background-color: #edf4fc;
+
 		.tui-timepicker-column.tui-timepicker-colon {
 			color: #000 !important;
 		}

components/common/button/ActionButtons.vue

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

components/common/chartoptions/LineChart.js

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

components/common/chartoptions/SankeyChart.js

@@ -0,0 +1,46 @@
+// Sankey chart options
+export function getSankeyChartOption({ isDarkMode = false, data = [], links = [] }) {
+  const chartOption = {
+    backgroundColor: '#FFFFFF',
+    series: [
+      {
+        data,
+        links,
+
+        layoutIterations: 0,
+        type: 'sankey',
+        left: 25.0,
+        top: 20.0,
+        right: 120,
+        bottom: 50.0,
+        nodeGap: 10,
+        nodeAlign: 'left',
+        lineStyle: {
+          color: 'source',
+          curveness: 0.5,
+        },
+        // nodeWidth:10,
+        // triggerEvent: true,
+        itemStyle: {
+          //color: '#1f77b4',
+          //borderColor: '#1f77b4'
+        },
+        label: {
+          color: isDarkMode
+            ? '#FFFFFFD9'
+            : '#000000E0',
+          // fontFamily: 'Arial',
+          fontSize: 14,
+        },
+      },
+    ],
+    tooltip: {
+      trigger: 'item',
+    },
+  };
+
+  return chartOption;
+}
+
+export default getSankeyChartOption;
+

components/common/modal/ChangeUserPswdPopPage.vue

@@ -3,12 +3,13 @@
 		<v-col v-if="item.label" :cols="item.labelCols !== undefined ? item.labelCols : item.cols == 12 ? 2 : 4">
 			<label for="" class="search-box-label">
 				<v-icon
-					x-small
+					v-if="item.iconShow"
-					:color="item.required ? '#fb8200' : 'primary'"
+					small
-					class="mr-1"
+					:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
-					>mdi-record-circle</v-icon
+					>$icoBulletPoint</v-icon
 				>
 				{{ item.label }}
+				<span v-if="item.essential">*</span>
 			</label>
 			<!-- <label for="" class="search-box-label ft-size_14 ft-clr_g-c">
         {{ item.label }}
@@ -39,12 +40,12 @@
 			</template>
 		</v-col>
 
-		<v-dialog v-model="dialog" scrollable width="540px">
+		<v-dialog v-model="dialog" scrollable width="504px">
 			<v-card style="height: 100%">
-				<v-card-title>
+				<v-card-title class="px-4">
-					<span class="custom-title-4">비밀번호 {{ isPassword }}</span>
+					<span class="custom-title-4" style="padding-left: 1px;">비밀번호 {{ isPassword }}</span>
 				</v-card-title>
-				<v-card-text class="pb-4">
+				<v-card-text class="pb-4 px-3">
 					<v-col>
 						<label for="" class="search-box-label">
 							{{ isPassword }}할 비밀번호를 입력하세요

components/common/modal/EqpmSelectPop.vue

@@ -404,8 +404,8 @@ export default {
 				rowHeight: 'auto',
 			};
 			if (this.isMulti) {
-				// myOptions['rowHeaders'] = [{ type: 'checkbox' }];
+				myOptions['rowHeaders'] = [{ type: 'checkbox' }];
-				// myOptions['rowHeight'] = 'auto';
+				myOptions['rowHeight'] = 'auto';
 			}
 
 
@@ -523,12 +523,11 @@ export default {
 
 
 			this.loadGrid = true;
-			// this.$nextTick(() => {
+			this.$nextTick(() => {
-			// 	if (this.isMulti) {
+				if (this.isMulti) {
-			// 		this.getChecked();
+					this.getChecked();
-			// 	}
+				}
-			// });
+			});
-
 		},
 		setUpdate() {
 			if (this.isMulti) {

components/common/modal/EvtObjPop.vue

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

components/pages/ems/EccInfo/EccAddInfoTab.vue

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

components/pages/ems/EccInfo/EccIaoTab.vue

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

components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab.vue

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

pages/comm/auth/UserRoleMngPage.vue

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

pages/comm/base/BatchLogMngPage.vue

@@ -67,6 +67,10 @@
 								@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>
 					</div>
 				</v-card>
 			</v-col>
@@ -105,6 +109,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 +138,7 @@ export default {
 		BtnSearch,
 		BtnExcelDownload,
 		Buttons,
+		pagination,
 	},
 	data() {
 		return {
@@ -141,6 +147,11 @@ export default {
 			gridName: 'rowGrid',
 			// rowGridOrigin: [],
 			detailList: myDetail,
+			itemsPerPage: 10,
+			itemsPerPageArray: [10, 20, 30],
+			limit: 20,
+			page: 1,
+			totalCount: 0,
 		};
 	},
 	computed: {
@@ -161,7 +172,10 @@ export default {
 	},
 	watch: {
 		chkIsFind(val) {
-			if (val) this.search();
+			if (val) {
+				this.page = 1;
+				this.search();
+			}
 		},
 		chkExecRsltCd() {
 			this.setPageData({ isFind: true });
@@ -197,16 +211,15 @@ export default {
 		//   chkOpenTabList: "chkOpenTabList"
 		// }),
 		init() {
-			// this.layoutInit();
+			this.layoutInit();
 			this.gridInit();
 		},
-		// layoutInit() {
+		layoutInit() {
-		//   const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
+		  this.$refs.contents.style.height = 'auto';
-		//   this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`;
+		},
-		// },
 		gridInit() {
 			this.loadGrid = false;
-			const gridHeight = this.$refs.gridParent.offsetHeight - 30;
+			const gridHeight = this.$refs.gridParent.offsetHeight;
 
 			const myOptions = {
 				scrollX: false,
@@ -219,10 +232,10 @@ export default {
 
 			const _this = this;
 			const myColumns = [
-				{ header: 'No.', name: 'batchLogSeq', align: 'right', width: 100 },
+				{ header: 'No.', name: 'batchLogSeq', align: 'right', width: 90 },
-				{ header: '배치ID', name: 'batchId', align: 'right', width: 100 },
+				{ 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 +265,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 +287,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 +300,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 +336,7 @@ export default {
 			});
 
 			this.$nextTick(() => {
+				this.loadGrid = true;
 				if (newRes.length > 0) {
 					this.$refs[this.gridName].focus({
 						rowKey: this.chkRowGridSelectKey || 0,
@@ -361,6 +396,12 @@ export default {
 			}
 			return retVal;
 		},
+		changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			this.search();
+		},
 	},
 };
 

pages/comm/base/NoticeMngPage.vue

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

pages/ems/base/EnrgCostCenterMngPage.vue

@@ -105,7 +105,7 @@
 			</v-col>
 			<v-col :cols="7" style="min-height:75vh;">
 				<v-card class="pb-5">
-					<v-card-title class="custom-title-4" style="min-height:65px;"
+					<v-card-title class="custom-title-4 pb-0" style="min-height:65px;"
 						>공정 상세
 					</v-card-title>
 					<div class="px-5" style="height:calc(100% - 76px)">
@@ -901,7 +901,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pl-4',
+		class: 'py-2 px-4',
 		required: true,
 		iconShow: true
 	},
@@ -938,7 +938,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 mb-0 pb-0 pl-4 mt-2',
+		class: 'py-2 mb-0 pb-0 px-4 mt-2',
 		list: 'locKindList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -956,7 +956,7 @@ const myDetail = [
 		// 공백 처리
 		type: 'Label',
 		cols: 6,
-		class: 'py-2 pl-4 mt-2',
+		class: 'py-2 px-4 mt-2',
 		disabled: false,
 		labelCols: 12,
 		textCols: 12,
@@ -985,7 +985,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pl-4 mt-2',
+		class: 'py-2 px-4 mt-2',
 		inputType: 'number',
 		iconShow: true
 		// onkeydown : "if(this.value > 100) this.value = 100;if(this.value < 0) this.value = 0;if(this.value == '') this.value = 0;"
@@ -1012,7 +1012,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pl-4 mt-2',
+		class: 'py-2 px-4 mt-2',
 		value: { '1': true, '0': false },
 		iconShow: true,
 		required: true,

pages/ems/base/PastRsltDataReadPage.vue

@@ -12,7 +12,7 @@
 						</v-col>
 						<v-col :cols="3">
 							<component :is="'EvtObjPop'" :parentPrgmId="myPrgmId" :item="evtObjPopItem"
-								customClass="select-large" />
+								class="no-gutters" customClass="select-large" />
 						</v-col>
 						<v-col :cols="3">
 							<!-- 대상일 -->
@@ -29,17 +29,18 @@
 			</v-col>
 		</v-row>
 		<v-row ref="contents">
-			<v-col :cols="12" style="height: 100%" class="h100">
+			<v-col :cols="12" class="h100">
-				<v-card class="px-5 py-5 h100">
+				<v-card class="px-5 py-5">
-					<div ref="gridParent" class="h100 px-5" style="height: 100%">
+					<div ref="gridParent" class="px-5" style="height:calc(100% - 40px)">
 						<component ref="myGrid" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
 							:parentPrgmId="myPrgmId" />
 					</div>
-					<div class="d-flex align-center justify-space-between">
+					<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
-						<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
+							<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
-							@loadData="changeGrid" />
+								@loadData="changeGrid" />
-					</div>
+						</div>
 				</v-card>
+
 			</v-col>
 		</v-row>
 	</div>
@@ -61,7 +62,7 @@ import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
 import DateUtility from '~/plugins/dateUtility';
 // import Search from "~/components/common/search";
 import EvtObjPop from '~/components/common/modal/EvtObjPop';
-import pagination from '~/components/Pagination';
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 // const myPrgmId = "PRG0052";
@@ -212,7 +213,7 @@ export default {
 		},
 		layoutInit() {
 			const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
-			this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`;
+			this.$refs.contents.style.height = `calc(100% - 30px - ${searchFilterHeight}px) `;
 		},
 		async setFromDt() {
 			this.pageData.fromDt = Utility.setBeforetDate(
@@ -220,7 +221,6 @@ export default {
 				this.pageData.toDt,
 				'YYYYMMDD',
 			);
-			// this.pageData.toDt = Utility.setAftertDate(this.pageData, this.pageData.fromDt, "YYYYMMDD");
 		},
 		gridInit() {
 			this.loadGrid = false;

pages/ems/base/ReadObjectMngPage.vue

@@ -75,7 +75,7 @@
 			</v-col>
 			<v-col :cols="7" class="h100">
 				<v-card class="pb-5">
-					<v-card-title class="custom-title-4-new" style="min-height:65px;"
+					<v-card-title class="custom-title-4-new pb-0" style="min-height:65px;"
 						>검침대상 상세
 					</v-card-title>
 					<div class="px-5" style="height:calc(100% - 76px)">
@@ -742,7 +742,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-2',
+		class: 'py-2 pr-2 mt-2',
 		required: false,
 		placeholder: '시스템 자동입력',
 	},
@@ -754,7 +754,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2',
+		class: 'py-2 mt-2',
 		required: true,
 		iconShow: true,
 	},
@@ -766,7 +766,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pr-2',
+		class: 'py-2 pr-2 mt-2',
 		list: 'readObjKindDetailList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -781,7 +781,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2',
+		class: 'py-2 mt-2',
 		list: 'readObjGrpList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -796,7 +796,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pr-2',
+		class: 'py-2 pr-2 mt-2',
 		iconShow: true,
 		inputType: 'number',
 	},
@@ -808,7 +808,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2',
+		class: 'py-2 mt-2',
 		iconShow: true,
 		inputType: 'number',
 	},
@@ -820,7 +820,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pr-2',
+		class: 'py-2 pr-2 mt-2',
 		iconShow: true,
 		inputType: 'number',
 	},
@@ -832,7 +832,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2',
+		class: 'py-2 mt-2',
 		list: 'unitCdList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -847,7 +847,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pr-2',
+		class: 'py-2 pr-2 mt-2',
 		value: { '1': true, '0': false },
 		iconShow: true,
 		required: true,

pages/ems/base/ReadResultCloseMngPage.vue

@@ -100,6 +100,10 @@
                 :gridName="gridName"
               />
           </div>
+					<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
+            <pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
+								@loadData="changeGrid" />
+						</div>
         </v-card>
       </v-col>
     </v-row>
@@ -117,6 +121,7 @@ import selectCodeList from "@/components/common/select/selectCodeList";
 import SelectMttList from "@/components/common/select/SelectMttList";
 import Datepicker from "~/components/common/Datepicker";
 import BtnExcelDownload from "~/components/common/button/BtnExcelDownload";
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 // const myPrgmId = "PRG0018";
@@ -144,27 +149,18 @@ export default {
     Datepicker,
     Search,
     Grid,
+    pagination,
   },
   data() {
     return {
       myPrgmId: myPrgmId,
       gridName: "rowGrid",
       loadGrid: false,
-      dataPathMock: {
+			itemsPerPage: 10,
-        rowGrid: {
+			itemsPerPageArray: [10, 20, 30],
-          column: [
+			limit: 20,
-            { header: "태그", name: "id", headerAlign: "left" },
+			page: 1,
-            { header: "배율", name: "lable", headerAlign: "left" },
+			totalCount: 0,
-            { header: "설비비", name: "type", headerAlign: "left" },
-            { header: "설비배분비율", name: "note", headerAlign: "left" },
-            { header: "금일데이터", name: "note", headerAlign: "left" },
-            { header: "최종마감시각", name: "date", headerAlign: "left" },
-          ],
-          data: dataPathDataExample,
-          defaultRow: dataPathDataExample,
-          option: {},
-        },
-      },
     };
   },
   computed: {
@@ -190,7 +186,10 @@ export default {
   },
   watch: {
     chkIsFind(val) {
-      if (val) this.search();
+      if (val) {
+				this.page = 1;
+				this.search();
+			}
     },
     chkBlocId() {
       this.setPageData({ isFind: true });
@@ -243,10 +242,6 @@ export default {
         columnOptions: {
           resizable: true,
         },
-        pageOptions: {
-					useClient: true,
-					perPage: 13,
-				},
       };
       this.setGridOption({
         gridKey: this.gridName,
@@ -261,6 +256,8 @@ export default {
       await this.getRowGridData();
     },
     async getRowGridData() {
+      this.loadGrid = false;
+
       if (
         this.pageData.blocMstrList.length > 0 &&
         this.pageData.commCdList.length > 0 &&
@@ -274,8 +271,25 @@ export default {
             mttCd: this.pageData.commCd, // 검침대상유형
             mttTp: this.pageData.readObjId, // 검침대상
             readDt: this.pageData.fromDt, // 조회기간
+            limit: this.limit,
+					  page: this.page,
+					  offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
           },
         });
+
+        const res2 = await this.postApiReturn({
+					apiKey: 'selectReadResultCloseMngPageTotal',
+					resKey: 'cdKindPageTotal',
+          sendParam: {
+            blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId, // 사업장
+            mttCd: this.pageData.commCd, // 검침대상유형
+            mttTp: this.pageData.readObjId, // 검침대상
+            readDt: this.pageData.fromDt, // 조회기간
+          },
+				});
+
+				this.totalCount = res2[0].totalcount;
+
         this.setGridData({
           gridKey: this.gridName,
           value: res.map((item) => ({
@@ -325,6 +339,12 @@ export default {
         this.setPageData({ isFind: true });
       }
     },
+    changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			this.search();
+		},
   },
 };
 
@@ -431,13 +451,4 @@ const myColumns = [
     },
   },
 ];
-
-import { getPathDataExample } from "@/const/const";
-const dataPathDataExample = getPathDataExample({
-  id: "INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV",
-  lable: "INCHEON 고온 냉동기 101호기 - 호로1",
-  type: "사용",
-  note: "-",
-  date: "2023-01-10 20:02:00",
-});
 </script>

pages/ems/effc/EnrgEffcTotSummPage.vue

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

pages/ems/effc/EnrgMapPage.vue

@@ -14,9 +14,9 @@
 							<!-- 대상일 -->
 							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" customClass="datepicker-large" />
 						</v-col>
-						<v-col :cols="4" class="text-right">
+						<v-col :cols="6" class="text-right">
-							<BtnSearch @click="search" size="large" />
 							<!-- 조회버튼 -->
+							<BtnSearch @click="search" size="large" />
 						</v-col>
 					</v-row>
 				</v-card>
@@ -47,8 +47,13 @@
 					</v-row>
 					<div class="px-5" style="height: 80%">
 						<div ref="chartParent" class="w100 h100">
-							<component :ref="chartName" class="w100 h100" :is="loadChart ? 'Chart' : null" :parentPrgmId="myPrgmId"
+							<component 
-								:chartName="chartName" />
+								:ref="chartName" 
+								class="w100 h100" 
+								:is="loadChart ? 'Chart' : null" 
+								:parentPrgmId="myPrgmId"
+								:chartName="chartName" 
+							/>
 						</div>
 					</div>
 				</v-card>
@@ -68,6 +73,8 @@ import SelectBox from '@/components/common/select/SelectBox';
 import DateUtility from '~/plugins/dateUtility';
 import Chart from '~/components/common/Chart';
 
+import getSankeyChartOption from "~/components/common/chartoptions/sankeyChart";
+
 let myTitle;
 let myPrgmId;
 
@@ -101,6 +108,8 @@ export default {
 			selectValue01: null,
 			loadChart: false,
 			chartName: 'sankeyChart',
+			sankeyChartData: [],
+			sankeyChartLinks: []
 		};
 	},
 	computed: {
@@ -148,6 +157,16 @@ export default {
 				});
 			}
 		},
+		isDarkMode(newVal) {
+			this.setChartOption({ 
+				chartKey: this.chartName, 
+				value: getSankeyChartOption({
+						isDarkMode: newVal,
+						data: this.sankeyChartData,
+						links: this.sankeyChartLinks
+					})
+			});
+		},
 	},
 	async beforeCreate() {
 		myPrgmId = this.$route.query.prgmId;
@@ -159,9 +178,6 @@ export default {
 	},
 	async created() { },
 	async mounted() {
-		// this.initTest();
-		// return;
-
 		this.init();
 		// document.querySelector('.icon_arrow').style.width = document.querySelector('.iconArrowCols').clientWidth-20 + "px";
 	},
@@ -176,10 +192,8 @@ export default {
 		...mapActions({
 			getCodeList: 'modules/search/getCodeList',
 		}),
-		initTest() {
+		initTestChart() {
-			
+			const randomNumber = n => Math.floor(Math.random() * n) + 1;
-		const randomNumber = n => Math.floor(Math.random() * n) + 1;
-
 			const makeData = [
 				{ name: 'A' },
 				{ name: 'B' },
@@ -205,45 +219,13 @@ export default {
 				]);
 			}
 
-			const chartOption = {
+			this.sankeyChartData = makeData;
-				backgroundColor: '#FFFFFF',
+			this.sankeyChartLinks = makeLinks;
-				series: [
+			const chartOption = getSankeyChartOption({
-					{
+				isDarkMode: this.isDarkMode,
-						layoutIterations: 0,
+				data: makeData,
-						type: 'sankey',
+				links: makeLinks
-						left: 25.0,
+			});
-						top: 20.0,
-						right: 120,
-						bottom: 50.0,
-						// nodeWidth:10,
-						nodeGap: 10,
-						nodeAlign: 'left',
-						data: makeData,
-						links: makeLinks,
-						lineStyle: {
-							color: 'source',
-							curveness: 0.5,
-						},
-						// triggerEvent: true,
-						itemStyle: {
-							//color: '#1f77b4',
-							//borderColor: '#1f77b4'
-						},
-						label: {
-							color: this.isDarkMode
-								? 'rgba(250,250,250,0.7)'
-								: 'rgba(0,0,0,0.7)',
-							fontFamily: 'Arial',
-							fontSize: 12,
-						},
-					},
-				],
-				tooltip: {
-					trigger: 'item',
-				},
-			};
-
-			
 			this.setChartOption({ chartKey: this.chartName, value: chartOption });
 			this.$nextTick(() => {
 				this.loadChart = true;
@@ -254,7 +236,11 @@ export default {
 			this.setFromDt();
 		},
 		async search() {
-			await this.getChartData();
+			try{
+				await this.getChartData();
+			}catch(err){
+				this.initTestChart();
+			}
 			this.setPageData({
 				isFind: false,
 			});
@@ -458,43 +444,13 @@ export default {
 				};
 			}
 
-			const chartOption = {
+			this.sankeyChartData = makeData;
-				backgroundColor: '#FFFFFF',
+			this.sankeyChartLinks = makeLinks;
-				series: [
+			const chartOption = getSankeyChartOption({
-					{
+				isDarkMode: this.isDarkMode,
-						layoutIterations: 0,
+				data: makeData,
-						type: 'sankey',
+				links: makeLinks
-						left: 25.0,
+			});
-						top: 20.0,
-						right: 120,
-						bottom: 50.0,
-						// nodeWidth:10,
-						nodeGap: 10,
-						nodeAlign: 'left',
-						data: makeData,
-						links: makeLinks,
-						lineStyle: {
-							color: 'source',
-							curveness: 0.5,
-						},
-						// triggerEvent: true,
-						itemStyle: {
-							//color: '#1f77b4',
-							//borderColor: '#1f77b4'
-						},
-						label: {
-							color: this.isDarkMode
-								? 'rgba(250,250,250,0.7)'
-								: 'rgba(0,0,0,0.7)',
-							fontFamily: 'Arial',
-							fontSize: 12,
-						},
-					},
-				],
-				tooltip: {
-					trigger: 'item',
-				},
-			};
 
 			this.setChartOption({ chartKey: this.chartName, value: chartOption });
 

pages/ems/effc/EnrgUsePlanPage.vue

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

pages/ems/effc/EnrgUseTotSummPage.vue

@@ -52,6 +52,8 @@
           </v-card-title>
           <v-row>
             <v-col :cols="3" v-for="(item, i) in value.chartData" :key="'key2_' + i">
+            <v-card>
+
               <div
                 class="v-box"
                 style="height: 330px; position: relative"
@@ -73,7 +75,7 @@
                 <!-- Information area -->
                 <v-col :cols="5" style="height: 100%">
                   <div style="height: 10%">
-                    <strong style="font-size: 20px; font-weight: 600">{{
+                    <strong class="v-card v-card__title pa-0" >{{
                       item.fabNm
                     }}</strong>
                   </div>
@@ -123,6 +125,8 @@
                   </div>
                 </v-col>
               </div>
+                          </v-card>
+
             </v-col>
           </v-row>
         </div>

pages/ems/effc/EqpmIndMntrPage.vue

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

plugins/ant-design-vue.js

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

store/modules/list.js

@@ -210,6 +210,8 @@ const INIT_URL_STATE = {
 	// prgmId: "TMP0013" 검침실적마감관리 ems/ReadResultCloseMngPage
 	selectReadResultCloseMng:
 		'ems/base/ReadResultCloseMngCtr/selectReadResultCloseMng', // 일일검침정보
+	selectReadResultCloseMngPageTotal:
+		'ems/base/ReadResultCloseMngCtr/selectReadResultCloseMngPageTotal', // 일일검침정보
 	saveReadResultCloseMngSP:
 		'ems/base/ReadResultCloseMngCtr/saveReadResultCloseMngSP', // 전월 or 일 마감
 	saveReadResultCloseMngSPMM:
@@ -279,6 +281,7 @@ const INIT_URL_STATE = {
 
 	// prgmId: "PRG0020" 배치로그
 	selectBatchLog: 'comm/base/BatchLogCtr/selectBatchLog', // 배치 로그
+	selectBatchLogPageTotal: 'comm/base/BatchLogCtr/selectBatchLogPageTotal', // 배치 로그
 
 	// prgmId: "PRG0017" 검침개소 기간별 비교
 	selectSameReadPlcTime: 'ems/base/sameReadPlcCtr/selectSameReadPlcTime',
@@ -910,6 +913,11 @@ const INIT_URL_STATE = {
 		'ems/effc/eqpmIndMntrCtr/selectDailyEnrgUseMainIdx',
 	selectMonthlyEnrgUseMainIdx:
 		'ems/effc/eqpmIndMntrCtr/selectMonthlyEnrgUseMainIdx',
+	selectDailyEnrgUseMainIdxPageTotal:
+		'ems/effc/eqpmIndMntrCtr/selectDailyEnrgUseMainIdxPageTotal',
+	selectMonthlyEnrgUseMainIdxPageTotal:
+		'ems/effc/eqpmIndMntrCtr/selectMonthlyEnrgUseMainIdxPageTotal',
+
 
 	//prgmId : PRG0082 에너지 사용량 - 설비상세 모니터링
 	selectDailyEnrgUseMainGuideIdx: