h5/pages/home_monitoring/home_monitoring.vue

<template>
	<view>
		<view class="position-relative bghead" style="margin-top: -80rpx;">
			<image src="@/static/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/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;">
							{{'70/150 mmHg'}}
						</view>
						<view class="fs-12 centerY" style="color: #868687 ;">
							<text class="iconfont Clock"></text>
							<view class="ml-1">
								{{'2022-11-22 14:20:20'}}
							</view>
						</view>
					</view>
					<view class="iconfont Chevron-Right fs-24" style="color: #35B79C;"></view>
				</view>
				<view class="px-3 py-2">
					<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/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/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/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;">
							{{'4.5 mmol/L'}}
						</view>
						<view class=" centerY" style="color: #868687 ;">
							<text class="iconfont Clock"></text>
							<view class="fs-12 ml-1">
								{{'2022-11-22 14:20:20'}}
							</view>
						</view>
					</view>
					<view class="iconfont Chevron-Right fs-24" style="color: #369FE5;"></view>
				</view>
				<view class="px-3 py-2">
					<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/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/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/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;">
							{{'80 次/分钟'}}
						</view>
						<view class="fs-10 centerY" style="color: #868687 ;">
							<text class="iconfont Clock"></text>
							<view class="ml-1">
								{{'2022-11-22 14:20:20'}}
							</view>
						</view>
					</view>
					<view class="iconfont Chevron-Right fs-24" style="color: #35B79C "></view>
				</view>
				<view class="px-3 py-2">
					<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/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/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 {

			};
		},
		onReady() {},
		methods: {
			changeOption() {
				const data = this.option.series[0].data
				// 随机更新示例数据
				data.forEach((item, index) => {
					data.splice(index, 1, Math.random() * 40)
				})
			},
			onViewClick(options) {
				console.log(options)
			}
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		}
	}
</script>

