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="po1 padding-lr margin-top-xl">
      <van-row>
        <van-col span="11">
          <view>
            <text>训练时长</text>
            <text class="text-bold text-xl"> &nbsp; {{ record.play_time }}</text>
          </view>
        </van-col>

        <van-col
          span="11"
          offset="2"
        >
          <view>
            <text>训练设备</text>
            <text class="text-bold text-xl">&nbsp; {{ 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>