From 6077dddb744b2c8dbc95f27a5e701643965ac4c6 Mon Sep 17 00:00:00 2001
From: Michael <20074391@skcc.com>
Date: Wed, 30 Jul 2025 15:35:41 +0900
Subject: [PATCH] Remove mockdata screen 5

---
 pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue | 1267 +++++++++-----------
 1 file changed, 540 insertions(+), 727 deletions(-)

diff --git a/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue b/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
index fe6a834..cea8138 100644
--- a/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
+++ b/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
@@ -1,7 +1,6 @@
 <template>
   <div ref="mainDiv" class="l-layout">
-    <PageTitle text="에너지 사용량 이력" />
-
+    <CommonPageTitle />
     <v-row ref="searchFilter">
       <v-col :cols="12">
         <v-card class="searchFilter">
@@ -76,6 +75,7 @@
                 :parentPrgmId="myPrgmId"
                 :isRangeOption="false"
                 :textCols="12"
+                :customClass="'datepicker-large'"
               />
             </v-col>
             <v-col :cols="6" class="text-right">
@@ -249,355 +249,317 @@ 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,
-    PageTitle,
-  },
-  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.search();
+		}),
+		async init() {
+			await this.getSelectValueList();
+			await this.setQueryParams();
+			await this.search();
 
-      await this.getSelectValueList();
-      await this.setQueryParams();
+			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();
-
-      //   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,
-      //     resKey: "enrgUseEqpmDetlMntrData",
-      //     sendParam: {
-      //       eqpmGrpId: this.selectValue03,
-      //       eqpmId: this.selectValue04,
-      //       fromDt: this.fromDt,
-      //     },
-      //   });
-
-      res = [
-        {
-          gdIdxId: "A01",
-          gdIdxNm: "Temperature",
-          dataNum: 0,
-          totVal: 23.5,
-          timestamp: "2025-07-15T10:00:00Z",
-        },
-        {
-          gdIdxId: "C03",
-          gdIdxNm: "Power Usage",
-          dataNum: 1,
-          totVal: 24.1,
-          timestamp: "2025-07-15T11:00:00Z",
-        },
-        {
-          gdIdxId: "B02",
-          gdIdxNm: "Humidity",
-          dataNum: 0,
-          totVal: 60,
-          timestamp: "2025-07-15T10:00:00Z",
-        },
-        {
-          gdIdxId: "B03",
-          gdIdxNm: "Test",
-          dataNum: 0,
-          totVal: 50,
-          timestamp: "2025-07-19T10:00:00Z",
-        },
-      ];
-
-      this.contentData01 = await this.makeContentData01(res);
+			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);
       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 },
