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">
				<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=" 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">
				<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&&propData.eye.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&&propData.eye.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.createTime}}
						</view>
						<view class="">
							<span :class="{'text-green':propData.eye.isRead==1}">
								({{propData.eye.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.leftImg || propData.eye.localLeftImg
											  ? img_host +
											    (accessType == 1
											      ? propData.eye.leftImg
											      : propData.eye.localLeftImg)
											  : '@/static/img/other/you.png')" class="w-100" style="height: 100%;" :src="
											propData.eye.leftImg || propData.eye.localLeftImg
											  ? img_host +
											    (accessType == 1
											      ? propData.eye.leftImg
											      : propData.eye.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.rightImg || propData.eye.localRightImg
											  ? img_host +
											    (accessType == 1
											      ? propData.eye.ightImg
											      : propData.eye.localRightImg)
											  : '@/static/img/other/you.png')" class="w-100" style="height: 100%;" :src="
											propData.eye.rightImg || propData.eye.localRightImg
											  ? img_host +
											    (accessType == 1
											      ? propData.eye.ightImg
											      : propData.eye.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.isRead==1" class="ml-2 fs-12" style="color: #868687;">
									<span>左眼:{{propData.eye.leftNote||'无'}};</span>
									<span>右眼:{{propData.eye.rightNote||'无'}}</span>
								</view>
								<view v-if="propData.eye.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;">
				<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: {},
						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>