siyu_app/pages_watch/healthMonitoring/bloodPressureDetail.vue

<template>
	<view class="container">
		<view class="datebox">
			<picker mode="date" fields="day" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="datebox-item border-line flex-bt">
					<view>日期</view>
					<view class="datebox-item-right">
						<text :class="date ? '':'default'">{{date ? date : "请选择日期"}}</text>
						<image src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"></image>
					</view>
				</view>
			</picker>
			<picker mode="time" :value="time" @change="bindTimeChange">
				<view class="datebox-item flex-bt">
					<view>测量时间</view>
					<view class="datebox-item-right">
						<text :class="time ? '':'default'">{{time ? time : "请选择测量时间"}}</text>
						<image src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"></image>
					</view>
				</view>
			</picker>
		</view>
		<view class="datebox-detail">
			<view class="datebox-detail-header flex-bt">
				<view>收缩压</view>
				<view class="datebox-detail-header-right">
					<text class="num">{{sbp}}</text>
					<text>mmol/L</text>
				</view>
			</view>
			<view class="scale">
				<simpleScale ref="simpleSBPScale" :minVal="0" :maxVal="300" :int="true" :single="10" :h="h" :active="sbp" :scroll="false" :style="style"
					@value="getSBPScroll" />
			</view> 
			<view class="datebox-detail-header flex-bt" style="margin-top: 48rpx;">
				<view>舒张压</view>
				<view class="datebox-detail-header-right">
					<text class="num">{{dbp}}</text>
					<text>mmol/L</text>
				</view>
			</view>
			<view class="scale">
				<simpleScale ref="simpleDBPScale" :minVal="0" :maxVal="300" :int="true" :single="10" :h="h" :active="dbp" :scroll="false" :style="style"
					@value="getDBPScroll" />
			</view>
		</view>
	</view>
</template>

<script>
	import simpleScale from "@/pages_watch/components/simpleScale/simpleScale.vue"
	import { bpInfo } from "@/api/pages_watch/healthMonitoring.js"
	export default {
		components: {
			simpleScale
		},
		data() {
			return {
				// 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
				startDate: "2020-01-01",
				// 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
				endDate: this.$timeFormat(new Date()),
				date: "2024-01-01",
				time: "17:12",
				// 收缩压
				sbp: "0",
				// 舒张压
				dbp: "0",
				loading: false,
				style: {
					line: '#ccc',
					bginner: '#fbfbfb',
					bgoutside: '#ffffff',
					fontColor: '#333',
					fontSize: 16
				},
				h: uni.upx2px(88)
			}
		},
		onLoad(option) {
			const param = JSON.parse(option.param)
			this.date = param.createTime && param.createTime.split(' ')[0]
			this.time = param.createTime && param.createTime.substring(11, 16)
			this.sbp = String(param.sbp || 0)
			this.dbp = String(param.dbp || 0)
			this.$nextTick(()=>{
				this.$refs.simpleSBPScale.init()
				this.$refs.simpleDBPScale.init()
			})
		},
		methods: {
			bindDateChange(e) {
				this.date = e.detail.value
				this.getList()
			},
			bindTimeChange(e) {
				this.time = e.detail.value
				this.getList()
			},
			getSBPScroll(e) {
				this.sbp = e
			},
			getDBPScroll(e) {
				this.dbp = e
			},
			// 查询数据
			getList() {
				this.loading = true
				const param = {
					startTime: this.date.replace(/-/g, '/') +" " +this.time + ":00",
					endTime: this.date.replace(/-/g, '/') +" " + this.time + ":59",
					deviceId: uni.getStorageSync("deviceId"),
				}
				bpInfo(param).then(res => {
					this.loading = false
					if (res.code == 200) {
						if(res.data && res.data.length > 0) {
							this.date = res.data[0].createTime && res.data[0].createTime.split(' ')[0]
							this.time = res.data[0].createTime && res.data[0].createTime.substring(11, 16)
							this.sbp = String(res.data[0].sbp || 0)
							this.dbp = String(res.data[0].dbp || 0)
							console.log(this.sbp,this.dbp)
						} else {
							this.sbp = "0"
							this.dbp = "0"
						}
					} else {
						this.sbp = "0"
						this.dbp = "0"
					}
					this.$nextTick(()=>{
						this.$refs.simpleSBPScale.init()
						this.$refs.simpleDBPScale.init()
					})
				}).catch(() => {
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.flex-bt {
		@include u-flex(row, center, space-between);
	}
	.default {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.container {
		padding: 20rpx 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}
	.datebox {
		padding: 0 32rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		&-item {
			height: 120rpx;
			&-right {
				font-weight: 400;
				font-size: 32rpx;
				@include u-flex(row, center, flex-start);
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
	.datebox-detail {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 40rpx 32rpx;
		&-header-right {
			flex-shrink: 0;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			.num {
				font-size: 48rpx;
				color: #333333;
				margin-right: 14rpx;
			}
		}
	}
	.scale {
		height: 176rpx;
		margin-top: 36rpx;
		overflow: hidden;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(170,170,170,0.1);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid #ECECEC;
		// width: 200rpx;
		// height: 600rpx;
	}
</style>