图像识别

src/components/imageAIVerifyErr copy.vue

@@ -1,43 +1,26 @@
 <template>
   <div class="imageAIVerifyErr">
     <el-dialog
-      title=""
+      title="图像识别结果"
       :visible.sync="vanPopup"
       width="80%"
       :append-to-body="true"
       :close-on-click-modal="false"
       @close="close"
       custom-class="AIVerifyErrdialog">
-      <div class="AIVerifyErrMask">
-        <div class="contentAIVerify">
-          <!-- <div class="uploadImgAIVerify" @click="uploadImg(false)" v-if="shopSignChange == 0">
-            <div class="labelAIVerify"><span class="van-f-red-AIVerify">*</span>重新拍照上传</div>
-            <div class="iconAIVerify">
-              <van-icon class="photoAIVerify" name="photograph" size="22px" color="#969696" />
-            </div>
-          </div> -->
-          <div class="errorImg" v-if="shopSignChange == 0">
-            <img
-              v-if="imageAIVerifyData.url"
-              :src="imageAIVerifyData.url"
-              width="100%"
-              height="200px"
-              @click="previewsImg(imageAIVerifyData.url)" />
-            <img v-else :src="imageEmpty" width="100%" height="200px" />
+      <div class="AIVerifyErrMask" v-if="npkpiData">
+        <!-- shopSignChange 与历史照片是否一致(是否要更换照片) 0一致(要更换)，1不一致(不要更换) -->
+        <template v-if="shopSignChange == 0">
+          <div class="errorImg">
+            <img v-if="url" :src="url" height="300px" @click="previewsImg(url)" />
+            <img v-else :src="imageEmpty" width="100%" height="300px" />
           </div>
           <div class="AIVerify">
-            图像识别结果：<span style="color: red">{{ contentMessage }}</span>
+            <span>{{ contentMessage }}</span>
           </div>
-        </div>
-        <!-- shopSignChange 与历史照片是否一致(是否要更换照片) 0一致(要更换)，1不一致(不要更换) -->
-        <template v-if="shopSignChange == 0">
-          <template v-if="shotsNum >= 3">
-            <!-- 拜访店招显示 -->
-            <div class="tipsAIVerify" v-if="npkpiData.recognizeType == 1">
-              <van-icon name="question-o" />上传后作为本店标准店招，未来每次拜访时校验。
-            </div>
+          <template v-if="shotsNum >= maxNum">
             <div class="feedbackMessage">
-              <div class="label">反馈图像识别不正确:</div>
+              <div class="label">若图像识别不正确，可在此反馈:</div>
               <div class="value">
                 <van-field
                   v-model="feedbackMessage"
@@ -50,63 +33,62 @@
           </template>
           <div class="uploadBtnAIVerify">
             <div class="confirmUploadAIVerify" @click="uploadImg(false)">重新拍照</div>
-            <div v-if="shotsNum >= 3" class="stillUploadAIVerify" @click="confirmUpload">
+            <div v-if="shotsNum >= maxNum" class="stillUploadAIVerify" @click="confirmUpload">
               仍要上传
             </div>
           </div>
+          <template v-if="shotsNum >= maxNum">
+            <div class="tipsAIVerify" v-if="npkpiData.recognizeType == 1">
+              <van-icon name="question-o" />上传后作为本店标准店招，未来每次拜访时校验。
+            </div>
+          </template>
         </template>
         <template v-if="shopSignChange == 1">
           <div class="historyImageAIVerify">
             <!-- 有门店身份证时 只显示门店身份证和本地拜访照 -->
-            <template v-if="imageAIVerifyData.storeIDCardUrl">
+            <template v-if="storeIDCardUrl">
               <div class="storeIDCardUrl imageItemAIVerify">
                 <img
-                  :src="imageAIVerifyData.storeIDCardUrl"
+                  :src="storeIDCardUrl"
                   width="100px"
                   height="100px"
-                  @click="previewsImg(imageAIVerifyData.storeIDCardUrl)" />
+                  @click="previewsImg(storeIDCardUrl)" />
                 <span>门店标准店招</span>
               </div>
             </template>
             <template v-else>
               <div class="initImage imageItemAIVerify">
                 <img
-                  v-if="imageAIVerifyData.createStoreUrl"
-                  :src="imageAIVerifyData.createStoreUrl"
+                  v-if="createStoreUrl"
+                  :src="createStoreUrl"
                   width="100px"
                   height="100px"
-                  @click="previewsImg(imageAIVerifyData.createStoreUrl)" />
+                  @click="previewsImg(createStoreUrl)" />
                 <img v-else :src="imageEmpty" width="100px" height="100px" />
                 <span>建店时门店照</span>
               </div>
               <div class="newestImage imageItemAIVerify">
                 <img
-                  v-if="imageAIVerifyData.lastVisitUrl"
-                  :src="imageAIVerifyData.lastVisitUrl"
+                  v-if="lastVisitUrl"
+                  :src="lastVisitUrl"
                   width="100px"
                   height="100px"
