.

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 { Card, Table, Tag, Space, Typography, Progress, Row, Col, Button } from 'antd';
-import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
 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) => (
-                <Tag color={record.statusType === 'success' ? 'green' :
+                <Tag color={record.statusType === 'success' ? 'green' : 
-                    record.statusType === 'warning' ? 'orange' : 'red'}>
+                           record.statusType === 'warning' ? 'orange' : 'red'}>
                     {text}
                 </Tag>
             ),
@@ -226,59 +223,176 @@ const LicenseManagement = () => {
 
     return (
         <div className={styles.licenseManagementContainer}>
-            <div className={styles.topSectionContainer}>
+                <div className={styles.topSectionContainer}>
+                    
+                    <div className={styles.firstBlock}>
+                        <div className={styles.chartHeader}>
+                            <div className={styles.colorBlock}></div>
+                            <span className={styles.chartTitle}>证件类型分布</span>
+                        </div>
+                        <div className={styles.chartContainer}>
+                            <div ref={chartRef} className={styles.chart}></div>
+                        </div>
+                    </div>
 
-                <div className={styles.firstBlock}>
+                    <div className={styles.secondBlock}>
                     <div className={styles.chartHeader}>
                         <div className={styles.colorBlock}></div>
                         <span className={styles.chartTitle}>证件类型分布</span>
                     </div>
                     <div className={styles.chartContainer}>
-                        <div ref={chartRef} className={styles.chart}></div>
+                        {/* 上半部分：进度条和百分比 */}
+                        <div className={styles.progressSection}>
+                            <div className={styles.progressItem}>
+                                <div className={styles.progressLabel}>有效证照</div>
+                                <div className={styles.progressWrapper}>
+                                    <Progress 
+                                        percent={50} 
+                                        strokeColor="#3C7DFF" 
+                                        trailColor="#F0F0F0"
+                                        showInfo={false}
+                                        className={styles.customProgress}
+                                    />
+                                    <span className={styles.progressPercent}>50%</span>
+                                </div>
+                            </div>
+                            
+                            <div className={styles.progressItem}>
+                                <div className={styles.progressLabel}>即将到期</div>
+                                <div className={styles.progressWrapper}>
+                                    <Progress 
+                                        percent={15} 
+                                        strokeColor="#FFC403" 
+                                        trailColor="#F0F0F0"
+                                        showInfo={false}
+                                        className={styles.customProgress}
+                                    />
+                                    <span className={styles.progressPercent}>15%</span>
+                                </div>
+                            </div>
+                            
+                            <div className={styles.progressItem}>
+                                <div className={styles.progressLabel}>已过期</div>
+                                <div className={styles.progressWrapper}>
+                                    <Progress 
+                                        percent={20} 
+                                        strokeColor="#FF3E48" 
+                                        trailColor="#F0F0F0"
+                                        showInfo={false}
+                                        className={styles.customProgress}
+                                    />
+                                    <span className={styles.progressPercent}>20%</span>
+                                </div>
+                            </div>
+                            
+                            <div className={styles.progressItem}>
+                                <div className={styles.progressLabel}>待审核材料</div>
+                                <div className={styles.progressWrapper}>
+                                    <Progress 
+                                        percent={15} 
+                                        strokeColor="#FF8800" 
+                                        trailColor="#F0F0F0"
+                                        showInfo={false}
+                                        className={styles.customProgress}
+                                    />
+                                    <span className={styles.progressPercent}>15%</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* 下半部分：数字统计 */}
+                        <div className={styles.statsSection}>
+                            <Row gutter={[16, 16]}>
+                                <Col span={6}>
+                                    <div className={styles.statItem}>
+                                        <div className={styles.statNumber} style={{color: '#3C7DFF'}}>42</div>
+                                        <div className={styles.statLabel}>总证照数</div>
+                                    </div>
+                                </Col>
+                                <Col span={6}>
+                                    <div className={styles.statItem}>
+                                        <div className={styles.statNumber} style={{color: '#FFC403'}}>8</div>
+                                        <div className={styles.statLabel}>即将过期</div>
+                                    </div>
+                                </Col>
+                                <Col span={6}>
+                                    <div className={styles.statItem}>
+                                        <div className={styles.statNumber} style={{color: '#FF3E48'}}>6</div>
+                                        <div className={styles.statLabel}>已过期</div>
+                                    </div>
+                                </Col>
+                                <Col span={6}>
+                                    <div className={styles.statItem}>
+                                        <div className={styles.statNumber} style={{color: '#FF8800'}}>6</div>
+                                        <div className={styles.statLabel}>待审核材料</div>
+                                    </div>
+                                </Col>
+                            </Row>
+                        </div>
                     </div>
                 </div>
 
-                <div className={styles.secondBlock}>
+
+                <div className={styles.thirdBlock}>
                     <div className={styles.chartHeader}>
                         <div className={styles.colorBlock}></div>
-                        <span className={styles.chartTitle}>证件类型分布</span>
+                        <span className={styles.chartTitle}>临期预警</span>
                     </div>
                     <div className={styles.chartContainer}>
-                       需求
+                        {/* 透明块容器 */}
-
+                        <div className={styles.transparentBlock}>
-                       
+                            {/* 四个垂直分布的卡片 */}
+                            <div className={styles.licenseCard}>
+                                <div className={styles.cardContent}>
+                                    <div className={styles.licenseName}>安全生产许可证</div>
+                                    <div className={styles.licenseNumber}>编号: AQXK-2023-0582</div>
+                                </div>
+                                <div className={styles.expiryTag}>
+                                    <span className={styles.expiryText}>15天后到期</span>
+                                </div>
+                            </div>
+                            
+                            <div className={styles.licenseCard}>
+                                <div className={styles.cardContent}>
+                                    <div className={styles.licenseName}>安全评估报告</div>
+                                    <div className={styles.licenseNumber}>编号: AQPG-2023-0125</div>
+                                </div>
+                                <div className={styles.expiryTag}>
+                                    <span className={styles.expiryText}>30天后到期</span>
+                                </div>
+                            </div>
+                            
+                            <div className={styles.licenseCard}>
+                                <div className={styles.cardContent}>
+                                    <div className={styles.licenseName}>施工资质证书</div>
+                                    <div className={styles.licenseNumber}>编号: SGZZ-2023-0089</div>
+                                </div>
+                                <div className={styles.expiryTag} style={{backgroundColor: '#FFE0E2'}}>
+                                    <span className={styles.expiryText} style={{color: '#FF2526'}}>7天后到期</span>
+                                </div>
+                            </div>
+                            
+                            <div className={styles.licenseCard}>
+                                <div className={styles.cardContent}>
+                                    <div className={styles.licenseName}>应急预案</div>
+                                    <div className={styles.licenseNumber}>编号: YJYA-2023-0045</div>
+                                </div>
+                                <div className={styles.expiryTag} style={{backgroundColor: '#FFE0E2'}}>
+                                    <span className={styles.expiryText} style={{color: '#FF2526'}}>4天后到期</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                     </div>
                 </div>
 
 
-                <div className={styles.thirdBlock}>
-                    待开发
-                </div>
-            </div>
-
-
 
             {/* 证照列表区域 */}
-            <Card className={styles.listCard}>
+            <div className={styles.listCard}>
-                <Title level={4} className={styles.listTitle}>证照列表</Title>
+                <div className={styles.chartHeader}>
-                <div className={styles.listToolbar}>
+                    <div className={styles.colorBlock}></div>
-                    <Search
+                    <span className={styles.chartTitle}>证照列表</span>
-                        placeholder="搜索证照名称或编号..."
-                        className={styles.searchInput}
-                        prefix={<SearchOutlined />}
-                    />
-                    <Select
-                        defaultValue="all"
-                        className={styles.typeFilter}
-                    >
-                        <Option value="all">全部类型</Option>
-                        <Option value="qualification">资质证书</Option>
-                        <Option value="safety">安全三同时</Option>
-                        <Option value="emergency">应急预案</Option>
-                    </Select>
-                    <Button type="primary" icon={<PlusOutlined />} className={styles.addButton}>
-                        新增证照
-                    </Button>
                 </div>
                 <Table
                     columns={columns}
@@ -293,7 +407,7 @@ const LicenseManagement = () => {
                     }}
                     className={styles.licenseTable}
                 />
