~

src/web/src/pages/main/contents/notification/TaskDigestionStepChecking.vue

@@ -0,0 +1,78 @@
+<template>
+  <a-modal v-if="enable" v-model:open="enable" title="标记异常试管"
+    :closable="false"
+    :mask-closable="false"
+  >
+    <div class="relative">
+      <div>
+        <img :src="imageShotData" class="w-full rounded-xl" />
+      </div>
+      <div class="absolute top-0 w-full h-full flex flex-col justify-around">
+        <div v-for="row in 4" :key="row" class="h-full flex flex-row justify-around">
+          <div v-for="col in 4" :key="col" class="h-full w-full p-2 flex flex-row items-center justify-center">
+            <div class="w-1/2 h-1/2 rounded-full border-5 border-dashed border-gray-300"
+              :class="{'!border-red-500':errorTubes.includes((row-1)*4+(col-1))}"
+              @click="actionTubeErrorToggle((row-1)*4+(col-1))"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <a-button type="primary" @click="actionOk">确定</a-button>
+    </template>
+  </a-modal>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useAppStore } from '@/stores/AppStore';
+import ApiClient from '@/utils/ApiClient';
+/** @var {AppStore} */
+const appStore = useAppStore();
+/** @var {Ref<boolean>} */
+const enable = ref(false);
+/** @var {string} */
+let taskId = null;
+/** @var {Object} */
+const imageShotData = ref(null);
+/** @var {Array} */
+const errorTubes = ref([]);
+// on mounted
+onMounted(mounted);
+
+// mounted
+function mounted() {
+    appStore.registerNotificationHandler('TaskDigestionStepChecking', handleTaskDigestionStepChecking);
+}
+
+// handle TaskStartResetErrorTubeRackPutIn
+async function handleTaskDigestionStepChecking( task ) {
+    taskId = task;
+
+    let client = ApiClient.getClient();
+    let response = await client.call('camera/take-shot');
+    errorTubes.value = [];
+    imageShotData.value = response.data;
+
+    enable.value = true;
+}
+
+// 异常区
+function actionTubeErrorToggle( index ) {
+    if ( errorTubes.value.includes(index) ) {
+        errorTubes.value.splice(errorTubes.value.indexOf(index), 1);
+    } else {
+        errorTubes.value.push(index);
+    }
+}
+
+// action ok
+async function actionOk() {
+    enable.value = false;
+    let client = ApiClient.getClient();
+    await client.taskStepActionExecute(taskId, "Done", {
+        tubes : errorTubes.value,
+    });
+}
+</script>