首页

src/api/modules/study/index.ts

@@ -2,3 +2,6 @@ import { get, post } from '@/api/request'
 // 获取学科
 export const systemSubjectList = (params) =>
   get(`/system/subject/list`, params, {})
+// 学习计划
+export const trainingCampLearningPlanList = (params) =>
+  get(`/trainingCamp/learningPlan/list`, params, {})

src/stores/modules/app.ts

@@ -8,6 +8,7 @@ export const useAppStore = defineStore('app', {
     userInfo: null,
     studentInfo: null,
     categoryMenus: [],
+    subjectMap: new Map(),
   }),
   getters: {},
   actions: {
@@ -21,11 +22,13 @@ export const useAppStore = defineStore('app', {
                 this.studentInfo = studentData
                 systemSubjectList({
                   pageNum: 1,
-                  pageSize: 10000,
+                  pageSize: 10,
                   category: this.studentInfo?.grade,
                 }).then(({ rows }: any) => {
                   const categoryMenus: any = []
+                  const map = new Map()
                   rows.forEach((su) => {
+                    map.set(su.subjectId, su.subject)
                     const menu1 = {
                       path: '/' + su.subjectId,
                       name: su.subjectId,
@@ -40,7 +43,7 @@ export const useAppStore = defineStore('app', {
                     }
                     const menu2 = {
                       path: menu1.path + '/question',
-                      name: menu1.name + '_question',
+                      name: menu1.name + 'question',
                       component: () =>
                         import('@/views/study/subject/question/index.vue'),
                       meta: {
@@ -51,7 +54,7 @@ export const useAppStore = defineStore('app', {
                     }
                     const menu3 = {
                       path: menu1.path + '/question-only',
-                      name: menu1.name + '_question-only',
+                      name: menu1.name + 'question-only',
                       component: () =>
                         import('@/views/study/subject/question/only.vue'),
                       meta: {
@@ -64,6 +67,7 @@ export const useAppStore = defineStore('app', {
                     categoryMenus.push(menu2)
                     categoryMenus.push(menu3)
                   })
+                  this.subjectMap = map
                   categoryMenus.forEach((v) => {
                     router.addRoute(v)
                   })

src/utils/czr-util.ts

@@ -156,6 +156,21 @@ export const Hms = (date: any, format = false) => {
   return format ? `${H}时${m}分${s}秒` : `${H}:${m}:${s}`
 }
 
+export const Hm = (date: any, format = false) => {
+  const _date = new Date(date)
+  const H = `${_date.getHours() < 10 ? `0${_date.getHours()}` : _date.getHours()}`
+  const m = `${_date.getMinutes() < 10 ? `0${_date.getMinutes()}` : _date.getMinutes()}`
+  return format ? `${H}时${m}分` : `${H}:${m}`
+}
+
+export const ms = (date: any, format = false) => {
+  const _date = new Date(date)
+  const m = `${_date.getMinutes() < 10 ? `0${_date.getMinutes()}` : _date.getMinutes()}`
+  const s =
+    _date.getSeconds() < 10 ? `0${_date.getSeconds()}` : _date.getSeconds()
+  return format ? `${m}分${s}秒` : `${m}:${s}`
+}
+
 //防抖
 export const debounce = function (cb: any, ms = 0) {
   let timer: any = null

src/views/study/home/index.vue

@@ -11,49 +11,36 @@
               今日学习计划
             </div>
           </div>
-          <div class="flex flex-col gap-2 p-4">
-            <div
-              class="flex items-center rounded-lg border-l-4 border-[var(--czr-chinese-color)] bg-gray-50 p-3"
-            >
-              <div
-                class="mr-2 rounded-full bg-[var(--czr-chinese-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-chinese-color)]"
-              >
-                语文
-              </div>
-              <div class="flex-1 text-sm text-gray-600">8:00-10:00</div>
-              <div
-                class="text-subject-color ml-auto flex items-center text-xs hover:underline"
-                @click="
-                  $router.push({
-                    name: 'chinese-question-only',
-                    query: { isVideo: true },
-                  })
-                "
-              >
-                <i class="fas fa-file-alt mr-1"></i>
-                查看详情
-              </div>
-            </div>
-            <div
-              class="flex items-center rounded-lg border-l-4 border-[var(--czr-math-color)] bg-gray-50 p-3"
-            >
-              <div
-                class="mr-2 rounded-full bg-[var(--czr-math-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-math-color)]"
-              >
-                数学
-              </div>
-              <div class="flex-1 text-sm text-gray-600">12:00-14:00</div>
-            </div>
-            <div
-              class="flex items-center rounded-lg border-l-4 border-[var(--czr-english-color)] bg-gray-50 p-3"
-            >
+          <div
+            class="flex flex-col gap-2 p-4"
+            v-loading="state.projectToday.loading"
+          >
+            <template v-for="item in state.projectToday.data">
               <div
-                class="mr-2 rounded-full bg-[var(--czr-english-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-english-color)]"
+                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>
+                <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>
-              <div class="flex-1 text-sm text-gray-600">16:00-18:00</div>
-            </div>
+            </template>
           </div>
         </div>
         <div
@@ -70,7 +57,7 @@
                     rounded
                     standout="focus"
                     :dense="true"
-                    v-model="state.query.p2"
+                    v-model="state.project.date"
                     readonly
                   >
                     <template v-slot:prepend>
@@ -85,280 +72,40 @@
                   </q-input>
                   <el-date-picker
                     ref="ref_date"
-                    v-model="state.query.p2"
+                    v-model="state.project.date"
                     value-format="YYYY-MM-DD"
+                    @change="initProject"
                   />
                 </div>
               </div>
             </div>
           </div>
-          <div class="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
-            <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">周一</div>
-                <span class="text-sm text-gray-600">2023-06-11</span>
-              </div>
-              <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)]"
-                >
-                  语文
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  完成《古诗三首》背诵和理解，完成练习册P12-15页
-                </div>
-              </div>
-              <div class="flex items-center">
-                <div
-                  class="mr-2 rounded-full bg-[var(--czr-english-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-english-color)]"
-                >
-                  英语
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  背诵Unit 3单词，完成阅读理解练习2篇
-                </div>
-              </div>
-              <div class="flex items-center">
-                <div
-                  class="mr-2 rounded-full bg-[var(--czr-math-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-math-color)]"
-                >
-                  数学
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  完成一元一次方程习题，练习册P20-25页
-                </div>
-              </div>
-            </div>
-            <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">周二</div>
-                <span class="text-sm text-gray-600">2023-06-12</span>
-              </div>
-              <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)]"
-                >
-                  语文
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  完成《古诗三首》背诵和理解，完成练习册P12-15页
-                </div>
-              </div>
-              <div class="flex items-center">
-                <div
-                  class="mr-2 rounded-full bg-[var(--czr-english-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-english-color)]"
-                >
-                  英语
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  背诵Unit 3单词，完成阅读理解练习2篇
-                </div>
-              </div>
-              <div class="flex items-center">
-                <div
-                  class="mr-2 rounded-full bg-[var(--czr-math-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-math-color)]"
-                >
-                  数学
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  完成一元一次方程习题，练习册P20-25页
-                </div>
-              </div>
-            </div>
-            <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">周三</div>
-                <span class="text-sm text-gray-600">2023-06-13</span>
-              </div>
-              <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)]"
-                >
-                  语文
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  完成《古诗三首》背诵和理解，完成练习册P12-15页
-                </div>
-              </div>
-              <div class="flex items-center">
-                <div
-                  class="mr-2 rounded-full bg-[var(--czr-english-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-english-color)]"
-                >
-                  英语
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  背诵Unit 3单词，完成阅读理解练习2篇
-                </div>
-              </div>
-              <div class="flex items-center">
-                <div
-                  class="mr-2 rounded-full bg-[var(--czr-math-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-math-color)]"
-                >
-                  数学
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  完成一元一次方程习题，练习册P20-25页
-                </div>
-              </div>
-            </div>
-            <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">周四</div>
-                <span class="text-sm text-gray-600">2023-06-14</span>
-              </div>
-              <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)]"
-                >
-                  语文
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  完成《古诗三首》背诵和理解，完成练习册P12-15页
-                </div>
-              </div>
-              <div class="flex items-center">
-                <div
-                  class="mr-2 rounded-full bg-[var(--czr-english-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-english-color)]"
-                >
-                  英语
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  背诵Unit 3单词，完成阅读理解练习2篇
-                </div>
-              </div>
-              <div class="flex items-center">
-                <div
-                  class="mr-2 rounded-full bg-[var(--czr-math-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-math-color)]"
-                >
-                  数学
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  完成一元一次方程习题，练习册P20-25页
-                </div>
-              </div>
-            </div>
-            <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">周五</div>
-                <span class="text-sm text-gray-600">2023-06-15</span>
-              </div>
-              <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)]"
-                >
-                  语文
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  完成《古诗三首》背诵和理解，完成练习册P12-15页
-                </div>
-              </div>
-              <div class="flex items-center">
-                <div
-                  class="mr-2 rounded-full bg-[var(--czr-english-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-english-color)]"
-                >
-                  英语
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  背诵Unit 3单词，完成阅读理解练习2篇
-                </div>
-              </div>
-              <div class="flex items-center">
-                <div
-                  class="mr-2 rounded-full bg-[var(--czr-math-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-math-color)]"
-                >
-                  数学
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  完成一元一次方程习题，练习册P20-25页
-                </div>
-              </div>
-            </div>
-            <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">周六</div>
-                <span class="text-sm text-gray-600">2023-06-16</span>
-              </div>
-              <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)]"
-                >
-                  语文
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  完成《古诗三首》背诵和理解，完成练习册P12-15页
-                </div>
-              </div>
-              <div class="flex items-center">
-                <div
-                  class="mr-2 rounded-full bg-[var(--czr-english-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-english-color)]"
-                >
-                  英语
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  背诵Unit 3单词，完成阅读理解练习2篇
-                </div>
-              </div>
-              <div class="flex items-center">
-                <div
-                  class="mr-2 rounded-full bg-[var(--czr-math-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-math-color)]"
-                >
-                  数学
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  完成一元一次方程习题，练习册P20-25页
-                </div>
-              </div>
-            </div>
-            <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">周日</div>
-                <span class="text-sm text-gray-600">2023-06-17</span>
-              </div>
-              <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)]"
-                >
-                  语文
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  完成《古诗三首》背诵和理解，完成练习册P12-15页
-                </div>
-              </div>
-              <div class="flex items-center">
-                <div
-                  class="mr-2 rounded-full bg-[var(--czr-english-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-english-color)]"
-                >
-                  英语
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  背诵Unit 3单词，完成阅读理解练习2篇
-                </div>
-              </div>
-              <div class="flex items-center">
-                <div
-                  class="mr-2 rounded-full bg-[var(--czr-math-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-math-color)]"
-                >
-                  数学
-                </div>
-                <div class="flex-1 text-sm text-gray-600">
-                  完成一元一次方程习题，练习册P20-25页
-                </div>
+          <div
+            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) }}
+                    </div>
+                  </div>
+                </template>
               </div>
