소스 검색

fix(photography): 修复演示模式停止逻辑并优化相机预览样式

- 修复演示模式停止时的状态判断逻辑,防止重复执行
- 添加 demoStopping 状态变量控制停止过程
- 实现 MCU 停止等待机制确保设备完全停止后再执行后续操作
- 优化相机预览区域的 CSS 样式,调整宽高设置和居中对齐
- 修正图片显示容器的布局和尺寸限制
- 更新图片对象的适配方式和位置控制
panqiuyao 1 개월 전
부모
커밋
951d110ad6
3개의 변경된 파일과 58개의 추가작업 그리고 28개의 파일을 삭제
  1. 18 8
      frontend/src/views/Photography/check.vue
  2. 38 19
      frontend/src/views/Photography/mixin/usePhotography.ts
  3. 2 1
      frontend/src/views/Photography/shot.vue

+ 18 - 8
frontend/src/views/Photography/check.vue

@@ -596,10 +596,14 @@ onBeforeUnmount(() => {
 
         .camera-preview {
           background-color: rgba(255, 255, 255, 1);
-          height:  calc(100vh - 200px);
+          width: 100%;
+          height: calc(100vh - 200px);
           position: relative;
           margin-top: 20px;
-          position: relative;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
           .camera-description {
             position: absolute;
             bottom: 20px;
@@ -610,9 +614,13 @@ onBeforeUnmount(() => {
             font-size: 14px;
           }
           .camera-preview-img {
-            display: inline-block;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
             height: 100%;
-            min-width: 300px;
+            max-width: 100%;
+            max-height: 100%;
             position: relative;
           }
 
@@ -624,13 +632,15 @@ onBeforeUnmount(() => {
           }
 
           .camera-img {
-          //  width: 100%;
             display: block;
             position: relative;
             box-shadow: 0px 2px 10px 0px rgba(0, 32, 78, 0.1);
-            height: 100%;
-            object-fit:contain;
-
+            max-width: 100%;
+            max-height: 100%;
+            width: auto;
+            height: auto;
+            object-fit: contain;
+            object-position: center;
           }
           .example-image {
             position: absolute;

+ 38 - 19
frontend/src/views/Photography/mixin/usePhotography.ts

@@ -42,6 +42,7 @@ export default function usePhotography() {
 
     // ==================== 演示模式 ====================
     const isDemoMode = ref(false) // 是否处于演示模式
+    const demoStopping = ref(false)
     const demoGoodsArtNo = ref('演示货号1') // 演示货号
     const demoProgramType = ref('执行左脚程序') // 演示程序类型
     const demoConfigList = ref<{id: number, mode_name: string}[]>([]) // 演示配置列表
@@ -833,8 +834,8 @@ const onRemoteControl = async (type) => {
             scheduleSegment(runAction.value.goods_art_no)
           }
 
-          // 演示模式:拍摄完成后自动删除货号
-          if (isDemoMode.value) {
+          // 演示模式:拍摄完成后自动删除货号(正在手动停止时不再自动删)
+          if (isDemoMode.value && !demoStopping.value) {
             const demoGoodsNo = demoGoodsArtNo.value
             setTimeout(async () => {
               try {
@@ -1108,41 +1109,58 @@ const onRemoteControl = async (type) => {
       })
     }
 
+    function waitForMcuStop(timeoutMs = 10000) {
+      return new Promise<void>((resolve) => {
+        const channel = icpList.socket.message + '_run_mcu_stop'
+        let settled = false
+        const finish = () => {
+          if (settled) return
+          settled = true
+          clearTimeout(timer)
+          if (clientStore.ipc?.removeListener) {
+            clientStore.ipc.removeListener(channel, onStop)
+          }
+          resolve()
+        }
+        const onStop = () => finish()
+        const timer = setTimeout(finish, timeoutMs)
+        clientStore.ipc.on(channel, onStop)
+      })
+    }
+
     /**
      * 演示模式:停止演示
-     * 执行完成后删除货号,然后退出演示模式
+     * 先停止拍摄,再删除货号,然后退出演示模式
      */
     const stopDemoMode = async () => {
-      if (!isDemoMode.value) return
-
-      // 停止当前运行
-      if (runLoading.value || takePictureLoading.value) {
-        socketStore.sendMessage({
-          type: 'stop_action',
-        })
-      }
-
-      // 等待拍摄停止,然后删除货号
+      if (!isDemoMode.value || demoStopping.value) return
+      demoStopping.value = true
       const demoGoodsNo = demoGoodsArtNo.value
 
-      // 延迟等待设备停止
-      setTimeout(async () => {
-        // 重置状态
+      try {
+        if (runLoading.value || takePictureLoading.value) {
+          const stopWait = waitForMcuStop()
+          socketStore.sendMessage({
+            type: 'stop_action',
+          })
+          await stopWait
+        }
+
         resetStatus()
 
-        // 删除演示货号
         try {
           await del({ goods_art_nos: [demoGoodsNo] })
         } catch (e) {
           console.error('删除演示货号失败:', e)
         }
 
-        // 退出演示模式
         isDemoMode.value = false
         goods_art_no.value = ''
         goods_art_no_tpl.value = ''
         ElMessage.success('已退出演示模式')
-      }, 500)
+      } finally {
+        demoStopping.value = false
+      }
     }
 
     /**
@@ -1217,6 +1235,7 @@ const onRemoteControl = async (type) => {
       resetStatus,
       // 演示模式
       isDemoMode,
+      demoStopping,
       demoGoodsArtNo,
       demoProgramType,
       demoConfigList,

+ 2 - 1
frontend/src/views/Photography/shot.vue

@@ -20,7 +20,7 @@
     <div class="demo-mode-content">
       <div class="demo-mode-header">
         <span class="demo-mode-tag">演示模式</span>
-        <el-button type="danger" size="large" @click="stopDemoMode" :loading="runLoading || takePictureLoading">
+        <el-button type="danger" size="large" @click="stopDemoMode" :loading="demoStopping">
           停止演示
         </el-button>
       </div>
@@ -378,6 +378,7 @@ const {
   openDemoMode,
   startDemoMode,
   stopDemoMode,
+  demoStopping,
   onDemoProgramTypeChange,
 } = usePhotography()