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

@@ -8,22 +8,35 @@
 <template>
 	<div class="app-container">
 		<h1>Recent 24 hours</h1>
+		<p>{{ list }}</p>
 	</div>
 </template>
 
 <script>
 export default {
-    name: "QualityRecentHours",
+	name: 'QualityRecentHours',
 	components: {},
 	props: {},
 	data() {
-        return {}
+		return {
+			list: [],
+		};
 	},
 	computed: {},
-    methods: {},
+	mounted() {
-}
+		this.getList();
+	},
+	methods: {
+		async getList() {
+			const response = await this.$axios({
+				url: '/monitoring/record-in-one-day/get',
+				method: 'get',
+			});
+			console.log(response);
+			this.list = JSON.stringify(response, null, 2);
+		},
+	},
+};
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-
-</style>

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

@@ -104,91 +104,84 @@ export default {
 					color: 'text btn-graph',
 				},
 			],
-			tableProps: [
+			// 动态的 props
+			dynamicProps: [],
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				param: null,
+			},
+			summaryList: [],
+			summaryOpen: false,
+			list: [
+				/** mock data */
+				// {
+				// 	content: 'asdfasdf',
+				// 	line1: '',
+				// 	line2: '',
+				// 	line3: '',
+				// 	line4: '',
+				// 	line5: '',
+				// 	line6: '',
+				// 	line7: '',
+				// 	line8: '',
+				// 	line9: '',
+				// 	line10: '',
+				// 	typeTotal: 100,
+				// 	ratio: '93%',
+				// },
+				// {
+				// 	content: 'fdasfs',
+				// 	line1: '',
+				// 	line2: '',
+				// 	line3: '',
+				// 	line4: '',
+				// 	line5: '',
+				// 	line6: '',
+				// 	line7: '',
+				// 	line8: '',
+				// 	line9: '',
+				// 	line10: '',
+				// 	typeTotal: 100,
+				// 	ratio: '93%',
+				// },
+				// {
+				// 	content: 'asdfdfffffff',
+				// 	line1: '',
+				// 	line2: '',
+				// 	line3: '',
+				// 	line4: '',
+				// 	line5: '',
+				// 	line6: '',
+				// 	line7: '',
+				// 	line8: '',
+				// 	line9: '',
+				// 	line10: '',
+				// 	typeTotal: 100,
+				// 	ratio: '93%',
+				// },
+			],
+		};
+	},
+	computed: {
+		tableProps() {
+			return [
 				{
-					width: 160,
+					// width: 160,
-					prop: 'content',
+					prop: 'inspectionContent',
 					label: '检测内容',
 					align: 'center',
 				},
+				...this.dynamicProps,
 				{
-					width: 128,
+					// width: 128,
-					prop: 'line1',
+					prop: 'sumInput',
-					label: '产线1',
-					align: 'center',
-				},
-				{
-					width: 128,
-					prop: 'line2',
-					label: '产线2',
-					align: 'center',
-				},
-				{
-					width: 128,
-					prop: 'line3',
-					label: '产线3',
-					align: 'center',
-				},
-				{
-					width: 128,
-					prop: 'line4',
-					label: '产线4',
-					align: 'center',
-				},
-				{
-					width: 128,
-					prop: 'line5',
-					label: '产线5',
-					align: 'center',
-				},
-				{
-					width: 128,
-					prop: 'line6',
-					label: '产线6',
-					align: 'center',
-				},
-				{
-					width: 128,
-					prop: 'line7',
-					label: '产线7',
-					align: 'center',
-				},
-				{
-					width: 128,
-					prop: 'line8',
-					label: '产线8',
-					align: 'center',
-				},
-				{
-					width: 128,
-					prop: 'typeTotal',
 					label: '检测类型总数',
 					align: 'center',
-					// subcomponent: {
-					// 	name: 'TextOnly',
-					// 	props: {
-					// 		injectData: {
-					// 			type: Object,
-					// 			default: () => ({}),
-					// 		},
-					// 	},
-					// 	data() {
-					// 		return {
-					// 			text: '各产线相加数量',
-					// 		};
-					// 	},
-					// 	methods: {
-					// 		handleEmit(payload) {
-					// 			console.log('handleEmit', payload);
-					// 		},
-					// 	},
-					// 	render(h) {
-					// 		return h('el-button', { props: { type: 'text' } }, this.text);
-					// 	},
-					// },
 				},
 				{
-					width: 128,
+					// width: 128,
 					prop: 'ratio',
 					label: '比例',
 					align: 'center',
@@ -215,66 +208,9 @@ export default {
 					// 	},
 					// },
 				},
-			],
+			];
-			// 查询参数
-			queryParams: {
-				pageNo: 1,
-				pageSize: 10,
-				param: null,
 		},
-			summaryList: [],
-			summaryOpen: false,
-			list: [
-				/** mock data */
-				{
-					content: 'asdfasdf',
-					line1: '',
-					line2: '',
-					line3: '',
-					line4: '',
-					line5: '',
-					line6: '',
-					line7: '',
-					line8: '',
-					line9: '',
-					line10: '',
-					typeTotal: 100,
-					ratio: '93%',
 	},
-				{
-					content: 'fdasfs',
-					line1: '',
-					line2: '',
-					line3: '',
-					line4: '',
-					line5: '',
-					line6: '',
-					line7: '',
-					line8: '',
-					line9: '',
-					line10: '',
-					typeTotal: 100,
-					ratio: '93%',
-				},
-				{
-					content: 'asdfdfffffff',
-					line1: '',
-					line2: '',
-					line3: '',
-					line4: '',
-					line5: '',
-					line6: '',
-					line7: '',
-					line8: '',
-					line9: '',
-					line10: '',
-					typeTotal: 100,
-					ratio: '93%',
-				},
-			],
-		};
-	},
-	computed: {},
 	mounted() {
 		this.getList();
 	},
