yyky_new_app/pages/index/condition/blood_oxygen/index.vue

<template>
	<view>
		<!-- <van-tabs v-model="active">
			<van-tab title="日"> -->
		<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="dayArea.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>
		<content-page :dayInfo="dayInfo"></content-page>
		<!-- </van-tab>
			<van-tab title="月">
				<view class="top-box">
					<view class="container-top" @click="showMonthPicker = true">
						<view class="top-left">
							<view class="word">月份</view>
							<text>{{formatMonth(monthValue)}}</text>
						</view>
						<view class="top-right">
							<image src="/static/image/full.png" mode=""></image>
						</view>
					</view>
					<view class="chartsMain">
						<canvas canvas-id="canvasMonthArea" id="canvasMonthArea" class="charts"
							@touchstart="touchArea"></canvas>
					</view>
				</view>
				<content-page></content-page>
			</van-tab>
			<van-tab title="年">
				<view class="top-box">
					<view class="container-top" @click="showYearPicker = true">
						<view class="top-left">
							<view class="word">年份</view>
							<text>{{formatYear(yearValue)}}</text>
						</view>
						<view class="top-right">
							<image src="/static/image/full.png" mode=""></image>
						</view>
					</view>
					<view class="chartsMain">
						<canvas canvas-id="canvasYearArea" id="canvasYearArea" class="charts"
							@touchstart="touchArea"></canvas>
					</view>
				</view>
				<content-page></content-page>
			</van-tab>

		</van-tabs> -->

		<van-popup :show="showDayPicker" position="bottom">
			<van-datetime-picker @cancel="showDayPicker=false" @confirm="onConfirm" :value="currentDay" type="date" />
		</van-popup>
		<van-popup :show="showMonthPicker" position="bottom">
			<van-datetime-picker @cancel="showMonthPicker=false" @confirm="onMonthConfirm" type="year-month"
				:value="currentMonth" />
		</van-popup>
		<van-popup :show="showYearPicker" position="bottom">
			<van-datetime-picker @cancel="showYearPicker=false" @confirm="onYearConfirm" type="year"
				:value="currentYear" />
		</van-popup>
	</view>
</template>

<script>
	import * as infoApi from '@/api/info/index.js';
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	import contentPage from './components/content.vue'
	// 图表
	import uCharts from "@/components/ucharts/ucharts.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 {
				active: 2,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				dayValue: new Date(),
				monthValue: new Date(),
				yearValue: new Date(),
				showDayPicker: false, //日
				showMonthPicker: false, //月
				showYearPicker: false, //年
				// minDate:new Date().getTime(),
				currentDay: new Date().getTime(),
				currentMonth: new Date().getTime(),
				currentYear: new Date().getTime(),
				fullscreen: false,
				dayInfo: {}, //日数据
				dayTimeList: [], //日X轴数据
				dayDataList: [], //日图表数据

				// 日折线图
				dayArea: {
					categories: [],
					// categories: ['08:22','08:22','08:22','08:22'],
					series: [{
						name: '',
						data: [],
						// data: [68,92,66,79],
						color: '#F35546'
					}]
				},
				// 月折线图
				monthArea: {
					categories: ['6月', '7月', '8月', ],
					series: [{
						name: '学习前端',
						data: [100, 80, 95, ],
						color: '#F35546'
					}]
				},
				// 年折线图
				yearArea: {
					categories: ['6月', '7月'],
					series: [{
						name: '学习前端',
						data: [100, 80, ],
						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() {
			console.log(this.formatDate(this.currentDate), 333);
		},
		methods: {
			getData() {
				console.log(this.deviceId, 8889999);
				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.getBloodOxygen(params).then(res => {
						console.log(res, 44);
						if (res.data === null) {
							this.dayInfo = {}
							this.dayInfo.list = []
							this.dayArea.categories = []
						}
						if (res.code === 0 && res.data.list.length) {
							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.bloodOxygen)
							this.dayArea.categories = categoriesArr.length > 10 ? categoriesArr.slice(-10) :
								categoriesArr
							this.dayArea.series[0].data = seriesArr.length > 10 ? seriesArr.slice(-10) : seriesArr
						}

					})
					.catch(err => {
						return this.$util.Tips({
							title: err,
							// icon: 'error'
						});
					});
			},
			fullscreenFn() {
				wx.requestFullScreen({
					success: (res) => {
						console.log(res, 666);
						this.fullscreen = true

					}
				});
			},
			formatter(type, val) {
				if (type === 'year') {
					return `${val}年`;
				} else if (type === 'month') {
					return `${val}月`;
				}
				return val;
			},
			onYearConfirm(value) {
				console.log(value, 444);
				this.yearValue = value.detail
				this.showYearPicker = false
			},
			onMonthConfirm(value) {
				this.monthValue = value.detail
				this.showMonthPicker = false;
				console.log(this.formatMonth(this.monthValue), 777);
			},
			async onConfirm(value) {
				this.dayValue = value.detail;
				await this.getData()
				this.getServerData();
				this.showDayPicker = false;
			},
			formatHHmm: function(date) {
				return dayjs(date).format("HH:mm");
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			formatMonth: function(date) {
				return dayjs(date).format("YYYY-MM");
			},
			formatYear: function(date) {
				return dayjs(date).format("YYYY");
			},
			changeDay() {
				this.showDayPicker = true
			},
			getServerData() {
				console.log('是否先执行');
				_self.showArea("canvasArea", this.chartData, 'day');
				_self.showArea("canvasMonthArea", this.chartData, 'month');
				_self.showArea("canvasYearArea", this.chartData, 'year');

			},


			// 折线图
			showArea(canvasId, chartData, type) {
				const categories = type == 'day' ? _self.dayArea.categories : type == 'month' ? _self.monthArea
					.categories : _self.yearArea.categories
				const series = type == 'day' ? _self.dayArea.series : type == 'month' ? _self.monthArea.series : _self
					.yearArea.series
				canvaArea = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					legend: {
						show: false
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: categories,
					series: 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: 'solid',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						data: [{
							format: function(val) {
								return val.toFixed(2);
							},
							max: 105,
							min: 0
						}]
						// min: 10,
						// max: 180,
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'straight',
							// type: 'curve',
							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-tab__pane--active{
	// 	width: 100%;
	// }
	.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;
			}
		}
	}
</style>