Board / HH-board-2026 · Files

<template>
	<div class="app-body">
		<Header title="舟中拣货看板-P1005" :sysInitTimeNum="sysTimeNum"></Header>
		<div class="dv-content-body" v-for="(item, index) in tableData" :key="index">
			<!-- 主表 -->
			<div class="dv-content-body-head">
				<div class="headContent">{{ $gl('TrayNumber') }}：{{ item.taskHeader.containerCode }}</div>
				<div class="headContent">{{ $gl('Start/TargetLocation') }}：{{ item.taskHeader.fromLocationCode }}</div>
				<div class="headContent">{{ $gl('Start/TargetPlatform') }}：{{ item.taskHeader.toPortCode }}</div>
				<div class="headContent">{{ $gl('taskType') }}：{{ item.taskHeader.userdef1 }}</div>
				<!-- <div class="headContent">{{ $gl('taskStatus') }}：{{ item.taskHeader.userdef4 }}</div> -->
			</div>

			<!-- 明细表-上 -->
			<div class="dv-content-body-detail">
				<div class="dv-content-body-detail-broder">
					<dv-border-box-8 :dur="35" :reverse="setDvBorderBox(index)" :color="[, '#ffffff']">
						<div style="height: 100%; width: 98%; margin-top: 0vw">
							<div class="dv-content-body-detail-conter">
								<div class="box-con-main">
									<dv-scroll-board :config="item.tablePickupConfig" style="width: 100%; height: 100%" />
								</div>
							</div>
						</div>
					</dv-border-box-8>
				</div>
			</div>
		</div>

		<div class="dv-content-body-two" v-for="(item, index) in tableDataTwo" :key="index">
			<!-- 主表 -->
			<div class="dv-content-body-head">
				<div class="headContent">{{ $gl('TrayNumber') }}：{{ item.taskHeader.containerCode }}</div>
				<div class="headContent">{{ $gl('Start/TargetLocation') }}：{{ item.taskHeader.fromLocationCode }}</div>
				<div class="headContent">{{ $gl('Start/TargetPlatform') }}：{{ item.taskHeader.toPortCode }}</div>
				<div class="headContent">{{ $gl('taskType') }}：{{ item.taskHeader.userdef1 }}</div>
				<!-- <div class="headContent">{{ $gl('taskStatus') }}：{{ item.taskHeader.userdef4 }}</div> -->
			</div>

			<!-- 明细表-上 -->
		</div>
	</div>
</template>
<script>
import Header from '@/layout/appHead'

