Skip to content

D
DA-Platform

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

Commit 164f2d15 by 郭婉茹
Options

text

parent 27c68064
Showing with 692 additions and 370 deletions
DAPlatform-front/src/components/textAnnotation/SelectText.vue
...@@ -2,12 +2,36 @@ ...@@ -2,12 +2,36 @@
<div class="select-container"> <div class="select-container">
<el-container> <el-container>
<el-aside class="sidebar1"> <el-aside class="sidebar1">
<!-- 实体列表 --> <!-- 实体/属性模板 -->
<div class="sidebar-box1"> <div class="sidebar-box1">
<div> <div>
<div class="img-list-title1">实体列表</div> <div class="img-list-title1">实体/属性模板</div>
<div class="img-title-list-box1"> <div class="img-title-list-box1">
<div> <div style="overflow: auto; height: calc(100vh - 61px - 100px - 40px - 60px);">
<p v-html="'实体：'+ token.entityId" />
<el-tree
:data="treeData"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-currentD
:props="defaultProps"
></el-tree>
</div>
<div style="width: 100%"></div>
<el-button type="primary" style="margin-top: 10px" @click="uploadToken">确定</el-button>
</div>
</div>
</div>
</el-aside>
<!-- 文本界面 -->
<el-main class="filter-container1" style="background-color: #FFFFFF">
<div style="overflow-y:auto;height:100%;">
<div class="content1" @mouseup="select()" v-html="content"></div>
<el-row>
<el-col :span="21">
<div class="content_left">
<div <div
class="tokenList1" class="tokenList1"
v-for="it in tokenList" v-for="it in tokenList"
...@@ -25,36 +49,13 @@ ...@@ -25,36 +49,13 @@
</el-tag> </el-tag>
</div> </div>
</div> </div>
</div> </el-col>
</div> <el-col :span="3">
</div> <div class="content_right">
</el-aside> <el-button class="button1" type="primary" @click="submit()">提交</el-button>
<!-- 文本界面 --> </div>
<el-main class="filter-container1" style="background-color: #FFFFFF"> </el-col>
<div style="overflow-y:auto;height:100%;"> </el-row>
<div class="content1" @mouseup="select()" v-html="content"></div>
<div>
<el-button class="button1" type="primary" @click="submit()">提交</el-button>
</div>
<!-- 弹窗-->
<el-dialog title="请标注" :visible.sync="ifAlert">
<div style="overflow: auto; height: 50vh">
<p v-html="'实体：'+ token.entityId" />
<el-tree
:data="treeData"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
></el-tree>
</div>
<div style="width: 100%;height: 5px"></div>
<el-button type="primary" style="margin-top: 30px" @click="uploadToken">确定</el-button>
</el-dialog>
<!-- 弹窗 -->
</div> </div>
</el-main> </el-main>
</el-container> </el-container>
...@@ -189,6 +190,7 @@ export default { ...@@ -189,6 +190,7 @@ export default {
}, },
}).then((res) => { }).then((res) => {
if (res.return_code == 200) { if (res.return_code == 200) {
this.content = this.contentWithoutColor;
res.result.forEach((element) => { res.result.forEach((element) => {
this.tokenInit = element; this.tokenInit = element;
console.log(" token: " + JSON.stringify(this.tokenInit)); console.log(" token: " + JSON.stringify(this.tokenInit));
...@@ -243,51 +245,43 @@ export default { ...@@ -243,51 +245,43 @@ export default {
// 定位原文token // 定位原文token
select() { select() {
if (window.getSelection().toString() != "") { if (window.getSelection().toString() != "") {
// // 禁止重复标注，沾边的也不行 //console.log(" token select" + JSON.stringify(this.token));
// for (var i = 0; i < this.tokenList.length; i++) { this.token.tokenId = "0";
// if (
// window.getSelection().anchorOffset >= this.tokenList[i].begin &&
// window.getSelection().anchorOffset < this.tokenList[i].end
// ) {
// this.$message({
// message: "选中区域头部存在重叠",
// type: "info"
// });
// return;
// } else if (
// window.getSelection().focusOffset > this.tokenList[i].begin &&
// window.getSelection().focusOffset <= this.tokenList[i].end
// ) {
// this.$message({
// message: "选中区域尾部存在重叠",
// type: "info"
// });
// return;
// }
// }
console.log(" token select" + JSON.stringify(this.token));
this.token.word = window.getSelection().toString(); this.token.word = window.getSelection().toString();
this.token.begin = window.getSelection().anchorOffset; //开始位置 this.token.begin = window.getSelection().anchorOffset; //开始位置
this.token.end = window.getSelection().focusOffset; //结束位置 this.token.end = window.getSelection().focusOffset; //结束位置
console.log(" token select" + JSON.stringify(this.token)); //console.log(" token select" + JSON.stringify(this.token));
console.log(" tokenList select" + JSON.stringify(this.tokenList)); //console.log(" tokenList select" + JSON.stringify(this.tokenList));
this.ifAlert = true; // 打开标注弹窗
} }
}, },
// 添加标注 // TODO 大于段落的标注还是无法渲染 // 添加标注 // TODO 大于段落的标注还是无法渲染
uploadToken() { uploadToken() {
this.ifAlert = false;
let res = this.$refs.tree.getCheckedNodes(); let res = this.$refs.tree.getCheckedNodes();
let arr = []; let arr = [];
res.forEach((item) => { res.forEach((item) => {
arr.push(item.label); // 属性 arr.push(item.label); // 属性
}); });
if (arr == []) { if (arr.length == 0) {
this.$message({ this.$message({
message: "未选择属性", message: "未选择属性",
type: "info", type: "info",
}); });
} else { } else {
// 删除原有
console.log("deleteToken");
this.axios({
method: "post",
url: "/textAnnotation/deleteToken",
data: {
documentId: this.documentId,
tokenId: this.token.tokenId,
},
}).then((res) => {
if (res.return_code == 200) {
this.tokenList.splice(this.tokenList.indexOf(this.token), 1);
console.log(" token change" + JSON.stringify(this.token));
}
});
// 保存token // 保存token
this.axios({ this.axios({
method: "post", method: "post",
...@@ -304,30 +298,8 @@ export default { ...@@ -304,30 +298,8 @@ export default {
}, },
}).then((res) => { }).then((res) => {
if (res.return_code == 200) { if (res.return_code == 200) {
// 渲染文本 this.tokenList = [];
let replaceReg = new RegExp(this.token.word, "g"); // 匹配关键字正则 this.getTokenList();
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(token));
console.log(" token uploadToken" + JSON.stringify(this.token)); console.log(" token uploadToken" + JSON.stringify(this.token));
console.log( console.log(
...@@ -344,11 +316,6 @@ export default { ...@@ -344,11 +316,6 @@ export default {
}); });
} }
}); });
// TODO 不知道为啥有缓存不能清除
// this.$nextTick(() => {
// this.$refs.tree.setCheckedKeys([]);
//});
} }
return; return;
}, },
...@@ -402,46 +369,11 @@ export default { ...@@ -402,46 +369,11 @@ export default {
}, },
// 修改实体属性=删除+添加（如果选择属性弹窗没有点提交直接关掉的话会删除，也就是双击直接删除，也许这里后期需要改） // 修改实体属性=删除+添加（如果选择属性弹窗没有点提交直接关掉的话会删除，也就是双击直接删除，也许这里后期需要改）
changeToken(tag) { changeToken(tag) {
this.ifAlert = true; this.token.tokenId = tag.tokenId;
this.token = tag; this.token.word = tag.word;
// this.tokenList.splice(this.tokenList.indexOf(tag), 1); this.token.begin = tag.begin;
console.log("deleteToken"); this.token.end = tag.end;
this.axios({ this.token.entityId = tag.entityId;
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",
});
}
});
}, },
// 提交已标注文档 // 提交已标注文档
submit() { submit() {
...@@ -506,12 +438,6 @@ export default { ...@@ -506,12 +438,6 @@ export default {
overflow: auto; overflow: auto;
background-color: white; background-color: white;
box-shadow: 0px 0px 10px #dbdbdb; box-shadow: 0px 0px 10px #dbdbdb;
.tokenList1 {
margin: 9px;
}
.token1 {
font-size: 18px;
}
} }
} }
.filter-container1 { .filter-container1 {
...@@ -519,10 +445,8 @@ export default { ...@@ -519,10 +445,8 @@ export default {
margin-left: 20px; margin-left: 20px;
margin-top: 40px; margin-top: 40px;
height: calc(100vh - 61px - 100px); height: calc(100vh - 61px - 100px);
width: 70%;
//float: center; //float: center;
width: 100%; width: 100%;
padding: 25px 10px 20px 25px;
@include whiteBoard; @include whiteBoard;
.content1 { .content1 {
overflow: auto; overflow: auto;
...@@ -531,6 +455,17 @@ export default { ...@@ -531,6 +455,17 @@ export default {
font-size: 20px; font-size: 20px;
line-height: 30px; line-height: 30px;
} }
.content_left {
overflow: auto;
height: 60px;
margin-top: 1px;
.tokenList1 {
margin: 3px;
}
.token1 {
font-size: 16px;
}
}
.button1 { .button1 {
overflow: auto; overflow: auto;
float: right; float: right;
......
DAPlatform-front/src/components/textAnnotation/SelectedCheck.vue
<template> <template>
<div class="select-container"> <div class="select-container">
<el-container> <el-container>
<el-aside <el-aside class="sidebar1">
class="sidebar1" <!-- 实体/属性模板 -->
style="background-color: rgba(255,255,255,0);box-shadow: 0px 0px 0px rgba(255,255,255,0);padding-right: 20px"
>
<!-- 实体列表 -->
<div class="sidebar-box1"> <div class="sidebar-box1">
<div> <div>
<div class="img-list-title1">实体列表</div> <div class="img-list-title1">实体/属性模板</div>
<div class="img-title-list-box1"> <div class="img-title-list-box1">
<div class="img-title-list1"> <div style="overflow: auto; height: calc(100vh - 61px - 100px - 40px - 60px);">
<div <p v-html="'实体：'+ token.entityId" />
class="tokenList2" <el-tree
v-for="it in tokenList" :data="treeData"
:key="it" show-checkbox
style="user-select:none; float: left;" default-expand-all
> node-key="id"
<li class="token2" v-html="it.word"></li> ref="tree"
</div> highlight-currentD
:props="defaultProps"
></el-tree>
</div> </div>
<div style="width: 100%"></div>
<el-button type="primary" style="margin-top: 10px" @click="uploadToken">修改</el-button>
</div> </div>
</div> </div>
</div> </div>
</el-aside> </el-aside>
<!-- 文本界面 --> <!-- 文本界面 -->
<el-main class="filter-container1" style="background-color: #FFFFFF"> <el-main class="filter-container3" style="background-color: #FFFFFF">
<div style="overflow-y:auto;height:100%;"> <div style="overflow-y:auto;height:100%;">
<div class="content1" @mouseup="select()" v-html="content"></div> <div class="content3" @mouseup="select()" v-html="content"></div>
<!-- 打分 -->
<!--div v-if="this.$route.query.isCheck == '1'"--> <div class="content_left1">
<div class="button1"> <div
<el-button type="primary" @click="commentScore = true">打分</el-button> class="tokenList1"
<!-- <el-button type="primary" @click="submit()">提交</el-button>--> v-for="it in tokenList"
<el-dialog title="请打分" :visible.sync="commentScore" width="400px"> :key="it"
<el-form :model="scoreForm"> style="user-select:none; float: left;"
<el-form-item label="标注准确率" :label-width="formLabelWidth"> >
<el-input v-model="scoreForm.accuracy" autocomplete="off" clearable></el-input> <el-tag
</el-form-item> size="small"
<el-form-item label="标注得分" :label-width="formLabelWidth"> @click="changeToken(it)"
<el-input v-model="scoreForm.score" autocomplete="off" clearable></el-input> closable
</el-form-item> :disable-transitions="false"
<el-button type="primary" @click="addScore()">确认</el-button> @close="deleteToken(it)"
</el-form> >
</el-dialog> <a style="font-size: 18px;" v-html="it.word"></a>
<a style="font-size: 14px;">: 实体</a>
<a style="font-size: 14px;" v-html="it.entityId"></a>
<a style="font-size: 14px;">属性</a>
<a style="font-size: 14px;" v-html="it.attribute"></a>
<el-button style="margin-left: auto;font-size: 12px" @click="countScore()" size="mini" type="text">标注正确</el-button>
</el-tag>
</div>
</div>
<div style="overflow:auto;font-size: 15px;float: right;">
<!-- <button @click="computeFn()">开始计算</button>-->
计算得分 =
<b style="font-size: 20px">{{this.computeScore}}</b>
</div> </div>
</div> </div>
</el-main> </el-main>
...@@ -62,6 +75,7 @@ export default { ...@@ -62,6 +75,7 @@ export default {
// 任务 // 任务
task: null, task: null,
// 文章内容 // 文章内容
contentWithoutColor: "",
content: "", content: "",
//实体属性 //实体属性
tokenInit: { tokenInit: {
...@@ -98,6 +112,9 @@ export default { ...@@ -98,6 +112,9 @@ export default {
}, },
formLabelWidth: "120px", formLabelWidth: "120px",
executors: [], executors: [],
computeScore: 0,
allScore: 1,
rightScore: 0,
}; };
}, },
beforeMount() { beforeMount() {
...@@ -109,6 +126,12 @@ export default { ...@@ -109,6 +126,12 @@ export default {
this.executors = this.$route.params.executor; this.executors = this.$route.params.executor;
}, },
methods: { methods: {
countScore() {
this.rightScore++;
this.computeScore = (this.rightScore/this.allScore)*100;
console.log(this.rightScore);
console.log(this.allScore);
},
// 插入数据库 // 插入数据库
insertDocument() { insertDocument() {
// console.log("insertDocument"); // console.log("insertDocument");
...@@ -134,6 +157,7 @@ export default { ...@@ -134,6 +157,7 @@ export default {
this.documentId = res.result; this.documentId = res.result;
//console.log("this.documentId: " + this.documentId); //console.log("this.documentId: " + this.documentId);
this.getContent(); this.getContent();
this.getTemplate();
} else { } else {
this.$message({ this.$message({
message: res.return_info, message: res.return_info,
...@@ -146,6 +170,7 @@ export default { ...@@ -146,6 +170,7 @@ export default {
getContent() { getContent() {
console.log("getContent this.file: " + JSON.stringify(this.file)); console.log("getContent this.file: " + JSON.stringify(this.file));
console.log("getContent this.documentId: " + this.documentId); console.log("getContent this.documentId: " + this.documentId);
console.log("getContent this.content: " + this.content);
this.axios({ this.axios({
method: "post", method: "post",
url: "/files/getFileContent", url: "/files/getFileContent",
...@@ -154,15 +179,14 @@ export default { ...@@ -154,15 +179,14 @@ export default {
}, },
}).then((res) => { }).then((res) => {
if (res.return_code == 200) { if (res.return_code == 200) {
// console.log(" getContent: " + res.result); this.allScore = 0;
this.rightScore = 0;
console.log(" getContent: " + res.result);
this.content = res.result; this.content = res.result;
console.log("getContent this.content: " + this.content);
this.$nextTick(function () { this.$nextTick(function () {
this.getTokenList(); this.getTokenList();
}); });
// console.log( this.contentWithoutColor = this.content;
// " this.contentWithoutColor: " + this.contentWithoutColor
// );
} else { } else {
this.$message({ this.$message({
message: res.return_info, message: res.return_info,
...@@ -184,8 +208,11 @@ export default { ...@@ -184,8 +208,11 @@ export default {
}, },
}).then((res) => { }).then((res) => {
if (res.return_code == 200) { if (res.return_code == 200) {
this.content = this.contentWithoutColor;
this.allScore = 0;
res.result.forEach((element) => { res.result.forEach((element) => {
this.tokenInit = element; this.tokenInit = element;
this.allScore++;
console.log(" token: " + JSON.stringify(this.tokenInit)); console.log(" token: " + JSON.stringify(this.tokenInit));
this.tokenList.push(this.tokenInit); this.tokenList.push(this.tokenInit);
let replaceReg = new RegExp(this.tokenInit.word, "g"); // 匹配关键字正则 let replaceReg = new RegExp(this.tokenInit.word, "g"); // 匹配关键字正则
...@@ -203,7 +230,151 @@ export default { ...@@ -203,7 +230,151 @@ export default {
this.content = this.content.replace(replaceReg, replaceString); this.content = this.content.replace(replaceReg, replaceString);
}); });
console.log(" this.tokenList: " + JSON.stringify(this.tokenList)); console.log(" this.tokenList: " + JSON.stringify(this.tokenList));
} else {
this.$message({
message: res.return_info,
type: "error",
});
}
});
},
//获取模板
getTemplate() {
console.log("getTemplate");
this.axios({
method: "post",
url: "/textAnnotation/getOneTemplate",
data: {
templateId: parseInt(this.piece.template),
},
}).then((res) => {
if (res.return_code == 200) {
console.log(res.result);
// 实体
this.token.entityId = res.result.templateName;
// 属性
this.treeData = res.result.entityList;
} else {
this.$message({
message: res.return_info,
type: "error",
});
}
});
},
// 定位原文token
select() {
if (window.getSelection().toString() != "") {
//console.log(" token select" + JSON.stringify(this.token));
this.token.tokenId = "0";
this.token.word = window.getSelection().toString();
this.token.begin = window.getSelection().anchorOffset; //开始位置
this.token.end = window.getSelection().focusOffset; //结束位置
//console.log(" token select" + JSON.stringify(this.token));
//console.log(" tokenList select" + JSON.stringify(this.tokenList));
}
},
// 添加标注 // TODO 大于段落的标注还是无法渲染
uploadToken() {
let res = this.$refs.tree.getCheckedNodes();
let arr = [];
res.forEach((item) => {
arr.push(item.label); // 属性
});
if (arr.length == 0) {
this.$message({
message: "未选择属性",
type: "info",
});
} else {
// 删除原有
console.log("deleteToken");
this.axios({
method: "post",
url: "/textAnnotation/deleteToken",
data: {
documentId: this.documentId,
tokenId: this.token.tokenId,
},
}).then((res) => {
if (res.return_code == 200) {
this.tokenList.splice(this.tokenList.indexOf(this.token), 1);
console.log(" token change" + JSON.stringify(this.token));
}
});
// 保存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) {
this.tokenList = [];
this.getTokenList();
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",
});
}
});
}
return;
},
// 删除实体属性
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.content = this.contentWithoutColor;
console.log(" this.tokenList: " + JSON.stringify(this.tokenList));
console.log(" this.content: " + this.content); 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 { } else {
this.$message({ this.$message({
message: res.return_info, message: res.return_info,
...@@ -211,6 +382,18 @@ export default { ...@@ -211,6 +382,18 @@ export default {
}); });
} }
}); });
// 不知道为啥不清除
//this.$nextTick(() => {
// this.$refs.tree.setCheckedKeys([]);
//});
},
// 修改实体属性=删除+添加（如果选择属性弹窗没有点提交直接关掉的话会删除，也就是双击直接删除，也许这里后期需要改）
changeToken(tag) {
this.token.tokenId = tag.tokenId;
this.token.word = tag.word;
this.token.begin = tag.begin;
this.token.end = tag.end;
this.token.entityId = tag.entityId;
}, },
// 打分 // 打分
addScore() { addScore() {
...@@ -240,23 +423,23 @@ export default { ...@@ -240,23 +423,23 @@ export default {
) )
this.$message("得分应该在0~100范围内"); this.$message("得分应该在0~100范围内");
else { else {
this.axios({ this.axios({
method: "get", method: "get",
params: { params: {
userId: this.$route.params.executor.id, userId: this.$route.params.executor.id,
fileId: this.file.id, fileId: this.file.id,
scoreForm: this.scoreForm, scoreForm: this.scoreForm,
}, },
url: "task/gradePieces", url: "task/gradePieces",
}).then((res) => { }).then((res) => {
console.log(res) console.log(res);
if (res.code == 0) { if (res.code == 0) {
alert("分数提交失败!"); alert("分数提交失败!");
} else if (res.code == 1) { } else if (res.code == 1) {
alert("打分成功"); alert("打分成功");
this.$router.push({ path: "/check" }); this.$router.push({ path: "/check" });
} }
}); });
// this.commentScore = false; // this.commentScore = false;
// this.$message("打分成功"); // this.$message("打分成功");
} }
...@@ -350,31 +533,32 @@ export default { ...@@ -350,31 +533,32 @@ export default {
overflow: auto; overflow: auto;
background-color: white; background-color: white;
box-shadow: 0px 0px 10px #dbdbdb; box-shadow: 0px 0px 10px #dbdbdb;
.tokenList1 {
margin: 9px;
}
.token1 {
font-size: 18px;
}
} }
} }
.filter-container1 { .filter-container3 {
margin-right: 40px; margin-right: 40px;
margin-left: 20px; margin-left: 20px;
margin-top: 40px; margin-top: 40px;
height: calc(100vh - 61px - 100px); height: calc(100vh - 61px - 100px);
width: 70%;
//float: center; //float: center;
width: 100%; width: 100%;
padding: 25px 10px 20px 25px;
@include whiteBoard; @include whiteBoard;
.content1 { .content3 {
overflow: auto; overflow: auto;
height: calc(100vh - 61px - 100px - 100px); height: calc(100vh - 61px - 100px - 170px);
text-align: left; text-align: left;
font-size: 20px; font-size: 20px;
line-height: 30px; line-height: 30px;
} }
.content_left1 {
width: 100%;
overflow: auto;
height: 100px;
margin-top: 1px;
.tokenList1 {
margin: 3px;
}
}
.button1 { .button1 {
overflow: auto; overflow: auto;
float: right; float: right;
......
DAPlatform-front/src/components/textAnnotation/Table.vue
...@@ -2,33 +2,6 @@ ...@@ -2,33 +2,6 @@
<div class="select-container"> <div class="select-container">
<el-container> <el-container>
<el-aside class="sidebar3"> <el-aside class="sidebar3">
<!-- 实体列表 -->
<div class="sidebar-box3">
<div>
<div class="img-list-title3">实体列表</div>
<div class="img-title-list-box3">
<div>
<div
class="tokenList3"
v-for="it in tokenList"
:key="it"
style="user-select:none; float: left;"
>
<el-tag
size="small"
@click="changeToken(it)"
closable
:disable-transitions="false"
@close="deleteToken(it)"
>
<a class="token3" v-html="it.word"></a>
</el-tag>
<br />
</div>
</div>
</div>
</div>
</div>
<!-- 表单列表 --> <!-- 表单列表 -->
<div class="sidebar-box3"> <div class="sidebar-box3">
<div> <div>
...@@ -46,12 +19,41 @@ ...@@ -46,12 +19,41 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 实体列表 -->
<div class="sidebar-box3">
<div>
<div class="img-list-title3">实体/属性模板</div>
<div class="img-title-list-box4">
<div>
<div style="overflow: auto;height: calc(100vh - 61px - 100px - 180px - 50px);">
<p v-html="'实体：'+ value" />
<el-tree
:data="treeData"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
></el-tree>
</div>
<el-button
type="primary"
style="margin-top: 9px;margin-right: 20px;float:right"
@click="uploadToken"
size="small"
plain
>确定</el-button>
</div>
</div>
</div>
</div>
</el-aside> </el-aside>
<!-- 文件界面 --> <!-- 文件界面 -->
<el-main class="filter-container1" style="background-color: #FFFFFF"> <el-main class="filter-container2" style="background-color: #FFFFFF">
<div style="overflow-y:auto;height:100%;"> <div style="overflow-y:auto;height:100%;">
<!-- 表格界面 --> <!-- 表格界面 -->
<div class="content1"> <div class="content2">
<el-table <el-table
:data="nowContent.tableData" :data="nowContent.tableData"
:cell-style="cellStyle" :cell-style="cellStyle"
...@@ -69,29 +71,33 @@ ...@@ -69,29 +71,33 @@
</el-table> </el-table>
</div> </div>
<!-- 表格界面 --> <!-- 表格界面 -->
<div> <el-row>
<el-button class="button1" type="primary" @click="submit()">提交</el-button> <el-col :span="21">
</div> <div class="content_left">
<div
<!-- 弹窗--> class="tokenList3"
<el-dialog title="请标注" :visible.sync="ifAlert"> v-for="it in tokenList"
<div style="overflow: auto;height: 50vh"> :key="it"
<p v-html="'实体：'+ value" /> style="user-select:none; float: left;"
<!--el-button type="primary" @click="handleOption">新建</el-button--> >
<el-tree <el-tag
:data="treeData" size="small"
show-checkbox @click="changeToken(it)"
default-expand-all closable
node-key="id" :disable-transitions="false"
ref="tree" @close="deleteToken(it)"
highlight-current >
:props="defaultProps" <a class="token3" v-html="it.word"></a>
></el-tree> </el-tag>
</div> </div>
<div style="width: 100%;height: 5px"></div> </div>
<el-button type="primary" style="margin-top: 30px" @click="uploadToken">确定</el-button> </el-col>
</el-dialog> <el-col :span="3">
<!-- 弹窗--> <div class="content_right">
<el-button class="button1" type="primary" @click="submit()">提交</el-button>
</div>
</el-col>
</el-row>
</div> </div>
</el-main> </el-main>
</el-container> </el-container>
...@@ -241,7 +247,6 @@ export default { ...@@ -241,7 +247,6 @@ export default {
this.tokenInit = element; this.tokenInit = element;
console.log(" token: " + JSON.stringify(this.tokenInit)); console.log(" token: " + JSON.stringify(this.tokenInit));
this.tokenList.push(this.tokenInit); this.tokenList.push(this.tokenInit);
// TODO 初始渲染
}); });
console.log(" this.tokenList: " + JSON.stringify(this.tokenList)); console.log(" this.tokenList: " + JSON.stringify(this.tokenList));
} else { } else {
...@@ -290,12 +295,10 @@ export default { ...@@ -290,12 +295,10 @@ export default {
select: function (row, column) { select: function (row, column) {
this.row = row; this.row = row;
this.column = column; this.column = column;
this.token.tokenId = "0";
this.token.word = row[column.property]; this.token.word = row[column.property];
this.token.begin = row.index; this.token.begin = row.index;
this.token.end = column.index; this.token.end = column.index;
// console.log("select: "+JSON.stringify(row.index));
// console.log("select: "+JSON.stringify(column.index));
// console.log(JSON.stringify(this.token.word));
for (var i = 0; i < this.tokenList.length; i++) { for (var i = 0; i < this.tokenList.length; i++) {
if ( if (
this.token.begin == this.tokenList[i].begin && this.token.begin == this.tokenList[i].begin &&
...@@ -310,7 +313,6 @@ export default { ...@@ -310,7 +313,6 @@ export default {
} }
console.log(" token select" + JSON.stringify(this.token)); console.log(" token select" + JSON.stringify(this.token));
console.log(" tokenList select" + JSON.stringify(this.tokenList)); console.log(" tokenList select" + JSON.stringify(this.tokenList));
this.ifAlert = true; // 打开标注弹窗
}, },
getCellIndex: function ({ row, column, rowIndex, columnIndex }) { getCellIndex: function ({ row, column, rowIndex, columnIndex }) {
row.index = rowIndex; row.index = rowIndex;
...@@ -336,18 +338,31 @@ export default { ...@@ -336,18 +338,31 @@ export default {
}, },
// 添加标注 // 添加标注
uploadToken() { uploadToken() {
this.ifAlert = false;
let res = this.$refs.tree.getCheckedNodes(); let res = this.$refs.tree.getCheckedNodes();
let arr = []; let arr = [];
res.forEach((item) => { res.forEach((item) => {
arr.push(item.label); // 属性 arr.push(item.label); // 属性
}); });
if (arr == []) { if (arr.length == 0) {
this.$message({ this.$message({
message: "未选择属性", message: "未选择属性",
type: "info", type: "info",
}); });
} else { } else {
// 删除原有
console.log("deleteToken");
this.axios({
method: "post",
url: "/textAnnotation/deleteToken",
data: {
documentId: this.documentId,
tokenId: this.token.tokenId,
},
}).then((res) => {
if (res.return_code == 200) {
this.tokenList.splice(this.tokenList.indexOf(this.token), 1);
}
});
// 保存token // 保存token
this.axios({ this.axios({
method: "post", method: "post",
...@@ -364,21 +379,9 @@ export default { ...@@ -364,21 +379,9 @@ export default {
}, },
}).then((res) => { }).then((res) => {
if (res.return_code == 200) { if (res.return_code == 200) {
this.tokenList = [];
this.getTokenList();
this.cellStyle(this.row, this.column); this.cellStyle(this.row, this.column);
let token = {
tokenId: res.result,
word: this.token.word,
begin: this.token.begin,
end: this.token.end,
entityId: this.value,
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({ this.$message({
message: "已保存", message: "已保存",
type: "success", type: "success",
...@@ -423,30 +426,11 @@ export default { ...@@ -423,30 +426,11 @@ export default {
}, },
// 修改实体属性=删除+添加（如果选择属性弹窗没有点提交直接关掉的话会删除，也就是双击直接删除，也许这里后期需要改） // 修改实体属性=删除+添加（如果选择属性弹窗没有点提交直接关掉的话会删除，也就是双击直接删除，也许这里后期需要改）
changeToken(tag) { changeToken(tag) {
this.ifAlert = true; this.token.tokenId = tag.tokenId;
this.token = tag; this.token.word = tag.word;
// this.tokenList.splice(this.tokenList.indexOf(tag), 1); this.token.begin = tag.begin;
console.log("deleteToken"); this.token.end = tag.end;
this.axios({ this.token.entityId = tag.entityId;
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);
} else {
this.$message({
message: res.return_info,
type: "error",
});
}
});
}, },
// 提交已标注文档 // 提交已标注文档
submit() { submit() {
...@@ -502,22 +486,53 @@ export default { ...@@ -502,22 +486,53 @@ export default {
.img-title-list-box3 { .img-title-list-box3 {
padding: 0 0 0 0; padding: 0 0 0 0;
width: 300px; width: 300px;
height: 200px; height: 100px;
overflow: auto; overflow: auto;
background-color: white; background-color: white;
//margin-top: 13px;
margin-bottom: 13px;
box-shadow: 0px 0px 10px #dbdbdb; box-shadow: 0px 0px 10px #dbdbdb;
}
.img-title-list-box4 {
padding: 0 0 0 0;
width: 300px;
height: calc(100vh - 61px - 100px - 180px);
overflow: auto;
background-color: white;
box-shadow: 0px 0px 10px #dbdbdb;
}
}
.filter-container2 {
margin-right: 40px;
margin-left: 20px;
margin-top: 40px;
height: calc(100vh - 61px - 100px);
//float: center;
width: 100%;
@include whiteBoard;
.content2 {
overflow: auto;
height: calc(100vh - 61px - 100px - 110px);
text-align: left;
font-size: 20px;
line-height: 30px;
}
.content_left {
overflow: auto;
height: 60px;
margin-top: 1px;
.tokenList3 { .tokenList3 {
margin: 9px; margin: 3px;
} }
.token3 { .token3 {
font-size: 18px; font-size: 16px;
} }
} }
.button1 {
overflow: auto;
float: right;
margin-right: 10px;
margin-top: 10px;
}
} }
.el-table .warning-row { .el-table .warning-row {
background: oldlace; background: oldlace;
} }
......
DAPlatform-front/src/components/textAnnotation/Tabled.vue
...@@ -48,10 +48,10 @@ ...@@ -48,10 +48,10 @@
</div> </div>
</el-aside> </el-aside>
<!-- 文件界面 --> <!-- 文件界面 -->
<el-main class="filter-container1" style="background-color: #FFFFFF"> <el-main class="filter-container2" style="background-color: #FFFFFF">
<div style="overflow-y:auto;height:100%;"> <div style="overflow-y:auto;height:100%;">
<!-- 表格界面 --> <!-- 表格界面 -->
<div class="content1"> <div class="content2">
<el-table <el-table
:data="nowContent.tableData" :data="nowContent.tableData"
:cell-style="cellStyle" :cell-style="cellStyle"
......
DAPlatform-front/src/components/textAnnotation/TabledCheck.vue
...@@ -2,62 +2,65 @@ ...@@ -2,62 +2,65 @@
<div class="select-container"> <div class="select-container">
<el-container> <el-container>
<el-aside class="sidebar3"> <el-aside class="sidebar3">
<!-- 实体列表 --> <!-- 表单列表 -->
<div class="sidebar-box3"> <div class="sidebar-box3">
<div> <div>
<div class="img-list-title3">实体列表</div> <div class="img-list-title3">表单列表</div>
<div class="img-title-list-box3"> <div class="img-title-list-box3">
<div class="img-title-list3"> <div style="user-select:none; float:left; padding: 5px;">
<div <div
class="tokenList2" v-for="item in allContent"
v-for="it in tokenList" :key="item.tablename"
:key="it" @click="changeSheet(item.tablename)"
style="user-select:none; float: left;"
> >
<div <el-link icon="el-icon-edit" type="primary">{{ item.tablename }}</el-link>
size="small"
@click="changeToken(it)"
closable
:disable-transitions="false"
@close="deleteToken(it)"
>
<li class="token2" v-html="it.word"></li>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 文本列表 --> <!-- 实体列表 -->
<div class="sidebar-box3"> <div class="sidebar-box3">
<div> <div>
<div class="img-list-title3">表单列表</div> <div class="img-list-title3">实体/属性模板</div>
<div class="img-title-list-box3"> <div class="img-title-list-box4">
<div style="user-select:none; float:left; padding: 5px;"> <div>
<div <div style="overflow: auto;height: calc(100vh - 61px - 100px - 180px - 50px);">
v-for="item in allContent" <p v-html="'实体：'+ value" />
:key="item.tablename" <el-tree
@click="changeSheet(item.tablename)" :data="treeData"
> show-checkbox
<el-link icon="el-icon-edit" type="primary">{{ item.tablename }}</el-link> default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
></el-tree>
</div> </div>
<el-button
type="primary"
style="margin-top: 9px;margin-right: 20px;float:right"
@click="uploadToken"
size="small"
plain
>确定</el-button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</el-aside> </el-aside>
<!-- 文件界面 --> <!-- 文件界面 -->
<el-main class="filter-container1" style="background-color: #FFFFFF"> <el-main class="filter-container2" style="background-color: #FFFFFF">
<div style="overflow-y:auto;height:100%;"> <div style="overflow-y:auto;height:100%;">
<!-- 表格界面 --> <!-- 表格界面 -->
<div class="content1"> <div class="content2">
<el-table <el-table
:data="nowContent.tableData" :data="nowContent.tableData"
:cell-style="cellStyle" :cell-style="cellStyle"
border border
style="width: 100%,height:200px" style="width: 100%,height:200px"
@cell-click="select" @cell-click="select"
:row-class-name="tableRowClassName" :cell-class-name="getCellIndex"
> >
<el-table-column <el-table-column
v-for="col in nowContent.name" v-for="col in nowContent.name"
...@@ -70,21 +73,47 @@ ...@@ -70,21 +73,47 @@
<!-- 表格界面 --> <!-- 表格界面 -->
<!-- 打分 --> <!-- 打分 -->
<!--div v-if="this.$route.query.isCheck == '1'"--> <!--div v-if="this.$route.query.isCheck == '1'"-->
<div class="button1" > <el-row>
<el-button type="primary" @click="commentScore = true">打分</el-button> <el-col :span="21">
<!-- <el-button type="primary" @click="submit()">提交</el-button>--> <div class="content_left">
<el-dialog title="请打分" :visible.sync="commentScore" width="400px"> <div
<el-form :model="scoreForm"> class="tokenList3"
<el-form-item label="标注准确率" :label-width="formLabelWidth"> v-for="it in tokenList"
<el-input v-model="scoreForm.accuracy" autocomplete="off" clearable></el-input> :key="it"
</el-form-item> style="user-select:none; float: left;"
<el-form-item label="标注得分" :label-width="formLabelWidth"> >
<el-input v-model="scoreForm.score" autocomplete="off" clearable></el-input> <el-tag
</el-form-item> size="small"
<el-button class="button1" type="primary" @click="addScore()">确认</el-button> @click="changeToken(it)"
</el-form> closable
</el-dialog> :disable-transitions="false"
</div> @close="deleteToken(it)"
>
<a class="token3" v-html="it.word"></a>
</el-tag>
</div>
</div>
</el-col>
<el-col :span="3">
<div class="content_right">
<div class="button1">
<el-button type="primary" @click="commentScore = true">打分</el-button>
<!-- <el-button type="primary" @click="submit()">提交</el-button>-->
<el-dialog title="请打分" :visible.sync="commentScore" width="400px">
<el-form :model="scoreForm">
<el-form-item label="标注准确率" :label-width="formLabelWidth">
<el-input v-model="scoreForm.accuracy" autocomplete="off" clearable></el-input>
</el-form-item>
<el-form-item label="标注得分" :label-width="formLabelWidth">
<el-input v-model="scoreForm.score" autocomplete="off" clearable></el-input>
</el-form-item>
<el-button class="button1" type="primary" @click="addScore()">确认</el-button>
</el-form>
</el-dialog>
</div>
</div>
</el-col>
</el-row>
</div> </div>
</el-main> </el-main>
</el-container> </el-container>
...@@ -187,6 +216,8 @@ export default { ...@@ -187,6 +216,8 @@ export default {
this.getContent(); this.getContent();
// 获得实体属性 // 获得实体属性
this.getTokenList(); this.getTokenList();
// 获得标注模板
this.getTemplate();
} else { } else {
this.$message({ this.$message({
message: res.return_info, message: res.return_info,
...@@ -250,6 +281,67 @@ export default { ...@@ -250,6 +281,67 @@ export default {
} }
}); });
}, },
//获取模板
getTemplate() {
//console.log("getTemplate");
this.axios({
method: "post",
url: "/textAnnotation/getOneTemplate",
data: {
templateId: parseInt(this.piece.template),
},
}).then((res) => {
if (res.return_code == 200) {
//console.log(res.result)
// 实体
this.value = res.result.templateName; // 现在的实体与模板相近，所以就先固定了
// 属性
this.treeData = res.result.entityList;
} else {
this.$message({
message: res.return_info,
type: "error",
});
}
});
},
// 更改表单
changeSheet(name) {
for (var i = 0; i < this.numOfSheet; i++) {
// console.log("in " + name + " " + this.nowContent.tablename)
if (name == this.allContent[i].tablename) {
// console.log("match " + JSON.stringify(this.allContent[i]))
this.nowContent = this.allContent[i];
}
}
},
// 定位原文token
select: function (row, column) {
this.row = row;
this.column = column;
this.token.tokenId = "0";
this.token.word = row[column.property];
this.token.begin = row.index;
this.token.end = column.index;
for (var i = 0; i < this.tokenList.length; i++) {
if (
this.token.begin == this.tokenList[i].begin &&
this.token.end == this.tokenList[i].end
) {
this.$message({
message: "选中单元格已标记",
type: "info",
});
return;
}
}
console.log(" token select" + JSON.stringify(this.token));
console.log(" tokenList select" + JSON.stringify(this.tokenList));
},
getCellIndex: function ({ row, column, rowIndex, columnIndex }) {
row.index = rowIndex;
column.index = columnIndex;
},
// 表格标注颜色 // 表格标注颜色
cellStyle: function (row, column, rowIndex, columnIndex) { cellStyle: function (row, column, rowIndex, columnIndex) {
for (var i = 0; i < this.tokenList.length; i++) { for (var i = 0; i < this.tokenList.length; i++) {
...@@ -268,6 +360,102 @@ export default { ...@@ -268,6 +360,102 @@ export default {
} }
return ""; return "";
}, },
// 添加标注
uploadToken() {
let res = this.$refs.tree.getCheckedNodes();
let arr = [];
res.forEach((item) => {
arr.push(item.label); // 属性
});
if (arr.length == 0) {
this.$message({
message: "未选择属性",
type: "info",
});
} else {
// 删除原有
console.log("deleteToken");
this.axios({
method: "post",
url: "/textAnnotation/deleteToken",
data: {
documentId: this.documentId,
tokenId: this.token.tokenId,
},
}).then((res) => {
if (res.return_code == 200) {
this.tokenList.splice(this.tokenList.indexOf(this.token), 1);
}
});
// 保存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) {
this.tokenList = [];
this.getTokenList();
this.cellStyle(this.row, this.column);
this.$message({
message: "已保存",
type: "success",
});
} else {
this.$message({
message: res.return_info,
type: "error",
});
}
});
}
return;
},
// 删除实体属性
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.content = this.contentWithoutColor;
console.log(" this.tokenList: " + JSON.stringify(this.tokenList));
console.log(" this.content: " + this.content);
} else {
this.$message({
message: res.return_info,
type: "error",
});
}
});
},
// 修改实体属性=删除+添加（如果选择属性弹窗没有点提交直接关掉的话会删除，也就是双击直接删除，也许这里后期需要改）
changeToken(tag) {
this.token.tokenId = tag.tokenId;
this.token.word = tag.word;
this.token.begin = tag.begin;
this.token.end = tag.end;
this.token.entityId = tag.entityId;
},
// 打分 // 打分
addScore() { addScore() {
if (this.scoreForm.accuracy == "" || this.scoreForm.score == "") if (this.scoreForm.accuracy == "" || this.scoreForm.score == "")
...@@ -294,22 +482,22 @@ export default { ...@@ -294,22 +482,22 @@ export default {
) )
this.$message("分数范围在0~100"); this.$message("分数范围在0~100");
else { else {
this.axios({ this.axios({
method: "get", method: "get",
params: { params: {
userId: this.$route.params.executor.id, userId: this.$route.params.executor.id,
fileId: this.file.id, fileId: this.file.id,
scoreForm: this.scoreForm, scoreForm: this.scoreForm,
}, },
url: "task/gradePieces", url: "task/gradePieces",
}).then((res) => { }).then((res) => {
if (res.code == 0) { if (res.code == 0) {
alert("分数提交失败!"); alert("分数提交失败!");
} else if (res.code == 1) { } else if (res.code == 1) {
alert("打分成功"); alert("打分成功");
this.$router.push({ path: "/check" }); this.$router.push({ path: "/check" });
} }
}); });
// this.commentScore = false; // this.commentScore = false;
// this.$message("打分成功"); // this.$message("打分成功");
} }
......
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