11

86134

2023-11-18 ddc598194b06cea3d7a335d6e93a50baf81b7f90

11

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

@@ -8,11 +8,13 @@
    >
    </el-alert>
    <el-card
    
  v-for="(item, index) in operationTasks"
    @click.native="setCheckFlag(item)"
  shadow="hover"
  :key="index"
  :class="['task-item', item.checkFlag ? 'card-checked' : 'card-unchecked']"
  :style="{ backgroundColor: getBackgroundColor(item.planFinishDay) }"
>
  <!-- <img class="selectedImg" /> -->
  <div class="header" >
@@ -58,25 +60,10 @@
    </div> -->
    <div class="row">
      <div class="l">计划完成时间：</div>
      <div class="r">{{ item.planFinishDay }}</div>
      <div class="r" >{{ item.planFinishDay }}</div>
    </div>
  </div>

  <el-progress
    class="task-progress"
    :text-inside="true"
    :stroke-width="20"
    :percentage="
      Number((item.completedQuantity / item.plannedQuantity).toFixed(2)) *
        100 >
      100
        ? 100
        : Number(
            (item.completedQuantity / item.plannedQuantity).toFixed(2)
          ) * 100
    "
    :format="formatPercentage(item.completedQuantity, item.plannedQuantity)"
  ></el-progress>
</el-card>
  </div>
</template>
@@ -105,28 +92,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;
@@ -347,28 +334,32 @@
    }
  },
  methods: {
    getBackgroundColor(planFinishDay) {
    const currentDate = new Date();
    currentDate.setHours(0, 0, 0, 0); // 设置时间为当天的开始，忽略时分秒毫秒
    const planFinishDayObj = new Date(planFinishDay);
    planFinishDayObj.setHours(0, 0, 0, 0); // 同样设置时间为计划完成日的开始

    // 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);
    if (planFinishDayObj < currentDate) {
      // 如果计划完成日在当前日之前，返回'blue'表示过期
      return 'red';
    } else {
      const timeDifference = currentDate - planFinishDayObj;
      const daysDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));

    //   if (date <= threeDaysAgo) {
    //     document.body.style.backgroundColor = "blue";
    //   } else if (date <= oneDayAgo) {
    //     document.body.style.backgroundColor = "yellow";
    //   } else {
    //     document.body.style.backgroundColor = "red";
    //   }
    // },

      if (daysDifference < 0) {
        // 如果计划完成日在未来，计算它是否在10天内
        const daysUntilDue = Math.abs(daysDifference);
        if (daysUntilDue <= 10) {
          // 如果在10天内，返回'yellow'表示即将到期
          return 'yellow';
        }
      }
    }
    // 如果不是即将到期或已过期，返回'red'表示已到期
    return 'blue';
},
    
    // 点击工单，选中工单
    setCheckFlag(item) {
      if (item.checkFlag) {