@@ -609,384 +571,299 @@ 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({
-      //     apiKey: "selectEnrgUseGuideAlarmInfo",
-      //     resKey: "enrgUseEqpmDetlMntrData",
-      //     sendParam: {
-      //       cmCycle: this.pageData.cmCycle,
-      //       eqpmId: this.selectValue04,
-      //       fromDt: this.fromDt,
-      //       alrmKind: ["WARN", "CARE"],
-      //     },
-      //   });
-      res = [
-        {
-          gdIdxId: "PQ001",
-          totDttm: "TEMP",
-          totDt: "Temperature",
-          totTm: "Analog",
-          gdIdxNm: "PQ001",
-          totVal: "TEMP",
-          caseStndVal: "Temperature",
-          warnStndVal: "Analog",
-          alrmKind: "PQ001",
-          alrmMsg: "TEMP",
-        },
-        {
-          gdIdxId: "PQ001",
-          totDttm: "TEMP",
-          totDt: "Temperature",
-          totTm: "Analog",
-          gdIdxNm: "PQ001",
-          totVal: "TEMP",
-          caseStndVal: "Temperature",
-          warnStndVal: "Analog",
-          alrmKind: "PQ001",
-          alrmMsg: "TEMP",
-        },
-      ];
+			res = await this.postApiReturn({
+				apiKey: 'selectEnrgUseGuideAlarmInfo',
+				resKey: 'enrgUseEqpmDetlMntrData',
+				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 = [
-        {
-          pysclQtyId: "PQ001",
-          pysclQtyCd: "TEMP",
-          pysclQtyNm: "Temperature",
-          pysclQtyTp: "Analog",
-        },
-        {
-          pysclQtyId: "PQ002",
-          pysclQtyCd: "PRESS",
-          pysclQtyNm: "Pressure",
-          pysclQtyTp: "Analog",
-        },
-        {
-          pysclQtyId: "PQ003",
-          pysclQtyCd: "FLOW",
-          pysclQtyNm: "Flow Rate",
-          pysclQtyTp: "Digital",
-        },
-      ];
+			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,
-      //     columnName: "no",
-      //     setScroll: true,
-      //   });
-    },
-    async setContentData04(selectedData) {
-      var res = null;
-      var _this = this;
-      var xAxisData = null;
-      var seriesData = null;
-      var sliderHandleSize = 100;
+			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;
 
-      this.loadTrendChart = false;
+			this.loadTrendChart = false;
 
-      xAxisData = this.makeTrendChartXaxisData();
-      console.log("x axis :", xAxisData);
+			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({
-      //     apiKey: "selectEnrgUseHourlyTrendInfo",
-      //     resKey: "enrgUseEqpmDetlMntrData",
-      //     sendParam: {
-      //       pysclQtyId: selectedData.pysclQtyId,
-      //       eqpmId: this.selectValue04,
-      //       fromDt: this.fromDt,
-      //       cmCycle: this.pageData.cmCycle,
-      //     },
-      //   });
+			res = await this.postApiReturn({
+				apiKey: 'selectEnrgUseHourlyTrendInfo',
+				resKey: 'enrgUseEqpmDetlMntrData',
+				sendParam: {
+					pysclQtyId: selectedData.pysclQtyId,
+					eqpmId: this.selectValue04,
+					fromDt: this.fromDt,
+					cmCycle: this.pageData.cmCycle,
+				},
+			});
 
-      res = [
-        { monthCnt: 0, totVal: 120 },
-        { monthCnt: 1, totVal: 150 },
-        { monthCnt: 2, totVal: 180 },
-        { monthCnt: 3, totVal: 200 },
-      ];
+			seriesData = new Array(xAxisData.length).fill(NaN);
 
-      seriesData = new Array(xAxisData.length).fill(300);
-
-      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 seriesData2 = new Array(xAxisData.length).fill(100);
-
-      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: [
-          {
+				},
+				series: [
+					{
             type: "line",
-            data: seriesData,
+						data: seriesData,
             symbol: "none",
             itemStyle: {
               color: "#D32029",
             },
           },
-          {
-            type: "line",
-            data: seriesData2,
-            symbol: "none",
-            itemStyle: {
-              color: "#FAAD14",
-            },
-          },
-        ],
-        dataZoom: [
-          {
+          // {
+          //   type: "line",
+          //   data: seriesData2,
+          //   symbol: "none",
+          //   itemStyle: {
+          //     color: "#FAAD14",
+          //   },
+					// },
+				],
+				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({
-      //     apiKey: "selectEnrgUseMainIdxDesc",
-      //     resKey: "eqpmIndMntrData",
-      //     sendParam: {
-      //       eqpmGrpId: this.selectValue03,
-      //     },
-      //   });
+			var idxData = await this.postApiReturn({
+				apiKey: 'selectEnrgUseMainIdxDesc',
+				resKey: 'eqpmIndMntrData',
+				sendParam: {
+					eqpmGrpId: this.selectValue03,
+				},
+			});
 
-      var idxData = [
-        {
-          gdIdxId: "A01",
-          gdIdxNm: "Temperature",
-          unit: "°C",
-          description: "Average temperature reading",
-        },
-        {
-          gdIdxId: "B02",
-          gdIdxNm: "Humidity",
-          unit: "%",
-          description: "Relative humidity level",
-        },
-        {
-          gdIdxId: "C03",
-          gdIdxNm: "Power Usage",
-          unit: "kWh",
-          description: "Total power consumption",
-        },
-        {
-          gdIdxId: "B03",
-          gdIdxNm: "Test",
-          unit: "%",
-          description: "Relative humidity level test",
-        },
-      ];
-
-      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;
-      for (var i = 0; i < dataKeyList.length; i++) {
-        currentChartData = data[dataKeyList[i]];
-        console.log("curr:", currentChartData);
+			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;
 
-        chartKey = "chartGroup01_" + currentChartData["gdIdxId"];
+			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();
-      console.log("text xaxis", xAxisData);
+			xAxisData = this.makeChartGroup01XaxisData();
 
-      for (var i = 0; i < dataKeyList.length; i++) {
-        seriesData = new Array(xAxisData.length).fill(10);
+			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);
 
@@ -994,10 +871,10 @@ export default {
         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%";
@@ -1006,77 +883,75 @@ export default {
         color: "#D32029",
       };
 
-      // chartOption["series"][0]["symbol"] = "none";
-      console.log("chartOption: ", chartOption);
-      return chartOption;
-    },
-    makeChartGroup01XaxisData() {
-      var result = [];
-      var paramsDt = this.fromDt;
+			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) {
@@ -1084,92 +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: [
-      {
-        gdIdxId: "PQ001",
-        totDttm: "TEMP",
-        totDt: "Temperature",
-        totTm: "Analog",
-        gdIdxNm: "PQ001",
-        totVal: "TEMP",
-        caseStndVal: "Temperature",
-        warnStndVal: "Analog",
-        alrmKind: "PQ001",
-        alrmMsg: "TEMP",
-      },
-      {
-        gdIdxId: "PQ001",
-        totDttm: "TEMP",
-        totDt: "Temperature",
-        totTm: "Analog",
-        gdIdxNm: "PQ001",
-        totVal: "TEMP",
-        caseStndVal: "Temperature",
-        warnStndVal: "Analog",
-        alrmKind: "PQ001",
-        alrmMsg: "TEMP",
-      },
-    ],
-    column: [
-      { header: "NO", name: "no", width: 40, align: "right" },
-      { header: "gdIdxId", name: "gdIdxId", hidden: true, align: "left" },
-      { header: "totDttm", name: "totDttm", hidden: true, align: "left" },
-      { header: "발생일", name: "totDt", width: 150, align: "left" },
-      { header: "발생시간대", name: "totTm", width: 100, align: "left" },
-      { header: "가이드지표명", name: "gdIdxNm", width: 200, align: "left" },
-      { header: "가이드값", name: "totVal", hidden: true, align: "left" },
-      { header: "주의값", name: "caseStndVal", hidden: true, align: "left" },
-      { header: "경고값", name: "warnStndVal", hidden: true, align: "left" },
-      { header: "알람종류", name: "alrmKind", hidden: true, align: "left" },
-      { header: "알람내용", name: "alrmMsg", align: "left" },
-    ],
-    option: {},
-  },
+	grid01: {
+		data: [],
+		column: [],
+		option: {},
+	},
 
-  grid02: {
-    data: [
-      {
-        pysclQtyId: "PQ001",
-        pysclQtyCd: "TEMP",
-        pysclQtyNm: "Temperature",
-        pysclQtyTp: "Analog",
-      },
-      {
-        pysclQtyId: "PQ002",
-        pysclQtyCd: "PRESS",
-        pysclQtyNm: "Pressure",
-        pysclQtyTp: "Analog",
-      },
-      {
-        pysclQtyId: "PQ003",
-        pysclQtyCd: "FLOW",
-        pysclQtyNm: "Flow Rate",
-        pysclQtyTp: "Digital",
-      },
-    ],
-    column: [
-      { 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" },
-    ],
-    option: {},
-  },
+	grid02: {
+		data: [],
+		column: [],
+		option: {},
+	},
 
-  trendChart: Utility.defaultChartOption(true),
+	trendChart: Utility.defaultChartOption(true),
 };
 </script>