h5/pages/home_monitoring/home_monitoring.vue

<template>
	<view class="m-3 mb-5" ref="ccc">
		<view class="position-relative bghead" style="margin-top: -80rpx;">
			<image src="@/static/img/other/tou.png" mode="widthFix" class="w-100"></image>
		</view>
		<view class="p-3">
			<view class="centerY mb-3 w-100 font-bold">
				<view class="bule_line" style="height: 26rpx;"></view>
				<text class="font-bold text-dark ml-2 fs-16 line-height1">身体健康数据</text>
			</view>
			<view class="bg-white" style="border-radius: 16rpx;overflow: hidden;">
				<view class="px-2 py-1 centerY" style="background: linear-gradient(180deg, #F6FFFF 0%, #EAFEFF 100%);">
					<view class="w-15">
						<view class="picbox">
							<image class="picimg" src="@/static/img/other/xy.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class=" ml-2">
						<view class="fs-14 font-bold line-height1" style="color: #35B79C;">血压</view>
						<view class="fs-10">
							<text class="text-gry">测量时间</text>
						</view>
					</view>
					<view class="ml-auto fs-14">
						<view class="font-bold text-right line-height1" style="color: #868687;">
							<span v-if="dataArray.gxyList&&dataArray.gxyList[0]">{{dataArray.gxyList&&dataArray.gxyList[0].rbp||'未测量'}}/{{dataArray.gxyList&&dataArray.gxyList[0].sbp||'未测量'}} mmHg</span>
							<span v-else>未测量</span>
						</view>
						<view class="fs-12 centerY" style="color: #868687 ;">
							<text class="iconfont Clock"></text>
							<view class="ml-1">
								<span v-if="dataArray.gxyList&&dataArray.gxyList[0]">{{dataArray.gxyList&&dataArray.gxyList[0].uploadTime}}</span>
								<span v-else>暂无</span>
							</view>
						</view>
					</view>
					<view class="iconfont Chevron-Right fs-24" style="color: #35B79C;"></view>
				</view>
				<view class="px-3 py-2" v-if="dataArray.gxyList&&dataArray.gxyList.length">
					<view class="fs-14 text-gry mb-1">
						近7次测量记录
					</view>
					<view class="">
						<view id="echarts1" class="echarts"></view>
					</view>
					<view class="mt-3 p-2 mb-2"
						style="box-shadow: 0px 2px 13px 2px rgba(211,212,214,0.45);border-radius: 8px;">
						<view class="centerY">
							<image class="w-10" src="@/static/img/other/xy2.png" mode="widthFix"></image>
							<view class="fs-14 font-bold ml-2 space-nowrap">
								血压标准
							</view>
							<view class=" ml-2 fs-12" style="color: #868687;">
								<view class="">
									收缩压：90~139 mmHg
								</view>
								<view class="">
									舒张压：60~90 mmHg
								</view>
							</view>
						</view>
						<view class="centerY mt-2">
							<image class="w-10" src="@/static/img/other/zjjy.png" mode="widthFix"></image>
							<view class="fs-14 font-bold ml-2 space-nowrap">
								专家建议
							</view>
							<view class=" ml-2 fs-12" style="color: #868687;">
								正常
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white mt-2" style="border-radius: 16rpx;overflow: hidden;">
				<view class="px-2 py-1 centerY" style="background: linear-gradient(180deg, #ebf6ff 0%, #D4EBFF 100%);">
					<view class="w-15 ">
						<view class="picbox">
							<image class="picimg" src="@/static/img/other/xuet.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class=" ml-2">
						<view class="fs-14 font-bold line-height1" style="color: #369FE5;">血糖</view>
						<view class="fs-10">
							<text class="text-gry">测量时间</text>
						</view>
					</view>
					<view class="ml-auto fs-14">
						<view class="font-bold text-right line-height1" style="color: #868687;">
							<span v-if="dataArray.gxyList&&dataArray.tnbList[0]">{{dataArray.tnbList&&dataArray.tnbList[0].glu||'未测量'}} mmol/L</span>
							<span v-else>未测量</span>
						</view>
						<view class=" centerY" style="color: #868687 ;">
							<text class="iconfont Clock"></text>
							<view class="fs-12 ml-1">
								<span v-if="dataArray.tnbList&&dataArray.tnbList[0]">{{dataArray.tnbList&&dataArray.tnbList[0].uploadTime}}</span>
								<span v-else>暂无</span>
							</view>
						</view>
					</view>
					<view class="iconfont Chevron-Right fs-24" style="color: #369FE5;"></view>
				</view>
				<view class="px-3 py-2"  v-if="dataArray.tnbList&&dataArray.tnbList.length">
					<view class="fs-14 text-gry mb-1">
						近7次测量记录
					</view>
					<view class="">
						<view id="echarts2" class="echarts"></view>
					</view>
					<view class="mt-3 p-2 mb-2"
						style="box-shadow: 0px 2px 13px 2px rgba(211,212,214,0.45);border-radius: 8px;">
						<view class="centerY">
							<image class="w-10" src="@/static/img/other/xtfw.png" mode="widthFix"></image>
							<view class="fs-14 font-bold ml-2 space-nowrap">
								血糖标准
							</view>
							<view class=" ml-2 fs-12" style="color: #868687;">
								<view class="">
									3.9~6.9 mmol/L
								</view>
							</view>
						</view>
						<view class="centerY mt-2">
							<image class="w-10" src="@/static/img/other/zjjy.png" mode="widthFix"></image>
							<view class="fs-14 font-bold ml-2 space-nowrap">
								专家建议
							</view>
							<view class=" ml-2 fs-12" style="color: #868687;">
								正常
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="bg-white mt-2" style="border-radius: 16rpx;overflow: hidden;">
				<view class="px-2 py-1 centerY" style="background: linear-gradient(180deg, #F6FFFF 0%, #EAFEFF 100%);">
					<view class="w-15 ">
						<view class="picbox">
							<image class="picimg" src="@/static/img/other/xinl.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class=" ml-2">
						<view class="fs-14 font-bold line-height1" style="color: #35B79C">心率</view>
						<view class="fs-10">
							<text class="text-gry">测量时间</text>
						</view>
					</view>
					<view class="ml-auto fs-14">
						<view class="font-bold text-right line-height1" style="color: #868687;">
							<span v-if="dataArray.gxyList&&dataArray.gxyList[0]">{{dataArray.gxyList&&dataArray.gxyList[0].pulse||'未测量'}} 次/分钟</span>
							<span v-else>未测量</span>
						</view>
						<view class="fs-10 centerY" style="color: #868687 ;">
							<text class="iconfont Clock"></text>
							<view class="ml-1">
								<span v-if="dataArray.gxyList&&dataArray.gxyList[0]">{{dataArray.gxyList&&dataArray.gxyList[0].uploadTime}}</span>
								<span v-else>暂无</span>
							</view>
						</view>
					</view>
					<view class="iconfont Chevron-Right fs-24" style="color: #35B79C "></view>
				</view>
				<view class="px-3 py-2"  v-if="dataArray.gxyList&&dataArray.gxyList.length">
					<view class="fs-14 text-gry mb-1">
						近7次测量记录
					</view>
					<view class="">
						<view id="echarts3" class="echarts"></view>
					</view>
					<view class="mt-3 p-2 mb-2"
						style="box-shadow: 0px 2px 13px 2px rgba(211,212,214,0.45);border-radius: 8px;">
						<view class="centerY">
							<image class="w-10" src="@/static/img/other/xlfw.png" mode="widthFix"></image>
							<view class="fs-14 font-bold ml-2 space-nowrap">
								心率标准
							</view>
							<view class=" ml-2 fs-12" style="color: #868687;">
								60~100 次/分钟
							</view>
						</view>
						<view class="centerY mt-2">
							<image class="w-10" src="@/static/img/other/zjjy.png" mode="widthFix"></image>
							<view class="fs-14 font-bold ml-2 space-nowrap">
								专家建议
							</view>
							<view class=" ml-2 fs-12" style="color: #868687;">
								正常
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataArray:{}
			};
		},
		onLoad() {
			this.find_home_data()
		},
		methods: {
			async find_home_data() {
				uni.showLoading({
					title: '加载中'
				});
				let idCard = uni.getStorageSync('idCard')
				let {
					data,
					code
				} = await this.$api.find_home_data({
					idCard
				})
				if (code == 0) {
					this.dataArray = data;
					if(data&&data.gxyList.length){
						this.getdom('echarts1',()=>{
							this.chartOption1(data.gxyList, 'echarts1')
						})
						this.getdom('echarts3',()=>{
							this.chartOption3(data.gxyList, 'echarts3')
						})
					}
					if(data&&data.tnbList.length){
						this.getdom('echarts2',()=>{
							this.chartOption2(data.tnbList, 'echarts3')
						})
					}
					uni.hideLoading();
					uni.stopPullDownRefresh()
				} else {
					uni.hideLoading();
					uni.stopPullDownRefresh()
				}
				console.log(this.dataArray)
			},
			getdom(dom,cb){
				let timer = setInterval(()=>{
					if(document.getElementById(dom)){
						clearInterval(timer)
						cb&&cb()
					}
				},300)
			}
		},
		onPullDownRefresh() {
			this.find_home_data()
		}
	}
