xiaodou-ai-admin/src/pages/Iot/task/track.vue

<template>
<a-card>
  <a-row>
    <a-space>
     <a-col>
        <a-range-picker v-model:value="time" :format="['DD/MM/YYYY', 'DD/MM/YYYY']"  />
      </a-col>
      <a-col>
        <a-button type="primary" @click="getTrackTaskList">搜索</a-button>
     </a-col>
    </a-space>
  </a-row>

  <a-table
    style="margin-top: 20px;"
    :columns="columns"
    :data-source="state.dataSource"
    :loading="state.loading"
    :pagination="queryParamsState"
    @change="changePage"
  >
    <template #bodyCell="{column, record}">
      <template v-if="column.key === 'ts'" >
          {{dayjs(record.ts).format('YYYY/MM/DD HH:MM:ss')}}
        </template>
          <template v-if="column.key === 'action'" >
            <a-space>
              <a @click="openModal('preview', record.id)" >详情</a>
            </a-space>
          </template>
    </template>
  </a-table>
</a-card>

<modal-pro
    style="width: 700px;overflow: hidden;"
    label="最终详情"
    :visible="state.visable"
    @cancel="state.visable = false"
    @ok="state.visable = false"
  >

</modal-pro>

</template>

<script lang='ts' setup >
import { TaskController } from '@/controller/iot/task'
import { onMounted, reactive, ref, watch } from 'vue'
import dayjs from 'dayjs'

const columns = [
  {
    title: '任务id',
    dataIndex: 'taskId'
  },
  {
    title: '执行时间',
    dataIndex: 'ts',
    key: 'ts'
  },
  {
    title: '任务参数',
    dataIndex: 'params',
    key: 'params'
  },
  {
    title: '任务结果',
    dataIndex: 'ret',
    key: 'ret'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const time = ref([])

const queryParamsState = reactive({
  page: 1,
  pageSize: 10,
  start: 0,
  end: 0,
  taskId: ''
})

const state = reactive({
  taskList: [],
  dataSource: [],
  loading: false,
  visable: false,
  opraState: '',
  id: ''
})

watch(
  () => time.value,
  () => {
    if (dayjs(time.value).format('YYYY/MM/DD') === 'Invalid Date') {
      queryParamsState.start = ''
      queryParamsState.end = ''
    } else {
      queryParamsState.start = new Date(dayjs(time.value[0])).getTime()
      queryParamsState.end = new Date(dayjs(time.value[1])).getTime()
    }
  }
)

const openModal = (opraState: 'preview', id: string) => {
  state.opraState = opraState
  state.id = id
}

const changePage = ({ current }) => {
  queryParamsState.page = current
  getTrackTaskList()
}

const getTrackTaskList = async () => {
  state.loading = true
  const { data } = await TaskController.trackTaskPage(queryParamsState)
  state.loading = false
  state.dataSource = data
}

onMounted(() => {
  getTrackTaskList()
})

</script>

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