-            </div>
+            </template>
           </div>
         </div>
       </div>
@@ -440,6 +187,7 @@
               >
                 <div
                   class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"
+                  ref="ref_ccc"
                 >
                   <div class="teacher-profile">
                     <div class="teacher-avatar">
@@ -455,7 +203,8 @@
                     </div>
                     <div class="teacher-info">
                       <div class="mb-2 text-2xl font-bold text-gray-800">
-                        王老师
+                        王老师 width: {{ ref_ccc?.clientWidth }} height:
+                        {{ ref_ccc?.clientHeight }}
                       </div>
                       <div class="mb-4 text-lg text-[var(--czr-main-color)]">
                         语文教师 | 10年教龄
@@ -487,7 +236,8 @@
                     </div>
                     <div class="teacher-info">
                       <div class="mb-2 text-2xl font-bold text-gray-800">
-                        李老师
+                        李老师 width: {{ ref_ccc?.clientWidth }} height:
+                        {{ ref_ccc?.clientHeight }}
                       </div>
                       <div class="mb-4 text-lg text-[var(--czr-main-color)]">
                         数学教师 | 8年教龄
@@ -519,7 +269,8 @@
                     </div>
                     <div class="teacher-info">
                       <div class="mb-2 text-2xl font-bold text-gray-800">
