报告修改

src/components/ReportWindow/index.vue

@@ -140,6 +140,7 @@ import 'swiper/scss/pagination';
 import dataDictionary from "@/utils/dataDictionary"
 const { proxy } = getCurrentInstance() as any;
 const emit = defineEmits(['returnData']);
+const echartsRef = ref(null);
 const data = reactive<any>({
   reportWindow: {
     show: false,
@@ -153,8 +154,6 @@ const data = reactive<any>({
 
 const { reportWindow, type, faceCheckStu, reportDetails, currentTab, erweima } = toRefs(data);
 
-const echartsRef = ref(null);
-
 /**
  * 当天成绩列表
 */
@@ -275,6 +274,11 @@ const inits = () => {
     ]
   }
   myChart.setOption(option);
+  setTimeout(function () {
+    window.onresize = function () {
+      myChart.resize();
+    };
+  }, 200);
 };
 
 onMounted(() => {

src/views/analysis/components/pullUp.vue

@@ -12,7 +12,7 @@
           <div class="item-con">
             <div class="item-con-li">
               <!--图表开始-->
-              <div class="chartBox" id="faliChart"></div>
+              <div class="chartBox" id="faliChart" ref="echartsRef"></div>
               <!--图表结束-->
             </div>
             <div class="item-con-li">
@@ -143,6 +143,7 @@
 <script setup lang="ts">
 import * as echarts from 'echarts';
 const route = useRoute();
+const echartsRef = ref(null);
 
 //父值
 const props = defineProps({
@@ -166,7 +167,8 @@ const { details, query, typeList, fullAvgRateList, averageScoreList, lowSpeedLis
 
 //成绩曲线
 const faliChart = () => {
-  let myChart = echarts.init(document.getElementById("faliChart"));
+  // let myChart = echarts.init(document.getElementById("faliChart"));
+  const myChart = echarts.init(echartsRef.value);
   let option = {
     title: {
       text: ''

src/views/analysis/components/ropeSkipping.vue

@@ -12,7 +12,7 @@
           <div class="item-con">
             <div class="item-con-li">
               <!--图表开始-->
-              <div class="chartBox" id="faliChart"></div>
+              <div class="chartBox" id="faliChart" ref="echartsRef"></div>
               <!--图表结束-->
             </div>
             <div class="item-con-li">
@@ -44,6 +44,7 @@
 <script setup lang="ts">
 import * as echarts from 'echarts';
 const route = useRoute();
+const echartsRef = ref(null);
 
 //父值
 const props = defineProps({
@@ -66,7 +67,8 @@ const { details, query, typeList, failedList, fullAvgRateList,averageScoreList,
 
 //成绩曲线
 const faliChart = () => {
-  let myChart = echarts.init(document.getElementById("faliChart"));
+  // let myChart = echarts.init(document.getElementById("faliChart"));
+  const myChart = echarts.init(echartsRef.value);
   let option = {
     title: {
       text: ''

src/views/analysis/components/sidePullUp.vue

@@ -12,7 +12,7 @@
           <div class="item-con">
             <div class="item-con-li">
               <!--图表开始-->
-              <div class="chartBox" id="faliChart"></div>
+              <div class="chartBox" id="faliChart" ref="echartsRef"></div>
               <!--图表结束-->
             </div>
             <div class="item-con-li">
@@ -140,6 +140,7 @@
 <script setup lang="ts">
 import * as echarts from 'echarts';
 const route = useRoute();
+const echartsRef = ref(null);
 
 //父值
 const props = defineProps({
@@ -163,7 +164,8 @@ const { details, query, typeList, failedList, fullAvgRateList,averageScoreList,
 
 //成绩曲线
 const faliChart = () => {
-  let myChart = echarts.init(document.getElementById("faliChart"));
+  // let myChart = echarts.init(document.getElementById("faliChart"));
+  const myChart = echarts.init(echartsRef.value);
       let option = {
         title: {
           text: ''

src/views/analysis/components/sitUp.vue

@@ -12,7 +12,7 @@
           <div class="item-con">
             <div class="item-con-li">
               <!--图表开始-->
-              <div class="chartBox" id="faliChart"></div>
+              <div class="chartBox" id="faliChart" ref="echartsRef"></div>
               <!--图表结束-->
             </div>
             <div class="item-con-li">
@@ -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/yw_hand.png" />
+              <img class="bigImg"
+                src="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/pictures/yw_hand.png" />
             </div>
             <div class="item-con-li" v-if="details.foul.hand.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/yw_back.png" />
+              <img class="bigImg"
+                src="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/pictures/yw_back.png" />
             </div>
             <div class="item-con-li" v-if="details.foul.back.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/yw_buttock.png" />
+              <img class="bigImg"
+                src="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/pictures/yw_buttock.png" />
             </div>
             <div class="item-con-li" v-if="details.foul.hip.urls.length">
               <span class="item-con-li-label item-con-li-label-bg2">您的动作</span>
@@ -119,7 +122,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/yw_knee.png" />
+              <img class="bigImg"
+                src="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/pictures/yw_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>
@@ -167,6 +171,7 @@
 <script setup lang="ts">
 import * as echarts from 'echarts';
 const route = useRoute();
+const echartsRef = ref(null);
 
 //父值
 const props = defineProps({
@@ -180,102 +185,103 @@ const data = reactive<any>({
   details: {},
   query: {},
   typeList: [],
-      failedList: [],
-      fullAvgRateList: [],
-      averageScoreList: [],
-      lowSpeedList: [],
-      violationList: [],
+  failedList: [],
+  fullAvgRateList: [],
+  averageScoreList: [],
+  lowSpeedList: [],
+  violationList: [],
 });
-const { details, query, typeList, failedList, fullAvgRateList,averageScoreList, lowSpeedList,violationList } = toRefs(data);
+const { details, query, typeList, failedList, fullAvgRateList, averageScoreList, lowSpeedList, violationList } = toRefs(data);
 
 //成绩曲线
 const faliChart = () => {
-  let myChart = echarts.init(document.getElementById("faliChart"));
-      let option = {
-        title: {
-          text: ''
+  // let myChart = echarts.init(document.getElementById("faliChart"));
+  const myChart = echarts.init(echartsRef.value);
+  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: typeList.value
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value'
-          }
-        ],
-        series: [
-          {
-            name: '速度曲线',
-            type: 'line',
-            label: {
-              show: true,
-              position: 'top'
-            },
-            areaStyle: {
-              color: "#e6fafa"
-            },
-            data: details.value.count_distribution
-          },
-          {
-            name: '您的平均速度',
-            type: 'line',
-            lineStyle: {
-              type: 'dashed'
-            },
-            data: averageScoreList.value
-          },
-          {
-            name: '满分平均速度',
-            type: 'line',
-            lineStyle: {
-              type: 'dashed'
-            },
-            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);
+        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(() => {
@@ -286,33 +292,33 @@ onBeforeMount(() => {
   });
   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;
+  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(() => {