study-ipad/src/views/study/subject/index.vue

<template>
  <StudyLayout>
    <div class="grid h-full w-full grid-cols-2 gap-6 overflow-hidden p-6">
      <div
        class="col-span-1 flex h-full flex-col overflow-hidden rounded-xl bg-white shadow-md"
      >
        <div class="bg-[var(--czr-main-sub-color)] p-4 text-white">
          <div class="flex items-center text-xl font-bold">
            <i class="fas fa-cubes mr-2"></i>
            板块提升
            <div
              class="subject-questions-btn bg-subject-color ml-auto flex items-center rounded-full px-3 py-1 text-sm"
              @click="$router.push({ name: $route.name + 'question' })"
            >
              <i class="fas fa-question-circle mr-1"></i>
              <span>更多</span>
            </div>
          </div>
        </div>
        <!-- 图表容器 -->
        <div
          class="flex flex-1 flex-col overflow-x-hidden overflow-y-auto p-4"
          style="flex-wrap: unset"
        >
          <!-- 图表切换标签 -->
          <div class="mt-2 mb-4 flex space-x-2">
            <button
              :class="
                state.statistic.type === 1
                  ? 'bg-[var(--czr-main-color)] text-white'
                  : 'bg-gray-100 text-gray-600'
              "
              class="chart-tab rounded-full px-3 py-1 text-sm"
              @click="state.statistic.type = 1"
            >
              知识点掌握
            </button>
            <button
              :class="
                state.statistic.type === 2
                  ? 'bg-[var(--czr-main-color)] text-white'
                  : 'bg-gray-100 text-gray-600'
              "
              class="chart-tab rounded-full px-3 py-1 text-sm"
              @click="state.statistic.type = 2"
            >
              成绩趋势
            </button>
            <button
              :class="
                state.statistic.type === 3
                  ? 'bg-[var(--czr-main-color)] text-white'
                  : 'bg-gray-100 text-gray-600'
              "
              class="chart-tab rounded-full px-3 py-1 text-sm"
              @click="state.statistic.type = 3"
            >
              练习完成度
            </button>
          </div>

          <!-- 知识点掌握情况图表 -->
          <div class="mb-6 flex-1">
            <chart1 v-if="state.statistic.type === 1" />
            <chart2
              v-if="state.statistic.type === 2"
              v-loading="state.statistic.line.loading"
              :data="state.statistic.line.data"
            />
            <chart3 v-if="state.statistic.type === 3" />
          </div>

          <!-- 统计卡片 -->
          <div class="mt-4 grid grid-cols-2 gap-4 md:grid-cols-4">
            <div
              class="stat-card rounded-lg border-l-4 border-[var(--czr-main-color)] bg-gray-50 p-3"
            >
              <div class="text-xs text-gray-500">当前难度等级</div>
              <div class="mt-1 text-xl font-bold text-gray-800">S</div>
            </div>
            <div
              class="stat-card rounded-lg border-l-4 border-[var(--czr-main-color)] bg-gray-50 p-3"
            >
              <div class="text-xs text-gray-500">正确率</div>
              <div class="mt-1 text-xl font-bold text-gray-800">85%</div>
            </div>
            <div
              class="stat-card rounded-lg border-l-4 border-[var(--czr-main-color)] bg-gray-50 p-3"
            >
              <div class="text-xs text-gray-500">待提升板块</div>
              <div class="mt-1 text-xl font-bold text-gray-800">文言文</div>
            </div>
            <div
              class="stat-card rounded-lg border-l-4 border-[var(--czr-main-color)] bg-gray-50 p-3"
            >
              <div class="text-xs text-gray-500">优秀板块</div>
              <div class="mt-1 text-xl font-bold text-gray-800">作文</div>
            </div>
          </div>

          <div class="flex items-center justify-between py-3">
            <div class="font-semibold text-gray-800">最近刷题记录</div>

            <div class="ml-auto">
              <div class="__czr-quasar-el-date">
                <q-input
                  class="w-[220px]"
                  rounded
                  standout="focus"
                  :dense="true"
                  v-model="dateStrMakeQuestion"
                  readonly
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      @click="ref_dateMakeQuestion.handleOpen()"
                    >
                    </q-icon>
                  </template>
                </q-input>
                <el-date-picker
                  ref="ref_dateMakeQuestion"
                  v-model="state.makeQuestion.date"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  @change="initMakeQuestion"
                />
              </div>
            </div>
          </div>
          <div
            class="h-[120px] overflow-y-auto"
            v-loading="state.makeQuestion.loading"
          >
            <template v-if="state.makeQuestion.data?.length > 0">
              <template v-for="item in state.makeQuestion.data">
                <div class="record-item rounded-lg border border-gray-100 p-2">
                  <div class="flex items-center justify-between">
                    <span class="text-sm font-medium">
                      {{ AppStore.subjectMap.get(item.subject) }}
                    </span>
                    <div class="flex justify-end">
                      <button
                        class="text-subject-color flex items-center text-xs hover:underline"
                        @click="
                          $router.push({
                            name: $route.meta.subjectId + 'plan',
                            query: {
                              planId: item.planId,
                            },
                          })
                        "
                      >
                        <i class="fas fa-file-alt mr-1"></i>
                        查看详情
                      </button>
                    </div>
                  </div>
                  <div class="mt-1 text-xs text-gray-500">
                    {{ item.planDate }} | {{ item.questionCount }}题（<span
                      class="text-red"
                      >{{ item.wrongCount }}</span
                    >/<span class="text-green">{{ item.correctCount }}</span
                    >） | 正确率{{
                      (
                        (Number(item.correctCount) /
                          Number(item.questionCount)) *
                        100
                      ).toFixed(1)
                    }}%
                  </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>
        </div>
      </div>
      <div class="col-span-1 flex flex-col gap-6 overflow-hidden px-0.5">
        <div
          class="flex flex-1 flex-col overflow-hidden rounded-xl bg-white shadow-md"
        >
          <div class="bg-[var(--czr-main-sub-color)] p-4 text-white">
            <div class="relative flex items-center text-xl font-bold">
              <i class="fas fa-calendar-alt mr-2"></i>
              考形训练
              <div class="absolute right-2 ml-auto flex">
                <div class="__czr-quasar-el-date training-date">
                  <q-input
                    class="w-[220px]"
                    rounded
                    standout="focus"
                    :dense="true"
                    v-model="dateStrTraining"
                    readonly
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        color="white"
                        @click="ref_dateTraining.handleOpen()"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                  <el-date-picker
                    ref="ref_dateTraining"
                    v-model="state.training.date"
                    value-format="YYYY-MM-DD"
                    type="daterange"
                    @change="initTraining"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="flex flex-1 flex-col overflow-hidden"
            v-loading="state.training.loading"
          >
            <template v-if="state.training.data?.length > 0">
              <div class="h-[200px]">
                <chart4 :data="state.training.data" />
              </div>
              <div class="flex-1 overflow-y-auto px-6 py-2">
                <template v-if="state.training.groupData?.length > 0">
                  <template v-for="item in state.training.groupData">
                    <div class="timeline-date">{{ YM(item.date, true) }}</div>
                    <template v-for="son in item.list">
                      <div
                        class="exam-item mb-3 rounded-lg border border-gray-300 p-3"
                      >
                        <div class="mb-2 flex items-start justify-between">
                          <div>
                            <div class="mt-0.5 text-sm text-gray-500">
                              {{ son.planDate }}
                            </div>
                          </div>
                          <span class="text-sm font-medium text-gray-800">
                            {{ son.score }}分
                          </span>
                        </div>
                        <div
                          class="mt-3 grid grid-cols-2 gap-3 text-sm md:grid-cols-4"
                        >
                          <div class="rounded bg-gray-50 p-2 text-center">
                            <div class="text-xs text-gray-500">试卷难度</div>
                            <div class="font-medium text-gray-800">
                              {{
                                DictionaryStore.difficultyLevelMap.get(
                                  son.difficultyLevel,
                                )
                              }}
                            </div>
                          </div>
                          <div class="rounded bg-gray-50 p-2 text-center">
                            <div class="text-xs text-gray-500">用时</div>
                            <div class="font-medium text-gray-800">
                              {{ Math.floor(son.duration / 60) }}分钟
                            </div>
                          </div>
                          <div class="rounded bg-gray-50 p-2 text-center">
                            <div class="text-xs text-gray-500">得分</div>
                            <div class="font-medium text-gray-800">
                              {{ son.score }}分
                            </div>
                          </div>
                          <div class="rounded bg-gray-50 p-2 text-center">
                            <div class="text-xs text-gray-500">错题</div>
                            <div class="font-medium text-red-500">
                              {{ son.wrongCount }}题
                            </div>
                          </div>
                        </div>
                        <div class="mt-3">
                          <div class="mb-1 text-xs text-gray-500">
                            错题类型：
                          </div>
                          <div class="flex flex-wrap gap-2">
                            <span
                              class="mistake-tag rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-800"
                              >xxx(xxx)</span
                            >
                            <span
                              class="mistake-tag rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-800"
                              >xxx(xxx)</span
                            >
                          </div>
                        </div>
                        <div class="mt-3 flex justify-end">
                          <button
                            class="text-subject-color flex items-center text-xs hover:underline"
                            @click="
                              $router.push({
                                name: $route.meta.subjectId + 'plan',
                                query: {
                                  planId: son.planId,
                                },
                              })
                            "
                          >
                            <i class="fas fa-file-alt mr-1"></i>
                            查看详情
                          </button>
                        </div>
                      </div>
                    </template>
                  </template>
                </template>
              </div>
            </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
          class="flex flex-col overflow-hidden rounded-xl bg-white shadow-md"
        >
          <div class="bg-[var(--czr-main-sub-color)] p-4 text-white">
            <div class="flex items-center text-xl font-bold">
              <i class="fas fa-clock mr-2"></i>
              错题统计
              <div
                class="subject-questions-btn bg-subject-color ml-auto flex items-center rounded-full px-3 py-1 text-sm"
                @click="
                  $router.push({
                    name: $route.meta.subjectId + 'plan',
                    query: {
                      onlyError: true,
                    },
                  })
                "
              >
                <i class="fas fa-question-circle mr-1"></i>
                <span>查看详情</span>
              </div>
            </div>
          </div>
          <div class="flex flex-col p-4">
            <div class="grid grid-cols-3 gap-4">
              <div class="flex flex-1 items-center rounded-lg bg-gray-50 p-3">
                <div
                  class="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-blue-100"
                >
                  <i class="fas fa-clipboard-list text-blue-600"></i>
                </div>
                <div>
                  <div class="text-sm text-gray-500">本学科总做题数</div>
                  <div class="text-lg font-bold">246题</div>
                </div>
              </div>
              <div class="flex flex-1 items-center rounded-lg bg-gray-50 p-3">
                <div
                  class="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-red-100"
                >
                  <i class="fas fa-times-circle text-red-600"></i>
                </div>
                <div>
                  <div class="text-sm text-gray-500">错题数</div>
                  <div class="text-lg font-bold">59题</div>
                </div>
              </div>
              <div class="flex flex-1 items-center rounded-lg bg-gray-50 p-3">
                <div
                  class="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-red-100"
                >
                  <i class="fas fa-times-circle text-red-600"></i>
                </div>
                <div>
                  <div class="text-sm text-gray-500">错误率</div>
                  <div class="text-lg font-bold">23%</div>
                </div>
              </div>
            </div>
            <div class="mt-4 border-t border-gray-100 pt-4">
              <div class="mb-3 text-sm font-medium">错题最多的知识点</div>
              <div class="flex flex-wrap gap-2">
                <span
                  class="mistake-tag rounded-full bg-red-100 px-2 py-1 text-xs text-red-800"
                  >文言文虚词 (12题)</span
                >
                <span
                  class="mistake-tag rounded-full bg-red-100 px-2 py-1 text-xs text-red-800"
                  >现代文阅读理解 (9题)</span
                >
                <span
                  class="mistake-tag rounded-full bg-red-100 px-2 py-1 text-xs text-red-800"
                  >诗歌鉴赏 (7题)</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </StudyLayout>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, onMounted, reactive, ref } from 'vue'
