Board / HH-board-2026 · Files

<template>
	<div class="app-body">
		<Header title="天晟条料数字化综合平台" :sysInitTimeNum="sysTimeNum"></Header>
		<div class="dv-content-body">
			<div class="wms-dashboard">
				<!-- 第一行：7个核心数据模块 -->
				<div class="row data-overview">
					<div class="card">
						<div class="value">128</div>
						<div class="label">总任务数</div>
					</div>
					<div class="card">
						<div class="value">32</div>
						<div class="label">完成任务</div>
					</div>
					<div class="card">
						<div class="value">96</div>
						<div class="label">进行中</div>
					</div>
					<div class="card">
						<div class="value">5</div>
						<div class="label">报警数</div>
					</div>
					<div class="card">
						<div class="value">8</div>
						<div class="label">设备总数</div>
					</div>
					<div class="card">
						<div class="value">6</div>
						<div class="label">正常运行</div>
					</div>
					<div class="card">
						<div class="value">2</div>
						<div class="label">故障设备</div>
					</div>
				</div>

				<!-- 第二行：5个工位模块（你要的中间5个） -->
				<div class="row workstations">
					<div class="card workstation">
						<h3>WS01工位</h3>
						<p>站台：空闲</p>
						<p>条码：无</p>
						<p>模式：自动</p>
						<p class="status-wait">状态：等待中</p>
					</div>
					<div class="card workstation">
						<h3>WS02工位</h3>
						<p>站台：占用</p>
						<p>条码：PRD886655</p>
						<p>模式：手动</p>
						<p class="status-error">状态：故障</p>
					</div>
					<div class="card workstation">
						<h3>WS03工位</h3>
						<p>站台：空闲</p>
						<p>条码：无</p>
						<p>模式：自动</p>
						<p class="status-normal">状态：正常</p>
					</div>
					<div class="card workstation">
						<h3>WS04工位</h3>
						<p>站台：占用</p>
						<p>条码：PRD123456</p>
						<p>模式：自动</p>
						<p class="status-normal">状态：运行中</p>
					</div>
					<div class="card workstation">
						<h3>WS05工位</h3>
						<p>站台：空闲</p>
						<p>条码：无</p>
						<p>模式：手动</p>
						<p class="status-offline">状态：离线</p>
					</div>
				</div>

				<!-- 第三行：设备与报警 -->
				<div class="row bottom-section">
					<div class="card stacker-status">
						<h3>堆垛机当前状态</h3>
						<div class="stacker-content">
							<div class="stacker-img">
								<!-- <img src="stacker.png" alt="堆垛机" /> -->
								<p class="alarm">报警信息：行走轴故障</p>
							</div>
							<div class="pallet-info">
								<p>托盘号：55111</p>
								<p>类型：出库</p>
								<p>起点：P0001</p>
								<p>终点：P0210</p>
								<p>时间：2026-02-21 15:37</p>
							</div>
						</div>
					</div>

					<div class="card stacker-chart">
						<h3>堆垛机运行(当天)</h3>
						<div class="chart-container">
							柱状图区域
						</div>
					</div>

					<div class="card alarm-table">
						<h3>报警信息(当天)</h3>
						<table>
							<thead>
								<tr>
									<th>名称</th>
									<th>异常/时间</th>
									<th>修复</th>
									<th>停机时长</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>堆垛机</td>
									<td>行走轴故障 10:30</td>
									<td>未修复</td>
									<td>30分钟</td>
								</tr>
								<tr>
									<td>WS02工位</td>
									<td>通讯异常 10:05</td>
									<td>已修复</td>
									<td>15分钟</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Header from '@/layout/appHead'
import headCenter from '@/components/headCenter'

import bodyLeft from '@/components/bodyLeft'
import bodyRight from '@/components/bodyRight'

import footerLeft from '@/components/footerLeft'
import footerRight from '@/components/footerRight'

