updatecode

Reviewed-on: #79

assets/scss/common.scss

@@ -231,12 +231,18 @@ a {
   .v-application.#{$theme}-mode {
     min-width: 1000px;
 
-    .ant-checkbox-wrapper.ant-checkbox-wrapper-disabled,
+    .ant-checkbox-wrapper.ant-checkbox-wraBapper-disabled,
     .ant-checkbox-disabled .ant-checkbox-input
     {
       cursor: default !important;
     }
 
+    .ant-checkbox-disabled .ant-checkbox-inner
+    {
+      background-color: map-deep-get($config, #{$theme}, "ant-checkbox-disabled-bg") !important;
+      border: map-deep-get($config, #{$theme}, "ant-checkbox-disabled-border") !important;
+    }
+
     .v-list-item__title {
       font-family: var(--desktop-normal-font-family, "Inter-Regular", sans-serif) !important;
     }

assets/scss/common/grid.scss

@@ -89,14 +89,100 @@
   }
 
   .tui-grid-cell {
-    &:last-child {
+    input[type=checkbox] {
-      input[type=checkbox] {
+      margin-top: 8px;
-        margin-top: 8px;
+      appearance: none;
+      -webkit-appearance: none;
+      width: 16px;
+      height: 16px;
+      border: 1px solid;
+      border-radius: 2px;
+      cursor: pointer;
+      position: relative;
+
+      &:checked {
+        &::after {
+          content: "";
+          position: absolute;
+          left: 5px;
+          top: 1px;
+          width: 5px;
+          height: 9px;
+          border: solid;
+          border-width: 0 2px 2px 0;
+          transform: rotate(45deg);
+        }
       }
     }
   }
 }
 
+.tui-grid-layer-editing {
+  input[type=checkbox] {
+    margin-top: 8px;
+    appearance: none;
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1px solid;
+    border-radius: 2px;
+    cursor: pointer;
+    position: relative;
+
+    &:checked {
+      &::after {
+        content: "";
+        position: absolute;
+        left: 5px;
+        top: 1px;
+        width: 5px;
+        height: 9px;
+        border: solid;
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+      }
+    }
+  }
+}
+
+.tui-grid-editor-select-box-layer {
+  min-width: 116px !important;
+
+  .tui-select-box-input {
+    border-radius: 6px;
+  }
+
+  .tui-select-box-dropdown {
+    margin-top: 1px;
+    border-radius: 4px;
+    padding: 4px;
+    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+
+    .tui-select-box-item {
+      margin-bottom: 4px;
+      position: relative;
+
+      &:before {
+        bottom: 0;
+        content: '';
+        left: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: 0
+      }
+
+      &:hover {
+        &::before {
+          opacity: 0.04
+        }
+      }
+
+    }
+  }
+}
+
 .treeGrid {
   .tui-grid {
     &-header-area {
@@ -118,6 +204,44 @@
   @include theme($theme);
 
   .v-application.#{$theme}-mode {
+    .enrg-effc {
+      .tui-grid-rside-area {
+        .tui-grid-table {
+          tr {
+
+            td:nth-child(4),
+            td:nth-child(10) {
+              .tui-grid-cell-content {
+                color: map-deep-get($config,
+                  #{$theme},
+                  "router-tab-item-active-color"
+                );
+              }
+            }
+          }
+
+          .tui-grid {
+
+            &-row-odd,
+            &-row-even {
+              &:hover {
+
+                >td:nth-child(4),
+                td:nth-child(10) {
+                  .tui-grid-cell-content {
+                    color: map-deep-get($config,
+                      #{$theme},
+                      "router-tab-item-active-color"
+                    );
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
     .tui-grid-content-area {
       .tui-grid-header-area {
         height: auto !important;
@@ -161,6 +285,35 @@
             #{$theme},
             "tui-grid-cell-borderStyle-darkmode"
           );
+
+          input[type=checkbox] {
+            border-color: map-deep-get($config,
+              #{$theme},
+              "ant-checkbox-border"
+            );
+            background: map-deep-get($config,
+              #{$theme},
+              "ant-checkbox-bg"
+            );
+
+            &:checked {
+              background-color: map-deep-get($config,
+                #{$theme},
+                "ant-btn-primary-bg"
+              );
+              border-color: map-deep-get($config,
+                #{$theme},
+                "ant-btn-primary-bg"
+              );
+
+              &::after {
+                border-color: map-deep-get($config,
+                  #{$theme},
+                  "ant-checkbox-bg"
+                );
+              }
+            }
+          }
         }
       }
 
@@ -367,6 +520,15 @@
             //   "tui-grid-cell-insert-color"
             // );
           }
+
+          span {
+            &.custom-link {
+              color: map-deep-get($config,
+                #{$theme},
+                "router-tab-item-active-color"
+              );
+            }
+          }
         }
       }
 
@@ -602,6 +764,173 @@
       &-frozen-border {
         background-color: transparent;
       }
+
+      &-layer-editing {
+        input[type=checkbox] {
+          border-color: map-deep-get($config,
+            #{$theme},
+            "ant-checkbox-border"
+          );
+          background: map-deep-get($config,
+            #{$theme},
+            "ant-checkbox-bg"
+          );
+
+          &:checked {
+            background-color: map-deep-get($config,
+              #{$theme},
+              "ant-btn-primary-bg"
+            );
+            border-color: map-deep-get($config,
+              #{$theme},
+              "ant-btn-primary-bg"
+            );
+
+            &::after {
+              border-color: map-deep-get($config,
+                #{$theme},
+                "ant-checkbox-bg"
+              );
+            }
+          }
+        }
+
+        select {
+          &.selectbox {
+            background: map-deep-get($config,
+              #{$theme},
+              "tui-grid-cell-backgroundColor"
+            );
+            border-color:map-deep-get($config,
+              #{$theme},
+              "v-input-fieldset-color"
+            );
+            color: map-deep-get($config,
+              #{$theme},
+              "tui-grid-cell-color"
+            );
+
+            .calendarOption {
+              background: map-deep-get($config,
+                #{$theme},
+                "tui-grid-cell-backgroundColor"
+              );
+              border-color:map-deep-get($config,
+                #{$theme},
+                "v-input-fieldset-color"
+              );
+              color: map-deep-get($config,
+                #{$theme},
+                "tui-grid-cell-color"
+              );
+
+              &:hover {
+                background: #d9d9d9;
+                color: map-deep-get($config,
+                  #{$theme},
+                  "tui-grid-cell-color"
+                );
+              }
+
+              &:checked {
+                background: #E6F4FF;
+                color: map-deep-get($config,
+                  #{$theme},
+                  "tui-grid-cell-color"
+                );
+              }
+            }
+          }
+        }
+
+      }
+    }
+
+    .tui-grid-editor-select-box-layer {
+
+      .tui-select-box-input {
+        background: map-deep-get($config,
+          #{$theme},
+          "tui-grid-cell-backgroundColor"
+        );
+        border-color:map-deep-get($config,
+          #{$theme},
+          "v-input-fieldset-color"
+        );
+        color: map-deep-get($config,
+          #{$theme},
+          "tui-grid-cell-color"
+        );
+
+      }
+
+      .tui-select-box-dropdown {
+        background-color: map-deep-get($config,
+          #{$theme},
+          "tui-datepicker-backgroundColor"
+        );
+        border: 1px solid map-deep-get($config, #{$theme}, "tui-datepicker-border-color");
+        color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
+
+        .tui-select-box-item {
+
+          color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
+
+          &:before {
+            opacity: map-deep-get($config,
+              #{$theme},
+              "selected-bg-opacity"
+            );
+          }
+        }
+
+
+        .tui-select-box-highlight {
+          background:none !important;
+          &:before {
+            background: map-deep-get($config,
+              #{$theme},
+              "tui-grid-cell-color"
+            );
+            opacity: map-deep-get($config,
+              #{$theme},
+              "highlighted-bg-opacity"
+            );
+          }
+
+        }
+
+        .tui-select-box-selected {
+          background: map-deep-get($config,
+            #{$theme},
+            "v-treeview-node-label-active-bg"
+          );
+          color: map-deep-get($config,
+            #{$theme},
+            "tui-grid-cell-color"
+          );
+
+          &:before {
+            // opacity: map-deep-get($config,
+            //   #{$theme},
+            //   "selected-bg-opacity"
+            // );
+            background: map-deep-get($config,
+              #{$theme},
+              "ant-btn-primary-bg"
+            ) !important;
+
+
+            opacity: map-deep-get($config,
+              #{$theme},
+              "selected-bg-opacity"
+            ) !important;
+
+          }
+
+        }
+
+      }
     }
 
     [class*="tui-grid-tree-wrapper"] {

assets/scss/common/pagination.scss

@@ -10,13 +10,25 @@
       margin-top: 10px;
     }
 
+    .ant-pagination-disabled {
+      color: map-deep-get($config, #{$theme}, "paging-disable") !important;;
+      cursor: not-allowed !important;
+      pointer-events: none; /* disables hover and click */
+      background-color: transparent;
+    }
+
+    .ant-pagination-disabled:hover {
+      color: map-deep-get($config, #{$theme}, "paging-disable") !important;;
+      background-color: transparent !important;
+    }
+
     .ant-pagination-item,
     .ant-pagination-prev,
     .ant-pagination-next {
       // border: none !important;
       // box-shadow: none !important;
       background-color: map-deep-get($config, #{$theme}, "paging-background") !important;
-      color: map-deep-get($config, #{$theme}, "paging-text") !important;
+      color: map-deep-get($config, #{$theme}, "paging-text");
       border: none;
 
       .ant-pagination-item-link {

assets/scss/var.scss

@@ -184,7 +184,12 @@ $config: (
     ant-btn-popup-border: #424242,
     paging-background: #212224,
     paging-text: #FFFFFFD9,
+    paging-disable: #FFFFFF40,
     icon-datepicker-color: #FFFFFF73,
+    selected-bg-opacity: 0.32,
+    highlighted-bg-opacity: 0.08,
+    ant-checkbox-disabled-bg: #FFFFFF14,
+    ant-checkbox-disabled-border: #424242,
   ),
   light: (w-g5: $--color-gray_555,
     g5-w: $--color-white,
@@ -332,6 +337,11 @@ $config: (
     ant-btn-popup-border: #D9D9D9,
     paging-background: #FFFFFF,
     paging-text: #000000E0,
+    paging-disable: #00000040,
     icon-datepicker-color: #00000073,
+    selected-bg-opacity: 0.16,
+    highlighted-bg-opacity: 0.04,
+    ant-checkbox-disabled-bg: #0000000A,
+    ant-checkbox-disabled-border: #D9D9D9,
   ),
 );

components/common/Grid.vue

@@ -160,7 +160,6 @@ export default {
 	},
 	created() { },
 	async mounted() {
-		// console.log(this.dataPath);
 		if (this.gridName) {
 			this.gridInstance = this.$refs['tuigrid' + this.gridName];
 
@@ -272,12 +271,9 @@ export default {
 			});
 		},
 		focusChangeEvt(e) {
-			// console.log('focusChangeEvt1...')
 			if (this.preventFocusChangeEvent(e)) {
-				// console.log('prevent focusChangeEvt')
 				return;
 			}
-			// console.log('focusChangeEvt2...')
 			// cell 선택시 row 선택 method
 			if (e.rowKey > -1) {
 				this.$emit(
@@ -292,7 +288,6 @@ export default {
 			this.sendSelectedRowData(e.rowKey);
 		},
 		startEditing(e) {
-			// console.log('startEditing1...')
 			if (this.preventFocusChangeEvent(e)) {
 				return;
 			}
@@ -302,7 +297,6 @@ export default {
 				return;
 			}
 
-			// console.log('startEditing2...')
 			if (this.editorGrid && e.rowKey >= 0) {
 				this.editorStartKey = e.rowKey;
 				this.gridInstance.invoke('startEditing', e.rowKey, e.columnName, 'row-modify');
@@ -316,7 +310,6 @@ export default {
 			}
 		},
 		async editingFinish(e) {
-			// console.log("Editing END E::", e);
 			// editor 간 이동시 수정되는 문제 수정
 			// e.rowEditingFg: grid의 한 row를 한번에 수정할 시 각각의 cell 마다 click 이벤트가 발생하지 않아 this.editorStartKey값이 제대로 입력 되지 않는 경우를 대비하여 만든 Fg
 			if (this.editorGrid) {
@@ -339,7 +332,6 @@ export default {
 				rowKey: rowIdxKey,
 			};
 			const isBaseRow = this.isBaseDataRow(rowIdxKey);
-			// console.log("END E::", rowIdxKey, e);
 			const rowStat = this.gridInstance.invoke('getRow', rowIdxKey).rowStat;
 			if (rowStat == 'D') {
 				this.gridInstance.invoke(
@@ -520,10 +512,7 @@ export default {
 				return item.rowKey == data.rowKey;
 			});
 			let count = 0;
-			// console.log("dataKeyArr", dataKeyArr);
-			// console.log("selectedRowData", selectedRowData);
 			for (let i = 0; i < dataKeyArr.length; i++) {
-				// console.log(dataKeyArr[i], selectedRowData[dataKeyArr[i]], rowData[dataKeyArr[i]]);
 				if (selectedRowData[dataKeyArr[i]] == rowData[dataKeyArr[i]]) {
 					count++;
 				}
@@ -593,7 +582,6 @@ export default {
 					delete item.rowKey;
 					return item;
 				});
-			// console.log("dataArr::", dataArr, saveTargetRows);
 			return dataArr;
 		},
 		getData() {
@@ -606,7 +594,6 @@ export default {
 			return this.gridInstance.invoke('getCheckedRowKeys');
 		},
 		setCheck(list) {
-			// console.log("setCheck:: ", list);
 			list.map(item => this.gridInstance.invoke('check', item));
 		},
 		refreshLayout() {
@@ -616,14 +603,11 @@ export default {
 			// this.gridInstance.invoke('refreshLayout');
 		},
 		refreshGrid() {
-			// console.log("refreshLayout",this.$refs['tuigrid' + this.gridName])
 			var store = this.$refs['tuigrid' + this.gridName].gridInstance.store;
 			var containerEl = this.$refs['tuigrid' + this.gridName].$el;
 			// var containerEl = document.querySelector('.tui-grid-container')
 			var parentEl = containerEl.parentElement;
 
-			// console.log("---------DEBUG---containerEl: ",containerEl);
-			// console.log('---------DEBUG---parentEl: ', parentEl)
 			// 	function refreshLayout(store, containerEl, parentEl) {
 			var dimension = store.dimension;
 			var autoWidth = dimension.autoWidth, fitToParentHeight = dimension.fitToParentHeight;
@@ -636,11 +620,6 @@ export default {
 			this.setWidth(store, clientWidth, autoWidth);
 			// store.dimension.autoWidth = autoWidth;
 			// store.dimension.width = clientWidth;
-			// console.log("###",getComputedStyle(parentEl));
-			// console.log("fitToParentHeight : ",fitToParentHeight);
-			// console.log("parentEl : ",parentEl)
-			// console.log("parentEl.clientHeight" , parentEl.clientHeight)
-			// console.log("clientHeight : ",clientHeight);
 			if (parentEl && parentEl.clientHeight !== clientHeight) {
 				var _b = getComputedStyle(parentEl), paddingTop = _b.paddingTop, paddingBottom = _b.paddingBottom;
 				this.setHeight(store, parentEl.clientHeight - (parseFloat(paddingTop) + parseFloat(paddingBottom)));
@@ -648,25 +627,20 @@ export default {
 			// }
 		},
 		setOffsetTop(store, offsetTop) {
-			// console.log("---------DEBUG---setOffsetTop: ");
 			store.dimension.offsetTop = offsetTop;
 		},
 		setWidth(_a, width, autoWidth) {
-			// console.log("---------DEBUG---setWidth: ");
 			var dimension = _a.dimension;
 			dimension.autoWidth = autoWidth;
 			dimension.width = width;
 		},
 		setHeaderHeight(store, height) {
-			// console.log("---------DEBUG---setHeaderHeight: ");
 			store.dimension.headerHeight = height;
 		},
 		setOffsetLeft(store, offsetLeft) {
-			// console.log("---------DEBUG---setOffsetLeft: ");
 			store.dimension.offsetLeft = offsetLeft;
 		},
 		setHeight(_a, height) {
-			// console.log("---------DEBUG---setHeight: ");
 			var dimension = _a.dimension;
 			var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth;
 			dimension.bodyHeight = height - headerHeight - summaryHeight - tableBorderWidth;
@@ -695,7 +669,6 @@ export default {
 			});
 		},
 		// resetData() {
-		//   // console.log("resetData = ", this.tuigridProps.data);
 		//   this.$refs.tuigrid.invoke("resetData", this.tuigridProps.data);
 		// },
 	},

components/common/ThemeSwitch.vue

@@ -13,6 +13,7 @@ export default {
 	data() {
 		return {
 			mode: null,
+			// isLoading: false
 		};
 	},
 	computed: {
@@ -28,11 +29,10 @@ export default {
 			setThemeChange: 'setThemeChange',
 		}),
 		themeChange() {
+			// this.isLoading = true;
 			this.mode = !this.mode;
 			this.$vuetify.theme.isDark = this.mode;
 			this.setThemeChange(this.mode);
-			// console.log(this.mode)
-			// console.log(this.$vuetify.theme.isDark)
 		},
 	},
 };

components/common/modal/EvtObjPop.vue

@@ -8,12 +8,22 @@
 			</label>
 		</v-col>
 		<v-col :cols="option.textCols" class="py-0">
-			<v-text-field readonly append-icon="" :class="['v-select__custom', customClass]" outlined :hide-details="true"
+			<v-text-field
-				v-model="selectValue" @keyup.enter="typeEnterKey" @click="dialogOpenCloseEvent(dialog)" style="padding: 0;"
+				readonly
-				:required="item.required || false"><template v-slot:append>
+				v-model="selectValue"
-					<!-- Custom SVG icon -->
+				append-icon="mdi-magnify"
-					<v-icon>$icoSearch</v-icon>
+				:class="['v-select__custom', customClass]"
-				</template></v-text-field>
+				@click="dialogOpenCloseEvent(dialog)"
+				outlined
+				:hide-details="true"
+				:required="item.required || false"
+				:disabled="item.disabled || false"
+			>
+			<template v-slot:append>
+				<!-- Custom SVG icon -->
+				<v-icon>$icoSearch</v-icon>
+			</template>
+			</v-text-field>
 		</v-col>
 
 		<v-dialog v-model="dialog" scrollable width="1000px">

components/pages/ems/DataSetInfo/DataSetTagRelTab.vue

@@ -68,18 +68,6 @@ export default {
       loadGrid: false,
       gridName: 'rowDataSetTagRelGrid',
       detailDataSetTagList: myDataSetTagDetail,
-      dataPathMock: {
-        "rowDataSetTagRelGrid": {
-          column: [
-            { header: 'TAG ID', name: 'id', headerAlign: 'left' },
-            { header: 'TAG 명', name: 'name', headerAlign: 'left' },
-            { header: '모델 Data 구분', name: 'type', headerAlign: 'left' }
-          ],
-          data: dataPathDataExample,
-          defaultRow: dataPathDataExample,
-          option: {}
-        }
-      },
     };
   },
   computed: {

components/pages/ems/EccInfo/EccIaoTab.vue

@@ -270,12 +270,14 @@ export default {
 		async getRowData(data, gridName) {
 			if (data.rowStat === 'I') {
 				this.detailList[0].disabled = false;
+				this.detailList[1].disabled = false;
 				this.detailList[2].disabled = false;
 				this.detailList[3].disabled = false;
 				this.detailList[4].disabled = false;
 				this.detailList[5].disabled = false;
 			} else {
 				this.detailList[0].disabled = true;
+				this.detailList[1].disabled = true;
 				this.detailList[2].disabled = true;
 				this.detailList[3].disabled = true;
 				this.detailList[4].disabled = true;
@@ -294,6 +296,7 @@ export default {
 				case 'add':
 					this.$refs[this.gridName].addRow();
 					this.detailList[0].disabled = false;
+					this.detailList[1].disabled = false;
 					this.detailList[2].disabled = false;
 					this.detailList[3].disabled = false;
 					this.detailList[4].disabled = false;
@@ -376,7 +379,6 @@ const myDetail = [
 	{
 		type: 'SelectBox',
 		label: '대상 유형',
-		disabled: false,
 		cols: 6,
 		class: 'pr-4 py-2 mt-1',
 		list: 'emMapDivList',
@@ -392,6 +394,7 @@ const myDetail = [
 	{
 		type: 'ReadPlcPop',
 		label: '대상 항목',
+		modalTitle:'대상 항목',
 		valueNm: 'objId',
 		disabled: true,
 		cols: 6,
@@ -400,8 +403,7 @@ const myDetail = [
 		bindNm: 'objNm',
 		labelCols: 12,
 		textCols: 12,
-		iconShow: true,
+		disableContent: true,
-		noText: true,
 		iconShow: true,
 	},
 	{
@@ -480,6 +482,7 @@ const myDetail = [
 		disabledFg: 'objKind',
 		labelCols: 12,
 		textCols: 12,
+		iconShow: true,
 	},
 	{
 		type: 'InputText',

components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue

@@ -205,8 +205,8 @@ export default {
 				header: {
 					height: 38,
 				},
-				rowHeight: 29,
+				rowHeight: 37,
-				minRowHeight: 29,
+				minRowHeight: 37,
 				selectionUnit: 'row',
 				editingEvent: 'click',
 			};
@@ -383,5 +383,15 @@ function numberFormatter({ value }) {
 		.tab-datepicker {
 			width: 64% !important;
 		}
+
+		.tui-grid-layer-state {
+			top: 40px !important;
+		}
+
+		.tui-grid-layer-selection,
+		.tui-grid-cell-content-editor{
+			height: 36px !important;
+			// border: none;
+		}
 	}
 </style>

pages/comm/base/BatchLogMngPage.vue

@@ -442,3 +442,10 @@ const myDetail = [
 	},
 ];
 </script>
+<style lang="scss" scoped>
+	::v-deep{
+		.tui-grid-layer-state{
+			top: 40px !important;
+		}
+	}
+</style>

pages/comm/base/CalendarMngPage.vue

@@ -41,7 +41,7 @@
 					<v-card-title>
 						<span class="custom-title-4">캘린더 미리보기</span>
 					</v-card-title>
-					<v-card-actions class="px-5 d-block" >
+					<v-card-actions class="px-5 d-block">
 						<Calendar :parentPrgmId="myPrgmId" :gridName="gridName" :headerVisible="false"
 							:showTitle="false" />
 					</v-card-actions>
@@ -261,18 +261,18 @@ export default {
 					formatter({ value }) {
 						return value == 1 ? '휴일' : '평일';
 					},
-					editor: {
-						type: CustomSelectBoxEditor,
-					},
 					// editor: {
-					// 	type: 'select',
+					// 	type: CustomSelectBoxEditor,
-					// 	options: {
-					// 		listItems: [
-					// 			{ text: '휴일', value: '1' },
-					// 			{ text: '평일', value: '0' },
-					// 		],
-					// 	},
 					// },
+					editor: {
+						type: 'select',
+						options: {
+							listItems: [
+								{ text: '휴일', value: '1' },
+								{ text: '평일', value: '0' },
+							],
+						},
+					},
 				},
 				{ header: '휴일명', name: 'hldyNm', editor: 'text' },
 			];
@@ -470,71 +470,76 @@ const defaultData = {
 };
 </script>
 <style lang="scss" scoped>
-.selectbox:focus {
-	outline: none;
-}
-
-.calendarOption {
-	box-sizing: border-box;
-	position: relative;
-	width: 100%;
-	height: 100%;
-	padding: 0;
-	margin: 0;
-}
-
-select.selectbox {
-	box-sizing: border-box;
-	position: relative;
-	width: 100%;
-	height: 100%;
-	/* 높이 초기화 */
-	padding: 0;
-	margin: 0;
-	line-height: normal;
-	/* line-height 초기화 */
-	font-family: inherit;
-	/* 폰트 상속 */
-	border: 0;
-	// opacity: 0;  /* 숨기기 */
-	// filter:alpha(opacity=0);  /* IE8 숨기기 */
-	// -webkit-appearance: none; /* 네이티브 외형 감추기 */
-	// -moz-appearance: none;
-	// appearance: none;
-	opacity: 1;
-	/* 숨기기 */
-	filter: alpha(opacity=1);
-	/* IE8 숨기기 */
-	-webkit-appearance: auto;
-	/* 네이티브 외형 감추기 */
-	-moz-appearance: auto;
-	appearance: auto;
-}
-
-.tui-grid-layer-editing {
-	position: absolute;
-	background: #fff;
-	// background-image: initial;
-	// background-position-x: initial;
-	// background-position-y: initial;
-	// background-size: initial;
-	// background-repeat-x: initial;
-	// background-repeat-y: initial;
-	// background-attachment: initial;
-	// background-origin: initial;
-	// background-clip: initial;
-	// background-color: rgb(255, 255, 255);
-	// z-index: 15;
-	padding: 0;
-	margin: 0;
-	/* border-style: solid; */
-	/* border-width: 1px; */
-	white-space: nowrap;
-	border-width: 0px;
-	// box-sizing: border-box;
-}
-
 ::v-deep {
+	.selectbox:focus {
+		outline: none;
+	}
+
+	.calendarOption {
+		box-sizing: border-box;
+		position: relative;
+		width: 100%;
+		height: 100%;
+		padding: 0;
+		margin: 0;
+		border: 1px solid;
+		border-radius: 6px;
+	}
+
+	select.selectbox {
+		box-sizing: border-box;
+		position: relative;
+		width: 100%;
+		height: 100%;
+		/* 높이 초기화 */
+		padding: 0;
+		margin: 0;
+		line-height: normal;
+		/* line-height 초기화 */
+		font-family: inherit;
+		/* 폰트 상속 */
+		border: 0;
+		// opacity: 0;  /* 숨기기 */
+		// filter:alpha(opacity=0);  /* IE8 숨기기 */
+		// -webkit-appearance: none; /* 네이티브 외형 감추기 */
+		// -moz-appearance: none;
+		// appearance: none;
+		opacity: 1;
+		/* 숨기기 */
+		filter: alpha(opacity=1);
+		/* IE8 숨기기 */
+		-webkit-appearance: auto;
+		/* 네이티브 외형 감추기 */
+		-moz-appearance: auto;
+		appearance: auto;
+		border: 1px solid;
+		border-radius: 6px;
+	}
+
+	.tui-grid-layer-editing {
+		position: absolute;
+		background: #fff;
+		// background-image: initial;
+		// background-position-x: initial;
+		// background-position-y: initial;
+		// background-size: initial;
+		// background-repeat-x: initial;
+		// background-repeat-y: initial;
+		// background-attachment: initial;
+		// background-origin: initial;
+		// background-clip: initial;
+		// background-color: rgb(255, 255, 255);
+		// z-index: 15;
+		padding: 0;
+		margin: 0;
+		/* border-style: solid; */
+		/* border-width: 1px; */
+		white-space: nowrap;
+		border-width: 0px;
+		// box-sizing: border-box;
+	}
+
+
 	.custom-vc-calender {
 		.vc-header {
 			display: none;

pages/comm/base/NoticeMngPage.vue

@@ -4,7 +4,7 @@
 		<!-- 리스트 페이지 시작 -->
 		<div v-if="pageActionFlag == 'list'" class="h1001">
 			<v-card class="">
-				<div class="pa-5 pb-0">
+				<div class="pa-5">
 					<v-row align="center" no-gutters>
 						<v-col :cols="12" class="d-flex align-center justify-space-between">
 							<v-card-title class="pa-0 custom-title-4">공지사항</v-card-title>
@@ -15,15 +15,11 @@
 								<!-- <v-btn @click="listPageButtonGroupClickEvent('delete')" :ripple="false">삭제</v-btn> -->
 							</div>
 						</v-col>
-						<v-col :cols="12" ref="contents" class="mt-5" style="min-height: calc(100% - 73px);">
+						<v-col :cols="12" ref="contents" class="mt-5" style="min-height: calc(100% - 76px);">
-							<div ref="gridParent" class="px-50" style="min-height: 64vh;">
+							<div ref="gridParent" class="px-50" style="min-height: 70vh;">
 								<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
 									:parentPrgmId="myPrgmId" @getRowsData="getRowData" />
 							</div>
-							<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
-								<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
-									@loadData="changeGrid" />
-							</div>
 						</v-col>
 					</v-row>
 				</div>
@@ -41,7 +37,7 @@
 								class="mr-1" icon="unordered-list">목록</a-button>
 							<a-button @click="viewPageButtonGroupClickEvent('reply')" type="primary" :ripple="false"
 								class="mr-1" icon="send-outlined">
-								<v-icon small :class="['mr-2']">$icoSend</v-icon>
+								<v-icon small :class="['mr-2']" >$icoSend</v-icon>
 								답글
 							</a-button>
 							<a-button @click="viewPageButtonGroupClickEvent('update')" type="primary" :ripple="false"
@@ -64,8 +60,11 @@
 						<v-card-title class="custom-title-7 pa-0">
 							파일목록
 						</v-card-title>
-						<div v-for="fileData in viewActionData.fileData" :key="fileData.apndFileId"
+						<div v-for="fileData in viewActionData.fileData" 
-							:class="['file-item', isDarkMode ? 'dark' : 'light']" style="background-color: unset;">
+							:key="fileData.apndFileId" 
+							:class="['file-item', isDarkMode?'dark':'light']"
+							style="background-color: unset;"
+						>
 							<a @click.prevent="downloadFile(fileData)" class="pa-0">
 								<div class="d-flex justify-start search-box-label mb-0">
 									<v-icon>mdi-paperclip</v-icon>
@@ -94,14 +93,15 @@
 						</v-col>
 						<v-col :cols="12" style="min-height: calc(100vh - 450px);">
 							<editor ref="tuiEditor" height="100%" initialEditType="wysiwyg"
-								:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']" />
+							:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/>
 						</v-col>
 
 						<v-col :cols="6" class="mt-5">
 							<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 							<div class="" v-if="writeActionData.fileData">
 								<div v-for="(fileData, index) in writeActionData.fileData" :key="fileData.apndFileId"
-									:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
+									:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
+								>
 									<div class="file-item-detail">
 										<v-icon>mdi-paperclip</v-icon>
 										<span href="#" class="file-item-name">{{ fileData.name }}</span>
@@ -110,16 +110,17 @@
 										@click="writeActionData.업로드fileData.splice(index, 1)" />
 								</div>
 							</div>
-							<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload"
+							<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload" @click="$refs.writeInputFile.$refs.input.click()">
-								@click="$refs.writeInputFile.$refs.input.click()">
 								업로드
 							</a-button>
 							<v-file-input ref="writeInputFile" v-model="writeActionData.fileData" multiple outlined
 								hide-input class="d-none" prepend-icon="mdi-tray-arrow-up"></v-file-input>
 						</v-col>
 						<v-col :cols="12" class="text-right">
-							<a-button @click="writePageButtonGroupClickEvent('cancel')" :ripple="false"
+							<a-button @click="writePageButtonGroupClickEvent('cancel')" 
-								class="ant-btn-popup-default mr-2" color="primary">취소</a-button>
+								:ripple="false"
+								class="ant-btn-popup-default mr-2" 
+								color="primary" >취소</a-button>
 							<a-button @click="writePageButtonGroupClickEvent('write')" :ripple="false"
 								type="primary">등록</a-button>
 						</v-col>
@@ -142,13 +143,14 @@
 					</v-col>
 					<v-col :cols="12" style="height: calc(100vh - 270px);" class="mt-2">
 						<editor ref="tuiReplyEditor" height="100%" initialEditType="wysiwyg" 
-							:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']" />
+						:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/>
 					</v-col>
 					<v-col :cols="6" class="mt-5">
 						<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 						<div class="" v-if="replyActionData.fileData">
 							<div v-for="(fileData, index) in replyActionData.fileData" :key="fileData.apndFileId"
-								:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
+								:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
+							>
 								<div class="file-item-detail">
 									<v-icon>mdi-paperclip</v-icon>
 									<span href="#" class="file-item-name">{{ fileData.name }}</span>
@@ -157,8 +159,7 @@
 									@click="replyActionData.fileData.splice(index, 1)" />
 							</div>
 						</div>
-						<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload"
+						<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload" @click="$refs.replyInputFile.$refs.input.click()">
-							@click="$refs.replyInputFile.$refs.input.click()">
 							업로드
 						</a-button>
 						<v-file-input ref="replyInputFile" multiple show-size v-model="replyActionData.fileData"
@@ -166,8 +167,10 @@
 						</v-file-input>
 					</v-col>
 					<v-col :cols="12" class="text-right">
-						<a-button @click="replyPageButtonGroupClickEvent('cancel')" class="ant-btn-popup-default mr-2"
+						<a-button @click="replyPageButtonGroupClickEvent('cancel')" 
-							color="primary" :ripple="false">취소</a-button>
+							class="ant-btn-popup-default mr-2" 
+							color="primary"
+							:ripple="false">취소</a-button>
 						<a-button @click="replyPageButtonGroupClickEvent('reply')" :ripple="false"
 							type="primary">등록</a-button>
 					</v-col>
@@ -192,13 +195,14 @@
 						<v-col :cols="12" style="height: calc(90vh - 270px);" class="mt-4">
 							<editor ref="tuiUpdateEditor" height="100%" initialEditType="wysiwyg"
 								:initialValue="updateActionData.content"
-								:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']" />
+								:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/>
 						</v-col>
 						<v-col :cols="6" class="mt-5">
 							<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 							<div class="" v-if="updateActionData.fileData">
 								<div v-for="(fileData, index) in updateActionData.fileData" :key="fileData.apndFileId"
-									:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
+									:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
+								>
 									<div class="file-item-detail">
 										<v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
 										<span href="#" class="file-item-name">{{ fileData.name }}</span>
@@ -210,7 +214,8 @@
 							<div class="current-files" v-if="updateActionData.currentFileList">
 								<div v-for="(fileData, index) in updateActionData.currentFileList"
 									:key="fileData.apndFileId"
-									:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
+									:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
+								>
 									<div class="file-item-detail">
 										<v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
 										<span @click.prevent="downloadFile(fileData)" href="#"
@@ -221,8 +226,7 @@
 										@click="addFileToDeleteFileList(fileData)" />
 								</div>
 							</div>
-							<a-button class="ant-btn-popup-default mt-2" color="primary" icon="upload"
+							<a-button class="ant-btn-popup-default mt-2" color="primary" icon="upload" @click="$refs.updateInputFile.$refs.input.click()">
-								@click="$refs.updateInputFile.$refs.input.click()">
 								업로드
 							</a-button>
 							<v-file-input ref="updateInputFile" multiple show-size v-model="updateActionData.fileData"
@@ -231,7 +235,9 @@
 						</v-col>
 						<v-col :cols="12" class="text-right">
 							<a-button @click="updatePageButtonGroupClickEvent('cancel')" 
-								class="ant-btn-popup-default mr-2" color="primary">취소</a-button>
+								class="ant-btn-popup-default mr-2" 
+								color="primary"
+							>취소</a-button>
 							<a-button @click="updatePageButtonGroupClickEvent('update')" type="primary">등록</a-button>
 						</v-col>
 					</v-row>
@@ -252,7 +258,6 @@ import '@toast-ui/editor/dist/toastui-editor.css';
 import { Editor } from '@toast-ui/vue-editor';
 import '@toast-ui/editor/dist/toastui-editor-viewer.css';
 import { Viewer } from '@toast-ui/vue-editor';
-import pagination from '~/components/common/Pagination';
 
 let myTitle;
 // const myPrgmId = "PRG0034";
@@ -279,7 +284,6 @@ export default {
 		Utility,
 		Editor,
 		Viewer,
-		pagination,
 	},
 	data() {
 		return {
@@ -294,11 +298,6 @@ export default {
 			loadGrid: false,
 			selectedRowKey: null,
 			selectedRowData: null,
-			itemsPerPage: 10,
-			itemsPerPageArray: [10, 20, 30],
-			limit: 20,
-			page: 1,
-			totalCount: 0,
 			writeActionData: {
 				title: '',
 				postNo: null,
@@ -340,10 +339,7 @@ export default {
 	},
 	watch: {
 		chkIsFind(val) {
-			if (val) {
+			if (val) this.search();
-				this.page = 1;
-				this.search();
-			}
 		},
 	},
 	async beforeCreate() {
@@ -429,7 +425,7 @@ export default {
 			this.getGridData();
 		},
 		gridInit() {
-			const gridHeight = this.$refs.contents.offsetHeight - 120;
+			const gridHeight = this.$refs.contents.offsetHeight - 76;
 
 			const myOptions = {
 				header: {
@@ -501,29 +497,16 @@ export default {
 		async getGridData() {
 			var params = {
 				bordNo: 'BORD0001',
-				limit: this.limit,
-				page: this.page,
-				offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
 			};
 
 			this.loadGrid = false;
 
 			const res = await this.postApiReturn({
-				apiKey: 'selectPostPage',
+				apiKey: 'selectPostList',
-				resKey: 'postPage',
+				resKey: 'postData',
 				sendParam: params,
 			});
 
-			const res2 = await this.postApiReturn({
-				apiKey: 'selectPostPageTotal',
-				resKey: 'postPageTotal',
-				sendParam: {
-					bordNo: 'BORD0001',
-				}
-			});
-
-			this.totalCount = res2[0].totalcount;
-
 			this.setGridData({
 				gridKey: this.gridName,
 				value: res,
@@ -1055,12 +1038,6 @@ export default {
 
 			return resultFlag;
 		},
-		changeGrid: async function (pageNum, limit) {
-			this.page = pageNum;
-			this.limit = limit;
-
-			this.search();
-		},
 	},
 };
 

pages/ems/base/DashboardPage.vue

@@ -635,15 +635,15 @@ export default {
       this.setChart04Data(chart04Dat);
 
       let chartOption2 = getLineChartOption({
-            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_02].xAxisData,
+            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_02].xAxis.data,
-            seriesData: this.$store.state.pageData[myPrgmId][this.chart_02].seriesData,
+            seriesData: this.$store.state.pageData[myPrgmId][this.chart_02].series,
             isDarkMode: this.isDarkMode,
           });
       this.$store.state.pageData[myPrgmId][this.chart_02] = chartOption2
 
       let chartOption5 = getLineChartOption({
-            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_05].xAxisData,
+            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_05].xAxis.data,
-            seriesData: this.$store.state.pageData[myPrgmId][this.chart_05].seriesData,
+            seriesData: this.$store.state.pageData[myPrgmId][this.chart_05].series,
             isDarkMode: this.isDarkMode,
           });
       this.$store.state.pageData[myPrgmId][this.chart_05] = chartOption5
@@ -754,7 +754,7 @@ export default {
     changeGrid: async function (pageNum, limit) {
       this.page = pageNum;
       this.limit = limit;
-      await this.getGridData();
+      await this.getGridData(true);
     },
     async search() {
       await new Promise((resolve) => setTimeout(resolve, 1500));
@@ -766,7 +766,7 @@ export default {
         await this.getTodayEfficiencyStatus();
         await this.getTodayNgTopTen();
         await this.getCompareEqpmTGdChart();
-        await this.getGridData();
+        await this.getGridData(false);
       }
     },
     async gridInit() {
@@ -944,8 +944,13 @@ export default {
       this.loadGrid = true;
       // this.getGridData();
     },
-    async getGridData() {
+    async getGridData(isPaging) {
-      this.loadGrid = false;
+
+      // Do not hide grid when trigger paging function
+      if (!isPaging) {
+          this.loadGrid = false; 
+      }
+
       // Get total records of grid
       const totalRes =  await this.postApiReturn({
         apiKey: "selectIssueGdIdxDataPageTotal",
@@ -1381,6 +1386,9 @@ export default {
           textStyle: {
             color: this.isDarkMode ? "#fff" : "#333333",
           },
+          itemStyle: {        
+            borderWidth: 0
+          }
         },
         series: seriesData,
       };

pages/ems/base/GdIdxMngPage.vue

@@ -41,7 +41,7 @@
 					<div class="h100 px-4" style="height:calc(100% - 70px)">
 						<div ref="gridParent" style="height: 26%">
 							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
-								:parentPrgmId="myPrgmId" @getRowsData="getRowData" :dataPath="dataPathExample" />
+								:parentPrgmId="myPrgmId" @getRowsData="getRowData" />
 						</div>
 						<div class="d-flex py-4 mt-4">
 							<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"

pages/ems/base/GdStndMngPage.vue

@@ -210,62 +210,6 @@ export default {
 			selectValueList02: [],
 			selectValue03: null,
 			selectValueList03: [],
-			// dataPathExample: {
-			// 	"rowGrid": {
-			// 		data: [
-
-			// 			{
-			// 				eqpmId: 'EQ001',
-			// 				originEqpmId: 'ORIG001',
-			// 				eqpmNm: '냉각기 A',
-			// 				careStndVal: 75,
-			// 				warnStndVal: 90,
-			// 			},
-			// 			{
-			// 				eqpmId: 'EQ002',
-			// 				originEqpmId: 'ORIG002',
-			// 				eqpmNm: '펌프 B',
-			// 				careStndVal: 60,
-			// 				warnStndVal: 80,
-			// 			},
-			// 			{
-			// 				eqpmId: 'EQ003',
-			// 				originEqpmId: 'ORIG003',
-			// 				eqpmNm: '모터 C',
-			// 				careStndVal: 50,
-			// 				warnStndVal: 70,
-			// 			},
-			// 			{
-			// 				eqpmId: 'EQ004',
-			// 				originEqpmId: 'ORIG004',
-			// 				eqpmNm: '밸브 D',
-			// 				careStndVal: 65,
-			// 				warnStndVal: 85,
-			// 			},
-			// 			{
-			// 				eqpmId: 'EQ005',
-			// 				originEqpmId: 'ORIG005',
-			// 				eqpmNm: '컨트롤러 E',
-			// 				careStndVal: 55,
-			// 				warnStndVal: 75,
-			// 			},
-
-			// 		],
-			// 		column: [
-			// 			{ header: '설비', name: 'eqpmId', align: 'left' },
-			// 			{
-			// 				header: 'origin설비',
-			// 				name: 'originEqpmId',
-			// 				align: 'center',
-			// 				hidden: true,
-			// 			},
-			// 			{ header: '설비명', name: 'eqpmNm', align: 'left' },
-			// 			{ header: '주의기준', name: 'careStndVal', align: 'right' },
-			// 			{ header: '심각기준', name: 'warnStndVal', align: 'right' },
-			// 		]
-
-			// 	}
-			// }
 		};
 	},
 	computed: {

pages/ems/base/PastRsltDataReadPage.vue

@@ -38,7 +38,7 @@
 					<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
 							<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
 								@loadData="changeGrid" />
-					</div>
+						</div>
 				</v-card>
 
 			</v-col>

pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue

@@ -61,16 +61,23 @@
 		</v-row>
 		<v-row ref="contents" class="pt-3">
 			<v-col :cols="12" style="height: 100%">
-				<v-card class="pb-5">
+				<v-card class="pb-3">
 					<div class="d-flex align-center justify-space-between pa-4">
 						<v-card-title class="pa-0">설비별 현황 리스트</v-card-title>
 					</div>
-					<div class="px-4" style="height:calc(100% - 76px)">
+					<div class="px-4" style="height:calc(100% - 120px)">
-						<div ref="gridParent" class="w100 h100">
+						<div ref="gridParent" class="w100 h100 enrg-effc">
 							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
 								:parentPrgmId="myPrgmId" :columnClickEventFlag="true" @columnClick="columnClick" />
+							
 						</div>
+						<div class="d-flex align-center justify-center pa-5 pb-0" v-if="loadGrid && totalCount > 0">
+								<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
+									@loadData="changeGrid" />
+							</div>
+
 					</div>
+
 				</v-card>
 			</v-col>
 		</v-row>
@@ -92,6 +99,7 @@ import Datepicker from '~/components/common/Datepicker';
 import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
 import EnrgEffcEqpmDetailPop from '~/components/common/modal/EnrgEffcEqpmDetailPop';
 import EnrgEffcGdIdxDetPop from '~/components/common/modal/EnrgEffcGdIdxDetPop';
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 let myPrgmId;
@@ -124,6 +132,7 @@ export default {
 		EnrgEffcEqpmDetailPop,
 		EqpmSelectPop,
 		EnrgEffcGdIdxDetPop,
+		pagination
 	},
 	data() {
 		return {
@@ -149,7 +158,12 @@ export default {
 			eqpmGrpFlag: false,
 			eqpmGdIdxFlag: false,
 			fabFlag: false,
+			itemsPerPage: 10,
+			itemsPerPageArray: [10, 20, 30],
+			limit: 20,
+			page: 1,
 			routeData: {},
+			totalCount: 0,
 		};
 	},
 	computed: {
@@ -377,6 +391,7 @@ export default {
 				resKey: 'eqpmKindCodeLists',
 				sendParam: {},
 			});
+
 			if (res.length > 0) {
 				this.selectValueList01 = await res.map(item => {
 					return {
@@ -680,9 +695,29 @@ export default {
 					fabId: this.selectValue02,
 					eqpmKindId: this.selectValue01,
 					okFg: this.selectValue06,
+					limit: this.limit,
+					page: this.page,
+					offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
 				},
 			});
 
+			const res2 = await this.postApiReturn({
+				apiKey: 'selectEnrgEffcEqpmDetlMntrPageTotal',
+				resKey: 'eqpmDetlDataPageTotal',
+				sendParam: {
+					eqpmId: this.selectValue04.eqpmId,
+					eqpmGrpId: this.selectValue03,
+					fromDt: this.pageData.fromDt,
+					toDt: this.pageData.toDt,
+					gdIdxId: this.selectValue05,
+					fabId: this.selectValue02,
+					eqpmKindId: this.selectValue01,
+					okFg: this.selectValue06,
+				},
+			});
+
+			this.totalCount = res2[0]?.totalcount;
+
 			this.setGridData({
 				gridKey: this.gridName,
 				value: res,
@@ -722,6 +757,12 @@ export default {
 				});
 			}
 		},
+		changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			this.search();
+		},
 	},
 };
 

pages/ems/effc/EnrgUsePlanPage.vue

@@ -32,19 +32,15 @@
 		</v-row>
 		<v-row ref="contents">
 			<v-col :cols="12" >
-				<v-card>
+				<v-card class="pb-5">
 					<div class="d-flex align-center justify-space-between py-4 px-4">
 						<v-card-title class="pa-0 custom-title-4">설비별 에너지 계획 리스트</v-card-title>
 						<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
 					</div>
-					<div ref="gridParent" class="px-5" style="min-height: 50vh;">
+					<div ref="gridParent" class="px-5" style="min-height: 60vh;">
 						<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
 							:editorGrid="true" @getRowsData="getRowData" />
 					</div>
-					<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
-							<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
-								@loadData="changeGrid" />
-					</div>
 				</v-card>
 			</v-col>
 		</v-row>
@@ -61,7 +57,7 @@ import Grid from '~/components/common/Grid';
 import Utility from '~/plugins/utility';
 import Buttons from '~/components/common/button/Buttons';
 import EnrgUsePlanModiPop from '~/components/common/modal/EnrgUsePlanModiPop';
-import pagination from '~/components/common/Pagination';
+import DateUtility from '~/plugins/dateUtility';
 
 let myTitle;
 let myPrgmId;
@@ -90,7 +86,6 @@ export default {
 		Grid,
 		Buttons,
 		EnrgUsePlanModiPop,
-		pagination
 	},
 	data() {
 		return {
@@ -109,11 +104,7 @@ export default {
 			fromDt: new Date().getFullYear(),
 			rowKey: null,
 			edtingFinishFlag: 'Y',
-			itemsPerPage: 10,
+			// gridName: 'rowGrid',
-			itemsPerPageArray: [10, 20, 30],
-			limit: 20,
-			page: 1,
-			totalCount: 0,
 		};
 	},
 	computed: {
@@ -143,10 +134,7 @@ export default {
 			this.fromDt = val;
 		},
 		chkIsFind(val) {
-			if (val) {
+			if (val) this.search();
-				this.page = 1;
-				this.search();
-			}
 		},
 		async selectValue01(val) {
 			if (this.initedFlag) {
@@ -277,7 +265,7 @@ export default {
 		gridInit() {
 			this.loadGrid = false;
 			let _this = this;
-			const gridHeight = this.$refs.gridParent.offsetHeight - 40;
+			const gridHeight = this.$refs.gridParent.offsetHeight - 50;
 			let yyyyCol = this.pageData.fromDt + '년';
 			let childCols1 = [];
 			let myComplexColumns = [
@@ -370,14 +358,14 @@ export default {
 				{
 					header: 'FAB',
 					name: 'fab',
-					width: 85,
+					width: 100,
 					align: 'left',
 					// hidden: true,
 				},
 				{
 					header: '공정명',
 					name: 'eccNm',
-					width: 150,
+					width: 100,
 					align: 'left',
 					hidden: true,
 				},
@@ -427,7 +415,7 @@ export default {
 				{
 					header: '구분',
 					name: 'gubun',
-					width: 150,
+					width: 200,
 					align: 'left',
 					// hidden: true,
 					formatter({ value }) {
@@ -459,7 +447,7 @@ export default {
 				myColumns.push({
 					header: i.toString() + '월',
 					name: qty,
-					width: 70,
+					width: 80,
 					align: 'right',
 					editor: 'text',
 					formatter: this.numberFormatter,
@@ -512,25 +500,8 @@ export default {
 					pastDt: parseInt(this.fromDt) - 1,
 					eqpmGrpId: this.selectValue03,
 					eccId: this.selectValue01,
-					limit: this.limit,
-					page: this.page,
-					offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
 				},
 			});
-
-			const res2 = await this.postApiReturn({
-				apiKey: 'selectEnrgUsePlanPageTotal',
-				resKey: 'enrgUsePlanPageTotal',
-				sendParam: {
-					fromDt: this.fromDt,
-					pastDt: parseInt(this.fromDt) - 1,
-					eqpmGrpId: this.selectValue03,
-					eccId: this.selectValue01,
-				},
-			});
-
-			this.totalCount = res2[0].totalcount;
-
 			let fabText = this.pageData.eccIdList.filter(item => {
 				return item.value == this.selectValue01;
 			})[0]['text'];
@@ -763,12 +734,6 @@ export default {
 				}
 			}
 		},
-		changeGrid: async function (pageNum, limit) {
-			this.page = pageNum;
-			this.limit = limit;
-
-			this.search();
-		},
 	},
 };
 const dt = new Date();

pages/ems/effc/EqpmIndMntrPage.vue

@@ -282,13 +282,13 @@ export default {
     changeGrid: async function (pageNum, limit) {
       this.page = pageNum;
       this.limit = limit;
-      this.search();
+      this.getGridData(true);
     },
     async init() {
       await this.getSelectValueList();
       await this.setQueryParams();
       this.gridInit();
-      await this.getGridData();
+      await this.getGridData(false);
 
       this.initedFlag = true;
     },
@@ -588,8 +588,10 @@ export default {
         value: columnList,
       });
     },
-    async getGridData() {
+    async getGridData(isPaging) {
-      this.loadGrid = false;
+      if(!isPaging) {
+        this.loadGrid = false;
+      }
       this.enrgUseMainIdxDesc = [];
       var apiKey = null;
       var apiKey2 = null;
@@ -651,7 +653,7 @@ export default {
       this.makeTooltip();
     },
     async search() {
-      await this.getGridData();
+      await this.getGridData(false);
     },
     async makeTooltip() {
       var gdIdxList = [

pages/ems/effc/TagTrndPage.vue

@@ -153,7 +153,7 @@
           <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"
+                'TAG를 선택해주세요'
               }}</v-card-title>
             </div>
             <div :ref="'chartParent' + 0" style="height: 100%; overflow: visible">

store/modules/list.js

@@ -514,8 +514,6 @@ const INIT_URL_STATE = {
 
 	// prgmId: "PRG0003" 공지사항
 	selectPostList: 'comm/base/NoticeMngCtr/selectPostList',
-	selectPostPage: 'comm/base/NoticeMngCtr/selectPostPage',
-	selectPostPageTotal: 'comm/base/NoticeMngCtr/selectPostPageTotal',
 	deletePostList: 'comm/base/NoticeMngCtr/deletePost',
 
 	//prgmId: "PRG0121" 공지사항 게시물 상세조회
@@ -904,8 +902,6 @@ const INIT_URL_STATE = {
 	//prgmId: PRG0079 에너지사용량계획
 	selectFabCodeList: 'ems/effc/EnrgUsePlanCtr/selectFabCodeList',
 	selectEnrgUsePlanData: 'ems/effc/EnrgUsePlanCtr/selectEnrgUsePlanData',
-	selectEnrgUsePlanPageTotal: 'ems/effc/EnrgUsePlanCtr/selectEnrgUsePlanPageTotal',
-
 	saveEmsEqpmMmPlanDatas: 'ems/effc/EnrgUsePlanCtr/saveEmsEqpmMmPlanDatas',
 
 	//prgmId : PRG0080 에너지 사용량 - Total Summary
@@ -947,6 +943,8 @@ const INIT_URL_STATE = {
 	//prgmId : PRG0084 설비별 운전가이드
 	selectEqpmCodeList: 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEqpmCodeList',
 	selectEnrgEffcEqpmDetlMntr:'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcEqpmDetlMntr',
+	selectEnrgEffcEqpmDetlMntrPageTotal:
+		'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcEqpmDetlMntrPageTotal', // 일일검침정보
 	selectEqpmDetailPop: 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEqpmDetailPop',
 	selectEnrgEffcGdIdxDetPop : 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcGdIdxDetPop',