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

演练页面

Browse Source
main
wangyunfei 2 days ago
parent d5525ba633
commit c24e9e3f05
2 changed files with 380 additions and 1 deletions
Show Stats Download Patch File Download Diff File

193
src/pages/business_emergencyDrill/EmergencyDrill.js
Unescape Escape View File

@ -4,6 +4,7 @@ import { ClockCircleOutlined, EnvironmentOutlined, UserOutlined } from '@ant-des
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import styles from './EmergencyDrill.less'; import styles from './EmergencyDrill.less';
import { Import } from '../business_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection'; import { Import } from '../business_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection';
import StandardTable from '@/components/StandardTable';
import iconDrill1 from '../../assets/business_Emergency/iconDrill1.svg'; import iconDrill1 from '../../assets/business_Emergency/iconDrill1.svg';
import iconDrill2 from '../../assets/business_Emergency/iconDrill2.jpg'; import iconDrill2 from '../../assets/business_Emergency/iconDrill2.jpg';
import iconDrill3 from '../../assets/business_Emergency/iconDrill3.svg'; import iconDrill3 from '../../assets/business_Emergency/iconDrill3.svg';
@ -13,6 +14,20 @@ const EmergencyDrill = () => {
const [timeType, setTimeType] = useState('month'); const [timeType, setTimeType] = useState('month');
const chartRef = useRef(null); const chartRef = useRef(null);
const chartInstanceRef = useRef(null); const chartInstanceRef = useRef(null);
// 第三块状态
const [startDate, setStartDate] = useState('2024-08-23 00:00');
const [endDate, setEndDate] = useState('2024-08-23 00:00');
const [companyName, setCompanyName] = useState('');
const [unitName, setUnitName] = useState('');
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: 48,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total) => `共 ${total} 条`,
});
const chartRef2 = useRef(null); const chartRef2 = useRef(null);
const chartInstanceRef2 = useRef(null); const chartInstanceRef2 = useRef(null);
@ -500,6 +515,184 @@ const EmergencyDrill = () => {
<div className={styles.block3}> <div className={styles.block3}>
{/* 第三块内容区域 */} {/* 第三块内容区域 */}
<div className={styles.block3Header}>
<div className={styles.headerLine}></div>
<div className={styles.headerTitle}>应急演练</div>
</div>
<div className={styles.searchBar}>
<div className={styles.searchLeft}>
<div className={styles.searchItem}>
<span className={styles.searchLabel}>演练日期</span>
<input
type="text"
className={styles.dateInput}
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
placeholder="请输入演练日期"
/>
<span className={styles.dateSeparator}>~</span>
<input
type="text"
className={styles.dateInput}
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
placeholder="请输入演练日期"
/>
</div>
<div className={styles.searchItem}>
<input
type="text"
className={styles.companyInput}
value={companyName}
onChange={(e) => setCompanyName(e.target.value)}
placeholder="请输入演练企业"
/>
</div>
<div className={styles.searchItem}>
<select
className={styles.unitSelect}
value={unitName}
onChange={(e) => setUnitName(e.target.value)}
>
<option value="">请选择单位名称</option>
<option value="unit1">单位1</option>
<option value="unit2">单位2</option>
</select>
</div>
<Button
type="primary"
className={styles.searchButton}
icon={<span style={{marginRight: 4}}>🔍</span>}
>
查询
</Button>
</div>
<Button
type="primary"
className={styles.uploadButton}
icon={<span style={{marginRight: 4}}>+</span>}
>
上传
</Button>
</div>
<div className={styles.tableContainer}>
<StandardTable
rowKey="key"
data={{
list: [
{
key: '1',
company: '文登市兴文新材料有限公司',
drillDate: '2025-10-13 02:59:33',
drillType: '化学品泄漏',
drillLocation: '西辛南区6号(旧办厂区南侧)',
participants: 40,
score: '83分',
status: '进行中',
improvements: '住厂涉及工艺、设备、原材料非正常操作的...',
},
{
key: '2',
company: '文登市兴文新材料有限公司',
drillDate: '2025-10-12 03:10:35',
drillType: '火灾',
drillLocation: '新胜北大街9号',
participants: 38,
score: '71分',
status: '已安排',
improvements: '对电工、焊工、危化品操作员等特殊工种人员...',
},
{
key: '3',
company: '合湾新材科技有限公司',
drillDate: '2025-10-10 17:20:18',
drillType: '公共安全',
drillLocation: '如南南庄',
participants: 6,
score: '55分',
status: '已完成',
improvements: '建立高危化学品风险评估机制，对城市生态性...',
},
],
pagination,
}}
columns={[
{
title: '企业',
dataIndex: 'company',
key: 'company',
width: 200,
},
{
title: '演练日期',
dataIndex: 'drillDate',
key: 'drillDate',
width: 150,
},
{
title: '演练类型',
dataIndex: 'drillType',
key: 'drillType',
width: 120,
},
{
title: '演练地点',
dataIndex: 'drillLocation',
key: 'drillLocation',
width: 200,
},
{
title: '参加人数',
dataIndex: 'participants',
key: 'participants',
width: 100,
align: 'center',
},
{
title: '评分',
dataIndex: 'score',
key: 'score',
width: 100,
align: 'center',
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
width: 100,
align: 'center',
render: (status) => {
let className = styles.statusInProgress;
if (status === '已安排') className = styles.statusScheduled;
if (status === '已完成') className = styles.statusCompleted;
return <span className={className}>{status}</span>;
},
},
{
title: '存在问题或改进措施',
dataIndex: 'improvements',
key: 'improvements',
ellipsis: true,
},
{
title: '操作',
key: 'action',
width: 150,
align: 'center',
render: () => (
<div className={styles.actionButtons}>
<span className={styles.actionLink}>查看</span>
<span className={styles.actionLink}>下载</span>
<span className={styles.actionLink} style={{color: '#FF4D4F'}}>删除</span>
</div>
),
},
]}
onChange={(newPagination) => setPagination(newPagination)}
/>
</div>
</div> </div>
</div> </div>
); );

