feat: add disk monitor job views

2026-04-22 23:39:09 +08:00
parent e1cb4fb694
commit 10e6bd5151
3 changed files with 290 additions and 6 deletions
--- a/frontend/src/views/systemMonitor/diskMonitor/components/DiskMonitorJobDetailDrawer.vue
+++ b/frontend/src/views/systemMonitor/diskMonitor/components/DiskMonitorJobDetailDrawer.vue
@@ -0,0 +1,139 @@
+<template>
+    <el-drawer
+        :model-value="props.visible"
+        size="70%"
+        title="任务详情"
+        destroy-on-close
+        @close="emit('update:visible', false)"
+    >
+        <div v-loading="props.loading" class="job-detail">
+            <template v-if="props.detail">
+                <div class="meta-grid">
+                    <div class="meta-item">
+                        <span class="meta-label">任务编号</span>
+                        <span class="meta-value">{{ props.detail.job.jobNo }}</span>
+                    </div>
+                    <div class="meta-item">
+                        <span class="meta-label">任务状态</span>
+                        <span class="meta-value">{{ props.detail.job.jobStatus }}</span>
+                    </div>
+                    <div class="meta-item">
+                        <span class="meta-label">开始时间</span>
+                        <span class="meta-value">{{ formatTime(props.detail.job.startedAt) }}</span>
+                    </div>
+                    <div class="meta-item">
+                        <span class="meta-label">结束时间</span>
+                        <span class="meta-value">{{ formatTime(props.detail.job.finishedAt) }}</span>
+                    </div>
+                </div>
+
+                <section class="table-section">
+                    <h4 class="section-title">results</h4>
+                    <el-table :data="props.detail.results" border stripe>
+                        <el-table-column prop="resultId" label="resultId" min-width="90" />
+                        <el-table-column prop="targetId" label="targetId" min-width="90" />
+                        <el-table-column prop="driveLetter" label="driveLetter" min-width="100" />
+                        <el-table-column label="usedPercent" min-width="110">
+                            <template #default="{ row }">{{ row.usedPercent }}%</template>
+                        </el-table-column>
+                        <el-table-column prop="currentStatus" label="currentStatus" min-width="130" />
+                        <el-table-column prop="previousStatus" label="previousStatus" min-width="130" />
+                        <el-table-column prop="statusChanged" label="statusChanged" min-width="120" />
+                        <el-table-column prop="shouldNotify" label="shouldNotify" min-width="120" />
+                        <el-table-column prop="notifyReason" label="notifyReason" min-width="150" />
+                        <el-table-column label="scanTime" min-width="170">
+                            <template #default="{ row }">{{ formatTime(row.scanTime) }}</template>
+                        </el-table-column>
+                        <el-table-column prop="message" label="message" min-width="180" show-overflow-tooltip />
+                    </el-table>
+                </section>
+
+                <section class="table-section">
+                    <h4 class="section-title">notifyLogs</h4>
+                    <el-table :data="props.detail.notifyLogs" border stripe>
+                        <el-table-column prop="id" label="id" min-width="80" />
+                        <el-table-column prop="resultId" label="resultId" min-width="90" />
+                        <el-table-column prop="driveLetter" label="driveLetter" min-width="100" />
+                        <el-table-column prop="notifyLevel" label="notifyLevel" min-width="110" />
+                        <el-table-column prop="channelType" label="channelType" min-width="120" />
+                        <el-table-column prop="channelTarget" label="channelTarget" min-width="160" show-overflow-tooltip />
+                        <el-table-column prop="sendStatus" label="sendStatus" min-width="110" />
+                        <el-table-column prop="responseMessage" label="responseMessage" min-width="180" show-overflow-tooltip />
+                        <el-table-column label="sentAt" min-width="170">
+                            <template #default="{ row }">{{ formatTime(row.sentAt) }}</template>
+                        </el-table-column>
+                    </el-table>
+                </section>
+            </template>
+            <el-empty v-else description="暂无详情数据" />
+        </div>
+    </el-drawer>
+</template>
+
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import type { DiskMonitor } from '@/api/system/diskMonitor/interface'
+
+defineOptions({
+    name: 'DiskMonitorJobDetailDrawer'
+})
+
+const props = defineProps<{
+    visible: boolean
+    detail: DiskMonitor.JobDetailData | null
+    loading: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:visible': [value: boolean]
+}>()
+
+const formatTime = (value?: string | null) => {
+    if (!value) return '--'
+    return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
+}
+</script>
+
+<style scoped lang="scss">
+.job-detail {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.meta-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px 18px;
+    padding: 14px;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    background: #f9fafb;
+}
+
+.meta-item {
+    display: flex;
+    gap: 8px;
+}
+
+.meta-label {
+    color: #6b7280;
+}
+
+.meta-value {
+    color: #111827;
+    font-weight: 500;
+}
+
+.table-section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.section-title {
+    margin: 0;
+    font-size: 16px;
+    color: #111827;
+}
+</style>
--- a/frontend/src/views/systemMonitor/diskMonitor/components/DiskMonitorJobTable.vue
+++ b/frontend/src/views/systemMonitor/diskMonitor/components/DiskMonitorJobTable.vue
@@ -0,0 +1,119 @@
+<template>
+    <div class="job-table-card">
+        <div class="table-header">
+            <div>
+                <h3 class="table-title">最近任务</h3>
+                <p class="table-description">展示最近 10 条磁盘监控任务执行记录</p>
+            </div>
+            <el-button :loading="loading" @click="emit('refresh')">刷新</el-button>
+        </div>
+
+        <el-table v-loading="loading" :data="rows" border stripe>
+            <el-table-column prop="jobNo" label="任务编号" min-width="180" />
+            <el-table-column label="来源" min-width="120">
+                <template #default="{ row }">
+                    {{ getSourceLabel(row.jobSource) }}
+                </template>
+            </el-table-column>
+            <el-table-column label="开始时间" min-width="170">
+                <template #default="{ row }">
+                    {{ formatTime(row.startedAt) }}
+                </template>
+            </el-table-column>
+            <el-table-column label="结束时间" min-width="170">
+                <template #default="{ row }">
+                    {{ formatTime(row.finishedAt) }}
+                </template>
+            </el-table-column>
+            <el-table-column label="状态" min-width="130">
+                <template #default="{ row }">
+                    <el-tag :type="getStatusType(row.jobStatus)" effect="light">
+                        {{ getStatusLabel(row.jobStatus) }}
+                    </el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column prop="warningCount" label="预警数量" min-width="100" />
+            <el-table-column prop="alarmCount" label="告警数量" min-width="100" />
+            <el-table-column label="操作" width="120" fixed="right">
+                <template #default="{ row }">
+                    <el-button link type="primary" @click="emit('detail', row)">查看详情</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import type { DiskMonitor } from '@/api/system/diskMonitor/interface'
+
+defineOptions({
+    name: 'DiskMonitorJobTable'
+})
+
+defineProps<{
+    rows: DiskMonitor.JobListItem[]
+    loading: boolean
+}>()
+
+const emit = defineEmits<{
+    refresh: []
+    detail: [row: DiskMonitor.JobListItem]
+}>()
+
+const getSourceLabel = (source: DiskMonitor.JobSource) => {
+    if (source === 'APP_START') return '应用启动'
+    if (source === 'DAILY_SCHEDULE') return '定时任务'
+    return '手动触发'
+}
+
+const getStatusType = (status: DiskMonitor.JobStatus) => {
+    if (status === 'SUCCESS') return 'success'
+    if (status === 'PARTIAL_SUCCESS') return 'warning'
+    if (status === 'FAILED') return 'danger'
+    return 'info'
+}
+
+const getStatusLabel = (status: DiskMonitor.JobStatus) => {
+    if (status === 'SUCCESS') return '成功'
+    if (status === 'PARTIAL_SUCCESS') return '部分成功'
+    if (status === 'FAILED') return '失败'
+    return '运行中'
+}
+
+const formatTime = (value?: string | null) => {
+    if (!value) return '--'
+    return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
+}
+</script>
+
+<style scoped lang="scss">
+.job-table-card {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    padding: 16px;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    background: #ffffff;
+}
+
+.table-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.table-title {
+    margin: 0 0 6px;
+    font-size: 18px;
+    color: #111827;
+}
+
+.table-description {
+    margin: 0;
+    font-size: 13px;
+    color: #6b7280;
+}
+</style>
--- a/frontend/src/views/systemMonitor/diskMonitor/index.vue
+++ b/frontend/src/views/systemMonitor/diskMonitor/index.vue
@@ -27,6 +27,9 @@
            :title="editingTargetIndex >= 0 ? '编辑监控目标' : '新增监控目标'"
            @confirm="confirmTarget"
        />
