Board / HH-board-2026 · Files

<template>
	<div class="wms-ccs-container">
		<div class="content-item">
			<h2>任务统计页面</h2>
			<div class="task-stats">
				<div class="stat-item">
					<span class="stat-label">今日任务总量</span>
					<span class="stat-value">120</span>
				</div>
				<div class="stat-item">
					<span class="stat-label">已完成</span>
					<span class="stat-value success">86</span>
				</div>
				<div class="stat-item">
					<span class="stat-label">进行中</span>
					<span class="stat-value warning">24</span>
				</div>
				<div class="stat-item">
					<span class="stat-label">异常任务</span>
					<span class="stat-value error">10</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			baseUrlOff: 'http://127.0.0.1:6002/api/BulletinBoard/Mes/V1/ReadData2',
			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.baseUrlOffTwo,
				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()
		},

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

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

			console.log('设备状态定时器已启动')
		},

		// 新增：暂停接口请求
		pauseApiRequest() {
			// 停止全局刷新定时器
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer)
				this.refreshTimer = null
			}
			console.log('设备状态接口请求已暂停')
		},

		// 新增：恢复接口请求
		resumeApiRequest() {
			// 重启全局刷新
			if (!this.refreshTimer) {
				this.intInterval()
			}
			console.log('设备状态接口请求已恢复')
		},
	},
	mounted() {
		this.getData()
		this.intInterval()
	},

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

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

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

<style scoped>
/* 全局基础样式 */
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.wms-ccs-container {
	background-color: #000814;
	color: #e2e8f0;
	font-family: '微软雅黑', sans-serif;
	height: 100%;
	width: 100%;
	/* display: flex;
	flex-direction: column; */
	padding: 1vw;
	box-sizing: border-box;
	background-image: linear-gradient(145deg, #00122e 0%, #000814 100%);
}
.wms-ccs-container * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.content-item {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.content-item h2 {
	color: #fff;
	margin-bottom: 20px;
	border-bottom: 1px solid #eaeaea;
	padding-bottom: 10px;
}
/* 任务统计样式 */
.task-stats {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.stat-item {
	background-color: #ffffff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	width: 200px;
	text-align: center;
}

.stat-label {
	display: block;
	font-size: 14px;
	color: #666666;
	margin-bottom: 10px;
}

.stat-value {
	display: block;
	font-size: 24px;
	font-weight: bold;
	color: #2c3e50;
}

.stat-value.success {
	color: #2ecc71;
}

.stat-value.warning {
	color: #f39c12;
}

.stat-value.error {
	color: #e74c3c;
}
</style>