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="eqName(item.name)" v-for="(item, index) in topData" :key="index" class="dv-content-body-head-list-delit1">
						<div class="qty">{{ item.number }}</div>
						<div class="text">{{ item.name }}</div>
					</div>
				</div>

				<Hontent ref="Hontent" />

				<!-- 第三行：设备与报警 -->
				<div class="dv-food">
					<foodLeft ref="foodLeft" />
					<foodConten ref="foodConten" />
					<foodRight ref="foodRight" />
				</div>
			</div>
		</div>
	</div>
</template>

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

import Hontent from '@/components/content'
import foodLeft from '@/components/foodLeft'
import foodConten from '@/components/foodConten'
import foodRight from '@/components/foodRight'

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,
			topData: [
				{ name: '总库位', number: 0 },
				{ name: '空闲库位', number: 0 },
				{ name: '利用率', number: 0 },
				{ name: '当日入库', number: 0 },
				{ name: '当日出库', number: 0 },
				{ name: '当月入库', number: 0 },
				{ name: '当月出库', number: 0 },
			],
		}
	},
	components: {
		Header,
		Hontent,
		foodLeft,
		foodConten,
		foodRight,
	},

	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()
			})
		},
		eqName(name) {
			if (name == '库存总量') {
				return 'dv-content-body-head-list-delit4'
			} else if (name == '库内物料品数') {
				return 'dv-content-body-head-list-delit2'
			} else if (name == '待执行任务数') {
				return 'dv-content-body-head-list-delit3'
			} else {
				return 'dv-content-body-head-list-delit1'
			}
		},
	},
	mounted() {
		debugger
		// this.setData()
		// this.getAGVDataOne()
		// this.intInterval()
	},
}
</script>

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

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

.wms-dashboard {
	color: #fff;
}
.dv-content-body-head-list-delit1 {
	width: 13vw;
	height: 6vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 0.2vw solid hsl(208.57deg 51.22% 40.2%);
	box-shadow: inset 0 0 1vw hsl(201, 86%, 50%);
	.qty {
		width: 100%;
		font-size: 2.5vw;
		font-family: electronicFont;
		color: hsl(200.68deg 94.87% 69.41%);
		text-align: center;
	}
	.text {
		width: 100%;
		font-size: 1.5vw;
		color: hsl(200.68deg 94.87% 69.41%);
		text-align: center;
	}
}
.dv-content-body-head-list-delit2 {
	width: 15%;
	height: 5vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 0.3vw solid hsl(264.77deg 77.48% 43.53%);
	box-shadow: inset 0 0 1vw hsl(264.77deg 77.48% 43.53%);
	.qty {
		width: 100%;
		font-size: 2vw;
		font-family: electronicFont;
		color: hsl(264.77deg 77.48% 43.53%);
		text-align: center;
	}
	.text {
		width: 100%;
		font-size: 1vw;
		color: hsl(264.77deg 77.48% 43.53%);
		text-align: center;
	}
}
.dv-content-body-head-list-delit3 {
	width: 15%;
	height: 5vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 0.3vw solid hsl(160deg 100% 30%);
	box-shadow: inset 0 0 1vw hsl(160deg 100% 30%);
	.qty {
		width: 100%;
		font-size: 2vw;
		font-family: electronicFont;
		color: hsl(160deg 100% 30%);
		text-align: center;
	}
	.text {
		width: 100%;
		font-size: 1vw;
		color: hsl(160deg 100% 30%);
		text-align: center;
	}
}
.dv-content-body-head-list-delit4 {
	width: 15%;
	height: 5vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 0.3vw solid rgb(1, 101, 113);
	box-shadow: inset 0 0 1vw rgb(1, 64, 89);
	.qty {
		width: 100%;
		font-size: 33px;
		font-family: electronicFont;
		color: rgb(0, 235, 238);
		text-align: center;
	}
	.text {
		width: 100%;
		color: rgb(0, 235, 238);
		text-align: center;
	}
}

.row {
	display: flex;
	// gap: 1;
	justify-content: space-between;
	margin-bottom: 1vw;
}
.dv-food {
	display: flex;
	// gap: 0.7vw;
	justify-content: space-between;
	margin-top: 1vw;
}
.div-span-title {
	font-size: 1.5vw;
	font-weight: 500;
}
.data-overview .card {
	text-align: center;
}
</style>