uni_mattress/sleep/pages/home/index.vue

<template>
	<view class="flex-col justify-start home-container">
		<view class="container-bg"></view>
		<cu-custom bgColor="#fff"><view slot="content" style="color: #FFFFFF">UU睡眠</view></cu-custom>

		<view class="flex-col home-module space-y-20">

			<!-- no device added -->
			<view v-if="!deviceAdded">
				<view class="flex-col items-start home-header space-y-10">
					<text class="home-header-title">欢迎回来！</text>
					<text class="font_3 text_3 home-header-subtitle">我是小U，您的健康智慧管家。</text>
				</view>

				<view class="flex-row items-center home_add_devive space-x-10" @click="addBindDevice">
				  <image
				    class="image_4"
					src="../../static/home/homeIconAdd.png"
				  />
				  <text class="text_5">添加设备</text>
				</view>

<!--				<view class="home-ad flex-col group_5 space-y-40">-->
<!--					<view class="flex-col home-header space-y-6">-->
<!--						<view class="flex-row items-center space-x-8">-->
<!--							<text class="font_4 text_8">UU AI智能睡眠监测仪</text>-->
<!--							<view class="flex-row items-center section_7">-->
<!--								<text class="font_5 text_9">去看看</text>-->
<!--								<image-->
<!--									class="shrink-0 image_9"-->
<!--									src="../../static/home/homeIconGO.png"-->
<!--								/>-->
<!--							</view>-->
<!--						</view>-->

<!--						<view class="flex-row items-center space-x-10">-->
<!--							<text class="font_5 text_3 text_10">AI时代，全家人的睡眠健康顾问</text>-->
<!--						</view>-->
<!--					</view>-->
<!--				</view>-->

				<view class="flex-col">
				  <view class="flex-col group_5">
					<view class="flex-col home_blank_heart">
				      <view class="flex-row items-center group_7 space-x-4">
				        <image
				          class="image_6"
				          src="../../static/home/homeIconHeart.png"
				        />
				        <text class="font_1 text_9">心率</text>
				      </view>
				      <view class="flex-row justify-end items-start">
				        <view class="section_5 view"></view>
				        <text class="font_3 text_10">--</text>
				      </view>
				      <view class="flex-col group_8">
				        <text class="self-start font_4 text_11">次/分</text>
				        <view class="shrink-0 self-end section_5"></view>
				      </view>
				    </view>

				    <view class="flex-col home_blank_breath">
				      <view class="flex-row items-center group_10 space-x-4">
				        <image
				          class="image_7"
				          src="../../static/home/homeIconBreath.png"
				        />
				        <text class="font_1 text_12">呼吸</text>
				      </view>
				      <view class="flex-row justify-end items-start">
				        <view class="section_5 view_2"></view>
				        <text class="font_3 text_13">--</text>
				      </view>
				      <view class="flex-col group_8">
				        <text class="self-start font_4 text_11">次/分</text>
				        <view class="shrink-0 self-end section_5"></view>
				      </view>
				    </view>

				  </view>

				  <view class="flex-row items-center home_blank_alert space-x-16">
				    <image
				      class="image_8"
				      src="../../static/home/homeIconGift.png"
				    />
				    <view class="flex-col items-start flex-auto space-y-4">
				      <text class="font_5">昨晚您的睡眠质量很好</text>
				      <text class="font_5">暂时没有预警信息</text>
				    </view>
				  </view>
				</view>
			</view>


			<!-- device added -->
			<view v-if="deviceAdded" class="flex-col">

				<view class="flex-col items-start home-header space-y-10">
					<text class="home-header-title">欢迎回来！</text>
					<text class="font_3 text_3 home-header-subtitle">我是小U，您的健康智慧管家。</text>
				</view>

				<!-- home device -->
				<view class="flex-col home-device space-y-15">
					<view class="flex-row home-device-header">
						<view class="flex-row justify-between flex-auto equal-division">
							<view class="flex-row equal-division-item space-x-4">
								<text class="font_3 text_5">当前设备</text>
								<text class="font_3">{{ homeFrom.nowDevice }}</text>
							</view>
							<view class="flex-row equal-division-item space-x-14">
								<view class="flex-row space-x-4 margin-left-xl">
									<image class="shrink-0 image_6" src="../../static/home/homeIconWifi.png" />
									<text class="font_3">{{ homeFrom.status }}</text>
								</view>
<!--								<view class="flex-row items-center space-x-6">-->
<!--									<text class="font_3 text_6">45%</text>-->
<!--									<image class="shrink-0 image_7" src="../../static/home/homeIconPower.png" />-->
<!--								</view>-->
							</view>
						</view>

						<view class="flex-row items-center section_5 space-x-4">
							<image class="shrink-0 image_8"	src="../../static/home/homeIconChange.png"/>
							<text class="font_3">切换</text>
						</view>
					</view>

					<view class="flex-row justify-center self-center home-device-status space-x-8">
						<text class="font_4 text_7">当前状态</text>
						<text class="font_4">{{ sleepStatus }}</text>
					</view>

