feat(testing): 增加质检报告独立编辑与详情页面，不再使用弹窗
这个提交包含在：
wikiboss
@@ -0,0 +1,44 @@
|
||||
.quality-badge.status-unknown {
|
||||
background: rgba(148, 163, 184, .16);
|
||||
color: #cbd5e1;
|
||||
border: 1px solid rgba(148, 163, 184, .4);
|
||||
}
|
||||
.val-unknown { color: #94a3b8; text-shadow: none; }
|
||||
.quality-strip-card.strip-unknown, .quality-card.card-unknown {
|
||||
border-color: rgba(148, 163, 184, .35);
|
||||
box-shadow: none;
|
||||
}
|
||||
.gauge-unknown { background: #64748b; box-shadow: none; }
|
||||
|
||||
.quality-empty-state {
|
||||
min-height: 240px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 14px;
|
||||
padding: 24px 18px;
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.quality-empty-state h3 { margin: 0; color: #cbd5e1; font-size: 14px; font-weight: 500; }
|
||||
.quality-empty-state p { margin: 0; max-width: 280px; font-size: 12px; line-height: 1.9; }
|
||||
.alert-item-pill.unknown { color: #cbd5e1; border-color: rgba(148, 163, 184, .4); background: rgba(148, 163, 184, .1); }
|
||||
.alert-item-pill.unknown .pill-dot { background: #94a3b8; box-shadow: none; }
|
||||
|
||||
/* 状态颜色统一：数据状态与品种/系列配色分别表达。 */
|
||||
.quality-badge.status-normal, .quality-card-value.val-normal,
|
||||
.strip-main-val.val-normal, .alert-item-pill.normal { color: var(--status-normal); }
|
||||
.quality-badge.status-warn, .quality-card-value.val-warn,
|
||||
.strip-main-val.val-warn, .alert-item-pill.warn, .strip-warn .strip-limit-desc { color: var(--status-warn); }
|
||||
.quality-badge.status-danger, .quality-card-value.val-danger,
|
||||
.strip-main-val.val-danger, .alert-item-pill.danger, .strip-danger .strip-limit-desc { color: var(--status-danger); }
|
||||
.quality-badge.status-unknown, .quality-card-value.val-unknown,
|
||||
.strip-main-val.val-unknown, .alert-item-pill.unknown { color: var(--status-unknown); }
|
||||
.strip-gauge-fill.gauge-normal { background: var(--status-normal); }
|
||||
.strip-gauge-fill.gauge-warn { background: var(--status-warn); }
|
||||
.strip-gauge-fill.gauge-danger { background: var(--status-danger); }
|
||||
.strip-gauge-fill.gauge-unknown { background: var(--status-unknown); }
|
||||
.alert-item-pill .pill-dot { background: currentColor; }
|
||||
@@ -26,6 +26,7 @@
|
||||
--grain-oil: #f59e0b; /* 菜籽油脂琥珀金 */
|
||||
--status-normal: #10b981; /* 运行正常/达标 */
|
||||
--status-warn: #f59e0b; /* 关注/轻度预警 */
|
||||
--status-unknown: #94a3b8; /* 缺失/待核实 */
|
||||
--status-danger: #ef4444; /* 报警/异常 */
|
||||
|
||||
/* 文本阶梯色彩 Tokens */
|
||||
@@ -373,7 +374,7 @@ html, body {
|
||||
.alert-item-pill.danger {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
border: 1px solid rgba(239, 68, 68, 0.45);
|
||||
color: #fca5a5;
|
||||
color: var(--status-danger);
|
||||
}
|
||||
|
||||
.alert-item-pill.danger:hover {
|
||||
@@ -384,7 +385,7 @@ html, body {
|
||||
.alert-item-pill.warn {
|
||||
background: rgba(245, 158, 11, 0.2);
|
||||
border: 1px solid rgba(245, 158, 11, 0.45);
|
||||
color: #fde68a;
|
||||
color: var(--status-warn);
|
||||
}
|
||||
|
||||
.alert-item-pill.warn:hover {
|
||||
@@ -395,7 +396,7 @@ html, body {
|
||||
.alert-item-pill.normal {
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
border: 1px solid rgba(16, 185, 129, 0.35);
|
||||
color: #6ee7b7;
|
||||
color: var(--status-normal);
|
||||
}
|
||||
|
||||
/* ================= 顶部 KPI 栏 (高精密态势数据舱) ================= */
|
||||
@@ -737,19 +738,19 @@ html, body {
|
||||
|
||||
.quality-badge.status-normal {
|
||||
background: rgba(16, 185, 129, 0.18);
|
||||
color: #34d399;
|
||||
color: var(--status-normal);
|
||||
border: 1px solid rgba(16, 185, 129, 0.35);
|
||||
}
|
||||
|
||||
.quality-badge.status-warn {
|
||||
background: rgba(245, 158, 11, 0.2);
|
||||
color: #fbbf24;
|
||||
color: var(--status-warn);
|
||||
border: 1px solid rgba(245, 158, 11, 0.45);
|
||||
}
|
||||
|
||||
.quality-badge.status-danger {
|
||||
background: rgba(239, 68, 68, 0.25);
|
||||
color: #f87171;
|
||||
color: var(--status-danger);
|
||||
border: 1px solid rgba(239, 68, 68, 0.6);
|
||||
font-weight: 700;
|
||||
animation: badge-blink 1.8s infinite ease-in-out;
|
||||
@@ -779,15 +780,15 @@ html, body {
|
||||
}
|
||||
|
||||
.quality-card-value.val-normal {
|
||||
color: #34d399;
|
||||
color: var(--status-normal);
|
||||
}
|
||||
|
||||
.quality-card-value.val-warn {
|
||||
color: #fbbf24;
|
||||
color: var(--status-warn);
|
||||
}
|
||||
|
||||
.quality-card-value.val-danger {
|
||||
color: #f87171;
|
||||
color: var(--status-danger);
|
||||
text-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
|
||||
}
|
||||
|
||||
@@ -919,7 +920,7 @@ html, body {
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 18px rgba(239, 68, 68, 0.7), inset 0 0 16px rgba(239, 68, 68, 0.25);
|
||||
border-color: #f87171;
|
||||
border-color: var(--status-danger);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -970,17 +971,17 @@ html, body {
|
||||
}
|
||||
|
||||
.strip-main-val.val-normal {
|
||||
color: #34d399;
|
||||
color: var(--status-normal);
|
||||
text-shadow: 0 0 6px rgba(52, 211, 153, 0.3);
|
||||
}
|
||||
|
||||
.strip-main-val.val-warn {
|
||||
color: #fbbf24;
|
||||
color: var(--status-warn);
|
||||
text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
|
||||
}
|
||||
|
||||
.strip-main-val.val-danger {
|
||||
color: #f87171;
|
||||
color: var(--status-danger);
|
||||
text-shadow: 0 0 10px rgba(248, 113, 113, 0.6);
|
||||
}
|
||||
|
||||
@@ -1013,15 +1014,15 @@ html, body {
|
||||
}
|
||||
|
||||
.strip-gauge-fill.gauge-normal {
|
||||
background: linear-gradient(90deg, #10b981, #34d399);
|
||||
background: linear-gradient(90deg, #10b981, var(--status-normal));
|
||||
}
|
||||
|
||||
.strip-gauge-fill.gauge-warn {
|
||||
background: linear-gradient(90deg, #f59e0b, #fbbf24);
|
||||
background: linear-gradient(90deg, #f59e0b, var(--status-warn));
|
||||
}
|
||||
|
||||
.strip-gauge-fill.gauge-danger {
|
||||
background: linear-gradient(90deg, #ef4444, #f87171);
|
||||
background: linear-gradient(90deg, #ef4444, var(--status-danger));
|
||||
}
|
||||
|
||||
/* 底部：限值说明文字 (保证完整露出，杜绝遮挡) */
|
||||
@@ -1045,12 +1046,12 @@ html, body {
|
||||
}
|
||||
|
||||
.strip-danger .strip-limit-desc {
|
||||
color: #fca5a5;
|
||||
color: var(--status-danger);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.strip-warn .strip-limit-desc {
|
||||
color: #fde68a;
|
||||
color: var(--status-warn);
|
||||
}
|
||||
|
||||
/* ================== 食品卫生安全绿盾微矩阵 (4 列 x 2 行) ================== */
|
||||
@@ -1078,7 +1079,7 @@ html, body {
|
||||
.svg-shield-icon {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
color: #34d399;
|
||||
color: var(--status-normal);
|
||||
flex-shrink: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
@@ -1088,7 +1089,7 @@ html, body {
|
||||
align-items: center;
|
||||
font-size: 10.5px;
|
||||
font-weight: 600;
|
||||
color: #34d399;
|
||||
color: var(--status-normal);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -1098,7 +1099,7 @@ html, body {
|
||||
.shield-badge {
|
||||
font-size: 9px;
|
||||
background: rgba(16, 185, 129, 0.2);
|
||||
color: #34d399;
|
||||
color: var(--status-normal);
|
||||
border: 1px solid rgba(16, 185, 129, 0.4);
|
||||
border-radius: 3px;
|
||||
padding: 0 4px;
|
||||
@@ -1152,7 +1153,7 @@ html, body {
|
||||
.shield-item-val {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #34d399;
|
||||
color: var(--status-normal);
|
||||
font-family: var(--font-number);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -1164,12 +1165,12 @@ html, body {
|
||||
}
|
||||
|
||||
.shield-alert .shield-item-val {
|
||||
color: #f87171;
|
||||
color: var(--status-danger);
|
||||
}
|
||||
|
||||
.shield-item-status {
|
||||
font-size: 8px;
|
||||
color: #34d399;
|
||||
color: var(--status-normal);
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
margin-top: 1px;
|
||||
@@ -1178,7 +1179,7 @@ html, body {
|
||||
}
|
||||
|
||||
.shield-alert .shield-item-status {
|
||||
color: #f87171;
|
||||
color: var(--status-danger);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
@@ -1258,7 +1259,7 @@ html, body {
|
||||
.center-chart-close-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
border-color: rgba(239, 68, 68, 0.5);
|
||||
color: #f87171;
|
||||
color: var(--status-danger);
|
||||
}
|
||||
|
||||
/* 方案 A：大盘模式切换胶囊 */
|
||||
@@ -1561,7 +1562,7 @@ html, body {
|
||||
|
||||
#btn-chart-forecast:hover {
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.45) 0%, rgba(6, 182, 212, 0.42) 100%) !important;
|
||||
border-color: #34d399 !important;
|
||||
border-color: var(--status-normal) !important;
|
||||
box-shadow: 0 0 16px rgba(52, 211, 153, 0.55);
|
||||
}
|
||||
|
||||
@@ -1812,7 +1813,7 @@ html, body {
|
||||
font-size: 8.5px;
|
||||
padding: 1px 2.5px;
|
||||
background: rgba(245, 158, 11, 0.25);
|
||||
color: #fbbf24;
|
||||
color: var(--status-warn);
|
||||
}
|
||||
|
||||
.hotspot-pin.oil .bubble-arrow {
|
||||
@@ -1840,19 +1841,19 @@ html, body {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #fbbf24;
|
||||
box-shadow: 0 0 6px #fbbf24, 0 0 10px rgba(245, 158, 11, 0.8);
|
||||
background: var(--status-warn);
|
||||
box-shadow: 0 0 6px var(--status-warn), 0 0 10px rgba(245, 158, 11, 0.8);
|
||||
}
|
||||
|
||||
.hotspot-pin.active .bubble-stem {
|
||||
width: 2px;
|
||||
background: linear-gradient(180deg, #fbbf24 0%, #ffffff 100%);
|
||||
box-shadow: 0 0 10px #fbbf24;
|
||||
background: linear-gradient(180deg, var(--status-warn) 0%, #ffffff 100%);
|
||||
box-shadow: 0 0 10px var(--status-warn);
|
||||
}
|
||||
|
||||
.hotspot-pin.active .stem-dot {
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 10px #ffffff, 0 0 16px #fbbf24;
|
||||
box-shadow: 0 0 10px #ffffff, 0 0 16px var(--status-warn);
|
||||
}
|
||||
|
||||
/* 激活状态高光与聚焦光晕 */
|
||||
@@ -1877,13 +1878,13 @@ html, body {
|
||||
}
|
||||
|
||||
.hotspot-pin.oil.active .bubble-inner {
|
||||
background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
|
||||
background: linear-gradient(135deg, #d97706 0%, var(--status-warn) 100%);
|
||||
border-color: #ffffff;
|
||||
box-shadow: 0 0 20px rgba(245, 158, 11, 0.95), 0 4px 16px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.hotspot-pin.oil.active .bubble-arrow {
|
||||
border-top-color: #fbbf24;
|
||||
border-top-color: var(--status-warn);
|
||||
}
|
||||
|
||||
.hotspot-pin.paddy.active .bubble-inner {
|
||||
@@ -2157,7 +2158,8 @@ html, body {
|
||||
.forecast-charts-row .center-chart-card-title { color: #e3edf7; font-size: 13px; margin-bottom: 0; letter-spacing: .2px; }
|
||||
.forecast-charts-row .center-chart-card:last-child { padding-left: 18px; border-left-color: rgba(148, 173, 200, .13); }
|
||||
.forecast-chart-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; color: #8ba4bd; font-size: 10px; line-height: 1.7; padding: 0 0 12px; }
|
||||
.threshold-key { color: #dfb883; }
|
||||
.threshold-key { color: var(--status-danger); }
|
||||
.warning-key { color: var(--status-warn); }
|
||||
.forecast-env-pill { color: #9eb5cb; border-color: #314459; background: #132438; font-size: 9px; }
|
||||
.forecast-env-bar { border-color: #2a4058; box-shadow: none; padding: 8px 10px; flex-wrap: wrap; }
|
||||
.forecast-env-items { flex-wrap: wrap; gap: 7px; }
|
||||
|
||||
在新工单中引用
屏蔽一个用户