feat:对接后端数据

src/apis/behavior.ts

@@ -20,7 +20,23 @@ const bevaviorApis = {
                 'Content-Type': 'multipart/form-data'
             }
         })
-    }
+    },
+    getOverview: (studentId:number,assignmentId :number) => {
+        return axiosInstance.get(`${PREFIX}/overview`, {
+            params: {
+                studentId,
+                assignmentId
+            }
+        })
+    },
+    getBehaviorRecordAll: (studentId:number,assignmentId :number) => {
+        return axiosInstance.get(`${PREFIX}/all`, {
+            params: {
+                studentId,
+                assignmentId
+            }
+        })
+    },
 }
 
-export default bevaviorApis;
+export default bevaviorApis;

src/router/index.ts

@@ -155,7 +155,7 @@ const router = createRouter({
             },
             {
               path: 'edit',
-              name: 'edit',
+              name: 'editData',
               component: () => import("../views/BehaviorPage/subPage/EditAnalysis.vue")
             },
             {

src/views/BehaviorPage/BehaviorBoard.vue

@@ -147,8 +147,8 @@ const nextButtonDisabled = computed(()=>{
 const currentEngagement = ref()
 watch(currentEngagementIndex,()=>{
   if (currentEngagementIndex.value>=0&&currentEngagementIndex.value<engagements.value.length){
-    // console.log(engagements)
     currentEngagement.value =  engagements.value[currentEngagementIndex.value];
+    console.log(currentEngagement.value)
   }
   else{
     currentEngagement.value = null;
@@ -251,16 +251,16 @@ onMounted(()=>{
           </template>
         </el-page-header>
       </template>
-      <el-descriptions column="2" v-if="currentEngagement" style="width: 90%;margin-left: 5%">
+      <el-descriptions :column="2" v-if="currentEngagement" style="width: 90%;margin-left: 5%">
         <el-descriptions-item label="课程名">{{selectedCourse.courseName}}</el-descriptions-item>
         <el-descriptions-item label="作业题目">{{selectedAssignment.assignmentName}}</el-descriptions-item>
         <el-descriptions-item label="学生姓名">{{currentEngagement.studentName}}</el-descriptions-item>
         <el-descriptions-item label="学号">
           {{currentEngagement.studentId}}
         </el-descriptions-item>
-        <el-descriptions-item label="提交时间">
-          2025-07-30 09:30:00
-        </el-descriptions-item>
+<!--        <el-descriptions-item label="提交时间">-->
+<!--          2025-07-30 09:30:00-->
+<!--        </el-descriptions-item>-->
       </el-descriptions>
       <div v-if="currentEngagement" id="info-footer">
         <el-button
@@ -276,13 +276,16 @@ onMounted(()=>{
       </div>
       <el-empty v-else description="该作业暂无学生提交" style="height: 227px" />
     </el-card>
-    <router-view v-if="!dataIsLoading&&currentEngagement">
+    <router-view :class="{hidden:!(!dataIsLoading&&currentEngagement)}" >
 
     </router-view>
   </div>
 </template>
 
 <style scoped>
+.hidden{
+  visibility: hidden;
+}
 .page{
   height: 100%;
   width: 100%;

src/views/BehaviorPage/component/EditCanvas.vue

@@ -2,537 +2,346 @@
 import {onMounted, type Ref, watch} from "vue";
 import * as echarts from 'echarts';
 import {inject} from "vue-demi";
+import useApis from "@/apis";
+import {type EChartsType} from "echarts";
 const props = defineProps<{
   assignmentId:number,
   splitNumber:number,
 }>()
 
+const apis = useApis();
 const currentEngagement = inject('currentEngagement') as Ref<any>;
 let productData = [];
 let cursorData = [];
 let processData = [];
-// watch(currentEngagement,getCanvasData);
-function getCanvasData(){
-  //TODO
-  let studentId = currentEngagement.value.studentId;
-  let assignmentId = currentEngagement.value.assignmentId;
-
-  //测试用数据
-
-  productData = [[new Date('2025-07-26 00:0:20'),0],
-    [new Date('2025-07-26 00:0:40'),15],
-    [new Date('2025-07-26 00:1:0'),15],
-    [new Date('2025-07-26 00:1:20'),17],
-    [new Date('2025-07-26 00:1:40'),21],
-    [new Date('2025-07-26 00:2:0'),39],
-    [new Date('2025-07-26 00:2:20'),49],
-    [new Date('2025-07-26 00:2:40'),61],
-    [new Date('2025-07-26 00:3:0'),71],
-    [new Date('2025-07-26 00:3:20'),89],
-    [new Date('2025-07-26 00:3:40'),103],
-    [new Date('2025-07-26 00:4:0'),109],
-    [new Date('2025-07-26 00:4:20'),109],
-    [new Date('2025-07-26 00:4:40'),128],
-    [new Date('2025-07-26 00:5:0'),143],
-    [new Date('2025-07-26 00:5:20'),143],
-    [new Date('2025-07-26 00:5:40'),145],
-    [new Date('2025-07-26 00:6:0'),160],
-    [new Date('2025-07-26 00:6:20'),177],
-    [new Date('2025-07-26 00:6:40'),177],
-    [new Date('2025-07-26 00:7:0'),196],
-    [new Date('2025-07-26 00:7:20'),199],
-    [new Date('2025-07-26 00:7:40'),204],
-    [new Date('2025-07-26 00:8:0'),209],
-    [new Date('2025-07-26 00:8:20'),213],
-    [new Date('2025-07-26 00:8:40'),229],
-    [new Date('2025-07-26 00:9:0'),245],
-    [new Date('2025-07-26 00:9:20'),250],
-    [new Date('2025-07-26 00:9:40'),250],
-    [new Date('2025-07-26 00:10:0'),265],
-    [new Date('2025-07-26 00:10:20'),266],
-    [new Date('2025-07-26 00:10:40'),282],
-    [new Date('2025-07-26 00:11:0'),291],
-    [new Date('2025-07-26 00:11:20'),308],
-    [new Date('2025-07-26 00:11:40'),322],
-    [new Date('2025-07-26 00:12:0'),335],
-    [new Date('2025-07-26 00:12:20'),343],
-    [new Date('2025-07-26 00:12:40'),350],
-    [new Date('2025-07-26 00:13:0'),354],
-    [new Date('2025-07-26 00:13:20'),367],
-    [new Date('2025-07-26 00:13:40'),386],
-    [new Date('2025-07-26 00:14:0'),392],
-    [new Date('2025-07-26 00:14:20'),411],
-    [new Date('2025-07-26 00:14:40'),414],
-    [new Date('2025-07-26 00:15:0'),431],
-    [new Date('2025-07-26 00:15:20'),437],
-    [new Date('2025-07-26 00:15:40'),450],
-    [new Date('2025-07-26 00:16:0'),453],
-    [new Date('2025-07-26 00:16:20'),468],
-    [new Date('2025-07-26 00:16:40'),469],
-    [new Date('2025-07-26 00:17:0'),486],
-    [new Date('2025-07-26 00:17:20'),486],
-    [new Date('2025-07-26 00:17:40'),501],
-    [new Date('2025-07-26 00:18:0'),508],
-    [new Date('2025-07-26 00:18:20'),515],
-    [new Date('2025-07-26 00:18:40'),523],
-    [new Date('2025-07-26 00:19:0'),524],
-    [new Date('2025-07-26 00:19:20'),529],
-    [new Date('2025-07-26 00:19:40'),536],
-    [new Date('2025-07-26 00:20:0'),554],
-    [new Date('2025-07-26 00:20:20'),563],
-    [new Date('2025-07-26 00:20:40'),570],
-    [new Date('2025-07-26 00:21:0'),589],
-    [new Date('2025-07-26 00:21:20'),600],
-    [new Date('2025-07-26 00:21:40'),602],
-    [new Date('2025-07-26 00:22:0'),602],
-    [new Date('2025-07-26 00:22:20'),618],
-    [new Date('2025-07-26 00:22:40'),620],
-    [new Date('2025-07-26 00:23:0'),636],
-    [new Date('2025-07-26 00:23:20'),650],
-    [new Date('2025-07-26 00:23:40'),653],
-    [new Date('2025-07-26 00:24:0'),668],
-    [new Date('2025-07-26 00:24:20'),670],
-    [new Date('2025-07-26 00:24:40'),680],
-    [new Date('2025-07-26 00:25:0'),680],
-    [new Date('2025-07-26 00:25:20'),695],
-    [new Date('2025-07-26 00:25:40'),709],
-    [new Date('2025-07-26 00:26:0'),714],
-    [new Date('2025-07-26 00:26:20'),714],
-    [new Date('2025-07-26 00:26:40'),729],
-    [new Date('2025-07-26 00:27:0'),743],
-    [new Date('2025-07-26 00:27:20'),747],
-    [new Date('2025-07-26 00:27:40'),764],
-    [new Date('2025-07-26 00:28:0'),783],
-    [new Date('2025-07-26 00:28:20'),792],
-    [new Date('2025-07-26 00:28:40'),806],
-    [new Date('2025-07-26 00:29:0'),817],
-    [new Date('2025-07-26 00:29:20'),823],
-    [new Date('2025-07-26 00:29:40'),837],
-    [new Date('2025-07-26 00:30:0'),854],];
-  cursorData = [[new Date('2025-07-26 00:0:20'),0],
-    [new Date('2025-07-26 00:0:40'),15],
-    [new Date('2025-07-26 00:1:0'),15],
-    [new Date('2025-07-26 00:1:20'),17],
-    [new Date('2025-07-26 00:1:40'),21],
-    [new Date('2025-07-26 00:2:0'),39],
-    [new Date('2025-07-26 00:2:20'),49],
-    [new Date('2025-07-26 00:2:40'),61],
-    [new Date('2025-07-26 00:3:0'),71],
-    [new Date('2025-07-26 00:3:20'),89],
-    [new Date('2025-07-26 00:3:40'),103],
-    [new Date('2025-07-26 00:4:0'),109],
-    [new Date('2025-07-26 00:4:20'),109],
-    [new Date('2025-07-26 00:4:40'),128],
-    [new Date('2025-07-26 00:5:0'),143],
-    [new Date('2025-07-26 00:5:20'),143],
-    [new Date('2025-07-26 00:5:40'),145],
-    [new Date('2025-07-26 00:6:0'),160],
-    [new Date('2025-07-26 00:6:20'),177],
-    [new Date('2025-07-26 00:6:40'),177],
-    [new Date('2025-07-26 00:7:0'),196],
-    [new Date('2025-07-26 00:7:20'),199],
-    [new Date('2025-07-26 00:7:40'),204],
-    [new Date('2025-07-26 00:7:41'),150],
-    [new Date('2025-07-26 00:7:59'),158],
-    [new Date('2025-07-26 00:8:0'),212],
-    [new Date('2025-07-26 00:8:20'),213],
-    [new Date('2025-07-26 00:8:40'),229],
-    [new Date('2025-07-26 00:9:0'),245],
-    [new Date('2025-07-26 00:9:20'),250],
-    [new Date('2025-07-26 00:9:40'),250],
-    [new Date('2025-07-26 00:10:0'),265],
-    [new Date('2025-07-26 00:10:20'),266],
-    [new Date('2025-07-26 00:10:40'),282],
-    [new Date('2025-07-26 00:11:0'),291],
-    [new Date('2025-07-26 00:11:20'),308],
-    [new Date('2025-07-26 00:11:40'),322],
-    [new Date('2025-07-26 00:12:0'),335],
-    [new Date('2025-07-26 00:12:20'),343],
-    [new Date('2025-07-26 00:12:40'),350],
-    [new Date('2025-07-26 00:13:0'),354],
-    [new Date('2025-07-26 00:13:20'),367],
-    [new Date('2025-07-26 00:13:40'),386],
-    [new Date('2025-07-26 00:14:0'),392],
-    [new Date('2025-07-26 00:14:20'),411],
-    [new Date('2025-07-26 00:14:40'),414],
-    [new Date('2025-07-26 00:15:0'),431],
-    [new Date('2025-07-26 00:15:20'),437],
-    [new Date('2025-07-26 00:15:40'),450],
-    [new Date('2025-07-26 00:16:0'),453],
-    [new Date('2025-07-26 00:16:20'),468],
-    [new Date('2025-07-26 00:16:40'),469],
-    [new Date('2025-07-26 00:17:0'),486],
-    [new Date('2025-07-26 00:17:20'),486],
-    [new Date('2025-07-26 00:17:40'),501],
-    [new Date('2025-07-26 00:18:0'),508],
-    [new Date('2025-07-26 00:18:20'),515],
-    [new Date('2025-07-26 00:18:40'),523],
-    [new Date('2025-07-26 00:19:0'),524],
-    [new Date('2025-07-26 00:19:20'),529],
-    [new Date('2025-07-26 00:19:40'),536],
-    [new Date('2025-07-26 00:20:0'),554],
-    [new Date('2025-07-26 00:20:20'),563],
-    [new Date('2025-07-26 00:20:40'),570],
-    [new Date('2025-07-26 00:21:0'),589],
-    [new Date('2025-07-26 00:21:20'),600],
-    [new Date('2025-07-26 00:21:40'),602],
-    [new Date('2025-07-26 00:22:0'),602],
-    [new Date('2025-07-26 00:22:20'),618],
-    [new Date('2025-07-26 00:22:40'),620],
-    [new Date('2025-07-26 00:23:0'),636],
-    [new Date('2025-07-26 00:23:20'),650],
-    [new Date('2025-07-26 00:23:40'),653],
-    [new Date('2025-07-26 00:24:0'),668],
-    [new Date('2025-07-26 00:24:20'),670],
-    [new Date('2025-07-26 00:24:40'),680],
-    [new Date('2025-07-26 00:25:0'),680],
-    [new Date('2025-07-26 00:25:20'),695],
-    [new Date('2025-07-26 00:25:40'),709],
-    [new Date('2025-07-26 00:26:0'),714],
-    [new Date('2025-07-26 00:26:20'),714],
-    [new Date('2025-07-26 00:26:21'),500],
-    [new Date('2025-07-26 00:26:30'),515],
-    [new Date('2025-07-26 00:26:39'),515],
-    [new Date('2025-07-26 00:26:40'),729],
-    [new Date('2025-07-26 00:27:0'),743],
-    [new Date('2025-07-26 00:27:20'),747],
-    [new Date('2025-07-26 00:27:40'),764],
-    [new Date('2025-07-26 00:28:0'),783],
-    [new Date('2025-07-26 00:28:20'),792],
-    [new Date('2025-07-26 00:28:40'),806],
-    [new Date('2025-07-26 00:29:0'),817],
-    [new Date('2025-07-26 00:29:20'),823],
-    [new Date('2025-07-26 00:29:40'),837],
-    [new Date('2025-07-26 00:30:0'),854],];
-  let count = 0;
-  processData = [];
-  for (let i = 0; i < productData.length; i++) {
-    if (i%2 == 0)count+=7;
-    processData.push([productData[i][0],productData[i][1]+count]);
-  }
+watch(currentEngagement,()=>{
   let chartDom = document.getElementById('edit-canvas');
   let myChart = echarts.getInstanceByDom(chartDom);
-  let option = {
-    xAxis: {
-      type: 'time',
-      axisPointer: {
-        value: "2016-10-7",
-        snap: true,
-        label: {
-          show: true,
-          formatter: function(params) {
-            return echarts.format.formatTime('hh:mm:ss', params.value);
-          }
-        },
-        show: true,
-        type: "line"
-      },
-      splitNumber: props.splitNumber
-    },
-    yAxis: {
-      type: 'value',
-      name:'characters'
-    },
-    tooltip:{
+  getCanvasData(myChart);
+});
 
-    },
-    dataZoom: [
-      {
-        type: 'inside',
-      },
-      {
-        type: 'slider',
-      }
-    ],
-    legend:{},
-    series: [
-      {
-        itemStyle: {
-          color:'#ff9300',
-          opacity: 0
+function formatTimeWithMilliseconds(stamp:number ){
+  const date = new Date(stamp);
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  const seconds = date.getSeconds().toString().padStart(2, '0');
+  const milliseconds = date.getMilliseconds().toString().padStart(3, '0');
+  return `${hours}:${minutes}:${seconds}`;
+}
+function getCanvasData(chart:EChartsType){
+  //TODO
+  if (!currentEngagement.value){
+    return;
+  }
+  let studentId = currentEngagement.value.studentId;
+  let assignmentId = currentEngagement.value.assignmentId;
+  chart.showLoading({text:'加载中'});
+  apis.getBehaviorRecordAll(studentId,assignmentId)
+  .then((res:any) => {
+    if (res && res.data && res.data.code === 200){
+      let rowData = res.data.data.events as any[];
+      console.log("行为数据",rowData);
+      let count = 0;
+      let insertCount = 0;
+      cursorData.length=0;
+      productData.length = 0;
+      processData.length = 0;
+      let zeroCount =0;
+      rowData.forEach((item:any) => {
+        // console.log("item",item)
+        let startStamp = 0;
+        if (item.startStamp){
+          startStamp = item.startStamp;
+        }
+        if (startStamp == 0){
+          zeroCount++;
+        }
+        if (zeroCount>1){
+          zeroCount = 0;
+          return;
+        }
+        let clock = new Date(startStamp);
+        clock.setHours(clock.getHours() + 16);
+        cursorData.push([clock,item.retain])
+        productData.push([clock,count])
+        processData.push([clock,insertCount])
+        if (item.type === 'insert'){
+          count++;
+          insertCount++;
+        }
+        if (item.type === 'delete'){
+          count--;
+        }
+      })
+      // console.log("productData",productData)
+      // console.log("cursorData",cursorData)
+      // console.log("processData",processData)
+      let option = {
+        xAxis: {
+          type: 'time',
+          axisPointer: {
+            snap: true,
+            label: {
+              show: true,
+              formatter: function(params) {
+                return formatTimeWithMilliseconds(params.value);
+              }
+            },
+            show: true,
+            type: "line"
+          },
+          // splitNumber: props.splitNumber
         },
-        name:'product',
-        data: productData,
-        type: 'line'
-      },
-      {
-        itemStyle: {
-          color:'#ff9300',
-          opacity: 0
+        yAxis: {
+          type: 'value',
+          name:'characters'
         },
-        lineStyle: {
-          type: "dotted"
+        tooltip:{
+
         },
-        name:'cursor',
-        data: cursorData,
-        type: 'line'
-      }
-    ]
-  };
-  myChart.setOption( option);
+        dataZoom: [
+          {
+            type: 'inside',
+          },
+          {
+            type: 'slider',
+            labelFormatter: function (value) {
+              return formatTimeWithMilliseconds(value);
+            }
+          },
+        ],
+        legend:{},
+        series: [
+          {
+            itemStyle: {
+              color:'#ff9300',
+              opacity: 0
+            },
+            name:'product',
+            data: productData,
+            type: 'line'
+          },
+          {
+            itemStyle: {
+              color:'#ff9300',
+              opacity: 0
+            },
+            lineStyle: {
+              type: "dotted"
+            },
+            name:'cursor',
+            data: cursorData,
+            type: 'line'
+          },
+          {
+            itemStyle: {
+              color:'#00bbff',
+              opacity: 0
+            },
+            name:'process',
+            data: processData,
+            type: 'line'
+          },
+
+        ]
+      };
+      chart.setOption( option);
+      chart.hideLoading();
+    }
+  })
+  //测试用数据
+
+  // productData = [[new Date('2025-07-26 00:0:20'),0],
+  //   [new Date('2025-07-26 00:0:40'),15],
+  //   [new Date('2025-07-26 00:1:0'),15],
+  //   [new Date('2025-07-26 00:1:20'),17],
+  //   [new Date('2025-07-26 00:1:40'),21],
+  //   [new Date('2025-07-26 00:2:0'),39],
+  //   [new Date('2025-07-26 00:2:20'),49],
+  //   [new Date('2025-07-26 00:2:40'),61],
+  //   [new Date('2025-07-26 00:3:0'),71],
+  //   [new Date('2025-07-26 00:3:20'),89],
+  //   [new Date('2025-07-26 00:3:40'),103],
+  //   [new Date('2025-07-26 00:4:0'),109],
+  //   [new Date('2025-07-26 00:4:20'),109],
+  //   [new Date('2025-07-26 00:4:40'),128],
+  //   [new Date('2025-07-26 00:5:0'),143],
+  //   [new Date('2025-07-26 00:5:20'),143],
+  //   [new Date('2025-07-26 00:5:40'),145],
+  //   [new Date('2025-07-26 00:6:0'),160],
+  //   [new Date('2025-07-26 00:6:20'),177],
+  //   [new Date('2025-07-26 00:6:40'),177],
+  //   [new Date('2025-07-26 00:7:0'),196],
+  //   [new Date('2025-07-26 00:7:20'),199],
+  //   [new Date('2025-07-26 00:7:40'),204],
+  //   [new Date('2025-07-26 00:8:0'),209],
+  //   [new Date('2025-07-26 00:8:20'),213],
+  //   [new Date('2025-07-26 00:8:40'),229],
+  //   [new Date('2025-07-26 00:9:0'),245],
+  //   [new Date('2025-07-26 00:9:20'),250],
+  //   [new Date('2025-07-26 00:9:40'),250],
+  //   [new Date('2025-07-26 00:10:0'),265],
+  //   [new Date('2025-07-26 00:10:20'),266],
+  //   [new Date('2025-07-26 00:10:40'),282],
+  //   [new Date('2025-07-26 00:11:0'),291],
+  //   [new Date('2025-07-26 00:11:20'),308],
+  //   [new Date('2025-07-26 00:11:40'),322],
+  //   [new Date('2025-07-26 00:12:0'),335],
+  //   [new Date('2025-07-26 00:12:20'),343],
+  //   [new Date('2025-07-26 00:12:40'),350],
+  //   [new Date('2025-07-26 00:13:0'),354],
+  //   [new Date('2025-07-26 00:13:20'),367],
+  //   [new Date('2025-07-26 00:13:40'),386],
+  //   [new Date('2025-07-26 00:14:0'),392],
+  //   [new Date('2025-07-26 00:14:20'),411],
+  //   [new Date('2025-07-26 00:14:40'),414],
+  //   [new Date('2025-07-26 00:15:0'),431],
+  //   [new Date('2025-07-26 00:15:20'),437],
+  //   [new Date('2025-07-26 00:15:40'),450],
+  //   [new Date('2025-07-26 00:16:0'),453],
+  //   [new Date('2025-07-26 00:16:20'),468],
+  //   [new Date('2025-07-26 00:16:40'),469],
+  //   [new Date('2025-07-26 00:17:0'),486],
+  //   [new Date('2025-07-26 00:17:20'),486],
+  //   [new Date('2025-07-26 00:17:40'),501],
+  //   [new Date('2025-07-26 00:18:0'),508],
+  //   [new Date('2025-07-26 00:18:20'),515],
+  //   [new Date('2025-07-26 00:18:40'),523],
+  //   [new Date('2025-07-26 00:19:0'),524],
+  //   [new Date('2025-07-26 00:19:20'),529],
+  //   [new Date('2025-07-26 00:19:40'),536],
+  //   [new Date('2025-07-26 00:20:0'),554],
+  //   [new Date('2025-07-26 00:20:20'),563],
+  //   [new Date('2025-07-26 00:20:40'),570],
+  //   [new Date('2025-07-26 00:21:0'),589],
+  //   [new Date('2025-07-26 00:21:20'),600],
+  //   [new Date('2025-07-26 00:21:40'),602],
+  //   [new Date('2025-07-26 00:22:0'),602],
+  //   [new Date('2025-07-26 00:22:20'),618],
+  //   [new Date('2025-07-26 00:22:40'),620],
+  //   [new Date('2025-07-26 00:23:0'),636],
+  //   [new Date('2025-07-26 00:23:20'),650],
+  //   [new Date('2025-07-26 00:23:40'),653],
+  //   [new Date('2025-07-26 00:24:0'),668],
+  //   [new Date('2025-07-26 00:24:20'),670],
+  //   [new Date('2025-07-26 00:24:40'),680],
+  //   [new Date('2025-07-26 00:25:0'),680],
+  //   [new Date('2025-07-26 00:25:20'),695],
+  //   [new Date('2025-07-26 00:25:40'),709],
+  //   [new Date('2025-07-26 00:26:0'),714],
+  //   [new Date('2025-07-26 00:26:20'),714],
+  //   [new Date('2025-07-26 00:26:40'),729],
+  //   [new Date('2025-07-26 00:27:0'),743],
+  //   [new Date('2025-07-26 00:27:20'),747],
+  //   [new Date('2025-07-26 00:27:40'),764],
+  //   [new Date('2025-07-26 00:28:0'),783],
+  //   [new Date('2025-07-26 00:28:20'),792],
+  //   [new Date('2025-07-26 00:28:40'),806],
+  //   [new Date('2025-07-26 00:29:0'),817],
+  //   [new Date('2025-07-26 00:29:20'),823],
+  //   [new Date('2025-07-26 00:29:40'),837],
+  //   [new Date('2025-07-26 00:30:0'),854],];
+  // cursorData = [[new Date('2025-07-26 00:0:20'),0],
+  //   [new Date('2025-07-26 00:0:40'),15],
+  //   [new Date('2025-07-26 00:1:0'),15],
+  //   [new Date('2025-07-26 00:1:20'),17],
+  //   [new Date('2025-07-26 00:1:40'),21],
+  //   [new Date('2025-07-26 00:2:0'),39],
+  //   [new Date('2025-07-26 00:2:20'),49],
+  //   [new Date('2025-07-26 00:2:40'),61],
+  //   [new Date('2025-07-26 00:3:0'),71],
+  //   [new Date('2025-07-26 00:3:20'),89],
+  //   [new Date('2025-07-26 00:3:40'),103],
+  //   [new Date('2025-07-26 00:4:0'),109],
+  //   [new Date('2025-07-26 00:4:20'),109],
+  //   [new Date('2025-07-26 00:4:40'),128],
+  //   [new Date('2025-07-26 00:5:0'),143],
+  //   [new Date('2025-07-26 00:5:20'),143],
+  //   [new Date('2025-07-26 00:5:40'),145],
+  //   [new Date('2025-07-26 00:6:0'),160],
+  //   [new Date('2025-07-26 00:6:20'),177],
+  //   [new Date('2025-07-26 00:6:40'),177],
+  //   [new Date('2025-07-26 00:7:0'),196],
+  //   [new Date('2025-07-26 00:7:20'),199],
+  //   [new Date('2025-07-26 00:7:40'),204],
+  //   [new Date('2025-07-26 00:7:41'),150],
+  //   [new Date('2025-07-26 00:7:59'),158],
+  //   [new Date('2025-07-26 00:8:0'),212],
+  //   [new Date('2025-07-26 00:8:20'),213],
+  //   [new Date('2025-07-26 00:8:40'),229],
+  //   [new Date('2025-07-26 00:9:0'),245],
+  //   [new Date('2025-07-26 00:9:20'),250],
+  //   [new Date('2025-07-26 00:9:40'),250],
+  //   [new Date('2025-07-26 00:10:0'),265],
+  //   [new Date('2025-07-26 00:10:20'),266],
+  //   [new Date('2025-07-26 00:10:40'),282],
+  //   [new Date('2025-07-26 00:11:0'),291],
+  //   [new Date('2025-07-26 00:11:20'),308],
+  //   [new Date('2025-07-26 00:11:40'),322],
+  //   [new Date('2025-07-26 00:12:0'),335],
+  //   [new Date('2025-07-26 00:12:20'),343],
+  //   [new Date('2025-07-26 00:12:40'),350],
+  //   [new Date('2025-07-26 00:13:0'),354],
+  //   [new Date('2025-07-26 00:13:20'),367],
+  //   [new Date('2025-07-26 00:13:40'),386],
+  //   [new Date('2025-07-26 00:14:0'),392],
+  //   [new Date('2025-07-26 00:14:20'),411],
+  //   [new Date('2025-07-26 00:14:40'),414],
+  //   [new Date('2025-07-26 00:15:0'),431],
+  //   [new Date('2025-07-26 00:15:20'),437],
+  //   [new Date('2025-07-26 00:15:40'),450],
+  //   [new Date('2025-07-26 00:16:0'),453],
+  //   [new Date('2025-07-26 00:16:20'),468],
+  //   [new Date('2025-07-26 00:16:40'),469],
+  //   [new Date('2025-07-26 00:17:0'),486],
+  //   [new Date('2025-07-26 00:17:20'),486],
+  //   [new Date('2025-07-26 00:17:40'),501],
+  //   [new Date('2025-07-26 00:18:0'),508],
+  //   [new Date('2025-07-26 00:18:20'),515],
+  //   [new Date('2025-07-26 00:18:40'),523],
+  //   [new Date('2025-07-26 00:19:0'),524],
+  //   [new Date('2025-07-26 00:19:20'),529],
+  //   [new Date('2025-07-26 00:19:40'),536],
+  //   [new Date('2025-07-26 00:20:0'),554],
+  //   [new Date('2025-07-26 00:20:20'),563],
+  //   [new Date('2025-07-26 00:20:40'),570],
+  //   [new Date('2025-07-26 00:21:0'),589],
+  //   [new Date('2025-07-26 00:21:20'),600],
+  //   [new Date('2025-07-26 00:21:40'),602],
+  //   [new Date('2025-07-26 00:22:0'),602],
+  //   [new Date('2025-07-26 00:22:20'),618],
+  //   [new Date('2025-07-26 00:22:40'),620],
+  //   [new Date('2025-07-26 00:23:0'),636],
+  //   [new Date('2025-07-26 00:23:20'),650],
+  //   [new Date('2025-07-26 00:23:40'),653],
+  //   [new Date('2025-07-26 00:24:0'),668],
+  //   [new Date('2025-07-26 00:24:20'),670],
+  //   [new Date('2025-07-26 00:24:40'),680],
+  //   [new Date('2025-07-26 00:25:0'),680],
+  //   [new Date('2025-07-26 00:25:20'),695],
+  //   [new Date('2025-07-26 00:25:40'),709],
+  //   [new Date('2025-07-26 00:26:0'),714],
+  //   [new Date('2025-07-26 00:26:20'),714],
+  //   [new Date('2025-07-26 00:26:21'),500],
+  //   [new Date('2025-07-26 00:26:30'),515],
+  //   [new Date('2025-07-26 00:26:39'),515],
+  //   [new Date('2025-07-26 00:26:40'),729],
+  //   [new Date('2025-07-26 00:27:0'),743],
+  //   [new Date('2025-07-26 00:27:20'),747],
+  //   [new Date('2025-07-26 00:27:40'),764],
+  //   [new Date('2025-07-26 00:28:0'),783],
+  //   [new Date('2025-07-26 00:28:20'),792],
+  //   [new Date('2025-07-26 00:28:40'),806],
+  //   [new Date('2025-07-26 00:29:0'),817],
+  //   [new Date('2025-07-26 00:29:20'),823],
+  //   [new Date('2025-07-26 00:29:40'),837],
+  //   [new Date('2025-07-26 00:30:0'),854],];
 }
 
 onMounted(()=>{
   let chartDom = document.getElementById('edit-canvas');
   let myChart = echarts.init(chartDom);
-  productData = [[new Date('2025-07-26 00:0:20'),0],
-    [new Date('2025-07-26 00:0:40'),15],
-    [new Date('2025-07-26 00:1:0'),15],
-    [new Date('2025-07-26 00:1:20'),17],
-    [new Date('2025-07-26 00:1:40'),21],
-    [new Date('2025-07-26 00:2:0'),39],
-    [new Date('2025-07-26 00:2:20'),49],
-    [new Date('2025-07-26 00:2:40'),61],
-    [new Date('2025-07-26 00:3:0'),71],
-    [new Date('2025-07-26 00:3:20'),89],
-    [new Date('2025-07-26 00:3:40'),103],
-    [new Date('2025-07-26 00:4:0'),109],
-    [new Date('2025-07-26 00:4:20'),109],
-    [new Date('2025-07-26 00:4:40'),128],
-    [new Date('2025-07-26 00:5:0'),143],
-    [new Date('2025-07-26 00:5:20'),143],
-    [new Date('2025-07-26 00:5:40'),145],
-    [new Date('2025-07-26 00:6:0'),160],
-    [new Date('2025-07-26 00:6:20'),177],
-    [new Date('2025-07-26 00:6:40'),177],
-    [new Date('2025-07-26 00:7:0'),196],
-    [new Date('2025-07-26 00:7:20'),199],
-    [new Date('2025-07-26 00:7:40'),204],
-    [new Date('2025-07-26 00:8:0'),209],
-    [new Date('2025-07-26 00:8:20'),213],
-    [new Date('2025-07-26 00:8:40'),229],
-    [new Date('2025-07-26 00:9:0'),245],
-    [new Date('2025-07-26 00:9:20'),250],
-    [new Date('2025-07-26 00:9:40'),250],
-    [new Date('2025-07-26 00:10:0'),265],
-    [new Date('2025-07-26 00:10:20'),266],
-    [new Date('2025-07-26 00:10:40'),282],
-    [new Date('2025-07-26 00:11:0'),291],
-    [new Date('2025-07-26 00:11:20'),308],
-    [new Date('2025-07-26 00:11:40'),322],
-    [new Date('2025-07-26 00:12:0'),335],
-    [new Date('2025-07-26 00:12:20'),343],
-    [new Date('2025-07-26 00:12:40'),350],
-    [new Date('2025-07-26 00:13:0'),354],
-    [new Date('2025-07-26 00:13:20'),367],
-    [new Date('2025-07-26 00:13:40'),386],
-    [new Date('2025-07-26 00:14:0'),392],
-    [new Date('2025-07-26 00:14:20'),411],
-    [new Date('2025-07-26 00:14:40'),414],
-    [new Date('2025-07-26 00:15:0'),431],
-    [new Date('2025-07-26 00:15:20'),437],
-    [new Date('2025-07-26 00:15:40'),450],
-    [new Date('2025-07-26 00:16:0'),453],
-    [new Date('2025-07-26 00:16:20'),468],
-    [new Date('2025-07-26 00:16:40'),469],
-    [new Date('2025-07-26 00:17:0'),486],
-    [new Date('2025-07-26 00:17:20'),486],
-    [new Date('2025-07-26 00:17:40'),501],
-    [new Date('2025-07-26 00:18:0'),508],
-    [new Date('2025-07-26 00:18:20'),515],
-    [new Date('2025-07-26 00:18:40'),523],
-    [new Date('2025-07-26 00:19:0'),524],
-    [new Date('2025-07-26 00:19:20'),529],
-    [new Date('2025-07-26 00:19:40'),536],
-    [new Date('2025-07-26 00:20:0'),554],
-    [new Date('2025-07-26 00:20:20'),563],
-    [new Date('2025-07-26 00:20:40'),570],
-    [new Date('2025-07-26 00:21:0'),589],
-    [new Date('2025-07-26 00:21:20'),600],
-    [new Date('2025-07-26 00:21:40'),602],
-    [new Date('2025-07-26 00:22:0'),602],
-    [new Date('2025-07-26 00:22:20'),618],
-    [new Date('2025-07-26 00:22:40'),620],
-    [new Date('2025-07-26 00:23:0'),636],
-    [new Date('2025-07-26 00:23:20'),650],
-    [new Date('2025-07-26 00:23:40'),653],
-    [new Date('2025-07-26 00:24:0'),668],
-    [new Date('2025-07-26 00:24:20'),670],
-    [new Date('2025-07-26 00:24:40'),680],
-    [new Date('2025-07-26 00:25:0'),680],
-    [new Date('2025-07-26 00:25:20'),695],
-    [new Date('2025-07-26 00:25:40'),709],
-    [new Date('2025-07-26 00:26:0'),714],
-    [new Date('2025-07-26 00:26:20'),714],
-    [new Date('2025-07-26 00:26:40'),729],
-    [new Date('2025-07-26 00:27:0'),743],
-    [new Date('2025-07-26 00:27:20'),747],
-    [new Date('2025-07-26 00:27:40'),764],
-    [new Date('2025-07-26 00:28:0'),783],
-    [new Date('2025-07-26 00:28:20'),792],
-    [new Date('2025-07-26 00:28:40'),806],
-    [new Date('2025-07-26 00:29:0'),817],
-    [new Date('2025-07-26 00:29:20'),823],
-    [new Date('2025-07-26 00:29:40'),837],
-    [new Date('2025-07-26 00:30:0'),854],];
-  cursorData = [[new Date('2025-07-26 00:0:20'),0],
-    [new Date('2025-07-26 00:0:40'),15],
-    [new Date('2025-07-26 00:1:0'),15],
-    [new Date('2025-07-26 00:1:20'),17],
-    [new Date('2025-07-26 00:1:40'),21],
-    [new Date('2025-07-26 00:2:0'),39],
-    [new Date('2025-07-26 00:2:20'),49],
-    [new Date('2025-07-26 00:2:40'),61],
-    [new Date('2025-07-26 00:3:0'),71],
-    [new Date('2025-07-26 00:3:20'),89],
-    [new Date('2025-07-26 00:3:40'),103],
-    [new Date('2025-07-26 00:4:0'),109],
-    [new Date('2025-07-26 00:4:20'),109],
-    [new Date('2025-07-26 00:4:40'),128],
-    [new Date('2025-07-26 00:5:0'),143],
-    [new Date('2025-07-26 00:5:20'),143],
-    [new Date('2025-07-26 00:5:40'),145],
-    [new Date('2025-07-26 00:6:0'),160],
-    [new Date('2025-07-26 00:6:20'),177],
-    [new Date('2025-07-26 00:6:40'),177],
-    [new Date('2025-07-26 00:7:0'),196],
-    [new Date('2025-07-26 00:7:20'),199],
-    [new Date('2025-07-26 00:7:40'),204],
-    [new Date('2025-07-26 00:7:41'),150],
-    [new Date('2025-07-26 00:7:59'),158],
-    [new Date('2025-07-26 00:8:0'),212],
-    [new Date('2025-07-26 00:8:20'),213],
-    [new Date('2025-07-26 00:8:40'),229],
-    [new Date('2025-07-26 00:9:0'),245],
-    [new Date('2025-07-26 00:9:20'),250],
-    [new Date('2025-07-26 00:9:40'),250],
-    [new Date('2025-07-26 00:10:0'),265],
-    [new Date('2025-07-26 00:10:20'),266],
-    [new Date('2025-07-26 00:10:40'),282],
-    [new Date('2025-07-26 00:11:0'),291],
-    [new Date('2025-07-26 00:11:20'),308],
-    [new Date('2025-07-26 00:11:40'),322],
-    [new Date('2025-07-26 00:12:0'),335],
-    [new Date('2025-07-26 00:12:20'),343],
-    [new Date('2025-07-26 00:12:40'),350],
-    [new Date('2025-07-26 00:13:0'),354],
-    [new Date('2025-07-26 00:13:20'),367],
-    [new Date('2025-07-26 00:13:40'),386],
-    [new Date('2025-07-26 00:14:0'),392],
-    [new Date('2025-07-26 00:14:20'),411],
-    [new Date('2025-07-26 00:14:40'),414],
-    [new Date('2025-07-26 00:15:0'),431],
-    [new Date('2025-07-26 00:15:20'),437],
-    [new Date('2025-07-26 00:15:40'),450],
-    [new Date('2025-07-26 00:16:0'),453],
-    [new Date('2025-07-26 00:16:20'),468],
-    [new Date('2025-07-26 00:16:40'),469],
-    [new Date('2025-07-26 00:17:0'),486],
-    [new Date('2025-07-26 00:17:20'),486],
-    [new Date('2025-07-26 00:17:40'),501],
-    [new Date('2025-07-26 00:18:0'),508],
-    [new Date('2025-07-26 00:18:20'),515],
-    [new Date('2025-07-26 00:18:40'),523],
-    [new Date('2025-07-26 00:19:0'),524],
-    [new Date('2025-07-26 00:19:20'),529],
-    [new Date('2025-07-26 00:19:40'),536],
-    [new Date('2025-07-26 00:20:0'),554],
-    [new Date('2025-07-26 00:20:20'),563],
-    [new Date('2025-07-26 00:20:40'),570],
-    [new Date('2025-07-26 00:21:0'),589],
-    [new Date('2025-07-26 00:21:20'),600],
-    [new Date('2025-07-26 00:21:40'),602],
-    [new Date('2025-07-26 00:22:0'),602],
-    [new Date('2025-07-26 00:22:20'),618],
-    [new Date('2025-07-26 00:22:40'),620],
-    [new Date('2025-07-26 00:23:0'),636],
-    [new Date('2025-07-26 00:23:20'),650],
-    [new Date('2025-07-26 00:23:40'),653],
-    [new Date('2025-07-26 00:24:0'),668],
-    [new Date('2025-07-26 00:24:20'),670],
-    [new Date('2025-07-26 00:24:40'),680],
-    [new Date('2025-07-26 00:25:0'),680],
-    [new Date('2025-07-26 00:25:20'),695],
-    [new Date('2025-07-26 00:25:40'),709],
-    [new Date('2025-07-26 00:26:0'),714],
-    [new Date('2025-07-26 00:26:20'),714],
-    [new Date('2025-07-26 00:26:21'),500],
-    [new Date('2025-07-26 00:26:30'),515],
-    [new Date('2025-07-26 00:26:39'),515],
-    [new Date('2025-07-26 00:26:40'),729],
-    [new Date('2025-07-26 00:27:0'),743],
-    [new Date('2025-07-26 00:27:20'),747],
-    [new Date('2025-07-26 00:27:40'),764],
-    [new Date('2025-07-26 00:28:0'),783],
-    [new Date('2025-07-26 00:28:20'),792],
-    [new Date('2025-07-26 00:28:40'),806],
-    [new Date('2025-07-26 00:29:0'),817],
-    [new Date('2025-07-26 00:29:20'),823],
-    [new Date('2025-07-26 00:29:40'),837],
-    [new Date('2025-07-26 00:30:0'),854],];
-  let count = 0;
-  processData = [];
-  for (let i = 0; i < productData.length; i++) {
-    if (i%2 == 0)count+=7;
-    processData.push([productData[i][0],productData[i][1]+count]);
-  }
-  let option = {
-    xAxis: {
-      type: 'time',
-      axisPointer: {
-        value: "2016-10-7",
-        snap: true,
-        label: {
-          show: true,
-          formatter: function(params) {
-            return echarts.format.formatTime('hh:mm:ss', params.value);
-          }
-        },
-        show: true,
-        type: "line"
-      },
-      splitNumber: props.splitNumber
-    },
-    yAxis: {
-      type: 'value',
-      name:'characters'
-    },
-    tooltip:{
-
-    },
-    dataZoom: [
-      {
-        type: 'inside',
-      },
-      {
-        type: 'slider',
-      }
-    ],
-    legend:{},
-    series: [
-      {
-        itemStyle: {
-          color:'#ff9300',
-          opacity: 0
-        },
-        name:'product',
-        data: productData,
-        type: 'line'
-      },
-      {
-        itemStyle: {
-          color:'#ff9300',
-          opacity: 0
-        },
-        lineStyle: {
-          type: "dotted"
-        },
-        name:'cursor',
-        data: cursorData,
-        type: 'line'
-      },
-      {
-        itemStyle: {
-          color:'#1d86dc',
-          opacity: 0
-        },
-        name:'process',
-        data: processData,
-        type: 'line'
-      }
-    ]
-  };
-  myChart.setOption( option);
+  getCanvasData(myChart)
   window.addEventListener('resize', ()=>{
     myChart.resize()
   })

src/views/BehaviorPage/component/HeatMap.vue

@@ -46,6 +46,7 @@
                 width: `${heatmapRectWidth}px`,
                 height: `${heatmapRectHeight}px`
               }"
+                :title="`totalPauseTime = ${item.totalPauseTime}ms`"
                 @mouseover="showTooltip(item.totalPauseTime, $event)"
                 @mouseout="hideTooltip"
             />
@@ -69,19 +70,19 @@
       </div>
 
       <!-- 提示框 -->
-      <div
-          v-if="tooltipVisible"
-          class="tooltip"
-          :style="{ left: `${tooltipX}px`, top: `${tooltipY}px` }"
-      >
-        totalPauseTime = {{ tooltipText }}ms
-      </div>
+<!--      <div-->
+<!--          v-if="tooltipVisible"-->
+<!--          class="tooltip"-->
+<!--          :style="{ left: `${tooltipX}px`, top: `${tooltipY}px` }"-->
+<!--      >-->
+<!--        totalPauseTime = {{ tooltipText }}ms-->
+<!--      </div>-->
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {ref, computed, onMounted, Ref, watch} from 'vue'
+import {ref, computed, onMounted,type Ref, watch} from 'vue'
 import bevaviorApis from '@/apis/behavior'
 import {inject} from "vue-demi";
 import {ElMessage} from "element-plus";
@@ -135,7 +136,7 @@ watch(engagement,async () => {
   try {
     studentId = engagement.value.studentId;
     assignmentId = engagement.value.assignmentId;
-    const res = await bevaviorApis.selectAllBehaviorRecord(studentId, 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
     } else {
@@ -154,7 +155,7 @@ onMounted(async () => {
   try {
     studentId = engagement.value.studentId;
     assignmentId = engagement.value.assignmentId;
-    const res = await bevaviorApis.selectAllBehaviorRecord(studentId, 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
     } else {
@@ -278,8 +279,8 @@ const getColor = (pauseTime) => {
 const showTooltip = (totalPauseTime, event) => {
   tooltipVisible.value = true
   tooltipText.value = totalPauseTime
-  tooltipX.value = event.clientX + 10
-  tooltipY.value = event.clientY + 10
+  tooltipX.value = event.clientX
+  tooltipY.value = event.clientY
 }
 
 // 隐藏提示框
@@ -294,7 +295,7 @@ const hideTooltip = () => {
   flex-direction: column;
   align-items: center;      /* 垂直居中 */
   height: 500px;            /* 占满整个视口高度 */
-  width: 100%;              /* 占满整个宽度 */
+  width: 95%;              /* 占满整个宽度 */
 }
 
 .container {

src/views/BehaviorPage/component/PauseCanvas.vue

@@ -1,315 +1,330 @@
 <script setup lang="ts">
-import {onMounted,type Ref, ref} from "vue";
+import {onMounted, type Ref, ref, watch} from "vue";
 import * as echarts from 'echarts';
+import {inject} from "vue-demi";
+import useApis from "@/apis";
+import type {EChartsType} from "echarts";
 const props = defineProps<{
   assignmentId:number,
   splitNumber:number,
   barWidth:number,
 }>()
+const apis = useApis();
+const pauseData:any[] = [];
+let chartData:any[] = [];
+const limit = {
+  max:0,
+  min:0
+}
+function formatTimeWithMilliseconds(stamp:number ){
+  const date = new Date(stamp);
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  const seconds = date.getSeconds().toString().padStart(2, '0');
+  const milliseconds = date.getMilliseconds().toString().padStart(3, '0');
+  return `${hours}:${minutes}:${seconds}`;
+}
+
+const currentEngagement = inject('currentEngagement') as Ref<any>;
+watch(currentEngagement,()=>{
+  let chartDom = document.getElementById('pause-canvas');
+  let myChart = echarts.getInstanceByDom(chartDom);
+  getCanvasData(myChart);
+});
+function getCanvasData(chart:EChartsType){
+  if (!currentEngagement.value){
+    return;
+  }
+  let studentId = currentEngagement.value.studentId;
+  let assignmentId = currentEngagement.value.assignmentId;
+  chart.showLoading({text:'加载中'});
+  apis.getBehaviorRecordAll(studentId,assignmentId)
+      .then((res:any) => {
+        if (res && res.data && res.data.code === 200){
+          let rowData = res.data.data.events as any[];
+          console.log("行为数据",rowData);
+          let zeroCount =0;
+          pauseData.length = 0;
+          chartData.length = 0;
+          if (rowData.length>0){
+            limit.max = rowData[0].pauseTime;
+          }
+          rowData.forEach((item:any) => {
+            // console.log("item",item)
+            let startStamp = 0;
+            if (item.startStamp){
+              startStamp = item.startStamp;
+            }
+            if (startStamp == 0){
+              zeroCount++;
+            }
+            if (zeroCount>1){
+              zeroCount = 0;
+              return;
+            }
+            let clock = new Date(startStamp);
+            clock.setHours(clock.getHours() + 16);
+            pauseData.push([clock,item.pauseTime])
+            chartData.push([clock,item.pauseTime])
+            limit.max = Math.max(limit.max,item.pauseTime);
+          })
+
+          let option = {
+            xAxis: {
+              type:'time',
+              splitNumber: props.splitNumber,
+            },
+            yAxis: {
+              type:'value',
+              name:'停顿时间(ms)',
 
+            },
+            tooltip:{
+              formatter:(value:any)=>{
+                let date = value.data[0];
+                let data = value.data[1];
+                return `停顿时刻:${[date.getHours(), date.getMinutes(), date.getSeconds()]
+                    .map(num => num.toString().padStart(2, '0'))
+                    .join(':')}\n  停顿时长:${data}ms`
+              }
+            },
+            visualMap: {
+              type: 'continuous', // 连续型映射
+              calculable: true,
+              min: limit.min,             // 数据最小值
+              max: limit.max,           // 数据最大值
+              dimension: 1,       // 根据第2个维度（y值）映射颜色
+              inRange: {
+                color: ['orange', 'red'] // 渐变范围：小值→蓝色，大值→红色
+              },
+              itemWidth: props.barWidth,
+              bottom:0,
+              right:0,
+            },
+            dataZoom: [
+              {
+                type: 'inside',
+              },
+              {
+                type: 'slider',
+                labelFormatter: function (value) {
+                  return formatTimeWithMilliseconds(value);
+                }
+              }
+            ],
+            series: [
+              {
+                symbolSize: 10,
+
+                data: chartData,
+                type: 'scatter'
+              }
+            ]
+          };
+          chart.setOption( option);
+          chart.hideLoading();
+          chart.on('datarangeselected', (params:any) => {
+            let range = params.selected as [number,number];
+            chartData = pauseData.filter((item:any) => {
+              return item[1] >= range[0] && item[1] <= range[1];
+            })
+            option.series[0].data = chartData;
+            chart.setOption(option)
+          });
+        }
+      })
+  //测试用数据
+
+  // productData = [[new Date('2025-07-26 00:0:20'),0],
+  //   [new Date('2025-07-26 00:0:40'),15],
+  //   [new Date('2025-07-26 00:1:0'),15],
+  //   [new Date('2025-07-26 00:1:20'),17],
+  //   [new Date('2025-07-26 00:1:40'),21],
+  //   [new Date('2025-07-26 00:2:0'),39],
+  //   [new Date('2025-07-26 00:2:20'),49],
+  //   [new Date('2025-07-26 00:2:40'),61],
+  //   [new Date('2025-07-26 00:3:0'),71],
+  //   [new Date('2025-07-26 00:3:20'),89],
+  //   [new Date('2025-07-26 00:3:40'),103],
+  //   [new Date('2025-07-26 00:4:0'),109],
+  //   [new Date('2025-07-26 00:4:20'),109],
+  //   [new Date('2025-07-26 00:4:40'),128],
+  //   [new Date('2025-07-26 00:5:0'),143],
+  //   [new Date('2025-07-26 00:5:20'),143],
+  //   [new Date('2025-07-26 00:5:40'),145],
+  //   [new Date('2025-07-26 00:6:0'),160],
+  //   [new Date('2025-07-26 00:6:20'),177],
+  //   [new Date('2025-07-26 00:6:40'),177],
+  //   [new Date('2025-07-26 00:7:0'),196],
+  //   [new Date('2025-07-26 00:7:20'),199],
+  //   [new Date('2025-07-26 00:7:40'),204],
+  //   [new Date('2025-07-26 00:8:0'),209],
+  //   [new Date('2025-07-26 00:8:20'),213],
+  //   [new Date('2025-07-26 00:8:40'),229],
+  //   [new Date('2025-07-26 00:9:0'),245],
+  //   [new Date('2025-07-26 00:9:20'),250],
+  //   [new Date('2025-07-26 00:9:40'),250],
+  //   [new Date('2025-07-26 00:10:0'),265],
+  //   [new Date('2025-07-26 00:10:20'),266],
+  //   [new Date('2025-07-26 00:10:40'),282],
+  //   [new Date('2025-07-26 00:11:0'),291],
+  //   [new Date('2025-07-26 00:11:20'),308],
+  //   [new Date('2025-07-26 00:11:40'),322],
+  //   [new Date('2025-07-26 00:12:0'),335],
+  //   [new Date('2025-07-26 00:12:20'),343],
+  //   [new Date('2025-07-26 00:12:40'),350],
+  //   [new Date('2025-07-26 00:13:0'),354],
+  //   [new Date('2025-07-26 00:13:20'),367],
+  //   [new Date('2025-07-26 00:13:40'),386],
+  //   [new Date('2025-07-26 00:14:0'),392],
+  //   [new Date('2025-07-26 00:14:20'),411],
+  //   [new Date('2025-07-26 00:14:40'),414],
+  //   [new Date('2025-07-26 00:15:0'),431],
+  //   [new Date('2025-07-26 00:15:20'),437],
+  //   [new Date('2025-07-26 00:15:40'),450],
+  //   [new Date('2025-07-26 00:16:0'),453],
+  //   [new Date('2025-07-26 00:16:20'),468],
+  //   [new Date('2025-07-26 00:16:40'),469],
+  //   [new Date('2025-07-26 00:17:0'),486],
+  //   [new Date('2025-07-26 00:17:20'),486],
+  //   [new Date('2025-07-26 00:17:40'),501],
+  //   [new Date('2025-07-26 00:18:0'),508],
+  //   [new Date('2025-07-26 00:18:20'),515],
+  //   [new Date('2025-07-26 00:18:40'),523],
+  //   [new Date('2025-07-26 00:19:0'),524],
+  //   [new Date('2025-07-26 00:19:20'),529],
+  //   [new Date('2025-07-26 00:19:40'),536],
+  //   [new Date('2025-07-26 00:20:0'),554],
+  //   [new Date('2025-07-26 00:20:20'),563],
+  //   [new Date('2025-07-26 00:20:40'),570],
+  //   [new Date('2025-07-26 00:21:0'),589],
+  //   [new Date('2025-07-26 00:21:20'),600],
+  //   [new Date('2025-07-26 00:21:40'),602],
+  //   [new Date('2025-07-26 00:22:0'),602],
+  //   [new Date('2025-07-26 00:22:20'),618],
+  //   [new Date('2025-07-26 00:22:40'),620],
+  //   [new Date('2025-07-26 00:23:0'),636],
+  //   [new Date('2025-07-26 00:23:20'),650],
+  //   [new Date('2025-07-26 00:23:40'),653],
+  //   [new Date('2025-07-26 00:24:0'),668],
+  //   [new Date('2025-07-26 00:24:20'),670],
+  //   [new Date('2025-07-26 00:24:40'),680],
+  //   [new Date('2025-07-26 00:25:0'),680],
+  //   [new Date('2025-07-26 00:25:20'),695],
+  //   [new Date('2025-07-26 00:25:40'),709],
+  //   [new Date('2025-07-26 00:26:0'),714],
+  //   [new Date('2025-07-26 00:26:20'),714],
+  //   [new Date('2025-07-26 00:26:40'),729],
+  //   [new Date('2025-07-26 00:27:0'),743],
+  //   [new Date('2025-07-26 00:27:20'),747],
+  //   [new Date('2025-07-26 00:27:40'),764],
+  //   [new Date('2025-07-26 00:28:0'),783],
+  //   [new Date('2025-07-26 00:28:20'),792],
+  //   [new Date('2025-07-26 00:28:40'),806],
+  //   [new Date('2025-07-26 00:29:0'),817],
+  //   [new Date('2025-07-26 00:29:20'),823],
+  //   [new Date('2025-07-26 00:29:40'),837],
+  //   [new Date('2025-07-26 00:30:0'),854],];
+  // cursorData = [[new Date('2025-07-26 00:0:20'),0],
+  //   [new Date('2025-07-26 00:0:40'),15],
+  //   [new Date('2025-07-26 00:1:0'),15],
+  //   [new Date('2025-07-26 00:1:20'),17],
+  //   [new Date('2025-07-26 00:1:40'),21],
+  //   [new Date('2025-07-26 00:2:0'),39],
+  //   [new Date('2025-07-26 00:2:20'),49],
+  //   [new Date('2025-07-26 00:2:40'),61],
+  //   [new Date('2025-07-26 00:3:0'),71],
+  //   [new Date('2025-07-26 00:3:20'),89],
+  //   [new Date('2025-07-26 00:3:40'),103],
+  //   [new Date('2025-07-26 00:4:0'),109],
+  //   [new Date('2025-07-26 00:4:20'),109],
+  //   [new Date('2025-07-26 00:4:40'),128],
+  //   [new Date('2025-07-26 00:5:0'),143],
+  //   [new Date('2025-07-26 00:5:20'),143],
+  //   [new Date('2025-07-26 00:5:40'),145],
+  //   [new Date('2025-07-26 00:6:0'),160],
+  //   [new Date('2025-07-26 00:6:20'),177],
+  //   [new Date('2025-07-26 00:6:40'),177],
+  //   [new Date('2025-07-26 00:7:0'),196],
+  //   [new Date('2025-07-26 00:7:20'),199],
+  //   [new Date('2025-07-26 00:7:40'),204],
+  //   [new Date('2025-07-26 00:7:41'),150],
+  //   [new Date('2025-07-26 00:7:59'),158],
+  //   [new Date('2025-07-26 00:8:0'),212],
+  //   [new Date('2025-07-26 00:8:20'),213],
+  //   [new Date('2025-07-26 00:8:40'),229],
+  //   [new Date('2025-07-26 00:9:0'),245],
+  //   [new Date('2025-07-26 00:9:20'),250],
+  //   [new Date('2025-07-26 00:9:40'),250],
+  //   [new Date('2025-07-26 00:10:0'),265],
+  //   [new Date('2025-07-26 00:10:20'),266],
+  //   [new Date('2025-07-26 00:10:40'),282],
+  //   [new Date('2025-07-26 00:11:0'),291],
+  //   [new Date('2025-07-26 00:11:20'),308],
+  //   [new Date('2025-07-26 00:11:40'),322],
+  //   [new Date('2025-07-26 00:12:0'),335],
+  //   [new Date('2025-07-26 00:12:20'),343],
+  //   [new Date('2025-07-26 00:12:40'),350],
+  //   [new Date('2025-07-26 00:13:0'),354],
+  //   [new Date('2025-07-26 00:13:20'),367],
+  //   [new Date('2025-07-26 00:13:40'),386],
+  //   [new Date('2025-07-26 00:14:0'),392],
+  //   [new Date('2025-07-26 00:14:20'),411],
+  //   [new Date('2025-07-26 00:14:40'),414],
+  //   [new Date('2025-07-26 00:15:0'),431],
+  //   [new Date('2025-07-26 00:15:20'),437],
+  //   [new Date('2025-07-26 00:15:40'),450],
+  //   [new Date('2025-07-26 00:16:0'),453],
+  //   [new Date('2025-07-26 00:16:20'),468],
+  //   [new Date('2025-07-26 00:16:40'),469],
+  //   [new Date('2025-07-26 00:17:0'),486],
+  //   [new Date('2025-07-26 00:17:20'),486],
+  //   [new Date('2025-07-26 00:17:40'),501],
+  //   [new Date('2025-07-26 00:18:0'),508],
+  //   [new Date('2025-07-26 00:18:20'),515],
+  //   [new Date('2025-07-26 00:18:40'),523],
+  //   [new Date('2025-07-26 00:19:0'),524],
+  //   [new Date('2025-07-26 00:19:20'),529],
+  //   [new Date('2025-07-26 00:19:40'),536],
+  //   [new Date('2025-07-26 00:20:0'),554],
+  //   [new Date('2025-07-26 00:20:20'),563],
+  //   [new Date('2025-07-26 00:20:40'),570],
+  //   [new Date('2025-07-26 00:21:0'),589],
+  //   [new Date('2025-07-26 00:21:20'),600],
+  //   [new Date('2025-07-26 00:21:40'),602],
+  //   [new Date('2025-07-26 00:22:0'),602],
+  //   [new Date('2025-07-26 00:22:20'),618],
+  //   [new Date('2025-07-26 00:22:40'),620],
+  //   [new Date('2025-07-26 00:23:0'),636],
+  //   [new Date('2025-07-26 00:23:20'),650],
+  //   [new Date('2025-07-26 00:23:40'),653],
+  //   [new Date('2025-07-26 00:24:0'),668],
+  //   [new Date('2025-07-26 00:24:20'),670],
+  //   [new Date('2025-07-26 00:24:40'),680],
+  //   [new Date('2025-07-26 00:25:0'),680],
+  //   [new Date('2025-07-26 00:25:20'),695],
+  //   [new Date('2025-07-26 00:25:40'),709],
+  //   [new Date('2025-07-26 00:26:0'),714],
+  //   [new Date('2025-07-26 00:26:20'),714],
+  //   [new Date('2025-07-26 00:26:21'),500],
+  //   [new Date('2025-07-26 00:26:30'),515],
+  //   [new Date('2025-07-26 00:26:39'),515],
+  //   [new Date('2025-07-26 00:26:40'),729],
+  //   [new Date('2025-07-26 00:27:0'),743],
+  //   [new Date('2025-07-26 00:27:20'),747],
+  //   [new Date('2025-07-26 00:27:40'),764],
+  //   [new Date('2025-07-26 00:28:0'),783],
+  //   [new Date('2025-07-26 00:28:20'),792],
+  //   [new Date('2025-07-26 00:28:40'),806],
+  //   [new Date('2025-07-26 00:29:0'),817],
+  //   [new Date('2025-07-26 00:29:20'),823],
+  //   [new Date('2025-07-26 00:29:40'),837],
+  //   [new Date('2025-07-26 00:30:0'),854],];
+}
 onMounted(()=>{
   let chartDom = document.getElementById('pause-canvas');
   let myChart = echarts.init(chartDom);
-  let option = {
-    xAxis: {
-      type:'time',
-      splitNumber: props.splitNumber
-    },
-    yAxis: {
-      type:'value',
-      name:'停顿时间(ms)'
-    },
-    tooltip:{
-      formatter:(value:any)=>{
-        let date = value.data[0];
-        let data = value.data[1];
-        return `停顿时刻:${[date.getHours(), date.getMinutes(), date.getSeconds()]
-            .map(num => num.toString().padStart(2, '0'))
-            .join(':')}\n  停顿时长:${data}ms`
-      }
-    },
-    visualMap: {
-      type: 'continuous', // 连续型映射
-      calculable: true,
-      min: 0,             // 数据最小值
-      max: 150,           // 数据最大值
-      dimension: 1,       // 根据第2个维度（y值）映射颜色
-      inRange: {
-        color: ['yellow', 'red'] // 渐变范围：小值→蓝色，大值→红色
-      },
-      itemWidth: props.barWidth,
-      bottom:0,
-      right:0,
-    },
-    dataZoom: [
-      {
-        type: 'inside',
-      },
-      {
-        type: 'slider',
-      }
-    ],
-    series: [
-      {
-        symbolSize: 10,
-
-        data: [
-          [new Date('2025-07-26 00:33:42'),44],
-          [new Date('2025-07-26 00:52:57'),39],
-          [new Date('2025-07-26 00:46:26'),14],
-          [new Date('2025-07-26 00:34:36'),28],
-          [new Date('2025-07-26 00:17:17'),43],
-          [new Date('2025-07-26 00:50:39'),23],
-          [new Date('2025-07-26 00:42:20'),13],
-          [new Date('2025-07-26 00:33:5'),44],
-          [new Date('2025-07-26 00:42:31'),32],
-          [new Date('2025-07-26 00:13:16'),48],
-          [new Date('2025-07-26 00:0:23'),40],
-          [new Date('2025-07-26 00:24:46'),39],
-          [new Date('2025-07-26 00:4:44'),49],
-          [new Date('2025-07-26 00:2:4'),43],
-          [new Date('2025-07-26 00:25:6'),21],
-          [new Date('2025-07-26 00:18:38'),26],
-          [new Date('2025-07-26 00:16:40'),43],
-          [new Date('2025-07-26 00:37:45'),5],
-          [new Date('2025-07-26 00:49:42'),27],
-          [new Date('2025-07-26 00:45:31'),34],
-          [new Date('2025-07-26 00:51:19'),25],
-          [new Date('2025-07-26 00:43:16'),42],
-          [new Date('2025-07-26 00:16:39'),7],
-          [new Date('2025-07-26 00:38:48'),32],
-          [new Date('2025-07-26 00:34:43'),33],
-          [new Date('2025-07-26 00:6:43'),48],
-          [new Date('2025-07-26 00:45:28'),30],
-          [new Date('2025-07-26 00:4:29'),48],
-          [new Date('2025-07-26 00:35:21'),41],
-          [new Date('2025-07-26 00:23:57'),44],
-          [new Date('2025-07-26 00:8:1'),29],
-          [new Date('2025-07-26 00:7:4'),40],
-          [new Date('2025-07-26 00:3:43'),11],
-          [new Date('2025-07-26 00:40:12'),12],
-          [new Date('2025-07-26 00:23:35'),32],
-          [new Date('2025-07-26 00:9:28'),16],
-          [new Date('2025-07-26 00:7:45'),30],
-          [new Date('2025-07-26 00:31:11'),24],
-          [new Date('2025-07-26 00:46:4'),41],
-          [new Date('2025-07-26 00:34:29'),49],
-          [new Date('2025-07-26 00:42:9'),39],
-          [new Date('2025-07-26 00:35:46'),20],
-          [new Date('2025-07-26 00:17:23'),48],
-          [new Date('2025-07-26 00:19:46'),6],
-          [new Date('2025-07-26 00:8:6'),41],
-          [new Date('2025-07-26 00:55:38'),27],
-          [new Date('2025-07-26 00:33:10'),41],
-          [new Date('2025-07-26 00:32:12'),26],
-          [new Date('2025-07-26 00:58:44'),43],
-          [new Date('2025-07-26 00:30:21'),19],
-          [new Date('2025-07-26 00:46:38'),34],
-          [new Date('2025-07-26 00:20:2'),22],
-          [new Date('2025-07-26 00:44:57'),33],
-          [new Date('2025-07-26 00:11:49'),37],
-          [new Date('2025-07-26 00:24:43'),15],
-          [new Date('2025-07-26 00:30:2'),42],
-          [new Date('2025-07-26 00:57:17'),40],
-          [new Date('2025-07-26 00:6:29'),27],
-          [new Date('2025-07-26 00:15:9'),27],
-          [new Date('2025-07-26 00:13:57'),22],
-          [new Date('2025-07-26 00:54:8'),36],
-          [new Date('2025-07-26 00:5:29'),31],
-          [new Date('2025-07-26 00:38:36'),29],
-          [new Date('2025-07-26 00:6:1'),37],
-          [new Date('2025-07-26 00:11:22'),5],
-          [new Date('2025-07-26 00:10:8'),25],
-          [new Date('2025-07-26 00:43:29'),22],
-          [new Date('2025-07-26 00:9:30'),14],
-          [new Date('2025-07-26 00:44:39'),41],
-          [new Date('2025-07-26 00:48:17'),36],
-          [new Date('2025-07-26 00:6:5'),48],
-          [new Date('2025-07-26 00:13:31'),13],
-          [new Date('2025-07-26 00:12:37'),28],
-          [new Date('2025-07-26 00:1:4'),49],
-          [new Date('2025-07-26 00:48:20'),39],
-          [new Date('2025-07-26 00:52:32'),46],
-          [new Date('2025-07-26 00:35:0'),48],
-          [new Date('2025-07-26 00:28:2'),13],
-          [new Date('2025-07-26 00:19:11'),41],
-          [new Date('2025-07-26 00:8:48'),21],
-          [new Date('2025-07-26 00:46:2'),34],
-          [new Date('2025-07-26 00:49:29'),16],
-          [new Date('2025-07-26 00:24:22'),17],
-          [new Date('2025-07-26 00:10:11'),5],
-          [new Date('2025-07-26 00:14:10'),47],
-          [new Date('2025-07-26 00:18:44'),19],
-          [new Date('2025-07-26 00:18:15'),31],
-          [new Date('2025-07-26 00:16:10'),15],
-          [new Date('2025-07-26 00:37:51'),25],
-          [new Date('2025-07-26 00:30:13'),40],
-          [new Date('2025-07-26 00:33:35'),24],
-          [new Date('2025-07-26 00:19:29'),47],
-          [new Date('2025-07-26 00:29:23'),40],
-          [new Date('2025-07-26 00:19:10'),12],
-          [new Date('2025-07-26 00:4:37'),8],
-          [new Date('2025-07-26 00:38:0'),22],
-          [new Date('2025-07-26 00:36:24'),7],
-          [new Date('2025-07-26 00:4:22'),29],
-          [new Date('2025-07-26 00:39:22'),32],
-          [new Date('2025-07-26 00:40:33'),48],
-          [new Date('2025-07-26 00:33:14'),10],
-          [new Date('2025-07-26 00:20:18'),22],
-          [new Date('2025-07-26 00:39:52'),31],
-          [new Date('2025-07-26 00:21:40'),16],
-          [new Date('2025-07-26 00:56:33'),46],
-          [new Date('2025-07-26 00:56:50'),43],
-          [new Date('2025-07-26 00:16:15'),39],
-          [new Date('2025-07-26 00:30:44'),48],
-          [new Date('2025-07-26 00:35:56'),14],
-          [new Date('2025-07-26 00:57:33'),9],
-          [new Date('2025-07-26 00:15:23'),21],
-          [new Date('2025-07-26 00:26:0'),7],
-          [new Date('2025-07-26 00:50:23'),10],
-          [new Date('2025-07-26 00:32:23'),10],
-          [new Date('2025-07-26 00:3:21'),18],
-          [new Date('2025-07-26 00:27:34'),23],
-          [new Date('2025-07-26 00:54:37'),40],
-          [new Date('2025-07-26 00:49:34'),23],
-          [new Date('2025-07-26 00:29:30'),41],
-          [new Date('2025-07-26 00:24:49'),37],
-          [new Date('2025-07-26 00:18:20'),34],
-          [new Date('2025-07-26 00:13:55'),36],
-          [new Date('2025-07-26 00:51:10'),42],
-          [new Date('2025-07-26 00:32:49'),31],
-          [new Date('2025-07-26 00:0:17'),22],
-          [new Date('2025-07-26 00:39:7'),30],
-          [new Date('2025-07-26 00:52:49'),17],
-          [new Date('2025-07-26 00:49:12'),42],
-          [new Date('2025-07-26 00:23:26'),17],
-          [new Date('2025-07-26 00:29:12'),19],
-          [new Date('2025-07-26 00:21:26'),28],
-          [new Date('2025-07-26 00:25:41'),14],
-          [new Date('2025-07-26 00:23:17'),38],
-          [new Date('2025-07-26 00:29:42'),16],
-          [new Date('2025-07-26 00:53:5'),13],
-          [new Date('2025-07-26 00:31:51'),21],
-          [new Date('2025-07-26 00:31:46'),8],
-          [new Date('2025-07-26 00:48:2'),41],
-          [new Date('2025-07-26 00:25:58'),47],
-          [new Date('2025-07-26 00:18:54'),30],
-          [new Date('2025-07-26 00:50:19'),40],
-          [new Date('2025-07-26 00:16:11'),13],
-          [new Date('2025-07-26 00:5:12'),42],
-          [new Date('2025-07-26 00:48:55'),12],
-          [new Date('2025-07-26 00:29:53'),31],
-          [new Date('2025-07-26 00:40:43'),33],
-          [new Date('2025-07-26 00:28:7'),43],
-          [new Date('2025-07-26 00:43:15'),37],
-          [new Date('2025-07-26 00:47:37'),6],
-          [new Date('2025-07-26 00:46:47'),41],
-          [new Date('2025-07-26 00:6:34'),40],
-          [new Date('2025-07-26 00:16:57'),6],
-          [new Date('2025-07-26 00:29:39'),48],
-          [new Date('2025-07-26 00:6:41'),10],
-          [new Date('2025-07-26 00:24:14'),45],
-          [new Date('2025-07-26 00:51:21'),15],
-          [new Date('2025-07-26 00:2:46'),26],
-          [new Date('2025-07-26 00:19:15'),49],
-          [new Date('2025-07-26 00:44:5'),7],
-          [new Date('2025-07-26 00:23:41'),17],
-          [new Date('2025-07-26 00:24:55'),38],
-          [new Date('2025-07-26 00:28:22'),21],
-          [new Date('2025-07-26 00:41:10'),15],
-          [new Date('2025-07-26 00:51:40'),25],
-          [new Date('2025-07-26 00:54:14'),6],
-          [new Date('2025-07-26 00:57:26'),43],
-          [new Date('2025-07-26 00:17:54'),48],
-          [new Date('2025-07-26 00:51:3'),49],
-          [new Date('2025-07-26 00:42:33'),27],
-          [new Date('2025-07-26 00:14:44'),18],
-          [new Date('2025-07-26 00:35:55'),46],
-          [new Date('2025-07-26 00:0:25'),33],
-          [new Date('2025-07-26 00:46:10'),37],
-          [new Date('2025-07-26 00:50:2'),5],
-          [new Date('2025-07-26 00:28:45'),48],
-          [new Date('2025-07-26 00:57:25'),36],
-          [new Date('2025-07-26 00:11:4'),46],
-          [new Date('2025-07-26 00:37:9'),48],
-          [new Date('2025-07-26 00:51:16'),19],
-          [new Date('2025-07-26 00:55:51'),27],
-          [new Date('2025-07-26 00:22:33'),20],
-          [new Date('2025-07-26 00:0:49'),13],
-          [new Date('2025-07-26 00:44:33'),17],
-          [new Date('2025-07-26 00:26:58'),33],
-          [new Date('2025-07-26 00:30:40'),46],
-          [new Date('2025-07-26 00:28:24'),28],
-          [new Date('2025-07-26 00:28:48'),18],
-          [new Date('2025-07-26 00:7:5'),24],
-          [new Date('2025-07-26 00:8:26'),6],
-          [new Date('2025-07-26 00:20:40'),49],
-          [new Date('2025-07-26 00:34:17'),22],
-          [new Date('2025-07-26 00:15:13'),32],
-          [new Date('2025-07-26 00:38:33'),42],
-          [new Date('2025-07-26 00:55:56'),60],
-          [new Date('2025-07-26 00:26:51'),77],
-          [new Date('2025-07-26 00:32:55'),90],
-          [new Date('2025-07-26 00:4:36'),71],
-          [new Date('2025-07-26 00:45:7'),65],
-          [new Date('2025-07-26 00:26:15'),58],
-          [new Date('2025-07-26 00:9:48'),82],
-          [new Date('2025-07-26 00:21:47'),88],
-          [new Date('2025-07-26 00:30:41'),74],
-          [new Date('2025-07-26 00:19:53'),78],
-          [new Date('2025-07-26 00:28:32'),94],
-          [new Date('2025-07-26 00:37:43'),80],
-          [new Date('2025-07-26 00:24:35'),86],
-          [new Date('2025-07-26 00:19:57'),92],
-          [new Date('2025-07-26 00:5:41'),77],
-          [new Date('2025-07-26 00:11:40'),79],
-          [new Date('2025-07-26 00:30:56'),84],
-          [new Date('2025-07-26 00:34:23'),68],
-          [new Date('2025-07-26 00:23:46'),74],
-          [new Date('2025-07-26 00:8:4'),55],
-          [new Date('2025-07-26 00:9:19'),66],
-          [new Date('2025-07-26 00:20:0'),58],
-          [new Date('2025-07-26 00:43:9'),77],
-          [new Date('2025-07-26 00:4:2'),64],
-          [new Date('2025-07-26 00:41:28'),84],
-          [new Date('2025-07-26 00:20:3'),62],
-          [new Date('2025-07-26 00:27:26'),72],
-          [new Date('2025-07-26 00:9:47'),80],
-          [new Date('2025-07-26 00:21:15'),77],
-          [new Date('2025-07-26 00:30:14'),66],
-          [new Date('2025-07-26 00:22:41'),98],
-          [new Date('2025-07-26 00:2:24'),64],
-          [new Date('2025-07-26 00:44:31'),69],
-          [new Date('2025-07-26 00:25:10'),85],
-          [new Date('2025-07-26 00:1:35'),73],
-          [new Date('2025-07-26 00:13:6'),72],
-          [new Date('2025-07-26 00:40:34'),80],
-          [new Date('2025-07-26 00:52:25'),53],
-          [new Date('2025-07-26 00:58:24'),73],
-          [new Date('2025-07-26 00:18:10'),74],
-          [new Date('2025-07-26 00:4:48'),50],
-          [new Date('2025-07-26 00:27:15'),79],
-          [new Date('2025-07-26 00:2:47'),90],
-          [new Date('2025-07-26 00:38:51'),95],
-          [new Date('2025-07-26 00:19:13'),76],
-          [new Date('2025-07-26 00:15:56'),52],
-          [new Date('2025-07-26 00:23:37'),52],
-          [new Date('2025-07-26 00:23:38'),59],
-          [new Date('2025-07-26 00:39:32'),110],
-          [new Date('2025-07-26 00:11:9'),119],
-          [new Date('2025-07-26 00:19:22'),119],
-          [new Date('2025-07-26 00:57:14'),133],
-          [new Date('2025-07-26 00:9:24'),140],
-          [new Date('2025-07-26 00:44:21'),134],
-          [new Date('2025-07-26 00:54:0'),114],
-          [new Date('2025-07-26 00:32:17'),128],
-          [new Date('2025-07-26 00:17:42'),147],
-        ],
-        type: 'scatter'
-      }
-    ]
-  };
-  myChart.setOption( option);
+  getCanvasData(myChart)
   window.addEventListener('resize', ()=>{
     myChart.resize()
   })

src/views/BehaviorPage/component/ProcessCanvas.vue

@@ -2,6 +2,8 @@
 import {onMounted, type Ref, watch} from "vue";
 import * as echarts from 'echarts';
 import {inject} from "vue-demi";
+import type {EChartsType} from "echarts";
+import useApis from "@/apis";
 const props = defineProps<{
   assignmentId:number,
   splitNumber:number,
@@ -11,818 +13,205 @@ const currentEngagement = inject('currentEngagement') as Ref<any>;
 let productData = [];
 let cursorData = [];
 let processData = [];
-// watch(currentEngagement,getCanvasData);
-function getCanvasData(){
+watch(currentEngagement,()=>{
+  let chartDom = document.getElementById('process-canvas');
+  let myChart = echarts.getInstanceByDom(chartDom);
+  getCanvasData(myChart);
+});
+
+function formatTimeWithMilliseconds(stamp:number ){
+  const date = new Date(stamp);
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  const seconds = date.getSeconds().toString().padStart(2, '0');
+  const milliseconds = date.getMilliseconds().toString().padStart(3, '0');
+  return `${hours}:${minutes}:${seconds}.${milliseconds}`;
+}
+const apis = useApis();
+//停顿数据
+const pauseData:any[] = [];
+let chartData:any[] = [];
+//visualMap 上下限
+const limit = {
+  max:0,
+  min:0
+}
+function getCanvasData(chart:EChartsType){
   //TODO
+  if (!currentEngagement.value){
+    return;
+  }
+  chart.showLoading({text:'加载中'});
   let studentId = currentEngagement.value.studentId;
   let assignmentId = currentEngagement.value.assignmentId;
+  apis.getBehaviorRecordAll(studentId,assignmentId)
+      .then((res:any) => {
+        if (res && res.data && res.data.code === 200){
+          let rowData = res.data.data.events as any[];
+          console.log("行为数据",rowData);
+          let count = 0;
+          let insertCount = 0;
+          //数组初始化
+          cursorData.length=0;
+          productData.length = 0;
+          processData.length = 0;
+          pauseData.length = 0;
+          chartData.length = 0;
+          let zeroCount =0;
+          rowData.forEach((item:any) => {
+            // console.log("item",item)
+            let startStamp = 0;
+            if (item.startStamp){
+              startStamp = item.startStamp;
+            }
+            if (startStamp == 0){
+              zeroCount++;
+            }
+            if (zeroCount>1){
+              zeroCount = 0;
+              return;
+            }
+            let clock = new Date(startStamp);
+            clock.setHours(clock.getHours() + 16);
+            clock.setFullYear(2025)
+            clock.setMonth(6)
+            clock.setDate(26);
+            cursorData.push([clock,item.retain])
+            productData.push([clock,count])
+            processData.push([clock,insertCount])
+            pauseData.push([clock,item.pauseTime])
+            chartData.push([clock,item.pauseTime])
 
-  //测试用数据
+            limit.max = Math.max(limit.max,item.pauseTime);
+            if (item.type === 'insert'){
+              count++;
+              insertCount++;
+            }
+            if (item.type === 'delete'){
+              count--;
+            }
+          })
+          let option = {
+            xAxis: {
+              type: 'time',
+              axisPointer: {
+                label: {
+                  show: true,
+                  formatter: function(params) {
+                    return formatTimeWithMilliseconds(params.value);
+                  }
+                },
+                show: true,
+                type: "line"
+              },
+              splitNumber: props.splitNumber
+            },
+            yAxis: [{
+              type: 'value',
+              name:'characters',
+              position:'left',
+              alignTicks:true
+            },{
+              type: 'value',
+              name:'停顿时间(ms)',
+              position: 'right',
+            }],
+            tooltip:{
 
-  productData = [[new Date('2025-07-26 00:0:20'),0],
-    [new Date('2025-07-26 00:0:40'),15],
-    [new Date('2025-07-26 00:1:0'),15],
-    [new Date('2025-07-26 00:1:20'),17],
-    [new Date('2025-07-26 00:1:40'),21],
-    [new Date('2025-07-26 00:2:0'),39],
-    [new Date('2025-07-26 00:2:20'),49],
-    [new Date('2025-07-26 00:2:40'),61],
-    [new Date('2025-07-26 00:3:0'),71],
-    [new Date('2025-07-26 00:3:20'),89],
-    [new Date('2025-07-26 00:3:40'),103],
-    [new Date('2025-07-26 00:4:0'),109],
-    [new Date('2025-07-26 00:4:20'),109],
-    [new Date('2025-07-26 00:4:40'),128],
-    [new Date('2025-07-26 00:5:0'),143],
-    [new Date('2025-07-26 00:5:20'),143],
-    [new Date('2025-07-26 00:5:40'),145],
-    [new Date('2025-07-26 00:6:0'),160],
-    [new Date('2025-07-26 00:6:20'),177],
-    [new Date('2025-07-26 00:6:40'),177],
-    [new Date('2025-07-26 00:7:0'),196],
-    [new Date('2025-07-26 00:7:20'),199],
-    [new Date('2025-07-26 00:7:40'),204],
-    [new Date('2025-07-26 00:8:0'),209],
-    [new Date('2025-07-26 00:8:20'),213],
-    [new Date('2025-07-26 00:8:40'),229],
-    [new Date('2025-07-26 00:9:0'),245],
-    [new Date('2025-07-26 00:9:20'),250],
-    [new Date('2025-07-26 00:9:40'),250],
-    [new Date('2025-07-26 00:10:0'),265],
-    [new Date('2025-07-26 00:10:20'),266],
-    [new Date('2025-07-26 00:10:40'),282],
-    [new Date('2025-07-26 00:11:0'),291],
-    [new Date('2025-07-26 00:11:20'),308],
-    [new Date('2025-07-26 00:11:40'),322],
-    [new Date('2025-07-26 00:12:0'),335],
-    [new Date('2025-07-26 00:12:20'),343],
-    [new Date('2025-07-26 00:12:40'),350],
-    [new Date('2025-07-26 00:13:0'),354],
-    [new Date('2025-07-26 00:13:20'),367],
-    [new Date('2025-07-26 00:13:40'),386],
-    [new Date('2025-07-26 00:14:0'),392],
-    [new Date('2025-07-26 00:14:20'),411],
-    [new Date('2025-07-26 00:14:40'),414],
-    [new Date('2025-07-26 00:15:0'),431],
-    [new Date('2025-07-26 00:15:20'),437],
-    [new Date('2025-07-26 00:15:40'),450],
-    [new Date('2025-07-26 00:16:0'),453],
-    [new Date('2025-07-26 00:16:20'),468],
-    [new Date('2025-07-26 00:16:40'),469],
-    [new Date('2025-07-26 00:17:0'),486],
-    [new Date('2025-07-26 00:17:20'),486],
-    [new Date('2025-07-26 00:17:40'),501],
-    [new Date('2025-07-26 00:18:0'),508],
-    [new Date('2025-07-26 00:18:20'),515],
-    [new Date('2025-07-26 00:18:40'),523],
-    [new Date('2025-07-26 00:19:0'),524],
-    [new Date('2025-07-26 00:19:20'),529],
-    [new Date('2025-07-26 00:19:40'),536],
-    [new Date('2025-07-26 00:20:0'),554],
-    [new Date('2025-07-26 00:20:20'),563],
-    [new Date('2025-07-26 00:20:40'),570],
-    [new Date('2025-07-26 00:21:0'),589],
-    [new Date('2025-07-26 00:21:20'),600],
-    [new Date('2025-07-26 00:21:40'),602],
-    [new Date('2025-07-26 00:22:0'),602],
-    [new Date('2025-07-26 00:22:20'),618],
-    [new Date('2025-07-26 00:22:40'),620],
-    [new Date('2025-07-26 00:23:0'),636],
-    [new Date('2025-07-26 00:23:20'),650],
-    [new Date('2025-07-26 00:23:40'),653],
-    [new Date('2025-07-26 00:24:0'),668],
-    [new Date('2025-07-26 00:24:20'),670],
-    [new Date('2025-07-26 00:24:40'),680],
-    [new Date('2025-07-26 00:25:0'),680],
-    [new Date('2025-07-26 00:25:20'),695],
-    [new Date('2025-07-26 00:25:40'),709],
-    [new Date('2025-07-26 00:26:0'),714],
-    [new Date('2025-07-26 00:26:20'),714],
-    [new Date('2025-07-26 00:26:40'),729],
-    [new Date('2025-07-26 00:27:0'),743],
-    [new Date('2025-07-26 00:27:20'),747],
-    [new Date('2025-07-26 00:27:40'),764],
-    [new Date('2025-07-26 00:28:0'),783],
-    [new Date('2025-07-26 00:28:20'),792],
-    [new Date('2025-07-26 00:28:40'),806],
-    [new Date('2025-07-26 00:29:0'),817],
-    [new Date('2025-07-26 00:29:20'),823],
-    [new Date('2025-07-26 00:29:40'),837],
-    [new Date('2025-07-26 00:30:0'),854],];
-  cursorData = [[new Date('2025-07-26 00:0:20'),0],
-    [new Date('2025-07-26 00:0:40'),15],
-    [new Date('2025-07-26 00:1:0'),15],
-    [new Date('2025-07-26 00:1:20'),17],
-    [new Date('2025-07-26 00:1:40'),21],
-    [new Date('2025-07-26 00:2:0'),39],
-    [new Date('2025-07-26 00:2:20'),49],
-    [new Date('2025-07-26 00:2:40'),61],
-    [new Date('2025-07-26 00:3:0'),71],
-    [new Date('2025-07-26 00:3:20'),89],
-    [new Date('2025-07-26 00:3:40'),103],
-    [new Date('2025-07-26 00:4:0'),109],
-    [new Date('2025-07-26 00:4:20'),109],
-    [new Date('2025-07-26 00:4:40'),128],
-    [new Date('2025-07-26 00:5:0'),143],
-    [new Date('2025-07-26 00:5:20'),143],
-    [new Date('2025-07-26 00:5:40'),145],
-    [new Date('2025-07-26 00:6:0'),160],
-    [new Date('2025-07-26 00:6:20'),177],
-    [new Date('2025-07-26 00:6:40'),177],
-    [new Date('2025-07-26 00:7:0'),196],
-    [new Date('2025-07-26 00:7:20'),199],
-    [new Date('2025-07-26 00:7:40'),204],
-    [new Date('2025-07-26 00:7:41'),150],
-    [new Date('2025-07-26 00:7:59'),158],
-    [new Date('2025-07-26 00:8:0'),212],
-    [new Date('2025-07-26 00:8:20'),213],
-    [new Date('2025-07-26 00:8:40'),229],
-    [new Date('2025-07-26 00:9:0'),245],
-    [new Date('2025-07-26 00:9:20'),250],
-    [new Date('2025-07-26 00:9:40'),250],
-    [new Date('2025-07-26 00:10:0'),265],
-    [new Date('2025-07-26 00:10:20'),266],
-    [new Date('2025-07-26 00:10:40'),282],
-    [new Date('2025-07-26 00:11:0'),291],
-    [new Date('2025-07-26 00:11:20'),308],
-    [new Date('2025-07-26 00:11:40'),322],
-    [new Date('2025-07-26 00:12:0'),335],
-    [new Date('2025-07-26 00:12:20'),343],
-    [new Date('2025-07-26 00:12:40'),350],
-    [new Date('2025-07-26 00:13:0'),354],
-    [new Date('2025-07-26 00:13:20'),367],
-    [new Date('2025-07-26 00:13:40'),386],
-    [new Date('2025-07-26 00:14:0'),392],
-    [new Date('2025-07-26 00:14:20'),411],
-    [new Date('2025-07-26 00:14:40'),414],
-    [new Date('2025-07-26 00:15:0'),431],
-    [new Date('2025-07-26 00:15:20'),437],
-    [new Date('2025-07-26 00:15:40'),450],
-    [new Date('2025-07-26 00:16:0'),453],
-    [new Date('2025-07-26 00:16:20'),468],
-    [new Date('2025-07-26 00:16:40'),469],
-    [new Date('2025-07-26 00:17:0'),486],
-    [new Date('2025-07-26 00:17:20'),486],
-    [new Date('2025-07-26 00:17:40'),501],
-    [new Date('2025-07-26 00:18:0'),508],
-    [new Date('2025-07-26 00:18:20'),515],
-    [new Date('2025-07-26 00:18:40'),523],
-    [new Date('2025-07-26 00:19:0'),524],
-    [new Date('2025-07-26 00:19:20'),529],
-    [new Date('2025-07-26 00:19:40'),536],
-    [new Date('2025-07-26 00:20:0'),554],
-    [new Date('2025-07-26 00:20:20'),563],
-    [new Date('2025-07-26 00:20:40'),570],
-    [new Date('2025-07-26 00:21:0'),589],
-    [new Date('2025-07-26 00:21:20'),600],
-    [new Date('2025-07-26 00:21:40'),602],
-    [new Date('2025-07-26 00:22:0'),602],
-    [new Date('2025-07-26 00:22:20'),618],
-    [new Date('2025-07-26 00:22:40'),620],
-    [new Date('2025-07-26 00:23:0'),636],
-    [new Date('2025-07-26 00:23:20'),650],
-    [new Date('2025-07-26 00:23:40'),653],
-    [new Date('2025-07-26 00:24:0'),668],
-    [new Date('2025-07-26 00:24:20'),670],
-    [new Date('2025-07-26 00:24:40'),680],
-    [new Date('2025-07-26 00:25:0'),680],
-    [new Date('2025-07-26 00:25:20'),695],
-    [new Date('2025-07-26 00:25:40'),709],
-    [new Date('2025-07-26 00:26:0'),714],
-    [new Date('2025-07-26 00:26:20'),714],
-    [new Date('2025-07-26 00:26:21'),500],
-    [new Date('2025-07-26 00:26:30'),515],
-    [new Date('2025-07-26 00:26:39'),515],
-    [new Date('2025-07-26 00:26:40'),729],
-    [new Date('2025-07-26 00:27:0'),743],
-    [new Date('2025-07-26 00:27:20'),747],
-    [new Date('2025-07-26 00:27:40'),764],
-    [new Date('2025-07-26 00:28:0'),783],
-    [new Date('2025-07-26 00:28:20'),792],
-    [new Date('2025-07-26 00:28:40'),806],
-    [new Date('2025-07-26 00:29:0'),817],
-    [new Date('2025-07-26 00:29:20'),823],
-    [new Date('2025-07-26 00:29:40'),837],
-    [new Date('2025-07-26 00:30:0'),854],];
-  let count = 0;
-  processData = [];
-  for (let i = 0; i < productData.length; i++) {
-    if (i%2 == 0)count+=7;
-    processData.push([productData[i][0],productData[i][1]+count]);
-  }
-  let chartDom = document.getElementById('edit-canvas');
-  let myChart = echarts.getInstanceByDom(chartDom);
-  let option = {
-    xAxis: {
-      type: 'time',
-      axisPointer: {
-        value: "2016-10-7",
-        snap: true,
-        label: {
-          show: true,
-          formatter: function(params) {
-            return echarts.format.formatTime('hh:mm:ss', params.value);
-          }
-        },
-        show: true,
-        type: "line"
-      },
-      splitNumber: props.splitNumber
-    },
-    yAxis: {
-      type: 'value',
-      name:'characters'
-    },
-    tooltip:{
+            },
+            dataZoom: [
+              {
+                type: 'inside',
+              },
+              {
+                type: 'slider',
+              }
+            ],
+            legend:{
+              left:0
+            },
+            visualMap: {
+              type: 'continuous', // 连续型映射
+              calculable: true,
+              min: 0,             // 数据最小值
+              max: limit.max,           // 数据最大值
+              dimension: 1,       // 根据第2个维度（y值）映射颜色
+              inRange: {
+                color: ['orange', 'red'] // 渐变范围：小值→蓝色，大值→红色
+              },
+              seriesIndex: [3],
+              itemWidth: 10,
+              top:0,
+              right:0,
+              orient:'horizontal',
+              align: 'right',
+            },
+            series: [
+              {
+                itemStyle: {
+                  color:'#37ff00',
+                  opacity: 0
+                },
+                name:'product',
+                data: productData,
+                type: 'line',
+                yAxisIndex: 0
+              },
+              {
+                itemStyle: {
+                  color:'#37ff00',
+                  opacity: 0
+                },
+                lineStyle: {
+                  type: "dotted"
+                },
+                name:'cursor',
+                data: cursorData,
+                type: 'line',
+                yAxisIndex: 0
+              },
+              {
+                itemStyle: {
+                  color:'#1d86dc',
+                  opacity: 0
+                },
+                name:'process',
+                data: processData,
+                type: 'line',
+                yAxisIndex: 0
+              },
+              {
+                symbolSize: 10,
+
+                data: chartData,
+                type: 'scatter',
+                yAxisIndex: 1
+              }
+            ]
+          };
+          chart.setOption( option);
+          chart.hideLoading();
+          chart.on('datarangeselected', (params:any) => {
+            let range = params.selected as [number,number];
+            chartData = pauseData.filter((item:any) => {
+              return item[1] >= range[0] && item[1] <= range[1];
+            })
+            option.series[3].data = chartData;
+            chart.setOption(option)
+          });
+        }
+      })
+  //测试用数据
 
-    },
-    dataZoom: [
-      {
-        type: 'inside',
-      },
-      {
-        type: 'slider',
-      }
-    ],
-    legend:{},
-    series: [
-      {
-        itemStyle: {
-          color:'#ff9300',
-          opacity: 0
-        },
-        name:'product',
-        data: productData,
-        type: 'line'
-      },
-      {
-        itemStyle: {
-          color:'#ff9300',
-          opacity: 0
-        },
-        lineStyle: {
-          type: "dotted"
-        },
-        name:'cursor',
-        data: cursorData,
-        type: 'line'
-      }
-    ]
-  };
-  myChart.setOption( option);
 }
 
-//停顿数据
-let pauseData = [
-  [new Date('2025-07-26 00:33:42'),44],
-  [new Date('2025-07-26 00:52:57'),39],
-  [new Date('2025-07-26 00:46:26'),14],
-  [new Date('2025-07-26 00:34:36'),28],
-  [new Date('2025-07-26 00:17:17'),43],
-  [new Date('2025-07-26 00:50:39'),23],
-  [new Date('2025-07-26 00:42:20'),13],
-  [new Date('2025-07-26 00:33:5'),44],
-  [new Date('2025-07-26 00:42:31'),32],
-  [new Date('2025-07-26 00:13:16'),48],
-  [new Date('2025-07-26 00:0:23'),40],
-  [new Date('2025-07-26 00:24:46'),39],
-  [new Date('2025-07-26 00:4:44'),49],
-  [new Date('2025-07-26 00:2:4'),43],
-  [new Date('2025-07-26 00:25:6'),21],
-  [new Date('2025-07-26 00:18:38'),26],
-  [new Date('2025-07-26 00:16:40'),43],
-  [new Date('2025-07-26 00:37:45'),5],
-  [new Date('2025-07-26 00:49:42'),27],
-  [new Date('2025-07-26 00:45:31'),34],
-  [new Date('2025-07-26 00:51:19'),25],
-  [new Date('2025-07-26 00:43:16'),42],
-  [new Date('2025-07-26 00:16:39'),7],
-  [new Date('2025-07-26 00:38:48'),32],
-  [new Date('2025-07-26 00:34:43'),33],
-  [new Date('2025-07-26 00:6:43'),48],
-  [new Date('2025-07-26 00:45:28'),30],
-  [new Date('2025-07-26 00:4:29'),48],
-  [new Date('2025-07-26 00:35:21'),41],
-  [new Date('2025-07-26 00:23:57'),44],
-  [new Date('2025-07-26 00:8:1'),29],
-  [new Date('2025-07-26 00:7:4'),40],
-  [new Date('2025-07-26 00:3:43'),11],
-  [new Date('2025-07-26 00:40:12'),12],
-  [new Date('2025-07-26 00:23:35'),32],
-  [new Date('2025-07-26 00:9:28'),16],
-  [new Date('2025-07-26 00:7:45'),30],
-  [new Date('2025-07-26 00:31:11'),24],
-  [new Date('2025-07-26 00:46:4'),41],
-  [new Date('2025-07-26 00:34:29'),49],
-  [new Date('2025-07-26 00:42:9'),39],
-  [new Date('2025-07-26 00:35:46'),20],
-  [new Date('2025-07-26 00:17:23'),48],
-  [new Date('2025-07-26 00:19:46'),6],
-  [new Date('2025-07-26 00:8:6'),41],
-  [new Date('2025-07-26 00:55:38'),27],
-  [new Date('2025-07-26 00:33:10'),41],
-  [new Date('2025-07-26 00:32:12'),26],
-  [new Date('2025-07-26 00:58:44'),43],
-  [new Date('2025-07-26 00:30:21'),19],
-  [new Date('2025-07-26 00:46:38'),34],
-  [new Date('2025-07-26 00:20:2'),22],
-  [new Date('2025-07-26 00:44:57'),33],
-  [new Date('2025-07-26 00:11:49'),37],
-  [new Date('2025-07-26 00:24:43'),15],
-  [new Date('2025-07-26 00:30:2'),42],
-  [new Date('2025-07-26 00:57:17'),40],
-  [new Date('2025-07-26 00:6:29'),27],
-  [new Date('2025-07-26 00:15:9'),27],
-  [new Date('2025-07-26 00:13:57'),22],
-  [new Date('2025-07-26 00:54:8'),36],
-  [new Date('2025-07-26 00:5:29'),31],
-  [new Date('2025-07-26 00:38:36'),29],
-  [new Date('2025-07-26 00:6:1'),37],
-  [new Date('2025-07-26 00:11:22'),5],
-  [new Date('2025-07-26 00:10:8'),25],
-  [new Date('2025-07-26 00:43:29'),22],
-  [new Date('2025-07-26 00:9:30'),14],
-  [new Date('2025-07-26 00:44:39'),41],
-  [new Date('2025-07-26 00:48:17'),36],
-  [new Date('2025-07-26 00:6:5'),48],
-  [new Date('2025-07-26 00:13:31'),13],
-  [new Date('2025-07-26 00:12:37'),28],
-  [new Date('2025-07-26 00:1:4'),49],
-  [new Date('2025-07-26 00:48:20'),39],
-  [new Date('2025-07-26 00:52:32'),46],
-  [new Date('2025-07-26 00:35:0'),48],
-  [new Date('2025-07-26 00:28:2'),13],
-  [new Date('2025-07-26 00:19:11'),41],
-  [new Date('2025-07-26 00:8:48'),21],
-  [new Date('2025-07-26 00:46:2'),34],
-  [new Date('2025-07-26 00:49:29'),16],
-  [new Date('2025-07-26 00:24:22'),17],
-  [new Date('2025-07-26 00:10:11'),5],
-  [new Date('2025-07-26 00:14:10'),47],
-  [new Date('2025-07-26 00:18:44'),19],
-  [new Date('2025-07-26 00:18:15'),31],
-  [new Date('2025-07-26 00:16:10'),15],
-  [new Date('2025-07-26 00:37:51'),25],
-  [new Date('2025-07-26 00:30:13'),40],
-  [new Date('2025-07-26 00:33:35'),24],
-  [new Date('2025-07-26 00:19:29'),47],
-  [new Date('2025-07-26 00:29:23'),40],
-  [new Date('2025-07-26 00:19:10'),12],
-  [new Date('2025-07-26 00:4:37'),8],
-  [new Date('2025-07-26 00:38:0'),22],
-  [new Date('2025-07-26 00:36:24'),7],
-  [new Date('2025-07-26 00:4:22'),29],
-  [new Date('2025-07-26 00:39:22'),32],
-  [new Date('2025-07-26 00:40:33'),48],
-  [new Date('2025-07-26 00:33:14'),10],
-  [new Date('2025-07-26 00:20:18'),22],
-  [new Date('2025-07-26 00:39:52'),31],
-  [new Date('2025-07-26 00:21:40'),16],
-  [new Date('2025-07-26 00:56:33'),46],
-  [new Date('2025-07-26 00:56:50'),43],
-  [new Date('2025-07-26 00:16:15'),39],
-  [new Date('2025-07-26 00:30:44'),48],
-  [new Date('2025-07-26 00:35:56'),14],
-  [new Date('2025-07-26 00:57:33'),9],
-  [new Date('2025-07-26 00:15:23'),21],
-  [new Date('2025-07-26 00:26:0'),7],
-  [new Date('2025-07-26 00:50:23'),10],
-  [new Date('2025-07-26 00:32:23'),10],
-  [new Date('2025-07-26 00:3:21'),18],
-  [new Date('2025-07-26 00:27:34'),23],
-  [new Date('2025-07-26 00:54:37'),40],
-  [new Date('2025-07-26 00:49:34'),23],
-  [new Date('2025-07-26 00:29:30'),41],
-  [new Date('2025-07-26 00:24:49'),37],
-  [new Date('2025-07-26 00:18:20'),34],
-  [new Date('2025-07-26 00:13:55'),36],
-  [new Date('2025-07-26 00:51:10'),42],
-  [new Date('2025-07-26 00:32:49'),31],
-  [new Date('2025-07-26 00:0:17'),22],
-  [new Date('2025-07-26 00:39:7'),30],
-  [new Date('2025-07-26 00:52:49'),17],
-  [new Date('2025-07-26 00:49:12'),42],
-  [new Date('2025-07-26 00:23:26'),17],
-  [new Date('2025-07-26 00:29:12'),19],
-  [new Date('2025-07-26 00:21:26'),28],
-  [new Date('2025-07-26 00:25:41'),14],
-  [new Date('2025-07-26 00:23:17'),38],
-  [new Date('2025-07-26 00:29:42'),16],
-  [new Date('2025-07-26 00:53:5'),13],
-  [new Date('2025-07-26 00:31:51'),21],
-  [new Date('2025-07-26 00:31:46'),8],
-  [new Date('2025-07-26 00:48:2'),41],
-  [new Date('2025-07-26 00:25:58'),47],
-  [new Date('2025-07-26 00:18:54'),30],
-  [new Date('2025-07-26 00:50:19'),40],
-  [new Date('2025-07-26 00:16:11'),13],
-  [new Date('2025-07-26 00:5:12'),42],
-  [new Date('2025-07-26 00:48:55'),12],
-  [new Date('2025-07-26 00:29:53'),31],
-  [new Date('2025-07-26 00:40:43'),33],
-  [new Date('2025-07-26 00:28:7'),43],
-  [new Date('2025-07-26 00:43:15'),37],
-  [new Date('2025-07-26 00:47:37'),6],
-  [new Date('2025-07-26 00:46:47'),41],
-  [new Date('2025-07-26 00:6:34'),40],
-  [new Date('2025-07-26 00:16:57'),6],
-  [new Date('2025-07-26 00:29:39'),48],
-  [new Date('2025-07-26 00:6:41'),10],
-  [new Date('2025-07-26 00:24:14'),45],
-  [new Date('2025-07-26 00:51:21'),15],
-  [new Date('2025-07-26 00:2:46'),26],
-  [new Date('2025-07-26 00:19:15'),49],
-  [new Date('2025-07-26 00:44:5'),7],
-  [new Date('2025-07-26 00:23:41'),17],
-  [new Date('2025-07-26 00:24:55'),38],
-  [new Date('2025-07-26 00:28:22'),21],
-  [new Date('2025-07-26 00:41:10'),15],
-  [new Date('2025-07-26 00:51:40'),25],
-  [new Date('2025-07-26 00:54:14'),6],
-  [new Date('2025-07-26 00:57:26'),43],
-  [new Date('2025-07-26 00:17:54'),48],
-  [new Date('2025-07-26 00:51:3'),49],
-  [new Date('2025-07-26 00:42:33'),27],
-  [new Date('2025-07-26 00:14:44'),18],
-  [new Date('2025-07-26 00:35:55'),46],
-  [new Date('2025-07-26 00:0:25'),33],
-  [new Date('2025-07-26 00:46:10'),37],
-  [new Date('2025-07-26 00:50:2'),5],
-  [new Date('2025-07-26 00:28:45'),48],
-  [new Date('2025-07-26 00:57:25'),36],
-  [new Date('2025-07-26 00:11:4'),46],
-  [new Date('2025-07-26 00:37:9'),48],
-  [new Date('2025-07-26 00:51:16'),19],
-  [new Date('2025-07-26 00:55:51'),27],
-  [new Date('2025-07-26 00:22:33'),20],
-  [new Date('2025-07-26 00:0:49'),13],
-  [new Date('2025-07-26 00:44:33'),17],
-  [new Date('2025-07-26 00:26:58'),33],
-  [new Date('2025-07-26 00:30:40'),46],
-  [new Date('2025-07-26 00:28:24'),28],
-  [new Date('2025-07-26 00:28:48'),18],
-  [new Date('2025-07-26 00:7:5'),24],
-  [new Date('2025-07-26 00:8:26'),6],
-  [new Date('2025-07-26 00:20:40'),49],
-  [new Date('2025-07-26 00:34:17'),22],
-  [new Date('2025-07-26 00:15:13'),32],
-  [new Date('2025-07-26 00:38:33'),42],
-  [new Date('2025-07-26 00:55:56'),60],
-  [new Date('2025-07-26 00:26:51'),77],
-  [new Date('2025-07-26 00:32:55'),90],
-  [new Date('2025-07-26 00:4:36'),71],
-  [new Date('2025-07-26 00:45:7'),65],
-  [new Date('2025-07-26 00:26:15'),58],
-  [new Date('2025-07-26 00:9:48'),82],
-  [new Date('2025-07-26 00:21:47'),88],
-  [new Date('2025-07-26 00:30:41'),74],
-  [new Date('2025-07-26 00:19:53'),78],
-  [new Date('2025-07-26 00:28:32'),94],
-  [new Date('2025-07-26 00:37:43'),80],
-  [new Date('2025-07-26 00:24:35'),86],
-  [new Date('2025-07-26 00:19:57'),92],
-  [new Date('2025-07-26 00:5:41'),77],
-  [new Date('2025-07-26 00:11:40'),79],
-  [new Date('2025-07-26 00:30:56'),84],
-  [new Date('2025-07-26 00:34:23'),68],
-  [new Date('2025-07-26 00:23:46'),74],
-  [new Date('2025-07-26 00:8:4'),55],
-  [new Date('2025-07-26 00:9:19'),66],
-  [new Date('2025-07-26 00:20:0'),58],
-  [new Date('2025-07-26 00:43:9'),77],
-  [new Date('2025-07-26 00:4:2'),64],
-  [new Date('2025-07-26 00:41:28'),84],
-  [new Date('2025-07-26 00:20:3'),62],
-  [new Date('2025-07-26 00:27:26'),72],
-  [new Date('2025-07-26 00:9:47'),80],
-  [new Date('2025-07-26 00:21:15'),77],
-  [new Date('2025-07-26 00:30:14'),66],
-  [new Date('2025-07-26 00:22:41'),98],
-  [new Date('2025-07-26 00:2:24'),64],
-  [new Date('2025-07-26 00:44:31'),69],
-  [new Date('2025-07-26 00:25:10'),85],
-  [new Date('2025-07-26 00:1:35'),73],
-  [new Date('2025-07-26 00:13:6'),72],
-  [new Date('2025-07-26 00:40:34'),80],
-  [new Date('2025-07-26 00:52:25'),53],
-  [new Date('2025-07-26 00:58:24'),73],
-  [new Date('2025-07-26 00:18:10'),74],
-  [new Date('2025-07-26 00:4:48'),50],
-  [new Date('2025-07-26 00:27:15'),79],
-  [new Date('2025-07-26 00:2:47'),90],
-  [new Date('2025-07-26 00:38:51'),95],
-  [new Date('2025-07-26 00:19:13'),76],
-  [new Date('2025-07-26 00:15:56'),52],
-  [new Date('2025-07-26 00:23:37'),52],
-  [new Date('2025-07-26 00:23:38'),59],
-  [new Date('2025-07-26 00:39:32'),110],
-  [new Date('2025-07-26 00:11:9'),119],
-  [new Date('2025-07-26 00:19:22'),119],
-  [new Date('2025-07-26 00:57:14'),133],
-  [new Date('2025-07-26 00:9:24'),140],
-  [new Date('2025-07-26 00:44:21'),134],
-  [new Date('2025-07-26 00:54:0'),114],
-  [new Date('2025-07-26 00:32:17'),128],
-  [new Date('2025-07-26 00:17:42'),147],
-].filter((item:[Date,number]) => item[0].getMinutes()<=29)
 
 
 
 onMounted(()=>{
   let chartDom = document.getElementById('process-canvas');
   let myChart = echarts.init(chartDom);
-  productData = [[new Date('2025-07-26 00:0:20'),0],
-    [new Date('2025-07-26 00:0:40'),15],
-    [new Date('2025-07-26 00:1:0'),15],
-    [new Date('2025-07-26 00:1:20'),17],
-    [new Date('2025-07-26 00:1:40'),21],
-    [new Date('2025-07-26 00:2:0'),39],
-    [new Date('2025-07-26 00:2:20'),49],
-    [new Date('2025-07-26 00:2:40'),61],
-    [new Date('2025-07-26 00:3:0'),71],
-    [new Date('2025-07-26 00:3:20'),89],
-    [new Date('2025-07-26 00:3:40'),103],
-    [new Date('2025-07-26 00:4:0'),109],
-    [new Date('2025-07-26 00:4:20'),109],
-    [new Date('2025-07-26 00:4:40'),128],
-    [new Date('2025-07-26 00:5:0'),143],
-    [new Date('2025-07-26 00:5:20'),143],
-    [new Date('2025-07-26 00:5:40'),145],
-    [new Date('2025-07-26 00:6:0'),160],
-    [new Date('2025-07-26 00:6:20'),177],
-    [new Date('2025-07-26 00:6:40'),177],
-    [new Date('2025-07-26 00:7:0'),196],
-    [new Date('2025-07-26 00:7:20'),199],
-    [new Date('2025-07-26 00:7:40'),204],
-    [new Date('2025-07-26 00:8:0'),209],
-    [new Date('2025-07-26 00:8:20'),213],
-    [new Date('2025-07-26 00:8:40'),229],
-    [new Date('2025-07-26 00:9:0'),245],
-    [new Date('2025-07-26 00:9:20'),250],
-    [new Date('2025-07-26 00:9:40'),250],
-    [new Date('2025-07-26 00:10:0'),265],
-    [new Date('2025-07-26 00:10:20'),266],
-    [new Date('2025-07-26 00:10:40'),282],
-    [new Date('2025-07-26 00:11:0'),291],
-    [new Date('2025-07-26 00:11:20'),308],
-    [new Date('2025-07-26 00:11:40'),322],
-    [new Date('2025-07-26 00:12:0'),335],
-    [new Date('2025-07-26 00:12:20'),343],
-    [new Date('2025-07-26 00:12:40'),350],
-    [new Date('2025-07-26 00:13:0'),354],
-    [new Date('2025-07-26 00:13:20'),367],
-    [new Date('2025-07-26 00:13:40'),386],
-    [new Date('2025-07-26 00:14:0'),392],
-    [new Date('2025-07-26 00:14:20'),411],
-    [new Date('2025-07-26 00:14:40'),414],
-    [new Date('2025-07-26 00:15:0'),431],
-    [new Date('2025-07-26 00:15:20'),437],
-    [new Date('2025-07-26 00:15:40'),450],
-    [new Date('2025-07-26 00:16:0'),453],
-    [new Date('2025-07-26 00:16:20'),468],
-    [new Date('2025-07-26 00:16:40'),469],
-    [new Date('2025-07-26 00:17:0'),486],
-    [new Date('2025-07-26 00:17:20'),486],
-    [new Date('2025-07-26 00:17:40'),501],
-    [new Date('2025-07-26 00:18:0'),508],
-    [new Date('2025-07-26 00:18:20'),515],
-    [new Date('2025-07-26 00:18:40'),523],
-    [new Date('2025-07-26 00:19:0'),524],
-    [new Date('2025-07-26 00:19:20'),529],
-    [new Date('2025-07-26 00:19:40'),536],
-    [new Date('2025-07-26 00:20:0'),554],
-    [new Date('2025-07-26 00:20:20'),563],
-    [new Date('2025-07-26 00:20:40'),570],
-    [new Date('2025-07-26 00:21:0'),589],
-    [new Date('2025-07-26 00:21:20'),600],
-    [new Date('2025-07-26 00:21:40'),602],
-    [new Date('2025-07-26 00:22:0'),602],
-    [new Date('2025-07-26 00:22:20'),618],
-    [new Date('2025-07-26 00:22:40'),620],
-    [new Date('2025-07-26 00:23:0'),636],
-    [new Date('2025-07-26 00:23:20'),650],
-    [new Date('2025-07-26 00:23:40'),653],
-    [new Date('2025-07-26 00:24:0'),668],
-    [new Date('2025-07-26 00:24:20'),670],
-    [new Date('2025-07-26 00:24:40'),680],
-    [new Date('2025-07-26 00:25:0'),680],
-    [new Date('2025-07-26 00:25:20'),695],
-    [new Date('2025-07-26 00:25:40'),709],
-    [new Date('2025-07-26 00:26:0'),714],
-    [new Date('2025-07-26 00:26:20'),714],
-    [new Date('2025-07-26 00:26:40'),729],
-    [new Date('2025-07-26 00:27:0'),743],
-    [new Date('2025-07-26 00:27:20'),747],
-    [new Date('2025-07-26 00:27:40'),764],
-    [new Date('2025-07-26 00:28:0'),783],
-    [new Date('2025-07-26 00:28:20'),792],
-    [new Date('2025-07-26 00:28:40'),806],
-    [new Date('2025-07-26 00:29:0'),817],
-    [new Date('2025-07-26 00:29:20'),823],
-    [new Date('2025-07-26 00:29:40'),837],
-    [new Date('2025-07-26 00:30:0'),854],];
-  cursorData = [[new Date('2025-07-26 00:0:20'),0],
-    [new Date('2025-07-26 00:0:40'),15],
-    [new Date('2025-07-26 00:1:0'),15],
-    [new Date('2025-07-26 00:1:20'),17],
-    [new Date('2025-07-26 00:1:40'),21],
-    [new Date('2025-07-26 00:2:0'),39],
-    [new Date('2025-07-26 00:2:20'),49],
-    [new Date('2025-07-26 00:2:40'),61],
-    [new Date('2025-07-26 00:3:0'),71],
-    [new Date('2025-07-26 00:3:20'),89],
-    [new Date('2025-07-26 00:3:40'),103],
-    [new Date('2025-07-26 00:4:0'),109],
-    [new Date('2025-07-26 00:4:20'),109],
-    [new Date('2025-07-26 00:4:40'),128],
-    [new Date('2025-07-26 00:5:0'),143],
-    [new Date('2025-07-26 00:5:20'),143],
-    [new Date('2025-07-26 00:5:40'),145],
-    [new Date('2025-07-26 00:6:0'),160],
-    [new Date('2025-07-26 00:6:20'),177],
-    [new Date('2025-07-26 00:6:40'),177],
-    [new Date('2025-07-26 00:7:0'),196],
-    [new Date('2025-07-26 00:7:20'),199],
-    [new Date('2025-07-26 00:7:40'),204],
-    [new Date('2025-07-26 00:7:41'),150],
-    [new Date('2025-07-26 00:7:59'),158],
-    [new Date('2025-07-26 00:8:0'),212],
-    [new Date('2025-07-26 00:8:20'),213],
-    [new Date('2025-07-26 00:8:40'),229],
-    [new Date('2025-07-26 00:9:0'),245],
-    [new Date('2025-07-26 00:9:20'),250],
-    [new Date('2025-07-26 00:9:40'),250],
-    [new Date('2025-07-26 00:10:0'),265],
-    [new Date('2025-07-26 00:10:20'),266],
-    [new Date('2025-07-26 00:10:40'),282],
-    [new Date('2025-07-26 00:11:0'),291],
-    [new Date('2025-07-26 00:11:20'),308],
-    [new Date('2025-07-26 00:11:40'),322],
-    [new Date('2025-07-26 00:12:0'),335],
-    [new Date('2025-07-26 00:12:20'),343],
-    [new Date('2025-07-26 00:12:40'),350],
-    [new Date('2025-07-26 00:13:0'),354],
-    [new Date('2025-07-26 00:13:20'),367],
-    [new Date('2025-07-26 00:13:40'),386],
-    [new Date('2025-07-26 00:14:0'),392],
-    [new Date('2025-07-26 00:14:20'),411],
-    [new Date('2025-07-26 00:14:40'),414],
-    [new Date('2025-07-26 00:15:0'),431],
-    [new Date('2025-07-26 00:15:20'),437],
-    [new Date('2025-07-26 00:15:40'),450],
-    [new Date('2025-07-26 00:16:0'),453],
-    [new Date('2025-07-26 00:16:20'),468],
-    [new Date('2025-07-26 00:16:40'),469],
-    [new Date('2025-07-26 00:17:0'),486],
-    [new Date('2025-07-26 00:17:20'),486],
-    [new Date('2025-07-26 00:17:40'),501],
-    [new Date('2025-07-26 00:18:0'),508],
-    [new Date('2025-07-26 00:18:20'),515],
-    [new Date('2025-07-26 00:18:40'),523],
-    [new Date('2025-07-26 00:19:0'),524],
-    [new Date('2025-07-26 00:19:20'),529],
-    [new Date('2025-07-26 00:19:40'),536],
-    [new Date('2025-07-26 00:20:0'),554],
-    [new Date('2025-07-26 00:20:20'),563],
-    [new Date('2025-07-26 00:20:40'),570],
-    [new Date('2025-07-26 00:21:0'),589],
-    [new Date('2025-07-26 00:21:20'),600],
-    [new Date('2025-07-26 00:21:40'),602],
-    [new Date('2025-07-26 00:22:0'),602],
-    [new Date('2025-07-26 00:22:20'),618],
-    [new Date('2025-07-26 00:22:40'),620],
-    [new Date('2025-07-26 00:23:0'),636],
-    [new Date('2025-07-26 00:23:20'),650],
-    [new Date('2025-07-26 00:23:40'),653],
-    [new Date('2025-07-26 00:24:0'),668],
-    [new Date('2025-07-26 00:24:20'),670],
-    [new Date('2025-07-26 00:24:40'),680],
-    [new Date('2025-07-26 00:25:0'),680],
-    [new Date('2025-07-26 00:25:20'),695],
-    [new Date('2025-07-26 00:25:40'),709],
-    [new Date('2025-07-26 00:26:0'),714],
-    [new Date('2025-07-26 00:26:20'),714],
-    [new Date('2025-07-26 00:26:21'),500],
-    [new Date('2025-07-26 00:26:30'),515],
-    [new Date('2025-07-26 00:26:39'),515],
-    [new Date('2025-07-26 00:26:40'),729],
-    [new Date('2025-07-26 00:27:0'),743],
-    [new Date('2025-07-26 00:27:20'),747],
-    [new Date('2025-07-26 00:27:40'),764],
-    [new Date('2025-07-26 00:28:0'),783],
-    [new Date('2025-07-26 00:28:20'),792],
-    [new Date('2025-07-26 00:28:40'),806],
-    [new Date('2025-07-26 00:29:0'),817],
-    [new Date('2025-07-26 00:29:20'),823],
-    [new Date('2025-07-26 00:29:40'),837],
-    [new Date('2025-07-26 00:30:0'),854],];
-  let count = 0;
-  processData = [];
-  for (let i = 0; i < productData.length; i++) {
-    if (i%2 == 0)count+=7;
-    processData.push([productData[i][0],productData[i][1]+count]);
-  }
-  let option = {
-    xAxis: {
-      type: 'time',
-      axisPointer: {
-        label: {
-          show: true,
-          formatter: function(params) {
-            return echarts.format.formatTime('hh:mm:ss', params.value);
-          }
-        },
-        show: true,
-        type: "line"
-      },
-      splitNumber: props.splitNumber
-    },
-    yAxis: [{
-      type: 'value',
-      name:'characters',
-      position:'left',
-    },{
-      type: 'value',
-      name:'time',
-      position: 'right',
-      axisLabel: {
-        formatter: '{value} ms'
-      }
-    }],
-    tooltip:{
-
-    },
-    dataZoom: [
-      {
-        type: 'inside',
-      },
-      {
-        type: 'slider',
-      }
-    ],
-    legend:{
-      left:0
-    },
-    visualMap: {
-      type: 'continuous', // 连续型映射
-      calculable: true,
-      min: 0,             // 数据最小值
-      max: 150,           // 数据最大值
-      dimension: 1,       // 根据第2个维度（y值）映射颜色
-      inRange: {
-        color: ['yellow', 'red'] // 渐变范围：小值→蓝色，大值→红色
-      },
-      seriesIndex: [3],
-      itemWidth: 10,
-      top:0,
-      right:0,
-      orient:'horizontal',
-      align: 'right',
-    },
-    series: [
-      {
-        itemStyle: {
-          color:'#37ff00',
-          opacity: 0
-        },
-        name:'product',
-        data: productData,
-        type: 'line',
-        yAxisIndex: 0
-      },
-      {
-        itemStyle: {
-          color:'#37ff00',
-          opacity: 0
-        },
-        lineStyle: {
-          type: "dotted"
-        },
-        name:'cursor',
-        data: cursorData,
-        type: 'line',
-        yAxisIndex: 0
-      },
-      {
-        itemStyle: {
-          color:'#1d86dc',
-          opacity: 0
-        },
-        name:'process',
-        data: processData,
-        type: 'line',
-        yAxisIndex: 0
-      },
-      {
-        symbolSize: 10,
-
-        data: pauseData,
-        type: 'scatter',
-        yAxisIndex: 1
-      }
-    ]
-  };
-  myChart.setOption( option);
+  getCanvasData(myChart)
   window.addEventListener('resize', ()=>{
     myChart.resize()
   })

src/views/BehaviorPage/component/TotalCanvas.vue

@@ -1,62 +1,86 @@
 <script setup lang="ts">
-import {onMounted} from "vue";
+import {onMounted, type Ref, watch} from "vue";
 import * as echarts from 'echarts';
+import {inject} from "vue-demi";
+
+import useApis from "@/apis";
+import {type EChartsType} from "echarts";
+
+const apis = useApis()
 defineProps<{
   assignmentId:number
 }>()
+const currentEngagement = inject('currentEngagement') as Ref<any>;
+watch(currentEngagement,()=>{
+  if (currentEngagement.value === null){
+    return;
+  }
+  let chartDom = document.getElementById('total-canvas');
+  let myChart = echarts.getInstanceByDom(chartDom);
+  drawChart(myChart);
+},{deep:true})
+
 let data = []
-function dataInit(){
+function drawChart(chart: EChartsType){
   //TODO
-  data = [
-    { value: 50, name: '产出行为' },
-    { value: 25, name: '停顿行为' },
-    { value: 15, name: '修改行为' },
-    { value: 10, name: '窗口行为' },
-  ]
+  if (!currentEngagement.value){
+    return;
+  }
+  apis.getOverview(currentEngagement.value.studentId,currentEngagement.value.assignmentId)
+  .then((res:any) => {
+    // console.log(res);
+    if (res&&res.data&&res.data.code === 200){
+      data = [
+        { value: res.data.data.insertCount, name: '产出行为' },
+        { value: res.data.data.longPauseCount, name: '停顿行为' },
+        { value: res.data.data.deleteCount, name: '修改行为' },
+      ]
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '5%',
+          left: 'center'
+        },
+        series: [
+          {
+            name: '总体分析',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            bottom:-50,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 20,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: data
+          }
+        ]
+      };
+      chart.setOption( option);
+    }
+  })
 }
 onMounted(()=>{
   let chartDom = document.getElementById('total-canvas');
   let myChart = echarts.init(chartDom);
-  dataInit()
-  let option = {
-    tooltip: {
-      trigger: 'item'
-    },
-    legend: {
-      top: '5%',
-      left: 'center'
-    },
-    series: [
-      {
-        name: '总体分析',
-        type: 'pie',
-        radius: ['40%', '70%'],
-        avoidLabelOverlap: false,
-        bottom:-50,
-        itemStyle: {
-          borderRadius: 10,
-          borderColor: '#fff',
-          borderWidth: 2
-        },
-        label: {
-          show: false,
-          position: 'center'
-        },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: 20,
-            fontWeight: 'bold'
-          }
-        },
-        labelLine: {
-          show: false
-        },
-        data: data
-      }
-    ]
-  };
-  myChart.setOption( option);
+  drawChart(myChart)
   window.addEventListener('resize', ()=>{
     myChart.resize()
   })

src/views/BehaviorPage/subPage/EditAnalysis.vue

@@ -1,8 +1,29 @@
 <script setup lang="ts">
 import "./TotalAnalysis.scss"
 import EditCanvas from "@/views/BehaviorPage/component/EditCanvas.vue";
-import {onMounted, ref} from "vue";
+import {onMounted, type Ref, ref, watch} from "vue";
+import {inject} from "vue-demi";
+import * as echarts from "echarts";
+import useApis from "@/apis";
 let tableData = ref([])
+
+const currentEngagement = inject('currentEngagement') as Ref<any>;
+watch(currentEngagement,()=>{
+  getTableData();
+});
+
+const apis = useApis();
+
+function formatTimeWithMilliseconds(stamp:number ){
+  const date = new Date(stamp);
+  date.setHours(date.getHours()+16)
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  const seconds = date.getSeconds().toString().padStart(2, '0');
+  const milliseconds = date.getMilliseconds().toString().padStart(3, '0');
+  return `${hours}:${minutes}:${seconds}.${milliseconds}`;
+}
+
 function getTableData() {
   tableData.value = [
     {
@@ -55,6 +76,47 @@ function getTableData() {
     },
 
   ]
+  if (!currentEngagement.value){
+    return;
+  }
+  let studentId = currentEngagement.value.studentId;
+  let assignmentId = currentEngagement.value.assignmentId;
+  apis.getBehaviorRecordAll(studentId,assignmentId)
+      .then((res:any) => {
+        if (res && res.data && res.data.code === 200){
+          let rowData = res.data.data.events as any[];
+          console.log("行为数据",rowData);
+          tableData.value.length = 0;
+          rowData.forEach((item:any,index:number) => {
+            if (item.type === 'insert'){
+              tableData.value.push({
+                revision: index,
+                type: "Normal Production",
+                content: item.insert,
+                start: formatTimeWithMilliseconds(item.startStamp),
+                end: formatTimeWithMilliseconds(item.endStamp),
+                duration: item.pauseTime/1000,
+                beginPos: item.retain,
+                endPos: item.retain+1,
+                length: item.docLength,
+              })
+            }
+            else if (item.type === 'delete'){
+              tableData.value.push({
+                revision: index,
+                type: "Delete",
+                content: item.delete,
+                start: formatTimeWithMilliseconds(item.startStamp),
+                end: formatTimeWithMilliseconds(item.endStamp),
+                duration: item.pauseTime/1000,
+                beginPos: item.retain,
+                endPos: item.retain+1,
+                length: item.docLength,
+              })
+            }
+          })
+        }
+      })
 }
 onMounted(()=>{
   getTableData()
@@ -83,7 +145,7 @@ onMounted(()=>{
         <el-table-column prop="type" label="Type" width="100">
         </el-table-column>
         <el-table-column prop="content" label="content" show-overflow-tooltip width="110"/>
-        <el-table-column prop="edits" label="Edits"  />
+<!--        <el-table-column prop="edits" label="Edits"  />-->
         <el-table-column prop="start" label="Start" />
         <el-table-column prop="end" label="End"/>
         <el-table-column prop="duration" label="Duration" />

src/views/BehaviorPage/subPage/TotalAnalysis.vue

@@ -1,33 +1,79 @@
 <script setup lang="ts">
 import "./TotalAnalysis.scss"
 import TotalCanvas from "@/views/BehaviorPage/component/TotalCanvas.vue";
-import {onMounted, ref} from "vue";
+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";
 
 let tableData = ref([])
+const apis = useApis();
+
+const currentEngagement = inject('currentEngagement') as Ref<any>;
+watch(currentEngagement,()=>{
+  getBehaviorData()
+},{deep:true})
+
 function getTagType(type:string){
-  if (type === "focus"){
+  if (type === "insert"){
     return "primary"
   }
-  else if (type === "mouse"){
+  else if (type === "cursor_move"){
     return "success"
   }
-  else if (type === "keyboard"){
-    return "error"
+  else if (type === "delete"){
+    return "danger"
   }
 }
+interface Event {
+  Id:number,
+  EventType:string,
+  Output:string|null|undefined,
+  Position:number,
+}
+
 function getBehaviorData(){
   //TODO
-  tableData.value = [
-    {Id:0,EventType:"focus",Output:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
-    {Id:1,EventType:"mouse",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
-    {Id:2,EventType:"keyboard",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
-    {Id:3,EventType:"focus",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
-    {Id:4,EventType:"focus",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
-    {Id:5,EventType:"mouse",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
-    {Id:6,EventType:"keyboard",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
-  ];
+  // tableData.value = [
+  //   {Id:0,EventType:"focus",Output:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
+  //   {Id:1,EventType:"mouse",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
+  //   {Id:2,EventType:"keyboard",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
+  //   {Id:3,EventType:"focus",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
+  //   {Id:4,EventType:"focus",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
+  //   {Id:5,EventType:"mouse",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
+  //   {Id:6,EventType:"keyboard",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
+  // ];
+  if (!currentEngagement.value){
+    return;
+  }
+  apis.getBehaviorRecordAll(currentEngagement.value.studentId,currentEngagement.value.assignmentId)
+    .then((res: any) => {
+      if (res && res.data && res.data.code === 200){
+        let rowData = res.data.data
+        console.log("行为数据",res)
+        tableData.value = res.data.data.events.map((item:any,index:number) => {
+          return {
+            Id:index,
+            EventType:item.type,
+            Output:item.insert,
+            Position:item.retain,
+          }
+        })
+        console.log("tableData",tableData)
+      }
+    })
+}
+const filterHandler = (
+    value: string,
+    row: Event,
+    column: TableColumnCtx<Event>
+) => {
+  const property = column['property']
+  return row[property] === value
 }
 
+
 onMounted(()=>{
   getBehaviorData();
 })
@@ -50,17 +96,23 @@ onMounted(()=>{
     </div>
     <div class="table-container">
       <el-table :data="tableData" style="width: 90%" max-height="500">
-        <el-table-column prop="Id" label="Id" width="40"/>
-        <el-table-column prop="EventType" label="Event Type" >
+        <el-table-column prop="Id" label="Id" width="120" sortable/>
+        <el-table-column prop="EventType"
+                         :filters="[
+                             {text:'insert',value:'insert'},
+                             {text:'delete',value:'delete'},
+                             {text:'cursor_move',value:'cursor_move'}]"
+                         :filter-method="filterHandler"
+                         label="Event Type" >
           <template #default="scope">
             <el-tag :type="getTagType(scope.row.EventType)">{{ scope.row.EventType }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="Output" label="Output" show-overflow-tooltip width="160"/>
         <el-table-column prop="Position" label="Position"  />
-        <el-table-column prop="DocLength" label="DocLength" />
-        <el-table-column prop="StartTime" label="StartTime"/>
-        <el-table-column prop="EndTime" label="EndTime" />
+<!--        <el-table-column prop="DocLength" label="DocLength" />-->
+<!--        <el-table-column prop="StartTime" label="StartTime"/>-->
+<!--        <el-table-column prop="EndTime" label="EndTime" />-->
       </el-table>
     </div>
   </el-card>

src/views/HomeworkPage/component/HomeworkDetail.vue

@@ -86,6 +86,7 @@ function handleStart(){
   getEngagement()
   console.log(data.type)
   if(data.type == 'writing' || data.type == '写作'){
+    console.log('开始写作')
     router.push(`/home/assignment/${assignmentId}/edit`)
   } else if(data.type == 'speaking' || data.type == 'AI口语'){
     router.push(`/home/assignment/${assignmentId}/aispeaking`)