游戏报告页添加了时间段筛选

dist/wx

@@ -1 +1 @@
-Subproject commit 19f89d41a15a3220c09ed1a99046c1b3975155bc
+Subproject commit 377462ab2ae28b19f11a621bc93c8ca2b8565494

src/pages/report/index.vue

@@ -50,6 +50,19 @@
     <view class="chart">
       <mpvue-echarts :echarts="echarts" :onInit="attCharts" canvasId="demo-canvas"/>
     </view>
+    <view class="section_container" v-if="is_cut">
+      <van-tabs
+        :active="0"
+        color="#6858C4"
+        type="card"
+        @change="changeMin"
+      >
+        <van-tab
+          :name="index"
+          :title="(5*index)+'-'+(5*(index+1)) + '分钟'" v-for="(section,index) in data_section"
+          :key="index"></van-tab>
+      </van-tabs>
+    </view>
     <view class="conclution">{{ record.content }}</view>
     <view class="bar">
       <view>
@@ -114,7 +127,14 @@ export default {
       echarts,
       record: {},
       userinfo: {},
-      record_id: 0
+      record_id: 0,
+
+      //是否截断数据
+      is_cut: false,
+      //数据截断数
+      data_section: 0,
+      //数据集合
+      data_lines: []
     }
   },
   methods: {
@@ -122,14 +142,21 @@ export default {
     get_report($record_id) {
       $this.record = {}
       Toast.loading({
-        forbidClick:true,
-        message:"加载中",
-        duration:0
+        forbidClick: true,
+        message: "加载中",
+        duration: 0
       })
       gameDetail($record_id).then((res) => {
         Toast.clear()
         let $res = res.data;
         $this.record = $res.data
+        //5分钟阶段
+        let $five_min = 5 * 60
+        $this.is_cut = $this.record.play_time > $five_min
+        if ($this.is_cut) {
+          //截断得数量
+          $this.data_section = Math.ceil($this.record.play_time / $five_min)
+        }
         $this.record.play_time = formatSeconds($this.record.play_time)
       })
     },
@@ -139,8 +166,29 @@ export default {
       }
       gameLineChart($params).then((res) => {
         let $res = res.data;
+        let $option = {}
         setTimeout(() => {
-          let $option = util.getLineOption($res.data.line, [0])
+          let $line_data = $res.data.line
+          if ($this.is_cut) {
+          //需要截断数据
+            let $more_than_count = $line_data.length % $this.data_section
+            let i = 0
+            //根据多出来的数 删除结尾得数量
+            for (i = 0; i < $more_than_count; i++) {
+              $line_data.pop()
+            }
+
+            $this.data_lines = []
+            //获取每一组得数据长度
+            let $item_len = $line_data.length / $this.data_section
+            for (i = 0; i < $this.data_section; i++) {
+              $this.data_lines.push($line_data.slice(i * $item_len, (i + 1) * $item_len))
+            }
+
+            $option = util.getLineOption($this.data_lines[0], [0])
+          } else {
+            $option = util.getLineOption($line_data, [0])
+          }
           att_charts.setOption($option)
         }, 1000)
       })
@@ -149,6 +197,12 @@ export default {
       mpvue.navigateTo({
         url: "/pages/game_record/main"
       })
+    },
+    //  切换时间查看线 数据
+    changeMin($e) {
+      let $index = $e.mp.detail.name
+      let $option = util.getLineOption($this.data_lines[$index], [0])
+      att_charts.setOption($option)
     }
   }
   ,
@@ -162,7 +216,6 @@ export default {
   },
   onLoad(options) {
     $this.record_id = options.id ? options.id : game_store.getters.getGameRecordId()
-    console.log($this.record_id)
   }
 }
 </script>
@@ -172,13 +225,14 @@ export default {
 .head {
   width: 442px;
   height: 385px;
-  background-color:#4b3ab0;
+  background-color: #4b3ab0;
   border-radius: 50%;
   position: absolute;
   left: -34px;
   top: -252px;
   z-index: -1;
 }
+
 /* 头部个人信息 */
 image.boy {
   width: 110px;
@@ -191,6 +245,7 @@ image.boy {
 .user {
   width: 100%;
 }
+
 .user .up {
   width: 100%;
   height: 40px;
@@ -200,18 +255,21 @@ image.boy {
   justify-content: space-between;
   color: #fff;
 }
+
 .user .up .left {
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: start;
 }
+
 .user .up .left image {
   width: 40px;
   height: 40px;
   margin-left: 17px;
   margin-right: 8px;
 }
+
 .user .up .left view {
   height: 40px;
   display: flex;
@@ -219,28 +277,34 @@ image.boy {
   align-items: flex-start;
   justify-content: space-between;
 }
-.user .up .left view text:first-child{
+
+.user .up .left view text:first-child {
   font-size: 15px;
   font-weight: bold;
 }
-.user .up .left view text:last-child{
+
+.user .up .left view text:last-child {
   font-size: 13px;
 }
+
 .user .up .right {
   height: 40px;
 
 }
+
 .user .up .right image {
   width: 14px;
   height: 15px;
   vertical-align: middle;
   margin-right: 4px;
 }
+
 .user .up .right text {
   font-size: 12px;
   text-decoration: underline;
   margin-right: 10px;
 }
+
 .user .down {
   width: 100%;
   height: 82px;
@@ -249,16 +313,19 @@ image.boy {
   align-items: center;
   justify-content: start;
 }
-.user .down view:first-child{
+
+.user .down view:first-child {
   font-size: 45px;
   color: #FFD800;
   font-weight: bold;
 }
-.user .down view:last-child{
+
+.user .down view:last-child {
   font-size: 10px;
   color: #C7C4D8;
   margin-top: -5px;
 }
+
 /* 详细数据 */
 .detail {
   width: 100%;
@@ -267,6 +334,7 @@ image.boy {
   align-items: center;
   justify-content: space-around;
 }
+
 .detail view {
   display: flex;
   flex-direction: column;
@@ -275,10 +343,12 @@ image.boy {
   color: #6C6C6C;
   font-size: 10px;
 }
+
 .detail view view:first-child {
   color: #000;
   font-size: 30px;
 }
+
 /* 小标题 */
 .bar {
   width: 100%;
@@ -296,6 +366,7 @@ image.boy {
   align-items: center;
   justify-content: start;
 }
+
 .conclution {
   width: 100%;
   padding: 5px 19px 20px;
@@ -303,6 +374,7 @@ image.boy {
   color: #6C6C6C;
   box-sizing: border-box;
 }
+
 .bar .line {
   width: 4px;
   height: 15px;
@@ -314,11 +386,13 @@ image.boy {
   color: #010101;
   font-size: 15px;
 }
+
 /* 图表 */
 #mychart-dom-multi-line {
   width: 360px;
   height: 193px;
 }
+
 .chart {
   margin: 0 auto;
   width: 360px;
@@ -337,6 +411,7 @@ image.boy {
   padding: 0 16px;
   box-sizing: border-box;
 }
+
 .sheet .left,
 .sheet .right {
   height: 95px;
@@ -345,6 +420,7 @@ image.boy {
   align-items: flex-start;
   justify-content: space-between;
 }
+
 .sheet .left {
   width: 195px;
 }

src/pages/report/main.json

@@ -4,6 +4,8 @@
     "van-col": "../../static/vant/col/index",
     "van-popup": "../../static/vant/popup/index",
     "van-toast": "../../static/vant/toast/index",
+    "van-tab": "../../static/vant/tab/index",
+    "van-tabs": "../../static/vant/tabs/index",
     "van-count-down": "../../static/vant/count-down/index"
   }
 }