program/src/pages/report/index_bak.vue

<template>
  <div id="report_container">

    <!-- 头部信息 -->
    <view class="user_info">
      <img :src="userinfo.portrait"/>
      <view class="info_wrap">
        <view class="box_wrap margin-bottom-sm box_wrap_left">
          <text class="text-bold text-xl">{{ record.user_name }}</text>
          <text class="info_right">{{ record.start_time }}</text>
        </view>
        <view class="box_wrap box_wrap_right">
          <text>{{ record.phone }}</text>
          <text class="info_right">训练时间：{{ record.play_time }}</text>
        </view>

      </view>
    </view>

    <div v-if="report_show">
      <div class="bran_wrap margin-bottom">
        <img
          src="http://img.shuimuai.com/report_ brain_coefficient.png"
          alt=""
        >
        <div class="bran">
          <p class="p_num">{{ record.ratio }}</p>
          <p class="p_text">智脑系数</p>
        </div>
      </div>
      <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">
        <!-- 高专注力占比 -->
        <view class="margin_left">
          <view class="hight_pie_chart">
            <mpvue-echarts
              :echarts="echarts"
              :onInit="hight_att_charts"
              canvasId="demo-canvas-interfere"
            />
          </view>
          <view class="left_content">
            <view class="left_num">{{ record.height_absorbed }}<text class="textLil text-gray">%</text></view>
            <view class="left_text">高专注<br/>&nbsp;占比</view>
          </view>
        </view>
        <!-- 数据详情 -->
        <view class="margin_centent">
          <view class="detail">
            <te class="detail_num">{{ record.scope_diff }}</te>
            <view>专注力维持区间</view>
          </view>
          <view class="detail">
            <view class="detail_num">{{ record.interfere }}<text class="textLil text-gray">次</text></view>
            <view>受干扰次数</view>
          </view>
          <view class="detail">
            <view class="detail_num">{{ record.burst }}</view>
            <view>专注力最大爆发值</view>
          </view>
          <view class="detail">
            <view class="detail_num">{{ record.start }}<text class="textLil text-gray">秒</text></view>
            <view>专注力启动时长</view>
          </view>
        </view>

        <!-- 平均专注力 -->
        <view class="margin_right ">
          <view class="right_num">{{ record.att_average_big }}<text class="text-sm">{{ record.att_average_lil }}</text></view>
          <view class="right_text">专注力平均值</view>
        </view>

        <view class="margin_right ">
          <view class="right_num">{{ record.average_med }}</view>
          <view class="right_text">放松度平均值</view>
        </view>

      </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="divide_line"></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="divide_line"></view>

        <view class="bar">
          <view>
            <view class="line"></view>
            <view class="title">训练建议</view>
          </view>
        </view>
        <view class="conclution">{{ record.advise }}</view>

        <view class="divide_line"></view>
      </view>

      <view class="bar">
        <view>
          <view class="line"></view>
          <view class="title">专注力数值曲线</view>
        </view>
        <view class="label">
          <view>
            <view class="dot dot-Att"></view>
            <text class="name">Att(专注度)</text>
          </view>
          <view>
            <view class="dot dot-Med"></view>
            <text class="name">Med(放松度)</text>
          </view>
          <view>
            <view class="dot dot-Amp"></view>
            <text class="name">Amp(和谐度)</text>
          </view>
        </view>
      </view>

      <view class="chart chart_line">
        <mpvue-echarts
          :echarts="echarts"
          :onInit="attCharts"
          canvasId="demo-canvas"
        />
      </view>
      <view
        class="section_container"
        v-if="is_cut"
      >
        <van-tabs
          :active="0"
          color="#6858C4"
          @change="changeMin"
          :swipe-threshold="4"
          line-width=54px
        >
          <van-tab
            :name="index"
            :title="(2*index)+'-'+(2*(index+1)) + '分钟'"
            v-for="(section,index) in data_section"
            :key="index"
          ></van-tab>
        </van-tabs>
      </view>
      <view class="divide_line" style="margin-top: 20px"></view>

      <view class="bar">
        <view>
          <view class="line"></view>
          <view class="title">专注力数值累计比例</view>
        </view>
      </view>

      <view class="flexBoxLand">
        <view>
          <view class="chart_circle">
            <mpvue-echarts
              :echarts="echarts"
              :onInit="pie_charts"
              canvasId="demo-canvas-1"
            />
          </view>
          <view class="left_content">
            <view class="left_text">专注力数值</view>
            <view class="left_text">比例</view>
          </view>

        </view>


        <!-- 右侧标签 -->
        <view class="flexBoxVer">
          <view class="flexBoxLand colorChangeWrap">
            <view
              class="colorChange"
              id="changeFirst"
            >81-100
            </view>
            <view class="colorChangeTime">{{ record.level_time4 }}（{{ record.level_ratio4 }}%）</view>
          </view>

          <view class="flexBoxLand colorChangeWrap">
            <view
              class="colorChange"
              id="changeSecond"
            >61-80
            </view>
            <view class="colorChangeTime">{{ record.level_time3 }}（{{ record.level_ratio3 }}%）</view>
          </view>

          <view class="flexBoxLand colorChangeWrap">
            <view
              class="colorChange"
              id="changeThird"
            >41-60
            </view>
            <view class="colorChangeTime">{{ record.level_time2 }}（{{ record.level_ratio2 }}%）</view>
          </view>

          <view class="flexBoxLand colorChangeWrap">
            <view
              class="colorChange"
              id="changeFourth"
            >21-40
            </view>
            <dview class="colorChangeTime">{{ record.level_time1 }}（{{ record.level_ratio1 }}%）</dview>
          </view>

          <view class="flexBoxLand">
            <view
              class="colorChange"
              id="changeFifth"
            >00-20
            </view>
            <view class="colorChangeTime">{{ record.level_time0 }}（{{ record.level_ratio0 }}%）</view>
          </view>
        </view>
      </view>

      <view class="divide_line"></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>
        <view class="right">
          <view>核销方式：
            <text v-if="record.consumption_type==1">次卡</text>
            <text v-if="record.consumption_type==2">时间卡</text>
          </view>
        </view>
      </view>

      <view class="divide_line"></view>

      <!-- 专注力变化看板 -->
    <view class="absorbed_change">
      <view class="bar">
        <view class="interfere_title_wrap">
          <view class="line"></view>
          <view class="title">专注力变化分析</view>
        </view>
      </view>
      <!-- 看板一 干扰 -->
      <view class="flex justify-center">
        <view class="interfere_wrap">
          <view class="interfere">
            <img
              src="http://img.shuimuai.com/program_interfere_log.png"
              alt=""
              class="interfere_logo"
            >
            <view class="interfere_text">
              受干扰次数:
              <title class="interfere_text_num"> {{record.interfere}}</title>
              次
            </view>
          </view>
          <!-- 表图 -->
          <view class="interfere_echarts_wrap">
            <view class="interfere_echarts">
              <mpvue-echarts
                :echarts="echarts"
                :onInit="interfere_charts"
                canvasId="demo-canvas-4"
              />
            </view>
            <view class="interfere_echarts_bottom">
              <text>0</text>
              <text>2</text>
              <text>4</text>
              <text>6</text>
              <text>8</text>
              <text>10</text>
              <text>12</text>
              <text>14</text>
              <text>16</text>
              <text>18</text>
              <text>20</text>
            </view>
          </view>
          <view class="interfere_footer">
            <title class="interfere_footer_logo"></title>专注力干扰
          </view>
        </view>
      </view>  

      <!-- 调整能力分析 -->
      <view class="flex justify-center">
        <view class="adjustment_warp">
          <view class="adjustment_title">
            <img
              src="http://img.shuimuai.com/program_rise_log.png"
              alt=""
              class="adjustment_title_logo"
            >
            <text>调整能力分析</text>
          </view>
          <!-- 表图 -->
          <view class="adjustment_echarts_wrap">
            <view class="adjustment_echarts">
              <mpvue-echarts
                :echarts="echarts"
                :onInit="adjustment_charts"
                canvasId="demo-canvas-5"
              />
            </view>
            <view class="adjustment_echarts_bottom">
              <text>0</text>
              <text>2</text>
              <text>4</text>
              <text>6</text>
              <text>8</text>
              <text>10</text>
              <text>12</text>
              <text>14</text>
              <text>16</text>
              <text>18</text>
              <text>20</text>
            </view>
          </view>
          <view class="adjustment_footer">
            <view class="adjustment_footer_logo"></view>专注力上升
          </view>
        </view>
      </view>

      <!-- 爆发值和调整时间 -->
      <view class="absorbed_change_footer">
        <view class="footer_text">
          最大爆发值:
          <text class="footer_text_W">{{ record.burst }}</text>
        </view>
        <view class="footer_text">
          平均调整时间:
          <text class="footer_text_W">{{ record.burstTime}}</text>
          s
        </view>
      </view>

    </view>


      <!-- Aipha/Beta脑波变化曲线图 -->
      <view class="absorbed_change">
        <view class="bar">
          <view class="interfere_title_wrap">
            <view class="line"></view>
            <view class="title">Alpha/Beta脑波变化曲线图</view>
          </view>
          <view class="label_up">
            <view>
              <view class="dot dot-Low-Alpha"></view>
              <text class="name">Low-Alpha</text>
            </view>
            <view>
              <view class="dot dot-High-Alpha"></view>
              <text class="name">High-Alpha</text>
            </view>
            <view style="margin-right:5px">
              <view class="dot dot-Low-Beta"></view>
              <text class="name">Low-Beta</text>
            </view>
            <view>
              <view class="dot dot-High-Beta"></view>
              <text class="name">High-Beta</text>
            </view>
          </view>
        </view>

        <view class="chart chart_line">
          <mpvue-echarts
            :echarts="echarts"
            :onInit="alpha_betaCharts"
            canvasId="demo-canvas-a1"
          />
        </view>
        <view
          class="section_container"
          v-if="is_cut"
        >
          <van-tabs
            :active="0"
            color="#6858C4"
            @change="changeABMin"
            :swipe-threshold="4"
            line-width=54px
          >
            <van-tab
              :name="index"
              :title="(2*index)+'-'+(2*(index+1)) + '分钟'"
              v-for="(section,index) in data_section"
              :key="index"
            ></van-tab>
          </van-tabs>
        </view>
      </view>
      <!-- Delta/theta脑波变化曲线图 -->
      <!-- <view class="absorbed_change ">
        <view class="bar">
          <view class="interfere_title_wrap">
            <view class="line"></view>
            <view class="title">Delta/Theta脑波变化曲线图</view>
          </view>
          <view class="label">
            <view>
              <view class="dot dot-Delta"></view>
              <text class="name">Delta</text>
            </view>
            <view>
              <view class="dot dot-Theta"></view>
              <text class="name">Theta</text>
            </view>
          </view>
        </view>

        <view class="chart chart_line">
          <mpvue-echarts
            :echarts="echarts"
            :onInit="delta_thetaCharts"
            canvasId="demo-canvas-a2"
          />
        </view>
        <view
          class="section_container"
          v-if="is_cut"
        >
          <van-tabs
            :active="0"
            color="#6858C4"
            @change="changeDTMin"
            :swipe-threshold="4"
            line-width=54px
          >
            <van-tab
              :name="index"
              :title="(2*index)+'-'+(2*(index+1)) + '分钟'"
              v-for="(section,index) in data_section"
              :key="index"
            ></van-tab>
          </van-tabs>
        </view>
      </view> -->
    </div>

    <div v-if="!report_show" class="boxVer margin-top-xl">
      <img src="https://img.shuimuai.com/time_short.png" class="margin-bottom-xl" style="width: 73px;height: 83px;">
      <view class="conclution margin-top-xl">数据传输异常,水母星球AI数据系统无法进行训练分析,艾米正在紧急联系星球指挥官。</view>
    </div>

    <van-toast id="van-toast"/>

    <!-- 五角图解释弹窗 -->
    <view :hidden="!is_explainShow">
      <cover-view class="radar_explain_bg" @click="closeRadarExplain"></cover-view>
     <!-- 平均值 -->
      <cover-view class="radar_explain_wrap">
        <cover-view class="flex justify-center radar_explain_view grid padding-lg" v-if="radar_indication_type==1">
          <cover-view class="text-black text-bold">专注力平均值</cover-view>
          <cover-view class="text_explain_center">
            <cover-view class="text_explain_wrap">本次训练的专注力平均水平，平均值越高越好</cover-view>
          </cover-view>
        </cover-view>

        <!-- 占比 -->
        <cover-view class="flex justify-center radar_explain_view grid padding-lg" v-if="radar_indication_type==2">
          <cover-view class="text-black text-bold">高专注占比</cover-view>
          <cover-view class="text_explain_center">
            <cover-view class="text_explain_wrap">大于65分的高专注值在本次训练中的占比，高专注占比越高越好</cover-view>
          </cover-view>
        </cover-view>

        <!-- 唤醒 -->
        <cover-view class="flex justify-center radar_explain_view grid padding-lg" v-if="radar_indication_type==3">
          <cover-view class="text-black text-bold">专注唤醒效率</cover-view>
          <cover-view class="text_explain_center">
            <cover-view class="text_explain_wrap">从训练开始到专注值达到60所需时间效率，唤醒效率越高越好</cover-view>
          </cover-view>
        </cover-view>

        <!-- 和谐度 -->
        <cover-view class="flex justify-center radar_explain_view grid padding-lg" v-if="radar_indication_type==4">
          <cover-view class="text-black text-bold">整体和谐度</cover-view>
          <cover-view class="text_explain_center">
            <cover-view class="text_explain_wrap">在专注训练过程中对于目标压力的管理水平和情绪稳定水平，和谐度越高越好</cover-view>
          </cover-view>
        </cover-view>

        <!-- 稳定度 -->
        <cover-view class="flex justify-center radar_explain_view grid padding-lg" v-if="radar_indication_type==5">
          <cover-view class="text-black text-bold">专注力稳定度</cover-view>
          <cover-view class="text_explain_center">
            <cover-view class="text_explain_wrap">在训练过程中，专注值的离散程度，稳定度越高代表越稳定</cover-view>
          </cover-view>
        </cover-view>

      </cover-view>
    </view>

  </div>
