fixbug ui 20 21

assets/scss/common.scss

@@ -691,43 +691,6 @@ 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"
-          );
-          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,
@@ -773,7 +736,6 @@ a {
 
         &>.v-treeview-node__children {
           &>.v-treeview-node {
-
             &>.v-treeview-node__root {
               &:before {
                 background-color: map-deep-get($config,
@@ -831,6 +793,117 @@ a {
               );
             }
 
+            &>.v-treeview-node--active {
+              &: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__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--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"
+                  );
+                  border-radius: 8px;
+
+                  &:before {
+                    opacity: 0 !important;
+                  }
+
+                  &>.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-node-label-active-color"
+                      );
+                    }
+                  }
+                }
+              }
+            }
+
             &[aria-expanded="true"] {
               & .v-treeview-node__root>.v-treeview-node__content {
                 .v-treeview-node__label {

components/common/Grid.vue

@@ -4,12 +4,12 @@
 		:data="chkGridData"
 		:columns="chkGridColumns"
 		:options="chkGridOptions"
+		@mousedown="onMousedown"
 		@click="startEditing"
 		@editingFinish="editingFinish"
 		@dblclick="dblClick"
 		@mouseover="mouseoverEvent"
 		@mouseout="mouseoutEvent"
-		@mousedown="onMousedown"
 		@focusChange="focusChangeEvt"
 	/>
 </template>
@@ -251,9 +251,11 @@ export default {
 			this.gridInstance.invoke('check', rowData.rowKey, instance);
 		},
 		setSelectionRange(rowKey) {
+			// console.log("------------------DEBUG-------setSelectionRange:", rowKey);
 			const rowDatas = this.gridInstance.invoke('getData');
 			rowDatas.forEach(item => {
 				if (item.rowKey == rowKey) {
+					// console.log("------------------DEBUG-------setSelectionRange---item:", item);
 					this.gridInstance.invoke(
 						'addRowClassName',
 						item.rowKey,
@@ -269,14 +271,11 @@ export default {
 			});
 		},
 		onMousedown(evt) {
-			this.handleSelectedRow(evt);
+			// console.log("------------------DEBUG-------onMousedown:", evt);
+			this.focusChangeEvt(evt);
 		},
 		focusChangeEvt(e) {
-			if(e.rowKey === 0) {
+			// console.log("------------------DEBUG-------focusChangeEvt:", e);
-				this.handleSelectedRow(e);	
-			}
-		},
-		handleSelectedRow(e) {
 			// console.log('focusChangeEvt1...')
 			if (this.preventFocusChangeEvent(e)) {
 				// console.log('prevent focusChangeEvt')
@@ -284,7 +283,7 @@ export default {
 			}
 			// console.log('focusChangeEvt2...')
 			// cell 선택시 row 선택 method
-			if (e.rowKey > -1) {
+			if (e.rowKey >= 0) {
 				this.$emit(
 					'getRowsData',
 					this.gridInstance.invoke('getRow', e.rowKey),
@@ -297,6 +296,7 @@ export default {
 			this.sendSelectedRowData(e.rowKey);
 		},
 		startEditing(e) {
+			// console.log("------------------DEBUG-------startEditing:", e);
 			// console.log('startEditing1...')
 			if (this.preventFocusChangeEvent(e)) {
 				// console.log('prevent startEditing')
@@ -323,6 +323,7 @@ export default {
 			}
 		},
 		async editingFinish(e) {
+			// console.log('------------------DEBUG-------editingFinish:', e);
 			// console.log("Editing END E::", e);
 			// editor 간 이동시 수정되는 문제 수정
 			// e.rowEditingFg: grid의 한 row를 한번에 수정할 시 각각의 cell 마다 click 이벤트가 발생하지 않아 this.editorStartKey값이 제대로 입력 되지 않는 경우를 대비하여 만든 Fg
@@ -684,6 +685,7 @@ export default {
 						? this.gridInstance.invoke('getFocusedCell').rowKey
 						: eventRowKey;
 				var rowData = this.gridInstance.invoke('getRow', rowKey);
+				// console.log('------------------DEBUG-------sendSelectedRowData:', {eventRowKey, rowKey});
 				this.$emit('sendSelectedRowStatInfo', rowData);
 			}
 		},

components/common/PastRsltDatePicker.vue

@@ -9,7 +9,7 @@
 			</label>
 		</v-col>
 		<v-col :cols="label ? textCols : ''">
-			<div class="datepicker-container">
+			<div :class="['datepicker-container', customClass]"  >
 				<v-text-field
 					id="startpicker"
 					ref="startpicker"
@@ -79,6 +79,10 @@ export default {
 			require: false,
 			default: 8,
 		},
+		customClass: {
+			type: String,
+			require: false,
+		},
 	},
 	data() {
 		return {

components/common/modal/FtnPlcFormPop.vue

@@ -280,41 +280,52 @@ export default {
 				modalKey: this.myModalKey,
 				gridKey: this.grid_01,
 				modalDataKey: this.modalDataKey,
-				value: [
+				value: [{ header: '위치정보', name: 'eccNm' }],
-					{
-						align: 'center',
-						width: 30,
-						minWidth: 60,
-						formatter: (props) => {
-							return `<span class="custom-radio"><span class="radio-mark"></span></span>`;
-						}
-					},
-					{ header: '위치정보', name: 'eccNm' }
-				],
 			});
 		},
 		async getGridData() {
-			this.loadGrid = false;
+			// this.loadGrid = false;
 
-			const res = await this.postApiReturn({
+			// const res = await this.postApiReturn({
-				apiKey: 'selectEccBaseInfo',
+			// 	apiKey: 'selectEccBaseInfo',
-				resKey: 'eccBaseInfoData',
+			// 	resKey: 'eccBaseInfoData',
-				sendParam: {
+			// 	sendParam: {
-					blocId: this.myBindingData.blocId,
+			// 		blocId: this.myBindingData.blocId,
-					eqpmYn: '0',
+			// 		eqpmYn: '0',
-					search: this.searchWord,
+			// 		search: this.searchWord,
-				},
+			// 	},
-			});
+			// });
 
-			const setTreeData = await this.setTree({
+			// const setTreeData = await this.setTree({
-				gridKey: this.gridNameTree,
+			// 	gridKey: this.gridNameTree,
-				treeKey: 'ECC_ID',
+			// 	treeKey: 'ECC_ID',
-				value: res.map(item => ({
+			// 	value: res.map(item => ({
+			// 		...item,
+			// 		eccNm: item.eccNm,
+			// 	})),
+			// });
+			
+			//mockdata eccNm
+
+			
+			let res = [
+				{ ECC_ID: 'ECC001', eccNm: '서울 본사', iconShow: false, align: 'center' },
+				{ ECC_ID: 'ECC002', eccNm: '부산 지사', useIcon: false, align: 'center' },
+				{ ECC_ID: 'ECC003', eccNm: '대구 센터', useIcon: false, align: 'center' },
+				{ ECC_ID: 'ECC004', eccNm: '광주 사무소' , useIcon: false, align: 'center'},
+				{ ECC_ID: 'ECC005', eccNm: '인천 물류창고' , useIcon: false, align: 'center'},
+			];
+
+			
+			const setTreeData = {
+				ROOT: res.map(item => ({
 					...item,
 					eccNm: item.eccNm,
-				})),
+				}))
-			});
+			};
 
+			// console.log(res);
+			
 			this.setModalGridData({
 				modalKey: this.myModalKey,
 				gridKey: this.grid_01,

components/pages/ems/EqpmInfo/EqpmConstTab.vue

@@ -96,20 +96,20 @@ export default {
 	watch: {
 		selectedEqpmKindId(val) {
 			if (val) {
-				this.detailList[1].eqpmKindId = val;
+				this.detailList[2].eqpmKindId = val;
 			}
 		},
 		selectedEqpmGrpId(val) {
 			// if(!val){
-			// 	this.detailList[1].eqpmGrpId = '';
+			// 	this.detailList[2].eqpmGrpId = '';
 			// }else{
-			// 	this.detailList[1].eqpmGrpId = val;
+			// 	this.detailList[2].eqpmGrpId = val;
 			// }
 			// if(val){
-			// 	this.detailList[1].eqpmGrpId = val;
+			// 	this.detailList[2].eqpmGrpId = val;
 			// }
 			// else if(val == null || val == ''){
-			// 	this.detailList[1].eqpmGrpId = '';
+			// 	this.detailList[2].eqpmGrpId = '';
 			// }
 		},
 	},
@@ -238,10 +238,10 @@ export default {
 		},
 		async getRowData(data, gridName) {
 			if (data.rowStat === 'I') {
-				this.detailList[1].disabled = false;
+				this.detailList[2].disabled = false;
 				this.detailList[3].disabled = false;
 			} else {
-				this.detailList[1].disabled = true;
+				this.detailList[2].disabled = true;
 				this.detailList[3].disabled = true;
 			}
 
@@ -257,12 +257,12 @@ export default {
 			switch (action) {
 				case 'add':
 					this.$refs[this.gridName].addRow();
-					this.detailList[1].disabled = false;
+					this.detailList[2].disabled = false;
 					this.detailList[3].disabled = false;
 					break;
 
 				case 'remove':
-					this.detailList[1].disabled = true;
+					this.detailList[2].disabled = true;
 					this.detailList[3].disabled = true;
 					this.$refs[this.gridName].removeRow();
 					break;
@@ -358,6 +358,7 @@ const myEqpmConstDetail = [
 	{
 		type: 'SelectBox',
 		label: '대상 유형',
+		disabled: true,
 		cols: 6,
 		class: 'py-3 pr-4',
 		list: 'emMapDivList2',
@@ -370,7 +371,6 @@ const myEqpmConstDetail = [
 		textCols: 12,
 		iconShow: true,
 	},
-	// ==================
 	{
 		type: 'EgrpPysclQtyPop',
 		labelContent: '물리량',
@@ -382,7 +382,7 @@ const myEqpmConstDetail = [
 			pysclQtyNm: 'pysclQtyNm',
 		},
 		valueNm: 'objId',
-		disabled: true,
+		disabled: false,
 		required: true,
 		openMode: 'CONST',
 		cols: 6,
@@ -413,7 +413,6 @@ const myEqpmConstDetail = [
 		textCols: 12,
 		iconShow: true,
 	},
-	// ------------
 	{
 		type: 'InputText',
 		label: '물리량 값',

components/pages/ems/EqpmInfo/EqpmIaoTab.vue

@@ -18,7 +18,7 @@
 				:innerTabGridInfo="innerTabGridInfo"
 			/>
 		</div>
-		<div style="min-height: calc(100vh - 900px);" class="mt-4">
+		<div style="min-height: calc(100vh - 900px);">
 			<component
 				:is="'Form'"
 				:parentPrgmId="parentPrgmId"
@@ -108,24 +108,18 @@ export default {
 	},
 	watch: {
 		selectedObjId(val) {
+			// console.log('selectedObjId : ', val);
 			if (val === 'TAG') {
-				// this.detailList[1].class = 'py-3 pl-4 pb-0';
-				this.detailList[1].class = 'py-3 d-none';
 				this.detailList[2].class = 'py-3 d-none';
 				this.detailList[3].class = 'py-3 pl-4 pt-1 d-none';
-
 				this.detailList[4].class = 'py-3';
-				this.detailList[5].class = 'py-3 pl-4';
+				this.detailList[5].class = 'py-3';
-				this.detailList[6].class = 'py-3 pl-4 pt-0';
 			} else {
 				// }else if(val==="READ_PLC"){
-				this.detailList[1].class = 'py-3 pl-4';
-				this.detailList[2].class = 'py-3';
-				this.detailList[3].class = 'py-3 pl-4 pt-0';
-
-				this.detailList[4].class = 'py-3 d-none';
 				this.detailList[5].class = 'py-3 d-none';
-				this.detailList[6].class = 'py-3 d-none';
+				this.detailList[4].class = 'py-3 d-none';
+				this.detailList[3].class = 'py-3 pl-4 pt-1';
+				this.detailList[2].class = 'py-3';
 			}
 		},
 		selectedCalcFg(val) {
@@ -288,13 +282,13 @@ 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;
 				this.detailList[5].disabled = true;
@@ -312,7 +306,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;
 					this.detailList[5].disabled = false;
@@ -321,7 +315,7 @@ export default {
 				case 'remove':
 					this.$refs[this.gridName].removeRow();
 					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;
 					this.detailList[5].disabled = true;
@@ -442,10 +436,10 @@ const myEqpmIaoDetail = [
 		type: 'ReadPlcPop',
 		label: '대상 항목',
 		valueNm: 'objId',
-		cols: 6,
-		class: 'py-3 pl-4 pb-0',
-		required: true,
 		disabled: true,
+		cols: 6,
+		class: 'py-3 pl-4',
+		required: true,
 		bindNm: 'objNm',
 		textCols: 12,
 		labelCols: 12,
@@ -466,12 +460,11 @@ const myEqpmIaoDetail = [
 		readonly: true,
 		disabled: true,
 		cols: 6,
-		class: 'py-3 pl-4 pt-0',
+		class: 'py-3 pl-4 pt-1',
 		textCols: 12,
 		labelCols: 12,
 		iconShow: true
 	},
-// ============
 	{
 		type: 'EvtObjPop',
 		labelContent: '대상 항목',
@@ -481,24 +474,16 @@ const myEqpmIaoDetail = [
 		disabled: true,
 		required: true,
 		cols: 6,
-		class: 'py-3 pl-4 d-none',
+		class: 'py-3 d-none',
 		disableContent: true,
 		textCols: 12,
 		labelCols: 12,
 		iconShow: true
 	},
-	{
-		type: 'Label',
-		cols: 6,
-		class: 'py-3 d-none',
-		disabled: true,
-		textCols: 12,
-		labelCols: 12,
-	},
 	{
 		type: 'InputText',
 		cols: 6,
-		class: 'py-3 pl-4 d-none',
+		class: 'py-3 d-none',
 		valueNm: 'objNm',
 		readonly: true,
 		disabled: true,
@@ -506,7 +491,6 @@ const myEqpmIaoDetail = [
 		labelCols: 12,
 		iconShow: true
 	},
-	// --------------------------------------------
 	{
 		type: 'SelectBox',
 		label: '에너지원',

components/pages/ems/TagInfo/TagAddInfoTab.vue

@@ -107,8 +107,7 @@ export default {
 				header: {
 					height: 38,
 				},
-				rowHeight: 22,
+
-				minRowHeight: 22,
 				selectionUnit: 'row',
 				editingEvent: 'click',
 			};
@@ -269,7 +268,7 @@ export default {
 				{
 					header: 'Data 구분',
 					name: 'addInfoDataKind',
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						let retVal = '';
 						const newValue = addInfoDataKindList.filter(

nuxt.config.js

@@ -57,7 +57,7 @@ module.exports = {
 	],
 
 	// Modules: https://go.nuxtjs.dev/config-modules
-	modules: ['@nuxtjs/axios', '@nuxtjs/dayjs', '@nuxtjs/style-resources' ],
+	modules: ['@nuxtjs/axios', '@nuxtjs/dayjs', '@nuxtjs/style-resources','@nuxtjs/google-fonts'],
 	styleResources: {
 		scss: ['./assets/scss/*.scss'],
 	},

pages/comm/auth/MenuRoleMngPage.vue

@@ -398,11 +398,14 @@ export default {
 
 			const myTreeColumns = [
 				{
+					header: '',
+					name: '',
 					align: 'center',
 					width: 30,
-					minWidth: 60,
 					formatter: (props) => {
-						return `<span class="custom-radio"><span class="radio-mark"></span></span>`;
+						return `<span class="custom-radio">
+									<span class="radio-mark"></span>
+								</span>`;
 					}
 				},
 				{
@@ -418,11 +421,14 @@ export default {
 			];
 			const myTreeColumns2 = [
 				{
+					header: '',
+					name: '',
 					align: 'center',
 					width: 30,
-					minWidth: 60,
 					formatter: (props) => {
-						return `<span class="custom-radio"><span class="radio-mark"></span></span>`;
+						return `<span class="custom-radio">
+									<span class="radio-mark"></span>
+								</span>`;
 					}
 				},
 				{ header: '역할ID', name: 'roleId', hidden: true },
@@ -668,6 +674,8 @@ export default {
 		},
 
 		getUnAsgnRowData(data) {
+			console.log("------------------DEBUG-------getUnAsgnRowData:", data);
+
 			const getRowData = data;
 			this.leftSelectRowData = Object.assign({}, getRowData);
 		},

pages/comm/base/PrgmMngPage.vue

@@ -1,6 +1,5 @@
 <template>
 	<div class="l-layout">
-		<CommonPageTitle />
 		<!-- 조회조견 -->
 		<v-row ref="searchFilter">
 			<v-col :cols="12">
@@ -315,6 +314,7 @@ export default {
 			});
 		},
 		async getRowData(data, gridName) {
+			// console.log("-----------------------DEBUG--getRowData--------------", {
 			// 	gridKey: gridName,
 			// 	gridSelect: true,
 			// 	rowGridSelectKey: data.rowKey,

pages/ems/base/EqpmKindPage.vue

@@ -359,7 +359,7 @@ const myDetail = [
 		label: '설비종류 ID',
 		valueNm: 'eqpmKindId',
 		cols: 6,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 pt-1',
 		iconShow: true,
 		required: false,
 		readonly: true,
@@ -373,7 +373,7 @@ const myDetail = [
 		valueNm: 'eqpmKindNm',
 		disabled: false,
 		cols: 6,
-		class: 'py-2 pl-4',
+		class: 'py-2 pl-4 pt-1',
 		iconShow: true,
 		required: true,
 		labelCols: 12,

pages/ems/base/EquipmentGroupMngPage.vue

@@ -461,7 +461,7 @@ const myDetail = [
 		valueNm: 'eqpmGrpId',
 		disabled: true,
 		cols: 6,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 pt-1',
 		required: false,
 		iconShow: true,
 		labelCols: 12,
@@ -474,7 +474,7 @@ const myDetail = [
 		valueNm: 'eqpmGrpNm',
 		disabled: false,
 		cols: 6,
-		class: 'py-2 pl-4',
+		class: 'py-2 pl-4 pt-1',
 		required: true,
 		iconShow: true,
 		labelCols: 12,

pages/ems/base/EquipmentMasterMngPage.vue

@@ -969,7 +969,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-3 pr-4 pb-2',
+		class: 'py-3 pr-4',
 	},
 	{
 		type: 'CheckBox',

pages/ems/base/PastRsltDataReadPage.vue

@@ -16,7 +16,8 @@
 						</v-col>
 						<v-col :cols="3">
 							<!-- 대상일 -->
-							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'조회기간'" :textCols="12" />
+							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'조회기간'" :textCols="12"
+								customClass="datepicker-large" />
 						</v-col>
 						<v-col :cols="3" class="d-flex align-end justify-end text-right">
 							<BtnExcelDownload class="mr-1" :parentPrgmId="myPrgmId" :gridName="gridName" type="primary"
@@ -391,6 +392,7 @@ export default {
 					resKey: 'pastRslPageTotal',
 					sendParam: sendParams
 				});
+
 				this.totalCount = res2[0].totalcount;
 
 				this.setGridData({

pages/ems/base/ReadResultCloseMngPage.vue

@@ -282,6 +282,7 @@ export default {
             mgnf: item.mgnf || 0,
           })),
         });
+        // console.log('--------------DEBUG-----res-------', res);
       }
       this.setPageData({ isFind: false });
       this.$nextTick(() => {

pages/ems/base/TagMngPage.vue

@@ -1,61 +1,43 @@
 <template>
 	<div 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="3">
 							<!-- 사업장 -->
-							<component
+							<component :is="'SelectBlocMstr'" ref="SelectBlocMstr" :parentPrgmId="myPrgmId"
-								:is="'SelectBlocMstr'"
+								:textCols="12" customClass="select-large" />
-								ref="SelectBlocMstr"
-								:parentPrgmId="myPrgmId"
-							/>
 						</v-col>
 						<v-col :cols="3">
-							<component
+							<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'측정 Data 유형'"
-								:is="'selectCodeList'"
+								dataKey="searchReadDataType" :sendParam="{ commGrpCd: 'EM_READ_DATA_TYPE', useFg: '1' }"
-								:parentPrgmId="myPrgmId"
+								:addAll="true" :textCols="12" customClass="select-large" />
-								:label="'측정 Data 유형'"
-								dataKey="searchReadDataType"
-								:sendParam="{ commGrpCd: 'EM_READ_DATA_TYPE', useFg: '1' }"
-								:addAll="true"
-							/>
 						</v-col>
 						<v-col :cols="3">
-							<component
+							<component :is="'SelectReadObj'" :parentPrgmId="myPrgmId" :label="'측정대상'"
-								:is="'SelectReadObj'"
+								dataKey="searchReadObj" :sendParam="{ useFg: '1' }" :labelCols="12" :textCols="12"
-								:parentPrgmId="myPrgmId"
+								:addAll="true" customClass="select-large" />
-								:label="'측정대상'"
-								dataKey="searchReadObj"
-								:sendParam="{ useFg: '1' }"
-								:addAll="true"
-							/>
-						</v-col>
-						<v-col :cols="3" class="text-right">
-							<BtnSearch @click="search" />
 						</v-col>
+
 					</v-row>
-					<v-row align="center" no-gutters>
+					<v-row align="end" no-gutters>
 						<v-col :cols="3">
-							<component
+							<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'사용여부'" dataKey="useFg"
-								:is="'selectCodeList'"
+								:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }" :addAll="true" :textCols="12"
-								:parentPrgmId="myPrgmId"
+								customClass="select-large" />
-								:label="'사용여부'"
-								dataKey="useFg"
-								:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
-								:addAll="true"
-							/>
 						</v-col>
-						<v-col :cols="6">
+						<v-col :cols="3">
-							<InputText
+							<InputText :parentPrgmId="myPrgmId" label="TAG ID" valueNm="tagId" :labelCols="12"
-								:parentPrgmId="myPrgmId"
+								:textCols="12" :searchOption="true" customClass="input-large" />
-								label="TAG명"
+						</v-col>
-								valueNm="tagNm"
+						<v-col :cols="3">
-								:labelCols="2"
+							<InputText :parentPrgmId="myPrgmId" label="TAG명" valueNm="tagNm" :labelCols="12"
-								:textCols="9"
+								:textCols="12" :searchOption="true" customClass="input-large" />
-								:searchOption="true"
+						</v-col>
-							/>
+						<v-col :cols="3" class="d-flex align-end justify-end text-right">
+							<BtnSearch @click="search" size="large" />
 						</v-col>
 					</v-row>
 				</v-card>
@@ -66,63 +48,33 @@
 				<v-card class="pb-5">
 					<v-card-title class="d-flex justify-space-between align-end">
 						<span class="tit ft-size_20 ft-weight_600">TAG 정보</span>
-						<Buttons
+						<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :detailList="detailList"
-							:parentPrgmId="myPrgmId"
+							:btnActionsFnc="btnActions" />
-							:bindingData="gridName"
-							:detailList="detailList"
-							:btnActionsFnc="btnActions"
-						/>
 					</v-card-title>
 					<v-card-actions>
-						<div
+						<div ref="gridParent" class="w100" style="height: calc(100vh - 400px)">
-							ref="gridParent"
+							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
-							class="w100"
+								:parentPrgmId="myPrgmId" @getRowsData="getRowData"
-							style="height: calc(100vh - 360px)"
+								@sendSelectedRowStatInfo="getSelectedRowStatInfo" :selectedRowDataWatchFlag="true" />
-						>
-							<component
-								:ref="gridName"
-								:is="loadGrid ? 'Grid' : null"
-								:gridName="gridName"
-								:parentPrgmId="myPrgmId"
-								@getRowsData="getRowData"
-								@sendSelectedRowStatInfo="getSelectedRowStatInfo"
-								:selectedRowDataWatchFlag="true"
-							/>
 						</div>
 					</v-card-actions>
 				</v-card>
 			</v-col>
-			<v-col :cols="7" class="h100">
+			<v-col :cols="7" class="">
 				<v-card class="pb-5">
 					<v-card-title>TAG 상세</v-card-title>
 					<div class="px-5" style="height:calc(100% - 70px)">
 						<v-tabs v-model="tab">
-							<v-tab
+							<v-tab v-for="item in items" :key="item.id" :disabled="item.disabledFlag">
-								v-for="item in items"
-								:key="item.id"
-								:disabled="item.disabledFlag"
-							>
 								{{ item.name }}
 							</v-tab>
 						</v-tabs>
-						<v-tabs-items
+						<v-tabs-items v-model="tab" style="height: calc(100% - 65px);" class="py-6">
-							v-model="tab"
-							style="height: calc(100% - 65px);"
-							class="py-6"
-						>
 							<v-tab-item v-for="(item, idx) in items" :key="item.id">
-								<component
+								<component v-if="item.id == 'tagBaseInfoTab'" :is="'Form'" :parentPrgmId="myPrgmId"
-									v-if="item.id == 'tagBaseInfoTab'"
+									:detailList="detailList" @gridEditingFinish="gridEditingFinish" />
-									:is="'Form'"
+								<TagAddInfoTab v-if="item.id == 'tagAddInfoTab'" :parentPrgmId="myPrgmId"
-									:parentPrgmId="myPrgmId"
+									:innerTabGridInfo="{ tab, idx }" />
-									:detailList="detailList"
-									@gridEditingFinish="gridEditingFinish"
-								/>
-								<TagAddInfoTab
-									v-if="item.id == 'tagAddInfoTab'"
-									:parentPrgmId="myPrgmId"
-									:innerTabGridInfo="{ tab, idx }"
-								/>
 							</v-tab-item>
 						</v-tabs-items>
 					</div>
@@ -134,6 +86,7 @@
 <script>
 import { mapState, mapMutations, mapActions } from 'vuex';
 import mixinGlobal from '@/mixin/global.js';
+import { resize } from '@/mixin/resize.js';
 import BtnSearch from '~/components/common/button/BtnSearch';
 import Buttons from '~/components/common/button/Buttons';
 import SelectBlocMstr from '@/components/common/select/SelectBlocMstr';
@@ -149,7 +102,7 @@ let myTitle;
 // const myPrgmId = "PRG0051";
 let myPrgmId;
 export default {
-	mixins: [mixinGlobal],
+	mixins: [mixinGlobal, resize],
 	async asyncData(context) {
 		const myState = context.store.state;
 		// context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
@@ -219,15 +172,19 @@ export default {
 		},
 		chkBlocId() {
 			this.setPageData({ isFind: true });
+			// this.search();
 		},
 		chkReadDataType() {
 			this.setPageData({ isFind: true });
+			// this.search();
 		},
 		chkReadObj() {
 			this.setPageData({ isFind: true });
+			// this.search();
 		},
 		chkUseFg() {
 			this.setPageData({ isFind: true });
+			// this.search();
 		},
 	},
 	async beforeCreate() {
@@ -297,12 +254,16 @@ export default {
 			this.gridInit();
 		},
 		gridInit() {
-			const gridHeight = this.$refs.gridParent.offsetHeight - 30;
+			const gridHeight = this.$refs.gridParent.offsetHeight - 16;
 
 			const myOptions = {
 				columnOptions: {
 					resizable: true,
 				},
+				scrollX: true,
+				header: {
+					height: 38,
+				},
 			};
 			this.setGridOption({
 				gridKey: this.gridName,
@@ -316,21 +277,21 @@ export default {
 					header: 'TAG ID',
 					name: 'tagId',
 					width: 'auto',
-					minWidth: 280,
+					minWidth: 340,
 					align: 'left',
 				},
 				{
 					header: 'TAG 명',
 					name: 'tagNm',
 					width: 'auto',
-					minWidth: 140,
+					minWidth: 220,
 					align: 'left',
 				},
 				{
 					header: '측정 값 유형',
 					name: 'readDataTypeCd',
-					width: 100,
+					width: 90,
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						let retVal = '';
 						const newValue = _this.pageData.readDataTypeCdList.filter(
@@ -346,7 +307,7 @@ export default {
 					header: '측정대상',
 					name: 'readObjId',
 					width: 100,
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						let retVal = '';
 						const newValue = _this.pageData.readObjList.filter(
@@ -363,7 +324,7 @@ export default {
 					header: '단위',
 					name: 'unitCd',
 					width: 80,
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						let retVal = '';
 						const newValue = _this.pageData.unitCdList.filter(
@@ -493,6 +454,7 @@ export default {
 						readObjId: this.pageData.searchReadObj,
 						useFg: this.pageData.useFg,
 						tagNmLike: this.pageData.tagNm,
+						tagIdLike: this.pageData.tagId,
 					},
 				});
 			} else {
@@ -751,7 +713,8 @@ export default {
 							});
 
 							this.$nextTick(() => {
-								this.setPageData({ isFind: true });
+								// this.setPageData({ isFind: true });
+								this.search();
 							});
 						}
 					} else {
@@ -818,6 +781,7 @@ function isValidAlrmVal(obj) {
 
 const defaultData = {
 	/* 검색옵션 */
+	tagId: '',
 	tagNm: '',
 	blocId: '',
 	blocMstrList: [],
@@ -907,30 +871,39 @@ const myDetail = [
 		label: 'TAG ID',
 		valueNm: 'tagId',
 		disabled: false,
+		iconShow: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4',
 		required: false,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'InputText',
 		label: 'TAG 명',
 		valueNm: 'tagNm',
 		disabled: false,
+		iconShow: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pl-4',
 		required: false,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'SelectBox',
 		label: '측정 값 유형',
 		valueNm: 'readDataTypeCd',
 		disabled: false,
+		iconShow: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4 pt-5',
 		list: 'readDataTypeCdList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
 		required: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'SelectBox',
@@ -938,11 +911,14 @@ const myDetail = [
 		valueNm: 'readObjId',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pl-4 pt-5',
 		list: 'readObjList',
 		itemText: 'readObjNm',
 		itemValue: 'readObjId',
 		required: true,
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'InputText',
@@ -950,8 +926,11 @@ const myDetail = [
 		valueNm: 'mgnf',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4 pt-5',
 		required: true,
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'SelectBox',
@@ -959,10 +938,13 @@ const myDetail = [
 		valueNm: 'unitCd',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pl-4 pt-5',
 		list: 'unitCdList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'InputText',
@@ -970,7 +952,10 @@ const myDetail = [
 		valueNm: 'rangMin',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4 pt-5',
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'InputText',
@@ -978,7 +963,10 @@ const myDetail = [
 		valueNm: 'rangMax',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pl-4 pt-5',
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'InputText',
@@ -986,7 +974,10 @@ const myDetail = [
 		valueNm: 'alrmHihi',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4 pt-5',
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'InputText',
@@ -994,7 +985,10 @@ const myDetail = [
 		valueNm: 'alrmHi',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pl-4 pt-5',
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'InputText',
@@ -1002,7 +996,10 @@ const myDetail = [
 		valueNm: 'alrmLo',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4 pt-5',
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'InputText',
@@ -1010,7 +1007,10 @@ const myDetail = [
 		valueNm: 'alrmLolo',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pl-4 pt-5',
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'CheckBox',
@@ -1018,8 +1018,11 @@ const myDetail = [
 		valueNm: 'totFg',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4 pt-5',
 		value: { '1': true, '0': false },
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'CheckBox',
@@ -1027,9 +1030,12 @@ const myDetail = [
 		valueNm: 'useFg',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pl-4 pt-5',
 		value: { '1': true, '0': false },
 		required: false,
+		iconShow: true,
+		labelCols: 12,
+		textCols: 12,
 	},
 	{
 		type: 'SelectBox',
@@ -1056,4 +1062,4 @@ const myDetail = [
 		class: 'py-2',
 	},
 ];
-</script>
+</script>

pages/ems/base/TagMngPage_Pagination.vue

@@ -69,7 +69,7 @@
 					</div>
 				</v-card>
 			</v-col>
-			<v-col :cols="7" class="h100">
+			<v-col :cols="7" class="">
 				<v-card class="pb-5">
 					<v-card-title>TAG 상세</v-card-title>
 					<div class="px-5" style="height:calc(100% - 70px)">

pages/ems/effc/EnrgMapPage.vue

@@ -245,6 +245,7 @@ export default {
 
 			
 			this.setChartOption({ chartKey: this.chartName, value: chartOption });
+			// console.log("----DEBUG chart-options-------", { chartOption });
 			this.$nextTick(() => {
 				this.loadChart = true;
 			});

pages/ems/effc/EnrgReptMngPage.vue

@@ -264,6 +264,9 @@ export default {
 	},
 	created() { },
 	async mounted() {
+		// console.log('----DEBUG---');
+		// await this.initTest();
+		// End Debug Test---
 		await this.init();
 		this.initedFlag = true;
 	},
@@ -284,7 +287,7 @@ export default {
 		}),
 		async initTest() {
 			// debug test
-			// console.log('----DEBUG init pages----');
+			console.log('----DEBUG init pages----');
 			const seriesName1 = ['B01. 냉동기전력량', ' B01.COP'];
 			const seriesName2 = [
 				'UT_HT_CH101:냉동기전혁당', 'UT_HT_CH102:냉동기전력량', 'UT_HT_CH201:냉동기전력당',

plugins/gridUtility.js

@@ -253,8 +253,9 @@ export class NewCustomRenderer {
 		} else {
 			el.type = 'text';
 
-			$(el).addClass('tui-grid-cell-content');
+			$(el).addClass('tui-grid-cell-content w100');
 			$(el).css('text-align', 'center');
+			$(el).css('border', '0');
 		}
 		this.render(props);
 		if(!this.disabled){
@@ -314,6 +315,8 @@ export class NewCustomEditor {
 		this.rowKey = rowKey;
 		this.columnInfo = columnInfo;
 		this.grid = grid;
+		const divEl = document.createElement('div');
+		$(divEl).css('text-align', 'center');
 		const el = document.createElement('input');
 		if (
 			props.grid.store.data.rawData[props.rowKey].addInfoDataKind == 'FG'
@@ -363,16 +366,20 @@ export class NewCustomEditor {
 			}
 			$(el).addClass('tui-grid-content-text');
 		}
+
+		divEl.append(el);
 		
 		// console.log('props: %o', props);
 		// console.log('el: %o', el);
 		this.el = el;
+		this.divEl = divEl;
 
 		this.render(props);
+
 	}
 
 	getElement() {
-		return this.el;
+		return this.divEl;
 	}
 
 	getValue() {
@@ -389,9 +396,9 @@ export class NewCustomEditor {
 	}
 
 	mounted() {
-		if (this.el.type == 'checkbox') {
+		// if (this.el.type == 'checkbox') {
-			$(this.el.parentElement).css('text-align', 'center');
+		// 	$(this.el.parentElement).css('text-align', 'center');
-		}
+		// }
 		this.el.select();
 	}
 }