test #47
@@ -6,24 +6,37 @@
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
    <div class="app-container">
 | 
			
		||||
        <h1>Recent 24 hours</h1>
 | 
			
		||||
    </div>
 | 
			
		||||
	<div class="app-container">
 | 
			
		||||
		<h1>Recent 24 hours</h1>
 | 
			
		||||
		<p>{{ list }}</p>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
export default {
 | 
			
		||||
    name: "QualityRecentHours",
 | 
			
		||||
    components: {},
 | 
			
		||||
    props: {},
 | 
			
		||||
    data() {
 | 
			
		||||
        return {}
 | 
			
		||||
    },
 | 
			
		||||
    computed: {},
 | 
			
		||||
    methods: {},
 | 
			
		||||
}
 | 
			
		||||
	name: 'QualityRecentHours',
 | 
			
		||||
	components: {},
 | 
			
		||||
	props: {},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			list: [],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	computed: {},
 | 
			
		||||
	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>
 | 
			
		||||
<style scoped lang="scss"></style>
 | 
			
		||||
 
 | 
			
		||||
@@ -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,
 | 
			
		||||
					prop: 'content',
 | 
			
		||||
					// width: 160,
 | 
			
		||||
					prop: 'inspectionContent',
 | 
			
		||||
					label: '检测内容',
 | 
			
		||||
					align: 'center',
 | 
			
		||||
				},
 | 
			
		||||
				...this.dynamicProps,
 | 
			
		||||
				{
 | 
			
		||||
					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',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					width: 128,
 | 
			
		||||
					prop: 'typeTotal',
 | 
			
		||||
					// width: 128,
 | 
			
		||||
					prop: 'sumInput',
 | 
			
		||||
					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 ? {
 | 
			
		||||
					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
 | 
			
		||||
					},
 | 
			
		||||
				} : null
 | 
			
		||||
				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,
 | 
			
		||||
							},
 | 
			
		||||
					  }
 | 
			
		||||
					: 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 ? {
 | 
			
		||||
					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
 | 
			
		||||
					},
 | 
			
		||||
				} : null
 | 
			
		||||
				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,
 | 
			
		||||
							},
 | 
			
		||||
					  }
 | 
			
		||||
					: 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',
 | 
			
		||||
	// }, -->
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user