import StudyLayout from '@/views/study/components/study-layout.vue'
import chart1 from './chart-1.vue'
import chart2 from './chart-2.vue'
import chart3 from './chart-3.vue'
import chart4 from './chart-4.vue'
import { trainingCampLearningPlanList } from '@/api/modules/study'
import { oneDayTime, YM, YMD } from '@/utils/czr-util'
import { useAppStore, useDictionaryStore } from '@/stores'
import { useRoute } from 'vue-router'

const route = useRoute()
const AppStore = useAppStore()
const DictionaryStore = useDictionaryStore()
const state: any = reactive({
  makeQuestion: {
    loading: false,
    data: [],
    date: [YMD(new Date().getTime() - oneDayTime * 7), YMD(new Date())],
  },
  training: {
    loading: false,
    data: [],
    groupData: [],
    date: [YMD(new Date().getTime() - oneDayTime * 90), YMD(new Date())],
  },
  statistic: {
    type: 1,
    line: {
      loading: false,
      data: [],
    },
  },
})
const ref_dateMakeQuestion = ref()
const dateStrMakeQuestion = computed(() => {
  if (state.makeQuestion.date.length > 0) {
    return `${state.makeQuestion.date[0]} - ${state.makeQuestion.date[1]}`
  }
  return ''
})
const ref_dateTraining = ref()
const dateStrTraining = computed(() => {
  if (state.training.date.length > 0) {
    return `${state.training.date[0]} - ${state.training.date[1]}`
  }
  return ''
})
const initMakeQuestion = () => {
  state.makeQuestion.loading = true
  trainingCampLearningPlanList({
    pageNum: 1,
    pageSize: 10000,
    studentId: AppStore.studentInfo?.studentId,
    subject: route.meta.subjectId,
    paperType: 1,
    params: {
      beginPlanDate: `${state.makeQuestion.date[0]} 00:00:00`,
      endPlanDate: `${state.makeQuestion.date[1]} 23:59:59`,
    },
  })
    .then(({ rows }: any) => {
      state.makeQuestion.data = rows
    })
    .finally(() => {
      state.makeQuestion.loading = false
    })
}
const initTraining = () => {
  state.training.loading = true
  state.training.data = []
  trainingCampLearningPlanList({
    pageNum: 1,
    pageSize: 10000,
    studentId: AppStore.studentInfo?.studentId,
    subject: route.meta.subjectId,
    paperType: 2,
    params: {
      beginPlanDate: `${state.training.date[0]} 00:00:00`,
      endPlanDate: `${state.training.date[1]} 23:59:59`,
    },
  })
    .then(({ rows }: any) => {
      state.training.data = rows
      // 按照年月分组
      state.training.groupData = rows.reduce((acc, item) => {
        // 提取年月部分（格式：YYYY-MM）
        const datePart = item.planDate.slice(0, 7)
        // 查找是否已有该年月分组
        const group = acc.find((g) => g.date === datePart)
        if (group) {
          // 如果已有该分组，添加到对应的list中
          group.list.push(item)
        } else {
          // 如果没有该分组，创建新分组
          acc.push({
            date: datePart,
            list: [item],
          })
        }
        return acc
      }, [])
    })
    .finally(() => {
      state.training.loading = false
    })
}
const initStatistic = () => {
  state.statistic.line.loading = true
  trainingCampLearningPlanList({
    pageNum: 1,
    pageSize: 10000,
    studentId: AppStore.studentInfo?.studentId,
    subject: route.meta.subjectId,
    paperType: 1,
    params: {
      beginPlanDate: `${YMD(new Date().getTime() - oneDayTime * 90)} 00:00:00`,
      endPlanDate: `${YMD(new Date())} 23:59:59`,
    },
  })
    .then(({ rows }: any) => {
      state.statistic.line.data = rows
    })
    .finally(() => {
      state.statistic.line.loading = false
    })
}
onMounted(() => {
  initMakeQuestion()
  initTraining()
  initStatistic()
})
onBeforeMount(() => {
  // document.documentElement.style.setProperty(
  //   '--czr-quasar-color',
  //   'var(--czr-main-color)',
  // )
})
</script>

<style lang="scss" scoped>
.subject-questions-btn {
  transition: all 0.2s ease;
}

.stat-card {
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.exam-item {
  transition: all 0.2s ease;
  position: relative;
}

.exam-item:hover {
  background-color: rgba(67, 97, 238, 0.05);
}

.mistake-tag {
  cursor: pointer;
  transition: all 0.2s ease;
}

.mistake-tag:hover {
  background-color: rgba(239, 68, 68, 0.2);
  transform: scale(1.05);
}

.progress-ring {
  transform: rotate(-90deg);
  width: 40px;
  height: 40px;
}

.progress-ring-circle {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.5s ease;
}
/* 时间轴样式 */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #e5e7eb;
}

.timeline-date-group {
  margin-bottom: 1.5rem;
}

.timeline-date {
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.timeline-date::before {
  content: '';
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: white;
  border: 2px solid #4361ee;
  margin-right: 0.5rem;
  z-index: 10;
  position: relative;
}
:deep(.training-date) {
  .q-placeholder {
    color: #ffffff;
  }
}
</style>