<template>
|
<Dialog v-model="dialogVisible" title="升级任务详情" width="1200px" append-to-body>
|
<!-- 任务信息 -->
|
<ContentWrap title="任务信息" class="mb-20px">
|
<el-descriptions :column="3" v-loading="taskLoading" border>
|
<el-descriptions-item label="任务编号">{{ task.id }}</el-descriptions-item>
|
<el-descriptions-item label="任务名称">{{ task.name }}</el-descriptions-item>
|
<el-descriptions-item label="升级范围">
|
<dict-tag :type="DICT_TYPE.IOT_OTA_TASK_DEVICE_SCOPE" :value="task.deviceScope" />
|
</el-descriptions-item>
|
<el-descriptions-item label="任务状态">
|
<dict-tag :type="DICT_TYPE.IOT_OTA_TASK_STATUS" :value="task.status" />
|
</el-descriptions-item>
|
<el-descriptions-item label="创建时间">
|
{{ task.createTime ? formatDate(task.createTime) : '-' }}
|
</el-descriptions-item>
|
<el-descriptions-item label="任务描述" :span="3">
|
{{ task.description }}
|
</el-descriptions-item>
|
</el-descriptions>
|
</ContentWrap>
|
|
<!-- 任务升级设备统计 -->
|
<ContentWrap title="升级设备统计" class="mb-20px">
|
<el-row :gutter="20" class="py-20px" v-loading="taskStatisticsLoading">
|
<el-col :span="6">
|
<div class="text-center p-20px border border-solid border-gray-200 rounded bg-gray-50">
|
<div class="text-32px font-bold mb-8px text-blue-500">
|
{{ Object.values(taskStatistics).reduce((sum, count) => sum + (count || 0), 0) || 0 }}
|
</div>
|
<div class="text-14px text-gray-600">升级设备总数</div>
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div class="text-center p-20px border border-solid border-gray-200 rounded bg-gray-50">
|
<div class="text-32px font-bold mb-8px text-gray-400">
|
{{ taskStatistics[IoTOtaTaskRecordStatusEnum.PENDING.value] || 0 }}
|
</div>
|
<div class="text-14px text-gray-600">待推送</div>
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div class="text-center p-20px border border-solid border-gray-200 rounded bg-gray-50">
|
<div class="text-32px font-bold mb-8px text-blue-400">
|
{{ taskStatistics[IoTOtaTaskRecordStatusEnum.PUSHED.value] || 0 }}
|
</div>
|
<div class="text-14px text-gray-600">已推送</div>
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div class="text-center p-20px border border-solid border-gray-200 rounded bg-gray-50">
|
<div class="text-32px font-bold mb-8px text-yellow-500">
|
{{ taskStatistics[IoTOtaTaskRecordStatusEnum.UPGRADING.value] || 0 }}
|
</div>
|
<div class="text-14px text-gray-600">正在升级</div>
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div class="text-center p-20px border border-solid border-gray-200 rounded bg-gray-50">
|
<div class="text-32px font-bold mb-8px text-green-500">
|
{{ taskStatistics[IoTOtaTaskRecordStatusEnum.SUCCESS.value] || 0 }}
|
</div>
|
<div class="text-14px text-gray-600">升级成功</div>
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div class="text-center p-20px border border-solid border-gray-200 rounded bg-gray-50">
|
<div class="text-32px font-bold mb-8px text-red-500">
|
{{ taskStatistics[IoTOtaTaskRecordStatusEnum.FAILURE.value] || 0 }}
|
</div>
|
<div class="text-14px text-gray-600">升级失败</div>
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div class="text-center p-20px border border-solid border-gray-200 rounded bg-gray-50">
|
<div class="text-32px font-bold mb-8px text-gray-400">
|
{{ taskStatistics[IoTOtaTaskRecordStatusEnum.CANCELED.value] || 0 }}
|
</div>
|
<div class="text-14px text-gray-600">升级取消</div>
|
</div>
|
</el-col>
|
</el-row>
|
</ContentWrap>
|
|
<!-- 设备管理 -->
|
<ContentWrap title="升级设备记录">
|
<!-- Tab 切换 -->
|
<el-tabs v-model="activeTab" @tab-click="handleTabClick" class="mb-15px">
|
<el-tab-pane v-for="tab in statusTabs" :key="tab.key" :label="tab.label" :name="tab.key" />
|
</el-tabs>
|
<!-- Tab 内容 -->
|
<div v-for="tab in statusTabs" :key="tab.key" v-show="activeTab === tab.key">
|
<!-- 设备列表 -->
|
<el-table
|
v-loading="recordLoading"
|
:data="recordList"
|
:stripe="true"
|
:show-overflow-tooltip="true"
|
>
|
<el-table-column label="设备名称" align="center" prop="deviceName" />
|
<el-table-column label="当前版本" align="center" prop="fromFirmwareVersion" />
|
<el-table-column label="升级状态" align="center" prop="status" width="120">
|
<template #default="scope">
|
<dict-tag :type="DICT_TYPE.IOT_OTA_TASK_RECORD_STATUS" :value="scope.row.status" />
|
</template>
|
</el-table-column>
|
<el-table-column label="升级进度" align="center" prop="progress" width="120">
|
<template #default="scope"> {{ scope.row.progress }}% </template>
|
</el-table-column>
|
<el-table-column label="状态描述" align="center" prop="description" />
|
<el-table-column label="更新时间" align="center" prop="updateTime" width="180">
|
<template #default="scope">
|
{{ formatDate(scope.row.updateTime) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="80">
|
<template #default="scope">
|
<el-button
|
v-if="
|
[
|
IoTOtaTaskRecordStatusEnum.PENDING.value,
|
IoTOtaTaskRecordStatusEnum.PUSHED.value,
|
IoTOtaTaskRecordStatusEnum.UPGRADING.value
|
].includes(scope.row.status)
|
"
|
link
|
type="danger"
|
@click="handleCancelUpgrade(scope.row)"
|
v-hasPermi="['iot:ota-task-record:cancel']"
|
>
|
取消
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- 分页 -->
|
<Pagination
|
:total="recordTotal"
|
v-model:page="queryParams.pageNo"
|
v-model:limit="queryParams.pageSize"
|
@pagination="getRecordList"
|
/>
|
</div>
|
</ContentWrap>
|
</Dialog>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive, computed } from 'vue'
|
import { TabsPaneContext } from 'element-plus'
|
import { Dialog } from '@/components/Dialog'
|
import { ContentWrap } from '@/components/ContentWrap'
|
import Pagination from '@/components/Pagination/index.vue'
|
import { IoTOtaTaskApi, OtaTask } from '@/api/iot/ota/task'
|
import { IoTOtaTaskRecordApi, OtaTaskRecord } from '@/api/iot/ota/task/record'
|
import { DICT_TYPE } from '@/utils/dict'
|
import { IoTOtaTaskRecordStatusEnum } from '@/views/iot/utils/constants'
|
import { formatDate } from '@/utils/formatTime'
|
|
/** OTA 任务详情组件 */
|
defineOptions({ name: 'OtaTaskDetail' })
|
|
const message = useMessage() // 消息弹窗
|
const dialogVisible = ref(false) // 弹窗的是否展示
|
|
const taskId = ref<number>() // 任务编号
|
const taskLoading = ref(false) // 任务加载状态
|
const task = ref<OtaTask>({} as OtaTask) // 任务信息
|
|
const taskStatisticsLoading = ref(false) // 任务统计加载状态
|
const taskStatistics = ref<Record<string, number>>({}) // 任务统计数据
|
|
const recordLoading = ref(false) // 记录列表加载状态
|
const recordList = ref<OtaTaskRecord[]>([]) // 记录列表数据
|
const recordTotal = ref(0) // 记录总数
|
const queryParams = reactive({
|
pageNo: 1,
|
pageSize: 10,
|
taskId: undefined as number | undefined,
|
status: undefined as number | undefined
|
}) // 查询参数
|
const activeTab = ref('') // 当前激活的标签页
|
|
/** 状态标签配置 */
|
const statusTabs = computed(() => {
|
const tabs = [{ key: '', label: '全部设备' }]
|
Object.values(IoTOtaTaskRecordStatusEnum).forEach((status) => {
|
tabs.push({
|
key: status.value.toString(),
|
label: status.label
|
})
|
})
|
return tabs
|
})
|
|
/** 获取任务详情 */
|
const getTaskInfo = async () => {
|
if (!taskId.value) {
|
return
|
}
|
taskLoading.value = true
|
try {
|
task.value = await IoTOtaTaskApi.getOtaTask(taskId.value)
|
} finally {
|
taskLoading.value = false
|
}
|
}
|
|
/** 获取统计数据 */
|
const getStatistics = async () => {
|
if (!taskId.value) {
|
return
|
}
|
taskStatisticsLoading.value = true
|
try {
|
taskStatistics.value = await IoTOtaTaskRecordApi.getOtaTaskRecordStatusStatistics(
|
undefined,
|
taskId.value
|
)
|
} finally {
|
taskStatisticsLoading.value = false
|
}
|
}
|
|
/** 获取升级记录列表 */
|
const getRecordList = async () => {
|
if (!taskId.value) {
|
return
|
}
|
recordLoading.value = true
|
try {
|
queryParams.taskId = taskId.value
|
const data = await IoTOtaTaskRecordApi.getOtaTaskRecordPage(queryParams)
|
recordList.value = data.list || []
|
recordTotal.value = data.total || 0
|
} finally {
|
recordLoading.value = false
|
}
|
}
|
|
/** 切换标签 */
|
const handleTabClick = (tab: TabsPaneContext) => {
|
const tabKey = tab.paneName as string
|
activeTab.value = tabKey
|
queryParams.pageNo = 1
|
queryParams.status = activeTab.value === '' ? undefined : parseInt(tabKey)
|
getRecordList()
|
}
|
|
/** 取消升级 */
|
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
const handleCancelUpgrade = async (record: OtaTaskRecord) => {
|
try {
|
await message.confirm('确认要取消该设备的升级任务吗？')
|
await IoTOtaTaskRecordApi.cancelOtaTaskRecord(record.id!)
|
message.success('取消成功')
|
// 刷新数据
|
await getRecordList()
|
await getStatistics()
|
await getTaskInfo()
|
// 通知父组件刷新数据
|
emit('success')
|
} catch (error) {
|
console.error('取消升级失败', error)
|
}
|
}
|
|
/** 打开弹窗 */
|
const open = (id: number) => {
|
taskId.value = id
|
dialogVisible.value = true
|
// 重置数据
|
activeTab.value = ''
|
queryParams.pageNo = 1
|
queryParams.status = undefined
|
|
// 加载数据
|
getTaskInfo()
|
getStatistics()
|
getRecordList()
|
}
|
|
/** 暴露方法 */
|
defineExpose({ open })
|
</script>
|