-                  @click="previewsImg(imageAIVerifyData.lastVisitUrl)" />
+                  @click="previewsImg(lastVisitUrl)" />
                 <img v-else :src="imageEmpty" width="100px" height="100px" />
                 <span>上次拜访店招</span>
               </div>
             </template>
             <div class="presentImage imageItemAIVerify">
-              <img
-                v-if="imageAIVerifyData.url"
-                :src="imageAIVerifyData.url"
-                width="100px"
-                height="100px"
-                @click="previewsImg(imageAIVerifyData.url)" />
+              <img v-if="url" :src="url" width="100px" height="100px" @click="previewsImg(url)" />
               <img v-else :src="imageEmpty" width="100px" height="100px" />
               <span>本次拜访店招</span>
             </div>
           </div>
-          <div class="tipsRemarkAIVerify">
-            <div>若历史照片拍摄不规范，请选择<span style="color: #81b337">更新门店照</span></div>
-            <div>本次拜访店招会作为本店标准店招，未来每次拜访时校验</div>
+          <div class="AIVerify">
+            <span>{{ contentMessage }}</span>
           </div>
           <div class="feedbackMessage">
-            <div class="label">反馈图像识别不正确:</div>
+            <div class="label">若图像识别不正确，可在此反馈:</div>
             <div class="value">
               <van-field
                 v-model="feedbackMessage"
@@ -120,6 +102,10 @@
             <div class="confirmUploadAIVerify" @click="uploadImg(true)">重新拍照</div>
             <div class="changeImageAIVerify" @click="confirmUpDataImage()">更新门店照</div>
           </div>
+          <div class="tipsRemarkAIVerify">
+            <div>若历史照片拍摄不规范，请选择<span style="color: #81b337">更新门店照</span></div>
+            <div>本次拜访店招会作为本店标准店招，未来每次拜访时校验</div>
+          </div>
         </template>
       </div>
     </el-dialog>
