Merge branch 'dev' of http://218.237.212.51:30003/gitadmin/sk_fems_ui into dev-trungvq7-0729

commit 0608
Merge pull request 'fix bugs' (#39 ) from dev-dungtv-0806 into dev
2025-08-06 19:03:14 +09:00 · 2025-08-06 19:00:29 +09:00 · 2025-08-06 18:50:46 +09:00 · 2025-08-06 16:43:12 +07:00 · 2025-08-06 16:31:44 +07:00 · 2025-08-06 12:13:45 +09:00
31 changed files with 598 additions and 602 deletions
--- 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"
-        //     //       );
-        //     //     }
-        //     //   }
-        //     // }
-        //   }
-        // }
-
      }
    }

@ -1003,7 +860,7 @@ a {
          );

          .day-label {
-            color: map-deep-get($config, #{$theme}, "non-activate");
+            color: map-deep-get($config, #{$theme}, "card-text-title-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 {
    }
  }

-
-
-
-
-
 }


--- a/assets/scss/common/grid.scss
+++ b/assets/scss/common/grid.scss
@ -17,18 +17,6 @@
    border: 0 !important;
  }

-  // &-body-container {
-  //   width: 100% !important;
-  // }
-
-  // &-table {
-  //   width: 100% !important;
-  // }
-
-  // &-lside-area .tui-grid-body-area {
-  //   margin-right: -11px;
-  // }
-
  &-lside-area .tui-grid-scrollbar-left-bottom {
    display: none;
  }
@ -68,6 +56,12 @@
    font-weight: 400;
  }

