9/1 正式环境 & 训练报告样式调整

config/prod.env.js

@@ -1,5 +1,5 @@
 module.exports = {
   NODE_ENV: '"production"',
-  // REQUEST_URI: "'https://api.shuimuai.com/'"
-  REQUEST_URI:"'https://testapi.shuimuai.com/'"
+  REQUEST_URI: "'https://api.shuimuai.com/'"
+  // REQUEST_URI:"'https://testapi.shuimuai.com/'"
 }

project.private.config.json

@@ -29,6 +29,12 @@
           "pathName": "pages/user_center/recharge/main",
           "query": "",
           "scene": null
+        },
+        {
+          "name": "pages/report/main",
+          "pathName": "pages/report/main",
+          "query": "id=17700",
+          "scene": null
         }
       ]
     }

src/pages/report/index.vue

@@ -6,17 +6,17 @@
       <img :src="userinfo.portrait"/>
       <view class="info_wrap">
         <view class="box_wrap">
-          <text>{{ record.user_name }}</text>
+          <text class="margin-bottom-sm text-bold text-xl">{{ record.user_name }}</text>
           <text>{{ record.phone }}</text>
         </view>
         <view class="box_wrap info_right">
-          <text>{{ record.start_time }}</text>
+          <text class="margin-bottom-sm margin-top-xs">{{ record.start_time }}</text>
           <text>训练时间 : {{ record.play_time }}</text>
         </view>
 
       </view>
     </view>
-    <div class="bran_wrap">
+    <div class="bran_wrap margin-bottom">
       <img
         src="http://img.shuimuai.com/report_ brain_coefficient.png"
         alt=""
@@ -51,10 +51,10 @@
             canvasId="demo-canvas-interfere"
           />
         </view>
-        <view class="left_content">
+        <!-- <view class="left_content">
           <view class="left_num">{{ record.height_absorbed }}%</view>
           <view class="left_text">高专注力占比</view>
-        </view>
+        </view> -->
       </view>
       <!-- 数据详情 -->
       <view class="margin_centent">
@@ -63,7 +63,7 @@
           <view>专注力维持区间</view>
         </view>
         <view class="detail">
-          <view class="detail_num">{{ record.interfere }}</view>
+          <view class="detail_num">{{ record.interfere }}<text class="textLil text-gray">次</text></view>
           <view>受干扰次数</view>
         </view>
         <view class="detail">
@@ -71,14 +71,14 @@
           <view>专注力最大爆发值</view>
         </view>
         <view class="detail">
-          <view class="detail_num">{{ record.start }}</view>
+          <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 }}</view>
+        <view class="right_num">{{ record.att_average_big }}<text class="text-sm">{{ record.att_average_lil }}</text></view>
         <view class="right_text">平均专注力</view>
       </view>
 
@@ -99,6 +99,8 @@
       />
     </view>
 
+    <view class="divide_line"></view>
+
     <view class="">
       <view class="bar">
         <view>
@@ -108,6 +110,7 @@
       </view>
       <view class="conclution">{{ record.content }}</view>
       <!-- <view class="conclution">{{ record.content2 }}</view> -->
+      <view class="divide_line"></view>
 
       <view class="bar">
         <view>
@@ -116,6 +119,8 @@
         </view>
       </view>
       <view class="conclution">{{ record.advise }}</view>
+
+      <view class="divide_line"></view>
     </view>
 
     <view class="bar">
@@ -126,20 +131,20 @@
       <view class="label">
           <view>
             <view class="dot dot-Att"></view>
-            <text class="name">专注力</text>
+            <text class="name">Att(专注度)</text>
           </view>
           <view>
             <view class="dot dot-Med"></view>
-            <text class="name">放松度</text>
+            <text class="name">Med(放松度)</text>
           </view>
          <view>
             <view class="dot dot-Amp"></view>
-            <text class="name">和谐度</text>
+            <text class="name">Amp(和谐度)</text>
           </view>
         </view>
     </view>
 
-    <view class="chart">
+    <view class="chart chart_line">
       <mpvue-echarts
         :echarts="echarts"
         :onInit="attCharts"
@@ -165,10 +170,10 @@
       </van-tabs>
     </view>
 
