diff --git a/assets/images/SwapRight.svg b/assets/images/SwapRight.svg
new file mode 100644
index 0000000..529a231
--- /dev/null
+++ b/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>
diff --git a/assets/images/SwapRight_Dark.svg b/assets/images/SwapRight_Dark.svg
new file mode 100644
index 0000000..5ff8291
--- /dev/null
+++ b/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>
diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index 6cd1e26..a1b3167 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -574,6 +574,7 @@ a {
         & th,
         & td {
           height: 48px;
+          color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
         }
       }
 
diff --git a/assets/scss/common/pagination.scss b/assets/scss/common/pagination.scss
index 503ccc4..7f41cb7 100644
--- a/assets/scss/common/pagination.scss
+++ b/assets/scss/common/pagination.scss
@@ -10,7 +10,7 @@
       // 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;
+      border: none;
 
       .ant-pagination-item-link {
         border: none;
@@ -19,13 +19,13 @@
     }
 
     .ant-pagination-item-active {
-      border-color: #1890ff !important;
+      border: 1px solid #1890ff !important;
       color: #1890ff !important
     }
 
     .ant-pagination-options-size-changer {
       .ant-select-selection {
-        border: 0.5px solid #424242;
+        border: 0.5px solid map-deep-get($config, #{$theme}, "v-input-fieldset-color") !important;
         background: map-deep-get($config, #{$theme}, "paging-background") !important;
         color: map-deep-get($config, #{$theme}, "paging-text") !important;
       }
diff --git a/components/common/Datepicker.vue b/components/common/Datepicker.vue
index b8cc499..b628db8 100644
--- a/components/common/Datepicker.vue
+++ b/components/common/Datepicker.vue
@@ -23,14 +23,14 @@
 						<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
 					</template> -->
 					<template v-slot:append>
-						<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
+						<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"
@@ -43,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>
@@ -212,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: {
diff --git a/components/common/DatepickerTopView.vue b/components/common/DatepickerTopView.vue
index ff05ba1..731360a 100644
--- a/components/common/DatepickerTopView.vue
+++ b/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
-					small
-					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
-					>
+				<v-icon 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
-					id="startpicker"
-					ref="startpicker"
-					v-model="fromDtValue"
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
-					:hide-details="true"
-					readonly
-					outlined
-				>
-					<template #append >
-						<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
+				<v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
+					outlined>
+					<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>
@@ -36,18 +27,13 @@
 				<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">
 					<img :src="arrowIcon" alt="">
 				</div>
-				<v-text-field
-					v-show="isRange"
-					id="endpicker"
-					ref="endpicker"
-					v-model="toDtValue"
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
-					:hide-details="true"
-					readonly
-					outlined
-				>
+				<v-text-field v-show="isRange" id="endpicker" 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:{
-			type:Boolean,
-			require:false,
+		isRangeOption: {
+			type: Boolean,
+			require: false,
 			default: true
 		}
 	},
@@ -177,21 +163,23 @@ export default {
 				this.myOptions.viewFormat,
 			);
 		},
-		toDtChange(){
+		toDtChange() {
 			return {
-				isCheck:this.searchParam.isCheck ,
-				toDt : Utility.setFormatDate(
-				this.searchParam.toDt,
-				this.myOptions.viewFormat,
-			)};
+				isCheck: this.searchParam.isCheck,
+				toDt: Utility.setFormatDate(
+					this.searchParam.toDt,
+					this.myOptions.viewFormat,
+				)
+			};
 		},
-		fromDtChange(){
+		fromDtChange() {
 			return {
-				isCheck:this.searchParam.isCheck ,
-				fromDt : Utility.setFormatDate(
+				isCheck: this.searchParam.isCheck,
+				fromDt: Utility.setFormatDate(
 					this.searchParam.fromDt,
 					this.myOptions.viewFormat,
-			)};
+				)
+			};
 		},
 		defaultRange() {
 			return this.searchParam.defaultRange
@@ -205,10 +193,10 @@ export default {
 			);
 		},
 		arrowIcon() {
-			if(this.isDarkMode){
-				return require('@/assets/images/arrow_datepicker_dm.png');
+			if (this.isDarkMode) {
+				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:{
-			deep:true,
-			handler(){
-				if(this.fromDtChange.isCheck){
+		fromDtChange: {
+			deep: true,
+			handler() {
+				if (this.fromDtChange.isCheck) {
 					this.fromDtChanged(this.fromDtChange.fromDt);
 					this.setPageData({
-						isCheck : false
+						isCheck: false
 					})
 				}
 			}
 		},
-		toDtChange:{
-			deep:true,
-			handler(){
-				if(this.toDtChange.isCheck){
+		toDtChange: {
+			deep: true,
+			handler() {
+				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;
 		}
diff --git a/components/common/PastRsltDatePicker.vue b/components/common/PastRsltDatePicker.vue
index 13dddae..208767c 100644
--- a/components/common/PastRsltDatePicker.vue
+++ b/components/common/PastRsltDatePicker.vue
@@ -2,25 +2,19 @@
 	<v-row class="search-box" align="center" no-gutters>
 		<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']"
-				>$icoBulletPoint</v-icon>
+				<v-icon small color="primary"
+					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
 				{{ label }}
 			</label>
 		</v-col>
 		<v-col :cols="label ? textCols : ''">
-			<div :class="['datepicker-container', customClass]"  >
-				<v-text-field
-					id="startpicker"
-					ref="startpicker"
-					v-model="fromDtValue"
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
-					:hide-details="true"
-					readonly
-					outlined
-				>
-					<template #append >
-						<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
+			<div :class="['datepicker-container', customClass]">
+				<v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
+					outlined>
+					<template #append>
+						<a-icon class="v-icon" v-show="!isRange" type="calendar" style="width: 14px; height: 14px;" />
+						<!-- <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-show="isRange"
-					id="endpicker"
-					ref="endpicker"
-					v-model="toDtValue"
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
-					:hide-details="true"
-					readonly
-					outlined
-				>
+				<v-text-field v-show="isRange" id="endpicker" 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){
-				return require('@/assets/images/arrow_datepicker_dm.png');
+			if (this.isDarkMode) {
+				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;
 		}
diff --git a/components/common/chartoptions/GaugeChart.js b/components/common/chartoptions/GaugeChart.js
index d29225c..e2917cc 100644
--- a/components/common/chartoptions/GaugeChart.js
+++ b/components/common/chartoptions/GaugeChart.js
@@ -2,15 +2,13 @@
 export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
     const colorRanges = isDarkMode
         ? [
-            [0.375, '#49AA19'], // Dark Green
-            // [0.5, '#B8860B'],   // Dark Yellow
-            [0.625, '#D89614'], // Dark Orange
+            [60 / 160, '#49AA19'], // Dark Green
+            [100 / 160, '#D89614'], // Dark Orange
             [1, '#D32029'],     // Dark Red
         ]
         : [
-            [0.375, '#52C41A'], // Light Green
-            // [0.5, '#FFD700'],   // Light Yellow
-            [0.625, '#FAAD14'], // Light Orange
+            [60 / 160, '#52C41A'], // Light Green
+            [100 / 160, '#FAAD14'], // Light Orange
             [1, '#F5222D'],     // Light Red
         ];
     // Old color range
@@ -56,6 +54,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
                 endAngle: -45,
                 min: min,
                 max: max,
+                splitNumber: 8,
                 // progress: {
                 //   show: true,
                 //   width: 15,
diff --git a/components/common/chartoptions/LineChart.js b/components/common/chartoptions/LineChart.js
index 66c517f..a7bc322 100644
--- a/components/common/chartoptions/LineChart.js
+++ b/components/common/chartoptions/LineChart.js
@@ -34,6 +34,8 @@ export default function getLineChartOption({
         legend: {
             // data: legendData,
             icon: 'circle',
+            itemWidth: 15, // Width of the legend icon
+            itemHeight: 15, 
             top: '0%',
             right: '5%',
             orient: 'horizontal',
diff --git a/components/common/modal/ElecPowChrgPop.vue b/components/common/modal/ElecPowChrgPop.vue
index 56efac4..7d16d41 100644
--- a/components/common/modal/ElecPowChrgPop.vue
+++ b/components/common/modal/ElecPowChrgPop.vue
@@ -17,20 +17,24 @@
 				{{ item.label }}
 			</label>
 		</v-col>
-		<v-col :cols="label ? item.textCols : ''">
+		<v-col :cols="label ? item.textCols : ''" class="py-0">
 			<!-- <v-col :cols="label ? 9 : ''"> -->
 			<!-- :value="textfield" -->
 			<v-text-field
 				readonly
 				v-model="selectValue"
-				append-icon="mdi-magnify"
 				class="v-input__custom"
 				@click="dialog = !dialog"
 				outlined
 				:hide-details="true"
 				:disabled="item.disabled || false"
 				:required="item.required || false"
-			></v-text-field>
+			>
+			<template v-slot:append>
+				<!-- Custom SVG icon -->
+				<v-icon>$icoSearch</v-icon>
+			</template>
+			</v-text-field>
 		</v-col>
 
 		<!-- <v-row justify="center"> -->
diff --git a/components/common/modal/ReadPlcPop.vue b/components/common/modal/ReadPlcPop.vue
index 0ea0e67..0046098 100644
--- a/components/common/modal/ReadPlcPop.vue
+++ b/components/common/modal/ReadPlcPop.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-row class="search-box" align="center">
+	<v-row class="search-box" align="center" no-gutters>
 		<!-- <v-col v-if="label" cols="2"> -->
 		<v-col v-if="item.label" :cols="item.labelCols" class="py-0">
 			<label for="" class="search-box-label">
diff --git a/components/pages/ems/EccInfo/EccIaoTab.vue b/components/pages/ems/EccInfo/EccIaoTab.vue
index 66693ae..e8786f9 100644
--- a/components/pages/ems/EccInfo/EccIaoTab.vue
+++ b/components/pages/ems/EccInfo/EccIaoTab.vue
@@ -380,7 +380,7 @@ const myDetail = [
 		label: '대상 유형',
 		disabled: false,
 		cols: 6,
-		class: 'pr-4',
+		class: 'pr-4 py-2',
 		list: 'emMapDivList',
 		valueNm: 'objKind',
 		itemText: 'commCdNm',
@@ -395,7 +395,7 @@ const myDetail = [
 		type: 'ReadPlcPop',
 		label: '대상 항목',
 		valueNm: 'objId',
-		disabled: false,
+		disabled: true,
 		cols: 6,
 		class: 'pl-4 py-2',
 		required: true,
@@ -482,7 +482,6 @@ const myDetail = [
 		disabledFg: 'objKind',
 		labelCols: 12,
 		textCols: 12,
-		iconShow: true,
 	},
 	{
 		type: 'InputText',
diff --git a/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue b/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue
index 47963c5..0f74f2c 100644
--- a/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue
+++ b/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue
@@ -21,9 +21,9 @@
 			</v-col>
 		</v-row>
 		<!-- Create the line between date picker and form -->
-		<v-row class="my-5" no-gutters>
+		<v-row class="mt-6 mb-7" no-gutters>
 			<v-col>
-				<div style="height: 1px; background-color: #ccc;"></div>
+				<div style="height: 1px; background-color: #0000000F;"></div>
 			</v-col>
 		</v-row>
 		<v-row class="search-box" align="center" no-gutters style="height: 44px;">
@@ -43,7 +43,7 @@
 				<div
 					ref="gridParent"
 					class="w100"
-					style="height: calc((100vh - 600px) / 2);"
+					style="height: calc((100vh - 500px) / 2);"
 				>
 					<Grid
 						:ref="gridName"
@@ -57,7 +57,7 @@
 				</div>
 			</v-col>
 		</v-row>
-		<v-row class="search-box" align="center" no-gutters style="height: 44px;">
+		<v-row class="search-box mt-2" align="center" no-gutters style="height: 44px;">
 			<v-col :cols="4">
 				<label for="" class="search-box-label">
 					<!-- <v-icon x-small color="primary" class="mr-1"
@@ -77,7 +77,7 @@
 				<div
 					ref="chartParent"
 					class="h100 w100"
-					style="height: calc((100vh - 600px) / 2  - 30px);"
+					style="height: calc((100vh - 500px) / 2);"
 				>
 					<component
 						class="w100 h100"
diff --git a/pages/comm/auth/UserRoleMngPage.vue b/pages/comm/auth/UserRoleMngPage.vue
index b3fbb40..2760f8a 100644
--- a/pages/comm/auth/UserRoleMngPage.vue
+++ b/pages/comm/auth/UserRoleMngPage.vue
@@ -947,17 +947,6 @@ const asgnRoleByUserColumns = [
 ];
 
 const asgnMenuByUserColumns = [
-	{
-		header: '',
-		name: '',
-		align: 'center',
-		width: 50,
-		formatter: (props) => {
-			return `<label class="custom-radio">
-						<span class="radio-mark"></span>
-					</label>`;
-		}
-	},	
 	{ header: '메뉴명', name: 'menuNm' }];
 
 const myDetail = blocCdList => {
diff --git a/pages/ems/base/DashboardPage.vue b/pages/ems/base/DashboardPage.vue
index 977086c..7fef4cc 100644
--- a/pages/ems/base/DashboardPage.vue
+++ b/pages/ems/base/DashboardPage.vue
@@ -1196,7 +1196,8 @@ export default {
             show: false,
           },
           left: "22%",
-          radius: ["50%", "80%"], // Bigger inner and outer radius
+          bottom: "23",
+          radius: ["67%", "97%"], // Bigger inner and outer radius
           center: ["60%", "50%"], // Shift chart slightly right to make room for legend
           itemStyle: {
             borderColor: "#fff", // Color of the gap
@@ -1272,7 +1273,10 @@ export default {
           top: "middle",
           type: "scroll",
           orient: "vertical",
-          left: "left",
+          left: "20",
+          icon: 'rect',     
+          itemWidth: 15, // Width of the legend icon
+          itemHeight: 15, 
           textStyle: {
             color: this.isDarkMode ? "#fff" : "#333333",
           },
diff --git a/pages/ems/base/EnrgReadPlaceMngPage.vue b/pages/ems/base/EnrgReadPlaceMngPage.vue
index 611047b..d117197 100644
--- a/pages/ems/base/EnrgReadPlaceMngPage.vue
+++ b/pages/ems/base/EnrgReadPlaceMngPage.vue
@@ -63,7 +63,7 @@
 						<v-tabs-items v-model="tab" style="height: calc(100% - 65px);" class="pt-6 py-2">
 							<v-tab-item v-for="(item, idx) in items" :key="item.id">
 								<component v-if="item.id == 'readPlcBaseInfoTab'" :is="'Form'" :parentPrgmId="myPrgmId"
-									:detailList="detailList" :bindingData="gridName"
+									:detailList="f" :bindingData="gridName"
 									@gridEditingFinish="gridEditingFinish" />
 								<ReadPlcAddInfoTab v-if="item.id == 'readPlcAddInfoTab'" :parentPrgmId="myPrgmId"
 									:innerTabGridInfo="{ tab, idx }" />
diff --git a/pages/ems/base/EnrgResourceCenterMngPage.vue b/pages/ems/base/EnrgResourceCenterMngPage.vue
index 98cc445..04e31f1 100644
--- a/pages/ems/base/EnrgResourceCenterMngPage.vue
+++ b/pages/ems/base/EnrgResourceCenterMngPage.vue
@@ -835,7 +835,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-3 pr-4',
 		required: false,
 		placeholder: '시스템 자동입력',
 	},
@@ -848,7 +848,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-3 pl-4',
 		required: true,
 	},
 	{
@@ -860,7 +860,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-3 pr-4 mt-2',
 		list: 'ercKindList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -875,7 +875,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-3 pl-4 mt-2',
 		list: 'readObjList',
 		itemText: 'readObjNm',
 		itemValue: 'readObjId',
@@ -890,7 +890,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-3 pr-4 mt-2',
 		list: 'chrgKindList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -905,7 +905,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-3 pl-4 mt-2',
 	},
 	{
 		type: 'InputText',
@@ -916,7 +916,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-3 pr-4 mt-2',
 
 	},
 	{
@@ -928,7 +928,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-3 pl-4 mt-2',
 		list: 'blocMstrList',
 		itemText: 'blocNm',
 		itemValue: 'blocId',
@@ -944,7 +944,7 @@ const myDetail = [
 		textCols: 12,
 		iconShow: true,
 		// class: 'py-2',
-		class: 'pb-0 mb-0 pr-4',
+		class: 'pb-0 mb-0 pr-4 mt-2',
 		disableContent: true,
 	},
 	{
@@ -956,7 +956,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'pb-0 mb-0 pl-4 mt-2',
 	},
 	{
 		type: 'InputText',
@@ -981,7 +981,7 @@ const myDetail = [
 		disabled: false,
 		cols: 6,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-3 pr-4 mt-2',
 		value: { '1': true, '0': false },
 	},
 	{
@@ -991,7 +991,7 @@ const myDetail = [
 		disabled: false,
 		cols: 6,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-3 pl-4 mt-2',
 		value: { '1': true, '0': false },
 		required: true,
 	},
diff --git a/pages/ems/base/PastRsltDataReadPage.vue b/pages/ems/base/PastRsltDataReadPage.vue
index 500a375..3679e8a 100644
--- a/pages/ems/base/PastRsltDataReadPage.vue
+++ b/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-card class="px-5 py-5 h100">
-					<div ref="gridParent" class="h100 px-5" style="height: 100%">
+			<v-col :cols="12" class="h100">
+				<v-card class="px-5 py-5">
+					<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">
-						<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
-							@loadData="changeGrid" />
-					</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>
 	</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;
diff --git a/pages/ems/base/ReadResultCloseMngPage.vue b/pages/ems/base/ReadResultCloseMngPage.vue
index 0720a38..136704c 100644
--- a/pages/ems/base/ReadResultCloseMngPage.vue
+++ b/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: {
-        rowGrid: {
-          column: [
-            { header: "태그", name: "id", headerAlign: "left" },
-            { header: "배율", name: "lable", headerAlign: "left" },
-            { 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: {},
-        },
-      },
+			itemsPerPage: 10,
+			itemsPerPageArray: [10, 20, 30],
+			limit: 20,
+			page: 1,
+			totalCount: 0,
     };
   },
   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>
diff --git a/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue b/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
index bc0013b..a19a023 100644
--- a/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
+++ b/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
@@ -154,14 +154,15 @@
         </v-row>
         <v-row class="pa-1" style="height: 52%; width: 100%">
           <v-card class="pa-1" style="height: 100%; width: 100%; overflow: hidden">
-            <div style="height: 25%">
-              <v-card-title class="d-flex align-center justify-space-between pa-5">
+            <div style="height: 15%">
+              <v-card-title class="d-flex align-center justify-space-between pl-3">
                 <span class="tit ft-size_20 ft-weight_600">가이드 알람정보</span>
               </v-card-title>
             </div>
             <div
               ref="gridParent01"
-              style="height: 75%; overflow: hidden; margin-top: 15px"
+              class="pl-3 mt-5"
+              style="height: 75%; overflow: hidden;"
             >
               <component
                 :ref="gridName01"
@@ -177,12 +178,12 @@
             <v-row style="height: 100%">
               <v-col :cols="5" class="">
                 <v-card class="pa-1" style="height: 100%; width: 100%">
-                  <div style="height: 25%">
-                    <v-card-title class="d-flex align-center justify-space-between pa-5">
+                  <div style="height: 15%">
+                    <v-card-title class="d-flex align-center justify-space-between pl-3">
                       <span class="tit ft-size_20 ft-weight_600">설비 상세 정보</span>
                     </v-card-title>
                   </div>
-                  <div ref="gridParent02" style="height: 75%">
+                  <div ref="gridParent02" style="height: 75%" class="pl-3 mt-5">
                     <component
                       :ref="gridName02"
                       :is="loadGrid02 ? 'Grid' : null"
diff --git a/pages/ems/effc/EnrgUseTotSummPage.vue b/pages/ems/effc/EnrgUseTotSummPage.vue
index 14b0043..c96e661 100644
--- a/pages/ems/effc/EnrgUseTotSummPage.vue
+++ b/pages/ems/effc/EnrgUseTotSummPage.vue
@@ -47,13 +47,14 @@
     <v-row ref="contents" style="overflow: auto">
       <v-col>
         <div v-for="(value, key, index) in contentData" :key="'key1_' + index">
-          <v-card-title class="d-flex align-center justify-space-between pa-3">
-            <span class="tit ft-size_20 ft-weight_600">{{ value.eqpmGrpNm }}</span>
-          </v-card-title>
+          <v-card style="background: none">
+            <v-card-title class="d-flex align-center justify-space-between pa-3">
+              <span class="tit ft-size_20 ft-weight_600">{{ value.eqpmGrpNm }}</span>
+            </v-card-title>
+          </v-card>
           <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"
@@ -125,8 +126,7 @@
                   </div>
                 </v-col>
               </div>
-                          </v-card>
-
+            </v-card>
             </v-col>
           </v-row>
         </div>
diff --git a/pages/ems/effc/EqpmIndMntrPage.vue b/pages/ems/effc/EqpmIndMntrPage.vue
index 27098aa..b1ba5f4 100644
--- a/pages/ems/effc/EqpmIndMntrPage.vue
+++ b/pages/ems/effc/EqpmIndMntrPage.vue
@@ -105,8 +105,7 @@
                 :gridName="gridName"
                 :parentPrgmId="myPrgmId"
               />
-
-              <div class="pagination-wrapper">
+              <div v-if="loadGrid && totalCount > 0" class="pagination-wrapper">
                 <pagination
                   id="pagination"
                   :total-count="totalCount"
@@ -201,7 +200,7 @@ export default {
       gridName: "grid01",
 
       enrgUseMainIdxDesc: [],
-      itemsPerPageArray: [10, 20, 30],
+      itemsPerPageArray: [10, 20, 50],
       limit: 10,
       page: 1,
       totalCount: 0,
diff --git a/store/modules/list.js b/store/modules/list.js
index cf61676..3010f05 100644
--- a/store/modules/list.js
+++ b/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: