Skip to content

D
DA-Platform

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

Commit 5aea11bc by 郭婉茹
Options

first: 实体属性弹窗滑动未完成；字体大小未调整

parent b4a43a43
Showing with 1128 additions and 113 deletions
DAPlatform-front/package.json
......@@ -11,6 +11,7 @@
"build": "node build/build.js"
},
"dependencies": {
"el-tree-transfer": "^2.2.9",
"element-ui": "^2.13.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
......
DAPlatform-front/src/App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
......@@ -18,6 +17,5 @@ export default {
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
DAPlatform-front/src/components/HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
<el-radio-group v-model="radio">
<el-radio :label="3">备选项</el-radio>
<el-radio :label="6">备选项</el-radio>
<el-radio :label="9">备选项</el-radio>
</el-radio-group>
</div>
<el-container>
<el-header style="height: 70px;background-color: #606266"></el-header>
<el-container style="height: 540px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-setting"></i>个人主页</template>
<el-menu-item-group>
<el-menu-item index="1-3">个人信息</el-menu-item>
</el-menu-item-group>
<el-menu-item-group>
<el-menu-item index="1-3">。。。</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-message"></i>文本标注</template>
<el-menu-item-group>
<template slot="title">文本标注</template>
<el-menu-item index="2-1" @click="select()">待标注</el-menu-item>
<el-menu-item index="2-2" @click="tag()">已标注</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="表格标注">
<el-menu-item index="2-3" @click="table()">待修改</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-menu"></i>图像标注</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="标注者" width="120">
</el-table-column>
<el-table-column prop="address" label="文本">
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template>
<el-button @click="select1()" type="primary" size="small" round>编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container><el-footer style="height: 100px; background-color: #606266"></el-footer>
</el-container>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App', radio: 3
export default {
data() {
const item = {
date: '2020-05-02',
name: '小明',
address: '那是我心中最美的“第三极”——第二次青藏科考青年说'
};
return {
tableData: Array(20).fill(item)
}
},
methods:{
select(){
this.$router.replace('/')
},
tag(){
this.$router.replace('/text')
},
table(){
this.$router.replace('/table')
},
select1(){
this.$router.replace('/select')
},
tag1(){
this.$router.replace('/deleteTag')
},
}
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
DAPlatform-front/src/components/textAnnotation/AddTag.vue 0 → 100644
<template>
<el-container>
<el-header style="height: 70px;background-color: #606266"></el-header>
<el-container style="height: 540px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-setting"></i>个人主页</template>
<el-menu-item-group>
<el-menu-item index="1-3">个人信息</el-menu-item>
</el-menu-item-group>
<el-menu-item-group>
<el-menu-item index="1-3">。。。</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-message"></i>文本标注</template>
<el-menu-item-group>
<template slot="title">文本标注</template>
<el-menu-item index="2-1" @click="select()">待标注</el-menu-item>
<el-menu-item index="2-2" @click="tag()">已标注</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="表格标注">
<el-menu-item index="2-3" @click="table()">待修改</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-menu"></i>图像标注</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-main class="addTagMain">
<div>
<!--鼠标左键-->
<div>
<ul @click="openTag()">
<li v-for="it in msg" :key="it">
<div class="msg" v-html="it">{{it}}</div><br/>
</li>
</ul>
</div>
<el-col :span="6"><div class="grid-content"></div></el-col>
<el-col :span="6"><div class="grid-content"></div></el-col>
<el-col :span="6"><div class="grid-content"></div></el-col>
<el-col :span="6"><div class="grid-content">
<el-button @click="save" type="success" round>保存</el-button>
</div></el-col>
</div>
</el-main>
</el-container>
</el-container><el-footer style="height: 100px; background-color: #606266"></el-footer>
</el-container>
</template>
<script>
export default {
data() {
const item = {
date: '2020-05-02',
name: '小明',
address: '那是我心中最美的“第三极”——第二次青藏科考青年说'
};
return {
tableData: Array(20).fill(item),
msg: ['那是我心中最美的“<span class="highlights-text">第三极</span>”——第二次青藏科考青年说',
'2020-05-06 11:08 来源：新华网 编辑：矿材网',
'“看到国家自主研发的‘极目一号’浮空器从纳木错科考站升起，她宛若白鲸，越升越高，融入了星海。<span class="highlights-text">古老</span>的‘<span class="highlights-text">第三极</span>’与前沿的科技，在星空中融为一体，那就是我心中最美的‘<span class="highlights-text">第三极</span>’风情。”中国科学院空天信息创新研究院的屈维说。',
'2019年5月23日，中国科学院空天信息创新研究院研制的“极目一号”浮空器在第二次青藏高原综合科学考察研究中，在纳木错升空达到海拔7003米的高度，创造了迄今已知同类型、同量级浮空器驻空高度的世界纪录。',
'第二次青藏高原综合科考从2017年8月全面启动，在之后5到10年内，大批科研工作者将对青藏高原的水、生态、人类活动等环境问题进行考察研究。我国首次青藏高原综合科学考察研究是20世纪70年代，这次综合科考研究积累了大量科学资料，为青藏高原生态保护和社会经济发展提供了科学依据。',
'相对于南极和北极，人们把青藏高原称为世界“<span class="highlights-text">第三极</span>”。',
'中国科学家认同“<span class="highlights-text">第三极</span>”的称号，除了因为青藏高原和南极、北极有表面上的相似，还因为青藏高原的“一举一动”都对地球的整体环境有着重要影响。',
'“当科考车翻过山头，映入眼帘的便是海拔4700米的纳木错与远处的雪山，碧蓝的湖水倒映着树木、雪山，一相逢便割舍不下。”2018年参加工作的屈维说，能参与第二次青藏科考，能看到“<span class="highlights-text">第三极</span>”的多样风情，是他的幸运。',],
}
},
methods:{
save() {
this.$message({
message: '保存成功！',
type: 'success'
});
this.$router.replace('/text')
},
openTag(){
const h = this.$createElement;
this.$msgbox({
title: '标注',
message: h('p', null, [
h('el-card', null, [
h('div', { style: 'color: teal' }, '实体1'),
h('el-checkbox', null, '属性1'),
h('span', null, ' '),
h('el-checkbox', null, '属性2 '),
h('span', null, ' '),
h('el-checkbox', null, '属性3 '),
]),
h('br', null, ' '),
h('el-card', null, [
h('div', { style: 'color: teal' }, '实体2'),
h('el-checkbox', null, '属性1'),
h('span', null, ' '),
h('el-checkbox', null, '属性2 '),
h('span', null, ' '),
h('el-checkbox', null, '属性3 '),
]),
h('br', null, ' '),
,h('el-card', null, [
h('div', { style: 'color: teal' }, '实体3'),
h('el-checkbox', null, '属性1'),
h('span', null, ' '),
h('el-checkbox', null, '属性2 '),
h('span', null, ' '),
h('el-checkbox', null, '属性3 '),
h('span', null, ' '),
h('el-checkbox', null, '属性4 '),
]),
h('br', null, ' '),
h('el-card', null, [
h('div', { style: 'color: teal' }, '实体4'),
h('el-checkbox', null, '属性1'),
h('span', null, ' '),
h('el-checkbox', null, '属性2 '),
h('span', null, ' '),
h('el-checkbox', null, '属性3 '),
])
]),
showCancelButton: true,
confirmButtonText: '保存',
cancelBcanceluttonText: '还原',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = '保存中...';
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 100);
}, 1000);
} else{
this.$router.replace('/deleteTag')
done()
}
}
}).then(action => {
this.$message({
type: 'info',
message: 'action: ' + action
});
});
},
select(){
this.$router.replace('/')
},
tag(){
this.$router.replace('/text')
},
table(){
this.$router.replace('/table')
},
select1(){
this.$router.replace('/select')
},
tag1(){
this.$router.replace('/deleteTag')
},
}}
</script>
<style>
.addTagMain{
background-color: rgb(238, 241, 246);
}
.msg{
text-align:left;
font-size:24px;
}
.highlights-text {
color: #ff5134;
}
.el-row {
margin-bottom: 20px;
}
.el-col {
border-radius: 4px;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
DAPlatform-front/src/components/textAnnotation/DeleteTag.vue 0 → 100644
<template>
<el-container>
<el-header style="height: 70px;background-color: #606266"></el-header>
<el-container style="height: 540px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-setting"></i>个人主页</template>
<el-menu-item-group>
<el-menu-item index="1-3">个人信息</el-menu-item>
</el-menu-item-group>
<el-menu-item-group>
<el-menu-item index="1-3">。。。</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-message"></i>文本标注</template>
<el-menu-item-group>
<template slot="title">文本标注</template>
<el-menu-item index="2-1" @click="select()">待标注</el-menu-item>
<el-menu-item index="2-2" @click="tag()">已标注</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="表格标注">
<el-menu-item index="2-3" @click="table()">待修改</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-menu"></i>图像标注</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-main class="deleteTagMain">
<div>
<!--鼠标左键-->
<div>
<ul @click="openTag()">
<li v-for="it in msg" :key="it">
<div class="msg" v-html="it">{{it}}</div><br/>
</li>
</ul>
</div>
<el-col :span="6"><div class="grid-content"></div></el-col>
<el-col :span="6"><div class="grid-content"></div></el-col>
<el-col :span="6"><div class="grid-content"></div></el-col>
<el-col :span="6"><div class="grid-content">
<el-button @click="save" type="success" round>保存</el-button>
</div></el-col>
</div>
</el-main>
</el-container>
</el-container>
<el-footer style="height: 100px; background-color: #606266"></el-footer>
</el-container>
</template>
<script>
export default {
data() {
const item = {
date: '2020-05-02',
name: '小明',
address: '那是我心中最美的“第三极”——第二次青藏科考青年说'
};
return {
tableData: Array(20).fill(item),
msg: ['那是我心中最美的“第三极”——第二次青藏科考青年说',
'2020-05-06 11:08 来源：新华网 编辑：矿材网',
'“看到国家自主研发的‘极目一号’浮空器从纳木错科考站升起，她宛若白鲸，越升越高，融入了星海。<span class="highlights-text">古老</span>的‘第三极’与前沿的科技，在星空中融为一体，那就是我心中最美的‘第三极’风情。”中国科学院空天信息创新研究院的屈维说。',
'2019年5月23日，中国科学院空天信息创新研究院研制的“极目一号”浮空器在第二次青藏高原综合科学考察研究中，在纳木错升空达到海拔7003米的高度，创造了迄今已知同类型、同量级浮空器驻空高度的世界纪录。',
'第二次青藏高原综合科考从2017年8月全面启动，在之后5到10年内，大批科研工作者将对青藏高原的水、生态、人类活动等环境问题进行考察研究。我国首次青藏高原综合科学考察研究是20世纪70年代，这次综合科考研究积累了大量科学资料，为青藏高原生态保护和社会经济发展提供了科学依据。',
'相对于南极和北极，人们把青藏高原称为世界“第三极”。',
'中国科学家认同“第三极”的称号，除了因为青藏高原和南极、北极有表面上的相似，还因为青藏高原的“一举一动”都对地球的整体环境有着重要影响。',
'“当科考车翻过山头，映入眼帘的便是海拔4700米的纳木错与远处的雪山，碧蓝的湖水倒映着树木、雪山，一相逢便割舍不下。”2018年参加工作的屈维说，能参与第二次青藏科考，能看到“第三极”的多样风情，是他的幸运。',]
}
},
methods:{
save() {
this.$message({
message: '保存成功！',
type: 'success'
});
this.$router.replace('/text')
},
openTag(){
const h = this.$createElement;
this.$msgbox({
title: '标注',
message: h('p', null, [
h('el-card', null, [
h('div', { style: 'color: teal' }, '实体1'),
h('el-checkbox', null, '属性1'),
h('span', null, ' '),
h('el-checkbox', null, '属性2 '),
h('span', null, ' '),
h('el-checkbox', null, '属性3 '),
]),
h('br', null, ' '),
h('el-card', null, [
h('div', { style: 'color: teal' }, '实体2'),
h('el-checkbox', null, '属性1'),
h('span', null, ' '),
h('el-checkbox', null, '属性2 '),
h('span', null, ' '),
h('el-checkbox', null, '属性3 '),
]),
h('br', null, ' '),
,h('el-card', null, [
h('div', { style: 'color: teal' }, '实体3'),
h('el-checkbox', null, '属性1'),
h('span', null, ' '),
h('el-checkbox', null, '属性2 '),
h('span', null, ' '),
h('el-checkbox', null, '属性3 '),
h('span', null, ' '),
h('el-checkbox', null, '属性4 '),
]),
h('br', null, ' '),
h('el-card', null, [
h('div', { style: 'color: teal' }, '实体4'),
h('el-checkbox', null, '属性1'),
h('span', null, ' '),
h('el-checkbox', null, '属性2 '),
h('span', null, ' '),
h('el-checkbox', null, '属性3 '),
])
]),
showCancelButton: true,
confirmButtonText: '保存',
cancelButtonText: '还原',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = '保存中...';
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 100);
}, 1000);
} else {
done()
}
}
}).then(action => {
this.$message({
type: 'info',
message: 'action: ' + action
});
});
},
select(){
this.$router.replace('/')
},
tag(){
this.$router.replace('/text')
},
table(){
this.$router.replace('/table')
},
select1(){
this.$router.replace('/select')
},
tag1(){
this.$router.replace('/deleteTag')
},
}}
</script>
<style>
.deleteTagMain{
background-color: rgb(238, 241, 246);
}
.msg{
text-align:left;
font-size:24px;
}
.highlights-text {
color: #ff5134;
}
.el-row {
margin-bottom: 20px;
}
.el-col {
border-radius: 4px;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
DAPlatform-front/src/components/textAnnotation/Index.vue 0 → 100644
<template>
<el-container>
<el-header style="height: 70px;background-color: #606266"></el-header>
<el-container style="height: 540px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-setting"></i>个人主页</template>
<el-menu-item-group>
<el-menu-item index="1-3">个人信息</el-menu-item>
</el-menu-item-group>
<el-menu-item-group>
<el-menu-item index="1-3">。。。</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-message"></i>文本标注</template>
<el-menu-item-group>
<template slot="title">文本标注</template>
<el-menu-item index="2-1" @click="select()">待标注</el-menu-item>
<el-menu-item index="2-2" @click="tag()">已标注</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="表格标注">
<el-menu-item index="2-3" @click="table()">待修改</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-menu"></i>图像标注</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="标注者" width="120">
</el-table-column>
<el-table-column prop="address" label="文本">
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template>
<el-button @click="tag1()" type="primary" size="small" round>修改</el-button>
</template>
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container><el-footer style="height: 100px; background-color: #606266"></el-footer>
</el-container>
</template>
<script>
export default {
data() {
const item = {
date: '2020-05-05',
name: '小红',
address: '那是我心中最美的“第三极”——第二次青藏科考青年说'
};
return {
tableData: Array(20).fill(item)
}
},
methods:{
select(){
this.$router.replace('/')
},
tag(){
this.$router.replace('/text')
},
table(){
this.$router.replace('/table')
},
select1(){
this.$router.replace('/select')
},
tag1(){
this.$router.replace('/deleteTag')
},
}
};
</script>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
DAPlatform-front/src/components/textAnnotation/SelectText.vue 0 → 100644
<template>
<el-container>
<el-header style="height: 70px;background-color: #606266"></el-header>
<el-container style="height: 540px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-setting"></i>个人主页</template>
<el-menu-item-group>
<el-menu-item index="1-3">个人信息</el-menu-item>
</el-menu-item-group>
<el-menu-item-group>
<el-menu-item index="1-3">。。。</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-message"></i>文本标注</template>
<el-menu-item-group>
<template slot="title">文本标注</template>
<el-menu-item index="2-1" @click="select()">待标注</el-menu-item>
<el-menu-item index="2-2" @click="tag()">已标注</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="表格标注">
<el-menu-item index="2-3" @click="table()">待修改</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-menu"></i>图像标注</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-main class="selectMain">
<div id="ask">
<!--vue不能控制body和html的标签-->
<!--鼠标左键-->
<div @mouseup="highlight()">
<ul class="list">
<li v-for="it in msg" :key="it">
<div class="msg" v-html="it">{{it}}</div><br/>
</li>
</ul>
</div>
<el-col :span="6"><div class="grid-content"></div></el-col>
<el-col :span="6"><div class="grid-content"></div></el-col>
<el-col :span="6"><div class="grid-content"></div></el-col>
<el-col :span="6"><div class="grid-content">
<el-button @click="save" type="success" round>保存</el-button>
</div></el-col>
</div>
</el-main>
</el-container>
</el-container><el-footer style="height: 100px; background-color: #606266"></el-footer>
</el-container>
</template>
<script>
export default {
data() {
const item = {
date: '2020-05-02',
name: '小明',
address: '那是我心中最美的“第三极”——第二次青藏科考青年说'
};
return {
tableData: Array(20).fill(item),
msg: ['那是我心中最美的“第三极”——第二次青藏科考青年说',
'2020-05-06 11:08 来源：新华网 编辑：矿材网',
'“看到国家自主研发的‘极目一号’浮空器从纳木错科考站升起，她宛若白鲸，越升越高，融入了星海。古老的‘第三极’与前沿的科技，在星空中融为一体，那就是我心中最美的‘第三极’风情。”中国科学院空天信息创新研究院的屈维说。',
'2019年5月23日，中国科学院空天信息创新研究院研制的“极目一号”浮空器在第二次青藏高原综合科学考察研究中，在纳木错升空达到海拔7003米的高度，创造了迄今已知同类型、同量级浮空器驻空高度的世界纪录。',
'第二次青藏高原综合科考从2017年8月全面启动，在之后5到10年内，大批科研工作者将对青藏高原的水、生态、人类活动等环境问题进行考察研究。我国首次青藏高原综合科学考察研究是20世纪70年代，这次综合科考研究积累了大量科学资料，为青藏高原生态保护和社会经济发展提供了科学依据。',
'相对于南极和北极，人们把青藏高原称为世界“第三极”。',
'中国科学家认同“第三极”的称号，除了因为青藏高原和南极、北极有表面上的相似，还因为青藏高原的“一举一动”都对地球的整体环境有着重要影响。',
'“当科考车翻过山头，映入眼帘的便是海拔4700米的纳木错与远处的雪山，碧蓝的湖水倒映着树木、雪山，一相逢便割舍不下。”2018年参加工作的屈维说，能参与第二次青藏科考，能看到“第三极”的多样风情，是他的幸运。',]
}
},
methods:{
highlight () {
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'
});
this.$router.replace('/tag')
},
select(){
this.$router.replace('/')
},
tag(){
this.$router.replace('/text')
},
table(){
this.$router.replace('/table')
},
select1(){
this.$router.replace('/select')
},
tag1(){
this.$router.replace('/deleteTag')
},
}
};
</script>
<style>
.selectMain{
background-color: rgb(238, 241, 246);
}
.msg{
text-align:left;
font-size:24px;
}
.highlights-text {
color: #ff5134;
}
.el-row {
margin-bottom: 20px;
}
.el-col {
border-radius: 4px;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
DAPlatform-front/src/components/textAnnotation/Table.vue 0 → 100644
<template>
<el-container>
<el-header style="height: 70px;background-color: #606266"></el-header>
<el-container style="height: 540px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-setting"></i>个人主页</template>
<el-menu-item-group>
<el-menu-item index="1-3">个人信息</el-menu-item>
</el-menu-item-group>
<el-menu-item-group>
<el-menu-item index="1-3">。。。</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-message"></i>文本标注</template>
<el-menu-item-group>
<template slot="title">文本标注</template>
<el-menu-item index="2-1" @click="select()">待标注</el-menu-item>
<el-menu-item index="2-2" @click="tag()">已标注</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="表格标注">
<el-menu-item index="2-3" @click="table()">待修改</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-menu"></i>图像标注</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-main class="tableMain">
<div>
<!--鼠标左键-->
<div>
<ul @click="openTag()">
<el-table
:data="tableData1"
border
style="width: 100%">
<el-table-column
prop="a"
label="列1"
width="150">
</el-table-column>
<el-table-column
prop="b"
label="列2"
width="150">
</el-table-column>
<el-table-column
prop="c"
label="列3"
width="150">
</el-table-column>
<el-table-column
prop="d"
label="列4"
width="150">
</el-table-column>
<el-table-column
prop="e"
label="列5">
</el-table-column>
</el-table>
<!--li v-for="it in msg" :key="it">
<div v-html="it">{{it}}</div>
</li-->
</ul>
</div>
<el-col :span="6"><div class="grid-content"></div></el-col>
<el-col :span="6"><div class="grid-content"></div></el-col>
<el-col :span="6"><div class="grid-content"></div></el-col>
<el-col :span="6"><div class="grid-content">
<el-button @click="save" type="success" round>保存</el-button>
</div></el-col>
</div>
</el-main>
</el-container>
</el-container><el-footer style="height: 100px; background-color: #606266"></el-footer>
</el-container>
</template>
<script>
export default {
data() {
const item = {
date: '2020-05-02',
name: '小明',
address: '那是我心中最美的“第三极”——第二次青藏科考青年说'
};
return {
tableData: Array(20).fill(item),
tableData1: [{
a:'fqw',
b:'271',
c:'13r3',
d:'2456',
e:'dv',
},
{
a:'fqw',
b:'271',
c:'13r3',
d:'2456',
e:'dv',
},{
a:'fqw',
b:'271',
c:'13r3',
d:'2456',
e:'dv',
},{
a:'fqw',
b:'271',
c:'13r3',
d:'2456',
e:'dv',
},{
a:'fqw',
b:'271',
c:'13r3',
d:'2456',
e:'dv',
}
],
msg: [' 123 | 291 | 934 | 234 | 291 | 934 | 234 | 291 | 934 | 234 | 291 | 934 | 634 | <span class="highlights-text">271</span> | 563 | 634 | <span class="highlights-text">271</span> | 823 | 201 ',
' 323 | 291 | 934 | 234 | 291 | 934 | 234 | 291 | 934 | 234 | 291 | 563 | 634 | <span class="highlights-text">271</span> | 434 | <span class="highlights-text">734</span> | 531 | 634 | 284 ',
' 563 | 634 | <span class="highlights-text">271</span> | 563 | 634 | <span class="highlights-text">271</span> | 563 | 634 | <span class="highlights-text">271</span> | 563 | 634 | <span class="highlights-text">271</span> | 173 | <span class="highlights-text">734</span> | 531 | 634 | 284 | 201 | <span class="highlights-text">834</span> ',
' 173 | <span class="highlights-text">734</span> | 531 | 634 | <span class="highlights-text">734</span> | 531 | 173 | <span class="highlights-text">734</span> | 531 | 173 | <span class="highlights-text">734</span> | 531 | 823 | 284 | 201 | <span class="highlights-text">834</span> | 284 | 201 | <span class="highlights-text">834</span> ',
' 823 | 284 | 201 | <span class="highlights-text">834</span> | 284 | 201 | <span class="highlights-text">834</span> | 284 | 201 | <span class="highlights-text">834</span> | 284 | 201 | <span class="highlights-text">834</span> | 284 | 201 | <span class="highlights-text">834</span> | 284 | 201 | <span class="highlights-text">834</span> ',]
}
},
methods:{
save() {
this.$message({
message: '保存成功！',
type: 'success'
});
this.$router.replace('/text')
},
openTag(){
const h = this.$createElement;
this.$msgbox({
title: '标注',
message: h('p', null, [
h('el-card', null, [
h('div', { style: 'color: teal' }, '实体1'),
h('el-checkbox', null, '属性1'),
h('span', null, ' '),
h('el-checkbox', null, '属性2 '),
h('span', null, ' '),
h('el-checkbox', null, '属性3 '),
]),
h('br', null, ' '),
h('el-card', null, [
h('div', { style: 'color: teal' }, '实体2'),
h('el-checkbox', null, '属性1'),
h('span', null, ' '),
h('el-checkbox', null, '属性2 '),
h('span', null, ' '),
h('el-checkbox', null, '属性3 '),
]),
h('br', null, ' '),
,h('el-card', null, [
h('div', { style: 'color: teal' }, '实体3'),
h('el-checkbox', null, '属性1'),
h('span', null, ' '),
h('el-checkbox', null, '属性2 '),
h('span', null, ' '),
h('el-checkbox', null, '属性3 '),
h('span', null, ' '),
h('el-checkbox', null, '属性4 '),
]),
h('br', null, ' '),
h('el-card', null, [
h('div', { style: 'color: teal' }, '实体4'),
h('el-checkbox', null, '属性1'),
h('span', null, ' '),
h('el-checkbox', null, '属性2 '),
h('span', null, ' '),
h('el-checkbox', null, '属性3 '),
])
]),
showCancelButton: true,
confirmButtonText: '保存',
cancelBcanceluttonText: '还原',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = '保存中...';
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 100);
}, 1000);
} else{
done()
}
}
}).then(action => {
this.$message({
type: 'info',
message: 'action: ' + action
});
});
},
select(){
this.$router.replace('/')
},
tag(){
this.$router.replace('/text')
},
table(){
this.$router.replace('/table')
},
select1(){
this.$router.replace('/select')
},
tag1(){
this.$router.replace('/deleteTag')
},
}}
</script>
<style>
.tableMain{
background-color: rgb(238, 241, 246);
}
.highlights-text {
color: #ff5134;
}
.el-row {
margin-bottom: 20px;
}
.el-col {
border-radius: 4px;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
DAPlatform-front/src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import TextIndex from '@/components/textAnnotation/Index'
import SelectText from '@/components/textAnnotation/SelectText'
import AddTag from '@/components/textAnnotation/AddTag'
import DeleteTag from '@/components/textAnnotation/DeleteTag'
import Table from '@/components/textAnnotation/Table'
Vue.use(Router)
......@@ -10,6 +15,31 @@ export default new Router({
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
},
{
path: '/text',
name: 'TextIndex',
component: TextIndex
},
{
path: '/select',
name: 'SelectText',
component: SelectText
},
{
path: '/tag',
name: 'tag',
component: AddTag
},
{
path: '/deleteTag',
name: 'deleteTag',
component: DeleteTag
},
{
path: '/table',
name: 'table',
component: Table
},
]
})
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