From a6e8e6cf86cc32cdb736f4f102e91a16e657a353 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tran=20Van=20Dung/=28Tran=20Van=20Dung=29/=ED=98=84?=
 =?UTF-8?q?=EC=9E=A5=EB=8C=80=EB=A6=AC=EC=9D=B8/SK?= <20074470@skcc.com>
Date: Thu, 31 Jul 2025 13:52:28 +0700
Subject: [PATCH 01/15] fixbug screen 20

---
 components/common/Grid.vue                    | 16 +++--
 components/common/modal/FtnPlcFormPop.vue     | 65 ++++++++-----------
 .../pages/ems/EqpmInfo/EqpmConstTab.vue       |  1 -
 components/pages/ems/EqpmInfo/EqpmIaoTab.vue  | 45 +++++++++----
 nuxt.config.js                                |  2 +-
 pages/comm/auth/MenuRoleMngPage.vue           | 14 ++--
 pages/comm/base/PrgmMngPage.vue               |  1 +
 pages/ems/base/EquipmentMasterMngPage.vue     |  3 +-
 8 files changed, 77 insertions(+), 70 deletions(-)

diff --git a/components/common/Grid.vue b/components/common/Grid.vue
index 4efae23..e2b607d 100644
--- a/components/common/Grid.vue
+++ b/components/common/Grid.vue
@@ -4,12 +4,12 @@
 		:data="chkGridData"
 		:columns="chkGridColumns"
 		:options="chkGridOptions"
-		@mousedown="onMousedown"
 		@click="startEditing"
 		@editingFinish="editingFinish"
 		@dblclick="dblClick"
 		@mouseover="mouseoverEvent"
 		@mouseout="mouseoutEvent"
+		@mousedown="onMousedown"
 		@focusChange="focusChangeEvt"
 	/>
 </template>
