init dev-push code ui base design

pages/ems/base/PastRsltDataReadPage.vue

@@ -1,14 +1,18 @@
 <template>
 	<div class="l-layout">
+		<PageTitle text="측정 위치 데이터 조회" />
+
 		<v-row ref="searchFilter">
 			<v-col :cols="12">
 				<v-card class="searchFilter">
-					<v-row align="center" no-gutters>
+					<v-row align="end" no-gutters>
 						<v-col :cols="2">
 							<component
 								:is="'SelectBlocMstr'"
 								ref="SelectBlocMstr"
 								:parentPrgmId="myPrgmId"
+								:textCols="12"
+								customClass="select-large"
 							/>
 						</v-col>
 						<!-- <v-col :cols="2">
@@ -35,6 +39,7 @@
 								:is="'EvtObjPop'"
 								:parentPrgmId="myPrgmId"
 								:item="evtObjPopItem"
+								customClass="select-large"
 							/>
 						</v-col>
 						<v-col :cols="4">
@@ -42,18 +47,18 @@
 								:is="'Datepicker'"
 								:parentPrgmId="myPrgmId"
 								:label="'조회기간'"
-								:labelCols="2"
+								:textCols="12"
 							/>
 						</v-col>
-						<v-col :cols="3" class="text-right">
-							<!-- 조회버튼 -->
-							<BtnSearch @click="search" />
-							<BtnExcelDownload
-								style="vertical-align: middle;"
-								class="d-inline-flex"
+						 <v-col :cols="3" class="d-flex align-end justify-end text-right">
+							 <BtnExcelDownload
+							 	class="mr-1"
 								:parentPrgmId="myPrgmId"
 								:gridName="gridName"
+								type="primary"
+								size="large"
 							/>
+							<BtnSearch @click="search" size="large" />
 						</v-col>
 					</v-row>
 				</v-card>
@@ -68,8 +73,10 @@
 							:is="loadGrid ? 'Grid' : null"
 							:gridName="gridName"
 							:parentPrgmId="myPrgmId"
+							:dataPath="dataPathMock"
 						/>
 					</div>
+					
 				</v-card>
 			</v-col>
 		</v-row>
@@ -92,6 +99,7 @@ import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
 import DateUtility from '~/plugins/dateUtility';
 // import Search from "~/components/common/search";
 import EvtObjPop from '~/components/common/modal/EvtObjPop';
+import PageTitle from "~/components/common/PageTitle";
 
 let myTitle;
 // const myPrgmId = "PRG0052";
@@ -124,6 +132,7 @@ export default {
 		PastRsltDataReadPop,
 		PastRsltDataReadTagPop,
 		EvtObjPop,
+		PageTitle,
 	},
 	data() {
 		return {
@@ -137,13 +146,61 @@ export default {
 				modalTitle: 'TAG 리스트',
 				valueNm: 'tagId',
 				valueNm2: 'tagNm',
+				iconShow: true,
 				disabled: false,
-				labelCols: 2,
-				textCols: 9,
+				labelCols: 12,
+				textCols: 12,
 				class: 'py-2',
 				required: false,
 				formFg: false,
 			},
+			dataPathMock: {
+				"rowGrid": {
+					column: [
+						{
+							header: 'TAG ID',
+							name: 'tagId',
+							minWidth: 500,
+						},
+						{
+							header: 'TAG명',
+							name: 'tagNm',
+						},
+						{
+							header: '대상일시',
+							name: 'readDttm',
+							align:"center",
+							width: 200,
+						},
+						{
+							header: '값',
+							name: 'readVal',
+							width: 100,
+							align:"center"
+						},
+						{
+							header: '취득일시',
+							name: 'regDttm',
+							width: 200,
+							align:"center"
+						},
+						{
+							header: '적재일시',
+							name: 'procDttm',
+							width: 200,
+							align:"center"
+						},
+					],
+					data: dataPathDataExample,
+					defaultRow: dataPathDataExample,
+					option: {
+                        pageOptions: {
+                            useClient: true,
+                            perPage: 10,
+                        },
+                    }
+				}
+			},
 		};
 	},
 	computed: {
@@ -265,6 +322,7 @@ export default {
 				gridKey: this.gridName,
 				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
 			});
+
 			let myColumns = [
 				{
 					header: 'TAG ID',
@@ -511,7 +569,13 @@ const defaultData = {
 		},
 	},
 };
+import { getPathDataExample } from '@/const/const'
+const dataPathDataExample = getPathDataExample({
+		"tagId": "ICHEON.ELEC.EQID101.VCB_111A_ACC_WH_PV",
+		"tagNm": "ICHEON VCB_111A 적산 전력",
+		"readDttm": "2023-01-10 00:00:00",
+		"readVal": "581.27",
+		"regDttm": "2023-01-09 15:03:08",
+		"procDttm": "2023-01-10 00:03:09",
+	});
 </script>
-<style lang="scss">
-@import '@/assets/scss/common.scss';
-</style>