|
|
@ -117,6 +117,45 @@ function MeasurementPointSetting() { |
|
|
})) |
|
|
})) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 处理单元格值变化 |
|
|
|
|
|
const handleCellValueChange = (key, value) => { |
|
|
|
|
|
// 更新传感器列表 |
|
|
|
|
|
setSensorList((prev) => { |
|
|
|
|
|
const updateNode = (nodes) => { |
|
|
|
|
|
return nodes.map((node) => { |
|
|
|
|
|
if (node.key === key) { |
|
|
|
|
|
return { ...node, value } |
|
|
|
|
|
} |
|
|
|
|
|
if (node.children) { |
|
|
|
|
|
return { ...node, children: updateNode(node.children) } |
|
|
|
|
|
} |
|
|
|
|
|
return node |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
return updateNode(prev) |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
// 如果修改的是坐标值(x, y, w, h),同步更新矩形数据 |
|
|
|
|
|
// key格式: sensorKey-4-[1-4],例如 1-4-1 表示第1个传感器的x坐标 |
|
|
|
|
|
const coordinateMatch = key.match(/^(\d+)-4-([1-4])$/) |
|
|
|
|
|
if (coordinateMatch && selectedSensorKey) { |
|
|
|
|
|
const [, sensorKey, coordIndex] = coordinateMatch |
|
|
|
|
|
|
|
|
|
|
|
// 只更新当前选中的传感器的坐标 |
|
|
|
|
|
if (sensorKey === selectedSensorKey) { |
|
|
|
|
|
const coordMap = { '1': 'x', '2': 'y', '3': 'width', '4': 'height' } |
|
|
|
|
|
const coordName = coordMap[coordIndex] |
|
|
|
|
|
|
|
|
|
|
|
if (coordName && rectangleData) { |
|
|
|
|
|
setRectangleData({ |
|
|
|
|
|
...rectangleData, |
|
|
|
|
|
[coordName]: Number(value) || 0 |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
// 添加传感器数据收集函数 |
|
|
// 添加传感器数据收集函数 |
|
|
const handleAddSensor = () => { |
|
|
const handleAddSensor = () => { |
|
|
// 检查是否有矩形绘制数据 |
|
|
// 检查是否有矩形绘制数据 |
|
|
@ -160,9 +199,15 @@ function MeasurementPointSetting() { |
|
|
})) |
|
|
})) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 测点列表数据(使用状态) |
|
|
// 测点列表数据 |
|
|
const dataSource = sensorList |
|
|
const dataSource = sensorList |
|
|
|
|
|
|
|
|
|
|
|
const onInputFocus = (record) => { |
|
|
|
|
|
const key = record.key.split('-')[0] |
|
|
|
|
|
updateRectangleFromSensor(key) |
|
|
|
|
|
//表格选中的行也要变化 |
|
|
|
|
|
handleSensorSelect(key) |
|
|
|
|
|
} |
|
|
// 表格列配置 |
|
|
// 表格列配置 |
|
|
const columns = [ |
|
|
const columns = [ |
|
|
{ |
|
|
{ |
|
|
@ -198,6 +243,53 @@ function MeasurementPointSetting() { |
|
|
const level = record.key.split('-').length - 1 |
|
|
const level = record.key.split('-').length - 1 |
|
|
const fontSize = level === 0 ? '14px' : level === 1 ? '12px' : '11px' |
|
|
const fontSize = level === 0 ? '14px' : level === 1 ? '12px' : '11px' |
|
|
|
|
|
|
|
|
|
|
|
// 判断是否可编辑:测点描述(key精确为*-2) 或 坐标值(key为*-4-[1-4]) |
|
|
|
|
|
// 注意:坐标值的判断必须更精确,避免与测点描述的 -2 冲突 |
|
|
|
|
|
const isCoordinateField = /^\d+-4-[1-4]$/.test(record.key) // x, y, w, h (例如: 1-4-1, 1-4-2) |
|
|
|
|
|
const isDescriptionField = /^\d+-2$/.test(record.key) // 测点描述 (例如: 1-2, 2-2) |
|
|
|
|
|
const canEdit = isDescriptionField || isCoordinateField |
|
|
|
|
|
|
|
|
|
|
|
if (!canEdit || !connectedDevice) { |
|
|
|
|
|
// 不可编辑或未连接设备,显示普通文本 |
|
|
|
|
|
return ( |
|
|
|
|
|
<span |
|
|
|
|
|
style={{ |
|
|
|
|
|
fontSize, |
|
|
|
|
|
color: level === 0 ? '#333' : level === 1 ? '#666' : '#999' |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
{value !== null && value !== undefined ? value : ''} |
|
|
|
|
|
</span> |
|
|
|
|
|
) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 可编辑字段 - 注意顺序:先判断坐标字段(更具体),再判断描述字段 |
|
|
|
|
|
if (isCoordinateField) { |
|
|
|
|
|
// 坐标值使用InputNumber |
|
|
|
|
|
return ( |
|
|
|
|
|
<InputNumber |
|
|
|
|
|
size="small" |
|
|
|
|
|
value={value ?? 0} |
|
|
|
|
|
onChange={(val) => handleCellValueChange(record.key, val ?? 0)} |
|
|
|
|
|
style={{ width: '100%', fontSize }} |
|
|
|
|
|
precision={0} |
|
|
|
|
|
onFocus={() => onInputFocus(record)} |
|
|
|
|
|
step={1} |
|
|
|
|
|
/> |
|
|
|
|
|
) |
|
|
|
|
|
} else if (isDescriptionField) { |
|
|
|
|
|
// 测点描述使用Input |
|
|
|
|
|
return ( |
|
|
|
|
|
<Input |
|
|
|
|
|
size="small" |
|
|
|
|
|
onFocus={() =>onInputFocus(record)} |
|
|
|
|
|
value={value} |
|
|
|
|
|
onChange={(e) => handleCellValueChange(record.key, e.target.value)} |
|
|
|
|
|
style={{ fontSize }} |
|
|
|
|
|
/> |
|
|
|
|
|
) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<span |
|
|
<span |
|
|
style={{ |
|
|
style={{ |
|
|
@ -483,6 +575,7 @@ function MeasurementPointSetting() { |
|
|
className={styles.numberInput} |
|
|
className={styles.numberInput} |
|
|
value={rectangleData?.x || 0} |
|
|
value={rectangleData?.x || 0} |
|
|
style={{ flex: 1 }} |
|
|
style={{ flex: 1 }} |
|
|
|
|
|
onChange={(value) => setRectangleData({ ...rectangleData, x: value })} |
|
|
disabled={!connectedDevice} |
|
|
disabled={!connectedDevice} |
|
|
/> |
|
|
/> |
|
|
</Flex> |
|
|
</Flex> |
|
|
@ -492,6 +585,7 @@ function MeasurementPointSetting() { |
|
|
className={styles.numberInput} |
|
|
className={styles.numberInput} |
|
|
value={rectangleData?.width || 0} |
|
|
value={rectangleData?.width || 0} |
|
|
style={{ flex: 1 }} |
|
|
style={{ flex: 1 }} |
|
|
|
|
|
onChange={(value) => setRectangleData({ ...rectangleData, width: value })} |
|
|
disabled={!connectedDevice} |
|
|
disabled={!connectedDevice} |
|
|
/> |
|
|
/> |
|
|
</Flex> |
|
|
</Flex> |
|
|
@ -504,6 +598,7 @@ function MeasurementPointSetting() { |
|
|
className={styles.numberInput} |
|
|
className={styles.numberInput} |
|
|
value={rectangleData?.y || 0} |
|
|
value={rectangleData?.y || 0} |
|
|
style={{ flex: 1 }} |
|
|
style={{ flex: 1 }} |
|
|
|
|
|
onChange={(value) => setRectangleData({ ...rectangleData, y: value })} |
|
|
disabled={!connectedDevice} |
|
|
disabled={!connectedDevice} |
|
|
/> |
|
|
/> |
|
|
</Flex> |
|
|
</Flex> |
|
|
@ -513,6 +608,7 @@ function MeasurementPointSetting() { |
|
|
className={styles.numberInput} |
|
|
className={styles.numberInput} |
|
|
value={rectangleData?.height || 0} |
|
|
value={rectangleData?.height || 0} |
|
|
style={{ flex: 1 }} |
|
|
style={{ flex: 1 }} |
|
|
|
|
|
onChange={(value) => setRectangleData({ ...rectangleData, height: value })} |
|
|
disabled={!connectedDevice} |
|
|
disabled={!connectedDevice} |
|
|
/> |
|
|
/> |
|
|
</Flex> |
|
|
</Flex> |
|
|
|