From e59078a19c5b1154c3cc79439dfbbd3518d06c52 Mon Sep 17 00:00:00 2001
From: Michael <20074391@skcc.com>
Date: Mon, 11 Aug 2025 17:58:25 +0900
Subject: [PATCH] Fix datepicker icon + add dash line in line chart

---
 assets/scss/datepicker.scss                |    4 +
 components/common/Datepicker.vue           |    5 +-
 pages/ems/effc/EnrgEffcTotSummPage.vue     |    2 +-
 pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue | 1080 ++++++++++----------
 pages/ems/effc/EqpmIndMntrPage.vue         |    6 +-
 5 files changed, 558 insertions(+), 539 deletions(-)

diff --git a/assets/scss/datepicker.scss b/assets/scss/datepicker.scss
index e2e4b89..651ceaa 100644
--- a/assets/scss/datepicker.scss
+++ b/assets/scss/datepicker.scss
@@ -66,6 +66,10 @@
           }
         }
       }
+      
+      .v-icon {
+        color: map-deep-get($config, #{$theme}, "v-icon-chevron-down") !important;
+      }
     }
 
     .v-input__custom {
diff --git a/components/common/Datepicker.vue b/components/common/Datepicker.vue
index 466f567..b8cc499 100644
--- a/components/common/Datepicker.vue
+++ b/components/common/Datepicker.vue
@@ -19,8 +19,11 @@
 					readonly
 					outlined
 				>
-					<template #append >
+					<!-- <template #append >
 						<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;" />
 					</template>
 					<template #append-outer>
 						<div ref="startpicker-container" id="startpicker-container"></div>
diff --git a/pages/ems/effc/EnrgEffcTotSummPage.vue b/pages/ems/effc/EnrgEffcTotSummPage.vue
index 97b6233..614c429 100644
--- a/pages/ems/effc/EnrgEffcTotSummPage.vue
+++ b/pages/ems/effc/EnrgEffcTotSummPage.vue
@@ -33,7 +33,7 @@
             </v-col>
             <v-col :cols="6" class="text-right">
               <!-- 조회버튼 -->
-              <BtnSearch style="margin-top: 20px" size="large" @click="search" />
+              <BtnSearch style="margin-top: 25px" size="large" @click="search" />
             </v-col>
           </v-row>
         </v-card>
diff --git a/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue b/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
index cb0f8a5..bc0013b 100644
--- a/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
+++ b/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
@@ -99,7 +99,7 @@
       <v-col :cols="12" style="height: 100%">
         <v-row class="pa-1" style="height: 50%; width: 100%">
           <div style="width: 100%; height: 100%; overflow: hidden">
-            <div style="height: 15%">
+            <v-card style="background: none; height: 15%">
               <v-card-title
                 class="d-flex align-center justify-space-between"
                 style="padding: 0px"
@@ -108,7 +108,7 @@
                   주요가이드 지표
                 </span>
               </v-card-title>
-            </div>
+            </v-card>
             <div style="height: 85%">
               <v-row style="height: 100%; overflow: auto">
                 <v-col
@@ -117,7 +117,7 @@
                   v-for="(value, key, index) in contentData01"
                   :key="'key1' + index"
                 >
-                  <v-card style="position: relative; overflow: hidden;" >
+                  <v-card style="position: relative; overflow: hidden">
                     <!-- Card header -->
                     <div
                       style="
@@ -133,9 +133,9 @@
                     <v-card-title style="padding-left: 10px">{{
                       value["gdIdxNm"]
                     }}</v-card-title>
-                    <div class="v-box" style="height: 80%; padding: 3px; margin: 10px;">
-                      <v-col :cols="12" style="height: 100%;">
-                        <div style="height: 85%;">
+                    <div class="v-box" style="height: 80%; padding: 3px; margin: 10px">
+                      <v-col :cols="12" style="height: 100%">
+                        <div style="height: 85%">
                           <component
                             class="w100 h100"
                             :is="loadChart ? 'Chart' : null"
@@ -152,7 +152,7 @@
             </div>
           </div>
         </v-row>
-        <v-row class="pa-1" style="height: 40%; width: 100%">
+        <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">
@@ -172,7 +172,7 @@
             </div>
           </v-card>
         </v-row>
-        <v-row class="pa-1" style="height: 34%; width: 100%">
+        <v-row class="pa-1" style="height: 40%; width: 100%">
           <div style="height: 100%; width: 100%">
             <v-row style="height: 100%">
               <v-col :cols="5" class="">
@@ -235,317 +235,315 @@ let myPrgmId;
 let paramKey;
 
 export default {
-	mixins: [mixinGlobal, resize],
-	async asyncData(context) {
-		const myState = context.store.state;
-		myPrgmId = context.route.query.prgmId;
+  mixins: [mixinGlobal, resize],
+  async asyncData(context) {
+    const myState = context.store.state;
+    myPrgmId = context.route.query.prgmId;
     await context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
-		myTitle = await myState.activeMenuInfo.menuNm;
-	},
-	meta: {
-		title: () => {
-			return myTitle;
-		},
-		prgmId: myPrgmId,
-		closable: true,
-	},
-	components: {
-		Utility,
-		SelectBox,
-		SelectCmCycle,
-		DatePicker,
-		Grid,
-		Chart,
-	},
-	data() {
-		return {
-			myPrgmId: myPrgmId,
+    myTitle = await myState.activeMenuInfo.menuNm;
+  },
+  meta: {
+    title: () => {
+      return myTitle;
+    },
+    prgmId: myPrgmId,
+    closable: true,
+  },
+  components: {
+    Utility,
+    SelectBox,
+    SelectCmCycle,
+    DatePicker,
+    Grid,
+    Chart,
+  },
+  data() {
+    return {
+      myPrgmId: myPrgmId,
 
-			initedFlag: false,
-			queryParams: null,
+      initedFlag: false,
+      queryParams: null,
 
-			selectValueList01: [],
-			selectValueList02: [],
-			selectValueList03: [],
-			selectValueList04: [],
+      selectValueList01: [],
+      selectValueList02: [],
+      selectValueList03: [],
+      selectValueList04: [],
 
-			selectValue01: null,
-			selectValue02: null,
-			selectValue03: null,
-			selectValue04: null,
+      selectValue01: null,
+      selectValue02: null,
+      selectValue03: null,
+      selectValue04: null,
 
-			contentData01: {},
+      contentData01: {},
 
-			loadGrid01: false,
-			loadGrid02: false,
+      loadGrid01: false,
+      loadGrid02: false,
       gridName01: "grid01",
       gridName02: "grid02",
 
-			loadTrendChart: false,
-		};
-	},
-	computed: {
-		...mapState({
+      loadTrendChart: false,
+    };
+  },
+  computed: {
+    ...mapState({
       pageData: (state) => state.pageData[myPrgmId],
-		}),
-		fromDt() {
-			return this.pageData.fromDt;
-		},
-	},
-	watch: {
-		async $route(to, from) {
-			if (to.query.prgmId == myPrgmId) {
-				if (to.params.key) {
+    }),
+    fromDt() {
+      return this.pageData.fromDt;
+    },
+  },
+  watch: {
+    async $route(to, from) {
+      if (to.query.prgmId == myPrgmId) {
+        if (to.params.key) {
           document.getElementById("refresh").click();
-				}
-			}
-		},
-		async selectValue01(value) {
-			if (this.initedFlag) {
-				// await this.search();
-				await this.getSelectValueList04();
-			}
-		},
-		async selectValue02(value) {
-			if (this.initedFlag) {
-				await this.getSelectValueList03();
-			}
-		},
-		async selectValue03(value) {
-			if (this.initedFlag) {
-				await this.getSelectValueList04();
-			}
-		},
-		async selectValue04(value) {
-			if (this.initedFlag) {
-				await this.search();
-			}
-		},
-		async fromDt(value) {
-			if (this.initedFlag) {
-				await this.search();
-			}
-		},
-	},
-	async beforeCreate() {
-		myPrgmId = this.$route.query.prgmId;
+        }
+      }
+    },
+    async selectValue01(value) {
+      if (this.initedFlag) {
+        // await this.search();
+        await this.getSelectValueList04();
+      }
+    },
+    async selectValue02(value) {
+      if (this.initedFlag) {
+        await this.getSelectValueList03();
+      }
+    },
+    async selectValue03(value) {
+      if (this.initedFlag) {
+        await this.getSelectValueList04();
+      }
+    },
+    async selectValue04(value) {
+      if (this.initedFlag) {
+        await this.search();
+      }
+    },
+    async fromDt(value) {
+      if (this.initedFlag) {
+        await this.search();
+      }
+    },
+  },
+  async beforeCreate() {
+    myPrgmId = this.$route.query.prgmId;
     await this.$store.dispatch("chkOpenTabList", {
       key: "create",
-			prgmId: myPrgmId,
-			defaultData: defaultData,
-		});
-	},
-	created() {},
-	mounted() {
-		this.init();
-	},
-	beforeDestroy() {
-		this.initedFlag = false;
+      prgmId: myPrgmId,
+      defaultData: defaultData,
+    });
+  },
+  created() {},
+  mounted() {
+    this.init();
+  },
+  beforeDestroy() {
+    this.initedFlag = false;
     this.chkOpenTabList({ key: "destroy", prgmId: myPrgmId });
-	},
-	methods: {
-		...mapMutations({
+  },
+  methods: {
+    ...mapMutations({
       setChartOption: "setChartOption",
-		}),
-		async init() {
-			await this.getSelectValueList();
-			await this.setQueryParams();
-			await this.search();
+    }),
+    async init() {
+      await this.getSelectValueList();
+      await this.setQueryParams();
+      await this.search();
 
-			this.initedFlag = true;
-		},
-		async setQueryParams() {
-			this.queryParams = null;
+      this.initedFlag = true;
+    },
+    async setQueryParams() {
+      this.queryParams = null;
 
-			if (paramKey == this.$route.params.key) {
-				return;
-			}
-			if (this.$route.params.key) {
-				paramKey = this.$route.params.key;
-				this.queryParams = this.$route.params;
-			}
+      if (paramKey == this.$route.params.key) {
+        return;
+      }
+      if (this.$route.params.key) {
+        paramKey = this.$route.params.key;
+        this.queryParams = this.$route.params;
+      }
 
       if (this.queryParams && typeof this.queryParams == "object") {
-				this.setPageData({
-					dateInitedFlag: true,
-				});
+        this.setPageData({
+          dateInitedFlag: true,
+        });
         this.selectValue01 = this.queryParams["fabId"];
         this.selectValue02 = this.queryParams["eqpmKindId"];
-				await this.getSelectValueList03();
+        await this.getSelectValueList03();
         this.selectValue03 = this.queryParams["eqpmGrpId"];
-				await this.getSelectValueList04();
+        await this.getSelectValueList04();
         this.selectValue04 = this.queryParams["eqpmId"];
 
-				this.setPageData({
+        this.setPageData({
           fromDt: this.queryParams["fromDt"],
           cmCycle: this.queryParams["cmCycle"],
-				});
-			}
-		},
-		async getSelectValueList() {
-			await this.getSelectValueList01();
-			await this.getSelectValueList02();
-			await this.getSelectValueList03();
-			await this.getSelectValueList04();
-		},
-		async getSelectValueList01() {
-			let res = await this.postApiReturn({
+        });
+      }
+    },
+    async getSelectValueList() {
+      await this.getSelectValueList01();
+      await this.getSelectValueList02();
+      await this.getSelectValueList03();
+      await this.getSelectValueList04();
+    },
+    async getSelectValueList01() {
+      let res = await this.postApiReturn({
         apiKey: "selectFabCodeList",
         resKey: "fabCodeLists",
-				sendParam: {},
-			});
-			if (res.length > 0) {
+        sendParam: {},
+      });
+      if (res.length > 0) {
         this.selectValueList01 = await res.map((item) => {
-					return {
-						text: item.eccNm,
-						value: item.eccId,
-					};
-				});
-				this.selectValue01 = this.selectValueList01[0].value;
-			} else {
-				this.selectValueList01 = [];
-				this.selectValue01 = null;
-			}
-		},
-		async getSelectValueList02() {
-			var res = await this.postApiReturn({
+          return {
+            text: item.eccNm,
+            value: item.eccId,
+          };
+        });
+        this.selectValue01 = this.selectValueList01[0].value;
+      } else {
+        this.selectValueList01 = [];
+        this.selectValue01 = null;
+      }
+    },
+    async getSelectValueList02() {
+      var res = await this.postApiReturn({
         apiKey: "selectEmsEqpmKindList",
         resKey: "eqpmGrpPysclQtyMngData",
-				sendParam: {},
-			});
+        sendParam: {},
+      });
 
-			if (res.length > 0) {
+      if (res.length > 0) {
         this.selectValueList02 = await res.map((item) => {
-					return {
-						text: item.eqpmKindNm,
-						value: item.eqpmKindId,
-						data: {
-							...item,
-						},
-					};
-				});
-				this.selectValue02 = this.selectValueList02[0].value;
-			} else {
-				this.selectValueList02 = [];
-				this.selectValue02 = null;
-			}
-		},
-		async getSelectValueList03() {
-			var res = await this.postApiReturn({
+          return {
+            text: item.eqpmKindNm,
+            value: item.eqpmKindId,
+            data: {
+              ...item,
+            },
+          };
+        });
+        this.selectValue02 = this.selectValueList02[0].value;
+      } else {
+        this.selectValueList02 = [];
+        this.selectValue02 = null;
+      }
+    },
+    async getSelectValueList03() {
+      var res = await this.postApiReturn({
         apiKey: "selectEmsEqpmGrpList",
         resKey: "eqpmGrpPysclQtyMngData",
-				sendParam: {
-					eqpmKindId: this.selectValue02,
-				},
-			});
+        sendParam: {
+          eqpmKindId: this.selectValue02,
+        },
+      });
 