-                        张老师
+                        张老师 width: {{ ref_ccc?.clientWidth }} height:
+                        {{ ref_ccc?.clientHeight }}
                       </div>
                       <div class="mb-4 text-lg text-[var(--czr-main-color)]">
                         英语教师 | 12年教龄
@@ -551,7 +302,8 @@
                     </div>
                     <div class="teacher-info">
                       <div class="mb-2 text-2xl font-bold text-gray-800">
-                        刘老师
+                        刘老师 width: {{ ref_ccc?.clientWidth }} height:
+                        {{ ref_ccc?.clientHeight }}
                       </div>
                       <div class="mb-4 text-lg text-[var(--czr-main-color)]">
                         物理教师 | 15年教龄
@@ -592,9 +344,21 @@
 import { onBeforeMount, onMounted, reactive, ref } from 'vue'
 import StudyLayout from '@/views/study/components/study-layout.vue'
 import topCom from './top.vue'
-import { YM } from '@/utils/czr-util'
+import { Hm, YM, YMD } from '@/utils/czr-util'
+import { trainingCampLearningPlanList } from '@/api/modules/study'
+import { useAppStore } from '@/stores'
 
+const AppStore = useAppStore()
 const state: any = reactive({
+  projectToday: {
+    loading: false,
+    data: [],
+  },
+  project: {
+    loading: false,
+    data: [],
+    date: YMD(new Date()),
+  },
   query: {
     p1: YM(new Date()),
     p2: '2023-06-11',
@@ -608,6 +372,7 @@ const state: any = reactive({
     user: null,
   },
 })
+const ref_ccc = ref()
 const ref_month = ref()
 const ref_date = ref()
 const initTeacher = () => {
@@ -740,7 +505,70 @@ const initTopNow = () => {
     },
   }
 }
+const initProjectToday = () => {
+  state.projectToday.loading = true
+  trainingCampLearningPlanList({
+    pageNum: 1,
+    pageSize: 10000,
+    studentId: AppStore.studentInfo?.studentId,
+    params: {
+      beginPlanDate: `${YMD(new Date())} 00:00:00`,
+      endPlanDate: `${YMD(new Date())} 23:59:59`,
+    },
+  })
+    .then(({ rows }: any) => {
+      state.projectToday.data = rows
+    })
+    .finally(() => {
+      state.projectToday.loading = false
+    })
+}
+const initProject = () => {
+  state.project.loading = true
+  trainingCampLearningPlanList({
+    pageNum: 1,
+    pageSize: 10000,
+    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`,
+    },
+  })
+    .then(({ rows }: any) => {
+      // 获取今天的日期（格式：YYYY-MM-DD）
+      const todayDateStr = new Date().toISOString().split('T')[0]
+      // 星期几映射（中文）
+      const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+      // 按天分组，并添加 today 和 weekday 字段
+      const groupedByDay = Object.entries(
+        rows.reduce((acc, item) => {
+          const dateOnly = item.planDate.split(' ')[0]
+          if (!acc[dateOnly]) {
+            acc[dateOnly] = []
+          }
+          acc[dateOnly].push(item)
+          return acc
+        }, {}),
+      ).map(([date, list]) => {
+        const currentDate = new Date(date)
+        const dayOfWeek = currentDate.getDay() // 获取星期几（0-6）
+        const weekday = weekdays[dayOfWeek] // 转换为中文星期几
+        return {
+          date,
+          today: date === todayDateStr, // 是否为今天
+          weekday, // 星期几（如 "周一"）
+          list,
+        }
+      })
+      state.project.data = groupedByDay
+    })
+    .finally(() => {
+      state.project.loading = false
+    })
+}
 onMounted(() => {
+  initProjectToday()
+  initProject()
   initTeacher()
   initTopHistory()
   initTopNow()