update 检测统计

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

@@ -0,0 +1,29 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-08-04 14:44:58
+    description: 
+-->
+
+<template>
+    <div class="app-container">
+        <h1>Recent 24 hours</h1>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "QualityRecentHours",
+    components: {},
+    props: {},
+    data() {
+        return {}
+    },
+    computed: {},
+    methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -0,0 +1,31 @@
+<!-- 
+    filename: detailGraph.vue
+    author: liubin
+    date: 2023-08-04 16:36:21
+    description: 图表
+-->
+
+<template>
+    <div id="detail-graph">
+        detail graph (echarts)
+    </div>
+</template>
+
+<script>
+export default {
+    name: "DetailGraph",
+    components: {},
+    props: {},
+    data() {
+        return {
+            configs: {}
+        }
+    },
+    computed: {},
+    methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -0,0 +1,75 @@
+<!-- 
+    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: {
+		list: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	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',
+				},
+			],
+		};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,372 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-08-04 14:44:58
+    description: 检测统计数据
+-->
+
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			: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 :list="summaryList" />
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import summaryTable from './components/summaryTable.vue';
+
+export default {
+	name: 'QualityStatistics',
+	components: { summaryTable },
+	props: {},
+	data() {
+		return {
+			mode: 'table', // defaults to 'table'
+			searchBarFormConfig: [
+				{
+					type: 'datePicker',
+					label: '时间段',
+					dateType: 'daterange', // datetimerange
+					// format: 'yyyy-MM-dd HH:mm:ss',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					rangeSeparator: '-',
+					startPlaceholder: '开始日期',
+					endPlaceholder: '结束日期',
+					defaultTime: ['00:00:00', '23:59:59'],
+					param: 'checkTime',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '数据总览',
+					name: 'summary',
+					color: 'text',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '表格版',
+					name: 'tableVersion',
+					color: 'text btn-table',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '图形版',
+					name: 'graphVersion',
+					color: 'text btn-graph',
+				},
+			],
+			tableProps: [
+				{
+					width: 160,
+					prop: 'content',
+					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,
+			},
+			summaryList: [],
+			summaryOpen: false,
+			list: [
+				/** mock data */
+				{
+					content: 'asdfasdf',
+					line1: '',
+					line2: '',
+					line3: '',
+					line4: '',
+					line5: '',
+					line6: '',
+					line7: '',
+					line8: '',
+					line9: '',
+					line10: '',
+					typeTotal: 100,
+					ratio: '93%',
+				},
+				{
+					content: 'fdasfs',
+					line1: '',
+					line2: '',
+					line3: '',
+					line4: '',
+					line5: '',
+					line6: '',
+					line7: '',
+					line8: '',
+					line9: '',
+					line10: '',
+					typeTotal: 100,
+					ratio: '93%',
+				},
+				{
+					content: 'asdfdfffffff',
+					line1: '',
+					line2: '',
+					line3: '',
+					line4: '',
+					line5: '',
+					line6: '',
+					line7: '',
+					line8: '',
+					line9: '',
+					line10: '',
+					typeTotal: 100,
+					ratio: '93%',
+				},
+			],
+		};
+	},
+	computed: {},
+	mounted() {
+		this.getList();
+	},
+	methods: {
+		getList() {
+			this.getSummaryList();
+			this.getDetailedList();
+		},
+		/** 获取 检测总数 列表 */
+		async getSummaryList() {
+			const response = await this.$axios(
+				'/monitoring/statistical-data/getUpPart',
+				{
+					params: {
+						startTime: '2023-07-01 00:00:00',
+						endTime: '2023-08-10 00:00:00',
+					},
+				}
+			);
+			this.summaryList = response.data;
+		},
+		/** 获取 检测内容和产线关联 列表 */
+		async getDetailedList() {
+			const {
+				data: { data, otherList, otherMap, nameData },
+			} = await this.$axios('/monitoring/statistical-data/getDownPart', {
+				params: {
+					startTime: '2023-07-01 00:00:00',
+					endTime: '2023-08-10 00:00:00',
+				},
+			});
+			// this.list = response.data;
+            console.log("data", data);
+            console.log("otherList", otherList);
+            console.log("otherMap", otherMap);
+            console.log("nameData", nameData);
+		},
+		/** 总览关闭 */
+		handleSummaryClose() {
+			this.summaryOpen = false;
+		},
+		/** 搜索按钮 */
+		handleSearchBarBtnClick(btn) {
+			switch (btn.btnName) {
+				case 'search':
+					this.queryParams[key] = btn[key] || null;
+					// this.handleQuery();
+					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>
+
+<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>