update code fix bug and revert screen 2

pages/ems/base/AddInfoMngPage.vue

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

pages/ems/effc/EnrgUsePlanPage.vue

@@ -8,16 +8,9 @@
 						<v-col :cols="2.5">
 							<DatePicker :parentPrgmId="myPrgmId" :label="'조회연도'" />
 						</v-col>
-						<v-col :cols="3">
+						<v-col :cols="2.5">
-							<component
+							<component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue01" :itemList="selectValueList01"
-								:is="'SelectBox'"
+								:label="'FAB'" @update:propsValue="selectValue01 = $event" :iconShow="false" customClass="select-large" />
-								ref="SelectBox1"
-								:propsValue="selectValue01"
-								:itemList="selectValueList01"
-								:label="'FAB'"
-								@update:propsValue="selectValue01 = $event"
-								customClass="select-large"
-							/>
 						</v-col>
 						<v-col :cols="2.5">
 							<component :is="'SelectBox'" ref="SelectBox2" :propsValue="selectValue02" :itemList="selectValueList02"
@@ -51,10 +44,12 @@
 				</v-card>
 			</v-col>
 		</v-row>
+
+
 	</div>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions, mapMutations } from 'vuex';
 import mixinGlobal from '@/mixin/global.js';
 import { resize } from '@/mixin/resize.js';
 import SelectBox from '@/components/common/select/SelectBox';
@@ -111,6 +106,9 @@ export default {
 			fromDt: new Date().getFullYear(),
 			rowKey: null,
 			edtingFinishFlag: 'Y',
+			dataPathMock: {
+				// "grid01": {}
+			},
 			// gridName: 'rowGrid',
 		};
 	},
@@ -168,8 +166,12 @@ export default {
 			defaultData: defaultData,
 		});
 	},
-	created() {},
+	created() { },
 	async mounted() {
+		// -------
+		// this.initTest();
+		// return;
+		// ========End test===========
 		await this.init();
 		this.initedFlag = true;
 	},
@@ -182,6 +184,122 @@ export default {
 			getBlocMstrList: 'modules/search/getBlocMstrList',
 			getAddInfoList: 'modules/search/getAddInfoList',
 		}),
