Merge pull request 'fix bug grid not load when change menu tab' (#55) from dev-manhph1-figbug into dev

Reviewed-on: #55

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";
 
 

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/var.scss

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

components/common/Grid.vue

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

components/common/Pagination.vue

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

components/common/button/ActionButtons.vue

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

components/common/chartoptions/LineChart.js

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

components/common/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/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) {

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/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/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,11 @@ export default {
       gridName: "grid01",
 
       enrgUseMainIdxDesc: [],
+      itemsPerPage: 10,
+      itemsPerPageArray: [10, 20, 30],
+      limit: 10,
+      page: 1,
+      totalCount: 0,
 
       // tooltipData: {
       // 	show: false,
@@ -263,6 +281,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 +390,54 @@ export default {
       const _this = this;
       // Define custom button
       class CustomButton {
-				constructor(props,pageData) {
+        constructor(props, pageData) {
-					const { grid, rowKey, columnInfo } = props;
+          const { grid, rowKey, columnInfo } = props;
-					const gridData = grid.store.data.rawData;
+          const gridData = grid.store.data.rawData;
-					const value = gridData[rowKey][columnInfo.name];
+          const value = gridData[rowKey][columnInfo.name];
-          const onClickCallback = columnInfo.renderer.options.onClick; 
+          const onClickCallback = columnInfo.renderer.options.onClick;
 
-					this.disabled = columnInfo.renderer.options.disabled || false;
+          this.disabled = columnInfo.renderer.options.disabled || false;
-					const elDiv = document.createElement('div');
+          const elDiv = document.createElement("div");
-					elDiv.innerHTML = `<span>${value}</span>`;
+          elDiv.innerHTML = `<span>${value}</span>`;
-					$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
+          $(elDiv).addClass("tui-grid-cell-content d-flex justify-space-between");
-					const el2 = document.createElement('button');
+          const el2 = document.createElement("button");
-					$(el2).addClass('edit-btn blue--text');
+          $(el2).addClass("edit-btn blue--text");
-					el2.innerText = '보기';
+          el2.innerText = "보기";
-					elDiv.appendChild(el2);
+          elDiv.appendChild(el2);
-					this.el = elDiv;
+          this.el = elDiv;
-					if (!this.disabled && typeof onClickCallback === 'function') {
+          if (!this.disabled && typeof onClickCallback === "function") {
-						// click 이벤트
+            // click 이벤트
-						this.el.addEventListener('click', function(event) {
+            this.el.addEventListener("click", function (event) {
-							onClickCallback(rowKey); 
+              onClickCallback(rowKey);
-						});
+            });
-					}
+          }
-				}
+        }
-				getElement() {
+        getElement() {
-					return this.el;
+          return this.el;
-				}
+        }
-				getValue() {
+        getValue() {
-					// return this.el.value;
+          // return this.el.value;
-				}
+        }
-				mounted() {
+        mounted() {
-					// this.el.focus();
+          // this.el.focus();
-				}
+        }
-			}
+      }
 
       var columnList = [
         { header: "NO", name: "no", align: "right", width: 80 },
         { header: "fabId", name: "fabId", hidden: true },
         { header: "FAB", name: "fabNm", align: "left" },
         { header: "eqpmGrpId", name: "eqpmGrpId", hidden: true },
-        { header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 200,
+        {
+          header: "설비그룹",
+          name: "eqpmGrpNm",
+          align: "left",
+          width: 200,
           // 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,9 +461,9 @@ export default {
                     key: key,
                   },
                 });
-              }
+              },
-            }
+            },
-          }
+          },
         },
         { header: "eqpmId", name: "eqpmId", hidden: true },
         { header: "설비명", name: "eqpmNm", align: "left", width: 200 },
@@ -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

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