覆盖前4/8上传

src/pages/index/index.vue

@@ -29,7 +29,7 @@
     >
       <personal_container @change_login_status="change_login_status"></personal_container>
 
-      <device_container></device_container>
+      <device_container></device_container> 
     </div>
     <div
       class="service"
@@ -146,6 +146,7 @@ export default {
       if (!this.is_login) {
         Toast.fail("请先登录");
         return false;
+        
       }
       mpvue.navigateTo({
         url: "/pages/" + $page + "/main",
@@ -172,16 +173,15 @@ export default {
     });
   },
   onShow() {
-
     wx.getStorageInfo({
       success(res) {
-        console.log('当前存储的数据', res.keys)
-        let $keys = res.keys
+        console.log("当前存储的数据", res.keys);
+        let $keys = res.keys;
         $keys.forEach(($val, $index) => {
-          console.log($val, wx.getStorageSync($val))
-        })
-      }
-    })
+          console.log($val, wx.getStorageSync($val));
+        });
+      },
+    });
     userDetail().then((res) => {
       let $data = res.data;
       //判断如果是第一次登录就 弹出领取体验卡
@@ -198,7 +198,7 @@ export default {
     console.log(
       "游戏状态：" + game_store.getters.getGameStatus(),
       "游戏记录id：" + game_store.getters.getGameRecordId()
-    )
+    );
 
     if (game_store.getters.getGameStatus() == 1) {
       // Dialog.confirm({
@@ -230,16 +230,16 @@ export default {
     }
   },
   created() {
-    $this = this
+    $this = this;
   },
   onShareAppMessage() {
     return {
       title: "欢迎进入水母星球",
       imageUrl: "http://img.shuimuai.com/sharePahe_one.jpg",
-      path:"/pages/index/main"
+      path: "/pages/index/main",
     };
   },
-}
+};
 </script>
 
 <style scoped>

src/pages/none/index.vue

@@ -1,15 +1,30 @@
 <template>
-  <div id="index_login_container" class="animation-slide-right">
-    <img src="https://img.shuimuai.com/web/none_page.png" alt="" class="cover">
+  <div
+    id="index_login_container"
+    class="animation-slide-right"
+  >
+    <img
+      src="https://img.shuimuai.com/web/none_page.png"
+      alt=""
+      class="cover"
+    >
 
     <div class="video_container">
-      <div class="video_item" v-for="(video,index) in videos" :key="index">
+      <div
+        class="video_item"
+        v-for="(video,index) in videos"
+        :key="index"
+      >
         <!--    说明-->
         <view class="padding-tb">
           <text>{{video.title}}</text>
         </view>
-        <video :src="video.src" :id="'video_'+index" :data-index="index"
-               @play="vPlay"></video>
+        <video
+          :src="video.src"
+          :id="'video_'+index"
+          :data-index="index"
+          @play="vPlay"
+        ></video>
       </div>
 
     </div>
@@ -19,49 +34,48 @@
 <script>
 var $this;
 export default {
-  name: 'scan_container',
+  name: "scan_container",
   data() {
     return {
       videos: [
         {
-          id:1,
-          title:"水母星球宣传片",
-          src:"https://img.shuimuai.com/mg.mp4"
+          id: 1,
+          title: "水母星球宣传片",
+          src: "https://img.shuimuai.com/mg.mp4",
         },
         {
           id: 2,
           title: "水母星球产品使用说明",
-          src: "https://img.shuimuai.com/desc_1.mp4"
+          src: "https://img.shuimuai.com/desc_1.mp4",
         },
         {
           id: 3,
           title: "水母星球IP故事",
-          src: "https://img.shuimuai.com/story_1.mp4"
-        }
-      ]
-    }
+          src: "https://img.shuimuai.com/story_1.mp4",
+        },
+      ],
+    };
   },
   methods: {
     vPlay(e) {
-      let $current_index = e.currentTarget.dataset.index
+      let $current_index = e.currentTarget.dataset.index;
       $this.videos.forEach(($val, $index) => {
         if ($index != $current_index) {
-          let $play_box = wx.createVideoContext('video_' + $index)
-          $play_box.pause()
-          $play_box.seek(0)
+          let $play_box = wx.createVideoContext("video_" + $index);
+          $play_box.pause();
+          $play_box.seek(0);
         }
-      })
-
-    }
+      });
+    },
   },
   created() {
     $this = this;
-  }
-}
+  },
+};
 </script>
 <style scoped>
 #index_login_container {
