yudao-dev/src/views/quality/currentData/currentTest.vue

<template>
	<div>
		<base-table
			:table-props="tableProps"
			:page="1"
			:limit="1000"
			:table-data="list" />
		<div class="orderBox" v-for="(item, index) in downList" :key="index">
			<div class="title">
				<span>工单：{{ item.workOrderName }}</span>
				<span>产品名称：{{ item.productionName }}</span>
				<span>规格：{{ item.productionSize }}</span>
			</div>
			<div class="custom-tabs">
				<el-tabs v-model="item.activeName" :stretch="true">
					<el-tab-pane :label="'\u2002表格\u2002'" name="table"></el-tab-pane>
					<el-tab-pane
						:label="'\u3000图表\u3000'"
						name="chart"
						style="overflow: inherit"></el-tab-pane>
				</el-tabs>
				<!-- 列表 -->
				<base-table
					v-if="item.activeName === 'table'"
					:table-props="item.tableProps"
					:page="1"
					:limit="1000"
					:table-data="item.list"
					:height="300" />
				<baseChart
					v-else
					:chartN="index"
					:chartData="item.list"
					:lineName="item.downProps" />
			</div>
		</div>
	</div>
</template>
<script>
import BaseChart from './baseChart.vue';
import { getInspectionData } from '@/api/monitoring/statisticalData';
export default {
	name: 'CurrentTest',
	components: { BaseChart },
	computed: {
		tableProps() {
			return [
				{
					prop: 'workOrderName',
					label: '工单名称',
					showOverflowtooltip: true,
				},
				{
					prop: 'productionName',
					label: '产品名称',
					showOverflowtooltip: true,
				},
				...this.dynamicProps,
				{
					prop: 'sumInput',
					label: '上片总数',
				},
				{
					prop: 'sumOutput',
					label: '下片总数',
				},
			];
		},
	},
	data() {
		return {
			dynamicProps: [],
			list: [],
			downList: [],
		};
	},
	mounted() {
		this.getList();
	},
	methods: {
		/** 查询列表 */
		async getList() {
			const res = await getInspectionData();
			// const res = {
			// 	data: [],
			// };
			if (res.data && res.data.length > 0) {
				this.dynamicProps = this.filterNameData(res.data[0].upPart.nameData);
				this.list = this.filterData(res.data[0].upPart.data);
				// 工单明细
				res.data.forEach((item) => {
					let downProps = this.filterNameData(item.downPart[0].nameData);
					console.log('downProps:', downProps);
					let obj = this.downPartData(item.downPart[0].data, downProps);
					obj.tableProps = [
						{
							prop: 'inspectionContent',
							label: '检测内容',
							showOverflowtooltip: true,
						},
						{
							prop: 'sumInput',
							label: '原片总数',
							showOverflowtooltip: true,
						},
						...downProps,
						{
							prop: 'sumScrap',
							label: '未通过检测总数',
						},
						{
							prop: 'scrapRatio',
							label: '报废比例(%)',
						},
					];
					this.downList.push(obj);
				});
				console.log(this.downList);
			} else {
				this.list = [];
				this.dynamicProps = [];
			}
		},
		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 = {};
				console.log('innerData:', innerData);
				this.dynamicProps.map((item) => {
					keyValuePairs[item.prop] = '-';
				});
				innerData.forEach((d) => {
					keyValuePairs[d.dynamicName] = d.dynamicValue;
				});
				return {
					inspectionContent: item.inspectionContent,
					workOrderName: item.workOrderName,
					productionName: item.productionName,
					...keyValuePairs,
					sumInput: item.sumInput,
					sumOutput: item.sumOutput,
				};
			});
		},
		downPartData(data, downProps) {
			let obj = {
				workOrderName: '',
				productionName: '',
				productionSize: '',
				activeName: 'table',
				tableProps: [],
				downProps: downProps,
				list: [],
			};
			obj.workOrderName = data[0].workOrderName;
			obj.productionName = data[0].productionName;
			obj.productionSize = data[0].productionSize;
			obj.list = data.map((item) => {
				const { data: innerData } = item;
				const keyValuePairs = {};
				downProps.map((item) => {
					keyValuePairs[item.prop] = '-';
				});
				innerData.map((d) => {
					keyValuePairs[d.dynamicName] = d.dynamicValue;
				});
				return {
					inspectionContent: item.inspectionContent,
					sumInput: item.sumInput,
					...keyValuePairs,
					sumScrap: item.sumScrap,
					scrapRatio: item.scrapRatio,
				};
			});
			return obj;
		},
	},
};
</script>
<style scoped lang="scss">
.orderBox {
	padding-top: 16px;
}
.title {
	position: relative;
	padding: 4px 0;
	padding-left: 12px;
	font-size: 14px;
	color: #606266;
	font-weight: 700;
	margin-bottom: 12px;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 6px;
		height: 16px;
		width: 4px;
		border-radius: 1px;
		background: #0b58ff;
	}
	span {
		display: inline-block;
		width: 300px;
	}
}
:deep(.custom-tabs) {
	.el-tabs__header {
		margin-bottom: 8px;
		display: inline-block;
		transform: translateY(-12px);
	}

	.el-tabs__content {
		overflow: visible;
	}

	.el-tabs__item {
		padding-left: 0 !important;
		padding-right: 0 !important;
		line-height: 36px !important;
		height: 36px;
	}
}
</style>