+
+        <DiskMonitorJobTable :rows="jobList" :loading="loading.jobs" @refresh="loadPageData" @detail="openJobDetail" />
+        <DiskMonitorJobDetailDrawer v-model:visible="jobDetailVisible" :detail="jobDetail" :loading="detailLoading" />
    </div>
 </template>

@@ -35,12 +38,15 @@ import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router'
 import {
+    getDiskMonitorJobDetail,
    getDiskMonitorJobList,
    getDiskMonitorPolicyDetail,
    runDiskMonitorJob,
    saveDiskMonitorPolicy
 } from '@/api/system/diskMonitor'
 import type { DiskMonitor } from '@/api/system/diskMonitor/interface'
+import DiskMonitorJobDetailDrawer from './components/DiskMonitorJobDetailDrawer.vue'
+import DiskMonitorJobTable from './components/DiskMonitorJobTable.vue'
 import DiskMonitorPolicyForm from './components/DiskMonitorPolicyForm.vue'
 import DiskMonitorSummary from './components/DiskMonitorSummary.vue'
 import DiskMonitorTargetDialog from './components/DiskMonitorTargetDialog.vue'
@@ -66,6 +72,10 @@ const targetDialogVisible = ref(false)
 const editingTargetIndex = ref(-1)
 const editingTarget = ref<DiskMonitor.TargetItem>(createEmptyTarget())
 const latestJob = ref<DiskMonitor.JobListItem | null>(null)