<script module="echarts" lang="renderjs">
	import * as echarts from 'echarts';
	let dataList = [{
		"id": 41,
		"idCard": null,
		"checkType": "ExamBloodGlucose",
		"medicalRecordId": null,
		"authorizationCode": null,
		"glu": "5.8",
		"deviceUuid": "355D0003795",
		"sbp": 110,
		"rbp": 80,
		"pulse": 80,
		"uploadTime": "2022-09-26 07:08:00",
		"createTime": "2022-09-26T07:06:54",
		"updateTime": "2022-09-26T07:06:54",
		"isDelete": 0,
		"aorB": null
	}, {
		"id": 39,
		"idCard": null,
		"checkType": "ExamBloodGlucose",
		"medicalRecordId": null,
		"authorizationCode": null,
		"glu": "5.5",
		"deviceUuid": "355D0003795",
		"sbp": 130,
		"rbp": 87,
		"pulse": 82,
		"uploadTime": "2022-09-23 06:20:00",
		"createTime": "2022-09-23T06:19:45",
		"updateTime": "2022-09-23T06:19:45",
		"isDelete": 0,
		"aorB": null
	}, {
		"id": 25,
		"idCard": null,
		"checkType": "ExamBloodGlucose",
		"medicalRecordId": null,
		"authorizationCode": null,
		"glu": "7.3",
		"deviceUuid": "355D0003795",
		"sbp": 125,
		"rbp": 95,
		"pulse": 95,
		"uploadTime": "2022-09-13 06:04:00",
		"createTime": "2022-09-13T06:04:26",
		"updateTime": "2022-09-13T06:04:26",
		"isDelete": 0,
		"aorB": null
	}, {
		"id": 24,
		"idCard": null,
		"checkType": "ExamBloodGlucose",
		"medicalRecordId": null,
		"authorizationCode": null,
		"glu": "9.1",
		"deviceUuid": "355D0003795",
		"sbp": 135,
		"rbp": 84,
		"pulse": 77,
		"uploadTime": "2022-09-12 07:56:00",
		"createTime": "2022-09-12T07:56:53",
		"updateTime": "2022-09-12T07:56:53",
		"isDelete": 0,
		"aorB": null
	}, {
		"id": 23,
		"idCard": null,
		"checkType": "ExamBloodGlucose",
		"medicalRecordId": null,
		"authorizationCode": null,
		"glu": "7.7",
		"deviceUuid": "355D0003795",
		"sbp": 143,
		"rbp": 90,
		"pulse": 89,
		"uploadTime": "2022-09-12 05:38:00",
		"createTime": "2022-09-12T05:38:40",
		"updateTime": "2022-09-12T05:38:40",
		"isDelete": 0,
		"aorB": null
	}, {
		"id": 22,
		"idCard": null,
		"checkType": "ExamBloodGlucose",
		"medicalRecordId": null,
		"authorizationCode": null,
		"glu": "17.8",
		"deviceUuid": "355D0003795",
		"sbp": 133,
		"rbp": 80,
		"pulse": 85,
		"uploadTime": "2022-09-11 15:51:00",
		"createTime": "2022-09-11T15:52:00",
		"updateTime": "2022-09-11T15:52:00",
		"isDelete": 0,
		"aorB": null
	}, {
		"id": 21,
		"idCard": null,
		"checkType": "ExamBloodGlucose",
		"medicalRecordId": null,
		"authorizationCode": null,
		"glu": "6.5",
		"deviceUuid": "355D0003795",
		"sbp": 123,
		"rbp": 75,
		"pulse": 86,
		"uploadTime": "2022-09-08 07:15:00",
		"createTime": "2022-09-08T07:13:21",
		"updateTime": "2022-09-08T07:13:21",
		"isDelete": 0,
		"aorB": null
	}]
	const config = {
		pulse: [60, 100],
		temperature: [36.5, 37.5],
		shrink: [90, 139],
		diastole: [60, 90],
		shrinktop: [90, 149], //大于65
		shrinklow: [90, 139], //小于65  
		bmi: [18.50, 23.90],
		urine1: [
			[53, 106],
			[44, 97], "肌酐"
		],
		urine2: [0, 30, "微量白蛋白"],
		urine3: [8.4, 13.2, "尿微/肌酐"],
		kidney1: [
			[208, 428],
			[155, 357], "血尿酸"
		],
		kidney2: [
			[54, 133],
			[44, 97], "血肌酐"
		],
		kidney3: [13.9, 6.1, "尿素氮"],
		bloodFat1: [0.45, 1.7, "甘油三酯"],
		bloodFat2: [2.85, 5.69, "总胆固醇"],
		bloodFat3: [0, 3.4, "低密度脂蛋白"],
		bloodFat4: [1.16, 1.55, "高密度脂蛋白"],
		lvision: [1.0, 5.0, '左视力'],
		rvision: [1.0, 5.0, '右视力'],
		bloodGlucose: [3.9, 6.9, '血糖'],
		chol: [2.85, 5.69, '总胆固醇'],
		ua: [
			[149, 416],
			[89, 357], '尿酸'
		],
		spo2: [95, 99, '血氧'],
		rxyl: [0, 0],
		ryjl: [0, 0],
	}
	let info = {
		"id": 905,
		"username": "罗桂花",
		"birthday": "1945-12-28",
		"age": 77,
		"sex": 2,
		"idCard": "330222194512283184",
		"socialInsurance": "1111",
		"tod": "[]",
		"phone": "15854712036",
		"nation": "汉族",
		"culture": "高中",
		"occupation": "自由职业",
		"marriage": "已婚",
		"address": "[\"330000\",\"330100\",\"330122\"]",
		"addressDetail": "111",
		"province": "浙江省",
		"city": "杭州市",
		"area": "桐庐县",
		"town": "附海镇",
		"village": "花木村",
		"healthIndex": null,
		"complication": "[]",
		"acutecomplications": null,
		"medicalInsuranceType": 1,
		"chronicDiseaseType": 4,
		"gxyIllTime": null,
		"tnbIllTime": null,
		"diseaseHistory": null,
		"familyHistory": null,
		"saltiness": "",
		"hospitalId": 103,
		"registUserId": 78,
		"nextVisitTime": null,
		"newVisitDate": null,
		"disability": null,
		"povertySituation": null,
		"healthImportance": null,
		"lvhTime": null,
		"lvh": null,
		"carotidPlaque": null,
		"carotidPlaqueTime": null,
		"hyperhomocysteinemia": null,
		"mentalIllness": null,
		"acuteDisease": null,
		"chronicDisease": null,
		"chronicConfirmedTime": null,
		"acuteConfirmedTime": null,
		"hospitalTime": null,
		"acuteRiskLevel": null,
		"chronicRiskLevel": null,
		"andComplication": "[]",
		"project": null,
		"isSend": "0",
		"createTime": "2022-11-23 13:14:24",
		"updateTime": "2022-11-23T13:14:24",
		"isDelete": 0
	}
	export default {
		mounted() {
			console.log(echarts)
			this.chartOption1(dataList, 'echarts1')
			this.chartOption2(dataList, 'echarts2')
			this.chartOption3(dataList, 'echarts3')
			// 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 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			},

			check({
				type,
				value,
				age,
				sex
			}) {
				let msg = info
				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>