涉危化品企业页面开发

main
jiangxucong 6 days ago
parent b7ec8f0473
commit 559ff884f0

@ -1,10 +1,10 @@
import React, { useState } from 'react';
import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
import styles from './EmergencyPlan.less';
import Swhpqy from './components/swhpqy'; //涉危化品企业
import Whp from './components/whp'; //危化品
import Sgla from './components/sgla'; //事故案例
import Flfg from './components/flfg'; //法律法规
import HazardousChemicalsEnterprise from './components/HazardousChemicalsEnterprise'; //涉危化品企业
import HazardousChemicals from './components/HazardousChemicals'; //危化品
import AccidentCases from './components/AccidentCases'; //事故案例
import LawsAndRegulations from './components/LawsAndRegulations'; //法律法规
import FrameSvg from '@/assets/img/Frame.svg';
import Backg01Png from '@/assets/img/backg01.png';
@ -20,15 +20,15 @@ const SafeMajorHazardList = () => {
const renderContent = () => {
switch(activeTab) {
case 'swhpqy':
return <Swhpqy />;
return <HazardousChemicalsEnterprise />;
case 'whp':
return <Whp />;
return <HazardousChemicals />;
case 'sgla':
return <Sgla />;
return <AccidentCases />;
case 'flfg':
return <Flfg />;
return <LawsAndRegulations />;
default:
return <Swhpqy />;
return <HazardousChemicalsEnterprise />;
}
};

@ -1,12 +1,12 @@
import React, { useState, useEffect } from 'react';
import { Input, Button, Select, message, Modal } from 'antd';
import { Input, Button, Select, message, Modal, Form } from 'antd';
import { SearchOutlined, PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './swhpqy.less';
import styles from './HazardousChemicalsEnterprise.less';
const { Option } = Select;
const Swhpqy = () => {
const HazardousChemicalsEnterprise = () => {
const [loading, setLoading] = useState(false);
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [searchValue, setSearchValue] = useState('');
@ -23,136 +23,122 @@ const Swhpqy = () => {
const [dataSource, setDataSource] = useState([
{
key: '1',
number: '01',
unitName: '文登市兴文新材料有限公司',
name: '国云海',
position: '生产班长',
industry: '石油化工',
region: '--',
contact: '吴静',
mobile: '17898786567',
email: '1878967633@qq.com',
dutyTime: '夜班',
dangerousGoods: '高锰酸钾',
},
{
key: '2',
number: '02',
unitName: '文登市兴文新材料有限公司',
name: '陈志强',
position: '生产班长',
industry: '化学纤维',
region: '--',
contact: '李美斯',
mobile: '17898786567',
email: '1878967633@qq.com',
dutyTime: '白班',
dangerousGoods: '次氯酸钠',
},
{
key: '3',
number: '03',
unitName: '合湾新材科技有限公司',
name: '侯文涛',
position: '班长',
industry: '石油化工',
region: '--',
contact: '何见瑶',
mobile: '17898786567',
email: '1878967633@qq.com',
dutyTime: '白班',
dangerousGoods: '氯氧化钠',
},
{
key: '4',
number: '04',
unitName: '山东万图高分子材料股份有限公司',
name: '宋东',
position: '班长',
industry: '化学纤维',
region: '--',
contact: '李冬娟',
mobile: '17898786567',
email: '1878967633@qq.com',
dutyTime: '夜班',
dangerousGoods: '硫酸',
},
{
key: '5',
number: '05',
unitName: '合鸿新材科技有限公司',
name: '王一声',
position: '班长',
industry: '化学纤维',
region: '--',
contact: '王千英',
mobile: '17898786567',
email: '1878967633@qq.com',
dutyTime: '夜班',
dangerousGoods: '油漆稀释剂',
},
{
key: '6',
number: '06',
unitName: '山东万图高分子材料股份有限公司',
name: '赵小敏',
position: '班长',
industry: '石油化工',
region: '--',
contact: '李勇',
mobile: '17898786567',
email: '1878987633@qq.com',
dutyTime: '夜班',
dangerousGoods: '次氯酸钠',
},
]);
// 表格列配置
const columns = [
{
title: '编号',
dataIndex: 'number',
key: 'number',
width: 80,
},
{
title: '单位名称',
title: '企业名称',
dataIndex: 'unitName',
key: 'unitName',
width: 200,
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
width: 100,
title: '所属行业',
dataIndex: 'industry',
key: 'industry',
width: 120,
},
{
title: '所属园区',
dataIndex: 'region',
key: 'region',
width: 120,
},
{
title: '职务',
dataIndex: 'position',
key: 'position',
title: '安全联系人',
dataIndex: 'contact',
key: 'contact',
width: 120,
},
{
title: '手机号',
title: '联系方式',
dataIndex: 'mobile',
key: 'mobile',
width: 130,
},
{
title: '邮箱',
dataIndex: 'email',
key: 'email',
title: '危险品',
dataIndex: 'dangerousGoods',
key: 'dangerousGoods',
width: 180,
},
{
title: '值班时间',
dataIndex: 'dutyTime',
key: 'dutyTime',
width: 100,
},
{
title: '操作',
key: 'action',
width: 120,
render: (text, record) => (
<div className={styles.actionButtons}>
<Button
type="link"
size="small"
// icon={<EditOutlined />}
onClick={() => handleEdit(record)}
>
修改
</Button>
<Button
type="link"
size="small"
danger
// icon={<DeleteOutlined />}
onClick={() => handleDelete(record)}
>
删除
</Button>
</div>
),
},
// {
// title: '操作',
// key: 'action',
// width: 120,
// render: (text, record) => (
// <div className={styles.actionButtons}>
// <Button
// type="link"
// size="small"
// onClick={() => handleEdit(record)}
// >
// 修改
// </Button>
// <Button
// type="link"
// size="small"
// danger
// onClick={() => handleDelete(record)}
// >
// 删除
// </Button>
// </div>
// ),
// },
];
// 搜索处理
@ -214,31 +200,37 @@ const Swhpqy = () => {
{/* 页面标题 */}
<div className={styles.header}>
<div className={styles.titleBar}></div>
<h2 className={styles.title}>危化品</h2>
<h2 className={styles.title}>危化品企业</h2>
</div>
{/* 搜索和操作区域 */}
<div className={styles.searchBar}>
<div className={styles.searchLeft}>
<Form
layout="inline"
className={styles.searchBar}
onFinish={handleSearch}
>
<Form.Item label="" name="searchValue">
<Input
placeholder='请输入危化品名称'
placeholder='请输入企业名称'
style={{ width: 200 }}
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
allowClear
className={styles.searchInput}
/>
</Form.Item>
<Form.Item>
<Button
type="primary"
icon={<SearchOutlined />}
onClick={handleSearch}
htmlType="submit"
loading={loading}
className={styles.searchButton}
>
查询
</Button>
</div>
</div>
</Form.Item>
</Form>
{/* 数据表格 */}
<div className={styles.tableContainer}>
@ -259,4 +251,4 @@ const Swhpqy = () => {
);
};
export default Swhpqy;
export default HazardousChemicalsEnterprise;

@ -1,7 +1,7 @@
.container {
padding: 20px;
background: #fff;
height:100vh;
height: 100vh;
width: 100%;
box-sizing: border-box;
margin: 0;
@ -29,18 +29,10 @@
}
.searchBar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 5px;
.searchLeft {
display: flex;
align-items: center;
gap: 12px;
.searchInput {
border-radius: 4px !important;
}
@ -55,7 +47,6 @@
border-color: #1e3bb8 !important;
}
}
}
}
@ -81,7 +72,7 @@
// 表格样式优化
.tableContainer {
:global {
.ant-table-thead > tr > th {
.ant-table-thead>tr>th {
background: #F5F5FA;
font-weight: 500;
color: #333333;
@ -89,13 +80,13 @@
text-align: center;
}
.ant-table-tbody > tr > td {
.ant-table-tbody>tr>td {
color: #666666;
font-size: 13px;
text-align: center;
}
.ant-table-tbody > tr:hover > td {
.ant-table-tbody>tr:hover>td {
background: #f5f5f5;
}
Loading…
Cancel
Save