yyky_new_app/pages/index/condition/altitude/index.vue

<template>
	<view>
		<view class="top-box">
			<view class="container-top" @click="showDayPicker = true">
				<view class="top-left">
					<view class="word">今日</view>
					<text>{{formatDate(dayValue)}}</text>
				</view>
				<!-- <view class="top-right" @click.stop="fullscreenFn">
					<image src="/static/image/full.png" mode=""></image>
				</view> -->
			</view>
			<view class="chartsMain" v-if="Area.categories.length">
				<canvas canvas-id="canvasArea" id="canvasArea" class="charts"></canvas>
			</view>
			<view class="chartsMain" v-else>
				<image src="/static/image/none.png" mode=""></image>
			</view>
		</view>
		<view class="content-box">
			<view class="word-box">
				<view class="word-title">
					海拔记录
				</view>
			</view>
			<view class="list-box">
				<block v-for="(item,index) in dayInfo.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.altitude}}</view>
							<view>m</view>
						</view>
					</view>
				</block>

			</view>
		</view>

		<van-popup :show="showDayPicker" position="bottom">
			<van-datetime-picker @cancel="showDayPicker=false" @confirm="onConfirm" :value="currentDay" type="date" />
		</van-popup>
	</view>
</template>

<script>
	// 图表
	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";
	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 {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				dayValue: new Date(),
				showDayPicker: false,
				currentDay: new Date().getTime(),
				dayInfo: {},
				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);
			await this.getData()
			this.getServerData();
		},
		mounted() {

		},
		methods: {
			async onConfirm(value) {
				this.dayValue = value.detail;
				await this.getData()
				this.getServerData();
				this.showDayPicker = false;
			},
			getData() {
				let data = this.formatDate(this.dayValue).split("-"); // ["2023", "10", "18"]
				let params = {
					deviceId: this.deviceId,
					year: data[0],
					month: data[1],
					day: data[2],
					// day:"17",
				}
				return infoApi.getAltitude(params).then(res => {
						console.log(res, 44);
						this.dayInfo = res.data


						// 组装接口数据。上方折线图若超过10条，截取10条
						let categoriesArr = res.data.list.map(item => this.formatHHmm(item.createTime))
						let seriesArr = res.data.list.map(item => item.altitude)
						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'
						});
					});
			},
			formatHHmm: function(date) {
				return dayjs(date).format("HH:mm");
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			formatHms: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			},
			getServerData() {
				_self.showArea("canvasArea", this.chartData);

			},



			// 折线图
			showArea(canvasId, chartData) {
				canvaArea = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					legend: true,
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: _self.Area.categories,
					series: _self.Area.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						rotateLabel: true,
						rotateAngle: -50,
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: 10,
						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>
	.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;
			}
		}
	}

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


		.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>