项目初始化

gaoluyang

3 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/pages_qiun/pages/sport/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,762 @@
<template>
   <view class="body">
      <view class="nav row_align_center" id="nav">
         <li class="li_7" style="z-index: 999;font-size: 50rpx;" :class="['iconfont icon-zuojiantou back']" @click="gotoBack()">
         </li>
      </view>
      <view class="head">
         <view class="title">运动报告</view>
         <view class="customer_img">
            <!-- <open-data type="userAvatarUrl" class="img"></open-data> -->
            <image class="img" src="https://s1.ax1x.com/2022/11/16/zZUoK1.jpg" mode="widthFix"></image>
         </view>
      </view>
      <view class="score_view">
         <view class="title">本次评分</view>
         <view class="detail">
            <view class="socre">98</view>
            <li class="li_7" :class="['iconfont icon-up text-green']" @click="gotoBack()"></li>
            <view class="up_socre">0.4</view>
         </view>
      </view>
      <view class="census_view">
         <view class="left">
            <view class="text_gray small_text">消耗(千卡)</view>
            <view class="middle_text text_wide_900">165</view>
         </view>
         <view class="right">
            <view class="text_gray small_text">心率主要集中在</view>
            <view style="font-size: 30rpx;">燃烧脂肪</view>
         </view>
      </view>
      <view class="census_view">
         <view class="left">
            <view class="text_gray small_text">时长(分钟)</view>
            <view class="middle_text text_wide_900">75</view>
         </view>
         <view class="center">
            <view class="text_gray small_text">累计打卡(天)</view>
            <view class="middle_text text_wide_900">24</view>
         </view>
         <view class="right">
            <view class="text_gray small_text">平均心率(次/分钟)</view>
            <view class="middle_text text_wide_900">98</view>
         </view>
      </view>
      <view class="consume_view">
         <view class="wrap"><span class="consume_tip">身体消耗</span></view>
         <li class="li_7" :class="['iconfont icon-niunai consume_icon']"></li>
         <view class="desc">
            <view class="small_text">约消耗</view>
            <view class="text_wide_900"><text class="left">1000</text><text class="right">毫升牛奶</text></view>
         </view>
      </view>
      <view class="heart_rate_view">
         <view class="left">
            <li class="li_7" :class="['iconfont icon-zhexiantu']"></li>
            <text class="title">心率变化曲线</text>
         </view>
         <view class="right text_gray">心率变化</view>
      </view>
      <view v-if="heartRateData.series" class="heart_rate_chart">
         <view class="charts-box">
            <qiun-data-charts type="tline" canvasId="sport_a" :canvas2d="isCanvas2d" :resshow="delayload"
               :opts="{ padding: [0, 20, 10, 0], legend: { position: 'top', lineHeight: 20 }, xAxis: { disableGrid: true, format: 'xAxisDemo3' }, yAxis: { data: [{ min: 0, max: 175 }], gridType: 'solid' }, dataLabel: false, dataPointShape: false }"
               :chartData="heartRateData" />
         </view>
      </view>
      <view class="title_view">
         <view class="left">
            <li class="li_7" :class="['iconfont icon-xinlv']"></li>
            <text class="title">心率区间</text>
         </view>
      </view>
      <view class="heart_rate_range">
         <view class="top">
            <view class="item" v-for="(item, index) in heatRateRange" :key="index">
               <view class="name text_gray">{{ item.name }}</view>
               <view class="data">{{ item.type }}{{ item.data }}<text class="unit text_gray">分钟</text></view>
            </view>
         </view>
         <view v-if="heartRateRangeData" class="charts-box">
            <qiun-data-charts type="ring" canvasId="sport_b" :canvas2d="isCanvas2d" :resshow="delayload"
               :opts="{ legend: { position: 'bottom' }, extra: { ring: { border: false, centerColor: '#312C34' } }, title: { name: '' }, subtitle: { name: '' } }"
               :chartData="heartRateRangeData" />
         </view>
      </view>
      <view class="title_view">
         <view class="left">
            <li class="li_7" :class="['iconfont icon-pie']"></li>
            <text class="title">运动分析</text>
         </view>
      </view>
      <view class="sport_analysis_view">
         <view class="top">
            <li class="iconfont icon-feiji li_7"></li>
            <text class="title font-s-34">跑步机</text>
         </view>
         <view class="middle">
            <view class="left">
               <li class="iconfont icon-clock li_7"></li>
               <view>3.24P.M</view>
            </view>
            <view class="right">
               <li class="iconfont icon-huo li_7"></li>
               <view>热量消耗(千卡)</view>
            </view>
         </view>
         <view class="bottom">
            <view class="left">
               <li class="iconfont icon-kongxinyuan li_7"></li>
               <view>燃烧脂肪</view>
            </view>
            <view class="right">
               <view class="text_wide_600 font-s-40">637</view>
            </view>
         </view>
      </view>
      <view class="box_view speed_rank_view">
         <view class="top">
            <view class="item" v-for="(item, index) in speedRank" :key="index">
               <view class="name text_gray">{{ item.name }}</view>
               <view class="data">{{ item.data }}<text class="unit text_gray">{{ item.unit }}</text></view>
            </view>
         </view>
         <view v-if="speedRankData" class="charts-box">
            <qiun-data-charts type="bar" canvasId="sport_c" :canvas2d="isCanvas2d" :resshow="delayload"
               :chartData="speedRankData" background="none"
               :opts="{ xAxis: { disabled: true, disableGrid: true }, extra: { bar: { barBorderCircle: true, width: 20 } }, legend: { show: false } }" />
         </view>
      </view>
      <view class="box_view">
         <view v-if="speedAndRateData.series" class="charts-box">
            <qiun-data-charts type="tline" canvasId="sport_d" :canvas2d="isCanvas2d" :resshow="delayload"
               :opts="{ padding: [0, 20, 10, 0], legend: { position: 'top', lineHeight: 20 }, xAxis: { disableGrid: true, format: 'xAxisDemo3' }, yAxis: { data: [{ position: 'left', min: 0, max: 25 }, { position: 'right', min: 50, max: 175 }], gridType: 'solid' }, dataLabel: false, dataPointShape: false }"
               :chartData="speedAndRateData" />
         </view>
      </view>
   </view>
