From dfc7634b7b189782a47d816a4e928ea95cfe618f Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Wed, 5 Nov 2025 15:20:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E9=80=9A=E7=9F=A5=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/EventNotification.js           |  80 ++++++-----
 .../components/EventNotification.less         | 132 +++++++++++++-----
 2 files changed, 141 insertions(+), 71 deletions(-)

diff --git a/src/pages/business_emergencyAccident/components/EventNotification.js b/src/pages/business_emergencyAccident/components/EventNotification.js
index 50ae9ca..b59fe17 100644
--- a/src/pages/business_emergencyAccident/components/EventNotification.js
+++ b/src/pages/business_emergencyAccident/components/EventNotification.js
@@ -46,41 +46,44 @@ const EventNotification = () => {
             key: '1',
             title: '交通事故(A301国道K125段)',
             time: '2023-04-17 14:45',
-            status: '重大',
-            statusColor: '#ff4d4f',
+            severity: '重大',
+            severityColor: '#ff4d4f',
             currentStatus: '处理中',
+            statusColor: '#1890ff',
             id: 'EVT-20230615-008'
         },
         {
             key: '2',
-            title: '火灾事故(南城区商业街)',
-            time: '2023-04-16 09:30',
-            status: '较大',
-            statusColor: '#ff9800',
+            title: '商铺火灾(城东商业区)',
+            time: '2023-04-17 14:45',
+            severity: '较大',
+            severityColor: '#ff9800',
             currentStatus: '已解决',
-            id: 'EVT-20230614-005'
+            statusColor: '#52c41a',
+            id: 'EVT-20230615-008'
         },
         {
             key: '3',
-            title: '化学品泄漏(工业区A区)',
-            time: '2023-04-15 16:20',
-            status: '一般',
-            statusColor: '#36cfc9',
+            title: '管道泄漏(民生路)',
+            time: '2023-04-17 14:45',
+            severity: '一般',
+            severityColor: '#1890ff',
             currentStatus: '已解决',
-            id: 'EVT-20230613-003'
+            statusColor: '#52c41a',
+            id: 'EVT-20230615-008'
         },
         {
             key: '4',
-            title: '自然灾害(台风影响)',
-            time: '2023-04-14 11:15',
-            status: '较大',
-            statusColor: '#ff9800',
+            title: '群体聚集事件(市政府前)',
+            time: '2023-04-17 14:45',
+            severity: '较大',
+            severityColor: '#ff9800',
             currentStatus: '已解决',
-            id: 'EVT-20230612-001'
+            statusColor: '#52c41a',
+            id: 'EVT-20230615-008'
         }
     ];
 
