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

<!--
 * @Author: lb
 * @Date: 2022-06-22 14:00:17
 * @LastEditors: fzq
 * @LastEditTime: 2023-02-09 09:53:57
 * @Description: 产线生产实时数据
-->
<template>
	<div>
		<div class="app-container">
			<small-title :size="'md'">{{ $t('realtime.pl') }}</small-title>
			<base-table v-if="loadTable" :table-head-configs="tableProps" :data="tableData.length ? tableData : []" />
		</div>
	</div>
</template>

<script>
import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
import SmallTitle from '@/components/small-title'
import moment from 'moment'
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
export default {
	name: 'RealtimeDataOfLine',
	components: { BaseTable, SmallTitle },
	data() {
		return {
			calcMaxHeight,
			loadTable: false,
			dynamicPropSet: false,
			tableProps: [{ label: 'default', prop: 'default' }],
			tableData: [],
			testData: null,
			listLoading: false,
			intervalId: null
		}
	},

	mounted() {
		// console.log('this.$route', this.$route)
		this.clearData()
		this.fetchList().then(({ data: res }) => {
			this.testData = res
			this.handleData()
			console.log('res', res)
			let loading = this.$loading({
				lock: true, //lock的修改符--默认是false
				text: this.$t('loading'), //显示在加载图标下方的加载文案
				background: 'rgba(0,0,0,0.8)', //遮罩层颜色
				spinner: 'el-icon-loading' //自定义加载图标类名
			})
			console.log('testData:', this.testData)
			if (this.testData || this.$route.fullPath !== '/monitoring-realtimeProductLine') {
				// 获取数据显示成功后，关闭loading
				loading.close()
			} else {
				this.$message.error(this.$t('err'))
			}
		})
		this.intervalId = setInterval(() => {
			this.$message({
				message: this.$t('realtime.refresh'),
				type: 'warning',
				onClose: () => {
					this.clearData()
					this.fetchList().then(({ data: res }) => {
						this.testData = res
						this.handleData()
					})
				}
			})
		}, 1000 * 60 * 5)
	},

	deactivated() {
		if (this.intervalId) clearInterval(this.intervalId)
	},
	created() {
		// console.log('this.tableData', this.tableData)
	},

	methods: {
		fetchList() {
			return this.$http({
				url: this.$http.adornUrl('/monitoring/productionMonitoring/lineProductionRealTimeData'),
				method: 'post'
			})
		},

		clearData() {
			this.dynamicPropSet = false
			this.loadTable = false
			this.testData = null
			this.tableData.splice(0)
			this.tableProps.splice(0)
			this.setStaticTableProps()
		},

		handleData() {
			this.expandDataStepOne()
			// this.expandDataStepTwo()
			if (this.tableData.length > 0) this.loadTable = true
			else {
				this.$message({
					message: i18n.t('errors.nodata'),
					type: 'info',
					duration: 2000
				})
			}
		},

		expandDataStepOne() {
			// 扩展服务器返回的数据第一阶段
			// console.log('create new one')
			this.tableData = this.testData.data.map((item) => {
				const newItem = {
					lineName: item.lineName,
					orderName: item.orderName,
					productSize: item.productSize ?? '-'
				}

				if (item.det) {
					item.det.forEach((obj) => {
						// Step2: 设置动态props
						if (!this.dynamicPropSet) {
							this.tableProps.push({
								label: moment(obj.recordTime).format('YYYY-MM-DD HH') + moment(obj.recordTime).add(1, 'hours').format('-HH') + i18n.t('hourTime'),
								children: [
									{ prop: obj.recordTime + '-inputNum', label: i18n.t('realtime.in') },
									{ prop: obj.recordTime + '-outputNum', label: i18n.t('realtime.out') }
									// { prop: obj.recordTime + '-passArea', label: i18n.t('realtime.goodrate') },
									// { prop: obj.recordTime + '-scrapNum', label: i18n.t('realtime.num') },
									// { prop: obj.recordTime + '-scrapRate', label: i18n.t('realtime.rate') }
								]
							})
						}

						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
						})

						const scrapRate = obj.scrapRate ?? '-'
						Object.defineProperty(newItem, obj.recordTime + '-scrapRate', {
							value: scrapRate === '-' ? '-' : scrapRate * 100 + '%',
							enumerable: true,
							writable: true
						})
						Object.defineProperty(newItem, obj.recordTime + '-passArea', {
							value: obj.passArea ?? '-',
							enumerable: true,
							writable: true
						})
					})

					this.dynamicPropSet = true
					return newItem
				}
			})
		},

		setStaticTableProps() {
			// Step1: 设置静态的 table props
			const staticTableProps = [{ prop: 'lineName', label: i18n.t('pl.title'), fixed: true }]
			this.tableProps = staticTableProps
		}
	}
}
</script>