日常开发

src/components/ReportList/index.vue

@@ -23,16 +23,19 @@
         </div>
       </li>
     </ul>
-    <div class="erweima" v-if="showQRCode"> <img src="@/assets/images/login/erweima.png" />
+    <div class="erweima" v-if="showQRCode"> <img :src="erweima"  @click="getMobile" />
       <span>扫码查看详情</span>
     </div>
   </div>
   <ReportWindow ref="reportWindowRef" />
 </template>
 <script setup lang="ts">
+import QRCode from "qrcode";
 import dataDictionary from "@/utils/dataDictionary"
 const dic: any = dataDictionary;
 const { proxy } = getCurrentInstance() as any;
+const router = useRouter();
+const route = useRoute();
 const reportWindowRef = ref();
 const reportScrollRef = ref();
 
@@ -57,9 +60,10 @@ const data = reactive<any>({
   }, //学生分页
   debounceTime: '', //防抖状态
   unit: '',//单位
+  erweima:""
 });
 
-const { reportList, studentPage, debounceTime, unit } = toRefs(data);
+const { reportList, studentPage, debounceTime, unit, erweima } = toRefs(data);
 
 /**
  * 成绩列表
@@ -147,8 +151,29 @@ const getScroll = (event?: any) => {
 const getIniReportList = () => {
   studentPage.value.current = 1;
   getReportList();
+  getErweima();
 };
 
+/**
+ * 获取二维码
+*/
+const getErweima = () => {
+  QRCode.toDataURL(
+    `${location.origin}/#/analysis/index?project=${props.parameter.project}`
+  )
+    .then((res: any) => {
+      erweima.value = res;
+    })
+}
+
+/**
+ * 跳转手机
+*/
+const getMobile = () => {
+  let routeUrl: any = router.resolve({ path: '/analysis/index', query: { project: props.parameter.project } });
+  window.open(routeUrl.href, '_blank');
+}
+
 onBeforeMount(() => {
   let project = props.parameter.project;
   unit.value = dic.unit[project];

src/components/ReportWindow/index.vue

@@ -120,7 +120,7 @@
             <div class="column column2">
               <div class="title2">数据查看</div>
               <div class="erweima">
-                <img src="@/assets/images/login/erweima.png" />
+                <img :src="erweima" />
               </div>
             </div>
           </div>
@@ -131,6 +131,7 @@
 </template>
 <script setup lang="ts">
 import * as echarts from 'echarts';
+import QRCode from "qrcode";
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Navigation, Pagination } from 'swiper/modules';
 import 'swiper/css';
@@ -146,10 +147,11 @@ const data = reactive<any>({
   type: "",
   faceCheckStu: {},
   reportDetails: {},
-  currentTab: 2
+  currentTab: 2,
+  erweima:""
 });
 
-const { reportWindow, type, faceCheckStu, reportDetails, currentTab } = toRefs(data);
+const { reportWindow, type, faceCheckStu, reportDetails, currentTab, erweima } = toRefs(data);
 
 const echartsRef = ref(null);
 
@@ -180,6 +182,18 @@ const getChoose = (data: any) => {
   currentTab.value = data;
 };
 
+/**
+ * 获取二维码
+*/
+const getErweima = () => {
+  QRCode.toDataURL(
+    `${location.origin}/#/analysis/detail?exam_name=${type.value}&stu_key=${faceCheckStu.value.student_id}`
+  )
+    .then((res: any) => {
+      erweima.value = res;
+    })
+}
+
 //打开
 const open = async (typeData: any, data: any) => {
   console.log("data", data)
@@ -190,6 +204,7 @@ const open = async (typeData: any, data: any) => {
     return false;
   }
   await getReportDetails();
+  await getErweima();
   reportWindow.value.show = true;
   emit('returnData', reportWindow.value.show);
   nextTick(() => {

src/router/index.ts

@@ -23,7 +23,9 @@ const router = createRouter({
         { path: '/set/config', component: () => import('@/views/set/config.vue') },
         { path: '/ranking', component: () => import('@/views/ranking/index.vue') },
         { path: '/course', component: () => import('@/views/course/index.vue') },
-        { path: '/gesture', component: () => import('@/views/gesture/index.vue') }
+        { path: '/gesture', component: () => import('@/views/gesture/index.vue') },
+        { path: '/analysis/index', component: () => import('@/views/analysis/index.vue') },
+        { path: '/analysis/detail', component: () => import('@/views/analysis/detail.vue') }
       ]
     }
   ]

src/views/analysis/components/balls.vue

@@ -12,8 +12,7 @@
     <div class="column" v-if="details.video_url">
       <div class="column-title">测评视频</div>
       <div>
-        <video
-          :poster="details.video_url.replace('  ', '') + '?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0,ar_auto'"
+        <video :poster="details.video_url.replace('  ', '') + '?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0,ar_auto'"
           :src="details.video_url" :controls="true">
           您的浏览器不支持 video 标签。
         </video>
@@ -28,23 +27,24 @@ const dic: any = dataDictionary;
 
 //父值
 const props = defineProps({
-  details: {
+  detailsData: {
     type: Object,
     default: {}
   },
 });
 
 const data = reactive<any>({
+  details: {},
   query: {},
-  typeKeyObj :{}
+  typeKeyObj: {}
 });
-const { query,typeKeyObj } = toRefs(data);
+const { details, query, typeKeyObj } = toRefs(data);
 
 onBeforeMount(() => {
   typeKeyObj.value = dic.typeKeyObj;
   query.value = route.query;
+  details.value = JSON.parse(JSON.stringify(props.detailsData));
 })
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/views/analysis/components/jump.vue

@@ -321,21 +321,23 @@ const dic: any = dataDictionary;
 
 //父值
 const props = defineProps({
-  details: {
+  detailsData: {
     type: Object,
     default: {}
   },
 });
 
 const data = reactive<any>({
+  details: {},
   query: {},
   typeKeyObj :{}
 });
-const { query,typeKeyObj } = toRefs(data);
+const { details,query,typeKeyObj } = toRefs(data);
 
 onBeforeMount(() => {
   typeKeyObj.value = dic.typeKeyObj;
   query.value = route.query;
+  details.value = JSON.parse(JSON.stringify(props.detailsData));
 })
 </script>
 

src/views/analysis/components/longJump.vue

@@ -123,26 +123,28 @@
 </template>
 <script setup lang="ts">
 import dataDictionary from "@/utils/dataDictionary"
-const route = useRoute();
 const dic: any = dataDictionary;
+const route = useRoute();
 
 //父值
 const props = defineProps({
-  details: {
+  detailsData: {
     type: Object,
     default: {}
   },
 });
 
 const data = reactive<any>({
+  details: {},
   query: {},
   typeKeyObj :{}
 });
-const { query,typeKeyObj } = toRefs(data);
+const { details,query,typeKeyObj } = toRefs(data);
 
 onBeforeMount(() => {
   typeKeyObj.value = dic.typeKeyObj;
   query.value = route.query;
+  details.value = JSON.parse(JSON.stringify(props.detailsData));
 })
 </script>
 

src/views/analysis/components/pullUp.vue

@@ -38,7 +38,8 @@
           <div class="item-con">
             <div class="item-con-li">
               <span class="item-con-li-label item-con-li-label-bg1">标准动作</span>
-              <img class="bigImg" src="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/pictures/yt_hand.png" />
+              <img class="bigImg"
+                src="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/pictures/yt_hand.png" />
             </div>
             <div class="item-con-li" v-if="details.foul.elbow.urls.length">
               <span class="item-con-li-label item-con-li-label-bg2">您的动作</span>
@@ -65,7 +66,8 @@
           <div class="item-con">
             <div class="item-con-li">
               <span class="item-con-li-label item-con-li-label-bg1">标准动作</span>
-              <img class="bigImg" src="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/pictures/yt_knee.png" />
+              <img class="bigImg"
+                src="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/pictures/yt_knee.png" />
             </div>
             <div class="item-con-li" v-if="details.foul.knee.urls.length">
               <span class="item-con-li-label item-con-li-label-bg2">您的动作</span>
@@ -92,7 +94,8 @@
           <div class="item-con">
             <div class="item-con-li">
               <span class="item-con-li-label item-con-li-label-bg1">标准动作</span>
-              <img class="bigImg" src="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/pictures/yt_height.png" />
+              <img class="bigImg"
+                src="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/pictures/yt_height.png" />
             </div>
             <div class="item-con-li" v-if="details.foul.height.urls.length">
               <span class="item-con-li-label item-con-li-label-bg2">您的动作</span>
@@ -136,155 +139,160 @@
     </div>
   </div>
 </template>
-<script>
+
+<script setup lang="ts">
 import * as echarts from 'echarts';
-export default {
-  name: 'pullUp',
-  props: {
-    details: { type: Object, default: function () { return {} } },
-  },
-  data() {
-    return {
-      query: {},
-      typeList: [],
-      failedList: [],
-      fullAvgRateList: [],
-      averageScoreList: [],
-      lowSpeedList: [],
-      violationList: [],
-    };
-  },
-  created() {
-    this.query = this.$route.query;
-  },
-  mounted() {
-    let videoList = this.details.video_url.split("  ").filter((item) => {
-      return item;
-    });
-    this.$set(this.details, 'videoList', videoList);
-    let typeList = [];
-    let fullAvgRateList = [];
-    let averageScoreList = [];
-    let lowSpeedList = [];
-    let violationList = this.details.all_failed_num_distribution;
-    let mySum = this.details.count_distribution.reduce((a, b) => {
-      return a + b;
-    }, 0);
-    let num = this.details.count_distribution.length;
-    let averageScore = (mySum / num).toFixed(2);
-    for (let i = 1; i <= num; i++) {
-      typeList.push(i * 10)
-      fullAvgRateList.push(this.details.full_avg_rate)
-      averageScoreList.push(averageScore)
-      lowSpeedList.push(2)
-    }
-    this.typeList = typeList;
-    this.fullAvgRateList = fullAvgRateList;
-    this.averageScoreList = averageScoreList;
-    this.lowSpeedList = lowSpeedList;
-    this.violationList = violationList;
-    this.$nextTick(()=>{
-      this.faliChart();
-    })
+const route = useRoute();
+
+//父值
+const props = defineProps({
+  detailsData: {
+    type: Object,
+    default: {}
   },
-  methods: {
-    //成绩曲线
-    faliChart() {
-      let myChart = echarts.init(document.getElementById("faliChart"));
-      let option = {
-        title: {
-          text: ''
+});
+
+const data = reactive<any>({
+  details: {},
+  query: {},
+  typeList: [],
+  failedList: [],
+  fullAvgRateList: [],
+  averageScoreList: [],
+  lowSpeedList: [],
+  violationList: [],
+});
+const { details, query, typeList, fullAvgRateList, averageScoreList, lowSpeedList, violationList } = toRefs(data);
+
+//成绩曲线
+const faliChart = () => {
+  let myChart = echarts.init(document.getElementById("faliChart"));
+  let option = {
+    title: {
+      text: ''
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: ['速度曲线', '您的平均速度', '满分平均速度', '低速区', '违规个数']
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: typeList.value
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: '速度曲线',
+        type: 'line',
+        label: {
+          show: true,
+          position: 'top'
         },
-        tooltip: {
-          trigger: 'axis',
+        areaStyle: {
+          color: "#e6fafa"
         },
-        legend: {
-          data: ['速度曲线', '您的平均速度', '满分平均速度', '低速区', '违规个数']
+        data: details.value.count_distribution
+      },
+      {
+        name: '您的平均速度',
+        type: 'line',
+        lineStyle: {
+          type: 'dashed'
         },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+        data: averageScoreList.value
+      },
+      {
+        name: '满分平均速度',
+        type: 'line',
+        lineStyle: {
+          type: 'dashed'
         },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            data: this.typeList
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value'
-          }
-        ],
-        series: [
-          {
-            name: '速度曲线',
-            type: 'line',
-            label: {
-              show: true,
-              position: 'top'
-            },
-            areaStyle: {
-              color: "#e6fafa"
-            },
-            data: this.details.count_distribution
-          },
-          {
-            name: '您的平均速度',
-            type: 'line',
-            lineStyle: {
-              type: 'dashed'
-            },
-            data: this.averageScoreList
-          },
-          {
-            name: '满分平均速度',
-            type: 'line',
-            lineStyle: {
-              type: 'dashed'
-            },
-            data: this.fullAvgRateList
-          },
-          {
-            name: '低速区',
-            type: 'line',
-            lineStyle: {
-              type: 'dashed'
-            },
-            areaStyle: {
-              color: "#ffdad1"
-            },
-            data: this.lowSpeedList
-          },
-          {
-            name: '违规个数',
-            type: 'line',
-            lineStyle: {
-              type: 'dashed'
-            },
-            data: this.violationList
-          },
-        ]
-      };
-      // 窗口大小自适应方案
-      myChart.setOption(option);
-      setTimeout(function () {
-        window.onresize = function () {
-          myChart.resize();
-        };
-      }, 200);
-    },
-
-  },
+        data: fullAvgRateList.value
+      },
+      {
+        name: '低速区',
+        type: 'line',
+        lineStyle: {
+          type: 'dashed'
+        },
+        areaStyle: {
+          color: "#ffdad1"
+        },
+        data: lowSpeedList.value
+      },
+      {
+        name: '违规个数',
+        type: 'line',
+        lineStyle: {
+          type: 'dashed'
+        },
+        data: violationList.value
+      },
+    ]
+  };
+  // 窗口大小自适应方案
+  myChart.setOption(option);
+  setTimeout(function () {
+    window.onresize = function () {
+      myChart.resize();
+    };
+  }, 200);
 };
+
+onBeforeMount(() => {
+  query.value = route.query;
+  details.value = JSON.parse(JSON.stringify(props.detailsData));
+  let videoList = details.value.video_url.split("  ").filter((item: any) => {
+    return item;
+  });
+  details.value.videoList = videoList
+  let typeLists = [];
+  let fullAvgRateLists = [];
+  let averageScoreLists = [];
+  let lowSpeedLists = [];
+  let violationLists = details.value.all_failed_num_distribution;
+  let mySum = details.value.count_distribution.reduce((a: any, b: any) => {
+    return a + b;
+  }, 0);
+  let num = details.value.count_distribution.length;
+  let averageScore = (mySum / num).toFixed(2);
+  for (let i = 1; i <= num; i++) {
+    typeLists.push(i * 10)
+    fullAvgRateLists.push(details.value.full_avg_rate)
+    averageScoreLists.push(averageScore)
+    lowSpeedLists.push(2)
+  }
+  typeList.value = typeLists;
+  fullAvgRateList.value = fullAvgRateLists;
+  averageScoreList.value = averageScoreLists;
+  lowSpeedList.value = lowSpeedLists;
+  violationList.value = violationLists;
+})
+
+onMounted(() => {
+  nextTick(() => {
+    faliChart();
+  })
+})
 </script>
 
 <style lang="scss" scoped>
 .chartBox {
   width: 100%;
   height: 38vh;
-}
-</style>
+}</style>

src/views/analysis/components/ropeSkipping.vue

@@ -21,7 +21,7 @@
               </div>
               <div class="item-con-li-con">
                 <div class="item-con-li-con-strong">{{ details._comments.speed.comments }}</div>
-                <div v-for="(item,index) in details._comments.speed.recms" :key="index" v-html="item"></div>
+                <div v-for="(item, index) in details._comments.speed.recms" :key="index" v-html="item"></div>
               </div>
             </div>
           </div>
@@ -31,146 +31,154 @@
     <div class="column" v-if="details.video_url">
       <div class="column-title">测评视频</div>
       <div>
-        <video :src="details.video_url" :poster="details.video_url.replace('  ','') + '?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0,ar_auto'" :controls="true">
+        <video :src="details.video_url"
+          :poster="details.video_url.replace('  ', '') + '?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0,ar_auto'"
+          :controls="true">
           您的浏览器不支持 video 标签。
         </video>
       </div>
     </div>
   </div>
 </template>
-<script>
+
+<script setup lang="ts">
 import * as echarts from 'echarts';
-export default {
-  name: 'ropeSkipping',
-  props: {
-    details: { type: Object, default: function () { return {} } },
-  },
-  data() {
-    return {
-      query: {},
-      typeList: [],
-      failedList: [],
-      fullAvgRateList: [],
-      averageScoreList: [],
-      lowSpeedList: [],
-    };
-  },
-  created() {
-    this.query = this.$route.query;
-  },
-  mounted() {
-    let videoList = this.details.video_url.split("  ").filter((item) => {
-      return item;
-    });
-    this.$set(this.details, 'videoList', videoList);
-    let typeList = [];
-    let fullAvgRateList = [];
-    let averageScoreList = [];
-    let lowSpeedList = [];
-    let mySum = this.details.count_distribution.reduce((a, b) => {
-      return a + b;
-    }, 0);
-    let num = this.details.count_distribution.length;
-    let averageScore = (mySum / num).toFixed(2);
-    for (let i = 1; i <= num; i++) {
-      typeList.push(i * 10)
-      fullAvgRateList.push(this.details.full_avg_rate)
-      averageScoreList.push(averageScore)
-      lowSpeedList.push(2)
-    }
-    this.typeList = typeList;
-    this.fullAvgRateList = fullAvgRateList;
-    this.averageScoreList = averageScoreList;
-    this.lowSpeedList = lowSpeedList;
-    this.$nextTick(()=>{
-      this.faliChart();
-    })
+const route = useRoute();
+
+//父值
+const props = defineProps({
+  detailsData: {
+    type: Object,
+    default: {}
   },
-  methods: {
-    //成绩曲线
-    faliChart() {
-      let myChart = echarts.init(document.getElementById("faliChart"));
-      let option = {
-        title: {
-          text: ''
-        },
-        tooltip: {
-          trigger: 'axis',
+});
+
+const data = reactive<any>({
+  details: {},
+  query: {},
+  typeList: [],
+  failedList: [],
+  fullAvgRateList: [],
+  averageScoreList: [],
+  lowSpeedList: [],
+});
+const { details, query, typeList, failedList, fullAvgRateList,averageScoreList, lowSpeedList } = toRefs(data);
+
+//成绩曲线
+const faliChart = () => {
+  let myChart = echarts.init(document.getElementById("faliChart"));
+  let option = {
+    title: {
+      text: ''
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: ['速度曲线', '您的平均速度',]
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: typeList.value
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: '速度曲线',
+        type: 'line',
+        label: {
+          show: true,
+          position: 'top'
         },
-        legend: {
-          data: ['速度曲线', '您的平均速度', ]
+        areaStyle: {
+          color: "#e6fafa"
         },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+        data: details.value
+      },
+      {
+        name: '您的平均速度',
+        type: 'line',
+        lineStyle: {
+          type: 'dashed'
         },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            data: this.typeList
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value'
-          }
-        ],
-        series: [
-          {
-            name: '速度曲线',
-            type: 'line',
-            label: {
-              show: true,
-              position: 'top'
-            },
-            areaStyle: {
-              color: "#e6fafa"
-            },
-            data: this.details.count_distribution
-          },
-          {
-            name: '您的平均速度',
-            type: 'line',
-            lineStyle: {
-              type: 'dashed'
-            },
-            data: this.averageScoreList
-          },
-          // {
-          //   name: '满分平均速度',
-          //   type: 'line',
-          //   lineStyle: {
-          //     type: 'dashed'
-          //   },
-          //   data: this.fullAvgRateList
-          // },
-          // {
-          //   name: '低速区',
-          //   type: 'line',
-          //   lineStyle: {
-          //     type: 'dashed'
-          //   },
-          //   areaStyle: {
-          //     color: "#ffdad1"
-          //   },
-          //   data: this.lowSpeedList
-          // },
-        ]
-      };
-      // 窗口大小自适应方案
-      myChart.setOption(option);
-      setTimeout(function () {
-        window.onresize = function () {
-          myChart.resize();
-        };
-      }, 200);
-    },
-
-  },
+        data: averageScoreList.value
+      },
+      // {
+      //   name: '满分平均速度',
+      //   type: 'line',
+      //   lineStyle: {
+      //     type: 'dashed'
+      //   },
+      //   data: this.fullAvgRateList
+      // },
+      // {
+      //   name: '低速区',
+      //   type: 'line',
+      //   lineStyle: {
+      //     type: 'dashed'
+      //   },
+      //   areaStyle: {
+      //     color: "#ffdad1"
+      //   },
+      //   data: this.lowSpeedList
+      // },
+    ]
+  };
+  // 窗口大小自适应方案
+  myChart.setOption(option);
+  setTimeout(function () {
+    window.onresize = function () {
+      myChart.resize();
+    };
+  }, 200);
 };
+
+onBeforeMount(() => {
+  query.value = route.query;
+  details.value = JSON.parse(JSON.stringify(props.detailsData));
+  let videoList = details.value.video_url.split("  ").filter((item: any) => {
+    return item;
+  });
+  details.value.videoList = videoList
+  let typeLists = [];
+  let fullAvgRateLists = [];
+  let averageScoreLists = [];
+  let lowSpeedLists = [];
+  let mySum = details.value.count_distribution.reduce((a:any, b:any) => {
+    return a + b;
+  }, 0);
+  let num = details.value.count_distribution.length;
+  let averageScore = (mySum / num).toFixed(2);
+  for (let i = 1; i <= num; i++) {
+    typeLists.push(i * 10)
+    fullAvgRateLists.push(details.value.full_avg_rate)
+    averageScoreLists.push(averageScore)
+    lowSpeedLists.push(2)
+  }
+  typeList.value = typeList;
+  fullAvgRateList.value = fullAvgRateLists;
+  averageScoreList.value = averageScoreLists;
+  lowSpeedList.value = lowSpeedLists;
+})
+
+onMounted(() => {
+  nextTick(() => {
+    faliChart();
+  })
+})
 </script>
 
 <style lang="scss" scoped>

src/views/analysis/components/run.vue

@@ -22,19 +22,13 @@
     <div class="column" v-if="details.video_url">
       <div class="column-title">测评视频</div>
       <div>
-        <video
-          style="width: 100%; object-fit: fill"
-          :poster="
-            details.video_url.replace('  ', '') +
-            '?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0,ar_auto'
-          "
-          :src="details.video_url"
-          :controls="true"
-        >
+        <video style="width: 100%; object-fit: fill" :poster="details.video_url.replace('  ', '') +
+          '?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0,ar_auto'
+          " :src="details.video_url" :controls="true">
           您的浏览器不支持 video 标签。
         </video>
       </div>
-    </div>   
+    </div>
     <div class="column">
       <div class="column-title">示范视频</div>
       <div>
@@ -46,273 +40,273 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import * as echarts from 'echarts';
-export default {
-  name: 'run',
-  props: {
-    details: { type: Object, default: function () { return {} } },
-  },
-  data() {
-    return {
-      query: {},
-      typeList: [],
-      speedList: [],
-      strideList: [],
-      stepsList: [],
-      fullAvgRateList: [],
-    };
-  },
-  created() {
-    this.query = this.$route.query;
-  },
-  mounted() {
-    let typeList = [];
-    let speedList = [];
-    let strideList = [];
-    let stepsList = [];
-    let fullAvgRateList = [];
-    let strideSum = this.details.stride_distribution.reduce((a, b) => {
-      return a + b;
-    }, 0);
-    let stepsSum = this.details.steps_distribution.reduce((a, b) => {
-      return a + b;
-    }, 0);
-    let num = null;
-    if (this.query.exam_name == 'runa800') {
-      num = 8
-    }
-    if (this.query.exam_name == 'runa1000') {
-      num = 10
-    }
-    let strideAverage = 0;
-    let stepsAverage = 0;
-    strideAverage = (strideSum / num).toFixed(1);
-    stepsAverage = (stepsSum / num).toFixed(1);
-    for (let i = 1; i <= num; i++) {
-      typeList.push(i * 100)
-      speedList.push(this.details.speed)
-      strideList.push(strideAverage)
-      stepsList.push(stepsAverage)
-      fullAvgRateList.push(this.details.full_avg_rate)
-    }
-    this.typeList = typeList;
-    this.speedList = speedList;
-    this.strideList = strideList;
-    this.stepsList = stepsList;
-    this.fullAvgRateList = fullAvgRateList;
-    console.log("this.typeList", this.typeList)
-    console.log("this.details.speed_distribution", this.details.speed_distribution)
-    console.log("this.speedList", this.speedList)
-    console.log("this.strideList", this.strideList)
-    console.log("this.stepsList", this.stepsList)
-    console.log("this.fullAvgRateList", this.fullAvgRateList)
-    this.$nextTick(() => {
-      this.speedChart();
-      this.strideChart();
-      this.stepsChart();
-    })
+const route = useRoute();
+
+//父值
+const props = defineProps({
+  detailsData: {
+    type: Object,
+    default: {}
   },
-  methods: {
-    //速度曲线
-    speedChart() {
-      let myChart = echarts.init(document.getElementById("speedChart"));
-      let option = {
-        title: {
-          text: ''
+});
+
+const data = reactive<any>({
+  details: {},
+  query: {},
+  typeList: [],
+  speedList: [],
+  strideList: [],
+  stepsList: [],
+  fullAvgRateList: [],
+});
+const { details, query, typeList, speedList, strideList, stepsList, fullAvgRateList } = toRefs(data);
+
+//速度曲线
+const speedChart = () => {
+  let myChart = echarts.init(document.getElementById("speedChart"));
+  let option = {
+    title: {
+      text: ''
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: ['每百米平均速度', '全程平均速度', '满分平均速度']
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: typeList.value
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: '每百米平均速度',
+        type: 'line',
+        label: {
+          show: true,
+          position: 'top'
         },
-        tooltip: {
-          trigger: 'axis',
+        areaStyle: {
+          color: "#e6fafa"
         },
-        legend: {
-          data: ['每百米平均速度', '全程平均速度', '满分平均速度']
+        data: details.value.speed_distribution
+      },
+      {
+        name: '全程平均速度',
+        type: 'line',
+        lineStyle: {
+          type: 'dashed'
         },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+        data: speedList.value
+      },
+      {
+        name: '满分平均速度',
+        type: 'line',
+        lineStyle: {
+          type: 'dashed'
         },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            data: this.typeList
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value'
-          }
-        ],
-        series: [
-          {
-            name: '每百米平均速度',
-            type: 'line',
-            label: {
-              show: true,
-              position: 'top'
-            },
-            areaStyle: {
-              color: "#e6fafa"
-            },
-            data: this.details.speed_distribution
-          },
-          {
-            name: '全程平均速度',
-            type: 'line',
-            lineStyle: {
-              type: 'dashed'
-            },
-            data: this.speedList
-          },
-          {
-            name: '满分平均速度',
-            type: 'line',
-            lineStyle: {
-              type: 'dashed'
-            },
-            data: this.fullAvgRateList
-          },
-        ]
-      };
-      // 窗口大小自适应方案
-      myChart.setOption(option);
-      setTimeout(function () {
-        window.onresize = function () {
-          myChart.resize();
-        };
-      }, 200);
-    },
+        data: fullAvgRateList.value
+      },
+    ]
+  };
+  // 窗口大小自适应方案
+  myChart.setOption(option);
+  setTimeout(function () {
+    window.onresize = function () {
+      myChart.resize();
+    };
+  }, 200);
+};
 
-    //步幅曲线
-    strideChart() {
-      let myChart = echarts.init(document.getElementById("strideChart"));
-      let option = {
-        title: {
-          text: ''
-        },
-        tooltip: {
-          trigger: 'axis',
+//步幅曲线
+const strideChart = () => {
+  let myChart = echarts.init(document.getElementById("strideChart"));
+  let option = {
+    title: {
+      text: ''
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: ['每百米平均步幅', '全程平均步幅']
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: typeList.value
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: '每百米平均步幅',
+        type: 'line',
+        label: {
+          show: true,
+          position: 'top'
         },
-        legend: {
-          data: ['每百米平均步幅', '全程平均步幅']
+        areaStyle: {
+          color: "#ffe6e0"
         },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+        data: details.value.stride_distribution
+      },
+      {
+        name: '全程平均步幅',
+        type: 'line',
+        lineStyle: {
+          type: 'dashed'
         },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            data: this.typeList
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value'
-          }
-        ],
-        series: [
-          {
-            name: '每百米平均步幅',
-            type: 'line',
-            label: {
-              show: true,
-              position: 'top'
-            },
-            areaStyle: {
-              color: "#ffe6e0"
-            },
-            data: this.details.stride_distribution
-          },
-          {
-            name: '全程平均步幅',
-            type: 'line',
-            lineStyle: {
-              type: 'dashed'
-            },
-            data: this.strideList
-          },
-        ]
-      };
-      // 窗口大小自适应方案
-      myChart.setOption(option);
-      setTimeout(function () {
-        window.onresize = function () {
-          myChart.resize();
-        };
-      }, 200);
-    },
+        data: strideList.value
+      },
+    ]
+  };
+  // 窗口大小自适应方案
+  myChart.setOption(option);
+  setTimeout(function () {
+    window.onresize = function () {
+      myChart.resize();
+    };
+  }, 200);
+};
 
-    //步频曲线
-    stepsChart() {
-      let myChart = echarts.init(document.getElementById("stepsChart"));
-      let option = {
-        title: {
-          text: ''
-        },
-        tooltip: {
-          trigger: 'axis',
+//步频曲线
+const stepsChart = () => {
+  let myChart = echarts.init(document.getElementById("stepsChart"));
+  let option = {
+    title: {
+      text: ''
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: ['每百米平均步频', '全程平均步频']
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: typeList.value
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: '每百米平均步频',
+        type: 'line',
+        label: {
+          show: true,
+          position: 'top'
         },
-        legend: {
-          data: ['每百米平均步频', '全程平均步频']
+        areaStyle: {
+          color: "#fff5e6"
         },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+        data: details.value.steps_distribution
+      },
+      {
+        name: '全程平均步频',
+        type: 'line',
+        lineStyle: {
+          type: 'dashed'
         },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            data: this.typeList
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value'
-          }
-        ],
-        series: [
-          {
-            name: '每百米平均步频',
-            type: 'line',
-            label: {
-              show: true,
-              position: 'top'
-            },
-            areaStyle: {
-              color: "#fff5e6"
-            },
-            data: this.details.steps_distribution
-          },
-          {
-            name: '全程平均步频',
-            type: 'line',
-            lineStyle: {
-              type: 'dashed'
-            },
-            data: this.stepsList
-          },
-        ]
-      };
-      // 窗口大小自适应方案
-      myChart.setOption(option);
-      setTimeout(function () {
-        window.onresize = function () {
-          myChart.resize();
-        };
-      }, 200);
-    },
-
-  },
+        data: stepsList.value
+      },
+    ]
+  };
+  // 窗口大小自适应方案
+  myChart.setOption(option);
+  setTimeout(function () {
+    window.onresize = function () {
+      myChart.resize();
+    };
+  }, 200);
 };
+
+
+onBeforeMount(() => {
+  query.value = route.query;
+  details.value = JSON.parse(JSON.stringify(props.detailsData));
+  let typeLists = [];
+  let speedLists = [];
+  let strideLists = [];
+  let stepsLists = [];
+  let fullAvgRateLists = [];
+  let strideSum = details.value.stride_distribution.reduce((a:any, b:any) => {
+    return a + b;
+  }, 0);
+  let stepsSum = details.value.steps_distribution.reduce((a:any, b:any) => {
+    return a + b;
+  }, 0);
+  let num: any = null;
+  if (query.value.exam_name == 'runa800') {
+    num = 8
+  }
+  if (query.value.exam_name == 'runa1000') {
+    num = 10
+  }
+  let strideAverage: any = 0;
+  let stepsAverage: any = 0;
+  strideAverage = (strideSum / num).toFixed(1);
+  stepsAverage = (stepsSum / num).toFixed(1);
+  for (let i = 1; i <= num; i++) {
+    typeLists.push(i * 100)
+    speedLists.push(details.value.speed)
+    strideLists.push(strideAverage)
+    stepsLists.push(stepsAverage)
+    fullAvgRateLists.push(details.value.full_avg_rate)
+  }
+  typeList.value = typeLists;
+  speedList.value = speedLists;
+  strideList.value = strideLists;
+  stepsList.value = stepsLists;
+  fullAvgRateList.value = fullAvgRateLists;
+})
+
+onMounted(() => {
+  nextTick(() => {
+    speedChart();
+    strideChart();
+    stepsChart();
+  })
+})
 </script>
 
 <style lang="scss" scoped>

src/views/analysis/components/runa.vue

@@ -92,273 +92,273 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import * as echarts from 'echarts';
-export default {
-  name: 'runa',
-  props: {
-    details: { type: Object, default: function () { return {} } },
-  },
-  data() {
-    return {
-      query: {},
-      typeList: [],
-      speedList: [],
-      strideList: [],
-      stepsList: [],
-      fullAvgRateList: [],
-    };
-  },
-  created() {
-    this.query = this.$route.query;
-  },
-  mounted() {
-    let typeList = [];
-    let speedList = [];
-    let strideList = [];
-    let stepsList = [];
-    let fullAvgRateList = [];
-    let strideSum = this.details.stride_distribution.reduce((a, b) => {
-      return a + b;
-    }, 0);
-    let stepsSum = this.details.steps_distribution.reduce((a, b) => {
-      return a + b;
-    }, 0);
-    let num = null;
-    if (this.query.exam_name == 'runa800') {
-      num = 8
-    }
-    if (this.query.exam_name == 'runa1000') {
-      num = 10
-    }
-    let strideAverage = 0;
-    let stepsAverage = 0;
-    strideAverage = (strideSum / num).toFixed(1);
-    stepsAverage = (stepsSum / num).toFixed(1);
-    for (let i = 1; i <= num; i++) {
-      typeList.push(i * 100)
-      speedList.push(this.details.speed)
-      strideList.push(strideAverage)
-      stepsList.push(stepsAverage)
-      fullAvgRateList.push(this.details.full_avg_rate)
-    }
-    this.typeList = typeList;
-    this.speedList = speedList;
-    this.strideList = strideList;
-    this.stepsList = stepsList;
-    this.fullAvgRateList = fullAvgRateList;
-    console.log("this.typeList", this.typeList)
-    console.log("this.details.speed_distribution", this.details.speed_distribution)
-    console.log("this.speedList", this.speedList)
-    console.log("this.strideList", this.strideList)
-    console.log("this.stepsList", this.stepsList)
-    console.log("this.fullAvgRateList", this.fullAvgRateList)
-    this.$nextTick(()=>{
-      this.speedChart();
-      this.strideChart();
-      this.stepsChart();
-    })
+const route = useRoute();
+
+//父值
+const props = defineProps({
+  detailsData: {
+    type: Object,
+    default: {}
   },
-  methods: {
-    //速度曲线
-    speedChart() {
-      let myChart = echarts.init(document.getElementById("speedChart"));
-      let option = {
-        title: {
-          text: ''
+});
+
+const data = reactive<any>({
+  details: {},
+  query: {},
+  typeList: [],
+  speedList: [],
+  strideList: [],
+  stepsList: [],
+  fullAvgRateList: [],
+});
+const { details, query, typeList, speedList, strideList, stepsList, fullAvgRateList } = toRefs(data);
+
+//速度曲线
+const speedChart = () => {
+  let myChart = echarts.init(document.getElementById("speedChart"));
+  let option = {
+    title: {
+      text: ''
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: ['每百米平均速度', '全程平均速度', '满分平均速度']
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: typeList.value
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: '每百米平均速度',
+        type: 'line',
+        label: {
+          show: true,
+          position: 'top'
         },
-        tooltip: {
-          trigger: 'axis',
+        areaStyle: {
+          color: "#e6fafa"
         },
-        legend: {
-          data: ['每百米平均速度', '全程平均速度', '满分平均速度']
+        data: details.value.speed_distribution
+      },
+      {
+        name: '全程平均速度',
+        type: 'line',
+        lineStyle: {
+          type: 'dashed'
         },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+        data: speedList.value
+      },
+      {
+        name: '满分平均速度',
+        type: 'line',
+        lineStyle: {
+          type: 'dashed'
         },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            data: this.typeList
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value'
-          }
-        ],
-        series: [
-          {
-            name: '每百米平均速度',
-            type: 'line',
-            label: {
-              show: true,
-              position: 'top'
-            },
-            areaStyle: {
-              color: "#e6fafa"
-            },
-            data: this.details.speed_distribution
-          },
-          {
-            name: '全程平均速度',
-            type: 'line',
-            lineStyle: {
-              type: 'dashed'
-            },
-            data: this.speedList
-          },
-          {
-            name: '满分平均速度',
-            type: 'line',
-            lineStyle: {
-              type: 'dashed'
-            },
-            data: this.fullAvgRateList
-          },
-        ]
-      };
-      // 窗口大小自适应方案
-      myChart.setOption(option);
-      setTimeout(function () {
-        window.onresize = function () {
-          myChart.resize();
-        };
-      }, 200);
-    },
+        data: fullAvgRateList.value
+      },
+    ]
+  };
+  // 窗口大小自适应方案
+  myChart.setOption(option);
+  setTimeout(function () {
+    window.onresize = function () {
+      myChart.resize();
+    };
+  }, 200);
+};
 
-    //步幅曲线
-    strideChart() {
-      let myChart = echarts.init(document.getElementById("strideChart"));
-      let option = {
-        title: {
-          text: ''
-        },
-        tooltip: {
-          trigger: 'axis',
+//步幅曲线
+const strideChart = () => {
+  let myChart = echarts.init(document.getElementById("strideChart"));
+  let option = {
+    title: {
+      text: ''
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: ['每百米平均步幅', '全程平均步幅']
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: typeList.value
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: '每百米平均步幅',
+        type: 'line',
+        label: {
+          show: true,
+          position: 'top'
         },
-        legend: {
-          data: ['每百米平均步幅', '全程平均步幅']
+        areaStyle: {
+          color: "#ffe6e0"
         },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+        data: details.value.stride_distribution
+      },
+      {
+        name: '全程平均步幅',
+        type: 'line',
+        lineStyle: {
+          type: 'dashed'
         },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            data: this.typeList
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value'
-          }
-        ],
-        series: [
-          {
-            name: '每百米平均步幅',
-            type: 'line',
-            label: {
-              show: true,
-              position: 'top'
-            },
-            areaStyle: {
-              color: "#ffe6e0"
-            },
-            data: this.details.stride_distribution
-          },
-          {
-            name: '全程平均步幅',
-            type: 'line',
-            lineStyle: {
-              type: 'dashed'
-            },
-            data: this.strideList
-          },
-        ]
-      };
-      // 窗口大小自适应方案
-      myChart.setOption(option);
-      setTimeout(function () {
-        window.onresize = function () {
-          myChart.resize();
-        };
-      }, 200);
-    },
+        data: strideList.value
+      },
+    ]
+  };
+  // 窗口大小自适应方案
+  myChart.setOption(option);
+  setTimeout(function () {
+    window.onresize = function () {
+      myChart.resize();
+    };
+  }, 200);
+};
 
-    //步频曲线
-    stepsChart() {
-      let myChart = echarts.init(document.getElementById("stepsChart"));
-      let option = {
-        title: {
-          text: ''
-        },
-        tooltip: {
-          trigger: 'axis',
+//步频曲线
+const stepsChart = () => {
+  let myChart = echarts.init(document.getElementById("stepsChart"));
+  let option = {
+    title: {
+      text: ''
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: ['每百米平均步频', '全程平均步频']
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: typeList.value
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: '每百米平均步频',
+        type: 'line',
+        label: {
+          show: true,
+          position: 'top'
         },
-        legend: {
-          data: ['每百米平均步频', '全程平均步频']
+        areaStyle: {
+          color: "#fff5e6"
         },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+        data: details.value.steps_distribution
+      },
+      {
+        name: '全程平均步频',
+        type: 'line',
+        lineStyle: {
+          type: 'dashed'
         },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            data: this.typeList
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value'
-          }
-        ],
-        series: [
-          {
-            name: '每百米平均步频',
-            type: 'line',
-            label: {
-              show: true,
-              position: 'top'
-            },
-            areaStyle: {
-              color: "#fff5e6"
-            },
-            data: this.details.steps_distribution
-          },
-          {
-            name: '全程平均步频',
-            type: 'line',
-            lineStyle: {
-              type: 'dashed'
-            },
-            data: this.stepsList
-          },
-        ]
-      };
-      // 窗口大小自适应方案
-      myChart.setOption(option);
-      setTimeout(function () {
-        window.onresize = function () {
-          myChart.resize();
-        };
-      }, 200);
-    },
-
-  },
+        data: stepsList.value
+      },
+    ]
+  };
+  // 窗口大小自适应方案
+  myChart.setOption(option);
+  setTimeout(function () {
+    window.onresize = function () {
+      myChart.resize();
+    };
+  }, 200);
 };
+
+
+onBeforeMount(() => {
+  query.value = route.query;
+  details.value = JSON.parse(JSON.stringify(props.detailsData));
+  let typeLists = [];
+  let speedLists = [];
+  let strideLists = [];
+  let stepsLists = [];
+  let fullAvgRateLists = [];
+  let strideSum = details.value.stride_distribution.reduce((a:any, b:any) => {
+    return a + b;
+  }, 0);
+  let stepsSum = details.value.steps_distribution.reduce((a:any, b:any) => {
+    return a + b;
+  }, 0);
+  let num: any = null;
+  if (query.value.exam_name == 'runa800') {
+    num = 8
+  }
+  if (query.value.exam_name == 'runa1000') {
+    num = 10
+  }
+  let strideAverage: any = 0;
+  let stepsAverage: any = 0;
+  strideAverage = (strideSum / num).toFixed(1);
+  stepsAverage = (stepsSum / num).toFixed(1);
+  for (let i = 1; i <= num; i++) {
+    typeLists.push(i * 100)
+    speedLists.push(details.value.speed)
+    strideLists.push(strideAverage)
+    stepsLists.push(stepsAverage)
+    fullAvgRateLists.push(details.value.full_avg_rate)
+  }
+  typeList.value = typeLists;
+  speedList.value = speedLists;
+  strideList.value = strideLists;
+  stepsList.value = stepsLists;
+  fullAvgRateList.value = fullAvgRateLists;
+})
+
+onMounted(() => {
+  nextTick(() => {
+    speedChart();
+    strideChart();
+    stepsChart();
+  })
+})
 </script>
 
 <style lang="scss" scoped>

src/views/analysis/components/shotPut.vue

@@ -144,21 +144,23 @@ const dic: any = dataDictionary;
 
 //父值
 const props = defineProps({
-  details: {
+  detailsData: {
     type: Object,
     default: {}
   },
 });
 
 const data = reactive<any>({
+  details:{},
   query: {},
   typeKeyObj :{}
 });
-const { query,typeKeyObj } = toRefs(data);
+const { details,query,typeKeyObj } = toRefs(data);
 
 onBeforeMount(() => {
   typeKeyObj.value = dic.typeKeyObj;
   query.value = route.query;
+  details.value = JSON.parse(JSON.stringify(props.detailsData));
 })
 </script>
 

src/views/analysis/components/sidePullUp.vue

@@ -136,61 +136,34 @@
     </div>
   </div>
 </template>
-<script>
+
+<script setup lang="ts">
 import * as echarts from 'echarts';
-export default {
-  name: 'sidePullUp',
-  props: {
-    details: { type: Object, default: function () { return {} } },
-  },
-  data() {
-    return {
-      query: {},
-      typeList: [],
-      failedList: [],
-      fullAvgRateList: [],
-      averageScoreList: [],
-      lowSpeedList: [],
-      violationList: [],
-    };
-  },
-  created() {
-    this.query = this.$route.query;
-  },
-  mounted() {
-    let videoList = this.details.video_url.split("  ").filter((item) => {
-      return item;
-    });
-    this.$set(this.details, 'videoList', videoList);
-    let typeList = [];
-    let fullAvgRateList = [];
-    let averageScoreList = [];
-    let lowSpeedList = [];
-    let violationList = this.details.all_failed_num_distribution;
-    let mySum = this.details.count_distribution.reduce((a, b) => {
-      return a + b;
-    }, 0);
-    let num = this.details.count_distribution.length;
-    let averageScore = (mySum / num).toFixed(2);
-    for (let i = 1; i <= num; i++) {
-      typeList.push(i * 10)
-      fullAvgRateList.push(this.details.full_avg_rate)
-      averageScoreList.push(averageScore)
-      lowSpeedList.push(2)
-    }
-    this.typeList = typeList;
-    this.fullAvgRateList = fullAvgRateList;
-    this.averageScoreList = averageScoreList;
-    this.lowSpeedList = lowSpeedList;
-    this.violationList = violationList;
-    this.$nextTick(()=>{
-      this.faliChart();
-    })
+const route = useRoute();
+
+//父值
+const props = defineProps({
+  detailsData: {
+    type: Object,
+    default: {}
   },
-  methods: {
-    //成绩曲线
-    faliChart() {
-      let myChart = echarts.init(document.getElementById("faliChart"));
+});
+
+const data = reactive<any>({
+  details: {},
+  query: {},
+  typeList: [],
+  failedList: [],
+  fullAvgRateList: [],
+  averageScoreList: [],
+  lowSpeedList: [],
+  violationList: [],
+});
+const { details, query, typeList, failedList, fullAvgRateList,averageScoreList, lowSpeedList,violationList } = toRefs(data);
+
+//成绩曲线
+const faliChart = () => {
+  let myChart = echarts.init(document.getElementById("faliChart"));
       let option = {
         title: {
           text: ''
@@ -211,7 +184,7 @@ export default {
           {
             type: 'category',
             boundaryGap: false,
-            data: this.typeList
+            data: typeList.value
           }
         ],
         yAxis: [
@@ -230,7 +203,7 @@ export default {
             areaStyle: {
               color: "#e6fafa"
             },
-            data: this.details.count_distribution
+            data: details.value.count_distribution
           },
           {
             name: '您的平均速度',
@@ -238,7 +211,7 @@ export default {
             lineStyle: {
               type: 'dashed'
             },
-            data: this.averageScoreList
+            data: averageScoreList.value
           },
           {
             name: '满分平均速度',
@@ -246,7 +219,7 @@ export default {
             lineStyle: {
               type: 'dashed'
             },
-            data: this.fullAvgRateList
+            data: fullAvgRateList.value
           },
           {
             name: '低速区',
@@ -257,7 +230,7 @@ export default {
             areaStyle: {
               color: "#ffdad1"
             },
-            data: this.lowSpeedList
+            data: lowSpeedList.value
           },
           {
             name: '违规个数',
@@ -265,7 +238,7 @@ export default {
             lineStyle: {
               type: 'dashed'
             },
-            data: this.violationList
+            data: violationList.value
           },
         ]
       };
@@ -276,10 +249,43 @@ export default {
           myChart.resize();
         };
       }, 200);
-    },
-
-  },
 };
+
+onBeforeMount(() => {
+  query.value = route.query;
+  details.value = JSON.parse(JSON.stringify(props.detailsData));
+  let videoList = details.value.video_url.split("  ").filter((item: any) => {
+    return item;
+  });
+  details.value.videoList = videoList
+  let typeLists = [];
+    let fullAvgRateLists = [];
+    let averageScoreLists = [];
+    let lowSpeedLists = [];
+    let violationLists = details.value.all_failed_num_distribution;
+    let mySum = details.value.count_distribution.reduce((a:any, b:any) => {
+      return a + b;
+    }, 0);
+    let num = details.value.count_distribution.length;
+    let averageScore = (mySum / num).toFixed(2);
+    for (let i = 1; i <= num; i++) {
+      typeLists.push(i * 10)
+      fullAvgRateLists.push(details.value.full_avg_rate)
+      averageScoreLists.push(averageScore)
+      lowSpeedLists.push(2)
+    }
+    typeList.value = typeLists;
+    fullAvgRateList.value = fullAvgRateLists;
+    averageScoreList.value = averageScoreLists;
+    lowSpeedList.value = lowSpeedLists;
+    violationList.value = violationLists;
+})
+
+onMounted(() => {
+  nextTick(() => {
+    faliChart();
+  })
+})
 </script>
 
 <style lang="scss" scoped>

src/views/analysis/components/sitUp.vue

@@ -163,68 +163,34 @@
     </div>
   </div>
 </template>
-<script>
+
+<script setup lang="ts">
 import * as echarts from 'echarts';
-export default {
-  name: 'sitUp',
-  props: {
-    details: { type: Object, default: function () { return {} } },
+const route = useRoute();
+
+//父值
+const props = defineProps({
+  detailsData: {
+    type: Object,
+    default: {}
   },
-  data() {
-    return {
-      query: {},
-      typeList: [],
+});
+
+const data = reactive<any>({
+  details: {},
+  query: {},
+  typeList: [],
       failedList: [],
       fullAvgRateList: [],
       averageScoreList: [],
       lowSpeedList: [],
       violationList: [],
-    };
-  },
-  created() {
-    this.query = this.$route.query;
-  },
-  mounted() {
-    let videoList = this.details.video_url.split("  ").filter((item) => {
-      return item;
-    });
-    this.$set(this.details, 'videoList', videoList);
-    let typeList = [];
-    let fullAvgRateList = [];
-    let averageScoreList = [];
-    let lowSpeedList = [];
-    let violationList = [
-      this.details.all_failed_num_10_1,
-      this.details.all_failed_num_10_2,
-      this.details.all_failed_num_10_3,
-      this.details.all_failed_num_10_4,
-      this.details.all_failed_num_10_5,
-      this.details.all_failed_num_10_6
-    ];
-    let mySum = this.details.count_distribution.reduce((a, b) => {
-      return a + b;
-    }, 0);
-    let num = this.details.count_distribution.length;
-    let averageScore = mySum / num;
-    for (let i = 1; i <= num; i++) {
-      typeList.push(i * 10)
-      fullAvgRateList.push(this.details.full_avg_rate)
-      averageScoreList.push(averageScore)
-      lowSpeedList.push(2)
-    }
-    this.typeList = typeList;
-    this.fullAvgRateList = fullAvgRateList;
-    this.averageScoreList = averageScoreList;
-    this.lowSpeedList = lowSpeedList;
-    this.violationList = violationList;
-    this.$nextTick(()=>{
-      this.faliChart();
-    })
-  },
-  methods: {
-    //成绩曲线
-    faliChart() {
-      let myChart = echarts.init(document.getElementById("faliChart"));
+});
+const { details, query, typeList, failedList, fullAvgRateList,averageScoreList, lowSpeedList,violationList } = toRefs(data);
+
+//成绩曲线
+const faliChart = () => {
+  let myChart = echarts.init(document.getElementById("faliChart"));
       let option = {
         title: {
           text: ''
@@ -245,7 +211,7 @@ export default {
           {
             type: 'category',
             boundaryGap: false,
-            data: this.typeList
+            data: typeList.value
           }
         ],
         yAxis: [
@@ -264,7 +230,7 @@ export default {
             areaStyle: {
               color: "#e6fafa"
             },
-            data: this.details.count_distribution
+            data: details.value.count_distribution
           },
           {
             name: '您的平均速度',
@@ -272,7 +238,7 @@ export default {
             lineStyle: {
               type: 'dashed'
             },
-            data: this.averageScoreList
+            data: averageScoreList.value
           },
           {
             name: '满分平均速度',
@@ -280,7 +246,7 @@ export default {
             lineStyle: {
               type: 'dashed'
             },
-            data: this.fullAvgRateList
+            data: fullAvgRateList.value
           },
           {
             name: '低速区',
@@ -291,7 +257,7 @@ export default {
             areaStyle: {
               color: "#ffdad1"
             },
-            data: this.lowSpeedList
+            data: lowSpeedList.value
           },
           {
             name: '违规个数',
@@ -299,7 +265,7 @@ export default {
             lineStyle: {
               type: 'dashed'
             },
-            data: this.violationList
+            data: violationList.value
           },
         ]
       };
@@ -310,10 +276,50 @@ export default {
           myChart.resize();
         };
       }, 200);
-    },
-
-  },
 };
+
+onBeforeMount(() => {
+  query.value = route.query;
+  details.value = JSON.parse(JSON.stringify(props.detailsData));
+  let videoList = details.value.video_url.split("  ").filter((item: any) => {
+    return item;
+  });
+  details.value.videoList = videoList
+  let typeLists = [];
+    let fullAvgRateLists = [];
+    let averageScoreLists = [];
+    let lowSpeedLists = [];
+    let violationLists = [
+      details.value.all_failed_num_10_1,
+      details.value.all_failed_num_10_2,
+      details.value.all_failed_num_10_3,
+      details.value.all_failed_num_10_4,
+      details.value.all_failed_num_10_5,
+      details.value.all_failed_num_10_6
+    ];
+    let mySum = details.value.count_distribution.reduce((a:any, b:any) => {
+      return a + b;
+    }, 0);
+    let num = details.value.count_distribution.length;
+    let averageScore = mySum / num;
+    for (let i = 1; i <= num; i++) {
+      typeLists.push(i * 10)
+      fullAvgRateLists.push(details.value.full_avg_rate)
+      averageScoreLists.push(averageScore)
+      lowSpeedLists.push(2)
+    }
+    typeList.value = typeList;
+    fullAvgRateList.value = fullAvgRateLists;
+    averageScoreList.value = averageScoreLists;
+    lowSpeedList.value = lowSpeedLists;
+    violationList.value = violationLists;
+})
+
+onMounted(() => {
+  nextTick(() => {
+    faliChart();
+  })
+})
 </script>
 
 <style lang="scss" scoped>

src/views/analysis/components/solidBall.vue

@@ -144,21 +144,23 @@ const dic: any = dataDictionary;
 
 //父值
 const props = defineProps({
-  details: {
+  detailsData: {
     type: Object,
     default: {}
   },
 });
 
 const data = reactive<any>({
+  details:{},
   query: {},
   typeKeyObj :{}
 });
-const { query,typeKeyObj } = toRefs(data);
+const { details,query,typeKeyObj } = toRefs(data);
 
 onBeforeMount(() => {
   typeKeyObj.value = dic.typeKeyObj;
   query.value = route.query;
+  details.value = JSON.parse(JSON.stringify(props.detailsData));
 })
 </script>
 

src/views/analysis/components/triJump.vue

@@ -356,21 +356,23 @@ const dic: any = dataDictionary;
 
 //父值
 const props = defineProps({
-  details: {
+  detailsData: {
     type: Object,
     default: {}
   },
 });
 
 const data = reactive<any>({
+  details:{},
   query: {},
   typeKeyObj :{}
 });
-const { query,typeKeyObj } = toRefs(data);
+const { details,query,typeKeyObj } = toRefs(data);
 
 onBeforeMount(() => {
   typeKeyObj.value = dic.typeKeyObj;
   query.value = route.query;
+  details.value = JSON.parse(JSON.stringify(props.detailsData));
 })
 </script>
 

src/views/analysis/detail.vue

@@ -149,33 +149,33 @@
     </div>
     <div class="main-c">
       <!--立定跳远-->
-      <Jump :details="details" v-if="JSON.stringify(details) != '{}' && ['jump'].includes(query.exam_name)
+      <Jump :detailsData="details" v-if="JSON.stringify(details) != '{}' && ['jump'].includes(query.exam_name)
       " />
       <!--实心球-->
-      <SolidBall :details="details" v-if="JSON.stringify(details) != '{}' &&
+      <SolidBall :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
         ['solidball'].includes(query.exam_name)
       " />
       <!--脚环跑步-->
-      <Runa :details="details" v-if="JSON.stringify(details) != '{}' &&
+      <Runa :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
         ['runa800', 'runa1000'].includes(query.exam_name)
       " />
       <!--跑步-->
-      <Run :details="details" v-if="JSON.stringify(details) != '{}' &&
+      <Run :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
         ['run50', 'run60', 'run100', 'run200', 'run400', 'run800', 'run1000', 'run15x4', 'run50x8'].includes(query.exam_name)
       " />
       <!--仰卧起坐-->
-      <SitUp :details="details" v-if="JSON.stringify(details) != '{}' && ['situp'].includes(query.exam_name)
+      <SitUp :detailsData="details" v-if="JSON.stringify(details) != '{}' && ['situp'].includes(query.exam_name)
       " />
       <!--引体向上-->
-      <PullUp :details="details" v-if="JSON.stringify(details) != '{}' &&
+      <PullUp :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
         ['pullup'].includes(query.exam_name)
       " />
       <!--跳绳类-->
-      <RopeSkipping :details="details" v-if="JSON.stringify(details) != '{}' &&
+      <RopeSkipping :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
         ['jumprope', 'skiprope'].includes(query.exam_name)
       " />
       <!--球类-->
-      <Balls :details="details" v-if="JSON.stringify(details) != '{}' &&
+      <Balls :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
         [
           'footballv1',
           'football',
@@ -188,18 +188,18 @@
         ].includes(query.exam_name)
       " />
       <!--斜身引体-->
-      <SidePullUp :details="details" v-if="JSON.stringify(details) != '{}' &&
+      <SidePullUp :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
         ['sidepullup'].includes(query.exam_name)
       " />
       <!--三级蛙跳-->
-      <TriJump :details="details" v-if="JSON.stringify(details) != '{}' && ['trijump'].includes(query.exam_name)
+      <TriJump :detailsData="details" v-if="JSON.stringify(details) != '{}' && ['trijump'].includes(query.exam_name)
       " />
       <!--铅球-->
-      <ShotPut :details="details" v-if="JSON.stringify(details) != '{}' &&
+      <ShotPut :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
         ['shotput'].includes(query.exam_name)
       " />
       <!--急行跳远-->
-      <LongJump :details="details" v-if="JSON.stringify(details) != '{}' && ['longjump'].includes(query.exam_name)
+      <LongJump :detailsData="details" v-if="JSON.stringify(details) != '{}' && ['longjump'].includes(query.exam_name)
       " />
       <div class="tip">
         <!-- 温馨提示：<br />

src/views/analysis/index.vue

@@ -35,7 +35,7 @@ const reportWindowRef = ref();
 const reportScrollRef = ref();
 
 const data = reactive<any>({
-  parameter:{},
+  parameter: {},
   reportList: [],//测试列表
   studentPage: {
     current: 1,
@@ -98,7 +98,14 @@ const getPages = (data: any) => {
  * 查看详情
 */
 const openReport = (data: any) => {
-  reportWindowRef.value.open(parameter.value.project, data);
+  let params = {
+    test_key: data.test_key,
+    stu_key: data.stu_key,
+    exam_name: data.exam_name,
+  }
+  router.push({
+    path: '/analysis/detail', query: params
+  });
 };
 
 /**