</template>

<script>
import heartRateData from "../../static/json/sport/1.json"
import heartRateRangeData from "../../static/json/sport/2.json"
import speedRankData from "../../static/json/sport/3.json"
import speedAndRateData from "../../static/json/sport/4.json"
import Config from '../../static/js/config'
import Common from '../../static/js/common'

export default {
   components: {

   },
   data() {
      return {
         info: '大便超人', //用户数据
         isCanvas2d: Config.ISCANVAS2D,
         heartRateData: {},
         speedRankData: {},
         speedAndRateData: {},
         delayload: null,
         heartRateRangeData: {},
         heatRateRange: [{
            name: "激活放松",
            data: "5",
            type: "≤"
         },
         {
            name: "动态热身",
            data: "13",
            type: ""
         },
         {
            name: "脂肪燃烧",
            data: "24",
            type: ""
         },
         {
            name: "糖分消耗",
            data: "8",
            type: "≤"
         },
         {
            name: "心肺训练",
            data: "7",
            type: ""
         },
         {
            name: "极限锻炼",
            data: "16",
            type: ""
         },
         ],
         speedRank: [{
            name: "距离",
            data: "5",
            unit: "公里"
         },
         {
            name: "时长",
            data: "12",
            unit: "分钟"
         },
         {
            name: "平均配速",
            data: "6\'05\"",
            unit: ""
         }
         ]
      };
   },
   watch: {

   },
   methods: {
      async getData() {
         uni.showLoading();
         /*将钟点时间随机转成某一天的具体时间戳*/
         if (typeof heartRateData.series[0].data[0][0] == 'string') {
            for (let i = 0; i < heartRateData.series.length; i++) {
               heartRateData.series[i].data.map(x => {
                  x[0] = "2018/08/08 " + x[0];
                  x[0] = this.tranTimestamp(x[0]);
                  return x[0];
               })
            }

         }
         if (typeof speedAndRateData.series[0].data[0][0] == 'string') {
            for (let i = 0; i < speedAndRateData.series.length; i++) {
               speedAndRateData.series[i].data.map(x => {
                  x[0] = "2018/08/08 " + x[0];
                  x[0] = this.tranTimestamp(x[0]);
                  return x[0];
               })
            }
         }

         this.heartRateData = heartRateData;
         this.heartRateRangeData = heartRateRangeData;
         this.speedRankData = speedRankData;
         this.speedAndRateData = speedAndRateData;
         this.delayload = true;
         uni.hideLoading();
      },
      tranTimestamp(date) {
         return new Date(date).getTime()
      },
      gotoBack() {
         Common.navigateBack("/index/index");
      },

   },
   onReady() {
      //#ifndef H5
      uni.showShareMenu();
      //#endif
      this.getData()
   }
}
</script>

