0

src/web/src/pages/main/contents/OperationTubeRackPreset.vue

@@ -0,0 +1,62 @@
+<template>
+  <a-button class="ml-1" 
+    style="background: transparent;border: solid 1px #becfe7;color: #7c92b1;"
+    @click="actionModalShow"
+  ><PlayCircleOutlined /></a-button>
+
+  <!-- 执行预设 -->
+  <a-modal v-if="enable" v-model:visible="enable" 
+    title="执行预设" 
+    ok-text="确认" 
+    cancel-text="取消"
+    @ok="actionPresetSetupOk" 
+    @cancel="actionCancel"
+  >
+    <a-form :label-col="{span:4}" :wrapper-col="{span:20}" label-align="left" class="py-5">
+      <a-form-item label="预设">
+        <a-select v-model:value="presetId">
+          <a-select-option v-for="preset in presetList" 
+            :key="preset.id" 
+            :value="preset.id"
+          >{{ preset.name }}</a-select-option>
+        </a-select>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+<script setup>
+import ApiClient from '@/utils/ApiClient';
+import { ref } from 'vue';
+/** @var {Object} */
+const props = defineProps({
+    activeSlot: Object,
+});
+/** @var {Boolean} */
+const enable = ref(false);
+/** @var {Array} */
+const presetList = ref([]);
+/** @var {Number} */
+const presetId = ref(null);
+
+// display modal
+async function actionModalShow() {
+    let client = ApiClient.getClient();
+    presetList.value = await client.digestionPresetList();
+    enable.value = true;
+}
+
+// 预设执行取消
+async function actionCancel() {
+    enable.value = false;
+}
+
+// 预设执行确认
+async function actionPresetSetupOk() {
+    enable.value = false;
+    let client = ApiClient.getClient();
+    await client.taskAppend('Digestion',{
+        slotIndex : props.activeSlot.index * 1,
+        id : presetId.value * 1
+    });
+}
+</script>

src/web/src/pages/main/contents/OperationTubeRacks.vue

@@ -1,69 +1,56 @@
 <template>
-
-
-<div class="h-full flex flex-col bg-white rounded-xl p-5" style="background-color: rgb(238, 245, 255);">
-          <div class="h-0 grow flex flex-col">
-            
-
-
-
-
-            <div ref="container" class="heating-plate h-0 grow flex flex-col justify-center items-center rounded-full">
-    <div class="relative w-1/4 h-1/4">
-      <div v-for="tubeRackSlot in tubeRackSlots" :key="tubeRackSlot.index" 
-        :class="getTubeRackSlotClass(tubeRackSlot)" 
-        :style="{transform: `rotateZ(${(tubeRackSlot.index-1)*72}deg) translateY(140%)`}"
-      >
-        <div class="title absolute w-full text-center">
-          <p class="mb-1">
-            <span v-if="!tubeRackSlot.isErrorSlot">A - {{ tubeRackSlot.index + 1 }}</span>
-            <span v-else>异常</span>
-          </p>
-          <p class="mb-0" v-if="null !== tubeRackSlot.digestionName">{{ tubeRackSlot.digestionName }}</p>
-        </div>
-        <a-row class="tube-rack p-1 rounded-lg h-full"
-          :class="{'active': activeRackSlot?.index === tubeRackSlot.index }"
-          @click="actionActiveSlot(tubeRackSlot)"
-        >
-          <a-col class="p-1" v-for="tubeIndex in 16" :key="tubeIndex" :span="6">
-            <div class="tube rounded-full h-full w-full"></div>
-          </a-col>
-        </a-row>
-      </div>
-    </div>
-  </div>
-
-
-
-
-
-          </div>
-          <div class="mt-3">
-            <a-row>
-              <a-col :span="13" class="text-left">
-                <!-- 这里还有个预设按钮 ~~~ -->
-                <operation-tube-rack-acid-add v-if="null !== activeRackSlot" :active-slot="activeRackSlot"/>
-                <operation-tube-rack-heating v-if="null !== activeRackSlot" :active-slot="activeRackSlot"/>
-                <!-- <operation-sample-take-shot /> -->
-              </a-col>
-              <a-col :span="11" class="text-right">
-                <!-- <operation-sample-add /> -->
-                <a-button class="ml-1" @click="actionSampleTakeOut"><MinusCircleOutlined /></a-button>
+  <div class="h-full flex flex-col bg-white rounded-xl p-5" style="background-color: rgb(238, 245, 255);">
+    <div class="h-0 grow flex flex-col">
+      <div ref="container" class="heating-plate h-0 grow flex flex-col justify-center items-center rounded-full">
+        <div class="relative w-1/4 h-1/4">
+          <div v-for="tubeRackSlot in tubeRackSlots" :key="tubeRackSlot.index" 
+            :class="getTubeRackSlotClass(tubeRackSlot)" 
+            :style="{transform: `rotateZ(${(tubeRackSlot.index-1)*72}deg) translateY(140%)`}"
+          >
+            <div class="title absolute w-full text-center">
+              <p class="mb-1">
+                <span v-if="!tubeRackSlot.isErrorSlot">A - {{ tubeRackSlot.index + 1 }}</span>
+                <span v-else>异常</span>
+              </p>
+              <p class="mb-0" v-if="null !== tubeRackSlot.digestionName">{{ tubeRackSlot.digestionName }}</p>
+            </div>
+            <a-row class="tube-rack p-1 rounded-lg h-full"
+              :class="{'active': activeRackSlot?.index === tubeRackSlot.index }"
+              @click="actionActiveSlot(tubeRackSlot)"
+            >
+              <a-col class="p-1" v-for="tubeIndex in 16" :key="tubeIndex" :span="6">
+                <div class="tube rounded-full h-full w-full"></div>
               </a-col>
             </a-row>
           </div>
         </div>
-
-
-
-
-  
+      </div>
+    </div>
+    <div class="mt-3">
+      <a-row>
+        <a-col :span="13" class="text-left">
+          <operation-tube-rack-preset v-if="null !== activeRackSlot" :active-slot="activeRackSlot"/>
+          <operation-tube-rack-acid-add v-if="null !== activeRackSlot" :active-slot="activeRackSlot"/>
+          <operation-tube-rack-heating v-if="null !== activeRackSlot" :active-slot="activeRackSlot"/>
+          <operation-tube-rack-take-shot v-if="null !== activeRackSlot" :active-slot="activeRackSlot"/>
+        </a-col>
+        <a-col :span="11" class="text-right">
+          <operation-tube-rack-add />
+          <operation-tube-rack-take-out v-if="null !== activeRackSlot" :active-slot="activeRackSlot"/>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
 </template>
 <script setup>
 import { ref } from 'vue';
 import anime from 'animejs/lib/anime.es.js';
 import OperationTubeRackHeating from './OperationTubeRackHeating.vue';
 import OperationTubeRackAcidAdd from './OperationTubeRackAcidAdd.vue';
+import OperationTubeRackTakeOut from './OperationTubeRackTakeOut.vue';
+import OperationTubeRackAdd from './OperationTubeRackAdd.vue';
+import OperationTubeRackTakeShot from './OperationTubeRackTakeShot.vue';
+import OperationTubeRackPreset from './OperationTubeRackPreset.vue';
 /** @var {Object} */
 const props = defineProps({
   tubeRackSlots: Array,