isEnd。

src/views/process/components/steps.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="body">
     <TransitionGroup name="list">
-      <div
-        class="steps"
-        v-for="(item, index) in opsArray"
-        :key="index"
-        @click="boxClick(item, index)"
-      >
+      <div class="steps" v-for="(item, index) in opsArray" :key="index" @click="boxClick(item, index)">
         <div
           :class="
             item.exists == true
@@ -18,54 +13,28 @@
         >
           <div style="display: flex; align-items: center">
             <div
-              :class="
-                selectStepIndex == index
-                  ? 'stepIndex stepIndexHover'
-                  : 'stepIndex'
-              "
+              :class="[
+                selectStepIndex == index ? 'stepIndex stepIndexHover' : 'stepIndex',
+                item?.isEnd ? 'isEnd' : 'notEnd',
+              ]"
             >
-              <span
-                :class="
-                  selectStepIndex == index
-                    ? 'indexText hoverTextColor'
-                    : 'indexText'
-                "
-                >{{ index + 1 }}</span
-              >
+              <span :class="selectStepIndex == index ? 'indexText hoverTextColor' : 'indexText'">{{ index + 1 }}</span>
             </div>
             <div class="midTextBox">
-              <div
-                :class="
-                  selectStepIndex == index
-                    ? 'stepName stepNameHover'
-                    : 'stepName'
-                "
-              >
+              <div :class="selectStepIndex == index ? 'stepName stepNameHover' : 'stepName'">
                 {{ item.operationName }}
               </div>
-              <div
-                :class="
-                  selectStepIndex == index
-                    ? 'stepStation stepStationHover'
-                    : 'stepStation'
-                "
-              >
+              <div :class="selectStepIndex == index ? 'stepStation stepStationHover' : 'stepStation'">
                 {{ item.operationCode }}
               </div>
             </div>
           </div>
-          <div
-            :class="
-              selectStepIndex == index ? 'timeBox timeBoxHover' : 'timeBox'
-            "
-          >
+          <div :class="selectStepIndex == index ? 'timeBox timeBoxHover' : 'timeBox'">
             {{ item.completeNum }}
           </div>
         </div>
         <Transition>
-          <div v-if="item.exists != true" class="existsText">
-            注：该工位在计划上未分配此工序任务！
-          </div>
+          <div v-if="item.exists != true" class="existsText">注：该工位在计划上未分配此工序任务！</div>
         </Transition>
         <div class="line" v-if="index != opsArray.length - 1"></div>
       </div>
@@ -73,12 +42,7 @@
     <el-empty v-if="!opsArray" description="暂无数据" />
     <!-- 弹窗 -->
 
-    <el-dialog
-      v-model="centerDialogVisible"
-      width="500"
-      align-center
-      style="border-radius: 16px"
-    >
+    <el-dialog v-model="centerDialogVisible" width="500" align-center style="border-radius: 16px">
       <template #header>
         <div class="titleText" style="text-align: center">通知</div>
       </template>
@@ -133,8 +97,7 @@ emitter.on(EventsNames.PROCESS_REDER, () => {
 const boxClick = (item, index) => {
   //if (item.exists != true) return;
   store.odersData.operationType = item.operationType;
-  selectSeqArray.value =
-    ordersDataArray.value[selectOrderIndex.value].ops[index].seqs;
+  selectSeqArray.value = ordersDataArray.value[selectOrderIndex.value].ops[index].seqs;
   store.odersData.operationId = item.operationId;
   store.processInfo.operationCode = item.operationCode;
   store.processInfo.operationName = item.operationName;
@@ -292,4 +255,11 @@ onBeforeUnmount(() => {
   width: 1px;
   margin-left: 44px;
 }
+
+.isEnd {
+  background-color: green;
+}
+.notEnd {
+  background-color: transparent;
+}
 </style>