diff --git a/config/defaultSettings.js b/config/defaultSettings.js index 276b2c2..5de632a 100644 --- a/config/defaultSettings.js +++ b/config/defaultSettings.js @@ -1,5 +1,5 @@ export default { - primaryColor: '#2969ff', + primaryColor: 'rgba(0, 102, 101, 1)', menu: { locale: true, }, diff --git a/config/routes.js b/config/routes.js index e1ea3f6..0a5b305 100644 --- a/config/routes.js +++ b/config/routes.js @@ -29,6 +29,30 @@ export default [ path: '/topnavbar00/business/basic', name: 'basic', component: './business_basic/basic', + }, + { + path: '/topnavbar00/business/homepage', + name: 'homepage', + component: '@/pages/homepage/HomePage', + }, + { + path: '/topnavbar00/business/assetmanagement', + name: 'assetmanagement', + // component: './business_assetmanagement/assetmanagement', + routes:[ + // 资产列表 + { + path: '/topnavbar00/business/assetmanagement/assetlist', + name: 'assetlist', + component: './assetmangement_assetlist/AssetList', + }, + // 资产分组 + { + path: '/topnavbar00/business/assetmanagement/assetgrouping', + name: 'assetlist', + component: './assetmangement_assetgrouping/AssetGrouping', + }, + ] } ], }, diff --git a/src/assets/img/assetmangement1.png b/src/assets/img/assetmangement1.png new file mode 100644 index 0000000..0569633 Binary files /dev/null and b/src/assets/img/assetmangement1.png differ diff --git a/src/assets/img/assetmangement2.png b/src/assets/img/assetmangement2.png new file mode 100644 index 0000000..5157c20 Binary files /dev/null and b/src/assets/img/assetmangement2.png differ diff --git a/src/assets/img/assetmangement3.png b/src/assets/img/assetmangement3.png new file mode 100644 index 0000000..ee461e8 Binary files /dev/null and b/src/assets/img/assetmangement3.png differ diff --git a/src/assets/img/homepage2.svg b/src/assets/img/homepage2.svg new file mode 100644 index 0000000..c4bc7cd --- /dev/null +++ b/src/assets/img/homepage2.svg @@ -0,0 +1,12 @@ + + + +
 + + + + + + + + diff --git a/src/assets/img/homepage3.svg b/src/assets/img/homepage3.svg new file mode 100644 index 0000000..1349bab --- /dev/null +++ b/src/assets/img/homepage3.svg @@ -0,0 +1,7 @@ + + +
 + + + + diff --git a/src/assets/img/homepage4.svg b/src/assets/img/homepage4.svg new file mode 100644 index 0000000..8485315 --- /dev/null +++ b/src/assets/img/homepage4.svg @@ -0,0 +1,7 @@ + + +
 + + + + diff --git a/src/assets/img/homepage5.svg b/src/assets/img/homepage5.svg new file mode 100644 index 0000000..c73ca52 --- /dev/null +++ b/src/assets/img/homepage5.svg @@ -0,0 +1,7 @@ + + +
 + + + + diff --git a/src/assets/img/homepage6.svg b/src/assets/img/homepage6.svg new file mode 100644 index 0000000..1ab0587 --- /dev/null +++ b/src/assets/img/homepage6.svg @@ -0,0 +1,7 @@ + + +
 + + + + diff --git a/src/assets/img/homepage7.svg b/src/assets/img/homepage7.svg new file mode 100644 index 0000000..490d257 --- /dev/null +++ b/src/assets/img/homepage7.svg @@ -0,0 +1,7 @@ + + +
 + + + + diff --git a/src/assets/img/homepage8.svg b/src/assets/img/homepage8.svg new file mode 100644 index 0000000..e065c70 --- /dev/null +++ b/src/assets/img/homepage8.svg @@ -0,0 +1,7 @@ + + +
 + + + + diff --git a/src/assets/img/homepage9.svg b/src/assets/img/homepage9.svg new file mode 100644 index 0000000..0dee069 --- /dev/null +++ b/src/assets/img/homepage9.svg @@ -0,0 +1,7 @@ + + +
 + + + + diff --git a/src/assets/img/homepageBg1.png b/src/assets/img/homepageBg1.png new file mode 100644 index 0000000..20fb81f Binary files /dev/null and b/src/assets/img/homepageBg1.png differ diff --git a/src/assets/img/homepageSvg1.svg b/src/assets/img/homepageSvg1.svg new file mode 100644 index 0000000..caeb85f --- /dev/null +++ b/src/assets/img/homepageSvg1.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/img/leftBg.png b/src/assets/img/leftBg.png new file mode 100644 index 0000000..a0d755b Binary files /dev/null and b/src/assets/img/leftBg.png differ diff --git a/src/components/GlobalComponent/breadcrumb.less b/src/components/GlobalComponent/breadcrumb.less index 5695a96..1987eb3 100644 --- a/src/components/GlobalComponent/breadcrumb.less +++ b/src/components/GlobalComponent/breadcrumb.less @@ -46,13 +46,17 @@ // 面包屑项基础样式 .breadcrumb-item { height: 32px; - padding: 0 12px; - border-radius: 8px; + padding: 5px 12px; + border-top-right-radius: 8px; + border: 1px solid; + border-image-source: linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(167, 229, 228, 0) 59.69%, #A7E5E4 79.76%); + border-image-slice:1; + color:rgba(153, 153, 153, 1); // 使用rgba格式设置带透明度的背景色，最后一个参数0.13表示13%的透明度 - background-color: rgba(186, 186, 186, 0.13); + background: rgb(230 243 241) ; // border: 1px solid #E8E8E8; margin-right: 8px; - display: flex; + display: inline-flex; align-items: center; transition: all 0.3s ease; cursor: pointer; @@ -60,7 +64,11 @@ overflow: hidden; text-overflow: ellipsis; max-width: 180px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); + //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); + backdrop-filter: blur(3.4000000953674316px); + + box-shadow: 1px 2px 5px 0px rgba(0, 102, 101, 0.25); + box-sizing: border-box; // 移除默认的分隔符 @@ -84,7 +92,10 @@ // 悬停效果 &:hover { - border-color: #0056FF; + border-image-source: linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(0, 143, 142, 0) 59.69%, #008F8E 79.76%); + color:rgba(0, 102, 101, 1); + background-color: rgba(213, 245, 240, 1); + border-image-slice:1; // transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 86, 255, 0.1); } @@ -92,18 +103,25 @@ // 面包屑项选中状态样式 .breadcrumb-item-active { - background-color: rgba(94, 121, 246, 0.13); + background-color: rgba(213, 245, 240, 1); + border-image-source: linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(0, 143, 142, 0) 59.69%, #008F8E 79.76%); + border-image-slice:1; + //background: + // linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(167, 229, 228, 0) 59.69%, #A7E5E4 79.76%) border-box, + // #000 border-box; + //background-clip: padding-box, border-box; + color:rgba(0, 102, 101, 1); // border-color: #0056FF; .ant-breadcrumb-link { - color: #0056FF !important; + color: rgba(0, 102, 101, 1) !important; font-weight: 500; } } // 面包屑文本选中状态样式 - 对应第252行代码中的条件样式 .breadcrumb-item-text-active { - color: #0056FF !important; + color: rgba(0, 102, 101, 1) !important; font-weight: 500; } @@ -128,7 +146,7 @@ flex: 1; .breadcrumb-item-text-active { - color: #0056FF !important; + color: rgba(0, 102, 101, 1) !important; } } @@ -145,7 +163,7 @@ flex-shrink: 0; &:hover { - color: #0056FF; + color: rgba(0, 102, 101, 1); } } @@ -156,9 +174,9 @@ } .ant-breadcrumb-link:hover { - color: #0056FF !important; + color: rgba(0, 102, 101, 1) !important; } .ant-breadcrumb-item-active .ant-breadcrumb-link { - color: #0056FF !important; -} \ No newline at end of file + color: rgba(0, 102, 101, 1) !important; +} diff --git a/src/pages/assetmangement_assetgrouping/AssetGrouping.js b/src/pages/assetmangement_assetgrouping/AssetGrouping.js new file mode 100644 index 0000000..e1c598d --- /dev/null +++ b/src/pages/assetmangement_assetgrouping/AssetGrouping.js @@ -0,0 +1,67 @@ +import {Col, Row, Tree} from "antd"; +import Title from '../homepage/compontent/title' +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: '生产车间分部 (700)', + key: '0-0-1', + children:[ + { + title: '车间产线设备组 (400)', + key: '0-0-1-0', + }, + { + title: '车间环境监测组 (300)', + key: '0-0-1-1', + }, + ] + }, + ], + }, + ]; + return ( +
+ + +
+ + + +
+ + + + + +
+ ) +} +export default AssetGrouping diff --git a/src/pages/assetmangement_assetlist/AssetList.js b/src/pages/assetmangement_assetlist/AssetList.js new file mode 100644 index 0000000..3c63f76 --- /dev/null +++ b/src/pages/assetmangement_assetlist/AssetList.js @@ -0,0 +1,62 @@ +import Title from '../homepage/compontent/title' +import {Button, Col, Form, Input, Row, Select} from "antd"; +import styles from'./AssetList.less' +import {DeleteOutlined, PlusOutlined, SearchOutlined, SyncOutlined} from "@ant-design/icons"; +import AssetTable from "@/pages/assetmangement_assetlist/compontent/table"; +const {Search}= Input +const AssetList = ()=>{ + return( +
+ + + + + + + + + + +
+ + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + + + + +
+ + + + + +
+ ) +} +export default AssetList diff --git a/src/pages/assetmangement_assetlist/AssetList.less b/src/pages/assetmangement_assetlist/AssetList.less new file mode 100644 index 0000000..86b36d2 --- /dev/null +++ b/src/pages/assetmangement_assetlist/AssetList.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 ; +} diff --git a/src/pages/assetmangement_assetlist/compontent/table.js b/src/pages/assetmangement_assetlist/compontent/table.js new file mode 100644 index 0000000..9d1f9a9 --- /dev/null +++ b/src/pages/assetmangement_assetlist/compontent/table.js @@ -0,0 +1,283 @@ +import {useEffect, useState} from "react"; +import {Pagination, Table, Button, Tag} from "antd"; +const mockData = [ + { + 'key': '1', + '资产ID': 1, + '资产名称': '工业终端A', + '管理人': '李经萍', + '状态': '在线', + '地点': '车间A', + '编号': 'ASSET-001', + '二维码信息': 'QR-001', + '分类分组': '终端', + '数量单位': '台', + '更新时间': '2025-10-20', + '维保时间': '2026-04-20', + '资产类型': '硬件', + '关联资产': '关联传感器S-001', + }, + { + 'key': '2', + '资产ID': 2, + '资产名称': '核心服务器B', + '管理人': '吴洁丽', + '状态': '在用', + '地点': '机房A', + '编号': 'ASSET-002', + '二维码信息': 'QR-002', + '分类分组': '服务器', + '数量单位': '台', + '更新时间': '2025-10-15', + '维保时间': '2026-03-15', + '资产类型': '硬件', + '关联资产': '关联存储设备D-001', + }, + { + 'key': '3', + '资产ID': 3, + '资产名称': '千兆路由器C', + '管理人': '李姝萍', + '状态': '在线', + '地点': '机房B', + '编号': 'ASSET-003', + '二维码信息': 'QR-003', + '分类分组': '网络设备', + '数量单位': '台', + '更新时间': '2025-10-10', + '维保时间': '2026-02-10', + '资产类型': '硬件', + '关联资产': '关联交换机E-001', + }, + { + 'key': '4', + '资产ID': 4, + '资产名称': '防火墙设备D', + '管理人': '何克金', + '状态': '在用', + '地点': '机房A', + '编号': 'ASSET-004', + '二维码信息': 'QR-004', + '分类分组': '安全设备', + '数量单位': '台', + '更新时间': '2025-10-05', + '维保时间': '2026-01-05', + '资产类型': '硬件', + '关联资产': '关联服务器B', + }, + { + 'key': '5', + '资产ID': 5, + '资产名称': '无线打印机E', + '管理人': '李勇', + '状态': '库存', + '地点': '仓库A', + '编号': 'ASSET-005', + '二维码信息': 'QR-005', + '分类分组': '外设', + '数量单位': '台', + '更新时间': '2025-10-01', + '维保时间': '2026-05-01', + '资产类型': '硬件', + '关联资产': '关联服务器B', + }, + { + 'key': '6', + '资产ID': 6, + '资产名称': '运维管理软件F', + '管理人': '周牧民', + '状态': '在用', + '地点': '办公区A', + '编号': 'ASSET-006', + '二维码信息': 'QR-006', + '分类分组': '软件', + '数量单位': '套', + '更新时间': '2025-09-25', + '维保时间': '2026-06-25', + '资产类型': '软件', + '关联资产': '关联工业终端A', + }, + { + 'key': '7', + '资产ID': 7, + '资产名称': '传感器配件包G', + '管理人': '何艳丽', + '状态': '维保中', + '地点': '维修区A', + '编号': 'ASSET-007', + '二维码信息': 'QR-007', + '分类分组': '附件', + '数量单位': '件', + '更新时间': '2025-09-20', + '维保时间': '2025-11-20', + '资产类型': '硬件', + '关联资产': '关联传感器S-001', + }, +]; + +const AssetTable = () => { + // 分页状态 + const [currentPage, setCurrentPage] = useState(1); + const [pageSize, setPageSize] = useState(10); + const [total, setTotal] = useState(mockData.length); // 实际项目中由接口返回总条数 + // 表格数据（实际项目中由接口请求赋值） + const [dataSource, setDataSource] = useState(mockData); + + // 接口请求函数（实际项目中替换为真实接口逻辑） + const fetchAssetData = async (page = 1, size = 10) => { + try { + // 模拟接口请求，实际替换为： + // const res = await axios.get('/api/assets', { params: { page, size } }); + // setDataSource(res.data.list); + // setTotal(res.data.total); + setCurrentPage(page); + setPageSize(size); + } catch (error) { + console.error('获取资产数据失败：', error); + } + }; + + // 组件挂载时初始化数据 + useEffect(() => { + fetchAssetData(currentPage, pageSize); + }, [currentPage, pageSize]); + + // 处理分页变更 + const handlePageChange = (page) => { + fetchAssetData(page, pageSize); + }; + + // 处理页大小变更 + const handleShowSizeChange = (current, size) => { + fetchAssetData(current, size); + }; + + // 表格列配置 + const columns = [ + + { + title: '资产ID', + dataIndex: '资产ID', + key: '资产ID', + }, + { + title: '资产名称', + dataIndex: '资产名称', + key: '资产名称', + }, + { + title: '管理人', + dataIndex: '管理人', + key: '管理人', + }, + { + title: '状态', + dataIndex: '状态', + key: '状态', + render:(value)=>{ + return {value} + } + }, + { + title: '地点', + dataIndex: '地点', + key: '地点', + }, + { + title: '编号', + dataIndex: '编号', + key: '编号', + }, + { + title: '二维码信息', + dataIndex: '二维码信息', + key: '二维码信息', + }, + { + title: '分类分组', + dataIndex: '分类分组', + key: '分类分组', + }, + { + title: '数量单位', + dataIndex: '数量单位', + key: '数量单位', + }, + { + title: '更新时间', + dataIndex: '更新时间', + key: '更新时间', + }, + { + title: '维保时间', + dataIndex: '维保时间', + key: '维保时间', + }, + { + title: '资产类型', + dataIndex: '资产类型', + key: '资产类型', + }, + { + title: '关联资产', + dataIndex: '关联资产', + key: '关联资产', + }, + { + title: '操作', + key: '操作', + render: () => ( + <> + + + + + + ), + }, + ]; + + // 封装分页组件 + const CustomPagination = ({ current, pageSize, total, onChange, onShowSizeChange }) => ( + `共 ${total} 条记录`} + /> + ); + + return ( +
+ { + // console.log('选中行：', selectedRows); + // }, + }} + style={{width:'100%'}} + /> +
+ +
+ + ); +}; + +export default AssetTable; diff --git a/src/pages/homepage/HomePage.js b/src/pages/homepage/HomePage.js new file mode 100644 index 0000000..141ee52 --- /dev/null +++ b/src/pages/homepage/HomePage.js @@ -0,0 +1,505 @@ + +import styles from './HomePage.less'; +import ReactECharts from 'echarts-for-react'; +import svg1 from '@/assets/img/homepageSvg1.svg' +import svg2 from '@/assets/img/homepage2.svg' +import svg3 from '@/assets/img/homepage3.svg' +import svg4 from '@/assets/img/homepage4.svg' +import svg5 from '@/assets/img/homepage5.svg' +import svg6 from '@/assets/img/homepage6.svg' +import svg7 from '@/assets/img/homepage7.svg' +import svg8 from '@/assets/img/homepage8.svg' +import svg9 from '@/assets/img/homepage9.svg' +import {Col, Row} from "antd"; +import Title from './compontent/title' + + +const WorkStatItem = (props) => { + return ( +
+
+
{props.num}
+
{props.title}
+
+
+ +
+
+ ) +} + +const PieChart1 = () => { + // 饼图的配置项 + const option = { + series: [ + { + type: 'pie', + radius: ['40%', '70%'], // 环形饼图（内半径、外半径） + center: ['20%', '50%'], // 图表中心位置 + data: [ + { name: '终端', value: 600, itemStyle: { color: '#86bbd8' } }, + { name: '服务器', value: 500, itemStyle: { color: '#a0c4e2' } }, + { name: '网络设备', value: 400, itemStyle: { color: '#6c96b9' } }, + { name: '安全设备', value: 700, itemStyle: { color: '#2e8bc0' } }, + { name: '其他', value: 452, itemStyle: { color: '#a2d5c6' } }, + { name: '外设', value: 550, itemStyle: { color: '#d4e2d4' } }, + { name: '附件', value: 300, itemStyle: { color: '#f3eec3' } }, + { name: '配件', value: 200, itemStyle: { color: '#e8d4b0' } }, + { name: '机房环境类', value: 150, itemStyle: { color: '#1a3a4d' } }, + ], + label: { + show: false, // 不显示默认标签 + }, + emphasis: { + scale: true, + }, + }, + { + type: 'pie', + radius: ['0%', '40%'], // 中间环形的大小 + center: ['20%', '50%'], + label: { + show: true, + formatter: '3852台', // 中间显示的文本 + fontSize: 24, + fontWeight: 'bold', + position: 'center', + }, + labelLine: { + show: false, + }, + data: [{ value: 1, itemStyle: { color: 'rgba(234, 250, 246, 1)' } }], // 白色背景 + }, + ], + legend: { + orient: 'vertical', + right: 10, + top: 'center', + data: ['终端', '服务器', '网络设备', '安全设备', '其他', '外设', '附件', '配件', '机房环境类'], + itemWidth: 12, + itemHeight: 3, + itemGap: 30, + }, + }; + + return ; +}; + +const PieChart2 = () => { + // 饼图的配置项 + const option = { + series: [ + { + type: 'pie', + radius: ['40%', '70%'], // 环形饼图（内半径、外半径） + center: ['20%', '50%'], // 图表中心位置 + data: [ + { name: '终端', value: 600, itemStyle: { color: '#86bbd8' } }, + { name: '服务器', value: 500, itemStyle: { color: '#a0c4e2' } }, + { name: '网络设备', value: 400, itemStyle: { color: '#6c96b9' } }, + { name: '安全设备', value: 700, itemStyle: { color: '#2e8bc0' } }, + { name: '其他', value: 452, itemStyle: { color: '#a2d5c6' } }, + { name: '外设', value: 550, itemStyle: { color: '#d4e2d4' } }, + { name: '附件', value: 300, itemStyle: { color: '#f3eec3' } }, + { name: '配件', value: 200, itemStyle: { color: '#e8d4b0' } }, + { name: '机房环境类', value: 150, itemStyle: { color: '#1a3a4d' } }, + ], + label: { + show: false, // 不显示默认标签 + }, + emphasis: { + scale: true, + }, + }, + { + type: 'pie', + radius: ['0%', '40%'], // 中间环形的大小 + center: ['20%', '50%'], + label: { + show: true, + formatter: '3852台', // 中间显示的文本 + fontSize: 24, + fontWeight: 'bold', + position: 'center', + }, + labelLine: { + show: false, + }, + data: [{ value: 1, itemStyle: { color: 'rgba(240, 240, 240, 0.5)' } }], // 白色背景 + }, + ], + legend: { + orient: 'vertical', + right: 10, + top: 'center', + data: ['终端', '服务器', '网络设备', '安全设备', '其他', '外设', '附件', '配件', '机房环境类'], + itemWidth: 12, + itemHeight: 3, + itemGap: 30, + }, + }; + + return ; +}; + + +const BarChart = () => { + const barData = [ + { name: '终端', value: 74, color: '#86bbd8' }, + { name: '服务器', value: 96, color: '#a0c4e2' }, + { name: '网络设备', value: 95, color: '#6c96b9' }, + { name: '安全设备', value: 65, color: '#2e8bc0' }, + { name: '外设', value: 47, color: '#d4e2d4' }, + { name: '附件', value: 61, color: '#f3eec3' }, + { name: '配件', value: 71, color: '#e8d4b0' }, + { name: '机房环境类', value: 45, color: '#1a3a4d' }, + { name: '其他', value: 93, color: '#a2d5c6' }, + ]; + // 创建多个系列，每个系列对应一个图例项 + const series = barData.map(item => ({ + name: item.name, + type: 'bar', + data: new Array(barData.length).fill(0).map((_, index) => + index === barData.findIndex(d => d.name === item.name) ? item.value : 0 + ), + itemStyle: { + color: item.color + }, + barWidth: 20, + barGap: 0, + label: { + show: true, + position: 'top', + formatter: '{c}' + } + })); + // const color= [ + // '#86bbd8', // 终端 + // '#a0c4e2', // 服务器 + // '#6c96b9', // 网络设备 + // '#2e8bc0', // 安全设备 + // '#d4e2d4', // 外设 + // '#f3eec3', // 附件 + // '#e8d4b0', // 配件 + // '#1a3a4d', // 机房环境类 + // '#a2d5c6', // 其他 + // ] + const option = { + grid:{ + left:40, + right:'25%', + bottom:25, + top:30, + }, + xAxis: { + type: 'category', + data: barData.map(item => item.name), + axisLine: { + lineStyle: { + color: '#ccc' + } + }, + axisTick: { + show: false + }, + axisLabel: { + color: '#666', + fontSize: 12, + interval: 0, + rotate: 0 // 可以根据标签长度调整旋转角度 + }, + splitLine: { + show: true, + lineStyle: { + color: 'rgba(204, 204, 204, 1)', + type: 'dashed', + dashOffset: 5 + } + } + }, + yAxis: { + type: 'value', + max: 100, + min: 0, + interval: 25, + axisLine: { + show: true, + lineStyle: { + color: '#ccc' + } + }, + axisTick: { + show: false + }, + splitLine: { + lineStyle: { + color: '#f0f0f0', + type: 'dashed' + } + }, + axisLabel: { + color: '#666', + fontSize: 12, + formatter: '{value}' + } + }, + series: series, + legend: { + orient: 'vertical', + right: 10, + top: 'center', + show:true, + icon: 'rect', + itemWidth: 12, + itemHeight: 3, + itemGap: 30, + textStyle: { + color: '#333', + fontSize: 12 + }, + data: barData.map(item => item.name), + }, + tooltip: { + trigger: 'axis', + backgroundColor: 'rgba(255, 255, 255, 0.9)', + borderColor: '#ccc', + borderWidth: 1, + textStyle: { + color: '#333' + }, + formatter: (params) => { + const data = params[0]; + return ` +
${data.name}
+
数量: ${data.value}
+ `; + } + } + + }; + + return ; +}; +const HomePage = () => { + const workStatItems = [ + { + svg: svg2, + title: '资产维修', + num: '05' + }, + { + svg: svg3, + title: '资产采购', + num: '12' + }, + { + svg: svg4, + title: '资产借用', + num: '25' + }, + { + svg: svg5, + title: '安装实施', + num: '55' + }, + { + svg: svg6, + title: '巡检任务', + num: '49' + }, + { + svg: svg7, + title: '资产报废', + num: '96' + }, + { + svg: svg8, + title: '工作日报', + num: '64' + }, + { + svg: svg9, + title: '资产领用', + num: '46' + }, + ] + const assetShowItems = [ + { + title: '终端', + num: '3852', + color:'rgba(183, 229, 213, 0.2)' + }, + { + title: '服务器', + num: '123', + color:'rgba(186, 212, 219, 1)' + }, + { + title: '网络设备', + num: '3852', + color:'rgba(94, 148, 155, 1)' + }, + { + title: '安全设备', + num: '123', + color:'rgba(16, 117, 142, 1)' + }, + { + title: '外设', + num: '3852', + color:'rgba(182, 221, 224, 1)' + }, + { + title: '附件', + num: '123', + color:'rgba(228, 234, 241, 1)' + }, + { + title: '配件', + num: '3852', + color:'rgba(198, 220, 208, 1)' + }, + { + title: '机房环境类', + num: '123', + color:'rgba(220, 225, 194, 1)' + }, + + ] + const noticeItems = [ + {title: '核心服务器离线，请处理',isRead:false,date:'2025-10-29'}, + {title: '温湿度超阈值，触发告警',isRead:false,date:'2025-10-29'}, + {title: '巡检任务未完成，逾期提醒',isRead:true,date:'2025-10-29'}, + {title: '备件库存不足，需补货',isRead:true,date:'2025-10-29'}, + {title: '设备固件待升级，勿断电',isRead:true,date:'2025-10-29'}, + ] + return ( +
+
+ 紧急告警：本系统将于2025年10月31进行更新，更新时暂时无法实时更新数据，请大家及时做好准备！更新后会自动更新 +
+
+ +
+
+
+ 下午好，Serati Ma! +
+
+ 2025-10-29 星期三 +
+
+ +
+
+
12
+ +
+ 待办工作 + > + + + + +
+
26
+ +
+ 未读消息 + > + + + + + + + + +
+ + <Row gutter={[16,16]} wrap={true} justify={'space-between'} className={styles['marginTop20']}> + { + workStatItems.map(item=>{ + return( + <Col span={5}> + <WorkStatItem svg={item.svg} title={item.title} num={item.num}/> + </Col> + ) + }) + } + </Row> + </div> + </Col> + </Row> + <Row gutter={16} className={styles['marginTop20']}> + <Col span={8}> + <div className={styles['content']}> + <Title title={'库存资产'}/> + <PieChart1></PieChart1> + </div> + </Col> + <Col span={8}> + <div className={styles['content']}> + <Title title={'故障资产'}/> + <PieChart2></PieChart2> + </div> + </Col> + <Col span={8}> + <div className={styles['content']}> + <Title title={'资产展示'}> + + { + assetShowItems.map(item=>{ + return ( +
+
+ +
+ {item.num} +
+
+ {item.title} +
+
+ + ) + }) + } + + + + + + +
+ + +
+ + +
+ + {noticeItems.map(item=>{ + return( +
+ {item.title}{!item.isRead && new} +
{item.date}
+
+ ) + })} +
+ + + + + + + ) +} +export default HomePage diff --git a/src/pages/homepage/HomePage.less b/src/pages/homepage/HomePage.less new file mode 100644 index 0000000..69d08fb --- /dev/null +++ b/src/pages/homepage/HomePage.less @@ -0,0 +1,74 @@ +.homepage{ + background: rgb(240, 247, 247); + height: 93vh; + .homepage-title{ + padding:5px 30px; + background: rgba(255, 255, 255, 0.4); + border-width: 0.2px 0.5px 0.2px 0.5px; + border-style: solid; + border-image-slice: 1; + border-image-source: linear-gradient(96.05deg, #FFFFFF 9.52%, rgba(255, 255, 255, 0.5) 27.03%, rgba(0, 143, 142, 0.5) 60.86%, #0E5A4B 72.09%); + box-shadow: 2px 1px 5px 0 rgba(0, 102, 101, 0.25); + } + .homepage-content{ + width: 100%; + overflow-x: hidden; + //overflow-y: auto; + margin-top: 10px; + background: rgb(240, 247, 247); + .homepage-content-item1{ + width: 100%; + height: 310px; + background-image: url('@/assets/img/homepageBg1.png'); + background-repeat: no-repeat; + background-size: cover; + background-position:center; + padding: 25px 30px; + .homepage-name{ + font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Segoe UI", Roboto, sans-serif; + font-weight: 500; + font-size: 24px; + line-height: 100%; + letter-spacing: 0; + } + .homepage-date{ + margin-top: 10px; + font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Segoe UI", Roboto, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 100%; + color: rgba(99, 127, 124, 1); + } + .homepage-content-item1-content{ + padding: 15px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(211, 255, 242, 0.6) 100%); + font-size: 48px; + } + } + .homepage-content-item2{ + background-color: #fff; + padding: 20px; + height: 100%; + } + } +} +.work-stat-item{ + width: 100%; + height: 100px; + background: linear-gradient(178.02deg, #EAFFF7 8.53%, rgba(221, 255, 255, 0.01) 98.25%); + padding:20px; + display: flex; + justify-content: space-between; + img{ + width: 60px; + height: 60px; + } +} +.marginTop20{ + margin-top: 20px; +} +.content{ + padding:20px; + background-color: #fff; + height: 100%; +} diff --git a/src/pages/homepage/compontent/title.js b/src/pages/homepage/compontent/title.js new file mode 100644 index 0000000..8dceff0 --- /dev/null +++ b/src/pages/homepage/compontent/title.js @@ -0,0 +1,23 @@ +export default (props)=>{ + return( +
+ + {props.title} +
+ ) +} diff --git a/src/pages/nav_system_content/SystemContentList.js b/src/pages/nav_system_content/SystemContentList.js index 4fea4a8..ca535bf 100644 --- a/src/pages/nav_system_content/SystemContentList.js +++ b/src/pages/nav_system_content/SystemContentList.js @@ -104,6 +104,46 @@ const SystemContentList = (props) => { key: "/topnavbar00/business/basic", "label": "基础信息管理" }, + { + path: '/topnavbar00/business/homepage', + icon: 首页, + key: "/topnavbar00/business/homepage", + "label": "首页" + }, + { + path: '/topnavbar00/business/assetmanagement', + icon: 资产管理, + key: "/topnavbar00/business/assetmanagement", + "label": "资产管理", + children: [ + { + path: '/topnavbar00/business/assetmanagement/assetlist', + key: "/topnavbar00/business/assetmanagement/assetlist", + "label": "资产列表" + }, + { + path: '/topnavbar00/business/assetmanagement/assetgrouping', + key: "/topnavbar00/business/assetmanagement/assetgrouping", + "label": "资产分组" + } + ] + } ] setMenuItems(fixedMenuItems) // 初始化默认路由 @@ -188,7 +228,8 @@ const SystemContentList = (props) => { width: isMenuCollapsed ? '80px' : '230px', transition: 'width 0.3s ease', position: 'relative', // 添加相对定位，使按钮可以相对于菜单定位 - overflow: 'unset' + overflow: 'unset', + }} >
{ top: 50%; width: 30px; height: 30px; - background: #FDFDFF; - color: #5C5C5C; - border: 1px solid #FFFFFF; + background: rgba(0, 154, 152, 1); + color: #fff; + border: 0.5px solid; + border-image-source: linear-gradient(98.03deg, #75F7F5 2.41%, rgba(117, 247, 245, 0) 51.5%, rgba(117, 247, 245, 0) 76.06%, rgba(117, 247, 245, 0.5) 94.15%); border-radius: 50%; display: flex; align-items: center; @@ -259,9 +301,9 @@ const SystemContentList = (props) => { box-shadow: 0 0 5px 3px rgba(169, 185, 255, 0.33); } .menuToggleBtn:hover { - border: 1px solid #3D81FF; - background: #3D81FF; - color: white; + //border: 1px solid #3D81FF; + background: color-mix(in srgb, rgba(0, 154, 152, 1) , #fff 30%); + //color: white; transform: scale(1.1); } `} diff --git a/src/pages/nav_system_content/SystemContentList.less b/src/pages/nav_system_content/SystemContentList.less index 93516c5..f8e5638 100644 --- a/src/pages/nav_system_content/SystemContentList.less +++ b/src/pages/nav_system_content/SystemContentList.less @@ -4,9 +4,10 @@ // justify-content: space-between; flex-wrap: nowrap; // padding: 12px; + background-color: rgb(240 247 247) ; .tabBarHeader { - background-color: #fff; + //background-color: #fff; padding: 0; width: 100%; min-height: 62px; @@ -70,6 +71,7 @@ flex-direction: column; height: 100vh; overflow: hidden; + //background-color: #fff; } .leftMenu { @@ -77,11 +79,14 @@ width: 230px; overflow-y: auto; overflow-x: hidden; - background-color: #2E4CD4; - + //background-color: #2E4CD4; + background-image: url("@/assets/img/leftBg.png"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; .ant-menu-inline, .ant-menu-vertical { - background: #2E4CD4 !important; + background: transparent !important; } // 默认情况字体样式和右边距 @@ -127,10 +132,11 @@ .rightContentMain { width: 100%; - //background-color: #ffffff; + background-color: #ffffff; // border-radius: 6px; overflow-y: auto; // height: 100%; overflow: auto; + } -} \ No newline at end of file +} diff --git a/src/pages/topnavbar/TopNavBar.js b/src/pages/topnavbar/TopNavBar.js index 23ac434..61c0bb4 100644 --- a/src/pages/topnavbar/TopNavBar.js +++ b/src/pages/topnavbar/TopNavBar.js @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react' import { history, Outlet, useModel, useDispatch, useLocation, matchRoutes } from '@umijs/max' import styles from './TopNavBar.less' -import { Menu, Row, Col, Avatar, Dropdown, Button } from 'antd' +import {Menu, Row, Col, Avatar, Dropdown, Button, ConfigProvider} from 'antd' import { HomeOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons' import { getPageQuery } from '@/utils/utils' import Logo from '@/assets/logo.png' @@ -12,6 +12,18 @@ const menuItem = [ label: '基础信息管理', key: '/topnavbar00/business/basic', }, + { + label: '首页', + key: '/topnavbar00/business/homepage', + }, + { + label: '资产列表', + key: '/topnavbar00/business/assetmanagement/assetlist', + }, + { + label: '资产分组', + key: '/topnavbar00/business/assetmanagement/assetgrouping', + }, ] const TopNavBar = (props) => { @@ -92,7 +104,53 @@ const TopNavBar = (props) => { ) + const theme={ + token: { + // 核心主题色（修改这里，Input 等组件的激活态会自动同步） + primaryColor: '#00b42a', // 例如修改为蓝色（默认），可改为 #f50、#00b42a 等 + // 可选：补充其他相关变量（如聚焦时的边框色，默认继承 primaryColor） + colorPrimaryHover: '#39c574', // hover 时的颜色 + colorPrimaryActive: '#008743', // 点击时的颜色 + }, + components: { + Switch: { + colorPrimary: '#008743', // 开启状态颜色 + colorBg: '#333', // 关闭状态颜色（默认灰色） + }, + Pagination:{ + colorPrimary:'#39c574', + }, + Tree:{ + colorPrimary:'#006665', + lineColor:'#006665', + checkboxBorderColor:'#006665' + }, + Table:{ + headerBg:'#F0F7F7', + // bodyBg:'#F0F7F7', + }, + Menu:{ + activeBarHeight:0 + }, + Select:{ + activeBorderColor:'#2C9E9D', + colorBorder:'#2C9E9D' + }, + Input:{ + colorBorder:'#2C9E9D' + }, + DatePicker:{ + colorBorder:'#2C9E9D' + }, + Button:{ + colorBorder:'#2C9E9D', + } + }, + } return ( + + +
{/*
@@ -119,6 +177,7 @@ const TopNavBar = (props) => {
*/}
+ ) }