From 2ba9e32ea7e75c57b3d581de7b6b716c243adb3c Mon Sep 17 00:00:00 2001 From: wangyunfei <1224056307@qq,com> Date: Thu, 6 Nov 2025 18:34:01 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_Emergency/iconDutyLog1.svg | 6 + .../business_Emergency/iconDutyLog2.svg | 6 + .../business_Emergency/iconDutyLog3.svg | 6 + .../business_Emergency/iconDutyLog4.svg | 18 ++ .../components/EventWarningManagement.js | 157 +++++++++++++++--- .../components/EventWarningManagement.less | 90 ++++++++-- .../components/DutyLog.less | 8 +- 7 files changed, 254 insertions(+), 37 deletions(-) create mode 100644 src/assets/business_Emergency/iconDutyLog1.svg create mode 100644 src/assets/business_Emergency/iconDutyLog2.svg create mode 100644 src/assets/business_Emergency/iconDutyLog3.svg create mode 100644 src/assets/business_Emergency/iconDutyLog4.svg diff --git a/src/assets/business_Emergency/iconDutyLog1.svg b/src/assets/business_Emergency/iconDutyLog1.svg new file mode 100644 index 0000000..65f578e --- /dev/null +++ b/src/assets/business_Emergency/iconDutyLog1.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/business_Emergency/iconDutyLog2.svg b/src/assets/business_Emergency/iconDutyLog2.svg new file mode 100644 index 0000000..7140a82 --- /dev/null +++ b/src/assets/business_Emergency/iconDutyLog2.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/business_Emergency/iconDutyLog3.svg b/src/assets/business_Emergency/iconDutyLog3.svg new file mode 100644 index 0000000..806d5aa --- /dev/null +++ b/src/assets/business_Emergency/iconDutyLog3.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/business_Emergency/iconDutyLog4.svg b/src/assets/business_Emergency/iconDutyLog4.svg new file mode 100644 index 0000000..4705979 --- /dev/null +++ b/src/assets/business_Emergency/iconDutyLog4.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/pages/business_emergencyAccident/components/EventWarningManagement.js b/src/pages/business_emergencyAccident/components/EventWarningManagement.js index 5eb7c2d..04ef762 100644 --- a/src/pages/business_emergencyAccident/components/EventWarningManagement.js +++ b/src/pages/business_emergencyAccident/components/EventWarningManagement.js @@ -1,24 +1,17 @@ import React, { useState, useEffect, useRef } from 'react'; -import { Button, Segmented, Tag } from 'antd'; -import { - ExclamationCircleOutlined, - FolderOutlined, - FileTextOutlined, - PlusOutlined, - EditOutlined, - EyeOutlined -} from '@ant-design/icons'; +import { Button, Segmented, Tag, Drawer, Form, Input, Select } from 'antd'; +import { PlusOutlined } from '@ant-design/icons'; import * as echarts from 'echarts'; import StandardTable from '@/components/StandardTable'; import styles from './EventWarningManagement.less'; - -// import bgMan1 from '@/assets/business_Emergency/bgMan1.svg'; import bgMan2 from '@/assets/business_Emergency/bgMan2.svg'; import bgMan3 from '@/assets/business_Emergency/bgMan3.svg'; import bgMan4 from '@/assets/business_Emergency/bgMan4.svg'; import bgMan5 from '@/assets/business_Emergency/bgMan5.svg'; const EventWarningManagement = () => { + const [form] = Form.useForm(); + const [drawerVisible, setDrawerVisible] = useState(false); const [timeType, setTimeType] = useState('month'); const lineChartRef = useRef(null); const lineChartInstanceRef = useRef(null); @@ -442,8 +435,8 @@ const EventWarningManagement = () => { width: 100, align: 'center', render: (text) => { - let color = "#00AAFA" - let backgroundColor = "#DAF3FF" + let color = "#00AAFA"; + let backgroundColor = "#DAF3FF"; if (text === '处理中') { color = '#FF8800'; backgroundColor = '#FFF3E9'; @@ -451,10 +444,9 @@ const EventWarningManagement = () => { color = '#44BB5F'; backgroundColor = '#D8F7DE'; } - return ( {text} - ) + ); } }, { @@ -462,15 +454,40 @@ const EventWarningManagement = () => { key: 'action', width: 140, align: 'center', - render: (_, record) => ( -
- - + render: () => ( +
+ +
) } ]; + // 显示添加预警抽屉 + const showAddDrawer = () => { + setDrawerVisible(true); + }; + + // 关闭抽屉 + const onCloseDrawer = () => { + setDrawerVisible(false); + form.resetFields(); + }; + + // 提交表单 + const handleSubmit = async () => { + try { + const values = await form.validateFields(); + console.log('提交的表单数据:', values); + // TODO: 调用API提交数据 + // 提交成功后关闭抽屉并刷新表格 + onCloseDrawer(); + // 刷新表格数据 + } catch (error) { + console.error('表单验证失败:', error); + } + }; + return (
{/* A块：顶部统计区域 */} @@ -549,7 +566,12 @@ const EventWarningManagement = () => {
事件预警信息
-
@@ -561,6 +583,101 @@ const EventWarningManagement = () => { /> + + {/* 添加事件预警抽屉 */} + + + + + } + > +
+ + + + + + + + + + + + + + + + + + + +
+ ); }; diff --git a/src/pages/business_emergencyAccident/components/EventWarningManagement.less b/src/pages/business_emergencyAccident/components/EventWarningManagement.less index 8e54576..9be9761 100644 --- a/src/pages/business_emergencyAccident/components/EventWarningManagement.less +++ b/src/pages/business_emergencyAccident/components/EventWarningManagement.less @@ -40,15 +40,12 @@ // a块：左侧70% .blockA_a { width: 70%; - padding: 0; - margin: 0; display: flex; flex-direction: column; background: url('~@/assets/business_Emergency/bgDrill3.svg') right center no-repeat, linear-gradient(170.5deg, #FFF5F4 6.87%, #FFFFFF 46.42%); background-size: contain, 100% 100%; border: 2px solid #FFFFFF; - width: 141; gap: 15px; padding: 10px 15px; box-sizing: border-box; @@ -66,11 +63,8 @@ // b块：右侧30% .blockA_b { flex: 1; - padding: 0; - margin: 0; display: flex; flex-direction: row; - // gap: 5px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(208, 225, 255, 0.6) 100%); border: 2px solid #FFFFFF; @@ -132,13 +126,10 @@ // c块：左侧70% .blockB_c { width: 70%; - padding: 0; - margin: 0; background-color: #ffffff; display: flex; flex-direction: column; padding: 5px 15px 0px 15px; - .chartHeader { display: flex; @@ -149,10 +140,10 @@ .chartContent { flex: 1; min-height: 0; + .lineChart { width: 100%; height: 100%; - // min-height: 200px; } } } @@ -160,8 +151,6 @@ // d块：右侧30% .blockB_d { flex: 1; - padding: 0; - margin: 0; background-color: #ffffff; display: flex; flex-direction: column; @@ -183,8 +172,6 @@ // C块：底部表格区域，高度撑满剩余 .blockC { flex: 1; - padding: 0; - margin: 0; background-color: #ffffff; display: flex; flex-direction: column; @@ -239,4 +226,79 @@ } } } + + // 抽屉 Footer 样式 + .drawerFooter { + text-align: right; + padding: 10px 0; + + :global { + button.ant-btn { + &.drawerCancelBtn { + margin-right: 8px; + background-color: #B6BBD9 !important; + border-color: #B6BBD9 !important; + color: #fff !important; + + &:hover, + &:focus { + background-color: #A5AAC7 !important; + border-color: #A5AAC7 !important; + color: #fff !important; + } + } + + &.drawerSubmitBtn { + background-color: #2E4CD4 !important; + border-color: #2E4CD4 !important; + color: #fff !important; + + &:hover, + &:focus { + background-color: #2540B8 !important; + border-color: #2540B8 !important; + color: #fff !important; + } + } + } + } + } + + :global { + .eventWarningDrawer { + .ant-drawer-header { + background-color: #F6F7FF !important; + + .ant-drawer-title { + color: #333333 !important; + } + } + + .ant-drawer-body { + color: #333333; + + .ant-form-item-label > label { + color: #333333 !important; + } + + .ant-input, + .ant-select-selector { + color: #333333 !important; + } + + .ant-input::placeholder { + color: #999999 !important; + } + + .ant-select-selection-placeholder { + color: #999999 !important; + } + } + + .ant-drawer-footer { + border-top: 1px solid #E5E5E5; + padding: 16px 24px; + } + } + } } \ No newline at end of file diff --git a/src/pages/business_emergencyDuty/components/DutyLog.less b/src/pages/business_emergencyDuty/components/DutyLog.less index 4d68750..76f7447 100644 --- a/src/pages/business_emergencyDuty/components/DutyLog.less +++ b/src/pages/business_emergencyDuty/components/DutyLog.less @@ -9,8 +9,10 @@ // A块：顶部统计卡片区域 .blockA { width: 100%; - height: 18%; + height: 15%; display: flex; + align-items: center; + justify-content: center; gap: 16px; margin-bottom: 16px; background: url('@/assets/business_Emergency/bgDrill2.svg') no-repeat center center; @@ -19,8 +21,8 @@ padding: 1 6px; .statCard { - flex: 1; - height: 100%; + width:20%; + height: 80%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(208, 225, 255, 0.6) 100%); border-radius: 2px; border: 2px solid #FFFFFF;