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

Commit 472472ef by 李景熙

update taskhall,checktask,releasetask

parent 346345b5
...@@ -546,6 +546,32 @@ ...@@ -546,6 +546,32 @@
"integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==", "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==",
"dev": true "dev": true
}, },
"axios": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"requires": {
"follow-redirects": "1.5.10"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"requires": {
"ms": "2.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"requires": {
"debug": "=3.1.0"
}
}
}
},
"babel-code-frame": { "babel-code-frame": {
"version": "6.26.0", "version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
...@@ -7376,6 +7402,15 @@ ...@@ -7376,6 +7402,15 @@
"minimist": "^1.2.5" "minimist": "^1.2.5"
} }
}, },
"mockjs": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/mockjs/-/mockjs-1.1.0.tgz",
"integrity": "sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==",
"dev": true,
"requires": {
"commander": "*"
}
},
"move-concurrently": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
...@@ -7393,8 +7428,7 @@ ...@@ -7393,8 +7428,7 @@
"ms": { "ms": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
"dev": true
}, },
"multicast-dns": { "multicast-dns": {
"version": "6.2.3", "version": "6.2.3",
...@@ -12977,6 +13011,12 @@ ...@@ -12977,6 +13011,12 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==" "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
}, },
"vue-axios": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-2.1.5.tgz",
"integrity": "sha512-th5xVbInVoyIoe+qY+9GCflEVezxAvztD4xpFF39SRQYqpoKD2qkmX8yv08jJG9a2SgNOCjirjJGSwg/wTrbmA==",
"dev": true
},
"vue-eslint-parser": { "vue-eslint-parser": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
......
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"build": "node build/build.js" "build": "node build/build.js"
}, },
"dependencies": { "dependencies": {
"axios": "^0.19.2",
"element-ui": "^2.13.1", "element-ui": "^2.13.1",
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-router": "^3.0.1" "vue-router": "^3.0.1"
...@@ -42,6 +43,7 @@ ...@@ -42,6 +43,7 @@
"file-loader": "^1.1.4", "file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1", "friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1", "html-webpack-plugin": "^2.30.1",
"mockjs": "^1.1.0",
"node-notifier": "^5.1.2", "node-notifier": "^5.1.2",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^3.2.0", "optimize-css-assets-webpack-plugin": "^3.2.0",
...@@ -56,6 +58,7 @@ ...@@ -56,6 +58,7 @@
"shelljs": "^0.7.6", "shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1", "uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8", "url-loader": "^0.5.8",
"vue-axios": "^2.1.5",
"vue-loader": "^13.3.0", "vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1", "vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2", "vue-template-compiler": "^2.5.2",
......
// 样式规范
$min-width: 1000px; //页面主体部分最小宽度
// 字体大小设置
// 常规颜色配置
$theme-color: #409EFF !default; //element原生蓝,主题色及按钮色
$bg-color: #d9ecff !default; //背景蓝
$font-color-footer: #969595 !default; //注脚的字体颜色
$divider-color: #DCDFE6 !default; //分割线颜色
<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>
</template>
<script>
export default {
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: '待审核'
}]
}
},
methods: {
checkdetail () {
this.$router.push('/').catch(data => {
})
}
}
}
</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;
}
</style>
<template> <template>
<el-container>
<el-header>已完成任务</el-header>
<el-container> <el-container>
<el-main> <el-main>
<el-table <el-table
...@@ -54,8 +53,7 @@ ...@@ -54,8 +53,7 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-main> </el-main>
</el-container>
<el-footer>Footer</el-footer>
</el-container> </el-container>
</template> </template>
......
...@@ -11,9 +11,9 @@ ...@@ -11,9 +11,9 @@
router="true"> router="true">
<el-menu-item index="/taskhall">任务大厅</el-menu-item> <el-menu-item index="/taskhall">任务大厅</el-menu-item>
<el-menu-item index="2">我的任务</el-menu-item> <el-menu-item index="2">我的任务</el-menu-item>
<el-menu-item index="3">发布任务</el-menu-item> <el-menu-item index="/releasetask">发布任务</el-menu-item>
<el-menu-item index="/completed">已完成任务</el-menu-item> <el-menu-item index="/completed">已完成任务</el-menu-item>
<el-menu-item index="5">待审核任务</el-menu-item> <el-menu-item index="/check">待审核任务</el-menu-item>
<el-menu-item index="6">我的发布</el-menu-item> <el-menu-item index="6">我的发布</el-menu-item>
<el-menu-item index="/userhome">个人中心</el-menu-item> <el-menu-item index="/userhome">个人中心</el-menu-item>
<el-menu-item class="logout-btn" index="/">退出登录</el-menu-item> <el-menu-item class="logout-btn" index="/">退出登录</el-menu-item>
......
<template>
<div id="mission">
<el-container>
<!-- 头,用作导航栏-->
<el-header></el-header>
<el-main>
<el-form>
<el-form-item>
<el-button @click="addDomain">添加分片</el-button><el-button type="primary" @click="submitForm('dynamicValidateForm')">创建任务</el-button>
</el-form-item>
<el-form-item>
<!-- 采用手风琴实现折叠-->
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="分片1" name="1" >
<!-- 上传图片-->
<el-row :gutter="20">
<el-col span="6">
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-col>
<el-col span="6" offset="2">
<el-upload
class="upload-demo"
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传文本文件</div>
</el-upload>
</el-col>
<el-col span="2" offset="2">
<el-button type="primary" plain @click.prevent="removeDomain(domain)">删除分片</el-button>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="分片2" name="2" >
<!-- 上传图片-->
<el-row :gutter="20">
<el-col span="6">
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-col>
<el-col span="6" offset="2">
<el-upload
class="upload-demo"
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传文本文件</div>
</el-upload>
</el-col>
<el-col span="2" offset="2">
<el-button type="primary" plain @click.prevent="removeDomain(domain)">删除分片</el-button>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
</el-form-item>
</el-form>
</el-main>
</el-container>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
}
}
}
</script>
<style>
#mission{
}
.el-header{
background-color: #409eff;
}
</style>
<template> <template>
<div class="taskhall"> <div class="taskhall-container">
<div class="taskhall-left"> <div class="taskhall-left">
<div class="task-list"> <div class="filter-container">
<ul> <div class="filter-item">
<li><a :class="{'tab-active': activeName == '任务大厅'}" @click="activeName='任务大厅'">任务大厅</a></li> 任务名称:
</ul> <el-input class="filter-input" prefix-icon="el-icon-search" v-model="input" placeholder="请输入查询条件"></el-input>
<div class="tasks-body"> </div>
<div class="task-filter"> <div class="filter-item">
<div class="task-filter-item"> <el-button class="filter-button" type="primary">查询</el-button>
<!-- 任务类型: --> </div>
</div> <el-divider></el-divider>
<div class="task-filter-item"> </div>
任务名称:<input type="text"> <div class="tasklist-container">
</div> <div class="tasklist">
<div class="task-filter-item btn-group" role="group" aria-label="..."> <div class="task-item" v-for="(item, index) in tasks" :key='index'>
<button type="button" class="btn btn-success">查询</button> <div>{{item.title}}</div>
</div> <div>发布人:{{item.creater}}&emsp;&emsp;发布时间:{{item.date}}&emsp;&emsp;
</div> <span v-if="item.type == 'text'">文本大小:{{item.size}}k</span>
<div class="tasks"> <span v-else>图片张数:{{item.size}}</span>
<div class="task-item">
<span class="task-item-state">进行中</span>
<span class="task-item-title">单物体语义分割</span>
<button type="button" class="btn btn-success">进入任务</button>
</div>
<div class="task-item">
<span class="task-item-state">进行中</span>
<span class="task-item-title">人脸质量判断</span>
<button type="button" class="btn btn-success">进入任务</button>
</div>
<div class="task-item">
<span class="task-item-state">进行中</span>
<span class="task-item-title">图片属性标注</span>
<button type="button" class="btn btn-success">进入任务</button>
</div> </div>
<el-button class="task-enter-btn" type="primary" plain>进入任务</el-button>
</div> </div>
</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> </div>
<div class="taskhall-right"> <div class="taskhall-right">
<div class="panel panel-success"> <div class="notice">
<div class="panel-heading"> <div class="notice-title">公告</div>
<h3 class="panel-title">公告栏</h3> <div class="notice-body">
<img src="@/assets/empty.png" alt="暂无公告">
</div> </div>
<div class="panel-body"> </div>
新任务即将发布<br> <div class="notice">
... <div class="notice-title">公告</div>
<div class="notice-body">
<img src="@/assets/empty.png" alt="暂无公告">
</div> </div>
</div> </div>
</div> </div>
...@@ -52,13 +50,22 @@ ...@@ -52,13 +50,22 @@
</template> </template>
<script> <script>
const mock = true
if (mock) require('@/mock/api.js')
export default { export default {
name: 'taskhall', name: 'taskhall',
data () { data () {
return { return {
activeName: '任务大厅' activeName: '任务大厅',
tasks: []
} }
}, },
mounted () {
this.axios.get('/getTasks').then(res => {
this.tasks = res.data.data
})
},
methods: { methods: {
handleClick (tab, event) { handleClick (tab, event) {
console.log(tab, event) console.log(tab, event)
...@@ -68,101 +75,78 @@ export default { ...@@ -68,101 +75,78 @@ export default {
</script> </script>
<!-- Add 'scoped' attribute to limit CSS to this component only --> <!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped> <style scoped lang='scss'>
.taskhall{ @import '@/assets/scss/config.scss';
width: 90vw; .taskhall-container{
min-width: 800px; padding: 40px 10% 100px 10%;
/* border: solid; */ min-width: $min-width;
margin-left: auto; min-height: 600px;
margin-right: auto; overflow:hidden;
margin-top: 40px; background-color: $bg-color;
display: flex;
}
.taskhall-left{ .taskhall-left{
/* border: solid; */ float: left;
width: 70%; width: 70%;
height: 500px; background-color: white;
} padding: 30px 20px 30px 20px;
.task-list{ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
width: 95%; .filter-container{
height: 100%; .filter-item{
} display: flex;
.task-list ul{ align-items: center;
display: flex; margin-bottom: 15px;
padding: 0; .filter-input{
border-bottom: 1px solid #409EFF; margin-left: 20px;
margin-bottom: 0; width: 300px;
} }
.task-list ul li{ }
display: inline-block; }
padding:0px; .tasklist-container{
} .tasklist{
.task-list ul li a{ .task-item{
display: inline-block; border-bottom: 1px solid $divider-color;
width: 100%; text-align: left;
padding: 15px; padding: 10px 0px 22px;
height: 100%; position: relative;
color: black; div:first-of-type{
cursor: pointer; font-size: 18px;
} margin-bottom: 7px;
.tab-active{ font-weight: bold;
border-radius: 5px 5px 0 0; }
background-color: #409EFF; div:last-of-type{
color: white; font-size: 14px;
} color: #959595;
.tasks-body{ }
border: 1px solid #409EFF; .task-enter-btn{
border-top: none; position: absolute;
padding-top: 20px; right: 0px;
/* width: 100%; */ bottom: 10px;
/* height: 500px; */ }
} }
.task-filter{ }
text-align: left; }
} .page-navigator{
.task-filter-item{ margin-top: 30px;
margin-left: 30px; }
margin-bottom: 20px;
}
.task-type-btn{
background-color: #409EFF;
}
.btn-success{
background-color: #409EFF;
border: none;
}
.task-item{
position: relative;
display: flex;
height: 80px;
border-top: 1px solid rgb(231, 231, 231);
align-items: center;
}
.task-item-state{
color:#409EFF;
font-weight: bold;
margin-left: 30px;
}
.task-item-title{
font-size: 20px;
font-weight: bold;
margin-left: 40px;
}
.task-item button{
position: absolute;
right: 20px;
/* line-height: 50px; */
} }
.taskhall-right{ .taskhall-right{
/* border: solid; */ float: right;
width: 30%; width: 25%;
height: 500px; .notice{
} box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
.panel-success{ margin-bottom: 30px;
border-color: #409EFF; .notice-title{
} background-color: $theme-color;
.panel-heading{ color: white;
background-color: #409EFF; padding: 10px 0;
border-color: #409EFF; }
.notice-body{
background-color: white;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
}
} }
}
</style> </style>
<template> <template>
<el-container> <el-container>
<el-header>个人界面</el-header> <el-aside width="300px" background-color="#FFFFFF">
<el-container>
<el-aside width="300px">
<div> <div>
<img src ="../assets/logo.png"> <img src ="../assets/logo.png">
</div> </div>
</el-aside> </el-aside>
<el-main> <el-main>
<el-row> <el-row>
<el-col :span="6"><div class="grid-content bg-purple">用户名</div></el-col> <el-col :span="6"><div class="grid-content bg-blue">用户名</div></el-col>
<el-col :span="18"><div class="grid-content bg-purple-light">小明</div></el-col> <el-col :span="18"><div class="grid-content bg-blue-light">小明</div></el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="6"><div class="grid-content bg-purple">用户ID</div></el-col> <el-col :span="6"><div class="grid-content bg-blue">用户ID</div></el-col>
<el-col :span="18"><div class="grid-content bg-purple-light">4</div></el-col> <el-col :span="18"><div class="grid-content bg-blue-light">4</div></el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="6"><div class="grid-content bg-purple">邮箱</div></el-col> <el-col :span="6"><div class="grid-content bg-blue">邮箱</div></el-col>
<el-col :span="18"><div class="grid-content bg-purple-light">xxx@buaa.edu.cn</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-row> <el-row>
<el-col :span="6"><div class="grid-content bg-purple">类型</div></el-col> <el-col :span="6"><div class="grid-content bg-blue">类型</div></el-col>
<el-col :span="18"><div class="grid-content bg-purple-light">任务发布者</div></el-col> <el-col :span="18"><div class="grid-content bg-blue-light">任务发布者</div></el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="6"><div class="grid-content bg-purple">密码</div></el-col> <el-col :span="6"><div class="grid-content bg-blue">密码</div></el-col>
<el-col :span="18"><div class="grid-content bg-purple-light"> <el-button type="danger" plain>修改密码</el-button></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-row> <el-row>
<el-col :span="24"><div class="grid-line bg-purple-dark" height:2px></div></el-col> <el-col :span="24"><div class="grid-line bg-blue-dark" height:2px></div></el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="8"><div class="grid-content bg-purple">类型</div></el-col> <el-col :span="8"><div class="grid-content bg-blue">类型</div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light">积分</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-purple">准确率</div></el-col> <el-col :span="8"><div class="grid-content bg-blue">准确率</div></el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="8"><div class="grid-content bg-purple">图象</div></el-col> <el-col :span="8"><div class="grid-content bg-blue">图象</div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light">233</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-purple">66%</div></el-col> <el-col :span="8"><div class="grid-content bg-blue">66%</div></el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="8"><div class="grid-content bg-purple">文本</div></el-col> <el-col :span="8"><div class="grid-content bg-blue">文本</div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light">323</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-purple">77%</div></el-col> <el-col :span="8"><div class="grid-content bg-blue">77%</div></el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="8"><div class="grid-content bg-purple">发布</div></el-col> <el-col :span="8"><div class="grid-content bg-blue">发布</div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light">333</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-purple">\</div></el-col> <el-col :span="8"><div class="grid-content bg-blue">\</div></el-col>
</el-row> </el-row>
</el-main> </el-main>
</el-container> </el-container>
<el-footer>Footer</el-footer>
</el-container>
</template> </template>
<style> <style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside { .el-aside {
background-color: #D3DCE6; background-color: #8EC3F9 !important;
color: #333; color: #FFFFFF;
text-align: center; text-align: center;
line-height: 200px; line-height: 200px;
} }
...@@ -78,8 +67,8 @@ ...@@ -78,8 +67,8 @@
height: 200px; height: 200px;
} }
.el-main { .el-main {
background-color: #E9EEF3; background-color: #e1f2fb !important;
color: #333; color: #FFFFFF;
text-align: center; text-align: center;
line-height: 40px; line-height: 40px;
} }
...@@ -88,14 +77,6 @@ ...@@ -88,14 +77,6 @@
margin-bottom: 40px; 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;
}
.el-row { .el-row {
margin-bottom: 20px; margin-bottom: 20px;
...@@ -106,26 +87,26 @@ ...@@ -106,26 +87,26 @@
.el-col { .el-col {
border-radius: 4px; border-radius: 4px;
} }
.bg-purple-dark { .bg-blue-dark {
background: #99a9bf; background: #769fcd;
} }
.bg-purple { .bg-blue {
background: #d3dce6; background: #8EC3F9;
} }
.bg-purple-light { .bg-blue-light {
background: #e5e9f2; background: #CAE4FF;
} }
.grid-content { .grid-content {
border-radius: 4px; border-radius: 4px;
height: 40px; height: 40px;
} }
.grid-line { .grid-line {
border-radius: 4px; border-radius: 4px;
height: 6px; height: 6px;
} }
.row-bg { .row-bg {
padding: 10px 0; padding: 10px 0;
background-color: #f9fafc; background-color: #FFFFFF;
} }
</style> </style>
\ No newline at end of file
...@@ -5,7 +5,13 @@ import App from './App' ...@@ -5,7 +5,13 @@ import App from './App'
import router from './router' import router from './router'
import ElementUI from 'element-ui' import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import VueAxios from 'vue-axios'
axios.defaults.baseURL = '/api'
axios.defaults.timeout = 8000
Vue.use(VueAxios, axios)
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(ElementUI) Vue.use(ElementUI)
......
import Mock from 'mockjs'
Mock.mock('/api/getTasks', {
'status': 0,
'data|10': [{
'title|1': ['冰箱物品标注', '新通路图片', '人脸识别', '客服语音', '行人十字画框', '动物打点标注'],
'creater|1': ['王强', '赵信良', '李轩辕', '田予欢', '张三', '李斯'],
'date': Mock.Random.date('yyyy/MM/dd'),
'size|20-1000': 1,
'type|1': ['text', 'image']
}]
})
...@@ -5,6 +5,8 @@ import userhome from '../components/UserHome' ...@@ -5,6 +5,8 @@ import userhome from '../components/UserHome'
import TaskHall from '../components/Taskhall' import TaskHall from '../components/Taskhall'
import Index from '../components/Index' import Index from '../components/Index'
import completed from '../components/CompletedTask' import completed from '../components/CompletedTask'
import check from '../components/CheckTask'
import release from '../components/ReleaseTask'
Vue.use(Router) Vue.use(Router)
...@@ -29,6 +31,16 @@ export default new Router({ ...@@ -29,6 +31,16 @@ export default new Router({
path: '/completed', path: '/completed',
name: 'completed', name: 'completed',
component: completed component: completed
},
{
path: '/check',
name: 'check',
component: check
},
{
path: '/releasetask',
name: 'release',
component: release
} }
] ]
}, },
......
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