Skip to content

D
DA-Platform

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

Commit 1bbb2e17 by 郭婉茹
Options

文本

parent 9d6ecab2
Showing with 131 additions and 304 deletions
DAPlatform-front/src/components/textAnnotation/SelectText.vue
......@@ -7,7 +7,7 @@
<!-- <div @mouseup="highlight()">-->
<ul class="list">
<li v-for="it in msg" :key="it.message">
<div class="msg" v-html="it">{{it}}</div>
<div class="msg" v-html="it"></div>
<br />
</li>
</ul>
......@@ -24,23 +24,25 @@
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
:value="item.label"
></el-option>
</el-select>
<el-button type="primary">新建</el-button>
<el-button type="primary" @click="handleOption">新建</el-button>
<div style="margin-top: 10px;margin-bottom: 10px">
<span>基本信息：名称：可爱的滑坡；经度：null；纬度：null；</span>
<!--span>基本信息：名称：可爱的滑坡；经度：null；纬度：null；</span-->
</div>
<el-tree
:data="data"
:props="defaultProps"
accordion
@node-click="handleNodeClick"
: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="closeAddTag">确定</el-button>
<el-button type="primary" style="margin-top: 30px" @click="handleCheckChange">确定</el-button>
</el-dialog>
<!-- 弹窗-->
</div>
......@@ -58,7 +60,7 @@ export default {
address: "那是我心中最美的“第三极”——第二次青藏科考青年说"
};
return {
data: [
treedata: [
{
label: "一级 1",
children: [
......@@ -122,7 +124,7 @@ export default {
count: 1,
tableData: Array(20).fill(item),
msg: [
'那是我心中最美的“第三极”——第二次青藏科考青年说<br/> \
"那是我心中最美的“第三极”——第二次青藏科考青年说<br/> \
2020-05-06 11:08 来源：新华网 编辑：矿材网<br/> \
“看到国家自主研发的‘极目一号’浮空器从纳木错科考站升起，她宛若白鲸，越升越高，融入了星海。古老的‘第三极’与前沿的科技，在星空中融为一体，那就是我心中最美的‘第三极’风情。”中国科学院空天信息创新研究院的屈维说。<br/> \
2019年5月23日，中国科学院空天信息创新研究院研制的“极目一号”浮空器在第二次青藏高原综合科学考察研究中，在纳木错升空达到海拔7003米的高度，创造了迄今已知同类型、同量级浮空器驻空高度的世界纪录。<br/> \
......@@ -137,7 +139,7 @@ export default {
躺在草地上观看云团变幻出各种造型;科考间隙引逗草原上东张西望的鼠兔或旱獭;科考途中和赶着牛群、羊群的牧民依靠手势交流,致以微笑……这些是科考队员在科考途中不多的乐趣。<br/> \
作为第二次青藏科考的参与人员,王向涛多次深入藏北地区考察。“有时候,我随手拍的风景照发到朋友圈,会引来朋友的羡慕。或许这是很多人眼里的‘诗和远方’,但对于我们来说,这一次次‘旅程’不是‘游山玩水’,而是科研工作者的负重前行。”王向涛感慨说。<br/> \
2019年以来,第二次青藏高原综合科学考察研究队在西藏共采集大气、水文、土壤等环境要素样品1.2万余份,采集动植物、微生物样本4.4万余份,收集经济社会发展资料超2200套,在“亚洲水塔”变化与影响及应对等方面取得突破。<br/> \
“我们在西藏进行科学考察,必须了解当地群众生产、生活需求和意愿,为保护好这里的一草一木尽一份绵薄之力。肆虐的风雪阻挡不住前进的路,选择了科考,选择了拥抱这片广袤的土地,就是青春的荣耀。”王向涛说。',
“我们在西藏进行科学考察,必须了解当地群众生产、生活需求和意愿,为保护好这里的一草一木尽一份绵薄之力。肆虐的风雪阻挡不住前进的路,选择了科考,选择了拥抱这片广袤的土地,就是青春的荣耀。”王向涛说。"
],
ifAlert: false,
options: [
......@@ -162,60 +164,101 @@ export default {
label: "5.最后一个滑坡"
}
],
value: ""
value: "",
search: ""
};
},
methods: {
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
},
handleNodeClick(data) {
console.log(data);
},
toTextUndo: function() {
this.$router.push("/");
},
toTextEnd: function() {
this.$router.push("/");
},
toTextOther: function() {
this.$router.push("/");
handleOption() {
console.log(this.value);
if (this.value) {
this.$message({
message: "创建成功！",
type: "success"
});
}
},
closeAddTag() {
handleCheckChange() {
console.log(this.$refs.tree.getCheckedNodes());
this.ifAlert = 0;
},
highlight() {
this.ifAlert = true;
var search;
if (window.getSelection) {
search = window.getSelection().toString();
}else {
search = document.selection.createRange().search;
}
let res = this.$refs.tree.getCheckedNodes();
let arr = [];
res.forEach(item => {
arr.push(item.label);
});
console.log("111" + arr);
this.msg = this.msg.map(item => {
let replaceReg = new RegExp(search, "g"); // 匹配关键字正则
let replaceReg = new RegExp(this.search, "g"); // 匹配关键字正则
let replaceString =
'<span class="highlights-text">' + search + '</span>'; // 高亮替换v-html值
'<span class="highlights-text">' +
this.search +
"</span>" +
'<span class="mark">' +
//'<el-tag size="mini" closable>' +
"(实体：" +
this.value +
"；属性：" +
arr +
")" +
//"</el-tag>" +
"</span>"; // 高亮替换v-html值
return item.replace(replaceReg, replaceString);
});
if(search){
this.$message({
message: '保存成功！',
type: 'success'
// ？
this.$nextTick(() => {
this.$refs.tree.setCheckedKeys([]);
})
this.value = "";
this.$message({
message: "保存成功！",
type: "success"
});
},
setCheckedNodes() {
this.$refs.tree.setCheckedNodes([
{
id: 5,
label: "二级 2-1"
},
{
id: 9,
label: "三级 1-1-1"
}
]);
},
highlight() {
if (window.getSelection().toString() != "") {
//console.log("1111"+window.getSelection().toString());
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'
});
message: "保存成功！",
type: "success"
});
},
submit() {
this.$message({
message: '保存成功！',
type: 'success'
});
message: "保存成功！",
type: "success"
});
this.$router.replace("/completed");
}
}
......@@ -236,12 +279,19 @@ export default {
}
.msg {
text-align: left;
font-size: 18px;
font-size: 20px;
line-height: 30px;
}
.highlights-text {
//color: #ff5134;
background-color: rgb(255,255,0);
color: #ff5134;
text-decoration: underline;
//background-color: rgb(255, 255, 0);
}
.mark {
font-size: 14px;
color: rgb(128, 138, 135);
text-decoration: none;
//background-color: rgb(255, 227, 132);
}
.addTag {
width: 30%;
......
DAPlatform-front/src/components/textAnnotation/SelectedText.vue
......@@ -3,61 +3,15 @@
<el-container class="filter-container">
<el-main style="background-color: #FFFFFF">
<div style="overflow-y:auto;height:100%;">
<span id="demo1">实体： 属性：</span>
<span id="demo2">实体：属性：</span>
<div @mouseup="highlight()">
<!-- <div @mouseup="highlight()">-->
<div>
<ul class="list">
<li v-for="it in msg" :key="it.message">
<div class="msg" v-html="it">{{it}}</div>
<div class="msg" v-html="it"></div>
<br />
</li>
</ul>
</div>
<div>
<el-button type="primary" @click="save()">保存</el-button>
<el-button type="primary" @click="commentScore = true">打分</el-button>
<el-button type="primary" @click="submit()">提交</el-button>
</div>
<!-- 这部分是打分弹窗-->
<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 type="primary" @click="addScore()">确认</el-button>
</el-form>
</el-dialog>
<!-- 弹窗-->
<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.value"
></el-option>
</el-select>
<el-button type="primary">新建</el-button>
<div style="margin-top: 10px;margin-bottom: 10px">
<span>基本信息：名称：可爱的滑坡；经度：null；纬度：null；</span>
</div>
<el-tree
:data="data"
:props="defaultProps"
accordion
@node-click="handleNodeClick"
show-checkbox
></el-tree>
</div>
<div style="width: 100%;height: 5px"></div>
<el-button type="primary" style="margin-top: 30px" @click="closeAddTag">确定</el-button>
</el-dialog>
<!-- 弹窗-->
<div></div>
</div>
</el-main>
</el-container>
......@@ -73,176 +27,33 @@ export default {
address: "那是我心中最美的“第三极”——第二次青藏科考青年说"
};
return {
data: [
{
label: "一级 1",
children: [
{
label: "二级 1-1",
children: [
{
label: "三级 1-1-1"
}
]
}
]
},
{
label: "一级 2",
children: [
{
label: "二级 2-1",
children: [
{
label: "三级 2-1-1"
}
]
},
{
label: "二级 2-2",
children: [
{
label: "三级 2-2-1"
}
]
}
]
},
{
label: "一级 3",
children: [
{
label: "二级 3-1",
children: [
{
label: "三级 3-1-1"
}
]
},
{
label: "二级 3-2",
children: [
{
label: "三级 3-2-1"
}
]
}
]
}
],
defaultProps: {
children: "children",
label: "label"
},
count: 1,
tableData: Array(20).fill(item),
msg: [
'那是我心中最美的“<span class="highlights-text1">第三极</span>”——第二次青藏科考青年说<br/> \
<span class="highlights-text2">2020-05-06 11:08</span> 来源：新华网 编辑：矿材网<br/> \
<span class="highlights-text3">“看到国家自主研发的‘极目一号’浮空器从纳木错科考站升起，她宛若白鲸，越升越高，融入了星海。古老的‘</span><span class="highlights-text1">第三极</span><span class="highlights-text3">’与前沿的科技，在星空中融为一体，那就是我心中最美的‘</span><span class="highlights-text1">第三极</span><span class="highlights-text3">’风情。”</span>中国科学院空天信息创新研究院的屈维说。<br/> \
<span class="highlights-text2">2019年5月23日</span>，中国科学院空天信息创新研究院研制的“极目一号”浮空器在第二次青藏高原综合科学考察研究中，在纳木错升空达到海拔7003米的高度，创造了迄今已知同类型、同量级浮空器驻空高度的世界纪录。<br/> \
第二次青藏高原综合科考从 <span class="highlights-text2">2017年8月</span>全面启动，在之后5到10年内，大批科研工作者将对青藏高原的水、生态、人类活动等环境问题进行考察研究。我国首次青藏高原综合科学考察研究是20世纪70年代，这次综合科考研究积累了大量科学资料，为青藏高原生态保护和社会经济发展提供了科学依据。<br/> \
相对于南极和北极，人们把青藏高原称为世界“<span class="highlights-text1">第三极</span>”。<br/>中国科学家认同“<span class="highlights-text1">第三极</span>”的称号，除了因为青藏高原和南极、北极有表面上的相似，还因为青藏高原的“一举一动”都对地球的整体环境有着重要影响。<br/> \
“当科考车翻过山头，映入眼帘的便是海拔4700米的纳木错与远处的雪山，碧蓝的湖水倒映着树木、雪山，一相逢便割舍不下。”2018年参加工作的屈维说，能参与第二次青藏科考，能看到“<span class="highlights-text1">第三极</span>”的多样风情，是他的幸运。<br/> \
作为地球“<span class="highlights-text1">第三极</span>”的核心区,西藏有着极致的美丽。顶着身体不适,扛着各种仪器,做样方、采标本、打土钻和入户调研是科考队员户外作业最平常的事情。<br/> \
"那是我心中最美的“第三极”——第二次青藏科考青年说<br/> \
2020-05-06 11:08 来源：新华网 编辑：矿材网<br/> \
“看到国家自主研发的‘极目一号’浮空器从纳木错科考站升起，她宛若白鲸，越升越高，融入了星海。古老的‘第三极’与前沿的科技，在星空中融为一体，那就是我心中最美的‘第三极’风情。”中国科学院空天信息创新研究院的屈维说。<br/> \
2019年5月23日，中国科学院空天信息创新研究院研制的“极目一号”浮空器在第二次青藏高原综合科学考察研究中，在纳木错升空达到海拔7003米的高度，创造了迄今已知同类型、同量级浮空器驻空高度的世界纪录。<br/> \
第二次青藏高原综合科考从2017年8月全面启动，在之后5到10年内，大批科研工作者将对青藏高原的水、生态、人类活动等环境问题进行考察研究。我国首次青藏高原综合科学考察研究是20世纪70年代，这次综合科考研究积累了大量科学资料，为青藏高原生态保护和社会经济发展提供了科学依据。<br/> \
相对于南极和北极，人们把青藏高原称为世界“第三极”。<br/> \
中国科学家认同“第三极”的称号，除了因为青藏高原和南极、北极有表面上的相似，还因为青藏高原的“一举一动”都对地球的整体环境有着重要影响。<br/> \
“当科考车翻过山头，映入眼帘的便是海拔4700米的纳木错与远处的雪山，碧蓝的湖水倒映着树木、雪山，一相逢便割舍不下。”2018年参加工作的屈维说，能参与第二次青藏科考，能看到“第三极”的多样风情，是他的幸运。<br/> \
作为地球“第三极”的核心区,西藏有着极致的美丽。顶着身体不适,扛着各种仪器,做样方、采标本、打土钻和入户调研是科考队员户外作业最平常的事情。<br/> \
“高原上的天气极不稳定,狂风、冰雹、大雨会在同一天多次造访,我们必须趁着天气略有好转时,见缝插针,尽可能多地赶任务。一日行车数百公里都是‘家常便饭’,调研途中为了‘救出’陷入泥坑的车辆,经常折腾到灰头土脸。”36岁的西藏农牧学院副教授王向涛说。<br/> \
<span class="highlights-text2">2019年7月</span>,第二次青藏科考雅鲁藏布大峡谷水汽通道考察分队在墨脱县的一次“陷车”,至今让科考队员李璐含记忆深刻。当时,墨脱因为多日暴雨和泥石流,已封锁半个月之久,科考队员采集数据的当天仍在下暴雨。傍晚,车子到了一处山体坍塌严重的路段。<br/> \
2019年7月,第二次青藏科考雅鲁藏布大峡谷水汽通道考察分队在墨脱县的一次“陷车”,至今让科考队员李璐含记忆深刻。当时,墨脱因为多日暴雨和泥石流,已封锁半个月之久,科考队员采集数据的当天仍在下暴雨。傍晚,车子到了一处山体坍塌严重的路段。<br/> \
“当车子陷入泥泞的时候,我心想,今晚或许就要睡在这里了。”李璐含说,“知道我们是科考队后,前后方车辆的司机和路旁维修道路的人都帮我们推车。原本在黑暗中的车子,被车灯和探照灯照亮,使我能看清这些人的面庞,他们用不同的方言喊口号、用力推车的场景让我难忘。”<br/> \
躺在草地上观看云团变幻出各种造型;科考间隙引逗草原上东张西望的鼠兔或旱獭;科考途中和赶着牛群、羊群的牧民依靠手势交流,致以微笑……这些是科考队员在科考途中不多的乐趣。<br/> \
作为第二次青藏科考的参与人员,王向涛多次深入藏北地区考察。“有时候,我随手拍的风景照发到朋友圈,会引来朋友的羡慕。或许这是很多人眼里的‘诗和远方’,但对于我们来说,这一次次‘旅程’不是‘游山玩水’,而是科研工作者的负重前行。”王向涛感慨说。<br/> \
2019年以来,第二次青藏高原综合科学考察研究队在西藏共采集大气、水文、土壤等环境要素样品1.2万余份,采集动植物、微生物样本4.4万余份,收集经济社会发展资料超2200套,在“亚洲水塔”变化与影响及应对等方面取得突破。<br/> \
“我们在西藏进行科学考察,必须了解当地群众生产、生活需求和意愿,为保护好这里的一草一木尽一份绵薄之力。肆虐的风雪阻挡不住前进的路,选择了科考,选择了拥抱这片广袤的土地,就是青春的荣耀。”王向涛说。',
“我们在西藏进行科学考察,必须了解当地群众生产、生活需求和意愿,为保护好这里的一草一木尽一份绵薄之力。肆虐的风雪阻挡不住前进的路,选择了科考,选择了拥抱这片广袤的土地,就是青春的荣耀。”王向涛说。"
],
ifAlert: false,
options: [
{
value: "选项1",
label: "1.可爱的滑坡"
},
{
value: "选项2",
label: "2.不可爱的滑坡"
},
{
value: "选项3",
label: "3.奇怪的滑坡"
},
{
value: "选项4",
label: "4.平凡的滑坡"
},
{
value: "选项5",
label: "5.最后一个滑坡"
}
],
value: "",
commentScore:false,
scoreForm:{
accuracy:'',
score:'',
} ,
formLabelWidth:'120px',
};
},
methods: {
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
},
handleNodeClick(data) {
console.log(data);
},
toTextUndo: function() {
this.$router.push("/");
},
toTextEnd: function() {
this.$router.push("/");
getArticle() {
axios.get('/textAnnotation?textid=10').then(function(response){
console.log(response);
})
},
toTextOther: function() {
this.$router.push("/");
},
closeAddTag() {
this.ifAlert = 0;
},
highlight() {
this.ifAlert = true;
const search = window.getSelection().toString();
this.msg = this.msg.map(item => {
let replaceReg = new RegExp(search, "g"); // 匹配关键字正则
let replaceString =
'<span class="highlights-text">' + search + '</span>'; // 高亮替换v-html值
return item.replace(replaceReg, replaceString);
});
},
save() {
this.$message({
message: '保存成功！',
type: 'success'
});
},
submit() {
this.$message({
message: '保存成功！',
type: 'success'
});
this.$router.replace("/completed");
},
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("打分成功") ;
}
}
}
};
</script>
......@@ -261,52 +72,18 @@ export default {
}
.msg {
text-align: left;
font-size: 18px;
font-size: 20px;
line-height: 30px;
}
.highlights-text1 {
//color: #ff5134;
background-color: rgb(255,255,0);
}
.highlights-text2 {
//color: #ff5134;
background-color: rgb(50,205,50);
}
.highlights-text3 {
//color: #ff5134;
background-color: #9933cc;
}
.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;
.highlights-text {
color: #ff5134;
text-decoration: underline;
//background-color: rgb(255, 255, 0);
}
.addTagTitle {
margin-top: 15px;
margin-bottom: 10px;
.mark {
font-size: 14px;
color: rgb(128, 138, 135);
text-decoration: none;
//background-color: rgb(255, 227, 132);
}
#demo1 {
width: 140px;
height: 20px;
background-color: rgba(255,255,0,0.47);
position: absolute;
left: 320px;
top: 150px;
}
#demo2 {
width: 140px;
height: 20px;
background-color: rgb(50,205,50);
position: absolute;
left: 250px;
top: 180px;
}
</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