返回原来的详情展示图

src/pages/report/index.vue

@@ -1,154 +1,67 @@
 <template>
   <div id="report_container">
     <view class="head"></view>
-    <img class="boy" src="https://img.shuimuai.com/m_sign_chengji_boy%402x.png"/>
+    <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"/>
+          <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"/>
+        <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>
     </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 }}%</view>
-                <view>高专注力占比</view>
-              </view>
-            </view>
-          </view>
-        </van-col>
-      </van-row>
-    </view>
-
     <view class="bar">
       <view>
         <view class="line"></view>
-        <view class="title">专注力要素分析</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 class="detail">
+      <view>
+        <!-- <view>{{ record.att_max }}</view> -->
+        <!-- <view>专注力最高分</view> -->
+        <view>{{ record.interfere }} </view>
+        <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>{{ record.scope_diff }}</view>
+        <view>专注力广度</view>
       </view>
-      <view class="conclution">{{ record.advise }}</view>
     </view>
-
-
     <view class="bar">
       <view>
         <view class="line"></view>
-        <view class="title">专注力数值曲线</view>
+        <view class="title">基本脑波</view>
       </view>
     </view>
-
     <view class="chart">
-      <mpvue-echarts :echarts="echarts" :onInit="attCharts" canvasId="demo-canvas"/>
+      <mpvue-echarts
+        :echarts="echarts"
+        :onInit="attCharts"
+        canvasId="demo-canvas"
+      />
     </view>
-    <view class="section_container" v-if="is_cut">
+    <view
+      class="section_container"
+      v-if="is_cut"
+    >
       <van-tabs
         :active="0"
         color="#6858C4"
@@ -157,68 +70,53 @@
       >
         <van-tab
           :name="index"
-          :title="(5*index)+'-'+(5*(index+1)) + '分钟'" v-for="(section,index) in data_section"
-          :key="index"></van-tab>
+          :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 class="conclution"> <text class="conclution_title">分析</text>: {{ record.content }}</view>
+    <view class="conclution"> <text class="conclution_title">建议</text>: {{ record.advise }}</view>
+    <view class="bar">
+      <view>
+        <view class="line"></view>
+        <view class="title">核销详情</view>
       </view>
     </view>
-    <view class="chart">
-      <mpvue-echarts
-        :echarts="echarts"
-        :onInit="pie_charts"
-        canvasId="demo-canvas-1"
-      />
+    <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>
-
-<!--    <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"/>
+    <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 mpvueEcharts from "mpvue-echarts";
+import echarts from "../../../static/echarts.min";
+import util, { formatSeconds } from "../../utils/index";
+import { gameDetail, gameLineChart } from "../../requests/game";
 import game_store from "../../store/game";
-import Toast from '../../../static/vant/toast/toast';
+import Toast from "../../../static/vant/toast/toast";
 
-var att_charts,
-  hight_att_pie_charts,
-  radar_charts,
-  $pie_charts,
-  $this
+var att_charts, $this;
 
 // 大脑图表初始化
 function initAttChart(canvas, width, height) {
   att_charts = echarts.init(canvas, null, {
     width: width,
-    height: height
+    height: height,
   });
   canvas.setChart(att_charts);
 
@@ -229,66 +127,16 @@ function initAttChart(canvas, width, height) {
   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
+    mpvueEcharts,
   },
   data() {
     return {
       // 0:未选择 1：时间 2：次数
       // 折线图
       attCharts: initAttChart,
-      hight_att_charts: initHightPieChart,
-      radar_charts: initRadarChart,
-      pie_charts: initPieChart,
-
       echarts,
       record: {},
       userinfo: {},
@@ -299,121 +147,111 @@ export default {
       //数据截断数
       data_section: 0,
       //数据集合
-      data_lines: []
-    }
+      data_lines: [],
+    };
   },
   methods: {
     //  获取游戏报告
     get_report($record_id) {
-      $this.record = {}
+      $this.record = {};
       Toast.loading({
         forbidClick: true,
         message: "加载中",
-        duration: 0
-      })
+        duration: 0,
+      });
       setTimeout(() => {
-        gameDetail($record_id).then((res) => {
-            Toast.clear()
+        gameDetail($record_id).then(
+          (res) => {
+            console.log("get_game_detail", 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);
-
+            $this.record = $res.data;
             //5分钟阶段
-            let $five_min = 5 * 60
-            $this.is_cut = $this.record.play_time > $five_min
+            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)
+              $this.data_section = Math.ceil(
+                $this.record.play_time / $five_min
+              );
             }
+            $this.record.play_time = formatSeconds($this.record.play_time);
           },
           (err) => {
-            Toast.fail('错误代码：' + res.code + '，联系客服')
+            Toast.fail("错误代码：" + res.code + "，联系客服");
           }
-        )
-      }, 800)
+        );
+      }, 800);
     },
     get_game_line($record_id) {
       let $params = {
-        'game_record_id': $record_id,
-      }
-      gameLineChart($params).then((res) => {
+        game_record_id: $record_id,
+      };
+      gameLineChart($params).then(
+        (res) => {
           let $res = res.data;
-          let $option = {}
+          let $option = {};
           setTimeout(() => {
-            let $line_data = $res.data.line
+            let $line_data = $res.data.line;
             if ($this.is_cut) {
               //需要截断数据
-              let $more_than_count = $line_data.length % $this.data_section
-              let i = 0
+              let $more_than_count = $line_data.length % $this.data_section;
+              let i = 0;
               //根据多出来的数 删除结尾得数量
               for (i = 0; i < $more_than_count; i++) {
-                $line_data.pop()
+                $line_data.pop();
               }
 
-              $this.data_lines = []
+              $this.data_lines = [];
               //获取每一组得数据长度
-              let $item_len = $line_data.length / $this.data_section
+              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))
+                $this.data_lines.push(
+                  $line_data.slice(i * $item_len, (i + 1) * $item_len)
+                );
               }
 
-              $option = util.getLineOption($this.data_lines[0], [0])
+              $option = util.getLineOption($this.data_lines[0], [0]);
             } else {
-              $option = util.getLineOption($line_data, [0])
+              $option = util.getLineOption($line_data, [0]);
             }
-            att_charts.setOption($option)
-          }, 800)
+            att_charts.setOption($option);
+          }, 1000);
         },
         (err) => {
-          Toast.fail('错误代码：' + res.code + '，联系客服')
-        })
+          Toast.fail("错误代码：" + res.code + "，联系客服");
+        }
+      );
     },
     to_game_records() {
       mpvue.navigateTo({
-        url: "/pages/game_record/main"
-      })
+        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)
-    }
-  }
-  ,
+      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')
+    $this.userinfo = wx.getStorageSync("userinfo");
     //设置游戏时间长
