Merge pull request 'fix icon datepicker' (#60) from dev-manhph1-figbug into dev

Reviewed-on: #60

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

@@ -954,6 +954,7 @@ a {
         & th,
         & td {
           height: 48px;
+          color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
         }
       }
 

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

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: {

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(
+				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
 					})
 				}
 			}
@@ -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/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']"
-				>$icoBulletPoint</v-icon>
+					: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: {
@@ -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/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,

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',

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

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

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"

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",
           },

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 }" />

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,
 	},

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,17 @@
 			</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">
-					<div ref="gridParent" class="h100 px-5" style="height: 100%">
+					<div ref="gridParent" class="h100 px-5">
 						<component ref="myGrid" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
 							:parentPrgmId="myPrgmId" />
 					</div>
-					<div class="d-flex align-center justify-space-between">
+				</v-card>
+				<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 +61,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 +212,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% - 90px - ${searchFilterHeight}px) `;
 		},
 		async setFromDt() {
 			this.pageData.fromDt = Utility.setBeforetDate(
@@ -220,7 +220,6 @@ export default {
 				this.pageData.toDt,
 				'YYYYMMDD',
 			);
-			// this.pageData.toDt = Utility.setAftertDate(this.pageData, this.pageData.fromDt, "YYYYMMDD");
 		},
 		gridInit() {
 			this.loadGrid = false;

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"

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 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"
@@ -126,7 +127,6 @@
                 </v-col>
               </div>
             </v-card>
-
             </v-col>
           </v-row>
         </div>

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,