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-04-16 08:38:54 +08:00
parent c9aeba0949
commit 7dba9711a9
29 changed files with 5832 additions and 2447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

576
src/pages/dataAnalyze/paragraphAnalyze.vue
View File

@@ -7,53 +7,62 @@
</view>
</view>
<!-- 项目选择区域 -->
<view class="select-section">
<view class="select-label">
<text class="label-text">选择项目</text>
</view>
<picker mode="selector" :range="projectOptions" range-key="name" :value="selectedProjectIndex"
@change="handleProjectChange">
<view class="picker-wrapper">
<text class="picker-text">{{ selectedProjectName }}</text>
<view class="label-text" style="margin-bottom: 20rpx;">选择项目</view>
<view class="picker-wrapper" @click="showProject=true">
<text class="picker-text">{{ selectProcet || '请选择项目' }}</text>
<u-icon name="arrow-down" size="18" color="#999"></u-icon>
</view>
</picker>
</view>
</view>
<up-picker v-model:show="showProject" keyName="name" valueName="planId" @confirm="selectProcetFunc"
:columns="projectOptions"></up-picker>
<!-- 日期选择 -->
<view class="date-filter" style="margin: 20rpx 20rpx 0;" v-if="selectProcet">
<view class="date-picker" @click="openCalendar()">
<up-icon name="calendar" color="#3B82F6" size="25"></up-icon>
<view class="date-text">
<text class="label">开始日期</text>
<text class="value">{{ begin || '请选择' }}</text>
</view>
</view>
<view class="date-picker" @click="openCalendar()">
<up-icon name="calendar" color="#3B82F6" size="25"></up-icon>
<view class="date-text">
<text class="label">结束日期</text>
<text class="value">{{ end || '请选择' }}</text>
</view>
</view>
</view>
<view class="calendar-wrapper" v-if="selectedProjectId">
<uni-calendar
:insert="true"
:lunar="false"
:show-month="true"
:selected="selectedDates"
@monthSwitch="handleMonthSwitch"
@change="handleDateChange">
</uni-calendar>
</view>
<view class="select-section" v-if="selectedProjectId && selectedDate">
<!-- 学生选择区域 -->
<view class="select-section" v-if="selectProcet && begin ">
<view class="select-label">
<text class="label-text">选择学生</text>
</view>
<view class="picker-wrapper" @click="showStudentSelect = true">
<text class="picker-text">{{ selectedStudentDisplay }}</text>
<view class="picker-wrapper" @click="showStudentPicker = true">
<text class="picker-text">{{ selectedStudentDisplay }}</text>
<u-icon name="arrow-down" size="18" color="#999"></u-icon>
</view>
</view>
<view class="modal-overlay" v-if="showStudentSelect" @click="closeStudentSelect"></view>
<view class="student-picker-modal" v-if="showStudentSelect">
<!-- 学生多选选择器 -->
<view class="modal-overlay" v-if="showStudentPicker" @click="closeStudentPicker"></view>
<view class="student-picker-modal" v-if="showStudentPicker">
<view class="picker-header">
<text class="header-title">选择学生</text>
<view class="header-actions">
<text class="action-btn" @click="selectAllStudents">全选</text>
<text class="action-btn primary" @click="confirmStudentSelect">确定</text>
<text class="action-btn primary" @click="confirmStudentSelection">确定</text>
</view>
</view>
<scroll-view class="student-list" scroll-y>
<view v-for="(student, index) in studentList" :key="student.id" class="student-item"
<view v-for="(student, index) in studentList" :key="student.studentId" class="student-item"
:class="{ 'selected': selectedStudentIndexes.includes(index) }"
@click="toggleStudentSelect(index)">
@click="toggleStudentSelection(index)">
<view class="item-checkbox">
<view class="checkbox-inner" :class="{ 'checked': selectedStudentIndexes.includes(index) }">
<u-icon v-if="selectedStudentIndexes.includes(index)" name="checkmark" size="14"
@@ -61,58 +70,62 @@
</view>
</view>
<view class="item-avatar">
<view class="avatar-circle"
:class="{ 'male': student.gender === '男', 'female': student.gender === '女' }">
<view class="avatar-circle male">
<text class="avatar-text">{{ student.name.charAt(0) }}</text>
</view>
</view>
<view class="item-info">
<text class="item-name">{{ student.name }}</text>
<view class="item-meta">
<text class="gender-badge"
:class="{ 'male': student.gender === '男', 'female': student.gender === '女' }">
{{ student.gender }}
</text>
<text class="age-text">{{ student.age }}岁</text>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="table-section" v-if="selectedDate && selectedStudentIndexes.length > 0 && tableData.length > 0">
<view class="table-wrapper-scroll">
<view class="table-header">
<view class="header-row">
<view class="header-cell" style="width: 100px;">日期</view>
<view class="header-cell" style="width: 100px;">姓名</view>
<view class="header-cell" style="width: 120px;">项目</view>
<view class="header-cell" style="width: 100px;">20米</view>
<view class="header-cell" style="width: 100px;">70米</view>
<view class="header-cell" style="width: 100px;">120米</view>
<view class="header-cell" style="width: 100px;">170米</view>
</view>
</view>
<view class="table-body">
<view v-for="(row, rowIndex) in tableData" :key="rowIndex" class="body-row" :class="{ 'even': rowIndex % 2 === 0, 'odd': rowIndex % 2 === 1 }">
<view class="body-cell" style="width: 100px;">{{ row.date }}</view>
<view class="body-cell" style="width: 100px;">{{ row.name }}</view>
<view class="body-cell" style="width: 120px;">{{ row.projectName }}</view>
<view class="body-cell" style="width: 100px;">{{ row.segment20 }}</view>
<view class="body-cell" style="width: 100px;">{{ row.segment70 }}</view>
<view class="body-cell" style="width: 100px;">{{ row.segment120 }}</view>
<view class="body-cell" style="width: 100px;">{{ row.segment170 }}</view>
</view>
</view>
</view>
<view v-if="tableData.length>0" class="table-section">
<next-table :show-header="true" :columns="columns" :stripe="true" :fit="false" :show-summary='false'
:data="tableData" :showPaging='true' :pageIndex="page" @pageChange="pageChange" @cellClick="cellClick"
:pageTotal="pageTotal"></next-table>
</view>
<view class="empty-container" v-if="selectedDate && selectedStudentIndexes.length > 0 && tableData.length === 0">
<view class="empty-container" v-if="begin && selectedStudentIndexes.length > 0 && tableData.length === 0">
<view class="empty-icon">
<u-icon name="file-text" size="80" color="#ccc"></u-icon>
</view>
<text class="empty-text">该日期暂无分段数据</text>
</view>
<!-- 日历弹窗 -->
<up-calendar :show="showCalendar" mode="date" minDate='1776240407000' @confirm="calendarConfirm"
@close="calendarClose">
</up-calendar>
<!-- 分段详情弹窗 -->
<up-popup :show="showSegmentPopup" @close="closeSegmentPopup" @open="openSegmentPopup" mode="center" round="16" bgColor="#fff">
<view class="segment-popup-content">
<view class="popup-header">
<text class="popup-title">分段详情</text>
<u-icon name="close" size="22" color="#999" @click="closeSegmentPopup"></u-icon>
</view>
<view class="popup-table">
<view class="popup-table-header">
<text class="popup-th">分段数</text>
<text class="popup-th">距离</text>
<text class="popup-th">时间</text>
</view>
<scroll-view class="popup-scroll" scroll-y>
<view v-for="(item, index) in row.split('/')" :key="index" class="popup-table-row">
<text class="popup-td">{{ index+1 }}</text>
<text class="popup-td">{{ item.split('-')[0] }}</text>
<text class="popup-td">{{ item.split('-')[1] }}</text>
</view>
<view v-if="row.split('/').length === 0" class="popup-empty">
<text class="popup-empty-text">暂无分段数据</text>
</view>
</scroll-view>
</view>
</view>
</up-popup>
</view>
</template>
@@ -120,63 +133,43 @@
import { onShow, onLoad } from "@dcloudio/uni-app"
import { Service } from '@/Service/Service'
import { ref, computed } from 'vue'
interface Project {
id: string
name: string
}
import { PlanService } from '@/Service/swimming/PlanService'
interface Student {
id: string
name: string
gender: string
age: number
studentId : string
name : string
gender : string
age : number
}
interface TableDataItem {
date: string
name: string
projectName: string
segment20: string
segment70: string
segment120: string
segment170: string
date : string
name : string
projectName : string
segment20 : string
segment70 : string
segment120 : string
segment170 : string
}
let row=ref('')
// 项目选择
let showProject = ref(false)
let selectProcet = ref('')
let selectId = ref('')
const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth() + 1)
const selectedDate = ref('')
// 日期选择
const begin = ref<string>('')
const end = ref<string>('')
const showCalendar = ref(false)
const projectList = ref<Project[]>([
{ id: '1', name: '100米自由泳' },
{ id: '2', name: '200米自由泳' },
{ id: '3', name: '50米蛙泳' },
{ id: '4', name: '100米蝶泳' }
])
const projectOptions = ref(projectList.value)
const selectedProjectIndex = ref(-1)
const selectedProjectId = ref('')
const selectedProjectName = computed(() => {
if (selectedProjectIndex.value === -1) {
return '请选择项目'
}
return projectList.value[selectedProjectIndex.value]?.name || '请选择项目'
})
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: '分段' }
])
const projectOptions = ref<Array<any>>([[]])
const studentList = ref<Student[]>([])
const selectedStudentIndexes = ref<number[]>([])
const selectedStudentIds = ref<string[]>([])
const showStudentSelect = ref(false)
const showStudentPicker = ref(false)
const selectedStudentDisplay = computed(() => {
if (selectedStudentIndexes.value.length === 0) {
@@ -187,110 +180,98 @@
}
})
let page = ref(1)
let status = ref('loadmore')
let pageTotal = ref(10)
const columns = ref([
{
label: '训练日期',
name: 'addTime',
},
{
label: '姓名',
name: 'name',
},
{
label: '总时长',
name: 'time',
},
{
label: '详细数据',
name: 'subsection',
}
])
const tableData = ref<TableDataItem[]>([])
const mockData: Record<string, Record<string, any[]>> = {
'1': {
'2026-03-12': [
{ name: '王小明', projectName: '100米自由泳', segment20: 0.037, segment70: 0.128, segment120: 0.219, segment170: 0.311 },
{ name: '张小红', projectName: '100米自由泳', segment20: 0.042, segment70: 0.145, segment120: 0.248, segment170: 0.352 },
{ name: '李小龙', projectName: '100米自由泳', segment20: 0.032, segment70: 0.112, segment120: 0.192, segment170: 0.272 }
],
'2026-03-14': [
{ name: '王小明', projectName: '100米自由泳', segment20: 0.035, segment70: 0.122, segment120: 0.209, segment170: 0.296 },
{ name: '张小红', projectName: '100米自由泳', segment20: 0.040, segment70: 0.138, segment120: 0.236, segment170: 0.334 }
]
},
'2': {
'2026-03-16': [
{ name: '赵小芳', projectName: '200米自由泳', segment20: 0.038, segment70: 0.133, segment120: 0.228, segment170: 0.323 }
]
},
'3': {
'2026-03-19': [
{ name: '陈小刚', projectName: '50米蛙泳', segment20: 0.044, segment70: 0.154, segment120: 0.264, segment170: 0.374 }
]
},
'4': {
'2026-03-24': [
{ name: '周小丽', projectName: '100米蝶泳', segment20: 0.041, segment70: 0.143, segment120: 0.245, segment170: 0.347 }
]
}
}
const mockStudents: Record<string, Student[]> = {
'1': [
{ id: 's1', name: '王小明', gender: '男', age: 12 },
{ id: 's2', name: '张小红', gender: '女', age: 11 },
{ id: 's3', name: '李小龙', gender: '男', age: 13 }
],
'2': [
{ id: 's4', name: '赵小芳', gender: '女', age: 10 }
],
'3': [
{ id: 's5', name: '陈小刚', gender: '男', age: 14 }
],
'4': [
{ id: 's6', name: '周小丽', gender: '女', age: 12 }
]
}
onLoad(() => {
loadData()
getProjectData()
})
onShow(() => {
})
const loadData = () => {
const getProjectData = () => {
PlanService.GetPlanListNoPage('分段项目').then(res => {
if (res.code == 0) {
projectOptions.value[0] = res.data.list
} else {
Service.Msg(res.msg)
}
})
}
const handleProjectChange = (e: any) => {
const index = e.detail.value
selectedProjectIndex.value = index
const selectedProject = projectList.value[index]
if (selectedProject) {
selectedProjectId.value = selectedProject.id
selectedDate.value = ''
selectedStudentIndexes.value = []
selectedStudentIds.value = []
tableData.value = []
loadProjectStudents(selectedProject.id)
}
const selectProcetFunc = (e : any) => {
selectProcet.value = e.value[0].name
selectId.value = e.value[0].planId
begin.value = ''
end.value = ''
selectedStudentIndexes.value = []
selectedStudentIds.value = []
tableData.value = []
loadProjectStudents(selectId.value)
}
const handleMonthSwitch = (e: any) => {
currentYear.value = e.year
currentMonth.value = e.month
loadData()
selectedDate.value = ''
const openCalendar = () => {
showCalendar.value = true
}
const calendarConfirm = (e : any) => {
begin.value = e[0]
end.value = e[e.length - 1]
showCalendar.value = false
selectedStudentIndexes.value = []
selectedStudentIds.value = []
tableData.value = []
}
const handleDateChange = (e: any) => {
const date = e.fulldate
selectedDate.value = date
selectedStudentIndexes.value = []
selectedStudentIds.value = []
tableData.value = []
const calendarClose = () => {
showCalendar.value = false
}
const loadProjectStudents = (projectId: string) => {
const students = mockStudents[projectId] || []
studentList.value = students
console.log(`项目 ${projectId} 的学生列表加载完成，共 ${students.length} 位学生`)
const loadProjectStudents = (projectId : string) => {
PlanService.GetPlanInfo(projectId).then(res => {
if (res.code == 0) {
studentList.value = res.data.plan.users
} else {
Service.Msg(res.msg)
}
})
}
const selectAllStudents = () => {
selectedStudentIndexes.value = studentList.value.map((_, index) => index)
}
const toggleStudentSelect = (index: number) => {
const toggleStudentSelection = (index : number) => {
const idx = selectedStudentIndexes.value.indexOf(index)
if (idx > -1) {
selectedStudentIndexes.value.splice(idx, 1)
@@ -299,46 +280,71 @@
}
}
const confirmStudentSelect = () => {
selectedStudentIds.value = selectedStudentIndexes.value.map(index => studentList.value[index].id)
showStudentSelect.value = false
filterAndLoadData()
const confirmStudentSelection = () => {
selectedStudentIds.value = selectedStudentIndexes.value.map(index => studentList.value[index].studentId)
showStudentPicker.value = false
getRecord()
}
const closeStudentSelect = () => {
showStudentSelect.value = false
const closeStudentPicker = () => {
showStudentPicker.value = false
}
const filterAndLoadData = () => {
if (!selectedDate.value || selectedStudentIndexes.value.length === 0) {
tableData.value = []
return
const getRecord = () => {
page.value = 1
getRecordList()
}
const getRecordList = () => {
let studentIdList = selectedStudentIndexes.value.map(index => {
return studentList.value[index].studentId
})
let data = {
planId: selectId.value,
studentId: JSON.stringify(studentIdList),
sTime: begin.value,
eTime: end.value,
page: page.value
}
PlanService.GetFenduanLog(data).then(res => {
if (res.code == 0) {
pageTotal.value = res.data.pageTotal
tableData.value = res.data.list
} else {
Service.Msg(res.msg)
}
})
}
const projectData = mockData[selectedProjectId.value]
if (!projectData) {
tableData.value = []
return
}
const dateData = projectData[selectedDate.value]
if (!dateData) {
tableData.value = []
return
}
const selectedStudentNames = selectedStudentIndexes.value.map(index => studentList.value[index].name)
const filteredData = dateData.filter(item => selectedStudentNames.includes(item.name))
const pageChange = (e) => {
page.value = e
getRecordList()
}
const showSegmentPopup = ref(false)
tableData.value = filteredData.map(item => ({
date: selectedDate.value,
name: item.name,
projectName: item.projectName,
segment20: item.segment20.toFixed(3),
segment70: item.segment70.toFixed(3),
segment120: item.segment120.toFixed(3),
segment170: item.segment170.toFixed(3)
}))
interface SegmentItem {
index: number
distance: string
time: string
}
const segmentPopupData = ref<SegmentItem[]>([])
const openSegmentPopup = () => {
showSegmentPopup.value = true
}
const closeSegmentPopup = () => {
showSegmentPopup.value = false
}
const cellClick = (rows: any) => {
row.value=rows.subsection
openSegmentPopup()
}
</script>
@@ -352,7 +358,7 @@
padding-bottom: 40rpx;
}
/* ==================== 页面标题区域) ==================== */
/* ==================== 页面标题区域) ==================== */
.header-section {
background-color: #fff;
padding: 32rpx 28rpx 24rpx;
@@ -374,7 +380,38 @@
}
}
/* ==================== 选择区域通用样式 ==================== */
.date-filter {
display: flex;
gap: 24rpx;
.date-picker {
flex: 1;
display: flex;
align-items: center;
gap: 16rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 20rpx;
.date-text {
.label {
display: block;
font-size: 26rpx;
color: #999;
}
.value {
display: block;
font-size: 30rpx;
color: #333;
margin-top: 4rpx;
font-weight: 600;
}
}
}
}
/* ==================== 选择区域通用样式 ==================== */
.select-section {
background-color: #fff;
margin: 0 20rpx 20rpx;
@@ -407,7 +444,7 @@
&:active {
background-color: #f0f0f0;
border-color: #1890ff;
border-color: #faad14;
transform: scale(0.98);
}
@@ -418,16 +455,6 @@
}
}
/* ==================== 日历组件包装 ==================== */
.calendar-wrapper {
background-color: #fff;
margin: 0 20rpx 20rpx;
padding: 20rpx 0;
border-radius: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
/* ==================== 学生选择器弹窗 ==================== */
.student-picker-modal {
position: fixed;
left: 0;
@@ -455,10 +482,10 @@
.header-title {
font-size: 36rpx;
font-weight: 700;
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-clip: text;
}
.header-actions {
@@ -478,8 +505,8 @@
&.primary {
color: #fff;
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #096dd9 100%);
box-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.3);
background: linear-gradient(135deg, #faad14 0%, #ffc53d 50%, #d48806 100%);
box-shadow: 0 4rpx 16rpx rgba(250, 173, 20, 0.3);
}
&:active {
@@ -503,7 +530,7 @@
border-radius: 20rpx;
margin-top: 16rpx;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06), 0 0 0 1rpx rgba(0, 0, 0, 0.04) inset;
position: relative;
overflow: hidden;
@@ -528,9 +555,9 @@
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&.checked {
border-color: #1890ff;
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.3);
border-color: #faad14;
background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
box-shadow: 0 2rpx 8rpx rgba(250, 173, 20, 0.3);
}
}
}
@@ -553,7 +580,7 @@
transition: all 0.3s ease;
&.male {
background: linear-gradient(135deg, #1890ffkt 0%, #40a9ff 50%, #096dd9 100%);
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #096dd9 100%);
}
&.female {
@@ -640,7 +667,7 @@
animation: fadeIn 0.3s ease;
}
/* ==================== 表格区域 ==================== */
/* ==================== 表格区域 ==================== */
.table-section {
margin: 0 20rpx;
background-color: #fff;
@@ -710,7 +737,7 @@
}
}
/* ==================== 空状态容器 ==================== */
/* ==================== 空状态容器 ==================== */
.empty-container {
display: flex;
flex-direction: column;
@@ -751,4 +778,79 @@
transform: translateY(0);
}
}
.segment-popup-content {
width: 620rpx;
max-height: 70vh;
padding: 32rpx;
display: flex;
flex-direction: column;
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24rpx;
.popup-title {
font-size: 34rpx;
font-weight: 700;
color: #333;
}
}
.popup-table {
background-color: #fafafa;
border-radius: 16rpx;
overflow: hidden;
display: flex;
flex-direction: column;
.popup-table-header {
display: flex;
background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
padding: 24rpx 0;
.popup-th {
flex: 1;
text-align: center;
font-size: 28rpx;
font-weight: 700;
color: #fff;
}
}
.popup-scroll {
max-height: 400rpx;
.popup-table-row {
display: flex;
padding: 24rpx 0;
border-bottom: 1rpx solid #eee;
background-color: #fff;
&:nth-child(even) {
background-color: #fafafa;
}
.popup-td {
flex: 1;
text-align: center;
font-size: 28rpx;
color: #333;
}
}
.popup-empty {
padding: 60rpx 0;
text-align: center;
.popup-empty-text {
font-size: 28rpx;
color: #999;
}
}
}
}
}
</style>