From bf6d03df63dd5918cb047307c6fb8a1185257a58 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: Tue, 5 Aug 2025 17:28:12 +0700
Subject: [PATCH] fixbugs grid

---
 assets/scss/common.scss                       | 207 ++++--------------
 assets/scss/common/grid.scss                  |  13 +-
 assets/scss/var.scss                          |   7 +-
 components/common/Grid.vue                    |  65 +++---
 components/common/form/SelectBox.vue          |   4 +-
 components/common/modal/EqpmSelectPop.vue     |  27 ++-
 components/common/select/SelectBlocMstr.vue   |   4 +-
 components/common/select/SelectBox.vue        |  10 +-
 components/common/select/SelectBoxMulti.vue   |  23 +-
 components/common/select/selectCodeList.vue   |   4 +-
 .../ems/DataSetInfo/DataSetTagRelTab.vue      |   2 +-
 .../pages/ems/EqpmInfo/EqpmAddInfoTab.vue     |   6 +-
 pages/ems/effc/DataSetMngPage.vue             |   4 +-
 pages/ems/effc/EnrgReptMngPage.vue            |  30 ++-
 14 files changed, 169 insertions(+), 237 deletions(-)

diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index f3d3a69..3c6f2d4 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -611,48 +611,12 @@ a {
       }
     }
 
-    // .v-banner {
-    //   &__wrapper {
-    //     border-bottom-color: map-deep-get($config,
-    //       #{$theme},
-    //       "v-banner-border-color"
-    //     ) !important;
-    //   }
-    // }
-
     .v-navigation-drawer__append {
       >p {
         color: map-deep-get($config, #{$theme}, "v-banner-border-color" ) !important;
-        // @if $theme ==dark {
-        //   color: rgba(255, 255, 255, 0.6);
-        // }
-
-        // @else {
-        //   color: #999;
-        // }
       }
     }
 
-    // .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;
-    //     }
-    //   }
-    // }
-
     .border-bottom-1 {
       border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color");
     }
@@ -809,114 +773,7 @@ a {
             }
 
           }
-
-
         }
-
-        // &>.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"
-        //     //       );
-        //     //     }
-        //     //   }
-        //     // }
-        //   }
-        // }
-
       }
     }
 
@@ -1259,26 +1116,47 @@ a {
     }
 
     .v-list {
-      background-color: map-deep-get($config,
-        #{$theme},
-        "tui-datepicker-backgroundColor"
-      );
-      border: 1px solid map-deep-get($config, #{$theme}, "tui-datepicker-border-color");
-      border-radius: 4px;
+			background-color: map-deep-get($config,
+				#{$theme},
+				"tui-datepicker-backgroundColor"
+			);
+			border: 1px solid map-deep-get($config, #{$theme}, "tui-datepicker-border-color");
+			border-radius: 4px;
+			padding: 4px;
+	
+			&-item--active {
+				border-radius: 4px;
+				&:before {
+					opacity: 0;
+				}
+	
+				.v-list-item__title {
+					color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
+				}
+			}
+	
+			&.v-select-list{
+				>.v-list-item {
+					margin-bottom: 4px;
+					.anticon {
+						&.anticon-check {
+							display: none;
+						}
+					}
+					&[aria-selected="true"] {
+						border-radius: 8px;
+						background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg");
+						.anticon {
+							&.anticon-check {
+								display: block;
+								color: map-deep-get($config, #{$theme}, "v-icon-blue");
+							}
+						}
+					}
+				}
+			}
 
-      &-item--active {
-        &:before {
-          opacity: 0;
-        }
-
-        .v-list-item__title {
-          color: map-deep-get($config,
-            #{$theme},
-            "tui-datepicker-calendar-color"
-          );
-        }
-      }
-    }
+		}
 
     .theme--white {
       .toastui-editor-contents {
@@ -1396,11 +1274,6 @@ a {
     }
   }
 
-
-
-
-
-
 }
 
 
diff --git a/assets/scss/common/grid.scss b/assets/scss/common/grid.scss
index 39ee11e..d7a0349 100644
--- a/assets/scss/common/grid.scss
+++ b/assets/scss/common/grid.scss
@@ -155,6 +155,12 @@
         //   "tui-grid-cell-borderColor"
         // );
         width: auto !important;
+        .tui-grid-table-container{
+          width: 100% !important;
+          .tui-grid-table {
+            width: 100% !important;
+          }
+        }
       }
 
       &-container,
@@ -164,6 +170,7 @@
  
         & ::-webkit-scrollbar {
           width: $scrollbar-width !important;
+          width: 0 !important;
           height: $scrollbar-width !important;
           -webkit-appearance: initial;
           // background-color: map-deep-get($config,
@@ -183,7 +190,7 @@
         }
 
         & ::-webkit-scrollbar-thumb {
-          width: 50px !important;
+          // width: 50px !important;
           height: 50px !important;
           background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
           // background-color: rgba(0, 0, 0, 0);
@@ -356,6 +363,10 @@
           #{$theme},
           "tui-grid-cell-backgroundColor"
         );
+        width: 100% !important;
+        .tui-grid-table {
+          width: 100% !important;
+        }
       }
 
       &-row-odd,
