From 7ffd135cb6cc8c0400a55747abacb98bf1935d92 Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Wed, 4 Aug 2021 15:00:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(task=20status):=20=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=88=87=E6=8D=A2=E6=9C=AA=E5=AE=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  3 +-
 src/components/TimeLine/component/TimeBox.vue |  2 +-
 .../TimeLine/component/TimeStatus.vue         | 43 +++++++++++++++----
 3 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8df8523..5c9bb26 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/components/TimeLine/component/TimeBox.vue b/src/components/TimeLine/component/TimeBox.vue
index e630361..0afaad2 100644
--- a/src/components/TimeLine/component/TimeBox.vue
+++ b/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>
diff --git a/src/components/TimeLine/component/TimeStatus.vue b/src/components/TimeLine/component/TimeStatus.vue
index 7b5a6a0..e8bd6fa 100644
--- a/src/components/TimeLine/component/TimeStatus.vue
+++ b/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: {
-    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的标题内容
      */