combination-tall/src/components/TimeLine/component/TimeStatus.vue

<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="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">
            <u-icon :name="orderStyle.icon" v-if="orderStyle.icon" size="15px"></u-icon>
            <template v-else>{{ computeDurationText() }}</template>
          </view>
        </view>
      </u-circle-progress>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'TimeStatus',
  props: { task: { type: Object, default: () => {} } },

  data() {
    return {
      time: '',
      start: [{ text: '确认开始任务', color: 'blue' }],
      pause: [{ text: '继续' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }],
      proceed: [{ text: '暂停' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }],
      again: [{ text: '重新开始任务', color: 'blue' }],
      timer: null,
    };
  },

  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 = '';
          if (+this.computeCyclePersent() > 100) {
            persent = 96;
          } else {
            persent = this.computeCyclePersent();
          }
          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, persent };
    },
  },

  methods: {
    ...mapMutations('task', ['setTip']),

    /**
     * 点击了图标 修改任务状态
     * @param {object} event
     */
    changeStatus(event) {
      // return false;
      const { status, taskId, taskName, tip } = this;
      tip.status = status;
      tip.taskId = taskId;
      tip.left = event.target.x;
      tip.top = event.target.y;
      tip.show = true;
      tip.text = this.genetateTips(status, taskName);

      this.setTip(tip);
    },

    // 计算圆环的弧度百分比
    computeCyclePersent() {
      if (!this.task || !this.task.realStart || !this.task.planDuration) return 100;
      const { realStart, planDuration } = this.task;
      return (((Date.now() - +realStart) * 100) / +planDuration).toFixed(2);
    },

    /**
     * 计算tip的标题内容
     */
    genetateTips(status, content) {
      switch (status) {
        case 0:
          return `确认开始任务"${content}"吗？`;
        case 1:
          return `请选择要执行的操作`;
        case 2:
          return `请选择要执行的操作`;
        case 3:
          return `是否要重新开始此任务`;
      }
    },

    // 计算进行中状态剩余时间
    // 预计结束时间 = realStart(实际开始) + planDuration(计划时长)
    // 剩余时间 = 预计结束时间 - 当前时间
    // 剩余时间 = realStart + planDuration - Date.now()
    computeDurationText() {
      try {
        if (this.timer) {
          clearTimeout(this.timer);
          this.timer = null;
        }
        const { realStart, planDuration } = this.task;
        const leftTime = +realStart + +planDuration - Date.now(); // 剩余时间
        console.log('leftTime: ', leftTime, this.$moment.duration(leftTime));
        if (leftTime < 0) return 0;
        const { years, months, days, hours, minutes, seconds, milliseconds } = this.$moment.duration(leftTime);
        let num = 0;
        let time = 1000;

        if (years > 0) {
          num = years;
          time = 60 * 60 * 1000; // 按小时
        } else if (months > 0) {
          num = months;
          time = 60 * 60 * 1000; // 按小时
        } else if (days > 0) {
          num = days;
          time = 60 * 60 * 1000; // 按小时
        } else if (hours > 0) {
          num = hours;
        } else if (minutes > 0) {
          num = minutes;
        } else if (seconds > 0) {
          num = seconds;
        } else if (milliseconds > 0) {
          num = milliseconds;
          time = 16;
        }
        this.timer = setTimeout(() => {
          this.computeDurationText();
        }, time);
        return num;
      } catch (error) {
        console.error('🚀 ~ file: TimeStatus.vue ~ line 174 ~ computeDurationText ~ error', error);
        return 0;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.icon-column {
  height: 33px;
  width: 33px;
}
.one {
  height: 33px;
  width: 33px;
}
</style>