-			if (res.length > 0) {
+      if (res.length > 0) {
         this.selectValueList03 = await res.map((item) => {
-					return {
-						text: item.eqpmGrpNm,
-						value: item.eqpmGrpId,
-						data: {
-							...item,
-						},
-					};
-				});
-				this.selectValue03 = this.selectValueList03[0].value;
-			} else {
-				this.selectValueList03 = [];
-				this.selectValue03 = null;
-			}
-		},
-		async getSelectValueList04() {
-			var res = await this.postApiReturn({
+          return {
+            text: item.eqpmGrpNm,
+            value: item.eqpmGrpId,
+            data: {
+              ...item,
+            },
+          };
+        });
+        this.selectValue03 = this.selectValueList03[0].value;
+      } else {
+        this.selectValueList03 = [];
+        this.selectValue03 = null;
+      }
+    },
+    async getSelectValueList04() {
+      var res = await this.postApiReturn({
         apiKey: "selectFabEqpmList",
         resKey: "enrgUseEqpmDetlMntrData",
-				sendParam: {
-					fabId: this.selectValue01,
-					eqpmGrpId: this.selectValue03,
-				},
-			});
+        sendParam: {
+          fabId: this.selectValue01,
+          eqpmGrpId: this.selectValue03,
+        },
+      });
 
