97
src/oj/problem/composables/useFlowchartEvaluation.ts
Normal file
97
src/oj/problem/composables/useFlowchartEvaluation.ts
Normal file
@@ -0,0 +1,97 @@
|
||||
import { ref } from "vue"
|
||||
import { useMessage } from "naive-ui"
|
||||
import {
|
||||
useFlowchartWebSocket,
|
||||
type FlowchartEvaluationUpdate,
|
||||
} from "shared/composables/websocket"
|
||||
|
||||
export interface EvaluationResult {
|
||||
score?: number
|
||||
grade?: string
|
||||
feedback?: string
|
||||
suggestions?: string
|
||||
criteriaDetails?: any
|
||||
}
|
||||
|
||||
export interface SubmissionStatus {
|
||||
status: string
|
||||
submission_id: string
|
||||
created_time?: string
|
||||
}
|
||||
|
||||
export function useFlowchartEvaluation() {
|
||||
const message = useMessage()
|
||||
|
||||
const evaluationResult = ref<EvaluationResult | null>(null)
|
||||
const submissionStatus = ref<SubmissionStatus | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
// 处理 WebSocket 消息
|
||||
const handleWebSocketMessage = (data: FlowchartEvaluationUpdate) => {
|
||||
console.log("收到流程图评分更新:", data)
|
||||
|
||||
if (data.type === "flowchart_evaluation_completed") {
|
||||
loading.value = false
|
||||
evaluationResult.value = {
|
||||
score: data.score,
|
||||
grade: data.grade,
|
||||
feedback: data.feedback,
|
||||
}
|
||||
submissionStatus.value = null // 清除状态
|
||||
message.success(`流程图评分完成！得分: ${data.score}分 (${data.grade}级)`)
|
||||
} else if (data.type === "flowchart_evaluation_failed") {
|
||||
console.log("处理评分失败消息")
|
||||
loading.value = false
|
||||
submissionStatus.value = null // 清除状态
|
||||
message.error(`流程图评分失败: ${data.error}`)
|
||||
} else {
|
||||
console.log("未知的消息类型:", data.type)
|
||||
}
|
||||
}
|
||||
|
||||
// 创建 WebSocket 连接
|
||||
const { connect, disconnect, subscribe } = useFlowchartWebSocket(
|
||||
handleWebSocketMessage,
|
||||
)
|
||||
|
||||
// 订阅提交更新
|
||||
const subscribeToSubmission = (submissionId: string) => {
|
||||
console.log("开始订阅WebSocket更新")
|
||||
subscribe(submissionId)
|
||||
|
||||
// 设置评分状态显示
|
||||
submissionStatus.value = {
|
||||
status: "processing",
|
||||
submission_id: submissionId,
|
||||
created_time: new Date().toISOString(),
|
||||
}
|
||||
}
|
||||
|
||||
// 清除结果
|
||||
const clearResult = () => {
|
||||
evaluationResult.value = null
|
||||
submissionStatus.value = null
|
||||
}
|
||||
|
||||
// 设置加载状态
|
||||
const setLoading = (value: boolean) => {
|
||||
loading.value = value
|
||||
}
|
||||
|
||||
// 设置评估结果
|
||||
const setEvaluationResult = (result: EvaluationResult) => {
|
||||
evaluationResult.value = result
|
||||
}
|
||||
|
||||
return {
|
||||
evaluationResult,
|
||||
submissionStatus,
|
||||
loading,
|
||||
connect,
|
||||
disconnect,
|
||||
subscribeToSubmission,
|
||||
clearResult,
|
||||
setLoading,
|
||||
setEvaluationResult,
|
||||
}
|
||||
}
|
||||
@@ -1,98 +1,18 @@
|
||||
import { ref, watch } from "vue"
|
||||
import { ref } from "vue"
|
||||
import { useMessage } from "naive-ui"
|
||||
import {
|
||||
useFlowchartWebSocket,
|
||||
type FlowchartEvaluationUpdate,
|
||||
} from "shared/composables/websocket"
|
||||
|
||||
export interface EvaluationResult {
|
||||
score?: number
|
||||
grade?: string
|
||||
feedback?: string
|
||||
suggestions?: string
|
||||
criteriaDetails?: any
|
||||
}
|
||||
|
||||
export interface SubmissionStatus {
|
||||
status: string
|
||||
submission_id: string
|
||||
created_time?: string
|
||||
}
|
||||
import { submitFlowchart, getCurrentProblemFlowchartSubmission } from "oj/api"
|
||||
import { useProblemStore } from "oj/store/problem"
|
||||
import { utoa } from "utils/functions"
|
||||
import { useMermaidConverter } from "./useMermaidConverter"
|
||||
import { useFlowchartEvaluation } from "./useFlowchartEvaluation"
|
||||
|
||||
export function useFlowchartSubmission() {
|
||||
const message = useMessage()
|
||||
const problemStore = useProblemStore()
|
||||
const { problem } = toRefs(problemStore)
|
||||
|
||||
const evaluationResult = ref<EvaluationResult | null>(null)
|
||||
const submissionStatus = ref<SubmissionStatus | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
// 处理 WebSocket 消息
|
||||
const handleWebSocketMessage = (data: FlowchartEvaluationUpdate) => {
|
||||
console.log("收到流程图评分更新:", data)
|
||||
|
||||
if (data.type === "flowchart_evaluation_completed") {
|
||||
loading.value = false
|
||||
evaluationResult.value = {
|
||||
score: data.score,
|
||||
grade: data.grade,
|
||||
feedback: data.feedback,
|
||||
}
|
||||
submissionStatus.value = null // 清除状态
|
||||
message.success(`流程图评分完成！得分: ${data.score}分 (${data.grade}级)`)
|
||||
} else if (data.type === "flowchart_evaluation_failed") {
|
||||
console.log("处理评分失败消息")
|
||||
loading.value = false
|
||||
submissionStatus.value = null // 清除状态
|
||||
message.error(`流程图评分失败: ${data.error}`)
|
||||
} else {
|
||||
console.log("未知的消息类型:", data.type)
|
||||
}
|
||||
}
|
||||
|
||||
// 创建 WebSocket 连接
|
||||
const { connect, disconnect, subscribe, status } = useFlowchartWebSocket(
|
||||
handleWebSocketMessage,
|
||||
)
|
||||
|
||||
// 监听WebSocket状态变化
|
||||
watch(
|
||||
status,
|
||||
(newStatus) => {
|
||||
console.log("WebSocket状态变化:", newStatus)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
// 订阅提交更新
|
||||
const subscribeToSubmission = (submissionId: string) => {
|
||||
console.log("开始订阅WebSocket更新")
|
||||
subscribe(submissionId)
|
||||
|
||||
// 设置评分状态显示
|
||||
submissionStatus.value = {
|
||||
status: "processing",
|
||||
submission_id: submissionId,
|
||||
created_time: new Date().toISOString(),
|
||||
}
|
||||
}
|
||||
|
||||
// 清除结果
|
||||
const clearResult = () => {
|
||||
evaluationResult.value = null
|
||||
submissionStatus.value = null
|
||||
}
|
||||
|
||||
// 设置加载状态
|
||||
const setLoading = (value: boolean) => {
|
||||
loading.value = value
|
||||
}
|
||||
|
||||
// 设置评估结果
|
||||
const setEvaluationResult = (result: EvaluationResult) => {
|
||||
evaluationResult.value = result
|
||||
}
|
||||
|
||||
return {
|
||||
const { convertToMermaid } = useMermaidConverter()
|
||||
const {
|
||||
evaluationResult,
|
||||
submissionStatus,
|
||||
loading,
|
||||
@@ -102,5 +22,90 @@ export function useFlowchartSubmission() {
|
||||
clearResult,
|
||||
setLoading,
|
||||
setEvaluationResult,
|
||||
} = useFlowchartEvaluation()
|
||||
|
||||
// 提交次数
|
||||
const submissionCount = ref(0)
|
||||
|
||||
// 存储流程图数据
|
||||
const myFlowchartZippedStr = ref("")
|
||||
const myMermaidCode = ref("")
|
||||
|
||||
// 检查当前问题的流程图提交状态
|
||||
const checkCurrentSubmissionStatus = async () => {
|
||||
if (!problem.value?.id) return
|
||||
|
||||
const { data } = await getCurrentProblemFlowchartSubmission(
|
||||
problem.value.id,
|
||||
)
|
||||
const submission = data.submission
|
||||
submissionCount.value = data.count
|
||||
if (submission && submission.status === 2) {
|
||||
myFlowchartZippedStr.value = data.submission.flowchart_data.data
|
||||
myMermaidCode.value = data.submission.mermaid_code
|
||||
setEvaluationResult({
|
||||
score: submission.ai_score,
|
||||
grade: submission.ai_grade,
|
||||
feedback: submission.ai_feedback,
|
||||
suggestions: submission.ai_suggestions,
|
||||
criteriaDetails: submission.ai_criteria_details,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 提交流程图
|
||||
const submitFlowchartData = async (flowchartEditorRef: any) => {
|
||||
if (!flowchartEditorRef?.value) return
|
||||
|
||||
// 获取流程图的JSON数据
|
||||
const flowchartData = flowchartEditorRef.value.getFlowchartData()
|
||||
|
||||
if (flowchartData.nodes.length === 0 || flowchartData.edges.length === 0) {
|
||||
message.error("流程图节点或边不能为空")
|
||||
return
|
||||
}
|
||||
|
||||
const mermaidCode = convertToMermaid(flowchartData)
|
||||
const compressed = utoa(JSON.stringify(flowchartData))
|
||||
|
||||
setLoading(true)
|
||||
clearResult() // 清除之前的结果
|
||||
|
||||
try {
|
||||
const response = await submitFlowchart({
|
||||
problem_id: problem.value!.id,
|
||||
mermaid_code: mermaidCode,
|
||||
flowchart_data: {
|
||||
compressed: true,
|
||||
data: compressed,
|
||||
},
|
||||
})
|
||||
|
||||
// 获取提交ID并订阅更新
|
||||
const submissionId = response.data.submission_id
|
||||
|
||||
if (submissionId) {
|
||||
subscribeToSubmission(submissionId)
|
||||
}
|
||||
|
||||
message.success("流程图已提交，请耐心等待评分")
|
||||
} catch (error) {
|
||||
setLoading(false)
|
||||
message.error("流程图提交失败")
|
||||
console.error("提交流程图失败:", error)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
evaluationResult,
|
||||
submissionStatus,
|
||||
loading,
|
||||
submissionCount,
|
||||
myFlowchartZippedStr,
|
||||
myMermaidCode,
|
||||
connect,
|
||||
disconnect,
|
||||
checkCurrentSubmissionStatus,
|
||||
submitFlowchartData,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,108 +0,0 @@
|
||||
import { ref } from "vue"
|
||||
import { useMessage } from "naive-ui"
|
||||
import { submitFlowchart, getCurrentProblemFlowchartSubmission } from "oj/api"
|
||||
import { useProblemStore } from "oj/store/problem"
|
||||
import { atou, utoa } from "utils/functions"
|
||||
import { useMermaidConverter } from "./useMermaidConverter"
|
||||
import { useFlowchartSubmission } from "./useFlowchartSubmission"
|
||||
|
||||
export function useFlowchartSubmit() {
|
||||
const message = useMessage()
|
||||
const problemStore = useProblemStore()
|
||||
const { problem } = toRefs(problemStore)
|
||||
|
||||
const { convertToMermaid } = useMermaidConverter()
|
||||
const {
|
||||
evaluationResult,
|
||||
submissionStatus,
|
||||
loading,
|
||||
connect,
|
||||
disconnect,
|
||||
subscribeToSubmission,
|
||||
clearResult,
|
||||
setLoading,
|
||||
setEvaluationResult,
|
||||
} = useFlowchartSubmission()
|
||||
|
||||
// 提交次数
|
||||
const submissionCount = ref(0)
|
||||
|
||||
// 存储流程图数据
|
||||
const myFlowchartZippedStr = ref("")
|
||||
|
||||
// 检查当前问题的流程图提交状态
|
||||
const checkCurrentSubmissionStatus = async () => {
|
||||
if (!problem.value?.id) return
|
||||
|
||||
const { data } = await getCurrentProblemFlowchartSubmission(
|
||||
problem.value.id,
|
||||
)
|
||||
const submission = data.submission
|
||||
submissionCount.value = data.count
|
||||
if (submission && submission.status === 2) {
|
||||
myFlowchartZippedStr.value = data.submission.flowchart_data.data
|
||||
setEvaluationResult({
|
||||
score: submission.ai_score,
|
||||
grade: submission.ai_grade,
|
||||
feedback: submission.ai_feedback,
|
||||
suggestions: submission.ai_suggestions,
|
||||
criteriaDetails: submission.ai_criteria_details,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 提交流程图
|
||||
const submitFlowchartData = async (flowchartEditorRef: any) => {
|
||||
if (!flowchartEditorRef?.value) return
|
||||
|
||||
// 获取流程图的JSON数据
|
||||
const flowchartData = flowchartEditorRef.value.getFlowchartData()
|
||||
|
||||
if (flowchartData.nodes.length === 0 || flowchartData.edges.length === 0) {
|
||||
message.error("流程图节点或边不能为空")
|
||||
return
|
||||
}
|
||||
|
||||
const mermaidCode = convertToMermaid(flowchartData)
|
||||
const compressed = utoa(JSON.stringify(flowchartData))
|
||||
|
||||
setLoading(true)
|
||||
clearResult() // 清除之前的结果
|
||||
|
||||
try {
|
||||
const response = await submitFlowchart({
|
||||
problem_id: problem.value!.id,
|
||||
mermaid_code: mermaidCode,
|
||||
flowchart_data: {
|
||||
compressed: true,
|
||||
data: compressed,
|
||||
},
|
||||
})
|
||||
|
||||
// 获取提交ID并订阅更新
|
||||
const submissionId = response.data.submission_id
|
||||
|
||||
if (submissionId) {
|
||||
subscribeToSubmission(submissionId)
|
||||
}
|
||||
|
||||
message.success("流程图已提交，请耐心等待评分")
|
||||
} catch (error) {
|
||||
setLoading(false)
|
||||
message.error("流程图提交失败")
|
||||
console.error("提交流程图失败:", error)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
evaluationResult,
|
||||
submissionStatus,
|
||||
loading,
|
||||
submissionCount,
|
||||
myFlowchartZippedStr,
|
||||
connect,
|
||||
disconnect,
|
||||
checkCurrentSubmissionStatus,
|
||||
submitFlowchartData,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user