1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633 |
- <template>
- <view class="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 page">
- <!-- 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 justify-center 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" @click="modalName = true">
- <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>-->
- <!--<!– <view class="cu-steps">–>-->
- <!--<!– <view class="cu-item" :class="index>basics?'':'text-orange'" v-for="(item, index) in list1" :key="index">–>-->
- <!--<!– <text :class="index>basics ?'cuIcon-title':'cuIcon-radioboxfill'"></text> {{item.name}}–>-->
- <!--<!– </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-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"
- />
- <view class="font_1 text_14">心率</view>
- </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 flex-auto justify-start shrink-0 relative home-data-chart content">
- <view class="echarts-wrap" :hidden="modalName">
- <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 flex-auto justify-start shrink-0 relative home-data-chart content">
- <view class="echarts-wrap" :hidden="modalName">
- <mpvue-echarts class="ec-canvas" canvasId="canvasChart-2" ref="huxiRefChart" @onInit="onInit2"></mpvue-echarts>
- </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" 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 style="z-index: 9999999" class="cu-modal" :class="modalName ?'show':''" @tap="hideModal">
- <view style="background-image: linear-gradient(45deg, #4d9efa, #156fce);z-index: 9999999" class="cu-dialog" @tap.stop="">
- <view class="cu-bar justify-end">
- <view class="content">设备切换</view>
- </view>
- <radio-group class="block" @change="RadioChange">
- <view class="cu-list menu text-left">
- <view style="background-image: linear-gradient(45deg, #4d9efa, #156fce)" class="cu-item" v-for="(item, index) in deviceList" :key="index">
- <label class="flex justify-between align-center flex-sub">
- <view class="flex-sub text-white">{{ item.imei }}</view>
- <radio class="round" :class="homeFrom.nowDevice===item.imei?'checked':''" :checked="homeFrom.nowDevice === item.imei"
- :value="item.imei"></radio>
- </label>
- </view>
- </view>
- </radio-group>
- </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 { API } from '@/utils/request'
- 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,
- modalName: false,
- activeBreak: false,
- isConnect: false
- };
- },
- // onLoad() {
- // this.memberId = 50289
- // this.API_getDeviceList()
- // },
- 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()
- const _this = this
- setTimeout(() => {
- console.log('_this.connected====', _this.connected)
- if (!_this.connected) {
- console.log('我要登录过...')
- _this.API_getDeviceList()
- }
- }, 1500)
- } 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)
- }
- }
- })
- },
- beforeDestroy() {
- this.activeBreak = true
- this.closeWebsocket()
- },
- // onShow() {
- // const imei = Storage.getItem('nowChangeDevice')
- // if (imei) {
- // this.homeFrom.nowDevice = imei
- // }
- // },
- onShow() {
- if (this.memberId) {
- this.API_getDeviceList()
- }
- const imei = Storage.getItem('nowChangeDevice')
- if (imei) {
- this.homeFrom.nowDevice = imei
- this.deviceAdded = true
- } else {
- this.deviceAdded = false
- }
- if (this.memberId) {
- if (this.connected) {
- console.log('发送确认在线消息...')
- this.mySocketTask.send({data: '1'})
- const _this = this
- this.isConnect = false
- setTimeout(() => {
- if (_this.isConnect === false) {
- console.log('没有正常返回...')
- if (_this.chartObj1) {
- _this.connect()
- } else {
- _this.init()
- }
- }
- }, 1000)
- } else {
- console.log('重新连接...')
- this.connect()
- }
- }
- },
- methods: {
- handleShareClick() {
- uni.navigateTo({
- url: '/pages/shareUser/shareUser'
- })
- },
- API_getDeviceList() {
- const _this = this
- API_deviceMemberBind.getDeviceByDtypeAndMemberId({dtype: '睡眠床垫', memberId: this.memberId}).then(res => {
- if (res) {
- if (res.length === 0) {
- _this.deviceAdded = false
- Storage.removeItem("nowChangeDevice")
- Storage.removeItem("myBindDevices")
- } 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()
- }
- }
- } else {
- console.log('获取床垫错误...')
- }
- })
- },
- init() {
- const _this = this
- setTimeout(() => {
- _this.nowChart1()
- _this.nowChart2()
- _this.connect()
- }, 800)
- },
- connect() {
- let _this = this
- if (this.connected || this.connecting) {
- console.log('webSocket已连接或者正在连接')
- return
- }
- this.connecting = true
- let wsUrl = API.base.replace('http', 'ws')
- const time = Math.round(new Date()) + "" + Math.round(Math.random()*100)
- this.mySocketTask = uni.connectSocket({
- url: wsUrl + '/sleep_report/monitor/' + time + '/' + this.memberId,
- // 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()
- console.log('连接失败,可能是websocket服务不可用,请稍后再试!')
- // uni.showModal({
- // content: '连接失败,可能是websocket服务不可用,请稍后再试',
- // showCancel: false
- // })
- console.log('onError', err)
- })
- this.mySocketTask.onMessage(res => {
- let msg = res.data
- // console.log('收到消息:', msg)
- switch (msg.length) {
- case 1:
- this.isConnect = true
- break
- case 234:
- if (this.homeFrom.nowDevice !== msg.substring(2, 14)) {
- return
- }
- this.homeFrom.status = '在线'
- this.lastMsgTime = Date.parse(new Date())
- this.getValue(msg)
- 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;
- }
- break
- case 7:
- Storage.setItem('refreshSleepReport', true)
- break
- default:
- const data = JSON.parse(res.data)
- console.log('收到消息为:', data)
- if (data.sn && this.homeFrom.nowDevice === data.sn) {
- this.list_alerts.push(data)
- }
- break
- }
- })
- this.mySocketTask.onClose(res => {
- console.log('webSocket关闭了...')
- 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,
- },
- extraCssText: 'z-index: 2'
- },
- 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: function (value) {
- if (value === 0) {
- return 0
- } else {
- return value.min - 20
- }
- },
- max: function (value) {
- return value.max + 30
- },
- // min: 0,
- // min: 'dataMin', // 取数据在该轴上的最大值作为最小刻度
- // max: xMax,
- // max: 'dataMax', // 取数据在该轴上的最大值作为最大刻度
- splitLine: {
- show: true, // 是否显示分隔线
- lineStyle: {
- color: "rgba(168,162,162,0.6)",
- width: 1,
- type: 'dotted'
- }
- },
- axisLine: {
- show: false, // 是否显示坐标轴轴线
- lineStyle:{
- color:'#FFFFFF',
- width:1, //x轴线的宽度
- }
- },
- axisLabel: {
- fontSize: 8
- }
- },
- series: [
- {
- type: 'line',
- lineStyle: {
- width: 0.8
- },
- smooth: true, // 折线曲线
- showSymbol: false,
- hoverAnimation: false,
- data: [],
- },
- ]
- }
- },
- getValue(msg) {
- this.pjxl = parseInt(msg.substring(22, 24), 16)
- this.pjhx = parseInt(msg.substring(24, 26), 16)
- const bx = msg.substring(34, msg.length);
- const size = bx.length / 4
- const ii = size / 2;
- if (this.myData1.length > 100) {
- this.myData1.splice(0, ii)
- }
- if (this.myData2.length > 100) {
- this.myData2.splice(0, ii)
- }
- if (this.myCount1 > 300) {
- this.myCount1 = 0
- }
- if (this.myCount2 > 300) {
- this.myCount2 = 0
- }
- for (let i = 0; i < size; i++) {
- // bx.substring(i * 4, i * 4 + 4)
- const j = i * 4
- // console.log(bx.substring(j, j + 2), bx.substring(j + 2, j + 4))
- const s1 = bx.substring(j, j + 2)
- const s2 = bx.substring(j + 2, j + 4)
- let value = parseInt(s2 + s1 , 16)
- // if (parseInt(s1, 16) > parseInt(s2, 16)) {
- // value = parseInt(s2 + s1, 16)
- // } else {
- // value = parseInt(s1 + s2, 16)
- // }
- // if (value === 2) {
- // console.log(s1, s2)
- // if (parseInt(s1, 16) > parseInt(s2, 16)) {
- // console.log('111111111===', parseInt(s1, 16), parseInt(s2, 16), s2 + '' + s1, parseInt(s2 + '' + s1, 16))
- // } else {
- // console.log('2222222222=====', parseInt(s1, 16), parseInt(s2, 16), s1 + s2, parseInt(s1 + '' + s2, 16))
- // }
- // }
- // console.log('value=====', value)
- if (i % 2 === 0) {
- this.myCount1 ++
- this.myData1.push([this.myCount1, value])
- } else {
- this.myCount2 ++
- this.myData2.push([this.myCount2, value])
- }
- }
- this.myChart1.setOption(this.options1)
- 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'
- })
- }
- }
- })
- }
- },
- closeWebsocket() {
- if (this.mySocketTask) {
- this.mySocketTask.close({
- success(res) {
- this.connected = false
- clearInterval(this.timer)
- console.log("关闭成功", res)
- },
- fail(err) {
- console.log("关闭失败", err)
- }
- })
- }
- },
- hideModal(e) {
- this.modalName = false
- },
- RadioChange(e) {
- console.log('1111111==', e.detail.value)
- this.homeFrom.nowDevice = e.detail.value
- Storage.setItem("nowChangeDevice", e.detail.value)
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .page {
- background-color: #000000;
- width: 100%;
- overflow-y: auto;
- overflow-x: hidden;
- height: 100%;
- }
- .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);
- .image_4 {
- 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("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/602647C38F5E4168B4F16AFFFE2270CA.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%;
- .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: 1rem;
- //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("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/050F95EFCA914FD6A72537F41ACEFC33.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("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/602647C38F5E4168B4F16AFFFE2270CA.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;
- z-index: 1000;
- .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 {
- width: max-content;
- }
- .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: 85%;
- .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>
|