|
|
@@ -114,23 +114,7 @@
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
- <div class="s8-monitor__status-bar">
|
|
|
- <div class="s8-monitor__status-group">
|
|
|
- <div class="s8-monitor__status-item">
|
|
|
- <span class="s8-monitor__status-dot s8-monitor__status-dot--green" />
|
|
|
- <span>正常运行中 ({{ globalStatus.greenText }})</span>
|
|
|
- </div>
|
|
|
- <div class="s8-monitor__status-item">
|
|
|
- <span class="s8-monitor__status-dot s8-monitor__status-dot--yellow" />
|
|
|
- <span>预警节点 ({{ globalStatus.yellowText }})</span>
|
|
|
- </div>
|
|
|
- <div class="s8-monitor__status-item">
|
|
|
- <span class="s8-monitor__status-dot s8-monitor__status-dot--red" />
|
|
|
- <span>紧急待处理 ({{ globalStatus.redText }})</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="s8-monitor__status-live">{{ globalStatus.liveText }}</div>
|
|
|
- </div>
|
|
|
+ <!-- S8-MONITORING-TOP-STATUS-STRIP-REMOVE-1：移除底部全局状态条（与模块卡内三色重复且口径不清晰）。 -->
|
|
|
</section>
|
|
|
</template>
|
|
|
</S8MonitoringResizableShell>
|
|
|
@@ -486,16 +470,6 @@ const categoryCards = computed<CategoryGridCardData[]>(() => {
|
|
|
|
|
|
const configuredCategoryCards = computed(() => categoryCards.value.map((c) => applyCategoryConfig(c)));
|
|
|
|
|
|
-const globalStatus = computed(() => {
|
|
|
- const total = Math.max(summary.total, 0);
|
|
|
- return {
|
|
|
- greenText: formatRatio(summary.green, total),
|
|
|
- yellowText: formatRatio(summary.yellow, total),
|
|
|
- redText: formatRatio(summary.red, total),
|
|
|
- liveText: total > 0 ? 'LIVE DATA STREAMING...' : 'WAITING DATA SOURCE...',
|
|
|
- };
|
|
|
-});
|
|
|
-
|
|
|
function buildStageCard(
|
|
|
meta: StageMeta,
|
|
|
module: S8ModuleOrderSummary | undefined,
|
|
|
@@ -627,11 +601,6 @@ function formatPercent(value: number, decimals = 0) {
|
|
|
return `${clampPercent(value).toFixed(decimals)}%`;
|
|
|
}
|
|
|
|
|
|
-function formatRatio(value: number, total: number) {
|
|
|
- if (total <= 0) return '0.0%';
|
|
|
- return `${((Math.max(value, 0) / total) * 100).toFixed(1)}%`;
|
|
|
-}
|
|
|
-
|
|
|
const loadState = shallowRef<'idle' | 'loading' | 'ok' | 'error'>('idle');
|
|
|
const loadError = shallowRef<string>('');
|
|
|
|
|
|
@@ -1104,65 +1073,6 @@ watch(deptCards, (depts) => {
|
|
|
border-color: rgba(123, 208, 255, 0.24);
|
|
|
}
|
|
|
|
|
|
-.s8-monitor__status-bar {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- gap: 16px;
|
|
|
- margin-top: 14px;
|
|
|
- padding: 12px 14px;
|
|
|
- border-radius: 16px;
|
|
|
- background: rgba(11, 14, 20, 0.4);
|
|
|
-}
|
|
|
-
|
|
|
-.s8-monitor__status-group {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 24px;
|
|
|
-}
|
|
|
-
|
|
|
-.s8-monitor__status-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
- font-size: 11px;
|
|
|
- color: var(--text-secondary);
|
|
|
-}
|
|
|
-
|
|
|
-.s8-monitor__status-dot {
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- border-radius: 50%;
|
|
|
-}
|
|
|
-
|
|
|
-.s8-monitor__status-dot--green {
|
|
|
- background: #6de039;
|
|
|
-}
|
|
|
-
|
|
|
-.s8-monitor__status-dot--yellow {
|
|
|
- background: #ffc107;
|
|
|
-}
|
|
|
-
|
|
|
-.s8-monitor__status-dot--red {
|
|
|
- background: #ffb4ab;
|
|
|
-}
|
|
|
-
|
|
|
-.s8-monitor__status-live {
|
|
|
- font-size: 11px;
|
|
|
- font-family: 'Roboto Mono', monospace;
|
|
|
- color: #7bd0ff;
|
|
|
- animation: pulse 1.8s ease-in-out infinite;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes pulse {
|
|
|
- 0%, 100% {
|
|
|
- opacity: 0.55;
|
|
|
- }
|
|
|
- 50% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
@media (max-width: 1080px) {
|
|
|
.s8-monitor {
|
|
|
padding: 14px;
|
|
|
@@ -1179,14 +1089,9 @@ watch(deptCards, (depts) => {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
|
|
|
- .s8-monitor__analysis-head,
|
|
|
- .s8-monitor__status-bar {
|
|
|
+ .s8-monitor__analysis-head {
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
-
|
|
|
- .s8-monitor__status-group {
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
}
|
|
|
</style>
|
YY968XX