拍照测试

frontend/src/views/Photography/check.vue

@@ -17,12 +17,12 @@
         <div class="example-image flex-col"><span class="example-text">示范图片</span></div>
       </div>
       <div v-if="!imageUrl" class="action-button flex cente">
-        <div @click="toPhoto" class="check-button  button--primary1 flex-col"><span class="button-text">拍照检查</span>
+        <div @click="takePictures" class="check-button  button--primary1 flex-col"><span class="button-text">拍照检查</span>
         </div>
       </div>
 
       <div v-else class="action-button flex center">
-        <div @click="imageUrl = ''" class="check-button  button--white flex-col">
+        <div @click="takePictures" class="check-button  button--white flex-col">
           <span class="button-text">重新拍照检查</span>
         </div>
         <router-link class="mar-left-20 " :to="{
@@ -37,22 +37,30 @@
     </div>
   </div>
 </template>
-<script>
-const url = 'https://ossimg.valimart.net/uploads/vali_ai/20240312/171022217892595.png'
-export default {
-  data() {
-    return {
-      imageUrl: '',
-
-    };
-  },
-  methods: {
-    toPhoto() {
-      this.imageUrl = url
-    }
-
+<script setup lang="ts">
+import client from "@/stores/modules/client";
+import icpList from '@/utils/ipc'
+const clientStore = client();
+console.log(icpList);
+import { ref } from 'vue'
+const url = ref('https://ossimg.valimart.net/uploads/vali_ai/20240312/171022217892595.png')
+const imageUrl = ref('')
+const previewKey = ref(0)
+const preview = ref('http://localhost:5513/preview.jpg')
+
+
+function takePictures() {
+  if (clientStore.isClient) {
+    clientStore.ipc.removeAllListeners(icpList.camera.takePictures);
+    clientStore.ipc.send(icpList.camera.takePictures);
+    clientStore.ipc.on(icpList.camera.takePictures, async (event, result) => {
+      setTimeout(() => {
+        previewKey.value++;
+        preview.value = `http://localhost:5513/preview.jpg?key=${previewKey.value}`
+      }, 1000)
+    })
   }
-};
+}
 </script>
 <style scoped lang="scss">
 .check-page {
@@ -117,7 +125,8 @@ export default {
           width: 600px;
           margin: 4px 0 0 16px;
           position: relative;
-          .camera-description{
+
+          .camera-description {
             position: absolute;
             bottom: 20px;
             width: 60%;