xiaodou-ai-admin/src/pages/cvs/edge/aiTask.vue

<template>
  <a-card title="任务管理"  >
    <table-pro
      :service='AiboxCloudController.task'
      :columns="columns"
      ref="tableProDom"
      @add="openModal('add')"
    >
    <template #render="{ column, record }">
        <template v-if="column.key === 'taskAbility'">
          <a-tag :key="item.value" v-for="item in abilityList.filter( able => record.taskAbility.includes(able.value))"  >
            {{item.label}}
          </a-tag>
        </template>
        <template v-if="column.key === 'taskState'">
          <a-tag :color="taskStateMap.get(record.taskState)?.color" >
            {{taskStateMap.get(record.taskState)?.label}}
          </a-tag>
        </template>
        <template v-if="column.key === 'action'">
          <a-space>
            <a  @click="updateTaskStatus('start', record.taskNum)" >启动任务</a>
            <a  @click="updateTaskStatus('stop', record.taskNum)" >停止任务</a>
            <a @click="openModal('update', record)" >编辑</a>
            <!-- <a @click="openDisposeModal(record)" >配置区域</a> -->
            <a-popconfirm
              title="确定要删除这个任务吗"
              ok-text="Yes"
              cancel-text="No"
              @confirm="delTask(record.taskNum)"
            >
              <a >删除</a>
            </a-popconfirm>
          </a-space>
        </template>
    </template>
    </table-pro>
  </a-card>

  <RealView
    :title="state.opraState === 'add' ? '新增任务' : '编辑任务'"
    :open="state.visible"
    @cancel='state.visible = false'
    @ok='submit'
    footer
  >
    <add-form ref="addFormRef" :opra-state="state.opraState"  :item-data="state.taskState" />
  </RealView>
</template>
<script lang='ts'  setup >
import { AiboxCloudController } from '@/controller'
import { computed, onMounted, reactive, ref } from 'vue'
import { RealView } from '@/components/RealView/index'
import AddForm from './components/add.vue'

const columns = [
  {
    title: '任务编号',
    dataIndex: 'taskNum',
    key: 'taskNum'
  },
  {
    title: '任务名称',
    dataIndex: 'taskID',
    key: 'taskID'
  },
  {
    title: '任务流',
    dataIndex: 'taskStream',
    key: 'taskStream'
  },
  {
    title: '算法配置',
    dataIndex: 'taskAbility',
    key: 'taskAbility'
  },
  {
    title: '任务描述',
    dataIndex: 'taskDescribe',
    key: 'taskDescribe'
  },
  {
    title: '任务状态',
    dataIndex: 'taskState',
    key: 'taskState'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const tableProDom = ref()

const addFormRef = ref()

const state = reactive<{
  loading: boolean,
  visible: boolean,
  dataSource: any,
  opraState: 'add' | 'update',
  taskState: any
}>({
  loading: false,
  visible: false,
  dataSource: [],
  opraState: 'add',
  taskState: {}
})

const openModal = (type: 'add' | 'update', record = {}) => {
  state.opraState = type
  state.visible = true
  state.taskState = record
}

const submit = () => {
  addFormRef.value.submit()
}

const updateTaskStatus = async (status: 'start' | 'stop', taskNum: number) => {
  await AiboxCloudController.updateTaskStatus(status, taskNum)
  tableProDom.value.reload()
}

const delTask = async (taskNum: number) => {
  await AiboxCloudController.delTask(taskNum)
  tableProDom.value.reload()
}

</script>
<style lang='less' scoped >

</style>