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

涉危化品企业页面开发

Browse Source
main
jiangxucong 6 days ago
parent b7ec8f0473
commit 559ff884f0
3 changed files with 120 additions and 137 deletions
Show Stats Download Patch File Download Diff File

18
src/pages/business_emergencyPlan/EmergencyPlan.js
Unescape Escape View File

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

174
src/pages/business_emergencyPlan/components/swhpqy.js → src/pages/business_emergencyPlan/components/HazardousChemicalsEnterprise.js
Unescape Escape View File

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

65
src/pages/business_emergencyPlan/components/swhpqy.less → src/pages/business_emergencyPlan/components/HazardousChemicalsEnterprise.less
Unescape Escape View File

@ -1,7 +1,7 @@
.container { .container {
padding: 20px; padding: 20px;
background: #fff; background: #fff;
height:100vh; height: 100vh;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
@ -12,14 +12,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 15px; margin-bottom: 15px;
.titleBar { .titleBar {
width: 3px; width: 3px;
height: 16px; height: 16px;
background: #2E4CD4; background: #2E4CD4;
margin-right: 12px; margin-right: 12px;
} }
.title { .title {
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
@ -29,47 +29,38 @@
} }
.searchBar { .searchBar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
padding: 5px; padding: 5px;
.searchLeft { .searchInput {
display: flex; border-radius: 4px !important;
align-items: center; }
gap: 12px;
.searchButton {
.searchInput { background-color: #2E4CD4 !important;
border-radius: 4px !important; border-color: #2E4CD4 !important;
} border-radius: 4px !important;
.searchButton { &:hover {
background-color: #2E4CD4 !important; background-color: #1e3bb8 !important;
border-color: #2E4CD4 !important; border-color: #1e3bb8 !important;
border-radius: 4px !important;
&:hover {
background-color: #1e3bb8 !important;
border-color: #1e3bb8 !important;
}
} }
} }
} }
.tableContainer { .tableContainer {
background: #fff; background: #fff;
border-radius: 0px; border-radius: 0px;
overflow: hidden; overflow: hidden;
.actionButtons { .actionButtons {
display: flex; display: flex;
gap: 8px; gap: 8px;
font-size: 10px; font-size: 10px;
justify-content: center; justify-content: center;
.ant-btn-link { .ant-btn-link {
padding: 0; padding: 0;
height: auto; height: auto;
@ -81,40 +72,40 @@
// 表格样式优化 // 表格样式优化
.tableContainer { .tableContainer {
:global { :global {
.ant-table-thead > tr > th { .ant-table-thead>tr>th {
background: #F5F5FA; background: #F5F5FA;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
} }
.ant-table-tbody > tr > td { .ant-table-tbody>tr>td {
color: #666666; color: #666666;
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
} }
.ant-table-tbody > tr:hover > td { .ant-table-tbody>tr:hover>td {
background: #f5f5f5; background: #f5f5f5;
} }
.ant-pagination { .ant-pagination {
margin-top: 10px; margin-top: 10px;
text-align: right; text-align: right;
} }
// 覆盖操作列按钮样式 // 覆盖操作列按钮样式
.ant-btn.ant-btn-sm { .ant-btn.ant-btn-sm {
font-size: 13px !important; font-size: 13px !important;
height: 20px !important; height: 20px !important;
padding: 0px 4px !important; padding: 0px 4px !important;
} }
.ant-btn-link.ant-btn-sm { .ant-btn-link.ant-btn-sm {
font-size: 13px !important; font-size: 13px !important;
height: auto !important; height: auto !important;
padding: 0 !important; padding: 0 !important;
} }
} }
} }
Write Preview
Loading…
Cancel
Save