</template>

<script>
import mpvueEcharts from "mpvue-echarts";
import echarts from "../../../static/echarts.min";
import util, {
  filterPieData,
  formatSeconds,
  getHightPieChartOption,
  getPieChartsOption,
  getRadarChartOption,
  getInterfereChartsOption,
  interfereAction,
  getAdjustmentChartsOption,
  timestampToTimeS,
} from "../../utils/index";
import {gameDetail} from "../../requests/game";
import game_store from "../../store/game";
import Toast from "../../../static/vant/toast/toast";

var att_charts,
  // alpha_beta_charts,
  // delta_theta_charts,
  hight_att_pie_charts,
  radar_charts,
  $pie_charts,
  $interfere_echarts,
  $adjustment_echarts,
  $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 initABChart(canvas, width, height) {
//   alpha_beta_charts = echarts.init(canvas, null, {
//     width: width,
//     height: height,
//   });
//   canvas.setChart(alpha_beta_charts);

//   var option = util.getABOption([0], [0]); // ECharts 配置项

//   alpha_beta_charts.setOption(option);

//   return alpha_beta_charts; // 返回 chart 后可以自动绑定触摸操作
// }

// function initDTChart(canvas, width, height) {
//   delta_theta_charts = echarts.init(canvas, null, {
//     width: width,
//     height: height,
//   });
//   canvas.setChart(delta_theta_charts);

//   var option = util.getDTOption([0], [0]); // ECharts 配置项

//   delta_theta_charts.setOption(option);

//   return delta_theta_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);

  // 添加点击事件
  radar_charts.on('click', function(params){    
    if(params.name.indexOf("专注力平均值") != -1) {
      $this.radar_indication_type = 1

    } else if (params.name.indexOf("高专注占比") != -1) {
      $this.radar_indication_type = 2

    } else if (params.name.indexOf("专注唤醒效率") != -1) {
      $this.radar_indication_type = 3

    } else if (params.name.indexOf("整体和谐度") != -1) {
      $this.radar_indication_type = 4

    } else {
      $this.radar_indication_type = 5
    }

    $this.is_explainShow = true
  })

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

// 干扰图表初始化 interfere_echarts
function interfereChart(canvas, width, height) {
  $interfere_echarts = echarts.init(canvas, null, {
    width: width,
    height: height,
  });
  canvas.setChart($interfere_echarts);

  var option = getInterfereChartsOption(); // ECharts 配置项

  $interfere_echarts.setOption(option);

  return $interfere_echarts; // 返回 chart 后可以自动绑定触摸操作
}
// 调整能力表初始化 interfere_echarts
function adjustmentCharts(canvas, width, height) {
  $adjustment_echarts = echarts.init(canvas, null, {
    width: width,
    height: height,
  });
  canvas.setChart($adjustment_echarts);

  var option = getAdjustmentChartsOption(); // ECharts 配置项

  $adjustment_echarts.setOption(option);

  return $adjustment_echarts; // 返回 chart 后可以自动绑定触摸操作
}

export default {
  name: "index_container",
  components: {
    mpvueEcharts,
  },
  data() {
    return {
      // 0:未选择 1：时间 2：次数
      // 折线图 表格数据
      attCharts: initAttChart,
      // alpha_betaCharts: initABChart,
      // delta_thetaCharts: initDTChart,
      hight_att_charts: initHightPieChart,
      radar_charts: initRadarChart,
      pie_charts: initPieChart,
      interfere_charts: interfereChart,
      adjustment_charts: adjustmentCharts,

      echarts,
      record: {},
      userinfo: {},
      record_id: 0,

      //是否截断数据
      is_cut: false,
      //数据截断数
      data_section: 4,
      //数据集合
      data_lines: [],
      // 是否时间太短
      report_show: true,   // 报告

      // 五角图解释弹窗
      is_explainShow: false,
      radar_indication_type: Number,
    };
  },
  methods: {
    //  获取游戏报告
    get_report($record_id) {
      $this.record = {};
      Toast.loading({
        forbidClick: true,
        message: "加载中",
        duration: 0,
      });
      gameDetail($record_id).then(
        (res) => {
          wx.nextTick(() => {
            Toast.clear();
          });
          let $res = res.data;

          $this.report_show = $res.data.line.length > 0;
          // if (!$this.report_show) {
          //   return false;
          // }
          setTimeout(() => {
            $this.record = $res.data;
            let $options = getHightPieChartOption(
              $this.record.heightValue,
            );
            hight_att_pie_charts.setOption($options);

            //设置雷达图
            $options = getRadarChartOption([
              $this.record.att_average, //平均
              $this.record.heightValue, //高专注占比
              $this.record.awakenLast, //唤醒
              $this.record.lineMedValue, //和谐度
              $this.record.stableValue, //稳定度
            ]);
            radar_charts.setOption($options);

            // 平均专注力大字
            $this.record["att_average_big"] = parseInt(
              $this.record["att_average"]
            );
            // 平均专注力小字
            $this.record["att_average_string"] = $this.record[
              "att_average"
              ].toString();
            $this.record["att_average_lil"] = $this.record[
              "att_average_string"
              ].substring($this.record["att_average_string"].indexOf("."));

            let $play_time = $this.record.play_time;

            $this.record.play_time = formatSeconds($this.record.play_time);
            $this.record.start_time = timestampToTimeS($this.record.start_time);
            $this.record.height_absorbed = parseInt($this.record.heightValue)


            let $pie_data = $this.record.level;
            // 时间
            $this.record.level_time0 = formatSeconds($this.record.level[0]);
            $this.record.level_time1 = formatSeconds($this.record.level[1]);
            $this.record.level_time2 = formatSeconds($this.record.level[2]);
            $this.record.level_time3 = formatSeconds($this.record.level[3]);
            $this.record.level_time4 = formatSeconds($this.record.level[4]);

            // 时间总数
            let all_time = 0;
            for (let i = 0; i < 5; i++) {
              all_time += $this.record.level[i];
            }

            // 比例
            $this.record.level_ratio0 =
              Math.round($this.record.level[0] / all_time * 100 * 100) / 100;
            $this.record.level_ratio1 =
              Math.round($this.record.level[1] / all_time * 100 * 100) / 100;
            $this.record.level_ratio2 =
              Math.round($this.record.level[2] / all_time * 100 * 100) / 100;
            $this.record.level_ratio3 =
              Math.round($this.record.level[3] / all_time * 100 * 100) / 100;
            $this.record.level_ratio4 =
              Math.round($this.record.level[4] / all_time * 100 * 100) / 100;

            let $pie_option = getPieChartsOption($pie_data.reverse());
            $pie_charts.setOption($pie_option);

            //5分钟阶段
            let $min = 2 * 60;
            $this.is_cut = $play_time > $min;
            console.log($this.is_cut);
            if ($this.is_cut) {
              //截断得数量
              $this.data_section = Math.ceil($play_time / $min);
              let $e = {
                mp: {
                  detail: {
                    name: 0,
                  },
                },
              };
              this.changeMin($e);
              // this.changeABMin($e);
              // this.changeDTMin($e);
            } else {
              //处理 专注度 和  放松度的值
              $this.get_game_line(
                $this.record.line,
                $this.record.line_med,
                $this.record.amp
              );
            }

            // 干扰值数据传输
            $this.interfereData = interfereAction($res.data.interfereArr);
            let $interfere_option = getInterfereChartsOption(
              $this.interfereData
            );
            $interfere_echarts.setOption($interfere_option);
            // 调整能力数据传输
            $this.adjustmentData = interfereAction($res.data.burstArr);
            let $adjustment_option = getAdjustmentChartsOption(
              $this.adjustmentData
            );
            $adjustment_echarts.setOption($adjustment_option);

          }, 1000);
        },
        (err) => {
          Toast.fail("错误代码：" + res.code + "，联系客服");
        }
      );
    },
    get_game_line($line_data, $line_med_data, $line_amp_data) {
      let $option = util.getLineOption(
        $line_data,
        $line_med_data,
        $line_amp_data
      );
      att_charts.setOption($option);
    },
    to_game_records() {
      mpvue.navigateTo({
        url: "/pages/game_record/main",
      });
    },
    //  切换时间查看线 数据
    changeMin($e) {
      let $index = $e.mp.detail.name;
      // 0-2  2-4  4-6
      // 0    1    2
      let $start = $index * 120;
      let $end = ($index + 1) * 120;
      let $line_data = $this.record.line.slice($start, $end);
      let $med_data = $this.record.line_med.slice($start, $end);
      let $amp_data = $this.record.amp.slice($start, $end);
      $this.get_game_line($line_data, $med_data, $amp_data);
    },
    // 关闭雷达解释
    closeRadarExplain() {
      $this.is_explainShow = false
    }
  },
  mounted() {
    $this.userinfo = wx.getStorageSync("userinfo");
    //设置游戏时间长
    wx.removeStorageSync("played_time");
    $this.get_report($this.record_id);
  },
  created() {
    $this = this;
  },
  onLoad(options) {
    $this.record_id = options.id
      ? options.id
      : game_store.getters.getGameRecordId();
  },
};
</script>

<style scoped>
#report_container {
  background: white;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 头部椭圆 */
.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_info {
  width: 95%;
  height: 90px;
  display: flex;
  margin: 0 auto;
  margin-bottom: 15px;
  align-items: center;
  padding-right: 18px;
  box-sizing: border-box;
  box-shadow: 0px 3px 7px 0px rgba(159, 159, 159, 0.84);
  border-radius: 10px;
  background: #fff;
}

.user_info img {
  display: inline-block;
  width: 60px;
  height: 60px;
  margin-left: 15px;
  margin-right: 12px;
  border-radius: 5px;
}

.user_info .info_wrap {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  flex-direction: column;
  flex: 1;
}

.user_info .box_wrap {
  display: flex;
  color: #222222;
  box-sizing: border-box;
  justify-content: space-between;
}

.user_info .box_wrap_left {
  align-items: center;
}

.user_info .box_wrap_right {
  align-items: flex-end;
}

.user_info .info_right {
  color: #666666;
}

/* 智脑系数 */
.bran_wrap {
  width: 100%;
  height: 101px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bran_wrap img {
  display: inline-block;
  width: 67px;
  height: 80px;
  margin-right: 20px;
}

.bran_wrap .bran {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.bran_wrap .bran .p_num {
  color: #ffb72d;
  font-size: 35px;
  font-weight: bold;
}

.bran_wrap .bran .p_text {
  color: #333333;
  font-size: 12px;
  font-weight: bold;
}

/* 详细数据 */
.margin-tb {
  width: 95%;
  height: 110px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  background: #f3f3f3;
  border-radius: 5px;
}

.margin-tb .margin_left {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-left: 3px;
}

.margin-tb .margin_left .left_content {
  height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #676767;
  margin-top: -100px;
  margin-left: 5px;
}

.margin-tb .margin_left .left_content .left_num {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: -3px;
}

.margin-tb .margin_left .left_content .left_text {
  font-size: 8px;
}

.margin-tb .margin_centent {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 12px 0;
  margin-left: 10px;
}

.margin-tb .textLil {
  font-size: 6px;
  margin-left: 2px;
}

.margin-tb .margin_right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #90df24;
  box-sizing: border-box;
  /* padding-right:2px; */
}

.margin-tb .margin_right .right_num {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 2px;
}

.margin-tb .margin_right .right_text {
  width: 75%;
  height: 15px;
  background: #90df24;
  color: #fff;
  text-align: center;
  line-height: 15px;
  font-size: 10px;
  border-radius: 3px;
}

.margin-tb .detail {
  width: 47%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #676767;
  font-size: 10px;
}

.margin-tb .detail .detail_num {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 1px;
}

/* 小标题 */
.bar {
  width: 100%;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px;
  box-sizing: border-box;
  margin: 25px 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;
  line-height: 25px;
  margin-bottom: 28px;
}

.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;
  opacity: 0.6;
  border-radius: 10px;
}

.chart_line {
  /* box-shadow: 0px 6px 11px #dadada; */
  background: #f3f3f3;
}

/*雷达图*/
.radar_chart {
  margin: 0 auto;
  margin-bottom: 10px;
  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: 120%;
  height: 95px;
  background: #f3f3f3;
  margin-top: 10px;
  margin-left: -7px;
  /*border-radius: 10px;*/
  /*box-shadow: 0px 6px 11px #dadada;*/
}

.radar_explain_bg {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,.8);
  z-index: 999;
}

