|
|
@@ -1,1667 +1,46 @@
|
|
|
<template>
|
|
|
- <div id="report_container">
|
|
|
-
|
|
|
- <!-- 头部信息 -->
|
|
|
- <view class="user_info">
|
|
|
- <img :src="userinfo.portrait"/>
|
|
|
- <view class="info_wrap">
|
|
|
- <view class="box_wrap margin-bottom-sm box_wrap_left">
|
|
|
- <text class="text-bold text-xl">{{ record.user_name }}</text>
|
|
|
- <text class="info_right">{{ record.start_time }}</text>
|
|
|
- </view>
|
|
|
- <view class="box_wrap box_wrap_right">
|
|
|
- <text>{{ record.phone }}</text>
|
|
|
- <text class="info_right">训练时间：{{ record.play_time }}</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <div v-if="report_show">
|
|
|
- <div class="bran_wrap margin-bottom">
|
|
|
- <img
|
|
|
- src="http://img.shuimuai.com/report_ brain_coefficient.png"
|
|
|
- alt=""
|
|
|
- >
|
|
|
- <div class="bran">
|
|
|
- <p class="p_num">{{ record.ratio }}</p>
|
|
|
- <p class="p_text">智脑系数</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <view>
|
|
|
- <van-divider
|
|
|
- contentPosition="left"
|
|
|
- borderColor="#E98F36"
|
|
|
- >
|
|
|
- <van-image
|
|
|
- src="https://img.shuimuai.com/line.png"
|
|
|
- alt=""
|
|
|
- width="40"
|
|
|
- height="40"
|
|
|
- ></van-image>
|
|
|
- </van-divider>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 专注力维持区间、受干扰次数，专注力最大爆发值、专注力启动时长-->
|
|
|
-
|
|
|
- <view class="margin-tb">
|
|
|
- <!-- 高专注力占比 -->
|
|
|
- <view class="margin_left">
|
|
|
- <view class="hight_pie_chart">
|
|
|
- <mpvue-echarts
|
|
|
- :echarts="echarts"
|
|
|
- :onInit="hight_att_charts"
|
|
|
- canvasId="demo-canvas-interfere"
|
|
|
- />
|
|
|
- </view>
|
|
|
- <view class="left_content">
|
|
|
- <view class="left_num">{{ record.height_absorbed }}<text class="textLil text-gray">%</text></view>
|
|
|
- <view class="left_text">高专注<br/> 占比</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 数据详情 -->
|
|
|
- <view class="margin_centent">
|
|
|
- <view class="detail">
|
|
|
- <te class="detail_num">{{ record.scope_diff }}</te>
|
|
|
- <view>专注力维持区间</view>
|
|
|
- </view>
|
|
|
- <view class="detail">
|
|
|
- <view class="detail_num">{{ record.interfere }}<text class="textLil text-gray">次</text></view>
|
|
|
- <view>受干扰次数</view>
|
|
|
- </view>
|
|
|
- <view class="detail">
|
|
|
- <view class="detail_num">{{ record.burst }}</view>
|
|
|
- <view>专注力最大爆发值</view>
|
|
|
- </view>
|
|
|
- <view class="detail">
|
|
|
- <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_big }}<text class="text-sm">{{ record.att_average_lil }}</text></view>
|
|
|
- <view class="right_text">专注力平均值</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="margin_right ">
|
|
|
- <view class="right_num">{{ record.average_med }}</view>
|
|
|
- <view class="right_text">放松度平均值</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="bar">
|
|
|
- <view>
|
|
|
- <view class="line"></view>
|
|
|
- <view class="title">专注力要素分析</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="radar_chart">
|
|
|
- <mpvue-echarts
|
|
|
- :echarts="echarts"
|
|
|
- :onInit="radar_charts"
|
|
|
- canvasId="demo-canvas2"
|
|
|
- />
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="divide_line"></view>
|
|
|
-
|
|
|
- <view class="">
|
|
|
- <view class="bar">
|
|
|
- <view>
|
|
|
- <view class="line"></view>
|
|
|
- <view class="title">报告分析</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="conclution">{{ record.content }}</view>
|
|
|
- <!-- <view class="conclution">{{ record.content2 }}</view> -->
|
|
|
- <view class="divide_line"></view>
|
|
|
-
|
|
|
- <view class="bar">
|
|
|
- <view>
|
|
|
- <view class="line"></view>
|
|
|
- <view class="title">训练建议</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="conclution">{{ record.advise }}</view>
|
|
|
-
|
|
|
- <view class="divide_line"></view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="bar">
|
|
|
- <view>
|
|
|
- <view class="line"></view>
|
|
|
- <view class="title">专注力数值曲线</view>
|
|
|
- </view>
|
|
|
- <view class="label">
|
|
|
- <view>
|
|
|
- <view class="dot dot-Att"></view>
|
|
|
- <text class="name">Att(专注度)</text>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <view class="dot dot-Med"></view>
|
|
|
- <text class="name">Med(放松度)</text>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <view class="dot dot-Amp"></view>
|
|
|
- <text class="name">Amp(和谐度)</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="chart chart_line">
|
|
|
- <mpvue-echarts
|
|
|
- :echarts="echarts"
|
|
|
- :onInit="attCharts"
|
|
|
- canvasId="demo-canvas"
|
|
|
- />
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="section_container"
|
|
|
- v-if="is_cut"
|
|
|
- >
|
|
|
- <van-tabs
|
|
|
- :active="0"
|
|
|
- color="#6858C4"
|
|
|
- @change="changeMin"
|
|
|
- :swipe-threshold="4"
|
|
|
- line-width=54px
|
|
|
- >
|
|
|
- <van-tab
|
|
|
- :name="index"
|
|
|
- :title="(2*index)+'-'+(2*(index+1)) + '分钟'"
|
|
|
- v-for="(section,index) in data_section"
|
|
|
- :key="index"
|
|
|
- ></van-tab>
|
|
|
- </van-tabs>
|
|
|
- </view>
|
|
|
- <view class="divide_line" style="margin-top: 20px"></view>
|
|
|
-
|
|
|
- <view class="bar">
|
|
|
- <view>
|
|
|
- <view class="line"></view>
|
|
|
- <view class="title">专注力数值累计比例</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="flexBoxLand">
|
|
|
- <view>
|
|
|
- <view class="chart_circle">
|
|
|
- <mpvue-echarts
|
|
|
- :echarts="echarts"
|
|
|
- :onInit="pie_charts"
|
|
|
- canvasId="demo-canvas-1"
|
|
|
- />
|
|
|
- </view>
|
|
|
- <view class="left_content">
|
|
|
- <view class="left_text">专注力数值</view>
|
|
|
- <view class="left_text">比例</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- <!-- 右侧标签 -->
|
|
|
- <view class="flexBoxVer">
|
|
|
- <view class="flexBoxLand colorChangeWrap">
|
|
|
- <view
|
|
|
- class="colorChange"
|
|
|
- id="changeFirst"
|
|
|
- >81-100
|
|
|
- </view>
|
|
|
- <view class="colorChangeTime">{{ record.level_time4 }}（{{ record.level_ratio4 }}%）</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="flexBoxLand colorChangeWrap">
|
|
|
- <view
|
|
|
- class="colorChange"
|
|
|
- id="changeSecond"
|
|
|
- >61-80
|
|
|
- </view>
|
|
|
- <view class="colorChangeTime">{{ record.level_time3 }}（{{ record.level_ratio3 }}%）</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="flexBoxLand colorChangeWrap">
|
|
|
- <view
|
|
|
- class="colorChange"
|
|
|
- id="changeThird"
|
|
|
- >41-60
|
|
|
- </view>
|
|
|
- <view class="colorChangeTime">{{ record.level_time2 }}（{{ record.level_ratio2 }}%）</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="flexBoxLand colorChangeWrap">
|
|
|
- <view
|
|
|
- class="colorChange"
|
|
|
- id="changeFourth"
|
|
|
- >21-40
|
|
|
- </view>
|
|
|
- <dview class="colorChangeTime">{{ record.level_time1 }}（{{ record.level_ratio1 }}%）</dview>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="flexBoxLand">
|
|
|
- <view
|
|
|
- class="colorChange"
|
|
|
- id="changeFifth"
|
|
|
- >00-20
|
|
|
- </view>
|
|
|
- <view class="colorChangeTime">{{ record.level_time0 }}（{{ record.level_ratio0 }}%）</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="divide_line"></view>
|
|
|
- <!-- 核销详情 -->
|
|
|
- <view class="bar">
|
|
|
- <view>
|
|
|
- <view class="line"></view>
|
|
|
- <view class="title">核销详情</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="sheet">
|
|
|
- <view class="left">
|
|
|
- <view>专注力训练设备： {{ record.name }}</view>
|
|
|
- </view>
|
|
|
- <view class="right">
|
|
|
- <view>核销方式：
|
|
|
- <text v-if="record.consumption_type==1">次卡</text>
|
|
|
- <text v-if="record.consumption_type==2">时间卡</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="divide_line"></view>
|
|
|
-
|
|
|
- <!-- 专注力变化看板 -->
|
|
|
- <view class="absorbed_change">
|
|
|
- <view class="bar">
|
|
|
- <view class="interfere_title_wrap">
|
|
|
- <view class="line"></view>
|
|
|
- <view class="title">专注力变化分析</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 看板一 干扰 -->
|
|
|
- <view class="flex justify-center">
|
|
|
- <view class="interfere_wrap">
|
|
|
- <view class="interfere">
|
|
|
- <img
|
|
|
- src="http://img.shuimuai.com/program_interfere_log.png"
|
|
|
- alt=""
|
|
|
- class="interfere_logo"
|
|
|
- >
|
|
|
- <view class="interfere_text">
|
|
|
- 受干扰次数:
|
|
|
- <title class="interfere_text_num"> {{record.interfere}}</title>
|
|
|
- 次
|
|
|
- </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="flex justify-center">
|
|
|
- <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>
|
|
|
-
|
|
|
- <!-- 爆发值和调整时间 -->
|
|
|
- <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>
|
|
|
-
|
|
|
-
|
|
|
- <!-- Aipha/Beta脑波变化曲线图 -->
|
|
|
- <!-- <view class="absorbed_change">
|
|
|
- <view class="bar">
|
|
|
- <view class="interfere_title_wrap">
|
|
|
- <view class="line"></view>
|
|
|
- <view class="title">Alpha/Beta脑波变化曲线图</view>
|
|
|
- </view>
|
|
|
- <view class="label_up">
|
|
|
- <view>
|
|
|
- <view class="dot dot-Low-Alpha"></view>
|
|
|
- <text class="name">Low-Alpha</text>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <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 chart_line">
|
|
|
- <mpvue-echarts
|
|
|
- :echarts="echarts"
|
|
|
- :onInit="alpha_betaCharts"
|
|
|
- canvasId="demo-canvas-a1"
|
|
|
- />
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="section_container"
|
|
|
- v-if="is_cut"
|
|
|
- >
|
|
|
- <van-tabs
|
|
|
- :active="0"
|
|
|
- color="#6858C4"
|
|
|
- @change="changeABMin"
|
|
|
- :swipe-threshold="4"
|
|
|
- line-width=54px
|
|
|
- >
|
|
|
- <van-tab
|
|
|
- :name="index"
|
|
|
- :title="(2*index)+'-'+(2*(index+1)) + '分钟'"
|
|
|
- v-for="(section,index) in data_section"
|
|
|
- :key="index"
|
|
|
- ></van-tab>
|
|
|
- </van-tabs>
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
- <!-- Delta/theta脑波变化曲线图 -->
|
|
|
- <!-- <view class="absorbed_change ">
|
|
|
- <view class="bar">
|
|
|
- <view class="interfere_title_wrap">
|
|
|
- <view class="line"></view>
|
|
|
- <view class="title">Delta/Theta脑波变化曲线图</view>
|
|
|
- </view>
|
|
|
- <view class="label">
|
|
|
- <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 chart_line">
|
|
|
- <mpvue-echarts
|
|
|
- :echarts="echarts"
|
|
|
- :onInit="delta_thetaCharts"
|
|
|
- canvasId="demo-canvas-a2"
|
|
|
- />
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="section_container"
|
|
|
- v-if="is_cut"
|
|
|
- >
|
|
|
- <van-tabs
|
|
|
- :active="0"
|
|
|
- color="#6858C4"
|
|
|
- @change="changeDTMin"
|
|
|
- :swipe-threshold="4"
|
|
|
- line-width=54px
|
|
|
- >
|
|
|
- <van-tab
|
|
|
- :name="index"
|
|
|
- :title="(2*index)+'-'+(2*(index+1)) + '分钟'"
|
|
|
- v-for="(section,index) in data_section"
|
|
|
- :key="index"
|
|
|
- ></van-tab>
|
|
|
- </van-tabs>
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
- </div>
|
|
|
-
|
|
|
- <div v-if="!report_show" class="boxVer margin-top-xl">
|
|
|
- <img src="https://img.shuimuai.com/time_short.png" class="margin-bottom-xl" style="width: 73px;height: 83px;">
|
|
|
- <view class="conclution margin-top-xl">数据传输异常,水母星球AI数据系统无法进行训练分析,艾米正在紧急联系星球指挥官。</view>
|
|
|
- </div>
|
|
|
-
|
|
|
- <van-toast id="van-toast"/>
|
|
|
-
|
|
|
- <!-- 五角图解释弹窗 -->
|
|
|
- <view :hidden="!is_explainShow">
|
|
|
- <cover-view class="radar_explain_bg" @click="closeRadarExplain"></cover-view>
|
|
|
- <!-- 平均值 -->
|
|
|
- <cover-view class="radar_explain_wrap">
|
|
|
- <cover-view class="flex justify-center radar_explain_view grid padding-lg" v-if="radar_indication_type==1">
|
|
|
- <cover-view class="text-black text-bold">专注力平均值</cover-view>
|
|
|
- <cover-view class="text_explain_center">
|
|
|
- <cover-view class="text_explain_wrap">本次训练的专注力平均水平，平均值越高越好</cover-view>
|
|
|
- </cover-view>
|
|
|
- </cover-view>
|
|
|
-
|
|
|
- <!-- 占比 -->
|
|
|
- <cover-view class="flex justify-center radar_explain_view grid padding-lg" v-if="radar_indication_type==2">
|
|
|
- <cover-view class="text-black text-bold">高专注占比</cover-view>
|
|
|
- <cover-view class="text_explain_center">
|
|
|
- <cover-view class="text_explain_wrap">大于65分的高专注值在本次训练中的占比，高专注占比越高越好</cover-view>
|
|
|
- </cover-view>
|
|
|
- </cover-view>
|
|
|
-
|
|
|
- <!-- 唤醒 -->
|
|
|
- <cover-view class="flex justify-center radar_explain_view grid padding-lg" v-if="radar_indication_type==3">
|
|
|
- <cover-view class="text-black text-bold">专注唤醒效率</cover-view>
|
|
|
- <cover-view class="text_explain_center">
|
|
|
- <cover-view class="text_explain_wrap">从训练开始到专注值达到60所需时间效率，唤醒效率越高越好</cover-view>
|
|
|
- </cover-view>
|
|
|
- </cover-view>
|
|
|
-
|
|
|
- <!-- 和谐度 -->
|
|
|
- <cover-view class="flex justify-center radar_explain_view grid padding-lg" v-if="radar_indication_type==4">
|
|
|
- <cover-view class="text-black text-bold">整体和谐度</cover-view>
|
|
|
- <cover-view class="text_explain_center">
|
|
|
- <cover-view class="text_explain_wrap">在专注训练过程中对于目标压力的管理水平和情绪稳定水平，和谐度越高越好</cover-view>
|
|
|
- </cover-view>
|
|
|
- </cover-view>
|
|
|
-
|
|
|
- <!-- 稳定度 -->
|
|
|
- <cover-view class="flex justify-center radar_explain_view grid padding-lg" v-if="radar_indication_type==5">
|
|
|
- <cover-view class="text-black text-bold">专注力稳定度</cover-view>
|
|
|
- <cover-view class="text_explain_center">
|
|
|
- <cover-view class="text_explain_wrap">在训练过程中，专注值的离散程度，稳定度越高代表越稳定</cover-view>
|
|
|
- </cover-view>
|
|
|
- </cover-view>
|
|
|
-
|
|
|
- </cover-view>
|
|
|
- </view>
|
|
|
-
|
|
|
+ <div class="reportContainer">
|
|
|
+ <web-view :src="webUrl" @load="webLoading"></web-view>
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
-import mpvueEcharts from "mpvue-echarts";
|
|
|
-import echarts from "../../../static/echarts.min";
|
|
|
-import util, {
|
|
|
- filterPieData,
|
|
|
- formatSeconds,
|
|
|
- getHightPieChartOption,
|
|
|
- getPieChartsOption,
|
|
|
- getRadarChartOption,
|
|
|
- getInterfereChartsOption,
|
|
|
- interfereAction,
|
|
|
- getAdjustmentChartsOption,
|
|
|
- timestampToTimeS,
|
|
|
-} from "../../utils/index";
|
|
|
-import {gameDetail} from "../../requests/game";
|
|
|
-import game_store from "../../store/game";
|
|
|
-import Toast from "../../../static/vant/toast/toast";
|
|
|
-
|
|
|
-var att_charts,
|
|
|
- // alpha_beta_charts,
|
|
|
- // delta_theta_charts,
|
|
|
- hight_att_pie_charts,
|
|
|
- radar_charts,
|
|
|
- $pie_charts,
|
|
|
- $interfere_echarts,
|
|
|
- $adjustment_echarts,
|
|
|
- $this;
|
|
|
-
|
|
|
-// 大脑图表初始化
|
|
|
-function initAttChart(canvas, width, height) {
|
|
|
- att_charts = echarts.init(canvas, null, {
|
|
|
- width: width,
|
|
|
- height: height,
|
|
|
- });
|
|
|
- canvas.setChart(att_charts);
|
|
|
-
|
|
|
- var option = util.getLineOption([0], [0]); // ECharts 配置项
|
|
|
-
|
|
|
- att_charts.setOption(option);
|
|
|
-
|
|
|
- return att_charts; // 返回 chart 后可以自动绑定触摸操作
|
|
|
-}
|
|
|
-
|
|
|
-// function initABChart(canvas, width, height) {
|
|
|
-// alpha_beta_charts = echarts.init(canvas, null, {
|
|
|
-// width: width,
|
|
|
-// height: height,
|
|
|
-// });
|
|
|
-// canvas.setChart(alpha_beta_charts);
|
|
|
-
|
|
|
-// var option = util.getABOption([0], [0]); // ECharts 配置项
|
|
|
-
|
|
|
-// alpha_beta_charts.setOption(option);
|
|
|
-
|
|
|
-// return alpha_beta_charts; // 返回 chart 后可以自动绑定触摸操作
|
|
|
-// }
|
|
|
-
|
|
|
-// function initDTChart(canvas, width, height) {
|
|
|
-// delta_theta_charts = echarts.init(canvas, null, {
|
|
|
-// width: width,
|
|
|
-// height: height,
|
|
|
-// });
|
|
|
-// canvas.setChart(delta_theta_charts);
|
|
|
-
|
|
|
-// var option = util.getDTOption([0], [0]); // ECharts 配置项
|
|
|
-
|
|
|
-// delta_theta_charts.setOption(option);
|
|
|
-
|
|
|
-// return delta_theta_charts; // 返回 chart 后可以自动绑定触摸操作
|
|
|
-// }
|
|
|
-
|
|
|
-// 大脑图表初始化
|
|
|
-function initHightPieChart(canvas, width, height) {
|
|
|
- hight_att_pie_charts = echarts.init(canvas, null, {
|
|
|
- width: width,
|
|
|
- height: height,
|
|
|
- });
|
|
|
- canvas.setChart(hight_att_pie_charts);
|
|
|
-
|
|
|
- var option = getHightPieChartOption(0); // ECharts 配置项
|
|
|
-
|
|
|
- hight_att_pie_charts.setOption(option);
|
|
|
-
|
|
|
- return hight_att_pie_charts; // 返回 chart 后可以自动绑定触摸操作
|
|
|
-}
|
|
|
-
|
|
|
-// 大脑图表初始化
|
|
|
-function initRadarChart(canvas, width, height) {
|
|
|
- radar_charts = echarts.init(canvas, null, {
|
|
|
- width: width,
|
|
|
- height: height,
|
|
|
- });
|
|
|
- canvas.setChart(radar_charts);
|
|
|
-
|
|
|
- var option = getRadarChartOption(0); // ECharts 配置项
|
|
|
-
|
|
|
- radar_charts.setOption(option);
|
|
|
-
|
|
|
- // 添加点击事件
|
|
|
- radar_charts.on('click', function(params){
|
|
|
- if(params.name.indexOf("专注力平均值") != -1) {
|
|
|
- $this.radar_indication_type = 1
|
|
|
-
|
|
|
- } else if (params.name.indexOf("高专注占比") != -1) {
|
|
|
- $this.radar_indication_type = 2
|
|
|
-
|
|
|
- } else if (params.name.indexOf("专注唤醒效率") != -1) {
|
|
|
- $this.radar_indication_type = 3
|
|
|
-
|
|
|
- } else if (params.name.indexOf("整体和谐度") != -1) {
|
|
|
- $this.radar_indication_type = 4
|
|
|
-
|
|
|
- } else {
|
|
|
- $this.radar_indication_type = 5
|
|
|
- }
|
|
|
-
|
|
|
- $this.is_explainShow = true
|
|
|
- })
|
|
|
-
|
|
|
- return radar_charts; // 返回 chart 后可以自动绑定触摸操作
|
|
|
-}
|
|
|
-
|
|
|
-function initPieChart(canvas, width, height) {
|
|
|
- $pie_charts = echarts.init(canvas, null, {
|
|
|
- width: width,
|
|
|
- height: height,
|
|
|
- });
|
|
|
- canvas.setChart($pie_charts);
|
|
|
-
|
|
|
- var option = getPieChartsOption(); // ECharts 配置项
|
|
|
-
|
|
|
- $pie_charts.setOption(option);
|
|
|
-
|
|
|
- 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: {
|
|
|
- mpvueEcharts,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 0:未选择 1：时间 2：次数
|
|
|
- // 折线图 表格数据
|
|
|
- attCharts: initAttChart,
|
|
|
- // alpha_betaCharts: initABChart,
|
|
|
- // delta_thetaCharts: initDTChart,
|
|
|
- hight_att_charts: initHightPieChart,
|
|
|
- radar_charts: initRadarChart,
|
|
|
- pie_charts: initPieChart,
|
|
|
- interfere_charts: interfereChart,
|
|
|
- adjustment_charts: adjustmentCharts,
|
|
|
-
|
|
|
- echarts,
|
|
|
- record: {},
|
|
|
- userinfo: {},
|
|
|
- record_id: 0,
|
|
|
-
|
|
|
- //是否截断数据
|
|
|
- is_cut: false,
|
|
|
- //数据截断数
|
|
|
- data_section: 4,
|
|
|
- //数据集合
|
|
|
- data_lines: [],
|
|
|
- // 是否时间太短
|
|
|
- report_show: true, // 报告
|
|
|
-
|
|
|
- // 五角图解释弹窗
|
|
|
- is_explainShow: false,
|
|
|
- radar_indication_type: Number,
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 获取游戏报告
|
|
|
- get_report($record_id) {
|
|
|
- $this.record = {};
|
|
|
- Toast.loading({
|
|
|
- forbidClick: true,
|
|
|
- message: "加载中",
|
|
|
- duration: 0,
|
|
|
- });
|
|
|
- gameDetail($record_id).then(
|
|
|
- (res) => {
|
|
|
- wx.nextTick(() => {
|
|
|
- Toast.clear();
|
|
|
- });
|
|
|
- let $res = res.data;
|
|
|
-
|
|
|
- $this.report_show = $res.data.line.length > 0;
|
|
|
- // if (!$this.report_show) {
|
|
|
- // return false;
|
|
|
- // }
|
|
|
- setTimeout(() => {
|
|
|
- $this.record = $res.data;
|
|
|
- let $options = getHightPieChartOption(
|
|
|
- $this.record.heightValue,
|
|
|
- );
|
|
|
- hight_att_pie_charts.setOption($options);
|
|
|
-
|
|
|
- //设置雷达图
|
|
|
- $options = getRadarChartOption([
|
|
|
- $this.record.att_average, //平均
|
|
|
- $this.record.heightValue, //高专注占比
|
|
|
- $this.record.awakenLast, //唤醒
|
|
|
- $this.record.lineMedValue, //和谐度
|
|
|
- $this.record.stableValue, //稳定度
|
|
|
- ]);
|
|
|
- radar_charts.setOption($options);
|
|
|
-
|
|
|
- // 平均专注力大字
|
|
|
- $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("."));
|
|
|
-
|
|
|
- let $play_time = $this.record.play_time;
|
|
|
-
|
|
|
- $this.record.play_time = formatSeconds($this.record.play_time);
|
|
|
- $this.record.start_time = timestampToTimeS($this.record.start_time);
|
|
|
- $this.record.height_absorbed = parseInt($this.record.heightValue)
|
|
|
-
|
|
|
-
|
|
|
- let $pie_data = $this.record.level;
|
|
|
- // 时间
|
|
|
- $this.record.level_time0 = formatSeconds($this.record.level[0]);
|
|
|
- $this.record.level_time1 = formatSeconds($this.record.level[1]);
|
|
|
- $this.record.level_time2 = formatSeconds($this.record.level[2]);
|
|
|
- $this.record.level_time3 = formatSeconds($this.record.level[3]);
|
|
|
- $this.record.level_time4 = formatSeconds($this.record.level[4]);
|
|
|
-
|
|
|
- // 时间总数
|
|
|
- let all_time = 0;
|
|
|
- for (let i = 0; i < 5; i++) {
|
|
|
- all_time += $this.record.level[i];
|
|
|
- }
|
|
|
-
|
|
|
- // 比例
|
|
|
- $this.record.level_ratio0 =
|
|
|
- Math.round($this.record.level[0] / all_time * 100 * 100) / 100;
|
|
|
- $this.record.level_ratio1 =
|
|
|
- Math.round($this.record.level[1] / all_time * 100 * 100) / 100;
|
|
|
- $this.record.level_ratio2 =
|
|
|
- Math.round($this.record.level[2] / all_time * 100 * 100) / 100;
|
|
|
- $this.record.level_ratio3 =
|
|
|
- Math.round($this.record.level[3] / all_time * 100 * 100) / 100;
|
|
|
- $this.record.level_ratio4 =
|
|
|
- Math.round($this.record.level[4] / all_time * 100 * 100) / 100;
|
|
|
-
|
|
|
- let $pie_option = getPieChartsOption($pie_data.reverse());
|
|
|
- $pie_charts.setOption($pie_option);
|
|
|
-
|
|
|
- //5分钟阶段
|
|
|
- let $min = 2 * 60;
|
|
|
- $this.is_cut = $play_time > $min;
|
|
|
- console.log($this.is_cut);
|
|
|
- if ($this.is_cut) {
|
|
|
- //截断得数量
|
|
|
- $this.data_section = Math.ceil($play_time / $min);
|
|
|
- let $e = {
|
|
|
- mp: {
|
|
|
- detail: {
|
|
|
- name: 0,
|
|
|
- },
|
|
|
- },
|
|
|
- };
|
|
|
- this.changeMin($e);
|
|
|
- // this.changeABMin($e);
|
|
|
- // this.changeDTMin($e);
|
|
|
- } else {
|
|
|
- //处理 专注度 和 放松度的值
|
|
|
- $this.get_game_line(
|
|
|
- $this.record.line,
|
|
|
- $this.record.line_med,
|
|
|
- $this.record.amp
|
|
|
- );
|
|
|
- }
|
|
|
-
|
|
|
- // 干扰值数据传输
|
|
|
- $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);
|
|
|
-
|
|
|
- }, 1000);
|
|
|
- },
|
|
|
- (err) => {
|
|
|
- Toast.fail("错误代码：" + res.code + "，联系客服");
|
|
|
- }
|
|
|
- );
|
|
|
+ import store from '@/store/index';
|
|
|
+import game_store from "@/store/game";
|
|
|
+ var $this ;
|
|
|
+ export default {
|
|
|
+ name:"reportContainer",
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ report_id:0,
|
|
|
+ webUrl:""
|
|
|
+ }
|
|
|
},
|
|
|
- get_game_line($line_data, $line_med_data, $line_amp_data) {
|
|
|
- let $option = util.getLineOption(
|
|
|
- $line_data,
|
|
|
- $line_med_data,
|
|
|
- $line_amp_data
|
|
|
- );
|
|
|
- att_charts.setOption($option);
|
|
|
+ methods:{
|
|
|
+ webLoading(params){
|
|
|
+ console.log("加载完成")
|
|
|
+ wx.hideLoading();
|
|
|
+ }
|
|
|
},
|
|
|
- to_game_records() {
|
|
|
- mpvue.navigateTo({
|
|
|
- url: "/pages/game_record/main",
|
|
|
- });
|
|
|
+ created(){
|
|
|
+ $this = this;
|
|
|
},
|
|
|
- // 切换时间查看线 数据
|
|
|
- changeMin($e) {
|
|
|
- let $index = $e.mp.detail.name;
|
|
|
- // 0-2 2-4 4-6
|
|
|
- // 0 1 2
|
|
|
- let $start = $index * 120;
|
|
|
- let $end = ($index + 1) * 120;
|
|
|
- let $line_data = $this.record.line.slice($start, $end);
|
|
|
- let $med_data = $this.record.line_med.slice($start, $end);
|
|
|
- let $amp_data = $this.record.amp.slice($start, $end);
|
|
|
- $this.get_game_line($line_data, $med_data, $amp_data);
|
|
|
+ onLoad(options) {
|
|
|
+ wx.showLoading({
|
|
|
+ title:"加载中",
|
|
|
+ mask:true
|
|
|
+ })
|
|
|
+ $this.report_id = options.id
|
|
|
+ ? options.id
|
|
|
+ : game_store.getters.getGameRecordId();
|
|
|
+ console.log($this.report_id);
|
|
|
+ let $userinfo = wx.getStorageSync("userinfo")
|
|
|
+
|
|
|
+ $this.webUrl = `${process.env.REPORT_URI}?mode=1&token=${store.getters.get_token()}&record_id=${options.id}&nickName=${$userinfo.user_name}&mp=1`
|
|
|
+ // let sys = wx.getSystemInfoSync();
|
|
|
+ // if (sys.platform == "ios") {
|
|
|
+ // $this.webUrl = encodeURIComponent(`${process.env.REPORT_URI}?mode=1&token=${store.getters.get_token()}&record_id=${options.id}&nickName=${$userinfo.user_name}&mp=1`)
|
|
|
+ // }
|
|
|
+ console.log($this.webUrl);
|
|
|
},
|
|
|
- // 关闭雷达解释
|
|
|
- closeRadarExplain() {
|
|
|
- $this.is_explainShow = false
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- $this.userinfo = wx.getStorageSync("userinfo");
|
|
|
- //设置游戏时间长
|
|
|
- wx.removeStorageSync("played_time");
|
|
|
- $this.get_report($this.record_id);
|
|
|
- },
|
|
|
- created() {
|
|
|
- $this = this;
|
|
|
- },
|
|
|
- onLoad(options) {
|
|
|
- $this.record_id = options.id
|
|
|
- ? options.id
|
|
|
- : game_store.getters.getGameRecordId();
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-#report_container {
|
|
|
- background: white;
|
|
|
- padding-top: 10px;
|
|
|
- padding-bottom: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 头部椭圆 */
|
|
|
-.head {
|
|
|
- width: 442px;
|
|
|
- height: 385px;
|
|
|
- background-color: #4b3ab0;
|
|
|
- border-radius: 50%;
|
|
|
- position: absolute;
|
|
|
- left: -34px;
|
|
|
- top: -252px;
|
|
|
- z-index: -1;
|
|
|
-}
|
|
|
-
|
|
|
-/* 头部个人信息 */
|
|
|
-image.boy {
|
|
|
- width: 110px;
|
|
|
- height: 111px;
|
|
|
- position: absolute;
|
|
|
- left: 225px;
|
|
|
- top: 45px;
|
|
|
-}
|
|
|
-
|
|
|
-.user_info {
|
|
|
- width: 95%;
|
|
|
- height: 90px;
|
|
|
- display: flex;
|
|
|
- margin: 0 auto;
|
|
|
- margin-bottom: 15px;
|
|
|
- align-items: center;
|
|
|
- padding-right: 18px;
|
|
|
- box-sizing: border-box;
|
|
|
- box-shadow: 0px 3px 7px 0px rgba(159, 159, 159, 0.84);
|
|
|
- border-radius: 10px;
|
|
|
- background: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-.user_info img {
|
|
|
- display: inline-block;
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- margin-left: 15px;
|
|
|
- margin-right: 12px;
|
|
|
- border-radius: 5px;
|
|
|
-}
|
|
|
-
|
|
|
-.user_info .info_wrap {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- box-sizing: border-box;
|
|
|
- flex-direction: column;
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
-
|
|
|
-.user_info .box_wrap {
|
|
|
- display: flex;
|
|
|
- color: #222222;
|
|
|
- box-sizing: border-box;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-
|
|
|
-.user_info .box_wrap_left {
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.user_info .box_wrap_right {
|
|
|
- align-items: flex-end;
|
|
|
-}
|
|
|
-
|
|
|
-.user_info .info_right {
|
|
|
- color: #666666;
|
|
|
-}
|
|
|
-
|
|
|
-/* 智脑系数 */
|
|
|
-.bran_wrap {
|
|
|
- width: 100%;
|
|
|
- height: 101px;
|
|
|
- background-color: #fff;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.bran_wrap img {
|
|
|
- display: inline-block;
|
|
|
- width: 67px;
|
|
|
- height: 80px;
|
|
|
- margin-right: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.bran_wrap .bran {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.bran_wrap .bran .p_num {
|
|
|
- color: #ffb72d;
|
|
|
- font-size: 35px;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.bran_wrap .bran .p_text {
|
|
|
- color: #333333;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-/* 详细数据 */
|
|
|
-.margin-tb {
|
|
|
- width: 95%;
|
|
|
- height: 110px;
|
|
|
- margin: 0 auto;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- background: #f3f3f3;
|
|
|
- border-radius: 5px;
|
|
|
-}
|
|
|
-
|
|
|
-.margin-tb .margin_left {
|
|
|
- flex: 1;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- margin-left: 3px;
|
|
|
-}
|
|
|
-
|
|
|
-.margin-tb .margin_left .left_content {
|
|
|
- height: 110px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: #676767;
|
|
|
- margin-top: -100px;
|
|
|
- margin-left: 5px;
|
|
|
-}
|
|
|
-
|
|
|
-.margin-tb .margin_left .left_content .left_num {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 900;
|
|
|
- margin-bottom: -3px;
|
|
|
-}
|
|
|
-
|
|
|
-.margin-tb .margin_left .left_content .left_text {
|
|
|
- font-size: 8px;
|
|
|
-}
|
|
|
-
|
|
|
-.margin-tb .margin_centent {
|
|
|
- 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 {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: #90df24;
|
|
|
- box-sizing: border-box;
|
|
|
- /* padding-right:2px; */
|
|
|
-}
|
|
|
-
|
|
|
-.margin-tb .margin_right .right_num {
|
|
|
- font-size: 30px;
|
|
|
- font-weight: 800;
|
|
|
- margin-bottom: 2px;
|
|
|
-}
|
|
|
-
|
|
|
-.margin-tb .margin_right .right_text {
|
|
|
- width: 75%;
|
|
|
- height: 15px;
|
|
|
- background: #90df24;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- line-height: 15px;
|
|
|
- font-size: 10px;
|
|
|
- border-radius: 3px;
|
|
|
-}
|
|
|
-
|
|
|
-.margin-tb .detail {
|
|
|
- width: 47%;
|
|
|
- height: 50%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: #676767;
|
|
|
- font-size: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.margin-tb .detail .detail_num {
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 800;
|
|
|
- margin-bottom: 1px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 小标题 */
|
|
|
-.bar {
|
|
|
- width: 100%;
|
|
|
- height: 10px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 7px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin: 25px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.bar view {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: start;
|
|
|
-}
|
|
|
-
|
|
|
-.conclution {
|
|
|
- width: 100%;
|
|
|
- padding: 5px 19px 8px;
|
|
|
- font-size: 12px;
|
|
|
- color: #6c6c6c;
|
|
|
- box-sizing: border-box;
|
|
|
- line-height: 25px;
|
|
|
- margin-bottom: 28px;
|
|
|
-}
|
|
|
-
|
|
|
-.conclution_title {
|
|
|
- font-weight: 600;
|
|
|
- color: #000;
|
|
|
-}
|
|
|
-
|
|
|
-.bar .line {
|
|
|
- width: 4px;
|
|
|
- height: 15px;
|
|
|
- background-color: #5d4db8;
|
|
|
- margin-right: 7px;
|
|
|
-}
|
|
|
-
|
|
|
-.bar .title {
|
|
|
- color: #010101;
|
|
|
- font-size: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 图表 */
|
|
|
-#mychart-dom-multi-line {
|
|
|
- width: 360px;
|
|
|
- height: 193px;
|
|
|
-}
|
|
|
-
|
|
|
-.chart {
|
|
|
- margin: 0 auto;
|
|
|
- width: 360px;
|
|
|
- height: 193px;
|
|
|
- opacity: 0.6;
|
|
|
- border-radius: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.chart_line {
|
|
|
- /* box-shadow: 0px 6px 11px #dadada; */
|
|
|
- background: #f3f3f3;
|
|
|
-}
|
|
|
-
|
|
|
-/*雷达图*/
|
|
|
-.radar_chart {
|
|
|
- margin: 0 auto;
|
|
|
- margin-bottom: 10px;
|
|
|
- width: 360px;
|
|
|
- height: 293px;
|
|
|
- /* background: #f3f3f3; */
|
|
|
- opacity: 0.6;
|
|
|
- border-radius: 10px;
|
|
|
- /* box-shadow: 0px 6px 11px #dadada; */
|
|
|
-}
|
|
|
-
|
|
|
-.hight_pie_chart {
|
|
|
- /* margin: 0 auto; */
|
|
|
- width: 120%;
|
|
|
- height: 95px;
|
|
|
- background: #f3f3f3;
|
|
|
- margin-top: 10px;
|
|
|
- margin-left: -7px;
|
|
|
- /*border-radius: 10px;*/
|
|
|
- /*box-shadow: 0px 6px 11px #dadada;*/
|
|
|
-}
|
|
|
-
|
|
|
-.radar_explain_bg {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- background: rgba(0,0,0,.8);
|
|
|
- z-index: 999;
|
|
|
-}
|
|
|
-
|
|
|
-.radar_explain_wrap {
|
|
|
- width: 80%;
|
|
|
- height: 150px;
|
|
|
- position: fixed;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
- z-index: 999;
|
|
|
-}
|
|
|
-
|
|
|
-.radar_explain_view{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 10px;
|
|
|
- padding:25px;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: initial;
|
|
|
-}
|
|
|
-
|
|
|
-.text_explain_center{
|
|
|
- display: flex;
|
|
|
- align-items: center
|
|
|
-}
|
|
|
-
|
|
|
-.text_explain_wrap{
|
|
|
- display:block;
|
|
|
- white-space: pre-wrap;
|
|
|
- line-height:22px
|
|
|
-}
|
|
|
-
|
|
|
-/* 核销详情 */
|
|
|
-.sheet {
|
|
|
- color: #6d6d6d;
|
|
|
- font-size: 12px;
|
|
|
- display: flex;
|
|
|
- padding: 0 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 30px;
|
|
|
-}
|
|
|
-
|
|
|
-.sheet .left,
|
|
|
-.sheet .right {
|
|
|
- height: 15px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-
|
|
|
-.sheet .left {
|
|
|
- width: 195px;
|
|
|
-}
|
|
|
-
|
|
|
-.content_card {
|
|
|
- border-radius: 10px;
|
|
|
- box-shadow: 0px 6px 11px #dadada;
|
|
|
-}
|
|
|
-
|
|
|
-.divide_line {
|
|
|
- width: 360px;
|
|
|
- height: 1px;
|
|
|
- background: #e5e5e5;
|
|
|
- margin: 0 auto;
|
|
|
-}
|
|
|
-
|
|
|
-/* 专注力干扰看板 */
|
|
|
-.absorbed_change {
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-top: 18px;
|
|
|
-}
|
|
|
-
|
|
|
-.absorbed_change .line {
|
|
|
- width: 4px;
|
|
|
- height: 15px;
|
|
|
- background-color: #5d4db8;
|
|
|
- margin-right: 7px;
|
|
|
-}
|
|
|
-
|
|
|
-.absorbed_change .title {
|
|
|
- color: #010101;
|
|
|
- font-size: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-.interfere_title_wrap {
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-/* 干扰 标题*/
|
|
|
-.interfere {
|
|
|
- display: flex;
|
|
|
- margin-left: 8px;
|
|
|
- height: 54px;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 14px;
|
|
|
-}
|
|
|
-
|
|
|
-.interfere .interfere_logo {
|
|
|
- display: inline-block;
|
|
|
- width: 19px;
|
|
|
- height: 19px;
|
|
|
- margin-right: 7px;
|
|
|
-}
|
|
|
-
|
|
|
-.interfere .interfere_text {
|
|
|
- font-size: 15px;
|
|
|
- color: #676767;
|
|
|
-}
|
|
|
-
|
|
|
-.interfere .interfere_text .interfere_text_num {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 800;
|
|
|
-}
|
|
|
-
|
|
|
-/* 干扰 echarts */
|
|
|
-.interfere_echarts_wrap {
|
|
|
- width: 360px;
|
|
|
- height: 200px;
|
|
|
- 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%;
|
|
|
- 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;
|
|
|
-}
|
|
|
-
|
|
|
-.interfere_footer .interfere_footer_logo {
|
|
|
- display: inline-block;
|
|
|
- width: 13px;
|
|
|
- height: 13px;
|
|
|
- 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: 200px;
|
|
|
- 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;
|
|
|
- margin-bottom: 30px
|
|
|
-}
|
|
|
-
|
|
|
-.absorbed_change_footer .footer_text {
|
|
|
- font-size: 15px;
|
|
|
- color: #676767;
|
|
|
-}
|
|
|
-
|
|
|
-.footer_text_W {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
-
|
|
|
-.test {
|
|
|
- color: rgb(163, 7, 7);
|
|
|
-}
|
|
|
-
|
|
|
-.label {
|
|
|
- color: #9a95b7;
|
|
|
- font-size: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-/* .label_up {
|
|
|
- color: #9a95b7;
|
|
|
- font-size: 10px;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- width: 270px;
|
|
|
-} */
|
|
|
-
|
|
|
-/*点图*/
|
|
|
-.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-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: #ff77b3;
|
|
|
-} */
|
|
|
-
|
|
|
-/* 节标题 */
|
|
|
-.bar {
|
|
|
- width: 100%;
|
|
|
- height: 15px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 7px;
|
|
|
- box-sizing: border-box;
|
|
|
- /* margin: 14px 0; */
|
|
|
-}
|
|
|
-
|
|
|
-.bar view {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: start;
|
|
|
-}
|
|
|
-
|
|
|
-.bar .line {
|
|
|
- width: 4px;
|
|
|
- height: 15px;
|
|
|
- /* background-color: #ffb400; */
|
|
|
- margin-right: 7px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 圆环图 */
|
|
|
-.flexBoxVer {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
-}
|
|
|
-
|
|
|
-.boxVer {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
- flex-direction: column;
|
|
|
- height: 500px;
|
|
|
- justify-content: center;
|
|
|
- padding: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.flexBoxLand {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.colorChangeWrap {
|
|
|
- margin-bottom: 5px;
|
|
|
-}
|
|
|
-
|
|
|
-.colorChange {
|
|
|
- width: 50px;
|
|
|
- height: 18px;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 11px;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- line-height: 18px;
|
|
|
- margin-right: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.colorChangeTime {
|
|
|
- font-size: 13px;
|
|
|
-}
|
|
|
-
|
|
|
-#changeFirst {
|
|
|
- background: #5470c6;
|
|
|
-}
|
|
|
-
|
|
|
-#changeSecond {
|
|
|
- background: #91cc75;
|
|
|
-}
|
|
|
-
|
|
|
-#changeThird {
|
|
|
- background: #fac858;
|
|
|
-}
|
|
|
-
|
|
|
-#changeFourth {
|
|
|
- background: #ee6666;
|
|
|
-}
|
|
|
-
|
|
|
-#changeFifth {
|
|
|
- background: #73c0de;
|
|
|
-}
|
|
|
-
|
|
|
-.chart_circle {
|
|
|
- width: 180px;
|
|
|
- height: 193px;
|
|
|
- border-radius: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.left_content {
|
|
|
- height: 193px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: #676767;
|
|
|
- margin-top: -190px;
|
|
|
-}
|
|
|
-
|
|
|
-.left_text {
|
|
|
- font-size: 12px;
|
|
|
-}
|
|
|
-</style>
|
|
|
+ }
|
|
|
+</script>
|
Fury