-    <view class="cu-bar bg-white">
-      <view class="action">
-        <text class="cuIcon-titles text-primary"></text>
-        <text class="">专注力数值累计比例</text>
+    <view class="bar">
+      <view>
+        <view class="line"></view>
+        <view class="title">专注力数值累计比例</view>
       </view>
     </view>
     <view class="chart">
@@ -178,6 +183,8 @@
         canvasId="demo-canvas-1"
       />
     </view>
+
+    <view class="divide_line"></view>
     <!-- 核销详情 -->
     <view class="bar">
       <view>
@@ -197,27 +204,37 @@
       </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/Theta脑波变化曲线图</view>
+          <view class="title">Alpha/Beta脑波变化曲线图</view>
         </view>
-        <view class="label">
+        <view class="label_up">
           <view>
-            <view class="dot dot-Alpha"></view>
-            <text class="name">Alpha</text>
+            <view class="dot dot-Low-Alpha"></view>
+            <text class="name">Low-Alpha</text>
           </view>
           <view>
-            <view class="dot dot-Theta"></view>
-            <text class="name">Theta</text>
+            <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">
+      <view class="chart chart_line">
         <mpvue-echarts
           :echarts="echarts"
           :onInit="alpha_betaCharts"
@@ -226,25 +243,25 @@
       </view>
     </view>
     <!-- Delta/theta脑波变化曲线图 -->
-    <view class="absorbed_change ">
+    <view class="absorbed_change "> 
       <view class="bar">
         <view class="interfere_title_wrap">
           <view class="line"></view>
-          <view class="title">Beta/Delta脑波变化曲线图</view>
+          <view class="title">Delta/theta脑波变化曲线图</view>
         </view>
         <view class="label">
           <view>
-            <view class="dot dot-Beta"></view>
-            <text class="name">Beta</text>
-          </view>
-          <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">
+      <view class="chart chart_line">
         <mpvue-echarts
           :echarts="echarts"
           :onInit="delta_thetaCharts"
@@ -417,6 +434,13 @@ export default {
             // console.log("成绩记录数据", $res.data.interfereArr);
             // console.log("数据长度：", $res.data.line);
 
+
+            // 平均专注力大字
+            $this.record["att_average_big"] = parseInt($this.record["att_average"]);
+            // 平均专注力小字
+            $this.record["att_average_string"] = $this.record["att_average"].toString();
+            $this.record["att_average_lil"] = $this.record["att_average_string"].substring($this.record["att_average_string"].indexOf("."));
+
             $this.record.play_time = formatSeconds($this.record.play_time);
             $this.record.start_time = timestampToTimeS($this.record.start_time);
             $this.record.height_absorbed = Math.ceil(
@@ -424,7 +448,8 @@ export default {
             );
             let $options = getHightPieChartOption(
               $this.record.height,
-              $this.record.total
+              $this.record.total,
+              $this.record.height_absorbed,
             );
             hight_att_pie_charts.setOption($options);
 
@@ -456,10 +481,10 @@ export default {
             $this.get_game_line($this.record.line, $this.record.line_med, $this.record.amp)
             // 处理 alpha beta
             console.log($this.record.alpha, $this.record.theta)
-            $this.get_game_ab($this.record.alpha, $this.record.theta)
+            $this.get_game_ab($this.record.low_alpha, $this.record.high_alpha, $this.record.low_beta, $this.record.high_beta)
             // // 处理 delta theta
             console.log($this.record.beta, $this.record.delta)
-            $this.get_game_dt($this.record.beta, $this.record.delta)
+            $this.get_game_dt($this.record.delta, $this.record.theta)
 
 
           },
@@ -497,9 +522,9 @@ export default {
         att_charts.setOption($option);
       }, 800);
     },
