h5/pages/sign/sign.vue

<template>
	<view class="mb-5">
		<view class="" v-if="userData.id">
			<view class="header p-3">
				<view class="centerY">
					<span class="d-inline-block fs-18 text-white font-bold">个人档案</span>
					<span v-if="ipArr.find(item => item.ip == prodIp) && ipArr.find(item => item.ip == prodIp).name !== '兰溪'"
						class="d-inline-block py-1 d-inline-block ml-auto text-white1" @click="closet">
						[ 退出 ]
					</span>
					<span v-if="ipArr.find(item => item.ip == prodIp) && ipArr.find(item => item.ip == prodIp).name == '兰溪'"
						class="d-inline-block py-1 d-inline-block ml-auto text-white1" @click="operation">
						[ 切换 ]
					</span>
				</view>
				<view class="centerY mt-2" @click="$mf.clickNavto('/pages/userinfo/userinfo')">
					<view class="w-15 userhead">
						<view class="picbox">
							<image v-if="userData.sex == 1" src="@/static/img/defult/head1.png" mode="widthFix" class="picimg">
							</image>
							<image v-if="userData.sex == 2" src="@/static/img/defult/head2.png" mode="widthFix" class="picimg">
							</image>
						</view>
					</view>
					<view class="w-85 ml-3">
						<view class="text-white fs-16 font-bold">{{ userData.username || '' }}</view>
						<view class="centerY" style="margin-top:10rpx;">
							<view :class="{ 'iconfont text-white fs-16 font-bold': true,
								 ' nv': userData.sex == 2||false, 'nanxing': userData.sex == 1||false }">
							</view>
							<!-- 	<view class="py-1 pl-2 text-center centerY text-gry80 bg-white ml-auto" style="border-radius: 6rpx;">
								<view class="">基础资料</view>
								<view class="iconfont youla2 fs-12 font-bold"></view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="content p-3 bg-white mx-3 my-3 box-border08">
				<view class="" style="display:flex;flex-wrap: wrap !important;">
					<view class="w-100 border-box">
						<view class=""
							style="background: linear-gradient(180deg, rgb(151,220,249) 0%, rgb(110,197,246) 100%);border-radius: 16rpx;">
							<view class="px-3 pt-2 pb-3 ">
								<view class="centerY ">
									<view class="bule_line"></view>
									<text class="fs-18 ml-2 font-bold" style="color: #1C90D7;">个人体征</text>
								</view>
								<view class="mt-2" style="color: #000;">
									<view class="font-bold" style="display:flex;flex-wrap: wrap !important;">
										<view class="w-50  border-box pr-1">
											<view class=" d-flex px-2 py-1"
												style="color: #55afdf;border-radius: 10rpx;background-color: rgba(255,255,255)">
												身高
												<span class="ml-auto ml-1">{{ physical.height || '-' }} cm</span>
											</view>
										</view>
										<view class="w-50 border-box  pl-1">
											<view class=" d-flex px-2 py-1"
												style="color: #55afdf;border-radius: 10rpx;background-color: rgba(255,255,255)">
												体重
												<span class="ml-auto ml-1">{{ physical.weight || '-' }} kg</span>
											</view>
										</view>
										<view class="w-50 border-box pr-1 mt-2">
											<view class=" d-flex px-2 py-1"
												style="color: #55afdf;border-radius: 10rpx;background-color: rgba(255,255,255)">
												BMI
												<span class="ml-auto ml-1">{{ physical.bmi || '-' }} kg/m^2</span>
											</view>
										</view>
										<view class="w-50 border-box pl-1 mt-2">
											<view class=" d-flex px-2 py-1"
												style="color: #55afdf;border-radius: 10rpx;background-color: rgba(255,255,255)">
												血压
												<span class="ml-auto ml-1">{{ physical.diastole || '-' }}/{{ physical.shrink || '-' }}
													mmHg</span>
											</view>
										</view>
										<view class="w-50 border-box pr-1 mt-2">
											<view class=" d-flex px-2 py-1"
												style="color: #55afdf;border-radius: 10rpx;background-color: rgba(255,255,255)">
												心率
												<span class="ml-auto ml-1">{{ physical.pulse || '-' }} bmp</span>
											</view>
										</view>
										<view class="w-50 border-box pl-1 mt-2">
											<view class=" d-flex px-2 py-1"
												style="color: #55afdf;border-radius: 10rpx;background-color: rgba(255,255,255)">
												腰围
												<span class="ml-auto ml-1">{{ physical.waist || '-' }} cm</span>
											</view>
										</view>
										<view class="w-50 border-box pr-1 mt-2">
											<view class=" d-flex px-2 py-1"
												style="color: #55afdf;border-radius: 10rpx;background-color: rgba(255,255,255)">
												血糖
												<span class="ml-auto ml-1">{{ physical.bloodGlucose || '-' }} mmol/L</span>
											</view>
										</view>
										<view class="w-50 border-box pl-1 mt-2">
											<view class=" d-flex px-2 py-1"
												style="color: #55afdf;border-radius: 10rpx;background-color: rgba(255,255,255)">
												血氧
												<span class="ml-auto ml-1">{{ physical.spo2 || '-' }} mmHg</span>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="">
					<!-- 身体特征 -->
					<view class="centerY mt-3" v-if="dataAll.physicals && dataAll.physicals.length > 0">
						<view class="bule_line"></view>
						<text class="font-bold text-dark ml-2 fs-16 line-height1">体征</text>
					</view>
					<view class="card mb-2 fs-14 mt-3 p-3" style="color: #818181;"
						v-if="dataAll.physicals && dataAll.physicals.length > 0">
						<view class=" p-3" style="background-color: #F5F9FF;border-radius: 16rpx;">
							<view id="echarts1" class="echarts"></view>
							<view id="echarts2" class="echarts"></view>
						</view>
						<view class="fs-10 d-flex mt-2" style="color: #909092;">
							<view class="space-nowrap">提示：</view>
							<view class="">
								<view class="">1、身体体质指数范围 偏瘦<= 18.4,正常 18.5 ~ 23.9,过重 24.0 ~ 27.9,肥胖>= 28.0</view>
								<view class="mt-1">2、血压心率 收缩压成人 65岁以上 90~149（mmHg）65岁以下 90~139（mmHg）,舒张压 60~90（mmHg）</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<footer />
			</view>
		</view>
		<view class="">
			<uni-popup ref="popup1" type="top" :mask-click="false">
				<view class=" w-80 mx-auto" style="margin-top: 30vh;">
					<view class="bg-white p-3 w-100 border-box" style="border-radius: 16rpx;">
						<view class="text-center mb-3 fs-14 font-bold py-2">查询</view>
						<view class=" centerY mb-3 w-100 border-box" style="overflow: hidden; ">
							<input type="text" v-model="valueId" class="px-2 m-0 fs-12 w-75  border-box"
								style="height: 70rpx;border: 2px solid #007aff;border-top-left-radius: 4rpx;border-bottom-left-radius: 4rpx;"
								placeholder="请输入身份证号码" placeholder-class="fs-12" />
							<uni-button type="primary" class="my-button fs-12 ml-auto border-box w-25"
								style="height: 70rpx;line-height: 70rpx; padding: 0 ;border-top-right-radius: 12rpx;border-bottom-right-radius: 12rpx;"
								@click="search">
								搜索
							</uni-button>
						</view>
					</view>
				</view>
			</uni-popup>

			<uni-popup ref="popup2" type="top" :mask-click="false">
				<view class=" w-80 mx-auto" style="margin-top: 30vh;">
					<view class="bg-white p-3 w-100 text-center border-box" style="border-radius: 16rpx;">
						<view class="text-center mb-3 fs-14 font-bold py-2">患者列表</view>
						<view class="text-left centerY mb-3" style="border-radius: 14rpx;border: 2px solid #007aff;">
							<uni-data-select v-model="userIndex" :localdata="userArr" @change="bindPickerChange"
								placeholder="请选择身份"></uni-data-select>
						</view>
						<view class="" v-if="userArr.length == 0">
							<empty title="还未绑定患者" />
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import ipArr from '@/config/servernet.config.js'
	console.log(ipArr)
	let globalData = getApp().globalData;
	import Empty from '@/component/empty/empty.vue';
	import Footer from '@/component/footer/footer.vue';
	import {
		config
	} from '@/static/js/defult_value.js';
	export default {
		components: {
			Empty,
			Footer
		},
		data() {
			return {
				userData: {},
				physical: {},
				valueId: '',
				prodIp: '',
				ipArr,
				userArr: [],
				userIndex: null,
				dataAll: {},
				config
			};
		},
		onLoad() {
			this.decrypt();
		},
		methods: {
			//正式
			async other() {
				let t = this;
				if (!uni.getStorageSync('idCard')) {
					t.$refs.popup1.open();
					uni.hideLoading();
				} else {
					t.getuserinfo(uni.getStorageSync('idCard'));
				}
			},
			//正式
			async zhengshi() {
				let t = this;
				if (!uni.getStorageSync('idCard')) {
					t.$refs.popup1.open();
					uni.hideLoading();
				} else {
					t.getuserinfo(uni.getStorageSync('idCard'));
				}
			},
			//兰溪
			lanxi() {
				let t = this;
				uni.getStorage({
					key: 'token',
					async success(res) {
						if (!res.data) return;
						let res2 = await t.$api.decrypt({
							toKen: res.data
						});
						if (res2.code !== -1) {
							if (!res2.data.uuid) {
								uni.showModal({
									title: '提示',
									content: '您还未登录请先去登录！',
									showCancel: false,
									success: function(res3) {
										if (res3.confirm) {
											console.log('用户点击确定');
											uni.navigateBack({
												delta: 1 //返回层数，2则上上页
											});
										}
									}
								});
								return;
							}
							if (res2.data.users && res2.data.users.length > 0) {
								t.$refs.popup2.open();
								t.userArr = [];
								res2.data.users.map((item, index) => {
									t.userArr.push({
										value: index,
										text: item.idcard
									});
								});
								uni.hideLoading();
							} else {
								t.$refs.popup2.open();
								t.userArr = [];
								res2.data.users.map((item, index) => {
									t.userArr.push({
										value: index,
										text: item.idcard
									});
								});
								uni.hideLoading();
							}
						} else {
							//返回数据出错
							errordata();
						}
					},
					fail(error) {
						//未获取到token或者出错
						errordata();
					}
				});

				function errordata() {
					if (!uni.getStorageSync('idCard')) {
						t.$refs.popup1.open();
						uni.hideLoading();
					} else {
						t.getuserinfo(uni.getStorageSync('idCard'));
					}
				}
			},
			decrypt() {
				//token解码
				uni.showLoading({
					title: '加载中'
				});
				let t = this;
				let timer = setInterval(() => {
					//等待获取ip
					if (globalData.configData.prodIp) {
						t.prodIp = globalData.configData.prodIp;
						clearInterval(timer);
					}
					ipArr.map(async item => {
						if (item.ip == globalData.configData.prodIp && item.name == '兰溪') {
							t.lanxi();
							return;
						}
						if (item.ip == globalData.configData.prodIp && item.name == '附海') {
							t.other();
							return;
						}
						if (item.ip == globalData.configData.prodIp && item.name == '正式') {
							t.zhengshi();
							return;
						}
						if (item.ip == globalData.configData.prodIp && item.name == '测试') {
							t.zhengshi();
							return;
						}
						if (item.ip == globalData.configData.prodIp && item.name == '开发') {
							t.other();
							return;
						}
					});
				}, 300);
			},
			//切换
			operation() {
				uni.clearStorage('idCard');
				uni.clearStorage('userData');
				this.valueId = '';
				this.userData = {};
				this.physical = {};
				this.$refs.popup2.open();
			},
			bindPickerChange(e) {
				if (this.userArr[e] && this.userArr[e].text) {
					this.getuserinfo(this.userArr[e].text);
				}
			},
			closet() {
				uni.clearStorage('idCard');
				uni.clearStorage('userData');
				this.valueId = '';
				this.userData = {};
				this.physical = {};
				this.$refs.popup1.open();
			},
			search() {
				if (!this.$mf.isCardID(this.valueId)) {
					uni.showToast({
						title: '请输入正确的身份证号',
						icon: 'error',
						duration: 2000,
						mask: true
					});
					return;
				}
				this.userData = {};
				this.physical = {};
				this.getuserinfo(this.valueId);
			},
			async find_physical() {
				uni.showLoading({
					title: '加载中'
				});
				let idCard = uni.getStorageSync('idCard');
				let {
					data,
					code
				} = await this.$api.find_physical({
					idCard
				});
				if (code == 0) {
					this.physical = data || {};
					uni.hideLoading();
				} else {
					uni.hideLoading();
				}
				uni.stopPullDownRefresh();
			},
			async getuserinfo(idCard) {
				//330222194512283184
				idCard = idCard || uni.getStorageSync('idCard');
				uni.showLoading({
					title: '加载中'
				});
				let {
					data,
					code
				} = await this.$api.getUserInfo({
					idCard
				});
				if (code == 0) {
					this.valueId = '';
					uni.setStorageSync('userData', data || {});
					uni.setStorageSync('idCard', (data && data.idCard) || '');
					this.userData = data || {};
					if (data && data.id) {
						this.find_physical();
						this.get_workspace(idCard)
						this.$refs.popup1.close();
						this.$refs.popup2.close();
					} else {
						uni.showToast({
							title: '未查询到患者',
							icon: 'error'
						});
					}
					uni.hideLoading();
					uni.stopPullDownRefresh();
				} else {
					this.valueId = '';
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			},

			async get_workspace(idCard) {
				idCard = idCard || uni.getStorageSync('idCard');
				uni.showLoading({
					title: '加载中'
				});
				let {
					data,
					code
				} = await this.$api.find_workspace({
					idCard
				});
				if (code == 0) {
					this.dataAll = data
					uni.hideLoading();
					this.settingData()
					uni.stopPullDownRefresh();
				} else {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			},
			settingData() {
				let physical = this.dataAll.physicals;
				this.echarts1data = {
					time: [],
					data1: [],
					data2: [],
					data3: [],
					data4: [],
					data5: [],
					data6: [],
					data7: [],
					data8: [],
					data9: []
				};

				if (physical && physical.length) {
					physical.reverse().map(item => {
						this.echarts1data['data1'].push(item.height);
						this.echarts1data['data2'].push(item.weight);
						this.echarts1data['data3'].push(item.bmi);
						this.echarts1data['data4'].push(item.shrink);
						this.echarts1data['data5'].push(item.diastole);
						this.echarts1data['data6'].push(item.pulse);
						this.echarts1data['time'].push(item.createTime);
					});
					if (
						this.echarts1data.data1.length ||
						this.echarts1data.data2.length ||
						this.echarts1data.data3.length) {
						this.chartOption1(this.echarts1data, 'echarts1');
					}
					if (
						this.echarts1data.data4.length ||
						this.echarts1data.data5.length ||
						this.echarts1data.data6.length) {
						this.chartOption2(this.echarts1data, 'echarts2');
					}
				}
			},
		},
		onPullDownRefresh() {
			if (this.userData && this.physical) {
				if (uni.getStorageSync('idCard')) {
					this.find_physical();
				} else {
					uni.stopPullDownRefresh();
				}
			} else {
				uni.stopPullDownRefresh();
			}
		}
	};
</script>
<script module="echarts" lang="renderjs">
	import * as echarts from 'echarts';
	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)
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
			},
			check({
				type,
				value,
				age,
				sex
			}) {
				age = age || false
				let userData = this.userData
				let arr = this.config
				if (type == 'shrink' && age) {
					if (userData.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 (userData.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({
				time,
				data1,
				data2,
				data3
			}) {
				let arr = []
				time = time.map((res) => this.$mf.timeTrans({
					time: res,
					format: 'M/D'
				}))
				time.map((item, index) => {
					if (this.check({
							type: 'bmi',
							value: data3[index]
						})) {
						arr.push({
							value: [item, data3[index]],
							symbolSize: 10
						})
					}
				})

				var option = (option = {
					legend: {
						data: ['身高', '体重', 'BMI'],
					},
					// tooltip: {
					//   trigger: 'axis',
					//   axisPointer: {
					//     type: 'cross',
					//     label: {
					//       backgroundColor: '#6a7985',
					//     },
					//   },
					// },
					grid: {
						top: '20%',
						left: '3%',
						right: '5%',
						bottom: '3%',
						containLabel: true,
					},
					xAxis: [{
						type: 'category',
						data: time,
						axisPointer: {
							type: 'shadow',
						},
					}, ],
					yAxis: [{
						type: 'value',
					}, ],
					series: [{
							name: 'BMI',
							label: {
								show: true,
								formatter: '{@score}',
								position: 'top',
							},
							smooth: true,
							type: 'line',
							data: data3,
							itemStyle: {
								color: '#9c5045'
							},
						},
						{
							name: '体重',
							label: {
								show: true,
								formatter: '{@score}',
								position: 'top',
							},
							smooth: true,
							type: 'line',
							barWidth: '60%',
							data: data2,
							itemStyle: {
								color: '#e74a2d'
							},
						},
						{
							name: '身高',
							label: {
								show: true,
								formatter: '{@score}',
								position: 'top'
							},
							type: 'line',
							data: data1,
							smooth: true,
							barWidth: '60%',
							itemStyle: {
								color: '#89b87b'
							},
						},
						{
							type: 'effectScatter',
							coordinateSystem: 'cartesian2d',
							data: arr,
							showEffectOn: 'render',
							// zlevel:1,
							rippleEffect: {
								// 波纹的绘制方式,可选'stroke'和'fill'
								brushType: 'fill',
							},
							hoverAnimation: false,
						},
					],
				})
				this.$nextTick(() => {
					if (document.getElementById('echarts1')) {
						this.initChart('echarts1', option)
					}
				})
			},
			chartOption2({
				time,
				data4,
				data5,
				data6
			}) {
				// console.log(time, data4, data5, data6)
				let arr = []
				time = time.map((res) => this.$mf.timeTrans({
					time: res,
					format: 'M/D'
				}))

				time.map((item, index) => {
					console.log(this.check({
						type: 'shrink',
						value: data4[index],
						age: true
					}))
					if (this.check({
							type: 'shrink',
							value: data4[index],
							age: true
						})) {
						arr.push({
							value: [item, data4[index]],
							symbolSize: 10
						})
					}
					if (this.check({
							type: 'diastole',
							value: data5[index],
							age: false
						})) {
						arr.push({
							value: [item, data5[index]],
							symbolSize: 10
						})
					}
					if (this.check({
							type: 'pulse',
							value: data6[index],
							age: false
						})) {
						arr.push({
							value: [item, data6[index]],
							symbolSize: 10
						})
					}
				})
				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,
					}, ],
					yAxis: [{
						type: 'value',
					}, ],
					series: [{
							name: '收缩压',
							label: {
								show: true,
								formatter: '{@score}',
								position: 'top'
							},
							smooth: true,
							type: 'line',
							data: data4,
							itemStyle: {
								color: '#8e3e1f'
							},
						},
						{
							name: '舒张压',
							label: {
								show: true,
								formatter: '{@score}',
								position: 'top',
							},
							smooth: true,
							type: 'line',
							data: data5,
							itemStyle: {
								color: '#3c3645'
							},
						},
						{
							name: '心率',
							label: {
								show: true,
								formatter: '{@score}',
								position: 'bottom',
							},
							smooth: true,
							type: 'line',
							data: data6,
							itemStyle: {
								color: '#33a3dc'
							},
						},
						{
							type: 'effectScatter',
							coordinateSystem: 'cartesian2d',
							data: arr,
							showEffectOn: 'render',
							// zlevel:1,
							rippleEffect: {
								// 波纹的绘制方式,可选'stroke'和'fill'
								brushType: 'fill',
							},
							hoverAnimation: false,
						},
					],
				})
				console.log(1)
				this.$nextTick(() => {
					console.log(1)
					if (document.getElementById('echarts2')) {
						this.initChart('echarts2', option)
					}
				})
			},
		}

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

	.header {
		background: linear-gradient(180deg, #096dcb 0%, #6faae1 100%);
	}

	.userhead {
		border-radius: 50%;
		box-shadow: 1px 1px 10px 1px #096dcb;
	}

	.text-gry80 {
		color: #808080;
	}

	.box-border08 {
		border-radius: 16rpx;
	}

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