-			if (res.length > 0) {
+      if (res.length > 0) {
         this.selectValueList04 = await res.map((item) => {
-					return {
-						text: item.eqpmNm,
-						value: item.eqpmId,
-						data: {
-							...item,
-						},
-					};
-				});
-				this.selectValue04 = this.selectValueList04[0].value;
-			} else {
-				this.selectValueList04 = [];
-				this.selectValue04 = null;
-			}
-		},
-		async search() {
-			// console.log('search ...');
-			// console.log('selectValue01 : ', this.selectValue01);
-			// console.log('selectValue02 : ', this.selectValue02);
-			// console.log('selectValue03 : ', this.selectValue03);
-			// console.log('selectValue04 : ', this.selectValue04);
-			// console.log('cmCycle : ', this.pageData.cmCycle);
-			// console.log('fromDt : ', this.fromDt);
+          return {
+            text: item.eqpmNm,
+            value: item.eqpmId,
+            data: {
+              ...item,
+            },
+          };
+        });
+        this.selectValue04 = this.selectValueList04[0].value;
+      } else {
+        this.selectValueList04 = [];
+        this.selectValue04 = null;
+      }
+    },
+    async search() {
+      // console.log('search ...');
+      // console.log('selectValue01 : ', this.selectValue01);
+      // console.log('selectValue02 : ', this.selectValue02);
+      // console.log('selectValue03 : ', this.selectValue03);
+      // console.log('selectValue04 : ', this.selectValue04);
+      // console.log('cmCycle : ', this.pageData.cmCycle);
+      // console.log('fromDt : ', this.fromDt);
 
-			await this.setContentData();
+      await this.setContentData();
 
-			this.setPageData({
-				dateInitedFlag: false,
-			});
-		},
+      this.setPageData({
+        dateInitedFlag: false,
+      });
+    },
     reloadChart() {
       this.loadChart = false;
       this.$nextTick(() => {
         this.loadChart = true;
       });
     },
