11

86134

2023-11-18 8d662f5d78fd590f6da9b0fce9bd5204f6dff370

11

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

@@ -13,11 +13,14 @@
  shadow="hover"
  :key="index"
  :class="['task-item', item.checkFlag ? 'card-checked' : 'card-unchecked']"
  :style="{ backgroundColor: getBackgroundColor(item.planFinishDay) }"

>
  <!-- <img class="selectedImg" /> -->
      <img class="selectedImg" src="/img/workbench/icon_selected.png" />
  <div class="header" >
    <div>工单号：{{ item.taskNo }}</div>
        <div class="tag" :style="{ backgroundColor: getTagColor(item.planFinishDay) }">
    {{ getTagText(item.planFinishDay) }}
        </div>
    <!-- <div>计划号：{{ item.mpsNo }}</div> -->
    <div  
      :class="[
@@ -92,42 +95,52 @@
  flex-direction: column;
  align-items: center;
}

.tag{
width: 80px;
height: 30px;
border-radius:15% ;
text-align: center;
text-size:8px;
color:white;
align-content: 30px;

}


.task-item {
  width: 100%;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
background:none;
  box-shadow: 1px 2px 24px 1px rgba(4, 0, 0, 0.14);
   
  & + .task-item {
    margin-top: 10px;
  }
  
  &.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;
@@ -349,38 +362,53 @@
  },
  methods: {

    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); // 同样设置时间为计划完成日的开始
//     getBackgroundColor(planFinishDay) {
//   const today = new Date();
//   const planDate = new Date(planFinishDay);
//   if (planDate < today) {
//     return 'rgba( 255,0,0,1)'; // 超期为红色
//   } else {
//     const timeDiff = planDate.getTime() - today.getTime();
//     const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
//     if (daysDiff <= 3) {
//       return 'rgba(255,204,62, 1)';  // 临期为黄色 
//     } else {
//       return 'rgba(86,219, 25,1)';  // 正常为绿色
//     }
//   }
// },

    if (planFinishDayObj < currentDate) {
        // 如果计划完成日在当前日之前，返回'rgba(0, 0, 255, 0.3)'表示过期，这里的 0.3 控制了透明度
        return 'rgba(255, 0, 0, 0.5)';
getTagColor(planFinishDay) {
  const today = new Date();
  const planDate = new Date(planFinishDay);
  if (planDate < today) {
    return 'rgba( 255,0,0,1)'; // 超期为红色
    } 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)';
    const timeDiff = planDate.getTime() - today.getTime();
    const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
    if (daysDiff <= 3) {
      return 'rgba(255,204,62, 1)';  // 临期为黄色 
    } else {
      return 'rgba(86,219, 25,1)';  // 正常为绿色
        }
    }
    // 如果不是即将到期或已过期，返回'rgba(255, 0, 0, 0.3)'表示已到期，这里的 0.3 控制了透明度
    return 'rgba(255, 0, 0, 0.5)';
},

getTagText(planFinishDay) {
  const today = new Date();
  const planDate = new Date(planFinishDay);
  if (planDate < today) {
    return '超期'; 
  } else {
    const timeDiff = planDate.getTime() - today.getTime();
    const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
    if (daysDiff <= 3) {
      return '临期';
    } else {
      return '正常';
    }
  }
},
    // 点击工单，选中工单
    setCheckFlag(item) {
      if (item.checkFlag) {