cles
2 weeks ago
5 changed files with 54 additions and 230 deletions
@ -1,219 +0,0 @@ |
|||||
import React, { useState } from 'react' |
|
||||
import styles from './index.module.css' |
|
||||
import { Flex, Input, Select, InputNumber, Button, Table } from 'antd' |
|
||||
import { |
|
||||
PlusOutlined, |
|
||||
MinusOutlined, |
|
||||
DeleteOutlined, |
|
||||
ReloadOutlined, |
|
||||
SendOutlined |
|
||||
} from '@ant-design/icons' |
|
||||
|
|
||||
function MeasurementPointSetting() { |
|
||||
const [measurementData] = useState([ |
|
||||
{ |
|
||||
key: '1', |
|
||||
项目: '传感器', |
|
||||
数值: '', |
|
||||
children: [ |
|
||||
{ key: '1-1', 项目: '测点位置', 数值: '1' }, |
|
||||
{ key: '1-2', 项目: '测点描述', 数值: '' }, |
|
||||
{ key: '1-3', 项目: '计算系数', 数值: '0.448' }, |
|
||||
{ key: '1-4', 项目: '营样标定', 数值: 'n' }, |
|
||||
{ key: '1-5', 项目: 'x', 数值: '349' }, |
|
||||
{ key: '1-6', 项目: 'y', 数值: '1108' }, |
|
||||
{ key: '1-7', 项目: 'w', 数值: '125' }, |
|
||||
{ key: '1-8', 项目: 'h', 数值: '15' } |
|
||||
] |
|
||||
}, |
|
||||
{ key: '2', 项目: '传感器', 数值: '' }, |
|
||||
{ key: '3', 项目: '传感器', 数值: '' }, |
|
||||
{ key: '4', 项目: '传感器', 数值: '' }, |
|
||||
{ key: '5', 项目: '传感器', 数值: '' } |
|
||||
]) |
|
||||
|
|
||||
const columns = [ |
|
||||
{ |
|
||||
title: '项目', |
|
||||
dataIndex: '项目', |
|
||||
key: '项目', |
|
||||
width: '50%' |
|
||||
}, |
|
||||
{ |
|
||||
title: '数值', |
|
||||
dataIndex: '数值', |
|
||||
key: '数值', |
|
||||
width: '50%', |
|
||||
render: (text) => text || '-' |
|
||||
} |
|
||||
] |
|
||||
|
|
||||
return ( |
|
||||
<Flex vertical className={styles.container}> |
|
||||
{/* 标题 */} |
|
||||
<div className={styles.header}> |
|
||||
<span className={styles.title}>测点设置:</span> |
|
||||
</div> |
|
||||
|
|
||||
{/* 基本信息 */} |
|
||||
<div className={styles.section}> |
|
||||
<div className={styles.sectionTitle}>基本信息</div> |
|
||||
|
|
||||
<Flex className={styles.formRow}> |
|
||||
<span className={styles.label}>测点位置:</span> |
|
||||
<Select |
|
||||
className={styles.select} |
|
||||
defaultValue="1" |
|
||||
style={{ flex: 1 }} |
|
||||
options={[ |
|
||||
{ value: '1', label: '1' }, |
|
||||
{ value: '2', label: '2' }, |
|
||||
{ value: '3', label: '3' }, |
|
||||
{ value: '4', label: '4' } |
|
||||
]} |
|
||||
/> |
|
||||
</Flex> |
|
||||
|
|
||||
<Flex className={styles.formRow}> |
|
||||
<span className={styles.label}>测点描述:</span> |
|
||||
<Input className={styles.input} style={{ flex: 1 }} /> |
|
||||
</Flex> |
|
||||
|
|
||||
<Flex className={styles.formRow}> |
|
||||
<span className={styles.label}>计算系数:</span> |
|
||||
<InputNumber |
|
||||
className={styles.numberInput} |
|
||||
defaultValue={0} |
|
||||
precision={4} |
|
||||
style={{ flex: 1 }} |
|
||||
/> |
|
||||
</Flex> |
|
||||
|
|
||||
<Flex className={styles.formRow}> |
|
||||
<span className={styles.label}>营样标定:</span> |
|
||||
<Select |
|
||||
className={styles.select} |
|
||||
defaultValue="n" |
|
||||
style={{ flex: 1 }} |
|
||||
options={[ |
|
||||
{ value: 'y', label: 'y' }, |
|
||||
{ value: 'n', label: 'n' } |
|
||||
]} |
|
||||
/> |
|
||||
</Flex> |
|
||||
</div> |
|
||||
|
|
||||
{/* 成像区域 */} |
|
||||
<div className={styles.section}> |
|
||||
<div className={styles.sectionTitle}>成像区域</div> |
|
||||
|
|
||||
<Flex gap={16}> |
|
||||
<Flex className={styles.formRow} style={{ flex: 1 }}> |
|
||||
<span className={styles.label}>X:</span> |
|
||||
<InputNumber className={styles.numberInput} defaultValue={0} style={{ flex: 1 }} /> |
|
||||
</Flex> |
|
||||
<Flex className={styles.formRow} style={{ flex: 1 }}> |
|
||||
<span className={styles.label}>W:</span> |
|
||||
<InputNumber className={styles.numberInput} defaultValue={0} style={{ flex: 1 }} /> |
|
||||
</Flex> |
|
||||
</Flex> |
|
||||
|
|
||||
<Flex gap={16}> |
|
||||
<Flex className={styles.formRow} style={{ flex: 1 }}> |
|
||||
<span className={styles.label}>Y:</span> |
|
||||
<InputNumber className={styles.numberInput} defaultValue={0} style={{ flex: 1 }} /> |
|
||||
</Flex> |
|
||||
<Flex className={styles.formRow} style={{ flex: 1 }}> |
|
||||
<span className={styles.label}>H:</span> |
|
||||
<InputNumber className={styles.numberInput} defaultValue={0} style={{ flex: 1 }} /> |
|
||||
</Flex> |
|
||||
</Flex> |
|
||||
</div> |
|
||||
|
|
||||
{/* 系数计算 */} |
|
||||
<div className={styles.section}> |
|
||||
<div className={styles.sectionTitle}>系数计算</div> |
|
||||
|
|
||||
<Flex className={styles.formRow}> |
|
||||
<span className={styles.label}>像素单距:</span> |
|
||||
<Select |
|
||||
className={styles.select} |
|
||||
defaultValue="50" |
|
||||
style={{ flex: 1 }} |
|
||||
options={[ |
|
||||
{ value: '25', label: '25' }, |
|
||||
{ value: '50', label: '50' }, |
|
||||
{ value: '75', label: '75' }, |
|
||||
{ value: '100', label: '100' } |
|
||||
]} |
|
||||
/> |
|
||||
</Flex> |
|
||||
|
|
||||
<Flex className={styles.formRow}> |
|
||||
<span className={styles.label}>测点距离:</span> |
|
||||
<InputNumber |
|
||||
className={styles.numberInput} |
|
||||
defaultValue={10} |
|
||||
precision={4} |
|
||||
style={{ flex: 1 }} |
|
||||
/> |
|
||||
</Flex> |
|
||||
</div> |
|
||||
|
|
||||
{/* 测点列表 */} |
|
||||
<div className={styles.tableSection}> |
|
||||
<div className={styles.sectionTitle}>测点列表</div> |
|
||||
|
|
||||
<div className={styles.tableContainer}> |
|
||||
<table className={styles.table}> |
|
||||
<thead className={styles.tableHeader}> |
|
||||
<tr> |
|
||||
<th>项目</th> |
|
||||
<th>数值</th> |
|
||||
</tr> |
|
||||
</thead> |
|
||||
<tbody> |
|
||||
{measurementData.map((item) => ( |
|
||||
<tr key={item.id} className={styles.tableRow}> |
|
||||
<td className={styles.tableCell}>{item.type}</td> |
|
||||
<td className={styles.tableCell}>{item.value || '-'}</td> |
|
||||
</tr> |
|
||||
))} |
|
||||
</tbody> |
|
||||
</table> |
|
||||
</div> |
|
||||
|
|
||||
{/* 操作按钮 */} |
|
||||
<Flex className={styles.actionButtons} justify="center"> |
|
||||
<Button |
|
||||
className={`${styles.actionButton} ${styles.addButton}`} |
|
||||
icon={<PlusOutlined />} |
|
||||
shape="circle" |
|
||||
/> |
|
||||
<Button |
|
||||
className={`${styles.actionButton} ${styles.deleteButton}`} |
|
||||
icon={<MinusOutlined />} |
|
||||
shape="circle" |
|
||||
/> |
|
||||
<Button |
|
||||
className={`${styles.actionButton} ${styles.clearButton}`} |
|
||||
icon={<DeleteOutlined />} |
|
||||
shape="circle" |
|
||||
/> |
|
||||
<Button |
|
||||
className={`${styles.actionButton} ${styles.refreshButton}`} |
|
||||
icon={<ReloadOutlined />} |
|
||||
shape="circle" |
|
||||
/> |
|
||||
<Button |
|
||||
className={`${styles.actionButton} ${styles.sendButton}`} |
|
||||
icon={<SendOutlined />} |
|
||||
shape="circle" |
|
||||
/> |
|
||||
</Flex> |
|
||||
</div> |
|
||||
</Flex> |
|
||||
) |
|
||||
} |
|
||||
|
|
||||
export default MeasurementPointSetting |
|
||||
Loading…
Reference in new issue