流程细节图

示例1

<template>
  <div class="t-workflow-detail-worktable-area1">
    <div>
      <as-workflow-plate-41-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-1-case-1"></as-workflow-plate-41-hole>
    </div>
    <div>
      <as-workflow-plate-62-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-2-case-1"></as-workflow-plate-62-hole>
    </div>
    <div>
      <as-workflow-plate-special-52-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles"  comp-mark="details-workflow-map-3-case-1"></as-workflow-plate-special-52-hole>
    </div>
    <div>
      <as-workflow-plate-78-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-4-case-1"></as-workflow-plate-78-hole>
    </div>
    <div>
      <as-workflow-plate-52-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-5-case-1"></as-workflow-plate-52-hole>
    </div>
    <div>
      <as-workflow-plate-52-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-6-case-1"></as-workflow-plate-52-hole>
    </div>
    <div>
      <as-workflow-plate-78-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-7-case-1"></as-workflow-plate-78-hole>
    </div>
    <div>
      <as-workflow-plate-62-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-8-case-1"></as-workflow-plate-62-hole>
    </div>
    <div>
      <as-workflow-plate-16-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-9-case-1"></as-workflow-plate-16-hole>
    </div>
    <div>
      <as-workflow-plate-16-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-10-case-1"></as-workflow-plate-16-hole>
    </div>
    <div>
      <as-workflow-plate-4-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-11-case-1"></as-workflow-plate-4-hole>
    </div>
    <div>
      <as-workflow-plate-3-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-12-case-1"></as-workflow-plate-3-hole>
    </div>
    <div>
      <as-workflow-plate-2-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-13-case-1"></as-workflow-plate-2-hole>
    </div>
    <div>
      <as-workflow-plate-mixer-4-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-14-case-1"></as-workflow-plate-mixer-4-hole>
    </div>
    <div>
      <as-workflow-plate-mixer-4-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-15-case-1"></as-workflow-plate-mixer-4-hole>
    </div>
    <div>
      <as-workflow-plate-16-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-16-case-1"></as-workflow-plate-16-hole>
    </div>
    <div>
      <as-workflow-plate-1-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-17-case-1"></as-workflow-plate-1-hole>
    </div>
    <div>
      <as-workflow-plate-41-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-18-case-1"></as-workflow-plate-41-hole>
    </div>
    <div>
      <as-workflow-plate-56-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-19-case-1"></as-workflow-plate-56-hole>
    </div>
    <div>
      <as-workflow-plate-56-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-20-case-1"></as-workflow-plate-56-hole>
    </div>
    <div>
      <as-workflow-plate-54-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-21-case-1"></as-workflow-plate-54-hole>
    </div>
    <div>
      <as-workflow-plate-54-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-22-case-1"></as-workflow-plate-54-hole>
    </div>
    <div>
      <as-workflow-plate-46-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-23-case-1"></as-workflow-plate-46-hole>
    </div>
    <div>
      <as-workflow-plate-46-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-24-case-1"></as-workflow-plate-46-hole>
    </div>
    <div>
      <as-workflow-plate-41-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-25-case-1"></as-workflow-plate-41-hole>
    </div>
    <div>
      <as-workflow-plate-26-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-26-case-1"></as-workflow-plate-26-hole>
    </div>
    <div>
      <as-workflow-plate-26-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-27-case-1"></as-workflow-plate-26-hole>
    </div>
    <div>
      <as-workflow-plate-16-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-28-case-1"></as-workflow-plate-16-hole>
    </div>
    <div>
      <as-workflow-plate-78-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-29-case-1"></as-workflow-plate-78-hole>
    </div>
    <div>
      <as-workflow-plate-special-52-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles" comp-mark="details-workflow-map-30-case-1"></as-workflow-plate-special-52-hole>
    </div>
  </div>
</template>

<script>
export default {
  name: "t-workflow-detail-worktable1",
  data(){
    return{
      activeWorkflowHoles:[{
        i:0,
        j:0
      }]
    }
  }
}
</script>

<style>
.t-workflow-detail-worktable-area1{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.t-workflow-detail-worktable-area1>div{
  width: 15%;
  margin-top: 5px;
  margin-bottom: 5px;
}

</style>

Expand Copy Copy

示例2

<template>
  <div class="t-workflow-detail-worktable-area2">
    <div>
      <as-workflow-plate-41-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-1"></as-workflow-plate-41-hole>
    </div>
    <div>
      <as-workflow-plate-62-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-2"></as-workflow-plate-62-hole>
    </div>
    <div>
      <as-workflow-plate-special-52-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2"  comp-mark="details-workflow-map-3"></as-workflow-plate-special-52-hole>
    </div>
    <div>
      <as-workflow-plate-78-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-4"></as-workflow-plate-78-hole>
    </div>
    <div>
      <as-workflow-plate-52-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-5"></as-workflow-plate-52-hole>
    </div>
    <div>
      <as-workflow-plate-52-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-6"></as-workflow-plate-52-hole>
    </div>
    <div>
      <as-workflow-plate-78-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-7"></as-workflow-plate-78-hole>
    </div>
    <div>
      <as-workflow-plate-62-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-8"></as-workflow-plate-62-hole>
    </div>
    <div>
      <as-workflow-plate-16-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-9"></as-workflow-plate-16-hole>
    </div>
    <div>
      <as-workflow-plate-16-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-10"></as-workflow-plate-16-hole>
    </div>
    <div>
      <as-workflow-plate-4-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-11"></as-workflow-plate-4-hole>
    </div>
    <div>
      <as-workflow-plate-3-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-12"></as-workflow-plate-3-hole>
    </div>
    <div>
      <as-workflow-plate-2-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-13"></as-workflow-plate-2-hole>
    </div>
    <div>
      <as-workflow-plate-mixer-4-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-14"></as-workflow-plate-mixer-4-hole>
    </div>
    <div>
      <as-workflow-plate-mixer-4-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-15"></as-workflow-plate-mixer-4-hole>
    </div>
    <div>
      <as-workflow-plate-16-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-16"></as-workflow-plate-16-hole>
    </div>
    <div>
      <as-workflow-plate-1-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles3" comp-mark="details-workflow-map-17"></as-workflow-plate-1-hole>
    </div>
    <div>
      <as-workflow-plate-41-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-18"></as-workflow-plate-41-hole>
    </div>
    <div>
      <as-workflow-plate-56-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-19"></as-workflow-plate-56-hole>
    </div>
    <div>
      <as-workflow-plate-56-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-20"></as-workflow-plate-56-hole>
    </div>
    <div>
      <as-workflow-plate-54-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-21"></as-workflow-plate-54-hole>
    </div>
    <div>
      <as-workflow-plate-54-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-22"></as-workflow-plate-54-hole>
    </div>
    <div>
      <as-workflow-plate-46-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-23"></as-workflow-plate-46-hole>
    </div>
    <div>
      <as-workflow-plate-46-hole select-mode="fixed-reagent" plate-type="destination" :active-arr="activeWorkflowHoles2" comp-mark="details-workflow-map-24"></as-workflow-plate-46-hole>
    </div>
  </div>
</template>

<script>
export default {
  name: "t-workflow-detail-worktable2",
  data(){
    return{
      activeWorkflowHoles2:[{
        i:1,
        j:0
      }],
      activeWorkflowHoles3:[{
        i:0,
        j:0
      }]
    }
  },
}
</script>

<style>
.t-workflow-detail-worktable-area2{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.t-workflow-detail-worktable-area2>div{
  width: 22%;
  margin-top: 5px;
  margin-bottom: 5px;
}

</style>

Expand Copy Copy