From 741d91fdd3377787dad62910d06279e429820ed8 Mon Sep 17 00:00:00 2001 From: wangyunfei <1224056307@qq,com> Date: Wed, 15 Oct 2025 18:25:17 +0800 Subject: [PATCH] . --- src/assets/business_basic/background_lqyj.svg | 14 + .../components/LicenseManagement.js | 198 +++++++++--- .../components/LicenseManagement.less | 290 ++++++++++++++++-- 3 files changed, 427 insertions(+), 75 deletions(-) create mode 100644 src/assets/business_basic/background_lqyj.svg diff --git a/src/assets/business_basic/background_lqyj.svg b/src/assets/business_basic/background_lqyj.svg new file mode 100644 index 0000000..13c7204 --- /dev/null +++ b/src/assets/business_basic/background_lqyj.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/pages/business_basic/components/LicenseManagement.js b/src/pages/business_basic/components/LicenseManagement.js index 2e3f672..cbcb408 100644 --- a/src/pages/business_basic/components/LicenseManagement.js +++ b/src/pages/business_basic/components/LicenseManagement.js @@ -1,13 +1,10 @@ import React, { useEffect, useRef } from 'react'; -import { Card, Input, Select, Button, Table, Tag, Space, Typography } from 'antd'; -import { SearchOutlined, PlusOutlined } from '@ant-design/icons'; +import { Card, Table, Tag, Space, Typography, Progress, Row, Col, Button } from 'antd'; import * as echarts from 'echarts'; import styles from './LicenseManagement.less'; import icon_echart from '@/assets/business_basic/icon_echart.svg'; const { Title } = Typography; -const { Search } = Input; -const { Option } = Select; const LicenseManagement = () => { const chartRef = useRef(null); @@ -26,7 +23,7 @@ const LicenseManagement = () => { useEffect(() => { if (chartRef.current) { const chart = echarts.init(chartRef.current); - + const option = { tooltip: { trigger: 'item', @@ -204,8 +201,8 @@ const LicenseManagement = () => { key: 'status', width: 120, render: (text, record) => ( - + {text} ), @@ -226,59 +223,176 @@ const LicenseManagement = () => { return (
-
+
+ +
+
+
+ 证件类型分布 +
+
+
+
+
-
+
证件类型分布
-
+ {/* 上半部分：进度条和百分比 */} +
+
+
有效证照
+
+ + 50% +
+
+ +
+
即将到期
+
+ + 15% +
+
+ +
+
已过期
+
+ + 20% +
+
+ +
+
待审核材料
+
+ + 15% +
+
+
+ + {/* 下半部分：数字统计 */} +
+ + +
+
42
+
总证照数
+
+ + +
+
8
+
即将过期
+
+ + +
+
6
+
已过期
+
+ + +
+
6
+
待审核材料
+
+ + +
-
+ +
- 证件类型分布 + 临期预警
- 需求 - - + {/* 透明块容器 */} +
+ {/* 四个垂直分布的卡片 */} +
+
+
安全生产许可证
+
编号: AQXK-2023-0582
+
+
+ 15天后到期 +
+
+ +
+
+
安全评估报告
+
编号: AQPG-2023-0125
+
+
+ 30天后到期 +
+
+ +
+
+
施工资质证书
+
编号: SGZZ-2023-0089
+
+
+ 7天后到期 +
+
+ +
+
+
应急预案
+
编号: YJYA-2023-0045
+
+
+ 4天后到期 +
+
+
+
-
- 待开发 -
-
- - {/* 证照列表区域 */} - - 证照列表 -
- } - /> - - +
+
+
+ 证照列表
{ }} className={styles.licenseTable} /> - + ); }; diff --git a/src/pages/business_basic/components/LicenseManagement.less b/src/pages/business_basic/components/LicenseManagement.less index 0fa0f53..96072ed 100644 --- a/src/pages/business_basic/components/LicenseManagement.less +++ b/src/pages/business_basic/components/LicenseManagement.less @@ -48,11 +48,77 @@ height: 100%; min-height: 200px; } + + // 进度条区域样式 + .progressSection { + margin-bottom: 20px; + + .progressItem { + margin-bottom: 16px; + + .progressLabel { + font-size: 12px; + color: #666; + margin-bottom: 8px; + font-weight: 400; + } + + .progressWrapper { + display: flex; + align-items: center; + gap: 12px; + + .customProgress { + flex: 1; + + :global(.ant-progress-bg) { + height: 8px !important; + border-radius: 4px; + } + + :global(.ant-progress-outer) { + .ant-progress-inner { + background-color: #F0F0F0; + border-radius: 4px; + } + } + } + + .progressPercent { + font-size: 12px; + color: #333; + font-weight: 500; + min-width: 30px; + text-align: right; + } + } + } + } + + // 数字统计区域样式 + .statsSection { + .statItem { + text-align: center; + padding: 8px; + + .statNumber { + font-size: 24px; + font-weight: 600; + line-height: 1.2; + margin-bottom: 4px; + } + + .statLabel { + font-size: 12px; + color: #666; + font-weight: 400; + } + } + } } } .secondBlock { - width: 30%; background-color: #fff; display: flex; @@ -63,8 +129,7 @@ .chartHeader { display: flex; align-items: center; - margin-bottom: 16px; - // height: 18px; + margin-bottom: 8px; .colorBlock { width: 2px; @@ -78,61 +143,220 @@ font-size: 16px; font-weight: 500; color: #333333; - line-height: 18px; + // line-height: 18px; } } + .chartContainer { + flex: 1; + width: 100%; + position: relative; + // 进度条区域样式 + .progressSection { + // margin-bottom: 20px; + + .progressItem { + // margin-bottom: 16px; + + .progressLabel { + font-size: 10px; + color: #666; + // margin-bottom: 8px; + font-weight: 400; + } + + .progressWrapper { + display: flex; + align-items: center; + gap: 5px; + + .customProgress { + flex: 1; + + :global(.ant-progress-bg) { + height: 8px !important; + border-radius: 4px; + } + + :global(.ant-progress-outer) { + .ant-progress-inner { + background-color: #F0F0F0; + border-radius: 4px; + } + } + } + + .progressPercent { + font-size: 12px; + color: #333; + font-weight: 500; + min-width: 30px; + text-align: right; + } + } + } + } + + // 数字统计区域样式 + .statsSection { + .statItem { + text-align: center; + padding: 0px 2px 2px 2px; + + .statNumber { + font-size: 22px; + font-weight: 600; + line-height: 1.2; + margin-bottom: 4px; + } + + .statLabel { + font-size: 12px; + color: #666; + font-weight: 400; + } + } + } + } } .thirdBlock { flex: 1; + background-image: url('@/assets/business_basic/background_lqyj.svg'); background-color: #fff; + background-repeat: no-repeat; + background-size: cover; + background-position: center; display: flex; - align-items: center; - justify-content: center; - font-size: 16px; - color: #333; + flex-direction: column; + padding: 10px 16px; + border-radius: 2px; + + .chartHeader { + display: flex; + align-items: center; + margin-bottom: 8px; + + .colorBlock { + width: 2px; + height: 18px; + background-color: #2E4CD4; + margin-right: 8px; + border-radius: 1px; + } + + .chartTitle { + font-size: 16px; + font-weight: 500; + color: #333333; + } + } + + .chartContainer { + flex: 1; + width: 100%; + position: relative; + + // 透明块容器样式 + .transparentBlock { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 8px; + padding: 4px 8px; + + .licenseCard { + width: 60%; + height: auto; + background-color: #FFF9F4; + border: 1px solid #FFD7BB; + border-radius: 2px; + padding: 5px 8px; + display: flex; + justify-content: space-between; + align-items: center; + // box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + + .cardContent { + flex: 1; + display: flex; + flex-direction: column; + gap: 4px; + + .licenseName { + font-size: 12px; + font-weight: 500; + color: #333; + line-height: 1.2; + } + + .licenseNumber { + font-size: 12px; + color: #666; + font-weight: 400; + } + } + + .expiryTag { + width: 38%; + background-color: #FFEDDE; + border-radius: 2px; + padding: 5px 12px; + margin-left: 12px; + + + .expiryText { + font-size: 12px; + font-weight: 500; + display: flex; + align-items: center; + color: #D46B08; + } + } + } + } + } } } .listCard { - border: none; - border-radius: 8px; - box-shadow: none; - - .listTitle { - margin-bottom: 20px; - font-size: 16px; - font-weight: 600; - color: #333; - } + padding: 0; + padding: 15px 5px 15px 20px; + height: 35%; + // display: flex; + gap: 15px; + background-color: #fff; + // align-items: stretch; - .listToolbar { + .chartHeader { display: flex; align-items: center; - gap: 12px; - margin-bottom: 20px; - - .searchInput { - width: 300px; + margin-bottom: 8px; + + .colorBlock { + width: 2px; + height: 18px; + background-color: #2E4CD4; + margin-right: 8px; + border-radius: 1px; } - .typeFilter { - width: 120px; - } - - .addButton { - margin-left: auto; + .chartTitle { + font-size: 14px; + font-weight: 500; + color: #333333; } } .licenseTable { .ant-table-thead>tr>th { - background-color: #fafafa; - font-weight: 600; - color: #333; + background-color: #F5F5FA; + font-weight: 200; + color: #333333; + } .ant-table-tbody>tr>td {