@@ -288,14 +224,16 @@ export default {
 			const response = await this.$axios({
 				url: '/monitoring/statistical-data/getUpPart',
 				method: 'get',
-				params: this.queryParams.param ? {
+				params: this.queryParams.param
+					? {
 							param: {
 								// startTime: new Date(2022, 6, 1, 0, 0, 0).getTime(), //  '2023-07-01 00:00:00',
 								// endTime: new Date(2023, 7, 10, 0, 0, 0).getTime(), // '2023-08-10 00:00:00',
 								startTime: this.queryParams.param.startTime,
-						endTime: this.queryParams.param.endTime
+								endTime: this.queryParams.param.endTime,
 							},
-				} : null
+					  }
+					: null,
 			});
 			this.summaryList = response.data;
 			console.log('summaryList', this.summaryList);
@@ -306,20 +244,51 @@ export default {
 				data: { data, otherList, otherMap, nameData },
 			} = await this.$axios({
 				url: '/monitoring/statistical-data/getDownPart',
-				params: this.queryParams.param ? {
+				params: this.queryParams.param
+					? {
 							param: {
 								// startTime: new Date(2023, 6, 1).getTime(), // '2023-07-01 00:00:00',
 								// endTime: new Date(2023, 7, 22).getTime(), // '2023-08-10 00:00:00',
 								startTime: this.queryParams.param.startTime,
-						endTime: this.queryParams.param.endTime
+								endTime: this.queryParams.param.endTime,
 							},
-				} : null
+					  }
+					: null,
 			});
 			// this.list = response.data;
 			console.log('data', data);
 			console.log('otherList', otherList);
 			console.log('otherMap', otherMap);
 			console.log('nameData', nameData);
+
+			this.dynamicProps = this.filterNameData(nameData);
+			this.list = this.filterData(data);
+		},
+		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,
+				};
+			});
 		},
 		/** 总览关闭 */
 		handleSummaryClose() {
@@ -331,7 +300,7 @@ export default {
 			switch (btn.btnName) {
 				case 'search':
 					if (btn.timerange && typeof btn.timerange === 'object') {
-						this.queryParams.param = {}
+						this.queryParams.param = {};
 						this.$set(this.queryParams.param, 'startTime', btn.timerange[0]);
 						this.$set(this.queryParams.param, 'endTime', btn.timerange[1]);
 					}
@@ -390,3 +359,53 @@ export default {
 	}
 }
 </style>
+
+<!-- 
+// {
+	// 	width: 128,
+	// 	prop: 'line1',
+	// 	label: '产线1',
+	// 	align: 'center',
+	// },
+	// {
+	// 	width: 128,
+	// 	prop: 'line2',
+	// 	label: '产线2',
+	// 	align: 'center',
+	// },
+	// {
+	// 	width: 128,
+	// 	prop: 'line3',
+	// 	label: '产线3',
+	// 	align: 'center',
+	// },
+	// {
+	// 	width: 128,
+	// 	prop: 'line4',
+	// 	label: '产线4',
+	// 	align: 'center',
+	// },
+	// {
+	// 	width: 128,
+	// 	prop: 'line5',
+	// 	label: '产线5',
+	// 	align: 'center',
+	// },
+	// {
+	// 	width: 128,
+	// 	prop: 'line6',
+	// 	label: '产线6',
+	// 	align: 'center',
+	// },
+	// {
+	// 	width: 128,
+	// 	prop: 'line7',
+	// 	label: '产线7',
+	// 	align: 'center',
+	// },
+	// {
+	// 	width: 128,
+	// 	prop: 'line8',
+	// 	label: '产线8',
+	// 	align: 'center',
+	// }, -->