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

Commit a99bbab2 by Wang Yuhang

合并

parents 5dba3e54 472472ef
{
"name": "daplatform",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "BerlinDorin <876656787@qq.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"element-ui": "^2.13.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"sass-loader": "^7.3.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
...@@ -9,7 +9,6 @@ export default { ...@@ -9,7 +9,6 @@ export default {
name: 'App' name: 'App'
} }
</script> </script>
<style lang='scss'> <style lang='scss'>
body{ body{
margin: 0; margin: 0;
......
// 样式规范 // 样式规范
$min-width: 1000px; //页面主体部分最小宽度 $min-width: 1000px; //页面主体部分最小宽度
// 字体大小设置 // 字体大小设置
// 常规颜色配置 // 常规颜色配置
$theme-color: #409EFF !default; //element原生蓝,主题色及按钮色 $theme-color: #409EFF !default; //element原生蓝,主题色及按钮色
$bg-color: #d9ecff !default; //背景蓝 $bg-color: #d9ecff !default; //背景蓝
$font-color-footer: #969595 !default; //注脚的字体颜色 $font-color-footer: #969595 !default; //注脚的字体颜色
$divider-color: #DCDFE6 !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>
<el-container>
<el-main>
<el-table
:data="tableData"
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>
</template>
<script>
export default {
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: '已完成'
}]
}
}
}
</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;
}
</style>
\ No newline at end of file
<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>
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</div> </div>
<el-button v-if="activeIndex == '1'" class="btn" type="primary" @click="login">登录</el-button> <el-button v-if="activeIndex == '1'" class="btn" type="primary" @click="login">登录</el-button>
<el-button v-else class="btn" type="primary">注册</el-button> <el-button v-else class="btn" type="primary" @click="register">注册</el-button>
</div> </div>
</div> </div>
</template> </template>
...@@ -43,7 +43,10 @@ export default { ...@@ -43,7 +43,10 @@ export default {
this.activeIndex = key this.activeIndex = key
}, },
login () { login () {
this.$router.push('/taskhall').catch(data => {}) this.$router.push('/index').catch(data => {})
},
register(){
this.$router.push('/index').catch(data => {})
} }
} }
} }
......
...@@ -9,14 +9,14 @@ ...@@ -9,14 +9,14 @@
text-color="#fff" text-color="#fff"
active-text-color="#fff" active-text-color="#fff"
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="release">发布任务</el-menu-item> <el-menu-item index="/releasetask">发布任务</el-menu-item>
<el-menu-item index="4">已完成任务</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="login">退出登录</el-menu-item> <el-menu-item class="logout-btn" index="/">退出登录</el-menu-item>
</el-menu> </el-menu>
</div> </div>
</template> </template>
...@@ -26,7 +26,7 @@ export default { ...@@ -26,7 +26,7 @@ export default {
name: 'nav-header', name: 'nav-header',
data () { data () {
return { return {
activeIndex: 'taskhall' activeIndex: '/taskhall'
} }
}, },
methods: { methods: {
......
<template> <template>
<div id="release"> <div id="mission">
<el-header></el-header> <el-container>
<el-main> <!-- 头,用作导航栏-->
<el-form> <el-header></el-header>
<!-- 添加图片分片--> <el-main>
<el-row :gutter="20"> <el-form>
<el-col span="10"> <el-form-item>
<el-upload <el-button @click="addDomain">添加分片</el-button><el-button type="primary" @click="submitForm('dynamicValidateForm')">创建任务</el-button>
class="upload-demo" </el-form-item>
action="https://jsonplaceholder.typicode.com/posts/" <el-form-item>
:on-preview="handlePreview" <!-- 采用手风琴实现折叠-->
:on-remove="handleRemove" <el-collapse v-model="activeName" accordion>
:file-list="fileList" <el-collapse-item title="分片1" name="1" >
list-type="picture"> <!-- 上传图片-->
<el-button size="small" type="primary">点击上传</el-button> <el-row :gutter="20">
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> <el-col span="6">
</el-upload> <el-upload
</el-col> class="upload-demo"
<el-col span="10"> action="https://jsonplaceholder.typicode.com/posts/"
<el-upload :on-preview="handlePreview"
class="upload-demo" :on-remove="handleRemove"
ref="upload" :file-list="fileList"
action="https://jsonplaceholder.typicode.com/posts/" list-type="picture">
:on-preview="handlePreview" <el-button size="small" type="primary">点击上传</el-button>
:on-remove="handleRemove" <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
:file-list="fileList" </el-upload>
:auto-upload="false"> </el-col>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-col span="6" offset="2">
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button> <el-upload
<div slot="tip" class="el-upload__tip">只能上传文本文件</div> class="upload-demo"
</el-upload> ref="upload"
</el-col> action="https://jsonplaceholder.typicode.com/posts/"
</el-row> :on-preview="handlePreview"
<el-row :gutter="20"> :on-remove="handleRemove"
<el-col span="10"> :file-list="fileList"
<el-input v-model="input" placeholder="图片模板"></el-input> :auto-upload="false">
</el-col> <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-col span="10"> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
<el-input v-model="input" placeholder="文字模板"></el-input> <div slot="tip" class="el-upload__tip">只能上传文本文件</div>
</el-col> </el-upload>
</el-row> </el-col>
<el-row :gutter="20"> <el-col span="2" offset="2">
<el-col span="8"> <el-button type="primary" plain @click.prevent="removeDomain(domain)">删除分片</el-button>
<el-input v-model="input" placeholder="输入任务名称"> </el-col>
</el-input> </el-row>
</el-col> </el-collapse-item>
<el-col span="5">
<el-button type="primary" @click="onSubmit">创建任务</el-button>
</el-col>
</el-row>
</el-form>
</el-main> <el-collapse-item title="分片2" name="2" >
<el-footer></el-footer> <!-- 上传图片-->
<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> </div>
</template> </template>
<style>
#release {
}
.el-header , .el-footer{
color: black;
background-color: black;
width: 100%;
height: 200px;
}
.el-main{
min-height: 400px;
}
.el-row{
margin-bottom: 20px;
}
</style>
<script>
export default {
name: 'release'
}
</script>
<script> <script>
export default { export default {
data() { data() {
...@@ -96,3 +106,12 @@ export default { ...@@ -96,3 +106,12 @@ export default {
} }
} }
</script> </script>
<style>
#mission{
}
.el-header{
background-color: #409eff;
}
</style>
<template> <template>
<div class="main"> <el-container>
<div class="title"> <el-aside width="300px" background-color="#FFFFFF">
个人主页 <div>
<img src ="../assets/logo.png">
</div> </div>
<div class="information"> </el-aside>
<div class="avatar"> <el-main>
头像 <el-row>
<img> <el-col :span="6"><div class="grid-content bg-blue">用户名</div></el-col>
</div> <el-col :span="18"><div class="grid-content bg-blue-light">小明</div></el-col>
<div class="others"> </el-row>
<ul> <el-row>
<li>用户名</li> <el-col :span="6"><div class="grid-content bg-blue">用户ID</div></el-col>
<li>邮箱</li> <el-col :span="18"><div class="grid-content bg-blue-light">4</div></el-col>
<li>积分</li> </el-row>
</ul> <el-row>
</div> <el-col :span="6"><div class="grid-content bg-blue">邮箱</div></el-col>
</div> <el-col :span="18"><div class="grid-content bg-blue-light">xxx@buaa.edu.cn</div></el-col>
<div class="task"> </el-row>
<ul> <el-row>
<li>单物体语义分割</li> <el-col :span="6"><div class="grid-content bg-blue">类型</div></el-col>
<li>人脸质量判断</li> <el-col :span="18"><div class="grid-content bg-blue-light">任务发布者</div></el-col>
<li>图片属性标注</li> </el-row>
<li>任务4</li> <el-row>
<li>任务5</li> <el-col :span="6"><div class="grid-content bg-blue">密码</div></el-col>
</ul> <el-col :span="18"><div class="grid-content bg-blue-light"> <el-button type="danger" plain>修改密码</el-button></div></el-col>
</div> </el-row>
</div> <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>
</template> </template>
<style type="text/css">
/* *{ <style>
padding: 0; .el-aside {
margin: 0; background-color: #8EC3F9 !important;
}*/ color: #FFFFFF;
.title{ text-align: center;
width: 900px; line-height: 200px;
height: 120px;
margin-left: 150px;
margin-bottom: 20px;
margin-top: 20px;
font-size: 75px;
color:black;
background-color: #c0c0c0;
} }
.information{ .el-aside img{
width: 900px; margin-top: 50px;
width: 200px;
height: 200px; height: 200px;
margin-left: 150px;
margin-bottom: 20px;
} }
.avatar{ .el-main {
width: 200px; background-color: #e1f2fb !important;
float:left; color: #FFFFFF;
text-align: center;
line-height: 40px;
} }
.others{
width: 650px; body > .el-container {
float:right; margin-bottom: 40px;
margin-left: 10px;
} }
.task{
margin-left: 150px;
width: 900px; .el-row {
height: 1200px; margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
} }
.main{ .el-col {
background-color: #f5f5f5; border-radius: 4px;
width:1200px;
height: 1200px;
margin: 20px auto;
} }
.avatar img{ .bg-blue-dark {
height: 200px; background: #769fcd;
width: 200px; }
.bg-blue {
background: #8EC3F9;
}
.bg-blue-light {
background: #CAE4FF;
} }
.avatar, .others{ .grid-content {
background-color: #f5f5f5; border-radius: 4px;
height:200px; height: 40px;
} }
.others li{ .grid-line {
font-weight: bold; border-radius: 4px;
list-style: none; height: 6px;
hegiht:50px;
margin-bottom: 5px;
margin-top: 5px;
background-color: white;
line-height: 50px;
cursor: pointer;
float: center;
} }
.task li{ .row-bg {
font-weight: bold; padding: 10px 0;
list-style: none; background-color: #FFFFFF;
hegiht:50px;
margin-bottom: 5px;
margin-top: 5px;
background-color: white;
line-height: 50px;
cursor: pointer;
float: center;
} }
</style>
<script type="text/javascript">
</script> </style>
\ No newline at end of file
<template>
<div class="userbody">
<div class="side-bar">
</div>
<div class="main">
<div class="article" style="width: 75%;text-align: left;border-top:5px solid #343434;">
<div style="height: 100%;width: 100%;padding: 20px 30px">
<div class="userheadcontent" style="margin-bottom: 30px">
<div style="position: relative;width: 90px;height: 90px;margin-right: 15px;margin-left: 5px">
<img id="userImg" style="position: absolute;height: 120px" src="../assets/logo.png">
</div>
<div class="userheadleft">
<div class="title">{{'英语标注求助'}}</div>
<div class="status">发布用户名:{{'李宗国'}}</div>
<div class="status">发表时间:{{'2020年5月9号'}}</div>
<div class="status">所属单位:{{'北京航空航天大学'}}</div>
</div>
</div>
<div class="usercontent">
<div class="userleft">
<div class="userposttext" style = "width: 100px;">分片情况如下:</div>
<div class="userheadright">
<div class="headtext" @click="biaozhu" id="guanzhuButton1" >{{'+添加任务'}}</div>
</div>
<div style="width: 100%;height: 1px;background: darkgray"></div>
<div class="userintro1">{{'.'}}</div>
<div class="userintro">{{'人脸关键点标注,对人脸范围内的关键点进行标注和微调,每个点有准确的位置,用于精密的表情变化和人脸关键点识别。随着AI技术的发展,人脸关键点也越来越精细(数量多),对标注员的基本功和标注团队审核能力的要求也越来越高。标注质量的好坏,对人工智能人脸模型的算法精确度有很大作用,如果人脸关键点标注不好,那么人脸识别算法就无法很好地进行人脸识别,影响实际应用!'}}</div>
<div class="userheadright">
<div class="headtext" @click="biaozhu" id="guanzhuButton2" >{{'+添加任务'}}</div>
</div>
<div style="width: 100%;height: 1px;background: darkgray"></div>
<div class="userintro1">{{'.'}}</div>
<div style="position: relative;width: 90px;overflow: hidden;height: 90px;margin-right: 15px;margin-left: 5px">
<img id="userImg1" style="position: absolute;height: 90px" src="../assets/1.jpg">
</div>
<div class="userheadright">
<div class="headtext" @click="biaozhu" id="guanzhuButton3" >{{'+添加任务'}}</div>
</div>
<div style="width: 100%;height: 1px;background: darkgray"></div>
<div class="userintro1">{{'.'}}</div>
<div class="userintro">{{'人脸关键点检测方法大致分为三种:基于模型的ASM(Active Shape Model)和AAM(Active Appearnce Model)基于级联形状回归CPR(Cascaded pose regression)基于深度学习的方法专业的人工智能数据服务商,提供数据采集与数据标注服务'}}</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'execute',
methods: {
biaozhu () {
console.log('1')
this.$router.push({path: '/Signup'})
}
}
}
</script>
<style scoped>
.userheadcontent{
display: flex;
}
.userheadleft{
flex: 1;
height: 100%;
margin-right: 10px;
}
.userheadright{
/*display: flex;*/
width: 30%;
height: 100%;
text-align:center;
float: right;
vertical-align: middle;
}
.usercontent{
display: flex;
}
.userintro{
font-size: 14px;
margin-top: 30px;
margin-bottom: 15px;
line-height: 25px;
}
.userintro1{
font-size: 0px;
margin-top: 0px;
margin-bottom: 15px;
line-height: 25px;
}
.userleft{
flex: 1;
height: 100%;
margin-right: 20px;
}
.headtext{
outline:none;
font-family: "Yu Gothic UI";
font-size: 15px;
height: 35px;
width:100px;
border-radius: 30px;
background: rgba(0,0,0,0);
text-align: center;
vertical-align:middle;
line-height: 35px;
color: #343434;
border: 1px solid #343434;
transition: background-color 0.2s ease,border-width 0.2s ease,border-radius 0.2s ease;
}
.headtext:hover{
background: #a6dadd;
color: white;
border: 1px solid #a6dadd;
}
.headtext:active{
border-radius: 35px;
background: #343434;
color: white;
border: 1px solid #343434;
}
.userposttext{
color: #343434;
font-size: 15px;
font-weight: bold;
border-bottom: black solid 3px;
}
.userbody {
background:#f1f1f1;
/*line-height: 1.7;*/
height: 100%;
width: 100%;
}
a {
text-decoration: none;
}
a, body {
color: #9fc6dc;
}
.side-bar {
float: left;
width: 20%;
height: 100%;
position: fixed;
}
.side-bar > * {
padding: 10px 15px;
}
.side-bar .nav a,
.side-bar .tag-list a {
display: block;
padding: 5px;
color: #888;
-webkit-transition: color 200ms;
-o-transition: color 200ms;
transition: color 200ms;
}
.side-bar .nav a:hover,
.side-bar .tag-list a:hover {
color: #9fc6dc;
}
.side-bar .nav a {
font-weight: 700;
}
.main {
float: right;
width: 80%;
color: #454545;
}
.article-list .item .title,
.article .title {
color: #454545;
font-size: 26px;
font-weight: 700;
margin-bottom: 30px;
}
.article-list .item .status,
.article .status {
font-size: 13px;
color: #ccc;
}
.article-list .item > *,
.article > * {
margin: 10px 0;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
</style>
<template>
<div id = "missionDetail">
<el-container>
<el-header>
</el-header>
<el-main>
<el-row :gutter="20" >
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="待审核的任务" name="first">未完成的任务<p></p>
<el-row :gutter="24" style="border-bottom: 1px solid;border-bottom-color: #8c939d;padding-bottom: 5px">
<el-col span="4" >
<li>任务名:待审核任务:1</li>
<li>当前分数:1</li>
<li>发布者:xxx</li>
</el-col>
<el-col span="8" offset="">
任务简介:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</el-col>
<el-col span="2" offset="4">
<el-input v-model="input" placeholder="输入得分"></el-input>
<el-button>点击打分</el-button></el-col>
</el-row>
<el-form>
<span>图片标注:</span>
<el-row :gutter="20" style="border-bottom: 1px solid;border-bottom-color: #8c939d;padding-bottom: 5px">
<el-col span="6" offset="1">
<el-row :gutter="6">图1:</el-row>
<el-row :gutter="6"><el-tag>属性1</el-tag></el-row>
</el-col>
<el-col span="6" offset="1">
<el-row :gutter="6">图2:</el-row>
<el-row :gutter="6"><el-tag>属性2</el-tag></el-row>
</el-col>
<el-col span="6" offset="1">
<el-row :gutter="6">图3:</el-row>
<el-row :gutter="6"><el-tag>属性3</el-tag></el-row>
</el-col>
</el-row>
<span>文字标注:</span>
<el-row :gutter="20" style="border-bottom: 1px solid;border-bottom-color: #8c939d;padding-bottom: 5px">
<el-col span="6" offset="1">
<el-row :gutter="6">文字1:</el-row>
<el-row :gutter="6"><el-tag>属性1</el-tag></el-row>
</el-col>
<el-col span="6" offset="1">
<el-row :gutter="6">文字2:</el-row>
<el-row :gutter="6"><el-tag>属性2</el-tag></el-row>
</el-col>
<el-col span="6" offset="1">
<el-row :gutter="6">文字3:</el-row>
<el-row :gutter="6"><el-tag>属性3</el-tag></el-row>
</el-col>
</el-row>
</el-form>
<el-button>提交</el-button>
</el-tab-pane>
<el-tab-pane label="已完成的任务" name="second">已完成的任务
<el-row :gutter="20" style="border-bottom: 1px solid;border-bottom-color: #8c939d;padding-bottom: 5px">
<el-col span="4" >
<li>任务名:已完成任务:1</li>
<li>当前分数:1</li>
<li>发布者:xxx</li>
</el-col>
<el-col span="8" >
任务简介:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</el-col>
<el-col span="2" offset="4">
<el-button>导出任务</el-button></el-col>
</el-row>
<span>图片标注:</span>
<el-row :gutter="20" style="border-bottom: 1px solid;border-bottom-color: #8c939d;padding-bottom: 5px">
<el-col span="6" offset="1">
<el-row :gutter="6">图1:</el-row>
<el-row :gutter="6"><el-tag>属性1</el-tag></el-row>
</el-col>
<el-col span="6" offset="1">
<el-row :gutter="6">图2:</el-row>
<el-row :gutter="6"><el-tag>属性2</el-tag></el-row>
</el-col>
<el-col span="6" offset="1">
<el-row :gutter="6">图3:</el-row>
<el-row :gutter="6"><el-tag>属性3</el-tag></el-row>
</el-col>
</el-row>
<span>文字标注:</span>
<el-row :gutter="20" style="border-bottom: 1px solid;border-bottom-color: #8c939d;padding-bottom: 5px">
<el-col span="6" offset="1">
<el-row :gutter="6">文字1:</el-row>
<el-row :gutter="6"><el-tag>属性1</el-tag></el-row>
</el-col>
<el-col span="6" offset="1">
<el-row :gutter="6">文字2:</el-row>
<el-row :gutter="6"><el-tag>属性2</el-tag></el-row>
</el-col>
<el-col span="6" offset="1">
<el-row :gutter="6">文字3:</el-row>
<el-row :gutter="6"><el-tag>属性3</el-tag></el-row>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</el-row>
</el-main>
<el-footer>
</el-footer>
</el-container>
</div>
</template>
<script>
export default {
name: 'missionDetail'
}
</script>
<style>
#missionDetail {
}
.el-header , .el-footer{
color: black;
background-color: black;
width: 100%;
height: 200px;
}
.el-main{
min-height: 400px;
}
.el-row{
margin-bottom: 20px;
}
</style>
<script>
export default {
data() {
return {
activeName: 'first'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>
<template>
<div class="taskhall">
<div class="taskhall-left">
<div class="task-list">
<div class="task-item">
<span class="task-item-title">用户名</span>
</div>
<div class="task-item">
<span class="task-item-title">邮箱号</span>
</div>
<div class="task-item">
<span class="task-item-title">积分</span>
</div>
<ul>
<li><a :class="{'tab-active': activeName == '已发布任务'}" @click="activeName='已发布任务'">已发布任务</a></li>
<li><a :class="{'tab-active': activeName == '待审核任务'}" @click="activeName='待审核任务'">待审核任务</a></li>
<li><a :class="{'tab-active': activeName == '已完成任务'}" @click="activeName='已完成任务'">已完成任务</a></li>
</ul>
<div class="tasks-body">
<div class="task-filter">
<div class="task-filter-item">
<!-- 任务类型: -->
</div>
</div>
<div class="tasks">
<div class="task-item">
<span class="task-item-title">单物体语义分割</span>
<button type="button" class="btn btn-success">进入任务</button>
</div>
<div class="task-item">
<span class="task-item-title">人脸质量判断</span>
<button type="button" class="btn btn-success">进入任务</button>
</div>
<div class="task-item">
<span class="task-item-title">图片属性标注</span>
<button type="button" class="btn btn-success">进入任务</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'releasepersonal',
data () {
return {
activeName: '已发布任务'
}
},
methods: {
handleClick (tab, event) {
console.log(tab, event)
}
}
}
</script>
<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
.taskhall{
width: 90vw;
min-width: 800px;
/* border: solid; */
margin-left: auto;
margin-right: auto;
margin-top: 40px;
display: flex;
}
.taskhall-left{
/* border: solid; */
width: 70%;
height: 500px;
}
.task-list{
width: 95%;
height: 100%;
}
.task-list ul{
display: flex;
padding: 0;
border-bottom: 1px solid rgb(97, 211, 173);
margin-bottom: 0;
}
.task-list ul li{
display: inline-block;
padding:0px;
}
.task-list ul li a{
display: inline-block;
width: 100%;
padding: 15px;
height: 100%;
color: black;
cursor: pointer;
}
.tab-active{
border-radius: 5px 5px 0 0;
background-color: rgb(97, 211, 173);
color: white;
}
.tasks-body{
border: 1px solid rgb(97, 211, 173);
border-top: none;
padding-top: 20px;
/* width: 100%; */
/* height: 500px; */
}
.task-filter{
text-align: left;
}
.task-filter-item{
margin-left: 30px;
margin-bottom: 20px;
}
.task-type-btn{
background-color: rgb(97, 211, 173);
}
.btn-success{
background-color: rgb(97, 211, 173);
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:rgb(97, 211, 173);
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{
/* border: solid; */
width: 30%;
height: 500px;
}
.panel-success{
border-color: rgb(97, 211, 173);
}
.panel-heading{
background-color: rgb(97, 211, 173);
border-color: rgb(97, 211, 173);
}
</style>
import Mock from 'mockjs' import Mock from 'mockjs'
Mock.mock('/api/getTasks', { Mock.mock('/api/getTasks', {
'status': 0, 'status': 0,
'data|10': [{ 'data|10': [{
'title|1': ['冰箱物品标注', '新通路图片', '人脸识别', '客服语音', '行人十字画框', '动物打点标注'], 'title|1': ['冰箱物品标注', '新通路图片', '人脸识别', '客服语音', '行人十字画框', '动物打点标注'],
'creater|1': ['王强', '赵信良', '李轩辕', '田予欢', '张三', '李斯'], 'creater|1': ['王强', '赵信良', '李轩辕', '田予欢', '张三', '李斯'],
'date': Mock.Random.date('yyyy/MM/dd'), 'date': Mock.Random.date('yyyy/MM/dd'),
'size|20-1000': 1, 'size|20-1000': 1,
'type|1': ['text', 'image'] 'type|1': ['text', 'image']
}] }]
}) })
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import release from '@/components/release' import Login from '../components/Login'
import MissionDetail from '../components/missionDetail(1)'
import execute from '../components/execute'
import Login from '@/components/Login'
import releasepersonal from '../components/releasepersonal'
import userhome from '../components/UserHome' 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 check from '../components/CheckTask'
import release from '../components/ReleaseTask'
Vue.use(Router) Vue.use(Router)
...@@ -25,36 +24,31 @@ export default new Router({ ...@@ -25,36 +24,31 @@ export default new Router({
component: TaskHall component: TaskHall
}, },
{ {
path: 'release', path: '/userhome',
name: 'Release',
component: release
},
{
path: 'userhome',
name: 'userhome', name: 'userhome',
component: userhome component: userhome
},
{
path: '/completed',
name: 'completed',
component: completed
},
{
path: '/check',
name: 'check',
component: check
},
{
path: '/releasetask',
name: 'release',
component: release
} }
] ]
}, },
{ {
path: '/missiondetail', path: '/',
name: 'missiondetail',
component: MissionDetail
},
{
path: '/execute',
name: 'execute',
component: execute
},
{
path: '/login',
name: 'login', name: 'login',
component: Login component: Login
},
{
path: '/userinfo',
name: 'userinfo',
component: releasepersonal
} }
] ]
}) })
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