apt-nl-new/src/pages/modules/taskmanage/TaskLists.vue

<template>
<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>序号</th>
          <th>任务号</th>
          <!-- <th>出发起点</th> -->
          <th>目标站点</th>
          <th>任务状态</th>
          <th>生成时间</th>
        </tr>
        <tr v-for="(e,index) in dataList" :key="index">
          <td>{{index+1}}</td>
          <td>{{e.task_num}}</td>
          <!-- <td>{{e.next_point}}</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">任务取消</button>
        <button class="btn btn2" @click="updateTask">任务提交</button>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {queryTaskList, updateTask} from '@/config/getData.js'
export default {
  name: 'TaskLists',
  data () {
    return {
      pkId: '',
      dataList: []
    }
  },
  created () {
    this.initData()
  },
  methods: {
    async initData () {
      let res = await queryTaskList()
      if (res.code === '1') {
        this.dataList = res.result
      } else {
        this.toast(res.desc)
      }
    },
    toDel () {
      console.log(1)
    },
    async updateTask () {
      let res = await updateTask(this.dataList)
      if (res.code === '1') {
        this.toast(res.desc)
        this.pkId = ''
        this.initData()
      } else {
        this.toast(res.desc)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.icon
  display inline-block
  width 43px
  height 43px
  position relative
  top 10px
.bgyellow
  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
  background center / 100% 100% url(../../../images/new/bg-con-l.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>