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

Compare commits

base: jiangxucong:4a9b30d821606da5180e960b3d8e3dd378002ed7
Branches Tags
jiangxucong:main
..
compare: jiangxucong:9b6d548c89421dea31531f3a12f45cc3e4ed64f1
Branches Tags
jiangxucong:main

No commits in common. '4a9b30d821606da5180e960b3d8e3dd378002ed7' and '9b6d548c89421dea31531f3a12f45cc3e4ed64f1' have entirely different histories.
4a9b30d821 ... 9b6d548c89

5 changed files with 147 additions and 273 deletions
Show Stats

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

@ -315,6 +315,8 @@ const EmergencyDrill = () => {
<div className={styles.containerDrill}> <div className={styles.containerDrill}>
<div className={styles.block1}> <div className={styles.block1}>
<div className={styles.block1_item1}> <div className={styles.block1_item1}>
<div className={styles.item1_row1}> <div className={styles.item1_row1}>
<div className={styles.row1_left}> <div className={styles.row1_left}>
<div className={styles.colorBlock}></div> <div className={styles.colorBlock}></div>
@ -388,6 +390,7 @@ const EmergencyDrill = () => {
<div ref={chartRef} className={styles.chartContainer}></div> <div ref={chartRef} className={styles.chartContainer}></div>
</div> </div>
<div className={styles.block1_item3}> <div className={styles.block1_item3}>
<div className={styles.item3_header}> <div className={styles.item3_header}>
<div className={styles.colorBlock}></div> <div className={styles.colorBlock}></div>
@ -543,9 +546,7 @@ const EmergencyDrill = () => {
<div className={styles.searchBar}> <div className={styles.searchBar}>
<div className={styles.searchLeft}> <div className={styles.searchLeft}>
{/* 日期 */}
<div className={styles.searchItem}> <div className={styles.searchItem}>
<span className={styles.searchLabel}>演练日期:</span> <span className={styles.searchLabel}>演练日期:</span>
<div style={{ display: 'flex', alignItems: 'center', border: '1px solid #DDDEE6', borderRadius: '2px' }}> <div style={{ display: 'flex', alignItems: 'center', border: '1px solid #DDDEE6', borderRadius: '2px' }}>
<div className={styles.datePickerWithIcon}> <div className={styles.datePickerWithIcon}>

24
src/pages/business_emergencyResource/components/secondary_menu/czjy.js
Unescape Escape View File

@ -268,22 +268,22 @@ const Czjy = () => {
<div className={styles.searchBar}> <div className={styles.searchBar}>
<div className={styles.searchLeft}> <div className={styles.searchLeft}>
<Select <Select
placeholder="事故类型" placeholder="请选择消防点"
value={searchValue} value={searchValue}
onChange={setSearchValue} onChange={setSearchValue}
style={{width: 180}} style={{width: 180}}
className={styles.customSelect} className={styles.customSelect}
allowClear 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> </Select>
<Input <Input
placeholder="输入报警人" placeholder="请输入消防点名称"
style={{width: 180}} style={{width: 180}}
className={styles.customInput} className={styles.customInput}
allowClear allowClear
@ -307,6 +307,14 @@ const Czjy = () => {
> >
新增 新增
</Button> </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> </div>

8
src/pages/business_emergencyResource/components/secondary_menu/czjy.less
Unescape Escape View File

@ -64,10 +64,6 @@
.ant-select-selection-placeholder { .ant-select-selection-placeholder {
line-height: 30px !important; line-height: 30px !important;
} }
.ant-select-selection-placeholder {
color: #666 !important;
}
} }
} }
@ -75,10 +71,6 @@
.customInput { .customInput {
height: 30px !important; height: 30px !important;
border-radius: 2px !important; border-radius: 2px !important;
&::placeholder {
color: #666 !important;
}
} }
// 自定义按钮样式 // 自定义按钮样式

252
src/pages/business_emergencyResource/components/secondary_menu/jjjl.js
Unescape Escape View File

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

131
src/pages/business_emergencyResource/components/secondary_menu/jjjl.less
Unescape Escape View File

@ -32,124 +32,6 @@
margin-bottom: 10px; margin-bottom: 10px;
padding: 5px; padding: 5px;
.searchItem {
display: flex;
align-items: center;
gap: 8px;
.searchLabel {
font-size: 13px;
color: #333333;
white-space: nowrap;
}
.datePickerWithIcon {
display: inline-flex;
align-items: center;
height: 30px;
border: none;
.dateIcon {
display: flex;
align-items: center;
padding: 0 0px 0 14px;
border: none;
}
.datePickerFirst {
height: 28px;
width: 125px;
border: none;
:global {
.ant-picker-input>input::placeholder {
color: #666 !important;
font-size: 13px;
}
}
}
:global {
.ant-picker-focused {
box-shadow: none;
}
}
.datePicker {
flex: 1;
border: none;
background: transparent;
}
}
.dateSeparator {
width: 12px;
height: 1px;
background-color: #999;
flex-shrink: 0;
}
.dateInput {
width: 150px;
height: 32px;
padding: 0 12px;
border: none;
font-size: 13px;
outline: none;
transition: all 0.3s;
&:focus {
border-color: #2E4CD4;
}
&::placeholder {
color: #666;
}
}
.companyInput {
width: 150px;
height: 31px;
padding: 0 8px;
border: 1px solid #D9D9D9;
border-radius: 2px;
font-size: 13px;
outline: none;
transition: all 0.3s;
&:focus {
border-color: #2E4CD4;
}
&::placeholder {
color: #666;
}
}
.unitSelect {
color: #666;
width: 150px;
height: 31px;
padding: 0 6px;
border: 1px solid #D9D9D9;
border-radius: 2px;
font-size: 13px;
outline: none;
background-color: #FFFFFF;
cursor: pointer;
transition: all 0.3s;
&:focus {
border-color: #2E4CD4;
}
option {
padding: 8px;
}
}
}
.searchLeft { .searchLeft {
display: flex; display: flex;
@ -182,11 +64,6 @@
.ant-select-selection-placeholder { .ant-select-selection-placeholder {
line-height: 30px !important; line-height: 30px !important;
} }
.ant-select-selection-placeholder {
color: #666 !important;
font-size: 13px !important;
}
} }
} }
@ -194,13 +71,6 @@
.customInput { .customInput {
height: 30px !important; height: 30px !important;
border-radius: 2px !important; border-radius: 2px !important;
:global {
input::placeholder {
color: #666 !important;
font-size: 13px !important;
}
}
} }
// 自定义按钮样式 // 自定义按钮样式
@ -210,7 +80,6 @@
border-radius: 2px !important; border-radius: 2px !important;
height: 30px !important; height: 30px !important;
width: 75px; width: 75px;
font-size: 13px !important;
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;

Write Preview
Loading…
Cancel
Save