+		...mapMutations({
+			setPageData: 'setPageData',
+		}),
+		initTest() {
+			let _this = this;
+			// _this.setPageData({ popupDialogFg: true });
+			
+			class MockCustumButton {
+				constructor(props) {
+					const { grid, rowKey, columnInfo } = props;
+					const value = columnInfo.renderer.options.value;
+					
+					const elDiv = document.createElement('div');
+					elDiv.innerHTML = `<span>${value}</span>`;
+					$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
+					const el = document.createElement('button');
+					$(el).addClass('edit-btn blue--text');
+					el.innerText = 'Edit';
+
+					el.addEventListener('click', function (event) {
+						// console.log("------DEBUG----_this:", _this);
+						// _this.setPageData({ eqpmNm: selectedGridData[0]?.eqpmNm });
+						_this.setPageData({ popupDialogFg: true });
+					});
+
+					elDiv.appendChild(el);
+					this.elDiv = elDiv;
+				}
+
+				getElement() {
+					return this.elDiv;
+				}
+			}
+			const mockData = {
+				column: [
+					{ header: 'No', name: 'rowNum', align: 'center', width: 40 },
+					{ header: 'FAB', name: 'fab', align: 'left', width: 80 },
+					{ header: '설비 그룹', name: 'eqpmGrpNm', align: 'left', minWidth: 150 },
+					// {
+					// 	header: '설비명', name: 'eqpmNm', align: 'left', minWidth: 150,
+					// 	formatter: ({ value, row }) => {
+					// 		return `
+					// 				<div class="d-flex justify-space-between">
+					// 					<span>${value}</span>
+					// 					<button class="edit-btn blue--text" data-row='${JSON.stringify(row)}'>Edit</button
+					// 				</div>
+					// 			`;
+					// 	}
+					// },
+					{
+						header: '설비명',
+						name: 'eqpmNm',
+						width: 70,
+						align: 'left',
+						minWidth: 150,
+						renderer: {
+							type: MockCustumButton,
+							options: {
+								value: '계획수정',
+							},
+						},
+					},
+					{
+						header: '구분', name: 'gubun', align: 'left', width: 80,
+						formatter({ value }) {
+							let retVal = '';
+							if (value == '1RSLT') {
+								retVal = '전년실적';
+							} else if (value == '2PLAN') {
+								retVal = '계획';
+							} else {
+								retVal = value;
+							}
+							return retVal;
+						},
+					},
+
+					{ header: '1월', name: 'jan', align: 'right', width: 80 },
+					{ header: '2월', name: 'feb', align: 'right', width: 80 },
+					{ header: '3월', name: 'mar', align: 'right', width: 80 },
+					{ header: '4월', name: 'apr', align: 'right', width: 80 },
+					{ header: '5월', name: 'may', align: 'right', width: 80 },
+					{ header: '6월', name: 'jun', align: 'right', width: 80 },
+					{ header: '7월', name: 'jul', align: 'right', width: 80 },
+					{ header: '8월', name: 'aug', align: 'right', width: 80 },
+					{ header: '9월', name: 'sep', align: 'right', width: 80 },
+					{ header: '10월', name: 'oct', align: 'right', width: 80 },
+					{ header: '11월', name: 'nov', align: 'right', width: 80 },
+					{ header: '12월', name: 'dec', align: 'right', width: 80 }
+				],
+				data: dataPathDataExample,
+				defaultRow: dataPathDataExample,
+				option: {
+					columnOptions: {
+						resizable: true,
+					},
+					header: {
+						height: 65,
+						complexColumns: [
+							{
+								header: '2025 년',
+								name: 'yyyyCol',
+								childNames: [
+									'jan', 'feb', 'mar', 'apr', 'may', 'jun',
+									'jul', 'aug', 'sep', 'oct', 'nov', 'dec'
+								],
+							},
+						],
+					}
+				}
+			};
+			this.dataPathMock[this.gridName] = mockData;
+			this.$nextTick(() => {
+				this.loadGrid = true;
+			});
+		},
 		async init() {
 			await this.getFab();
 			await this.getEqpmKind();
@@ -300,53 +418,25 @@ export default {
 
 			class CustumButton {
 				constructor(props) {
-					// v-btn v-btn--is-elevated v-btn--has-bg theme--dark v-size--default
-					const el = document.createElement('button');
 					const { grid, rowKey, columnInfo } = props;
 
-					$(el).addClass('tui-grid-cell-content');
+					const gridData = grid.store.data.rawData;
-					// $(el).css('text-align', 'center');
+					const value = gridData[rowKey][columnInfo.name];
-					el.classList.add('v-btn');
-					// el.style.width = '80%';
-					// el.style.height = '80%';
-					// el.style.boxShadow = '0px 0px 0px 2px #cbced6';
-					// el.style.background = 'linear-gradient(to bottom, #242940 5%, #476e9e 100%)';
-					// el.style.backgroundColor = '#144985';
-					el.style.borderRadius = '7px';
-					el.style.border = '1px solid #4e6096';
-					// el.style.display = 'inline-block';
-					// el.style.cursor = 'pointer';
-					el.style.color = '#ffffff';
-					// el.style.fontFamily = 'Arial';
-					el.style.padding = '6% 3%';
 
-					// el.style.textDecoration = 'none';
-					// el.style.textShadow = '0px 1px 0px #283966';
-
-					el.innerText = columnInfo.renderer.options.value;
-					this.el = el;
 					this.disabled = columnInfo.renderer.options.disabled || false;
+					const elDiv = document.createElement('div');
+					elDiv.innerHTML = `<span>${value}</span>`;
+					$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
+					const el2 = document.createElement('button');
+					$(el2).addClass('edit-btn blue--text');
+					el2.innerText = 'Edit';
+					elDiv.appendChild(el2);
+
+					this.el = elDiv;
 
 					if (!this.disabled) {
-						// hover 기능 구현
-						this.el.addEventListener('mouseover', function(event) {
-							// console.log('darkModeFg', _this.darkModeFg);
-							// console.log('event',event.fromElement);
-							// console.log('event',document.defaultView.getComputedStyle(el).getPropertyValue('background-color'));
-							// rgb(85, 130, 220) // light
-							// el.style.backgroundColor = '#26578F';	// rgb(20, 73, 133) // dark
-							// let btnColor = _this.darkModeFg? {mouseOver: '#26578F', mouseOut: '#144985'} : {mouseOver: 'rgb(85, 130, 220)', mouseOut: 'rgb(71, 119, 217)'};
-							// el.style.backgroundColor = btnColor['mouseOver'];
-						});
-						this.el.addEventListener('mouseout', function(event) {
-							// rgb(71, 119, 217) // light
-							// el.style.backgroundColor = '#144985'; // dark
-							// console.log('event',event.fromElement);
-							// let btnColor = _this.darkModeFg? {mouseOver: '#26578F', mouseOut: '#144985'} : {mouseOver: 'rgb(85, 130, 220)', mouseOut: 'rgb(71, 119, 217)'};
-							// el.style.backgroundColor = btnColor['mouseOut'];
-						});
 						// click 이벤트
-						this.el.addEventListener('click', function(event) {
+						el2.addEventListener('click', function (event) {
 							let gridData = grid.store.data.rawData;
 							let rowNum = gridData[rowKey].rowNum;
 							let selectedGridData = gridData.filter(item => {
@@ -852,18 +942,110 @@ const defaultData = {
 		},
 	},
 };
+
+const dataPathDataExample = [
+	{
+		rowNum: 1,
+		fab: 'B01',
+		eqpmGrpNm: '방송기술운',
+		eqpmNm: 'U/T_LT_CH101',
+		gubun: '전력량',
+		jan: 110000,
+		feb: 112000,
+		mar: 115000,
+		apr: 117000,
+		may: 120000,
+		jun: 118000,
+		jul: 119000,
+		aug: 121000,
+		sep: 122000,
+		oct: 123000,
+		nov: 124000,
+		dec: 125000
+	},
+	{
+		rowNum: 2,
+		fab: 'B02',
+		eqpmGrpNm: '방송기술운',
+		eqpmNm: 'U/T_LT_CH102',
+		gubun: '전력량',
+		jan: 81000,
+		feb: 82000,
+		mar: 83000,
+		apr: 84000,
+		may: 85000,
+		jun: 86000,
+		jul: 87000,
+		aug: 88000,
+		sep: 89000,
+		oct: 90000,
+		nov: 91000,
+		dec: 92000
+	},
+	{
+		rowNum: 3, fab: 'C01', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH124', gubun: '수도량',
+		jan: 106178, feb: 104740, mar: 92283, apr: 116081, may: 98945, jun: 126579,
+		jul: 90690, aug: 124243, sep: 97524, oct: 84072, nov: 88160, dec: 118183
+	},
+	{
+		rowNum: 4, fab: 'B01', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH103', gubun: '가스량',
+		jan: 80442, feb: 102867, mar: 114939, apr: 106335, may: 81743, jun: 83711,
+		jul: 86114, aug: 97432, sep: 84146, oct: 84775, nov: 117921, dec: 119417
+	},
+	{
+		rowNum: 5, fab: 'B01', eqpmGrpNm: '설비운영팀', eqpmNm: 'U/T_LT_CH156', gubun: '전력량',
+		jan: 90341, feb: 94072, mar: 122754, apr: 85471, may: 90813, jun: 116831,
+		jul: 90856, aug: 109437, sep: 94029, oct: 96075, nov: 127067, dec: 102503
+	},
+	{
+		rowNum: 6, fab: 'B03', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH183', gubun: '가스량',
+		jan: 104163, feb: 107012, mar: 104631, apr: 83055, may: 106311, jun: 117306,
+		jul: 86434, aug: 117087, sep: 118414, oct: 91499, nov: 93829, dec: 94192
+	},
+	{
+		rowNum: 7, fab: 'C01', eqpmGrpNm: '전력관리부', eqpmNm: 'U/T_LT_CH158', gubun: '가스량',
+		jan: 84821, feb: 128234, mar: 116883, apr: 116718, may: 114738, jun: 88297,
+		jul: 93840, aug: 84700, sep: 98360, oct: 87021, nov: 113098, dec: 94734
+	},
+	{
+		rowNum: 8, fab: 'B02', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH179', gubun: '가스량',
+		jan: 128714, feb: 88797, mar: 124808, apr: 109283, may: 113141, jun: 82873,
+		jul: 114993, aug: 129108, sep: 100885, oct: 125730, nov: 92127, dec: 122286
+	},
+	{
+		rowNum: 9, fab: 'C01', eqpmGrpNm: '전력관리부', eqpmNm: 'U/T_LT_CH191', gubun: '전력량',
+		jan: 107258, feb: 108424, mar: 113604, apr: 116648, may: 124149, jun: 129978,
+		jul: 112215, aug: 129602, sep: 93551, oct: 111272, nov: 89736, dec: 128423
+	},
+	{
+		rowNum: 10, fab: 'B02', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH104', gubun: '전력량',
+		jan: 82089, feb: 102793, mar: 96784, apr: 85238, may: 86153, jun: 123849,
+		jul: 115095, aug: 129484, sep: 102109, oct: 80976, nov: 119841, dec: 106309
+	},
+	{
+		rowNum: 11, fab: 'C02', eqpmGrpNm: '전력관리부', eqpmNm: 'U/T_LT_CH139', gubun: '전력량',
+		jan: 128592, feb: 95647, mar: 85982, apr: 126824, may: 87928, jun: 128967,
+		jul: 94637, aug: 107530, sep: 122533, oct: 97546, nov: 112110, dec: 126250
+	},
+	{
+		rowNum: 12, fab: 'C01', eqpmGrpNm: '설비운영팀', eqpmNm: 'U/T_LT_CH109', gubun: '전력량',
+		jan: 106530, feb: 91716, mar: 111104, apr: 102663, may: 108912, jun: 91464,
+		jul: 121245, aug: 90785, sep: 120586, oct: 105718, nov: 96191, dec: 111513
+	}
+];
+
 </script>
-<style lang="scss">
+<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 {
+
 			&-row-odd,
 			&-row-even {
-				&:hover > .colrowspan {
+				&:hover>.colrowspan {
-					background-color: map-deep-get(
+					background-color: map-deep-get($config,
-						$config,
 						#{$theme},
 						'tui-grid-cell-backgroundColor'
 					) !important;
@@ -873,10 +1055,10 @@ const defaultData = {
 					}
 				}
 			}
+
 			&-cell {
 				&.row-selected.colrowspan {
-					background-color: map-deep-get(
+					background-color: map-deep-get($config,
-						$config,
 						#{$theme},
 						'tui-grid-cell-backgroundColor'
 					) !important;