yyky_new_app/pages/index/condition/step/index.vue

<template>
	<view>
		<view class="top-box">
			<view class="container-top" @click="showPicker = true">
				<view class="top-left">
					<view class="word">一周内</view>
					<text>{{formatDate(defaultDate[0])}} ~ {{formatDate(defaultDate[1])}}</text>
				</view>
				<!-- <view class="top-right" @click.stop="fullscreenFn">
					<image src="/static/image/full.png" mode=""></image>
				</view> -->
			</view>
			<view class="chartsMain" v-show="Area.categories.length&&!showPicker">
				<canvas canvas-id="canvasArea" id="canvasArea" class="charts"></canvas>
			</view>
			<view class="chartsMain" v-show="!Area.categories.length">
				<image src="/static/image/none.png" mode=""></image>
			</view>
		</view>
		<view class="content-box">
			<view class="number-box">
				<view class="box-item">
					<text>最低</text>
					<view class="item-under">
						<view class="item-under-left">
							<image src="/static/image/stepIcon.png" mode=""></image>
							<text>{{infoData.min}}</text>
						</view>
						<text>Step</text>
					</view>
				</view>
				<view class="box-item">
					<text>平均</text>
					<view class="item-under">
						<view class="item-under-left">
							<image src="/static/image/stepIcon.png" mode=""></image>
							<text>{{infoData.avg}}</text>
						</view>
						<text>Step</text>
					</view>
				</view>
				<view class="box-item">
					<text>最高</text>
					<view class="item-under">
						<view class="item-under-left">
							<image src="/static/image/stepIcon.png" mode=""></image>
							<text>{{infoData.max}}</text>
						</view>
						<text>Step</text>
					</view>
				</view>
			</view>
			<view class="word-box">
				<view class="word-title">
					步数记录
				</view>
			</view>
			<view class="list-box">
				<block v-for="(item,index) in infoData.list">
					<view class="list-box-item">
						<view class="list-box-left">
							<image src="/static/image/hearticon.png" mode=""></image>
							<text>{{formatHms(item.createTime)}}</text>
						</view>
						<view class="list-box-right">
							<view class="num">{{item.stepNumber}}</view>
							<view>Step</view>
						</view>
					</view>
				</block>

			</view>
		</view>

		<!-- 日历 -->
		<van-calendar :show="showPicker" type="range" @confirm="onConfirm" @close="showPicker = false"
			:default-date="defaultDate" allow-same-day="true" :min-date="minDate" />
	</view>
</template>

