|
|
@@ -1,24 +1,8 @@
|
|
|
-/**
|
|
|
- * 图表配色注册表(控制模式 + 设备故障 + 通用基础色)
|
|
|
- *
|
|
|
- * 设计原则:
|
|
|
- * - 暗色大屏背景, 全部色相亮度 50-65% (饱和、不刺眼)
|
|
|
- * - 同业务族用同色系: 算法类蓝色, 协调网络绿色, 人工/中央紫色, 预警黄/橙, 紧急红, 关闭/异常灰
|
|
|
- * - 后端只返 { name, value }, 前端按 name 查表注入 color
|
|
|
- * - 未注册的 name 走 FALLBACK_PALETTE 按 hash 兜底
|
|
|
- *
|
|
|
- * 用法:
|
|
|
- * import {
|
|
|
- * applyControlModeColors, // 给控制模式列表注入色
|
|
|
- * applyDeviceFaultColors, // 给设备故障列表注入色
|
|
|
- * resolveControlModeColor,
|
|
|
- * resolveDeviceFaultColor,
|
|
|
- * } from '@/config/chartColors'
|
|
|
- */
|
|
|
-
|
|
|
-// ============================================================================
|
|
|
-// 1. 通用基础色
|
|
|
-// ============================================================================
|
|
|
+// 图表配色注册表(控制模式 + 设备故障 + 通用基础色)。
|
|
|
+// 暗色大屏背景下亮度统一 50-65%;同业务族同色系(算法蓝/协调绿/人工紫/预警黄橙/紧急红/异常灰)。
|
|
|
+// 后端只返 { name, value },前端按 name 查表注入 color;未注册的走 FALLBACK_PALETTE 按 hash 兜底。
|
|
|
+
|
|
|
+// 通用基础色
|
|
|
export const COLORS = {
|
|
|
normal: '#5EC8FF', // 正常 (亮蓝)
|
|
|
warn: '#faad14', // 警告 (琥珀黄)
|
|
|
@@ -27,11 +11,7 @@ export const COLORS = {
|
|
|
muted: '#6b7280', // 静默 (中灰)
|
|
|
}
|
|
|
|
|
|
-// ============================================================================
|
|
|
-// 2. 红色严重等级梯度 (按严重程度从轻到重)
|
|
|
-// 暗色背景下 4 档亮度梯度: 82% → 71% → 56% → 32%
|
|
|
-// 相邻差 ≥ 11%, 远大于"全 0° 色相 + 7-8% 亮度差"的肉眼极限
|
|
|
-// ============================================================================
|
|
|
+// 红色严重等级梯度(从轻到重):4 档亮度 82%/71%/56%/32%,相邻差 ≥11% 保证可分辨
|
|
|
export const RED_GRADIENT = {
|
|
|
L1_LIGHT: '#FFA5A5', // L=82% 樱粉 — 最轻级
|
|
|
L2_MEDIUM: '#FF6B6B', // L=71% 桃红
|
|
|
@@ -39,9 +19,7 @@ export const RED_GRADIENT = {
|
|
|
L4_DEEP: '#8B1A1A', // L=32% 砖红 — 最严重
|
|
|
}
|
|
|
|
|
|
-// ============================================================================
|
|
|
-// 3. 设备故障 → 颜色 (按 name 查表)
|
|
|
-// ============================================================================
|
|
|
+// 设备故障 → 颜色(按 name 查表)
|
|
|
export const DEVICE_FAULT_COLORS = {
|
|
|
// 通用
|
|
|
'正常': COLORS.normal,
|
|
|
@@ -61,10 +39,7 @@ export const DEVICE_FAULT_COLORS = {
|
|
|
'红灯故障': RED_GRADIENT.L4_DEEP,
|
|
|
}
|
|
|
|
|
|
-// ============================================================================
|
|
|
-// 4. 控制模式 16 种 → 颜色 (按 name 查表)
|
|
|
-// 16 种业务模式, 排序按业务族, 不影响 API 返回顺序
|
|
|
-// ============================================================================
|
|
|
+// 控制模式 16 种 → 颜色(按 name 查表):按业务族排序,不影响 API 返回顺序
|
|
|
export const CONTROL_MODE_COLORS = {
|
|
|
// ── 算法类 (冷色蓝) ───────────────────────────────
|
|
|
'定周期控制': '#33a3ff',
|
|
|
@@ -110,9 +85,7 @@ function hashCode(s) {
|
|
|
return Math.abs(h)
|
|
|
}
|
|
|
|
|
|
-// ============================================================================
|
|
|
-// 5. 解析单条 name → 颜色
|
|
|
-// ============================================================================
|
|
|
+// 解析单条 name → 颜色
|
|
|
|
|
|
/** 按 name 查控制模式色, 未注册走 hash 兜底 */
|
|
|
export function resolveControlModeColor(name) {
|
|
|
@@ -131,9 +104,7 @@ export function resolveDeviceFaultColor(name) {
|
|
|
return grad[hashCode(name) % grad.length]
|
|
|
}
|
|
|
|
|
|
-// ============================================================================
|
|
|
-// 6. 批量注入色 (给整个 chartData 列表)
|
|
|
-// ============================================================================
|
|
|
+// 批量注入色(给整个 chartData 列表)
|
|
|
|
|
|
/** 控制模式列表注入色 */
|
|
|
export function applyControlModeColors(list) {
|