From f24ad5e7f531a570b58740aaa53661d779dc7159 Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Mon, 13 Oct 2025 17:57:27 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../module/EvaluationReport.less              |   4 +-
 .../DischargePermitManagement.js              |   9 +
 .../module/secondary_menu/PermitStatistics.js | 337 +++++++++++++++++-
 .../secondary_menu/PermitStatistics.less      | 199 ++++++++++-
 4 files changed, 522 insertions(+), 27 deletions(-)

diff --git a/src/pages/business_envInformation/module/EvaluationReport.less b/src/pages/business_envInformation/module/EvaluationReport.less
index 62d85ec..dfb6208 100644
--- a/src/pages/business_envInformation/module/EvaluationReport.less
+++ b/src/pages/business_envInformation/module/EvaluationReport.less
@@ -12,7 +12,7 @@
 
         :global(.ant-tabs-nav) {
             margin: 0;
-            padding: 0 20px;
+            padding: 0 0px;
             background-color: transparent;
             border-bottom: none;
         }
@@ -79,7 +79,7 @@
 
         :global(.ant-tabs-content-holder) {
             height: calc(100% - 60px);
-            padding: 20px;
+            // padding: 20px;
 
             .ant-tabs-content {
                 height: 100%;
diff --git a/src/pages/business_envInformation/module/secondary_menu/DischargePermitManagement.js b/src/pages/business_envInformation/module/secondary_menu/DischargePermitManagement.js
index 911d6a2..c15dc01 100644
--- a/src/pages/business_envInformation/module/secondary_menu/DischargePermitManagement.js
+++ b/src/pages/business_envInformation/module/secondary_menu/DischargePermitManagement.js
@@ -7,6 +7,15 @@ const DischargePermitManagement = () => {
             <div className={styles.content}>
                 <h2>排污许可执行管理</h2>
                 <p>此页面用于展示和管理排污许可的执行情况</p>
+                <p>此页面用于展示和管理排污许可的执行情况</p>
+                <p>此页面用于展示和管理排污许可的执行情况</p>
+                <p>此页面用于展示和管理排污许可的执行情况</p>
+                <p>此页面用于展示和管理排污许可的执行情况</p>
+                <p>此页面用于展示和管理排污许可的执行情况</p>
+                <p>此页面用于展示和管理排污许可的执行情况</p>
+                <p>此页面用于展示和管理排污许可的执行情况</p>
+                <p>此页面用于展示和管理排污许可的执行情况</p>
+                <p>此页面用于展示和管理排污许可的执行情况</p>
                 {/* 这里可以添加具体的排污许可管理表格和功能 */}
             </div>
         </div>
diff --git a/src/pages/business_envInformation/module/secondary_menu/PermitStatistics.js b/src/pages/business_envInformation/module/secondary_menu/PermitStatistics.js
index d2d34b1..94a4739 100644
--- a/src/pages/business_envInformation/module/secondary_menu/PermitStatistics.js
+++ b/src/pages/business_envInformation/module/secondary_menu/PermitStatistics.js
@@ -1,14 +1,339 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Form, Input, Button, DatePicker, Space, Modal, Select } from 'antd';
+import { SearchOutlined, RedoOutlined, CloseOutlined, EyeOutlined, DeleteOutlined, PlusOutlined, UploadOutlined, EditOutlined, DownloadOutlined } from '@ant-design/icons';
+import StandardTable from '@/components/StandardTable';
 import styles from './PermitStatistics.less';
+import licence1 from '@/assets/business_envinformation/licence1.svg';
+import licence2 from '@/assets/business_envinformation/licence2.svg';
 
 const PermitStatistics = () => {
+    const [form] = Form.useForm();
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    const [currentImage, setCurrentImage] = useState(null);
+    const [dataSource, setDataSource] = useState([
+        {
+            key: 1,
+            administrativeRegion: '榆林市',
+            permitNumber: '51669811',
+            industryCategory: '信用风险管理与法律防',
+            companyName: '北京那蓝国际贸易有限公司',
+            validityPeriod: '5年',
+            issueDate: '2025-08-15',
+            original: '附件',
+            duplicate: '附件',
+        },
+        {
+            key: 2,
+            administrativeRegion: '拉萨市',
+            permitNumber: '34887875',
+            industryCategory: '涉外警务',
+            companyName: '中潮石林企业咨询(上海)有限公司北京分公司',
+            validityPeriod: '5年',
+            issueDate: '2025-08-09',
+            original: '附件',
+            duplicate: '附件',
+        },
+        {
+            key: 3,
+            administrativeRegion: '长家界市',
+            permitNumber: '1716652546',
+            industryCategory: '环境设计',
+            companyName: '水木晨曦(北京)科技有限公司',
+            validityPeriod: '5年',
+            issueDate: '2025-08-17',
+            original: '附件',
+            duplicate: '附件',
+        },
+        {
+            key: 4,
+            administrativeRegion: '马潭市',
+            permitNumber: '384654762',
+            industryCategory: '电子竞技运动与管理',
+            companyName: '亚商桥(北京)咨询有限公司',
+            validityPeriod: '5年',
+            issueDate: '2025-08-17',
+            original: '附件',
+            duplicate: '附件',
+        },
+        {
+            key: 5,
+            administrativeRegion: '交州市',
+            permitNumber: '34669295254',
+            industryCategory: '精算学',
+            companyName: '中讯通讯科技有限公司',
+            validityPeriod: '5年',
+            issueDate: '2025-08-13',
+            original: '附件',
+            duplicate: '附件',
+        },
+        {
+            key: 6,
+            administrativeRegion: '驻马店市',
+            permitNumber: '4347052411',
+            industryCategory: '数字媒体艺术',
+            companyName: '嘉实瑞沃德(北京)商贸有限公司',
+            validityPeriod: '5年',
+            issueDate: '2025-08-21',
+            original: '附件',
+            duplicate: '附件',
+        },
+        {
+            key: 7,
+            administrativeRegion: '三亚市',
+            permitNumber: '388946691',
+            industryCategory: '技术侦察学',
+            companyName: '中大国际文化有限公司',
+            validityPeriod: '5年',
+            issueDate: '2025-08-17',
+            original: '附件',
+            duplicate: '附件',
+        },
+        {
+            key: 8,
+            administrativeRegion: '美湖市',
+            permitNumber: '7190228566',
+            industryCategory: '财政学',
+            companyName: '嘉实瑞沃德(北京)商贸有限公司',
+            validityPeriod: '5年',
+            issueDate: '2025-08-20',
+            original: '附件',
+            duplicate: '附件',
+        },
+        {
+            key: 9,
+            administrativeRegion: '东营市',
+            permitNumber: '6656363924',
+            industryCategory: '保险学',
+            companyName: '北京清丰国际医院管理有限公司',
+            validityPeriod: '5年',
+            issueDate: '2025-06-27',
+            original: '附件',
+            duplicate: '附件',
+        },
+        {
+            key: 10,
+            administrativeRegion: '九龙',
+            permitNumber: '622145211',
+            industryCategory: '英语',
+            companyName: '北京庆奔科贸有限公司',
+            validityPeriod: '5年',
+            issueDate: '2025-08-28',
+            original: '附件',
+            duplicate: '附件',
+        },
+    ]);
+
+    const columns = [
+        {
+            title: '序号',
+            dataIndex: 'key',
+            key: 'key',
+            width: 80,
+            align: 'center',
+        },
+        {
+            title: '行政区',
+            dataIndex: 'administrativeRegion',
+            key: 'administrativeRegion',
+            width: 120,
+        },
+        {
+            title: '许可证编号',
+            dataIndex: 'permitNumber',
+            key: 'permitNumber',
+            width: 130,
+        },
+        {
+            title: '行业类别',
+            dataIndex: 'industryCategory',
+            key: 'industryCategory',
+            width: 200,
+        },
+        {
+            title: '企业名称',
+            dataIndex: 'companyName',
+            key: 'companyName',
+            width: 230,
+        },
+        {
+            title: '有效期限',
+            dataIndex: 'validityPeriod',
+            key: 'validityPeriod',
+            width: 80,
+            align: 'center',
+        },
+        {
+            title: '发证日期',
+            dataIndex: 'issueDate',
+            key: 'issueDate',
+            width: 120,
+            align: 'center',
+        },
+        {
+            title: '正本',
+            dataIndex: 'original',
+            key: 'original',
+            width: 80,
+            align: 'center',
+            render: () => <a style={{ color: '#0080FF' }} onClick={() => { setCurrentImage(licence1); setIsModalVisible(true); }}>附件</a>
+        },
+        {
+            title: '副本',
+            dataIndex: 'duplicate',
+            key: 'duplicate',
+            width: 120,
+            align: 'center',
+            render: () => <a style={{ color: '#0080FF' }} onClick={() => { setCurrentImage(licence2); setIsModalVisible(true); }}>附件</a>
+        },
+        {
+            title: '操作',
+            key: 'action',
+            width: 140,
+            align: 'center',
+            render: (_, record) => (
+                <Space size={13}>
+                    <EyeOutlined 
+                        style={{ color: '#7ee370', fontSize: 16, cursor: 'pointer' }} 
+                        onClick={() => handleView(record)}
+                    />
+                    <EditOutlined 
+                        style={{ color: '#1890ff', fontSize: 16, cursor: 'pointer' }} 
+                        onClick={() => handleEdit(record)}
+                    />
+                    <DownloadOutlined 
+                        style={{ color: '#7ee370', fontSize: 16, cursor: 'pointer' }} 
+                        onClick={() => handleDownload(record)}
+                    />
+                    <DeleteOutlined 
+                        style={{ color: '#ff7e72', fontSize: 16, cursor: 'pointer' }} 
+                        onClick={() => handleDelete(record)}
+                    />
+                </Space>
+            ),
+        },
+    ];
+
+    const handleSearch = (values) => {
+        console.log('搜索参数:', values);
+        // TODO: 实现搜索功能
+    };
+
+    const handleReset = () => {
+        form.resetFields();
+        // TODO: 重置搜索
+    };
+
+    const handleView = (record) => {
+        console.log('查看:', record);
+        // TODO: 实现查看功能
+    };
+
+    const handleEdit = (record) => {
+        console.log('编辑:', record);
+        // TODO: 实现编辑功能
+    };
+
+    const handleDelete = (record) => {
+        console.log('删除:', record);
+        // TODO: 实现删除功能
+    };
+
+    const handleAdd = () => {
+        console.log('新增');
+        // TODO: 实现新增功能
+    };
+
+    const handleImport = () => {
+        console.log('导入');
+        // TODO: 实现导入功能
+    };
+
+    const handleQuery = () => {
+        console.log('查询');
+        // TODO: 实现查询功能
+    };
+
     return (
-        <div className={styles.container}>
-            <div className={styles.content}>
-                <h2>许可证信息统计表</h2>
-                <p>此页面用于展示和管理各类许可证的统计信息</p>
-                {/* 这里可以添加具体的许可证统计表格和图表 */}
+        <div className={styles.permitContainer}>
+            {/* 第一块：操作按钮和筛选条件 */}
+            <div className={styles.searchSection}>
+                <div className={styles.leftButtons}>
+                    <Button 
+                        type="primary" 
+                        icon={<PlusOutlined />} 
+                        onClick={handleAdd}
+                        className={styles.addButton}
+                    >
+                        新增
+                    </Button>
+                    <Button 
+                        icon={<UploadOutlined />} 
+                        onClick={handleImport}
+                        className={styles.importButton}
+                    >
+                        导入
+                    </Button>
+                </div>
+                
+                <div className={styles.rightControls}>
+                    <span className={styles.filterLabel}>筛选条件</span>
+                    <Select 
+                        placeholder="请选择" 
+                        style={{ width: 140, height: 28 }}
+                        allowClear
+                        className={styles.selectInput}
+                    />
+                    
+                    <Input 
+                        placeholder="请输入" 
+                        style={{ width: 160, height: 28 }}
+                    />
+                    <Button 
+                        onClick={handleQuery}
+                        className={styles.queryButton}
+                    >
+                        查询
+                    </Button>
+                    <Button 
+                        onClick={handleReset}
+                        className={styles.resetButton}
+                    >
+                        重置
+                    </Button>
+                </div>
             </div>
+
+            {/* 第二块：表格 */}
+            <div className={styles.tableSection}>
+                <StandardTable
+                    columns={columns}
+                    data={{
+                        list: dataSource,
+                        pagination: {
+                            total: dataSource.length,
+                            pageSize: 10,
+                            currentPage: 1,
+                            showTotal: (total) => `共 ${total} 条`,
+                        }
+                    }}
+                />
+            </div>
+
+            {/* 图片弹窗 */}
+            <Modal
+                open={isModalVisible}
+                onCancel={() => setIsModalVisible(false)}
+                footer={null}
+                closeIcon={<CloseOutlined style={{ color: '#fff', fontSize: 20 }} />}
+                width="auto"
+                centered
+                styles={{
+                    mask: { backgroundColor: '#10101080' },
+                    content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+                }}
+            >
+                {currentImage && <img src={currentImage} alt="许可证" style={{ width: '100%', display: 'block' }} />}
+            </Modal>
         </div>
     );
 };
diff --git a/src/pages/business_envInformation/module/secondary_menu/PermitStatistics.less b/src/pages/business_envInformation/module/secondary_menu/PermitStatistics.less
index f51b9bd..54aa30e 100644
--- a/src/pages/business_envInformation/module/secondary_menu/PermitStatistics.less
+++ b/src/pages/business_envInformation/module/secondary_menu/PermitStatistics.less
@@ -1,26 +1,187 @@
-.container {
+.permitContainer {
     width: 100%;
     height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    // padding: 20px;
     background-color: #fff;
-    padding: 20px;
-
-    .content {
-        text-align: center;
-        
-        h2 {
-            font-size: 24px;
-            color: #333;
-            margin-bottom: 16px;
-            font-weight: 500;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+
+    .searchSection {
+        padding: 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+
+        .leftButtons {
+            display: flex;
+            gap: 12px;
+
+            .addButton {
+                background-color: #52c41a;
+                border-color: #52c41a;
+                color: white;
+                height: 32px;
+                border-radius: 4px;
+                display: flex;
+                align-items: center;
+                gap: 4px;
+
+                &:hover {
+                    background-color: #73d13d;
+                    border-color: #73d13d;
+                }
+            }
+
+            .importButton {
+                background-color: white;
+                border-color: #d9d9d9;
+                color: #333;
+                height: 32px;
+                border-radius: 4px;
+
+                &:hover {
+                    border-color: #40a9ff;
+                    color: #40a9ff;
+                }
+            }
+        }
+
+        .rightControls {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+
+            .filterLabel {
+                color: #333;
+                font-size: 14px;
+                white-space: nowrap;
+            }
+
+            .queryButton {
+                background-color: #52c41a;
+                border-color: #52c41a;
+                color: white;
+                height: 28px;
+                border-radius: 4px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                &:hover {
+                    background-color: #73d13d;
+                    border-color: #73d13d;
+                }
+            }
+
+            .selectInput {
+                :global {
+                    .ant-select-selector {
+                        display: flex;
+                        align-items: center;
+                        height: 28px !important;
+                    }
+                    
+                    .ant-select-selection-item {
+                        display: flex;
+                        align-items: center;
+                        line-height: 1;
+                    }
+                    
+                    .ant-select-selection-placeholder {
+                        display: flex;
+                        align-items: center;
+                        line-height: 1;
+                    }
+                }
+            }
         }
-        
-        p {
-            font-size: 16px;
-            color: #666;
-            margin: 0;
+    }
+
+    .tableSection {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 0 20px 0;
+      
+        :global {
+            .ant-spin-nested-loading {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+                margin: 0;
+                padding: 0;
+
+                .ant-spin-container {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    overflow: hidden;
+                    margin: 0;
+                    padding: 0;
+
+                    .ant-table-wrapper {
+                        flex: 1;
+                        display: flex;
+                        flex-direction: column;
+                        overflow: hidden;
+                        margin: 0;
+                        padding: 0;
+
+                        .ant-table {
+                            flex: 1;
+                            overflow: auto;
+                            margin: 0;
+                        }
+
+                        .ant-table-pagination {
+                            flex-shrink: 0;
+                      
+                        }
+                    }
+                }
+            }
+
+            .ant-table {
+                font-size: 12px;
+
+                .ant-table-thead > tr > th {
+                    background-color: #fafafa;
+                    font-weight: 400;
+                    color: #000000D9;
+                    border-right: none;
+                    text-align: center;
+                }
+
+                .ant-table-tbody > tr > td {
+                    border-right: none;
+                    color: #000000D9;
+                    font-weight: 400;
+                    text-align: center;
+                }
+
+                .ant-table-tbody > tr:hover > td {
+                    background-color: #f5f5f5;
+                }
+
+                a {
+                    color: #1890ff;
+                    text-decoration: none;
+
+                    &:hover {
+                        color: #40a9ff;
+                    }
+                }
+            }
+
+            .ant-pagination {
+                text-align: right;
+                margin-top: 70px !important;
+            }
         }
     }
 }