tropsCode/src/views/analysis/index.vue

<template>
  <div class="reportList">
    <div class="title">{{ dic.project[parameter.project] || "" }}测试记录</div>
    <div class="searchBox">
      <!-- <el-select class="select" v-model="optionForm.grade" :popper-append-to-body="false" placeholder="年级" @change="changeGrade" clearable>
        <el-option v-for="item in gradeLists" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select
        class="select"
        v-model="optionForm.class"
        :popper-append-to-body="false"
        placeholder="班级"
        @change="getSearchStudent"
        @clear="getSearchStudent"
        clearable
      >
        <el-option v-for="item in classData" :key="item.value" :label="item.name" :value="item.id" />
      </el-select> -->
      <el-input class="input" v-model="optionForm.student_name" placeholder="姓名" clearable @clear="getSearchStudent" />
      <el-button class="button" type="primary" @click="getSearchStudent">搜索</el-button>
    </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 v-if="item.face_pic || item.logo_url || item.student_icon_url" :src="item.face_pic || item.logo_url || item.student_icon_url" />
            <img v-else src="@/assets/images/common/noImg.png" />
          </div>
          <div class="txt">
            <div>
              <div class="name">{{ item.student_name }}</div>
              <div class="className">{{ item.class_name }}</div>
            </div>
          </div>
        </div>
        <div class="center">
          {{ proxy?.$utils.timestampFormat(item.finish_time,'MM-DD HH:mm:ss') }}
        </div>
        <div class="right" v-if="timeProjectList.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 { clearInterval, clearTimeout, setInterval, setTimeout } from 'worker-timers';
import dataDictionary from '@/utils/dataDictionary';
import useAppStore from '@/store/modules/app';
const router = useRouter();
const route = useRoute();
const dic: any = dataDictionary;
const { proxy } = getCurrentInstance() as any;
const timeProjectList = ['basketballv1', 'run50', 'run60', 'run70', 'run100', 'run200', 'run400', 'run800', 'run1000', 'runa800', 'runa1000', 'runwb800', 'runwb1000'];
const reportScrollRef = ref();

//筛选班别
const classData = computed(() => {
  optionForm.value.class = '';
  let list = classList.value.filter((item: any) => {
    return item.grade == optionForm.value.grade;
  });
  return list;
});

//年级
const gradeLists = computed(() => {
  let myInfo: any = localStorage.getItem('userInfo');
  let userInfo = JSON.parse(myInfo);
  let obj = dataDictionary.gradeLists.find((item) => {
    return userInfo.category == item.value;
  });
  return obj != undefined ? obj.child : [];
});

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

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

/**
 * 成绩列表
 */
const getReportList = () => {
  let type = parameter.value.project;
  let school = parameter.value.school;
  let params: any = {
    exam_name: type,
    school_id: school,
    page: studentPage.value.current,
    per_page: studentPage.value.size,
    ...optionForm.value
  };
  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',
              'run60',
              '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;
  //提前高度加载数据
  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();
};

//变更年级
const changeGrade = () => {
  optionForm.value.class = '';
  getIniReportList();
};

//搜索
const getSearchStudent = () => {
  getIniReportList();
};

//获取班级列表
const getClass = () => {
  const list: any = useAppStore().getClass();
  if (list.length) {
    classList.value = list;
    console.log('classList.value', classList.value);
  } else {
    let params = {
      per_page: 1000,
      page: 1
    };
    proxy?.$http.common.classList(params).then((res: any) => {
      if (res.data.length > 0) {
        let myList: any = res.data;
        classList.value = myList;
        useAppStore().setClass(myList);
      }
    });
  }
};

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

onMounted(() => {
  getIniReportList();
  //getClass();
});
</script>
<style lang="scss">
@media screen and (max-width: 1280px) {
  :root {
    font-size: calc(1280px / 106);
  }
}
.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%);
  }

  .searchBox {
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;

    .select,
    .input {
      // width: 27%;
      width: 100%;
    }

    .el-select__wrapper {
      // border-radius: 15px;
      color: #1a293a;
      background: radial-gradient(30% 126% at 97% 6%, #35ffc6 0%, #00ffe8 100%) !important;
    }

    .el-input__wrapper {
      width: 25%;
      background: #ffffff;
      // border-radius: 15px;
    }

    .button {
      color: #1a293a;
      background: radial-gradient(141% 126% at 5% 93%, #8effa9 0%, #07ffe7 100%);
      box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.3);
      border: none;
    }
  }

  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;
          }
        }
      }

      .center {
        color: #ffffff;
      }

      .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>