Proj_SafePlat_Vue_Sgh5/src/view/dati/daily/datistart.vue

<template>
  <van-sticky>
    <van-nav-bar>
      <!-- <template #left>
        <van-icon name="arrow-left" size="18" @click="goBack" />
      </template> -->
      <template #title> 答题考试 </template>
      <template #right>
        <!-- 提交按钮 -->
        <van-button @click="checkBeforeSubmit" round color="linear-gradient(to right, #18FFFF, #304FFE)"
                    style="height: 30px; width: 80px">交卷</van-button>
      </template>
    </van-nav-bar>
  </van-sticky>
  <van-overlay :show="overlayloading">
    <div class="wrapper">
      <van-loading color="#0094ff"> 加载中... </van-loading>
    </div>
  </van-overlay>

  <div class="quiz-page">
    <div class="question-number">
      {{ activeIndex + 1 }}/{{ questions.length }}
    </div>
    <div v-if="questions.length > 0" class="question-content">
      <!-- 题干 -->
      <p class="kong">
        <img
          :src="getQuestionTypeImage(currentQuestion.category)"
          class="question-type-img"
          alt=""
        />
        {{ currentQuestion.stem }}
      </p>
      <!-- 附件区域：图片或视频 -->
      <div v-if="currentQuestion.fileUrl" class="question-attachment-wrapper">
        <img
          v-if="isImageType(currentQuestion.fileType)"
          :src="currentQuestion.fileUrl"
          alt="题目图片"
          class="media-preview"
        />
        <video
          v-else-if="isVideoType(currentQuestion.fileType)"
          controls
          preload="metadata"
          class="media-preview"
        >
          <source
            :src="currentQuestion.fileUrl"
            :type="getMimeType(currentQuestion.fileType)"
          />
          您的浏览器不支持视频播放。
        </video>
      </div>

      <!-- 单选题 -->
      <div v-if="currentQuestion.category === '单选'">
        <van-radio-group v-model="userAnswers[currentQuestion.id]">
          <van-radio :name="'A'" class="kong">A.{{ currentQuestion.optionA }}</van-radio>
          <van-radio :name="'B'" class="kong">B.{{ currentQuestion.optionB }}</van-radio>
          <van-radio :name="'C'" class="kong">C.{{ currentQuestion.optionC }}</van-radio>
          <van-radio :name="'D'" class="kong" v-if="currentQuestion.optionD">D.
            {{ currentQuestion.optionD }}</van-radio>
          <van-radio :name="'E'" class="kong" v-if="currentQuestion.optionE">E.
            {{ currentQuestion.optionE }}</van-radio>
        </van-radio-group>
      </div>

      <!-- 多选题 -->
      <div v-if="currentQuestion.category === '多选'">
        <van-checkbox-group v-model="userAnswers[currentQuestion.id]" shape="square">
          <van-checkbox :name="'A'" class="kong">A.{{ currentQuestion.optionA }}</van-checkbox>
          <van-checkbox :name="'B'" class="kong">B.{{ currentQuestion.optionB }}</van-checkbox>
          <van-checkbox :name="'C'" class="kong">C.{{ currentQuestion.optionC }}</van-checkbox>
          <van-checkbox :name="'D'" class="kong"
                        v-if="currentQuestion.optionD">D.{{ currentQuestion.optionD }}</van-checkbox>
          <van-checkbox :name="'E'" class="kong"
                        v-if="currentQuestion.optionE">E.{{ currentQuestion.optionE }}</van-checkbox>
        </van-checkbox-group>
      </div>

      <!-- 判断题 -->
      <div v-if="currentQuestion.category === '判断'">
        <van-radio-group v-model="userAnswers[currentQuestion.id]">
          <van-radio :name="'A'" class="kong">A.正确</van-radio>
          <van-radio :name="'B'" class="kong">B.错误</van-radio>
        </van-radio-group>
      </div>
    </div>

    <!-- 底部固定栏 -->
    <div class="footer">
      <van-button @click="prevQuestion" :disabled="activeIndex === 0"
                  style="height: 40px; width: 45%">上一题</van-button>
      <van-button @click="nextQuestion" :disabled="activeIndex === questions.length - 1" style="
          height: 40px;
          width: 45%;
          background-color: var(--van-radio-checked-icon-color);
          border-color: var(--van-radio-checked-icon-color);
          color: #fff;
        ">下一题</van-button>
    </div>

    <!-- 提交前确认弹窗 -->
    <van-dialog v-model:show="confirmSubmitDialog" title="确认交卷" show-cancel-button @confirm="submitForm">
      <p :class="{ 'van-dialog__message': true, 'text-center': true }">
        <span v-if="hasUnanswered">{{ unansweredText }}</span>
        <span v-else>{{ completedText }}</span>
      </p>
    </van-dialog>

    <!-- 结果弹窗 -->
    <van-popup v-model:show="showResult" position="top" style="height: 100%">
      <van-sticky>
        <van-nav-bar title="答题结果" />
      </van-sticky>
      <div style="
          margin-top: 10px;
          margin-left: 20px;
          margin-bottom: 20px;
          font-weight: bold;
        ">
        本次得分：{{ totalScore }}
        <!--取接口成绩-->
      </div>
      <van-divider />
      <!-- 题干 -->
      <div v-for="question in questions" :key="question.id" class="question">
        <p>
          <span v-if="question.category === '单选'">[单选]</span>
          <span v-if="question.category === '多选'">[多选]</span>
          <span v-if="question.category === '判断'">[判断]</span>
          {{ question.stem }}
        </p>
        <!-- 显示提交答案 -->
        <p>
					<span :style="{
              color: Array.isArray(userAnswers[question.id])
                ? userAnswers[question.id].sort().join('') ===
                  question.answer
                  ? '#007aff'
                  : 'red'
                : userAnswers[question.id] === question.answer
                ? '#007aff'
                : 'red',
            }">
						提交答案:{{
              Array.isArray(userAnswers[question.id])
                ? userAnswers[question.id].sort().join("")
                : userAnswers[question.id] || "未作答"
            }}
					</span>
        </p>
        <!-- 显示正确答案 -->
        <p style="color: #007aff">正确答案:{{ question.answer }}</p>
        <div v-if="question.category === '单选'" class="kong">
          <div>A. {{ question.optionA }}</div>
          <div>B. {{ question.optionB }}</div>
          <div>C. {{ question.optionC }}</div>
          <div v-if="question.optionD">D. {{ question.optionD }}</div>
          <div v-if="question.optionE">E. {{ question.optionE }}</div>
        </div>
        <div v-if="question.category === '多选'" class="kong">
          <div>A. {{ question.optionA }}</div>
          <div>B. {{ question.optionB }}</div>
          <div>C. {{ question.optionC }}</div>
          <div v-if="question.optionD">D. {{ question.optionD }}</div>
          <div v-if="question.optionE">E. {{ question.optionE }}</div>
        </div>
        <div v-if="question.category === '判断'" class="kong">
          <div>A.正确</div>
          <div>B.错误</div>
        </div>

        <!-- AI解析按钮和内容 -->
        <div style="margin: 10px 0;">
          <van-button
            type="primary"
            size="small"
            :loading="analysisLoading[question.id]"
            @click="generateAIAnalysis(question,true)"
          >
            {{ aiAnalysis[question.id] ? '重新解析' : 'AI解析' }}
          </van-button>

          <!-- 显示AI解析内容 -->
          <div v-if="aiAnalysis[question.id]" class="ai-analysis-content">
            <div v-html="renderAnalysis(aiAnalysis[question.id])"></div>
          </div>
        </div>

        <van-divider />
      </div>
      <div style="margin-top: 20px; text-align: center; margin-bottom: 20px">
        <van-button class="questionBtn" type="primary" @click="confirmResult">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import {
  onMounted,
  ref,
  getCurrentInstance,
  computed
} from "vue";
import {
  showConfirmDialog,
  showSuccessToast,
  showFailToast,
  showDialog
} from 'vant';
import {
  useRouter,
  useRoute
} from "vue-router";
import {
  examResult,
  formNew,
  myDefaultCourse,
  saveScore,
  sortData,
} from "@/api/dati";
const {
  proxy
} = getCurrentInstance()

