9/10 报告数据自拿图表数据有问题

src/pages/report/index.vue

@@ -17,277 +17,140 @@
       </view>
     </view>
 
-    <div :hidden="noShow">
-    <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"
+    <div v-if="report_show">
+      <div class="bran_wrap margin-bottom">
+        <img
+          src="http://img.shuimuai.com/report_ brain_coefficient.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/>&emsp;占比</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>
-
-    <view class="bar">
+        >
+        <div class="bran">
+          <p class="p_num">{{ record.ratio }}</p>
+          <p class="p_text">智脑系数</p>
+        </div>
+      </div>
       <view>
-        <view class="line"></view>
-        <view class="title">专注力要素分析</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>
-
-    <view class="radar_chart">
-      <mpvue-echarts
-        :echarts="echarts"
-        :onInit="radar_charts"
-        canvasId="demo-canvas2"
-      />
-    </view>
 
-    <view class="divide_line"></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/>&emsp;占比</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="">
-      <view class="bar">
-        <view>
-          <view class="line"></view>
-          <view class="title">报告分析</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>
-      <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 class="title">专注力要素分析</view>
         </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">
+      <view class="radar_chart">
         <mpvue-echarts
-         :echarts="echarts"
-         :onInit="pie_charts"
-         canvasId="demo-canvas-1"
+          :echarts="echarts"
+          :onInit="radar_charts"
+          canvasId="demo-canvas2"
         />
-       </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_time0}}（{{record.level_ratio0}}%）</view>
-            </view>
-
-            <view class="flexBoxLand colorChangeWrap">
-              <view
-                class="colorChange"
-                id="changeSecond"
-              >61-80</view>
-              <view class="colorChangeTime">{{record.level_time1}}（{{record.level_ratio1}}%）</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_time3}}（{{record.level_ratio3}}%）</dview>
-            </view>
+      <view class="divide_line"></view>
 
-            <view class="flexBoxLand">
-              <view
-                class="colorChange"
-                id="changeFifth"
-              >00-20</view>
-              <view class="colorChangeTime">{{record.level_time4}}（{{record.level_ratio4}}%）</view>
-            </view>
+      <view class="">
+        <view class="bar">
+          <view>
+            <view class="line"></view>
+            <view class="title">报告分析</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="conclution">{{ record.content }}</view>
+        <!-- <view class="conclution">{{ record.content2 }}</view> -->
+        <view class="divide_line"></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>
 
-    <!-- Aipha/Beta脑波变化曲线图 -->
-    <view class="absorbed_change">
       <view class="bar">
-        <view class="interfere_title_wrap">
+        <view>
           <view class="line"></view>
-          <view class="title">Alpha/Beta脑波变化曲线图</view>
+          <view class="title">专注力数值曲线</view>
         </view>
-        <view class="label_up">
+        <view class="label">
           <view>
-            <view class="dot dot-Low-Alpha"></view>
-            <text class="name">Low-Alpha</text>
+            <view class="dot dot-Att"></view>
+            <text class="name">Att(专注度)</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 class="dot dot-Med"></view>
+            <text class="name">Med(放松度)</text>
           </view>
           <view>
-            <view class="dot dot-High-Beta"></view>
-            <text class="name">High-Beta</text>
+            <view class="dot dot-Amp"></view>
+            <text class="name">Amp(和谐度)</text>
           </view>
         </view>
       </view>
@@ -295,8 +158,8 @@
       <view class="chart chart_line">
         <mpvue-echarts
           :echarts="echarts"
-          :onInit="alpha_betaCharts"
-          canvasId="demo-canvas-a1"
+          :onInit="attCharts"
+          canvasId="demo-canvas"
         />
       </view>
       <view
@@ -306,7 +169,7 @@
         <van-tabs
           :active="0"
           color="#6858C4"
-          @change="changeABMin"
+          @change="changeMin"
           :swipe-threshold="4"
           line-width=54px
         >
@@ -318,62 +181,213 @@
           ></van-tab>
         </van-tabs>
       </view>
-    </view>
-    <!-- Delta/theta脑波变化曲线图 -->
-    <view class="absorbed_change ">
+      <view class="divide_line" style="margin-top: 20px"></view>
+
       <view class="bar">
-        <view class="interfere_title_wrap">
+        <view>
           <view class="line"></view>
-          <view class="title">Delta/Theta脑波变化曲线图</view>
+          <view class="title">专注力数值累计比例</view>
         </view>
-        <view class="label">
-          <view>
-            <view class="dot dot-Delta"></view>
-            <text class="name">Delta</text>
+      </view>
+
+      <view class="flexBoxLand">
+        <view>
+          <view class="chart_circle">
+            <mpvue-echarts
+              :echarts="echarts"
+              :onInit="pie_charts"
+              canvasId="demo-canvas-1"
+            />
           </view>
