首页

src/api/modules/study/index.ts

@@ -8,3 +8,10 @@ export const trainingCampLearningPlanList = (params) =>
 // 教师简介
 export const systemTeacherProfileImages = (userNamePrefix) =>
   get(`/system/teacher/profileImages/${userNamePrefix}`, {}, {})
+// 本月刷题Top
+export const trainingCampPaperQuestionRelIpadPracticeRanking = (m) =>
+  get(
+    `/trainingCamp/paperQuestionRel/ipad/practiceRanking${m ? '/' + m : ''}`,
+    {},
+    {},
+  )

src/views/study/home/index.vue

@@ -15,30 +15,39 @@
             class="flex flex-col gap-2 p-4"
             v-loading="state.projectToday.loading"
           >
-            <template v-for="item in state.projectToday.data">
-              <div
-                class="flex items-center rounded-lg border-l-4 border-[var(--czr-main-color)] bg-gray-50 p-3"
-              >
-                <div
-                  class="mr-2 rounded-full bg-[var(--czr-main-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-main-color)]"
-                >
-                  {{ AppStore.subjectMap.get(item.subject) }}
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  {{ Hm(item.planDate) }}
-                </div>
+            <template v-if="state.projectToday.data?.length > 0">
+              <template v-for="item in state.projectToday.data">
                 <div
-                  class="text-subject-color ml-auto flex items-center text-xs hover:underline"
-                  @click="
-                    $router.push({
-                      name: item.subject + 'question-only',
-                      query: { isVideo: true },
-                    })
-                  "
+                  class="flex items-center rounded-lg border-l-4 border-[var(--czr-main-color)] bg-gray-50 p-3"
                 >
-                  <i class="fas fa-file-alt mr-1"></i>
-                  查看详情？？
+                  <div
+                    class="mr-2 rounded-full bg-[var(--czr-main-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-main-color)]"
+                  >
+                    {{ AppStore.subjectMap.get(item.subject) }}
+                  </div>
+                  <div class="flex-1 text-sm text-gray-600">
+                    {{ Hm(item.planDate) }}
+                  </div>
+                  <div
+                    class="text-subject-color ml-auto flex items-center text-xs hover:underline"
+                    @click="
+                      $router.push({
+                        name: item.subject + 'question-only',
+                        query: { isVideo: true },
+                      })
+                    "
+                  >
+                    <i class="fas fa-file-alt mr-1"></i>
+                    查看详情？？
+                  </div>
                 </div>
+              </template>
+            </template>
+            <template v-else>
+              <div
+                class="flex size-full items-center justify-center text-xl font-semibold text-gray-700"
+              >
+                暂无数据
               </div>
             </template>
           </div>
@@ -84,26 +93,37 @@
             class="flex flex-1 flex-col gap-4 overflow-y-auto p-4"
             v-loading="state.project.loading"
           >
-            <template v-for="item in state.project.data">
-              <div
-                class="flex flex-col gap-2 rounded-lg border-l-4 border-[var(--czr-main-color)] bg-gray-50 p-3"
-              >
-                <div class="mb-1 flex items-center justify-between">
-                  <div class="text-base font-semibold">{{ item.weekday }}</div>
-                  <span class="text-sm text-gray-600">{{ item.date }}</span>
-                </div>
-                <template v-for="son in item.list">
-                  <div class="flex items-center">
-                    <div
-                      class="mr-2 rounded-full bg-[var(--czr-chinese-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-chinese-color)]"
-                    >
-                      {{ AppStore.subjectMap.get(son.subject) }}
-                    </div>
-                    <div class="flex-1 text-sm text-gray-600">
-                      {{ Hm(son.planDate) }}
+            <template v-if="state.project.data?.length > 0">
+              <template v-for="item in state.project.data">
+                <div
+                  class="flex flex-col gap-2 rounded-lg border-l-4 border-[var(--czr-main-color)] bg-gray-50 p-3"
+                >
+                  <div class="mb-1 flex items-center justify-between">
+                    <div class="text-base font-semibold">
+                      {{ item.weekday }}
                     </div>
+                    <span class="text-sm text-gray-600">{{ item.date }}</span>
                   </div>
-                </template>
+                  <template v-for="son in item.list">
+                    <div class="flex items-center">
+                      <div
+                        class="mr-2 rounded-full bg-[var(--czr-chinese-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-chinese-color)]"
+                      >
+                        {{ AppStore.subjectMap.get(son.subject) }}
+                      </div>
+                      <div class="flex-1 text-sm text-gray-600">
+                        {{ Hm(son.planDate) }}
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </template>
+            </template>
+            <template v-else>
+              <div
+                class="flex size-full items-center justify-center text-xl font-semibold text-gray-700"
+              >
+                暂无数据
               </div>
             </template>
           </div>
@@ -127,7 +147,7 @@
                       rounded
                       standout="focus"
                       :dense="true"
-                      v-model="state.query.p1"
+                      v-model="state.topHistory.date"
                       readonly
                     >
                       <template v-slot:prepend>
@@ -142,19 +162,32 @@
                     </q-input>
                     <el-date-picker
                       ref="ref_month"
-                      v-model="state.query.p1"
+                      v-model="state.topHistory.date"
                       type="month"
                       value-format="YYYY-MM"
+                      @change="initTopHistory"
                     />
                   </div>
                 </div>
               </div>
             </div>