.radar_explain_wrap {
  width: 80%;
  height: 150px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 999;
}

.radar_explain_view{
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 10px;
  padding:25px;
  box-sizing: border-box;
  overflow: initial;
}

.text_explain_center{
	display: flex;
  align-items: center
}

.text_explain_wrap{
	display:block;
	white-space: pre-wrap;
  line-height:22px
}

/* 核销详情 */
.sheet {
  color: #6d6d6d;
  font-size: 12px;
  display: flex;
  padding: 0 16px;
  box-sizing: border-box;
  margin-bottom: 30px;
}

.sheet .left,
.sheet .right {
  height: 15px;
  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;
}

.divide_line {
  width: 360px;
  height: 1px;
  background: #e5e5e5;
  margin: 0 auto;
}

/* 专注力干扰看板 */
.absorbed_change {
  width: 100%;
  box-sizing: border-box;
  margin-top: 18px;
}

.absorbed_change .line {
  width: 4px;
  height: 15px;
  background-color: #5d4db8;
  margin-right: 7px;
}

.absorbed_change .title {
  color: #010101;
  font-size: 15px;
}

.interfere_title_wrap {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}

/* 干扰 标题*/
.interfere {
  display: flex;
  margin-left: 8px;
  height: 54px;
  align-items: center;
  margin-bottom: 14px;
}

