mt-yd-ui/src/views/modules/monitoring/realtimeEquipment.vue

<!--
 * @Author: lb
 * @Date: 2022-06-22 14:00:17
 * @LastEditors: lb
 * @LastEditTime: 2022-06-22 14:00:17
 * @Description: 设备生产实时数据
-->
<template>
	<div>
		<div class="app-container">
			<!-- <small-title :size="'md'">{{ $t('module.factory.realtime.equipment.name') }}</small-title> -->
			<small-title :size="'md'">设备生产实时数据</small-title>
			<base-table v-if="loadTable" :table-head-configs="tableProps" :data="tableData.length ? tableData : []" :span-method="spanMethod" />
		</div>
	</div>
</template>

<script>
import BaseTable from '@/components/base-table'
import SmallTitle from '@/components/small-title'
import moment from 'moment'
// import fetchList from '@/api/factory-manage/realtimeData'

const fetchList = () => {}

export default {
	name: 'RealtimeDataOfEquipment',
	components: { BaseTable, SmallTitle },
	data() {
		return {
			loadTable: false,
			tableProps: [{ label: 'default', prop: 'default' }],
			stepOneArray: [],
			tableData: [],
			testData: null,
			equipmentCount: {}, // 每个产线的设备数量记录
			dynamicPropSet: false, // 是否设置过动态prop
			listLoading: false,
			rowNum: 0,
			intervalId: null
		}
	},
	created() {
		this.clearData()
		this.fetchList('equipment').then(({data: res}) => {
			this.testData = res.data.filter(item => !!item.equDet)
			this.handleData()
		})
		// this.loadTable = true
		// this.intervalId = setInterval(() => {
		// 	this.$message({
		// 		// message: this.$t('module.factory.realtime.equipment.refresh'),
		// 		type: 'warning',
		// 		duration: 1500,
		// 		onClose: () => {
		// 			this.clearData()
		// 			fetchList('equipment').then(res => {
		// 				this.testData = res
		// 				this.handleData()
		// 			})
		// 		}
		// 	})
		// }, 1000 * 60 * 5)
	},
	beforeDestroy() {
		if (this.intervalId) clearInterval(this.intervalId)
	},
	methods: {
		clearData() {
			this.tableData.splice(0)
			this.tableProps.splice(0)
			this.stepOneArray.splice(0)
			this.dynamicPropSet = false
			this.rowNum = 0
			this.testData = null
			this.loadTable = false
			this.equipmentCount = {}
			this.setStaticTableProps()
		},

		handleData() {
			this.expandDataStepOne()
			this.expandDataStepTwo()
			// console.log('span data: ', this.equipmentCount)
			this.loadTable = true
		},

		fetchList() {
			// 获取设备实时数据
			return this.$http({
				url: this.$http.adornUrl('/monitoring/productionMonitoring/equipmentProductionRealTimeData'),
				method: 'post'
			})
		},

		testSpan({ row, column, rowIndex, columnIndex }) {
			if (columnIndex === 1 && rowIndex % 2 === 0) {
				return [2, 1]
			}
			if (columnIndex === 1 && rowIndex % 2 !== 0) {
				return [0, 0]
			}
		},

		expandDataStepOne() {
			console.log('testdata: ', this.testData)
			// this.stepOneArray = this.testData.data
			// 	.filter(item => item.equDet)
			// 	.map(item => {
			// 		if (item.equDet) {
			// 			item.equDet.forEach((equipment, index) => {
			// 				equipment.lineName = item.lineName
			// 			})
			// 		}
			// 		return item.equDet
			// 	})
		},

		expandDataStepTwo() {
			// 扩展服务器返回的数据第二阶段
			console.log('before step two: ', this.stepOneArray)
			this.rowNum = 0

			this.stepOneArray.forEach(arrayItem => {
				let count = 0

				arrayItem.forEach(item => {
					// console.log('========= ', item.equName, ' ==========')
					const newItem = {
						equId: item.equId,
						lineName: item.lineName,
						equName: item.equName,
						productSize: item.productSize,
						orderName: item.orderName,
						externalCode: item.externalCode,
						totalProduction: item.totalProduction ?? '-'
					}
					if (item.det) {
						count += 1
						item.det.forEach(obj => {
							// Step2: 设置动态props
							if (!this.dynamicPropSet) {
								this.tableProps.push({
									label: moment(obj.recordTime).format('YYYY-MM-DD HH:mm:ss'),
									children: [
										// { prop: obj.recordTime + '-inputNum', label: i18n.t('module.factory.realtime.equipment.input') },
										// { prop: obj.recordTime + '-outputNum', label: i18n.t('module.factory.realtime.equipment.output') },
										// { prop: obj.recordTime + '-scrapNum', label: i18n.t('module.factory.realtime.equipment.scrapNum') },
										// {
										//   prop: obj.recordTime + '-scrapRate',
										//   label: i18n.t('module.factory.realtime.equipment.scrapRate')
										// }
									]
								})
							}

							// console.log('==> ',obj.recordTime, obj.inputNum, obj.outputNum, obj.scrapNum, obj.scrapRate)
							Object.defineProperty(newItem, obj.recordTime + '-inputNum', {
								value: obj.inputNum ?? '-',
								enumerable: true,
								writable: true
							})
							Object.defineProperty(newItem, obj.recordTime + '-outputNum', {
								value: obj.outputNum ?? '-',
								enumerable: true,
								writable: true
							})
							Object.defineProperty(newItem, obj.recordTime + '-scrapNum', {
								value: obj.scrapNum ?? '-',
								enumerable: true,
								writable: true
							})
							Object.defineProperty(newItem, obj.recordTime + '-scrapRate', {
								value: obj.scrapRate ?? '-',
								enumerable: true,
								writable: true
							})
							Object.defineProperty(newItem, 'recordTime', {
								value: obj.recordTime,
								enumerable: true,
								writable: true
							})
						})

						if (!this.dynamicPropSet) this.dynamicPropSet = true
						this.tableData.push(newItem)
					}
				})

				this.$set(this.equipmentCount, [this.rowNum], count)
				this.rowNum += count
			})
		},
		setStaticTableProps() {
			// Step1: 设置静态的 table props
			const staticTableProps = [
				// { prop: 'lineName', label: i18n.t('module.factory.realtime.equipment.pl'), fixed: true },
				// { prop: 'orderName', label: i18n.t('module.factory.realtime.equipment.currOrder'), fixed: true },
				// { prop: 'productSize', label: i18n.t('module.factory.realtime.equipment.pSpecs'), fixed: true },
				// { prop: 'equName', label: i18n.t('module.factory.realtime.equipment.eqName'), fixed: true },
				// { prop: 'totalProduction', label: i18n.t('module.factory.realtime.equipment.produceTotal'), fixed: true }
			]
			this.tableProps = staticTableProps
		},

		spanMethod({ row, column, rowIndex, columnIndex }) {
			// 设置合并行列的方式
			if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
				// 前3列需要合并多行

				if (this.equipmentCount[rowIndex]) {
					// 如果找到需要合并的行号
					return {
						rowspan: this.equipmentCount[rowIndex],
						colspan: 1
					}
				} else {
					return {
						rowspan: 0,
						colspan: 0
					}
				}
			}
		}
	}
}
</script>