fls-asp-qr-cunke-intelligent-tutoring/src/views/ResultView.vue

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  onMounted,
  watch,
  computed,
  onBeforeUnmount,
} from "vue";
import NavBarPage from "../components/NavBarPage.vue";
import randarPage from "./result/randarPage.vue";
import { useRoute } from "vue-router";
import { fetchTaskScore } from "./utils/api";
import { Toast } from "vant";

const route = useRoute();

const score = ref(0);
const data = ref(null);
const scoresList = ref(null);
const taskId = computed(() => route.query.conversationId); // 会话ID "2c64eb8b69be432ca0bb9ae55bc78def"
const randarlist = ref([0, 0, 0, 0]);

const nameMapping = {
  introduction_profession: "自我介绍专业性",
  demand_accuracy: "挖掘需求准确性",
  product_advantages: "清晰表达产品优势",
  attract_interest: "吸引客户兴趣",
  penalty_points: "扣分项",
};

const handleResult = async () => {
  let res;
  let shouldContinue = true; // 控制是否继续调用接口的标志

  while (shouldContinue) {
    res = await fetchTaskScore(taskId.value);

    if (res.code !== 200) {
      // 当返回错误时，停止调用接口
      shouldContinue = false;
    } else if (res.body && Object.keys(res.body).length !== 0) {
      // 当res.body有值时，停止调用接口
      data.value = res.body;
      shouldContinue = false;
    } else {
      await new Promise((resolve) => setTimeout(resolve, 3000));
    }
  }
  if (res && res.code === 200 && res.body) {
    const scores = extractScores(res.body);
    score.value = scores.reduce((sum, score) => sum + score, 0);
    scoresList.value = Object.keys(res.body).reduce((acc, key) => {
      //   if (key !== "penalty_points") {
      acc[key] = {
        ...res.body[key],
        name: nameMapping[key], // 添加 name 字段
      };
      //   }
      return acc;
    }, {});

    const obj = extractScores(scoresList.value);
    randarlist.value = Object.values(obj);
  }
};

// 处理“分”字
const extractScores = (data) => {
  return Object.values(data).map((item) => {
    // 去除可能的"分"字，然后转换为整数
    return parseInt(item.score.replace("分", ""), 10);
  });
};

onMounted(() => {
  handleResult();
  window.addEventListener("popstate", function (event) {
    // 执行一些操作，例如关闭当前页面或跳转到其他页面
    window.location.href = "/#/home";
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("popstate", function (event) {
    // 执行一些操作，例如关闭当前页面或跳转到其他页面
    window.location.href = "/#/home";
  });
});
</script>
<template>
  <div class="result" style="overflow: hidden">
    <NavBarPage title="考试" type="home" />
    <div style="height: 46px"></div>
    <div class="score">
      <span>最终得分</span>
      <p class="score-num">
        <span>{{ score }}</span
        >分
      </p>
    </div>
    <div style="height: 9.06rem; visibility: hidden"></div>
    <div class="content">
      <div style="width: 100vw; height: 19.06rem">
        <randarPage :randarList="randarlist" />
      </div>
      <div class="standard">
        <div class="standard-title">
          <img src="../assets/robot.jpg" alt="" />
          <span>评分标准</span>
        </div>
        <div
          class="standard-content"
          v-for="(item, key) in scoresList"
          :key="key"
        >
          <div class="standard-subtitle">
            <span class="pro"
              >{{
                item.name == "扣分项" ? item.name : `${item.name}（50分）`
              }}：</span
            >
            <span>{{ item.score }}</span>
          </div>
          <p>
            <span>得分原因：</span>
            <span>{{ item.reason }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  /* 禁止页面整体滚动 */
}

.result {
  width: 100%;
  height: 100%;
  /* height: 100vh; */
  overflow: hidden;
}

.score {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 9.06rem;
  background-color: rgba(243, 249, 255, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  span {
    display: flex;
    width: 5.06rem;
    height: 2.88rem;
    font-weight: bold;
    line-height: 2.88rem;
    color: rgba(64, 149, 229, 1);
    font-size: 1rem;
    text-align: center;
    font-family: Times New Roman-regular;
  }

  .score-num {
    display: flex;
    align-items: last baseline;
    color: rgba(64, 149, 229, 1);
    font-size: 1rem;

    span {
      display: block;
      width: 5.06rem;
      height: 3.31rem;
      line-height: 4.25rem;
      font-size: 3rem;
      text-align: center;
      font-family: Times New Roman-regular;
    }
  }
}

.content {
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.standard-title {
  display: flex;
  align-items: center;
  padding: 0 0.94rem;
  margin-bottom: 0.63rem;

  img {
    width: 1.5rem;
    height: 1.5rem;
  }

  span {
    display: inline-block;
    width: 4rem;
    height: 1.44rem;
    line-height: 1.44rem;
    margin-left: 0.33rem;
    color: rgba(64, 149, 229, 1);
    font-size: 1rem;
    text-align: center;
    font-family: Times New Roman-regular;
  }
}

.standard-subtitle {
  padding: 0.56rem 1rem;
  height: 1.06rem;
  font-size: 0.88rem;
  font-family: Times New Roman-regular;

  span {
    color: rgba(64, 149, 229, 1);
    font-weight: 600;
  }

  .pro {
    display: inline-block;
    height: 1.06rem;
    line-height: 1.06rem;
    padding: 0 0.3rem;
    font-weight: normal;
    color: rgba(102, 102, 102, 1);
    border-left: 0.3rem solid rgba(64, 149, 229, 1);
  }
}

.standard-content p {
  padding: 0 1.63rem;
  margin-bottom: 0.31rem;
  line-height: 1.25rem;
  color: rgba(102, 102, 102, 1);
  font-size: 0.88rem;
  text-align: left;
  font-family: SourceHanSansSC-bold;
}

.standard-content p span:nth-child(1) {
  font-weight: 600;
}
</style>