echarts
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="./js/vue.min.js"></script>
<link rel="stylesheet" href="./css/element.css">
<link rel="stylesheet" href="./css/web.css">
<link rel="stylesheet" href="./css/mobile.css">
<!-- 必须先引入vue 后使用element-ui -->
<script src="./js/element.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/echarts.min.js"></script>
</head>
<body>
<div id="app" v-cloak>
<div class="container" v-if="flag" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
<div class="logo_box">
<img src="./images/logo.png" alt="">
</div>
<div>
<div class="header_box">
<div class="check_btn_box">
<div @click="changeTab(1)" :class="{'tabActive':tab1Flag}">One day</div>
<div @click="changeTab(2)" :class="{'tabActive':tab2Flag}">One month</div>
</div>
<div class="user_name">{{nickName}}</div>
</div>
<div v-show="tab1Flag" class="main">
<div class="day_main_left">
<div class="day_title">{{date}}</div>
<div class="setCircleBox1">
<div class="circleBox">
<el-progress type="circle" stroke-width="6" :percentage="score_clone" width="130"
:show-text="false" color="#4197B5">
</el-progress>
<div class="circleCenter">
<div class="circleCenter_txt1">{{score}}</div>
<div class="circleCenter_txt2">Sleep Score</div>
</div>
</div>
</div>
<div class="setCircleBox2" style="position: relative;z-index: 1; margin-top: -48px;">
<div class="circleBox">
<el-progress type="circle" stroke-width="5" :percentage="bodyBattery_clone" width="110"
:show-text="false" color="#3CC29C">
</el-progress>
<div class="circleCenter1">
<div class="circleCenter_txt1">{{bodyBattery}}</div>
<div class="circleCenter_txt2">Body Battery</div>
</div>
</div>
<div class="circleBox">
<el-progress type="circle" stroke-width="5" :percentage="stressLevel_clone" width="110"
:show-text="false" color="#D2E7EF">
</el-progress>
<div class="circleCenter1">
<div class="circleCenter_txt1">{{stressLevel}}</div>
<div class="circleCenter_txt2">Stress Score</div>
</div>
</div>
</div>
<div class="iconAndTextBox">
<div class="iconAndTextChildBox">
<img src="./images/TotalSleep.png" alt="">
<div class="iconBottomTxtBox">
<div class="iconBottomTxt1">{{day_sleepLen1}}h {{day_sleepLen2}}min</div>
<div class="iconBottomTxt2"><span style="margin-right: 16px;">Total
Sleep</span><span>{{sleepTime12}} - {{wakeTime12}}</span></div>
</div>
</div>
<div class="iconAndTextChildBox">
<img src="./images/HeartRate.png" alt="">
<div class="iconBottomTxtBox">
<div class="iconBottomTxt1">{{avgHeart}} bpm</div>
<div class="iconBottomTxt2"><span style="margin-right: 16px;">Heart
Rate</span><span>24hours</span></div>
</div>
</div>
<div class="iconAndTextChildBox">
<img src="./images/RespiratoryRate.png" alt="">
<div class="iconBottomTxtBox">
<div class="iconBottomTxt1">{{avgBreath}} breaths/min</div>
<div class="iconBottomTxt2"><span style="margin-right: 16px;">Respiratory
Rate</span><span>24hours</span></div>
</div>
</div>
<div class="iconAndTextChildBox">
<img src="./images/CaloriesBurned.png" alt="">
<div class="iconBottomTxtBox">
<div class="iconBottomTxt1">{{countKilocalories}} kacl</div>
<div class="iconBottomTxt2"><span style="margin-right: 16px;">Calories
Burned</span><span>24hours</span></div>
</div>
</div>
<div class="iconAndTextChildBox">
<img src="./images/Movement.png" alt="">
<div class="iconBottomTxtBox">
<div class="iconBottomTxt1">{{moveTimes}} movements</div>
<div class="iconBottomTxt2"><span style="margin-right: 16px;">Sleep
Movement</span><span>{{sleepTime12}} - {{wakeTime12}}</span></div>
</div>
</div>
<div class="iconAndTextChildBox">
<img src="./images/Snoring.png" alt="">
<div class="iconBottomTxtBox">
<div class="iconBottomTxt1">{{antiSnoreTimes}} times</div>
<div class="iconBottomTxt2"><span
style="margin-right: 16px;">Anti-Snore</span><span>{{sleepTime12}} -
{{wakeTime12}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="day_main_middle">
<div class="day_main_middle_line"></div>
</div>
<div class="day_main_right">
<div class="day_main_righ_header">
<div class="day_common_charts_box" style="position: relative;">
<div class="title_circle_box">
<div class="title_circle"></div><span class="title_circle_txt">Total Sleep</span>
</div>
<div style="position: absolute;top: 30px;width: 100%;">
<div style="display:flex;justify-content:space-between;width: 100%;margin: 0 auto;">
<div style="font-size: 12px;position: relative;left: 14%;">{{mob_total_timeflag1}}</div>
<div style="font-size: 12px;position: relative;right:5% ;">{{mob_total_timeflag2}}</div>
</div>
</div>
<div id="day1" style="height: 22vh;"></div>
</div>
<div class="day_common_charts_box" style="margin-top: 20px;width: 30%;">
<div class="day_table_child_box">
<div class="day_table_child_box_item">
<div class="squle_store1"></div>Deep
</div>
<div class="day_table_child_box_item border_item_class">{{deepDuration1}}<span
style="margin-right: 4px;color: #AFB3C0;">h</span>{{deepDuration2}}<span
style="color: #AFB3C0;">min</span></div>
<div class="day_table_child_box_item">{{deepPercentage}}</div>
</div>
<div class="day_table_child_box">
<div class="day_table_child_box_item">
<div class="squle_store2"></div>Light
</div>
<div class="day_table_child_box_item border_item_class">{{shallowDuration1}}<span
style="margin-right: 4px;color: #AFB3C0;">h</span>{{shallowDuration2}}<span
style="color: #AFB3C0;">min</span></div>
<div class="day_table_child_box_item">{{shallowPercentage}}</div>
</div>
<div class="day_table_child_box">
<div class="day_table_child_box_item">
<div class="squle_store3"></div>Awake
</div>
<div class="day_table_child_box_item border_item_class">{{wakeDuration1}}<span
style="margin-right: 4px;color: #AFB3C0;">h</span>{{wakeDuration2}}<span
style="color: #AFB3C0;">min</span></div>
<div class="day_table_child_box_item">{{wakePercentage}}</div>
</div>
</div>
<div class="day_common_charts_box" style="position: relative;">
<div class="title_circle_box">
<div class="title_circle"></div><span class="title_circle_txt">Heart Rate</span>
</div>
<!-- <div v-if="sleepStageDisFlag" style="position: absolute;top:25px;width: 100%;">
<div style="display:flex;justify-content:space-between;margin: 0 auto;">
<div
style="display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;margin-left: 10%;">
<img src="./images/garmin_month.png" width="11" height="11" alt="">
<div style="font-size: 12px;">{{mob_total_timeflag1}}</div>
</div>
<div
style="display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;margin-right: 2%;">
<img src="./images/garmin_sun.png" width="14" height="14" alt="">
<div style="font-size: 12px;">{{mob_total_timeflag2}}</div>
</div>
</div>
</div> -->
<div id="day2" style="height: 22vh;"></div>
</div>
</div>
<div class="day_main_righ_center">
<div class="day_common_charts_box" style="position: relative;">
<div class="title_circle_box">
<div class="title_circle"></div><span class="title_circle_txt">Respiratory
Rate</span>
</div>
<!-- <div v-if="sleepStageDisFlag" style="position: absolute;top:25px;width: 100%;">
<div style="display:flex;justify-content:space-between;margin: 0 auto;">
<div
style="display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;margin-left: 10%;">
<img src="./images/garmin_month.png" width="11" height="11" alt="">
<div style="font-size: 12px;">{{mob_total_timeflag1}}</div>
</div>
<div
style="display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;margin-right: 2%;">
<img src="./images/garmin_sun.png" width="14" height="14" alt="">
<div style="font-size: 12px;">{{mob_total_timeflag2}}</div>
</div>
</div>
</div> -->
<div id="day3" style="height: 22vh;"></div>
</div>
<div class="day_common_charts_box">
<div class="title_circle_box">
<div class="title_circle"></div><span class="title_circle_txt">Calories
Burned</span>
</div>
<div class="setCircleBox1">
<div class="circleBox" style="top: 8px;">
<el-progress type="circle" stroke-width="8" :percentage="100" width="110"
:show-text="false" color="#F5AF00">
</el-progress>
<div class="circleCenter_clone">
<div class="circleCenter_txt1_clone">{{totalKeKilocalories}}</div>
<div class="circleCenter_txt2_clone">Total Calories</div>
<div class="circleCenter_txt2_clone">Burned</div>
</div>
</div>
</div>
<div class="setCircleBox2" style="margin-top: -40px;">
<div class="circleBox_clone">
<el-progress type="circle" :percentage="100" width="90" :show-text="false"
color="#AFB3C0">
</el-progress>
<div class="circleCenter1_clone">
<div class="circleCenter_txt1_clone">{{sleepKilocalories}}</div>
<div class="circleCenter_txt2_clone">Asleep</div>
</div>
</div>
<div class="circleBox_clone">
<el-progress type="circle" :percentage="100" width="90" :show-text="false"
color="#4197B5">
</el-progress>
<div class="circleCenter1_clone">
<div class="circleCenter_txt1_clone">{{awakeKilocalories}}</div>
<div class="circleCenter_txt2_clone"> Awake</div>
</div>
</div>
</div>
<div class="charts_text_ld">Asleep + Awake = Total Calories Burned</div>
</div>
<div class="day_common_charts_box" style="position: relative;">
<div class="title_circle_box">
<div class="title_circle"></div><span class="title_circle_txt">Sleep Movement</span>
</div>
<div v-if="moveDisFlag" style="position: absolute;top:25px;width: 100%;">
<div style="display:flex;justify-content:space-between;width: 100%;margin: 0 auto;">
<div
style="display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;position: relative;left:9%;">
<img src="./images/garmin_month.png" width="11" height="11" alt="">
<div style="font-size: 12px;">{{mob_total_timeflag1}}</div>
</div>
<div
style="display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;">
<img src="./images/garmin_sun.png" width="14" height="14" alt="">
<div style="font-size: 12px;">{{mob_total_timeflag2}}</div>
</div>
</div>
</div>
<div id="day4" style="height: 22vh;"></div>
</div>
</div>
<div class="day_main_righ_footer">
<div class="day_common_charts_box" style="position: relative;">
<div class="title_circle_box">
<div class="title_circle"></div><span class="title_circle_txt">Anti-Snore</span>
</div>
<div v-if="antiSnoreDisFlag" style="position: absolute;top: 25px;width: 100%;">
<div style="display:flex;justify-content:space-between;width: 100%;margin: 0 auto;">
<div style="font-size: 12px;position: relative;left: 5%;">{{mob_total_timeflag1}}</div>
<div style="font-size: 12px;position: relative;right: 5%;">{{mob_total_timeflag2}}</div>
</div>
</div>
<div id="day5" style="height: 22vh;"></div>
</div>
<div class="day_common_charts_box">
<div class="title_circle_box">
<div class="title_circle"></div><span class="title_circle_txt">Fatigue Index</span>
</div>
<div
style="height:22vh;display: flex;flex-flow:column nowrap;justify-content:center;align-items: center;">
<div style="font-size:32px;color:#FFF;margin-bottom: 10px;">{{fatigueIndex}}</div>
<div style="font-size:14px;color:#AFB3C0">Normal reference range:1~3</div>
</div>
</div>
<div class="day_common_charts_box">
<div class="title_circle_box">
<div class="title_circle"></div><span class="title_circle_txt">Recovery Index</span>
</div>
<div
style="height:22vh;display: flex;flex-flow:column nowrap;justify-content:center;align-items: center;">
<div style="font-size:32px;color:#FFF;margin-bottom: 10px;">{{recoveryIndex}}</div>
<div style="font-size:14px;color:#AFB3C0">Normal reference range:3~5</div>
</div>
</div>
</div>
</div>
</div>
<div v-show="tab2Flag" class="main_clone">
<div class="month_main_left">
<div class="month_title">{{month_reportStart}} - {{month_reportEnd}}</div>
<div class="title_circle_box_clone">
<!-- <div class="title_circle_box">
<div class="title_circle"></div><span class="title_circle_txt">Total Sleep</span>
</div> -->
<div style="display: flex;align-items: center;">
<div class="title_circle"></div><span class="title_circle_txt">Total Sleep</span>
</div>
<div class="month_charts_time">{{avgSleepLen1}}h {{avgSleepLen2}}min</div>
</div>
<div style="position: relative;">
<div class="sleep_quality_title">Monthly Average Sleep Quality</div>
<div id="month1" style="width:18vw;height: 23vh;"></div>
<div
style="display: flex;justify-content: space-around;color:#fff;font-size: 12px;margin-top: -30px;">
<div style="display: flex;flex-flow: column nowrap;">
<div style="display: flex;align-items: center;margin-bottom: 5px;">
<div class="squle_store1"></div>Deep
</div>
<div style="font-size: 16px;display: flex;justify-content: flex-end;">
{{monthdeepPercentage}}</div>
</div>
<div style="display: flex;flex-flow: column nowrap;">
<div style="display: flex;align-items: center;margin-bottom: 5px;">
<div class="squle_store2"></div>Light
</div>
<div style="font-size: 16px;display: flex;justify-content: flex-end;">
{{monthshallowPercentage}}</div>
</div>
<div style="display: flex;flex-flow: column nowrap;">
<div style="display: flex;align-items: center;margin-bottom: 5px;">
<div class="squle_store3"></div>Awake
</div>
<div style="font-size: 16px;display: flex;justify-content: flex-end;">
{{monthwakePercentage}}</div>
</div>
</div>
<div style="margin-left: 10px;">
<div class="sleep_quality_title" style="margin-bottom: 20px;">Wake Up Time and Fall
Asleep Time</div>
<div id="month2" style="width:19vw;height:23vh;"></div>
<div class="WakeAndFallBox">
<div class="WakeAndFallItem">
<div class="WakeAndFallItemContent">
<div class="month_circle_flag1"></div><span>Avg. time to sleep up this
month</span>
</div>
<div class="WakeAndFallItemText">{{avgSleepTime}}</div>
</div>
<div class="WakeAndFallItem">
<div class="WakeAndFallItemContent">
<div class="month_circle_flag2"></div><span>Avg. time to wake up this
month</span>
</div>
<div class="WakeAndFallItemText">{{avgWakeTime}}</div>
</div>
<div style="width: 100%;border-top: 1px solid #525466;"></div>
<div class="WakeAndFallItem">
<div class="WakeAndFallItemContent">
<div class="month_circle_flag1"></div><span>Avg. time to sleep up last
month</span>
</div>
<div class="WakeAndFallItemText">{{lastAvgSleepTime}}</div>
</div>
<div class="WakeAndFallItem">
<div class="WakeAndFallItemContent">
<div class="month_circle_flag2"></div><span>Avg. time to wake up last
month</span>
</div>
<div class="WakeAndFallItemText">{{lastAvgWakeTime}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="month_main_middle">
<div class="day_main_middle_line"></div>
</div>
<div class="month_main_right">
<div class="month_main_righ_header">
<div class="month_common_charts_box">
<div class="month_charts_title_box">
<div style="display: flex;align-items: center;">
<div class="title_circle"></div><span class="title_circle_txt">Heart Rate</span>
</div>
<div class="month_charts_message">{{month_avgHeart}} bpm</div>
</div>
<div id="month3" style="height: 14vh;" class="month_chart_common"></div>
<div style="display: flex;justify-content: center;margin-top: 10px;">
<div class="month_common_table_wrap">
<div class="month_common_table_child_wrap">
<div class="month_common_table_txt">Minimum daily average heart rate</div>
<div class="month_common_table_number">{{month_minHeart}}</div>
</div>
<div class="month_common_table_child_wrap">
<div class="month_common_table_txt">Maximum daily average heart rate</div>
<div class="month_common_table_number">{{month_maxHeart}}</div>
</div>
</div>
</div>
</div>
<div class="month_common_charts_box">
<div class="month_charts_title_box">
<div style="display: flex;align-items: center;">
<div class="title_circle"></div><span class="title_circle_txt">Sleep
Movement</span>
</div>
<div class="month_charts_message">{{month_moveTimes}} movements</div>
</div>
<div id="month4" style="height: 14vh;" class="month_chart_common"></div>
<div style="display: flex;justify-content: center;margin-top: 10px;">
<div class="month_common_table_wrap">
<div class="month_common_table_child_wrap">
<div class="month_common_table_txt">Minimum daily average movements</div>
<div class="month_common_table_number">{{month_minMove}}</div>
</div>
<div class="month_common_table_child_wrap">
<div class="month_common_table_txt">Maximum daily average movements</div>
<div class="month_common_table_number">{{month_maxMove}}</div>
</div>
</div>
</div>
</div>
<div class="month_common_charts_box">
<div class="month_charts_title_box">
<div style="display: flex;align-items: center;">
<div class="title_circle"></div><span class="title_circle_txt">Stress</span>
</div>
<div class="month_charts_message">{{month_avgStress}}</div>
</div>
<div id="month5" style="height: 14vh;" class="month_chart_common"></div>
<div style="display: flex;justify-content: center;margin-top: 10px;">
<div class="month_common_table_wrap_clone1">
<div style="display: flex;justify-content: space-around;"
class="fatherAndSonBox">
<div>Very Low</div>
<div style="font-size: 12px;">{{restStress}} <span
style="color: #AFB3C0;">day</span>
</div>
<div style="width: 1px;border-left: 1px solid #6D7188;"></div>
<div>Low</div>
<div style="font-size: 12px;">{{month_lowStress}} <span
style="color: #AFB3C0;">day</span>
</div>
</div>
<div style="display: flex;justify-content: space-around;"
class="fatherAndSonBox">
<div>Medium</div>
<div style="font-size: 12px;">{{month_mediumStress}} <span
style="color: #AFB3C0;">day</span>
</div>
<div style="width: 1px;border-left: 1px solid #6D7188;"></div>
<div>High</div>
<div style="font-size: 12px;">{{month_highStress}} <span
style="color: #AFB3C0;">day</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="month_main_righ_center">
<div class="month_common_charts_box">
<div class="month_charts_title_box">
<div style="display: flex;align-items: center;">
<div class="title_circle"></div><span class="title_circle_txt">Respiratory
Rate</span>
</div>
<div class="month_charts_message">{{month_avgBreath}} breaths/min</div>
</div>
<div id="month6" style="height: 14vh;" class="month_chart_common"></div>
<div style="display: flex;justify-content: center;margin-top:10px;">
<div class="month_common_table_wrap">
<div class="month_common_table_child_wrap">
<div class="month_common_table_txt">Minimum daily average breath rate</div>
<div class="month_common_table_number">{{month_minBreath}}</div>
</div>
<div class="month_common_table_child_wrap">
<div class="month_common_table_txt">Maximum daily average breath rate</div>
<div class="month_common_table_number">{{month_maxBreath}}</div>
</div>
</div>
</div>
</div>
<div class="month_common_charts_box">
<div class="month_charts_title_box">
<div style="display: flex;align-items: center;">
<div class="title_circle"></div><span class="title_circle_txt">Anti-Snore</span>
</div>
<div class="month_charts_message">{{month_antiSnoreTimes}} times</div>
</div>
<div id="month7" style="height: 14vh;" class="month_chart_common"></div>
<div style="display: flex;justify-content: center;margin-top: 10px;">
<div class="month_common_table_wrap">
<div class="month_common_table_child_wrap">
<div class="month_common_table_txt">Minimum daily average anti-snore</div>
<div class="month_common_table_number">{{month_minAntiSnore}}</div>
</div>
<div class="month_common_table_child_wrap">
<div class="month_common_table_txt">Maximum daily average anti-snore</div>
<div class="month_common_table_number">{{month_maxAntiSnore}}</div>
</div>
</div>
</div>
</div>
<div class="month_common_charts_box">
<div class="month_charts_title_box">
<div style="display: flex;align-items: center;">
<div class="title_circle"></div><span class="title_circle_txt">Fatigue
Index</span>
</div>
<div class="month_charts_message">{{avgFatigueIndex}}</div>
</div>
<div id="month8" style="height: 14vh;" class="month_chart_common"></div>
<div style="display: flex;justify-content: center;margin-top: 10px;">
<div class="month_common_table_wrap">
<div class="month_common_table_child_wrap">
<div class="month_common_table_txt">Minimum daily average fatigue index
</div>
<div class="month_common_table_number">{{month_minFatigueIndex}}</div>
</div>
<div class="month_common_table_child_wrap">
<div class="month_common_table_txt">Maximum daily average fatigue index
</div>
<div class="month_common_table_number">{{month_maxFatigueIndex}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="month_main_righ_footer">
<div class="month_common_charts_box">
<div class="month_charts_title_box">
<div style="display: flex;align-items: center;">
<div class="title_circle"></div><span class="title_circle_txt">Calories
Burned</span>
</div>
<div class="month_charts_message">{{avgCountKilocalories}} kcal</div>
</div>
<div id="month9" style="height: 14vh;" class="month_chart_common"></div>
<div style="display: flex;justify-content: center;margin-top: 10px;">
<div class="month_common_table_wrap_clone2">
<div style="display: flex;justify-content: space-between;">
<div
style="display: flex;align-items: center;margin-left: 20px;font-size: 10px;">
<div
style="width: 8px;height: 8px;border-radius: 50%;background-color: #4197B5;margin-right: 8px;">
</div>Daily Awkae
</div>
<div style="margin-right: 20px;font-size: 14px;">
{{avgAwakeKilocalories}}<span
style="font-size: 10px;color: #AFB3C0;margin-left: 5px;">kacl</span>
</div>
</div>
<div style="display: flex;justify-content: space-between;">
<div
style="display: flex;align-items: center;margin-left: 20px;font-size: 10px;">
<div
style="width: 8px;height: 8px;border-radius: 50%;background-color: #4197B5;margin-right: 8px;">
</div>Daily Asleep
</div>
<div style="margin-right: 20px;font-size: 14px;">
{{avgSleepKilocalories}}<span
style="font-size: 10px;color: #AFB3C0;margin-left: 5px;">kacl</span>
</div>
</div>
<div style="display: flex;justify-content: space-between;">
<div
style="display: flex;align-items: center;margin-left: 20px;font-size: 10px;">
<div
style="width: 8px;height: 8px;border-radius: 50%;background-color: #4197B5;margin-right: 8px;">
</div>Daily Total
</div>
<div style="margin-right: 20px;font-size: 14px;">
{{avgCountKilocalories}}<span
style="font-size: 10px;color: #AFB3C0;margin-left: 5px;">kacl</span>
</div>
</div>
</div>
</div>
</div>
<div class="month_common_charts_box">
<div class="month_charts_title_box">
<div style="display: flex;align-items: center;">
<div class="title_circle"></div><span class="title_circle_txt">Body
Battery</span>
</div>
<div class="month_charts_message">{{avgBodyBattery}}</div>
</div>
<div id="month10" style="height: 14vh;" class="month_chart_common"></div>
<div style="display: flex;justify-content: center;margin-top: 10px;">
<div class="month_common_table_wrap_clone1">
<div style="display: flex;justify-content: space-around;"
class="fatherAndSonBox">
<div>Very Low</div>
<div style="font-size: 12px;">{{veryLowBody}} <span
style="color: #AFB3C0;">day</span>
</div>
<div style="width: 1px;border-left: 1px solid #6D7188;"></div>
<div>Low</div>
<div style="font-size: 12px;">{{lowBody}} <span
style="color: #AFB3C0;">day</span>
</div>
</div>
<div style="display: flex;justify-content: space-around;"
class="fatherAndSonBox">
<div>Medium</div>
<div style="font-size: 12px;">{{mediumBody}} <span
style="color: #AFB3C0;">day</span>
</div>
<div style="width: 1px;border-left: 1px solid #6D7188;"></div>
<div>High</div>
<div style="font-size: 12px;">{{highBody}} <span
style="color: #AFB3C0;">day</span>
</div>
</div>
</div>
</div>
</div>
<div class="month_common_charts_box">
<div class="month_charts_title_box">
<div style="display: flex;align-items: center;">
<div class="title_circle"></div><span class="title_circle_txt">Recovery
Index</span>
</div>
<div class="month_charts_message">{{avgRecoveryIndex}}</div>
</div>
<div id="month11" style="height: 14vh;" class="month_chart_common"></div>
<div style="display: flex;justify-content: center;margin-top: 10px;">
<div class="month_common_table_wrap">
<div class="month_common_table_child_wrap">
<div class="month_common_table_txt">Minimum daily average recovery index
</div>
<div class="month_common_table_number">{{month_minRecoveryIndex}}</div>
</div>
<div class="month_common_table_child_wrap">
<div class="month_common_table_txt">Maximum daily average recovery index
</div>
<div class="month_common_table_number">{{month_maxRecoveryIndex}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<div v-else class="container_mob" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
<div class="mob_header_box">
<img src="./images/logo.png" width="153" height="38" alt="">
</div>
<div class="mob_checkBox_btn">
<div @click="mobClickFlag(1)" :class="{'mob_check_flag':mobtab1Flag}">One day</div>
<div @click="mobClickFlag(2)" :class="{'mob_check_flag':mobtab2Flag}">One month</div>
</div>
<div v-show="mobtab1Flag">
<div class="setCircleBox1" style="margin-top: 20px;">
<div class="circleBox">
<el-progress type="circle" stroke-width="6" :percentage="score_clone" width="140"
:show-text="false" color="#4197B5">
</el-progress>
<div class="circleCenter">
<div class="circleCenter_txt1">{{score}}</div>
<div class="circleCenter_txt2">Sleep Score</div>
</div>
</div>
</div>
<div class="setCircleBox2" style="margin-bottom: 32px;position: relative; z-index: 1;">
<div class="circleBox">
<el-progress type="circle" stroke-width="4" :percentage="bodyBattery_clone" width="120"
:show-text="false" color="#3CC29C">
</el-progress>
<div class="circleCenter1">
<div class="circleCenter_txt1">{{bodyBattery}}</div>
<div class="circleCenter_txt2">Body Battery</div>
</div>
</div>
<div class="circleBox">
<el-progress type="circle" stroke-width="4" :percentage="stressLevel_clone" width="120"
:show-text="false" color="#D2E7EF">
</el-progress>
<div class="circleCenter1">
<div class="circleCenter_txt1">{{stressLevel}}</div>
<div class="circleCenter_txt2">Stress Score</div>
</div>
</div>
</div>
<div class="mob_common_top_box">
<div class="mob_common_top_box_title">Total Sleep</div>
<div><img src="./images/TotalSleep.png" alt=""></div>
<div class="mob_common_top_box_child">
<div class="mob_common_top_box_time1">{{day_sleepLen1}} h {{day_sleepLen2}} min</div>
<div class="mob_common_top_box_time2">{{sleepTime12}} - {{wakeTime12}}</div>
</div>
</div>
<div class="mob_common_bottom_box" style="position: relative;">
<div style="position: absolute;top: 13px;width: 100%;">
<div style="display:flex;justify-content:space-between;margin: 0 auto;">
<div style="font-size: 12px;margin-left: 13%;">{{mob_total_timeflag1}}</div>
<div style="font-size: 12px;margin-right: 5%;">{{mob_total_timeflag2}}</div>
</div>
</div>
<div id="Mobday1" style="height: 30vh;"></div>
<div style="width: 100%;display: flex;justify-content: center;margin-top: 32px">
<div style="width: 80%;">
<div class="day_table_child_box">
<div class="day_table_child_box_item">
<div class="squle_store1"></div>Deep
</div>
<div class="day_table_child_box_item border_item_class" style="padding: 0 10px;">
{{deepDuration1}}<span
style="margin-right: 4px;color: #AFB3C0;">h</span>{{deepDuration2}}<span
style="color: #AFB3C0;">min</span></div>
<div class="day_table_child_box_item">{{deepPercentage}}</div>
</div>
<div class="day_table_child_box">
<div class="day_table_child_box_item">
<div class="squle_store2"></div>Light
</div>
<div class="day_table_child_box_item border_item_class" style="padding: 0 10px;">
{{shallowDuration1}}<span
style="margin-right: 4px;color: #AFB3C0;">h</span>{{shallowDuration2}}<span
style="color: #AFB3C0;">min</span></div>
<div class="day_table_child_box_item">{{shallowPercentage}}</div>
</div>
<div class="day_table_child_box" style="margin-bottom: 30px;">
<div class="day_table_child_box_item">
<div class="squle_store3"></div>Awake
</div>
<div class="day_table_child_box_item border_item_class" style="padding: 0 10px;">
{{wakeDuration1}}<span
style="margin-right: 4px;color: #AFB3C0;">h</span>{{wakeDuration2}}<span
style="color: #AFB3C0;">min</span></div>
<div class="day_table_child_box_item">{{wakePercentage}}</div>
</div>
</div>
</div>
</div>
<div class="mob_common_top_box">
<div class="mob_common_top_box_title">Heart Rate</div>
<div><img src="./images/HeartRate.png" alt=""></div>
<div class="mob_common_top_box_child">
<div class="mob_common_top_box_time1">{{avgHeart}} bpm</div>
<div class="mob_common_top_box_time2">24 hours average</div>
</div>
</div>
<div class="mob_common_bottom_box" style="position: relative;">
<!-- <div v-if="sleepStageDisFlag" style="position: absolute;top:-10px;width: 100%;">
<div style="display:flex;justify-content:space-between;margin: 0 auto;">
<div
style="display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;margin-left: 10%;">
<img src="./images/garmin_month.png" width="11" height="11" alt="">
<div style="font-size: 12px;">{{mob_total_timeflag1}}</div>
</div>
<div
style="display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;margin-right: 5%;">
<img src="./images/garmin_sun.png" width="14" height="14" alt="">
<div style="font-size: 12px;">{{mob_total_timeflag2}}</div>
</div>
</div>
</div> -->
<div id="Mobday2" style="height: 34vh;"></div>
</div>
<div class="mob_common_top_box">
<div class="mob_common_top_box_title">Respiratory Rate</div>
<div><img src="./images/RespiratoryRate.png" alt=""></div>
<div class="mob_common_top_box_child">
<div class="mob_common_top_box_time1">{{avgBreath}} breaths/min</div>
<div class="mob_common_top_box_time2">24 hours average</div>
</div>
</div>
<div class="mob_common_bottom_box" style="position: relative;">
<!-- <div v-if="sleepStageDisFlag" style="position: absolute;top:-10px;width: 100%;">
<div style="display:flex;justify-content:space-between;margin: 0 auto;">
<div
style="display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;margin-left: 10%;">
<img src="./images/garmin_month.png" width="11" height="11" alt="">
<div style="font-size: 12px;">{{mob_total_timeflag1}}</div>
</div>
<div
style="display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;margin-right: 5%;">
<img src="./images/garmin_sun.png" width="14" height="14" alt="">
<div style="font-size: 12px;">{{mob_total_timeflag2}}</div>
</div>
</div>
</div> -->
<div id="Mobday3" style="height: 34vh;"></div>
</div>
<div class="mob_common_top_box">
<div class="mob_common_top_box_title">Calories Burned</div>
<div><img src="./images/CaloriesBurned.png" alt=""></div>
<div class="mob_common_top_box_child">
<div class="mob_common_top_box_time1">{{countKilocalories}} kacl</div>
<div class="mob_common_top_box_time2">24 hours</div>
</div>
</div>
<div class="mob_common_bottom_box">
<p class="mob_common_top_box_title" style="text-align: center;padding-top: 10px;margin: 0;">Calories
Burned</p>
<p class="mob_common_top_box_time2" style="text-align: center;margin-bottom: 16px;">24 hour
assessment</p>
<div class="setCircleBoxMob">
<div class="circleBox">
<el-progress type="circle" stroke-width="8" :percentage="100" width="120" :show-text="false"
color="#F5AF00">
</el-progress>
<div class="circleCenter_clone">
<div class="circleCenter_txt1_clone">{{totalKeKilocalories}}</div>
<div class="circleCenter_txt2_clone">Total Calories</div>
<div class="circleCenter_txt2_clone">Burned</div>
</div>
</div>
</div>
<div class="setCircleBox2">
<div class="circleBox_clone">
<el-progress type="circle" :percentage="100" width="100" :show-text="false" color="#AFB3C0">
</el-progress>
<div class="circleCenter1_clone">
<div class="circleCenter_txt1_clone">{{sleepKilocalories}}</div>
<div class="circleCenter_txt2_clone">Asleep</div>
</div>
</div>
<div class="circleBox_clone">
<el-progress type="circle" :percentage="100" width="100" :show-text="false" color="#4197B5">
</el-progress>
<div class="circleCenter1_clone">
<div class="circleCenter_txt1_clone">{{awakeKilocalories}}</div>
<div class="circleCenter_txt2_clone"> Awake</div>
</div>
</div>
</div>
<div class="mobKeKilocalories">Asleep + Awake = Total Calories Burned</div>
</div>
<div class="mob_common_top_box">
<div class="mob_common_top_box_title">Sleep Movement</div>
<div><img src="./images/Movement.png" alt=""></div>
<div class="mob_common_top_box_child">
<div class="mob_common_top_box_time1">{{moveTimes}} movements</div>
<div class="mob_common_top_box_time2">{{sleepTime12}} - {{wakeTime12}}</div>
</div>
</div>
<div class="mob_common_bottom_box" style="position: relative;">
<div v-if="moveDisFlag" style="position: absolute;top:-10px;width: 100%;">
<div style="display:flex;justify-content:space-between;width: 90%;margin: 0 auto;">
<div
style="display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;">
<img src="./images/garmin_month.png" width="11" height="11" alt="">
<div style="font-size: 12px;">{{mob_total_timeflag1}}</div>
</div>
<div
style="display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;">
<img src="./images/garmin_sun.png" width="14" height="14" alt="">
<div style="font-size: 12px;">{{mob_total_timeflag2}}</div>
</div>
</div>
</div>
<div id="Mobday4" style="height: 30vh;"></div>
</div>
<div class="mob_common_top_box">
<div class="mob_common_top_box_title">Anti-Snore</div>
<div><img src="./images/Snoring.png" alt=""></div>
<div class="mob_common_top_box_child">
<div class="mob_common_top_box_time1">{{antiSnoreTimes}} times</div>
<div class="mob_common_top_box_time2">{{sleepTime12}} - {{wakeTime12}}</div>
</div>
</div>
<div class="mob_common_bottom_box" style="position: relative;">
<div v-if="antiSnoreDisFlag" style="position: absolute;top: 5px;width: 100%;">
<div style="display:flex;justify-content:space-between;width: 90%;margin: 0 auto;">
<div style="font-size: 12px;">{{mob_total_timeflag1}}</div>
<div style="font-size: 12px;">{{mob_total_timeflag2}}</div>
</div>
</div>
<div id="Mobday5" style="height: 30vh;"></div>
</div>
<div class="mob_common_bottom_box" style="border-radius: 16px;">
<p class="mob_common_top_box_title" style="text-align: center;padding-top: 10px;margin: 0;">Body
Battery</p>
<p class="mob_common_top_box_time2" style="text-align: center;">24 hours assessment</p>
<div style="display: flex;justify-content: center;align-items: center;">
<div>
<div style="font-size:21px">{{mob_maxBodyBattery}}</div>
<div class="mob_common_top_box_time2" style="font-size: 11px;">High</div>
</div>
<div class="setCircleBox1" style="margin-top: 20px;">
<div class="circleBox">
<el-progress type="circle" :percentage="mob_day_bodyBattery" width="120"
:show-text="false" :color="mobDayBatteryColor">
</el-progress>
<div class="circleCenter" style="position: absolute;top: 30px;left: 77px;">
<div class="circleCenter_txt1">{{mob_day_bodyBattery}}</div>
<div class="circleCenter_txt2">Average</div>
</div>
</div>
</div>
<div>
<div style="font-size:21px">{{mob_minBodyBattery}}</div>
<div class="mob_common_top_box_time2" style="font-size: 11px;">Low</div>
</div>
</div>
<div style="display: flex;justify-content: space-around;margin-top: 16px;">
<div style="display:flex;align-items:flex-start">
<div
style=" width:8px;height:8px;border-radius:50%;background: #F15F30;margin-right: 5px;margin-top: 4px;">
</div>
<div style="display: flex;flex-flow: column nowrap; font-size: 12px;">
<div>Very Low</div>
<div style="font-size: 10px;">(0-25)</div>
</div>
</div>
<div style="display:flex;align-items:flex-start">
<div
style=" width:8px;height:8px;border-radius:50%;background: #E1B030;margin-right: 5px;margin-top: 4px;">
</div>
<div style="display: flex;flex-flow: column nowrap; font-size: 12px;">
<div>Low</div>
<div style="font-size: 10px;">(26-50)</div>
</div>
</div>
<div style="display:flex;align-items:flex-start">
<div
style=" width:8px;height:8px;border-radius:50%;background: #4197B5;margin-right: 5px;margin-top: 4px;">
</div>
<div style="display: flex;flex-flow: column nowrap; font-size: 12px;">
<div>Medium</div>
<div style="font-size: 10px;">(51-75)</div>
</div>
</div>
<div style="display:flex;align-items:flex-start">
<div
style=" width:8px;height:8px;border-radius:50%;background: #218380;margin-right: 5px;margin-top: 4px;">
</div>
<div style="display: flex;flex-flow: column nowrap; font-size: 12px;">
<div>High</div>
<div style="font-size: 10px;">(75-100)</div>
</div>
</div>
</div>
<div style="display: flex;justify-content: center;margin:16px 0">
<div style="width:90%;height: 2px;background: #525466;"></div>
</div>
<div style="display: flex;justify-content: center;margin:16px 16px;font-size: 14px;">
<p>Body battery measures your body’s energy reserves, which can help you manage your physical
condition throughout the day.In an ideal situation</p>
</div>
<div style="display: flex;flex-flow: column nowrap;justify-content: center;align-items:center;">
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">Very Low</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;width: 60%;;margin-left: 32px;">{{mob_veryLowBody1}}<span
style="margin:0 4px;color: #AFB3C0;">h</span>{{mob_veryLowBody2}}<span
style="color: #AFB3C0;margin:0 4px;">min</span></div>
</div>
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">Low</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;width: 60%;;margin-left: 32px;">{{mob_lowBody1}}<span
style="margin:0 4px;color: #AFB3C0;">h</span>{{mob_lowBody2}}<span
style="color: #AFB3C0;margin:0 4px;">min</span></div>
</div>
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">Medium</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;width: 60%;;margin-left: 32px;">{{mob_mediumBody1}}<span
style="margin:0 4px;color: #AFB3C0;">h</span>{{mob_mediumBody2}}<span
style="color: #AFB3C0;margin:0 4px;">min</span></div>
</div>
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">High</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;width: 60%;;margin-left: 32px;">{{mob_highBody1}}<span
style="margin:0 4px;color: #AFB3C0;">h</span>{{mob_highBody2}}<span
style="color: #AFB3C0;margin:0 4px;">min</span></div>
</div>
</div>
</div>
<div class="mob_common_bottom_box" style="border-radius: 16px;">
<p class="mob_common_top_box_title" style="text-align: center;padding-top: 10px;margin: 0;">Stress
</p>
<p class="mob_common_top_box_time2" style="text-align: center;">24 hours assessment</p>
<div style="display: flex;justify-content: center;align-items: center;">
<div>
<div style="font-size:21px">{{mob_maxStress}}</div>
<div class="mob_common_top_box_time2" style="font-size: 11px;">High</div>
</div>
<div class="setCircleBox1" style="margin-top: 20px;">
<div class="circleBox">
<el-progress type="circle" :percentage="mob_day_stressLevel" width="120"
:show-text="false" :color="mobDayStressColor">
</el-progress>
<div class="circleCenter" style=" position: absolute;top: 30px;left: 77px;">
<div class="circleCenter_txt1">{{mob_day_stressLevel}}</div>
<div class="circleCenter_txt2">Average</div>
</div>
</div>
</div>
<div>
<div style="font-size:21px">{{mob_minStress}}</div>
<div class="mob_common_top_box_time2" style="font-size: 11px;">Low</div>
</div>
</div>
<div style="display: flex;justify-content: space-around;margin-top: 16px;">
<div style="display:flex;align-items:flex-start">
<div
style=" width:8px;height:8px;border-radius:50%;background: #42A78C;margin-right: 5px;margin-top: 4px;">
</div>
<div style="display: flex;flex-flow: column nowrap; font-size: 12px;">
<div>Rest</div>
<div style="font-size: 10px;">(0-25)</div>
</div>
</div>
<div style="display:flex;align-items:flex-start">
<div
style=" width:8px;height:8px;border-radius:50%;background: #F5AF00;margin-right: 5px;margin-top: 4px;">
</div>
<div style="display: flex;flex-flow: column nowrap; font-size: 12px;">
<div>Low</div>
<div style="font-size: 10px;">(26-50)</div>
</div>
</div>
<div style="display:flex;align-items:flex-start">
<div
style=" width:8px;height:8px;border-radius:50%;background: #FB8500;margin-right: 5px;margin-top: 4px;">
</div>
<div style="display: flex;flex-flow: column nowrap; font-size: 12px;">
<div>Medium</div>
<div style="font-size: 10px;">(51-75)</div>
</div>
</div>
<div style="display:flex;align-items:flex-start">
<div
style=" width:8px;height:8px;border-radius:50%;background: #D04D4D;margin-right: 5px;margin-top: 4px;">
</div>
<div style="display: flex;flex-flow: column nowrap; font-size: 12px;">
<div>High</div>
<div style="font-size: 10px;">(75-100)</div>
</div>
</div>
</div>
<div style="display: flex;justify-content: center;margin:16px 0">
<div style="width:90%;height: 2px;background: #525466;"></div>
</div>
<div style="display: flex;justify-content: center;margin:16px 16px;font-size: 14px;">
<p>Your device uses the heart rate variability (HRV) indicator to predict when you are under
stress and when you are at rest. HRV only refers to the natural changes that occur during
each heartbeat.</p>
</div>
<div style="display: flex;flex-flow: column nowrap;justify-content: center;align-items:center;">
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">Rest</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;width: 60%;margin-left: 32px;">{{mob_restStress1}}<span
style="margin:0 4px;color: #AFB3C0;">h</span>{{mob_restStress2}}<span
style="color: #AFB3C0;margin:0 4px;">min</span></div>
</div>
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">Low</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;width: 60%;margin-left: 32px;">{{mob_lowStress1}}<span
style="margin:0 4px;color: #AFB3C0;">h</span>{{mob_lowStress2}}<span
style="color: #AFB3C0;margin:0 4px;">min</span></div>
</div>
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">Medium</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;width: 60%;margin-left: 32px;">{{mob_mediumStress1}}<span
style="margin:0 4px;color: #AFB3C0;">h</span>{{mob_mediumStress2}}<span
style="color: #AFB3C0;margin:0 4px;">min</span></div>
</div>
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">High</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;width:60%;margin-left: 32px;">{{mob_highStress1}}<span
style="margin:0 4px;color: #AFB3C0;">h</span>{{mob_highStress2}}<span
style="color: #AFB3C0;margin:0 4px;">min</span></div>
</div>
</div>
</div>
<div class="mob_indexNumber_box">
<div style="margin: 0 16px;">
<div style="padding-top: 16px;font-size: 18px;text-align: center;">Fatigue Index</div>
<div style="color: #AFB3C0;font-size:14px;text-align: center;">Last night</div>
<div style="font-size: 21px;text-align: center;margin: 12px 0;">{{fatigueIndex}}</div>
<div style="font-size: 14px;color: #AFB3C0;text-align: center;">Normal reference range:1~3</div>
<div style="width:100%;background: #6D7188;height:1px;margin: 16px 0;"></div>
<p style="font-size: 14px;padding-bottom: 20px;">Fatigue is a reflection of subjective
discomfort under normal physiological activities of the human body. It is prone to
unfavorable effects on life and work, such as slow response, reduced alertness, and low work
efficiency.</p>
</div>
</div>
<div class="mob_indexNumber_box">
<div style="margin: 0 16px;">
<div style="padding-top: 16px;font-size: 18px;text-align: center;">Recovery Index</div>
<div style="color: #AFB3C0;font-size:14px;text-align: center;">Last night</div>
<div style="font-size: 21px;text-align: center;margin: 12px 0;">{{recoveryIndex}}</div>
<div style="font-size: 14px;color: #AFB3C0;text-align: center;">Normal reference range:3~5</div>
<div style="width:100%;background: #6D7188;height:1px;margin: 16px 0;"></div>
<p style="font-size: 14px;padding-bottom: 20px;">Good and adequate high-quality sleep is an
important means to eliminate physical fatigue and recover. It can prevent excessive
consumption of cerebral cortex cell functions and promote the recovery of body organ
functions.</p>
</div>
</div>
<div style="margin-bottom: 100px;"></div>
</div>
<div v-show="mobtab2Flag">
<div class="mob_common_top_box" style="margin-top: 20px;">
<div class="mob_common_top_box_title">Total Sleep</div>
<div><img src="./images/TotalSleep.png" alt=""></div>
<div class="mob_common_top_box_child">
<div class="mob_common_top_box_time1">{{day_sleepLen1}} h {{day_sleepLen2}} min</div>
<div class="mob_common_top_box_time2">Monthly average per night</div>
</div>
</div>
<div class="mob_common_bottom_box" style="margin: 0;border-radius: 0;">
<div class="mob_common_title">Monthly Average Sleep Quality</div>
<div id="Mobmonth1" style="height: 30vh;" class="mob_month_common_chart_size"></div>
<div style="display: flex;flex-flow: column nowrap;margin:0 25px 16px;">
<div
style="display: flex;justify-content: space-between;align-items:center;background: #525466;border-radius: 8px;height: 52px;">
<div style="display: flex;justify-content: center;align-items: center;margin-left: 16px;">
<div class="squle_store1"></div>
<div style="font-size: 12px;">Deep</div>
</div>
<div style="margin-right: 16px;font-size: 16px;">{{deepPercentage}}</div>
</div>
</div>
<div style="display: flex;flex-flow: column nowrap;margin:0 25px 16px;">
<div
style="display: flex;justify-content: space-between;align-items:center;background: #525466;border-radius: 8px;height: 52px;">
<div style="display: flex;justify-content: center;align-items: center;margin-left: 16px;">
<div class="squle_store2"></div>
<div style="font-size: 12px;">Light</div>
</div>
<div style="margin-right: 16px;font-size: 16px;">{{shallowPercentage}}</div>
</div>
</div>
<div style="display: flex;flex-flow: column nowrap;margin:0 25px;padding-bottom: 30px;">
<div
style="display: flex;justify-content: space-between;align-items:center;background: #525466;border-radius: 8px;height: 52px;">
<div style="display: flex;justify-content: center;align-items: center;margin-left: 16px;">
<div class="squle_store3"></div>
<div style="font-size: 12px;">Awkae</div>
</div>
<div style="margin-right: 16px;font-size: 16px;">{{wakePercentage}}</div>
</div>
</div>
</div>
<div class="mob_common_bottom_box" style="margin: 0;height: 350px;border-radius: 0;">
<div class="mob_common_title">Total Sleep Duration</div>
<div id="main_month_one_mob" style="height: 30vh;" class="mob_month_common_chart_size"></div>
<div style="position:relative;top:-80px">
<div style="display: flex;flex-flow: column nowrap;margin:0 25px 16px;">
<div
style="display: flex;justify-content: space-between;align-items:center;background: #525466;border-radius: 8px;height: 52px;">
<div
style="display: flex;justify-content: center;align-items: center;margin-left: 16px;">
<div class="squle_store1"></div>
<div style="font-size: 12px;">This month</div>
</div>
<div style="margin-right: 16px;font-size: 16px;">{{totalSleepLenDis}}</div>
</div>
</div>
<div style="display: flex;flex-flow: column nowrap;margin:0 25px;padding-bottom: 20px;">
<div
style="display: flex;justify-content: space-between;align-items:center;background: #525466;border-radius: 8px;height: 52px;">
<div
style="display: flex;justify-content: center;align-items: center;margin-left: 16px;">
<div class="squle_store2"></div>
<div style="font-size: 12px;">Last month</div>
</div>
<div style="margin-right: 16px;font-size: 16px;">{{lastTotalSleepLenDis}}</div>
</div>
</div>
</div>
</div>
<div class="mob_common_bottom_box" style="margin: 0;height: 400px;border-radius: 0;">
<div class="mob_common_title">Sleep Average Scores</div>
<div id="main_month_two_mob" style="height: 30vh;" class="mob_month_common_chart_size"></div>
<div style="position:relative;top:-40px">
<div style="display: flex;flex-flow: column nowrap;margin:0 25px 16px;">
<div
style="display: flex;justify-content: space-between;align-items:center;background: #525466;border-radius: 8px;height: 52px;">
<div
style="display: flex;justify-content: center;align-items: center;margin-left: 16px;">
<div class="squle_store1"></div>
<div style="font-size: 12px;">This month</div>
</div>
<div style="margin-right: 16px;font-size: 16px;">{{thisAvgScoreDis}}</div>
</div>
</div>
<div style="display: flex;flex-flow: column nowrap;margin:0 25px;padding-bottom: 30px;">
<div
style="display: flex;justify-content: space-between;align-items:center;background: #525466;border-radius: 8px;height: 52px;">
<div
style="display: flex;justify-content: center;align-items: center;margin-left: 16px;">
<div class="squle_store2"></div>
<div style="font-size: 12px;">Last month</div>
</div>
<div style="margin-right: 16px;font-size: 16px;">{{lastAvgScoreDis}}</div>
</div>
</div>
</div>
</div>
<div class="mob_common_bottom_box" style="margin: 0;margin-bottom: 32px;">
<div class="mob_common_title">Wake Up Time and Fall Asleep Time</div>
<div id="Mobmonth2" style="height: 30vh;" class="mob_month_common_chart_size"></div>
<div class="WakeAndFallBoxClone">
<div class="WakeAndFallItemMob">
<div class="WakeAndFallItemContent" style="margin-left: 10px;">
<div class="month_circle_flag1"></div><span>Avg. time to sleep up this
month</span>
</div>
<div class="WakeAndFallItemText" style="margin-right: 10px;">{{avgSleepTime}}</div>
</div>
<div class="WakeAndFallItemMob">
<div class="WakeAndFallItemContent" style="margin-left: 10px;">
<div class="month_circle_flag2"></div><span>Avg. time to wake up this
month</span>
</div>
<div class="WakeAndFallItemText" style="margin-right: 10px;">{{avgWakeTime}}</div>
</div>
<div style="width: 100%;border-top: 1px solid #525466;margin: 0 0 16px;"></div>
<div class="WakeAndFallItemMob">
<div class="WakeAndFallItemContent" style="margin-left: 10px;">
<div class="month_circle_flag1"></div><span>Avg. time to sleep up last
month</span>
</div>
<div class="WakeAndFallItemText" style="margin-right: 10px;">{{lastAvgSleepTime}}</div>
</div>
<div class="WakeAndFallItemMob">
<div class="WakeAndFallItemContent" style="margin-left: 10px;">
<div class="month_circle_flag2"></div><span>Avg. time to wake up last
month</span>
</div>
<div class="WakeAndFallItemText" style="margin-right: 10px;">{{lastAvgWakeTime}}</div>
</div>
</div>
</div>
<div class="mob_common_top_box">
<div class="mob_common_top_box_title">Heart Rate</div>
<div><img src="./images/HeartRate.png" alt=""></div>
<div class="mob_common_top_box_child">
<div class="mob_common_top_box_time1">{{month_avgHeart}} bpm</div>
<div class="mob_common_top_box_time2">Monthly average</div>
</div>
</div>
<div class="mob_common_bottom_box">
<div id="Mobmonth3" style="height: 30vh;" class="mob_month_common_chart_size"></div>
<div style="display: flex;flex-flow: column nowrap;padding-bottom: 32px;">
<div class="mob_month_common_box" style="margin-bottom:16px;">
<div class="mob_month_common_txt">Minimum daily average heart rate</div>
<div class="mob_month_common_value">{{month_minHeart}}</div>
</div>
<div class="mob_month_common_box">
<div class="mob_month_common_txt">Maximum daily average heart rate</div>
<div class="mob_month_common_value">{{month_maxHeart}}</div>
</div>
</div>
</div>
<div class="mob_common_top_box">
<div class="mob_common_top_box_title">Respiratory Rate</div>
<div><img src="./images/RespiratoryRate.png" alt=""></div>
<div class="mob_common_top_box_child">
<div class="mob_common_top_box_time1">{{month_avgBreath}} breaths/min</div>
<div class="mob_common_top_box_time2">Monthly average</div>
</div>
</div>
<div class="mob_common_bottom_box">
<div id="Mobmonth6" style="height: 30vh;" class="mob_month_common_chart_size"></div>
<div style="display: flex;flex-flow: column nowrap;padding-bottom: 32px;">
<div class="mob_month_common_box" style="margin-bottom:16px;">
<div class="mob_month_common_txt">Minimum daily average breath rate</div>
<div class="mob_month_common_value">{{month_minBreath}}</div>
</div>
<div class="mob_month_common_box">
<div class="mob_month_common_txt">Maximum daily average breath rate</div>
<div class="mob_month_common_value">{{month_maxBreath}}</div>
</div>
</div>
</div>
<div class="mob_common_top_box">
<div class="mob_common_top_box_title">Calories Burned</div>
<div><img src="./images/CaloriesBurned.png" alt=""></div>
<div class="mob_common_top_box_child">
<div class="mob_common_top_box_time1">{{avgCountKilocalories}} kacl</div>
<div class="mob_common_top_box_time2">Monthly average</div>
</div>
</div>
<div class="mob_common_bottom_box">
<div id="Mobmonth9" style="height: 30vh;" class="mob_month_common_chart_size"></div>
<div style="display: flex;flex-flow: column nowrap;justify-content: center;align-items:center;">
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">
<div
style="width: 12px;height: 12px;border-radius: 4px;background-color: #4197B5;margin-right: 5px;">
</div><span>Daily Awkae</span>
</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;justify-content: flex-start;width: 40%;">
{{avgAwakeKilocalories}}<span style="margin:0 4px;color: #AFB3C0;">kcal</span></div>
</div>
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">
<div
style="width: 12px;height: 12px;border-radius: 4px;background-color: #AFB3C0;margin-right: 5px;">
</div><span>Daily Asleep</span>
</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;justify-content: flex-start;width: 40%;">{{avgSleepKilocalories}}
<span style="margin:0 4px;color: #AFB3C0;">kcal</span>
</div>
</div>
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">
<div
style="width: 12px;height: 12px;border-radius: 4px;background-color: #F5AF00;margin-right: 5px;">
</div><span>Daily Total</span>
</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;justify-content: flex-start;width: 40%;">{{avgCountKilocalories}}
<span style="margin:0 4px;color: #AFB3C0;">kcal</span>
</div>
</div>
</div>
<div style="text-align: center;font-size: 11px;color: #AFB3C0;padding-bottom: 20px;">Asleep + Awake
= Total Calories Burned</div>
</div>
<div class="mob_common_top_box">
<div class="mob_common_top_box_title">Sleep Movement</div>
<div><img src="./images/Movement.png" alt=""></div>
<div class="mob_common_top_box_child">
<div class="mob_common_top_box_time1">{{month_moveTimes}} movements</div>
<div class="mob_common_top_box_time2">Monthly average per night</div>
</div>
</div>
<div class="mob_common_bottom_box">
<div id="Mobmonth4" style="height: 30vh;" class="mob_month_common_chart_size"></div>
<div style="display: flex;flex-flow: column nowrap;padding-bottom: 32px;">
<div class="mob_month_common_box" style="margin-bottom:16px;">
<div class="mob_month_common_txt">Minimum daily average movements</div>
<div class="mob_month_common_value">{{month_minMove}}</div>
</div>
<div class="mob_month_common_box">
<div class="mob_month_common_txt">Maximum daily average movements</div>
<div class="mob_month_common_value">{{month_maxMove}}</div>
</div>
</div>
</div>
<div class="mob_common_top_box">
<div class="mob_common_top_box_title">Anti-Snore</div>
<div><img src="./images/Snoring.png" alt=""></div>
<div class="mob_common_top_box_child">
<div class="mob_common_top_box_time1">{{month_antiSnoreTimes}} times</div>
<div class="mob_common_top_box_time2">Monthly average per night</div>
</div>
</div>
<div class="mob_common_bottom_box">
<div id="Mobmonth7" style="height: 30vh;" class="mob_month_common_chart_size"></div>
<div style="display: flex;flex-flow: column nowrap;padding-bottom: 32px;">
<div class="mob_month_common_box" style="margin-bottom:16px;">
<div class="mob_month_common_txt">Minimum daily average anti-snore</div>
<div class="mob_month_common_value">{{month_minAntiSnore}}</div>
</div>
<div class="mob_month_common_box">
<div class="mob_month_common_txt">Maximum daily average anti-snore</div>
<div class="mob_month_common_value">{{month_maxAntiSnore}} </div>
</div>
</div>
</div>
<div class="mob_common_bottom_box" style="border-radius: 16px;">
<p class="mob_common_top_box_title" style="text-align: center;padding-top: 10px;margin: 0;">Body
Battery</p>
<p class="mob_common_top_box_time2" style="text-align: center;">24 hours assessment</p>
<div style="display: flex;justify-content: center;align-items: center;">
<div class="setCircleBox1" style="margin-top: 20px;">
<div class="circleBox">
<el-progress type="circle" :percentage="avgBodyBattery" width="120" :show-text="false"
:color="mobMonthBatteryColor">
</el-progress>
<div class="circleCenter" style=" position: absolute;">
<div class="circleCenter_txt1">{{avgBodyBattery}}</div>
<div class="circleCenter_txt2">Average</div>
</div>
</div>
</div>
</div>
<div style="display: flex;justify-content: space-around;margin-top: 16px;">
<div style="display:flex;align-items:flex-start">
<div
style=" width:8px;height:8px;border-radius:50%;background: #F15F30;margin-right: 5px;margin-top: 4px;">
</div>
<div style="display: flex;flex-flow: column nowrap; font-size: 12px;">
<div>Very Low</div>
<div style="font-size: 10px;">(0-25)</div>
</div>
</div>
<div style="display:flex;align-items:flex-start">
<div
style=" width:8px;height:8px;border-radius:50%;background: #E1B030;margin-right: 5px;margin-top: 4px;">
</div>
<div style="display: flex;flex-flow: column nowrap; font-size: 12px;">
<div>Low</div>
<div style="font-size: 10px;">(26-50)</div>
</div>
</div>
<div style="display:flex;align-items:flex-start">
<div
style=" width:8px;height:8px;border-radius:50%;background: #4197B5;margin-right: 5px;margin-top: 4px;">
</div>
<div style="display: flex;flex-flow: column nowrap; font-size: 12px;">
<div>Medium</div>
<div style="font-size: 10px;">(51-75)</div>
</div>
</div>
<div style="display:flex;align-items:flex-start">
<div
style=" width:8px;height:8px;border-radius:50%;background: #218380;margin-right: 5px;margin-top: 4px;">
</div>
<div style="display: flex;flex-flow: column nowrap; font-size: 12px;">
<div>High</div>
<div style="font-size: 10px;">(75-100)</div>
</div>
</div>
</div>
<div style="display: flex;justify-content: center;margin:16px 0">
<div style="width:90%;height: 2px;background: #525466;"></div>
</div>
<div id="Mobmonth10" style="height: 30vh;" class="mob_month_common_chart_size"></div>
<div style="display: flex;flex-flow: column nowrap;justify-content: center;align-items:center;">
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">Very Low</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;width: 60%;margin-left: 32px;">{{veryLowBody}}<span
style="margin:0 4px;color: #AFB3C0;">day</span></div>
</div>
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">Low</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;width: 60%;margin-left: 32px;">{{lowBody}}<span
style="margin:0 4px;color: #AFB3C0;">day</span></div>
</div>
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">Medium</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;width: 60%;margin-left: 32px;">{{mediumBody}}<span
style="margin:0 4px;color: #AFB3C0;">day</span></div>
</div>
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">High</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;width:60%;margin-left: 32px;">{{highBody}}<span
style="margin-right: 4px;color: #AFB3C0;">day</span></div>
</div>
</div>
</div>
<div class="mob_common_bottom_box" style="border-radius: 16px;">
<p class="mob_common_top_box_title" style="text-align: center;padding-top: 10px;margin: 0;">Stress
</p>
<p class="mob_common_top_box_time2" style="text-align: center;">Monthly average</p>
<div style="display: flex;justify-content: center;align-items: center;">
<div class="setCircleBox1" style="margin-top: 20px;">
<div class="circleBox">
<el-progress type="circle" :percentage="month_avgStress" width="120" :show-text="false"
:color="mobMonthStressColor">
</el-progress>
<div class="circleCenter" style=" position: absolute;">
<div class="circleCenter_txt1">{{month_avgStress}}</div>
<div class="circleCenter_txt2">Average</div>
</div>
</div>
</div>
</div>
<div style="display: flex;justify-content: space-around;margin-top: 16px;">
<div style="display:flex;align-items:flex-start">
<div
style=" width:8px;height:8px;border-radius:50%;background: #42A78C;margin-right: 5px;margin-top: 4px;">
</div>
<div style="display: flex;flex-flow: column nowrap; font-size: 12px;">
<div>Rest</div>
<div style="font-size: 10px;">(0-25)</div>
</div>
</div>
<div style="display:flex;align-items:flex-start">
<div
style=" width:8px;height:8px;border-radius:50%;background: #F5AF00;margin-right: 5px;margin-top: 4px;">
</div>
<div style="display: flex;flex-flow: column nowrap; font-size: 12px;">
<div>Low</div>
<div style="font-size: 10px;">(26-50)</div>
</div>
</div>
<div style="display:flex;align-items:flex-start">
<div
style=" width:8px;height:8px;border-radius:50%;background: #FB8500;margin-right: 5px;margin-top: 4px;">
</div>
<div style="display: flex;flex-flow: column nowrap; font-size: 12px;">
<div>Medium</div>
<div style="font-size: 10px;">(51-75)</div>
</div>
</div>
<div style="display:flex;align-items:flex-start">
<div
style=" width:8px;height:8px;border-radius:50%;background: #D04D4D;margin-right: 5px;margin-top: 4px;">
</div>
<div style="display: flex;flex-flow: column nowrap; font-size: 12px;">
<div>High</div>
<div style="font-size: 10px;">(75-100)</div>
</div>
</div>
</div>
<div style="display: flex;justify-content: center;margin:16px 0">
<div style="width:90%;height: 2px;background: #525466;"></div>
</div>
<div id="Mobmonth5" style="height: 30vh;" class="mob_month_common_chart_size"></div>
<div style="display: flex;flex-flow: column nowrap;justify-content: center;align-items:center;">
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">Rest</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;width: 60%;margin-left: 32px;">{{restStress}}<span
style="margin:0 4px;color: #AFB3C0;">day</span></div>
</div>
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">Low</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;width: 60%;margin-left: 32px;">{{month_lowStress}}<span
style="margin:0 4px;color: #AFB3C0;">day</span></div>
</div>
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">Medium</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;width: 60%;margin-left: 32px;">{{month_mediumStress}}<span
style="margin:0 4px;color: #AFB3C0;">day</span></div>
</div>
<div class="mob_common_table_box">
<div class="day_table_child_box_item"
style="width: 35%;display:flex;justify-content: flex-start;">High</div>
<div style="width:1px;background: #6D7188;height:40%"></div>
<div style="display: flex;width: 60%;margin-left: 32px;">{{month_highStress}}<span
style="margin:0 4px;color: #AFB3C0;">day</span></div>
</div>
</div>
</div>
<div class="mob_common_bottom_box" style="border-radius: 16px;">
<p class="mob_common_top_box_title" style="text-align: center;padding-top: 10px;margin: 0;">Fatigue
Index</p>
<p class="mob_common_top_box_time2" style="text-align: center;">Monthly average</p>
<p style="text-align: center;font-size: 21px;margin-top: 16px;">{{avgFatigueIndex}}</p>
<div id="Mobmonth8" style="height: 30vh;" class="mob_month_common_chart_size"></div>
<div style="display: flex;flex-flow: column nowrap;padding-bottom: 32px;">
<div class="mob_month_common_box" style="margin-bottom:16px;">
<div class="mob_month_common_txt">Minimum daily average fatigue index</div>
<div class="mob_month_common_value">{{month_minFatigueIndex}}</div>
</div>
<div class="mob_month_common_box">
<div class="mob_month_common_txt">Maximum daily average fatigue score</div>
<div class="mob_month_common_value">{{month_maxFatigueIndex}}</div>
</div>
</div>
</div>
<div class="mob_common_bottom_box" style="border-radius: 16px;">
<p class="mob_common_top_box_title" style="text-align: center;padding-top: 10px;margin: 0;">Recovery
Index</p>
<p class="mob_common_top_box_time2" style="text-align: center;">Monthly average</p>
<p style="text-align: center;font-size: 21px;margin-top: 16px;">{{avgRecoveryIndex}}</p>
<div id="Mobmonth11" style="height: 30vh;" class="mob_month_common_chart_size"></div>
<div style="display: flex;flex-flow: column nowrap;padding-bottom: 32px;">
<div class="mob_month_common_box" style="margin-bottom:16px;">
<div class="mob_month_common_txt">Minimum daily average recovery index</div>
<div class="mob_month_common_value">{{month_minRecoveryIndex}}</div>
</div>
<div class="mob_month_common_box">
<div class="mob_month_common_txt">Maximum daily average recovery index</div>
<div class="mob_month_common_value">{{month_maxRecoveryIndex}}</div>
</div>
</div>
</div>
<div style="margin-bottom: 100px;"></div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
// 获取
data() {
return {
loading: true,
flag: true,
tab1Flag: true,
tab2Flag: false,
mobtab1Flag: true,
mobtab2Flag: false,
score: 0,
date: "--",
bodyBattery: 0,
stressLevel: 0,
avgHeart: 0,
avgBreath: 0,
countKilocalories: 0,
moveTimes: 0,
antiSnoreTimes: 0,
wakeTime12: 0,
sleepTime12: 0,
recoveryIndex: 0,
fatigueIndex: 0,
deepDuration1: "",
deepDuration2: "",
deepPercentage: "",
shallowDuration1: "",
shallowDuration2: "",
shallowPercentage: "",
wakeDuration1: "",
wakeDuration2: "",
wakePercentage: "",
totalKeKilocalories: "--",
awakeKilocalories: "",
sleepKilocalories: "",
moveDayChartX: [],
moveDayChartY: [],
heartDayChartX: [],
heartDayChartY: [],
BreathDayChartX: [],
BreathDayChartY: [],
month_reportStart: "",
month_reportEnd: "",
avgSleepLen1: 0,
avgSleepLen2: 0,
monthwakePercentage: 0,
monthshallowPercentage: 0,
monthdeepPercentage: 0,
avgSleepTime: '',
avgWakeTime: '',
fall_clone: "Fall Asleep time",
wake_clone: "Wake Up time",
lastAvgSleepTime: "",
lastAvgWakeTime: "",
heartMonthChartData: [],
month_avgHeart: 0,
month_minHeart: 0,
month_maxHeart: 0,
moveMonthChartData: [],
month_moveTimes: 0,
month_maxMove: 0,
month_minMove: 0,
stressMonthChartData: [],
month_avgStress: 0,
month_highStress: 0,
month_lowStress: 0,
month_mediumStress: 0,
restStress: 0,
breathMonthChartData: [],
month_avgBreath: 0,
month_maxBreath: 0,
month_minBreath: 0,
antiSnoreMonthChartData: [],
month_antiSnoreTimes: 0,
month_maxAntiSnore: 0,
month_minAntiSnore: 0,
fatigueIndexMonthChartData: [],
avgFatigueIndex: 0,
month_maxFatigueIndex: 0,
month_minFatigueIndex: 0,
BodyBatteryMonthChartData: [],
recoveryIndexMonthChartData: [],
avgBodyBattery: 0,
veryLowBody: 0,
lowBody: 0,
mediumBody: 0,
highBody: 0,
avgRecoveryIndex: 0,
month_maxRecoveryIndex: 0,
month_minRecoveryIndex: 0,
avgAwakeKilocalories: 0,
avgSleepKilocalories: 0,
avgCountKilocalories: 0,
day_sleepLen1: 0,
day_sleepLen2: 0,
lastTotalSleepLenDis: 0,
totalSleepLenDis: 0,
thisAvgScoreDis: 0,
lastAvgScoreDis: 0,
mobDayBatteryColor: '#F15F30',
mobDayStressColor: '#42A78C',
mobMonthBatteryColor: '',
mobMonthStressColor: '',
mob_day_bodyBattery: 0,
nickName: '',
mob_day_stressLevel: "",
mob_minBodyBattery: "",
mob_maxBodyBattery: "",
mob_minStress: "",
mob_maxStress: "",
mob_veryLowBody1: "",
mob_veryLowBody2: "",
mob_lowBody1: "",
mob_lowBody2: "",
mob_mediumBody1: "",
mob_mediumBody2: "",
mob_highBody1: "",
mob_highBody2: "",
mob_restStress1: "",
mob_restStress2: "",
mob_lowStress1: "",
mob_lowStress2: "",
mob_mediumStress1: "",
mob_mediumStress2: "",
mob_highStress1: "",
mob_highStress2: "",
user_id: "",
user_date: "",
mob_total_timeflag1: "",
mob_total_timeflag2: "",
sleepStageDisFlag: true,
moveDisFlag: true,
antiSnoreDisFlag: true,
heartDisFlag: true,
BreathDisFlag: true,
month_total_time: true,
month_total_score: true,
stressLevel_clone: "",
bodyBattery_clone: "",
score_clone: "",
}
},
created() {
var search = window.location.search;
this.user_id = this.getSearchString('id', search)
this.user_date = this.getSearchString('date', search)
},
mounted() {
this.IsPC()
if (this.IsPC() == true) {
this.flag = true
} else {
this.flag = false
}
this.getDayDataList()
this.getMonthDataList()
},
methods: {
IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"
];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
},
mobClickFlag(val) {
if (val == 1) {
this.mobtab1Flag = true
this.mobtab2Flag = false
} else {
this.mobtab2Flag = true
this.mobtab1Flag = false
}
},
changeTab(val) {
if (val == 1) {
this.tab1Flag = true
this.tab2Flag = false
} else {
this.tab2Flag = true
this.tab1Flag = false
}
},
AMformTime(time) {
var hours = Number(time.match(/^(\d+)/)[1]);
var minutes = Number(time.match(/:(\d+)/)[1]);
var AMPM = time.match(/\s(.*)$/)[1];
if (AMPM == "PM" && hours < 12) hours = hours + 12;
if (AMPM == "AM" && hours == 12) hours = hours - 12;
var sHours = hours.toString();
var sMinutes = minutes.toString();
if (hours < 10) sHours = "0" + sHours;
if (minutes < 10) sMinutes = "0" + sMinutes;
return sHours + ":" + sMinutes
},
timeChangeSec(time){
var hour = time.split(':')[0];
var min = time.split(':')[1];
s = Number(hour*3600) + Number(min*60)
return s
},
getDayDataList() {
let _this = this
let Url = 'https://ergoeu.ergomotion.com/garmin/web/sleep/day'
// let Url = 'https://resthomeus.smartbed.top/garmin/web/sleep/day'
axios({
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
method: 'post',
url: Url,
data: {
// user_id: "11193424296280064",
// date: "2021-09-10"
user_id: _this.user_id,
date: _this.user_date
}
}).then(function (res) {
if (res.data.code == 1000) {
// 日报
// 计算心率 呼吸率界线
if(res.data.data.wakeTime12 != '--' && res.data.data.wakeTime12 != ''){
_this.commonChartsWakeTime = _this.AMformTime(res.data.data.wakeTime12)
}
if(res.data.data.sleepTime12!= '--' && res.data.data.sleepTime12!== ''){
_this.commonChartsSleepTime = _this.AMformTime(res.data.data.sleepTime12)
}
// if(res.data.data.tomorrowSleepTime!= '--'&&res.data.data.tomorrowSleepTime!= ''){
// _this.commonChartsTomorrowSleepTime = _this.AMformTime(res.data.data.tomorrowSleepTime)
// }
if (res.data.data.date) {
_this.date = res.data.data.date.replace(/-/g, '/')
}
if (res.data.data.score == '--') {
_this.score = '- -'
_this.score_clone = 0
} else {
_this.score = parseInt(res.data.data.score)
_this.score_clone = parseInt(res.data.data.score)
}
if (res.data.data.bodyBattery == '--') {
_this.bodyBattery = '- -'
_this.bodyBattery_clone = 0
} else {
_this.bodyBattery = parseInt(res.data.data.bodyBattery)
_this.bodyBattery_clone = parseInt(res.data.data.bodyBattery)
}
if (res.data.data.avgStress == '--') {
_this.stressLevel = '- -'
_this.stressLevel_clone = 0
} else {
_this.stressLevel = parseInt(res.data.data.avgStress)
_this.stressLevel_clone = parseInt(res.data.data.avgStress)
}
if (res.data.data.nickName == null) {
_this.nickName = '- -'
} else {
_this.nickName = res.data.data.nickName
}
_this.avgHeart = res.data.data.avgHeart
_this.avgBreath = res.data.data.avgBreath
_this.countKilocalories = res.data.data.countKilocalories
_this.moveTimes = res.data.data.moveTimes
_this.antiSnoreTimes = res.data.data.antiSnoreTimes
_this.wakeTime12 = res.data.data.wakeTime12
_this.sleepTime12 = res.data.data.sleepTime12
_this.recoveryIndex = res.data.data.recoveryIndex
_this.fatigueIndex = res.data.data.fatigueIndex
if (res.data.data.sleepLen) {
_this.day_sleepLen1 = res.data.data.sleepLen.split(":")[0]
_this.day_sleepLen2 = res.data.data.sleepLen.split(":")[1]
}
if (res.data.data.deepDuration) {
_this.deepDuration1 = res.data.data.deepDuration.split(":")[0]
_this.deepDuration2 = res.data.data.deepDuration.split(":")[1]
}
_this.deepPercentage = res.data.data.deepPercentage
if (res.data.data.shallowDuration) {
_this.shallowDuration1 = res.data.data.shallowDuration.split(":")[0]
_this.shallowDuration2 = res.data.data.shallowDuration.split(":")[1]
}
_this.shallowPercentage = res.data.data.shallowPercentage
if (res.data.data.wakeDuration) {
_this.wakeDuration1 = res.data.data.wakeDuration.split(":")[0]
_this.wakeDuration2 = res.data.data.wakeDuration.split(":")[1]
}
_this.wakePercentage = res.data.data.wakePercentage
_this.awakeKilocalories = res.data.data.awakeKilocalories
_this.sleepKilocalories = res.data.data.sleepKilocalories
if (res.data.data.awakeKilocalories != '--' && res.data.data.sleepKilocalories != '--') {
_this.totalKeKilocalories = parseInt(res.data.data.awakeKilocalories) + parseInt(res.data.data.sleepKilocalories)
} else if (res.data.data.awakeKilocalories != '--') {
_this.totalKeKilocalories = parseInt(res.data.data.awakeKilocalories)
}
else if (res.data.data.sleepKilocalories != '--') {
_this.totalKeKilocalories = parseInt(res.data.data.sleepKilocalories)
} else {
_this.totalKeKilocalories = '--'
}
// 日报心率
if (res.data.data) {
let chartFlag
let arr = res.data.data.heartGraphical
let totalArr = _this.timeSlot(1)
totalArr.push('24:00')
if(arr != ''){
arr = arr.split(',')
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i].slice(11)
}
if(_this.commonChartsSleepTime){
if(_this.timeChangeSec(arr[arr.length-1].substring(0, 5))<_this.timeChangeSec(_this.commonChartsSleepTime)){
_this.commonChartsSleepTime = ""
}
}
for (let i = 0; i < totalArr.length; i++) {
for (let j = 0; j < arr.length; j++) {
if (totalArr[i] == arr[j].substr(0, arr[j].length - 6)) {
totalArr[i] += '|' + arr[j].slice(9)
}
}
}
for (let k = 0; k <totalArr.length; k++) {
if (totalArr[k].length < 6) {
totalArr[k] += '|'
}
}
totalArr = totalArr.toString()
_this.heartDayChartX = _this.commonXCharDataClone(totalArr)
_this.heartDayChartY = _this.commonYCharDataClone(totalArr)
}else{
chartFlag = true
}
if (_this.flag == true) {
_this.drawHeartRate(_this.heartDayChartX, _this.heartDayChartY, chartFlag)
} else {
_this.drawMobHeartRate(_this.heartDayChartX, _this.heartDayChartY, chartFlag)
}
}
// 日报呼吸率
if (res.data.data) {
let chartFlag
let arr = res.data.data.breathGraphical
let totalArr = _this.timeSlot(1)
totalArr.push('24:00')
if(arr != ''){
arr = arr.split(',')
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i].slice(11)
}
for (let i = 0; i < totalArr.length; i++) {
for (let j = 0; j < arr.length; j++) {
if (totalArr[i] == arr[j].substr(0, arr[j].length - 6)||totalArr[i] == arr[j].substr(0, arr[j].length - 9)) {
totalArr[i] += '|' + arr[j].slice(9)
}
}
}
for (let k = 0; k <totalArr.length; k++) {
if (totalArr[k].length < 6) {
totalArr[k] += '|'
}
}
totalArr = totalArr.toString()
_this.BreathDayChartX = _this.commonXCharDataClone(totalArr)
_this.BreathDayChartY = _this.commonYCharDataClone(totalArr)
}else{
chartFlag = true
}
if (_this.flag == true) {
_this.drawRespirtoryRate(_this.BreathDayChartX, _this.BreathDayChartY, chartFlag)
} else {
_this.drawMobRespirtoryRate(_this.BreathDayChartX, _this.BreathDayChartY, chartFlag)
}
}
// 日报微动图表
if (res.data.data.moveGraphical) {
_this.moveDisFlag = true
let arr = res.data.data.moveGraphical.split(',')
// arr = arr.split('|')
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i].split('|')
_this.moveDayChartX.push(_this.deleteTimeStr(arr[i][0]))
_this.moveDayChartY.push(arr[i][1])
}
if (_this.flag == true) {
_this.drawMovement(_this.moveDayChartX, _this.moveDayChartY)
} else {
_this.drawMobMovement(_this.moveDayChartX, _this.moveDayChartY)
}
} else {
_this.moveDisFlag = false
let chartFlag = _this.isAllEqual(_this.moveDayChartY)
if (chartFlag == true) {
_this.moveDayChartX = []
}
if (_this.flag == true) {
_this.drawMovement(_this.moveDayChartX, _this.moveDayChartY, chartFlag)
} else {
_this.drawMobMovement(_this.moveDayChartX, _this.moveDayChartY, chartFlag)
}
}
// 日报打鼾干预
// res.data.data.antiSnoreGraphical = '2021-09-12 11:00:00,2021-09-12 12:00:00,2021-09-12 19:00:00'
if (res.data.data.antiSnoreGraphical) {
let antiY = []
let arr = res.data.data.antiSnoreGraphical.split(',')
for (let i = 0; i < arr.length; i++) {
arr[i] = _this.deleteTimeStr(arr[i])
antiY[i] = [1.5, 3.5, 1.5, 3.5]
}
if (_this.flag == true) {
_this.drawAntiSnore(arr, antiY)
} else {
_this.drawMobAntiSnore(arr, antiY)
}
} else {
_this.antiSnoreDisFlag = false
let chartFlag = true
if (_this.flag == true) {
_this.drawAntiSnore(0, 0, chartFlag)
} else {
_this.drawMobAntiSnore(0, 0, chartFlag)
}
}
// 移动端日报身体能量
if (res.data.data.bodyBattery) {
if (res.data.data.bodyBattery == '--') {
res.data.data.bodyBattery = 0
_this.mob_day_bodyBattery = parseInt(res.data.data.bodyBattery)
} else {
_this.mob_day_bodyBattery = parseInt(res.data.data.bodyBattery)
}
_this.mob_minBodyBattery = res.data.data.minBodyBattery
_this.mob_maxBodyBattery = res.data.data.maxBodyBattery
_this.mob_veryLowBody1 = _this.spliceTimeData1(res.data.data.veryLowBody)
_this.mob_veryLowBody2 = _this.spliceTimeData2(res.data.data.veryLowBody)
_this.mob_lowBody1 = _this.spliceTimeData1(res.data.data.lowBody)
_this.mob_lowBody2 = _this.spliceTimeData2(res.data.data.lowBody)
_this.mob_mediumBody1 = _this.spliceTimeData1(res.data.data.mediumBody)
_this.mob_mediumBody2 = _this.spliceTimeData2(res.data.data.mediumBody)
_this.mob_highBody1 = _this.spliceTimeData1(res.data.data.highBody)
_this.mob_highBody2 = _this.spliceTimeData2(res.data.data.highBody)
if (_this.mob_day_bodyBattery <= 25) {
_this.mobDayBatteryColor = '#F15F30'
} else if (_this.mob_day_bodyBattery >= 26 && _this.mob_day_bodyBattery <= 50) {
_this.mobDayBatteryColor = '#E1B030'
}
else if (_this.mob_day_bodyBattery >= 51 && _this.mob_day_bodyBattery <= 75) {
_this.mobDayBatteryColor = '#4197B5'
}
else if (_this.mob_day_bodyBattery >= 76 && _this.mob_day_bodyBattery <= 100) {
_this.mobDayBatteryColor = '#218380'
}
}
// 移动端日报压力
if (res.data.data.avgStress) {
if (res.data.data.avgStress == '--') {
_this.mob_day_stressLevel = 0
} else {
_this.mob_day_stressLevel = parseInt(res.data.data.avgStress)
}
_this.mob_minStress = res.data.data.minStress
_this.mob_maxStress = res.data.data.maxStress
_this.mob_restStress1 = _this.spliceTimeData1(res.data.data.restStress)
_this.mob_restStress2 = _this.spliceTimeData2(res.data.data.restStress)
_this.mob_lowStress1 = _this.spliceTimeData1(res.data.data.lowStress)
_this.mob_lowStress2 = _this.spliceTimeData2(res.data.data.lowStress)
_this.mob_mediumStress1 = _this.spliceTimeData1(res.data.data.mediumStress)
_this.mob_mediumStress2 = _this.spliceTimeData2(res.data.data.mediumStress)
_this.mob_highStress1 = _this.spliceTimeData1(res.data.data.highStress)
_this.mob_highStress2 = _this.spliceTimeData2(res.data.data.highStress)
if (_this.mob_day_stressLevel <= 25) {
_this.mobDayStressColor = '#42A78C'
} else if (_this.mob_day_stressLevel >= 26 && _this.mob_day_stressLevel <= 50) {
_this.mobDayStressColor = '#F5AF00'
}
else if (_this.mob_day_stressLevel >= 51 && _this.mob_day_stressLevel <= 75) {
_this.mobDayStressColor = '#FB8500'
}
else if (_this.mob_day_stressLevel >= 76 && _this.mob_day_stressLevel <= 100) {
_this.mobDayStressColor = '#D04D4D'
}
}
// 日报睡眠分期
if (res.data.data.sleepGraphical) {
_this.sleepStageDisFlag = true
let day_total_sleep_data = res.data.data.sleepGraphical.split(',')
let day_total_sleep_data_clone = res.data.data.sleepGraphical.split(',')
let day_total_sleep_data_x_narr = []
for (let i = 0; i < day_total_sleep_data_clone.length; i++) {
day_total_sleep_data_x_narr.push(day_total_sleep_data_clone[i].slice(0, -2))
}
let day_total_sleep_data_x_narr_time = []
for (let i = 0; i < day_total_sleep_data_x_narr.length; i++) {
day_total_sleep_data_x_narr_time.push(_this.shijiantime(day_total_sleep_data_x_narr[i]))
}
_this.displayStartTime = day_total_sleep_data_x_narr_time[0]
_this.displayEndTime = day_total_sleep_data_x_narr_time[day_total_sleep_data_x_narr_time.length - 1]
let new_arr_test = []
for (let i = 0; i < day_total_sleep_data.length; i++) {
day_total_sleep_data[i] = day_total_sleep_data[i].replace('|', ',')
let arr_clone_ld = day_total_sleep_data[i].split(',')
new_arr_test.push([arr_clone_ld, day_total_sleep_data[i + 1]].flat())
}
for (let i = 0; i < new_arr_test.length; i++) {
if (new_arr_test[i][2] != undefined) {
new_arr_test[i][2] = new_arr_test[i][2].substr(0, new_arr_test[i][2].length - 2)
}
}
let new_arr_test_2 = []
for (let i = 0; i < new_arr_test.length; i++) {
let a = 0
let arr1 = [];
let arr2 = []
let arr3 = []
if (new_arr_test[i][1] == 1) {
a = 0
arr1 = [a += i, 0, 1]
} else if (new_arr_test[i][1] == 2) {
arr2 = [a += i, 1, 2]
} else {
arr3 = [a += i, 2, 3]
}
new_arr_test_2.push(arr1, arr2, arr3)
}
_this.mob_total_timeflag1 = day_total_sleep_data_x_narr_time[0]
_this.mob_total_timeflag2 = day_total_sleep_data_x_narr_time[day_total_sleep_data_x_narr_time.length - 1]
if (_this.flag == true) {
_this.drawDayTotalSleep(new_arr_test_2, day_total_sleep_data_x_narr_time);
} else {
_this.drawMobDayTotalSleep(new_arr_test_2, day_total_sleep_data_x_narr_time);
}
} else {
_this.sleepStageDisFlag = false
let chartFlag = true
if (_this.flag == true) {
_this.drawDayTotalSleep([], [], chartFlag);
} else {
_this.drawMobDayTotalSleep([], [], chartFlag);
}
}
} else {
_this.$message({
message: 'Error',
type: 'error'
});
}
}).catch(function (error) {
console.log(error)
})
},
// 24小时时间数据
timeSlot(step) { // step = 间隔的分钟
var date = new Date()
date.setHours(00) // 时分秒设置从零点开始
date.setSeconds(00)
date.setUTCMinutes(00)
// console.log(date.getHours())
// console.log(date.getSeconds())
// console.log(new Date(date.getTime()))
var arr = [], timeArr = [];
var slotNum = 24 * 60 / step // 算出多少个间隔
for (var f = 0; f < slotNum; f++) { // stepM * f = 24H*60M
// arr.push(new Date(Number(date.getTime()) + Number(step*60*1000*f))) // 标准时间数组
var time = new Date(Number(date.getTime()) + Number(step * 60 * 1000 * f)) // 获取：零点的时间 + 每次递增的时间
var hour = '', sec = '';
time.getHours() < 10 ? hour = '0' + time.getHours() : hour = time.getHours() // 获取小时
time.getMinutes() < 10 ? sec = '0' + time.getMinutes() : sec = time.getMinutes() // 获取分钟
timeArr.push(hour + ':' + sec)
}
return timeArr
},
// 切割数据1
spliceTimeData1(val) {
let arr = val.split(':')
return arr[0]
},
// 切割数据2
spliceTimeData2(val) {
let arr = val.split(':')
return arr[1]
},
getMonthDataList() {
let _this = this
let Url = 'https://ergoeu.ergomotion.com/garmin/web/sleep/period'
// let Url = 'https://resthomeus.smartbed.top/garmin/web/sleep/period'
axios({
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
method: 'post',
url: Url,
data: {
// user_id: "11193424296280064",
// date: "2021-09-13"
user_id: _this.user_id,
date: _this.user_date
}
}).then(function (res) {
_this.loading = false
if (res.data.code == 1000) {
if (res.data.data.reportStart) {
_this.month_reportStart = res.data.data.reportStart.replace(/-/g, '/')
}
if (res.data.data.reportEnd) {
_this.month_reportEnd = res.data.data.reportEnd.replace(/-/g, '/')
}
if (res.data.data.avgSleepLen) {
_this.avgSleepLen1 = res.data.data.avgSleepLen.split(":")[0]
_this.avgSleepLen2 = res.data.data.avgSleepLen.split(":")[1]
}
// 计算月报日期
if (res.data.data.reportStart && res.data.data.reportEnd) {
let month_str_start_date = res.data.data.reportStart.replace(/-/g, '/')
let month_str_end_date = res.data.data.reportEnd.replace(/-/g, '/')
let wakeUpTimeArrWeek = []
wakeUpTimeArrWeek.push(_this.getAllDate(month_str_start_date, month_str_end_date))
wakeUpTimeArrWeek = [].concat.apply([], wakeUpTimeArrWeek)
_this.newWakeUpTimeArrWeek = []
for (let i = 0; i < wakeUpTimeArrWeek.length; i++) {
_this.newWakeUpTimeArrWeek.push(wakeUpTimeArrWeek[i].slice(5))
}
}
// 月报饼图
if (res.data.data.shallowPercentage) {
let a = res.data.data.deepPercentage.substring(0, res.data.data.deepPercentage.length - 1)
let b = res.data.data.shallowPercentage.substring(0, res.data.data.shallowPercentage.length - 1)
let c = res.data.data.wakePercentage.substring(0, res.data.data.wakePercentage.length - 1)
_this.monthdeepPercentage = res.data.data.deepPercentage
_this.monthshallowPercentage = res.data.data.shallowPercentage
_this.monthwakePercentage = res.data.data.wakePercentage
if (_this.flag == true) {
_this.drawMonthlySleepQuality(a, b, c)
} else {
_this.drawMobMonthlySleepQuality(a, b, c)
}
}
// 月报 总时长
if (res.data.data) {
let totalSleepLen = []
let lastTotalSleepLen = []
let checkFlag
_this.totalSleepLenDis = res.data.data.totalSleepLen + 'h'
_this.lastTotalSleepLenDis = res.data.data.lastTotalSleepLen + 'h'
totalSleepLen[0] = res.data.data.totalSleepLen
lastTotalSleepLen[0] = res.data.data.lastTotalSleepLen
if (res.data.data.totalSleepLen == 0 && res.data.data.lastTotalSleepLen == 0) {
_this.month_total_time = false
checkFlag = true
} else {
_this.month_total_time = true
checkFlag = false
}
if (_this.flag == false) {
_this.drawTotalSleepeMob(totalSleepLen, lastTotalSleepLen, checkFlag)
}
}
if (res.data.data) {
let thisAvgScore = []
let lastAvgScore = []
let checkFlag
_this.thisAvgScoreDis = res.data.data.avgScore
_this.lastAvgScoreDis = res.data.data.lastAvgScore
thisAvgScore[0] = res.data.data.avgScore
lastAvgScore[0] = res.data.data.lastAvgScore
if (res.data.data.avgScore == 0 && res.data.data.lastAvgScore == 0) {
_this.month_total_score = false
checkFlag = true
} else {
_this.month_total_score = true
checkFlag = false
}
if (_this.flag == false) {
_this.drawSleepAverageMob(thisAvgScore, lastAvgScore, checkFlag)
}
}
// 月报 起床入睡图表
if (res.data.data.wakeTimeGraphical) {
let wakeUpTime = res.data.data.wakeTimeGraphical.split(',')
let wakeUpTimeArr = []
for (let i = 0; i < wakeUpTime.length; i++) {
wakeUpTimeArr.push(_this.shijiantime(wakeUpTime[i]))
}
for (let i = 0; i < wakeUpTimeArr.length; i++) {
if (wakeUpTimeArr[i] == "undefined:undefined") {
wakeUpTimeArr[i] = "0"
}
}
let fallSleepTime = res.data.data.sleepTimeGraphical.split(',')
let fallSleepTimeArr = []
for (let i = 0; i < fallSleepTime.length; i++) {
fallSleepTimeArr.push(_this.shijiantime(fallSleepTime[i]))
}
for (let j = 0; j < fallSleepTimeArr.length; j++) {
if (fallSleepTimeArr[j] == "undefined:undefined") {
fallSleepTimeArr[j] = "0"
}
var fallSleepTimeArrLd = []
if (fallSleepTimeArr[j].split(":")[0] < 12) {
fallSleepTimeArr[j] = parseInt(fallSleepTimeArr[j].split(":")[0]) + 24 + ":" + fallSleepTimeArr[j][3] + fallSleepTimeArr[j][4]
}
}
var newWakeFallConcat = []
for (let i = 0; i < wakeUpTimeArr.length && i < fallSleepTimeArr.length; i++) {
if (wakeUpTimeArr[i] < fallSleepTimeArr[i]) {
newWakeFallConcat.push([wakeUpTimeArr[i], fallSleepTimeArr[i], wakeUpTimeArr[i], fallSleepTimeArr[i]])
} else {
newWakeFallConcat.push([fallSleepTimeArr[i], wakeUpTimeArr[i], fallSleepTimeArr[i], wakeUpTimeArr[i]])
}
}
for (let i = 0; i < newWakeFallConcat.length; i++) {
for (let j = 0; j < newWakeFallConcat[i].length; j++) {
if (isNaN(wakeUpTimeArr[i][j])) {
}
newWakeFallConcat[i][j] = _this.ChangeStrToMinutes(newWakeFallConcat[i][j])
}
}
if(res.data.data.avgSleepTime == '0:0'){
_this.avgSleepTime = '00:00'
}else{
_this.avgSleepTime = res.data.data.avgSleepTime
}
if(res.data.data.avgWakeTime == '0:0'){
_this.avgWakeTime = '00:00'
}else{
_this.avgWakeTime = res.data.data.avgWakeTime
}
if(res.data.data.lastAvgSleepTime == '0:0'){
_this.lastAvgSleepTime = '00:00'
}else{
_this.lastAvgSleepTime = res.data.data.lastAvgSleepTime
}
if(res.data.data.lastAvgWakeTime == '0:0'){
_this.lastAvgWakeTime = '00:00'
}else{
_this.lastAvgWakeTime = res.data.data.lastAvgWakeTime
}
if (_this.flag == true) {
_this.drawWakeAndFallTime(_this.newWakeUpTimeArrWeek, newWakeFallConcat);
} else {
_this.drawMobWakeAndFallTime(_this.newWakeUpTimeArrWeek, newWakeFallConcat)
}
}
// 计算月报心率
if (res.data.data.heartGraphical) {
_this.heartMonthChartData = _this.calcMonthData(res.data.data.heartGraphical)
let chartFlag = _this.isAllEqual(_this.heartMonthChartData)
let commontimearr;
if (chartFlag == true) {
commontimearr = []
} else {
commontimearr = _this.newWakeUpTimeArrWeek
}
if (_this.flag == true) {
_this.drawMonthHeartRate(commontimearr, _this.heartMonthChartData, chartFlag)
} else {
_this.drawMobMonthHeartRate(commontimearr, _this.heartMonthChartData, chartFlag)
}
_this.month_avgHeart = res.data.data.avgHeart
_this.month_maxHeart = res.data.data.maxHeart
_this.month_minHeart = res.data.data.minHeart
}
// 计算月报微动
if (res.data.data.moveGraphical) {
_this.moveMonthChartData = _this.calcMonthData(res.data.data.moveGraphical)
let chartFlag = _this.isAllEqual(_this.moveMonthChartData)
let commontimearr;
if (chartFlag == true) {
commontimearr = []
} else {
commontimearr = _this.newWakeUpTimeArrWeek
}
if (_this.flag == true) {
_this.drawMonthMovement(commontimearr, _this.moveMonthChartData, chartFlag)
} else {
_this.drawMobMonthMovement(commontimearr, _this.moveMonthChartData, chartFlag)
}
_this.month_moveTimes = res.data.data.moveTimes
_this.month_maxMove = res.data.data.maxMove
_this.month_minMove = res.data.data.minMove
}
// 计算月报压力
if (res.data.data.avgStressGraphical) {
_this.stressMonthChartData = _this.calcMonthData(res.data.data.avgStressGraphical)
let chartFlag = _this.isAllEqual(_this.stressMonthChartData)
let commontimearr;
if (chartFlag == true) {
commontimearr = []
} else {
commontimearr = _this.newWakeUpTimeArrWeek
}
if (_this.flag == true) {
_this.drawMonthStress(commontimearr, _this.stressMonthChartData, chartFlag, chartFlag)
} else {
_this.drawMobMonthStress(commontimearr, _this.stressMonthChartData, chartFlag, chartFlag)
}
_this.month_avgStress = res.data.data.avgStress
if (_this.month_avgStress <= 25) {
_this.mobMonthStressColor = '#42A78C'
} else if (_this.month_avgStress >= 26 && _this.month_avgStress <= 50) {
_this.mobMonthStressColor = '#F5AF00'
}
else if (_this.month_avgStress >= 51 && _this.month_avgStress <= 75) {
_this.mobMonthStressColor = '#FB8500'
}
else if (_this.month_avgStress >= 76 && _this.month_avgStress <= 100) {
_this.mobMonthStressColor = '#D04D4D'
}
_this.month_highStress = res.data.data.highStress
_this.month_lowStress = res.data.data.lowStress
_this.month_mediumStress = res.data.data.mediumStress
_this.restStress = res.data.data.restStress
}
// 计算月报呼吸率
if (res.data.data.breathGraphical) {
_this.breathMonthChartData = _this.calcMonthData(res.data.data.breathGraphical)
let chartFlag = _this.isAllEqual(_this.breathMonthChartData)
let commontimearr;
if (chartFlag == true) {
commontimearr = []
} else {
commontimearr = _this.newWakeUpTimeArrWeek
}
if (_this.flag == true) {
_this.drawMonthRespiratoryRate(commontimearr, _this.breathMonthChartData, chartFlag)
} else {
_this.drawMobMonthRespiratoryRate(commontimearr, _this.breathMonthChartData, chartFlag)
}
_this.month_avgBreath = res.data.data.avgBreath
_this.month_maxBreath = res.data.data.maxBreath
_this.month_minBreath = res.data.data.minBreath
}
// 计算月报打鼾
if (res.data.data.antiSnoreGraphical) {
_this.antiSnoreMonthChartData = _this.calcMonthData(res.data.data.antiSnoreGraphical)
let chartFlag = _this.isAllEqual(_this.antiSnoreMonthChartData)
let commontimearr;
if (chartFlag == true) {
commontimearr = []
} else {
commontimearr = _this.newWakeUpTimeArrWeek
}
if (_this.flag == true) {
_this.drawMonthAntiSnore(commontimearr, _this.antiSnoreMonthChartData, chartFlag)
} else {
_this.drawMobMonthAntiSnore(commontimearr, _this.antiSnoreMonthChartData, chartFlag)
}
_this.month_antiSnoreTimes = res.data.data.antiSnoreTimes
_this.month_maxAntiSnore = res.data.data.maxAntiSnore
_this.month_minAntiSnore = res.data.data.minAntiSnore
}
// 计算月报疲劳指数
if (res.data.data.fatigueIndexGraphical) {
_this.fatigueIndexMonthChartData = _this.calcMonthData(res.data.data.fatigueIndexGraphical)
let chartFlag = _this.isAllEqual(_this.fatigueIndexMonthChartData)
let commontimearr;
if (chartFlag == true) {
commontimearr = []
} else {
commontimearr = _this.newWakeUpTimeArrWeek
}
if (_this.flag == true) {
_this.drawMonthFatigue(commontimearr, _this.fatigueIndexMonthChartData, chartFlag)
} else {
_this.drawMobMonthFatigue(commontimearr, _this.fatigueIndexMonthChartData, chartFlag)
}
_this.avgFatigueIndex = res.data.data.avgFatigueIndex
_this.month_maxFatigueIndex = res.data.data.maxFatigueIndex
_this.month_minFatigueIndex = res.data.data.minFatigueIndex
}
// 计算月报卡路里
if (res.data.data.wakeKilocaloriesGraphical) {
_this.wakeKilocaloriesMonthChartData = _this.calcMonthData(res.data.data.wakeKilocaloriesGraphical)
_this.sleepkilocaloriesMonthChartData = _this.calcMonthData(res.data.data.sleepkilocaloriesGraphical)
let chartFlag1 = _this.isAllEqual(_this.wakeKilocaloriesMonthChartData)
let chartFlag2 = _this.isAllEqual(_this.sleepkilocaloriesMonthChartData)
let chartFlag3 = chartFlag1 && chartFlag2
if (_this.flag == true) {
_this.drawMonthCaloriesBurned(_this.newWakeUpTimeArrWeek, _this.wakeKilocaloriesMonthChartData, _this.sleepkilocaloriesMonthChartData, chartFlag3)
} else {
_this.drawMobMonthCaloriesBurned(_this.newWakeUpTimeArrWeek, _this.wakeKilocaloriesMonthChartData, _this.sleepkilocaloriesMonthChartData, chartFlag3)
}
_this.avgAwakeKilocalories = res.data.data.avgAwakeKilocalories
_this.avgSleepKilocalories = res.data.data.avgSleepKilocalories
_this.avgCountKilocalories = res.data.data.avgCountKilocalories
}
// 计算月报身体能量
if (res.data.data.avgBodyBatteryGraphical) {
_this.BodyBatteryMonthChartData = _this.calcMonthData(res.data.data.avgBodyBatteryGraphical)
let chartFlag = _this.isAllEqual(_this.BodyBatteryMonthChartData)
let commontimearr;
if (chartFlag == true) {
commontimearr = []
} else {
commontimearr = _this.newWakeUpTimeArrWeek
}
if (_this.flag == true) {
_this.drawMonthBodyBattery(commontimearr, _this.BodyBatteryMonthChartData, chartFlag)
} else {
_this.drawMobMonthBodyBattery(commontimearr, _this.BodyBatteryMonthChartData, chartFlag)
}
_this.avgBodyBattery = res.data.data.avgBodyBattery
if (_this.avgBodyBattery <= 25) {
_this.mobMonthBatteryColor = '#F15F30'
} else if (_this.avgBodyBattery >= 26 && _this.avgBodyBattery <= 50) {
_this.mobMonthBatteryColor = '#E1B030'
}
else if (_this.avgBodyBattery >= 51 && _this.avgBodyBattery <= 75) {
_this.mobMonthBatteryColor = '#4197B5'
}
else if (_this.avgBodyBattery >= 76 && _this.avgBodyBattery <= 100) {
_this.mobMonthBatteryColor = '#218380'
}
_this.veryLowBody = res.data.data.veryLowBody
_this.lowBody = res.data.data.lowBody
_this.mediumBody = res.data.data.mediumBody
_this.highBody = res.data.data.highBody
}
// 计算月报恢复指数
if (res.data.data.recoveryIndexGraphical) {
_this.recoveryIndexMonthChartData = _this.calcMonthData(res.data.data.recoveryIndexGraphical)
let chartFlag = _this.isAllEqual(_this.recoveryIndexMonthChartData)
let commontimearr;
if (chartFlag == true) {
commontimearr = []
} else {
commontimearr = _this.newWakeUpTimeArrWeek
}
if (_this.flag == true) {
_this.drawMonthRecoveryIndex(commontimearr, _this.recoveryIndexMonthChartData, chartFlag)
} else {
_this.drawMobMonthRecoveryIndex(commontimearr, _this.recoveryIndexMonthChartData, chartFlag)
}
_this.avgRecoveryIndex = res.data.data.avgRecoveryIndex
_this.month_maxRecoveryIndex = res.data.data.maxRecoveryIndex
_this.month_minRecoveryIndex = res.data.data.minRecoveryIndex
}
} else {
}
}).catch(function (error) {
_this.loading = false
console.log(error)
})
},
// 判断数组里面元素是否全部相等
isAllEqual(array) {
if (array.length > 0) {
return !array.some(function (value, index) {
return value !== array[0];
});
} else {
return true;
}
},
// 计算月报数据
calcMonthData(str) {
let arr = str.split(',')
for (let i = 0; i < arr.length; i++) {
if (arr[i] == '*') {
arr[i] = ''
}
}
return arr
},
format(time) {
let ymd = ''
let mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1))
let day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate())
ymd += time.getFullYear() + '/' // 获取年份。
ymd += mouth + '/' // 获取月份。
ymd += day // 获取日。
return ymd // 返回日期。
},
// 计算日期
getAllDate(start, end) {
let dateArr = []
let startArr = start.split('/')
let endArr = end.split('/')
let db = new Date()
db.setUTCFullYear(startArr[0], startArr[1] - 1, startArr[2])
let de = new Date()
de.setUTCFullYear(endArr[0], endArr[1] - 1, endArr[2])
let unixDb = db.getTime()
let unixDe = de.getTime()
let stamp
const oneDay = 24 * 60 * 60 * 1000;
for (stamp = unixDb; stamp <= unixDe;) {
dateArr.push(this.format(new Date(parseInt(stamp))))
stamp = stamp + oneDay
}
return dateArr
},
ChangeStrToMinutes(str) {
var arrminutes = str.split(":");
if (arrminutes.length == 2) {
var minutes = parseInt(arrminutes[0]) * 60 + parseInt(arrminutes[1]);
return minutes;
} else {
return 0;
}
},
// 时间截取
shijiantime(times) {
var timearr = times.replace(" ", ":").replace(/\:/g, "-").split("-");
var timestr = timearr[3] + ":" + timearr[4] + ""
return timestr
},
// 图表x数据处理方法
commonXCharData(val) {
if (val == []) return
let result = []
let arr = val.split(',')
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i].split('|')
result.push(this.deleteTimeStr(arr[i][0]))
}
return result
},
commonXCharDataClone(val) {
if (val == []) return
let result = []
let arr = val.split(',')
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i].split('|')
result.push(arr[i][0])
}
return result
},
commonYCharDataClone(val) {
if (val == []) return
let result = []
let arr = val.split(',')
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i].split('|')
result.push(arr[i][1])
}
return result
},
// 图表y数据处理方法
commonYCharData(val) {
if (val == []) return
let result = []
let arr = val.split(',')
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i].split('|')
result.push(arr[i][1])
}
return result
},
// 图表时间格式化
deleteTimeStr(str) {
let str1 = str.slice(11)
let result = str1.substring(0, str1.length - 3)
return result
},
getSearchString(key, Url) {
var str = Url;
str = str.substring(1, str.length); // 获取URL中?之后的字符（去掉第一位的问号）
// 以&分隔字符串，获得类似name=xiaoli这样的元素数组
var arr = str.split("&");
var obj = new Object();
// 将每一个数组元素以=分隔并赋给obj对象
for (var i = 0; i < arr.length; i++) {
var tmp_arr = arr[i].split("=");
obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
}
return obj[key];
},
// 日报 睡眠分期
drawDayTotalSleep(data, value, c) {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('day1'))
var aa = 'Awake'
var bb = 'Light'
var cc = 'Deep'
var days = ['Deep', 'Light', 'Awake',];
if (data.length != 0) {
data = data.map(function (item) {
return [item[0], item[1], item[2] || '-'];
});
if (data[data.length - 1][2] == 3) {
data.pop()
}
}
// 绘制图表
myChart.setOption({
title: {
show: c,
text: 'No Data',
left: 'center',
top: 'center',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400
}
},
grid: {
top: '5%',
left: '2%',
right: '5%',
bottom: '1%',
containLabel: true
},
legend: {
// orient: 'vertical',
icon: "circle",
x: '60%',
y: "center",
data: ['Awake', 'Light', 'Deep'],
itemGap: 40,
selectedMode: false,
textStyle: {
color: '#ffffff',
}
},
tooltip: {
// 触发器
trigger: "axis",
axisPointer: {
type: 'line',
},
// formatter:'{c}%'
formatter(params) {
var a = '<div><p>' + params[0].name + '</p></div>'
for (var i = 0; i < params.length; i++) {
if (params[i].value[2] == 1) {
params[i].value[2] = aa
}
if (params[i].value[2] == 2) {
params[i].value[2] = bb
}
if (params[i].value[2] == 3) {
params[i].value[2] = cc
}
a += '<p>' + params[i].marker + params[i].value[2] + '</p>';
}
return a;
}
},
animation: false,
xAxis: {
type: 'category',
data: value,
show: this.sleepStageDisFlag,
splitLine: {
show: false,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: true,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
},
yAxis: [{
type: 'category',
data: days,
show: this.sleepStageDisFlag,
splitLine: {
show: true,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: true,
axisTick: {
show: false
},
lineStyle: {
type: 'dashed',
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
},
{
type: 'category',
data: days,
show: this.sleepStageDisFlag,
splitLine: {
show: true,
lineStyle: {
color: '#666870',
width: 1,
type: 'dashed'
}
},
axisLabel: {
show:false,
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: true,
axisTick: {
show: false
},
lineStyle: {
type: 'dashed',
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
}],
visualMap: {
min: 1,
max: 3,
show: false,
calculable: false,
orient: 'horizontal',
left: 'center',
bottom: '10%',
//自定义热力图颜色
inRange: {
color: ['#6B5CAD', '#4197B5', '#AFB3C0']
}
},
series: [{
name: 'Punch Card',
type: 'heatmap',
barWidth: '50',
data: data,
},
]
});
},
// 日报 心率
drawHeartRate(a, b, c) {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('day2'))
// 绘制图表
let sleepStr1 = 'Asleep'
let sleepStr2 = 'Asleep'
let awakeStr = 'Awake'
if(this.commonChartsTomorrowSleepTime == ''){
sleepStr1 = ''
}
if(this.commonChartsSleepTime == ''){
sleepStr2 = ''
} if(this.commonChartsWakeTime == ''){
awakeStr = ''
}
myChart.setOption({
title: {
show: c,
text: 'No Data',
left: 'center',
top: 'center',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400
}
},
grid: {
top: '15%',
left: '4%',
right: '1%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
show: false,
lineStyle: {
color: '#666870',
width: 1,
type: 'dotted'
}
},
axisLabel: {
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
data: a
},
yAxis: {
type: 'value',
minInterval: 1,
show:!c,
min:0,
max:100,
// boundaryGap : [ 0, 0.1 ],
splitLine: {
show: true,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: "#AFB3C0"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
},
tooltip: {
// 触发器
trigger: "axis",
axisPointer: {
type: 'none',
},
renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
backgroundColor: ' #525466', // 提示框浮层的背景颜色。
// formatter:'{c}%'
formatter(params) {
var a = ''
for (var i = 0; i < params.length; i++) {
a += '<p>'+ params[i].value + '</p>';
}
return a;
}
},
series: [{
name: '销量',
type: 'line',
symbol: "none",
itemStyle: {
normal: {
color: '#fff',
lineStyle: {
color: 'rgba(208, 77, 77, 0.75)'
}
}
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(208, 77, 77, 0.75)'
}, {
offset: 1,
color: 'rgba(208, 77, 77, 0)'
}])
},
data: b
},
{
name: '平行于y轴的趋势线',
type: 'line',
markLine: {
lineStyle: {
width: 1,
color: 'gray',
},
name: 'aa',
symbol: 'none',
data: [[
{ coord: [b[0], 0] },
{ coord: [b[b.length-1], 100] }//如何获取grid上侧最大值，目前是写死的
], [
{ coord: [a[a.length - 1], 0] },
{ coord: [a[a.length - 1], 100] }
],
[
{ coord: [this.mob_total_timeflag2, 0] ,name:this.mob_total_timeflag2},
{ coord: [this.mob_total_timeflag2, 100],name:this.mob_total_timeflag2 }
],
[
{ coord: [this.commonChartsWakeTime, 0], name: awakeStr + '\n' + this.commonChartsWakeTime },
{ coord: [this.commonChartsWakeTime, 100] }
],
[
{ coord: [this.commonChartsSleepTime, 0], name:sleepStr2 + '\n' + this.commonChartsSleepTime },
{ coord: [this.commonChartsSleepTime, 100] }
],
// [
// { coord: [this.commonChartsTomorrowSleepTime, 0], name:sleepStr1 + '\n' + this.commonChartsTomorrowSleepTime },
// { coord: [this.commonChartsTomorrowSleepTime, 100] }
// ],
]
}
}
]
});
},
// 日报 呼吸率
drawRespirtoryRate(a, b, c) {
// console.log(a,b)
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('day3'))
// 绘制图表
let sleepStr1 = 'Asleep'
let sleepStr2 = 'Asleep'
let awakeStr = 'Awake'
if(this.commonChartsTomorrowSleepTime == ''){
sleepStr1 = ''
}
if(this.commonChartsSleepTime == ''){
sleepStr2 = ''
} if(this.commonChartsWakeTime == ''){
awakeStr = ''
}
myChart.setOption({
title: {
show: c,
text: 'No Data',
left: 'center',
top: 'center',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400
}
},
grid: {
top: '15%',
left: '6%',
right: '1%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
show: false,
lineStyle: {
color: '#666870',
width: 1,
type: 'dotted'
}
},
axisLabel: {
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
data: a
},
yAxis: {
type: 'value',
show:!c,
min:0,
max:25,
minInterval: 1,
// boundaryGap : [ 0, 0.1 ],
splitLine: {
show: true,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: "#AFB3C0"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
},
tooltip: {
// 触发器
trigger: "axis",
axisPointer: {
type: 'none',
},
renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
backgroundColor: ' #525466', // 提示框浮层的背景颜色。
// formatter:'{c}%'
formatter(params) {
var a = ''
for (var i = 0; i < params.length; i++) {
a += '<p>'+ params[i].value
+ '</p>';
}
return a;
}
},
series: [{
name: '销量',
type: 'line',
symbol: "none",
itemStyle: {
normal: {
color: '#fff',
lineStyle: {
color: 'rgba(45, 92, 180, 0.75)'
}
}
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(45, 92, 180, 0.75)'
}, {
offset: 1,
color: 'rgba(45, 92, 180, 0)'
}])
},
data: b
},
{
name: '平行于y轴的趋势线',
type: 'line',
markLine: {
lineStyle: {
width: 1,
color: 'gray',
},
name: 'aa',
symbol: 'none',
data: [[
{ coord: [b[0], 0] },
{ coord: [b[b.length-1], 25] }//如何获取grid上侧最大值，目前是写死的
], [
{ coord: [a[a.length - 1], 0] },
{ coord: [a[a.length - 1], 25] }
],
[
{ coord: [this.mob_total_timeflag2, 0] ,name:this.mob_total_timeflag2},
{ coord: [this.mob_total_timeflag2, 25],name:this.mob_total_timeflag2 }
],
[
{ coord: [this.commonChartsWakeTime, 0], name: awakeStr+ '\n' + this.commonChartsWakeTime },
{ coord: [this.commonChartsWakeTime, 25] }
],
[
{ coord: [this.commonChartsSleepTime, 0], name:sleepStr2 + '\n' + this.commonChartsSleepTime },
{ coord: [this.commonChartsSleepTime, 25] }
],
// [
// { coord: [this.commonChartsTomorrowSleepTime, 0], name:sleepStr1 + '\n' + this.commonChartsTomorrowSleepTime },
// { coord: [this.commonChartsTomorrowSleepTime, 25] }
// ],
]
}
}
]
});
},
// 日报 微动
drawMovement(a, b, c) {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('day4'))
// 绘制图表
myChart.setOption({
title: {
show: c,
text: 'No Data',
left: 'center',
top: 'center',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400
}
},
grid: {
top: '15%',
left: '6%',
right: '1%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
show: false,
lineStyle: {
color: '#666870',
width: 1,
type: 'dotted'
}
},
axisLabel: {
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
data: a
},
yAxis: {
type: 'value',
minInterval: 1,
min:0,
max:25,
show:!c,
splitLine: {
show: true,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: "#AFB3C0"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
},
tooltip: {
// 触发器
trigger: "axis",
axisPointer: {
type: 'line',
},
// formatter:'{c}%'
formatter(params) {
var a = '<div><p>' + params[0].name + '</p></div>'
for (var i = 0; i < params.length; i++) {
a += '<p>' + params[i].marker + params[i].value + '</p>';
}
return a;
}
},
series: [{
name: '销量',
type: 'line',
symbol: "none",
itemStyle: {
normal: {
color: '#fff',
lineStyle: {
color: 'rgba(245, 175, 0, 0.75)'
}
}
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(245, 175, 0, 0.75)'
}, {
offset: 1,
color: 'rgba(245, 175, 0, 0)'
}])
},
data: b
},
{
name: '平行于y轴的趋势线',
type: 'line',
markLine: {
lineStyle: {
width: 1,
color: '#6D7188',
},
name: 'aa',
symbol: 'none',
data: [[
{ coord: [b[0], 0] },
{ coord: [b[b.length-1], 25] }//如何获取grid上侧最大值，目前是写死的
], [
{ coord: [a[a.length - 1], 0] },
{ coord: [a[a.length - 1], 25] }
]]
}
}
]
});
},
// 日报 打鼾干预
drawAntiSnore(a, b, c) {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('day5'))
// 绘制图表
myChart.setOption({
title: {
show: c,
text: 'No Data',
left: 'center',
top: 'center',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400
}
},
grid: {
height:'80%',
top:'5%',
left: '5%',
right: '5%',
bottom: '2%',
containLabel: true
},
xAxis: {
type: 'category',
data: a,
axisLabel: {
// formatter: function shijiantime(times) {
// var timearr = times.replace(" ", ":").replace(/\:/g, "-").split("-");
// var timestr = timearr[3] + ":" + timearr[4] + ""
// return timestr
// },
textStyle: {
color: "#D8D8DB"
}
},
splitLine: {
show: false,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
},
yAxis: {
type: 'value',
min: 0,
max:5,
show:!c,
interval: 1,
splitLine: {
show: true,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLabel: {
show: false,
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
},
series: [{
type: "k",
barMaxWidth: 5,
itemStyle: {
normal: {
color: '#4197B5',
barBorderRadius: [40, 10, 10, 10],
borderColor: "none"
}
},
data: b,
showBackground: true,
},
// {
// name: '平行于y轴的趋势线',
// type: 'line',
// markLine: {
// lineStyle: {
// width: 1,
// color: '#6D7188',
// },
// name: 'aa',
// symbol: 'none',
// data: [[
// { coord: [a[0], 0] },
// { coord: [a[0], 5] }//如何获取grid上侧最大值，目前是写死的
// ], [
// { coord: [a[a.length - 1], 0] },
// { coord: [a[a.length - 1], 5] }
// ]]
// }
// }
]
});
},
// 月报 睡眠分期 饼图
drawMonthlySleepQuality(a, b, c) {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('month1'))
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'item'
},
grid: {
top: '1%',
left: '1%',
right: '1%',
bottom: '1%',
containLabel: true
},
series: [
{
// name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
radius: ["45%", "60%"],
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: a, name: 'Deep', itemStyle: { color: '#6B5CAD' } },
{ value: b, name: 'Light', itemStyle: { color: '#4197B5' } },
{ value: c, name: 'Awale', itemStyle: { color: '#AFB3C0' } },
]
}
]
});
},
// 月报 起来和入睡时间
drawWakeAndFallTime(a, b, c) {
let myChart = echarts.init(document.getElementById('month2'))
var cc = this.fall_clone
var dd = this.wake_clone
function ChangeHourMinutestr(str) {
if (str > 1440 && str != 0) {
str = str - 1440
if (str !== "0" && str !== "" && str !== null) {
return ((Math.floor(str / 60)).toString().length < 2 ? "0" + (Math.floor(str / 60)).toString() :
(Math.floor(str / 60)).toString()) + ":" + ((str % 60).toString().length < 2 ? "0" + (str % 60).toString() : (str % 60).toString());
} else {
return "";
}
} else {
if (str !== "0" && str !== "" && str !== null) {
return ((Math.floor(str / 60)).toString().length < 2 ? "0" + (Math.floor(str / 60)).toString() :
(Math.floor(str / 60)).toString()) + ":" + ((str % 60).toString().length < 2 ? "0" + (str % 60).toString() : (str % 60).toString());
} else {
return "";
}
}
}
function ChangeStrToMinutes(str) {
console.log(str)
var arrminutes = str.split(":");
if (arrminutes.length == 2) {
var minutes = parseInt(arrminutes[0]) * 60 + parseInt(arrminutes[1]);
return minutes;
} else {
return 0;
}
}
var aa = this.avgSleepTime
var bb = this.avgWakeTime
var ech_avg_sleep_time;
var ech_avg_wake_time = ChangeStrToMinutes(this.avgWakeTime)
if (ChangeStrToMinutes(this.avgSleepTime) < 720) {
ech_avg_sleep_time = ChangeStrToMinutes(this.avgSleepTime) + 1440
console.log('1')
} else {
ech_avg_sleep_time = ChangeStrToMinutes(this.avgSleepTime)
console.log('2')
}
// 绘制图表
myChart.setOption({
title: {
show: c,
text: 'No Data',
left: 'center',
top: 'center',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400
}
},
grid: {
top: '10%',
left: '4%',
right: '15%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
interval: 2,
splitLine: {
show: false,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: false,
// onZero: true,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
data: a,
},
yAxis: {
type: 'value',
// inverse: true,
scale: false,
splitLine: {
show: true,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLabel: {
formatter: function (value, index) {
// if (value > 1440) {
// value = value - 1440
// return ChangeHourMinutestr(value)
// }
return ChangeHourMinutestr(value)
},
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
},
tooltip: {
// 触发器
trigger: "axis",
axisPointer: {
type: 'line',
crossStyle: {
color: '#B3BCE3'
}
},
formatter(params) {
var a = '<div><p>' + params[0].name + '</p></div>'
for (let i = 0; i < params.length; i++) {
// console.log(params[i])
if (!isNaN(params[i].value[2])) {
a += '<p>' + params[i].marker + cc + " : " + ChangeHourMinutestr(params[i].value[2] + "") + '</p>' + '<p>' + params[i].marker + dd + " : " + ChangeHourMinutestr((params[i].value[1]) + "") + '</p>';
}
}
return a;
}
},
series: [{
type: 'k',
markLine: {
symbol: "none",
data: [{
silent: true, //鼠标悬停事件 true没有，false有
lineStyle: { //警戒线的样式 ，虚实 颜色
type: "dashed",
color: "#52EEFF",
},
label: {
position: 'end',
formatter: `${aa}`,
color: "#D8D8DB",
fontSize: '12'
},
yAxis: ech_avg_sleep_time
}, {
silent: true,
lineStyle: {
type: "dashed",
color: "#FFAD67",
},
label: {
position: 'end',
color: "#D8D8DB",
formatter: `${bb}`,
fontSize: '12'
},
yAxis: ech_avg_wake_time
}]
},
barMaxWidth: 3.5,
itemStyle: {
borderColor: "none",
color: '#8877D1',
emphasis: {
}
},
lineStyle: {
normal: {
opacity: 1,
}
},
data: b,
}]
});
},
// 月报 心率
drawMonthHeartRate(a, b, c) {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('month3'))
// 绘制图表
myChart.setOption({
title: {
show: c,
text: 'No Data',
left: 'center',
top: 'center',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400
}
},
grid: {
top: '10%',
left: '6%',
right: '7%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
show: false,
lineStyle: {
color: '#666870',
width: 1,
type: 'dotted'
}
},
axisLabel: {
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
data: a
},
yAxis: {
type: 'value',
minInterval: 20,
// boundaryGap : [ 0, 0.1 ],
splitLine: {
show: true,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: "#AFB3C0"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
},
tooltip: {
// 触发器
trigger: "axis",
axisPointer: {
type: 'line',
},
// formatter:'{c}%'
formatter(params) {
var a = '<div><p>' + params[0].name + '</p></div>'
for (var i = 0; i < params.length; i++) {
a += '<p>' + params[i].marker + params[i].value + '</p>';
}
return a;
}
},
series: [{
name: '销量',
type: 'line',
symbol: 'none',
itemStyle: {
normal: {
color: '#fff',
lineStyle: {
color: 'rgba(208, 77, 77, 0.75)'
}
}
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(208, 77, 77, 0.75)'
}, {
offset: 1,
color: 'rgba(208, 77, 77, 0)'
}])
},
data: b
}]
});
},
// 月报 微动
drawMonthMovement(a, b, c) {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('month4'))
// 绘制图表
myChart.setOption({
title: {
show: c,
text: 'No Data',
left: 'center',
top: 'center',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400
}
},
grid: {
top: '10%',
left: '6%',
right: '7%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
show: false,
lineStyle: {
color: '#666870',
width: 1,
type: 'dotted'
}
},
axisLabel: {
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
data: a
},
yAxis: {
type: 'value',
minInterval: 1,
// boundaryGap : [ 0, 0.1 ],
splitLine: {
show: true,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: "#AFB3C0"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
},
tooltip: {
// 触发器
trigger: "axis",
axisPointer: {
type: 'line',
},
// formatter:'{c}%'
formatter(params) {
var a = '<div><p>' + params[0].name + '</p></div>'
for (var i = 0; i < params.length; i++) {
a += '<p>' + params[i].marker + params[i].value + '</p>';
}
return a;
}
},
series: [{
name: '销量',
type: 'bar',
symbol: "none",
barWidth: 5,
itemStyle: {
normal: {
barBorderRadius: [8, 8, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "rgba(245, 175, 0, 0.06)" // 0% 处的颜色
}, {
offset: 1,
color: "#F5AF00" // 100% 处的颜色
}], false)
}
},
data: b
}]
});
},
// 月报 压力
drawMonthStress(a, b, c) {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('month5'))
// 绘制图表
myChart.setOption({
title: {
show: c,
text: 'No Data',
left: 'center',
top: 'center',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400
}
},
grid: {
top: '10%',
left: '6%',
right: '7%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
show: false,
lineStyle: {
color: '#666870',
width: 1,
type: 'dotted'
}
},
axisLabel: {
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
data: a
},
yAxis: {
type: 'value',
minInterval: 1,
// boundaryGap : [ 0, 0.1 ],
splitLine: {
show: true,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: "#AFB3C0"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
},
tooltip: {
// 触发器
trigger: "axis",
axisPointer: {
type: 'line',
},
// formatter:'{c}%'
formatter(params) {
var a = '<div><p>' + params[0].name + '</p></div>'
for (var i = 0; i < params.length; i++) {
a += '<p>' + params[i].marker + params[i].value + '</p>';
}
return a;
}
},
series: [{
name: '销量',
type: 'bar',
symbol: "none",
barWidth: 5,
itemStyle: {
normal: {
barBorderRadius: [8, 8, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "rgba(65, 151, 181, 0.1)" // 0% 处的颜色
}, {
offset: 1,
color: "#4197B5" // 100% 处的颜色
}], false)
}
},
data: b
}]
});
},
// 月报 呼吸率
drawMonthRespiratoryRate(a, b, c) {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('month6'))
// 绘制图表
myChart.setOption({
title: {
show: c,
text: 'No Data',
left: 'center',
top: 'center',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400
}
},
grid: {
top: '10%',
left: '6%',
right: '7%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
show: false,
lineStyle: {
color: '#666870',
width: 1,
type: 'dotted'
}
},
axisLabel: {
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
data: a
},
yAxis: {
type: 'value',
minInterval: 1,
// boundaryGap : [ 0, 0.1 ],
splitLine: {
show: true,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: "#AFB3C0"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
},
tooltip: {
// 触发器
trigger: "axis",
axisPointer: {
type: 'line',
},
// formatter:'{c}%'
formatter(params) {
var a = '<div><p>' + params[0].name + '</p></div>'
for (var i = 0; i < params.length; i++) {
a += '<p>' + params[i].marker + params[i].value + '</p>';
}
return a;
}
},
series: [{
name: '销量',
type: 'line',
symbol: "none",
itemStyle: {
normal: {
color: '#fff',
lineStyle: {
color: 'rgba(45, 92, 180, 0.75)'
}
}
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(45, 92, 180, 0.75)'
}, {
offset: 1,
color: 'rgba(45, 92, 180, 0)'
}])
},
data: b
}]
});
},
// 月报 打鼾
drawMonthAntiSnore(a, b, c) {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('month7'))
// 绘制图表
myChart.setOption({
title: {
show: c,
text: 'No Data',
left: 'center',
top: 'center',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400
}
},
grid: {
top: '10%',
left: '6%',
right: '7%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
show: false,
lineStyle: {
color: '#666870',
width: 1,
type: 'dotted'
}
},
axisLabel: {
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
data: a
},
yAxis: {
type: 'value',
minInterval: 1,
// boundaryGap : [ 0, 0.1 ],
splitLine: {
show: true,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: "#AFB3C0"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
},
tooltip: {
// 触发器
trigger: "axis",
axisPointer: {
type: 'line',
},
// formatter:'{c}%'
formatter(params) {
var a = '<div><p>' + params[0].name + '</p></div>'
for (var i = 0; i < params.length; i++) {
a += '<p>' + params[i].marker + params[i].value + '</p>';
}
return a;
}
},
series: [{
name: '销量',
type: 'bar',
symbol: "none",
barWidth: 5,
itemStyle: {
normal: {
barBorderRadius: [8, 8, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "rgba(65, 151, 181, 0.06)" // 0% 处的颜色
}, {
offset: 1,
color: "#4197B5" // 100% 处的颜色
}], false)
}
},
data: b
}]
});
},
// 月报 疲劳指数
drawMonthFatigue(a, b, c) {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('month8'))
// 绘制图表
myChart.setOption({
title: {
show: c,
text: 'No Data',
left: 'center',
top: 'center',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400
}
},
grid: {
top: '10%',
left: '6%',
right: '7%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
show: false,
lineStyle: {
color: '#666870',
width: 1,
type: 'dotted'
}
},
axisLabel: {
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
data: a
},
yAxis: {
type: 'value',
minInterval: 1,
// boundaryGap : [ 0, 0.1 ],
splitLine: {
show: true,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: "#AFB3C0"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
},
tooltip: {
// 触发器
trigger: "axis",
axisPointer: {
type: 'line',
},
// formatter:'{c}%'
formatter(params) {
var a = '<div><p>' + params[0].name + '</p></div>'
for (var i = 0; i < params.length; i++) {
a += '<p>' + params[i].marker + params[i].value + '</p>';
}
return a;
}
},
series: [{
name: '销量',
type: 'bar',
symbol: "none",
barWidth: 5,
itemStyle: {
normal: {
barBorderRadius: [8, 8, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "rgba(135, 191, 212, 0.1)" // 0% 处的颜色
}, {
offset: 1,
color: "#87BFD4" // 100% 处的颜色
}], false)
}
},
data: b
}]
});
},
// 月报 卡路里
drawMonthCaloriesBurned(a, b, c, d) {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('month9'))
// 绘制图表
myChart.setOption({
title: {
show: d,
text: 'No Data',
left: 'center',
top: 'center',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400
}
},
grid: {
top: '10%',
left: '6%',
right: '7%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
show: false,
lineStyle: {
color: '#666870',
width: 1,
type: 'dotted'
}
},
axisLabel: {
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
data: a
},
yAxis: {
type: 'value',
minInterval: 1,
// boundaryGap : [ 0, 0.1 ],
splitLine: {
show: true,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: "#AFB3C0"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
},
tooltip: {
// 触发器
trigger: "axis",
axisPointer: {
type: 'line',
},
// formatter:'{c}%'
formatter(params) {
var a = '<div><p>' + params[0].name + '</p></div>'
for (var i = 0; i < params.length; i++) {
a += '<p>' + params[i].marker + params[i].value + '</p>';
}
return a;
}
},
series: [{
name: 'Aawke',
type: 'bar',
symbol: "none",
stack: '卡路里',
barWidth: 5,
itemStyle: {
normal: {
barBorderRadius: [8, 8, 0, 0],
// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
// offset: 0,
// color: "rgba(65, 151, 181, 0.06)" // 0% 处的颜色
// },{
// offset: 1,
// color: "#4197B5" // 100% 处的颜色
// }], false)
color: '#4197B5'
}
},
data: b
},
{
name: 'Asleep',
type: 'bar',
symbol: "none",
stack: '卡路里',
barWidth: 5,
itemStyle: {
normal: {
barBorderRadius: [8, 8, 0, 0],
// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
// offset: 0,
// color: "rgba(65, 151, 181, 0.06)" // 0% 处的颜色
// },{
// offset: 1,
// color: "#4197B5" // 100% 处的颜色
// }], false)
color: '#AFB3C0'
}
},
data: c
},
]
});
},
// 月报 身体能量
drawMonthBodyBattery(a, b, c) {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('month10'))
// 绘制图表
myChart.setOption({
title: {
show: c,
text: 'No Data',
left: 'center',
top: 'center',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400
}
},
grid: {
top: '10%',
left: '6%',
right: '7%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
show: false,
lineStyle: {
color: '#666870',
width: 1,
type: 'dotted'
}
},
axisLabel: {
textStyle: {
color: "#D8D8DB"
}
},
axisLine: {
show: false,
axisTick: {
show: false
},
lineStyle: {
color: '#666870 ',
width: 1, //这里是为了突出显示加上的
}
},
data: a
},
yAxis: {
type: 'value',
minInterval: 1,
// boundaryGap : [ 0, 0.1 ],
splitLine: {
show: true,
lineStyle: {
color: '#666870',
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: "#AFB3C0"
}
},
axisLine: {
show: false,
axisTick
标签：color,res,month,let,mob,data,echarts 来源： https://blog.csdn.net/web_liudong/article/details/121768315