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
上一篇:系统注册登录查看信息忘记密码项目+maven后端app前端+mob平台短信验证+阿里云服务器部署


下一篇:催收成本在单体经济中的分析