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

<div class="copd-service-record-box">
  <div class="service-base-info">
    <div class="base-title ki-title ta-title">
      基本信息
    </div>
    <div class="base-content">
      <div class="base-info-item">
        姓名：张三
      </div>
      <div class="base-info-item">
        性别：男
      </div>
      <div class="base-info-item">
        证件号码：359603196101017560
      </div>
      <div class="base-info-item">
        联系电话：18522222222
      </div>
      <div class="base-info-item">
        下转状态：已下转
      </div>
      <div class="base-info-item">
        接收状态：已接收
      </div>
      <div class="base-info-item">
        接收医院：湖里区禾山街道卫生服务中心
      </div>
      <div class="base-info-item">
        接收医生：黄琴
      </div>
    </div>
  </div>
  <div class="service-record-timeline">
    <div class="title">服务记录</div>
    <div class="record-list time-line">
      <div class="timeline">
        <div v-for="(event, eI) in events" :key="eI" class="timeline-item"
          :class="{'timeline-item-blue-dot': event.title != null}">
          <div class="timeline-time" :id="'left-' + eI">{{ event.date }}</div>
          <div class="timeline-content" v-if="event.title" :id="'right-' + eI">
            <div class="data-item" v-for="(data, index) in 3" :key="index">
              <!-- TODO 根据记录的类型显示不同的记录标题 -->
              <div class="data-title">
                下转患者
              </div>
              <div class="data-cont">
                <div style="width: 25%;" v-for="(re, i ) in 20" :key="i">
                  <span style="color: #9fa2a8">介四个字：</span>
                  <span style="color: #656565">
                    <template v-if="i% 3 == 0">——</template>
                    <template v-else>这是数据值，他可能会很长</template>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="cops-service-record-bottom-box">
    <el-button>返回</el-button>
  </div>
  <el-dialog title="随访详情" :visible.sync="dialog" width="50%">
    <div class="copd-follow-up-dialog-box">
      <div class="copd-bb-record-info">
        <div class="title ki-title ta-title">
          随访信息
        </div>
        <div class="copd-bb-base-content">
          <div class="copd-bb-base-info-item">
            随访时间：2023-05-11 16:35:00
          </div>
          <div class="copd-bb-base-info-item">
            随访医生：黄琴
          </div>
          <div class="copd-bb-base-info-item">
            湖里区禾山街道卫生服务中心
          </div>
        </div>
      </div>
      <div class="copd-bb-record-info">
        <div class="title ki-title">
          基本信息
        </div>
        <div class="copd-bb-base-content">
          <div class="copd-bb-base-info-item">
            姓名：张三
          </div>
          <div class="copd-bb-base-info-item">
            性别：男
          </div>
          <div class="copd-bb-base-info-item">
            出生日期：1961-03-04
          </div>
          <div class="copd-bb-base-info-item">
            证件类型：身份证
          </div>
          <div class="copd-bb-base-info-item">
            证件号码：359603196101017560
          </div>
          <div class="copd-bb-base-info-item">
            联系电话：18522222222
          </div>
          <div class="copd-bb-base-info-item">
            现住地址：福建省厦门市湖里区禾山街道伟星城市之光1栋1单元3203室
          </div>
          <div class="copd-bb-base-info-item">
            户籍地址：福建省厦门市湖里区禾山街道伟星城市之光1栋1单元3203室
          </div>
        </div>
      </div>
      <div class="copd-bb-record-info">
        <div class="title ki-title  ta-title">
          随访情况
        </div>
        <div class="copd-bb-base-content">
          <div class="copd-bb-base-info-item">
            生存状态：
          </div>
          <div class="copd-bb-base-info-item">
            生存状态：
          </div>
          <div class="copd-bb-base-info-item">
            慢阻肺首次诊断时间：2022-03-03
          </div>
          <div class="copd-bb-base-info-item">
            慢阻肺首次诊断地区：
          </div>
          <div class="copd-bb-base-info-item">
            慢阻肺首次诊断机构级别
          </div>
          <div class="copd-bb-base-info-item">
            是否做过肺功能检查
          </div>
          <div class="copd-bb-base-info-item">
            是否做过胸部CT或X线检查：
          </div>
          <div class="copd-bb-base-info-item">
            是否抽烟：
          </div>
          <div class="copd-bb-base-info-item">
            是否饮酒：
          </div>
        </div>
      </div>
      <div class="copd-bb-record-info">
        <div class="title ki-title ta-title">
          死亡情况
        </div>
        <div class="copd-bb-base-content">
          <div class="copd-bb-base-info-item">
            死亡情况：2023-02-02
          </div>
          <div class="copd-bb-base-info-item">
            死亡时间：自然死亡
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关闭</el-button>
    </span>
  </el-dialog>
</div>