You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.3 KiB
108 lines
3.3 KiB
6 months ago
|
<template>
|
||
|
|
<div class="fault-rule-drawer">
|
||
|
|
<el-drawer v-model="isShowDrawer" title="任务详情" direction="rtl" size="50%" modal-class="model-dev-opn"
|
||
|
|
:before-close="handleBeforeClose">
|
||
|
|
<main class="wh-full" v-loading="loading">
|
||
|
|
<template v-for="detail in detailList">
|
||
|
|
<el-descriptions border :title="`${detail.sn}任务详情`">
|
||
|
|
<el-descriptions-item :label-width="60" label="状态"> <el-tag size="small">{{statusList.find(r => r.value ===
|
||
|
|
detail.status)?.label || '--'
|
||
|
|
}}</el-tag></el-descriptions-item>
|
||
|
|
<el-descriptions-item :label-width="100" label="总数数据量">{{ detail.total }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item :label-width="110" label="已完成数据量">{{ detail.finish }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item :label-width="60" label="信息">
|
||
|
|
{{ detail?.info ? detail.info : '暂无信息' }}
|
||
|
|
</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="当前进度">
|
||
|
|
<template v-if="detail.total === 0">
|
||
|
|
<span>暂无进度</span>
|
||
|
|
</template>
|
||
|
|
<el-progress v-else style="width: 95%;" :percentage="Math.floor((detail.finish / detail.total) * 100)"
|
||
|
|
:text-inside="true" :stroke-width="20" />
|
||
|
|
</el-descriptions-item>
|
||
|
|
</el-descriptions>
|
||
|
|
</template>
|
||
|
|
</main>
|
||
|
|
</el-drawer>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { getSubTopic, type PubMsgData } from '@/utils/zmq'
|
||
|
|
import ZMQWorker from '@/composables/useZMQJsonWorker'
|
||
|
|
import { getTaskInfo, type TaskInfo, type TaskList } from '@/api/module/taks'
|
||
|
|
import { useMessage } from '@/composables/useMessage'
|
||
|
|
|
||
|
|
const message = useMessage()
|
||
|
|
const worker = ZMQWorker.getInstance()
|
||
|
|
const isShowDrawer = defineModel<boolean>()
|
||
|
|
|
||
|
|
const detailList = ref<TaskInfo[]>([])
|
||
|
|
const loading = ref(false)
|
||
|
|
|
||
|
|
async function onDetail(row: TaskList) {
|
||
|
|
loading.value = true
|
||
|
|
const res = await getTaskInfo(row.id);
|
||
|
|
if (res.code === 0) {
|
||
|
|
detailList.value = res?.data?.details ?? []
|
||
|
|
} else {
|
||
|
|
message.error('获取任务详情失败')
|
||
|
|
}
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
const curentTaskId = ref('')
|
||
|
|
async function open(row: TaskList) {
|
||
|
|
isShowDrawer.value = true
|
||
|
|
curentTaskId.value = row.id
|
||
|
|
await onDetail(row)
|
||
|
|
worker.subscribe(getSubTopic('server', 'event', 'task'), zmqTaskCb)
|
||
|
|
}
|
||
|
|
|
||
|
|
const statusList = [
|
||
|
|
{ label: '未开始', value: 0 },
|
||
|
|
{ label: '进行中', value: 1 },
|
||
|
|
{ label: '成功', value: 2 },
|
||
|
|
{ label: '失败', value: -1 },
|
||
|
|
]
|
||
|
|
|
||
|
|
|
||
|
|
function zmqTaskCb(msg: PubMsgData) {
|
||
|
|
const { feedback, result, id } = msg
|
||
|
|
const taskId = feedback[0]
|
||
|
|
const deviceSN = feedback[1]
|
||
|
|
const deviceStatus = feedback[2] || '未知状态'
|
||
|
|
const finish = feedback[3] || 0
|
||
|
|
const total = feedback[4] || 0
|
||
|
|
if (curentTaskId.value !== taskId) return
|
||
|
|
const detail = detailList.value.find(item => item.sn === deviceSN)
|
||
|
|
if (!detail) return
|
||
|
|
detail.status = deviceStatus
|
||
|
|
detail.finish = finish
|
||
|
|
detail.total = total
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleBeforeClose(done: () => void) {
|
||
|
|
isShowDrawer.value = false
|
||
|
|
curentTaskId.value = ''
|
||
|
|
done()
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
open,
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.fault-rule-drawer {
|
||
|
|
font-size: 16px;
|
||
|
|
|
||
|
|
:deep(.edfs-wrap) {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-drawer__header) {
|
||
|
|
color: var(--text-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|