src/utils/dynamicData.js

@@ -0,0 +1,4 @@
+/**
+ * 用于调整服务器返回的动态数据
+ */
+export default function handleDynamicData() {}

src/utils/dynamicProps.js

@@ -0,0 +1,44 @@
+/**
+ * 用于动态表结构的 tableProps 生成
+ * @param {*} nameData 
+ * @returns 
+ */
+export default function handleNameData(nameData) {
+	const props = step1(nameData.filter((item) => item.tree == 1));
+	step2(
+		props,
+		nameData.filter((item) => item.tree == 2)
+	);
+	// console.log('level 1', JSON.stringify(props, null, 2));
+	return props;
+}
+
+function step1(tree1) {
+	return Array.from(new Set(tree1.map((item) => item.name)))
+		.sort()
+		.map((item) => ({
+			prop: item,
+			label: item,
+			align: 'center',
+			children: [],
+		}));
+}
+
+function step2(firstTierProps, tree2) {
+	tree2.map((nd) => {
+		const parent = firstTierProps.find(
+			({ prop }) => nd.parentId.indexOf(prop) > -1
+		);
+		if (notRepeat(parent.children, nd.name)) {
+			parent.children.push({
+				label: nd.name,
+				prop: `${parent.prop}-${nd.name}`,
+				align: 'center',
+			});
+		}
+	});
+}
+
+function notRepeat(propArray, name) {
+	return propArray.every((item) => item.label !== name);
+}

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

@@ -10,7 +10,7 @@
 		<SearchBar
 			:formConfigs="[{ label: '近24小时检测记录', type: 'title' }]"
 			ref="search-bar" />
-		<pre><code v-html="jsondemo"></code></pre>
+		<!-- <pre><code v-html="jsondemo"></code></pre> -->
 		<base-table
 			:table-props="tableProps"
 			:page="queryParams.pageNo"
@@ -21,11 +21,14 @@
 </template>
 
 <script>
-import hljs from 'highlight.js/lib/highlight';
+import response from './response.json';
-import json from 'highlight.js/lib/languages/json';
+import handleNameData from '@/utils/dynamicProps';
-import 'highlight.js/styles/github-gist.css';
+import handleDynamicData from '@/utils/dynamicData';
+// import hljs from 'highlight.js/lib/highlight';
+// import json from 'highlight.js/lib/languages/json';
+// import 'highlight.js/styles/github-gist.css';
 
-hljs.registerLanguage('json', json);
+// hljs.registerLanguage('json', json);
 
 export default {
 	name: 'QualityRecentHours',
@@ -37,7 +40,7 @@ export default {
 				pageNo: 1,
 				pageSize: 10,
 			},
-			jsondemo: '',
+			// jsondemo: '',
 			list: [
 				{
 					inspectionContent: '检测内容1',
@@ -47,84 +50,15 @@ export default {
 				},
 			],
 			tableProps: [
+				{
+					type: 'index',
+					label: '序号'
+				},
 				{
 					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',
-						},
-					],
-				},
 			],
 		};
 	},
@@ -134,47 +68,31 @@ export default {
 	},
 	methods: {
 		async getList() {
-			const response = await this.$axios({
+			// const response = await this.$axios({
-				url: '/monitoring/record-in-one-day/get',
+			// 	url: '/monitoring/record-in-one-day/get',
-				method: 'get',
+			// 	method: 'get',
-			});
+			// });
 			console.log(response);
+			// const {
+			// 	// data: { nameData },
+			// 	code,
+			// } = response;
+			// this.jsondemo = hljs.highlight(
+			// 	'json',
+			// 	JSON.stringify(response, null, 2),
+			// 	true
+			// ).value;
 			const {
-				// data: { nameData },
+				data: { data: dyanmicData, nameData },
-				code,
 			} = response;
-			this.jsondemo = hljs.highlight(
+
-				'json',
+			const dynamicProps = handleNameData(nameData);
-				JSON.stringify(response, null, 2),
+			this.tableProps.push(...dynamicProps)
-				true
+			const [dataList, length] = handleDynamicData(dyanmicData);
-			).value;
+			this.list = dataList;
-		},
+			this.queryParams.pageSize = length;
-		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,
-				};
-			});
 		},
+
 		handleEmitFun(payload) {
 			console.log('payload', payload);
 		},

src/views/quality/monitoring/qualityRecentHours/props.json

@@ -0,0 +1,80 @@
+{
+	"tableProps": [
+		{
+			"prop": "inspectionContent",
+			"label": "检测内容",
+			"align": "center"
+		},
+		{
+			"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"
+				}
+			]
+		}
+	]
+}