-		async setContentData() {
-			await this.setContentData01();
-			await this.setContentData02();
-			await this.setContentData03();
-			// await this.setContentData04();
-		},
-		async setContentData01() {
-			var apiKey = null;
-			var res = null;
-			this.contentData01 = {};
+    async setContentData() {
+      await this.setContentData01();
+      await this.setContentData02();
+      await this.setContentData03();
+      // await this.setContentData04();
+    },
+    async setContentData01() {
+      var apiKey = null;
+      var res = null;
+      this.contentData01 = {};
 
       if (this.pageData.cmCycle == "CYC_DAY") {
         apiKey = "selectDailyEnrgUseMainGuideIdx";
       } else if (this.pageData.cmCycle == "CYC_MONTH") {
         apiKey = "selectMonthlyEnrgUseMainGuideIdx";
-			}
+      }
 
-			res = await this.postApiReturn({
-				apiKey: apiKey,
+      res = await this.postApiReturn({
+        apiKey: apiKey,
 				resKey: 'enrgUseEqpmDetlMntrData',
-				sendParam: {
-					eqpmGrpId: this.selectValue03,
-					eqpmId: this.selectValue04,
-					fromDt: this.fromDt,
-				},
-			});
-      console.log('res 01:',res)
-			this.contentData01 = await this.makeContentData01(res);
-      console.log("content", this.contentData01);
+        sendParam: {
+          eqpmGrpId: this.selectValue03,
+          eqpmId: this.selectValue04,
+          fromDt: this.fromDt,
+        },
+      });
+      this.contentData01 = await this.makeContentData01(res);
       await this.setChartGroup01(this.contentData01);
       this.reloadChart();
-		},
-		async setContentData02() {
-			const _this = this;
-			const myOptions = {
-				columnOptions: {
-					resizable: true,
-				},
+    },
+    async setContentData02() {
+      const _this = this;
+      const myOptions = {
+        columnOptions: {
+          resizable: true,
+        },
         header: {
           height: 38,
         },
-			};
-			const gridHeight = this.$refs.mainDiv.offsetHeight * 0.17;
-			var columnList = [
+      };
+      const gridHeight = this.$refs.mainDiv.offsetHeight * 0.17;
+      var columnList = [
         { header: "NO", name: "no", width: 40, align: "center" },
         { header: "gdIdxId", name: "gdIdxId", hidden: true },
         { header: "totDttm", name: "totDttm", hidden: true },
@@ -557,181 +555,188 @@ export default {
         { header: "경고값", name: "warnStndVal", hidden: true },
         { header: "알람종류", name: "alrmKind", hidden: true },
         { header: "알람내용", name: "alrmMsg" },
-			];
-			var res = [];
-			var newRes = [];
+      ];
+      var res = [];
+      var newRes = [];
 
-			this.loadGrid01 = false;
+      this.loadGrid01 = false;
 
-			res = await this.postApiReturn({
+      res = await this.postApiReturn({
 				apiKey: 'selectEnrgUseGuideAlarmInfo',
 				resKey: 'enrgUseEqpmDetlMntrData',
-				sendParam: {
-					cmCycle: this.pageData.cmCycle,
-					eqpmId: this.selectValue04,
-					fromDt: this.fromDt,
+        sendParam: {
+          cmCycle: this.pageData.cmCycle,
+          eqpmId: this.selectValue04,
+          fromDt: this.fromDt,
 					alrmKind: ['WARN', 'CARE'],
-				},
-			});
+        },
+      });
 
-			for (var i = 0; i < res.length; i++) {
-				newRes.push({
-					...res[i],
-					no: i + 1,
-				});
-			}
+      for (var i = 0; i < res.length; i++) {
+        newRes.push({
+          ...res[i],
+          no: i + 1,
+        });
+      }
 
-			this.setGridOption({
-				gridKey: this.gridName01,
-				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
-			});
-			this.setGridColumn({
-				gridKey: this.gridName01,
-				value: columnList,
-			});
-			this.setGridData({
-				gridKey: this.gridName01,
-				value: newRes,
-			});
+      this.setGridOption({
+        gridKey: this.gridName01,
+        value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
+      });
+      this.setGridColumn({
+        gridKey: this.gridName01,
+        value: columnList,
+      });
+      this.setGridData({
+        gridKey: this.gridName01,
+        value: newRes,
+      });
 
-			this.loadGrid01 = true;
-		},
-		async setContentData03() {
-			const _this = this;
-			const myOptions = {
-				columnOptions: {
-					resizable: true,
-				},
+      this.loadGrid01 = true;
+    },
+    async setContentData03() {
+      const _this = this;
+      const myOptions = {
+        columnOptions: {
+          resizable: true,
+        },
         header: {
           height: 38,
         },
-			};
-			const gridHeight = this.$refs.mainDiv.offsetHeight * 0.17;
-			var columnList = [
+      };
+      const gridHeight = this.$refs.mainDiv.offsetHeight * 0.17;
+      var columnList = [
         { header: "NO", name: "no", align: "right", width: 40 },
         { header: "물리량ID", name: "pysclQtyId", width: 100, align: "left" },
         { header: "물리량코드", name: "pysclQtyCd", align: "left" },
         { header: "물리량명", name: "pysclQtyNm", width: 190, align: "left" },
         { header: "물리량타입", name: "pysclQtyTp", width: 100, align: "left" },
-			];
-			var res = [];
-			var newRes = [];
+      ];
+      var res = [];
+      var newRes = [];
 
-			this.loadGrid02 = false;
+      this.loadGrid02 = false;
 
-			res = await this.postApiReturn({
-				apiKey: 'selectEnrgUseEqpmDescInfo',
-				resKey: 'enrgUseEqpmDetlMntrData',
-				sendParam: {
-					eqpmGrpId: this.selectValue03,
-				},
-			});
+      res = await this.postApiReturn({
+        apiKey: "selectEnrgUseEqpmDescInfo",
+        resKey: "enrgUseEqpmDetlMntrData",
+        sendParam: {
+          eqpmGrpId: this.selectValue03,
+        },
+      });
 
-			for (var i = 0; i < res.length; i++) {
-				newRes.push({
-					...res[i],
-					no: i + 1,
-				});
-			}
+      for (var i = 0; i < res.length; i++) {
+        newRes.push({
+          ...res[i],
+          no: i + 1,
+        });
+      }
 
-			this.setGridOption({
-				gridKey: this.gridName02,
-				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
-			});
-			this.setGridColumn({
-				gridKey: this.gridName02,
-				value: columnList,
-			});
-			this.setGridData({
-				gridKey: this.gridName02,
-				value: newRes,
-			});
+      this.setGridOption({
+        gridKey: this.gridName02,
+        value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
+      });
+      this.setGridColumn({
+        gridKey: this.gridName02,
+        value: columnList,
+      });
+      this.setGridData({
+        gridKey: this.gridName02,
+        value: newRes,
+      });
 
-			this.loadGrid02 = true;
+      this.loadGrid02 = true;
 
-			await this.$nextTick();
-			this.$refs[this.gridName02].focus({
-				rowKey: 0,
+      await this.$nextTick();
+      this.$refs[this.gridName02].focus({
+        rowKey: 0,
 				columnName: 'no',
-				setScroll: true,
-			});
-		},
-		async setContentData04(selectedData) {
-			var res = null;
-			var _this = this;
-			var xAxisData = null;
-			var seriesData = null;
-			var sliderHandleSize = 100;
+        setScroll: true,
+      });
+    },
+    async setContentData04(selectedData) {
+      var res = null;
+      var _this = this;
+      var xAxisData = null;
+      var seriesData = null;
+      var sliderHandleSize = 100;
 
-			this.loadTrendChart = false;
+      this.loadTrendChart = false;
 
-			xAxisData = this.makeTrendChartXaxisData();
+      xAxisData = this.makeTrendChartXaxisData();
 
       if (this.pageData.cmCycle == "CYC_MONTH") {
-				sliderHandleSize = ((24 / xAxisData.length) * 100 * 24) / 25;
-			}
+        sliderHandleSize = ((24 / xAxisData.length) * 100 * 24) / 25;
+      }
 
-			res = await this.postApiReturn({
+      res = await this.postApiReturn({
 				apiKey: 'selectEnrgUseHourlyTrendInfo',
 				resKey: 'enrgUseEqpmDetlMntrData',
-				sendParam: {
-					pysclQtyId: selectedData.pysclQtyId,
-					eqpmId: this.selectValue04,
-					fromDt: this.fromDt,
-					cmCycle: this.pageData.cmCycle,
-				},
-			});
+        sendParam: {
+          pysclQtyId: selectedData.pysclQtyId,
+          eqpmId: this.selectValue04,
+          fromDt: this.fromDt,
+          cmCycle: this.pageData.cmCycle,
+        },
+      });
 
-			seriesData = new Array(xAxisData.length).fill(NaN);
+      seriesData = new Array(xAxisData.length).fill(NaN);
 
-			for (var i = 0; i < res.length; i++) {
+      for (var i = 0; i < res.length; i++) {
         if (this.pageData.cmCycle == "CYC_MONTH") {
           seriesData[res[i]["monthCnt"]] = res[i]["totVal"];
         } else if (this.pageData.cmCycle == "CYC_DAY") {
           seriesData[res[i]["dayCnt"]] = res[i]["totVal"];
-				}
-			}
+        }
+      }
 
