postdischarge-ui/src/views/system/record/record.vue

<template>
  <div class="header">
    <div class="topheader">
      <div class="user">
        <img
          class="headsculpture"
          src="../../../assets/manage/touxiang.png"
          alt=""
          v-if="list.sex == 'MALE'"
        />
        <img
          class="headsculpture"
          src="../../../assets/manage/nvtouxiang.png"
          alt=""
          v-if="list.sex == 'FEMALE'"
        />
        <div class="name">
          {{ list.patientName }}
        </div>
        <div class="gender">
          {{ list.sex == "MALE" ? "男" : list.sex == "FEMALE" ? "女" : "" }}
        </div>
        <div class="age">
          {{ list.age }}
        </div>
        <div class="source">
          <div
            class="item"
            style="color: #00e06e; border-color: #00e06e"
            v-if="list.patientSource == 'WE_CHAT_OFFICIAL_ACCOUNT'"
          >
            <img
              src="../../../assets/manage/gzh.png"
              alt=""
              style="width: 24px"
            />
            <div>公众号</div>
          </div>
          <div
            class="item"
            style="color: #339de5; border-color: #339de5"
            v-if="list.patientSource == 'WE_CHAT_APPLET'"
          >
            <img src="../../../assets/manage/xcx.png" alt="" />
            <div>小程序</div>
          </div>
          <div
            class="item"
            style="color: #f4881f; border-color: #f4881f"
            v-if="list.patientSource == 'MANAGE_END'"
          >
            <img src="../../../assets/manage/gld.png" alt="" />
            <div>管理端</div>
          </div>
        </div>
      </div>
      <div class="information">
        <div class="top">
          <div>身份证号：{{ list.cardNo }}</div>
          <div>患者电话：{{ list.patientPhone }}</div>
          <div style="width: 50%">出生日期：{{ list.birthDate }}</div>
        </div>
        <div class="bottom">
          <!-- <div>注册时间：{{ $route.query.createTime }}</div> -->
          <div>家属电话：{{ list.familyMemberPhone }}</div>
          <div style="width: 50%">住址：{{ list.address }}</div>
        </div>
      </div>
    </div>
    <div class="bottomheader">
      <!-- 运动指导 -->
      <!-- <div class="sport">运动指导</div>
      <div class="sports">抗阻运动</div>
      <div class="word">
        抗阳运动可以加强心脏功能，改善血液循环，有效降低脑梗风,险您每周进行2次，每次30分钟抗阳运动。在运动时心率维持,指导如下：
        
      </div> -->
      <!-- <div class="videoleft"><video src=""></video></div>
      <div class="attention">运动注意事项</div>
      <div class="attention">
        1、每次运动前需做热身运动5分钟，运动后需做放松运动5分钟，主要以低强度的有运动如慢步走为主
      </div>
      <div class="attention">
        2、劳逸结合:注意控制锻炼时间，注意劳逸结合，运动后无明显的疲倦感3、循序渐进:循序渐进地进行锻炼，初始以简单、低强度的运动为主，随后可逐渐增加强度和锻炼时间
      </div>
      <div class="attention">
        3、循序渐进:循序渐进地进行锻炼，初始以简单、低强度的运动为主，随后可逐渐增加强度和锻炼时间。
      </div> -->

      <!-- 复诊提醒 -->
      <!-- <div>
        <div class="sport">复诊提醒</div>
        <div class="time">
          <span class="number">1</span>
          复诊时间
        </div>
        <div class="nexttime">您的下次复诊时间为2024-03-26</div>

        <div class="images">
          <image src="../assets/images/profile.jpg"></image>
        </div>
      </div> -->
      <div style="display: flex">
        <!-- 出院记录 -->
        <div style="width: 30%; overflow: auto; height: 500px">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="入院记录" name="first">
              <div>
                {{ list.inHospitalInfo }}
              </div></el-tab-pane
            >
            <el-tab-pane label="手术记录" name="second">
              <div>{{ list.surgicalRecord }}</div>
            </el-tab-pane>
            <el-tab-pane label="出院记录" name="third"
              ><div>{{ list.outHospitalInfo }}</div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 文章模板 -->
        <div
          class="right"
          v-if="$route.query.taskContent == 'PROPAGANDA_ARTICLE'"
        >
          <div class="sport">文章模板:靶向药帮助肺肿瘤人群走向康复!</div>
          <div class="bodytop">
            <div>
              <div class="know">靶向药帮助肺肿瘤人群走向康复!</div>
              <div class="knowlist">
                有种药每天只需服用一到两次，就能在最快的一周内缓解肺肿瘤症状，一个月后，肿瘤就有可能显著缩小，甚至有可能在几个月后实现完全缓解。这就是靶向治疗药物，一种帮助肺肿瘤人群走向康复的神奇药物!
              </div>
              <img src="@/assets/system/userinfo.jpg" alt="" />
              <video src=""></video>
            </div>
          </div>
        </div>
        <!-- 问卷模板 -->
        <div
          class="right"
          v-if="$route.query.taskContent == 'QUESTIONNAIRE_SCALE'"
        >
          <div class="sport">问卷模板: Barthel指数评定问卷</div>
          <div class="words">
            您好!本问卷用于评估日常生活能力，请根据自身日常实际表现选择合适的选项。
          </div>
          <div class="words">
            1.进食【单选题】
            <el-radio-group v-model="radio" class="custom-radio-group">
              <el-radio label="1" class="custom">备选项</el-radio>
              <el-radio label="2" class="custom">备选项</el-radio>
              <el-radio label="3" class="custom">备选项</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- 电话外呼 -->
        <div v-if="$route.query.taskContent == 'PHONE_OUTBOUND'">
          <div class="sport">电话外呼</div>
          <div class="nexttime">话术名称</div>
        </div>
        <!-- 文字提醒 -->
        <div v-if="$route.query.taskContent == 'TEXT_REMIND'">
          <div class="sport">提醒内容:</div>
          <!-- <div class="nexttime">话术名称</div> -->
        </div>
        <!-- 人工随访 -->
        <div v-if="$route.query.taskContent == 'ARTIFICIAL_FOLLOW_UP'">
          <div class="sport">人工随访模板:</div>
          <div class="sport">人工随访模板内容:</div>

          <!-- <div class="nexttime">话术名称</div> -->
        </div>
      </div>
    </div>
  </div>
