headLeft.vue 3.26 KB
<template>
	<div class="dv-content-body-head-list-left">
		<dv-border-box-12>
			<div>
				<div class="dv-content-body-head-list-left-title">{{ $gl('day') }}</div>
				<div class="dv-content-body-head-list-left-details">
					<div class="dv-content-body-head-list-left-text">
						<div class="dv-content-body-head-list-left-text-digit">{{ result.shipmentNum }}</div>
						<div class="dv-content-body-head-list-left-text-library">{{ $gl('outbound') }}</div>
					</div>
					<div class="dv-content-body-head-list-left-text">
						<div class="dv-content-body-head-list-left-text-digit">{{ result.receiptNum }}</div>
						<div class="dv-content-body-head-list-left-text-library">{{ $gl('warehousing') }}</div>
					</div>
					<div class="dv-content-body-head-list-left-dataV"><dv-percent-pond :config="conf" style="width:100%;height:100%;" /></div>
				</div>
			</div>
		</dv-border-box-12>
	</div>
</template>

<script>
export default {
	data() {
		return {
			sysData: {},
			unit: '',
			conf: null,

			result: {
				shipmentNum: 0, //出库量
				receiptNum: 0, //入库量
			},
		}
	},
	methods: {
		getData(flag, e) {
			let urlSuffix = window.baseOnLineOrOff ? '/wms/api/tv/todayTaskNum?zoneCode=L' : 'wms/api/tv/todayTaskNum?zoneCode='
			var opt = {
				urlSuffix: urlSuffix + flag,
				logTitle: '当天',
				allowConcurrentRequests: false,
				isHanderAjaxSuccessActionLoad: true,
				headers: true
			}
			let callBackFn = (res) => {
				this.conf = null
				if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return
				let data = ''
				switch (flag) {
					case 'A':
						data = '箱'
						break
					case 'B':
						data = '盘'
						break
					case 'C':
						data = '桶'
						break
					case 'D':
						data = '托'
						break
				}
				this.unit = data
				this.result.shipmentNum = this.sysData[0].shipmentNum

				this.result.receiptNum = this.sysData[0].receiptNum
				this.conf = {
					value: this.sysData[0].proportion,
					borderWidth: 2,
				}
			}
			''.ajax(this, opt, callBackFn)
		},
		ajaxSuccessDataBefore(res, title) {
			if (res.data == null) {
				''.Log(title + '无数据', 'getData')
				this.result.shipmentNum = 0
				this.result.proportion = 0
				this.result.receiptNum = 0
				return false
			}
			return true
		},
	},
}
</script>

<style lang="less" scoped>
.dv-content-body-head-list-left {
	flex-direction: column;
	justify-content: space-between;
	width: 33vw;
	height: 95%;
	div {
		.dv-content-body-head-list-left-title {
			width: 100%;
			height: 20%;
			padding: 8px 0 0 22px;
			font-size: 1.5vw;
			color: aliceblue;
			font-weight: 800;
		}
		.dv-content-body-head-list-left-details {
			display: flex;
			width: 96%;
			height: 19vh;

			.dv-content-body-head-list-left-text {
				width: 34%;
				height: 50%;
				display: block;
				text-align: center;
				margin: 5px 0 0 13px;
				border: 2px solid rgb(4, 126, 213);
				border-radius: 10px;
				.dv-content-body-head-list-left-text-digit {
					width: 100%;
					height: 50%;
					font-size: 20px;
					color: #fff;
					line-height: 40px;
				}
				.dv-content-body-head-list-left-text-library {
					width: 100%;
					height: 50%;
					font-size: 15px;
					color: #fff;
				}
			}
			.dv-content-body-head-list-left-dataV {
				width: 12vw;
				height: 50%;
				margin: 5px 0 0 12px;
			}
		}
	}
}
</style>