-			var chartOption = {
-				grid: {
+      var chartOption = {
+        grid: {
           top: "3%",
           bottom: "25%",
-				},
-				tooltip: {
-					axisPointer: {
-						label: {
+        },
+        tooltip: {
+          axisPointer: {
+            label: {
               formatter: function (value) {
-								value = value.value;
-								return (
-									value.substring(5, 7) +
+                value = value.value;
+                return (
+                  value.substring(5, 7) +
                   "월 " +
-									value.substring(8, 10) +
+                  value.substring(8, 10) +
                   "일 " +
-									value.substring(11, 13) +
+                  value.substring(11, 13) +
                   "시"
-								);
-							},
-						},
-					},
-				},
-				xAxis: {
-					data: xAxisData,
-					axisLabel: {
+                );
+              },
+            },
+          },
+        },
+        xAxis: {
+          data: xAxisData,
+          axisLabel: {
             formatter: function (value) {
               return value.substring(11, 13) + "시";
-						},
-					},
-					axisTick: {
-						interval: 23,
-					},
-				},
-				yAxis: {
+            },
+          },
+          axisTick: {
+            interval: 23,
+          },
+        },
+        yAxis: {
           type: "value",
-				},
-				series: [
-					{
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed", // Makes the lines dashed
+              color: "#ccc", // Optional: customize the color
+            },
+          },
+        },
+        series: [
+          {
             type: "line",
-						data: seriesData,
+            data: seriesData,
             itemStyle: {
               color: "#D32029",
             },
@@ -746,123 +751,119 @@ export default {
           //   itemStyle: {
           //     color: "#FAAD14",
           //   },
-					// },
-				],
-				dataZoom: [
-					{
+          // },
+        ],
+        dataZoom: [
+          {
             type: "slider",
-						// zoomLock: true,
-						zoomLock: false,
-						brushSelect: false,
-						start: 0, // 0-100 %
-						end: sliderHandleSize, // 0-100 %
-					},
-					{
+            // zoomLock: true,
+            zoomLock: false,
+            brushSelect: false,
+            start: 0, // 0-100 %
+            end: sliderHandleSize, // 0-100 %
+          },
+          {
             type: "inside",
-						zoomOnMouseWheel: false,
-						moveOnMouseMove: false,
-						moveOnMouseWheel: true,
-					},
-				],
-			};
+            zoomOnMouseWheel: false,
+            moveOnMouseMove: false,
+            moveOnMouseWheel: true,
+          },
+        ],
+      };
 
       this.setChartOption({ chartKey: "trendChart", value: chartOption });
