diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index 763638a..f3d3a69 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -266,7 +266,7 @@ a {
       }
 
       &>.v-treeview-node__root:hover:before {
-        opacity: 1 !important;
+        opacity: 0 !important;
       }
 
       .v-treeview-node__children {
@@ -280,13 +280,17 @@ a {
 
     .v-treeview-node--click[aria-expanded="true"] {
       &>.v-treeview-node__root:before {
-        opacity: 1 !important;
+        opacity: 0 !important;
       }
     }
 
     .v-treeview-node[aria-expanded="true"] {
-      &>.v-treeview-node__root>.v-treeview-node__content>.v-treeview-node__label>button>.v-icon.mdi-chevron-down {
-        transform: rotate(-180deg);
+      &>.v-treeview-node__root>.v-treeview-node__content
+      >.v-treeview-node__label>button {
+        >.anticon,
+        >.v-icon.mdi-chevron-down {
+          transform: rotate(-180deg);
+        }
       }
     }
 
@@ -298,15 +302,17 @@ a {
         // justify-content: center;
       }
 
+      & .anticon,
       & .v-icon.mdi-chevron-down {
         margin-left: auto;
+        animation-duration: 0.5s;
       }
     }
   }
 
   .v-treeview-node--active {
     &:before {
-      opacity: 1 !important;
+      opacity: 0 !important;
     }
   }
 
@@ -322,7 +328,8 @@ a {
     .v-treeview-node__content span:not(.v-icon),
     .v-treeview-node__root>button,
     .v-treeview-node__level,
-    .v-treeview-node__content .v-icon.mdi-chevron-down {
+    .v-treeview-node__content .v-icon.mdi-chevron-down,
+    .v-treeview-node__content .anticon {
       display: none;
     }
 
@@ -615,36 +622,36 @@ a {
 
     .v-navigation-drawer__append {
       >p {
-        @if $theme ==dark {
-          color: rgba(255, 255, 255, 0.6);
-        }
+        color: map-deep-get($config, #{$theme}, "v-banner-border-color" ) !important;
+        // @if $theme ==dark {
+        //   color: rgba(255, 255, 255, 0.6);
+        // }
 
-        @else {
-          color: #999;
-        }
+        // @else {
+        //   color: #999;
+        // }
       }
     }
 
-    .v-footer {
-      @if $theme ==light {
-        background-color: #dfdfe5;
-        color: #767d83;
-      }
-    }
+    // .v-footer {
+    //   @if $theme ==light {
+    //     background-color: #dfdfe5;
+    //     color: #767d83;
+    //   }
+    // }
 
-    .bd {
-      @if $theme ==dark {
-        &-r-1 {
-          border-right: 1px #373f45 solid;
-        }
-      }
-
-      @else {
-        &-r-1 {
-          border-right: 1px #efefef solid;
-        }
-      }
-    }
+    // .bd {
+    //   @if $theme ==dark {
+    //     &-r-1 {
+    //       border-right: 1px #373f45 solid;
+    //     }
+    //   }
+    //   @else {
+    //     &-r-1 {
+    //       border-right: 1px #efefef solid;
+    //     }
+    //   }
+    // }
 
     .border-bottom-1 {
       border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color");
@@ -692,183 +699,224 @@ a {
       }
 
       &>.v-treeview-node {
-
-        .v-treeview-node--active {
-          background-color: map-deep-get($config,
-            #{$theme},
-            "v-treeview-node-label-active-bg"
-          );
-          border: 1px solid map-deep-get($config,
-            #{$theme},
-            "v-treeview-node-label-active-border"
-          );
+        .v-treeview-node__root {
           border-radius: 8px;
-
-          &:before {
-            background-color: map-deep-get($config,
-              #{$theme},
-              "v-treeview-node-subroot-backgroundColor"
-            );
-          }
-
-          &>.v-treeview-node__content {
-            .v-treeview-node__label {
-              color: map-deep-get($config,
-                #{$theme},
-                "v-treeview-node-label-active-color"
-              );
-            }
-
-            .v-icon {
-              color: map-deep-get($config,
-                #{$theme},
-                "v-treeview-icon-active-color"
-              );
-            }
-          }
-
-        }
-
-        &>.v-treeview-node__root {
-          &:before {
-            background-color: map-deep-get($config,
-              #{$theme},
-              "v-treeview-node-root-backgroundColor"
-            );
-          }
-
-          &>.v-treeview-node__content {
-            .v-treeview-node__label {
-              color: map-deep-get($config,
-                #{$theme},
-                "v-treeview-node-root-label-color"
-              );
-            }
-
-            .v-icon {
-              color: map-deep-get($config,
-                #{$theme},
-                "v-treeview-node-root-icon-color"
-              );
-            }
-          }
-
           &:hover {
-            &>.v-treeview-node__content {
-              .v-treeview-node__label {
-                color: map-deep-get($config,
-                  #{$theme},
-                  "v-treeview-node-root-label-active-color"
-                );
-              }
-
-              .v-icon {
-                color: map-deep-get($config,
-                  #{$theme},
-                  "v-treeview-node-root-icon-active-color"
-                );
-              }
-            }
+            background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color" );
           }
-        }
-
-        &>.v-treeview-node__children {
-          &>.v-treeview-node {
-
-            &>.v-treeview-node__root {
-              &:before {
-                background-color: map-deep-get($config,
-                  #{$theme},
-                  "v-treeview-node-subroot-backgroundColor"
-                );
-              }
-
-              &>.v-treeview-node__content {
-                .v-treeview-node__label {
-                  color: map-deep-get($config,
-                    #{$theme},
-                    "v-treeview-node-label-color"
-                  );
-                }
-
-                .v-icon {
-                  color: map-deep-get($config,
-                    #{$theme},
-                    "v-treeview-icon-color"
-                  );
-                }
-              }
-
-              &:not(.v-treeview-node--active):hover {
-                &:before {
-                  background-color: map-deep-get($config,
-                    #{$theme},
-                    "v-treeview-leaf-active-backgroundColor"
-                  );
-                }
-
-                &>.v-treeview-node__content {
-                  .v-treeview-node__label {
-                    color: map-deep-get($config,
-                      #{$theme},
-                      "v-treeview-leaf-active-color"
-                    );
-                  }
-
-                  .v-icon {
-                    color: map-deep-get($config,
-                      #{$theme},
-                      "v-treeview-leaf-active-color"
-                    );
-                  }
-                }
-              }
-            }
-
-            &>.v-treeview-node__children {
-              background-color: map-deep-get($config,
-                #{$theme},
-                "v-treeview-leaf-subchildren-backgroundColor"
-              );
-            }
-
-            &[aria-expanded="true"] {
-              & .v-treeview-node__root>.v-treeview-node__content {
-                .v-treeview-node__label {
-                  color: map-deep-get($config,
-                    #{$theme},
-                    "v-treeview-node-label-children-color"
-                  );
-                }
-
-                .v-icon {
-                  color: map-deep-get($config,
-                    #{$theme},
-                    "v-treeview-icon-active-color"
-                  );
-                }
-              }
-            }
-          }
-        }
-
-        &[aria-expanded="true"] {
-          & .v-treeview-node__root>.v-treeview-node__content {
+          .v-treeview-node__content {
             .v-treeview-node__label {
-              color: map-deep-get($config,
-                #{$theme},
-                "v-treeview-node-root-label-active-color"
-              );
-            }
-
-            .v-icon {
-              color: map-deep-get($config,
-                #{$theme},
-                "v-treeview-node-root-icon-active-color"
-              );
+              color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
             }
           }
+
         }
+
+        &[aria-expanded="true"]{
+
+          // Level 1
+          &>.v-treeview-node__root {
+            background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg" );
+            border: 1px solid map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+            color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
+
+            &:before {
+              background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor");
+            }
+
+            .v-treeview-node__content {
+              .v-treeview-node__label {
+                color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
+              }
+
+              .v-icon:first-child,
+              .v-icon:first-child::before {
+                color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+              }
+            }
+          }
+
+          &>.v-treeview-node__children {
+            // Level 2
+            .v-treeview-node__root {
+              color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
+              &:hover {
+                background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor");
+              }
+            }
+            &>[aria-expanded="true"] >.v-treeview-node__root,
+            .v-treeview-node__root.v-treeview-node--active {
+              background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" );
+              .v-treeview-node__content {
+                .v-treeview-node__label {
+                  color: map-deep-get($config, #{$theme}, "card-title-color");
+                }
+
+                .v-icon,
+                .v-icon::before,
+                .anticon {
+                  color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+                }
+              }
+            }
+            
+            // Level 3
+            .v-treeview-node__children {
+              .v-treeview-node {
+                >.v-treeview-node__root {
+                  .v-treeview-node__content {
+                    .v-treeview-node__label {
+                      color: map-deep-get($config, #{$theme}, "card-default-color");
+                    }
+                  }
+
+                  *:hover,
+                  :hover {
+                    border-width: 0;
+                  }
+
+                  &:hover {
+                    border: 1px solid  map-deep-get($config, #{$theme}, "v-input-textarea-border");
+                    border-radius: 8px;
+                    background-color: rgba(0, 0, 0, 0);
+                    .v-treeview-node__content {
+                      .v-treeview-node__label {
+                        color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
+                      }
+                    }
+
+                  }
+
+                  &.v-treeview-node--active {
+                    // color: map-deep-get($config, #{$theme}, "card-title-color");
+                    background-color: rgba(0, 0, 0, 0);
+                    .v-treeview-node__content {
+                      .v-treeview-node__label {
+                        color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
+                      }
+      
+                      .v-icon,
+                      .v-icon::before,
+                      .anticon {
+                        color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+                      }
+                    }
+                  }
+
+                }
+              }
+
+            }
+
+          }
+
+
+        }
+
+        // &>.v-treeview-node__root {
+        //   &:before {
+        //     background-color: map-deep-get($config, #{$theme}, "v-treeview-node-root-backgroundColor" );
+        //   }
+
+        //   &>.v-treeview-node__content {
+        //     .v-treeview-node__label {
+        //       color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
+        //     }
+        //   }
+
+        //   &:hover {
+        //     &>.v-treeview-node__content {
+        //       .v-treeview-node__label {
+        //         color: map-deep-get($config,
+        //           #{$theme},
+        //           "v-treeview-node-root-label-active-color"
+        //         );
+        //       }
+
+        //       .v-icon {
+        //         color: map-deep-get($config,
+        //           #{$theme},
+        //           "v-treeview-node-root-icon-active-color"
+        //         );
+        //       }
+        //     }
+        //   }
+        // }
+
+        // &>.v-treeview-node__children {
+        //   &>.v-treeview-node {
+
+        //     &>.v-treeview-node__root {
+        //       &:before {
+        //         background-color: map-deep-get($config,
+        //           #{$theme},
+        //           "v-treeview-node-subroot-backgroundColor"
+        //         );
+        //       }
+
+        //       &>.v-treeview-node__content {
+        //         .v-treeview-node__label {
+        //           color: map-deep-get($config, #{$theme}, "v-treeview-node-label-color" );
+        //         }
+
+        //         .v-icon {
+        //           color: map-deep-get($config, #{$theme}, "v-treeview-icon-color" );
+        //         }
+        //       }
+
+        //       &:not(.v-treeview-node--active):hover {
+        //         &:before {
+        //           background-color: map-deep-get($config,
+        //             #{$theme},
+        //             "v-treeview-leaf-active-backgroundColor"
+        //           );
+        //         }
+
+        //         &>.v-treeview-node__content {
+        //           .v-treeview-node__label {
+        //             color: map-deep-get($config,
+        //               #{$theme},
+        //               "v-treeview-leaf-active-color"
+        //             );
+        //           }
+
+        //           .v-icon {
+        //             color: map-deep-get($config,
+        //               #{$theme},
+        //               "v-treeview-leaf-active-color"
+        //             );
+        //           }
+        //         }
+        //       }
+        //     }
+
+        //     &>.v-treeview-node__children {
+        //       // background-color: map-deep-get($config,
+        //       //   #{$theme},
+        //       //   "v-treeview-leaf-subchildren-backgroundColor"
+        //       // );
+        //     }
+
+        //     // &[aria-expanded="true"] {
+        //     //   & .v-treeview-node__root>.v-treeview-node__content {
+        //     //     .v-treeview-node__label {
+        //     //       color: map-deep-get($config,
+        //     //         #{$theme},
+        //     //         "v-treeview-node-label-children-color"
+        //     //       );
+        //     //     }
+
+        //     //     .v-icon {
+        //     //       color: map-deep-get($config,
+        //     //         #{$theme},
+        //     //         "v-treeview-icon-active-color"
+        //     //       );
+        //     //     }
+        //     //   }
+        //     // }
+        //   }
+        // }
+
       }
     }
 
diff --git a/components/common/modal/ElecPowChrgPop.vue b/components/common/modal/ElecPowChrgPop.vue
index c2e7770..56efac4 100644
--- a/components/common/modal/ElecPowChrgPop.vue
+++ b/components/common/modal/ElecPowChrgPop.vue
@@ -58,7 +58,7 @@
 				<div class="pa-5">
 					<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
 					<v-row align="center" no-gutters>
-						<v-col :cols="label ? 3 : ''">
+						<v-col :cols="label ? 3 : ''" class="pr-3" >
 							<component
 								:is="'selectCodeList'"
 								:parentPrgmId="parentPrgmId"
@@ -66,41 +66,66 @@
 								dataKey="searchElecContKind"
 								:sendParam="{ commGrpCd: 'EM_CONT', useFg: '1' }"
 								:addAll="true"
+								:customClass="'select-large'"
 							/>
 						</v-col>
-						<v-col :cols="label ? 3 : ''">
+						<v-col :cols="label ? 3 : ''" class="pr-3" >
 							<component
 								:is="'selectCodeList'"
 								:parentPrgmId="parentPrgmId"
 								:label="'전압구분'"
 								dataKey="searchVoltKind"
 								:sendParam="{ commGrpCd: 'EM_VOLT_KIND', useFg: '1' }"
+								:customClass="'select-large'"
 								:addAll="true"
 							/>
 						</v-col>
-						<v-col :cols="label ? 3 : ''">
+						<v-col :cols="label ? 3 : ''" class="pr-3" >
 							<component
 								:is="'selectCodeList'"
 								:parentPrgmId="parentPrgmId"
 								:label="'전압구분'"
 								dataKey="searchOptKind"
 								:sendParam="{ commGrpCd: 'EM_VOLT_OPT', useFg: '1' }"
+								:customClass="'select-large'"
 								:addAll="true"
 							/>
 						</v-col>
 						<v-col cols="3" class="text-right">
-							<v-btn
+							<div style="height: 25px"></div>
+							<!-- <v-btn
 								v-if="!searchParam.isMulti"
 								:ripple="false"
 								@click="search()"
 								>검색</v-btn
+							> -->
+							<a-button
+								v-if="!searchParam.isMulti"
+								type="primary"
+								class="mr-1"
+								icon="search"
+								:ripple="false"
+								@click="search"
+								style="height: 40px"
 							>
-							<v-btn
+								검색
+							</a-button>
+							<!-- <v-btn
 								v-if="!searchParam.isMulti"
 								:ripple="false"
 								@click="initVal()"
 								>초기화</v-btn
+							> -->
+							<a-button
+								v-if="!searchParam.isMulti"
+								type="primary"
+								class="mr-1"
+								:ripple="false"
+								@click="initVal"
+								style="height: 40px"
 							>
+								초기화
+							</a-button>
 						</v-col>
 					</v-row>
 				</div>
@@ -310,7 +335,11 @@ export default {
 		},
 		// 공정/설비 트리 그리드 세팅
 		gridInit() {
-			const myOptions = {};
+			const myOptions = {
+				header: {
+					height: 38,
+				},
+			};
 			this.setModalGridOption({
 				modalKey: this.myModalKey,
 				gridKey: this.gridName,
@@ -606,11 +635,11 @@ const myColumns = [
 	{ header: '전력계약 ID', name: 'eleclContId', hidden: true},
 	{ header: '전력계약 명', name: 'eleclContNm', hidden: true},
 	{ header: '전력계약구분CD', name: 'elecContKind', hidden: true},
-	{ header: '전력계약구분', name: 'elecContKindNm', align: 'center'},
+	{ header: '전력계약구분', name: 'elecContKindNm', align: 'left'},
 	{ header: '전압구분CD', name: 'voltKind', hidden: true },
-	{ header: '전압구분', name: 'voltKindNm', align: 'center' },
+	{ header: '전압구분', name: 'voltKindNm', align: 'left' },
 	{ header: '옵션CD', name: 'optKind', hidden: true },
-	{ header: '옵션', name: 'optKindNm', align: 'center' },
+	{ header: '옵션', name: 'optKindNm', align: 'left' },
 	{
 		header: '기본요금(원/kW)',
 		name: 'baseChrg',
@@ -620,7 +649,7 @@ const myColumns = [
 		},
 	},
 	{ header: '시간대CD', name: 'peakKind', hidden: true },
-	{ header: '시간대', name: 'peakKindNm', align: 'center' },
+	{ header: '시간대', name: 'peakKindNm', align: 'left' },
 	{
 		header: '여름철(6~8월)',
 		name: 'unitPrcSum',
diff --git a/components/common/modal/EqpmSelectPop.vue b/components/common/modal/EqpmSelectPop.vue
index 0fe794e..959de8b 100644
--- a/components/common/modal/EqpmSelectPop.vue
+++ b/components/common/modal/EqpmSelectPop.vue
@@ -16,54 +16,52 @@
 
 				</template></v-text-field>
 		</v-col>
-		<v-dialog ref="popModal" v-model="dialog" width="800" overlay-color="#000" overlay-opacity="0.8" scrollable>
-			<v-card style="height: 100%">
+		<v-dialog ref="popModal" v-model="dialog" width="800" scrollable>
+			<v-card style="height: 90vh;">
 				<v-card-title class="px-5 py-4 d-flex align-center justify-space-between">
 					<span class="custom-title-4">설비 선택</span>
 					<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
 				</v-card-title>
 				<div class="pa-2 pt-0">
-					<v-card class="searchFilter">
-						<v-row align="end">
-							<v-col :cols="3.5">
-								<!-- 설비그룹 -->
-								<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01"
-									:label="'설비그룹'" :disabled="eqpmGrpDisabled"
-									@update:propsValue="selectValue01 = $event" :labelCols="12" :textCols="12"
-									:iconShow="true" />
-							</v-col>
-							<v-col :cols="3.5">
-								<!-- FAB -->
-								<component :is="'SelectBoxMulti'" :propsValue="selectValue02"
-									:itemList="selectValueList02" :label="'FAB'" :labelCols="12" :multiple="true"
-									:disabled="fabDisabled" @update:propsValue="selectValue02 = $event" :textCols="12"
-									:iconShow="true" />
-							</v-col>
-							<v-col :cols="3.5">
-								<v-row>
-									<v-col :cols="12" class="py-0">
-										<label for="" class="search-box-label">
-											<v-icon small :class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
-											설비명
-										</label>
-									</v-col>
-									<v-col :cols="12" class="pt-0">
-										<v-text-field append-icon="" class="v-input__custom" outlined
-											:hide-details="true" v-model="searchWord" @keyup.enter="search"><template
-												v-slot:append>
-												<!-- Custom SVG icon -->
-												<v-icon>$icoSearch</v-icon>
+					<!-- <v-card class="searchFilter">
+					</v-card> -->
+					<v-row align="end" class="searchFilter">
+						<v-col :cols="3.5">
+							<!-- 설비그룹 -->
+							<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01"
+								:label="'설비그룹'" :disabled="eqpmGrpDisabled"
+								@update:propsValue="selectValue01 = $event" :labelCols="12" :textCols="12"
+								:iconShow="true" />
+						</v-col>
+						<v-col :cols="3.5">
+							<!-- FAB -->
+							<component :is="'SelectBoxMulti'" :propsValue="selectValue02"
+								:itemList="selectValueList02" :label="'FAB'" :labelCols="12" :multiple="true"
+								:disabled="fabDisabled" @update:propsValue="selectValue02 = $event" :textCols="12"
+								:iconShow="true" />
+						</v-col>
+						<v-col :cols="3.5">
+							<v-row>
+								<v-col :cols="12" class="py-0">
+									<label for="" class="search-box-label">
+										<v-icon small :class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
+										설비명
+									</label>
+								</v-col>
+								<v-col :cols="12" class="pt-0">
+									<v-text-field append-icon="" class="v-input__custom" outlined
+										:hide-details="true" v-model="searchWord" @keyup.enter="search"><template
+											v-slot:append>
+											<!-- Custom SVG icon -->
+											<v-icon>$icoSearch</v-icon>
 
-											</template></v-text-field>
-									</v-col>
+										</template></v-text-field>
+								</v-col>
 
-								</v-row>
-							</v-col>
-							<a-button icon="search" type="primary" @click="search()" class="search-button">조회</a-button>
-
-
-						</v-row>
-					</v-card>
+							</v-row>
+						</v-col>
+						<a-button icon="search" type="primary" @click="search()" class="search-button">조회</a-button>
+					</v-row>
 
 					<!-- <v-row align="center" no-gutters style="margin-top: 14px;">
 						<v-col :cols="1">
@@ -77,14 +75,20 @@
 								:hide-details="true" v-model="searchWord" @keyup.enter="search"></v-text-field>
 						</v-col>
 					</v-row> -->
+					<!-- <v-row>
+						<v-col :col="12">
+						</v-col>
+					</v-row> -->
 				</div>
-				<div class="px-5" style="height:429px;">
-					<div ref="modalGridParent" class="w100 h100">
+
+				<v-card-text class="px-2 w100">
+					<div ref="modalGridParent" style="height: 450px;" class="h100 w100">
 						<component :ref="gridName" :is="loadGrid ? 'Grid' : null"
 							:dataPath="searchParam.eqpmSelectPopData.eqpmSelectPop" :gridName="gridName"
 							:parentPrgmId="parentPrgmId" @getRowsData="getRowData" />
 					</div>
-				</div>
+				</v-card-text>
+
 				<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
 					<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="mr-2">닫기</a-button>
 					<a-button :ripple="false" type="primary" @click="setUpdate($event)">확인</a-button>
diff --git a/components/common/modal/TagTrndTagPop.vue b/components/common/modal/TagTrndTagPop.vue
index fa0b2d4..1eccc1d 100644
--- a/components/common/modal/TagTrndTagPop.vue
+++ b/components/common/modal/TagTrndTagPop.vue
@@ -273,9 +273,9 @@ export default {
     });
   },
   async created() {
-    // await this.setSelectValueList01();
-    // await this.setSelectValueList02();
-    // await this.setSelectValueList03();
+    await this.setSelectValueList01();
+    await this.setSelectValueList02();
+    await this.setSelectValueList03();
     this.init();
     // if(this.searchParam.isMulti == true){
     //   this.setPageData({
@@ -487,40 +487,40 @@ export default {
         eqpmId: this.selectValue03,
         searchWord: this.searchWord,
       };
-      let res = [
-        {
-          eqpmGrpNm: "냉각 시스템",
-          eqpmGrpId: "GRP001",
-          eqpmId: "EQ001",
-          eqpmNm: "냉각기 A",
-          tagId: "TAG001-001",
-          tagNm: "냉각 온도 센서",
-          rowStat: "I",
-        },
-        {
-          eqpmGrpNm: "전력 시스템",
-          eqpmGrpId: "GRP002",
-          eqpmId: "EQ002",
-          eqpmNm: "변압기 B",
-          tagId: "TAG002-002",
-          tagNm: "전류 센서",
-          rowStat: "U",
-        },
-        {
-          eqpmGrpNm: "공기압 시스템",
-          eqpmGrpId: "GRP003",
-          eqpmId: "EQ003",
-          eqpmNm: "압축기 C",
-          tagId: "TAG003-003",
-          tagNm: "압력 센서",
-          rowStat: "D",
-        },
-      ];
-      //   res = await this.postApiReturn({
-      //     apiKey: "selectTagAndEqpmList",
-      //     resKey: "tagTrndDatas",
-      //     sendParam: searchParam,
-      //   });
+      // let res = [
+      //   {
+      //     eqpmGrpNm: "냉각 시스템",
+      //     eqpmGrpId: "GRP001",
+      //     eqpmId: "EQ001",
+      //     eqpmNm: "냉각기 A",
+      //     tagId: "TAG001-001",
+      //     tagNm: "냉각 온도 센서",
+      //     rowStat: "I",
+      //   },
+      //   {
+      //     eqpmGrpNm: "전력 시스템",
+      //     eqpmGrpId: "GRP002",
+      //     eqpmId: "EQ002",
+      //     eqpmNm: "변압기 B",
+      //     tagId: "TAG002-002",
+      //     tagNm: "전류 센서",
+      //     rowStat: "U",
+      //   },
+      //   {
+      //     eqpmGrpNm: "공기압 시스템",
+      //     eqpmGrpId: "GRP003",
+      //     eqpmId: "EQ003",
+      //     eqpmNm: "압축기 C",
+      //     tagId: "TAG003-003",
+      //     tagNm: "압력 센서",
+      //     rowStat: "D",
+      //   },
+      // ];
+      let res = await this.postApiReturn({
+          apiKey: "selectTagAndEqpmList",
+          resKey: "tagTrndDatas",
+          sendParam: searchParam,
+      });
       let newRes = [];
       if (this.searchParam["tagList"].length > 0) {
         newRes = res.filter((item) => {
diff --git a/layouts/default.vue b/layouts/default.vue
index 87ee665..f803b26 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -9,7 +9,6 @@
               <div class="lnb-logo">
                 <img v-if="isDarkMode" src="@/assets/images/logo_dm.png" />
                 <img v-else src="@/assets/images/logo_lm.png" />
-                <!-- <img v-else src="@/assets/images/logo_lm.png" /> -->
               </div>
               <!--            <div class="lnb-logo">FEMS</div>-->
             </router-link>
@@ -40,16 +39,16 @@
             <v-menu offset-y>
               <template v-slot:activator="{ on, attrs }">
                 <a-button
-                    :ripple="false"
-                    tile
-                    class="btn-header"
-                    v-bind="attrs"
-                    v-on="on"
-                    style="width: 100px"
-                  >
-                    <span class="body-2">즐겨찾기</span>
-                    <v-icon size="20">mdi-chevron-down</v-icon>
-                  </a-button>
+                  :ripple="false"
+                  tile
+                  class="btn-header"
+                  v-bind="attrs"
+                  v-on="on"
+                  style="width: 100px"
+                >
+                  <span class="body-2">즐겨찾기</span>
+                  <v-icon size="20">mdi-chevron-down</v-icon>
+                </a-button>
                 <!-- <a-button style="width: 100px; height: 36px" class="btn-header">
                   <span class="body-2">즐겨찾기</span>
                   <v-icon size="20">mdi-chevron-down</v-icon></a-button> -->
@@ -62,10 +61,10 @@
                 </v-list-item>
               </v-list>
             </v-menu>
-            <a-button id="refresh" class="btn-header" @click="removeBookMark" v-if="bookmarkBtn == 1">
+            <a-button id="removeBm" class="btn-header" @click="removeBookMark" v-if="bookmarkBtn == 1">
               <span class="material-icons" style="font-size: 17px">star</span>
             </a-button>
-            <a-button id="refresh" class="btn-header" :style="{
+            <a-button id="addBm" class="btn-header" :style="{
                     display: 'flex',
                     alignItems: 'center'}" @click="addBookMark" v-if="bookmarkBtn == 0">
               <span class="material-icons" style="font-size: 17px">star_border</span>
@@ -88,32 +87,12 @@
         </v-row>
       </div>
       <v-main>
-
         <v-container fluid>
           <v-row class="flex-nowrap">
             <div class="menu-container">
               <v-navigation-drawer ref="navigationdrawer" :value="drawer" :mini-variant="miniVariant" :clipped="clipped"
                 :absolute="false" mini-variant-width="60">
 
-                <div class="d-flex align-center justify-space-between py-4 px-3" v-if="false">
-                  <router-link class="home" :to="myHome.root">
-                    <div class="lnb-logo">
-                      <img v-if="isDarkMode" src="@/assets/images/logo_dm.png" />
-                      <img v-else src="@/assets/images/logo_lm.png" />
-                    </div>
-                    <!--            <div class="lnb-logo">FEMS</div>-->
-                    
-                  </router-link>
-                  <ThemeSwitch style="margin-right: 20px" />
-                  <v-app-bar-nav-icon ref="appbarnavicon" id="appbarnavicon" @click.stop="miniVariant = !miniVariant"
-                    @click="updateTreeview" :style="{
-                      backgroundColor: 'transparent',
-                      color: isDarkMode ? '#fff' : '#111',
-                    }" />
-                  <!-- <router-view :key="$route.fullPath"/> -->
-                </div>
-                <AdminMenu :miniVariant="miniVariant" :userNm="this.userInfo.userNm" :comId="this.userInfo.comId" v-if="false" />
-
                 <component ref="changePswdPop" :is="'ChangePswdPop'" v-show="false" :comId="this.userInfo.comId" />
                 <v-treeview ref="treeview" :active.sync="activeTree" active-class="v-treeview-node--active"
                   :items="treevieItems" activatable hoverable color="#3896ff" open-on-click @update:open="openNode">
@@ -130,14 +109,16 @@
                         :class="miniVariant === false ? 'mr-2' : ''" size="9">
                         $depth3rdBulletDark
                       </v-icon>
-                      <span v-if="item.url">{{ item.menuNm }}
+                      <span v-if="item.url">
+                        {{ item.menuNm }}
                         <!-- <span v-if="item.bookmark" class="material-icons" style="font-size: 17px; vertical-align: middle;" @click="addBookMark(item.menuId, item.url, item.bookmark)">star</span>
                         <span v-else-if="!item.bookmark" class="material-icons" style="font-size: 17px; vertical-align: middle;" @click="addBookMark(item.menuId, item.url, item.bookmark)">star_border</span> -->
                       </span>
                       <span v-else-if="!item.url">{{ item.menuNm }}</span>
-                      <v-icon v-if="item.lvl >= 1 && item.childeVo && item.childeVo.length > 0 && !item.url">
+                      <!-- <v-icon v-if="item.lvl >= 1 && item.childeVo && item.childeVo.length > 0 && !item.url">
                         mdi-chevron-down
-                      </v-icon>
+                      </v-icon> -->
+                      <a-icon type="down" v-if="item.lvl >= 1 && item.childeVo && item.childeVo.length > 0 && !item.url" />
                     </button>
                   </template>
                 </v-treeview>
@@ -805,7 +786,7 @@ export default {
       // 	console.log('if isLoading stmt3');
       // 	return;
       // }
-      alert("move to", url);
+      // alert("move to", url);
       this.$router.push({
         path: url + "?prgmId=" + prgmId,
       });
diff --git a/pages/comm/base/NoticeMngPage.vue b/pages/comm/base/NoticeMngPage.vue
index c99974f..cc71731 100644
--- a/pages/comm/base/NoticeMngPage.vue
+++ b/pages/comm/base/NoticeMngPage.vue
@@ -10,8 +10,8 @@
 							<v-card-title class="pa-0 custom-title-4">공지사항</v-card-title>
 							<div class="d-flex align-center">
 								<!-- <v-btn @click="listPageButtonGroupClickEvent('view')" :ripple="false" class="mr-1">상세보기</v-btn> -->
-								<a-button type="primary" size="large" @click="listPageButtonGroupClickEvent('write')"
-									:ripple="false" icon="edit" class="mr-1">작성</a-button>
+								<a-button type="primary" @click="listPageButtonGroupClickEvent('write')" :ripple="false"
+									icon="edit" class="mr-1">작성</a-button>
 								<!-- <v-btn @click="listPageButtonGroupClickEvent('delete')" :ripple="false">삭제</v-btn> -->
 							</div>
 						</v-col>
@@ -1053,16 +1053,16 @@ const defaultData = {
 		}
 	}
 
-	.toastui-editor-mode-switch{
+	.toastui-editor-mode-switch {
 		font-family: Inter !important;
 		font-size: 1.0rem !important;
 	}
 
-	.toastui-editor-mode-switch .tab-item.active{
+	.toastui-editor-mode-switch .tab-item.active {
 		color: #1677FF
 	}
 
-	.toastui-editor-mode-switch .tab-item{
+	.toastui-editor-mode-switch .tab-item {
 		color: #000000E0
 	}
 }
diff --git a/pages/ems/base/EquipmentMasterMngPage.vue b/pages/ems/base/EquipmentMasterMngPage.vue
index acc09f1..938faf2 100644
--- a/pages/ems/base/EquipmentMasterMngPage.vue
+++ b/pages/ems/base/EquipmentMasterMngPage.vue
@@ -53,7 +53,7 @@
 			</v-col>
 			<v-col :cols="7" >
 				<v-card class="pb-5">
-					<v-card-title class="custom-title-4" style="min-height:76px;">설비 상세</v-card-title>
+					<v-card-title class="custom-title-4 pb-1" >설비 상세</v-card-title>
 					<div class="px-5" style="min-height:calc(100% - 76px)">
 						<v-tabs v-model="tab">
 							<v-tab v-for="item in items" :key="item.id" :disabled="item.disabledFlag">
diff --git a/pages/ems/base/ReadResultCloseMngPage.vue b/pages/ems/base/ReadResultCloseMngPage.vue
index 8a64eea..0720a38 100644
--- a/pages/ems/base/ReadResultCloseMngPage.vue
+++ b/pages/ems/base/ReadResultCloseMngPage.vue
@@ -43,6 +43,7 @@
                 :is="'Datepicker'"
                 :parentPrgmId="myPrgmId"
                 :label="'조회기간'"
+                customClass="datepicker-large"
               />
             </v-col>
             <div class="d-flex">
diff --git a/pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue b/pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue
index 351da39..0a98351 100644
--- a/pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue
+++ b/pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue
@@ -49,7 +49,7 @@
 						<v-col :cols="3">
 							<!-- 대상일 -->
 							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="12"
-								:textCols="12" :customClass="'input-large'" />
+								:textCols="12" :customClass="'datepicker-large'" />
 						</v-col>
 						<v-col :cols="3" class="text-right">
 							<!-- 조회버튼 -->
diff --git a/pages/ems/effc/EnrgEffcTotSummPage.vue b/pages/ems/effc/EnrgEffcTotSummPage.vue
index a6e53e3..97b6233 100644
--- a/pages/ems/effc/EnrgEffcTotSummPage.vue
+++ b/pages/ems/effc/EnrgEffcTotSummPage.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="l-layout">
+    <CommonPageTitle />
     <v-row ref="searchFilter">
       <v-col :cols="12">
         <v-card class="searchFilter">
@@ -25,7 +26,7 @@
               <component
                 :is="'Datepicker'"
                 :parentPrgmId="myPrgmId"
-                :customClass="'select-large'"
+                :customClass="'datepicker-large'"
                 :label="'대상일'"
                 :labelCols="3"
               />
@@ -99,7 +100,6 @@ export default {
   async asyncData(context) {
     const myState = context.store.state;
     myPrgmId = context.route.query.prgmId;
-    console.log("active menu:", myState.menuData);
     await context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
     myTitle = await myState.activeMenuInfo.menuNm;
   },
@@ -319,8 +319,7 @@ export default {
         },
       };
 
-      console.log("data : ", data);
-      data.map((item) => {
+        data.map((item) => {
         xAxisData.push(item.fabNm);
       });
 
@@ -374,8 +373,6 @@ export default {
         ];
       }
 
-      // console.log("xAxisData : ", xAxisData);
-      console.log("seriesData : ", seriesData);
       var chartOption = {
         legend: {
           top: xAxisData.length > 7 ? "top" : "bottom",
diff --git a/pages/ems/effc/EnrgMapPage.vue b/pages/ems/effc/EnrgMapPage.vue
index b3c2e51..fed1f9d 100644
--- a/pages/ems/effc/EnrgMapPage.vue
+++ b/pages/ems/effc/EnrgMapPage.vue
@@ -5,14 +5,14 @@
 			<v-col :cols="12">
 				<v-card class="searchFilter">
 					<v-row align="end" no-gutters>
-						<v-col :cols="4">
+						<v-col :cols="3">
 							<!-- 차트목록 -->
 							<component :is="'SelectBox'" ref="SelectBox" :propsValue="selectValue01" :itemList="selectValueList01"
 								:label="'차트'" @update:propsValue="selectValue01 = $event" :textCols="12" customClass="select-large"  />
 						</v-col>
-						<v-col :cols="4">
+						<v-col :cols="3">
 							<!-- 대상일 -->
-							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" />
+							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" customClass="datepicker-large" />
 						</v-col>
 						<v-col :cols="4" class="text-right">
 							<BtnSearch @click="search" size="large" />
diff --git a/pages/ems/effc/EnrgReptMngPage.vue b/pages/ems/effc/EnrgReptMngPage.vue
index 9db9f28..a22005e 100644
--- a/pages/ems/effc/EnrgReptMngPage.vue
+++ b/pages/ems/effc/EnrgReptMngPage.vue
@@ -32,7 +32,7 @@
 						</v-col>
 						<v-col :cols="3">
 							<!-- 대상일 -->
-							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3"  />
+							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" customClass="datepicker-large"  />
 						</v-col>
 						<v-col :cols="6" class="text-right d-flex align-end justify-end align-self-end">
 							<!-- 조회버튼 -->
@@ -99,6 +99,8 @@ import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
 import DateUtility from '~/plugins/dateUtility';
 import XLSX from 'xlsx';
 
+import getLineChartOption from "~/components/common/chartoptions/LineChart";
+
 let myTitle;
 let myPrgmId;
 
@@ -764,22 +766,14 @@ export default {
 				];
 			}
 
-			var chartOption = {
-				legend: {
-					top: 'top',
-				},
-				grid: {
-					top: '10%',
-					bottom: '20%',
-				},
-				yAxis: {},
-				xAxis: {
-					data: xAxisData,
-				},
-				series: seriesData,
-				tooltip: {},
+			const chartOption = getLineChartOption({
+        xAxisData: xAxisData,
+        seriesData: seriesData,
 				dataZoom: dataZoom,
-			};
+        // legendData: legendData,
+        // isDarkMode: this.isDarkMode,
+      });
+
 			this.setChartOption({ chartKey: this.chartName01, value: chartOption });
 			// this.setChartYAxisData({ chartKey: this.chartName01, value: yAxisData });
 			// this.setChartXAxisData({ chartKey: this.chartName01, value: xAxisData });
@@ -864,22 +858,13 @@ export default {
 				];
 			}
 
-			var chartOption = {
-				legend: {
-					top: 'top',
-				},
-				grid: {
-					top: '10%',
-					bottom: '20%',
-				},
-				yAxis: {},
-				xAxis: {
-					data: xAxisData,
-				},
-				series: seriesData,
-				tooltip: {},
+			const chartOption = getLineChartOption({
+        xAxisData: xAxisData,
+        seriesData: seriesData,
 				dataZoom: dataZoom,
-			};
+        // legendData: legendData,
+        // isDarkMode: this.isDarkMode,
+      });
 
 			this.setChartOption({ chartKey: this.chartName02, value: chartOption });
 			// this.setChartDataZoom({chartKey : this.chartName02,value: dataZoom});
diff --git a/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue b/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
index 5416a1d..cb0f8a5 100644
--- a/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
+++ b/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
@@ -97,7 +97,7 @@
     </v-row>
     <v-row ref="contents" style="height: calc(100vh - 230px)">
       <v-col :cols="12" style="height: 100%">
-        <v-row class="pa-1" style="height: 37%; width: 100%">
+        <v-row class="pa-1" style="height: 50%; width: 100%">
           <div style="width: 100%; height: 100%; overflow: hidden">
             <div style="height: 15%">
               <v-card-title
@@ -117,7 +117,7 @@
                   v-for="(value, key, index) in contentData01"
                   :key="'key1' + index"
                 >
-                  <v-card>
+                  <v-card style="position: relative; overflow: hidden;" >
                     <!-- Card header -->
                     <div
                       style="
@@ -133,23 +133,9 @@
                     <v-card-title style="padding-left: 10px">{{
                       value["gdIdxNm"]
                     }}</v-card-title>
-                    <div class="v-box" style="height: 80%; padding: 3px; margin: 2px">
-                      <v-col :cols="12" style="height: 100%">
-                        <!-- <div style="height: 20%">
-                          <div
-                            style="
-                              position: absolute;
-                              left: 0;
-                              top: 10px;
-                              width: 4px;
-                              height: 50px;
-                              background-color: #91caff;
-                              border-radius: 2px;
-                            "
-                          ></div>
-                          <v-card-title>{{ value["gdIdxNm"] }}</v-card-title>
-                        </div> -->
-                        <div style="height: 95%">
+                    <div class="v-box" style="height: 80%; padding: 3px; margin: 10px;">
+                      <v-col :cols="12" style="height: 100%;">
+                        <div style="height: 85%;">
                           <component
                             class="w100 h100"
                             :is="loadChart ? 'Chart' : null"
@@ -166,7 +152,7 @@
             </div>
           </div>
         </v-row>
-        <v-row class="pa-1" style="height: 33%; width: 100%">
+        <v-row class="pa-1" style="height: 40%; width: 100%">
           <v-card class="pa-1" style="height: 100%; width: 100%; overflow: hidden">
             <div style="height: 25%">
               <v-card-title class="d-flex align-center justify-space-between pa-5">
@@ -746,10 +732,12 @@ export default {
 					{
             type: "line",
 						data: seriesData,
-            symbol: "none",
             itemStyle: {
               color: "#D32029",
             },
+            // symbol: "circle",
+            showSymbol: true,
+            connectNulls: true,
           },
           // {
           //   type: "line",
diff --git a/pages/ems/effc/EnrgUseTotSummPage.vue b/pages/ems/effc/EnrgUseTotSummPage.vue
index a8b0860..405cc53 100644
--- a/pages/ems/effc/EnrgUseTotSummPage.vue
+++ b/pages/ems/effc/EnrgUseTotSummPage.vue
@@ -24,6 +24,7 @@
                 :is="'DatePicker'"
                 :label="'대상연월'"
                 :parentPrgmId="myPrgmId"
+                :customClass="'datepicker-large'"
               />
             </v-col>
             <v-col :cols="3"> </v-col>
@@ -429,9 +430,6 @@ export default {
       var chartKey = null;
       var chartOption = null;
 
-      console.log("data key:", dataKeyList);
-      console.log("data test:", data);
-
       for (var i = 0; i < dataKeyList.length; i++) {
         for (var j = 0; j < data[dataKeyList[i]].chartData.length; j++) {
           currentChartData = data[dataKeyList[i]].chartData[j];
diff --git a/pages/ems/effc/EqpmIndMntrPage.vue b/pages/ems/effc/EqpmIndMntrPage.vue
index 1b18b7e..067f144 100644
--- a/pages/ems/effc/EqpmIndMntrPage.vue
+++ b/pages/ems/effc/EqpmIndMntrPage.vue
@@ -71,6 +71,7 @@
                 :label="'대상년월'"
                 :parentPrgmId="myPrgmId"
                 :isRangeOption="false"
+                :customClass="'datepicker-large'"
               />
             </v-col>
             <v-col :cols="6"> </v-col>
diff --git a/pages/ems/effc/TagTrndPage.vue b/pages/ems/effc/TagTrndPage.vue
index c0cd56a..ed7e0a6 100644
--- a/pages/ems/effc/TagTrndPage.vue
+++ b/pages/ems/effc/TagTrndPage.vue
@@ -1,37 +1,37 @@
 <template>
-	<div ref="mainDiv" class="l-layout">
-    <PageTitle text="데이터 TREND" />
-		<v-row ref="searchFilter">
-			<v-col :cols="12">
-				<v-card class="searchFilter">
-					<v-row align="center" no-gutters>
-						<v-col :cols="6">
-							<DatepickerTimeSelectBox
-								:parentPrgmId="myPrgmId"
-								:label="'기간'"
+  <div ref="mainDiv" class="l-layout">
+    <CommonPageTitle />
+    <v-row ref="searchFilter">
+      <v-col :cols="12">
+        <v-card class="searchFilter">
+          <v-row align="center" no-gutters>
+            <v-col :cols="6">
+              <DatepickerTimeSelectBox
+                :parentPrgmId="myPrgmId"
+                :label="'기간'"
                 :labelCols="12"
                 :textCols="8"
                 :iconShow="true"
-								:selectFromDtUntilTodayFg="true"
-								:selectToDtUntilTodayFg="true"
-								:selectBoxTimeItemList="selectBoxTimeItemList"
-							/>
-						</v-col>
+                :selectFromDtUntilTodayFg="true"
+                :selectToDtUntilTodayFg="true"
+                :selectBoxTimeItemList="selectBoxTimeItemList"
+              />
+            </v-col>
             <v-col :cols="2" style="padding: 0px">
               <div style="height: 30px"></div>
-							<CheckBoxLabelChange
-								:parentPrgmId="myPrgmId"
-								:label="'RawData'"
-								valueNm="useFg"
-								:icon="false"
-								:required="true"
-								:location="'rear'"
-								:textCols="1"
-								:labelCols="2"
-								:disabledCheckOption="'chkEqualDayHourFg'"
+              <CheckBoxLabelChange
+                :parentPrgmId="myPrgmId"
+                :label="'RawData'"
+                valueNm="useFg"
+                :icon="false"
+                :required="true"
+                :location="'rear'"
+                :textCols="1"
+                :labelCols="2"
+                :disabledCheckOption="'chkEqualDayHourFg'"
                 :isDarkMode="isDarkMode"
-							/>
-						</v-col>
+              />
+            </v-col>
             <v-col :cols="4" class="text-right">
               <div style="height: 30px"></div>
 
@@ -64,21 +64,21 @@
                 @click="search"
                 >조회</a-button
               >
-						</v-col>
-					</v-row>
-				</v-card>
-			</v-col>
-		</v-row>
-		<v-row ref="contents">
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-row ref="contents">
       <v-col :cols="12" style="height: 100%; padding: 0px">
-				<!-- <v-card class="pb-5"> -->
+        <!-- <v-card class="pb-5"> -->
         <v-col :cols="12" style="height: 300px">
-					<v-card class="pb-5 px-2">
-						<div class="d-flex align-center justify-space-between pa-4">
-							<v-col :cols="3" style="height: 100%">
+          <v-card class="pb-5 px-2">
+            <div class="d-flex align-center justify-space-between pa-4">
+              <v-col :cols="3" style="height: 100%">
                 <v-card-title class="pa-0 custom-title-4">TAG 리스트</v-card-title>
-							</v-col>
-							<v-col :cols="3" style="height: 100%" class="text-right">
+              </v-col>
+              <v-col :cols="3" style="height: 100%" class="text-right">
                 <!-- <v-btn :ripple="false" @click="btnActions('add')">TAG 추가</v-btn>
                 <v-btn :ripple="false" @click="btnActions('remove')">TAG 삭제</v-btn
                 > -->
@@ -87,55 +87,55 @@
                 >
                 <a-button class="basic-button" @click="btnActions('remove')"
                   >TAG 삭제</a-button
-								>
-								<component
-									ref="TagTrndTagPop"
-									:is="'TagTrndTagPop'"
-									:label="'test'"
-									:parentPrgmId="myPrgmId"
-									@gridEditingFinish="gridEditingFinish"
-									@closePopEvent="closePopEvent"
-								/>
-							</v-col>
-						</div>
+                >
+                <component
+                  ref="TagTrndTagPop"
+                  :is="'TagTrndTagPop'"
+                  :label="'test'"
+                  :parentPrgmId="myPrgmId"
+                  @gridEditingFinish="gridEditingFinish"
+                  @closePopEvent="closePopEvent"
+                />
+              </v-col>
+            </div>
             <div class="h100 px-5" style="height: calc(100% - 70px)">
-							<div ref="gridParent" class="w100 h100">
-								<component
-									:ref="gridName"
-									class="tagTrndGrid"
-									:is="loadGrid ? 'Grid' : null"
-									:gridName="gridName"
-									:parentPrgmId="myPrgmId"
-									@getRowsData="getRowData"
-								/>
-							</div>
-						</div>
-					</v-card>
-				</v-col>
-				<v-col
-					v-show="!dumyChartFg"
-					:cols="12"
-					v-for="(item, index) in tagList"
-					:key="'key_' + index"
-					style="height: 65%"
-				>
-					<v-card class="pb-5 px-2">
-						<div class="d-flex align-center justify-space-between">
+              <div ref="gridParent" class="w100 h100">
+                <component
+                  :ref="gridName"
+                  class="tagTrndGrid"
+                  :is="loadGrid ? 'Grid' : null"
+                  :gridName="gridName"
+                  :parentPrgmId="myPrgmId"
+                  @getRowsData="getRowData"
+                />
+              </div>
+            </div>
+          </v-card>
+        </v-col>
+        <v-col
+          v-show="!dumyChartFg"
+          :cols="12"
+          v-for="(item, index) in tagList"
+          :key="'key_' + index"
+          style="height: 65%"
+        >
+          <v-card class="pb-5 px-2">
+            <div class="d-flex align-center justify-space-between">
               <v-card-title class="d-flex align-center justify-space-between pa-5">{{
                 item
               }}</v-card-title>
-						</div>
-						<div :ref="'chartParent' + index" style="height: 90%">
-							<component
-								class="w100 h100"
-								:is="loadChart ? 'Chart' : null"
-								:parentPrgmId="myPrgmId"
-								:chartName="chartNameList[index]"
-								:ref="chartNameList[index]"
-							/>
-						</div>
+            </div>
+            <div :ref="'chartParent' + index" style="height: 90%">
+              <component
+                class="w100 h100"
+                :is="loadChart ? 'Chart' : null"
+                :parentPrgmId="myPrgmId"
+                :chartName="chartNameList[index]"
+                :ref="chartNameList[index]"
+              />
+            </div>
 
-						<!-- <div class="d-flex align-center justify-space-between">
+            <!-- <div class="d-flex align-center justify-space-between">
 							<v-card-title class="pa-0">{{'test'}}</v-card-title>
 						</div>
 						<div :ref="'chartParent'" style="height: 75%">
@@ -147,31 +147,31 @@
 								:ref="chartName"
 							/>
 						</div> -->
-					</v-card>
-				</v-col>
+          </v-card>
+        </v-col>
         <v-col v-show="dumyChartFg" :cols="12" style="height: 60%">
-					<v-card class="pb-5 px-2">
-						<div class="d-flex align-center justify-space-between">
+          <v-card class="pb-5 px-2">
+            <div class="d-flex align-center justify-space-between">
               <v-card-title class="d-flex align-center justify-space-between pa-5">{{
                 "ICHEON.HVAC.EQP_HT_CH004.UT_HT_CH201.CHI_AMP_1A_PV"
               }}</v-card-title>
-						</div>
+            </div>
             <div :ref="'chartParent' + 0" style="height: 100%; overflow: visible">
-							<component
+              <component
                 style="margin-top: -45px; width: 100%; height: 450px"
-								class="w100 h100"
-								:is="'Chart'"
-								:parentPrgmId="myPrgmId"
-								:chartName="chartNameList[0]"
-								:ref="chartNameList[0]"
-							/>
-						</div>
-					</v-card>
-				</v-col>
-				<!-- </v-card> -->
-			</v-col>
-		</v-row>
-	</div>
+                class="w100 h100"
+                :is="'Chart'"
+                :parentPrgmId="myPrgmId"
+                :chartName="chartNameList[0]"
+                :ref="chartNameList[0]"
+              />
+            </div>
+          </v-card>
+        </v-col>
+        <!-- </v-card> -->
+      </v-col>
+    </v-row>
+  </div>
 </template>
 
 <script>
@@ -188,297 +188,295 @@ import Grid from "~/components/common/Grid";
 import TagTrndTagPop from "~/components/common/modal/TagTrndTagPop";
 import Chart from "~/components/common/Chart";
 import XLSX from "xlsx";
-import PageTitle from "~/components/common/PageTitle";
 
 let myTitle;
 let myPrgmId;
 
 export default {
-	mixins: [mixinGlobal, resize],
-	async asyncData(context) {
-		const myState = context.store.state;
-		myPrgmId = context.route.query.prgmId;
+  mixins: [mixinGlobal, resize],
+  async asyncData(context) {
+    const myState = context.store.state;
+    myPrgmId = context.route.query.prgmId;
     await context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
-		myTitle = await myState.activeMenuInfo.menuNm;
-	},
-	meta: {
-		title: () => {
-			return myTitle;
-		},
-		prgmId: myPrgmId,
-		closable: true,
-	},
-	components: {
-		DatepickerTimeSelectBox,
-		Utility,
-		CheckBoxLabelChange,
-		BtnSearch,
-		BtnExcelDownload,
-		Grid,
-		TagTrndTagPop,
-		Chart,
-    PageTitle,
-	},
-	data() {
-		return {
-			myPrgmId: myPrgmId,
-			initedFlag: false,
-			selectBoxTimeItemList: {
+    myTitle = await myState.activeMenuInfo.menuNm;
+  },
+  meta: {
+    title: () => {
+      return myTitle;
+    },
+    prgmId: myPrgmId,
+    closable: true,
+  },
+  components: {
+    DatepickerTimeSelectBox,
+    Utility,
+    CheckBoxLabelChange,
+    BtnSearch,
+    BtnExcelDownload,
+    Grid,
+    TagTrndTagPop,
+    Chart,
+  },
+  data() {
+    return {
+      myPrgmId: myPrgmId,
+      initedFlag: false,
+      selectBoxTimeItemList: {
         selectTimeValue1: "00 : 00", // selectBoxTime에 필요한 prop
-				selectTimeValueList1: [], // selectBoxTime에 필요한 prop
+        selectTimeValueList1: [], // selectBoxTime에 필요한 prop
         selectTimeValue2: "00 : 00", // selectBoxTime에 필요한 prop
-				selectTimeValueList2: [], // selectBoxTime에 필요한 prop
-				minInterval: 10,
-			},
-			useFg: false,
+        selectTimeValueList2: [], // selectBoxTime에 필요한 prop
+        minInterval: 10,
+      },
+      useFg: false,
       gridName: "rowGrid",
-			loadGrid: false,
-			fromDt: Utility.setFormatDate(
-				new Date(new Date().setMonth(new Date().getMonth() - 1)),
+      loadGrid: false,
+      fromDt: Utility.setFormatDate(
+        new Date(new Date().setMonth(new Date().getMonth() - 1)),
         "YYYYMMDD"
-			),
+      ),
       toDt: Utility.setFormatDate(new Date(), "YYYYMMDD"),
       today: Utility.setFormatDate(new Date(), "YYYYMMDD"),
       currentPagePath: "",
-			loadChartList: [false, false, false, false, false],
+      loadChartList: [false, false, false, false, false],
       chartNameList: ["chart01", "chart02", "chart03", "chart04", "chart05"],
-			tagList: [],
-			loadChart: false,
-			dumyChartFg: true,
-			// chartName: 'chart01'
-		};
-	},
-	computed: {
-		chkIsFind() {
-			// 조회 플래그
-			return this.pageData.isFind;
-		},
-		chkFromDt() {
-			return this.pageData.fromDt;
-		},
-		chkToDt() {
-			return this.pageData.toDt;
-		},
-		chkSelectTimeValue1() {
-			return this.pageData.selectTimeValue1;
-		},
-		chkSelectTimeValue2() {
-			return this.pageData.selectTimeValue2;
-		},
-		chkUseFg() {
-			return this.pageData.useFg;
-		},
-		chkTagList() {
-			return this.pageData.tagList;
-		},
+      tagList: [],
+      loadChart: false,
+      dumyChartFg: true,
+      // chartName: 'chart01'
+    };
+  },
+  computed: {
+    chkIsFind() {
+      // 조회 플래그
+      return this.pageData.isFind;
+    },
+    chkFromDt() {
+      return this.pageData.fromDt;
+    },
+    chkToDt() {
+      return this.pageData.toDt;
+    },
+    chkSelectTimeValue1() {
+      return this.pageData.selectTimeValue1;
+    },
+    chkSelectTimeValue2() {
+      return this.pageData.selectTimeValue2;
+    },
+    chkUseFg() {
+      return this.pageData.useFg;
+    },
+    chkTagList() {
+      return this.pageData.tagList;
+    },
     ...mapState({
       isDarkMode: "isDarkMode",
     }),
-	},
-	watch: {
-		chkFromDt(val) {
-			this.fromDt = val;
-			this.today;
+  },
+  watch: {
+    chkFromDt(val) {
+      this.fromDt = val;
+      this.today;
       let diff = DateUtility.diff(val, this.today, "day");
-			if (diff >= 0) {
-				this.setCheckBoxFg(val);
-			}
-		},
-		chkToDt(val) {
-			this.toDt = val;
-			this.today;
-			// 오늘 날짜 이상을 선택할 경우 -> 선택한 날짜 + 오늘 날짜로 2번 변경되어 선택한 날짜로 인해 메서드가 호출 되는 것을 방지
+      if (diff >= 0) {
+        this.setCheckBoxFg(val);
+      }
+    },
+    chkToDt(val) {
+      this.toDt = val;
+      this.today;
+      // 오늘 날짜 이상을 선택할 경우 -> 선택한 날짜 + 오늘 날짜로 2번 변경되어 선택한 날짜로 인해 메서드가 호출 되는 것을 방지
       let diff = DateUtility.diff(val, this.today, "day");
-			if (diff >= 0) {
-				this.setCheckBoxFg(val);
-			}
-		},
-		chkIsFind(val) {
-			// if (val) this.search();
-		},
-		chkSelectTimeValue1(val) {
-			this.selectBoxTimeItemList.selectTimeValue1 = val;
-			this.setCheckBoxFg(val);
-		},
-		chkSelectTimeValue2(val) {
-			this.selectBoxTimeItemList.selectTimeValue2 = val;
-			this.setCheckBoxFg(val);
-		},
-		chkUseFg(val) {
-			this.useFg = val;
-			// this.search();
+      if (diff >= 0) {
+        this.setCheckBoxFg(val);
+      }
+    },
+    chkIsFind(val) {
+      // if (val) this.search();
+    },
+    chkSelectTimeValue1(val) {
+      this.selectBoxTimeItemList.selectTimeValue1 = val;
+      this.setCheckBoxFg(val);
+    },
+    chkSelectTimeValue2(val) {
+      this.selectBoxTimeItemList.selectTimeValue2 = val;
+      this.setCheckBoxFg(val);
+    },
+    chkUseFg(val) {
+      this.useFg = val;
+      // this.search();
 
-			// if(this.fromDt+this.selectBoxTimeItemList.selectTimeValue1.slice(0, 2) == this.toDt+this.selectBoxTimeItemList.selectTimeValue2.slice(0, 2)){
-			// 	this.useFg = val;
-			// 	this.search();
-			// }else{
-			// 	alert('한 시간 이내일 경우만 선택할 수 있습니다.')
-			// }
-		},
-		chkTagList(val) {
-			// this.tagList = [...val];
-			// chkTagList는 이벤트 감지용 무조건 grid의 row개수로 확인하고 진행
-			let gridData = this.$refs[this.gridName].getData();
+      // if(this.fromDt+this.selectBoxTimeItemList.selectTimeValue1.slice(0, 2) == this.toDt+this.selectBoxTimeItemList.selectTimeValue2.slice(0, 2)){
+      // 	this.useFg = val;
+      // 	this.search();
+      // }else{
+      // 	alert('한 시간 이내일 경우만 선택할 수 있습니다.')
+      // }
+    },
+    chkTagList(val) {
+      // this.tagList = [...val];
+      // chkTagList는 이벤트 감지용 무조건 grid의 row개수로 확인하고 진행
+      let gridData = this.$refs[this.gridName].getData();
       let tagList = gridData.map((item) => {
-				return item.tagId;
-			});
-			this.tagList = tagList;
-			if (this.tagList.length == 0) {
-				this.dumyChartFg = true;
-			} else {
-				this.dumyChartFg = false;
-			}
-			if (this.initedFlag && this.tagList.length > 0) {
-				this.search();
-			}
-		},
-	},
-	async beforeCreate() {
-		myPrgmId = this.$route.query.prgmId;
+        return item.tagId;
+      });
+      this.tagList = tagList;
+      if (this.tagList.length == 0) {
+        this.dumyChartFg = true;
+      } else {
+        this.dumyChartFg = false;
+      }
+      if (this.initedFlag && this.tagList.length > 0) {
+        this.search();
+      }
+    },
+  },
+  async beforeCreate() {
+    myPrgmId = this.$route.query.prgmId;
     await this.$store.dispatch("chkOpenTabList", {
       key: "create",
-			prgmId: myPrgmId,
-			defaultData: defaultData,
-		});
-	},
-	created() {},
-	async mounted() {
-		this.currentPagePath = this.$router.currentRoute.fullPath;
-		await this.init();
-		let gridData = this.$refs[this.gridName].getData();
+      prgmId: myPrgmId,
+      defaultData: defaultData,
+    });
+  },
+  created() {},
+  async mounted() {
+    this.currentPagePath = this.$router.currentRoute.fullPath;
+    await this.init();
+    let gridData = this.$refs[this.gridName].getData();
     let tagList = gridData.map((item) => {
-			return item.tagId;
-		});
-		this.tagList = tagList;
-		this.setPageData({
-			tagList: tagList,
-		});
-		this.initedFlag = true;
-	},
-	beforeDestroy() {
-		// await this.setChartNull();
-		// for(var i=0; i<this.pageData.tagList; i++){
+      return item.tagId;
+    });
+    this.tagList = tagList;
+    this.setPageData({
+      tagList: tagList,
+    });
+    this.initedFlag = true;
+  },
+  beforeDestroy() {
+    // await this.setChartNull();
+    // for(var i=0; i<this.pageData.tagList; i++){
 
-		// 	// this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['xAxis'] =
+    // 	// this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['xAxis'] =
 
-		// 	Object.assign(
-		// 		this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['xAxis'],
-		// 		[
-		// 			{
-		// 				data: [],
-		// 				axisLabel: { interval: 0, rotate: 30 }
-		// 			}
-		// 		]
-		// 	);
+    // 	Object.assign(
+    // 		this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['xAxis'],
+    // 		[
+    // 			{
+    // 				data: [],
+    // 				axisLabel: { interval: 0, rotate: 30 }
+    // 			}
+    // 		]
+    // 	);
 
-		// 	Object.assign(
-		// 		this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['series'],
-		// 		[]
-		// 	);
-		// 	Object.assign(
-		// 		this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['legend'],
-		// 		{
-		// 			top: 'top',
-		// 			left: 'center',
-		// 			data: [],
-		// 			textStyle: {
-		// 				color: '#95A0A9',
-		// 				fontSize: 10,
-		// 			}
-		// 		}
-		// 	);
-		// 	// this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['legend'] =
+    // 	Object.assign(
+    // 		this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['series'],
+    // 		[]
+    // 	);
+    // 	Object.assign(
+    // 		this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['legend'],
+    // 		{
+    // 			top: 'top',
+    // 			left: 'center',
+    // 			data: [],
+    // 			textStyle: {
+    // 				color: '#95A0A9',
+    // 				fontSize: 10,
+    // 			}
+    // 		}
+    // 	);
+    // 	// this.$store.state.pageData[myPrgmId][this.chartNameList[i]]['legend'] =
 
-		// }
+    // }
     this.chkOpenTabList({ key: "destroy", prgmId: myPrgmId });
-	},
-	methods: {
-		...mapMutations({
+  },
+  methods: {
+    ...mapMutations({
       setChartOption: "setChartOption",
       setChartYAxisData: "setChartYAxisData",
       setChartDetailXAxisData: "setChartDetailXAxisData",
       setChartSeries: "setChartSeries",
       setPageData: "setPageData",
-		}),
-		...mapActions({
+    }),
+    ...mapActions({
       getCodeList: "modules/search/getCodeList",
       getBlocMstrList: "modules/search/getBlocMstrList",
       getAddInfoList: "modules/search/getAddInfoList",
-		}),
-		async init() {
-			this.setPageData({
-				rowGridSelectKey: 0,
-				rowGridSelectData: null,
-			});
-			this.gridInit();
-			this.setChartNull();
-		},
-		async search() {
-			// search가 2번 타는 경우:
-			// 1. fromDt: 2022-11-01 00:20 / toDt: 2022-12-09 00:00(오늘 날짜)
-			// 2. fromDt를 오늘날짜로 변경 시 date 변경에 의한 search + 00:20 -> 00:00으로 변경되어 search
-			if (this.tagList.length > 0) {
-				await this.getTagData();
-			} else {
+    }),
+    async init() {
+      this.setPageData({
+        rowGridSelectKey: 0,
+        rowGridSelectData: null,
+      });
+      this.gridInit();
+      this.setChartNull();
+    },
+    async search() {
+      // search가 2번 타는 경우:
+      // 1. fromDt: 2022-11-01 00:20 / toDt: 2022-12-09 00:00(오늘 날짜)
+      // 2. fromDt를 오늘날짜로 변경 시 date 변경에 의한 search + 00:20 -> 00:00으로 변경되어 search
+      if (this.tagList.length > 0) {
+        await this.getTagData();
+      } else {
         alert("TAG를 선택해주세요.");
-			}
+      }
 
-			this.setPageData({
-				isFind: false,
-			});
-		},
-		setCheckBoxFg(val) {
-			let selectTimeValueList1 = this.selectBoxTimeItemList.selectTimeValueList1.map(
+      this.setPageData({
+        isFind: false,
+      });
+    },
+    setCheckBoxFg(val) {
+      let selectTimeValueList1 = this.selectBoxTimeItemList.selectTimeValueList1.map(
         (item) => {
-					return item.value;
+          return item.value;
         }
-			);
-			let selectTimeValueList2 = this.selectBoxTimeItemList.selectTimeValueList2.map(
+      );
+      let selectTimeValueList2 = this.selectBoxTimeItemList.selectTimeValueList2.map(
         (item) => {
-					return item.value;
+          return item.value;
         }
-			);
-			let timeValueIndex1 = selectTimeValueList1.indexOf(
+      );
+      let timeValueIndex1 = selectTimeValueList1.indexOf(
         this.selectBoxTimeItemList.selectTimeValue1
-			);
-			let timeValueIndex2 = selectTimeValueList2.indexOf(
+      );
+      let timeValueIndex2 = selectTimeValueList2.indexOf(
         this.selectBoxTimeItemList.selectTimeValue2
-			);
-			if (this.fromDt == this.toDt && timeValueIndex2 - timeValueIndex1 <= 6) {
-				this.setPageData({
-					chkEqualDayHourFg: false,
-				});
-			} else {
-				this.setPageData({
-					chkEqualDayHourFg: true,
-					useFg: false,
-				});
-			}
-		},
-		gridInit() {
-			const gridHeight = this.$refs.gridParent.offsetHeight - 30;
-			const myOptions = {
-				columnOptions: {
-					resizable: true,
-				},
+      );
+      if (this.fromDt == this.toDt && timeValueIndex2 - timeValueIndex1 <= 6) {
+        this.setPageData({
+          chkEqualDayHourFg: false,
+        });
+      } else {
+        this.setPageData({
+          chkEqualDayHourFg: true,
+          useFg: false,
+        });
+      }
+    },
+    gridInit() {
+      const gridHeight = this.$refs.gridParent.offsetHeight - 30;
+      const myOptions = {
+        columnOptions: {
+          resizable: true,
+        },
         header: {
           height: 38,
         },
-			};
-			this.setGridOption({
-				gridKey: this.gridName,
-				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
-			});
-			const _this = this;
-			const myColumns = [
-				// { header: '가이드ID', name: 'gdIdxId', align: 'center', hidden: true},
+      };
+      this.setGridOption({
+        gridKey: this.gridName,
+        value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
+      });
+      const _this = this;
+      const myColumns = [
+        // { header: '가이드ID', name: 'gdIdxId', align: 'center', hidden: true},
         { header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 150 },
-				{
+        {
           header: "설비그룹 ID",
           name: "eqpmGrpId",
           align: "center",
-					hidden: true,
-				},
+          hidden: true,
+        },
         { header: "설비ID", name: "eqpmId", align: "left", width: 200 },
         { header: "설비명", name: "eqpmNm", align: "left", width: 200 },
         { header: "TAG ID", name: "tagId", align: "left", width: 500 },
@@ -486,163 +484,143 @@ export default {
         { header: "rowStat", name: "rowStat", align: "center", hidden: true },
       ];
 
-      const newRes = [
-        {
-          eqpmGrpNm: "냉동기고온",
-          eqpmGrpId: "UT_HT_CH201",
-          eqpmId: "UT_HT_CH201",
-          eqpmNm: "UT_HT_CH201",
-          tagId: "ICHEON.HVAC.EQP_HT_CH004.UT_HT_CH201.CHI_AMP_1A_PV",
-          tagNm: "ICHEON 고온 냉동기 201호기 - 회로1 전류A",
-          // rowStat: "I",
-        },
-        {
-          eqpmGrpNm: "냉동기고온",
-          eqpmGrpId: "UT_HT_CH201",
-          eqpmId: "UT_HT_CH201",
-          eqpmNm: "UT_HT_CH201",
-          tagId: "ICHEON.HVAC.EQP_HT_CH004.UT_HT_CH201.CHI_AMP_1A_PV",
-          tagNm: "ICHEON 고온 냉동기 201호기 - 회로1 전류A",
-          // rowStat: "I",
-        },
-			];
-			this.setGridColumn({
-				gridKey: this.gridName,
-				value: myColumns,
-			});
-			this.loadGrid = true;
-		},
-		getRowData(data) {
-			this.setPageData({
-				rowGridSelectKey: data.rowKey,
-				rowGridSelectData: data,
-			});
-		},
-		async btnActions(action) {
-			switch (action) {
+      this.setGridColumn({
+        gridKey: this.gridName,
+        value: myColumns,
+      });
+      this.loadGrid = true;
+    },
+    getRowData(data) {
+      this.setPageData({
+        rowGridSelectKey: data.rowKey,
+        rowGridSelectData: data,
+      });
+    },
+    async btnActions(action) {
+      switch (action) {
         case "add" /*  */:
-					// if(this.pageData.totalSelectedTags.split('/*wq2a/').length>5){
-					if (this.tagList.length >= 5) {
+          // if(this.pageData.totalSelectedTags.split('/*wq2a/').length>5){
+          if (this.tagList.length >= 5) {
             alert("TAG는 최대 5개까지 선택 가능합니다.");
-					} else {
-						const defaultRow = {
-							eqpmGrpNm: null,
-							eqpmGrpId: null,
-							eqpmId: null,
-							eqpmNm: null,
-							tagId: null,
-							tagNm: null,
+          } else {
+            const defaultRow = {
+              eqpmGrpNm: null,
+              eqpmGrpId: null,
+              eqpmId: null,
+              eqpmNm: null,
+              tagId: null,
+              tagNm: null,
               rowStat: "I",
-						};
-						// 바인딩할 row 추가
-						this.$refs[this.gridName].addRow(defaultRow);
+            };
+            // 바인딩할 row 추가
+            this.$refs[this.gridName].addRow(defaultRow);
             this.$refs["TagTrndTagPop"].dialog = true;
-					}
-					break;
+          }
+          break;
 
         case "remove":
-					let nowGridData = [];
-					nowGridData = this.$refs[this.gridName].getData();
-					if (nowGridData.length <= 0) {
+          let nowGridData = [];
+          nowGridData = this.$refs[this.gridName].getData();
+          if (nowGridData.length <= 0) {
             alert("선택 된 태그가 없습니다.");
-					} else {
-						let tagList = [];
-						tagList = this.tagList;
-						let idx = tagList.indexOf(this.pageData.rowGridSelectData.tagId);
-						// 삭제한 태그에 해당되는 차트의 pageData의 series, xAxis data 초기화 시켜주기
+          } else {
+            let tagList = [];
+            tagList = this.tagList;
+            let idx = tagList.indexOf(this.pageData.rowGridSelectData.tagId);
+            // 삭제한 태그에 해당되는 차트의 pageData의 series, xAxis data 초기화 시켜주기
             this.$store.state.pageData[myPrgmId][this.chartNameList[idx]]["series"] = [];
             this.$store.state.pageData[myPrgmId][this.chartNameList[idx]]["xAxis"][0][
               "data"
-						] = [];
+            ] = [];
             if (
               this.$store.state.pageData[myPrgmId][this.chartNameList[idx]]["xAxis"]
                 .length > 1
-						) {
+            ) {
               this.$store.state.pageData[myPrgmId][this.chartNameList[idx]]["xAxis"][1][
                 "data"
               ] = [];
-						}
+            }
 
             let newTagList = tagList.filter((item) => {
-							return item != this.pageData.rowGridSelectData.tagId;
-						});
-						this.$refs[this.gridName].removeRow(
+              return item != this.pageData.rowGridSelectData.tagId;
+            });
+            this.$refs[this.gridName].removeRow(
               "immediately",
               this.pageData.rowGridSelectKey
-						);
-						this.setPageData({
-							// rowGridSelectData: null,
-							// totalSelectedTags: newTotalSelectedTags,
-							tagList: newTagList,
-						});
-						// let newTotalSelectedTags = this.pageData.totalSelectedTags.replace(this.pageData.rowGridSelectData.tagId+'/*wq2a/', '');
-						// 마지막 row 선택 되도록 하는 로직
-						let newGridData = [];
-						newGridData = this.$refs[this.gridName].getData();
-						if (newGridData.length > 0) {
-							this.getRowData(newGridData[newGridData.length - 1]);
-						}
-						// focus 안됨 나중에 생각
-						// this.$nextTick();
-						// this.setPageData({
-						// 	rowGridSelectData: newGridData[newGridData.length-1],
-						// 	rowGridSelectKey: newGridData[newGridData.length-1].rowKey,
-						// });
-						// console.log('nowGridData', newGridData);
-						// this.$nextTick(() => {
-						// 	// 안됨...
-						// 	if(newGridData.length>=0){
-						// 		this.$refs[this.gridName].focus({
-						// 			rowKey: newGridData.length-1,
-						// 			columnName: 'tagId',
-						// 			setScroll: true,
-						// 		});
-						// console.log('rowGridSelectData', this.pageData.rowGridSelectData);
-						// 	}
-						// });
-					}
-					break;
+            );
+            this.setPageData({
+              // rowGridSelectData: null,
+              // totalSelectedTags: newTotalSelectedTags,
+              tagList: newTagList,
+            });
+            // let newTotalSelectedTags = this.pageData.totalSelectedTags.replace(this.pageData.rowGridSelectData.tagId+'/*wq2a/', '');
+            // 마지막 row 선택 되도록 하는 로직
+            let newGridData = [];
+            newGridData = this.$refs[this.gridName].getData();
+            if (newGridData.length > 0) {
+              this.getRowData(newGridData[newGridData.length - 1]);
+            }
+            // focus 안됨 나중에 생각
+            // this.$nextTick();
+            // this.setPageData({
+            // 	rowGridSelectData: newGridData[newGridData.length-1],
+            // 	rowGridSelectKey: newGridData[newGridData.length-1].rowKey,
+            // });
+            // console.log('nowGridData', newGridData);
+            // this.$nextTick(() => {
+            // 	// 안됨...
+            // 	if(newGridData.length>=0){
+            // 		this.$refs[this.gridName].focus({
+            // 			rowKey: newGridData.length-1,
+            // 			columnName: 'tagId',
+            // 			setScroll: true,
+            // 		});
+            // console.log('rowGridSelectData', this.pageData.rowGridSelectData);
+            // 	}
+            // });
+          }
+          break;
 
-				default:
-					break;
-			}
-		},
-		gridEditingFinish(data) {
-			this.$refs[this.gridName].editingFinish(data);
-		},
-		async getTagData() {
-			let resDataDict = { tags: [] };
-			let rawResDataDict = { tags: [] };
-			let tagList = this.tagList;
-			for (var i = 0; i < tagList.length; i++) {
-				let sendParam = {};
-				let bodyMap = {};
+        default:
+          break;
+      }
+    },
+    gridEditingFinish(data) {
+      this.$refs[this.gridName].editingFinish(data);
+    },
+    async getTagData() {
+      let resDataDict = { tags: [] };
+      let rawResDataDict = { tags: [] };
+      let tagList = this.tagList;
+      for (var i = 0; i < tagList.length; i++) {
+        let sendParam = {};
+        let bodyMap = {};
         let url = "http://58.232.11.31:1567/RTDBweapi/";
-				// rawData인 경우
-				// if(this.useFg){
-				// 	sendParam['url'] = url + 'rawdata.do';
-				// 	bodyMap['interval'] = '1000';
-				// }else{
-				// 	sendParam['url'] = url + 'aggdata2.do';
-				// 	bodyMap['interval'] = '';
-				// 	bodyMap['term'] = 'MIN1';
-				// }
-				// let tempTagList = this.pageData.totalSelectedTags.split('/*wq2a/');
-				// let tagList = tempTagList.filter(item => item != '');
+        // rawData인 경우
+        // if(this.useFg){
+        // 	sendParam['url'] = url + 'rawdata.do';
+        // 	bodyMap['interval'] = '1000';
+        // }else{
+        // 	sendParam['url'] = url + 'aggdata2.do';
+        // 	bodyMap['interval'] = '';
+        // 	bodyMap['term'] = 'MIN1';
+        // }
+        // let tempTagList = this.pageData.totalSelectedTags.split('/*wq2a/');
+        // let tagList = tempTagList.filter(item => item != '');
         sendParam["url"] = url + "aggdata2.do";
         bodyMap["interval"] = "";
         bodyMap["term"] = "MIN1";
-				// let tagList = this.pageData.tagList;
+        // let tagList = this.pageData.tagList;
         bodyMap["tags"] = [tagList[i]];
-				// 데이터 없어서 이걸로 등록 - 시작
-				// bodyMap['tags'] = ["M16A_EQID001_U-CH-012_Pump_ATRD_010001_VAL_003_Y_01호기_냉수_유량_실측값", "SEOSAN_EQID002_U-CH-017_Innter Heater Jacket_ATRD_010003_VAL_059_Y_17호기_증발_냉매_포화_온도#_실측값"]
-				// bodyMap['tags'] = ["SEOSAN_EQID002_U-CH-017_Innter Heater Jacket_ATRD_010003_VAL_059_Y_17호기_증발_냉매_포화_온도#_실측값", "M16A_EQID001_U-CH-014_Chiller_ATRD_010002_VAL_018_Y_08호기_응축_냉매_포화_온도#_실측값", "M16A_EQID001_U-CH-012_Pump_ATRD_010001_VAL_008_Y_01호기_냉각탑_냉각수_공급온도_PV#_실측값"]
-				// 데이터 없어서 이걸로 등록 - 끝
+        // 데이터 없어서 이걸로 등록 - 시작
+        // bodyMap['tags'] = ["M16A_EQID001_U-CH-012_Pump_ATRD_010001_VAL_003_Y_01호기_냉수_유량_실측값", "SEOSAN_EQID002_U-CH-017_Innter Heater Jacket_ATRD_010003_VAL_059_Y_17호기_증발_냉매_포화_온도#_실측값"]
+        // bodyMap['tags'] = ["SEOSAN_EQID002_U-CH-017_Innter Heater Jacket_ATRD_010003_VAL_059_Y_17호기_증발_냉매_포화_온도#_실측값", "M16A_EQID001_U-CH-014_Chiller_ATRD_010002_VAL_018_Y_08호기_응축_냉매_포화_온도#_실측값", "M16A_EQID001_U-CH-012_Pump_ATRD_010001_VAL_008_Y_01호기_냉각탑_냉각수_공급온도_PV#_실측값"]
+        // 데이터 없어서 이걸로 등록 - 끝
         bodyMap["eterm"] =
           Utility.setFormatDate(this.toDt, "YYYY-MM-DD") +
           " " +
           this.pageData.selectTimeValue2.replaceAll(" ", "").slice(0, -1) +
-					1 +
+          1 +
           ":00";
         bodyMap["sterm"] =
           Utility.setFormatDate(this.fromDt, "YYYY-MM-DD") +
@@ -651,301 +629,301 @@ export default {
           ":00";
         let test = this.pageData.selectTimeValue1.replaceAll(" ", "").slice(0, -1) + 1;
         bodyMap["t"] = Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm:ss");
-				// bodyMap['t'] = "2022-07-25 10:00:00";
+        // bodyMap['t'] = "2022-07-25 10:00:00";
         sendParam["bodyMap"] = bodyMap;
-				let res = await this.postApiReturn({
+        let res = await this.postApiReturn({
           apiKey: "selectTagTrndData",
           resKey: "tagTrndDatas",
-					sendParam: sendParam,
-				});
-				if (res != null && res.length > 0) {
-					res = JSON.parse(res);
-					if (res.tags.length > 0) {
+          sendParam: sendParam,
+        });
+        if (res != null && res.length > 0) {
+          res = JSON.parse(res);
+          if (res.tags.length > 0) {
             resDataDict["tags"].push(res.tags[0]);
-					}
-				}
-				let resRawData = [];
-				if (this.useFg) {
-					let newStermDate = Utility.setFormatDate(
+          }
+        }
+        let resRawData = [];
+        if (this.useFg) {
+          let newStermDate = Utility.setFormatDate(
             Utility.setFormatDate(this.fromDt, "YYYY-MM-DD") +
               " " +
               this.pageData.selectTimeValue1.replaceAll(" ", "") +
               ":00",
             "YYYY-MM-DD HH:mm"
-					);
-					newStermDate = new Date(new Date(newStermDate).getTime() - 1000);
-					let sendParam2 = { ...sendParam };
+          );
+          newStermDate = new Date(new Date(newStermDate).getTime() - 1000);
+          let sendParam2 = { ...sendParam };
           sendParam2["url"] = url + "rawdata.do";
           sendParam2["bodyMap"]["interval"] = "1000";
           sendParam2["bodyMap"]["sterm"] = Utility.setFormatDate(
-						newStermDate,
+            newStermDate,
             "YYYY-MM-DD HH:mm:ss"
-					);
+          );
           sendParam2["bodyMap"]["eterm"] =
             Utility.setFormatDate(this.toDt, "YYYY-MM-DD") +
             " " +
             this.pageData.selectTimeValue2.replaceAll(" ", "") +
             ":01";
           delete sendParam2["bodyMap"]["term"];
-					resRawData = await this.postApiReturn({
+          resRawData = await this.postApiReturn({
             apiKey: "selectTagTrndData",
             resKey: "tagTrndDatas",
-						sendParam: sendParam2,
-					});
-					if (resRawData != null && resRawData.length > 0) {
-						resRawData = JSON.parse(resRawData);
-						if (resRawData.tags.length > 0) {
+            sendParam: sendParam2,
+          });
+          if (resRawData != null && resRawData.length > 0) {
+            resRawData = JSON.parse(resRawData);
+            if (resRawData.tags.length > 0) {
               rawResDataDict["tags"].push(resRawData.tags[0]);
-						}
-					}
-				}
-			}
-			if (resDataDict != null && resDataDict.tags.length != 0) {
-				await this.setChart(tagList, resDataDict, rawResDataDict);
-			} else {
-				this.setChartNull();
-			}
-		},
-		async setChart(tagList, data, rawData) {
-			this.loadChart = false;
-			let legendNameMapper = {
+            }
+          }
+        }
+      }
+      if (resDataDict != null && resDataDict.tags.length != 0) {
+        await this.setChart(tagList, resDataDict, rawResDataDict);
+      } else {
+        this.setChartNull();
+      }
+    },
+    async setChart(tagList, data, rawData) {
+      this.loadChart = false;
+      let legendNameMapper = {
         A: "AVG",
         S: "STDDEV",
-				// 'CNT': 'CNT',
-				// 'SUM' : 'SUM',
+        // 'CNT': 'CNT',
+        // 'SUM' : 'SUM',
         M: "MAX",
         N: "MIN",
         v: "RAWDATA",
-			};
-			let chartDataDict = {};
-			for (var i = 0; i < tagList.length; i++) {
-				chartDataDict[tagList[i]] = {
-					xAxisList: [],
-					seriesData: [],
-					legendList: [],
-				};
-			}
+      };
+      let chartDataDict = {};
+      for (var i = 0; i < tagList.length; i++) {
+        chartDataDict[tagList[i]] = {
+          xAxisList: [],
+          seriesData: [],
+          legendList: [],
+        };
+      }
 
-			for (var i = 0; i < tagList.length; i++) {
-				//data chart data 구성하기
-				let dataTagTitle = data.tags[i].tag;
-				let xAxisData1 = []; // data의 x축 data 초기화 꼭 해줄 것
-				let seriesData = [];
-				let seriesDataDict = {};
-				let keys = [];
-				let legendData = [];
+      for (var i = 0; i < tagList.length; i++) {
+        //data chart data 구성하기
+        let dataTagTitle = data.tags[i].tag;
+        let xAxisData1 = []; // data의 x축 data 초기화 꼭 해줄 것
+        let seriesData = [];
+        let seriesDataDict = {};
+        let keys = [];
+        let legendData = [];
         if (data.tags[i] != undefined && data.tags[i]["d"].length > 0) {
           for (var j = 0; j < data.tags[i]["d"].length; j++) {
             xAxisData1.push(data.tags[i]["d"][j].t);
             keys = Object.keys(data.tags[i]["d"][j]);
-						for (var idx in keys) {
-							if (seriesDataDict[keys[idx]] == undefined) {
-								seriesDataDict[keys[idx]] = [];
-							}
-							// 가져오는 모든 데이터 넣기
+            for (var idx in keys) {
+              if (seriesDataDict[keys[idx]] == undefined) {
+                seriesDataDict[keys[idx]] = [];
+              }
+              // 가져오는 모든 데이터 넣기
               seriesDataDict[keys[idx]].push(data.tags[i]["d"][j][keys[idx]]);
-						}
-					}
-				} else {
-					keys = Object.keys(legendNameMapper);
-					for (var idx in keys) {
-						seriesDataDict[keys[idx]] = [];
-					}
-				}
-				for (var idx in keys) {
+            }
+          }
+        } else {
+          keys = Object.keys(legendNameMapper);
+          for (var idx in keys) {
+            seriesDataDict[keys[idx]] = [];
+          }
+        }
+        for (var idx in keys) {
           if (legendNameMapper[keys[idx]] == "SUM") {
-						seriesData.push({
-							name: legendNameMapper[keys[idx]],
+            seriesData.push({
+              name: legendNameMapper[keys[idx]],
               type: "line",
-							data: seriesDataDict[keys[idx]],
-							xAxisIndex: 0,
-							connectNulls: true,
-						});
+              data: seriesDataDict[keys[idx]],
+              xAxisIndex: 0,
+              connectNulls: true,
+            });
             // legendData.push(legendNameMapper[keys[idx]]);
 
             legendData.push({
               name: legendNameMapper[keys[idx]],
               icon: "circle",
             });
-					} else if (legendNameMapper[keys[idx]] != undefined) {
-						seriesData.push({
-							name: legendNameMapper[keys[idx]],
+          } else if (legendNameMapper[keys[idx]] != undefined) {
+            seriesData.push({
+              name: legendNameMapper[keys[idx]],
               type: "line",
-							data: seriesDataDict[keys[idx]],
-							xAxisIndex: 0,
-							connectNulls: true,
-						});
+              data: seriesDataDict[keys[idx]],
+              xAxisIndex: 0,
+              connectNulls: true,
+            });
             // legendData.push(legendNameMapper[keys[idx]]);
 
             legendData.push({
               name: legendNameMapper[keys[idx]],
               icon: "circle",
             });
-					}
-				}
+          }
+        }
 
-				// data xAxisData1 추가
-				// if(rawData.tags.length == 0 || !this.useFg){
+        // data xAxisData1 추가
+        // if(rawData.tags.length == 0 || !this.useFg){
         chartDataDict[dataTagTitle]["xAxisList"].push({
-					data: xAxisData1,
-					axisLabel: { rotate: 40 },
-					// axisLabel: { interval: 0, rotate: 40 },
-					// axisTick : {interval : 1},
-					boundaryGap: false,
-					offset: true,
-					show: !this.useFg,
-				});
-				// }
+          data: xAxisData1,
+          axisLabel: { rotate: 40 },
+          // axisLabel: { interval: 0, rotate: 40 },
+          // axisTick : {interval : 1},
+          boundaryGap: false,
+          offset: true,
+          show: !this.useFg,
+        });
+        // }
 
-				// data SeriesData 추가
+        // data SeriesData 추가
         chartDataDict[dataTagTitle]["seriesData"] = seriesData;
-				// data legend 추가
+        // data legend 추가
         chartDataDict[dataTagTitle]["legendList"] = legendData;
-				//
-				//rawData chart data 구성하기
+        //
+        //rawData chart data 구성하기
         let rawDataTagTitle = "";
-				let xAxisData2 = []; // rawData의 x축 data 초기화 꼭 해줄 것
-				let rawDataSeriesData = [];
-				if (
-					this.useFg == true &&
-					rawData.tags.length > 0 &&
-					rawData.tags[i] != undefined
-				) {
-					rawDataTagTitle = rawData.tags[i].tag;
-					// rawData xAxisData2 추가
+        let xAxisData2 = []; // rawData의 x축 data 초기화 꼭 해줄 것
+        let rawDataSeriesData = [];
+        if (
+          this.useFg == true &&
+          rawData.tags.length > 0 &&
+          rawData.tags[i] != undefined
+        ) {
+          rawDataTagTitle = rawData.tags[i].tag;
+          // rawData xAxisData2 추가
           chartDataDict[rawDataTagTitle]["xAxisList"].push({
-						data: xAxisData2,
-						boundaryGap: false,
+            data: xAxisData2,
+            boundaryGap: false,
             position: "bottom",
-						// axisLabel: { interval: 0, rotate: 40 },
-						axisLabel: { rotate: 40 },
-					});
+            // axisLabel: { interval: 0, rotate: 40 },
+            axisLabel: { rotate: 40 },
+          });
           if (rawData.tags[i]["d"].length > 0) {
             for (var j = 0; j < rawData.tags[i]["d"].length; j++) {
               xAxisData2.push(rawData.tags[i]["d"][j].t);
               if (rawData.tags[i]["d"][j]["v"] != undefined) {
                 rawDataSeriesData.push(rawData.tags[i]["d"][j]["v"]);
-							} else {
-								// null값 처리
-								rawDataSeriesData.push(NaN);
-							}
-						}
-					}
-					// rawData SeriesData 추가
+              } else {
+                // null값 처리
+                rawDataSeriesData.push(NaN);
+              }
+            }
+          }
+          // rawData SeriesData 추가
           chartDataDict[rawDataTagTitle]["seriesData"].push({
             name: legendNameMapper["v"],
             type: "line",
-						data: rawDataSeriesData,
-						xAxisIndex: 1,
-						connectNulls: true,
-					});
-					// rawData legend 추가
+            data: rawDataSeriesData,
+            xAxisIndex: 1,
+            connectNulls: true,
+          });
+          // rawData legend 추가
           chartDataDict[rawDataTagTitle]["legendList"].push(legendNameMapper["v"]);
-				}
-				let option = {
-					legend: {
+        }
+        let option = {
+          legend: {
             top: "top",
             data: chartDataDict[tagList[i]]["legendList"],
             left: "center",
-						textStyle: {
+            textStyle: {
               color: "#95A0A9",
-							fontSize: 10,
-						},
-					},
-					grid: {
+              fontSize: 10,
+            },
+          },
+          grid: {
             left: "5%",
             right: "5%",
-						// bottom: '3%',
-						containLabel: true,
+            // bottom: '3%',
+            containLabel: true,
             top: "5%",
             bottom: "13%",
-					},
-					toolbox: {
-						feature: {
-							saveAsImage: {},
-						},
-					},
-					// xAxis: this.useFg ==true ? chartDataDict[tagList[i]]['xAxisList'][1] : chartDataDict[tagList[i]]['xAxisList'][0],
-					// xAxis: chartDataDict[tagList[i]]['xAxisList'][0],
+          },
+          toolbox: {
+            feature: {
+              saveAsImage: {},
+            },
+          },
+          // xAxis: this.useFg ==true ? chartDataDict[tagList[i]]['xAxisList'][1] : chartDataDict[tagList[i]]['xAxisList'][0],
+          // xAxis: chartDataDict[tagList[i]]['xAxisList'][0],
           xAxis: chartDataDict[tagList[i]]["xAxisList"],
-					dataZoom: [
-						{
-							show: true,
-							realtime: true,
-							start: 0,
-							end:
+          dataZoom: [
+            {
+              show: true,
+              realtime: true,
+              start: 0,
+              end:
                 chartDataDict[tagList[i]]["xAxisList"][1] != undefined
                   ? (30 / chartDataDict[tagList[i]]["xAxisList"][1]["data"].length) * 100
                   : chartDataDict[tagList[i]]["xAxisList"][0]["data"].length > 30
                   ? (30 / chartDataDict[tagList[i]]["xAxisList"][0]["data"].length) * 100
-									: 100,
-						},
-						{
+                  : 100,
+            },
+            {
               type: "inside",
-							realtime: true,
-							start: 65,
-							end: 85,
-						},
-					],
-					// yAxis: [
-					// 	{
-					// 		type: 'value',
-					// 		position: 'left'
-					// 	},
-					// 	{
-					// 		type: 'value',
-					// 		position: 'right'
-					// 	},
-					// ],
-					yAxis: {
+              realtime: true,
+              start: 65,
+              end: 85,
+            },
+          ],
+          // yAxis: [
+          // 	{
+          // 		type: 'value',
+          // 		position: 'left'
+          // 	},
+          // 	{
+          // 		type: 'value',
+          // 		position: 'right'
+          // 	},
+          // ],
+          yAxis: {
             type: "value",
             position: "left",
-					},
+          },
           series: chartDataDict[tagList[i]]["seriesData"],
-				};
-				await this.$nextTick();
+        };
+        await this.$nextTick();
         this.$store.state.pageData[this.myPrgmId][this.chartNameList[i]].series =
           option.series;
-				this.$store.state.pageData[this.myPrgmId][this.chartNameList[i]].xAxis =
-					option.xAxis;
+        this.$store.state.pageData[this.myPrgmId][this.chartNameList[i]].xAxis =
+          option.xAxis;
         this.$store.state.pageData[this.myPrgmId][this.chartNameList[i]].dataZoom =
           option.dataZoom;
         this.$store.state.pageData[this.myPrgmId][this.chartNameList[i]].legend =
           option.legend;
-				// this.setChartOption({chartKey : this.chartNameList[i], value: option});
-				// this.setChartDetailXAxisData({
-				// 	chartKey: this.chartNameList[i],
-				// 	value: chartDataDict[tagList[i]]['xAxisList']
-				// })
-			}
-			this.loadChart = true;
-		},
-		async setChartNull() {
-			this.loadChart = false;
-			// 차트 series data 초기화
-			this.$store.state.pageData[this.myPrgmId].chart01.series = [];
-			this.$store.state.pageData[this.myPrgmId].chart02.series = [];
-			this.$store.state.pageData[this.myPrgmId].chart03.series = [];
-			this.$store.state.pageData[this.myPrgmId].chart04.series = [];
-			this.$store.state.pageData[this.myPrgmId].chart05.series = [];
-			// 차트 xAxis data 초기화
-			let xAxisDefault = {
-				data: [],
-				axisLabel: { interval: 0, rotate: 30 },
-			};
-			this.$store.state.pageData[this.myPrgmId].chart01.xAxis = xAxisDefault;
-			this.$store.state.pageData[this.myPrgmId].chart02.xAxis = xAxisDefault;
-			this.$store.state.pageData[this.myPrgmId].chart03.xAxis = xAxisDefault;
-			this.$store.state.pageData[this.myPrgmId].chart04.xAxis = xAxisDefault;
-			this.$store.state.pageData[this.myPrgmId].chart05.xAxis = xAxisDefault;
-			// 차트 legend data 초기화
-			this.$store.state.pageData[this.myPrgmId].chart01.legend.data = [];
-			this.$store.state.pageData[this.myPrgmId].chart02.legend.data = [];
-			this.$store.state.pageData[this.myPrgmId].chart03.legend.data = [];
-			this.$store.state.pageData[this.myPrgmId].chart04.legend.data = [];
-			this.$store.state.pageData[this.myPrgmId].chart05.legend.data = [];
-			this.loadChart = true;
-		},
+        // this.setChartOption({chartKey : this.chartNameList[i], value: option});
+        // this.setChartDetailXAxisData({
+        // 	chartKey: this.chartNameList[i],
+        // 	value: chartDataDict[tagList[i]]['xAxisList']
+        // })
+      }
+      this.loadChart = true;
+    },
+    async setChartNull() {
+      this.loadChart = false;
+      // 차트 series data 초기화
+      this.$store.state.pageData[this.myPrgmId].chart01.series = [];
+      this.$store.state.pageData[this.myPrgmId].chart02.series = [];
+      this.$store.state.pageData[this.myPrgmId].chart03.series = [];
+      this.$store.state.pageData[this.myPrgmId].chart04.series = [];
+      this.$store.state.pageData[this.myPrgmId].chart05.series = [];
+      // 차트 xAxis data 초기화
+      let xAxisDefault = {
+        data: [],
+        axisLabel: { interval: 0, rotate: 30 },
+      };
+      this.$store.state.pageData[this.myPrgmId].chart01.xAxis = xAxisDefault;
+      this.$store.state.pageData[this.myPrgmId].chart02.xAxis = xAxisDefault;
+      this.$store.state.pageData[this.myPrgmId].chart03.xAxis = xAxisDefault;
+      this.$store.state.pageData[this.myPrgmId].chart04.xAxis = xAxisDefault;
+      this.$store.state.pageData[this.myPrgmId].chart05.xAxis = xAxisDefault;
+      // 차트 legend data 초기화
+      this.$store.state.pageData[this.myPrgmId].chart01.legend.data = [];
+      this.$store.state.pageData[this.myPrgmId].chart02.legend.data = [];
+      this.$store.state.pageData[this.myPrgmId].chart03.legend.data = [];
+      this.$store.state.pageData[this.myPrgmId].chart04.legend.data = [];
+      this.$store.state.pageData[this.myPrgmId].chart05.legend.data = [];
+      this.loadChart = true;
+    },
     async setChartNull2() {
       this.loadChart = false;
       let option = {
@@ -1074,52 +1052,52 @@ export default {
       }
       this.loadChart = true;
     },
-		closePopEvent() {
-			// tag를 추가안하고 popup만 열고 닫을 경우 add한 Row를 삭제
-			let gridData = this.$refs[this.gridName].getData();
-			if (gridData.length == 0) {
+    closePopEvent() {
+      // tag를 추가안하고 popup만 열고 닫을 경우 add한 Row를 삭제
+      let gridData = this.$refs[this.gridName].getData();
+      if (gridData.length == 0) {
         this.$refs[this.gridName].removeRow("immediately", 0);
-			} else if (
-				gridData[gridData.length - 1].tagId == undefined ||
-				gridData[gridData.length - 1].tagId == null
-			) {
-				this.$refs[this.gridName].removeRow(
+      } else if (
+        gridData[gridData.length - 1].tagId == undefined ||
+        gridData[gridData.length - 1].tagId == null
+      ) {
+        this.$refs[this.gridName].removeRow(
           "immediately",
           gridData[gridData.length - 1].rowKey
-				);
-			}
-		},
-		downloadExcelFile() {
-			if (this.tagList.length > 0) {
+        );
+      }
+    },
+    downloadExcelFile() {
+      if (this.tagList.length > 0) {
         this.makeExcelFile(this.chartNameList, this.tagList, "데이터_TREND.xlsx");
-			}
-		},
-		makeExcelFile(chartNameList, tagNameList, fileName) {
-			var workBook = XLSX.utils.book_new();
-			for (var i = 0; i < tagNameList.length; i++) {
-				let xlsData = this.makeExcelData(chartNameList[i], tagNameList[i]);
-				let num = i + 1;
+      }
+    },
+    makeExcelFile(chartNameList, tagNameList, fileName) {
+      var workBook = XLSX.utils.book_new();
+      for (var i = 0; i < tagNameList.length; i++) {
+        let xlsData = this.makeExcelData(chartNameList[i], tagNameList[i]);
+        let num = i + 1;
         let sheetName = "sheet" + num;
-				// let sheetName = tagNameList[i];
-				var excelData = XLSX.utils.json_to_sheet(xlsData);
-				XLSX.utils.book_append_sheet(workBook, excelData, sheetName);
-			}
-			// 	var xlsData = this.makeExcelData(chartName);
-			XLSX.writeFile(workBook, fileName);
-		},
-		makeExcelData(chartName, tagName) {
-			let xlsData = null;
-			var xlsHeader = [
+        // let sheetName = tagNameList[i];
+        var excelData = XLSX.utils.json_to_sheet(xlsData);
+        XLSX.utils.book_append_sheet(workBook, excelData, sheetName);
+      }
+      // 	var xlsData = this.makeExcelData(chartName);
+      XLSX.writeFile(workBook, fileName);
+    },
+    makeExcelData(chartName, tagName) {
+      let xlsData = null;
+      var xlsHeader = [
         { header: "TAG ID", name: "tagId" },
         { header: "시간", name: "dttm" },
-			];
+      ];
       this.$store.state.pageData[myPrgmId][chartName]["legend"]["data"].map((item) => {
-					xlsHeader.push({
-						header: item,
-						name: item,
-					});
+        xlsHeader.push({
+          header: item,
+          name: item,
+        });
       });
-			let xData =
+      let xData =
         this.$store.state.pageData[myPrgmId][chartName]["xAxis"][1] != undefined
           ? this.$store.state.pageData[myPrgmId][chartName]["xAxis"][1]["data"]
           : this.$store.state.pageData[myPrgmId][chartName]["xAxis"][0]["data"];
@@ -1128,111 +1106,111 @@ export default {
       ];
       let chartData = this.$store.state.pageData[myPrgmId][chartName]["series"];
       chartData = [{ name: "dttm", data: xData }, ...chartData];
-			let chartDataDict = {};
+      let chartDataDict = {};
       chartData.map((item) => {
-				chartDataDict[item.name] = item.data;
-			});
-			let finalChartData = [];
-			let minDataXDataIdx = 0;
-			for (var i = 0; i < xData.length; i++) {
-				let dict = {};
-				if (
-					minDataXData[minDataXDataIdx + 1] != undefined &&
-					(xData[i] >= minDataXData[minDataXDataIdx + 1] ||
-						xData[i] == minDataXData[minDataXDataIdx + 1])
-				) {
-					minDataXDataIdx += 1;
-				}
-				for (var key of Object.keys(chartDataDict)) {
+        chartDataDict[item.name] = item.data;
+      });
+      let finalChartData = [];
+      let minDataXDataIdx = 0;
+      for (var i = 0; i < xData.length; i++) {
+        let dict = {};
+        if (
+          minDataXData[minDataXDataIdx + 1] != undefined &&
+          (xData[i] >= minDataXData[minDataXDataIdx + 1] ||
+            xData[i] == minDataXData[minDataXDataIdx + 1])
+        ) {
+          minDataXDataIdx += 1;
+        }
+        for (var key of Object.keys(chartDataDict)) {
           dict["tagId"] = tagName;
           if (key == "RAWDATA") {
-						dict[key] = chartDataDict[key][i];
+            dict[key] = chartDataDict[key][i];
           } else if (key == "dttm") {
-						dict[key] = chartDataDict[key][i];
-					} else {
-						dict[key] = chartDataDict[key][minDataXDataIdx];
-					}
-				}
+            dict[key] = chartDataDict[key][i];
+          } else {
+            dict[key] = chartDataDict[key][minDataXDataIdx];
+          }
+        }
 
-				// if(i==0 && xData[i] == minDataXData[minDataXDataIdx]){
-				// 	minDataXDataIdx = 0;
-				// }
-				// else if(xData[i] == minDataXData[minDataXDataIdx]){
-				// 	minDataXDataIdx += 1;
-				// }
-				finalChartData.push(dict);
-			}
-			var tmpData = [];
-			var tmpMap = {};
+        // if(i==0 && xData[i] == minDataXData[minDataXDataIdx]){
+        // 	minDataXDataIdx = 0;
+        // }
+        // else if(xData[i] == minDataXData[minDataXDataIdx]){
+        // 	minDataXDataIdx += 1;
+        // }
+        finalChartData.push(dict);
+      }
+      var tmpData = [];
+      var tmpMap = {};
 
       finalChartData.map((item) => {
         xlsHeader.map((v) => {
-					// return Object.assign(tmpMap, { [v.header]: item[v.name] || 0 });
-					var value = item[v.name];
-					if (value == undefined) {
-						value = 0;
-					}
+          // return Object.assign(tmpMap, { [v.header]: item[v.name] || 0 });
+          var value = item[v.name];
+          if (value == undefined) {
+            value = 0;
+          }
           if (typeof value === "number") {
             value = parseFloat(Utility.setFormatIntDecimal(value, 2).replace(",", ""));
-					}
-					return Object.assign(tmpMap, { [v.header]: value || 0.0 });
-				});
-				tmpData = tmpData.concat(tmpMap);
-				tmpMap = {};
-			});
-			xlsData = tmpData;
+          }
+          return Object.assign(tmpMap, { [v.header]: value || 0.0 });
+        });
+        tmpData = tmpData.concat(tmpMap);
+        tmpMap = {};
+      });
+      xlsData = tmpData;
 
