From 88a31d5a960bd10f3799bc00f8aa24461567d06e Mon Sep 17 00:00:00 2001
From: shimai <shimai@example.com>
Date: Tue, 07 Apr 2026 15:23:43 +0800
Subject: [PATCH] Merge branch 'test/tony.cheng/260312' of http://120.79.193.119:9090/r/~chengmw/cloud-melody-front into test/shimai.huang/260309
---
web-app/src/components/common/WarningAlert.jsx | 119 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 119 insertions(+), 0 deletions(-)
diff --git a/web-app/src/components/common/WarningAlert.jsx b/web-app/src/components/common/WarningAlert.jsx
new file mode 100644
index 0000000..656f7b1
--- /dev/null
+++ b/web-app/src/components/common/WarningAlert.jsx
@@ -0,0 +1,119 @@
+/**
+ * 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;
--
Gitblit v1.8.0