报告开发

src/components/ReportWindow/index.vue

@@ -22,6 +22,31 @@
           <div class="left-bottom">
             <div class="left-bottom-title">测试结果</div>
             <div class="left-bottom-content">
+              <div class="achievement">
+                <div class="item">
+                  <div class="lable">成绩
+                  </div>
+                  <i></i>
+                  <div class="value">{{ reportDetails.result }}</div>
+                </div>
+                <div class="item">
+                  <div class="lable">得分
+                  </div>
+                  <i></i>
+                  <div class="value">{{ reportDetails.score }}</div>
+                </div>
+                <div class="item">
+                  <div class="lable">评级
+                  </div>
+                  <i></i>
+                  <div class="value">{{ reportDetails.score_level }}</div>
+                </div>
+              </div>
+              <!--图形开始-->
+              <div v-if="['situp', 'pullup', 'sidepullup', 'jumprope'].includes(type)">
+                <div class="echartsBox" ref="echartsRef"></div>
+              </div>
+              <!--图形结束-->
             </div>
           </div>
         </div>
@@ -50,11 +75,20 @@
             </div>
             <div class="pic" v-show="currentTab == 2 ? true : false">
               <!--图片开始-->
-              <swiper ref="refSwiper" :slides-per-view="1" :slides-per-group="1" :space-between="0">
+              <swiper ref="refSwiper" :slides-per-view="1" :slides-per-group="1" :space-between="0"
+                :modules="[Navigation, Pagination]" :navigation="{
+                  prevEl: '.btn-left',
+                  nextEl: '.btn-right',
+                }" :pagination="{ el: '.swiper-pagination-new', type: 'fraction' }">
                 <swiper-slide v-for="(item, index) in reportDetails.image_urls" :key="index">
                   <img :src="item" />
                 </swiper-slide>
               </swiper>
+              <div class="navigationBox">
+                <div class="btn-left"></div>
+                <div class="swiper-pagination-new"></div>
+                <div class="btn-right"></div>
+              </div>
               <!--图片结束-->
             </div>
           </div>
@@ -80,15 +114,20 @@
   </transition>
 </template>
 <script setup lang="ts">
+import * as echarts from 'echarts';
 import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Navigation, Pagination } from 'swiper/modules';
 import 'swiper/css';
