h5/pages/health_report/component/report.vue

<template>
	<view class="mb-5">
		<view class="m-3" v-if="propData.patient">
			<view class="centerY mt-3">
				<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;">
				<view class="w-50 mb-2 d-inline-block">
					姓名：
					<span class="font-bold text-dark fs-14">{{ propData.patient.username || '' }}</span>
				</view>
				<view class="w-50 mb-2 d-inline-block">性别：{{ propData.patient.sex == 1 ? '男' : '女' || '' }}</view>
				<view class="w-50 mb-2 d-inline-block">年龄：{{ $mf.getIDCardInfo(propData.patient.idCard).age || '' }}</view>
				<view class="w-50 mb-2 d-inline-block">
					慢病类型：
					<span class="font-bold text-dark fs-14">{{ CHRONIC_DISEASE_TYPE[propData.patient.chronicDiseaseType - 1].label }}</span>
				</view>
				<view class="w-50 mb-2 d-inline-block" v-if="1">
					糖尿病病龄：
					<span class="font-bold text-dark fs-14">
						{{ propData.patient.tnbIllTime ? ((new Date().getTime() - new Date(propData.patient.tnbIllTime).getTime()) / 31536000000).toFixed(0) : '' }}年
					</span>
				</view>
				<view class="w-50 mb-2 d-inline-block" v-if="1">
					高血压病龄：
					<span class="font-bold text-dark fs-14">
						{{ propData.patient.gxyIllTime ? ((new Date().getTime() - new Date(propData.patient.gxyIllTime).getTime()) / 31536000000).toFixed(0) : '' }}年
					</span>
				</view>
				<view class="position-absolute d-flex position-relative" style="right: 20%;top:0 ;transform: rotate(31deg);z-index:1">
					<view
						v-show="propData.patient.healthIndex !== 0"
						class="centerd position-absolute "
						:style="{ width: '150rpx', height: '150rpx', borderRadius: '50%', opacity: 1, ...selectColor(propData.patient.healthIndex) }"
					>
						<view class="text-center">
							<view class="fs-12">健康指数</view>
							<view class="font-bold fs-20 ">{{ propData.patient.healthIndex ? 1000 - propData.patient.healthIndex || 0 : '未计算' }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="centerY mt-3 mb-2" v-if="propData.gljb.gxyVisit && propData.gljb.gxyVisit.id">
					<view class="bule_line"></view>
					<text class="font-bold text-dark ml-2 fs-16 line-height1">高血压管理等级</text>
				</view>
				<view class="centerY" v-if="propData.gljb.gxyVisit && propData.gljb.gxyVisit.id">
					<view class="fs-12 w-75 mr-2" style="line-height:1.5;border: 1px solid #1890ff;border-radius:4px;background:#fff;">
						<view class="text-center fs-12 font-bold " style="padding:16rpx 0;background-color:#1890ff;color:#fff">{{ propData.gljb.gxyVisit.gljb }}</view>
						<view class="fs-12" style="padding:8px;">
							<view v-if="propData.gljb.gxyVisit.gljb == '一级管理'" style="text-indent: 20px;">
								没有其他危险因素的患者，至少三个月随访一次，检测病情控制情况以健康教育和非药物干预为主。
							</view>
							<view v-if="propData.gljb.gxyVisit.gljb == '二级管理'" style="text-indent: 20px;">
								一级高血压伴有一到两个危险因素和二级高血压伴有两个一级，两个以下危险因素患者至少两个月随访一次，监测病情控制情况以健康教育和用药指导为重点，有针对性地指导和规范用药。
							</view>
							<view v-if="propData.gljb.gxyVisit.gljb == '三级管理'" style="text-indent: 20px;">
								患者至少一个月随访一次，病情，控制情况，重点就是要加强规律治疗，注意药物疗效以及副作用，提出靶器官损害预警以及评价，有针对性地健康教育和行为干预，让患者地血压降到目标水平，一般情况下要严格地控制危险因素，而且要明确高血压患者有哪些危险因素。
							</view>
						</view>
					</view>
					<view class="w-25 ml-2 bg-white overflow" style="border-radius: 6rpx;">
						<view class="text-center fs-12 font-bold " style="padding:10rpx 0;background-color:#1890ff;color:#fff">预约信息</view>
						<view class="mt-2 px-2" style="color: #909399;">下次预约</view>
						<view class="mt-1 px-2">{{ propData.gljb.gxyVisit.xcyy }}</view>
						<view class="mt-2 px-2" style="color: #909399;">随访医生</view>
						<view class="mt-1 mb-2 px-2">{{ propData.gljb.gxyVisit.sfys }}</view>
					</view>
				</view>
				<view class="centerY mt-3 mb-2" v-if="propData.gljb.tnbVisit && propData.gljb.tnbVisit.id">
					<view class="bule_line"></view>
					<text class="font-bold text-dark ml-2 fs-16 line-height1">血糖管理等级</text>
				</view>
				<view class="centerY" v-if="propData.gljb.tnbVisit && propData.gljb.tnbVisit.id">
					<view class="fs-12 w-75 mr-2" style="line-height:1.5;border: 1px solid #1890ff;border-radius:4px;background:#fff;">
						<view class="fs-12" style="line-height:1.5">
							<view class="text-center fs-12 font-bold mb-1 " style="padding:16rpx 0;background-color:#1890ff;color:#fff">{{ propData.gljb.tnbVisit.gljb }}</view>
							<view class="" style="padding:8px;">
								<view v-if="propData.gljb.tnbVisit.gljb == '常规管理'" style="text-indent: 20px;">
									3个月随访一次，监测血糖控制情况，空腹血糖2周进行一次就检测，合理用药，强化非药物治疗，提高患者自我管理和自我检测水平。
									<span v-if="0 >= 5">眼底、糖足、肾病并发症筛查每年至少一次。</span>
								</view>
								<view v-if="propData.gljb.tnbVisit.gljb == '强化管理'" style="text-indent: 20px;">
									每月随访一次，在常规管理基础上强化规范用药和并发症检查，突出空腹和餐后血糖监测，每周至少一次。眼底、糖足、肾病等并发症检查每年至少2次，加强健康教育和生活指导。
								</view>
							</view>
						</view>
					</view>
					<view class="w-25 ml-2 bg-white overflow" style="border-radius: 6rpx;">
						<view class="text-center fs-12 font-bold " style="padding:10rpx 0;background-color:#1890ff;color:#fff">预约信息</view>
						<view class="mt-2 px-2" style="color: #909399;">下次预约</view>
						<view class="mt-1 px-2">{{ propData.gljb.tnbVisit.xcyy }}</view>
						<view class="mt-2 px-2" style="color: #909399;">随访医生</view>
						<view class="mt-1 mb-2 px-2">{{ propData.gljb.tnbVisit.sfys }}</view>
					</view>
				</view>
			</view>
			<!-- 身体特征 -->
			<view class="centerY mt-3" v-if="propData.physical && propData.physical.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="propData.physical && propData.physical.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 class="centerY mt-3" v-if="propData.check && propData.check.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="propData.check && propData.check.length > 0">
				<view class="mb-2">
					<span class="fs-14 font-bold text-dark mb-2">综合数据</span>
					<span class="text-gry fs-12">（{{ propData.check[propData.check.length - 1].createTime }}）</span>
				</view>
				<view class=" p-3" style="background-color: #F5F9FF;border-radius: 16rpx;">
					<view class="centerY">
						<view class="card-boxshow centerY px-2 py-1 w-50 fs-12" v-if="propData.check[propData.check.length - 1].bloodGlucose">
							<image class="w-25" src="@/static/img/other/xuet.png" mode="widthFix"></image>
							<view class="ml-2">
								<view class="text-dark">空腹血糖</view>
								<view class="text-dark">
									{{ propData.check[propData.check.length - 1].bloodGlucose || '未测量' }}
									<span v-if="propData.check[propData.check.length - 1].bloodGlucose" style="color:#A7A7A7 ">mmol/L</span>
								</view>
							</view>
						</view>
						<view class="card-boxshow centerY px-2 py-1 w-50 ml-3 fs-12" v-if="propData.check[propData.check.length - 1].chol">
							<image class="w-25" src="@/static/img/other/xy.png" mode="widthFix"></image>
							<view class="ml-2">
								<view class="text-dark">总胆固醇</view>
								<view class="text-dark">
									{{ propData.check[propData.check.length - 1].chol || '未测量' }}
									<span v-if="propData.check[propData.check.length - 1].chol" style="color:#A7A7A7 ">mmol/L</span>
								</view>
							</view>
						</view>
					</view>
					<view class="mt-2 centerY">
						<view class="card-boxshow centerY px-2 py-1 w-50 fs-12" v-if="propData.check[propData.check.length - 1].ua">
							<image class="w-25" src="@/static/img/other/xtfw.png" mode="widthFix"></image>
							<view class="ml-2">
								<view class="text-dark">尿酸</view>
								<view class="text-dark">
									{{ propData.check[0].ua || '未测量' }}
									<span v-if="propData.check[0].ua" style="color:#A7A7A7 ">μmol/L</span>
								</view>
							</view>
						</view>
						<view class="card-boxshow centerY px-2 py-1 ml-3 w-50 fs-12" v-if="propData.check[0].spo2">
							<image class="w-25" src="@/static/img/other/xlfw.png" mode="widthFix"></image>
							<view class="ml-2">
								<view class="text-dark">血氧</view>
								<view class="text-dark">
									{{ propData.check[0].spo2 || '未测量' }}
									<span v-if="propData.check[0].spo2" style="color:#A7A7A7 ">mmHg</span>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="fs-14 font-bold text-dark mb-2">血/尿检查</view>
				<view class=" p-3" style="background-color: #F5F9FF;border-radius: 16rpx;">
					<view class="fs-14 font-bold text-dark mb-2" v-if="echarts3data.data1.length || echarts3data.data2.length || echarts3data.data3.length">尿液ACR分析</view>
					<view class="" v-if="echarts3data.data1.length || echarts3data.data2.length || echarts3data.data3.length"><view id="echarts3" class="echarts"></view></view>

					<view class="fs-14 font-bold text-dark my-2" v-if="echarts3data.data4.length || echarts3data.data5.length || echarts3data.data6.length">肾功能检测</view>
					<view class="mt-2 " v-if="echarts3data.data4.length || echarts3data.data5.length || echarts3data.data6.length"><view id="echarts4" class="echarts"></view></view>
					<!-- <view class="mt-2 centerY">
						<view class="card-boxshow centerY px-2 py-1 w-50 fs-12">
							<image class="w-25" src="@/static/other/xy.png" mode="widthFix"></image>
							<view class="ml-2">
								<view class="text-dark">
									尿素氮
								</view>
								<view class="text-dark">
									200.2 <span style="color:#A7A7A7 "> mmol/L</span>
								</view>
							</view>
						</view>
						<view class=" px-2 py-1 ml-3 w-50 fs-12">

						</view>
					</view>
					 -->
					<view class="fs-14 font-bold text-dark my-2" v-if="echarts3data.data7.length || echarts3data.data8.length || echarts3data.data9.length">血脂检测</view>
					<view class="mt-2 centerY" v-if="echarts3data.data7.length || echarts3data.data8.length || echarts3data.data9.length"><view id="echarts5" class="echarts"></view></view>
					<view class="text-center mt-3 fs-10"></view>
				</view>
			</view>
			<!-- 眼底 -->
			<view class="centerY mt-3" v-if="propData.eye.eyeData && propData.eye.eyeData.id">
				<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="propData.eye.eyeData && propData.eye.eyeData.id">
				<view class="bg-white" style="border-radius: 16rpx;">
					<view class="centerY mb-2 text-gry">
						<text class="iconfont Clock fs-20"></text>
						<view class="">{{ propData.eye.eyeData.createTime }}</view>
						<view class="">
							<span :class="{ 'text-green': propData.eye.eyeData.isRead == 1 }">({{ propData.eye.eyeData.isRead == 0 ? '未阅片' : '已阅片' }})</span>
						</view>
					</view>
					<view class="">
						<view class="centerY">
							<view class="w-50 mx-1">
								<view class="centerY">
									<image class="w-15" src="@/static/img/other/zuo.png" mode="widthFix"></image>
									<view class="d-inline-block ml-1 fs-14 text-dark">左眼</view>
								</view>
								<view class="border mt-2" style="background: #F6F9FE;border-radius: 16rpx;padding: 14rpx;box-sizing: border-box;">
									<view class="picbox1" style="border: 1px dotted  #E3E3E3;border-radius: 16rpx;box-sizing: border-box;">
										<view style="background: #F6F9FE;" class="picimg1">
											<image
												@click="
													pic(
														propData.eye.eyeData.leftImg || propData.eye.eyeData.localLeftImg
															? img_host + (accessType == 1 ? propData.eye.eyeData.leftImg : propData.eye.eyeData.localLeftImg)
															: '@/static/img/other/you.png'
													)
												"
												class="w-100"
												style="height: 100%;"
												:src="
													propData.eye.eyeData.leftImg || propData.eye.eyeData.localLeftImg
														? img_host + (accessType == 1 ? propData.eye.eyeData.leftImg : propData.eye.eyeData.localLeftImg)
														: '@/static/img/other/you.png'
												"
												mode="scaleToFill"
											></image>
										</view>
									</view>
								</view>
							</view>
							<view class="w-50 mx-2">
								<view class="centerY">
									<image class="w-15" src="@/static/img/other/you.png" mode="widthFix"></image>
									<view class="d-inline-block ml-1 fs-14 text-dark">右眼</view>
								</view>
								<view class="border mt-2" style="background: #F6F9FE;border-radius: 16rpx;padding: 14rpx;box-sizing: border-box;">
									<view class="picbox1" style="border: 1px dotted  #E3E3E3;border-radius: 16rpx;box-sizing: border-box;">
										<view style="background: #F6F9FE;" class="picimg1">
											<image
												@click="
													pic(
														propData.eye.eyeData.rightImg || propData.eye.eyeData.localRightImg
															? img_host + (accessType == 1 ? propData.eye.eyeData.rightImg : propData.eye.eyeData.localRightImg)
															: '@/static/img/other/you.png'
													)
												"
												class="w-100"
												style="height: 100%;"
												:src="
													propData.eye.eyeData.rightImg || propData.eye.eyeData.localRightImg
														? img_host + (accessType == 1 ? propData.eye.eyeData.rightImg : propData.eye.eyeData.localRightImg)
														: '@/static/img/other/you.png'
												"
												mode="scaleToFill"
											></image>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="mt-3 p-2" style="box-shadow: 0px 2px 13px 2px rgba(211,212,214,0.45);border-radius: 8px;">
							<view class="centerY">
								<image class="w-15" 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;">{{ hospital.hospitalName || '暂无医院信息' }}</view>
							</view>
							<view class="centerY mt-2">
								<image class="w-15" src="@/static/img/other/jcyy.png" mode="widthFix"></image>
								<view class="fs-14 font-bold ml-2 space-nowrap">专家建议</view>
								<view v-if="propData.eye.eyeData.isRead == 1" class="ml-2 fs-12" style="color: #868687;">
									<span>左眼:{{ propData.eye.eyeData.leftNote || (propData.eye.aiEyeData && propData.eye.aiEyeData.leftNote) || '无' }};</span>
									<span>右眼:{{ propData.eye.eyeData.rightNote || (propData.eye.aiEyeData && propData.eye.aiEyeData.rightNote) || '无' }}</span>
								</view>
								<view v-if="propData.eye.eyeData.isRead == 0" class="ml-2 fs-12" style="color: #868687;">暂未阅片</view>
							</view>
						</view>
					</view>
					<view class="text-center text-gry2 fs-10 mt-2">注：本报告内容只针对眼底照片可见范围</view>
				</view>
			</view>

			<!-- 用药 -->
			<view class="centerY mt-3" v-if="propData.medicinal && propData.medicinal.length > 0">
				<view class="bule_line"></view>
				<text class="font-bold text-dark ml-2 fs-16 line-height1">用药情况</text>
				<span class="text-gry">（最近随访用药）</span>
			</view>
			<view class="card mb-2 fs-14 mt-3 p-3" style="color: #818181;" v-if="propData.medicinal && propData.medicinal.length > 0">
				<view class="">
					<view class="mtable-title centerY bg-primary text-white fs-12">
						<view class="text-left" style="width: 23%;">药名</view>
						<view class=" text-center" style="width: 15%;">剂量</view>
						<view class="w-10 text-center">用法</view>
						<view class="text-center" style="width: 17%;">用药频次</view>
						<view class="text-center" style="width: 17%;">不良反应</view>
						<view class=" text-center" style="width: 17%;">用药类型</view>
					</view>
					<view v-if="propData.medicinal && propData.medicinal.length == 0"><Empty title="此次随访没有用药" /></view>

					<view
						v-if="propData.medicinal && propData.medicinal.length > 0"
						class="mtable-body-item centerY fs-12"
						v-for="(item2, index2) in propData.medicinal"
						style="color: #868687;"
					>
						<uni-tooltip :content="item2.name" style="color: #818181;width: 23%;">
							<view class="text-left text-view2">{{ item2.name }}</view>
						</uni-tooltip>
						<view class=" text-center" style="width: 15%;">{{ item2.unit + item2.medicinalUnit }}</view>
						<view class="w-10 text-center">{{ item2.medicinalUse || '未知' }}</view>
						<view class="text-center" style="width: 17%;">{{ item2.medicinalInterval || '未知' }}</view>
						<view class="text-center" style="width: 17%;">{{ item2.untowardReaction || '无' }}</view>
						<view class="text-center" style="width: 17%;">{{ item2.type == 'Tnb' ? '糖尿病' : item2.type == 'Gxy' ? '高血压' : '未知类型' }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Empty from '@/component/empty/empty.vue';
import { config } from '@/static/js/defult_value.js';
const healthIndex = {
	error: 600,
	warning: 750,
	success: 1000
};
import { CHRONIC_DISEASE_TYPE } from '@/static/js/defult_value.js';
export default {
	components: {
		Empty
	},
	name: 'Report',
	props: {
		propData: {
			type: Object,
			default() {
				return {
					patient: {},
					check: {},
					checkResult: {},
					eye: { eyeData: {} },
					medicinal: [],
					physical: {},
					yearCheck: []
				};
			}
		}
	},
	data() {
		return {
			CHRONIC_DISEASE_TYPE,
			config,
			echarts1data: {},
			echarts3data: {},
			accessType: 1,
			img_host: '',
			hospital: {}
		};
	},
	watch: {
		propData: {
			handler(val) {
				this.settingData();
				this.getifoss();
			}
		}
	},
	created() {
		this.find_hospital();
	},
	methods: {
		async find_hospital() {
			let idCard = uni.getStorageSync('idCard');
			let { data, code } = await this.$api.find_hospital({
				idCard
			});
			if (code == 0) {
				this.hospital = data;
				uni.stopPullDownRefresh();
			} else {
				uni.hideLoading();
				uni.stopPullDownRefresh();
			}
		},
		async pic(url) {
			uni.previewImage({
				urls: [url],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		async getifoss() {
			let idCard = uni.getStorageSync('idCard');
			let { data, code, count } = await this.$api.ifoss({
				idCard
			});
			if (code == 0) {
				this.accessType = data;
				let configData = getApp().globalData.configData;
				data == 1 ? (this.img_host = configData.img_prod_host) : (this.img_host = configData.img_local_host);
				uni.hideLoading();
				uni.stopPullDownRefresh();
			} else {
				this.status = 'more';
				uni.hideLoading();
				uni.stopPullDownRefresh();
			}
		},
		settingData() {
			let check = this.propData.check;
			let physical = this.propData.physical;
			this.echarts1data = {
				time: [],
				data1: [],
				data2: [],
				data3: [],
				data4: [],
				data5: [],
				data6: [],
				data7: [],
				data8: [],
				data9: []
			};
			this.echarts3data = {
				time: [],
				data1: [],
				data2: [],
				data3: [],
				data4: [],
				data5: [],
				data6: [],
				data7: [],
				data8: [],
				data9: []
			};
			if (check && check.length) {
				check.reverse().map((item, index) => {
					this.echarts3data.time.push(item.createTime);
					this.echarts3data['data1'].push(item.urine1);
					this.echarts3data['data2'].push(item.urine2);
					this.echarts3data['data3'].push(item.urine3);
					this.echarts3data['data4'].push(item.kidney1);
					this.echarts3data['data5'].push(item.kidney2);
					this.echarts3data['data6'].push(item.kidney3);
					this.echarts3data['data7'].push(item.bloodFat1);
					this.echarts3data['data8'].push(item.bloodFat3);
					this.echarts3data['data9'].push(item.bloodFat4);
				});
				if (this.echarts3data.data1.length || this.echarts3data.data2.length || this.echarts3data.data3.length) {
					this.getdom('echarts3', () => {
						this.chartOption3(this.echarts3data, 'echarts3');
					});
				}

				if (this.echarts3data.data4.length || this.echarts3data.data5.length || this.echarts3data.data6.length) {
					this.getdom('echarts4', () => {
						this.chartOption4(this.echarts3data, 'echarts4');
					});
				}
				if (this.echarts3data.data7.length || this.echarts3data.data8.length || this.echarts3data.data9.length) {
					this.getdom('echarts5', () => {
						this.chartOption5(this.echarts3data, 'echarts5');
					});
				}
			}
			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.getdom('echarts1', () => {
						this.chartOption1(this.echarts1data, 'echarts1');
					});
					if (this.echarts1data.data4.length || this.echarts1data.data5.length || this.echarts1data.data6.length) {
						this.getdom('echarts2', () => {
							this.chartOption2(this.echarts1data, 'echarts2');
						});
					}
				}
			}
		},
		getdom(dom, cb) {
			let timer = setInterval(() => {
				if (document.getElementById(dom)) {
					clearInterval(timer);
					cb && cb();
				}
			}, 300);
		},
		selectColor(val) {
			// console.log(this.information.info)
			val = healthIndex.success - val;
			return {
				color:
					val > healthIndex.warning && val <= healthIndex.success
						? '#13ce66'
						: val > healthIndex.error && val < healthIndex.warning
						? '#ffba00'
						: val <= healthIndex.error
						? '#ff4d4f'
						: '',
				border:
					val > healthIndex.warning && val <= healthIndex.success
						? '4rpx solid  #13ce66'
						: val > healthIndex.error && val < healthIndex.warning
						? '4rpx solid #ffba00'
						: val <= healthIndex.error
						? '4rpx solid #ff4d4f'
						: '',
				backgroundColor:
					val > healthIndex.warning && val <= healthIndex.success
						? 'rgba(19, 206, 102, .1)'
						: val > healthIndex.error && val < healthIndex.warning
						? 'rgba(255, 186,0, .1)'
						: val <= healthIndex.error
						? 'rgba(255, 77, 79, .1)'
						: ''
			};
		}
	}
};
</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)
		},
		// updateEcharts(newValue, oldValue, ownerInstance, instance) {
		// 	// 监听 service 层数据变更
		// 	myChart.setOption(newValue)
		// },
		onClick(event, ownerInstance) {
			// 调用 service 层的方法
		},
		check({type,value,age,sex}) {
			let msg = this.propData.patient
			let arr = this.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
		},

		chartOption4({
			time,
			data4,
			data5,
			data6
		}) {
			let arr = []

			time = time.map((res) => this.$mf.timeTrans({
				time: res,
				format: 'M.D'
			}))
			time.map((item, index) => {
				if (this.check({
						type: 'kidney1',
						value: data4[index],
						sex: true
					})) {
					arr.push({
						value: [item, data4[index]],
						symbolSize: 10
					})
				}
				if (this.check({
						type: 'kidney2',
						value: data5[index],
						sex: true
					})) {
					arr.push({
						value: [item, data5[index]],
						symbolSize: 10
					})
				}
				if (this.check({
						type: 'kidney3',
						value: data6[index],
						sex: true
					})) {
					arr.push({
						value: [item, data6[index]],
						symbolSize: 10
					})
				}
			})
			var option = (option = {
				legend: {
					data: ['血尿酸(mol/L)', '血肌酐(mol/L)', '尿素氮(mmol/L)'],
				},
				// tooltip: {
				//   trigger: 'axis',
				//   axisPointer: {
				//     type: 'cross',
				//     label: {
				//       backgroundColor: '#6a7985',
				//     },
				//   },
				// },
				grid: {
					top: '30%',
					left: '3%',
					right: '5%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: [{
					type: 'category',
					axisPointer: {
						type: 'shadow',
					},
					data: time,
				}, ],
				yAxis: [{
					type: 'value',
				}, ],
				series: [{
						name: '血尿酸(mol/L)',
						label: {
							show: true,
							formatter: '{@score}',
							position: 'top'
						},
						smooth: true,
						type: 'line',
						data: data4,
					},
					{
						name: '血肌酐(mol/L)',
						label: {
							show: true,
							formatter: '{@score}',
							position: 'top'
						},
						smooth: true,
						type: 'line',
						data: data5,
					},
					{
						name: '尿素氮(mmol/L)',
						label: {
							show: true,
							formatter: '{@score}',
							position: 'top'
						},
						smooth: true,
						type: 'line',
						data: data6,
					},
					{
						type: 'effectScatter',
						coordinateSystem: 'cartesian2d',
						data: arr,
						showEffectOn: 'render',
						// zlevel:1,
						rippleEffect: {
							// 波纹的绘制方式,可选'stroke'和'fill'
							brushType: 'fill',
						},
						hoverAnimation: false,
					},
				],
			})
			this.initChart('echarts4', option)
		},
		chartOption5({
			time,
			data7,
			data8,
			data9
		}) {
			let arr = []

			time = time.map((res) => this.$mf.timeTrans({
				time: res,
				format: 'M.D'
			}))
			time.map((item, index) => {
				if (this.check({
						type: 'bloodFat1',
						value: data7[index]
					})) {
					arr.push({
						value: [item, data7[index]],
						symbolSize: 10
					})
				}
				if (this.check({
						type: 'bloodFat3',
						value: data8[index]
					})) {
					arr.push({
						value: [item, data8[index]],
						symbolSize: 10
					})
				}
				if (this.check({
						type: 'bloodFat4',
						value: data9[index]
					})) {
					arr.push({
						value: [item, data9[index]],
						symbolSize: 10
					})
				}
			})

			var option = (option = {
				legend: {
					data: ['甘油三酯(mmol/L)', '低密度脂蛋白(mmol/L)', '高密度脂蛋白(mmol/L)'],
				},
				// tooltip: {
				//   trigger: 'axis',
				//   axisPointer: {
				//     type: 'cross',
				//     label: {
				//       backgroundColor: '#6a7985',
				//     },
				//   },
				// },
				grid: {
					top: '30%',
					left: '3%',
					right: '5%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: [{
					type: 'category',
					axisPointer: {
						type: 'shadow',
					},
					data: time,
				}, ],
				yAxis: [{
					type: 'value',
				}, ],
				series: [{
						name: '甘油三酯(mmol/L)',
						label: {
							show: true,
							formatter: '{@score}',
							position: 'top'
						},
						smooth: true,
						type: 'line',
						data: data7,
					},
					{
						name: '低密度脂蛋白(mmol/L)',
						label: {
							show: true,
							formatter: '{@score}',
							position: 'top'
						},
						smooth: true,
						type: 'line',
						data: data8,
					},
					{
						name: '高密度脂蛋白(mmol/L)',
						label: {
							show: true,
							formatter: '{@score}',
							position: 'top'
						},
						smooth: true,
						type: 'line',
						data: data9,
					},
					{
						type: 'effectScatter',
						coordinateSystem: 'cartesian2d',
						data: arr,
						showEffectOn: 'render',
						// zlevel:1,
						rippleEffect: {
							// 波纹的绘制方式,可选'stroke'和'fill'
							brushType: 'fill',
						},
						hoverAnimation: false,
					},
				],
			})
			this.initChart('echarts5', option)
		},
		chartOption3({
			time,
			data1,
			data2,
			data3
		}) {
			// console.log({ time, data1, data2, data3 })

			time = time.map((res) => this.$mf.timeTrans({
				time: res,
				format: 'M.D'
			}))
			var option = (option = {
				legend: {
					data: ['肌酐(mg/dL)', '微量白蛋白(mg/L)', '尿微/肌酐(mg/g)'],
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985',
						},
					},
				},
				grid: {
					top: '30%',
					left: '3%',
					right: '5%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: [{
					type: 'category',
					axisPointer: {
						type: 'shadow',
					},
					data: time,
				}, ],
				yAxis: [{
					type: 'value',
				}, ],
				series: [{
						name: '肌酐(mg/dL)',
						label: {
							show: true,
							formatter: '{@score}',
							position: 'top'
						},
						smooth: true,
						type: 'bar',
						data: data1,
					},
					{
						name: '微量白蛋白(mg/L)',
						label: {
							show: true,
							formatter: '{@score}',
							position: 'top'
						},
						smooth: true,
						type: 'bar',
						data: data2,
					},
					{
						name: '尿微/肌酐(mg/g)',
						label: {
							show: true,
							formatter: '{@score}',
							position: 'top'
						},
						smooth: true,
						type: 'bar',
						data: data3,
					},
				],
			})
			this.initChart('echarts3', option)
		},
		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.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) => {
				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]
					})) {
					arr.push({
						value: [item, data5[index]],
						symbolSize: 10
					})
				}
				if (this.check({
						type: 'pulse',
						value: data6[index]
					})) {
					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,
					},
				],
			})
			this.initChart('echarts2', option)
		},
	}

}
</script>
<style lang="scss">
.card {
	background: #ffffff;
	border-radius: 16rpx;
}

.card-boxshow {
	box-shadow: 0px 2px 5px 1px rgba(215, 232, 255, 0.5);
	border-radius: 16rpx;
	background: #ffffff;
}

.mtable {
	&-title {
		border-radius: 50rpx;
		padding: 20rpx 0 20rpx 20rpx;
		box-shadow: 0px 2px 7px 1px rgba(45, 142, 255, 0.5);
	}

	&-body {
		&-item {
			margin-top: 20rpx;
			border-radius: 50rpx;
			padding: 14rpx 0 14rpx 20rpx;
			background-color: #f6f9fe;
			color: #868687;
		}
	}
}

.picbox1 {
	width: 100% !important;
	height: 0;
	padding-bottom: 70%;
	margin: 0;
	position: relative;
	overflow: hidden;
}

.picbox1 .picimg1 {
	width: 100%;
	height: 100%;
	position: absolute;
}

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