文档服务地址:http://47.92.0.57:3000/ 周报索引地址:http://47.92.0.57:3000/s/NruNXRYmV

Commit c49f1b55 by 李景熙

Merge remote-tracking branch 'origin/develop' into develop

parents d6116ab5 9368b255
......@@ -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>
......@@ -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
......
......@@ -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
})
var marker = new AMap.Marker({
position: new AMap.LngLat(116.39, 39.9), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title: '北京'
});
this.mouseTool = new AMap.MouseTool(this.map);
map.add(marker)
var marker = new AMap.Marker({
position: new AMap.LngLat(121.47, 31.23), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title: '上海'
});
map.add(marker)
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("这是一个多边形")
}
})
},
/**
* 还原数据中的地标、标注区域
*/
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)
})
map.remove(marker)
map.remove(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: '确定',
......
......@@ -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.tokenList.push(this.tokenInit);
let replaceReg = new RegExp(this.tokenInit.word, "g"); // 匹配关键字正则
let replaceString =
'<span class="highlights-text">' +
this.token.word +
this.tokenInit.word +
"</span>" +
'<span class="mark">' +
"(实体:" +
this.token.entityId +
this.tokenInit.entityId +
";属性:" +
this.token.attribute +
this.tokenInit.attribute +
")" +
"</span>"; // 高亮替换v-html值
if (this.token.entityId == "" && this.token.attribute == []) {
} else {
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,42 +248,69 @@ export default {
});
},
// 定位原文token
highlight() {
select() {
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); // 属性
});
if (arr == []) {
this.$message({
message: "未选择属性",
type: "info"
});
this.token.attribute = arr; // 属性
//console.log("entity: " + JSON.stringify(this.token.entityId));
//console.log("attribute: " + JSON.stringify(this.token.attribute));
} 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 =
......@@ -346,31 +321,25 @@ export default {
"(实体:" +
this.token.entityId +
";属性:" +
this.token.attribute +
arr +
")" +
"</span>"; // 高亮替换v-html值
if (this.token.entityId == "" && this.token.attribute == []) return;
console.log("文本渲染" + replaceReg + replaceString);
// 保存token
this.axios({
method: "post",
url: "/textAnnotation/addToken",
data: {
documentId: this.documentId,
token: {
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: this.token.attribute
}
}
}).then(res => {
if (res.return_code == 200) {
this.token.tokenId = res.result;
token = this.token;
this.token = {};
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"
......@@ -382,22 +351,23 @@ export default {
});
}
});
// TODO 不知道为啥有缓存不能清除
// this.$nextTick(() => {
// this.$refs.tree.setCheckedKeys([]);
//});
return (this.content = this.content.replace(replaceReg, replaceString));
}
return;
},
// 删除实体属性
handleTokenClose(tag) {
this.tokenList.splice(this.tokenList.indexOf(tag), 1);
this.token = tag;
deleteToken(tag) {
console.log("deleteToken");
this.axios({
method: "post",
url: "/textAnnotation/deleteToken",
data: {
documentId: this.documentId,
tokenId: this.token.tokenId
tokenId: tag.tokenId
}
}).then(res => {
if (res.return_code == 200) {
......@@ -405,6 +375,26 @@ export default {
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({
message: res.return_info,
......@@ -416,15 +406,49 @@ export default {
//this.$nextTick(() => {
// this.$refs.tree.setCheckedKeys([]);
//});
//this.value = "";
return this.getTokenList();
},
// TODO 还没测试 修改实体属性=删除+添加(如果选择属性弹窗没有点提交直接关掉的话会删除
handleTokenChange(tag) {
// 修改实体属性=删除+添加(如果选择属性弹窗没有点提交直接关掉的话会删除,也就是双击直接删除,也许这里后期需要改
changeToken(tag) {
this.ifAlert = true;
this.token = tag;
this.$options.methods.handleTokenClose(tag);
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: tag.tokenId
}
}).then(res => {
if (res.return_code == 200) {
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({
message: res.return_info,
type: "error"
});
}
});
},
// 提交已标注文档 // TODO 跳转到我的任务,已标注文档标注按钮消失,然后判定整个任务都标注完成后跳转到已完成任务界面,这个就交给通用的大佬们了
submit() {
......
<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>
<!-- 文本界面 -->
<div class="content" v-html="content"></div>
<!-- 文本界面 -->
<br />
</li>
</ul>
</div>
<!-- 打分 -->
<!--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
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{
});
} 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: 13px;
margin-top: 3px;
margin-bottom: 3px;
}
.tokenList {
......
......@@ -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"
: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,57 +270,85 @@ 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; // 打开标注弹窗
},
// TODO 表格标注颜色bug
cellStyle({ row, column, rowIndex, columnIndex }) {
this.tokenList.forEach(item => {
if (item.word == row[column.property]) {
return "warning-row";
//return 'success-row';
}
});
},
// 添加标注
handleCheckChange() {
// 添加标注 // 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;
if (arr == []) {
this.$message({
message: "未选择属性",
type: "info"
});
} else {
// 保存token
this.axios({
method: "post",
url: "/textAnnotation/addToken",
data: {
documentId: this.file.id,
documentId: this.documentId,
token: {
word: this.token.word,
begin: this.token.begin,
end: this.token.end,
end: 0,
entityId: this.token.entityId,
attribute: this.token.attribute
attribute: arr
}
}
}).then(res => {
if (res.return_code == 200) {
this.token.tokenId = res.result;
token = this.token;
this.token = {};
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"
......@@ -322,88 +360,96 @@ export default {
});
}
});
// 不知道为啥有缓存不能清除
// TODO 不知道为啥有缓存不能清除
// this.$nextTick(() => {
// this.$refs.tree.setCheckedKeys([]);
//});
this.value = "";
return (this.content = this.content.replace(replaceReg, replaceString));
},
handleTokenChange(tag) {
this.ifAlert = true;
this.token = tag;
this.tokenList.splice(this.tokenList.indexOf(tag), 1);
this.$options.methods.handleTokenClose(tag);
}
return;
},
// 直接调用修改接口(因为选择属性弹窗的提交会触发保存标注操作所以会再次产生一个标注,修改也不会成功)
// 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) {
deleteToken(tag) {
console.log("deleteToken");
this.axios({
method: "post",
url: "/textAnnotation/deleteToken",
data: {
documentId: this.documentId,
tokenId: tag.tokenId
}
}).then(res => {
if (res.return_code == 200) {
this.$message({
type: "info",
message: "已删除"
});
this.tokenList.splice(this.tokenList.indexOf(tag), 1);
this.token = tag;
let replaceReg = new RegExp(
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">' +
this.token.word +
element.word +
"</span>" +
'<span class="mark">' +
"(实体:" +
this.token.entityId +
element.entityId +
";属性:" +
this.token.attribute +
element.attribute +
")" +
"</span>",
"g"
); // 匹配关键字正则
let replaceString = this.token.word;
"</span>"; // 高亮替换v-html值
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;
});
} else {
this.$message({
message: res.return_info,
type: "error"
});
}
});
// 不知道为啥不清除
//this.$nextTick(() => {
// this.$refs.tree.setCheckedKeys([]);
//});
},
// 修改实体属性=删除+添加(如果选择属性弹窗没有点提交直接关掉的话会删除,也就是双击直接删除,也许这里后期需要改)
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.file.id,
tokenId: this.token.tokenId
documentId: this.documentId,
tokenId: tag.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;
......
......@@ -58,24 +58,20 @@ Mock.mock('http://localhost:9100/api/layer/getLayer', {
'labelName': 'label1',
'pointList': [{
'pointId': 0,
'X': 500,
'Y': 300
'X': 116.403322,
'Y': 39.920255
}, {
'pointId': 1,
'X': 600,
'Y': 300
'X': 116.410703,
'Y': 39.897555
}, {
'pointId': 2,
'X': 700,
'Y': 350
'X': 116.402292,
'Y': 39.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
}]
}]
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment