新增全体排名

src/components/MultipleItemAllRanking/index.vue

@@ -0,0 +1,1058 @@
+<template>
+  <div>
+    <Transition :enter-active-class="proxy?.animate.rankingWindow.enter"
+      :leave-active-class="proxy?.animate.rankingWindow.leave">
+      <div class="ranking" v-if="windowState">
+        <div class="top">
+          <div class="top-left">
+            <div class="backBtn" @click="close">返回</div>
+          </div>
+          <div class="top-center">
+            <span>排行榜</span>
+          </div>
+          <div class="top-right">
+          </div>
+        </div>
+        <div class="main">
+          <div class="main-a">
+            <!--学生排行榜-->
+            <div class="main-a-center">
+              <div class="item two">
+                <div class="touxiang">
+                  <img :src="twoObj?.faceCheckStu.face_pic || twoObj?.faceCheckStu?.logo_url"
+                    v-if="twoObj?.faceCheckStu?.face_pic || twoObj?.faceCheckStu?.logo_url" />
+                  <img src="@/assets/images/test/profilePicture2.png" v-else />
+                </div>
+                <div class="txt">
+                  <span class="studentName">{{ twoObj?.faceCheckStu?.name || "" }}</span>
+                  <span class="score">{{ twoObj.count || 0 }}</span>
+                </div>
+              </div>
+              <div class="item one">
+                <div class="touxiang">
+                  <img :src="oneObj.faceCheckStu?.face_pic || oneObj?.faceCheckStu?.logo_url"
+                    v-if="oneObj?.faceCheckStu?.face_pic || oneObj?.faceCheckStu?.logo_url" />
+                  <img src="@/assets/images/test/profilePicture2.png" v-else />
+                </div>
+                <div class="txt">
+                  <span class="studentName">{{ oneObj?.faceCheckStu?.name || "" }}</span>
+                  <span class="score">{{ oneObj.count || 0 }}</span>
+                </div>
+              </div>
+              <div class="item three">
+                <div class="touxiang">
+                  <img :src="threeObj?.faceCheckStu?.face_pic || threeObj?.faceCheckStu?.logo_url"
+                    v-if="threeObj?.faceCheckStu?.face_pic || threeObj?.faceCheckStu?.logo_url" />
+                  <img src="@/assets/images/test/profilePicture2.png" v-else />
+                </div>
+                <div class="txt">
+                  <span class="studentName">{{ threeObj?.faceCheckStu?.name || "" }}</span>
+                  <span class="score">{{ threeObj.count || 0 }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="zhijiao">
+              <i></i>
+              <i></i>
+              <i></i>
+              <i></i>
+            </div>
+          </div>
+          <div class="main-b">
+            <div class="btn-left" @click="getPrevious"></div>
+            <div class="main-b-center">
+              <div class="columns" v-for="(item, index) in studentList" :key="index">
+                <transition name="fade" mode="out-in">
+                  <ul v-if="item.length">
+                    <li v-for="(items, indexs) in item" :key="indexs">
+                      <div class="txt">
+                        <i>{{ items.rank }}</i>
+                        <span class="studentName">{{ items?.faceCheckStu?.name || "" }}</span>
+                        <span class="score">{{ items.count || 0 }}</span>
+                      </div>
+                    </li>
+                  </ul>
+                  <div class="noData" v-else>
+                    <div>
+                      <img src="@/assets/images/allranking/noData.png" />
+                      <span>暂无更多数据</span>
+                    </div>
+                  </div>
+                </transition>
+              </div>
+            </div>
+            <div class="btn-right" @click="getNext"></div>
+            <div class="zhijiao">
+              <i></i>
+              <i></i>
+              <i></i>
+              <i></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+
+</template>
+<script setup lang="ts">
+const route = useRoute();
+import dataDictionary from "@/utils/dataDictionary"
+const { proxy } = getCurrentInstance() as any;
+let project: any = route.query.project;
+
+//父值
+const props = defineProps({
+  testList: {
+    type: Object,
+    default: []
+  },
+});
+
+const data = reactive<any>({
+  unit: "",//单位
+  windowState: false,//窗口状态
+  oneObj: {},
+  twoObj: {},
+  threeObj: {},
+  otherStudentList: [],
+  studentList: [],
+  currentPage: 1,
+});
+
+const { unit, windowState, oneObj, twoObj, threeObj, otherStudentList, studentList, currentPage } = toRefs(data);
+
+//打开
+const open = () => {
+  let list = JSON.parse(JSON.stringify(props.testList))
+  list.sort((a: any, b: any) => Number(b.count) - Number(a.count));
+  if (list[0]) {
+    oneObj.value = list[0];
+  }
+  if (list[1]) {
+    twoObj.value = list[1];
+  }
+  if (list[2]) {
+    threeObj.value = list[2]
+  }
+  let myList = list.map((item: any, index: number) => {
+    item.rank = index + 1;
+    return item;
+  })
+  let newList = list.filter((item, index) => {
+    return index >= 3
+  })
+  let chunkSize = 7;
+  let chunkedArray = [];
+  for (let i = 0; i < newList.length; i += chunkSize) {
+    chunkedArray.push(newList.slice(i, i + chunkSize));
+  }
+  otherStudentList.value = chunkedArray;
+  studentList.value = otherStudentList.value.filter((item, index) => {
+    return index <= currentPage.value + 1
+  })
+  windowState.value = true;
+};
+
+//上一页
+const getPrevious = () => {
+  if (currentPage.value == 1) {
+    return false;
+  }
+  currentPage.value--
+  studentList.value = otherStudentList.value.filter((item, index) => {
+    return index >= currentPage.value - 1  &&  index <= currentPage.value + 1
+  })
+};
+
+//下一页
+const getNext = () => {
+  if(otherStudentList.value.length == currentPage.value){
+
+  }
+  currentPage.value++;
+  studentList.value = otherStudentList.value.filter((item, index) => {
+    return index>= currentPage.value - 1  &&  index <= currentPage.value + 1
+  })
+};
+
+//关闭
+const close = () => {
+  windowState.value = false;
+};
+
+/**
+ * 定时关闭
+ */
+watch(
+  () => windowState.value,
+  (newData) => {
+    if (newData == true) {
+      setTimeout(() => {
+        if (windowState.value == true) {
+          close();
+        }
+      }, 6000)
+    }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  let dic: any = dataDictionary;
+  unit.value = dic.unit[project];
+})
+
+//暴露给父组件用
+defineExpose({
+  open,
+  close
+})
+</script>
+<style scoped lang="scss">
+html {
+  font-size: calc(100vw / 106);
+}
+
+body {
+  margin: 0;
+  overflow: hidden;
+  --xianBg: #0d5af5;
+}
+
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+}
+
+ul li {
+  list-style: none;
+}
+
+.ranking {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background: #061350;
+
+  .top {
+    width: 100%;
+    height: 9.2vh;
+    color: #ffffff;
+    padding-top: 1vh;
+    margin-bottom: 1vh;
+    display: flex;
+    justify-content: space-between;
+
+    .top-center {
+      width: 38%;
+      text-align: center;
+      background-image: url("@/assets/images/allranking/top-center.png");
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+
+      span {
+        display: block;
+        padding-top: 0.5rem;
+        padding-left: 4px;
+        font-size: 2.4rem;
+        letter-spacing: 4px;
+      }
+    }
+
+    .top-left {
+      width: 100%;
+      font-size: 1.3rem;
+      padding-left: 36px;
+      padding-top: 1rem;
+      text-align: left;
+      background: url("@/assets/images/allranking/top-left.png") right 23% no-repeat;
+    }
+
+    .top-right {
+      width: 100%;
+      font-size: 1.1rem;
+      padding-right: 36px;
+      padding-top: 1rem;
+      text-align: right;
+      background: url("@/assets/images/allranking/top-right.png") left 23% no-repeat;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    .backBtn {
+      border-top-right-radius: 30px;
+      border-bottom-right-radius: 30px;
+      border: 1px solid rgba(18, 155, 255, 0.5);
+      height: 5vh;
+      line-height: 5vh;
+      font-size: 1.2rem;
+      padding: 0rem 0.8rem 0rem 1rem;
+      width: 5rem;
+      cursor: pointer;
+    }
+  }
+
+  .main {
+    padding: 0 36px;
+
+    .tab {
+      display: flex;
+      margin-bottom: 10px;
+      justify-content: space-between;
+
+      ul {
+        display: flex;
+        margin: 0;
+
+        li {
+          height: 4vh;
+          line-height: 4vh;
+          border: 1px solid rgba(18, 155, 255, 0.5);
+          padding: 0 20px;
+          border-radius: 0.5rem;
+          font-size: 1.2rem;
+          color: #ffffff;
+          margin-right: 20px;
+          cursor: pointer;
+        }
+
+        .current {
+          background: rgba(13, 90, 245, 0.5);
+        }
+      }
+
+      dl {
+        display: flex;
+        margin: 0;
+
+        dt {
+          height: 4vh;
+          line-height: 4vh;
+          border: 1px solid rgba(18, 155, 255, 0.5);
+          padding: 0 20px;
+          border-radius: 0.5rem;
+          font-size: 1.2rem;
+          color: #ffffff;
+          margin-left: 20px;
+          cursor: pointer;
+        }
+
+        .current {
+          background: rgba(13, 90, 245, 0.5);
+        }
+      }
+    }
+
+    .main-a {
+      width: 100%;
+      height: 33vh;
+      background: #061752;
+      box-shadow: 0px 0px 10px 0px #0b45c0;
+      position: relative;
+      margin-bottom: 2.5vh;
+      display: flex;
+      padding: 0 20px;
+
+      .main-a-center {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        padding-bottom: 3vh;
+        width: 100%;
+        box-sizing: border-box;
+
+        .item {
+          width: 32%;
+          color: #ffffff;
+          border-radius: 1.66rem;
+          box-sizing: border-box;
+          position: relative;
+          display: flex;
+          justify-content: center;
+          align-items: flex-end;
+          padding: 0 10px 2vh 10px;
+          text-align: center;
+          font-size: 1.9rem;
+          cursor: pointer;
+
+          .txt {
+            display: flex;
+            justify-content: center;
+          }
+
+          span {
+            margin: 0 10px;
+            display: block;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          .className {
+            max-width: 10rem;
+          }
+
+          .className2 {
+            max-width: 16rem;
+          }
+
+          .studentName {
+            max-width: 20rem;
+          }
+
+          .score {}
+        }
+
+        .touxiang {
+          width: 14.8vh;
+          height: 14.8vh;
+          box-sizing: border-box;
+          border-radius: 50%;
+          position: absolute;
+          left: 50%;
+          top: -7.4vh;
+          margin-left: -7.4vh;
+          z-index: 2;
+          background: #ffffff;
+
+          img {
+            border-radius: 50%;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+          }
+
+          &::after {
+            content: "";
+            width: 7.4vh;
+            height: calc(7.4vh * (83/94));
+            display: flex;
+            position: absolute;
+            left: -2.9vh;
+            top: -2.4vh;
+            background-size: 100% 100%;
+            background-position: center center;
+            background-repeat: no-repeat;
+          }
+        }
+
+        .one {
+          height: 21vh;
+          border: 0.27rem solid #fed530;
+          background: linear-gradient(180deg, #fbf968 0%, #f8d04c 99%);
+
+          .touxiang {
+            border: 0.27rem solid #fed530;
+
+            &::after {
+              background-image: url("@/assets/images/allranking/mao1.png");
+            }
+          }
+        }
+
+        .two {
+          height: 17vh;
+          border: 0.27rem solid #33a5fa;
+          background: linear-gradient(180deg, #6bd7f8 3%, #aad8fa 96%);
+
+          .touxiang {
+            border: 0.27rem solid #33a5fa;
+
+            &::after {
+              background-image: url("@/assets/images/allranking/mao2.png");
+            }
+          }
+        }
+
+        .three {
+          height: 17vh;
+          border: 0.27rem solid #e98437;
+          background: linear-gradient(180deg, #f1aa54 3%, #f1ab7a 97%);
+
+          .touxiang {
+            border: 0.27rem solid #e98437;
+
+            &::after {
+              background-image: url("@/assets/images/allranking/mao3.png");
+            }
+          }
+        }
+      }
+    }
+
+    .main-b {
+      width: 100%;
+      height: 52vh;
+      background: #061752;
+      box-shadow: 0px 0px 10px 0px #0b45c0;
+      position: relative;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+
+      .main-b-center {
+        width: calc(100% - 40px);
+        height: 95%;
+        padding: 0px;
+        box-sizing: border-box;
+        display: flex;
+
+        .columns {
+          height: 100%;
+          width: calc(100% / 3);
+          flex: 1;
+          box-sizing: border-box;
+          padding: 0px 1.8rem;
+          display: flex;
+          border-right: 1.5px solid #0d5af5;
+          flex-shrink: 0;
+
+          &:last-child {
+            border: none;
+          }
+
+          ul {
+            width: 100%;
+
+            li {
+              height: 14.28%;
+              color: #ffffff;
+              font-size: 1.6rem;
+              overflow: hidden;
+              display: flex;
+              align-items: center;
+              cursor: pointer;
+
+              .txt {
+                width: 100%;
+                display: flex;
+              }
+
+              i {
+                font-style: normal;
+                margin-right: 10px;
+              }
+
+              span {
+                margin: 0 8px;
+                display: block;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                flex: 1;
+              }
+
+              .className {
+                max-width: 8rem;
+              }
+
+              .className2 {
+                max-width: 16rem;
+              }
+
+              .studentName {
+                max-width: 20rem;
+              }
+
+              .score {}
+
+              &:last-child {
+                margin-bottom: 0;
+              }
+            }
+          }
+        }
+      }
+
+      .btn-left {
+        cursor: pointer;
+        width: 20px;
+        height: 60px;
+        margin-left: 0px;
+        background: url("@/assets/images/allranking/btn-left.png") center center no-repeat;
+        background-size: 15px 29px;
+        flex-shrink: 0;
+      }
+
+      .btn-right {
+        cursor: pointer;
+        width: 20px;
+        height: 60px;
+        margin-right: 0px;
+        background: url("@/assets/images/allranking/btn-right.png") center center no-repeat;
+        background-size: 15px 29px;
+        flex-shrink: 0;
+      }
+
+      .noData {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        font-size: 1rem;
+        color: #ffffff;
+        text-align: center;
+        margin: 0 auto;
+
+        img {
+          max-width: 70%;
+          margin-bottom: 10px;
+        }
+
+        span {
+          display: block;
+        }
+      }
+    }
+
+    .zhijiao {
+      i {
+
+        &::before,
+        &::after {
+          content: "";
+          display: block;
+          position: absolute;
+          background: var(--xianBg);
+        }
+
+        &:nth-child(1)::before {
+          width: 1px;
+          height: 15px;
+          left: 0;
+          top: 0;
+        }
+
+        &:nth-child(1)::after {
+          width: 15px;
+          height: 1px;
+          left: 0;
+          top: 0;
+        }
+
+        &:nth-child(2)::before {
+          width: 1px;
+          height: 15px;
+          right: 0;
+          top: 0;
+        }
+
+        &:nth-child(2)::after {
+          width: 15px;
+          height: 1px;
+          right: 0;
+          top: 0;
+        }
+
+        &:nth-child(3)::before {
+          width: 1px;
+          height: 15px;
+          left: 0;
+          bottom: 0;
+        }
+
+        &:nth-child(3)::after {
+          width: 15px;
+          height: 1px;
+          left: 0;
+          bottom: 0;
+        }
+
+        &:nth-child(4)::before {
+          width: 1px;
+          height: 15px;
+          right: 0;
+          bottom: 0;
+        }
+
+        &:nth-child(4)::after {
+          width: 15px;
+          height: 1px;
+          right: 0;
+          bottom: 0;
+        }
+      }
+    }
+
+    .swiper-btn-left {
+      width: 1.7rem;
+      height: 2.2rem;
+      display: block;
+      background: url("@/assets/images/allranking/btn-left2.png") left center no-repeat;
+      background-size: 100% 100%;
+
+      &::after {
+        display: none;
+      }
+    }
+
+    .swiper-btn-right {
+      width: 1.7rem;
+      height: 2.2rem;
+      display: block;
+      background: url("@/assets/images/allranking/btn-right2.png") left center no-repeat;
+      background-size: 100% 100%;
+
+      &::after {
+        display: none;
+      }
+    }
+
+  }
+
+  .footer {
+    width: 100%;
+    height: 5.6vh;
+
+    .footer-center {
+      position: fixed;
+      width: 100%;
+      height: 5.6vh;
+      bottom: 0px;
+      display: flex;
+      justify-content: space-between;
+
+      .footer-left {
+        display: flex;
+
+        .switch {
+          padding: 0px 30px 0px 36px;
+          height: 5.6vh;
+          line-height: 5.6vh;
+          text-align: center;
+          font-size: 1.333rem;
+          color: #ffffff;
+          cursor: pointer;
+          background: url("@/assets/images/allranking/btn-tab.png") left center no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+
+          i {
+            content: "";
+            width: 1.333rem;
+            height: 1.333rem;
+            display: block;
+            background: url("@/assets/images/allranking/rankingBtn.png") left center no-repeat;
+            background-size: 1.333rem 1.333rem;
+            margin-right: 5px;
+          }
+        }
+      }
+
+      // .footer-right {
+      //   margin-right: 30px;
+      // }
+
+      .tab {
+        ul {
+          display: flex;
+
+          li {
+            height: 5.6vh;
+            line-height: 5.6vh;
+            //min-width: 5.5rem;
+            padding: 0px 0.5rem;
+            text-align: center;
+            font-size: 1rem;
+            color: #ffffff;
+            margin-left: 1rem;
+            border-radius: 0.8rem 0.8rem 0px 0px;
+            border: 1px solid rgba(18, 155, 255, 0.5);
+            border-bottom: none;
+            cursor: pointer;
+
+            &:hover {
+              background: rgba(13, 90, 245, 0.2);
+            }
+          }
+
+          .current {
+            background: rgba(13, 90, 245, 0.5);
+          }
+        }
+      }
+    }
+  }
+}
+
+.swiperBox {
+  .item {
+    .gradeTitleBox {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 0.5vh;
+      pointer-events: none;
+
+      .gradeTitle {
+        padding: 0px 35px 0px 35px;
+        height: 5.6vh;
+        line-height: 5.6vh;
+        text-align: center;
+        font-size: 1.333rem;
+        color: #ffffff;
+        cursor: pointer;
+        background: url("@/assets/images/allranking/btn-tab.png") left center no-repeat;
+        background-size: 100% 100%;
+
+      }
+    }
+
+    ul {
+      height: 66vh;
+      padding: 0.5rem;
+      margin-bottom: 0.5vh;
+      overflow-y: scroll;
+
+      li {
+        * {
+          pointer-events: none;
+        }
+
+        height: 8.5vh;
+        background: #061752;
+        box-shadow: 0px 0px 0.3rem 0px #0B45C0;
+        margin-bottom: 2vh;
+        display: flex;
+        align-items: center;
+        font-size: 1.3rem;
+        color: #ffffff;
+        justify-content: space-around;
+        cursor: pointer;
+
+        i {
+          min-width: 2.5rem;
+          margin-right: 1rem;
+          font-style: normal;
+          text-align: center;
+        }
+
+        .pai1 {
+          width: 2.5rem;
+          height: 2.5rem;
+          box-sizing: border-box;
+          padding-top: 0.9rem;
+          background: url("@/assets/images/allranking/pai1.png") left center no-repeat;
+          background-size: 100% 100%;
+        }
+
+        .pai2 {
+          width: 2.5rem;
+          height: 2.5rem;
+          box-sizing: border-box;
+          padding-top: 0.9rem;
+          background: url("@/assets/images/allranking/pai2.png") left center no-repeat;
+          background-size: 100% 100%;
+        }
+
+        .pai3 {
+          width: 2.5rem;
+          height: 2.5rem;
+          box-sizing: border-box;
+          padding-top: 0.9rem;
+          background: url("@/assets/images/allranking/pai3.png") left center no-repeat;
+          background-size: 100% 100%;
+        }
+
+        .touxiang {
+          width: 6vh;
+          height: 6vh;
+          box-sizing: border-box;
+          border-radius: 50%;
+          background: #ffffff;
+
+          img {
+            border-radius: 50%;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+          }
+        }
+
+        .nameBox {
+          display: flex;
+          text-align: left;
+          flex-direction: column;
+          flex: 0.4;
+
+          .studentName {
+            margin-bottom: 1vh;
+          }
+
+          .className {
+            font-size: 0.8rem;
+          }
+        }
+
+
+      }
+
+      &::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-width: 2px;
+        border-radius: 4px;
+        border-style: dashed;
+        border-color: transparent;
+        background-color: rgba(26, 62, 78, 0.4);
+        background-clip: padding-box;
+      }
+
+      &::-webkit-scrollbar-button:hover {
+        border-radius: 5px;
+        background: rgba(26, 62, 78, 1);
+      }
+    }
+
+    .moreBtn {
+      text-align: center;
+      letter-spacing: 0.27px;
+      font-size: 1rem;
+      color: #08369F;
+      padding-bottom: 1.8vh;
+      background: url("@/assets/images/allranking/btn-bottom.png") left center no-repeat;
+      background-size: auto 1.8vh;
+      background-position: center bottom;
+    }
+  }
+
+  .swiper-slide-next {
+    &::before {
+      content: "";
+      width: 2px;
+      height: 55vh;
+      background: #0B4892;
+      position: absolute;
+      left: -15px;
+      top: 12vh;
+    }
+
+    &::after {
+      content: "";
+      width: 2px;
+      height: 55vh;
+      background: #0B4892;
+      position: absolute;
+      right: -15px;
+      top: 12vh;
+    }
+  }
+}
+
+.choiceClass {
+  width: 80%;
+  position: absolute;
+  z-index: 2;
+  top: 10vh;
+  left: 10%;
+  background: rgba(11, 29, 39, 0.9);
+  border-radius: 10px;
+  padding: 20px;
+  box-sizing: border-box;
+  box-shadow: rgba(57, 187, 187, 0.48) 0px 0px 10px 10px inset;
+  border: 2px solid rgb(57, 187, 187);
+
+  .choiceClass-content {
+    color: #ffffff;
+    display: flex;
+    justify-content: space-around;
+
+    .classTitle {
+      font-size: 1.4rem;
+      margin-bottom: 20px;
+    }
+
+    ul {
+      height: 67vh;
+      margin-bottom: 2vh;
+      overflow-y: scroll;
+
+      li {
+        font-size: 1.2rem;
+        padding: 10px 0;
+        cursor: pointer;
+
+        &:hover {
+          color: #0936a3;
+        }
+      }
+
+      &::-webkit-scrollbar {
+        width: 10px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-width: 2px;
+        border-radius: 4px;
+        border-style: dashed;
+        border-color: transparent;
+        background-color: rgba(26, 62, 78, 0.5);
+        background-clip: padding-box;
+      }
+
+      &::-webkit-scrollbar-button:hover {
+        border-radius: 6px;
+        background: rgba(26, 62, 78, 1);
+      }
+    }
+  }
+
+
+  .choiceClass-btn-box {
+    display: flex;
+    justify-content: center;
+
+    .choiceClass-btn {
+      margin: 0 15px;
+      text-align: center;
+      width: 100px;
+      background: #39bbbb;
+      height: 35px;
+      line-height: 35px;
+      color: #fff;
+      cursor: pointer;
+    }
+
+    .choiceClass-btn-all {
+      background: rgba(13, 90, 245, 0.5);
+    }
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+
+.fade-enter,
+.fade-leave-to
+
+/* .fade-leave-active below version 2.1.8 */
+  {
+  opacity: 0;
+}
+
+
+.fullScreen {
+  width: 1.8rem;
+  height: 1.8rem;
+  background-image: url("@/assets/img/fullScreen.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+</style>

src/types/components.d.ts

@@ -9,7 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     ActionConfirmWindow: typeof import('./../components/ActionConfirmWindow/index.vue')['default']
     ChooseStudent: typeof import('./../components/ChooseStudent/index.vue')['default']
-    copy: typeof import('./../components/Window copy/index.vue')['default']
+    copy: typeof import('./../components/MultipleItemRanking copy/index.vue')['default']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElIcon: typeof import('element-plus/es')['ElIcon']
@@ -24,6 +24,7 @@ declare module 'vue' {
     Header: typeof import('./../components/Header/index.vue')['default']
     JumpRopeGame: typeof import('./../components/JumpRopeGame/index.vue')['default']
     MultipleItem: typeof import('./../components/MultipleItem/index.vue')['default']
+    MultipleItemAllRanking: typeof import('./../components/MultipleItemAllRanking/index.vue')['default']
     MultipleItemRanking: typeof import('./../components/MultipleItemRanking/index.vue')['default']
     OnlineFaceWindow: typeof import('./../components/OnlineFaceWindow/index.vue')['default']
     OptionWindow: typeof import('./../components/OptionWindow/index.vue')['default']

src/views/train/multiple.vue

@@ -75,8 +75,10 @@
     <!--倒计时结束-->
     <!--选择学生-->
     <ChooseStudent ref="chooseStudentRef" @returnData="returnStudent" />
-    <!--排行榜-->
+    <!--十人以内排行榜-->
     <MultipleItemRanking ref="multipleItemRankingRef" :testList="testList"></MultipleItemRanking>
+    <!--十人以上排行榜-->
+    <MultipleItemAllRanking ref="multipleItemAllRankingRef" :testList="testList"></MultipleItemAllRanking>
   </div>
 </template>
 
@@ -105,6 +107,7 @@ const route = useRoute();
 const reportListRef = ref();
 const chooseStudentRef = ref();
 const multipleItemRankingRef = ref();
+const multipleItemAllRankingRef = ref();
 
 const data = reactive<any>({
   timerManager: {}, //计时器管理
@@ -519,7 +522,11 @@ const returnData = (data: any) => {
       examState.value = 3;
       speckCancel();//停止播报
       //打开排行榜
-      multipleItemRankingRef.value.open();
+      if (testList.value.length >= 10) {
+        multipleItemAllRankingRef.value.open();
+      } else {
+        multipleItemRankingRef.value.open();
+      }
     }
   }
 
@@ -671,7 +678,7 @@ const initHand = () => {
       deviceInfo.value = e.device_info;
       let handcontroller_id = deviceInfo.value.handcontroller_id;
       //启用才执行命令
-      if(deviceInfo.value.status){
+      if (deviceInfo.value.status) {
         stateHand(handcontroller_id);
       }
     }