<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 class="margin-tb"> <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=""> <view class="bar"> <view> <view class="line"></view> <view class="title">报告分析</view> </view> </view> <view class="conclution">{{ record.content }}</view> <view class="conclution">{{ record.content2 }}</view> <view class="bar"> <view> <view class="line"></view> <view class="title">训练建议</view> </view> </view> <view class="conclution">{{ record.advise }}</view> </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="cu-bar bg-white"> <view class="action"> <text class="cuIcon-titles text-primary"></text> <text class="">专注力数值累计比例</text> </view> </view> <view class="chart"> <mpvue-echarts :echarts="echarts" :onInit="pie_charts" 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>--> <van-toast id="van-toast"/> </div> </template> <script> import mpvueEcharts from 'mpvue-echarts' import echarts from '../../../static/echarts.min'; import util, { filterPieData, formatSeconds, getHightPieChartOption, getPieChartsOption, 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, $pie_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 后可以自动绑定触摸操作 } function initPieChart(canvas, width, height) { $pie_charts = echarts.init(canvas, null, { width: width, height: height, }); canvas.setChart($pie_charts); var option = getPieChartsOption(); // ECharts 配置项 $pie_charts.setOption(option); return $pie_charts; // 返回 chart 后可以自动绑定触摸操作 } export default { name: "index_container", components: { mpvueEcharts }, data() { return { // 0:未选择 1:时间 2:次数 // 折线图 attCharts: initAttChart, hight_att_charts: initHightPieChart, radar_charts: initRadarChart, pie_charts: initPieChart, 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) => { Toast.clear() let $res = res.data; $this.record = $res.data $this.record.play_time = formatSeconds($this.record.play_time) let $options = getHightPieChartOption($this.record.height) hight_att_pie_charts.setOption($options) //设置雷达图 $options = getRadarChartOption([ $this.record.att_average, $this.record.att_scope, $this.record.att_burst, $this.record.att_interfere, $this.record.att_start, $this.record.att_height ]) radar_charts.setOption($options) let $pie_data = filterPieData($this.record.level); let $pie_option = getPieChartsOption($pie_data); $pie_charts.setOption($pie_option); //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) } }, (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) }, 800) }, (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; } .content_card { border-radius: 10px; box-shadow: 0px 6px 11px #dadada; } </style>