217 lines
11 KiB
Plaintext
217 lines
11 KiB
Plaintext
<!--subpackage/teacher/student-fitness-detail/student-fitness-detail.wxml-->
|
||
<view class="page-wrap" style="padding: 0 30rpx; padding-bottom: 300rpx; box-sizing: border-box;">
|
||
<mp-bar background="linear-gradient(190deg, #49a5fc 0%, #f5f8ff 700rpx, #f5f8ff 100%)" title="学生报告" color="#fff" back="{{true}}"></mp-bar>
|
||
|
||
<!-- 主 Tab 切换 -->
|
||
<view class="tab-switcher">
|
||
<view class="tab-btn {{activeTab === 0 ? 'tab-btn-active' : ''}}" data-tab="0" bind:tap="switchTab">课堂报告</view>
|
||
<view class="tab-btn {{activeTab === 1 ? 'tab-btn-active' : ''}}" data-tab="1" bind:tap="switchTab">体测报告</view>
|
||
</view>
|
||
|
||
<!-- 课堂报告 -->
|
||
<block wx:if="{{activeTab === 0}}">
|
||
<!-- 子Tab: 月 / 季度 -->
|
||
<view class="sub-tab-switcher">
|
||
<view class="sub-tab-btn {{classroomSubTab === 0 ? 'sub-tab-active' : ''}}" data-tab="0" bind:tap="switchClassroomSubTab">月</view>
|
||
<view class="sub-tab-btn {{classroomSubTab === 1 ? 'sub-tab-active' : ''}}" data-tab="1" bind:tap="switchClassroomSubTab">季度</view>
|
||
</view>
|
||
|
||
<!-- 月报告 -->
|
||
<block wx:if="{{classroomSubTab === 0}}">
|
||
<view class="period-selector" bind:tap="openMonthPicker">
|
||
<text class="period-text">{{selectedYear}}年{{selectedMonth}}月</text>
|
||
<text class="period-caret">▾</text>
|
||
</view>
|
||
<view class="stat-section-header-wrap"><view class="stat-section-header">心率统计</view></view>
|
||
<view class="stat-grid">
|
||
<view class="stat-card stat-card-1">
|
||
<view class="stat-card-bar"></view>
|
||
<text class="stat-card-label">心率范围</text>
|
||
<text class="stat-card-value">{{monthData.heartRange}}</text>
|
||
</view>
|
||
<view class="stat-card stat-card-2">
|
||
<view class="stat-card-bar"></view>
|
||
<text class="stat-card-label">平均心率</text>
|
||
<text class="stat-card-value">{{monthData.avgHeart}}</text>
|
||
</view>
|
||
<view class="stat-card stat-card-3">
|
||
<view class="stat-card-bar"></view>
|
||
<text class="stat-card-label">中高强度时长</text>
|
||
<text class="stat-card-value">{{monthData.highDuration}}</text>
|
||
</view>
|
||
<view class="stat-card stat-card-4">
|
||
<view class="stat-card-bar"></view>
|
||
<text class="stat-card-label">中高时间占比</text>
|
||
<text class="stat-card-value">{{monthData.highRatio}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="stat-section-header-wrap"><view class="stat-section-header">跳绳统计</view></view>
|
||
<view class="jump-tip">训练记录统计：仅智能跳绳，不含普通跳绳</view>
|
||
<view class="jump-summary-wrap">
|
||
<view class="jump-summary-header">
|
||
<view class="jump-col">个数</view>
|
||
<view class="jump-col">时长<text class="jump-unit">（分钟）</text></view>
|
||
<view class="jump-col">平均速度<text class="jump-unit">（个/分钟）</text></view>
|
||
</view>
|
||
<view class="jump-summary-data">
|
||
<view class="jump-col">{{monthData.jumpTotal}}</view>
|
||
<view class="jump-col">{{monthData.jumpDuration}}</view>
|
||
<view class="jump-col">{{monthData.jumpAvgSpeed}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="jump-summary-wrap" style="margin-top:30rpx">
|
||
<view class="jump-record-item" wx:for="{{monthData.jumpRecords}}" wx:key="index">
|
||
<view class="jump-record-icon-wrap">
|
||
<image src="/static/student/train.png" class="jump-record-icon" mode="aspectFit" />
|
||
</view>
|
||
<view class="jump-record-main">
|
||
<view class="jump-record-tag">{{item.type}}</view>
|
||
<view class="jump-record-detail">{{item.duration}} {{item.count}}个</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 季度报告 -->
|
||
<block wx:elif="{{classroomSubTab === 1}}">
|
||
<view class="period-selector" bind:tap="openQuarterPicker">
|
||
<text class="period-text">{{selectedYear}}年 第{{selectedQuarter}}季度</text>
|
||
<text class="period-caret">▾</text>
|
||
</view>
|
||
<view class="stat-section-header-wrap"><view class="stat-section-header">心率统计</view></view>
|
||
<view class="stat-grid">
|
||
<view class="stat-card stat-card-1">
|
||
<view class="stat-card-bar"></view>
|
||
<text class="stat-card-label">心率范围</text>
|
||
<text class="stat-card-value">{{quarterData.heartRange}}</text>
|
||
</view>
|
||
<view class="stat-card stat-card-2">
|
||
<view class="stat-card-bar"></view>
|
||
<text class="stat-card-label">平均心率</text>
|
||
<text class="stat-card-value">{{quarterData.avgHeart}}</text>
|
||
</view>
|
||
<view class="stat-card stat-card-3">
|
||
<view class="stat-card-bar"></view>
|
||
<text class="stat-card-label">中高强度时长</text>
|
||
<text class="stat-card-value">{{quarterData.highDuration}}</text>
|
||
</view>
|
||
<view class="stat-card stat-card-4">
|
||
<view class="stat-card-bar"></view>
|
||
<text class="stat-card-label">中高时间占比</text>
|
||
<text class="stat-card-value">{{quarterData.highRatio}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="stat-section-header-wrap"><view class="stat-section-header">跳绳统计</view></view>
|
||
<view class="jump-tip">训练记录统计：仅智能跳绳，不含普通跳绳</view>
|
||
<view class="jump-summary-wrap">
|
||
<view class="jump-summary-header">
|
||
<view class="jump-col">个数</view>
|
||
<view class="jump-col">时长<text class="jump-unit">（分钟）</text></view>
|
||
<view class="jump-col">平均速度<text class="jump-unit">（个/分钟）</text></view>
|
||
</view>
|
||
<view class="jump-summary-data">
|
||
<view class="jump-col">{{quarterData.jumpTotal}}</view>
|
||
<view class="jump-col">{{quarterData.jumpDuration}}</view>
|
||
<view class="jump-col">{{quarterData.jumpAvgSpeed}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="jump-summary-wrap" style="margin-top:30rpx">
|
||
<view class="jump-record-item" wx:for="{{quarterData.jumpRecords}}" wx:key="index">
|
||
<view class="jump-record-icon-wrap">
|
||
<image src="/static/student/train.png" class="jump-record-icon" mode="aspectFit" />
|
||
</view>
|
||
<view class="jump-record-main">
|
||
<view class="jump-record-tag">{{item.type}}</view>
|
||
<view class="jump-record-detail">{{item.duration}} {{item.count}}个</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</block>
|
||
|
||
<!-- 体测报告 -->
|
||
<block wx:elif="{{activeTab === 1}}">
|
||
<view class="fitness-card">
|
||
<view class="fitness-chart-title">体测成绩对比</view>
|
||
<view class="radar-wrap" style="width:{{radarCWidth}}px;height:{{radarCHeight}}px;">
|
||
<canvas type="2d" id="radarCanvas" canvas-id="radarCanvas" style="width:{{radarCWidth}}px;height:{{radarCHeight}}px;" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="fitness-grid">
|
||
<view class="fitness-item" wx:for="{{fitnessItems}}" wx:key="categoryValue" data-item="{{item}}" bind:tap="showFitnessScore">
|
||
<image src="{{item.imgUrl}}" class="fitness-icon" mode="aspectFit" />
|
||
<view class="fitness-name">{{item.name}}</view>
|
||
<view class="fitness-score">{{item.lastScore}}<text class="fitness-unit"> {{item.unit}}</text></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view wx:if="{{fitnessItems.length === 0}}" class="empty-tip">暂无体测数据</view>
|
||
</block>
|
||
|
||
<!-- 成绩弹窗遮罩 -->
|
||
<view class="popup-mask" wx:if="{{showFitnessPopup}}" bind:tap="closeFitnessPopup"></view>
|
||
<!-- 成绩弹窗 -->
|
||
<view class="score-popup {{showFitnessPopup ? 'popup-show' : ''}}">
|
||
<view class="popup-header">
|
||
<image src="{{selectedFitnessItem.imgUrl}}" class="popup-icon" mode="aspectFit" />
|
||
<text class="popup-title">{{selectedFitnessItem.name}}</text>
|
||
<view class="popup-close" bind:tap="closeFitnessPopup">✕</view>
|
||
</view>
|
||
<view class="score-rows">
|
||
<view class="score-row">
|
||
<view class="score-label">本次成绩</view>
|
||
<view class="score-value score-highlight">{{selectedFitnessItem.lastScore}}<text class="score-unit"> {{selectedFitnessItem.unit}}</text></view>
|
||
</view>
|
||
<view class="score-row">
|
||
<view class="score-label">上次成绩</view>
|
||
<view class="score-value">{{selectedFitnessItem.prevScore}}<text class="score-unit"> {{selectedFitnessItem.unit}}</text></view>
|
||
</view>
|
||
</view>
|
||
<view class="popup-btn" bind:tap="goFitnessDetail">查看详细趋势</view>
|
||
</view>
|
||
|
||
<!-- 月份选择弹窗 -->
|
||
<view class="picker-mask" wx:if="{{showMonthPicker}}" bind:tap="closeMonthPicker"></view>
|
||
<view class="picker-sheet {{showMonthPicker ? 'picker-sheet-show' : ''}}">
|
||
<view class="picker-header">
|
||
<text class="picker-cancel" bind:tap="closeMonthPicker">取消</text>
|
||
<text class="picker-title">选择月份</text>
|
||
<text class="picker-confirm" style="visibility:hidden">确定</text>
|
||
</view>
|
||
<view class="picker-year-row">
|
||
<view class="picker-year-arrow" bind:tap="prevPickerYear">‹</view>
|
||
<text class="picker-year-text">{{pickerYear}}年</text>
|
||
<view class="picker-year-arrow {{pickerYear >= nowYear ? 'picker-year-arrow-disabled' : ''}}" bind:tap="nextPickerYear">›</view>
|
||
</view>
|
||
<view class="picker-month-grid">
|
||
<view class="picker-month-item {{(item === selectedMonth && pickerYear === selectedYear) ? 'picker-item-active' : ''}} {{(pickerYear === nowYear && item > nowMonth) ? 'picker-item-disabled' : ''}}"
|
||
wx:for="{{monthList}}" wx:key="*this" data-month="{{item}}" bind:tap="selectMonth">
|
||
{{item}}月
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 季度选择弹窗 -->
|
||
<view class="picker-mask" wx:if="{{showQuarterPicker}}" bind:tap="closeQuarterPicker"></view>
|
||
<view class="picker-sheet {{showQuarterPicker ? 'picker-sheet-show' : ''}}">
|
||
<view class="picker-header">
|
||
<text class="picker-cancel" bind:tap="closeQuarterPicker">取消</text>
|
||
<text class="picker-title">选择季度</text>
|
||
<text class="picker-confirm" style="visibility:hidden">确定</text>
|
||
</view>
|
||
<view class="picker-year-row">
|
||
<view class="picker-year-arrow" bind:tap="prevPickerYear">‹</view>
|
||
<text class="picker-year-text">{{pickerYear}}年</text>
|
||
<view class="picker-year-arrow {{pickerYear >= nowYear ? 'picker-year-arrow-disabled' : ''}}" bind:tap="nextPickerYear">›</view>
|
||
</view>
|
||
<view class="picker-quarter-list">
|
||
<view class="picker-quarter-item {{(item.value === selectedQuarter && pickerYear === selectedYear) ? 'picker-item-active' : ''}} {{(pickerYear === nowYear && item.value > nowQuarter) ? 'picker-item-disabled' : ''}}"
|
||
wx:for="{{quarterList}}" wx:key="value" data-quarter="{{item.value}}" bind:tap="selectQuarter">
|
||
<text class="picker-quarter-label">{{item.label}}</text>
|
||
<text class="picker-quarter-months">{{item.months}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|