zx_flk_app/pages/dashboard/dashboard.vue

<template>
	<view class="dashboard-page zx-page-linear">
		<navBar bgColor="transparent"></navBar>
		<view class="dashboard">
			<view class="shadow" :style="{ '--progress': progress || 0 + '%' }"></view>
			<view class="spe-wrap">
				<view class="spe-num">
					{{ infoList.speed || 0 }}
				</view>
				<view class="unit">km/h</view>
			</view>
			<view class="power-wrap">
				<u-count-to :startVal="0" bold :endVal="progress || 0" fontSize="48rpx" />
			</view>
		</view>

		<view class="battery_life_progress">
			<view>
				<view :style="{width:((infoList.remain_mail || 0 / infoList.endurance || 0) * 100) + '%'}"
					class="is_progress"></view>
				<view class="text">
					<text>续航</text>
					<text style="margin-left: 20rpx;"> {{(infoList.remain_mail || 0/1000).toFixed(0) || 0}}km </text>
				</view>
			</view>
			<view style="font-weight: 600;font-size: 36rpx;">
				{{ ((infoList.remain_mail || 0 / infoList.endurance || 0) * 100) + '%' }}
			</view>

		</view>

		<view class="info-container">
			<view class="info-wrap" v-for="(item, index) in infoList.list" :key="index">
				<view class="label">{{ item.label }}</view>
				<view class="value">{{ item.prop }} <text class="unit">{{ item.unit }}</text></view>
			</view>
		</view>
	</view>
</template>


<script>
	var config_gyq = require('../../common/config_gyq.js');
	var common = require('../../common/common.js');
	var request = require('../../common/request');
	export default {
		data() {
			return {
				speed: 50,
				infoList: {}
			}
		},
		computed: {
			progress() {
				const MAX_SPEED = 120;
				return this.infoList.speed / MAX_SPEED * 100
			}
		},
		created() {
			let car_sn = uni.getStorageSync('car_info').car_sn
			if (car_sn) {
				this._initInfoList()
			}

		},
		methods: {
			async _initInfoList() {
				let car_sn = uni.getStorageSync('car_info').car_sn
				let {
					data
				} = await request.postApi(config_gyq.API_FLK_CAR_DASHBOARD, {
					car_sn
				})
				if (data.code == 200) {
					this.infoList = data.data.data
					this.infoList.list = [{
							label: '骑行里程',
							prop: this.infoList.current_mail || 0,
							unit: 'km'
						},
						{
							label: '骑行时长',
							prop: this.infoList.current_time || 0,
							unit: 'h'
						},
						{
							label: '最大速度',
							prop: this.infoList.max_speed || 0,
							unit: 'km/h'
						},
						{
							label: '平均速度',
							prop: this.infoList.avg_speed || 0,
							unit: 'km/h'
						},
					]
				} else {
					common.simpleToast(data.msg)
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/libs/css/layout.scss";

	.dashboard-page {
		padding: 24rpx 32rpx 0;
		min-height: calc(100vh - 100rpx);

		.dashboard {
			width: 554rpx;
			height: 554rpx;
			margin: 0 auto 58rpx;
			background: url('https://qiniu.bms16.com/Ftwa7u9tJYw3XSLaXYvrDyGNRuD5');
			background-size: 100%;
			position: relative;

			.shadow {
				box-shadow: inset 0rpx 2rpx 6rpx 0rpx #fff;
				width: 490rpx;
				height: 502rpx;
				position: relative;
				top: 20rpx;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 50%;
				background: conic-gradient(from -122deg, #0A59F7 0%, #20FFCA var(--progress), #F3F8FF 0% 245deg, transparent 245deg 360deg);
				mask: radial-gradient(transparent 200rpx, #000 200rpx);
				-webkit-mask: radial-gradient(transparent 210rpx, #000 213rpx);
			}

			.spe-wrap {
				width: 218rpx;
				height: 218rpx;
				background: #0A59F7;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				color: #fff;

				.spe-num {
					font-family: Futura, Futura;
					font-weight: bold;
					font-size: 80rpx;
					color: #FFFFFF;
					line-height: 64rpx;
					text-align: center;
					font-style: normal;
					margin-bottom: 16rpx;
				}

				.unit {
					line-height: 28rpx;
					font-style: italic;
				}
			}

			.power-wrap {
				width: 230rpx;
				height: 104rpx;
				background: #D6E7FF;
				border-radius: 64rpx;
				position: absolute;
				bottom: 22rpx;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Futura, Futura;
				font-weight: bold;
				font-size: 48rpx;
				color: #060809;
			}
		}

		.battery_life_progress {

			display: flex;
			justify-content: space-between;
			align-items: center;

			width: 100%;
			margin-bottom: 40rpx;
			padding-right: 40rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			overflow: hidden;
			position: relative;
			height: 92rpx;

			.is_progress {
				min-width: 30%;
				height: 100%;
				padding: 16rpx 32rpx;
				background: #0A59F7;
				border-radius: 36rpx;
				position: absolute;
				left: 0;
				top: 0;
			}

			.text {
				position: relative;
				z-index: 1;
				font-size: 32rpx;
				color: #fff;
				display: flex;
				align-items: center;
				height: 92rpx;
				padding-left: 10rpx;

				text {
					line-height: 1;
				}
			}
		}

		.info-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.info-wrap {
				width: 336rpx;
				margin-bottom: 14rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				padding: 32rpx 24rpx;

				.label {
					font-size: 28rpx;
					color: #060809;
					margin-bottom: 24rpx;
				}

				.value {
					font-size: 48rpx;

					.unit {
						margin-left: 8rpx;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>