|
|
@ -37,22 +37,19 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => { |
|
|
|
return <div>数据格式错误</div>; |
|
|
|
} |
|
|
|
|
|
|
|
// 固定的设备颜色映射,确保颜色一致性 |
|
|
|
const getDeviceColor = (deviceDesc) => { |
|
|
|
const colorMap = { |
|
|
|
target1: "#52c41a", // 绿色 |
|
|
|
target2: "#faad14", // 橙色 |
|
|
|
target3: "#f5222d", // 红色 |
|
|
|
target4: "#722ed1", // 紫色 |
|
|
|
target5: "#fa8c16", // 橙红色 |
|
|
|
target6: "#13c2c2", // 青色 |
|
|
|
target7: "#eb2f96", // 粉色 |
|
|
|
target8: "#2f54eb", // 深蓝色 |
|
|
|
target9: "#fa541c", // 火橙色 |
|
|
|
target10: "#1890ff", // 蓝色 |
|
|
|
}; |
|
|
|
|
|
|
|
return colorMap[deviceDesc] || "#1890ff"; |
|
|
|
// 固定的设备颜色映射,确保颜色一致性 - 使用数组下标作为颜色选取依据 |
|
|
|
const getDeviceColor = (index) => { |
|
|
|
// 预定义5种颜色,足够应对最多5条线的需求 |
|
|
|
const colors = [ |
|
|
|
"#52c41a", // 绿色 |
|
|
|
"#faad14", // 橙色 |
|
|
|
"#f5222d", // 红色 |
|
|
|
"#722ed1", // 紫色 |
|
|
|
"#13c2c2", // 青色 |
|
|
|
]; |
|
|
|
|
|
|
|
// 直接使用传入的数组下标 |
|
|
|
return colors[index % colors.length]; |
|
|
|
}; |
|
|
|
|
|
|
|
// 数据采样函数 - 每秒采样一次,最多保留25个数据点 |
|
|
@ -204,7 +201,7 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => { |
|
|
|
return { labels: [], datasets: [] }; |
|
|
|
} |
|
|
|
|
|
|
|
const datasets = deviceIds.map((deviceId) => { |
|
|
|
const datasets = deviceIds.map((deviceId, index) => { |
|
|
|
const data = sortedTimes.map((timeKey) => { |
|
|
|
const timeData = timeGroups[timeKey] || []; |
|
|
|
const deviceData = timeData.find( |
|
|
@ -219,8 +216,8 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => { |
|
|
|
return { |
|
|
|
label: deviceId, |
|
|
|
data: data, |
|
|
|
borderColor: getDeviceColor(deviceDesc), |
|
|
|
backgroundColor: getDeviceColor(deviceDesc) + "20", |
|
|
|
borderColor: getDeviceColor(index), |
|
|
|
backgroundColor: getDeviceColor(index) + "20", |
|
|
|
borderWidth: 2, |
|
|
|
pointRadius: 3, |
|
|
|
pointHoverRadius: 5, |
|
|
@ -247,7 +244,7 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => { |
|
|
|
return { labels: [], datasets: [] }; |
|
|
|
} |
|
|
|
|
|
|
|
const datasets = deviceIds.map((deviceId) => { |
|
|
|
const datasets = deviceIds.map((deviceId, index) => { |
|
|
|
const data = sortedTimes.map((timeKey) => { |
|
|
|
const timeData = timeGroups[timeKey] || []; |
|
|
|
const deviceData = timeData.find( |
|
|
@ -262,8 +259,8 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => { |
|
|
|
return { |
|
|
|
label: deviceId, |
|
|
|
data: data, |
|
|
|
borderColor: getDeviceColor(deviceDesc), |
|
|
|
backgroundColor: getDeviceColor(deviceDesc) + "20", |
|
|
|
borderColor: getDeviceColor(index), |
|
|
|
backgroundColor: getDeviceColor(index) + "20", |
|
|
|
borderWidth: 2, |
|
|
|
pointRadius: 3, |
|
|
|
pointHoverRadius: 5, |
|
|
@ -476,15 +473,15 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => { |
|
|
|
> |
|
|
|
全部隐藏 |
|
|
|
</Button> |
|
|
|
{deviceIds.map((deviceId,index) => ( |
|
|
|
{deviceIds.map((deviceId, index) => ( |
|
|
|
<Button |
|
|
|
key={deviceId} |
|
|
|
size="small" |
|
|
|
type={visibleTargets[deviceId] ? "primary" : "default"} |
|
|
|
style={{ |
|
|
|
borderColor: getDeviceColor(deviceDescMap[deviceId] || deviceId), |
|
|
|
color: visibleTargets[deviceId] ? "#fff" : getDeviceColor(deviceDescMap[deviceId] || deviceId), |
|
|
|
backgroundColor: visibleTargets[deviceId] ? getDeviceColor(deviceDescMap[deviceId] || deviceId) : "#fff" |
|
|
|
borderColor: getDeviceColor(index), |
|
|
|
color: visibleTargets[deviceId] ? "#fff" : getDeviceColor(index), |
|
|
|
backgroundColor: visibleTargets[deviceId] ? getDeviceColor(index) : "#fff" |
|
|
|
}} |
|
|
|
onClick={() => toggleTargetVisibility(deviceId)} |
|
|
|
> |
|
|
|