psychological-competence/src/views/PersionDetail.vue

<template>
  <div :class="{'content-container': fromFlag === 0}">
    <!-- <Header /> -->
    <div v-if="show" class="content-outline result-card-outline">
      <div class="content-inner">
        <el-image
          class="title-img"
          :src="require('../assets/image/icon-test-result.png')"
          fit="fill"
        />

        <div class="btn-area flex-row">
          <el-button v-if="userType !== '1'"  type="primary" plain round @click="downloadPDF">PDF报告下载</el-button>
          <el-button v-if="flag !== 'PSY_CAPITAL'" type="primary" plain round @click="downloadFile">
            点击下载
          </el-button>
          <!--                <el-button v-if="type == 0 && isGroup" type="primary" round @click="downloadReport">下载报告</el-button>&nbsp;&nbsp;-->
          <el-button type="primary" plain round @click="goBack2()">测试历史记录</el-button>
        </div>

        <div class="result-area">
          <result-title class="result-div" text="测试得分"/>
          <div class="test-top-left">
            <div>
              测试者：
              <span>{{ name }}</span>
              <span class="time">{{ time }}</span>
            </div>
            <div class="lang-to">
              {{ parseInt(type) === 0 ? "量表名称" : parseInt(type) === 1 ? "任务名称" : "其它" }}：
              <span>{{ tableName }}</span>
            </div>
          </div>
          <div class="report-tip">
            报告阅读说明<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;谢谢您的参与，阅读本报告时，请注意以下内容：<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本结果仅供参考，不可作为临床诊断的依据；<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如对报告有不理解的地方，建议向专业资质人员进行咨询。<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如结果与你自己或他人感知的有出入，可回忆在测试时是否有事情影响了你，或自己答题时是否有所顾虑；<br>
          </div>
          <result-title class="result-div" text="分值"/>
          <div v-if="ProspectiveMemory.flag === 'ProspectiveMemory'" class="table-list">
            <span v-for="it in resResult" :key="it" class="table-list-span" >{{it}}</span>
          </div>
          <div v-else class="table-list">
            <table-list :dataList="resResult" />
          </div>
          <div v-if="tableName === '记忆检查测试'" style="margin-top: 30px">
            <div
              id="myChart"
              :style="{ width: '1000px', height: '500px' }"
            />
          </div>
        </div>
      </div>

      <!-- <el-breadcrumb separator="/" style="margin: 20px 15px 0px">
        <el-breadcrumb-item style="cursor: pointer" @click.native="goBack2()"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item style="cursor: pointer" @click.native="go1Back()"
          >测试记录</el-breadcrumb-item
        >
        <el-breadcrumb-item><a href="#">测试结果</a></el-breadcrumb-item>
      </el-breadcrumb> -->
      <!-- <div align="center" class="cardList">
        <h2 style="padding-bottom: 2rem; width: 100%">测评报告</h2>
        <p class="lang-to" style="">
          测试者：<span>{{ name }}</span>
        </p>
        <p class="lang-to">
          名称：<span>{{ tableName }}</span>
        </p>
        <p class="lang-to">
          测试时间：<span>{{ time }}</span>
        </p>
        <table class="gridtable mt20" style="width: 100%">
          <tr>
            <th
              style="min-width: 120px"
              v-for="(item, index) in resResult[0].colNames"
              :key="index"
            >
              {{ item }}
            </th>
          </tr>
          <tr v-for="(item, index) in resResult[0].tableContext" :key="index">
            <td>{{ item.name }}</td>
            <td v-for="(em, i) in item.value" :key="i">{{ em }}</td>
          </tr>
        </table>
        <template v-if="resResult.length > 1">
          <table class="gridtable mt20" style="width: 100%">
            <tr>
              <th
                style="min-width: 120px"
                v-for="(item, index) in resResult[1].colNames"
                :key="index"
              >
                {{ item }}
              </th>
            </tr>
            <tr v-for="(item, index) in resResult[1].tableContext" :key="index">
              <td>{{ item.name }}</td>
              <td v-for="(em, i) in item.value" :key="i">{{ em }}</td>
            </tr>
          </table>
        </template>
        <div v-if="tableName == '记忆检查测试'" style="margin-top: 30px">
          <div id="myChart" :style="{ width: '1000px', height: '500px' }"></div>
        </div>
        <div style="width: 100%">
          <p
            style="
              margin-top: 5rem;
              margin-bottom: 4rem;
              text-algin: center;
              padding-left: 5px;
            "
          >
            &nbsp;
            <el-button type="primary" round
              ><a
                style="text-decoration: none; color: #fff"
                :href="`${baseUrl}/result/download/testResult?id=${id}`"
                >点击下载</a
              ></el-button
            >&nbsp;&nbsp;<el-button type="primary" round @click="goBack2()"
              >返回</el-button
            >
          </p>
        </div>
      </div> -->
    </div>

    <go-back v-if="fromFlag === 0" />
  </div>
</template>
<script>
import * as echarts from "echarts";
import { mapActions } from "vuex";
import ResultTitle from "@/components/ResultTitle/index.vue"
import TableList from "@/components/tableList/index.vue"
import GoBack from "@/components/goBack/index.vue"

export default {
  components: { GoBack, TableList, ResultTitle },
  data() {
    return {
      name: "未知",
      tableName: "xxx量表",
      time: "2021/8/13",
      baseUrl: baseUrl,
      id: "",
      resResult: "",
      ProspectiveMemory:'',
      list: [],
      userType: "", //用户类型
      show: false,
      sex: 0,
      age: 0,
      data: "",
      tabledata1: [],
      tabledata2: [],
      type: "", //量表类型0是量表，1是认知任务,
      flag: '',
      isGroup: process.env.VUE_APP_GROUP,
      fromFlag: 0
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.fromFlag = this.$route.path === '/PersionDetail' ? 0 : 1
  },
  //页面初始化函数
  mounted() {
    this.userType = sessionStorage.getItem("f7a42fe7211f98ac7a60a285ac3a9528");
    this.init();
  },
  methods: {
    ...mapActions({
      setMenuActive: "setMenuActive",
    }),
    go1Back() {
      //管理员用户
      this.$router.push({
        name: "PersonalCenter",
        query: {
          phone: this.$route.query.phone,
        },
      });
    },
    backMain() {
      this.$router.push({
        name: "MainTable",
      });
    },
    getAge(strAge) {
      var birArr = strAge.split("-");
      var birYear = birArr[0];
      var birMonth = birArr[1];
      var birDay = birArr[2];

      d = new Date();
      var nowYear = d.getFullYear();
      var nowMonth = d.getMonth() + 1; //记得加1
      var nowDay = d.getDate();
      var returnAge;

      if (birArr == null) {
        return false;
      }
      var d = new Date(birYear, birMonth - 1, birDay);
      if (
        d.getFullYear() == birYear &&
        d.getMonth() + 1 == birMonth &&
        d.getDate() == birDay
      ) {
        if (nowYear == birYear) {
          returnAge = 0; //
        } else {
          var ageDiff = nowYear - birYear; //
          if (ageDiff > 0) {
            if (nowMonth == birMonth) {
              var dayDiff = nowDay - birDay; //
              if (dayDiff < 0) {
                returnAge = ageDiff - 1;
              } else {
                returnAge = ageDiff;
              }
            } else {
              var monthDiff = nowMonth - birMonth; //
              if (monthDiff < 0) {
                returnAge = ageDiff - 1;
              } else {
                returnAge = ageDiff;
              }
            }
          } else {
            return "出生日期晚于今天，数据有误"; //返回-1 表示出生日期输入错误 晚于今天
          }
        }
        return returnAge;
      } else {
        return "输入的日期格式错误！";
      }
    },

    init() {
      let _this = this;
      this.$http.get(`getRecordById?id=${this.id}`, {}, (res) => {
        //当返回正确的话
        console.log(res,'res')
        if (res.code == 200) {
          let str = res.data.userRecordEntity.fileName;
          let testDate = res.data.userRecordEntity.testDate;
          this.tableName = res.data.userRecordEntity.name;
          this.flag = res.data.userRecordEntity.flag;
          //先获取到测试者

          _this.time = testDate;
          if (str) {
            let sd = str.split("/");
            let sp = sd[sd.length - 1];

            let a = sp.split("-");
            this.name = a[0];
            // this.name = res.data.userRecordEntity.phone
            this.name = sessionStorage.getItem('435e0648d634175c46bd40ac366545a8')
          }
          // this.sex = a[4];
          // let b = a[1] + "-" + a[2] + "-" + a[3];
          // this.age = this.getAge(b);
          // let c = a[4];
          // let d = c.split("年");

          // let e = d[1].split("月");

          // let f = e[1].split("日");

          // let g = f[1].split("时");

          // let h = g[1].split("分");

          // let p = h[1].split("秒");

          // this.time =
          //   d[0] +
          //   "/" +
          //   e[0] +
          //   "/" +
          //   f[0] +
          //   "  " +
          //   g[0] +
          //   ":" +
          //   h[0] +
          //   ":" +
          //   p[0];
          // let q = a[6].split(".");
          // this.tableName = q[0];
          // console.log("tablename:" + this.tableName);
          //新增查看记录列表页不显示页签激活状态,详情页显示对应激活状态-liwenlong-2022-04-06-start
          this.type = res.data?.userRecordEntity.type;
          // this.type == "0"
          //   ? (this.$root.activeIndex = 0)
          //   : this.type == "1"
          //   ? (this.$root.activeIndex = 1)
          //   : (this.$root.activeIndex = -1);
          //新增查看记录列表页不显示页签激活状态,详情页显示对应激活状态-liwenlong-2022-04-06-end
          this.show = true;
        }
        this.ProspectiveMemory = res.data.userRecordEntity
        let uu = JSON.parse(res.data.userRecordEntity.testResult);
        if (this.id == "ff80808181db554d0181f1bbc43300bf") {
          uu[0].tableContext[5].value[1] = "无";
          uu[0].tableContext[6].value[1] = "无";
        }
        console.log(uu,'res.data.testResult')

        this.resResult = uu;

        //if 是记忆测试，就导出多边形所需要的数据
        //表格内的数据导出
        if (this.tableName == "记忆检查测试") {
          console.log("resResult:");
          let grade1 = res.data.userRecordEntity.testResults;
          console.log(res.data.userRecordEntity.testResults);
          //即时记忆总成绩
          let grade2 = grade1.split(";");
          console.log(grade2);
          let grade3 = [];
          for (let i = 0; i < grade2.length; i++) {
            grade3.push(grade2[i].split(":"));
          }
          //分离字符串
          console.log(grade3);
          //转换成数字
          let grade4 = [];
          for (let i = 0; i < grade3.length; i++) {
            grade4.push(parseInt(grade3[i][1]));
          }
          console.log(grade4);
          this.tabledata1 = [
            grade4[2],
            grade4[5],
            grade4[6],
            grade4[9],
            grade4[10],
            grade4[11],
            grade4[14],
          ];
          this.tabledata2 = [
            grade4[20],
            grade4[23],
            grade4[24],
            grade4[27],
            grade4[28],
            0,
            0,
          ];
          console.log(this.tabledata1);
          console.log(this.tabledata2);
          this.drawLine();
        }
      });
    },
    //返回上一级
    goBack2() {
      let userType = sessionStorage.getItem("f7a42fe7211f98ac7a60a285ac3a9528");
      let backPage = this.$route.query.backPage;
      let testPlanId = this.$route.query.testPlanId || "";
      console.log(testPlanId);
      if (userType == "1") {
        if (testPlanId) {
          // this.$router.push({
          //   name: "TestPlan",
          //   params: {},
          // });
          this.$router.push({
            name: "TaskInTestPlan",
            query: {
              testPlanId: testPlanId,
            },
          });
        } else {
          if (backPage == 1) {
            this.setMenuActive("/welcome/PersonalCenter");
            this.$router.push({
              path: "/welcome/PersonalCenter",
            });
          } else {
            this.setMenuActive("/welcome/CognitiveAbility");
            this.$router.push({
              path: "/welcome/CognitiveAbility",
            });
          }
        }
      } else {
        //返回认知任务
        if (this.$route.query.type == 1) {
          this.setMenuActive("/ContainerSys/UserRecords");

          this.$router.push({
            path: "/ContainerSys/SearchCognitiveTaskRecord",
            query: {
              phone: this.$route.query.phone,
              type: 1,
              institutionNo: sessionStorage.getItem(
                "f7a42fe7211f98ac7a60a285ac3a9527"
              ),
            },
          });
        }
        //返回量表
        if (this.$route.query.type == 0) {
          console.log("6666");
          this.setMenuActive("/ContainerSys/SearchScaleRecord");

          this.$router.push({
            path: "/ContainerSys/SearchScaleRecord",
            query: {
              phone: this.$route.query.phone,
              type: 0,
              institutionNo: sessionStorage.getItem(
                "f7a42fe7211f98ac7a60a285ac3a9527"
              ),
            },
          });
        }
      }
    },
    drawLine() {
      this.$nextTick(() => {
        console.log("调用了drawLine方法");
        // 基于准备好的dom，初始化echarts实例
        // var myChart = echarts.init(document.getElementById("myChart"));
        let myChart = this.$echarts.init(document.getElementById("myChart"));
        // 绘制图表
        var option = {
          color: ["#1AAC5C", "#FFE434"],
          title: {
            text: "记忆检查结果图：",
            x: "5%",
          },
          legend: {
            left: "45%",
          },
          radar: [
            {
              radius: 120,
              startAngle: 90,
              splitNumber: 4,
              shape: "circle",
              axisName: {
                formatter: "【{value}】",
                color: "#428BD4",
              },
              splitArea: {
                areaStyle: {
                  color: ["#77EADF", "#26C3BE", "#64AFE9", "#428BD4"],
                  shadowColor: "rgba(0, 0, 0, 0.2)",
                  shadowBlur: 10,
                },
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(211, 253, 250, 0.8)",
                },
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(211, 253, 250, 0.8)",
                },
              },
            },
            {
              indicator: [
                { text: "指向记忆", max: 48 },
                { text: "词汇联想", max: 12 },
                { text: "图像自由回忆", max: 30 },
                { text: "图片联想", max: 30 },
                { text: "人像特点", max: 18 },
                { text: "视觉空间", max: 16 },
                { text: "前瞻记忆", max: 160 },
              ],
              center: ["35%", "60%"],
              radius: 200,
              splitNumber: 0,
              axisName: {
                color: "#fff",
                backgroundColor: "#666",
                borderRadius: 3,
                padding: [3, 5],
              },
            },
          ],
          series: [
            {
              type: "radar",
              radarIndex: 1,
              data: [
                {
                  value: this.tabledata1,
                  name: "即时记忆",
                  symbol: "rect",
                  symbolSize: 12,
                  lineStyle: {
                    type: "dashed",
                  },
                  label: {
                    show: true,
                    formatter: function (params) {
                      return params.value;
                    },
                  },
                  areaStyle: {
                    color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                      {
                        color: "rgba(12, 222, 115, 0.5)",
                        offset: 0,
                      },
                      {
                        color: "rgba(12, 222, 115, 0.5)",
                        offset: 1,
                      },
                    ]),
                  },
                },
                {
                  value: this.tabledata2,
                  name: "延时记忆",
                  label: {
                    show: true,
                    formatter: function (params) {
                      return params.value;
                    },
                  },
                  areaStyle: {
                    color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                      {
                        color: "rgba(255,228,52, 0.5)",
                        offset: 0,
                      },
                      {
                        color: "rgba(255,228,52, 0.5)",
                        offset: 1,
                      },
                    ]),
                  },
                },
              ],
            },
          ],
        };
        option && myChart.setOption(option);
      });
    },

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

    downloadReport() {
      window.open(
        `${baseUrl}result/download/testResultPdf?id=${this.id}`,
        "_blank"
      );
    },
    downloadPDF() {
      window.open(`${baseUrl}result/download/testResultPdf?id=${this.id}`, "_blank");
    },

  },
};
</script>
<style lang="scss" scoped>
html{
  font-size: 100px;
}
.content-outline {
  background-color: transparent;

  .content-inner {
    background-color: white;
    width: calc(100% - 8px);
    margin-left: 8px;
    height: 100%;
    border-radius: 20px;

    .title-img {
      width: 520px;
      height: 56px;
      margin-top: 12px;
      margin-bottom: 12px;
      margin-left: 16px;
    }

    .btn-area {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 42%;
      justify-content: space-around;
      font-size: 12px;

      .el-button {
        font-size: 0.081rem;
        height: 42px;
      }
    }

    .result-area {
      width: calc(100% + 8px);
      height: calc(100% - 96px);
      overflow-y: auto;
      margin-left: -8px;

      .test-top-left {
        width: calc(100% - 78px);
        margin-left: 43px;
        margin-top: 12px;
        color: #222222;
        font-size: 0.086rem;

        .time {
          color: #999999;
          font-size: 0.082rem;
          margin-left: 36px;
        }

        .lang-to {
          margin-top: 4px;
          color: #26B600;
        }
      }

      .report-tip {
        width: calc(100% - 114px);
        padding: 12px 18px;
        border-radius: 12px;
        color: #666666;
        background-color: #F0F3F8;
        font-size: 0.083rem;
        line-height: 0.108rem;
        margin: 10px 35px 10px 43px;
      }

      .table-list {
        width: 600px;
        margin-left: 50%;
        font-size: 13.5px;
        transform: translateX(-50%);
        .table-list-span{
          font-size: 30px;
        }
      }
    }
  }
}
.cardList {
  width: 100%;
  display: block;
  text-align: center;
}
.cardList ul li {
  padding: 20px 15px;
  box-sizing: border-box;
  display: flex;
  text-align: left;
  line-height: 1.6;
  cursor: pointer;
  border-bottom: 0.5px solid #898989;
}