<!--					<view>-->
<!--						<uni-steps :options="list1" :active="active" />-->
<!--					</view>-->

<!--					<view class="flex-row self-center items-center home-device-setting">-->
<!--						<image-->
<!--							class="shrink-0 image_8"-->
<!--							src="../../static/home/homeIconSet.png"-->
<!--						/>-->
<!--						<text>设置目标</text>-->
<!--					</view>-->
				</view>

<!--				<view class="home-report flex-col group_5 space-y-40">-->
<!--					<view class="flex-col home-header space-y-6">-->
<!--						<view class="flex-row items-center space-x-8">-->
<!--							<text class="font_4 text_8">睡眠报告</text>-->
<!--							<view class="flex-row items-center section_7">-->
<!--								<text class="font_5 text_9">去看看</text>-->
<!--								<image-->
<!--									class="shrink-0 image_9"-->
<!--									src="../../static/home/homeIconGO.png"-->
<!--								/>-->
<!--							</view>-->
<!--						</view>-->

<!--						<view class="flex-row items-center space-x-10">-->
<!--							<text class="font_5 text_3 text_10">小U已为您生成最后一份睡眠报告</text>-->
<!--							<text class="font_5 text_3 text_11">2021-08-24</text>-->
<!--						</view>-->
<!--					</view>-->

<!--				</view>-->

				<!-- <view class="flex-col space-y-40 home-data">
					<view class="flex-row group_6 equal-division">
						<view class="flex-row group_7 space-x-6 home-data-item equal-division-item">
							<view class="flex-col shrink-0 self-stretch group_9 space-y-20">
								<view class="flex-row items-center space-x-4">
									<image
										class="shrink-0 image_10"
										src="../../static/home/homeIconHeart.png"
									/>
									<text class="font_1">心率</text>
								</view>
								<text class="self-center font_6">73</text>
							</view>
							<text class="self-start font_7 text_14">次/分</text>
						</view>

						<view class="flex-row justify-center group_8 space-x-6 home-data-item equal-division-item">
							<view class="flex-col space-y-20">
								<view class="flex-row space-x-4">
									<image
										class="shrink-0 image_4"
										src="../../static/home/homeIconBreath.png"
									/>
									<text class="font_1 text_12">呼吸</text>
								</view>
								<text class="self-center font_6 text_13">24</text>
							</view>
							<text class="self-start font_7 text_15">次/分</text>
						</view>
					</view>
				</view> -->

		<view class="flex-row home-data space-x-6">
		  <view class="flex-col flex-auto home-data-left">
		    <view class="flex-row space-x-4 home-data-left-title">
		      <image
		        class="shrink-0 image_10"
				src="../../static/home/homeIconHeart.png"
		      />
		      <text class="font_1 text_14">心率</text>
		    </view>
		    <text class="self-start font_5 text_15">{{ pjxl }}</text>
		    <text class="self-start font_6 text_16">次/分</text>
		  </view>
		  <view class="flex-col justify-start shrink-0 relative home-data-chart content">
			<view class="echarts-wrap">
			  <mpvue-echarts class="ec-canvas" canvasId="canvasChart-1" ref="xinlvRefChart" @onInit="onInit1"></mpvue-echarts>
			</view>
		  </view>
		</view>

		<view class="flex-row home-data space-x-6">
		  <view class="flex-col flex-auto home-data-left">
		    <view class="flex-row space-x-4 home-data-left-title">
		      <image
		        class="shrink-0 image_10"
				src="../../static/home/homeIconBreath.png"
		      />
		      <text class="font_1 text_14">呼吸</text>
		    </view>
		    <text class="self-start font_5 text_15">{{ pjhx }}</text>
		    <text class="self-start font_6 text_16">次/分</text>
		  </view>
		  <view class="flex-col justify-start shrink-0 relative home-data-chart content">
			<view class="echarts-wrap">
			  <mpvue-echarts class="ec-canvas" canvasId="canvasChart-2" ref="huxiRefChart" @onInit="onInit2"></mpvue-echarts>
			</view>
		  </view>
		</view>

        <!-- <view class="cu-card article">
          <view class="cu-item shadow chartsBgColor">
            <view class="title"><view class="text-cut text-lg text-gray">心率 <text class="text-green margin-left">{{ pjxl }} 分钟/次</text></view></view>
            <view class="content">
              <view class="echarts-wrap">
                <mpvue-echarts class="ec-canvas" canvasId="canvasChart-1" ref="xinlvRefChart" @onInit="onInit1"></mpvue-echarts>
              </view>
            </view>
          </view>
        </view>

        <view class="cu-card article">
          <view class="cu-item shadow chartsBgColor">
            <view class="title"><view class="text-cut text-lg text-white">呼吸<text class="text-orange margin-left">{{ pjhx }} 分钟/次</text></view></view>
            <view class="content">
              <view class="echarts-wrap">
                <mpvue-echarts class="ec-canvas" canvasId="canvasChart-2" ref="huxiRefChart" @onInit="onInit2"></mpvue-echarts>
              </view>
            </view>
          </view>
        </view> -->

		<view class="home-btns flex-row  self-center">
			<view @click="handleShareClick" class="btn-home-btns btn-home-btns1 items-center">
				<image class="shrink-0 image_btn" src="../../static/home/homeIconHeart.png" />
				<text class="btn-home-text">远程关爱</text>
			</view>
			<view @click="handleAlertSetting" class="btn-home-btns btn-home-btns2 items-center">
				<image class="shrink-0 image_btn" src="../../static/mine/myIconAlert.png" />
				<text class="btn-home-text">报警设置</text>
			</view>
		</view>

				<view class="flex-col home-alert space-y-4">
					<view class="flex-row items-center space-x-4 home-alert-header">
						<image
							class="image_10"
							src="../../static/home/homeIconHeart.png"
						/>
						<text class="font_1">实时预警</text>
					</view>
          <view v-if="list_alerts.length === 0"  class="flex-row items-center home_blank_alert space-x-16">
            <image
                class="image_8"
                src="../../static/home/homeIconGift.png"
            />
            <view class="flex-col items-start flex-auto space-y-4">
              <text class="font_5">昨晚您的睡眠质量很好</text>
              <text class="font_5">暂时没有预警信息</text>
            </view>
          </view>
					<view v-else class="flex-col home-alert-list">
						<view class="flex-row justify-between items-center list-item" :key="i" v-for="(item, i) in list_alerts">
							<view class="flex-row items-center space-x-6">
								<image
									class="shrink-0 image_11"
									src="../../static/home/homeIconAlert.png"
								/>
								<text class="font_8">{{ formatSosType(item.warn_type) }}</text>
								<text class="font_9 text_16">{{ formatSosTime(item.warn_time) }}</text>
							</view>

							<view class="flex-row items-baseline space-x-4">
								<text class="font_10">{{ item.warn_desc }}</text>
							</view>
						</view>
					</view>
				</view>
			</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" 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>

	  <!-- <tab-bar currentPage="home" /> -->

	</view>
