index.vue 44 KB

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