随访题库完成

WXL

2023-12-11 dc3d15dfe0c4a4a85bc5b4df7959b84a02beb064

 src/views/patient/patient/profile/index.vue

@@ -1,143 +1,299 @@
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <el-card class="box-card">
          <!-- <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div> -->
          <div class="personage">
    <!-- 头部盒子 -->
    <div class="personages">
      <el-row :gutter="20">
        <el-col :span="18">
          <div class="headportrait">
            <div class="text-center">
              <img v-imgError="require('@/assets/common/head.jpg')" src="" />
            </div>
            <div class="information">
              <div class="info-xx">
                吴龙
                <div class="xinz-inf">+新增标签</div>
              </div>
              <div class="info-xx">男<span>66岁</span></div>
              <div class="info-xx">13803963330</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-tabs
          type="border-card"
          v-model="activeName"
          @tab-click="handleClick"
            <div style="margin-left: 10px">吴大龙</div>
            <div style="margin-left: 10px" class="text-title">男</div>
            <div style="margin-left: 10px" class="text-title">66岁</div>
            <div style="margin-left: 10px" class="text-title">1999.12.18</div>
            <div style="margin-left: 10px" class="text-title">汉族</div>
            <div style="margin-left: 10px" class="text-title">河南信阳</div>
          </div></el-col
        >
          <el-tab-pane name="health">
            <span class="mulsz" slot="label"
              ><i class="el-icon-date"></i> 健康档案</span
            >
            基本信息
          </el-tab-pane>
          <el-tab-pane name="medical">
            <span class="mulsz" slot="label"
              ><i class="el-icon-s-management"></i> 医疗档案</span
            >
            <el-tabs v-model="sonactiveName" @tab-click="handleClick">
              <el-tab-pane name="outpatient"
                ><span class="mulsz" slot="label"
                  >门诊({{ mznumber }})</span
                ></el-tab-pane
              >
              <el-tab-pane name="inhospital"
                ><span class="mulsz" slot="label"
                  >住院({{ zynumber }})
                </span></el-tab-pane
              >
              <el-tab-pane name="checkout"
                ><span class="mulsz" slot="label"
                  >检验({{ jynumber }})
                </span></el-tab-pane
              >
              <el-tab-pane name="examine"
                ><span class="mulsz" slot="label"
                  >检查({{ jcnumber }})
                </span></el-tab-pane
              >
              <el-tab-pane name="physical"
                ><span class="mulsz" slot="label">
                  体检({{ tjnumber }})</span
                ></el-tab-pane
              >
              <el-tab-pane name="pharmacy"
                ><span class="mulsz" slot="label"
                  >用药({{ yynumber }})
                </span></el-tab-pane
              >
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane name="monitor">
            <span class="mulsz" slot="label"
              ><i class="el-icon-s-data"></i> 健康监测</span
            >
      </el-row>
    </div>

            <el-tabs v-model="sontwoactiveName" @tab-click="handleClick">
              <el-tab-pane name="blood"
                ><span class="mulsz" slot="label"
                  ><i class="el-icon-s-operation"></i> 血压</span
                ></el-tab-pane
              >
              <el-tab-pane name="glucose"
                ><span class="mulsz" slot="label"
                  ><i class="el-icon-odometer"></i>血糖
                </span></el-tab-pane
              >
              <el-tab-pane name="weight"
                ><span class="mulsz" slot="label"
                  ><i class="el-icon-s-data"></i>体重
                </span></el-tab-pane
              >
            </el-tabs></el-tab-pane
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="health">
        <span class="mulsz" slot="label"
          ><i class="el-icon-date"></i> 患者档案</span
        >
      </el-tab-pane>
      <el-tab-pane name="medical">
        <span class="mulsz" slot="label"
          ><i class="el-icon-s-management"></i> 医疗档案</span
        >
        <el-tabs v-model="sonactiveName" @tab-click="handleClick">
          <el-tab-pane name="outpatient"
            ><span class="mulsz" slot="label"
              >门诊({{ mznumber }})</span
            ></el-tab-pane
          >
          <el-tab-pane name="serve">
            <span class="mulsz" slot="label"
              ><i class="el-icon-s-custom"></i> 服务记录</span
            >

            定时任务补偿</el-tab-pane
          <el-tab-pane name="inhospital"
            ><span class="mulsz" slot="label"
              >住院({{ zynumber }})
            </span></el-tab-pane
          >
          <el-tab-pane name="checkout"
            ><span class="mulsz" slot="label"
              >体检({{ jynumber }})
            </span></el-tab-pane
          >
        </el-tabs>
      </el-col>
    </el-row>
      </el-tab-pane>
      <el-tab-pane name="monitor">
        <span class="mulsz" slot="label"
          ><i class="el-icon-s-data"></i> 健康监测</span
        >

        <el-tabs v-model="sontwoactiveName" @tab-click="handleClick">
          <el-tab-pane name="blood"
            ><span class="mulsz" slot="label"
              ><i class="el-icon-s-operation"></i> 血压</span
            ></el-tab-pane
          >
          <el-tab-pane name="glucose"
            ><span class="mulsz" slot="label"
              ><i class="el-icon-odometer"></i>血糖
            </span></el-tab-pane
          >
          <el-tab-pane name="weight"
            ><span class="mulsz" slot="label"
              ><i class="el-icon-s-data"></i>体重
            </span></el-tab-pane
          >
          <el-tab-pane name="heartrate"
            ><span class="mulsz" slot="label"
              ><i class="el-icon-s-operation"></i>心率
            </span></el-tab-pane
          >
          <el-tab-pane name="bloodoxygen"
            ><span class="mulsz" slot="label"
              ><i class="el-icon-s-data"></i>血氧
            </span></el-tab-pane
          >
          <el-tab-pane name="animalheat"
            ><span class="mulsz" slot="label"
              ><i class="el-icon-s-opportunity"></i>体温
            </span></el-tab-pane
          >
        </el-tabs></el-tab-pane
      >
      <el-tab-pane name="serve">
        <span class="mulsz" slot="label"
          ><i class="el-icon-s-custom"></i> 服务记录</span
        >
      </el-tab-pane>
    </el-tabs>

    <!-- 健康档案模块 -->
    <div class="information-content" v-if="activeName == 'health'">
      <div class="top-message">
        <div class="headline">基础信息</div>
        <div class="detailed">
          <div class="one-column">
            <div>患者姓名：<span class="spanvalue">王大美</span></div>
            <div>性别：<span class="spanvalue">男</span></div>
          <el-row :gutter="20">
            <el-col :span="12"
              ><div class="grid-content bg-purple">
                患者姓名：<span class="spanvalue">王大美</span>
              </div></el-col
            >
            <el-col :span="12"
              ><div class="grid-content bg-purple">
                联系电话：<span class="spanvalue">13803963330</span>
              </div></el-col
            >
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24"
              ><div class="grid-content bg-purple">
                出生地：<span class="spanvalue"
                  >浙江省杭州市余杭区余杭街道</span
                >
              </div></el-col
            >
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24"
              ><div class="grid-content bg-purple">
                居住地：<span class="spanvalue"
                  >浙江省杭州市余杭区余杭街道</span
                >
              </div></el-col
            >
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24"
              ><div class="xinz-inf">
                <el-tag
                  :key="tag"
                  type="success"
                  v-for="tag in dynamicTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                >
                  {{ tag }}
                </el-tag>
                <el-select
                  v-model="inputValue"
                  v-if="inputVisible"
                  @change="handleInputConfirm"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.label"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>

            <div>证件类型：<span class="spanvalue">身份证</span></div>
          </div>
          <div class="one-column">
            <div>出生日期：<span class="spanvalue">1999-01-02</span></div>

            <div>年龄：<span class="spanvalue">121</span></div>

            <div class="">
              证件号码：<span class="spanvalue">312223222322232223</span>
            </div>
          </div>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput"
                  >+ 新增标签</el-button
                >
              </div></el-col
            >
          </el-row>
        </div>
      </div>
      <div class="top-message">
        <div class="headline">病史</div>
        <div class="detailed">
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="过往疾病" prop="name">
                  <el-input
                    v-model="form.name"
                    placeholder="请输入"
                    maxlength="30"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="药物过敏" prop="sex">
                  <el-input
                    v-model="form.name"
                    placeholder="请输入具体药物/无"
                    maxlength="30"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="家族病史" prop="age">
                  <el-input
                    v-model="form.age"
                    placeholder="请输入具体疾病/无"
                    maxlength="30"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="手术史" prop="name">
                  <el-input
                    v-model="form.name"
                    placeholder="请输入手术/无"
                    maxlength="30"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生育史" prop="age">
                  <el-input
                    v-model="form.age"
                    placeholder="请输入胎数/无"
                    maxlength="30"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="月经史" prop="telcode">
                  <el-radio-group v-model="form.radio">
                    <el-radio :label="1">有</el-radio>
                    <el-radio :label="2">无</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="吸烟情况" prop="idtype">
                  <el-radio-group v-model="form.radio">
                    <el-radio :label="1">有</el-radio>
                    <el-radio :label="2">无</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="饮酒情况" prop="idno">
                  <el-radio-group v-model="form.radios">
                    <el-radio :label="1">有</el-radio>
                    <el-radio :label="2">无</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="运动情况" prop="idno">
                  <el-radio-group v-model="form.radiosa">
                    <el-radio :label="1">有</el-radio>
                    <el-radio :label="2">无</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="饮食情况" prop="idno">
                  <el-radio-group v-model="form.radiosa">
                    <el-radio :label="1">多度饮食</el-radio>
                    <el-radio :label="2">正常饮食</el-radio>
                    <el-radio :label="2">食欲不振</el-radio>
                  </el-radio-group>
                </el-form-item> </el-col
              ><el-col :span="12">
                <el-form-item label="心理情况" prop="idno">
                  <el-radio-group v-model="form.radiosa">
                    <el-radio :label="1">心情愉悦</el-radio>
                    <el-radio :label="2">轻微焦虑</el-radio>
                    <el-radio :label="2">抑郁</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <!-- 联系电话 -->
      <div class="bottom-message">
        <div class="headline">号码维护</div>
        <div class="headline">
          号码维护
          <el-button type="primary" @click="AddanumberVisible = true"
            >+新增</el-button
          >
        </div>
        <div class="Table-screen">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="phonenumber" label="联系方式" width="180">
            </el-table-column>
            <el-table-column prop="concern" label="关系"> </el-table-column>
            <el-table-column prop="source" label="联系人来源">
            </el-table-column>
            <el-table-column prop="default" label="默认联系方式">
            </el-table-column>
            <el-table-column
              label-class-name="columcz"
              fixed="right"
