+
重启容器
编辑 RTSP
@@ -96,6 +94,36 @@
{{ service.summary.headline }}
+
+
+
排队等级
+
+
+ {{ queueLevelText(queueSummaryMetrics.queue_level) }}
+
+
+
+
+ 超 5 分钟人数
+
+ {{ queueSummaryMetrics.over_threshold_count ?? 0 }}
+
+
+
+ 低于 5 分钟人数
+
+ {{ queueSummaryMetrics.under_threshold_count ?? 0 }}
+
+
+
+ 状态变化
+
+ {{ queueChangeText(queueSummaryMetrics.status_change) }}
+
+
+
{{
- service.summary?.headline ||
- service.result_error ||
- "暂无摘要"
+ service.summary?.headline || service.result_error || "暂无摘要"
}}
+
+
排队概览
+
+
+ 排队等级
+
+ {{ queueLevelText(service.summary.metrics.queue_level) }}
+
+
+
+ 超 5 分钟
+
+ {{ service.summary.metrics.over_threshold_count ?? 0 }}
+
+
+
+ 低于 5 分钟
+
+ {{ service.summary.metrics.under_threshold_count ?? 0 }}
+
+
+
+ 状态变化
+
+ {{ queueChangeText(service.summary.metrics.status_change) }}
+
+
+
+
key in metrics,
+ );
+};
+
+const queueLevelText = (value) => {
+ const map = {
+ crowded: "人多",
+ normal: "正常",
+ few: "人少",
+ };
+ return map[value] || value || "-";
+};
+
+const queueLevelType = (value) => {
+ const map = {
+ crowded: "danger",
+ normal: "warning",
+ few: "success",
+ };
+ return map[value] || "info";
+};
+
+const queueChangeText = (value) => {
+ const map = {
+ initial: "初始窗口",
+ unchanged: "无变化",
+ queue_increased: "人数变多",
+ queue_decreased: "人数变少",
+ queue_normalized: "人数变正常",
+ };
+ return map[value] || value || "-";
+};
+
onMounted(loadServices);
@@ -297,6 +369,49 @@ onMounted(loadServices);
word-break: break-word;
}
+.queue-section {
+ padding: 12px;
+ border: 1px solid var(--el-border-color-lighter);
+ border-radius: 10px;
+ background: linear-gradient(180deg, #fcfcf7 0%, #f7f9f4 100%);
+}
+
+.queue-metrics-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 10px;
+}
+
+.queue-metric-item {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ padding: 10px 12px;
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.78);
+}
+
+.queue-metric-item--highlight {
+ border: 1px solid rgba(140, 120, 56, 0.16);
+}
+
+.queue-metric-label {
+ color: #909399;
+ font-size: 12px;
+}
+
+.queue-metric-value {
+ color: #303133;
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 1;
+}
+
+.queue-metric-value--text {
+ font-size: 14px;
+ line-height: 1.4;
+}
+
.service-errors {
display: flex;
gap: 8px;
@@ -309,4 +424,10 @@ onMounted(loadServices);
gap: 12px;
flex-wrap: wrap;
}
+
+@media (max-width: 640px) {
+ .queue-metrics-grid {
+ grid-template-columns: 1fr;
+ }
+}