ocr识别及答案存储

src/components/Test/Test.vue

@@ -571,7 +571,7 @@ export default {
     changeRadio(e, code, index, itemIndex) {
       // console.log('e, code, index, itemIndex: ', e, code, index, itemIndex);
       this.Rerender(e, index, itemIndex);
-      // this.$emit('getCollaoseHeight', this.testIndex);
+      this.$emit('getCollaoseHeight', this.testIndex);
       this.setAnswer(code, e);
     },
     // 修改是否是烟雾病的题时,

src/pages/camera/camera.vue

@@ -1,14 +1,19 @@
 <template>
   <div class="camera">
-    <camera device-position="back" flash="auto" @error="error" style="width: 100%; height: 500upx">
+    <camera device-position="back" flash="auto" @error="error" style="width: 100%; height: 60%">
       <!-- <cover-image src="../../static/scan-frame/scan-img.png" class="scan-img"></cover-image> -->
     </camera>
     <view class="scan-text">支持将“住院病案首页”“医嘱单”拍照进行文字识别</view>
-    <button type="primary" @click="takePhoto">拍照</button>
-    <scroll-view :scroll-x="true">
-      <image class="photos-box" v-for="item in srcList" :key="item" :src="item" />
+    <button class="take-btn" @click="takePhoto"></button>
+    <scroll-view class="scroll-box" :scroll-x="true">
+      <div class="flex flex-nowrap">
+        <div class="photos-case" v-for="(item, index) in srcList" :key="item">
+          <image class="photos-box" :src="item" />
+          <u-icon color="#aaa" size="50rpx" class="photos-icon" name="close-circle-fill" @click="delPhotos(index)"></u-icon>
+        </div>
+      </div>
     </scroll-view>
-    <button type="primary" @click="submitSrc">确定</button>
+    <button class="submit-btn flex items-center justify-center flex-nowrap" @click="submitSrc">确定({{ srcList.length }})</button>
     <u-toast ref="uToast" />
   </div>
 </template>
@@ -19,7 +24,7 @@ import { mapState, mapMutations } from 'vuex';
 export default {
   components: {},
   data: () => ({
-    srcList: ['http://101.201.226.163/filedeal/uploads/upload/20220117/5544a104844c448d8fbe339563580008.jpg'],
+    srcList: ['http://101.201.226.163/filedeal/uploads/upload/20220118/23f05a3dde9a4323bc95b1b061379cb5.jpeg'],
     action: '',
   }),
   computed: {
@@ -31,7 +36,7 @@ export default {
     // this.srcList = [];
   },
   methods: {
-    ...mapMutations('carbasics', ['setIsRefresh']),
+    ...mapMutations('carbasics', ['setIsRefresh', 'setBasicData']),
     // 拍张并且上传给后台
     takePhoto() {
       const ctx = uni.createCameraContext();
@@ -65,18 +70,27 @@ export default {
     // 点击确定提交图片路径数组进行试题提交
     async submitSrc() {
       try {
+        if (!this.srcList.length) {
+          this.$refs.uToast.show({
+            title: '没有选择图片,无法识别',
+            type: 'warning',
+          });
+          return;
+        }
         const param = {
           fileList: this.srcList,
           projectId: this.firstAidId,
         };
         const data = await this.$u.api.generalBasic(param);
-        console.log('data: ', data);
+        this.saveAnswer(data);
         this.$refs.uToast.show({
           title: '上传成功',
           type: 'success',
         });
         this.setIsRefresh();
-        uni.navigateBack();
+        setTimeout(() => {
+          uni.navigateBack();
+        }, 500);
       } catch (error) {
         this.$refs.uToast.show({
           title: '上传失败,请稍后重试',
@@ -84,6 +98,40 @@ export default {
         });
       }
     },
+    // 删除要识别的图片
+    delPhotos(index) {
+      let { srcList } = this;
+      srcList.splice(index, 1);
+      this.srcList = [...srcList];
+      this.$refs.uToast.show({
+        title: '删除成功',
+        type: 'success',
+      });
+    },
+    // 图片识别成功后,将识别到的答案存储到后台
+    saveAnswer(data) {
+      const codeAndAnswerList = [];
+      for (let key in data) {
+        let obj = {
+          questionCode: key,
+          answer: [],
+        };
+        if (key) {
+          for (var i = 0; i < data[key].length; i++) {
+            obj.answer.push(data[key][i].answer);
+          }
+          codeAndAnswerList.push(obj);
+        }
+      }
+      if (!codeAndAnswerList.length) {
+        console.log('没有答案,无法存储');
+        return;
+      }
+      // 准备存储读取到的答案,然后返回录入界面,在录入界面用model显示
+      // 试题为多选显示,勾选代表确定提交识别到的答案,不勾选代表不提交
+      // 所有试题只能 勾选/取消勾选 无法修改答案
+      this.setBasicData(codeAndAnswerList);
+    },
   },
   watch: {},
 
@@ -111,9 +159,52 @@ export default {
 </script>
 
 <style>
+.scan-text {
+  color: #aaa;
+  font-size: 14px;
+  margin: 10rpx;
+}
+.scroll-box {
+  white-space: nowrap;
+}
+.photos-case {
+  position: relative;
+}
+.photos-icon {
+  position: absolute;
+  font-size: 20px;
+  right: 0px;
+  top: 0px;
+}
+.camera {
+  height: 100vh;
+  width: 100%;
+  background-color: #000;
+  position: relative;
+}
 .photos-box {
+  display: inline-block;
   width: 130rpx;
   height: 130rpx !important;
-  margin: 10rpx;
+  margin: 20rpx;
+}
+.take-btn {
+  background-color: #fff;
+  height: 100rpx;
+  width: 100rpx;
+  position: absolute;
+  bottom: 60rpx;
+  left: 325rpx;
+  border-radius: 50%;
+  box-shadow: 0 0 20px rgb(255, 255, 255);
+}
+.submit-btn {
+  height: 50rpx;
+  position: absolute;
+  bottom: 60rpx;
+  right: 40rpx;
+  font-size: 14px;
+  background-color: #40a9ff;
+  color: #fff;
 }
 </style>

src/pages/inner/inner.vue

@@ -3,7 +3,14 @@
     <!-- :style="{ paddingTop: detailsData.valueType ? '28px' : '28px' }" -->
     <div class="w-full" v-for="(item, index) in testList" :key="index">
       <template v-if="item.testType === 1">
-        <Test :answer-list="answerList" v-if="type" class="w-full" :list="item.content" />
+        <Test
+          :testIndex="index"
+          @getCollaoseHeight="getCollaoseHeight"
+          :answer-list="answerList"
+          v-if="type"
+          class="w-full"
+          :list="item.content"
+        />
       </template>
       <u-collapse
         :head-style="headerStyle"
@@ -30,6 +37,9 @@
       </u-collapse>
     </div>
     <div class="ocr-open-box" @click="openOcr">OCR</div>
+    <u-modal v-model="showBasic">
+      <view class="slot-content"> </view>
+    </u-modal>
   </div>
 </template>
 
@@ -58,6 +68,7 @@ export default {
     afterStr: '主要治疗',
     beforeStr: '基本信息',
     answerList: {},
+    showBasic: true,
   }),
   computed: { ...mapState('carbasics', ['InputCode', 'firstAidId', 'isRefresh']) },
   methods: {
@@ -173,6 +184,11 @@ export default {
 </script>
 
 <style>
+.slot-content {
+  font-size: 28rpx;
+  color: rgba(0, 0, 0, 0.85);
+  padding-left: 30rpx;
+}
 .ocr-open-box {
   position: fixed;
   right: 0;

src/store/carbasics/mutations.js

@@ -37,6 +37,14 @@ const mutations = {
   setIsRefresh(state) {
     state.isRefresh += 1;
   },
+  /**
+   * 增加basicData值,ocr识别到的试题及答案的数据修改
+   * @param { object } state
+   * @param { array } data
+   */
+  setBasicData(state, data) {
+    state.basicData = data;
+  },
 };
 
 export default mutations;

src/store/carbasics/state.js

@@ -8,6 +8,7 @@ const state = {
   refreshList: 0, // 依据此值去重新请求病例列表(当从创建病例界面 创建了病例之后,修改此值,并且返回病例列表界面,病例列表重新查询数据)
   InputCode: 'RYPG', // 当前试题录入的类型
   isRefresh: 0, // 是否刷新当前试题界面 监听数值,每次改变一次刷新一次
+  basicData: null, // ocr识别到的试题及答案的数据
 };
 
 export default state;