tropsCode/src/views/score/index.vue

<template>
  <div class="result bg">
    <div class="resultMain">
      <div class="resultCenter">
        <div class="top">
          <div class="topLeft">
            <div class="pic">
              <img class="image" :src="parameter.pic ? parameter.pic : '../../static/images/train/noImg.png'"></img>
            </div>
            <div class="name">{{ parameter.name }}</div>
          </div>
        </div>
        <div class="bottom">
          <div class="type">
            <div class="li more">项目
              <el-select class="select" v-model="project" :popper-append-to-body="false" placeholder="请选择"
                @change="getProject" clearable>
                <el-option v-for="item in projectList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
            <div class="li"> 成绩 </div>
            <div class="li more datePicker"> 日期 <el-date-picker v-model="date" type="date" value-format="YYYY-MM-DD"
                placeholder="选择日期" @change="bindDateChange" clearable>
              </el-date-picker></div>
            <div class="li"> 测试报告 </div>
          </div>
          <div class="list">
            <div ref="reportScrollRef" @scroll="getNext($event)" class="scrollBox">
              <div class="ul" v-for="(item, index) in reportList" :key="index">
                <div class="li"> {{ item.title }} </div>
                <div class="li"> {{ item.result }} </div>
                <div class="li date"> {{ item.date }} </div>
                <div class="li url" @click="openReport(item)"> 查看 </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div @click="getBack" class="btn">退 出</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
import dataDictionary from '@/utils/dataDictionary';
const reportScrollRef = ref();
const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const route = useRoute();
const dic: any = dataDictionary;
const timeProjectList = ['basketballv1', 'run50', 'run60', 'run70', 'run100', 'run200', 'run400', 'run800', 'run1000', 'runa800', 'runa1000', 'runwb800', 'runwb1000'];
const data = reactive<any>({
  parameter: {
    id: 0,
    name: "",
    student_number: "",
    pic: "",
  },
  reportList: [],
  page: {
    current: 1,
    size: 30,
    pages: 1,
  },
  projectList: [],
  project: '',
  date: "",
  debounceTime: '', //防抖状态
});

const { parameter, reportList, page, projectList, project, date, debounceTime } = toRefs(data);

//筛选日期
const bindDateChange = () => {
  getListData();
};

//筛选项目
const getProject = () => {
  getListData();
};

//初始数据
const getListData = () => {
  //返回的时候重新请求更多页码数据
  if (page.value.current > 1) {
    page.value.size = page.value.size * page.value.current;
  }
  page.value.current = 1; //页面初始化
  getReportList(); //获取数据
};

//成绩列表
const getReportList = () => {
  if (!parameter.value.id) {
    return false;
  }
  let myInfo: any = localStorage.getItem('userInfo');
  let userInfo = JSON.parse(myInfo);
  let params: any = {
    school_id: userInfo.school_id,
    student_ids: parameter.value.id,
    page: page.value.current,
    per_page: page.value.size,
  };
  if (project.value) {
    params.exam_name = project.value;
  }
  if (!date.value) {
    params.start_date = "2021-01-01";
    delete params.end_date;
  } else {
    params.start_date = date.value;
    params.end_date = date.value;
  }
  proxy?.$http.common.studentReport(params).then((res: any) => {
    if (res.status == 200) {
      let list = res.data.map((item: any) => {
        item.title = dic.project[item.exam_name];
        let result = null;
        if (["trijump", "solidball", "shotput", "longjump"].includes(item.exam_name)) {
          result = (Math.round(item.result) / 100).toFixed(2);
        } else if (["basketballv1", "footballv1"].includes(item.exam_name)) {
          result = proxy?.$utils.runTime(item.result, true, false);
        } else {
          result = item.result;
        }
        if (timeProjectList.includes(item.exam_name)) {
          item.result = proxy?.$utils.runTime(item.result, false, false);
        } else {
          item.result = result + dic.unit[item.exam_name];
        }
        item.date = dayjs.unix(item.ctime).format("YYYY-MM-DD");
        return item;
      });
      page.value.current == 1 ?
        (reportList.value = list) :
        reportList.value.push(...list);
      getPages(res.total);
    }
  });
};

