Skip to content

D
DA-Platform

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

Commit 7021ccd3 by 李景熙
Options

统一版式

parent e188cd82
Showing with 626 additions and 713 deletions
DAPlatform/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" 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: []
}
},
methods: {
checkdetail () {
this.$router.push('/').catch(data => {
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);
},
}
}
</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;
<!-- 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;
}
.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;
.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;
}
}
.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;
}
</style>
DAPlatform/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.date}}&emsp;&emsp;分片数量:{{item.number}}&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>查看任务详情</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);
},
}
}
</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;
<!-- 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;
}
.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;
.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;
}
}
.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;
}
</style>
DAPlatform/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>修改</el-button>
<el-button class="task-enter-btn2" @click.native.prevent="deleteRow(scope.$item, 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 {
data() {
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);
},
}
}
</script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
<!-- 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;
}
.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;
.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;
}
}
.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;
}
</style>
DAPlatform/src/components/ReleaseTask.vue
<template>
<div id="mission">
<el-container>
<!-- 头，用作导航栏-->
<el-header></el-header>
<el-main>
<div class="taskhall-container">
<el-container >
<el-main >
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" class="demo-dynamic">
<el-form-item>
<el-input v-model="taskName" @input="change($event)" placeholder="输入任务名称" style="width: 200px"></el-input>
......@@ -12,14 +10,14 @@
<el-button @click="addDomain">添加分片</el-button>
</el-form-item>
<el-form-item>
<!-- 采用手风琴实现折叠-->
<!-- 采用手风琴实现折叠-->
<el-collapse v-model="activeName" accordion>
<el-form-item v-for="(domain, index) in dynamicValidateForm.domains"
:key="domain.key"
:prop="'domains.' + index + '.value'">
<el-collapse-item
:title="'分片'+(++index)"
:name="index" style="border-bottom: 1px solid;border-bottom-color:white">
:title="'任务分片'+(++index)"
:name="index" style="border-bottom: 1px solid;border-bottom-color:white;font-size: 14px">
<!-- 上传图片-->
<el-row :gutter="20" >
<el-col span="8">
......@@ -28,21 +26,35 @@
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
list-type="picture">
:before-remove="beforeRemove"
multiple
:limit="7"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<el-select v-model="value" placeholder="请选择">
<el-select v-model="domain.value" placeholder="请选择" style="margin-top: 30px" >
<el-option
v-for="item in options"
v-for="item in domain.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
<el-col span="2" offset="4">
<el-col span="8">
<el-input type="textarea" :row="5" placeholder="请输入分片描述" @input="change($event)" v-model="domain.textarea" style="margin-bottom: 10px;" maxlength="50" show-word-limit="50">
</el-input>
<el-select v-model="domain.pvalue" placeholder="模板选择" >
<el-option
v-for="i in domain.piecesOptions"
:key="i.pvalue"
:label="i.plabel"
:value="i.pvalue">
</el-option>
</el-select>
</el-col>
<el-col span="2" offset="2">
<el-button type="primary" plain @click.prevent="removeDomain(domain)">删除分片</el-button>
</el-col>
</el-row>
......@@ -55,14 +67,13 @@
</el-container>
</div>
</div>
</template>
<script>
//export default {
// }
export default {
data() {
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
......@@ -74,13 +85,19 @@
}
</script>
<style scope 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;
}
</style>
<style>
#mission{
}
.el-header{
background-color: #409eff;
}
.el-main{
width: 90vw;
min-width: 800px;
......@@ -89,6 +106,18 @@
margin-right: auto;
margin-top: 40px;
}
.el-collapse-item,.el-collapse{
border-bottom:1px solid;
border-bottom-color: black;
}
.taskhall{
width: 90vw;
min-width: 800px;
/* border: solid; */
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}
</style>
<script>
export default {
......@@ -96,9 +125,49 @@
return {
dynamicValidateForm: {
domains: [{
value: ''
textarea: '',
options: [{
value: '1',
label: '文本分片'
}, {
value: '2',
label: '图像分片'
}],
},
value:'1',
piecesOptions: [{
pvalue: '1',
plabel: '模板1'
}, {
pvalue: '2',
plabel: '模板2'
}, {
pvalue: '3',
plabel: '模板3'
}],
pvalue:'',
},{
textarea: '',
options: [{
value: '1',
label: '文本分片'
}, {
value: '2',
label: '图像分片'
}],
value:'1',
piecesOptions: [{
pvalue: '1',
plabel: '模板1'
}, {
pvalue: '2',
plabel: '模板2'
}, {
pvalue: '3',
plabel: '模板3'
}],
pvalue:'',
},{
textarea: '',
options: [{
value: '1',
label: '文本分片'
......@@ -106,7 +175,63 @@
value: '2',
label: '图像分片'
}],
value:'1'
value:'1',
piecesOptions: [{
pvalue: '1',
plabel: '模板1'
}, {
pvalue: '2',
plabel: '模板2'
}, {
pvalue: '3',
plabel: '模板3'
}],
pvalue:'',
},{
textarea: '',
options: [{
value: '1',
label: '文本分片'
}, {
value: '2',
label: '图像分片'
}],
value:'1',
piecesOptions: [{
pvalue: '1',
plabel: '模板1'
}, {
pvalue: '2',
plabel: '模板2'
}, {
pvalue: '3',
plabel: '模板3'
}],
pvalue:'',
},{
textarea: '',
options: [{
value: '1',
label: '文本分片'
}, {
value: '2',
label: '图像分片'
}],
value:'1',
piecesOptions: [{
pvalue: '1',
plabel: '模板1'
}, {
pvalue: '2',
plabel: '模板2'
}, {
pvalue: '3',
plabel: '模板3'
}],
pvalue:'',
}],
},
};
},
methods: {
......@@ -131,7 +256,26 @@
},
addDomain() {
this.dynamicValidateForm.domains.push({
value: '',
textarea: '',
options: [{
value: '1',
label: '文本分片'
}, {
value: '2',
label: '图像分片'
}],
value:'1',
piecesOptions: [{
pvalue: '1',
plabel: '模板1'
}, {
pvalue: '2',
plabel: '模板2'
}, {
pvalue: '3',
plabel: '模板3'
}],
pvalue:'',
key: Date.now()
});
},
......@@ -141,3 +285,8 @@
}
}
</script>
DAPlatform/src/components/UserHome.vue
<template>
<div class="taskhall">
<div class="taskhall-container">
<el-container>
<el-aside width="300px">
......@@ -57,6 +57,16 @@
</div>
</template>
<style scope 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;
}
</style>
<style>
/* .taskhall{
width: 90vw;
......@@ -111,6 +121,7 @@
.grid-content {
border-radius: 4px;
height: 40px;
color: #000000
}
.grid-line {
border-radius: 4px;
......
DAPlatform/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="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;
<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>查看任务详情</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);
},
}
}
</script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
<!-- 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;
}
.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;
.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;
}
}
.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;
}
</style>
DAPlatform/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
}]
......
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