<script>
	// import contentPage from './components/content.vue'
	// 图表
	import uCharts from "@/components/ucharts/ucharts.js";
	import * as infoApi from '@/api/info/index.js';
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	import {
		mapGetters
	} from "vuex";
	// import uCharts from "@/components/u-charts/u-charts.js";
	var _self;
	var canvaRing = null;
	var canvaArea = null;
	var canvaGauge = null;
	var canvaPie = null;
	var canvaColumn = null;
	var canvaFunnel = null;
	var canvaWord = null;

	export default {
		// components: {
		// 	contentPage
		// },
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				// dayValue: new Date(),
				defaultDate: [], //默认一周内
				showPicker: false, //日
				infoData: {}, //日数据

				minDate: new Date(2023, 0, 1).getTime(),
				list: [{
					time: '09:00',
					num: 63
				}, {
					time: '09:10',
					num: 63
				}, {
					time: '09:10',
					num: 63
				}],
				// 折线图
				Area: {
					categories: [],
					// categories: ['08:22','08:22','08:22','08:22'],
					series: [{
						name: '步数',
						data: [],
						// data: [68,89,66,79],
						color: '#F35546'
					}]
				}


			};
		},
		computed: mapGetters(['deviceId']),
		async onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(680);
			this.cHeight = uni.upx2px(400);
			this.defaultDate = [new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000).getTime(), new Date()
				.getTime()
			]
			await this.getData()
			this.getServerData();
		},
		mounted() {

		},
		methods: {
			getData() {
				let params = {
					deviceId: this.deviceId,
					startTime: `${this.formatDate(this.defaultDate[0])} 00:00:00`,
					endTime: `${this.formatDate(this.defaultDate[1])} 23:59:59`,
				}
				console.log(params, 111);
				return infoApi.getStepNumber(params).then(res => {
						if (res.data === null) {
							this.infoData = {}
							this.infoData.list = []
							this.Area.categories = []
						}
						if (res.code === 0 && res.data.list.length) {
							this.infoData = res.data

							// 组装接口数据。上方折线图若超过10条，截取10条
							let categoriesArr = res.data.list.map(item => this.formatHHmm(item.createTime))
							let seriesArr = res.data.list.map(item => item.stepNumber)
							this.Area.categories = categoriesArr.length > 10 ? categoriesArr.slice(-10) :
								categoriesArr
							this.Area.series[0].data = seriesArr.length > 10 ? seriesArr.slice(-10) : seriesArr
						}
					})
					.catch(err => {
						return this.$util.Tips({
							title: err,
							// icon: 'error'
						});
					});
			},
			formatHms: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			formatHHmm: function(date) {
				return dayjs(date).format("MM-DD");
			},
			async onConfirm(date) {
				console.log(date, 777);
				this.defaultDate = date.detail;
				await this.getData()
				this.getServerData()
				this.showPicker = false;
			},
			getServerData() {
				_self.showArea("canvasArea", this.chartData);
			},

			// 折线图
			showArea(canvasId, chartData) {
				canvaArea = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					legend: false,
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: _self.Area.categories,
					series: _self.Area.series,
					animation: true,
					padding: [20, 10, 10, 10],
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'solid',
						dashLength: 8,
						disableGrid: true,
						rotateLabel:true,
						rotateAngle:-50,
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: 0,
						// max: 180,
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'straight',
							opacity: 0.2,
							addLine: true,
							width: 2
						}
					}
				});
			},
			touchArea(e) {
				canvaArea.showToolTip(e, {
					format: function(item, category) {
						return item.name + ' ' + category + ' ' + ':' + item.data
					}
				});
			},

		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .van-calendar{
		z-index: 15 !important;
	}
	.top-box {
		padding: 28rpx 32rpx 19rpx;
		background-color: #fff;

		.container-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 28rpx;

			.top-left {
				.word {
					font-size: 36rpx;
					font-weight: 500;
					color: #000000;
				}

				text {
					font-size: 24rpx;
					font-weight: 500;
					color: #777777;
					line-height: 33rpx;
				}
			}

			.top-right {
				width: 32rpx;
				height: 32rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.chartsMain {
			width: 100%;
			// height: 450rpx;
			// box-sizing: border-box;
			background: #fff;
			border-top: 2rpx solid #f2f2f2;
			text-align: center;

			image {
				width: 70%;
				// height: 100%;
			}

			.charts {
				width: 680rpx;
				height: 400rpx;
				box-sizing: border-box;
				z-index: 10;
			}
		}
	}

	.content-box {
		background-color: #F7F7F7;
		// height: 100vh;

		.number-box {
			height: 131rpx;
			background-color: #fff;
			display: flex;
			margin-top: 16rpx;
			padding: 16rpx 32rpx;
			justify-content: space-around;

			.box-item {
				width: 218rpx;
				padding: 10rpx 16rpx;
				box-sizing: border-box;
				border-radius: 12rpx;
				border: 2rpx solid rgba(119, 119, 119, 0.3);

				text {
					font-size: 24rpx;
					font-weight: 400;
					color: #777777;
				}

				.item-under {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 12rpx;

					.item-under-left {
						image {
							width: 32rpx;
							height: 32rpx;
						}

						text {
							margin-left: 15rpx;
							font-size: 32rpx;
							font-weight: 400;
							color: #000000;
						}
					}

					text {
						font-size: 24rpx;
						font-weight: 400;
						color: #777777;
					}
				}
			}
		}

		.word-box {
			margin-top: 16rpx;
			background-color: #fff;
			padding: 32rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #000000;

		}

		.list-box {
			margin-top: 16rpx;
			background-color: #fff;
			padding: 0 32rpx;


			.list-box-item {
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.list-box-left {
					display: flex;
					align-items: center;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					text {
						margin-left: 32rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #000000;
					}
				}

				.list-box-right {
					display: flex;
					font-size: 32rpx;
					font-weight: 600;
					color: #000000;

					.num {
						margin-right: 30rpx;
					}

				}
			}

		}
	}
</style>