doctor-xklr/src/renderer/pages/patientdetail/model/view.vue

<template>
  <div class="mys" style="" v-if="i">
    <div class="mx-1 mb-5 position-relative" v-if="propData.patient">
      <div class="centerY">
        <div class="bule_line"></div>
        <span class="font-bold text-dark ml-2 fs-14 py-2">基本信息</span>
      </div>
      <!-- 基本信息 -->
      <div class="card fs-12 p-3" style="color: #818181;position: relative;">
        <div class="w-50 mb-1 d-inline-block">
          姓名：
          <span class="font-bold text-dark fs-14">{{ propData.patient.username || '' }}</span>
        </div>
        <div class="w-50 mb-1 d-inline-block">性别：
          <span class="font-bold text-dark fs-14">{{ propData.patient.sex == 1 ? '男' : '女' || '' }}</span>
        </div>
        <div class="w-50 mb-1 d-inline-block">年龄：
          <span class="font-bold text-dark fs-14">{{ getAge(propData.patient.birthday) || '0' }}岁</span>
        </div>
        <div class="w-50 mb-1 d-inline-block">
          慢病类型：
          <span class="font-bold text-dark fs-14">{{ CHRONIC_DISEASE_TYPE[propData.patient.chronicDiseaseType - 1].label
          }}</span>
        </div>
        <div class="w-50 mb-1 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>
        </div>
        <div class="w-50 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>
        </div>
        <div class="position-absolute d-flex " style="right: 15%;top:-30%;transform: rotate(31deg);z-index:1">
          <div v-show="propData.patient.healthIndex !== 0" class="centerd position-absolute "
            :style="{ width: '70px', height: '70px', borderRadius: '50%', opacity: 1, ...selectColor(propData.patient.healthIndex) }">
            <div class="text-center">
              <div class="fs-12">健康指数</div>
              <div class="font-bold fs-16">{{ propData.patient.healthIndex ? 1000 - propData.patient.healthIndex || 0 :
                '1000' }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 管理等级 -->
      <div class="centerY mt-2">
        <div class="w-50 pr-2" v-if="propData.gljb.gxyVisit && propData.gljb.gxyVisit.id">
          <div class="centerY py-2" >
            <div class="bule_line"></div>
            <span class="font-bold text-dark ml-2 fs-14 line-height1">高血压管理等级</span>
          </div>
          <div class="">
            <div class="fs-12 w-100 mr-2 border-box overflow"
              style="line-height:1.5;border: 1px solid #1890ff;border-radius:4px;background:#fff;">
              <div class="text-center fs-12 font-bold "
                style="line-height:1;padding:8px 0;background-color:#1890ff;color:#fff">{{
                  propData.gljb.gxyVisit.gljb }}</div>
              <div class="bg-white overflow fs-12 p-2 border-box " style="border-top: 1px solid #1890ff;">
                <div class="w-100 centerY">
                  <div class="pr-1">下次预约</div>
                  <div class=" text-dark">{{ propData.gljb.gxyVisit.xcyy }}</div>
                </div>
                <div class="w-100 centerY">
                  <div class="pr-1">随访医生</div>
                  <div class=" text-dark">{{ propData.gljb.gxyVisit.sfys }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-50" v-if="propData.gljb.tnbVisit && propData.gljb.tnbVisit.id">
          <div class="centerY py-2" >
            <div class="bule_line"></div>
            <span class="font-bold text-dark ml-2 fs-14 line-height1">糖尿病管理等级</span>
          </div>
          <div class="">
            <div class="fs-12 w-100 border-box overflow"
              style="line-height:1.5;border: 1px solid #1890ff;border-radius:4px;background:#fff;">
              <div class="fs-12" style="line-height:1">
                <div class="text-center fs-12 font-bolds" style="padding:8px 0;background-color:#1890ff;color:#fff">{{
                  propData.gljb.tnbVisit.gljb }}</div>
              </div>
              <div class="bg-white overflow p-2 border-box " style="border-top: 1px solid #1890ff;">
                <div class="w-100 centerY">
                  <div class="pr-1">下次预约</div>
                  <div class="text-dark">{{ propData.gljb.tnbVisit.xcyy }}</div>
                </div>
                <div class="w-100 centerY">
                  <div class="pr-1">随访医生</div>
                  <div class="text-dark">{{ propData.gljb.tnbVisit.sfys }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-collapse class="mt-3" @change="collapsechange">
        <!-- 体征 -->
        <el-collapse-item title="" name="1" v-if="propData.physical && propData.physical.length > 0">
          <template #title>
            <div class="centerY px-2 w-100">
              <div class="bule_line"></div>
              <span class="font-bold text-dark ml-2 fs-14 line-height1">体征</span>
              <span class="text-gry fs-12">（最近七次）</span>
            </div>
          </template>
          <div class="card fs-14 mt-n2 p-2" style="color: #818181;">
            <div class="" style="background-color: #F5F9FF;border-radius: 8px;">
              <div id="echarts1" class="echarts"></div>
              <div id="echarts2" class="echarts"></div>
            </div>
            <div class="fs-10 d-flex mt-2" style="color: #909092;">
              <div class="space-nowrap w-25">提示：</div>
              <div class="">
                <div class="">1、身体体质指数范围 偏瘦 &lt = 18.4,正常 18.5 ~ 23.9,过重 24.0 ~ 27.9,肥胖>= 28.0</div>
                <div class="mt-1">2、血压心率 收缩压成人 65岁以上 90~149（mmHg）65岁以下 90~139（mmHg）,舒张压 60~90（mmHg）</div>
              </div>
            </div>
            <div class="p-2 mt-2" style="background-color: #F5F9FF;border-radius: 8px;">
              <span class="text-gry fs-12 centerY"><span class="iconfont Clock"></span>{{
                propData.physical[propData.physical.length - 1].createTime }}</span>
              <div class="centerY mt-1">
                <div class="card-boxshow  px-2 py-1 mr-2 w-40 fs-10"
                  v-if="propData.physical[propData.physical.length - 1].bloodGlucose">
                  <div class="text-dark">血糖</div>
                  <div class="text-dark">
                    {{ propData.physical[propData.physical.length - 1].bloodGlucose || '未测量' }}
                    <span v-if="propData.physical[propData.physical.length - 1].bloodGlucose"
                      style="color:#A7A7A7 ">mmol/L</span>
                  </div>
                </div>
                <div class="card-boxshow px-2 py-1 mr-2 w-30 fs-10"
                  v-if="propData.physical[propData.physical.length - 1].spo2">
                  <div class="text-dark">血氧</div>
                  <div class="text-dark">
                    {{ propData.physical[propData.physical.length - 1].spo2 || '未测量' }}
                    <span v-if="propData.physical[propData.physical.length - 1].spo2" style="color:#A7A7A7 ">%</span>
                  </div>
                </div>
                <div class="card-boxshow  px-2 py-1 w-30 fs-10"
                  v-if="propData.physical[propData.physical.length - 1].waist">
                  <div class="text-dark">腰围</div>
                  <div class="text-dark">
                    {{ propData.physical[propData.physical.length - 1].waist || '未测量' }}
                    <span v-if="propData.physical[propData.physical.length - 1].waist" style="color:#A7A7A7 ">cm</span>
                  </div>
                </div>
                <!-- <div class="card-boxshow centerY px-2 py-1 w-33 fs-12"
              v-if="propData.check[propData.check.length - 1].bloodGlucose">
              <div class="">
                <div class="text-dark">空腹血糖</div>
                <div 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>
                </div>
              </div>
            </div> -->
              </div>
            </div>
          </div>
        </el-collapse-item>
        <!-- 随访 -->
        <el-collapse-item title="" name="2" v-if="propData.gljb?.gxyVisit?.id || propData.gljb?.tnbVisit?.id">
          <template #title>
            <div class="centerY px-2">
              <div class="bule_line"></div>
              <span class="font-bold ml-2 fs-14 line-height1">随访</span>
              <span class="text-gry fs-12">（最近一次）</span>
            </div>
          </template>
          <div class="card fs-12 p-2 mt-n2" style="color: #818181;">
            <div>
              <div class="centerY">
                <div class="w-45">日吸烟量:
                  <span class="text-dark">{{ propData.gljb.tnbVisit?.rxyl || propData.gljb.gxyVisit?.rxyl || '0' }}
                    (支)</span>
                </div>
                <div class="w-55">日饮酒量:
                  <span class="text-dark">{{ propData.gljb.tnbVisit?.ryjl || propData.gljb.gxyVisit?.ryjl || '0' }} (两)
                  </span>
                </div>
              </div>
              <div class="centerY">
                <div class="w-45">运动次数:
                  <span class="text-dark">{{ propData.gljb.tnbVisit?.ydcs || propData.gljb.gxyVisit?.ydcs || '0' }}
                    /周</span>
                </div>
                <div class="w-55">运动时间:
                  <span class="text-dark">{{ propData.gljb.tnbVisit?.ydsj || propData.gljb.gxyVisit?.ydsj || '0' }}
                    分/次</span>
                </div>
              </div>
              <div class="centerY">
                <div class="w-45">腰围指导:
                  <span class="text-dark">{{ propData.gljb.tnbVisit?.ywzd || propData.gljb.gxyVisit?.ywzd || '暂无' }}
                    (CM)</span>
                </div>
                <div class="w-55">体重指导:
                  <span class="text-dark">{{ propData.gljb.tnbVisit?.tzzd || propData.gljb.gxyVisit?.tzzd || '暂无' }}
                    (KG)</span>
                </div>
              </div>
              <div class="centerY">
                <div class="w-55">体质指数指导:
                  <span class="text-dark">{{ propData.gljb.tnbVisit?.bmizd || propData.gljb.gxyVisit?.bmizd || '暂无'
                  }}</span>
                </div>
              </div>
            </div>
            <div v-if="propData.gljb?.gxyVisit?.id">
              <div class="centerY  text-dark"><span class="iconfont gonggaotongzhi mr-1"></span>高血压随访</div>
              <div class="centerY">
                <div class="w-50">摄盐程度:
                  <span class="text-dark">{{ propData.gljb.gxyVisit.sycd || '暂无' }}</span>
                </div>
                <div class="w-50">随访分类:
                  <span class="text-dark">{{ propData.gljb.gxyVisit.sffl || '暂无' }}</span>
                </div>
              </div>
              <div class="centerY">
                <div class="w-100">下次预约:
                  <span class="text-dark">{{ propData.gljb.gxyVisit.xcyy || '暂无' }}</span>
                </div>
              </div>
              <div class="d-flex" v-if="propData.gljb.gxyVisit.mqzz">
                <div class="w-100">目前症状:
                  <span class="text-dark">{{ JSON.parse(propData.gljb.gxyVisit.mqzz).join('、') || '暂无' }}</span>
                </div>
              </div>
              <div class="d-flex" v-if="propData.gljb.gxyVisit.qttz1">
                <div class="w-100">其他体征:
                  <span class="text-dark">{{ propData.gljb.gxyVisit.qttz1 || '暂无' }}</span>
                </div>
              </div>
            </div>
            <div v-if="propData.gljb?.tnbVisit?.id">
              <div class="centerY text-dark"><span class="iconfont gonggaotongzhi mr-1"></span>糖尿病随访</div>
              <div class="centerY">
                <div class="w-45">主食:
                  <span class="text-dark">{{ propData.gljb.tnbVisit.zs || '暂无' }}(克/天)</span>
                </div>
                <div class="w-55">体质指数指导:
                  <span class="text-dark">{{ propData.gljb.tnbVisit.bmizd || '暂无' }}</span>
                </div>

              </div>
              <div class="centerY">
                <div class="w-45">腰围指导:
                  <span class="text-dark">{{ propData.gljb.tnbVisit.ywzd || '暂无' }}(CM)</span>
                </div>
                <div class="w-55">体重指导:
                  <span class="text-dark">{{ propData.gljb.tnbVisit.tzzd || '暂无' }}(KG) </span>
                </div>
              </div>
              <div class="centerY">
                <div class="w-100">血糖类型:
                  <span class="text-dark">{{ propData.gljb.tnbVisit.xtlx || '暂无' }}</span>
                  <span class="text-dark">{{ propData.gljb.tnbVisit.tzzd || '暂无' }} </span>
                </div>
              </div>
              <div class="centerY">
                <div class="w-45">随访分类:
                  <span class="text-dark">{{ propData.gljb.tnbVisit.sffl || '暂无' }}</span>
                </div>
                <div class="w-55">下次预约:
                  <span class="text-dark">{{ propData.gljb.tnbVisit.xcyy || '暂无' }}</span>
                </div>
              </div>
              <div class="d-flex" v-if="propData.gljb.tnbVisit.mqzz">
                <div class="w-100">目前症状:
                  <span class="text-dark">{{ JSON.parse(propData.gljb.tnbVisit.mqzz).join('、') || '暂无' }}</span>
                </div>
              </div>
              <div class="d-flex">
                <div class="w-100">足背动脉搏动:
                  <span class="text-dark">{{ propData.gljb.tnbVisit.zdmbd || '暂无' }}</span>
                </div>
              </div>
              <div class="d-flex" v-if="propData.gljb.tnbVisit.qttz1">
                <div class="w-100">其他体征:
                  <span class="text-dark">{{ propData.gljb.tnbVisit.qttz1 || '暂无' }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-collapse-item>
        <!-- 监测指标 -->
        <el-collapse-item title="" name="6">
          <template #title>
            <div class="centerY px-2 fs-14">
              <div class="bule_line"></div>
              <div>
                <span class="font-bold text-dark ml-2 fs-14 line-height1">监测指标</span>
                <span class="ml-1 text-gry fs-12"> (<span
                        class="iconfont CheckMark fs-10 font-blod text-white bg-green"
                        style="height: 14px;width: 14px;text-align: center; border-radius: 50%;">
                      </span>已检查 /
                    <span
                        class="iconfont CheckMark fs-10 font-blod text-white bg-gry"
                        style="height: 14px;width: 14px;text-align: center; border-radius: 50%;">
                      </span>
                  未检查)</span>
              </div>
            </div>
          </template>
          <div class="p-2 fs-14 mt-n2" style="color: #818181;">
            <CheckModel :pdata="propData" :alldata="propData" />
          </div>
        </el-collapse-item>
        <!-- 眼底 -->
        <el-collapse-item title="" v-if="propData.eye.eyeData && propData.eye.eyeData.id" name="3">
          <template #title>
            <div class="centerY px-2 fs-14">
              <div class="bule_line"></div>
              <span class="font-bold text-dark ml-2 fs-14 line-height1">眼底检查</span>
              <div class="centerY text-gry fs-12 ml-2">
                <span class="iconfont Clock"></span>
                <div>{{ propData.eye.eyeData.createTime }}</div>
                <div>
                  <span :class="{ 'text-green': propData.eye.eyeData.isRead == 1 }">({{ propData.eye.eyeData.isRead == 0 ?
                    '未阅片' : '已阅片' }})</span>
                </div>
              </div>
            </div>
          </template>
          <div class="p-2 fs-14 mt-n2" style="color: #818181;">
            <div class="mt-1 p-2" style="box-shadow: 0px 2px 13px 2px rgba(211,212,214,0.45);border-radius: 8px;">
              <div class="centerY">
                <div class="fs-12 font-bold space-nowrap w-20">检测医院</div>
                <div class="fs-12 text-dark w-80 pl-1">{{ hospitalinfo.hospitalName || '暂无医院信息' }}</div>
              </div>
              <div class="d-flex mt-2">
                <div class="fs-12 font-bold space-nowrap w-20">眼底筛查</div>
                <div class="fs-12 text-dark w-80 pl-1">
                  <div>
                    (左眼) <span v-if="propData.eye.eyeData.leftMaculaLutea">{{ propData.eye.eyeData.leftMaculaLutea
                    }}、</span> <span v-if="propData.eye.eyeData.leftPathology">{{
  JSON.parse(propData.eye.eyeData.leftPathology).join('、') }}；</span>
                    <span v-if="propData.eye.eyeData.isRead == 0">
                      未阅片
                    </span>
                  </div>
                  <div>
                    (右眼) <span v-if="propData.eye.eyeData.rightMaculaLutea">{{ propData.eye.eyeData.rightMaculaLutea
                    }}、</span>
                    <span v-if="propData.eye.eyeData.rightPathology">{{
                      JSON.parse(propData.eye.eyeData.rightPathology).join('、') }}；</span>
                    <span v-if="propData.eye.eyeData.isRead == 0">
                      未阅片
                    </span>
                  </div>
                </div>
              </div>
              <div class="d-flex mt-2">
                <div class="fs-12 font-bold space-nowrap w-20">专家建议</div>
                <div v-if="propData.eye.eyeData.isRead == 1" class="fs-12 text-dark w-80 pl-1">
                  <div>
                    (左眼) {{ propData.eye.eyeData.leftNote || (propData.eye.aiEyeData && propData.eye.aiEyeData.leftNote)
                      || '无' }};</div>
                  <div>
                    (右眼) {{ propData.eye.eyeData.rightNote || (propData.eye.aiEyeData &&
                      propData.eye.aiEyeData.rightNote) || '无' }};
                  </div>
                </div>
                <div v-if="propData.eye.eyeData.isRead == 0" class="fs-12 text-dark w-80 pl-1">暂未阅片</div>
              </div>
            </div>
            <div class="text-gry2 fs-10 mt-2">注：本报告内容只针对眼底照片可见范围</div>
          </div>
        </el-collapse-item>
        <!-- 用药 -->
        <el-collapse-item title="" v-if="propData.medicinal && propData.medicinal.length > 0" name="4">
          <template #title>
            <div class="centerY px-2">
              <div class="bule_line"></div>
              <span class="font-bold text-dark ml-2 fs-14 line-height1">用药情况</span>
              <span class="text-gry fs-12">（最近随访用药）</span>
            </div>
          </template>
          <div class="card fs-12 p-2 mt-n2" style="color: #818181;">
            <div class="">
              <div class="mtable-title centerY bg-primary text-white fs-10">
                <div class="text-left" style="width: 23%;">药名</div>
                <div class=" text-center" style="width: 15%;">剂量</div>
                <div class="w-10 text-center">用法</div>
                <div class="text-center" style="width: 17%;">用药频次</div>
                <div class="text-center" style="width: 17%;">不良反应</div>
                <div class=" text-center" style="width: 17%;">用药类型</div>
              </div>
              <div v-if="propData.medicinal && propData.medicinal.length == 0">
                <el-empty description="此次随访没有用药"></el-empty>
              </div>
              <div v-if="propData.medicinal && propData.medicinal.length > 0" class="mtable-body-item centerY fs-10"
                v-for="(item2, index2) in propData.medicinal" style="color: #868687;">
                <!-- <uni-tooltip :content="item2.name" style="color: #818181;width: 23%;"> -->
                <div class="text-left text-div2" style="color: #818181;width: 23%;">{{ item2.name }}</div>
                <!-- </uni-tooltip> -->
                <div class=" text-center" style="width: 15%;">{{ item2.unit + item2.medicinalUnit }}</div>
                <div class="w-10 text-center">{{ item2.medicinalUse || '未知' }}</div>
                <div class="text-center" style="width: 17%;">{{ item2.medicinalInterval || '未知' }}</div>
                <div class="text-center" style="width: 17%;">{{ item2.untowardReaction || '无' }}</div>
                <div class="text-center" style="width: 17%;">{{ item2.type == 'Tnb' ? '糖尿病' : item2.type == 'Gxy' ? '高血压'
                  :
                  '未知类型' }}</div>
              </div>
            </div>
          </div>
        </el-collapse-item>
        <!-- 居家检测 -->
        <el-collapse-item title=""
          v-if="homedata.gxyList && homedata.gxyList.length > 0 || homedata.tnbList && homedata.tnbList.length > 0"
          name="5">
          <template #title>
            <div class="centerY px-2">
              <div class="bule_line"></div>
              <span class="font-bold text-dark ml-2 fs-14 line-height1">居家检测</span>
              <span class="text-gry fs-12">（最近七次）</span>
            </div>
          </template>
          <div class="card fs-12 p-2 mt-n2" style="color: #818181;">
            <div>
              <div id="echarts3" class="echarts"></div>
              <div id="echarts4" class="echarts"></div>
              <div id="echarts5" class="echarts"></div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
      <div class="centerY fs-12 mt-2">
        <div class="ml-auto text-primary cursor-pointer" v-if="wwwurl"
          @click="open(wwwurl + '/index?idCard=' + propData.patient.idCard)">
          去网页版查看患者更多信息 >
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import conf from '@/config/index'
import { getAge, timeTrans } from '@/utils/common'
import * as echarts from 'echarts';
const { keyValue, healthIndex, CHRONIC_DISEASE_TYPE } = conf;
import { ipcRenderer } from "electron";
import CheckModel from './check.vue'
export default {
  name: 'modelview',
  components: { CheckModel },
  props: {
    propData: {
      type: Object,
      default() {
        return {
          patient: {},
          check: {},
          checkResult: {},
          eye: { eyeData: {} },
          medicinal: [],
          physical: {},
          yearCheck: [],
          echarts1data: {}
        };
      }
    },
    hospitalinfo: {
      type: Object,
      default() {
        return {
        };
      }
    },
    homedata: {
      type: Object,
      default() {
        return {};
      }
    },

  },
  data() {
    return {
      getAge,
      CHRONIC_DISEASE_TYPE,
      keyValue,
      echarts1data: {},
      accessType: 1,
      img_host: '',
      i: 0,
      wwwurl: ''
    };
  },
  watch: {
    propData: {
      handler(val) {
        this.wwwurl = localStorage.getItem('locationpath') ? JSON.parse(localStorage.getItem('locationpath')).webURL : ''
        // console.log(val)
        this.i = 0;
        this.i = 1;
        this.settingData()
      }
    }
  },
  mounted() {

  },
  beforeDestroy() {
  },
  methods: {
    open(link) {
      ipcRenderer.send('openUrl', link)
    },
    collapsechange(val) {
      val.map((item) => {
        if (item == 1) {
          if (this.propData.physical && this.propData.physical.length) {
            this.chartOption1(this.echarts1data, 'echarts1');
            this.chartOption2(this.echarts1data, 'echarts2');
          }

        } else if (item == 5) {
          if (this.homedata.gxyList && this.homedata.gxyList.length) {
            this.chartOption3(this.homedata.gxyList, 'echarts3')
            this.chartOption4(this.homedata.gxyList, 'echarts4')
          }
          if (this.homedata.tnbList && this.homedata.tnbList.length) {
            this.chartOption5(this.homedata.tnbList, 'echarts5')
          }
        }
      })
    },
    settingData() {
      let physical = this.propData.physical;
      this.echarts1data = {
        time: [],
        data1: [],
        data2: [],
        data3: [],
        data4: [],
        data5: [],
        data6: [],
        data7: [],
        data8: [],
        data9: []
      };

      if (physical && physical.length) {
        physical.reverse().map((item, index) => {
          if (index > 6) {
            return false
          }
          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);
        });
      }
    },

    initChart(dom, option) {
      this.$nextTick(() => {
        let chart = echarts.init(document.getElementById(dom))
        chart.setOption(option)
        chart.resize()
      })
    },
    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
            ? '2px solid  #13ce66'
            : val > healthIndex.error && val < healthIndex.warning
              ? '2px solid #ffba00'
              : val <= healthIndex.error
                ? '2px 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)'
                : ''
      };
    },
    // updateEcharts(newValue, oldValue, ownerInstance, instance) {
    // 	// 监听 service 层数据变更
    // 	myChart.setOption(newValue)
    // },
    check({ type, value, age, sex }) {
      let msg = this.propData.patient
      let arr = this.keyValue
      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
    },
    chartOption1({ time, data1, data2, data3 }, dom) {
      let arr = []
      time = time.map((res) => 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: 8
          })
        }
      })

      var option = (option = {
        legend: {
          data: ['身高', '体重', 'BMI'],
          textStyle: {
            fontSize: 10
          },
          lineStyle: {
            width: 1
          },
          itemHeight: 8,
          itemStyle: {
            borderWidth: 0
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        grid: {
          top: '25%',
          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: 'bottom',
          },
          smooth: true,
          type: 'line',
          data: data3,
          itemStyle: {
            // fontSize:'10px',
            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,
          itemStyle: {
            color: 'red'
          }
        },
        ],
      })

      this.$nextTick(() => {
        if (document.getElementById(dom)) {
          console.log(1)
          this.initChart(dom, option)
        }
      })
    },
    chartOption2({ time, data4, data5, data6 }, dom) {
      // console.log(time, data4, data5, data6)
      let arr = []
      time = time.map((res) => 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: 8
          })
        }
        if (this.check({
          type: 'diastole',
          value: data5[index]
        })) {
          arr.push({
            value: [item, data5[index]],
            symbolSize: 8
          })
        }
        if (this.check({
          type: 'pulse',
          value: data6[index]
        })) {
          arr.push({
            value: [item, data6[index]],
            symbolSize: 8
          })
        }
      })
      var option = (option = {
        legend: {
          data: ['收缩压', '舒张压', '心率'],
          textStyle: {
            fontSize: 10
          },
          lineStyle: {
            width: 1
          },
          itemHeight: 8,
          itemStyle: {
            borderWidth: 0
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        grid: {
          top: '25%',
          left: '3%',
          right: '5%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [{
          type: 'category',
          axisPointer: {
            type: 'shadow',
          },
          textStyle: {
            fontSize: 8
          },
          data: time,
        },],
        yAxis: [{
          type: 'value',
        },],
        series: [{
          smooth: true,
          name: '收缩压',
          label: {
            show: true,
            formatter: '{@score}',
            position: 'top'
          },
          smooth: true,
          type: 'line',
          data: data4,
          itemStyle: {
            color: '#8e3e1f'
          },
        },
        {
          smooth: true,
          name: '舒张压',
          label: {
            show: true,
            formatter: '{@score}',
            position: 'top',
          },
          smooth: true,
          type: 'line',
          data: data5,
          itemStyle: {
            color: '#3c3645',
            fontSize: 8
          },
          textStyle: {
            color: '#3c3645',
            fontSize: 8
          },
        },
        {
          name: '心率',
          label: {
            show: true,
            formatter: '{@score}',
          },
          smooth: true,
          type: "bar",
          data: data6,
          itemStyle: {
            color: '#33a3dc',
            fontSize: 8
          },
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'cartesian2d',
          data: arr,
          showEffectOn: 'render',
          // zlevel:1,
          rippleEffect: {
            // 波纹的绘制方式,可选'stroke'和'fill'
            brushType: 'fill',
          },
          hoverAnimation: false,
          itemStyle: {
            color: 'red'
          }
        },
        ],
      })
      this.$nextTick(() => {
        if (document.getElementById(dom)) {
          this.initChart(dom, option)
        }
      })
    },
    chartOption3(data, dom) {
      // console.log(data)
      let data1 = [],
        data2 = [],
        data3 = [],
        time = []
      data.map((item) => {
        time.push(timeTrans({
          time: item.uploadTime,
          format: 'M/D'
        }))
        data1.push(item.sbp)
        data2.push(item.rbp)
        data3.push(item.pulse)
      })

      let arr = []
      data.map((item, index) => {
        if (this.check({
          type: 'shrink',
          value: data1[index],
          age: true
        })) {
          arr.push({
            name: '收缩压',
            value: [item.uploadTime, data1[index]],
            symbolSize: 8,
          })
        }
        if (this.check({
          type: 'diastole',
          value: data2[index]
        })) {
          arr.push({
            name: '舒张压',
            value: [item.uploadTime, data2[index]],
            symbolSize: 8,
          })
        }

      })
      // console.log(arr)
      var option = (option = {
        legend: {
          data: ['收缩压', '舒张压', '心率'],
        },
        tooltip: {
          formatter: function (params) {
            console.log(params)
            let str = ''
            if (params.length > 0) {
              str =
                '<view style="padding:0px;width:140px"><view>' +
                params[0].name +
                '</view><view class="centerY" style="margin-top:6px"><view style="background:#5470c6;width:10px;height:10px;border-radius: 50%;" ></view><view class="" style="margin-left:4px">' +
                params[0].seriesName +
                '</view> <view class="ml-auto font-bold">' +
                params[0].value +
                '</view></view> <view class="centerY" style="margin-top:6px"><view style="background:#91cc75;width:10px;height:10px;border-radius: 50%;" ></view><view class="" style="margin-left:4px">' +
                params[1].seriesName +
                '</view><view class="ml-auto font-bold">' +
                params[1].value +
                '</view></view><view class="centerY" style="margin-top:6px"><view style="background:#fac858;width:10px;height:10px;border-radius: 50%;" ></view><view class="" style="margin-left:4px">' +
                params[2].seriesName +
                '</view><view class="ml-auto font-bold">' +
                params[2].value +
                '</view></view></view>'
            }
            return str
          },
          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.reverse(),
        },],
        yAxis: [{
          type: 'value',
        },],
        series: [{
          name: '收缩压',
          label: {
            show: true,
            formatter: '{@score}',
            position: 'top'
          },
          smooth: true,
          type: 'line',
          data: data1.reverse(),
        },
        {
          name: '舒张压',
          label: {
            show: true,
            formatter: '{@score}',
            position: 'bottom',
          },
          smooth: true,
          type: 'line',
          data: data2.reverse(),
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'cartesian2d',
          data: arr,
          showEffectOn: 'render',
          // zlevel:1,
          rippleEffect: {
            // 波纹的绘制方式,可选'stroke'和'fill'
            brushType: 'fill',
          },
          itemStyle: {
            color: '#F2597F'
          },
          hoverAnimation: false,
        },
        ],
      })
      this.$nextTick(() => {
        if (document.getElementById(dom)) {
          this.initChart(dom, option)
        }
      })
    },
    chartOption4(data, dom) {
      // console.log(data)
      let data1 = [],
        time = []
      data.map((item) => {
        time.push(timeTrans({
          time: item.uploadTime,
          format: 'M/D'
        }))
        data1.push(item.glu)
      })

      let arr = []
      data.map((item, index) => {
        if (this.check({
          type: 'bloodGlucose',
          value: data1[index],
          age: true
        })) {
          arr.push({
            name: '血糖',
            value: [item.uploadTime, data1[index]],
            symbolSize: 8,
          })
        }
      })
      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.reverse(),
        },],
        yAxis: [{
          type: 'value',
        },],
        series: [{
          name: '血糖',
          label: {
            show: true,
            formatter: '{@score}',
            position: 'top'
          },
          smooth: true,
          type: 'line',
          data: data1.reverse(),

          itemStyle: {
            color: '#369FE5'
          },
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'cartesian2d',
          data: arr,
          showEffectOn: 'render',
          // zlevel:1,
          rippleEffect: {
            // 波纹的绘制方式,可选'stroke'和'fill'
            brushType: 'fill',
          },
          itemStyle: {
            color: '#F2597F'
          },
          hoverAnimation: false,
        },
        ],
      })
      this.$nextTick(() => {
        if (document.getElementById(dom)) {
          this.initChart(dom, option)
        }
      })
    },
    chartOption5(data, dom) {
      // console.log(data)
      let data1 = [],
        data2 = [],
        data3 = [],
        time = []
      data.map((item) => {
        time.push(timeTrans({
          time: item.uploadTime,
          format: 'M/D'
        }))
        data3.push(item.pulse)
      })

      let arr = []
      data.map((item, index) => {
        if (this.check({
          type: 'pulse',
          value: data3[index]
        })) {
          arr.push({
            name: '心率',
            value: [item.uploadTime, data3[index]],
            symbolSize: 10,
          })
        }
      })
      // console.log(arr)
      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.reverse(),
        },],
        yAxis: [{
          type: 'value',
        },],
        series: [{
          name: '心率',
          label: {
            show: true,
            formatter: '{@score}',
            position: 'top',
          },
          itemStyle: {
            color: '#35B79C'
          },
          smooth: true,
          type: 'line',
          data: data3.reverse(),
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              global: false,
              colorStops: [{
                offset: 0,
                color: 'rgba(53,183,156,.7)'
              },
              {
                offset: 0.5,
                color: 'rgba(53,183,156,0.3)'
              },
              {
                offset: 1,
                color: 'rgba(53,183,156,0)'
              }
              ]
            }
          },
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'cartesian2d',
          data: arr,
          showEffectOn: 'render',
          // zlevel:1,
          rippleEffect: {
            // 波纹的绘制方式,可选'stroke'和'fill'
            brushType: 'fill',
          },
          itemStyle: {
            color: '#F2597F'
          },
          hoverAnimation: false,
        },
        ],
      })
      if (document.getElementById(dom)) {
        this.initChart(dom, option)
      }

    },
  }
};
</script>
<style lang="less" >
.bule_line {
  width: 5px;
  height: 15px;
  background-color: #1e8ff9;
  border-radius: 3px;
  box-shadow: 0px 2px 4px 0px rgba(121, 190, 254, 0.59);
}

.card {
  background: #ffffff;
  border-radius: 8px;
}

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

.mtable {
  &-title {
    border-radius: 25px;
    padding: 10px 0 10px 10px;
    box-shadow: 0px 1px 3px 1px rgba(45, 142, 255, 0.5);
  }

  &-body {
    &-item {
      margin-top: 10px;
      border-radius: 25px;
      padding: 7px 0 7px 10px;
      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: 180px;
}

.el-collapse-item__content {
  padding-bottom: 0 !important;
}
</style>