/**
|
* WarningAlert 组件 - 预警提示消息条
|
* 在调解进度条下方显示预警消息
|
*/
|
|
import React, { useState, useEffect, useCallback } from 'react';
|
import { Modal, List } from 'antd';
|
import { RightOutlined } from '@ant-design/icons';
|
import { useCaseData } from '../../contexts/CaseDataContext';
|
import MediationTimelineAPIService from '../../services/MediationTimelineAPIService';
|
import './WarningAlert.css';
|
|
// 警告图标图片
|
const WARNING_ICON = '/warning.png';
|
|
/**
|
* 预警消息列表弹窗
|
*/
|
const WarningModal = ({ visible, warnings, onClose }) => (
|
<Modal
|
title={<span><img src={WARNING_ICON} alt="warning" className="warning-modal-icon" />预警消息列表</span>}
|
open={visible}
|
onCancel={onClose}
|
footer={null}
|
width={520}
|
className="warning-modal"
|
>
|
<List
|
dataSource={warnings}
|
renderItem={(item, index) => (
|
<List.Item className="warning-modal-item">
|
<div className="warning-modal-content">
|
<span className="warning-modal-index">{index + 1}.</span>
|
<span className="warning-modal-text">{item.content}</span>
|
</div>
|
<span className="warning-modal-time">{item.create_time}</span>
|
</List.Item>
|
)}
|
/>
|
</Modal>
|
);
|
|
/**
|
* WarningAlert 主组件
|
*/
|
const WarningAlert = () => {
|
const { caseData } = useCaseData();
|
const [warnings, setWarnings] = useState([]);
|
const [modalVisible, setModalVisible] = useState(false);
|
const [loading, setLoading] = useState(false);
|
|
const mediationId = caseData?.mediation?.id;
|
|
// 加载预警消息
|
const loadWarnings = useCallback(async () => {
|
if (!mediationId) return;
|
|
setLoading(true);
|
try {
|
const response = await MediationTimelineAPIService.getWarningNotifyList(mediationId);
|
setWarnings(response.data || []);
|
} catch (err) {
|
console.error('加载预警消息失败:', err);
|
setWarnings([]);
|
} finally {
|
setLoading(false);
|
}
|
}, [mediationId]);
|
|
// 组件挂载时加载数据
|
useEffect(() => {
|
loadWarnings();
|
}, [loadWarnings]);
|
|
// 打开弹窗
|
const handleOpenModal = useCallback(() => {
|
setModalVisible(true);
|
}, []);
|
|
// 关闭弹窗
|
const handleCloseModal = useCallback(() => {
|
setModalVisible(false);
|
}, []);
|
|
// 无预警消息时不渲染
|
if (!warnings.length || loading) {
|
return null;
|
}
|
|
const firstWarning = warnings[0];
|
const hasMore = warnings.length > 1;
|
|
return (
|
<div className="warning-alert">
|
<div className="warning-alert-content">
|
<img src={WARNING_ICON} alt="warning" className="warning-icon-img" />
|
<span className="warning-label">预警：</span>
|
<span className="warning-text">{firstWarning.content}</span>
|
</div>
|
|
{hasMore && (
|
<div className="warning-alert-actions">
|
<span className="warning-count">还有{warnings.length - 1}条预警</span>
|
<button className="warning-more-btn" onClick={handleOpenModal}>
|
查看更多 <RightOutlined />
|
</button>
|
</div>
|
)}
|
|
<WarningModal
|
visible={modalVisible}
|
warnings={warnings}
|
onClose={handleCloseModal}
|
/>
|
</div>
|
);
|
};
|
|
export default WarningAlert;
|
