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

应急消防点页面

Browse Source
main
wangyunfei 2 months ago
parent 6101a571db
commit 50daab4c6d
8 changed files with 1277 additions and 571 deletions
Show Stats Download Patch File Download Diff File

347
src/pages/business_emergencyDuty/components/DutySchedule.js
Unescape Escape View File

@ -1,12 +1,26 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Button } from 'antd'; import { Button, DatePicker, Select, InputNumber, Table, Tag, Avatar } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons'; import {
CalendarOutlined,
TeamOutlined,
UserOutlined,
PlusOutlined,
EditOutlined,
DeleteOutlined
} from '@ant-design/icons';
import moment from 'moment'; import moment from 'moment';
import styles from './DutySchedule.less'; import styles from './DutySchedule.less';
const { RangePicker } = DatePicker;
const { Option } = Select;
const DutySchedule = () => { const DutySchedule = () => {
// 当前周的起始日期 // 当前周的起始日期
const [currentWeekStart, setCurrentWeekStart] = useState(moment().startOf('week')); const [currentWeekStart, setCurrentWeekStart] = useState(moment().startOf('week'));
const [selectedRange, setSelectedRange] = useState([moment(), moment()]);
const [shiftType, setShiftType] = useState('早班');
const [personCount, setPersonCount] = useState(2);
const [specialty, setSpecialty] = useState('无特殊要求');
// 生成当前周的日期数组 // 生成当前周的日期数组
const getWeekDates = (startDate) => { const getWeekDates = (startDate) => {
@ -109,29 +123,142 @@ const DutySchedule = () => {
const cellData = getCellData(date, shift); const cellData = getCellData(date, shift);
if (cellData.length === 0) return ''; if (cellData.length === 0) return '';
// 如果有多个人，取第一个人的状态
const status = cellData[0].status; const status = cellData[0].status;
// 检查是否所有人状态相同
const allSameStatus = cellData.every(item => item.status === status); const allSameStatus = cellData.every(item => item.status === status);
if (allSameStatus) { if (allSameStatus) {
return styles[`bg_${status}`]; return styles[`bg_${status}`];
} }
// 如果状态不同，返回混合状态类名
return styles.bg_mixed; return styles.bg_mixed;
}; };
// 底部表格数据
const tableColumns = [
{
title: '日期',
dataIndex: 'date',
key: 'date',
width: 120,
},
{
title: '班次',
dataIndex: 'shift',
key: 'shift',
width: 150,
},
{
title: '值班人员',
dataIndex: 'person',
key: 'person',
width: 100,
},
{
title: '职位',
dataIndex: 'position',
key: 'position',
width: 120,
},
{
title: '专业技能',
dataIndex: 'skills',
key: 'skills',
width: 150,
},
{
title: '岗位类型',
dataIndex: 'type',
key: 'type',
width: 100,
},
{
title: '联系方式',
dataIndex: 'contact',
key: 'contact',
width: 120,
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
width: 80,
render: (status) => {
const colorMap = {
'请假': 'error',
'待岗': 'warning',
'在岗': 'success'
};
return <Tag color={colorMap[status]}>{status}</Tag>;
}
},
{
title: '操作',
key: 'action',
width: 150,
render: (_, record) => (
<div className={styles.tableActions}>
<Button type="link" size="small">编辑</Button>
<Button type="link" size="small" danger>删除</Button>
</div>
),
},
];
const tableData = [
{
key: '1',
date: '2025-10-13',
shift: '早班 (08:00-16:00)',
person: '钱居西',
position: '应急部门专家',
skills: '网格安全、系统运维',
type: '常规岗',
contact: '15086756708',
status: '请假'
},
{
key: '2',
date: '2025-10-12',
shift: '中班 (16:00-24:00)',
person: '冯俊',
position: '数据分析师',
skills: '数据分析、风险评估',
type: '专业岗',
contact: '15070198237',
status: '待岗'
},
{
key: '3',
date: '2025-10-10',
shift: '晚班 (00:00-08:00)',
person: '何乐',
position: '系统管理员',
skills: '服务器管理、网络管理',
type: '常规岗',
contact: '13726421306',
status: '在岗'
},
];
// 可用值班人员数据
const availablePersons = [
{ id: 1, name: '李华', dept: '信息安全', skills: '网络运维' },
{ id: 2, name: '王方', dept: '运营部', skills: '网络运维' },
{ id: 3, name: '孙敏', dept: '系统管理', skills: '由信息部' },
];
return ( return (
<div className={styles.container}> <div className={styles.pageContainer}>
{/* 页面标题 */} {/* 顶部区域 */}
<div className={styles.header}> <div className={styles.topSection}>
{/* 左侧：排班表 */}
<div className={styles.scheduleSection}>
<div className={styles.sectionHeader}>
<div className={styles.titleBar}></div> <div className={styles.titleBar}></div>
<h2 className={styles.title}>值班排班表</h2> <h2 className={styles.sectionTitle}>值班排班表</h2>
</div> </div>
{/* 顶部控制栏 */} {/* 控制栏 */}
<div className={styles.toolbar}> <div className={styles.toolbar}>
<div className={styles.toolbarLeft}> <div className={styles.toolbarLeft}>
<div className={styles.legend}> <div className={styles.legend}>
@ -156,13 +283,13 @@ const DutySchedule = () => {
<div className={styles.toolbarRight}> <div className={styles.toolbarRight}>
<span className={styles.dateRange}> <span className={styles.dateRange}>
{currentWeekStart.format('YYYY-MM-DD')} 至 {moment(currentWeekStart).add(6, 'days').format('YYYY-MM-DD')} {currentWeekStart.format('YYYY-M-D')} 至 {moment(currentWeekStart).add(6, 'days').format('YYYY-M-D')}
</span> </span>
<div className={styles.weekNav}> <div className={styles.weekNav}>
<Button onClick={handlePrevWeek} size="small" className={styles.navButton}> <Button onClick={handlePrevWeek} size="small" className={styles.navButton}>
上周 上周
</Button> </Button>
<Button onClick={handleThisWeek} size="small" type="primary" className={styles.navButtonActive}> <Button onClick={handleThisWeek} size="small" className={styles.navButtonActive}>
本周 本周
</Button> </Button>
<Button onClick={handleNextWeek} size="small" className={styles.navButton}> <Button onClick={handleNextWeek} size="small" className={styles.navButton}>
@ -178,34 +305,14 @@ const DutySchedule = () => {
<thead> <thead>
<tr> <tr>
<th className={styles.shiftHeader}>日期/班次</th> <th className={styles.shiftHeader}>日期/班次</th>
<th className={styles.dayHeader}> {weekDates.map((date, index) => (
<div className={styles.dayName}>周一</div> <th key={index} className={styles.dayHeader}>
<div className={styles.dayDate}>{weekDates[0].format('MM/DD')}</div> <div className={styles.dayName}>
</th> {['周一', '周二', '周三', '周四', '周五', '周六', '周日'][index]}
<th className={styles.dayHeader}> </div>
<div className={styles.dayName}>周二</div> <div className={styles.dayDate}>{date.format('M/D')}</div>
<div className={styles.dayDate}>{weekDates[1].format('MM/DD')}</div>
</th>
<th className={styles.dayHeader}>
<div className={styles.dayName}>周三</div>
<div className={styles.dayDate}>{weekDates[2].format('MM/DD')}</div>
</th>
<th className={styles.dayHeader}>
<div className={styles.dayName}>周四</div>
<div className={styles.dayDate}>{weekDates[3].format('MM/DD')}</div>
</th>
<th className={styles.dayHeader}>
<div className={styles.dayName}>周五</div>
<div className={styles.dayDate}>{weekDates[4].format('MM/DD')}</div>
</th>
<th className={styles.dayHeader}>
<div className={styles.dayName}>周六</div>
<div className={styles.dayDate}>{weekDates[5].format('MM/DD')}</div>
</th>
<th className={styles.dayHeader}>
<div className={styles.dayName}>周日</div>
<div className={styles.dayDate}>{weekDates[6].format('MM/DD')}</div>
</th> </th>
))}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -251,6 +358,166 @@ const DutySchedule = () => {
</table> </table>
</div> </div>
</div> </div>
{/* 右侧区域 */}
<div className={styles.rightSection}>
{/* 统计卡片 */}
<div className={styles.statsCards}>
<div className={styles.statCard}>
<div className={styles.statValue}>24</div>
<div className={styles.statLabel}>值班人员</div>
</div>
<div className={styles.statCard}>
<div className={styles.statValue}>156</div>
<div className={styles.statLabel}>本月班期</div>
</div>
<div className={styles.statCard}>
<div className={styles.statValue}>12</div>
<div className={styles.statLabel}>待派人</div>
</div>
<div className={styles.statCard}>
<div className={styles.statValue}>11</div>
<div className={styles.statLabel}>调班申请</div>
</div>
</div>
{/* 排班数设置 */}
<div className={styles.settingPanel}>
<div className={styles.panelHeader}>
<div className={styles.titleBar}></div>
<h3 className={styles.panelTitle}>排班数设置</h3>
</div>
<div className={styles.settingForm}>
<div className={styles.formItem}>
<label className={styles.formLabel}>选择排班</label>
<RangePicker
className={styles.formInput}
placeholder={['开始日期', '结束日期']}
format="YYYY/MM/DD"
suffixIcon={<CalendarOutlined />}
/>
</div>
<div className={styles.formItem}>
<label className={styles.formLabel}>日期</label>
<RangePicker
className={styles.formInput}
placeholder={['2025/10/16', '2025/10/16']}
format="YYYY/MM/DD"
suffixIcon={<CalendarOutlined />}
/>
</div>
<div className={styles.formItem}>
<label className={styles.formLabel}>每日班次</label>
<Select
className={styles.formInput}
value={shiftType}
onChange={setShiftType}
>
<Option value="早班">早班 (8:00-16:00)</Option>
<Option value="中班">中班 (16:00-24:00)</Option>
<Option value="晚班">晚班 (00:00-08:00)</Option>
</Select>
</div>
<div className={styles.formItem}>
<label className={styles.formLabel}>每日人数</label>
<InputNumber
className={styles.formInput}
value={personCount}
onChange={setPersonCount}
min={1}
max={10}
/>
</div>
<div className={styles.formItem}>
<label className={styles.formLabel}>专业要求</label>
<Select
className={styles.formInput}
value={specialty}
onChange={setSpecialty}
>
<Option value="无特殊要求">无特殊要求</Option>
<Option value="网络运维">网络运维</Option>
<Option value="系统管理">系统管理</Option>
</Select>
</div>
<div className={styles.formActions}>
<Button type="primary" icon={<CalendarOutlined />} block>
生成排班计划
</Button>
</div>
</div>
{/* 可用值班人员 */}
<div className={styles.availablePersons}>
<div className={styles.personsHeader}>
<h4 className={styles.personsTitle}>可用值班人员</h4>
<Button type="primary" size="small" icon={<PlusOutlined />}>
添加
</Button>
</div>
<div className={styles.personsList}>
{availablePersons.map(person => (
<div key={person.id} className={styles.personCard}>
<Avatar
size={40}
style={{ backgroundColor: '#87d068' }}
icon={<UserOutlined />}
/>
<div className={styles.personInfo}>
<div className={styles.personName}>{person.name}</div>
<div className={styles.personMeta}>
{person.dept} · {person.skills}
</div>
</div>
<Button
type="primary"
size="small"
icon={<PlusOutlined />}
className={styles.addButton}
/>
</div>
))}
</div>
</div>
</div>
</div>
</div>
{/* 底部：近期值班信息人员列表 */}
<div className={styles.bottomSection}>
<div className={styles.sectionHeader}>
<div className={styles.titleBar}></div>
<h2 className={styles.sectionTitle}>近期值班信息人员列表</h2>
</div>
<div className={styles.tableHeader}>
<Button type="primary" icon={<PlusOutlined />}>
添加人员
</Button>
</div>
<Table
columns={tableColumns}
dataSource={tableData}
pagination={{
total: 48,
pageSize: 3,
current: 1,
showSizeChanger: false,
showQuickJumper: true,
showTotal: (total) => `共 ${total} 条`
}}
className={styles.personTable}
/>
</div>
</div>
); );
}; };

485
src/pages/business_emergencyDuty/components/DutySchedule.less
Unescape Escape View File

@ -1,13 +1,35 @@
.container { // 整体页面容器
.pageContainer {
width: 100%;
height: 100vh;
padding: 20px; padding: 20px;
background: #F0F2F5;
display: flex;
flex-direction: column;
gap: 20px;
overflow: hidden;
// 顶部区域 (60%高度)
.topSection {
height: 60%;
display: flex;
gap: 20px;
// 左侧排班表区域 (55%宽度)
.scheduleSection {
width: 55%;
background: #fff; background: #fff;
height: 100vh; border-radius: 8px;
} padding: 20px;
display: flex;
flex-direction: column;
overflow: hidden;
.header { .sectionHeader {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 16px;
flex-shrink: 0;
.titleBar { .titleBar {
width: 3px; width: 3px;
@ -16,48 +38,40 @@
margin-right: 12px; margin-right: 12px;
} }
.title { .sectionTitle {
margin: 0; margin: 0;
font-size: 14px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
} }
} }
.toolbar { // 控制栏
.toolbar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 16px;
padding: 0 10px; padding: 0 8px;
flex-shrink: 0;
.toolbarLeft { .toolbarLeft {
flex: 1; flex: 1;
}
.toolbarRight { .legend {
display: flex; display: flex;
align-items: center; gap: 16px;
gap: 15px;
}
}
// 图例样式
.legend {
display: flex;
gap: 20px;
.legendItem { .legendItem {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 13px; font-size: 12px;
color: #666; color: #666;
gap: 6px; gap: 6px;
}
.legendDot { .legendDot {
width: 12px; width: 10px;
height: 12px; height: 10px;
border-radius: 2px; border-radius: 2px;
display: inline-block; display: inline-block;
@ -77,15 +91,21 @@
background: #E8E8E8; background: #E8E8E8;
} }
} }
} }
}
}
// 日期范围和周导航 .toolbarRight {
.dateRange { display: flex;
font-size: 13px; align-items: center;
gap: 12px;
.dateRange {
font-size: 12px;
color: #666; color: #666;
} }
.weekNav { .weekNav {
display: flex; display: flex;
gap: 0; gap: 0;
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
@ -98,7 +118,8 @@
background: #fff; background: #fff;
color: #666; color: #666;
height: 28px; height: 28px;
font-size: 13px; font-size: 12px;
padding: 0 12px;
border-right: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9;
&:last-child { &:last-child {
@ -120,17 +141,18 @@
background: #1e3bb8 !important; background: #1e3bb8 !important;
} }
} }
} }
}
}
// 表格样式 // 排班表格
.scheduleTable { .scheduleTable {
width: 100%; flex: 1;
overflow-x: auto; overflow: auto;
border: 1px solid #E5E5E5; border: 1px solid #E5E5E5;
border-radius: 4px; border-radius: 4px;
}
.table { .table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
table-layout: fixed; table-layout: fixed;
@ -141,73 +163,73 @@
vertical-align: middle; vertical-align: middle;
} }
// 表头样式
thead { thead {
background: #FAFAFA; background: #FAFAFA;
position: sticky;
top: 0;
z-index: 10;
th { th {
padding: 12px 8px; padding: 10px 6px;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
font-size: 13px; font-size: 12px;
} }
} }
tbody { tbody {
td { td {
padding: 0; padding: 0;
height: 120px; height: 100px;
} }
} }
}
// 第一列（班次列）样式 // 第一列（班次列）
.shiftHeader { .shiftHeader {
width: 140px; width: 100px;
background: #FAFAFA; background: #FAFAFA;
color: #666; color: #666;
} }
.shiftCell { .shiftCell {
background: #FAFAFA; background: #FAFAFA;
padding: 15px 10px !important; padding: 12px 8px !important;
.shiftName { .shiftName {
font-size: 14px; font-size: 13px;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
margin-bottom: 5px; margin-bottom: 4px;
} }
.shiftTime { .shiftTime {
font-size: 12px; font-size: 11px;
color: #999; color: #999;
} }
} }
// 日期表头 // 日期表头
.dayHeader { .dayHeader {
width: calc((100% - 140px) / 7); width: calc((100% - 100px) / 7);
.dayName { .dayName {
font-size: 13px; font-size: 12px;
color: #333; color: #333;
margin-bottom: 4px; margin-bottom: 3px;
} }
.dayDate { .dayDate {
font-size: 12px; font-size: 11px;
color: #999; color: #999;
font-weight: normal; font-weight: normal;
} }
} }
// 排班单元格 // 排班单元格
.scheduleCell { .scheduleCell {
position: relative; position: relative;
padding: 0 !important; padding: 0 !important;
// 不同状态的背景色
&.bg_onduty { &.bg_onduty {
background: #D4F4DD; background: #D4F4DD;
} }
@ -227,39 +249,37 @@
&.bg_mixed { &.bg_mixed {
background: linear-gradient(135deg, #D4F4DD 50%, #FFD6E0 50%); background: linear-gradient(135deg, #D4F4DD 50%, #FFD6E0 50%);
} }
}
.emptyCell { .emptyCell {
width: 100%; width: 100%;
height: 120px; height: 100px;
} }
.cellContent { .cellContent {
width: 100%; width: 100%;
height: 120px; height: 100px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 5px; gap: 4px;
padding: 10px; padding: 8px;
}
.personItem { .personItem {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 3px; gap: 2px;
.personName { .personName {
font-size: 13px; font-size: 12px;
color: #333; color: #333;
font-weight: 500; font-weight: 500;
} }
.statusTag { .statusTag {
font-size: 11px; font-size: 10px;
padding: 2px 6px; padding: 2px 5px;
border-radius: 2px; border-radius: 2px;
&.onduty { &.onduty {
@ -278,19 +298,314 @@
color: transparent; color: transparent;
} }
} }
}
}
}
}
}
}
// 右侧区域 (45%宽度)
.rightSection {
width: 45%;
display: flex;
flex-direction: column;
gap: 20px;
overflow: hidden;
// 统计卡片区域
.statsCards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
flex-shrink: 0;
.statCard {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
padding: 16px;
text-align: center;
color: #fff;
&:nth-child(1) {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
&:nth-child(2) {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
&:nth-child(3) {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
&:nth-child(4) {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.statValue {
font-size: 28px;
font-weight: bold;
margin-bottom: 4px;
line-height: 1;
}
.statLabel {
font-size: 12px;
opacity: 0.9;
}
}
}
// 排班设置面板
.settingPanel {
flex: 1;
background: #fff;
border-radius: 8px;
padding: 20px;
overflow: auto;
display: flex;
flex-direction: column;
.panelHeader {
display: flex;
align-items: center;
margin-bottom: 16px;
flex-shrink: 0;
.titleBar {
width: 3px;
height: 16px;
background: #2E4CD4;
margin-right: 12px;
}
.panelTitle {
margin: 0;
font-size: 16px;
font-weight: 500;
color: #333;
}
}
// 设置表单
.settingForm {
margin-bottom: 20px;
flex-shrink: 0;
.formItem {
margin-bottom: 16px;
.formLabel {
display: block;
font-size: 13px;
color: #666;
margin-bottom: 8px;
}
.formInput {
width: 100%;
}
}
.formActions {
margin-top: 20px;
}
}
// 可用人员列表
.availablePersons {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
.personsHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
flex-shrink: 0;
.personsTitle {
margin: 0;
font-size: 14px;
font-weight: 500;
color: #333;
}
}
.personsList {
flex: 1;
overflow: auto;
.personCard {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border: 1px solid #E5E5E5;
border-radius: 6px;
margin-bottom: 8px;
transition: all 0.3s;
&:hover {
border-color: #2E4CD4;
box-shadow: 0 2px 8px rgba(46, 76, 212, 0.1);
}
.personInfo {
flex: 1;
.personName {
font-size: 13px;
color: #333;
font-weight: 500;
margin-bottom: 4px;
}
.personMeta {
font-size: 11px;
color: #999;
}
}
.addButton {
flex-shrink: 0;
}
}
}
}
}
}
}
// 底部区域 (40%高度)
.bottomSection {
height: 40%;
background: #fff;
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column;
overflow: hidden;
.sectionHeader {
display: flex;
align-items: center;
margin-bottom: 16px;
flex-shrink: 0;
.titleBar {
width: 3px;
height: 16px;
background: #2E4CD4;
margin-right: 12px;
}
.sectionTitle {
margin: 0;
font-size: 16px;
font-weight: 500;
color: #333;
}
}
.tableHeader {
margin-bottom: 12px;
flex-shrink: 0;
}
.personTable {
flex: 1;
overflow: hidden;
:global {
.ant-table-wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.ant-spin-nested-loading {
height: 100%;
display: flex;
flex-direction: column;
}
.ant-spin-container {
height: 100%;
display: flex;
flex-direction: column;
}
.ant-table {
flex: 1;
overflow: hidden;
}
.ant-table-container {
height: 100%;
display: flex;
flex-direction: column;
}
.ant-table-body {
flex: 1;
overflow: auto !important;
}
}
.tableActions {
display: flex;
gap: 8px;
justify-content: center;
}
}
}
} }
// 响应式 // 响应式
@media screen and (max-width: 1400px) { @media screen and (max-width: 1600px) {
.pageContainer {
.topSection {
.scheduleSection {
.scheduleTable {
.table { .table {
font-size: 12px; font-size: 11px;
tbody td {
height: 80px;
} }
.personName { .scheduleCell {
font-size: 12px !important; .emptyCell {
height: 80px;
} }
.statusTag { .cellContent {
font-size: 10px !important; height: 80px;
}
}
}
}
}
.rightSection {
.statsCards {
.statCard {
padding: 12px;
.statValue {
font-size: 24px;
}
.statLabel {
font-size: 11px;
}
}
}
}
}
} }
} }