@@ -271,11 +271,17 @@ export default {
 			});
 		},
 		onMousedown(evt) {
-			// console.log("------------------DEBUG-------onMousedown:", evt);
-			this.focusChangeEvt(evt);
+			console.log("------------------DEBUG-------onMousedown:", evt);
+			this.handleSelectedRow(evt);
 		},
 		focusChangeEvt(e) {
-			// console.log("------------------DEBUG-------focusChangeEvt:", e);
+			console.log("------------------DEBUG-------focusChangeEvt:", e);
+			if(e.rowKey === 0) {
+				this.handleSelectedRow(e);	
+			}
+		},
+		handleSelectedRow(e) {
+			console.log("------------------DEBUG-------handleSelectedRow:", e);
 			// console.log('focusChangeEvt1...')
 			if (this.preventFocusChangeEvent(e)) {
 				// console.log('prevent focusChangeEvt')
@@ -283,7 +289,7 @@ export default {
 			}
 			// console.log('focusChangeEvt2...')
 			// cell 선택시 row 선택 method
-			if (e.rowKey >= 0) {
+			if (e.rowKey > -1) {
 				this.$emit(
 					'getRowsData',
 					this.gridInstance.invoke('getRow', e.rowKey),
diff --git a/components/common/modal/FtnPlcFormPop.vue b/components/common/modal/FtnPlcFormPop.vue
index 7ccbe47..f577a6e 100644
--- a/components/common/modal/FtnPlcFormPop.vue
+++ b/components/common/modal/FtnPlcFormPop.vue
@@ -280,52 +280,41 @@ export default {
 				modalKey: this.myModalKey,
 				gridKey: this.grid_01,
 				modalDataKey: this.modalDataKey,
-				value: [{ header: '위치정보', name: 'eccNm' }],
+				value: [
+					{
+						align: 'center',
+						width: 30,
+						minWidth: 60,
+						formatter: (props) => {
+							return `<span class="custom-radio"><span class="radio-mark"></span></span>`;
+						}
+					},
+					{ header: '위치정보', name: 'eccNm' }
+				],
 			});
 		},
 		async getGridData() {
-			// this.loadGrid = false;
+			this.loadGrid = false;
 
-			// const res = await this.postApiReturn({
-			// 	apiKey: 'selectEccBaseInfo',
-			// 	resKey: 'eccBaseInfoData',
-			// 	sendParam: {
-			// 		blocId: this.myBindingData.blocId,
-			// 		eqpmYn: '0',
-			// 		search: this.searchWord,
-			// 	},
-			// });
+			const res = await this.postApiReturn({
+				apiKey: 'selectEccBaseInfo',
+				resKey: 'eccBaseInfoData',
+				sendParam: {
+					blocId: this.myBindingData.blocId,
+					eqpmYn: '0',
+					search: this.searchWord,
+				},
+			});
 
-			// const setTreeData = await this.setTree({
-			// 	gridKey: this.gridNameTree,
-			// 	treeKey: 'ECC_ID',
-			// 	value: res.map(item => ({
-			// 		...item,
-			// 		eccNm: item.eccNm,
-			// 	})),
-			// });
-			
-			//mockdata eccNm
-
-			
-			let res = [
-				{ ECC_ID: 'ECC001', eccNm: '서울 본사', iconShow: false, align: 'center' },
-				{ ECC_ID: 'ECC002', eccNm: '부산 지사', useIcon: false, align: 'center' },
-				{ ECC_ID: 'ECC003', eccNm: '대구 센터', useIcon: false, align: 'center' },
-				{ ECC_ID: 'ECC004', eccNm: '광주 사무소' , useIcon: false, align: 'center'},
-				{ ECC_ID: 'ECC005', eccNm: '인천 물류창고' , useIcon: false, align: 'center'},
-			];
-
-			
-			const setTreeData = {
-				ROOT: res.map(item => ({
+			const setTreeData = await this.setTree({
+				gridKey: this.gridNameTree,
+				treeKey: 'ECC_ID',
+				value: res.map(item => ({
 					...item,
 					eccNm: item.eccNm,
-				}))
-			};
+				})),
+			});
 
-			// console.log(res);
-			
 			this.setModalGridData({
 				modalKey: this.myModalKey,
 				gridKey: this.grid_01,
diff --git a/components/pages/ems/EqpmInfo/EqpmConstTab.vue b/components/pages/ems/EqpmInfo/EqpmConstTab.vue
index 892b426..69f1615 100644
--- a/components/pages/ems/EqpmInfo/EqpmConstTab.vue
+++ b/components/pages/ems/EqpmInfo/EqpmConstTab.vue
@@ -358,7 +358,6 @@ const myEqpmConstDetail = [
 	{
 		type: 'SelectBox',
 		label: '대상 유형',
-		disabled: true,
 		cols: 6,
 		class: 'py-3 pr-4',
 		list: 'emMapDivList2',
diff --git a/components/pages/ems/EqpmInfo/EqpmIaoTab.vue b/components/pages/ems/EqpmInfo/EqpmIaoTab.vue
index 688214a..5be2e9b 100644
--- a/components/pages/ems/EqpmInfo/EqpmIaoTab.vue
+++ b/components/pages/ems/EqpmInfo/EqpmIaoTab.vue
@@ -18,7 +18,7 @@
 				:innerTabGridInfo="innerTabGridInfo"
 			/>
 		</div>
-		<div style="min-height: calc(100vh - 900px);">
+		<div style="min-height: calc(100vh - 900px);" class="mt-4">
 			<component
 				:is="'Form'"
 				:parentPrgmId="parentPrgmId"
@@ -108,18 +108,24 @@ export default {
 	},
 	watch: {
 		selectedObjId(val) {
-			// console.log('selectedObjId : ', val);
 			if (val === 'TAG') {
+				// this.detailList[1].class = 'py-3 pl-4 pb-0';
+				this.detailList[1].class = 'py-3 d-none';
 				this.detailList[2].class = 'py-3 d-none';
 				this.detailList[3].class = 'py-3 pl-4 pt-1 d-none';
+
 				this.detailList[4].class = 'py-3';
 				this.detailList[5].class = 'py-3';
+				this.detailList[6].class = 'py-3 pl-4 pt-0';
 			} else {
 				// }else if(val==="READ_PLC"){
-				this.detailList[5].class = 'py-3 d-none';
-				this.detailList[4].class = 'py-3 d-none';
-				this.detailList[3].class = 'py-3 pl-4 pt-1';
+				this.detailList[1].class = 'py-3 pl-4';
 				this.detailList[2].class = 'py-3';
+				this.detailList[3].class = 'py-3 pl-4 pt-0';
+
+				this.detailList[4].class = 'py-3 d-none';
+				this.detailList[5].class = 'py-3 d-none';
+				this.detailList[6].class = 'py-3 d-none';
 			}
 		},
 		selectedCalcFg(val) {
@@ -280,15 +286,16 @@ export default {
 			this.loadGrid = true;
 		},
 		async getRowData(data, gridName) {
+			console.log("--------------------DEBUG-----getRowData---------------", {data, gridName});
 			if (data.rowStat === 'I') {
 				this.detailList[0].disabled = false;
-				this.detailList[2].disabled = false;
+				this.detailList[1].disabled = false;
 				this.detailList[3].disabled = false;
 				this.detailList[4].disabled = false;
 				this.detailList[5].disabled = false;
 			} else {
 				this.detailList[0].disabled = true;
-				this.detailList[2].disabled = true;
+				this.detailList[1].disabled = true;
 				this.detailList[3].disabled = true;
 				this.detailList[4].disabled = true;
 				this.detailList[5].disabled = true;
@@ -306,7 +313,7 @@ export default {
 				case 'add':
 					this.$refs[this.gridName].addRow();
 					this.detailList[0].disabled = false;
-					this.detailList[2].disabled = false;
+					this.detailList[1].disabled = false;
 					this.detailList[3].disabled = false;
 					this.detailList[4].disabled = false;
 					this.detailList[5].disabled = false;
@@ -315,7 +322,7 @@ export default {
 				case 'remove':
 					this.$refs[this.gridName].removeRow();
 					this.detailList[0].disabled = true;
-					this.detailList[2].disabled = true;
+					this.detailList[1].disabled = true;
 					this.detailList[3].disabled = true;
 					this.detailList[4].disabled = true;
 					this.detailList[5].disabled = true;
@@ -436,10 +443,10 @@ const myEqpmIaoDetail = [
 		type: 'ReadPlcPop',
 		label: '대상 항목',
 		valueNm: 'objId',
-		disabled: true,
 		cols: 6,
-		class: 'py-3 pl-4',
+		class: 'py-3 pl-4 pb-0',
 		required: true,
+		disabled: true,
 		bindNm: 'objNm',
 		textCols: 12,
 		labelCols: 12,
@@ -460,11 +467,12 @@ const myEqpmIaoDetail = [
 		readonly: true,
 		disabled: true,
 		cols: 6,
-		class: 'py-3 pl-4 pt-1',
+		class: 'py-3 pl-4 pt-0',
 		textCols: 12,
 		labelCols: 12,
 		iconShow: true
 	},
+// ============
 	{
 		type: 'EvtObjPop',
 		labelContent: '대상 항목',
@@ -474,16 +482,24 @@ const myEqpmIaoDetail = [
 		disabled: true,
 		required: true,
 		cols: 6,
-		class: 'py-3 d-none',
+		class: 'py-3 pl-4 d-none',
 		disableContent: true,
 		textCols: 12,
 		labelCols: 12,
 		iconShow: true
 	},
 	{
-		type: 'InputText',
+		type: 'Label',
 		cols: 6,
 		class: 'py-3 d-none',
+		disabled: true,
+		textCols: 12,
+		labelCols: 12,
+	},
+	{
+		type: 'InputText',
+		cols: 6,
+		class: 'py-3 pl-4 d-none',
 		valueNm: 'objNm',
 		readonly: true,
 		disabled: true,
@@ -491,6 +507,7 @@ const myEqpmIaoDetail = [
 		labelCols: 12,
 		iconShow: true
 	},
+	// --------------------------------------------
 	{
 		type: 'SelectBox',
 		label: '에너지원',
diff --git a/nuxt.config.js b/nuxt.config.js
index 0bd0350..a878b91 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -57,7 +57,7 @@ module.exports = {
 	],
 
 	// Modules: https://go.nuxtjs.dev/config-modules
-	modules: ['@nuxtjs/axios', '@nuxtjs/dayjs', '@nuxtjs/style-resources','@nuxtjs/google-fonts'],
+	modules: ['@nuxtjs/axios', '@nuxtjs/dayjs', '@nuxtjs/style-resources' ],
 	styleResources: {
 		scss: ['./assets/scss/*.scss'],
 	},
diff --git a/pages/comm/auth/MenuRoleMngPage.vue b/pages/comm/auth/MenuRoleMngPage.vue
index d4f9ca8..c3b9d50 100644
--- a/pages/comm/auth/MenuRoleMngPage.vue
+++ b/pages/comm/auth/MenuRoleMngPage.vue
@@ -398,14 +398,11 @@ export default {
 
 			const myTreeColumns = [
 				{
-					header: '',
-					name: '',
 					align: 'center',
 					width: 30,
+					minWidth: 60,
 					formatter: (props) => {
-						return `<span class="custom-radio">
-									<span class="radio-mark"></span>
-								</span>`;
+						return `<span class="custom-radio"><span class="radio-mark"></span></span>`;
 					}
 				},
 				{
@@ -421,14 +418,11 @@ export default {
 			];
 			const myTreeColumns2 = [
 				{
-					header: '',
-					name: '',
 					align: 'center',
 					width: 30,
+					minWidth: 60,
 					formatter: (props) => {
-						return `<span class="custom-radio">
-									<span class="radio-mark"></span>
-								</span>`;
+						return `<span class="custom-radio"><span class="radio-mark"></span></span>`;
 					}
 				},
 				{ header: '역할ID', name: 'roleId', hidden: true },
diff --git a/pages/comm/base/PrgmMngPage.vue b/pages/comm/base/PrgmMngPage.vue
index e6d4479..9532ceb 100644
--- a/pages/comm/base/PrgmMngPage.vue
+++ b/pages/comm/base/PrgmMngPage.vue
@@ -1,5 +1,6 @@
 <template>
 	<div class="l-layout">
+		<CommonPageTitle />
 		<!-- 조회조견 -->
 		<v-row ref="searchFilter">
 			<v-col :cols="12">
diff --git a/pages/ems/base/EquipmentMasterMngPage.vue b/pages/ems/base/EquipmentMasterMngPage.vue
index 9d74c43..ae78103 100644
--- a/pages/ems/base/EquipmentMasterMngPage.vue
+++ b/pages/ems/base/EquipmentMasterMngPage.vue
@@ -479,6 +479,7 @@ export default {
 			});
 		},
 		async getRowData(data) {
+			console.log('-------------DEBUG-----getRowData-----------', data);
 			this.setEqpmAddInfo(data);
 			this.setEqpmIao(data);
 			this.setEqpmConstIao(data);
@@ -969,7 +970,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-3 pr-4',
+		class: 'py-3 pr-4 pb-2',
 	},
 	{
 		type: 'CheckBox',

From 3c249aa4760e320cba5f50d014ea967db217075d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguyen=20Van=20Luan/=28Nguyen=20Van=20Luan=29/=ED=98=84?=
 =?UTF-8?q?=EC=9E=A5=EB=8C=80=EB=A6=AC=EC=9D=B8/SK?= <20074472@skcc.com>
Date: Thu, 31 Jul 2025 15:57:07 +0900
Subject: [PATCH 02/15]  update code

---
 assets/scss/common.scss                    |   3 +-
 assets/scss/var.scss                       |   4 +
 components/common/button/ActionButtons.vue |   6 +-
 pages/comm/auth/UserRoleMngPage.vue        |  35 ++-
 pages/ems/base/EnrgCostCenterMngPage.vue   | 256 +++------------------
 5 files changed, 72 insertions(+), 232 deletions(-)

diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index 37e5055..bebf21a 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -474,7 +474,7 @@ a {
 
     .header {
       background-color: map-deep-get($config, #{$theme}, "header-backgroud");
-      border-color: #D3D6EA;
+      border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-header-border");
     }
 
     .btn-header {
@@ -488,6 +488,7 @@ a {
       .menu-container {
         height:calc(100vh - 60px);
         overflow-y: auto;
+        border-right: 1px solid map-deep-get($config, #{$theme}, "v-sidebar-border") ;
       }
     }
 
diff --git a/assets/scss/var.scss b/assets/scss/var.scss
index ec638ff..6181b26 100644
--- a/assets/scss/var.scss
+++ b/assets/scss/var.scss
@@ -172,6 +172,8 @@ $config: (
     btn-header-select-bg: #1F1F1F,
     btn-header-select-color:#FFFFFFD9,
     subtitle-tab: #FFFFFFA6,
+    v-header-border: #424242,
+    v-sidebar-border: #303030,
   ),
   light: (w-g5: $--color-gray_555,
     g5-w: $--color-white,
@@ -308,5 +310,7 @@ $config: (
     btn-header-select-color:#1F1F1F,
     btn-header-select-bg:#FFFFFF,
     subtitle-tab: #000000A6,
+    v-header-border: #D9D9D9,
+    v-sidebar-border: #F0F0F0,
   ),
 );
\ No newline at end of file
diff --git a/components/common/button/ActionButtons.vue b/components/common/button/ActionButtons.vue
index c5baa1a..7c11db7 100644
--- a/components/common/button/ActionButtons.vue
+++ b/components/common/button/ActionButtons.vue
@@ -1,9 +1,9 @@
 <template>
-	<div class="d-flex flex-column justify-center align-center">
+	<div class="d-flex flex-row justify-center align-center" style="gap: 12px">
 		<!--<v-btn icon tile :ripple="false" @click="btnActionsFnc('addLeftToRight')">
 			<v-icon>mdi-chevron-right</v-icon>
 		</v-btn> -->
-		<a-button @click="btnActionsFnc('addLeftToRight')" type="primary" ghost icon="right" >
+		<a-button @click="btnActionsFnc('addLeftToRight')" type="primary" ghost icon="up" >
 		</a-button>
 
 		<!--<v-btn
@@ -15,7 +15,7 @@
 		>
 			<v-icon>mdi-chevron-left</v-icon>
 		</v-btn> -->
-		<a-button class="mt-2" @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost icon="left">
+		<a-button  @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost icon="down">
 		</a-button>
 	</div>
 </template>
diff --git a/pages/comm/auth/UserRoleMngPage.vue b/pages/comm/auth/UserRoleMngPage.vue
index cabbed3..da382c6 100644
--- a/pages/comm/auth/UserRoleMngPage.vue
+++ b/pages/comm/auth/UserRoleMngPage.vue
@@ -127,13 +127,13 @@
 
 									<!-- 역할수정 -->
 									<template v-else-if="item.id == 'AsgnRoleByUser'">
-										<v-col :cols="3" class="h100">
+										<v-col :cols="12">
 											<v-card-title
 												class="pa-0 custom-subtitle-tab"
 												style="min-height:36px;"
 												>역할리스트</v-card-title
 											>
-											<div style="height:calc(100% - 36px)" class="py-5">
+											<div class="py-5">
 												<component
 													class="w100"
 													:is="loadGridTab2 ? 'Grid' : null"
@@ -145,7 +145,7 @@
 												/>
 											</div>
 										</v-col>
-										<v-col :cols="1" class="d-flex justify-center">
+										<v-col :cols="12" class="d-flex justify-center">
 											<ActionButtons
 												:parentPrgmId="myPrgmId"
 												:leftGridName="gridName2"
@@ -153,7 +153,7 @@
 												:btnActionsFnc="dualGridBtnActions"
 											/>
 										</v-col>
-										<v-col :cols="8" class="h100">
+										<v-col :cols="12" class="h100">
 											<div class="d-flex align-center justify-space-between">
 												<v-card-title class="pa-0 custom-subtitle-tab">
 													사용자 역할</v-card-title
@@ -894,6 +894,7 @@ const defaultData = {
 };
 
 const myColumns = [
+	
 	{ header: '사용자No', name: 'userNo', align: 'center', hidden: true },
 	{ header: '사용자명', name: 'userNm' },
 	{ header: '사용자ID', name: 'userLoginId' },
@@ -909,6 +910,17 @@ const myColumns = [
 ];
 
 const unAsgnRoleByUserColumns = [
+	{
+		header: '',
+		name: '',
+		align: 'center',
+		width: 50,
+		formatter: (props) => {
+			return `<label class="custom-radio">
+						<span class="radio-mark"></span>
+					</label>`;
+		}
+	},	
 	{ header: '역할ID', name: 'roleId', align: 'center' },
 	{ header: '역할명', name: 'roleNm' },
 	{ header: '적용시작일', name: 'aplyStartDt', hidden: true },
@@ -918,6 +930,7 @@ const unAsgnRoleByUserColumns = [
 ];
 
 const asgnRoleByUserColumns = [
+	
 	{ header: '역할ID', name: 'roleId', align: 'center' },
 	{ header: '역할명', name: 'roleNm' },
 	{
@@ -931,7 +944,19 @@ const asgnRoleByUserColumns = [
 	{ header: 'comId', name: 'comId', hidden: true },
 ];
 
-const asgnMenuByUserColumns = [{ header: '메뉴명', name: 'menuNm' }];
+const asgnMenuByUserColumns = [
+	{
+		header: '',
+		name: '',
+		align: 'center',
+		width: 50,
+		formatter: (props) => {
+			return `<label class="custom-radio">
+						<span class="radio-mark"></span>
+					</label>`;
+		}
+	},	
+	{ header: '메뉴명', name: 'menuNm' }];
 
 const myDetail = blocCdList => {
 	return [
diff --git a/pages/ems/base/EnrgCostCenterMngPage.vue b/pages/ems/base/EnrgCostCenterMngPage.vue
index 2b88892..1257d58 100644
--- a/pages/ems/base/EnrgCostCenterMngPage.vue
+++ b/pages/ems/base/EnrgCostCenterMngPage.vue
@@ -3,8 +3,8 @@
 		<v-row ref="searchFilter">
 			<v-col :cols="12">
 				<v-card class="searchFilter">
-					<v-row align="end" no-gutters>
-						<v-col :cols="2.5">
+					<v-row align="center" no-gutters>
+						<v-col :cols="3">
 							<component
 								:is="'selectCodeList'"
 								:parentPrgmId="myPrgmId"
@@ -12,11 +12,9 @@
 								dataKey="searchLocKind"
 								:sendParam="{ commGrpCd: 'EM_LOC_KIND', useFg: '1' }"
 								:addAll="true"
-								:iconShow="true"
-								customClass="select-large"
 							/>
 						</v-col>
-						<v-col :cols="2.5">
+						<v-col :cols="3">
 							<component
 								:is="'selectCodeList'"
 								:parentPrgmId="myPrgmId"
@@ -24,12 +22,10 @@
 								dataKey="searchEccKind"
 								:sendParam="{ commGrpCd: 'EM_ECC_KIND', useFg: '1' }"
 								:addAll="true"
-								:iconShow="true"
-								customClass="select-large"
 							/>
 						</v-col>
-						<!-- <v-col :cols="3">
-							사업장
+						<v-col :cols="3">
+							<!-- 사업장 -->
 							<div style="visibility:hidden">
 								<component
 									:is="'SelectBlocMstr'"
@@ -37,8 +33,13 @@
 									:parentPrgmId="myPrgmId"
 								/>
 							</div>
-						</v-col> -->
-						<v-col :cols="2.5">
+						</v-col>
+						<v-col :cols="3" class="text-right">
+							<BtnSearch @click="search" />
+						</v-col>
+					</v-row>
+					<v-row align="center" no-gutters>
+						<v-col :cols="3">
 							<component
 								:is="'selectCodeList'"
 								:parentPrgmId="myPrgmId"
@@ -46,23 +47,18 @@
 								dataKey="useFg"
 								:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
 								:addAll="true"
-								:iconShow="true"
-								customClass="select-large"
 							/>
 						</v-col>
-						<v-col :cols="2.5">
+						<v-col :cols="6">
 							<InputText
 								:parentPrgmId="myPrgmId"
 								label="공정명"
 								valueNm="eccNm"
-								:labelCols="12"
-								:textCols="12"
+								:labelCols="2"
+								:textCols="9"
 								:searchOption="true"
-								:iconShow="true"
-								customClass="input-large"
 							/>
 						</v-col>
-						<BtnSearch @click="search" size="large" />
 					</v-row>
 				</v-card>
 			</v-col>
@@ -79,17 +75,16 @@
 							:btnActionsFnc="btnActions"
 						/>
 					</div>
-					<div class="px-5" style="min-height:calc(100% - 76px)">
-						<div ref="gridParent" class="w100 h100 pb-2">
+					<div class="px-5" style="height:calc(100% - 76px)">
+						<div ref="gridParent" class="w100 h100">
 							<component
 								:ref="gridName"
-								:is="loadGrid ? 'Grid' : null" 
+								:is="loadGrid ? 'Grid' : null"
 								:gridName="gridName"
 								:parentPrgmId="myPrgmId"
 								@getRowsData="getRowData"
 								@sendSelectedRowStatInfo="getSelectedRowStatInfo"
 								:selectedRowDataWatchFlag="true"
-								:dataPath="dataPathMock"
 							/>
 						</div>
 					</div>
@@ -196,15 +191,13 @@ export default {
 			gridName: 'rowGrid',
 			loadGrid: false,
 			tab: null,
-			selectedRowKey: null,
-			// rowSelectionStatus: {},
-			dataPathMock : { },
 			items: [
 				{ name: '공정 정보', id: 'eccBaseInfoTab', disabledFlag: false },
 				{ name: '공정 추가 정보', id: 'eccAddInfoTab', disabledFlag: false },
 				{ name: '공정 연결 정보', id: 'eccIaoTab', disabledFlag: false },
 			],
 			detailList: myDetail,
+			loadGrid: false,
 		};
 	},
 	computed: {
@@ -320,23 +313,11 @@ export default {
 	},
 	mounted() {
 		this.init();
-		this.$nextTick(() => {
-		// const checkbox = document.getElementById('headerCheckbox');
-		// if (checkbox) {
-		// 	checkbox.addEventListener('change', this.handleHeaderCheckboxChange);
-		// }
-		});
 	},
 	beforeDestroy() {
 		this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
 	},
 	methods: {
-		handleHeaderCheckboxChange(event) {
-			const checked = event.target.checked;
-			this.dataPathMock.rowGrid.data.forEach(row => {
-			row.selected = checked;
-		});},
-
 		...mapMutations({
 			setPageData: 'setPageData',
 		}),
@@ -351,41 +332,7 @@ export default {
 				blocId: this.userInfo.blocId,
 			});
 		},
-		gridInitTest() {
-			const rowGrid = {
-				column: [
-					{
-						header: '',
-						name: '',
-						align: 'center',
-						width: 50,
-						formatter: (props) => {
-							return `<label class="custom-radio">
-										<span class="radio-mark"></span>
-									</label>`;
-						}
-					},
-					{ header: '공정 정보', name: 'eccNm', align: 'left' },
-					{ header: '현재 상태', name: 'status', align: 'center' },
-					{ header: '공정 유형', name: 'eccKind', align: 'left' },
-					{ header: '사용 여부', name: 'useFg', align: 'center' },
-				],
-				data: dataMockExample,
-				defaultRow: dataMockExample,
-				option: {
-					...gridOptions,
-				},
-			}
-			this.dataPathMock = {rowGrid};
-			this.$nextTick(() => {
-				this.loadGrid = true;
-			});
-		},
 		gridInit() {
-			//  Test
-			this.gridInitTest(); return;
-			// End test
-
 			const gridHeight = this.$refs.gridParent.offsetHeight - 30;
 			const gridWidth = this.$refs.gridParent.offsetWidth;
 
@@ -404,6 +351,17 @@ export default {
 
 			const _this = this;
 			const myColumns = [
+				{
+					header: '',
+					name: '',
+					align: 'center',
+					width: 50,
+					formatter: (props) => {
+						return `<label class="custom-radio">
+									<span class="radio-mark"></span>
+								</label>`;
+					}
+				},
 				{ header: '회사 ID', name: 'comId', hidden: true },
 				{
 					header: '공정 명',
@@ -598,16 +556,6 @@ export default {
 			});
 		},
 		async getRowData(data) {
-			
-			//Progess and fake radio 
-			// const rowKey = data.rowKey;
-			// this.selectedRowKey = rowKey;
-			// Object.keys(this.rowSelectionStatus).forEach(key => {
-			// this.$set(this.rowSelectionStatus, key, false);
-			// });
-			// this.$set(this.rowSelectionStatus, rowKey, true);
-
-
 			this.setEccAddInfo(data);
 			this.setEccIao(data);
 			this.setGridSelectData({
@@ -623,9 +571,6 @@ export default {
 				rowGridSelectKey: data.rowKey,
 				rowGridSelectData: Object.assign({}, data),
 			});
-			//fake radio need recheck  
-			// this.$refs[this.gridName]?.repaint?.();
-
 		},
 		async setEccAddInfo(data) {
 			this.setPageData({
@@ -1070,142 +1015,7 @@ const myDetail = [
 		value: { '1': true, '0': false },
 	},
 ];
-
-const dataMockExample = [
-  {
-    eccId: 'ECC000001',
-    eccNm: 'EGP_HVAC_LT_CH001',
-    status: '운영중',
-    eccKind: '공정',
-    useFg: '1',
-    _children: [
-      {
-        eccId: 'ECC000002',
-        eccNm: 'B01',
-        status: '대기',
-        eccKind: '공정',
-        useFg: '1',
-        _children: [
-          {
-            eccId: 'ECC000005',
-            eccNm: 'B01-1',
-            status: '운영중',
-            eccKind: '공정',
-            useFg: '1',
-			_children: [
-				{
-					eccId: 'ECC000009',
-					eccNm: 'B01-1-1',
-					status: '운영중',
-					eccKind: '공정',
-					useFg: '1'
-				},
-				{
-					eccId: 'ECC0000010',
-					eccNm: 'B01-1-2',
-					status: '운영중',
-					eccKind: '공정',
-					useFg: '1'
-				},
-				{
-					eccId: 'ECC0000011',
-					eccNm: 'B01-1-3',
-					status: '운영중',
-					eccKind: '공정',
-					useFg: '1'
-				},
-			]
-          },
-          {
-            eccId: 'ECC000006',
-            eccNm: 'B01-2',
-            status: '점검중',
-            eccKind: '공정',
-            useFg: '0',
-			_children: [
-				{
-					eccId: 'ECC0000013',
-					eccNm: 'B01-2-1',
-					status: '운영중',
-					eccKind: '공정',
-					useFg: '1'
-				},
-				{
-					eccId: 'ECC0000014',
-					eccNm: 'B01-1-2',
-					status: '운영중',
-					eccKind: '공정',
-					useFg: '1'
-				},
-				{
-					eccId: 'ECC0000015',
-					eccNm: 'B01-1-3',
-					status: '운영중',
-					eccKind: '공정',
-					useFg: '1'
-				},
-			]
-          },
-          {
-            eccId: 'ECC000007',
-            eccNm: 'B01-3',
-            status: '운영중',
-            eccKind: '공정',
-            useFg: '1',
-			_children: [
-				{
-					eccId: 'ECC000009',
-					eccNm: 'B01-3-1',
-					status: '운영중',
-					eccKind: '공정',
-					useFg: '1'
-				},
-				{
-					eccId: 'ECC0000010',
-					eccNm: 'B01-3-2',
-					status: '운영중',
-					eccKind: '공정',
-					useFg: '1'
-				},
-				{
-					eccId: 'ECC0000011',
-					eccNm: 'B01-3-3',
-					status: '운영중',
-					eccKind: '공정',
-					useFg: '1'
-				},
-			]
-          },
-        ],
-      },
-      {
-        eccId: 'ECC000003',
-        eccNm: 'B02',
-        status: '운영중',
-        eccKind: '공정',
-        useFg: '1',
-      },
-      {
-        eccId: 'ECC000004',
-        eccNm: 'B03',
-        status: '점검중',
-        eccKind: '공정',
-        useFg: '0',
-      },
-    ],
-  },
-];
-
-const gridOptions = {
- 	treeColumnOptions: {
-		name: 'eccNm',	 // Showing tree table
-		useIcon: false, // Not using icon
-		indentWidth: 10,// spacing when showing children
-	},
-	header: {
-		height: 40,
-	},
-	rowHeight: 35,
-	showCheckbox: false,
-};
 </script>
+<style lang="scss">
+@import '@/assets/scss/common.scss';
+</style>

From 238fdb5fc56872feaf1708447518ca15ec79bf99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tran=20Van=20Dung/=28Tran=20Van=20Dung=29/=ED=98=84?=
 =?UTF-8?q?=EC=9E=A5=EB=8C=80=EB=A6=AC=EC=9D=B8/SK?= <20074470@skcc.com>
Date: Thu, 31 Jul 2025 14:18:29 +0700
Subject: [PATCH 03/15] remove console

---
 components/common/Grid.vue                   | 8 --------
 components/pages/ems/EqpmInfo/EqpmIaoTab.vue | 3 +--
 pages/comm/auth/MenuRoleMngPage.vue          | 2 --
 pages/comm/base/PrgmMngPage.vue              | 1 -
 pages/ems/base/EquipmentMasterMngPage.vue    | 1 -
 pages/ems/base/ReadResultCloseMngPage.vue    | 1 -
 pages/ems/effc/EnrgMapPage.vue               | 1 -
 pages/ems/effc/EnrgReptMngPage.vue           | 5 +----
 8 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/components/common/Grid.vue b/components/common/Grid.vue
index e2b607d..1641bd4 100644
--- a/components/common/Grid.vue
+++ b/components/common/Grid.vue
@@ -251,11 +251,9 @@ export default {
 			this.gridInstance.invoke('check', rowData.rowKey, instance);
 		},
 		setSelectionRange(rowKey) {
-			// console.log("------------------DEBUG-------setSelectionRange:", rowKey);
 			const rowDatas = this.gridInstance.invoke('getData');
 			rowDatas.forEach(item => {
 				if (item.rowKey == rowKey) {
-					// console.log("------------------DEBUG-------setSelectionRange---item:", item);
 					this.gridInstance.invoke(
 						'addRowClassName',
 						item.rowKey,
@@ -271,17 +269,14 @@ export default {
 			});
 		},
 		onMousedown(evt) {
-			console.log("------------------DEBUG-------onMousedown:", evt);
 			this.handleSelectedRow(evt);
 		},
 		focusChangeEvt(e) {
-			console.log("------------------DEBUG-------focusChangeEvt:", e);
 			if(e.rowKey === 0) {
 				this.handleSelectedRow(e);	
 			}
 		},
 		handleSelectedRow(e) {
-			console.log("------------------DEBUG-------handleSelectedRow:", e);
 			// console.log('focusChangeEvt1...')
 			if (this.preventFocusChangeEvent(e)) {
 				// console.log('prevent focusChangeEvt')
@@ -302,7 +297,6 @@ export default {
 			this.sendSelectedRowData(e.rowKey);
 		},
 		startEditing(e) {
-			// console.log("------------------DEBUG-------startEditing:", e);
 			// console.log('startEditing1...')
 			if (this.preventFocusChangeEvent(e)) {
 				// console.log('prevent startEditing')
@@ -329,7 +323,6 @@ export default {
 			}
 		},
 		async editingFinish(e) {
-			// console.log('------------------DEBUG-------editingFinish:', e);
 			// console.log("Editing END E::", e);
 			// editor 간 이동시 수정되는 문제 수정
 			// e.rowEditingFg: grid의 한 row를 한번에 수정할 시 각각의 cell 마다 click 이벤트가 발생하지 않아 this.editorStartKey값이 제대로 입력 되지 않는 경우를 대비하여 만든 Fg
@@ -691,7 +684,6 @@ export default {
 						? this.gridInstance.invoke('getFocusedCell').rowKey
 						: eventRowKey;
 				var rowData = this.gridInstance.invoke('getRow', rowKey);
-				// console.log('------------------DEBUG-------sendSelectedRowData:', {eventRowKey, rowKey});
 				this.$emit('sendSelectedRowStatInfo', rowData);
 			}
 		},
diff --git a/components/pages/ems/EqpmInfo/EqpmIaoTab.vue b/components/pages/ems/EqpmInfo/EqpmIaoTab.vue
index 5be2e9b..3945a72 100644
--- a/components/pages/ems/EqpmInfo/EqpmIaoTab.vue
+++ b/components/pages/ems/EqpmInfo/EqpmIaoTab.vue
@@ -115,7 +115,7 @@ export default {
 				this.detailList[3].class = 'py-3 pl-4 pt-1 d-none';
 
 				this.detailList[4].class = 'py-3';
-				this.detailList[5].class = 'py-3';
+				this.detailList[5].class = 'py-3 pl-4';
 				this.detailList[6].class = 'py-3 pl-4 pt-0';
 			} else {
 				// }else if(val==="READ_PLC"){
@@ -286,7 +286,6 @@ export default {
 			this.loadGrid = true;
 		},
 		async getRowData(data, gridName) {
-			console.log("--------------------DEBUG-----getRowData---------------", {data, gridName});
 			if (data.rowStat === 'I') {
 				this.detailList[0].disabled = false;
 				this.detailList[1].disabled = false;
diff --git a/pages/comm/auth/MenuRoleMngPage.vue b/pages/comm/auth/MenuRoleMngPage.vue
index c3b9d50..157cda8 100644
--- a/pages/comm/auth/MenuRoleMngPage.vue
+++ b/pages/comm/auth/MenuRoleMngPage.vue
@@ -668,8 +668,6 @@ export default {
 		},
 
 		getUnAsgnRowData(data) {
-			console.log("------------------DEBUG-------getUnAsgnRowData:", data);
-
 			const getRowData = data;
 			this.leftSelectRowData = Object.assign({}, getRowData);
 		},
diff --git a/pages/comm/base/PrgmMngPage.vue b/pages/comm/base/PrgmMngPage.vue
index 9532ceb..7aa0ce8 100644
--- a/pages/comm/base/PrgmMngPage.vue
+++ b/pages/comm/base/PrgmMngPage.vue
@@ -315,7 +315,6 @@ export default {
 			});
 		},
 		async getRowData(data, gridName) {
-			// console.log("-----------------------DEBUG--getRowData--------------", {
 			// 	gridKey: gridName,
 			// 	gridSelect: true,
 			// 	rowGridSelectKey: data.rowKey,
diff --git a/pages/ems/base/EquipmentMasterMngPage.vue b/pages/ems/base/EquipmentMasterMngPage.vue
index ae78103..acc09f1 100644
--- a/pages/ems/base/EquipmentMasterMngPage.vue
+++ b/pages/ems/base/EquipmentMasterMngPage.vue
@@ -479,7 +479,6 @@ export default {
 			});
 		},
 		async getRowData(data) {
-			console.log('-------------DEBUG-----getRowData-----------', data);
 			this.setEqpmAddInfo(data);
 			this.setEqpmIao(data);
 			this.setEqpmConstIao(data);
diff --git a/pages/ems/base/ReadResultCloseMngPage.vue b/pages/ems/base/ReadResultCloseMngPage.vue
index d696a06..8a64eea 100644
--- a/pages/ems/base/ReadResultCloseMngPage.vue
+++ b/pages/ems/base/ReadResultCloseMngPage.vue
@@ -282,7 +282,6 @@ export default {
             mgnf: item.mgnf || 0,
           })),
         });
-        // console.log('--------------DEBUG-----res-------', res);
       }
       this.setPageData({ isFind: false });
       this.$nextTick(() => {
diff --git a/pages/ems/effc/EnrgMapPage.vue b/pages/ems/effc/EnrgMapPage.vue
index b8f6922..b3c2e51 100644
--- a/pages/ems/effc/EnrgMapPage.vue
+++ b/pages/ems/effc/EnrgMapPage.vue
@@ -245,7 +245,6 @@ export default {
 
 			
 			this.setChartOption({ chartKey: this.chartName, value: chartOption });
-			// console.log("----DEBUG chart-options-------", { chartOption });
 			this.$nextTick(() => {
 				this.loadChart = true;
 			});
diff --git a/pages/ems/effc/EnrgReptMngPage.vue b/pages/ems/effc/EnrgReptMngPage.vue
index b88ff91..9db9f28 100644
--- a/pages/ems/effc/EnrgReptMngPage.vue
+++ b/pages/ems/effc/EnrgReptMngPage.vue
@@ -264,9 +264,6 @@ export default {
 	},
 	created() { },
 	async mounted() {
-		// console.log('----DEBUG---');
-		// await this.initTest();
-		// End Debug Test---
 		await this.init();
 		this.initedFlag = true;
 	},
@@ -287,7 +284,7 @@ export default {
 		}),
 		async initTest() {
 			// debug test
-			console.log('----DEBUG init pages----');
+			// console.log('----DEBUG init pages----');
 			const seriesName1 = ['B01. 냉동기전력량', ' B01.COP'];
 			const seriesName2 = [
 				'UT_HT_CH101:냉동기전혁당', 'UT_HT_CH102:냉동기전력량', 'UT_HT_CH201:냉동기전력당',

From 34d5a1eeb787577bd705fb690d180bca4fa9cd14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vu=20Trung=20Kien/=28Vu=20Trung=20Kien=29/=ED=98=84?=
 =?UTF-8?q?=EC=9E=A5=EB=8C=80=EB=A6=AC=EC=9D=B8/SK?= <20074468@skcc.com>
Date: Thu, 31 Jul 2025 16:18:33 +0900
Subject: [PATCH 04/15] fixbug ui 20 21

---
 components/common/PastRsltDatePicker.vue      |   6 +-
 .../pages/ems/TagInfo/TagAddInfoTab.vue       |   5 +-
 pages/ems/base/EqpmKindPage.vue               |   4 +-
 pages/ems/base/EquipmentGroupMngPage.vue      |   4 +-
 pages/ems/base/PastRsltDataReadPage.vue       |   4 +-
 pages/ems/base/TagMngPage.vue                 | 224 +++++++++---------
 pages/ems/base/TagMngPage_Pagination.vue      |   2 +-
 plugins/gridUtility.js                        |  17 +-
 8 files changed, 142 insertions(+), 124 deletions(-)

diff --git a/components/common/PastRsltDatePicker.vue b/components/common/PastRsltDatePicker.vue
index 67933f9..13dddae 100644
--- a/components/common/PastRsltDatePicker.vue
+++ b/components/common/PastRsltDatePicker.vue
@@ -9,7 +9,7 @@
 			</label>
 		</v-col>
 		<v-col :cols="label ? textCols : ''">
-			<div class="datepicker-container">
+			<div :class="['datepicker-container', customClass]"  >
 				<v-text-field
 					id="startpicker"
 					ref="startpicker"
@@ -79,6 +79,10 @@ export default {
 			require: false,
 			default: 8,
 		},
+		customClass: {
+			type: String,
+			require: false,
+		},
 	},
 	data() {
 		return {
diff --git a/components/pages/ems/TagInfo/TagAddInfoTab.vue b/components/pages/ems/TagInfo/TagAddInfoTab.vue
index 7e4868c..57dea57 100644
--- a/components/pages/ems/TagInfo/TagAddInfoTab.vue
+++ b/components/pages/ems/TagInfo/TagAddInfoTab.vue
@@ -107,8 +107,7 @@ export default {
 				header: {
 					height: 38,
 				},
-				rowHeight: 22,
-				minRowHeight: 22,
+
 				selectionUnit: 'row',
 				editingEvent: 'click',
 			};
@@ -269,7 +268,7 @@ export default {
 				{
 					header: 'Data 구분',
 					name: 'addInfoDataKind',
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						let retVal = '';
 						const newValue = addInfoDataKindList.filter(
diff --git a/pages/ems/base/EqpmKindPage.vue b/pages/ems/base/EqpmKindPage.vue
index 1a53cc1..7fff026 100644
--- a/pages/ems/base/EqpmKindPage.vue
+++ b/pages/ems/base/EqpmKindPage.vue
@@ -359,7 +359,7 @@ const myDetail = [
 		label: '설비종류 ID',
 		valueNm: 'eqpmKindId',
 		cols: 6,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 pt-1',
 		iconShow: true,
 		required: false,
 		readonly: true,
@@ -373,7 +373,7 @@ const myDetail = [
 		valueNm: 'eqpmKindNm',
 		disabled: false,
 		cols: 6,
-		class: 'py-2 pl-4',
+		class: 'py-2 pl-4 pt-1',
 		iconShow: true,
 		required: true,
 		labelCols: 12,
diff --git a/pages/ems/base/EquipmentGroupMngPage.vue b/pages/ems/base/EquipmentGroupMngPage.vue
index 95e229b..fd37a9f 100644
--- a/pages/ems/base/EquipmentGroupMngPage.vue
+++ b/pages/ems/base/EquipmentGroupMngPage.vue
@@ -461,7 +461,7 @@ const myDetail = [
 		valueNm: 'eqpmGrpId',
 		disabled: true,
 		cols: 6,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 pt-1',
 		required: false,
 		iconShow: true,
 		labelCols: 12,
@@ -474,7 +474,7 @@ const myDetail = [
 		valueNm: 'eqpmGrpNm',
 		disabled: false,
 		cols: 6,
-		class: 'py-2 pl-4',
+		class: 'py-2 pl-4 pt-1',
 		required: true,
 		iconShow: true,
 		labelCols: 12,
diff --git a/pages/ems/base/PastRsltDataReadPage.vue b/pages/ems/base/PastRsltDataReadPage.vue
index d50c5de..500a375 100644
--- a/pages/ems/base/PastRsltDataReadPage.vue
+++ b/pages/ems/base/PastRsltDataReadPage.vue
@@ -16,7 +16,8 @@
 						</v-col>
 						<v-col :cols="3">
 							<!-- 대상일 -->
-							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'조회기간'" :textCols="12" />
+							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'조회기간'" :textCols="12"
+								customClass="datepicker-large" />
 						</v-col>
 						<v-col :cols="3" class="d-flex align-end justify-end text-right">
 							<BtnExcelDownload class="mr-1" :parentPrgmId="myPrgmId" :gridName="gridName" type="primary"
@@ -391,6 +392,7 @@ export default {
 					resKey: 'pastRslPageTotal',
 					sendParam: sendParams
 				});
+
 				this.totalCount = res2[0].totalcount;
 
 				this.setGridData({
diff --git a/pages/ems/base/TagMngPage.vue b/pages/ems/base/TagMngPage.vue
index 1f72b05..a4b934b 100644
--- a/pages/ems/base/TagMngPage.vue
+++ b/pages/ems/base/TagMngPage.vue
@@ -1,61 +1,43 @@
 <template>
 	<div class="l-layout">
+		<CommonPageTitle/>
 		<v-row ref="searchFilter">
 			<v-col :cols="12">
 				<v-card class="searchFilter">
 					<v-row align="center" no-gutters>
 						<v-col :cols="3">
 							<!-- 사업장 -->
-							<component
-								:is="'SelectBlocMstr'"
-								ref="SelectBlocMstr"
-								:parentPrgmId="myPrgmId"
-							/>
+							<component :is="'SelectBlocMstr'" ref="SelectBlocMstr" :parentPrgmId="myPrgmId"
+								:textCols="12" customClass="select-large" />
 						</v-col>
 						<v-col :cols="3">
-							<component
-								:is="'selectCodeList'"
-								:parentPrgmId="myPrgmId"
-								:label="'측정 Data 유형'"
-								dataKey="searchReadDataType"
-								:sendParam="{ commGrpCd: 'EM_READ_DATA_TYPE', useFg: '1' }"
-								:addAll="true"
-							/>
+							<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'측정 Data 유형'"
+								dataKey="searchReadDataType" :sendParam="{ commGrpCd: 'EM_READ_DATA_TYPE', useFg: '1' }"
+								:addAll="true" :textCols="12" customClass="select-large" />
 						</v-col>
 						<v-col :cols="3">
-							<component
-								:is="'SelectReadObj'"
-								:parentPrgmId="myPrgmId"
-								:label="'측정대상'"
-								dataKey="searchReadObj"
-								:sendParam="{ useFg: '1' }"
-								:addAll="true"
-							/>
-						</v-col>
-						<v-col :cols="3" class="text-right">
-							<BtnSearch @click="search" />
+							<component :is="'SelectReadObj'" :parentPrgmId="myPrgmId" :label="'측정대상'"
+								dataKey="searchReadObj" :sendParam="{ useFg: '1' }" :labelCols="12" :textCols="12"
+								:addAll="true" customClass="select-large" />
 						</v-col>
+
 					</v-row>
-					<v-row align="center" no-gutters>
+					<v-row align="end" no-gutters>
 						<v-col :cols="3">
-							<component
-								:is="'selectCodeList'"
-								:parentPrgmId="myPrgmId"
-								:label="'사용여부'"
-								dataKey="useFg"
-								:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
-								:addAll="true"
-							/>
+							<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'사용여부'" dataKey="useFg"
+								:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }" :addAll="true" :textCols="12"
+								customClass="select-large" />
 						</v-col>
-						<v-col :cols="6">
-							<InputText
-								:parentPrgmId="myPrgmId"
-								label="TAG명"
-								valueNm="tagNm"
-								:labelCols="2"
-								:textCols="9"
-								:searchOption="true"
-							/>
+						<v-col :cols="3">
+							<InputText :parentPrgmId="myPrgmId" label="TAG ID" valueNm="tagId" :labelCols="12"
+								:textCols="12" :searchOption="true" customClass="input-large" />
+						</v-col>
+						<v-col :cols="3">
+							<InputText :parentPrgmId="myPrgmId" label="TAG명" valueNm="tagNm" :labelCols="12"
+								:textCols="12" :searchOption="true" customClass="input-large" />
+						</v-col>
+						<v-col :cols="3" class="d-flex align-end justify-end text-right">
+							<BtnSearch @click="search" size="large" />
 						</v-col>
 					</v-row>
 				</v-card>
@@ -66,63 +48,33 @@
 				<v-card class="pb-5">
 					<v-card-title class="d-flex justify-space-between align-end">
 						<span class="tit ft-size_20 ft-weight_600">TAG 정보</span>
-						<Buttons
-							:parentPrgmId="myPrgmId"
-							:bindingData="gridName"
-							:detailList="detailList"
-							:btnActionsFnc="btnActions"
-						/>
+						<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :detailList="detailList"
+							:btnActionsFnc="btnActions" />
 					</v-card-title>
 					<v-card-actions>
-						<div
-							ref="gridParent"
-							class="w100"
-							style="height: calc(100vh - 360px)"
-						>
-							<component
-								:ref="gridName"
-								:is="loadGrid ? 'Grid' : null"
-								:gridName="gridName"
-								:parentPrgmId="myPrgmId"
-								@getRowsData="getRowData"
-								@sendSelectedRowStatInfo="getSelectedRowStatInfo"
-								:selectedRowDataWatchFlag="true"
-							/>
+						<div ref="gridParent" class="w100" style="height: calc(100vh - 400px)">
+							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
+								:parentPrgmId="myPrgmId" @getRowsData="getRowData"
+								@sendSelectedRowStatInfo="getSelectedRowStatInfo" :selectedRowDataWatchFlag="true" />
 						</div>
 					</v-card-actions>
 				</v-card>
 			</v-col>
-			<v-col :cols="7" class="h100">
+			<v-col :cols="7" class="">
 				<v-card class="pb-5">
 					<v-card-title>TAG 상세</v-card-title>
 					<div class="px-5" style="height:calc(100% - 70px)">
 						<v-tabs v-model="tab">
-							<v-tab
-								v-for="item in items"
-								:key="item.id"
-								:disabled="item.disabledFlag"
-							>
+							<v-tab v-for="item in items" :key="item.id" :disabled="item.disabledFlag">
 								{{ item.name }}
 							</v-tab>
 						</v-tabs>
-						<v-tabs-items
-							v-model="tab"
-							style="height: calc(100% - 65px);"
-							class="py-6"
-						>
+						<v-tabs-items v-model="tab" style="height: calc(100% - 65px);" class="py-6">
 							<v-tab-item v-for="(item, idx) in items" :key="item.id">
-								<component
-									v-if="item.id == 'tagBaseInfoTab'"
-									:is="'Form'"
-									:parentPrgmId="myPrgmId"
-									:detailList="detailList"
-									@gridEditingFinish="gridEditingFinish"
-								/>
-								<TagAddInfoTab
-									v-if="item.id == 'tagAddInfoTab'"
-									:parentPrgmId="myPrgmId"
-									:innerTabGridInfo="{ tab, idx }"
-								/>
+								<component v-if="item.id == 'tagBaseInfoTab'" :is="'Form'" :parentPrgmId="myPrgmId"
+									:detailList="detailList" @gridEditingFinish="gridEditingFinish" />
+								<TagAddInfoTab v-if="item.id == 'tagAddInfoTab'" :parentPrgmId="myPrgmId"
+									:innerTabGridInfo="{ tab, idx }" />
 							</v-tab-item>
 						</v-tabs-items>
 					</div>
@@ -134,6 +86,7 @@
 <script>
 import { mapState, mapMutations, mapActions } from 'vuex';
 import mixinGlobal from '@/mixin/global.js';
+import { resize } from '@/mixin/resize.js';
 import BtnSearch from '~/components/common/button/BtnSearch';
 import Buttons from '~/components/common/button/Buttons';
 import SelectBlocMstr from '@/components/common/select/SelectBlocMstr';
@@ -149,7 +102,7 @@ let myTitle;
 // const myPrgmId = "PRG0051";
 let myPrgmId;
 export default {
-	mixins: [mixinGlobal],
+	mixins: [mixinGlobal, resize],
 	async asyncData(context) {
 		const myState = context.store.state;
 		// context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
@@ -219,15 +172,19 @@ export default {
 		},
 		chkBlocId() {
 			this.setPageData({ isFind: true });
+			// this.search();
 		},
 		chkReadDataType() {
 			this.setPageData({ isFind: true });
+			// this.search();
 		},
 		chkReadObj() {
 			this.setPageData({ isFind: true });
+			// this.search();
 		},
 		chkUseFg() {
 			this.setPageData({ isFind: true });
+			// this.search();
 		},
 	},
 	async beforeCreate() {
@@ -297,12 +254,16 @@ export default {
 			this.gridInit();
 		},
 		gridInit() {
-			const gridHeight = this.$refs.gridParent.offsetHeight - 30;
+			const gridHeight = this.$refs.gridParent.offsetHeight - 16;
 
 			const myOptions = {
 				columnOptions: {
 					resizable: true,
 				},
+				scrollX: true,
+				header: {
+					height: 38,
+				},
 			};
 			this.setGridOption({
 				gridKey: this.gridName,
@@ -316,21 +277,21 @@ export default {
 					header: 'TAG ID',
 					name: 'tagId',
 					width: 'auto',
-					minWidth: 280,
+					minWidth: 340,
 					align: 'left',
 				},
 				{
 					header: 'TAG 명',
 					name: 'tagNm',
 					width: 'auto',
-					minWidth: 140,
+					minWidth: 220,
 					align: 'left',
 				},
 				{
 					header: '측정 값 유형',
 					name: 'readDataTypeCd',
-					width: 100,
-					align: 'center',
+					width: 90,
+					align: 'left',
 					formatter({ value }) {
 						let retVal = '';
 						const newValue = _this.pageData.readDataTypeCdList.filter(
@@ -346,7 +307,7 @@ export default {
 					header: '측정대상',
 					name: 'readObjId',
 					width: 100,
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						let retVal = '';
 						const newValue = _this.pageData.readObjList.filter(
@@ -363,7 +324,7 @@ export default {
 					header: '단위',
 					name: 'unitCd',
 					width: 80,
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						let retVal = '';
 						const newValue = _this.pageData.unitCdList.filter(
@@ -493,6 +454,7 @@ export default {
 						readObjId: this.pageData.searchReadObj,
 						useFg: this.pageData.useFg,
 						tagNmLike: this.pageData.tagNm,
+						tagIdLike: this.pageData.tagId,
 					},
 				});
 			} else {
@@ -751,7 +713,8 @@ export default {
 							});
 
 							this.$nextTick(() => {
-								this.setPageData({ isFind: true });
+								// this.setPageData({ isFind: true });
+								this.search();
 							});
 						}
 					} else {
@@ -818,6 +781,7 @@ function isValidAlrmVal(obj) {
 
 const defaultData = {
 	/* 검색옵션 */
+	tagId: '',
 	tagNm: '',
 	blocId: '',
 	blocMstrList: [],
@@ -907,30 +871,39 @@ const myDetail = [
 		label: 'TAG ID',
 		valueNm: 'tagId',
 		disabled: false,
+		iconShow: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4',
 		required: false,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'InputText',
 		label: 'TAG 명',
 		valueNm: 'tagNm',
 		disabled: false,
+		iconShow: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pl-4',
 		required: false,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'SelectBox',
 		label: '측정 값 유형',
 		valueNm: 'readDataTypeCd',
 		disabled: false,
+		iconShow: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4 pt-5',
 		list: 'readDataTypeCdList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
 		required: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'SelectBox',
@@ -938,11 +911,14 @@ const myDetail = [
 		valueNm: 'readObjId',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pl-4 pt-5',
 		list: 'readObjList',
 		itemText: 'readObjNm',
 		itemValue: 'readObjId',
 		required: true,
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'InputText',
@@ -950,8 +926,11 @@ const myDetail = [
 		valueNm: 'mgnf',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4 pt-5',
 		required: true,
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'SelectBox',
@@ -959,10 +938,13 @@ const myDetail = [
 		valueNm: 'unitCd',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pl-4 pt-5',
 		list: 'unitCdList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'InputText',
@@ -970,7 +952,10 @@ const myDetail = [
 		valueNm: 'rangMin',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4 pt-5',
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'InputText',
@@ -978,7 +963,10 @@ const myDetail = [
 		valueNm: 'rangMax',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pl-4 pt-5',
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'InputText',
@@ -986,7 +974,10 @@ const myDetail = [
 		valueNm: 'alrmHihi',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4 pt-5',
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'InputText',
@@ -994,7 +985,10 @@ const myDetail = [
 		valueNm: 'alrmHi',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pl-4 pt-5',
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'InputText',
@@ -1002,7 +996,10 @@ const myDetail = [
 		valueNm: 'alrmLo',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4 pt-5',
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'InputText',
@@ -1010,7 +1007,10 @@ const myDetail = [
 		valueNm: 'alrmLolo',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pl-4 pt-5',
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'CheckBox',
@@ -1018,8 +1018,11 @@ const myDetail = [
 		valueNm: 'totFg',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4 pt-5',
 		value: { '1': true, '0': false },
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'CheckBox',
@@ -1027,9 +1030,12 @@ const myDetail = [
 		valueNm: 'useFg',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pl-4 pt-5',
 		value: { '1': true, '0': false },
 		required: false,
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'SelectBox',
@@ -1056,4 +1062,4 @@ const myDetail = [
 		class: 'py-2',
 	},
 ];
-</script>
+</script>
\ No newline at end of file
diff --git a/pages/ems/base/TagMngPage_Pagination.vue b/pages/ems/base/TagMngPage_Pagination.vue
index e8408b5..4b3e83b 100644
--- a/pages/ems/base/TagMngPage_Pagination.vue
+++ b/pages/ems/base/TagMngPage_Pagination.vue
@@ -69,7 +69,7 @@
 					</div>
 				</v-card>
 			</v-col>
-			<v-col :cols="7" class="h100">
+			<v-col :cols="7" class="">
 				<v-card class="pb-5">
 					<v-card-title>TAG 상세</v-card-title>
 					<div class="px-5" style="height:calc(100% - 70px)">
diff --git a/plugins/gridUtility.js b/plugins/gridUtility.js
index d371c44..1593079 100644
--- a/plugins/gridUtility.js
+++ b/plugins/gridUtility.js
@@ -253,8 +253,9 @@ export class NewCustomRenderer {
 		} else {
 			el.type = 'text';
 
-			$(el).addClass('tui-grid-cell-content');
+			$(el).addClass('tui-grid-cell-content w100');
 			$(el).css('text-align', 'center');
+			$(el).css('border', '0');
 		}
 		this.render(props);
 		if(!this.disabled){
@@ -314,6 +315,8 @@ export class NewCustomEditor {
 		this.rowKey = rowKey;
 		this.columnInfo = columnInfo;
 		this.grid = grid;
+		const divEl = document.createElement('div');
+		$(divEl).css('text-align', 'center');
 		const el = document.createElement('input');
 		if (
 			props.grid.store.data.rawData[props.rowKey].addInfoDataKind == 'FG'
@@ -363,16 +366,20 @@ export class NewCustomEditor {
 			}
 			$(el).addClass('tui-grid-content-text');
 		}
+
+		divEl.append(el);
 		
 		// console.log('props: %o', props);
 		// console.log('el: %o', el);
 		this.el = el;
+		this.divEl = divEl;
 
 		this.render(props);
+
 	}
 
 	getElement() {
-		return this.el;
+		return this.divEl;
 	}
 
 	getValue() {
@@ -389,9 +396,9 @@ export class NewCustomEditor {
 	}
 
 	mounted() {
-		if (this.el.type == 'checkbox') {
-			$(this.el.parentElement).css('text-align', 'center');
-		}
+		// if (this.el.type == 'checkbox') {
+		// 	$(this.el.parentElement).css('text-align', 'center');
+		// }
 		this.el.select();
 	}
 }
\ No newline at end of file

From 40addfe63911456a682946cab94e6cf85426f5a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tran=20Van=20Dung/=28Tran=20Van=20Dung=29/=ED=98=84?=
 =?UTF-8?q?=EC=9E=A5=EB=8C=80=EB=A6=AC=EC=9D=B8/SK?= <20074470@skcc.com>
Date: Thu, 31 Jul 2025 15:05:33 +0700
Subject: [PATCH 05/15] fixbug active menu item

---
 assets/scss/common.scss | 149 ++++++++++------------------------------
 1 file changed, 38 insertions(+), 111 deletions(-)

diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index 0fac17b..705e75a 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -691,6 +691,43 @@ a {
       }
 
       &>.v-treeview-node {
+
+        .v-treeview-node--active {
+          background-color: map-deep-get($config,
+            #{$theme},
+            "v-treeview-node-label-active-bg"
+          );
+          border: 1px solid map-deep-get($config,
+            #{$theme},
+            "v-treeview-node-label-active-border"
+          );
+          border-radius: 8px;
+
+          &:before {
+            background-color: map-deep-get($config,
+              #{$theme},
+              "v-treeview-node-subroot-backgroundColor"
+            );
+          }
+
+          &>.v-treeview-node__content {
+            .v-treeview-node__label {
+              color: map-deep-get($config,
+                #{$theme},
+                "v-treeview-node-label-active-color"
+              );
+            }
+
+            .v-icon {
+              color: map-deep-get($config,
+                #{$theme},
+                "v-treeview-icon-active-color"
+              );
+            }
+          }
+
+        }
+
         &>.v-treeview-node__root {
           &:before {
             background-color: map-deep-get($config,
@@ -736,6 +773,7 @@ a {
 
         &>.v-treeview-node__children {
           &>.v-treeview-node {
+
             &>.v-treeview-node__root {
               &:before {
                 background-color: map-deep-get($config,
@@ -793,117 +831,6 @@ a {
               );
             }
 
-            &>.v-treeview-node--active {
-              &:before {
-                background-color: map-deep-get($config,
-                  #{$theme},
-                  "v-treeview-node-subroot-backgroundColor"
-                );
-              }
-
-              &>.v-treeview-node__content {
-                .v-treeview-node__label {
-                  color: map-deep-get($config,
-                    #{$theme},
-                    "v-treeview-node-label-active-color"
-                  );
-                }
-
-                .v-icon {
-                  color: map-deep-get($config,
-                    #{$theme},
-                    "v-treeview-icon-active-color"
-                  );
-                }
-              }
-            }
-
-            &>.v-treeview-node__children {
-              & .v-treeview-node {
-                &>.v-treeview-node__root {
-                  &:before {
-                    background-color: map-deep-get($config,
-                      #{$theme},
-                      "v-treeview-node-subroot-backgroundColor"
-                    );
-                  }
-
-                  &>.v-treeview-node__content {
-                    .v-treeview-node__label {
-                      color: map-deep-get($config,
-                        #{$theme},
-                        "v-treeview-node-label-color"
-                      );
-                    }
-
-                    .v-icon {
-                      color: map-deep-get($config,
-                        #{$theme},
-                        "v-treeview-icon-color"
-                      );
-                    }
-                  }
-
-                  &:not(.v-treeview-node--active):hover {
-                    &:before {
-                      background-color: map-deep-get($config,
-                        #{$theme},
-                        "v-treeview-leaf-active-backgroundColor"
-                      );
-                    }
-
-                    &>.v-treeview-node__content {
-                      .v-treeview-node__label {
-                        color: map-deep-get($config,
-                          #{$theme},
-                          "v-treeview-leaf-active-color"
-                        );
-                      }
-
-                      .v-icon {
-                        color: map-deep-get($config,
-                          #{$theme},
-                          "v-treeview-leaf-active-color"
-                        );
-                      }
-                    }
-                  }
-                }
-
-                &>.v-treeview-node--active {
-                  background-color: map-deep-get($config,
-                    #{$theme},
-                    "v-treeview-node-label-active-bg"
-                  );
-                  border: 1px solid map-deep-get($config,
-                    #{$theme},
-                    "v-treeview-node-label-active-border"
-                  );
-                  border-radius: 8px;
-
-                  &:before {
-                    opacity: 0 !important;
-                  }
-
-                  &>.v-treeview-node__content {
-                    .v-treeview-node__label {
-                      color: map-deep-get($config,
-                        #{$theme},
-                        "v-treeview-node-label-active-color"
-                      );
-                    }
-
-                    .v-icon {
-                      color: map-deep-get($config,
-                        #{$theme},
-                        "v-treeview-node-label-active-color"
-                      );
-                    }
-                  }
-                }
-              }
-            }
-
             &[aria-expanded="true"] {
               & .v-treeview-node__root>.v-treeview-node__content {
                 .v-treeview-node__label {

From dcdcf772ce8db3ced572a99b5b2c3ee3358c63c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tran=20Van=20Dung/=28Tran=20Van=20Dung=29/=ED=98=84?=
 =?UTF-8?q?=EC=9E=A5=EB=8C=80=EB=A6=AC=EC=9D=B8/SK?= <20074470@skcc.com>
Date: Thu, 31 Jul 2025 16:18:44 +0700
Subject: [PATCH 06/15] fixbug screen 20.4

---
 .../pages/ems/EqpmInfo/EqpmConstTab.vue       | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/components/pages/ems/EqpmInfo/EqpmConstTab.vue b/components/pages/ems/EqpmInfo/EqpmConstTab.vue
index 69f1615..b68a035 100644
--- a/components/pages/ems/EqpmInfo/EqpmConstTab.vue
+++ b/components/pages/ems/EqpmInfo/EqpmConstTab.vue
@@ -96,20 +96,20 @@ export default {
 	watch: {
 		selectedEqpmKindId(val) {
 			if (val) {
-				this.detailList[2].eqpmKindId = val;
+				this.detailList[1].eqpmKindId = val;
 			}
 		},
 		selectedEqpmGrpId(val) {
 			// if(!val){
-			// 	this.detailList[2].eqpmGrpId = '';
+			// 	this.detailList[1].eqpmGrpId = '';
 			// }else{
-			// 	this.detailList[2].eqpmGrpId = val;
+			// 	this.detailList[1].eqpmGrpId = val;
 			// }
 			// if(val){
-			// 	this.detailList[2].eqpmGrpId = val;
+			// 	this.detailList[1].eqpmGrpId = val;
 			// }
 			// else if(val == null || val == ''){
-			// 	this.detailList[2].eqpmGrpId = '';
+			// 	this.detailList[1].eqpmGrpId = '';
 			// }
 		},
 	},
@@ -238,10 +238,10 @@ export default {
 		},
 		async getRowData(data, gridName) {
 			if (data.rowStat === 'I') {
-				this.detailList[2].disabled = false;
+				this.detailList[1].disabled = false;
 				this.detailList[3].disabled = false;
 			} else {
-				this.detailList[2].disabled = true;
+				this.detailList[1].disabled = true;
 				this.detailList[3].disabled = true;
 			}
 
@@ -257,12 +257,12 @@ export default {
 			switch (action) {
 				case 'add':
 					this.$refs[this.gridName].addRow();
-					this.detailList[2].disabled = false;
+					this.detailList[1].disabled = false;
 					this.detailList[3].disabled = false;
 					break;
 
 				case 'remove':
-					this.detailList[2].disabled = true;
+					this.detailList[1].disabled = true;
 					this.detailList[3].disabled = true;
 					this.$refs[this.gridName].removeRow();
 					break;
@@ -370,6 +370,7 @@ const myEqpmConstDetail = [
 		textCols: 12,
 		iconShow: true,
 	},
+	// ==================
 	{
 		type: 'EgrpPysclQtyPop',
 		labelContent: '물리량',
@@ -381,7 +382,7 @@ const myEqpmConstDetail = [
 			pysclQtyNm: 'pysclQtyNm',
 		},
 		valueNm: 'objId',
-		disabled: false,
+		disabled: true,
 		required: true,
 		openMode: 'CONST',
 		cols: 6,
@@ -412,6 +413,7 @@ const myEqpmConstDetail = [
 		textCols: 12,
 		iconShow: true,
 	},
+	// ------------
 	{
 		type: 'InputText',
 		label: '물리량 값',

From 3ae3ff8167388cee5de4641f08ea70c60489d86c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguyen=20Van=20Luan/=28Nguyen=20Van=20Luan=29/=ED=98=84?=
 =?UTF-8?q?=EC=9E=A5=EB=8C=80=EB=A6=AC=EC=9D=B8/SK?= <20074472@skcc.com>
Date: Thu, 31 Jul 2025 18:47:42 +0900
Subject: [PATCH 07/15]  refactor code

---
 pages/comm/base/BatchLogMngPage.vue      | 1 -
 pages/ems/base/EnrgCostCenterMngPage.vue | 5 +----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/pages/comm/base/BatchLogMngPage.vue b/pages/comm/base/BatchLogMngPage.vue
index 2ea07c1..df852d8 100644
--- a/pages/comm/base/BatchLogMngPage.vue
+++ b/pages/comm/base/BatchLogMngPage.vue
@@ -5,7 +5,6 @@
 			<v-col :cols="12">
 				<v-card class="searchFilter">
 					<v-row align="end" no-gutters>
-						<div></div>
 						<v-col :cols="2.5">
 							<InputText
 								:parentPrgmId="myPrgmId"
diff --git a/pages/ems/base/EnrgCostCenterMngPage.vue b/pages/ems/base/EnrgCostCenterMngPage.vue
index 1257d58..764347f 100644
--- a/pages/ems/base/EnrgCostCenterMngPage.vue
+++ b/pages/ems/base/EnrgCostCenterMngPage.vue
@@ -1015,7 +1015,4 @@ const myDetail = [
 		value: { '1': true, '0': false },
 	},
 ];
-</script>
-<style lang="scss">
-@import '@/assets/scss/common.scss';
-</style>
+</script>
\ No newline at end of file

From 1284d5b14fef44634e7ad614530a0c5e65c3298d Mon Sep 17 00:00:00 2001
From: Michael <20074391@skcc.com>
Date: Fri, 1 Aug 2025 11:41:32 +0900
Subject: [PATCH 08/15] Update s1 s29 - Remove mock data s5 s11

---
 components/common/modal/ElecPowChrgPop.vue  |   49 +-
 pages/ems/base/ReadResultCloseMngPage.vue   |    1 +
 pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue |    2 +-
 pages/ems/effc/EnrgEffcTotSummPage.vue      |    8 +-
 pages/ems/effc/EnrgReptMngPage.vue          |    2 +-
 pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue  |   30 +-
 pages/ems/effc/EnrgUseTotSummPage.vue       |    4 +-
 pages/ems/effc/EqpmIndMntrPage.vue          |    1 +
 pages/ems/effc/TagTrndPage.vue              | 1642 +++++++++----------
 9 files changed, 865 insertions(+), 874 deletions(-)

diff --git a/components/common/modal/ElecPowChrgPop.vue b/components/common/modal/ElecPowChrgPop.vue
index c2e7770..a6872aa 100644
--- a/components/common/modal/ElecPowChrgPop.vue
+++ b/components/common/modal/ElecPowChrgPop.vue
@@ -58,7 +58,7 @@
 				<div class="pa-5">
 					<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
 					<v-row align="center" no-gutters>
-						<v-col :cols="label ? 3 : ''">
+						<v-col :cols="label ? 3 : ''" style="padding-right: 10px;">
 							<component
 								:is="'selectCodeList'"
 								:parentPrgmId="parentPrgmId"
@@ -66,41 +66,66 @@
 								dataKey="searchElecContKind"
 								:sendParam="{ commGrpCd: 'EM_CONT', useFg: '1' }"
 								:addAll="true"
+								:customClass="'select-large'"
 							/>
 						</v-col>
-						<v-col :cols="label ? 3 : ''">
+						<v-col :cols="label ? 3 : ''" style="padding-right: 10px;">
 							<component
 								:is="'selectCodeList'"
 								:parentPrgmId="parentPrgmId"
 								:label="'전압구분'"
 								dataKey="searchVoltKind"
 								:sendParam="{ commGrpCd: 'EM_VOLT_KIND', useFg: '1' }"
+								:customClass="'select-large'"
 								:addAll="true"
 							/>
 						</v-col>
-						<v-col :cols="label ? 3 : ''">
+						<v-col :cols="label ? 3 : ''" style="padding-right: 10px;">
 							<component
 								:is="'selectCodeList'"
 								:parentPrgmId="parentPrgmId"
 								:label="'전압구분'"
 								dataKey="searchOptKind"
 								:sendParam="{ commGrpCd: 'EM_VOLT_OPT', useFg: '1' }"
+								:customClass="'select-large'"
 								:addAll="true"
 							/>
 						</v-col>
 						<v-col cols="3" class="text-right">
-							<v-btn
+							<div style="height: 25px"></div>
+							<!-- <v-btn
 								v-if="!searchParam.isMulti"
 								:ripple="false"
 								@click="search()"
 								>검색</v-btn
+							> -->
+							<a-button
+								v-if="!searchParam.isMulti"
+								type="primary"
+								class="mr-1"
+								icon="search"
+								:ripple="false"
+								@click="search"
+								style="height: 40px"
 							>
-							<v-btn
+								검색
+							</a-button>
+							<!-- <v-btn
 								v-if="!searchParam.isMulti"
 								:ripple="false"
 								@click="initVal()"
 								>초기화</v-btn
+							> -->
+							<a-button
+								v-if="!searchParam.isMulti"
+								type="primary"
+								class="mr-1"
+								:ripple="false"
+								@click="initVal"
+								style="height: 40px"
 							>
+								초기화
+							</a-button>
 						</v-col>
 					</v-row>
 				</div>
@@ -310,7 +335,11 @@ export default {
 		},
 		// 공정/설비 트리 그리드 세팅
 		gridInit() {
-			const myOptions = {};
+			const myOptions = {
+				header: {
+					height: 38,
+				},
+			};
 			this.setModalGridOption({
 				modalKey: this.myModalKey,
 				gridKey: this.gridName,
@@ -606,11 +635,11 @@ const myColumns = [
 	{ header: '전력계약 ID', name: 'eleclContId', hidden: true},
 	{ header: '전력계약 명', name: 'eleclContNm', hidden: true},
 	{ header: '전력계약구분CD', name: 'elecContKind', hidden: true},
-	{ header: '전력계약구분', name: 'elecContKindNm', align: 'center'},
+	{ header: '전력계약구분', name: 'elecContKindNm', align: 'left'},
 	{ header: '전압구분CD', name: 'voltKind', hidden: true },
-	{ header: '전압구분', name: 'voltKindNm', align: 'center' },
+	{ header: '전압구분', name: 'voltKindNm', align: 'left' },
 	{ header: '옵션CD', name: 'optKind', hidden: true },
-	{ header: '옵션', name: 'optKindNm', align: 'center' },
+	{ header: '옵션', name: 'optKindNm', align: 'left' },
 	{
 		header: '기본요금(원/kW)',
 		name: 'baseChrg',
@@ -620,7 +649,7 @@ const myColumns = [
 		},
 	},
 	{ header: '시간대CD', name: 'peakKind', hidden: true },
-	{ header: '시간대', name: 'peakKindNm', align: 'center' },
+	{ header: '시간대', name: 'peakKindNm', align: 'left' },
 	{
 		header: '여름철(6~8월)',
 		name: 'unitPrcSum',
diff --git a/pages/ems/base/ReadResultCloseMngPage.vue b/pages/ems/base/ReadResultCloseMngPage.vue
index 8a64eea..0720a38 100644
--- a/pages/ems/base/ReadResultCloseMngPage.vue
+++ b/pages/ems/base/ReadResultCloseMngPage.vue
@@ -43,6 +43,7 @@
                 :is="'Datepicker'"
                 :parentPrgmId="myPrgmId"
                 :label="'조회기간'"
+                customClass="datepicker-large"
               />
             </v-col>
             <div class="d-flex">
diff --git a/pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue b/pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue
index 351da39..0a98351 100644
--- a/pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue
+++ b/pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue
@@ -49,7 +49,7 @@
 						<v-col :cols="3">
 							<!-- 대상일 -->
 							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="12"
-								:textCols="12" :customClass="'input-large'" />
+								:textCols="12" :customClass="'datepicker-large'" />
 						</v-col>
 						<v-col :cols="3" class="text-right">
 							<!-- 조회버튼 -->
diff --git a/pages/ems/effc/EnrgEffcTotSummPage.vue b/pages/ems/effc/EnrgEffcTotSummPage.vue
index a6e53e3..a443021 100644
--- a/pages/ems/effc/EnrgEffcTotSummPage.vue
+++ b/pages/ems/effc/EnrgEffcTotSummPage.vue
@@ -25,7 +25,7 @@
               <component
                 :is="'Datepicker'"
                 :parentPrgmId="myPrgmId"
-                :customClass="'select-large'"
+                :customClass="'datepicker-large'"
                 :label="'대상일'"
                 :labelCols="3"
               />
@@ -99,7 +99,6 @@ export default {
   async asyncData(context) {
     const myState = context.store.state;
     myPrgmId = context.route.query.prgmId;
-    console.log("active menu:", myState.menuData);
     await context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
     myTitle = await myState.activeMenuInfo.menuNm;
   },
@@ -319,8 +318,7 @@ export default {
         },
       };
 
-      console.log("data : ", data);
-      data.map((item) => {
+        data.map((item) => {
         xAxisData.push(item.fabNm);
       });
 
@@ -374,8 +372,6 @@ export default {
         ];
       }
 
-      // console.log("xAxisData : ", xAxisData);
-      console.log("seriesData : ", seriesData);
       var chartOption = {
         legend: {
           top: xAxisData.length > 7 ? "top" : "bottom",
diff --git a/pages/ems/effc/EnrgReptMngPage.vue b/pages/ems/effc/EnrgReptMngPage.vue
index 9db9f28..e0ea938 100644
--- a/pages/ems/effc/EnrgReptMngPage.vue
+++ b/pages/ems/effc/EnrgReptMngPage.vue
@@ -32,7 +32,7 @@
 						</v-col>
 						<v-col :cols="3">
 							<!-- 대상일 -->
-							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3"  />
+							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" customClass="datepicker-large"  />
 						</v-col>
 						<v-col :cols="6" class="text-right d-flex align-end justify-end align-self-end">
 							<!-- 조회버튼 -->
diff --git a/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue b/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
index 5416a1d..cb0f8a5 100644
--- a/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
+++ b/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
@@ -97,7 +97,7 @@
     </v-row>
     <v-row ref="contents" style="height: calc(100vh - 230px)">
       <v-col :cols="12" style="height: 100%">
-        <v-row class="pa-1" style="height: 37%; width: 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-title
@@ -117,7 +117,7 @@
                   v-for="(value, key, index) in contentData01"
                   :key="'key1' + index"
                 >
-                  <v-card>
+                  <v-card style="position: relative; overflow: hidden;" >
                     <!-- Card header -->
                     <div
                       style="
@@ -133,23 +133,9 @@
                     <v-card-title style="padding-left: 10px">{{
                       value["gdIdxNm"]
                     }}</v-card-title>
-                    <div class="v-box" style="height: 80%; padding: 3px; margin: 2px">
-                      <v-col :cols="12" style="height: 100%">
-                        <!-- <div style="height: 20%">
-                          <div
-                            style="
-                              position: absolute;
-                              left: 0;
-                              top: 10px;
-                              width: 4px;
-                              height: 50px;
-                              background-color: #91caff;
-                              border-radius: 2px;
-                            "
-                          ></div>
-                          <v-card-title>{{ value["gdIdxNm"] }}</v-card-title>
-                        </div> -->
-                        <div style="height: 95%">
+                    <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"
@@ -166,7 +152,7 @@
             </div>
           </div>
         </v-row>
-        <v-row class="pa-1" style="height: 33%; width: 100%">
+        <v-row class="pa-1" style="height: 40%; 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">
@@ -746,10 +732,12 @@ export default {
 					{
             type: "line",
 						data: seriesData,
-            symbol: "none",
             itemStyle: {
               color: "#D32029",
             },
+            // symbol: "circle",
+            showSymbol: true,
+            connectNulls: true,
           },
           // {
           //   type: "line",
diff --git a/pages/ems/effc/EnrgUseTotSummPage.vue b/pages/ems/effc/EnrgUseTotSummPage.vue
index a8b0860..405cc53 100644
--- a/pages/ems/effc/EnrgUseTotSummPage.vue
+++ b/pages/ems/effc/EnrgUseTotSummPage.vue
@@ -24,6 +24,7 @@
                 :is="'DatePicker'"
                 :label="'대상연월'"
                 :parentPrgmId="myPrgmId"
+                :customClass="'datepicker-large'"
               />
             </v-col>
             <v-col :cols="3"> </v-col>
@@ -429,9 +430,6 @@ export default {
       var chartKey = null;
       var chartOption = null;
 
-      console.log("data key:", dataKeyList);
-      console.log("data test:", data);
-
       for (var i = 0; i < dataKeyList.length; i++) {
         for (var j = 0; j < data[dataKeyList[i]].chartData.length; j++) {
           currentChartData = data[dataKeyList[i]].chartData[j];
diff --git a/pages/ems/effc/EqpmIndMntrPage.vue b/pages/ems/effc/EqpmIndMntrPage.vue
index 1b18b7e..067f144 100644
--- a/pages/ems/effc/EqpmIndMntrPage.vue
+++ b/pages/ems/effc/EqpmIndMntrPage.vue
@@ -71,6 +71,7 @@
                 :label="'대상년월'"
                 :parentPrgmId="myPrgmId"
                 :isRangeOption="false"
+                :customClass="'datepicker-large'"
               />
             </v-col>
             <v-col :cols="6"> </v-col>
diff --git a/pages/ems/effc/TagTrndPage.vue b/pages/ems/effc/TagTrndPage.vue
index c0cd56a..ed7e0a6 100644
--- a/pages/ems/effc/TagTrndPage.vue
+++ b/pages/ems/effc/TagTrndPage.vue
@@ -1,37 +1,37 @@
 <template>
-	<div ref="mainDiv" class="l-layout">
-    <PageTitle text="데이터 TREND" />
-		<v-row ref="searchFilter">
-			<v-col :cols="12">
-				<v-card class="searchFilter">
-					<v-row align="center" no-gutters>
-						<v-col :cols="6">
-							<DatepickerTimeSelectBox
-								:parentPrgmId="myPrgmId"
-								:label="'기간'"
+  <div ref="mainDiv" class="l-layout">
+    <CommonPageTitle />
+    <v-row ref="searchFilter">
+      <v-col :cols="12">
+        <v-card class="searchFilter">
+          <v-row align="center" no-gutters>
+            <v-col :cols="6">
+              <DatepickerTimeSelectBox
+                :parentPrgmId="myPrgmId"
+                :label="'기간'"
                 :labelCols="12"
                 :textCols="8"
                 :iconShow="true"
-								:selectFromDtUntilTodayFg="true"
-								:selectToDtUntilTodayFg="true"
-								:selectBoxTimeItemList="selectBoxTimeItemList"
-							/>
-						</v-col>
+                :selectFromDtUntilTodayFg="true"
+                :selectToDtUntilTodayFg="true"
+                :selectBoxTimeItemList="selectBoxTimeItemList"
+              />
+            </v-col>
             <v-col :cols="2" style="padding: 0px">
               <div style="height: 30px"></div>
-							<CheckBoxLabelChange
-								:parentPrgmId="myPrgmId"
-								:label="'RawData'"
-								valueNm="useFg"
-								:icon="false"
-								:required="true"
-								:location="'rear'"
-								:textCols="1"
-								:labelCols="2"
-								:disabledCheckOption="'chkEqualDayHourFg'"
+              <CheckBoxLabelChange
+                :parentPrgmId="myPrgmId"
+                :label="'RawData'"
+                valueNm="useFg"
+                :icon="false"
+                :required="true"
+                :location="'rear'"
+                :textCols="1"
+                :labelCols="2"
+                :disabledCheckOption="'chkEqualDayHourFg'"
                 :isDarkMode="isDarkMode"
-							/>
-						</v-col>
+              />
+            </v-col>
             <v-col :cols="4" class="text-right">
               <div style="height: 30px"></div>
 
@@ -64,21 +64,21 @@
                 @click="search"
                 >조회</a-button
               >
-						</v-col>
-					</v-row>
-				</v-card>
-			</v-col>
-		</v-row>
-		<v-row ref="contents">
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-row ref="contents">
       <v-col :cols="12" style="height: 100%; padding: 0px">
-				<!-- <v-card class="pb-5"> -->
+        <!-- <v-card class="pb-5"> -->
         <v-col :cols="12" style="height: 300px">
-					<v-card class="pb-5 px-2">
-						<div class="d-flex align-center justify-space-between pa-4">
-							<v-col :cols="3" style="height: 100%">
+          <v-card class="pb-5 px-2">
+            <div class="d-flex align-center justify-space-between pa-4">
+              <v-col :cols="3" style="height: 100%">
                 <v-card-title class="pa-0 custom-title-4">TAG 리스트</v-card-title>
-							</v-col>
-							<v-col :cols="3" style="height: 100%" class="text-right">
+              </v-col>
+              <v-col :cols="3" style="height: 100%" class="text-right">
                 <!-- <v-btn :ripple="false" @click="btnActions('add')">TAG 추가</v-btn>
                 <v-btn :ripple="false" @click="btnActions('remove')">TAG 삭제</v-btn
                 > -->
@@ -87,55 +87,55 @@
                 >
                 <a-button class="basic-button" @click="btnActions('remove')"
                   >TAG 삭제</a-button
-								>
-								<component
-									ref="TagTrndTagPop"
-									:is="'TagTrndTagPop'"
-									:label="'test'"
-									:parentPrgmId="myPrgmId"
-									@gridEditingFinish="gridEditingFinish"
-									@closePopEvent="closePopEvent"
-								/>
-							</v-col>
-						</div>
+                >
+                <component
+                  ref="TagTrndTagPop"
+                  :is="'TagTrndTagPop'"
+                  :label="'test'"
+                  :parentPrgmId="myPrgmId"
+                  @gridEditingFinish="gridEditingFinish"
+                  @closePopEvent="closePopEvent"
+                />
+              </v-col>
+            </div>
             <div class="h100 px-5" style="height: calc(100% - 70px)">
-							<div ref="gridParent" class="w100 h100">
-								<component
-									:ref="gridName"
-									class="tagTrndGrid"
-									:is="loadGrid ? 'Grid' : null"
-									:gridName="gridName"
-									:parentPrgmId="myPrgmId"
-									@getRowsData="getRowData"
-								/>
-							</div>
-						</div>
-					</v-card>
-				</v-col>
-				<v-col
-					v-show="!dumyChartFg"
-					:cols="12"
-					v-for="(item, index) in tagList"
-					:key="'key_' + index"
-					style="height: 65%"
-				>
-					<v-card class="pb-5 px-2">
-						<div class="d-flex align-center justify-space-between">
+              <div ref="gridParent" class="w100 h100">
+                <component
+                  :ref="gridName"
+                  class="tagTrndGrid"
+                  :is="loadGrid ? 'Grid' : null"
+                  :gridName="gridName"
+                  :parentPrgmId="myPrgmId"
+                  @getRowsData="getRowData"
+                />
+              </div>
+            </div>
+          </v-card>
+        </v-col>
+        <v-col
+          v-show="!dumyChartFg"
+          :cols="12"
+          v-for="(item, index) in tagList"
+          :key="'key_' + index"
+          style="height: 65%"
+        >
+          <v-card class="pb-5 px-2">
+            <div class="d-flex align-center justify-space-between">
               <v-card-title class="d-flex align-center justify-space-between pa-5">{{
                 item
               }}</v-card-title>
-						</div>
-						<div :ref="'chartParent' + index" style="height: 90%">
-							<component
-								class="w100 h100"
-								:is="loadChart ? 'Chart' : null"
-								:parentPrgmId="myPrgmId"
-								:chartName="chartNameList[index]"
-								:ref="chartNameList[index]"
-							/>
-						</div>
+            </div>
+            <div :ref="'chartParent' + index" style="height: 90%">
+              <component
+                class="w100 h100"
+                :is="loadChart ? 'Chart' : null"
+                :parentPrgmId="myPrgmId"
+                :chartName="chartNameList[index]"
+                :ref="chartNameList[index]"
+              />
+            </div>
 
-						<!-- <div class="d-flex align-center justify-space-between">
+            <!-- <div class="d-flex align-center justify-space-between">
 							<v-card-title class="pa-0">{{'test'}}</v-card-title>
 						</div>
 						<div :ref="'chartParent'" style="height: 75%">
@@ -147,31 +147,31 @@
 								:ref="chartName"
 							/>
 						</div> -->
-					</v-card>
-				</v-col>
+          </v-card>
+        </v-col>
         <v-col v-show="dumyChartFg" :cols="12" style="height: 60%">
-					<v-card class="pb-5 px-2">
-						<div class="d-flex align-center justify-space-between">
+          <v-card class="pb-5 px-2">
+            <div class="d-flex align-center justify-space-between">
               <v-card-title class="d-flex align-center justify-space-between pa-5">{{
                 "ICHEON.HVAC.EQP_HT_CH004.UT_HT_CH201.CHI_AMP_1A_PV"
               }}</v-card-title>
-						</div>
+            </div>
             <div :ref="'chartParent' + 0" style="height: 100%; overflow: visible">
-							<component
+              <component
                 style="margin-top: -45px; width: 100%; height: 450px"
-								class="w100 h100"
-								:is="'Chart'"
-								:parentPrgmId="myPrgmId"
-								:chartName="chartNameList[0]"
-								:ref="chartNameList[0]"
-							/>
-						</div>
-					</v-card>
-				</v-col>
-				<!-- </v-card> -->
-			</v-col>
-		</v-row>
-	</div>
+                class="w100 h100"
+                :is="'Chart'"
+                :parentPrgmId="myPrgmId"
+                :chartName="chartNameList[0]"
+                :ref="chartNameList[0]"
+              />
+            </div>
+          </v-card>
+        </v-col>
+        <!-- </v-card> -->
+      </v-col>
+    </v-row>
+  </div>
 </template>
 
 <script>
@@ -188,297 +188,295 @@ import Grid from "~/components/common/Grid";
 import TagTrndTagPop from "~/components/common/modal/TagTrndTagPop";
 import Chart from "~/components/common/Chart";
 import XLSX from "xlsx";
-import PageTitle from "~/components/common/PageTitle";
 
 let myTitle;
 let myPrgmId;
 
 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: {
-		DatepickerTimeSelectBox,
-		Utility,
-		CheckBoxLabelChange,
-		BtnSearch,
-		BtnExcelDownload,
-		Grid,
-		TagTrndTagPop,
-		Chart,
-    PageTitle,
-	},
-	data() {
-		return {
-			myPrgmId: myPrgmId,
-			initedFlag: false,
-			selectBoxTimeItemList: {
+    myTitle = await myState.activeMenuInfo.menuNm;
+  },
+  meta: {
+    title: () => {
+      return myTitle;
+    },
+    prgmId: myPrgmId,
+    closable: true,
+  },
+  components: {
+    DatepickerTimeSelectBox,
+    Utility,
+    CheckBoxLabelChange,
+    BtnSearch,
+    BtnExcelDownload,
+    Grid,
+    TagTrndTagPop,
+    Chart,
+  },
+  data() {
+    return {
+      myPrgmId: myPrgmId,
+      initedFlag: false,
+      selectBoxTimeItemList: {
         selectTimeValue1: "00 : 00", // selectBoxTime에 필요한 prop
-				selectTimeValueList1: [], // selectBoxTime에 필요한 prop
+        selectTimeValueList1: [], // selectBoxTime에 필요한 prop
         selectTimeValue2: "00 : 00", // selectBoxTime에 필요한 prop
-				selectTimeValueList2: [], // selectBoxTime에 필요한 prop
-				minInterval: 10,
-			},
-			useFg: false,
+        selectTimeValueList2: [], // selectBoxTime에 필요한 prop
+        minInterval: 10,
+      },
+      useFg: false,
       gridName: "rowGrid",
-			loadGrid: false,
-			fromDt: Utility.setFormatDate(
-				new Date(new Date().setMonth(new Date().getMonth() - 1)),
+      loadGrid: false,
+      fromDt: Utility.setFormatDate(
+        new Date(new Date().setMonth(new Date().getMonth() - 1)),
         "YYYYMMDD"
-			),
+      ),
       toDt: Utility.setFormatDate(new Date(), "YYYYMMDD"),
       today: Utility.setFormatDate(new Date(), "YYYYMMDD"),
       currentPagePath: "",
-			loadChartList: [false, false, false, false, false],
+      loadChartList: [false, false, false, false, false],
       chartNameList: ["chart01", "chart02", "chart03", "chart04", "chart05"],
-			tagList: [],
-			loadChart: false,
-			dumyChartFg: true,
-			// chartName: 'chart01'
-		};
-	},
-	computed: {
-		chkIsFind() {
-			// 조회 플래그
-			return this.pageData.isFind;
-		},
-		chkFromDt() {
-			return this.pageData.fromDt;
-		},
-		chkToDt() {
-			return this.pageData.toDt;
-		},
-		chkSelectTimeValue1() {
-			return this.pageData.selectTimeValue1;
-		},
-		chkSelectTimeValue2() {
-			return this.pageData.selectTimeValue2;
-		},
-		chkUseFg() {
-			return this.pageData.useFg;
-		},
-		chkTagList() {
-			return this.pageData.tagList;
-		},
+      tagList: [],
+      loadChart: false,
+      dumyChartFg: true,
+      // chartName: 'chart01'
+    };
+  },
+  computed: {
+    chkIsFind() {
+      // 조회 플래그
+      return this.pageData.isFind;
+    },
+    chkFromDt() {
+      return this.pageData.fromDt;
+    },
+    chkToDt() {
+      return this.pageData.toDt;
+    },
+    chkSelectTimeValue1() {
+      return this.pageData.selectTimeValue1;
+    },
+    chkSelectTimeValue2() {
+      return this.pageData.selectTimeValue2;
+    },
+    chkUseFg() {
+      return this.pageData.useFg;
+    },
+    chkTagList() {
+      return this.pageData.tagList;
+    },
     ...mapState({
       isDarkMode: "isDarkMode",
     }),
-	},
-	watch: {
-		chkFromDt(val) {
-			this.fromDt = val;
-			this.today;
+  },
+  watch: {
+    chkFromDt(val) {
+      this.fromDt = val;
+      this.today;
       let diff = DateUtility.diff(val, this.today, "day");
-			if (diff >= 0) {
-				this.setCheckBoxFg(val);
-			}
-		},
-		chkToDt(val) {
-			this.toDt = val;
-			this.today;
-			// 오늘 날짜 이상을 선택할 경우 -> 선택한 날짜 + 오늘 날짜로 2번 변경되어 선택한 날짜로 인해 메서드가 호출 되는 것을 방지
+      if (diff >= 0) {
+        this.setCheckBoxFg(val);
+      }
+    },
+    chkToDt(val) {
+      this.toDt = val;
+      this.today;
+      // 오늘 날짜 이상을 선택할 경우 -> 선택한 날짜 + 오늘 날짜로 2번 변경되어 선택한 날짜로 인해 메서드가 호출 되는 것을 방지
       let diff = DateUtility.diff(val, this.today, "day");
-			if (diff >= 0) {
-				this.setCheckBoxFg(val);
-			}
-		},
-		chkIsFind(val) {
-			// if (val) this.search();
-		},
-		chkSelectTimeValue1(val) {
-			this.selectBoxTimeItemList.selectTimeValue1 = val;
-			this.setCheckBoxFg(val);
-		},
-		chkSelectTimeValue2(val) {
-			this.selectBoxTimeItemList.selectTimeValue2 = val;
-			this.setCheckBoxFg(val);
-		},
-		chkUseFg(val) {
-			this.useFg = val;
-			// this.search();
+      if (diff >= 0) {
+        this.setCheckBoxFg(val);
+      }
+    },
+    chkIsFind(val) {
+      // if (val) this.search();
+    },
+    chkSelectTimeValue1(val) {
+      this.selectBoxTimeItemList.selectTimeValue1 = val;
+      this.setCheckBoxFg(val);
+    },
+    chkSelectTimeValue2(val) {
+      this.selectBoxTimeItemList.selectTimeValue2 = val;
+      this.setCheckBoxFg(val);
+    },
+    chkUseFg(val) {
+      this.useFg = val;
+      // this.search();
 
-			// if(this.fromDt+this.selectBoxTimeItemList.selectTimeValue1.slice(0, 2) == this.toDt+this.selectBoxTimeItemList.selectTimeValue2.slice(0, 2)){
-			// 	this.useFg = val;
-			// 	this.search();
-			// }else{
-			// 	alert('한 시간 이내일 경우만 선택할 수 있습니다.')
-			// }
-		},
-		chkTagList(val) {
-			// this.tagList = [...val];
-			// chkTagList는 이벤트 감지용 무조건 grid의 row개수로 확인하고 진행
-			let gridData = this.$refs[this.gridName].getData();
+      // if(this.fromDt+this.selectBoxTimeItemList.selectTimeValue1.slice(0, 2) == this.toDt+this.selectBoxTimeItemList.selectTimeValue2.slice(0, 2)){
+      // 	this.useFg = val;
+      // 	this.search();
+      // }else{
+      // 	alert('한 시간 이내일 경우만 선택할 수 있습니다.')
+      // }
+    },
+    chkTagList(val) {
+      // this.tagList = [...val];
+      // chkTagList는 이벤트 감지용 무조건 grid의 row개수로 확인하고 진행
+      let gridData = this.$refs[this.gridName].getData();
       let tagList = gridData.map((item) => {
-				return item.tagId;
-			});
-			this.tagList = tagList;
-			if (this.tagList.length == 0) {
-				this.dumyChartFg = true;
-			} else {
-				this.dumyChartFg = false;
-			}
-			if (this.initedFlag && this.tagList.length > 0) {
-				this.search();
-			}
-		},
-	},
-	async beforeCreate() {
-		myPrgmId = this.$route.query.prgmId;
+        return item.tagId;
+      });
+      this.tagList = tagList;
+      if (this.tagList.length == 0) {
+        this.dumyChartFg = true;
+      } else {
+        this.dumyChartFg = false;
+      }
+      if (this.initedFlag && this.tagList.length > 0) {
+        this.search();
+      }
+    },
+  },
+  async beforeCreate() {
+    myPrgmId = this.$route.query.prgmId;
     await this.$store.dispatch("chkOpenTabList", {
       key: "create",
-			prgmId: myPrgmId,
-			defaultData: defaultData,
-		});
-	},
-	created() {},
-	async mounted() {
-		this.currentPagePath = this.$router.currentRoute.fullPath;
-		await this.init();
-		let gridData = this.$refs[this.gridName].getData();
+      prgmId: myPrgmId,
+      defaultData: defaultData,
+    });
+  },
+  created() {},
+  async mounted() {
+    this.currentPagePath = this.$router.currentRoute.fullPath;
+    await this.init();
+    let gridData = this.$refs[this.gridName].getData();
     let tagList = gridData.map((item) => {
-			return item.tagId;
-		});
-		this.tagList = tagList;
-		this.setPageData({
-			tagList: tagList,
-		});
-		this.initedFlag = true;
-	},
-	beforeDestroy() {
-		// await this.setChartNull();
-		// for(var i=0; i<this.pageData.tagList; i++){
+      return item.tagId;
+    });
+    this.tagList = tagList;
+    this.setPageData({
+      tagList: tagList,
+    });
+    this.initedFlag = true;
+  },
+  beforeDestroy() {
+    // await this.setChartNull();
+    // for(var i=0; i<this.pageData.tagList; i++){
 
-		// 	// this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['xAxis'] =
+    // 	// this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['xAxis'] =
 
-		// 	Object.assign(
-		// 		this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['xAxis'],
-		// 		[
-		// 			{
-		// 				data: [],
-		// 				axisLabel: { interval: 0, rotate: 30 }
-		// 			}
-		// 		]
-		// 	);
+    // 	Object.assign(
+    // 		this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['xAxis'],
+    // 		[
+    // 			{
+    // 				data: [],
+    // 				axisLabel: { interval: 0, rotate: 30 }
+    // 			}
+    // 		]
+    // 	);
 
-		// 	Object.assign(
-		// 		this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['series'],
-		// 		[]
-		// 	);
-		// 	Object.assign(
-		// 		this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['legend'],
-		// 		{
-		// 			top: 'top',
-		// 			left: 'center',
-		// 			data: [],
-		// 			textStyle: {
-		// 				color: '#95A0A9',
-		// 				fontSize: 10,
-		// 			}
-		// 		}
-		// 	);
-		// 	// this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['legend'] =
+    // 	Object.assign(
+    // 		this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['series'],
+    // 		[]
+    // 	);
+    // 	Object.assign(
+    // 		this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['legend'],
+    // 		{
+    // 			top: 'top',
+    // 			left: 'center',
+    // 			data: [],
+    // 			textStyle: {
+    // 				color: '#95A0A9',
+    // 				fontSize: 10,
+    // 			}
+    // 		}
+    // 	);
+    // 	// this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['legend'] =
 
-		// }
+    // }
     this.chkOpenTabList({ key: "destroy", prgmId: myPrgmId });
-	},
-	methods: {
-		...mapMutations({
+  },
+  methods: {
+    ...mapMutations({
       setChartOption: "setChartOption",
       setChartYAxisData: "setChartYAxisData",
       setChartDetailXAxisData: "setChartDetailXAxisData",
       setChartSeries: "setChartSeries",
       setPageData: "setPageData",
-		}),
-		...mapActions({
+    }),
+    ...mapActions({
       getCodeList: "modules/search/getCodeList",
       getBlocMstrList: "modules/search/getBlocMstrList",
       getAddInfoList: "modules/search/getAddInfoList",
-		}),
-		async init() {
-			this.setPageData({
-				rowGridSelectKey: 0,
-				rowGridSelectData: null,
-			});
-			this.gridInit();
-			this.setChartNull();
-		},
-		async search() {
-			// search가 2번 타는 경우:
-			// 1. fromDt: 2022-11-01 00:20 / toDt: 2022-12-09 00:00(오늘 날짜)
-			// 2. fromDt를 오늘날짜로 변경 시 date 변경에 의한 search + 00:20 -> 00:00으로 변경되어 search
-			if (this.tagList.length > 0) {
-				await this.getTagData();
-			} else {
+    }),
+    async init() {
+      this.setPageData({
+        rowGridSelectKey: 0,
+        rowGridSelectData: null,
+      });
+      this.gridInit();
+      this.setChartNull();
+    },
+    async search() {
+      // search가 2번 타는 경우:
+      // 1. fromDt: 2022-11-01 00:20 / toDt: 2022-12-09 00:00(오늘 날짜)
+      // 2. fromDt를 오늘날짜로 변경 시 date 변경에 의한 search + 00:20 -> 00:00으로 변경되어 search
+      if (this.tagList.length > 0) {
+        await this.getTagData();
+      } else {
         alert("TAG를 선택해주세요.");
-			}
+      }
 
-			this.setPageData({
-				isFind: false,
-			});
-		},
-		setCheckBoxFg(val) {
-			let selectTimeValueList1 = this.selectBoxTimeItemList.selectTimeValueList1.map(
+      this.setPageData({
+        isFind: false,
+      });
+    },
+    setCheckBoxFg(val) {
+      let selectTimeValueList1 = this.selectBoxTimeItemList.selectTimeValueList1.map(
         (item) => {
-					return item.value;
+          return item.value;
         }
-			);
-			let selectTimeValueList2 = this.selectBoxTimeItemList.selectTimeValueList2.map(
+      );
+      let selectTimeValueList2 = this.selectBoxTimeItemList.selectTimeValueList2.map(
         (item) => {
-					return item.value;
+          return item.value;
         }
-			);
-			let timeValueIndex1 = selectTimeValueList1.indexOf(
+      );
+      let timeValueIndex1 = selectTimeValueList1.indexOf(
         this.selectBoxTimeItemList.selectTimeValue1
-			);
-			let timeValueIndex2 = selectTimeValueList2.indexOf(
+      );
+      let timeValueIndex2 = selectTimeValueList2.indexOf(
         this.selectBoxTimeItemList.selectTimeValue2
-			);
-			if (this.fromDt == this.toDt && timeValueIndex2 - timeValueIndex1 <= 6) {
-				this.setPageData({
-					chkEqualDayHourFg: false,
-				});
-			} else {
-				this.setPageData({
-					chkEqualDayHourFg: true,
-					useFg: false,
-				});
-			}
-		},
-		gridInit() {
-			const gridHeight = this.$refs.gridParent.offsetHeight - 30;
-			const myOptions = {
-				columnOptions: {
-					resizable: true,
-				},
+      );
+      if (this.fromDt == this.toDt && timeValueIndex2 - timeValueIndex1 <= 6) {
+        this.setPageData({
+          chkEqualDayHourFg: false,
+        });
+      } else {
+        this.setPageData({
+          chkEqualDayHourFg: true,
+          useFg: false,
+        });
+      }
+    },
+    gridInit() {
+      const gridHeight = this.$refs.gridParent.offsetHeight - 30;
+      const myOptions = {
+        columnOptions: {
+          resizable: true,
+        },
         header: {
           height: 38,
         },
-			};
-			this.setGridOption({
-				gridKey: this.gridName,
-				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
-			});
-			const _this = this;
-			const myColumns = [
-				// { header: '가이드ID', name: 'gdIdxId', align: 'center', hidden: true},
+      };
+      this.setGridOption({
+        gridKey: this.gridName,
+        value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
+      });
+      const _this = this;
+      const myColumns = [
+        // { header: '가이드ID', name: 'gdIdxId', align: 'center', hidden: true},
         { header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 150 },
-				{
+        {
           header: "설비그룹 ID",
           name: "eqpmGrpId",
           align: "center",
-					hidden: true,
-				},
+          hidden: true,
+        },
         { header: "설비ID", name: "eqpmId", align: "left", width: 200 },
         { header: "설비명", name: "eqpmNm", align: "left", width: 200 },
         { header: "TAG ID", name: "tagId", align: "left", width: 500 },
@@ -486,163 +484,143 @@ export default {
         { header: "rowStat", name: "rowStat", align: "center", hidden: true },
       ];
 
-      const newRes = [
-        {
-          eqpmGrpNm: "냉동기고온",
-          eqpmGrpId: "UT_HT_CH201",
-          eqpmId: "UT_HT_CH201",
-          eqpmNm: "UT_HT_CH201",
-          tagId: "ICHEON.HVAC.EQP_HT_CH004.UT_HT_CH201.CHI_AMP_1A_PV",
-          tagNm: "ICHEON 고온 냉동기 201호기 - 회로1 전류A",
-          // rowStat: "I",
-        },
-        {
-          eqpmGrpNm: "냉동기고온",
-          eqpmGrpId: "UT_HT_CH201",
-          eqpmId: "UT_HT_CH201",
-          eqpmNm: "UT_HT_CH201",
-          tagId: "ICHEON.HVAC.EQP_HT_CH004.UT_HT_CH201.CHI_AMP_1A_PV",
-          tagNm: "ICHEON 고온 냉동기 201호기 - 회로1 전류A",
-          // rowStat: "I",
-        },
-			];
-			this.setGridColumn({
-				gridKey: this.gridName,
-				value: myColumns,
-			});
-			this.loadGrid = true;
-		},
-		getRowData(data) {
-			this.setPageData({
-				rowGridSelectKey: data.rowKey,
-				rowGridSelectData: data,
-			});
-		},
-		async btnActions(action) {
-			switch (action) {
+      this.setGridColumn({
+        gridKey: this.gridName,
+        value: myColumns,
+      });
+      this.loadGrid = true;
+    },
+    getRowData(data) {
+      this.setPageData({
+        rowGridSelectKey: data.rowKey,
+        rowGridSelectData: data,
+      });
+    },
+    async btnActions(action) {
+      switch (action) {
         case "add" /*  */:
-					// if(this.pageData.totalSelectedTags.split('/*wq2a/').length>5){
-					if (this.tagList.length >= 5) {
+          // if(this.pageData.totalSelectedTags.split('/*wq2a/').length>5){
+          if (this.tagList.length >= 5) {
             alert("TAG는 최대 5개까지 선택 가능합니다.");
-					} else {
-						const defaultRow = {
-							eqpmGrpNm: null,
-							eqpmGrpId: null,
-							eqpmId: null,
-							eqpmNm: null,
-							tagId: null,
-							tagNm: null,
+          } else {
+            const defaultRow = {
+              eqpmGrpNm: null,
+              eqpmGrpId: null,
+              eqpmId: null,
+              eqpmNm: null,
+              tagId: null,
+              tagNm: null,
               rowStat: "I",
-						};
-						// 바인딩할 row 추가
-						this.$refs[this.gridName].addRow(defaultRow);
+            };
+            // 바인딩할 row 추가
+            this.$refs[this.gridName].addRow(defaultRow);
             this.$refs["TagTrndTagPop"].dialog = true;
-					}
-					break;
+          }
+          break;
 
         case "remove":
-					let nowGridData = [];
-					nowGridData = this.$refs[this.gridName].getData();
-					if (nowGridData.length <= 0) {
+          let nowGridData = [];
+          nowGridData = this.$refs[this.gridName].getData();
+          if (nowGridData.length <= 0) {
             alert("선택 된 태그가 없습니다.");
-					} else {
-						let tagList = [];
-						tagList = this.tagList;
-						let idx = tagList.indexOf(this.pageData.rowGridSelectData.tagId);
-						// 삭제한 태그에 해당되는 차트의 pageData의 series, xAxis data 초기화 시켜주기
+          } else {
+            let tagList = [];
+            tagList = this.tagList;
+            let idx = tagList.indexOf(this.pageData.rowGridSelectData.tagId);
+            // 삭제한 태그에 해당되는 차트의 pageData의 series, xAxis data 초기화 시켜주기
             this.$store.state.pageData[myPrgmId][this.chartNameList[idx]]["series"] = [];
             this.$store.state.pageData[myPrgmId][this.chartNameList[idx]]["xAxis"][0][
               "data"
-						] = [];
+            ] = [];
             if (
               this.$store.state.pageData[myPrgmId][this.chartNameList[idx]]["xAxis"]
                 .length > 1
-						) {
+            ) {
               this.$store.state.pageData[myPrgmId][this.chartNameList[idx]]["xAxis"][1][
                 "data"
               ] = [];
-						}
+            }
 
             let newTagList = tagList.filter((item) => {
-							return item != this.pageData.rowGridSelectData.tagId;
-						});
-						this.$refs[this.gridName].removeRow(
+              return item != this.pageData.rowGridSelectData.tagId;
+            });
+            this.$refs[this.gridName].removeRow(
               "immediately",
               this.pageData.rowGridSelectKey
-						);
-						this.setPageData({
-							// rowGridSelectData: null,
-							// totalSelectedTags: newTotalSelectedTags,
-							tagList: newTagList,
-						});
-						// let newTotalSelectedTags = this.pageData.totalSelectedTags.replace(this.pageData.rowGridSelectData.tagId+'/*wq2a/', '');
-						// 마지막 row 선택 되도록 하는 로직
-						let newGridData = [];
-						newGridData = this.$refs[this.gridName].getData();
-						if (newGridData.length > 0) {
-							this.getRowData(newGridData[newGridData.length - 1]);
-						}
-						// focus 안됨 나중에 생각
-						// this.$nextTick();
-						// this.setPageData({
-						// 	rowGridSelectData: newGridData[newGridData.length-1],
-						// 	rowGridSelectKey: newGridData[newGridData.length-1].rowKey,
-						// });
-						// console.log('nowGridData', newGridData);
-						// this.$nextTick(() => {
-						// 	// 안됨...
-						// 	if(newGridData.length>=0){
-						// 		this.$refs[this.gridName].focus({
-						// 			rowKey: newGridData.length-1,
-						// 			columnName: 'tagId',
-						// 			setScroll: true,
-						// 		});
-						// console.log('rowGridSelectData', this.pageData.rowGridSelectData);
-						// 	}
-						// });
-					}
-					break;
+            );
+            this.setPageData({
+              // rowGridSelectData: null,
+              // totalSelectedTags: newTotalSelectedTags,
+              tagList: newTagList,
+            });
+            // let newTotalSelectedTags = this.pageData.totalSelectedTags.replace(this.pageData.rowGridSelectData.tagId+'/*wq2a/', '');
+            // 마지막 row 선택 되도록 하는 로직
+            let newGridData = [];
+            newGridData = this.$refs[this.gridName].getData();
+            if (newGridData.length > 0) {
+              this.getRowData(newGridData[newGridData.length - 1]);
+            }
+            // focus 안됨 나중에 생각
+            // this.$nextTick();
+            // this.setPageData({
+            // 	rowGridSelectData: newGridData[newGridData.length-1],
+            // 	rowGridSelectKey: newGridData[newGridData.length-1].rowKey,
+            // });
+            // console.log('nowGridData', newGridData);
+            // this.$nextTick(() => {
+            // 	// 안됨...
+            // 	if(newGridData.length>=0){
+            // 		this.$refs[this.gridName].focus({
+            // 			rowKey: newGridData.length-1,
+            // 			columnName: 'tagId',
+            // 			setScroll: true,
+            // 		});
+            // console.log('rowGridSelectData', this.pageData.rowGridSelectData);
+            // 	}
+            // });
+          }
+          break;
 
-				default:
-					break;
-			}
-		},
-		gridEditingFinish(data) {
-			this.$refs[this.gridName].editingFinish(data);
-		},
-		async getTagData() {
-			let resDataDict = { tags: [] };
-			let rawResDataDict = { tags: [] };
-			let tagList = this.tagList;
-			for (var i = 0; i < tagList.length; i++) {
-				let sendParam = {};
-				let bodyMap = {};
+        default:
+          break;
+      }
+    },
+    gridEditingFinish(data) {
+      this.$refs[this.gridName].editingFinish(data);
+    },
+    async getTagData() {
+      let resDataDict = { tags: [] };
+      let rawResDataDict = { tags: [] };
+      let tagList = this.tagList;
+      for (var i = 0; i < tagList.length; i++) {
+        let sendParam = {};
+        let bodyMap = {};
         let url = "http://58.232.11.31:1567/RTDBweapi/";
-				// rawData인 경우
-				// if(this.useFg){
-				// 	sendParam['url'] = url + 'rawdata.do';
-				// 	bodyMap['interval'] = '1000';
-				// }else{
-				// 	sendParam['url'] = url + 'aggdata2.do';
-				// 	bodyMap['interval'] = '';
-				// 	bodyMap['term'] = 'MIN1';
-				// }
-				// let tempTagList = this.pageData.totalSelectedTags.split('/*wq2a/');
-				// let tagList = tempTagList.filter(item => item != '');
+        // rawData인 경우
+        // if(this.useFg){
+        // 	sendParam['url'] = url + 'rawdata.do';
+        // 	bodyMap['interval'] = '1000';
+        // }else{
+        // 	sendParam['url'] = url + 'aggdata2.do';
+        // 	bodyMap['interval'] = '';
+        // 	bodyMap['term'] = 'MIN1';
+        // }
+        // let tempTagList = this.pageData.totalSelectedTags.split('/*wq2a/');
+        // let tagList = tempTagList.filter(item => item != '');
         sendParam["url"] = url + "aggdata2.do";
         bodyMap["interval"] = "";
         bodyMap["term"] = "MIN1";
-				// let tagList = this.pageData.tagList;
+        // let tagList = this.pageData.tagList;
         bodyMap["tags"] = [tagList[i]];
-				// 데이터 없어서 이걸로 등록 - 시작
-				// bodyMap['tags'] = ["M16A_EQID001_U-CH-012_Pump_ATRD_010001_VAL_003_Y_01호기_냉수_유량_실측값", "SEOSAN_EQID002_U-CH-017_Innter Heater Jacket_ATRD_010003_VAL_059_Y_17호기_증발_냉매_포화_온도#_실측값"]
-				// bodyMap['tags'] = ["SEOSAN_EQID002_U-CH-017_Innter Heater Jacket_ATRD_010003_VAL_059_Y_17호기_증발_냉매_포화_온도#_실측값", "M16A_EQID001_U-CH-014_Chiller_ATRD_010002_VAL_018_Y_08호기_응축_냉매_포화_온도#_실측값", "M16A_EQID001_U-CH-012_Pump_ATRD_010001_VAL_008_Y_01호기_냉각탑_냉각수_공급온도_PV#_실측값"]
-				// 데이터 없어서 이걸로 등록 - 끝
+        // 데이터 없어서 이걸로 등록 - 시작
+        // bodyMap['tags'] = ["M16A_EQID001_U-CH-012_Pump_ATRD_010001_VAL_003_Y_01호기_냉수_유량_실측값", "SEOSAN_EQID002_U-CH-017_Innter Heater Jacket_ATRD_010003_VAL_059_Y_17호기_증발_냉매_포화_온도#_실측값"]
+        // bodyMap['tags'] = ["SEOSAN_EQID002_U-CH-017_Innter Heater Jacket_ATRD_010003_VAL_059_Y_17호기_증발_냉매_포화_온도#_실측값", "M16A_EQID001_U-CH-014_Chiller_ATRD_010002_VAL_018_Y_08호기_응축_냉매_포화_온도#_실측값", "M16A_EQID001_U-CH-012_Pump_ATRD_010001_VAL_008_Y_01호기_냉각탑_냉각수_공급온도_PV#_실측값"]
+        // 데이터 없어서 이걸로 등록 - 끝
         bodyMap["eterm"] =
           Utility.setFormatDate(this.toDt, "YYYY-MM-DD") +
           " " +
           this.pageData.selectTimeValue2.replaceAll(" ", "").slice(0, -1) +
-					1 +
+          1 +
           ":00";
         bodyMap["sterm"] =
           Utility.setFormatDate(this.fromDt, "YYYY-MM-DD") +
@@ -651,301 +629,301 @@ export default {
           ":00";
         let test = this.pageData.selectTimeValue1.replaceAll(" ", "").slice(0, -1) + 1;
         bodyMap["t"] = Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm:ss");
-				// bodyMap['t'] = "2022-07-25 10:00:00";
+        // bodyMap['t'] = "2022-07-25 10:00:00";
         sendParam["bodyMap"] = bodyMap;
-				let res = await this.postApiReturn({
+        let res = await this.postApiReturn({
           apiKey: "selectTagTrndData",
           resKey: "tagTrndDatas",
-					sendParam: sendParam,
-				});
-				if (res != null && res.length > 0) {
-					res = JSON.parse(res);
-					if (res.tags.length > 0) {
+          sendParam: sendParam,
+        });
+        if (res != null && res.length > 0) {
+          res = JSON.parse(res);
+          if (res.tags.length > 0) {
             resDataDict["tags"].push(res.tags[0]);
-					}
-				}
-				let resRawData = [];
-				if (this.useFg) {
-					let newStermDate = Utility.setFormatDate(
+          }
+        }
+        let resRawData = [];
+        if (this.useFg) {
+          let newStermDate = Utility.setFormatDate(
             Utility.setFormatDate(this.fromDt, "YYYY-MM-DD") +
               " " +
               this.pageData.selectTimeValue1.replaceAll(" ", "") +
               ":00",
             "YYYY-MM-DD HH:mm"
-					);
-					newStermDate = new Date(new Date(newStermDate).getTime() - 1000);
-					let sendParam2 = { ...sendParam };
+          );
+          newStermDate = new Date(new Date(newStermDate).getTime() - 1000);
+          let sendParam2 = { ...sendParam };
           sendParam2["url"] = url + "rawdata.do";
           sendParam2["bodyMap"]["interval"] = "1000";
           sendParam2["bodyMap"]["sterm"] = Utility.setFormatDate(
-						newStermDate,
+            newStermDate,
             "YYYY-MM-DD HH:mm:ss"
-					);
+          );
           sendParam2["bodyMap"]["eterm"] =
             Utility.setFormatDate(this.toDt, "YYYY-MM-DD") +
             " " +
             this.pageData.selectTimeValue2.replaceAll(" ", "") +
             ":01";
           delete sendParam2["bodyMap"]["term"];
-					resRawData = await this.postApiReturn({
+          resRawData = await this.postApiReturn({
             apiKey: "selectTagTrndData",
             resKey: "tagTrndDatas",
-						sendParam: sendParam2,
-					});
-					if (resRawData != null && resRawData.length > 0) {
-						resRawData = JSON.parse(resRawData);
-						if (resRawData.tags.length > 0) {
+            sendParam: sendParam2,
+          });
+          if (resRawData != null && resRawData.length > 0) {
+            resRawData = JSON.parse(resRawData);
+            if (resRawData.tags.length > 0) {
               rawResDataDict["tags"].push(resRawData.tags[0]);
-						}
-					}
-				}
-			}
-			if (resDataDict != null && resDataDict.tags.length != 0) {
-				await this.setChart(tagList, resDataDict, rawResDataDict);
-			} else {
-				this.setChartNull();
-			}
-		},
-		async setChart(tagList, data, rawData) {
-			this.loadChart = false;
-			let legendNameMapper = {
+            }
+          }
+        }
+      }
+      if (resDataDict != null && resDataDict.tags.length != 0) {
+        await this.setChart(tagList, resDataDict, rawResDataDict);
+      } else {
+        this.setChartNull();
+      }
+    },
+    async setChart(tagList, data, rawData) {
+      this.loadChart = false;
+      let legendNameMapper = {
         A: "AVG",
         S: "STDDEV",
-				// 'CNT': 'CNT',
-				// 'SUM' : 'SUM',
+        // 'CNT': 'CNT',
+        // 'SUM' : 'SUM',
         M: "MAX",
         N: "MIN",
         v: "RAWDATA",
-			};
-			let chartDataDict = {};
-			for (var i = 0; i < tagList.length; i++) {
-				chartDataDict[tagList[i]] = {
-					xAxisList: [],
-					seriesData: [],
-					legendList: [],
-				};
-			}
+      };
+      let chartDataDict = {};
+      for (var i = 0; i < tagList.length; i++) {
+        chartDataDict[tagList[i]] = {
+          xAxisList: [],
+          seriesData: [],
+          legendList: [],
+        };
+      }
 
-			for (var i = 0; i < tagList.length; i++) {
-				//data chart data 구성하기
-				let dataTagTitle = data.tags[i].tag;
-				let xAxisData1 = []; // data의 x축 data 초기화 꼭 해줄 것
-				let seriesData = [];
-				let seriesDataDict = {};
-				let keys = [];
-				let legendData = [];
+      for (var i = 0; i < tagList.length; i++) {
+        //data chart data 구성하기
+        let dataTagTitle = data.tags[i].tag;
+        let xAxisData1 = []; // data의 x축 data 초기화 꼭 해줄 것
+        let seriesData = [];
+        let seriesDataDict = {};
+        let keys = [];
+        let legendData = [];
         if (data.tags[i] != undefined && data.tags[i]["d"].length > 0) {
           for (var j = 0; j < data.tags[i]["d"].length; j++) {
             xAxisData1.push(data.tags[i]["d"][j].t);
             keys = Object.keys(data.tags[i]["d"][j]);
-						for (var idx in keys) {
-							if (seriesDataDict[keys[idx]] == undefined) {
-								seriesDataDict[keys[idx]] = [];
-							}
-							// 가져오는 모든 데이터 넣기
+            for (var idx in keys) {
+              if (seriesDataDict[keys[idx]] == undefined) {
+                seriesDataDict[keys[idx]] = [];
+              }
+              // 가져오는 모든 데이터 넣기
               seriesDataDict[keys[idx]].push(data.tags[i]["d"][j][keys[idx]]);
-						}
-					}
-				} else {
-					keys = Object.keys(legendNameMapper);
-					for (var idx in keys) {
-						seriesDataDict[keys[idx]] = [];
-					}
-				}
-				for (var idx in keys) {
+            }
+          }
+        } else {
+          keys = Object.keys(legendNameMapper);
+          for (var idx in keys) {
+            seriesDataDict[keys[idx]] = [];
+          }
+        }
+        for (var idx in keys) {
           if (legendNameMapper[keys[idx]] == "SUM") {
-						seriesData.push({
-							name: legendNameMapper[keys[idx]],
+            seriesData.push({
+              name: legendNameMapper[keys[idx]],
               type: "line",
-							data: seriesDataDict[keys[idx]],
-							xAxisIndex: 0,
-							connectNulls: true,
-						});
+              data: seriesDataDict[keys[idx]],
+              xAxisIndex: 0,
+              connectNulls: true,
+            });
             // legendData.push(legendNameMapper[keys[idx]]);
 
             legendData.push({
               name: legendNameMapper[keys[idx]],
               icon: "circle",
             });
-					} else if (legendNameMapper[keys[idx]] != undefined) {
-						seriesData.push({
-							name: legendNameMapper[keys[idx]],
+          } else if (legendNameMapper[keys[idx]] != undefined) {
+            seriesData.push({
+              name: legendNameMapper[keys[idx]],
               type: "line",
-							data: seriesDataDict[keys[idx]],
-							xAxisIndex: 0,
-							connectNulls: true,
-						});
+              data: seriesDataDict[keys[idx]],
+              xAxisIndex: 0,
+              connectNulls: true,
+            });
             // legendData.push(legendNameMapper[keys[idx]]);
 
             legendData.push({
               name: legendNameMapper[keys[idx]],
               icon: "circle",
             });
-					}
-				}
+          }
+        }
 
-				// data xAxisData1 추가
-				// if(rawData.tags.length == 0 || !this.useFg){
+        // data xAxisData1 추가
+        // if(rawData.tags.length == 0 || !this.useFg){
         chartDataDict[dataTagTitle]["xAxisList"].push({
-					data: xAxisData1,
-					axisLabel: { rotate: 40 },
-					// axisLabel: { interval: 0, rotate: 40 },
-					// axisTick : {interval : 1},
-					boundaryGap: false,
-					offset: true,
-					show: !this.useFg,
-				});
-				// }
+          data: xAxisData1,
+          axisLabel: { rotate: 40 },
+          // axisLabel: { interval: 0, rotate: 40 },
+          // axisTick : {interval : 1},
+          boundaryGap: false,
+          offset: true,
+          show: !this.useFg,
+        });
+        // }
 
-				// data SeriesData 추가
+        // data SeriesData 추가
         chartDataDict[dataTagTitle]["seriesData"] = seriesData;
-				// data legend 추가
+        // data legend 추가
         chartDataDict[dataTagTitle]["legendList"] = legendData;
-				//
-				//rawData chart data 구성하기
+        //
+        //rawData chart data 구성하기
         let rawDataTagTitle = "";
-				let xAxisData2 = []; // rawData의 x축 data 초기화 꼭 해줄 것
-				let rawDataSeriesData = [];
-				if (
-					this.useFg == true &&
-					rawData.tags.length > 0 &&
-					rawData.tags[i] != undefined
-				) {
-					rawDataTagTitle = rawData.tags[i].tag;
-					// rawData xAxisData2 추가
+        let xAxisData2 = []; // rawData의 x축 data 초기화 꼭 해줄 것
+        let rawDataSeriesData = [];
+        if (
+          this.useFg == true &&
+          rawData.tags.length > 0 &&
+          rawData.tags[i] != undefined
+        ) {
+          rawDataTagTitle = rawData.tags[i].tag;
+          // rawData xAxisData2 추가
           chartDataDict[rawDataTagTitle]["xAxisList"].push({
-						data: xAxisData2,
-						boundaryGap: false,
+            data: xAxisData2,
+            boundaryGap: false,
             position: "bottom",
-						// axisLabel: { interval: 0, rotate: 40 },
-						axisLabel: { rotate: 40 },
-					});
+            // axisLabel: { interval: 0, rotate: 40 },
+            axisLabel: { rotate: 40 },
+          });
           if (rawData.tags[i]["d"].length > 0) {
             for (var j = 0; j < rawData.tags[i]["d"].length; j++) {
               xAxisData2.push(rawData.tags[i]["d"][j].t);
               if (rawData.tags[i]["d"][j]["v"] != undefined) {
                 rawDataSeriesData.push(rawData.tags[i]["d"][j]["v"]);
-							} else {
-								// null값 처리
-								rawDataSeriesData.push(NaN);
-							}
-						}
-					}
-					// rawData SeriesData 추가
+              } else {
+                // null값 처리
+                rawDataSeriesData.push(NaN);
+              }
+            }
+          }
+          // rawData SeriesData 추가
           chartDataDict[rawDataTagTitle]["seriesData"].push({
             name: legendNameMapper["v"],
             type: "line",
-						data: rawDataSeriesData,
-						xAxisIndex: 1,
-						connectNulls: true,
-					});
-					// rawData legend 추가
+            data: rawDataSeriesData,
+            xAxisIndex: 1,
+            connectNulls: true,
+          });
+          // rawData legend 추가
           chartDataDict[rawDataTagTitle]["legendList"].push(legendNameMapper["v"]);
-				}
-				let option = {
-					legend: {
+        }
+        let option = {
+          legend: {
             top: "top",
             data: chartDataDict[tagList[i]]["legendList"],
             left: "center",
-						textStyle: {
+            textStyle: {
               color: "#95A0A9",
-							fontSize: 10,
-						},
-					},
-					grid: {
+              fontSize: 10,
+            },
+          },
+          grid: {
             left: "5%",
             right: "5%",
-						// bottom: '3%',
-						containLabel: true,
+            // bottom: '3%',
+            containLabel: true,
             top: "5%",
             bottom: "13%",
-					},
-					toolbox: {
-						feature: {
-							saveAsImage: {},
-						},
-					},
-					// xAxis: this.useFg ==true ? chartDataDict[tagList[i]]['xAxisList'][1] : chartDataDict[tagList[i]]['xAxisList'][0],
-					// xAxis: chartDataDict[tagList[i]]['xAxisList'][0],
+          },
+          toolbox: {
+            feature: {
+              saveAsImage: {},
+            },
+          },
+          // xAxis: this.useFg ==true ? chartDataDict[tagList[i]]['xAxisList'][1] : chartDataDict[tagList[i]]['xAxisList'][0],
+          // xAxis: chartDataDict[tagList[i]]['xAxisList'][0],
           xAxis: chartDataDict[tagList[i]]["xAxisList"],
-					dataZoom: [
-						{
-							show: true,
-							realtime: true,
-							start: 0,
-							end:
+          dataZoom: [
+            {
+              show: true,
+              realtime: true,
+              start: 0,
+              end:
                 chartDataDict[tagList[i]]["xAxisList"][1] != undefined
                   ? (30 / chartDataDict[tagList[i]]["xAxisList"][1]["data"].length) * 100
                   : chartDataDict[tagList[i]]["xAxisList"][0]["data"].length > 30
                   ? (30 / chartDataDict[tagList[i]]["xAxisList"][0]["data"].length) * 100
-									: 100,
-						},
-						{
+                  : 100,
+            },
+            {
               type: "inside",
-							realtime: true,
-							start: 65,
-							end: 85,
-						},
-					],
-					// yAxis: [
-					// 	{
-					// 		type: 'value',
-					// 		position: 'left'
-					// 	},
-					// 	{
-					// 		type: 'value',
-					// 		position: 'right'
-					// 	},
-					// ],
-					yAxis: {
+              realtime: true,
+              start: 65,
+              end: 85,
+            },
+          ],
+          // yAxis: [
+          // 	{
+          // 		type: 'value',
+          // 		position: 'left'
+          // 	},
+          // 	{
+          // 		type: 'value',
+          // 		position: 'right'
+          // 	},
+          // ],
+          yAxis: {
             type: "value",
             position: "left",
-					},
+          },
           series: chartDataDict[tagList[i]]["seriesData"],
-				};
-				await this.$nextTick();
+        };
+        await this.$nextTick();
         this.$store.state.pageData[this.myPrgmId][this.chartNameList[i]].series =
           option.series;
-				this.$store.state.pageData[this.myPrgmId][this.chartNameList[i]].xAxis =
-					option.xAxis;
+        this.$store.state.pageData[this.myPrgmId][this.chartNameList[i]].xAxis =
+          option.xAxis;
         this.$store.state.pageData[this.myPrgmId][this.chartNameList[i]].dataZoom =
           option.dataZoom;
         this.$store.state.pageData[this.myPrgmId][this.chartNameList[i]].legend =
           option.legend;
-				// this.setChartOption({chartKey : this.chartNameList[i], value: option});
-				// this.setChartDetailXAxisData({
-				// 	chartKey: this.chartNameList[i],
-				// 	value: chartDataDict[tagList[i]]['xAxisList']
-				// })
-			}
-			this.loadChart = true;
-		},
-		async setChartNull() {
-			this.loadChart = false;
-			// 차트 series data 초기화
-			this.$store.state.pageData[this.myPrgmId].chart01.series = [];
-			this.$store.state.pageData[this.myPrgmId].chart02.series = [];
-			this.$store.state.pageData[this.myPrgmId].chart03.series = [];
-			this.$store.state.pageData[this.myPrgmId].chart04.series = [];
-			this.$store.state.pageData[this.myPrgmId].chart05.series = [];
-			// 차트 xAxis data 초기화
-			let xAxisDefault = {
-				data: [],
-				axisLabel: { interval: 0, rotate: 30 },
-			};
-			this.$store.state.pageData[this.myPrgmId].chart01.xAxis = xAxisDefault;
-			this.$store.state.pageData[this.myPrgmId].chart02.xAxis = xAxisDefault;
-			this.$store.state.pageData[this.myPrgmId].chart03.xAxis = xAxisDefault;
-			this.$store.state.pageData[this.myPrgmId].chart04.xAxis = xAxisDefault;
-			this.$store.state.pageData[this.myPrgmId].chart05.xAxis = xAxisDefault;
-			// 차트 legend data 초기화
-			this.$store.state.pageData[this.myPrgmId].chart01.legend.data = [];
-			this.$store.state.pageData[this.myPrgmId].chart02.legend.data = [];
-			this.$store.state.pageData[this.myPrgmId].chart03.legend.data = [];
-			this.$store.state.pageData[this.myPrgmId].chart04.legend.data = [];
-			this.$store.state.pageData[this.myPrgmId].chart05.legend.data = [];
-			this.loadChart = true;
-		},
+        // this.setChartOption({chartKey : this.chartNameList[i], value: option});
+        // this.setChartDetailXAxisData({
+        // 	chartKey: this.chartNameList[i],
+        // 	value: chartDataDict[tagList[i]]['xAxisList']
+        // })
+      }
+      this.loadChart = true;
+    },
+    async setChartNull() {
+      this.loadChart = false;
+      // 차트 series data 초기화
+      this.$store.state.pageData[this.myPrgmId].chart01.series = [];
+      this.$store.state.pageData[this.myPrgmId].chart02.series = [];
+      this.$store.state.pageData[this.myPrgmId].chart03.series = [];
+      this.$store.state.pageData[this.myPrgmId].chart04.series = [];
+      this.$store.state.pageData[this.myPrgmId].chart05.series = [];
+      // 차트 xAxis data 초기화
+      let xAxisDefault = {
+        data: [],
+        axisLabel: { interval: 0, rotate: 30 },
+      };
+      this.$store.state.pageData[this.myPrgmId].chart01.xAxis = xAxisDefault;
+      this.$store.state.pageData[this.myPrgmId].chart02.xAxis = xAxisDefault;
+      this.$store.state.pageData[this.myPrgmId].chart03.xAxis = xAxisDefault;
+      this.$store.state.pageData[this.myPrgmId].chart04.xAxis = xAxisDefault;
+      this.$store.state.pageData[this.myPrgmId].chart05.xAxis = xAxisDefault;
+      // 차트 legend data 초기화
+      this.$store.state.pageData[this.myPrgmId].chart01.legend.data = [];
+      this.$store.state.pageData[this.myPrgmId].chart02.legend.data = [];
+      this.$store.state.pageData[this.myPrgmId].chart03.legend.data = [];
+      this.$store.state.pageData[this.myPrgmId].chart04.legend.data = [];
+      this.$store.state.pageData[this.myPrgmId].chart05.legend.data = [];
+      this.loadChart = true;
+    },
     async setChartNull2() {
       this.loadChart = false;
       let option = {
@@ -1074,52 +1052,52 @@ export default {
       }
       this.loadChart = true;
     },
-		closePopEvent() {
-			// tag를 추가안하고 popup만 열고 닫을 경우 add한 Row를 삭제
-			let gridData = this.$refs[this.gridName].getData();
-			if (gridData.length == 0) {
+    closePopEvent() {
+      // tag를 추가안하고 popup만 열고 닫을 경우 add한 Row를 삭제
+      let gridData = this.$refs[this.gridName].getData();
+      if (gridData.length == 0) {
         this.$refs[this.gridName].removeRow("immediately", 0);
-			} else if (
-				gridData[gridData.length - 1].tagId == undefined ||
-				gridData[gridData.length - 1].tagId == null
-			) {
-				this.$refs[this.gridName].removeRow(
+      } else if (
+        gridData[gridData.length - 1].tagId == undefined ||
+        gridData[gridData.length - 1].tagId == null
+      ) {
+        this.$refs[this.gridName].removeRow(
           "immediately",
           gridData[gridData.length - 1].rowKey
-				);
-			}
-		},
-		downloadExcelFile() {
-			if (this.tagList.length > 0) {
+        );
+      }
+    },
+    downloadExcelFile() {
+      if (this.tagList.length > 0) {
         this.makeExcelFile(this.chartNameList, this.tagList, "데이터_TREND.xlsx");
-			}
-		},
-		makeExcelFile(chartNameList, tagNameList, fileName) {
-			var workBook = XLSX.utils.book_new();
-			for (var i = 0; i < tagNameList.length; i++) {
-				let xlsData = this.makeExcelData(chartNameList[i], tagNameList[i]);
-				let num = i + 1;
+      }
+    },
+    makeExcelFile(chartNameList, tagNameList, fileName) {
+      var workBook = XLSX.utils.book_new();
+      for (var i = 0; i < tagNameList.length; i++) {
+        let xlsData = this.makeExcelData(chartNameList[i], tagNameList[i]);
+        let num = i + 1;
         let sheetName = "sheet" + num;
-				// let sheetName = tagNameList[i];
-				var excelData = XLSX.utils.json_to_sheet(xlsData);
-				XLSX.utils.book_append_sheet(workBook, excelData, sheetName);
-			}
-			// 	var xlsData = this.makeExcelData(chartName);
-			XLSX.writeFile(workBook, fileName);
-		},
-		makeExcelData(chartName, tagName) {
-			let xlsData = null;
-			var xlsHeader = [
+        // let sheetName = tagNameList[i];
+        var excelData = XLSX.utils.json_to_sheet(xlsData);
+        XLSX.utils.book_append_sheet(workBook, excelData, sheetName);
+      }
+      // 	var xlsData = this.makeExcelData(chartName);
+      XLSX.writeFile(workBook, fileName);
+    },
+    makeExcelData(chartName, tagName) {
+      let xlsData = null;
+      var xlsHeader = [
         { header: "TAG ID", name: "tagId" },
         { header: "시간", name: "dttm" },
-			];
+      ];
       this.$store.state.pageData[myPrgmId][chartName]["legend"]["data"].map((item) => {
-					xlsHeader.push({
-						header: item,
-						name: item,
-					});
+        xlsHeader.push({
+          header: item,
+          name: item,
+        });
       });
-			let xData =
+      let xData =
         this.$store.state.pageData[myPrgmId][chartName]["xAxis"][1] != undefined
           ? this.$store.state.pageData[myPrgmId][chartName]["xAxis"][1]["data"]
           : this.$store.state.pageData[myPrgmId][chartName]["xAxis"][0]["data"];
@@ -1128,111 +1106,111 @@ export default {
       ];
       let chartData = this.$store.state.pageData[myPrgmId][chartName]["series"];
       chartData = [{ name: "dttm", data: xData }, ...chartData];
-			let chartDataDict = {};
+      let chartDataDict = {};
       chartData.map((item) => {
-				chartDataDict[item.name] = item.data;
-			});
-			let finalChartData = [];
-			let minDataXDataIdx = 0;
-			for (var i = 0; i < xData.length; i++) {
-				let dict = {};
-				if (
-					minDataXData[minDataXDataIdx + 1] != undefined &&
-					(xData[i] >= minDataXData[minDataXDataIdx + 1] ||
-						xData[i] == minDataXData[minDataXDataIdx + 1])
-				) {
-					minDataXDataIdx += 1;
-				}
-				for (var key of Object.keys(chartDataDict)) {
+        chartDataDict[item.name] = item.data;
+      });
+      let finalChartData = [];
+      let minDataXDataIdx = 0;
+      for (var i = 0; i < xData.length; i++) {
+        let dict = {};
+        if (
+          minDataXData[minDataXDataIdx + 1] != undefined &&
+          (xData[i] >= minDataXData[minDataXDataIdx + 1] ||
+            xData[i] == minDataXData[minDataXDataIdx + 1])
+        ) {
+          minDataXDataIdx += 1;
+        }
+        for (var key of Object.keys(chartDataDict)) {
           dict["tagId"] = tagName;
           if (key == "RAWDATA") {
-						dict[key] = chartDataDict[key][i];
+            dict[key] = chartDataDict[key][i];
           } else if (key == "dttm") {
-						dict[key] = chartDataDict[key][i];
-					} else {
-						dict[key] = chartDataDict[key][minDataXDataIdx];
-					}
-				}
+            dict[key] = chartDataDict[key][i];
+          } else {
+            dict[key] = chartDataDict[key][minDataXDataIdx];
+          }
+        }
 
-				// if(i==0 && xData[i] == minDataXData[minDataXDataIdx]){
-				// 	minDataXDataIdx = 0;
-				// }
-				// else if(xData[i] == minDataXData[minDataXDataIdx]){
-				// 	minDataXDataIdx += 1;
-				// }
-				finalChartData.push(dict);
-			}
-			var tmpData = [];
-			var tmpMap = {};
+        // if(i==0 && xData[i] == minDataXData[minDataXDataIdx]){
+        // 	minDataXDataIdx = 0;
+        // }
+        // else if(xData[i] == minDataXData[minDataXDataIdx]){
+        // 	minDataXDataIdx += 1;
+        // }
+        finalChartData.push(dict);
+      }
+      var tmpData = [];
+      var tmpMap = {};
 
       finalChartData.map((item) => {
         xlsHeader.map((v) => {
-					// return Object.assign(tmpMap, { [v.header]: item[v.name] || 0 });
-					var value = item[v.name];
-					if (value == undefined) {
-						value = 0;
-					}
+          // return Object.assign(tmpMap, { [v.header]: item[v.name] || 0 });
+          var value = item[v.name];
+          if (value == undefined) {
+            value = 0;
+          }
           if (typeof value === "number") {
             value = parseFloat(Utility.setFormatIntDecimal(value, 2).replace(",", ""));
-					}
-					return Object.assign(tmpMap, { [v.header]: value || 0.0 });
-				});
-				tmpData = tmpData.concat(tmpMap);
-				tmpMap = {};
-			});
-			xlsData = tmpData;
+          }
+          return Object.assign(tmpMap, { [v.header]: value || 0.0 });
+        });
+        tmpData = tmpData.concat(tmpMap);
+        tmpMap = {};
+      });
+      xlsData = tmpData;
 
-			return xlsData;
-		},
-	},
+      return xlsData;
+    },
+  },
 };
 var dt1 = new Date();
 var dt2 = new Date(dt1.setMonth(dt1.getMonth() - 1));
 const defaultData = {
-	isFind: false,
-	/* 검색옵션 */
+  isFind: false,
+  /* 검색옵션 */
   cmCycle: "CYC_DAY", // 주기
-	defaultRange: {
-		CYC_DAY: 30,
-	},
+  defaultRange: {
+    CYC_DAY: 30,
+  },
   fromDt: Utility.setFormatDate(dt2, "YYYYMMDD"),
   toDt: Utility.setFormatDate(new Date(), "YYYYMMDD"),
   selectTimeValue1: "00 : 00",
   selectTimeValue2: "00 : 00",
-	useFg: false,
-	chkEqualDayHourFg: true,
-	// 선택된 GRID 데이터
-	rowGridSelectKey: 0,
-	rowGridSelectData: null,
-	/* Griddata 세팅 */
-	rowGrid: {
-		data: [],
-		column: [],
-		option: {},
-		defaultRow: {
-			eqpmGrpNm: null,
-			eqpmGrpId: null,
-			eqpmId: null,
-			eqpmNm: null,
-			tagId: null,
-			tagNm: null,
-			rowStat: null,
-		},
-		buttonAuth: {
-			add: true,
-			remove: true,
-			save: false,
-			excel: false,
-		},
-	},
-	tagTrndPopModalData: {},
-	// totalSelectedTags: '',
-	tagList: [],
-	chart01: Utility.defaultChartOption(true),
-	chart02: Utility.defaultChartOption(true),
-	chart03: Utility.defaultChartOption(true),
-	chart04: Utility.defaultChartOption(true),
-	chart05: Utility.defaultChartOption(true),
+  useFg: false,
+  chkEqualDayHourFg: true,
+  // 선택된 GRID 데이터
+  rowGridSelectKey: 0,
+  rowGridSelectData: null,
+  /* Griddata 세팅 */
+  rowGrid: {
+    data: [],
+    column: [],
+    option: {},
+    defaultRow: {
+      eqpmGrpNm: null,
+      eqpmGrpId: null,
+      eqpmId: null,
+      eqpmNm: null,
+      tagId: null,
+      tagNm: null,
+      rowStat: null,
+    },
+    buttonAuth: {
+      add: true,
+      remove: true,
+      save: false,
+      excel: false,
+    },
+  },
+  tagTrndPopModalData: {},
+  // totalSelectedTags: '',
+  tagList: [],
+  chart01: Utility.defaultChartOption(true),
+  chart02: Utility.defaultChartOption(true),
+  chart03: Utility.defaultChartOption(true),
+  chart04: Utility.defaultChartOption(true),
+  chart05: Utility.defaultChartOption(true),
 };
 </script>
 <style lang="scss" scoped>
@@ -1245,48 +1223,48 @@ const defaultData = {
 }
 
 @each $theme in dark, light {
-	.v-application.#{$theme}-mode {
-		.tagTrndGrid {
-			.tui-grid {
-				&-cell {
-					&.row-insert {
-						background-color: #242940;
-					}
-					&.row-modify {
-						background-color: map-deep-get(
-							$config,
-							#{$theme},
+  .v-application.#{$theme}-mode {
+    .tagTrndGrid {
+      .tui-grid {
+        &-cell {
+          &.row-insert {
+            background-color: #242940;
+          }
+          &.row-modify {
+            background-color: map-deep-get(
+              $config,
+              #{$theme},
               "tui-grid-cell-modify-color"
-						);
-					}
-					&.row-removed {
-						background-color: map-deep-get(
-							$config,
-							#{$theme},
+            );
+          }
+          &.row-removed {
+            background-color: map-deep-get(
+              $config,
+              #{$theme},
               "tui-grid-cell-removed-color"
-						);
-					}
-					&.row-disabled {
+            );
+          }
+          &.row-disabled {
             color: map-deep-get($config, #{$theme}, "tui-grid-cell-disabled-color");
 
-						.tui-grid-cell-content {
+            .tui-grid-cell-content {
               color: map-deep-get($config, #{$theme}, "tui-grid-cell-disabled-color");
-						}
-					}
-					&.row-selected {
-						background-color: map-deep-get(
-							$config,
-							#{$theme},
+            }
+          }
+          &.row-selected {
+            background-color: map-deep-get(
+              $config,
+              #{$theme},
               "tui-grid-cell-selected-color"
-						);
+            );
 
-						.tui-grid-cell-content {
+            .tui-grid-cell-content {
               color: map-deep-get($config, #{$theme}, "activate");
-						}
-					}
-				}
-			}
-		}
-	}
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>

From 06308055ef224459b171e54313fc2a9563060775 Mon Sep 17 00:00:00 2001
From: Michael <20074391@skcc.com>
Date: Fri, 1 Aug 2025 12:08:43 +0900
Subject: [PATCH 09/15] Remove mock data popup s11

---
 components/common/modal/TagTrndTagPop.vue | 74 +++++++++++------------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/components/common/modal/TagTrndTagPop.vue b/components/common/modal/TagTrndTagPop.vue
index fa0b2d4..1eccc1d 100644
--- a/components/common/modal/TagTrndTagPop.vue
+++ b/components/common/modal/TagTrndTagPop.vue
@@ -273,9 +273,9 @@ export default {
     });
   },
   async created() {
-    // await this.setSelectValueList01();
-    // await this.setSelectValueList02();
-    // await this.setSelectValueList03();
+    await this.setSelectValueList01();
+    await this.setSelectValueList02();
+    await this.setSelectValueList03();
     this.init();
     // if(this.searchParam.isMulti == true){
     //   this.setPageData({
@@ -487,40 +487,40 @@ export default {
         eqpmId: this.selectValue03,
         searchWord: this.searchWord,
       };
-      let res = [
-        {
-          eqpmGrpNm: "냉각 시스템",
-          eqpmGrpId: "GRP001",
-          eqpmId: "EQ001",
-          eqpmNm: "냉각기 A",
-          tagId: "TAG001-001",
-          tagNm: "냉각 온도 센서",
-          rowStat: "I",
-        },
-        {
-          eqpmGrpNm: "전력 시스템",
-          eqpmGrpId: "GRP002",
-          eqpmId: "EQ002",
-          eqpmNm: "변압기 B",
-          tagId: "TAG002-002",
-          tagNm: "전류 센서",
-          rowStat: "U",
-        },
-        {
-          eqpmGrpNm: "공기압 시스템",
-          eqpmGrpId: "GRP003",
-          eqpmId: "EQ003",
-          eqpmNm: "압축기 C",
-          tagId: "TAG003-003",
-          tagNm: "압력 센서",
-          rowStat: "D",
-        },
-      ];
-      //   res = await this.postApiReturn({
-      //     apiKey: "selectTagAndEqpmList",
-      //     resKey: "tagTrndDatas",
-      //     sendParam: searchParam,
-      //   });
+      // let res = [
+      //   {
+      //     eqpmGrpNm: "냉각 시스템",
+      //     eqpmGrpId: "GRP001",
+      //     eqpmId: "EQ001",
+      //     eqpmNm: "냉각기 A",
+      //     tagId: "TAG001-001",
+      //     tagNm: "냉각 온도 센서",
+      //     rowStat: "I",
+      //   },
+      //   {
+      //     eqpmGrpNm: "전력 시스템",
+      //     eqpmGrpId: "GRP002",
+      //     eqpmId: "EQ002",
+      //     eqpmNm: "변압기 B",
+      //     tagId: "TAG002-002",
+      //     tagNm: "전류 센서",
+      //     rowStat: "U",
+      //   },
+      //   {
+      //     eqpmGrpNm: "공기압 시스템",
+      //     eqpmGrpId: "GRP003",
+      //     eqpmId: "EQ003",
+      //     eqpmNm: "압축기 C",
+      //     tagId: "TAG003-003",
+      //     tagNm: "압력 센서",
+      //     rowStat: "D",
+      //   },
+      // ];
+      let res = await this.postApiReturn({
+          apiKey: "selectTagAndEqpmList",
+          resKey: "tagTrndDatas",
+          sendParam: searchParam,
+      });
       let newRes = [];
       if (this.searchParam["tagList"].length > 0) {
         newRes = res.filter((item) => {

From df678daedf7dbf5354152c39118fd4c1c1b81332 Mon Sep 17 00:00:00 2001
From: Michael <20074391@skcc.com>
Date: Fri, 1 Aug 2025 16:03:54 +0900
Subject: [PATCH 10/15] Fix duplicate id not reload page date

---
 layouts/default.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 87ee665..68f6454 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -62,10 +62,10 @@
                 </v-list-item>
               </v-list>
             </v-menu>
-            <a-button id="refresh" class="btn-header" @click="removeBookMark" v-if="bookmarkBtn == 1">
+            <a-button id="removeBm" class="btn-header" @click="removeBookMark" v-if="bookmarkBtn == 1">
               <span class="material-icons" style="font-size: 17px">star</span>
             </a-button>
-            <a-button id="refresh" class="btn-header" :style="{
+            <a-button id="addBm" class="btn-header" :style="{
                     display: 'flex',
                     alignItems: 'center'}" @click="addBookMark" v-if="bookmarkBtn == 0">
               <span class="material-icons" style="font-size: 17px">star_border</span>

From 6dfda50ebdd96fe647c5ae05cf56edba613e2ac6 Mon Sep 17 00:00:00 2001
From: Michael <20074391@skcc.com>
Date: Mon, 4 Aug 2025 11:21:29 +0900
Subject: [PATCH 11/15] Change style to built in class + Add missing titlte

---
 components/common/modal/ElecPowChrgPop.vue | 6 +++---
 pages/ems/effc/EnrgEffcTotSummPage.vue     | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/common/modal/ElecPowChrgPop.vue b/components/common/modal/ElecPowChrgPop.vue
index a6872aa..56efac4 100644
--- a/components/common/modal/ElecPowChrgPop.vue
+++ b/components/common/modal/ElecPowChrgPop.vue
@@ -58,7 +58,7 @@
 				<div class="pa-5">
 					<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
 					<v-row align="center" no-gutters>
-						<v-col :cols="label ? 3 : ''" style="padding-right: 10px;">
+						<v-col :cols="label ? 3 : ''" class="pr-3" >
 							<component
 								:is="'selectCodeList'"
 								:parentPrgmId="parentPrgmId"
@@ -69,7 +69,7 @@
 								:customClass="'select-large'"
 							/>
 						</v-col>
-						<v-col :cols="label ? 3 : ''" style="padding-right: 10px;">
+						<v-col :cols="label ? 3 : ''" class="pr-3" >
 							<component
 								:is="'selectCodeList'"
 								:parentPrgmId="parentPrgmId"
@@ -80,7 +80,7 @@
 								:addAll="true"
 							/>
 						</v-col>
-						<v-col :cols="label ? 3 : ''" style="padding-right: 10px;">
+						<v-col :cols="label ? 3 : ''" class="pr-3" >
 							<component
 								:is="'selectCodeList'"
 								:parentPrgmId="parentPrgmId"
diff --git a/pages/ems/effc/EnrgEffcTotSummPage.vue b/pages/ems/effc/EnrgEffcTotSummPage.vue
index a443021..97b6233 100644
--- a/pages/ems/effc/EnrgEffcTotSummPage.vue
+++ b/pages/ems/effc/EnrgEffcTotSummPage.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="l-layout">
+    <CommonPageTitle />
     <v-row ref="searchFilter">
       <v-col :cols="12">
         <v-card class="searchFilter">

From 7bca077859e6dd057c935902b4c35c4ad1e4bda4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tran=20Van=20Dung/=28Tran=20Van=20Dung=29/=ED=98=84?=
 =?UTF-8?q?=EC=9E=A5=EB=8C=80=EB=A6=AC=EC=9D=B8/SK?= <20074470@skcc.com>
Date: Mon, 4 Aug 2025 15:00:22 +0700
Subject: [PATCH 12/15] fix bug screen 8, 10, menu

---
 assets/scss/common.scss                   | 450 ++++++++++++----------
 components/common/modal/EqpmSelectPop.vue |  92 ++---
 layouts/default.vue                       |  51 +--
 pages/comm/base/NoticeMngPage.vue         |   2 +-
 pages/ems/base/EquipmentMasterMngPage.vue |   2 +-
 pages/ems/base/ReadResultCloseMngPage.vue |   1 +
 pages/ems/effc/EnrgMapPage.vue            |   6 +-
 pages/ems/effc/EnrgReptMngPage.vue        |  47 +--
 8 files changed, 335 insertions(+), 316 deletions(-)

diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index 763638a..f3d3a69 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -266,7 +266,7 @@ a {
       }
 
       &>.v-treeview-node__root:hover:before {
-        opacity: 1 !important;
+        opacity: 0 !important;
       }
 
       .v-treeview-node__children {
@@ -280,13 +280,17 @@ a {
 
     .v-treeview-node--click[aria-expanded="true"] {
       &>.v-treeview-node__root:before {
-        opacity: 1 !important;
+        opacity: 0 !important;
       }
     }
 
     .v-treeview-node[aria-expanded="true"] {
-      &>.v-treeview-node__root>.v-treeview-node__content>.v-treeview-node__label>button>.v-icon.mdi-chevron-down {
-        transform: rotate(-180deg);
+      &>.v-treeview-node__root>.v-treeview-node__content
+      >.v-treeview-node__label>button {
+        >.anticon,
+        >.v-icon.mdi-chevron-down {
+          transform: rotate(-180deg);
+        }
       }
     }
 
@@ -298,15 +302,17 @@ a {
         // justify-content: center;
       }
 
+      & .anticon,
       & .v-icon.mdi-chevron-down {
         margin-left: auto;
+        animation-duration: 0.5s;
       }
     }
   }
 
   .v-treeview-node--active {
     &:before {
-      opacity: 1 !important;
+      opacity: 0 !important;
     }
   }
 
@@ -322,7 +328,8 @@ a {
     .v-treeview-node__content span:not(.v-icon),
     .v-treeview-node__root>button,
     .v-treeview-node__level,
-    .v-treeview-node__content .v-icon.mdi-chevron-down {
+    .v-treeview-node__content .v-icon.mdi-chevron-down,
+    .v-treeview-node__content .anticon {
       display: none;
     }
 
@@ -615,36 +622,36 @@ a {
 
     .v-navigation-drawer__append {
       >p {
-        @if $theme ==dark {
-          color: rgba(255, 255, 255, 0.6);
-        }
+        color: map-deep-get($config, #{$theme}, "v-banner-border-color" ) !important;
+        // @if $theme ==dark {
+        //   color: rgba(255, 255, 255, 0.6);
+        // }
 
-        @else {
-          color: #999;
-        }
+        // @else {
+        //   color: #999;
+        // }
       }
     }
 
-    .v-footer {
-      @if $theme ==light {
-        background-color: #dfdfe5;
-        color: #767d83;
-      }
-    }
+    // .v-footer {
+    //   @if $theme ==light {
+    //     background-color: #dfdfe5;
+    //     color: #767d83;
+    //   }
+    // }
 
-    .bd {
-      @if $theme ==dark {
-        &-r-1 {
-          border-right: 1px #373f45 solid;
-        }
-      }
-
-      @else {
-        &-r-1 {
-          border-right: 1px #efefef solid;
-        }
-      }
-    }
+    // .bd {
+    //   @if $theme ==dark {
+    //     &-r-1 {
+    //       border-right: 1px #373f45 solid;
+    //     }
+    //   }
+    //   @else {
+    //     &-r-1 {
+    //       border-right: 1px #efefef solid;
+    //     }
+    //   }
+    // }
 
     .border-bottom-1 {
       border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color");
@@ -692,183 +699,224 @@ a {
       }
 
       &>.v-treeview-node {
-
-        .v-treeview-node--active {
-          background-color: map-deep-get($config,
-            #{$theme},
-            "v-treeview-node-label-active-bg"
-          );
-          border: 1px solid map-deep-get($config,
-            #{$theme},
-            "v-treeview-node-label-active-border"
-          );
+        .v-treeview-node__root {
           border-radius: 8px;
-
-          &:before {
-            background-color: map-deep-get($config,
-              #{$theme},
-              "v-treeview-node-subroot-backgroundColor"
-            );
-          }
-
-          &>.v-treeview-node__content {
-            .v-treeview-node__label {
-              color: map-deep-get($config,
-                #{$theme},
-                "v-treeview-node-label-active-color"
-              );
-            }
-
-            .v-icon {
-              color: map-deep-get($config,
-                #{$theme},
-                "v-treeview-icon-active-color"
-              );
-            }
-          }
-
-        }
-
-        &>.v-treeview-node__root {
-          &:before {
-            background-color: map-deep-get($config,
-              #{$theme},
-              "v-treeview-node-root-backgroundColor"
-            );
-          }
-
-          &>.v-treeview-node__content {
-            .v-treeview-node__label {
-              color: map-deep-get($config,
-                #{$theme},
-                "v-treeview-node-root-label-color"
-              );
-            }
-
-            .v-icon {
-              color: map-deep-get($config,
-                #{$theme},
-                "v-treeview-node-root-icon-color"
-              );
-            }
-          }
-
           &:hover {
-            &>.v-treeview-node__content {
-              .v-treeview-node__label {
-                color: map-deep-get($config,
-                  #{$theme},
-                  "v-treeview-node-root-label-active-color"
-                );
-              }
-
-              .v-icon {
-                color: map-deep-get($config,
-                  #{$theme},
-                  "v-treeview-node-root-icon-active-color"
-                );
-              }
-            }
+            background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color" );
           }
-        }
-
-        &>.v-treeview-node__children {
-          &>.v-treeview-node {
-
-            &>.v-treeview-node__root {
-              &:before {
-                background-color: map-deep-get($config,
-                  #{$theme},
-                  "v-treeview-node-subroot-backgroundColor"
-                );
-              }
-
-              &>.v-treeview-node__content {
-                .v-treeview-node__label {
-                  color: map-deep-get($config,
-                    #{$theme},
-                    "v-treeview-node-label-color"
-                  );
-                }
-
-                .v-icon {
-                  color: map-deep-get($config,
-                    #{$theme},
-                    "v-treeview-icon-color"
-                  );
-                }
-              }
-
-              &:not(.v-treeview-node--active):hover {
-                &:before {
-                  background-color: map-deep-get($config,
-                    #{$theme},
-                    "v-treeview-leaf-active-backgroundColor"
-                  );
-                }
-
-                &>.v-treeview-node__content {
-                  .v-treeview-node__label {
-                    color: map-deep-get($config,
-                      #{$theme},
-                      "v-treeview-leaf-active-color"
-                    );
-                  }
-
-                  .v-icon {
-                    color: map-deep-get($config,
-                      #{$theme},
-                      "v-treeview-leaf-active-color"
-                    );
-                  }
-                }
-              }
-            }
-
-            &>.v-treeview-node__children {
-              background-color: map-deep-get($config,
-                #{$theme},
-                "v-treeview-leaf-subchildren-backgroundColor"
-              );
-            }
-
-            &[aria-expanded="true"] {
-              & .v-treeview-node__root>.v-treeview-node__content {
-                .v-treeview-node__label {
-                  color: map-deep-get($config,
-                    #{$theme},
-                    "v-treeview-node-label-children-color"
-                  );
-                }
-
-                .v-icon {
-                  color: map-deep-get($config,
-                    #{$theme},
-                    "v-treeview-icon-active-color"
-                  );
-                }
-              }
-            }
-          }
-        }
-
-        &[aria-expanded="true"] {
-          & .v-treeview-node__root>.v-treeview-node__content {
+          .v-treeview-node__content {
             .v-treeview-node__label {
-              color: map-deep-get($config,
-                #{$theme},
-                "v-treeview-node-root-label-active-color"
-              );
-            }
-
-            .v-icon {
-              color: map-deep-get($config,
-                #{$theme},
-                "v-treeview-node-root-icon-active-color"
-              );
+              color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
             }
           }
+
         }
+
+        &[aria-expanded="true"]{
+
+          // Level 1
+          &>.v-treeview-node__root {
+            background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg" );
+            border: 1px solid map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+            color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
+
+            &:before {
+              background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor");
+            }
+
+            .v-treeview-node__content {
+              .v-treeview-node__label {
+                color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
+              }
+
+              .v-icon:first-child,
+              .v-icon:first-child::before {
+                color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+              }
+            }
+          }
+
+          &>.v-treeview-node__children {
+            // Level 2
+            .v-treeview-node__root {
+              color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
+              &:hover {
+                background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor");
+              }
+            }
+            &>[aria-expanded="true"] >.v-treeview-node__root,
+            .v-treeview-node__root.v-treeview-node--active {
+              background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" );
+              .v-treeview-node__content {
+                .v-treeview-node__label {
+                  color: map-deep-get($config, #{$theme}, "card-title-color");
+                }
+
+                .v-icon,
+                .v-icon::before,
+                .anticon {
+                  color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+                }
+              }
+            }
+            
+            // Level 3
+            .v-treeview-node__children {
+              .v-treeview-node {
+                >.v-treeview-node__root {
+                  .v-treeview-node__content {
+                    .v-treeview-node__label {
+                      color: map-deep-get($config, #{$theme}, "card-default-color");
+                    }
+                  }
+
+                  *:hover,
+                  :hover {
+                    border-width: 0;
+                  }
+
+                  &:hover {
+                    border: 1px solid  map-deep-get($config, #{$theme}, "v-input-textarea-border");
+                    border-radius: 8px;
+                    background-color: rgba(0, 0, 0, 0);
+                    .v-treeview-node__content {
+                      .v-treeview-node__label {
+                        color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
+                      }
+                    }
+
+                  }
+
+                  &.v-treeview-node--active {
+                    // color: map-deep-get($config, #{$theme}, "card-title-color");
+                    background-color: rgba(0, 0, 0, 0);
+                    .v-treeview-node__content {
+                      .v-treeview-node__label {
+                        color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
+                      }
+      
+                      .v-icon,
+                      .v-icon::before,
+                      .anticon {
+                        color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+                      }
+                    }
+                  }
+
+                }
+              }
+
+            }
+
+          }
+
+
+        }
+
+        // &>.v-treeview-node__root {
+        //   &:before {
+        //     background-color: map-deep-get($config, #{$theme}, "v-treeview-node-root-backgroundColor" );
+        //   }
+
+        //   &>.v-treeview-node__content {
+        //     .v-treeview-node__label {
+        //       color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
+        //     }
+        //   }
+
+        //   &:hover {
+        //     &>.v-treeview-node__content {
+        //       .v-treeview-node__label {
+        //         color: map-deep-get($config,
+        //           #{$theme},
+        //           "v-treeview-node-root-label-active-color"
+        //         );
+        //       }
+
+        //       .v-icon {
+        //         color: map-deep-get($config,
+        //           #{$theme},
+        //           "v-treeview-node-root-icon-active-color"
+        //         );
+        //       }
+        //     }
+        //   }
+        // }
+
+        // &>.v-treeview-node__children {
+        //   &>.v-treeview-node {
+
+        //     &>.v-treeview-node__root {
+        //       &:before {
+        //         background-color: map-deep-get($config,
+        //           #{$theme},
+        //           "v-treeview-node-subroot-backgroundColor"
+        //         );
+        //       }
+
+        //       &>.v-treeview-node__content {
+        //         .v-treeview-node__label {
+        //           color: map-deep-get($config, #{$theme}, "v-treeview-node-label-color" );
+        //         }
+
+        //         .v-icon {
+        //           color: map-deep-get($config, #{$theme}, "v-treeview-icon-color" );
+        //         }
+        //       }
+
+        //       &:not(.v-treeview-node--active):hover {
+        //         &:before {
+        //           background-color: map-deep-get($config,
+        //             #{$theme},
+        //             "v-treeview-leaf-active-backgroundColor"
+        //           );
+        //         }
+
+        //         &>.v-treeview-node__content {
+        //           .v-treeview-node__label {
+        //             color: map-deep-get($config,
+        //               #{$theme},
+        //               "v-treeview-leaf-active-color"
+        //             );
+        //           }
+
+        //           .v-icon {
+        //             color: map-deep-get($config,
+        //               #{$theme},
+        //               "v-treeview-leaf-active-color"
+        //             );
+        //           }
+        //         }
+        //       }
+        //     }
+
+        //     &>.v-treeview-node__children {
+        //       // background-color: map-deep-get($config,
+        //       //   #{$theme},
+        //       //   "v-treeview-leaf-subchildren-backgroundColor"
+        //       // );
+        //     }
+
+        //     // &[aria-expanded="true"] {
+        //     //   & .v-treeview-node__root>.v-treeview-node__content {
+        //     //     .v-treeview-node__label {
+        //     //       color: map-deep-get($config,
+        //     //         #{$theme},
+        //     //         "v-treeview-node-label-children-color"
+        //     //       );
+        //     //     }
+
+        //     //     .v-icon {
+        //     //       color: map-deep-get($config,
+        //     //         #{$theme},
+        //     //         "v-treeview-icon-active-color"
+        //     //       );
+        //     //     }
+        //     //   }
+        //     // }
+        //   }
+        // }
+
       }
     }
 
diff --git a/components/common/modal/EqpmSelectPop.vue b/components/common/modal/EqpmSelectPop.vue
index 0fe794e..959de8b 100644
--- a/components/common/modal/EqpmSelectPop.vue
+++ b/components/common/modal/EqpmSelectPop.vue
@@ -16,54 +16,52 @@
 
 				</template></v-text-field>
 		</v-col>
-		<v-dialog ref="popModal" v-model="dialog" width="800" overlay-color="#000" overlay-opacity="0.8" scrollable>
-			<v-card style="height: 100%">
+		<v-dialog ref="popModal" v-model="dialog" width="800" scrollable>
+			<v-card style="height: 90vh;">
 				<v-card-title class="px-5 py-4 d-flex align-center justify-space-between">
 					<span class="custom-title-4">설비 선택</span>
 					<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
 				</v-card-title>
 				<div class="pa-2 pt-0">
-					<v-card class="searchFilter">
-						<v-row align="end">
-							<v-col :cols="3.5">
-								<!-- 설비그룹 -->
-								<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01"
-									:label="'설비그룹'" :disabled="eqpmGrpDisabled"
-									@update:propsValue="selectValue01 = $event" :labelCols="12" :textCols="12"
-									:iconShow="true" />
-							</v-col>
-							<v-col :cols="3.5">
-								<!-- FAB -->
-								<component :is="'SelectBoxMulti'" :propsValue="selectValue02"
-									:itemList="selectValueList02" :label="'FAB'" :labelCols="12" :multiple="true"
-									:disabled="fabDisabled" @update:propsValue="selectValue02 = $event" :textCols="12"
-									:iconShow="true" />
-							</v-col>
-							<v-col :cols="3.5">
-								<v-row>
-									<v-col :cols="12" class="py-0">
-										<label for="" class="search-box-label">
-											<v-icon small :class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
-											설비명
-										</label>
-									</v-col>
-									<v-col :cols="12" class="pt-0">
-										<v-text-field append-icon="" class="v-input__custom" outlined
-											:hide-details="true" v-model="searchWord" @keyup.enter="search"><template
-												v-slot:append>
-												<!-- Custom SVG icon -->
-												<v-icon>$icoSearch</v-icon>
+					<!-- <v-card class="searchFilter">
+					</v-card> -->
+					<v-row align="end" class="searchFilter">
+						<v-col :cols="3.5">
+							<!-- 설비그룹 -->
+							<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01"
+								:label="'설비그룹'" :disabled="eqpmGrpDisabled"
+								@update:propsValue="selectValue01 = $event" :labelCols="12" :textCols="12"
+								:iconShow="true" />
+						</v-col>
+						<v-col :cols="3.5">
+							<!-- FAB -->
+							<component :is="'SelectBoxMulti'" :propsValue="selectValue02"
+								:itemList="selectValueList02" :label="'FAB'" :labelCols="12" :multiple="true"
+								:disabled="fabDisabled" @update:propsValue="selectValue02 = $event" :textCols="12"
+								:iconShow="true" />
+						</v-col>
+						<v-col :cols="3.5">
+							<v-row>
+								<v-col :cols="12" class="py-0">
+									<label for="" class="search-box-label">
+										<v-icon small :class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
+										설비명
+									</label>
+								</v-col>
+								<v-col :cols="12" class="pt-0">
+									<v-text-field append-icon="" class="v-input__custom" outlined
+										:hide-details="true" v-model="searchWord" @keyup.enter="search"><template
+											v-slot:append>
+											<!-- Custom SVG icon -->
+											<v-icon>$icoSearch</v-icon>
 
-											</template></v-text-field>
-									</v-col>
+										</template></v-text-field>
+								</v-col>
 
-								</v-row>
-							</v-col>
-							<a-button icon="search" type="primary" @click="search()" class="search-button">조회</a-button>
-
-
-						</v-row>
-					</v-card>
+							</v-row>
+						</v-col>
+						<a-button icon="search" type="primary" @click="search()" class="search-button">조회</a-button>
+					</v-row>
 
 					<!-- <v-row align="center" no-gutters style="margin-top: 14px;">
 						<v-col :cols="1">
@@ -77,14 +75,20 @@
 								:hide-details="true" v-model="searchWord" @keyup.enter="search"></v-text-field>
 						</v-col>
 					</v-row> -->
+					<!-- <v-row>
+						<v-col :col="12">
+						</v-col>
+					</v-row> -->
 				</div>
-				<div class="px-5" style="height:429px;">
-					<div ref="modalGridParent" class="w100 h100">
+
+				<v-card-text class="px-2 w100">
+					<div ref="modalGridParent" style="height: 450px;" class="h100 w100">
 						<component :ref="gridName" :is="loadGrid ? 'Grid' : null"
 							:dataPath="searchParam.eqpmSelectPopData.eqpmSelectPop" :gridName="gridName"
 							:parentPrgmId="parentPrgmId" @getRowsData="getRowData" />
 					</div>
-				</div>
+				</v-card-text>
+
 				<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
 					<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="mr-2">닫기</a-button>
 					<a-button :ripple="false" type="primary" @click="setUpdate($event)">확인</a-button>
diff --git a/layouts/default.vue b/layouts/default.vue
index 87ee665..7f9304e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -9,7 +9,6 @@
               <div class="lnb-logo">
                 <img v-if="isDarkMode" src="@/assets/images/logo_dm.png" />
                 <img v-else src="@/assets/images/logo_lm.png" />
-                <!-- <img v-else src="@/assets/images/logo_lm.png" /> -->
               </div>
               <!--            <div class="lnb-logo">FEMS</div>-->
             </router-link>
@@ -40,16 +39,16 @@
             <v-menu offset-y>
               <template v-slot:activator="{ on, attrs }">
                 <a-button
-                    :ripple="false"
-                    tile
-                    class="btn-header"
-                    v-bind="attrs"
-                    v-on="on"
-                    style="width: 100px"
-                  >
-                    <span class="body-2">즐겨찾기</span>
-                    <v-icon size="20">mdi-chevron-down</v-icon>
-                  </a-button>
+                  :ripple="false"
+                  tile
+                  class="btn-header"
+                  v-bind="attrs"
+                  v-on="on"
+                  style="width: 100px"
+                >
+                  <span class="body-2">즐겨찾기</span>
+                  <v-icon size="20">mdi-chevron-down</v-icon>
+                </a-button>
                 <!-- <a-button style="width: 100px; height: 36px" class="btn-header">
                   <span class="body-2">즐겨찾기</span>
                   <v-icon size="20">mdi-chevron-down</v-icon></a-button> -->
@@ -88,32 +87,12 @@
         </v-row>
       </div>
       <v-main>
-
         <v-container fluid>
           <v-row class="flex-nowrap">
             <div class="menu-container">
               <v-navigation-drawer ref="navigationdrawer" :value="drawer" :mini-variant="miniVariant" :clipped="clipped"
                 :absolute="false" mini-variant-width="60">
 
-                <div class="d-flex align-center justify-space-between py-4 px-3" v-if="false">
-                  <router-link class="home" :to="myHome.root">
-                    <div class="lnb-logo">
-                      <img v-if="isDarkMode" src="@/assets/images/logo_dm.png" />
-                      <img v-else src="@/assets/images/logo_lm.png" />
-                    </div>
-                    <!--            <div class="lnb-logo">FEMS</div>-->
-                    
-                  </router-link>
-                  <ThemeSwitch style="margin-right: 20px" />
-                  <v-app-bar-nav-icon ref="appbarnavicon" id="appbarnavicon" @click.stop="miniVariant = !miniVariant"
-                    @click="updateTreeview" :style="{
-                      backgroundColor: 'transparent',
-                      color: isDarkMode ? '#fff' : '#111',
-                    }" />
-                  <!-- <router-view :key="$route.fullPath"/> -->
-                </div>
-                <AdminMenu :miniVariant="miniVariant" :userNm="this.userInfo.userNm" :comId="this.userInfo.comId" v-if="false" />
-
                 <component ref="changePswdPop" :is="'ChangePswdPop'" v-show="false" :comId="this.userInfo.comId" />
                 <v-treeview ref="treeview" :active.sync="activeTree" active-class="v-treeview-node--active"
                   :items="treevieItems" activatable hoverable color="#3896ff" open-on-click @update:open="openNode">
@@ -130,14 +109,16 @@
                         :class="miniVariant === false ? 'mr-2' : ''" size="9">
                         $depth3rdBulletDark
                       </v-icon>
-                      <span v-if="item.url">{{ item.menuNm }}
+                      <span v-if="item.url">
+                        {{ item.menuNm }}
                         <!-- <span v-if="item.bookmark" class="material-icons" style="font-size: 17px; vertical-align: middle;" @click="addBookMark(item.menuId, item.url, item.bookmark)">star</span>
                         <span v-else-if="!item.bookmark" class="material-icons" style="font-size: 17px; vertical-align: middle;" @click="addBookMark(item.menuId, item.url, item.bookmark)">star_border</span> -->
                       </span>
                       <span v-else-if="!item.url">{{ item.menuNm }}</span>
-                      <v-icon v-if="item.lvl >= 1 && item.childeVo && item.childeVo.length > 0 && !item.url">
+                      <!-- <v-icon v-if="item.lvl >= 1 && item.childeVo && item.childeVo.length > 0 && !item.url">
                         mdi-chevron-down
-                      </v-icon>
+                      </v-icon> -->
+                      <a-icon type="down" v-if="item.lvl >= 1 && item.childeVo && item.childeVo.length > 0 && !item.url" />
                     </button>
                   </template>
                 </v-treeview>
@@ -805,7 +786,7 @@ export default {
       // 	console.log('if isLoading stmt3');
       // 	return;
       // }
-      alert("move to", url);
+      // alert("move to", url);
       this.$router.push({
         path: url + "?prgmId=" + prgmId,
       });
diff --git a/pages/comm/base/NoticeMngPage.vue b/pages/comm/base/NoticeMngPage.vue
index e7ecfbb..743c67d 100644
--- a/pages/comm/base/NoticeMngPage.vue
+++ b/pages/comm/base/NoticeMngPage.vue
@@ -10,7 +10,7 @@
 							<v-card-title class="pa-0 custom-title-4">공지사항</v-card-title>
 							<div class="d-flex align-center">
 								<!-- <v-btn @click="listPageButtonGroupClickEvent('view')" :ripple="false" class="mr-1">상세보기</v-btn> -->
-								<a-button type="primary" size="large" @click="listPageButtonGroupClickEvent('write')" :ripple="false"
+								<a-button type="primary" @click="listPageButtonGroupClickEvent('write')" :ripple="false"
 									icon="edit" class="mr-1">작성</a-button>
 								<!-- <v-btn @click="listPageButtonGroupClickEvent('delete')" :ripple="false">삭제</v-btn> -->
 							</div>
diff --git a/pages/ems/base/EquipmentMasterMngPage.vue b/pages/ems/base/EquipmentMasterMngPage.vue
index acc09f1..938faf2 100644
--- a/pages/ems/base/EquipmentMasterMngPage.vue
+++ b/pages/ems/base/EquipmentMasterMngPage.vue
@@ -53,7 +53,7 @@
 			</v-col>
 			<v-col :cols="7" >
 				<v-card class="pb-5">
-					<v-card-title class="custom-title-4" style="min-height:76px;">설비 상세</v-card-title>
+					<v-card-title class="custom-title-4 pb-1" >설비 상세</v-card-title>
 					<div class="px-5" style="min-height:calc(100% - 76px)">
 						<v-tabs v-model="tab">
 							<v-tab v-for="item in items" :key="item.id" :disabled="item.disabledFlag">
diff --git a/pages/ems/base/ReadResultCloseMngPage.vue b/pages/ems/base/ReadResultCloseMngPage.vue
index 8a64eea..0720a38 100644
--- a/pages/ems/base/ReadResultCloseMngPage.vue
+++ b/pages/ems/base/ReadResultCloseMngPage.vue
@@ -43,6 +43,7 @@
                 :is="'Datepicker'"
                 :parentPrgmId="myPrgmId"
                 :label="'조회기간'"
+                customClass="datepicker-large"
               />
             </v-col>
             <div class="d-flex">
diff --git a/pages/ems/effc/EnrgMapPage.vue b/pages/ems/effc/EnrgMapPage.vue
index b3c2e51..fed1f9d 100644
--- a/pages/ems/effc/EnrgMapPage.vue
+++ b/pages/ems/effc/EnrgMapPage.vue
@@ -5,14 +5,14 @@
 			<v-col :cols="12">
 				<v-card class="searchFilter">
 					<v-row align="end" no-gutters>
-						<v-col :cols="4">
+						<v-col :cols="3">
 							<!-- 차트목록 -->
 							<component :is="'SelectBox'" ref="SelectBox" :propsValue="selectValue01" :itemList="selectValueList01"
 								:label="'차트'" @update:propsValue="selectValue01 = $event" :textCols="12" customClass="select-large"  />
 						</v-col>
-						<v-col :cols="4">
+						<v-col :cols="3">
 							<!-- 대상일 -->
-							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" />
+							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" customClass="datepicker-large" />
 						</v-col>
 						<v-col :cols="4" class="text-right">
 							<BtnSearch @click="search" size="large" />
diff --git a/pages/ems/effc/EnrgReptMngPage.vue b/pages/ems/effc/EnrgReptMngPage.vue
index 9db9f28..a22005e 100644
--- a/pages/ems/effc/EnrgReptMngPage.vue
+++ b/pages/ems/effc/EnrgReptMngPage.vue
@@ -32,7 +32,7 @@
 						</v-col>
 						<v-col :cols="3">
 							<!-- 대상일 -->
-							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3"  />
+							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" customClass="datepicker-large"  />
 						</v-col>
 						<v-col :cols="6" class="text-right d-flex align-end justify-end align-self-end">
 							<!-- 조회버튼 -->
@@ -99,6 +99,8 @@ import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
 import DateUtility from '~/plugins/dateUtility';
 import XLSX from 'xlsx';
 
+import getLineChartOption from "~/components/common/chartoptions/LineChart";
+
 let myTitle;
 let myPrgmId;
 
@@ -764,22 +766,14 @@ export default {
 				];
 			}
 
-			var chartOption = {
-				legend: {
-					top: 'top',
-				},
-				grid: {
-					top: '10%',
-					bottom: '20%',
-				},
-				yAxis: {},
-				xAxis: {
-					data: xAxisData,
-				},
-				series: seriesData,
-				tooltip: {},
+			const chartOption = getLineChartOption({
+        xAxisData: xAxisData,
+        seriesData: seriesData,
 				dataZoom: dataZoom,
-			};
+        // legendData: legendData,
+        // isDarkMode: this.isDarkMode,
+      });
+
 			this.setChartOption({ chartKey: this.chartName01, value: chartOption });
 			// this.setChartYAxisData({ chartKey: this.chartName01, value: yAxisData });
 			// this.setChartXAxisData({ chartKey: this.chartName01, value: xAxisData });
@@ -864,22 +858,13 @@ export default {
 				];
 			}
 
-			var chartOption = {
-				legend: {
-					top: 'top',
-				},
-				grid: {
-					top: '10%',
-					bottom: '20%',
-				},
-				yAxis: {},
-				xAxis: {
-					data: xAxisData,
-				},
-				series: seriesData,
-				tooltip: {},
+			const chartOption = getLineChartOption({
+        xAxisData: xAxisData,
+        seriesData: seriesData,
 				dataZoom: dataZoom,
-			};
+        // legendData: legendData,
+        // isDarkMode: this.isDarkMode,
+      });
 
 			this.setChartOption({ chartKey: this.chartName02, value: chartOption });
 			// this.setChartDataZoom({chartKey : this.chartName02,value: dataZoom});

From 28fe49d39f2aecd0a6a04b9ac8513970349a1f91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hoang=20Xuan=20Mai/=28Hoang=20Xuan=20Mai=29/=ED=98=84?=
 =?UTF-8?q?=EC=9E=A5=EB=8C=80=EB=A6=AC=EC=9D=B8/SK?= <20074474@skcc.com>
Date: Mon, 4 Aug 2025 16:35:12 +0700
Subject: [PATCH 13/15] fixbug-scrren-12

---
 pages/comm/base/NoticeMngPage.vue | 187 +++++++++++++++---------------
 1 file changed, 96 insertions(+), 91 deletions(-)

diff --git a/pages/comm/base/NoticeMngPage.vue b/pages/comm/base/NoticeMngPage.vue
index e7ecfbb..2ebec5e 100644
--- a/pages/comm/base/NoticeMngPage.vue
+++ b/pages/comm/base/NoticeMngPage.vue
@@ -3,22 +3,22 @@
 		<CommonPageTitle />
 		<!-- 리스트 페이지 시작 -->
 		<div v-if="pageActionFlag == 'list'" class="h1001">
-			<v-card class="" >
+			<v-card class="">
 				<div class="pa-5">
-					<v-row align="center" no-gutters >
+					<v-row align="center" no-gutters>
 						<v-col :cols="12" class="d-flex align-center justify-space-between">
-							<v-card-title class="pa-0 custom-title-4">공지사항</v-card-title>
+							<v-card-title class="pa-0 custom-title-4"></v-card-title>
 							<div class="d-flex align-center">
 								<!-- <v-btn @click="listPageButtonGroupClickEvent('view')" :ripple="false" class="mr-1">상세보기</v-btn> -->
-								<a-button type="primary" size="large" @click="listPageButtonGroupClickEvent('write')" :ripple="false"
-									icon="edit" class="mr-1">작성</a-button>
+								<a-button type="primary" size="large" @click="listPageButtonGroupClickEvent('write')"
+									:ripple="false" icon="edit" class="mr-1">작성</a-button>
 								<!-- <v-btn @click="listPageButtonGroupClickEvent('delete')" :ripple="false">삭제</v-btn> -->
 							</div>
 						</v-col>
 						<v-col :cols="12" ref="contents" class="mt-5" style="min-height: calc(100% - 76px);">
 							<div ref="gridParent" class="px-50" style="min-height: 70vh;">
-								<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
-									 @getRowsData="getRowData" />
+								<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
+									:parentPrgmId="myPrgmId" @getRowsData="getRowData" />
 							</div>
 						</v-col>
 					</v-row>
@@ -27,22 +27,23 @@
 		</div>
 		<!-- 리스트 페이지 끝 -->
 		<!-- 상세보기 페이지 시작 -->
-		<div v-if="pageActionFlag == 'view'" >
+		<div v-if="pageActionFlag == 'view'">
 			<v-card>
 				<v-row class="pa-5">
 					<v-col :cols="12" class="d-flex align-center justify-space-between ">
-						<v-card-title class="pa-0 custom-title-4">공지사항</v-card-title>
+						<v-card-title class="pa-0 custom-title-4">공지사항 보기</v-card-title>
 						<div class="d-flex align-center">
-							<a-button @click="viewPageButtonGroupClickEvent('list')" type="primary" :ripple="false" class="mr-1"
-								icon="unordered-list">목록</a-button>
-							<a-button @click="viewPageButtonGroupClickEvent('reply')" type="primary" :ripple="false" class="mr-1"
-								icon="send-outlined">
+							<a-button @click="viewPageButtonGroupClickEvent('list')" type="primary" :ripple="false"
+								class="mr-1" icon="unordered-list">목록</a-button>
+							<a-button @click="viewPageButtonGroupClickEvent('reply')" type="primary" :ripple="false"
+								class="mr-1" icon="send-outlined">
 								<v-icon small :class="['mr-2']">$icoSend</v-icon>
 								답글
 							</a-button>
-							<a-button @click="viewPageButtonGroupClickEvent('update')" type="primary" :ripple="false" class="mr-1"
-								icon="edit">수정</a-button>
-							<a-button @click="viewPageButtonGroupClickEvent('delete')" type="danger" ghost icon="delete">삭제</a-button>
+							<a-button @click="viewPageButtonGroupClickEvent('update')" type="primary" :ripple="false"
+								class="mr-1" icon="edit">수정</a-button>
+							<a-button @click="viewPageButtonGroupClickEvent('delete')" type="danger" ghost
+								icon="delete">삭제</a-button>
 						</div>
 					</v-col>
 					<v-col :cols="12" class="mt-5">
@@ -57,13 +58,12 @@
 						<v-card-title class="custom-title-7 pa-0">
 							파일목록
 						</v-card-title>
-						<div v-for="fileData in viewActionData.fileData" 
-							:key="fileData.apndFileId" 
-							class="file-item">
+						<div v-for="fileData in viewActionData.fileData" :key="fileData.apndFileId" class="file-item">
 							<a @click.prevent="downloadFile(fileData)">
 								<div class="d-flex justify-start search-box-label">
 									<v-icon>mdi-paperclip</v-icon>
-									<span class="file-item-name ml-2">{{ fileData.apndFileNm + '.' + fileData.apndFileExt }}</span>
+									<span class="file-item-name ml-2">{{ fileData.apndFileNm + '.' +
+										fileData.apndFileExt }}</span>
 								</div>
 							</a>
 						</div>
@@ -73,12 +73,12 @@
 		</div>
 		<!-- 상세보기 페이지 끝 -->
 		<!-- 작성 페이지 시작 -->
-		<div v-if="pageActionFlag == 'write'" >
+		<div v-if="pageActionFlag == 'write'">
 			<v-card>
 				<div class="pa-5">
 					<v-row class="pa-50">
 						<v-col :cols="12" class="">
-							<v-card-title class="custom-title-4 pa-0">공지사항</v-card-title>
+							<v-card-title class="custom-title-4 pa-0">공지사항 작성</v-card-title>
 						</v-col>
 						<v-col :cols="12" class="mt-4">
 							<v-card-title class="custom-title-7 pa-0">제목</v-card-title>
@@ -88,37 +88,31 @@
 						<v-col :cols="12" style="min-height: calc(100vh - 450px);">
 							<editor ref="tuiEditor" height="100%" initialEditType="wysiwyg" />
 						</v-col>
-	
+
 						<v-col :cols="6" class="mt-5">
 							<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 							<div class="" v-if="writeActionData.fileData">
-								<div 
-									v-for="(fileData, index) in writeActionData.fileData" 
-									:key="fileData.apndFileId" 
+								<div v-for="(fileData, index) in writeActionData.fileData" :key="fileData.apndFileId"
 									class="file-item d-flex justify-space-between">
 									<div class="file-item-detail">
 										<v-icon>mdi-paperclip</v-icon>
 										<span href="#" class="file-item-name">{{ fileData.name }}</span>
 									</div>
-									<a-icon type="delete" class="v-icon pointer" @click="writeActionData.fileData.splice(index, 1)" />
+									<a-icon type="delete" class="v-icon pointer"
+										@click="writeActionData.업로드fileData.splice(index, 1)" />
 								</div>
 							</div>
-							<a-button class="mt-2" icon="upload" @click="$refs.writeInputFile.$refs.input.click()" >
+							<a-button class="mt-2" icon="upload" @click="$refs.writeInputFile.$refs.input.click()">
 								업로드
 							</a-button>
-							<v-file-input 
-								ref="writeInputFile" 
-								v-model="writeActionData.fileData" 
-								multiple
-								outlined 
-								hide-input
-								class="d-none"
-								prepend-icon="mdi-tray-arrow-up"
-							></v-file-input>
+							<v-file-input ref="writeInputFile" v-model="writeActionData.fileData" multiple outlined
+								hide-input class="d-none" prepend-icon="mdi-tray-arrow-up"></v-file-input>
 						</v-col>
 						<v-col :cols="12" class="text-right">
-							<a-button @click="writePageButtonGroupClickEvent('cancel')" :ripple="false" class="mr-2">취소</a-button>
-							<a-button @click="writePageButtonGroupClickEvent('write')" :ripple="false" type="primary">등록</a-button>
+							<a-button @click="writePageButtonGroupClickEvent('cancel')" :ripple="false"
+								class="mr-2">취소</a-button>
+							<a-button @click="writePageButtonGroupClickEvent('write')" :ripple="false"
+								type="primary">등록</a-button>
 						</v-col>
 					</v-row>
 				</div>
@@ -126,7 +120,7 @@
 		</div>
 		<!-- 작성 페이지 끝 -->
 		<!-- 답글 작성 페이지 시작 -->
-		<div v-if="pageActionFlag == 'reply'" >
+		<div v-if="pageActionFlag == 'reply'">
 			<v-card class="pa-5">
 				<v-row align="center" class="mt-0">
 					<v-col :cols="12" class="">
@@ -134,8 +128,7 @@
 					</v-col>
 					<v-col :cols="12" class="mt-4">
 						<v-card-title class="custom-title-7 pa-0">제목</v-card-title>
-						<v-text-field v-model="replyActionData.title" class="v-input__custom" outlined
-							hide-details>
+						<v-text-field v-model="replyActionData.title" class="v-input__custom" outlined hide-details>
 						</v-text-field>
 					</v-col>
 					<v-col :cols="12" style="height: calc(100vh - 270px);" class="mt-2">
@@ -144,72 +137,73 @@
 					<v-col :cols="6" class="mt-5">
 						<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 						<div class="" v-if="replyActionData.fileData">
-							<div 
-								v-for="(fileData, index) in replyActionData.fileData" 
-								:key="fileData.apndFileId" 
+							<div v-for="(fileData, index) in replyActionData.fileData" :key="fileData.apndFileId"
 								class="file-item d-flex justify-space-between">
 								<div class="file-item-detail">
 									<v-icon>mdi-paperclip</v-icon>
 									<span href="#" class="file-item-name">{{ fileData.name }}</span>
 								</div>
-								<a-icon type="delete" class="v-icon pointer" @click="replyActionData.fileData.splice(index, 1)" />
+								<a-icon type="delete" class="v-icon pointer"
+									@click="replyActionData.fileData.splice(index, 1)" />
 							</div>
 						</div>
-						<a-button class="mt-3" icon="upload" @click="$refs.replyInputFile.$refs.input.click()" >
+						<a-button class="mt-3" icon="upload" @click="$refs.replyInputFile.$refs.input.click()">
 							업로드
 						</a-button>
-						<v-file-input ref="replyInputFile" multiple show-size v-model="replyActionData.fileData" hide-details="true" class="d-none">
+						<v-file-input ref="replyInputFile" multiple show-size v-model="replyActionData.fileData"
+							hide-details="true" class="d-none">
 						</v-file-input>
 					</v-col>
 					<v-col :cols="12" class="text-right">
 						<a-button @click="replyPageButtonGroupClickEvent('cancel')" :ripple="false">취소</a-button>
-						<a-button @click="replyPageButtonGroupClickEvent('reply')" :ripple="false" type="primary">등록</a-button>
+						<a-button @click="replyPageButtonGroupClickEvent('reply')" :ripple="false"
+							type="primary">등록</a-button>
 					</v-col>
 				</v-row>
 			</v-card>
 		</div>
 		<!-- 답글 작성 페이지 끝 -->
 		<!-- 수정 페이지 시작 -->
-		<div v-if="pageActionFlag == 'update'" >
+		<div v-if="pageActionFlag == 'update'">
 			<v-card>
 				<div class="pa-5">
 					<v-row align="center" no-gutters>
 						<v-col :cols="12">
-							<v-card-title class="custom-title-4 pa-0">공지사항</v-card-title>
+							<v-card-title class="custom-title-4 pa-0">공지사항 수정</v-card-title>
 						</v-col>
 						<v-col :cols="12" class="mt-4">
 							<v-card-title class="custom-title-7 pa-0">제목</v-card-title>
-							<v-text-field v-model="updateActionData.title" class="v-input__custom" hide-details outlined>
+							<v-text-field v-model="updateActionData.title" class="v-input__custom" hide-details
+								outlined>
 							</v-text-field>
 						</v-col>
-						<v-col :cols="12" style="height: calc(90vh - 270px);" class="mt-4" >
+						<v-col :cols="12" style="height: calc(90vh - 270px);" class="mt-4">
 							<editor ref="tuiUpdateEditor" height="100%" initialEditType="wysiwyg"
 								:initialValue="updateActionData.content" />
 						</v-col>
 						<v-col :cols="6" class="mt-5">
-								<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
-								<div class="" v-if="updateActionData.fileData">
-									<div 
-										v-for="(fileData, index) in updateActionData.fileData"
-										:key="fileData.apndFileId" 
-										class="file-item d-flex justify-space-between">
-										<div class="file-item-detail">
-											<v-icon>mdi-paperclip</v-icon>
-											<span href="#" class="file-item-name">{{ fileData.name }}</span>
-										</div>
-										<a-icon type="delete" class="v-icon pointer" @click="updateActionData.fileData.splice(index, 1)" />
+							<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
+							<div class="" v-if="updateActionData.fileData">
+								<div v-for="(fileData, index) in updateActionData.fileData" :key="fileData.apndFileId"
+									class="file-item d-flex justify-space-between">
+									<div class="file-item-detail">
+										<v-icon>mdi-paperclip</v-icon>
+										<span href="#" class="file-item-name">{{ fileData.name }}</span>
 									</div>
+									<a-icon type="delete" class="v-icon pointer"
+										@click="updateActionData.fileData.splice(index, 1)" />
 								</div>
-								<a-button class="mt-2" icon="upload" @click="$refs.updateInputFile.$refs.input.click()" >
-									업로드
-								</a-button>
-								<v-file-input ref="updateInputFile" multiple show-size v-model="updateActionData.fileData"
-									hide-details="true" class="d-none">
-								</v-file-input>
+							</div>
+							<a-button class="mt-2" icon="upload" @click="$refs.updateInputFile.$refs.input.click()">
+								업로드
+							</a-button>
+							<v-file-input ref="updateInputFile" multiple show-size v-model="updateActionData.fileData"
+								hide-details="true" class="d-none">
+							</v-file-input>
 						</v-col>
 						<v-col :cols="12" class="text-right">
-							<a-button @click="updatePageButtonGroupClickEvent('cancel')" >취소</a-button>
-							<a-button @click="updatePageButtonGroupClickEvent('update')" type="primary" >등록</a-button>
+							<a-button @click="updatePageButtonGroupClickEvent('cancel')">취소</a-button>
+							<a-button @click="updatePageButtonGroupClickEvent('update')" type="primary">등록</a-button>
 						</v-col>
 					</v-row>
 				</div>
@@ -295,8 +289,6 @@ export default {
 				postGrpOrd: null,
 				postOrgNo: null,
 			},
-			dataPathMock: {},
-
 		};
 	},
 	computed: {
@@ -341,7 +333,7 @@ export default {
 			chkOpenTabList: 'chkOpenTabList',
 			getDomain: 'modules/list/getDomain',
 		}),
-		onTest(){
+		onTest() {
 			console.log(this.writeActionData.fileData);
 		},
 		async init() {
@@ -400,7 +392,11 @@ export default {
 		gridInit() {
 			const gridHeight = this.$refs.contents.offsetHeight - 76;
 
-			const myOptions = {};
+			const myOptions = {
+				header: {
+					height: 38,
+				},
+			};
 			this.setGridOption({
 				gridKey: this.gridName,
 				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
@@ -421,7 +417,7 @@ export default {
 					align: 'center',
 					hidden: true,
 				},
-				{ header: '번호', name: 'postNo', width: 150, align: 'center' },
+				{ header: '번호', name: 'postNo', width: 150, align: 'right' },
 				{
 					header: '원글번호',
 					name: 'postOrgNo',
@@ -451,9 +447,9 @@ export default {
 					hidden: true,
 				},
 				{ header: '제목', name: 'title', align: 'left' },
-				{ header: '작성자', name: 'regUserNo', width: 250, align: 'center' },
+				{ header: '작성자', name: 'regUserNo', width: 250, align: 'right' },
 				{ header: '작성일', name: 'regDttm', width: 250, align: 'center' },
-				{ header: '조회수', name: 'viewCnt', width: 150, align: 'center' },
+				{ header: '조회수', name: 'viewCnt', width: 150, align: 'right' },
 				// {header: "파일아이디", name:"apndFileUuid", width:150, align:"center"}, // 수정필요
 			];
 
@@ -475,7 +471,7 @@ export default {
 				resKey: 'postData',
 				sendParam: params,
 			});
-			
+
 			this.setGridData({
 				gridKey: this.gridName,
 				value: res,
@@ -1020,15 +1016,6 @@ const defaultData = {
 	},
 };
 
-import { getPathDataExample } from '@/const/const'
-const dataPathDataExample = getPathDataExample({
-	postNo: '18',
-	title: '오픈공지',
-	regUserNo: '1',
-	regDttm: '2023-01-09 09:39:41',
-	viewCnt: '1'
-}, 10);
-
 </script>
 
 <style lang="scss" scoped>
@@ -1042,23 +1029,41 @@ const dataPathDataExample = getPathDataExample({
 	margin: 2px 0;
 	padding: 4px;
 	background-color: #0000000A;
-	.file-item-name{
+
+	.file-item-name {
 		color: #1677FF;
 	}
 }
+
 ::v-deep {
 	.v-input__slot {
 		padding-left: 8px;
 		padding-right: 8px;
 	}
+
 	.custom-view {
 		border: 1px solid;
 		border-radius: 6px;
 		height: 100%;
+
 		@each $theme in dark, light {
 			@include theme($theme);
-			border-color: map-deep-get($config, #{$theme}, "v-input-textarea-border");;
+			border-color: map-deep-get($config, #{$theme}, "v-input-textarea-border");
+			;
 		}
 	}
+
+	.toastui-editor-mode-switch{
+		font-family: Inter !important;
+		font-size: 1.0rem !important;
+	}
+
+	.toastui-editor-mode-switch .tab-item.active{
+		color: #1677FF
+	}
+
+	.toastui-editor-mode-switch .tab-item{
+		color: #000000E0
+	}
 }
 </style>

From 41095098e251306a27a92f02570968721c84948b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hoang=20Xuan=20Mai/=28Hoang=20Xuan=20Mai=29/=ED=98=84?=
 =?UTF-8?q?=EC=9E=A5=EB=8C=80=EB=A6=AC=EC=9D=B8/SK?= <20074474@skcc.com>
Date: Mon, 4 Aug 2025 16:37:00 +0700
Subject: [PATCH 14/15] fixbug-scrren-12

---
 pages/comm/base/NoticeMngPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/comm/base/NoticeMngPage.vue b/pages/comm/base/NoticeMngPage.vue
index 2ebec5e..c99974f 100644
--- a/pages/comm/base/NoticeMngPage.vue
+++ b/pages/comm/base/NoticeMngPage.vue
@@ -7,7 +7,7 @@
 				<div class="pa-5">
 					<v-row align="center" no-gutters>
 						<v-col :cols="12" class="d-flex align-center justify-space-between">
-							<v-card-title class="pa-0 custom-title-4"></v-card-title>
+							<v-card-title class="pa-0 custom-title-4">공지사항</v-card-title>
 							<div class="d-flex align-center">
 								<!-- <v-btn @click="listPageButtonGroupClickEvent('view')" :ripple="false" class="mr-1">상세보기</v-btn> -->
 								<a-button type="primary" size="large" @click="listPageButtonGroupClickEvent('write')"

From 5735777bb142da2761db2f1511ac6c4ac5ffa205 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguyen=20Van=20Luan/=28Nguyen=20Van=20Luan=29/=ED=98=84?=
 =?UTF-8?q?=EC=9E=A5=EB=8C=80=EB=A6=AC=EC=9D=B8/SK?= <20074472@skcc.com>
Date: Mon, 4 Aug 2025 18:53:30 +0900
Subject: [PATCH 15/15] fixbug

---
 assets/scss/common/grid.scss                  | 20 ++++++++-----
 components/common/button/ActionButtons.vue    | 29 +++++++++----------
 components/common/button/BtnExcelDownload.vue |  2 +-
 .../common/modal/ChangeUserPswdPopPage.vue    |  8 ++---
 .../ems/DataSetInfo/DataSetTagRelTab.vue      |  2 +-
 .../ems/ReadPlcInfo/ReadPlcTagRelTab.vue      |  4 +--
 pages/comm/auth/MenuRoleMngPage.vue           | 16 +++++-----
 pages/comm/auth/UserRoleMngPage.vue           | 11 +++----
 pages/ems/base/EnrgCostCenterMngPage.vue      | 25 ++++++++--------
 pages/ems/effc/EnrgUsePlanPage.vue            | 18 ++++++------
 plugins/gridUtility.js                        |  4 +--
 11 files changed, 71 insertions(+), 68 deletions(-)

diff --git a/assets/scss/common/grid.scss b/assets/scss/common/grid.scss
index 7679f58..1bf19c1 100644
--- a/assets/scss/common/grid.scss
+++ b/assets/scss/common/grid.scss
@@ -98,6 +98,12 @@
   @include theme($theme);
 
   .v-application.#{$theme}-mode {
+    .tui-grid-content-area{
+      .tui-grid-header-area{
+        height: auto !important;
+      }
+    }
+
     .grid-title {
       font-weight: 600;
       font-size: 16px;
@@ -308,13 +314,13 @@
             #{$theme},
             "tui-grid-cell-borderColor"
           );
-          .tui-grid-cell-content {
-            border-right: 1px solid ;
-            border-right-color: map-deep-get($config,
-              #{$theme},
-              "tui-grid-cell-borderColor"
-            );
-          }
+          // .tui-grid-cell-content {
+          //   border-right: 1px solid ;
+          //   border-right-color: map-deep-get($config,
+          //     #{$theme},
+          //     "tui-grid-cell-borderColor"
+          //   );
+          // }
         }
       }
 
diff --git a/components/common/button/ActionButtons.vue b/components/common/button/ActionButtons.vue
index 91a4550..9e75209 100644
--- a/components/common/button/ActionButtons.vue
+++ b/components/common/button/ActionButtons.vue
@@ -1,21 +1,8 @@
 <template>
 	<div class="d-flex flex-row justify-center align-center" style="gap: 12px">
-		<!--<v-btn icon tile :ripple="false" @click="btnActionsFnc('addLeftToRight')">
-			<v-icon>mdi-chevron-right</v-icon>
-		</v-btn> -->
-		<a-button @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost icon="up" >
+		<a-button @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="icons.remove" >
 		</a-button>
-
-		<!--<v-btn
-			icon
-			tile
-			:ripple="false"
-			class="mt-2"
-			@click="btnActionsFnc('removeRightToLeft')"
-		>
-			<v-icon>mdi-chevron-left</v-icon>
-		</v-btn> -->
-		<a-button   @click="btnActionsFnc('addLeftToRight')" type="primary" ghost icon="down">
+		<a-button   @click="btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="icons.add">
 		</a-button>
 	</div>
 </template>
@@ -38,8 +25,18 @@ export default {
 			type: Function,
 			required: true,
 		},
+		directionBtn: {
+			type: String,
+			default: "horizontally" //horizontally, vertically.
+		}
+	},
+	computed: {
+		icons() {
+			return this.directionBtn === "vertically"
+				? { remove: "up", add: "down" }
+				: { remove: "left", add: "right" };
+			},
 	},
-	computed: {},
 	data() {
 		return {};
 	},
diff --git a/components/common/button/BtnExcelDownload.vue b/components/common/button/BtnExcelDownload.vue
index abdcc36..95506f5 100644
--- a/components/common/button/BtnExcelDownload.vue
+++ b/components/common/button/BtnExcelDownload.vue
@@ -45,7 +45,7 @@ export default {
 		size: {
 			type: String,
 			require: false,
-			default: "default", // small, middle, large
+			default: "default", // small, default, large
 		}
 	},
 	data() {
diff --git a/components/common/modal/ChangeUserPswdPopPage.vue b/components/common/modal/ChangeUserPswdPopPage.vue
index 7671d38..fc188b7 100644
--- a/components/common/modal/ChangeUserPswdPopPage.vue
+++ b/components/common/modal/ChangeUserPswdPopPage.vue
@@ -44,8 +44,7 @@
 				<v-card-title>
 					<span class="custom-title-4">비밀번호 {{ isPassword }}</span>
 				</v-card-title>
-				<v-divider></v-divider>
-				<v-card-text>
+				<v-card-text class="pb-4">
 					<v-col>
 						<label for="" class="search-box-label">
 							{{ isPassword }}할 비밀번호를 입력하세요
@@ -73,11 +72,10 @@
 						></v-text-field>
 					</v-col>
 				</v-card-text>
-				<v-divider></v-divider>
-				<v-card-actions>
+				<v-card-actions class="pb-4">
 					<v-spacer></v-spacer>
 					<!-- <v-btn color="primary" dark @click="setUpdate()">확인</v-btn> -->
-					<div>
+					<div class="pr-3">
 						 <a-button @click="close()" class="btn-default">삭제</a-button>
 						 <a-button type="primary" @click="setUpdate()" class="v-btn-add-text">
 							 확인
diff --git a/components/pages/ems/DataSetInfo/DataSetTagRelTab.vue b/components/pages/ems/DataSetInfo/DataSetTagRelTab.vue
index d43aa51..94c86db 100644
--- a/components/pages/ems/DataSetInfo/DataSetTagRelTab.vue
+++ b/components/pages/ems/DataSetInfo/DataSetTagRelTab.vue
@@ -38,7 +38,7 @@
 import { mapState, mapMutations, mapActions } from 'vuex';
 import Buttons from '~/components/common/button/Buttons';
 import Grid from '~/components/common/Grid';
-import { CustumChecbox } from '~/plugins/gridUtility';
+import { CustomCheckbox } from '~/plugins/gridUtility';
 import { CustomNumberEditor } from '~/plugins/gridUtility';
 import Form from '~/components/common/form/Form';
 import mixinGlobal from '@/mixin/global.js';
diff --git a/components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab.vue b/components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab.vue
index 389f825..59177ea 100644
--- a/components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab.vue
+++ b/components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab.vue
@@ -30,7 +30,7 @@
 import { mapState, mapMutations, mapActions } from 'vuex';
 import Buttons from '~/components/common/button/Buttons';
 import Grid from '~/components/common/Grid';
-import { CustumChecbox } from '~/plugins/gridUtility';
+import { CustomCheckbox } from '~/plugins/gridUtility';
 import { CustomNumberEditor } from '~/plugins/gridUtility';
 import Form from '~/components/common/form/Form';
 import mixinGlobal from '@/mixin/global.js';
@@ -185,7 +185,7 @@ export default {
 					align: 'center',
 					width: 100,
 					// renderer: {
-					//   type: CustumChecbox,
+					//   type: CustomCheckbox,
 					//   options: {
 					//     onlyone: true,
 					//     // disabled: true
diff --git a/pages/comm/auth/MenuRoleMngPage.vue b/pages/comm/auth/MenuRoleMngPage.vue
index 157cda8..d2c1085 100644
--- a/pages/comm/auth/MenuRoleMngPage.vue
+++ b/pages/comm/auth/MenuRoleMngPage.vue
@@ -342,7 +342,7 @@ export default {
 			//---------------------gridOption 설정 끝----------------------------
 
 			//---------------------gridName3의 체크박스 설정 시작----------------------------
-			class CustumChecbox {
+			class CustomCheckbox {
 				constructor(props) {
 					const el = document.createElement('input');
 					const { grid, rowKey, columnInfo } = props;
@@ -433,7 +433,7 @@ export default {
 					name: 'useFg',
 					align: 'center',
 					renderer: {
-						type: CustumChecbox,
+						type: CustomCheckbox,
 					},
 				},
 				{
@@ -441,7 +441,7 @@ export default {
 					name: 'authCd1',
 					align: 'center',
 					renderer: {
-						type: CustumChecbox,
+						type: CustomCheckbox,
 					},
 				},
 				{
@@ -449,7 +449,7 @@ export default {
 					name: 'authCd2',
 					align: 'center',
 					renderer: {
-						type: CustumChecbox,
+						type: CustomCheckbox,
 					},
 				},
 				{
@@ -457,7 +457,7 @@ export default {
 					name: 'authCd3',
 					align: 'center',
 					renderer: {
-						type: CustumChecbox,
+						type: CustomCheckbox,
 					},
 				},
 				{
@@ -465,7 +465,7 @@ export default {
 					name: 'authCd4',
 					align: 'center',
 					renderer: {
-						type: CustumChecbox,
+						type: CustomCheckbox,
 					},
 				},
 				{
@@ -473,7 +473,7 @@ export default {
 					name: 'authCd5',
 					align: 'center',
 					renderer: {
-						type: CustumChecbox,
+						type: CustomCheckbox,
 					},
 				},
 				{
@@ -481,7 +481,7 @@ export default {
 					name: 'authCd6',
 					align: 'center',
 					renderer: {
-						type: CustumChecbox,
+						type: CustomCheckbox,
 					},
 				},
 			];
diff --git a/pages/comm/auth/UserRoleMngPage.vue b/pages/comm/auth/UserRoleMngPage.vue
index e5100d0..dd8bc6c 100644
--- a/pages/comm/auth/UserRoleMngPage.vue
+++ b/pages/comm/auth/UserRoleMngPage.vue
@@ -151,6 +151,7 @@
 												:leftGridName="gridName2"
 												:rightGridName="gridName3"
 												:btnActionsFnc="dualGridBtnActions"
+												directionBtn="vertically"
 											/>
 										</v-col>
 										<v-col :cols="12" class="h100">
@@ -981,7 +982,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pr-4',
+			class: 'py-2 pl-4',
 			iconShow: true,
 			required: true,
 		},
@@ -1005,7 +1006,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pr-4',
+			class: 'py-2 pl-4',
 			iconShow: true,
 			required: true,
 		},
@@ -1031,7 +1032,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pr-4',
+			class: 'py-2 pl-4',
 			iconShow: true,
 		},
 		{
@@ -1054,7 +1055,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pr-4',
+			class: 'py-2 pl-4',
 			iconShow: true,
 			placeholder: '시스템 자동입력',
 		},
@@ -1078,7 +1079,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pr-4',
+			class: 'py-2 pl-4',
 			iconShow: true,
 			placeholder: '시스템 자동입력',
 		},
diff --git a/pages/ems/base/EnrgCostCenterMngPage.vue b/pages/ems/base/EnrgCostCenterMngPage.vue
index 764347f..b681254 100644
--- a/pages/ems/base/EnrgCostCenterMngPage.vue
+++ b/pages/ems/base/EnrgCostCenterMngPage.vue
@@ -4,7 +4,7 @@
 			<v-col :cols="12">
 				<v-card class="searchFilter">
 					<v-row align="center" no-gutters>
-						<v-col :cols="3">
+						<v-col :cols="2.5">
 							<component
 								:is="'selectCodeList'"
 								:parentPrgmId="myPrgmId"
@@ -14,7 +14,7 @@
 								:addAll="true"
 							/>
 						</v-col>
-						<v-col :cols="3">
+						<v-col :cols="2.5">
 							<component
 								:is="'selectCodeList'"
 								:parentPrgmId="myPrgmId"
@@ -24,8 +24,8 @@
 								:addAll="true"
 							/>
 						</v-col>
-						<v-col :cols="3">
-							<!-- 사업장 -->
+						<!-- 사업장 -->
+						<!-- <v-col :cols="3">
 							<div style="visibility:hidden">
 								<component
 									:is="'SelectBlocMstr'"
@@ -33,13 +33,8 @@
 									:parentPrgmId="myPrgmId"
 								/>
 							</div>
-						</v-col>
-						<v-col :cols="3" class="text-right">
-							<BtnSearch @click="search" />
-						</v-col>
-					</v-row>
-					<v-row align="center" no-gutters>
-						<v-col :cols="3">
+						</v-col> -->
+						<v-col :cols="2.5">
 							<component
 								:is="'selectCodeList'"
 								:parentPrgmId="myPrgmId"
@@ -49,7 +44,7 @@
 								:addAll="true"
 							/>
 						</v-col>
-						<v-col :cols="6">
+						<v-col :cols="2.5">
 							<InputText
 								:parentPrgmId="myPrgmId"
 								label="공정명"
@@ -59,6 +54,12 @@
 								:searchOption="true"
 							/>
 						</v-col>
+						<v-col class="text-right">
+							<BtnSearch @click="search" />
+						</v-col>
+					</v-row>
+					<v-row align="center" no-gutters>
+						
 					</v-row>
 				</v-card>
 			</v-col>
diff --git a/pages/ems/effc/EnrgUsePlanPage.vue b/pages/ems/effc/EnrgUsePlanPage.vue
index 39709b6..73e1e38 100644
--- a/pages/ems/effc/EnrgUsePlanPage.vue
+++ b/pages/ems/effc/EnrgUsePlanPage.vue
@@ -10,15 +10,15 @@
 						</v-col>
 						<v-col :cols="2.5">
 							<component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue01" :itemList="selectValueList01"
-								:label="'FAB'" @update:propsValue="selectValue01 = $event" :iconShow="false" customClass="select-large" />
+								:label="'FAB'" @update:propsValue="selectValue01 = $event" :iconShow="true" customClass="select-large" />
 						</v-col>
 						<v-col :cols="2.5">
 							<component :is="'SelectBox'" ref="SelectBox2" :propsValue="selectValue02" :itemList="selectValueList02"
-								:label="'설비종류'" @update:propsValue="selectValue02 = $event" :iconShow="false" customClass="select-large"/>
+								:label="'설비종류'" @update:propsValue="selectValue02 = $event" :iconShow="true" customClass="select-large"/>
 						</v-col>
 						<v-col :cols="2.5">
 							<component :is="'SelectBox'" ref="SelectBox3" :propsValue="selectValue03" :itemList="selectValueList03"
-								:label="'설비그룹'" @update:propsValue="selectValue03 = $event" :iconShow="false" customClass="select-large" />
+								:label="'설비그룹'" @update:propsValue="selectValue03 = $event" :iconShow="true" customClass="select-large" />
 						</v-col>
 
 						<BtnSearch size="large" @click="search" />
@@ -33,7 +33,7 @@
 		<v-row ref="contents">
 			<v-col :cols="12" >
 				<v-card class="pb-5">
-					<div class="d-flex align-center justify-space-between pa-4">
+					<div class="d-flex align-center justify-space-between py-4 px-4">
 						<v-card-title class="pa-0 custom-title-4">설비별 에너지 계획 리스트</v-card-title>
 						<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
 					</div>
@@ -291,7 +291,7 @@ export default {
 				},
 			};
 
-			class CustumButton {
+			class CustomButton {
 				constructor(props) {
 					const { grid, rowKey, columnInfo } = props;
 
@@ -304,7 +304,7 @@ export default {
 					$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
 					const el2 = document.createElement('button');
 					$(el2).addClass('edit-btn blue--text');
-					el2.innerText = 'Edit';
+					el2.innerText = '편집하다';
 					elDiv.appendChild(el2);
 
 					this.el = elDiv;
@@ -352,7 +352,7 @@ export default {
 					header: 'NO',
 					name: 'rowNum',
 					width: 40,
-					align: 'center',
+					align: 'right',
 					// hidden: true,
 				},
 				{
@@ -389,7 +389,7 @@ export default {
 					// `;
 					// }
 					renderer: {
-						type: CustumButton,
+						type: CustomButton,
 						options: {
 							value: '계획수정',
 						},
@@ -402,7 +402,7 @@ export default {
 					align: 'center',
 					hidden: true,
 					renderer: {
-						type: CustumButton,
+						type: CustomButton,
 						options: {
 							value: '계획수정',
 						},
diff --git a/plugins/gridUtility.js b/plugins/gridUtility.js
index 1593079..e39230e 100644
--- a/plugins/gridUtility.js
+++ b/plugins/gridUtility.js
@@ -115,7 +115,7 @@ export class CustomCalcNumberEditor {
 	}
 }
 
-export class CustumChecbox {
+export class CustomCheckbox {
 	constructor(props) {
 		const el = document.createElement('input');
 		const { grid, rowKey, columnInfo } = props;
@@ -169,7 +169,7 @@ export class CustumChecbox {
 	}
 }
 
-export class CustumButton {
+export class CustomButton {
 	constructor(props) {
 		const el = document.createElement('button');
 		const { grid, rowKey, columnInfo } = props;