PC-application/component/statistics/PersonInfo/index.html

<!-- 样式写在component/common/jtbc.css里 -->
<el-dialog :visible.sync="visible" title="黄小蕾个案详情" @close="closeDialog" width="800px">
  <div class="patient-box">
    <img src="../../../images/d-default.png" alt="" class="info-avatar" />
    <div>
      <div style="margin-bottom: 6px">
        黄小蕾 女 45岁 350***109
        <el-button type="primary" size="mini" @click="copyToClipboard('123456789')">复制证件号码</el-button>
      </div>
      <div>
        <el-tag size="medium" style="margin-right: 4px">高血压</el-tag>
        <el-tag size="medium" style="margin-right: 4px">高血压</el-tag>
      </div>
    </div>
  </div>
  <el-tabs v-model="type" type="card" v-if="!rehabilitationDetailVisible">
    <el-tab-pane label="评估" name="1">
      <div class="year-item" v-for="item in assessment">
        <div class="year">
          <div class="time-label">{{item.year}}</div>
          <div class="year-circle"></div>
        </div>
        <div class="year-content">
          <div class="record-item" v-for="el in item.children">
            <div class="time-label">
              <div>{{el.date}}</div>
              <div>{{el.time}}</div>
            </div>
            <div class="time-circle"></div>
            <div class="record-detail-item">
              <div>
                <div class="risk">{{el.risk}}</div>
                <div>评估医生：{{el.doctor}} &ensp; 评估状态：{{el.status}}</div>
              </div>
              <el-button type="primary" size="medium">评估详情</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="上转" name="2">
      <div class="year-item" v-for="item in turnup">
        <div class="year">
          <div class="time-label">{{item.year}}</div>
          <div class="year-circle"></div>
        </div>
        <div class="year-content">
          <div class="record-item" v-for="el in item.children">
            <div class="time-label">
              <div>{{el.date}}</div>
              <div>{{el.time}}</div>
            </div>
            <div class="time-circle"></div>
            <div class="record-detail-item">
              <div>
                <div class="risk">{{el.hospital}}</div>
                <div>预约科室：{{el.dept}} &ensp; 预约医生：{{el.doctor}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="就诊" name="3">
      <div class="year-item" v-for="item in jzList">
        <div class="year">
          <div class="time-label">{{item.year}}</div>
          <div class="year-circle"></div>
        </div>
        <div class="year-content">
          <div class="record-item" v-for="el in item.children">
            <div class="time-label">
              <div>{{el.date}}</div>
              <div>{{el.time}}</div>
            </div>
            <div class="time-circle"></div>
            <div class="record-detail-item">
              <div>
                <div class="risk">
                  {{el.hospital}}
                  <el-tag size="small" style="margin-left: 6px">{{el.type}}</el-tag>
                </div>
                <div>预约科室：{{el.dept}} &ensp; 诊断名称：{{el.diagnostic}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="下转" name="4">
      <div class="year-item" v-for="item in turnDown">
        <div class="year">
          <div class="time-label">{{item.year}}</div>
          <div class="year-circle"></div>
        </div>
        <div class="year-content">
          <div class="record-item" v-for="el in item.children">
            <div class="time-label">
              <div>{{el.date}}</div>
              <div>{{el.time}}</div>
            </div>
            <div class="time-circle"></div>
            <div class="record-detail-item">
              <div>
                <div class="risk">
                  {{el.hospital}}
                  <el-tag size="small" style="margin-left: 6px">{{el.type}}</el-tag>
                </div>
                <div>接收社区医院：{{el.community}}</div>
              </div>
              <div>
                <div>下转医生：{{el.doctor}}</div>
                <div>接收医生：{{el.receiveDoc}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="康复计划" name="5">
      <div class="year-item" v-for="item in rehabilitation">
        <div class="year">
          <div class="time-label">{{item.year}}</div>
          <div class="year-circle"></div>
        </div>
        <div class="year-content">
          <div class="record-item" v-for="el in item.children">
            <div class="time-label">
              <div>{{el.date}}</div>
              <div>{{el.time}}</div>
            </div>
            <div class="time-circle"></div>
            <div class="record-detail-item" style="cursor: pointer" @click="toRehabilitationDetail(el)">
              <div>
                <div class="risk">
                  {{el.hospital}}
                  <el-tag size="small" style="margin-left: 6px">{{el.type}}</el-tag>
                </div>
                <div>接收社区医院：{{el.community}} &ensp;接收医生：{{el.receiveDoc}}</div>
              </div>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
  <div v-else>
    <div class="between" style="margin-bottom: 10px">
      <span>厦门大学附属心血管医院</span>
      <span>2024-12-17</span>
    </div>
    <div class="service-item">
      <div class="between">
        <div class="c-409eff">康复随访</div>
        <div class="complete-situation">
          完成情况：
          <span class="c-ff6600">2/4</span>
        </div>
      </div>
      <div class="sf-box">
        <div class="sf-item" v-for="item in sfList">
          <div class="sf-time">
            <div>{{item.date}}</div>
            <div>{{item.time}}</div>
          </div>
          <div class="time-circle"></div>
          <div class="sf-doctor">{{item.doctor}}</div>
          <div class="sf-hospital">{{item.hospital}}</div>
          <div class="sf-status">{{item.status == '1'?'已完成':'未完成'}}</div>
          <el-button type="primary" @click="toDetail" size="mini">查看详情</el-button>
        </div>
      </div>
    </div>
    <div class="service-item between">
      <div class="c-409eff">电话/短信关怀</div>
      <div class="complete-situation">
        完成情况：
        <span class="c-ff6600">1/1</span>
      </div>
    </div>
    <div class="service-item between">
      <div class="c-409eff">康复咨询</div>
      <div class="complete-situation">
        完成情况：
        <span class="c-ff6600">123次</span>
      </div>
    </div>
    <div class="service-item between">
      <div class="c-409eff">健康监测</div>
      <div class="complete-situation">
        完成情况：
        <span class="c-ff6600">123次</span>
      </div>
    </div>
    <div class="service-item between">
      <div class="c-409eff">康复复诊</div>
      <div class="complete-situation">
        完成情况：
        <span class="c-ff6600">1/1</span>
      </div>
    </div>
    <div class="bottom-box">
      <el-button @click="back" type="primary">返回康复计划</el-button>
    </div>
  </div>
</el-dialog>