tropsCode/src/views/analysis/index.vue

<template>
  <div class="reportList">
    <div class="title">{{ dic.project[parameter.project] || "" }}测试记录</div>
    <ul :ref="reportScrollRef" @scroll="getScroll($event)">
      <li v-for="(item, index) in reportList" :key="index" @click="openReport(item)">
        <div class="left">
          <div class="pic"><img :src="item.face_pic || item.logo_url || item.student_icon_url" /></div>
          <div class="txt">
            <div>
              <div class="name">{{ item.student_name }}</div>
              <div class="className">{{ item.class_name }}</div>
            </div>
          </div>
        </div>
        <div class="right" v-if="['basketballv1'].includes(parameter.project)">
          <div class="score">{{ proxy?.$utils.runTime(item.result, true, false) }}
          </div>
        </div>
        <div class="right" v-else>
          <div class="score">{{ item.result }}
          </div>
          <div class="unit">{{ unit }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import dataDictionary from "@/utils/dataDictionary"
const router = useRouter();
const route = useRoute();
const dic: any = dataDictionary;
const { proxy } = getCurrentInstance() as any;
const reportScrollRef = ref();

const data = reactive<any>({
  parameter: {},
  reportList: [],//测试列表
  studentPage: {
    current: 1,
    size: 20,
    pages: 1,
  }, //学生分页
  debounceTime: '', //防抖状态
  unit: '',//单位
});

const { parameter, reportList, studentPage, debounceTime, unit } = toRefs(data);

/**
 * 成绩列表
*/
const getReportList = () => {
  let type = parameter.value.project;
  let school_id = parameter.value.school_id;
  let params: any = {
    exam_name: type,
    school_id: school_id,
    page: studentPage.value.current,
    per_page: studentPage.value.size
  };
  proxy?.$http.analysis.reportList(params).then((res: any) => {
    if (res.data.length > 0) {
      let list = res.data.map((item: any) => {

        if (type == 'solidball' || type == 'shotball') {
          item.result = item.result / 100
        }
        let result = null;
        if (item.result.toString().indexOf(".") != -1) {
          if (['jump', 'longjump', 'run50', 'run70', 'run100', 'run200', 'run400', 'run800', 'run1000', 'run15x4', 'run50x8', 'run10x4', 'basketballv1', 'basketballv1'].includes(type)) {
            result = item.result.toFixed(2)
          } else {
            result = item.result.toFixed(1);
          }
        } else {
          result = item.result
        }
        item.result = result;
        return item;
      });
      studentPage.value.current == 1 ?
        (reportList.value = list) :
        reportList.value.push(...list);
      studentPage.value.pages = res.total;
      getPages(res.total);
    }
  });
};

/**
 * 计算页码
*/
const getPages = (data: any) => {
  studentPage.value.pages = Math.ceil(data / studentPage.value.size);
};

/**
 * 查看详情
*/
const openReport = (data: any) => {
  let params = {
    exam_name: data.exam_name,
    student_id: data.student_id,
    result_ids: data.result_id,
  }
  router.push({
    path: '/analysis/detail', query: params
  });
};

/**
* 成绩翻页
*/
const getScroll = (event?: any) => {
  if (studentPage.value.current == studentPage.value.pages) {
    return false;
  }
  let obj = event.target;
  let scrollHeight = obj.scrollHeight;
  let scrollTop = obj.scrollTop;
  let clientHeight = obj.clientHeight;
  //提前100高度加载数据
  if (scrollTop + clientHeight + 150 >= scrollHeight) {
    console.log('到底了!')
    //继续加载下一页
    if (debounceTime.value) {
      clearTimeout(debounceTime.value)
    }
    debounceTime.value = setTimeout(() => {
      studentPage.value.current++;
      getReportList();
    }, 500)
  } else {
    console.log('没到底')
  }
};

/**
 * 初始化列表
*/
const getIniReportList = () => {
  studentPage.value.current = 1;
  getReportList();
};

onBeforeMount(() => {
  parameter.value = route.query;
  let project = parameter.value.project;
  unit.value = dic.unit[project];
})

onMounted(() => {
  getIniReportList();
})
</script>
<style lang="scss">
@media screen and (max-width: 1280px) {
  :root {
    font-size: calc(1280px / 106);
  }
}

ul,
ol {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}
.reportList {
  display: flex;
  flex-direction: column;
  height: 100%;

  .title {
    height: 7.05vh;
    line-height: 7.05vh;
    width: 100%;
    text-align: center;
    color: #1A293A;
    font-size: 3.5vh;
    background: radial-gradient(120% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
  }

  ul {
    height: 100%;
    overflow-y: scroll;

    li {
      border-bottom: 1px solid #48677E;
      padding: 8px 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      transition: all 0.2s;

      &:hover {
        background: rgba(255, 255, 255, 0.4);
      }

      .left {
        display: flex;

        .pic {
          width: 7.5vh;
          height: 7.5vh;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          box-sizing: border-box;
          border: 1px solid rgba(255, 255, 255, 0.5);
          margin-right: 13px;
          flex-shrink: 0;

          img {
            width: 100%;
          }
        }

        .txt {
          display: flex;
          align-items: center;

          .name {
            color: #F9F9F9;
            font-size: 1.38rem;
          }

          .className {
            color: #13ED84;
            font-size: 1.1rem;
          }
        }

      }

      .right {
        display: flex;
        font-weight: bold;
        align-items: center;

        .score {
          color: #ffffff;
          font-size: 1.1rem;
          font-family: 'Saira-ExtraBold';
        }

        .unit {
          color: #ffffff;
          font-size: 0.8rem;
          margin-left: 2px;
        }
      }

    }

    &::-webkit-scrollbar {
      width: 0px;
    }

    &::-webkit-scrollbar-thumb {
      border-width: 2px;
      border-radius: 4px;
      border-style: dashed;
      border-color: transparent;
      background-color: rgba(216, 216, 216, 0.8);
      background-clip: padding-box;
    }

    &::-webkit-scrollbar-button:hover {
      border-radius: 6px;
      background: rgba(216, 216, 216, 0.8);
    }
  }
}
</style>