uni_mattress/sleep/pages/report/report.vue

<template>
	<view class="report-container">

		<cu-custom bgColor="#000000"><view slot="content" style="color: #FFFFFF">UU睡眠</view></cu-custom>

		<view v-if="!isDeviceAdded" class="flex-col page">
		  <view class="flex-col flex-auto image-wrapper_2">
			<view class="flex-row items-center self-center bottom-btns">
				<view class="btn_1 bottom-btn" @click="addBindDevice">立即体验</view>
				<view class="btn_2 bottom-btn" @click="addBindDevice">添加设备</view>
			</view>

		  </view>
		</view>

		<view v-if="isDeviceAdded" class="flex-col justify-start page">
			<view class="flex-col report">

				<!-- report header -->
				<view class="flex-col justify-start report_header relative">

					<img class="report-header-img" src="../../static/report/reportIconLight.png" />

					<view class="btns-report">
						<view @click="handleMonthClick" class="btn-month-report">月报</view>
						<view @click="handleWeekClick" class="btn-week-report">周报</view>
					</view>

					<view class="flex-col report_score space-y-55">
						<view class="flex-row space-x-10 report_period">
							<view class="flex-row justify-between flex-auto section_3">
								<view class="flex-row items-center space-x-24" @click="calendarShow=true">
									<image class="shrink-0 image_4"
										src="../../static/report/reportIconLeft.png"
									/>
<!--									<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">-->
<!--										<text class="font_2 text_2">{{date}}</text>-->
<!--									</picker>-->
                  <text class="margin-right text-white">{{ selectDay }}</text>

									<image class="image_4"
										src="../../static/report/reportIconRight.png"
									/>
								</view>
							</view>

							<view class="flex-row items-center shrink-0 section_4 space-x-10">
<!--								<text class="font_2 text_3">23:30～05:42</text>-->
                <picker v-if="todayTimeList.length > 0" @change="PickerChange" :value="index" :range="todayTimeList">
                  <view class="picker text-white">
                    {{ todayTimeList[index] }}
                  </view>
                </picker>
								<image
									class="shrink-0 image_5"
									src="../../static/report/reportIconTop.png"
								/>

							</view>
						</view>

						<view class="flex-col report_score_data items-center">
							<view class="flex-row justify-between items-center space-x-76-reverse">
								<text class="text_4">{{ sleepReportFrom.report_content.score.desc }}</text>
							</view>
