179crm_user_app/pages_echarts/bloodSugar.vue

<template>
	<view class="hb column hidden container">
		<image class="bg" src="https://user.test.ylrztop.com/images/blood_sugar_top_bg.png" mode="widthFix"></image>
		<view :style="{height: statusBarHeight,background: bgColor }"></view>
		<u-navbar title="血糖检测" titleStyle="font-weight: bold;" @rightClick="rightClick" :autoBack="true"
			:bg-color="bgColor">
		</u-navbar>
		<view class="top-fixed">
			<!-- tab切换 -->
			<dateTimePicker @onChange="onChangeTime" :tab-color="'gree'" :form-tab="aIndex"/>
		</view>
		<scroll-view class="content" :scroll-y="true">
			<view class="content-box">
				<view class="tltle">血糖趋势</view>
				<view class="subtitle">单位：mmol/L</view>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" tooltipFormat="bpTooltip"/>
				</view>
			</view>
			<view class="content-box">
				<view class="align-center justify-between">
					<view class="tltle">血糖异常记录</view>
					<view class="more" @click="goPage()">
						<text>查看更多</text>
						<image class="w48 h48" src="/static/images/health/right_arrow_right_icon24.png"></image>
					</view>
				</view>
				<view class="type-box">
					<view class="box bg1">
						<view class="fs32 mb12">正常</view>
						<view class="align-center justify-between">
							<text class="subtitle">{{count.count0}}次</text>
							<image class="w24 h24" src="/static/images/health/zc_arrow_icon.png"></image>
						</view>
					</view>
					<view class="box bg2">
						<view class="fs32 mb12">轻微</view>
						<view class="align-center justify-between">
							<text class="subtitle">{{count.count1}}次</text>
							<image class="w24 h24" src="/static/images/health/qw_arrow_icon.png"></image>
						</view>
					</view>
					<view class="box bg3">
						<view class="fs32 mb12">严重</view>
						<view class="align-center justify-between">
							<text class="subtitle">{{count.count2}}次</text>
							<image class="w24 h24" src="/static/images/health/yz_arrow_icon.png"></image>
						</view>
					</view>
				</view>
				<view class="content-bottom">
					<view class="align-center">
						<image class="w48 h48" src="/static/images/health/note_icon.png"></image>
						<view class="title">血糖
							<text>最新标准</text>
						</view>
					</view>
					<view class="bottom-box">
						<view>空腹血糖正常值为4.1-6.1mmol/L</view>
						<view>餐后1小时血糖正常值为6.7-9.4mmol/L</view>
						<view>餐后2小时血糖正常值为{{'<=' + 7.8}}mmol /L</view>
						<!-- <view>餐后2小时血糖正常值为<=7.8mmol/L</view> -->
					</view>
				</view>
			</view>
			<view class="h20"></view>
			<view class="btn-box">
				<view class="sub-btn" @click="navgetTo()">记录</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
		import {getUserInfo} from '@/api/user.js'
	import {getDataList,getLatest,getLatestList} from '@/api/healthUser.js'
