From cd4bbf95c0e573b4803e5ab1adc94bf20f611b2e Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Thu, 20 Nov 2025 18:23:29 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business_basic/components/AuditDiary.js   | 297 ++++++++++++++++++
 .../business_basic/components/AuditDiary.less |   2 +
 .../components/BusinessAttributeInfo.js       | 297 ++++++++++++++++++
 .../components/BusinessAttributeInfo.less     |   2 +
 .../components/OilDataManagement.js           |  37 ++-
 .../business_basic/components/PhysChem.js     |   2 -
 .../components/SafetyReasonable.js            | 297 ++++++++++++++++++
 .../components/SafetyReasonable.less          |   2 +
 8 files changed, 931 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/business_basic/components/AuditDiary.js
 create mode 100644 src/pages/business_basic/components/AuditDiary.less
 create mode 100644 src/pages/business_basic/components/BusinessAttributeInfo.js
 create mode 100644 src/pages/business_basic/components/BusinessAttributeInfo.less
 create mode 100644 src/pages/business_basic/components/SafetyReasonable.js
 create mode 100644 src/pages/business_basic/components/SafetyReasonable.less

diff --git a/src/pages/business_basic/components/AuditDiary.js b/src/pages/business_basic/components/AuditDiary.js
new file mode 100644
index 0000000..da8c49b
--- /dev/null
+++ b/src/pages/business_basic/components/AuditDiary.js
@@ -0,0 +1,297 @@
+import React, { useMemo, useState } from 'react';
+import { Form, Input, Select, Space, Button, Switch, message } from 'antd';
+import { PlusOutlined, SearchOutlined, ReloadOutlined, ExportOutlined } from '@ant-design/icons';
+import StandardTable from '@/components/StandardTable';
+import styles from './AuditDiary.less';
+import BtBg1 from '@/assets/business_basic/Bt_bg1.png';
+import BtBg2 from '@/assets/business_basic/Bt_bg2.png';
+
+const AuditDiary = () => {
+    const [form] = Form.useForm();
+
+    const [filters, setFilters] = useState({
+        listCategory: undefined,
+        listStatus: undefined,
+    });
+
+    const columns = useMemo(() => {
+        return [
+            { title: '油品信息', dataIndex: 'name', key: 'name', width: 180 },
+            { title: '油品分类', dataIndex: 'category', key: 'category', width: 100 },
+            { title: '密度（P15）', dataIndex: 'density', key: 'density', width: 120 },
+            { title: '闪点（℃）', dataIndex: 'flashPoint', key: 'flashPoint', width: 100 },
+            { title: '粘度(MM²/S)', dataIndex: 'viscosity', key: 'viscosity', width: 120 },
+            { title: '硫含量(MG/KG)', dataIndex: 'sulfur', key: 'sulfur', width: 140 },
+            {
+                title: '状态',
+                dataIndex: 'enabled',
+                key: 'enabled',
+                width: 90,
+                render: (val, record) => (
+                    <Switch
+                        size="small"
+                        checked={val}
+                        className="statusSwitch"
+                        onChange={(checked) => {
+                            record.enabled = checked;
+                            message.success(`已${checked ? '启用' : '停用'}`);
+                        }}
+                    />
+                ),
+            },
+            { title: '最后更新', dataIndex: 'updatedAt', key: 'updatedAt', width: 180 },
+            {
+                title: '操作',
+                key: 'action',
+                fixed: 'right',
+                width: 180,
+                render: () => (
+                    <Space size={12}>
+                        <Button type="link" size="small" className="viewDetailBtn">查看详情</Button>
+                        <Button type="link" size="small" className="editBtn">修改</Button>
+                        <Button type="link" size="small" danger className="deleteBtn">删除</Button>
+                    </Space>
+                ),
+            },
+        ];
+    }, []);
+
+    const tableData = [
+        {
+            key: '1',
+            name: '92#汽油P001',
+            category: '汽油',
+            density: '0.852 kg/L',
+            flashPoint: '-43',
+            viscosity: '0.55',
+            sulfur: '10',
+            enabled: true,
+            updatedAt: '2025-10-25 22:30:16',
+        },
+        {
+            key: '2',
+            name: '95#汽油P001',
+            category: '汽油',
+            density: '0.725 kg/L',
+            flashPoint: '-43',
+            viscosity: '0.55',
+            sulfur: '10',
+            enabled: false,
+            updatedAt: '2025-10-25 10:28:14',
+        },
+        {
+            key: '3',
+            name: '0#柴油油P003',
+            category: '柴油',
+            density: '0.832 kg/L',
+            flashPoint: '65',
+            viscosity: '3.0',
+            sulfur: '10',
+            enabled: true,
+            updatedAt: '2025-10-23 20:58:24',
+        },
+        {
+            key: '4',
+            name: '航空煤油P004',
+            category: '航空煤油',
+            density: '0.852 kg/L',
+            flashPoint: '48',
+            viscosity: '1.25',
+            sulfur: '8',
+            enabled: false,
+            updatedAt: '2025-10-23 04:59:13',
+        },
+        {
+            key: '5',
+            name: '测流油P005',
+            category: '测流油',
+            density: '0.876 kg/L',
+            flashPoint: '32',
+            viscosity: '2.00',
+            sulfur: '300',
+            enabled: false,
+            updatedAt: '2025-10-22 03:03:13',
+        },
+    ];
+
+    const onSubmit = () => {
+        form.validateFields().then((values) => {
+            console.log('审计日记提交: ', values);
+            message.success('已保存审计日记信息');
+        });
+    };
+
+    const onReset = () => {
+        form.resetFields();
+        message.info('已重置审计日记信息');
+    };
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.topSection}>
+                <div className={styles.sectionHeader}>
+                    <span className={styles.sectionBar} />
+                    <span className={styles.sectionTitle}>审计1日记</span>
+                </div>
+                <div className={styles.topContent}>
+                    <Form
+                        form={form}
+                        layout="vertical"
+                        className={styles.basicForm}
+                        initialValues={{
+                            productCode: 'GAS-2023-045',
+                            productName: '92号汽油',
+                            category: undefined,
+                            status: undefined,
+                            description: '92号汽油，适用于大多数汽油发动机，具有优良的抗爆性能和清洁性能。',
+                        }}
+                    >
+                        <div className={styles.formLeft}>
+                            <div className={styles.formRow}>
+                                <Form.Item
+                                    label="油品代码（SKU）:"
+                                    name="productCode"
+                                    rules={[{ required: true, message: '请输入油品代码' }]}
+                                >
+                                    <Input placeholder="" />
+                                </Form.Item>
+                                <Form.Item
+                                    label="油品名称:"
+                                    name="productName"
+                                    rules={[{ required: true, message: '请输入油品名称' }]}
+                                >
+                                    <Input placeholder="" />
+                                </Form.Item>
+                            </div>
+                            <div className={styles.formRow}>
+                                <Form.Item label="油品分类:" name="category">
+                                    <Select
+                                        placeholder="请选择"
+                                        allowClear
+                                        options={[
+                                            { label: '汽油', value: '汽油' },
+                                            { label: '柴油', value: '柴油' },
+                                            { label: '航煤', value: '航煤' },
+                                        ]}
+                                    />
+                                </Form.Item>
+                                <Form.Item label="状态:" name="status">
+                                    <Select
+                                        placeholder="请选择"
+                                        allowClear
+                                        options={[
+                                            { label: '启用', value: '启用' },
+                                            { label: '停用', value: '停用' },
+                                        ]}
+                                    />
+                                </Form.Item>
+                            </div>
+                        </div>
+                        <div className={styles.formRight}>
+                            <Form.Item
+                                label="油品描述:"
+                                name="description"
+                                className={styles.descriptionItem}
+                            >
+                                <Input.TextArea rows={6} placeholder="" />
+                            </Form.Item>
+                            <div className={styles.formActions}>
+                                <Button type="primary" onClick={onSubmit}>保存修改</Button>
+                                <Button onClick={onReset}>取消</Button>
+                            </div>
+                        </div>
+                    </Form>
+                </div>
+            </div>
+            <div className={styles.bottomSection}>
+                <div className={styles.sectionHeader}>
+                    <span className={styles.sectionBar} />
+                    <span className={styles.sectionTitle}>油品列表</span>
+                </div>
+                <div className={styles.filterContent}>
+                    <div className={styles.filterItem}>
+                        <span className={styles.filterLabel}>油品分类:</span>
+                        <Select
+                            value={filters.listCategory}
+                            onChange={(v) => setFilters({ ...filters, listCategory: v })}
+                            placeholder="全部"
+                            options={[
+                                { label: '全部', value: undefined },
+                                { label: '汽油', value: '汽油' },
+                                { label: '柴油', value: '柴油' },
+                            ]}
+                            allowClear
+                        />
+                    </div>
+                    <div className={styles.filterItem}>
+                        <span className={styles.filterLabel}>油品状态:</span>
+                        <Select
+                            value={filters.listStatus}
+                            onChange={(v) => setFilters({ ...filters, listStatus: v })}
+                            placeholder="全部"
+                            options={[
+                                { label: '全部', value: undefined },
+                                { label: '启用', value: '启用' },
+                                { label: '停用', value: '停用' },
+                            ]}
+                            allowClear
+                        />
+                    </div>
+                    <Space className={styles.filterButtons}>
+                        <Button
+                            type="primary"
+                            icon={<SearchOutlined />}
+                            className="queryBtn"
+                            style={{ backgroundImage: `url(${BtBg1})` }}
+                        >
+                            查询
+                        </Button>
+                        <Button
+                            icon={<ReloadOutlined />}
+                            className="resetBtn"
+                            style={{ backgroundImage: `url(${BtBg2})`, color: 'rgba(0, 102, 101, 1)' }}
+                        >
+                            重置
+                        </Button>
+                    </Space>
+                    <Space className={styles.filterButtonsRight}>
+                        <Button
+                            type="primary"
+                            icon={<PlusOutlined />}
+                            className="addBtn"
+                            style={{ backgroundImage: `url(${BtBg1})` }}
+                        >
+                            新增油检点
+                        </Button>
+                        <Button
+                            icon={<ExportOutlined />}
+                            className="exportBtn"
+                            style={{ backgroundImage: `url(${BtBg2})`, color: 'rgba(0, 102, 101, 1)' }}
+                        >
+                            批量导出
+                        </Button>
+                    </Space>
+                </div>
+                <div className={styles.tableWrapper}>
+                    <StandardTable
+                        rowKey="key"
+                        columns={columns}
+                        data={{
+                            list: tableData,
+                            pagination: {
+                                total: tableData.length,
+                                pageSize: 10,
+                                current: 1,
+                                showTotal: (total) => `共 ${total} 条`,
+                            },
+                        }}
+                        selectionType="checkbox"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AuditDiary;
+
diff --git a/src/pages/business_basic/components/AuditDiary.less b/src/pages/business_basic/components/AuditDiary.less
new file mode 100644
index 0000000..0572631
--- /dev/null
+++ b/src/pages/business_basic/components/AuditDiary.less
@@ -0,0 +1,2 @@
+@import './BasicInfo.less';
+
diff --git a/src/pages/business_basic/components/BusinessAttributeInfo.js b/src/pages/business_basic/components/BusinessAttributeInfo.js
new file mode 100644
index 0000000..e808ea9
--- /dev/null
+++ b/src/pages/business_basic/components/BusinessAttributeInfo.js
@@ -0,0 +1,297 @@
+import React, { useMemo, useState } from 'react';
+import { Form, Input, Select, Space, Button, Switch, message } from 'antd';
+import { PlusOutlined, SearchOutlined, ReloadOutlined, ExportOutlined } from '@ant-design/icons';
+import StandardTable from '@/components/StandardTable';
+import styles from './BusinessAttributeInfo.less';
+import BtBg1 from '@/assets/business_basic/Bt_bg1.png';
+import BtBg2 from '@/assets/business_basic/Bt_bg2.png';
+
+const BusinessAttributeInfo = () => {
+    const [form] = Form.useForm();
+
+    const [filters, setFilters] = useState({
+        listCategory: undefined,
+        listStatus: undefined,
+    });
+
+    const columns = useMemo(() => {
+        return [
+            { title: '油品信息', dataIndex: 'name', key: 'name', width: 180 },
+            { title: '油品分类', dataIndex: 'category', key: 'category', width: 100 },
+            { title: '密度（P15）', dataIndex: 'density', key: 'density', width: 120 },
+            { title: '闪点（℃）', dataIndex: 'flashPoint', key: 'flashPoint', width: 100 },
+            { title: '粘度(MM²/S)', dataIndex: 'viscosity', key: 'viscosity', width: 120 },
+            { title: '硫含量(MG/KG)', dataIndex: 'sulfur', key: 'sulfur', width: 140 },
+            {
+                title: '状态',
+                dataIndex: 'enabled',
+                key: 'enabled',
+                width: 90,
+                render: (val, record) => (
+                    <Switch
+                        size="small"
+                        checked={val}
+                        className="statusSwitch"
+                        onChange={(checked) => {
+                            record.enabled = checked;
+                            message.success(`已${checked ? '启用' : '停用'}`);
+                        }}
+                    />
+                ),
+            },
+            { title: '最后更新', dataIndex: 'updatedAt', key: 'updatedAt', width: 180 },
+            {
+                title: '操作',
+                key: 'action',
+                fixed: 'right',
+                width: 180,
+                render: () => (
+                    <Space size={12}>
+                        <Button type="link" size="small" className="viewDetailBtn">查看详情</Button>
+                        <Button type="link" size="small" className="editBtn">修改</Button>
+                        <Button type="link" size="small" danger className="deleteBtn">删除</Button>
+                    </Space>
+                ),
+            },
+        ];
+    }, []);
+
+    const tableData = [
+        {
+            key: '1',
+            name: '92#汽油P001',
+            category: '汽油',
+            density: '0.852 kg/L',
+            flashPoint: '-43',
+            viscosity: '0.55',
+            sulfur: '10',
+            enabled: true,
+            updatedAt: '2025-10-25 22:30:16',
+        },
+        {
+            key: '2',
+            name: '95#汽油P001',
+            category: '汽油',
+            density: '0.725 kg/L',
+            flashPoint: '-43',
+            viscosity: '0.55',
+            sulfur: '10',
+            enabled: false,
+            updatedAt: '2025-10-25 10:28:14',
+        },
+        {
+            key: '3',
+            name: '0#柴油油P003',
+            category: '柴油',
+            density: '0.832 kg/L',
+            flashPoint: '65',
+            viscosity: '3.0',
+            sulfur: '10',
+            enabled: true,
+            updatedAt: '2025-10-23 20:58:24',
+        },
+        {
+            key: '4',
+            name: '航空煤油P004',
+            category: '航空煤油',
+            density: '0.852 kg/L',
+            flashPoint: '48',
+            viscosity: '1.25',
+            sulfur: '8',
+            enabled: false,
+            updatedAt: '2025-10-23 04:59:13',
+        },
+        {
+            key: '5',
+            name: '测流油P005',
+            category: '测流油',
+            density: '0.876 kg/L',
+            flashPoint: '32',
+            viscosity: '2.00',
+            sulfur: '300',
+            enabled: false,
+            updatedAt: '2025-10-22 03:03:13',
+        },
+    ];
+
+    const onSubmit = () => {
+        form.validateFields().then((values) => {
+            console.log('业务属性提交: ', values);
+            message.success('已保存业务属性信息');
+        });
+    };
+
+    const onReset = () => {
+        form.resetFields();
+        message.info('已重置业务属性信息');
+    };
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.topSection}>
+                <div className={styles.sectionHeader}>
+                    <span className={styles.sectionBar} />
+                    <span className={styles.sectionTitle}>业务33属性</span>
+                </div>
+                <div className={styles.topContent}>
+                    <Form
+                        form={form}
+                        layout="vertical"
+                        className={styles.basicForm}
+                        initialValues={{
+                            productCode: 'GAS-2023-045',
+                            productName: '92号汽油',
+                            category: undefined,
+                            status: undefined,
+                            description: '92号汽油，适用于大多数汽油发动机，具有优良的抗爆性能和清洁性能。',
+                        }}
+                    >
+                        <div className={styles.formLeft}>
+                            <div className={styles.formRow}>
+                                <Form.Item
+                                    label="油品代码（SKU）:"
+                                    name="productCode"
+                                    rules={[{ required: true, message: '请输入油品代码' }]}
+                                >
+                                    <Input placeholder="" />
+                                </Form.Item>
+                                <Form.Item
+                                    label="油品名称:"
+                                    name="productName"
+                                    rules={[{ required: true, message: '请输入油品名称' }]}
+                                >
+                                    <Input placeholder="" />
+                                </Form.Item>
+                            </div>
+                            <div className={styles.formRow}>
+                                <Form.Item label="油品分类:" name="category">
+                                    <Select
+                                        placeholder="请选择"
+                                        allowClear
+                                        options={[
+                                            { label: '汽油', value: '汽油' },
+                                            { label: '柴油', value: '柴油' },
+                                            { label: '航煤', value: '航煤' },
+                                        ]}
+                                    />
+                                </Form.Item>
+                                <Form.Item label="状态:" name="status">
+                                    <Select
+                                        placeholder="请选择"
+                                        allowClear
+                                        options={[
+                                            { label: '启用', value: '启用' },
+                                            { label: '停用', value: '停用' },
+                                        ]}
+                                    />
+                                </Form.Item>
+                            </div>
+                        </div>
+                        <div className={styles.formRight}>
+                            <Form.Item
+                                label="油品描述:"
+                                name="description"
+                                className={styles.descriptionItem}
+                            >
+                                <Input.TextArea rows={6} placeholder="" />
+                            </Form.Item>
+                            <div className={styles.formActions}>
+                                <Button type="primary" onClick={onSubmit}>保存修改</Button>
+                                <Button onClick={onReset}>取消</Button>
+                            </div>
+                        </div>
+                    </Form>
+                </div>
+            </div>
+            <div className={styles.bottomSection}>
+                <div className={styles.sectionHeader}>
+                    <span className={styles.sectionBar} />
+                    <span className={styles.sectionTitle}>油品列表</span>
+                </div>
+                <div className={styles.filterContent}>
+                    <div className={styles.filterItem}>
+                        <span className={styles.filterLabel}>油品分类:</span>
+                        <Select
+                            value={filters.listCategory}
+                            onChange={(v) => setFilters({ ...filters, listCategory: v })}
+                            placeholder="全部"
+                            options={[
+                                { label: '全部', value: undefined },
+                                { label: '汽油', value: '汽油' },
+                                { label: '柴油', value: '柴油' },
+                            ]}
+                            allowClear
+                        />
+                    </div>
+                    <div className={styles.filterItem}>
+                        <span className={styles.filterLabel}>油品状态:</span>
+                        <Select
+                            value={filters.listStatus}
+                            onChange={(v) => setFilters({ ...filters, listStatus: v })}
+                            placeholder="全部"
+                            options={[
+                                { label: '全部', value: undefined },
+                                { label: '启用', value: '启用' },
+                                { label: '停用', value: '停用' },
+                            ]}
+                            allowClear
+                        />
+                    </div>
+                    <Space className={styles.filterButtons}>
+                        <Button
+                            type="primary"
+                            icon={<SearchOutlined />}
+                            className="queryBtn"
+                            style={{ backgroundImage: `url(${BtBg1})` }}
+                        >
+                            查询
+                        </Button>
+                        <Button
+                            icon={<ReloadOutlined />}
+                            className="resetBtn"
+                            style={{ backgroundImage: `url(${BtBg2})`, color: 'rgba(0, 102, 101, 1)' }}
+                        >
+                            重置
+                        </Button>
+                    </Space>
+                    <Space className={styles.filterButtonsRight}>
+                        <Button
+                            type="primary"
+                            icon={<PlusOutlined />}
+                            className="addBtn"
+                            style={{ backgroundImage: `url(${BtBg1})` }}
+                        >
+                            新增油检点
+                        </Button>
+                        <Button
+                            icon={<ExportOutlined />}
+                            className="exportBtn"
+                            style={{ backgroundImage: `url(${BtBg2})`, color: 'rgba(0, 102, 101, 1)' }}
+                        >
+                            批量导出
+                        </Button>
+                    </Space>
+                </div>
+                <div className={styles.tableWrapper}>
+                    <StandardTable
+                        rowKey="key"
+                        columns={columns}
+                        data={{
+                            list: tableData,
+                            pagination: {
+                                total: tableData.length,
+                                pageSize: 10,
+                                current: 1,
+                                showTotal: (total) => `共 ${total} 条`,
+                            },
+                        }}
+                        selectionType="checkbox"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BusinessAttributeInfo;
+
diff --git a/src/pages/business_basic/components/BusinessAttributeInfo.less b/src/pages/business_basic/components/BusinessAttributeInfo.less
new file mode 100644
index 0000000..0572631
--- /dev/null
+++ b/src/pages/business_basic/components/BusinessAttributeInfo.less
@@ -0,0 +1,2 @@
+@import './BasicInfo.less';
+
diff --git a/src/pages/business_basic/components/OilDataManagement.js b/src/pages/business_basic/components/OilDataManagement.js
index 0730150..101ff96 100644
--- a/src/pages/business_basic/components/OilDataManagement.js
+++ b/src/pages/business_basic/components/OilDataManagement.js
@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
-import { Card, Select } from 'antd';
+import { Select } from 'antd';
 import styles from './OilDataManagement.less';
 import BasicInfo from './BasicInfo';
 import PhysChem from './PhysChem';
