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