.interfere .interfere_logo {
  display: inline-block;
  width: 19px;
  height: 19px;
  margin-right: 7px;
}

.interfere .interfere_text {
  font-size: 15px;
  color: #676767;
}

.interfere .interfere_text .interfere_text_num {
  font-size: 18px;
  font-weight: 800;
}

/* 干扰 echarts */
.interfere_echarts_wrap {
  width: 360px;
  height: 200px;
  background: #f3f3f3;
  opacity: 0.6;
  box-shadow: 0px 6px 11px #dadada;
}

.interfere_echarts {
  /* margin: 0 auto; */
  width: 100%;
  height: 173px;
  /* background: #f3f3f3;
  opacity: 0.6;
  box-shadow: 0px 6px 11px #dadada; */
}

.interfere_echarts_bottom {
  margin: 0 auto;
  width: 90%;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 15px;
  color: #828282;
}

/* 干扰 bottom */
.interfere_footer {
  width: 100%;
  height: 26px;
  font-size: 13px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #676767;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.interfere_footer .interfere_footer_logo {
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: #23cc92;
  margin-right: 5px;
}

/* 调整能力 */
.adjustment_warp {
  margin-top: 50px;
}

.adjustment_title {
  display: flex;
  color: #676767;
  font-size: 15px;
  padding-left: 8px;
  box-sizing: border-box;
  margin-bottom: 35px;
}

