ops/front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat

Browse Source
This commit is contained in:
daxiong
2026-04-19 21:44:17 +08:00
parent 7f209b5fef
commit e569571462
1 changed files with 142 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
src/views/ops/pages/monitor/environment/index.vue
View File

@@ -16,9 +16,7 @@
<span v-if="r.code" class="text-muted room-option-code">{{ r.code }}</span>
</a-option>
</a-select>
<a-button type="outline" :disabled="!selectedRoomId" :loading="loading" @click="reloadRoomData">
刷新
</a-button>
<a-button type="outline" :disabled="!selectedRoomId" :loading="loading" @click="reloadRoomData">刷新</a-button>
</div>
<div v-if="statsPartialHint" class="toolbar-meta text-muted">{{ statsPartialHint }}</div>
</div>
@@ -88,60 +86,76 @@
<!-- 第二行：设备卡片 -->
<div v-if="selectedRoomId && deviceCardsHint" class="device-cards-hint text-muted">{{ deviceCardsHint }}</div>
<a-row v-if="selectedRoomId" :gutter="16" class="device-cards-row">
<a-col v-for="d in devicesForCards" :key="d.id" :xs="24" :sm="12" :md="8" :lg="6">
<a-card class="device-card" :bordered="false">
<div class="device-card-head">
<div class="device-card-title">{{ d.name }}</div>
<a-tag :color="getStatusColor(d.status)" size="small">{{ formatStatusText(d.status) }}</a-tag>
</div>
<div class="device-card-meta">
<span>{{ DEVICE_CATEGORY_MAP[d.device_category] || d.device_category }}</span>
<span class="text-muted"> · {{ d.type || '-' }}</span>
</div>
<div class="device-card-meta text-muted">
<a-tag :color="d.collect_method === 'snmp' ? 'purple' : 'arcoblue'" size="small">
{{ d.collect_method === 'snmp' ? 'SNMP' : 'API' }}
</a-tag>
<span class="ml-8">{{ formatDateTime(d.last_check_time) }}</span>
</div>
<div v-if="d.collect_last_result" class="device-card-result text-muted" :title="d.collect_last_result">
{{ truncate(d.collect_last_result, 80) }}
</div>
<a-divider :margin="12" />
<div class="device-metrics">
<a-spin :loading="metricsLoading && isMetricsTarget(d)" :size="16">
<template v-if="metricsForDevice(d).length">
<div
v-for="(m, idx) in metricsForDevice(d).slice(0, 6)"
:key="`${m.metric_name}-${idx}`"
class="metric-line"
<div v-if="selectedRoomId" class="device-cards-row">
<div v-for="d in devicesForCards" :key="d.id" class="device-card-wrapper">
<a-card class="device-card" :bordered="false" hoverable>
<template #title>
<div class="device-card-header">
<span class="device-card-title">{{ d.name }}</span>
<a-tag :color="getStatusColor(d.status)" size="small">{{ formatStatusText(d.status) }}</a-tag>
</div>
</template>
<div class="device-card-body">
<a-descriptions
:column="1"
size="small"
:value-style="{ width: '100%', color: 'var(--color-text-2)' }"
:label-style="{ color: 'var(--color-text-3)', fontWeight: 500 }"
>
<a-descriptions-item label="分类">{{ DEVICE_CATEGORY_MAP[d.device_category] || d.device_category }}</a-descriptions-item>
<a-descriptions-item label="型号">{{ d.type || '-' }}</a-descriptions-item>
<a-descriptions-item label="采集">
<a-tag :color="d.collect_method === 'snmp' ? 'purple' : 'arcoblue'" size="small">
{{ d.collect_method === 'snmp' ? 'SNMP' : 'API' }}
</a-tag>
</a-descriptions-item>
<a-descriptions-item label="最近检查">{{ formatDateTime(d.last_check_time) }}</a-descriptions-item>
</a-descriptions>
<div v-if="d.collect_last_result" class="device-card-result" :title="d.collect_last_result">
<a-typography-text :ellipsis="{ rows: 2, showTooltip: true }" class="text-muted">
{{ d.collect_last_result }}
</a-typography-text>
</div>
<a-divider :margin="12" />
<div class="device-metrics">
<a-spin :loading="metricsLoading && isMetricsTarget(d)" :size="16">
<a-descriptions
bordered
:column="2"
size="small"
:label-style="{ color: 'var(--color-text-3)' }"
:value-style="{ color: 'var(--color-text-1)', fontWeight: 600, fontFamily: 'SF Mono, Menlo, Monaco, monospace' }"
>
<span class="metric-name">{{ m.metric_name }}</span>
<span class="metric-val"
>{{ m.metric_value }}{{ m.metric_unit ? ` ${m.metric_unit}` : '' }}</span
>
</div>
</template>
<span v-else-if="!isMetricsTarget(d)" class="text-muted">指标见前 {{ METRICS_CARD_LIMIT }} 台</span>
<span v-else class="text-muted">暂无指标</span>
</a-spin>
<template v-if="metricsForDevice(d).length">
<a-descriptions-item
v-for="(m, idx) in metricsForDevice(d)"
:key="`${m.metric_name}-${idx}`"
:label="m.metric_name"
:span="1"
>
{{ m.metric_value }}
<span v-if="m.metric_unit" class="metric-unit">({{ m.metric_unit }})</span>
</a-descriptions-item>
</template>
<template v-else-if="!isMetricsTarget(d)">
<a-descriptions-item :span="2" class="text-muted">指标见前 {{ METRICS_CARD_LIMIT }} 台</a-descriptions-item>
</template>
<template v-else>
<a-descriptions-item :span="2" class="text-muted">暂无指标</a-descriptions-item>
</template>
</a-descriptions>
</a-spin>
</div>
</div>
</a-card>
</a-col>
</a-row>
</div>
</div>
<a-empty v-if="selectedRoomId && !devicesAll.length && !loading" description="该机房下暂无设备" />
<!-- 设备列表 -->
<a-card v-if="selectedRoomId" class="table-card" title="设备列表" :bordered="false">
<template #extra>
<a-select
v-model="selectedCategory"
placeholder="全部分类"
allow-clear
style="width: 160px"
:options="DEVICE_CATEGORY_OPTIONS"
/>
<a-select v-model="selectedCategory" placeholder="全部分类" allow-clear style="width: 160px" :options="DEVICE_CATEGORY_OPTIONS" />
</template>
<a-table
:data="tableRowsPaged"
@@ -176,16 +190,15 @@
</a-tag>
</template>
<template #collect_last_result="{ record }">
<a-typography-text :ellipsis="{ rows: 2, showTooltip: true }" style="max-width: 240px">
<a-typography-text :ellipsis="{ rows: 2, showTooltip: true }">
{{ record.collect_last_result || '-' }}
</a-typography-text>
</template>
<template #response_time="{ record }">
{{
record.response_time != null && record.response_time !== undefined
? Number(record.response_time).toFixed(1)
: '-'
}}
{{ record.response_time != null && record.response_time !== undefined ? Number(record.response_time).toFixed(1) : '-' }}
</template>
<template #last_check_time="{ record }">
{{ formatDateTime(record.last_check_time) }}
</template>
<template #continuous_errors="{ record }">
{{ record.continuous_errors != null ? record.continuous_errors : '-' }}
@@ -199,12 +212,7 @@
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import {
IconBuildingCommunity,
IconCircleCheck,
IconActivity,
IconAlertCircle,
} from '@tabler/icons-vue'
import { IconBuildingCommunity, IconCircleCheck, IconActivity, IconAlertCircle } from '@tabler/icons-vue'
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'
import { fetchRoomOptions, type RoomOptionItem } from '@/api/ops/room'
import {
@@ -241,15 +249,15 @@ const tablePagination = ref({
})
const columns: TableColumnData[] = [
{ title: '名称', dataIndex: 'name', width: 180, ellipsis: true, tooltip: true },
{ title: '设备分类', dataIndex: 'device_category', slotName: 'device_category', width: 100 },
{ title: '类型/型号', dataIndex: 'type', width: 120, ellipsis: true, tooltip: true },
{ title: '采集方式', dataIndex: 'collect_method', slotName: 'collect_method', width: 96 },
{ title: '启用 / 周期采集', dataIndex: 'enabled', slotName: 'enabled_collect', width: 160 },
{ title: '状态', dataIndex: 'status', slotName: 'status', width: 100, align: 'center' },
{ title: '最近检查', dataIndex: 'last_check_time', width: 168, ellipsis: true, tooltip: true },
{ title: '响应(ms)', dataIndex: 'response_time', slotName: 'response_time', width: 88 },
{ title: '连续错误', dataIndex: 'continuous_errors', slotName: 'continuous_errors', width: 88 },
{ title: '名称', dataIndex: 'name', minWidth: 180, ellipsis: true, tooltip: true },
{ title: '设备分类', dataIndex: 'device_category', slotName: 'device_category', minWidth: 100 },
{ title: '类型/型号', dataIndex: 'type', minWidth: 120, ellipsis: true, tooltip: true },
{ title: '采集方式', dataIndex: 'collect_method', slotName: 'collect_method', minWidth: 96 },
{ title: '启用 / 周期采集', dataIndex: 'enabled', slotName: 'enabled_collect', minWidth: 160 },
{ title: '状态', dataIndex: 'status', slotName: 'status', minWidth: 100, align: 'center' },
{ title: '最近检查', dataIndex: 'last_check_time', slotName: 'last_check_time', minWidth: 250, ellipsis: true, tooltip: true },
{ title: '响应(ms)', dataIndex: 'response_time', slotName: 'response_time', minWidth: 88 },
{ title: '连续错误', dataIndex: 'continuous_errors', slotName: 'continuous_errors', minWidth: 88 },
{ title: '采集摘要', dataIndex: 'collect_last_result', slotName: 'collect_last_result', minWidth: 200 },
]
@@ -263,9 +271,7 @@ const statsPartialHint = computed(() => {
const summaryOnline = computed(() => devicesAll.value.filter((d) => d.status === 'online').length)
const summaryCollectOn = computed(() => devicesAll.value.filter((d) => d.enabled && d.collect_on).length)
const summaryOfflineUnknown = computed(
() => devicesAll.value.filter((d) => d.status !== 'online').length
)
const summaryOfflineUnknown = computed(() => devicesAll.value.filter((d) => d.status !== 'online').length)
const devicesForCards = computed(() => devicesAll.value)
@@ -422,10 +428,7 @@ async function loadMetricsForFirstDevices() {
batch.map(async (d) => {
try {
const res = await fetchLatestMetrics(d.service_identity)
const metrics =
res?.code === 0 && res.details?.metrics && Array.isArray(res.details.metrics)
? res.details.metrics
: []
const metrics = res?.code === 0 && res.details?.metrics && Array.isArray(res.details.metrics) ? res.details.metrics : []
metricsByIdentity.value = { ...metricsByIdentity.value, [d.service_identity]: metrics }
} catch {
metricsByIdentity.value = { ...metricsByIdentity.value, [d.service_identity]: [] }
@@ -519,9 +522,36 @@ export default {
}
.device-cards-row {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 16px;
}
.device-card-wrapper {
flex: 1 1 calc(25% - 12px);
min-width: 280px;
max-width: 100%;
}
@media (max-width: 1200px) {
.device-card-wrapper {
flex: 1 1 calc(33.33% - 11px);
}
}
@media (max-width: 992px) {
.device-card-wrapper {
flex: 1 1 calc(50% - 8px);
}
}
@media (max-width: 768px) {
.device-card-wrapper {
flex: 1 1 100%;
}
}
.stats-card {
height: 100%;
@@ -592,71 +622,67 @@ export default {
.device-card {
height: 100%;
margin-bottom: 0;
border-radius: 12px;
background: var(--color-bg-2);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.06),
0 1px 2px rgba(0, 0, 0, 0.04);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
:deep(.arco-card-header) {
padding: 16px 16px 12px;
border-bottom: 1px solid var(--color-border-1);
}
:deep(.arco-card-body) {
padding: 14px;
padding: 14px 16px 16px;
}
&:hover {
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
0 2px 4px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}
}
.device-card-head {
.device-card-header {
display: flex;
align-items: flex-start;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.device-card-title {
font-size: 14px;
font-weight: 500;
font-size: 15px;
font-weight: 600;
color: var(--color-text-1);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.device-card-meta {
font-size: 12px;
margin-bottom: 6px;
}
.ml-8 {
margin-left: 8px;
.device-card-body {
display: flex;
flex-direction: column;
gap: 10px;
}
.device-card-result {
font-size: 12px;
line-height: 1.4;
word-break: break-all;
line-height: 1.5;
padding: 10px 12px;
background: var(--color-fill-1);
border-radius: 8px;
border-left: 3px solid var(--color-border-2);
}
.device-metrics {
min-height: 48px;
}
.metric-line {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 12px;
margin-bottom: 4px;
}
.metric-name {
color: var(--color-text-3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 55%;
}
.metric-val {
color: var(--color-text-1);
font-weight: 500;
flex-shrink: 0;
}
.table-card {
margin-top: 8px;