11

86134

2023-11-20 943e43fac9e2fefabaeffb20445361d5d02cea25

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

@@ -8,15 +8,19 @@
    >
    </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']"
    >
  v-for="(item, index) in operationTasks"
  @click.native="setCheckFlag(item)"
  shadow="hover"
  :key="index"
  :class="['task-item', item.checkFlag ? 'card-checked' : 'card-unchecked']"

>
      <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="[
@@ -91,6 +95,19 @@
  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;
@@ -344,6 +361,54 @@
    }
  },
  methods: {

//     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)';  // 正常为绿色
//     }
//   }
// },

getTagColor(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)';  // 正常为绿色
    }
  }
},

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) {