add 数据总览弹窗

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

@@ -0,0 +1,71 @@
+<!-- 
+    filename: summaryDialog.vue
+    author: liubin
+    date: 2023-08-04 16:25:49
+    description: 
+-->
+
+<template>
+	<!-- 列表 -->
+	<base-table
+		:table-props="tableProps"
+		:page="queryParams.pageNo"
+		:limit="queryParams.pageSize"
+		:table-data="list"></base-table>
+	<!-- @emit-fun="handleEmitFun"> -->
+	<!-- <method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				label="操作"
+				fixed="right"
+				:method-list="tableBtn"
+				@clickBtn="handleTableBtnClick" /> -->
+</template>
+
+<script>
+export default {
+	name: 'SummaryTable',
+	components: {},
+	props: {},
+	data() {
+		return {
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+			},
+			tableProps: [
+				{
+					prop: 'pl',
+					label: '产线',
+					align: 'center',
+				},
+				{
+					prop: 'upTotal',
+					label: '上片总数',
+					align: 'center',
+				},
+				{
+					prop: 'downTotal',
+					label: '下片总数',
+					align: 'center',
+				},
+				{
+					prop: 'total',
+					label: '检测总数',
+					align: 'center',
+				},
+				{
+					prop: 'ratio',
+					label: '比例(%)',
+					align: 'center',
+				},
+			],
+			list: [{}],
+		};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -12,16 +12,49 @@
 			:formConfigs="searchBarFormConfig"
 			ref="search-bar"
 			@headBtnClick="handleSearchBarBtnClick" />
+
+		<!-- 列表 -->
+		<base-table
+			v-if="mode == 'table'"
+			:table-props="tableProps"
+			:page="queryParams.pageNo"
+			:limit="queryParams.pageSize"
+			:table-data="list"
+			@emit-fun="handleEmitFun">
+			<!-- <method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				label="操作"
+				fixed="right"
+				:method-list="tableBtn"
+				@clickBtn="handleTableBtnClick" /> -->
+		</base-table>
+
+		<p v-if="mode == 'graph'">图形版</p>
+
+		<!-- todo: 数据总览，用弹窗包裹的 table 实现 -->
+		<base-dialog
+			dialogTitle="数据总览"
+			:dialogVisible="summaryOpen"
+			width="50%"
+			@close="handleSummaryClose"
+			@cancel="handleSummaryClose"
+			@confirm="handleSummaryClose">
+			<summaryTable />
+		</base-dialog>
 	</div>
 </template>
 
 <script>
+import summaryTable from './components/summaryTable.vue';
+
 export default {
 	name: 'QualityStatistics',
-	components: {},
+	components: { summaryTable },
 	props: {},
 	data() {
 		return {
+			mode: 'table', // defaults to 'table'
 			searchBarFormConfig: [
 				{
 					type: 'datePicker',
@@ -70,31 +103,154 @@ export default {
 					color: 'text btn-graph',
 				},
 			],
+			tableProps: [
+				{
+					width: 160,
+					prop: 'inspectionDetContent',
+					label: '检测内容',
+					align: 'center',
+				},
+				{
+					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',
+					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,
+					prop: 'ratio',
+					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);
+						},
+					},
+				},
+			],
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+			},
+			list: [],
+			summaryOpen: false,
 		};
 	},
 	computed: {},
 	methods: {
+		handleSummaryClose() {
+			this.summaryOpen = false;
+		},
 		handleSearchBarBtnClick(btn) {
 			switch (btn.btnName) {
 				case 'search':
 					this.queryParams[key] = btn[key] || null;
 					// this.handleQuery();
 					break;
-                case 'summary':
-                    alert('数据总览')
-                    break;
-                case 'tableVersion':
-                    alert('表格版')
-                    break;
-                case 'graphVersion':
-                    alert('图形版')
-                    break;
+				case 'summary':
+					this.summaryOpen = true;
+					break;
+				case 'tableVersion':
+					this.mode = 'table';
+					break;
+				case 'graphVersion':
+					this.mode = 'graph';
+					break;
 				case 'reset':
 					this.$refs['search-bar'].resetForm();
 					// this.resetQuery();
 					break;
 			}
 		},
+		handleEmitFun() {},
 	},
 };
 </script>