.adjustment_title .adjustment_title_logo {
  display: inline-block;
  width: 19px;
  height: 19px;
  margin-right: 7px;
}

/* 调整能力表图 */
.adjustment_echarts_wrap {
  margin: 0 auto;
  width: 360px;
  height: 200px;
  background: #f3f3f3;
  opacity: 0.6;
  box-shadow: 0px 6px 11px #dadada;
}

.adjustment_echarts {
  width: 100%;
  height: 173px;
}

.adjustment_echarts_bottom {
  margin: 0 auto;
  width: 90%;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 15px;
  color: #828282;
}

.adjustment_footer {
  width: 100%;
  height: 26px;
  font-size: 13px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #676767;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.adjustment_footer .adjustment_footer_logo {
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: #f3a100;
  margin-right: 5px;
}

/* 爆发值和调整时间 */
.absorbed_change_footer {
  display: flex;
  justify-content: space-around;
  margin-top: 28px;
  margin-bottom: 30px
}

.absorbed_change_footer .footer_text {
  font-size: 15px;
  color: #676767;
}

.footer_text_W {
  font-size: 18px;
  font-weight: 600;
}

.test {
  color: rgb(163, 7, 7);
}

.label {
  color: #9a95b7;
  font-size: 10px;
}

/* .label_up {
  color: #9a95b7;
  font-size: 10px;
  display: flex;
  flex-wrap: wrap;
  width: 270px;
} */

