'提交'
This commit is contained in:
@@ -8,6 +8,42 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择器区域 -->
|
||||
<view class="selector-section">
|
||||
<view class="selector-item" @click="showProjectPicker = true">
|
||||
<text class="selector-label">项目名称</text>
|
||||
<view class="selector-value">
|
||||
<text class="value-text">{{ selectedProject }}</text>
|
||||
<u-icon name="arrow-down" size="24" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="selector-item" @click="showStudentPicker = true">
|
||||
<text class="selector-label">选择学生</text>
|
||||
<view class="selector-value">
|
||||
<text class="value-text">{{ selectedStudent }}</text>
|
||||
<u-icon name="arrow-down" size="24" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 项目选择器 -->
|
||||
<u-picker
|
||||
:show="showProjectPicker"
|
||||
:columns="[projectList]"
|
||||
@confirm="handleProjectConfirm"
|
||||
@cancel="showProjectPicker = false"
|
||||
keyName="label"></u-picker>
|
||||
|
||||
<!-- 学生选择器 -->
|
||||
<u-picker
|
||||
:show="showStudentPicker"
|
||||
:columns="[studentList]"
|
||||
@confirm="handleStudentConfirm"
|
||||
@cancel="showStudentPicker = false"
|
||||
keyName="label"
|
||||
multiple
|
||||
:defaultIndex="defaultStudentIndex"></u-picker>
|
||||
|
||||
<!-- 日历组件 -->
|
||||
<view class="calendar-wrapper">
|
||||
<uni-calendar
|
||||
@@ -55,13 +91,7 @@
|
||||
</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>
|
||||
|
||||
@@ -115,18 +145,46 @@
|
||||
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 tableData = ref<TableDataItem[]>([])
|
||||
|
||||
// 项目列表
|
||||
const projectList = ref([
|
||||
{ label: '全部项目', value: 'all' },
|
||||
{ label: '100米自由泳', value: '100m-free' },
|
||||
{ label: '200米自由泳', value: '200m-free' },
|
||||
{ label: '400米自由泳', value: '400m-free' },
|
||||
{ label: '100米蛙泳', value: '100m-breast' }
|
||||
])
|
||||
|
||||
// 学生列表
|
||||
const studentList = ref([
|
||||
{ label: '全部学生', value: 'all' },
|
||||
{ label: '张小明', value: 'zhang-xiaoming' },
|
||||
{ label: '李小红', value: 'li-xiaohong' },
|
||||
{ label: '王小明', value: 'wang-xiaoming' },
|
||||
{ label: '赵小芳', value: 'zhao-xiaofang' },
|
||||
{ label: '陈小刚', value: 'chen-xiaogang' }
|
||||
])
|
||||
|
||||
// 选中的项目和学生
|
||||
const selectedProject = ref('全部项目')
|
||||
const selectedStudent = ref('全部学生')
|
||||
const selectedProjectValue = ref('all')
|
||||
const selectedStudentValues = ref<string[]>([])
|
||||
|
||||
// 选择器显示状态
|
||||
const showProjectPicker = ref(false)
|
||||
const showStudentPicker = ref(false)
|
||||
const defaultStudentIndex = ref<number[]>([0])
|
||||
|
||||
// 日历打点数据
|
||||
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 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(() => {
|
||||
@@ -135,37 +193,44 @@
|
||||
return Math.round(total / tableData.value.length)
|
||||
})
|
||||
|
||||
// 模拟数据
|
||||
// 完整模拟数据
|
||||
const mockData: Record<string, TableDataItem[]> = {
|
||||
'2026-03-15': [
|
||||
'2026-03-28': [
|
||||
{ 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: '200米自由泳', plan: '1500米', completion: 88, detail: '1320/1500' },
|
||||
{ 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' }
|
||||
{ name: '李小红', projectName: '400米自由泳', plan: '1200米', completion: 85, detail: '1020/1200' },
|
||||
{ name: '王小明', projectName: '100米自由泳', plan: '2000米', completion: 90, detail: '1800/2000' },
|
||||
{ name: '赵小芳', projectName: '100米蛙泳', plan: '1800米', completion: 88, detail: '1584/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' },
|
||||
'2026-03-29': [
|
||||
{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 90, detail: '1800/2000' },
|
||||
{ name: '张小明', projectName: '100米蛙泳', plan: '1800米', completion: 85, detail: '1530/1800' },
|
||||
{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 95, detail: '1900/2000' },
|
||||
{ name: '赵小芳', projectName: '100米自由泳', plan: '1800米', completion: 88, detail: '1584/1800' }
|
||||
{ name: '李小红', projectName: '200米自由泳', plan: '1500米', completion: 92, detail: '1380/1500' },
|
||||
{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 98, detail: '1470/1500' },
|
||||
{ name: '赵小芳', projectName: '100米自由泳', plan: '2000米', completion: 82, detail: '1640/2000' },
|
||||
{ name: '陈小刚', projectName: '100米自由泳', plan: '2000米', completion: 88, detail: '1760/2000' }
|
||||
],
|
||||
'2026-03-30': [
|
||||
{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 92, detail: '1840/2000' },
|
||||
{ name: '张小明', projectName: '400米自由泳', plan: '1200米', completion: 90, detail: '1080/1200' },
|
||||
{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 88, detail: '1760/2000' },
|
||||
{ name: '李小红', projectName: '100米蛙泳', plan: '1800米', completion: 95, detail: '1710/1800' },
|
||||
{ name: '王小明', projectName: '100米自由泳', plan: '2000米', completion: 95, detail: '1900/2000' },
|
||||
{ name: '赵小芳', projectName: '200米自由泳', plan: '1500米', completion: 85, detail: '1275/1500' },
|
||||
{ name: '陈小刚', projectName: '400米自由泳', plan: '1200米', completion: 92, detail: '1104/1200' }
|
||||
]
|
||||
}
|
||||
|
||||
// 日历打点数据
|
||||
const selectedDates = ref([
|
||||
{ date: '2026-03-28', info: '训练' },
|
||||
{ date: '2026-03-29', info: '训练' },
|
||||
{ date: '2026-03-30', info: '训练' }
|
||||
])
|
||||
|
||||
onLoad(() => {
|
||||
loadData()
|
||||
})
|
||||
@@ -196,16 +261,86 @@
|
||||
|
||||
// 日期选择处理
|
||||
const handleDateChange = (e: any) => {
|
||||
// 点击日期后的处理
|
||||
const date = e.fulldate
|
||||
selectedDate.value = date
|
||||
filterAndLoadData()
|
||||
}
|
||||
|
||||
// 加载该日期的数据
|
||||
if (mockData[date]) {
|
||||
tableData.value = mockData[date]
|
||||
// 项目选择确认
|
||||
const handleProjectConfirm = (e: any) => {
|
||||
const item = e.value[0]
|
||||
selectedProject.value = item.label
|
||||
selectedProjectValue.value = item.value
|
||||
showProjectPicker.value = false
|
||||
filterAndLoadData()
|
||||
}
|
||||
|
||||
// 学生选择确认
|
||||
const handleStudentConfirm = (e: any) => {
|
||||
const items = e.value
|
||||
selectedStudentValues.value = items.map((item: any) => item.value)
|
||||
|
||||
if (selectedStudentValues.value.length === 0) {
|
||||
selectedStudent.value = '未选择'
|
||||
} else if (selectedStudentValues.value.includes('all')) {
|
||||
selectedStudent.value = '全部学生'
|
||||
} else {
|
||||
tableData.value = []
|
||||
const selectedNames = items.map((item: any) => item.label)
|
||||
selectedStudent.value = selectedNames.length > 2
|
||||
? `${selectedNames.slice(0, 2).join(', ')}等${selectedNames.length}人`
|
||||
: selectedNames.join(', ')
|
||||
}
|
||||
|
||||
defaultStudentIndex.value = e.indexs
|
||||
showStudentPicker.value = false
|
||||
filterAndLoadData()
|
||||
}
|
||||
|
||||
// 过滤并加载数据
|
||||
const filterAndLoadData = () => {
|
||||
if (!selectedDate.value) {
|
||||
tableData.value = []
|
||||
return
|
||||
}
|
||||
|
||||
const dateData = mockData[selectedDate.value]
|
||||
if (!dateData) {
|
||||
tableData.value = []
|
||||
return
|
||||
}
|
||||
|
||||
let filteredData = [...dateData]
|
||||
|
||||
// 按项目过滤
|
||||
if (selectedProjectValue.value !== 'all') {
|
||||
const projectMap: Record<string, string> = {
|
||||
'100m-free': '100米自由泳',
|
||||
'200m-free': '200米自由泳',
|
||||
'400m-free': '400米自由泳',
|
||||
'100m-breast': '100米蛙泳'
|
||||
}
|
||||
const targetProject = projectMap[selectedProjectValue.value]
|
||||
if (targetProject) {
|
||||
filteredData = filteredData.filter(item => item.projectName === targetProject)
|
||||
}
|
||||
}
|
||||
|
||||
// 按学生过滤
|
||||
if (selectedStudentValue.value !== 'all') {
|
||||
const studentMap: Record<string, string> = {
|
||||
'zhang-xiaoming': '张小明',
|
||||
'li-xiaohong': '李小红',
|
||||
'wang-xiaoming': '王小明',
|
||||
'zhao-xiaofang': '赵小芳',
|
||||
'chen-xiaogang': '陈小刚'
|
||||
}
|
||||
const targetStudent = studentMap[selectedStudentValue.value]
|
||||
if (targetStudent) {
|
||||
filteredData = filteredData.filter(item => item.name === targetStudent)
|
||||
}
|
||||
}
|
||||
|
||||
tableData.value = filteredData
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -241,6 +376,47 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 选择器区域 */
|
||||
.selector-section {
|
||||
background-color: #fff;
|
||||
margin: 0 20rpx 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.selector-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 24rpx;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.selector-label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.selector-value {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.value-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 日历组件包装 */
|
||||
.calendar-wrapper {
|
||||
background-color: #fff;
|
||||
|
||||
Reference in New Issue
Block a user