feat: 添加 MeasurementPointSetting 组件并更新 SiderHeader 以支持条件渲染

2 weeks ago · 81175025f6
4 changed files with 580 additions and 2 deletions
--- a/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.jsx
+++ b/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.jsx
@ -0,0 +1,276 @@
+import styles from './MeasurementPointSetting.module.css'
+import { Flex, Input, Select, InputNumber, Button, Table } from 'antd'
+import {
+  PlusOutlined,
+  MinusOutlined,
+  DeleteOutlined,
+  ReloadOutlined,
+  SendOutlined
+} from '@ant-design/icons'
+
+function MeasurementPointSetting() {
+  // 测点列表数据
+  const dataSource = [
+    {
+      key: '1',
+      项目: '传感器',
+      数值: '',
+      children: [
+        { key: '1-1', 项目: '测点位置', 数值: 1 },
+        {
+          key: '1-2',
+          项目: '测点描述',
+          数值: '我去年买了个表'
+        },
+        { key: '1-3', 项目: '计算系数', 数值: 0.448 },
+        {
+          key: '1-4',
+          项目: '基准标靶',
+          数值: 'n',
+          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: '2',
+      项目: '传感器',
+      数值: ''
+    },
+    {
+      key: '3',
+      项目: '传感器',
+      数值: ''
+    },
+    {
+      key: '4',
+      项目: '传感器',
+      数值: ''
+    },
+    {
+      key: '5',
+      项目: '传感器',
+      数值: ''
+    },
+    {
+      key: '6',
+      项目: '传感器',
+      数值: ''
+    },
+    {
+      key: '7',
+      项目: '传感器',
+      数值: ''
+    },
+    {
+      key: '8',
+      项目: '传感器',
+      数值: ''
+    },
+    {
+      key: '9',
+      项目: '传感器',
+      数值: ''
+    }
+  ]
+
+  // 表格列配置
+  const columns = [
+    {
+      title: '项目',
+      dataIndex: '项目',
+      key: '项目',
+      width: 120,
+      render: (text, record) => {
+        // 根据层级设置不同的字体大小
+        const level = record.key.split('-').length - 1
+        const fontSize = level === 0 ? '14px' : level === 1 ? '12px' : '11px'
+        const fontWeight = level === 0 ? '500' : 'normal'
+
+        return (
+          <span
+            style={{
+              fontSize,
+              fontWeight,
+              color: level === 0 ? '#333' : level === 1 ? '#666' : '#999'
+            }}
+          >
+            {text}
+          </span>
+        )
+      }
+    },
+    {
+      title: '数值',
+      dataIndex: '数值',
+      key: '数值',
+      render: (value, record) => {
+        // 根据层级设置不同的字体大小
+        const level = record.key.split('-').length - 1
+        const fontSize = level === 0 ? '14px' : level === 1 ? '12px' : '11px'
+
+        return (
+          <span
+            style={{
+              fontSize,
+              color: level === 0 ? '#333' : level === 1 ? '#666' : '#999'
+            }}
+          >
+            {value || ''}
+          </span>
+        )
+      }
+    }
+  ]
+
+  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={[]} />
+        </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 }}>
+            <InputNumber
+              addonBefore={'X'}
+              className={styles.numberInput}
+              defaultValue={0}
+              style={{ flex: 1 }}
+            />
+          </Flex>
+          <Flex className={styles.formRow} style={{ flex: 1 }}>
+            <InputNumber
+              addonBefore={'W'}
+              className={styles.numberInput}
+              defaultValue={0}
+              style={{ flex: 1 }}
+            />
+          </Flex>
+        </Flex>
+
+        <Flex gap={16}>
+          <Flex className={styles.formRow} style={{ flex: 1 }}>
+            <InputNumber
+              addonBefore={'Y'}
+              className={styles.numberInput}
+              defaultValue={0}
+              style={{ flex: 1 }}
+            />
+          </Flex>
+          <Flex className={styles.formRow} style={{ flex: 1 }}>
+            <InputNumber
+              addonBefore={'H'}
+              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>
+
+        <Table
+          dataSource={dataSource}
+          columns={columns}
+          pagination={false}
+          size="small"
+          expandable={{
+            childrenColumnName: 'children',
+            indentSize: '2em'
+          }}
+          scroll={{ y: 220 }}
+        />
+
+        {/* 操作按钮 */}
+        <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" />
+        </Flex>
+      </div>
+    </Flex>
+  )
+}
+
+export default MeasurementPointSetting
--- a/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.module.css
+++ b/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.module.css
@ -0,0 +1,76 @@
+/* MeasurementPointSetting component styles */
+
+.container {
+  flex: 1;
+  overflow: auto;
+  padding: 4px;
+}
+
+.header {
+  padding: 4px;
+  padding-bottom: 0;
+}
+
+.title {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.section {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin: 2px 0;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  background: #f9f9f9;
+}
+
+.sectionTitle {
+  font-weight: bold;
+  color: #333;
+}
+
+.formRow {
+  margin-bottom: 8px;
+  align-items: center;
+}
+
+.label {
+  text-align: right;
+  margin-right: 8px;
+
+}
+
+.input {
+  height: 24px;
+
+}
+
+.select {
+  height: 24px;
+}
+
+.numberInput {
+  font-size: 12px;
+  height: 26px;
+}
+
+.tableSection {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin: 4px 0;
+  padding: 8px;
+  background: #f9f9f9;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+
+
+.actionButtons {
+  margin-top: 8px;
+  gap: 8px;
+}
--- a/src/renderer/src/components/MeasurementPointSetting/index.jsx
+++ b/src/renderer/src/components/MeasurementPointSetting/index.jsx
@ -0,0 +1,219 @@
+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
--- a/src/renderer/src/components/SiderHeader/SiderHeader.jsx
+++ b/src/renderer/src/components/SiderHeader/SiderHeader.jsx
@ -9,7 +9,10 @@ import {
  SlidersFilled
 } from '@ant-design/icons'
 import SystemSettings from '../SystemSettings/SystemSettings'
-function SiderHeader() {
+import MeasurementPointSetting from '../MeasurementPointSetting/MeasurementPointSetting'
+import PropTypes from 'prop-types'
+
+function SiderHeader({ showSystemSettings = true }) {
  return (
    <Flex vertical>
      <Flex className={styles.header}>
@ -40,9 +43,13 @@ function SiderHeader() {
          </Flex>
        </Flex>
      </Flex>
-      <SystemSettings />
+      {showSystemSettings ? <SystemSettings /> : <MeasurementPointSetting />}
    </Flex>
  )
 }

+SiderHeader.propTypes = {
+  showSystemSettings: PropTypes.bool
+}
+
 export default SiderHeader