|
|
|
@ -1,5 +1,5 @@ |
|
|
|
import styles from './MeasurementPointSetting.module.css' |
|
|
|
import { Flex, Input, Select, InputNumber, Button, Table } from 'antd' |
|
|
|
import { Flex, Input, Select, InputNumber, Button, Table, Tooltip, Modal } from 'antd' |
|
|
|
import { |
|
|
|
PlusOutlined, |
|
|
|
MinusOutlined, |
|
|
|
@ -8,83 +8,137 @@ import { |
|
|
|
SendOutlined, |
|
|
|
BoxPlotFilled |
|
|
|
} from '@ant-design/icons' |
|
|
|
import useRectangleStore from '../../stores/rectangleStore' |
|
|
|
import { useState } from 'react' |
|
|
|
|
|
|
|
function MeasurementPointSetting() { |
|
|
|
// 测点列表数据 |
|
|
|
const dataSource = [ |
|
|
|
{ |
|
|
|
key: '1', |
|
|
|
项目: '传感器', |
|
|
|
数值: '', |
|
|
|
// 从Zustand store获取矩形数据和设置方法 |
|
|
|
const rectangleData = useRectangleStore((state) => state.rectangleData) |
|
|
|
const setRectangleData = useRectangleStore((state) => state.setRectangleData) |
|
|
|
|
|
|
|
// 表单数据状态 |
|
|
|
const [formData, setFormData] = useState({ |
|
|
|
location: 1, // 测点位置 |
|
|
|
description: '', // 测点描述 |
|
|
|
coefficient: 0, // 计算系数 |
|
|
|
baseTarget: 'n' // 基准标靶 |
|
|
|
}) |
|
|
|
|
|
|
|
// 测点列表状态 |
|
|
|
const [sensorList, setSensorList] = useState([]) |
|
|
|
|
|
|
|
// 选中的传感器状态 |
|
|
|
const [selectedSensorKey, setSelectedSensorKey] = useState(null) |
|
|
|
|
|
|
|
// 根据选中的传感器更新矩形数据 |
|
|
|
const updateRectangleFromSensor = (sensorKey) => { |
|
|
|
if (!sensorKey) { |
|
|
|
setRectangleData(null) |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
// 查找选中的传感器 |
|
|
|
const selectedSensor = sensorList.find((sensor) => sensor.key === sensorKey) |
|
|
|
if (!selectedSensor) { |
|
|
|
setRectangleData(null) |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
// 查找基准标靶的坐标信息 |
|
|
|
const baseTargetInfo = selectedSensor.children?.find((child) => child.name === '基准标靶') |
|
|
|
if (!baseTargetInfo || !baseTargetInfo.children) { |
|
|
|
setRectangleData(null) |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
// 提取坐标数据 |
|
|
|
const xData = baseTargetInfo.children.find((coord) => coord.name === 'x') |
|
|
|
const yData = baseTargetInfo.children.find((coord) => coord.name === 'y') |
|
|
|
const wData = baseTargetInfo.children.find((coord) => coord.name === 'w') |
|
|
|
const hData = baseTargetInfo.children.find((coord) => coord.name === 'h') |
|
|
|
|
|
|
|
if (xData && yData && wData && hData) { |
|
|
|
const rectangleInfo = { |
|
|
|
x: Number(xData.value) || 0, |
|
|
|
y: Number(yData.value) || 0, |
|
|
|
width: Number(wData.value) || 0, |
|
|
|
height: Number(hData.value) || 0 |
|
|
|
} |
|
|
|
|
|
|
|
console.log('从传感器数据更新矩形:', rectangleInfo) |
|
|
|
setRectangleData(rectangleInfo) |
|
|
|
} else { |
|
|
|
setRectangleData(null) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 处理传感器选中 |
|
|
|
const handleSensorSelect = (sensorKey) => { |
|
|
|
setSelectedSensorKey(sensorKey) |
|
|
|
updateRectangleFromSensor(sensorKey) |
|
|
|
} |
|
|
|
|
|
|
|
// 表单输入处理函数 |
|
|
|
const handleFormChange = (field, value) => { |
|
|
|
setFormData((prev) => ({ |
|
|
|
...prev, |
|
|
|
[field]: value |
|
|
|
})) |
|
|
|
} |
|
|
|
|
|
|
|
// 添加传感器数据收集函数 |
|
|
|
const handleAddSensor = () => { |
|
|
|
// 检查是否有矩形绘制数据 |
|
|
|
if (!rectangleData || !rectangleData.x) { |
|
|
|
alert('请先在图片上绘制矩形区域！') |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
// 生成新的传感器项 |
|
|
|
const newSensorKey = String(sensorList.length + 1) |
|
|
|
const newSensor = { |
|
|
|
key: newSensorKey, |
|
|
|
name: '传感器', |
|
|
|
value: '', |
|
|
|
children: [ |
|
|
|
{ key: '1-1', 项目: '测点位置', 数值: 1 }, |
|
|
|
{ key: `${newSensorKey}-1`, name: '测点位置', value: formData.location }, |
|
|
|
{ key: `${newSensorKey}-2`, name: '测点描述', value: formData.description }, |
|
|
|
{ key: `${newSensorKey}-3`, name: '计算系数', value: formData.coefficient }, |
|
|
|
{ |
|
|
|
key: '1-2', |
|
|
|
项目: '测点描述', |
|
|
|
数值: '我去年买了个表' |
|
|
|
}, |
|
|
|
{ key: '1-3', 项目: '计算系数', 数值: 0.448 }, |
|
|
|
{ |
|
|
|
key: '1-4', |
|
|
|
项目: '基准标靶', |
|
|
|
数值: 'n', |
|
|
|
key: `${newSensorKey}-4`, |
|
|
|
name: '基准标靶', |
|
|
|
value: formData.baseTarget, |
|
|
|
children: [ |
|
|
|
{ key: '1-4-1', 项目: 'x', 数值: 349 }, |
|
|
|
{ key: '1-4-2', 项目: 'y', 数值: 1108 }, |
|
|
|
{ key: '1-4-3', 项目: 'w', 数值: 125 }, |
|
|
|
{ key: '1-4-4', 项目: 'h', 数值: 115 } |
|
|
|
{ key: `${newSensorKey}-4-1`, name: 'x', value: rectangleData.x }, |
|
|
|
{ key: `${newSensorKey}-4-2`, name: 'y', value: rectangleData.y }, |
|
|
|
{ key: `${newSensorKey}-4-3`, name: 'w', value: rectangleData.width }, |
|
|
|
{ key: `${newSensorKey}-4-4`, name: 'h', value: rectangleData.height } |
|
|
|
] |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '2', |
|
|
|
项目: '传感器', |
|
|
|
数值: '' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '3', |
|
|
|
项目: '传感器', |
|
|
|
数值: '' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '4', |
|
|
|
项目: '传感器', |
|
|
|
数值: '' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '5', |
|
|
|
项目: '传感器', |
|
|
|
数值: '' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '6', |
|
|
|
项目: '传感器', |
|
|
|
数值: '' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '7', |
|
|
|
项目: '传感器', |
|
|
|
数值: '' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '8', |
|
|
|
项目: '传感器', |
|
|
|
数值: '' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '9', |
|
|
|
项目: '传感器', |
|
|
|
数值: '' |
|
|
|
} |
|
|
|
] |
|
|
|
|
|
|
|
// 更新传感器列表 |
|
|
|
setSensorList((prev) => [...prev, newSensor]) |
|
|
|
|
|
|
|
// 重置表单数据 |
|
|
|
setFormData((prev) => ({ |
|
|
|
location: prev.location + 1, // 自动递增位置 |
|
|
|
description: '', |
|
|
|
coefficient: 0, |
|
|
|
baseTarget: 'n' |
|
|
|
})) |
|
|
|
} |
|
|
|
|
|
|
|
// 测点列表数据（使用状态） |
|
|
|
const dataSource = sensorList |
|
|
|
|
|
|
|
// 表格列配置 |
|
|
|
const columns = [ |
|
|
|
{ |
|
|
|
title: '项目', |
|
|
|
dataIndex: '项目', |
|
|
|
key: '项目', |
|
|
|
dataIndex: 'name', |
|
|
|
key: 'name', |
|
|
|
width: 120, |
|
|
|
render: (text, record) => { |
|
|
|
// 根据层级设置不同的字体大小 |
|
|
|
@ -107,8 +161,8 @@ function MeasurementPointSetting() { |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '数值', |
|
|
|
dataIndex: '数值', |
|
|
|
key: '数值', |
|
|
|
dataIndex: 'value', |
|
|
|
key: 'value', |
|
|
|
render: (value, record) => { |
|
|
|
// 根据层级设置不同的字体大小 |
|
|
|
const level = record.key.split('-').length - 1 |
|
|
|
@ -121,13 +175,75 @@ function MeasurementPointSetting() { |
|
|
|
color: level === 0 ? '#333' : level === 1 ? '#666' : '#999' |
|
|
|
}} |
|
|
|
> |
|
|
|
{value || ''} |
|
|
|
{value !== null && value !== undefined ? value : ''} |
|
|
|
</span> |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
|
|
|
|
// 删除传感器处理函数 |
|
|
|
const handleDel = () => { |
|
|
|
if (!selectedSensorKey) { |
|
|
|
Modal.info({ |
|
|
|
title: '提示', |
|
|
|
content: '请先选择要删除的传感器！', |
|
|
|
centered: true |
|
|
|
}) |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
Modal.confirm({ |
|
|
|
title: '删除确认', |
|
|
|
content: '是否要删除该传感器？', |
|
|
|
okText: '确定', |
|
|
|
cancelText: '取消', |
|
|
|
centered: true, |
|
|
|
onOk: () => { |
|
|
|
// 删除选中的传感器 |
|
|
|
setSensorList((prev) => prev.filter((sensor) => sensor.key !== selectedSensorKey)) |
|
|
|
setSelectedSensorKey(null) |
|
|
|
console.log('删除传感器:', selectedSensorKey) |
|
|
|
}, |
|
|
|
onCancel: () => { |
|
|
|
console.log('取消删除') |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
// 清空传感器列表处理函数 |
|
|
|
const handleClear = () => { |
|
|
|
if (sensorList.length === 0) { |
|
|
|
Modal.info({ |
|
|
|
title: '提示', |
|
|
|
content: '传感器列表已经为空！', |
|
|
|
centered: true |
|
|
|
}) |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
Modal.confirm({ |
|
|
|
title: '清空确认', |
|
|
|
content: '是否要清空所有传感器？', |
|
|
|
okText: '确定', |
|
|
|
cancelText: '取消', |
|
|
|
centered: true, |
|
|
|
onOk: () => { |
|
|
|
// 清空传感器列表 |
|
|
|
setSensorList([]) |
|
|
|
setSelectedSensorKey(null) |
|
|
|
console.log('清空传感器列表') |
|
|
|
}, |
|
|
|
onCancel: () => { |
|
|
|
console.log('取消清空') |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const handleLoad = () => {} |
|
|
|
|
|
|
|
const handleSet = () => {} |
|
|
|
|
|
|
|
return ( |
|
|
|
<Flex vertical className={styles.container}> |
|
|
|
{/* 标题 */} |
|
|
|
@ -144,19 +260,30 @@ function MeasurementPointSetting() { |
|
|
|
|
|
|
|
<Flex className={styles.formRow}> |
|
|
|
<span className={styles.label}>测点位置:</span> |
|
|
|
<Select className={styles.select} defaultValue="1" style={{ flex: 1 }} options={[]} /> |
|
|
|
<InputNumber |
|
|
|
className={styles.numberInput} |
|
|
|
value={formData.location} |
|
|
|
onChange={(value) => handleFormChange('location', value)} |
|
|
|
style={{ flex: 1 }} |
|
|
|
/> |
|
|
|
</Flex> |
|
|
|
|
|
|
|
<Flex className={styles.formRow}> |
|
|
|
<span className={styles.label}>测点描述:</span> |
|
|
|
<Input className={styles.input} style={{ flex: 1 }} /> |
|
|
|
<Input |
|
|
|
className={styles.input} |
|
|
|
value={formData.description} |
|
|
|
onChange={(e) => handleFormChange('description', e.target.value)} |
|
|
|
style={{ flex: 1 }} |
|
|
|
/> |
|
|
|
</Flex> |
|
|
|
|
|
|
|
<Flex className={styles.formRow}> |
|
|
|
<span className={styles.label}>计算系数:</span> |
|
|
|
<InputNumber |
|
|
|
className={styles.numberInput} |
|
|
|
defaultValue={0} |
|
|
|
value={formData.coefficient} |
|
|
|
onChange={(value) => handleFormChange('coefficient', value)} |
|
|
|
precision={4} |
|
|
|
style={{ flex: 1 }} |
|
|
|
/> |
|
|
|
@ -166,7 +293,8 @@ function MeasurementPointSetting() { |
|
|
|
<span className={styles.label}>基准标靶:</span> |
|
|
|
<Select |
|
|
|
className={styles.select} |
|
|
|
defaultValue="n" |
|
|
|
value={formData.baseTarget} |
|
|
|
onChange={(value) => handleFormChange('baseTarget', value)} |
|
|
|
style={{ flex: 1 }} |
|
|
|
options={[ |
|
|
|
{ value: 'y', label: 'y' }, |
|
|
|
@ -184,7 +312,7 @@ function MeasurementPointSetting() { |
|
|
|
<InputNumber |
|
|
|
addonBefore={'X'} |
|
|
|
className={styles.numberInput} |
|
|
|
defaultValue={0} |
|
|
|
value={rectangleData?.x || 0} |
|
|
|
style={{ flex: 1 }} |
|
|
|
/> |
|
|
|
</Flex> |
|
|
|
@ -192,7 +320,7 @@ function MeasurementPointSetting() { |
|
|
|
<InputNumber |
|
|
|
addonBefore={'W'} |
|
|
|
className={styles.numberInput} |
|
|
|
defaultValue={0} |
|
|
|
value={rectangleData?.width || 0} |
|
|
|
style={{ flex: 1 }} |
|
|
|
/> |
|
|
|
</Flex> |
|
|
|
@ -203,7 +331,7 @@ function MeasurementPointSetting() { |
|
|
|
<InputNumber |
|
|
|
addonBefore={'Y'} |
|
|
|
className={styles.numberInput} |
|
|
|
defaultValue={0} |
|
|
|
value={rectangleData?.y || 0} |
|
|
|
style={{ flex: 1 }} |
|
|
|
/> |
|
|
|
</Flex> |
|
|
|
@ -211,7 +339,7 @@ function MeasurementPointSetting() { |
|
|
|
<InputNumber |
|
|
|
addonBefore={'H'} |
|
|
|
className={styles.numberInput} |
|
|
|
defaultValue={0} |
|
|
|
value={rectangleData?.height || 0} |
|
|
|
style={{ flex: 1 }} |
|
|
|
/> |
|
|
|
</Flex> |
|
|
|
@ -229,10 +357,9 @@ function MeasurementPointSetting() { |
|
|
|
defaultValue="50" |
|
|
|
style={{ flex: 1 }} |
|
|
|
options={[ |
|
|
|
{ value: '25', label: '25' }, |
|
|
|
{ value: '50', label: '50' }, |
|
|
|
{ value: '75', label: '75' }, |
|
|
|
{ value: '100', label: '100' } |
|
|
|
{ value: '125', label: '125' }, |
|
|
|
{ value: '200', label: '200' } |
|
|
|
]} |
|
|
|
/> |
|
|
|
</Flex> |
|
|
|
@ -262,15 +389,60 @@ function MeasurementPointSetting() { |
|
|
|
indentSize: '2em' |
|
|
|
}} |
|
|
|
scroll={{ y: 220 }} |
|
|
|
rowSelection={{ |
|
|
|
type: 'radio', |
|
|
|
selectedRowKeys: selectedSensorKey ? [selectedSensorKey] : [], |
|
|
|
onChange: (selectedRowKeys) => { |
|
|
|
// 只允许选择顶级传感器行（不包含子行） |
|
|
|
const selectedKey = selectedRowKeys[0] |
|
|
|
if (selectedKey && !selectedKey.includes('-')) { |
|
|
|
handleSensorSelect(selectedKey) |
|
|
|
} |
|
|
|
}, |
|
|
|
getCheckboxProps: (record) => ({ |
|
|
|
// 只有顶级传感器行可以选择，子行不显示选择框 |
|
|
|
disabled: record.key.includes('-') |
|
|
|
}), |
|
|
|
hideSelectAll: true, |
|
|
|
renderCell: (checked, record, index, originNode) => { |
|
|
|
// 子行不渲染选择框 |
|
|
|
if (record.key.includes('-')) { |
|
|
|
return null |
|
|
|
} |
|
|
|
return originNode |
|
|
|
} |
|
|
|
}} |
|
|
|
onRow={(record) => ({ |
|
|
|
onClick: () => { |
|
|
|
// 点击行时选中，只允许选择顶级传感器行 |
|
|
|
if (!record.key.includes('-')) { |
|
|
|
handleSensorSelect(record.key) |
|
|
|
} |
|
|
|
}, |
|
|
|
style: { |
|
|
|
cursor: record.key.includes('-') ? 'default' : 'pointer', |
|
|
|
backgroundColor: selectedSensorKey === record.key ? '#e6f7ff' : 'transparent' |
|
|
|
} |
|
|
|
})} |
|
|
|
/> |
|
|
|
|
|
|
|
{/* 操作按钮 */} |
|
|
|
<Flex className={styles.actionButtons} justify="center"> |
|
|
|
<Button icon={<PlusOutlined />} shape="circle" /> |
|
|
|
<Button icon={<MinusOutlined />} shape="circle" /> |
|
|
|
<Button icon={<DeleteOutlined />} shape="circle" /> |
|
|
|
<Button icon={<ReloadOutlined />} shape="circle" /> |
|
|
|
<Button icon={<SendOutlined />} shape="circle" /> |
|
|
|
<Tooltip title="添加传感器"> |
|
|
|
<Button icon={<PlusOutlined />} shape="circle" onClick={handleAddSensor} /> |
|
|
|
</Tooltip> |
|
|
|
<Tooltip title="删除传感器"> |
|
|
|
<Button icon={<MinusOutlined />} shape="circle" onClick={handleDel} /> |
|
|
|
</Tooltip> |
|
|
|
<Tooltip title="清空列表"> |
|
|
|
<Button icon={<DeleteOutlined />} shape="circle" onClick={handleClear} /> |
|
|
|
</Tooltip> |
|
|
|
<Tooltip title="加载传感器"> |
|
|
|
<Button icon={<ReloadOutlined />} shape="circle" onClick={handleLoad} /> |
|
|
|
</Tooltip> |
|
|
|
<Tooltip title="设置传感器"> |
|
|
|
<Button icon={<SendOutlined />} shape="circle" onClick={handleSet} /> |
|
|
|
</Tooltip> |
|
|
|
</Flex> |
|
|
|
</div> |
|
|
|
</Flex> |
|
|
|
|
cles
2 weeks ago