index.vue 32 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450
  1. <template>
  2. <div id="report_container">
  3. <!-- 头部信息 -->
  4. <view class="user_info">
  5. <img :src="userinfo.portrait"/>
  6. <view class="info_wrap">
  7. <view class="box_wrap margin-bottom-sm box_wrap_left">
  8. <text class="text-bold text-xl">{{ record.user_name }}</text>
  9. <text class="info_right">{{ record.start_time }}</text>
  10. </view>
  11. <view class="box_wrap box_wrap_right">
  12. <text>{{ record.phone }}</text>
  13. <text class="info_right">训练时间:{{ record.play_time }}</text>
  14. </view>
  15. </view>
  16. </view>
  17. <div v-if="report_show">
  18. <div class="bran_wrap margin-bottom">
  19. <img
  20. src="http://img.shuimuai.com/report_ brain_coefficient.png"
  21. alt=""
  22. >
  23. <div class="bran">
  24. <p class="p_num">{{ record.ratio }}</p>
  25. <p class="p_text">智脑系数</p>
  26. </div>
  27. </div>
  28. <view>
  29. <van-divider
  30. contentPosition="left"
  31. borderColor="#E98F36"
  32. >
  33. <van-image
  34. src="https://img.shuimuai.com/line.png"
  35. alt=""
  36. width="40"
  37. height="40"
  38. ></van-image>
  39. </van-divider>
  40. </view>
  41. <!-- 专注力维持区间、受干扰次数,专注力最大爆发值、专注力启动时长-->
  42. <view class="margin-tb">
  43. <!-- 高专注力占比 -->
  44. <view class="margin_left">
  45. <view class="hight_pie_chart">
  46. <mpvue-echarts
  47. :echarts="echarts"
  48. :onInit="hight_att_charts"
  49. canvasId="demo-canvas-interfere"
  50. />
  51. </view>
  52. <view class="left_content">
  53. <view class="left_num">{{ record.height_absorbed }}
  54. <text class="textLil text-gray">%</text>
  55. </view>
  56. <view class="left_text">高专注力<br/>&emsp;占比</view>
  57. </view>
  58. </view>
  59. <!-- 数据详情 -->
  60. <view class="margin_centent">
  61. <view class="detail">
  62. <te class="detail_num">{{ record.scope_diff }}</te>
  63. <view>专注力维持区间</view>
  64. </view>
  65. <view class="detail">
  66. <view class="detail_num">{{ record.interfere }}
  67. <text class="textLil text-gray">次</text>
  68. </view>
  69. <view>受干扰次数</view>
  70. </view>
  71. <view class="detail">
  72. <view class="detail_num">{{ record.burst }}</view>
  73. <view>专注力最大爆发值</view>
  74. </view>
  75. <view class="detail">
  76. <view class="detail_num">{{ record.start }}
  77. <text class="textLil text-gray">秒</text>
  78. </view>
  79. <view>专注力启动时长</view>
  80. </view>
  81. </view>
  82. <!-- 平均专注力 -->
  83. <view class="margin_right ">
  84. <view class="right_num">{{ record.att_average_big }}
  85. <text class="text-sm">{{ record.att_average_lil }}</text>
  86. </view>
  87. <view class="right_text">平均专注力</view>
  88. </view>
  89. </view>
  90. <view class="bar">
  91. <view>
  92. <view class="line"></view>
  93. <view class="title">专注力要素分析</view>
  94. </view>
  95. </view>
  96. <view class="radar_chart">
  97. <mpvue-echarts
  98. :echarts="echarts"
  99. :onInit="radar_charts"
  100. canvasId="demo-canvas2"
  101. />
  102. </view>
  103. <view class="divide_line"></view>
  104. <view class="">
  105. <view class="bar">
  106. <view>
  107. <view class="line"></view>
  108. <view class="title">报告分析</view>
  109. </view>
  110. </view>
  111. <view class="conclution">{{ record.content }}</view>
  112. <!-- <view class="conclution">{{ record.content2 }}</view> -->
  113. <view class="divide_line"></view>
  114. <view class="bar">
  115. <view>
  116. <view class="line"></view>
  117. <view class="title">训练建议</view>
  118. </view>
  119. </view>
  120. <view class="conclution">{{ record.advise }}</view>
  121. <view class="divide_line"></view>
  122. </view>
  123. <view class="bar">
  124. <view>
  125. <view class="line"></view>
  126. <view class="title">专注力数值曲线</view>
  127. </view>
  128. <view class="label">
  129. <view>
  130. <view class="dot dot-Att"></view>
  131. <text class="name">Att(专注度)</text>
  132. </view>
  133. <view>
  134. <view class="dot dot-Med"></view>
  135. <text class="name">Med(放松度)</text>
  136. </view>
  137. <view>
  138. <view class="dot dot-Amp"></view>
  139. <text class="name">Amp(和谐度)</text>
  140. </view>
  141. </view>
  142. </view>
  143. <view class="chart chart_line">
  144. <mpvue-echarts
  145. :echarts="echarts"
  146. :onInit="attCharts"
  147. canvasId="demo-canvas"
  148. />
  149. </view>
  150. <view
  151. class="section_container"
  152. v-if="is_cut"
  153. >
  154. <van-tabs
  155. :active="0"
  156. color="#6858C4"
  157. @change="changeMin"
  158. :swipe-threshold="4"
  159. line-width=54px
  160. >
  161. <van-tab
  162. :name="index"
  163. :title="(2*index)+'-'+(2*(index+1)) + '分钟'"
  164. v-for="(section,index) in data_section"
  165. :key="index"
  166. ></van-tab>
  167. </van-tabs>
  168. </view>
  169. <view class="divide_line" style="margin-top: 20px"></view>
  170. <view class="bar">
  171. <view>
  172. <view class="line"></view>
  173. <view class="title">专注力数值累计比例</view>
  174. </view>
  175. </view>
  176. <view class="flexBoxLand">
  177. <view>
  178. <view class="chart_circle">
  179. <mpvue-echarts
  180. :echarts="echarts"
  181. :onInit="pie_charts"
  182. canvasId="demo-canvas-1"
  183. />
  184. </view>
  185. <view class="left_content">
  186. <view class="left_text">专注力数值</view>
  187. <view class="left_text">比例</view>
  188. </view>
  189. </view>
  190. <!-- 右侧标签 -->
  191. <view class="flexBoxVer">
  192. <view class="flexBoxLand colorChangeWrap">
  193. <view
  194. class="colorChange"
  195. id="changeFirst"
  196. >81-100
  197. </view>
  198. <view class="colorChangeTime">{{ record.level_time0 }}({{ record.level_ratio0 }}%)</view>
  199. </view>
  200. <view class="flexBoxLand colorChangeWrap">
  201. <view
  202. class="colorChange"
  203. id="changeSecond"
  204. >61-80
  205. </view>
  206. <view class="colorChangeTime">{{ record.level_time1 }}({{ record.level_ratio1 }}%)</view>
  207. </view>
  208. <view class="flexBoxLand colorChangeWrap">
  209. <view
  210. class="colorChange"
  211. id="changeThird"
  212. >41-60
  213. </view>
  214. <view class="colorChangeTime">{{ record.level_time2 }}({{ record.level_ratio2 }}%)</view>
  215. </view>
  216. <view class="flexBoxLand colorChangeWrap">
  217. <view
  218. class="colorChange"
  219. id="changeFourth"
  220. >21-40
  221. </view>
  222. <dview class="colorChangeTime">{{ record.level_time3 }}({{ record.level_ratio3 }}%)</dview>
  223. </view>
  224. <view class="flexBoxLand">
  225. <view
  226. class="colorChange"
  227. id="changeFifth"
  228. >00-20
  229. </view>
  230. <view class="colorChangeTime">{{ record.level_time4 }}({{ record.level_ratio4 }}%)</view>
  231. </view>
  232. </view>
  233. </view>
  234. <view class="divide_line"></view>
  235. <!-- 核销详情 -->
  236. <view class="bar">
  237. <view>
  238. <view class="line"></view>
  239. <view class="title">核销详情</view>
  240. </view>
  241. </view>
  242. <view class="sheet">
  243. <view class="left">
  244. <view>专注力训练设备: {{ record.name }}</view>
  245. </view>
  246. <view class="right">
  247. <view>核销方式:
  248. <text v-if="record.consumption_type==1">次卡</text>
  249. <text v-if="record.consumption_type==2">时间卡</text>
  250. </view>
  251. </view>
  252. </view>
  253. <view class="divide_line"></view>
  254. <!-- Aipha/Beta脑波变化曲线图 -->
  255. <view class="absorbed_change">
  256. <view class="bar">
  257. <view class="interfere_title_wrap">
  258. <view class="line"></view>
  259. <view class="title">Alpha/Beta脑波变化曲线图</view>
  260. </view>
  261. <view class="label_up">
  262. <view>
  263. <view class="dot dot-Low-Alpha"></view>
  264. <text class="name">Low-Alpha</text>
  265. </view>
  266. <view>
  267. <view class="dot dot-High-Alpha"></view>
  268. <text class="name">High-Alpha</text>
  269. </view>
  270. <view style="margin-right:5px">
  271. <view class="dot dot-Low-Beta"></view>
  272. <text class="name">Low-Beta</text>
  273. </view>
  274. <view>
  275. <view class="dot dot-High-Beta"></view>
  276. <text class="name">High-Beta</text>
  277. </view>
  278. </view>
  279. </view>
  280. <view class="chart chart_line">
  281. <mpvue-echarts
  282. :echarts="echarts"
  283. :onInit="alpha_betaCharts"
  284. canvasId="demo-canvas-a1"
  285. />
  286. </view>
  287. <view
  288. class="section_container"
  289. v-if="is_cut"
  290. >
  291. <van-tabs
  292. :active="0"
  293. color="#6858C4"
  294. @change="changeABMin"
  295. :swipe-threshold="4"
  296. line-width=54px
  297. >
  298. <van-tab
  299. :name="index"
  300. :title="(2*index)+'-'+(2*(index+1)) + '分钟'"
  301. v-for="(section,index) in data_section"
  302. :key="index"
  303. ></van-tab>
  304. </van-tabs>
  305. </view>
  306. </view>
  307. <!-- Delta/theta脑波变化曲线图 -->
  308. <view class="absorbed_change ">
  309. <view class="bar">
  310. <view class="interfere_title_wrap">
  311. <view class="line"></view>
  312. <view class="title">Delta/Theta脑波变化曲线图</view>
  313. </view>
  314. <view class="label">
  315. <view>
  316. <view class="dot dot-Delta"></view>
  317. <text class="name">Delta</text>
  318. </view>
  319. <view>
  320. <view class="dot dot-Theta"></view>
  321. <text class="name">Theta</text>
  322. </view>
  323. </view>
  324. </view>
  325. <view class="chart chart_line">
  326. <mpvue-echarts
  327. :echarts="echarts"
  328. :onInit="delta_thetaCharts"
  329. canvasId="demo-canvas-a2"
  330. />
  331. </view>
  332. <view
  333. class="section_container"
  334. v-if="is_cut"
  335. >
  336. <van-tabs
  337. :active="0"
  338. color="#6858C4"
  339. @change="changeDTMin"
  340. :swipe-threshold="4"
  341. line-width=54px
  342. >
  343. <van-tab
  344. :name="index"
  345. :title="(2*index)+'-'+(2*(index+1)) + '分钟'"
  346. v-for="(section,index) in data_section"
  347. :key="index"
  348. ></van-tab>
  349. </van-tabs>
  350. </view>
  351. </view>
  352. </div>
  353. <div v-if="!report_show" class="boxVer margin-top-xl">
  354. <img src="https://img.shuimuai.com/time_short.png" class="margin-bottom-xl" style="width: 73px;height: 83px;">
  355. <view class="conclution margin-top-xl">数据传输异常,水母星球AI数据系统无法进行训练分析,艾米正在紧急联系星球指挥官。</view>
  356. </div>
  357. <van-toast id="van-toast"/>
  358. </div>
  359. </template>
  360. <script>
  361. import mpvueEcharts from "mpvue-echarts";
  362. import echarts from "../../../static/echarts.min";
  363. import util, {
  364. filterPieData,
  365. formatSeconds,
  366. getHightPieChartOption,
  367. getPieChartsOption,
  368. getRadarChartOption,
  369. timestampToTimeS,
  370. } from "../../utils/index";
  371. import {gameDetail} from "../../requests/game";
  372. import game_store from "../../store/game";
  373. import Toast from "../../../static/vant/toast/toast";
  374. var att_charts,
  375. alpha_beta_charts,
  376. delta_theta_charts,
  377. hight_att_pie_charts,
  378. radar_charts,
  379. $pie_charts,
  380. $this;
  381. // 大脑图表初始化
  382. function initAttChart(canvas, width, height) {
  383. att_charts = echarts.init(canvas, null, {
  384. width: width,
  385. height: height,
  386. });
  387. canvas.setChart(att_charts);
  388. var option = util.getLineOption([0], [0]); // ECharts 配置项
  389. att_charts.setOption(option);
  390. return att_charts; // 返回 chart 后可以自动绑定触摸操作
  391. }
  392. function initABChart(canvas, width, height) {
  393. alpha_beta_charts = echarts.init(canvas, null, {
  394. width: width,
  395. height: height,
  396. });
  397. canvas.setChart(alpha_beta_charts);
  398. var option = util.getABOption([0], [0]); // ECharts 配置项
  399. alpha_beta_charts.setOption(option);
  400. return alpha_beta_charts; // 返回 chart 后可以自动绑定触摸操作
  401. }
  402. function initDTChart(canvas, width, height) {
  403. delta_theta_charts = echarts.init(canvas, null, {
  404. width: width,
  405. height: height,
  406. });
  407. canvas.setChart(delta_theta_charts);
  408. var option = util.getDTOption([0], [0]); // ECharts 配置项
  409. delta_theta_charts.setOption(option);
  410. return delta_theta_charts; // 返回 chart 后可以自动绑定触摸操作
  411. }
  412. // 大脑图表初始化
  413. function initHightPieChart(canvas, width, height) {
  414. hight_att_pie_charts = echarts.init(canvas, null, {
  415. width: width,
  416. height: height,
  417. });
  418. canvas.setChart(hight_att_pie_charts);
  419. var option = getHightPieChartOption(0, 0); // ECharts 配置项
  420. hight_att_pie_charts.setOption(option);
  421. return hight_att_pie_charts; // 返回 chart 后可以自动绑定触摸操作
  422. }
  423. // 大脑图表初始化
  424. function initRadarChart(canvas, width, height) {
  425. radar_charts = echarts.init(canvas, null, {
  426. width: width,
  427. height: height,
  428. });
  429. canvas.setChart(radar_charts);
  430. var option = getRadarChartOption(0); // ECharts 配置项
  431. radar_charts.setOption(option);
  432. return radar_charts; // 返回 chart 后可以自动绑定触摸操作
  433. }
  434. function initPieChart(canvas, width, height) {
  435. $pie_charts = echarts.init(canvas, null, {
  436. width: width,
  437. height: height,
  438. });
  439. canvas.setChart($pie_charts);
  440. var option = getPieChartsOption(); // ECharts 配置项
  441. $pie_charts.setOption(option);
  442. return $pie_charts; // 返回 chart 后可以自动绑定触摸操作
  443. }
  444. export default {
  445. name: "index_container",
  446. components: {
  447. mpvueEcharts,
  448. },
  449. data() {
  450. return {
  451. // 0:未选择 1:时间 2:次数
  452. // 折线图 表格数据
  453. attCharts: initAttChart,
  454. alpha_betaCharts: initABChart,
  455. delta_thetaCharts: initDTChart,
  456. hight_att_charts: initHightPieChart,
  457. radar_charts: initRadarChart,
  458. pie_charts: initPieChart,
  459. echarts,
  460. record: {},
  461. userinfo: {},
  462. record_id: 0,
  463. //是否截断数据
  464. is_cut: false,
  465. //数据截断数
  466. data_section: 4,
  467. //数据集合
  468. data_lines: [],
  469. // 是否时间太短
  470. report_show: true, // 报告
  471. };
  472. },
  473. methods: {
  474. // 获取游戏报告
  475. get_report($record_id) {
  476. $this.record = {};
  477. Toast.loading({
  478. forbidClick: true,
  479. message: "加载中",
  480. duration: 0,
  481. });
  482. gameDetail($record_id).then(
  483. (res) => {
  484. Toast.clear();
  485. let $res = res.data;
  486. $this.report_show = $res.data.line.length > 0;
  487. if (!$this.report_show) {
  488. return false;
  489. }
  490. setTimeout(() => {
  491. $this.record = $res.data;
  492. let $options = getHightPieChartOption(
  493. $this.record.height,
  494. $this.record.total
  495. );
  496. hight_att_pie_charts.setOption($options);
  497. //设置雷达图
  498. $options = getRadarChartOption([
  499. $this.record.att_average, //平均
  500. $this.record.att_scope, //广度
  501. $this.record.att_burst, //爆发
  502. $this.record.att_interfere, //抗干扰
  503. $this.record.att_start, //启动
  504. $this.record.att_height, // 高专注占比
  505. ]);
  506. radar_charts.setOption($options);
  507. // 平均专注力大字
  508. $this.record["att_average_big"] = parseInt(
  509. $this.record["att_average"]
  510. );
  511. // 平均专注力小字
  512. $this.record["att_average_string"] = $this.record[
  513. "att_average"
  514. ].toString();
  515. $this.record["att_average_lil"] = $this.record[
  516. "att_average_string"
  517. ].substring($this.record["att_average_string"].indexOf("."));
  518. let $play_time = $this.record.play_time;
  519. $this.record.play_time = formatSeconds($this.record.play_time);
  520. $this.record.start_time = timestampToTimeS($this.record.start_time);
  521. $this.record.height_absorbed = Math.ceil(
  522. $this.record.height / $this.record.total * 100
  523. );
  524. let $pie_data = $this.record.level;
  525. // 时间
  526. $this.record.level_time0 = formatSeconds($this.record.level[0]);
  527. $this.record.level_time1 = formatSeconds($this.record.level[1]);
  528. $this.record.level_time2 = formatSeconds($this.record.level[2]);
  529. $this.record.level_time3 = formatSeconds($this.record.level[3]);
  530. $this.record.level_time4 = formatSeconds($this.record.level[4]);
  531. // 时间总数
  532. let all_time = 0;
  533. for (let i = 0; i < 5; i++) {
  534. all_time += $this.record.level[i];
  535. }
  536. // 比例
  537. $this.record.level_ratio0 =
  538. Math.round($this.record.level[0] / all_time * 100 * 100) / 100;
  539. $this.record.level_ratio1 =
  540. Math.round($this.record.level[1] / all_time * 100 * 100) / 100;
  541. $this.record.level_ratio2 =
  542. Math.round($this.record.level[2] / all_time * 100 * 100) / 100;
  543. $this.record.level_ratio3 =
  544. Math.round($this.record.level[3] / all_time * 100 * 100) / 100;
  545. $this.record.level_ratio4 =
  546. Math.round($this.record.level[4] / all_time * 100 * 100) / 100;
  547. let $pie_option = getPieChartsOption($pie_data);
  548. $pie_charts.setOption($pie_option);
  549. //5分钟阶段
  550. let $min = 2 * 60;
  551. $this.is_cut = $play_time > $min;
  552. console.log($this.is_cut);
  553. if ($this.is_cut) {
  554. //截断得数量
  555. $this.data_section = Math.ceil($play_time / $min);
  556. let $e = {
  557. mp: {
  558. detail: {
  559. name: 0,
  560. },
  561. },
  562. };
  563. this.changeMin($e);
  564. this.changeABMin($e);
  565. this.changeDTMin($e);
  566. } else {
  567. //处理 专注度 和 放松度的值
  568. $this.get_game_line(
  569. $this.record.line,
  570. $this.record.line_med,
  571. $this.record.amp
  572. );
  573. // 处理 alpha beta
  574. $this.get_game_ab(
  575. $this.record.low_alpha,
  576. $this.record.high_alpha,
  577. $this.record.low_beta,
  578. $this.record.high_beta
  579. );
  580. // // 处理 delta theta
  581. $this.get_game_dt($this.record.delta, $this.record.theta);
  582. }
  583. }, 1000);
  584. },
  585. (err) => {
  586. Toast.fail("错误代码:" + res.code + ",联系客服");
  587. }
  588. );
  589. },
  590. get_game_line($line_data, $line_med_data, $line_amp_data) {
  591. let $option = util.getLineOption(
  592. $line_data,
  593. $line_med_data,
  594. $line_amp_data
  595. );
  596. att_charts.setOption($option);
  597. },
  598. get_game_ab($line_alphaL, $line_alphaH, $line_betaL, $line_betaH) {
  599. let $option = {};
  600. $option = util.getABOption(
  601. $line_alphaL,
  602. $line_alphaH,
  603. $line_betaL,
  604. $line_betaH
  605. );
  606. alpha_beta_charts.setOption($option);
  607. },
  608. get_game_dt($line_delta, $line_theta) {
  609. let $option = {};
  610. $option = util.getDTOption($line_delta, $line_theta);
  611. delta_theta_charts.setOption($option);
  612. },
  613. to_game_records() {
  614. mpvue.navigateTo({
  615. url: "/pages/game_record/main",
  616. });
  617. },
  618. // 切换时间查看线 数据
  619. changeMin($e) {
  620. let $index = $e.mp.detail.name;
  621. // 0-2 2-4 4-6
  622. // 0 1 2
  623. let $start = $index * 120;
  624. let $end = ($index + 1) * 120;
  625. let $line_data = $this.record.line.slice($start, $end);
  626. let $med_data = $this.record.line_med.slice($start, $end);
  627. let $amp_data = $this.record.amp.slice($start, $end);
  628. $this.get_game_line($line_data, $med_data, $amp_data);
  629. },
  630. // 切换时间查看线 数据
  631. changeABMin($e) {
  632. let $index = $e.mp.detail.name;
  633. // 0-2 2-4 4-6
  634. // 0 1 2
  635. let $start = $index * 120;
  636. let $end = ($index + 1) * 120;
  637. console.log($start, $end);
  638. let low_alpha = $this.record.low_alpha.slice($start, $end);
  639. let high_alpha = $this.record.high_alpha.slice($start, $end);
  640. let low_beta = $this.record.low_beta.slice($start, $end);
  641. let high_beta = $this.record.high_beta.slice($start, $end);
  642. $this.get_game_ab(low_alpha, high_alpha, low_beta, high_beta);
  643. },
  644. // 切换时间查看线 数据
  645. changeDTMin($e) {
  646. let $index = $e.mp.detail.name;
  647. // 0-2 2-4 4-6
  648. // 0 1 2
  649. let $start = $index * 120;
  650. let $end = ($index + 1) * 120;
  651. let delta = $this.record.delta.slice($start, $end);
  652. let theta = $this.record.theta.slice($start, $end);
  653. $this.get_game_dt(delta, theta);
  654. },
  655. },
  656. mounted() {
  657. $this.userinfo = wx.getStorageSync("userinfo");
  658. //设置游戏时间长
  659. wx.removeStorageSync("played_time");
  660. $this.get_report($this.record_id);
  661. },
  662. created() {
  663. $this = this;
  664. },
  665. onLoad(options) {
  666. $this.record_id = options.id
  667. ? options.id
  668. : game_store.getters.getGameRecordId();
  669. },
  670. };
  671. </script>
  672. <style scoped>
  673. #report_container {
  674. background: white;
  675. padding-top: 10px;
  676. padding-bottom: 10px;
  677. }
  678. /* 头部椭圆 */
  679. .head {
  680. width: 442px;
  681. height: 385px;
  682. background-color: #4b3ab0;
  683. border-radius: 50%;
  684. position: absolute;
  685. left: -34px;
  686. top: -252px;
  687. z-index: -1;
  688. }
  689. /* 头部个人信息 */
  690. image.boy {
  691. width: 110px;
  692. height: 111px;
  693. position: absolute;
  694. left: 225px;
  695. top: 45px;
  696. }
  697. .user_info {
  698. width: 95%;
  699. height: 90px;
  700. display: flex;
  701. margin: 0 auto;
  702. margin-bottom: 15px;
  703. align-items: center;
  704. padding-right: 18px;
  705. box-sizing: border-box;
  706. box-shadow: 0px 3px 7px 0px rgba(159, 159, 159, 0.84);
  707. border-radius: 10px;
  708. background: #fff;
  709. }
  710. .user_info img {
  711. display: inline-block;
  712. width: 60px;
  713. height: 60px;
  714. margin-left: 15px;
  715. margin-right: 12px;
  716. border-radius: 5px;
  717. }
  718. .user_info .info_wrap {
  719. display: flex;
  720. justify-content: space-between;
  721. box-sizing: border-box;
  722. flex-direction: column;
  723. flex: 1;
  724. }
  725. .user_info .box_wrap {
  726. display: flex;
  727. color: #222222;
  728. box-sizing: border-box;
  729. justify-content: space-between;
  730. }
  731. .user_info .box_wrap_left {
  732. align-items: center;
  733. }
  734. .user_info .box_wrap_right {
  735. align-items: flex-end;
  736. }
  737. .user_info .info_right {
  738. color: #666666;
  739. }
  740. /* 智脑系数 */
  741. .bran_wrap {
  742. width: 100%;
  743. height: 101px;
  744. background-color: #fff;
  745. display: flex;
  746. justify-content: center;
  747. align-items: center;
  748. }
  749. .bran_wrap img {
  750. display: inline-block;
  751. width: 67px;
  752. height: 80px;
  753. margin-right: 20px;
  754. }
  755. .bran_wrap .bran {
  756. display: flex;
  757. flex-direction: column;
  758. justify-content: space-around;
  759. align-items: center;
  760. }
  761. .bran_wrap .bran .p_num {
  762. color: #ffb72d;
  763. font-size: 35px;
  764. font-weight: bold;
  765. }
  766. .bran_wrap .bran .p_text {
  767. color: #333333;
  768. font-size: 12px;
  769. font-weight: bold;
  770. }
  771. /* 详细数据 */
  772. .margin-tb {
  773. width: 95%;
  774. height: 110px;
  775. margin: 0 auto;
  776. display: flex;
  777. justify-content: space-between;
  778. background: #f3f3f3;
  779. border-radius: 5px;
  780. }
  781. .margin-tb .margin_left {
  782. flex: 1;
  783. overflow: hidden;
  784. display: flex;
  785. flex-direction: column;
  786. margin-left: 3px;
  787. }
  788. .margin-tb .margin_left .left_content {
  789. height: 110px;
  790. display: flex;
  791. flex-direction: column;
  792. justify-content: center;
  793. align-items: center;
  794. color: #676767;
  795. z-index: 999;
  796. margin-top: -100px;
  797. margin-left: 5px;
  798. }
  799. .margin-tb .margin_left .left_content .left_num {
  800. font-size: 18px;
  801. font-weight: 900;
  802. margin-bottom: -3px;
  803. }
  804. .margin-tb .margin_left .left_content .left_text {
  805. font-size: 8px;
  806. }
  807. .margin-tb .margin_centent {
  808. flex: 2;
  809. display: flex;
  810. flex-wrap: wrap;
  811. justify-content: space-around;
  812. padding: 12px 0;
  813. margin-left: 10px;
  814. }
  815. .margin-tb .textLil {
  816. font-size: 6px;
  817. margin-left: 2px;
  818. }
  819. .margin-tb .margin_right {
  820. flex: 1;
  821. display: flex;
  822. flex-direction: column;
  823. justify-content: center;
  824. align-items: center;
  825. color: #90df24;
  826. box-sizing: border-box;
  827. /* padding-right:2px; */
  828. }
  829. .margin-tb .margin_right .right_num {
  830. font-size: 30px;
  831. font-weight: 800;
  832. margin-bottom: 2px;
  833. }
  834. .margin-tb .margin_right .right_text {
  835. width: 75%;
  836. height: 15px;
  837. background: #90df24;
  838. color: #fff;
  839. text-align: center;
  840. line-height: 15px;
  841. font-size: 10px;
  842. border-radius: 3px;
  843. }
  844. .margin-tb .detail {
  845. width: 47%;
  846. height: 50%;
  847. display: flex;
  848. flex-direction: column;
  849. justify-content: center;
  850. align-items: center;
  851. color: #676767;
  852. font-size: 10px;
  853. }
  854. .margin-tb .detail .detail_num {
  855. font-size: 15px;
  856. font-weight: 800;
  857. margin-bottom: 1px;
  858. }
  859. /* 小标题 */
  860. .bar {
  861. width: 100%;
  862. height: 10px;
  863. display: flex;
  864. align-items: center;
  865. justify-content: space-between;
  866. padding: 0 7px;
  867. box-sizing: border-box;
  868. margin: 25px 0;
  869. }
  870. .bar view {
  871. display: flex;
  872. align-items: center;
  873. justify-content: start;
  874. }
  875. .conclution {
  876. width: 100%;
  877. padding: 5px 19px 8px;
  878. font-size: 12px;
  879. color: #6c6c6c;
  880. box-sizing: border-box;
  881. line-height: 25px;
  882. margin-bottom: 28px;
  883. }
  884. .conclution_title {
  885. font-weight: 600;
  886. color: #000;
  887. }
  888. .bar .line {
  889. width: 4px;
  890. height: 15px;
  891. background-color: #5d4db8;
  892. margin-right: 7px;
  893. }
  894. .bar .title {
  895. color: #010101;
  896. font-size: 15px;
  897. }
  898. /* 图表 */
  899. #mychart-dom-multi-line {
  900. width: 360px;
  901. height: 193px;
  902. }
  903. .chart {
  904. margin: 0 auto;
  905. width: 360px;
  906. height: 193px;
  907. opacity: 0.6;
  908. border-radius: 10px;
  909. }
  910. .chart_line {
  911. /* box-shadow: 0px 6px 11px #dadada; */
  912. background: #f3f3f3;
  913. }
  914. /*雷达图*/
  915. .radar_chart {
  916. margin: 0 auto;
  917. margin-bottom: 10px;
  918. width: 360px;
  919. height: 293px;
  920. /* background: #f3f3f3; */
  921. opacity: 0.6;
  922. border-radius: 10px;
  923. /* box-shadow: 0px 6px 11px #dadada; */
  924. }
  925. .hight_pie_chart {
  926. /* margin: 0 auto; */
  927. width: 120%;
  928. height: 95px;
  929. background: #f3f3f3;
  930. margin-top: 10px;
  931. margin-left: -7px;
  932. /*border-radius: 10px;*/
  933. /*box-shadow: 0px 6px 11px #dadada;*/
  934. }
  935. /* 核销详情 */
  936. .sheet {
  937. color: #6d6d6d;
  938. font-size: 12px;
  939. display: flex;
  940. padding: 0 16px;
  941. box-sizing: border-box;
  942. margin-bottom: 30px;
  943. }
  944. .sheet .left,
  945. .sheet .right {
  946. height: 15px;
  947. display: flex;
  948. flex-direction: column;
  949. align-items: flex-start;
  950. justify-content: space-between;
  951. }
  952. .sheet .left {
  953. width: 195px;
  954. }
  955. .content_card {
  956. border-radius: 10px;
  957. box-shadow: 0px 6px 11px #dadada;
  958. }
  959. .divide_line {
  960. width: 360px;
  961. height: 1px;
  962. background: #e5e5e5;
  963. margin: 0 auto;
  964. }
  965. /* 专注力干扰看板 */
  966. .absorbed_change {
  967. width: 100%;
  968. /* padding: 0 7px; */
  969. box-sizing: border-box;
  970. margin-top: 18px;
  971. }
  972. .absorbed_change .line {
  973. width: 4px;
  974. height: 15px;
  975. background-color: #5d4db8;
  976. margin-right: 7px;
  977. }
  978. .absorbed_change .title {
  979. color: #010101;
  980. font-size: 15px;
  981. }
  982. .interfere_title_wrap {
  983. width: 100%;
  984. height: 40px;
  985. display: flex;
  986. align-items: center;
  987. }
  988. /* 干扰 标题*/
  989. .interfere {
  990. display: flex;
  991. margin-left: 8px;
  992. height: 54px;
  993. align-items: center;
  994. margin-bottom: 14px;
  995. }
  996. .interfere .interfere_logo {
  997. display: inline-block;
  998. width: 19px;
  999. height: 19px;
  1000. margin-right: 7px;
  1001. }
  1002. .interfere .interfere_text {
  1003. font-size: 15px;
  1004. color: #676767;
  1005. }
  1006. .interfere .interfere_text .interfere_text_num {
  1007. font-size: 18px;
  1008. font-weight: 900;
  1009. }
  1010. /* 干扰 echarts */
  1011. .interfere_echarts_wrap {
  1012. width: 360px;
  1013. height: 193px;
  1014. background: #f3f3f3;
  1015. opacity: 0.6;
  1016. box-shadow: 0px 6px 11px #dadada;
  1017. }
  1018. .interfere_echarts {
  1019. /* margin: 0 auto; */
  1020. width: 100%;
  1021. height: 173px;
  1022. /* background: #f3f3f3;
  1023. opacity: 0.6;
  1024. box-shadow: 0px 6px 11px #dadada; */
  1025. }
  1026. .interfere_echarts_bottom {
  1027. margin: 0 auto;
  1028. width: 90%;
  1029. height: 20px;
  1030. display: flex;
  1031. align-items: center;
  1032. justify-content: space-around;
  1033. font-size: 15px;
  1034. color: #828282;
  1035. }
  1036. /* 干扰 bottom */
  1037. .interfere_footer {
  1038. width: 100%;
  1039. height: 26px;
  1040. font-size: 13px;
  1041. font-family: Microsoft YaHei;
  1042. font-weight: 400;
  1043. color: #676767;
  1044. display: flex;
  1045. justify-content: center;
  1046. align-items: center;
  1047. margin-top: 10px;
  1048. }
  1049. .interfere_footer .interfere_footer_logo {
  1050. display: inline-block;
  1051. width: 13px;
  1052. height: 13px;
  1053. background-color: #23cc92;
  1054. margin-right: 5px;
  1055. }
  1056. /* 调整能力 */
  1057. .adjustment_warp {
  1058. margin-top: 50px;
  1059. }
  1060. .adjustment_title {
  1061. display: flex;
  1062. color: #676767;
  1063. font-size: 15px;
  1064. padding-left: 8px;
  1065. box-sizing: border-box;
  1066. margin-bottom: 35px;
  1067. }
  1068. .adjustment_title .adjustment_title_logo {
  1069. display: inline-block;
  1070. width: 19px;
  1071. height: 19px;
  1072. margin-right: 7px;
  1073. }
  1074. /* 调整能力表图 */
  1075. .adjustment_echarts_wrap {
  1076. margin: 0 auto;
  1077. width: 360px;
  1078. height: 193px;
  1079. background: #f3f3f3;
  1080. opacity: 0.6;
  1081. box-shadow: 0px 6px 11px #dadada;
  1082. }
  1083. .adjustment_echarts {
  1084. width: 100%;
  1085. height: 173px;
  1086. }
  1087. .adjustment_echarts_bottom {
  1088. margin: 0 auto;
  1089. width: 90%;
  1090. height: 20px;
  1091. display: flex;
  1092. align-items: center;
  1093. justify-content: space-around;
  1094. font-size: 15px;
  1095. color: #828282;
  1096. }
  1097. .adjustment_footer {
  1098. width: 100%;
  1099. height: 26px;
  1100. font-size: 13px;
  1101. font-family: Microsoft YaHei;
  1102. font-weight: 400;
  1103. color: #676767;
  1104. display: flex;
  1105. justify-content: center;
  1106. align-items: center;
  1107. margin-top: 10px;
  1108. }
  1109. .adjustment_footer .adjustment_footer_logo {
  1110. display: inline-block;
  1111. width: 13px;
  1112. height: 13px;
  1113. background-color: #f3a100;
  1114. margin-right: 5px;
  1115. }
  1116. /* 爆发值和调整时间 */
  1117. .absorbed_change_footer {
  1118. display: flex;
  1119. justify-content: space-around;
  1120. margin-top: 28px;
  1121. }
  1122. .absorbed_change_footer .footer_text {
  1123. font-size: 16px;
  1124. color: #676767;
  1125. }
  1126. .footer_text_W {
  1127. font-size: 21px;
  1128. font-weight: 600;
  1129. }
  1130. .test {
  1131. color: rgb(163, 7, 7);
  1132. }
  1133. .label {
  1134. color: #9a95b7;
  1135. font-size: 10px;
  1136. }
  1137. .label_up {
  1138. color: #9a95b7;
  1139. font-size: 10px;
  1140. display: flex;
  1141. flex-wrap: wrap;
  1142. width: 270px;
  1143. }
  1144. /*点图*/
  1145. .dot {
  1146. width: 8px;
  1147. height: 8px;
  1148. border-radius: 50%;
  1149. margin-right: 4px;
  1150. margin-left: 15px;
  1151. }
  1152. .dot-Att {
  1153. background: #fab615;
  1154. }
  1155. .dot-Med {
  1156. background: #40ff31;
  1157. }
  1158. .dot-Amp {
  1159. background: #d4327a;
  1160. }
  1161. /* .dot-Alpha {
  1162. background: #FF9107;
  1163. } */
  1164. .dot-Theta {
  1165. background: #ffe838;
  1166. }
  1167. .dot-Low-Alpha {
  1168. background: #38ff49;
  1169. }
  1170. .dot-High-Alpha {
  1171. background: #00ad0e;
  1172. }
  1173. .dot-Low-Beta {
  1174. background: #0060f1;
  1175. }
  1176. .dot-High-Beta {
  1177. background: #00ccff;
  1178. }
  1179. /* .dot-Beta {
  1180. background: #00CCFF;
  1181. } */
  1182. .dot-Delta {
  1183. background: #ff77b3;
  1184. }
  1185. /* 节标题 */
  1186. .bar {
  1187. width: 100%;
  1188. height: 15px;
  1189. display: flex;
  1190. align-items: center;
  1191. justify-content: space-between;
  1192. padding: 0 7px;
  1193. box-sizing: border-box;
  1194. /* margin: 14px 0; */
  1195. }
  1196. .bar view {
  1197. display: flex;
  1198. align-items: center;
  1199. justify-content: start;
  1200. }
  1201. .bar .line {
  1202. width: 4px;
  1203. height: 15px;
  1204. /* background-color: #ffb400; */
  1205. margin-right: 7px;
  1206. }
  1207. /* 圆环图 */
  1208. .flexBoxVer {
  1209. display: flex;
  1210. align-items: center;
  1211. box-sizing: border-box;
  1212. flex-direction: column;
  1213. align-items: flex-start;
  1214. }
  1215. .boxVer {
  1216. display: flex;
  1217. align-items: center;
  1218. box-sizing: border-box;
  1219. flex-direction: column;
  1220. height: 500px;
  1221. justify-content: center;
  1222. padding: 20px;
  1223. }
  1224. .flexBoxLand {
  1225. display: flex;
  1226. align-items: center;
  1227. box-sizing: border-box;
  1228. }
  1229. .colorChangeWrap {
  1230. margin-bottom: 5px;
  1231. }
  1232. .colorChange {
  1233. width: 50px;
  1234. height: 18px;
  1235. border-radius: 4px;
  1236. font-size: 11px;
  1237. color: #ffffff;
  1238. text-align: center;
  1239. line-height: 18px;
  1240. margin-right: 10px;
  1241. }
  1242. .colorChangeTime {
  1243. font-size: 13px;
  1244. }
  1245. #changeFirst {
  1246. background: #5470c6;
  1247. }
  1248. #changeSecond {
  1249. background: #91cc75;
  1250. }
  1251. #changeThird {
  1252. background: #fac858;
  1253. }
  1254. #changeFourth {
  1255. background: #ee6666;
  1256. }
  1257. #changeFifth {
  1258. background: #73c0de;
  1259. }
  1260. .chart_circle {
  1261. width: 180px;
  1262. height: 193px;
  1263. border-radius: 10px;
  1264. }
  1265. .left_content {
  1266. height: 193px;
  1267. display: flex;
  1268. flex-direction: column;
  1269. justify-content: center;
  1270. align-items: center;
  1271. color: #676767;
  1272. z-index: 999;
  1273. margin-top: -190px;
  1274. }
  1275. .left_text {
  1276. font-size: 12px;
  1277. }
  1278. </style>