feat:完成分析页面整体和逐句分析展示雏形

src/apis/evaluation.ts

@@ -0,0 +1,50 @@
+import axiosInstance from "@/apis/axios.config";
+
+const EVALUATION_PREFIX = "/api/evaluation"
+
+const evaluationApis = {
+    overAllEvaluation(assignmentId: number, studentId: number){
+        return axiosInstance.post(`${EVALUATION_PREFIX}/overall`, {}, {
+            params: {
+                assignmentId,
+                studentId
+            }
+        })
+    },
+    sentenceEvaluation(assignmentId: number, studentId: number){
+        return axiosInstance.post(`${EVALUATION_PREFIX}/sentence`, {}, {
+            params: {
+                assignmentId,
+                studentId
+            }
+        })
+    },
+    getOverall(assignmentId: number, studentId: number, version: number){
+        return axiosInstance.get(`${EVALUATION_PREFIX}/select/overall`, {
+            params: {
+                assignmentId,
+                studentId,
+                version
+            }
+        })
+    },
+    getSentence(assignmentId: number, studentId: number, version: number){
+        return axiosInstance.get(`${EVALUATION_PREFIX}/select/sentence`, {
+            params: {
+                assignmentId,
+                studentId,
+                version
+            }
+        })
+    },
+    getVersionList(assignmentId: number, studentId: number){
+        return axiosInstance.get(`${EVALUATION_PREFIX}/record/list`, {
+            params: {
+                assignmentId,
+                studentId
+            }
+        })
+    },
+}
+
+export default evaluationApis

src/apis/index.ts

@@ -7,6 +7,7 @@ import engagementApis from "@/apis/engagement";
 import assignmentApis from "@/apis/assignment";
 import courseApis from "@/apis/course";
 import fileApis from "@/apis/file";