const router = useRouter();
const route = useRoute();

const courseId = route.query.courseId;
const userId = route.query.userId;
if (userId == '' || userId == 'undefined') userId = localStorage.getItem('userId')
const todayStr = route.query.todayStr;


// 判断是否为图片类型
const isImageType = (type) => {
  return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes((type || '').toLowerCase());
};

// 判断是否为视频类型
const isVideoType = (type) => {
  return ['mp4', 'mov', 'avi', 'wmv', 'flv', 'webm'].includes((type || '').toLowerCase());
};

// 获取 MIME 类型（用于 video 的 source）
const getMimeType = (type) => {
  const map = {
    mp4: 'video/mp4',
    mov: 'video/quicktime',
    avi: 'video/x-msvideo',
    wmv: 'video/x-ms-wmv',
    flv: 'video/x-flv',
    webm: 'video/webm'
  };
  return map[type?.toLowerCase()] || 'video/mp4';
};

const questions = ref([]);

const userAnswers = ref({});
const activeIndex = ref(0);
const totalScore = ref(0);
const showResult = ref(false);

const confirmSubmitDialog = ref(false);
const hasUnanswered = ref(false);
const unansweredText = "有题目未完成，是否确认交卷？";
const completedText = "已完成所有题目，是否确认交卷？";
const overlayloading = ref(false);
// 在组件挂载时获取试卷
onMounted(async () => {
  overlayloading.value = true;
  await getForm();
  overlayloading.value = false;
});