+const jobList = ref<DiskMonitor.JobListItem[]>([])
+const jobDetailVisible = ref(false)
+const jobDetail = ref<DiskMonitor.JobDetailData | null>(null)
+const detailLoading = ref(false)
 const loading = reactive({
    init: false,
    save: false,
@@ -146,24 +156,40 @@ const loadPolicyDetail = async () => {
    targetList.value = (detail.targets || []).map(item => normalizeTargetItem(item))
 }

-const loadLatestJob = async () => {
+const loadJobList = async () => {
    loading.jobs = true
    try {
+        // 统一拉取最近任务列表，并复用首条记录更新摘要卡片
        const response = await getDiskMonitorJobList({
            pageNum: 1,
-            pageSize: 1
+            pageSize: 10
        })
-        latestJob.value = response.data?.records?.[0] || null
+        const records = response.data?.records || []
+        jobList.value = records
+        latestJob.value = records[0] || null
    } finally {
        loading.jobs = false
    }
 }

+const openJobDetail = async (row: DiskMonitor.JobListItem) => {
+    jobDetailVisible.value = true
+    jobDetail.value = null
+    detailLoading.value = true
+    try {
+        // 点击明细时按任务 ID 拉取完整执行结果与通知日志
+        const response = await getDiskMonitorJobDetail(row.id)
+        jobDetail.value = response.data || null
+    } finally {
+        detailLoading.value = false
+    }
+}
+
 const loadPageData = async () => {
    loading.init = true
    try {
-        // 页面初始化时并行拉取策略和最近任务，保证摘要卡片和表单状态一致
-        await Promise.all([loadPolicyDetail(), loadLatestJob()])
+        // 页面刷新入口单一化：统一并行加载策略与最近任务
+        await Promise.all([loadPolicyDetail(), loadJobList()])
    } finally {
        loading.init = false
    }
@@ -201,7 +227,7 @@ const handleRun = async () => {
            jobSource: 'MANUAL'
        })
        ElMessage.success('监控任务已启动')
-        // 手动触发任务后刷新摘要，展示最新任务状态
+        // 手动触发任务后通过页面统一刷新流更新摘要和任务列表
        await loadPageData()
    } finally {
        loading.run = false