7.24

src/views/quality/currentData/currentTest.vue

@@ -0,0 +1,167 @@
+<template>
+	<div>
+		<base-table
+			:table-props="tableProps"
+			:page="1"
+			:limit="1000"
+			:table-data="list" />
+		<div class="orderBox">
+			<div class="title">
+				<span>工单：工单1</span>
+				<span>产品名称：名称1</span>
+				<span>规格：规格1</span>
+			</div>
+			<div class="custom-tabs">
+				<el-tabs v-model="activeName" :stretch="true">
+					<el-tab-pane :label="'\u2002表格\u2002'" name="table">
+						<!-- 列表 -->
+						<base-table
+							:table-props="tableProps2"
+							:page="1"
+							:limit="1000"
+							:table-data="list2" />
+					</el-tab-pane>
+					<el-tab-pane
+						:label="'\u3000图表\u3000'"
+						name="chart"
+						style="overflow: inherit">
+						<baseChart />
+					</el-tab-pane>
+				</el-tabs>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import BaseChart from './baseChart.vue';
+export default {
+	name: 'CurrentTest',
+	components: { BaseChart },
+	data() {
+		return {
+			activeName: 'table',
+			tableProps: [
+				{
+					prop: 'workOrderName',
+					label: '工单名称',
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'prodName',
+					label: '产品名称',
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'line1',
+					label: '产线1',
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'line2',
+					label: '产线2',
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'line3',
+					label: '产线3',
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'total',
+					label: '上片总数',
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'total2',
+					label: '下片总数',
+					showOverflowtooltip: true,
+				},
+			],
+			list: [
+				{ workOrderName: '工单1' },
+				{ workOrderName: '工单2' },
+				{ workOrderName: '工单3' },
+				{ workOrderName: '工单4' },
+				{ workOrderName: '工单5' },
+				{ workOrderName: '工单6' },
+			],
+			tableProps2: [
+				{
+					prop: 'workOrderName',
+					label: '检测内容',
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'prodName',
+					label: '原片总数',
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'line1',
+					label: '产线1',
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'line2',
+					label: '产线2',
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'line3',
+					label: '产线3',
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'total',
+					label: '未通过检测总数',
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'total2',
+					label: '报废比例',
+					showOverflowtooltip: true,
+				},
+			],
+			list2: [
+				{ workOrderName: '工单1' },
+				{ workOrderName: '工单2' },
+				{ workOrderName: '工单3' },
+				{ workOrderName: '工单4' },
+				{ workOrderName: '工单5' },
+				{ workOrderName: '工单6' },
+			],
+		};
+	},
+};
+</script>
+<style scoped lang="scss">
+.orderBox {
+	padding-top: 16px;
+}
+.title {
+	span {
+		display: inline-block;
+		width: 300px;
+		font-size: 14px;
+		padding-bottom: 10px;
+	}
+}
+: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>