.cardList ul li img {
  width: 120px;
  height: 75px;
  margin-right: 15px;
}

.cardList ul li img {
  width: 120px;
  height: 75px;
  margin-right: 15px;
}

.cardList ul li h2 {
  font-size: 20px;
  color: #333333;
}

.cardList ul li p {
  font-size: 16px;
  color: #666666;
}

.cardList ul li .content {
  width: 600px;
  font-size: 14px;
  display: -webkit-box;
  color: #898989;
}

.pageNationBox {
  padding: 20px 10px;
}
.view-text {
  /**
      思路：
      1.设置inline-block属相
      2.强制不换行
      3.固定高度
      4.隐藏超出部分
      5.显示“……”
    */
  display: inline-block;
  word-break: keep-all;
  white-space: nowrap;
  width: 960px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.imgSiz {
  width: 120px;
  height: 75px;
  margin-right: 15px;
}
.widthTest {
  display: block;
  width: 80%;
  text-align: center;
  margin-left: 10%;
}
.wt1 {
  width: 80%;
}

/* table.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  color: #333333;
  border: 1px solid #ebeef5;
}
table.gridtable th {
  border-width: 1px;
  padding: 12px;
  font-weight: 600;
  border: 1px solid #ebeef5;
  background: rgb(238, 241, 246);
}
table.gridtable td {
  padding: 12px;
  border: 1px solid #ebeef5;
  background-color: #ffffff;
} */
.test-mid {
  display: inline-block;
  text-align: center;
  width: 720px;
  height: auto;
  /* height: 975px; */
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
}
.test-img {
  width: 720px;
  display: inline-block;
  text-align: center;
  position: absolute;
  margin-top: -20px;
}
.tr-result {
  height: 40px;
}
.td-result {
  width: 50%;
  padding-top: 8px;
  border: 1px solid #e8f1f2;
}

</style>