-    wx.removeStorageSync('played_time')
-    $this.get_report($this.record_id)
-    $this.get_game_line($this.record_id)
+    wx.removeStorageSync("played_time");
+    $this.get_report($this.record_id);
+    $this.get_game_line($this.record_id);
+    console.log("进来时候获取到的信息", $this.record);
   },
   created() {
     $this = this;
   },
   onLoad(options) {
-    $this.record_id = options.id ? options.id : game_store.getters.getGameRecordId()
-  }
-}
+    $this.record_id = options.id
+      ? options.id
+      : game_store.getters.getGameRecordId();
+  },
+};
 </script>
 
 <style scoped>
@@ -485,7 +323,6 @@ image.boy {
 
 .user .up .right {
   height: 40px;
-
 }
 
 .user .up .right image {
@@ -512,13 +349,13 @@ image.boy {
 
 .user .down view:first-child {
   font-size: 45px;
-  color: #FFD800;
+  color: #ffd800;
   font-weight: bold;
 }
 
 .user .down view:last-child {
   font-size: 10px;
-  color: #C7C4D8;
+  color: #c7c4d8;
   margin-top: -5px;
 }
 
@@ -526,9 +363,9 @@ image.boy {
 .detail {
   width: 100%;
   height: 102px;
-  /*display: flex;*/
-  /*align-items: center;*/
-  /*justify-content: space-around;*/
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
 }
 
 .detail view {
@@ -536,7 +373,7 @@ image.boy {
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
-  color: #6C6C6C;
+  color: #6c6c6c;
   font-size: 10px;
 }
 
@@ -570,7 +407,6 @@ image.boy {
   color: #6c6c6c;
   box-sizing: border-box;
 }
-
 .conclution_title {
   font-weight: 600;
   color: #000;
@@ -579,7 +415,7 @@ image.boy {
 .bar .line {
   width: 4px;
   height: 15px;
-  background-color: #5D4DB8;
+  background-color: #5d4db8;
   margin-right: 7px;
 }
 
@@ -604,29 +440,9 @@ image.boy {
   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;
+  color: #6d6d6d;
   font-size: 12px;
   display: flex;
   padding: 0 16px;
@@ -645,9 +461,4 @@ image.boy {
 .sheet .left {
   width: 195px;
 }
-
-.content_card {
-  border-radius: 10px;
-  box-shadow: 0px 6px 11px #dadada;
-}
 </style>

src/pages/report/index.vue.bak

@@ -0,0 +1,685 @@
+<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 }}%</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>

src/utils/index.js

@@ -449,25 +449,45 @@ export function filterPieData(datas) {
   let $this = this
   let legends = []
   let $att_region = [
+    // {
+    //   min: 81,
+    //   max: 100
+    // },
+    // {
+    //   min: 61,
+    //   max: 80
+    // },
+    // {
+    //   min: 41,
+    //   max: 60
+    // },
+    // {
+    //   min: 21,
+    //   max: 40
+    // },
+    // {
+    //   min: 0,
+    //   max: 20
+    // },
     {
-      min: 81,
-      max: 100
+      min: 0,
+      max: 20
     },
     {
-      min: 61,
-      max: 80
+      min: 21,
+      max: 40
     },
     {
       min: 41,
       max: 60
     },
     {
-      min: 21,
-      max: 40
+      min: 61,
+      max: 80
     },
     {
-      min: 0,
-      max: 20
+      min: 81,
+      max: 100
     },
   ]
   datas.forEach(($val, $index) => {