188
src/pages/business_emergencyDrill/EmergencyDrill.less
Unescape Escape View File

@ -829,6 +829,192 @@
.block3 { .block3 {
width: 100%; width: 100%;
flex: 1; flex: 1;
background-color: pink; background-color: #FFFFFF;
padding: 20px;
.block3Header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
.headerLine {
width: 2px;
height: 16px;
background-color: #2E4CD4;
}
.headerTitle {
font-size: 14px;
font-weight: 500;
color: #333333;
}
}
.searchBar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
gap: 12px;
.searchLeft {
display: flex;
gap: 12px;
flex-wrap: wrap;
flex: 1;
.searchItem {
display: flex;
align-items: center;
gap: 8px;
.searchLabel {
font-size: 14px;
color: #333333;
white-space: nowrap;
}
.dateInput {
width: 150px;
height: 32px;
padding: 0 12px;
border: 1px solid #D9D9D9;
border-radius: 4px;
font-size: 14px;
outline: none;
transition: all 0.3s;
&:focus {
border-color: #2E4CD4;
}
&::placeholder {
color: #BFBFBF;
}
}
.dateSeparator {
color: #999999;
margin: 0 4px;
}
.companyInput {
width: 200px;
height: 32px;
padding: 0 12px;
border: 1px solid #D9D9D9;
border-radius: 4px;
font-size: 14px;
outline: none;
transition: all 0.3s;
&:focus {
border-color: #2E4CD4;
}
&::placeholder {
color: #BFBFBF;
}
}
.unitSelect {
width: 200px;
height: 32px;
padding: 0 12px;
border: 1px solid #D9D9D9;
border-radius: 4px;
font-size: 14px;
outline: none;
background-color: #FFFFFF;
cursor: pointer;
transition: all 0.3s;
&:focus {
border-color: #2E4CD4;
}
option {
padding: 8px;
}
}
}
}
.searchButton {
height: 32px;
padding: 0 20px;
border-radius: 4px;
font-size: 14px;
background-color: #2E4CD4;
border-color: #2E4CD4;
&:hover {
background-color: #4A63E6;
border-color: #4A63E6;
}
}
.uploadButton {
height: 32px;
padding: 0 20px;
border-radius: 4px;
font-size: 14px;
background-color: #2E4CD4;
border-color: #2E4CD4;
&:hover {
background-color: #4A63E6;
border-color: #4A63E6;
}
}
}
.tableContainer {
.statusInProgress {
display: inline-block;
background-color: #E6F0FF;
color: #2E4CD4;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
}
.statusScheduled {
display: inline-block;
background-color: #FFF7E6;
color: #FF8C00;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
}
.statusCompleted {
display: inline-block;
background-color: #E6F7ED;
color: #52C41A;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
}
.actionButtons {
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
.actionLink {
color: #2E4CD4;
cursor: pointer;
font-size: 14px;
transition: opacity 0.2s;
&:hover {
opacity: 0.7;
}
}
}
}
} }
} }
Write Preview
Loading…
Cancel
Save