Skip to content

D
DA-Platform

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

Commit 0edaf799 by zxy
Options

改了整体界面样式，弹窗样式

parent c2a298e5
Showing with 417 additions and 196 deletions
DAPlatform-front/src/App.vue
......@@ -17,5 +17,12 @@ export default {
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 0;height: 100%;
}
html,body,#app{
height: 100%;
width: 100%;
margin: 0;
}
</style>
DAPlatform-front/src/components/HelloWorld.vue
<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-header style="border-bottom:1px solid #dcdcdc;height: 10%;background-color: #ffffff"></el-header>
<el-container style="height:100%;border: 1px solid #ffffff">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1','2', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-setting"></i>个人主页</template>
<el-menu-item-group>
<el-menu-item index="1-1">个人信息</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<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 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">待标注</el-menu-item>
<el-menu-item index="3-2">已标注</el-menu-item>
<el-menu-item index="3-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 style="height:100%;">
<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>
<div style="overflow-y:auto;height:100%;">
<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>
</div>
</el-main>
</el-container>
</el-container><el-footer style="height: 100px; background-color: #606266"></el-footer>
</el-container>
<!-- <el-footer style="height: 100px; background-color: #606266"></el-footer>-->
</el-container>
</template>
......@@ -103,8 +106,18 @@
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
.el-container{
height: 90%;
}
.el-main{
/*height: 100%;*/
padding: 0 0 0 20px;
}
.el-menu-item-group__title{
padding: 0;
}
</style>
DAPlatform-front/src/components/textAnnotation/SelectText.vue
<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-header style="border-bottom:1px solid #dcdcdc;height: 10%;background-color: #ffffff"></el-header>
<el-container style="height:100%;border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1','2','3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-setting"></i>个人主页</template>
<el-menu-item-group>
<el-menu-item index="1-1" @click="toUserInfo()">个人信息</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="toTextUndo()">待标注</el-menu-item>
<el-menu-item index="2-2" @click="toTextEnd()">已标注</el-menu-item>
<el-menu-item index="2-3" @click="toTextOther()">待修改</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">待标注</el-menu-item>
<el-menu-item index="3-2">已标注</el-menu-item>
<el-menu-item index="3-2">待修改</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container style="height:100%;">
<el-main>
<div style="overflow-y:auto;height:100%;">
<div @mouseup="highlight()">
<!-- <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-dialog title="请标注" :visible.sync="ifAlert">
<div style="overflow: auto;height: 50vh">
<!-- <div class="addTagTitle">选择标注对象</div>-->
<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>
<div class="addTagTitle">实体1</div>
<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>
<div class="addTagTitle">实体2</div>
<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>
<div class="addTagTitle">实体3</div>
<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>
<div class="addTagTitle">实体4</div>
<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>
<div class="addTagTitle">实体1</div>
<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>
<div class="addTagTitle">实体2</div>
<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>
<div class="addTagTitle">实体3</div>
<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>
<div class="addTagTitle">实体4</div>
<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>
</div>
<div style="width: 100%;height: 5px"></div>
<el-button type="primary" style="margin-top: 30px" @click="closeAddTag">确定</el-button>
</el-dialog>
<!-- 弹窗-->
</div>
</el-main>
</el-container>
</el-container>
<!-- <el-footer style="height: 100px; background-color: #606266"></el-footer>-->
</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年参加工作的屈维说，能参与第二次青藏科考，能看到“第三极”的多样风情，是他的幸运。',]
}
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年参加工作的屈维说，能参与第二次青藏科考，能看到“第三极”的多样风情，是他的幸运。', '那是我心中最美的“第三极”——第二次青藏科考青年说',
'2020-05-06 11:08 来源：新华网 编辑：矿材网',
'“看到国家自主研发的‘极目一号’浮空器从纳木错科考站升起，她宛若白鲸，越升越高，融入了星海。古老的‘第三极’与前沿的科技，在星空中融为一体，那就是我心中最美的‘第三极’风情。”中国科学院空天信息创新研究院的屈维说。',
'2019年5月23日，中国科学院空天信息创新研究院研制的“极目一号”浮空器在第二次青藏高原综合科学考察研究中，在纳木错升空达到海拔7003米的高度，创造了迄今已知同类型、同量级浮空器驻空高度的世界纪录。',
'第二次青藏高原综合科考从2017年8月全面启动，在之后5到10年内，大批科研工作者将对青藏高原的水、生态、人类活动等环境问题进行考察研究。我国首次青藏高原综合科学考察研究是20世纪70年代，这次综合科考研究积累了大量科学资料，为青藏高原生态保护和社会经济发展提供了科学依据。',
'相对于南极和北极，人们把青藏高原称为世界“第三极”。',
'中国科学家认同“第三极”的称号，除了因为青藏高原和南极、北极有表面上的相似，还因为青藏高原的“一举一动”都对地球的整体环境有着重要影响。',
'“当科考车翻过山头，映入眼帘的便是海拔4700米的纳木错与远处的雪山，碧蓝的湖水倒映着树木、雪山，一相逢便割舍不下。”2018年参加工作的屈维说，能参与第二次青藏科考，能看到“第三极”的多样风情，是他的幸运。'],
ifAlert: false,
options: [{
value: '选项1',
label: '1.可爱的滑坡'
}, {
value: '选项2',
label: '2.不可爱的滑坡'
}, {
value: '选项3',
label: '3.奇怪的滑坡'
}, {
value: '选项4',
label: '4.平凡的滑坡'
}, {
value: '选项5',
label: '5.最后一个滑坡'
}],
value: ''
}
},
methods: {
openTag: function () {
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)
}, 300)
} else {
this.$router.replace('/deleteTag')
done()
}
}
}).then(action => {
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)
})
this.$message({
type: 'info',
message: 'action: ' + action
})
})
},
toTextUndo: function () {
this.$router.push('/')
},
methods:{
highlight () {
toTextEnd: function () {
this.$router.push('/')
},
toTextOther: function () {
this.$router.push('/')
},
closeAddTag () {
this.ifAlert = 0
},
highlight: function () {
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)
})
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')
},
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;
.selectMain{
background-color: rgb(238, 241, 246);
}
.el-row {
margin-bottom: 20px;
.msg{
text-align:left;
font-size:16px;
line-height: 30px;
}
.el-col {
border-radius: 4px;
.highlights-text {
color: #ff5134;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
.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;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
.addTagTitle{
margin-top: 15px;
margin-bottom: 10px;
}
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
.el-container{
height: 90%;
}
.el-main{
/*height: 100%;*/
padding: 0 0 0 20px;
}
.el-menu-item-group__title{
padding: 0;
}
</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