-            <div class="flex-1 overflow-hidden p-4">
-              <topCom
-                :data="state.topHistory.data"
-                :user="state.topHistory.user"
-              />
+            <div
+              class="flex-1 overflow-hidden p-4"
+              v-loading="state.topHistory.loading"
+            >
+              <template v-if="state.topHistory.data?.length > 0">
+                <topCom
+                  :data="state.topHistory.data"
+                  :user="state.topHistory.user"
+                />
+              </template>
+              <template v-else>
+                <div
+                  class="flex size-full items-center justify-center text-xl font-semibold text-gray-700"
+                >
+                  暂无数据
+                </div>
+              </template>
             </div>
           </div>
           <div
@@ -166,8 +199,20 @@
                 本月刷题榜单
               </div>
             </div>
-            <div class="flex-1 overflow-hidden p-4">
-              <topCom :data="state.topNow.data" :user="state.topNow.user" />
+            <div
+              class="flex-1 overflow-hidden p-4"
+              v-loading="state.topNow.loading"
+            >
+              <template v-if="state.topNow.data?.length > 0">
+                <topCom :data="state.topNow.data" :user="state.topNow.user" />
+              </template>
+              <template v-else>
+                <div
+                  class="flex size-full items-center justify-center text-xl font-semibold text-gray-700"
+                >
+                  暂无数据
+                </div>
+              </template>
             </div>
           </div>
         </div>
@@ -350,10 +395,11 @@
 import { nextTick, onBeforeMount, onMounted, reactive, ref } from 'vue'
 import StudyLayout from '@/views/study/components/study-layout.vue'
 import topCom from './top.vue'
-import { Hm, YM, YMD } from '@/utils/czr-util'
+import { Hm, oneDayTime, YM, YMD } from '@/utils/czr-util'
 import {
   systemTeacherProfileImages,
   trainingCampLearningPlanList,
+  trainingCampPaperQuestionRelIpadPracticeRanking,
 } from '@/api/modules/study'
 import { useAppStore } from '@/stores'
 
@@ -372,17 +418,18 @@ const state: any = reactive({
     loading: false,
     data: [],
   },
-  query: {
-    p1: YM(new Date()),
-    p2: '2023-06-11',
-  },
   topHistory: {
+    loading: false,
+    date: YM(new Date(YM(new Date())).getTime() - oneDayTime * 20),
     data: [],
     user: null,
+    top: 10,
   },
   topNow: {
+    loading: false,
     data: [],
     user: null,
+    top: 10,
   },
 })
 const ref_month = ref()
@@ -490,35 +537,54 @@ const initTeacher = () => {
     })
 }
 const initTopHistory = () => {
-  const arr: any = []
-  for (let i = 0; i < 10; i++) {
-    arr.push({
-      name: i === 3 ? '当前学生' : '学生_' + i,
-      total: 100 - i,
-      isUser: i === 3,
+  state.topHistory.loading = true
+  trainingCampPaperQuestionRelIpadPracticeRanking(state.topHistory.date)
+    .then(({ data }: any) => {
+      state.topHistory.data = data.map((v, i) => {
+        v.name = v.studentName
+        v.total = v.monthlyAnswers
+        if (v.currentStudent) {
+          if (i > state.topHistory.top) {
+            state.topHistory.user = {
+              name: v.studentName,
+              total: v.monthlyAnswers,
+              rank: v.monthlyRank,
+            }
+          } else {
+            state.topHistory.user = null
+          }
+        }
+        return v
+      })
+    })
+    .finally(() => {
+      state.topHistory.loading = false
     })
-  }
-  state.topHistory = {
-    data: arr,
-    user: null,
-  }
 }
 const initTopNow = () => {
-  const arr: any = []
-  for (let i = 0; i < 8; i++) {
-    arr.push({
-      name: '学生_' + i,
-      total: 100 - i,
+  state.topNow.loading = true
+  trainingCampPaperQuestionRelIpadPracticeRanking('')
+    .then(({ data }: any) => {
+      state.topNow.data = data.map((v, i) => {
+        v.name = v.studentName
+        v.total = v.monthlyAnswers
+        if (v.currentStudent) {
+          if (i > state.topNow.top) {
+            state.topNow.user = {
+              name: v.studentName,
+              total: v.monthlyAnswers,
+              rank: v.monthlyRank,
+            }
+          } else {
+            state.topNow.user = null
+          }
+        }
+        return v
+      })
+    })
+    .finally(() => {
+      state.topNow.loading = false
     })
-  }
-  state.topNow = {
-    data: arr,
-    user: {
-      name: '当前学生',
-      total: 50,
-      rank: 23,
-    },
-  }
 }
 const initProjectToday = () => {
   state.projectToday.loading = true
@@ -546,7 +612,7 @@ const initProject = () => {
     studentId: AppStore.studentInfo?.studentId,
     params: {
       beginPlanDate: `${state.project.date} 00:00:00`,
-      endPlanDate: `${YMD(new Date(state.project.date).getTime() + 1000 * 60 * 60 * 24 * 7)} 23:59:59`,
+      endPlanDate: `${YMD(new Date(state.project.date).getTime() + oneDayTime * 7)} 23:59:59`,
     },
   })
     .then(({ rows }: any) => {

src/views/study/home/top.vue

@@ -90,11 +90,12 @@ import { computed, reactive } from 'vue'
 const props = defineProps({
   data: { default: () => [] },
   user: { default: null },
+  top: { default: 10 },
 })
 const state: any = reactive({})
 const dataCpt = computed(() => {
   if (props.user) {
-    const arr: any = props.data?.slice(0, 8)
+    const arr: any = props.data?.slice(0, props.top - 2)
     return arr
   } else {
     return props.data