Skip to content

D
DA-Platform

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

Commit 2b8b8451 by 郭婉茹
Options

text更新

parent 805e9a8a
Showing with 458 additions and 112 deletions
DAPlatform-front/src/components/textAnnotation/SelectText.vue
<template>
<div class="select-container">
<el-container class="filter-container">
<el-main style="background-color: #FFFFFF">
<el-container style="margin-top: 40px" :style="{ height : height_res-40+'px'}">
<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="tokenList"
v-for="it in tokenList"
:key="it.message"
style="user-select:none; float: left;"
>
<el-tag
size="small"
@click="handleTokenChange(it)"
closable
:disable-transitions="false"
@close="handleTokenClose(it)"
>
<a class="token" v-html="it"></a>
</el-tag>
<br />
</div>
</div>
</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>
</div>
</div>
</el-aside>
<el-main class="filter-container" style="background-color: #FFFFFF">
<div style="overflow-y:auto;height:100%;">
<div @mouseup="highlight()">
<!-- <div @mouseup="highlight()">-->
<ul class="list">
<li v-for="it in msg" :key="it.message">
<div class="msg" v-html="it"></div>
......@@ -13,7 +53,6 @@
</ul>
</div>
<div>
<el-button type="primary" @click="save()">保存</el-button>
<el-button type="primary" @click="submit()">提交</el-button>
</div>
<!-- 弹窗-->
......@@ -28,9 +67,6 @@
></el-option>
</el-select>
<el-button type="primary" @click="handleOption">新建</el-button>
<div style="margin-top: 10px;margin-bottom: 10px">
<!--span>基本信息：名称：可爱的滑坡；经度：null；纬度：null；</span-->
</div>
<el-tree
:data="treedata"
show-checkbox
......@@ -60,61 +96,172 @@ export default {
address: "那是我心中最美的“第三极”——第二次青藏科考青年说"
};
return {
textData: [
{
label: "那是我心中最美的“第三极”",
children: [
{
label: "那是我心中最美的“第三极”——第一次青藏科考青年说"
},
{
label: "那是我心中最美的“第三极”——第二次青藏科考青年说"
}
]
}
],
treedata: [
// 基本信息
{
label: "滑坡名称"
},
{
label: "地理位置"
},
{
label: "行政位置"
},
{
label: "坐标",
children: [
{
label: "经度"
},
{
label: "维度"
}
]
},
{
label: "滑坡年代",
children: [
{
label: "古滑坡"
},
{
label: "老滑坡"
},
{
label: "新滑坡"
}
]
},
{
label: "一级 1",
label: "滑动时间",
children: [
{
label: "二级 1-1",
children: [
{
label: "三级 1-1-1"
}
]
label: "yyyy-MM-dd"
},
{
label: "HH:mm:ss"
}
]
},
{
label: "一级 2",
label: "运动形式",
children: [
{
label: "二级 2-1",
children: [
{
label: "三级 2-1-1"
}
]
label: "旋转"
},
{
label: "二级 2-2",
children: [
{
label: "三级 2-2-1"
}
]
label: "平移"
},
{
label: "流动"
},
{
label: "侧向扩展"
},
{
label: "复合"
}
]
},
{
label: "一级 3",
label: "滑体类型",
children: [
{
label: "二级 3-1",
children: [
{
label: "三级 3-1-1"
}
]
label: "岩质"
},
{
label: "土质"
},
{
label: "碎屑"
},
{
label: "堆积层"
}
]
},
{
label: "规模等级",
children: [
{
label: "巨型"
},
{
label: "特大型"
},
{
label: "大型"
},
{
label: "中型"
},
{
label: "二级 3-2",
children: [
{
label: "三级 3-2-1"
}
]
label: "小型"
}
]
},
{
label: "宏观稳定性",
children: [
{
label: "不稳定"
},
{
label: "基本稳定"
},
{
label: "稳定"
}
]
},
{
label: "确定性程度",
children: [
{
label: "确定"
},
{
label: "基本确定"
},
{
label: "不确定"
}
]
},
//基本特征
{
label: "前缘高程（m）"
},
{
label: "后缘高程（m）"
},
{
label: "滑体平均厚度（m）"
},
{
label: "滑坡面积（㎡）"
},
{
label: "滑体体积（m³）"
},
{
label: "坡度（°）"
},
{
label: "主滑方向（°）"
}
],
defaultProps: {
......@@ -145,31 +292,32 @@ export default {
options: [
{
value: "选项1",
label: "1.可爱的滑坡"
label: "滑坡"
},
{
value: "选项2",
label: "2.不可爱的滑坡"
label: "山体"
},
{
value: "选项3",
label: "3.奇怪的滑坡"
label: "河流"
},
{
value: "选项4",
label: "4.平凡的滑坡"
},
{
value: "选项5",
label: "5.最后一个滑坡"
label: "时间"
}
],
value: "",
search: ""
search: "",
tokenId: 1,
tokenList: []
};
},
methods: {
handleNodeClick(data) {
console.log(data);
},
// 暂时没用
handleOption() {
console.log(this.value);
if (this.value) {
......@@ -179,6 +327,7 @@ export default {
});
}
},
// 标注
handleCheckChange() {
console.log(this.$refs.tree.getCheckedNodes());
this.ifAlert = 0;
......@@ -188,6 +337,7 @@ export default {
arr.push(item.label);
});
console.log("111" + arr);
this.tokenList.push(this.search);
this.msg = this.msg.map(item => {
let replaceReg = new RegExp(this.search, "g"); // 匹配关键字正则
let replaceString =
......@@ -195,27 +345,85 @@ export default {
this.search +
"</span>" +
'<span class="mark">' +
//'<el-tag size="mini" closable>' +
"(实体：" +
this.value +
"；属性：" +
arr +
")" +
//"</el-tag>" +
"</span>"; // 高亮替换v-html值
// 保存实体
if (this.value == "" && this.arr == []) {
return;
}
this.axios({
method: "post",
url: "/textAnnotation/addToken",
data: {
entityId: this.value, // 这里类型似乎是string
word: this.search,
attribute: this.arr,
// 修改实体时待改正
tokenId: this.tokenId + 1
}
}).then(res => {
console.log("123" + res);
});
// 不知道为啥有缓存不能清除
this.$nextTick(() => {
this.$refs.tree.setCheckedKeys([]);
});
this.value = "";
return item.replace(replaceReg, replaceString);
});
// ？
this.$nextTick(() => {
this.$refs.tree.setCheckedKeys([]);
})
this.value = "";
this.$message({
message: "保存成功！",
type: "success"
});
},
// 修改实体属性
handleTokenChange(tag) {
console.log("123" + tag);
this.ifAlert = true;
},
// 删除实体属性
handleTokenClose(tag) {
this.tokenList.splice(this.tokenList.indexOf(tag), 1);
this.search = tag;
console.log("123" + tag);
this.msg = this.msg.map(item => {
let replaceReg = new RegExp(
'<span class="highlights-text">' + this.search + "</span>",
"g"
); // 匹配关键字正则
let replaceString = this.search;
// 保存实体
if (this.value == "" && this.arr == []) {
return;
}
this.axios({
method: "post",
url: "/textAnnotation/addToken",
data: {
entityId: this.value, // 这里类型似乎是string
word: this.search,
attribute: this.arr,
tokenId: this.tokenId + 1
}
}).then(res => {
console.log("123" + res);
});
// 不知道为啥不清除
this.$nextTick(() => {
this.$refs.tree.setCheckedKeys([]);
});
this.value = "";
return item.replace(replaceReg, replaceString);
});
this.$message({
type: "info",
message: "已删除"
});
},
setCheckedNodes() {
this.$refs.tree.setCheckedNodes([
{
......@@ -234,33 +442,31 @@ export default {
this.ifAlert = true;
//var search;
this.search = window.getSelection().toString();
this.msg = this.msg.map(item => {
let replaceReg = new RegExp(this.search, "g"); // 匹配关键字正则
let replaceString =
'<span class="highlights-text">' + this.search + "</span>"; // 高亮替换v-html值
return item.replace(replaceReg, replaceString);
});
if (search) {
this.$message({
message: "保存成功！",
type: "success"
});
}
}
},
save() {
this.$message({
message: "保存成功！",
type: "success"
});
},
// 提交本次标注
submit() {
this.$message({
message: "保存成功！",
type: "success"
});
this.$router.replace("/completed");
},
// 放到边栏的token边栏
getTokenList() {
this.axios({
method: "post",
url: "http://127.0.0.1:9100/textAnnotation/getTokenList",
data: {
documentId: "a55a28d4a25811ea93c354e1ad87433a"
}
}).then(res => {
console.log(res.data);
});
}
},
mounted: function() {
this.getTokenList(); //需要触发的函数
}
};
</script>
......@@ -270,6 +476,11 @@ export default {
@import "@/assets/scss/mixin.scss";
.select-container {
@include container;
.sidebar {
height: 900px;
box-shadow: 0px 0px 10px #dbdbdb;
background-color: white;
}
.filter-container {
float: center;
width: 100%;
......@@ -310,4 +521,29 @@ export default {
margin-top: 15px;
margin-bottom: 10px;
}
.img-list-title {
line-height: 40px;
padding: 0 10px;
background: #409eff;
color: white;
}
.img-title-list-box {
height: 250px;
overflow: auto;
background-color: white;
//margin-top: 13px;
margin-bottom: 13px;
}
.add-file-btn-group >>> button {
margin-top: 3px;
margin-bottom: 3px;
}
.tokenList {
margin: 9px;
//margin-bottom: 9px;
}
.token {
font-size: 18px;
}
</style>
DAPlatform-front/src/components/textAnnotation/SelectedText.vue
<template>
<div class="select-container">
<el-container class="filter-container">
<el-main style="background-color: #FFFFFF">
<el-container style="margin-top: 40px" :style="{ height : height_res-40+'px'}">
<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="tokenList"
v-for="it in tokenList"
:key="it.message"
style="user-select:none; float: left;"
>
<el-tag size="small">
<a class="token" v-html="it"></a>
</el-tag>
<br />
</div>
</div>
</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>
</div>
</div>
</el-aside>
<el-main class="filter-container" style="background-color: #FFFFFF">
<div style="overflow-y:auto;height:100%;">
<div>
<ul class="list">
......@@ -11,12 +48,14 @@
</li>
</ul>
</div>
<div v-if="this.$route.query.isCheck == '1'">
<!-- 打分 -->
<!--div v-if="this.$route.query.isCheck == '1'"-->
<div>
<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-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">
......@@ -41,56 +80,98 @@ export default {
address: "那是我心中最美的“第三极”——第二次青藏科考青年说"
};
return {
textData: [
{
label: "那是我心中最美的“第三极”",
children: [
{
label: "那是我心中最美的“第三极”——第一次青藏科考青年说"
},
{
label: "那是我心中最美的“第三极”——第二次青藏科考青年说"
}
]
}
],
defaultProps: {
children: "children",
label: "label"
},
msg: [
"那是我心中最美的“第三极”——第二次青藏科考青年说<br/> \
2020-05-06 11:08 来源：新华网 编辑：矿材网<br/> \
'那是我心中最美的“第三极”——第二次青藏科考青年说<br/> \
"<span class="highlights-text">2020-05-06</span><span class="mark">(实体：时间；属性：yyyy-MM-dd)</span>" 11:08 来源：新华网 编辑：矿材网<br/> \
“看到国家自主研发的‘极目一号’浮空器从纳木错科考站升起，她宛若白鲸，越升越高，融入了星海。古老的‘第三极’与前沿的科技，在星空中融为一体，那就是我心中最美的‘第三极’风情。”中国科学院空天信息创新研究院的屈维说。<br/> \
2019年5月23日，中国科学院空天信息创新研究院研制的“极目一号”浮空器在第二次青藏高原综合科学考察研究中，在纳木错升空达到海拔7003米的高度，创造了迄今已知同类型、同量级浮空器驻空高度的世界纪录。<br/> \
第二次青藏高原综合科考从2017年8月全面启动，在之后5到10年内，大批科研工作者将对青藏高原的水、生态、人类活动等环境问题进行考察研究。我国首次青藏高原综合科学考察研究是20世纪70年代，这次综合科考研究积累了大量科学资料，为青藏高原生态保护和社会经济发展提供了科学依据。<br/> \
相对于南极和北极，人们把青藏高原称为世界“第三极”。<br/> \
中国科学家认同“第三极”的称号，除了因为青藏高原和南极、北极有表面上的相似，还因为青藏高原的“一举一动”都对地球的整体环境有着重要影响。<br/> \
“当科考车翻过山头，映入眼帘的便是海拔4700米的纳木错与远处的雪山，碧蓝的湖水倒映着树木、雪山，一相逢便割舍不下。”2018年参加工作的屈维说，能参与第二次青藏科考，能看到“第三极”的多样风情，是他的幸运。<br/> \
“当科考车翻过山头，映入眼帘的便是海拔4700米的纳木错与远处的 "<span class="highlights-text">雪山</span><span class="mark">(实体：山体；属性：岩质)</span>"，碧蓝的湖水倒映着树木、"<span class="highlights-text">雪山</span><span class="mark">(实体：山体；属性：岩质)</span>"，一相逢便割舍不下。”2018年参加工作的屈维说，能参与第二次青藏科考，能看到“第三极”的多样风情，是他的幸运。<br/> \
作为地球“第三极”的核心区,西藏有着极致的美丽。顶着身体不适,扛着各种仪器,做样方、采标本、打土钻和入户调研是科考队员户外作业最平常的事情。<br/> \
“高原上的天气极不稳定,狂风、冰雹、大雨会在同一天多次造访,我们必须趁着天气略有好转时,见缝插针,尽可能多地赶任务。一日行车数百公里都是‘家常便饭’,调研途中为了‘救出’陷入泥坑的车辆,经常折腾到灰头土脸。”36岁的西藏农牧学院副教授王向涛说。<br/> \
2019年7月,第二次青藏科考雅鲁藏布大峡谷水汽通道考察分队在墨脱县的一次“陷车”,至今让科考队员李璐含记忆深刻。当时,墨脱因为多日暴雨和泥石流,已封锁半个月之久,科考队员采集数据的当天仍在下暴雨。傍晚,车子到了一处山体坍塌严重的路段。<br/> \
"<span class="highlights-text">2019年7月</span><span class="mark">(实体：时间；属性：yyyy-MM-dd)</span>",第二次青藏科考雅鲁藏布大峡谷水汽通道考察分队在墨脱县的一次“陷车”,至今让科考队员李璐含记忆深刻。当时,墨脱因为多日暴雨和泥石流,已封锁半个月之久,科考队员采集数据的当天仍在下暴雨。傍晚,车子到了一处山体坍塌严重的路段。<br/> \
“当车子陷入泥泞的时候,我心想,今晚或许就要睡在这里了。”李璐含说,“知道我们是科考队后,前后方车辆的司机和路旁维修道路的人都帮我们推车。原本在黑暗中的车子,被车灯和探照灯照亮,使我能看清这些人的面庞,他们用不同的方言喊口号、用力推车的场景让我难忘。”<br/> \
躺在草地上观看云团变幻出各种造型;科考间隙引逗草原上东张西望的鼠兔或旱獭;科考途中和赶着牛群、羊群的牧民依靠手势交流,致以微笑……这些是科考队员在科考途中不多的乐趣。<br/> \
作为第二次青藏科考的参与人员,王向涛多次深入藏北地区考察。“有时候,我随手拍的风景照发到朋友圈,会引来朋友的羡慕。或许这是很多人眼里的‘诗和远方’,但对于我们来说,这一次次‘旅程’不是‘游山玩水’,而是科研工作者的负重前行。”王向涛感慨说。<br/> \
2019年以来,第二次青藏高原综合科学考察研究队在西藏共采集大气、水文、土壤等环境要素样品1.2万余份,采集动植物、微生物样本4.4万余份,收集经济社会发展资料超2200套,在“亚洲水塔”变化与影响及应对等方面取得突破。<br/> \
“我们在西藏进行科学考察,必须了解当地群众生产、生活需求和意愿,为保护好这里的一草一木尽一份绵薄之力。肆虐的风雪阻挡不住前进的路,选择了科考,选择了拥抱这片广袤的土地,就是青春的荣耀。”王向涛说。"
“我们在西藏进行科学考察,必须了解当地群众生产、生活需求和意愿,为保护好这里的一草一木尽一份绵薄之力。肆虐的风雪阻挡不住前进的路,选择了科考,选择了拥抱这片广袤的土地,就是青春的荣耀。”王向涛说。'
],
commentScore:false,
scoreForm:{
accuracy:'',
score:'',
} ,
formLabelWidth:'120px',
commentScore: false,
scoreForm: {
accuracy: "",
score: ""
},
formLabelWidth: "120px",
tokenList: ["2020-05-06", "2019年7月", "雪山"]
};
},
methods: {
handleNodeClick(data) {
console.log(data);
},
getArticle() {
axios.get('/textAnnotation?textid=10').then(function(response){
axios.get("/textAnnotation?textid=10").then(function(response) {
console.log(response);
})
});
},
addScore(){
if(this.scoreForm.accuracy == '' || this.scoreForm.score == '')
this.$message("请输入内容");
else if(!(/^[0-9]+$/.test(this.scoreForm.accuracy))
&& !(/^[0-9]+$/.test(this.scoreForm.accuracy))
&& !(/^((([^0][0-9]+|0)\.([0-9]{1,2}))$)|^(([1-9]+)\.([0-9]{1,2})$)/.test(this.scoreForm.score))
&& !(/^((([^0][0-9]+|0)\.([0-9]{1,2}))$)|^(([1-9]+)\.([0-9]{1,2})$)/.test(this.scoreForm.accuracy))
)
this.$message("输入非法字符");
else if(parseInt(this.scoreForm.accuracy) > 100 || parseInt(this.scoreForm.accuracy) < 0)
this.$message("准确度应在0~100范围内");
else{
this.commentScore = false;
this.$message("打分成功") ;
}
},
// 放到边栏的token边栏
getTokenList() {
this.axios({
method: "post",
url: "http://127.0.0.1:9100/textAnnotation/getTokenList",
data: {
documentId: "a55a28d4a25811ea93c354e1ad87433a"
}
}).then(res => {
console.log(res.data);
});
},
addScore() {
if (this.scoreForm.accuracy == "" || this.scoreForm.score == "")
this.$message("请输入内容");
else if (
!/^[0-9]+$/.test(this.scoreForm.accuracy) &&
!/^[0-9]+$/.test(this.scoreForm.accuracy) &&
!/^((([^0][0-9]+|0)\.([0-9]{1,2}))$)|^(([1-9]+)\.([0-9]{1,2})$)/.test(
this.scoreForm.score
) &&
!/^((([^0][0-9]+|0)\.([0-9]{1,2}))$)|^(([1-9]+)\.([0-9]{1,2})$)/.test(
this.scoreForm.accuracy
)
)
this.$message("输入非法字符");
else if (
parseInt(this.scoreForm.accuracy) > 100 ||
parseInt(this.scoreForm.accuracy) < 0
)
this.$message("准确度应在0~100范围内");
else {
this.commentScore = false;
this.$message("打分成功");
}
}
},
mounted: function() {
this.getTokenList(); //需要触发的函数
}
};
</script>
......@@ -100,9 +181,13 @@ export default {
@import "@/assets/scss/mixin.scss";
.select-container {
@include container;
.sidebar {
height: 900px;
box-shadow: 0px 0px 10px #dbdbdb;
background-color: white;
}
.filter-container {
float: center;
width: 100%;
padding: 35px 40px 50px 40px;
@include whiteBoard;
}
......@@ -123,4 +208,29 @@ export default {
text-decoration: none;
//background-color: rgb(255, 227, 132);
}
.img-list-title {
line-height: 40px;
padding: 0 10px;
background: #409eff;
color: white;
}
.img-title-list-box {
height: 250px;
overflow: auto;
background-color: white;
//margin-top: 13px;
margin-bottom: 13px;
}
.add-file-btn-group >>> button {
margin-top: 13px;
margin-bottom: 3px;
}
.tokenList {
margin: 9px;
//margin-bottom: 9px;
}
.token {
font-size: 18px;
}
</style>
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