<template>
|
<!-- <div class="header">计划库</div>-->
|
<!--搜索栏-->
|
|
<div class="search-panel-wrapper">
|
<div class="search-part">
|
<a-range-picker :size="searchPanelOptions.size" :format="searchPanelOptions.dateFormat"
|
:valueFormat="searchPanelOptions.valueFormat" v-model:value="timeRangeArr.data"
|
@change="dateChange" style="width: 300px"/>
|
</div>
|
|
<div class="search-part">
|
<a-select :size="searchPanelOptions.size" @change="selectChange" ref="select"
|
v-model:value="searchQuery.taskType" style="width: 300px">
|
<a-select-option value="">所有类型</a-select-option>
|
<a-select-option :value="item.value" v-for="(item) in TaskTypeOptions" :key="item.value">{{ item.label }}
|
</a-select-option>
|
</a-select>
|
</div>
|
|
<div class="search-part">
|
<a-select v-model:value="statusArr" allowClear @change="selectMultipleChange" :options="TaskStatusOptions"
|
:maxTagCount="searchPanelOptions.maxTagCount" mode="multiple"
|
:size="searchPanelOptions.size" placeholder="全部状态" style="width: 300px">
|
</a-select>
|
</div>
|
|
<div class="search-part">
|
<a-input-search :size="searchPanelOptions.size" v-model:value="searchQuery.name" @change="inputChange"
|
placeholder="按航线或计划名搜索" style="width: 300px"/>
|
</div>
|
</div>
|
|
<!--表格-->
|
<div class="plan-panel-wrapper">
|
<a-table :loading="tableLoading" class="plan-table" :columns="columns" :data-source="plansData.data"
|
row-key="job_id"
|
:pagination="paginationProp" :scroll="{ x: '100%', y: 600 }" @change="refreshData">
|
<!-- 执行时间 -->
|
<template #duration="{ record }">
|
<div class="flex-row" style="white-space: pre-wrap">
|
<div>
|
<div>{{ formatTaskTime(record.begin_time) }}</div>
|
<div>{{ formatTaskTime(record.end_time) }}</div>
|
</div>
|
<div class="ml10">
|
<div>{{ formatTaskTime(record.execute_time) }}</div>
|
<div>{{ formatTaskTime(record.completed_time) }}</div>
|
</div>
|
</div>
|
</template>
|
<!-- 状态 -->
|
<template #status="{ record }">
|
<div>
|
<div class="flex-display flex-align-center">
|
<span class="circle-icon" :style="{backgroundColor: formatTaskStatus(record).color}"></span>
|
{{ formatTaskStatus(record).text }}
|
<a-tooltip v-if="!!record.code" placement="bottom" arrow-point-at-center>
|
<template #title>
|
<div>{{ getCodeMessage(record.code) }}</div>
|
</template>
|
<exclamation-circle-outlined class="ml5" :style="{color: commonColor.WARN, fontSize: '16px' }"/>
|
</a-tooltip>
|
</div>
|
<div v-if="record.status === TaskStatus.Carrying">
|
<a-progress :percent="record.progress || 0"/>
|
</div>
|
</div>
|
</template>
|
<!-- 任务类型 -->
|
<template #taskType="{ record }">
|
<div>{{ formatTaskType(record) }}</div>
|
</template>
|
<!-- 失控动作 -->
|
<template #lostAction="{ record }">
|
<div>{{ formatLostAction(record) }}</div>
|
</template>
|
<!-- 媒体上传状态 -->
|
<template #media_upload="{ record }">
|
<div>
|
<div class="flex-display flex-align-center">
|
<span class="circle-icon" :style="{backgroundColor: formatMediaTaskStatus(record).color}"></span>
|
{{ formatMediaTaskStatus(record).text }}
|
</div>
|
<div class="pl15">
|
{{ formatMediaTaskStatus(record).number }}
|
<a-tooltip v-if="formatMediaTaskStatus(record).status === MediaStatus.ToUpload" placement="bottom"
|
arrow-point-at-center>
|
<template #title>
|
<div>Upload now</div>
|
</template>
|
<UploadOutlined class="ml5" :style="{color: commonColor.BLUE, fontSize: '16px' }"
|
@click="onUploadMediaFileNow(record.job_id)"/>
|
</a-tooltip>
|
</div>
|
</div>
|
</template>
|
<!-- 操作 -->
|
<template #action="{ record }">
|
<div class="action-area">
|
<a-popconfirm
|
v-if="record.status === TaskStatus.Wait"
|
title="你确定要删除该计划吗?"
|
ok-text="确定"
|
cancel-text="取消"
|
@confirm="onDeleteTask(record.job_id)"
|
>
|
<a-button type="primary" size="small">删除</a-button>
|
</a-popconfirm>
|
<a-popconfirm
|
v-if="record.status === TaskStatus.Carrying"
|
title="你确定要暂停该任务吗?"
|
ok-text="确定"
|
cancel-text="取消"
|
@confirm="onSuspendTask(record.job_id)"
|
>
|
<a-button type="primary" size="small">暂停</a-button>
|
</a-popconfirm>
|
<a-popconfirm
|
v-if="record.status === TaskStatus.Paused"
|
title="你确定要重新开始吗?"
|
ok-text="确定"
|
cancel-text="取消"
|
@confirm="onResumeTask(record.job_id)"
|
>
|
<a-button type="primary" size="small">重新开始</a-button>
|
</a-popconfirm>
|
</div>
|
</template>
|
</a-table>
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref } from '@vue/reactivity'
|
import { message } from 'ant-design-vue'
|
import { TableState } from 'ant-design-vue/lib/table/interface'
|
import { computed, onMounted } from 'vue'
|
import { IPage } from '/@/api/http/type'
|
import 'moment/dist/locale/zh-cn'
|
import {
|
deleteTask,
|
updateTaskStatus,
|
UpdateTaskStatus,
|
getWaylineJobs,
|
Task,
|
uploadMediaFileNow,
|
TaskQueryParam
|
} from '/@/api/wayline'
|
import { useMyStore } from '/@/store'
|
import { ELocalStorageKey } from '/@/types/enums'
|
import { useFormatTask } from './use-format-task'
|
import {
|
TaskTypeOptions,
|
TaskStatus,
|
TaskStatusOptions,
|
TaskProgressInfo,
|
TaskProgressStatus,
|
TaskProgressWsStatusMap,
|
MediaStatus,
|
MediaStatusProgressInfo,
|
TaskMediaHighestPriorityProgressInfo
|
} from '/@/types/task'
|
import { useTaskWsEvent } from './use-task-ws-event'
|
import { getErrorMessage } from '/@/utils/error-code/index'
|
import { commonColor } from '/@/utils/color'
|
import { ExclamationCircleOutlined, UploadOutlined } from '@ant-design/icons-vue'
|
import { timestampToTime } from '/@/utils/time'
|
|
const store = useMyStore()
|
const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
|
|
const dockSns = computed(() => store.state.common.dockSns)
|
// 监听设备选择
|
watch(
|
() => dockSns.value,
|
(newVal) => {
|
searchQuery.dockSn = newVal
|
getPlans()
|
}
|
)
|
|
// 搜索栏配置项
|
const searchPanelOptions = reactive({
|
size: 'large',
|
maxTagCount: 2,
|
dateFormat: 'YYYY-MM-DD',
|
valueFormat: 'YYYY-MM-DD'
|
})
|
// 表格加载
|
const tableLoading = ref(false)
|
|
const searchQuery = reactive<TaskQueryParam>({
|
taskType: ''
|
})
|
|
function getSearchTime (n:number) {
|
const nowStamp = new Date().getTime()
|
const timestamp = nowStamp + (n * 60 * 60 * 1000 * 24)
|
const time = timestampToTime(timestamp)
|
return time
|
}
|
|
const statusArr = reactive([])
|
const timeRangeArr = reactive({
|
data: [getSearchTime(-3), getSearchTime(3)] as string[]
|
})
|
|
const body: IPage = {
|
page: 1,
|
total: 0,
|
page_size: 50
|
}
|
const paginationProp = reactive({
|
pageSizeOptions: ['20', '50', '100'],
|
showQuickJumper: true,
|
showSizeChanger: true,
|
pageSize: 50,
|
current: 1,
|
total: 0
|
})
|
|
const columns = [
|
{
|
title: '计划|实际时间',
|
dataIndex: 'duration',
|
width: 200,
|
slots: { customRender: 'duration' },
|
},
|
{
|
title: '执行状态',
|
key: 'status',
|
width: 80,
|
slots: { customRender: 'status' }
|
},
|
{
|
title: '计划名称',
|
dataIndex: 'job_name',
|
ellipsis: true,
|
width: 170,
|
},
|
{
|
title: '设备名称',
|
dataIndex: 'dock_name',
|
width: 100,
|
ellipsis: true
|
},
|
{
|
title: '相对机场返航高度',
|
dataIndex: 'rth_altitude',
|
width: 140,
|
},
|
{
|
title: '航线飞行中失联',
|
dataIndex: 'out_of_control_action',
|
width: 140,
|
slots: { customRender: 'lostAction' },
|
},
|
{
|
title: '操作',
|
width: 120,
|
slots: { customRender: 'action' }
|
}
|
]
|
type Pagination = TableState['pagination']
|
|
const plansData = reactive({
|
data: [] as Task[]
|
})
|
|
const { formatTaskType, formatTaskTime, formatLostAction, formatTaskStatus, formatMediaTaskStatus } = useFormatTask()
|
|
// 设备任务执行进度更新
|
function onTaskProgressWs (data: TaskProgressInfo) {
|
const { bid, output } = data
|
if (output) {
|
const { status, progress } = output || {}
|
const taskItem = plansData.data.find(task => task.job_id === bid)
|
if (!taskItem) return
|
if (status) {
|
taskItem.status = TaskProgressWsStatusMap[status]
|
// 执行中，更新进度
|
if (status === TaskProgressStatus.Sent || status === TaskProgressStatus.inProgress) {
|
taskItem.progress = progress?.percent || 0
|
} else if ([TaskProgressStatus.Rejected, TaskProgressStatus.Canceled, TaskProgressStatus.Timeout, TaskProgressStatus.Failed, TaskProgressStatus.OK].includes(status)) {
|
getPlans()
|
}
|
}
|
}
|
}
|
|
// 媒体上传进度更新
|
function onTaskMediaProgressWs (data: MediaStatusProgressInfo) {
|
const { media_count: mediaCount, uploaded_count: uploadedCount, job_id: jobId } = data
|
if (isNaN(mediaCount) || isNaN(uploadedCount) || !jobId) {
|
return
|
}
|
const taskItem = plansData.data.find(task => task.job_id === jobId)
|
if (!taskItem) return
|
if (mediaCount === uploadedCount) {
|
taskItem.uploading = false
|
} else {
|
taskItem.uploading = true
|
}
|
taskItem.media_count = mediaCount
|
taskItem.uploaded_count = uploadedCount
|
}
|
|
function onoTaskMediaHighestPriorityWS (data: TaskMediaHighestPriorityProgressInfo) {
|
const { pre_job_id: preJobId, job_id: jobId } = data
|
const preTaskItem = plansData.data.find(task => task.job_id === preJobId)
|
const taskItem = plansData.data.find(task => task.job_id === jobId)
|
if (preTaskItem) {
|
preTaskItem.uploading = false
|
}
|
if (taskItem) {
|
taskItem.uploading = true
|
}
|
}
|
|
function getCodeMessage (code: number) {
|
return getErrorMessage(code) + `（code: ${code}）`
|
}
|
|
useTaskWsEvent({
|
onTaskProgressWs,
|
onTaskMediaProgressWs,
|
onoTaskMediaHighestPriorityWS,
|
})
|
|
onMounted(() => {
|
getPlans()
|
})
|
|
function dateChange (value: any) {
|
searchQuery.startTime = value[0]
|
searchQuery.endTime = value[1]
|
getPlans()
|
}
|
|
function inputChange (searchValue: string) {
|
getPlans()
|
}
|
|
function selectChange (value: any) {
|
getPlans()
|
}
|
|
function selectMultipleChange (value: any) {
|
searchQuery.status = value.join(',')
|
getPlans()
|
}
|
|
function getPlans () {
|
searchQuery.startTime = timeRangeArr.data[0]
|
searchQuery.endTime = timeRangeArr.data[1]
|
|
console.log('计划查询请求参数', searchQuery)
|
tableLoading.value = true
|
getWaylineJobs(workspaceId, body, searchQuery).then(res => {
|
if (res.code !== 0) {
|
return
|
}
|
plansData.data = res.data.list
|
paginationProp.total = res.data.pagination.total
|
paginationProp.current = res.data.pagination.page
|
|
tableLoading.value = false
|
}).catch(err => {
|
console.log(err)
|
tableLoading.value = false
|
})
|
}
|
|
function refreshData (page: Pagination) {
|
body.page = page?.current!
|
body.page_size = page?.pageSize!
|
getPlans()
|
}
|
|
// 删除任务
|
async function onDeleteTask (jobId: string) {
|
const { code } = await deleteTask(workspaceId, {
|
job_id: jobId
|
})
|
if (code === 0) {
|
message.success('删除成功')
|
getPlans()
|
}
|
}
|
|
// 挂起任务
|
async function onSuspendTask (jobId: string) {
|
const { code } = await updateTaskStatus(workspaceId, {
|
job_id: jobId,
|
status: UpdateTaskStatus.Suspend
|
})
|
if (code === 0) {
|
message.success('暂停成功')
|
getPlans()
|
}
|
}
|
|
// 解除挂起任务
|
async function onResumeTask (jobId: string) {
|
const { code } = await updateTaskStatus(workspaceId, {
|
job_id: jobId,
|
status: UpdateTaskStatus.Resume
|
})
|
if (code === 0) {
|
message.success('恢复成功')
|
getPlans()
|
}
|
}
|
|
// 立即上传媒体
|
async function onUploadMediaFileNow (jobId: string) {
|
const { code } = await uploadMediaFileNow(workspaceId, jobId)
|
if (code === 0) {
|
message.success('上传媒体文件成功')
|
getPlans()
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.plan-panel-wrapper {
|
width: 100%;
|
padding: 16px;
|
|
.plan-table {
|
background: #fff;
|
margin-top: 10px;
|
}
|
|
.action-area {
|
|
&::v-deep {
|
.ant-btn {
|
margin-right: 10px;
|
margin-bottom: 10px;
|
}
|
}
|
}
|
|
.circle-icon {
|
display: inline-block;
|
width: 12px;
|
height: 12px;
|
margin-right: 3px;
|
border-radius: 50%;
|
vertical-align: middle;
|
flex-shrink: 0;
|
}
|
}
|
|
.header {
|
width: 100%;
|
height: 60px;
|
background: #fff;
|
padding: 16px;
|
font-size: 20px;
|
font-weight: bold;
|
text-align: start;
|
color: #000;
|
}
|
|
.search-panel-wrapper {
|
height: 85px;
|
background: #ffffff;
|
padding: 0 20px;
|
display: flex;
|
align-items: center;
|
|
.search-part {
|
margin-right: 10px;
|
}
|
|
}
|
</style>
|