diff --git a/assets/scss/var.scss b/assets/scss/var.scss
index 8357c06..b4b3846 100644
--- a/assets/scss/var.scss
+++ b/assets/scss/var.scss
@@ -110,7 +110,7 @@ $config: (
     tui-grid-border-horziontal-color: #212224,
     tui-grid-border-vertical-color: #FFFFFF0F,
     tui-grid-cell-backgroundColor: #212224,
-    tui-grid-cell-color: #fff,
+    tui-grid-cell-color: #FFFFFFA6,
     tui-grid-cell-insert-color: #13636c,
     tui-grid-cell-selected-color: #0A224F,
     tui-grid-cell-modify-color: #13636c,
@@ -211,7 +211,6 @@ $config: (
     router-tab-item-hover-color: #1677ff,
     router-tab-slot-end-button-backgroundColor: #3f4d7d,
     v-btn-backgroundColor: #1677ff,
-    // v-btn-backgroundColor: #fff,
     v-box: #FFFFFF,
     v-banner-border-color: #ddd,
     v-treeview-node-root-backgroundColor: #FFFFFF,
@@ -253,10 +252,10 @@ $config: (
     tui-grid-border-vertical-color: rgba(0, 0, 0, 0.06), //#d4d4d4,
     tui-grid-cell-backgroundColor: #fff,
     tui-grid-cell-color: #000000E0,
-    tui-grid-cell-insert-color: #13636c,
+    tui-grid-cell-insert-color: #FFFBE6,
     tui-grid-cell-selected-color: #E6F4FF,
     tui-grid-cell-modify-color: #e6f5f7,
-    tui-grid-cell-removed-color: #fddde1,
+    tui-grid-cell-removed-color: #FFF1F0,
     tui-grid-cell-hover-backgroundColor: #f5f5f5,
     v-tabs-items-border-color: #0000000F,
     v-tabs-backgroundColor: #ddd,
diff --git a/components/common/Grid.vue b/components/common/Grid.vue
index 1641bd4..b61f1ef 100644
--- a/components/common/Grid.vue
+++ b/components/common/Grid.vue
@@ -617,62 +617,62 @@ export default {
 			list.map(item => this.gridInstance.invoke('check', item));
 		},
 		refreshLayout() {
+			// console.log("---------DEBUG---refreshLayout: ");
 			this.gridInstance.invoke('refreshLayout');
 		},
 		refreshGrid(){
+      console.log("---------DEBUG---refreshGrid: ");
 			// console.log("refreshLayout",this.$refs['tuigrid' + this.gridName])
       var store = this.$refs['tuigrid' + this.gridName].gridInstance.store;
       var containerEl = this.$refs['tuigrid' + this.gridName].$el;
       // var containerEl = document.querySelector('.tui-grid-container')
       var parentEl = containerEl.parentElement;
-      
-      
-      
-      // console.log("containerEl : ",containerEl);
-      // console.log('parentEl : ', parentEl)
-		// 	function refreshLayout(store, containerEl, parentEl) {
-        var dimension = store.dimension;
-        var autoWidth = dimension.autoWidth, fitToParentHeight = dimension.fitToParentHeight;
-        var clientHeight = containerEl.clientHeight, clientWidth = containerEl.clientWidth, scrollTop = containerEl.scrollTop, scrollLeft = containerEl.scrollLeft;
-        var _a = containerEl.getBoundingClientRect(), top = _a.top, left = _a.left;
-        this.setOffsetTop(store, top + scrollTop);
-        // store.dimension.setOffsetTop = top + scrollTop;
-        this.setOffsetLeft(store, left + scrollLeft);
-        // store.dimension.headerHeight = left + scrollLeft;
-        this.setWidth(store, clientWidth, autoWidth);
-        // store.dimension.autoWidth = autoWidth;
-        // store.dimension.width = clientWidth;
-        // console.log("###",getComputedStyle(parentEl));
-          // console.log("fitToParentHeight : ",fitToParentHeight);
-          // console.log("parentEl : ",parentEl)
-          // console.log("parentEl.clientHeight" , parentEl.clientHeight)
-          // console.log("clientHeight : ",clientHeight);
-        if (parentEl && parentEl.clientHeight !== clientHeight) {
-            var _b = getComputedStyle(parentEl), paddingTop = _b.paddingTop, paddingBottom = _b.paddingBottom;
-            this.setHeight(store, parentEl.clientHeight - (parseFloat(paddingTop) + parseFloat(paddingBottom)));
-        }
+
+			// console.log("---------DEBUG---containerEl: ",containerEl);
+      // console.log('---------DEBUG---parentEl: ', parentEl)
+			// 	function refreshLayout(store, containerEl, parentEl) {
+			var dimension = store.dimension;
+			var autoWidth = dimension.autoWidth, fitToParentHeight = dimension.fitToParentHeight;
+			var clientHeight = containerEl.clientHeight, clientWidth = containerEl.clientWidth, scrollTop = containerEl.scrollTop, scrollLeft = containerEl.scrollLeft;
+			var _a = containerEl.getBoundingClientRect(), top = _a.top, left = _a.left;
+			this.setOffsetTop(store, top + scrollTop);
+			// store.dimension.setOffsetTop = top + scrollTop;
+			this.setOffsetLeft(store, left + scrollLeft);
+			// store.dimension.headerHeight = left + scrollLeft;
+			this.setWidth(store, clientWidth, autoWidth);
+			// store.dimension.autoWidth = autoWidth;
+			// store.dimension.width = clientWidth;
+			// console.log("###",getComputedStyle(parentEl));
+			// console.log("fitToParentHeight : ",fitToParentHeight);
+			// console.log("parentEl : ",parentEl)
+			// console.log("parentEl.clientHeight" , parentEl.clientHeight)
+			// console.log("clientHeight : ",clientHeight);
+			if (parentEl && parentEl.clientHeight !== clientHeight) {
+					var _b = getComputedStyle(parentEl), paddingTop = _b.paddingTop, paddingBottom = _b.paddingBottom;
+					this.setHeight(store, parentEl.clientHeight - (parseFloat(paddingTop) + parseFloat(paddingBottom)));
+			}
     // }
 		},
     setOffsetTop(store, offsetTop) {
-      // console.log("setOffsetTop");
+			// console.log("---------DEBUG---setOffsetTop: ");
       store.dimension.offsetTop = offsetTop;
     },
     setWidth(_a, width, autoWidth) {
-      // console.log("setWidth");
+			// console.log("---------DEBUG---setWidth: ");
       var dimension = _a.dimension;
       dimension.autoWidth = autoWidth;
       dimension.width = width;
     },
     setHeaderHeight(store, height) {
-      // console.log("setHeaderHeight")
+			// console.log("---------DEBUG---setHeaderHeight: ");
       store.dimension.headerHeight = height;
     },
     setOffsetLeft(store, offsetLeft) {
-      // console.log("setOffsetLeft")
+			// console.log("---------DEBUG---setOffsetLeft: ");
       store.dimension.offsetLeft = offsetLeft;
     },
 		setHeight(_a,height){
-      // console.log("setHeight");
+			// console.log("---------DEBUG---setHeight: ");
       var dimension = _a.dimension;
       var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth;
       dimension.bodyHeight = height - headerHeight - summaryHeight - tableBorderWidth;
@@ -703,10 +703,11 @@ export default {
 		// resetData() {
 		//   // console.log("resetData = ", this.tuigridProps.data);
 		//   this.$refs.tuigrid.invoke("resetData", this.tuigridProps.data);
-		// }
+		// },
 	},
 };
 </script>
+
 <style scoped lang="scss">
 ::v-deep .tui-grid-container {
 	.tui-grid-content-area {
diff --git a/components/common/form/SelectBox.vue b/components/common/form/SelectBox.vue
index b068cff..b25d8cd 100644
--- a/components/common/form/SelectBox.vue
+++ b/components/common/form/SelectBox.vue
@@ -17,7 +17,9 @@
 				:item-text="typeof item.list != 'string' ? 'text' : item.itemText"
 				:item-value="typeof item.list != 'string' ? 'value' : item.itemValue" outlined :hide-details="true"
 				class="v-select__custom" :disabled="item.disabled || false" :readonly="item.readonly || false"
-				:required="item.required || false" @change="modifyValue($event, item.valueNm)" append-icon="">
+				:required="item.required || false" @change="modifyValue($event, item.valueNm)" append-icon="" 
+				:menu-props="{ top: false, offsetY: true }"
+			>
 
 				<template v-slot:append>
 					<!-- Custom SVG icon -->
diff --git a/components/common/modal/EqpmSelectPop.vue b/components/common/modal/EqpmSelectPop.vue
index 959de8b..4d28f74 100644
--- a/components/common/modal/EqpmSelectPop.vue
+++ b/components/common/modal/EqpmSelectPop.vue
@@ -1,6 +1,6 @@
 <template>
 	<v-row class="search-box" align="center" no-gutters>
-		<v-col v-if="label" :cols="labelCols">
+		<v-col v-if="label" :cols="labelCols" class="mr-2">
 			<label for="" class="search-box-label">
 				<v-icon v-if="iconShow" small
 					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
@@ -8,13 +8,23 @@
 			</label>
 		</v-col>
 		<v-col :cols="textCols">
-			<v-text-field readonly append-icon="" :class="['v-input__custom', customClass]"
-				@click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true" :required="required || false"
-				:disabled="disabled || false"><template v-slot:append>
+			<v-text-field
+				readonly
+				v-model="selectValue"
+				append-icon="mdi-magnify"
+				:class="['v-input__custom', customClass]"
+				@click="dialogOpenCloseEvent(dialog)"
+				outlined
+				:hide-details="true"
+				:required="required || false"
+				:disabled="disabled || false"
+				:placeholder="placeholder"
+			>
+				<template v-slot:append>
 					<!-- Custom SVG icon -->
 					<v-icon>$icoSearch</v-icon>
-
-				</template></v-text-field>
+				</template>
+			</v-text-field>
 		</v-col>
 		<v-dialog ref="popModal" v-model="dialog" width="800" scrollable>
 			<v-card style="height: 90vh;">
@@ -121,6 +131,11 @@ export default {
 			require: false,
 			default: '전력 계약 정보',
 		},
+		placeholder: {
+			type: String,
+			require: false,
+			default: '',
+		},
 		valueNm: {
 			type: String,
 			require: false,
diff --git a/components/common/select/SelectBlocMstr.vue b/components/common/select/SelectBlocMstr.vue
index a94cc05..c904940 100644
--- a/components/common/select/SelectBlocMstr.vue
+++ b/components/common/select/SelectBlocMstr.vue
@@ -9,7 +9,9 @@
 		<v-col :cols="label ? textCols : ''">
 			<v-select v-model="selectValue" :items="searchParam[parentPrgmId].blocMstrList" 
 				item-text="blocNm" item-value="idx" append-icon="" outlined
-				:hide-details="true" :class="['v-select__custom', customClass]">
+				:hide-details="true" :class="['v-select__custom', customClass]"
+				:menu-props="{ top: false, offsetY: true }"
+			>
 				<template v-slot:append><v-icon>$icoChevronDown</v-icon></template>
 			</v-select>
 		</v-col>
diff --git a/components/common/select/SelectBox.vue b/components/common/select/SelectBox.vue
index 2cd5ccd..889ded5 100644
--- a/components/common/select/SelectBox.vue
+++ b/components/common/select/SelectBox.vue
@@ -14,12 +14,14 @@
 		<v-col :cols="label ? textCols : ''">
 			<v-select v-model="innerValue" :items="itemList" item-text="text" item-value="value" solo outlined
 				:hide-details="true" append-icon="" :class="['v-select__custom', customClass]" :disabled="disabled"
-				:readonly="readonly"><template v-slot:append>
+				:readonly="readonly"
+				:menu-props="{ top: false, offsetY: true }"	
+			>
+				<template v-slot:append>
 					<!-- Custom SVG icon -->
 					<v-icon>$icoChevronDown</v-icon>
-
-
-				</template></v-select>
+				</template>
+			</v-select>
 			<!-- @change="updateBlocCode($event)" -->
 		</v-col>
 	</v-row>
diff --git a/components/common/select/SelectBoxMulti.vue b/components/common/select/SelectBoxMulti.vue
index 35550da..2086baa 100644
--- a/components/common/select/SelectBoxMulti.vue
+++ b/components/common/select/SelectBoxMulti.vue
@@ -24,9 +24,24 @@
 				:disabled="disabled"
 				:readonly="readonly"
 				append-icon=""
-				><template v-slot:append>
+				:menu-props="{ top: false, offsetY: true }"
+				>
+				<template v-slot:append>
 					<v-icon>$icoChevronDown</v-icon>
-				</template></v-select>
+				</template>
+
+				<template v-slot:item="{item, attrs, on, props}">
+					<v-list-item v-bind="attrs" v-on="on" >
+						<v-list-item-content>
+							<v-list-item-title class="d-flex justify-space-between">
+								{{item.text}}
+								<a-icon type="check" ></a-icon>
+							</v-list-item-title>
+						</v-list-item-content>
+					</v-list-item>
+				</template>
+
+			</v-select>
 		</v-col>
 	</v-row>
 </template>
@@ -125,4 +140,6 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped lang="scss">
+
+</style>
diff --git a/components/common/select/selectCodeList.vue b/components/common/select/selectCodeList.vue
index eb62857..f2cb7ab 100644
--- a/components/common/select/selectCodeList.vue
+++ b/components/common/select/selectCodeList.vue
@@ -11,7 +11,9 @@
 		<v-col :cols="label ? textCols : ''">
 			<v-select v-model="selectValue" :items="searchParam[parentPrgmId][dataKey + 'List']" item-text="commCdNm"
 				item-value="commCd" outlined :hide-details="true" append-icon=""
-				:class="['v-select__custom', customClass]">
+				:class="['v-select__custom', customClass]"
+				:menu-props="{ top: false, offsetY: true }"
+			>
 				<template v-slot:append>
 					<v-icon>$icoChevronDown</v-icon>
 				</template>
diff --git a/components/pages/ems/DataSetInfo/DataSetTagRelTab.vue b/components/pages/ems/DataSetInfo/DataSetTagRelTab.vue
index 94c86db..e5c4fa6 100644
--- a/components/pages/ems/DataSetInfo/DataSetTagRelTab.vue
+++ b/components/pages/ems/DataSetInfo/DataSetTagRelTab.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="d-flex justify-space-between align-center" style="min-height: 80px;">
-      <span class="txt custom-title-4-new">Data Set TAG 연결 정보</span>
+      <span class="txt custom-subtitle-tab">Data Set TAG 연결 정보</span>
       <Buttons :parentPrgmId="parentPrgmId" :bindingData="gridName" :detailList="detailDataSetTagList"
         :btnActionsFnc="btnActions" />
     </div>
diff --git a/components/pages/ems/EqpmInfo/EqpmAddInfoTab.vue b/components/pages/ems/EqpmInfo/EqpmAddInfoTab.vue
index 2987f82..c96013a 100644
--- a/components/pages/ems/EqpmInfo/EqpmAddInfoTab.vue
+++ b/components/pages/ems/EqpmInfo/EqpmAddInfoTab.vue
@@ -55,9 +55,9 @@ export default {
 			dataPathMock: {
         'rowDetailGrid' : {
           column: [
-            { header: '추가 정보', name: 'id', headerAlign: 'left' },
-            { header: 'Data 구분', name: 'lable', headerAlign: 'left' },
-            { header: '추가 정보 값', name: 'type', headerAlign: 'left' },
+            { header: '추가 정보', name: 'id', headerAlign: 'left', align: 'left', },
+            { header: 'Data 구분', name: 'lable', headerAlign: 'left', align: 'left' },
+            { header: '추가 정보 값', name: 'type', headerAlign: 'left', align: 'right' },
             // { header: '비고', name: 'note', headerAlign: 'left' }
           ],
           data: dataPathDataExample,
diff --git a/pages/ems/effc/DataSetMngPage.vue b/pages/ems/effc/DataSetMngPage.vue
index cf3e12c..b80f853 100644
--- a/pages/ems/effc/DataSetMngPage.vue
+++ b/pages/ems/effc/DataSetMngPage.vue
@@ -27,7 +27,7 @@
               </v-col>
               <v-col class="text-right d-flex align-end align-self-end justify-end">
                 <a-button @click="jamoviClickEvent('view')" type="primary" :ripple="false" class="mr-1"
-                  depressed size="large">Jamovi</a-button>
+                  depressed size="large">JAMOVI</a-button>
                 <BtnSearch @click="search" size="large" />
               </v-col>
             </v-row>
@@ -283,7 +283,7 @@ export default {
         {
           header: '모델링 DataSet ID',
           name: 'dataSetId',
-          align: 'center',
+          align: 'left',
           width: 180,
         },
         {
diff --git a/pages/ems/effc/EnrgReptMngPage.vue b/pages/ems/effc/EnrgReptMngPage.vue
index a22005e..35a7a1a 100644
--- a/pages/ems/effc/EnrgReptMngPage.vue
+++ b/pages/ems/effc/EnrgReptMngPage.vue
@@ -21,22 +21,21 @@
 								:itemList="selectValueList03" :label="'FAB'" :multiple="fabMultiple"
 								@update:propsValue="selectValue03 = $event" :labelCols="12" :textCols="12" customClass="select-large" />
 						</v-col>
-
-					</v-row>
-					<v-row align="center" no-gutters>
 						<v-col :cols="3">
 							<!-- 효율지표 -->
 							<component ref="effcIdxSelect" :is="'SelectBoxMulti'" :propsValue="selectValue04"
 								:itemList="selectValueList04" :label="'효율지표'" :multiple="effcIdxMultiple"
 								@update:propsValue="selectValue04 = $event" :labelCols="12" :textCols="12" customClass="select-large" />
 						</v-col>
+					</v-row>
+					<v-row align="center" no-gutters>
 						<v-col :cols="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">
+						<v-col :cols="6.5" class="text-right d-flex align-end justify-end align-self-end">
 							<!-- 조회버튼 -->
-							<a-button type="primary" class="d-inline-flex-1 mr-1" size="large" @click="createExcel()">엑셀</a-button>
+							<a-button icon="file-excel" class="d-inline-flex-1 mr-1" size="large" @click="createExcel()">엑셀</a-button>
 							<BtnSearch @click="search" size="large"  />
 						</v-col>
 					</v-row>
@@ -62,15 +61,23 @@
 							<v-col :cols="3">
 								<v-card-title class="pa-0">설비별 효율지표 Trend</v-card-title>
 							</v-col>
-							<!-- <v-col :cols="5"></v-col> -->
 							<v-col :cols="4" class="d-flex justify-space-end" >
-								<component class="text-right mr-2" ref="EqpmSelectPop" :is="'EqpmSelectPop'" :label="''" :labelCols="1"
-									:textCols="12" :valueNm="'eqpmId'" :parentPrgmId="myPrgmId" :eqpmGrpDisabled="true"
-									:fabDisabled="true"  :isMulti="true" />
+									<component
+										class="text-right mr-2"
+										ref="EqpmSelectPop"
+										label=""
+										placeholder="설비..."
+										is="EqpmSelectPop"
+										valueNm="eqpmId"
+										:textCols="12"
+										:parentPrgmId="myPrgmId"
+										:eqpmGrpDisabled="true"
+										:fabDisabled="true"
+										:iconShow="false"
+										:isMulti="true"
+									/>
 								<a-button @click="getEqpmData()" type="primary" >조회</a-button>
 							</v-col>
-							<!-- <v-col :cols="1">
-							</v-col> -->
 						</v-row>
 					</div>
 					<div ref="chartParent" style="height: 100%">
@@ -316,6 +323,7 @@ export default {
 				legend: {
 					icon: 'circle',
 					top: 'top',
+					size: '8'
 				},
 				grid: {
 					top: '10%',