<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_absorbed }}%</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, 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; console.log("成绩记录参数", $this.record); $this.record.play_time = formatSeconds($this.record.play_time); $this.record.height_absorbed = Math.ceil( $this.record.height / $this.record.total * 100 ); let $options = getHightPieChartOption( $this.record.height, $this.record.total ); 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>