|
@@ -1,588 +0,0 @@
|
|
|
-<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>
|
|
|
- <view class="right" @click="to_game_records">
|
|
|
- <img src="https://img.shuimuai.com/m_icon_chengji%402x.png"/>
|
|
|
- <text>成绩记录</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="down">
|
|
|
- <view>{{ record.att_average }}</view>
|
|
|
- <view>专注力得分</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 训练时长和训练设备-->
|
|
|
- <view class="po1 padding-lr margin-top-xl">
|
|
|
- <van-row>
|
|
|
- <van-col span="11">
|
|
|
- <view>
|
|
|
- <text>训练时长</text>
|
|
|
- <text class="text-bold text-xl"> {{ record.play_time }}</text>
|
|
|
- </view>
|
|
|
- </van-col>
|
|
|
-
|
|
|
- <van-col span="11" offset="2">
|
|
|
- <view>
|
|
|
- <text>训练设备</text>
|
|
|
- <text class="text-bold text-xl"> {{ record.name }}</text>
|
|
|
- </view>
|
|
|
- </van-col>
|
|
|
- </van-row>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <van-divider contentPosition="left" borderColor="#E98F36">
|
|
|
- <van-image src="https://img.shuimuai.com/line.png" alt="" width="40" height="40"></van-image>
|
|
|
- </van-divider>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 专注力维持区间、受干扰次数,专注力最大爆发值、专注力启动时长-->
|
|
|
- <view>
|
|
|
- <van-row>
|
|
|
- <van-col span="16">
|
|
|
- <van-row>
|
|
|
- <van-col span="12">
|
|
|
- <view class="detail">
|
|
|
- <view>
|
|
|
- <view>{{ record.scope_diff }}</view>
|
|
|
- <view>专注力维持区间</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </van-col>
|
|
|
- <van-col span="12">
|
|
|
- <view class="detail">
|
|
|
- <view>
|
|
|
- <view>{{ record.interfere }}</view>
|
|
|
- <view>受干扰次数</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </van-col>
|
|
|
- </van-row>
|
|
|
-
|
|
|
- <van-row>
|
|
|
- <van-col span="12">
|
|
|
- <view class="detail">
|
|
|
- <view>
|
|
|
- <view>{{ record.burst }}</view>
|
|
|
- <view>专注力最大爆发值</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </van-col>
|
|
|
- <van-col span="12">
|
|
|
- <view class="detail">
|
|
|
- <view>
|
|
|
- <view>{{ record.start }}</view>
|
|
|
- <view>专注力启动时长</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </van-col>
|
|
|
- </van-row>
|
|
|
- </van-col>
|
|
|
- <van-col span="5">
|
|
|
- <view class="text-center">
|
|
|
- <view class="hight_pie_chart">
|
|
|
- <mpvue-echarts :echarts="echarts" :onInit="hight_att_charts" canvasId="demo-canvas1"/>
|
|
|
- </view>
|
|
|
- <view class="detail">
|
|
|
- <view>
|
|
|
- <view>{{ record.height }}%</view>
|
|
|
- <view>高专注力占比</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </van-col>
|
|
|
- </van-row>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="bar">
|
|
|
- <view>
|
|
|
- <view class="line"></view>
|
|
|
- <view class="title">专注力要素分析</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- <view class="radar_chart">
|
|
|
- <mpvue-echarts :echarts="echarts" :onInit="radar_charts" canvasId="demo-canvas2"/>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <view class="bar">
|
|
|
- <view>
|
|
|
- <view class="line"></view>
|
|
|
- <view class="title">基本脑波</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="chart">
|
|
|
- <mpvue-echarts :echarts="echarts" :onInit="attCharts" canvasId="demo-canvas"/>
|
|
|
- </view>
|
|
|
- <view class="section_container" v-if="is_cut">
|
|
|
- <van-tabs
|
|
|
- :active="0"
|
|
|
- color="#6858C4"
|
|
|
- type="card"
|
|
|
- @change="changeMin"
|
|
|
- >
|
|
|
- <van-tab
|
|
|
- :name="index"
|
|
|
- :title="(5*index)+'-'+(5*(index+1)) + '分钟'" v-for="(section,index) in data_section"
|
|
|
- :key="index"></van-tab>
|
|
|
- </van-tabs>
|
|
|
- </view>
|
|
|
- <view class="conclution">
|
|
|
- <text class="conclution_title">分析</text>
|
|
|
- : {{ record.content }}
|
|
|
- </view>
|
|
|
- <view class="conclution">
|
|
|
- <text class="conclution_title">建议</text>
|
|
|
- : {{ record.advise }}
|
|
|
- </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>核销方式:
|
|
|
- <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>
|
|
|
- <van-toast id="van-toast"/>
|
|
|
-
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import mpvueEcharts from 'mpvue-echarts'
|
|
|
-import echarts from '../../../static/echarts.min';
|
|
|
-import util, {formatSeconds, getHightPieChartOption, getRadarChartOption} from '../../utils/index'
|
|
|
-import {gameDetail, gameLineChart} from "../../requests/game";
|
|
|
-import game_store from "../../store/game";
|
|
|
-import Toast from '../../../static/vant/toast/toast';
|
|
|
-
|
|
|
-var att_charts,
|
|
|
- hight_att_pie_charts,
|
|
|
- radar_charts,
|
|
|
- $this
|
|
|
-
|
|
|
-// 大脑图表初始化
|
|
|
-function initAttChart(canvas, width, height) {
|
|
|
- att_charts = echarts.init(canvas, null, {
|
|
|
- width: width,
|
|
|
- height: height
|
|
|
- });
|
|
|
- canvas.setChart(att_charts);
|
|
|
-
|
|
|
- var option = util.getLineOption([0], [0]); // ECharts 配置项
|
|
|
-
|
|
|
- att_charts.setOption(option);
|
|
|
-
|
|
|
- return att_charts; // 返回 chart 后可以自动绑定触摸操作
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-// 大脑图表初始化
|
|
|
-function initHightPieChart(canvas, width, height) {
|
|
|
- hight_att_pie_charts = echarts.init(canvas, null, {
|
|
|
- width: width,
|
|
|
- height: height
|
|
|
- });
|
|
|
- canvas.setChart(hight_att_pie_charts);
|
|
|
-
|
|
|
- var option = getHightPieChartOption(0); // ECharts 配置项
|
|
|
-
|
|
|
- hight_att_pie_charts.setOption(option);
|
|
|
-
|
|
|
- return hight_att_pie_charts; // 返回 chart 后可以自动绑定触摸操作
|
|
|
-}
|
|
|
-
|
|
|
-// 大脑图表初始化
|
|
|
-function initRadarChart(canvas, width, height) {
|
|
|
- radar_charts = echarts.init(canvas, null, {
|
|
|
- width: width,
|
|
|
- height: height
|
|
|
- });
|
|
|
- canvas.setChart(radar_charts);
|
|
|
-
|
|
|
- var option = getRadarChartOption(0); // ECharts 配置项
|
|
|
-
|
|
|
- radar_charts.setOption(option);
|
|
|
-
|
|
|
- return radar_charts; // 返回 chart 后可以自动绑定触摸操作
|
|
|
-}
|
|
|
-
|
|
|
-export default {
|
|
|
- name: "index_container",
|
|
|
- components: {
|
|
|
- mpvueEcharts
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 0:未选择 1:时间 2:次数
|
|
|
- // 折线图
|
|
|
- attCharts: initAttChart,
|
|
|
- hight_att_charts: initHightPieChart,
|
|
|
- radar_charts: initRadarChart,
|
|
|
- echarts,
|
|
|
- record: {},
|
|
|
- userinfo: {},
|
|
|
- record_id: 0,
|
|
|
-
|
|
|
- //是否截断数据
|
|
|
- is_cut: false,
|
|
|
- //数据截断数
|
|
|
- data_section: 0,
|
|
|
- //数据集合
|
|
|
- data_lines: []
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 获取游戏报告
|
|
|
- get_report($record_id) {
|
|
|
- $this.record = {}
|
|
|
- Toast.loading({
|
|
|
- forbidClick: true,
|
|
|
- message: "加载中",
|
|
|
- duration: 0
|
|
|
- })
|
|
|
- setTimeout(() => {
|
|
|
- gameDetail($record_id).then((res) => {
|
|
|
- console.log('get_game_detail', res)
|
|
|
- Toast.clear()
|
|
|
- let $res = res.data;
|
|
|
- $this.record = $res.data
|
|
|
- let $options = getHightPieChartOption($this.record.height)
|
|
|
- hight_att_pie_charts.setOption($options)
|
|
|
- //5分钟阶段
|
|
|
- let $five_min = 5 * 60
|
|
|
- $this.is_cut = $this.record.play_time > $five_min
|
|
|
- if ($this.is_cut) {
|
|
|
- //截断得数量
|
|
|
- $this.data_section = Math.ceil($this.record.play_time / $five_min)
|
|
|
- }
|
|
|
- $this.record.play_time = formatSeconds($this.record.play_time)
|
|
|
- },
|
|
|
- (err) => {
|
|
|
- Toast.fail('错误代码:' + res.code + ',联系客服')
|
|
|
- }
|
|
|
- )
|
|
|
- }, 800)
|
|
|
- },
|
|
|
- get_game_line($record_id) {
|
|
|
- let $params = {
|
|
|
- 'game_record_id': $record_id,
|
|
|
- }
|
|
|
- gameLineChart($params).then((res) => {
|
|
|
- let $res = res.data;
|
|
|
- let $option = {}
|
|
|
- setTimeout(() => {
|
|
|
- let $line_data = $res.data.line
|
|
|
- if ($this.is_cut) {
|
|
|
- //需要截断数据
|
|
|
- let $more_than_count = $line_data.length % $this.data_section
|
|
|
- let i = 0
|
|
|
- //根据多出来的数 删除结尾得数量
|
|
|
- for (i = 0; i < $more_than_count; i++) {
|
|
|
- $line_data.pop()
|
|
|
- }
|
|
|
-
|
|
|
- $this.data_lines = []
|
|
|
- //获取每一组得数据长度
|
|
|
- let $item_len = $line_data.length / $this.data_section
|
|
|
- for (i = 0; i < $this.data_section; i++) {
|
|
|
- $this.data_lines.push($line_data.slice(i * $item_len, (i + 1) * $item_len))
|
|
|
- }
|
|
|
-
|
|
|
- $option = util.getLineOption($this.data_lines[0], [0])
|
|
|
- } else {
|
|
|
- $option = util.getLineOption($line_data, [0])
|
|
|
- }
|
|
|
- att_charts.setOption($option)
|
|
|
- }, 1000)
|
|
|
- },
|
|
|
- (err) => {
|
|
|
- Toast.fail('错误代码:' + res.code + ',联系客服')
|
|
|
- })
|
|
|
- },
|
|
|
- to_game_records() {
|
|
|
- mpvue.navigateTo({
|
|
|
- url: "/pages/game_record/main"
|
|
|
- })
|
|
|
- },
|
|
|
- // 切换时间查看线 数据
|
|
|
- changeMin($e) {
|
|
|
- let $index = $e.mp.detail.name
|
|
|
- let $option = util.getLineOption($this.data_lines[$index], [0])
|
|
|
- att_charts.setOption($option)
|
|
|
- }
|
|
|
- }
|
|
|
- ,
|
|
|
- mounted() {
|
|
|
- $this.userinfo = wx.getStorageSync('userinfo')
|
|
|
- //设置游戏时间长
|
|
|
- wx.removeStorageSync('played_time')
|
|
|
- $this.get_report($this.record_id)
|
|
|
- $this.get_game_line($this.record_id)
|
|
|
- },
|
|
|
- created() {
|
|
|
- $this = this;
|
|
|
- },
|
|
|
- onLoad(options) {
|
|
|
- $this.record_id = options.id ? options.id : game_store.getters.getGameRecordId()
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-/* 头部椭圆 */
|
|
|
-.head {
|
|
|
- width: 442px;
|
|
|
- height: 385px;
|
|
|
- background-color: #4b3ab0;
|
|
|
- border-radius: 50%;
|
|
|
- position: absolute;
|
|
|
- left: -34px;
|
|
|
- top: -252px;
|
|
|
- z-index: -1;
|
|
|
-}
|
|
|
-
|
|
|
-/* 头部个人信息 */
|
|
|
-image.boy {
|
|
|
- width: 110px;
|
|
|
- height: 111px;
|
|
|
- position: absolute;
|
|
|
- left: 225px;
|
|
|
- top: 45px;
|
|
|
-}
|
|
|
-
|
|
|
-.user {
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.user .up {
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- margin-top: 9px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-.user .up .left {
|
|
|
- height: 40px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: start;
|
|
|
-}
|
|
|
-
|
|
|
-.user .up .left image {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- margin-left: 17px;
|
|
|
- margin-right: 8px;
|
|
|
-}
|
|
|
-
|
|
|
-.user .up .left view {
|
|
|
- height: 40px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-
|
|
|
-.user .up .left view text:first-child {
|
|
|
- font-size: 15px;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.user .up .left view text:last-child {
|
|
|
- font-size: 13px;
|
|
|
-}
|
|
|
-
|
|
|
-.user .up .right {
|
|
|
- height: 40px;
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-.user .up .right image {
|
|
|
- width: 14px;
|
|
|
- height: 15px;
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 4px;
|
|
|
-}
|
|
|
-
|
|
|
-.user .up .right text {
|
|
|
- font-size: 12px;
|
|
|
- text-decoration: underline;
|
|
|
- margin-right: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.user .down {
|
|
|
- width: 100%;
|
|
|
- height: 82px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: start;
|
|
|
-}
|
|
|
-
|
|
|
-.user .down view:first-child {
|
|
|
- font-size: 45px;
|
|
|
- color: #FFD800;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.user .down view:last-child {
|
|
|
- font-size: 10px;
|
|
|
- color: #C7C4D8;
|
|
|
- margin-top: -5px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 详细数据 */
|
|
|
-.detail {
|
|
|
- width: 100%;
|
|
|
- height: 102px;
|
|
|
- /*display: flex;*/
|
|
|
- /*align-items: center;*/
|
|
|
- /*justify-content: space-around;*/
|
|
|
-}
|
|
|
-
|
|
|
-.detail view {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- color: #6C6C6C;
|
|
|
- font-size: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.detail view view:first-child {
|
|
|
- color: #000;
|
|
|
- font-size: 30px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 小标题 */
|
|
|
-.bar {
|
|
|
- width: 100%;
|
|
|
- height: 10px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 7px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin: 11px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.bar view {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: start;
|
|
|
-}
|
|
|
-
|
|
|
-.conclution {
|
|
|
- width: 100%;
|
|
|
- padding: 5px 19px 8px;
|
|
|
- font-size: 12px;
|
|
|
- color: #6c6c6c;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.conclution_title {
|
|
|
- font-weight: 600;
|
|
|
- color: #000;
|
|
|
-}
|
|
|
-
|
|
|
-.bar .line {
|
|
|
- width: 4px;
|
|
|
- height: 15px;
|
|
|
- background-color: #5D4DB8;
|
|
|
- margin-right: 7px;
|
|
|
-}
|
|
|
-
|
|
|
-.bar .title {
|
|
|
- color: #010101;
|
|
|
- font-size: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 图表 */
|
|
|
-#mychart-dom-multi-line {
|
|
|
- width: 360px;
|
|
|
- height: 193px;
|
|
|
-}
|
|
|
-
|
|
|
-.chart {
|
|
|
- margin: 0 auto;
|
|
|
- width: 360px;
|
|
|
- height: 193px;
|
|
|
- background: #f3f3f3;
|
|
|
- opacity: 0.6;
|
|
|
- border-radius: 10px;
|
|
|
- box-shadow: 0px 6px 11px #dadada;
|
|
|
-}
|
|
|
-
|
|
|
-/*雷达图*/
|
|
|
-.radar_chart{
|
|
|
- margin: 0 auto;
|
|
|
- width: 360px;
|
|
|
- height: 293px;
|
|
|
- background: #f3f3f3;
|
|
|
- opacity: 0.6;
|
|
|
- border-radius: 10px;
|
|
|
- box-shadow: 0px 6px 11px #dadada;
|
|
|
-}
|
|
|
-
|
|
|
-.hight_pie_chart {
|
|
|
- margin: 0 auto;
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- background: #f3f3f3;
|
|
|
- /*border-radius: 10px;*/
|
|
|
- /*box-shadow: 0px 6px 11px #dadada;*/
|
|
|
-}
|
|
|
-
|
|
|
-/* 核销详情 */
|
|
|
-.sheet {
|
|
|
- color: #6D6D6D;
|
|
|
- font-size: 12px;
|
|
|
- display: flex;
|
|
|
- padding: 0 16px;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.sheet .left,
|
|
|
-.sheet .right {
|
|
|
- height: 95px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-
|
|
|
-.sheet .left {
|
|
|
- width: 195px;
|
|
|
-}
|
|
|
-</style>
|