program/src/pages/report/index.vue

<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="bar">
      <view>
        <view class="line"></view>
        <view class="title">数据详情</view>
      </view>
    </view>
    <view class="detail">
      <view>
        <view>{{ record.att_max }}</view>
        <view>专注力最高分</view>
      </view>
      <view>
        <view>{{ record.med_max }}</view>
        <view>放松度最高值</view>
      </view>
      <view>
        <view>{{ record.med_average }}</view>
        <view>放松度均值</view>
      </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="conclution">专注力良好，你的表现比一般人好。专注力波动较大，比较容易被外界干扰。你大多数时候不能很好地集中注意力，请继续加油。</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>

  </div>
</template>

<script>
import mpvueEcharts from 'mpvue-echarts'
import echarts from '../../../static/echarts.min';
import util from '../../utils/index'
import {gameDetail, gameLineChart} from "../../requests/game";
import game_store from "../../store/game";

var att_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 后可以自动绑定触摸操作
}

export default {
  name: "index_container",
  components: {
    mpvueEcharts
  },
  data() {
    return {
      // 0:未选择 1：时间 2：次数
      // 折线图
      attCharts: initAttChart,
      echarts,
      record: {},
      userinfo: {},
      record_id: 0
    }
  },
  methods: {
    //  获取游戏报告
    get_report($record_id) {
      gameDetail($record_id).then((res) => {
        let $res = res.data;
        $this.record = $res.data
      })
    },
    get_game_line($record_id) {
      let $params = {
        'game_record_id': $record_id,
      }
      gameLineChart($params).then((res) => {
        let $res = res.data;
        setTimeout(() => {
          let $option = util.getLineOption($res.data.line, [0])
          att_charts.setOption($option)
        }, 1000)
      })
    },
    to_game_records() {
      mpvue.navigateTo({
        url: "/pages/game_record/main"
      })
    }
  }
  ,
  mounted() {
    $this.userinfo = wx.getStorageSync('userinfo')
    $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
    console.log($this.record_id)
  }
}
</script>

<style scoped>
@import "index.css";
</style>