更新成绩记录后两个看板

src/pages/report/index.vue

@@ -227,12 +227,49 @@
           <mpvue-echarts
             :echarts="echarts"
             :onInit="interfere_charts"
+            canvasId="demo-canvas-4"
           />
         </view>
         <view class="interfere_footer">
           <title class="interfere_footer_logo"></title>专注力干扰
         </view>
       </view>
+
+      <!-- 调整能力分析 -->
+      <view class="adjustment_warp">
+        <view class="adjustment_title">
+          <img
+            src="http://img.shuimuai.com/program_rise_log.png"
+            alt=""
+            class="adjustment_title_logo"
+          >
+          <text>调整能力分析</text>
+        </view>
+        <view class="adjustment_echarts">
+          <mpvue-echarts
+            :echarts="echarts"
+            :onInit="adjustment_charts"
+            canvasId="demo-canvas-5"
+          />
+        </view>
+        <view class="adjustment_footer">
+          <view class="adjustment_footer_logo"></view>专注力上升
+        </view>
+      </view>
+
+      <!-- 爆发值和调整时间 -->
+      <view class="absorbed_change_footer">
+        <view class="footer_text">
+          最大爆发值:
+          <text class="footer_text_W">{{ record.burst }}</text>
+        </view>
+        <view class="footer_text">
+          平均调整时间:
+          <text class="footer_text_W">{{ record.burstTime}}</text>
+          s
+        </view>
+      </view>
+
     </view>
 
     <van-toast id="van-toast" />
@@ -251,6 +288,8 @@ import util, {
   getRadarChartOption,
   timestampToTimeS,
   getInterfereChartsOption,
+  interfereAction,
+  getAdjustmentChartsOption,
 } from "../../utils/index";
 import { gameDetail, gameLineChart } from "../../requests/game";
 import game_store from "../../store/game";
@@ -261,6 +300,7 @@ var att_charts,
   radar_charts,
   $pie_charts,
   $interfere_echarts,
+  $adjustment_echarts,
   $this;
 
 // 大脑图表初始化
@@ -330,12 +370,26 @@ function interfereChart(canvas, width, height) {
   });
   canvas.setChart($interfere_echarts);
 
-  var option = getInterfereChartsOption(true); // ECharts 配置项
+  var option = getInterfereChartsOption(); // ECharts 配置项
 
   $interfere_echarts.setOption(option);
 
   return $interfere_echarts; // 返回 chart 后可以自动绑定触摸操作
 }
