From 4341649263830b25856ae1fcaa77a3b61b90940f Mon Sep 17 00:00:00 2001 From: qinjian Date: Thu, 21 Aug 2025 16:11:49 +0800 Subject: [PATCH] =?UTF-8?q?update=EF=BC=9A=E9=AB=98=E7=BA=A7=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E5=9C=A8=20TargetDetailModal=20=E4=B8=AD=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E6=94=B6=E8=B5=B7=20refactor=EF=BC=9ARealtimeCharts?= =?UTF-8?q?=20=E8=AE=BE=E5=A4=87=E9=A2=9C=E8=89=B2=E6=98=A0=E5=B0=84?= =?UTF-8?q?=E9=80=BB=E8=BE=91=E7=AE=80=E5=8C=96=E4=B8=BA=E5=9F=BA=E4=BA=8E?= =?UTF-8?q?=E4=B8=8B=E6=A0=87=E9=80=89=E6=8B=A9=20fix=EF=BC=9ACameraView?= =?UTF-8?q?=20=E4=B8=AD=20hasAdvancedConfig=20=E7=BB=9F=E4=B8=80=E8=AE=BE?= =?UTF-8?q?=E4=B8=BA=20false=EF=BC=8C=E4=BF=9D=E8=AF=81=E8=A1=8C=E4=B8=BA?= =?UTF-8?q?=E4=B8=80=E8=87=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wuyuanbiaoba/components/CameraView.jsx | 2 +- .../components/RealtimeCharts.jsx | 49 +++++++++---------- .../components/TargetDetailModal.jsx | 3 +- 3 files changed, 26 insertions(+), 28 deletions(-) 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) => (