Skip to content

D
DA-Platform

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

Commit c25ed5be by Wang Yuhang
Options

Merge branch 'wyh-dev' into dev 

合并，不同类别分片标注不同颜色，分片下显示文件信息
parents 8394e45e 50d43a9c
Showing with 170 additions and 250 deletions
DAPlatform-front/src/assets/css/common.css
body,html{
height: 100%;
}
*{
margin: 0;
box-sizing: border-box;
}
DAPlatform-front/src/components/OngoingTaskDetail.vue
<template>
<div class="task-container">
<div class="task-panel">
<h2>桥梁勘测文件标注</h2>
<p>发布者：小明</p>
<p>发布时间：2019-12-13</p>
<p>文本大小：200k</p>
<h2>{{task.title}}</h2>
<p>发布者：{{task.creater}}</p>
<p>发布时间：{{task.date}}</p>
<el-divider></el-divider>
<el-table
:data="tableData"
height="400"
style="width: 100%">
<el-table-column
prop="id"
label="分片id"
width="180">
</el-table-column>
<el-table-column
prop="type"
label="文件类别"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="文件名">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180">
<template slot-scope="scope">
<el-button type="primary" @click="start(scope.row.type)">开始任务</el-button>
</template>
</el-table-column>
</el-table>
<pieces-table :task-id="task.id" :mode="1"></pieces-table>
</div>
</div>
</template>
<script>
export default {
name: 'task',
data() {
return {
task: {},
piecesMap: {},
pieces: [],
checkedPieces: [],
isIndeterminate: true,
checkAll: false,
tableData: [{
id: '10247',
name: '植物标注.txt',
type: '文本'
}, {
id: '10258',
name: '文本标注.doc',
type: '文本'
}, {
id: '10117',
name: '植物标注.jpg',
type: '图层'
}, {
id: '101329',
name: '桥梁标注.doc',
type: '文本'
}, {
id: '10128',
name: '植物标注2.txt',
type: '文本'
}, {
id: '10154',
name: '植物标注2.doc',
type: '文本'
}, {
id: '10125',
name: '桥梁标注.jpg',
type: '图像'
}]
}
},
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] = {
fileNum: piece.fileNum,
templateName: piece.templateName
}
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
},
begin () {
if (this.checkedPieces.length === 0) {
alert('请选择分片')
}
},
start(type){
if(type=='文本'){
this.$router.push('/select');
}
else if(type=='图像'){
this.$router.push('/image');
}
else{
this.$router.push('/layer');
}
}
import PiecesTable from './PiecesTable'
export default {
name: 'on-going-task-detail',
components: {
PiecesTable
},
data () {
return {
task: null
}
},
beforeMount () {
this.task = JSON.parse(decodeURIComponent(this.$route.params.task))
},
methods: {
}
}
</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{
display: block;
margin: 0px;
padding: 9px 0 9px 10px;
}
.checkbox{
span{
display: inline-block;
min-width: 15em;
}
&:nth-child(odd){
background-color: ghostwhite;
}
}
}
@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;
}
}
</style>
DAPlatform-front/src/components/PiecesTable.vue 0 → 100644
<template>
<div class="pieces-table-container">
<el-table
ref="multipleTable"
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
>
<el-table-column v-if="mode == 0" type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="分片id" width="120"></el-table-column>
<el-table-column prop="fileType" label="文件类别" width="120"></el-table-column>
<el-table-column prop="fileNum" label="文件数量" width="120"></el-table-column>
<el-table-column prop="templateName" label="模板名"></el-table-column>
<el-table-column type="expand">
<div class="file">
<i class="el-icon-document"></i>
<span>文本标注.doc</span>
<el-button type="primary" size="mini" v-if="mode == 1" plain>标注</el-button>
</div>
<div class="file">
<i class="el-icon-document-copy"></i>
<span>图层文件.kml</span>
<el-button type="primary" size="mini" v-if="mode == 1" plain>标注</el-button>
</div>
<div class="file">
<i class="el-icon-picture-outline"></i>
<span>图片文件.jpg</span>
<el-button type="primary" size="mini" v-if="mode == 1" plain>标注</el-button>
</div>
</el-table-column>
</el-table>
<el-button v-if="mode == 0" type="primary" style="margin-top:20px" @click="complete">完成选择</el-button>
</div>
</template>
<script>
export default {
name: 'pieces-table',
props: {
taskId: Number, // 接收任务的id
mode: {
type: Number,
default: 0
} // 模式：0显示选择框，不显示标注按钮，1不显示选择框，显示标注按钮
},
data () {
return {
tableData: [],
multipleSelection: []
}
},
beforeMount () {
// 根据任务id，拉取分片信息
var id = this.taskId
var self = this
this.axios.get('/getPieces', {
params: { id }
}).then(res => {
self.tableData = res.data.data
})
},
methods: {
handleSelectionChange (val) {
this.multipleSelection = val
},
complete () {
if (this.multipleSelection.length === 0) {
alert('请选择分片')
} else {
this.$router.push('/ongoing')
}
},
tableRowClassName ({row}) {
if (row.fileType === '图像') {
return 'image-row'
} else if (row.fileType === '图层') {
return 'coverage-row'
}
return ''
}
}
}
</script>
<style>
.el-table .image-row {
background: oldlace;
}
.el-table .coverage-row {
background: #f0f9eb;
}
</style>
<style lang="scss" scopde>
.file{
position: relative;
height: 40px;
line-height: 40px;
.el-button{
position: absolute;
right: 0;
top: 5px;
}
}
</style>
DAPlatform-front/src/components/Task.vue
<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">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedPieces" @change="handleCheckedPiecesChange">
<el-checkbox class="checkbox" v-for="pieceId in pieces" :label="pieceId" :key="pieceId">
<span>分片编号：{{pieceId}}</span><span>文件数：{{piecesMap[pieceId].fileNum}}</span><span>模板：{{piecesMap[pieceId].templateName}}</span>
</el-checkbox>
</el-checkbox-group>
</div>
<el-button type="primary" @click="begin">开始任务</el-button>
</div>
<div class="task-container">
<div class="task-panel">
<h2>{{task.title}}</h2>
<p>发布者：{{task.creater}}</p>
<p>发布时间：{{task.date}}</p>
<el-divider></el-divider>
<h2>选择分片</h2>
<pieces-table :task-id="task.id" :mode="0"></pieces-table>
</div>
</div>
</template>
<script>
import PiecesTable from './PiecesTable'
export default {
name: 'task',
components: {
PiecesTable
},
data () {
return {
task: {},
piecesMap: {},
pieces: [],
checkedPieces: [],
isIndeterminate: true,
checkAll: false
task: null
}
},
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] = {
fileNum: piece.fileNum,
templateName: piece.templateName
}
pieces.push(piece.id)
}
self.piecesMap = piecesMap
self.pieces = pieces
})
beforeMount () {
this.task = JSON.parse(decodeURIComponent(this.$route.params.task))
},
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
},
begin () {
if (this.checkedPieces.length === 0) {
alert('请选择分片')
} else {
this.$router.push('/ongoing')
}
}
}
}
</script>
......@@ -89,22 +42,5 @@ export default {
text-align: left;
padding: 30px 20px 30px 20px;
}
.pieces{
margin-bottom: 30px;
.el-checkbox{
display: block;
margin: 0px;
padding: 9px 0 9px 10px;
}
.checkbox{
span{
display: inline-block;
min-width: 15em;
}
&:nth-child(odd){
background-color: ghostwhite;
}
}
}
}
</style>
DAPlatform-front/src/components/TaskHall.vue
......@@ -15,10 +15,7 @@
<div class="tasklist">
<div class="task-item" v-for="(item, index) in tasks" :key='index'>
<div>{{item.title}}</div>
<div>发布人：{{item.creater}}&emsp;&emsp;发布时间：{{item.date}}&emsp;&emsp;
<span v-if="item.type == 'text'">文本大小：{{item.size}}k</span>
<span v-else>图片张数：{{item.size}}张</span>
</div>
<div>发布人：{{item.creater}}&emsp;&emsp;发布时间：{{item.date}}</div>
<el-button class="task-enter-btn" type="primary" plain @click="enterTask(item)">进入任务</el-button>
</div>
</div>
......
DAPlatform-front/src/components/ongoingtask.vue
......@@ -9,7 +9,7 @@
<span v-if="item.type == 'text'">文本大小：{{item.size}}k</span>
<span v-else>图片张数：{{item.size}}张</span>
</div>
<el-button class="task-enter-btn1" @click="detail()" type="primary" plain>查看任务详情</el-button>
<el-button class="task-enter-btn1" @click="detail(item)" type="primary" plain>查看任务详情</el-button>
</div>
</div>
<div class="page-navigator">
......@@ -49,8 +49,11 @@
deleteRow(index, rows) {//删除改行
rows.splice(index, 1);
},
detail(){
this.$router.push('/ongoingdetail')
detail(task){
this.$router.push({
name: 'ongoingtaskdetail',
params: { task: encodeURIComponent(JSON.stringify(task)) }
})
}
}
}
......
DAPlatform-front/src/mock/api.js
......@@ -18,6 +18,7 @@ Mock.mock(/\/api\/getPieces\?id=[0-9]+/, {
'data|5-20': [{
'id|1-65535': 1,
'fileNum|10-50': 1,
'templateName|1': ['人脸识别标注模板', '动物标注模板', '本文标注模板', '桥梁标注模板', '植物标注模板']
'templateName|1': ['人脸识别标注模板', '动物标注模板', '本文标注模板', '桥梁标注模板', '植物标注模板'],
'fileType|1': ['文本', '图像', '图层']
}]
})
DAPlatform-front/src/router/index.js
......@@ -16,7 +16,7 @@ import SelectText from '../components/textAnnotation/SelectText'
import SelectedText from '../components/textAnnotation/SelectedText'
import Table from '../components/textAnnotation/Table'
import imageAnnotiation from '../components/imageAnnotation/imageAnnotiation'
import layerAnnotation from '../components/imageAnnotation/layerAnnotation';
import layerAnnotation from '../components/imageAnnotation/layerAnnotation'
Vue.use(Router)
......@@ -60,27 +60,27 @@ export default new Router({
},
{
path: '/publishtask',
name: publishtask,
name: 'publishtask',
component: publishtask
},
{
path: '/ongoing',
name: ongoingtask,
name: 'ongoingtask',
component: ongoingtask
},
{
path: '/ongoingdetail',
name: ongoingtaskdetail,
path: '/ongoingdetail/:task',
name: 'ongoingtaskdetail',
component: ongoingtaskdetail
},
{
path: '/completeddetail',
name: completeddetail,
name: 'completeddetail',
component: completeddetail
},
{
path: '/checkdetail',
name: checkdetail,
name: 'checkdetail',
component: checkdetail
},
{
......
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