src/views/equipment/analysis/quality/components/lineChart.vue

@@ -0,0 +1,34 @@
+<!-- 
+    filename: lineChart.vue
+    author: liubin
+    date: 2023-09-04 13:45:00
+    description: 
+-->
+
+<template>
+	<div class="line-chart">line LineChart</div>
+</template>
+
+<script>
+export default {
+	name: 'LineChart',
+	components: {},
+	props: ['config'],
+	data() {
+		return {
+            chart: null,
+        };
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.line-chart {
+	margin: 24px;
+	padding: 12px;
+	background: #e1e1e1;
+	min-height: 200px;
+}
+</style>

src/views/equipment/analysis/quality/index.vue

@@ -7,23 +7,277 @@
 
 <template>
 	<div class="app-container">
-        设备质量分析
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@headBtnClick="handleSearchBarBtnClick" />
+
+		<!-- 列表 -->
+		<base-table
+			:table-props="tableProps"
+			:page="queryParams.pageNo"
+			:limit="queryParams.pageSize"
+			:table-data="list"
+			@emitFun="handleEmitFun"></base-table>
+
+		<!-- 图形分析 dialog -->
+		<base-dialog
+			dialogTitle="图形视角"
+			:dialogVisible="dialogVisible"
+			width="60%"
+			@close="dialogClose"
+			@cancel="dialogClose"
+			@confirm="dialogClose">
+			<LineChart :config="lineChartConfig" />
+		</base-dialog>
 	</div>
 </template>
 
 <script>
+import LineChart from './components/lineChart.vue';
+
 export default {
-name: "QualityAnalysis",
+	name: 'QualityAnalysis',
-components: {},
+	components: { LineChart },
 	props: {},
 	data() {
-    return {}
+		return {
+			dialogVisible: false,
+			urls: {
+				page: '/analysis/equipment-analysis/quality',
+			},
+			mode: 'table', // defaults to 'table'
+			searchBarFormConfig: [
+				// 产品
+				{
+					__index: 'product',
+					type: 'select',
+					label: '产品',
+					placeholder: '请选择产品',
+					param: 'productId',
+				},
+				// 产线
+				{
+					__index: 'line',
+					type: 'select',
+					label: '产线',
+					placeholder: '请选择产线',
+					param: 'lineId',
+				},
+				// 时间段
+				{
+					type: 'datePicker',
+					label: '时间段',
+					dateType: 'daterange', // datetimerange
+					// format: 'yyyy-MM-dd HH:mm:ss',
+					format: 'yyyy-MM-dd',
+					// valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					valueFormat: 'timestamp',
+					rangeSeparator: '-',
+					startPlaceholder: '开始日期',
+					endPlaceholder: '结束日期',
+					defaultTime: ['00:00:00', '23:59:59'],
+					param: 'recordTime',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				// {
+				// 	type: 'button',
+				// 	btnName: '列表数据',
+				// 	name: 'tableVersion',
+				// 	color: 'text btn-table',
+				// },
+				// {
+				// 	type: 'separate',
+				// },
+				{
+					type: 'button',
+					btnName: '图形分析',
+					name: 'graphVersion',
+					color: 'text btn-graph',
+				},
+			],
+			// 动态的 props
+			tableProps: [
+				{
+					// width: 160,
+					prop: 'sectionName',
+					label: '工段',
+					align: 'center',
+				},
+				{
+					// width: 160,
+					prop: 'equipmentName',
+					label: '设备名称',
+					align: 'center',
+				},
+				{
+					// width: 160,
+					prop: 'products',
+					label: '产品名称',
+					align: 'center',
+				},
+				{
+					// width: 160,
+					prop: 'inQuantity',
+					label: '进片数量',
+					align: 'center',
+				},
+				{
+					// width: 160,
+					prop: 'outQuantity',
+					label: '出片数量',
+					align: 'center',
+				},
+				{
+					// width: 160,
+					prop: 'nokQuantity',
+					label: '破损/不合格数',
+					align: 'center',
+				},
+				{
+					// width: 160,
+					prop: 'passRate',
+					label: '合格率',
+					align: 'center',
+				},
+			],
+
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				lineId: null,
+				productId: null,
+				recordTime: [],
+			},
+			list: [],
+		};
 	},
 	computed: {},
-methods: {},
+	created() {
+		this.fillLineOptions();
+		this.fillProductOptions();
+		this.getList();
+	},
+	methods: {
+		async fillLineOptions() {
+			const { data } = await this.$axios({
+				url: '/base/production-line/listAll',
+				method: 'get',
+			});
+			const cfg = this.searchBarFormConfig.find(
+				(item) => item.__index == 'line'
+			);
+			this.$set(
+				cfg,
+				'selectOptions',
+				data.map((item) => ({
+					id: item.id,
+					name: item.name,
+				}))
+			);
+		},
+
+		async fillProductOptions() {
+			const { data } = await this.$axios({
+				url: '/base/product/listAll',
+				method: 'get',
+			});
+			const cfg = this.searchBarFormConfig.find(
+				(item) => item.__index == 'product'
+			);
+			this.$set(
+				cfg,
+				'selectOptions',
+				data.map((item) => ({
+					id: item.id,
+					name: item.name,
+				}))
+			);
+		},
+
+		async getList() {
+			const { data } = await this.$axios({
+				url: '/analysis/equipment-analysis/quality',
+				method: 'get',
+				params: {
+					lineId: this.queryParams.lineId || null,
+					productId: this.queryParams.productId || null,
+					recordTime: this.queryParams.recordTime || null,
+				},
+			});
+			this.list = data.map((item) => ({
+				...item,
+				products: item.products.join(','),
+			}));
+		},
+
+		handleSearchBarBtnClick(btn) {
+			console.log('handleSearchBarBtnClick', btn);
+			switch (btn.btnName) {
+				case 'search':
+					this.queryParams.lineId = btn.lineId;
+					this.queryParams.productId = btn.productId;
+					this.queryParams.recordTime = btn.recordTime;
+					this.$nextTick(() => {
+						this.getList();
+					});
+					break;
+				case 'tableVersion':
+					this.dialogClose();
+					break;
+				case 'graphVersion':
+					this.dialogShow();
+					break;
 			}
+		},
+
+		handleEmitFun({ action, payload }) {},
+
+		dialogShow() {
+			this.dialogVisible = true;
+		},
+
+		dialogClose() {
+			this.dialogVisible = false;
+		},
+	},
+};
 </script>
-
 <style scoped lang="scss">
+:deep(.searchBar) {
+	.el-button.btn-table {
+		color: rgb(0, 130, 130);
+		border: 1px solid rgb(0, 130, 130);
+		padding: 8px 10px;
+		border: 1px solid rgb(0, 130, 130);
+		padding: 8px 10px;
 
+		&:hover {
+			border-color: #fff;
+			color: #fff;
+			background: rgb(0, 130, 130);
+		}
+	}
+	.el-button.btn-graph {
+		color: rgb(130, 0, 130);
+		border: 1px solid rgb(130, 0, 130);
+		padding: 8px 10px;
+
+		&:hover {
+			border-color: #fff;
+			color: #fff;
+			background: rgb(130, 0, 130);
+		}
+	}
+}
 </style>