Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
D
DA-Platform
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
文档服务地址:
http://47.92.0.57:3000/
周报索引地址:
http://47.92.0.57:3000/s/NruNXRYmV
Open sidebar
Berlin
DA-Platform
Commits
c49f1b55
Commit
c49f1b55
authored
Jul 13, 2020
by
李景熙
Browse files
Options
Browse Files
Download
Plain Diff
Merge remote-tracking branch 'origin/develop' into develop
parents
d6116ab5
9368b255
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
798 additions
and
559 deletions
+798
-559
index.html
DAPlatform-front/index.html
+1
-1
imageAnnotiation.vue
...front/src/components/imageAnnotation/imageAnnotiation.vue
+1
-68
layerAnnotation.vue
...-front/src/components/imageAnnotation/layerAnnotation.vue
+241
-71
SelectText.vue
...atform-front/src/components/textAnnotation/SelectText.vue
+198
-174
SelectedText.vue
...form-front/src/components/textAnnotation/SelectedText.vue
+148
-79
Table.vue
DAPlatform-front/src/components/textAnnotation/Table.vue
+198
-151
api.js
DAPlatform-front/src/mock/api.js
+11
-15
图像标注接口文档.docx
文档/图像标注接口文档.docx
+0
-0
No files found.
DAPlatform-front/index.html
View file @
c49f1b55
...
...
@@ -10,4 +10,4 @@
<!-- built files will be auto injected -->
</body>
</html>
<script
src=
"//webapi.amap.com/maps?v=2.0&key=fd28dc34eb931d82a25869cd127005d5"
></script>
<script
src=
"//webapi.amap.com/maps?v=2.0&key=fd28dc34eb931d82a25869cd127005d5
&plugin=AMap.MouseTool,AMap.ToolBar
"
></script>
DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue
View file @
c49f1b55
...
...
@@ -168,56 +168,6 @@ export default {
canvasAll
:
[],
// 画多边形的临时数据
createPTmp
:
[],
// 这个大概就是数据库会存的数据,从后端拿来的应该也就是这样的
// testData: [{
// relationId: 123,
// // imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
// imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
// labelList: [{
// labelId: 0,
// label: 'label1',
// pointList: [{
// pointId: '1-1',
// X: 1.1,
// Y: 2.2
// }, {
// pointId: '1-2',
// X: 1.2,
// Y: 2.3
// }]
// }, {
// labelId: 1,
// label: 'label2',
// pointList: [{
// pointId: '2-1',
// X: 1.1,
// Y: 2.2
// }, {
// pointId: '2-2',
// X: 1.2,
// Y: 2.3
// }]
// }]
// }, {
// relationId: 233,
// imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
// // imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
// labelList: [{
// labelId: 0,
// label: 'label1',
// pointList: [{
// pointId: '1-1',
// X: 1.1,
// Y: 2.2
// }, {
// pointId: '1-2',
// X: 1.2,
// Y: 2.3
// }]
// }]
// }],
imageNum
:
-
1
,
data
:
[],
imageList
:
[],
...
...
@@ -590,24 +540,7 @@ export default {
changeToolBar
(
val
)
{
this
.
activeIndex1
=
val
},
// deleteAnnotation: function () {
// this.$confirm('确定删除此标注', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// this.deleteLabel()
// this.$message({
// type: 'success',
// message: '删除成功!'
// })
// }).catch(() => {
// this.$message({
// type: 'info',
// message: '已取消删除'
// })
// })
// },
loadPicture
()
{
var
len
=
this
.
data
.
length
var
count
=
this
.
pictureId
...
...
DAPlatform-front/src/components/imageAnnotation/layerAnnotation.vue
View file @
c49f1b55
...
...
@@ -5,6 +5,8 @@
<el-button-group
id=
"start"
>
<el-button
class=
"tool-button"
type=
"primary"
>
保存
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
>
退出
</el-button>
<!--
<el-button
class=
"tool-button"
@
click=
"drawRectangle()"
style=
"margin-bottom: 5px"
>
绘制矩形
</el-button>
<el-button
class=
"tool-button"
@
click=
"drawPolygon()"
style=
"margin-bottom: 5px"
>
绘制多边形
</el-button>
-->
</el-button-group>
<el-button-group
style=
"margin-right: 10px ; line-height: 40px;vertical-align: middle"
>
<el-button
class=
"tool-button"
type=
"primary"
style=
"margin-right: 10px"
>
飞入坐标点
</el-button>
...
...
@@ -13,12 +15,12 @@
<a>
Y:
</a>
<input
type=
"text"
style=
"width: 30px"
>
</el-button-group>
<el-
button-group
id=
"tool
"
>
<el-
button
class=
"tool-button"
type=
"primary"
>
多边形标注
</el
-button>
<el-
button
class=
"tool-button"
type=
"primary"
>
矩形标注
</el
-button>
<el-
button
class=
"tool-button"
type=
"primary"
>
建立地标
</el
-button>
<el-button
class=
"tool-button"
type=
"primary"
@
click=
"deleteAnnotation"
>
删除标注
</el-button
>
</el-button-group>
<el-
radio-group
v-model=
"radio1
"
>
<el-
radio-button
label=
"建立地标"
></el-radio
-button>
<el-
radio-button
label=
"矩形标注"
></el-radio
-button>
<el-
radio-button
label=
"多边形标注"
></el-radio
-button>
</el-radio-group
>
</div>
<el-container>
<!-- 侧边栏-->
...
...
@@ -28,11 +30,7 @@
<div
class=
"img-list-title"
>
图层列表
</div>
<div
class=
"img-title-list-box"
>
<div
id=
"img-title-list"
>
<el-tree
:data=
"image_list"
:props=
"defaultProps"
accordion
>
</el-tree>
</div>
</div>
</div>
...
...
@@ -42,6 +40,7 @@
<el-main
class=
"workbench"
>
<!--
<img
src=
"../../assets/logo.png"
>
-->
<div
id=
"container"
>
<!--
<amap
:zoom
.
sync=
"map.zoom"
:center
.
sync=
"map.center"
>
-->
<!--
<amap-marker-->
<!-- :position="[116.473179, 39.993169]"-->
...
...
@@ -68,45 +67,14 @@
height_res
:
0
,
Xpoint
:
0
,
Ypoint
:
0
,
radio1
:
'建立地标'
,
activeIndex1
:
1
,
layerData
:
[],
//layerdata存放标注数据
landMarkData
:
[],
//存放地标数据
image_list
:
[{
label
:
'image1.jpg'
,
children
:
[{
label
:
'标注1'
},
{
label
:
'标注2'
,
}]
},
{
label
:
'image2.jpg'
,
children
:
[{
label
:
'标注1'
},
{
label
:
'标注2'
,
}]
}],
layer_list
:
[{
label
:
'image1.jpg'
,
children
:
[{
label
:
'标注1'
},
{
label
:
'标注2'
,
}]
},
{
label
:
'image2.jpg'
,
children
:
[{
label
:
'标注1'
},
{
label
:
'标注2'
,
}]
}],
layerData
:
null
,
//layerdata存放标注数据
landMarkData
:
null
,
//存放地标数据
relationId
:
null
,
//当前任务的relationID
clickedPosition
:
null
,
//保存最新一次点击的结果,没有使用
map
:
null
,
mouseTool
:
null
,
defaultProps
:
{
children
:
'children'
,
label
:
'label'
...
...
@@ -116,14 +84,20 @@
async
mounted
(){
let
res
=
await
this
.
getLayerList
()
console
.
log
(
res
)
this
.
layerData
=
res
.
layerInfo
this
.
layerData
=
res
.
layerInfo
[
0
].
labelList
console
.
log
(
this
.
layerData
)
this
.
landMarkData
=
res
.
landMarkList
this
.
landMarkData
=
res
.
landMarkList
[
0
].
landmarkEntityList
console
.
log
(
this
.
landMarkData
)
if
(
res
.
layerInfo
[
0
].
relationId
==
res
.
landMarkList
[
0
].
relationId
)
this
.
relationId
=
res
.
landMarkList
[
0
].
relationId
else
console
.
log
(
"relationId不一致,出问题了"
)
/**
* 如果需要格式转换的话可以用formExchange
* 会把labelList放到children里,但是感觉没有太大必要
*/
// this.eventHandle();
this
.
get_height
();
var
_this
=
this
;
window
.
onresize
=
function
(){
...
...
@@ -131,31 +105,93 @@
_this
.
height_res
=
document
.
body
.
clientHeight
-
61
;
}
this
.
init
()
this
.
restore
()
},
watch
:
{
radio1
:
function
f
()
{
if
(
this
.
radio1
==
'建立地标'
)
{
}
else
if
(
this
.
radio1
==
'矩形标注'
)
{
}
else
if
(
this
.
radio1
==
'多边形标注'
)
{
}
else
{
}
}
},
methods
:{
init
()
{
let
map
=
new
AMap
.
Map
(
'container'
,
{
this
.
map
=
new
AMap
.
Map
(
'container'
,
{
center
:
[
116.397428
,
39.90923
],
//中心点坐标
resizeEnable
:
true
,
zoom
:
10
//级别
zoom
:
10
,
//级别
doubleClickZoom
:
false
})
this
.
mouseTool
=
new
AMap
.
MouseTool
(
this
.
map
);
var
layer1
=
new
AMap
.
TileLayer
.
Satellite
();
var
layer2
=
new
AMap
.
TileLayer
.
RoadNet
();
var
layers
=
[
layer1
]
// 添加到地图上
this
.
map
.
add
(
layers
);
let
_this
=
this
this
.
map
.
on
(
'click'
,
function
(
e
)
{
let
value
=
{
X
:
e
.
lnglat
.
getLng
(),
Y
:
e
.
lnglat
.
getLat
()
}
_this
.
clickedPosition
=
value
console
.
log
(
'clicked position: '
)
console
.
log
(
_this
.
clickedPosition
)
if
(
_this
.
radio1
==
'建立地标'
)
_this
.
addLandMark
(
value
)
else
if
(
_this
.
radio1
==
'矩形标注'
)
_this
.
drawRectangle
()
else
if
(
_this
.
radio1
==
'多边形标注'
)
_this
.
drawPolygon
()
})
this
.
mouseTool
.
on
(
'draw'
,
function
(
event
)
{
console
.
log
(
event
.
obj
)
if
(
_this
.
radio1
==
'矩形标注'
)
{
console
.
log
(
"northEast :"
+
event
.
obj
.
_opts
.
bounds
.
northEast
.
lng
+
','
+
event
.
obj
.
_opts
.
bounds
.
northEast
.
lat
)
console
.
log
(
"southWest :"
+
event
.
obj
.
_opts
.
bounds
.
southWest
.
lng
+
','
+
event
.
obj
.
_opts
.
bounds
.
southWest
.
lat
)
let
northEast
=
{
X
:
event
.
obj
.
_opts
.
bounds
.
northEast
.
lng
,
Y
:
event
.
obj
.
_opts
.
bounds
.
northEast
.
lat
}
let
southWest
=
{
X
:
event
.
obj
.
_opts
.
bounds
.
southWest
.
lng
,
Y
:
event
.
obj
.
_opts
.
bounds
.
southWest
.
lat
}
if
(
!
(
northEast
.
X
==
southWest
.
X
&&
northEast
.
Y
==
southWest
.
Y
))
{
console
.
log
(
"这是一个矩形"
)
_this
.
addRectangle
(
northEast
,
southWest
)
}
}
else
if
(
_this
.
radio1
==
'多边形标注'
)
{
console
.
log
(
"这是一个多边形"
)
}
})
var
marker
=
new
AMap
.
Marker
({
position
:
new
AMap
.
LngLat
(
116.39
,
39.9
),
// 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title
:
'北京'
});
map
.
add
(
marker
)
var
marker
=
new
AMap
.
Marker
({
position
:
new
AMap
.
LngLat
(
121.47
,
31.23
),
// 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title
:
'上海'
});
map
.
add
(
marker
)
map
.
remove
(
marker
)
map
.
remove
(
marker
)
},
/**
* 还原数据中的地标、标注区域
*/
restore
()
{
//还原地标
this
.
landMarkData
.
forEach
(
element
=>
{
var
marker
=
new
AMap
.
Marker
({
position
:
new
AMap
.
LngLat
(
element
.
X
,
element
.
Y
),
// 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title
:
element
.
landMarkName
})
this
.
map
.
add
(
marker
)
})
},
/**
获取标注任务的relationID
...
...
@@ -214,10 +250,141 @@
})
},
/**
* 添加地标
*/
addLandMark
(
position
){
var
landMarkName
this
.
$prompt
(
'请输入地标名称'
,
'提示'
,
{
confirmButtonText
:
'确定'
,
cancelButtonText
:
'取消'
}).
then
(({
value
})
=>
{
if
(
value
==
null
)
value
=
'iss'
landMarkName
=
value
this
.
makeLandMark
(
landMarkName
,
position
)
}).
catch
(()
=>
{
landMarkName
=
'iss'
this
.
makeLandMark
(
landMarkName
,
position
)
})
},
/**
* 创建地标数据
*/
makeLandMark
(
landMarkName
,
position
)
{
let
currentId
=
this
.
landMarkData
.
length
let
newLandMark
=
{
X
:
position
.
X
,
Y
:
position
.
Y
,
landMarkId
:
currentId
,
landMarkName
:
landMarkName
}
this
.
landMarkData
.
push
(
newLandMark
)
console
.
log
(
this
.
landMarkData
)
//在图层上显示
var
marker
=
new
AMap
.
Marker
({
position
:
new
AMap
.
LngLat
(
newLandMark
.
X
,
newLandMark
.
Y
),
// 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title
:
newLandMark
.
landMarkName
});
this
.
map
.
add
(
marker
)
},
/**
* 画矩形,这是高德地图的样例代码
*/
drawRectangle
()
{
this
.
mouseTool
.
rectangle
({
strokeColor
:
'red'
,
strokeOpacity
:
0.5
,
strokeWeight
:
6
,
fillColor
:
'blue'
,
fillOpacity
:
0.5
,
// strokeStyle还支持 solid
strokeStyle
:
'solid'
,
// strokeDasharray: [30,10],
})
},
addRectangle
(
northEast
,
southWest
){
var
name
this
.
$prompt
(
'请输入标注名称'
,
'提示'
,
{
confirmButtonText
:
'确定'
,
cancelButtonText
:
'取消'
}).
then
(({
value
})
=>
{
if
(
value
==
null
)
value
=
'iss'
name
=
value
this
.
makeRectangle
(
name
,
northEast
,
southWest
)
}).
catch
(()
=>
{
nName
=
'iss'
this
.
makeLandMark
(
name
,
northEast
,
southWest
)
})
},
/**
* 创建矩形标注区域数据
*/
makeRectangle
(
labelName
,
northEast
,
southWest
)
{
// X是经度,Y是纬度,应该是没错的,当初就不该叫XY的
// 右上
let
p0
=
{
pointId
:
0
,
X
:
northEast
.
X
,
Y
:
northEast
.
Y
}
// 右下
let
p1
=
{
pointId
:
1
,
X
:
southWest
.
X
,
Y
:
northEast
.
Y
}
// 左下
let
p2
=
{
pointId
:
2
,
X
:
southWest
.
X
,
Y
:
southWest
.
Y
}
// 左上
let
p3
=
{
pointId
:
3
,
X
:
northEast
.
X
,
Y
:
southWest
.
Y
}
let
currentId
=
this
.
layerData
.
length
let
pointList
=
[]
pointList
.
push
(
p0
)
pointList
.
push
(
p1
)
pointList
.
push
(
p2
)
pointList
.
push
(
p3
)
const
newLabel
=
{
labelId
:
currentId
,
labelName
:
labelName
,
pointList
:
pointList
}
console
.
log
(
this
.
layerData
)
},
/**
* 画多边形,高德地图的样例代码
*/
drawPolygon
()
{
this
.
mouseTool
.
polygon
({
strokeColor
:
"#FF33FF"
,
strokeOpacity
:
1
,
strokeWeight
:
6
,
strokeOpacity
:
0.2
,
fillColor
:
'#1791fc'
,
fillOpacity
:
0.4
,
// 线样式还支持 'dashed'
strokeStyle
:
"solid"
,
// strokeStyle是dashed时有效
// strokeDasharray: [30,10],
})
},
// 保存数据用的接口
save
()
{
/**
*
如果之前转换了格式,这里还需要转换回去
*
使用时需要修改
*/
console
.
log
(
"outputdata"
)
console
.
log
(
this
.
layerData
)
...
...
@@ -270,6 +437,9 @@
changeToolBar
(
val
){
this
.
activeIndex1
=
val
},
/**
* 这个是不需要的方法,没有问题会删除
*/
deleteAnnotation
:
function
()
{
this
.
$confirm
(
'确定删除此标注'
,
'提示'
,
{
confirmButtonText
:
'确定'
,
...
...
DAPlatform-front/src/components/textAnnotation/SelectText.vue
View file @
c49f1b55
...
...
@@ -19,10 +19,10 @@
>
<el-tag
size=
"small"
@
click=
"
handleTokenChange
(it)"
@
click=
"
changeToken
(it)"
closable
:disable-transitions=
"false"
@
close=
"
handleTokenClose
(it)"
@
close=
"
deleteToken
(it)"
>
<a
class=
"token"
v-html=
"it.word"
></a>
</el-tag>
...
...
@@ -45,12 +45,10 @@
</div>
</div>
</el-aside>
<!-- 文
件
界面 -->
<!-- 文
本
界面 -->
<el-main
class=
"filter-container"
style=
"background-color: #FFFFFF"
>
<div
style=
"overflow-y:auto;height:100%;"
>
<!-- 文本界面 -->
<div
class=
"content"
@
mouseup=
"highlight()"
v-html=
"content"
></div>
<!-- 文本界面 -->
<div
class=
"content"
@
mouseup=
"select()"
v-html=
"content"
></div>
<br
/>
<div>
<el-button
type=
"primary"
@
click=
"submit()"
>
提交
</el-button>
...
...
@@ -58,19 +56,8 @@
<!-- 弹窗-->
<el-dialog
title=
"请标注"
:visible
.
sync=
"ifAlert"
>
<div
style=
"overflow: auto;height: 50vh"
>
<div
v-html=
"'实体:'+value"
/>
<!-- 实体 -->
<!--
<el-select
v-model=
"value"
placeholder=
"选择标注对象"
>
<el-option
v-for=
"item in options"
:key=
"item.value"
:label=
"item.label"
:value=
"item.label"
></el-option>
</el-select>
-->
<!--
<el-button
type=
"primary"
@
click=
"handleOptionChange()"
>
更新
</el-button>
-->
<!-- 属性 -->
<div
style=
"overflow: auto; height: 50vh"
>
<p
v-html=
"'实体:'+ token.entityId"
/>
<el-tree
:data=
"treeData"
show-checkbox
...
...
@@ -82,9 +69,9 @@
></el-tree>
</div>
<div
style=
"width: 100%;height: 5px"
></div>
<el-button
type=
"primary"
style=
"margin-top: 30px"
@
click=
"
handleCheckChange
"
>
确定
</el-button>
<el-button
type=
"primary"
style=
"margin-top: 30px"
@
click=
"
uploadToken
"
>
确定
</el-button>
</el-dialog>
<!-- 弹窗-->
<!-- 弹窗
-->
</div>
</el-main>
</el-container>
...
...
@@ -104,49 +91,32 @@ export default {
contentWithoutColor
:
""
,
content
:
""
,
//实体属性
tokenInit
:
{
tokenId
:
""
,
word
:
""
,
begin
:
0
,
end
:
0
,
entityId
:
""
,
attribute
:
[]
},
token
:
{
tokenId
:
""
,
// 编号
word
:
""
,
// 标注
begin
:
0
,
// 起始位置
end
:
0
,
// 终止位置
entityId
:
""
,
// 实体
attribute
:
[]
// 属性
tokenId
:
""
,
word
:
""
,
begin
:
0
,
end
:
0
,
entityId
:
""
,
attribute
:
[]
},
// 实体属性列表
tokenList
:
[],
//
文章列表
textData
:
[]
,
//
templete
//
弹窗
ifAlert
:
false
,
//
模板内容
treeData
:
[],
defaultProps
:
{
children
:
"children"
,
label
:
"label"
},
//count: 1,
ifAlert
:
false
,
// 弹窗
// 实体
value
:
""
,
// options: [
// {
// value: "选项1",
// label: "滑坡"
// },
// {
// value: "选项2",
// label: "山体"
// },
// {
// value: "选项3",
// label: "河流"
// },
// {
// value: "选项4",
// label: "时间"
// }
// ],
// table
tableData
:
[]
}
};
},
beforeMount
()
{
...
...
@@ -158,14 +128,14 @@ export default {
methods
:
{
// 插入数据库
insertDocument
()
{
console
.
log
(
"userId"
+
this
.
$store
.
state
.
userInfo
.
userId
);
console
.
log
(
"file"
+
JSON
.
stringify
(
this
.
file
));
console
.
log
(
"task"
+
JSON
.
stringify
(
this
.
task
));
//
console.log("userId" + this.$store.state.userInfo.userId);
//
console.log("file" + JSON.stringify(this.file));
//
console.log("task" + JSON.stringify(this.task));
this
.
axios
({
method
:
"post"
,
url
:
"/textAnnotation/insertDocument"
,
data
:
{
templateId
:
1
,
// TODO 模板id
templateId
:
6
,
// TODO 模板id
annotatorId
:
this
.
$store
.
state
.
userInfo
.
userId
,
textUrl
:
this
.
file
.
url
,
type
:
"text"
,
...
...
@@ -176,9 +146,7 @@ export default {
this
.
documentId
=
res
.
result
;
//console.log("this.documentId: " + this.documentId);
this
.
getContent
();
// 获得实体属性
this
.
getTokenList
();
// 获得标注模板
this
.
getTemplate
();
}
else
{
this
.
$message
({
...
...
@@ -190,9 +158,9 @@ export default {
},
//获取内容
getContent
()
{
//
console.log("getContent");
//console.log("
this.file: " + JSON.stringify(this.file));
//console.log("
this.documentId: " + this.documentId);
console
.
log
(
"getContent"
);
console
.
log
(
"
this.file: "
+
JSON
.
stringify
(
this
.
file
));
console
.
log
(
"
this.documentId: "
+
this
.
documentId
);
this
.
axios
({
method
:
"post"
,
url
:
"/files/getFileContent"
,
...
...
@@ -201,9 +169,12 @@ export default {
}
}).
then
(
res
=>
{
if
(
res
.
return_code
==
200
)
{
//console.log("getContent: " + res.result);
this
.
contentWithoutColor
=
res
.
result
;
//console.log("this.content: " + this.content);
// console.log(" getContent: " + res.result);
this
.
content
=
res
.
result
;
this
.
contentWithoutColor
=
this
.
content
;
// console.log(
// " this.contentWithoutColor: " + this.contentWithoutColor
// );
}
else
{
this
.
$message
({
message
:
res
.
return_info
,
...
...
@@ -212,9 +183,11 @@ export default {
}
});
},
// 获得
实体属性列表
// 获得
已标注信息
getTokenList
()
{
//console.log("getTokenList");
console
.
log
(
"getTokenList"
);
console
.
log
(
" this.tokenList: "
+
JSON
.
stringify
(
this
.
tokenList
));
console
.
log
(
" this.content: "
+
this
.
content
);
this
.
axios
({
method
:
"post"
,
url
:
"/textAnnotation/getTokenList"
,
...
...
@@ -223,49 +196,25 @@ export default {
}
}).
then
(
res
=>
{
if
(
res
.
return_code
==
200
)
{
console
.
log
(
"this.token: "
+
res
.
result
[
0
]);
this
.
tokenList
.
push
(
res
.
result
[
0
]);
this
.
token
=
res
.
result
[
0
];
let
replaceReg
=
new
RegExp
(
this
.
token
.
word
,
"g"
);
// 匹配关键字正则
let
replaceString
=
'<span class="highlights-text">'
+
this
.
token
.
word
+
"</span>"
+
'<span class="mark">'
+
"(实体:"
+
this
.
token
.
entityId
+
";属性:"
+
this
.
token
.
attribute
+
")"
+
"</span>"
;
// 高亮替换v-html值
if
(
this
.
token
.
entityId
==
""
&&
this
.
token
.
attribute
==
[])
{
}
else
{
this
.
content
=
this
.
contentWithoutColor
.
replace
(
replaceReg
,
replaceString
);
}
res
.
result
.
forEach
(
element
=>
{
console
.
log
(
"this.token: "
+
element
)
;
this
.
tokenList
.
push
(
element
);
this
.
token
=
element
;
let
replaceReg
=
new
RegExp
(
this
.
token
.
word
,
"g"
);
// 匹配关键字正则
this
.
tokenInit
=
element
;
console
.
log
(
" token: "
+
JSON
.
stringify
(
this
.
tokenInit
)
);
this
.
token
List
.
push
(
this
.
tokenInit
)
;
let
replaceReg
=
new
RegExp
(
this
.
token
Init
.
word
,
"g"
);
// 匹配关键字正则
let
replaceString
=
'<span class="highlights-text">'
+
this
.
token
.
word
+
this
.
token
Init
.
word
+
"</span>"
+
'<span class="mark">'
+
"(实体:"
+
this
.
token
.
entityId
+
this
.
token
Init
.
entityId
+
";属性:"
+
this
.
token
.
attribute
+
this
.
token
Init
.
attribute
+
")"
+
"</span>"
;
// 高亮替换v-html值
if
(
this
.
token
.
entityId
==
""
&&
this
.
token
.
attribute
==
[])
{
}
else
{
this
.
content
=
this
.
content
.
replace
(
replaceReg
,
replaceString
);
}
this
.
content
=
this
.
content
.
replace
(
replaceReg
,
replaceString
);
});
console
.
log
(
" this.tokenList: "
+
JSON
.
stringify
(
this
.
tokenList
));
}
else
{
this
.
$message
({
message
:
res
.
return_info
,
...
...
@@ -276,7 +225,7 @@ export default {
},
//获取模板
getTemplate
()
{
//console.log("getTemplate");
//
console.log("getTemplate");
this
.
axios
({
method
:
"post"
,
url
:
"/textAnnotation/getOneTemplate"
,
...
...
@@ -287,8 +236,7 @@ export default {
if
(
res
.
return_code
==
200
)
{
//console.log(res.result)
// 实体
this
.
token
.
entityId
=
JSON
.
stringify
(
res
.
result
.
templateId
);
// 现在的实体与模板相近,所以就先固定了
this
.
value
=
res
.
result
.
templateName
;
this
.
token
.
entityId
=
res
.
result
.
templateName
;
// 属性
this
.
treeData
=
res
.
result
.
entityList
;
}
else
{
...
...
@@ -300,80 +248,152 @@ export default {
});
},
// 定位原文token
highligh
t
()
{
selec
t
()
{
if
(
window
.
getSelection
().
toString
()
!=
""
)
{
// 禁止重复标注,沾边的也不行
for
(
var
i
=
0
;
i
<
this
.
tokenList
.
length
;
i
++
)
{
console
.
log
(
"fuck the highlight"
);
if
(
window
.
getSelection
().
anchorOffset
>=
this
.
tokenList
[
i
].
begin
&&
window
.
getSelection
().
anchorOffset
<
this
.
tokenList
[
i
].
end
)
)
{
this
.
$message
({
message
:
"选中区域头部存在重叠"
,
type
:
"info"
});
return
;
else
if
(
}
else
if
(
window
.
getSelection
().
focusOffset
>
this
.
tokenList
[
i
].
begin
&&
window
.
getSelection
().
focusOffset
<=
this
.
tokenList
[
i
].
end
)
)
{
this
.
$message
({
message
:
"选中区域尾部存在重叠"
,
type
:
"info"
});
return
;
}
}
this
.
ifAlert
=
true
;
// 打开标注弹窗
console
.
log
(
" token select"
+
JSON
.
stringify
(
this
.
token
));
this
.
token
.
word
=
window
.
getSelection
().
toString
();
this
.
token
.
begin
=
window
.
getSelection
().
anchorOffset
;
//开始位置
this
.
token
.
end
=
window
.
getSelection
().
focusOffset
;
//结束位置
//console.log("token: " + JSON.stringify(this.token));
console
.
log
(
" token select"
+
JSON
.
stringify
(
this
.
token
));
console
.
log
(
" tokenList select"
+
JSON
.
stringify
(
this
.
tokenList
));
this
.
ifAlert
=
true
;
// 打开标注弹窗
}
},
// 添加标注 // TODO 大于段落的标注还是无法渲染
handleCheckChange
()
{
uploadToken
()
{
this
.
ifAlert
=
false
;
this
.
token
.
entityId
=
this
.
value
;
// 实体
let
res
=
this
.
$refs
.
tree
.
getCheckedNodes
();
let
arr
=
[];
let
token
=
{};
res
.
forEach
(
item
=>
{
arr
.
push
(
item
.
label
);
arr
.
push
(
item
.
label
);
// 属性
});
this
.
token
.
attribute
=
arr
;
// 属性
//console.log("entity: " + JSON.stringify(this.token.entityId));
//console.log("attribute: " + JSON.stringify(this.token.attribute));
// 渲染文本
let
replaceReg
=
new
RegExp
(
this
.
token
.
word
,
"g"
);
// 匹配关键字正则
let
replaceString
=
'<span class="highlights-text">'
+
this
.
token
.
word
+
"</span>"
+
'<span class="mark">'
+
"(实体:"
+
this
.
token
.
entityId
+
";属性:"
+
this
.
token
.
attribute
+
")"
+
"</span>"
;
// 高亮替换v-html值
if
(
this
.
token
.
entityId
==
""
&&
this
.
token
.
attribute
==
[])
return
;
console
.
log
(
"文本渲染"
+
replaceReg
+
replaceString
);
// 保存token
if
(
arr
==
[])
{
this
.
$message
({
message
:
"未选择属性"
,
type
:
"info"
});
}
else
{
// 保存token
this
.
axios
({
method
:
"post"
,
url
:
"/textAnnotation/addToken"
,
data
:
{
documentId
:
this
.
documentId
,
token
:
{
word
:
this
.
token
.
word
,
begin
:
this
.
token
.
begin
,
end
:
this
.
token
.
end
,
entityId
:
this
.
token
.
entityId
,
attribute
:
arr
}
}
}).
then
(
res
=>
{
if
(
res
.
return_code
==
200
)
{
// 渲染文本
let
replaceReg
=
new
RegExp
(
this
.
token
.
word
,
"g"
);
// 匹配关键字正则
let
replaceString
=
'<span class="highlights-text">'
+
this
.
token
.
word
+
"</span>"
+
'<span class="mark">'
+
"(实体:"
+
this
.
token
.
entityId
+
";属性:"
+
arr
+
")"
+
"</span>"
;
// 高亮替换v-html值
console
.
log
(
" 文本渲染"
+
replaceReg
+
replaceString
);
this
.
content
=
this
.
content
.
replace
(
replaceReg
,
replaceString
);
let
token
=
{
tokenId
:
res
.
result
,
word
:
this
.
token
.
word
,
begin
:
this
.
token
.
begin
,
end
:
this
.
token
.
end
,
entityId
:
this
.
token
.
entityId
,
attribute
:
arr
};
this
.
tokenList
.
push
(
token
);
console
.
log
(
" token uploadToken"
+
JSON
.
stringify
(
token
));
console
.
log
(
" token uploadToken"
+
JSON
.
stringify
(
this
.
token
));
console
.
log
(
" tokenList uploadToken"
+
JSON
.
stringify
(
this
.
tokenList
)
);
this
.
$message
({
message
:
"已保存"
,
type
:
"success"
});
}
else
{
this
.
$message
({
message
:
res
.
return_info
,
type
:
"error"
});
}
});
// TODO 不知道为啥有缓存不能清除
// this.$nextTick(() => {
// this.$refs.tree.setCheckedKeys([]);
//});
}
return
;
},
// 删除实体属性
deleteToken
(
tag
)
{
console
.
log
(
"deleteToken"
);
this
.
axios
({
method
:
"post"
,
url
:
"/textAnnotation/
add
Token"
,
url
:
"/textAnnotation/
delete
Token"
,
data
:
{
documentId
:
this
.
documentId
,
token
:
{
word
:
this
.
token
.
word
,
begin
:
this
.
token
.
begin
,
end
:
this
.
token
.
end
,
entityId
:
this
.
token
.
entityId
,
attribute
:
this
.
token
.
attribute
}
tokenId
:
tag
.
tokenId
}
}).
then
(
res
=>
{
if
(
res
.
return_code
==
200
)
{
this
.
token
.
tokenId
=
res
.
result
;
token
=
this
.
token
;
this
.
token
=
{};
this
.
tokenList
.
push
(
token
);
this
.
$message
({
message
:
"已保存"
,
type
:
"success"
type
:
"info"
,
message
:
"已删除"
});
this
.
tokenList
.
splice
(
this
.
tokenList
.
indexOf
(
tag
),
1
);
this
.
content
=
this
.
contentWithoutColor
;
console
.
log
(
" this.tokenList: "
+
JSON
.
stringify
(
this
.
tokenList
));
console
.
log
(
" this.content: "
+
this
.
content
);
this
.
tokenList
.
forEach
(
element
=>
{
console
.
log
(
" token: "
+
JSON
.
stringify
(
element
));
let
replaceReg
=
new
RegExp
(
element
.
word
,
"g"
);
// 匹配关键字正则
let
replaceString
=
'<span class="highlights-text">'
+
element
.
word
+
"</span>"
+
'<span class="mark">'
+
"(实体:"
+
element
.
entityId
+
";属性:"
+
element
.
attribute
+
")"
+
"</span>"
;
// 高亮替换v-html值
this
.
content
=
this
.
content
.
replace
(
replaceReg
,
replaceString
);
});
}
else
{
this
.
$message
({
...
...
@@ -382,28 +402,45 @@ export default {
});
}
});
//
TODO 不知道为啥有缓存不能
清除
//
this.$nextTick(() => {
//
不知道为啥不
清除
//this.$nextTick(() => {
// this.$refs.tree.setCheckedKeys([]);
//});
return
(
this
.
content
=
this
.
content
.
replace
(
replaceReg
,
replaceString
));
},
// 删除实体属性
handleTokenClose
(
tag
)
{
this
.
tokenList
.
splice
(
this
.
tokenList
.
indexOf
(
tag
),
1
);
this
.
token
=
tag
;
// 修改实体属性=删除+添加(如果选择属性弹窗没有点提交直接关掉的话会删除,也就是双击直接删除,也许这里后期需要改)
changeToken
(
tag
)
{
this
.
ifAlert
=
true
;
this
.
token
=
tag
// this.tokenList.splice(this.tokenList.indexOf(tag), 1);
console
.
log
(
"deleteToken"
);
this
.
axios
({
method
:
"post"
,
url
:
"/textAnnotation/deleteToken"
,
data
:
{
documentId
:
this
.
documentId
,
tokenId
:
t
his
.
token
.
tokenId
tokenId
:
t
ag
.
tokenId
}
}).
then
(
res
=>
{
if
(
res
.
return_code
==
200
)
{
this
.
$message
({
type
:
"info"
,
message
:
"已删除"
this
.
tokenList
.
splice
(
this
.
tokenList
.
indexOf
(
tag
),
1
);
this
.
content
=
this
.
contentWithoutColor
;
console
.
log
(
" this.tokenList: "
+
JSON
.
stringify
(
this
.
tokenList
));
console
.
log
(
" this.content: "
+
this
.
content
);
this
.
tokenList
.
forEach
(
element
=>
{
console
.
log
(
" token: "
+
JSON
.
stringify
(
element
));
let
replaceReg
=
new
RegExp
(
element
.
word
,
"g"
);
// 匹配关键字正则
let
replaceString
=
'<span class="highlights-text">'
+
element
.
word
+
"</span>"
+
'<span class="mark">'
+
"(实体:"
+
element
.
entityId
+
";属性:"
+
element
.
attribute
+
")"
+
"</span>"
;
// 高亮替换v-html值
this
.
content
=
this
.
content
.
replace
(
replaceReg
,
replaceString
);
});
}
else
{
this
.
$message
({
...
...
@@ -412,19 +449,6 @@ export default {
});
}
});
// 不知道为啥不清除
//this.$nextTick(() => {
// this.$refs.tree.setCheckedKeys([]);
//});
//this.value = "";
return
this
.
getTokenList
();
},
// TODO 还没测试 修改实体属性=删除+添加(如果选择属性弹窗没有点提交直接关掉的话会删除)
handleTokenChange
(
tag
)
{
this
.
ifAlert
=
true
;
this
.
token
=
tag
;
this
.
$options
.
methods
.
handleTokenClose
(
tag
);
this
.
tokenList
.
splice
(
this
.
tokenList
.
indexOf
(
tag
),
1
);
},
// 提交已标注文档 // TODO 跳转到我的任务,已标注文档标注按钮消失,然后判定整个任务都标注完成后跳转到已完成任务界面,这个就交给通用的大佬们了
submit
()
{
...
...
DAPlatform-front/src/components/textAnnotation/SelectedText.vue
View file @
c49f1b55
<
template
>
<div
class=
"select-container"
>
<el-container
style=
"margin-top: 40px"
>
<el-aside
class=
"sidebar"
style=
"background-color: rgba(255,255,255,0);box-shadow: 0px 0px 0px rgba(255,255,255,0);padding-right: 20px"
>
<!-- 实体列表 -->
<div
class=
"sidebar-box"
>
<div>
<div
class=
"img-list-title"
>
实体列表
</div>
<div
class=
"img-title-list-box"
>
<div
id=
"img-title-list"
style=
"user-select:none; float: left;
"
>
<div
class=
"img-title-list
"
>
<div
class=
"tokenList"
v-for=
"it in tokenList"
:key=
"it
.message
"
:key=
"it"
style=
"user-select:none; float: left;"
>
<el-tag
size=
"small"
>
<!-- 标签不可更改和删除 -->
<el-tag
size=
"small"
:disable-transitions=
"false"
>
<a
class=
"token"
v-html=
"it.word"
></a>
</el-tag>
<br
/>
...
...
@@ -26,28 +30,26 @@
</div>
</div>
</div>
<!-- 文本列表 -->
<div
class=
"sidebar-box"
>
<div>
<div
class=
"img-list-title"
>
文本列表
</div>
<div
class=
"img-title-list-box"
>
<div
id=
"img-title-list"
style=
"user-select:none"
>
<el-tree
:data=
"textData"
:props=
"defaultProps"
@
node-click=
"handleNodeClick"
></el-tree>
</div>
<div
id=
"img-title-list"
style=
"user-select:none; float:left; padding: 5px;"
>
{{
file
.
name
}}
</div>
</div>
</div>
</div>
</el-aside>
<!-- 文件界面 -->
<el-main
class=
"filter-container"
style=
"background-color: #FFFFFF"
>
<div
style=
"overflow-y:auto;height:100%;"
>
<div>
<ul
class=
"list"
>
<li
v-for=
"it in msg"
:key=
"it.message"
>
<div
class=
"msg"
v-html=
"it"
></div>
<br
/>
</li>
</ul>
</div>
<!-- 文本界面 -->
<div
class=
"content"
v-html=
"content"
></div>
<!-- 文本界面 -->
<br
/>
<!-- 打分 -->
<!--div v-if="this.$route.query.isCheck == '1'"-->
<div>
...
...
@@ -65,6 +67,9 @@
</el-form>
</el-dialog>
</div>
<div>
<el-button
type=
"primary"
@
click=
"submit()"
>
退出
</el-button>
</div>
</div>
</el-main>
</el-container>
...
...
@@ -74,79 +79,60 @@
<
script
>
export
default
{
data
()
{
const
item
=
{
date
:
"2020-05-02"
,
name
:
"小明"
,
address
:
"那是我心中最美的“第三极”——第二次青藏科考青年说"
};
return
{
// 文章id
documentId
:
''
,
documentId
:
""
,
// 文章
file
:
null
,
// 任务
task
:
null
,
// 文章内容
content
:
[],
contentWithoutColor
:
""
,
content
:
""
,
//实体属性
token
:
{
entityId
:
""
,
word
:
""
,
begin
:
0
,
end
:
0
,
attribute
:
""
,
tokenId
:
""
tokenId
:
""
,
// 编号
word
:
""
,
// 标注
begin
:
0
,
// 起始位置
end
:
0
,
// 终止位置
entityId
:
""
,
// 实体
attribute
:
[]
// 属性
},
// 实体属性列表
tokenList
:
[],
// 文章列表
textData
:
[
{
label
:
this
.
documentId
,
children
:
[
{
label
:
this
.
documentId
},
{
label
:
"暂无数据"
}
]
}
],
defaultProps
:
{
children
:
"children"
,
label
:
"label"
},
textData
:
[],
// 打分表
commentScore
:
false
,
scoreForm
:
{
accuracy
:
""
,
score
:
""
},
formLabelWidth
:
"120px"
,
// tokenList: ["2020-05-06", "2019年7月", "雪山"]
tokenList
:
[]
};
},
created
()
{
this
.
getParams
();
beforeMount
()
{
// 从通用传来文本信息
// TODO quary instead of params to fix the bug during refreshing 没办法统一改就task存字段,刷新后去库里找
this
.
file
=
JSON
.
parse
(
decodeURIComponent
(
this
.
$route
.
params
.
file
));
this
.
task
=
JSON
.
parse
(
decodeURIComponent
(
this
.
$route
.
params
.
task
));
},
methods
:
{
// 获取文本id
getParams
()
{
var
routerParams
=
this
.
$route
.
params
.
documentId
;
this
.
documentId
=
routerParams
;
},
handleNodeClick
(
data
)
{
console
.
log
(
data
);
},
// 获取文本
//获取内容
getContent
()
{
//console.log("getContent");
//console.log("this.file: " + JSON.stringify(this.file));
//console.log("this.documentId: " + this.documentId);
this
.
axios
({
method
:
"post"
,
url
:
"
http://127.0.0.1:9100/uploadDownload
/getFileContent"
,
url
:
"
/files
/getFileContent"
,
data
:
{
documentId
:
this
.
documentId
documentId
:
this
.
documentId
}
}).
then
(
res
=>
{
if
(
res
.
return_code
==
200
)
{
console
.
log
(
"123"
+
res
.
result
);
content
=
res
.
result
;
//console.log("getContent: " + res.result);
this
.
contentWithoutColor
=
res
.
result
;
//console.log("this.content: " + this.content);
}
else
{
this
.
$message
({
message
:
res
.
return_info
,
...
...
@@ -155,24 +141,61 @@ export default {
}
});
},
//getArticle() {
// axios.get("/textAnnotation?textid=10").then(function(response) {
// console.log(response);
// });
//},
// 放到边栏的token边栏
// 获得实体属性列表
getTokenList
()
{
//console.log("getTokenList");
this
.
axios
({
method
:
"post"
,
url
:
"
http://127.0.0.1:9100
/textAnnotation/getTokenList"
,
url
:
"/textAnnotation/getTokenList"
,
data
:
{
documentId
:
this
.
documentId
}
}).
then
(
res
=>
{
if
(
res
.
return_code
==
200
){
this
.
tokenList
=
res
.
result
}
else
{
if
(
res
.
return_code
==
200
)
{
console
.
log
(
"this.token: "
+
res
.
result
[
0
]);
this
.
tokenList
.
push
(
res
.
result
[
0
]);
this
.
token
=
res
.
result
[
0
];
let
replaceReg
=
new
RegExp
(
this
.
token
.
word
,
"g"
);
// 匹配关键字正则
let
replaceString
=
'<span class="highlights-text">'
+
this
.
token
.
word
+
"</span>"
+
'<span class="mark">'
+
"(实体:"
+
this
.
token
.
entityId
+
";属性:"
+
this
.
token
.
attribute
+
")"
+
"</span>"
;
// 高亮替换v-html值
if
(
this
.
token
.
entityId
==
""
&&
this
.
token
.
attribute
==
[])
{
}
else
{
this
.
content
=
this
.
contentWithoutColor
.
replace
(
replaceReg
,
replaceString
);
}
res
.
result
.
forEach
(
element
=>
{
console
.
log
(
"this.token: "
+
element
);
this
.
tokenList
.
push
(
element
);
this
.
token
=
element
;
let
replaceReg
=
new
RegExp
(
this
.
token
.
word
,
"g"
);
// 匹配关键字正则
let
replaceString
=
'<span class="highlights-text">'
+
this
.
token
.
word
+
"</span>"
+
'<span class="mark">'
+
"(实体:"
+
this
.
token
.
entityId
+
";属性:"
+
this
.
token
.
attribute
+
")"
+
"</span>"
;
// 高亮替换v-html值
if
(
this
.
token
.
entityId
==
""
&&
this
.
token
.
attribute
==
[])
{
}
else
{
this
.
content
=
this
.
content
.
replace
(
replaceReg
,
replaceString
);
}
});
}
else
{
this
.
$message
({
message
:
res
.
return_info
,
type
:
"error"
...
...
@@ -204,10 +227,38 @@ export default {
this
.
commentScore
=
false
;
this
.
$message
(
"打分成功"
);
}
},
// 提交已标注文档 // TODO 这里就是一打分,不知道该用什么逻辑,先这么放着吧
submit
()
{
// console.log("hello" + JSON.stringify(this.task))
// this.axios({
// method: "post",
// url: "/textAnnotation/revDocumentState",
// data: {
// documentId: this.documentId
// }
// }).then(res => {
// if (res.return_code == 200) {
// this.$message({
// message: "已保存",
// type: "success"
// });
// } else {
// this.$message({
// message: res.return_info,
// type: "error"
// });
// }
// });
this
.
$router
.
replace
({
name
:
"completeddetail"
,
params
:
{
task
:
encodeURIComponent
(
JSON
.
stringify
(
this
.
task
))
}
});
}
},
mounted
:
function
()
{
this
.
getTokenList
();
//需要触发的函数
this
.
getContent
();
this
.
getTokenList
()
}
};
</
script
>
...
...
@@ -224,11 +275,12 @@ export default {
}
.filter-container
{
float
:
center
;
width
:
100%
;
padding
:
35px
40px
50px
40px
;
@include
whiteBoard;
}
}
.
msg
{
.
content
{
text-align
:
left
;
font-size
:
20px
;
line-height
:
30px
;
...
...
@@ -244,7 +296,23 @@ export default {
text-decoration
:
none
;
//
background-color
:
rgb
(
255
,
227
,
132
);
}
.addTag
{
width
:
30%
;
height
:
500px
;
background-color
:
#ffffff
;
position
:
fixed
;
top
:
50%
;
margin-top
:
-250px
;
left
:
55%
;
margin-left
:
-25%
;
border
:
1px
solid
darkgrey
;
border-radius
:
10px
;
padding
:
10px
;
}
.addTagTitle
{
margin-top
:
15px
;
margin-bottom
:
10px
;
}
.img-list-title
{
line-height
:
40px
;
padding
:
0
10px
;
...
...
@@ -258,8 +326,9 @@ export default {
//
margin-top
:
13px
;
margin-bottom
:
13px
;
}
.add-file-btn-group
>>>
button
{
margin-top
:
1
3px
;
margin-top
:
3px
;
margin-bottom
:
3px
;
}
.tokenList
{
...
...
DAPlatform-front/src/components/textAnnotation/Table.vue
View file @
c49f1b55
...
...
@@ -19,10 +19,10 @@
>
<el-tag
size=
"small"
@
click=
"
handleTokenChange
(it)"
@
click=
"
changeToken
(it)"
closable
:disable-transitions=
"false"
@
close=
"
handleTokenClose
(it)"
@
close=
"
deleteToken
(it)"
>
<a
class=
"token"
v-html=
"it.word"
></a>
</el-tag>
...
...
@@ -49,14 +49,20 @@
<el-main
class=
"filter-container"
style=
"background-color: #FFFFFF"
>
<div
style=
"overflow-y:auto;height:100%;"
>
<!-- 表格界面 -->
<div
@
click=
"highlight()"
>
<el-table
:data=
"nowContent.tableData"
border
style=
"width: 100%,height:200px"
>
<div>
<el-table
:data=
"nowContent.tableData"
:cell-style=
"cellStyle"
border
style=
"width: 100%,height:200px"
@
cell-click=
"select"
>
<el-table-column
v-for=
"col in nowContent.name"
v-for=
"col in nowContent.name"
:key=
"col"
:prop=
"col.value"
:label=
"col.value"
>
</el-table-column>
:label=
"col.value"
>
</el-table-column>
</el-table>
</div>
<!-- 表格界面 -->
...
...
@@ -68,14 +74,7 @@
<!-- 弹窗-->
<el-dialog
title=
"请标注"
:visible
.
sync=
"ifAlert"
>
<div
style=
"overflow: auto;height: 50vh"
>
<el-select
v-model=
"value"
placeholder=
"选择标注对象"
>
<el-option
v-for=
"item in options"
:key=
"item.value"
:label=
"item.label"
:value=
"item.label"
></el-option>
</el-select>
<p
v-html=
"'实体:'+ value"
/>
<!--el-button type="primary" @click="handleOption">新建
</el-button-->
<el-tree
:data=
"treeData"
...
...
@@ -88,7 +87,7 @@
></el-tree>
</div>
<div
style=
"width: 100%;height: 5px"
></div>
<el-button
type=
"primary"
style=
"margin-top: 30px"
@
click=
"
handleCheckChange
"
>
确定
</el-button>
<el-button
type=
"primary"
style=
"margin-top: 30px"
@
click=
"
uploadToken
"
>
确定
</el-button>
</el-dialog>
<!-- 弹窗-->
</div>
...
...
@@ -109,14 +108,24 @@ export default {
// 文章内容
content
:
""
,
//实体属性
tokenInit
:
{
tokenId
:
""
,
word
:
""
,
begin
:
0
,
end
:
0
,
entityId
:
""
,
attribute
:
[]
},
token
:
{
tokenId
:
""
,
// 编号
word
:
""
,
// 标注
begin
:
0
,
//
起始位置
begin
:
0
,
//
row
end
:
0
,
// 终止位置
entityId
:
""
,
//
实体
entityId
:
""
,
//
column
attribute
:
[]
// 属性
},
row
:
[],
column
:
{},
// 实体属性列表
tokenList
:
[],
// 文章列表
...
...
@@ -133,15 +142,13 @@ export default {
ifAlert
:
false
,
// 弹窗
// 实体
value
:
""
,
options
:
[],
// table
nowContent
:{
tablename
:
""
,
tableData
:[],
name
:[]
nowContent
:
{
tablename
:
""
,
tableData
:
[],
name
:
[]
},
allContent
:[]
allContent
:
[]
};
},
beforeMount
()
{
...
...
@@ -195,14 +202,14 @@ export default {
if
(
res
.
return_code
==
200
)
{
var
i
;
var
nowContent
=
{};
for
(
i
=
0
;
i
<
res
.
result
.
numOfSheet
;
i
++
)
{
for
(
i
=
0
;
i
<
res
.
result
.
numOfSheet
;
i
++
)
{
nowContent
.
tablename
=
res
.
result
.
content
[
i
].
sheetName
;
nowContent
.
tableData
=
res
.
result
.
content
[
i
].
content
;
nowContent
.
name
=
res
.
result
.
content
[
i
].
name
;
this
.
allContent
.
push
(
nowContent
);
nowContent
=
{};
}
this
.
nowContent
=
this
.
allContent
[
0
];
//默认打开第一个
this
.
nowContent
=
this
.
allContent
[
0
];
//默认打开第一个
}
else
{
this
.
$message
({
message
:
res
.
return_info
,
...
...
@@ -211,9 +218,10 @@ export default {
}
});
},
// 获得
实体属性列表
// 获得
已标注信息
getTokenList
()
{
//console.log("getTokenList");
console
.
log
(
"getTokenList"
);
console
.
log
(
" this.tokenList: "
+
JSON
.
stringify
(
this
.
tokenList
));
this
.
axios
({
method
:
"post"
,
url
:
"/textAnnotation/getTokenList"
,
...
...
@@ -223,9 +231,12 @@ export default {
}).
then
(
res
=>
{
if
(
res
.
return_code
==
200
)
{
res
.
result
.
forEach
(
element
=>
{
console
.
log
(
"this.token: "
+
element
);
this
.
tokenList
.
push
(
element
);
this
.
tokenInit
=
element
;
console
.
log
(
" token: "
+
JSON
.
stringify
(
this
.
tokenInit
));
this
.
tokenList
.
push
(
this
.
tokenInit
);
// TODO 初始渲染
});
console
.
log
(
" this.tokenList: "
+
JSON
.
stringify
(
this
.
tokenList
));
}
else
{
this
.
$message
({
message
:
res
.
return_info
,
...
...
@@ -247,8 +258,7 @@ export default {
if
(
res
.
return_code
==
200
)
{
//console.log(res.result)
// 实体
this
.
token
.
entityId
=
JSON
.
stringify
(
res
.
result
.
templateId
);
// 现在的实体与模板相近,所以就先固定了
this
.
options
.
push
(
res
.
result
.
templateName
);
this
.
value
=
res
.
result
.
templateName
;
// 现在的实体与模板相近,所以就先固定了
// 属性
this
.
treeData
=
res
.
result
.
entityList
;
}
else
{
...
...
@@ -260,60 +270,139 @@ export default {
});
},
// 定位原文token
highlight
()
{
// TODO
select
(
row
,
column
)
{
this
.
row
=
row
;
this
.
column
=
column
;
this
.
token
.
word
=
row
[
column
.
property
];
this
.
token
.
begin
=
column
.
property
;
this
.
token
.
entityId
=
row
[
1
];
console
.
log
(
JSON
.
stringify
(
row
));
console
.
log
(
JSON
.
stringify
(
column
));
console
.
log
(
JSON
.
stringify
(
this
.
token
.
word
));
console
.
log
(
this
.
token
.
begin
);
console
.
log
(
JSON
.
stringify
(
this
.
token
.
entityId
));
// 禁止重复标注,沾边的也不行
for
(
var
i
=
0
;
i
<
this
.
tokenList
.
length
;
i
++
)
{
if
(
this
.
token
.
word
==
this
.
tokenList
[
i
].
word
)
{
this
.
$message
({
message
:
"选中单元格已标记"
,
type
:
"info"
});
return
;
}
}
console
.
log
(
" token select"
+
JSON
.
stringify
(
this
.
token
));
console
.
log
(
" tokenList select"
+
JSON
.
stringify
(
this
.
tokenList
));
this
.
ifAlert
=
true
;
// 打开标注弹窗
},
// 添加标注
handleCheckChange
()
{
// TODO 表格标注颜色bug
cellStyle
({
row
,
column
,
rowIndex
,
columnIndex
})
{
this
.
tokenList
.
forEach
(
item
=>
{
if
(
item
.
word
==
row
[
column
.
property
])
{
return
"warning-row"
;
//return 'success-row';
}
});
},
// 添加标注 // TODO 大于段落的标注还是无法渲染
uploadToken
()
{
this
.
ifAlert
=
false
;
this
.
token
.
entityId
=
this
.
value
;
// 实体
let
res
=
this
.
$refs
.
tree
.
getCheckedNodes
();
let
arr
=
[];
let
token
=
{};
res
.
forEach
(
item
=>
{
arr
.
push
(
item
.
label
);
arr
.
push
(
item
.
label
);
// 属性
});
this
.
token
.
attribute
=
arr
;
// 属性
//console.log("entity: " + JSON.stringify(this.token.entityId));
//console.log("attribute: " + JSON.stringify(this.token.attribute));
// 渲染文本
let
replaceReg
=
new
RegExp
(
this
.
token
.
word
,
"g"
);
// 匹配关键字正则
let
replaceString
=
'<span class="highlights-text">'
+
this
.
token
.
word
+
"</span>"
+
'<span class="mark">'
+
"(实体:"
+
this
.
token
.
entityId
+
";属性:"
+
this
.
token
.
attribute
+
")"
+
"</span>"
;
// 高亮替换v-html值
console
.
log
(
"文本渲染"
+
replaceReg
+
replaceString
);
if
(
this
.
token
.
entityId
==
""
&&
this
.
token
.
attribute
.
length
==
0
)
return
;
// 保存token
if
(
arr
==
[])
{
this
.
$message
({
message
:
"未选择属性"
,
type
:
"info"
});
}
else
{
// 保存token
this
.
axios
({
method
:
"post"
,
url
:
"/textAnnotation/addToken"
,
data
:
{
documentId
:
this
.
documentId
,
token
:
{
word
:
this
.
token
.
word
,
begin
:
this
.
token
.
begin
,
end
:
0
,
entityId
:
this
.
token
.
entityId
,
attribute
:
arr
}
}
}).
then
(
res
=>
{
if
(
res
.
return_code
==
200
)
{
this
.
cellStyle
(
this
.
row
,
this
.
column
);
let
token
=
{
tokenId
:
res
.
result
,
word
:
this
.
token
.
word
,
begin
:
this
.
token
.
begin
,
end
:
0
,
entityId
:
this
.
token
.
entityId
,
attribute
:
arr
};
this
.
tokenList
.
push
(
token
);
console
.
log
(
" token uploadToken"
+
JSON
.
stringify
(
token
));
console
.
log
(
" token uploadToken"
+
JSON
.
stringify
(
this
.
token
));
console
.
log
(
" tokenList uploadToken"
+
JSON
.
stringify
(
this
.
tokenList
)
);
this
.
$message
({
message
:
"已保存"
,
type
:
"success"
});
}
else
{
this
.
$message
({
message
:
res
.
return_info
,
type
:
"error"
});
}
});
// TODO 不知道为啥有缓存不能清除
// this.$nextTick(() => {
// this.$refs.tree.setCheckedKeys([]);
//});
}
return
;
},
// 删除实体属性
deleteToken
(
tag
)
{
console
.
log
(
"deleteToken"
);
this
.
axios
({
method
:
"post"
,
url
:
"/textAnnotation/
add
Token"
,
url
:
"/textAnnotation/
delete
Token"
,
data
:
{
documentId
:
this
.
file
.
id
,
token
:
{
word
:
this
.
token
.
word
,
begin
:
this
.
token
.
begin
,
end
:
this
.
token
.
end
,
entityId
:
this
.
token
.
entityId
,
attribute
:
this
.
token
.
attribute
}
documentId
:
this
.
documentId
,
tokenId
:
tag
.
tokenId
}
}).
then
(
res
=>
{
if
(
res
.
return_code
==
200
)
{
this
.
token
.
tokenId
=
res
.
result
;
token
=
this
.
token
;
this
.
token
=
{};
this
.
tokenList
.
push
(
token
);
this
.
$message
({
message
:
"已保存"
,
type
:
"success"
type
:
"info"
,
message
:
"已删除"
});
this
.
tokenList
.
splice
(
this
.
tokenList
.
indexOf
(
tag
),
1
);
this
.
content
=
this
.
contentWithoutColor
;
console
.
log
(
" this.tokenList: "
+
JSON
.
stringify
(
this
.
tokenList
));
console
.
log
(
" this.content: "
+
this
.
content
);
this
.
tokenList
.
forEach
(
element
=>
{
console
.
log
(
" token: "
+
JSON
.
stringify
(
element
));
let
replaceReg
=
new
RegExp
(
element
.
word
,
"g"
);
// 匹配关键字正则
let
replaceString
=
'<span class="highlights-text">'
+
element
.
word
+
"</span>"
+
'<span class="mark">'
+
"(实体:"
+
element
.
entityId
+
";属性:"
+
element
.
attribute
+
")"
+
"</span>"
;
// 高亮替换v-html值
this
.
content
=
this
.
content
.
replace
(
replaceReg
,
replaceString
);
});
}
else
{
this
.
$message
({
...
...
@@ -322,88 +411,45 @@ export default {
});
}
});
// 不知道为啥
有缓存不能
清除
//
this.$nextTick(() => {
// 不知道为啥
不
清除
//this.$nextTick(() => {
// this.$refs.tree.setCheckedKeys([]);
//});
this
.
value
=
""
;
return
(
this
.
content
=
this
.
content
.
replace
(
replaceReg
,
replaceString
));
},
handleTokenChange
(
tag
)
{
// 修改实体属性=删除+添加(如果选择属性弹窗没有点提交直接关掉的话会删除,也就是双击直接删除,也许这里后期需要改)
changeToken
(
tag
)
{
this
.
ifAlert
=
true
;
this
.
token
=
tag
;
this
.
tokenList
.
splice
(
this
.
tokenList
.
indexOf
(
tag
),
1
);
this
.
$options
.
methods
.
handleTokenClose
(
tag
);
},
// 直接调用修改接口(因为选择属性弹窗的提交会触发保存标注操作所以会再次产生一个标注,修改也不会成功)
// handleTokenChange(tag) {
// this.ifAlert = true;
// let token = tag;
// this.token = tag;
// tag = {};
// this.axios({
// method: "post",
// url: "http://127.0.0.1:9100/textAnnotation/revToken",
// data: {
// documentId: "a55a28d4a25811ea93c354e1ad87433a",//改成通用跳转传过来的documentId
// token:{
// entityId: this.token.entityId, // 这里类型似乎是string
// word: this.token.word,
// begin: this.token.begin,
// end: this.token.end,
// attribute: arr[0],
// // 修改实体时待改正
// tokenId: this.token.tokenId
// }
// }
// }).then(res => {
// if(res.return_code == 200){
// console.log("123" + res.return_info);
// this.token.attribute = arr[0];
// arr = [];
// this.tokenList.splice(this.tokenList.indexOf(token), 1);
// this.tokenList.push(this.token);
// }
// });
// },
// 删除实体属性
handleTokenClose
(
tag
)
{
this
.
tokenList
.
splice
(
this
.
tokenList
.
indexOf
(
tag
),
1
);
this
.
token
=
tag
;
let
replaceReg
=
new
RegExp
(
'<span class="highlights-text">'
+
this
.
token
.
word
+
"</span>"
+
'<span class="mark">'
+
"(实体:"
+
this
.
token
.
entityId
+
";属性:"
+
this
.
token
.
attribute
+
")"
+
"</span>"
,
"g"
);
// 匹配关键字正则
let
replaceString
=
this
.
token
.
word
;
this
.
content
=
this
.
content
.
replace
(
replaceReg
,
replaceString
);
console
.
log
(
"hello"
);
console
.
log
(
"hello"
);
console
.
log
(
"hello"
);
console
.
log
(
this
.
content
);
console
.
log
(
replaceReg
);
if
(
this
.
token
.
entityId
==
""
&&
this
.
token
.
attribute
==
[])
return
;
// this.tokenList.splice(this.tokenList.indexOf(tag), 1);
console
.
log
(
"deleteToken"
);
this
.
axios
({
method
:
"post"
,
url
:
"/textAnnotation/deleteToken"
,
data
:
{
documentId
:
this
.
file
.
i
d
,
tokenId
:
t
his
.
token
.
tokenId
documentId
:
this
.
documentI
d
,
tokenId
:
t
ag
.
tokenId
}
}).
then
(
res
=>
{
if
(
res
.
return_code
==
200
)
{
this
.
$message
({
type
:
"info"
,
message
:
"已删除"
this
.
tokenList
.
splice
(
this
.
tokenList
.
indexOf
(
tag
),
1
);
this
.
content
=
this
.
contentWithoutColor
;
console
.
log
(
" this.tokenList: "
+
JSON
.
stringify
(
this
.
tokenList
));
console
.
log
(
" this.content: "
+
this
.
content
);
this
.
tokenList
.
forEach
(
element
=>
{
console
.
log
(
" token: "
+
JSON
.
stringify
(
element
));
let
replaceReg
=
new
RegExp
(
element
.
word
,
"g"
);
// 匹配关键字正则
let
replaceString
=
'<span class="highlights-text">'
+
element
.
word
+
"</span>"
+
'<span class="mark">'
+
"(实体:"
+
element
.
entityId
+
";属性:"
+
element
.
attribute
+
")"
+
"</span>"
;
// 高亮替换v-html值
this
.
content
=
this
.
content
.
replace
(
replaceReg
,
replaceString
);
});
}
else
{
this
.
$message
({
...
...
@@ -412,14 +458,7 @@ export default {
});
}
});
// 不知道为啥不清除
//this.$nextTick(() => {
// this.$refs.tree.setCheckedKeys([]);
//});
//this.value = "";
return
(
this
.
content
=
this
.
content
.
replace
(
replaceReg
,
replaceString
));
},
// 提交已标注文档 // TODO 跳转到我的任务,已标注文档标注按钮消失,然后判定整个任务都标注完成后跳转到已完成任务界面,这个就交给通用的大佬们了
submit
()
{
// console.log("hello" + JSON.stringify(this.task))
...
...
@@ -476,6 +515,14 @@ export default {
font-size
:
20px
;
line-height
:
30px
;
}
.el-table
.warning-row
{
background
:
oldlace
;
}
.el-table
.success-row
{
background
:
#f0f9eb
;
}
.highlights-text
{
color
:
#ff5134
;
text-decoration
:
underline
;
...
...
DAPlatform-front/src/mock/api.js
View file @
c49f1b55
...
...
@@ -58,24 +58,20 @@ Mock.mock('http://localhost:9100/api/layer/getLayer', {
'labelName'
:
'label1'
,
'pointList'
:
[{
'pointId'
:
0
,
'X'
:
500
,
'Y'
:
3
00
'X'
:
116.403322
,
'Y'
:
3
9.920255
},
{
'pointId'
:
1
,
'X'
:
600
,
'Y'
:
3
00
'X'
:
116.410703
,
'Y'
:
3
9.897555
},
{
'pointId'
:
2
,
'X'
:
700
,
'Y'
:
3
50
'X'
:
116.402292
,
'Y'
:
3
9.892353
},
{
'pointId'
:
3
,
'X'
:
600
,
'Y'
:
400
},
{
'pointId'
:
4
,
'X'
:
450
,
'Y'
:
350
'X'
:
116.389846
,
'Y'
:
39.891365
}]
}]
}],
...
...
@@ -85,9 +81,9 @@ Mock.mock('http://localhost:9100/api/layer/getLayer', {
'relationId'
:
123
,
'landmarkEntityList'
:
[{
'landMarkId'
:
0
,
'landMarkName'
:
'
mark1
'
,
'X'
:
200
,
'Y'
:
200
'landMarkName'
:
'
北京
'
,
'X'
:
116.39
,
'Y'
:
39.9
}]
}]
}
...
...
文档/图像标注接口文档.docx
View file @
c49f1b55
No preview for this file type
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment