|
|
|
|
@ -1,10 +1,10 @@
|
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
|
import { Input, Button, Select, message, Modal } from 'antd';
|
|
|
|
|
import { Input, Button, Select, message, Modal, DatePicker } from 'antd';
|
|
|
|
|
import { SearchOutlined, PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
|
|
|
|
|
import StandardTable from '@/components/StandardTable';
|
|
|
|
|
import styles from './jjjl.less';
|
|
|
|
|
|
|
|
|
|
import iconsc from '@/assets/yjzygl/iconsc.svg';
|
|
|
|
|
import iconDrill5 from '@/assets/business_Emergency/iconDrill5.svg';
|
|
|
|
|
|
|
|
|
|
const { Option } = Select;
|
|
|
|
|
|
|
|
|
|
@ -12,6 +12,7 @@ const Jjjl = () => {
|
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
|
|
|
|
const [searchValue, setSearchValue] = useState(undefined);
|
|
|
|
|
const [dateRange, setDateRange] = useState([null, null]);
|
|
|
|
|
const [pagination, setPagination] = useState({
|
|
|
|
|
current: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
@ -26,79 +27,67 @@ const Jjjl = () => {
|
|
|
|
|
{
|
|
|
|
|
key: '1',
|
|
|
|
|
number: '01',
|
|
|
|
|
fireName: '消防点一',
|
|
|
|
|
waterPointName: '消防池 01',
|
|
|
|
|
hydrantCount: 97,
|
|
|
|
|
hydrantLocation: '一楼走廊',
|
|
|
|
|
range: 97,
|
|
|
|
|
waterType: '企业消防水池',
|
|
|
|
|
personInCharge: '冯钰涛',
|
|
|
|
|
fireImage: '点击查看图片',
|
|
|
|
|
remarks: '无',
|
|
|
|
|
alarmTime: '2025-10-13 14:35:18',
|
|
|
|
|
reporter: '国云海',
|
|
|
|
|
accidentTime: '2025-10-11 11:22:42',
|
|
|
|
|
accidentType: '仓库失火',
|
|
|
|
|
accidentAddress: '光明街道光明南街26号',
|
|
|
|
|
alarmPerson: '国云海',
|
|
|
|
|
remarks: '备注一',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '2',
|
|
|
|
|
number: '02',
|
|
|
|
|
fireName: '消防点二',
|
|
|
|
|
waterPointName: '消防池 02',
|
|
|
|
|
hydrantCount: 96,
|
|
|
|
|
hydrantLocation: '二楼走廊',
|
|
|
|
|
range: 96,
|
|
|
|
|
waterType: '企业消防水池',
|
|
|
|
|
personInCharge: '周静',
|
|
|
|
|
fireImage: '点击查看图片',
|
|
|
|
|
alarmTime: '2025-10-13 09:19:00',
|
|
|
|
|
reporter: '陈志强',
|
|
|
|
|
accidentTime: '2025-10-11 02:29:16',
|
|
|
|
|
accidentType: '办公室漏电',
|
|
|
|
|
accidentAddress: '中山北大街17号附近',
|
|
|
|
|
alarmPerson: '陈志强',
|
|
|
|
|
remarks: '备注二二',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '3',
|
|
|
|
|
number: '03',
|
|
|
|
|
fireName: '消防点三',
|
|
|
|
|
waterPointName: '消防池 03',
|
|
|
|
|
hydrantCount: 91,
|
|
|
|
|
hydrantLocation: '三楼图书馆门口',
|
|
|
|
|
range: 91,
|
|
|
|
|
waterType: '企业消防水池',
|
|
|
|
|
personInCharge: '何能',
|
|
|
|
|
fireImage: '点击查看图片',
|
|
|
|
|
alarmTime: '2025-10-12 10:46:43',
|
|
|
|
|
reporter: '侯文涛',
|
|
|
|
|
accidentTime: '2025-10-10 04:03:28',
|
|
|
|
|
accidentType: '饮水机漏电',
|
|
|
|
|
accidentAddress: '益醒园家居建材广场3通道76号',
|
|
|
|
|
alarmPerson: '侯文涛',
|
|
|
|
|
remarks: '备注三三',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '4',
|
|
|
|
|
number: '04',
|
|
|
|
|
fireName: '消防点四',
|
|
|
|
|
waterPointName: '消防池 04',
|
|
|
|
|
hydrantCount: 59,
|
|
|
|
|
hydrantLocation: '三楼应急通道口',
|
|
|
|
|
range: 59,
|
|
|
|
|
waterType: '企业消防水池',
|
|
|
|
|
personInCharge: '冯新',
|
|
|
|
|
fireImage: '点击查看图片',
|
|
|
|
|
alarmTime: '2025-10-12 00:32:56',
|
|
|
|
|
reporter: '宋东',
|
|
|
|
|
accidentTime: '2025-10-10 03:37:32',
|
|
|
|
|
accidentType: '地面电线、网线乱拉乱接',
|
|
|
|
|
accidentAddress: '林河大街13号(光明健能乳业公司对面)',
|
|
|
|
|
alarmPerson: '宋东',
|
|
|
|
|
remarks: '备注四四',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '5',
|
|
|
|
|
number: '05',
|
|
|
|
|
fireName: '消防点五',
|
|
|
|
|
waterPointName: '消防池 05',
|
|
|
|
|
hydrantCount: 50,
|
|
|
|
|
hydrantLocation: '负一层东侧走廊',
|
|
|
|
|
range: 50,
|
|
|
|
|
waterType: '企业消防水池',
|
|
|
|
|
personInCharge: '赵俊英',
|
|
|
|
|
fireImage: '点击查看图片',
|
|
|
|
|
alarmTime: '2025-10-11 07:10:07',
|
|
|
|
|
reporter: '王一声',
|
|
|
|
|
accidentTime: '2025-10-08 12:46:35',
|
|
|
|
|
accidentType: '电脑过热失火',
|
|
|
|
|
accidentAddress: '中山南街4号',
|
|
|
|
|
alarmPerson: '王一声',
|
|
|
|
|
remarks: '备注五五',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '6',
|
|
|
|
|
number: '06',
|
|
|
|
|
fireName: '消防点六',
|
|
|
|
|
waterPointName: '消防池 06',
|
|
|
|
|
hydrantCount: 48,
|
|
|
|
|
hydrantLocation: '四楼c西侧走廊',
|
|
|
|
|
range: 48,
|
|
|
|
|
waterType: '企业消防水池',
|
|
|
|
|
personInCharge: '赵中琏',
|
|
|
|
|
fireImage: '点击查看图片',
|
|
|
|
|
alarmTime: '2025-10-09 22:12:42',
|
|
|
|
|
reporter: '赵小敏',
|
|
|
|
|
accidentTime: '2025-10-07 10:04:47',
|
|
|
|
|
accidentType: '仓库失火',
|
|
|
|
|
accidentAddress: '双兴乐街1-5号',
|
|
|
|
|
alarmPerson: '赵小敏',
|
|
|
|
|
remarks: '备注六六',
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
@ -106,67 +95,46 @@ const Jjjl = () => {
|
|
|
|
|
// 表格列配置
|
|
|
|
|
const columns = [
|
|
|
|
|
{
|
|
|
|
|
title: '编号',
|
|
|
|
|
title: '事件编号',
|
|
|
|
|
dataIndex: 'number',
|
|
|
|
|
key: 'number',
|
|
|
|
|
width: 80,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '消防点名称',
|
|
|
|
|
dataIndex: 'fireName',
|
|
|
|
|
key: 'fireName',
|
|
|
|
|
width: 120,
|
|
|
|
|
width: 100,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '消防取水点名称',
|
|
|
|
|
dataIndex: 'waterPointName',
|
|
|
|
|
key: 'waterPointName',
|
|
|
|
|
width: 140,
|
|
|
|
|
title: '接警时间',
|
|
|
|
|
dataIndex: 'alarmTime',
|
|
|
|
|
key: 'alarmTime',
|
|
|
|
|
width: 160,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '消防栓数量',
|
|
|
|
|
dataIndex: 'hydrantCount',
|
|
|
|
|
key: 'hydrantCount',
|
|
|
|
|
width: 110,
|
|
|
|
|
title: '报警人',
|
|
|
|
|
dataIndex: 'reporter',
|
|
|
|
|
key: 'reporter',
|
|
|
|
|
width: 100,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '消防栓位置',
|
|
|
|
|
dataIndex: 'hydrantLocation',
|
|
|
|
|
key: 'hydrantLocation',
|
|
|
|
|
width: 150,
|
|
|
|
|
title: '事故时间',
|
|
|
|
|
dataIndex: 'accidentTime',
|
|
|
|
|
key: 'accidentTime',
|
|
|
|
|
width: 160,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '射程',
|
|
|
|
|
dataIndex: 'range',
|
|
|
|
|
key: 'range',
|
|
|
|
|
width: 80,
|
|
|
|
|
title: '事故类型',
|
|
|
|
|
dataIndex: 'accidentType',
|
|
|
|
|
key: 'accidentType',
|
|
|
|
|
width: 190,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '消防栓用水类型',
|
|
|
|
|
dataIndex: 'waterType',
|
|
|
|
|
key: 'waterType',
|
|
|
|
|
width: 140,
|
|
|
|
|
title: '事故地址',
|
|
|
|
|
dataIndex: 'accidentAddress',
|
|
|
|
|
key: 'accidentAddress',
|
|
|
|
|
width: 240,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '负责人',
|
|
|
|
|
dataIndex: 'personInCharge',
|
|
|
|
|
key: 'personInCharge',
|
|
|
|
|
width: 100,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '消防点图片',
|
|
|
|
|
dataIndex: 'fireImage',
|
|
|
|
|
key: 'fireImage',
|
|
|
|
|
width: 120,
|
|
|
|
|
render: (text) => (
|
|
|
|
|
<Button
|
|
|
|
|
type="link"
|
|
|
|
|
size="small"
|
|
|
|
|
onClick={() => message.info('查看图片功能待实现')}
|
|
|
|
|
>
|
|
|
|
|
{text}
|
|
|
|
|
</Button>
|
|
|
|
|
),
|
|
|
|
|
title: '接警人',
|
|
|
|
|
dataIndex: 'alarmPerson',
|
|
|
|
|
key: 'alarmPerson',
|
|
|
|
|
width: 80,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '备注',
|
|
|
|
|
@ -180,17 +148,17 @@ const Jjjl = () => {
|
|
|
|
|
width: 120,
|
|
|
|
|
render: (text, record) => (
|
|
|
|
|
<div className={styles.actionButtons}>
|
|
|
|
|
<Button
|
|
|
|
|
type="link"
|
|
|
|
|
size="small"
|
|
|
|
|
<Button
|
|
|
|
|
type="link"
|
|
|
|
|
size="small"
|
|
|
|
|
// icon={<EditOutlined />}
|
|
|
|
|
onClick={() => handleEdit(record)}
|
|
|
|
|
>
|
|
|
|
|
修改
|
|
|
|
|
</Button>
|
|
|
|
|
<Button
|
|
|
|
|
type="link"
|
|
|
|
|
size="small"
|
|
|
|
|
<Button
|
|
|
|
|
type="link"
|
|
|
|
|
size="small"
|
|
|
|
|
danger
|
|
|
|
|
// icon={<DeleteOutlined />}
|
|
|
|
|
onClick={() => handleDelete(record)}
|
|
|
|
|
@ -236,14 +204,14 @@ const Jjjl = () => {
|
|
|
|
|
|
|
|
|
|
// 编辑处理
|
|
|
|
|
const handleEdit = (record) => {
|
|
|
|
|
message.info(`编辑 ${record.fireName} 的信息`);
|
|
|
|
|
message.info(`编辑事件编号 ${record.number} 的信息`);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 删除处理
|
|
|
|
|
const handleDelete = (record) => {
|
|
|
|
|
Modal.confirm({
|
|
|
|
|
title: '确认删除',
|
|
|
|
|
content: `确定要删除 ${record.fireName} 吗？`,
|
|
|
|
|
content: `确定要删除事件编号 ${record.number} 的记录吗？`,
|
|
|
|
|
onOk() {
|
|
|
|
|
setDataSource(dataSource.filter(item => item.key !== record.key));
|
|
|
|
|
message.success('删除成功');
|
|
|
|
|
@ -267,29 +235,65 @@ const Jjjl = () => {
|
|
|
|
|
{/* 搜索和操作区域 */}
|
|
|
|
|
<div className={styles.searchBar}>
|
|
|
|
|
<div className={styles.searchLeft}>
|
|
|
|
|
<div className={styles.searchItem}>
|
|
|
|
|
<span className={styles.searchLabel}>时间范围:</span>
|
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', border: '1px solid #DDDEE6', borderRadius: '2px' }}>
|
|
|
|
|
<div className={styles.datePickerWithIcon}>
|
|
|
|
|
<img src={iconDrill5} alt="日期icon" className={styles.dateIcon} />
|
|
|
|
|
<DatePicker
|
|
|
|
|
showTime={{ format: 'HH:mm' }}
|
|
|
|
|
format="YYYY-MM-DD HH:mm"
|
|
|
|
|
value={dateRange ? dateRange[0] : null}
|
|
|
|
|
onChange={(value) => {
|
|
|
|
|
setDateRange([value, dateRange ? dateRange[1] : null]);
|
|
|
|
|
}}
|
|
|
|
|
placeholder="请输入日期"
|
|
|
|
|
className={styles.datePickerFirst}
|
|
|
|
|
suffixIcon={null}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
{/* 短线 */}
|
|
|
|
|
<div className={styles.dateSeparator}></div>
|
|
|
|
|
|
|
|
|
|
<div className={styles.datePickerWithIcon}>
|
|
|
|
|
<img src={iconDrill5} alt="日期icon" className={styles.dateIcon} />
|
|
|
|
|
<DatePicker
|
|
|
|
|
showTime={{ format: 'HH:mm' }}
|
|
|
|
|
format="YYYY-MM-DD HH:mm"
|
|
|
|
|
value={dateRange ? dateRange[1] : null}
|
|
|
|
|
onChange={(value) => {
|
|
|
|
|
setDateRange([dateRange ? dateRange[0] : null, value]);
|
|
|
|
|
}}
|
|
|
|
|
placeholder="请输入日期"
|
|
|
|
|
className={styles.datePickerFirst}
|
|
|
|
|
suffixIcon={null}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<Select
|
|
|
|
|
placeholder="请选择消防点"
|
|
|
|
|
placeholder="事故类型"
|
|
|
|
|
value={searchValue}
|
|
|
|
|
onChange={setSearchValue}
|
|
|
|
|
style={{width: 180}}
|
|
|
|
|
style={{ width: 180 }}
|
|
|
|
|
className={styles.customSelect}
|
|
|
|
|
allowClear
|
|
|
|
|
>
|
|
|
|
|
<Option value="消防点一">消防点一</Option>
|
|
|
|
|
<Option value="消防点二">消防点二</Option>
|
|
|
|
|
<Option value="消防点三">消防点三</Option>
|
|
|
|
|
<Option value="消防点四">消防点四</Option>
|
|
|
|
|
<Option value="消防点五">消防点五</Option>
|
|
|
|
|
<Option value="消防点六">消防点六</Option>
|
|
|
|
|
<Option value="火灾事故">火灾事故</Option>
|
|
|
|
|
<Option value="爆炸事故">爆炸事故</Option>
|
|
|
|
|
<Option value="危化品泄漏">危化品泄漏</Option>
|
|
|
|
|
<Option value="触电事故">触电事故</Option>
|
|
|
|
|
<Option value="高处坠落">高处坠落</Option>
|
|
|
|
|
<Option value="其他事故">其他事故</Option>
|
|
|
|
|
</Select>
|
|
|
|
|
<Input
|
|
|
|
|
placeholder="请输入消防点名称"
|
|
|
|
|
style={{width: 180}}
|
|
|
|
|
placeholder="输入报警人"
|
|
|
|
|
style={{ width: 180 }}
|
|
|
|
|
className={styles.customInput}
|
|
|
|
|
allowClear
|
|
|
|
|
/>
|
|
|
|
|
<Button
|
|
|
|
|
type="primary"
|
|
|
|
|
<Button
|
|
|
|
|
type="primary"
|
|
|
|
|
icon={<SearchOutlined />}
|
|
|
|
|
onClick={handleSearch}
|
|
|
|
|
loading={loading}
|
|
|
|
|
@ -299,22 +303,14 @@ const Jjjl = () => {
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.searchRight}>
|
|
|
|
|
<Button
|
|
|
|
|
type="primary"
|
|
|
|
|
<Button
|
|
|
|
|
type="primary"
|
|
|
|
|
icon={<PlusOutlined />}
|
|
|
|
|
onClick={handleAdd}
|
|
|
|
|
className={styles.customButton}
|
|
|
|
|
>
|
|
|
|
|
新增
|
|
|
|
|
</Button>
|
|
|
|
|
{/* <Button
|
|
|
|
|
danger
|
|
|
|
|
style={{width: 70, height: 30, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center'}}
|
|
|
|
|
icon={<img src={iconsc} alt="delete" style={{width: 14, height: 14, marginTop: -2}}/>}
|
|
|
|
|
onClick={handleBatchDelete}
|
|
|
|
|
>
|
|
|
|
|
删除
|
|
|
|
|
</Button> */}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
wangyunfei