YD_WeChatApplet/subpackage/teacher/report-detail/report-detail.wxml

<!-- subpackage/teacher/report-detail/report-detail.wxml -->
<view class="page-content">
  <mp-bar background="linear-gradient(190deg, #49a5fc 0%, #f7f7f7 800rpx, #f7f7f7 100%)" title="统计" color="#fff"></mp-bar>
  <!-- 骨架屏 -->
  <view wx:if="{{loading}}" class="skeleton">
    <view class="skeleton-title">
      <view class="skeleton-block skeleton-tag"></view>
      <view class="skeleton-block skeleton-title-text"></view>
    </view>
    <view class="skeleton-card">
      <view class="skeleton-block skeleton-label"></view>
      <view class="skeleton-block skeleton-chart"></view>
    </view>
    <view class="skeleton-heart-box">
      <view class="skeleton-heart-item">
        <view class="skeleton-block skeleton-heart-label"></view>
        <view class="skeleton-block skeleton-heart-value"></view>
      </view>
      <view class="skeleton-heart-item">
        <view class="skeleton-block skeleton-heart-label"></view>
        <view class="skeleton-block skeleton-heart-value"></view>
      </view>
      <view class="skeleton-heart-item">
        <view class="skeleton-block skeleton-heart-label"></view>
        <view class="skeleton-block skeleton-heart-value"></view>
      </view>
    </view>
    <view class="skeleton-title">
      <view class="skeleton-block skeleton-tag"></view>
      <view class="skeleton-block skeleton-title-text"></view>
    </view>
    <view class="skeleton-list-item" wx:for="{{[1,2,3]}}" wx:key="*this">
      <view class="skeleton-block skeleton-list-icon"></view>
      <view class="skeleton-list-info">
        <view class="skeleton-block skeleton-list-line"></view>
        <view class="skeleton-block skeleton-list-line-short"></view>
      </view>
    </view>
  </view>
  <!-- 正式内容 -->
  <block wx:if="{{!loading}}">
    <view class="title">
      <view class="title-before"></view>
      心率统计
    </view>
    <view class="card canvasCard">
      <view>次/分</view>
      <view class="charts" style="width: {{cWidth}}px;height: {{cHeight}}px;">
        <canvas canvas-id="mycanvas" type="2d" id="mycanvas" style="width: {{cWidth}}px;height: {{cHeight}}px;" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend" />
      </view>
      <view class="hr-legend">
        <view class="hr-legend-item">
          <view class="hr-legend-line hr-legend-moderate"></view>
          <text>中等强度 {{moderateHR}}次/分</text>
        </view>
        <view class="hr-legend-item">
          <view class="hr-legend-line hr-legend-high"></view>
          <text>高强度 {{highHR}}次/分</text>
        </view>
      </view>
    </view>
    <!-- <view class="tp">
    <view class="table-t">
      <view class="no-b no-r">最大心率</view>
      <view class="no-b no-r">最小心率</view>
      <view class="no-b">平均心率</view>
    </view>
    <view class="table-t">
      <view class="no-r">{{reportDetail.maxHR || '- -'}}</view>
      <view class="no-r">{{reportDetail.minHR || '- -'}}</view>
      <view >{{reportDetail.avgHR || '- -'}}</view>
    </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">{{reportDetail.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">{{reportDetail.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">{{reportDetail.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">{{reportDetail.highRatio}}</text>
      </view>
    </view>
    <view class="title">
      <view class="title-before"></view>
      跳绳记录
    </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">{{reportDetail.jumpTotal}}</view>
            <view class="jump-col">{{reportDetail.jumpDuration}}</view>
            <view class="jump-col">{{reportDetail.jumpAvgSpeed}}</view>
      </view>
    </view>
    <view class="homework-item" wx:for="{{reportDetail.jumpRecordList}}" wx:key="index">
      <view class="top">
        <view class="left">
          <view class="img-box">
            <image class="jump-img" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/teacher/icon/Rope-Skipping.png" mode="" />
          </view>
          <view class="desc">
            <view class="statu">{{item.jumpType}}</view>
            <view>
              {{item.totalDuration}}s
              <text style="margin-left: 30rpx;">{{item.totalCount}}个</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view wx:if="{{reportDetail.jumpRecordList.length <= 0}}" class="no">暂无记录~</view>
  </block>
</view>