+// 调整能力表初始化 interfere_echarts
+function adjustmentCharts(canvas, width, height) {
+  $adjustment_echarts = echarts.init(canvas, null, {
+    width: width,
+    height: height,
+  });
+  canvas.setChart($adjustment_echarts);
+
+  var option = getAdjustmentChartsOption(); // ECharts 配置项
+
+  $adjustment_echarts.setOption(option);
+
+  return $adjustment_echarts; // 返回 chart 后可以自动绑定触摸操作
+}
 
 export default {
   name: "index_container",
@@ -351,6 +405,7 @@ export default {
       radar_charts: initRadarChart,
       pie_charts: initPieChart,
       interfere_charts: interfereChart,
+      adjustment_charts: adjustmentCharts,
 
       echarts,
       record: {},
@@ -363,6 +418,10 @@ export default {
       data_section: 0,
       //数据集合
       data_lines: [],
+      //  干扰值
+      interfereData: [],
+      // 调整能力值
+      adjustmentData: [],
     };
   },
   methods: {
@@ -380,10 +439,12 @@ export default {
             Toast.clear();
             let $res = res.data;
             $this.record = $res.data;
-            console.log("成绩记录参数", $this.record);
+
+            console.log("成绩记录数据", $res.data.interfereArr);
+            console.log("数据长度：", $res.data.line);
+
             $this.record.play_time = formatSeconds($this.record.play_time);
             $this.record.start_time = timestampToTimeS($this.record.start_time);
-            console.log("训练时间", $this.record.start_time);
             $this.record.height_absorbed = Math.ceil(
               $this.record.height / $this.record.total * 100
             );
@@ -417,6 +478,19 @@ export default {
                 $this.record.play_time / $five_min
               );
             }
+
+            // 干扰值数据传输
+            $this.interfereData = interfereAction($res.data.interfereArr);
+            let $interfere_option = getInterfereChartsOption(
+              $this.interfereData
+            );
+            $interfere_echarts.setOption($interfere_option);
+            // 调整能力数据传输
+            $this.adjustmentData = interfereAction($res.data.burstArr);
+            let $adjustment_option = getAdjustmentChartsOption(
+              $this.adjustmentData
+            );
+            $adjustment_echarts.setOption($adjustment_option);
           },
           (err) => {
             Toast.fail("错误代码：" + res.code + "，联系客服");
@@ -831,7 +905,7 @@ image.boy {
 }
 /* 干扰 echarts */
 .interfere_echarts {
-  margin: 0 auto;
+  /* margin: 0 auto; */
   width: 360px;
   height: 193px;
   background: #f3f3f3;
@@ -850,6 +924,7 @@ image.boy {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-top: 10px;
 }
 .interfere_footer .interfere_footer_logo {
   display: inline-block;
@@ -858,4 +933,64 @@ image.boy {
   background-color: #23cc92;
   margin-right: 5px;
 }
+/* 调整能力 */
+.adjustment_warp {
+  margin-top: 50px;
+}
+.adjustment_title {
+  display: flex;
+  color: #676767;
+  font-size: 15px;
+  padding-left: 8px;
+  box-sizing: border-box;
+  margin-bottom: 35px;
+}
+.adjustment_title .adjustment_title_logo {
+  display: inline-block;
+  width: 19px;
+  height: 19px;
+  margin-right: 7px;
+}
+.adjustment_echarts {
+  margin: 0 auto;
+  width: 360px;
+  height: 193px;
+  background: #f3f3f3;
+  opacity: 0.6;
+  box-shadow: 0px 6px 11px #dadada;
+}
+.adjustment_footer {
+  width: 100%;
+  height: 26px;
+  font-size: 13px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #676767;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+}
+.adjustment_footer .adjustment_footer_logo {
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  background-color: #f3a100;
+  margin-right: 5px;
+}
+/* 爆发值和调整时间 */
+.absorbed_change_footer {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 28px;
+}
+
+.absorbed_change_footer .footer_text {
+  font-size: 16px;
+  color: #676767;
+}
+.footer_text_W {
+  font-size: 21px;
+  font-weight: 600;
+}
 </style>

src/requests/game.js

@@ -21,7 +21,7 @@ export function gameEnd($params) {
 export function gameDetail($record_id) {
   let $params = {};
   $params["game_record_id"] = $record_id;
-    // $params["game_record_id"] = "5484";
+  // $params["game_record_id"] = "5484";
   $params["access_token"] = wx.getStorageSync("token");
   return fly.post("game/game-detail", $params);
 }

src/utils/game.js

@@ -95,3 +95,11 @@ function to_report() {
     }
   })
 }
+
+
+
+
+
+
+
+

src/utils/index.js

@@ -74,7 +74,7 @@ export function formatBirthday(date) {
   return `${t1}`;
 }
 
-// 专注力与放松力图表
+// 专注力与放松力图表 小乌龟
 function getLineOption(lineData_att, lineData_med) {
   const that = this;
   var option = {
@@ -149,21 +149,20 @@ function getLineOption(lineData_att, lineData_med) {
       },
       show: false,
     },
-    series: [
-      {
-        name: "Att(专注度)",
-        symbol: "none", //取消折点圆圈
-        type: "line",
-        smooth: true,
-        data: lineData_att,
-      },
-      {
-        name: "Med(放松度)",
-        symbol: "none", //取消折点圆圈
-        type: "line",
-        smooth: true,
-        data: lineData_med,
-      },
+    series: [{
+      name: "Att(专注度)",
+      symbol: "none", //取消折点圆圈
+      type: "line",
+      smooth: true,
+      data: lineData_att,
+    },
+    {
+      name: "Med(放松度)",
+      symbol: "none", //取消折点圆圈
+      type: "line",
+      smooth: true,
+      data: lineData_med,
+    },
     ],
     animation: false,
   };
@@ -241,35 +240,34 @@ function getBaseOption(delta, theta, alpha, beta) {
       },
       show: false,
     },
-    series: [
-      {
-        name: "Delta",
-        symbol: "none", //取消折点圆圈
-        type: "line",
-        smooth: true,
-        data: delta,
-      },
-      {
-        name: "Theta",
-        symbol: "none", //取消折点圆圈
-        type: "line",
-        smooth: true,
-        data: theta,
-      },
-      {
-        name: "Alpha",
-        symbol: "none", //取消折点圆圈
-        type: "line",
-        smooth: true,
-        data: alpha,
-      },
-      {
-        name: "Beta",
-        symbol: "none", //取消折点圆圈
-        type: "line",
-        smooth: true,
-        data: beta,
-      },
+    series: [{
+      name: "Delta",
+      symbol: "none", //取消折点圆圈
+      type: "line",
+      smooth: true,
+      data: delta,
+    },
+    {
+      name: "Theta",
+      symbol: "none", //取消折点圆圈
+      type: "line",
+      smooth: true,
+      data: theta,
+    },
+    {
+      name: "Alpha",
+      symbol: "none", //取消折点圆圈
+      type: "line",
+      smooth: true,
+      data: alpha,
+    },
+    {
+      name: "Beta",
+      symbol: "none", //取消折点圆圈
+      type: "line",
+      smooth: true,
+      data: beta,
+    },
     ],
     animation: false,
   };
@@ -353,28 +351,32 @@ export function getHightPieChartOption($params, $total) {
       // trigger: 'item'
       show: false,
     },
-    series: [
-      {
-        name: "访问来源",
-        type: "pie",
-        radius: "80%",
-        labelLine: {
-          show: false,
+    series: [{
+      name: "访问来源",
+      type: "pie",
+      radius: "80%",
+      labelLine: {
+        show: false,
+      },
+      data: [
+        // {value: $params, name: '高专注占比'},
+        // {value: Math.abs(100-$params), name: '直接访问'},
+        {
+          value: $params,
+          name: ''
         },
-        data: [
-          // {value: $params, name: '高专注占比'},
-          // {value: Math.abs(100-$params), name: '直接访问'},
-          {value: $params, name: ''},
-          {value: Math.abs($total - $params), name: ''},
-        ]
-      }
-    ]
+        {
+          value: Math.abs($total - $params),
+          name: ''
+        },
+      ]
+    }]
   };
   return $option;
 }
 
 export function getRadarChartOption($params) {
-  console.log("雷达图参数会打印什么呢？", $params);
+
   let $option = {
     tooltip: {},
     radar: {
@@ -388,32 +390,45 @@ export function getRadarChartOption($params) {
           padding: [3, 5],
         },
       },
-      indicator: [
-        { name: "专注力平均值指数", max: 100 },
-        { name: "专注力广度指数", max: 100 },
-        { name: "专注力爆发指数", max: 100 },
-        { name: "专注力抗性指数", max: 100 },
-        { name: "专注力启动指数", max: 100 },
-        { name: "高专注力占比指数", max: 100 },
+      indicator: [{
+        name: "专注力平均值指数",
+        max: 100
+      },
+      {
+        name: "专注力广度指数",
+        max: 100
+      },
+      {
+        name: "专注力爆发指数",
+        max: 100
+      },
+      {
+        name: "专注力抗性指数",
+        max: 100
+      },
+      {
+        name: "专注力启动指数",
+        max: 100
+      },
+      {
+        name: "高专注力占比指数",
+        max: 100
+      },
       ],
     },
-    series: [
-      {
-        name: "预算 vs 开销（Budget vs spending）",
-        type: "radar",
-        // areaStyle: {normal: {}},
-        lineStyle: {
-          color: "#D28885",
-        },
-        data: [
-          {
-            value: $params,
-            // name: '实际开销（Actual Spending）'
-            name: "专注力要素分析数据",
-          },
-        ],
+    series: [{
+      name: "预算 vs 开销（Budget vs spending）",
+      type: "radar",
+      // areaStyle: {normal: {}},
+      lineStyle: {
+        color: "#D28885",
       },
-    ],
+      data: [{
+        value: $params,
+        // name: '实际开销（Actual Spending）'
+        name: "专注力要素分析数据",
+      },],
+    },],
   };
   return $option;
 }
@@ -433,30 +448,28 @@ export function getPieChartsOption($pie_datas) {
         top: "20%",
         data: $pie_datas["legends"],
       },
-      series: [
-        {
-          name: "访问来源",
-          type: "pie",
-          radius: ["40%", "70%"],
-          avoidLabelOverlap: false,
+      series: [{
+        name: "访问来源",
+        type: "pie",
+        radius: ["40%", "70%"],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: "center",
+        },
+        right: "40%",
+        emphasis: {
           label: {
-            show: false,
-            position: "center",
-          },
-          right: "40%",
-          emphasis: {
-            label: {
-              show: true,
-              fontSize: "30",
-              fontWeight: "bold",
-            },
-          },
-          labelLine: {
             show: true,
+            fontSize: "30",
+            fontWeight: "bold",
           },
-          data: $pie_datas["datas"],
         },
-      ],
+        labelLine: {
+          show: true,
+        },
+        data: $pie_datas["datas"],
+      },],
     };
     return option;
   }
@@ -511,14 +524,13 @@ export function filterPieData(datas) {
   datas.forEach(($val, $index) => {
     legends.push(
       $att_region[$index]["min"] +
-        "-" +
-        $att_region[$index]["max"] +
-        "：" +
-        formatSeconds($val)
+      "-" +
+      $att_region[$index]["max"] +
+      "：" +
+      formatSeconds($val)
     );
     let _data = {
-      name:
-        $att_region[$index]["min"] +
+      name: $att_region[$index]["min"] +
         "-" +
         $att_region[$index]["max"] +
         "：" +
@@ -527,16 +539,20 @@ export function filterPieData(datas) {
     };
     datas[$index] = _data;
   });
-  return { datas, legends };
+  return {
+    datas,
+    legends
+  };
 }
-// 受干扰次数 getInterfereChartsOption
+// 受干扰次数 getInterfereChartsOption 小乌龟
 export function getInterfereChartsOption(interfere_datas) {
-  console.log('干扰初始化',interfere_datas)
+  // console.log('干扰初始化', interfere_datas)
   if (interfere_datas) {
     let option = {
+      color: '#23CC92',
       // 标题
       title: {
-        left: 1220,
+        // left: 1220,
       },
       // 提示
       tooltip: {
@@ -545,38 +561,82 @@ export function getInterfereChartsOption(interfere_datas) {
           type: "shadow",
         },
       },
-   
- 
+      grid: {
+        top: 20,
+        bottom: 40
+      },
       // x轴数据显示
       xAxis: {
-        show: true,
 
-        type: "category",
-        //  data: [1,2,3,4,5,6,7,8,9],
+        type: 'category',
+        boundaryGap: false,
+        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
         splitNumber: 10,
-        silent: false,
-        splitLine: {
-          show: false,
-        },
-        splitArea: {
-          show: false,
-        },
       },
       // y轴坐标显示
       yAxis: {
-        splitArea: {
-          show: false,
-        },
+
+        type: "value",
+        splitNumber: 5,
+        min: -100,
+        max: 0,
       },
       //数据配置项
-      series: [
-        {
-          type: "bar",
-          // type: "line",
-          data: [1,2,3,4,5,6,7,8,9,99],
-          large: true,
+      series: [{
+
+        data: interfere_datas,
+        type: "line",
+        large: true,
+        areaStyle: {}
+      },],
+    }
+    return option
+  }
+}
+
+//  能力调整 getAdjustmentChartsOption
+export function getAdjustmentChartsOption(interfere_datas) {
+  console.log('调整初始化', interfere_datas)
+  if (interfere_datas) {
+    let option = {
+      color: '#F3A100',
+      // 标题
+      title: {
+        // left: 1220,
+      },
+      grid: {
+        top: 10,
+        bottom: 10
+      },
+      // 提示
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
         },
-      ],
+      },
+      // x轴数据显示
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        // data: ['a2', '4', '6', '8', '10', '12', '14', '16', '18', '20']
+      },
+      // y轴坐标显示
+      yAxis: {
+        // x: "center",
+        type: "value",
+        splitNumber: 5,
+        min: 0,
+        max: 100,
+      },
+      //数据配置项
+      series: [{
+
+        data: interfere_datas,
+        type: "line",
+        large: true,
+        areaStyle: {}
+      },],
     }
     return option
   }
@@ -588,9 +648,9 @@ export function timestampToTimeS(timestamp) {
   var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
   var Y = date.getFullYear() + "-";
   var M =
-    (date.getMonth() + 1 < 10
-      ? "0" + (date.getMonth() + 1)
-      : date.getMonth() + 1) + "-";
+    (date.getMonth() + 1 < 10 ?
+      "0" + (date.getMonth() + 1) :
+      date.getMonth() + 1) + "-";
   var D = date.getDate() + " ";
   var h = date.getHours() + ":";
   var m = date.getMinutes() + ":";
@@ -598,11 +658,33 @@ export function timestampToTimeS(timestamp) {
   return Y + M + D + h + m + s;
 }
 
+
+// 成绩记录干扰图表数据处理  
+export function interfereAction($data) {
+  if ($data) {
+    let $interfereArr = []
+    let $objData = {};
+    //  自定义的对象 1200s 20分钟
+    for (var i = 0; i < 1200; i++) {
+      $objData[i] = 0;
+    }
+    var $newObj = Object.assign($objData, $data);
+    // 对象转数组
+    for (const key in $newObj) {
+      $interfereArr.push($newObj[key]);
+    }
+    return $interfereArr
+
+  } else {
+    console.log("无数据", $data)
+  }
+}
 export default {
   formatNumber,
   formatTime,
   getLineOption,
   getBaseOption,
   get_level_name,
-  timestampToTimeS
+  timestampToTimeS,
+  interfereAction
 };