@@ -163,16 +319,19 @@
        <el-table :data="serviceData" style="width: 100%">
          <el-table-column prop="daya" label="就诊日期" width="180">
          </el-table-column>
          <el-table-column prop="hospitalname" label="医院名称" width="180">
          </el-table-column>
          <el-table-column prop="result" label="诊断结果"> </el-table-column>
          <el-table-column prop="administrative" label="就诊科室">
          <el-table-column prop="administrative" label="就诊科室" width="180">
          </el-table-column>
          <el-table-column prop="doctor" label="医生"> </el-table-column>
          <el-table-column label-class-name="columcz" label="操作" width="300">
            <template slot-scope="scope">
              <el-button type="text" size="small">详情</el-button>
            </template>
          <el-table-column prop="result" label="疾病诊断"> </el-table-column>
          <el-table-column prop="administrative" label="检验">
          </el-table-column>
          <el-table-column prop="administrative" label="检查">
          </el-table-column>
          <el-table-column prop="administrative" label="手术">
          </el-table-column>
          <el-table-column prop="administrative" label="用药">
          </el-table-column>
          <el-table-column prop="columcz" label="医嘱" width="200">
          </el-table-column>
        </el-table>

@@ -188,105 +347,238 @@
      <div v-if="sonactiveName == 'inhospital'">
        <el-table :data="serviceData" style="width: 100%">
          <el-table-column prop="godaya" label="入院日期"> </el-table-column>
          <el-table-column prop="hospitalname" label="医院名称">
          <el-table-column prop="hospitalname" label="出院时间">
          </el-table-column>
          <el-table-column prop="result" label="入院科别"> </el-table-column>
          <el-table-column prop="administrative" label="病区">
          </el-table-column>
          <el-table-column prop="bed" label="床位号"> </el-table-column>
          <el-table-column prop="doctor" label="入院诊断"> </el-table-column>
          <el-table-column prop="today" label="出院时间"> </el-table-column>
        </el-table>
      </div>
      <!-- 检验 -->
      <div v-if="sonactiveName == 'checkout'">
        <el-table :data="serviceData" style="width: 100%">
          <el-table-column prop="godaya" label="检验单号"> </el-table-column>
          <el-table-column prop="hospitalname" label="报告日期">
          <el-table-column prop="result" label="主治医师"> </el-table-column>
          <el-table-column prop="bed" label="管床护士"> </el-table-column>
          <el-table-column prop="doctor" label="出院疾病诊断">
          </el-table-column>
          <el-table-column prop="result" label="检验项目"> </el-table-column>
          <el-table-column prop="administrative" label="医院名称">
          <el-table-column prop="today" label="检验"> </el-table-column>
          <el-table-column prop="administrative" label="检查">
          </el-table-column>
        </el-table>
      </div>
      <!-- 检查 -->
      <div v-if="sonactiveName == 'examine'">
        <el-table :data="serviceData" style="width: 100%">
          <el-table-column prop="godaya" label="报告单"> </el-table-column>
          <el-table-column prop="hospitalname" label="报告时间">
          <el-table-column prop="administrative" label="手术">
          </el-table-column>
          <el-table-column prop="result" label="检查项目"> </el-table-column>
          <el-table-column prop="administrative" label="医院名称">
          <el-table-column prop="administrative" label="用药">
          </el-table-column>
          <el-table-column prop="columcz" label="出院小结" width="200">
          </el-table-column>
        </el-table>
      </div>
      <!-- 体检 -->
      <div v-if="sonactiveName == 'physical'">
      <div v-if="sonactiveName == 'checkout'">
        <el-table :data="serviceData" style="width: 100%">
          <el-table-column prop="daya" label="就诊日期"> </el-table-column>
          <el-table-column prop="hospitalname" label="医院名称">
          <el-table-column prop="godaya" label="体检类型"> </el-table-column>
          <el-table-column prop="hospitalname" label="体检套餐名称">
          </el-table-column>
          <el-table-column prop="result" label="诊断结果"> </el-table-column>
          <el-table-column prop="administrative" label="就诊科室">
          <el-table-column prop="result" label="体检预约日期">
          </el-table-column>
          <el-table-column prop="doctor" label="医生"> </el-table-column>
          <!-- <el-table-column
            label-class-name="columcz"
            fixed="right"
            label="操作"
            width="300"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small">详情</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <!-- 用药 -->
      <div v-if="sonactiveName == 'pharmacy'">
        <el-table :data="serviceData" style="width: 100%">
          <el-table-column prop="daya" label="就诊日期"> </el-table-column>
          <el-table-column prop="hospitalname" label="医院名称">
          <el-table-column prop="administrative" label="体检项目">
          </el-table-column>
          <el-table-column prop="result" label="诊断结果"> </el-table-column>
          <el-table-column prop="administrative" label="就诊科室">
          <el-table-column prop="administrative" label="体检报告日">
          </el-table-column>
          <el-table-column prop="doctor" label="医生"> </el-table-column>
          <el-table-column prop="administrative" label="体检总检报告">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 服务记录 -->
    <div class="medical-record" v-else-if="activeName == 'serve'">sdaad</div>
    <div
      class="medical-recordc"
      style="margin-top: 20px; font-size: 20px !important"
      v-else-if="activeName == 'serve'"
    >
      <div style="margin-bottom: 15px" v-for="item in record">
        <el-card class="box-card">
          <div
            style="
              font-size: 22px;
              padding-left: 5px;
              margin: 15px 0;
              border-left: 4px solid rgb(190, 65, 134);
            "
          >
            {{ item.name }}
          </div>
          <el-divider></el-divider>
          <div style="margin-top: 10px">
            随访状态：已终止<span style="color: #2775b6"
              >（终止原因：患者痊愈回访结束，终止时间：2023-12-18 12:00）</span
            >
          </div>
          <div style="margin-top: 10px">
            随访发送时间：<span style="color: #2775b6">2023-11-23 12:00</span>
          </div>
          <div style="margin-top: 10px">
            随访完成时间：<span style="color: #2775b6">2023-12-18 12:00</span>
          </div>
          <div style="margin-top: 10px">
            疼痛程度：<span style="color: #2775b6">中度</span>
          </div>
          <div
            style="
              font-size: 20px;
              padding-left: 5px;
              margin: 15px 0;
              border-left: 4px solid rgb(65, 161, 190);
            "
          >
            人工随访记录
          </div>
          <div style="margin-top: 10px">
            <el-row :gutter="20">
              <el-col :span="6"
                >随访日期：
                <span style="color: #2775b6">2023-11-22 11:22</span></el-col
              >
              <el-col :span="6"
                >随访人： <span style="color: #2775b6">吴小龙</span></el-col
              >
              <el-col :span="6"
                >患者配合度： <span style="color: #2775b6">高</span></el-col
              >
            </el-row>
          </div>
          <div style="margin-top: 10px">
            随访结果： <span style="color: #2775b6">患者痊愈，身体倍棒</span>
          </div>
          <div style="margin-top: 10px">
            随访备注： <span style="color: #2775b6">提醒注意饮食健康</span>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 健康监测 -->
    <div class="medical-record" v-show="activeName == 'monitor'">
      <!-- 血压图标 -->
      <div v-show="sontwoactiveName == 'blood'">
      <div v-show="sontwoactiveName == 'blood'" style="display: flex">
        <div
          id="xyeCharts"
          class="sontwoactiveName"
          style="width: 1300px; height: 800px"
          style="width: 880px; height: 560px"
        ></div>
        <div style="width: 400px">
          <el-card class="box-card">
            <SFtable
              :currentList="tableDatalist"
              :tableLabel="tableLabelxy"
              :center="false"
              :multiplechoice="false"
            />
          </el-card>
        </div>
      </div>
      <!-- 血糖 -->
      <div v-show="sontwoactiveName == 'glucose'">
      <div v-show="sontwoactiveName == 'glucose'" style="display: flex">
        <div
          id="xteCharts"
          class="sontwoactiveName"
          style="width: 1300px; height: 800px"
          style="width: 880px; height: 560px"
        ></div>
        <div style="width: 400px">
          <el-card class="box-card">
            <SFtable
              :currentList="tableDatalist"
              :tableLabel="tableLabelxt"
              :center="false"
              :multiplechoice="false"
            />
          </el-card>
        </div>
      </div>
      <!-- 体重 -->
      <div v-show="sontwoactiveName == 'weight'">
      <div v-show="sontwoactiveName == 'weight'" style="display: flex">
        <div
          id="tzeCharts"
          class="sontwoactiveName"
          style="width: 1300px; height: 800px"
          style="width: 880px; height: 560px"
        ></div>
        <div style="width: 400px">
          <el-card class="box-card">
            <SFtable
              :currentList="tableDatalist"
              :tableLabel="tableLabeltz"
              :center="false"
              :multiplechoice="false"
            />
          </el-card>
        </div>
      </div>
      <!-- 心率 -->
      <div v-show="sontwoactiveName == 'heartrate'" style="display: flex">
        <div
          id="xleCharts"
          class="sontwoactiveName"
          style="width: 880px; height: 560px"
        ></div>
        <div style="width: 400px">
          <el-card class="box-card">
            <SFtable
              :currentList="tableDatalist"
              :tableLabel="tableLabelxl"
              :center="false"
              :multiplechoice="false"
            />
          </el-card>
        </div>
      </div>
      <!-- 血氧 -->
      <div v-show="sontwoactiveName == 'bloodoxygen'" style="display: flex">
        <div
          id="xueyangeCharts"
          class="sontwoactiveName"
          style="width: 880px; height: 560px"
        ></div>
        <div style="width: 400px">
          <el-card class="box-card">
            <SFtable
              :currentList="tableDatalist"
              :tableLabel="tableLabelxueyang"
              :center="false"
              :multiplechoice="false"
            />
          </el-card>
        </div>
      </div>
      <!-- 体温 -->
      <div v-show="sontwoactiveName == 'animalheat'" style="display: flex">
        <div
          id="tweCharts"
          class="sontwoactiveName"
          style="width: 880px; height: 560px"
        ></div>
        <div style="width: 400px">
          <el-card class="box-card">
            <SFtable
              :currentList="tableDatalist"
              :tableLabel="tableLabeltw"
              :center="false"
              :multiplechoice="false"
            />
          </el-card>
        </div>
      </div>
    </div>

    <!-- <div id="xyeCharts" style="width: 500px; height: 500px"></div> -->
    <el-dialog title="新增联系方式" :visible.sync="AddanumberVisible">
      <el-form :model="numberform" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="numberform.name"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="numberform.name"></el-input>
        </el-form-item>
        <el-form-item label="关系">
          <el-input v-model="numberform.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="AddanumberVisible = false">取 消</el-button>
        <el-button type="primary" @click="Addanumber">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

