Skip to content

D
DA-Platform

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

Commit ad706141 by 郭婉茹
Options

file.url connect to documentId

parent 6f42d1ce
Showing with 169 additions and 318 deletions
DAPlatform-front/src/components/CheckDetail.vue
......@@ -44,10 +44,7 @@ export default {
}
switch (type) {
case "文本":
self.$router.push({ name: 'SelectedText', path: '/selected', params: {documentId: documentId} });
break;
case "表格":
self.$router.push({ name: 'Tabled', path: '/tabled', params: {documentId: documentId} });
goto("SelectedText");
break;
case "图片":
goto("image");
......
DAPlatform-front/src/components/CompletedTaskDetail.vue
......@@ -45,10 +45,7 @@ export default {
}
switch (type) {
case "文本":
self.$router.push({ name: 'SelectedText', path: '/selected', params: {documentId: documentId} });
break;
case "表格":
self.$router.push({ name: 'Tabled', path: '/tabled', params: {documentId: documentId} });
goto("SelectedText");
break;
case "图片":
goto("image");
......
DAPlatform-front/src/components/OngoingTaskDetail.vue
......@@ -44,10 +44,7 @@ export default {
}
switch (type) {
case "文本":
self.$router.push({ name: 'SelectText', path: '/select', params: {documentId: documentId} });
break;
case "表格":
self.$router.push({ name: 'Table', path: '/table', params: {documentId: documentId} });
goto("SelectText");
break;
case "图片":
goto("image");
......
DAPlatform-front/src/components/textAnnotation/SelectText.vue
<template>
<div class="select-container">
<el-container style="margin-top: 40px" :style="{ height : height_res-40+'px'}">
<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"
......@@ -31,13 +32,15 @@
</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>
......@@ -46,14 +49,8 @@
<!-- 文本界面 -->
<el-main class="filter-container" style="background-color: #FFFFFF">
<div style="overflow-y:auto;height:100%;">
<div @mouseup="highlight()">
<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" @mouseup="highlight()" v-html="content"></div>
<br />
<div>
<el-button type="primary" @click="submit()">提交</el-button>
</div>
......@@ -68,7 +65,7 @@
:value="item.label"
></el-option>
</el-select>
<el-button type="primary" @click="handleOption">新建</el-button>
<!--el-button type="primary" @click="handleOption">新建</el-button-->
<el-tree
:data="treedata"
show-checkbox
......@@ -92,52 +89,25 @@
<script>
export default {
data() {
const item = {
date: "2020-05-02",
name: "小明",
address: "那是我心中最美的“第三极”——第二次青藏科考青年说"
};
return {
// 文章id
documentId: '',
// 文章
file: null,
// 文章内容
content: [],
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: "暂无数据"
}
]
}
],
textData: [],
treedata: [
// 基本信息
{
label: "滑坡名称"
},
{
label: "地理位置"
},
{
label: "行政位置"
},
{
label: "坐标",
children: [
......@@ -150,68 +120,6 @@ export default {
]
},
{
label: "滑坡年代",
children: [
{
label: "古滑坡"
},
{
label: "老滑坡"
},
{
label: "新滑坡"
}
]
},
{
label: "滑动时间",
children: [
{
label: "yyyy-MM-dd"
},
{
label: "HH:mm:ss"
}
]
},
{
label: "运动形式",
children: [
{
label: "旋转"
},
{
label: "平移"
},
{
label: "流动"
},
{
label: "侧向扩展"
},
{
label: "复合"
}
]
},
{
label: "滑体类型",
children: [
{
label: "岩质"
},
{
label: "土质"
},
{
label: "碎屑"
},
{
label: "堆积层"
}
]
},
{
label: "规模等级",
children: [
{
......@@ -230,56 +138,6 @@ export default {
label: "小型"
}
]
},
{
label: "宏观稳定性",
children: [
{
label: "不稳定"
},
{
label: "基本稳定"
},
{
label: "稳定"
}
]
},
{
label: "确定性程度",
children: [
{
label: "确定"
},
{
label: "基本确定"
},
{
label: "不确定"
}
]
},
//基本特征
{
label: "前缘高程（m）"
},
{
label: "后缘高程（m）"
},
{
label: "滑体平均厚度（m）"
},
{
label: "滑坡面积（㎡）"
},
{
label: "滑体体积（m³）"
},
{
label: "坡度（°）"
},
{
label: "主滑方向（°）"
}
],
defaultProps: {
......@@ -287,8 +145,9 @@ export default {
label: "label"
},
count: 1,
tableData: Array(20).fill(item),
ifAlert: false,
ifAlert: false, // 弹窗
// 实体
value: "",
options: [
{
value: "选项1",
......@@ -309,30 +168,24 @@ export default {
]
};
},
created() {
this.getParams();
beforeMount() {
// 从通用传来文本信息 // TODO 区分text和table
this.file = JSON.parse(decodeURIComponent(this.$route.params.file));
},
methods: {
// 获取文本id
getParams() {
var routerParams = this.$route.params.documentId;
this.documentId = routerParams;
},
handleNodeClick(data) {
console.log(data);
},
// 获取文本
getContent() {
console.log("this.file: " + JSON.stringify(this.file));
this.axios({
method: "post",
url: "http://127.0.0.1:9100/uploadDownload/getFileContent",
url: "/files/getFileContent",
data: {
documentId: this.documentId
documentId: this.file.url //JSON.stringify(this.file.id) // this.file.url
}
}).then(res => {
if (res.return_code == 200) {
console.log("123" + res.result);
content = res.result;
this.content = res.result;
console.log("this.content: " + this.content);
} else {
this.$message({
message: res.return_info,
......@@ -341,96 +194,114 @@ export default {
}
});
},
// 暂时没用
handleOption() {
console.log(this.token.entityId);
if (this.token.entityId) {
this.$message({
message: "创建成功！",
type: "success"
});
}
// 获得实体属性列表
getTokenList() {
this.axios({
method: "post",
url: "/textAnnotation/getTokenList",
data: {
documentId: this.file.url // id
}
}).then(res => {
if (res.return_code == 200) {
res.result.forEach(element => {
this.tokenList.push(element);
console.log("this.token: " + element);
});
} else {
this.$message({
message: res.return_info,
type: "error"
});
}
});
},
// 定位原文token
highlight() {
if (window.getSelection().toString() != "") {
//console.log("1111"+window.getSelection().toString());
this.ifAlert = true;
//var word;
// 禁止重复标注
var i;
for (i = 0; i < this.tokenList.length; i++) {
if (window.getSelection().toString() == this.tokenList[i].word)
return;
}
this.ifAlert = true; // 打开标注弹窗
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));
}
},
// 标注
// 添加标注 // TODO templete列表传输
handleCheckChange() {
console.log(this.$refs.tree.getCheckedNodes());
this.ifAlert = 0;
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);
});
console.log("111" + arr);
this.token.attribute = arr[0];
this.content = this.content.map(item => {
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值
// 保存实体
if (this.token.entityId == "" && arr == []) {
return;
}
this.axios({
method: "post",
url: "http://127.0.0.1:9100/textAnnotation/addToken",
data: {
documentId: this.documentId,
token: {
entityId: this.token.entityId, // TODO:这里类型似乎是string
word: this.token.word,
begin: this.token.begin,
end: this.token.end,
attribute: arr[0]
}
}
}).then(res => {
if (res.return_code == 200) {
this.token.tokenId = res.result;
token = this.token;
this.token = {};
this.tokenList.push(token);
} else {
this.$message({
message: res.return_info,
type: "error"
});
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);
// TODO length bug
if (this.token.entityId == "" && this.token.attribute.length == 0) return;
// 保存token
this.axios({
method: "post",
url: "/textAnnotation/addToken",
data: {
documentId: this.file.url,
token: {
word: this.token.word,
begin: this.token.begin,
end: this.token.end,
entityId: this.token.entityId,
attribute: this.token.attribute
}
});
// 不知道为啥有缓存不能清除
this.$nextTick(() => {
this.$refs.tree.setCheckedKeys([]);
});
this.token.entityId = "";
return item.replace(replaceReg, replaceString);
});
this.$message({
message: "保存成功！",
type: "success"
}
}).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"
});
} else {
this.$message({
message: res.return_info,
type: "error"
});
}
});
// 不知道为啥有缓存不能清除
// this.$nextTick(() => {
// this.$refs.tree.setCheckedKeys([]);
//});
this.value = "";
return this.content = this.content.replace(replaceReg, replaceString);
},
// 修改实体属性=删除+添加（如果选择属性弹窗没有点提交直接关掉的话会删除）
handleTokenChange(tag) {
handleTokenChange(tag) {
this.ifAlert = true;
this.token = tag;
this.tokenList.splice(this.tokenList.indexOf(tag), 1);
......@@ -471,65 +342,38 @@ export default {
handleTokenClose(tag) {
this.tokenList.splice(this.tokenList.indexOf(tag), 1);
this.token = tag;
this.content = this.content.map(item => {
let replaceReg = new RegExp(
'<span class="highlights-text">' + this.token.word + "</span>",
"g"
); // 匹配关键字正则
let replaceString = this.token.word;
//
if (this.token.entityId == "" && this.token.attribute == []) {
return;
}
this.axios({
method: "post",
url: "http://127.0.0.1:9100/textAnnotation/deleteToken",
data: {
documentId: this.documentId,
tokenId: this.token.tokenId
}
}).then(res => {
if (res.return_code == 200) console.log("123" + res.return_info);
else {
this.$message({
message: res.return_info,
type: "error"
});
}
});
// 不知道为啥不清除
this.$nextTick(() => {
this.$refs.tree.setCheckedKeys([]);
});
this.token.entityId = "";
return item.replace(replaceReg, replaceString);
});
this.$message({
type: "info",
message: "已删除"
});
},
// 提交本次标注
submit() {
// this.$message({
// message: "保存成功！",
// type: "success"
// });
this.$router.replace("/completed");
},
// 放到边栏的token边栏
getTokenList() {
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);
// TODO length bug
if (this.token.entityId == "" && this.token.attribute == []) return;
this.axios({
method: "post",
url: "http://127.0.0.1:9100/textAnnotation/getTokenList",
url: "/textAnnotation/deleteToken",
data: {
documentId: this.documentId
documentId: this.file.url,
tokenId: this.token.tokenId
}
}).then(res => {
if (res.return_code == 200) {
res.result.forEach(element => {
this.tokenList.push(element);
this.$message({
type: "info",
message: "已删除"
});
} else {
this.$message({
......@@ -538,12 +382,28 @@ export default {
});
}
});
// 不知道为啥不清除
//this.$nextTick(() => {
// this.$refs.tree.setCheckedKeys([]);
//});
//this.value = "";
return this.content = this.content.replace(replaceReg, replaceString);
},
// 提交本次标注
submit() {
// this.$message({
// message: "保存成功！",
// type: "success"
// });
this.$router.replace("/completed");
}
},
watch: {
$route: "getParams"
// 放到边栏的token边栏
},
mounted: function() {
// 获得文章
this.getContent();
// 获得实体属性
this.getTokenList(); //需要触发的函数
}
};
......
DAPlatform-front/src/components/textAnnotation/SelectedText.vue
<template>
<div class="select-container">
<el-container style="margin-top: 40px" :style="{ height : height_res-40+'px'}">
<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"
......
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