+import 'swiper/scss/navigation';
+import 'swiper/scss/pagination';
 import dataDictionary from "@/utils/dataDictionary"
 const { proxy } = getCurrentInstance() as any;
 const emit = defineEmits(['returnData']);
 const data = reactive<any>({
   reportWindow: {
     show: false,
-  }, type: "",
+  },
+  type: "",
   faceCheckStu: {},
   reportDetails: {},
   currentTab: 2
@@ -96,17 +135,19 @@ const data = reactive<any>({
 
 const { reportWindow, type, faceCheckStu, reportDetails, currentTab } = toRefs(data);
 
+const echartsRef = ref(null);
+
 /**
  * 当天成绩列表
 */
-const getReportDetails = () => {
+const getReportDetails = async () => {
   reportDetails.value = {};
   let params: any = {
     exam_name: type.value,
     result_id_info: faceCheckStu.value.result_id_info,
     student_ids: faceCheckStu.value.student_id
   };
-  proxy?.$http.common.reportDetails(params).then((res: any) => {
+  await proxy?.$http.common.reportDetails(params).then((res: any) => {
     if (res.data.length > 0) {
       reportDetails.value = res.data[0];
     }
@@ -118,14 +159,16 @@ const getChoose = (data: any) => {
   currentTab.value = data;
 };
 
-
 //打开
-const open = (typeData: any, data: any) => {
+const open = async (typeData: any, data: any) => {
   type.value = typeData;
   faceCheckStu.value = data;
-  getReportDetails();
+  await getReportDetails();
   reportWindow.value.show = true;
   emit('returnData', reportWindow.value.show);
+  nextTick(() => {
+    inits();
+  })
 };
 
 //关闭
@@ -135,6 +178,64 @@ const close = () => {
   emit('returnData', reportWindow.value.show);
 };
 
+//初始化函数
+const inits = () => {
+  if (reportDetails.value.count_distribution == undefined) {
+    return false;
+  }
+  let failedList = JSON.parse(reportDetails.value.all_failed_num_distribution);
+  let countList = JSON.parse(reportDetails.value.count_distribution);
+  let timeList = countList.map((item: any, index: any) => {
+    let time = (index + 1) * 10;
+    return time + 's';
+  })
+  const myChart = echarts.init(echartsRef.value);
+  const option = {
+    grid: {
+      left: '0%',
+      right: '0%',
+      top: '25px',
+      bottom: '0%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    xAxis: {
+      data: timeList,
+    },
+    yAxis: {
+    },
+    series: [
+      {
+        name: '成绩',
+        type: 'bar',
+        data: countList,
+        label: {
+          show: true,
+          position: 'top'
+        },
+        itemStyle: {
+          color: '#00c1b0'
+        }
+      },
+      {
+        name: ['jumprope'].includes(type.value) ? '中断' : '犯规',
+        type: 'line',
+        lineStyle: {
+          type: 'solid',
+        },
+        itemStyle: {
+          color: '#13ED84',
+          borderWidth: 3
+        },
+        data: failedList,
+      },
+    ]
+  }
+  myChart.setOption(option);
+};
+
 onMounted(() => {
 })
 
@@ -164,12 +265,11 @@ defineExpose({
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #FFFFFF;
   z-index: 999;
 
   .box {
     width: 75%;
-    height: 77.5vh;
+    height: 78.5vh;
     border-radius: 1.6rem;
     background: linear-gradient(60deg, #092941 -85%, #2A484B 96%);
     box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.3);
@@ -244,19 +344,60 @@ defineExpose({
 
         .left-bottom-title {
           width: 100%;
-          font-size: 1.38rem;
+          font-size: 1.5rem;
           color: #060C10;
           padding: 10px 20px;
           box-sizing: border-box;
+          background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
         }
 
         .left-bottom-content {
           width: 100%;
           height: 100%;
-          padding: 0 10px 20px 10px;
+          padding: 0 10px;
           box-sizing: border-box;
           overflow-y: scroll;
 
+          .achievement {
+            padding: 10px 0px 0px 10px;
+
+            .item {
+
+              width: 100%;
+              margin-bottom: 15px;
+              line-height: 1;
+              display: flex;
+              align-items: end;
+
+              .lable {
+                font-size: 1.38rem;
+                color: #195149;
+                flex-shrink: 0;
+              }
+
+              i {
+                width: 20%;
+                height: 0.5rem;
+                display: block;
+                background: #13ED84;
+                margin: 0px 8px 6px 5px;
+                flex-shrink: 0;
+              }
+
+              .value {
+                color: #195149;
+                font-size: 2.21rem;
+                font-family: 'Saira-BlackItalic';
+                font-weight: bold;
+              }
+            }
+          }
+
+          .echartsBox {
+            width: 100%;
+            height: 20vh;
+          }
+
           &::-webkit-scrollbar {
             width: 8px;
           }
@@ -338,7 +479,7 @@ defineExpose({
 
       .content {
         padding: 0 3.2rem;
-        margin-bottom: 10px;
+        margin-bottom: 3.5vh;
         line-height: 0;
         text-align: center;
         $maxHeight: calc(77.5vh - 40px - 3.2rem - 16px - 13vh - 2rem);
@@ -356,11 +497,49 @@ defineExpose({
           border: 1px solid #13ED84;
           border-radius: 1.6rem;
           background: linear-gradient(60deg, #092941 -85%, #2A484B 96%);
-          overflow: hidden;
+          position: relative;
 
           img {
             max-height: $maxHeight;
             max-width: 100%;
+            border-radius: 1.6rem;
+          }
+
+          .navigationBox {
+            width: 14rem;
+            display: flex;
+            justify-content: space-between;
+            position: absolute;
+            z-index: 2;
+            left: 50%;
+            bottom: -1.6rem;
+            margin-left: -7rem;
+
+            .btn-left {
+              cursor: pointer;
+              width: 3.2rem;
+              height: 3.2rem;
+              background: url("@/assets/images/ranking/btn-left.png") center center no-repeat;
+              background-size: 100% 100%;
+            }
+
+            .btn-right {
+              cursor: pointer;
+              width: 3.2rem;
+              height: 3.2rem;
+              background: url("@/assets/images/ranking/btn-right.png") center center no-repeat;
+              background-size: 100% 100%;
+            }
+
+            .swiper-pagination-new {
+              width: 7rem;
+              height: 3.2rem;
+              line-height: 3.2rem;
+              color: #1F3A4F;
+              font-size: 1.65rem;
+              border-radius: 1.6rem;
+              background: #D8D8D8;
+            }
           }
         }
       }