diff --git a/src/web/src/pages/main/contents/OperationTubeRackTakeShot.vue b/src/web/src/pages/main/contents/OperationTubeRackTakeShot.vue
new file mode 100644
index 0000000..7fa8506
--- /dev/null
+++ b/src/web/src/pages/main/contents/OperationTubeRackTakeShot.vue
@@ -0,0 +1,36 @@
+<template>
+  <a-popconfirm title="是否将样本移至观察区？" ok-text="确认" cancel-text="取消" @confirm="actionMoveToLiquidPlate">
+    <a-button class="ml-1" 
+      style="background: transparent;border: solid 1px #becfe7;color: #7c92b1;"
+    ><eye-outlined /></a-button>
+  </a-popconfirm>
+</template>
+<script setup>
+import ApiClient from '@/utils/ApiClient';
+import Common from '@/utils/Common';
+import { Modal } from 'ant-design-vue';
+/** @var {Object} */
+const props = defineProps({
+    activeSlot: Object,
+});
+
+// 移至观察区
+async function actionMoveToLiquidPlate() {
+    let client = ApiClient.getClient();
+    let task = await client.taskAppend('SampleMoveToLiquidPlate',{
+        slotIndex : props.activeSlot.index * 1,
+    });
+    let taskId = task.id;
+
+    while( true ) {
+        task = await client.taskExecutionGet(taskId);
+        if ( 'ERROR' === task.status ) {
+            Modal.error({title: '失败', content: task.message});
+            break ;
+        } else if ( 'FINISHED' === task.status ) {
+            break ;
+        }
+        await Common.delay(1000);
+    }
+}
+</script>
\ No newline at end of file