Board / HH-board-2026 · Files

<template>
	<div class="app-body">
		<Header title="长沙货叉预装台看板#P502" :sysInitTimeNum="sysTimeNum"></Header>
		<div class="dv-content-body">
			<div class="container">
				<!-- 左侧卡片 -->
				<div class="card">
					<div class="card-header">
						<div class="header-item">
							<div class="label">站台</div>
							<div class="value">P1001</div>
						</div>
						<div class="header-item">
							<div class="label">部件名称</div>
							<div class="value">{{ denTalbe.projectName }}</div>
						</div>
						<div class="header-item">
							<div class="label">项目号</div>
							<div class="value">{{ denTalbe.projectCode }}</div>
						</div>
						<div class="header-item">
							<div class="label">图号</div>
							<div class="value">{{ denTalbe.drawno }}</div>
						</div>
					</div>
					<table>
						<thead>
							<tr>
								<th>#</th>
								<th>工序名称</th>
								<th>加工名称</th>
								<th>状态</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item1, index) in denTalbe.detailList" :key="index">
								<td>{{ index + 1 }}</td>
								<td>{{ item1.craftName }}</td>
								<td>{{ item1.programCode }}</td>
								<td v-if="item1.status == 0">待加工</td>
								<td v-if="item1.status == 1" class="status-undone">加工中</td>
								<td v-if="item1.status == 2" class="status-done">加工完成</td>
							</tr>
						</tbody>
					</table>
				</div>

				<!-- 右侧图片：修复跨域 + 强制显示 -->
				<div class="card card-img-box">
					<img style="width:80%;height: 95%;" crossorigin="anonymous" :src="denTalbe.img" />
				</div>
			</div>
		</div>
	</div>
</template>

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

export default {
	data() {
		return {
			baseUrlOff: 'http://172.16.43.82:6002/api/BulletinBoard/Mes/V1/ReadData3',
			baseUrlOnLine: window.appConfig.baseUrlintSeven,
			sysData: {},
			sysInitTimeNum: 20,
			sysTimeNum: 20,
			denTalbe: {},
		}
	},
	components: {
		Header,
	},

	methods: {
		setData() {
			let opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLine : this.baseUrlOnLine,
				logTitle: '#P502',
				isUrlALL: true,
				headers: false,
				isHanderAjaxSuccessActionLoad: true,
			}
			let callBackFn = (res) => {
				if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return
				this.denTalbe = res.data.result
				console.log('图片地址 ===>', this.denTalbe.img)
			}
			''.ajax(this, opt, callBackFn)
		},
		ajaxSuccessDataBefore(res, title) {
			if (!res || !res.data || res.data.result == null) {
				this.sysData = []
				''.Log(title + '无数据', 'getData')
				return false
			}
			return true
		},
		intInterval: function() {
			''.intInterval(this, this.sysInitTimeNum, () => {
				this.setData()
			})
		},
	},
	mounted() {
		this.setData()
		this.intInterval()
	},
}
</script>

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

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

.container {
	display: flex;
	width: 99vw;
	height: 49vw;
	margin-left: 0.5vw;
	gap: 0.5vw;
}

.card {
	flex: 1;
	background-color: rgba(10, 26, 58, 0.8);
	border: 1px solid #00bfff;
	border-radius: 0.5vw;
	padding: 0.5vw;
	box-sizing: border-box;
}

/* 图片容器 */
.card-img-box {
	display: flex;
	align-items: center;
	justify-content: center;
}
.card-img-box img {
	display: block;
	width: 90%;
	height: auto;
	object-fit: contain;
}

/* 头部布局 一行两个 写死 */
.card-header {
	width: 100%;
	height: 15vw;
	overflow: hidden;
}

.header-item {
	float: left;
	width: 48%;
	height: 6vw;
	margin-bottom: 1vw;
	background-color: rgba(0, 60, 120, 0.6);
	border: 1px solid #00bfff;
	border-radius: 0.3vw;
	text-align: center;
	padding: 0.5vw;
	box-sizing: border-box;
}

.header-item:nth-child(2n) {
	float: right;
}

.header-item .label {
	font-size: 1.2vw;
	color: #b0e0ff;
	height: 2.5vw;
	line-height: 2.5vw;
}

.header-item .value {
	font-size: 1.8vw;
	font-weight: bold;
	color: #00ccff;
	height: 2.5vw;
	line-height: 2.5vw;
}

/* 表格样式 完全不动 */
table {
	width: 100%;
	border-collapse: collapse;
}
th,
td {
	border: 1px solid #00bfff;
	padding: 0.5vw;
	text-align: center;
	font-size: 1.2vw;
	color: #fff;
}
th {
	background-color: #007acc;
	color: #fff;
}
tr:nth-child(odd) {
	background-color: rgba(0, 40, 80, 0.6);
}
tr:nth-child(even) {
	background-color: rgba(0, 60, 100, 0.6);
}
.status-done {
	color: #00ff88;
}
.status-undone {
	color: #ffff66;
}
</style>