|
@@ -204,13 +204,13 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 专注力变化看板 -->
|
|
|
- <!-- <view class="absorbed_change">
|
|
|
+ <view class="absorbed_change">
|
|
|
<view class="interfere_title_wrap">
|
|
|
<view class="line"></view>
|
|
|
<view class="title">专注力变化分析</view>
|
|
|
- </view> -->
|
|
|
- <!-- 看板一 干扰 -->
|
|
|
- <!-- <view class="interfere_wrap">
|
|
|
+ </view>
|
|
|
+ <!-- 看板一 干扰 -->
|
|
|
+ <view class="interfere_wrap">
|
|
|
<view class="interfere">
|
|
|
<img
|
|
|
src="http://img.shuimuai.com/program_interfere_log.png"
|
|
@@ -223,11 +223,86 @@
|
|
|
次
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- 表图 -->
|
|
|
+ <view class="interfere_echarts_wrap">
|
|
|
+ <view class="interfere_echarts">
|
|
|
+ <mpvue-echarts
|
|
|
+ :echarts="echarts"
|
|
|
+ :onInit="interfere_charts"
|
|
|
+ canvasId="demo-canvas-4"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="interfere_echarts_bottom">
|
|
|
+ <text>0</text>
|
|
|
+ <text>2</text>
|
|
|
+ <text>4</text>
|
|
|
+ <text>6</text>
|
|
|
+ <text>8</text>
|
|
|
+ <text>10</text>
|
|
|
+ <text>12</text>
|
|
|
+ <text>14</text>
|
|
|
+ <text>16</text>
|
|
|
+ <text>18</text>
|
|
|
+ <text>20</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<view class="interfere_footer">
|
|
|
<title class="interfere_footer_logo"></title>专注力干扰
|
|
|
</view>
|
|
|
</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_wrap">
|
|
|
+ <view class="adjustment_echarts">
|
|
|
+ <mpvue-echarts
|
|
|
+ :echarts="echarts"
|
|
|
+ :onInit="adjustment_charts"
|
|
|
+ canvasId="demo-canvas-5"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="adjustment_echarts_bottom">
|
|
|
+ <text>0</text>
|
|
|
+ <text>2</text>
|
|
|
+ <text>4</text>
|
|
|
+ <text>6</text>
|
|
|
+ <text>8</text>
|
|
|
+ <text>10</text>
|
|
|
+ <text>12</text>
|
|
|
+ <text>14</text>
|
|
|
+ <text>16</text>
|
|
|
+ <text>18</text>
|
|
|
+ <text>20</text>
|
|
|
+ </view>
|
|
|
+ </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" />
|
|
|
|
|
@@ -244,12 +319,21 @@ import util, {
|
|
|
getPieChartsOption,
|
|
|
getRadarChartOption,
|
|
|
timestampToTimeS,
|
|
|
+ getInterfereChartsOption,
|
|
|
+ interfereAction,
|
|
|
+ getAdjustmentChartsOption,
|
|
|
} 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,
|
|
|
+ hight_att_pie_charts,
|
|
|
+ radar_charts,
|
|
|
+ $pie_charts,
|
|
|
+ $interfere_echarts,
|
|
|
+ $adjustment_echarts,
|
|
|
+ $this;
|
|
|
|
|
|
// 大脑图表初始化
|
|
|
function initAttChart(canvas, width, height) {
|
|
@@ -310,6 +394,35 @@ function initPieChart(canvas, width, height) {
|
|
|
return $pie_charts; // 返回 chart 后可以自动绑定触摸操作
|
|
|
}
|
|
|
|
|
|
+// 干扰图表初始化 interfere_echarts
|
|
|
+function interfereChart(canvas, width, height) {
|
|
|
+ $interfere_echarts = echarts.init(canvas, null, {
|
|
|
+ width: width,
|
|
|
+ height: height,
|
|
|
+ });
|
|
|
+ canvas.setChart($interfere_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",
|
|
|
components: {
|
|
@@ -318,11 +431,13 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// 0:未选择 1:时间 2:次数
|
|
|
- // 折线图
|
|
|
+ // 折线图 表格数据
|
|
|
attCharts: initAttChart,
|
|
|
hight_att_charts: initHightPieChart,
|
|
|
radar_charts: initRadarChart,
|
|
|
pie_charts: initPieChart,
|
|
|
+ interfere_charts: interfereChart,
|
|
|
+ adjustment_charts: adjustmentCharts,
|
|
|
|
|
|
echarts,
|
|
|
record: {},
|
|
@@ -335,6 +450,10 @@ export default {
|
|
|
data_section: 0,
|
|
|
//数据集合
|
|
|
data_lines: [],
|
|
|
+ // 干扰值
|
|
|
+ interfereData: [],
|
|
|
+ // 调整能力值
|
|
|
+ adjustmentData: [],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -352,10 +471,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
|
|
|
);
|
|
@@ -389,6 +510,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 + ",联系客服");
|
|
@@ -802,6 +936,31 @@ image.boy {
|
|
|
font-weight: 900;
|
|
|
}
|
|
|
/* 干扰 echarts */
|
|
|
+.interfere_echarts_wrap {
|
|
|
+ width: 360px;
|
|
|
+ height: 193px;
|
|
|
+ background: #f3f3f3;
|
|
|
+ opacity: 0.6;
|
|
|
+ box-shadow: 0px 6px 11px #dadada;
|
|
|
+}
|
|
|
+.interfere_echarts {
|
|
|
+ /* margin: 0 auto; */
|
|
|
+ width: 100%;
|
|
|
+ height: 173px;
|
|
|
+ /* background: #f3f3f3;
|
|
|
+ opacity: 0.6;
|
|
|
+ box-shadow: 0px 6px 11px #dadada; */
|
|
|
+}
|
|
|
+.interfere_echarts_bottom {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 90%;
|
|
|
+ height: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #828282;
|
|
|
+}
|
|
|
/* 干扰 bottom */
|
|
|
.interfere_footer {
|
|
|
width: 100%;
|
|
@@ -813,6 +972,7 @@ image.boy {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
.interfere_footer .interfere_footer_logo {
|
|
|
display: inline-block;
|
|
@@ -821,4 +981,83 @@ 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_wrap {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 360px;
|
|
|
+ height: 193px;
|
|
|
+
|
|
|
+ background: #f3f3f3;
|
|
|
+ opacity: 0.6;
|
|
|
+ box-shadow: 0px 6px 11px #dadada;
|
|
|
+}
|
|
|
+.adjustment_echarts {
|
|
|
+ width: 100%;
|
|
|
+ height: 173px;
|
|
|
+}
|
|
|
+.adjustment_echarts_bottom {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 90%;
|
|
|
+ height: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #828282;
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
+.test {
|
|
|
+ color: rgb(163, 7, 7);
|
|
|
+}
|
|
|
</style>
|