//获取试卷
const getForm = async () => {
  var url = '/sgsafe/ExamLine/query'
  const query = ref({
    headId: courseId
  })
  var param = {
    params: JSON.stringify(query.value)
  }
  try {
    const res = await proxy.$axios.post(url, param);
    if (res.data.code === 0) {
      questions.value = res.data.data
    } else {
      console.log('操作失败!' + res.data.msg);
    }
  } catch (error) {
    console.log('请求出错:', questions);
  }
};

// 获取当前题目
const currentQuestion = computed(() => {
  return questions.value[activeIndex.value];
});

// 获取题目类型对应的图片路径
import danxuan from '@/assets/img/dx.svg'
import duoxuanImg from '@/assets/img/ksdx.svg'
import panduanImg from '@/assets/img/kspd.svg'
const getQuestionTypeImage = (category) => {
  switch (category) {
    case "单选": // 单选
      return danxuan;
    case "多选": // 多选
      return duoxuanImg;
    case "判断": // 判断
      return panduanImg;
    default:
      return "";
  }
};

//返回答题首页
const goBack = () => {
  router.push({
    path: "/dailyproblem"
  });
};

// 切换到下一题
const nextQuestion = () => {
  if (activeIndex.value < questions.value.length - 1) {
    activeIndex.value++;
  }
};

// 切换到上一题
const prevQuestion = () => {
  if (activeIndex.value > 0) {
    activeIndex.value--;
  }
};


const getUserAnswers = () => {
  let useranswers = [];
  questions.value.forEach((question) => {
    const userAnswer = userAnswers.value[question.id]; // 获取用户的答案
    let userAnswerString;
    if (Array.isArray(userAnswer)) {
      // 多选题，将数组转换为字符串
      userAnswerString = userAnswer.sort().join(""); // 排序并转换为字符串，如 "ABC"
    } else {
      // 单选题，直接是字符串
      userAnswerString = userAnswer || ""; // 如果未选择答案，则设为空字符串
    }
    // 将答案保存到 answers 数组中
    useranswers.push({
      id: question.id, // 题目 ID
      userAnswer: userAnswerString, // 用户的答案
    });
  });
  return useranswers;
};