-    // 推送记录表格数据
     const pushRecordData = {
         list: [
             {
@@ -125,43 +128,49 @@ const EventNotification = () => {
         }
     };
 
-    // 推送记录表格列定义
+
     const pushRecordColumns = [
         {
             title: '事件编号',
             dataIndex: 'eventId',
             key: 'eventId',
-            width: 180
+            width: 180,
+            align: 'center'
         },
         {
             title: '事件名称',
             dataIndex: 'eventName',
             key: 'eventName',
-            width: 180
+            width: 180,
+            align: 'center'
         },
         {
             title: '推送时间',
             dataIndex: 'pushTime',
             key: 'pushTime',
-            width: 180
+            width: 180,
+            align: 'center'
         },
         {
             title: '接收对象',
             dataIndex: 'recipient',
             key: 'recipient',
-            width: 200
+            width: 200,
+            align: 'center'
         },
         {
             title: '推送方式',
             dataIndex: 'pushMethod',
             key: 'pushMethod',
-            width: 150
+            width: 150,
+            align: 'center'
         },
         {
             title: '状态',
             dataIndex: 'status',
             key: 'status',
             width: 100,
+            align: 'center',
             render: (text, record) => {
                 let color = '#52c41a';
                 if (record.statusType === 'sending') color = '#ff9800';
@@ -172,6 +181,7 @@ const EventNotification = () => {
             title: '操作',
             key: 'action',
             width: 100,
+            align: 'center',
             render: () => (
                 <Button type="link" size="small">查看</Button>
             )
@@ -307,12 +317,12 @@ const EventNotification = () => {
                                         onLoadedMetadata={handleVideoLoaded}
                                         preload="metadata"
                                     >
-                                        {/* 使用本地测试视频 */}
+                                        {/* 使用本地视频 */}
                                         <source 
                                             src={testVideo} 
                                             type="video/mp4" 
                                         />
-                                        {/* 如果视频加载失败，显示提示 */}
+                                        {/* 视频加载失败，提示 */}
                                         您的浏览器不支持视频播放。
                                     </video>
                                     {/* 自定义播放控制栏 */}
@@ -339,13 +349,13 @@ const EventNotification = () => {
                                 </div>
                             </div>
                         </div>
-                        <div className={styles.formItem}>
+                        <div className={`${styles.formItem} ${styles.formItemFlex}`}>
                             <label className={styles.label}>视频核实记录</label>
                             <TextArea
                                 placeholder="记录视频核实情况..."
-                                rows={3}
                                 value={videoRecord}
                                 onChange={(e) => setVideoRecord(e.target.value)}
+                                className={styles.textAreaFullHeight}
                             />
                         </div>
                     </div>
@@ -354,7 +364,7 @@ const EventNotification = () => {
                 {/* c块：信息推送 */}
                 <div className={styles.blockA_c}>
                     <div className={styles.cardHeader}>
-                        <SendOutlined className={styles.headerIcon} />
+                        <img src={iconAcc3} alt="icon" style={{ width: '16px', height: '16px' }} />
                         <span className={styles.headerText}>信息推送</span>
                     </div>
                     <div className={styles.cardContent}>
@@ -425,17 +435,17 @@ const EventNotification = () => {
                             <div key={item.key} className={styles.eventItem}>
                                 <div className={styles.eventItemHeader}>
                                     <span className={styles.eventTitle}>{item.title}</span>
-                                    <Tag color={item.statusColor}>{item.status}</Tag>
+                                    <Tag color={item.severityColor} className={styles.severityTag}>{item.severity}</Tag>
                                 </div>
-                                <div className={styles.eventItemFooter}>
+                                <div className={styles.eventItemMiddle}>
                                     <div className={styles.eventTime}>
                                         <ClockCircleOutlined className={styles.timeIcon} />
                                         <span>{item.time}</span>
                                     </div>
-                                    <div className={styles.eventStatus}>
-                                        <span className={styles.currentStatus}>{item.currentStatus}</span>
-                                        <span className={styles.eventId}>ID: {item.id}</span>
-                                    </div>
+                                </div>
+                                <div className={styles.eventItemFooter}>
+                                    <Tag color={item.statusColor} className={styles.statusTag}>{item.currentStatus}</Tag>
+                                    <span className={styles.eventId}>ID: {item.id}</span>
                                 </div>
                             </div>
                         ))}
diff --git a/src/pages/business_emergencyAccident/components/EventNotification.less b/src/pages/business_emergencyAccident/components/EventNotification.less
index bf9ad57..f6432f8 100644
--- a/src/pages/business_emergencyAccident/components/EventNotification.less
+++ b/src/pages/business_emergencyAccident/components/EventNotification.less
@@ -152,9 +152,9 @@
 
                             .videoPlayer {
                                 width: 100%;
-                                height: 150px;
+                                height: auto;
                                 display: block;
-                                object-fit: cover;
+                                object-fit: contain;
                                 background-color: #000;
                             }
 
@@ -193,10 +193,33 @@
                             display: flex;
                             gap: 10px;
 
+
                             :global(.ant-btn) {
+                                padding: 0 15px;
+                                background-color: #2E4CD4;
+                                border-color: #2E4CD4;
+                            }
+                        }
+                    }
+                }
+
+                .formItemFlex {
+                    flex: 1;
+                    min-height: 0;
+                    display: flex;
+                    flex-direction: column;
+
+                    .textAreaFullHeight {
+                        flex: 1;
+                        min-height: 0;
+                        display: flex;
+                        flex-direction: column;
+
+                        :global {
+                            .ant-input {
                                 flex: 1;
-                                background-color: #556FEB;
-                                border-color: #556FEB;
+                                height: 100% !important;
+                                resize: none;
                             }
                         }
                     }
@@ -216,7 +239,9 @@
 
             .cardHeader {
                 height: 40px;
-                background-color: #556FEB;
+                border-top-left-radius: 8px;
+                border-top-right-radius: 8px;
+                background: linear-gradient(180deg, #556FEB 0%, #8DAAF7 100%);
                 display: flex;
                 align-items: center;
                 padding: 0 15px;
@@ -276,10 +301,9 @@
                 }
 
                 .pushButton {
-                    width: 100%;
+                    width: 100px;
                     margin-top: auto;
-                    background-color: #556FEB;
-                    border-color: #556FEB;
+                    background-color: #2E4CD4;
                 }
             }
         }
@@ -290,27 +314,28 @@
             padding: 0;
             margin: 0;
             background-color: #fff;
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
             display: flex;
             flex-direction: column;
             box-sizing: border-box;
 
             .blockA_d_header {
-                padding: 15px;
+                padding: 12px 15px;
                 display: flex;
                 align-items: center;
                 gap: 8px;
-                background-color: #fff;
 
                 .titleBar {
-                    width: 2px;
+                    width: 3px;
                     height: 16px;
                     background-color: #2E4CD4;
                     flex-shrink: 0;
                 }
 
                 .titleText {
-                    font-size: 16px;
-                    font-weight: bold;
+                    font-size: 14px;
+                    font-weight: 450;
                     color: #333333;
                 }
             }
@@ -318,20 +343,28 @@
             .eventList {
                 flex: 1;
                 padding: 0 15px 15px 15px;
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                grid-template-rows: 1fr 1fr;
-                gap: 15px;
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
                 overflow-y: auto;
+                scrollbar-width: none; /* Firefox */
+                -ms-overflow-style: none; /* IE 10+ */
+                
+                &::-webkit-scrollbar {
+                    display: none; /* Chrome Safari */
+                }
 
                 .eventItem {
+                    width: 100%;
+                    height: 100px;
                     padding: 12px;
-                    border: 1px solid #e8e8e8;
                     border-radius: 4px;
                     display: flex;
                     flex-direction: column;
                     gap: 10px;
-                    background-color: #fafafa;
+                    background-color: #F6F7FF;
+                    box-sizing: border-box;
+                    flex-shrink: 0;
 
                     .eventItemHeader {
                         display: flex;
@@ -347,6 +380,15 @@
                             line-height: 1.4;
                         }
 
+                        .severityTag {
+                            margin: 0;
+                            flex-shrink: 0;
+                            font-size: 12px;
+                            border-radius: 4px;
+                            color: #fff;
+                            border: none;
+                        }
+
                         :global(.ant-tag) {
                             margin: 0;
                             flex-shrink: 0;
@@ -354,11 +396,9 @@
                         }
                     }
 
-                    .eventItemFooter {
+                    .eventItemMiddle {
                         display: flex;
-                        justify-content: space-between;
                         align-items: center;
-                        gap: 10px;
 
                         .eventTime {
                             display: flex;
@@ -371,20 +411,25 @@
                                 font-size: 12px;
                             }
                         }
+                    }
 
-                        .eventStatus {
-                            display: flex;
-                            align-items: center;
-                            gap: 10px;
-                            font-size: 12px;
+                    .eventItemFooter {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        gap: 10px;
 
-                            .currentStatus {
-                                color: #666;
-                            }
+                        .statusTag {
+                            margin: 0;
+                            font-size: 12px;
+                            border-radius: 4px;
+                            color: #fff;
+                            border: none;
+                        }
 
-                            .eventId {
-                                color: #999;
-                            }
+                        .eventId {
+                            font-size: 12px;
+                            color: #999;
                         }
                     }
                 }
@@ -411,15 +456,15 @@
             background-color: #fff;
 
             .titleBar {
-                width: 2px;
+                width: 3px;
                 height: 16px;
                 background-color: #2E4CD4;
                 flex-shrink: 0;
             }
 
             .titleText {
-                font-size: 16px;
-                font-weight: bold;
+                font-size: 14px;
+                font-weight:450;
                 color: #333333;
             }
         }
@@ -443,6 +488,21 @@
             :global(.ant-table-body) {
                 overflow-y: auto;
             }
+
+            // 表头样式
+            :global(.ant-table-thead > tr > th) {
+                background-color: #F5F5FA;
+                color: #333;
+                font-weight: 450;
+                text-align: center;
+            }
+
+            // 表体样式
+            :global(.ant-table-tbody > tr > td) {
+                color: #666666;
+                font-weight: 400;
+                text-align: center;
+            }
         }
     }
 }