diff --git a/client/src/sections/wuyuanbiaoba/components/CameraView.jsx b/client/src/sections/wuyuanbiaoba/components/CameraView.jsx index e0c653f..dd30759 100644 --- a/client/src/sections/wuyuanbiaoba/components/CameraView.jsx +++ b/client/src/sections/wuyuanbiaoba/components/CameraView.jsx @@ -298,7 +298,7 @@ const CameraView = ({ anchorThreshold: selectedTemplate.anchorThresholdValue || 80, gaussianBlurThreshold: selectedTemplate.gaussianBlur || 3, binaryThreshold: selectedTemplate.binaryThreshold || 120, - hasAdvancedConfig: true, + hasAdvancedConfig: false, } : { // 默认参数 diff --git a/client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx b/client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx index b1a5b16..a352d58 100644 --- a/client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx +++ b/client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx @@ -37,22 +37,19 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => { return
数据格式错误
; } - // 固定的设备颜色映射,确保颜色一致性 - 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 }) => { > 全部隐藏 - {deviceIds.map((deviceId,index) => ( + {deviceIds.map((deviceId, index) => (