upperCloth.vue 6.15 KB
<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), index < 3 ? 'dv-content-body-head-list-delit1' : 'dv-content-body-head-list-delit2']" v-for="(item, index) in topData" :key="index">
						<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.43.49:8080/wms/api/tv/topInfo',
			baseUrlOnLine: window.appConfig.baseUrlintOne,
			baseUrlOffTwo: 'http://172.16.43.49:8080/wms/api/tv/topInfo',
			baseUrlOnLineTwo: window.appConfig.baseUrlintTwo,
			baseUrlOffThree: 'http://127.0.0.1:6002/api/BulletinBoard/Mes/V1/ReadData5',
			baseUrlOnLineThree: window.appConfig.baseUrlintThree,
			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.baseUrlOnLine,
				logTitle: '任务信息',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				isHanderAjaxSuccessActionLoad: true,
			}
			let callBackFn = (res) => {
				if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return
				this.topData[0].number = res.data.result[0].sumNum
				this.topData[1].number = res.data.result[0].unHaveContainerNum
				this.topData[2].number = res.data.result[0].usagerate
				this.topData[3].number = res.data.result[0].receiptNum
				this.topData[4].number = res.data.result[0].shipmentNum
				this.topData[5].number = res.data.result[0].receiptNum2
				this.topData[6].number = res.data.result[0].shipmentNum2
			}
			''.ajax(this, opt, callBackFn)
		},
		getAGVDataTwo() {
			let opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLineTwo : this.baseUrlOnLineTwo,
				logTitle: '工位信息',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				// isHanderAjaxSuccessActionLoad: true,
			}
			let callBackFn = (res) => {
				if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return
				this.$refs.Hontent.getData(res.data.result)
			}
			''.ajax(this, opt, callBackFn)
		},
		getAGVDataThree() {
			let opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLineThree : this.baseUrlOffThree,
				logTitle: '堆垛机信息',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				// isHanderAjaxSuccessActionLoad: true,
			}
			let callBackFn = (res) => {
				if (!this.ajaxSuccessDataBeforeTwo(res, opt.logTitle)) return
				this.$refs.foodLeft.getData(res.data.data)
				this.$refs.foodConten.getData(res.data.data)
				this.$refs.foodRight.getData(res.data.data)
			}
			''.ajax(this, opt, callBackFn)
		},
		ajaxSuccessDataBefore(res, title) {
			if (res.data.result == null || res.data.result.length == 0) {
				this.sysData = []
				''.Log(title + '无数据', 'getData')
				return false
			}
			return true
		},
		ajaxSuccessDataBeforeTwo(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()
				this.getAGVDataTwo()
				this.getAGVDataThree()
			})
		},
		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.getAGVDataTwo()
		this.getAGVDataThree()
		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: 7vw;
	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 #00eff1;
	.qty {
		width: 100%;
		font-size: 2.5vw;
		font-family: electronicFont;
		color: #00eff1;
		text-align: center;
	}
	.text {
		width: 100%;
		font-size: 1.5vw;
		color: #00eff1;
		text-align: center;
	}
}
.dv-content-body-head-list-delit2 {
	width: 13vw;
	height: 7vw;
	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;
	}
}

.row {
	display: flex;
	// gap: 1;
	justify-content: space-between;
	margin: 1vw 0;
}
.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>