<!--							<view class="flex-row items-center self-end section_5 space-x-8">-->
<!--								<image-->
<!--									class="shrink-0 image_6"-->
<!--									src="../../static/report/reportIconPower.png"-->
<!--								/>-->
<!--								<text class="font_2 text_5">+25</text>-->
<!--							</view>-->
							<text class="self-center text_6" :class="sleepReportFrom.report_content.score.state === 3 ?
							'text-green' : sleepReportFrom.report_content.score.state === 2 ? 'text-yellow' : 'text-red'">{{ sleepReportFrom.report_content.score.value }}</text>
							<text class="self-center font_2 text_7">香睡指数</text>
						</view>

						<view class="flex-row report-data-sum justify-between">
							<view class="flex-row items-center">
								<image
									class="icon-data-sum"
									src="../../static/report/reportIconTime.png"
								/>
								<view class="flex-col items-center text-data-sum">
									<view class="title-data-sum">睡眠总时长</view>
									<view class="flex-row justify-evenly items-baseline group_5">
										<text class="font_5">{{ formateSeconds(sleepReportFrom.total_duration) }}</text>
									</view>
								</view>
							</view>

							<view class="flex-row items-center">
								<image
									class="icon-data-sum"
									src="../../static/report/reportIconClock.png"
								/>
								<view class="flex-col items-center text-data-sum">
									<view class="title-data-sum">睡眠时间</view>
									<view class="flex-row justify-evenly items-baseline group_5">
										<text class="font_5">{{ sleepReportFrom.gobed_time + '~' + sleepReportFrom.outbed_time }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- report analysis -->
				<view class="flex-col report_analysis space-y-4">
					<text class="self-start font_4 text_8">各项睡眠监测数据统计</text>

					<view class="flex-col justify-start items-center relative report_analysis_data">

						<view class="flex-row equal-division space-x-29 pos">
							<view class="flex-col equal-division-item">
								<view class="flex-col section_6 space-y-12">
									<view class="flex-row space-x-10">
										<image class="image_7" src="../../static/report/reportIconGreen.png"/>
										<text class="font_3">上床时间</text>
									</view>
									<text class="self-start font_4 text_9">{{ sleepReportFrom.gobed_time }}</text>
								</view>
								<view class="flex-col section_6 view space-y-12">
									<view class="flex-row items-center space-x-12">
										<image class="image_7" src="../../static/report/reportIconGreen.png"/>
										<text class="font_3">深睡时长</text>
									</view>
									<view class="flex-row items-baseline group_6 space-x-6">
										<text class="font_4">{{ formateSeconds(sleepReportFrom.deep_duration) }}</text>
									</view>
								</view>
                <view class="flex-col section_6 view space-y-12">
                  <view class="flex-row items-center space-x-12">
                    <image class="image_7" :src="sleepReportFrom.report_content.avg_hx.state === 3 ? '../../static/report/reportIconGreen.png' :
                     sleepReportFrom.report_content.avg_hx.state === 2 ? '../../static/report/reportIconYellow.png' : '../../static/report/reportIconRed.png'"/>
                    <text class="font_3">平均呼吸率</text>
                  </view>
                  <view class="flex-row items-baseline group_6 space-x-6">
                    <text class="font_4">{{ sleepReportFrom.report_content.avg_hx.value }}</text>
                    <text class="font_5">次/分</text>
                  </view>
                </view>
								<view class="flex-col items-left group_7 space-x-10">
									<view>
										<image class="image_7" src="../../static/report/reportIconGreen.png"/>
										<text class="font_3">温馨提示</text>
									</view>

									<text class="font_2 text_10">本次睡眠，您有{{ errCount }}项指标不及格。</text>
								</view>
							</view>

							<view class="flex-col equal-division-item_2 space-y-10">

								<view class="flex-col section_7 space-y-12">
									<view class="flex-row space-x-10">
										<image
											class="image_7"
											src="../../static/report/reportIconGreen.png"
										/>
										<text class="font_3">在床时间</text>
									</view>
									<view class="flex-row justify-evenly items-baseline group_5">
										<text class="font_4">{{ formateSeconds(sleepReportFrom.inbed_duration) }}</text>
									</view>
								</view>

                <view class="flex-col section_7 space-y-12">
                  <view class="flex-row space-x-10">
                    <image class="image_7" :src="sleepReportFrom.report_content.sleep_eff.state === 3 ? '../../static/report/reportIconGreen.png' :
                     sleepReportFrom.report_content.sleep_eff.state === 2 ? '../../static/report/reportIconYellow.png' : '../../static/report/reportIconRed.png'"/>
                    <text class="font_3">睡眠效率</text>
                  </view>
                  <view class="flex-row items-baseline group_5">
                    <text class="font_4">{{ sleepReportFrom.report_content.sleep_eff.value }}</text>
                  </view>
                </view>

								<view class="flex-col section_7 space-y-12">
									<view class="flex-row space-x-10">
                    <image class="image_7" :src="sleepReportFrom.report_content.avg_rh.state === 3 ? '../../static/report/reportIconGreen.png' :
                     sleepReportFrom.report_content.avg_rh.state === 2 ? '../../static/report/reportIconYellow.png' : '../../static/report/reportIconRed.png'"/>
										<text class="font_3">平均心率</text>
									</view>
									<view class="flex-row items-baseline group_6 space-x-4">
										<text class="font_4">{{ sleepReportFrom.report_content.avg_rh.value }}</text>
										<text class="font_5">次/分</text>
									</view>
								</view>

                <view class="flex-row shrink-0 justify-between section_8 space-x-34">
                  <view class="flex-row items-center space-x-8">
                    <image class="image_7" :src="sleepReportFrom.report_content.move_count.state === 3 ? '../../static/report/reportIconGreen.png' :
                     sleepReportFrom.report_content.move_count.state === 2 ? '../../static/report/reportIconYellow.png' : '../../static/report/reportIconRed.png'"/>
                    <text class="font_3">体动次数</text>
                  </view>
                  <view class="flex-row items-baseline space-x-6">
                    <text class="font_4">{{ sleepReportFrom.report_content.move_count.value }}</text>
                    <text class="font_5">次</text>
                  </view>
                </view>
                <view class="flex-row shrink-0 justify-between section_8 space-x-34">
                  <view class="flex-row items-center space-x-8">
                    <image class="image_7" :src="sleepReportFrom.report_content.outbed_count.state === 3 ? '../../static/report/reportIconGreen.png' :
                     sleepReportFrom.report_content.outbed_count.state === 2 ? '../../static/report/reportIconYellow.png' : '../../static/report/reportIconRed.png'"/>
                    <text class="font_3">离床次数</text>
                  </view>
                  <view class="flex-row items-baseline space-x-6">
                    <text class="font_4">{{ sleepReportFrom.report_content.outbed_count.value }}</text>
                    <text class="font_5">次</text>
                  </view>
                </view>
								<view class="flex-row justify-between section_8">
									<view class="flex-row items-center space-x-8">
                    <image class="image_7" :src="sleepReportFrom.report_content.snoring_count.state === 3 ? '../../static/report/reportIconGreen.png' :
                     sleepReportFrom.report_content.snoring_count.state === 2 ? '../../static/report/reportIconYellow.png' : '../../static/report/reportIconRed.png'"/>
										<text class="font_3">打鼾次数</text>
									</view>
									<view class="flex-row items-baseline space-x-6">
										<text class="font_4">{{ sleepReportFrom.report_content.snoring_count.value }}</text>
										<text class="font_5">次</text>
									</view>
								</view>


							</view>
						</view>
					</view>

					<view class="flex-row justify-between section_efficiency">
						<view class="flex-row items-center">
							<image
								class="shrink-0 image_7"
								src="../../static/report/reportIconWatch.png"
							/>
							<text class="font_3">睡眠效率</text>
						</view>
						<view class="flex-row items-center space-x-6">
							<text class="font_4">{{ sleepReportFrom.report_content.sleep_eff.value }}</text>
						</view>
					</view>

					<view class="flex-col justify-start report_breath report-easy">
					  <view class="flex-col justify-start">
					    <view class="flex-row items-center group_11 space-x-10 pos_33">
					      <image
					        class="image_8"
							src="../../static/report/reportIconBreath.png"
					      />
					      <text class="font_3">安稳度</text>
					      <image
					        class="image_11"
					        src="../../static/report/reportIconWhy.png"
					      />
					    </view>
					  </view>
					  <view class="flex-col pos_34">
<!--					      <view class="flex-col group_15">-->
<!--					        <view class="flex-row justify-between group_2">-->
<!--					          <text class="font_3 text_12">安稳度</text>-->
<!--					          <view class="flex-row items-center space-x-30">-->
<!--					            <text class="font_10">入睡时长</text>-->
<!--					            <view class="flex-row items-baseline shrink-0 space-x-6">-->
<!--					              <text class="font_5">{{ formateSeconds(sleepReportFrom.rs_duration) }}</text>-->
<!--					            </view>-->
<!--					          </view>-->
<!--					        </view>-->
<!--					      </view>-->
					      <view class="list-divider"></view>

						  <view class="flex-col group_15">
						    <view class="flex-row justify-between group_2">
						      <text class="font_3 text_12">离床次数</text>
						      <view class="flex-row items-center space-x-30">

						        <view class="flex-row items-baseline shrink-0 space-x-6">
						          <text class="font_5">{{ sleepReportFrom.report_content.outbed_count.value }}</text>
						          <text class="font_6">次</text>
						        </view>
						      </view>
						    </view>

							<view class="report_breath_chart">
								<view class="echarts-wrap">
								  <mpvue-echarts class="ec-canvas" canvasId="canvasChart-1" ref="refChart-1" @onInit="onInit1"></mpvue-echarts>
								</view>
							</view>
						  </view>
						  <view class="list-divider"></view>

						  <view class="flex-col group_15">
						    <view class="flex-row justify-between group_2">
						      <text class="font_3 text_12">体动次数</text>
						      <view class="flex-row items-center space-x-30">
						        <view class="flex-row items-baseline shrink-0 space-x-6">
						          <text class="font_5">{{ sleepReportFrom.report_content.move_count.value }}</text>
						          <text class="font_6">次</text>
						        </view>
						      </view>
						    </view>

							<view class="report_breath_chart">
								<view class="echarts-wrap">
								  <mpvue-echarts class="ec-canvas" canvasId="canvasChart-2" ref="refChart-2" @onInit="onInit1"></mpvue-echarts>
								</view>
							</view>
						  </view>
					  </view>
					</view>

				</view>

				<view class="flex-col report-charts">
				  <view class="flex-col justify-start flex-auto group">
				    <view class="flex-col justify-start group_3">
				      <view class="flex-col group_8 space-y-10">

						<view class="flex-col justify-start report_breath">
							<view class="flex-col justify-start">
							  <view class="flex-row items-center group_11 space-x-10 pos_33">
							    <image
							      class="image_8"
								  src="../../static/report/reportIconBeat.png"
							    />
							    <text class="font_3">心脏系统</text>
							    <image
							      class="image_11"
							      src="../../static/report/reportIconWhy.png"
							    />
							  </view>
							</view>

							<view class="flex-col pos_34 report_heart">
							    <view class="flex-col group_15">
							      <view class="flex-row justify-between group_2">
							        <text class="font_3 text_12">平均心率</text>
							        <view class="flex-row items-center space-x-30">
							          <view class="flex-row items-baseline shrink-0 space-x-6">
							            <text class="font_5">{{ sleepReportFrom.report_content.avg_rh.value }}</text>
							            <text class="font_6">次/分</text>
							          </view>
							        </view>
							      </view>
							    </view>
								<view class="report_breath_chart">
									<view class="echarts-wrap">
									  <mpvue-echarts class="ec-canvas" canvasId="canvasChart-3" ref="refChart-3" @onInit="onInit1"></mpvue-echarts>
									</view>
								</view>
							</view>
						</view>


				        <view class="flex-col justify-start report_breath">
				          <view class="flex-col justify-start">
				            <view class="flex-row justify-center items-center group_11 space-x-10 pos_33">
				              <image
				                class="image_8"
								src="../../static/report/reportIconBreath.png"
				              />
				              <text class="font_3">呼吸系统</text>
				              <image
				                class="image_11"
				                src="../../static/report/reportIconWhy.png"
				              />
				            </view>
				          </view>
				          <view class="flex-col pos_34">
				              <view class="flex-col group_15">
				                <view class="flex-row justify-between group_2">
				                  <text class="font_3 text_12">平均呼吸率</text>
				                  <view class="flex-row items-center space-x-30">
				                    <view class="flex-row items-baseline shrink-0 space-x-6">
				                      <text class="font_5">{{ sleepReportFrom.report_content.avg_hx.value }}</text>
				                      <text class="font_6">次/分</text>
				                    </view>
				                  </view>
				                </view>

								        <view class="report_breath_chart">
                          <view class="echarts-wrap">
                            <mpvue-echarts class="ec-canvas" canvasId="canvasChart-4" ref="refChart-4" @onInit="onInit1"></mpvue-echarts>
                          </view>
                        </view>
				              </view>
				              <view class="list-divider"></view>

							  <view class="flex-col group_15">
							    <view class="flex-row justify-between group_2">
							      <text class="font_3 text_12">打鼾</text>
							      <view class="flex-row items-center space-x-30">

							        <view class="flex-row items-baseline shrink-0 space-x-6">
							          <text class="font_5">{{ sleepReportFrom.report_content.snoring_count.value }}</text>
							          <text class="font_6">次</text>
							        </view>
							      </view>
							    </view>

                  <view class="report_breath_chart">
                    <view class="echarts-wrap">
                      <mpvue-echarts class="ec-canvas" canvasId="canvasChart-5" ref="refChart-5" @onInit="onInit1"></mpvue-echarts>
                    </view>
                  </view>
							  </view>
							  <view class="list-divider"></view>

							  <view class="flex-col group_15">
							    <view class="flex-row justify-between group_2">
							      <text class="font_3 text_12">呼吸暂停</text>
<!--							      <view class="flex-row items-center space-x-30">-->
<!--							        <view class="flex-row items-baseline shrink-0 space-x-6">-->
<!--							          <text class="font_5">{{ sleepReportFrom.report_content.snoring_count.value }}</text>-->
<!--							          <text class="font_6">次</text>-->
<!--							        </view>-->
<!--							      </view>-->
							    </view>

                  <view class="report_breath_chart">
                    <view class="echarts-wrap">
                      <mpvue-echarts class="ec-canvas" canvasId="canvasChart-6" ref="refChart-6" @onInit="onInit1"></mpvue-echarts>
                    </view>
                  </view>
							  </view>
				          </view>
				        </view>

<!--                <view class="flex-col justify-start relative report_heart">-->
<!--                  <view class="section_25"></view>-->
<!--                  <view class="flex-row justify-center items-center group_11 space-x-9 pos_21">-->
<!--                    <image-->
<!--                      class="image_8"-->
<!--                    src="../../static/report/reportIconMoon.png"-->
<!--                    />-->
<!--                    <text class="font_3">深浅睡眠</text>-->
<!--                    <image-->
<!--                      class="image_11"-->
<!--                    src="../../static/report/reportIconWhy.png"-->
<!--                    />-->
<!--                  </view>-->
<!--    -->
<!--                  <view class="flex-row justify-between report-sleep items-center">-->
<!--                  <view class="flex-col item-sleep">-->
<!--                    <text class="item-sleep-title">清醒</text>-->
<!--                    <text class="item-sleep-desc">2小时14分钟</text>-->
<!--                    </view>-->
<!--                    <view class="flex-col item-sleep">-->
<!--                      <text class="item-sleep-title">浅睡</text>-->
<!--                      <text class="item-sleep-desc">2小时14分钟</text>-->
<!--                    </view>-->
<!--                    <view class="flex-col item-sleep">-->
<!--                      <text class="item-sleep-title">深睡</text>-->
<!--                      <text class="item-sleep-desc">2小时14分钟</text>-->
<!--                    </view>-->
<!--                  </view>-->
<!--                </view>-->

				      </view>
				    </view>
				  </view>
			</view>


		</view>


		</view>
		<!-- <tab-bar currentPage="report" /> -->
    <view class="cu-modal bottom-modal" :class="calendarShow === true?'show':''" @tap="hideModal">
      <view class="cu-dialog">
        <uni-calendar
            @change="change"
            @monthSwitch="monthSwitch"
            :selected="selected"
            returnName="最新一次"
        ></uni-calendar>
      </view>
    </view>

    <view class="cu-modal" :class="bindShow?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view style="color: black" class="content">设备绑定</view>
          <view class="action" @tap="bindShow=false">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="">
          <form>
            <view class="cu-form-group solid-bottom">
              <view class="title">扫描二维码</view>
              <input type="text" v-model="bindSn" placeholder="输入或扫描IMEI" class="text-left"/>
              <text class="cuIcon-scan text-xxl text-green" style="font-size: 50rpx;"
                    @click="scan"></text>
            </view>
          </form>
        </view>
        <view class="cu-bar bg-white justify-end">
          <view class="action">
            <button class="cu-btn bg-green margin-left" @tap="bindDevice">确定</button>
          </view>
        </view>
      </view>
    </view>

<!--    <view class="cu-load load-modal" v-if="disabled">-->
<!--      <view class="cuIcon-emojifill text-orange"></view>-->
<!--      <view class="gray-text">正在获取</view>-->
<!--    </view>-->
	</view>
</template>

<script>

  import echarts from '@/static/echarts.min.js'
  import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue'
  import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
  import Storage from '@/utils/storage'
  import * as Foundation from '@/ui-utils/Foundation'
  import * as API_SLEEP_REPORT from '@/api/sleep_report'
  import * as API_deviceMemberBind from '@/api/device_member_bind'

	export default {
    components: {
      uniCalendar,mpvueEcharts
    },
		data() {
			return {
				isDeviceAdded: false,
        todayStr: Foundation.unixToDate(parseInt(new Date() / 1000), "yyyy-MM-dd"),
        selectDay: '',
        selectYearMonth: {
          year: Foundation.unixToDate(parseInt(new Date() / 1000), "yyyy"),
          month: Foundation.unixToDate(parseInt(new Date() / 1000), "M")
        },
        calendarShow: false,
        selected: [
          {
            // 打点日期
            "date": Foundation.unixToDate(parseInt(new Date() / 1000), "yyyy-MM-dd")
          }
        ],
        index: 0,
        todayTimeList: [],
        sleepReportFrom: {
          total_duration: 0,
          inbed_duration: 0,
          deep_duration: 0,
          rs_duration: 0
        },
        sleepReportList: [],
        chartObj1: null, // 离床次数图表
        chartObj2: null, // 体动次数图表
        myData1: [], // 离床次数数据
        myData2: [], // 体动次数数据
        params: {
          unionId: '',
          reportTime: -1
        },
        disabled: true,
        bindShow: false,
        bindSn: '',
        memberId: '',
        userInfo: null,
        errCount: 0
			}
		},
    // mounted() {
    //   this.memberId = 50289
    //   this.params.unionId = '6291d3bde21b840008ae7842' // 先写死
    //   this.getNewSleepReport()
    // },
    onShow() {
      this.memberId = Storage.getItem('uid')
      if (this.memberId) {
        if (!this.isDeviceAdded) {
          this.user = Storage.getItem('userInfo')
          this.params.unionId = this.user.union_id
          console.log('user===', this.user, this.user.union_id)
          this.getNewSleepReport()
        } else {
          if (Storage.getItem('refreshSleepReport')) {
            Storage.removeItem('refreshSleepReport')
            this.getNewSleepReport()
          }
        }
      } else {
        this.isDeviceAdded = false
      }
    },
    methods: {
		handleMonthClick() {
			uni.navigateTo({
				url: '/pages/monthReport/monthReport'
			})	
		},
		handleWeekClick() {
			uni.navigateTo({
				url: '/pages/weekReport/weekReport'
			})
		},
      // 获取睡眠报告
      getNewSleepReport() {
        const _this = this
        this.todayTimeList = []
        API_SLEEP_REPORT.getNewListByUnionId(this.params).then(res => {
          _this.disabled = false
          console.log(res)
          if (res.length > 0) {
            this.isDeviceAdded = true
            _this.sleepReportFrom = Object.assign({}, res[0])
            _this.sleepReportFrom.report_content = JSON.parse(_this.sleepReportFrom.report_content)
            console.log(_this.sleepReportFrom)
            _this.sleepReportList = res
            res.forEach(item => {
              _this.todayTimeList.push(item.gobed_time + '~' + item.outbed_time)
            })
            console.log('this.todayTimeList==', this.todayTimeList)
            _this.selectDay = Foundation.unixToDate(_this.sleepReportFrom.report_time, "yyyy-MM-dd")
            let str = _this.selectDay.split("-")
            _this.selectYearMonth.year = str[0]
            _this.selectYearMonth.month = str[1]
            console.log('this.selectYearMonth===', _this.selectYearMonth)
            if (_this.params.reportTime === -1) {
              _this.getDaysTag()
            }
            _this.qualifiedCount(_this.sleepReportFrom.report_content)
            _this.initAllChar(_this.sleepReportFrom)
          } else {
            this.isDeviceAdded = false
          }
        })
      },
      // 选中日历
      change(e) {
        console.log('change===', e)
        const date = this.selected.find(item=> item.date === e.extraInfo.date)
        if (date) {
          this.params.reportTime = date.report_time
          this.selectDay = e.fulldate
          this.calendarShow = false
          this.getNewSleepReport()
        } else {
          if (this.todayStr === e.fulldate && this.selectYearMonth.month !== e.month) {
            this.params.reportTime = -1
            this.calendarShow = false
            this.getNewSleepReport()
          } else {
            uni.showToast({
              title: e.fulldate + '无睡眠报告',
              icon: 'none'
            })
          }
        }
        // this.selected[0].date = e.fulldate

      },
      // 月份切换
      monthSwitch(e) {
        console.log('monthSwitch===', e)
        //{year: 2020, month: 5}
        this.selectYearMonth = e
        this.getDaysTag()
      },
      // 获取日期点
      getDaysTag() {
        this.selectYearMonth.unionId = this.params.unionId
        API_SLEEP_REPORT.getSleepReportDaysTag(this.selectYearMonth).then(res => {
          this.selected = []
          res.forEach(p => {
            this.selected.push({
              date: this.selectYearMonth.year + '-' + this.selectYearMonth.month + '-' + p.flog_time,
              report_time: p.report_time
            })
          })
        })
      },
      // 时间选择
      PickerChange(e) {
        this.index = e.detail.value
        this.sleepReportFrom = Object.assign({}, this.sleepReportList[this.index])
        this.sleepReportFrom.report_content = JSON.parse(this.sleepReportFrom.report_content)
        this.qualifiedCount(this.sleepReportFrom.report_content)
        this.initAllChar(this.sleepReportFrom)
      },
      qualifiedCount(data) {
        let count = 0
        if (data.avg_hx.state === 1) {
          count ++
        } else if (data.sleep_eff.state === 1) {
          count ++
        } else if (data.avg_rh.state === 1) {
          count ++
        } else if (data.move_count.state === 1) {
          count ++
        } else if (data.outbed_count.state === 1) {
          count ++
        } else if (data.snoring_count.state === 1) {
          count ++
        }
        this.errCount = count
      },
      initAllChar(data) {
        const _this = this
        setTimeout(() => {
          _this.nowChart("refChart-1", 1, data.report_content.dt_arr, data.report_content.outbed_arr)
          _this.nowChart("refChart-2", 2, data.report_content.dt_arr, data.report_content.move_arr)
          _this.nowChart("refChart-3", 3, data.report_content.dt_arr, data.report_content.rh_arr)
          _this.nowChart("refChart-4", 4, data.report_content.dt_arr, data.report_content.hx_arr)
          _this.nowChart("refChart-5", 0, data.report_content.dt_arr, data.report_content.snoring_arr)
          _this.nowChart("refChart-6", 6, data.report_content.dt_arr, data.report_content.hxstop_arr)
        }, 800)
      },
      // 将分转化为时分
      formateSeconds(endTime) {
        let secondTime = endTime//将传入的秒的值转化为Number
        let h = 0// 初始化小时
        if (secondTime > 60) {//如果秒数大于60，将秒数转换成整数
          h = parseInt(secondTime / 60)//获取小时，获取分钟除以60，得到整数小时
          secondTime = parseInt(secondTime % 60) //获取小时后取佘的分，获取分钟除以60取佘的分
          return h + '小时' + secondTime + '分钟'
        } else {
          return secondTime + '分钟'
        }
      },
      onInit1(e) {
        this.chartObj = e
      },
      // 组装图表
      nowChart(refChar, type, xData, yData) {
        this.onInit1(this.chartObj)
        let canvas = this.$refs[refChar].canvas
        echarts.setCanvasCreator(() => canvas)
        let myChart = echarts.init(canvas, 'halloween', {
          width: this.chartObj.width + 10,
          height: this.chartObj.height - 10
        })
        let options = Object.assign(this.getOptions(xData, yData), {})
        if (type <=2) {
          options.yAxis = this.getOptionsY1(type)
        } else {
          options.yAxis = this.getOptionsY2()
        }
        myChart.setOption(options)
      },
      getOptions(xData, yData) {
        return {
          visualMap: [
            {
              show: false,
              type: 'continuous',
              seriesIndex: 0,
              min: 0,
              max: 300,
            },
          ],
          color: '#FFFFFF',
          title: {
            left: 'left',
            // text: title,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              animation: false,
            },
          },
          grid: {
            top: '15%',
            bottom: '10%',
          },
          xAxis: {
            type: 'category',
            boundaryGap: [0, '100%'],
            // show: false, // 不显示x轴
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle:{
                color:'#FFFFFF',
                width:1, //x轴线的宽度
              }
            },
            triggerEvent: true,
            data: xData,
          },
          yAxis: {},
          series: [
            {
              type: 'line',
              lineStyle: {
                width: 0.8
              },
              showSymbol: false,
              hoverAnimation: false,
              data: yData,
            },
          ]
        }
      },
      getOptionsY1(type) {
        return {
          type: 'value',
          // boundaryGap: [0, '100%'],
          min: 0,
          max: 1, // dataMax取数据在该轴上的最大值作为最大刻度
          minInterval: 1,
          splitLine: {
            show: false, // 是否显示分隔线
          },
          axisLine: {
            show: true, // 是否显示坐标轴轴线
            lineStyle:{
              color:'#FFFFFF',
              width:1, //x轴线的宽度
            }
          },
          // axisLine: {
          //   show: false // 是否显示坐标轴轴线
          // },
          axisLabel: {
            formatter: function (value, index) {
              switch (type) {
                case 0:
                  return value === 0 ? '睡眠' : '打鼾'
                case 1:
                  return value === 0 ? '离床' : '在床'
                case 2:
                  return value === 0 ? '睡眠' : '体动'
                default:
                  return value
              }
            }
          }
        }
      },
      getOptionsY2() {
        return {
          type: 'value',
          boundaryGap: [0, '100%'],
          min: 0,
          max: 'dataMax', // 取数据在该轴上的最大值作为最大刻度
          splitLine: {
            show: false, // 是否显示分隔线
          },
          axisLine: {
            show: false, // 是否显示坐标轴轴线
            lineStyle:{
              color:'#FFFFFF'
            }
          }
        }
      },
      // 扫描条码
      scan() {
        let _this = this
        uni.scanCode({
          success: function (res) {
            console.log(res, res.result.length)
            if (res.result.length > 20) {
              if (res.scanType === 'QR_CODE') {
                const urlStr = res.result
                const qs = Foundation.getQueryObject(urlStr)
                if (qs.mac) {
                  _this.bindSn = qs.mac
                } else {
                  uni.showToast({
                    title: '请扫码正确的睡眠床垫二维码',
                    icon: 'none'
                  });
                }
              } else {
                _this.bindSn = res.result
              }
            } else {
              _this.bindSn = res.result
            }
          },
          fail: (err) => {
            console.log(err)
            // #ifdef MP
            uni.getSetting({
              success: (res) => {
                let authStatus = res.authSetting['scope.camera'];
                if (!authStatus) {
                  uni.showModal({
                    title: '授权失败',
                    content: 'app需要使用您的相机，请在设置界面打开相关权限',
                    success: (res) => {
                      if (res.confirm) {
                        uni.openSetting()
                      }
                    }
                  })
                }
              }
            })
            // #endif
          }
        })
      },
      bindDevice() {
        const params = {
          imei: this.bindSn,
          memberId: this.memberId,
          dtype: '睡眠床垫'
        }
        this.bindShow = false
        let _this = this
        API_deviceMemberBind.bindDeviceByDtype(params).then(res => {
          if (res.success) {
            _this.bindSn = ''
            uni.showToast({
              title: '绑定成功',
            })
            _this.API_getDeviceList()
          } else {
            uni.showToast({
              title: res.message,
              icon: 'none'
            })
          }
        })
      },
      API_getDeviceList() {
        const _this = this
        API_deviceMemberBind.getDeviceByDtypeAndMemberId({dtype: '睡眠床垫', memberId: this.memberId}).then(res => {
          if (res.length === 0) {
            Storage.removeItem("nowChangeDevice")
            Storage.removeItem("myBindDevices")
          } else {
            Storage.setItem("nowChangeDevice", res[0].imei)
            Storage.setItem("myBindDevices", res)
          }
        })
      },
      addBindDevice() {
        if (this.memberId) {
          this.bindShow = 'show'
        } else {
          uni.showModal({
            title: '提示',
            content: "您还没有登录，是否前往登录?",
            confirmText: "确定",
            showCancel: true,
            success: function(res) {
              if (res.confirm) {
                uni.reLaunch({
                  url:'/pages/auth/auth'
                })
              }
            }
          })
        }
      },
      hideModal(e) {
        this.calendarShow = null
      }
    }
	}