-			return xlsData;
-		},
-	},
+      return xlsData;
+    },
+  },
 };
 var dt1 = new Date();
 var dt2 = new Date(dt1.setMonth(dt1.getMonth() - 1));
 const defaultData = {
-	isFind: false,
-	/* 검색옵션 */
+  isFind: false,
+  /* 검색옵션 */
   cmCycle: "CYC_DAY", // 주기
-	defaultRange: {
-		CYC_DAY: 30,
-	},
+  defaultRange: {
+    CYC_DAY: 30,
+  },
   fromDt: Utility.setFormatDate(dt2, "YYYYMMDD"),
   toDt: Utility.setFormatDate(new Date(), "YYYYMMDD"),
   selectTimeValue1: "00 : 00",
   selectTimeValue2: "00 : 00",
-	useFg: false,
-	chkEqualDayHourFg: true,
-	// 선택된 GRID 데이터
-	rowGridSelectKey: 0,
-	rowGridSelectData: null,
-	/* Griddata 세팅 */
-	rowGrid: {
-		data: [],
-		column: [],
-		option: {},
-		defaultRow: {
-			eqpmGrpNm: null,
-			eqpmGrpId: null,
-			eqpmId: null,
-			eqpmNm: null,
-			tagId: null,
-			tagNm: null,
-			rowStat: null,
-		},
-		buttonAuth: {
-			add: true,
-			remove: true,
-			save: false,
-			excel: false,
-		},
-	},
-	tagTrndPopModalData: {},
-	// totalSelectedTags: '',
-	tagList: [],
-	chart01: Utility.defaultChartOption(true),
-	chart02: Utility.defaultChartOption(true),
-	chart03: Utility.defaultChartOption(true),
-	chart04: Utility.defaultChartOption(true),
-	chart05: Utility.defaultChartOption(true),
+  useFg: false,
+  chkEqualDayHourFg: true,
+  // 선택된 GRID 데이터
+  rowGridSelectKey: 0,
+  rowGridSelectData: null,
+  /* Griddata 세팅 */
+  rowGrid: {
+    data: [],
+    column: [],
+    option: {},
+    defaultRow: {
+      eqpmGrpNm: null,
+      eqpmGrpId: null,
+      eqpmId: null,
+      eqpmNm: null,
+      tagId: null,
+      tagNm: null,
+      rowStat: null,
+    },
+    buttonAuth: {
+      add: true,
+      remove: true,
+      save: false,
+      excel: false,
+    },
+  },
+  tagTrndPopModalData: {},
+  // totalSelectedTags: '',
+  tagList: [],
+  chart01: Utility.defaultChartOption(true),
+  chart02: Utility.defaultChartOption(true),
+  chart03: Utility.defaultChartOption(true),
+  chart04: Utility.defaultChartOption(true),
+  chart05: Utility.defaultChartOption(true),
 };
 </script>
 <style lang="scss" scoped>