-			this.loadTrendChart = true;
-		},
-		async getRowData02(selectedData) {
-			await this.setContentData04(selectedData);
-		},
-		async makeContentData01(data) {
-			var result = {};
-			for (var i = 0; i < data.length; i++) {
+      this.loadTrendChart = true;
+    },
+    async getRowData02(selectedData) {
+      await this.setContentData04(selectedData);
+    },
+    async makeContentData01(data) {
+      var result = {};
+      for (var i = 0; i < data.length; i++) {
         if (!result.hasOwnProperty(data[i]["gdIdxId"])) {
           result[data[i]["gdIdxId"]] = {
             gdIdxId: data[i]["gdIdxId"],
             gdIdxNm: data[i]["gdIdxNm"],
-						data: [],
-					};
+            data: [],
+          };
 
           result[data[i]["gdIdxId"]]["data"].push({
-						...data[i],
-					});
-				} else {
+            ...data[i],
+          });
+        } else {
           result[data[i]["gdIdxId"]]["data"].push({
-						...data[i],
-					});
-				}
-			}
+            ...data[i],
+          });
+        }
+      }
 
-			var idxData = await this.postApiReturn({
+      var idxData = await this.postApiReturn({
 				apiKey: 'selectEnrgUseMainIdxDesc',
 				resKey: 'eqpmIndMntrData',
-				sendParam: {
-					eqpmGrpId: this.selectValue03,
-				},
-			});
+        sendParam: {
+          eqpmGrpId: this.selectValue03,
+        },
+      });
 