export default {
	data() {
		return {
			baseUrlOff: 'http://172.16.30.219:5221/api/Index/GetWebFWSInfo',
			// baseUrlOff: 'http://127.0.0.1:6001/api/BulletinBoard/Mes/V1/ReadData1',
			baseUrlOnLine: window.appConfig.baseUrlintTwo,
			sysData: {},
			sysInitTimeNum: 20,
			sysTimeNum: 20,
		}
	},
	components: {
		Header,
		headCenter,
		bodyLeft,
		bodyRight,
		footerLeft,
		footerRight,
	},

	methods: {
		getAGVDataOne() {
			let opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLine : this.baseUrlOff,
				logTitle: 'AGV-路线信息',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				// isHanderAjaxSuccessActionLoad: true,
				// type: 'post',
			}
			let callBackFn = (res) => {
				if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return

				setTimeout(() => {
					this.$refs.headLeft.sed(res.data.data)
					this.$refs.headCenter.getData(res.data.data)
					this.$refs.headRight.sed(res.data.data)
					this.$refs.footerLeft.sed(res.data.data)
					this.$refs.footerRight.sed(res.data.data)
				}, 300)
			}
			''.ajax(this, opt, callBackFn)
		},
		ajaxSuccessDataBefore(res, title) {
			if (res.data.data == null || res.data.data.length == 0) {
				this.sysData = []
				''.Log(title + '无数据', 'getData')
				return false
			}
			return true
		},
		intInterval: function() {
			''.intInterval(this, this.sysInitTimeNum, () => {
				this.getAGVDataOne()
			})
		},
		setData() {
			const data1 = {
				x: ['01-15'],
				running: [450],
			}
			this.$refs.footerLeft.getwarehouseHealthbar(data1)

			const data2 = {
				x: ['01-08', '01-09', '01-10', '01-11', '01-12', '01-13', '01-14'],
				running: [650, 750, 850, 900, 800, 700, 800, 800],
			}
			this.$refs.footerLeft.getwarehouseHealthbar2(data2)

			const data4 = [
				['1号焊机', '电流过大', '01-09 15:33/1'],
				['4号焊机', '电压过冲', '01-09 13:08/1'],
				['7号焊机', '电压过冲', '01-09 10:54/1'],
				['带锯床', '未匹配到该管径信息', '01-09 09:22/0'],
			]
			this.$refs.footerRight.sed(data4)

			const data5 = {
				x: ['01-15'],
				running: [850],
			}
			this.$refs.bodyLeft.getwarehouseHealthbar(data5)

			const data3 = {
				x: ['01-08', '01-09', '01-10', '01-11', '01-12', '01-13', '01-14'],
				running: [800, 900, 650, 750, 850, 900, 750, 650],
			}
			this.$refs.bodyLeft.getwarehouseHealthbar2(data3)

			const data7 = {
				x: ['焊机', '带锯床', '切坡一体机'],
				running: [36, 1, 1],
				error: [0, 0, 0],
			}
			this.$refs.bodyRight.getwarehouseHealthbar(data7)
		},
	},
	mounted() {
		debugger
		this.setData()
		// this.getAGVDataOne()
		// this.intInterval()
	},
}
</script>

<style lang="scss" scoped>
.app-body {
	height: 100%;
	width: 100%;
}

.dv-content-body {
	height: 90%;
	width: 100%;
	// background: rebeccapurple;
}

.wms-dashboard {
	background: #0a1435;
	color: #fff;
	padding: 16px;
	font-family: Arial, sans-serif;
}
.row {
	display: flex;
	gap: 16px;
	margin-bottom: 16px;
}
.card {
	background: rgba(14, 28, 68, 0.8);
	border: 1px solid #1e3a7a;
	border-radius: 4px;
	padding: 16px;
	flex: 1;
}
.data-overview .card {
	text-align: center;
}
/* 状态颜色 */
.status-error {
	color: #f5222d;
}
.status-wait {
	color: #faad14;
}
.status-normal {
	color: #52c41a;
}
.status-offline {
	color: #8c8c8c;
}
.stacker-content {
	display: flex;
	gap: 20px;
}
.alarm {
	color: #f5222d;
	font-weight: bold;
}
table {
	width: 100%;
	border-collapse: collapse;
	color: #fff;
}
th,
td {
	border: 1px solid #1e3a7a;
	padding: 8px;
	text-align: left;
}
th {
	background: #1e3a7a;
}
</style>