-  background-color: #31295B;
+  background-color: #31295b;
 }
 
 .cover {

src/pages/report/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="report_container">
+  <div id="d">
     <view class="head"></view>
     <img
       class="boy"
@@ -24,33 +24,150 @@
       </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-echartsecharts
+                :echarts="echarts"
+                :onInit="hight_att_charts"
+                canvasId="demo-canvas1"
+              />
+            </view>
+            <view class="detail">
+              <view>
+                <view>{{ record.hight_percent }}%</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="detail">
-      <view>
-        <!-- <view>{{ record.att_max }}</view> -->
-        <!-- <view>专注力最高分</view> -->
-        <view>{{ record.interfere }} </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>
-        <view>{{ record.scope_diff }}</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 class="title">专注力数值曲线</view>
       </view>
     </view>
+
     <view class="chart">
       <mpvue-echarts
         :echarts="echarts"
@@ -76,27 +193,34 @@
         ></van-tab>
       </van-tabs>
     </view>
-    <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 class="cu-bar bg-white">
+      <view class="action">
+        <text class="cuIcon-titles text-primary"></text>
+        <text class="">专注力数值累计比例</text>
       </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 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>
@@ -105,12 +229,18 @@
 <script>
 import mpvueEcharts from "mpvue-echarts";
 import echarts from "../../../static/echarts.min";
-import util, { formatSeconds } from "../../utils/index";
+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, $this;
+var att_charts, hight_att_pie_charts, radar_charts, $pie_charts, $this;
 
 // 大脑图表初始化
 function initAttChart(canvas, width, height) {
@@ -127,6 +257,50 @@ 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, 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: {
@@ -137,6 +311,10 @@ export default {
       // 0:未选择 1：时间 2：次数
       // 折线图
       attCharts: initAttChart,
+      hight_att_charts: initHightPieChart,
+      radar_charts: initRadarChart,
+      pie_charts: initPieChart,
+
       echarts,
       record: {},
       userinfo: {},
@@ -159,13 +337,36 @@ export default {
         message: "加载中",
         duration: 0,
       });
-      setTimeout(() => {
-        gameDetail($record_id).then(
-          (res) => {
-            console.log("get_game_detail", res);
-            Toast.clear();
-            let $res = res.data;
+      gameDetail($record_id).then(
+        (res) => {
+          Toast.clear();
+          let $res = res.data;
+          setTimeout(() => {
             $this.record = $res.data;
+            $this.record.play_time = formatSeconds($this.record.play_time);
+            $this.record.hight_percent =
+              ($this.record.height / $this.record.total).toFixed(2) * 100;
+            let $options = getHightPieChartOption(
+              $this.record.height,
+              $this.record.total
+            );
+            hight_att_pie_charts.setOption($options);
+
+            console.log("游戏记录", $this.record);
+            //设置雷达图
+            $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;
@@ -175,13 +376,12 @@ export default {
                 $this.record.play_time / $five_min
               );
             }
-            $this.record.play_time = formatSeconds($this.record.play_time);
-          },
-          (err) => {
-            Toast.fail("错误代码：" + res.code + "，联系客服");
-          }
-        );
-      }, 800);
+          }, 1500);
+        },
+        (err) => {
+          Toast.fail("错误代码：" + res.code + "，联系客服");
+        }
+      );
     },
     get_game_line($record_id) {
       let $params = {
@@ -216,7 +416,7 @@ export default {
               $option = util.getLineOption($line_data, [0]);
             }
             att_charts.setOption($option);
-          }, 1000);
+          }, 800);
         },
         (err) => {
           Toast.fail("错误代码：" + res.code + "，联系客服");
@@ -241,7 +441,6 @@ export default {
     wx.removeStorageSync("played_time");
     $this.get_report($this.record_id);
     $this.get_game_line($this.record_id);
-    console.log("进来时候获取到的信息", $this.record);
   },
   created() {
     $this = this;
@@ -363,9 +562,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 {
@@ -407,6 +606,7 @@ image.boy {
   color: #6c6c6c;
   box-sizing: border-box;
 }
+
 .conclution_title {
   font-weight: 600;
   color: #000;
@@ -440,6 +640,26 @@ 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;
@@ -461,4 +681,9 @@ image.boy {
 .sheet .left {
   width: 195px;
 }
+
+.content_card {
+  border-radius: 10px;
+  box-shadow: 0px 6px 11px #dadada;
+}
 </style>

src/pages/report/index.vue.bak

@@ -24,150 +24,33 @@
       </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"
@@ -193,34 +76,27 @@
         ></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" />
 
   </div>
@@ -229,18 +105,12 @@
 <script>
 import mpvueEcharts from "mpvue-echarts";
 import echarts from "../../../static/echarts.min";
-import util, {
-  filterPieData,
-  formatSeconds,
-  getHightPieChartOption,
-  getPieChartsOption,
-  getRadarChartOption,
-} from "../../utils/index";
+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";
 
-var att_charts, hight_att_pie_charts, radar_charts, $pie_charts, $this;
+var att_charts, $this;
 
 // 大脑图表初始化
 function initAttChart(canvas, width, height) {
@@ -257,50 +127,6 @@ 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: {
@@ -311,10 +137,6 @@ export default {
       // 0:未选择 1：时间 2：次数
       // 折线图
       attCharts: initAttChart,
-      hight_att_charts: initHightPieChart,
-      radar_charts: initRadarChart,
-      pie_charts: initPieChart,
-
       echarts,
       record: {},
       userinfo: {},
@@ -340,29 +162,10 @@ export default {
       setTimeout(() => {
         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);
-
             //5分钟阶段
             let $five_min = 5 * 60;
             $this.is_cut = $this.record.play_time > $five_min;
@@ -372,6 +175,7 @@ export default {
                 $this.record.play_time / $five_min
               );
             }
+            $this.record.play_time = formatSeconds($this.record.play_time);
           },
           (err) => {
             Toast.fail("错误代码：" + res.code + "，联系客服");
@@ -412,7 +216,7 @@ export default {
               $option = util.getLineOption($line_data, [0]);
             }
             att_charts.setOption($option);
-          }, 800);
+          }, 1000);
         },
         (err) => {
           Toast.fail("错误代码：" + res.code + "，联系客服");
@@ -437,6 +241,7 @@ export default {
     wx.removeStorageSync("played_time");
     $this.get_report($this.record_id);
     $this.get_game_line($this.record_id);
+    console.log("进来时候获取到的信息", $this.record);
   },
   created() {
     $this = this;
@@ -558,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 {
@@ -602,7 +407,6 @@ image.boy {
   color: #6c6c6c;
   box-sizing: border-box;
 }
-
 .conclution_title {
   font-weight: 600;
   color: #000;
@@ -636,26 +440,6 @@ 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;
@@ -677,9 +461,4 @@ image.boy {
 .sheet .left {
   width: 195px;
 }
-
-.content_card {
-  border-radius: 10px;
-  box-shadow: 0px 6px 11px #dadada;
-}
 </style>

src/utils/index.js

@@ -332,7 +332,8 @@ export function cal_down_time($final_time) {
   }
 }
 
-export function getHightPieChartOption($params) {
+export function getHightPieChartOption($params, $total) {
+  console.log($params,$total);
   let $option = {
     tooltip: {
       trigger: 'item'
@@ -349,7 +350,7 @@ export function getHightPieChartOption($params) {
           // {value: $params, name: '高专注占比'},
           // {value: Math.abs(100-$params), name: '直接访问'},
           {value: $params, name: '高专注占比'},
-          {value: Math.abs(100 - $params), name: '直接访问'},
+          {value: Math.abs($total - $params), name: '直接访问'},
         ]
       }
     ]