feat(task status): 任务状态切换未完

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 0.1.0 (2021-08-03)
+# 0.1.0 (2021-08-04)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -96,6 +96,7 @@
  store/home | 删除store/home | db8a3b4
  task beginTime | 格式化任务开始时间 | fbc0301
  template | eslint prettier sass uview tailwindcss | 9c966a1
+ tips | 修改任务状态方法重构 | b57d3ac
  tip | 任务状态显示及tip组件数据的重构 | 78a5750
  - | 下滑时间轴添加备注 | 4fd20e3
  - | 任务状态重构 | 4693655

src/components/TimeLine/component/TimeBox.vue

@@ -2,7 +2,7 @@
   <view class="column">
     <view :key="index" v-for="(task, index) in tasks">
       <view class="flex">
-        <TimeStatus :task-name="task.name" :status="task.process" :task-id="task.id" />
+        <TimeStatus :task="task" />
 
         <view class="flex items-center justify-between flex-1 ml-2 task-column">
           <view>{{ $moment(+task.planStart).format(startTimeFormat) }}</view>

src/components/TimeLine/component/TimeStatus.vue

@@ -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: {
+  props: { task: { type: Object, default: () => {} } },
-    status: { default: 0, type: Number },
-    taskName: { default: '', type: String },
-    taskId: { type: String, default: '' },
-  },
 
   data() {
     return {
-      // status: 3,
+      time: '',
-      time: 20,
       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的标题内容
      */