+  
+  th[data-column-name="_checked"] {
+    padding-left: 0;
+  }
+
+
 }

 .tui-grid-table{
@ -75,6 +69,13 @@
  .tui-grid-cell-has-input .tui-grid-cell-content {
    padding: 8px;
  }
+
+  th[data-column-name="_checked"] {
+    &.tui-grid-cell-header  {
+      padding-left: 0;
+    }
+    
+  }
 }

 .treeGrid {
@ -150,48 +151,28 @@

      &-body-container{
        border-right: 0;
-        // border-right-color: map-deep-get($config,
-        //   #{$theme},
-        //   "tui-grid-cell-borderColor"
-        // );
+        // position: relative;
        width: auto !important;
+
+        .tui-grid-table-container{
+          // width: 100% !important;
+          .tui-grid-table {
+            // width: 100% !important;
+            // table-layout: fixed;
+            // th, td {
+            //   &:last-child{
+            //     width: auto !important;
+            //   }
+            // }
+          }
+        }
      }

-      &-container,
-      &-summary-area {
+      &-summary-area,
+      &-container {
        font-family: Inter;
-        // color: #000000E0;
 
-        & ::-webkit-scrollbar {
-          width: $scrollbar-width !important;
-          height: $scrollbar-width !important;
-          -webkit-appearance: initial;
-          // background-color: map-deep-get($config,
-          //   #{$theme},
-          //   "tui-grid-cell-borderColor"
-          // ) !important;
-          background-color: rgba(0, 0, 0, 0) !important;
-          border-radius: 3px !important;
-        }
-
-        & ::-webkit-scrollbar-track {
-          // background-color: map-deep-get($config,
-          //   #{$theme},
-          //   "tui-grid-cell-borderColor"
-          // ) !important;
-          background-color: rgba(0, 0, 0, 0) !important;
-        }
-
-        & ::-webkit-scrollbar-thumb {
-          width: 50px !important;
-          height: 50px !important;
-          background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
-          // background-color: rgba(0, 0, 0, 0);
-          border-radius: 3px;
-        }
-
        .tui-grid-cell {
-
          &.tui-grid-cell-summary {
            color: map-deep-get($config,
              #{$theme},
@ -201,6 +182,32 @@
        }
      }

+      &-body-area {
+        overflow: auto;
+
+        &::-webkit-scrollbar {
+          width: $scrollbar-width !important;
+          height: $scrollbar-width !important;
+          -webkit-appearance: initial;
+          background-color: rgba(0, 0, 0, 0) !important;
+          border-radius: 3px !important;
+          // border-right: 1px solid;
+          // border-right-color: map-deep-get($config, #{$theme}, "tui-grid-cell-borderColor");
+        }
+
+        &::-webkit-scrollbar-track {
+          background-color: rgba(0, 0, 0, 0) !important;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          height: 50px !important;
+          background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
+          border-radius: 3px;
+          // width: 50px !important;
+          // background-color: rgba(0, 0, 0, 0);
+        }
+      }
+
      &-rside-area {
        background-color: map-deep-get($config, #{$theme}, "scrollbar-track");
      }
@ -239,13 +246,13 @@
      &-scrollbar-right-bottom {
        width: $scrollbar-width !important;
        height: $scrollbar-width !important;
-        // display: none !important;
        border-color: map-deep-get($config, #{$theme}, "cardBackground");
        background-color: map-deep-get($config, #{$theme}, "cardBackground");
+        box-sizing: border-box;
+        // display: none !important;
        // border: none !important;
        // bottom: -1px;
        // right: -2px;
-        box-sizing: border-box;
        // display: none;
      }

@ -356,6 +363,10 @@
          #{$theme},
          "tui-grid-cell-backgroundColor"
        );
+        // width: 100% !important;
+        // .tui-grid-table {
+        //   width: 100% !important;
+        // }
      }

      &-row-odd,
--- a/assets/scss/common/input.scss
+++ b/assets/scss/common/input.scss
@ -230,6 +230,10 @@
  }
 }

+input[type="checkbox"] {
+  width: 16px;
+  height: 16px
+}

@each $theme in dark, light {
  @include theme($theme);
@ -242,6 +246,7 @@
          background: map-deep-get($config, #{$theme}, "ant-btn-primary-bg");
          border-color:map-deep-get($config, #{$theme}, "ant-btn-primary-bg");
          color:map-deep-get($config, #{$theme}, "ant-btn-primary-color");
+
          &.ant-checkbox-inner::after {
            border-color: map-deep-get($config, #{$theme}, "ant-btn-primary-color");
          }
@ -403,6 +408,13 @@
        "v-input-textarea-border"
      );
    }
+
+    input[type="checkbox"] {
+      accent-color: map-deep-get($config,
+        #{$theme},
+        "ant-btn-primary-bg"
+      );
+    }
  }

  .v-radio {
--- a/assets/scss/datepicker.scss
+++ b/assets/scss/datepicker.scss
@ -15,8 +15,9 @@
      border-radius: 6px;
      border: solid 1px;
      height: 32px;
-      // border-color: #424242;
-      border-color: map-deep-get($config, #{$theme}, "tui-datepicker-border-color");
+      color: map-deep-get($config, #{$theme}, "v-input-fieldset-color") !important;
+      border-color: currentColor;
+      // border-color: map-deep-get($config, #{$theme}, "tui-datepicker-border-color");

      &.datepicker-large {
        height: 40px;
--- 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,
--- a/components/common/DatepickerTimeSelectBox.vue
+++ b/components/common/DatepickerTimeSelectBox.vue
@ -52,6 +52,7 @@
            selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
          "
          @update:propsValue="selectTimeValue1 = $event"
+          customClass="select-large"
        />
        <!-- <div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div> -->

@ -99,6 +100,7 @@
            selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
          "
          @update:propsValue="selectTimeValue2 = $event"
+          customClass="select-large"
        />
      </div>
    </v-col>
--- a/components/common/Grid.vue
+++ b/components/common/Grid.vue
@ -617,6 +617,7 @@ export default {
 			list.map(item => this.gridInstance.invoke('check', item));
 		},
 		refreshLayout() {
+			// console.log("---------DEBUG---refreshLayout: ");
 			this.gridInstance.invoke('refreshLayout');
 		},
 		refreshGrid(){
@ -625,54 +626,52 @@ export default {
      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 +702,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 {
--- a/components/common/button/ActionButtons.vue
+++ b/components/common/button/ActionButtons.vue
@ -1,5 +1,7 @@
 <template>
-	<div class="d-flex flex-row justify-center align-center" style="gap: 12px">
+	<div class="d-flex justify-center align-center" 
+		:class="directionBtn === 'vertically'?'flex-row':'flex-column'" 
+		style="gap: 12px">
 		<a-button @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="icons.remove" >
 		</a-button>
 		<a-button   @click="btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="icons.add">
--- 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 -->
--- a/components/common/modal/EnrgEffcEqpmDetailPop.vue
+++ b/components/common/modal/EnrgEffcEqpmDetailPop.vue
@ -119,8 +119,7 @@
 						/>
 					</div> -->

-				<v-card-actions>
-					<v-spacer></v-spacer>
+				<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
 					<a-button color="primary" type="primary" @click="closePop()">확인</a-button>
 				</v-card-actions>
 			</v-card>
@ -275,7 +274,12 @@ export default {
 			// const gridHeight = this.$refs.gridParent.offsetHeight - 30;

 			const myOptions = {
-				rowHeaders: ['rowNum'],
+				rowHeaders: [
+					{
+						type: 'rowNum',
+						align: 'right',
+					},
+				],
 				columnOptions: {
 					resizable: true,
 					minWidth: 100
@ -319,19 +323,19 @@ export default {
 					header: '주의',
 					width: 100,
 					name: 'careStndVal',
-					align: 'center'
+					align: 'right'
 				},
 				{
 					header: '경고',
 					width: 100,
 					name: 'warnStndVal',
-					align: 'center'
+					align: 'right'
 				},
 				{
 					header: '가이드값',
 					width: 100,
 					name: 'totVal',
-					align: 'center'
+					align: 'right'
 				},
 				{
 					header: '알람내용',
--- 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,39 +8,37 @@
 			</label>
 		</v-col>
 		<v-col :cols="textCols">
-			<v-text-field readonly append-icon="" :class="['v-input__custom', customClass]"
+			<v-text-field readonly v-model="selectValue" append-icon="" :class="['v-input__custom', customClass]"
 				@click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true" :required="required || false"
 				:disabled="disabled || false"><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;">
+		<v-dialog ref="popModal" v-model="dialog" width="800" content-class="custom-dialog" scrollable>
+			<v-card style="height: 100%;">
 				<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">
+				<div class="px-5 pt-2">
 					<!-- <v-card class="searchFilter">
 					</v-card> -->
-					<v-row align="end" 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" />
+								:label="'설비그룹'" :disabled="eqpmGrpDisabled" @update:propsValue="selectValue01 = $event"
+								:labelCols="12" :textCols="12" :iconShow="true" />
 						</v-col>
-						<v-col :cols="3.5">
+						<v-col>
 							<!-- FAB -->
-							<component :is="'SelectBoxMulti'" :propsValue="selectValue02"
-								:itemList="selectValueList02" :label="'FAB'" :labelCols="12" :multiple="true"
-								:disabled="fabDisabled" @update:propsValue="selectValue02 = $event" :textCols="12"
-								:iconShow="true" />
+							<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-col >
 							<v-row>
 								<v-col :cols="12" class="py-0">
 									<label for="" class="search-box-label">
@ -49,9 +47,8 @@
 									</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>
+									<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>

@ -60,7 +57,11 @@

 							</v-row>
 						</v-col>
-						<a-button icon="search" type="primary" @click="search()" class="search-button">조회</a-button>
+						<v-col :cols="2" class="last-col mr-2">
+							<a-button icon="search" :ripple="false" type="primary" @click="search()"
+								class="search-button">조회</a-button>
+						</v-col>
+
 					</v-row>

 					<!-- <v-row align="center" no-gutters style="margin-top: 14px;">
@ -81,13 +82,13 @@
 					</v-row> -->
 				</div>

-				<v-card-text class="px-2 w100">
-					<div ref="modalGridParent" style="height: 450px;" class="h100 w100">
+				<div class="pa-5" style="height:calc(100% - 30px)">
+					<div ref="modalGridParent" class="h100 w100">
 						<component :ref="gridName" :is="loadGrid ? 'Grid' : null"
 							:dataPath="searchParam.eqpmSelectPopData.eqpmSelectPop" :gridName="gridName"
 							:parentPrgmId="parentPrgmId" @getRowsData="getRowData" />
 					</div>
-				</v-card-text>
+				</div>

 				<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>
@ -121,6 +122,11 @@ export default {
 			require: false,
 			default: '전력 계약 정보',
 		},
+		placeholder: {
+			type: String,
+			require: false,
+			default: '',
+		},
 		valueNm: {
 			type: String,
 			require: false,
@ -255,7 +261,7 @@ export default {
 		},
 		chkDialog() {
 			if (this.isMulti) {
-				this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [{ type: 'checkbox' }];
+				this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [{ type: 'checkbox', width: 72 }];
 			} else {
 				this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [];
 			}
@ -422,18 +428,15 @@ export default {
 				{
 					header: 'FAB',
 					name: 'fabNm',
-					align: 'center'
 				},
 				{
 					header: '설비ID',
-					name: 'eqpmId',
-					align: 'center',
+					name: 'eqpmId'
 					// hidden:true
 				},
 				{
 					header: '설비명',
-					name: 'eqpmNm',
-					align: 'center'
+					name: 'eqpmNm'
 				},
 				{
 					header: 'eccId',
@ -517,11 +520,11 @@ export default {


 			this.loadGrid = true;
-			this.$nextTick(() => {
-				if (this.isMulti) {
-					this.getChecked();
-				}
-			});
+			// this.$nextTick(() => {
+			// 	if (this.isMulti) {
+			// 		this.getChecked();
+			// 	}
+			// });

 		},
 		setUpdate() {
@ -573,3 +576,16 @@ var eqpmSelectPop = {
 }

 </script>
+<style lang="scss" scoped>
+::v-deep {
+	.last-col {
+		flex-basis: content;
+	}
+
+	.v-dialog {
+		overflow-y: hidden;
+	}
+
+}
+
+</style>
--- 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>
--- 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>
--- 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,4 @@ export default {
 };
 </script>

-<style></style>
+<style scoped lang="scss"></style>
--- a/components/common/select/SelectBoxTime.vue
+++ b/components/common/select/SelectBoxTime.vue
@ -22,7 +22,7 @@
        outlined
        :menu-props="{ auto: true, offsetY: true }"
        :hide-details="true"
-        :class="'v-select__custom'"
+        :class="['v-select__custom', customClass]"
        :disabled="disabled"
        :readonly="readonly"
        @click="setDatepickerHide"
@ -106,6 +106,10 @@ export default {
      require: false,
      default: 1,
    },
+    customClass: {
+      type: String,
+      require: false,
+    },
  },
  emits: ["update:propsValue"],
  data() {
--- 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>
--- 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>
--- a/components/pages/ems/EqpmInfo/EqpmAddInfoTab.vue
+++ b/components/pages/ems/EqpmInfo/EqpmAddInfoTab.vue
@ -8,7 +8,7 @@
 				:btnActionsFnc="btnActions"
 			/>
 		</div>
-		<div ref="gridParent" style="height: calc(100vh - 520px);">
+		<div ref="gridParent" class="w100" style="height: calc(100vh - 520px);">
 			<Grid
 				:ref="gridName"
 				:is="loadGrid ? 'Grid' : null"
@ -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,
@ -296,7 +296,7 @@ export default {
 				{
 					header: '추가 정보 값',
 					name: 'addInfoVal',
-					align: 'center',
+					align: 'left',
 					renderer: {
 						type: CustomRenderer,
 					},
--- a/components/pages/ems/EqpmInfo/EqpmIaoTab.vue
+++ b/components/pages/ems/EqpmInfo/EqpmIaoTab.vue
@ -8,7 +8,7 @@
 				:btnActionsFnc="btnActions"
 			/>
 		</div>
-		<div ref="gridParent" style="height: calc(100vh - 800px);">
+		<div ref="gridParent" style="height: calc(100vh - 700px);">
 			<Grid
 				:ref="gridName"
 				:is="loadGrid ? 'Grid' : null"
@ -18,7 +18,7 @@
 				:innerTabGridInfo="innerTabGridInfo"
 			/>
 		</div>
-		<div style="min-height: calc(100vh - 900px);" class="mt-4">
+		<div style="height: 60vh;" class="mt-5">
 			<component
 				:is="'Form'"
 				:parentPrgmId="parentPrgmId"
@ -114,7 +114,7 @@ export default {
 				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[4].class = 'py-3 pl-4';
 				this.detailList[5].class = 'py-3 pl-4';
 				this.detailList[6].class = 'py-3 pl-4 pt-0';
 			} else {
@ -230,7 +230,7 @@ export default {
 				{
 					header: '대상 유형',
 					name: 'objKind',
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						var retVal = '';

@ -261,7 +261,7 @@ export default {
 				{
 					header: '계산여부',
 					name: 'calcFg',
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						value = value === true ? '1' : '0';
 						const newValue = _this.pageData.useFgList.filter(
@ -612,3 +612,10 @@ const myEqpmIaoDetail = [
 	},
 ];
 </script>
+<style lang="scss" scoped >
+::v-deep {
+	.tui-grid-layer-state {
+		top: 40px !important;
+	}
+}
+</style>
--- a/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue
+++ b/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue
@ -20,6 +20,12 @@
 				</v-card>
 			</v-col>
 		</v-row>
+		<!-- Create the line between date picker and form -->
+		<v-row class="my-5" no-gutters>
+			<v-col>
+				<div style="height: 1px; background-color: #ccc;"></div>
+			</v-col>
+		</v-row>
 		<v-row class="search-box" align="center" no-gutters style="height: 44px;">
 			<v-col :cols="4">
 				<label for="" class="search-box-label">
--- a/components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab.vue
+++ b/components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab.vue
@ -332,7 +332,7 @@ const myReadPlcTagDetail = [
 		valueNm2: 'tagNm',
 		disabled: true,
 		cols: 6,
-		class: 'pr-4 pb-2 py-3',
+		class: 'pr-4 pb-2 py-2',
 		required: true,
 		labelCols: 12,
 		textCols: 12,
@ -345,7 +345,7 @@ const myReadPlcTagDetail = [
 		valueNm: 'ercId',
 		disabled: false,
 		cols: 6,
-		class: 'pl-4 py-3',
+		class: 'pl-4 pb-2 py-3',
 		list: 'ercNmList',
 		itemText: 'text',
 		itemValue: 'value',
--- a/pages/comm/auth/MenuRoleMngPage.vue
+++ b/pages/comm/auth/MenuRoleMngPage.vue
@ -5,22 +5,12 @@
 				<v-card class="searchFilter">
 					<v-row algin="end" no-gutters>
 						<v-col :cols="3">
-							<InputText
-								:parentPrgmId="myPrgmId"
-								label="역할ID"
-								valueNm="roleId"
-								:searchOption="true"
-								customClass="input-large"
-							/>
+							<InputText :parentPrgmId="myPrgmId" label="역할ID" valueNm="roleId" :searchOption="true"
+								customClass="input-large" />
 						</v-col>
 						<v-col :cols="3">
-							<InputText
-								:parentPrgmId="myPrgmId"
-								label="역할명"
-								valueNm="roleNm"
-								:searchOption="true"
-								customClass="input-large"
-							/>
+							<InputText :parentPrgmId="myPrgmId" label="역할명" valueNm="roleNm" :searchOption="true"
+								customClass="input-large" />
 						</v-col>
 						<v-col class="text-right d-flex justify-end align-end mr-3">
 							<BtnSearch size="large" />
@ -30,81 +20,55 @@
 			</v-col>
 		</v-row>

-		<v-row ref="contents" >
-			<v-col cols="12" lg="2" >
+		<v-row ref="contents">
+			<v-col cols="12" lg="3">
 				<v-card>
 					<v-card-title>
 						<span class="custom-title-4">역할 리스트</span>
 					</v-card-title>
 					<div ref="gridParent" class="px-5" style="height: 60vh;">
-						<component
-							:is="loadGrid ? 'Grid' : null"
-							:ref="gridName + myPrgmId"
-							:gridName="gridName"
-							:parentPrgmId="myPrgmId"
-							@getRowsData="getRowData"
-						/>
+						<component :is="loadGrid ? 'Grid' : null" :ref="gridName + myPrgmId" :gridName="gridName"
+							:parentPrgmId="myPrgmId" @getRowsData="getRowData" />
 					</div>
 				</v-card>
 			</v-col>
-			<v-col cols="12" lg="10" >
+			<v-col cols="12" lg="9">
 				<v-card>
 					<v-card-title>
 						<span class="custom-title-4">역할 메뉴별 권한</span>
 					</v-card-title>
-					<v-row
-						align="center"
-						no-gutters
-						:style="{ height: 'calc(100% - 62px)' }"
-						class="px-5"
-					>
-						<v-col :cols="4" class="h100">
-							<span
-								class="body-1 font-weight-bold d-flex align-center"
-								:style="{ minHeight: '36px' }"
-								>[미배정]메뉴리스트</span
-							>
+					<v-row align="center" no-gutters :style="{ height: 'calc(100% - 62px)' }" class="px-5">
+						<v-col class="h100" style="max-width: 400px;">
+							<span class="body-1 font-weight-bold d-flex align-center"
+								:style="{ minHeight: '36px' }">[미배정]메뉴리스트</span>
 							<div ref="treeGridParent" class="px-0 mt-2" style="height: 60vh;">
 								<!-- <div
 									ref="treeGridParent"
 									class="w100 h100"
 								>
 							</div> -->
-								<component
-									:is="loadTreeGrid ? 'Grid' : null"
-									:ref="gridName2 + myPrgmId"
-									:gridName="gridName2"
-									:parentPrgmId="myPrgmId"
-									@getRowsData="getUnAsgnRowData"
-								/>
+								<component :is="loadTreeGrid ? 'Grid' : null" :ref="gridName2 + myPrgmId"
+									:gridName="gridName2" :parentPrgmId="myPrgmId" @getRowsData="getUnAsgnRowData" />
 							</div>
 						</v-col>
-						<v-col :cols="1">
-							<ActionButtons
-								:parentPrgmId="myPrgmId"
-								:leftGridName="gridName2"
-								:rightGridName="gridName3"
-								:btnActionsFnc="dualGridBtnActions"
-							/>
-						</v-col>
+						<!-- <v-col :cols="1.5">
+							<ActionButtons :parentPrgmId="myPrgmId" :leftGridName="gridName2" :rightGridName="gridName3"
+								:btnActionsFnc="dualGridBtnActions" />
+						</v-col> -->
+						<div class="pr-2">
+							<ActionButtons :parentPrgmId="myPrgmId" :leftGridName="gridName2" :rightGridName="gridName3"
+								:btnActionsFnc="dualGridBtnActions" />
+						</div>
 						<v-col :cols="7" class="h100">
-							<v-row
-								justify="space-between"
-								align="center"
-								no-gutters
-								class="px-5"
-							>
+							<v-row justify="space-between" align="center" no-gutters class="px-5">
 								<v-col :cols="11">
-									<span class="body-1 font-weight-bold"
-										>[배정]메뉴별권한 리스트</span
-									>
+									<span class="body-1 font-weight-bold d-flex align-center"
+										:style="{ minHeight: '36px' }">[배정]메뉴별권한 리스트</span>
+									<!-- <span class="body-1 font-weight-bold">[배정]메뉴별권한 리스트</span> -->
 								</v-col>
 								<v-col :cols="1" class="text-right">
-									<Buttons
-										:parentPrgmId="myPrgmId"
-										:bindingData="gridName3"
-										:btnActionsFnc="btnActions"
-									/>
+									<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName3"
+										:btnActionsFnc="btnActions" />
 								</v-col>
 							</v-row>
 							<div ref="treeGridParent2" class="px-0 mt-2" style="height: 60vh;">
@ -113,14 +77,9 @@
 									class="w100 h100"
 								>
 							</div> -->
-								<component
-									:is="loadTreeGrid2 ? 'Grid' : null"
-									:ref="gridName3 + myPrgmId"
-									:gridName="gridName3"
-									:parentPrgmId="myPrgmId"
-									:editorGrid="true"
-									@getRowsData="getAsgnRowData"
-								/>
+								<component :is="loadTreeGrid2 ? 'Grid' : null" :ref="gridName3 + myPrgmId"
+									:gridName="gridName3" :parentPrgmId="myPrgmId" :editorGrid="true"
+									@getRowsData="getAsgnRowData" />
 							</div>
 						</v-col>
 					</v-row>
@ -286,8 +245,8 @@ export default {
 		async gridInit() {
 			//---------------------gridOption 설정 시작----------------------------
 			const gridHeight = this.$refs.gridParent.offsetHeight - 30;
-			const treeGridHeight = this.$refs.treeGridParent.offsetHeight - 30;
-			const treeGridHeight2 = this.$refs.treeGridParent2.offsetHeight - 30;
+			const treeGridHeight = this.$refs.treeGridParent.offsetHeight - 50;
+			const treeGridHeight2 = this.$refs.treeGridParent2.offsetHeight - 50;
 			// const gridHeight = this.$refs.contents.offsetHeight - 30;

 			const myOptions = {
@ -316,8 +275,10 @@ export default {
 				treeColumnOptions: {
 					name: 'menuNm',
 				},
-				scrollX: false,
-				// scrollY: false,
+				rowHeight: 37,
+				minRowHeight: 37,
+				scrollX: true,
+				scrollY: true,
 			};

 			this.setGridOption({
@ -347,6 +308,9 @@ export default {
 					const el = document.createElement('input');
 					const { grid, rowKey, columnInfo } = props;
 					el.type = 'checkbox';
+					$(el).css('width', '16px');
+					$(el).css('height', '16px');
+					$(el).css('accent-color', '#1677FF');
 					el.value = props.value;
 					this.el = el;

@ -380,12 +344,12 @@ export default {
 			const _this = this;

 			const myColumns = [
-				{ header: '역할ID', name: 'roleId', align: 'center', minWidth: 70 },
-				{ header: '역할명', name: 'roleNm', minWidth: 70 },
+				{ header: '역할ID', name: 'roleId', align: 'left', minWidth: 70,width:120 },
+				{ header: '역할명', name: 'roleNm', minWidth: 70, align: 'left',width:120 },
 				{
 					header: '사용여부',
 					name: 'useFg',
-					align: 'center',
+					align: 'left',
 					minWidth: 84,
 					formatter({ value }) {
 						const newValue = _this.pageData.useFgList.filter(
@ -408,6 +372,7 @@ export default {
 				{
 					header: '메뉴명',
 					name: 'menuNm',
+					maxWidth: 120,
 					validation: {
 						dataType: 'string',
 						validatorFn: (value, row) => {
@ -549,12 +514,12 @@ export default {
 						//rowKey: 0,
 						rowKey:
 							this.pageData.rowGridSelectKey == '' ||
-							this.pageData.rowGridSelectKey == null
+								this.pageData.rowGridSelectKey == null
 								? 0
 								: this.pageData.rowGridSelectKey ==
-								  this.$refs[this.gridName + this.myPrgmId].getData().length - 1
-								? this.pageData.rowGridSelectKey
-								: 0,
+									this.$refs[this.gridName + this.myPrgmId].getData().length - 1
+									? this.pageData.rowGridSelectKey
+									: 0,
 						columnName: 'roleId',
 						setScroll: true,
 					});
@ -609,8 +574,8 @@ export default {
 						item.upMenuId && item.upMenuId != '0'
 							? item.upMenuId
 							: item.upMenuId == '0'
-							? '00'
-							: 'ROOT',
+								? '00'
+								: 'ROOT',
 				};
 				return newItem;
 			});
@ -649,8 +614,8 @@ export default {
 						item.upMenuId && item.upMenuId != '0'
 							? item.upMenuId
 							: item.upMenuId == '0'
-							? '00'
-							: 'ROOT',
+								? '00'
+								: 'ROOT',
 				};
 				return newItem;
 			});
--- a/pages/comm/base/BatchMngPage.vue
+++ b/pages/comm/base/BatchMngPage.vue
@ -15,25 +15,15 @@
 								:customClass="'input-large'" />
 						</v-col>
 						<v-col :cols="2.5">
-							<component
-								:is="'selectCodeList'"
-								:parentPrgmId="myPrgmId"
-								:label="'배치 실행 구분'"
+							<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'배치 실행 구분'"
 								:dataKey="'searchBatchExecTp'"
-								:sendParam="{ commGrpCd: 'CO_BATCH_EXEC_TP', useFg: '1' }"
-								:addAll="true"
-								:customClass="'select-large'"
-							/>
+								:sendParam="{ commGrpCd: 'CO_BATCH_EXEC_TP', useFg: '1' }" :addAll="true"
+								:customClass="'select-large'" />
 						</v-col>
 						<v-col :cols="2.5" class="pr-4">
-							<component
-								:is="'selectCodeList'"
-								:parentPrgmId="myPrgmId"
-								:label="'사용여부'"
-								:dataKey="'searchUseFg'"
-								:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
-								:customClass="'select-large'"
-							/>
+							<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'사용여부'"
+								:dataKey="'searchUseFg'" :sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
+								:customClass="'select-large'" />
 						</v-col>
 						<BtnSearch size="large" class="mr-2" />

@ -42,9 +32,9 @@
 			</v-col>
 		</v-row>

-		<v-row ref="contents" class="mt-4">
+		<v-row ref="contents" class="mt-4 h100">
 			<!-- 배치 리스트 -->
-			<v-col :cols="6" class="h100 pr-2">
+			<v-col :cols="6" class="pr-2">
 				<v-card class="pb-5">
 					<div class="d-flex align-center justify-space-between pa-4">
 						<!-- <v-card-title>
@ -56,7 +46,7 @@
 							:btnActionsFnc="btnActions" />
 					</div>
 					<div class="px-4">
-						<div ref="gridParent" class="h100 w100">
+						<div ref="gridParent" class="h100 w100" style="height:calc(100% - 70px)">
 							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :parentPrgmId="myPrgmId"
 								:gridName="gridName" @getRowsData="getRowData" />
 						</div>
@ -65,7 +55,7 @@
 				</v-card>
 			</v-col>
 			<!-- 배치 상세 -->
-			<v-col :cols="6" class="h100 pl-3">
+			<v-col :cols="6" class="pl-3">
 				<v-card class="pd-y-20 h100">
 					<v-card-title class="d-flex justify-space-between align-end pa-4">
 						<span class="tit ft-size_20 ft-weight_600">배치 상세</span>
@ -82,14 +72,17 @@
 				<v-card style="height: 100%">
 					<v-card-title class="v-card__title d-flex align-center justify-space-between">
 						<span class="custom-title-4">DB 프로시져 파라메터 설정</span>
-						<div>
-							<Buttons :parentPrgmId="myPrgmId" :bindingData="gridNameParam"
-								:btnActionsFnc="btnActionsParam" />
-						</div>
+						<a-button icon="close" type="text" @click="dialog = false"></a-button>
+
 					</v-card-title>
 					<div class="pa-5">
-						<v-row align="center" no-gutters>
-							<v-col cols="12" class="text-right"> </v-col>
+						<v-row align="end" no-gutters>
+							<v-col cols="12" class="d-flex justify-end">
+
+								<Buttons :parentPrgmId="myPrgmId" :bindingData="gridNameParam"
+									:btnActionsFnc="btnActionsParam" />
+
+							</v-col>
 						</v-row>
 					</div>
 					<v-card-text style="height: 300px;">
@ -101,10 +94,9 @@
 							</div>
 						</div>
 					</v-card-text>
-					<v-card-actions>
-						<v-spacer></v-spacer>
-						<v-btn color="primary" dark @click="setParamChangeData()">확인</v-btn>
-						<v-btn color="primary" dark @click="dialog = false">닫기</v-btn>
+					<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
+						<a-button :ripple="false" @click="dialog = false" class="mr-2">닫기</a-button>
+						<a-button :ripple="false" type="primary" @click="setParamChangeData()">확인</a-button>
 					</v-card-actions>
 				</v-card>
 			</v-dialog>
@ -156,7 +148,7 @@ export default {
 			myPrgmId: myPrgmId,
 			loadGrid: false,
 			gridName: 'rowGrid',
-			
+
 			// rowGridOrigin: [],
 			detailList: myDetail,

@ -261,7 +253,7 @@ export default {

 			const _this = this;
 			const myColumns = [
-				{ header: '배치ID', name: 'batchId', align: 'center', width: 100 },
+				{ header: '배치ID', name: 'batchId', align: 'right', width: 100 },
 				{ header: '배치명', name: 'batchNm', minWidth: 200 },
 				{
 					header: '배치 실행 구분',
@ -283,7 +275,6 @@ export default {
 				{
 					header: '사용여부',
 					name: 'useFg',
-					align: 'center',
 					width: 145,
 					formatter({ value }) {
 						let retVal = '';
@ -556,7 +547,7 @@ export default {
 			}
 		},
 		gridParamInit() {
-			
+
 			const gridHeight = this.$refs.gridParent.offsetHeight - 36;
 			const myOptions = {
 				columnOptions: {
@ -567,6 +558,10 @@ export default {
 				selectionUnit: 'row',
 				editingEvent: 'click',
 				scrollX: false,
+				header: {
+					height: 37,
+				},
+				rowHeight: 37,
 			};
 			this.setGridOption({
 				gridKey: this.gridNameParam,
@ -592,7 +587,6 @@ export default {
 				{
 					header: 'MODE',
 					name: 'mode',
-					align: 'center',
 					formatter({ value }) {
 						return value == ('OUT' || 'out') ? 'OUT' : 'IN';
 					},
@ -642,7 +636,7 @@ export default {
 		},
 		getRowParamData() {
 			this.paramLoadGrid = false;
-			// let res = [];
+			let res = [];

 			// /* this.pageData.paramStrData 처리 */
 			// // console.log("this.pageData.paramStrData : ", JSON.parse(this.pageData.paramStrData));
@ -717,7 +711,6 @@ export default {
 		},
 		inputClick(event, item, valueNm) {
 			if (valueNm == 'refVal1') {
-				this.dialog = true;
 				const rowIdxKey = this.$refs[this.gridName].gridInstance.invoke(
 					'getFocusedCell',
 				).rowKey;
--- a/pages/comm/base/PrgmMngPage.vue
+++ b/pages/comm/base/PrgmMngPage.vue
@ -7,28 +7,15 @@
 				<v-card class="searchFilter">
 					<v-row align="end" no-gutters>
 						<v-col :cols="3">
-							<component
-								:is="'selectCodeList'"
-								:parentPrgmId="myPrgmId"
-								:label="'사용여부'"
-								:dataKey="'selectUseFg'"
-								:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
-								:addAll="true"
-								customClass="select-large"
-							/>
+							<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'사용여부'"
+								:dataKey="'selectUseFg'" :sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
+								:addAll="true" customClass="select-large" />
 						</v-col>
 						<v-col :cols="3">
-							<InputText
-								:parentPrgmId="myPrgmId"
-								label="프로그램명"
-								valueNm="prgmNm"
-								:searchOption="true"
-								:labelCols="12"
-								:textCols="12"
-								customClass="input-large"
-							/>
+							<InputText :parentPrgmId="myPrgmId" label="프로그램명" valueNm="prgmNm" :searchOption="true"
+								:labelCols="12" :textCols="12" customClass="input-large" />
 						</v-col>
-						<v-col :cols="5" class="text-right">
+						<v-col :cols="6" class="text-right">
 							<BtnSearch size="large" />
 						</v-col>
 					</v-row>
@ -38,46 +25,32 @@

 		<v-row ref="contents">
 			<!-- 프로그램 리스트 -->
-			<v-col :cols="5" >
-				<v-card class="pb-5">
-					<div class="d-flex align-center justify-space-between pa-5">
+			<v-col :cols="5">
+				<v-card class="pa-5">
+					<div class="d-flex align-center justify-space-between">
 						<v-card-title class="pa-0">프로그램 리스트</v-card-title>
 						<div>
-							<Buttons
-								:parentPrgmId="myPrgmId"
-								:bindingData="gridName"
-								:detailList="detailList"
-								:btnActionsFnc="btnActions"
-							/>
+							<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :detailList="detailList"
+								:btnActionsFnc="btnActions" />
 						</div>
 					</div>
-					<div ref="gridParent" style="height: 60vh">
+					<div ref="gridParent" class="pt-5" style="height: 60vh">
 						<!-- <div ref="gridParent" class="px-5 h100">
 						</div> -->
-						<component
-							:ref="gridName"
-							:is="loadGrid ? 'Grid' : null"
-							:parentPrgmId="myPrgmId"
-							:gridName="gridName"
-							@getRowsData="getRowData"
-						/>
+						<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :parentPrgmId="myPrgmId"
+							:gridName="gridName" @getRowsData="getRowData" />
 					</div>
 				</v-card>
 			</v-col>
 			<!-- 프로그램 상세 -->
-			<v-col :cols="7" >
+			<v-col :cols="7">
 				<v-card class="pb-5">
 					<div class="d-flex align-center justify-space-between pa-5">
 						<v-card-title class="pa-0">프로그램 상세</v-card-title>
 					</div>
 					<div class="px-5" style="min-height:calc(100% - 76px)">
-						<component
-							:is="'Form'"
-							:parentPrgmId="myPrgmId"
-							:bindingData="gridName"
-							:detailList="detailList"
-							@gridEditingFinish="gridEditingFinish"
-						/>
+						<component :is="'Form'" :parentPrgmId="myPrgmId" :bindingData="gridName"
+							:detailList="detailList" @gridEditingFinish="gridEditingFinish" />
 						<!-- <div class="w100">
 						</div> -->
 					</div>
@ -132,21 +105,19 @@ export default {
 			detailList: myDetail,

 			dataPathMock: {
-        'rowGrid': {
-          column: [
-            { header: '프로그램ID', name: 'field1', align: 'left' },
-            { header: '프로그램덤', name: 'field2', align: 'left' },
-            { header: '타임', name: 'field3', align: 'left' },
-            { header: '사용여부', name: 'field4', align: 'left' }
-          ],
-          data: dataPathDataExample,
-          defaultRow: dataPathDataExample,
-          option: {
+				'rowGrid': {
+					column: [
+						{ header: '프로그램ID', name: 'field1', align: 'left' },
+						{ header: '프로그램덤', name: 'field2', align: 'left' },
+						{ header: '타임', name: 'field3', align: 'left' },
+						{ header: '사용여부', name: 'field4', align: 'left' }
+					],
+					option: {
 						scrollY: false,
 						scrollX: false,
 					}
-        }
-      },
+				}
+			},
 		};
 	},
 	computed: {
@ -295,7 +266,7 @@ export default {
 				value: newRes,
 			});
 			this.loadGrid = true;
-			
+
 			this.$nextTick(() => {
 				if (newRes.length > 0) {
 					this.$refs[this.gridName].focus({
@ -303,12 +274,12 @@ export default {
 						//rowKey: this.chkRowGridSelectKey || 0,
 						rowKey:
 							this.pageData.rowGridSelectKey == '' ||
-							this.pageData.rowGridSelectKey == null
+								this.pageData.rowGridSelectKey == null
 								? 0
 								: this.pageData.rowGridSelectKey ==
-								  this.$refs[this.gridName].getData().length - 1
-								? this.pageData.rowGridSelectKey
-								: 0,
+									this.$refs[this.gridName].getData().length - 1
+									? this.pageData.rowGridSelectKey
+									: 0,
 						setScroll: true,
 					});
 				}
@ -331,7 +302,7 @@ export default {
 				rowGridSelectKey: data.rowKey,
 				rowGridSelectData: data,
 			});
-			
+
 		},
 		compareData(type, newDt) {
 			if (this.selectedCommCdData[type] == newDt) {
@ -487,7 +458,7 @@ const myDetail = [
 		valueNm: 'prgmTpCd',
 		essential: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pt-5',
 		list: [
 			{ text: '프로그램', value: '1' },
 			{ text: '팝업', value: '2' },
@ -502,10 +473,11 @@ const myDetail = [
 		essential: true,
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pt-13',
 		value: { '1': true, '0': false },
 		required: true,
 		textCols: 12,
+		labelCols:12,
 		iconShow: true
 	},
 	{
@ -514,7 +486,7 @@ const myDetail = [
 		valueNm: 'url',
 		disabled: false,
 		cols: 12,
-		class: 'py-2',
+		class: 'py-2 pt-4',
 		required: true,
 		textCols: 12,
 		iconShow: true
@ -525,7 +497,7 @@ const myDetail = [
 		valueNm: 'regUserNo',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pt-5',
 		placeholder: '시스템 자동입력',
 		textCols: 12,
 		iconShow: true
@ -536,7 +508,7 @@ const myDetail = [
 		valueNm: 'regDttm',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pt-5',
 		placeholder: '시스템 자동입력',
 		textCols: 12,
 		iconShow: true
@ -547,7 +519,7 @@ const myDetail = [
 		valueNm: 'procUserNo',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pt-5',
 		placeholder: '시스템 자동입력',
 		textCols: 12,
 		iconShow: true
@ -558,19 +530,10 @@ const myDetail = [
 		valueNm: 'procDttm',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pt-5',
 		placeholder: '시스템 자동입력',
 		textCols: 12,
 		iconShow: true
 	},
 ];
-
-
-import { getPathDataExample } from '@/const/const'
-const dataPathDataExample = getPathDataExample({
-  field1: 'PRG0001',
-  field2: '대시보드',
-  field3: '프로그램', 
-	field4: '사용'
-});
 </script>
--- a/pages/ems/base/DashboardPage.vue
+++ b/pages/ems/base/DashboardPage.vue
@ -803,7 +803,7 @@ export default {
          header: "NO",
          name: "rowNum",
          width: 70,
-          align: "center",
+          align: "right",
          // hidden: true,
        },
        {
--- a/pages/ems/base/EqpmKindPage.vue
+++ b/pages/ems/base/EqpmKindPage.vue
@ -167,7 +167,7 @@ export default {
 					header: '설비종류ID',
 					name: 'eqpmKindId',
 					width: gridWidth * 0.5,
-					align: 'center',
+					align: 'left',
 				},
 				{
 					header: '설비종류명',
--- a/pages/ems/base/EquipmentMasterMngPage.vue
+++ b/pages/ems/base/EquipmentMasterMngPage.vue
@ -382,7 +382,7 @@ export default {
 					header: '사용 여부',
 					name: 'useFg',
 					width: 100,
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						const newValue = _this.pageData.useFgList.filter(
 							item => item.commCd == value,
--- 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,
        },
        {
--- a/pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue
+++ b/pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue
@ -67,14 +67,8 @@
 					</div>
 					<div class="px-4" style="height:calc(100% - 76px)">
 						<div ref="gridParent" class="w100 h100">
-							<component
-								:ref="gridName"
-								:is="loadGrid ? 'Grid' : null"
-								:gridName="gridName"
-								:parentPrgmId="myPrgmId"
-								:columnClickEventFlag="true"
-								@columnClick="columnClick"
-							/>
+							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
+								:parentPrgmId="myPrgmId" :columnClickEventFlag="true" @columnClick="columnClick" />
 						</div>
 					</div>
 				</v-card>
@ -552,7 +546,12 @@ export default {
 				columnOptions: {
 					resizable: true,
 				},
-				rowHeaders: ['rowNum'],
+				rowHeaders: [
+					{
+						type: 'rowNum',
+						align: 'right',
+					},
+				],
 				header: {
 					height: 37,
 				},
@ -642,7 +641,7 @@ export default {
 				{
 					header: '평가',
 					name: 'okFg',
-					align: 'center',
+					align: 'left',
 					width: 80,
 				},
 				{
--- 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%',
--- a/pages/ems/effc/EqpmIndMntrPage.vue
+++ b/pages/ems/effc/EqpmIndMntrPage.vue
@ -104,7 +104,6 @@
                :is="loadGrid ? 'Grid' : null"
                :gridName="gridName"
                :parentPrgmId="myPrgmId"
-                @dblClick="gridDoubleClickEvent"
              />
              <!--
 							<component
@ -143,7 +142,6 @@ import SelectBox from "@/components/common/select/SelectBox";
 import SelectCmCycle from "@/components/common/select/SelectCmCycle";
 import DatePicker from "@/components/common/Datepicker";
 import Grid from "~/components/common/Grid";
-import PageTitle from "@/components/common/PageTitle";

 let myTitle;
 let myPrgmId;
@ -170,7 +168,6 @@ export default {
    SelectCmCycle,
    DatePicker,
    Grid,
-    PageTitle,
  },
  data() {
    return {
@ -204,6 +201,7 @@ export default {
  computed: {
    ...mapState({
      pageData: (state) => state.pageData[myPrgmId],
+      isDarkMode: "isDarkMode",
    }),
    fromDt() {
      return this.pageData.fromDt;
@ -237,6 +235,16 @@ export default {
        await this.search();
      }
    },
+    isDarkMode(newVal) {
+      // Switch mode for 10 tooltips
+      for (let i = 0; i < 10; i++) {
+        const tooltipEl = document.getElementById(`tooltipElement_${i}`);
+        if (tooltipEl) {
+          tooltipEl.classList.remove("light-mode", "dark-mode");
+          tooltipEl.classList.add(newVal ? "dark-mode" : "light-mode");
+        }
+      }
+    },
  },
  async beforeCreate() {
    myPrgmId = this.$route.query.prgmId;
@ -357,13 +365,79 @@ export default {
    gridInit() {
      const gridHeight = this.$refs.gridParent.offsetHeight - 30;
      const _this = this;
+      // Define custom button
+      class CustomButton {
+				constructor(props,pageData) {
+					const { grid, rowKey, columnInfo } = props;
+					const gridData = grid.store.data.rawData;
+					const value = gridData[rowKey][columnInfo.name];
+          const onClickCallback = columnInfo.renderer.options.onClick; 
+
+					this.disabled = columnInfo.renderer.options.disabled || false;
+					const elDiv = document.createElement('div');
+					elDiv.innerHTML = `<span>${value}</span>`;
+					$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
+					const el2 = document.createElement('button');
+					$(el2).addClass('edit-btn blue--text');
+					el2.innerText = '보기';
+					elDiv.appendChild(el2);
+					this.el = elDiv;
+					if (!this.disabled && typeof onClickCallback === 'function') {
+						// click 이벤트
+						this.el.addEventListener('click', function(event) {
+							onClickCallback(rowKey); 
+						});
+					}
+				}
+				getElement() {
+					return this.el;
+				}
+				getValue() {
+					// return this.el.value;
+				}
+				mounted() {
+					// this.el.focus();
+				}
+			}

      var columnList = [
        { header: "NO", name: "no", align: "right", width: 80 },
        { header: "fabId", name: "fabId", hidden: true },
        { header: "FAB", name: "fabNm", align: "left" },
        { header: "eqpmGrpId", name: "eqpmGrpId", hidden: true },
-        { header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 200 },
+        { header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 200,
+          // Render custom button to switch page instead of double click on row
+          renderer: {
+            type: CustomButton,
+            options: {
+              value: '보기',
+              onClick: (rowKey) => {
+                const gridInstance = this.$refs[this.gridName].gridInstance;
+                const eventRowData = gridInstance.invoke("getRow", rowKey);
+
+                const data = {
+                  cmCycle: this.pageData.cmCycle,
+                  fromDt: this.pageData.fromDt,
+                  fabId: this.selectValue01,
+                  eqpmKindId: this.selectValue02,
+                  eqpmGrpId: this.selectValue03,
+                  eqpmId: eventRowData.eqpmId,
+                };
+                const key = "tick_" + Math.random();
+                this.$router.push({
+                  name: "ems-effc-EnrgUseEqpmDetlMntrPage",
+                  query: {
+                    prgmId: "PRG0082",
+                  },
+                  params: {
+                    ...data,
+                    key: key,
+                  },
+                });
+              }
+            }
+          }
+        },
        { header: "eqpmId", name: "eqpmId", hidden: true },
        { header: "설비명", name: "eqpmNm", align: "left", width: 200 },
        {
@ -472,6 +546,10 @@ export default {
            },
          ],
        },
+        pageOptions: {
+          useClient: true,
+          perPage: 3,
+        }
      };

      this.setGridOption({
@ -693,53 +771,83 @@ function numberFormatter({ value }) {
 }
 </script>
 <style lang="scss" scoped>
-@for $i from 0 through 9 {
-  #gridParent > * {
-    // .tui-grid-content-area{
-    background-color: red;
-    color: red;
-    overflow: visible;
-    position: relative;
-  }
-  #tooltipTargetElement_#{$i} {
-    overflow: visible;
-    position: relative; // 테스트3번쨰
-    white-space: nowrap; // 테스트3번쨰
-  }
-  #tooltipElement_#{$i} {
-    display: none;
-    overflow: visible;
-    position: relative;
-  }
-  #tooltipTargetElement_#{$i}:hover #tooltipElement_#{$i} {
-    display: block;
-    position: absolute;
-    min-width: 100%;
-    bottom: 30px;
-    z-index: 1000000000;
-    align: "center";
-    color: #f2f2f2;
-    background-color: #7f7f7f;
-    // width : 77px;
-    width: 200%;
-    left: -50%;
-    border-radius: 3px;
-    word-break: keep-all;
-    white-space: pre-wrap;
-  }
-  .tui-grid-rside-area {
-    display: none;
-    overflow: visible;
-    overflow-x: visible;
-    overflow-y: visible;
-  }
-  .tui-grid-header-area {
-    border-style: solid;
-    border-width: 0 0 1px;
-    position: relative;
-    overflow: visible;
-    overflow-x: visible;
-    overflow-y: visible;
+::v-deep {
+  @for $i from 0 through 9 {
+    #gridParent > * {
+      // .tui-grid-content-area{
+      background-color: red;
+      color: red;
+      overflow: visible;
+      position: relative;
+    }
+    #tooltipTargetElement_#{$i} {
+      overflow: visible;
+      position: relative; // 테스트3번쨰
+      white-space: nowrap; // 테스트3번쨰
+    }
+    #tooltipElement_#{$i} {
+      display: none;
+      overflow: visible;
+      position: relative;
+    }
+    #tooltipTargetElement_#{$i}:hover #tooltipElement_#{$i} {
+      display: block;
+      position: absolute;
+      min-width: 100%;
+      bottom: 40px;
+      z-index: 1000000000;
+      align: "center";
+      color: #f2f2f2;
+      background-color: #000000d9;
+      // width : 77px;
+      width: 200%;
+      left: -50%;
+      border-radius: 4px;
+      padding: 6px 0px;
+      word-break: keep-all;
+      white-space: pre-wrap;
+      // Light mode
+      &.light-mode {
+        background-color: #000000d9;
+      }
+      // Dark mode
+      &.dark-mode {
+        background-color: #424242;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -6px;
+        border-width: 6px;
+        border-style: solid;
+      }
+
+      &.light-mode::after {
+        border-color: #000000d9 transparent transparent transparent;
+      }
+
+      &.dark-mode::after {
+        border-color: #424242 transparent transparent transparent;
+      }
+    }
+
+    .tui-grid-rside-area {
+      display: none;
+      overflow: visible;
+      overflow-x: visible;
+      overflow-y: visible;
+    }
+    .tui-grid-header-area {
+      border-style: solid;
+      border-width: 0 0 1px;
+      position: relative;
+      overflow: visible;
+      overflow-x: visible;
+      overflow-y: visible;
+    }
  }
 }
 </style>
Author	SHA1	Message	Date
dev	6db0ff96c0	Merge branch 'dev' of http://218.237.212.51:30003/gitadmin/sk_fems_ui into dev-trungvq7-0729	2025-08-06 19:03:14 +09:00
dev	9155a2b55e	commit 0608	2025-08-06 19:00:29 +09:00
dev	484d8879aa	Merge pull request 'fix bugs' (#39 ) from dev-dungtv-0806 into dev Reviewed-on: #39	2025-08-06 18:50:46 +09:00
Tran Van Dung/(Tran Van Dung)/현장대리인/SK	38585f7b4f	hotfix layout	2025-08-06 16:43:12 +07:00
Tran Van Dung/(Tran Van Dung)/현장대리인/SK	b0ad70d33e	fix bugs	2025-08-06 16:31:44 +07:00
dev	3f89707a01	Merge pull request 'fixbugs grid' (#38 ) from dev-dungtv-0805 into dev Reviewed-on: #38	2025-08-06 12:13:45 +09:00
Tran Van Dung/(Tran Van Dung)/현장대리인/SK	a4007d5697	resolve comment	2025-08-06 10:12:34 +07:00
Tran Van Dung/(Tran Van Dung)/현장대리인/SK	3b6c05c70a	Merge branch 'dev' of http://218.237.212.51:30003/gitadmin/sk_fems_ui into dev-dungtv-0805	2025-08-06 09:27:47 +07:00
dev	550659475f	Merge pull request 'fix bug 18 33 34' (#37 ) from dev-manhph1-figbug into dev Reviewed-on: #37	2025-08-06 11:27:22 +09:00
Tran Van Dung/(Tran Van Dung)/현장대리인/SK	4a7077336d	resolve confict	2025-08-06 09:26:53 +07:00
dev	ca27167d3d	Merge pull request 'Update tooltip s4 + add view button to switch page' (#36 ) from dev-nghiantt-fix-bugs into dev Reviewed-on: #36	2025-08-06 10:32:48 +09:00
Tran Van Dung/(Tran Van Dung)/현장대리인/SK	bf6d03df63	fixbugs grid	2025-08-05 17:28:12 +07:00
Hoang Xuan Mai/(Hoang Xuan Mai)/현장대리인/SK	8cadade514	fix bug 18 33 34	2025-08-05 15:00:22 +07:00
Michael	f929ad2c28	Update tooltip s4 + add view button to switch page	2025-08-05 15:29:25 +09:00
dev	53b8b89e68	Merge pull request 'dev-trungvq7-0729' (#35 ) from dev-trungvq7-0729 into dev Reviewed-on: #35	2025-08-05 11:15:47 +09:00