+import evaluationApis from "@/apis/evaluation";
 
 
 const apis = {
@@ -18,7 +19,8 @@ const apis = {
     ...dictApis,
     ...assignmentApis,
     ...courseApis,
-    ...fileApis
+    ...fileApis,
+    ...evaluationApis,
 }
 
 // hook

src/router/index.ts

@@ -80,6 +80,11 @@ const router = createRouter({
           name: 'edit',
           component: () => import('../views/EditPage/EditPage.vue')
         },
+        {
+          path: 'assignment/AIEvaluation',
+          name: 'AIEvaluation',
+          component: () => import('../views/AIEvaluationPage/AIEvaluationPage.vue')
+        },
         {
           path: 'assignment/:assignmentId/correct',
           name: 'correct',

src/types/evaluation.ts

@@ -0,0 +1,30 @@
+// 定义 Evaluation 接口
+interface Evaluation {
+    id?: number; // 使用可选属性，因为可能是自增 ID
+    studentId: number;
+    assignmentId: number;
+    version?: number; // 使用可选属性，根据需求可能在创建时不指定
+}
+
+// 定义 OverallEvaluation 接口
+interface OverallEvaluation {
+    id?: number; // 使用可选属性，因为可能是自增 ID
+    studentId: number;
+    assignmentId: number;
+    content: string;
+    version?: number; // 使用可选属性，根据需求可能在创建时不指定
+    evaluation?: string; // 使用可选属性，根据需求可能在创建时不指定
+}
+
+// 定义 SentenceEvaluation 接口
+interface SentenceEvaluation {
+    id?: number; // 使用可选属性，因为可能是自增 ID
+    studentId: number;
+    assignmentId: number;
+    no: number;
+    content: string;
+    sentence: string;
+    evaluation?: string; // 使用可选属性，根据需求可能在创建时不指定
+    version?: number; // 使用可选属性，根据需求可能在创建时不指定
+    type?: string; // 使用可选属性，根据需求可能在创建时不指定
+}

src/views/AIEvaluationPage/AIEvaluationPage.vue

@@ -0,0 +1,234 @@
+<template>
+  <div style="display: flex;">
+    <el-card style="width: 40%; height: 90vh; margin: 10px; position: relative;" shadow="never">
+      <div style="display: flex;justify-content: center;align-items: center;width: 100px; height: 50px; background-color:var(--system-color); position: absolute; top: 20px; left: 0; clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%);">
+        <span style="margin-left: -20px;color: white">原文</span>
+      </div>
+      <div style="white-space: pre-wrap; margin-top: 80px; line-height: 30px">
+        <el-scrollbar height="800px">
+          <span style="position: relative;">
+            <span v-for="sentenceEvaluation in data.sentenceEvaluationList"
+                  :key="sentenceEvaluation.id"
+                  :style="{ 'text-decoration': 'underline', 'text-decoration-color': 'pink', 'text-decoration-thickness': '3px', 'text-decoration-style': 'dashed', 'background-color': sentenceEvaluation.id === highlightSentenceId? 'rgba(255, 192, 203, 0.3)' : 'transparent' }">
+              {{ sentenceEvaluation.sentence }}
+            </span>
+          </span>
+        </el-scrollbar>
+      </div>
+    </el-card>
+    <div style="width: 40%; margin: 10px; height: 88vh;">
+      <div class="combined-box">
+        <div style="display: flex">
+          <div
+              class="trapezoid"
+              :class="{ active: selected === 'trapezoid' }"
+              @click="selected = 'trapezoid'"
+          >
+            整体评价
+          </div>
+          <div
+              class="trapezoid2"
+              :class="{ active: selected === 'trapezoid2' }"
+              @click="selected = 'trapezoid2'"
+          >
+            逐句评价
+          </div>
+        </div>
+        <template v-if="selected === 'trapezoid'">
+          <div class="rectangle">
+            <div style="display: flex;align-items: flex-start;margin-bottom: 15px;">
+              <div>
+                <!--展示头像-->
+                <el-avatar src="@/image/404.jpg" :size="32" :shape="'circle'">
+                </el-avatar>
+              </div>
+              <div style="margin-left: 15px">
+                <!--名字-->
+                <div style="margin-bottom: 2px">SEEAI系统</div>
+                <!--内容-->
+                <div style="background-color: #f0f0f0;padding: 8px 12px;border-radius: 16px;white-space: pre-line;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);">
+                  {{ data.overallEvaluation }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="rectangle">
+            <el-scrollbar height="800px">
+              <div style="display: flex; flex-direction: column;">
+                <el-card v-for="sentenceEvaluation in data.sentenceEvaluationList"
+                         :key="sentenceEvaluation.id"
+                         style="cursor: pointer; margin-bottom: 10px; position: relative;" shadow="hover"
+                         @mouseenter="highlightSentenceId = sentenceEvaluation.id"
+                         @mouseleave="highlightSentenceId = sentenceEvaluation.id"
+                >
+                  <div style="display: flex;justify-content: center;align-items: center;width: 20px; height: 100%; background-color: pink; position: absolute; top: 0; left: calc(100% - 20px)">
+                  </div>
+                  <div style="padding-right: 30px">
+                    {{ sentenceEvaluation.evaluation }}
+                  </div>
+                </el-card>
+              </div>
+            </el-scrollbar>
+          </div>
+        </template>
+      </div>
+    </div>
+<!--    <el-tabs style="width: 30%; margin: 10px; padding: 10px; background-color:#fff;" type="border-card">-->
+<!--      <el-tab-pane>-->
+<!--        <template #label>-->
+<!--        <span class="custom-tabs-label">-->
+<!--          <span>整体评价</span>-->
+<!--        </span>-->
+<!--        </template>-->
+<!--        整体评价-->
+<!--      </el-tab-pane>-->
+<!--      <el-tab-pane>-->
+<!--        <template #label>-->
+<!--        <span class="custom-tabs-label">-->
+<!--          <span>逐句评价</span>-->
+<!--        </span>-->
+<!--        </template>-->
+<!--        <div style="display: flex; flex-direction: column;">-->
+<!--          <el-card v-for="sentenceEvaluation in data.sentenceEvaluationList"-->
+<!--                   :key="sentenceEvaluation.id"-->
+<!--                   style="cursor: pointer; margin-bottom: 10px; position: relative;" shadow="hover"-->
+<!--                   @mouseenter="highlightSentenceId = sentenceEvaluation.id"-->
+<!--                   @mouseleave="highlightSentenceId = sentenceEvaluation.id"-->
+<!--          >-->
+<!--            <div style="display: flex;justify-content: center;align-items: center;width: 20px; height: 100%; background-color: pink; position: absolute; top: 0; left: calc(100% - 20px)">-->
+<!--            </div>-->
+<!--            <div style="padding-right: 30px">-->
+<!--              {{ sentenceEvaluation.evaluation }}-->
+<!--            </div>-->
+<!--          </el-card>-->
+<!--        </div>-->
+<!--      </el-tab-pane>-->
+<!--    </el-tabs>-->
+  </div>
+</template>
+
+<script setup lang="ts">
+  import {onMounted, reactive, ref, watch} from "vue";
+  import useApis from "@/apis";
+  import MyComponent from "@/views/AIEvaluationPage/MyComponent.vue";
+
+  const apis = useApis()
+  const highlightSentenceId = ref(-1)
+  const selected = ref('trapezoid');
+
+
+  const toEvaluation = () => {
+    apis.overAllEvaluation(16, 15)
+        .then(res => {
+          console.log(res)
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    apis.sentenceEvaluation(16,15)
+        .then(res => {
+          console.log(res)
+        })
+        .catch(err => {
+          console.log(err)
+        })
+  }
+
+  const data = reactive<{
+    overallEvaluation: OverallEvaluation | null;
+    sentenceEvaluationList: SentenceEvaluation[];
+  }>({
+    overallEvaluation: null,
+    sentenceEvaluationList: []
+  })
+
+  const getEvaluation = () => {
+    apis.getOverall(16,15,2)
+        .then(res => {
+          console.log(res)
+          data.overallEvaluation = res.data.data
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    apis.getSentence(16,15,2)
+        .then(res => {
+          console.log(res)
+          data.sentenceEvaluationList = res.data.data
+        })
+        .catch(err => {
+          console.log(err)
+        })
+  }
+
+  onMounted(() => {
+    toEvaluation()
+    getEvaluation()
+  })
+</script>
+
+<script lang="ts">
+export default {
+  name: "AIEvaluationPage"
+}
+</script>
+
+<style scoped>
+.tip1 {
+  background-color: rgba(255, 192, 203, 0.5)
+}
+.tip2 {
+  background-color: rgba(255, 165, 0, 0.5)
+}
+.combined-box {
+  width: 100%; /* 整体宽度 */
+  height: 100%;
+}
+
+.trapezoid {
+  width: 100px; /* 梯形底边长度 */
+  height: 0;
+  border-bottom: 30px solid #cfcfcf; /* 梯形高度和颜色 */
+  border-right: 20px solid transparent;
+  line-height: 30px; /* 与 border-bottom 高度相等 */
+  text-align: center; /* 水平居中 */
+  z-index: 1;
+  cursor: pointer;
+}
+
+.trapezoid2 {
+  width: 100px; /* 梯形底边长度 */
+  height: 0;
+  border-bottom: 30px solid #cfcfcf; /* 梯形高度和颜色 */
+  border-right: 20px solid transparent;
+  border-left: 20px solid transparent;
+  margin-left: -20px;
+  z-index: 2;
+  line-height: 30px; /* 与 border-bottom 高度相等 */
+  text-align: center; /* 水平居中 */
+  cursor: pointer;
+}
+
+.trapezoid.active {
+  border-bottom: 30px solid #fff;
+  z-index: 10;
+}
+
+.trapezoid2.active {
+  border-bottom: 30px solid #fff;
+  z-index: 10;
+}
+
+.rectangle {
+  width: 100%; /* 长方形宽度 */
+  height: calc(100% - 30px - 2vh); /* 长方形高度 */
+  border-top: none; /* 去掉顶部边框，使其与梯形无缝连接 */
+  /* 长方形底部的圆角 */
+  align-items: center;
+  padding: 20px;
+  background-color: #fff; /* 长方形的背景颜色 */
+  border-radius: 0 5px 5px 5px;
+}
+</style>

src/views/AIEvaluationPage/MyComponent.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="combined-box">
+    <div style="display: flex">
+      <div
+          class="trapezoid"
+          :class="{ active: selected === 'trapezoid' }"
+          @click="selected = 'trapezoid'"
+      >
+        整体评价
+      </div>
+      <div
+          class="trapezoid2"
+          :class="{ active: selected === 'trapezoid2' }"
+          @click="selected = 'trapezoid2'"
+      >
+        逐句评价
+      </div>
+    </div>
+    <template v-if="selected === 'trapezoid'">
+      <div class="rectangle">
+        <p>This is the content of the rectangle. You can put anything you want here.</p>
+      </div>
+    </template>
+    <template v-else>
+      <div class="rectangle">
+        <p>2222222222222This is the content of the rectangle. You can put anything you want here.</p>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const selected = ref('trapezoid');
+</script>
+
+<style scoped>
+.combined-box {
+  width: 100%; /* 整体宽度 */
+  height: 100%;
+}
+
+.trapezoid {
+  width: 100px; /* 梯形底边长度 */
+  height: 0;
+  border-bottom: 30px solid #a3a3a3; /* 梯形高度和颜色 */
+  border-right: 20px solid transparent;
+  line-height: 30px; /* 与 border-bottom 高度相等 */
+  text-align: center; /* 水平居中 */
+  z-index: 1;
+  cursor: pointer;
+}
+
+.trapezoid2 {
+  width: 100px; /* 梯形底边长度 */
+  height: 0;
+  border-bottom: 30px solid #a3a3a3; /* 梯形高度和颜色 */
+  border-right: 20px solid transparent;
+  border-left: 20px solid transparent;
+  margin-left: -20px;
+  z-index: 2;
+  line-height: 30px; /* 与 border-bottom 高度相等 */
+  text-align: center; /* 水平居中 */
+  cursor: pointer;
+}
+
+.trapezoid.active {
+  border-bottom: 30px solid #fff;
+  z-index: 10;
+}
+
+.trapezoid2.active {
+  border-bottom: 30px solid #fff;
+  z-index: 10;
+}
+
+.rectangle {
+  width: 100%; /* 长方形宽度 */
+  height: calc(100% - 30px - 2vh); /* 长方形高度 */
+  border-top: none; /* 去掉顶部边框，使其与梯形无缝连接 */
+  /* 长方形底部的圆角 */
+  align-items: center;
+  padding: 20px;
+  background-color: #fff; /* 长方形的背景颜色 */
+  border-radius: 0 5px 5px 5px;
+}
+</style>

src/views/Home/component/Silder/index.vue

@@ -63,6 +63,7 @@ import {defineProps, onMounted, reactive, ref, watch, watchEffect} from 'vue'
 import ViewsWordEditor from "@/components/ViewsWordEditor/ViewsWordEditor.vue";
 import {useRoute} from "vue-router";
 import {ElMessage} from "element-plus";
+import router from "@/router";
 
   interface ISliderProps {
     dialogueId: string;
@@ -122,22 +123,25 @@ import {ElMessage} from "element-plus";
 
   // 请求批改
   const handleCorrect = () => {
-    loading.value = true;
-    apis.rewrite(assignmentId, store.user.id)
-        .then((res: any) => {
-          if (res.data.code == 500) {
-            aiRemark.value = new Array(2).join("智能批改请求超时")
-            ElMessage.error("智能批改请求超时")
-          } else {
-            aiRemark.value = res.data.data.content;
-          }
-        })
-        .catch((err: any) => {
-          console.error(err);
-        })
-        .finally(() => {
-          loading.value = false;
-        });
+    // loading.value = true;
+    
+    router.push(`/home/assignment/AIEvaluation`)
+    // apis.rewrite(assignmentId, store.user.id)
+    //     .then((res: any) => {
+    //       if (res.data.code == 500) {
+    //         aiRemark.value = new Array(2).join("智能批改请求超时")
+    //         ElMessage.error("智能批改请求超时")
+    //       } else {
+    //         console.log(res.data.data)
+    //         aiRemark.value = res.data.data.overallEvaluation;
+    //       }
+    //     })
+    //     .catch((err: any) => {
+    //       console.error(err);
+    //     })
+    //     .finally(() => {
+    //       loading.value = false;
+    //     });
   };
 
   const openEditor = (url: string, title: string) => {