睡眠新增功能
This commit is contained in:
weidizhu_admin
parent
c9c42deac7
commit
55c0bb3d52
|
|
@ -5,11 +5,11 @@ import {
|
|||
} from '@/config/api.js'
|
||||
|
||||
export const code = (data) => {
|
||||
return post('/watch/captcha/getCaptcha', data)
|
||||
return post('watch/captcha/getCaptcha', data)
|
||||
}
|
||||
|
||||
export const dologin = (data) => {
|
||||
return post('/watch/login/dologin', data)
|
||||
return post('watch/login/dologin', data)
|
||||
}
|
||||
|
||||
export const sendSms = (data) => {
|
||||
|
|
|
|||
|
|
@ -18,4 +18,9 @@
|
|||
}
|
||||
.flx_wp{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.radius_box{
|
||||
background-color: #fff;
|
||||
border-radius: 40rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<view>
|
||||
<canvas id="myCanvas" :canvas-id="canvasId" style="width: 100%; height: 60px;"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name:"sleep-list-data",
|
||||
props:{
|
||||
dataList:Array,
|
||||
canvasId:String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
dataList(newVal,oldVal){
|
||||
if(newVal.length > 0){
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('#myCanvas').boundingClientRect(data => {
|
||||
if (data) {
|
||||
// data.width就是画布的宽度
|
||||
let canvasWidth = data.width;
|
||||
this.doDraw(canvasWidth)
|
||||
}
|
||||
}).exec();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
doDraw(canvasWidth){
|
||||
const colorArr = [
|
||||
'#e933dd',
|
||||
'#6452da',
|
||||
'#4faffc'
|
||||
]
|
||||
const heightArr = [
|
||||
40,
|
||||
20,
|
||||
0
|
||||
]
|
||||
let current = 0;
|
||||
let times = 0;
|
||||
// 计算出每个线条的宽度
|
||||
const oneLineWidth = (this.dataList.length / canvasWidth).toFixed(2)
|
||||
const ctx = uni.createCanvasContext(this.canvasId, this);
|
||||
// 设置填充颜色为红色
|
||||
this.dataList.map((v,i) => {
|
||||
// if(current == v){
|
||||
// times += 1;
|
||||
// }else{
|
||||
ctx.setFillStyle(colorArr[parseInt(v)]);
|
||||
// 绘制矩形
|
||||
ctx.fillRect((i * oneLineWidth).toFixed(2), heightArr[parseInt(v)],oneLineWidth, 20);
|
||||
// current = v;
|
||||
// times = 1
|
||||
// }
|
||||
|
||||
})
|
||||
|
||||
// 将绘制的内容渲染到画布
|
||||
ctx.draw();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="canvas_box">
|
||||
<canvas canvas-id="circleCanvas" style="width: 480rpx; height: 480rpx;margin: 0 auto;"></canvas>
|
||||
<canvas canvas-id="circleCanvas" style="width: 250px; height: 250px;margin: 0 auto;"></canvas>
|
||||
<view class="" style="height: 40rpx;">
|
||||
|
||||
</view>
|
||||
|
|
@ -44,17 +44,140 @@
|
|||
|
||||
</view>
|
||||
</view>
|
||||
<view class="radius_box" style="margin: 20rpx;margin-top: 40rpx ;">
|
||||
<view class="flx flx_sb title_box">
|
||||
<view class="title">
|
||||
{{sleep.shen}}
|
||||
</view>
|
||||
</view>
|
||||
<sleep-list-data :canvas-id="'sleep-canvas-id'" :dataList="sleepList"></sleep-list-data>
|
||||
<view class="flx flx_sb flx_ac" style="margin-top: 20rpx;">
|
||||
<view class="flx flx_ac">
|
||||
<view class="flx flx_ac">
|
||||
<image src="../../static/icon/sleep.png" style="width: 30rpx;margin-right: 5rpx;" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="small-title">
|
||||
23:20 , 07/29
|
||||
</view>
|
||||
</view>
|
||||
<view class="flx flx_ac">
|
||||
<view class="small-title">
|
||||
23:20 , 07/29
|
||||
</view>
|
||||
<view class="flx flx_ac">
|
||||
<image src="../../static/image/richu.png" style="width: 50rpx;" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="radius_box" style="margin: 20rpx;padding-bottom: 20rpx;margin-top: 40rpx;">
|
||||
<view class="" style="font-size: 26rpx;margin-bottom: 30rpx;">
|
||||
睡眠阶段
|
||||
</view>
|
||||
<view class="flx flx_sb">
|
||||
<view class="">
|
||||
<view style="width: 200rpx; height:200rpx;background-color: #fff;"><l-echart ref="chartRef" @finished="init"></l-echart></view>
|
||||
</view>
|
||||
<view class="flx flx_sb" style="width: 100%;margin-left: 40rpx;flex-direction: column;padding: 20rpx 0;padding-right: 40rpx;">
|
||||
<view class="flx flx_sb line">
|
||||
<view class="flx small-title flx_ac">
|
||||
<view class="dian0 yuan" style="margin-right: 10rpx;">
|
||||
</view>
|
||||
<view class="">
|
||||
深睡
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="c0">
|
||||
{{ sleepData.shen }}%
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flx flx_sb line">
|
||||
<view class="flx small-title flx_ac">
|
||||
<view class="dian1 yuan" style="margin-right: 10rpx;">
|
||||
</view>
|
||||
<view class="">
|
||||
浅睡
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="c1">
|
||||
{{ sleepData.qian }}%
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flx flx_sb line">
|
||||
<view class="flx small-title flx_ac">
|
||||
<view class="dian2 yuan" style="margin-right: 10rpx;">
|
||||
</view>
|
||||
<view class="">
|
||||
快速动眼
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="c2">
|
||||
{{ sleepData.kuai }}%
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="radius_box" style="margin: 20rpx;padding-bottom: 20rpx;margin-top: 40rpx;">
|
||||
<view class="flx flx_sb title_box flx_ac">
|
||||
<view class="title" >
|
||||
目标
|
||||
</view>
|
||||
<view class="more" style="font-size: 24rpx;">
|
||||
8 小时
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style="height: 40rpx;">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sleepData:{
|
||||
shen:0,
|
||||
qian:0,
|
||||
kuai:0
|
||||
},
|
||||
isOption:false,
|
||||
isInit:false,
|
||||
option:{
|
||||
tooltip: {
|
||||
show:false
|
||||
},
|
||||
legend: {
|
||||
top: '5%',
|
||||
left: 'center'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['70%', '90%'],
|
||||
avoidLabelOverlap: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
cavasConfig:{
|
||||
canvasWidth: 240,
|
||||
canvasHeight: 240,
|
||||
canvasWidth: 250,
|
||||
canvasHeight: 250,
|
||||
lineWidth:20,
|
||||
radius: 68, // 内圆的半径
|
||||
startAngle: -90, // 起始角度，-90度，即垂直方向的3点钟位置
|
||||
|
|
@ -72,6 +195,7 @@
|
|||
bigStop:0,
|
||||
maxTime:480
|
||||
},
|
||||
sleepList:[],
|
||||
time: new Date().toISOString().substring(0, 10),
|
||||
sleep:{
|
||||
shen:'0 分',
|
||||
|
|
@ -82,6 +206,18 @@
|
|||
onLoad() {
|
||||
this.getDataList()
|
||||
},
|
||||
watch:{
|
||||
isInit(newVal,oldVal){
|
||||
if(this.isOption == true){
|
||||
this.doDrawPie()
|
||||
}
|
||||
},
|
||||
isOption(newVal,oldVal){
|
||||
if(this.isInit == true){
|
||||
this.doDrawPie()
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.cavasConfig.ctx = uni.createCanvasContext('circleCanvas', this);
|
||||
this.drawCircle('bottom',360,this.cavasConfig.bigRadius,this.cavasConfig.bigColorBg);
|
||||
|
|
@ -94,6 +230,22 @@
|
|||
})
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
this.isInit = true
|
||||
// this.chart = await this.$refs.chartRef.init(echarts);
|
||||
// let option = await this.getDataList();
|
||||
// this.chart.setOption(option)
|
||||
|
||||
},
|
||||
async doDrawPie(){
|
||||
const chart = await this.$refs.chartRef.init(echarts);
|
||||
chart.setOption(this.option)
|
||||
},
|
||||
countOccurrences(array, value) {
|
||||
return array.reduce((count, current) => {
|
||||
return current === value ? count + 1 : count;
|
||||
}, 0);
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
|
|
@ -113,8 +265,34 @@
|
|||
this.sleep.qian = this.min2Hour(res.data[0].data_msg[0].deepSleepTime)
|
||||
this.cavasConfig.angle = this.getAngle(res.data[0].data_msg[0].deepSleepTime)
|
||||
this.cavasConfig.bigAngle = this.getAngle(res.data[0].data_msg[0].sleepTotalTime)
|
||||
this.sleepList = res.data[0].data_msg[0].sleepCurve
|
||||
this.doAnimation(0)
|
||||
this.doAnimation(1)
|
||||
this.option.series[0].data = [
|
||||
{
|
||||
value:this.countOccurrences(this.sleepList,0),
|
||||
itemStyle:{
|
||||
color:'#e933dd'
|
||||
}
|
||||
},
|
||||
{
|
||||
value:this.countOccurrences(this.sleepList,1),
|
||||
itemStyle:{
|
||||
color:'#6452da'
|
||||
}
|
||||
},
|
||||
{
|
||||
value:this.countOccurrences(this.sleepList,2),
|
||||
itemStyle:{
|
||||
color:'#4faffc'
|
||||
}
|
||||
},
|
||||
];
|
||||
let len = this.sleepList.length
|
||||
this.sleepData.shen = this.getPercent(this.sleepList,0)
|
||||
this.sleepData.qian = this.getPercent(this.sleepList,1)
|
||||
this.sleepData.kuai = this.getPercent(this.sleepList,2)
|
||||
this.isOption = true
|
||||
}else{
|
||||
this.doAnimation(0)
|
||||
this.doAnimation(1)
|
||||
|
|
@ -122,6 +300,10 @@
|
|||
})
|
||||
|
||||
|
||||
},
|
||||
getPercent(data,find){
|
||||
let len = data.length
|
||||
return (this.countOccurrences(data,find) / len * 100).toFixed(1)
|
||||
},
|
||||
getAngle(min){
|
||||
return min/this.cavasConfig.maxTime * 360
|
||||
|
|
@ -165,11 +347,13 @@
|
|||
this.cavasConfig.ctx.save()
|
||||
const cx = this.cavasConfig.canvasWidth / 2
|
||||
const cy = this.cavasConfig.canvasHeight / 2
|
||||
this.cavasConfig.ctx.translate(cx,cy)
|
||||
this.cavasConfig.ctx.scale(1, 1);
|
||||
this.cavasConfig.ctx.lineCap = lineCap
|
||||
let start = this.cavasConfig.startAngle*Math.PI/180
|
||||
let end = (edangle+this.cavasConfig.startAngle)*Math.PI/180
|
||||
this.cavasConfig.ctx.beginPath()
|
||||
this.cavasConfig.ctx.arc(cx, cy, radius , start, end);
|
||||
this.cavasConfig.ctx.arc(0,0, radius , start, end);
|
||||
this.cavasConfig.ctx.lineWidth = this.cavasConfig.lineWidth; // 设置线宽
|
||||
this.cavasConfig.ctx.strokeStyle = color; // 设置绘制样式为蓝色
|
||||
this.cavasConfig.ctx.stroke(); // 绘制路径
|
||||
|
|
@ -182,6 +366,36 @@
|
|||
</script>
|
||||
|
||||
<style scoped="scss">
|
||||
.dian0{
|
||||
background-color: #e933dd;
|
||||
}
|
||||
.dian1{
|
||||
background-color: #6452da;
|
||||
}
|
||||
.dian2{
|
||||
background-color: #4faffc;
|
||||
}
|
||||
.c0{
|
||||
color: #e933dd;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.c1{
|
||||
color: #6452da;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.c2{
|
||||
color: #4faffc;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.yuan{
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.small-title{
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
.canvas_box{
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
|
|
@ -203,6 +417,15 @@
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.title_box{
|
||||
margin-bottom: 20rpx;
|
||||
.title{
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.more{
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -1,2 +1,2 @@
|
|||
<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>智能终端</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
|
||||
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/watchapp/static/index.2da1efab.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/watchapp/static/js/chunk-vendors.a54e2e08.js></script><script src=/watchapp/static/js/index.0f7ac6b1.js></script></body></html>
|
||||
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/watchapp/static/index.2da1efab.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/watchapp/static/js/chunk-vendors.a54e2e08.js></script><script src=/watchapp/static/js/index.514b951d.js></script></body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue