tall-mui-3/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 }"
      @click="changeStatus(task.process, $event)"
    >
      <!-- 1进行中 2暂停中 3已完成 -->
      <u-circle-progress
        :percent="orderStyle.persent - 0"
        :active-color="orderStyle.color"
        bg-color="rgba(255,255,255,0)"
        border-width="4"
        :width="task.process !== 4 ? 66 : 50"
        v-if="task.process === 1 || task.process === 2 || task.process === 3"
      >
        <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>
      <!-- 0未开始 4添加任务TODO: :class="task.process === 4 ? 'progress-box-4' : ''"-->
      <view class="flex items-center justify-center rounded-full progress-box" v-else>
        <view class="u-progress-content">
          <view class="u-progress-dot"></view>
          <view class="u-progress-info">
            <span v-if="orderStyle.icon">
              <u-icon :name="orderStyle.icon" v-if="task.process !== 4" size="15px"></u-icon>
              <u-icon :name="orderStyle.icon" v-else size="15px"></u-icon>
            </span>
            <template v-else>{{ computeDurationText() }}</template>
          </view>
        </view>
      </view>
    </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;
        case 4: // 添加任务
          color = '#60A5FA';
          icon = 'plus';
          persent = 100;
          break;
        default:
          // 未开始
          color = '#9CA3AF';
          icon = 'play-right';
          persent = 100;
          break;
      }
      return { color, icon, persent };
    },
  },

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

    /**
     * 点击了图标 修改任务状态
     * @param {object} event
     */
    changeStatus(process, event) {
      if (process === 4) {
        this.addTask();
        return;
      }
      // 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);
    },

    // 新建任务
    addTask() {
      this.$t.ui.showToast('新建任务');
    },

    // 计算圆环的弧度百分比
    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() {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
      const { realStart, planDuration } = this.task;
      const leftTime = +realStart + +planDuration - Date.now(); // 剩余时间
      const { num, time } = this.$t.time.computeDurationText(leftTime);
      this.$nextTick(() => {
        if (!time) return;
        this.timer = setTimeout(() => {
          this.computeDurationText();
        }, time);
      });
      return num;
    },
  },
};
</script>

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

.progress-box {
  background: rgba(255, 255, 255, 0);
  width: 33px;
  height: 33px;
  border: 2px solid #9ca3af;
}

.progress-box-4 {
  width: 25px;
  height: 25px;
  border: 2px solid #60a5fa;
}
</style>