+import SafetyReasonable from './SafetyReasonable';
+import BusinessAttributeInfo from './BusinessAttributeInfo';
+import AuditDiary from './AuditDiary';
 
 const OilDataManagement = () => {
     // 顶部一行选择：第一个为“基本信息/理化性质”，其余占位
@@ -12,13 +15,38 @@ const OilDataManagement = () => {
     const [fourthMenu, setFourthMenu] = useState(undefined);
     const [fifthMenu, setFifthMenu] = useState(undefined);
 
+    const firstMenuLabelMap = {
+        basic: '基本信息',
+        physchem: '理化性质',
+        safety: '安全与合理',
+        business: '业务属性',
+        audit: '审计日记',
+    };
+
+    const renderFirstMenuContent = () => {
+        switch (firstMenu) {
+            case 'basic':
+                return <BasicInfo />;
+            case 'physchem':
+                return <PhysChem />;
+            case 'safety':
+                return <SafetyReasonable />;
+            case 'business':
+                return <BusinessAttributeInfo />;
+            case 'audit':
+                return <AuditDiary />;
+            default:
+                return null;
+        }
+    };
+
     return (
         <div className={styles.container}>
             <div className={styles.topBar}>
                 <div
                     className={styles.currentLabel}
                 >
-                    当前：{firstMenu === 'basic' ? '基本信息' : '理化性质'}
+                    当前：{firstMenuLabelMap[firstMenu] || '未选择'}
                 </div>
                 <div className={styles.selectsWrapper}>
                     <Select
@@ -28,6 +56,9 @@ const OilDataManagement = () => {
                         options={[
                             { label: '基本信息', value: 'basic' },
                             { label: '理化性质', value: 'physchem' },
+                            { label: '安全与合理', value: 'safety' },
+                            { label: '业务属性', value: 'business' },
+                            { label: '审计日记', value: 'audit' },
                         ]}
                     />
                     <Select
@@ -65,7 +96,7 @@ const OilDataManagement = () => {
                 </div>
             </div>
 
-            {firstMenu === 'basic' ? <BasicInfo /> : <PhysChem />}
+            {renderFirstMenuContent()}
         </div>
     );
 };
diff --git a/src/pages/business_basic/components/PhysChem.js b/src/pages/business_basic/components/PhysChem.js
index 92bf226..0c6c7b8 100644
--- a/src/pages/business_basic/components/PhysChem.js
+++ b/src/pages/business_basic/components/PhysChem.js
@@ -232,8 +232,6 @@ const PhysChem = () => {
                         </div>
                     </Form>
                 </div>
-
-                
             </div>
 
 
diff --git a/src/pages/business_basic/components/SafetyReasonable.js b/src/pages/business_basic/components/SafetyReasonable.js
new file mode 100644
index 0000000..656f4f4
--- /dev/null
+++ b/src/pages/business_basic/components/SafetyReasonable.js
@@ -0,0 +1,297 @@
+import React, { useMemo, useState } from 'react';
+import { Form, Input, Select, Space, Button, Switch, message } from 'antd';
+import { PlusOutlined, SearchOutlined, ReloadOutlined, ExportOutlined } from '@ant-design/icons';
+import StandardTable from '@/components/StandardTable';
+import styles from './SafetyReasonable.less';
+import BtBg1 from '@/assets/business_basic/Bt_bg1.png';
+import BtBg2 from '@/assets/business_basic/Bt_bg2.png';
+
+const SafetyReasonable = () => {
+    const [form] = Form.useForm();
+
+    const [filters, setFilters] = useState({
+        listCategory: undefined,
+        listStatus: undefined,
+    });
+
+    const columns = useMemo(() => {
+        return [
+            { title: '油品信息', dataIndex: 'name', key: 'name', width: 180 },
+            { title: '油品分类', dataIndex: 'category', key: 'category', width: 100 },
+            { title: '密度（P15）', dataIndex: 'density', key: 'density', width: 120 },
+            { title: '闪点（℃）', dataIndex: 'flashPoint', key: 'flashPoint', width: 100 },
+            { title: '粘度(MM²/S)', dataIndex: 'viscosity', key: 'viscosity', width: 120 },
+            { title: '硫含量(MG/KG)', dataIndex: 'sulfur', key: 'sulfur', width: 140 },
+            {
+                title: '状态',
+                dataIndex: 'enabled',
+                key: 'enabled',
+                width: 90,
+                render: (val, record) => (
+                    <Switch
+                        size="small"
+                        checked={val}
+                        className="statusSwitch"
+                        onChange={(checked) => {
+                            record.enabled = checked;
+                            message.success(`已${checked ? '启用' : '停用'}`);
+                        }}
+                    />
+                ),
+            },
+            { title: '最后更新', dataIndex: 'updatedAt', key: 'updatedAt', width: 180 },
+            {
+                title: '操作',
+                key: 'action',
+                fixed: 'right',
+                width: 180,
+                render: () => (
+                    <Space size={12}>
+                        <Button type="link" size="small" className="viewDetailBtn">查看详情</Button>
+                        <Button type="link" size="small" className="editBtn">修改</Button>
+                        <Button type="link" size="small" danger className="deleteBtn">删除</Button>
+                    </Space>
+                ),
+            },
+        ];
+    }, []);
+
+    const tableData = [
+        {
+            key: '1',
+            name: '92#汽油P001',
+            category: '汽油',
+            density: '0.852 kg/L',
+            flashPoint: '-43',
+            viscosity: '0.55',
+            sulfur: '10',
+            enabled: true,
+            updatedAt: '2025-10-25 22:30:16',
+        },
+        {
+            key: '2',
+            name: '95#汽油P001',
+            category: '汽油',
+            density: '0.725 kg/L',
+            flashPoint: '-43',
+            viscosity: '0.55',
+            sulfur: '10',
+            enabled: false,
+            updatedAt: '2025-10-25 10:28:14',
+        },
+        {
+            key: '3',
+            name: '0#柴油油P003',
+            category: '柴油',
+            density: '0.832 kg/L',
+            flashPoint: '65',
+            viscosity: '3.0',
+            sulfur: '10',
+            enabled: true,
+            updatedAt: '2025-10-23 20:58:24',
+        },
+        {
+            key: '4',
+            name: '航空煤油P004',
+            category: '航空煤油',
+            density: '0.852 kg/L',
+            flashPoint: '48',
+            viscosity: '1.25',
+            sulfur: '8',
+            enabled: false,
+            updatedAt: '2025-10-23 04:59:13',
+        },
+        {
+            key: '5',
+            name: '测流油P005',
+            category: '测流油',
+            density: '0.876 kg/L',
+            flashPoint: '32',
+            viscosity: '2.00',
+            sulfur: '300',
+            enabled: false,
+            updatedAt: '2025-10-22 03:03:13',
+        },
+    ];
+
+    const onSubmit = () => {
+        form.validateFields().then((values) => {
+            console.log('安全与合理提交: ', values);
+            message.success('已保存安全与合理信息');
+        });
+    };
+
+    const onReset = () => {
+        form.resetFields();
+        message.info('已重置安全与合理信息');
+    };
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.topSection}>
+                <div className={styles.sectionHeader}>
+                    <span className={styles.sectionBar} />
+                    <span className={styles.sectionTitle}>安全与合理</span>
+                </div>
+                <div className={styles.topContent}>
+                    <Form
+                        form={form}
+                        layout="vertical"
+                        className={styles.basicForm}
+                        initialValues={{
+                            productCode: 'GAS-2023-045',
+                            productName: '92号汽油',
+                            category: undefined,
+                            status: undefined,
+                            description: '92号汽油，适用于大多数汽油发动机，具有优良的抗爆性能和清洁性能。',
+                        }}
+                    >
+                        <div className={styles.formLeft}>
+                            <div className={styles.formRow}>
+                                <Form.Item
+                                    label="油品代码（SKU）:"
+                                    name="productCode"
+                                    rules={[{ required: true, message: '请输入油品代码' }]}
+                                >
+                                    <Input placeholder="" />
+                                </Form.Item>
+                                <Form.Item
+                                    label="油品名称:"
+                                    name="productName"
+                                    rules={[{ required: true, message: '请输入油品名称' }]}
+                                >
+                                    <Input placeholder="" />
+                                </Form.Item>
+                            </div>
+                            <div className={styles.formRow}>
+                                <Form.Item label="油品分类:" name="category">
+                                    <Select
+                                        placeholder="请选择"
+                                        allowClear
+                                        options={[
+                                            { label: '汽油', value: '汽油' },
+                                            { label: '柴油', value: '柴油' },
+                                            { label: '航煤', value: '航煤' },
+                                        ]}
+                                    />
+                                </Form.Item>
+                                <Form.Item label="状态:" name="status">
+                                    <Select
+                                        placeholder="请选择"
+                                        allowClear
+                                        options={[
+                                            { label: '启用', value: '启用' },
+                                            { label: '停用', value: '停用' },
+                                        ]}
+                                    />
+                                </Form.Item>
+                            </div>
+                        </div>
+                        <div className={styles.formRight}>
+                            <Form.Item
+                                label="油品描述:"
+                                name="description"
+                                className={styles.descriptionItem}
+                            >
+                                <Input.TextArea rows={6} placeholder="" />
+                            </Form.Item>
+                            <div className={styles.formActions}>
+                                <Button type="primary" onClick={onSubmit}>保存修改</Button>
+                                <Button onClick={onReset}>取消</Button>
+                            </div>
+                        </div>
+                    </Form>
+                </div>
+            </div>
+            <div className={styles.bottomSection}>
+                <div className={styles.sectionHeader}>
+                    <span className={styles.sectionBar} />
+                    <span className={styles.sectionTitle}>油品列表</span>
+                </div>
+                <div className={styles.filterContent}>
+                    <div className={styles.filterItem}>
+                        <span className={styles.filterLabel}>油品分类:</span>
+                        <Select
+                            value={filters.listCategory}
+                            onChange={(v) => setFilters({ ...filters, listCategory: v })}
+                            placeholder="全部"
+                            options={[
+                                { label: '全部', value: undefined },
+                                { label: '汽油', value: '汽油' },
+                                { label: '柴油', value: '柴油' },
+                            ]}
+                            allowClear
+                        />
+                    </div>
+                    <div className={styles.filterItem}>
+                        <span className={styles.filterLabel}>油品状态:</span>
+                        <Select
+                            value={filters.listStatus}
+                            onChange={(v) => setFilters({ ...filters, listStatus: v })}
+                            placeholder="全部"
+                            options={[
+                                { label: '全部', value: undefined },
+                                { label: '启用', value: '启用' },
+                                { label: '停用', value: '停用' },
+                            ]}
+                            allowClear
+                        />
+                    </div>
+                    <Space className={styles.filterButtons}>
+                        <Button
+                            type="primary"
+                            icon={<SearchOutlined />}
+                            className="queryBtn"
+                            style={{ backgroundImage: `url(${BtBg1})` }}
+                        >
+                            查询
+                        </Button>
+                        <Button
+                            icon={<ReloadOutlined />}
+                            className="resetBtn"
+                            style={{ backgroundImage: `url(${BtBg2})`, color: 'rgba(0, 102, 101, 1)' }}
+                        >
+                            重置
+                        </Button>
+                    </Space>
+                    <Space className={styles.filterButtonsRight}>
+                        <Button
+                            type="primary"
+                            icon={<PlusOutlined />}
+                            className="addBtn"
+                            style={{ backgroundImage: `url(${BtBg1})` }}
+                        >
+                            新增油检点
+                        </Button>
+                        <Button
+                            icon={<ExportOutlined />}
+                            className="exportBtn"
+                            style={{ backgroundImage: `url(${BtBg2})`, color: 'rgba(0, 102, 101, 1)' }}
+                        >
+                            批量导出
+                        </Button>
+                    </Space>
+                </div>
+                <div className={styles.tableWrapper}>
+                    <StandardTable
+                        rowKey="key"
+                        columns={columns}
+                        data={{
+                            list: tableData,
+                            pagination: {
+                                total: tableData.length,
+                                pageSize: 10,
+                                current: 1,
+                                showTotal: (total) => `共 ${total} 条`,
+                            },
+                        }}
+                        selectionType="checkbox"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SafetyReasonable;
+
diff --git a/src/pages/business_basic/components/SafetyReasonable.less b/src/pages/business_basic/components/SafetyReasonable.less
new file mode 100644
index 0000000..0572631
--- /dev/null
+++ b/src/pages/business_basic/components/SafetyReasonable.less
@@ -0,0 +1,2 @@
+@import './BasicInfo.less';
+