-			for (var i = 0; i < idxData.length; i++) {
+      for (var i = 0; i < idxData.length; i++) {
         if (!result.hasOwnProperty(idxData[i]["gdIdxId"])) {
           result[idxData[i]["gdIdxId"]] = {
             gdIdxId: idxData[i]["gdIdxId"],
             gdIdxNm: idxData[i]["gdIdxNm"],
-						data: [],
-					};
-				}
-			}
+            data: [],
+          };
+        }
+      }
 
-			return result;
-		},
-		async setChartGroup01(data) {
-			this.loadChart = false;
-			await this.$nextTick();
-			this.initChartGroup01(data);
-			this.setChartGroup01Data(data);
-			this.loadChart = true;
-		},
-		initChartGroup01(data) {
-			var dataKeyList = Object.keys(data);
-			var currentChartData = null;
-			var chartKey = null;
+      return result;
+    },
+    async setChartGroup01(data) {
+      this.loadChart = false;
+      await this.$nextTick();
+      this.initChartGroup01(data);
+      this.setChartGroup01Data(data);
+      this.loadChart = true;
+    },
+    initChartGroup01(data) {
+      var dataKeyList = Object.keys(data);
+      var currentChartData = null;
+      var chartKey = null;
 
-			for (var i = 0; i < dataKeyList.length; i++) {
-				currentChartData = data[dataKeyList[i]];
+      for (var i = 0; i < dataKeyList.length; i++) {
+        currentChartData = data[dataKeyList[i]];
 				chartKey = 'chartGroup01_' + currentChartData['gdIdxId'];
 
-				this.setPageData({
-					[chartKey]: this.getGroup01ChartOption(),
-				});
-			}
-		},
-		setChartGroup01Data(data) {
-			var dataKeyList = Object.keys(data);
-			var currentChartData = null;
-			var chartKey = null;
-			var xAxisData = null;
-			var seriesData = null;
+        this.setPageData({
+          [chartKey]: this.getGroup01ChartOption(),
+        });
+      }
+    },
+    setChartGroup01Data(data) {
+      var dataKeyList = Object.keys(data);
+      var currentChartData = null;
+      var chartKey = null;
+      var xAxisData = null;
+      var seriesData = null;
 
-			xAxisData = this.makeChartGroup01XaxisData();
+      xAxisData = this.makeChartGroup01XaxisData();
 
-			for (var i = 0; i < dataKeyList.length; i++) {
-				seriesData = new Array(xAxisData.length).fill(NaN);
+      for (var i = 0; i < dataKeyList.length; i++) {
+        seriesData = new Array(xAxisData.length).fill(NaN);
 
-				currentChartData = data[dataKeyList[i]];
+        currentChartData = data[dataKeyList[i]];
         chartKey = "chartGroup01_" + currentChartData["gdIdxId"];
 
         for (var j = 0; j < currentChartData["data"].length; j++) {
           seriesData[currentChartData["data"][j]["dataNum"]] =
             currentChartData["data"][j]["totVal"];
-				}
-
-        // console.log("text seri data", seriesData);
+        }
 
         this.$store.state.pageData[myPrgmId][chartKey]["xAxis"]["data"] = xAxisData;
         this.$store.state.pageData[myPrgmId][chartKey]["series"][0]["data"] = seriesData;
-
-        console.log("chart data", this.$store.state.pageData[myPrgmId][chartKey]);
-			}
-		},
-		getGroup01ChartOption() {
-			var chartOption = Utility.defaultChartOption(true);
+      }
+    },
+    getGroup01ChartOption() {
+      var chartOption = Utility.defaultChartOption(true);
 
       chartOption["series"][0]["type"] = "line";
       chartOption["grid"]["bottom"] = "3%";
@@ -871,75 +872,86 @@ export default {
         color: "#D32029",
       };
 
-			return chartOption;
-		},
-		makeChartGroup01XaxisData() {
-			var result = [];
-			var paramsDt = this.fromDt;
+      // Add dashed horizontal grid lines from y-axis
+      chartOption["yAxis"] = {
+        type: "value",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: "dashed", // Makes the lines dashed
+          },
+        },
+      };
+
+      return chartOption;
+    },
+    makeChartGroup01XaxisData() {
+      var result = [];
+      var paramsDt = this.fromDt;
 
       if (this.pageData.cmCycle == "CYC_MONTH") {
-				var tempDate = new Date(
+        var tempDate = new Date(
           paramsDt.substring(0, 4) + "-" + paramsDt.substring(4, 6) + "-01 00:00"
-				);
-				var lastDayOfMonth = getLastDayOfMonth(tempDate);
+        );
+        var lastDayOfMonth = getLastDayOfMonth(tempDate);
 
-				for (var i = 1; i <= lastDayOfMonth; i++) {
-					result.push(i);
-				}
+        for (var i = 1; i <= lastDayOfMonth; i++) {
+          result.push(i);
+        }
       } else if (this.pageData.cmCycle == "CYC_DAY") {
-				for (var i = 0; i < 24; i++) {
-					result.push(i);
-				}
-			}
+        for (var i = 0; i < 24; i++) {
+          result.push(i);
+        }
+      }
 
