This commit is contained in:
2023-11-17 10:43:59 +08:00
parent 03e129acc0
commit 5eded73953

View File

@@ -2,6 +2,42 @@
<div class="main-container">
<div class="right_side">
<div class="content_wrap">
<div class="title_wrap">
<h2>任务管理</h2>
</div>
<div class="page_container">
<div class="grid_wrapper">
<table>
<tr>
<th>选中</th>
<th>序号</th>
<th>任务号</th>
<th>目标站点</th>
<th>任务状态</th>
<th>生成时间</th>
</tr>
<tr v-for="(e, i) in dataList" :key="i" @click="toRadio(e, i)">
<!-- <td>
<div class="radio__input icon_radio_checked"><i class="icon_radio"></i></div>
</td> -->
<td><div class="selbox radio_uncheck" :class="{'radio_checked': pkId === e.task_uuid}"></div></td>
<td>{{i+1}}</td>
<td>{{e.task_code}}</td>
<td>{{e.next_point_code}}</td>
<td><span class="icon" :class="{bgred: e.task_status_name ==='生成未执行', bgyellow: (e.task_status_name ==='执行中' || e.task_status_name ==='完成')}"></span>{{e.task_status_name}}</td>
<td>{{e.create_time}}</td>
</tr>
</table>
</div>
<div class="buttons_wrapper">
<button class="button_control button_control_disabled" @click="toUp(dataList, selectIndex)"><p>任务上移</p></button>
<button class="button_control button_control_disabled" @click="toDown(dataList, selectIndex)"><p>任务下移</p></button>
<button class="button_control button_control_disabled" @click="toDel(selectIndex)"><p>任务取消</p></button>
<button class="button_control" @click="updateTask"><p>任务提交</p></button>
</div>
</div>
</div>
<!-- <div class="content_wrap">
<div class="title_wrap">
<h2>任务管理</h2>
</div>
@@ -25,44 +61,15 @@
</tr>
</table>
<div class="subbar">
<button class="btn btn01" @click="toUp(dataList, selectIndex)">任务上移</button>
<button class="btn btn02" @click="toDown(dataList, selectIndex)">任务下移</button>
<button class="btn btn1" @click="toDel(selectIndex)">任务取消</button>
<button class="btn btn2" @click="updateTask">任务提交</button>
</div>
</div>
</div>
</div> -->
</div>
</div>
<!-- <div class="main-container">
<div class="box0">
<div class="title">任务管理</div>
</div>
<div class="tasklist">
<div class="con1 grid_wrapper">
<table>
<tr class="t-head">
<th><div class="selbox"></div></th>
<th>序号</th>
<th>任务号</th>
<th>目标站点</th>
<th>任务状态</th>
<th>生成时间</th>
</tr>
<tr v-for="(e,index) in dataList" :key="e.task_uuid" @click="toRadio(e, index)">
<td><div class="selbox radio_uncheck" :class="{'radio_checked': pkId === e.task_uuid}"></div></td>
<td>{{index+1}}</td>
<td>{{e.task_num}}</td>
<td>{{e.target_point}}</td>
<td><span class="icon" :class="{bgred: e.task_status_name ==='生成未执行', bgyellow: (e.task_status_name ==='执行中' || e.task_status_name ==='完成')}"></span>{{e.task_status_name}}</td>
<td>{{e.create_time}}</td>
</tr>
</table>
<div class="subbar">
<button class="btn btn1" @click="toDel(selectIndex)">任务取消</button>
<button class="btn btn2" @click="updateTask">任务提交</button>
</div>
</div>
</div>
</div> -->
</template>
<script>
@@ -71,9 +78,55 @@ export default {
name: 'TaskLists',
data () {
return {
pkId: '',
selectObj: {},
selectIndex: '',
pkId: '',
pwd: '',
up: false,
down: false,
del: false,
dataList: []
// dataList: [
// {
// task_uuid: '01'
// },
// {
// task_uuid: '02'
// },
// {
// task_uuid: '03'
// },
// {
// task_uuid: '04'
// },
// {
// task_uuid: '05'
// },
// {
// task_uuid: '06'
// },
// {
// task_uuid: '07'
// },
// {
// task_uuid: '08'
// },
// {
// task_uuid: '09'
// },
// {
// task_uuid: '10'
// },
// {
// task_uuid: '11'
// },
// {
// task_uuid: '12'
// },
// {
// task_uuid: '13'
// }
// ]
}
},
created () {
@@ -88,31 +141,114 @@ export default {
this.toast(res.desc)
}
},
toRadio (e, index) {
this.selectIndex = index
this.pkId = this.pkId === e.task_uuid ? '' : e.task_uuid
},
toDel (index) {
if (this.pkId) {
this.dataList.splice(index, 1)
this.pkId = ''
}
},
async updateTask () {
let res = await updateTask(this.dataList)
if (res.code === '1') {
this.toast(res.desc)
this.pkId = ''
this.selectObj = {}
this.initData()
} else {
this.toast(res.desc)
}
},
toRadio (e, index) {
this.selectObj = this.selectObj === e ? {} : e
this.selectIndex = index
this.pkId = this.pkId === e.task_uuid ? '' : e.task_uuid
if (this.pkId) {
this.up = true
this.down = true
this.del = true
} else {
this.up = false
this.down = false
this.del = false
}
this.checkUpDown()
},
checkUpDown () {
// 最后一条不能下移
if (this.selectIndex === this.dataList.length - 1) {
this.down = false
}
if (this.dataList[0].task_status === '00') {
if (this.selectIndex === 0) {
this.up = false
}
} else {
if (this.selectIndex === 0) {
this.up = false
this.down = false
}
if (this.selectIndex === 1) {
this.up = false
}
}
},
swapItems (arr, index1, index2) {
arr[index1] = arr.splice(index2, 1, arr[index1])[0]
return arr
},
toUp (arr) {
if (!this.up) {
return
}
if (this.pkId) {
if (arr.length > 1 && this.selectIndex !== 0) {
this.dataList = this.swapItems(arr, this.selectIndex, this.selectIndex - 1)
// this.pkId = ''
this.selectIndex = this.selectIndex - 1
if (this.selectIndex === 0) {
this.up = false
this.down = true
} else {
this.up = true
this.down = true
this.checkUpDown()
}
}
}
},
toDown (arr) {
if (!this.down) {
return
}
if (this.pkId) {
if (arr.length > 1 && this.selectIndex !== (arr.length - 1)) {
this.dataList = this.swapItems(arr, this.selectIndex, this.selectIndex + 1)
// this.pkId = ''
this.selectIndex = this.selectIndex + 1
if (this.selectIndex === this.dataList.length - 1) {
this.up = true
this.down = false
} else {
this.up = true
this.down = true
this.checkUpDown()
}
}
}
},
toDel (index) {
if (this.pkId) {
this.dataList.splice(index, 1)
this.pkId = ''
this.up = false
this.down = false
this.del = false
}
}
}
}
</script>
<style lang="stylus" scoped>
.page_container
padding 31px 31px 31px 45px
.grid_wrapper
height calc(100% - 122px)
overflow-y auto
.selbox
width 40px
height 40px
@@ -131,67 +267,4 @@ export default {
background center / 100% 100% url(../../../images/new/icon-error1.png) no-repeat
.bgred
background center / 100% 100% url(../../../images/new/icon-error2.png) no-repeat
.t-head
height 80px
line-height 80px
background center / 1499px 100% url(../../../images/new/bg-head-tb-in.png) no-repeat
.main-container
// padding-left 41px
.box0
width 1580px
height 102px
background center / 100% 100% url(../../../images/new/bg-title-l.png) no-repeat
.title
font-size 36px
color #F6F9FE
padding-left 40px
padding-top 53px
.con1
// width 1580px
// height 819px
height 800px
// background center / 100% 100% url(../../../images/new/bg-con-l.png) no-repeat
background center / 100% 100% url(../../../images/new/bg-task-r2.png) no-repeat
float left
box-sizing border-box
padding 40px
position relative
.status-box
display inline-block
width .4rem
height .4rem
border-radius .2rem
.grid_wrapper table th
color #ffffff
font-size 30px
background rgba(31,46,73,0.5)
line-height 80px
border-right none
padding 0
padding-left 30px
text-align left
.grid_wrapper table td
color #ffffff
font-size 30px
background rgba(31,46,73,0.5)
line-height 80px
border-bottom 1px solid #20395D
border-right none
padding 0
padding-left 30px
text-align left
.btn
width 335px
height 91px
font-size 36px
margin-left 167px
position absolute
bottom 28px
color #f6f9fe
.btn1
left 306px
background center / 100% 100% url(../../../images/new/btn-red.png) no-repeat
.btn2
left 668px
background center / 100% 100% url(../../../images/new/btn-blue.png) no-repeat
</style>