src/views/quality/monitoring/qualityRecentHours/index.vue

@@ -8,7 +8,13 @@
 <template>
 	<div class="app-container">
 		<h1>Recent 24 hours</h1>
-		<p>{{ list }}</p>
+		<p>{{ jsondemo }}</p>
+		<base-table
+			:table-props="tableProps"
+			:page="queryParams.pageNo"
+			:limit="queryParams.pageSize"
+			:table-data="list"
+			@emit-fun="handleEmitFun"></base-table>
 	</div>
 </template>
 
@@ -19,7 +25,99 @@ export default {
 	props: {},
 	data() {
 		return {
-			list: [],
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+			},
+			jsondemo: '',
+			list: [
+				{
+					inspectionContent: '检测内容1',
+					'2023-03-18T00:00:00-产线1': '产线1-asdf',
+					'2023-03-18T01:00:00-产线2': '产线2-kldf',
+					'2023-03-18T02:00:00-产线1': '产线1-vasdkj',
+				},
+			],
+			tableProps: [
+				{
+					prop: 'inspectionContent',
+					label: '检测内容',
+					align: 'center',
+				},
+				// 动态插入
+				// mock
+				{
+					prop: '2023-03-18T00:00:00',
+					label: '2023-03-18T00:00:00',
+					align: 'center',
+					children: [
+						{
+							prop: '2023-03-18T00:00:00-产线1',
+							label: '产线1',
+							align: 'center',
+						},
+						{
+							prop: '2023-03-18T00:00:00-产线2',
+							label: '产线2',
+							align: 'center',
+						},
+						{
+							prop: '2023-03-18T00:00:00-产线3',
+							label: '产线3',
+							align: 'center',
+						},
+						{
+							prop: '2023-03-18T00:00:00-产线4',
+							label: '产线4',
+							align: 'center',
+						},
+						{
+							prop: '2023-03-18T00:00:00-产线5',
+							label: '产线5',
+							align: 'center',
+						},
+					],
+				},
+				{
+					prop: '2023-03-18T01:00:00',
+					label: '2023-03-18T01:00:00',
+					align: 'center',
+					children: [
+						{
+							prop: '2023-03-18T01:00:00-产线1',
+							label: '产线1',
+							align: 'center',
+						},
+						{
+							prop: '2023-03-18T01:00:00-产线2',
+							label: '产线2',
+							align: 'center',
+						},
+						{
+							prop: '2023-03-18T01:00:00-产线3',
+							label: '产线3',
+							align: 'center',
+						},
+					],
+				},
+				{
+					prop: '2023-03-18T02:00:00',
+					label: '2023-03-18T02:00:00',
+					align: 'center',
+					children: [
+						{
+							prop: '2023-03-18T02:00:00-产线1',
+							label: '产线1',
+							align: 'center',
+						},
+						{
+							prop: '2023-03-18T02:00:00-产线2',
+							label: '产线2',
+							align: 'center',
+						},
+					],
+				},
+			],
 		};
 	},
 	computed: {},
@@ -33,7 +131,33 @@ export default {
 				method: 'get',
 			});
 			console.log(response);
-			this.list = JSON.stringify(response, null, 2);
+			this.jsondemo = JSON.stringify(response, null, 2);
+		},
+		filterNameData(nameData) {
+			const ndSet = new Set();
+			nameData.forEach((nd) => {
+				ndSet.add(nd.name);
+			});
+			return Array.from(ndSet.values())
+				.sort()
+				.map((name) => ({
+					prop: name,
+					label: name,
+				}));
+		},
+		filterData(data) {
+			return data.map((item) => {
+				const { data: innerData } = item;
+				const keyValuePairs = {};
+				innerData.map((d) => {
+					keyValuePairs[d.dynamicName] = d.dynamicValue;
+				});
+				return {
+					inspectionContent: item.inspectionContent,
+					...keyValuePairs,
+					sumInput: item.sumInput,
+				};
+			});
 		},
 	},
 };