Merge branch 'master' of http://114.132.189.42:9002/r/mes-ocea-before

zouyu

2023-11-17 2fefc3c07619a513fe82144ea1f8d75c068bcb9e

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

@@ -1,6 +1,6 @@
<template>
  <div>
    <el-alert
    <el-alert 
      v-if="!operationTasks || operationTasks.length == 0"
      title="还没有工单下发到此机台！"
      type="warning"
@@ -8,76 +8,76 @@
    >
    </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" /> -->
  <div class="header" >
    <div>工单号：{{ item.taskNo }}</div>
    <!-- <div>计划号：{{ item.mpsNo }}</div> -->
    <div  
      :class="[
        'status-change-div',
        item.checkFlag ? 'card-checked-status' : 'card-status'
      ]"
    >
      <img class="selectedImg" src="/img/workbench/icon_selected.png" />
      <div class="header">
        <div>工单号：{{ item.taskNo }}</div>
        <!-- <div>计划号：{{ item.mpsNo }}</div> -->
        <div
          :class="[
            'status-change-div',
            item.checkFlag ? 'card-checked-status' : 'card-status'
          ]"
        >
          <el-select
            v-if="permissions.product_operationTask_state"
            v-model="item.statusAction"
            placeholder="功能菜单"
            @change="
              changeTaskState(item.statusAction, item.status, item.id, item)
            "
          >
            <el-option
              v-for="ele in statusActions"
              :key="ele.value"
              :label="ele.label"
              :value="ele.value"
              :disabled="ele.disabled"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="body">
        <div class="row">
          <div class="l">零件名称：</div>
          <div class="r">{{ item.partName }}</div>
        </div>
        <div class="row">
          <div class="l">零件号：</div>
          <div class="r">{{ item.partNo }}</div>
        </div>
        <!-- <div class="row">
          <div class="l">成品：</div>
          <div class="r">{{ item.productName }}</div>
        </div> -->
        <div class="row">
          <div class="l">计划完成时间：</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
      <el-select
        v-if="permissions.product_operationTask_state"
        v-model="item.statusAction"
        placeholder="功能菜单"
        @change="
          changeTaskState(item.statusAction, item.status, item.id, item)
        "
        :format="formatPercentage(item.completedQuantity, item.plannedQuantity)"
      ></el-progress>
    </el-card>
      >
        <el-option
          v-for="ele in statusActions"
          :key="ele.value"
          :label="ele.label"
          :value="ele.value"
          :disabled="ele.disabled"
        >
        </el-option>
      </el-select>
    </div>
  </div>
  <div class="body">
    <div class="row">
      <div class="l">零件名称：</div>
      <div class="r">{{ item.partName }}</div>
    </div>
    <div class="row">
      <div class="l">零件号：</div>
      <div class="r">{{ item.partNo }}</div>
    </div>
    <!-- <div class="row">
      <div class="l">成品：</div>
      <div class="r">{{ item.productName }}</div>
    </div> -->
    <div class="row">
      <div class="l">计划完成时间：</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>
<style lang="scss" scoped>
@@ -96,10 +96,13 @@
  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(
@@ -344,6 +347,28 @@
    }
  },
  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);

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

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