209 lines
5.5 KiB
Vue
209 lines
5.5 KiB
Vue
<template>
|
||
<view>
|
||
<tm-nav-bar left-icon="arrow-left" title="睡眠" @clickLeft="back" />
|
||
<view class="flx jcsb ac" style="height: 40rpx;background-color: #fff;padding: 20rpx;">
|
||
<view class="" style="font-size: 40rpx;font-weight: bold;">
|
||
|
||
</view>
|
||
<view class="" style="color: #b8b8b8;font-size: 24rpx;">
|
||
{{time}}
|
||
</view>
|
||
</view>
|
||
<view class="canvas_box">
|
||
<canvas canvas-id="circleCanvas" style="width: 480rpx; height: 480rpx;margin: 0 auto;"></canvas>
|
||
<view class="" style="height: 40rpx;">
|
||
|
||
</view>
|
||
<view class="flx flx_sb">
|
||
<view class="flx flx_ac">
|
||
<!-- color:'#e933dd',
|
||
bigColor:'#6452da', -->
|
||
<view class="circle" style="background-color:#6452da ;" >
|
||
</view>
|
||
<view class="sleep_info">
|
||
<view class="info_title">
|
||
睡眠时长
|
||
</view>
|
||
<view class="info_val">
|
||
{{sleep.shen}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flx flx_ac">
|
||
<view class="sleep_info">
|
||
<view class="info_title" style="text-align: right;">
|
||
深度睡眠
|
||
</view>
|
||
<view class="info_val">
|
||
{{sleep.qian}}
|
||
</view>
|
||
</view>
|
||
<view class="circle" style="background-color:#e933dd ;">
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
cavasConfig:{
|
||
canvasWidth: 240,
|
||
canvasHeight: 240,
|
||
lineWidth:20,
|
||
radius: 68, // 内圆的半径
|
||
startAngle: -90, // 起始角度，-90度，即垂直方向的3点钟位置
|
||
bigRadius:90,// 外圆的半径
|
||
cxt:null,
|
||
colorBg:'#f7c1f5',
|
||
bigColorBg:'#d1ccf4',
|
||
color:'#e933dd',
|
||
bigColor:'#6452da',
|
||
bigAngle:0,
|
||
angle:0,
|
||
startSmallAngle:0,
|
||
bigStartAngle:0,
|
||
stop:0,
|
||
bigStop:0,
|
||
maxTime:480
|
||
},
|
||
time: new Date().toISOString().substring(0, 10),
|
||
sleep:{
|
||
shen:'0 分',
|
||
qian:'0 分'
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getDataList()
|
||
},
|
||
onReady() {
|
||
this.cavasConfig.ctx = uni.createCanvasContext('circleCanvas', this);
|
||
this.drawCircle('bottom',360,this.cavasConfig.bigRadius,this.cavasConfig.bigColorBg);
|
||
this.drawCircle('bottom',360,this.cavasConfig.radius,this.cavasConfig.colorBg);
|
||
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
getActiceDevice: "api/getActiceDevice"
|
||
})
|
||
},
|
||
methods: {
|
||
back() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
getDataList(){
|
||
let type = 'SleepDatas'
|
||
let res = this.$store.dispatch('api/getDeviceListDays', {
|
||
type: type,
|
||
// type: (this.type),
|
||
device_real_time: this.time,
|
||
device_id:this.getActiceDevice.device_id
|
||
}).then(res => {
|
||
console.log(res.data.length)
|
||
if(res.data.length > 0){
|
||
this.sleep.shen = this.min2Hour(res.data[0].data_msg[0].sleepTotalTime)
|
||
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.doAnimation(0)
|
||
this.doAnimation(1)
|
||
}else{
|
||
this.doAnimation(0)
|
||
this.doAnimation(1)
|
||
}
|
||
})
|
||
|
||
|
||
},
|
||
getAngle(min){
|
||
return min/this.cavasConfig.maxTime * 360
|
||
},
|
||
min2Hour(min){
|
||
let hour = (Math.floor(min / 60))
|
||
let minute = (min % 60)
|
||
return (hour?hour + ' 小时 ' + minute+ ' 分':minute+ ' 分')
|
||
},
|
||
doAnimation(type){
|
||
|
||
if(type == 0){
|
||
if(this.cavasConfig.bigStop === 1){
|
||
return
|
||
}
|
||
if(this.cavasConfig.bigStartAngle >= this.cavasConfig.bigAngle){
|
||
this.cavasConfig.bigStartAngle = this.cavasConfig.bigAngle
|
||
this.cavasConfig.bigStop = 1;
|
||
}else{
|
||
this.cavasConfig.bigStartAngle += this.cavasConfig.bigAngle/50
|
||
}
|
||
this.drawCircle('round',this.cavasConfig.bigStartAngle,this.cavasConfig.bigRadius,this.cavasConfig.bigColor);
|
||
}else{
|
||
if(this.cavasConfig.stop == 1){
|
||
return
|
||
}
|
||
if(this.cavasConfig.startSmallAngle >= this.cavasConfig.angle){
|
||
this.cavasConfig.startSmallAngle = this.cavasConfig.angle
|
||
this.cavasConfig.stop = 1;
|
||
}else{
|
||
this.cavasConfig.startSmallAngle += this.cavasConfig.angle/50
|
||
}
|
||
this.drawCircle('round',this.cavasConfig.startSmallAngle,this.cavasConfig.radius,this.cavasConfig.color);
|
||
}
|
||
requestAnimationFrame(() => {
|
||
this.doAnimation(type)
|
||
})
|
||
},
|
||
// lineCap线条类型 edangle绘制角度 radius 直径 color 线条颜色
|
||
drawCircle(lineCap,edangle,radius,color) {
|
||
this.cavasConfig.ctx.save()
|
||
const cx = this.cavasConfig.canvasWidth / 2
|
||
const cy = this.cavasConfig.canvasHeight / 2
|
||
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.lineWidth = this.cavasConfig.lineWidth; // 设置线宽
|
||
this.cavasConfig.ctx.strokeStyle = color; // 设置绘制样式为蓝色
|
||
this.cavasConfig.ctx.stroke(); // 绘制路径
|
||
this.cavasConfig.ctx.closePath()
|
||
this.cavasConfig.ctx.restore()
|
||
this.cavasConfig.ctx.draw(true)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped="scss">
|
||
.canvas_box{
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
.circle {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
|
||
margin: 0 auto;
|
||
border-radius: 50%;
|
||
margin: 0 10rpx;
|
||
}
|
||
.sleep_info{
|
||
|
||
.info_title{
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
.info_val{
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|