<style scoped lang="scss">
.body {
   height: 100%;
   background-color: #1C191F;
   margin: 0;
   color: #fff;
   padding: 80rpx 20rpx 0 20rpx;
   width: 100%;
   box-sizing: border-box;
   padding-bottom: 50rpx;

   .box_view {
      width: 100%;
      padding: 20rpx;
      position: relative;
      background-color: #312C34;
      color: #FFFFFF;
      box-sizing: border-box;
      border-radius: 20rpx;
      overflow: hidden;
      margin-top: 30rpx;
   }

   .speed_rank_view {
      .top {
         width: 100%;

         &:after {
            content: "";
            clear: both;
            display: block;
         }

         .item {
            float: left;
            width: 33%;
            box-sizing: border-box;
            padding: 30rpx 20rpx;
            text-align: left;

            .name {
               font-size: 26rpx;
            }

            .data {
               font-size: 40rpx;
               margin-top: 10rpx;

               .unit {
                  font-size: 24rpx;
                  margin-left: 14rpx;
               }
            }
         }
      }
   }

   .sport_analysis_view {
      width: 100%;
      padding: 20rpx;
      position: relative;
      background-color: #312C34;
      color: #FFFFFF;
      box-sizing: border-box;
      border-radius: 20rpx;
      overflow: hidden;

      .top {
         width: 100%;
         height: 120rpx;
         display: flex;
         align-items: center;

         .icon-feiji {
            margin-top: 10rpx;
         }

         .title {
            margin-left: 10rpx;
         }
      }

      .middle {
         width: 100%;
         display: flex;
         justify-content: space-between;
         font-size: 28rpx;

         .iconfont {
            font-size: 28rpx;
            margin-right: 10rpx;
            margin-top: 4rpx;
         }

         .left {
            width: 50%;
            height: 60rpx;
            display: flex;
            align-items: center;
            justify-content: flex-start;
         }

         .right {
            width: 50%;
            height: 60rpx;
            display: flex;
            align-items: center;
            justify-content: flex-end;
         }
      }

      .bottom {
         width: 100%;
         display: flex;
         justify-content: space-between;
         font-size: 28rpx;

         .iconfont {
            font-size: 28rpx;
            margin-right: 10rpx;
            margin-top: 4rpx;
         }

         .left {
            width: 50%;
            height: 60rpx;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .icon-kongxinyuan {
               color: #6FCEF7;
            }
         }

         .right {
            width: 50%;
            height: 60rpx;
            display: flex;
            align-items: center;
            justify-content: flex-end;
         }
      }
   }

   .heart_rate_range {
      width: 100%;
      position: relative;
      background-color: #312C34;
      color: #FFFFFF;
      box-sizing: border-box;
      border-radius: 20rpx;
      overflow: hidden;

      .top {
         width: 100%;

         &:after {
            content: "";
            clear: both;
            display: block;
         }

         .item {
            float: left;
            width: 33%;
            box-sizing: border-box;
            padding: 30rpx 20rpx;
            text-align: center;

            .name {
               font-size: 26rpx;
            }

            .data {
               font-size: 40rpx;
               margin-top: 10rpx;

               .unit {
                  font-size: 24rpx;
                  margin-left: 14rpx;
               }
            }
         }
      }
   }

   .heart_rate_chart {
      display: flex;
      justify-content: center;
      width: 100%;
      position: relative;
      background-color: #312C34;
      color: #FFFFFF;
      box-sizing: border-box;
      border-radius: 20rpx;
      overflow: hidden;
   }

   .title_view {
      display: flex;
      width: 100%;
      align-items: center;
      height: 150rpx;

      .left {
         display: flex;
         align-items: center;

         .iconfont {
            font-size: 40rpx !important;
         }

         .title {
            font-size: 34rpx;
            margin-left: 20rpx;
         }
      }
   }

   .heart_rate_view {
      display: flex;
      width: 100%;
      justify-content: space-around;
      align-items: center;
      height: 150rpx;

      .left {
         display: flex;
         align-items: center;

         .icon-zhexiantu {
            font-size: 26rpx;
         }

         .title {
            font-size: 34rpx;
            margin-left: 20rpx;
         }
      }

      .right {
         font-size: 22rpx;
         padding: 10rpx 30rpx;
         border-radius: 40rpx;
         background-color: #342E39;
      }
   }

   .consume_view {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 190rpx;
      position: relative;
      margin-top: 100rpx;
      background-color: #312C34;
      color: #FFFFFF;
      box-sizing: border-box;
      border-radius: 10rpx;

      .consume_img {
         width: 240rpx;
         height: auto;
         position: absolute;
         top: -80rpx;
         left: 20rpx;
      }

      .consume_icon {
         font-size: 220rpx;
         position: absolute;
         top: -80rpx;
         left: 20rpx;
      }

      .desc {
         position: absolute;
         right: 80rpx;
         top: 20rpx;

         view {
            padding: 10rpx 0;
            display: flex;
            align-items: center;
         }

         .left {
            font-size: 50rpx;
         }

         .right {
            font-size: 30rpx;
            margin-left: 10rpx;
            font-weight: 400;
         }
      }
   }

   .text-green {
      color: #10A764;
   }

   .text_gray {
      color: #8E8B8B;
   }

   .small_text {
      font-size: 24rpx;
   }

   .font-s-34 {
      font-size: 34rpx;
   }

   .font-s-36 {
      font-size: 36rpx;
   }

   .font-s-38 {
      font-size: 38rpx;
   }

   .font-s-40 {
      font-size: 40rpx;
   }

   .middle_text {
      font-size: 36rpx;
   }

   .text_wide_900 {
      font-weight: 900;
   }

   .text_wide_600 {
      font-weight: 600;
   }

   .census_view {
      width: 100%;
      display: flex;
      justify-content: space-around;

      .left {
         text-align: left;

         view {
            padding: 10rpx 0;
         }
      }

      .center {
         text-align: center;

         view {
            padding: 10rpx 0;
         }
      }

      .right {
         text-align: right;

         view {
            padding: 10rpx 0;
         }
      }
   }

   .score_view {
      width: 100%;

      .title {
         color: #8E8B8B;
         font-size: 24rpx;
      }

      .detail {
         height: 120rpx;
         width: 100%;
         display: flex;
         align-items: flex-end;

         .icon-up {
            margin-left: 40rpx;
            height: 54rpx;
            font-weight: 600;
         }

         .socre {
            font-size: 80rpx;
            font-weight: 900;
         }

         .up_socre {
            color: #10A764;
            height: 50rpx;
            font-size: 24rpx;
            font-weight: 600;
         }
      }
   }

   .head {
      height: 140rpx;
      line-height: 140rpx;
      position: relative;

      .title {
         font-size: 40rpx;
         margin-left: 20rpx;
      }

      .customer_img {
         position: absolute;
         bottom: 0rpx;
         right: 20rpx;
         width: 100rpx;
         height: 100rpx;
         margin: 0;
         padding: 0;
         background-size: 100% 100%;
         border-radius: 100%;
         overflow: hidden;

         .img {
            height: auto;
            width: 100%;
         }
      }
   }

   .li_7 {
      list-style-type: none;
   }

   .nav {
      position: fixed;
      top: 50rpx;
      left: 20rpx;
   }
}

.consume_view:nth-child(even) {
   margin-right: 4%;
}

.consume_tip {
   display: inline-block;
   text-align: center;
   width: 188rpx;
   height: 30rpx;
   line-height: 30rpx;
   position: absolute;
   top: 36rpx;
   right: -44rpx;
   z-index: 2;
   overflow: hidden;
   transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   border: 1px dashed;
   box-shadow: 0 0 0 3px #10A764, 0px 21px 5px -18px rgba(0, 0, 0, 0.6);
   background: #10A764;
   font-size: 16rpx;
}

.wrap {
   width: 100%;
   height: 100%;
   position: absolute;
   top: -12rpx;
   left: 12rpx;
   overflow: hidden;
}

.wrap:before {
   content: "";
   display: block;
   border-radius: 8px 8px 0px 0px;
   width: 80rpx;
   height: 14rpx;
   position: absolute;
   right: 68rpx;
   top: -1px;
   background: #4D6530;
}

.wrap:after {
   content: "";
   display: block;
   border-radius: 0px 8px 8px 0px;
   width: 14rpx;
   height: 80rpx;
   position: absolute;
   right: -1px;
   top: 66rpx;
   background: #4D6530;
}</style>