|
|
@ -1,7 +1,13 @@ |
|
|
|
<template> |
|
|
|
<view class="u-font-14"> |
|
|
|
<view class="flex items-center justify-center rounded-full icon-column" :style="{ color: orderStyle.color }" @tap="changeStatus"> |
|
|
|
<u-circle-progress :percent="100" :active-color="orderStyle.color" bg-color="rgba(255,255,255,0)" border-width="4" width="66"> |
|
|
|
<u-circle-progress |
|
|
|
:percent="orderStyle.persent" |
|
|
|
:active-color="orderStyle.color" |
|
|
|
bg-color="rgba(255,255,255,0)" |
|
|
|
border-width="4" |
|
|
|
width="66" |
|
|
|
> |
|
|
|
<view class="u-progress-content"> |
|
|
|
<view class="u-progress-dot"></view> |
|
|
|
<view class="u-progress-info"> |
|
|
@ -19,16 +25,11 @@ import { mapState, mapMutations } from 'vuex'; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'TimeStatus', |
|
|
|
props: { |
|
|
|
status: { default: 0, type: Number }, |
|
|
|
taskName: { default: '', type: String }, |
|
|
|
taskId: { type: String, default: '' }, |
|
|
|
}, |
|
|
|
props: { task: { type: Object, default: () => {} } }, |
|
|
|
|
|
|
|
data() { |
|
|
|
return { |
|
|
|
// status: 3, |
|
|
|
time: 20, |
|
|
|
time: '', |
|
|
|
start: [{ text: '确认开始任务', color: 'blue' }], |
|
|
|
pause: [{ text: '继续' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }], |
|
|
|
proceed: [{ text: '暂停' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }], |
|
|
@ -38,31 +39,46 @@ export default { |
|
|
|
|
|
|
|
computed: { |
|
|
|
...mapState('task', ['tip']), |
|
|
|
status() { |
|
|
|
return this.task ? this.task.process : 0; |
|
|
|
}, |
|
|
|
taskName() { |
|
|
|
return this.task ? this.task.name : ''; |
|
|
|
}, |
|
|
|
taskId() { |
|
|
|
return this.task ? this.task.id : ''; |
|
|
|
}, |
|
|
|
// 图标文本颜色 |
|
|
|
// 任务状态 0未开始 1进行中 2暂停中 3已完成 |
|
|
|
orderStyle() { |
|
|
|
let color = '#9CA3AF'; |
|
|
|
let icon = 'play-right-fill'; |
|
|
|
let persent = 100; |
|
|
|
switch (this.status) { |
|
|
|
case 1: // 进行中 |
|
|
|
color = '#60A5FA'; |
|
|
|
icon = ''; |
|
|
|
persent = this.computeCyclePersent(); |
|
|
|
console.log('persent: ', persent); |
|
|
|
break; |
|
|
|
case 2: // 暂停中 |
|
|
|
color = '#F87171'; |
|
|
|
icon = 'pause'; |
|
|
|
persent = 50; // TODO: 暂时这样 暂停状态没有计算剩余多少时间 |
|
|
|
break; |
|
|
|
case 3: // 已结束 |
|
|
|
color = '#34D399'; |
|
|
|
icon = 'checkmark'; |
|
|
|
persent = 100; |
|
|
|
break; |
|
|
|
default: |
|
|
|
// 未开始 |
|
|
|
color = '#9CA3AF'; |
|
|
|
icon = 'play-right'; |
|
|
|
persent = 100; |
|
|
|
break; |
|
|
|
} |
|
|
|
return { color, icon }; |
|
|
|
return { color, icon, persent }; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
@ -74,6 +90,7 @@ export default { |
|
|
|
* @param {object} event |
|
|
|
*/ |
|
|
|
changeStatus(event) { |
|
|
|
return false; |
|
|
|
const { status, taskId, taskName, tip } = this; |
|
|
|
tip.status = status; |
|
|
|
tip.taskId = taskId; |
|
|
@ -85,6 +102,14 @@ export default { |
|
|
|
this.setTip(tip); |
|
|
|
}, |
|
|
|
|
|
|
|
// 计算圆环的弧度百分比 |
|
|
|
computeCyclePersent() { |
|
|
|
if (!this.task || !this.task.realStart || !this.task.planDuration) return 100; |
|
|
|
const { realStart, planDuration } = this.task; |
|
|
|
console.log((((Date.now() - +realStart) * 100) / +planDuration).toFixed(2)); |
|
|
|
return (((Date.now() - +realStart) * 100) / +planDuration).toFixed(2); |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 计算tip的标题内容 |
|
|
|
*/ |
|
|
|