From 9394e61f571658fc619aaf9792ea91cebcb12582 Mon Sep 17 00:00:00 2001
From: maxmon <541182180@qq.com>
Date: Sat, 16 Apr 2022 18:29:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=82=B9=E6=A0=87=E6=B3=A8=E7=BB=93?=
 =?UTF-8?q?=E6=9E=9C=E6=8E=A5=E5=85=A5=E5=90=8E=E5=8F=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/src/components/CV/point.vue  | 71 ++++++++++++++++++++++-----------
 fe/src/components/NER/index.vue | 24 ++++++-----
 2 files changed, 61 insertions(+), 34 deletions(-)

diff --git a/fe/src/components/CV/point.vue b/fe/src/components/CV/point.vue
index 3ed2ae6..d3beea5 100644
--- a/fe/src/components/CV/point.vue
+++ b/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()">
-      <div v-for="point in points" :point="point" :key="`${point[0]}_${point[1]}`" :style="{
-        left: point[0]*100 + '%',
-        top: point[1]*100 + '%',
-        backgroundColor: point.color
-      }" class="point" @contextmenu="$event.preventDefault();delPoint(point)" @mouseover="overPoint($event, point)"></div>
+      <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="annoDetail in annoDetails" :point="annoDetail" :key="`${annoDetail.point[0]}_${annoDetail.point[1]}`" :style="{
+        left: annoDetail.point[0]*100 + '%',
+        top: annoDetail.point[1]*100 + '%',
+        backgroundColor: annoDetail.point.color
+      }" 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)
-      console.log(this.points)
+      // this.points.push(newPoint)
+      // console.log(this.points)
+      this.annoDetails.push({
+        point: newPoint,
+        type: this.nowType
+      })
+      this.save()
       return false
     },
-    delPoint (point) {
-      const idx = this.points.indexOf(point)
-      console.log(point, this.points)
-      this.points.splice(idx, 1)
+    delPoint (annoDetail) {
+      const idx = this.annoDetails.indexOf(annoDetail)
+      console.log(annoDetail, this.points)
+      this.annoDetails.splice(idx, 1)
+      this.save()
     },
     overPoint (ev, point) {
       if (ev.which === 3) {
@@ -54,16 +78,17 @@ export default ({
     }
   },
   watch: {
-    // src: {
-    //   handler (val) {
-    //     const annoImg = document.getElementById('anno-img')
-    //     annoImg.src = val
-    //     console.log(annoImg.width)
-    //     this.width = annoImg.width
-    //     this.height = annoImg.height
-    //   },
-    //   deep: true
-    // }
+    annoDetails: {
+      handler (val) {
+        // const annoImg = document.getElementById('anno-img')
+        // annoImg.src = val
+        // console.log(annoImg.width)
+        // this.width = annoImg.width
+        // this.height = annoImg.height
+        console.log(val)
+      },
+      deep: true
+    }
   }
 })
 </script>
diff --git a/fe/src/components/NER/index.vue b/fe/src/components/NER/index.vue
index 8f40a2f..3989387 100644
--- a/fe/src/components/NER/index.vue
+++ b/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加上是否缩小的属性
-      let nowSmallAreaEnd
-      for (let i = 0; i < this.ners.length; i++) {
-        const ner = this.ners[i]
-        ner.isSmall = false
-        if (nowSmallAreaEnd) {
-          if (ner.start <= nowSmallAreaEnd) {
-            ner.isSmall = true
+      if (this.projectType === '命名实体识别') {
+        // 给ner加上是否缩小的属性
+        let nowSmallAreaEnd
+        for (let i = 0; i < this.ners.length; i++) {
+          const ner = this.ners[i]
+          delete ner.isSmall
+          if (nowSmallAreaEnd) {
+            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)
       }
     }
   },