src/utils/dynamicData.js

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

src/utils/dynamicProps.js

@@ -1,9 +1,9 @@
 /**
  * 用于动态表结构的 tableProps 生成
- * @param {*} nameData 
- * @returns 
+ * @param {*} nameData
+ * @returns
  */
-export default function handleNameData(nameData) {
+export function handleNameData(nameData) {
 	const props = step1(nameData.filter((item) => item.tree == 1));
 	step2(
 		props,
@@ -42,3 +42,22 @@ function step2(firstTierProps, tree2) {
 function notRepeat(propArray, name) {
 	return propArray.every((item) => item.label !== name);
 }
+
+/**
+ * 用于调整服务器返回的动态数据
+ * @param {*} dynamicData 
+ * @returns 
+ */
+export function handleDynamicData(dynamicData) {
+	return dynamicData.map((dd) => {
+		const initData = {
+			inspectionContent: dd.inspectionDetContent,
+		};
+		dd.data.forEach((column) => {
+			column.children.forEach((ch) => {
+				initData[`${column.dynamicName}-${ch.dynamicName}`] = ch.dynamicValue;
+			});
+		});
+		return initData;
+	});
+}

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

@@ -11,7 +11,10 @@
 			:formConfigs="[{ label: '近24小时检测记录', type: 'title' }]"
 			ref="search-bar" />
 		<!-- <pre><code v-html="jsondemo"></code></pre> -->
+
+		<el-skeleton v-if="initing" :rows="6" animated />
 		<base-table
+			v-else
 			:table-props="tableProps"
 			:page="queryParams.pageNo"
 			:limit="queryParams.pageSize"
@@ -22,8 +25,7 @@
 
 <script>
 import response from './response.json';
-import handleNameData from '@/utils/dynamicProps';
-import handleDynamicData from '@/utils/dynamicData';
+import { handleNameData, handleDynamicData } from '@/utils/dynamicProps';
 // import hljs from 'highlight.js/lib/highlight';
 // import json from 'highlight.js/lib/languages/json';
 // import 'highlight.js/styles/github-gist.css';
@@ -36,24 +38,21 @@ export default {
 	props: {},
 	data() {
 		return {
+			initing: false,
 			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',
-				},
+				// {
+				// 	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: [
-				{
-					type: 'index',
-					label: '序号'
-				},
 				{
 					prop: 'inspectionContent',
 					label: '检测内容',
@@ -86,11 +85,16 @@ export default {
 				data: { data: dyanmicData, nameData },
 			} = response;
 
+			this.initing = true;
 			const dynamicProps = handleNameData(nameData);
-			this.tableProps.push(...dynamicProps)
-			const [dataList, length] = handleDynamicData(dyanmicData);
+			this.tableProps.push(...dynamicProps);
+			const dataList = handleDynamicData(dyanmicData);
 			this.list = dataList;
-			this.queryParams.pageSize = length;
+			this.queryParams.pageSize = dataList.length;
+
+			setTimeout(() => {
+				this.initing = false;
+			}, 1000);
 		},
 
 		handleEmitFun(payload) {