From dc1670bb4c4b9099705ed014f9a1abc1ceedb49e Mon Sep 17 00:00:00 2001
From: maxmon <541182180@qq.com>
Date: Sat, 16 Apr 2022 18:03:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E5=B7=A6=E9=94=AE?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=82=B9=EF=BC=8C=E5=8F=B3=E9=94=AE=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/src/components/CV/point.vue  | 100 ++++++++++++++++++++++++++++++++
 fe/src/components/NER/index.vue |  78 ++++++++++++-------------
 2 files changed, 138 insertions(+), 40 deletions(-)
 create mode 100644 fe/src/components/CV/point.vue

diff --git a/fe/src/components/CV/point.vue b/fe/src/components/CV/point.vue
new file mode 100644
index 0000000..3ed2ae6
--- /dev/null
+++ b/fe/src/components/CV/point.vue
@@ -0,0 +1,100 @@
+<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>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default ({
+  name: 'CVPoint',
+  props: {
+    src: {
+      type: String,
+      default: '',
+      required: true
+    }
+  },
+  data () {
+    return {
+      points: [],
+      width: 0,
+      height: 0
+    }
+  },
+  methods: {
+    log (...args) {
+      console.log(args)
+    },
+    addPoint (ev) {
+      ev.preventDefault()
+      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)
+      return false
+    },
+    delPoint (point) {
+      const idx = this.points.indexOf(point)
+      console.log(point, this.points)
+      this.points.splice(idx, 1)
+    },
+    overPoint (ev, point) {
+      if (ev.which === 3) {
+        this.delPoint(point)
+      }
+    }
+  },
+  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
+    // }
+  }
+})
+</script>
+
+<style>
+.anno-img-box {
+  position: relative;
+  display: flex;
+  height: 100%;
+  align-content: center;
+  justify-content: center;
+}
+.anno-img {
+  width: 100%;
+  user-select: none;
+}
+.point-box {
+  width: 300px;
+  position: absolute;
+  font-size: 0;
+}
+.point {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  transform: translateX(-50%) translateY(-50%);
+  border-radius: 50%;
+  background-color: #f00;
+}
+.point:hover {
+  width: 16px;
+  height: 16px;
+}
+</style>
diff --git a/fe/src/components/NER/index.vue b/fe/src/components/NER/index.vue
index fe40ae9..8f40a2f 100644
--- a/fe/src/components/NER/index.vue
+++ b/fe/src/components/NER/index.vue
@@ -50,7 +50,7 @@
             <template v-for="(w, i) in word.name">
               <line
               v-if="i === 0 || ((word.start%columnWordCount)+i) % columnWordCount === 0"
-               :key="`${word}${w}${i}`"
+              :key="`${word}${w}${i}`"
                 :x1="`${((word.start+i)%columnWordCount)*20 + (word.isSmall && i === 0 ? 2 : 0)}px`"
                 :y1="`${((word.start+i)/columnWordCount|0)*35 + (word.isSmall ? 0 : -2)}px`"
                 :x2="`${((Math.min(word.end-(word.start+i), columnWordCount, columnWordCount - (word.start+i)%columnWordCount))*20 - (word.isSmall && i === 0 ? 4 : 0)) + ((word.start+i)%columnWordCount)*20 + (word.isSmall && i === 0 ? 2 : 0)}px`"
@@ -62,37 +62,39 @@
           </span>
             <text x="201" y="10" fill="red">关系一</text>
           </svg> -->