-    get_game_ab($line_alpha, $line_beta) {
+    get_game_ab($line_alphaL, $line_alphaH, $line_betaL, $line_betaH) {
       let $option = {};
-      $option = util.getABOption($line_alpha, $line_beta);
+      $option = util.getABOption($line_alphaL, $line_alphaH, $line_betaL, $line_betaH);
       alpha_beta_charts.setOption($option);
     },
     get_game_dt($line_delta, $line_theta) {
@@ -566,25 +591,25 @@ image.boy {
 
 .user_info {
   width: 95%;
-  height: 51px;
+  height: 90px;
   display: flex;
   margin: 0 auto;
-  margin-bottom: 10px;
+  margin-bottom: 15px;
   align-items: center;
-  padding-right: 10px;
+  padding-right: 18px;
   box-sizing: border-box;
-  box-shadow: 0px 0px 10px rgba(51, 56, 74, 0.11);
-  border-radius: 5px;
-
+  box-shadow: 0px 3px 7px 0px rgba(159, 159, 159, 0.84);
+  border-radius: 10px;
   background: #fff;
 }
 
 .user_info img {
   display: inline-block;
-  width: 40px;
-  height: 40px;
-  margin-left: 10px;
-  margin-right: 8px;
+  width: 60px;
+  height: 60px;
+  margin-left: 15px;
+  margin-right: 12px;
+  border-radius: 5px;
 }
 
 .user_info .info_wrap {
@@ -596,7 +621,12 @@ image.boy {
 .user_info .box_wrap {
   display: flex;
   flex-direction: column;
-  color: #676767;
+  color: #222222;
+}
+
+.user_info .info_right {
+  color: #666666;
+  text-align: right
 }
 
 /* 智脑系数 */
@@ -611,8 +641,8 @@ image.boy {
 
 .bran_wrap img {
   display: inline-block;
-  width: 60px;
-  height: 68px;
+  width: 67px;
+  height: 80px;
   margin-right: 20px;
 }
 
@@ -625,14 +655,14 @@ image.boy {
 
 .bran_wrap .bran .p_num {
   color: #ffb72d;
-  font-size: 40px;
-  font-weight: 900;
+  font-size: 35px;
+  font-weight: bold;
 }
 
 .bran_wrap .bran .p_text {
   color: #333333;
   font-size: 12px;
-  font-weight: 900;
+  font-weight: bold;
 }
 
 /* 详细数据 */
@@ -651,6 +681,7 @@ image.boy {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  margin-left: 3px
 }
 
 .margin-tb .margin_left .left_content {
@@ -671,10 +702,17 @@ image.boy {
 }
 
 .margin-tb .margin_centent {
-  flex: 3;
+  flex: 2;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
+  padding: 12px 0;
+  margin-left: 10px;
+}
+
+.margin-tb .textLil {
+  font-size: 6px;
+  margin-left: 2px
 }
 
 .margin-tb .margin_right {
@@ -685,40 +723,41 @@ image.boy {
   align-items: center;
   color: #90df24;
   box-sizing: border-box;
-  padding: 0 3px;
+  /* padding-right:2px; */
 }
 
 .margin-tb .margin_right .right_num {
-  font-size: 25px;
-  font-weight: 900;
-  margin-bottom: 10px;
+  font-size: 30px;
+  font-weight: 800;
+  margin-bottom: 2px;
 }
 
 .margin-tb .margin_right .right_text {
-  width: 90%;
-  height: 20px;
+  width: 75%;
+  height: 15px;
   background: #90df24;
   color: #fff;
   text-align: center;
-  line-height: 20px;
+  line-height: 15px;
   font-size: 10px;
-  border-radius: 1px;
+  border-radius: 3px;
 }
 
 .margin-tb .detail {
-  width: 48%;
+  width: 47%;
   height: 50%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   color: #676767;
-  font-size: 11px;
+  font-size: 10px;
 }
 
 .margin-tb .detail .detail_num {
-  font-size: 18px;
-  font-weight: 900;
+  font-size: 15px;
+  font-weight: 800;
+  margin-bottom: 1px
 }
 
 
@@ -731,7 +770,7 @@ image.boy {
   justify-content: space-between;
   padding: 0 7px;
   box-sizing: border-box;
-  margin: 11px 0;
+  margin: 25px 0;
 }
 
 .bar view {
@@ -746,6 +785,8 @@ image.boy {
   font-size: 12px;
   color: #6c6c6c;
   box-sizing: border-box;
+  line-height: 25px;
+  margin-bottom: 28px
 }
 
 .conclution_title {
@@ -775,10 +816,13 @@ image.boy {
   margin: 0 auto;
   width: 360px;
   height: 193px;
-  background: #f3f3f3;
   opacity: 0.6;
   border-radius: 10px;
-  box-shadow: 0px 6px 11px #dadada;
+}
+
+.chart_line{
+  /* box-shadow: 0px 6px 11px #dadada; */
+  background: #f3f3f3;
 }
 
 /*雷达图*/
@@ -786,18 +830,19 @@ image.boy {
   margin: 0 auto;
   width: 360px;
   height: 293px;
-  background: #f3f3f3;
+  /* background: #f3f3f3; */
   opacity: 0.6;
   border-radius: 10px;
-  box-shadow: 0px 6px 11px #dadada;
+  /* box-shadow: 0px 6px 11px #dadada; */
 }
 
 .hight_pie_chart {
   /* margin: 0 auto; */
-  width: 100%;
-  height: 50px;
+  width: 120%;
+  height: 95px;
   background: #f3f3f3;
-  margin-top: 15px;
+  margin-top: 10px;
+  margin-left: -7px
   /*border-radius: 10px;*/
   /*box-shadow: 0px 6px 11px #dadada;*/
 }
@@ -809,6 +854,7 @@ image.boy {
   display: flex;
   padding: 0 16px;
   box-sizing: border-box;
+  margin-bottom: 30px
 }
 
 .sheet .left,
@@ -829,12 +875,19 @@ image.boy {
   box-shadow: 0px 6px 11px #dadada;
 }
 
+.divide_line{
+  width: 360px;
+  height: 1px;
+  background: #E5E5E5;
+  margin: 0 auto
+}
+
 /* 专注力干扰看板 */
 .absorbed_change {
   width: 100%;
-  padding: 0 7px;
+  /* padding: 0 7px; */
   box-sizing: border-box;
-  margin-top: 40px;
+  margin-top: 18px;
 }
 
 .absorbed_change .line {
@@ -854,7 +907,6 @@ image.boy {
   height: 40px;
   display: flex;
   align-items: center;
-  border-top: 1px solid #e5e5e5;
 }
 
 /* 干扰 标题*/
@@ -1029,6 +1081,15 @@ image.boy {
   font-size: 10px;
 }
 
+.label_up{
+  color: #9a95b7;
+  font-size: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  width:270px
+
+}
+
 /*点图*/
 .dot {
   width: 8px;
@@ -1048,19 +1109,34 @@ image.boy {
   background: #D4327A;
 }
 
-.dot-Alpha {
+/* .dot-Alpha {
   background: #FF9107;
-}
+} */
 .dot-Theta {
   background: #FFE838;
 }
 
-.dot-Beta {
+.dot-Low-Alpha{
+  background: #38FF49;
+}
+
+.dot-High-Alpha{
+  background: #00AD0E;
+}
+
+.dot-Low-Beta{
+  background: #0060F1;
+}
+
+.dot-High-Beta{
   background: #00CCFF;
 }
+/* .dot-Beta {
+  background: #00CCFF;
+} */
 
 .dot-Delta {
-  background: #0CDA2E;
+  background: #FF77B3;
 }
 
 /* 节标题  */
@@ -1072,7 +1148,7 @@ image.boy {
   justify-content: space-between;
   padding: 0 7px;
   box-sizing: border-box;
-  margin: 11px 0;
+  /* margin: 14px 0; */
 }
 
 .bar view {
@@ -1084,7 +1160,7 @@ image.boy {
 .bar .line {
   width: 4px;
   height: 15px;
-  background-color: #ffb400;
+  /* background-color: #ffb400; */
   margin-right: 7px;
 }
 </style>

src/utils/index.js

@@ -205,12 +205,12 @@ function getLineOption(lineData_att, lineData_med, lineData_amp) {
 }
 
 // alpha beta
-function getABOption(lineData_att, lineData_med) {
+function getABOption(lineData_alphaL, lineData_alphaH, lineData_betaL, lineData_betaH) {
   const that = this;
   var option = {
-    color: ["#FF9107", "#FFE838"],
+    color: ["#38FF49", "#00AD0E", "#0060F1", "#00CCFF"],
     legend: {
-      data: ["Alpha", "Beta"],
+      data: ["alphaL", "alphaH", "betaL", "betaH"],
       top: -5,
       left: 210,
       // left: 'center',
@@ -280,18 +280,32 @@ function getABOption(lineData_att, lineData_med) {
       show: false,
     },
     series: [{
-      name: "Alpha",
+      name: "alphaL",
       symbol: "none", //取消折点圆圈
       type: "line",
       smooth: true,
-      data: lineData_att,
+      data: lineData_alphaL,
     },
       {
-        name: "Beta",
+        name: "alphaH",
         symbol: "none", //取消折点圆圈
         type: "line",
         smooth: true,
-        data: lineData_med,
+        data: lineData_alphaH,
+      },
+      {
+        name: "betaL",
+        symbol: "none", //取消折点圆圈
+        type: "line",
+        smooth: true,
+        data: lineData_betaL,
+      },
+      {
+        name: "betaH",
+        symbol: "none", //取消折点圆圈
+        type: "line",
+        smooth: true,
+        data: lineData_betaH,
       },
     ],
     animation: false,
@@ -304,7 +318,7 @@ function getABOption(lineData_att, lineData_med) {
 function getDTOption(lineData_att, lineData_med) {
   const that = this;
   var option = {
-    color: ["#00CCFF", "#0CDA2E"],
+    color: ["#FF77B3", "#FFE838"],
     legend: {
       data: ["Delta", "Theta"],
       top: -5,
@@ -581,7 +595,7 @@ export function getHightPieChartOption($params, $total) {
     series: [{
       name: "访问来源",
       type: "pie",
-      radius: "80%",
+      radius: ["58%","85%"],
       labelLine: {
         show: false,
       },
@@ -590,11 +604,21 @@ export function getHightPieChartOption($params, $total) {
         // {value: Math.abs(100-$params), name: '直接访问'},
         {
           value: $params,
-          name: ''
+          name: '',
+          itemStyle: {
+            normal: {
+              color: "#FFB72D",
+            },
+          },
         },
         {
           value: Math.abs($total - $params),
-          name: ''
+          name: '',
+          itemStyle: {
+            normal: {
+              color: "#E6E6E6",
+            },
+          },
         },
       ]
     }]
@@ -609,19 +633,19 @@ export function getRadarChartOption($params) {
     tooltip: {},
     color: "#ffb72d",
     radar: {
-      radius: "55%",
+      radius: "65%",
       name: {
         textStyle: {
-          color: "#fff",
-          backgroundColor: "#999",
-          borderRadius: 3,
-          padding: [3, 5],
+          color: "#333333",
+          fontSize: 10,
+          fontWeight: "400",
+          fontFamily: "Microsoft YaHei",
         },
       },
       indicator: [{
-        name: "专注力平均值指数",
-        max: 100
-      },
+          name: "专注力平均指数",
+          max: 100
+        },
         {
           name: "专注力广度指数",
           max: 100
@@ -639,32 +663,35 @@ export function getRadarChartOption($params) {
           max: 100
         },
         {
-          name: "高专注力占比指数",
+          name: "高专注力占比",
           max: 100
         },
       ],
       splitArea: {
         show: true,
         areaStyle: {
-          color: ['#423b97', '#5b55a6', '#7570b4', '#a6a3ce', '#dddcec'],
+          color: ["#FFFFFF", "#E6E6E6", "#FFFFFF", "#E6E6E6", "#FFFFFF"],
           // 图表背景网格的颜色
         }
       },
-
+      axisLine: {
+        lineStyle: {
+          color: "#E6E6E6",
+        },
+      },
     },
     series: [{
       name: "预算 vs 开销（Budget vs spending）",
       type: "radar",
-
-      lineStyle: {
-        // color: "#D28885",
-        color: "#ffda93",
-      },
+      color: "#FFB72D",
+      symbolSize: 3,
       data: [{
         value: $params,
         // name: '实际开销（Actual Spending）'
         name: "专注力要素分析数据",
-
+        areaStyle: {
+          color: "#FFB72D",
+        },
       },],
     },],
   };
@@ -706,6 +733,10 @@ export function getPieChartsOption($pie_datas) {
         labelLine: {
           show: true,
         },
+        itemStyle: {
+          borderWidth: 2, //设置border的宽度有多大
+          borderColor: "#fff",
+        },
         data: $pie_datas["datas"],
       },],
     };