zfire-newmall-admin/src/views/bigViews/dataView1/components/accessoryStatistics.vue

<template>
	<moduleEnclosure title="近30日辅配件统计">
		<div class="all-container">
			<div class="item">
				<div class="title">辅材销售</div>
				<div class="num">{{statsData.fcxs || 0}}单</div>
			</div>
			<div class="item">
				<div class="title">辅材退货</div>
				<div class="num">{{statsData.fcth || 0}}单</div>
			</div>
			<div class="item">
				<div class="title">配件销售</div>
				<div class="num">{{statsData.pjxs || 0}}单</div>
			</div>
			<div class="item">
				<div class="title">配件退货</div>
				<div class="num">{{statsData.pjth || 0}}单</div>
			</div>
			<div class="item">
				<div class="title">新件待返还</div>
				<div class="num">{{statsData.xjdfh || 0}}件</div>
			</div>
			<div class="item">
				<div class="title">旧件待返还</div>
				<div class="num">{{statsData.jjdfh || 0}}件</div>
			</div>
			<div class="item">
				<div class="title">旧件待返厂</div>
				<div class="num">{{statsData.jjdfc || 0}}件</div>
			</div>
		</div>
	</moduleEnclosure>
</template>

<script>
	import moduleEnclosure from '@/components/moduleEnclosure.vue';
	import { getMaterialStats } from '@/api/bigView.js';

	export default {
		components: {
			moduleEnclosure,
		},
		
		data() {
			return {
				statsData: {},
			};
		},

		mounted() {
			this.getData();
		},

		beforeUnmount() {

		},

		methods: {
			getData() {
				getMaterialStats().then(res => {
					this.statsData = res.data;
				})
			},
		},
	};
</script>

<style scoped lang="scss">
.all-container {
	width: 100%;
	height: 100%;
	padding-top: 12px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	.item {
		width: 25%;
		height: 50%;
		.title {
			font-size: 14px;
			color: #ffffff;
			margin-bottom: 8px;
		}
		.num {
			color: #33a8c9;
			font-size: 18px;
			font-weight: bold;
		}
	}
}
</style>