浏览代码

refactor(frontend): 优化摄影功能和检测按钮样式

-调整检测按钮宽度
- 优化拍照预览界面布局和样式
- 修复拍照功能相关问题
- 优化开始生成按钮状态和点击逻辑
panqiuyao 3 月之前
父节点
当前提交
cdc6ffe573
共有 2 个文件被更改,包括 80 次插入42 次删除
  1. 1 1
      frontend/src/components/check/index.vue
  2. 79 41
      frontend/src/views/Photography/shot.vue

+ 1 - 1
frontend/src/components/check/index.vue

@@ -51,7 +51,7 @@
     </div>
     <template #footer v-if="!checkLoading">
         <div class="flex" v-if="!checkSuccess">
-            <div class="check-btn cu-p" @click="reCheck">重新监测一次</div>
+            <div class="check-btn cu-p"  style="width: 160px" @click="reCheck">重新监测一次</div>
         </div>
         <div class="flex" v-else>
             <div class="check-btn cu-p" style="width: 180px" @click="confirm()">检测成功,继续操作!</div>

+ 79 - 41
frontend/src/views/Photography/shot.vue

@@ -66,16 +66,17 @@
         </div>
 
         <div class="last-photo" v-show="showlastPhoto" v-key="lastPhoto.file_path">
-          <div class="flex between">
+
+<!--          <div class="flex between">
             <div></div>
             <div class="flex-item">{{ lastPhoto.action_name || '' }}</div>
-            <div class="cu-p">
+            <div class="close">
               <el-icon style="color: #000" @click="showlastPhoto = false" class="close-icon" v-log="{ describe: { action: '关闭最近拍照预览' } }">
                 <Close/>
               </el-icon>
             </div>
-          </div>
-          <el-image  :src="getFilePath(lastPhoto.file_path)"  fit="contain" ></el-image>
+          </div>-->
+          <el-image  :src="getFilePath(lastPhoto.file_path)"  fit="cover" ></el-image>
         </div>
 
       </template>
@@ -190,8 +191,14 @@
             />
             <span class="empty-text">暂无数据</span>
           </div>-->
-          <div v-if="goodsList.length" class="next-step button--primary1 flex-col" @click="openPhotographyDetail" v-log="{ describe: { action: '点击开始生成' } }"><span
-              class="next-step-text">{{ configInfoStore.appModel === 1 ? '开始生成' : '开始生成'}}</span></div>
+          <div
+            class="next-step button--primary1 flex-col"
+            :class="{ 'is-disabled': !goodsList.length || runLoading || takePictureLoading }"
+            @click="(!goodsList.length || runLoading || takePictureLoading) ? null : openPhotographyDetail()"
+            v-log="{ describe: { action: '点击开始生成' } }"
+          >
+            <span class="next-step-text">{{ configInfoStore.appModel === 1 ? '开始生成' : '开始生成'}}</span>
+          </div>
         </div>
 
     </div>
@@ -576,25 +583,6 @@ const reTakePicture = async (img)=>{
       type: 'smart_shooter_photo_take',
       "data":{"id":img.id,"goods_art_no":img.goods_art_no},
     })
-    clientStore.ipc.on(icpList.socket.message + '_smart_shooter_photo_take', (event, result) => {
-      console.log('_smart_shooter_photo_take')
-      console.log(result)
-
-      runLoading.value = false;
-      if(result.code === 0){
-        getPhotoRecords()
-        setTimeout(()=>{
-          showlastPhoto.value = false
-        },6000)
-      }else if(result.msg) {
-
-        runLoading.value = false;
-        reNosObj.value.goods_art_no = ''
-        reNosObj.value.action = ''
-        ElMessage.error(result.msg)
-      }
-
-    })
   }
 
 
@@ -749,7 +737,7 @@ onMounted(async () => {
       runAction.value.action = '';
       setTimeout(()=>{
         showlastPhoto.value = false
-      },5000)
+      },3000)
     }
 
   })
