615 lines
12 KiB
Vue
615 lines
12 KiB
Vue
<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="date-filter" style="margin: 20rpx 20rpx 0;">
|
|
<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 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"
|
|
:pageTotal="pageTotal"></next-table>
|
|
</view>
|
|
|
|
<!-- 日历弹窗 -->
|
|
<up-calendar :show="showCalendar" mode="date" minDate='1776240407000' @confirm="calendarConfirm"
|
|
@close="calendarClose">
|
|
</up-calendar>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onShow, onLoad } from "@dcloudio/uni-app"
|
|
import { Service } from '@/Service/Service'
|
|
import { ref, computed } from 'vue'
|
|
import { PlanService } from '@/Service/swimming/PlanService'
|
|
|
|
interface Project {
|
|
id : string
|
|
name : string
|
|
}
|
|
|
|
interface Student {
|
|
id : string
|
|
name : string
|
|
gender : string
|
|
age : number
|
|
}
|
|
|
|
interface TableDataItem {
|
|
date : string
|
|
name : string
|
|
projectName : string
|
|
plan : string
|
|
completion : number
|
|
detail : string
|
|
}
|
|
|
|
interface StudentRecord {
|
|
student : Student
|
|
date : string
|
|
segments : TableDataItem[]
|
|
}
|
|
|
|
const currentYear = ref(new Date().getFullYear())
|
|
const currentMonth = ref(new Date().getMonth() + 1)
|
|
const selectedDate = ref('')
|
|
|
|
// 项目选择
|
|
let showProject = ref(false)
|
|
let selectProcet = ref('')
|
|
let selectId = ref('')
|
|
|
|
// 日期选择
|
|
const begin = ref<string>('')
|
|
const end = ref<string>('')
|
|
const showCalendar = ref(false)
|
|
const calendarType = ref<'begin' | 'end'>('begin')
|
|
|
|
// 分页相关
|
|
let page = ref(1)
|
|
let status = ref('loadmore')
|
|
|
|
let pageTotal = ref(10)
|
|
|
|
const columns = ref([
|
|
{
|
|
label: '姓名',
|
|
name: 'studentName',
|
|
},
|
|
{
|
|
label: '项目名称',
|
|
name: 'planName',
|
|
},
|
|
{
|
|
label: '最快速度',
|
|
name: 'quicklyTime',
|
|
},
|
|
{
|
|
label: '详细数据',
|
|
name: 'time',
|
|
width:'200'
|
|
}
|
|
])
|
|
|
|
const tableData = ref<TableDataItem[]>([])
|
|
|
|
onLoad(() => {
|
|
|
|
})
|
|
|
|
onShow(() => {
|
|
|
|
})
|
|
|
|
const openCalendar = () => {
|
|
showCalendar.value = true
|
|
}
|
|
|
|
const calendarConfirm = (e : any) => {
|
|
begin.value = e[0]
|
|
end.value = e[e.length - 1]
|
|
showCalendar.value = false
|
|
getRecord()
|
|
}
|
|
|
|
const calendarClose = () => {
|
|
showCalendar.value = false
|
|
}
|
|
|
|
|
|
|
|
|
|
const getRecord = () => {
|
|
page.value = 1
|
|
getRecordList()
|
|
}
|
|
|
|
const getRecordList = () => {
|
|
let data = {
|
|
sTime: begin.value,
|
|
eTime: end.value
|
|
}
|
|
PlanService.GetJishiLog(data).then(res => {
|
|
if (res.code == 0) {
|
|
pageTotal.value = res.data.pageTotal
|
|
tableData.value = res.data.list
|
|
} else {
|
|
Service.Msg(res.msg)
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
const pageChange = (e) => {
|
|
page.value = e
|
|
getRecordList()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.baogan-container {
|
|
min-height: 100vh;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.header-section {
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
border-radius: 20rpx;
|
|
padding: 28rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.select-label {
|
|
margin-bottom: 16rpx;
|
|
|
|
.label-text {
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.picker-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx 24rpx;
|
|
background-color: #f8f8f8;
|
|
border-radius: 12rpx;
|
|
border: 1rpx solid #e8e8e8;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
background-color: #f0f0f0;
|
|
border-color: #faad14;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.picker-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.student-picker-modal {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 70vh;
|
|
background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
z-index: 999;
|
|
animation: slideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
box-shadow: 0 -8rpx 40rpx rgba(0, 0, 0, 0.12);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
|
|
.picker-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 36rpx 32rpx 28rpx;
|
|
background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
|
|
flex-shrink: 0;
|
|
|
|
.header-title {
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
|
|
.action-btn {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
padding: 14rpx 28rpx;
|
|
border-radius: 24rpx;
|
|
background: linear-gradient(135deg, #f5f5f5 0%, #f0f0f0 100%);
|
|
font-weight: 600;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
|
|
|
&.primary {
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #faad14 0%, #ffc53d 50%, #d48806 100%);
|
|
box-shadow: 0 4rpx 16rpx rgba(250, 173, 20, 0.3);
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.92);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.student-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0 20rpx 40rpx;
|
|
|
|
.student-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
padding: 24rpx;
|
|
background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
|
|
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), 0 0 0 1rpx rgba(0, 0, 0, 0.04) inset;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.item-checkbox {
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.checkbox-inner {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 10rpx;
|
|
border: 2rpx solid #d9d9d9;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
&.checked {
|
|
border-color: #faad14;
|
|
background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
|
|
box-shadow: 0 2rpx 8rpx rgba(250, 173, 20, 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-avatar {
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.avatar-circle {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 18rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
|
|
&.male {
|
|
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #096dd9 100%);
|
|
}
|
|
|
|
&.female {
|
|
background: linear-gradient(135deg, #fa8c16 0%, #ffa940 50%, #d46b08 100%);
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 8rpx;
|
|
right: 8rpx;
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.avatar-text {
|
|
font-size: 34rpx;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.item-name {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
.item-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
|
|
.gender-badge {
|
|
font-size: 22rpx;
|
|
padding: 6rpx 14rpx;
|
|
border-radius: 10rpx;
|
|
font-weight: 500;
|
|
|
|
&.male {
|
|
color: #1890ff;
|
|
background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(64, 169, 255, 0.05) 100%);
|
|
}
|
|
|
|
&.female {
|
|
color: #fa8c16;
|
|
background: linear-gradient(135deg, rgba(250, 140, 22, 0.1) 0%, rgba(255, 169, 64, 0.05) 100%);
|
|
}
|
|
}
|
|
|
|
.age-text {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%);
|
|
backdrop-filter: blur(10rpx);
|
|
z-index: 998;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
.date-summary {
|
|
background-color: #fff;
|
|
margin: 0 20rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
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: 20rpx 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
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: 20rpx;
|
|
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;
|
|
}
|
|
}
|
|
|
|
::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;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style> |