</template>
    
  <script>
import { selectVisitRecord } from "@/api/system/taskExecuteRecord";
export default {
  name: "patientdetails",
  data() {
    return {
      radio: "1",
      activeName: "first",
      id: "",
      list: [],
    };
  },
  created() {
    console.log(this.$route.query);
    this.id = this.$route.query.patientId;
    this.info();
  },
  methods: {
    info() {
      selectVisitRecord(this.id).then((res) => {
        console.log(res);
        this.list = res.data;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
  <style lang="scss" scoped>
.custom-radio-group {
  display: flex;
  flex-direction: column;
  padding: 10px 0 10px 10px;
  .custom {
    padding: 10px 0 10px 10px;
  }
}
.bodytop {
  position: relative;
  top: 20px;
  // height: 500px;
  width: 400px;
  margin: 0 auto;
  // background: red;f
  overflow: auto;
  border: 1px solid #e2e2e2;
  .titledata {
    margin: 30px 0px 15px 30px;
    top: 14px;
    font-size: 20px;
  }
  .audiotop {
    margin: 10px 0px 10px 30px;
  }
  img {
    // width: 362px;
    // height: 127px;
    margin: 0px 0px 0px 30px;
  }
  .know {
    margin: 11px 0px 10px 30px;
    font-size: 20px;
    font-weight: 550;
  }
  .knowlist {
    margin: 10px 0px 10px 30px;
    font-size: 16px;
  }
}
.right {
  width: 70%;
  height: 500px;
  // background: yellow;
}
.header {
  background-color: #f1f3f5;
  padding-top: 10px;

  ::v-deep .el-tabs__header {
    margin: 0 !important;
    width: 100%;
    // overflow: auto;
    // height: 500px;
    // background: red;
  }

  .bottomheader {
    width: 99%;
    background-color: #fff;
    margin: 10px auto;
    padding: 10px 20px;
    .sport {
      padding: 10px 50px 10px 10px;
      font-size: 20px;
      font-weight: 600;
    }
    .words {
      font-size: 15px;
      padding: 10px 50px 10px 10px;
    }
    .sports {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      font-size: 18px;
      font-weight: 600;
    }
    .word {
      font-size: 14px;
      font-weight: 550;
      padding: 50px 50px 10px 10px;
    }
    .videoleft {
      width: 40%;
      height: 200px;
      background: red;
    }
    .time {
      font-size: 20px;
      font-weight: 550;
      padding: 10px 50px 10px 10px;
    }
    .number {
      width: 25px;
      height: 25px;
      text-align: center;
      display: inline-block;
      color: white;
      background: blue;
      border-radius: 50%;
    }
    .nexttime {
      font-size: 15px;
      padding: 10px 50px 10px 10px;
    }
    .images {
      width: 53%;
      height: 241px;
      margin: 0 auto;
      background: red;
    }
    .attention {
      font-size: 14px;
      font-weight: 550;
      padding: 10px 50px 10px 10px;
    }
    // .videobottom
    // {
    //   font-size: 14px;
    //   font-weight: 550;
    //   padding: 10px 50px 10px 10px;
    // }
  }

  .topheader {
    width: 99%;
    background-color: #fff;
    margin: 0 auto;

    .information {
      display: flex;
      flex-wrap: wrap;
      padding: 10px 20px;
      height: 110px;

      .top,
      .bottom {
        color: #666666;
        width: 100%;
        display: flex;

        div {
          width: 25%;
        }
      }
    }

    .user {
      width: 100%;
      padding: 0 20px;
      display: flex;
      height: 80px;
      align-items: center;
      line-height: 80px;

      .source {
        display: flex;

        .item {
          line-height: 30px;
          font-size: 14px;
          margin-left: 20px;
          border: 1px solid #c7c7c7;
          width: 100px;
          border-radius: 5px;
          justify-content: center;
          height: 30px;
          display: flex;
          align-items: center;

          img {
            margin-right: 10px;
            width: 20px;
            height: 20px;
          }
        }
      }

      .name {
        font-size: 20px;
        padding-left: 12px;
      }

      .gender {
        padding-left: 10px;
      }

      .age {
        padding-left: 10px;
      }

      .headsculpture {
        border-radius: 50%;
        width: 40px;
        height: 40px;
      }
    }
  }
}
</style>