图像识别

src/components/imageAIVerifyErr.vue

@@ -1,27 +1,119 @@
 <template>
   <div class="imageAIVerifyErr">
-    <van-popup v-model="show">
+    <van-popup v-model="imageAIVerifyFlag">
       <div class="title">图像识别结果</div>
       <div class="content">
-        <div class="AIVerify">{{ result }}</div>
+        <div class="AIVerify">{{ contentMessage }}</div>
+        <van-cell>
+          <template #title> <span class="van-f-red">*</span>拍照上传</template>
+          <template #right-icon>
+            <van-icon
+              class="photo photos"
+              name="photograph"
+              size="22px"
+              color="#969696"
+              @uploadImg="uploadImg" />
+          </template>
+        </van-cell>
+      </div>
+      <div class="btn" v-if="shotsNum >= 3">
+        <div class="tips"><van-icon name="question-o" />上传后会有何影响</div>
+        <van-button type="danger" @confirmUpload="confirmUpload">仍要上传</van-button>
       </div>
-      <div class="btn"></div>
     </van-popup>
   </div>
 </template>
 <script>
+import store from '@/store';
+import { mapState } from 'vuex';
 export default {
   props: {
-    result: {
-      type: Object,
-      default: () => {},
+    imageAIVerifyFlag: {
+      type: Boolean,
+      default: false,
+    },
+    imageAIVerifyData: {
+      type: [Array, null],
+      default: null,
+    },
+  },
+  computed: {
+    ...mapState({
+      shotsNum: (state) => state.otheStore.shotsNum,
+    }),
+  },
+  watch: {
+    imageAIVerifyFlag: {
+      handler(val) {
+        if (val) this.initData();
+      },
     },
   },
   data() {
     return {
-      show: true,
+      contentMessage: '', //提示内容
     };
   },
+  methods: {
+    initData() {
+      let imageAIVerifyData = [
+        {
+          businessId: 'f82c7c7a-f88d-485e-ad41-2cf310d82e2a',
+          url: 'https://cdn-svs-test.nipponpaint.com.cn/%E5%90%B4%E5%BA%B7-%E9%97%A8%E5%BA%97%E7%85%A7-%E7%9C%8B%E4%BB%80%E4%B9%88-20241121095404.jpg?Expires=2047686846&OSSAccessKeyId=LTAI5tG1DTJFA16BHkzHVxjz&Signature=XO9QJSYwUh9NRWErkyGNdHJ1f44%3D',
+          size: '9527',
+          npkpiData: {
+            storeCode: '999523520',
+            recognizeType: 1,
+            shopSignInfo: {
+              name: '立邦门店正佳店',
+              npStoreCode: '121423',
+              phone: '13018882888',
+              address: '广州市正佳广场',
+              contact: '李某',
+              businessScope: '涂料',
+              mainBrand: '立邦',
+            },
+            shopSignChange: 1,
+            checkInfo: {
+              cheatState: 0,
+              cheatType: '重复',
+              qualifiedState: 1,
+              unqualifiedReason: '翻拍',
+            },
+            shopSignMatchList: null,
+          },
+        },
+      ];
+      // 图匠识别目的(1:店招内容识别,2:门店代码识别,3:调色机识别,4:更换店招)
+      // if( imageAIVerifyData[0].npkpiData.recognizeType == 1 ){}
+      // checkInfo 图片检查结果
+      // cheatState 是否作弊(0:未作弊，1:作弊)
+      // cheatType	作弊类型
+      // qualifiedState 是否合格(0:不合格，1:合格)
+      // unqualifiedReason	不合格原因
+      let checkInfo = imageAIVerifyData[0].npkpiData.checkInfo || null;
+      if (checkInfo) {
+        if (checkInfo.qualifiedState == 0) {
+          // 失败次数增加超过三次特殊处理
+          store.dispatch('setShotsNum', this.shotsNum + 1);
+          // 不合格
+          this.contentMessage = this.contentMessage + checkInfo.unqualifiedReason;
+          if (checkInfo.cheatState == 1) {
+            // 作弊
+            this.contentMessage = this.contentMessage + checkInfo.cheatType;
+          }
+        }
+      }
+    },
+    // 重新拍照
+    uploadImg() {
+      this.$emit('uploadImg');
+    },
+    // 仍要上传
+    confirmUpload() {
+      this.$emit('confirmUpload', { data: this.imageAIVerifyData });
+    },
+  },
 };
 </script>
 <style scoped lang="scss">
@@ -30,5 +122,15 @@ export default {
     width: 80%;
     padding: 8px;
   }
+  .van-f-red {
+    color: red;
+    width: 8px;
+    display: inline-block;
+    line-height: 26px;
+  }
+  .photo {
+    /*margin-top: 9px;*/
+    float: right;
+  }
 }
 </style>