//测试报告
const openReport = (data: any) => {
  let result_ids = data.result_id;
  let exam_name = data.exam_name;
  let student_id = data.student_id;
  if (!result_ids || !exam_name) {
    proxy?.$modal.msgWarning('缺少参数');
    return false;
  }
  let obj = {
    result_ids: result_ids,
    exam_name: exam_name,
    student_id: student_id
  }
  router.push({ path: '/analysis/detail', query: obj });
};

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

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

//返回
const getBack = () => {
  router.go(-1);
};

onBeforeMount(() => {
  parameter.value = route.query;
  //重组项目为数组
  for (let i in dic.project) {
    projectList.value.push({
      label: dic.project[i],
      value: i,
    })
  }
  getListData();
});

onMounted(() => {

});
</script>
<style lang="scss" scoped>
.result {
  min-height: 100vh;
}

.resultMain {
  padding-top: 6vh;
}

.resultCenter {
  width: 90%;
  height: 80vh;
  background: #ffffff;
  border-radius: 25px;
  margin: 0 auto 2vh;
  box-shadow: 0 0 15px #ffffff80;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.top {
  width: 100%;
  height: 12vh;
  /*background-color: #b0ffac;
  background-image: url("@/assets/images/common/btnbg2.png");
  background-size: 100% 100%;
  background-repeat: repeat;*/
  display: flex;
  align-items: center;
  background: radial-gradient(120% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
}

.top .topLeft {
  display: flex;
  align-items: center;
  padding: 0 15px;
}

.top .topLeft .pic {
  width: 8vh;
  height: 8vh;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #ffffff;
}

.top .topLeft .pic .image {
  width: 100%;
  height: 100%;
}

.top .topLeft .name {
  font-size: 3.2vh;
  // color: #fff;
  color: #1A293A;
  margin-left: 3vw;
}

.bottom {
  display: flex;
  flex-direction: column;
  height: calc(100% - 12vh);
  background: linear-gradient(67deg, #092941 -85%, #2A484B 96%);
}

.type {
  height: 5vh;
  display: flex;
  text-align: center;
  font-size: 2vh;
  padding: 0 4px;
  color: #1A293A;
  background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
}

.type .li {
  width: 25%;
  padding: 8px 3px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.type .more::before {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border: 0.7vh;
  border-style: solid;
  border-color: #63cacc transparent transparent transparent;
  margin-top: 0.8vh;
  margin-right: 2px;
}

.type .select {
  width: 110px;
  margin-left: 5px;
}

::v-deep(.type .datePicker .el-date-editor.el-input) {
  width: 130px !important;
  margin-left: 5px;
}

.list {
  text-align: center;
  font-size: 2.5vh;
  // padding: 0 4px;
  height: calc(100% - 5vh);
  color: #ffffff;
}

.list .ul {
  display: flex;
}

.list .ul .li {
  width: 25%;
  padding: 8px 3px;
  flex: 1;
  word-break: break-all;
  flex-direction: column;
}

.list .ul .date {
  // font-size: 1.8vh;
}

.list .ul .url {
  color: #90dba4;
}

.type .li:nth-of-type(1),
.list .ul .li:nth-of-type(1) {
  flex-grow: 1;
}

.type .li:nth-of-type(2),
.list .ul .li:nth-of-type(2) {
  flex-grow: 1.4;
}

.type .li:nth-of-type(3),
.list .ul .li:nth-of-type(3) {
  flex-grow: 1.4;
}

.type .li:nth-of-type(4),
.list .ul .li:nth-of-type(4) {
  flex-grow: 1;
}

.type .li:nth-of-type(5),
.list .ul .li:nth-of-type(5) {
  flex-grow: 0.7;
}

.scrollBox {
  height: 98%;
  overflow-y: scroll;

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

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

  &::-webkit-scrollbar-button:hover {
    border-radius: 6px;
    background: rgba(26, 62, 78, 1);
  }
}

.btn {
  width: 90%;
  height: 7vh;
  line-height: 7vh;
  text-align: center;
  color: #fff;
  font-size: 2.2vh;
  margin: 0 auto;
  background: url("@/assets/images/common/areabg2.png") center center repeat-y;
  background-size: 100% 100%;
  border-radius: 2.1vh;
  box-shadow: 0px 0px 15px #ffffff80;
  cursor: pointer;
}
</style>