You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
341 lines
11 KiB
JavaScript
341 lines
11 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Input, Button, Select, message, Modal } 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';
|
|
|
|
const { Option } = Select;
|
|
|
|
const Jjjl = () => {
|
|
const [loading, setLoading] = useState(false);
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
|
const [searchValue, setSearchValue] = useState(undefined);
|
|
const [pagination, setPagination] = useState({
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 48,
|
|
showSizeChanger: true,
|
|
showQuickJumper: true,
|
|
showTotal: (total, range) => `共${total}条`,
|
|
});
|
|
|
|
// 模拟数据
|
|
const [dataSource, setDataSource] = useState([
|
|
{
|
|
key: '1',
|
|
number: '01',
|
|
fireName: '消防点一',
|
|
waterPointName: '消防池 01',
|
|
hydrantCount: 97,
|
|
hydrantLocation: '一楼走廊',
|
|
range: 97,
|
|
waterType: '企业消防水池',
|
|
personInCharge: '冯钰涛',
|
|
fireImage: '点击查看图片',
|
|
remarks: '无',
|
|
},
|
|
{
|
|
key: '2',
|
|
number: '02',
|
|
fireName: '消防点二',
|
|
waterPointName: '消防池 02',
|
|
hydrantCount: 96,
|
|
hydrantLocation: '二楼走廊',
|
|
range: 96,
|
|
waterType: '企业消防水池',
|
|
personInCharge: '周静',
|
|
fireImage: '点击查看图片',
|
|
remarks: '备注二二',
|
|
},
|
|
{
|
|
key: '3',
|
|
number: '03',
|
|
fireName: '消防点三',
|
|
waterPointName: '消防池 03',
|
|
hydrantCount: 91,
|
|
hydrantLocation: '三楼图书馆门口',
|
|
range: 91,
|
|
waterType: '企业消防水池',
|
|
personInCharge: '何能',
|
|
fireImage: '点击查看图片',
|
|
remarks: '备注三三',
|
|
},
|
|
{
|
|
key: '4',
|
|
number: '04',
|
|
fireName: '消防点四',
|
|
waterPointName: '消防池 04',
|
|
hydrantCount: 59,
|
|
hydrantLocation: '三楼应急通道口',
|
|
range: 59,
|
|
waterType: '企业消防水池',
|
|
personInCharge: '冯新',
|
|
fireImage: '点击查看图片',
|
|
remarks: '备注四四',
|
|
},
|
|
{
|
|
key: '5',
|
|
number: '05',
|
|
fireName: '消防点五',
|
|
waterPointName: '消防池 05',
|
|
hydrantCount: 50,
|
|
hydrantLocation: '负一层东侧走廊',
|
|
range: 50,
|
|
waterType: '企业消防水池',
|
|
personInCharge: '赵俊英',
|
|
fireImage: '点击查看图片',
|
|
remarks: '备注五五',
|
|
},
|
|
{
|
|
key: '6',
|
|
number: '06',
|
|
fireName: '消防点六',
|
|
waterPointName: '消防池 06',
|
|
hydrantCount: 48,
|
|
hydrantLocation: '四楼c西侧走廊',
|
|
range: 48,
|
|
waterType: '企业消防水池',
|
|
personInCharge: '赵中琏',
|
|
fireImage: '点击查看图片',
|
|
remarks: '备注六六',
|
|
},
|
|
]);
|
|
|
|
// 表格列配置
|
|
const columns = [
|
|
{
|
|
title: '编号',
|
|
dataIndex: 'number',
|
|
key: 'number',
|
|
width: 80,
|
|
},
|
|
{
|
|
title: '消防点名称',
|
|
dataIndex: 'fireName',
|
|
key: 'fireName',
|
|
width: 120,
|
|
},
|
|
{
|
|
title: '消防取水点名称',
|
|
dataIndex: 'waterPointName',
|
|
key: 'waterPointName',
|
|
width: 140,
|
|
},
|
|
{
|
|
title: '消防栓数量',
|
|
dataIndex: 'hydrantCount',
|
|
key: 'hydrantCount',
|
|
width: 110,
|
|
},
|
|
{
|
|
title: '消防栓位置',
|
|
dataIndex: 'hydrantLocation',
|
|
key: 'hydrantLocation',
|
|
width: 150,
|
|
},
|
|
{
|
|
title: '射程',
|
|
dataIndex: 'range',
|
|
key: 'range',
|
|
width: 80,
|
|
},
|
|
{
|
|
title: '消防栓用水类型',
|
|
dataIndex: 'waterType',
|
|
key: 'waterType',
|
|
width: 140,
|
|
},
|
|
{
|
|
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: 'remarks',
|
|
key: 'remarks',
|
|
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>
|
|
),
|
|
},
|
|
];
|
|
|
|
// 搜索处理
|
|
const handleSearch = () => {
|
|
setLoading(true);
|
|
// 模拟搜索请求
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
message.success('查询完成');
|
|
}, 1000);
|
|
};
|
|
|
|
// 新增处理
|
|
const handleAdd = () => {
|
|
message.info('新增功能待实现');
|
|
};
|
|
|
|
// 批量删除处理
|
|
const handleBatchDelete = () => {
|
|
if (selectedRowKeys.length === 0) {
|
|
message.warning('请选择要删除的数据');
|
|
return;
|
|
}
|
|
Modal.confirm({
|
|
title: '确认删除',
|
|
content: `确定要删除选中的 ${selectedRowKeys.length} 条数据吗？`,
|
|
onOk() {
|
|
setDataSource(dataSource.filter(item => !selectedRowKeys.includes(item.key)));
|
|
setSelectedRowKeys([]);
|
|
message.success('删除成功');
|
|
},
|
|
});
|
|
};
|
|
|
|
// 编辑处理
|
|
const handleEdit = (record) => {
|
|
message.info(`编辑 ${record.fireName} 的信息`);
|
|
};
|
|
|
|
// 删除处理
|
|
const handleDelete = (record) => {
|
|
Modal.confirm({
|
|
title: '确认删除',
|
|
content: `确定要删除 ${record.fireName} 吗？`,
|
|
onOk() {
|
|
setDataSource(dataSource.filter(item => item.key !== record.key));
|
|
message.success('删除成功');
|
|
},
|
|
});
|
|
};
|
|
|
|
// 分页处理
|
|
const handleTableChange = (pagination) => {
|
|
setPagination(pagination);
|
|
};
|
|
|
|
return (
|
|
<div className={styles.containerJJJL}>
|
|
{/* 页面标题 */}
|
|
<div className={styles.header}>
|
|
<div className={styles.titleBar}></div>
|
|
<h2 className={styles.title}>接警记录</h2>
|
|
</div>
|
|
|
|
{/* 搜索和操作区域 */}
|
|
<div className={styles.searchBar}>
|
|
<div className={styles.searchLeft}>
|
|
<Select
|
|
placeholder="请选择消防点"
|
|
value={searchValue}
|
|
onChange={setSearchValue}
|
|
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>
|
|
</Select>
|
|
<Input
|
|
placeholder="请输入消防点名称"
|
|
style={{width: 180}}
|
|
className={styles.customInput}
|
|
allowClear
|
|
/>
|
|
<Button
|
|
type="primary"
|
|
icon={<SearchOutlined />}
|
|
onClick={handleSearch}
|
|
loading={loading}
|
|
className={styles.customButton}
|
|
>
|
|
查询
|
|
</Button>
|
|
</div>
|
|
<div className={styles.searchRight}>
|
|
<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>
|
|
|
|
{/* 数据表格 */}
|
|
<div className={styles.tableContainer}>
|
|
<StandardTable
|
|
columns={columns}
|
|
data={{
|
|
list: dataSource,
|
|
pagination: pagination
|
|
}}
|
|
rowKey="key"
|
|
selectedRows={selectedRowKeys}
|
|
onSelectRow={setSelectedRowKeys}
|
|
onChange={handleTableChange}
|
|
loading={loading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Jjjl;
|