</template>

<script>
import echarts from '@/static/echarts.min.js'
import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue'

import Storage from '@/utils/storage'
import * as API_deviceMemberBind  from '@/api/device_member_bind'
export default {
  components: {
    mpvueEcharts
  },
	data() {
		return {
			deviceAdded: false,
			list_alerts: [],
			active: 4,
			list1: [{
				title: '昨日就寝 11:24PM'
			}, {
				title: '就寝目标 11:00PM'
			}, {
				title: '起床目标 7:00AM'
			}, {
				title: '今日起床 7:14AM'
			}],
      chartObj1: null, // 心率图表
      chartObj2: null, // 呼吸图表
      myData1: [], // 心率数据
      myData2: [], // 呼吸数据
      myCount1: 0, // 心率x轴数字
      myCount2: 0, // 呼吸x轴数字
      allXl: 0, // 总心率
      pjxl: 0, // 平均心率
      allHx: 0, // 总呼吸
      pjhx: 0, // 平均呼吸
      sleepStatus: '离床',
      connecting: false,
      connected: false,
      mySocketTask: null,
      homeFrom: {
        nowDevice: '', // 当前设备
        status: '离线'
      },
      deviceList: [], // 设备列表
      lastMsgTime: 0, // 最后一次设备消息时间
      memberId: '',
      bindSn: '',
      bindShow: false
		};
	},
  onLoad() {
    wx.getSetting({
      complete: (res) => {
        if (!res.authSetting['scope.userInfo']) {
          return
        }
        console.log('222222222222222222222222222')
        const memberId = Storage.getItem('uid')
        if (memberId) {
          this.memberId = memberId
          console.log('this.memberId===', this.memberId)
          this.API_getDeviceList()
        } else {
          this.checkHasLogin()
          const _this = this
          let initTimer = setInterval(function () {
            const memberId = Storage.getItem('uid')
            if (memberId) {
              _this.memberId = memberId
              clearInterval(initTimer)
              _this.API_getDeviceList()
            }
          }, 500)
        }
      }
    })


  },
  onUnload() {
    if (this.mySocketTask) {
      this.mySocketTask.onClose(res => {
        this.connected = false
        clearInterval(this.timer)
      })
    }
  },
  onShow() {
    const imei = Storage.getItem('nowChangeDevice')
    if (imei) {
      this.homeFrom.nowDevice = imei
      this.deviceAdded = true
      console.log('1111111111111111111111111111')
      if (!this.connected && this.memberId) {
        this.init()
      }
    } else {
      this.deviceAdded = false
    }
  },
	methods: {
		handleShareClick() {
			uni.navigateTo({
				url: '/pages/shareUser/shareUser'
			})
		},
    API_getDeviceList() {
      const _this = this
      API_deviceMemberBind.getDeviceByDtypeAndMemberId({dtype: '睡眠床垫', memberId: this.memberId}).then(res => {
        if (res.length === 0) {
          _this.deviceAdded = false
        } else {
          _this.deviceAdded = true
          _this.deviceList = res
          _this.homeFrom.nowDevice = res[0].imei
          Storage.setItem("nowChangeDevice", _this.homeFrom.nowDevice)
          Storage.setItem("myBindDevices", res)
          if (!this.connected) {
            _this.init()
          }
        }
      })
    },
    init() {
      const _this = this
      setTimeout(() => {
        _this.nowChart1()
        _this.nowChart2()
        _this.connect()
      }, 800)
    },
    connect() {
      let _this = this
      this.connecting = true
      // let wsUrl = api.base.replace('http', 'ws')
      this.mySocketTask = uni.connectSocket({
        url: 'ws://wdkl.natapp1.cc/sleep_report/monitor/' + this.memberId,
        success(res) {
          // 这里是接口调用成功的回调，不是连接成功的回调，请注意
        },
        fail(err) {
          // 这里是接口调用失败的回调，不是连接失败的回调，请注意
        }
      })
      this.mySocketTask.onOpen(res => {
        this.connecting = false
        this.connected = true
        uni.hideLoading()
        let _this = this
        this.timer = setInterval(function () { //每隔5秒钟发送一次心跳，避免websocket连接因超时而自动断开
          if (Date.parse(new Date()) - _this.lastMsgTime > 5000) { // 5秒没有收到新消息，则判断为离线
            _this.homeFrom.status = '离线'
            _this.sleepStatus = '离线'
            _this.pjxl = '--'
            _this.pjhx = '--'
          }
          _this.mySocketTask.send({data: 'ping'})
        }, 30000) // 30秒的心跳包
      })
      this.mySocketTask.onError(err => {
        this.connecting = false
        this.connected = false
        uni.hideLoading()
        uni.showModal({
          content: '连接失败，可能是websocket服务不可用，请稍后再试',
          showCancel: false
        })
        console.log('onError', err)
      })
      this.mySocketTask.onMessage(res => {
        let msg = res.data
        // console.log('收到消息:', msg)
        if (msg.length === 30) {
          if (this.homeFrom.nowDevice !== msg.substring(2, 14)) {
            return
          }
          this.homeFrom.status = '在线'
          this.lastMsgTime = Date.parse(new Date())
          this.getValue1(parseInt(msg.substring(22, 24), 16))
          this.getValue2(parseInt(msg.substring(24, 26), 16))
          switch (msg.substring(26, 28)) {
            case "03":
              this.sleepStatus = '在床'
              break;
            case "04":
              this.sleepStatus = '离床'
              break;
            case "05":
              this.sleepStatus = '打鼾'
              break;
            case "06":
              this.sleepStatus = '体动'
              break;
            default:
              break;
          }
        } else {
          const data =  JSON.parse(res.data)
          console.log('收到消息为:', data)
          if (data.sn && this.homeFrom.nowDevice === data.sn) {
            this.list_alerts.push(data)
          }
        }
      })
      this.mySocketTask.onClose(res => {
        this.connected = false
        this.msg = false
        clearInterval(this.timer)
      })
    },
    nowChart1() {
      this.onInit1(this.chartObj1)
      let canvas = this.$refs.xinlvRefChart.canvas
      echarts.setCanvasCreator(() => canvas)
      this.myChart1 = echarts.init(canvas, 'halloween', {
        width: this.chartObj1.width,
        height: this.chartObj1.height
      })
      this.options1 = Object.assign(this.getOptions('#FFFFFF', 800), {})
      this.options1.series.forEach((item) => {
        item.data = this.myData1
      })
      this.myChart1.setOption(this.options1)
    },
    nowChart2() {
      this.onInit2(this.chartObj2);
      let canvas = this.$refs.huxiRefChart.canvas;
      echarts.setCanvasCreator(() => canvas);
      this.myChart2 = echarts.init(canvas, 'halloween', {
        width: this.chartObj2.width,
        height: this.chartObj2.height
      });
      this.options2 = Object.assign(this.getOptions('#06f5d2', 400), {})
      this.options2.series.forEach((item) => {
        item.data = this.myData2
      })
      this.myChart2.setOption(this.options2)
    },
    onInit1(e) {
      this.chartObj1 = e
    },
    onInit2(e) {
      this.chartObj2 = e
    },
    getOptions(color, xMax) {
      return {
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 300,
          },
        ],
        color: color,
        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,
          },
          triggerEvent: true
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          min: 0,
          max: xMax,
          // max: 'dataMax', // 取数据在该轴上的最大值作为最大刻度
          splitLine: {
            show: false, // 是否显示分隔线
          },
          axisLine: {
            show: false, // 是否显示坐标轴轴线
            lineStyle:{
              color:'#FFFFFF',
              width:1, //x轴线的宽度
            }
          },
        },
        series: [
          {
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: [],
          },
        ]
      }
    },
    getValue1(value) {
      // console.log("心率是", value)
      this.pjxl = value
      if (this.myData1.length > 60) {
        this.myData1.splice(0,5)
      }
      if (value !== 0) {
        for (let i = 0; i < 5; i++) {
          this.myCount1 ++;
          value =  parseInt(Math.random(100) * 500 + 300)
          this.myData1.push([this.myCount1, value])
        }
      } else {
        for (let i = 0; i < 5; i++) {
          this.myCount1 ++;
          value = 410 + parseInt(Math.random() * 50 - 30)
          this.myData1.push([this.myCount1, value])
        }
      }
      this.myChart1.setOption(this.options1)
    },
    getValue2(value) {
      // console.log("呼吸值是", value)
      this.pjhx = value
      if (this.myData2.length > 60) {
        this.myData2.splice(0,5)
      }
      if (value === 0) {
        for (let i = 0; i < 5; i++) {
          this.myCount2 ++;
          value = 220 +  parseInt(Math.random() * 10 - 5)
          this.myData2.push([this.myCount2, value])
        }
      } else {
        value = parseInt((Math.random(10) * 300 + 100))
        for (let i = 0; i < 5; i++) {
          this.myCount2 ++;
          value += parseInt(Math.random() * 10 - 5)
          this.myData2.push([this.myCount2, value])
        }
      }
      this.myChart2.setOption(this.options2)
    },
		handleAlertSetting() {
			uni.navigateTo({
				url: "/pages/alertSetting/alertSetting?imei=" + this.homeFrom.nowDevice
			});
		},
    formatSosType(value) {
      switch (value) {
        case 1:
          return  '心率过速'
        case 2:
          return '心率过缓'
        case 3:
          return '呼吸过速'
        case 4:
          return '呼吸过缓'
        case 5:
          return '离床预警'
        case 6:
          return '一键预警'
        case 7:
          return '离线预警'
        default:
          break;
      }
    },
    formatSosTime(value) {
      return value.substring(10, value.length - 3)
    },
    // 扫描条码
    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'
          })
        }
      })
    },
    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'
              })
            }
          }
        })
      }
    }
	}
};
</script>

