429 lines
11 KiB
Vue
429 lines
11 KiB
Vue
<template>
|
||
<section class="taskmanage">
|
||
<div class="con1 grid_wrapper">
|
||
<!-- <test-one v-if="currentIndex === 0"></test-one>
|
||
<test-two v-if="currentIndex === 1"></test-two>
|
||
<test-three v-if="currentIndex === 2"></test-three> -->
|
||
<table>
|
||
<tr>
|
||
<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>{{e.task_num}}</td>
|
||
<td>{{e.target_point}}</td>
|
||
<td :class="{cyellow:e.task_status ==='1',cred:e.task_status ==='2',cgreen:e.task_status ==='0',}">{{e.task_status_name}}</td>
|
||
<td class="last-td">{{e.create_time}}<div v-if="e.task_uuid" :class="{'radio_checked': pkId === e.task_uuid}"></div></td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="con2" v-if="dataList.length">
|
||
<img v-if="up" src="../images/aio/up.png" @click="toUp(dataList, selectIndex)">
|
||
<img v-if="!up" src="../images/aio/up2.png" @click="toUp(dataList, selectIndex)">
|
||
<img v-if="down" src="../images/aio/down.png" @click="toDown(dataList, selectIndex)">
|
||
<img v-if="!down" src="../images/aio/down2.png" @click="toDown(dataList, selectIndex)">
|
||
<img v-if="del" src="../images/aio/del.png" @click="toDel(selectIndex)">
|
||
<img v-if="!del" src="../images/aio/del2.png" @click="toDel(selectIndex)">
|
||
<div v-if="dataList.length" class="submitbtn pop_btn pop_btn_primary" @click="updateTask">提交</div>
|
||
</div>
|
||
<!-- <div v-else class="setup_no" @click="checkShow = true">验证密码>></div>
|
||
<vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
||
<div class="pop_wrapper" v-if="checkShow">
|
||
<div class="pop_box">
|
||
<h2>验证信息</h2>
|
||
<div class="input_box input_box_2" :class="{'error': error === true}">
|
||
<div class="label" @click="$refs.input4.focus()">密 码</div>
|
||
<form>
|
||
<input v-if="open3 === false" type="password" autocomplete=‘new-password’ v-model="pwd" ref="input4" @focus="show" data-layout="normal">
|
||
<input v-else type="text" v-model="pwd" ref="input4" @focus="show" data-layout="normal">
|
||
</form>
|
||
<i :class="open3 === true?'icon_eyeopen':'icon_eyeclose'" @click="open3=!open3"></i>
|
||
</div>
|
||
<div class="pop_btns_box">
|
||
<div class="pop_btn pop_btn_primary" :disabled="disabled1" @click="checkPassword">确定</div>
|
||
<div class="pop_btn pop_btn_primary btngray" @click="cancel">取消</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal" v-if="checkShow"></div> -->
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
// import {queryTaskList, deleteTask, updateTask, checkPassword} from '@/config/getData.js'
|
||
import {queryTaskList, updateTask} from '@/config/getData.js'
|
||
export default {
|
||
name: 'taskmanage',
|
||
data () {
|
||
return {
|
||
error: true,
|
||
checkShow: true,
|
||
disabled1: false,
|
||
selectObj: {},
|
||
selectIndex: '',
|
||
pkId: '',
|
||
pwd: '',
|
||
up: false,
|
||
down: false,
|
||
del: false,
|
||
dataList: []
|
||
// visible: false,
|
||
// layout: 'normal',
|
||
// input: null,
|
||
// options: {
|
||
// useKbEvents: false,
|
||
// preventClickEvent: false
|
||
// },
|
||
// open3: false
|
||
// dataList: [
|
||
// {
|
||
// task_id: '1',
|
||
// task_no: '1001',
|
||
// next_point: '1001',
|
||
// task_status: '正在执行',
|
||
// time: '2021-07-14 12:00:00'
|
||
// },
|
||
// {
|
||
// task_id: '2',
|
||
// task_no: '1002',
|
||
// next_point: '1001',
|
||
// task_status: '未执行',
|
||
// time: '2021-07-15 12:00:00'
|
||
// },
|
||
// {
|
||
// task_id: '3',
|
||
// task_no: '1003',
|
||
// next_point: '1001',
|
||
// task_status: '未执行',
|
||
// time: '2021-07-18 12:00:00'
|
||
// },
|
||
// {
|
||
// task_id: '4',
|
||
// task_no: '1004',
|
||
// next_point: '1001',
|
||
// task_status: '未执行',
|
||
// time: '2021-09-10 12:00:00'
|
||
// }
|
||
// ]
|
||
}
|
||
},
|
||
created () {
|
||
this.initData()
|
||
},
|
||
methods: {
|
||
async initData () {
|
||
let res = await queryTaskList()
|
||
if (res.code === '1') {
|
||
this.dataList = res.result
|
||
console.log(this.dataList, '666')
|
||
} else {
|
||
this.toast(res.desc)
|
||
}
|
||
},
|
||
// async deleteTask () {
|
||
// let res = await deleteTask(this.selectObj.task_num)
|
||
// if (res.code === '1') {
|
||
// this.initData()
|
||
// } else {
|
||
// this.toast(res.desc)
|
||
// }
|
||
// },
|
||
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)
|
||
}
|
||
},
|
||
// async checkPassword () {
|
||
// this.disabled1 = true
|
||
// if (!this.pwd) {
|
||
// return
|
||
// }
|
||
// try {
|
||
// let res = await checkPassword(this.pwd)
|
||
// if (res.code === '1') {
|
||
// this.initData()
|
||
// this.checkShow = false
|
||
// this.fromShow = true
|
||
// } else {
|
||
// this.toast(res.desc)
|
||
// }
|
||
// this.disabled1 = false
|
||
// } catch (e) {
|
||
// this.disabled1 = false
|
||
// }
|
||
// this.hide()
|
||
// },
|
||
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.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.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
|
||
}
|
||
}
|
||
// cancel () {
|
||
// this.checkShow = false
|
||
// this.hide()
|
||
// },
|
||
// accept () {
|
||
// this.hide()
|
||
// },
|
||
// show (e) {
|
||
// this.input = e.target
|
||
// this.layout = e.target.dataset.layout
|
||
// if (!this.visible) {
|
||
// this.visible = true
|
||
// }
|
||
// },
|
||
// hide () {
|
||
// this.visible = false
|
||
// },
|
||
// next () {
|
||
// let inputs = document.querySelectorAll('input')
|
||
// let found = false;
|
||
// [].forEach.call(inputs, (item, i) => {
|
||
// if (!found && item === this.input && i < inputs.length - 1) {
|
||
// found = true
|
||
// this.$nextTick(() => {
|
||
// inputs[i + 1].focus()
|
||
// })
|
||
// }
|
||
// })
|
||
// if (!found) {
|
||
// this.input.blur()
|
||
// this.hide()
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
@import '~@style/mixin'
|
||
.cyellow
|
||
color #ECA800
|
||
.cred
|
||
color #FA6400
|
||
.cgreen
|
||
color #00C852
|
||
.con1
|
||
float left
|
||
width 100%
|
||
padding 0.25rem
|
||
.check-box
|
||
width 1rem
|
||
.radio_checked
|
||
position relative
|
||
top 8px
|
||
display inline-block
|
||
width 22px
|
||
height 22px
|
||
margin-left .4rem
|
||
background center / 100% 100% url(../images/aio/checked.png) no-repeat
|
||
// vertical-align -5%
|
||
.last-td
|
||
width 4.4rem
|
||
text-align left
|
||
padding-left 1.7rem
|
||
box-sizing border-box
|
||
.con2
|
||
// width 10.4rem
|
||
margin-left 2.1rem
|
||
position fixed
|
||
bottom 0.5rem
|
||
img
|
||
width 1.1rem
|
||
height 1.1rem
|
||
margin-right .5rem
|
||
.submitbtn
|
||
display inline-block
|
||
// position absolute
|
||
// top .15rem
|
||
float right
|
||
margin-top .15rem
|
||
.pop_btns_box
|
||
_wh(100%,.88rem)
|
||
_fj(center)
|
||
margin-top .2rem
|
||
.pop_btn
|
||
_wh(1.5rem,.88rem)
|
||
background #989EBB
|
||
border 2px solid #8B90A6
|
||
border-radius: .24rem
|
||
_font(.32rem,.88rem,#fff,500,center)
|
||
margin 0 .12rem
|
||
.pop_btn_primary
|
||
background #FD6A35
|
||
border 2px solid #E74F19
|
||
.btngray
|
||
background #989ebb
|
||
border 2px solid #989ebb
|
||
.pop_wrapper
|
||
position fixed
|
||
top 0
|
||
bottom 0
|
||
left 0
|
||
right 0
|
||
text-align center
|
||
z-index 999
|
||
&::after
|
||
content ""
|
||
display inline-block
|
||
height 100%
|
||
width 0
|
||
vertical-align middle
|
||
.modal
|
||
position fixed
|
||
left 0
|
||
top 0
|
||
_wh(100%,100%)
|
||
opacity .5
|
||
background #000
|
||
z-index 998
|
||
.pop_box
|
||
display inline-block
|
||
vertical-align middle
|
||
// _wh(8rem,4.8rem)
|
||
// width 8rem
|
||
padding .4rem
|
||
background-color #fff
|
||
border-radius .16rem
|
||
overflow hidden
|
||
h2
|
||
_font(.4rem,.56rem,#464646,600,center)
|
||
margin-bottom .2rem
|
||
.info-box
|
||
font-size .3rem
|
||
span
|
||
display inline-block
|
||
width 1rem
|
||
margin-right .2rem
|
||
text-align left
|
||
input
|
||
border 1px solid #464646
|
||
border-radius 8px
|
||
height .8rem
|
||
line-height .8rem
|
||
width 4.6rem
|
||
margin-top .22rem
|
||
margin-bottom .2rem
|
||
text-indent .14rem
|
||
.input_box
|
||
_wh(100%,1rem)
|
||
background #FFFFFF
|
||
border .016rem solid #8B90A6
|
||
border-radius .16rem
|
||
margin-bottom .24rem
|
||
padding 0 .2rem
|
||
_fj(flex-start)
|
||
input
|
||
width 3rem
|
||
_font(.32rem,.968rem,#FA6400,,)
|
||
i
|
||
_font(.4rem,1rem,#8991A6,,)
|
||
.input_box_2
|
||
_fj()
|
||
.label
|
||
width 2rem
|
||
_font(.32rem, 1rem,#696969,,)
|
||
#keyboard
|
||
position fixed
|
||
left 0
|
||
right 0
|
||
bottom 0
|
||
z-index 1000
|
||
width 100%
|
||
max-width 1366px
|
||
margin 0 auto
|
||
padding 1em
|
||
background-color #EEE
|
||
box-shadow 0px -3px 10px rgba(black, 0.3)
|
||
border-radius 10px
|
||
.setup_no
|
||
_font(.3rem, 1rem,#FD6A35,,)
|
||
margin-left .4rem
|
||
.grid_wrapper table td
|
||
line-height 40px
|
||
</style>
|