<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<title>设备网络分析</title>
|
<link rel="stylesheet" href="../../static/vue/element/element.css" />
|
<style>
|
[v-cloak] {
|
display: none;
|
}
|
|
html,
|
body {
|
margin: 0;
|
min-height: 100%;
|
font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
|
background: linear-gradient(180deg, #f4f7fb 0%, #edf2f7 100%);
|
color: #243447;
|
}
|
|
* {
|
box-sizing: border-box;
|
}
|
|
.page-shell {
|
max-width: 1680px;
|
margin: 0 auto;
|
padding: 16px;
|
}
|
|
.page-head {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 12px;
|
margin-bottom: 14px;
|
flex-wrap: wrap;
|
}
|
|
.page-title {
|
font-size: 28px;
|
font-weight: 700;
|
color: #1f3142;
|
}
|
|
.page-meta {
|
font-size: 12px;
|
color: #7d8ea2;
|
}
|
|
.summary-grid {
|
display: grid;
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
gap: 12px;
|
margin-bottom: 16px;
|
}
|
|
.summary-card {
|
padding: 14px 16px;
|
border-radius: 18px;
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.92) 100%);
|
border: 1px solid rgba(216, 226, 235, 0.96);
|
box-shadow: 0 14px 28px rgba(39, 63, 92, 0.06);
|
min-height: 90px;
|
}
|
|
.summary-label {
|
font-size: 12px;
|
color: #7d8ea2;
|
}
|
|
.summary-value {
|
margin-top: 8px;
|
font-size: 28px;
|
line-height: 1.1;
|
font-weight: 700;
|
color: #22364a;
|
}
|
|
.summary-sub {
|
margin-top: 8px;
|
font-size: 12px;
|
color: #8a99ab;
|
}
|
|
.panel {
|
margin-top: 16px;
|
border-radius: 22px;
|
border: 1px solid rgba(216, 226, 235, 0.96);
|
background: rgba(255, 255, 255, 0.9);
|
box-shadow: 0 16px 32px rgba(39, 63, 92, 0.06);
|
overflow: hidden;
|
}
|
|
.panel-head {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 12px;
|
padding: 18px 18px 0;
|
flex-wrap: wrap;
|
}
|
|
.panel-title {
|
font-size: 18px;
|
font-weight: 700;
|
color: #22364a;
|
}
|
|
.panel-body {
|
padding: 16px 18px 18px;
|
}
|
|
.toolbar {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 12px;
|
flex-wrap: wrap;
|
margin-bottom: 12px;
|
}
|
|
.toolbar-right {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
flex-wrap: wrap;
|
}
|
|
.detail-shell {
|
display: flex;
|
flex-direction: column;
|
gap: 16px;
|
}
|
|
.detail-toolbar {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 12px;
|
flex-wrap: wrap;
|
}
|
|
.detail-selected {
|
font-size: 14px;
|
color: #50657b;
|
font-weight: 600;
|
}
|
|
.detail-summary-grid {
|
display: grid;
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
gap: 12px;
|
}
|
|
.detail-card {
|
padding: 14px 16px;
|
border-radius: 16px;
|
background: #f7fafc;
|
border: 1px solid #e1e9f2;
|
min-height: 84px;
|
}
|
|
.detail-card-label {
|
font-size: 12px;
|
color: #8091a4;
|
}
|
|
.detail-card-value {
|
margin-top: 8px;
|
font-size: 24px;
|
line-height: 1.1;
|
font-weight: 700;
|
color: #23364a;
|
}
|
|
.chart-grid {
|
display: grid;
|
grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
|
gap: 16px;
|
}
|
|
.chart-card {
|
padding: 16px;
|
border-radius: 18px;
|
border: 1px solid #e2eaf2;
|
background: #fbfdff;
|
}
|
|
.chart-title {
|
margin-bottom: 12px;
|
font-size: 16px;
|
font-weight: 700;
|
color: #243447;
|
}
|
|
.chart-box {
|
height: 340px;
|
width: 100%;
|
}
|
|
.empty-shell {
|
padding: 48px 16px;
|
text-align: center;
|
font-size: 14px;
|
color: #8a99ab;
|
border: 1px dashed #d8e2ec;
|
border-radius: 16px;
|
background: #fafcff;
|
}
|
|
.status-chip {
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
min-width: 74px;
|
height: 26px;
|
padding: 0 10px;
|
border-radius: 999px;
|
font-size: 12px;
|
font-weight: 700;
|
}
|
|
.status-chip.ok {
|
color: #177d5a;
|
background: rgba(30, 170, 112, 0.14);
|
}
|
|
.status-chip.unstable {
|
color: #b56d05;
|
background: rgba(245, 154, 74, 0.16);
|
}
|
|
.status-chip.offline {
|
color: #bb3d3d;
|
background: rgba(222, 92, 92, 0.14);
|
}
|
|
.status-chip.nodata {
|
color: #6f8194;
|
background: rgba(176, 190, 204, 0.2);
|
}
|
|
@media (max-width: 1360px) {
|
.summary-grid {
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
}
|
|
.detail-summary-grid {
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
}
|
|
.chart-grid {
|
grid-template-columns: 1fr;
|
}
|
}
|
|
@media (max-width: 768px) {
|
.page-shell {
|
padding: 12px;
|
}
|
|
.summary-grid,
|
.detail-summary-grid {
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
}
|
|
.page-title {
|
font-size: 24px;
|
}
|
}
|
</style>
|
</head>
|
<body>
|
<div id="app" v-cloak class="page-shell">
|
<div class="page-head">
|
<div class="page-title">设备网络分析</div>
|
<div class="page-meta">包大小 {{ formatPacketSize(samplingConfig.packetSize) }}，{{ samplingConfigText }}</div>
|
</div>
|
|
<section class="summary-grid">
|
<div class="summary-card">
|
<div class="summary-label">设备总数</div>
|
<div class="summary-value">{{ overviewSummary.totalDevices }}</div>
|
<div class="summary-sub">已配置 IP 的设备</div>
|
</div>
|
<div class="summary-card">
|
<div class="summary-label">正常</div>
|
<div class="summary-value">{{ overviewSummary.okDevices }}</div>
|
<div class="summary-sub">最近样本状态 OK</div>
|
</div>
|
<div class="summary-card">
|
<div class="summary-label">波动</div>
|
<div class="summary-value">{{ overviewSummary.unstableDevices }}</div>
|
<div class="summary-sub">部分探测成功</div>
|
</div>
|
<div class="summary-card">
|
<div class="summary-label">超时/异常</div>
|
<div class="summary-value">{{ overviewSummary.offlineDevices }}</div>
|
<div class="summary-sub">最近样本不可达</div>
|
</div>
|
<div class="summary-card">
|
<div class="summary-label">暂无数据</div>
|
<div class="summary-value">{{ overviewSummary.noDataDevices }}</div>
|
<div class="summary-sub">还没有落盘样本</div>
|
</div>
|
<div class="summary-card">
|
<div class="summary-label">整体平均延迟</div>
|
<div class="summary-value">{{ formatLatency(overviewSummary.avgLatencyMs) }}</div>
|
<div class="summary-sub">峰值 {{ formatLatency(overviewSummary.maxLatencyMs) }}</div>
|
</div>
|
</section>
|
|
<section class="panel">
|
<div class="panel-head">
|
<div class="panel-title">设备总览</div>
|
<el-button size="small" :loading="overviewLoading" @click="loadOverview">刷新</el-button>
|
</div>
|
<div class="panel-body">
|
<div class="toolbar">
|
<el-form :inline="true" size="small" :model="overviewFilters" style="margin-bottom: -18px;">
|
<el-form-item label="设备类型">
|
<el-select v-model="overviewFilters.deviceType" clearable style="width: 120px;">
|
<el-option label="全部" value=""></el-option>
|
<el-option label="Crn" value="Crn"></el-option>
|
<el-option label="DualCrn" value="DualCrn"></el-option>
|
<el-option label="Devp" value="Devp"></el-option>
|
<el-option label="Rgv" value="Rgv"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="关键字">
|
<el-input v-model.trim="overviewFilters.keyword" clearable style="width: 220px;" placeholder="设备号 / IP"></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="toolbar-right">
|
<span class="page-meta">总览设备 {{ filteredOverviewRows.length }} 台</span>
|
</div>
|
</div>
|
|
<el-table :data="filteredOverviewRows" border stripe size="mini" v-loading="overviewLoading" style="width: 100%;">
|
<el-table-column label="设备" min-width="170">
|
<template slot-scope="scope">
|
{{ scope.row.deviceType }}-{{ scope.row.deviceNo }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="ip" label="IP" min-width="150"></el-table-column>
|
<el-table-column label="状态" width="110" align="center">
|
<template slot-scope="scope">
|
<span class="status-chip" :class="statusClass(scope.row.status)">{{ scope.row.statusText }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="成功率" width="90" align="right">
|
<template slot-scope="scope">
|
{{ formatPercent(scope.row.successRate) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="平均" width="90" align="right">
|
<template slot-scope="scope">
|
{{ formatLatency(scope.row.avgLatencyMs) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="最小" width="90" align="right">
|
<template slot-scope="scope">
|
{{ formatLatency(scope.row.minLatencyMs) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="最大" width="90" align="right">
|
<template slot-scope="scope">
|
{{ formatLatency(scope.row.maxLatencyMs) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="latestTimeLabel" label="更新时间" width="170"></el-table-column>
|
<el-table-column prop="message" label="说明" min-width="200" show-overflow-tooltip></el-table-column>
|
<el-table-column label="操作" width="110" align="center" fixed="right">
|
<template slot-scope="scope">
|
<el-button size="mini" type="primary" plain @click="openDetail(scope.row)">查看详情</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</section>
|
|
<section class="panel">
|
<div class="panel-head">
|
<div class="panel-title">设备详情</div>
|
</div>
|
<div class="panel-body">
|
<div v-if="!currentDevice" class="empty-shell">从上方设备总览选择一台设备查看秒级明细</div>
|
<div v-else class="detail-shell">
|
<div class="detail-toolbar">
|
<div class="detail-selected">{{ currentDevice.label }}</div>
|
<div class="toolbar-right">
|
<el-form :inline="true" size="small" :model="detailFilters" style="margin-bottom: -18px;">
|
<el-form-item label="时间范围">
|
<el-date-picker
|
v-model="detailFilters.range"
|
type="datetimerange"
|
unlink-panels
|
range-separator="至"
|
start-placeholder="开始"
|
end-placeholder="结束"
|
style="width: 360px;">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="setQuickRange(30)">30 分钟</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="setQuickRange(60)">1 小时</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="setQuickRange(360)">6 小时</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" :loading="detailLoading" @click="queryTrend">查询</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
|
<div class="detail-summary-grid">
|
<div class="detail-card">
|
<div class="detail-card-label">状态</div>
|
<div class="detail-card-value">{{ detailSummary.latestStatus || '--' }}</div>
|
</div>
|
<div class="detail-card">
|
<div class="detail-card-label">包大小</div>
|
<div class="detail-card-value">{{ formatPacketSize(detailSummary.packetSize) }}</div>
|
</div>
|
<div class="detail-card">
|
<div class="detail-card-label">成功率</div>
|
<div class="detail-card-value">{{ formatPercent(detailSummary.successRate) }}</div>
|
</div>
|
<div class="detail-card">
|
<div class="detail-card-label">平均</div>
|
<div class="detail-card-value">{{ formatLatency(detailSummary.avgLatencyMs) }}</div>
|
</div>
|
<div class="detail-card">
|
<div class="detail-card-label">最小</div>
|
<div class="detail-card-value">{{ formatLatency(detailSummary.minLatencyMs) }}</div>
|
</div>
|
<div class="detail-card">
|
<div class="detail-card-label">最大</div>
|
<div class="detail-card-value">{{ formatLatency(detailSummary.maxLatencyMs) }}</div>
|
</div>
|
</div>
|
|
<div class="chart-grid">
|
<div class="chart-card">
|
<div class="chart-title">延迟</div>
|
<div v-if="!series.length && !detailLoading" class="empty-shell">当前范围暂无秒级样本</div>
|
<div v-show="series.length || detailLoading" ref="latencyChart" class="chart-box"></div>
|
</div>
|
<div class="chart-card">
|
<div class="chart-title">成功率 / 失败次数</div>
|
<div v-if="!series.length && !detailLoading" class="empty-shell">当前范围暂无秒级样本</div>
|
<div v-show="series.length || detailLoading" ref="availabilityChart" class="chart-box"></div>
|
</div>
|
</div>
|
|
<el-table :data="alerts" border stripe size="mini" style="width: 100%;">
|
<el-table-column prop="timeLabel" label="时间" width="180"></el-table-column>
|
<el-table-column prop="status" label="状态" width="110"></el-table-column>
|
<el-table-column prop="ip" label="IP" width="150"></el-table-column>
|
<el-table-column prop="message" label="说明" min-width="240" show-overflow-tooltip></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</section>
|
</div>
|
|
<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/vue/js/vue.min.js"></script>
|
<script type="text/javascript" src="../../static/vue/element/element.js"></script>
|
<script type="text/javascript" src="../../static/js/echarts/echarts.min.js"></script>
|
<script type="text/javascript" src="../../static/js/devicePingLog/devicePingLog.js?v=20260316_device_ping_packet_size_detail" charset="utf-8"></script>
|
</body>
|
</html>
|
