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

事件通知页面

Browse Source
main
wangyunfei 1 month ago
parent 669c14acc9
commit dfc7634b7b
2 changed files with 141 additions and 71 deletions
Show Stats Download Patch File Download Diff File

78
src/pages/business_emergencyAccident/components/EventNotification.js
Unescape Escape View File

@ -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 className={styles.eventItemFooter}>
<Tag color={item.statusColor} className={styles.statusTag}>{item.currentStatus}</Tag>
<span className={styles.eventId}>ID: {item.id}</span>
</div>
</div>
))}

120
src/pages/business_emergencyAccident/components/EventNotification.less
Unescape Escape View File

@ -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;
background-color: #556FEB;
border-color: #556FEB;
min-height: 0;
display: flex;
flex-direction: column;
.textAreaFullHeight {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
:global {
.ant-input {
flex: 1;
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,18 +411,24 @@
font-size: 12px;
}
}
}
.eventStatus {
.eventItemFooter {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
font-size: 12px;
.currentStatus {
color: #666;
.statusTag {
margin: 0;
font-size: 12px;
border-radius: 4px;
color: #fff;
border: none;
}
.eventId {
font-size: 12px;
color: #999;
}
}
@ -390,7 +436,6 @@
}
}
}
}
// B块：推送记录
.blockB {
@ -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;
}
}
}
}

Write Preview
Loading…
Cancel
Save