src/views/quality/monitoring/qualityStatistics/components/summaryTable.vue

@@ -7,9 +7,9 @@
 
 <template>
 	<!-- 列表 -->
+	<!-- height="35vh" -->
 	<base-table
 		:table-props="tableProps"
-		height="35vh"
 		:page="queryParams.pageNo"
 		:limit="queryParams.pageSize"
 		:table-data="list"></base-table>

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

@@ -6,16 +6,63 @@
 -->
 
 <template>
-	<div class="app-container">
+	<div class="quality-container" style="background: #f2f4f9; flex: 1">
+		<el-row
+			class=""
+			style="
+				margin-bottom: 12px;
+				background: #fff;
+				padding: 16px 16px 0;
+				border-radius: 8px;
+			">
 			<!-- 搜索工作栏 -->
 			<SearchBar
 				:formConfigs="searchBarFormConfig"
 				ref="search-bar"
 				@headBtnClick="handleSearchBarBtnClick" />
+		</el-row>
+
+		<el-row
+			class=""
+			style="
+				margin-top: 0;
+				margin-bottom: 12px;
+				background: #fff;
+				padding: 12px 16px 16px;
+				border-radius: 8px;
+			">
+			<div class="blue-title">产线检测总览</div>
+			<summaryTable :list="summaryList" />
+		</el-row>
+
+		<el-row
+			class=""
+			style="
+				margin-top: 0;
+				margin-bottom: 12px;
+				background: #fff;
+				padding: 12px 16px 16px;
+				border-radius: 8px;
+			">
+			<el-row style="display: flex; align-items: center">
+				<div class="blue-title">产线检测详细</div>
+				<div class="custom-tabs">
+					<el-tabs
+						v-model="activeName"
+						:stretch="true"
+						@tab-click="handleTabClick">
+						<el-tab-pane
+							:label="'\u2002数据列表\u2002'"
+							name="table"></el-tab-pane>
+						<el-tab-pane
+							:label="'\u3000柱状图\u3000'"
+							name="graph"></el-tab-pane>
+					</el-tabs>
+				</div>
+			</el-row>
 
 			<transition mode="out-in" name="fade-down">
 				<template v-if="mode == 'table'">
-				<!-- 列表 -->
 					<base-table
 						v-if="mode == 'table'"
 						:table-props="tableProps"
@@ -28,11 +75,15 @@
 				<GraphPage
 					v-else
 					:summary-list="summaryList"
-				:line-data="{ list: list, xProps: dynamicProps.map((v) => v.prop) }" />
+					:line-data="{
+						list: list,
+						xProps: dynamicProps.map((v) => v.prop),
+					}" />
 			</transition>
+		</el-row>
 
 		<!-- todo: 数据总览，用弹窗包裹的 table 实现 -->
-		<base-dialog
+		<!-- <base-dialog
 			dialogTitle="数据总览"
 			:dialogVisible="summaryOpen"
 			width="50%"
@@ -40,7 +91,7 @@
 			@cancel="handleSummaryClose"
 			@confirm="handleSummaryClose">
 			<summaryTable :list="summaryList" />
-		</base-dialog>
+		</base-dialog> -->
 	</div>
 </template>
 
@@ -54,7 +105,8 @@ export default {
 	props: {},
 	data() {
 		return {
-			mode: 'table', // defaults to 'table'
+			// mode: 'table', // defaults to 'table'
+			activeName: 'table', // defaults to 'table'
 			searchBarFormConfig: [
 				{
 					type: 'datePicker',
@@ -76,33 +128,33 @@ export default {
 					name: 'search',
 					color: 'primary',
 				},
-				{
+				// {
-					type: 'separate',
+				// 	type: 'separate',
-				},
+				// },
-				{
+				// {
-					type: 'button',
+				// 	type: 'button',
-					btnName: '数据总览',
+				// 	btnName: '数据总览',
-					name: 'summary',
+				// 	name: 'summary',
-					color: 'text',
+				// 	color: 'text',
-				},
+				// },
-				{
+				// {
-					type: 'separate',
+				// 	type: 'separate',
-				},
+				// },
-				{
+				// {
-					type: 'button',
+				// 	type: 'button',
-					btnName: '表格版',
+				// 	btnName: '表格版',
-					name: 'tableVersion',
+				// 	name: 'tableVersion',
-					color: 'text btn-table',
+				// 	color: 'text btn-table',
-				},
+				// },
-				{
+				// {
-					type: 'separate',
+				// 	type: 'separate',
-				},
+				// },
-				{
+				// {
-					type: 'button',
+				// 	type: 'button',
-					btnName: '图形版',
+				// 	btnName: '图形版',
-					name: 'graphVersion',
+				// 	name: 'graphVersion',
-					color: 'text btn-graph',
+				// 	color: 'text btn-graph',
-				},
+				// },
 			],
 			// 动态的 props
 			dynamicProps: [],
@@ -165,6 +217,9 @@ export default {
 		};
 	},
 	computed: {
+		mode() {
+			return this.activeName;
+		},
 		tableProps() {
 			return [
 				{
@@ -287,6 +342,14 @@ export default {
 				};
 			});
 		},
+		handleTabClick(tab, event) {
+			const { name } = tab;
+			if (name == 'graph') {
+				// 展示柱状图
+			} else {
+				// 展示表格
+			}
+		},
 		/** 总览关闭 */
 		handleSummaryClose() {
 			this.summaryOpen = false;
@@ -371,6 +434,42 @@ export default {
 .fade-down-leave {
 	transform: translateY(0);
 }
+
+.blue-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;
+	}
+}
+
+:deep(.custom-tabs) {
+	.el-tabs__header {
+		margin-left: 12px;
+		margin-bottom: 8px;
+		display: inline-block;
+		transform: translateY(-6px);
+	}
+
+	.el-tabs__item {
+		padding-left: 0 !important;
+		padding-right: 0 !important;
+		height: 36px;
+	}
+}
 </style>
 
 <!--