|
|
@@ -48,6 +48,14 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-button type="primary" @click="exportJson" style="margin-left: 10px;">导出JSON</el-button>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-checkbox v-model="enableBulkHighlight" @change="handleBulkHighlightChange">一键标注相关实体</el-checkbox>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
<!-- 标注文本区域 -->
|
|
|
<el-row style="margin-top: 20px;">
|
|
|
<el-col :span="24">
|
|
|
@@ -130,11 +138,11 @@
|
|
|
<el-button type="primary" @click="saveRelation" style="width: 100%;">保存关系</el-button>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <ul>
|
|
|
+ <!--<ul>
|
|
|
<li v-for="relation in relations" :key="relation.id">
|
|
|
{{ getEntityText(relation.headEntityId) }} -> {{ getEntityText(relation.tailEntityId) }}（{{ relation.type }}）
|
|
|
</li>
|
|
|
- </ul>
|
|
|
+ </ul>-->
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</el-card>
|
|
|
@@ -175,6 +183,7 @@ export default {
|
|
|
isColorsLoaded: false, // 标识数据是否加载完成
|
|
|
entity_flag: 0, //标志位，标志为0表示当前用户没有选择实体，无法提交确认，为1则说明已经选择实体可以提交
|
|
|
relation_flag: 0, //标志位，标志为0表示当前用户没有保存实体，无法构建关系，为1则说明实体已经保存，可以构建关系
|
|
|
+ enableBulkHighlight: false, // 控制是否启用一键标注功能
|
|
|
historyLogs: [] ,// 历史记录
|
|
|
currentColorId:"",//记录当前选中颜色的id
|
|
|
highlightHistory: [], // 用来保存高亮的历史记录，进行撤销最近
|
|
|
@@ -386,12 +395,16 @@ export default {
|
|
|
|
|
|
// 调用 addRelation 接口保存关系
|
|
|
addRelation(this.relationForm).then(response => {
|
|
|
+ console.log(response);
|
|
|
if (response.code === 200) {
|
|
|
- // 保存成功，将关系添加到前端的关系列表中
|
|
|
- // this.relations.push({
|
|
|
- // id: response.data.id,
|
|
|
- // ...relation
|
|
|
- // });
|
|
|
+ // 将关系添加到关系列表中
|
|
|
+ const relation = {
|
|
|
+ //id: response.relationId,
|
|
|
+ startId: this.headEntityId,
|
|
|
+ endId: this.tailEntityId,
|
|
|
+ type: this.currentRelationType
|
|
|
+ };
|
|
|
+ this.relations.push(relation);// 保存到relations数组
|
|
|
|
|
|
this.$message({
|
|
|
message: '关系保存成功！',
|
|
|
@@ -412,11 +425,12 @@ export default {
|
|
|
// type: 'error'
|
|
|
// });
|
|
|
// }
|
|
|
- }else {
|
|
|
- this.$message({
|
|
|
- message: '关系保存失败！',
|
|
|
- type: 'error'
|
|
|
- });
|
|
|
+ //}else {
|
|
|
+ //this.$message({
|
|
|
+ // message: '关系保存失败！',
|
|
|
+ // type: 'error'
|
|
|
+ // });
|
|
|
+ // }
|
|
|
}
|
|
|
}).catch(error => {
|
|
|
console.error('保存关系失败:', error);
|
|
|
@@ -432,6 +446,41 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ handleBulkHighlightChange(){
|
|
|
+ if (this.enableBulkHighlight) {
|
|
|
+ this.bulkHighlightEntities(); // 执行一键标注
|
|
|
+ } else {
|
|
|
+ this.undoBulkHighlight(); // 取消标注
|
|
|
+ }
|
|
|
+ },
|
|
|
+ bulkHighlightEntities() {
|
|
|
+ // 获取当前文本中的实体
|
|
|
+ const textInput = document.getElementById('textInput');
|
|
|
+ const entitiesToHighlight = this.entities.filter(entity => {
|
|
|
+ return textInput.textContent.includes(entity.text);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 遍历实体并进行标注
|
|
|
+ entitiesToHighlight.forEach(entity => {
|
|
|
+ const regex = new RegExp(`(${entity.text})`, 'g');
|
|
|
+ const highlightedText = `<span style="background-color: ${entity.color}; color: black;" title="${entity.label}">${entity.text}</span>`;
|
|
|
+ this.highlightedText = this.highlightedText.replace(regex, highlightedText);
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$message({
|
|
|
+ message: '一键标注已完成！',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ undoBulkHighlight() {
|
|
|
+ // 取消所有已高亮的实体
|
|
|
+ this.highlightedText = this.text; //恢复原文
|
|
|
+
|
|
|
+ this.$message({
|
|
|
+ message: '已取消一键标注！',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ },
|
|
|
getEntityText(entityId) {
|
|
|
const entity = this.entities.find(e => e.id === entityId);
|
|
|
return entity ? entity.text : '未知实体';
|
|
|
@@ -448,7 +497,7 @@ export default {
|
|
|
addEntity(this.entityForm).then(response => {
|
|
|
|
|
|
//console.log("实体保存响应：",response);
|
|
|
- if (this.highlightHistory.length === 1){
|
|
|
+ if (this.highlightHistory.length === 1) {
|
|
|
this.headEntityId = response.data.entityId;
|
|
|
} else {
|
|
|
this.tailEntityId = response.data.entityId;
|
|
|
@@ -456,45 +505,46 @@ export default {
|
|
|
console.log("add方法中的头实体id为：" + this.headEntityId);
|
|
|
console.log("add方法中的尾实体id为：" + this.tailEntityId);
|
|
|
if (response.code === 200 && response.data) {
|
|
|
- // 实体保存成功后，更新 entities 数组
|
|
|
- const entity = {
|
|
|
- id: response.data.entityId,// 使用后端返回的entity_id
|
|
|
- text: this.selectedText,
|
|
|
- startOffset: this.startOffset,
|
|
|
- endOffset: this.endOffset,
|
|
|
- label: this.selectedLabel,
|
|
|
- color: this.currentHighlightColor
|
|
|
- };
|
|
|
- this.entities.push(entity);
|
|
|
-
|
|
|
- //获取后端返回的 entity_id
|
|
|
- //const entityId = response.data.entityId;
|
|
|
-
|
|
|
- // 找到当前实体在entities数组中的索引
|
|
|
- // const entityIndex = this.entities.findIndex(
|
|
|
- // entity => entity.text === this.selectedText &&
|
|
|
- // entity.startOffset === this.startOffset &&
|
|
|
- // entity.endOffset === this.endOffset
|
|
|
- // );
|
|
|
- //
|
|
|
- // if (entityIndex !== -1) {
|
|
|
- // //更新实体的id尾后端返回的entity_id
|
|
|
- // this.entities[entityIndex].id = entityId;
|
|
|
- // }
|
|
|
-
|
|
|
- this.$message({
|
|
|
- message: '成功提交',
|
|
|
- type: 'success'
|
|
|
- });
|
|
|
-
|
|
|
- //设置relation_flag为1，表示实体已保存
|
|
|
- this.relation_flag = 1;
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: '提交失败',
|
|
|
- type: 'error'
|
|
|
- });
|
|
|
- }
|
|
|
+ // 实体保存成功后，更新 entities 数组
|
|
|
+ const entity = {
|
|
|
+ id: response.data.entityId,// 使用后端返回的entity_id
|
|
|
+ text: this.selectedText,
|
|
|
+ startOffset: this.startOffset,
|
|
|
+ endOffset: this.endOffset,
|
|
|
+ label: this.selectedLabel,
|
|
|
+ color: this.currentHighlightColor
|
|
|
+ };
|
|
|
+ this.entities.push(entity);
|
|
|
+
|
|
|
+ //获取后端返回的 entity_id
|
|
|
+ //const entityId = response.data.entityId;
|
|
|
+
|
|
|
+ // 找到当前实体在entities数组中的索引
|
|
|
+ // const entityIndex = this.entities.findIndex(
|
|
|
+ // entity => entity.text === this.selectedText &&
|
|
|
+ // entity.startOffset === this.startOffset &&
|
|
|
+ // entity.endOffset === this.endOffset
|
|
|
+ // );
|
|
|
+ //
|
|
|
+ // if (entityIndex !== -1) {
|
|
|
+ // //更新实体的id尾后端返回的entity_id
|
|
|
+ // this.entities[entityIndex].id = entityId;
|
|
|
+ // }
|
|
|
+
|
|
|
+ this.$message({
|
|
|
+ message: '成功提交',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+
|
|
|
+ //设置relation_flag为1，表示实体已保存
|
|
|
+ this.relation_flag = 1;
|
|
|
+ // } else {
|
|
|
+ // this.$message({
|
|
|
+ // message: '提交失败',
|
|
|
+ // type: 'error'
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ }
|
|
|
}).catch(error => {
|
|
|
console.error('提交失败:', error);
|
|
|
this.$message({
|
|
|
@@ -509,6 +559,46 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ exportJson() {
|
|
|
+ console.log('entities:', this.entities);
|
|
|
+ console.log('relations:', this.relations);
|
|
|
+ // 格式化实体数据
|
|
|
+ const entityList = this.entities.map(entity => ({
|
|
|
+ text: entity.text,
|
|
|
+ type: entity.label
|
|
|
+ }));
|
|
|
+
|
|
|
+ // 格式化关系数据
|
|
|
+ const relationList = this.relations.map(relation => {
|
|
|
+ const subject = this.getEntityText(relation.startId);
|
|
|
+ const object = this.getEntityText(relation.endId);
|
|
|
+ return {
|
|
|
+ predicate: relation.type, //关系类型
|
|
|
+ subject: subject, //头实体
|
|
|
+ object: object //尾实体
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ // 构建完整的JSON数据
|
|
|
+ const jsonData = {
|
|
|
+ id: this.taskId,
|
|
|
+ text: this.text, // 当前标注的原始文本
|
|
|
+ entity_list: entityList,
|
|
|
+ relation_list: relationList
|
|
|
+ };
|
|
|
+
|
|
|
+ console.log('jsonData:', jsonData);
|
|
|
+
|
|
|
+ // 转换为JSON字符串
|
|
|
+ const jsonString = JSON.stringify(jsonData, null, 2);
|
|
|
+
|
|
|
+ // 创建Blob对象
|
|
|
+ const blob = new Blob([jsonString],{type:'application/json'});
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = URL.createObjectURL(blob);
|
|
|
+ link.download = 'entities_relations.json'; // 设置下载文件名
|
|
|
+ link.click();
|
|
|
+ },
|
|
|
// 撤销最近一次高亮标记
|
|
|
undoHighlight() {
|
|
|
// 如果有高亮记录
|