@@ -877,18 +865,18 @@ const showlastPhoto = ref(false)
 const  getLastPhotoRecord = async ()=>{
 
   return;
+
   if(goodsList.value && goodsList.value.length === 0) return;
   clientStore.ipc.removeAllListeners(icpList.takePhoto.getLastPhotoRecord);
   clientStore.ipc.send(icpList.takePhoto.getLastPhotoRecord,);
 
   clientStore.ipc.on(icpList.takePhoto.getLastPhotoRecord, (event, result) => {
-    console.log('getLastPhotoRecord')
-    console.log(result)
-    console.log(runAction.value)
+    console.log('getLastPhotoRecord');
+    console.log( result.data?.goods_art_no);
     clientStore.ipc.removeAllListeners(icpList.takePhoto.getLastPhotoRecord);
     if(result.code === 0){
-      if(lastPhoto.value?.image_path){
-        if(  lastPhoto.value?.image_path == result.data?.image_path) return;
+      if(lastPhoto.value?.photo_file_name){
+     //   if(  lastPhoto.value?.image_path == result.data?.image_path) return;
 
         if(runAction.value.goods_art_no === result.data?.goods_art_no){
           showlastPhoto.value = true
@@ -908,6 +896,7 @@ clientStore.ipc.on(icpList.socket.message+'_smart_shooter_photo_take', async (ev
   console.log('_smart_shooter_photo_take');
   console.log(result);
 
+  runLoading.value = false;
 
   //
   if(result.code === 0){
@@ -915,8 +904,23 @@ clientStore.ipc.on(icpList.socket.message+'_smart_shooter_photo_take', async (ev
     if (smartShooterTimeout) {
       clearTimeout(smartShooterTimeout);
     }
+    setTimeout(() => {
+      showlastPhoto.value =  true;
+      lastPhoto.value = {
+        file_path:result.data.photo_file_name
+      };
+        setTimeout(()=>{
+          if(!runAction.value.goods_art_no){
+            showlastPhoto.value =  false;
+          }
+        },3000)
+    }, 100);
     smartShooterTimeout = setTimeout(() => {
       getPhotoRecords();
+
+      if(!runAction.value.goods_art_no){
+        showlastPhoto.value =  false;
+      }
     }, 2000);
   }else if(result.msg) {
 
@@ -949,7 +953,7 @@ clientStore.ipc.on(icpList.socket.message + '_run_mcu_update', (event, result) =
 
             setTimeout(()=>{
               showlastPhoto.value = false
-            },5000)
+            },3000)
           }
         })
        // getPhotoRecords()
@@ -1028,10 +1032,10 @@ const onGenerateCLick = (menu,item)=>{
 
 <style  lang="scss">
 .shot-image-popper {
-  width: calc(100vw - 370px) !important;
-  left: 20px !important;
-  top: 50px !important;
-  height: calc(100vh - 70px) !important;
+  width: calc(100vw - 470px) !important;
+  left: 70px !important;
+  top: 100px !important;
+  height: calc(100vh - 170px) !important;
   transform: translate(0px, 0px) !important;
 
   .el-image {
@@ -1602,12 +1606,18 @@ const onGenerateCLick = (menu,item)=>{
           background-size: 100% 100%;
           width: 100%;
           line-height: 50px;
+          cursor: pointer;
+
+          &.is-disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            pointer-events: none;
+          }
 
           .next-step-text {
             width: 100%;
             overflow-wrap: break-word;
             color: rgba(255, 255, 255, 1);
-            font-weight: NaN;
             text-align: center;
             white-space: nowrap;
 
@@ -1617,11 +1627,39 @@ const onGenerateCLick = (menu,item)=>{
       }
 .last-photo{
   position: fixed;
-  left: 20px;
-  top: 50px;
-  bottom: 20px;
-  right: 350px;
+  padding: 10px;
+  box-shadow: 0 0 5px rgb(0 0 0 / 50%);
+  left: 70px;
+  top: 100px;
+  bottom: 60px;
+  right: 400px;
   z-index: 10;
+
+  .close {
+    position: absolute;
+    right: -7px;
+    top: -1px;
+    background: #fff;
+    width: 30px;
+    height: 30px;
+    border-radius: 30px;
+    z-index: 11;
+    text-align: center;
+    line-height: 30px;
+    box-shadow: 0 0 5px rgb(0 0 0 / 50%);
+  }
+  .el-image {
+    width: 100%;
+    height:100%;
+    display: block;
+
+    .el-image__inner {
+      width: 100%;
+      height:100%;
+      display: block;
+
+    }
+  }
 }
 </style>