From 84c7e61254459a9a8ef4d1f3cbbb700691e3a31f Mon Sep 17 00:00:00 2001
From: Michael <20074391@skcc.com>
Date: Tue, 12 Aug 2025 17:07:52 +0900
Subject: [PATCH] Update pagination UI + Fix bugs gauge chart line chart + Fix
 bugs s14

---
 assets/scss/common/pagination.scss            |  6 ++---
 components/common/chartoptions/GaugeChart.js  | 11 ++++-----
 components/common/chartoptions/LineChart.js   |  2 ++
 components/common/modal/ElecPowChrgPop.vue    | 10 +++++---
 components/common/modal/ReadPlcPop.vue        |  2 +-
 .../pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue  | 10 ++++----
 pages/ems/base/DashboardPage.vue              |  8 +++++--
 pages/ems/base/EnrgReadPlaceMngPage.vue       |  2 +-
 pages/ems/base/EnrgResourceCenterMngPage.vue  | 24 +++++++++----------
 pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue    | 13 +++++-----
 pages/ems/effc/EnrgUseTotSummPage.vue         | 12 +++++-----
 pages/ems/effc/EqpmIndMntrPage.vue            |  5 ++--
 12 files changed, 57 insertions(+), 48 deletions(-)

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