yudao-dev/src/views/monitoring/equipmentRecentHours/index.vue

<!-- 
    filename: index.vue
    author: liubin
    date: 2023-08-04 14:44:58
    description: 设备24小时生产记录
-->

<template>
	<div class="app-container">
		<SearchBar
			:formConfigs="[{ label: '设备近24小时生产记录', type: 'title' }]"
			ref="search-bar" />
		<el-skeleton v-if="initing" :rows="6" animated />
		<base-table
			v-else
			:span-method="mergeColumnHandler"
			:table-props="tableProps"
			:table-data="list"
			@emitFun="handleEmitFun"></base-table>
		<!-- :page="queryParams.pageNo"
			:limit="queryParams.pageSize" -->
	</div>
</template>

<script>
export default {
	name: 'QualityRecentHours',
	components: {},
	props: {},
	data() {
		return {
			initing: false,
			queryParams: {
				pageNo: 1,
				pageSize: 10,
			},
			list: [],
			tableProps: [],
			spanInfo: {},
		};
	},
	computed: {},
	mounted() {
		this.getList();
	},
	methods: {
		/** 构建tableProps - 依据第一个元素所提供的信息 */
		buildProps(item) {
			const {
				data: [{ hourData }],
			} = item;

			const props = [
				{ prop: 'productLine', label: '产线', align: 'center' },
				{ prop: 'specification', label: '规格', align: 'center' },
				{ prop: 'equipmentName', label: '设备', align: 'center' },
				{ prop: 'totalQuantity', label: '生产总数', align: 'center' },
			];

			for (const key of Object.keys(hourData).sort()) {
				const subprop = {
					label: key,
					align: 'center',
					children: [
						{ prop: key + '__in', label: '进数据', align: 'center' },
						{ prop: key + '__out', label: '出数据', align: 'center' },
						{ prop: key + '__nok', label: '报废数据', align: 'center' },
						{
							prop: key + '__ratio',
							label: '报废率',
							align: 'center',
							filter: (val) => (val != null ? val + ' %' : '-'),
						},
					],
				};
				props.push(subprop);
			}

			this.tableProps = props;
		},

		/** 把 list 里的数据转换成 tableProps 对应的格式 */
		convertList(list) {
			this.list.splice(0);
			let rowIndex = 0;
			for (const line of list) {
				const { productLine, specification, data } = line;

				// 设置span的行数
				this.spanInfo[rowIndex] = data.length;
				for (const equipment of data) {
					const { equipmentName, totalQuantity } = equipment;
					let row = {
						productLine,
						specification: specification.join('、'),
						equipmentName,
						totalQuantity,
					};
					rowIndex += 1;
					for (const [key, hourData] of Object.entries(equipment.hourData)) {
						const { inQuantity, outQuantity, nokQuantity, scrapRatio } =
							hourData;
						row[key + '__in'] = inQuantity;
						row[key + '__out'] = outQuantity;
						row[key + '__nok'] = nokQuantity;
						row[key + '__ratio'] = scrapRatio;
					}
					this.list.push(row);
				}
			}
		},

		buildData(data) {
			this.convertList(data);
		},

		/** 合并table列的规则 */
		mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
			if (columnIndex == 0 || columnIndex == 1) {
				if (this.spanInfo[rowIndex]) {
					return [
						this.spanInfo[rowIndex], // row span
						1, // col span
					];
				} else {
					return [0, 0];
				}
			}
		},

		async getList() {
			const { data } = await this.$axios({
				url: '/monitoring/equipment-monitor/recent-24-hours',
				method: 'get',
			});

			// const data = this.res.data;
			// console.log('recent-24', data);

			this.initing = true;
			this.buildProps(data[0]);
			this.buildData(data);
			this.queryParams.pageSize = this.list.length;

			setTimeout(() => {
				this.initing = false;
			}, 1000);
		},

		handleEmitFun(payload) {
			console.log('payload', payload);
		},
	},
};
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
	display: none;
}

pre {
	margin: 10px;
	background: #f6f8faf6;
	border: 1px solid #e1e4e8;
	padding: 12px;
	border-radius: 12px;
	position: fixed;
	// top: 15vh;
	top: 10vh;
	left: 0;
	max-height: 80vh;
	overflow-y: auto;
	z-index: 100000;
	box-shadow: 0 0 32px 12px #0001;
}

code {
	font-family: 'IntelOne Mono', 'Ubuntu', 'Courier New', Courier, monospace;
}
</style>