From e4eeefc2750f8f70cf179ebdd9213d863b9434ac Mon Sep 17 00:00:00 2001 From: zjlnb666 <14659021+zhangjianlong666@user.noreply.gitee.com> Date: Wed, 19 Nov 2025 15:40:12 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/routes.js | 12 + package.json | 2 +- src/assets/img/asset-main1.svg | 58 +++ src/components/assetmangement/table.js | 122 +++++ .../AssetDefined.js | 432 ++++++++++++++++++ .../AssetDefined.less | 34 ++ .../AssetGrouping.js | 66 ++- .../AssetGrouping.less | 6 + .../assetmangement_assetlist/AssetList.less | 5 + .../compontent/table.js | 2 + .../assetmangement_maintenance/Maintenance.js | 174 +++++++ .../Maintenance.less | 82 ++++ .../assetmangement_maintenance/untitled-1.txt | 17 + .../nav_system_content/SystemContentList.js | 13 +- src/pages/topnavbar/TopNavBar.js | 37 +- 15 files changed, 1056 insertions(+), 6 deletions(-) create mode 100644 src/assets/img/asset-main1.svg create mode 100644 src/components/assetmangement/table.js create mode 100644 src/pages/assetmangement_assetdefined/AssetDefined.js create mode 100644 src/pages/assetmangement_assetdefined/AssetDefined.less create mode 100644 src/pages/assetmangement_maintenance/Maintenance.js create mode 100644 src/pages/assetmangement_maintenance/Maintenance.less create mode 100644 src/pages/assetmangement_maintenance/untitled-1.txt diff --git a/config/routes.js b/config/routes.js index 0a5b305..a970a4c 100644 --- a/config/routes.js +++ b/config/routes.js @@ -52,6 +52,18 @@ export default [ name: 'assetlist', component: './assetmangement_assetgrouping/AssetGrouping', }, + // 资产属性定义 + { + path: '/topnavbar00/business/assetmanagement/assetdefined', + name: 'assetdefined', + component: './assetmangement_assetdefined/AssetDefined', + }, + // 资产维保管理 + { + path: '/topnavbar00/business/assetmanagement/maintenance', + name: 'maintenance', + component: './assetmangement_maintenance/Maintenance', + }, ] } ], diff --git a/package.json b/package.json index 52c1208..63a8c95 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "dependencies": { "@ant-design/icons": "^4.8.0", "@umijs/max": "^4.0.70", - "antd": "5.6.0", + "antd": "5.10.0", "braft-editor": "^2.3.9", "braft-finder": "^0.0.21", "braft-utils": "^3.0.2", diff --git a/src/assets/img/asset-main1.svg b/src/assets/img/asset-main1.svg new file mode 100644 index 0000000..df954c6 --- /dev/null +++ b/src/assets/img/asset-main1.svg @@ -0,0 +1,58 @@ + + + + + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/assetmangement/table.js b/src/components/assetmangement/table.js new file mode 100644 index 0000000..b7ea503 --- /dev/null +++ b/src/components/assetmangement/table.js @@ -0,0 +1,122 @@ +import {Pagination, Table} from "antd"; +import {useEffect, useState} from "react"; + +const TableWithPagination = ({ + columns, // 表格列配置（必需） + dataSource: externalDataSource, // 外部传入的静态数据（可选，与 fetchData 二选一） + fetchData, // 外部传入的动态请求函数（可选） + paginationProps = { + total: 0, + defaultPageSize: 5, + pageSizeOptions: ["5", "10", "20", "50"], + }, // 分页参数（可选，带默认值） + rowSelection = false, // 是否显示复选框（默认 false） + tableStyle = {}, // 表格样式（可选） + paginationStyle = {}, // 分页组件样式（可选） + rowKey = "key", // 行唯一标识（默认 'key'） +}) => { + const [currentPage, setCurrentPage] = useState(1); + const [pageSize, setPageSize] = useState(paginationProps.defaultPageSize || 5); + const [total, setTotal] = useState(paginationProps.total || 0); + const [tableData, setTableData] = useState(externalDataSource || []); + const [isLoading, setIsLoading] = useState(false); + + const {pageSizeOptions}= paginationProps + + // 动态请求数据（如果外部传入 fetchData，则内部触发请求） + const loadData = async () => { + if (!fetchData) return; // 无请求函数，使用静态数据 + try { + setIsLoading(true); + // 调用外部传入的请求函数，传入当前页码和页大小 + const data = await fetchData(currentPage, pageSize); + setTableData(data); + // 注意：总条数如果由接口返回，需要外部在 fetchData 中处理（或通过 props 传递更新） + // 这里简化为：如果外部传入 total，直接使用；否则由数据长度推导（仅静态场景） + if (paginationProps.total === undefined && externalDataSource) { + setTotal(externalDataSource.length); + } + } catch (error) { + console.error("表格数据请求失败：", error); + setTableData([]); + } finally { + setIsLoading(false); + } + }; + useEffect(() => { + // 缓冲一下，避免中间态请求（优化体验） + const timer = setTimeout(() => { + loadData(); + }, 0); + return () => clearTimeout(timer); + }, [currentPage, pageSize, fetchData]); + + // 监听外部传入的静态数据变化（如果外部数据更新，表格同步更新） + useEffect(() => { + if (externalDataSource) { + setTableData(externalDataSource); + setTotal(paginationProps.total || externalDataSource.length); + } + }, [externalDataSource, paginationProps.total]); + + // 页码变更处理 + const handlePageChange = (page) => { + setCurrentPage(page); + }; + + // 页大小变更处理（重置页码为 1） + const handleShowSizeChange = (_, size) => { + setPageSize(size); + setCurrentPage(1); + }; + + // 处理复选框选择（如果外部需要，可通过 props 传递 onChange） + const handleRowSelection = + typeof rowSelection === "object" && rowSelection.onChange + ? rowSelection.onChange + : () => {}; + + // 组装复选框配置 + const rowSelectionConfig = rowSelection + ? { + type: "checkbox", + onChange: handleRowSelection, + ...(typeof rowSelection === "object" ? rowSelection : {}), + } + : null; + + return ( +
+ + + {/* 分页组件 */} +
+ `共 ${total} 条记录`} + /> +
+ + ) +} +export default TableWithPagination; diff --git a/src/pages/assetmangement_assetdefined/AssetDefined.js b/src/pages/assetmangement_assetdefined/AssetDefined.js new file mode 100644 index 0000000..930e5f8 --- /dev/null +++ b/src/pages/assetmangement_assetdefined/AssetDefined.js @@ -0,0 +1,432 @@ +import {Button, Col, Form, Input, Radio, Row, Select, Space, Tag, Tree} from "antd"; +import TableWithPagination from "../../components/assetmangement/table"; +import Title from '../homepage/compontent/title' +import styles from './AssetDefined.less' +import {PlusOutlined, PushpinOutlined} from "@ant-design/icons"; +const AssetDefined = () => { +// 数据源 + const dataSource = [ + { + key: '1', + id: 1, + propertyName: '通信协议', + type: 'enum', + required: true, + defaultValue: 'MQTT', + enumValues: ['MQTT', 'COAP', 'HTTP'], + description: '设备与平台的通信协议', + validationRule: '', + displayOrder: 1, + }, + { + key: '2', + id: 2, + propertyName: '供电电压', + type: 'number', + required: true, + defaultValue: '12', + enumValues: [], + description: '设备供电电压，单位V', + validationRule: '5-24', + displayOrder: 2, + }, + { + key: '3', + id: 3, + propertyName: '设备型号', + type: 'text', + required: true, + defaultValue: 'DS18B20', + enumValues: [], + description: '传感器的具体型号标识', + validationRule: '', + displayOrder: 3, + }, + { + key: '4', + id: 4, + propertyName: '支持无线', + type: 'boolean', + required: false, + defaultValue: 'false', + enumValues: [], + description: '设备是否具备无线通信能力', + validationRule: '', + displayOrder: 4, + }, + { + key: '5', + id: 5, + propertyName: '软件版本号', + type: 'text', + required: true, + defaultValue: 'V1.0', + enumValues: [], + description: '嵌入式固件的版本标识', + validationRule: '^\\d+\\.\\d+$', + displayOrder: 5, + }, + { + key: '6', + id: 6, + propertyName: '采样周期', + type: 'number', + required: true, + defaultValue: '10', + enumValues: [], + description: '传感器数据采样间隔，单位秒', + validationRule: '1-300', + displayOrder: 6, + }, + { + key: '7', + id: 7, + propertyName: '安装位置', + type: 'text', + required: false, + defaultValue: '', + enumValues: [], + description: '设备的物理安装位置(如车间A-01)', + validationRule: '', + displayOrder: 7, + }, + ]; +// 列配置 + const columns = [ + { + title: '序号', + dataIndex: 'id', + key: 'id', + width: 60, + align: 'center', + }, + { + title: '属性名称', + dataIndex: 'propertyName', + key: 'propertyName', + width: 100, + }, + { + title: '类型', + dataIndex: 'type', + key: 'type', + width: 80, + render: (type) => { + const typeMap = { + 'enum': { text: '枚举', color: 'blue' }, + 'number': { text: '数值', color: 'green' }, + 'text': { text: '文本', color: 'orange' }, + 'boolean': { text: '布尔', color: 'purple' }, + }; + const typeInfo = typeMap[type] || { text: type, color: 'default' }; + return {typeInfo.text}; + }, + }, + { + title: '是否必填', + dataIndex: 'required', + key: 'required', + width: 85, + render: (required) => ( + + {required ? '是' : '否'} + + ), + }, + { + title: '默认值', + dataIndex: 'defaultValue', + key: 'defaultValue', + width: 100, + }, + { + title: '枚举值', + dataIndex: 'enumValues', + key: 'enumValues', + width: 160, + render: (values) => values.length > 0 ? values.join('、') : '-', + }, + { + title: '描述', + dataIndex: 'description', + key: 'description', + width: 220, + }, + { + title: '验证规则', + dataIndex: 'validationRule', + key: 'validationRule', + width: 100, + render: (rule) => rule || '-', + }, + { + title: '显示顺序', + dataIndex: 'displayOrder', + key: 'displayOrder', + width: 85, + align: 'center', + }, + { + title: '操作', + key: 'action', + width: 180, + fixed: 'right', + align:'center', + render: (_, record) => ( + + + + + + ), + }, + ]; + + const treeData=[ + { + title:'硬件', + key:'硬件', + children:[ + { + title: '传感器', + key:'传感器', + children:[ + { + title:'温度传感器', + key:'温度传感器', + children:[ + { + title: 'DS18B20', + key:'DS18B20' + }, + { + title: 'SHT30', + key:'SHT30' + }, + ] + }, + { + title:'压力传感器', + key:'压力传感器', + children: [ + { + title:'MPX570', + key:'MPX570' + } + ] + } + ] + }, + { + title:'网关', + key:'网关', + children:[ + { + title:'工业网关', + key:'工业网关', + children: [ + { + title:'OW-200', + key:'OW-200', + } + ] + } + ] + }, + { + title:'执行器', + key:'执行器', + children:[ + { + title:'电磁阀', + key:'电磁阀', + children: [ + { + title:'Ev-100', + key:'Ev-100' + } + ] + } + ] + } + ] + }, + { + title:'软件', + key:'软件', + children:[ + { + title:'嵌入式程序', + key:'嵌入式程序', + children:[ + { + title:'传感器固件', + key:'传感器固件', + children:[ + { + title:'FW-TempV1.0', + key:'FW-TempV1.0', + } + ] + } + ] + }, + { + title:'平台管理软件', + key:'平台管理软件', + children:[ + { + title:'设备管理软件', + key:'设备管理软件', + children: [ + { + title:'V3.2', + key:'V3.2', + } + ] + } + ] + } + ] + } + ] + + return ( +
+ +
+
+ + + +
+ + + + + + + + + + + + + + + + + + + 是 + 否 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + console.log(e) + } + }} + /> + + + + + ) +} +export default AssetDefined; diff --git a/src/pages/assetmangement_assetdefined/AssetDefined.less b/src/pages/assetmangement_assetdefined/AssetDefined.less new file mode 100644 index 0000000..57d9db5 --- /dev/null +++ b/src/pages/assetmangement_assetdefined/AssetDefined.less @@ -0,0 +1,34 @@ +.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 ; + background-color: #045F5E80; +} +.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 ; + background-color: #B7E5D533; +} +.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 ; + background-color: #E5B7B733; +} diff --git a/src/pages/assetmangement_assetgrouping/AssetGrouping.js b/src/pages/assetmangement_assetgrouping/AssetGrouping.js index 2a422c3..c4b650c 100644 --- a/src/pages/assetmangement_assetgrouping/AssetGrouping.js +++ b/src/pages/assetmangement_assetgrouping/AssetGrouping.js @@ -197,6 +197,7 @@ const AssetGroupTable=()=>{ rowKey="groupId" pagination={false} // 关闭表格自带分页，使用外部Pagination组件 style={{width:'100%'}} + // className={styles.table} />
{ ], }, ]; + 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) => ( + + + + + + ), + align:'center' + }, + ]; return (
@@ -296,7 +351,16 @@ const AssetGrouping = () => {
- + {/**/} +
diff --git a/src/pages/assetmangement_assetgrouping/AssetGrouping.less b/src/pages/assetmangement_assetgrouping/AssetGrouping.less index 57d9db5..d1c4f94 100644 --- a/src/pages/assetmangement_assetgrouping/AssetGrouping.less +++ b/src/pages/assetmangement_assetgrouping/AssetGrouping.less @@ -32,3 +32,9 @@ border-color:#d9d9d9 ; background-color: #E5B7B733; } +//.table{ +// :global(.ant-table-thead > tr > th) { +// background-color: #F0F7F7 !important; +// } +//} + diff --git a/src/pages/assetmangement_assetlist/AssetList.less b/src/pages/assetmangement_assetlist/AssetList.less index 3a53af3..db6969b 100644 --- a/src/pages/assetmangement_assetlist/AssetList.less +++ b/src/pages/assetmangement_assetlist/AssetList.less @@ -30,3 +30,8 @@ border-color:#d9d9d9 ; background-color: #E5B7B733; } +.table{ + :global(.ant-table-thead > tr > th) { + background-color: #F0F7F7 !important; + } +} diff --git a/src/pages/assetmangement_assetlist/compontent/table.js b/src/pages/assetmangement_assetlist/compontent/table.js index 9cc3c1d..9afb750 100644 --- a/src/pages/assetmangement_assetlist/compontent/table.js +++ b/src/pages/assetmangement_assetlist/compontent/table.js @@ -1,5 +1,6 @@ import {useEffect, useState} from "react"; import {Pagination, Table, Button, Tag} from "antd"; +import styles from '../AssetList.less' const mockData = [ { 'key': '1', @@ -279,6 +280,7 @@ const AssetTable = () => { // }, }} style={{width:'100%'}} + className={styles.table} />
{ + const progressStyle = [ + {title:'即将到期',num:'12',percent:24,color:'#6E5612',strokeColor:'#FFE666'}, + {title:'已逾期',num:'5',percent:10,color:'#6E1212',strokeColor:'#FF8966'}, + {title:'正常',num:'33',percent:66,color:'#12386E',strokeColor:'#66C9FF'}, + ] + // 维保计划数据 + const maintenancePlanData = [ + {key: '1', assetName: '核心服务器A', assetType: '硬件-服务器', maintenanceType: '年度硬件维保', nextMaintenanceDate: '2025-10-28', lastMaintenanceDate: '2024-10-28', status: '即将到期', notificationMethod: '短信+平台通知', importance: '核心'}, + {key: '2', assetName: '工业传感器B', assetType: '硬件-传感器', maintenanceType: '故障维保', nextMaintenanceDate: '--', lastMaintenanceDate: '2025-10-20', status: '已逾期', notificationMethod: '邮件+平台通知', importance: '重要'}, + {key: '3', assetName: '网关C', assetType: '硬件-网关', maintenanceType: '季度软件维保', nextMaintenanceDate: '2025-11-15', lastMaintenanceDate: '2025-08-15', status: '正常', notificationMethod: '平台通知', importance: '普通'}, + {key: '4', assetName: '数据库集群D', assetType: '硬件-服务器', maintenanceType: '月度巡检维保', nextMaintenanceDate: '2025-10-30', lastMaintenanceDate: '2025-09-30', status: '即将到期', notificationMethod: '短信+邮件', importance: '核心'}, + {key: '5', assetName: '边缘计算节点E', assetType: '硬件-网关', maintenanceType: '固件升级维保', nextMaintenanceDate: '2025-12-01', lastMaintenanceDate: '2025-09-01', status: '正常', notificationMethod: '平台通知', importance: '重要'}, + {key: '6', assetName: '温湿度传感器F', assetType: '硬件-传感器', maintenanceType: '年度校准维保', nextMaintenanceDate: '2025-11-05', lastMaintenanceDate: '2024-11-05', status: '正常', notificationMethod: '邮件通知', importance: '普通'}, + ]; + // 状态标签颜色 + const getStatusColor = (status) => { + switch(status) { + case '正常': return '#52c41a'; + case '即将到期': return '#faad14'; + case '已逾期': return '#ff4d4f'; + default: return '#1890ff'; + } + }; + // 维保计划列表列定义 + const planColumns = [ + {title: '序号', dataIndex: 'key', key: 'key', width: 60}, + {title: '资产名称', dataIndex: 'assetName', key: 'assetName'}, + {title: '资产类型', dataIndex: 'assetType', key: 'assetType'}, + {title: '维保类型', dataIndex: 'maintenanceType', key: 'maintenanceType'}, + {title: '下次维保时间', dataIndex: 'nextMaintenanceDate', key: 'nextMaintenanceDate'}, + {title: '上次维保时间', dataIndex: 'lastMaintenanceDate', key: 'lastMaintenanceDate'}, + {title: '维保状态', dataIndex: 'status', key: 'status', + render: (status) => {status} + }, + {title: '提醒方式', dataIndex: 'notificationMethod', key: 'notificationMethod'}, + {title: '资产重要程度', dataIndex: 'importance', key: 'importance', + render: (importance) => {importance} + }, + {title: '操作', key: 'action',align:'center', + render: () => ( + + 编辑 + 执行 + 记录 + + ) + }, + ]; + const items = [ + {key: '1', label: ,children:<TableWithPagination columns={planColumns} dataSource={maintenancePlanData} rowSelection={false}/>}, + {key: '2', label: <span style={{fontSize:'20px'}}>维保记录列表</span>,children:<TableWithPagination columns={planColumns} dataSource={maintenancePlanData} rowSelection={false}/>}, + ]; + const operations = <div style={{marginLeft: 20, display: 'flex'}}> + <Button className={styles['reset-button']} type="default" style={{marginRight: 30}}>导入维保计划</Button> + <Button className={styles['reset-button']} type="default" style={{marginRight: 30}}>导出维保数据</Button> + <Button className={styles['search-button']} type="primary" icon={<PlusOutlined/>}>新增维保计划</Button> + </div>; + + + // 自定义提醒规则数据 + const reminderRuleData = [ + {key: '1', ruleId: '1', maintenanceType: '年度硬件维保', importance: '核心', advanceNoticeDays: '7', notificationMethod: '短信+邮件+平台通知', repeatInterval: '24', status: '启用'}, + {key: '2', ruleId: '2', maintenanceType: '故障维保', importance: '重要', advanceNoticeDays: '0(立即提醒)', notificationMethod: '短信+平台通知', repeatInterval: '12', status: '启用'}, + {key: '3', ruleId: '3', maintenanceType: '软件版本迭代', importance: '普通', advanceNoticeDays: '3', notificationMethod: '平台通知', repeatInterval: '--(仅一次)', status: '启用'}, + ]; + // 自定义提醒规则列定义 + const ruleColumns = [ + { + title: '', + dataIndex: 'select', + key: 'select', + width: 40, + render: () => <input type="checkbox" /> + }, + {title: '序号', dataIndex: 'ruleId', key: 'ruleId', width: 60}, + {title: '维保类型', dataIndex: 'maintenanceType', key: 'maintenanceType'}, + {title: '资产重要程度', dataIndex: 'importance', key: 'importance'}, + {title: '提前提醒时间(天)', dataIndex: 'advanceNoticeDays', key: 'advanceNoticeDays'}, + {title: '提醒方式(可多选)', dataIndex: 'notificationMethod', key: 'notificationMethod'}, + {title: '重复提醒间隔(小时)', dataIndex: 'repeatInterval', key: 'repeatInterval'}, + {title: '启用状态', dataIndex: 'status', key: 'status', + render: (status) => <Tag color="green">{status}</Tag> + }, + {title: '操作', key: 'action', align: 'center', + render: () => ( + <span> + <a style={{color:'#2C9E9D',marginRight:'10px'}} href="#">编辑</a> + <a style={{color:'#ff4d4f'}} href="#">删除</a> + </span> + ) + }, + ]; + return ( + <div> + <div style={{backgroundColor: '#f0f7f7', height: '100%', overflow: 'hidden'}}> + <Row gutter={20} style={{height: '100%'}}> + <Col span={4}> + <div style={{padding: '20px', backgroundColor: '#fff', height: '100%'}}> + <Title title={'维保任务总览'}> +
+
+ +
+
50
+
总计划数
+ + + + + + + { + progressStyle.map((item)=>{ + return ( +
+ +
+
{item.num} +
+
{item.title}
+ + + + + + + ) + }) + } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} +export default Maintenance; diff --git a/src/pages/assetmangement_maintenance/Maintenance.less b/src/pages/assetmangement_maintenance/Maintenance.less new file mode 100644 index 0000000..df24ae6 --- /dev/null +++ b/src/pages/assetmangement_maintenance/Maintenance.less @@ -0,0 +1,82 @@ +.item{ + padding: 20px; + background: #FFFFFF4D; + backdrop-filter: blur(15px); + border-radius: 8px; + position: relative; + margin-top: 20px; + + // 使用伪元素创建边框 + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + border-image-slice: 1; + border-image-source: conic-gradient(from 102.21deg at 52.75% 38.75%, rgba(249, 249, 249, 0.5) -32.95deg, rgba(64, 64, 64, 0.5) 10.52deg, rgba(64, 64, 64, 0.35) 32.12deg, #FFFFFF 60.28deg, rgba(255, 255, 255, 0.5) 107.79deg, rgba(64, 64, 64, 0.35) 187.59deg, #F9F9F9 207.58deg, #FFFFFF 287.31deg, rgba(249, 249, 249, 0.5) 327.05deg, rgba(64, 64, 64, 0.5) 370.52deg); + border-radius: 8px; + pointer-events: none; + } + // 合并多个阴影效果，用逗号分隔 + box-shadow: + -2px 4px 10px 0px #9191910D, + -7px 17px 18px 0px #9191910A, + -15px 37px 24px 0px #91919108, + -27px 66px 29px 0px #91919103, + -42px 103px 31px 0px #91919100; + + +} +.item-num{ + font-size: 26px; + font-weight: 600; + line-height: 32px; + letter-spacing: 0em; + text-align: left; +} +.item-title{ + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0em; + text-align: left; + margin-top: 20px; + color:#666666; +} +.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 ; + background-color: #045F5E80; +} +.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 ; + background-color: #B7E5D533; +} +.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 ; + background-color: #E5B7B733; +} diff --git a/src/pages/assetmangement_maintenance/untitled-1.txt b/src/pages/assetmangement_maintenance/untitled-1.txt new file mode 100644 index 0000000..a56f5ea --- /dev/null +++ b/src/pages/assetmangement_maintenance/untitled-1.txt @@ -0,0 +1,17 @@ +.item{ + padding: 20px; + border: 1px solid; + border-image-slice: 1; + border-image-source: conic-gradient(from 102.21deg at 52.75% 38.75%, rgba(249, 249, 249, 0.5) -32.95deg, rgba(64, 64, 64, 0.5) 10.52deg, rgba(64, 64, 64, 0.35) 32.12deg, #FFFFFF 60.28deg, rgba(255, 255, 255, 0.5) 107.79deg, rgba(64, 64, 64, 0.35) 187.59deg, #F9F9F9 207.58deg, #FFFFFF 287.31deg, rgba(249, 249, 249, 0.5) 327.05deg, rgba(64, 64, 64, 0.5) 370.52deg); + background: #FFFFFF4D; + backdrop-filter: blur(15px); + border-radius: 8px; + + // 合并多个阴影效果，用逗号分隔 + box-shadow: + -2px 4px 10px 0px #9191910D, + -7px 17px 18px 0px #9191910A, + -15px 37px 24px 0px #91919108, + -27px 66px 29px 0px #91919103, + -42px 103px 31px 0px #91919100; +} diff --git a/src/pages/nav_system_content/SystemContentList.js b/src/pages/nav_system_content/SystemContentList.js index ca535bf..0f797a8 100644 --- a/src/pages/nav_system_content/SystemContentList.js +++ b/src/pages/nav_system_content/SystemContentList.js @@ -141,7 +141,18 @@ const SystemContentList = (props) => { path: '/topnavbar00/business/assetmanagement/assetgrouping', key: "/topnavbar00/business/assetmanagement/assetgrouping", "label": "资产分组" - } + }, + // 资产属性定义 + { + path: '/topnavbar00/business/assetmanagement/assetdefined', + key: "/topnavbar00/business/assetmanagement/assetdefined", + "label": "资产属性定义" + }, + { + path: '/topnavbar00/business/assetmanagement/maintenance', + key: "/topnavbar00/business/assetmanagement/maintenance", + "label": "维保管理" + }, ] } ] diff --git a/src/pages/topnavbar/TopNavBar.js b/src/pages/topnavbar/TopNavBar.js index 61c0bb4..bf839d9 100644 --- a/src/pages/topnavbar/TopNavBar.js +++ b/src/pages/topnavbar/TopNavBar.js @@ -24,6 +24,16 @@ const menuItem = [ label: '资产分组', key: '/topnavbar00/business/assetmanagement/assetgrouping', }, + // 资产属性定义 + { + label: '资产属性定义', + key: '/topnavbar00/business/assetmanagement/assetdefined', + }, + // 资产维保管理 + { + label: '维保管理', + key: '/topnavbar00/business/assetmanagement/maintenance', + }, ] const TopNavBar = (props) => { @@ -126,8 +136,11 @@ const TopNavBar = (props) => { checkboxBorderColor:'#006665' }, Table:{ - headerBg:'#F0F7F7', - // bodyBg:'#F0F7F7', + headerBg: '#F0F7F7', // 正确的表头背景 Token（5.x 组件专属） + // cellFontSize: 24, + // headerCellStyle: { // 额外添加，强制覆盖表头单元格样式（解决优先级问题） + // backgroundColor: '#F0F7F7 !important', + // }, }, Menu:{ activeBarHeight:0 @@ -137,13 +150,31 @@ const TopNavBar = (props) => { colorBorder:'#2C9E9D' }, Input:{ - colorBorder:'#2C9E9D' + colorBorder:'#2C9E9D', + activeBorderColor:'#2C9E9D' }, DatePicker:{ colorBorder:'#2C9E9D' }, Button:{ colorBorder:'#2C9E9D', + }, + Radio:{ + colorPrimary: '#2C9E9D', // 选中时的圆圈边框色 + 内部圆点色（核心颜色） + colorBorder: '#2C9E9D', // 未选中时的圆圈边框色（你的需求，和选中色一致） + colorBgChecked: '#2C9E9D', // 选中时内部圆点的颜色（可和 colorPrimary 一致） + sizeDefault: 16, // 圆形单选框的尺寸（默认 16px，可改 14/18/20 等） + colorText: '#333', // 单选框旁边的文字颜色（可选） + colorTextChecked: '#2C9E9D', // 选中时的文字颜色（可选，默认继承 colorPrimary） + // hover/聚焦状态（可选，增强交互） + colorBorderHover: '#1A7D7C', // 未选中时 hover 边框色（比选中色深一点） + colorPrimaryHover: '#1A7D7C', // 选中时 hover 颜色 + }, + Tabs:{ + inkBarColor:'#2C9E9D', + itemActiveColor:'#333333', + itemHoverColor:'#333333', + itemSelectedColor:'#333333', } }, }