//交卷
const submitForm = async () => {
  overlayloading.value = true;
  try {
    let answers = getUserAnswers();
    //console.log('answers.value', answers)
    var url = '/sgsafe/ExamLine/appSaveMyScore'
    var param = {
      json: JSON.stringify(
        answers
      )
    }
    try {
      const res = await proxy.$axios.post(url, param);
      if (res.data.code === 0) {
        showSuccessToast("保存成功")
      } else {
        console.log('操作失败!' + res.data.msg);
      }
    } catch (error) {
      console.log('请求出错:', questions);
    }

    //开始判卷
    var url2 = '/sgsafe/Package/doProc'
    var param2 = {
      procName: 'safeplat.sxsp_grade_exam_p',
      param: JSON.stringify([courseId])
    }
    try {
      const res2 = await proxy.$axios.post(url2, param2);
      if (res2.data.code === 0) {
        consle.log("courseId：" + courseId + "判卷完成！")
      } else {
        console.log('操作失败!' + res.data.msg);
      }
    } catch (error) {
      console.log('请求出错:', questions);
    }

    overlayloading.value = false;

    //查询本日答题次数和分数
    var url3 = '/sgsafe/DailyExam/appQueryMyScore'
    const query3 = ref({
      userId: userId,
      examDate: todayStr,
      headId: courseId,
    })
    var param3 = {
      params: JSON.stringify(query3.value)
    }
    const res3 = await proxy.$axios.post(url3, param3);
    if (res3.data.code === 0) {
      console.log(res3.data)
      if (res3.data.data.dailyExamList.length==0){
        var url4='/sgsafe/ExamHead/queryByheadId'
        var param4 = {
          headId: courseId
        }
        const res4 = await proxy.$axios.post(url4, param4);
        if (res4.data.code === 0) {
          totalScore.value = res4.data.data.totalScore;
        }
        showConfirmDialog({
          message: "判卷完成",
          confirmButtonText: "查看本次答题结果",
          cancelButtonText: "退出答题"
        })
          .then(() => {
            showResult.value = true;
          })
          .catch(() => {

            router.replace({
              path: "/dailyproblem"
            });
          })
      }else {
        let times = res3.data.data.dailyExamList[0].examCounts;
        totalScore.value = res3.data.data.headScore;
        showConfirmDialog({
          message: "判卷完成",
          confirmButtonText: "查看本次答题结果",
          cancelButtonText: times == "3" ? "退出答题" : "继续答题",
        })
          .then(() => {
            showResult.value = true;
          })
          .catch(() => {
            if (times == "3") {
              router.replace({
                path: "/dailyproblem"
              });
            } else {
              router.push({
                path: "/dailyproblem"
              });
            }
          });
      }


    } else {
      console.log('操作失败!' + res3.data.msg);
    }

  } catch (error) {
    console.error("出错：", error);
    showFailToast("交卷失败");
  }
};

// 确认结果并返回
const confirmResult = () => {
  showResult.value = false;
  // router.back();
  router.back()
};

// 检查是否所有题目都已作答
const checkBeforeSubmit = () => {
  hasUnanswered.value = questions.value.some((question) => {
    const userAnswer = userAnswers.value[question.id];
    return (
      !userAnswer || (Array.isArray(userAnswer) && userAnswer.length === 0)
    );
  });
  confirmSubmitDialog.value = true;
};

// AI解析功能
// AI解析相关变量
const aiAnalysis = ref({}); // 存储每道题的AI解析内容
const analysisLoading = ref({}); // 存储每道题的解析加载状态
import { fetchHuaweiResponse } from "@/tools/deepseek.js";
// 动态导入依赖
let marked, DOMPurify;

const initMarkdownLibs = async () => {
  try {
    // 尝试导入marked
    const markedModule = await import('marked');
    marked = markedModule.marked || markedModule.default || markedModule;

    // 尝试导入DOMPurify
    const dompurifyModule = await import('dompurify');
    DOMPurify = dompurifyModule.default || dompurifyModule;
  } catch (error) {
    console.warn('Markdown libraries not available, using plain text', error);
    // 如果导入失败，使用基础功能
    marked = {
      parse: (text) => text
    };
    DOMPurify = {
      sanitize: (html) => html
    };
  }
};

// 在组件挂载时初始化
onMounted(() => {
  initMarkdownLibs();
});

