jiangxucong
/
dq-ems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面

Browse Source
main
wangyunfei 2 weeks ago
parent 95c99151f5
commit f24ad5e7f5
4 changed files with 522 additions and 27 deletions
Show Stats Download Patch File Download Diff File

4
src/pages/business_envInformation/module/EvaluationReport.less
Unescape Escape View File

@ -12,7 +12,7 @@
:global(.ant-tabs-nav) { :global(.ant-tabs-nav) {
margin: 0; margin: 0;
padding: 0 20px; padding: 0 0px;
background-color: transparent; background-color: transparent;
border-bottom: none; border-bottom: none;
} }
@ -79,7 +79,7 @@
:global(.ant-tabs-content-holder) { :global(.ant-tabs-content-holder) {
height: calc(100% - 60px); height: calc(100% - 60px);
padding: 20px; // padding: 20px;
.ant-tabs-content { .ant-tabs-content {
height: 100%; height: 100%;

9
src/pages/business_envInformation/module/secondary_menu/DischargePermitManagement.js
Unescape Escape View File

@ -7,6 +7,15 @@ const DischargePermitManagement = () => {
<div className={styles.content}> <div className={styles.content}>
<h2>排污许可执行管理</h2> <h2>排污许可执行管理</h2>
<p>此页面用于展示和管理排污许可的执行情况</p> <p>此页面用于展示和管理排污许可的执行情况</p>
<p>此页面用于展示和管理排污许可的执行情况</p>
<p>此页面用于展示和管理排污许可的执行情况</p>
<p>此页面用于展示和管理排污许可的执行情况</p>
<p>此页面用于展示和管理排污许可的执行情况</p>
<p>此页面用于展示和管理排污许可的执行情况</p>
<p>此页面用于展示和管理排污许可的执行情况</p>
<p>此页面用于展示和管理排污许可的执行情况</p>
<p>此页面用于展示和管理排污许可的执行情况</p>
<p>此页面用于展示和管理排污许可的执行情况</p>
{/* 这里可以添加具体的排污许可管理表格和功能 */} {/* 这里可以添加具体的排污许可管理表格和功能 */}
</div> </div>
</div> </div>

337
src/pages/business_envInformation/module/secondary_menu/PermitStatistics.js
Unescape Escape View File

@ -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 styles from './PermitStatistics.less';
import licence1 from '@/assets/business_envinformation/licence1.svg';
import licence2 from '@/assets/business_envinformation/licence2.svg';
const PermitStatistics = () => { 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 ( return (
<div className={styles.container}> <div className={styles.permitContainer}>
<div className={styles.content}> {/* 第一块：操作按钮和筛选条件 */}
<h2>许可证信息统计表</h2> <div className={styles.searchSection}>
<p>此页面用于展示和管理各类许可证的统计信息</p> <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>
{/* 第二块：表格 */}
<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> </div>
); );
}; };

199
src/pages/business_envInformation/module/secondary_menu/PermitStatistics.less
Unescape Escape View File

@ -1,26 +1,187 @@
.container { .permitContainer {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; // padding: 20px;
align-items: center;
justify-content: center;
background-color: #fff; background-color: #fff;
padding: 20px; display: flex;
flex-direction: column;
.content { margin: 0;
text-align: center; padding: 0;
h2 { .searchSection {
font-size: 24px; padding: 20px;
color: #333; display: flex;
margin-bottom: 16px; justify-content: space-between;
font-weight: 500; 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; .tableSection {
color: #666; flex: 1;
margin: 0; 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;
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save