浏览代码

修改了报告页,以及游戏中页面

智方网络_吖荣 3 年之前
父节点
当前提交
c5615065f8
共有 1 个文件被更改,包括 117 次插入11 次删除
  1. 117 11
      src/pages/report/index.vue

+ 117 - 11
src/pages/report/index.vue

@@ -123,6 +123,20 @@
         <view class="line"></view>
         <view class="title">专注力数值曲线</view>
       </view>
+      <view class="label">
+          <view>
+            <view class="dot dot-Att"></view>
+            <text class="name">专注力</text>
+          </view>
+          <view>
+            <view class="dot dot-Med"></view>
+            <text class="name">放松度</text>
+          </view>
+         <view>
+            <view class="dot dot-Amp"></view>
+            <text class="name">和谐度</text>
+          </view>
+        </view>
     </view>
 
     <view class="chart">
@@ -182,12 +196,27 @@
         </view>
       </view>
     </view>
+
+
     <!-- Aipha/Beta脑波变化曲线图 -->
     <view class="absorbed_change">
-      <view class="interfere_title_wrap">
-        <view class="line"></view>
-        <view class="title">Alpha/Beta脑波变化曲线图</view>
+      <view class="bar">
+        <view class="interfere_title_wrap">
+          <view class="line"></view>
+          <view class="title">Alpha/Theta脑波变化曲线图</view>
+        </view>
+        <view class="label">
+          <view>
+            <view class="dot dot-Alpha"></view>
+            <text class="name">Alpha</text>
+          </view>
+          <view>
+            <view class="dot dot-Theta"></view>
+            <text class="name">Theta</text>
+          </view>
+        </view>
       </view>
+
       <view class="chart">
         <mpvue-echarts
           :echarts="echarts"
@@ -197,11 +226,24 @@
       </view>
     </view>
     <!-- Delta/theta脑波变化曲线图 -->
-    <view class="absorbed_change">
-      <view class="interfere_title_wrap">
-        <view class="line"></view>
-        <view class="title">Delta/theta脑波变化曲线图</view>
+    <view class="absorbed_change ">
+      <view class="bar">
+        <view class="interfere_title_wrap">
+          <view class="line"></view>
+          <view class="title">Beta/Delta脑波变化曲线图</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>
+
       <view class="chart">
         <mpvue-echarts
           :echarts="echarts"
@@ -413,11 +455,11 @@ 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.beta)
-            $this.get_game_ab($this.record.alpha, $this.record.beta)
+            console.log($this.record.alpha, $this.record.theta)
+            $this.get_game_ab($this.record.alpha, $this.record.theta)
             // // 处理 delta theta
-            console.log($this.record.delta, $this.record.theta)
-            $this.get_game_dt($this.record.delta, $this.record.theta)
+            console.log($this.record.beta, $this.record.delta)
+            $this.get_game_dt($this.record.beta, $this.record.delta)
 
 
           },
@@ -981,4 +1023,68 @@ image.boy {
 .test {
   color: rgb(163, 7, 7);
 }
+
+.label {
+  color: #9a95b7;
+  font-size: 10px;
+}
+
+/*点图*/
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 4px;
+  margin-left: 15px;
+}
+
+.dot-Att {
+  background: #FAB615;
+}
+.dot-Med {
+  background: #40FF31;
+}
+.dot-Amp {
+  background: #D4327A;
+}
+
+.dot-Alpha {
+  background: #FF9107;
+}
+.dot-Theta {
+  background: #FFE838;
+}
+
+.dot-Beta {
+  background: #00CCFF;
+}
+
+.dot-Delta {
+  background: #0CDA2E;
+}
+
+/* 节标题  */
+.bar {
+  width: 100%;
+  height: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 7px;
+  box-sizing: border-box;
+  margin: 11px 0;
+}
+
+.bar view {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.bar .line {
+  width: 4px;
+  height: 15px;
+  background-color: #ffb400;
+  margin-right: 7px;
+}
 </style>