import dateTimePicker from "@/pages_echarts/components/dateTimePicker/dateTimePicker.vue"
	export default {
		components: {
			dateTimePicker
		},
		data() {
			return {
				color:'#2CAE5C',
				statusBarHeight: '',
				top: 0,
				aIndex:0,
				times:[	{name:"每日",val:0},
					{name:"每周",val:1},
					{name:"每月",val:2}],
				indexInfo: [],
				healthRecordsList: [{
					title: '疾病史',
					type: "healthHistory",
					desc: '',
					bgicon: "https://user.test.ylrztop.com/images/jbs_icon.png",
				}, {
					title: '症状史',
					type: "symptomHistory",
					desc: '',
					bgicon: "https://user.test.ylrztop.com/images/zzs_icon.png",
				}],
				chartData: {},
				opts: {
					color: ["#FF5030"],
					padding: [20, 0, 15, 0],
					enableScroll: false,
					dataLabel:false,
					dataPointShapeType: "hollow",
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
						fontSize: 12,
						axisLine:false,
						fontColor: '#ccc',
						// 横坐标最多展示几个
						labelCount: 7,
						// 自定义横坐标展示（在/u-charts/config-ucharts中有配置）
						format: "formatterTime",
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						// splitNumber: 6,
						data: [{
							fontColor: '#ccc',
							min: 0,
							// max: 33,
							axisLine:false,
							fontSize: 12,
						}]
					},
					extra: {
						tooltip: {
							gridType: "dash",
							showArrow: false,
							legendShow: true,
							legendShape: "circle"
						},
						area: {
							type: "straight",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "solid"
						}
					},
					
				},
				count:{},
				user:null
			}
		},
		computed: {
			// 计算属性的 getter
			bgColor: function() {
				var top = this.top / 30;
				return 'rgba(11,179,242, ' + top + ')';
			},
		},
		onLoad(options) {
			console.log(options,'--')
			this.userId=options.userId
			// 获取系统信息
			const sys = uni.getSystemInfoSync()
			this.statusBarHeight = sys.statusBarHeight + 'px'
			// this.getServerData(0);
			uni.$on('refreshBloodSugar', () => {
				this.aIndex=0
				this.getServerData(0);
			})
		},
		onShow(){
			// this.getServerData(0);
		},
		// onUnload() { //普通页面在 onUnload 生命周期中执行
		// 	uni.$emit('stop')
		// },
		// onHide() { //tabBar页面在onHide生命周期中执行
		// 	uni.$emit('stop')
		// },
		// onPageScroll(e) {
		// 	//console.log(e)
		// 	this.top = e.scrollTop;
		// },
		methods: {
			// tab切换
			orderStatusChange(item) {
				this.aIndex = item.val
			},
			onChangeTime(time,tab) {
				// console.log(time,tab,'----')
				if (this.userId) {
					this.examDate=time
				    this.getServerData(tab);
				  }
				// this.getServerData(tab)
			},
			getUserInfo(){
				getUserInfo().then(
					res => {
						if(res.code==200){
							if(res.user!=null){
								this.user=res.user;
								// this.getServerData(0)
							}
							else{
								this.utils.loginOut();
							}
							
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			getServerData(index) {
				var that=this
				var data={
					userId:this.userId, 
					measurementType: 2, 
					pageNum:1,
					pageSize:100,
					timeSearch:this.examDate,
					// "value1": 85, 
					// "measurementTime": this.utils.timeFormat(new Date(),'hh:MM:ss')
				}
				
				const weekMap= {
				  1: '一',
				  2: '二',
				  3: '三',
				  4: '四',
				  5: '五',
				  6: '六',
				  0: '日' // 注意：JavaScript中getDay()返回0表示周日
				};
				getLatestList(data).then(
					res => {
						 uni.hideLoading();
						if (res.code == 200) {
						   this.count=res.count
							var list=res.data.list
							var time=list.map(item => item.measurementTime).reverse()
							var week=list.map(item => '周'+weekMap[item.week]).reverse()
							var month=list.map(item => item.measurementDate).reverse()
							 setTimeout(() => {
							 	//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
							 	let res = {
							 		categories:index==0?time:index==1?week:month,
							 		series: [{
							 			name: "测量值",
							 			data: list.map(item => item.value1).reverse()
							 		}
							 		]
							 	};
							 	this.chartData = JSON.parse(JSON.stringify(res));
							 }, 500);
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				)
				
			},
			goPage(index) {
				uni.navigateTo({
					url: '/pages_echarts/bloodSugarList?userId='+this.userId
				})
			},
			navgetTo(index) {
				uni.navigateTo({
					url: '/pages_echarts/bloodSugarDetail?type=add&userId='+this.userId
				})
			},
			goToUser() {
				uni.navigateTo({
					url: '/pages_health/addUser?type=edit&docId='
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;

		.bg {
			width: 100%;
			height: 380rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}
.top-fixed{
			width: 100%;
			position: fixed;
			top: calc(var(--status-bar-height) + 140rpx);
			left: 0;
			z-index: 10;
		}
		.pub-tab-box{
			box-sizing: border-box;
			    width: 400rpx;
			    // padding: 0 60rpx;
			    margin: 0 auto;
			// background-color: #FFFFFF;
			.tab-inner{
				height: 88upx;
				line-height: 88upx;
				display: flex;
				align-items: center;
				justify-content:space-between;
				overflow-x: auto;
			}
			.item{
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #626468;
				line-height: 64rpx;
				text-align: center;
				&:last-child{
					margin-right: 0;
				}
				&.active{
					font-weight: 500;
					width: 124rpx;
					height: 64rpx;
					background: #2CAE5C;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					color: #fff;
				}
				.text{
					position: relative;
					z-index: 1;
				}
				.tab-bg{
					width: 72upx;
					height: 28upx;
					position: absolute;
					top: 17upx;
					left: 50%;
					transform: translateX(-36upx);
					z-index: -1;
				}
			}
		}
	.content {
		padding-top: calc(var(--status-bar-height) + 300rpx) !important;
		height: 100vh;
		box-sizing: border-box;
		width: 100%;
		padding: 20rpx;
overflow: hidden;
		.btn-box {
			height: 120upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: center;

			.sub-btn {
				width: 388rpx;
				height: 72rpx;
				line-height: 72upx;
				text-align: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #2CAE5C;
				border-radius: 44upx;
				margin-bottom: 40upx;
			}
		}

		.content-box {
			// width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;

			.tltle {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #222426;
				text-align: left;
				margin-bottom: 16rpx;
			}

			.subtitle {
				font-weight: 400;
				font-size: 24rpx;
				color: #898E91;
				text-align: left;

			}

			/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
			.charts-box {
				// width: 100%;
				height: 500rpx;
				margin-top: 30rpx;
			}

			.more {
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #898E91;
			}

			.type-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;

				.box {
					padding: 24rpx;
					width: 158rpx;
					// height: 144rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;

					&.bg1 {
						background: #FAFFFC;
						border: 2rpx solid #EBFFF3;
					}

					&.bg2 {
						background: #FEFAF8;
						border: 2rpx solid #FDF7F3;
					}

					&.bg3 {
						background: #FFFCFC;
						border: 2rpx solid #FCF4F4;
					}
				}
			}

			.content-bottom {
				padding: 24rpx;
				background: #F5F7FA;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-top: 32rpx;
               
				.title {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #222426;
					text-align: left;
					margin-left: 14rpx;

					text {
						color: #FF5030;
					}
				}
				.bottom-box {
                   postion:relative;
					font-weight: 400;
					font-size: 24rpx;
					color: #626468;
					text-align: left;
					line-height: 40rpx;
					padding-top: 24rpx;
                    padding-left: 24rpx;
					view{
						position: relative;
					}
					view::before {
						content: "";
						width: 8rpx;
						height: 8rpx;
						background: rgba(255,80,48,0.2);
						position: absolute;
						left:-22rpx;
						top: 20rpx;
						border-radius: 50%;
					}
				}
			}
		}
	}
</style>