xinelu-applet-ui/pagesB/Healthindex/Healthindex.vue

<template>
	<view class="app">
		<view class="health">
			<view class="health_top">
	
				<!-- <view class="right" @tap="healthtap()">
					1
				</view> -->
				<image image v-if="healthdata.hiEva<650" :src="require('../images/red.png')">
					<image image v-if="healthdata.hiEva>850" :src="require('../images/green.png')" image>
						<image v-if="healthdata.hiEva > 650" :src="require('../images/yellow.png')" image>
							<view class="count">
								<view class="numbers">{{healthdata.hiEva}}</view>
								<view class="healths">健康指数</view>
							</view>
			</view>
			<view class="health_body">
				<view class="healthitem">
					血压（mmHg)：{{healthdata.physicalSign.bp.sbp}}/{{healthdata.physicalSign.bp.dbp}}
				</view>
				<view class="healthitem">
					空腹血糖（mmol/L)：{{healthdata.physicalSign.bg.bg}}
				</view>
				<view class="healthitem">
					血脂（TC/LDL-C)：{{healthdata.physicalSign.bf.tc}}/{{healthdata.physicalSign.bf.ldlc}}
				</view>
				<view class="healthitem">
					体质指数（BMI)：{{healthdata.physicalSign.bmi.bmi}}
				</view>
				<view class="healthitem">
					腰围（cm）：{{healthdata.physicalSign.waist.waist}}
				</view>
			</view>
			<!-- 折线图 -->
			<view class="zx">
				<qiun-data-charts type="line" loadingType="0" :opts="line_opts" :ontouch="true" :chartData="datalist" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		healthIndexdata
	} from "@/api/pagesB/threeHundredAndSixty/threeHundredAndSixty.js"
	export default {
		data() {
			return {
				datalist: null,
				checked: true,
				cardNo: '',
				healthdata: {},
				line_opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					dataLabel: true,
					enableScroll: true,
					touchMoveLimit: 24,
					padding: [15, 10, 0, 15],
					xAxis: {
						lineHeight: 40,
						disableGrid: true,
						boundaryGap: "center",
						fontSize: 10,
						type: 'grid',
						gridType: 'dash',
						itemCount: 3, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				
			}
		},
		onShow() {
			// 健康指数
	
		},
		mounted() {
			this.infohealths()
			console.log('0000000000')
			this.getServerData()
		},
		methods: {
			infohealths() {
				if (uni.getStorageSync("userinfo").cardNo) {
					// this.cardNo=uni.getStorageSync("userinfo").cardNo
					this.cardNo = '370522196411282177'
					healthIndexdata(this.cardNo).then(res => {
						this.healthdata = res.data
					})
				}
			
			},
			getServerData() {
				// if (this.healthdata) {
				setTimeout(() => {
					let res = {
						categories: [],
						series: [{
								name: "成交量A",
								data: [35, 8, 25, 37, 4, 20]
							},
							{
								name: "成交量B",
								data: [70, 40, 65, 100, 44, 68]
							},
							{
								name: "成交量C",
								data: [100, 80, 95, 150, 112, 132]
							}, {
								name: "成交量C",
								data: [100, 80, 95, 150, 112, 132]
							}
						]
					}
					console.log(res, 'res111')
					res.series[0].name = this.healthdata.evaAnalysis.bg.series[0].name
					res.categories = this.healthdata.evaAnalysis.bg.xValue
					this.datalist = res
					// res.series[0].data = this.healthdata.physicalSign.bf.xValue
					// res.series[0].name=this.healthdata.evaAnalysis.bp.name
			
					// res.series[1].name=this.healthdata.evaAnalysis.bg.name
					// res.series[2].name=this.healthdata.evaAnalysis.bf.name
					// res.series[3].name=this.healthdata.evaAnalysis.bmi.name
					console.log(res, 'res')
			
					// res.series[0].data = this.healthdata.physicalSign.bf.series.map(e => e.bg)
					// res.categories = this.healthdata.evaAnalysis.map(e => e.timename + e.measureTime)
					// this.datalist = res
					// let restwo = {
					// 	series: [{
					// 		data: [{
					// 			"name": "偏低" + this.healthdata.calc.lowerNum + "次",
					// 			"value": this.healthdata.calc.lowerNum
					// 		}, {
					// 			"name": "正常" + this.healthdata.calc.normalNum + "次",
					// 			"value": this.healthdata.calc.normalNum
					// 		}, {
					// 			"name": "偏高" + this.healthdata.calc.higherNum + "次",
					// 			"value": this.healthdata.calc.higherNum
					// 		}]
					// 	}]
					// };
					// this.datalisttwo = restwo
				}, 500)
				// }
				// //模拟从服务器获取数据时的延时
				// setTimeout(() => {
				// 	//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				// 	let res = {
				// 		categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
				// 		series: [{
				// 				name: "成交量A",
				// 				data: [35, 8, 25, 37, 4, 20]
				// 			},
				// 			{
				// 				name: "成交量B",
				// 				data: [70, 40, 65, 100, 44, 68]
				// 			},
				// 			{
				// 				name: "成交量C",
				// 				data: [100, 80, 95, 150, 112, 132]
				// 			}
				// 		]
				// 	};
				// 	this.chartData = JSON.parse(JSON.stringify(res));
				// }, 500);
			},
			
			
		}
	}
</script>

<style lang="scss">
	.app {
		height: 100vh;
		background-color: #fff;
		// padding: 100rpx 40rpx;
		text-align: center;
		font-size: 36rpx;
		// 健康
		.health {
			width: 100%;
			margin: 0 auto;
		
			// background: red;
			.health_top {
				width: 100%;
		
				// height: 100%;
				// background: #FBDA81;
				.right {
					position: relative;
					font-size: 20rpx;
					width: 30rpx;
					height: 30rpx;
					background: red;
					top: 30rpx;
					line-height: 30rpx;
					left: 471rpx;
					// left: 288rpx;
		
				}
		
				image {
					width: 230rpx;
					height: 230rpx;
				}
		
				.count {
					position: relative;
					top: -158rpx;
		
					.numbers {
						font-weight: 600;
						font-size: 25rpx;
						margin-bottom: 10rpx;
					}
		
					.healths {
						font-size: 22rpx;
					}
				}
			}
		
			.health_body {
				width: 100%;
		
				.healthitem {
					text-align: left;
					padding: 0 0 40rpx 62rpx;
					font-size: 29rpx;
		
					// padding-bottom: 40rpx;
					// position: relative;
					// left: -53rpx;
		
				}
		
			}
		
			.zx {
				width: 100%;
				height: 300rpx;
				// background: red;
			}
		
		}
		}

</style>