<style lang="scss" scoped>
.echarts-wrap {
  width: 100%;
  height: 80px;
  /*padding: 10upx;*/
  margin-bottom: 0.3rem
}
.chartsBgColor{
  background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
}

	.equal-division {
		.equal-division-item {
			padding: 0.25rem 0.38rem 0;
			flex: 1 1 10.81rem;
		}
	}

	.home_add_devive {
	  margin-right: 1.25rem;
	  margin: 1rem;
	  padding: 3.75rem 0;
	  background-color: #0233c699;
	  border-radius: 1rem;
	  backdrop-filter: blur(0.63rem);
	  width: 20.94rem;

	  .image_4 {
	    margin-left: 6.38rem;
	    width: 1.5rem;
	    height: 1.5rem;
	  }
	  .text_5 {
	    color: #ffffff;
	    font-size: 1.5rem;
	    font-family: PingFangSC;
	    line-height: 1.38rem;
	  }
	}
	.space-x-10 {
	  & > view:not(:first-child),
	  & > text:not(:first-child),
	  & > image:not(:first-child) {
	    margin-left: 0.63rem;
	  }
	}

	.home_ad {
	  margin-left: 2.25rem;
	  background: url(../../static/home/homeBg2.png);
	  background-repeat: no-repeat;
	  background-size: contain;

	  .text_6 {
	    padding: 0.13rem 0;
	    color: #ffffff;
	    font-size: 1rem;
	    font-family: PingFangSC;
	    line-height: 0.94rem;
	  }
	  .section_4 {
	    padding: 0.13rem 0.38rem;
	    background-image: linear-gradient(90deg, #2c25f799 0%, #061599 100%);
	    border-radius: 0.44rem;
	    width: 2.88rem;
	    height: 0.88rem;
	    .font_2 {
	      font-size: 0.69rem;
	      font-family: PingFangSC;
	      line-height: 0.63rem;
	      color: #ffffff;
	    }
	    .text_7 {
	      font-size: 0.63rem;
	      line-height: 0.56rem;
	    }
	    .image_5 {
	      width: 0.19rem;
	      height: 0.31rem;
	    }
	  }
	}
	.space-x-6 {
	  & > view:not(:first-child),
	  & > text:not(:first-child),
	  & > image:not(:first-child) {
	    margin-left: 0.38rem;
	  }
	}

	.group_5 {
	  padding-left: 1rem;
	  padding-right: 1rem;

	  .font_2 {
	    font-size: 0.69rem;
	    font-family: PingFangSC;
	    line-height: 0.63rem;
	    color: #ffffff;
	  }
	  .text_8 {
	    font-size: 0.63rem;
	    line-height: 0.59rem;
	    opacity: 0.6;
	  }
	  .home_blank_heart {
	    margin-top: 1rem;
		opacity: 1;
		border-radius: 16px;
		background: linear-gradient(180deg, rgba(52, 26, 75, 1) 0%, rgba(22, 125, 242, 1) 100%);
		backdrop-filter: blur(20px);
		padding:1rem 0rem 2rem 1rem;

	    .group_7 {
	      padding-bottom: 1.13rem;
	      .image_6 {
	        width: 1.13rem;
	        height: 0.88rem;
	      }
	      .text_9 {
	        line-height: 1.03rem;
	      }
	    }
	    .view {
	      margin-right: -20.13rem;
	    }
	    .text_10 {
	      margin-right: 18.75rem;
	      margin-top: 1rem;
	    }
	  }
	  .home_blank_breath {
	    margin-top: 1rem;
	    opacity: 1;
	    border-radius: 16px;
	    background: linear-gradient(180deg, rgba(52, 26, 75, 1) 0%, rgba(22, 125, 242, 1) 100%);
	    backdrop-filter: blur(20px);
	    padding:1rem 0rem 2rem 1rem;

	    .group_10 {
	      padding-bottom: 1.25rem;
	      .image_7 {
	        width: 1.13rem;
	        height: 1.06rem;
	      }
	      .text_12 {
	        line-height: 1rem;
	      }
	    }
	    .view_2 {
	      margin-right: -20rem;
	    }
	    .text_13 {
	      margin-right: 18.63rem;
	      margin-top: 1rem;
	    }
	  }
	  .space-x-4 {
	    & > view:not(:first-child),
	    & > text:not(:first-child),
	    & > image:not(:first-child) {
	      margin-left: 0.25rem;
	    }
	  }
	  .font_1 {
	    font-size: 1.13rem;
	    font-family: PingFangSC;
	    line-height: 1.06rem;
	    color: #ffffff;
	  }
	  .section_5 {
	    background-color: #ffffff1a;
	    width: 15.94rem;
	    height: 0.063rem;
	  }
	  .font_3 {
	    font-size: 2.5rem;
	    font-family: PingFangSC;
	    line-height: 0.19rem;
	    color: #ffffff;
	  }
	  .group_8 {
	    margin-top: 1.38rem;
	    padding-left: 0.63rem;
	    .font_4 {
	      font-size: 0.69rem;
	      font-family: PingFangSC;
	      line-height: 0.63rem;
	      color: #ffffff80;
	    }
	    .text_11 {
	      font-size: 0.75rem;
	      line-height: 0.69rem;
	    }
	  }
	}
	.home_blank_alert {
	  margin: 1rem 1.25rem 0;
	  padding: 0.94rem;
	  background-color: #02299ecc;
	  border-radius: 1rem;
	  .image_8 {
	    width: 7.06rem;
	    height: 4.94rem;
	  }
	  .space-y-4 {
	    & > view:not(:first-child),
	    & > text:not(:first-child),
	    & > image:not(:first-child) {
	      margin-top: 0.25rem;
	    }
	    .font_5 {
	      font-size: 0.88rem;
	      font-family: PingFangSC;
	      line-height: 1.06rem;
	      color: #167df2;
	    }
	  }
	}
	.space-x-16 {
	  & > view:not(:first-child),
	  & > text:not(:first-child),
	  & > image:not(:first-child) {
	    margin-left: 1rem;
	  }
	}


.container-bg {
	position: fixed;
	left: -130px;
	top: -130px;
	width: 480px;
	height: 344px;
	opacity: 1;
	overflow: hidden;
	border-radius: 63px;
	-webkit-transform: rotate(-315deg);
	transform: rotate(-315deg);
	background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
}

.home-container {
  padding-bottom: 2rem;
  background-color: #000000;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .home-module {
    padding: 1.75rem 0 3.38rem;
    overflow-y: auto;
	z-index: 100;

    .home-header {
      padding: 0 1.25rem;
      .home-header-title {
        color: #ffffff;
        font-size: 1.25rem;
        font-family: PingFangSC;
        line-height: 1.16rem;
      }
	  .text_8 {
		  color: #ffffff;
		  opacity: 1;
	  }
      .text_3 {
        opacity: 0.6;
      }
      .home-header-subtitle {
        line-height: 0.72rem;
      }
      .space-x-10 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 0.63rem;
        }
        .text_10 {
          line-height: 0.59rem;
        }
        .text_11 {
          line-height: 0.47rem;
        }
      }
    }
    .space-y-10 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 0.63rem;
      }
    }

    .home-device {
      margin: 1rem 1.25rem;
      padding-bottom: 2rem;
      background-color: #0233c699;
      border-radius: 1rem;
      backdrop-filter: blur(0.63rem);

	  .home-device-setting {
		  width: 70px;
		  height: 20px;
		  opacity: 1;
		  border-radius: 7px;
		  background: linear-gradient(90deg, rgba(255, 35, 247, 1) 0%, rgba(91, 30, 154, 1) 100%);

		  .image_8 {
			  width: 10px;
			  height: 10px;
		  }

		  font-size: 10px;
		  font-weight: 400;
		  line-height: 10px;
		  color: rgba(255, 255, 255, 1);
		  padding: 0.3rem;
	  }
      .home-device-header {
        background-color: #ffffff33;
        border-radius: 1rem 1rem 0px 0px;
        .equal-division {
          padding: 0 1rem;
          .equal-division-item {
            padding: 0.38rem 0;
            .text_5 {
              opacity: 0.5;
            }
          }
          .space-x-14 {
            & > view:not(:first-child),
            & > text:not(:first-child),
            & > image:not(:first-child) {
              margin-left: 0.88rem;
            }
          }
        }
        .section_5 {
          padding: 0.38rem 0.5rem;
          background-image: linear-gradient(90deg, #2c25f799 0%, #061599 100%);
          border-radius: 0px 1rem 0px 0px;
          height: 1.5rem;
          .image_8 {
            width: 0.75rem;
            height: 0.75rem;
          }
        }
      }
      .home-device-status {
        padding: 0.25rem 0 0.25rem 0.25rem;
        background-color: #ffffff33;
        border-radius: 0.75rem;
        width: 7.88rem;
        .text_7 {
          opacity: 0.4;
        }
      }
    }
    .space-y-15 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 0.94rem;
      }
    }
    .font_3 {
      font-size: 0.75rem;
      font-family: PingFangSC;
      line-height: 0.69rem;
      color: #ffffff;
    }

    .home-report {
      margin: 0 1.25rem;
      padding: 1rem 0;
      background-image: url(../../static/home/homeReportBg.png);
      background-size: contain;
      background-repeat: no-repeat;

      .space-y-6 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 0.38rem;
        }
      }
    }
	.home-ad {
		margin: 0 1.25rem;
		padding: 1rem 0;
		background-image: url(../../static/home/homeBg2.png);
		background-size: contain;
		background-repeat: no-repeat;

		.space-y-6 {
		  & > view:not(:first-child),
		  & > text:not(:first-child),
		  & > image:not(:first-child) {
		    margin-top: 0.38rem;
		  }
		}
	}

	.home-data {
		background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
		margin: 0rem 1.25rem;
		padding: 1rem 0rem;
		border-radius: 1rem;
		padding: 1rem;
		margin-top: 1rem;

		.home-data-item {
			padding: 1rem 0rem;
			margin: 0 0.3rem;
			opacity: 1;
			border-radius: 16px;
			background: linear-gradient(180deg, rgba(52, 26, 75, 0.65) 0%, rgba(22, 125, 242, 1) 100%);
			backdrop-filter: blur(20px);
		}
	}
	.group_6 {
	  overflow-x: hidden;
	  width: 100%;

	  .group_7 {
	    overflow-x: hidden;
	    width: 10rem;

	    .group_9 {
	      margin-left: 2.25rem;
	    }
	    .text_14 {
	      margin-top: 3.5rem;
	    }
	  }
	  .group_8 {
	    width: 10rem;

	    .text_15 {
	      margin-top: 3.63rem;
	    }
	  }
	  .font_6 {
	    font-size: 3rem;
	    font-family: PingFangSC;
	    line-height: 2.19rem;
	    color: #ffffff;
	  }
	  .font_7 {
	    font-size: 0.75rem;
	    font-family: PingFangSC;
	    line-height: 0.69rem;
	    color: #ffffff80;
	  }
	}
    .space-y-40 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 2.5rem;
      }
    }
    .space-x-8 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-left: 0.5rem;
      }
      .text_8 {
        padding: 0.13rem 0;
      }
      .section_7 {
        padding: 0.13rem 0.38rem;
        background-image: linear-gradient(90deg, #ff23f7 0%, #5b1e9a 100%);
        border-radius: 0.44rem;
        height: 0.88rem;
        .text_9 {
          line-height: 0.56rem;
        }
        .image_9 {
          width: 0.19rem;
          height: 0.31rem;
        }
      }
    }
    .font_4 {
      font-size: 1rem;
      font-family: PingFangSC;
      line-height: 0.94rem;
      color: #ffffff;
    }
    .font_5 {
      font-size: 0.63rem;
      font-family: PingFangSC;
      color: #ffffff;
    }
    .space-x-6 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-left: 0.38rem;
      }
      .text_6 {
        line-height: 0.56rem;
      }
      .image_7 {
        width: 1.31rem;
        height: 0.69rem;
      }
      .image_11 {
        width: 1.13rem;
        height: 0.94rem;
      }
      .font_9 {
        font-size: 0.88rem;
        font-family: PingFangSC;
        line-height: 0.69rem;
        color: #ced5dc;
      }
      .text_16 {
        line-height: 0.63rem;
      }
    }
    .space-x-4 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-left: 0.25rem;
      }
      .image_6 {
        width: 0.94rem;
        height: 0.75rem;
      }
      .image_10 {
        width: 1.13rem;
        height: 0.88rem;
      }
      .font_1 {
        font-size: 1.13rem;
        font-family: PingFangSC;
        line-height: 1.03rem;
        color: #ffffff;
      }
      .image_4 {
        width: 1.13rem;
        height: 1.06rem;
      }
      .text_12 {
        line-height: 1rem;
      }
      .font_10 {
        font-size: 1.13rem;
        font-family: PingFangSC;
        line-height: 0.81rem;
        color: #ff465a;
      }
    }
    .home-alert {
      margin: 0rem 1.25rem 0 1.25rem;
      padding: 1rem 0.88rem 0.13rem;
      background-color: #0233c6cc;
      border-radius: 1rem;
      .home-alert-header {
      }
      .home-alert-list {
        .list-item {
          padding: 0.88rem 0;
          border-bottom: solid 0.063rem #ffffff1a;
        }
      }
    }
    .space-y-4 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 0.25rem;
      }
    }
    .font_8 {
      font-size: 0.88rem;
      font-family: PingFangSC;
      line-height: 0.81rem;
      color: #ffffff;
    }
  }
  .space-y-20 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 1.25rem;
    }
    .text_13 {
      line-height: 2.16rem;
    }
  }
}
.home-data {
  margin-top: 3.5rem;
  overflow-x: hidden;
  .home-data-left {
    .space-x-4 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-left: 0.25rem;
      }
      .image_10 {
        width: 1.13rem;
        height: 1.06rem;
      }
      .font_1 {
        font-size: 1.13rem;
        font-family: PingFangSC;
        line-height: 1.03rem;
        color: #ffffff;
      }
      .text_14 {
        line-height: 1rem;
      }
    }
    .home-data-left-title {
    }
    .font_5 {
      font-size: 2.5rem;
      font-family: PingFangSC;
      line-height: 1.81rem;
      color: #ffffff;
    }
    .text_15 {
      margin-top: 1.25rem;
    }
    .font_6 {
      font-size: 0.75rem;
      font-family: PingFangSC;
      line-height: 0.69rem;
      color: #ffffff80;
    }
    .text_16 {
      margin-top: 0.75rem;
    }
  }
  .home-data-chart {
    overflow-x: hidden;
    width: 17.19rem;
    .group_10 {
      padding-left: 2.06rem;
      padding-bottom: 2.25rem;
      overflow-x: hidden;
      .image_11 {
        width: 8.75rem;
        height: 3.44rem;
      }
      .image_12 {
        width: 7.06rem;
        height: 3.38rem;
      }
      .image_13 {
        width: 10rem;
        height: 3.44rem;
      }
      .pos_8 {
        position: absolute;
        left: 0;
        bottom: 0.063rem;
      }
      .image_14 {
        width: 6.06rem;
        height: 3.44rem;
      }
      .pos_10 {
        position: absolute;
        right: 1.25rem;
        bottom: 0;
      }
      .pos_9 {
        position: absolute;
        left: 0;
        top: 2.31rem;
      }
    }
    .section_9 {
      background-color: #ffffff1a;
      width: 15.94rem;
      height: 0.063rem;
    }
    .pos_11 {
      position: absolute;
      left: 0;
      top: 5.5rem;
    }
  }
}
.space-x-6 {
  & > view:not(:first-child),
  & > text:not(:first-child),
  & > image:not(:first-child) {
    margin-left: 0.38rem;
  }
}

.home-btns {
	.btn-home-btns2 {
		background: linear-gradient(90deg, rgba(5, 96, 232, 1) 0%, rgba(100, 158, 245, 1) 100%);
	}
	.btn-home-btns1 {
		background: linear-gradient(90deg, rgba(44, 37, 247, 0.6) 0%, rgba(6, 21, 153, 1) 100%);
	}
	.btn-home-btns {
		border-radius: 1.3rem;
		width: 8rem;
		height: 2.6rem;
		margin: 1rem 0.5rem;
		text-align: center;
		font-size: 1.1rem;
		font-weight: 500;
		letter-spacing: 0px;
		line-height: 2.6rem;

		.image_btn {
			width: 1.4rem;
			height: 1.4rem;
			vertical-align: middle;
			margin-right: 0.2rem;
		}
		.btn-home-text {
			color: #ffffff;
		}
	}
}
</style>