@@ -295,18 +587,20 @@
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import * as echarts from "echarts";
import SFtable from "@/components/SFtable"; //表格组件

import { getUserProfile } from "@/api/system/user";
import { listJob } from "@/api/monitor/job"; //获取列表接口待定

export default {
  name: "Profile",
  components: { userAvatar, userInfo, resetPwd },
  components: { userAvatar, userInfo, resetPwd, SFtable },
  data() {
    return {
      user: {},
      roleGroup: {},
      postGroup: {},
      form: {},
      mznumber: 14,
      zynumber: 34,
      jynumber: 32,
@@ -318,6 +612,21 @@
      activeName: "health", //一类导航
      sonactiveName: "outpatient", //健康监测导航
      sontwoactiveName: "blood", //医疗档案导航
      dynamicTags: ["标签一", "标签二", "标签三"],
      record: [
        {
          name: "宣教任务",
        },
        {
          name: "通知任务",
        },
        {
          name: "问卷调查",
        },
      ],
      inputVisible: false,
      AddanumberVisible: false,
      inputValue: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
@@ -326,6 +635,7 @@
        jobGroup: undefined,
        status: undefined,
      },
      numberform: {},
      echartdom: {},
      xtechartdom: {},
      tzechartdom: {},
@@ -351,6 +661,26 @@
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      tableDatalist: [
        {
          id: 12,
          date: "2016-05-02",
          name: "121",
          address: "89",
        },
        {
          id: 12,
          date: "2016-05-02",
          name: "121",
          address: "89",
        },
        {
          id: 12,
          date: "2016-05-02",
          name: "121",
          address: "89",
        },
      ],
      serviceData: [
        {
          daya: "2023-12-12",
@@ -360,6 +690,52 @@
          doctor: "吴大龙",
        },
      ],
      options: [
        {
          value: "1",
          label: "会员",
        },
        {
          value: "2",
          label: "糖尿病",
        },
        {
          value: "3",
          label: "高血压",
        },
        {
          value: "4",
          label: "体检",
        },
      ],
      tableLabelxy: [
        { label: "测量时间", width: "", prop: "name" },
        { label: "收缩压", width: "", prop: "sex" },
        { label: "舒张压", width: "", prop: "age" },
      ],
      tableLabelxt: [
        { label: "测量时间", width: "", prop: "name" },
        { label: "收缩压", width: "", prop: "sex" },
        { label: "舒张压", width: "", prop: "age" },
      ],
      tableLabeltz: [
        { label: "测量时间", width: "", prop: "name" },
        { label: "身高", width: "", prop: "sex" },
        { label: "体重", width: "", prop: "age" },
        { label: "BMI指数", width: "", prop: "update_by" },
      ],
      tableLabelxl: [
        { label: "测量时间", width: "", prop: "name" },
        { label: "心率", width: "", prop: "sex" },
      ],
      tableLabelxueyang: [
        { label: "测量时间", width: "", prop: "name" },
        { label: "血氧饱和度", width: "", prop: "sex" },
      ],
      tableLabeltw: [
        { label: "测量时间", width: "", prop: "name" },
        { label: "体温", width: "", prop: "sex" },
      ],
    };
  },
  created() {
@@ -367,12 +743,16 @@
      this.echartdom = document.getElementById("xyeCharts");
      this.xtechartdom = document.getElementById("xteCharts");
      this.tzechartdom = document.getElementById("tzeCharts");
      console.log(this.echartdom);
      console.log(this.xtechartdom);
      console.log(this.tzechartdom);
      this.xlechartdom = document.getElementById("xleCharts");
      this.xueyangechartdom = document.getElementById("xueyangeCharts");
      this.twechartdom = document.getElementById("tweCharts");

      this.echartsInit();
      this.xtechartsInit();
      this.tzechartsInit();
      this.xlechartsInit();
      this.xueyangechartsInit();
      this.twechartsInit();
    });
    this.getList();
  },
