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

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

@ -46,41 +46,44 @@ const EventNotification = () => {
key: '1', key: '1',
title: '交通事故(A301国道K125段)', title: '交通事故(A301国道K125段)',
time: '2023-04-17 14:45', time: '2023-04-17 14:45',
status: '重大', severity: '重大',
statusColor: '#ff4d4f', severityColor: '#ff4d4f',
currentStatus: '处理中', currentStatus: '处理中',
statusColor: '#1890ff',
id: 'EVT-20230615-008' id: 'EVT-20230615-008'
}, },
{ {
key: '2', key: '2',
title: '火灾事故(南城区商业街)', title: '商铺火灾(城东商业区)',
time: '2023-04-16 09:30', time: '2023-04-17 14:45',
status: '较大', severity: '较大',
statusColor: '#ff9800', severityColor: '#ff9800',
currentStatus: '已解决', currentStatus: '已解决',
id: 'EVT-20230614-005' statusColor: '#52c41a',
id: 'EVT-20230615-008'
}, },
{ {
key: '3', key: '3',
title: '化学品泄漏(工业区A区)', title: '管道泄漏(民生路)',
time: '2023-04-15 16:20', time: '2023-04-17 14:45',
status: '一般', severity: '一般',
statusColor: '#36cfc9', severityColor: '#1890ff',
currentStatus: '已解决', currentStatus: '已解决',
id: 'EVT-20230613-003' statusColor: '#52c41a',
id: 'EVT-20230615-008'
}, },
{ {
key: '4', key: '4',
title: '自然灾害(台风影响)', title: '群体聚集事件(市政府前)',
time: '2023-04-14 11:15', time: '2023-04-17 14:45',
status: '较大', severity: '较大',
statusColor: '#ff9800', severityColor: '#ff9800',
currentStatus: '已解决', currentStatus: '已解决',
id: 'EVT-20230612-001' statusColor: '#52c41a',
id: 'EVT-20230615-008'
} }
]; ];
// 推送记录表格数据
const pushRecordData = { const pushRecordData = {
list: [ list: [
{ {
@ -125,43 +128,49 @@ const EventNotification = () => {
} }
}; };
// 推送记录表格列定义
const pushRecordColumns = [ const pushRecordColumns = [
{ {
title: '事件编号', title: '事件编号',
dataIndex: 'eventId', dataIndex: 'eventId',
key: 'eventId', key: 'eventId',
width: 180 width: 180,
align: 'center'
}, },
{ {
title: '事件名称', title: '事件名称',
dataIndex: 'eventName', dataIndex: 'eventName',
key: 'eventName', key: 'eventName',
width: 180 width: 180,
align: 'center'
}, },
{ {
title: '推送时间', title: '推送时间',
dataIndex: 'pushTime', dataIndex: 'pushTime',
key: 'pushTime', key: 'pushTime',
width: 180 width: 180,
align: 'center'
}, },
{ {
title: '接收对象', title: '接收对象',
dataIndex: 'recipient', dataIndex: 'recipient',
key: 'recipient', key: 'recipient',
width: 200 width: 200,
align: 'center'
}, },
{ {
title: '推送方式', title: '推送方式',
dataIndex: 'pushMethod', dataIndex: 'pushMethod',
key: 'pushMethod', key: 'pushMethod',
width: 150 width: 150,
align: 'center'
}, },
{ {
title: '状态', title: '状态',
dataIndex: 'status', dataIndex: 'status',
key: 'status', key: 'status',
width: 100, width: 100,
align: 'center',
render: (text, record) => { render: (text, record) => {
let color = '#52c41a'; let color = '#52c41a';
if (record.statusType === 'sending') color = '#ff9800'; if (record.statusType === 'sending') color = '#ff9800';
@ -172,6 +181,7 @@ const EventNotification = () => {
title: '操作', title: '操作',
key: 'action', key: 'action',
width: 100, width: 100,
align: 'center',
render: () => ( render: () => (
<Button type="link" size="small">查看</Button> <Button type="link" size="small">查看</Button>
) )
@ -307,12 +317,12 @@ const EventNotification = () => {
onLoadedMetadata={handleVideoLoaded} onLoadedMetadata={handleVideoLoaded}
preload="metadata" preload="metadata"
> >
{/* 使用本地测试视频 */} {/* 使用本地视频 */}
<source <source
src={testVideo} src={testVideo}
type="video/mp4" type="video/mp4"
/> />
{/* 如果视频加载失败，显示提示 */} {/* 视频加载失败，提示 */}
您的浏览器不支持视频播放。 您的浏览器不支持视频播放。
</video> </video>
{/* 自定义播放控制栏 */} {/* 自定义播放控制栏 */}
@ -339,13 +349,13 @@ const EventNotification = () => {
</div> </div>
</div> </div>
</div> </div>
<div className={styles.formItem}> <div className={`${styles.formItem} ${styles.formItemFlex}`}>
<label className={styles.label}>视频核实记录</label> <label className={styles.label}>视频核实记录</label>
<TextArea <TextArea
placeholder="记录视频核实情况..." placeholder="记录视频核实情况..."
rows={3}
value={videoRecord} value={videoRecord}
onChange={(e) => setVideoRecord(e.target.value)} onChange={(e) => setVideoRecord(e.target.value)}
className={styles.textAreaFullHeight}
/> />
</div> </div>
</div> </div>
@ -354,7 +364,7 @@ const EventNotification = () => {
{/* c块：信息推送 */} {/* c块：信息推送 */}
<div className={styles.blockA_c}> <div className={styles.blockA_c}>
<div className={styles.cardHeader}> <div className={styles.cardHeader}>
<SendOutlined className={styles.headerIcon} /> <img src={iconAcc3} alt="icon" style={{ width: '16px', height: '16px' }} />
<span className={styles.headerText}>信息推送</span> <span className={styles.headerText}>信息推送</span>
</div> </div>
<div className={styles.cardContent}> <div className={styles.cardContent}>
@ -425,17 +435,17 @@ const EventNotification = () => {
<div key={item.key} className={styles.eventItem}> <div key={item.key} className={styles.eventItem}>
<div className={styles.eventItemHeader}> <div className={styles.eventItemHeader}>
<span className={styles.eventTitle}>{item.title}</span> <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>
<div className={styles.eventItemFooter}> <div className={styles.eventItemMiddle}>
<div className={styles.eventTime}> <div className={styles.eventTime}>
<ClockCircleOutlined className={styles.timeIcon} /> <ClockCircleOutlined className={styles.timeIcon} />
<span>{item.time}</span> <span>{item.time}</span>
</div> </div>
<div className={styles.eventStatus}> </div>
<span className={styles.currentStatus}>{item.currentStatus}</span> <div className={styles.eventItemFooter}>
<span className={styles.eventId}>ID: {item.id}</span> <Tag color={item.statusColor} className={styles.statusTag}>{item.currentStatus}</Tag>
</div> <span className={styles.eventId}>ID: {item.id}</span>
</div> </div>
</div> </div>
))} ))}

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

@ -152,9 +152,9 @@
.videoPlayer { .videoPlayer {
width: 100%; width: 100%;
height: 150px; height: auto;
display: block; display: block;
object-fit: cover; object-fit: contain;
background-color: #000; background-color: #000;
} }
@ -193,10 +193,33 @@
display: flex; display: flex;
gap: 10px; gap: 10px;
:global(.ant-btn) { :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; flex: 1;
background-color: #556FEB; height: 100% !important;
border-color: #556FEB; resize: none;
} }
} }
} }
@ -216,7 +239,9 @@
.cardHeader { .cardHeader {
height: 40px; 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; display: flex;
align-items: center; align-items: center;
padding: 0 15px; padding: 0 15px;
@ -276,10 +301,9 @@
} }
.pushButton { .pushButton {
width: 100%; width: 100px;
margin-top: auto; margin-top: auto;
background-color: #556FEB; background-color: #2E4CD4;
border-color: #556FEB;
} }
} }
} }
@ -290,27 +314,28 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: #fff; background-color: #fff;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
.blockA_d_header { .blockA_d_header {
padding: 15px; padding: 12px 15px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
background-color: #fff;
.titleBar { .titleBar {
width: 2px; width: 3px;
height: 16px; height: 16px;
background-color: #2E4CD4; background-color: #2E4CD4;
flex-shrink: 0; flex-shrink: 0;
} }
.titleText { .titleText {
font-size: 16px; font-size: 14px;
font-weight: bold; font-weight: 450;
color: #333333; color: #333333;
} }
} }
@ -318,20 +343,28 @@
.eventList { .eventList {
flex: 1; flex: 1;
padding: 0 15px 15px 15px; padding: 0 15px 15px 15px;
display: grid; display: flex;
grid-template-columns: 1fr 1fr; flex-direction: column;
grid-template-rows: 1fr 1fr; gap: 10px;
gap: 15px;
overflow-y: auto; overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
&::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.eventItem { .eventItem {
width: 100%;
height: 100px;
padding: 12px; padding: 12px;
border: 1px solid #e8e8e8;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
background-color: #fafafa; background-color: #F6F7FF;
box-sizing: border-box;
flex-shrink: 0;
.eventItemHeader { .eventItemHeader {
display: flex; display: flex;
@ -347,6 +380,15 @@
line-height: 1.4; line-height: 1.4;
} }
.severityTag {
margin: 0;
flex-shrink: 0;
font-size: 12px;
border-radius: 4px;
color: #fff;
border: none;
}
:global(.ant-tag) { :global(.ant-tag) {
margin: 0; margin: 0;
flex-shrink: 0; flex-shrink: 0;
@ -354,11 +396,9 @@
} }
} }
.eventItemFooter { .eventItemMiddle {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
gap: 10px;
.eventTime { .eventTime {
display: flex; display: flex;
@ -371,20 +411,25 @@
font-size: 12px; font-size: 12px;
} }
} }
}
.eventStatus { .eventItemFooter {
display: flex; display: flex;
align-items: center; justify-content: space-between;
gap: 10px; align-items: center;
font-size: 12px; gap: 10px;
.currentStatus { .statusTag {
color: #666; margin: 0;
} font-size: 12px;
border-radius: 4px;
color: #fff;
border: none;
}
.eventId { .eventId {
color: #999; font-size: 12px;
} color: #999;
} }
} }
} }
@ -411,15 +456,15 @@
background-color: #fff; background-color: #fff;
.titleBar { .titleBar {
width: 2px; width: 3px;
height: 16px; height: 16px;
background-color: #2E4CD4; background-color: #2E4CD4;
flex-shrink: 0; flex-shrink: 0;
} }
.titleText { .titleText {
font-size: 16px; font-size: 14px;
font-weight: bold; font-weight:450;
color: #333333; color: #333333;
} }
} }
@ -443,6 +488,21 @@
:global(.ant-table-body) { :global(.ant-table-body) {
overflow-y: auto; 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