parking_operation/pages/dataOverview/todayOverview/todayOverview.vue

<!-- 今日概况 -->
<template>
	<view class="overview">
		<view class="overview-module">
			<!-- 今日概况 -->
			<view class="overview-module-1">
				<view class="overview-module-1-title">
					<text>今日概况</text>
				</view>
				<!-- 今日营收 -->
				<view class="overview-module-1-revenue">
					<view class="title">今日营收</view>
					<view class="content">
						<view class="content-left">
							<text>{{ todayData.amtIn || 0 }}</text>元
						</view>
						<view class="content-right">
							<u--image :src="require('@/static/icons/trending-up-icon.svg')" width="59px" height="36px">
							</u--image>
						</view>
					</view>
				</view>
				<view class="overview-module-1-menu">
					<view class="list">
						<view class="list-item">
							<view class="list-item-total">
								<text>{{ todayData.amtOwe || 0 }}</text>元
							</view>
							<view class="list-item-title">今日欠费</view>
						</view>
						<view class="list-item">
							<view class="list-item-total">
								<text>{{ todayData.countVehicle || 0 }}</text>次
							</view>
							<view class="list-item-title">今日停车</view>
						</view>
						<view class="list-item">
							<view class="list-item-total">
								<text>{{ todayData.countQr || 0 }}</text>次
							</view>
							<view class="list-item-title">今日扫码</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 路段概况 -->
			<view class="overview-module-1">
				<view class="overview-module-1-title">
					<text>路段概况</text>
				</view>
				<view class="overview-module-1-content">
					<view class="overview-module-1-content-revenue">
						<view class="title">路段总数</view>
						<view class="content">
							<view class="content-left">
								<text>{{ roadData.roadTotal || 0 }}</text>个
							</view>
						</view>
					</view>
					<view class="overview-module-1-content-revenue">
						<view class="title">泊位总数</view>
						<view class="content">
							<view class="content-left">
								<text>{{ roadData.spaceTotal || 0 }}</text>个
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 停车场概况 -->
			<view class="overview-module-1">
				<view class="overview-module-1-title">
					<text>停车场概况</text>
				</view>
				<view class="overview-module-1-content">
					<view class="overview-module-1-content-revenue">
						<view class="title">停车场总数</view>
						<view class="content">
							<view class="content-left">
								<text>{{ parkingLotData.total || 0 }}</text>个
							</view>
						</view>
					</view>
					<view class="overview-module-1-content-revenue">
						<view class="title">泊位总数</view>
						<view class="content">
							<view class="content-left">
								<text>{{ parkingLotData.total || 0 }}</text>个
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				todayData: {},
				roadData: {},
				parkingLotData: {}
			}
		},
		onShow() {
			this.getTodayData();
			this.getRoadData();
			// this.getParkingLotData();
		},
		methods: {
			/**
			 * 获取今日概况
			 */
			getTodayData() {
				uni.$u.api.todayOverviewApi.getTodayDataApi().then(res => {
					if (res.code === 200) {
						this.todayData = res.data
					} else {
						this.$refs.uToast.show({
							loading: true,
							message: res.msg || '获取今日概况失败!',
							type: 'error'
						})
					}
				})
			},
			/**
			 * 获取路段概况
			 */
			getRoadData() {
				uni.$u.api.todayOverviewApi.getRoadDataApi().then(res => {
					if (res.code === 200) {
						this.roadData = res.data
					} else {
						this.$refs.uToast.show({
							loading: true,
							message: res.msg || '获取路段概况失败!',
							type: 'error'
						})
					}
				})
			},
			/**
			 * 获取停车场概况
			 */
			getParkingLotData() {
				uni.$u.api.todayOverviewApi.getParkingLotDataApi().then(res => {
					if (res.code === 200) {
						this.parkingLotData = res.data
					} else {
						this.$refs.uToast.show({
							loading: true,
							message: res.msg || '获取停车场概况失败!',
							type: 'error'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: calc(100vh - 44px);
		background-color: #1767F2;
	}
</style>

<style lang="scss" scoped>
	@import './todayOverview.scss';
</style>