feature-增加了版本切换功能

src/types/history.ts

@@ -1,6 +1,4 @@
 export interface BehaviorVersionItem{
-    id:string
-    timestamp:number
     name:string
     time:string
     author:string

src/views/BehaviorPage/BehaviorBoard.vue

@@ -196,6 +196,7 @@ provide('currentEngagement',currentEngagement);
 
 watch(currentEngagement,()=>{
   activeNames.value = []
+  currentVersionIndex.value = 0
 })
 /**
  * 切换作业题目
@@ -204,6 +205,7 @@ watch(currentEngagement,()=>{
  */
 function AssignmentChanged(value:AssignmentVO){
   console.log("用户切换了作业")
+  currentVersionIndex.value = 0
   if (value.assignmentId === -1){
     currentEngagementIndex.value = -1;
     return;
@@ -320,62 +322,45 @@ function getHistory(array:string[]) {
   if (array.length == 0)return
   dataHistory.value = []
   activeVersion.value = '1'
-
   // 生成测试数据
-  const now = Date.now()
-  dataHistory.value = [
-    {
-      id: '1',
-      timestamp: now - 1000 * 60 * 60 * 24,
-      name: '版本v1.0.0',
-      time: '2024/01/27 14:30:00',
-      author: currentEngagement.value.studentName
-    },
-    {
-      id: '2',
-      timestamp: now - 1000 * 60 * 60 * 24 * 2,
-      name: '版本v1.0.1',
-      time: '2024/01/26 10:15:00',
-      author: currentEngagement.value.studentName
-    },
-    {
-      id: '3',
-      timestamp: now - 1000 * 60 * 60 * 24 * 3,
-      name: '修复登录问题',
-      time: '2024/01/25 16:45:00',
-      author: currentEngagement.value.studentName
-    },
-    {
-      id: '4',
-      timestamp: now - 1000 * 60 * 60 * 24 * 4,
-      name: '优化界面UI',
-      time: '2024/01/24 09:20:00',
-      author: currentEngagement.value.studentName
-    },
-    {
-      id: '5',
-      timestamp: now - 1000 * 60 * 60 * 24 * 5,
-      name: '版本v1.1.0',
-      time: '2024/01/23 11:00:00',
-      author: currentEngagement.value.studentName
-    },
-    {
-      id: '6',
-      timestamp: now - 1000 * 60 * 60 * 24 * 6,
-      name: '新增搜索功能',
-      time: '2024/01/22 15:10:00',
-      author: currentEngagement.value.studentName
-    },
-    {
-      id: '7',
-      timestamp: now - 1000 * 60 * 60 * 24 * 7,
-      name: '修复数据同步问题',
-      time: '2024/01/21 13:25:00',
-      author: '张三'
-    }
-  ]
+  getVersionList()
 }
 
+/**
+ * 版本控制
+ */
+const currentVersionIndex:Ref<number> = ref(0)
+provide('currentVersionIndex',currentVersionIndex)
+const versionIsLoading = ref(false)
+import * as dayjs from 'dayjs';
+const formatDateTime = (isoString: string): string => {
+  let tempDate = new Date(isoString)
+  return `${tempDate.getFullYear()}/${tempDate.getMonth()+1}/${tempDate.getDate()} `+
+  `${tempDate.getHours().toString().padStart(2,'0')}:${tempDate.getMinutes().toString().padStart(2,'0')}:${tempDate.getSeconds().toString().padStart(2,'0')}`
+};
+async function getVersionList(){
+  versionIsLoading.value = true
+  let res = await apis.selectBehaviorRecord(currentEngagement.value.studentId,currentEngagement.value.assignmentId)
+  console.log('版本号',res)
+  if (res && res.data && res.data.code === 200 && Array.isArray(res.data.data)){
+    let events = res.data.data as any[]
+    dataHistory.value = events.map((value,index)=>{
+      return {
+        name:`版本${index+1}`,
+        time:formatDateTime(value.createdAt),
+        author:currentEngagement.value.studentName
+      }
+    })
+    versionIsLoading.value = false
+  }
+  else{
+    ElMessage.error('获取版本信息失败')
+    versionIsLoading.value = false
+  }
+}
+
+
+
 onMounted(()=>{
   getCourseList();
 })
@@ -458,9 +443,8 @@ onMounted(()=>{
       </div>
       <el-empty v-else :description="emptyText" style="height: 227px" />
     </el-card>
-
-    <el-card class="info-card" style="margin-top: 0">
-      <el-collapse style="border: none;" v-model="activeNames" @change="getHistory">
+    <el-card  class="info-card" style="margin-top: 0;max-height: 500px;overflow-y:auto;">
+      <el-collapse v-loading="versionIsLoading" style="border: none;" v-model="activeNames" @change="getHistory">
         <el-collapse-item id="timeline-collapse" name="1">
           <template #title>
             <span  style="font-weight: bold;font-size: 16px">版本选择</span>
@@ -469,10 +453,10 @@ onMounted(()=>{
             <el-timeline-item
                 v-for="(activity, index) in dataHistory"
                 :key="index"
-                :color="activeVersion == activity.id?'#409EFFFF':''"
-                @click="activeVersion = activity.id"
+                :color="index == currentVersionIndex?'#409EFFFF':''"
+                @click="currentVersionIndex = index"
             >
-              <div :class="{'timeline-item-row':true,'is-active':activeVersion == activity.id}" >
+              <div :class="{'timeline-item-row':true,'is-active':currentVersionIndex == index}" >
                 <span >{{activity.name}}</span>
                 <span >{{activity.author}}</span>
                 <span>{{activity.time}}</span>

src/views/BehaviorPage/component/EditCanvas.vue

@@ -16,7 +16,7 @@ let productData = [];
 let cursorData = [];
 let processData = [];
 let noData = ref(false)
-
+let versionIndex = inject('currentVersionIndex') satisfies Ref<number>
 watch(currentEngagement,()=>{
   noData.value = false
   setTimeout(()=>{
@@ -30,6 +30,17 @@ watch(currentEngagement,()=>{
 
   },0)
 });
+
+watch(versionIndex,()=>{
+  let chartDom = document.getElementById('edit-canvas');
+  if (!chartDom)return;
+  let myChart = echarts.getInstanceByDom(chartDom);
+  if (!myChart){
+    myChart = echarts.init(chartDom);
+  }
+  getCanvasData(myChart);
+})
+
 const loadingStatus = inject('loadingStatus') as Ref<{
   edit:boolean,
   pause:boolean,
@@ -53,10 +64,10 @@ function getCanvasData(chart:EChartsType){
   let assignmentId = currentEngagement.value.assignmentId;
   chart.showLoading({text:'加载中'});
   loadingStatus.value.edit = true;
-  apis.getBehaviorRecordAll(studentId,assignmentId)
+  apis.selectBehaviorRecord(studentId,assignmentId)
   .then((res:any) => {
-    if (res && res.data && res.data.code === 200){
-      let rowData = res.data.data.events as any[];
+    if (res && res.data && res.data.code === 200 && res.data.data[versionIndex.value]){
+      let rowData = res.data.data[versionIndex.value].events satisfies any[];
       console.log("行为数据",rowData);
       cursorData.length=0;
       productData.length = 0;
@@ -187,6 +198,11 @@ function getCanvasData(chart:EChartsType){
       chart.hideLoading();
       loadingStatus.value.edit = false;
     }
+    else{
+      noData.value = true
+      loadingStatus.value.edit = false
+      chart.hideLoading()
+    }
   })
 }
 

src/views/BehaviorPage/component/HeatMap.vue

@@ -132,13 +132,14 @@ const actionData = ref([]);
 // 这里 studentId 和 assignmentId 可根据实际情况传递
 
 const engagement = inject('currentEngagement') as Ref<any>;
+let versionIndex = inject('currentVersionIndex') satisfies Ref<number>
 watch(engagement,async () => {
   try {
     studentId = engagement.value.studentId;
     assignmentId = engagement.value.assignmentId;
-    const res = await bevaviorApis.getBehaviorRecordAll(studentId, assignmentId)
-    if (res.data && res.data.data && Array.isArray(res.data.data.events)) {
-      actionData.value = res.data.data.events
+    const res = await bevaviorApis.selectBehaviorRecord(studentId, assignmentId)
+    if (res.data && res.data.data && Array.isArray(res.data.data[versionIndex.value].events)) {
+      actionData.value = res.data.data[versionIndex.value].events
     } else {
       actionData.value = []
     }
@@ -150,14 +151,29 @@ watch(engagement,async () => {
 
 let studentId = 16
 let assignmentId = 7
-
+watch(versionIndex,async ()=>{
+  try {
+    studentId = engagement.value.studentId;
+    assignmentId = engagement.value.assignmentId;
+    const res = await bevaviorApis.selectBehaviorRecord(studentId, assignmentId)
+    console.log('热力图',res)
+    if (res.data && res.data.data && Array.isArray(res.data.data[versionIndex.value].events)) {
+      actionData.value = res.data.data[versionIndex.value].events
+    } else {
+      actionData.value = []
+    }
+  } catch (e) {
+    actionData.value = []
+    // 可加错误提示
+  }
+})
 onMounted(async () => {
   try {
     studentId = engagement.value.studentId;
     assignmentId = engagement.value.assignmentId;
-    const res = await bevaviorApis.getBehaviorRecordAll(studentId, assignmentId)
-    if (res.data && res.data.data && Array.isArray(res.data.data.events)) {
-      actionData.value = res.data.data.events
+    const res = await bevaviorApis.selectBehaviorRecord(studentId, assignmentId)
+    if (res.data && res.data.data && Array.isArray(res.data.data[versionIndex.value].events)) {
+      actionData.value = res.data.data[versionIndex.value].events
     } else {
       actionData.value = []
     }

src/views/BehaviorPage/component/PauseCanvas.vue

@@ -52,6 +52,18 @@ const loadingStatus = inject('loadingStatus') as Ref<{
   process:boolean,
   total:boolean
 }>;
+let versionIndex = inject('currentVersionIndex') satisfies Ref<number>
+watch(versionIndex,()=>{
+  setTimeout(()=>{
+    let chartDom = document.getElementById('pause-canvas');
+    if (!chartDom)return;
+    let myChart = echarts.getInstanceByDom(chartDom);
+    if (!myChart){
+      myChart = echarts.init(chartDom);
+    }
+    getCanvasData(myChart);
+  },0)
+})
 function getCanvasData(chart:EChartsType){
   if (!currentEngagement.value){
     return;
@@ -60,10 +72,10 @@ function getCanvasData(chart:EChartsType){
   let assignmentId = currentEngagement.value.assignmentId;
   chart.showLoading({text:'加载中'});
   loadingStatus.value.pause = true;
-  apis.getBehaviorRecordAll(studentId,assignmentId)
+  apis.selectBehaviorRecord(studentId,assignmentId)
       .then((res:any) => {
-        if (res && res.data && res.data.code === 200){
-          let rowData = res.data.data.events as any[];
+        if (res && res.data && res.data.code === 200 && res.data.data[versionIndex.value]){
+          let rowData = res.data.data[versionIndex.value].events as any[];
           console.log("行为数据",rowData);
           let zeroCount =0;
           pauseData.length = 0;
@@ -179,6 +191,12 @@ function getCanvasData(chart:EChartsType){
             chart.setOption(option)
           });
         }
+        else{
+          loadingStatus.value.pause = true
+          chart.hideLoading()
+          noData.value = true
+
+        }
       })
 
 }

src/views/BehaviorPage/component/ProcessCanvas.vue

@@ -49,6 +49,18 @@ const limit = {
   max:0,
   min:0
 }
+let versionIndex = inject('currentVersionIndex') satisfies Ref<number>
+watch(versionIndex,()=>{
+  setTimeout(()=>{
+    let chartDom = document.getElementById('process-canvas');
+    if (!chartDom)return;
+    let myChart = echarts.getInstanceByDom(chartDom);
+    if (!myChart){
+      myChart = echarts.init(chartDom);
+    }
+    getCanvasData(myChart);
+  },0)
+})
 function getCanvasData(chart:EChartsType){
   //TODO
   if (!currentEngagement.value){
@@ -58,10 +70,10 @@ function getCanvasData(chart:EChartsType){
   loadingStatus.value.process = true;
   let studentId = currentEngagement.value.studentId;
   let assignmentId = currentEngagement.value.assignmentId;
-  apis.getBehaviorRecordAll(studentId,assignmentId)
+  apis.selectBehaviorRecord(studentId,assignmentId)
       .then((res:any) => {
-        if (res && res.data && res.data.code === 200){
-          let rowData = res.data.data.events as any[];
+        if (res && res.data && res.data.code === 200&& res.data.data[versionIndex.value]){
+          let rowData = res.data.data[versionIndex.value].events as any[];
           console.log("行为数据",rowData);
           //数组初始化
           cursorData.length=0;
@@ -242,6 +254,12 @@ function getCanvasData(chart:EChartsType){
             chart.setOption(option)
           });
         }
+        else{
+          loadingStatus.value.process = false
+          chart.hideLoading()
+          noData.value = true
+
+        }
       })
   //测试用数据
 

src/views/BehaviorPage/component/TotalCanvas.vue

@@ -35,6 +35,18 @@ watch(currentEngagement,()=>{
 },{deep:true})
 
 let data = []
+let versionIndex = inject('currentVersionIndex') satisfies Ref<number>
+watch(versionIndex,()=>{
+  setTimeout(()=>{
+    let chartDom = document.getElementById('total-canvas');
+    if (!chartDom)return;
+    let myChart = echarts.getInstanceByDom(chartDom);
+    if (!myChart){
+      myChart = echarts.init(chartDom);
+    }
+    drawChart(myChart);
+  },0)
+})
 function drawChart(chart: EChartsType){
   //TODO
   if (!currentEngagement.value){
@@ -44,21 +56,21 @@ function drawChart(chart: EChartsType){
     text: '加载中'
   });
   loadingStatus.value.total = true;
-  apis.getOverview(currentEngagement.value.studentId,currentEngagement.value.assignmentId)
+  apis.selectBehaviorRecord(currentEngagement.value.studentId,currentEngagement.value.assignmentId)
   .then((res:any) => {
     // console.log(res);
     if (res&&res.data&&res.data.code === 200){
       noData.value = false
-      if (res.data.data.insertCount == 0 && res.data.data.longPauseCount == 0 && res.data.data.deleteCount == 0){
+      if (!res.data.data[versionIndex.value]){
         noData.value = true;
         chart.hideLoading();
         loadingStatus.value.total = false;
         return
       }
       data = [
-        { value: res.data.data.insertCount, name: '产出行为' },
-        { value: res.data.data.longPauseCount, name: '停顿行为' },
-        { value: res.data.data.deleteCount, name: '修改行为' },
+        { value: res.data.data[versionIndex.value].insertCount, name: '产出行为' },
+        { value: res.data.data[versionIndex.value].longPauseCount, name: '停顿行为' },
+        { value: res.data.data[versionIndex.value].deleteCount, name: '修改行为' },
       ]
       let option = {
         tooltip: {

src/views/BehaviorPage/subPage/EditAnalysis.vue

@@ -23,7 +23,10 @@ function formatTimeWithMilliseconds(stamp:number ){
   const milliseconds = date.getMilliseconds().toString().padStart(3, '0');
   return `${hours}:${minutes}:${seconds}.${milliseconds}`;
 }
-
+let versionIndex = inject('currentVersionIndex') satisfies Ref<number>
+watch(versionIndex,()=>{
+  getTableData();
+})
 function getTableData() {
   tableData.value = [
     {
@@ -81,10 +84,10 @@ function getTableData() {
   }
   let studentId = currentEngagement.value.studentId;
   let assignmentId = currentEngagement.value.assignmentId;
-  apis.getBehaviorRecordAll(studentId,assignmentId)
+  apis.selectBehaviorRecord(studentId,assignmentId)
       .then((res:any) => {
         if (res && res.data && res.data.code === 200){
-          let rowData = res.data.data.events as any[];
+          let rowData = res.data.data[versionIndex.value].events as any[];
           console.log("行为数据",rowData);
           tableData.value.length = 0;
           rowData.forEach((item:any,index:number) => {

src/views/BehaviorPage/subPage/TotalAnalysis.vue

@@ -5,7 +5,7 @@ import {onMounted, type Ref, ref, watch} from "vue";
 import useApis from "@/apis";
 import {inject} from "vue-demi";
 import * as echarts from "echarts";
-import {type TableColumnCtx} from "element-plus";
+import {ElMessage, type TableColumnCtx} from "element-plus";
 
 let tableData = ref([])
 const apis = useApis();
@@ -32,7 +32,10 @@ interface Event {
   Output:string|null|undefined,
   Position:number,
 }
-
+let versionIndex = inject('currentVersionIndex') satisfies Ref<number>
+watch(versionIndex,()=>{
+  getBehaviorData();
+})
 function getBehaviorData(){
   //TODO
   // tableData.value = [
@@ -47,12 +50,12 @@ function getBehaviorData(){
   if (!currentEngagement.value){
     return;
   }
-  apis.getBehaviorRecordAll(currentEngagement.value.studentId,currentEngagement.value.assignmentId)
+  apis.selectBehaviorRecord(currentEngagement.value.studentId,currentEngagement.value.assignmentId)
     .then((res: any) => {
       if (res && res.data && res.data.code === 200){
-        let rowData = res.data.data
+        let rowData = res.data.data[versionIndex.value]
         console.log("行为数据",res)
-        tableData.value = res.data.data.events.map((item:any,index:number) => {
+        tableData.value = res.data.data[versionIndex.value].events.map((item:any,index:number) => {
           return {
             Id:index,
             EventType:item.type,
@@ -62,6 +65,9 @@ function getBehaviorData(){
         })
         console.log("tableData",tableData)
       }
+      else{
+        ElMessage.error('获取数据失败')
+      }
     })
 }
 const filterHandler = (