Skip to content

D
DA-Platform

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

Commit c13ea6ff by Wang Yuhang
Options

完成任务详情页，输入框绑定数据

parent 7e4e4857
Showing with 156 additions and 20 deletions
DAPlatform/src/assets/scss/mixin.scss 0 → 100644
@mixin container {
padding: 40px 10% 100px 10%;
min-width: $min-width;
min-height: 600px;
overflow:hidden;
background-color: $bg-color;
}
@mixin whiteBoard {
background-color: white;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
\ No newline at end of file
DAPlatform/src/components/Login.vue
......@@ -9,19 +9,19 @@
</el-menu>
<div class="input-item">
用户名：
<el-input class="input" v-model="input" placeholder="请输入用户名"></el-input>
<el-input class="input" v-model="username" placeholder="请输入用户名"></el-input>
</div>
<div class="input-item">
密码：
<el-input class="input" v-model="input" placeholder="请输入密码"></el-input>
<el-input class="input" v-model="password" placeholder="请输入密码"></el-input>
</div>
<div class="input-item" v-if="activeIndex == '2'">
确认密码：
<el-input class="input" v-model="input" placeholder="请确认密码"></el-input>
<el-input class="input" v-model="confirm" placeholder="请确认密码"></el-input>
</div>
<div class="input-item" v-if="activeIndex == '2'">
邮箱：
<el-input class="input" v-model="input" placeholder="请输入邮箱"></el-input>
<el-input class="input" v-model="email" placeholder="请输入邮箱"></el-input>
</div>
<el-button v-if="activeIndex == '1'" class="btn" type="primary" @click="login">登录</el-button>
......@@ -32,9 +32,13 @@
<script>
export default {
name: 'Login',
name: 'login',
data () {
return {
username: '',
password: '',
confirm: '',
email: '',
activeIndex: '1'
}
},
......@@ -56,7 +60,7 @@ export default {
<style scoped lang='scss'>
.login-container {
position: relative;
width: 100%;
min-width: 1400px;
min-height: 100vh;
background-color: #409EFF;
overflow: hidden;
......@@ -67,6 +71,7 @@ export default {
top: 30vh;
left: 5vw;
text-shadow: 30px 30px 0px rgba(255, 255, 255, 0.4);
z-index: 1;
}
.login-panel {
float: right;
......@@ -78,7 +83,7 @@ export default {
background-color: white;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
// transition: height 1s;
z-index: 100;
}
}
.input-item{
......
DAPlatform/src/components/NavHeader.vue
......@@ -4,11 +4,10 @@
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#409EFF"
text-color="#fff"
active-text-color="#fff"
router="true">
router>
<el-menu-item index="/taskhall">任务大厅</el-menu-item>
<el-menu-item index="2">我的任务</el-menu-item>
<el-menu-item index="/releasetask">发布任务</el-menu-item>
......@@ -29,6 +28,14 @@ export default {
activeIndex: '/taskhall'
}
},
watch: {
// 对路由变化作出响应...
'$route' (to, from) {
var index = to.fullPath.indexOf('/', 1)
var toPath = to.fullPath.substring(0, index === -1 ? to.fullPath.length : index + 1)
this.activeIndex = toPath
}
},
methods: {
}
}
......
DAPlatform/src/components/Task.vue 0 → 100644
<template>
<div class="task-container">
<div class="task-panel">
<h2>{{task.title}}</h2>
<p>发布者：{{task.creater}}</p>
<p>发布时间：{{task.date}}</p>
<p v-if="task.type == 'text'">文本大小：{{task.size}}k</p>
<p v-else>图片张数：{{task.size}}张</p>
<el-divider></el-divider>
<h2>选择分片</h2>
<div class="pieces">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" border>全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedPieces" @change="handleCheckedPiecesChange">
<el-checkbox class="el-checkbox" v-for="piece in pieces" :label="piece" :key="piece" border>文件数：{{piecesMap[piece]}}</el-checkbox>
</el-checkbox-group>
</div>
<el-button type="primary" @click="begin">开始任务</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'task',
data () {
return {
task: {},
piecesMap: {},
pieces: [],
checkedPieces: [],
isIndeterminate: true,
checkAll: false
}
},
mounted () {
var self = this
var task = JSON.parse(decodeURIComponent(this.$route.params.task))
this.task = task
// 根据任务id拉取分片信息
this.axios.get('/getPieces', {
params: {
id: task.id
}
}).then(res => {
var piecesMap = {}
var pieces = []
for (let piece of res.data.data) {
piecesMap[piece.id] = piece.fileNum
pieces.push(piece.id)
}
self.piecesMap = piecesMap
self.pieces = pieces
})
},
methods: {
handleCheckAllChange (val) {
this.checkedPieces = val ? this.pieces : []
this.isIndeterminate = false
},
handleCheckedPiecesChange (value) {
let checkedCount = value.length
this.checkAll = checkedCount === this.pieces.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.pieces.length
console.log(value)
},
begin () {
if (this.checkedPieces.length === 0) {
alert('请选择分片')
}
}
}
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/config.scss';
@import '@/assets/scss/mixin.scss';
.task-container{
@include container;
.task-panel{
@include whiteBoard;
text-align: left;
padding: 30px 20px 30px 20px;
}
.pieces{
margin-bottom: 30px;
.el-checkbox{
margin-left: 0;
margin-bottom: 15px;
}
}
}
</style>
DAPlatform/src/components/TaskHall.vue
......@@ -4,7 +4,7 @@
<div class="filter-container">
<div class="filter-item">
任务名称：
<el-input class="filter-input" prefix-icon="el-icon-search" v-model="input" placeholder="请输入查询条件"></el-input>
<el-input class="filter-input" prefix-icon="el-icon-search" v-model="keywords" placeholder="请输入查询条件"></el-input>
</div>
<div class="filter-item">
<el-button class="filter-button" type="primary">查询</el-button>
......@@ -19,7 +19,7 @@
<span v-if="item.type == 'text'">文本大小：{{item.size}}k</span>
<span v-else>图片张数：{{item.size}}张</span>
</div>
<el-button class="task-enter-btn" type="primary" plain>进入任务</el-button>
<el-button class="task-enter-btn" type="primary" plain @click="enterTask(item)">进入任务</el-button>
</div>
</div>
<div class="page-navigator">
......@@ -58,7 +58,8 @@ export default {
data () {
return {
activeName: '任务大厅',
tasks: []
tasks: [],
keywords: ''
}
},
mounted () {
......@@ -69,6 +70,12 @@ export default {
methods: {
handleClick (tab, event) {
console.log(tab, event)
},
enterTask (task) {
this.$router.push({
name: 'task',
params: { task: encodeURIComponent(JSON.stringify(task)) }
})
}
}
}
......@@ -77,18 +84,14 @@ export default {
<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped lang='scss'>
@import '@/assets/scss/config.scss';
@import '@/assets/scss/mixin.scss';
.taskhall-container{
padding: 40px 10% 100px 10%;
min-width: $min-width;
min-height: 600px;
overflow:hidden;
background-color: $bg-color;
@include container;
.taskhall-left{
float: left;
width: 70%;
background-color: white;
padding: 30px 20px 30px 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@include whiteBoard;
.filter-container{
.filter-item{
display: flex;
......
DAPlatform/src/mock/api.js
......@@ -2,10 +2,20 @@ import Mock from 'mockjs'
Mock.mock('/api/getTasks', {
'status': 0,
'data|10': [{
'id|1-9999': 1,
'title|1': ['冰箱物品标注', '新通路图片', '人脸识别', '客服语音', '行人十字画框', '动物打点标注'],
'creater|1': ['王强', '赵信良', '李轩辕', '田予欢', '张三', '李斯'],
'date': Mock.Random.date('yyyy/MM/dd'),
'size|20-1000': 1,
'type|1': ['text', 'image']
'type|1': ['text', 'image'],
'pieces|5-30': 1
}]
})
Mock.mock(/\/api\/getPieces\?id=[0-9]+/, {
'status': 0,
'data|10-50': [{
'id|1-9999': 1,
'fileNum|50-100': 1
}]
})
DAPlatform/src/router/index.js
......@@ -24,6 +24,11 @@ export default new Router({
component: TaskHall
},
{
path: '/task/:task',
name: 'task',
component: () => import('../components/Task')
},
{
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