Skip to content

D
DA-Platform
Commit 5aea11bc by 郭婉茹
Options

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

parent b4a43a43
Showing with 1128 additions and 113 deletions
DAPlatform-front/package.json
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"build": "node build/build.js" "build": "node build/build.js"
}, },
"dependencies": { "dependencies": {
"el-tree-transfer": "^2.2.9",
"element-ui": "^2.13.1", "element-ui": "^2.13.1",
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-router": "^3.0.1" "vue-router": "^3.0.1"
......
DAPlatform-front/src/App.vue
<template> <template>
<div id="app"> <div id="app">
<img src="./assets/logo.png">
<router-view/> <router-view/>
</div> </div>
</template> </template>
...@@ -18,6 +17,5 @@ export default { ...@@ -18,6 +17,5 @@ export default {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
margin-top: 60px;
} }
</style> </style>
DAPlatform-front/src/components/HelloWorld.vue
<template> <template>
<div class="hello"> <el-container>
<h1>{{ msg }}</h1> <el-header style="height: 70px;background-color: #606266"></el-header>
<h2>Essential Links</h2> <el-container style="height: 540px; border: 1px solid #eee">
<ul> <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<li> <el-menu :default-openeds="['1', '3']">
<a <el-submenu index="1">
href="https://vuejs.org" <template slot="title"><i class="el-icon-setting"></i>个人主页</template>
target="_blank" <el-menu-item-group>
> <el-menu-item index="1-3">个人信息</el-menu-item>
Core Docs </el-menu-item-group>
</a> <el-menu-item-group>
</li> <el-menu-item index="1-3">。。。</el-menu-item>
<li> </el-menu-item-group>
<a
href="https://forum.vuejs.org" </el-submenu>
target="_blank" <el-submenu index="2">
> <template slot="title"><i class="el-icon-message"></i>文本标注</template>
Forum <el-menu-item-group>
</a> <template slot="title">文本标注</template>
</li> <el-menu-item index="2-1" @click="select()">待标注</el-menu-item>
<li> <el-menu-item index="2-2" @click="tag()">已标注</el-menu-item>
<a </el-menu-item-group>
href="https://chat.vuejs.org" <el-menu-item-group title="表格标注">
target="_blank" <el-menu-item index="2-3" @click="table()">待修改</el-menu-item>
> </el-menu-item-group>
Community Chat </el-submenu>
</a> <el-submenu index="3">
</li> <template slot="title"><i class="el-icon-menu"></i>图像标注</template>
<li> <el-menu-item-group>
<a <template slot="title">分组一</template>
href="https://twitter.com/vuejs" <el-menu-item index="3-1">选项1</el-menu-item>
target="_blank" <el-menu-item index="3-2">选项2</el-menu-item>
> </el-menu-item-group>
Twitter <el-menu-item-group title="分组2">
</a> <el-menu-item index="3-3">选项3</el-menu-item>
</li> </el-menu-item-group>
<br> <el-submenu index="3-4">
<li> <template slot="title">选项4</template>
<a <el-menu-item index="3-4-1">选项4-1</el-menu-item>
href="http://vuejs-templates.github.io/webpack/" </el-submenu>
target="_blank" </el-submenu>
> </el-menu>
Docs for This Template </el-aside>
</a>
</li> <el-container>
</ul>
<h2>Ecosystem</h2> <el-main>
<ul> <el-table :data="tableData">
<li> <el-table-column prop="date" label="日期" width="140">
<a </el-table-column>
href="http://router.vuejs.org/" <el-table-column prop="name" label="标注者" width="120">
target="_blank" </el-table-column>
> <el-table-column prop="address" label="文本">
vue-router </el-table-column>
</a> <el-table-column fixed="right" label="操作" width="100">
</li> <template>
<li> <el-button @click="select1()" type="primary" size="small" round>编辑</el-button>
<a </template>
href="http://vuex.vuejs.org/" </el-table-column>
target="_blank" </el-table>
> </el-main>
vuex </el-container>
</a> </el-container><el-footer style="height: 100px; background-color: #606266"></el-footer>
</li> </el-container>
<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>
</template> </template>
<script> <script>
export default { export default {
name: 'HelloWorld', data() {
data () { const item = {
return { date: '2020-05-02',
msg: 'Welcome to Your Vue.js App', radio: 3 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> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <style>
<style scoped> .el-header {
h1, h2 { background-color: #B3C0D1;
font-weight: normal; color: #333;
} line-height: 60px;
ul { }
list-style-type: none;
padding: 0; .el-aside {
} color: #333;
li { }
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style> </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 Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld' 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) Vue.use(Router)
...@@ -10,6 +15,31 @@ export default new Router({ ...@@ -10,6 +15,31 @@ export default new Router({
path: '/', path: '/',
name: 'HelloWorld', name: 'HelloWorld',
component: 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