AsUI

单区域

# 流程板

孔位数目从大到小排列。

<template>
  <div class="config-details-single-area-workflow-root1">
    <div class="config-details-single-area-workflow-container-box1">
      <as-workflow-plate-96-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-single-area-workflow-96"
      ></as-workflow-plate-96-hole>
    </div>
    <div class="config-details-single-area-workflow-container-box1">
      <as-workflow-plate-80-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-single-area-workflow-80"
      ></as-workflow-plate-80-hole>
    </div>
    <div class="config-details-single-area-workflow-container-box1">
      <as-workflow-plate-72-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-single-area-workflow-72"
      ></as-workflow-plate-72-hole>
    </div>
    <div class="config-details-single-area-workflow-container-box1">
      <as-workflow-plate-64-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-single-area-workflow-64"
      ></as-workflow-plate-64-hole>
    </div>
    <div class="config-details-single-area-workflow-container-box1">
      <as-workflow-plate-48-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-single-area-workflow-48"
      ></as-workflow-plate-48-hole>
    </div>
    <div class="config-details-single-area-workflow-container-box1">
      <as-workflow-plate-24-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-single-area-workflow-24"
      ></as-workflow-plate-24-hole>
    </div>
    <div class="config-details-single-area-workflow-container-box1">
      <as-workflow-plate-left-24-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-single-area-workflow-left-24"
      ></as-workflow-plate-left-24-hole>
    </div>
    <div class="config-details-single-area-workflow-container-box1">
      <as-workflow-plate-right-24-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-single-area-workflow-right-24"
      ></as-workflow-plate-right-24-hole>
    </div>
    <div class="config-details-single-area-workflow-container-box1">
      <as-workflow-plate-16-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-single-area-workflow-16"
      ></as-workflow-plate-16-hole>
    </div>
    <div class="config-details-single-area-workflow-container-box1">
      <as-workflow-plate-8-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-single-area-workflow-8"
      ></as-workflow-plate-8-hole>
    </div>
    <div class="config-details-single-area-workflow-container-box1">
      <as-workflow-plate-4-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-single-area-workflow-4"
      ></as-workflow-plate-4-hole>
    </div>
    <div class="config-details-single-area-workflow-container-box1">
      <as-workflow-plate-mixer-4-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-single-area-workflow-mixer-4"
      ></as-workflow-plate-mixer-4-hole>
    </div>
    <div class="config-details-single-area-workflow-container-box1">
      <as-workflow-plate-3-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-single-area-workflow-3"
      ></as-workflow-plate-3-hole>
    </div>
    <div class="config-details-single-area-workflow-container-box1">
      <as-workflow-plate-2-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-single-area-workflow-2"
      ></as-workflow-plate-2-hole>
    </div>
    <div class="config-details-single-area-workflow-container-box1">
      <as-workflow-plate-mixer-2-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-single-area-workflow-mixer-2"
      ></as-workflow-plate-mixer-2-hole>
    </div>
    <div class="config-details-single-area-workflow-container-box1">
      <as-workflow-plate-1-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-single-area-workflow-1"
      ></as-workflow-plate-1-hole>
    </div>
  </div>
</template>
 <script>
export default {
  name: 'App',
  data() {
    return{
     
    }
  },
   methods: {}
}
</script>