@@ -388,27 +768,35 @@
        this.loading = false;
      });
    },
    // getUser() {
    //   getUserProfile().then((response) => {
    //     this.user = response.data;
    //     this.roleGroup = response.roleGroup;
    //     this.postGroup = response.postGroup;
    //   });
    // },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 联系方式新增
    Addanumber() {},
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },

    // 血压图表部分
    echartsInit() {
      // 基于准备好的dom，初始化echarts实例
      console.log(echarts);
      console.log(this.echartdom);
      console.log(this.$refs.xyeCharts);
      var myxyChart = echarts.init(this.echartdom);
      console.log(myxyChart);
      // var myxyChart = this.$echarts.init(document.getElementById("xyeCharts"));
      // var myxyChart = this.$echarts.init(this.$refs.xyeCharts);
      var option = {
        title: {
          text: "历史血压记录",
@@ -475,7 +863,6 @@
          },
        ],
      };
      console.log("ss");
      // 使用刚指定的配置项和数据显示图表。
      myxyChart.setOption(option);
    },
@@ -517,80 +904,7 @@
        title: {
          text: "历史血糖记录",
        },
        visualMap: [
          {
            show: false,
            type: "continuous",
            seriesIndex: 0,
            min: 0,
            max: 400,
          },
        ],
        title: [
          {
            left: "center",
            text: "血糖历史监测",
          },
        ],
        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            data: dateList,
          },
        ],
        yAxis: [{}],
        series: [
          {
            type: "line",
            showSymbol: false,
            data: valueList,
          },
        ],
      };
      console.log("ss");
      // 使用刚指定的配置项和数据显示图表。
      myxyChart.setOption(option);
    },
    // 体重图表
    tzechartsInit() {
      // 基于准备好的dom，初始化echarts实例
      console.log(echarts);
      console.log(this.tzechartdom);
      var myxyChart = echarts.init(this.tzechartdom);
      console.log(myxyChart);
      const data = [
        ["2000-06-05", 116],
        ["2000-06-06", 99],
        ["2000-06-07", 105],
        ["2000-06-08", 126],
        ["2000-06-09", 73],
        ["2000-06-10", 85],
        ["2000-06-11", 73],
        ["2000-06-12", 68],
        ["2000-06-13", 92],
        ["2000-06-14", 130],
        ["2000-06-15", 245],
        ["2000-06-16", 119],
        ["2000-06-17", 115],
        ["2000-06-18", 201],
        ["2000-06-19", 209],
        ["2000-06-20", 106],
        ["2000-06-21", 137],
        ["2000-06-22", 128],
        ["2000-06-23", 85],
      ];
      const dateList = data.map(function (item) {
        return item[0];
      });
      const valueList = data.map(function (item) {
        return item[1];
      });
      var option = {
        title: {
          text: "历史血糖记录",
        },
        // 侧边小功能
        toolbox: {
          show: true,
          feature: {
@@ -653,47 +967,352 @@
      // 使用刚指定的配置项和数据显示图表。
      myxyChart.setOption(option);
    },
    // 体重图表
    tzechartsInit() {
      // 基于准备好的dom，初始化echarts实例
      console.log(echarts);
      console.log(this.tzechartdom);
      var myxyChart = echarts.init(this.tzechartdom);
      var option = {
        title: {
          text: "体重指标图",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["身高", "体重", "BMI指数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "身高",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "体重",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },

          {
            name: "BMI指数",
            type: "line",
            stack: "Total",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myxyChart.setOption(option);
    },
    // 心率
    xlechartsInit() {
      var myxyChart = echarts.init(this.xlechartdom);
      console.log(myxyChart);
      const data = [
        ["2000-06-05", 116],
        ["2000-06-06", 129],
        ["2000-06-07", 135],
        ["2000-06-08", 86],
        ["2000-06-09", 73],
        ["2000-06-10", 85],
        ["2000-06-11", 73],
        ["2000-06-12", 68],
        ["2000-06-13", 92],
        ["2000-06-14", 130],
        ["2000-06-15", 245],
        ["2000-06-16", 139],
        ["2000-06-17", 115],
        ["2000-06-18", 111],
        ["2000-06-19", 309],
        ["2000-06-20", 206],
        ["2000-06-21", 137],
        ["2000-06-22", 128],
        ["2000-06-23", 85],
      ];
      const dateList = data.map(function (item) {
        return item[0];
      });
      const valueList = data.map(function (item) {
        return item[1];
      });
      var option = {
        title: {
          text: "历史心率记录",
        },
        visualMap: [
          {
            show: false,
            type: "continuous",
            seriesIndex: 0,
            min: 0,
            max: 400,
          },
        ],

        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            data: dateList,
          },
        ],
        yAxis: [{}],
        series: [
          {
            type: "line",
            showSymbol: false,
            data: valueList,
            lineStyle: {
              width: 3,
              type: "solid",
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#22a2c3",
                },
                {
                  offset: 1,
                  color: "#b0d5df",
                },
              ]),
            },
          },
        ],
      };
      console.log("ss");
      // 使用刚指定的配置项和数据显示图表。
      myxyChart.setOption(option);
    },
    // 血氧
    xueyangechartsInit() {
      var myxyChart = echarts.init(this.xueyangechartdom);
      const data = [
        ["2000-06-05", 116],
        ["2000-06-06", 129],
        ["2000-06-07", 135],
        ["2000-06-08", 86],
        ["2000-06-09", 73],
        ["2000-06-10", 85],
        ["2000-06-11", 73],
        ["2000-06-12", 68],
        ["2000-06-13", 92],
        ["2000-06-14", 130],
        ["2000-06-15", 245],
        ["2000-06-16", 139],
        ["2000-06-17", 115],
        ["2000-06-18", 111],
        ["2000-06-19", 309],
        ["2000-06-20", 206],
        ["2000-06-21", 137],
        ["2000-06-22", 128],
        ["2000-06-23", 85],
      ];
      const dateList = data.map(function (item) {
        return item[0];
      });
      const valueList = data.map(function (item) {
        return item[1];
      });
      var option = {
        title: {
          text: "历史血氧记录",
        },
        visualMap: [
          {
            show: false,
            type: "continuous",
            seriesIndex: 0,
            min: 0,
            max: 400,
          },
        ],

        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            data: dateList,
          },
        ],
        yAxis: [{}],
        series: [
          {
            type: "line",
            showSymbol: false,
            data: valueList,
            lineStyle: {
              width: 3,
              type: "solid",
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#45b787",
                },
                {
                  offset: 1,
                  color: "#c4d7d6",
                },
              ]),
            },
          },
        ],
      };
      console.log("ss");
      // 使用刚指定的配置项和数据显示图表。
      myxyChart.setOption(option);
    },
    // 体温
    twechartsInit() {
      var myxyChart = echarts.init(this.twechartdom);
      console.log(myxyChart);
      const data = [
        ["2000-06-05", 36.8],
        ["2000-06-06", 36.2],
        ["2000-06-07", 37.8],
        ["2000-06-08", 37.8],
        ["2000-06-09", 37.2],
        ["2000-06-10", 36.2],
        ["2000-06-11", 37.8],
        ["2000-06-12", 36.9],
        ["2000-06-13", 36.8],
        ["2000-06-14", 36.4],
        ["2000-06-15", 37.1],
        ["2000-06-16", 36.9],
        ["2000-06-17", 36.4],
        ["2000-06-18", 38.8],
        ["2000-06-19", 37.5],
        ["2000-06-20", 36.6],
        ["2000-06-21", 36.8],
        ["2000-06-22", 36.2],
        ["2000-06-23", 37.8],
      ];
      const dateList = data.map(function (item) {
        return item[0];
      });
      const valueList = data.map(function (item) {
        return item[1];
      });
      var option = {
        title: {
          text: "历史体温记录",
        },
        visualMap: [
          {
            show: false,
            type: "continuous",
            seriesIndex: 0,
            min: 0,
            max: 400,
          },
        ],

        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            data: dateList,
          },
        ],
        yAxis: [{}],
        series: [
          {
            type: "line",
            showSymbol: false,
            data: valueList,
          },
        ],
      };
      console.log("ss");
      // 使用刚指定的配置项和数据显示图表。
      myxyChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.personage {
  display: flex;
  .text-center {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    img {
      width: 100%;
.personages {
  height: 88px;
  width: 100%;
  background-color: #2486b9;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 10px;
  line-height: 48px;
  font-size: 25px;
  font-weight: 600;
  color: #ffffff;
  .headportrait {
    display: flex;
    .text-center {
      width: 55px;
      height: 55px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  .information {
    font-size: 25px;
    .info-xx {
      margin-top: 15px;
      border-bottom: 2px solid rgb(65, 161, 190);
      display: flex;
      span {
        margin-left: 30px;
      }
      .xinz-inf {
        cursor: pointer;
        margin-left: 20px;
        height: 23px;
        line-height: 23px;
        padding: 2px;
        align-items: center;
        font-size: 16px;
        color: rgb(85, 151, 250);
        border: 1px solid #439fff;
        border-radius: 9px;
      }
    .text-title {
      font-size: 20px;
      font-weight: 500;
      color: #ecfcfc;
    }
  }
}
.xinz-inf {
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  line-height: 48px;

  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
.el-tabs--border-card {
  font-size: 25px;
  // font-size: 25px;
  .mulsz {
    font-size: 25px;
    margin-top: 20px;
@@ -709,24 +1328,18 @@
    margin-top: 25px;
    margin-left: 100px;
    .detailed {
      width: 70%;
      width: 88%;
      border-radius: 8px;
      padding: 30px;
      margin-bottom: 30px;
      background-color: #ddf0f8;
      .one-column {
        display: flex;
        font-size: 20px;
        margin-bottom: 30px;
        padding-bottom: 3px;
        .spanvalue {
          display: inline-block;
          min-width: 200px;
          border-bottom: 1px solid rgb(172, 172, 172);
        }

        div {
          width: 330px;
        }
      .bg-purple {
        margin-bottom: 20px;
      }
      .spanvalue {
        display: inline-block;
        min-width: 200px;
        border-bottom: 1px solid rgb(172, 172, 172);
      }
    }
  }
@@ -741,9 +1354,10 @@
    margin-bottom: 25px;
    margin-left: 100px;
    .Table-screen {
      width: 70%;
      width: 88%;
      padding: 30px;
      margin-bottom: 30px;
      border-radius: 8px;
      background-color: #ddf0f8;
      font-size: 20px !important;
    }