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" />
		<!-- <pre><code v-html="jsondemo"></code></pre> -->

		<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>
import response from './response.json';
import { handleNameData, handleDynamicData } from '@/utils/dynamicProps';
// import hljs from 'highlight.js/lib/highlight';
// import json from 'highlight.js/lib/languages/json';
// import 'highlight.js/styles/github-gist.css';

// hljs.registerLanguage('json', json);

export default {
	name: 'QualityRecentHours',
	components: {},
	props: {},
	data() {
		return {
			initing: false,
			queryParams: {
				pageNo: 1,
				pageSize: 10,
			},
			list: [
				{
					productLine: '产线1',
					specification: ['80*11', '100*10'].join(','),
					equipmentName: '上片机',
					totalQuantity: 1000,
					'l-1__in': 100,
					'l-1__out': 99,
					'l-1__nok': 1,
					'l-1__ratio': 1,
					'l-2__in': 100,
					'l-2__out': 99,
					'l-2__nok': 1,
					'l-2__ratio': 1,
					'l-3__in': 100,
					'l-3__out': 99,
					'l-3__nok': 1,
					'l-3__ratio': 1,
					'l-4__in': 100,
					'l-4__out': 99,
					'l-4__nok': 1,
					'l-4__ratio': 1,
				},
				{
					productLine: '产线1',
					specification: ['80*11', '100*10'].join(','),
					equipmentName: '磨边机',
					totalQuantity: 1000,
					'l-1__in': 100,
					'l-1__out': 99,
					'l-1__nok': 1,
					'l-1__ratio': 1,
					'l-2__in': 100,
					'l-2__out': 99,
					'l-2__nok': 1,
					'l-2__ratio': 1,
					'l-3__in': 100,
					'l-3__out': 99,
					'l-3__nok': 1,
					'l-3__ratio': 1,
					'l-4__in': 100,
					'l-4__out': 99,
					'l-4__nok': 1,
					'l-4__ratio': 1,
				},
				{
					productLine: '产线1',
					specification: ['80*11', '100*10'].join(','),
					equipmentName: '清洗机',
					totalQuantity: 1000,
					'l-1__in': 100,
					'l-1__out': 99,
					'l-1__nok': 1,
					'l-1__ratio': 1,
					'l-2__in': 100,
					'l-2__out': 99,
					'l-2__nok': 1,
					'l-2__ratio': 1,
					'l-3__in': 100,
					'l-3__out': 99,
					'l-3__nok': 1,
					'l-3__ratio': 1,
					'l-4__in': 100,
					'l-4__out': 99,
					'l-4__nok': 1,
					'l-4__ratio': 1,
				},
				// 产线2
				{
					productLine: '产线2',
					specification: ['80*11', '100*10'].join(','),
					equipmentName: '上片机',
					totalQuantity: 1000,
					'l-1__in': 100,
					'l-1__out': 99,
					'l-1__nok': 1,
					'l-1__ratio': 1,
					'l-2__in': 100,
					'l-2__out': 99,
					'l-2__nok': 1,
					'l-2__ratio': 1,
					'l-3__in': 100,
					'l-3__out': 99,
					'l-3__nok': 1,
					'l-3__ratio': 1,
					'l-4__in': 100,
					'l-4__out': 99,
					'l-4__nok': 1,
					'l-4__ratio': 1,
				},
				{
					productLine: '产线2',
					specification: ['80*11', '100*10'].join(','),
					equipmentName: '磨边机',
					totalQuantity: 1000,
					'l-1__in': 100,
					'l-1__out': 99,
					'l-1__nok': 1,
					'l-1__ratio': 1,
					'l-2__in': 100,
					'l-2__out': 99,
					'l-2__nok': 1,
					'l-2__ratio': 1,
					'l-3__in': 100,
					'l-3__out': 99,
					'l-3__nok': 1,
					'l-3__ratio': 1,
					'l-4__in': 100,
					'l-4__out': 99,
					'l-4__nok': 1,
					'l-4__ratio': 1,
				},
				{
					productLine: '产线2',
					specification: ['80*11', '100*10'].join(','),
					equipmentName: '清洗机',
					totalQuantity: 1000,
					'l-1__in': 100,
					'l-1__out': 99,
					'l-1__nok': 1,
					'l-1__ratio': 1,
					'l-2__in': 100,
					'l-2__out': 99,
					'l-2__nok': 1,
					'l-2__ratio': 1,
					'l-3__in': 100,
					'l-3__out': 99,
					'l-3__nok': 1,
					'l-3__ratio': 1,
					'l-4__in': 100,
					'l-4__out': 99,
					'l-4__nok': 1,
					'l-4__ratio': 1,
				},
			],
			tableProps: [
				{ prop: 'productLine', label: '产线', align: 'center' },
				{ prop: 'specification', label: '规格', align: 'center' },
				{ prop: 'equipmentName', label: '设备', align: 'center' },
				{ prop: 'totalQuantity', label: '生产总数', align: 'center' },
				{
					label: 'l-1',
					align: 'center',
					children: [
						{ prop: 'l-1__in', label: '进数据', align: 'center' },
						{ prop: 'l-1__out', label: '出数据', align: 'center' },
						{ prop: 'l-1__nok', label: '报废数据', align: 'center' },
						{ prop: 'l-1__ratio', label: '报废率', align: 'center' },
					],
				},
				{
					label: 'l-2',
					align: 'center',
					children: [
						{ prop: 'l-2__in', label: '进数据', align: 'center' },
						{ prop: 'l-2__out', label: '出数据', align: 'center' },
						{ prop: 'l-2__nok', label: '报废数据', align: 'center' },
						{ prop: 'l-2__ratio', label: '报废率', align: 'center' },
					],
				},
				{
					label: 'l-3',
					align: 'center',
					children: [
						{ prop: 'l-3__in', label: '进数据', align: 'center' },
						{ prop: 'l-3__out', label: '出数据', align: 'center' },
						{ prop: 'l-3__nok', label: '报废数据', align: 'center' },
						{ prop: 'l-3__ratio', label: '报废率', align: 'center' },
					],
				},
				{
					label: 'l-4',
					align: 'center',
					children: [
						{ prop: 'l-4__in', label: '进数据', align: 'center' },
						{ prop: 'l-4__out', label: '出数据', align: 'center' },
						{ prop: 'l-4__nok', label: '报废数据', align: 'center' },
						{ prop: 'l-4__ratio', label: '报废率', align: 'center' },
					],
				},
			],

			HTTPResponse: {
				code: 0,
				msg: 'success',
				data: [
					// 这是一行数据
					{
						productLine: '产线001',
						spectification: '规格1、规格2、规格3',
						data: [
							{
								equipmentName: '上片机',
								totalQuantity: 24444,
								1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
								1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
								// more 时间戳数据
							},
							{
								equipmentName: '磨边机',
								totalQuantity: 222222,
								1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
								1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
								// more 时间戳数据
							},
							{
								equipmentName: '清洗机',
								totalQuantity: 222,
								1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
								1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
								// more 时间戳数据
							},
							// more 设备数据
						],
					},
					// 这是一行数据
					{
						productLine: '产线002',
						spectification: '规格1、规格2、规格3',
						data: [
							{
								equipmentName: '上片机',
								totalQuantity: 24444,
								1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
								1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
								// more 时间戳数据
							},
							{
								equipmentName: '磨边机',
								totalQuantity: 222222,
								1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
								1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
								// more 时间戳数据
							},
							{
								equipmentName: '清洗机',
								totalQuantity: 222,
								1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
								1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
								// more 时间戳数据
							},
							// more 设备数据
						],
					},
				],
			},

			res: {
				code: 0,
				msg: 'success',
				data: [
					{
						productLine: '产线22',
						specification: ['1000*29*1', '898'],
						data: [
							{
								equipmentName: '下片机',
								totalQuantity: 15,
								hourData: {
									'2023-08-29T09:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-29T10:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-29T11:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-29T12:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-29T13:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-29T14:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-29T15:24:09.878': {
										inQuantity: 9,
										nokQuantity: 6,
										outQuantity: 8,
										scrapRatio: 0.46153846,
									},
									'2023-08-29T16:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-29T17:24:09.878': {
										inQuantity: 1,
										nokQuantity: 1,
										outQuantity: 1,
										scrapRatio: 0.5,
									},
									'2023-08-29T18:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-29T19:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-29T20:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-29T21:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-29T22:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-29T23:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-30T00:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-30T01:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-30T02:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-30T03:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-30T04:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-30T05:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-30T06:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-30T07:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
									'2023-08-30T08:24:09.878': {
										inQuantity: 0,
										nokQuantity: 0,
										outQuantity: 0,
										scrapRatio: 0.0,
									},
								},
							},
						],
					},
				],
			},

			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' },
					],
				};
				props.push(subprop);
			}

			this.tableProps = props;
		},

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

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

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

		/** 合并table列的规则 */
		mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
			// console.log('handle merge column', row, column, rowIndex, columnIndex);
			if (columnIndex == 0 || columnIndex == 1 || columnIndex == 3) {
				if (rowIndex % 3 == 0) {
					return [
						3, // this.spanInfo[rowIndex], // row span
						1, // col span
					];
				} else {
					return [0, 0];
				}
			}
			// return { rowspan: 3, colspan: 1 };
		},

		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.buildProps(data[0]);
			this.buildData(data);

			// this.initing = true;
			// const dynamicProps = handleNameData(nameData);
			// this.tableProps.push(...dynamicProps);
			// const dataList = handleDynamicData(dyanmicData);
			// this.list = dataList;
			// this.queryParams.pageSize = dataList.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>