src/components/uploadImgVStore.vue

@@ -18,9 +18,17 @@
     </div>
     <p style="text-align: center">{{ imgText }}</p>
     <div class="mask" v-if="progressFlag">
-      <el-progress type="circle" :percentage="percentage"></el-progress>
+      <el-progress
+        type="circle"
+        :percentage="percentage"
+        :show-text="true"
+        :format="format"></el-progress>
     </div>
-    <imageAIVerifyErr v-if="imageAIVerifyFlag"></imageAIVerifyErr>
+    <imageAIVerifyErr
+      :imageAIVerifyFlag="imageAIVerifyFlag"
+      :imageAIVerifyData="imageAIVerifyData"
+      @confirmUpload="confirmUpload"
+      @uploadImg="uploadImg"></imageAIVerifyErr>
   </div>
 </template>
 
@@ -29,10 +37,16 @@ import { ImagePreview } from 'vant';
 import axios from 'axios';
 import { uploadImagev } from '@/api/index';
 import imageAIVerifyErr from './imageAIVerifyErr';
-
+import { mapState } from 'vuex';
+import store from '@/store';
 export default {
   name: 'uploadImg',
   components: { imageAIVerifyErr },
+  computed: {
+    ...mapState({
+      shotsNum: (state) => state.otheStore.shotsNum,
+    }),
+  },
   props: {
     uploadid: {
       type: String,
@@ -66,6 +80,7 @@ export default {
       default: 1,
     },
     photoIdentifyType: {
+      // 图匠识别目的(1:店招内容识别,2:门店代码识别,3:调色机识别,4:更换店招)
       type: String,
       default: '',
     },
@@ -82,6 +97,7 @@ export default {
       percentage: 0,
       timeFlag: null,
       imageAIVerifyFlag: false,
+      imageAIVerifyData: null, //图匠校验返回的数据
     };
   },
   watch: {
@@ -149,35 +165,30 @@ export default {
         locationRemark: localStorage.getItem('locationRemark'),
         deptName: localStorage.getItem('deptName'),
       };
-      var loind1 = that.$toast.loading({
-        duration: 0,
-        message: '上传中...',
-        forbidClick: true,
-      });
+      this.toastLoading(0, '上传中...', true);
       // 需要图匠校验的添加参数和loading
       if (this.photoIdentifyType) {
+        // store.dispatch('setShotsNum', this.shotsNum + 1);
         form.photoIdentifyType = this.photoIdentifyType;
         this.progress();
       }
-      // loading
       uploadImagev(form).then((res) => {
+        this.toastLoading().clear();
         if (res.code == -1) {
           // 图匠图片校验接口超时
-          this.requestTimeOut();
+          this.requestTimeOut(res);
         } else if (res.code == 200) {
           // 图匠校验结果返回
           if (this.photoIdentifyType) {
-            this.imageAIVerifyFlag = true;
+            // 重置loaidng状态
             this.resetProgress();
+            this.imageAIVerifyFlag = true;
+            this.imageAIVerifyData = res.data;
+            // 过滤校验数据
+            // this.filterResData(res);
           } else {
             // 正常流程
-            let imgArr = [];
-            res.data.forEach((item) => {
-              imgArr.push(item.url);
-            });
-            loind1.clear();
-            that.$toast('上传成功！');
-            that.$emit('newimgarr', { fileUrl: imgArr.join(','), type: that.type });
+            this.normalFlow(res);
           }
         } else {
           that.$toast('上传失败！');
@@ -193,15 +204,40 @@ export default {
         this.percentage = this.percentage + 10;
       }, 1000);
     },
-    requestTimeOut() {
+    format(percentage) {
+      return 'format';
+    },
+    requestTimeOut(res) {
       this.resetProgress();
       this.$dialog
         .confirm({
           title: '系统提示',
-          message: '网络原因导致图像未被识别，暂时允许提交',
+          message: res.msg,
           showCancelButton: false,
         })
-        .then(() => {});
+        .then(() => {
+          this.normalFlow(res);
+        });
+    },
+    // 正常流程
+    normalFlow(res) {
+      let imgArr = [];
+      let businessId = [];
+      res.data.forEach((item) => {
+        imgArr.push(item.url);
+        if (item.businessId) businessId.push(item.businessId);
+      });
+      this.$toast('上传成功！');
+      this.$emit('newimgarr', {
+        fileUrl: imgArr.join(','),
+        type: this.type,
+        businessId: businessId.join(','),
+      });
+    },
+    filterResData(res) {
+      let npkpiData = res.data.npkpiData;
+      // 图匠识别目的(1:店招内容识别,2:门店代码识别,3:调色机识别,4:更换店招)
+      let recognizeType = npkpiData.recognizeType;
     },
     // 重置loaidng状态
     resetProgress() {
@@ -210,6 +246,9 @@ export default {
       this.progressFlag = false;
       this.percentage = 0;
     },
+    confirmUpload(res) {
+      this.normalFlow(res);
+    },
   },
 };
 </script>

src/store/getters.js

@@ -1,4 +1,5 @@
 const getters = {
   userInfo: (state) => state.user.userInfo,
+  shotsNum: (state) => state.otheStore.shotsNum,
 };
 export default getters;

src/store/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import user from './modules/user';
+import otheStore from './modules/otheStore';
 import getters from './getters';
 
 Vue.use(Vuex);
@@ -8,6 +9,7 @@ Vue.use(Vuex);
 const store = new Vuex.Store({
   modules: {
     user,
+    otheStore,
   },
   getters,
 });

src/store/modules/otheStore.js

@@ -0,0 +1,19 @@
+const otheStore = {
+  state: {
+    shotsNum: 0,
+  },
+
+  mutations: {
+    SET_SHOTS_NUM: (state, value) => {
+      state.shotsNum = value;
+    },
+  },
+
+  actions: {
+    setShotsNum({ commit }, value) {
+      commit('SET_SHOTS_NUM', value);
+    },
+  },
+};
+
+export default otheStore;

src/views/storeManagement/storeAdd.vue

@@ -625,6 +625,7 @@ import txmapimg1 from '@/assets/txmap1.svg';
 import txmapimg2 from '@/assets/txmap2.svg';
 import txmapimg3 from '@/assets/marker_blue.png';
 import { getPosition, getTicketFun } from '@/utils/TXApiFun';
+import store from '@/store';
 export default {
   name: 'storeAdd',
   components: { uploadImg, uploadImgView, mapmarker, uploadImgc, deleteImgView },
@@ -848,6 +849,8 @@ export default {
         this.getLocation();
       });
     });
+    // 拍照次数重置
+    store.dispatch('setShotsNum', 0);
   },
   methods: {
     addressFns(val) {
@@ -1166,6 +1169,7 @@ export default {
       } else {
         this.fromValue.carShopImgList.push(val.fileUrl);
       }
+      this.fromValue.businessId = val.businessId ? val.businessId : '';
     },
     getChainsByDeptId(deptCode, ifJzStoreType) {
       getChainsByDeptCode({
@@ -1633,6 +1637,8 @@ export default {
       this.fromValue.orgName = '';
       this.fromValue.orgId = '';
       this.fromValue.ifJzStoreType = value.ifJzStoreType;
+      // 重置拍摄照片
+      this.fromValue.img = '';
       this.getChainsByDeptCode(null, value.ifJzStoreType);
       this.showPicker = false;
     },