日常开发

src/utils/index.ts

@@ -77,12 +77,13 @@ let utils = {
   },
 
   // 时间戳转为日期
-  timestampFormat: (data: any) => {
+  timestampFormat: (data: any, format: any) => {
+    let formatData =  format || 'YYYY-MM-DD HH:mm:ss';
     if(data){
       if(data.toString().length == 10){
-        return dayjs(data * 1000).format('YYYY-MM-DD HH:mm:ss')
+        return dayjs(data * 1000).format(formatData)
       }else{
-        return dayjs(data).format('YYYY-MM-DD HH:mm:ss')
+        return dayjs(data).format(formatData)
       }
     }else{
       return '';

src/views/analysis/index.vue

@@ -1,6 +1,24 @@
 <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">
@@ -12,13 +30,14 @@
             </div>
           </div>
         </div>
+        <div class="center">
+          {{ proxy?.$utils.timestampFormat(item.finish_time,'MM-DD HH:mm:ss') }}
+        </div>
         <div class="right" v-if="['basketballv1'].includes(parameter.project)">
-          <div class="score">{{ proxy?.$utils.runTime(item.result, true, false) }}
-          </div>
+          <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="score">{{ item.result }}</div>
           <div class="unit">{{ unit }}</div>
         </div>
       </li>
@@ -26,30 +45,52 @@
   </div>
 </template>
 <script setup lang="ts">
-import dataDictionary from "@/utils/dataDictionary"
+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 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: {},
-  reportList: [],//测试列表
+  optionForm: {},
+  classList: [],
+  reportList: [], //测试列表
   studentPage: {
     current: 1,
     size: 20,
-    pages: 1,
+    pages: 1
   }, //学生分页
   debounceTime: '', //防抖状态
-  unit: '',//单位
+  unit: '' //单位
 });
 
-const { parameter, reportList, studentPage, debounceTime, unit } = toRefs(data);
+const { parameter, optionForm, classList, reportList, studentPage, debounceTime, unit } = toRefs(data);
 
 /**
  * 成绩列表
-*/
+ */
 const getReportList = () => {
   let type = parameter.value.project;
   let school = parameter.value.school;
@@ -57,31 +98,46 @@ const getReportList = () => {
     exam_name: type,
     school_id: school,
     page: studentPage.value.current,
-    per_page: studentPage.value.size
+    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
+          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)
+        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
+          result = item.result;
         }
         item.result = result;
         return item;
       });
-      studentPage.value.current == 1 ?
-        (reportList.value = list) :
-        reportList.value.push(...list);
+      studentPage.value.current == 1 ? (reportList.value = list) : reportList.value.push(...list);
       studentPage.value.pages = res.total;
       getPages(res.total);
     }
@@ -90,28 +146,29 @@ const getReportList = () => {
 
 /**
  * 计算页码
-*/
+ */
 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,
-  }
+    result_ids: data.result_id
+  };
   router.push({
-    path: '/analysis/detail', query: params
+    path: '/analysis/detail',
+    query: params
   });
 };
 
 /**
-* 成绩翻页
-*/
+ * 成绩翻页
+ */
 const getScroll = (event?: any) => {
   if (studentPage.value.current == studentPage.value.pages) {
     return false;
@@ -122,37 +179,70 @@ const getScroll = (event?: any) => {
   let clientHeight = obj.clientHeight;
   //提前100高度加载数据
   if (scrollTop + clientHeight + 150 >= scrollHeight) {
-    console.log('到底了!')
+    console.log('到底了!');
     //继续加载下一页
     if (debounceTime.value) {
-      clearTimeout(debounceTime.value)
+      clearTimeout(debounceTime.value);
     }
     debounceTime.value = setTimeout(() => {
       studentPage.value.current++;
       getReportList();
-    }, 500)
+    }, 500);
   } else {
-    console.log('没到底')
+    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) {
@@ -170,9 +260,39 @@ onMounted(() => {
     line-height: 7.05vh;
     width: 100%;
     text-align: center;
-    color: #1A293A;
+    color: #1a293a;
     font-size: 3.5vh;
-    background: radial-gradient(120% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
+    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%;
+    }
+
+    .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 {
@@ -180,7 +300,7 @@ onMounted(() => {
     overflow-y: scroll;
 
     li {
-      border-bottom: 1px solid #48677E;
+      border-bottom: 1px solid #48677e;
       padding: 8px 25px;
       display: flex;
       justify-content: space-between;
@@ -218,16 +338,19 @@ onMounted(() => {
           align-items: center;
 
           .name {
-            color: #F9F9F9;
+            color: #f9f9f9;
             font-size: 1.38rem;
           }
 
           .className {
-            color: #13ED84;
+            color: #13ed84;
             font-size: 1.1rem;
           }
         }
+      }
 
+      .center {
+        color: #ffffff;
       }
 
       .right {
@@ -247,7 +370,6 @@ onMounted(() => {
           margin-left: 2px;
         }
       }
-
     }
 
     &::-webkit-scrollbar {