siyu_app/pages_watch/healthMonitoring/sports.vue

<template>
	<view class="container">
		<uni-nav-bar fixed :border="false" :backgroundColor="`rgba(255,255,255,${opacity})`" title="活动"
			:statusBar="true" left-icon="left" @clickLeft="back"></uni-nav-bar>
		<image class="page-bg" src="@/static/images/pages_watch/images/blood_oxygen_top_bg.png" mode="widthFix"></image>
		<view class="container-body">
			<dateTimePicker :from="'sports'" @onChange="onChangeTime" />
			<!-- 活动趋势 -->
			<view class="box">
				<view class="box-title y-f">
					<view :style="{visibility: loading ? 'hidden':'visible'}">{{chooseItem.day}}</view>
					<view class="box-titlenum"><text>{{loading ? 0: chooseItem.distance}}</text>公里</view>
				</view>
				<view class="echartbox">
					<qiun-data-charts v-show="!isEmpty" type="column" :opts="opts" :chartData="chartData"
						:tooltipFormat="tooltipFormat" @getIndex="getIndex" />
					<myEmpty v-show="isEmpty" style="padding: 40rpx 0 0 0;"></myEmpty>
				</view>
				<view class="sportsbox-list x-bc">
					<view class="sportsbox-item es-pl-20 es-pr-20">
						<view class="x-f">
							<image class="icon" src="@/static/images/pages_watch/icons/kaluli_icon.png" mode="aspectFill"></image>
							<text>活动热量</text>
						</view>
						<view class="value">
							<text class="num">{{chooseItem.calorie}}</text>
							<text>千卡</text>
						</view>
					</view>
					<view class="sportsbox-item es-pl-20 es-pr-20">
						<view class="x-f">
							<image class="icon" src="@/static/images/pages_watch/icons/time_icon.png" mode="aspectFill"></image>
							<text>锻炼时长</text>
						</view>
						<view class="value">
							<text class="num">{{secondsToHoursAndMinutes(chooseItem.time)}}</text>
						</view>
					</view>
					<view class="sportsbox-item es-pl-20 es-pr-20">
						<view class="x-f">
							<image class="icon" src="@/static/images/pages_watch/icons/speed_icon.png" mode="aspectFill"></image>
							<text>平均速度</text>
						</view>
						<view class="value">
							<text class="num">{{chooseItem.speed}}</text>
							<text>公里/小时</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myEmpty from "@/pages_watch/components/myEmpty/myEmpty.vue"
	import dateTimePicker from "@/pages_watch/components/dateTimePicker/dateTimePicker.vue"
	import {
		spInfo,
		spCount,
		sportDataByDate
	} from "@/api/pages_watch/healthMonitoring.js";
	export default {
		components: {
			myEmpty,
			dateTimePicker
		},
		data() {
			return {
				tooltipFormat: 'sportTooltip',
				opacity: 0,
				loading: false,
				isEmpty: false,
				list: [],
				chartData: {},
				week: ['周一','周二','周三','周四','周五','周六','周日'],
				times: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
				weekDay: [],
				chooseItem: {
					day: '',
					calorie: 0,
					distance: 0,
					speed: 0,
					time: 0,
				},
				opts: {
					padding: [15, 0, 15, 0],
					enableScroll: false,
					dataLabel: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						fontSize: 12,
						axisLine: false,
						fontColor: '#ccc',
						labelCount: 7,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							fontColor: '#ccc',
							min: 0,
							axisLine: false,
							fontSize: 12,
						}]
					},
					extra: {
						tooltip: {
							gridType: "dash",
							showArrow: false,
							legendShow: true,
							legendShape: "circle"
						},
						column: {
							type: "group",
							width: 12,
							barBorderRadius: [4, 4, 0, 0],
						}
					}
				}
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			secondsToHoursAndMinutes(totalSeconds) {
				let hours = Math.floor(totalSeconds / 3600);
				let minutes = Math.floor((totalSeconds % 3600) / 60);
				let seconds = totalSeconds % 60;
				hours = hours.toString().padStart(2, '0');
				minutes = minutes.toString().padStart(2, '0');
				seconds = seconds.toString().padStart(2, '0');
				return hours+':'+minutes+':'+seconds;
			},
			getDates(startDate, endDate) {
			  const dates = [];
			  const currentDate = new Date(startDate);
			  endDate = new Date(endDate);
			
			  while (currentDate <= endDate) {
			    dates.push(this.$timeFormat(currentDate,'yyyy-mm-dd'));
			    currentDate.setDate(currentDate.getDate() + 1);
			  }
			
			  return dates;
			},
			onChangeTime(time) {
				const param = {
					startTime: this.$timeFormat(time[0], 'yyyy/mm/dd hh:MM:ss'),
					endTime: this.$timeFormat(time[1], 'yyyy/mm/dd hh:MM:ss'),
					deviceId: uni.getStorageSync("deviceId") || ""
				}
				this.tooltipFormat = time[3] == 1 ? 'sportweekTooltip' : 'sportTooltip'
				const startDate = time[0].split(' ')[0];
				const endDate = time[1].split(' ')[0]
				this.weekDay = this.getDates(startDate,endDate)
				this.getServerData(param)
			},
			getServerData(param) {
				this.loading = true				
				sportDataByDate(param).then((res) => {
					this.loading = false
					this.isEmpty = !(res.data && res.data.length > 0)
					this.list = res.data && res.data.length > 0 ? res.data : []
					if (res.code == 200 && res.data) {
						const categories = this.tooltipFormat == 'sportweekTooltip' ? this.week : this.times
						let chartData = {
							categories: categories,
							series: [{
								name: "活动",
								data: res.data.map(item => ({
									value: item.distance,
									color: "#52D087"
								}))
							}]
						}
						this.opts.xAxis.labelCount = this.tooltipFormat == 'sportweekTooltip' ? '' : 9
						this.chartData = JSON.parse(JSON.stringify(chartData));
						this.chooseItem = {
							day: this.tooltipFormat == 'sportweekTooltip' ? `${this.weekDay[0]}至${this.weekDay[0]}` : `${this.weekDay[0]}`,
							calorie: res.calorieTotal,
							distance: res.distanceTotal,
							speed: res.speedTotal,
							time: res.timeTotal,
						}
					}
				}).catch((err) => {
					this.loading = false
				});
			},
			getIndex(e) {
				if(e.currentIndex.index < 0)  return;
				let index = e.currentIndex.index
				this.chooseItem = {
					day: this.tooltipFormat == 'sportweekTooltip' ? this.weekDay[index] : `${this.weekDay[0]} ${index}-${[index+1]}点`,
					calorie: this.list[index].calorie,
					distance: this.list[index].distance,
					speed: this.list[index].speed,
					time: this.list[index].time,
				}
			}
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) {
				this.opacity = e.scrollTop / 44 * 1
			} else if (e.scrollTop > 44) {
				this.opacity = 1
			}

		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}

	.container {
		padding: 0 24rpx;
		position: relative;
	}
	.sportsbox {
		&-list {
			width: 100%;
			flex-wrap: wrap;
			margin-bottom: -46rpx;
		}
		&-item {
			width: 50%;
			box-sizing: border-box;
			overflow: hidden;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #757575;
			margin-bottom: 46rpx;
			.icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
			.num {
				margin-right: 5rpx;
				font-weight: 600;
				font-size: 44rpx;
				color: #222222;
			}
			.value {
				margin-top: 10rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
			}
		}
		.sportstitle {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
		}
		.sportsicon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}
		.frequency {
			text-align: right;
			margin-top: 6rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #757575;
		}
		.sports {
			padding: 24rpx 0;
		}
	}
	.page-bg {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
	}

	.container-body {
		position: relative;
		z-index: 1;
		padding-bottom: 24rpx;
	}

	.box-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #757575;
	}
	.box-titlenum {
		align-items: flex-end !important;
		text {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 104rpx;
			color: #333333;
		}
	}
	.box {
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.echartbox {
		height: 520rpx;
		width: 100%;
	}
</style>