fix bugs change theme model

Reviewed-on: #75

assets/scss/common.scss

@@ -1,17 +1,5 @@
 // router-tab (header)
-@import "./var.scss";
 @import "./mixin.scss";
-@import "./common/fonts.scss";
-@import "./common/text.scss";
-@import "./common/input.scss";
-@import "./common/button.scss";
-@import "./common/grid.scss";
-@import "./common/card.scss";
-@import "./common/tabs.scss";
-@import "./common/numericInput.scss";
-@import "./common/pagination.scss";
-@import "./common/editor.scss";
-
 
 html,
 body {
@@ -231,12 +219,17 @@ 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: #f5f5f5 !important;
+    }
+
     .v-list-item__title {
       font-family: var(--desktop-normal-font-family, "Inter-Regular", sans-serif) !important;
     }
@@ -329,74 +322,6 @@ a {
       }
     }
 
-    .router-tab {
-      .router-tab__header {
-        background-color: map-deep-get($config, #{$theme}, "router-header");
-        border-color: map-deep-get($config, #{$theme}, "router-header");
-        height: 46px;
-        z-index: 7;
-        max-width: calc(100vw - 290px);
-      }
-
-      .router-tab__container {
-        background-color: map-deep-get($config, #{$theme}, "router-container");
-      }
-
-      .router-tab__item {
-        background-color: map-deep-get($config, #{$theme}, "router-tab-item");
-        border-color: map-deep-get($config, #{$theme}, "router-tab-item");
-        color: map-deep-get($config, #{$theme}, "router-tab-item-color");
-
-        &:not(.is-active) {
-          &:hover {
-            &>span {
-              color: map-deep-get($config,
-                #{$theme},
-                "router-tab-item-hover-color"
-              );
-            }
-          }
-        }
-
-        .v-icon {
-          color: map-deep-get($config, #{$theme}, "router-tab-item-icon-color");
-        }
-
-        &.is-active {
-          background-color: map-deep-get($config,
-            #{$theme},
-            "router-tab-item-active"
-          );
-          border-color: map-deep-get($config,
-            #{$theme},
-            "router-tab-item-active-color"
-          ) !important;
-          color: map-deep-get($config,
-            #{$theme},
-            "router-tab-item-active-color"
-          );
-
-          .v-icon {
-            color: map-deep-get($config,
-              #{$theme},
-              "router-tab-item-icon-active-color"
-            );
-          }
-
-        }
-      }
-
-      .router-tab__slot-end {
-        .v-btn {
-          background-color: map-deep-get($config,
-            #{$theme},
-            "router-tab-slot-end-button-backgroundColor"
-          );
-          box-shadow: none;
-        }
-      }
-    }
-
     .border-bottom-1 {
       border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color");
     }

assets/scss/common/grid.scss

@@ -89,9 +89,57 @@
   }
 
   .tui-grid-cell {
-    &:last-child {
-      input[type=checkbox] {
-        margin-top: 8px;
+    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-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);
       }
     }
   }
@@ -118,6 +166,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 +247,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 +482,15 @@
             //   "tui-grid-cell-insert-color"
             // );
           }
+
+          span {
+            &.custom-link {
+              color: map-deep-get($config,
+                #{$theme},
+                "router-tab-item-active-color"
+              );
+            }
+          }
         }
       }
 
@@ -602,6 +726,37 @@
       &-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"
+              );
+            }
+          }
+        }
+      }
     }
 
     [class*="tui-grid-tree-wrapper"] {

assets/scss/layout.scss

@@ -182,6 +182,7 @@
       height: calc(100vh - 110px);
       max-height: calc(100vh - 115px);
       padding: 20px;
+      background-color: transparent !important;
     }
 
     .router-tab__slot-end {
@@ -436,6 +437,70 @@
         }
       }
 
