5/6更改记录详情样式前保存

src/pages/index/index.vue

@@ -227,9 +227,9 @@ export default {
       user_store.setters.set_token($token);
       user_store.setters.set_login(true);
       this.is_login = user_store.getters.get_login_status();
-      wx.navigateTo({
-        url: "/pages/payment/main",
-      });
+      // wx.navigateTo({
+      //   url: "/pages/payment/main",
+      // });
     }
   },
   created() {

src/pages/report/index.vue

@@ -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-echarts
+                :echarts="echarts"
+                :onInit="hight_att_charts"
+                canvasId="demo-canvas1"
+              />
+            </view>
+            <view class="detail">
+              <view>
+                <view>{{ record.height_absorbed }}%</view>
+                <view>高专注力占比</view>
+              </view>
+            </view>
+          </view>
+        </van-col>
+      </van-row>
+    </view>
+
     <view class="bar">
       <view>
         <view class="line"></view>
-        <view class="title">数据详情</view>
+        <view 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: {},
@@ -162,10 +340,35 @@ export default {
       setTimeout(() => {
         gameDetail($record_id).then(
           (res) => {
-            console.log("get_game_detail", res);
             Toast.clear();
             let $res = res.data;
             $this.record = $res.data;
+            console.log("成绩记录参数", $this.record);
+            $this.record.play_time = formatSeconds($this.record.play_time);
+            $this.record.height_absorbed = Math.ceil(
+              $this.record.height / $this.record.total * 100
+            );
+            let $options = getHightPieChartOption(
+              $this.record.height,
+              $this.record.total
+            );
+            hight_att_pie_charts.setOption($options);
+
+            //设置雷达图
+            $options = getRadarChartOption([
+              $this.record.att_average, //平均
+              $this.record.att_scope, //广度
+              $this.record.att_burst, //爆发
+              $this.record.att_interfere, //抗干扰
+              $this.record.att_start, //启动
+              $this.record.att_height, // 高专注占比
+            ]);
+            radar_charts.setOption($options);
+
+            let $pie_data = filterPieData($this.record.level);
+            let $pie_option = getPieChartsOption($pie_data);
+            $pie_charts.setOption($pie_option);
+
             //5分钟阶段
             let $five_min = 5 * 60;
             $this.is_cut = $this.record.play_time > $five_min;
@@ -175,7 +378,6 @@ export default {
                 $this.record.play_time / $five_min
               );
             }
-            $this.record.play_time = formatSeconds($this.record.play_time);
           },
           (err) => {
             Toast.fail("错误代码：" + res.code + "，联系客服");
@@ -216,7 +418,7 @@ export default {
               $option = util.getLineOption($line_data, [0]);
             }
             att_charts.setOption($option);
-          }, 1000);
+          }, 800);
         },
         (err) => {
           Toast.fail("错误代码：" + res.code + "，联系客服");
@@ -241,7 +443,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 +564,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 +608,7 @@ image.boy {
   color: #6c6c6c;
   box-sizing: border-box;
 }
+
 .conclution_title {
   font-weight: 600;
   color: #000;
@@ -440,6 +642,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 +683,9 @@ image.boy {
 .sheet .left {
   width: 195px;
 }
+
+.content_card {
+  border-radius: 10px;
+  box-shadow: 0px 6px 11px #dadada;
+}
 </style>

src/pages/report/index.vue.bakk → 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_absorbed }}%</view>
-                <view>高专注力占比</view>
-              </view>
-            </view>
-          </view>
-        </van-col>
-      </van-row>
-    </view>
-
     <view class="bar">
       <view>
         <view class="line"></view>
-        <view class="title">专注力要素分析</view>
+        <view 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, 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,35 +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;
-            console.log("成绩记录参数", $this.record);
-            $this.record.play_time = formatSeconds($this.record.play_time);
-            $this.record.height_absorbed = Math.ceil(
-              $this.record.height / $this.record.total * 100
-            );
-            let $options = getHightPieChartOption(
-              $this.record.height,
-              $this.record.total
-            );
-            hight_att_pie_charts.setOption($options);
-
-            //设置雷达图
-            $options = getRadarChartOption([
-              $this.record.att_average, //平均
-              $this.record.att_scope, //广度
-              $this.record.att_burst, //爆发
-              $this.record.att_interfere, //抗干扰
-              $this.record.att_start, //启动
-              $this.record.att_height, // 高专注占比
-            ]);
-            radar_charts.setOption($options);
-
-            let $pie_data = filterPieData($this.record.level);
-            let $pie_option = getPieChartsOption($pie_data);
-            $pie_charts.setOption($pie_option);
-
             //5分钟阶段
             let $five_min = 5 * 60;
             $this.is_cut = $this.record.play_time > $five_min;
@@ -378,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 + "，联系客服");
@@ -418,7 +216,7 @@ export default {
               $option = util.getLineOption($line_data, [0]);
             }
             att_charts.setOption($option);
-          }, 800);
+          }, 1000);
         },
         (err) => {
           Toast.fail("错误代码：" + res.code + "，联系客服");
@@ -443,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;
@@ -564,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 {
@@ -608,7 +407,6 @@ image.boy {
   color: #6c6c6c;
   box-sizing: border-box;
 }
-
 .conclution_title {
   font-weight: 600;
   color: #000;
@@ -642,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;
@@ -683,9 +461,4 @@ image.boy {
 .sheet .left {
   width: 195px;
 }
-
-.content_card {
-  border-radius: 10px;
-  box-shadow: 0px 6px 11px #dadada;
-}
 </style>