不需要相机时不获取相机图像

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

@@ -3,7 +3,7 @@
     <div class="camera h-0 grow rounded-2xl flex flex-col justify-center items-center p-1">
       <div v-if="null === imageData">
         <p class="m-0 text-center"><img src="../../../assets/icon/camera-off.svg" /></p>
-        <p class="m-0 mt-2 text-2xl text-white">未检测到照相设备</p>
+        <p class="m-0 mt-2 text-2xl text-white">相机未启用</p>
       </div>
       <img v-else :src="imageData" class="w-full rounded-xl" />
     </div>
@@ -41,8 +41,8 @@
       </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">
-            <div class="w-full h-full rounded-full border-5 border-dashed border-gray-300"
+          <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>
@@ -52,14 +52,17 @@
     </div>
 
     <template #footer>
-      <a-button @click="actionErrorSlotDetect">异常识别</a-button>
+      <!-- <a-button @click="actionErrorSlotDetect">异常识别</a-button> -->
       <a-button @click="actionTubeMoveToErrorSlot">移动至异常区</a-button>
     </template>
   </a-modal>
 </template>
 <script setup>
 import ApiClient from '@/utils/ApiClient';
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { useAppStore } from '@/stores/AppStore';
+/** @var {AppStore} */
+const appStore = useAppStore();
 /** @var {Boolean} */
 const imageModalOpen = ref(false);
 /** @var {Object} */
@@ -76,11 +79,12 @@ let client = null;
 onMounted(mounted);
 // on unmounted
 onUnmounted(unmounted);
+// watch camera enable
+watch(() => appStore.isCameraEnable, handleCameraEnableChange);
 
 // on mounted
 function mounted() {
     client = ApiClient.getClient();
-    refresh();
 }
 
 // on unmounted
@@ -90,18 +94,31 @@ function unmounted() {
     }
 }
 
+// handle camera enable change
+function handleCameraEnableChange( value ) {
+    if ( value ) {
+        console.log('camera enable');
+        refresh();
+    } else {
+        console.log('camera disable');
+        clearTimeout(refreshTimer);
+        imageData.value = null;
+    }
+}
+
 // refresh
 async function refresh() {
     let response = await client.call('camera/image');
     imageData.value = response.data;
-    refreshTimer = setTimeout(() => refresh(), 200);
+    refreshTimer = setTimeout(() => refresh(), 1000);
 }
 
 // 拍照
-function actionTakeShot() {
+async function actionTakeShot() {
+    let response = await client.call('camera/take-shot');
     errorTubes.value = [];
     imageModalOpen.value = true;
-    imageShotData.value = imageData.value;
+    imageShotData.value = response.data;
 }
 
 // 异常区
@@ -125,6 +142,7 @@ async function actionDoorClose() {
 
 // 移动至异常区
 async function actionTubeMoveToErrorSlot() {
+    appStore.setCameraEnable(false);
     await client.taskAppend('TubeMoveToErrorSlot', {
       tubeIndexList: errorTubes.value
     });
@@ -132,6 +150,7 @@ async function actionTubeMoveToErrorSlot() {
 
 // 移动样本到加热板
 async function actionTakeShotCancel() {
+    appStore.setCameraEnable(false);
     await client.taskAppend('SampleMoveToHeatPlate');
 }