feat: 点标注结果接入后台
This commit is contained in:
maxmon
parent
dc1670bb4c
commit
9394e61f57
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue