Skip to content

D
DA-Platform
Commit 0edaf799 by zxy
Options

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

parent c2a298e5
Showing with 321 additions and 100 deletions
DAPlatform-front/src/App.vue
...@@ -17,5 +17,12 @@ export default { ...@@ -17,5 +17,12 @@ export default {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
margin: 0;height: 100%;
} }
html,body,#app{
height: 100%;
width: 100%;
margin: 0;
}
</style> </style>
DAPlatform-front/src/components/HelloWorld.vue
<template> <template>
<el-container> <el-container>
<el-header style="height: 70px;background-color: #606266"></el-header> <el-header style="border-bottom:1px solid #dcdcdc;height: 10%;background-color: #ffffff"></el-header>
<el-container style="height: 540px; border: 1px solid #eee">
<el-container style="height:100%;border: 1px solid #ffffff">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']"> <el-menu :default-openeds="['1','2', '3']">
<el-submenu index="1"> <el-submenu index="1">
<template slot="title"><i class="el-icon-setting"></i>个人主页</template> <template slot="title"><i class="el-icon-setting"></i>个人主页</template>
<el-menu-item-group> <el-menu-item-group>
<el-menu-item index="1-3">个人信息</el-menu-item> <el-menu-item index="1-1">个人信息</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-menu-item-group>
</el-submenu> </el-submenu>
<el-submenu index="2"> <el-submenu index="2">
<template slot="title"><i class="el-icon-message"></i>文本标注</template> <template slot="title"><i class="el-icon-message"></i>文本标注</template>
<el-menu-item-group> <el-menu-item-group>
<template slot="title">文本标注</template> <!-- <template slot="title">文本标注</template>-->
<el-menu-item index="2-1" @click="select()">待标注</el-menu-item> <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-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 index="2-3" @click="table()">待修改</el-menu-item>
</el-menu-item-group> </el-menu-item-group>
</el-submenu> </el-submenu>
<el-submenu index="3"> <el-submenu index="3">
<template slot="title"><i class="el-icon-menu"></i>图像标注</template> <template slot="title"><i class="el-icon-menu"></i>图像标注</template>
<el-menu-item-group> <el-menu-item-group>
<template slot="title">分组一</template> <template slot="title"></template>
<el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item index="3-1">待标注</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item> <el-menu-item index="3-2">已标注</el-menu-item>
</el-menu-item-group> <el-menu-item index="3-2">待修改</el-menu-item>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group> </el-menu-item-group>
<el-submenu index="3-4"> <!-- <el-menu-item-group title="分组2">-->
<template slot="title">选项4</template> <!-- <el-menu-item index="3-3">选项3</el-menu-item>-->
<el-menu-item index="3-4-1">选项4-1</el-menu-item> <!-- </el-menu-item-group>-->
</el-submenu> <!-- <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-submenu>
</el-menu> </el-menu>
</el-aside> </el-aside>
<el-container> <el-container style="height:100%;">
<el-main> <el-main>
<div style="overflow-y:auto;height:100%;">
<el-table :data="tableData"> <el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140"> <el-table-column prop="date" label="日期" width="140">
</el-table-column> </el-table-column>
...@@ -59,9 +58,13 @@ ...@@ -59,9 +58,13 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div>
</el-main> </el-main>
</el-container> </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> </el-container>
</template> </template>
...@@ -107,4 +110,14 @@ ...@@ -107,4 +110,14 @@
.el-aside { .el-aside {
color: #333; color: #333;
} }
.el-container{
height: 90%;
}
.el-main{
/*height: 100%;*/
padding: 0 0 0 20px;
}
.el-menu-item-group__title{
padding: 0;
}
</style> </style>
DAPlatform-front/src/components/textAnnotation/SelectText.vue
<template> <template>
<el-container> <el-container>
<el-header style="height: 70px;background-color: #606266"></el-header> <el-header style="border-bottom:1px solid #dcdcdc;height: 10%;background-color: #ffffff"></el-header>
<el-container style="height: 540px; border: 1px solid #eee">
<el-container style="height:100%;border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']"> <el-menu :default-openeds="['1','2','3']">
<el-submenu index="1"> <el-submenu index="1">
<template slot="title"><i class="el-icon-setting"></i>个人主页</template> <template slot="title"><i class="el-icon-setting"></i>个人主页</template>
<el-menu-item-group> <el-menu-item-group>
<el-menu-item index="1-3">个人信息</el-menu-item> <el-menu-item index="1-1" @click="toUserInfo()">个人信息</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-menu-item-group>
</el-submenu> </el-submenu>
<el-submenu index="2"> <el-submenu index="2">
<template slot="title"><i class="el-icon-message"></i>文本标注</template> <template slot="title"><i class="el-icon-message"></i>文本标注</template>
<el-menu-item-group> <el-menu-item-group>
<template slot="title">文本标注</template> <template slot="title"></template>
<el-menu-item index="2-1" @click="select()">待标注</el-menu-item> <el-menu-item index="2-1" @click="toTextUndo()">待标注</el-menu-item>
<el-menu-item index="2-2" @click="tag()">已标注</el-menu-item> <el-menu-item index="2-2" @click="toTextEnd()">已标注</el-menu-item>
</el-menu-item-group> <el-menu-item index="2-3" @click="toTextOther()">待修改</el-menu-item>
<el-menu-item-group title="表格标注">
<el-menu-item index="2-3" @click="table()">待修改</el-menu-item>
</el-menu-item-group> </el-menu-item-group>
</el-submenu> </el-submenu>
<el-submenu index="3"> <el-submenu index="3">
<template slot="title"><i class="el-icon-menu"></i>图像标注</template> <template slot="title"><i class="el-icon-menu"></i>图像标注</template>
<el-menu-item-group> <el-menu-item-group>
<template slot="title">分组一</template> <template slot="title"></template>
<el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item index="3-1">待标注</el-menu-item>
<el-menu-item index="3-2">选项2</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>
<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-submenu>
</el-menu> </el-menu>
</el-aside> </el-aside>
<el-container> <el-container style="height:100%;">
<el-main class="selectMain"> <el-main>
<div id="ask"> <div style="overflow-y:auto;height:100%;">
<!--vue不能控制body和html的标签-->
<!--鼠标左键-->
<div @mouseup="highlight()"> <div @mouseup="highlight()">
<!-- <div @mouseup="highlight()">-->
<ul class="list"> <ul class="list">
<li v-for="it in msg" :key="it"> <li v-for="it in msg" :key="it">
<div class="msg" v-html="it">{{it}}</div><br/> <div class="msg" v-html="it">{{it}}</div><br/>
</li> </li>
</ul> </ul>
</div> </div>
<el-col :span="6"><div class="grid-content"></div></el-col> <!-- 弹窗-->
<el-col :span="6"><div class="grid-content"></div></el-col> <el-dialog title="请标注" :visible.sync="ifAlert">
<el-col :span="6"><div class="grid-content"></div></el-col> <div style="overflow: auto;height: 50vh">
<el-col :span="6"><div class="grid-content"> <!-- <div class="addTagTitle">选择标注对象</div>-->
<el-button @click="save" type="success" round>保存</el-button> <el-select v-model="value" placeholder="选择标注对象">
</div></el-col> <el-option
</div> 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-main>
</el-container>
</el-container>
<!-- <el-footer style="height: 100px; background-color: #606266"></el-footer>-->
</el-container> </el-container>
</el-container><el-footer style="height: 100px; background-color: #606266"></el-footer>
</el-container>
</template> </template>
<script> <script>
export default { export default {
data() { data () {
const item = { const item = {
date: '2020-05-02', date: '2020-05-02',
name: '小明', name: '小明',
address: '那是我心中最美的“第三极”——第二次青藏科考青年说' address: '那是我心中最美的“第三极”——第二次青藏科考青年说'
}; }
return { return {
tableData: Array(20).fill(item), tableData:
Array(20).fill(item),
msg: ['那是我心中最美的“第三极”——第二次青藏科考青年说', msg: ['那是我心中最美的“第三极”——第二次青藏科考青年说',
'2020-05-06 11:08 来源：新华网 编辑：矿材网', '2020-05-06 11:08 来源：新华网 编辑：矿材网',
'“看到国家自主研发的‘极目一号’浮空器从纳木错科考站升起，她宛若白鲸，越升越高，融入了星海。古老的‘第三极’与前沿的科技，在星空中融为一体，那就是我心中最美的‘第三极’风情。”中国科学院空天信息创新研究院的屈维说。', '“看到国家自主研发的‘极目一号’浮空器从纳木错科考站升起，她宛若白鲸，越升越高，融入了星海。古老的‘第三极’与前沿的科技，在星空中融为一体，那就是我心中最美的‘第三极’风情。”中国科学院空天信息创新研究院的屈维说。',
...@@ -86,72 +169,180 @@ ...@@ -86,72 +169,180 @@
'第二次青藏高原综合科考从2017年8月全面启动，在之后5到10年内，大批科研工作者将对青藏高原的水、生态、人类活动等环境问题进行考察研究。我国首次青藏高原综合科学考察研究是20世纪70年代，这次综合科考研究积累了大量科学资料，为青藏高原生态保护和社会经济发展提供了科学依据。', '第二次青藏高原综合科考从2017年8月全面启动，在之后5到10年内，大批科研工作者将对青藏高原的水、生态、人类活动等环境问题进行考察研究。我国首次青藏高原综合科学考察研究是20世纪70年代，这次综合科考研究积累了大量科学资料，为青藏高原生态保护和社会经济发展提供了科学依据。',
'相对于南极和北极，人们把青藏高原称为世界“第三极”。', '相对于南极和北极，人们把青藏高原称为世界“第三极”。',
'中国科学家认同“第三极”的称号，除了因为青藏高原和南极、北极有表面上的相似，还因为青藏高原的“一举一动”都对地球的整体环境有着重要影响。', '中国科学家认同“第三极”的称号，除了因为青藏高原和南极、北极有表面上的相似，还因为青藏高原的“一举一动”都对地球的整体环境有着重要影响。',
'“当科考车翻过山头，映入眼帘的便是海拔4700米的纳木错与远处的雪山，碧蓝的湖水倒映着树木、雪山，一相逢便割舍不下。”2018年参加工作的屈维说，能参与第二次青藏科考，能看到“第三极”的多样风情，是他的幸运。',] '“当科考车翻过山头，映入眼帘的便是海拔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:{ methods: {
highlight () { 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() const search = window.getSelection().toString()
this.msg = this.msg.map(item => { this.msg = this.msg.map(item => {
let replaceReg = new RegExp(search, 'g')// 匹配关键字正则 let replaceReg = new RegExp(search, 'g')// 匹配关键字正则
let replaceString = '<span class="highlights-text">' + search + '</span>' // 高亮替换v-html值 let replaceString = '<span class="highlights-text">' + search + '</span>' // 高亮替换v-html值
return item.replace(replaceReg, replaceString) return item.replace(replaceReg, replaceString)
}) })
},
save() {
this.$message({ this.$message({
message: '保存成功！', type: 'info',
type: 'success' message: 'action: ' + action
}); })
this.$router.replace('/tag') })
},
toTextUndo: function () {
this.$router.push('/')
},
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)
})
}, },
select(){ select () {
this.$router.replace('/') this.$router.replace('/')
}, },
tag(){ tag () {
this.$router.replace('/text') this.$router.replace('/text')
}, },
table(){ table () {
this.$router.replace('/table') this.$router.replace('/table')
}, },
select1(){ select1 () {
this.$router.replace('/select') this.$router.replace('/select')
}, },
tag1(){ tag1 () {
this.$router.replace('/deleteTag') this.$router.replace('/deleteTag')
},
} }
}; }
}
</script> </script>
<style> <style>
.selectMain{ .selectMain{
background-color: rgb(238, 241, 246); background-color: rgb(238, 241, 246);
}
.msg{
text-align:left;
font-size:24px;
}
.highlights-text {
color: #ff5134;
} }
.el-row { .msg{
margin-bottom: 20px; text-align:left;
font-size:16px;
line-height: 30px;
} }
.el-col { .highlights-text {
border-radius: 4px; color: #ff5134;
} }
.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;
.grid-content {
border-radius: 4px;
min-height: 36px;
} }
.row-bg { .addTagTitle{
padding: 10px 0; margin-top: 15px;
background-color: #f9fafc; margin-bottom: 10px;
} }
.el-header { .el-header {
background-color: #B3C0D1; background-color: #B3C0D1;
...@@ -162,4 +353,14 @@ ...@@ -162,4 +353,14 @@
.el-aside { .el-aside {
color: #333; color: #333;
} }
.el-container{
height: 90%;
}
.el-main{
/*height: 100%;*/
padding: 0 0 0 20px;
}
.el-menu-item-group__title{
padding: 0;
}
</style> </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