psychological-competence-h5/src/views/user/cognitiveTaskOldTestRecord.vue

<template>
  <div class="app-container">
    <Header />
    <div class="main-container">
      <van-nav-bar left-arrow title="测试结果" @click-left="goBack" />
      <div class="main-outline">
        <div class="top-info">
          <div class="line-name">
            测试者：<span>{{ getUserInfo.petName }}</span>
          </div>
          <div class="line-test-name">
            <!--            {{ type == "0" ? "量表名称" : type == "1" ? "任务名称" : "其它" }}：-->
            <span>{{ tableName }}</span>
          </div>
          <div class="line-test-time">
            测试时间：<span>{{ time }}</span>
          </div>
        </div>
        <PageModule text="分值">
          <table class="inner-table">
            <tr class="table-th">
              <th>项目</th>
              <th>内容</th>
            </tr>
            <!--            {{-->
            <!--              resResult-->
            <!--            }}-->
            <tr v-for="(item, index) in resResult" :key="index">
              <!--              {{-->
              <!--                resResult-->
              <!--              }}-->
              <td class="td-result">{{ item.name }}</td>
              <td class="td-result">{{ item.score }}</td>
            </tr>
          </table>
        </PageModule>

        <div class="report-tip">
          <div class="tip-title">报告阅读说明</div>
          <p class="tip-desc">谢谢您的参与，阅读本报告时，请注意以下内容：</p>
          <!--<p class="tip-content">测评图表可快速帮您掌握报告内容；</p>-->
          <p class="tip-content">本结果仅供参考，不可作为临床诊断的依据；</p>
          <p class="tip-content">
            如结果与你自己或他人感知的有出入，可回忆在测试时是否有事情影响了你，或自己答题时是否有所顾虑；
          </p>
          <p class="tip-content">
            如对报告有不理解的地方，建议向专业资质人员进行咨询。
          </p>
        </div>

        <div class="btnArea">
          <van-button round size="small" type="primary" @click="download"
            >点击下载
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import StackedLine from "@/components/echarts/StackedLine";
import Header from "@/components/header/index.vue";
import PageModule from "@/components/PageModule/index.vue";
import { mapGetters } from "vuex";

export default {
  name: "cognitiveTaskOldTestRecord",
  components: { Header, PageModule },
  data() {
    return {
      name: "",
      tableName: "",
      time: "",

      baseUrl: baseUrl,
      resResult: [],
      userType: "", //用户类
      sex: 0,
      type: "", //量表类型0是量表，1是认知任务
      id: "", //来自测试列表
      from: "", //1-来自首页量表,2-来自测试记录列表页
      testPlanId: "", //来自测试计划
      testResultData: {}
    };
  },
  computed: {
    ...mapGetters({
      getUserInfo: "getUserInfo"
    })
  },
  created() {
    this.id = this.$route.query.id || "";
    this.from = this.$route.query.from || "";
    this.testPlanId = this.$route.query.testPlanId || "";
  },
  mounted() {
    this.inits(this.$route.query.id);
  },
  methods: {
    getDataList(v) {
      // console.log("vvvvv", v);
      v.forEach(item => {
        if (item && item.value[0] && item.value[0] != "") {
          this.resResult.push({
            name: item.name,
            score: item.value[0]
          });
        }
      });
    },

    inits(id) {
      this.$http.get(`getRecordById?id=${id}`, {}, res => {
        //当返回正确的话
        console.log(res.data.userRecordEntity, "res结果页面");
        this.testResultData = res.data;
        if (res && res.code == 200) {
          this.type = res.data?.userRecordEntity.type;
          // console.log(res,"认知任务返回")

          const datas = res.data.userRecordEntity.testResult;
          if (res.data.userRecordEntity.flag === "ProspectiveMemory") {
            // this.getDataList(datas);
            this.resResult.push({
              name: "前瞻性记忆能力",
              score: res.data.userRecordEntity.testResults
            });
          } else {
            const resResultData =
              typeof datas == "string"
                ? JSON.parse(datas)[0].tableContext
                : datas[0].tableContext;

            this.getDataList(resResultData);
          }

          //先获取到测试者
          let str = res.data.userRecordEntity.fileName;
          let testDate = res.data.userRecordEntity.testDate;
          let yearMonthDay = testDate
            .replace("年", "/")
            .replace("月", "/")
            .replace("日", " ")
            .replace("时", ":")
            .replace("分", ":")
            .replace("秒", "");

          this.time = yearMonthDay;
          this.tableName = res.data.userRecordEntity.name;
          let sd = str.split("/");
          let sp = sd[sd.length - 1];
          let a = sp.split("-");

          this.name = res.data.userRecordEntity.phone;
          this.sex = a[4];
        }
      });
    },

    //返回上一级
    goBack() {
      // this.$router.push("/index/scaleTest");
      if (this.testPlanId) {
        //来自测试计划列表
        this.$router.push({
          name: "testPlanClassify",
          params: {
            testPlanId: this.testPlanId
          }
        });
      } else if (this.from == 1) {
        // 来自普通测试列表
        this.$router.push("/index/cognitionTask");
      } else {
        // 来自测试记录列表
        this.$router.push("/testRecords");
      }
    },

    // 下载
    download() {
      window.location.href = `${baseUrl}/result/download/testResult?id=${this.id}`;
    },
    downloadFile() {
      if (this.tableName == "画钟测试") {
        window.open(`${baseUrl}result/download/CDTImg?id=${this.id}`, "_blank");
      }
      window.open(
        `${baseUrl}result/download/testResult?id=${this.id}`,
        "_blank"
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.main-outline {
  overflow-y: auto !important;

  .top-info {
    width: calc(100% - 24px);
    margin: 0 12px;
    height: 136px;
    background: url("~@/assets/image/bg-result-top.png") no-repeat center;
    background-size: 100% 100%;
    overflow: hidden;

    .line-name {
      font-size: 20px;
      color: #8ac962;
      padding-left: 20px;
      margin-top: 40px;
    }

    .line-test-name {
      font-size: 15px;
      color: #333333;
      margin-top: 14px;
      padding-left: 20px;
    }

    .line-test-time {
      font-size: 12px;
      color: #999999;
      margin-top: 4px;
      padding-left: 20px;
    }
  }

  .inner-table {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;

    .table-th {
      height: 32px;
      font-size: 14px;
      background: #8ac962;
      color: #fff;

      th {
        border-bottom: 1px solid white;
        border-right: 1px solid white;
      }
    }

    .td-result {
      height: 14px;
      min-height: 32px;
      padding: 7px;
      font-size: 14px;
      width: 50%;
      background-color: #f0f3f6;
      border-bottom: 1px solid white;
      border-right: 1px solid white;
      text-align: center;
    }
  }

  .report-tip {
    width: calc(100% - 24px);
    margin: 32px 12px 0;
    font-size: 12px;

    .tip-title {
      width: 100px;
      height: 20px;
      font-size: 15px;
      font-weight: 500;
      color: #333333;
      line-height: 20px;
    }

    .tip-desc {
      font-size: 12px;
      color: #999999;
      margin: 4px 0 8px;
    }

    .tip-content {
      font-size: 12px;
      color: #555555;
      line-height: 20px;
      display: list-item;
      list-style-type: disc;
      margin-left: 14px;
    }
  }

  .btnArea {
    margin: 20px 0;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;

    .van-button {
      width: 2.6rem;
    }
  }
}
</style>