Browse Source

update:高级配置在 TargetDetailModal 中默认收起

refactor:RealtimeCharts 设备颜色映射逻辑简化为基于下标选择
fix:CameraView 中 hasAdvancedConfig 统一设为 false,保证行为一致
songjian-260709
qinjian 1 year ago
parent
commit
4341649263
  1. 2
      client/src/sections/wuyuanbiaoba/components/CameraView.jsx
  2. 47
      client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx
  3. 3
      client/src/sections/wuyuanbiaoba/components/TargetDetailModal.jsx

2
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,
}
: {
// 默认参数

47
client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx

@ -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,
@ -482,9 +479,9 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
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)}
>

3
client/src/sections/wuyuanbiaoba/components/TargetDetailModal.jsx

@ -38,7 +38,8 @@ const TargetDetailModal = ({
anchorThreshold: targetData.anchorThreshold || 80,
gaussianBlurThreshold: targetData.gaussianBlurThreshold || 3,
});
setAdvancedConfig(targetData.hasAdvancedConfig || false);
// 默认高级配置不展开
setAdvancedConfig(false);
} else if (visible && mode === "add") {
// 新增模式时设置默认值
form.setFieldsValue({

Loading…
Cancel
Save