feat: 点标注结果接入后台

fe/src/components/CV/point.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="anno-img-box">
     <div class="point-box">
-      <img class="anno-img" id="anno-img" @click="addPoint($event)" :src="`data:image/jpeg;base64,${src}`" @dragstart="$event.preventDefault()" @contextmenu="$event.preventDefault()">
+      <img class="anno-img" id="anno-img" @click="addPoint($event)" :src="`data:image/jpeg;base64,${fileContent}`" @dragstart="$event.preventDefault()" @contextmenu="$event.preventDefault()">
-      <div v-for="point in points" :point="point" :key="`${point[0]}_${point[1]}`" :style="{
+      <div v-for="annoDetail in annoDetails" :point="annoDetail" :key="`${annoDetail.point[0]}_${annoDetail.point[1]}`" :style="{
-        left: point[0]*100 + '%',
+        left: annoDetail.point[0]*100 + '%',
-        top: point[1]*100 + '%',
+        top: annoDetail.point[1]*100 + '%',
-        backgroundColor: point.color
+        backgroundColor: annoDetail.point.color
-      }" class="point" @contextmenu="$event.preventDefault();delPoint(point)" @mouseover="overPoint($event, point)"></div>
+      }" class="point" @contextmenu="$event.preventDefault();delPoint(annoDetail)" @mouseover="overPoint($event, annoDetail)"></div>
     </div>
   </div>
 </template>
@@ -16,10 +16,24 @@
 export default ({
   name: 'CVPoint',
   props: {
-    src: {
+    fileContent: {
       type: String,
       default: '',
       required: true
+    },
+    annoDetails: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    nowType: {
+      type: String,
+      default: '1234',
+      required: true
+    },
+    save: {
+      type: Function,
+      required: true
     }
   },
   data () {
@@ -35,17 +49,27 @@ export default ({
     },
     addPoint (ev) {
       ev.preventDefault()
+      if (!this.nowType) {
+        alert('请先选择标注类型')
+        return
+      }
       const tar = ev.target
       const newPoint = [ev.offsetX / tar.offsetWidth, ev.offsetY / tar.offsetHeight]
       console.log(newPoint)
-      this.points.push(newPoint)
+      // this.points.push(newPoint)
-      console.log(this.points)
+      // console.log(this.points)
+      this.annoDetails.push({
+        point: newPoint,
+        type: this.nowType
+      })
+      this.save()
       return false
     },
-    delPoint (point) {
+    delPoint (annoDetail) {
-      const idx = this.points.indexOf(point)
+      const idx = this.annoDetails.indexOf(annoDetail)
-      console.log(point, this.points)
+      console.log(annoDetail, this.points)
-      this.points.splice(idx, 1)
+      this.annoDetails.splice(idx, 1)
+      this.save()
     },
     overPoint (ev, point) {
       if (ev.which === 3) {
@@ -54,16 +78,17 @@ export default ({
     }
   },
   watch: {
-    // src: {
+    annoDetails: {
-    //   handler (val) {
+      handler (val) {
-    //     const annoImg = document.getElementById('anno-img')
+        // const annoImg = document.getElementById('anno-img')
-    //     annoImg.src = val
+        // annoImg.src = val
-    //     console.log(annoImg.width)
+        // console.log(annoImg.width)
-    //     this.width = annoImg.width
+        // this.width = annoImg.width
-    //     this.height = annoImg.height
+        // this.height = annoImg.height
-    //   },
+        console.log(val)
-    //   deep: true
+      },
-    // }
+      deep: true
+    }
   }
 })
 </script>

fe/src/components/NER/index.vue

@@ -108,7 +108,7 @@
               <br v-if="word === '\n'" :key="idx"/>
             </template>
           </div>
-          <CVPoint v-if="projectType === '图片点标注'" :src="nowText"></CVPoint>
+          <CVPoint v-if="projectType === '图片点标注'" :fileContent="nowText" :annoDetails="ners" :nowType="'1234'" :save="save"></CVPoint>
         </div>
         <div class="page-btn-box">
           <button class="page-btn" @click="changeIdx(-1, $event)" @mouseover="setFocus('page-up')" @mouseleave="setFocus('')">上一个 {{ fastTypeKey['page-up'] ? `【${fastTypeKey['page-up']}】` : '' }}</button>
@@ -681,18 +681,20 @@ export default {
   },
   watch: {
     ners: function () {
-      // 给ner加上是否缩小的属性
+      if (this.projectType === '命名实体识别') {
-      let nowSmallAreaEnd
+        // 给ner加上是否缩小的属性
-      for (let i = 0; i < this.ners.length; i++) {
+        let nowSmallAreaEnd
-        const ner = this.ners[i]
+        for (let i = 0; i < this.ners.length; i++) {
-        ner.isSmall = false
+          const ner = this.ners[i]
-        if (nowSmallAreaEnd) {
+          delete ner.isSmall
-          if (ner.start <= nowSmallAreaEnd) {
+          if (nowSmallAreaEnd) {
-            ner.isSmall = true
+            if (ner.start <= nowSmallAreaEnd) {
+              ner.isSmall = true
+            }
           }
+          if (!nowSmallAreaEnd) nowSmallAreaEnd = ner.end - 1
+          nowSmallAreaEnd = Math.max(nowSmallAreaEnd, ner.end - 1)
         }
-        if (!nowSmallAreaEnd) nowSmallAreaEnd = ner.end - 1
-        nowSmallAreaEnd = Math.max(nowSmallAreaEnd, ner.end - 1)
       }
     }
   },