@@ -166,6 +152,11 @@ export default {
       shopSignChange: 0,
       npkpiData: null,
       feedbackMessage: '', //反馈图像识别不正确原因
+      url: '', //	本次图片路径
+      createStoreUrl: '', //	建店时店招
+      lastVisitUrl: '', //	上次拜访时店招
+      storeIDCardUrl: '', //	门店身份证
+      maxNum: 2,
     };
   },
   methods: {
@@ -183,7 +174,13 @@ export default {
         this.source == 'visit'
           ? this.imageAIVerifyData.npkpiData
           : this.imageAIVerifyData[0].npkpiData;
+      let imageAIVerifyData =
+        this.source == 'visit' ? this.imageAIVerifyData : this.imageAIVerifyData[0];
       this.shopSignMatchList = this.npkpiData.shopSignMatchList;
+      this.url = imageAIVerifyData.url || ''; //	图片路径
+      this.createStoreUrl = imageAIVerifyData.createStoreUrl || ''; //	建店时店招
+      this.lastVisitUrl = imageAIVerifyData.lastVisitUrl || ''; //	上次拜访时店招
+      this.storeIDCardUrl = imageAIVerifyData.storeIDCardUrl || ''; //	门店身份证
       // 先判断照片作弊情况，然后是否合格，然后是否和历史照片一致
       // 作弊和不合格记录识别次数，超过两次弹框提醒
       if (this.npkpiData.checkInfo) {
@@ -235,7 +232,7 @@ export default {
     // isUpdate:是否更新店招照片，只有门店店招需要更新
     confirmUpload() {
       // 拜访店招 不合格或作弊三次先提示是否仍要上传，确认后在判断是否与历史照片一致
-      if (this.npkpiData.recognizeType == 1 && this.shotsNum >= 3) {
+      if (this.npkpiData.recognizeType == 1 && this.shotsNum >= this.maxNum) {
         this.comparisonImage();
       } else {
         this.$emit('close');
@@ -294,12 +291,29 @@ export default {
     width: 95% !important;
     margin-top: 1vh !important;
     border-radius: 8px !important;
+    font-size: 32px !important;
   }
   .AIVerifyErrMask {
     width: 100%;
     padding: 8px;
     overflow: hidden;
     /* min-height: 180px; */
+    .errorImg {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 45px;
+    }
+    .AIVerify {
+      font-size: 30px;
+      text-align: center;
+      width: 40%;
+      margin-top: 45px;
+      span {
+        color: #9e0202;
+      }
+    }
   }
   .van-popup {
     width: 90%;
@@ -324,13 +338,6 @@ export default {
     padding: 5px;
   }
   .contentAIVerify {
-    .AIVerify {
-      padding: 6px 0;
-      font-size: 14px;
-      /* color: red; */
-      /* text-align: center; */
-      /* border-top: 1px solid #cfcfcf; */
-    }
     .uploadImgAIVerify {
       display: flex;
       align-items: center;
@@ -341,25 +348,19 @@ export default {
         font-size: 14px;
       }
     }
-    .errorImg {
-      width: 100%;
-    }
   }
   .tipsAIVerify {
-    border-top: 1px solid #cfcfcf;
     padding: 5px 0;
     font-size: 14px;
     color: red;
-    /* white-space: nowrap; */
   }
   .uploadBtnAIVerify {
-    /* border-top: 1px solid #cfcfcf; */
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 8px 0;
+    margin-top: 45px;
     div {
-      /* width: 40%; */
       display: flex;
       justify-content: center;
       align-items: center;
@@ -367,11 +368,18 @@ export default {
       color: #fff;
       border-radius: 10px;
       margin: 0 6px;
-      flex: 1;
+      /* flex: 1; */
     }
     .confirmUploadAIVerify {
-      background-color: #0057ba;
-      padding: 8px 0;
+      /* background-color: #0057ba;
+      padding: 8px 0; */
+      width: 298px;
+      height: 68px;
+      background-image: linear-gradient(180deg, #ffa1a1 0%, #f6695f 35%, #ed301d 100%),
+        linear-gradient(#aed0f9, #aed0f9);
+      background-blend-mode: normal, normal;
+      box-shadow: 0px 3px 6px 0px rgba(183, 30, 14, 0.35);
+      /* border-radius: 10px; */
     }
     .changeImageAIVerify {
       background-color: #81b337;
@@ -395,11 +403,13 @@ export default {
       justify-content: center;
       span {
         font-size: 12px;
+        padding-top: 3px;
       }
     }
   }
   .tipsRemarkAIVerify {
     border-top: 1px solid #cfcfcf;
+    padding: 3px 0;
     div {
       font-size: 12px;
       padding: 3px 0;

src/components/imageAIVerifyErr.vue

@@ -16,11 +16,11 @@
             <img v-else :src="imageEmpty" width="100%" height="200px" />
           </div>
           <div class="AIVerify">
-            <span>{{ contentMessage }}</span>
+            <span style="color: red">{{ contentMessage }}</span>
           </div>
           <template v-if="shotsNum >= maxNum">
             <div class="feedbackMessage">
-              <div class="label">若图像识别不正确，可在此反馈:</div>
+              <div class="label">若图像识别不正确，可在下表反馈:</div>
               <div class="value">
                 <van-field
                   v-model="feedbackMessage"
@@ -85,10 +85,10 @@
             </div>
           </div>
           <div class="AIVerify">
-            <span>{{ contentMessage }}</span>
+            <span style="color: red">{{ contentMessage }}</span>
           </div>
           <div class="feedbackMessage">
-            <div class="label">若图像识别不正确，可在此反馈:</div>
+            <div class="label">若图像识别不正确，可在下表反馈:</div>
             <div class="value">
               <van-field
                 v-model="feedbackMessage"
@@ -305,7 +305,7 @@ export default {
     }
     .AIVerify {
       padding: 6px 0;
-      font-size: 30px;
+      font-size: 16px;
       /* color: red; */
       text-align: center;
       /* border-top: 1px solid #cfcfcf; */
@@ -322,11 +322,6 @@ export default {
     width: 8px;
     display: inline-block;
     line-height: 26px;
-    width: 40%;
-    margin-top: 45px 0;
-    span {
-      color: #9e0202;
-    }
   }
   .photoAIVerify {
     /*margin-top: 9px;*/
@@ -372,18 +367,11 @@ export default {
       color: #fff;
       border-radius: 10px;
       margin: 0 6px;
-      /* flex: 1; */
+      flex: 1;
     }
     .confirmUploadAIVerify {
-      /* background-color: #0057ba;
-      padding: 8px 0; */
-      width: 298px;
-      height: 68px;
-      background-image: linear-gradient(180deg, #ffa1a1 0%, #f6695f 35%, #ed301d 100%),
-        linear-gradient(#aed0f9, #aed0f9);
-      background-blend-mode: normal, normal;
-      box-shadow: 0px 3px 6px 0px rgba(183, 30, 14, 0.35);
-      /* border-radius: 10px; */
+      background-color: #0057ba;
+      padding: 8px 0;
     }
     .changeImageAIVerify {
       background-color: #81b337;

src/views/AIImage/AIImageDetail.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="AIImageDetail">
+  <div class="AIImageDetail" v-if="data">
     <van-nav-bar class="navBar" title="异常反馈" left-arrow @click-left="onClickLeft">
     </van-nav-bar>
-    <div class="message" v-if="data">
+    <div class="message">
       <div class="storeTitle">
         <div class="storeName">{{ data.storeName }}</div>
         <div class="storeCode" style="margin-left: 5px; margin-top: 2px">
@@ -99,7 +99,6 @@ export default {
         } else {
           this.causeTitle = '反馈不准确原因';
         }
-        this.causeMessage = '';
       },
       immediate: true,
     },
@@ -169,8 +168,14 @@ export default {
         feedbackError: this.AIResult == '0' ? this.causeMessage : '', //	string	反馈AI识别不正确
       }).then((res) => {
         if (res.code == 200) {
-          this.$toast('已反馈给本部');
-          this.onClickLeft();
+          this.$toast.loading({
+            duration: 1000,
+            message: '已反馈给本部',
+            forbidClick: true,
+            onClose: () => {
+              this.onClickLeft();
+            },
+          });
         } else {
           this.$toast('提交失败');
         }