/*点图*/
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  margin-left: 15px;
}

.dot-Att {
  background: #fab615;
}

.dot-Med {
  background: #40ff31;
}

.dot-Amp {
  background: #d4327a;
}

/* .dot-Alpha {
  background: #FF9107;
} */
/* .dot-Theta {
  background: #ffe838;
} */

/* .dot-Low-Alpha {
  background: #38ff49;
}

.dot-High-Alpha {
  background: #00ad0e;
}

.dot-Low-Beta {
  background: #0060f1;
}

.dot-High-Beta {
  background: #00ccff;
} */

/* .dot-Beta {
  background: #00CCFF;
} */

/* .dot-Delta {
  background: #ff77b3;
} */

/* 节标题  */
.bar {
  width: 100%;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px;
  box-sizing: border-box;
  /* margin: 14px 0; */
}

.bar view {
  display: flex;
  align-items: center;
  justify-content: start;
}

.bar .line {
  width: 4px;
  height: 15px;
  /* background-color: #ffb400; */
  margin-right: 7px;
}

/* 圆环图 */
.flexBoxVer {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
}

.boxVer {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
  height: 500px;
  justify-content: center;
  padding: 20px;
}

.flexBoxLand {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.colorChangeWrap {
  margin-bottom: 5px;
}

.colorChange {
  width: 50px;
  height: 18px;
  border-radius: 4px;
  font-size: 11px;
  color: #ffffff;
  text-align: center;
  line-height: 18px;
  margin-right: 10px;
}

.colorChangeTime {
  font-size: 13px;
}

#changeFirst {
  background: #5470c6;
}

#changeSecond {
  background: #91cc75;
}

#changeThird {
  background: #fac858;
}

#changeFourth {
  background: #ee6666;
}

#changeFifth {
  background: #73c0de;
}

.chart_circle {
  width: 180px;
  height: 193px;
  border-radius: 10px;
}

.left_content {
  height: 193px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #676767;
  margin-top: -190px;
}

.left_text {
  font-size: 12px;
}
</style>