<style>
.config-details-single-area-workflow-root1{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.config-details-single-area-workflow-container-box1{
  width: 30%;
  margin-top: 10px;
}
@media screen and (max-width: 480px) {
  .config-details-single-area-workflow-root1{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .config-details-single-area-workflow-container-box1{
    width: 100%;
    margin-top: 15px;
  }
}

</style>
Expand Copy

# 平台板

孔位数目从大到小排列。

<template>
  <div class="config-details-single-area-worktable-root1">
    <div class="config-details-single-area-worktable-container-box1">
      <as-worktable-plate-96-hole comp-mark="config-details-single-area-worktable-96"></as-worktable-plate-96-hole>
    </div>
    <div class="config-details-single-area-worktable-container-box1">
      <as-worktable-plate-80-hole comp-mark="config-details-single-area-worktable-80"></as-worktable-plate-80-hole>
    </div>
    <div class="config-details-single-area-worktable-container-box1">
      <as-worktable-plate-72-hole comp-mark="config-details-single-area-worktable-72"></as-worktable-plate-72-hole>
    </div>
    <div class="config-details-single-area-worktable-container-box1">
      <as-worktable-plate-64-hole comp-mark="config-details-single-area-worktable-64"></as-worktable-plate-64-hole>
    </div>
    <div class="config-details-single-area-worktable-container-box1">
      <as-worktable-plate-48-hole comp-mark="config-details-single-area-worktable-48"></as-worktable-plate-48-hole>
    </div>
    <div class="config-details-single-area-worktable-container-box1">
      <as-worktable-plate-24-hole comp-mark="config-details-single-area-worktable-24"></as-worktable-plate-24-hole>
    </div>
    <div class="config-details-single-area-worktable-container-box1">
      <as-worktable-plate-left-24-hole comp-mark="config-details-single-area-worktable-left-24"></as-worktable-plate-left-24-hole>
    </div>
    <div class="config-details-single-area-worktable-container-box1">
      <as-worktable-plate-right-24-hole comp-mark="config-details-single-area-worktable-right-24"></as-worktable-plate-right-24-hole>
    </div>
    <div class="config-details-single-area-worktable-container-box1">
      <as-worktable-plate-16-hole comp-mark="config-details-single-area-worktable-16"></as-worktable-plate-16-hole>
    </div>
    <div class="config-details-single-area-worktable-container-box1">
      <as-worktable-plate-8-hole comp-mark="config-details-single-area-worktable-8"></as-worktable-plate-8-hole>
    </div>
    <div class="config-details-single-area-worktable-container-box1">
      <as-worktable-plate-4-hole comp-mark="config-details-single-area-worktable-4"></as-worktable-plate-4-hole>
    </div>
    <div class="config-details-single-area-worktable-container-box1">
      <as-worktable-plate-mixer-4-hole comp-mark="config-details-single-area-worktable-mixer-4"></as-worktable-plate-mixer-4-hole>
    </div>
    <div class="config-details-single-area-worktable-container-box1">
      <as-worktable-plate-3-hole comp-mark="config-details-single-area-worktable-3"></as-worktable-plate-3-hole>
    </div>
    <div class="config-details-single-area-worktable-container-box1">
      <as-worktable-plate-2-hole comp-mark="config-details-single-area-worktable-2"></as-worktable-plate-2-hole>
    </div>
    <div class="config-details-single-area-worktable-container-box1">
      <as-worktable-plate-mixer-2-hole comp-mark="config-details-single-area-worktable-mixer-2"></as-worktable-plate-mixer-2-hole>
    </div>
    <div class="config-details-single-area-worktable-container-box1">
      <as-worktable-plate-1-hole comp-mark="config-details-single-area-worktable-1"></as-worktable-plate-1-hole>
    </div>
  </div>
</template>
 <script>
export default {
  name: 'App',
  data() {
    return{
     
    }
  },
   methods: {}
}
</script>

<style>
.config-details-single-area-worktable-root1{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.config-details-single-area-worktable-container-box1{
  width: 30%;
  margin-top: 10px;
}
@media screen and (max-width: 480px) {
  .config-details-single-area-worktable-root1{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .config-details-single-area-worktable-container-box1{
    width: 100%;
    margin-top: 15px;
  }
}

</style>
Expand Copy

# 试剂板

孔位数目从大到小排列。

<template>
  <div class="config-details-single-area-reagent-root1">
    <div class="config-details-single-area-reagent-container-box1">
      <as-reagent-plate-96-hole
          :active-arr="[]"
          comp-mark="config-details-single-area-reagent-96"
      ></as-reagent-plate-96-hole>
    </div>
    <div class="config-details-single-area-reagent-container-box1">
      <as-reagent-plate-80-hole
          :active-arr="[]"
          comp-mark="config-details-single-area-reagent-80"
      ></as-reagent-plate-80-hole>
    </div>
    <div class="config-details-single-area-reagent-container-box1">
      <as-reagent-plate-72-hole
          :active-arr="[]"
          comp-mark="config-details-single-area-reagent-72"
      ></as-reagent-plate-72-hole>
    </div>
    <div class="config-details-single-area-reagent-container-box1">
      <as-reagent-plate-64-hole
          :active-arr="[]"
          comp-mark="config-details-single-area-reagent-64"
      ></as-reagent-plate-64-hole>
    </div>
    <div class="config-details-single-area-reagent-container-box1">
      <as-reagent-plate-48-hole
          :active-arr="[]"
          comp-mark="config-details-single-area-reagent-48"
      ></as-reagent-plate-48-hole>
    </div>
    <div class="config-details-single-area-reagent-container-box1">
      <as-reagent-plate-24-hole
          :active-arr="[]"
          comp-mark="config-details-single-area-reagent-24"
      ></as-reagent-plate-24-hole>
    </div>
    <div class="config-details-single-area-reagent-container-box1">
      <as-reagent-plate-left-24-hole
          :active-arr="[]"
          comp-mark="config-details-single-area-reagent-left-24"
      ></as-reagent-plate-left-24-hole>
    </div>
    <div class="config-details-single-area-reagent-container-box1">
      <as-reagent-plate-right-24-hole
          :active-arr="[]"
          comp-mark="config-details-single-area-reagent-right-24"
      ></as-reagent-plate-right-24-hole>
    </div>
    <div class="config-details-single-area-reagent-container-box1">
      <as-reagent-plate-16-hole
          :active-arr="[]"
          comp-mark="config-details-single-area-reagent-16"
      ></as-reagent-plate-16-hole>
    </div>
    <div class="config-details-single-area-reagent-container-box1">
      <as-reagent-plate-8-hole
          :active-arr="[]"
          comp-mark="config-details-single-area-reagent-8"
      ></as-reagent-plate-8-hole>
    </div>
    <div class="config-details-single-area-reagent-container-box1">
      <as-reagent-plate-4-hole
          :active-arr="[]"
          comp-mark="config-details-single-area-reagent-4"
      ></as-reagent-plate-4-hole>
    </div>
    <div class="config-details-single-area-reagent-container-box1">
      <as-reagent-plate-mixer-4-hole
          :active-arr="[]"
          comp-mark="config-details-single-area-reagent-mixer-4"
      ></as-reagent-plate-mixer-4-hole>
    </div>
    <div class="config-details-single-area-reagent-container-box1">
      <as-reagent-plate-3-hole
          :active-arr="[]"
          comp-mark="config-details-single-area-reagent-3"
      ></as-reagent-plate-3-hole>
    </div>
    <div class="config-details-single-area-reagent-container-box1">
      <as-reagent-plate-2-hole
          :active-arr="[]"
          comp-mark="config-details-single-area-reagent-2"
      ></as-reagent-plate-2-hole>
    </div>
    <div class="config-details-single-area-reagent-container-box1">
      <as-reagent-plate-mixer-2-hole
          :active-arr="[]"
          comp-mark="config-details-single-area-reagent-mixer-2"
      ></as-reagent-plate-mixer-2-hole>
    </div>
    <div class="config-details-single-area-reagent-container-box1">
      <as-reagent-plate-1-hole
          :active-arr="[]"
          comp-mark="config-details-single-area-reagent-1"
      ></as-reagent-plate-1-hole>
    </div>
  </div>
</template>
 <script>
export default {
  name: 'App',
  data() {
    return{
     
    }
  },
   methods: {}
}
</script>

<style>
.config-details-single-area-reagent-root1{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.config-details-single-area-reagent-container-box1{
  width: 45%;
  margin-top: 10px;
}
@media screen and (max-width: 480px) {
  .config-details-single-area-reagent-root1{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .config-details-single-area-reagent-container-box1{
    width: 100%;
    margin-top: 15px;
  }
}

</style>
Expand Copy

← 双区域 →