-            </Card>
+            </div>
         </div>
     );
 };

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;
+        margin-bottom: 8px;
-        // height: 18px;
 
         .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;
+      flex-direction: column;
-      justify-content: center;
+      padding: 10px 16px;
-      font-size: 16px;
+      border-radius: 2px;
-      color: #333;
+
+      .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;
+    padding: 0;
-    border-radius: 8px;
+    padding: 15px 5px 15px 20px;
-    box-shadow: none;
+    height: 35%;
-
+    // display: flex;
-    .listTitle {
+    gap: 15px;
-      margin-bottom: 20px;
+    background-color: #fff;
-      font-size: 16px;
+    // align-items: stretch;
-      font-weight: 600;
-      color: #333;
-    }
 
-    .listToolbar {
+    .chartHeader {
       display: flex;
       align-items: center;
-      gap: 12px;
+      margin-bottom: 8px;
-      margin-bottom: 20px;
+
-
+      .colorBlock {
-      .searchInput {
+        width: 2px;
-        width: 300px;
+        height: 18px;
+        background-color: #2E4CD4;
+        margin-right: 8px;
+        border-radius: 1px;
       }
 
-      .typeFilter {
+      .chartTitle {
-        width: 120px;
+        font-size: 14px;
-      }
+        font-weight: 500;
-
+        color: #333333;
-      .addButton {
-        margin-left: auto;
       }
     }
 
     .licenseTable {
       .ant-table-thead>tr>th {
-        background-color: #fafafa;
+        background-color: #F5F5FA;
-        font-weight: 600;
+        font-weight: 200;
-        color: #333;
+        color: #333333;
+
       }
 
       .ant-table-tbody>tr>td {