diff --git a/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.jsx b/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.jsx index 89c069b..f07ffb0 100644 --- a/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.jsx +++ b/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.jsx @@ -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 = () => { // 检查是否有矩形绘制数据 @@ -160,9 +199,15 @@ function MeasurementPointSetting() { })) } - // 测点列表数据(使用状态) + // 测点列表数据 const dataSource = sensorList + const onInputFocus = (record) => { + const key = record.key.split('-')[0] + updateRectangleFromSensor(key) + //表格选中的行也要变化 + handleSensorSelect(key) + } // 表格列配置 const columns = [ { @@ -198,6 +243,53 @@ function MeasurementPointSetting() { const level = record.key.split('-').length - 1 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 ( + + {value !== null && value !== undefined ? value : ''} + + ) + } + + // 可编辑字段 - 注意顺序:先判断坐标字段(更具体),再判断描述字段 + if (isCoordinateField) { + // 坐标值使用InputNumber + return ( + handleCellValueChange(record.key, val ?? 0)} + style={{ width: '100%', fontSize }} + precision={0} + onFocus={() => onInputFocus(record)} + step={1} + /> + ) + } else if (isDescriptionField) { + // 测点描述使用Input + return ( + onInputFocus(record)} + value={value} + onChange={(e) => handleCellValueChange(record.key, e.target.value)} + style={{ fontSize }} + /> + ) + } + return ( setRectangleData({ ...rectangleData, x: value })} disabled={!connectedDevice} /> @@ -492,6 +585,7 @@ function MeasurementPointSetting() { className={styles.numberInput} value={rectangleData?.width || 0} style={{ flex: 1 }} + onChange={(value) => setRectangleData({ ...rectangleData, width: value })} disabled={!connectedDevice} /> @@ -504,6 +598,7 @@ function MeasurementPointSetting() { className={styles.numberInput} value={rectangleData?.y || 0} style={{ flex: 1 }} + onChange={(value) => setRectangleData({ ...rectangleData, y: value })} disabled={!connectedDevice} /> @@ -513,6 +608,7 @@ function MeasurementPointSetting() { className={styles.numberInput} value={rectangleData?.height || 0} style={{ flex: 1 }} + onChange={(value) => setRectangleData({ ...rectangleData, height: value })} disabled={!connectedDevice} />