Board / HH-board-2026 · Files

<template>
	<div class="app-body">
		<Header title="金叠利拣选看板P1001" :sysInitTimeNum="sysTimeNum"></Header>
		<!-- <div class="dv-top-fiex">
			<div class="dv-top-fiex-secondFloor" v-for="(item, index) in topConCardData" :key="index">
				<div class="dv-top-fiex-secondFloor-top">{{ item.name }}</div>
				<div class="dv-top-fiex-secondFloor-bottom">
					<div class="digit" :style="item.style">
						{{ item.qty }}
					</div>
					<div class="unit">
						{{ item.name === '空库位' ? '个' : item.name === '空托组' ? '托' : '包' }}
					</div>
				</div>
			</div>
		</div> -->
		<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 }}/{{
					item.taskHeader.toLocationCode }}</div>
				<div class="headContent">{{ $gl('Start/TargetPlatform') }}:{{ item.taskHeader.fromPortCode }}/{{
					item.taskHeader.toPortCode }}</div>
				<div class="headContent">{{ $gl('taskType') }}：{{ item.taskHeader.userdef2 }}</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>
</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: [
				{
					taskHeader: {
						containerCode: '',
						fromLocation: '',
						port: '',
						taskType: '',
					},
					tablePickupConfig: { header: ['物料编码', '物料名称', '物料单位', '数量'], index: true, rowNum: 2, carousel: 'page', waitTime: 4000, data: [], columnWidth: [50, 220, 220, 220, 220], headerHeight: 35 },
				},
			],
			languageConfigTable: window.appConfig.languageConfig,
			topConCardData: [
				// { name: '高库位有货', qty: '0', style: 'color:#3de7c9' },
				// { name: '高库位无货', qty: '0', style: 'color:#2488ff' },
				// { name: '高库位空托', qty: '0', style: 'color:#2368ff' },
				// { name: '矮库位有货', qty: '0', style: 'color:#E6A23C' },
				// { name: '矮库位无货', qty: '0', style: 'color:#3de7c9' },
				// { name: '矮库位空托', qty: '0', style: 'color:#FF00FF' },
			],
		}
	},
	components: { Header },
	computed: {},
	watch: {
		sysData: {
			handler(newVal, oldVal) {
				// this.setPickupTable()
			},
			deep: true, // 深度监听
		},
	},
	methods: {
		// 获取数据
		getData() {
			let opt = {
				urlSuffix: '/wms/api/tv/taskOfStation?code=' + window.appConfig.station2,
				// urlSuffix: '/wms/api/tv/taskOfStation?code=1',
				// urlSuffix: 'api/BulletinBoard/Mes/V1/ReadData1',
				logTitle: 'P1138信息看板',
				headers: true,
				isHanderAjaxSuccessActionLoad: true,
			}
			let callBackFn = (res) => {
				if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return
				this.setPickupTable()
			}
			''.ajax(this, opt, callBackFn)
		},
		getDataTwo() {
			let opt = {
				urlSuffix: '/wms/api/tv/inventoryAnalyse?zoneCode=' + window.appConfig.station3,
				// urlSuffix: 'api/BulletinBoard/Mes/V1/ReadData2',
				logTitle: '任务信息看板',
				headers: window.baseOnLineOrOff,
				isHanderAjaxSuccessActionLoad: true,
			}
			let callBackFn = (res) => {
				if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return
				res.data.result.inventoryDetails.forEach((x) => {
					x.style = 'color:#FFF'
				})
				this.topConCardData = res.data.result.inventoryDetails
			}
			''.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.materialCode, x.materialName, x.materialUnit, x.qty])
				})

				tempPickup.tablePickupConfig = {
					header: ['物料编码', '物料名称', '物料单位', '数量'],
					index: true,
					rowNum: 2,
					carousel: 'page',
					waitTime: 4000,
					data: tempBodyData,
					align: this.finishProductOne.align,
					columnWidth: [50, 280, 400, 220, 220],
					headerHeight: 35,
				}
				tempResult.push(tempPickup)
			})
			this.tableData = tempResult
		},
		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], headerHeight: 35 },
					},
				]
				return false
			}
			return true
		},
		intInterval: function () {
			''.intInterval(this, this.sysInitTimeNum, () => {
				this.getData()
				// this.getDataTwo()
			})
		},
	},
	mounted() {
		//eslint-disable-next-line no-debugger
		debugger
		this.getData()
		// this.getDataTwo()
		this.intInterval()
	},
}
</script>

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

	.dv-top-fiex {
		width: 99.5%;
		height: 100px;
		display: flex;
		background-color: rgba(6, 30, 93, 0.5);

		.dv-top-fiex-secondFloor {
			width: 20%;
			height: 85%;
			margin-top: 7px;
			border-left: 3px solid #061e5d;
			border-right: 3px solid #061e5d;

			.dv-top-fiex-secondFloor-top {
				width: 99%;
				height: 40%;
				margin: auto;
				color: #fff;
				font-size: 18px;
				line-height: 30px;
				text-align: center;
			}

			.dv-top-fiex-secondFloor-bottom {
				display: flex;
				width: 90%;
				height: 50%;
				margin: auto;
				font-weight: 500;

				.digit {
					width: 50%;
					font-size: 25px;
					font-weight: 600;
					line-height: 80px;
					text-align: right;
				}

				.unit {
					width: 20%;
					color: #fff;
					font-size: 20px;
					font-weight: 500;
					margin-left: 5px;
					line-height: 80px;
				}
			}
		}
	}

	.dv-content-body {
		width: 98%;
		height: 31vh;
		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: 10vw;
		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>