@@ -1245,48 +1223,48 @@ const defaultData = {
 }
 
 @each $theme in dark, light {
-	.v-application.#{$theme}-mode {
-		.tagTrndGrid {
-			.tui-grid {
-				&-cell {
-					&.row-insert {
-						background-color: #242940;
-					}
-					&.row-modify {
-						background-color: map-deep-get(
-							$config,
-							#{$theme},
+  .v-application.#{$theme}-mode {
+    .tagTrndGrid {
+      .tui-grid {
+        &-cell {
+          &.row-insert {
+            background-color: #242940;
+          }
+          &.row-modify {
+            background-color: map-deep-get(
+              $config,
+              #{$theme},
               "tui-grid-cell-modify-color"
-						);
-					}
-					&.row-removed {
-						background-color: map-deep-get(
-							$config,
-							#{$theme},
+            );
+          }
+          &.row-removed {
+            background-color: map-deep-get(
+              $config,
+              #{$theme},
               "tui-grid-cell-removed-color"
-						);
-					}
-					&.row-disabled {
+            );
+          }
+          &.row-disabled {
             color: map-deep-get($config, #{$theme}, "tui-grid-cell-disabled-color");
 
-						.tui-grid-cell-content {
+            .tui-grid-cell-content {
               color: map-deep-get($config, #{$theme}, "tui-grid-cell-disabled-color");
-						}
-					}
-					&.row-selected {
-						background-color: map-deep-get(
-							$config,
-							#{$theme},
+            }
+          }
+          &.row-selected {
+            background-color: map-deep-get(
+              $config,
+              #{$theme},
               "tui-grid-cell-selected-color"
-						);
+            );
 
-						.tui-grid-cell-content {
+            .tui-grid-cell-content {
               color: map-deep-get($config, #{$theme}, "activate");
-						}
-					}
-				}
-			}
-		}
-	}
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>