From 4e77cfeed21a06f4ae6921b4270c1dac7586591d Mon Sep 17 00:00:00 2001
From: ltx <1006158920@qq.com>
Date: Sat, 10 Oct 2026 10:06:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8E=A5=E5=85=A5AI=E9=98=B3=E5=85=89?=
 =?UTF-8?q?=E8=B7=91=E9=A1=B5=E9=9D=A2=E4=B8=8E=E5=B9=B4=E7=BA=A7=E7=8F=AD?=
 =?UTF-8?q?=E7=BA=A7=E7=BA=A7=E8=81=94=E7=AD=9B=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增阳光跑路由和列表页面，按学生姓名、年级班级及日期查询记录并支持分页。

查询与 Excel 导出共用所选年级、班级 ID，保留学校后台的页面风格。
---
 src/api/sunshineRun.js                     |  24 ++
 src/router/index.js                        |   8 +
 src/views/index.vue                        |   1 +
 src/views/motionData/sunshineRun/index.vue | 284 +++++++++++++++++++++
 4 files changed, 317 insertions(+)
 create mode 100644 src/api/sunshineRun.js
 create mode 100644 src/views/motionData/sunshineRun/index.vue

diff --git a/src/api/sunshineRun.js b/src/api/sunshineRun.js
new file mode 100644
index 0000000..591ed16
--- /dev/null
+++ b/src/api/sunshineRun.js
@@ -0,0 +1,24 @@
+import axios from 'axios'
+import http from './http'
+import store from '@/store/index'
+
+function queryString(params) {
+    const query = new URLSearchParams()
+    Object.entries(params).forEach(([key, value]) => {
+        if (value !== null && value !== undefined && value !== '') {
+            query.append(key, value)
+        }
+    })
+    return query.toString()
+}
+
+export function getSunshineRunPage(params) {
+    return http.get(`/api/SunshineRun/GetPageList?${queryString(params)}`)
+}
+
+export function exportSunshineRun(params) {
+    return axios.get(`/api/SunshineRun/Export?${queryString(params)}`, {
+        responseType: 'blob',
+        headers: { Authorization: store.getters.getToken() }
+    })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 1e4e8f5..c8505bb 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -428,6 +428,14 @@ const routes = [{
         keepAlive: false
       }
     },
+    {
+      path: '/sunshineRun',
+      name: 'sunshineRun',
+      component: () => import('@/views/motionData/sunshineRun/index.vue'),
+      meta: {
+        keepAlive: false
+      }
+    },
     {
       path: '/trainingDetail', //运动数据/训练数据/详情
       name: 'trainingDetail',
diff --git a/src/views/index.vue b/src/views/index.vue
index 7bc2500..074d6e6 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -810,6 +810,7 @@ export default defineComponent({
             '/userActivity': 'el-icon-s-marketing',
             '/physicalTestData': 'el-icon-s-data',
             '/trainingData': 'el-icon-s-data',
+            '/sunshineRun': 'el-icon-s-data',
             '/visionData': 'el-icon-s-check',
             '/specialManagement': 'el-icon-s-management',
             '/ropeJumping': 'el-icon-s-cooperation',
diff --git a/src/views/motionData/sunshineRun/index.vue b/src/views/motionData/sunshineRun/index.vue
new file mode 100644
index 0000000..58eff85
--- /dev/null
+++ b/src/views/motionData/sunshineRun/index.vue
@@ -0,0 +1,284 @@
+<template>
+    <div class="sunshine-run">
+        <commonManage>
+            <div class="head">
+                <div class="left">
+                    <p class="desctipt">姓名:</p>
+                    <el-input v-model.trim="filters.studentName" class="m-2" clearable
+                        placeholder="请输入姓名" @keyup.enter="search" />
+                </div>
+                <div class="left">
+                    <p class="desctipt">班级:</p>
+                    <el-cascader v-model="filters.gradeClass" class="grade-class-cascader"
+                        :options="gradeClassOptions" :props="cascaderProps" clearable filterable
+                        placeholder="请选择年级/班级" />
+                </div>
+                <div class="left">
+                    <p class="desctipt">起始日期:</p>
+                    <el-date-picker v-model="dateRange" class="date-range" type="daterange"
+                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" range-separator="至"
+                        start-placeholder="开始日期" end-placeholder="结束日期" clearable />
+                </div>
+                <div class="right">
+                    <el-button class="Search" :icon="Search" @click="search">查询</el-button>
+                    <el-button class="Audit" :icon="Refresh" @click="reset">重置</el-button>
+                    <el-button class="Export" :icon="Download" :loading="exporting" @click="exportData">导出</el-button>
+                </div>
+            </div>
+            <div class="cont">
+                <el-table v-loading="loading" :data="records" class="record-table"
+                    :header-cell-style="headerCellStyle" :cell-style="cellStyle"
+                    :row-style="{ height: '0px' }">
+                    <el-table-column fixed prop="index" label="序号" width="60" />
+                    <el-table-column prop="studentName" label="姓名" min-width="115" />
+                    <el-table-column prop="sexName" label="性别" width="75" />
+                    <el-table-column prop="className" label="班级" min-width="150" />
+                    <el-table-column prop="effectiveDistance" label="有效里程" min-width="110" />
+                    <el-table-column prop="effectiveTime" label="有效用时" min-width="110" />
+                    <el-table-column prop="totalDistance" label="总里程" min-width="105" />
+                    <el-table-column prop="totalTime" label="总用时" min-width="105" />
+                    <el-table-column prop="startTime" label="开始时间" min-width="160" />
+                    <el-table-column prop="endTime" label="结束时间" min-width="160" />
+                    <template #empty>
+                        <el-empty description="暂无阳光跑数据" />
+                    </template>
+                </el-table>
+                <el-pagination
+                    class="pagination"
+                    v-model:current-page="pageIndex"
+                    v-model:page-size="pageSize"
+                    :page-sizes="[10, 50, 100, 200]"
+                    layout="total, sizes, prev, pager, next, jumper"
+                    :total="total"
+                    @size-change="changePageSize"
+                    @current-change="loadRecords"
+                />
+            </div>
+        </commonManage>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import { Download, Refresh, Search } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import commonManage from '@/components/commonManage/index.vue'
+import { GetGradeNames } from '@/api/grade'
+import { exportSunshineRun, getSunshineRunPage } from '@/api/sunshineRun'
+
+const filters = reactive({ studentName: '', gradeClass: [] })
+const gradeClassOptions = ref([])
+const cascaderProps = { checkStrictly: true }
+const dateRange = ref([])
+const appliedFilters = reactive({ studentName: '', gradeId: '', classId: '', startDate: '', endDate: '' })
+const records = ref([])
+const loading = ref(false)
+const exporting = ref(false)
+const pageIndex = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+const headerCellStyle = {
+    textAlign: 'center',
+    fontSize: '12px',
+    color: '#3F404A',
+    padding: '3px',
+    background: '#F8F8FA',
+    height: '50px'
+}
+const cellStyle = {
+    textAlign: 'center',
+    fontSize: '12px',
+    color: '#3F404A',
+    padding: '3px'
+}
+
+async function loadRecords() {
+    loading.value = true
+    try {
+        const response = await getSunshineRunPage({
+            ...appliedFilters,
+            pageIndex: pageIndex.value,
+            pageSize: pageSize.value
+        })
+        if (response.code !== 200) throw new Error(response.message || '阳光跑数据加载失败')
+        records.value = response.data?.datas || []
+        total.value = response.data?.total || 0
+    } catch (error) {
+        ElMessage.error(error?.message || '阳光跑数据加载失败')
+    } finally {
+        loading.value = false
+    }
+}
+
+function getFilterParams() {
+    return {
+        studentName: filters.studentName,
+        gradeId: filters.gradeClass?.[0] || '',
+        classId: filters.gradeClass?.[1] || '',
+        startDate: dateRange.value?.[0] || '',
+        endDate: dateRange.value?.[1] || ''
+    }
+}
+
+async function loadGradeClassOptions() {
+    try {
+        const response = await GetGradeNames()
+        if (response.code !== 200) throw new Error(response.message || '年级班级加载失败')
+        gradeClassOptions.value = (response.data || []).map(grade => ({
+            value: grade.id,
+            label: grade.gradeName,
+            children: (grade.class || []).map(classroom => ({
+                value: classroom.id,
+                label: classroom.className
+            }))
+        }))
+    } catch (error) {
+        ElMessage.error(error?.message || '年级班级加载失败')
+    }
+}
+
+function search() {
+    Object.assign(appliedFilters, getFilterParams())
+    pageIndex.value = 1
+    loadRecords()
+}
+
+function reset() {
+    Object.assign(filters, { studentName: '', gradeClass: [] })
+    dateRange.value = []
+    pageSize.value = 10
+    search()
+}
+
+function changePageSize() {
+    pageIndex.value = 1
+    loadRecords()
+}
+
+async function exportData() {
+    exporting.value = true
+    try {
+        const response = await exportSunshineRun(getFilterParams())
+        const blob = response.data
+        if (!blob || blob.type?.includes('json')) throw new Error('导出失败')
+        const url = URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = url
+        link.download = `AI阳光跑${new Date().toISOString().slice(0, 10)}.xlsx`
+        document.body.appendChild(link)
+        link.click()
+        link.remove()
+        setTimeout(() => URL.revokeObjectURL(url), 1000)
+    } catch (error) {
+        ElMessage.error(error?.message || '导出失败')
+    } finally {
+        exporting.value = false
+    }
+}
+
+onMounted(() => {
+    loadGradeClassOptions()
+    loadRecords()
+})
+</script>
+
+<style lang="less" scoped>
+.sunshine-run {
+    padding: 16px;
+
+    .head {
+        width: 100%;
+        min-height: 72px;
+        display: flex;
+        align-items: center;
+
+        .left {
+            width: auto;
+            height: 100%;
+            display: flex;
+            align-items: center;
+
+            .desctipt {
+                width: auto;
+                font-size: 16px;
+                font-family: PingFangSC;
+                font-weight: 500;
+                color: #3f404a;
+                margin-left: 20px;
+                white-space: nowrap;
+            }
+
+            .m-2 {
+                width: 200px;
+                margin-left: 8px;
+            }
+
+            .grade-class-cascader {
+                width: 220px;
+                margin-left: 8px;
+            }
+
+            .date-range {
+                width: 330px !important;
+                margin-left: 8px;
+            }
+        }
+
+        .right {
+            width: auto;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            margin-left: auto;
+            gap: 10px;
+            padding-right: 20px;
+        }
+    }
+
+    .cont {
+        width: 100%;
+        min-height: calc(100vh - 200px);
+        display: flex;
+        flex-direction: column;
+
+        .record-table {
+            width: calc(100% - 40px);
+            height: calc(100vh - 270px);
+            min-height: 360px;
+            margin: 0 20px;
+        }
+
+        .pagination {
+            display: flex;
+            justify-content: flex-end;
+            margin: 20px;
+        }
+    }
+}
+
+@media (max-width: 760px) {
+    .sunshine-run {
+        padding: 12px;
+
+        .head .left {
+            width: 100%;
+            .desctipt { margin-left: 0; }
+            .m-2 { flex: 1; margin-left: 8px; }
+            .grade-class-cascader { flex: 1; width: auto; min-width: 0; margin-left: 8px; }
+            .date-range { width: auto !important; flex: 1; min-width: 0; }
+        }
+
+        .head .right {
+            width: 100%;
+            padding-right: 0;
+            justify-content: flex-start;
+        }
+
+        .cont .pagination {
+            overflow-x: auto;
+            justify-content: flex-start;
+        }
+    }
+}
+</style>