Skip to content

D
DA-Platform

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

Commit c0e4d848 by 郭婉茹
Options

跳转+标注结果页面

parent 662d9097
Showing with 1756 additions and 934 deletions
DAPlatform-front/docs/git规范.md deleted 100644 → 0
# 边缘计算节点 开发流程规范
++ /dev/null
# 边缘计算节点 开发流程规范
![图片](git规范.png)
## 一、主分支master
代码库应该有且只有一个主分支。所有提供给用户使用的正式版本，都在这个主分支上发布。
Git主分支的名字，默认叫做Master。它是自动建立的，版本库初始化以后，默认就是在主分支在进行开发。
## 二、 开发分支Develop
主分支只用来分布重大版本，日常开发应该在另一条分支上完成。我们把开发用的分支，叫做Develop。
这个分支可以用来生成代码的最新隔夜版本（nightly）。如果想正式对外发布，就在Master分支上，对Develop分支进行"合并"（merge）。
## 三、临时性分支
前面讲到版本库的两条主要分支：Master和Develop。前者用于正式发布，后者用于日常开发。其实，常设分支只需要这两条就够了，不需要其他了。
但是，除了常设分支以外，还有一些临时性分支，用于应对一些特定目的的版本开发。临时性分支主要有三种：
* 功能分支 （feature）
* 预发布分支 (release)
* 修补bug分支 (fixbug)
这三种分支都属于临时性需要，使用完以后，应该删除，使得代码库的常设分支始终只有Master和Develop。
## 四、功能分支 feature branches
为了开发某种特定功能，从Develop分支上面分出来的。开发完成后，要再并入Develop。
功能分支的名字，可以采用feature-*的形式命名。
## 五、预发布分支 release branches
指发布正式版本之前（即合并到Master分支之前），我们可能需要有一个预发布的版本进行测试。
预发布分支是从Develop分支上面分出来的，预发布结束以后，必须合并进Develop和Master分支。它的命名，可以采用release-*的形式。
## 六、修补bug分支 hotfixes
软件难免会出现bug。这时就需要创建一个分支，进行bug修补。
修补bug分支是从Master/dev分支上面分出来的。修补结束以后，再合并进Master和Develop分支。它的命名，可以采用fixbug-*的形式。
## 七、git commit 信息规范
git commit 信息应该有统一的前缀以方便搜索：
* ADD: 新建文件
* UPDATE: 原文件新增功能
* DELETE: 删除
* FIX: 修复bug
比如
`ADD: xxx业务模块`
\ No newline at end of file
DAPlatform-front/src/assets/css/common.css 0 → 100644
body,html{
height: 100%;
}
*{
margin: 0;
box-sizing: border-box;
}
DAPlatform-front/src/assets/js/axios.js 0 → 100644
import axios from 'axios'
import getUrl from './getPath'
export default {
Get: (config) => {
return axios({
method: 'get',
url: getUrl(config.url),
params: config.params
}).then((res) => {
stateDetection(res)
return config.callback && config.callback(res)
})
},
Post: (config) => {
return axios({
method: 'post',
url: getUrl(config.url),
data: config.params.data,
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCookie('csrftoken')
}
}).then((res) => {
stateDetection(res)
return config.callback && config.callback(res)
})
}
}
// 状态检测
let stateDetection = (data, callback) => {
let status = data.status_code
switch (status) {
case 102:
break
case 103:
alert(data.content)
break
case 404:
window.location.href = data.url
break
}
}
function getCookie (name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
DAPlatform-front/src/assets/js/getPath.js 0 → 100644
export default function getUrl (str) {
let url = 'http://127.0.0.1:8000/backend/' + str
return url
}
DAPlatform-front/src/components/CheckDetail.vue 0 → 100644
<template>
<div class="task-container">
<div class="task-panel">
<h2>桥梁勘测文件标注</h2>
<p>发布时间：2019-12-13</p>
<p>文本大小：200k</p>
<el-divider></el-divider>
<el-table
:data="tableData"
height="400"
style="width: 100%">
<el-table-column
prop="id"
label="分片id"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="模板名称"
width="180">
</el-table-column>
<el-table-column
prop="number"
label="文件数量">
</el-table-column>
<el-table-column
prop="biaozhu"
label="标注者">
</el-table-column>
<el-table-column
prop="time"
label="标注时间">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180">
<template slot-scope="scope">
<el-button type="primary" @click="start()">查看详情</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'task',
data() {
return {
task: {},
piecesMap: {},
pieces: [],
checkedPieces: [],
isIndeterminate: true,
checkAll: false,
tableData: [{
id: '10247',
name: '植物标注模板',
number: '3',
biaozhu: '小明',
time: '2017-12-13'
}, {
id: '10258',
name: '文本标注模板',
number: '3',
biaozhu: 'dell',
time: '2017-12-13'
}, {
id: '10117',
name: '植物标注模板',
number: '8',
biaozhu: '小宏',
time: '2017-12-13'
}, {
id: '101329',
name: '桥梁标注模板',
number: '8',
biaozhu: '小白',
time: '2017-12-13'
}, {
id: '10128',
name: '植物标注模板',
number: '4',
biaozhu: '小明',
time: '2017-12-13'
}, {
id: '10154',
name: '植物标注模板',
number: '10',
biaozhu: '小明',
time: '2017-12-13'
}, {
id: '10125',
name: '桥梁标注模板',
number: '8',
biaozhu: '小明',
time: '2017-12-13'
}]
}
},
mounted () {
var self = this
var task = JSON.parse(decodeURIComponent(this.$route.params.task))
this.task = task
// 根据任务id拉取分片信息
this.axios.get('/getPieces', {
params: {
id: task.id
}
}).then(res => {
var piecesMap = {}
var pieces = []
for (let piece of res.data.data) {
piecesMap[piece.id] = {
fileNum: piece.fileNum,
templateName: piece.templateName
}
pieces.push(piece.id)
}
self.piecesMap = piecesMap
self.pieces = pieces
})
},
methods: {
handleCheckAllChange (val) {
this.checkedPieces = val ? this.pieces : []
this.isIndeterminate = false
},
handleCheckedPiecesChange (value) {
let checkedCount = value.length
this.checkAll = checkedCount === this.pieces.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.pieces.length
},
begin () {
if (this.checkedPieces.length === 0) {
alert('请选择分片')
}
},
start(){
this.$router.push('/selected');
}
}
}
</script>
<style lang="scss" scoped>
@import '../assets/scss/config.scss';
@import '../assets/scss/mixin.scss';
.task-container{
@include container;
.task-panel{
@include whiteBoard;
text-align: left;
padding: 30px 20px 30px 20px;
}
.pieces{
margin-bottom: 30px;
.el-checkbox{
display: block;
margin: 0px;
padding: 9px 0 9px 10px;
}
.checkbox{
span{
display: inline-block;
min-width: 15em;
}
&:nth-child(odd){
background-color: ghostwhite;
}
}
}
}
</style>
DAPlatform-front/src/components/CheckTask.vue
<template>
<div class="taskhall">
<el-container>
<el-main style="background-color: #FFFFFF">
<el-table
:data="tableData"
:header-cell-style="{backgroundColor:'#FFFFFF',color:'#409EFF'}"
max-height=600px
border
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}">
<el-table-column
prop="taskId"
label="任务ID"
width="180">
</el-table-column>
<el-table-column
prop="splitNum"
label="分片数量"
width="180">
</el-table-column>
<el-table-column
prop="date"
label="发布时间"
sortable
width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="任务名称"
>
</el-table-column>
<el-table-column
prop="status"
label="任务状态"
width="180"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180">
<template slot-scope="scope">
<el-button @click="checkdetail" type="text" size="large">查看详情</el-button>
</template>
</el-table-column>
</el-table>
</el-main>
</el-container>
<div class="taskhall-container">
<div class="taskhall-left">
<div class="tasklist-container">
<div class="tasklist">
<div class="task-item" v-for="(item, index) in tasks" :key='index'>
<div>{{item.title}}</div>
<div>发布时间：{{item.date}}&emsp;&emsp;分片数量:{{item.number}}&emsp;&emsp;任务状态:{{'待审核'}}&emsp;&emsp;
<span v-if="item.type == 'text'">文本大小：{{item.size}}k</span>
<span v-else>图片张数：{{item.size}}张</span>
</div>
<el-button class="task-enter-btn1" type="primary" @click="detail()" plain>审核任务</el-button>
</div>
</div>
<div class="page-navigator">
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
const mock = true
if (mock) require('@/mock/api.js')
export default {
data() {
name: 'checktask',
data () {
return {
tableData: [{
taskId:'1',
splitNum:'3',
date: '2016-05-03',
name: '单物体语义分割',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2017-05-03',
name: '人脸质量判断',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2018-05-03',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-06-03',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-05-04',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-05-08',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-06-11',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '待审核'
}]
activeName: '待审核任务' ,
tasks: []
}
},
mounted () {
this.axios.get('/getTasks').then(res => {
this.tasks = res.data.data
})
},
methods: {
checkdetail () {
this.$router.push('/').catch(data => {
})
handleClick (tab, event) {
console.log(tab, event)
},
deleteRow(index, rows) {//删除改行
rows.splice(index, 1);
},
detail(){
this.$router.push('/checkdetail')
}
}
}
</script>
<style>
.taskhall{
width: 90vw;
min-width: 800px;
/* border: solid; */
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 36px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped lang='scss'>
@import '@/assets/scss/config.scss';
.taskhall-container{
padding: 40px 10% 100px 10%;
min-width: $min-width;
min-height: 600px;
overflow:hidden;
background-color: $bg-color;
.taskhall-left{
background-color: white;
padding: 30px 20px 30px 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
.filter-container{
.filter-item{
display: flex;
align-items: center;
margin-bottom: 15px;
.filter-input{
margin-left: 20px;
width: 300px;
}
}
}
.tasklist-container{
.tasklist{
.task-item{
border-bottom: 1px solid $divider-color;
text-align: left;
padding: 10px 0px 22px;
position: relative;
div:first-of-type{
font-size: 18px;
margin-bottom: 7px;
font-weight: bold;
}
div:last-of-type{
font-size: 14px;
color: #959595;
}
.task-enter-btn1{
position: absolute;
right: 10px;
bottom: 10px;
}
}
}
}
.page-navigator{
margin-top: 30px;
}
}
.taskhall-right{
float: right;
width: 25%;
.notice{
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
.notice-title{
background-color: $theme-color;
color: white;
padding: 10px 0;
}
.notice-body{
background-color: white;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
</style>
DAPlatform-front/src/components/CompletedTask.vue
<template>
<div class="taskhall">
<el-container>
<el-main style="background-color: #FFFFFF">
<el-table
:data="tableData"
:header-cell-style="{color:'#409EFF'}"
height="570"
border
style="width: 100%">
<el-table-column
prop="taskId"
label="任务ID"
width="180">
</el-table-column>
<el-table-column
prop="author"
label="发布者ID"
width="180">
</el-table-column>
<el-table-column
prop="splitNum"
label="分片数量"
width="180">
</el-table-column>
<el-table-column
prop="date"
label="发布时间"
width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="任务名称"
>
</el-table-column>
<el-table-column
prop="status"
label="任务状态"
width="180"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">导出</el-button>
</template>
</el-table-column>
</el-table>
</el-main>
</el-container>
</div>
<div class="taskhall-container">
<div class="taskhall-left">
<div class="tasklist-container">
<div class="tasklist">
<div class="task-item" v-for="(item, index) in tasks" :key='index'>
<div>{{item.title}}</div>
<div>发布者:{{item.creater}}&emsp;&emsp;发布时间：{{item.date}}&emsp;&emsp;分片数量:{{item.number}}&emsp;&emsp;任务状态：{{'已完成'}}&emsp;&emsp;
<span v-if="item.type == 'text'">文本大小：{{item.size}}k</span>
<span v-else>图片张数：{{item.size}}张</span>
</div>
<el-button class="task-enter-btn1" type="primary" @click="detail()" plain>查看任务</el-button>
<el-button class="task-enter-btn2" type="primary" plain>导出任务</el-button>
</div>
</div>
<div class="page-navigator">
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
const mock = true
if (mock) require('@/mock/api.js')
export default {
data() {
name: 'ongoingtask',
data () {
return {
tableData: [{
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '单物体语义分割',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '人脸质量判断',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}]
activeName: '我的任务',
tasks: []
}
},
mounted () {
this.axios.get('/getTasks').then(res => {
this.tasks = res.data.data
})
},
methods: {
handleClick (tab, event) {
console.log(tab, event)
},
deleteRow(index, rows) {//删除改行
rows.splice(index, 1);
},
detail(){
this.$router.push('/completeddetail')
}
}
}
</script>
<style>
.taskhall{
width: 90vw;
min-width: 800px;
/* border: solid; */
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 36px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped lang='scss'>
@import '@/assets/scss/config.scss';
.taskhall-container{
padding: 40px 10% 100px 10%;
min-width: $min-width;
min-height: 600px;
overflow:hidden;
background-color: $bg-color;
.taskhall-left{
background-color: white;
padding: 30px 20px 30px 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
.filter-container{
.filter-item{
display: flex;
align-items: center;
margin-bottom: 15px;
.filter-input{
margin-left: 20px;
width: 300px;
}
}
}
.tasklist-container{
.tasklist{
.task-item{
border-bottom: 1px solid $divider-color;
text-align: left;
padding: 10px 0px 22px;
position: relative;
div:first-of-type{
font-size: 18px;
margin-bottom: 7px;
font-weight: bold;
}
div:last-of-type{
font-size: 14px;
color: #959595;
}
.task-enter-btn1{
position: absolute;
right: 120px;
bottom: 10px;
}
.task-enter-btn2{
position: absolute;
right: 0px;
bottom: 10px;
}
}
}
}
.page-navigator{
margin-top: 30px;
}
}
.taskhall-right{
float: right;
width: 25%;
.notice{
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
.notice-title{
background-color: $theme-color;
color: white;
padding: 10px 0;
}
.notice-body{
background-color: white;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
</style>
DAPlatform-front/src/components/CompletedTaskDetail.vue 0 → 100644
<template>
<div class="task-container">
<div class="task-panel">
<h2>桥梁勘测文件标注</h2>
<p>发布者：小明</p>
<p>发布时间：2019-12-13</p>
<p>文本大小：200k</p>
<el-divider></el-divider>
<el-table
:data="tableData"
height="400"
style="width: 100%">
<el-table-column
prop="id"
label="分片id"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="模板名称"
width="180">
</el-table-column>
<el-table-column
prop="number"
label="文件数量">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180">
<template slot-scope="scope">
<el-button type="primary" @click="start()">查看详情</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'task',
data() {
return {
task: {},
piecesMap: {},
pieces: [],
checkedPieces: [],
isIndeterminate: true,
checkAll: false,
tableData: [{
id: '10247',
name: '植物标注模板',
number: '3'
}, {
id: '10258',
name: '文本标注模板',
number: '3'
}, {
id: '10117',
name: '植物标注模板',
number: '8'
}, {
id: '101329',
name: '桥梁标注模板',
number: '8'
}, {
id: '10128',
name: '植物标注模板',
number: '4'
}, {
id: '10154',
name: '植物标注模板',
number: '10'
}, {
id: '10125',
name: '桥梁标注模板',
number: '8'
}]
}
},
mounted () {
var self = this
var task = JSON.parse(decodeURIComponent(this.$route.params.task))
this.task = task
// 根据任务id拉取分片信息
this.axios.get('/getPieces', {
params: {
id: task.id
}
}).then(res => {
var piecesMap = {}
var pieces = []
for (let piece of res.data.data) {
piecesMap[piece.id] = {
fileNum: piece.fileNum,
templateName: piece.templateName
}
pieces.push(piece.id)
}
self.piecesMap = piecesMap
self.pieces = pieces
})
},
methods: {
handleCheckAllChange (val) {
this.checkedPieces = val ? this.pieces : []
this.isIndeterminate = false
},
handleCheckedPiecesChange (value) {
let checkedCount = value.length
this.checkAll = checkedCount === this.pieces.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.pieces.length
},
begin () {
if (this.checkedPieces.length === 0) {
alert('请选择分片')
}
},
start(){
this.$router.push('/selected');
}
}
}
</script>
<style lang="scss" scoped>
@import '../assets/scss/config.scss';
@import '../assets/scss/mixin.scss';
.task-container{
@include container;
.task-panel{
@include whiteBoard;
text-align: left;
padding: 30px 20px 30px 20px;
}
.pieces{
margin-bottom: 30px;
.el-checkbox{
display: block;
margin: 0px;
padding: 9px 0 9px 10px;
}
.checkbox{
span{
display: inline-block;
min-width: 15em;
}
&:nth-child(odd){
background-color: ghostwhite;
}
}
}
}
</style>
DAPlatform-front/src/components/HelloWorld.vue 0 → 100644
<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>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App', radio: 3
}
}
}
</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>
DAPlatform-front/src/components/Login.vue
<template>
<div class="login-container">
<div class="login-background-text">DAPlatform</div>
<div class="login-panel">
<div class="login-panel" :style="{height: panelHeight}">
<div class="logo">DAPlatform</div>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
active-text-color="#409EFF">
<el-menu-item index="1">登录</el-menu-item>
......@@ -15,17 +15,24 @@
密码：
<el-input class="input" v-model="password" placeholder="请输入密码"></el-input>
</div>
<div class="input-item" v-if="activeIndex == '2'">
确认密码：
<el-input class="input" v-model="confirm" placeholder="请确认密码"></el-input>
</div>
<div class="input-item" v-if="activeIndex == '2'">
邮箱：
<el-input class="input" v-model="email" placeholder="请输入邮箱"></el-input>
</div>
<el-button v-if="activeIndex == '1'" class="btn" type="primary" @click="login">登录</el-button>
<el-button v-else class="btn" type="primary" @click="register">注册</el-button>
<transition name="fade">
<div class="input-item" v-if="activeIndex == '2'">
确认密码：
<el-input class="input" v-model="confirm" placeholder="请确认密码"></el-input>
</div>
</transition>
<transition name="fade">
<div class="input-item" v-if="activeIndex == '2'">
邮箱：
<el-input class="input" v-model="email" placeholder="请输入邮箱"></el-input>
</div>
</transition>
<transition name="fade">
<el-button v-if="activeIndex == '1'" type="primary" @click="login">登录</el-button>
</transition>
<transition name="fade">
<el-button v-if="activeIndex == '2'" type="primary" @click="register">注册</el-button>
</transition>
</div>
</div>
</template>
......@@ -39,12 +46,19 @@ export default {
password: '',
confirm: '',
email: '',
activeIndex: '1'
activeIndex: '1',
panelHeight: '333px'
}
},
methods: {
handleSelect (key, keyPath) {
this.activeIndex = key
if (this.activeIndex === key) return
this.activeIndex = '0'
this.panelHeight = key === '1' ? '333px' : '473px'
var self = this
setTimeout(function () {
self.activeIndex = key
}, 550)
},
login () {
this.$router.push('/index').catch(data => {})
......@@ -62,30 +76,61 @@ export default {
position: relative;
min-width: 1400px;
min-height: 100vh;
background-color: #409EFF;
overflow: hidden;
.login-background-text {
position: absolute;
color: white;
font-size: 150px;
top: 30vh;
left: 5vw;
text-shadow: 30px 30px 0px rgba(255, 255, 255, 0.4);
z-index: 1;
}
background-image: linear-gradient(to top right, #409EFF, rgb(171, 209, 247));
.login-panel {
float: right;
width: 400px;
margin-right: 10vw;
margin-right: auto;
margin-left: auto;
margin-top: 20vh;
margin-bottom: 10vh;
padding-top: 20px;
background-color: white;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 5px 5px 0px 2px #f7f5f562;
z-index: 100;
animation: show-panel 1s;
transition: height 0.5s;
@keyframes show-panel{
from{
opacity: 0;
transform: translateY(20px);
}
to{
opacity: 1;
transform: translateY(0);
}
}
.logo{
color: #409EFF;
font-size: 28px;
}
.el-menu-demo{
background-color: #ffffff00;
.el-menu-item{
background-color: #ffffff00;
}
}
.el-button{
width: 80%;
margin-top: 20px;
margin-bottom: 20px;
}
}
}
.fade-enter-active, .fade-leave-active{
transition: all 0.5s;
}
.fade-enter/* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateX(20px);
}
.fade-leave-to{
opacity: 0;
transform: translateX(-20px);
}
.input-item{
display: flex;
padding-left: 30px;
......@@ -97,9 +142,4 @@ export default {
width: 70%;
}
}
.btn{
width: 80%;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
DAPlatform-front/src/components/OngoingTaskDetail.vue 0 → 100644
<template>
<div class="task-container">
<div class="task-panel">
<h2>桥梁勘测文件标注</h2>
<p>发布者：小明</p>
<p>发布时间：2019-12-13</p>
<p>文本大小：200k</p>
<el-divider></el-divider>
<el-table
:data="tableData"
height="400"
style="width: 100%">
<el-table-column
prop="id"
label="分片id"
width="180">
</el-table-column>
<el-table-column
prop="type"
label="文件类别"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="文件名">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180">
<template slot-scope="scope">
<el-button type="primary" @click="start(scope.row.type)">开始任务</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'task',
data() {
return {
task: {},
piecesMap: {},
pieces: [],
checkedPieces: [],
isIndeterminate: true,
checkAll: false,
tableData: [{
id: '10247',
name: '植物标注.txt',
type: '文本'
}, {
id: '10258',
name: '文本标注.doc',
type: '文本'
}, {
id: '10117',
name: '植物标注.jpg',
type: '图层'
}, {
id: '101329',
name: '桥梁标注.doc',
type: '文本'
}, {
id: '10128',
name: '植物标注2.txt',
type: '文本'
}, {
id: '10154',
name: '植物标注2.doc',
type: '文本'
}, {
id: '10125',
name: '桥梁标注.jpg',
type: '图像'
}]
}
},
mounted () {
var self = this
var task = JSON.parse(decodeURIComponent(this.$route.params.task))
this.task = task
// 根据任务id拉取分片信息
this.axios.get('/getPieces', {
params: {
id: task.id
}
}).then(res => {
var piecesMap = {}
var pieces = []
for (let piece of res.data.data) {
piecesMap[piece.id] = {
fileNum: piece.fileNum,
templateName: piece.templateName
}
pieces.push(piece.id)
}
self.piecesMap = piecesMap
self.pieces = pieces
})
},
methods: {
handleCheckAllChange (val) {
this.checkedPieces = val ? this.pieces : []
this.isIndeterminate = false
},
handleCheckedPiecesChange (value) {
let checkedCount = value.length
this.checkAll = checkedCount === this.pieces.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.pieces.length
},
begin () {
if (this.checkedPieces.length === 0) {
alert('请选择分片')
}
},
start(type){
if(type=='文本'){
this.$router.push('/select');
}
else if(type=='图像'){
this.$router.push('/image');
}
else{
this.$router.push('/layer');
}
}
}
}
</script>
<style lang="scss" scoped>
@import '../assets/scss/config.scss';
@import '../assets/scss/mixin.scss';
.task-container{
@include container;
.task-panel{
@include whiteBoard;
text-align: left;
padding: 30px 20px 30px 20px;
}
.pieces{
margin-bottom: 30px;
.el-checkbox{
display: block;
margin: 0px;
padding: 9px 0 9px 10px;
}
.checkbox{
span{
display: inline-block;
min-width: 15em;
}
&:nth-child(odd){
background-color: ghostwhite;
}
}
}
}
</style>
DAPlatform-front/src/components/PublishTask.vue
<template>
<div class="taskhall">
<el-container>
<el-main style="background-color: #FFFFFF">
<el-table
:data="tableData"
:header-cell-style="{color:'#409EFF'}"
height="570"
border
style="width: 100%">
<el-table-column
prop="taskId"
label="任务ID"
width="180">
</el-table-column>
<el-table-column
prop="splitNum"
label="分片数量"
width="180">
</el-table-column>
<el-table-column
prop="date"
label="发布时间"
width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="任务名称"
>
</el-table-column>
<el-table-column
prop="status"
label="任务状态"
width="180"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 删除 </el-button>
</template>
</el-table-column>
</el-table>
</el-main>
</el-container>
</div>
<div class="taskhall-container">
<div class="taskhall-left">
<div class="tasklist-container">
<div class="tasklist">
<div class="task-item" v-for="(item, index) in tasks" :key='index'>
<div>{{item.title}}</div>
<div>发布时间：{{item.date}}&emsp;&emsp;分片数量:{{item.number}}&emsp;&emsp;任务状态:{{'已发布'}}&emsp;&emsp;
<span v-if="item.type == 'text'">文本大小：{{item.size}}k</span>
<span v-else>图片张数：{{item.size}}张</span>
</div>
<el-button class="task-enter-btn1" type="primary" plain @click="revise">修改</el-button>
<el-button class="task-enter-btn2" @click.native.prevent="deleteRow(index, tasks)" type="primary" plain>删除</el-button>
</div>
</div>
<div class="page-navigator">
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
const mock = true
if(mock) require('@/mock/api.js'
)
export default {
name: 'publishtask',
data() {
return {
tableData: [{
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '单物体语义分割',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '人脸质量判断',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status:'已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status:'已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status:'已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status:'已发布'
}]
activeName: '我的发布',
tasks: []
}
},
mounted() {
this.axios.get('/getTasks').then(res => {
this.tasks = res.data.data
})
},
methods: {
handleClick(tab, event) {
console.log(tab, event)
},
deleteRow(index, rows) {//删除改行
rows.splice(index, 1);
if(confirm('确定要删除吗')===true){
rows.splice(index, 1)
}
},
revise() {
this.$router.push('/releasetask').catch(data => {
})
}
}
}
</script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 36px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped lang='scss'>
@import '@/assets/scss/config.scss';
.taskhall-container{
padding: 40px 10% 100px 10%;
min-width: $min-width;
min-height: 600px;
overflow:hidden;
background-color: $bg-color;
.taskhall-left{
background-color: white;
padding: 30px 20px 30px 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
.filter-container{
.filter-item{
display: flex;
align-items: center;
margin-bottom: 15px;
.filter-input{
margin-left: 20px;
width: 300px;
}
}
}
.tasklist-container{
.tasklist{
.task-item{
border-bottom: 1px solid $divider-color;
text-align: left;
padding: 10px 0px 22px;
position: relative;
div:first-of-type{
font-size: 18px;
margin-bottom: 7px;
font-weight: bold;
}
div:last-of-type{
font-size: 14px;
color: #959595;
}
.task-enter-btn1{
position: absolute;
right: 80px;
bottom: 10px;
}
.task-enter-btn2{
position: absolute;
right: 0px;
bottom: 10px;
}
}
}
}
.page-navigator{
margin-top: 30px;
}
}
.taskhall-right{
float: right;
width: 25%;
.notice{
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
.notice-title{
background-color: $theme-color;
color: white;
padding: 10px 0;
}
.notice-body{
background-color: white;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
</style>
DAPlatform-front/src/components/Task.vue
......@@ -9,10 +9,12 @@
<el-divider></el-divider>
<h2>选择分片</h2>
<div class="pieces">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" border>全选</el-checkbox>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedPieces" @change="handleCheckedPiecesChange">
<el-checkbox class="el-checkbox" v-for="piece in pieces" :label="piece" :key="piece" border>文件数：{{piecesMap[piece]}}</el-checkbox>
<el-checkbox class="checkbox" v-for="pieceId in pieces" :label="pieceId" :key="pieceId">
<span>分片编号：{{pieceId}}</span><span>文件数：{{piecesMap[pieceId].fileNum}}</span><span>模板：{{piecesMap[pieceId].templateName}}</span>
</el-checkbox>
</el-checkbox-group>
</div>
<el-button type="primary" @click="begin">开始任务</el-button>
......@@ -46,7 +48,10 @@ export default {
var piecesMap = {}
var pieces = []
for (let piece of res.data.data) {
piecesMap[piece.id] = piece.fileNum
piecesMap[piece.id] = {
fileNum: piece.fileNum,
templateName: piece.templateName
}
pieces.push(piece.id)
}
self.piecesMap = piecesMap
......@@ -62,11 +67,12 @@ export default {
let checkedCount = value.length
this.checkAll = checkedCount === this.pieces.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.pieces.length
console.log(value)
},
begin () {
if (this.checkedPieces.length === 0) {
alert('请选择分片')
} else {
this.$router.push('/ongoing')
}
}
}
......@@ -86,8 +92,18 @@ export default {
.pieces{
margin-bottom: 30px;
.el-checkbox{
margin-left: 0;
margin-bottom: 15px;
display: block;
margin: 0px;
padding: 9px 0 9px 10px;
}
.checkbox{
span{
display: inline-block;
min-width: 15em;
}
&:nth-child(odd){
background-color: ghostwhite;
}
}
}
}
......
DAPlatform-front/src/components/UserHome.vue
<template>
<div class="taskhall">
<el-container>
<el-aside width="300px">
<div>
<img src ="../assets/logo.png">
<div class="user-info-container">
<div class="user-info-panel">
<div class="user-info-left">
<img src="../assets/avatar.jpg" alt="">
<el-button type="primary" plain>更换头像</el-button>
</div>
<div class="user-info-right">
<div class="user-info-main">
<p><span>用户名：</span>小明</p>
<p><span>用户ID：</span>65535</p>
<p><span>邮箱：</span>123456@buaa.edu.cn</p>
<p><span>身份：</span>任务发布者</p>
</div>
<el-divider></el-divider>
<div class="user-info-more">
<h3>我的积分</h3>
<p><span>图像：</span><span class="point">333</span><span class="type-more">准确率：</span>70%</p>
<p><span>文本：</span><span class="point">333</span><span class="type-more">准确率：</span>65%</p>
<p><span>发布任务：</span><span class="point">333</span><span class="type-more">数量：</span>15</p>
</div>
</div>
</div>
</el-aside>
<el-main>
<el-row>
<el-col :span="6"><div class="grid-content bg-blue">用户名</div></el-col>
<el-col :span="18"><div class="grid-content bg-blue-light">小明</div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-blue">用户ID</div></el-col>
<el-col :span="18"><div class="grid-content bg-blue-light">4</div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-blue">邮箱</div></el-col>
<el-col :span="18"><div class="grid-content bg-blue-light">xxx@buaa.edu.cn</div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-blue">类型</div></el-col>
<el-col :span="18"><div class="grid-content bg-blue-light">任务发布者</div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-blue">密码</div></el-col>
<el-col :span="18"><div class="grid-content bg-blue-light"> <el-button type="danger" plain>修改密码</el-button></div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-line bg-blue-dark" height:2px></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-blue">类型</div></el-col>
<el-col :span="8"><div class="grid-content bg-blue-light">积分</div></el-col>
<el-col :span="8"><div class="grid-content bg-blue">准确率</div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-blue">图象</div></el-col>
<el-col :span="8"><div class="grid-content bg-blue-light">233</div></el-col>
<el-col :span="8"><div class="grid-content bg-blue">66%</div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-blue">文本</div></el-col>
<el-col :span="8"><div class="grid-content bg-blue-light">323</div></el-col>
<el-col :span="8"><div class="grid-content bg-blue">77%</div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-blue">发布</div></el-col>
<el-col :span="8"><div class="grid-content bg-blue-light">333</div></el-col>
<el-col :span="8"><div class="grid-content bg-blue">\</div></el-col>
</el-row>
</el-main>
</el-container>
</div>
</div>
</template>
<style>
/* .taskhall{
width: 90vw;
min-width: 800px;
border: solid;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}*/
.el-aside {
background-color: #e1f2fb !important;/*#8EC3F9 !important;*/
color: #FFFFFF;
text-align: center;
line-height: 200px;
}
.el-aside img{
margin-top: 50px;
width: 200px;
height: 200px;
}
.el-main {
background-color: #ffffff !important;
color: #FFFFFF;
text-align: center;
line-height: 40px;
width: 80%;
}
body > .el-container {
margin-bottom: 40px;
}
<script>
export default {
name: 'user-home'
}
</script>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
<style scope lang="scss">
@import '../assets/scss/config.scss';
@import '../assets/scss/mixin.scss';
.user-info-container{
@include container();
.user-info-panel{
@include whiteBoard();
min-height: 500px;
display: flex;
.user-info-left{
width: 300px;
img{
width: 150px;
margin-top: 20px;
margin-bottom: 20px;
}
}
.user-info-right{
width: 100%;
text-align: left;
box-sizing: border-box;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
span{
display: inline-block;
min-width: 150px;
}
.user-info-more{
margin-top: 50px;
.point::after{
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url("../assets/point.png") no-repeat center;
background-size: contain;
vertical-align: middle;
margin-left: 7px;
margin-bottom: 5px;
}
.type-more{
min-width: 4em;
}
}
}
}
.el-col {
border-radius: 4px;
}
.bg-blue-dark {
background: #769fcd;
}
.bg-blue {
background: #CAE4FF;/*#8EC3F9;*/
}
.bg-blue-light {
background: #e1f2fb !important;
}
.grid-content {
border-radius: 4px;
height: 40px;
}
.grid-line {
border-radius: 4px;
height: 6px;
}
.row-bg {
padding: 10px 0;
background-color: #FFFFFF;
}
</style>
\ No newline at end of file
}
</style>
DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue 0 → 100644
<template>
<div class="layout" :style="{ height : height_res+'px'}">
<!-- 工具栏-->
<div class="toolBar">
<el-button-group id="start">
<el-button class="tool-button" type="primary" >保存</el-button>
<el-button class="tool-button" type="primary" >退出</el-button>
</el-button-group>
<el-button-group id="tool">
<el-button class="tool-button" type="primary" icon="el-icon-arrow-left" >上一张</el-button>
<el-button class="tool-button" type="primary" >下一张<i class="el-icon-arrow-right el-icon--right"></i></el-button>
<el-button class="tool-button"type="primary" >多边形标注</el-button>
<el-button class="tool-button"type="primary" >矩形标注</el-button>
<el-button class="tool-button"type="primary" @click="deleteAnnotation">删除标注</el-button>
</el-button-group>
</div>
<el-container>
<!-- 侧边栏-->
<el-aside class="sidebar">
<div class="sidebar-box">
<div>
<div class="img-list-title">图片列表</div>
<div class="img-title-list-box">
<div id="img-title-list">
<el-tree
:data="image_list"
:props="defaultProps"
accordion>
</el-tree>
</div>
</div>
</div>
</div>
</el-aside>
<!-- 工作台-->
<el-main class="workbench">
<img src="../../assets/logo.png">
<!-- <div style="margin-top: 50px">-->
<el-button-group id="buttonBar">
<el-button class="tool-button"type="primary" >移动图层</el-button>
<el-button class="tool-button"type="primary" >放大</el-button>
<el-button class="tool-button"type="primary" >缩小</el-button>
</el-button-group>
<!-- </div>-->
</el-main>
</el-container>
</div>
</template>
<script>
export default {
name: 'imageAnnotation',
data(){
return{
height_res:0,
activeIndex1:1,
image_list: [{
label: 'image1.jpg',
children: [{
label: '标注1'
},
{
label: '标注2',
}]
},
{
label: 'image2.jpg',
children: [{
label: '标注1'
},
{
label: '标注2',
}]
}],
layer_list: [{
label: 'image1.jpg',
children: [{
label: '标注1'
},
{
label: '标注2',
}]
},
{
label: 'image2.jpg',
children: [{
label: '标注1'
},
{
label: '标注2',
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
mounted(){
this.get_height();
var _this = this;
window.onresize = function(){
// alert("??");
_this.height_res = document.body.clientHeight - 61;
}
},
methods:{
get_height(){
this.height_res = document.body.clientHeight - 61;
},
changeToolBar(val){
this.activeIndex1=val
},
deleteAnnotation: function () {
this.$confirm('确定删除此标注', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
};
</script>
<style scoped>
.layout {
display: flex;
flex-direction: column;
height: 100%;
/*overflow: hidden;*/
background-color: #d9ecff;
}
.toolBar{
margin-top: 20px;
margin-bottom: 20px;
/*background-color: #2c3e50;*/
}
.workbench {
/*border: 2px solid #409eff;*/
margin-left: 20px;
margin-right: 40px;
border-radius: 5px;
box-shadow: 0px 0px 10px #dbdbdb;
background-color: white;
height: 87%;
}
#buttonBar {
position: fixed;
left: 50%;
bottom: 30px;
}
.sidebar {
height: 87%;
margin-left: 50px;
/*border: 2px solid #409eff;*/
border-radius: 5px;
box-shadow: 0px 0px 10px #dbdbdb;
background-color: white;
}
.img-list-title{
line-height: 40px;
padding: 0 10px;
background: #409EFF;
color: white;
}
.img-title-list-box{
/*height: 800px;*/
height: 100%;
overflow: auto;
background-color: white;
}
.add-file-btn-group >>> button{
margin-top: 3px;
margin-bottom: 3px;
}
</style>
DAPlatform-front/src/components/imageAnnotation/layerAnnotation.vue 0 → 100644
<template>
<div class="layout" :style="{ height : height_res+'px'}">
<!-- 工具栏-->
<div class="toolBar">
<el-button-group id="start">
<el-button class="tool-button" type="primary" >保存</el-button>
<el-button class="tool-button" type="primary" >退出</el-button>
</el-button-group>
<el-button-group style="margin-right: 10px ; line-height: 40px;vertical-align: middle">
<el-button class="tool-button"type="primary" style="margin-right: 10px">飞入坐标点</el-button>
<a>X:</a>
<input type="text" style="width: 30px">
<a>Y:</a>
<input type="text" style="width: 30px">
</el-button-group>
<el-button-group id="tool">
<el-button class="tool-button"type="primary" >多边形标注</el-button>
<el-button class="tool-button"type="primary" >矩形标注</el-button>
<el-button class="tool-button"type="primary" >建立地标</el-button>
<el-button class="tool-button"type="primary" @click="deleteAnnotation">删除标注</el-button>
</el-button-group>
</div>
<el-container>
<!-- 侧边栏-->
<el-aside class="sidebar">
<div class="sidebar-box">
<div>
<div class="img-list-title">图层列表</div>
<div class="img-title-list-box">
<div id="img-title-list">
<el-tree
:data="image_list"
:props="defaultProps"
accordion>
</el-tree>
</div>
</div>
</div>
</div>
</el-aside>
<!-- 工作台-->
<el-main class="workbench">
<img src="../../assets/logo.png">
<el-button-group id="buttonBar">
<el-button class="tool-button" type="primary" >移动图层</el-button>
<el-button class="tool-button" type="primary" >放大</el-button>
<el-button class="tool-button" type="primary" >缩小</el-button>
</el-button-group>
</el-main>
</el-container>
</div>
</template>
<script>
export default {
name: 'layerAnnotation',
data(){
return{
height_res:0,
Xpoint: 0,
Ypoint: 0,
activeIndex1:1,
image_list: [{
label: 'image1.jpg',
children: [{
label: '标注1'
},
{
label: '标注2',
}]
},
{
label: 'image2.jpg',
children: [{
label: '标注1'
},
{
label: '标注2',
}]
}],
layer_list: [{
label: 'image1.jpg',
children: [{
label: '标注1'
},
{
label: '标注2',
}]
},
{
label: 'image2.jpg',
children: [{
label: '标注1'
},
{
label: '标注2',
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
mounted(){
this.get_height();
var _this = this;
window.onresize = function(){
// alert("??");
_this.height_res = document.body.clientHeight - 61;
}
},
methods:{
get_height(){
this.height_res = document.body.clientHeight - 61;
},
changeToolBar(val){
this.activeIndex1=val
},
deleteAnnotation: function () {
this.$confirm('确定删除此标注', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
};
</script>
<style scoped>
.layout {
display: flex;
flex-direction: column;
height: 100%;
/*overflow: hidden;*/
background-color: #d9ecff;
}
.toolBar{
margin-top: 20px;
margin-bottom: 20px;
}
.workbench {
/*border: 2px solid #409eff;*/
margin-left: 20px;
margin-right: 40px;
border-radius: 5px;
box-shadow: 0px 0px 10px #dbdbdb;
background-color: white;
height: 87%;
}
#buttonBar {
position: fixed;
left: 50%;
bottom: 30px;
}
.sidebar {
height: 87%;
margin-left: 50px;
/*border: 2px solid #409eff;*/
border-radius: 5px;
box-shadow: 0px 0px 10px #dbdbdb;
background-color: white;
}
.img-list-title{
line-height: 40px;
padding: 0 10px;
background: #409EFF;
color: white;
}
.img-title-list-box{
height: 500px;
overflow: auto;
}
.add-file-btn-group >>> button{
margin-top: 3px;
margin-bottom: 3px;
}
</style>
DAPlatform-front/src/components/ongoingtask.vue
<template>
<div class="taskhall">
<el-container>
<el-main style="background-color: #FFFFFF">
<el-table
:data="tableData"
:header-cell-style="{color:'#409EFF'}"
height="570"
border
style="width: 100%">
<el-table-column
prop="taskId"
label="任务ID"
width="180">
</el-table-column>
<el-table-column
prop="splitNum"
label="分片数量"
width="180">
</el-table-column>
<el-table-column
prop="date"
label="发布时间"
width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="任务名称"
>
</el-table-column>
<el-table-column
prop="status"
label="任务状态"
width="180"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180">
<template slot-scope="scope">
<el-button @click="select()" type="text" size="small">修改</el-button>
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 删除 </el-button>
</template>
</el-table-column>
</el-table>
</el-main>
</el-container>
</div>
<div class="taskhall-container">
<div class="taskhall-left">
<div class="tasklist-container">
<div class="tasklist">
<div class="task-item" v-for="(item, index) in tasks" :key='index'>
<div>{{item.title}}</div>
<div>发布时间：{{item.date}}&emsp;&emsp;分片数量:{{item.number}}&emsp;&emsp;发布者：{{item.creater}}&emsp;&emsp;
<span v-if="item.type == 'text'">文本大小：{{item.size}}k</span>
<span v-else>图片张数：{{item.size}}张</span>
</div>
<el-button class="task-enter-btn1" @click="detail()" type="primary" plain>查看任务详情</el-button>
</div>
</div>
<div class="page-navigator">
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
const mock = true
if (mock) require('@/mock/api.js')
export default {
data() {
name: 'ongoingtask',
data () {
return {
tableData: [{
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '单物体语义分割',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '人脸质量判断',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status:'已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status:'已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status:'已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status:'已发布'
}]
activeName: '我的任务',
tasks: []
}
},
mounted () {
this.axios.get('/getTasks').then(res => {
this.tasks = res.data.data
})
},
methods: {
handleClick (tab, event) {
console.log(tab, event)
},
deleteRow(index, rows) {//删除改行
rows.splice(index, 1);
},
select () {
this.$router.replace('/select')
},
detail(){
this.$router.push('/ongoingdetail')
}
}
}
</script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 36px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped lang='scss'>
@import '@/assets/scss/config.scss';
.taskhall-container{
padding: 40px 10% 100px 10%;
min-width: $min-width;
min-height: 600px;
overflow:hidden;
background-color: $bg-color;
.taskhall-left{
background-color: white;
padding: 30px 20px 30px 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
.filter-container{
.filter-item{
display: flex;
align-items: center;
margin-bottom: 15px;
.filter-input{
margin-left: 20px;
width: 300px;
}
}
}
.tasklist-container{
.tasklist{
.task-item{
border-bottom: 1px solid $divider-color;
text-align: left;
padding: 10px 0px 22px;
position: relative;
div:first-of-type{
font-size: 18px;
margin-bottom: 7px;
font-weight: bold;
}
div:last-of-type{
font-size: 14px;
color: #959595;
}
.task-enter-btn1{
position: absolute;
right: 10px;
bottom: 10px;
}
}
}
}
.page-navigator{
margin-top: 30px;
}
}
.taskhall-right{
float: right;
width: 25%;
.notice{
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
.notice-title{
background-color: $theme-color;
color: white;
padding: 10px 0;
}
.notice-body{
background-color: white;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
</style>
DAPlatform-front/src/mock/api.js
......@@ -7,6 +7,7 @@ Mock.mock('/api/getTasks', {
'creater|1': ['王强', '赵信良', '李轩辕', '田予欢', '张三', '李斯'],
'date': Mock.Random.date('yyyy/MM/dd'),
'size|20-1000': 1,
'number|1-10': 1,
'type|1': ['text', 'image'],
'pieces|5-30': 1
}]
......@@ -14,8 +15,9 @@ Mock.mock('/api/getTasks', {
Mock.mock(/\/api\/getPieces\?id=[0-9]+/, {
'status': 0,
'data|10-50': [{
'id|1-9999': 1,
'fileNum|50-100': 1
'data|5-20': [{
'id|1-65535': 1,
'fileNum|10-50': 1,
'templateName|1': ['人脸识别标注模板', '动物标注模板', '本文标注模板', '桥梁标注模板', '植物标注模板']
}]
})
DAPlatform-front/src/router/index.js
......@@ -9,8 +9,14 @@ import check from '../components/CheckTask'
import release from '../components/ReleaseTask'
import publishtask from '../components/PublishTask'
import ongoingtask from '../components/ongoingtask'
import ongoingtaskdetail from '../components/OngoingTaskDetail'
import completeddetail from '../components/CompletedTaskDetail'
import checkdetail from '../components/CheckDetail'
import SelectText from '../components/textAnnotation/SelectText'
import SelectedText from '../components/textAnnotation/SelectedText'
import Table from '../components/textAnnotation/Table'
import imageAnnotiation from '../components/imageAnnotation/imageAnnotiation'
import layerAnnotation from '../components/imageAnnotation/layerAnnotation';
Vue.use(Router)
......@@ -63,15 +69,45 @@ export default new Router({
component: ongoingtask
},
{
path: '/ongoingdetail',
name: ongoingtaskdetail,
component: ongoingtaskdetail
},
{
path: '/completeddetail',
name: completeddetail,
component: completeddetail
},
{
path: '/checkdetail',
name: checkdetail,
component: checkdetail
},
{
path: '/select',
name: 'SelectText',
component: SelectText
},
{
path: '/selected',
name: 'SelectedText',
component: SelectedText
},
{
path: '/table',
name: 'table',
component: Table
},
{
path: '/image',
name: 'image',
component: imageAnnotiation
},
{
path: '/layer',
name: 'layer',
component: layerAnnotation
}
]
},
{
......
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