sai/swimmingUni
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面修改

Browse Source
This commit is contained in:
Ls
2026-03-28 08:55:48 +08:00
parent deaf39e943
commit b8c05d23ae
48 changed files with 9948 additions and 639 deletions
Download Patch File Download Diff File Expand all files Collapse all files

470
src/pages/dataAnalyze/timingAnalze.vue Normal file
View File

@@ -0,0 +1,470 @@
<template>
<view class="timing-container">
<!-- 页面标题区域 -->
<view class="header-section">
<view class="header-title">
<text class="title">计时数据</text>
<text class="subtitle">计时项目训练记录统计</text>
</view>
</view>
<!-- 日历组件 -->
<view class="calendar-wrapper">
<uni-calendar
:insert="true"
:lunar="false"
:show-month="true"
:selected="selectedDates"
@monthSwitch="handleMonthSwitch"
@change="handleDateChange">
</uni-calendar>
</view>
<!-- 选中日期数据统计 -->
<!-- 仅在选择了日期时显示统计信息 -->
<view class="date-summary" v-if="selectedDate">
<view class="summary-item">
<text class="summary-label">选中日期</text>
<text class="summary-value">{{ selectedDate }}</text>
</view>
<view class="summary-divider"></view>
<view class="summary-item">
<text class="summary-label">训练人数</text>
<text class="summary-value">{{ tableData.length }}人</text>
</view>
<view class="summary-divider"></view>
<view class="summary-item">
<text class="summary-label">平均速度</text>
<text class="summary-value">{{ averageSpeed }}m/s</text>
</view>
</view>
<!-- 数据表格 -->
<!-- 仅在选择了日期时显示表格 -->
<view class="table-section" v-if="selectedDate">
<sl-table
:columns="columns"
:tableData="tableData"
@cell-click="handleCellClick">
<!-- 空数据插槽 -->
<template #empty>
<view class="empty-container">
<view class="empty-icon">
<u-icon name="file-text" size="80" color="#ccc"></u-icon>
</view>
<text class="empty-text">该日期暂无训练数据</text>
</view>
</template>
</sl-table>
</view>
<!-- 未选择日期提示 -->
<!-- 未选择日期时显示提示信息 -->
<view class="hint-state" v-if="!selectedDate">
<view class="hint-icon">
<u-icon name="calendar" size="80" color="#1890ff"></u-icon>
</view>
<text class="hint-text">请选择日期查看数据</text>
</view>
</view>
</template>
<script setup lang="ts">
import { onShow, onLoad } from "@dcloudio/uni-app"
import { Service } from '@/Service/Service'
import { ref, computed } from 'vue'
// ==================== 响应式数据定义 ====================
// 当前年份，用于月份切换时记录当前年份
const currentYear = ref(new Date().getFullYear())
// 当前月份（1-12），用于月份切换时记录当前月份
const currentMonth = ref(new Date().getMonth() + 1)
// 当前选中的日期，格式为 'YYYY-MM-DD'
// 空字符串表示未选择日期
const selectedDate = ref('')
// ==================== 表格配置 ====================
// 表格列定义
// label: 列标题
// prop: 数据项中对应的字段名
// width: 列宽度
const columns = ref([
{
label: '姓名',
prop: 'name',
width: '100px'
},
{
label: '项目名称',
prop: 'projectName',
width: '150px'
},
{
label: '最大速度',
prop: 'maxSpeed',
width: '120px'
},
{
label: '计时数据',
prop: 'timingData',
width: '150px'
}
])
// ==================== TypeScript 接口定义 ====================
// 表格数据项接口定义
// 描述一条计时记录的数据结构
interface TableDataItem {
name: string // 学员姓名
projectName: string // 项目名称（如：100米自由泳）
maxSpeed: number // 最大速度，单位：m/s
timingData: string // 计时数据（如：1.23, 1.25, 1.24）
}
// ==================== 响应式数据 - 表格数据 ====================
// 表格数据列表
// 存储当前选中日期的所有计时记录
// 初始状态为空数组，等待用户选择日期后加载数据
const tableData = ref<TableDataItem[]>([])
// ==================== 响应式数据 - 日历标记 ====================
// 日历打点数据
// 用于在日历上标记有训练记录的日期
// date: 日期字符串，格式为 'YYYY-MM-DD'
// info: 显示在日期上的标记信息
const selectedDates = ref([
{ date: '2026-03-12', info: '训练' },
{ date: '2026-03-14', info: '训练' },
{ date: '2026-03-16', info: '训练' },
{ date: '2026-03-19', info: '训练' },
{ date: '2026-03-24', info: '训练' }
])
// ==================== 计算属性 ====================
// 平均速度计算属性
// 计算当前选中日期所有学员的平均最大速度
// 如果没有数据则返回 0
const averageSpeed = computed(() => {
// 如果没有数据，返回 0
if (tableData.value.length === 0) return 0
// 计算所有学员最大速度的总和
const total = tableData.value.reduce((sum, item) => sum + item.maxSpeed, 0)
// 计算平均值，保留两位小数
return (total / tableData.value.length).toFixed(2)
})
// ======================= 模拟数据 ====================
// 模拟的训练数据
// 键为日期字符串，值为该日期的计时记录列表
// 在实际项目中，这里应该从后端 API 获取数据
const mockData: Record<string, TableDataItem[]> = {
'2026-03-12': [
{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.15, timingData: '25.35s, 25.42s, 25.28s' },
{ name: '李小红', projectName: '50米自由泳', maxSpeed: 1.98, timingData: '27.15s, 27.32s, 27.08s' },
{ name: '王小明', projectName: '50米自由泳', maxSpeed: 2.22, timingData: '24.68s, 24.75s, 24.62s' }
],
'2026-03-14': [
{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.18, timingData: '25.12s, 25.18s, 25.08s' },
{ name: '李小红', projectName: '50米自由泳', maxSpeed: 2.02, timingData: '26.85s, 26.92s, 26.78s' },
{ name: '赵小芳', projectName: '50米自由泳', maxSpeed: 1.92, timingData: '27.95s, 28.12s, 27.88s' },
{ name: '王小明', projectName: '50米自由泳', maxSpeed: 2.25, timingData: '24.52s, 24.58s, 24.48s' }
],
'2026-03-16': [
{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.12, timingData: '25.55s, 25.62s, 25.48s' },
{ name: '李小红', projectName: '50米自由泳', maxSpeed: 2.05, timingData: '26.72s, 26.85s, 26.68s' }
],
'2026-03-19': [
{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.20, timingData: '24.98s, 25.05s, 24.92s' },
{ name: '李小红', projectName: '50米自由泳', maxSpeed: 2.08, timingData: '26.45s, 26.52s, 26.38s' },
{ name: '赵小芳', projectName: '50米自由泳', maxSpeed: 1.95, timingData: '27.75s, 27.88s, 27.65s' },
{ name: '王小明', projectName: '50米自由泳', maxSpeed: 2.28, timingData: '24.35s, 24.42s, 24.28s' },
{ name: '陈小刚', projectName: '50米自由泳', maxSpeed: 1.88, timingData: '28.25s, 28.38s, 28.15s' }
],
'2026-03-24': [
{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.15, timingData: '25.30s, 25.38s, 25.25s' },
{ name: '李小红', projectName: '50米自由泳', maxSpeed: 2.10, timingData: '26.25s, 26.32s, 26.18s' },
{ name: '赵小芳', projectName: '50米自由泳', maxSpeed: 1.98, timingData: '27.65s, 27.78s, 27.55s' }
]
}
// ==================== 生命周期钩子 ====================
// 页面加载时触发
// 在页面初始化时执行，只执行一次
onLoad(() => {
// 加载当前月份的数据
loadData()
})
// 页面显示时触发
// 每次页面从后台切换到前台时执行
// 可用于刷新页面显示的数据
onShow(() => {
// TODO: 如果需要在页面显示时刷新数据，可以在这里添加逻辑
// 例如：调用接口获取最新数据
})
// ==================== 业务逻辑方法 ====================
/**
* 加载数据
* 调用后端 API 获取数据
* 当前为模拟数据，实际开发中应替换为真实 API 调用
*/
const loadData = () => {
// TODO: 调用后端 API 获取数据
// 示例代码：
// Service.Request('/api/timing/data', 'GET', {
// year: currentYear.value,
// month: currentMonth.value
// }).then(res => {
// // 处理返回的数据
// })
}
/**
* 处理表格单元格点击事件
* @param event 点击事件对象，包含行索引、列索引、单元格数据等信息
*/
const handleCellClick = (event: any) => {
// 在控制台输出点击事件信息，用于调试
console.log('表格单元格点击事件:', event)
// TODO: 根据业务需求处理单元格点击
// 例如：点击某行可以查看详细信息，点击某列可以进行排序等
}
/**
* 处理日历月份切换事件
* 当用户切换日历的月份时触发
* @param e 切换事件对象，包含 year 和 month 属性
*/
const handleMonthSwitch = (e: any) => {
// 更新当前年份
currentYear.value = e.year
// 更新当前月份
currentMonth.value = e.month
// 重新加载数据
// 获取切换后月份的训练记录和日历标记
loadData()
// 清空选中的日期
// 因为切换了月份，之前选择的日期可能不再显示
selectedDate.value = ''
// 清空表格数据
tableData.value = []
}
/**
* 处理日历日期选择事件
* 当用户点击日历上的某个日期时触发
* @param e 选择事件对象，fulldate 属性包含完整的日期字符串
*/
const handleDateChange = (e: any) => {
// 获取选择的完整日期，格式为 'YYYY-MM-DD'
const date = e.fulldate
// 更新选中的日期
selectedDate.value = date
// 根据选择的日期加载对应的训练数据
// 检查模拟数据中是否存在该日期的数据
if (mockData[date]) {
// 如果存在，加载数据
tableData.value = mockData[date]
} else {
// 如果不存在，清空数据（表格将显示空状态）
tableData.value = []
}
// TODO: 实际项目中应该调用 API 获取该日期的计时数据
// 示例代码：
// Service.Request('/api/timing/detail', 'GET', {
// date: date
// }).then(res => {
// // 处理返回的数据并更新表格
// tableData.value = res.data
// })
}
</script>
<style lang="scss" scoped>
// 页面背景色设置
page {
background-color: #f5f5f5;
}
// 页面容器
.timing-container {
min-height: 100vh;
padding-bottom: 40rpx;
}
/* ==================== 页面标题区域 ==================== */
.header-section {
background-color: #fff;
padding: 32rpx 28rpx 24rpx;
margin-bottom: 20rpx;
.header-title {
.title {
font-size: 36rpx;
font-weight: 700;
color: #333;
display: block;
margin-bottom: 8rpx;
}
.subtitle {
font-size: 24rpx;
color: #999;
}
}
}
/* ==================== 日历组件包装 ==================== */
.calendar-wrapper {
background-color: #fff;
margin-bottom: 20rpx;
padding: 20rpx 0;
}
/* ==================== 日期数据统计卡片 ==================== */
.date-summary {
background-color: #fff;
margin: 0 20rpx 20rpx;
border-radius: 16rpx;
padding: 24rpx;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
// 统计项
.summary-item {
text-align: center;
// 标签文字
.summary-label {
font-size: 24rpx;
color: #999;
display: block;
margin-bottom: 8rpx;
}
// 数值文字
.summary-value {
font-size: 32rpx;
font-weight: 700;
color: #1890ff;
}
}
// 分隔线
.summary-divider {
width: 1rpx;
height: 50rpx;
background-color: #eee;
}
}
/* ==================== 表格区域 ==================== */
.table-section {
margin: 0 20rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
/* ==================== 空状态容器 ==================== */
.empty-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80rpx 40rpx;
// 空状态图标
.empty-icon {
margin-bottom: 24rpx;
}
// 空状态文字
.empty-text {
font-size: 28rpx;
color: #999;
}
}
/* ==================== 提示状态容器 ==================== */
// 用于在用户未选择日期时显示提示
.hint-state {
margin: 0 20rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 80rpx 40rpx;
text-align: center;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
// 提示图标
.hint-icon {
margin-bottom: 24rpx;
}
// 提示文字
.hint-text {
font-size: 28rpx;
color: #999;
}
}
/* ==================== sl-table 样式覆盖 ==================== */
// 表格容器
::v-deep .sl-table {
width: 100%;
}
// 表头背景色 - 使用蓝色渐变（计时功能的主色调）
::v-deep .sl-table__header {
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%) !important;
}
// 表头单元格样式
::v-deep .sl-table__header__cell {
color: #fff !important;
font-weight: 700;
font-size: 28rpx;
}
// 表格单元格样式
::v-deep .sl-table__body__cell {
font-size: 26rpx;
color: #333;
padding: 24rpx 16rpx;
}
// 偶数行背景色
::v-deep .sl-table__body__row:nth-child(even) {
background-color: #fafafa !important;
}
// 奇数行背景色
::v-deep .sl-table__body__row:nth-child(odd) {
background-color: #fff !important;
}
</style>