+      .router-tab {
+        .router-tab__header {
+          background-color: map-deep-get($config, #{$theme}, "router-header");
+          border-color: map-deep-get($config, #{$theme}, "router-header");
+          height: 46px;
+          z-index: 7;
+          max-width: calc(100vw - 290px);
+        }
+  
+        .router-tab__item {
+          background-color: map-deep-get($config, #{$theme}, "router-tab-item");
+          border-color: map-deep-get($config, #{$theme}, "router-tab-item");
+          color: map-deep-get($config, #{$theme}, "router-tab-item-color");
+  
+          &:not(.is-active) {
+            &:hover {
+              &>span {
+                color: map-deep-get($config,
+                  #{$theme},
+                  "router-tab-item-hover-color"
+                );
+              }
+            }
+          }
+  
+          .v-icon {
+            color: map-deep-get($config, #{$theme}, "router-tab-item-icon-color");
+          }
+  
+          &.is-active {
+            background-color: map-deep-get($config,
+              #{$theme},
+              "router-tab-item-active"
+            );
+            border-color: map-deep-get($config,
+              #{$theme},
+              "router-tab-item-active-color"
+            ) !important;
+            color: map-deep-get($config,
+              #{$theme},
+              "router-tab-item-active-color"
+            );
+  
+            .v-icon {
+              color: map-deep-get($config,
+                #{$theme},
+                "router-tab-item-icon-active-color"
+              );
+            }
+  
+          }
+        }
+  
+        .router-tab__slot-end {
+          .v-btn {
+            background-color: map-deep-get($config,
+              #{$theme},
+              "router-tab-slot-end-button-backgroundColor"
+            );
+            box-shadow: none;
+          }
+        }
+      }
+
     }
   }
 }

assets/scss/theme.scss

@@ -1,10 +1,3 @@
-// @import './var.scss';
-// @import './functions.scss';
-// @import './mixin.scss';
-
-
-
-
 // @each $theme in dark, light{
 //   @include theme($theme);
 //   .v-application.#{$theme}-mode{

components/common/AdminMenu.vue

@@ -112,7 +112,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '@/assets/scss/var.scss';
 @each $theme in dark, light {
 	.v-application.#{$theme}-mode {
 		.mdi-account {

components/common/Calendar.vue

@@ -180,8 +180,6 @@ const myDetail = [];
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/scss/var.scss';
-@import '@/assets/scss/mixin.scss';
 
 ::-webkit-scrollbar {
 	width: 0px;

components/common/Datepicker.vue

@@ -431,8 +431,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-// @import "@/assets/scss/datepicker.scss";
-
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;

components/common/DatepickerTimeSelectBox.vue

@@ -539,7 +539,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "@/assets/scss/datepicker.scss";
 
 ::v-deep {
   .tui-timepicker-row {

components/common/DatepickerTopView.vue

@@ -405,8 +405,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "@/assets/scss/datepicker.scss";
-
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;

components/common/DatepickerWidget.vue

@@ -355,8 +355,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "@/assets/scss/datepicker.scss";
-
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;

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/PastRsltDatePicker.vue

@@ -317,8 +317,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "@/assets/scss/datepicker.scss";
-
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;

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/ElecPowChrgPop.vue

@@ -683,7 +683,6 @@ const myColumns = [
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/scss/var.scss';
 @each $theme in dark, light {
 	.v-application.#{$theme}-mode {
 		.tui-grid {

components/common/modal/EnrgEffcEqpmDetailPop.vue

@@ -408,7 +408,6 @@ var eqpmDetlPop = {
 // 전력량 요금(원/kWh)
 </script>
 <style lang="scss" scoped>
-// @import '@/assets/scss/common/grid.scss';
 .tui-grid-scrollbar-left-bottom {
 	display: none !important;
 }

components/common/modal/EnrgEffcGdIdxDetPop.vue

@@ -329,7 +329,6 @@ var gdIdxDetPop = {
 // 전력량 요금(원/kWh)
 </script>
 <style lang="scss" scoped>
-// @import '@/assets/scss/common/grid.scss';
 .tui-grid-scrollbar-left-bottom {
   display: none !important;
 }

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-model="selectValue" @keyup.enter="typeEnterKey" @click="dialogOpenCloseEvent(dialog)" style="padding: 0;"
-				:required="item.required || false"><template v-slot:append>
-					<!-- Custom SVG icon -->
-					<v-icon>$icoSearch</v-icon>
-				</template></v-text-field>
+			<v-text-field
+				readonly
+				v-model="selectValue"
+				append-icon="mdi-magnify"
+				class="v-input__custom"
+				@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,
-		noText: true,
+		disableContent: 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,
-				minRowHeight: 29,
+				rowHeight: 37,
+				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>

layouts/default.vue

@@ -149,151 +149,6 @@
                   <v-icon size="20" class="ml-2" v-if="closable" @click.stop="onCloseTab(to)">mdi-close</v-icon>
                 </template>
                 <template #end v-if="false">
-                  <v-menu offset-y>
-                    <template v-slot:activator="{ on, attrs }">
-                      <!-- <v-btn :ripple="false" tile class="btn-close" v-bind="attrs" v-on="on">
-                        <span class="body-2">닫기</span>
-                        <v-icon size="20">mdi-chevron-down</v-icon>
-                      </v-btn> -->
-                      <a-button style="width: 80px; height: 36px" class="btn-close">
-                        <span class="body-2">닫기</span>
-                        <v-icon size="20">mdi-chevron-down</v-icon></a-button>
-                    </template>
-                    <v-list class="py-2 btn-close-menu-list" >
-                      <v-list-item class="px-2">
-                        <v-list-item-title @click="delAllTabsData()" class="body-2">전체 닫기</v-list-item-title>
-                      </v-list-item>
-                      <v-list-item class="px-2">
-                        <v-list-item-title @click="deleteSblingsTab()" class="body-2">나머지 닫기</v-list-item-title>
-                      </v-list-item>
-                    </v-list>
-                  </v-menu>
-                  <v-menu offset-y>
-                    <template v-slot:activator="{ on, attrs }">
-                      <!-- <v-btn
-                        :ripple="false"
-                        tile
-                        class="btn-close"
-                        v-bind="attrs"
-                        v-on="on"
-                        style="width: 100px"
-                      >
-                        <span class="body-2">즐겨찾기</span>
-                        <v-icon size="20">mdi-chevron-down</v-icon>
-                      </v-btn> -->
-                      <a-button style="width: 100px; height: 36px" class="btn-close">
-                        <span class="body-2">즐겨찾기</span>
-                        <v-icon size="20">mdi-chevron-down</v-icon></a-button>
-                    </template>
-                    <v-list v-if="myMenuList.length > 0" class="py-2 btn-close-menu-list" >
-                      <v-list-item v-for="item in myMenuList" :key="item.menuId" class="px-2" style="cursor: pointer">
-                        <v-list-item-title @click="moveToMyMenu(item.url, item.menuId, item.prgmId)" class="body-2">{{
-                          item.menuNm
-                        }}</v-list-item-title>
-                      </v-list-item>
-                    </v-list>
-                  </v-menu>
-                  <a-button id="refresh" :style="{
-                    padding: '0',
-                    width: '36px',
-                    height: '36px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: '4px', // square corners
-                  }" type="text" @click="removeBookMark" v-if="bookmarkBtn == 1">
-                    <span class="material-icons" style="font-size: 17px; vertical-align: middle">star</span>
-                  </a-button>
-                  <a-button id="refresh" :style="{
-                    padding: '0',
-                    width: '36px',
-                    height: '36px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: '4px', // square corners
-                  }" type="text" @click="addBookMark" v-if="bookmarkBtn == 0">
-                    <span class="material-icons" style="font-size: 17px; vertical-align: middle">star_border</span>
-                  </a-button>
-                  <v-btn style="
-                      background-color: white;
-                      color: #fff;
-                      border: 0.2px solid rgb(217, 217, 217);
-                    " id="refresh" icon tile :ripple="false" @click="refreshTab()">
-                    <v-icon style="color: rgba(0, 0, 0, 0.54)">mdi-refresh</v-icon>
-                  </v-btn>
-                  <v-btn style="
-                      background-color: white;
-                      color: #fff;
-                      border: 0.2px solid rgb(217, 217, 217);
-                    " icon tile :ripple="false" @click="toggle()">
-                    <v-icon style="color: rgba(0, 0, 0, 0.54)" v-if="!fullscreen">mdi-arrow-expand-all</v-icon>
-                    <v-icon style="color: rgba(0, 0, 0, 0.54)" v-else>mdi-arrow-collapse-all</v-icon>
-                  </v-btn>
-                  <!-- <v-btn
-                    icon
-                    tile
-                    :ripple="false"
-                    @click="removeBookMark()"
-                    v-if="bookmarkBtn == 1"
-                  >
-                    <span
-                      class="material-icons"
-                      style="font-size: 17px; vertical-align: middle"
-                      >star</span
-                    >
-                  </v-btn> -->
-                  <!-- <v-btn
-                    icon
-                    tile
-                    :ripple="false"
-                    @click="addBookMark()"
-                    v-if="bookmarkBtn == 0"
-                  >
-                    <span
-                      class="material-icons"
-                      style="font-size: 17px; vertical-align: middle"
-                      >star_border</span
-                    >
-                  </v-btn> -->
-                  <!-- <a-button
-                    id="refresh"
-                    :style="{
-                      padding: '0',
-                      width: '36px',
-                      height: '36px',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: '4px', // square corners
-                    }"
-                    type="text"
-                    @click="refreshTab"
-                  >
-                    <v-icon >mdi-refresh</v-icon>
-                  </a-button> -->
-                  <!-- <a-button id="refresh" type="text" @click="setDrawer" class="icon-button">
-                        <i class="mdi mdi-crop-free" style="font-size: 20px"></i>  
-                  </a-button>
-                  <a-button type="text" @click="setDrawer" class="icon-button">
-                        <i class="mdi mdi-crop-free" style="font-size: 20px"></i>  
-                  </a-button> -->
-                  <!-- <a-button
-                    :style="{
-                      padding: '0',
-                      width: '36px',
-                      height: '36px',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: '4px', // square corners
-                    }"
-                    type="text"
-                    @click="toggle"
-                  >
-                    <v-icon v-if="!fullscreen">mdi-arrow-expand-all</v-icon>  
-                    <v-icon v-else>mdi-arrow-collapse-all</v-icon>
-                  </a-button> -->
                 </template>
               </router-tab>
             </v-col>
@@ -846,5 +701,4 @@ export default {
 
 <style lang="scss" scoped>
 @import '@/assets/scss/layout.scss';
-
 </style>

nuxt.config.js

@@ -58,9 +58,9 @@ module.exports = {
 
 	// Modules: https://go.nuxtjs.dev/config-modules
 	modules: ['@nuxtjs/axios', '@nuxtjs/dayjs', '@nuxtjs/style-resources' ],
-	styleResources: {
-		scss: ['./assets/scss/*.scss'],
-	},
+	// styleResources: {
+	// 	scss: ['./assets/scss/*.scss'],
+	// },
 	proxy: {
 	  "/api/": {
 	    target: "http://0.0.0.0:9999/",

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>
@@ -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;
+	}
+
+	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;
+		background: #fff;
+		border: 1px solid #d9d9d9;
+		border-radius: 6px;
+		color: rgba(0,0,0,0.87843);
+	}
+
+	.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/ems/base/AddInfoMngPage.vue

@@ -626,6 +626,3 @@ const myDetail = [
 	},
 ];
 </script>
-<style lang="scss">
-@import '@/assets/scss/common.scss';
-</style>

pages/ems/base/DashboardPage.vue

@@ -1381,6 +1381,9 @@ export default {
           textStyle: {
             color: this.isDarkMode ? "#fff" : "#333333",
           },
+          itemStyle: {        
+            borderWidth: 0
+          }
         },
         series: seriesData,
       };

pages/ems/base/ReadObjectMngPage.vue

@@ -855,7 +855,6 @@ const myDetail = [
 ];
 </script>
 <style lang="scss" scoped>
-@import '@/assets/scss/common.scss';
 ::v-deep {
 	.tui-grid-layer-state {
 		top: 40px !important;

pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue

@@ -60,17 +60,23 @@
 			</v-col>
 		</v-row>
 		<v-row ref="contents" class="pt-3">
-			<v-col :cols="12" style="height: 100%">
+			<v-col :cols="12" >
 				<v-card class="pb-5">
 					<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 ref="gridParent" class="w100 h100">
+					<div class="px-4" >
+						<div ref="gridParent" class="w100 h100 enrg-effc">
 							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
 								:parentPrgmId="myPrgmId" :columnClickEventFlag="true" @columnClick="columnClick" />
+							<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>
+
 					</div>
+
 				</v-card>
 			</v-col>
 		</v-row>
@@ -92,6 +98,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 +131,7 @@ export default {
 		EnrgEffcEqpmDetailPop,
 		EqpmSelectPop,
 		EnrgEffcGdIdxDetPop,
+		pagination
 	},
 	data() {
 		return {
@@ -149,7 +157,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 +390,7 @@ export default {
 				resKey: 'eqpmKindCodeLists',
 				sendParam: {},
 			});
+
 			if (res.length > 0) {
 				this.selectValueList01 = await res.map(item => {
 					return {
@@ -680,9 +694,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 +756,12 @@ export default {
 				});
 			}
 		},
+		changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			this.search();
+		},
 	},
 };
 

pages/ems/effc/EnrgEffcTotSummPage.vue

@@ -411,15 +411,3 @@ const defaultData = {
   fromDt: Utility.setFormatDate(new Date(), "YYYYMMDD"), // 조회 시작일
 };
 </script>
-<style lang="scss" scoped>
-// @import "@/assets/scss/common.scss";
-
-// .echarts::v-deep > div > canvas:hover {
-//     cursor: pointer;
-// }
-// ::v-deep{
-// 	.echarts:hover > div:nth-child(1){
-// 		cursor:pointer !important;
-// 	}
-// }
-</style>

pages/ems/effc/EnrgUsePlanPage.vue

@@ -819,8 +819,6 @@ const defaultData = {
 };
 </script>
 <style lang="scss" scoped>
-// @import '@/assets/scss/common.scss';
-@import '@/assets/scss/var.scss';
 @each $theme in dark, light {
 	.v-application.#{$theme}-mode {
 		.tui-grid {

pages/ems/effc/TagTrndPage.vue

@@ -1214,7 +1214,6 @@ const defaultData = {
 };
 </script>
 <style lang="scss" scoped>
-@import "@/assets/scss/var.scss";
 
 ::v-deep {
   .datepicker-container {

pages/login/index.vue

@@ -200,8 +200,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '@/assets/scss/var.scss';
-@import '@/assets/scss/mixin.scss';
 
 ::v-deep {
 	.v-avatar {

store/modules/list.js

@@ -943,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',