Browse Source

feat: 添加单元格值变化处理,支持坐标和描述的编辑功能

master
cles 3 weeks ago
parent
commit
60716762a7
  1. 98
      src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.jsx

98
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 1x
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>

Loading…
Cancel
Save