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

360
src/pages/dataAnalyze/baoganAnalyze.vue Normal file
View File

@@ -0,0 +1,360 @@
<template>
<view class="baogan-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">{{ averageCompletion }}%</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="#faad14"></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())
const currentMonth = ref(new Date().getMonth() + 1)
// 选中的日期
const selectedDate = ref('')
// 表格列定义
const columns = ref([
{
label: '姓名',
prop: 'name',
width: '100px'
},
{
label: '项目名称',
prop: 'projectName',
width: '120px'
},
{
label: '包干计划',
prop: 'plan',
width: '100px'
},
{
label: '完成比例',
prop: 'completion',
width: '100px'
},
{
label: '详细数据',
prop: 'detail',
width: '120px'
}
])
// 表格数据
interface TableDataItem {
name: string
projectName: string
plan: string
completion: number
detail: string
}
const tableData = ref<TableDataItem[]>([{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 95, detail: '1900/2000' },
{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 88, detail: '1760/2000' },
{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 100, detail: '1500/1500' }])
// 日历打点数据
const selectedDates = ref([
{ date: '2026-03-15', info: '训练' },
{ date: '2026-03-18', info: '训练' },
{ date: '2026-03-20', info: '训练' },
{ date: '2026-03-22', info: '训练' },
{ date: '2026-03-25', info: '训练' }
])
// 平均完成率
const averageCompletion = computed(() => {
if (tableData.value.length === 0) return 0
const total = tableData.value.reduce((sum, item) => sum + item.completion, 0)
return Math.round(total / tableData.value.length)
})
// 模拟数据
const mockData: Record<string, TableDataItem[]> = {
'2026-03-15': [
{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 95, detail: '1900/2000' },
{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 88, detail: '1760/2000' },
{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 100, detail: '1500/1500' }
],
'2026-03-18': [
{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 90, detail: '1800/2000' },
{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 92, detail: '1840/2000' },
{ name: '赵小芳', projectName: '100米自由泳', plan: '1800米', completion: 85, detail: '1530/1800' },
{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 95, detail: '1425/1500' }
],
'2026-03-20': [
{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 87, detail: '1740/2000' },
{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 90, detail: '1800/2000' }
],
'2026-03-22': [
{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 92, detail: '1840/2000' },
{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 88, detail: '1760/2000' },
{ name: '赵小芳', projectName: '100米自由泳', plan: '1800米', completion: 90, detail: '1620/1800' },
{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 98, detail: '1470/1500' },
{ name: '陈小刚', projectName: '100米自由泳', plan: '2000米', completion: 75, detail: '1500/2000' }
],
'2026-03-25': [
{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 85, detail: '1700/2000' },
{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 95, detail: '1900/2000' },
{ name: '赵小芳', projectName: '100米自由泳', plan: '1800米', completion: 88, detail: '1584/1800' }
]
}
onLoad(() => {
loadData()
})
onShow(() => {
// 页面显示时刷新数据
})
// 加载数据
const loadData = () => {
// TODO: 调用API获取数据
}
// 月份单元格点击处理
const handleCellClick = (event: any) => {
console.log('单元格点击事件:', event)
}
// 月份切换处理
const handleMonthSwitch = (e: any) => {
currentYear.value = e.year
currentMonth.value = e.month
loadData()
// 切换月份后清空选中日期
selectedDate.value = ''
tableData.value = []
}
// 日期选择处理
const handleDateChange = (e: any) => {
// 点击日期后的处理
const date = e.fulldate
selectedDate.value = date
// 加载该日期的数据
if (mockData[date]) {
tableData.value = mockData[date]
} else {
tableData.value = []
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #f5f5f5;
}
.baogan-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: #faad14;
}
}
.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, #faad14 0%, #ffc53d 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>