cmc / huaheng-cmc · Files

<template>
	<div class="cmc-table-page">
		<!-- <div class="header">
			<div class="wms-title">机加库区</div>
			<div class="status-lights">
				<div class="status-value big-value">{{ timeStr }}</div>
				<div class="status-item status-switch">
					<button class="search-btn green-btn">库区切换</button>
				</div>
			</div>
		</div> -->

		<div class="task-section">
			<div class="table-wrapper">
				<table class="task-table task-table--fixed">
					<thead>
						<tr>
							<th>设备ID</th>
							<!-- <th>设备状态</th> -->
							<th>设备状态</th>
							<th>设备运行模式</th>
							<th>设备当前位置</th>
							<th>异常信息</th>
							<th>异常处理方案</th>
							<th>异常开始时间</th>
							<th>上报时间戳</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item, index) in taskList" :key="index" :class="{ 'green-text': item.equipmentStatusDescription === '运行中', 'red-text': item.equipmentStatusDescription === '异常' }">
							<td>{{ item.equipmentId }}</td>
							<!-- <td>{{ item.equipmentStatus }}</td> -->
							<td>{{ item.equipmentStatusDescription }}</td>
							<td>{{ item.equipmentOperationModeDescription }}</td>
							<td>{{ item.equipmentCurrentPosition }}</td>
							<td>
								<div class="multiline-content" :title="item.exceptionMessage">
									{{ formatLongText(item.exceptionMessage) }}
								</div>
							</td>
							<td>
								<div class="multiline-content" :title="item.exceptionHandlePlan">
									{{ formatLongText(item.exceptionHandlePlan) }}
								</div>
							</td>
							<td>{{ item.exceptionStartTime }}</td>
							<td>{{ item.timestampFormat }}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<el-dialog title="任务阶段查看" :visible.sync="drawer" width="75%" :before-close="handleClose">
			<el-steps finish-status="success" :active="temp + 1">
				<el-step v-for="(item, index) in deviceStatus" :key="index" :title="item.key" :description="item.value">
					<template v-slot:description>
						<el-button size="small">查看详情</el-button>
					</template>
				</el-step>
			</el-steps>
		</el-dialog>
	</div>
</template>

<script>
import { CMC_OFFLINE_STATUS_API } from '@/api/cmcApi'

export default {
	name: 'DeviceStatusView',
	data() {
		return {
			baseUrlOff: CMC_OFFLINE_STATUS_API,
			baseUrlOnLine: window.appConfig.baseUrlintOne,
			sysData: {},
			timer: null,
			deviceStatus: [],
			taskList: [],
			drawer: false,
			direction: 'rtl',
			device: {},
			temp: 0,

			// 新增：定时器控制字段
			refreshTimer: null, // 全局刷新定时器ID
		}
	},
	methods: {
		getData() {
			const opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLine : this.baseUrlOff,
				logTitle: '设备状态查询',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				type: 'post',
			}
			const callBackFn = (res) => {
				if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return
				this.taskList = res.data.result
			}
			''.ajax(this, opt, callBackFn)
		},

		ajaxSuccessDataBefore(res, title) {
			if (!res || !res.data || res.data.result == null || res.data.result.length === 0) {
				this.sysData = []
				''.Log(`${title}无数据`, 'getData')
				return false
			}
			return true
		},

		progress(item) {
			const taskStatusList = Object.entries(item.taskStatusTimestamps).map(([key, value]) => ({
				key: key,
				value: value,
			}))
			if (!taskStatusList.length) {
				this.temp = -1
				return
			}
			let lastValidIndex = -1
			taskStatusList.forEach((item, index) => {
				if (item.value !== null) {
					lastValidIndex = index
				}
			})
			this.temp = lastValidIndex
			this.deviceStatus = taskStatusList
			this.drawer = true
		},

		handleClose(done) {
			done()
		},

		// 新增：格式化长文本，只显示2行
		formatLongText(text) {
			if (!text) return '无'

			// 如果文本长度超过20个字符，截断并添加"..."
			if (text.length > 20) {
				return text.substring(0, 36) + '...'
			}

			return text
		},

		// 修改：定时器启动方法
		intInterval: function() {
			// 清理现有定时器
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer)
			}

			// 启动新的定时器
			this.refreshTimer = setInterval(() => {
				this.getData()
			}, 10000)

		},

		// 新增：暂停接口请求
		pauseApiRequest() {
			// 停止全局刷新定时器
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer)
				this.refreshTimer = null
			}
		},

		// 新增：恢复接口请求
		resumeApiRequest() {
			// 重启全局刷新
			if (!this.refreshTimer) {
				this.intInterval()
			}
		},
	},
	mounted() {
		this.getData()
		this.intInterval()
	},

	// 新增：组件销毁时停止定时器
	beforeDestroy() {
		this.pauseApiRequest()
	},

	// 新增：激活组件时恢复请求
	activated() {
		this.resumeApiRequest()
	},

	// 新增：停用组件时暂停请求
	deactivated() {
		this.pauseApiRequest()
	},
}
</script>

<style src="../../styles/cmc-table.css"></style>