11

86134

2023-11-18 281971fb8056d8c244d48fa0db383e48db541f06

 src/views/product/workbench/operation-task-pane.vue

@@ -13,6 +13,7 @@
  shadow="hover"
  :key="index"
  :class="['task-item', item.checkFlag ? 'card-checked' : 'card-unchecked']"
  :style="{ backgroundColor: getBackgroundColor(item.planFinishDay) }"
>
  <!-- <img class="selectedImg" /> -->
  <div class="header" >
@@ -105,28 +106,28 @@
  
  &.card-checked {
    // color: white;
    background-image: -webkit-linear-gradient(
        90deg,
        rgba(12, 149, 255, 0.7) 0%,
        rgba(38, 176, 254, 0.8) 34%,
        rgba(12, 149, 255, 0.8) 100%
      ),
      -webkit-linear-gradient(#5a97fa, #5a97fa);
    background-image: -moz-linear-gradient(
        90deg,
        rgba(12, 149, 255, 0.7) 0%,
        rgba(38, 176, 254, 0.8) 34%,
        rgba(12, 149, 255, 0.8) 100%
      ),
      -moz-linear-gradient(#5a97fa, #5a97fa);
    background-image: linear-gradient(
        90deg,
        rgba(12, 149, 255, 0.7) 0%,
        rgba(38, 176, 254, 0.8) 34%,
        rgba(12, 149, 255, 0.8) 100%
      ),
      linear-gradient(#5a97fa, #5a97fa);
    background-blend-mode: normal, normal;
    // background-image: -webkit-linear-gradient(
    //     90deg,
    //     rgba(12, 149, 255, 0.7) 0%,
    //     rgba(38, 176, 254, 0.8) 34%,
    //     rgba(12, 149, 255, 0.8) 100%
    //   ),
    //   -webkit-linear-gradient(#5a97fa, #5a97fa);
    // background-image: -moz-linear-gradient(
    //     90deg,
    //     rgba(12, 149, 255, 0.7) 0%,
    //     rgba(38, 176, 254, 0.8) 34%,
    //     rgba(12, 149, 255, 0.8) 100%
    //   ),
    //   -moz-linear-gradient(#5a97fa, #5a97fa);
    // background-image: linear-gradient(
    //     90deg,
    //     rgba(12, 149, 255, 0.7) 0%,
    //     rgba(38, 176, 254, 0.8) 34%,
    //     rgba(12, 149, 255, 0.8) 100%
    //   ),
    //   linear-gradient(#5a97fa, #5a97fa);
    // background-blend-mode: normal, normal;
  }
  .selectedImg {
    position: absolute;
@@ -348,26 +349,37 @@
  },
  methods: {

    // setCheckFlag(item) {
    //   this.$nextTick(() => {
    //     this.changeBackgroundColor(item.planFinishDay);
    //   });
    // },
    // changeBackgroundColor(dateString) {
    //   const date = new Date(dateString);
    //   const threeDaysAgo = new Date();
    //   threeDaysAgo.setDate(threeDaysAgo.getDate() - 3);
    //   const oneDayAgo = new Date();
    //   oneDayAgo.setDate(oneDayAgo.getDate() - 1);
    setCheckFlag(item) {
      this.$nextTick(() => {
        this.changeBackgroundColor(item.planFinishDay);
      });
    },
    getBackgroundColor(planFinishDay) {
    const currentDate = new Date();
    currentDate.setHours(0, 0, 0, 0); // 设置时间为当天的开始，忽略时分秒毫秒
    const planFinishDayObj = new Date(planFinishDay);
    planFinishDayObj.setHours(0, 0, 0, 0); // 同样设置时间为计划完成日的开始

    //   if (date <= threeDaysAgo) {
    //     document.body.style.backgroundColor = "blue";
    //   } else if (date <= oneDayAgo) {
    //     document.body.style.backgroundColor = "yellow";
    //   } else {
    //     document.body.style.backgroundColor = "red";
    //   }
    // },
    if (planFinishDayObj < currentDate) {
        // 如果计划完成日在当前日之前，返回'rgba(0, 0, 255, 0.3)'表示过期，这里的 0.3 控制了透明度
        return 'rgba(255, 0, 0, 0.5)';
    } else {
        const timeDifference = currentDate - planFinishDayObj;
        const daysDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));

        if (daysDifference < 0) {
            // 如果计划完成日在未来，计算它是否在10天内
            const daysUntilDue = Math.abs(daysDifference);
            if (daysUntilDue <= 10) {
                // 如果在10天内，返回'rgba(255, 255, 0, 0.3)'表示即将到期，这里的 0.3 控制了透明度
                return 'rgba(219, 219, 54, 0.7)';
            }
            return 'rgba(28, 62, 222, 0.8)';
        }
    }
    // 如果不是即将到期或已过期，返回'rgba(255, 0, 0, 0.3)'表示已到期，这里的 0.3 控制了透明度
    return 'rgba(255, 0, 0, 0.5)';
},

    // 点击工单，选中工单
    setCheckFlag(item) {