From 571efe96cb367a0b706b9893cc6958d6ebc2d9e1 Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Wed, 26 Nov 2025 16:40:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BasicAttribute.js                         | 175 +++++++++++++++++-
 .../BasicAttribute.less                       | 163 +++++++++++++++-
 2 files changed, 335 insertions(+), 3 deletions(-)

diff --git a/src/pages/business_basic/components/second_datamodel_components/BasicAttribute.js b/src/pages/business_basic/components/second_datamodel_components/BasicAttribute.js
index 7f1d3c1..e31b727 100644
--- a/src/pages/business_basic/components/second_datamodel_components/BasicAttribute.js
+++ b/src/pages/business_basic/components/second_datamodel_components/BasicAttribute.js
@@ -1,10 +1,181 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Select, Tree } from 'antd';
 import styles from './BasicAttribute.less';
 
+const buildingOptions = [
+    { label: '工厂建筑', value: 'plant' },
+    { label: '仓储设施', value: 'warehouse' },
+];
+
+const factoryOptions = [
+    { label: '全部工厂', value: 'all' },
+    { label: '上海油库', value: 'shanghai' },
+    { label: '南京油库', value: 'nanjing' },
+];
+
+const treeData = [
+    {
+        title: '上海油库',
+        key: 'shanghai',
+        children: [
+            {
+                title: '汽油罐区',
+                key: 'gasoline-area',
+                children: [
+                    {
+                        title: '汽油调合罐组',
+                        key: 'blend-group',
+                        children: [
+                            {
+                                title: 'T-101 汽油储罐',
+                                key: 't101',
+                                children: [
+                                    { title: 'LT-101 液位变送器', key: 'lt101' },
+                                    { title: 'TT-101 温度变送器', key: 'tt101' },
+                                    { title: 'PT-101 压力变送器', key: 'pt101' },
+                                    { title: 'P-101A 输送泵', key: 'p101a' },
+                                    { title: 'P-101B 输送泵', key: 'p101b' },
+                                    { title: 'SP-101 密度计', key: 'sp101' },
+                                ],
+                            },
+                            { title: 'T-102 汽油储罐', key: 't102' },
+                            { title: 'T-103 汽油储罐', key: 't103' },
+                        ],
+                    },
+                ],
+            },
+            {
+                title: '柴油罐区',
+                key: 'diesel-area',
+            },
+            {
+                title: '化危品库',
+                key: 'hazard',
+            },
+        ],
+    },
+];
+
+const infoCards = [
+    {
+        title: '基本信息',
+        items: [
+            { label: '储罐编号', value: 'T-101' },
+            { label: '设备名称', value: '汽油储罐' },
+            { label: '所属园区', value: '汽油罐区' },
+            { label: '所属罐组', value: '汽油调合罐组' },
+            { label: '用途类型', value: '常规罐' },
+            { label: '投用日期', value: '2020-05-18' },
+            { label: '状态', value: '在用' },
+        ],
+    },
+    {
+        title: '结构参数',
+        items: [
+            { label: '几何容量', value: '5000 m³' },
+            { label: '安全液位', value: '90%' },
+            { label: '紧急高液位', value: '95%' },
+            { label: '紧急低液位', value: '5%' },
+            { label: '罐底留存量', value: '50 m³' },
+            { label: '容积表 ID', value: 'VOL-T-101-2020' },
+            { label: '罐顶类型', value: '浮顶' },
+        ],
+    },
+    {
+        title: '设备属性',
+        items: [
+            { label: '材质', value: 'Q235B 碳钢' },
+            { label: '设计压力', value: '0.6 MPa' },
+            { label: '设计温度', value: '-10 ~ 60 ℃' },
+            { label: '直径', value: '22 m' },
+            { label: '高度', value: '13.5 m' },
+            { label: '防腐等级', value: 'C4' },
+        ],
+    },
+    {
+        title: '关联信息',
+        items: [
+            { label: '进油管线', value: ['P-1010', 'P-1011'], type: 'tags' },
+            { label: '出油管线', value: ['P-1020', 'P-1021', 'P-1022'], type: 'tags' },
+            { label: '配套泵', value: ['P-101A', 'P-101B'], type: 'tags' },
+            { label: '测量点', value: ['SP-101'], type: 'tags' },
+            { label: '安全联锁', value: ['高液位联锁关闭进口阀'], type: 'tags' },
+        ],
+    },
+];
+
 const BasicAttribute = () => {
+    const [buildingType, setBuildingType] = useState('plant');
+    const [factory, setFactory] = useState('all');
+
     return (
         <div className={styles.container}>
-            <div>待开发</div>
+            <section className={styles.leftPanel}>
+                <div className={styles.blockHeader}>
+                    <span className={styles.titleIcon} />
+                    <span className={styles.blockTitle}>工厂层级结构</span>
+                </div>
+                <div className={styles.filters}>
+                    <Select
+                        value={buildingType}
+                        onChange={setBuildingType}
+                        options={buildingOptions}
+                        className={styles.filterSelect}
+                        dropdownMatchSelectWidth={false}
+                        size="small"
+                    />
+                    <Select
+                        value={factory}
+                        onChange={setFactory}
+                        options={factoryOptions}
+                        className={styles.filterSelect}
+                        dropdownMatchSelectWidth={false}
+                        size="small"
+                    />
+                </div>
+                <div className={styles.treeWrapper}>
+                    <Tree
+                        showIcon={false}
+                        defaultExpandAll
+                        treeData={treeData}
+                        className={styles.tree}
+                    />
+                </div>
+            </section>
+
+            <section className={styles.rightPanel}>
+                <div className={styles.blockHeader}>
+                    <span className={styles.titleIcon} />
+                    <span className={styles.blockTitle}>基本属性</span>
+                </div>
+                <div className={styles.infoGrid}>
+                    {infoCards.map(card => (
+                        <div className={styles.infoCard} key={card.title}>
+                            <div className={styles.cardTitle}>{card.title}</div>
+                            <div className={styles.cardBody}>
+                                {card.items.map(item => (
+                                    <div className={styles.itemRow} key={`${card.title}-${item.label}`}>
+                                        <span className={styles.itemLabel}>{item.label}</span>
+                                        <span className={styles.itemValue}>
+                                            {item.type === 'tags' && Array.isArray(item.value) ? (
+                                                <span className={styles.tagList}>
+                                                    {item.value.map(tag => (
+                                                        <span className={styles.tag} key={tag}>
+                                                            {tag}
+                                                        </span>
+                                                    ))}
+                                                </span>
+                                            ) : (
+                                                item.value
+                                            )}
+                                        </span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </section>
         </div>
     );
 };
diff --git a/src/pages/business_basic/components/second_datamodel_components/BasicAttribute.less b/src/pages/business_basic/components/second_datamodel_components/BasicAttribute.less
index b4d4d98..0a7c99d 100644
--- a/src/pages/business_basic/components/second_datamodel_components/BasicAttribute.less
+++ b/src/pages/business_basic/components/second_datamodel_components/BasicAttribute.less
@@ -1,4 +1,165 @@
 .container {
-    padding: 20px;
+    display: flex;
+    gap: 16px;
+    padding: 16px;
+    background-color: #f6f8fb;
+    border-radius: 12px;
+    min-height: 520px;
+
+    .leftPanel {
+        flex: 0 0 320px;
+        background: #fff;
+        border-radius: 12px;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        box-shadow: 0 4px 20px rgba(21, 32, 66, 0.04);
+    }
+
+    .rightPanel {
+        flex: 1;
+        background: #fff;
+        border-radius: 12px;
+        padding: 20px;
+        box-shadow: 0 4px 20px rgba(21, 32, 66, 0.04);
+        display: flex;
+        flex-direction: column;
+    }
+
+    .blockHeader {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 16px;
+
+        .titleIcon {
+            width: 3px;
+            height: 16px;
+            border-radius: 2px;
+            background: linear-gradient(180deg, #21c6b7 0%, #0c8dff 100%);
+            display: inline-block;
+        }
+
+        .blockTitle {
+            font-size: 16px;
+            font-weight: 600;
+            color: #1f2f3d;
+        }
+    }
+
+    .filters {
+        display: flex;
+        gap: 12px;
+        margin-bottom: 16px;
+
+        .filterSelect {
+            width: 100%;
+        }
+    }
+
+    .treeWrapper {
+        flex: 1;
+        overflow: auto;
+        background: #f8fafc;
+        border-radius: 12px;
+        padding: 12px;
+        border: 1px solid #e4e9f2;
+
+        .tree :global(.ant-tree-node-content-wrapper) {
+            font-size: 13px;
+            padding: 4px 8px;
+        }
+
+        .tree :global(.ant-tree-switcher) {
+            width: 18px;
+        }
+    }
+
+    .infoGrid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 16px;
+        margin-top: 8px;
+
+        .infoCard {
+            background: #f8fafc;
+            border-radius: 12px;
+            padding: 16px;
+            border: 1px solid #e4e9f2;
+            min-height: 220px;
+
+            .cardTitle {
+                font-size: 15px;
+                font-weight: 600;
+                color: #1f2f3d;
+                margin-bottom: 12px;
+            }
+
+            .cardBody {
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+
+                .itemRow {
+                    display: flex;
+                    gap: 12px;
+                    align-items: flex-start;
+                    font-size: 13px;
+                    color: #4f5e6f;
+
+                    .itemLabel {
+                        width: 90px;
+                        color: #7d8a99;
+                    }
+
+                    .itemValue {
+                        flex: 1;
+                        color: #1f2f3d;
+                        font-weight: 500;
+
+                        .tagList {
+                            display: flex;
+                            flex-wrap: wrap;
+                            gap: 8px;
+
+                            .tag {
+                                display: inline-flex;
+                                align-items: center;
+                                padding: 2px 10px;
+                                border-radius: 999px;
+                                background: rgba(12, 141, 255, 0.08);
+                                color: #0c8dff;
+                                font-size: 12px;
+                                font-weight: 500;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
+.tree :global(.ant-tree-node-content-wrapper) {
+    font-size: 13px;
+    padding: 4px 8px;
+}
+
+.tree :global(.ant-tree-switcher) {
+    width: 18px;
+}
+
+// @media (max-width: 1400px) {
+//     .container {
+//         flex-direction: column;
+
+//         .leftPanel {
+//             flex: none;
+//             width: 100%;
+//         }
+
+//         .infoGrid {
+//             grid-template-columns: 1fr;
+//         }
+//     }
+// }