Skip to content

D
DA-Platform

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

Commit 5dba3e54 by Wang Yuhang
Options

完成任务大厅页面

parent def0405c
Showing with 282 additions and 312 deletions
.gitignore 0 → 100644
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
DAPlatform/build/webpack.base.conf.js
...@@ -75,6 +75,10 @@ module.exports = { ...@@ -75,6 +75,10 @@ module.exports = {
limit: 10000, limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]') name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
} }
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
} }
] ]
}, },
...@@ -89,11 +93,5 @@ module.exports = { ...@@ -89,11 +93,5 @@ module.exports = {
net: 'empty', net: 'empty',
tls: 'empty', tls: 'empty',
child_process: 'empty' child_process: 'empty'
}, }
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
} }
DAPlatform/package.json
...@@ -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,7 +43,9 @@ ...@@ -42,7 +43,9 @@
"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",
"optimize-css-assets-webpack-plugin": "^3.2.0", "optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0", "ora": "^1.2.0",
"portfinder": "^1.0.13", "portfinder": "^1.0.13",
...@@ -50,10 +53,12 @@ ...@@ -50,10 +53,12 @@
"postcss-loader": "^2.0.8", "postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1", "postcss-url": "^7.2.1",
"rimraf": "^2.6.0", "rimraf": "^2.6.0",
"sass-loader": "^7.3.1",
"semver": "^5.3.0", "semver": "^5.3.0",
"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",
......
DAPlatform/src/App.vue
...@@ -10,13 +10,16 @@ export default { ...@@ -10,13 +10,16 @@ export default {
} }
</script> </script>
<style> <style lang='scss'>
body{
margin: 0;
}
#app { #app {
font-family: 'Avenir', Helvetica, Arial, sans-serif; font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
margin-top: 60px; margin:0;
} }
</style> </style>
DAPlatform/src/assets/scss/config.scss 0 → 100644
// 样式规范
$min-width: 1000px; //页面主体部分最小宽度
// 字体大小设置
// 常规颜色配置
$theme-color: #409EFF !default; //element原生蓝，主题色及按钮色
$bg-color: #d9ecff !default; //背景蓝
$font-color-footer: #969595 !default; //注脚的字体颜色
$divider-color: #DCDFE6 !default; //分割线颜色
DAPlatform/src/components/Login.vue
...@@ -2,45 +2,30 @@ ...@@ -2,45 +2,30 @@
<div class="login-container"> <div class="login-container">
<div class="login-background-text">DAPlatform</div> <div class="login-background-text">DAPlatform</div>
<div class="login-panel"> <div class="login-panel">
<ul class="nav-justified"> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
<li role="presentation" :class="{active: mode =='login'}"> active-text-color="#409EFF">
<a @click="mode='login'">登录</a> <el-menu-item index="1">登录</el-menu-item>
</li> <el-menu-item index="2">注册</el-menu-item>
<li role="presentation" :class="{active: mode =='register'}"> </el-menu>
<a @click="mode='register'">注册</a> <div class="input-item">
</li> 用户名：
</ul> <el-input class="input" v-model="input" placeholder="请输入用户名"></el-input>
</div>
<div v-if="mode=='login'" class="login-input-group"> <div class="input-item">
<div class="input-group"> 密码：
<span>用户名：</span> <el-input class="input" v-model="input" placeholder="请输入密码"></el-input>
<input type="text" class="form-control" placeholder="输入用户名" aria-describedby="basic-addon1"> </div>
</div> <div class="input-item" v-if="activeIndex == '2'">
<div class="input-group"> 确认密码：
<span>密码：</span> <el-input class="input" v-model="input" placeholder="请确认密码"></el-input>
<input type="text" class="form-control" placeholder="输入密码" aria-describedby="basic-addon1">
</div>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default" @click="login()">登录</button>
</div>
</div> </div>
<div v-else class="register-input-group"> <div class="input-item" v-if="activeIndex == '2'">
<div class="input-group"> 邮箱：
<span>用户名：</span> <el-input class="input" v-model="input" placeholder="请输入邮箱"></el-input>
<input type="text" class="form-control" placeholder="输入用户名" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span>密码：</span>
<input type="text" class="form-control" placeholder="输入密码" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span>邮箱：</span>
<input type="text" class="form-control" placeholder="确认密码" aria-describedby="basic-addon1">
</div>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default">注册</button>
</div>
</div> </div>
<el-button v-if="activeIndex == '1'" class="btn" type="primary" @click="login">登录</el-button>
<el-button v-else class="btn" type="primary">注册</el-button>
</div> </div>
</div> </div>
</template> </template>
...@@ -50,12 +35,14 @@ export default { ...@@ -50,12 +35,14 @@ export default {
name: 'Login', name: 'Login',
data () { data () {
return { return {
mode: 'login' activeIndex: '1'
} }
}, },
methods: { methods: {
handleSelect (key, keyPath) {
this.activeIndex = key
},
login () { login () {
console.log('login')
this.$router.push('/taskhall').catch(data => {}) this.$router.push('/taskhall').catch(data => {})
} }
} }
...@@ -63,70 +50,48 @@ export default { ...@@ -63,70 +50,48 @@ 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'>
.login-container { .login-container {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
background-color: rgb(119, 243, 202); background-color: #409EFF;
overflow: hidden; 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);
}
.login-panel {
float: right;
width: 400px;
margin-right: 10vw;
margin-top: 20vh;
margin-bottom: 10vh;
padding-top: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
// transition: height 1s;
}
} }
.login-background-text { .input-item{
position: absolute;
color: white;
font-size: 150px;
top: 30vh;
left: 5vw;
text-shadow: 30px 30px 0px rgba(255, 255, 255, 0.4);
}
.login-panel {
position: relative;
float: right;
width: 400px;
height: 450px;
margin-right: 10vw;
margin-top: 20vh;
margin-bottom: 10vh;
padding-top: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
.active a{
color: rgb(97, 211, 173);
}
a {
font-weight: bold;
font-size: 1.3em;
cursor: pointer;
color: black;
}
.input-group{
/* border: solid; */
width: 100%;
display: flex; display: flex;
justify-content: space-between;
align-items: center;
padding-left: 30px; padding-left: 30px;
padding-right: 30px; padding-right: 30px;
margin-top: 40px; justify-content: space-between;
} align-items: center;
.input-group span{ margin-top: 30px;
font-size: 1.em; .input{
} width: 70%;
.input-group input{ }
width: 70%;
height: 50px;
}
.btn-group{
position: absolute;
bottom: 40px;
right: 25px;
} }
.btn-group button{ .btn{
width: 350px; width: 80%;
background-color: rgb(97, 211, 173); margin-top: 20px;
color: white; margin-bottom: 20px;
border: none;
} }
</style> </style>
DAPlatform/src/components/NavHeader.vue
<template> <template>
<div class="nav-header-container"> <div class="nav-header-container">
<div class="nav-header"> <el-menu
<div class="nav-header-logo">DAPlatform</div> :default-active="activeIndex"
<div class="nav-header-navigator"> class="el-menu-demo"
<router-link :to="{name: 'taskhall'}">任务大厅</router-link> mode="horizontal"
<router-link :to="{name: 'index'}">其它</router-link> @select="handleSelect"
</div> background-color="#409EFF"
<div class="nav-header-userInfo"> text-color="#fff"
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> active-text-color="#fff"
<router-link :to="{name: 'login'}">登录</router-link> router="true">
</div> <el-menu-item index="taskhall">任务大厅</el-menu-item>
</div> <el-menu-item index="2">我的任务</el-menu-item>
<el-menu-item index="release">发布任务</el-menu-item>
<el-menu-item index="4">已完成任务</el-menu-item>
<el-menu-item index="5">待审核任务</el-menu-item>
<el-menu-item index="6">我的发布</el-menu-item>
<el-menu-item index="userhome">个人中心</el-menu-item>
<el-menu-item class="logout-btn" index="login">退出登录</el-menu-item>
</el-menu>
</div> </div>
</template> </template>
...@@ -19,53 +26,24 @@ export default { ...@@ -19,53 +26,24 @@ export default {
name: 'nav-header', name: 'nav-header',
data () { data () {
return { return {
activeIndex: 'taskhall'
} }
},
methods: {
} }
} }
</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'>
@import '@/assets/scss/config.scss';
.nav-header-container{ .nav-header-container{
width: 100vw; padding-left: 10%;
background-color: rgb(97, 211, 173); padding-right: 10%;
} min-width: $min-width;
.nav-header{ background-color: $theme-color;
width: 90vw; .logout-btn{
min-width: 800px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
.nav-header-logo{
/* border: solid; */
float: left;
color: white;
font-size: 25px;
font-weight: bold;
line-height: 50px;
margin-right: 50px;
}
.nav-header-navigator{
float: left;
}
.nav-header-navigator a{
display: inline-block;
color: white;
font-weight: bold;
line-height: 50px;
width: 6em;
}
.nav-header-navigator a:hover{
background-color: rgb(64, 167, 132);
}
.nav-header-userInfo{
float: right; float: right;
color: white; }
line-height: 50px;
}
.nav-header-userInfo a{
color: white;
margin-left: 10px;
} }
</style> </style>
DAPlatform/src/components/TaskHall.vue
<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 rgb(97, 211, 173); 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: rgb(97, 211, 173); div:last-of-type{
color: white; font-size: 14px;
} color: #959595;
.tasks-body{ }
border: 1px solid rgb(97, 211, 173); .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: 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{ .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: rgb(97, 211, 173); .notice-title{
} background-color: $theme-color;
.panel-heading{ color: white;
background-color: rgb(97, 211, 173); padding: 10px 0;
border-color: rgb(97, 211, 173); }
.notice-body{
background-color: white;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
}
} }
}
</style> </style>
DAPlatform/src/main.js
...@@ -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)
......
DAPlatform/src/mock/api.js 0 → 100644
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']
}]
})
DAPlatform/src/router/index.js
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import release from '@/components/release' import release from '@/components/release'
import HelloWorld from '../components/HelloWorld'
import MissionDetail from '../components/missionDetail(1)' import MissionDetail from '../components/missionDetail(1)'
import execute from '../components/execute' import execute from '../components/execute'
import Login from '@/components/Login' import Login from '@/components/Login'
import Index from '@/components/Index'
import releasepersonal from '../components/releasepersonal' import releasepersonal from '../components/releasepersonal'
import userhome from '../components/UserHome' import userhome from '../components/UserHome'
import TaskHall from '@/components/Taskhall'
import Index from '@/components/Index'
Vue.use(Router) Vue.use(Router)
export default new Router({ export default new Router({
routes: [ routes: [
{ {
path: '/release',
name: 'Release',
component: release
},
{
path: '/', path: '/',
name: 'HelloWorld', name: 'index',
component: HelloWorld redirect: '/taskhall',
component: Index,
children: [
{
path: 'taskhall',
name: 'taskhall',
component: TaskHall
},
{
path: 'release',
name: 'Release',
component: release
},
{
path: 'userhome',
name: 'userhome',
component: userhome
}
]
}, },
{ {
path: '/missiondetail', path: '/missiondetail',
...@@ -34,18 +47,6 @@ export default new Router({ ...@@ -34,18 +47,6 @@ export default new Router({
component: execute component: execute
}, },
{ {
path: '/index',
name: 'index',
component: Index,
children: [
{
path: 'taskhall',
name: 'taskhall',
component: () => import('../components/TaskHall.vue')
}
]
},
{
path: '/login', path: '/login',
name: 'login', name: 'login',
component: Login component: Login
...@@ -54,12 +55,6 @@ export default new Router({ ...@@ -54,12 +55,6 @@ export default new Router({
path: '/userinfo', path: '/userinfo',
name: 'userinfo', name: 'userinfo',
component: releasepersonal component: releasepersonal
},
{
path: '/userhome',
name: 'userhome',
component: userhome
} }
] ]
}) })
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