siyu_app/pages_watch/healthMonitoring/bodyTemperature.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/temperature_top_bg.png" mode="widthFix"></image>
		<view class="container-body">
			<dateTimePicker @onChange="onChangeTime" />
			<!-- 体温趋势 -->
			<view class="box" style="padding-bottom: 0;">
				<view class="box-title y-f" :style="{visibility: chooseItem.time ? 'visible': 'hidden'}">
					<view>{{chooseItem.time}}</view>
					<view class="x-c" style="align-items: baseline;"><text class="box-title-num">{{chooseItem.temp || '--'}}</text><text class="box-title-unit">℃</text></view>
				</view>
				<view class="echartbox">
					<qiun-data-charts v-show="!isEmpty" type="column" :opts="opts" :chartData="chartData"
						tooltipFormat="temTooltip" @getIndex="getIndex" />
					<myEmpty v-show="isEmpty" style="padding: 40rpx 0 0 0;"></myEmpty>
				</view>
				<view class="legend" v-show="!loading && !isEmpty">
					<view class="legend-item">
						<view class="legend-dot" style="background-color: #52D087;"></view><text>{{'＜'}}37.2℃</text>
					</view>
					<view class="legend-item">
						<view class="legend-dot" style="background-color: #FDBD27;"></view><text>37.2 - 38.0℃</text>
					</view>
					<view class="legend-item">
						<view class="legend-dot" style="background-color: #FF5558;"></view><text>{{'≥'}}38.0℃</text>
					</view>
				</view>
				<view class="statistics">
					<view class="statistics-item">
						<view>当前</view>
						<view class="statistics-num">{{last || '--'}}<text style="font-weight: 400;font-size: 28rpx;">℃</text></view>
					</view>
					<view class="statistics-item">
						<view>最低</view>
						<view class="statistics-num">{{min || '--'}}<text style="font-weight: 400;font-size: 28rpx;">℃</text></view>
					</view>
					<view class="statistics-item">
						<view>最高</view>
						<view class="statistics-num">{{max || '--'}}<text style="font-weight: 400;font-size: 28rpx;">℃</text></view>
					</view>
				</view>
			</view>
			<view class="box boxinfo">
				<view class="boxinfo-title x-f">
					<image src="@/static/images/pages_watch/icons/wendu_icon.png" mode="aspectFill"></image>
					<text>关于体温</text>
				</view>
				<view>
					<view>正常体温一天中不断变化,早晨体温低,中午和晚上体温高,正常的平均体温为37℃(98.6°F.).一般清晨2点5点体温最,下午5点到7点体温最高,其变动范围约在0.5到1℃之间.您的正常体温可能比该值稍高或稍低。</view>
					<view style="margin-top: 20rpx;">影响体温的因素有很多，包括剧烈运动、室外炎热程度和湿度以及月经周期。当然，生病时的体温也可能升高。休温过高通党称为发烧。</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 {
		temperature
	} from "@/api/pages_watch/healthMonitoring.js";
	export default {
		components: {
			myEmpty,
			dateTimePicker
		},
		data() {
			return {
				opacity: 0,
				loading: true,
				isEmpty: false,
				// 0:正常，1：偏低2:偏高
				status1: 0,
				status2: 0,
				last: 0,
				min: 0,
				max: 0,
				chooseItem: {
					temp: '',
					time: ''
				},
				list: [],
				chartData: {},
				opts: {
					padding: [15, 0, 15, 0],
					enableScroll: false,
					dataLabel: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						fontSize: 12,
						axisLine: false,
						fontColor: '#ccc',
						labelCount: 7,
						format: "formatterTime",
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							fontColor: '#ccc',
							min: 0,
							// max: 100,
							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
				})
			},
			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.getServerData(param)
			},
			getServerData(param) {
				this.loading = true
				this.list = []
				this.chooseItem = {
					temp: '',
					time: ''
				}
				temperature(param).then((res) => {
					this.loading = false
					this.isEmpty = !(res.data && res.data.list && res.data.list.length > 0)
					if (res.code == 200 && res.data) {
						this.last = res.data.last
						this.min = res.data.min
						this.max = res.data.max
						this.list = res.data.list || []
						this.chooseItem.time = res.data.list[res.data.list.length - 1].createTime
						this.chooseItem.temp = res.data.list[res.data.list.length - 1].estTemp
						let chartData = {
							categories: res.data.list.map(item => item.createTime),
							series: [{
								name: "体温",
								data: res.data.list.map(item => ({
									value: item.estTemp,
									color: item.estTemp < 38 && item.estTemp > 37.2 ? "#FDBD27" : item.estTemp >= 38 ? "#FF5558" : "#52D087"
								}))
							}]
						}
						this.chartData = JSON.parse(JSON.stringify(chartData));
					} else {
						this.last = undefined
						this.max = undefined
						this.min = undefined
					}
				}).catch((err) => {
					this.loading = false
				});
			},
			getIndex(e) {
				if(e.currentIndex.index < 0)  return;
				const index = e.currentIndex.index
				this.chooseItem = {
					temp: this.list[index].estTemp,
					time: this.list[index].createTime,
				}
			}
		},
		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;
	}
	.boxinfo {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #757575;
		&-title {
			margin-bottom: 24rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			image {
				height: 56rpx;
				width: 56rpx;
				margin-right: 6rpx;
			}
		}
	}
	.container {
		padding: 0 24rpx;
		position: relative;
	}

	.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: 24rpx;
		color: #757575;
		&-num {
			font-weight: 500;
			font-size: 56rpx;
			color: #333333;
		}
		&-unit {
			font-size: 28rpx;
			color: #333333;
		}
	}

	.ytitle {
		margin-top: 10rpx;
		line-height: 34rpx;
		margin-bottom: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.legend {
		height: 48rpx;
		// margin-top: 44rpx;
		margin-bottom: 24rpx;
		@include u-flex(row, center, space-between);
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #757575;

		&-item {
			flex: 1;
			text-align: center;
			@include u-flex(row, center, center);
		}

		&-dot {
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			margin: 12rpx;
		}
	}

	.box {
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.echartbox {
		height: 520rpx;
		width: 100%;
	}

	.statistics {
		@include u-flex(row, center, space-between);
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;

		&-item {
			flex: 1;
			height: 160rpx;
			@include u-flex(column, center, center);
		}

		&-num {
			font-weight: 500;
			font-size: 48rpx;
			color: #333333;
			height: 68rpx;
			margin-top: 4rpx;
		}
	}
</style>