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,33 +6,84 @@
 -->
 
 <template>
-	<div class="app-container">
+	<div class="quality-container" style="background: #f2f4f9; flex: 1">
-		<!-- 搜索工作栏 -->
+		<el-row
-		<SearchBar
+			class=""
-			:formConfigs="searchBarFormConfig"
+			style="
-			ref="search-bar"
+				margin-bottom: 12px;
-			@headBtnClick="handleSearchBarBtnClick" />
+				background: #fff;
+				padding: 16px 16px 0;
+				border-radius: 8px;
+			">
+			<!-- 搜索工作栏 -->
+			<SearchBar
+				:formConfigs="searchBarFormConfig"
+				ref="search-bar"
+				@headBtnClick="handleSearchBarBtnClick" />
+		</el-row>
 
-		<transition mode="out-in" name="fade-down">
+		<el-row
-			<template v-if="mode == 'table'">
+			class=""
-				<!-- 列表 -->
+			style="
-				<base-table
+				margin-top: 0;
-					v-if="mode == 'table'"
+				margin-bottom: 12px;
-					:table-props="tableProps"
+				background: #fff;
-					:page="queryParams.pageNo"
+				padding: 12px 16px 16px;
-					:limit="queryParams.pageSize"
+				border-radius: 8px;
-					:table-data="list"
+			">
-					@emitFun="handleEmitFun"></base-table>
+			<div class="blue-title">产线检测总览</div>
-			</template>
+			<summaryTable :list="summaryList" />
+		</el-row>
 
-			<GraphPage
+		<el-row
-				v-else
+			class=""
-				:summary-list="summaryList"
+			style="
-				:line-data="{ list: list, xProps: dynamicProps.map((v) => v.prop) }" />
+				margin-top: 0;
-		</transition>
+				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"
+						:page="queryParams.pageNo"
+						:limit="queryParams.pageSize"
+						:table-data="list"
+						@emitFun="handleEmitFun"></base-table>
+				</template>
+
+				<GraphPage
+					v-else
+					:summary-list="summaryList"
+					: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>
 
 <!--