</script>

<script module="echarts" lang="renderjs">
	import * as echarts from 'echarts';
	import { config } from '@/static/js/defult_value.js';
	export default {
		mounted() {
			console.log(echarts)
			
			// this.initChart('echarts1', this.option)
			// this.initChart('echarts2', this.option2)
		},
		methods: {
			initChart(dom, option) {
				let chart = echarts.init(document.getElementById(dom))
				chart.setOption(option)
			},
			// updateEcharts(newValue, oldValue, ownerInstance, instance) {
			// 	// 监听 service 层数据变更
			// 	myChart.setOption(newValue)
			// },
			onClick(event, ownerInstance) {
				// 调用 service 层的方法

			},
			check({
				type,
				value,
				age,
				sex
			}) {
				let msg = uni.getStorageSync('userData')
				let arr = config
				if (type == 'shrink' && age) {
					if (msg.age > 65) {
						if (value > arr['shrinktop'][1]) {
							return true
						}
						if (value < arr['shrinktop'][0]) {
							return true
						}
					} else {
						if (value > arr['shrinklow'][1]) {
							return true
						}
						if (value < arr['shrinklow'][0]) {
							return true
						}
					}
				}

				if (sex) {
					if (msg.sex == 1) {
						if (value > arr[type][0][1]) {
							return true
						}
						if (value < arr[type][0][0]) {
							return true
						}
					} else {
						if (value > arr[type][1][1]) {
							return true
						}
						if (value < arr[type][1][0]) {
							return true
						}
					}
				}

				if (value > arr[type][1]) {
					return true
				}
				if (value < arr[type][0]) {
					return true
				}
				return false
			},

			chartOption1(data, dom) {
				// console.log(data)
				let data1 = [],
					data2 = [],
					data3 = [],
					time = []
				data.map((item) => {
					time.push(this.$mf.timeTrans({
						time: item.uploadTime,
						format: 'M.D'
					}))
					data1.push(item.sbp)
					data2.push(item.rbp)
					data3.push(item.pulse)
				})

				let arr = []
				data.map((item, index) => {
					if (this.check({
							type: 'shrink',
							value: data1[index],
							age: true
						})) {
						arr.push({
							name: '收缩压',
							value: [item.uploadTime, data1[index]],
							symbolSize: 8,
						})
					}
					if (this.check({
							type: 'diastole',
							value: data2[index]
						})) {
						arr.push({
							name: '舒张压',
							value: [item.uploadTime, data2[index]],
							symbolSize: 8,
						})
					}

				})
				// console.log(arr)
				var option = (option = {
					legend: {
						data: ['收缩压', '舒张压', '心率'],
					},
					tooltip: {
						formatter: function(params) {
							console.log(params)
							let str =
								'<view style="padding:0px;width:140px"><view>' +
								params[0].name +
								'</view><view class="centerY" style="margin-top:6px"><view style="background:#5470c6;width:10px;height:10px;border-radius: 50%;" ></view><view class="" style="margin-left:4px">' +
								params[0].seriesName +
								'</view> <view class="ml-auto font-bold">' +
								params[0].value +
								'</view></view> <view class="centerY" style="margin-top:6px"><view style="background:#91cc75;width:10px;height:10px;border-radius: 50%;" ></view><view class="" style="margin-left:4px">' +
								params[1].seriesName +
								'</view><view class="ml-auto font-bold">' +
								params[1].value +
								'</view></view><view class="centerY" style="margin-top:6px"><view style="background:#fac858;width:10px;height:10px;border-radius: 50%;" ></view><view class="" style="margin-left:4px">' +
								params[2].seriesName +
								'</view><view class="ml-auto font-bold">' +
								params[2].value +
								'</view></view></view>'
							return str
						},
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985',
							},
						},
					},
					grid: {
						top: '20%',
						left: '3%',
						right: '5%',
						bottom: '3%',
						containLabel: true,
					},
					xAxis: [{
						type: 'category',
						axisPointer: {
							type: 'shadow',
						},
						data: time.reverse(),
					}, ],
					yAxis: [{
						type: 'value',
					}, ],
					series: [{
							name: '收缩压',
							label: {
								show: true,
								formatter: '{@score}',
								position: 'top'
							},
							smooth: true,
							type: 'line',
							data: data1.reverse(),
						},
						{
							name: '舒张压',
							label: {
								show: true,
								formatter: '{@score}',
								position: 'bottom',
							},
							smooth: true,
							type: 'line',
							data: data2.reverse(),
						},
						{
							type: 'effectScatter',
							coordinateSystem: 'cartesian2d',
							data: arr,
							showEffectOn: 'render',
							// zlevel:1,
							rippleEffect: {
								// 波纹的绘制方式,可选'stroke'和'fill'
								brushType: 'fill',
							},
							itemStyle: {
								color: '#F2597F'
							},
							hoverAnimation: false,
						},
					],
				})
				if (document.getElementById(dom)) {
					this.initChart(dom, option)
				}

			},
			chartOption2(data) {
				// console.log(data)
				let data1 = [],
					time = []
				data.map((item) => {
					time.push(this.$mf.timeTrans({
						time: item.uploadTime,
						format: 'M.D'
					}))
					data1.push(item.glu)
				})

				let arr = []
				data.map((item, index) => {
					if (this.check({
							type: 'bloodGlucose',
							value: data1[index],
							age: true
						})) {
						arr.push({
							name: '血糖',
							value: [item.uploadTime, data1[index]],
							symbolSize: 8,
						})
					}
				})
				var option = (option = {
					legend: {
						data: ['血糖'],
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985',
							},
						},
					},
					grid: {
						top: '20%',
						left: '3%',
						right: '5%',
						bottom: '3%',
						containLabel: true,
					},
					xAxis: [{
						type: 'category',
						axisPointer: {
							type: 'shadow',
						},
						data: time.reverse(),
					}, ],
					yAxis: [{
						type: 'value',
					}, ],
					series: [{
							name: '血糖',
							label: {
								show: true,
								formatter: '{@score}',
								position: 'top'
							},
							smooth: true,
							type: 'line',
							data: data1.reverse(),

							itemStyle: {
								color: '#369FE5'
							},
						},
						{
							type: 'effectScatter',
							coordinateSystem: 'cartesian2d',
							data: arr,
							showEffectOn: 'render',
							// zlevel:1,
							rippleEffect: {
								// 波纹的绘制方式,可选'stroke'和'fill'
								brushType: 'fill',
							},
							itemStyle: {
								color: '#F2597F'
							},
							hoverAnimation: false,
						},
					],
				})
				this.$nextTick(() => {
					if (document.getElementById('echarts2')) {
						this.initChart('echarts2', option)
					}
				})
			},
			chartOption3(data, dom) {
				// console.log(data)
				let data1 = [],
					data2 = [],
					data3 = [],
					time = []
				data.map((item) => {
					time.push(this.$mf.timeTrans({
						time: item.uploadTime,
						format: 'M.D'
					}))
					data3.push(item.pulse)
				})

				let arr = []
				data.map((item, index) => {
					if (this.check({
							type: 'pulse',
							value: data3[index]
						})) {
						arr.push({
							name: '心率',
							value: [item.uploadTime, data3[index]],
							symbolSize: 10,
						})
					}
				})
				// console.log(arr)
				var option = (option = {
					legend: {
						data: ['心率'],
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985',
							},
						},
					},
					grid: {
						top: '20%',
						left: '3%',
						right: '5%',
						bottom: '3%',
						containLabel: true,
					},
					xAxis: [{
						type: 'category',
						axisPointer: {
							type: 'shadow',
						},
						data: time.reverse(),
					}, ],
					yAxis: [{
						type: 'value',
					}, ],
					series: [{
							name: '心率',
							label: {
								show: true,
								formatter: '{@score}',
								position: 'top',
							},
							itemStyle: {
								color: '#35B79C'
							},
							smooth: true,
							type: 'line',
							data: data3.reverse(),
							areaStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									global: false,
									colorStops: [{
											offset: 0,
											color: 'rgba(53,183,156,.7)'
										},
										{
											offset: 0.5,
											color: 'rgba(53,183,156,0.3)'
										},
										{
											offset: 1,
											color: 'rgba(53,183,156,0)'
										}
									]
								}
							},
						},
						{
							type: 'effectScatter',
							coordinateSystem: 'cartesian2d',
							data: arr,
							showEffectOn: 'render',
							// zlevel:1,
							rippleEffect: {
								// 波纹的绘制方式,可选'stroke'和'fill'
								brushType: 'fill',
							},
							itemStyle: {
								color: '#F2597F'
							},
							hoverAnimation: false,
						},
					],
				})
				if (document.getElementById(dom)) {
					this.initChart(dom, option)
				}

			},
		}

	}
</script>
<style lang="scss">
	page {
		background: #F5F9FF;
	}

	.echarts {
		width: 100%;
		height: 400rpx;
	}
</style>