From 9d3814cbf0837920937e8c60a0cafbfb92423988 Mon Sep 17 00:00:00 2001
From: zjlnb666 <14659021+zhangjianlong666@user.noreply.gitee.com>
Date: Fri, 14 Nov 2025 11:46:02 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E4=BA=A7=E5=88=86=E7=BB=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AssetGrouping.js                          | 283 ++++++++++++++++--
 .../AssetGrouping.less                        |  31 ++
 2 files changed, 291 insertions(+), 23 deletions(-)
 create mode 100644 src/pages/assetmangement_assetgrouping/AssetGrouping.less

diff --git a/src/pages/assetmangement_assetgrouping/AssetGrouping.js b/src/pages/assetmangement_assetgrouping/AssetGrouping.js
index e1c598d..7ccdfaa 100644
--- a/src/pages/assetmangement_assetgrouping/AssetGrouping.js
+++ b/src/pages/assetmangement_assetgrouping/AssetGrouping.js
@@ -1,29 +1,242 @@
-import {Col, Row, Tree} from "antd";
+import {Col, Form, Row, Select, Tree, Input, Button, Pagination, Space, Table} from "antd";
 import Title from '../homepage/compontent/title'
+import styles from '../assetmangement_assetgrouping/AssetGrouping.less'
+import {PlusOutlined, SearchOutlined, SyncOutlined} from "@ant-design/icons";
+import {useState} from "react";
+const {Search} = Input
+
+const mockData = [
+    {
+        groupId: 'GRP-001',
+        groupName: '集团总部资产组',
+        groupLevel: '一级',
+        parentGroup: '--',
+        assetCount: 1200,
+        permissionStrategy: '管理员',
+        managementStrategy: '全权限管理+策略继承',
+        createTime: '2025-10-01',
+    },
+    {
+        groupId: 'GRP-001-1',
+        groupName: '研发中心分部',
+        groupLevel: '二级',
+        parentGroup: '集团总部资产组',
+        assetCount: 500,
+        permissionStrategy: '编辑',
+        managementStrategy: '自定义维保策略',
+        createTime: '2025-10-02',
+    },
+    {
+        groupId: 'GRP-001-2',
+        groupName: '生产车间分部',
+        groupLevel: '二级',
+        parentGroup: '集团总部资产组',
+        assetCount: 700,
+        permissionStrategy: '编辑',
+        managementStrategy: '设备巡检策略',
+        createTime: '2025-10-02',
+    },
+    {
+        groupId: 'GRP-001-1-1',
+        groupName: '研发传感器组',
+        groupLevel: '三级',
+        parentGroup: '研发中心分部',
+        assetCount: 200,
+        permissionStrategy: '查看',
+        managementStrategy: '数据采集策略',
+        createTime: '2025-10-03',
+    },
+    {
+        groupId: 'GRP-001-1-2',
+        groupName: '研发服务器组',
+        groupLevel: '三级',
+        parentGroup: '研发中心分部',
+        assetCount: 300,
+        permissionStrategy: '编辑',
+        managementStrategy: '集群管理策略',
+        createTime: '2025-10-03',
+    },
+    {
+        groupId: 'GRP-001-2-1',
+        groupName: '车间产线设备组',
+        groupLevel: '三级',
+        parentGroup: '生产车间分部',
+        assetCount: 400,
+        permissionStrategy: '编辑',
+        managementStrategy: '产线联动策略',
+        createTime: '2025-10-04',
+    },
+    {
+        groupId: 'GRP-001-2-2',
+        groupName: '车间环境监测组',
+        groupLevel: '三级',
+        parentGroup: '生产车间分部',
+        assetCount: 300,
+        permissionStrategy: '查看',
+        managementStrategy: '环境告警策略',
+        createTime: '2025-10-04',
+    },
+];
+const AssetGroupTable=()=>{
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10); // 可根据需求调整默认每页条数
+
+    // 表格列配置
+    const columns = [
+        {
+            title: '分组ID',
+            dataIndex: 'groupId',
+            key: 'groupId',
+        },
+        {
+            title: '分组名称',
+            dataIndex: 'groupName',
+            key: 'groupName',
+        },
+        {
+            title: '分组层级',
+            dataIndex: 'groupLevel',
+            key: 'groupLevel',
+        },
+        {
+            title: '父分组',
+            dataIndex: 'parentGroup',
+            key: 'parentGroup',
+        },
+        {
+            title: '资产数量',
+            dataIndex: 'assetCount',
+            key: 'assetCount',
+        },
+        {
+            title: '权限策略',
+            dataIndex: 'permissionStrategy',
+            key: 'permissionStrategy',
+        },
+        {
+            title: '管理策略',
+            dataIndex: 'managementStrategy',
+            key: 'managementStrategy',
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            key: 'createTime',
+        },
+        {
+            title: '操作',
+            key: 'action',
+            render: (_, record) => (
+                <Space size="middle">
+                    <Button type="text" onClick={() => handleEdit(record)}>编辑</Button>
+                    <Button type="text" onClick={() => handlePermissionConfig(record)}>权限配置</Button>
+                    <Button type="text" onClick={() => handleViewAsset(record)}>查看资产</Button>
+                </Space>
+            ),
+            align:'center'
+        },
+    ];
+
+    // 行选择回调
+    const onSelectChange = (selectedKeys) => {
+        setSelectedRowKeys(selectedKeys);
+    };
+
+    // 分页回调
+    const onPageChange = (page) => {
+        setCurrentPage(page);
+        // 对接接口：请求第page页数据
+        fetchAssetGroupData(page, pageSize);
+    };
+
+    const onPageSizeChange = (current, size) => {
+        setCurrentPage(current);
+        setPageSize(size);
+        // 对接接口：请求第current页、每页size条数据
+        fetchAssetGroupData(current, size);
+    };
+
+    // 模拟接口请求函数（实际开发中替换为真实接口调用）
+    const fetchAssetGroupData = (page, size) => {
+        console.log(`请求第${page}页，每页${size}条数据`);
+        // 这里写axios/fetch等请求逻辑，例如：
+        // axios.get('/api/asset-group', { params: { page, size } }).then(res => {
+        //   setTableData(res.data.list);
+        //   setTotal(res.data.total);
+        // });
+    };
+
+    // 编辑操作（预留逻辑）
+    const handleEdit = (record) => {
+        console.log('编辑', record);
+    };
+
+    // 权限配置操作（预留逻辑）
+    const handlePermissionConfig = (record) => {
+        console.log('权限配置', record);
+    };
+
+    // 查看资产操作（预留逻辑）
+    const handleViewAsset = (record) => {
+        console.log('查看资产', record);
+    };
+
+    const rowSelection = {
+        selectedRowKeys,
+        onChange: onSelectChange,
+    };
+    return (
+        <div style={{width:'100%'}}>
+            <Table
+                rowSelection={rowSelection}
+                columns={columns}
+                dataSource={mockData} // 实际场景中替换为接口返回的dataSource
+                rowKey="groupId"
+                pagination={false} // 关闭表格自带分页，使用外部Pagination组件
+                style={{width:'100%'}}
+            />
+            <div style={{textAlign: 'right', marginTop: 16}}>
+                <Pagination
+                    current={currentPage}
+                    pageSize={pageSize}
+                    total={mockData.length} // 实际场景中替换为接口返回的total
+                    onChange={onPageChange}
+                    onShowSizeChange={onPageSizeChange}
+                    showSizeChanger
+                    pageSizeOptions={['5', '10', '20', '50']}
+                    showTotal={(total) => `共 ${total} 条记录`}
+                />
+            </div>
+        </div>
+    )
+}
+
+
 const AssetGrouping = () => {
     const treeData = [
         {
-          title: '集团总部资产组 (1200)',
-          key: '0-0',
-          children: [
-              {
-                  title: '研发中心分部 (500)',
-                  key: '0-0-0',
-                  children: [
-                      {
-                          title: '研发传感器组 (200)',
-                          key: '0-0-0-0',
-                      },
-                      {
-                          title: '研发服务器组 (300)',
-                          key: '0-0-0-1',
-                      },
-                  ]
-              },
-              {
+            title: '集团总部资产组 (1200)',
+            key: '0-0',
+            children: [
+                {
+                    title: '研发中心分部 (500)',
+                    key: '0-0-0',
+                    children: [
+                        {
+                            title: '研发传感器组 (200)',
+                            key: '0-0-0-0',
+                        },
+                        {
+                            title: '研发服务器组 (300)',
+                            key: '0-0-0-1',
+                        },
+                    ]
+                },
+                {
 
-                  title: '生产车间分部 (700)',
-                  key: '0-0-1',
+                    title: '生产车间分部 (700)',
+                    key: '0-0-1',
                   children:[
                       {
                           title: '车间产线设备组 (400)',
@@ -40,7 +253,7 @@ const AssetGrouping = () => {
       ];
   return (
     <div style={{padding:'20px'}}>
-        <Row>
+        <Row gutter={16}>
             <Col span={5}>
                 <div style={{height:'100%',backgroundColor:'rgb(234, 245, 241)',padding:'20px'}}>
                     <Title title={'分组'}></Title>
@@ -58,7 +271,31 @@ const AssetGrouping = () => {
                 </div>
             </Col>
             <Col span={19}>
-
+                <Title title={'查询条件'}></Title>
+                <Row style={{marginTop:'20px',paddingBottom:'20px',borderBottom:'1px solid #eeeeee'}}>
+                    <Search placeholder="分组名称、分组 ID" style={{width:'291px',marginRight:'30px'}}></Search>
+                    <Button icon={<SearchOutlined></SearchOutlined>} className={styles['search-button']} style={{marginRight:'30px'}}>查询</Button>
+                    <Button icon={<SyncOutlined></SyncOutlined>} className={styles['reset-button']}>重置</Button>
+                </Row>
+                <Row style={{marginTop:'20px'}}>
+                    <div style={{flex:'1'}}>
+                        <Title title={'资产列表'}></Title>
+                        <Row justify={'space-between'} style={{marginTop:'20px'}}>
+                            <Col>
+                                <Button style={{marginRight:'30px'}} className={styles['search-button']}>导出分组结构</Button>
+                                <Button style={{marginRight:'30px'}} className={styles['reset-button']}>策略模板管理</Button>
+                                <Button style={{marginRight:'30px'}} className={styles['del-button']}>删除</Button>
+                            </Col>
+                            <Col>
+                                <Button style={{marginRight:'30px'}} className={styles['reset-button']}>权限配置</Button>
+                                <Button icon={<PlusOutlined></PlusOutlined>} className={styles['search-button']}>新增分组</Button>
+                            </Col>
+                        </Row>
+                    </div>
+                </Row>
+                <Row style={{marginTop:'20px'}}>
+                    <AssetGroupTable ></AssetGroupTable>
+                </Row>
             </Col>
         </Row>
     </div>
diff --git a/src/pages/assetmangement_assetgrouping/AssetGrouping.less b/src/pages/assetmangement_assetgrouping/AssetGrouping.less
new file mode 100644
index 0000000..86b36d2
--- /dev/null
+++ b/src/pages/assetmangement_assetgrouping/AssetGrouping.less
@@ -0,0 +1,31 @@
+.search-button{
+  background-image: url('../../assets/img/assetmangement1.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position:center;
+  color: #fff;
+  border-radius: 4px;
+  height: 36px;
+  border-color:#d9d9d9 ;
+}
+.reset-button{
+  background-image: url('../../assets/img/assetmangement2.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position:center;
+  color: rgba(0, 102, 101, 1);
+  border-radius: 4px;
+  height: 36px;
+  border-color:#d9d9d9 ;
+}
+.del-button{
+  background-image: url('../../assets/img/assetmangement3.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position:center;
+  color: #000;
+  border-radius: 4px;
+  height: 36px;
+  width:88px;
+  border-color:#d9d9d9 ;
+}