index.vue 41 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565
  1. <template>
  2. <view class="flex-col justify-start home-container">
  3. <view class="container-bg"></view>
  4. <cu-custom bgColor="#fff"><view slot="content" style="color: #FFFFFF">UU睡眠</view></cu-custom>
  5. <view class="flex-col home-module space-y-20">
  6. <!-- no device added -->
  7. <view v-if="!deviceAdded">
  8. <view class="flex-col items-start home-header space-y-10">
  9. <text class="home-header-title">欢迎回来!</text>
  10. <text class="font_3 text_3 home-header-subtitle">我是小U,您的健康智慧管家。</text>
  11. </view>
  12. <view class="flex-row justify-center items-center home_add_devive space-x-10" @click="addBindDevice">
  13. <image
  14. class="image_4"
  15. src="../../static/home/homeIconAdd.png"
  16. />
  17. <text class="text_5">添加设备</text>
  18. </view>
  19. <!-- <view class="home-ad flex-col group_5 space-y-40">-->
  20. <!-- <view class="flex-col home-header space-y-6">-->
  21. <!-- <view class="flex-row items-center space-x-8">-->
  22. <!-- <text class="font_4 text_8">UU AI智能睡眠监测仪</text>-->
  23. <!-- <view class="flex-row items-center section_7">-->
  24. <!-- <text class="font_5 text_9">去看看</text>-->
  25. <!-- <image-->
  26. <!-- class="shrink-0 image_9"-->
  27. <!-- src="../../static/home/homeIconGO.png"-->
  28. <!-- />-->
  29. <!-- </view>-->
  30. <!-- </view>-->
  31. <!-- <view class="flex-row items-center space-x-10">-->
  32. <!-- <text class="font_5 text_3 text_10">AI时代,全家人的睡眠健康顾问</text>-->
  33. <!-- </view>-->
  34. <!-- </view>-->
  35. <!-- </view>-->
  36. <view class="flex-col">
  37. <view class="flex-col group_5">
  38. <view class="flex-col home_blank_heart">
  39. <view class="flex-row items-center group_7 space-x-4">
  40. <image
  41. class="image_6"
  42. src="../../static/home/homeIconHeart.png"
  43. />
  44. <text class="font_1 text_9">心率</text>
  45. </view>
  46. <view class="flex-row justify-end items-start">
  47. <view class="section_5 view"></view>
  48. <text class="font_3 text_10">--</text>
  49. </view>
  50. <view class="flex-col group_8">
  51. <text class="self-start font_4 text_11">次/分</text>
  52. <view class="shrink-0 self-end section_5"></view>
  53. </view>
  54. </view>
  55. <view class="flex-col home_blank_breath">
  56. <view class="flex-row items-center group_10 space-x-4">
  57. <image
  58. class="image_7"
  59. src="../../static/home/homeIconBreath.png"
  60. />
  61. <text class="font_1 text_12">呼吸</text>
  62. </view>
  63. <view class="flex-row justify-end items-start">
  64. <view class="section_5 view_2"></view>
  65. <text class="font_3 text_13">--</text>
  66. </view>
  67. <view class="flex-col group_8">
  68. <text class="self-start font_4 text_11">次/分</text>
  69. <view class="shrink-0 self-end section_5"></view>
  70. </view>
  71. </view>
  72. </view>
  73. <view class="flex-row items-center home_blank_alert space-x-16">
  74. <image
  75. class="image_8"
  76. src="../../static/home/homeIconGift.png"
  77. />
  78. <view class="flex-col items-start flex-auto space-y-4">
  79. <text class="font_5">昨晚您的睡眠质量很好</text>
  80. <text class="font_5">暂时没有预警信息</text>
  81. </view>
  82. </view>
  83. </view>
  84. </view>
  85. <!-- device added -->
  86. <view v-if="deviceAdded" class="flex-col">
  87. <view class="flex-col items-start home-header space-y-10">
  88. <text class="home-header-title">欢迎回来!</text>
  89. <text class="font_3 text_3 home-header-subtitle">我是小U,您的健康智慧管家。</text>
  90. </view>
  91. <!-- home device -->
  92. <view class="flex-col home-device space-y-15">
  93. <view class="flex-row home-device-header">
  94. <view class="flex-row justify-between flex-auto equal-division">
  95. <view class="flex-row equal-division-item space-x-4">
  96. <text class="font_3 text_5">当前设备</text>
  97. <text class="font_3">{{ homeFrom.nowDevice }}</text>
  98. </view>
  99. <view class="flex-row equal-division-item space-x-14">
  100. <view class="flex-row space-x-4 margin-left-xl">
  101. <image class="shrink-0 image_6" src="../../static/home/homeIconWifi.png" />
  102. <text class="font_3">{{ homeFrom.status }}</text>
  103. </view>
  104. <!-- <view class="flex-row items-center space-x-6">-->
  105. <!-- <text class="font_3 text_6">45%</text>-->
  106. <!-- <image class="shrink-0 image_7" src="../../static/home/homeIconPower.png" />-->
  107. <!-- </view>-->
  108. </view>
  109. </view>
  110. <view class="flex-row items-center section_5 space-x-4">
  111. <image class="shrink-0 image_8" src="../../static/home/homeIconChange.png"/>
  112. <text class="font_3">切换</text>
  113. </view>
  114. </view>
  115. <view class="flex-row justify-center self-center home-device-status space-x-8">
  116. <text class="font_4 text_7">当前状态</text>
  117. <text class="font_4">{{ sleepStatus }}</text>
  118. </view>
  119. <!-- <view>-->
  120. <!-- <uni-steps :options="list1" :active="active" />-->
  121. <!-- </view>-->
  122. <!-- <view class="flex-row self-center items-center home-device-setting">-->
  123. <!-- <image-->
  124. <!-- class="shrink-0 image_8"-->
  125. <!-- src="../../static/home/homeIconSet.png"-->
  126. <!-- />-->
  127. <!-- <text>设置目标</text>-->
  128. <!-- </view>-->
  129. </view>
  130. <!-- <view class="home-report flex-col group_5 space-y-40">-->
  131. <!-- <view class="flex-col home-header space-y-6">-->
  132. <!-- <view class="flex-row items-center space-x-8">-->
  133. <!-- <text class="font_4 text_8">睡眠报告</text>-->
  134. <!-- <view class="flex-row items-center section_7">-->
  135. <!-- <text class="font_5 text_9">去看看</text>-->
  136. <!-- <image-->
  137. <!-- class="shrink-0 image_9"-->
  138. <!-- src="../../static/home/homeIconGO.png"-->
  139. <!-- />-->
  140. <!-- </view>-->
  141. <!-- </view>-->
  142. <!-- <view class="flex-row items-center space-x-10">-->
  143. <!-- <text class="font_5 text_3 text_10">小U已为您生成最后一份睡眠报告</text>-->
  144. <!-- <text class="font_5 text_3 text_11">2021-08-24</text>-->
  145. <!-- </view>-->
  146. <!-- </view>-->
  147. <!-- </view>-->
  148. <!-- <view class="flex-col space-y-40 home-data">
  149. <view class="flex-row group_6 equal-division">
  150. <view class="flex-row group_7 space-x-6 home-data-item equal-division-item">
  151. <view class="flex-col shrink-0 self-stretch group_9 space-y-20">
  152. <view class="flex-row items-center space-x-4">
  153. <image
  154. class="shrink-0 image_10"
  155. src="../../static/home/homeIconHeart.png"
  156. />
  157. <text class="font_1">心率</text>
  158. </view>
  159. <text class="self-center font_6">73</text>
  160. </view>
  161. <text class="self-start font_7 text_14">次/分</text>
  162. </view>
  163. <view class="flex-row justify-center group_8 space-x-6 home-data-item equal-division-item">
  164. <view class="flex-col space-y-20">
  165. <view class="flex-row space-x-4">
  166. <image
  167. class="shrink-0 image_4"
  168. src="../../static/home/homeIconBreath.png"
  169. />
  170. <text class="font_1 text_12">呼吸</text>
  171. </view>
  172. <text class="self-center font_6 text_13">24</text>
  173. </view>
  174. <text class="self-start font_7 text_15">次/分</text>
  175. </view>
  176. </view>
  177. </view> -->
  178. <view class="flex-row home-data space-x-6">
  179. <view class="flex-col flex-auto home-data-left">
  180. <view class="flex-row space-x-4 home-data-left-title">
  181. <image
  182. class="shrink-0 image_10"
  183. src="../../static/home/homeIconHeart.png"
  184. />
  185. <view class="font_1 text_14">心率</view>
  186. </view>
  187. <text class="self-start font_5 text_15">{{ pjxl }}</text>
  188. <text class="self-start font_6 text_16">次/分</text>
  189. </view>
  190. <view class="flex-col flex-auto justify-start shrink-0 relative home-data-chart content">
  191. <view class="echarts-wrap">
  192. <mpvue-echarts class="ec-canvas" canvasId="canvasChart-1" ref="xinlvRefChart" @onInit="onInit1"></mpvue-echarts>
  193. </view>
  194. </view>
  195. </view>
  196. <view class="flex-row home-data space-x-6">
  197. <view class="flex-col flex-auto home-data-left">
  198. <view class="flex-row space-x-4 home-data-left-title">
  199. <image
  200. class="shrink-0 image_10"
  201. src="../../static/home/homeIconBreath.png"
  202. />
  203. <text class="font_1 text_14">呼吸</text>
  204. </view>
  205. <text class="self-start font_5 text_15">{{ pjhx }}</text>
  206. <text class="self-start font_6 text_16">次/分</text>
  207. </view>
  208. <view class="flex-col flex-auto justify-start shrink-0 relative home-data-chart content">
  209. <view class="echarts-wrap">
  210. <mpvue-echarts class="ec-canvas" canvasId="canvasChart-2" ref="huxiRefChart" @onInit="onInit2"></mpvue-echarts>
  211. </view>
  212. </view>
  213. </view>
  214. <!-- <view class="cu-card article">
  215. <view class="cu-item shadow chartsBgColor">
  216. <view class="title"><view class="text-cut text-lg text-gray">心率 <text class="text-green margin-left">{{ pjxl }} 分钟/次</text></view></view>
  217. <view class="content">
  218. <view class="echarts-wrap">
  219. <mpvue-echarts class="ec-canvas" canvasId="canvasChart-1" ref="xinlvRefChart" @onInit="onInit1"></mpvue-echarts>
  220. </view>
  221. </view>
  222. </view>
  223. </view>
  224. <view class="cu-card article">
  225. <view class="cu-item shadow chartsBgColor">
  226. <view class="title"><view class="text-cut text-lg text-white">呼吸<text class="text-orange margin-left">{{ pjhx }} 分钟/次</text></view></view>
  227. <view class="content">
  228. <view class="echarts-wrap">
  229. <mpvue-echarts class="ec-canvas" canvasId="canvasChart-2" ref="huxiRefChart" @onInit="onInit2"></mpvue-echarts>
  230. </view>
  231. </view>
  232. </view>
  233. </view> -->
  234. <view class="home-btns flex-row self-center">
  235. <view @click="handleShareClick" class="btn-home-btns btn-home-btns1 items-center">
  236. <image class="shrink-0 image_btn" src="../../static/home/homeIconHeart.png" />
  237. <text class="btn-home-text">远程关爱</text>
  238. </view>
  239. <view @click="handleAlertSetting" class="btn-home-btns btn-home-btns2 items-center">
  240. <image class="shrink-0 image_btn" src="../../static/mine/myIconAlert.png" />
  241. <text class="btn-home-text">报警设置</text>
  242. </view>
  243. </view>
  244. <view class="flex-col home-alert space-y-4">
  245. <view class="flex-row items-center space-x-4 home-alert-header">
  246. <image
  247. class="image_10"
  248. src="../../static/home/homeIconHeart.png"
  249. />
  250. <text class="font_1">实时预警</text>
  251. </view>
  252. <view v-if="list_alerts.length === 0" class="flex-row items-center home_blank_alert space-x-16">
  253. <image
  254. class="image_8"
  255. src="../../static/home/homeIconGift.png"
  256. />
  257. <view class="flex-col items-start flex-auto space-y-4">
  258. <text class="font_5">昨晚您的睡眠质量很好</text>
  259. <text class="font_5">暂时没有预警信息</text>
  260. </view>
  261. </view>
  262. <view v-else class="flex-col home-alert-list">
  263. <view class="flex-row justify-between items-center list-item" :key="i" v-for="(item, i) in list_alerts">
  264. <view class="flex-row items-center space-x-6">
  265. <image
  266. class="shrink-0 image_11"
  267. src="../../static/home/homeIconAlert.png"
  268. />
  269. <text class="font_8">{{ formatSosType(item.warn_type) }}</text>
  270. <text class="font_9 text_16">{{ formatSosTime(item.warn_time) }}</text>
  271. </view>
  272. <view class="flex-row items-baseline space-x-4">
  273. <text class="font_10">{{ item.warn_desc }}</text>
  274. </view>
  275. </view>
  276. </view>
  277. </view>
  278. </view>
  279. </view>
  280. <view class="cu-modal" :class="bindShow?'show':''">
  281. <view class="cu-dialog">
  282. <view class="cu-bar bg-white justify-end">
  283. <view style="color: black" class="content">设备绑定</view>
  284. <view class="action" @tap="bindShow=false">
  285. <text class="cuIcon-close text-red"></text>
  286. </view>
  287. </view>
  288. <view class="">
  289. <form>
  290. <view class="cu-form-group solid-bottom">
  291. <view class="title">扫描二维码</view>
  292. <input type="text" v-model="bindSn" class="text-left"/>
  293. <text class="cuIcon-scan text-xxl text-green" style="font-size: 50rpx;"
  294. @click="scan"></text>
  295. </view>
  296. </form>
  297. </view>
  298. <view class="cu-bar bg-white justify-end">
  299. <view class="action">
  300. <button class="cu-btn bg-green margin-left" @tap="bindDevice">确定</button>
  301. </view>
  302. </view>
  303. </view>
  304. </view>
  305. <!-- <tab-bar currentPage="home" /> -->
  306. </view>
  307. </template>
  308. <script>
  309. import echarts from '@/static/echarts.min.js'
  310. import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue'
  311. import { API } from '@/utils/request'
  312. import Storage from '@/utils/storage'
  313. import * as API_deviceMemberBind from '@/api/device_member_bind'
  314. export default {
  315. components: {
  316. mpvueEcharts
  317. },
  318. data() {
  319. return {
  320. deviceAdded: false,
  321. list_alerts: [],
  322. active: 4,
  323. list1: [{
  324. title: '昨日就寝 11:24PM'
  325. }, {
  326. title: '就寝目标 11:00PM'
  327. }, {
  328. title: '起床目标 7:00AM'
  329. }, {
  330. title: '今日起床 7:14AM'
  331. }],
  332. chartObj1: null, // 心率图表
  333. chartObj2: null, // 呼吸图表
  334. myData1: [], // 心率数据
  335. myData2: [], // 呼吸数据
  336. myCount1: 0, // 心率x轴数字
  337. myCount2: 0, // 呼吸x轴数字
  338. allXl: 0, // 总心率
  339. pjxl: 0, // 平均心率
  340. allHx: 0, // 总呼吸
  341. pjhx: 0, // 平均呼吸
  342. sleepStatus: '离床',
  343. connecting: false,
  344. connected: false,
  345. mySocketTask: null,
  346. homeFrom: {
  347. nowDevice: '', // 当前设备
  348. status: '离线'
  349. },
  350. deviceList: [], // 设备列表
  351. lastMsgTime: 0, // 最后一次设备消息时间
  352. memberId: '',
  353. bindSn: '',
  354. bindShow: false
  355. };
  356. },
  357. onLoad() {
  358. this.memberId = 50289
  359. this.API_getDeviceList()
  360. },
  361. // onLoad() {
  362. // wx.getSetting({
  363. // complete: (res) => {
  364. // if (!res.authSetting['scope.userInfo']) {
  365. // return
  366. // }
  367. // console.log('222222222222222222222222222')
  368. // const memberId = Storage.getItem('uid')
  369. // if (memberId) {
  370. // this.memberId = memberId
  371. // console.log('this.memberId===', this.memberId)
  372. // this.API_getDeviceList()
  373. // } else {
  374. // this.checkHasLogin()
  375. // const _this = this
  376. // let initTimer = setInterval(function () {
  377. // const memberId = Storage.getItem('uid')
  378. // if (memberId) {
  379. // _this.memberId = memberId
  380. // clearInterval(initTimer)
  381. // _this.API_getDeviceList()
  382. // }
  383. // }, 500)
  384. // }
  385. // }
  386. // })
  387. //
  388. // },
  389. beforeDestroy() {
  390. this.closeWebsocket()
  391. },
  392. onShow() {
  393. const imei = Storage.getItem('nowChangeDevice')
  394. if (imei) {
  395. this.homeFrom.nowDevice = imei
  396. }
  397. },
  398. // onShow() {
  399. // const imei = Storage.getItem('nowChangeDevice')
  400. // if (imei) {
  401. // this.homeFrom.nowDevice = imei
  402. // this.deviceAdded = true
  403. // if (!this.connected && this.memberId) {
  404. // this.init()
  405. // }
  406. // } else {
  407. // this.deviceAdded = false
  408. // }
  409. // },
  410. methods: {
  411. handleShareClick() {
  412. uni.navigateTo({
  413. url: '/pages/login/index'
  414. })
  415. // uni.navigateTo({
  416. // url: '/pages/shareUser/shareUser'
  417. // })
  418. },
  419. API_getDeviceList() {
  420. const _this = this
  421. API_deviceMemberBind.getDeviceByDtypeAndMemberId({dtype: '睡眠床垫', memberId: this.memberId}).then(res => {
  422. if (res.length === 0) {
  423. _this.deviceAdded = false
  424. } else {
  425. _this.deviceAdded = true
  426. _this.deviceList = res
  427. _this.homeFrom.nowDevice = res[0].imei
  428. Storage.setItem("nowChangeDevice", _this.homeFrom.nowDevice)
  429. Storage.setItem("myBindDevices", res)
  430. if (!this.connected) {
  431. _this.init()
  432. }
  433. }
  434. })
  435. },
  436. init() {
  437. const _this = this
  438. setTimeout(() => {
  439. _this.nowChart1()
  440. _this.nowChart2()
  441. _this.connect()
  442. }, 800)
  443. },
  444. connect() {
  445. let _this = this
  446. this.connecting = true
  447. let wsUrl = API.base.replace('http', 'ws')
  448. this.mySocketTask = uni.connectSocket({
  449. // url: wsUrl + '/sleep_report/monitor/' + this.memberId,
  450. url: 'ws://wdkl.natapp1.cc/sleep_report/monitor/' + this.memberId,
  451. success(res) {
  452. // 这里是接口调用成功的回调,不是连接成功的回调,请注意
  453. },
  454. fail(err) {
  455. // 这里是接口调用失败的回调,不是连接失败的回调,请注意
  456. }
  457. })
  458. this.mySocketTask.onOpen(res => {
  459. this.connecting = false
  460. this.connected = true
  461. uni.hideLoading()
  462. let _this = this
  463. this.timer = setInterval(function () { //每隔5秒钟发送一次心跳,避免websocket连接因超时而自动断开
  464. if (Date.parse(new Date()) - _this.lastMsgTime > 5000) { // 5秒没有收到新消息,则判断为离线
  465. _this.homeFrom.status = '离线'
  466. _this.sleepStatus = '离线'
  467. _this.pjxl = '--'
  468. _this.pjhx = '--'
  469. }
  470. _this.mySocketTask.send({data: 'ping'})
  471. }, 30000) // 30秒的心跳包
  472. })
  473. this.mySocketTask.onError(err => {
  474. this.connecting = false
  475. this.connected = false
  476. uni.hideLoading()
  477. uni.showModal({
  478. content: '连接失败,可能是websocket服务不可用,请稍后再试',
  479. showCancel: false
  480. })
  481. console.log('onError', err)
  482. })
  483. this.mySocketTask.onMessage(res => {
  484. let msg = res.data
  485. // console.log('收到消息:', msg)
  486. if (msg.length === 30) {
  487. if (this.homeFrom.nowDevice !== msg.substring(2, 14)) {
  488. return
  489. }
  490. this.homeFrom.status = '在线'
  491. this.lastMsgTime = Date.parse(new Date())
  492. this.getValue1(parseInt(msg.substring(22, 24), 16))
  493. this.getValue2(parseInt(msg.substring(24, 26), 16))
  494. switch (msg.substring(26, 28)) {
  495. case "03":
  496. this.sleepStatus = '在床'
  497. break;
  498. case "04":
  499. this.sleepStatus = '离床'
  500. break;
  501. case "05":
  502. this.sleepStatus = '打鼾'
  503. break;
  504. case "06":
  505. this.sleepStatus = '体动'
  506. break;
  507. default:
  508. break;
  509. }
  510. } else {
  511. const data = JSON.parse(res.data)
  512. console.log('收到消息为:', data)
  513. if (data.sn && this.homeFrom.nowDevice === data.sn) {
  514. this.list_alerts.push(data)
  515. }
  516. }
  517. })
  518. this.mySocketTask.onClose(res => {
  519. this.connected = false
  520. this.msg = false
  521. clearInterval(this.timer)
  522. })
  523. },
  524. nowChart1() {
  525. this.onInit1(this.chartObj1)
  526. let canvas = this.$refs.xinlvRefChart.canvas
  527. echarts.setCanvasCreator(() => canvas)
  528. this.myChart1 = echarts.init(canvas, 'halloween', {
  529. width: this.chartObj1.width,
  530. height: this.chartObj1.height
  531. })
  532. this.options1 = Object.assign(this.getOptions('#FFFFFF', 800), {})
  533. this.options1.series.forEach((item) => {
  534. item.data = this.myData1
  535. })
  536. this.myChart1.setOption(this.options1)
  537. },
  538. nowChart2() {
  539. this.onInit2(this.chartObj2);
  540. let canvas = this.$refs.huxiRefChart.canvas;
  541. echarts.setCanvasCreator(() => canvas);
  542. this.myChart2 = echarts.init(canvas, 'halloween', {
  543. width: this.chartObj2.width,
  544. height: this.chartObj2.height
  545. });
  546. this.options2 = Object.assign(this.getOptions('#06f5d2', 400), {})
  547. this.options2.series.forEach((item) => {
  548. item.data = this.myData2
  549. })
  550. this.myChart2.setOption(this.options2)
  551. },
  552. onInit1(e) {
  553. this.chartObj1 = e
  554. },
  555. onInit2(e) {
  556. this.chartObj2 = e
  557. },
  558. getOptions(color, xMax) {
  559. return {
  560. visualMap: [
  561. {
  562. show: false,
  563. type: 'continuous',
  564. seriesIndex: 0,
  565. min: 0,
  566. max: 300,
  567. },
  568. ],
  569. color: color,
  570. title: {
  571. left: 'left',
  572. // text: title,
  573. },
  574. tooltip: {
  575. trigger: 'axis',
  576. axisPointer: {
  577. animation: false,
  578. },
  579. },
  580. grid: {
  581. top: '15%',
  582. bottom: '10%',
  583. },
  584. xAxis: {
  585. type: 'category',
  586. boundaryGap: [0, '100%'],
  587. show: false, // 不显示x轴
  588. splitLine: {
  589. show: false,
  590. },
  591. triggerEvent: true
  592. },
  593. yAxis: {
  594. type: 'value',
  595. boundaryGap: [0, '100%'],
  596. min: 0,
  597. max: xMax,
  598. // max: 'dataMax', // 取数据在该轴上的最大值作为最大刻度
  599. splitLine: {
  600. show: false, // 是否显示分隔线
  601. },
  602. axisLine: {
  603. show: false, // 是否显示坐标轴轴线
  604. lineStyle:{
  605. color:'#FFFFFF',
  606. width:1, //x轴线的宽度
  607. }
  608. },
  609. },
  610. series: [
  611. {
  612. type: 'line',
  613. showSymbol: false,
  614. hoverAnimation: false,
  615. data: [],
  616. },
  617. ]
  618. }
  619. },
  620. getValue1(value) {
  621. // console.log("心率是", value)
  622. this.pjxl = value
  623. if (this.myData1.length > 60) {
  624. this.myData1.splice(0,5)
  625. }
  626. if (value !== 0) {
  627. for (let i = 0; i < 5; i++) {
  628. this.myCount1 ++;
  629. value = parseInt(Math.random(100) * 500 + 300)
  630. this.myData1.push([this.myCount1, value])
  631. }
  632. } else {
  633. for (let i = 0; i < 5; i++) {
  634. this.myCount1 ++;
  635. value = 410 + parseInt(Math.random() * 50 - 30)
  636. this.myData1.push([this.myCount1, value])
  637. }
  638. }
  639. this.myChart1.setOption(this.options1)
  640. },
  641. getValue2(value) {
  642. // console.log("呼吸值是", value)
  643. this.pjhx = value
  644. if (this.myData2.length > 60) {
  645. this.myData2.splice(0,5)
  646. }
  647. if (value === 0) {
  648. for (let i = 0; i < 5; i++) {
  649. this.myCount2 ++;
  650. value = 220 + parseInt(Math.random() * 10 - 5)
  651. this.myData2.push([this.myCount2, value])
  652. }
  653. } else {
  654. value = parseInt((Math.random(10) * 300 + 100))
  655. for (let i = 0; i < 5; i++) {
  656. this.myCount2 ++;
  657. value += parseInt(Math.random() * 10 - 5)
  658. this.myData2.push([this.myCount2, value])
  659. }
  660. }
  661. this.myChart2.setOption(this.options2)
  662. },
  663. handleAlertSetting() {
  664. uni.navigateTo({
  665. url: "/pages/alertSetting/alertSetting?imei=" + this.homeFrom.nowDevice
  666. });
  667. },
  668. formatSosType(value) {
  669. switch (value) {
  670. case 1:
  671. return '心率过速'
  672. case 2:
  673. return '心率过缓'
  674. case 3:
  675. return '呼吸过速'
  676. case 4:
  677. return '呼吸过缓'
  678. case 5:
  679. return '离床预警'
  680. case 6:
  681. return '一键预警'
  682. case 7:
  683. return '离线预警'
  684. default:
  685. break;
  686. }
  687. },
  688. formatSosTime(value) {
  689. return value.substring(10, value.length - 3)
  690. },
  691. // 扫描条码
  692. scan() {
  693. let _this = this
  694. uni.scanCode({
  695. success: function (res) {
  696. console.log(res, res.result.length)
  697. if (res.result.length > 20) {
  698. if (res.scanType === 'QR_CODE') {
  699. const urlStr = res.result
  700. const qs = Foundation.getQueryObject(urlStr)
  701. if (qs.mac) {
  702. _this.bindSn = qs.mac
  703. } else {
  704. uni.showToast({
  705. title: '请扫码正确的睡眠床垫二维码',
  706. icon: 'none'
  707. })
  708. }
  709. } else {
  710. _this.bindSn = res.result
  711. }
  712. } else {
  713. _this.bindSn = res.result
  714. }
  715. },
  716. fail: (err) => {
  717. console.log(err)
  718. // #ifdef MP
  719. uni.getSetting({
  720. success: (res) => {
  721. let authStatus = res.authSetting['scope.camera'];
  722. if (!authStatus) {
  723. uni.showModal({
  724. title: '授权失败',
  725. content: 'app需要使用您的相机,请在设置界面打开相关权限',
  726. success: (res) => {
  727. if (res.confirm) {
  728. uni.openSetting()
  729. }
  730. }
  731. })
  732. }
  733. }
  734. })
  735. // #endif
  736. }
  737. })
  738. },
  739. bindDevice() {
  740. const params = {
  741. imei: this.bindSn,
  742. memberId: this.memberId,
  743. dtype: '睡眠床垫'
  744. }
  745. this.bindShow = false
  746. let _this = this
  747. API_deviceMemberBind.bindDeviceByDtype(params).then(res => {
  748. if (res.success) {
  749. _this.bindSn = ''
  750. uni.showToast({
  751. title: '绑定成功',
  752. })
  753. _this.API_getDeviceList()
  754. } else {
  755. uni.showToast({
  756. title: res.message,
  757. icon: 'none'
  758. })
  759. }
  760. })
  761. },
  762. addBindDevice() {
  763. if (this.memberId) {
  764. this.bindShow = 'show'
  765. } else {
  766. uni.showModal({
  767. title: '提示',
  768. content: "您还没有登录,是否前往登录?",
  769. confirmText: "确定",
  770. showCancel: true,
  771. success: function(res) {
  772. if (res.confirm) {
  773. uni.reLaunch({
  774. url:'/pages/auth/auth'
  775. })
  776. }
  777. }
  778. })
  779. }
  780. },
  781. closeWebsocket() {
  782. if (this.mySocketTask) {
  783. this.mySocketTask.close({
  784. success(res) {
  785. this.connected = false
  786. clearInterval(this.timer)
  787. console.log("关闭成功", res)
  788. },
  789. fail(err) {
  790. console.log("关闭失败", err)
  791. }
  792. })
  793. }
  794. }
  795. }
  796. };
  797. </script>
  798. <style lang="scss" scoped>
  799. .echarts-wrap {
  800. width: 100%;
  801. height: 80px;
  802. /*padding: 10upx;*/
  803. margin-bottom: 0.3rem
  804. }
  805. .chartsBgColor{
  806. background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
  807. }
  808. .equal-division {
  809. .equal-division-item {
  810. padding: 0.25rem 0.38rem 0;
  811. flex: 1 1 10.81rem;
  812. }
  813. }
  814. .home_add_devive {
  815. margin-right: 1.25rem;
  816. margin: 1rem;
  817. padding: 3.75rem 0;
  818. background-color: #0233c699;
  819. border-radius: 1rem;
  820. backdrop-filter: blur(0.63rem);
  821. .image_4 {
  822. width: 1.5rem;
  823. height: 1.5rem;
  824. }
  825. .text_5 {
  826. color: #ffffff;
  827. font-size: 1.5rem;
  828. font-family: PingFangSC;
  829. line-height: 1.38rem;
  830. }
  831. }
  832. .space-x-10 {
  833. & > view:not(:first-child),
  834. & > text:not(:first-child),
  835. & > image:not(:first-child) {
  836. margin-left: 0.63rem;
  837. }
  838. }
  839. .home_ad {
  840. margin-left: 2.25rem;
  841. background: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/602647C38F5E4168B4F16AFFFE2270CA.png");
  842. background-repeat: no-repeat;
  843. background-size: contain;
  844. .text_6 {
  845. padding: 0.13rem 0;
  846. color: #ffffff;
  847. font-size: 1rem;
  848. font-family: PingFangSC;
  849. line-height: 0.94rem;
  850. }
  851. .section_4 {
  852. padding: 0.13rem 0.38rem;
  853. background-image: linear-gradient(90deg, #2c25f799 0%, #061599 100%);
  854. border-radius: 0.44rem;
  855. width: 2.88rem;
  856. height: 0.88rem;
  857. .font_2 {
  858. font-size: 0.69rem;
  859. font-family: PingFangSC;
  860. line-height: 0.63rem;
  861. color: #ffffff;
  862. }
  863. .text_7 {
  864. font-size: 0.63rem;
  865. line-height: 0.56rem;
  866. }
  867. .image_5 {
  868. width: 0.19rem;
  869. height: 0.31rem;
  870. }
  871. }
  872. }
  873. .space-x-6 {
  874. & > view:not(:first-child),
  875. & > text:not(:first-child),
  876. & > image:not(:first-child) {
  877. margin-left: 0.38rem;
  878. }
  879. }
  880. .group_5 {
  881. padding-left: 1rem;
  882. padding-right: 1rem;
  883. .font_2 {
  884. font-size: 0.69rem;
  885. font-family: PingFangSC;
  886. line-height: 0.63rem;
  887. color: #ffffff;
  888. }
  889. .text_8 {
  890. font-size: 0.63rem;
  891. line-height: 0.59rem;
  892. opacity: 0.6;
  893. }
  894. .home_blank_heart {
  895. margin-top: 1rem;
  896. opacity: 1;
  897. border-radius: 16px;
  898. background: linear-gradient(180deg, rgba(52, 26, 75, 1) 0%, rgba(22, 125, 242, 1) 100%);
  899. backdrop-filter: blur(20px);
  900. padding:1rem 0rem 2rem 1rem;
  901. .group_7 {
  902. padding-bottom: 1.13rem;
  903. .image_6 {
  904. width: 1.13rem;
  905. height: 0.88rem;
  906. }
  907. .text_9 {
  908. line-height: 1.03rem;
  909. }
  910. }
  911. .view {
  912. margin-right: -20.13rem;
  913. }
  914. .text_10 {
  915. margin-right: 18.75rem;
  916. margin-top: 1rem;
  917. }
  918. }
  919. .home_blank_breath {
  920. margin-top: 1rem;
  921. opacity: 1;
  922. border-radius: 16px;
  923. background: linear-gradient(180deg, rgba(52, 26, 75, 1) 0%, rgba(22, 125, 242, 1) 100%);
  924. backdrop-filter: blur(20px);
  925. padding:1rem 0rem 2rem 1rem;
  926. .group_10 {
  927. padding-bottom: 1.25rem;
  928. .image_7 {
  929. width: 1.13rem;
  930. height: 1.06rem;
  931. }
  932. .text_12 {
  933. line-height: 1rem;
  934. }
  935. }
  936. .view_2 {
  937. margin-right: -20rem;
  938. }
  939. .text_13 {
  940. margin-right: 18.63rem;
  941. margin-top: 1rem;
  942. }
  943. }
  944. .space-x-4 {
  945. & > view:not(:first-child),
  946. & > text:not(:first-child),
  947. & > image:not(:first-child) {
  948. margin-left: 0.25rem;
  949. }
  950. }
  951. .font_1 {
  952. font-size: 1.13rem;
  953. font-family: PingFangSC;
  954. line-height: 1.06rem;
  955. color: #ffffff;
  956. }
  957. .section_5 {
  958. background-color: #ffffff1a;
  959. width: 15.94rem;
  960. height: 0.063rem;
  961. }
  962. .font_3 {
  963. font-size: 2.5rem;
  964. font-family: PingFangSC;
  965. line-height: 0.19rem;
  966. color: #ffffff;
  967. }
  968. .group_8 {
  969. margin-top: 1.38rem;
  970. padding-left: 0.63rem;
  971. .font_4 {
  972. font-size: 0.69rem;
  973. font-family: PingFangSC;
  974. line-height: 0.63rem;
  975. color: #ffffff80;
  976. }
  977. .text_11 {
  978. font-size: 0.75rem;
  979. line-height: 0.69rem;
  980. }
  981. }
  982. }
  983. .home_blank_alert {
  984. margin: 1rem 1.25rem 0;
  985. padding: 0.94rem;
  986. background-color: #02299ecc;
  987. border-radius: 1rem;
  988. .image_8 {
  989. width: 7.06rem;
  990. height: 4.94rem;
  991. }
  992. .space-y-4 {
  993. & > view:not(:first-child),
  994. & > text:not(:first-child),
  995. & > image:not(:first-child) {
  996. margin-top: 0.25rem;
  997. }
  998. .font_5 {
  999. font-size: 0.88rem;
  1000. font-family: PingFangSC;
  1001. line-height: 1.06rem;
  1002. color: #167df2;
  1003. }
  1004. }
  1005. }
  1006. .space-x-16 {
  1007. & > view:not(:first-child),
  1008. & > text:not(:first-child),
  1009. & > image:not(:first-child) {
  1010. margin-left: 1rem;
  1011. }
  1012. }
  1013. .container-bg {
  1014. position: fixed;
  1015. left: -130px;
  1016. top: -130px;
  1017. width: 480px;
  1018. height: 344px;
  1019. opacity: 1;
  1020. overflow: hidden;
  1021. border-radius: 63px;
  1022. -webkit-transform: rotate(-315deg);
  1023. transform: rotate(-315deg);
  1024. background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
  1025. }
  1026. .home-container {
  1027. padding-bottom: 2rem;
  1028. background-color: #000000;
  1029. width: 100%;
  1030. overflow-y: auto;
  1031. overflow-x: hidden;
  1032. height: 100%;
  1033. .home-module {
  1034. padding: 1.75rem 0 3.38rem;
  1035. overflow-y: auto;
  1036. z-index: 100;
  1037. .home-header {
  1038. padding: 0 1.25rem;
  1039. .home-header-title {
  1040. color: #ffffff;
  1041. font-size: 1.25rem;
  1042. font-family: PingFangSC;
  1043. line-height: 1.16rem;
  1044. }
  1045. .text_8 {
  1046. color: #ffffff;
  1047. opacity: 1;
  1048. }
  1049. .text_3 {
  1050. opacity: 0.6;
  1051. }
  1052. .home-header-subtitle {
  1053. line-height: 0.72rem;
  1054. }
  1055. .space-x-10 {
  1056. & > view:not(:first-child),
  1057. & > text:not(:first-child),
  1058. & > image:not(:first-child) {
  1059. margin-left: 0.63rem;
  1060. }
  1061. .text_10 {
  1062. line-height: 0.59rem;
  1063. }
  1064. .text_11 {
  1065. line-height: 0.47rem;
  1066. }
  1067. }
  1068. }
  1069. .space-y-10 {
  1070. & > view:not(:first-child),
  1071. & > text:not(:first-child),
  1072. & > image:not(:first-child) {
  1073. margin-top: 0.63rem;
  1074. }
  1075. }
  1076. .home-device {
  1077. margin: 1rem 1.25rem;
  1078. padding-bottom: 2rem;
  1079. background-color: #0233c699;
  1080. border-radius: 1rem;
  1081. backdrop-filter: blur(0.63rem);
  1082. .home-device-setting {
  1083. width: 70px;
  1084. height: 20px;
  1085. opacity: 1;
  1086. border-radius: 7px;
  1087. background: linear-gradient(90deg, rgba(255, 35, 247, 1) 0%, rgba(91, 30, 154, 1) 100%);
  1088. .image_8 {
  1089. width: 10px;
  1090. height: 10px;
  1091. }
  1092. font-size: 10px;
  1093. font-weight: 400;
  1094. line-height: 10px;
  1095. color: rgba(255, 255, 255, 1);
  1096. padding: 0.3rem;
  1097. }
  1098. .home-device-header {
  1099. background-color: #ffffff33;
  1100. border-radius: 1rem 1rem 0px 0px;
  1101. .equal-division {
  1102. padding: 0 1rem;
  1103. .equal-division-item {
  1104. padding: 0.38rem 0;
  1105. .text_5 {
  1106. opacity: 0.5;
  1107. }
  1108. }
  1109. .space-x-14 {
  1110. & > view:not(:first-child),
  1111. & > text:not(:first-child),
  1112. & > image:not(:first-child) {
  1113. margin-left: 0.88rem;
  1114. }
  1115. }
  1116. }
  1117. .section_5 {
  1118. padding: 0.38rem 0.5rem;
  1119. background-image: linear-gradient(90deg, #2c25f799 0%, #061599 100%);
  1120. border-radius: 0px 1rem 0px 0px;
  1121. height: 1.5rem;
  1122. .image_8 {
  1123. width: 0.75rem;
  1124. height: 0.75rem;
  1125. }
  1126. }
  1127. }
  1128. .home-device-status {
  1129. padding: 0.25rem 0 0.25rem 0.25rem;
  1130. background-color: #ffffff33;
  1131. border-radius: 0.75rem;
  1132. width: 7.88rem;
  1133. .text_7 {
  1134. opacity: 0.4;
  1135. }
  1136. }
  1137. }
  1138. .space-y-15 {
  1139. & > view:not(:first-child),
  1140. & > text:not(:first-child),
  1141. & > image:not(:first-child) {
  1142. margin-top: 0.94rem;
  1143. }
  1144. }
  1145. .font_3 {
  1146. font-size: 0.75rem;
  1147. font-family: PingFangSC;
  1148. line-height: 0.69rem;
  1149. color: #ffffff;
  1150. }
  1151. .home-report {
  1152. margin: 0 1.25rem;
  1153. padding: 1rem 0;
  1154. background-image: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/050F95EFCA914FD6A72537F41ACEFC33.png");
  1155. background-size: contain;
  1156. background-repeat: no-repeat;
  1157. .space-y-6 {
  1158. & > view:not(:first-child),
  1159. & > text:not(:first-child),
  1160. & > image:not(:first-child) {
  1161. margin-top: 0.38rem;
  1162. }
  1163. }
  1164. }
  1165. .home-ad {
  1166. margin: 0 1.25rem;
  1167. padding: 1rem 0;
  1168. background-image: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/602647C38F5E4168B4F16AFFFE2270CA.png");
  1169. background-size: contain;
  1170. background-repeat: no-repeat;
  1171. .space-y-6 {
  1172. & > view:not(:first-child),
  1173. & > text:not(:first-child),
  1174. & > image:not(:first-child) {
  1175. margin-top: 0.38rem;
  1176. }
  1177. }
  1178. }
  1179. .home-data {
  1180. background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
  1181. margin: 0rem 1.25rem;
  1182. padding: 1rem 0rem;
  1183. border-radius: 1rem;
  1184. padding: 1rem;
  1185. margin-top: 1rem;
  1186. .home-data-item {
  1187. padding: 1rem 0rem;
  1188. margin: 0 0.3rem;
  1189. opacity: 1;
  1190. border-radius: 16px;
  1191. background: linear-gradient(180deg, rgba(52, 26, 75, 0.65) 0%, rgba(22, 125, 242, 1) 100%);
  1192. backdrop-filter: blur(20px);
  1193. }
  1194. }
  1195. .group_6 {
  1196. overflow-x: hidden;
  1197. width: 100%;
  1198. .group_7 {
  1199. overflow-x: hidden;
  1200. width: 10rem;
  1201. .group_9 {
  1202. margin-left: 2.25rem;
  1203. }
  1204. .text_14 {
  1205. margin-top: 3.5rem;
  1206. }
  1207. }
  1208. .group_8 {
  1209. width: 10rem;
  1210. .text_15 {
  1211. margin-top: 3.63rem;
  1212. }
  1213. }
  1214. .font_6 {
  1215. font-size: 3rem;
  1216. font-family: PingFangSC;
  1217. line-height: 2.19rem;
  1218. color: #ffffff;
  1219. }
  1220. .font_7 {
  1221. font-size: 0.75rem;
  1222. font-family: PingFangSC;
  1223. line-height: 0.69rem;
  1224. color: #ffffff80;
  1225. }
  1226. }
  1227. .space-y-40 {
  1228. & > view:not(:first-child),
  1229. & > text:not(:first-child),
  1230. & > image:not(:first-child) {
  1231. margin-top: 2.5rem;
  1232. }
  1233. }
  1234. .space-x-8 {
  1235. & > view:not(:first-child),
  1236. & > text:not(:first-child),
  1237. & > image:not(:first-child) {
  1238. margin-left: 0.5rem;
  1239. }
  1240. .text_8 {
  1241. padding: 0.13rem 0;
  1242. }
  1243. .section_7 {
  1244. padding: 0.13rem 0.38rem;
  1245. background-image: linear-gradient(90deg, #ff23f7 0%, #5b1e9a 100%);
  1246. border-radius: 0.44rem;
  1247. height: 0.88rem;
  1248. .text_9 {
  1249. line-height: 0.56rem;
  1250. }
  1251. .image_9 {
  1252. width: 0.19rem;
  1253. height: 0.31rem;
  1254. }
  1255. }
  1256. }
  1257. .font_4 {
  1258. font-size: 1rem;
  1259. font-family: PingFangSC;
  1260. line-height: 0.94rem;
  1261. color: #ffffff;
  1262. }
  1263. .font_5 {
  1264. font-size: 0.63rem;
  1265. font-family: PingFangSC;
  1266. color: #ffffff;
  1267. }
  1268. .space-x-6 {
  1269. & > view:not(:first-child),
  1270. & > text:not(:first-child),
  1271. & > image:not(:first-child) {
  1272. margin-left: 0.38rem;
  1273. }
  1274. .text_6 {
  1275. line-height: 0.56rem;
  1276. }
  1277. .image_7 {
  1278. width: 1.31rem;
  1279. height: 0.69rem;
  1280. }
  1281. .image_11 {
  1282. width: 1.13rem;
  1283. height: 0.94rem;
  1284. }
  1285. .font_9 {
  1286. font-size: 0.88rem;
  1287. font-family: PingFangSC;
  1288. line-height: 0.69rem;
  1289. color: #ced5dc;
  1290. }
  1291. .text_16 {
  1292. line-height: 0.63rem;
  1293. }
  1294. }
  1295. .space-x-4 {
  1296. & > view:not(:first-child),
  1297. & > text:not(:first-child),
  1298. & > image:not(:first-child) {
  1299. margin-left: 0.25rem;
  1300. }
  1301. .image_6 {
  1302. width: 0.94rem;
  1303. height: 0.75rem;
  1304. }
  1305. .image_10 {
  1306. width: 1.13rem;
  1307. height: 0.88rem;
  1308. }
  1309. .font_1 {
  1310. font-size: 1.13rem;
  1311. font-family: PingFangSC;
  1312. line-height: 1.03rem;
  1313. color: #ffffff;
  1314. }
  1315. .image_4 {
  1316. width: 1.13rem;
  1317. height: 1.06rem;
  1318. }
  1319. .text_12 {
  1320. line-height: 1rem;
  1321. }
  1322. .font_10 {
  1323. font-size: 1.13rem;
  1324. font-family: PingFangSC;
  1325. line-height: 0.81rem;
  1326. color: #ff465a;
  1327. }
  1328. }
  1329. .home-alert {
  1330. margin: 0rem 1.25rem 0 1.25rem;
  1331. padding: 1rem 0.88rem 0.13rem;
  1332. background-color: #0233c6cc;
  1333. border-radius: 1rem;
  1334. .home-alert-header {
  1335. }
  1336. .home-alert-list {
  1337. .list-item {
  1338. padding: 0.88rem 0;
  1339. border-bottom: solid 0.063rem #ffffff1a;
  1340. }
  1341. }
  1342. }
  1343. .space-y-4 {
  1344. & > view:not(:first-child),
  1345. & > text:not(:first-child),
  1346. & > image:not(:first-child) {
  1347. margin-top: 0.25rem;
  1348. }
  1349. }
  1350. .font_8 {
  1351. font-size: 0.88rem;
  1352. font-family: PingFangSC;
  1353. line-height: 0.81rem;
  1354. color: #ffffff;
  1355. }
  1356. }
  1357. .space-y-20 {
  1358. & > view:not(:first-child),
  1359. & > text:not(:first-child),
  1360. & > image:not(:first-child) {
  1361. margin-top: 1.25rem;
  1362. }
  1363. .text_13 {
  1364. line-height: 2.16rem;
  1365. }
  1366. }
  1367. }
  1368. .home-data {
  1369. margin-top: 3.5rem;
  1370. overflow-x: hidden;
  1371. .home-data-left {
  1372. .space-x-4 {
  1373. & > view:not(:first-child),
  1374. & > text:not(:first-child),
  1375. & > image:not(:first-child) {
  1376. margin-left: 0.25rem;
  1377. }
  1378. .image_10 {
  1379. width: 1.13rem;
  1380. height: 1.06rem;
  1381. }
  1382. .font_1 {
  1383. font-size: 1.13rem;
  1384. font-family: PingFangSC;
  1385. line-height: 1.03rem;
  1386. color: #ffffff;
  1387. }
  1388. .text_14 {
  1389. line-height: 1rem;
  1390. }
  1391. }
  1392. .home-data-left-title {
  1393. width: max-content;
  1394. }
  1395. .font_5 {
  1396. font-size: 2.5rem;
  1397. font-family: PingFangSC;
  1398. line-height: 1.81rem;
  1399. color: #ffffff;
  1400. }
  1401. .text_15 {
  1402. margin-top: 1.25rem;
  1403. }
  1404. .font_6 {
  1405. font-size: 0.75rem;
  1406. font-family: PingFangSC;
  1407. line-height: 0.69rem;
  1408. color: #ffffff80;
  1409. }
  1410. .text_16 {
  1411. margin-top: 0.75rem;
  1412. }
  1413. }
  1414. .home-data-chart {
  1415. overflow-x: hidden;
  1416. width: 100%;
  1417. .group_10 {
  1418. padding-left: 2.06rem;
  1419. padding-bottom: 2.25rem;
  1420. overflow-x: hidden;
  1421. .image_11 {
  1422. width: 8.75rem;
  1423. height: 3.44rem;
  1424. }
  1425. .image_12 {
  1426. width: 7.06rem;
  1427. height: 3.38rem;
  1428. }
  1429. .image_13 {
  1430. width: 10rem;
  1431. height: 3.44rem;
  1432. }
  1433. .pos_8 {
  1434. position: absolute;
  1435. left: 0;
  1436. bottom: 0.063rem;
  1437. }
  1438. .image_14 {
  1439. width: 6.06rem;
  1440. height: 3.44rem;
  1441. }
  1442. .pos_10 {
  1443. position: absolute;
  1444. right: 1.25rem;
  1445. bottom: 0;
  1446. }
  1447. .pos_9 {
  1448. position: absolute;
  1449. left: 0;
  1450. top: 2.31rem;
  1451. }
  1452. }
  1453. .section_9 {
  1454. background-color: #ffffff1a;
  1455. width: 15.94rem;
  1456. height: 0.063rem;
  1457. }
  1458. .pos_11 {
  1459. position: absolute;
  1460. left: 0;
  1461. top: 5.5rem;
  1462. }
  1463. }
  1464. }
  1465. .space-x-6 {
  1466. & > view:not(:first-child),
  1467. & > text:not(:first-child),
  1468. & > image:not(:first-child) {
  1469. margin-left: 0.38rem;
  1470. }
  1471. }
  1472. .home-btns {
  1473. .btn-home-btns2 {
  1474. background: linear-gradient(90deg, rgba(5, 96, 232, 1) 0%, rgba(100, 158, 245, 1) 100%);
  1475. }
  1476. .btn-home-btns1 {
  1477. background: linear-gradient(90deg, rgba(44, 37, 247, 0.6) 0%, rgba(6, 21, 153, 1) 100%);
  1478. }
  1479. .btn-home-btns {
  1480. border-radius: 1.3rem;
  1481. width: 8rem;
  1482. height: 2.6rem;
  1483. margin: 1rem 0.5rem;
  1484. text-align: center;
  1485. font-size: 1.1rem;
  1486. font-weight: 500;
  1487. letter-spacing: 0px;
  1488. line-height: 2.6rem;
  1489. .image_btn {
  1490. width: 1.4rem;
  1491. height: 1.4rem;
  1492. vertical-align: middle;
  1493. margin-right: 0.2rem;
  1494. }
  1495. .btn-home-text {
  1496. color: #ffffff;
  1497. }
  1498. }
  1499. }
  1500. </style>