pco/sp-admin/sa-view-sp/console/com-sta-data.vue

<!-- 第一行统计数据 -->
<template>
	<div>
		<div style="padding: 10px;">
			<el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
				end-placeholder="结束日期" @change="getCarStatics">
			</el-date-picker>
		</div>
		<el-row :gutter="14">
			<el-col :lg="4" :sm="8" :xs="24">
				<div class="sa-wnk">
					<img src="../../static/icon/icon-total.png">
					<div class="sa-wnk-tv">
						<p class="sa-wnk-title">入场车辆</p>
						<p class="sa-wnk-value">{{ car.todayInCar }}</p>
					</div>
				</div>
			</el-col>
			<el-col :lg="5" :sm="8" :xs="24">
				<div class="sa-wnk">
					<img src="../../static/icon/icon-car-leave.png">
					<div class="sa-wnk-tv">
						<p class="sa-wnk-title">离场车辆</p>
						<p class="sa-wnk-value">{{ car.outCar }}</p>
					</div>
				</div>
			</el-col>
			<el-col :lg="5" :sm="8" :xs="24">
				<div class="sa-wnk">
					<img src="../../static/icon/icon-car-in.png">
					<div class="sa-wnk-tv">
						<p class="sa-wnk-title">当前未出车辆</p>
						<p class="sa-wnk-value">{{ car.inCar }}</p>
					</div>
				</div>
			</el-col>
			<el-col :lg="5" :sm="8" :xs="24">
				<div class="sa-wnk">
					<img src="../../static/icon/icon-car-weight.png">
					<div class="sa-wnk-tv">
						<p class="sa-wnk-title">当前未出重车</p>
						<p class="sa-wnk-value">{{ car.weightCar }}</p>
					</div>
				</div>
			</el-col>
			<el-col :lg="5" :sm="8" :xs="24">
				<div class="sa-wnk">
					<img src="../../static/icon/icon-car-empty.png">
					<div class="sa-wnk-tv">
						<p class="sa-wnk-title">当前未出空车</p>
						<p class="sa-wnk-value">{{ car.emptyCar }}</p>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>

</template>

<script>
	module.exports = {

		data() {
			return {
				date: [new Date(), new Date()],
			
				// 统计数据
				car: {
					todayInCar: 0,
					inCar: 0,
					outCar: 0,
					weightCar: 0,
					emptyCar: 0
				},
				timmer: null
			}
		},
		methods: {
			getCarStatics() {
				let days=this.date;
				let p={};
				if (days.length == 2) {
					p.startDay = sa.forDate(days[0]);
					p.endDay = sa.forDate(days[1]);
				}
				sa.ajaxNoLoading('/TbBusinessCar/staticsCar',p, function(resp) {
					this.car = resp.data;
				}.bind(this))
			},
			checkTimeout() {
				sa.ajaxNoLoading('/AccAdmin/checkTimeout', function(resp) {
					if (resp.code == 405) {
						window.open('../../login.html');
					}
				}.bind(this))
			},

		},
		created() {
			this.getCarStatics();
			this.timmer = setInterval(() => {
				this.getCarStatics();
				this.checkTimeout();
			}, 20000)
		},
		beforeDestroy() {
			if (this.timmer != null) {
				clearInterval(this.timmer);
			}
		}

	}
</script>

<style scoped>
	/* 第一行 */
	.sa-wnk {
		background-color: #f0f0f0;
		border: 1px #ddd solid;
		margin-bottom: 14px;
		min-height: 100px;
		cursor: pointer;
		transition: all 0.3s;
		overflow: hidden;
	}

	.sa-wnk:hover {
		box-shadow: 0 0 20px #999;
	}

	.sa-wnk img {
		float: left;
		line-height: 100px;
		margin: 25px 0px 0 20px;
		width: 50px;
		height: 50px;
		vertical-align: middle;
	}

	.sa-wnk .sa-wnk-tv {
		float: left;
		margin-left: 10px;
		max-width: calc(100% - 100px);
	}

	.sa-wnk-title {
		margin-top: 25px;
		font-size: 16px;
	}

	.sa-wnk-value {
		margin-top: 4px;
		font-size: 24px;
		padding-bottom: 20px;
	}
</style>