init dev-push code ui base design

components/pages/ems/EqpmInfo/EqpmConstTab.vue

@@ -1,34 +1,16 @@
 <template>
 	<div>
-		<div
-			class="d-flex justify-space-between align-center"
-			style="height: 80px;"
-		>
-			<span class="txt">설비 상수 정보</span>
-			<Buttons
-				:parentPrgmId="parentPrgmId"
-				:bindingData="gridName"
-				:btnActionsFnc="btnActions"
-			/>
+		<div class="d-flex justify-space-between align-center" style="height: 80px;">
+			<span class="txt custom-title-4-new">설비 상수 정보</span>
+			<Buttons :parentPrgmId="parentPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
 		</div>
-		<div ref="gridParent" style="height: calc(100vh - 800px);">
-			<Grid
-				:ref="gridName"
-				:is="loadGrid ? 'Grid' : null"
-				:gridName="gridName"
-				:parentPrgmId="parentPrgmId"
-				@getRowsData="getRowData"
-				:innerTabGridInfo="innerTabGridInfo"
-			/>
+		<div ref="gridParent" style="min-height: calc(100vh - 800px);">
+			<Grid :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="parentPrgmId"
+				@getRowsData="getRowData" :innerTabGridInfo="innerTabGridInfo" :dataPath="dataPathMock" />
 		</div>
-		<div style="height: calc(100vh - 900px);">
-			<component
-				:is="'Form'"
-				:parentPrgmId="parentPrgmId"
-				:bindingData="gridName"
-				:detailList="detailList"
-				@gridEditingFinish="gridEditingFinish"
-			/>
+		<div style="min-height: calc(100vh - 900px);" class="mt-4">
+			<component :is="'Form'" :parentPrgmId="parentPrgmId" :bindingData="gridName" :detailList="detailList"
+				@gridEditingFinish="gridEditingFinish" />
 		</div>
 	</div>
 </template>
@@ -59,12 +41,28 @@ export default {
 	},
 	data() {
 		return {
-			loadGrid: false,
+			loadGrid: true,
 			gridName: 'rowEqpmConstGrid',
 			detailList: myEqpmConstDetail,
 
 			inputList_emMapDiv: [],
 			inputList_cmInOut: [],
+			dataPathMock: {
+				'rowEqpmConstGrid': {
+					column: [
+						{ header: '대상항목', name: 'id', headerAlign: 'left' },
+						{ header: '에너지원 명', name: 'lable', headerAlign: 'left' },
+						{ header: '대상 유형', name: 'type', headerAlign: 'left' },
+						{ header: '물리량', name: 'note', headerAlign: 'left' },
+						{ header: '계산여부', name: 'field1', headerAlign: 'left' },
+						{ header: '분배율', name: 'field2', headerAlign: 'left' }
+					],
+					data: dataPathDataExample,
+					defaultRow: dataPathDataExample,
+					option: {}
+				}
+			},
+
 		};
 	},
 	computed: {
@@ -101,7 +99,7 @@ export default {
 				this.detailList[2].eqpmKindId = val;
 			}
 		},
-		selectedEqpmGrpId(val){
+		selectedEqpmGrpId(val) {
 			// if(!val){
 			// 	this.detailList[2].eqpmGrpId = '';
 			// }else{
@@ -332,7 +330,7 @@ export default {
 		gridEditingFinish(data, bindingData) {
 			this.$refs[this.gridName].editingFinish(data);
 		},
-		search() {},
+		search() { },
 	},
 };
 
@@ -360,20 +358,16 @@ const myEqpmConstDetail = [
 		label: '대상 유형',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-3 pr-4',
 		list: 'emMapDivList2',
 		valueNm: 'objKind',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
 		required: true,
 		disabled: true,
-	},
-	{
-		// 공백 처리
-		type: 'Label',
-		cols: 6,
-		class: 'py-2',
-		disabled: true,
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
 	},
 	{
 		type: 'EgrpPysclQtyPop',
@@ -390,19 +384,32 @@ const myEqpmConstDetail = [
 		required: true,
 		openMode: 'CONST',
 		cols: 6,
-		class: 'py-2',
-		eqpmGrpDisableFlag:true,
-		// eqpmGrpId:''
+		class: 'py-3 pl-4',
+		eqpmGrpDisableFlag: true,
+		// eqpmGrpId:'',
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
+	},
+	{
+		// 공백 처리
+		type: 'Label',
+		cols: 6,
+		class: 'py-3',
+		disabled: true,
 	},
 	{
 		type: 'InputText',
 		valueNm: 'pysclQtyNm',
 		disabled: true,
 		readonly: true,
-		cols: 5,
-		class: 'py-2',
+		cols: 6,
+		class: 'py-3 pt-1 pl-4',
 		align: 'right',
 		// class: 'py-2 d-none',
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
 	},
 	{
 		type: 'InputText',
@@ -410,12 +417,24 @@ const myEqpmConstDetail = [
 		valueNm: 'pysclQtyVal',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-3 pr-4',
 		align: 'right',
 		inputType: 'number',
 		min: 0,
 		max: 100,
 		required: true,
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
 	},
 ];
+
+import { getPathDataExample } from '@/const/const'
+const dataPathDataExample = getPathDataExample({
+	id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
+	lable: 'INCHEON 고온 냉동기 101호기 - 호로1',
+	type: '사용', note: '-',
+	field1: '1111',
+	field2: '2222',
+});
 </script>