|
@@ -1,35 +1,33 @@
|
|
|
<template>
|
|
|
<div id="report_container">
|
|
|
- <view class="head"></view>
|
|
|
- <img
|
|
|
- class="boy"
|
|
|
- src="https://img.shuimuai.com/m_sign_chengji_boy%402x.png"
|
|
|
- />
|
|
|
- <view class="user">
|
|
|
- <view class="up">
|
|
|
- <view class="left">
|
|
|
- <img :src="userinfo.portrait" />
|
|
|
- <view>
|
|
|
- <text>{{ record.user_name }}</text>
|
|
|
- <text>{{ userinfo.level_name }}</text>
|
|
|
- </view>
|
|
|
+
|
|
|
+ <!-- 头部信息 -->
|
|
|
+ <view class="user_info">
|
|
|
+ <img :src="userinfo.portrait" />
|
|
|
+ <view class="info_wrap">
|
|
|
+ <view class="box_wrap">
|
|
|
+ <text>{{ record.user_name }}</text>
|
|
|
+ <text>{{ record.phone }}</text>
|
|
|
</view>
|
|
|
- <view
|
|
|
- class="right"
|
|
|
- @click="to_game_records"
|
|
|
- >
|
|
|
- <img src="https://img.shuimuai.com/m_icon_chengji%402x.png" />
|
|
|
- <text>成绩记录</text>
|
|
|
+ <view class="box_wrap info_right">
|
|
|
+ <text>{{ record.start_time }}</text>
|
|
|
+ <text>训练时间 : {{ record.play_time }}</text>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="down">
|
|
|
- <view>{{ record.att_average }}</view>
|
|
|
- <view>专注力得分</view>
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+ <div class="bran_wrap">
|
|
|
+ <img
|
|
|
+ src="http://img.shuimuai.com/report_ brain_coefficient.png"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ <div class="bran">
|
|
|
+ <p class="p_num">{{record.ratio}}</p>
|
|
|
+ <p class="p_text">智脑系数</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- 训练时长和训练设备 -->
|
|
|
- <view class="po1 padding-lr margin-top-xl">
|
|
|
+ <!-- <view class="po1 padding-lr margin-top-xl">
|
|
|
<van-row>
|
|
|
<van-col span="11">
|
|
|
<view>
|
|
@@ -48,7 +46,7 @@
|
|
|
</view>
|
|
|
</van-col>
|
|
|
</van-row>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
<view>
|
|
|
<van-divider
|
|
|
contentPosition="left"
|
|
@@ -65,48 +63,44 @@
|
|
|
|
|
|
<!-- 专注力维持区间、受干扰次数,专注力最大爆发值、专注力启动时长-->
|
|
|
<view class="margin-tb">
|
|
|
-
|
|
|
- <view class="detail">
|
|
|
- <view>
|
|
|
- <view>{{ record.scope_diff }}</view>
|
|
|
- <view>专注力维持区间</view>
|
|
|
+ <!-- 高专注力占比 -->
|
|
|
+ <view class="margin_left">
|
|
|
+ <view class="hight_pie_chart">
|
|
|
+ <mpvue-echarts
|
|
|
+ :echarts="echarts"
|
|
|
+ :onInit="hight_att_charts"
|
|
|
+ canvasId="demo-canvas1"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="left_content">
|
|
|
+ <view class="left_num">{{ record.height_absorbed }}%</view>
|
|
|
+ <view class="left_text">高专注力占比</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="detail">
|
|
|
- <view>
|
|
|
- <view>{{ record.interfere }}</view>
|
|
|
+ <!-- 数据详情 -->
|
|
|
+ <view class="margin_centent">
|
|
|
+ <view class="detail">
|
|
|
+ <te class="detail_num">{{ record.scope_diff }}</te>
|
|
|
+ <view>专注力维持区间</view>
|
|
|
+ </view>
|
|
|
+ <view class="detail">
|
|
|
+ <view class="detail_num">{{ record.interfere }}</view>
|
|
|
<view>受干扰次数</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="hight_pie_chart">
|
|
|
- <mpvue-echarts
|
|
|
- :echarts="echarts"
|
|
|
- :onInit="hight_att_charts"
|
|
|
- canvasId="demo-canvas1"
|
|
|
- />
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="detail">
|
|
|
- <view>
|
|
|
- <view>{{ record.burst }}</view>
|
|
|
+ <view class="detail">
|
|
|
+ <view class="detail_num">{{ record.burst }}</view>
|
|
|
<view>专注力最大爆发值</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="detail">
|
|
|
- <view>
|
|
|
- <view>{{ record.start }}</view>
|
|
|
+ <view class="detail">
|
|
|
+ <view class="detail_num">{{ record.start }}</view>
|
|
|
<view>专注力启动时长</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="detail">
|
|
|
- <view>
|
|
|
- <view>{{ record.height_absorbed }}%</view>
|
|
|
- <view>高专注力占比</view>
|
|
|
- </view>
|
|
|
+ <!-- 平均专注力 -->
|
|
|
+ <view class="margin_right ">
|
|
|
+ <view class="right_num">{{ record.att_average }}</view>
|
|
|
+ <view class="right_text">平均专注力</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
@@ -191,20 +185,24 @@
|
|
|
canvasId="demo-canvas-1"
|
|
|
/>
|
|
|
</view>
|
|
|
-
|
|
|
- <!-- <view class="sheet">-->
|
|
|
- <!-- <view class="left">-->
|
|
|
- <!-- <view>专注力训练设备: {{ record.name }}</view>-->
|
|
|
- <!-- <view>核销方式:-->
|
|
|
- <!-- <text v-if="record.consumption_type==1">次卡</text>-->
|
|
|
- <!-- <text v-if="record.consumption_type==2">时间卡</text>-->
|
|
|
- <!-- </view>-->
|
|
|
- <!-- <view>会员游玩时间: {{ record.play_time }}</view>-->
|
|
|
- <!-- </view>-->
|
|
|
- <!-- <view class="right">-->
|
|
|
- <!-- <view>专注力训练时长: {{ record.play_time }}</view>-->
|
|
|
- <!-- </view>-->
|
|
|
- <!-- </view>-->
|
|
|
+ <!-- 核销详情 -->
|
|
|
+ <view class="bar">
|
|
|
+ <view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="title">核销详情</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="sheet">
|
|
|
+ <view class="left">
|
|
|
+ <view>专注力训练设备: {{ record.name }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view>核销方式:
|
|
|
+ <text v-if="record.consumption_type==1">次卡</text>
|
|
|
+ <text v-if="record.consumption_type==2">时间卡</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<van-toast id="van-toast" />
|
|
|
|
|
|
</div>
|
|
@@ -219,6 +217,7 @@ import util, {
|
|
|
getHightPieChartOption,
|
|
|
getPieChartsOption,
|
|
|
getRadarChartOption,
|
|
|
+ timestampToTimeS,
|
|
|
} from "../../utils/index";
|
|
|
import { gameDetail, gameLineChart } from "../../requests/game";
|
|
|
import game_store from "../../store/game";
|
|
@@ -329,6 +328,8 @@ export default {
|
|
|
$this.record = $res.data;
|
|
|
console.log("成绩记录参数", $this.record);
|
|
|
$this.record.play_time = formatSeconds($this.record.play_time);
|
|
|
+ $this.record.start_time = timestampToTimeS($this.record.start_time);
|
|
|
+ console.log("训练时间", $this.record.start_time);
|
|
|
$this.record.height_absorbed = Math.ceil(
|
|
|
$this.record.height / $this.record.total * 100
|
|
|
);
|
|
@@ -440,6 +441,11 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+#report_container {
|
|
|
+ background: white;
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+}
|
|
|
/* 头部椭圆 */
|
|
|
.head {
|
|
|
width: 442px;
|
|
@@ -461,105 +467,146 @@ image.boy {
|
|
|
top: 45px;
|
|
|
}
|
|
|
|
|
|
-.user {
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
+.user_info {
|
|
|
+ width: 95%;
|
|
|
+ height: 51px;
|
|
|
+ display: flex;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ align-items: center;
|
|
|
+ padding-right: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ box-shadow: 0px 0px 10px rgba(51, 56, 74, 0.11);
|
|
|
+ border-radius: 5px;
|
|
|
|
|
|
-.user .up {
|
|
|
- width: 100%;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.user_info img {
|
|
|
+ display: inline-block;
|
|
|
+ width: 40px;
|
|
|
height: 40px;
|
|
|
- margin-top: 9px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 8px;
|
|
|
+}
|
|
|
+.user_info .info_wrap {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- color: #fff;
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
|
|
|
-.user .up .left {
|
|
|
- height: 40px;
|
|
|
+.user_info .box_wrap {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ color: #676767;
|
|
|
+}
|
|
|
+/* 智脑系数 */
|
|
|
+.bran_wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: 101px;
|
|
|
+ background-color: #fff;
|
|
|
display: flex;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
- justify-content: start;
|
|
|
}
|
|
|
-
|
|
|
-.user .up .left image {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- margin-left: 17px;
|
|
|
- margin-right: 8px;
|
|
|
+.bran_wrap img {
|
|
|
+ display: inline-block;
|
|
|
+ width: 60px;
|
|
|
+ height: 68px;
|
|
|
+ margin-right: 20px;
|
|
|
}
|
|
|
-
|
|
|
-.user .up .left view {
|
|
|
- height: 40px;
|
|
|
+.bran_wrap .bran {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.bran_wrap .bran .p_num {
|
|
|
+ color: #ffb72d;
|
|
|
+ font-size: 40px;
|
|
|
+ font-weight: 900;
|
|
|
+}
|
|
|
+.bran_wrap .bran .p_text {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 900;
|
|
|
+}
|
|
|
+/* 详细数据 */
|
|
|
+.margin-tb {
|
|
|
+ width: 95%;
|
|
|
+ height: 110px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
justify-content: space-between;
|
|
|
+ background: #f3f3f3;
|
|
|
+ border-radius: 5px;
|
|
|
}
|
|
|
-
|
|
|
-.user .up .left view text:first-child {
|
|
|
- font-size: 15px;
|
|
|
- font-weight: bold;
|
|
|
+.margin-tb .margin_left {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
|
|
|
-.user .up .left view text:last-child {
|
|
|
- font-size: 13px;
|
|
|
+.margin-tb .margin_left .left_content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #676767;
|
|
|
}
|
|
|
-
|
|
|
-.user .up .right {
|
|
|
- height: 40px;
|
|
|
+.margin-tb .margin_left .left_content .left_num {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 900;
|
|
|
}
|
|
|
-
|
|
|
-.user .up .right image {
|
|
|
- width: 14px;
|
|
|
- height: 15px;
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 4px;
|
|
|
+.margin-tb .margin_left .left_content .left_text {
|
|
|
+ font-size: 8px;
|
|
|
}
|
|
|
-
|
|
|
-.user .up .right text {
|
|
|
- font-size: 12px;
|
|
|
- text-decoration: underline;
|
|
|
- margin-right: 10px;
|
|
|
+.margin-tb .margin_centent {
|
|
|
+ flex: 3;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-around;
|
|
|
}
|
|
|
-
|
|
|
-.user .down {
|
|
|
- width: 100%;
|
|
|
- height: 82px;
|
|
|
+.margin-tb .margin_right {
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
- justify-content: start;
|
|
|
+ color: #90df24;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 3px;
|
|
|
}
|
|
|
-
|
|
|
-.user .down view:first-child {
|
|
|
- font-size: 45px;
|
|
|
- color: #ffd800;
|
|
|
- font-weight: bold;
|
|
|
+.margin-tb .margin_right .right_num {
|
|
|
+ font-size: 25px;
|
|
|
+ font-weight: 900;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
-
|
|
|
-.user .down view:last-child {
|
|
|
+.margin-tb .margin_right .right_text {
|
|
|
+ width: 90%;
|
|
|
+ height: 20px;
|
|
|
+ background: #90df24;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20px;
|
|
|
font-size: 10px;
|
|
|
- color: #c7c4d8;
|
|
|
- margin-top: -5px;
|
|
|
+ border-radius: 1px;
|
|
|
}
|
|
|
-
|
|
|
-/* 详细数据 */
|
|
|
-.margin-tb {
|
|
|
+.margin-tb .detail {
|
|
|
+ width: 48%;
|
|
|
+ height: 50%;
|
|
|
display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- flex-wrap: wrap;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #676767;
|
|
|
+ font-size: 11px;
|
|
|
}
|
|
|
-
|
|
|
-.detail {
|
|
|
- width: 30%;
|
|
|
- height: 102px;
|
|
|
- /*display: flex;*/
|
|
|
- /*align-items: center;*/
|
|
|
- /*justify-content: space-around;*/
|
|
|
+.margin-tb .detail .detail_num {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 900;
|
|
|
}
|
|
|
-
|
|
|
-.detail view {
|
|
|
+/* .detail view {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
@@ -571,7 +618,7 @@ image.boy {
|
|
|
.detail view view:first-child {
|
|
|
color: #000;
|
|
|
font-size: 30px;
|
|
|
-}
|
|
|
+} */
|
|
|
|
|
|
/* 小标题 */
|
|
|
.bar {
|
|
@@ -645,10 +692,10 @@ image.boy {
|
|
|
|
|
|
.hight_pie_chart {
|
|
|
/* margin: 0 auto; */
|
|
|
- width: 30%;
|
|
|
- height: 102px;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
background: #f3f3f3;
|
|
|
- margin-top: 5px;
|
|
|
+ margin-top: 15px;
|
|
|
/*border-radius: 10px;*/
|
|
|
/*box-shadow: 0px 6px 11px #dadada;*/
|
|
|
}
|
|
@@ -664,7 +711,7 @@ image.boy {
|
|
|
|
|
|
.sheet .left,
|
|
|
.sheet .right {
|
|
|
- height: 95px;
|
|
|
+ height: 15px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|