-          <div class="word-rect-area">
-            <span class="rect" v-for="(word, idx) in nowNers" :key="idx">
-              <span v-for="(w, i) in word.name" :key="`${word}${w}${i}`">
-                <!-- <span class="ner-type"
-                  v-if="i===0"
-                  :style="{
-                    left: `${((word.start+i)%columnWordCount)*20}px`,
-                    top:  `${((word.start+i)/columnWordCount|0)*35 - 14}px`,
-                  }"
-                >{{word.type}}</span> -->
-                <span class="ner-anchor"
-                  v-if="i === 0 || ((word.start%columnWordCount)+i) % columnWordCount === 0"
-                  :style="{
-                  border: '1px solid #ccc',
-                  position: 'absolute',
-                  display: 'inline-block',
-                  left: `${((word.start+i)%columnWordCount)*20 + (word.isSmall && i === 0 ? 2 : 0)}px`,
-                  top:  `${((word.start+i)/columnWordCount|0)*35 + (word.isSmall ? 0 : -2)}px`,
-                  width: `${(Math.min(word.end-(word.start+i), columnWordCount, columnWordCount - (word.start+i)%columnWordCount))*20 - (word.isSmall && i === 0 ? 4 : 0)}px`,
-                  height: `${word.isSmall?18:22}px`,
-                  background: `${types[word.type]?types[word.type]['color']:'000000'}`,
-                  lineHeight: '25px',
-                  borderTopLeftRadius: `${(i===0)?6:0}px`,
-                  borderBottomLeftRadius: `${(i===0)?6:0}px`,
-                  borderLeft: `${i===0?1:0} solid #ccc`,
-                  borderTopRightRadius: `${(i!==0 && word.name.length-i <= columnWordCount) || (i===0 && word.start%columnWordCount+word.name.length <= columnWordCount)?6:0}px`,
-                  borderBottomRightRadius: `${(i!==0 && word.name.length-i <= columnWordCount) || (i===0 && word.start%columnWordCount+word.name.length <= columnWordCount)?6:0}px`,
-                  borderRight: `${(i!==0 && word.name.length-i <= columnWordCount) || (i===0 && word.start%columnWordCount+word.name.length < columnWordCount)?1:0} solid #ccc`
-                }"></span>
+          <div v-if="projectType === '命名实体识别'">
+            <div class="word-rect-area">
+              <span class="rect" v-for="(word, idx) in nowNers" :key="idx">
+                <span v-for="(w, i) in word.name" :key="`${word}${w}${i}`">
+                  <!-- <span class="ner-type"
+                    v-if="i===0"
+                    :style="{
+                      left: `${((word.start+i)%columnWordCount)*20}px`,
+                      top:  `${((word.start+i)/columnWordCount|0)*35 - 14}px`,
+                    }"
+                  >{{word.type}}</span> -->
+                  <span class="ner-anchor"
+                    v-if="i === 0 || ((word.start%columnWordCount)+i) % columnWordCount === 0"
+                    :style="{
+                    border: '1px solid #ccc',
+                    position: 'absolute',
+                    display: 'inline-block',
+                    left: `${((word.start+i)%columnWordCount)*20 + (word.isSmall && i === 0 ? 2 : 0)}px`,
+                    top:  `${((word.start+i)/columnWordCount|0)*35 + (word.isSmall ? 0 : -2)}px`,
+                    width: `${(Math.min(word.end-(word.start+i), columnWordCount, columnWordCount - (word.start+i)%columnWordCount))*20 - (word.isSmall && i === 0 ? 4 : 0)}px`,
+                    height: `${word.isSmall?18:22}px`,
+                    background: `${types[word.type]?types[word.type]['color']:'000000'}`,
+                    lineHeight: '25px',
+                    borderTopLeftRadius: `${(i===0)?6:0}px`,
+                    borderBottomLeftRadius: `${(i===0)?6:0}px`,
+                    borderLeft: `${i===0?1:0} solid #ccc`,
+                    borderTopRightRadius: `${(i!==0 && word.name.length-i <= columnWordCount) || (i===0 && word.start%columnWordCount+word.name.length <= columnWordCount)?6:0}px`,
+                    borderBottomRightRadius: `${(i!==0 && word.name.length-i <= columnWordCount) || (i===0 && word.start%columnWordCount+word.name.length <= columnWordCount)?6:0}px`,
+                    borderRight: `${(i!==0 && word.name.length-i <= columnWordCount) || (i===0 && word.start%columnWordCount+word.name.length < columnWordCount)?1:0} solid #ccc`
+                  }"></span>
+                </span>
               </span>
-            </span>
+            </div>
           </div>
           <div v-if="projectType === '命名实体识别'">
             <span class="word" v-for="(word, idx) in nowText" :key="idx" :id="idx" @contextmenu="stopPrev" @mousedown="startSelect(idx, $event)" @touchstart="startSelect(idx, $event)" @mousemove="pointWord(idx)" @touchmove="pointWordByTouch($event)"
@@ -106,9 +108,7 @@
               <br v-if="word === '\n'" :key="idx"/>
             </template>
           </div>
-          <div v-if="projectType === '图片点标注'">
-            <img :src="nowText" class="anno-img">
-          </div>
+          <CVPoint v-if="projectType === '图片点标注'" :src="nowText"></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>
@@ -134,6 +134,7 @@
 <script>
 import { getColor } from '../../js/color.js'
 import { saveAsFile } from '../../js/utils.js'
+import CVPoint from '@/components/CV/point.vue'
 
 // 是否是单机版
 const isLocal = false
@@ -188,6 +189,9 @@ function updateType2Server (projectName, typeList, types) {
 
 export default {
   name: 'NER',
+  components: {
+    CVPoint
+  },
   data () {
     return {
       configCanCtlType: isLocal, // 是否支持实体类型的调整
@@ -340,9 +344,6 @@ export default {
             that.$set(that.nersCache, that.nowFile, [...that.ners])
             that.flushWordsType()
           }
-          if (info.fileContent[0] !== 'd') {
-            info.fileContent = 'data:image/jpeg;base64,' + info.fileContent
-          }
           // 更新文件的文本信息
           that.$set(that.textDic, newFile, info.fileContent)
           that.nowText = that.textDic[newFile]
@@ -1054,9 +1055,6 @@ export default {
   top: -9px;
   right: -9px;
 }
-.anno-img {
-  width: 100%;
-}
 @media only screen and (max-width: 800px) {
   .out-title {
     text-align: right !important;