// 生成AI解析
const generateAIAnalysis = async (question, force = false) => {
  // 如果该题已有解析且不是强制重新生成，直接返回
  if (aiAnalysis.value[question.id] && !force) {
    return;
  }

  // 如果是重新解析，先清空之前的内容
  if (force) {
    aiAnalysis.value[question.id] = '';
  }

  // 确保依赖已加载
  if (!marked || !DOMPurify) {
    await initMarkdownLibs();
  }

  // 设置加载状态
  analysisLoading.value[question.id] = true;

  try {
    // 构造提示词
    let prompt = `请为以下题目提供详细解析：
题目类型：${question.category}题干：${question.stem}`;

    // 添加选项
    if (question.optionA) prompt += `\nA. ${question.optionA}`;
    if (question.optionB) prompt += `\nB. ${question.optionB}`;
    if (question.optionC) prompt += `\nC. ${question.optionC}`;
    if (question.optionD) prompt += `\nD. ${question.optionD}`;
    if (question.optionE) prompt += `\nE. ${question.optionE}`;

    prompt += `\n正确答案：${question.answer}`;

    // 添加用户答案（如果已作答）
    const userAnswer = userAnswers.value[question.id];
    if (userAnswer) {
      const userAnswerString = Array.isArray(userAnswer)
        ? userAnswer.sort().join("")
        : userAnswer;
      prompt += `\n用户答案：${userAnswerString}`;
    }

    prompt += `\n\n请提供以下内容：
1. 正确答案的解释
2. 为什么其他选项不正确（如果用户答案错误）
3. 相关知识点说明`;

    // 构造消息对象
    const messages = [
      {
        role: "user",
        content: prompt
      }
    ];

    // 调用AI接口
    fetchHuaweiResponse(
      messages,
      (content, isThinking, isEnd) => {
        // 实时更新解析内容
        aiAnalysis.value[question.id] = content;

        // 如果是最终结果，停止加载状态
        if (isEnd) {
          analysisLoading.value[question.id] = false;
        }
      },
      null
    );
  } catch (error) {
    console.error('AI解析生成失败:', error);
    analysisLoading.value[question.id] = false;
    aiAnalysis.value[question.id] = '解析生成失败';
  }
};

// 解析内容转换为HTML
const renderAnalysis = (content) => {
  if (!content) return '';

  try {
    // 确保依赖已加载
    if (!marked || !DOMPurify) {
      return content.replace(/\n/g, '<br>');
    }

    const html = marked.parse ? marked.parse(content) : marked(content);
    return DOMPurify.sanitize ? DOMPurify.sanitize(html) : html;
  } catch (error) {
    console.error('Markdown解析错误:', error);
    return content.replace(/\n/g, '<br>');
  }
};




</script>

<style scoped>
.quiz-page {
  padding: 20px;
}

.question-type-img {
  width: 54px;
  height: 20px;
}

.question {
  margin-left: 20px;
  margin-right: 20px;
}

.kong {
  margin-bottom: 20px;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 10px;
}

.van-dialog__message {
  text-align: center;
}

.questionBtn {
  width: 40%;
}

/* 遮罩 */
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.van-overlay {
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
}

.ai-analysis-content {
  margin-top: 10px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.6;
}

.ai-analysis-content :deep(h1),
.ai-analysis-content :deep(h2),
.ai-analysis-content :deep(h3) {
  margin: 10px 0;
  font-weight: bold;
  font-size: 16px;
}

.ai-analysis-content :deep(p) {
  margin: 8px 0;
}

.ai-analysis-content :deep(ul),
.ai-analysis-content :deep ol {
  padding-left: 20px;
  margin: 8px 0;
}

.ai-analysis-content :deep(li) {
  margin: 4px 0;
}

.ai-analysis-content :deep(code) {
  padding: 2px 4px;
  background-color: #e0e0e0;
  border-radius: 3px;
  font-family: monospace;
}

.ai-analysis-content :deep(pre) {
  padding: 10px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow-x: auto;
}
/* 附件容器：在题干下方，左侧缩进对齐题干文字 */
.question-attachment-wrapper {
  margin: 12px 0 20px 54px; /* 54px = .question-type-img 宽度，确保对齐文字起始位置 */
}

/* 图片 & 视频统一预览 */
.media-preview {
  display: block;
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  background-color: #f8f9fa;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
</style>