tall-mui-3-project/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="30"></u-icon>
            <template v-else>{{ time }}</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' }],
    };
  },

  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() {
      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;
      console.log((((Date.now() - +realStart) * 100) / +planDuration).toFixed(2));
      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 `是否要重新开始此任务`;
      }
    },
  },
};
</script>

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