export default {
	data() {
		return {
			baseUrlOff: this.baseUrlOff,
			baseUrlOnLine: this.baseUrlOnLine,
			sysInitTimeNum: window.appConfig.sysTimeNum,
			sysTimeNum: window.appConfig.sysTimeNum,
			sysData: {},

			//代码降级后，static中js文件的数据使用
			finishProductOne: window.finishProductOne,
			finishProductOneEnglish: window.finishProductOneEngslish,
			tableData: [],
			tableDataTwo: [],
			languageConfigTable: window.appConfig.languageConfig,
		}
	},
	components: { Header },
	computed: {},
	watch: {
		sysData: {
			handler(newVal, oldVal) {
				// this.setPickupTable()
			},
			deep: true, // 深度监听
		},
	},
	methods: {
		// 获取数据
		getData() {
			let opt = {
				urlSuffix: 'wms/api/tv/taskOfStation?code=' + window.appConfig.code,
				// urlSuffix: '/api/BulletinBoard/Mes/V1/ReadData1',
				logTitle: 'P1009信息看板',
				headers: window.baseOnLineOrOff,
				isHanderAjaxSuccessActionLoad: true,
			}
			let callBackFn = (res) => {
				if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return
				this.setPickupTable()
			}
			''.ajax(this, opt, callBackFn)
		},
		// 解析数据渲染
		setPickupTable() {
			let tempResult = []
			this.sysData.forEach((item) => {
				var tempPickup = { taskHeader: null, tablePickupConfig: {} }
				var tempBodyData = []
				tempPickup.taskHeader = item.taskHeader
				item.taskDetailList.forEach((x) => {
					tempBodyData.push([x.sn, x.materialCode, x.materialName, x.materialSpec, x.qty])
				})

				tempPickup.tablePickupConfig = {
					header: ['序列号', '物料编码', '物料名称', '物料规格', '数量'],
					index: true,
					rowNum: 2,
					carousel: 'page',
					waitTime: 4000,
					data: tempBodyData,
					align: this.finishProductOne.align,
					columnWidth: [50, 220, 220, 220, 220, 150],
					headerHeight: 35,
				}
				tempResult.push(tempPickup)
			})
			this.tableData = [tempResult[0]]
			this.tableDataTwo = tempResult.slice(1)
			console.log(this.tableData, 'this.tableDataTwo')
		},
		setDvBorderBox(index) {
			return index % 2 === 0 ? true : false
		},

		ajaxSuccessDataBefore(res, title) {
			if (res.data.result == null || res.data.result.length == 0) {
				''.Log(title + '无数据', 'getData')
				this.sysData = []
				this.tableData = [
					{
						taskHeader: {
							containerCode: '',
							fromLocation: '',
							port: '',
							taskType: '',
						},
						tablePickupConfig: { header: ['序列号', '物料编码', '物料名称', '物料规格', '数量'], index: true, rowNum: 2, carousel: 'page', waitTime: 4000, data: [], columnWidth: [50, 220, 220, 220, 220, 150], headerHeight: 35 },
					},
				]
				return false
			}
			return true
		},
		intInterval: function() {
			''.intInterval(this, this.sysInitTimeNum, () => {
				this.getData()
			})
		},
	},
	mounted() {
		//eslint-disable-next-line no-debugger
		debugger
		this.getData()
		this.intInterval()
	},
}
</script>

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

	.dv-content-body {
		width: 98%;
		height: 17.5vw;
		margin: auto;
		.dv-content-body-head {
			height: 20%;
			//border: 1px solid red;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
		}
		.headContent {
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid rgb(50, 153, 205);
			width: 20%;
			height: 100%;
			color: #ffffff;
			font-size: 1.3vw;
			border-radius: 10px 10px 10px 10px;
		}
	}
	.dv-content-body-two {
		width: 98%;
		height: 5vw;
		margin: auto;
		.dv-content-body-head {
			height: 70%;
			//border: 1px solid red;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
		}
		.headContent {
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid rgb(50, 153, 205);
			width: 20%;
			height: 100%;
			color: #ffffff;
			font-size: 1.3vw;
			border-radius: 10px 10px 10px 10px;
		}
	}

	.dv-content-body-detail {
		height: 13.5vw;
		width: 100%;
		display: flex;
		// margin: 1vw 0 0 0vw;
		justify-content: space-between;
		box-sizing: border-box;
		position: relative;
		.dv-content-body-detail-broder {
			width: 100%;
			height: 100%;
			.dv-content-body-detail-conter {
				border-radius: 3px;
				height: 100%;

				.box-con-title {
					width: 100%;
					height: 2.5vh;
					display: flex;
					align-items: center;
					padding: 0.3vw;
					color: #ffffff;
				}

				.box-con-main {
					padding: 0.9vw 1vw;
					.box-con-echarts01 {
						width: 100%;
						height: calc(100% - 10vh);
					}
				}

				.box-con-main02 {
					width: 100%;
					height: calc(50% - 4vh);
					margin-top: 0.5vh;
				}
			}

			.box-con-main {
				width: 100%;
				height: calc(100% - 4vh);
				margin-top: 0.5vh;

				.box-con-echarts01 {
					width: 100%;
					height: calc(100% - 10vh);
				}
			}
		}
	}
}
</style>
<style lang="scss">
/*datav-表格-表头样式*/
.app-body {
	.dv-scroll-board .header {
		display: flex;
		flex-direction: row;
		font-size: 1.8vw !important;
		font-weight: 600 !important;
	}
	/*datav-表格-数据样式*/
	.dv-scroll-board .rows .ceil {
		font-size: 1.8vw;
	}
	/*datav-表格-行间距*/
	.dv-scroll-board .rows .row-item {
		padding-top: 2px 0 0 2px;
	}
}
</style>