-          <view>
-            <view class="dot dot-Theta"></view>
-            <text class="name">Theta</text>
+          <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_time0 }}（{{ record.level_ratio0 }}%）</view>
+          </view>
+
+          <view class="flexBoxLand colorChangeWrap">
+            <view
+              class="colorChange"
+              id="changeSecond"
+            >61-80
+            </view>
+            <view class="colorChangeTime">{{ record.level_time1 }}（{{ record.level_ratio1 }}%）</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_time3 }}（{{ record.level_ratio3 }}%）</dview>
+          </view>
+
+          <view class="flexBoxLand">
+            <view
+              class="colorChange"
+              id="changeFifth"
+            >00-20
+            </view>
+            <view class="colorChangeTime">{{ record.level_time4 }}（{{ record.level_ratio4 }}%）</view>
           </view>
         </view>
       </view>
 
-      <view class="chart chart_line">
-        <mpvue-echarts
-          :echarts="echarts"
-          :onInit="delta_thetaCharts"
-          canvasId="demo-canvas-a2"
-        />
+      <view class="divide_line"></view>
+      <!-- 核销详情 -->
+      <view class="bar">
+        <view>
+          <view class="line"></view>
+          <view class="title">核销详情</view>
+        </view>
       </view>
-      <view
-        class="section_container"
-        v-if="is_cut"
-      >
-        <van-tabs
-          :active="0"
-          color="#6858C4"
-          @change="changeDTMin"
-          :swipe-threshold="4"
-          line-width=54px
+      <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>
+
+
+      <!-- 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-tab
-            :name="index"
-            :title="(2*index)+'-'+(2*(index+1)) + '分钟'"
-            v-for="(section,index) in data_section"
-            :key="index"
-          ></van-tab>
-        </van-tabs>
+          <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>
-    </view>
     </div>
 
-    <div v-if="noShow" class="boxVer margin-top-xl">
+    <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"/>
-  
+
   </div>
 </template>
 
@@ -388,7 +402,7 @@ import util, {
   getRadarChartOption,
   timestampToTimeS,
 } from "../../utils/index";
-import { gameDetail } from "../../requests/game";
+import {gameDetail} from "../../requests/game";
 import game_store from "../../store/game";
 import Toast from "../../../static/vant/toast/toast";
 
@@ -515,8 +529,7 @@ export default {
       //数据集合
       data_lines: [],
       // 是否时间太短
-      show: true,   // 报告
-      noShow:false
+      report_show: true,   // 报告
     };
   },
   methods: {
@@ -528,38 +541,31 @@ export default {
         message: "加载中",
         duration: 0,
       });
-      setTimeout(() => {
-        gameDetail($record_id).then(
-          (res) => {
-            Toast.clear();
-            let $res = res.data;
-            console.log($res.data);
+      gameDetail($record_id).then(
+        (res) => {
+          Toast.clear();
+          let $res = res.data;
+          console.log($res.data);
 
-            $this.record = $res.data;
+          $this.record = $res.data;
 
-            // console.log("成绩记录数据", $res.data.interfereArr);
-            // console.log("数据长度：", $res.data.line);
+          // console.log("成绩记录数据", $res.data.interfereArr);
+          // console.log("数据长度：", $res.data.line);
 
-            if ($res.data.line.length==0) {
-              $this.show = false
-              $this.noShow = true
-            } else {
-              $this.show = true
-              $this.noShow = false
-             
-            }
+          $this.report_show = $res.data.line.length > 0;
+          setTimeout(() => {
 
-             // 平均专注力大字
+            // 平均专注力大字
             $this.record["att_average_big"] = parseInt(
               $this.record["att_average"]
             );
             // 平均专注力小字
             $this.record["att_average_string"] = $this.record[
               "att_average"
-            ].toString();
+              ].toString();
             $this.record["att_average_lil"] = $this.record[
               "att_average_string"
-            ].substring($this.record["att_average_string"].indexOf("."));
+              ].substring($this.record["att_average_string"].indexOf("."));
 
             let $play_time = $this.record.play_time;
 
@@ -648,14 +654,12 @@ export default {
               // // 处理 delta theta
               $this.get_game_dt($this.record.delta, $this.record.theta);
             }
-
-            
-          },
-          (err) => {
-            Toast.fail("错误代码：" + res.code + "，联系客服");
-          }
-        );
-      }, 800);
+          }, 800);
+        },
+        (err) => {
+          Toast.fail("错误代码：" + res.code + "，联系客服");
+        }
+      );
     },
     get_game_line($line_data, $line_med_data, $line_amp_data) {
       let $option = util.getLineOption(