</script>

<style lang="scss">
	.btns-report {
		color: #ffffff;
		position: fixed;
		top: 9rem;
		font-size: 15px;
		z-index: 10000;
	}
	.btn-week-report, .btn-month-report {
		background-color: #7e5a9d4d;
		-webkit-backdrop-filter: blur(0.31rem);
		backdrop-filter: blur(0.31rem);
		padding: 0.3rem 1rem;
		border-radius: 0 1rem 1rem 0;
		margin-bottom: 0.5rem;
	}
	.report_heart {
	  .section_25 {
	    opacity: 0.8;
	  //background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
	    border-radius: 0.5rem;
	    height: 11.19rem;
	  }
	  .space-x-9 {
	    & > view:not(:first-child),
	    & > text:not(:first-child),
	    & > image:not(:first-child) {
	      margin-left: 0.56rem;
	    }
	  }
	  .pos_21 {
	    position: absolute;
	    left: 0.63rem;
	    top: 0.63rem;
	  }
	  .group_12 {
	    width: 17.88rem;
	    .text_11 {
	      color: #6b6b6b;
	    }
	    .space-x-48 {
	      & > view:not(:first-child),
	      & > text:not(:first-child),
	      & > image:not(:first-child) {
	        margin-left: 3rem;
	      }
	    }
	  }
	  .pos_22 {
	    position: absolute;
	    right: 0.59rem;
	    top: 3.66rem;
	  }
	}
	.report-easy {
		margin: 1rem 1.25rem 0 1.25rem;
	}
	.image_8 {
	  border-radius: 50%;
	  width: 2rem;
	  height: 2rem;
	}
	.font_3 {
	  font-size: 1rem;
	  font-family: PingFangSC;
	  line-height: 0.94rem;
	  color: #ffffff;
	}
	.image_11 {
	  width: 1rem;
	  height: 1rem;
	}
			.report_breath {
			  padding: 0.63rem;
			  background-image: linear-gradient(180deg, #341a4b 0%, #167df2 100%);
			  border-radius: 0.5rem;

			  .report_breath_chart {
				position: relative;
				height: 7rem;
			  }
	          .pos_33 {

	          }
	          .pos_34 {

	            .group_15 {
	              padding: 1rem 0;
				  .font_10 {
					  font-size: 0.88rem;
					  font-family: PingFangSC;
					  line-height: 0.81rem;
					  color: #ffffff;
				  }
				  .font_5 {
					    font-size: 1.13rem;
					    font-family: PingFangSC;
					    line-height: 0.81rem;
						color: #ffffff;
				  }
				  .font_6 {
				    font-size: 0.75rem;
				    font-family: PingFangSC;
				    line-height: 0.69rem;
				    color: #ffffff;
				  }
	              .group_2 {
	                padding-left: 1.25rem;
	                .text_12 {
	                  color: #ffffff;
	                }
	                .space-x-30 {
	                  & > view:not(:first-child),
	                  & > text:not(:first-child),
	                  & > image:not(:first-child) {
	                    margin-left: 1.88rem;
	                  }
	                }
	              }
	              .group_16 {
	                margin-top: 0.63rem;
	                .section_32 {
	                  width: 2.28rem;
	                  height: 5.53rem;
	                  border: solid 0.031rem #4a315e;
	                }
	                .section_34 {
	                  width: 2.22rem;
	                  height: 5.53rem;
	                  border: solid 0.031rem #4a315e;
	                }
	                .view_7 {
	                  margin-left: 2.13rem;
	                }
	                .section_36 {
	                  margin-left: 2.31rem;
	                  width: 2.34rem;
	                  height: 5.53rem;
	                  border: solid 0.031rem #4a315e;
	                }
	                .view_8 {
	                  margin-left: 2.13rem;
	                }
	                .pos_36 {
	                  position: absolute;
	                  left: 2.25rem;
	                  top: 0;
	                }
	                .pos_38 {
	                  position: absolute;
	                  right: 4.47rem;
	                  top: 0;
	                }
	                .section_35 {
	                  width: 2.41rem;
	                  height: 5.53rem;
	                  border: solid 0.031rem #4a315e;
	                }
	                .pos_37 {
	                  position: absolute;
	                  left: 6.63rem;
	                  top: 0;
	                }
	                .pos_39 {
	                  position: absolute;
	                  right: 0;
	                  top: 0;
	                }
	                .section_33 {
	                  width: 17.97rem;
	                  height: 1.41rem;
	                  border: solid 0.031rem #4a315e;
	                }
	                .pos_41 {
	                  position: absolute;
	                  left: 0;
	                  right: 0;
	                  top: 2.75rem;
	                }
	                .pos_40 {
	                  position: absolute;
	                  left: 0;
	                  right: 0;
	                  top: 1.38rem;
	                }
	                .pos_35 {
	                  position: absolute;
	                  left: 0;
	                  right: 0;
	                  top: 0;
	                }

	                .pos_43 {
	                  position: absolute;
	                  left: 0;
	                  right: 0;
	                  top: 2.88rem;
	                }
	                .pos_42 {
	                  position: absolute;
	                  left: 0;
	                  right: 0.13rem;
	                  top: 50%;
	                  transform: translateY(-50%);
	                }
	              }
	              .group_17 {
	                padding: 0.38rem 0 1rem 0.5rem;
	              }
	            }
	            .list-divider {
	              margin: 0 0.63rem;
	              background-color: #523c65;
	              height: 0.063rem;
	            }
	          }
	        }
.echarts-wrap {
  width: 100%;
  height: 7rem;
  margin-bottom: 0.3rem;
  position: absolute;
  bottom: 0
}
	.report-sleep {
		position: absolute;
		top: 3rem;
		width: 100%;
		padding: 0.3rem;

		.item-sleep {

			.item-sleep-title {
				font-size: 14px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 14px;
				color: rgba(155, 151, 188, 1);
				text-align: left;
				vertical-align: top;
			}
			.item-sleep-desc {
				font-size: 12px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 12px;
				color: rgba(255, 255, 255, 1);
				text-align: left;
				vertical-align: top;
				margin-top: 5px;
			}
		}
	}
	.report-charts {
		margin-top: 0.5rem;
	}
	.bottom-btns {
		position: absolute;
		bottom: 10px;

		.bottom-btn {
			font-size: 16px;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 30px;
			color: #ffffff;
			text-align: center;
			width: 98px;
			height: 30px;
			border-radius: 14.5px;
			margin: 10px;
		}
		.btn_1 {
			background: linear-gradient(90deg, rgba(44, 37, 247, 0.6) 0%, rgba(6, 21, 153, 1) 100%);
		}
		.btn_2 {
			background: linear-gradient(90deg, rgba(5, 96, 232, 1) 0%, rgba(100, 158, 245, 1) 100%);
		}
	}
	.report-container {
		background-color: #000000;
		padding-bottom: 50px;
		height: 100%;

		.image-wrapper_2 {
			background: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/560AFD2D700A40F19029F9FA2FD4612E.png");
			background-repeat: no-repeat;
			background-size: cover;
			height: 100%;
			width: 100%;
		}
	}
	.report-data-sum {
		margin: 1rem;
		padding-top: 2.5rem;
		color: #ffffff;

		.icon-data-sum {
			width: 40px;
			height: 40px;
		}
		.text-data-sum {
			margin-left: 6px;
			text-align: left;

			.title-data-sum {
				width: 100%;
				font-size: 12px;
				line-height: 12px;
				font-weight: 400;
				margin-bottom: 2px;
			}
			.font_4 {
				font-size: 24px;
				line-height: 24px;
				height: 24px;
			}
			.font_5 {
				font-size: 14px;
				line-height: 24px;
			}
		}
	}

	.page {
	  background-color: #000000;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100%;

	  .group {
	    overflow-y: auto;
	    .group_3 {
	      padding: 0rem 0 0.25rem;
	      .group_8 {
	        padding: 0 1.25rem;
	        .report_leave_bed {
	          .section_10 {
	            opacity: 0.8;
              background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
	            border-radius: 0.5rem;
	            height: 9.91rem;
	          }
	          .pos_2 {
	            position: absolute;
	            left: 0.63rem;
	            right: 0.53rem;
	            top: 0.63rem;
	            .space-x-12 {
	              & > view:not(:first-child),
	              & > text:not(:first-child),
	              & > image:not(:first-child) {
	                margin-left: 0.75rem;
	              }
	            }
	          }
	          .pos_3 {
	            position: absolute;
	            left: 0.66rem;
	            right: 0.63rem;
	            top: 3.56rem;
	          }
	          .pos_10 {
	            position: absolute;
	            right: 0.66rem;
	            top: 6.69rem;
	          }
	        }
	        .report_move {
	          .section_20 {
	            opacity: 0.8;
              background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
	            border-radius: 0.5rem;
              height: 9.91rem;
	          }
	          .pos_11 {
	            position: absolute;
	            left: 0.63rem;
	            right: 0.53rem;
	            top: 0.63rem;
	          }
	          .space-x-2 {
	            & > view:not(:first-child),
	            & > text:not(:first-child),
	            & > image:not(:first-child) {
	              margin-left: 0.13rem;
	            }
	            .group_10 {
	              width: 1.34rem;
	            }
	            .section_21 {
	              width: 2.28rem;
	              height: 4.16rem;
	              border: solid 0.031rem #4a315e;
	            }
	            .section_23 {
	              width: 2.22rem;
	              height: 4.16rem;
	              border: solid 0.031rem #4a315e;
	            }
	            .view_4 {
	              margin-left: 2.13rem;
	            }
	            .section_24 {
	              width: 2.34rem;
	              height: 4.16rem;
	              border: solid 0.031rem #4a315e;
	            }
	            .view_5 {
	              margin-left: 2.25rem;
	            }
	            .view_6 {
	              margin-left: 2.13rem;
	            }
	            .pos_14 {
	              position: absolute;
	              left: 2.25rem;
	              top: 0;
	            }
	            .pos_16 {
	              position: absolute;
	              right: 4.44rem;
	              top: 0;
	            }
	            .pos_15 {
	              position: absolute;
	              left: 6.63rem;
	              top: 0;
	            }
	            .pos_17 {
	              position: absolute;
	              right: 0;
	              top: 0;
	            }
	            .pos_18 {
	              position: absolute;
	              left: 0;
	              right: 0;
	              top: 50%;
	              transform: translateY(-50%);
	            }
	            .pos_13 {
	              position: absolute;
	              left: 0;
	              right: 0;
	              top: 0;
	            }
	            .image_10 {
	              width: 17.88rem;
	              height: 2.75rem;
	            }
	            .pos_19 {
	              position: absolute;
	              left: 0;
	              right: 0;
	              bottom: 0;
	            }
	          }
	          .pos_12 {
	            position: absolute;
	            left: 0.91rem;
	            right: 0.63rem;
	            top: 3.56rem;
	          }
	          .pos_20 {
	            position: absolute;
	            right: 0.66rem;
	            top: 8.06rem;
	          }
	        }

	        .space-x-6 {
	          & > view:not(:first-child),
	          & > text:not(:first-child),
	          & > image:not(:first-child) {
	            margin-left: 0.38rem;
	          }
	          .font_5 {
	            font-size: 1.13rem;
	            font-family: PingFangSC;
	            line-height: 0.81rem;
	            color: #ffffff;
	          }
	        }
	        .space-y-12 {
	          & > view:not(:first-child),
	          & > text:not(:first-child),
	          & > image:not(:first-child) {
	            margin-top: 0.75rem;
	          }
	        }
	        .font_7 {
	          font-size: 0.75rem;
	          font-family: PingFangSC;
	          line-height: 0.69rem;
	          color: #9b97bc;
	        }
	        .group_9 {
	          width: 18.63rem;
	          .font_8 {
	            font-size: 0.56rem;
	            font-family: PingFangSC;
	            line-height: 0.41rem;
	            color: #a5b6ca;
	          }
	        }

	        .space-x-4 {
	          & > view:not(:first-child),
	          & > text:not(:first-child),
	          & > image:not(:first-child) {
	            margin-left: 0.25rem;
	          }
	          .section_11 {
	            width: 2.28rem;
	            height: 2.78rem;
	            border: solid 0.031rem #4a315e;
	          }
	          .section_14 {
	            width: 2.16rem;
	            height: 2.78rem;
	            border: solid 0.031rem #4a315e;
	          }
	          .view_2 {
	            margin-left: 2.13rem;
	          }
	          .image_9 {
	            margin-left: 2.38rem;
	            width: 2.34rem;
	            height: 2.78rem;
	          }
	          .section_13 {
	            width: 2.22rem;
	            height: 2.78rem;
	            border: solid 0.031rem #4a315e;
	          }
	          .view_3 {
	            margin-left: 2.06rem;
	          }
	          .pos_5 {
	            position: absolute;
	            left: 2.25rem;
	            top: 0;
	          }
	          .pos_7 {
	            position: absolute;
	            right: 4.44rem;
	            top: 0;
	          }
	          .section_15 {
	            width: 2.47rem;
	            height: 2.78rem;
	            border: solid 0.031rem #4a315e;
	          }
	          .pos_6 {
	            position: absolute;
	            left: 6.56rem;
	            top: 0;
	          }
	          .pos_8 {
	            position: absolute;
	            right: 0;
	            top: 0;
	          }
	          .section_19 {
	            background-color: #44d7b6;
	            width: 0.5rem;
	            height: 0.94rem;
	          }
	          .pos_9 {
	            position: absolute;
	            left: 6.47rem;
	            top: 1.59rem;
	          }
	          .section_12 {
	            padding: 0.25rem 0;
	            border: solid 0.031rem #4a315e;
	            .section_16 {
	              background-color: #73e182;
	              width: 6.44rem;
	              height: 0.94rem;
	            }
	            .section_17 {
	              background-color: #73e182;
	              width: 3.94rem;
	              height: 0.94rem;
	            }
	            .section_18 {
	              background-color: #73e182;
	              width: 6.69rem;
	              height: 0.94rem;
	            }
	          }
	          .pos_4 {
	            position: absolute;
	            left: 0;
	            right: 0;
	            top: 0;
	          }
	          .section_26 {
	            width: 2.59rem;
	            height: 5.53rem;
	            border: solid 0.031rem #4a315e;
	          }
	          .section_27 {
	            width: 2.53rem;
	            height: 5.53rem;
	            border: solid 0.031rem #4a315e;
	          }
	          .section_29 {
	            width: 2.66rem;
	            height: 5.53rem;
	            border: solid 0.031rem #4a315e;
	          }
	          .pos_25 {
	            position: absolute;
	            left: 2.56rem;
	            top: 0;
	          }
	          .pos_27 {
	            position: absolute;
	            right: 2.53rem;
	            top: 0;
	          }
	          .section_28 {
	            width: 2.72rem;
	            height: 5.53rem;
	            border: solid 0.031rem #4a315e;
	          }
	          .pos_26 {
	            position: absolute;
	            left: 50%;
	            top: 0;
	            transform: translateX(-50%);
	          }
	          .pos_29 {
	            position: absolute;
	            left: 0;
	            right: 0;
	            top: 2.75rem;
	          }
	          .pos_28 {
	            position: absolute;
	            left: 0;
	            right: 0;
	            top: 1.38rem;
	          }
	          .pos_24 {
	            position: absolute;
	            left: 0;
	            right: 0;
	            top: 0;
	          }

	          .pos_31 {
	            position: absolute;
	            left: 0;
	            right: 0;
	            top: 2.88rem;
	          }
	          .pos_30 {
	            position: absolute;
	            left: 0;
	            right: 0;
	            top: 50%;
	            transform: translateY(-50%);
	          }
	        }
	        .section_22 {
	          width: 17.91rem;
	          height: 1.41rem;
	          border: solid 0.031rem #4a315e;
	        }

	        .group_11 {
	          width: 8.25rem;
	        }
	        .space-x-10 {
	          & > view:not(:first-child),
	          & > text:not(:first-child),
	          & > image:not(:first-child) {
	            margin-left: 0.63rem;
	          }
	        }
	        .font_10 {
	          font-size: 0.88rem;
	          font-family: PingFangSC;
	          line-height: 0.81rem;
	          color: #ffffff;
	        }
	        .group_13 {
	          width: 0.97rem;
	          .font_11 {
	            font-size: 0.75rem;
	            font-family: PingFangSC;
	            line-height: 0.56rem;
	            color: #9b97bc;
	          }
	        }
	        .space-y-14 {
	          & > view:not(:first-child),
	          & > text:not(:first-child),
	          & > image:not(:first-child) {
	            margin-top: 0.88rem;
	          }
	        }
	        .divider {
	          background-image: repeating-linear-gradient(
	            90deg,
	            #e02020,
	            #e02020 0.35%,
	            transparent 0.35%,
	            transparent 1.047%
	          );
	          background-position: -0.031rem 0px;
	          height: 0.063rem;
	        }
	        .font_9 {
	          font-size: 0.56rem;
	          font-family: PingFangSC;
	          line-height: 0.41rem;
	          color: #9b97bc;
	        }
	      }
	      .space-y-10 {
	        & > view:not(:first-child),
	        & > text:not(:first-child),
	        & > image:not(:first-child) {
	          margin-top: 0.63rem;
	        }
	      }
	    }
	  }
	  .tab-bar {
	    padding: 0.25rem 3.38rem;
	    background-color: #167df2;
	    backdrop-filter: blur(0.63rem);
	    .group_26 {
	      height: 2.47rem;
	      .text_17 {
	        font-size: 0.69rem;
	        line-height: 0.63rem;
	      }
	    }
	    .space-y-2 {
	      & > view:not(:first-child),
	      & > text:not(:first-child),
	      & > image:not(:first-child) {
	        margin-top: 0.13rem;
	      }
	    }
	    .group_27 {
	      height: 2.5rem;
	      .text_18 {
	        font-size: 0.69rem;
	        line-height: 0.63rem;
	      }
	    }
	    .image_15 {
	      width: 1.69rem;
	      height: 1.69rem;
	    }
	    .font_12 {
	      font-size: 0.75rem;
	      font-family: PingFangSC;
	      line-height: 0.69rem;
	      color: #ffffffb3;
	    }
	  }
	  .font_6 {
	    font-size: 0.75rem;
	    font-family: PingFangSC;
	    line-height: 0.69rem;
	    color: #ffffff;
	  }
	}
	.page {
	  background-color: #000000;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100%;
	  margin-bottom: 1rem;

	  .report {
	    overflow-y: auto;

	    .report_header {

		  .report-header-img {
			  position: absolute;
			  top: -5rem;
			  left: 50%;
			  width: 22.5rem;
			  height: 28.5em;
			  margin-left: -11.25rem;
		  }
	      .report_score {
			padding-top: 1rem;
			z-index: 100;
	        .report_period {
				margin-left: 1.2rem;
	        }
	        .report_score_data {
				.section_5 {
				  padding: 0.38rem 0.88rem;
				  background-color: #7e5a9d4d;
				  border-radius: 1rem 0px 0px 1rem;
				  backdrop-filter: blur(0.31rem);
				  width: 5.25rem;
				  height: 2rem;
				  .image_6 {
				    width: 1.5rem;
				    height: 1.31rem;
				  }
				  .text_5 {
				    line-height: 0.72rem;
				  }
				}
	          .space-x-76-reverse {
	            & > view:not(:last-child),
	            & > text:not(:last-child),
	            & > image:not(:last-child) {
	              margin-right: 4.75rem;
	            }
	            .text_4 {
	              color: #ffffff;
	              font-size: 1.5rem;
	              font-family: PingFangSC;
	              line-height: 1.38rem;
	            }
	          }
	          .text_6 {
	            margin-top: 1rem;
	            //color: #ffffff;
	            font-size: 3.38rem;
	            font-family: PingFangSC;
	            line-height: 2.47rem;
	          }
	          .text_7 {
	            margin-top: 1.38rem;
	            line-height: 0.94rem;
	          }
	        }
	      }
	      .space-y-55 {
	        & > view:not(:first-child),
	        & > text:not(:first-child),
	        & > image:not(:first-child) {
	          margin-top: 3.44rem;
	        }
	      }
	    }
	    .report_analysis {
	      padding-top: 0.63rem;
		  z-index: 100;
	      .font_4 {
	        font-size: 1.13rem;
	        font-family: PingFangSC;
	        line-height: 0.81rem;
	        color: #ffffff;
	      }
	      .text_8 {
	        margin-left: 1.25rem;
	        line-height: 1.06rem;
	      }
		  .section_easy {
			margin: 0 1.25rem;
			padding: 0 0.88rem;
			height: 52px;
			opacity: 0.8;
			border-radius: 8px;
			background: linear-gradient(180deg, rgba(22, 125, 242, 1) 0%, rgba(52, 26, 75, 1) 100%);

			.image_7 {
				width: 32px;
				height: 32px;
			}
			.font_3 {
				font-size: 16px;
				color: #ffffff;
				font-weight: 400;
				margin-left: 9px;
			}
			.font_7 {
				color: rgba(255, 255, 255, 0.6);
				font-size: 16px;
				margin-right: 10px;
			}
			.font_4 {
				font-size: 18px;
				color: #ffffff;
				font-weight: 500;
			}
		  }
		  .section_efficiency {
			margin: 0 1.25rem;
		  	padding: 0 0.88rem;
		  	height: 52px;
		  	opacity: 0.8;
		  	border-radius: 8px;
		  	background: linear-gradient(180deg, rgba(22, 125, 242, 1) 0%, rgba(52, 26, 75, 1) 100%);

			.image_7 {
				width: 32px;
				height: 32px;
			}
			.font_3 {
				font-size: 16px;
				color: #ffffff;
				font-weight: 400;
				margin-left: 9px;
			}
			.font_4 {
				font-size: 18px;
				color: #ffffff;
				font-weight: 500;
			}
		  }
	      .report_analysis_data {
	        padding-top: 22.5rem;

	        .space-x-26 {
	          & > view:not(:first-child),
	          & > text:not(:first-child),
	          & > image:not(:first-child) {
	            margin-left: 1.63rem;
	          }
	          .text_10 {
	            line-height: 1.5rem;
	            width: 8.5rem;
	          }
	          .section_9 {
	            margin-top: 1.75rem;
	            padding: 1.19rem 0.5rem 0.5rem 0.81rem;
	            background-color: #1751e6cc;
	            border-radius: 0.5rem 0.5rem 0 0;
	            height: 2.63rem;
	          }
	          .space-x-34 {
	            & > view:not(:first-child),
	            & > text:not(:first-child),
	            & > image:not(:first-child) {
	              margin-left: 2.13rem;
	            }
	          }
	        }
	        .equal-division {
	          padding: 0 0.88rem;
	          .equal-division-item {
	            padding: 0.25rem 0.38rem 0;
	            flex: 1 1 10.81rem;
	            .section_6 {
	              padding: 0.63rem 0.63rem 0.75rem;
	              background-color: #1751e6cc;
	              border-radius: 0.5rem;
	              .text_9 {
	                margin-left: 1.5rem;
	              }
	              .space-x-12 {
	                & > view:not(:first-child),
	                & > text:not(:first-child),
	                & > image:not(:first-child) {
	                  margin-left: 0.75rem;
	                }
	              }
	            }
	            .view {
	              margin-top: 0.63rem;
	            }
	            .group_7 {
				  margin-top: 0.63rem;
	              padding: 1.25rem 0.63rem 2rem;
				  background: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/BC26FBFE91F4495EAE8E403C73DCFBA7.png");
				  background-repeat: no-repeat;
				  background-size: cover;
				  border-radius: 0.5rem;

				  .text_10 {
					  line-height: 1.4rem;
					  margin-top: 0.2rem;
				  }
	            }

	          }
	          .equal-division-item_2 {
	            padding: 0.25rem 0.38rem;
	            flex: 1 1 10.81rem;
	            .section_7 {
	              padding: 0.63rem 0.75rem 0.75rem;
	              background-color: #1751e6cc;
	              border-radius: 0.5rem;
	              .group_5 {
	                padding: 0 1.5rem;
	              }
	              .space-x-4 {
	                & > view:not(:first-child),
	                & > text:not(:first-child),
	                & > image:not(:first-child) {
	                  margin-left: 0.25rem;
	                }
	              }
	            }
	            .section_8 {
	              padding: 0.55rem 0.5rem 0.55rem 0.75rem;
	              background-color: #1751e6cc;
	              border-radius: 0.5rem;
	            }
	          }
	          .space-y-10 {
	            & > view:not(:first-child),
	            & > text:not(:first-child),
	            & > image:not(:first-child) {
	              margin-top: 0.63rem;
	            }
	          }
	          .space-y-12 {
	            & > view:not(:first-child),
	            & > text:not(:first-child),
	            & > image:not(:first-child) {
	              margin-top: 0.75rem;
	            }
	          }
	          .group_6 {
	            padding: 0 1.63rem;
	          }
	        }
	        .space-x-29 {
	          & > view:not(:first-child),
	          & > text:not(:first-child),
	          & > image:not(:first-child) {
	            margin-left: 0.1rem;
	          }
	        }
	        .pos {
	          position: absolute;
	          left: 0;
	          right: 0;
	          top: 0;
	        }
	        .space-x-6 {
	          & > view:not(:first-child),
	          & > text:not(:first-child),
	          & > image:not(:first-child) {
	            margin-left: 0.38rem;
	          }
	        }
	        .font_5 {
	          font-size: 0.75rem;
	          font-family: PingFangSC;
	          line-height: 0.69rem;
	          color: #ffffff;
	        }
	      }
	    }
	    .space-y-4 {
	      & > view:not(:first-child),
	      & > text:not(:first-child),
	      & > image:not(:first-child) {
	        margin-top: 0.5rem;
	      }
	    }
	    .font_2 {
	      font-size: 1rem;
	      font-family: PingFangSC;
	      line-height: 0.69rem;
	      color: #ffffff;
	    }
	    .space-x-8 {
	      & > view:not(:first-child),
	      & > text:not(:first-child),
	      & > image:not(:first-child) {
	        margin-left: 0.5rem;
	      }
	    }
	    .space-x-10 {
	      & > view:not(:first-child),
	      & > text:not(:first-child),
	      & > image:not(:first-child) {
	        margin-left: 0.63rem;
	      }
	      .section_3 {
	        padding: 0.5rem 0.63rem;
	        background-color: #7e5a9d4d;
	        border-radius: 1rem;
	        backdrop-filter: blur(0.31rem);
	        height: 2rem;
	        .space-x-24 {
	          & > view:not(:first-child),
	          & > text:not(:first-child),
	          & > image:not(:first-child) {
	            margin-left: 1.5rem;
	          }
	          .text_2 {
	            line-height: 0.72rem;
	          }
	        }
	        .image_4 {
	          width: 0.63rem;
	          height: 0.94rem;
	        }
	      }
	      .section_4 {
	        margin-right: 1.25rem;
	        padding: 0.75rem 0.63rem 0.5rem;
	        background-color: #7e5a9d4d;
	        border-radius: 1rem;
	        backdrop-filter: blur(0.31rem);
	        height: 2rem;
	        .text_3 {
	          line-height: 0.72rem;
	        }
	        .image_5 {
	          margin-right: 0.25rem;
	          width: 0.63rem;
	          height: 0.38rem;
	        }
	      }
	    }
	    .image_7 {
	      width: 0.88rem;
	      height: 0.88rem;
	    }
	    .font_3 {
	      font-size: 0.88rem;
	      font-family: PingFangSC;
	      line-height: 0.81rem;
	      color: #9b97bc;
	    }
	  }
	}
.page {
  background-color: #000000;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .image-wrapper_2 {
    padding-bottom: 0.38rem;
    overflow-y: auto;
    .header {
      padding: 1rem 0.88rem 0.75rem;
      background-color: #ffffff4d;
      .space-x-6-reverse {
        & > view:not(:last-child),
        & > text:not(:last-child),
        & > image:not(:last-child) {
          margin-right: 0.38rem;
        }
        .image {
          width: 1.06rem;
          height: 0.69rem;
        }
        .image_2 {
          width: 0.94rem;
          height: 0.69rem;
        }
        .image_3 {
          width: 1.5rem;
          height: 0.72rem;
        }
      }
      .text {
        margin-top: 2rem;
        color: #ffffff;
        font-size: 1.16rem;
        font-family: PingFangSC;
        line-height: 1.06rem;
      }
      .section {
        padding: 0.38rem 0.75rem;
        background-color: #ffffff99;
        border-radius: 1rem;
        width: 5.44rem;
        border: solid 0.031rem #00000014;
        .image-wrapper {
          width: 1.19rem;
          .image_5 {
            width: 1.19rem;
            height: 0.44rem;
          }
          .image_4 {
            width: 1.13rem;
            height: 1.06rem;
          }
        }
        .section_2 {
          background-color: #00000033;
          width: 0.063rem;
          height: 1.16rem;
        }
      }
      .space-x-11 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 0.69rem;
        }
      }
      .pos {
        position: absolute;
        right: 0.44rem;
        top: 3.06rem;
      }
    }
    .image_6 {
      width: 23.44rem;
      height: 41.69rem;
    }
  }
  .tab-bar {
    padding: 0.25rem 3.38rem;
    background-color: #167df2;
    backdrop-filter: blur(0.63rem);
    .space-y-2 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 0.13rem;
      }
      .image_7 {
        width: 1.69rem;
        height: 1.69rem;
      }
    }
    .font_1 {
      font-size: 0.69rem;
      font-family: PingFangSC;
      line-height: 0.63rem;
      color: #ffffffb3;
    }
    .text_2 {
      color: #cfcfcf;
    }
  }
}
@media screen and (max-width: 300px) {
	.report-header-img {
		top: -1.5rem;
	}
}
</style>