-			return result;
-		},
-		makeTrendChartXaxisData() {
-			var result = [];
-			var paramsDt = this.fromDt;
-			var timezoneOffset = new Date().getTimezoneOffset() * 60000;
+      return result;
+    },
+    makeTrendChartXaxisData() {
+      var result = [];
+      var paramsDt = this.fromDt;
+      var timezoneOffset = new Date().getTimezoneOffset() * 60000;
 
       if (this.pageData.cmCycle == "CYC_MONTH") {
-				var tempDate = new Date(
+        var tempDate = new Date(
           paramsDt.substring(0, 4) + "-" + paramsDt.substring(4, 6) + "-01 00:00"
-				);
-				var lastDayOfMonth = getLastDayOfMonth(tempDate);
+        );
+        var lastDayOfMonth = getLastDayOfMonth(tempDate);
 
-				tempDate = new Date(tempDate - timezoneOffset);
-				result.push(tempDate.toISOString());
+        tempDate = new Date(tempDate - timezoneOffset);
+        result.push(tempDate.toISOString());
 
-				for (var i = 0; i < 24 * lastDayOfMonth - 1; i++) {
-					tempDate = addHours(1, tempDate);
-					result.push(tempDate.toISOString());
-				}
+        for (var i = 0; i < 24 * lastDayOfMonth - 1; i++) {
+          tempDate = addHours(1, tempDate);
+          result.push(tempDate.toISOString());
+        }
       } else if (this.pageData.cmCycle == "CYC_DAY") {
-				var tempDate = new Date(
-					paramsDt.substring(0, 4) +
+        var tempDate = new Date(
+          paramsDt.substring(0, 4) +
             "-" +
-						paramsDt.substring(4, 6) +
+            paramsDt.substring(4, 6) +
             "-" +
-						paramsDt.substring(6, 8) +
+            paramsDt.substring(6, 8) +
             " 00:00"
-				);
+        );
 
-				tempDate = new Date(tempDate - timezoneOffset);
-				result.push(tempDate.toISOString());
+        tempDate = new Date(tempDate - timezoneOffset);
+        result.push(tempDate.toISOString());
 
-				for (var i = 0; i < 23; i++) {
-					tempDate = addHours(1, tempDate);
-					result.push(tempDate.toISOString());
-				}
-			}
+        for (var i = 0; i < 23; i++) {
+          tempDate = addHours(1, tempDate);
+          result.push(tempDate.toISOString());
+        }
+      }
 
-			return result;
-		},
-	},
+      return result;
+    },
+  },
 };
 
 function addHours(h, date) {
-	date.setTime(date.getTime() + h * 60 * 60 * 1000);
+  date.setTime(date.getTime() + h * 60 * 60 * 1000);
 
-	return date;
+  return date;
 }
 
 function getLastDayOfMonth(date) {
@@ -947,30 +959,30 @@ function getLastDayOfMonth(date) {
 }
 
 const defaultData = {
-	dateInitedFlag: false,
+  dateInitedFlag: false,
   cmCycle: "CYC_MONTH",
-	cmCycleList: [
+  cmCycleList: [
     { idx: 0, text: "월", value: "CYC_MONTH" },
     { idx: 1, text: "일", value: "CYC_DAY" },
-	],
-	defaultRange: {
-		CYC_MONTH: 1,
-		CYC_DAY: 1,
-	},
+  ],
+  defaultRange: {
+    CYC_MONTH: 1,
+    CYC_DAY: 1,
+  },
   fromDt: Utility.setFormatDate(new Date(), "YYYYMM"), // 조회 시작일
 
-	grid01: {
-		data: [],
-		column: [],
-		option: {},
-	},
+  grid01: {
+    data: [],
+    column: [],
+    option: {},
+  },
 
-	grid02: {
-		data: [],
-		column: [],
-		option: {},
-	},
+  grid02: {
+    data: [],
+    column: [],
+    option: {},
+  },
 
-	trendChart: Utility.defaultChartOption(true),
+  trendChart: Utility.defaultChartOption(true),
 };
 </script>
diff --git a/pages/ems/effc/EqpmIndMntrPage.vue b/pages/ems/effc/EqpmIndMntrPage.vue
index 187fdcb..27098aa 100644
--- a/pages/ems/effc/EqpmIndMntrPage.vue
+++ b/pages/ems/effc/EqpmIndMntrPage.vue
@@ -201,7 +201,6 @@ export default {
       gridName: "grid01",
 
       enrgUseMainIdxDesc: [],
-      itemsPerPage: 10,
       itemsPerPageArray: [10, 20, 30],
       limit: 10,
       page: 1,
@@ -433,6 +432,9 @@ export default {
           name: "eqpmGrpNm",
           align: "left",
           width: 200,
+        },
+        { header: "eqpmId", name: "eqpmId", hidden: true },
+        { header: "설비명", name: "eqpmNm", align: "left", width: 200,
           // Render custom button to switch page instead of double click on row
           renderer: {
             type: CustomButton,
@@ -465,8 +467,6 @@ export default {
             },
           },
         },
-        { header: "eqpmId", name: "eqpmId", hidden: true },
-        { header: "설비명", name: "eqpmNm", align: "left", width: 200 },
         {
           header: "계획량",
           name: "planVal",