2
src/pages/business_emergencyResource/components/EmergencyMap.js
Unescape Escape View File

@ -7,7 +7,7 @@ const EmergencyMap = () => {
<div className={styles.container}> <div className={styles.container}>
<Card> <Card>
<div style={{ textAlign: 'center', padding: '50px', fontSize: '18px' }}> <div style={{ textAlign: 'center', padding: '50px', fontSize: '18px' }}>
待开发一张图 应急地图
</div> </div>
</Card> </Card>
</div> </div>

14
src/pages/business_emergencyResource/components/EmergencyResource.js
Unescape Escape View File

@ -5,7 +5,7 @@ import Yjwz from './secondary_menu/yjwz';
import Yjdw from './secondary_menu/yjdw'; import Yjdw from './secondary_menu/yjdw';
import Yjzj from './secondary_menu/yjzj'; import Yjzj from './secondary_menu/yjzj';
import Yjssd from './secondary_menu/yjssd'; import Yjssd from './secondary_menu/yjssd';
import Yjxf from './secondary_menu/yjxf'; import Yjxfd from './secondary_menu/yjxfd';
import Zbhy from './secondary_menu/zbhy'; import Zbhy from './secondary_menu/zbhy';
const EmergencyResource = () => { const EmergencyResource = () => {
@ -21,8 +21,8 @@ const EmergencyResource = () => {
'应急队伍', '应急队伍',
'应急专家', '应急专家',
'应急疏散点', '应急疏散点',
// '应急消防点', '应急消防点',
// '周边医院' '周边医院'
]; ];
const renderContent = () => { const renderContent = () => {
@ -37,10 +37,10 @@ const EmergencyResource = () => {
return <Yjzj />; return <Yjzj />;
case '应急疏散点': case '应急疏散点':
return <Yjssd />; return <Yjssd />;
// case '应急消防点': case '应急消防点':
// return <Yjxf />; return <Yjxfd />;
// case '周边医院': case '周边医院':
// return <Zbhy />; return <Zbhy />;
default: default:
return <Yjzbry />; return <Yjzbry />;
} }

10
src/pages/business_emergencyResource/components/secondary_menu/yjdw.js
Unescape Escape View File

@ -11,7 +11,7 @@ const { Option } = Select;
const Yjdw = () => { const Yjdw = () => {
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(undefined);
const [pagination, setPagination] = useState({ const [pagination, setPagination] = useState({
current: 1, current: 1,
pageSize: 10, pageSize: 10,
@ -238,7 +238,8 @@ const Yjdw = () => {
placeholder="请选择单位" placeholder="请选择单位"
value={searchValue} value={searchValue}
onChange={setSearchValue} onChange={setSearchValue}
style={{width: 180, height: 30, borderRadius: 2}} style={{width: 180}}
className={styles.customSelect}
allowClear allowClear
> >
<Option value="危险化学品事故救援队">危险化学品事故救援队</Option> <Option value="危险化学品事故救援队">危险化学品事故救援队</Option>
@ -247,9 +248,8 @@ const Yjdw = () => {
</Select> </Select>
<Input <Input
placeholder="请输入队伍名称" placeholder="请输入队伍名称"
// value={searchValue} style={{width: 180}}
// onChange={setSearchValue} className={styles.customInput}
style={{width: 180, height: 30, borderRadius: 2}}
allowClear allowClear
/> />
<Button <Button

27
src/pages/business_emergencyResource/components/secondary_menu/yjdw.less
Unescape Escape View File

@ -46,6 +46,33 @@
} }
} }
// 自定义 Select 样式
.customSelect {
:global {
.ant-select-selector {
height: 30px !important;
border-radius: 2px !important;
display: flex !important;
align-items: center !important;
}
.ant-select-selection-search-input {
height: 30px !important;
}
.ant-select-selection-item,
.ant-select-selection-placeholder {
line-height: 30px !important;
}
}
}
// 自定义 Input 样式
.customInput {
height: 30px !important;
border-radius: 2px !important;
}
// 自定义按钮样式 // 自定义按钮样式
.customButton { .customButton {
background-color: #2E4CD4 !important; background-color: #2E4CD4 !important;

198
src/pages/business_emergencyResource/components/secondary_menu/yjxfd.js
Unescape Escape View File

@ -11,7 +11,7 @@ const { Option } = Select;
const Yjxfd = () => { const Yjxfd = () => {
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(undefined);
const [pagination, setPagination] = useState({ const [pagination, setPagination] = useState({
current: 1, current: 1,
pageSize: 10, pageSize: 10,
@ -26,62 +26,80 @@ const Yjxfd = () => {
{ {
key: '1', key: '1',
number: '01', number: '01',
unitName: '文登市兴文新材料有限公司', fireName: '消防点一',
name: '国云海', waterPointName: '消防池 01',
position: '生产班长', hydrantCount: 97,
mobile: '17898786567', hydrantLocation: '一楼走廊',
email: '1878967633@qq.com', range: 97,
dutyTime: '夜班', waterType: '企业消防水池',
personInCharge: '冯钰涛',
fireImage: '点击查看图片',
remarks: '无',
}, },
{ {
key: '2', key: '2',
number: '02', number: '02',
unitName: '文登市兴文新材料有限公司', fireName: '消防点二',
name: '陈志强', waterPointName: '消防池 02',
position: '生产班长', hydrantCount: 96,
mobile: '17898786567', hydrantLocation: '二楼走廊',
email: '1878967633@qq.com', range: 96,
dutyTime: '白班', waterType: '企业消防水池',
personInCharge: '周静',
fireImage: '点击查看图片',
remarks: '备注二二',
}, },
{ {
key: '3', key: '3',
number: '03', number: '03',
unitName: '合湾新材科技有限公司', fireName: '消防点三',
name: '侯文涛', waterPointName: '消防池 03',
position: '班长', hydrantCount: 91,
mobile: '17898786567', hydrantLocation: '三楼图书馆门口',
email: '1878967633@qq.com', range: 91,
dutyTime: '白班', waterType: '企业消防水池',
personInCharge: '何能',
fireImage: '点击查看图片',
remarks: '备注三三',
}, },
{ {
key: '4', key: '4',
number: '04', number: '04',
unitName: '山东万图高分子材料股份有限公司', fireName: '消防点四',
name: '宋东', waterPointName: '消防池 04',
position: '班长', hydrantCount: 59,
mobile: '17898786567', hydrantLocation: '三楼应急通道口',
email: '1878967633@qq.com', range: 59,
dutyTime: '夜班', waterType: '企业消防水池',
personInCharge: '冯新',
fireImage: '点击查看图片',
remarks: '备注四四',
}, },
{ {
key: '5', key: '5',
number: '05', number: '05',
unitName: '合鸿新材科技有限公司', fireName: '消防点五',
name: '王一声', waterPointName: '消防池 05',
position: '班长', hydrantCount: 50,
mobile: '17898786567', hydrantLocation: '负一层东侧走廊',
email: '1878967633@qq.com', range: 50,
dutyTime: '夜班', waterType: '企业消防水池',
personInCharge: '赵俊英',
fireImage: '点击查看图片',
remarks: '备注五五',
}, },
{ {
key: '6', key: '6',
number: '06', number: '06',
unitName: '山东万图高分子材料股份有限公司', fireName: '消防点六',
name: '赵小敏', waterPointName: '消防池 06',
position: '班长', hydrantCount: 48,
mobile: '17898786567', hydrantLocation: '四楼c西侧走廊',
email: '1878987633@qq.com', range: 48,
dutyTime: '夜班', waterType: '企业消防水池',
personInCharge: '赵中琏',
fireImage: '点击查看图片',
remarks: '备注六六',
}, },
]); ]);
@ -94,39 +112,66 @@ const Yjxfd = () => {
width: 80, width: 80,
}, },
{ {
title: '单位名称', title: '消防点名称',
dataIndex: 'unitName', dataIndex: 'fireName',
key: 'unitName', key: 'fireName',
width: 200, width: 120,
}, },
{ {
title: '姓名', title: '消防取水点名称',
dataIndex: 'name', dataIndex: 'waterPointName',
key: 'name', key: 'waterPointName',
width: 100, width: 140,
}, },
{ {
title: '职务', title: '消防栓数量',
dataIndex: 'position', dataIndex: 'hydrantCount',
key: 'position', key: 'hydrantCount',
width: 120, width: 110,
}, },
{ {
title: '手机号', title: '消防栓位置',
dataIndex: 'mobile', dataIndex: 'hydrantLocation',
key: 'mobile', key: 'hydrantLocation',
width: 130, width: 150,
},
{
title: '射程',
dataIndex: 'range',
key: 'range',
width: 80,
},
{
title: '消防栓用水类型',
dataIndex: 'waterType',
key: 'waterType',
width: 140,
},
{
title: '负责人',
dataIndex: 'personInCharge',
key: 'personInCharge',
width: 100,
}, },
{ {
title: '邮箱', title: '消防点图片',
dataIndex: 'email', dataIndex: 'fireImage',
key: 'email', key: 'fireImage',
width: 180, width: 120,
render: (text) => (
<Button
type="link"
size="small"
onClick={() => message.info('查看图片功能待实现')}
>
{text}
</Button>
),
}, },
{ {
title: '值班时间', title: '备注',
dataIndex: 'dutyTime', dataIndex: 'remarks',
key: 'dutyTime', key: 'remarks',
width: 100, width: 100,
}, },
{ {
@ -191,14 +236,14 @@ const Yjxfd = () => {
// 编辑处理 // 编辑处理
const handleEdit = (record) => { const handleEdit = (record) => {
message.info(`编辑 ${record.name} 的信息`); message.info(`编辑 ${record.fireName} 的信息`);
}; };
// 删除处理 // 删除处理
const handleDelete = (record) => { const handleDelete = (record) => {
Modal.confirm({ Modal.confirm({
title: '确认删除', title: '确认删除',
content: `确定要删除 ${record.name} 吗？`, 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('删除成功');
@ -212,28 +257,37 @@ const Yjxfd = () => {
}; };
return ( return (
<div className={styles.container}> <div className={styles.containerYJXFD}>
{/* 页面标题 */} {/* 页面标题 */}
<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}> <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, height: 30, borderRadius: 2}} style={{width: 180}}
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>
</Select> </Select>
<Input
placeholder="请输入消防点名称"
style={{width: 180}}
className={styles.customInput}
allowClear
/>
<Button <Button
type="primary" type="primary"
icon={<SearchOutlined />} icon={<SearchOutlined />}
@ -253,14 +307,14 @@ const Yjxfd = () => {
> >
新增 新增
</Button> </Button>
<Button {/* <Button
danger danger
style={{width: 70, height: 30, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center'}} 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}}/>} icon={<img src={iconsc} alt="delete" style={{width: 14, height: 14, marginTop: -2}}/>}
onClick={handleBatchDelete} onClick={handleBatchDelete}
> >
删除 删除
</Button> </Button> */}
</div> </div>
</div> </div>

175
src/pages/business_emergencyResource/components/secondary_menu/yjxfd.less
Unescape Escape View File

@ -1,122 +1,165 @@
.container { .containerYJXFD {
padding: 20px; padding: 20px;
background: #f5f5f5; background: #fff;
min-height: 100vh; height:100vh;
} }
.header { .header {
margin-bottom: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
} // background-color: pink;
margin-bottom: 15px;
.titleBar {
width: 4px; .titleBar {
height: 20px; width: 3px;
background: #1890ff; height: 16px;
margin-right: 10px; background: #2E4CD4;
} margin-right: 12px;
}
.title { .title {
margin: 0; margin: 0;
font-size: 18px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
}
} }
.searchBar { .searchBar {
background: #fff;
padding: 20px;
border-radius: 6px;
margin-bottom: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin-bottom: 10px;
} padding: 5px;
.searchLeft { .searchLeft {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
} }
.searchRight { .searchRight {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
}
} }
.customButton { // 自定义 Select 样式
.customSelect {
:global {
.ant-select-selector {
height: 30px !important;
border-radius: 2px !important;
display: flex !important;
align-items: center !important;
}
.ant-select-selection-search-input {
height: 30px !important; height: 30px !important;
}
.ant-select-selection-item,
.ant-select-selection-placeholder {
line-height: 30px !important;
}
}
}
// 自定义 Input 样式
.customInput {
height: 30px !important;
border-radius: 2px !important;
}
// 自定义按钮样式
.customButton {
background-color: #2E4CD4 !important;
border-color: #2E4CD4 !important;
border-radius: 2px !important; border-radius: 2px !important;
height: 30px !important;
width: 75px;
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;
&:hover {
background-color: #1e3bb8 !important;
border-color: #1e3bb8 !important;
}
&:focus {
background-color: #2E4CD4 !important;
border-color: #2E4CD4 !important;
}
} }
// // 所有按钮统一样式
// .ant-btn {
// border-radius: 4px !important;
// height: 28px !important;
// display: flex !important;
// align-items: center !important;
// justify-content: center !important;
// }
.tableContainer { .tableContainer {
background: #fff; background: #fff;
border-radius: 6px; border-radius: 0px;
padding: 20px; overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.actionButtons { .actionButtons {
display: flex; display: flex;
gap: 8px; gap: 8px;
} font-size: 10px;
justify-content: center;
.actionButtons .ant-btn-link { .ant-btn-link {
padding: 0; padding: 0;
height: auto; height: auto;
line-height: 1; font-size: 10px;
} }
.actionButtons .ant-btn-link:hover {
background: transparent;
}
// 覆盖全局按钮样式
:global(.ant-btn) {
height: 28px !important;
border-radius: 2px !important;
}
:global(.ant-select) {
.ant-select-selector {
height: 30px !important;
border-radius: 2px !important;
} }
} }
:global(.ant-input) { // 表格样式优化
height: 30px !important; .tableContainer {
border-radius: 2px !important; :global {
}
:global(.ant-table) {
.ant-table-thead > tr > th { .ant-table-thead > tr > th {
background: #fafafa; background: #F5F5FA;
font-weight: 500; font-weight: 500;
color: #333; color: #333333;
font-size: 14px;
text-align: center;
}
.ant-table-tbody > tr > td {
color: #666666;
font-size: 13px;
text-align: center;
} }
.ant-table-tbody > tr:hover > td { .ant-table-tbody > tr:hover > td {
background: #f5f5f5; background: #f5f5f5;
} }
}
:global(.ant-pagination) { .ant-pagination {
margin-top: 16px; margin-top: 10px;
text-align: right; text-align: right;
} }
:global(.ant-pagination-item) { // 覆盖操作列按钮样式
border-radius: 2px; .ant-btn.ant-btn-sm {
} font-size: 13px !important;
height: 20px !important;
padding: 0px 4px !important;
}
:global(.ant-pagination-prev), .ant-btn-link.ant-btn-sm {
:global(.ant-pagination-next) { font-size: 13px !important;
border-radius: 2px; height: auto !important;
padding: 0 !important;
}
}
} }

Write Preview
Loading…
Cancel
Save