金融风控大数据可视化系统开发实战:构建银行企业信用风险监测平台

摘要

随着金融科技的快速发展,银行业对企业信用风险的实时监测需求日益迫切。本文将深入探讨如何构建一个专业的金融风控大数据可视化系统,涵盖信用评级展示、风险指标监控、实时数据更新等核心功能。通过实际案例分析和完整的代码实现,帮助开发者掌握金融领域数据可视化的关键技术和最佳实践。

关键词: 金融风控、信用风险、数据可视化、银行系统、实时监控


目录

  1. 引言
  2. 金融风控可视化系统概述
  3. 系统架构设计
  4. 核心功能模块开发
  5. 信用评级可视化实现
  6. 风险指标监控系统
  7. 实时数据处理与更新
  8. 用户界面设计与交互
  9. 安全性与合规性考虑
  10. 性能优化与扩展性
  11. 部署与运维
  12. 总结与展望

1. 引言

在当今数字化金融时代,银行业面临着日益复杂的信用风险管理挑战。传统的风险评估方法已无法满足实时性、准确性和全面性的要求。大数据可视化技术为金融风控提供了新的解决方案,能够帮助银行实时监控企业信用状况,及时识别潜在风险,提高决策效率。

1.1 金融风控的挑战

现代银行业在信用风险管理中面临以下主要挑战:

金融风控挑战
数据复杂性
实时性要求
监管合规
风险识别
多源数据整合
数据质量控制
海量数据处理
实时监控需求
快速决策支持
预警机制
监管报告
合规检查
审计追踪
早期预警
风险量化
趋势分析

1.2 可视化解决方案的价值

大数据可视化在金融风控中的核心价值:

  • 直观展示:将复杂的财务数据转化为易理解的图表
  • 实时监控:提供企业信用状况的实时监测
  • 风险预警:通过可视化指标及时发现潜在风险
  • 决策支持:为信贷决策提供数据支撑
  • 合规管理:满足监管部门的报告要求

2. 金融风控可视化系统概述

2.1 系统功能架构

# 金融风控可视化系统功能模块
class FinancialRiskVisualizationSystem:
    """金融风控可视化系统"""
    
    def __init__(self):
        self.modules = self.define_system_modules()
        self.risk_indicators = self.define_risk_indicators()
        self.credit_ratings = self.define_credit_ratings()
    
    def define_system_modules(self):
        """定义系统功能模块"""
        return {
            "信用评级管理": {
                "描述": "企业信用等级分类和展示",
                "功能": [
                    "信用等级分类展示",
                    "企业信用评级查询",
                    "评级变化趋势分析",
                    "同行业对比分析"
                ],
                "技术要点": [
                    "分级数据展示",
                    "动态表格渲染",
                    "筛选和排序功能",
                    "数据钻取分析"
                ]
            },
            "风险指标监控": {
                "描述": "关键风险指标的实时监控",
                "功能": [
                    "盈利能力指标监控",
                    "流动性指标分析",
                    "偿债能力评估",
                    "风险预警机制"
                ],
                "技术要点": [
                    "实时数据更新",
                    "阈值监控告警",
                    "趋势图表展示",
                    "多维度分析"
                ]
            },
            "企业画像分析": {
                "描述": "企业综合信息可视化展示",
                "功能": [
                    "企业基本信息展示",
                    "财务状况分析",
                    "经营风险评估",
                    "关联关系分析"
                ],
                "技术要点": [
                    "多维数据整合",
                    "关系图谱展示",
                    "交互式分析",
                    "详情页面设计"
                ]
            },
            "风险报告生成": {
                "描述": "自动化风险评估报告生成",
                "功能": [
                    "风险评估报告",
                    "监管合规报告",
                    "定期分析报告",
                    "自定义报告模板"
                ],
                "技术要点": [
                    "报告模板设计",
                    "数据自动填充",
                    "图表自动生成",
                    "PDF导出功能"
                ]
            }
        }
    
    def define_risk_indicators(self):
        """定义风险指标体系"""
        return {
            "盈利能力指标": {
                "盈利对利息覆盖能力": {
                    "计算公式": "息税前利润 / 利息费用",
                    "风险阈值": {"优秀": ">5.0", "良好": "3.0-5.0", "一般": "1.5-3.0", "风险": "<1.5"},
                    "权重": 0.3
                },
                "净资产收益率": {
                    "计算公式": "净利润 / 平均净资产",
                    "风险阈值": {"优秀": ">15%", "良好": "10%-15%", "一般": "5%-10%", "风险": "<5%"},
                    "权重": 0.25
                }
            },
            "流动性指标": {
                "流动性还本付息能力": {
                    "计算公式": "流动资产 / 流动负债",
                    "风险阈值": {"优秀": ">2.0", "良好": "1.5-2.0", "一般": "1.0-1.5", "风险": "<1.0"},
                    "权重": 0.25
                },
                "速动比率": {
                    "计算公式": "(流动资产-存货) / 流动负债",
                    "风险阈值": {"优秀": ">1.5", "良好": "1.0-1.5", "一般": "0.8-1.0", "风险": "<0.8"},
                    "权重": 0.2
                }
            },
            "偿债能力指标": {
                "清偿性还本付息能力": {
                    "计算公式": "总资产 / 总负债",
                    "风险阈值": {"优秀": ">3.0", "良好": "2.0-3.0", "一般": "1.5-2.0", "风险": "<1.5"},
                    "权重": 0.3
                },
                "资产负债率": {
                    "计算公式": "总负债 / 总资产",
                    "风险阈值": {"优秀": "<40%", "良好": "40%-60%", "一般": "60%-80%", "风险": ">80%"},
                    "权重": 0.25
                }
            }
        }
    
    def define_credit_ratings(self):
        """定义信用评级体系"""
        return {
            "AAA": {
                "描述": "信用质量极高,违约风险极低",
                "评分范围": "90-100",
                "风险等级": "极低",
                "颜色标识": "#00ff88",
                "特征": [
                    "财务状况优异",
                    "盈利能力强",
                    "现金流充足",
                    "行业地位领先"
                ]
            },
            "AA+": {
                "描述": "信用质量很高,违约风险很低",
                "评分范围": "85-89",
                "风险等级": "很低",
                "颜色标识": "#00d4ff",
                "特征": [
                    "财务状况良好",
                    "盈利稳定",
                    "偿债能力强",
                    "经营风险可控"
                ]
            },
            "AA": {
                "描述": "信用质量高,违约风险低",
                "评分范围": "80-84",
                "风险等级": "低",
                "颜色标识": "#ffd93d",
                "特征": [
                    "财务状况稳健",
                    "业务发展稳定",
                    "风险管理完善",
                    "市场竞争力强"
                ]
            },
            "AA-及以下": {
                "描述": "信用质量中等,存在一定违约风险",
                "评分范围": "<80",
                "风险等级": "中等及以上",
                "颜色标识": "#ff6b6b",
                "特征": [
                    "财务状况一般",
                    "盈利波动较大",
                    "偿债压力增加",
                    "需要密切关注"
                ]
            }
        }
    
    def calculate_comprehensive_score(self, financial_data):
        """计算企业综合信用评分"""
        total_score = 0
        total_weight = 0
        
        for category, indicators in self.risk_indicators.items():
            for indicator_name, indicator_info in indicators.items():
                if indicator_name in financial_data:
                    value = financial_data[indicator_name]
                    score = self.calculate_indicator_score(value, indicator_info)
                    weight = indicator_info['权重']
                    
                    total_score += score * weight
                    total_weight += weight
        
        if total_weight > 0:
            final_score = total_score / total_weight * 100
            return min(100, max(0, final_score))
        
        return 0
    
    def calculate_indicator_score(self, value, indicator_info):
        """计算单个指标得分"""
        thresholds = indicator_info['风险阈值']
        
        # 简化的评分逻辑,实际应用中需要更复杂的算法
        if self.meets_threshold(value, thresholds['优秀']):
            return 95
        elif self.meets_threshold(value, thresholds['良好']):
            return 80
        elif self.meets_threshold(value, thresholds['一般']):
            return 65
        else:
            return 40
    
    def meets_threshold(self, value, threshold_str):
        """检查是否满足阈值条件"""
        # 简化的阈值检查逻辑
        if '>' in threshold_str:
            threshold = float(threshold_str.replace('>', ''))
            return value > threshold
        elif '<' in threshold_str:
            threshold = float(threshold_str.replace('<', '').replace('%', ''))
            return value < threshold
        elif '-' in threshold_str:
            parts = threshold_str.split('-')
            min_val = float(parts[0])
            max_val = float(parts[1].replace('%', ''))
            return min_val <= value <= max_val
        
        return False
    
    def get_credit_rating(self, score):
        """根据评分获取信用等级"""
        if score >= 90:
            return "AAA"
        elif score >= 85:
            return "AA+"
        elif score >= 80:
            return "AA"
        else:
            return "AA-及以下"
    
    def print_system_overview(self):
        """打印系统概述"""
        print("=== 金融风控可视化系统概述 ===\n")
        
        print("📊 系统功能模块:")
        for module_name, module_info in self.modules.items():
            print(f"\n🔹 {module_name}")
            print(f"   描述: {module_info['描述']}")
            print(f"   主要功能:")
            for func in module_info['功能']:
                print(f"     • {func}")
            print(f"   技术要点:")
            for tech in module_info['技术要点']:
                print(f"     ◦ {tech}")
        
        print(f"\n📈 风险指标体系:")
        for category, indicators in self.risk_indicators.items():
            print(f"\n🔸 {category}:")
            for indicator, info in indicators.items():
                print(f"   • {indicator}")
                print(f"     计算公式: {info['计算公式']}")
                print(f"     权重: {info['权重']}")
        
        print(f"\n🏆 信用评级体系:")
        for rating, info in self.credit_ratings.items():
            print(f"\n⭐ {rating} - {info['描述']}")
            print(f"   评分范围: {info['评分范围']}")
            print(f"   风险等级: {info['风险等级']}")

# 创建系统实例并展示概述
risk_system = FinancialRiskVisualizationSystem()
risk_system.print_system_overview()

# 示例:计算企业信用评分
sample_data = {
    "盈利对利息覆盖能力": 5.61,
    "流动性还本付息能力": 5.76,
    "清偿性还本付息能力": 1.87
}

score = risk_system.calculate_comprehensive_score(sample_data)
rating = risk_system.get_credit_rating(score)
print(f"\n📊 示例企业评估结果:")
print(f"   综合评分: {score:.2f}")
print(f"   信用等级: {rating}")

2.2 系统特点与优势

特点描述业务价值
实时监控7×24小时实时监控企业信用状况及时发现风险变化,降低损失
多维分析从多个维度分析企业信用风险全面评估,提高决策准确性
智能预警基于阈值的自动预警机制主动风险管理,提前防范
可视化展示直观的图表和仪表板展示提高信息理解效率
合规支持满足监管要求的报告功能降低合规风险和成本

3. 系统架构设计

3.1 技术架构

数据存储层
数据访问层
业务逻辑层
前端展示层
企业数据库
财务数据库
风险数据库
数据接口
缓存服务
数据同步
风险评估引擎
数据处理服务
报告生成服务
用户界面
数据可视化
交互控制

3.2 前端技术选型

/**
 * 金融风控前端技术栈配置
 */
class FinancialRiskFrontendStack {
    constructor() {
        this.techStack = this.defineTechStack();
        this.securityRequirements = this.defineSecurityRequirements();
    }

    defineTechStack() {
        return {
            "核心框架": {
                "HTML5": {
                    "版本": "HTML5",
                    "用途": "页面结构和语义化",
                    "特性": ["语义化标签", "表单验证", "本地存储"]
                },
                "CSS3": {
                    "版本": "CSS3",
                    "用途": "样式设计和动画",
                    "特性": ["Flexbox布局", "Grid布局", "动画效果"]
                },
                "JavaScript": {
                    "版本": "ES6+",
                    "用途": "交互逻辑和数据处理",
                    "特性": ["模块化", "异步处理", "类和继承"]
                }
            },
            "可视化库": {
                "ECharts": {
                    "版本": "5.4.0+",
                    "用途": "图表绘制和数据可视化",
                    "优势": ["丰富的图表类型", "良好的性能", "移动端支持"]
                },
                "D3.js": {
                    "版本": "7.0+",
                    "用途": "自定义可视化和复杂图表",
                    "优势": ["高度定制化", "强大的数据绑定", "丰富的API"]
                }
            },
            "UI框架": {
                "Bootstrap": {
                    "版本": "5.1+",
                    "用途": "响应式布局和组件",
                    "优势": ["快速开发", "移动优先", "丰富组件"]
                },
                "Element UI": {
                    "版本": "2.15+",
                    "用途": "企业级UI组件",
                    "优势": ["专业外观", "完整组件", "Vue生态"]
                }
            },
            "工具库": {
                "jQuery": {
                    "版本": "3.6+",
                    "用途": "DOM操作和事件处理",
                    "优势": ["简化开发", "兼容性好", "丰富插件"]
                },
                "Moment.js": {
                    "版本": "2.29+",
                    "用途": "日期时间处理",
                    "优势": ["强大的日期API", "国际化支持", "时区处理"]
                },
                "Lodash": {
                    "版本": "4.17+",
                    "用途": "实用工具函数",
                    "优势": ["性能优化", "函数式编程", "模块化"]
                }
            }
        };
    }

    defineSecurityRequirements() {
        return {
            "数据安全": [
                "HTTPS传输加密",
                "敏感数据脱敏",
                "前端数据验证",
                "XSS攻击防护"
            ],
            "访问控制": [
                "用户身份认证",
                "权限级别控制",
                "会话管理",
                "操作日志记录"
            ],
            "合规要求": [
                "数据保护法规遵循",
                "金融监管要求",
                "审计追踪功能",
                "数据备份恢复"
            ]
        };
    }

    generateProjectStructure() {
        return {
            "项目结构": {
                "index.html": "主页面入口",
                "css/": {
                    "index.css": "主样式文件",
                    "components.css": "组件样式",
                    "themes.css": "主题样式"
                },
                "js/": {
                    "main.js": "主要业务逻辑",
                    "risk-analysis.js": "风险分析模块",
                    "data-processor.js": "数据处理模块",
                    "chart-manager.js": "图表管理模块",
                    "security.js": "安全控制模块"
                },
                "libs/": {
                    "echarts.min.js": "ECharts图表库",
                    "jquery.min.js": "jQuery库",
                    "moment.min.js": "日期处理库"
                },
                "data/": {
                    "mock-data.json": "模拟数据",
                    "config.json": "配置文件"
                },
                "images/": "图片资源",
                "fonts/": "字体文件"
            }
        };
    }

    printTechStack() {
        console.log("=== 金融风控前端技术栈 ===\n");
        
        for (const [category, technologies] of Object.entries(this.techStack)) {
            console.log(`📚 ${category}:`);
            for (const [tech, info] of Object.entries(technologies)) {
                console.log(`  🔹 ${tech} (${info.版本})`);
                console.log(`     用途: ${info.用途}`);
                if (info.特性) {
                    console.log(`     特性: ${info.特性.join(', ')}`);
                }
                if (info.优势) {
                    console.log(`     优势: ${info.优势.join(', ')}`);
                }
            }
            console.log();
        }

        console.log("🔒 安全要求:");
        for (const [category, requirements] of Object.entries(this.securityRequirements)) {
            console.log(`  ${category}:`);
            requirements.forEach(req => console.log(`${req}`));
        }
    }
}

// 创建技术栈实例
const frontendStack = new FinancialRiskFrontendStack();
frontendStack.printTechStack();

4. 核心功能模块开发

4.1 企业信用评级展示模块

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行企业信用风险监测平台</title>
    <link rel="stylesheet" href="css/index.css">
    <style>
        /* 信用评级展示样式 */
        .credit-rating-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            padding: 20px;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            min-height: 100vh;
        }

        .rating-panel {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .rating-panel:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .rating-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.2);
        }

        .rating-title {
            font-size: 24px;
            font-weight: 600;
            color: #ffffff;
            margin: 0;
        }

        .rating-badge {
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            color: #000;
        }

        .rating-aaa { background: linear-gradient(45deg, #00ff88, #00d4ff); }
        .rating-aa-plus { background: linear-gradient(45deg, #00d4ff, #6c5ce7); }
        .rating-aa { background: linear-gradient(45deg, #ffd93d, #ff9ff3); }
        .rating-aa-minus { background: linear-gradient(45deg, #ff6b6b, #ffa726); }

        .company-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        .company-table th {
            background: rgba(0, 0, 0, 0.3);
            color: #ffffff;
            padding: 12px 8px;
            text-align: left;
            font-size: 12px;
            font-weight: 500;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .company-table td {
            padding: 10px 8px;
            color: #e0e0e0;
            font-size: 11px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .company-table tr:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .risk-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 5px;
        }

        .risk-low { background: #00ff88; }
        .risk-medium { background: #ffd93d; }
        .risk-high { background: #ff6b6b; }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .credit-rating-container {
                grid-template-columns: 1fr;
                gap: 15px;
                padding: 15px;
            }
            
            .rating-title {
                font-size: 20px;
            }
            
            .company-table th,
            .company-table td {
                padding: 8px 4px;
                font-size: 10px;
            }
        }
    </style>
</head>
<body>
    <!-- 页面头部 -->
    <header class="header">
        <div class="header-content">
            <div class="time-display">
                <span id="currentTime">2024-07-20 17:30:00</span>
            </div>
            <h1 class="system-title">信用风险定位系统(银行版)</h1>
            <div class="user-info">
                <span>管理员 <a href="#" onclick="logout()">[退出]</a></span>
            </div>
        </div>
    </header>

    <!-- 主标题 -->
    <div class="main-title">
        <h2>实时监测-企业名单</h2>
        <div class="title-decoration"></div>
    </div>

    <!-- 信用评级展示区域 -->
    <div class="credit-rating-container">
        <!-- AAA级企业 -->
        <div class="rating-panel">
            <div class="rating-header">
                <h3 class="rating-title">AAA</h3>
                <span class="rating-badge rating-aaa">极低风险</span>
            </div>
            <table class="company-table">
                <thead>
                    <tr>
                        <th>企业名称</th>
                        <th>盈利覆盖能力</th>
                        <th>流动性能力</th>
                        <th>清偿能力</th>
                    </tr>
                </thead>
                <tbody id="aaaCompanies">
                    <!-- 动态生成内容 -->
                </tbody>
            </table>
        </div>

        <!-- AA+级企业 -->
        <div class="rating-panel">
            <div class="rating-header">
                <h3 class="rating-title">AA+</h3>
                <span class="rating-badge rating-aa-plus">很低风险</span>
            </div>
            <table class="company-table">
                <thead>
                    <tr>
                        <th>企业名称</th>
                        <th>盈利覆盖能力</th>
                        <th>流动性能力</th>
                        <th>清偿能力</th>
                    </tr>
                </thead>
                <tbody id="aaPlusCompanies">
                    <!-- 动态生成内容 -->
                </tbody>
            </table>
        </div>

        <!-- AA级企业 -->
        <div class="rating-panel">
            <div class="rating-header">
                <h3 class="rating-title">AA</h3>
                <span class="rating-badge rating-aa">低风险</span>
            </div>
            <table class="company-table">
                <thead>
                    <tr>
                        <th>企业名称</th>
                        <th>盈利覆盖能力</th>
                        <th>流动性能力</th>
                        <th>清偿能力</th>
                    </tr>
                </thead>
                <tbody id="aaCompanies">
                    <!-- 动态生成内容 -->
                </tbody>
            </table>
        </div>

        <!-- AA-及以下级企业 -->
        <div class="rating-panel">
            <div class="rating-header">
                <h3 class="rating-title">AA-及以下</h3>
                <span class="rating-badge rating-aa-minus">中等风险</span>
            </div>
            <table class="company-table">
                <thead>
                    <tr>
                        <th>企业名称</th>
                        <th>盈利覆盖能力</th>
                        <th>流动性能力</th>
                        <th>清偿能力</th>
                    </tr>
                </thead>
                <tbody id="aaMinusCompanies">
                    <!-- 动态生成内容 -->
                </tbody>
            </table>
        </div>
    </div>

    <!-- 详情弹窗 -->
    <div id="companyDetailModal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalCompanyName">企业详情</h3>
                <span class="close" onclick="closeModal()">&times;</span>
            </div>
            <div class="modal-body" id="modalBody">
                <!-- 动态生成详情内容 -->
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="libs/jquery.min.js"></script>
    <script src="js/risk-analysis.js"></script>
</body>
</html>

4.2 风险分析JavaScript模块

/**
 * 金融风控数据处理和可视化模块
 */
class FinancialRiskAnalyzer {
    constructor() {
        this.companies = [];
        this.riskThresholds = this.initRiskThresholds();
        this.updateInterval = 30000; // 30秒更新间隔
        this.init();
    }

    /**
     * 初始化风险阈值
     */
    initRiskThresholds() {
        return {
            profitability: { excellent: 5.0, good: 3.0, fair: 1.5 },
            liquidity: { excellent: 5.0, good: 3.0, fair: 1.5 },
            solvency: { excellent: 3.0, good: 2.0, fair: 1.5 }
        };
    }

    /**
     * 初始化系统
     */
    async init() {
        try {
            console.log('🚀 初始化金融风控分析系统...');
            
            // 加载企业数据
            await this.loadCompanyData();
            
            // 渲染企业列表
            this.renderCompanyLists();
            
            // 启动实时更新
            this.startRealTimeUpdate();
            
            // 绑定事件
            this.bindEvents();
            
            // 更新时间显示
            this.updateTimeDisplay();
            
            console.log('✅ 系统初始化完成');
            
        } catch (error) {
            console.error('❌ 系统初始化失败:', error);
            this.showErrorMessage('系统初始化失败,请刷新页面重试');
        }
    }

    /**
     * 加载企业数据
     */
    async loadCompanyData() {
        try {
            // 模拟API调用,实际应用中替换为真实API
            const response = await this.fetchMockData();
            this.companies = response.companies || [];
            
            // 计算风险评级
            this.companies.forEach(company => {
                company.riskRating = this.calculateRiskRating(company);
                company.riskLevel = this.getRiskLevel(company);
            });
            
            console.log(`📊 加载了 ${this.companies.length} 家企业数据`);
            
        } catch (error) {
            console.error('数据加载失败:', error);
            // 使用备用数据
            this.companies = this.getBackupData();
        }
    }

    /**
     * 获取模拟数据
     */
    async fetchMockData() {
        // 模拟网络延迟
        await new Promise(resolve => setTimeout(resolve, 500));
        
        return {
            companies: [
                {
                    name: "鲁泰纺织股份有限公司",
                    profitCoverage: 5.61,
                    liquidityCapacity: 5.76,
                    solvencyCapacity: 1.87,
                    industry: "纺织业",
                    establishedYear: 1993,
                    registeredCapital: "8.5亿元"
                },
                {
                    name: "浙江森马服饰股份有限公司",
                    profitCoverage: 5.54,
                    liquidityCapacity: 5.78,
                    solvencyCapacity: 2.60,
                    industry: "服装业",
                    establishedYear: 1996,
                    registeredCapital: "12.3亿元"
                },
                {
                    name: "安正时尚集团股份有限公司",
                    profitCoverage: 5.58,
                    liquidityCapacity: 5.63,
                    solvencyCapacity: 1.56,
                    industry: "时尚服饰",
                    establishedYear: 1999,
                    registeredCapital: "6.8亿元"
                },
                {
                    name: "广东柏堡龙股份有限公司",
                    profitCoverage: 5.46,
                    liquidityCapacity: 5.56,
                    solvencyCapacity: 5.32,
                    industry: "服装设计",
                    establishedYear: 2003,
                    registeredCapital: "4.2亿元"
                },
                {
                    name: "深圳富安娜家居用品股份有限公司",
                    profitCoverage: 5.48,
                    liquidityCapacity: 5.60,
                    solvencyCapacity: 2.19,
                    industry: "家居用品",
                    establishedYear: 1994,
                    registeredCapital: "9.1亿元"
                },
                {
                    name: "比音勒芬服饰股份有限公司",
                    profitCoverage: 5.37,
                    liquidityCapacity: 5.54,
                    solvencyCapacity: 6.29,
                    industry: "高端服饰",
                    establishedYear: 2003,
                    registeredCapital: "3.6亿元"
                },
                {
                    name: "山东齐悦科技有限公司",
                    profitCoverage: 5.42,
                    liquidityCapacity: 5.43,
                    solvencyCapacity: 3.59,
                    industry: "科技服务",
                    establishedYear: 2015,
                    registeredCapital: "2.8亿元"
                },
                {
                    name: "深圳歌力思服饰股份有限公司",
                    profitCoverage: 5.43,
                    liquidityCapacity: 5.25,
                    solvencyCapacity: 1.69,
                    industry: "女装品牌",
                    establishedYear: 1996,
                    registeredCapital: "5.4亿元"
                }
            ]
        };
    }

    /**
     * 计算企业风险评级
     */
    calculateRiskRating(company) {
        const { profitCoverage, liquidityCapacity, solvencyCapacity } = company;
        
        // 计算各项指标得分
        const profitScore = this.getIndicatorScore(profitCoverage, 'profitability');
        const liquidityScore = this.getIndicatorScore(liquidityCapacity, 'liquidity');
        const solvencyScore = this.getIndicatorScore(solvencyCapacity, 'solvency');
        
        // 加权平均计算综合得分
        const totalScore = (profitScore * 0.4 + liquidityScore * 0.3 + solvencyScore * 0.3);
        
        return Math.round(totalScore);
    }

    /**
     * 获取指标得分
     */
    getIndicatorScore(value, type) {
        const thresholds = this.riskThresholds[type];
        
        if (value >= thresholds.excellent) {
            return 95;
        } else if (value >= thresholds.good) {
            return 80;
        } else if (value >= thresholds.fair) {
            return 65;
        } else {
            return 40;
        }
    }

    /**
     * 获取风险等级
     */
    getRiskLevel(company) {
        const score = company.riskRating;
        
        if (score >= 90) return 'AAA';
        if (score >= 85) return 'AA+';
        if (score >= 80) return 'AA';
        return 'AA-及以下';
    }

    /**
     * 渲染企业列表
     */
    renderCompanyLists() {
        const ratingGroups = {
            'AAA': [],
            'AA+': [],
            'AA': [],
            'AA-及以下': []
        };

        // 按评级分组
        this.companies.forEach(company => {
            const rating = company.riskLevel;
            if (ratingGroups[rating]) {
                ratingGroups[rating].push(company);
            }
        });

        // 渲染各个评级组
        this.renderRatingGroup('aaaCompanies', ratingGroups['AAA']);
        this.renderRatingGroup('aaPlusCompanies', ratingGroups['AA+']);
        this.renderRatingGroup('aaCompanies', ratingGroups['AA']);
        this.renderRatingGroup('aaMinusCompanies', ratingGroups['AA-及以下']);
    }

    /**
     * 渲染评级组
     */
    renderRatingGroup(containerId, companies) {
        const container = document.getElementById(containerId);
        if (!container) return;

        container.innerHTML = '';

        companies.forEach(company => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>
                    <span class="risk-indicator ${this.getRiskIndicatorClass(company)}"></span>
                    ${company.name}
                </td>
                <td>${company.profitCoverage.toFixed(2)}</td>
                <td>${company.liquidityCapacity.toFixed(2)}</td>
                <td>${company.solvencyCapacity.toFixed(2)}</td>
            `;
            
            // 添加点击事件
            row.addEventListener('click', () => {
                this.showCompanyDetail(company);
            });
            
            container.appendChild(row);
        });
    }

    /**
     * 获取风险指示器样式类
     */
    getRiskIndicatorClass(company) {
        const rating = company.riskLevel;
        switch (rating) {
            case 'AAA':
            case 'AA+':
                return 'risk-low';
            case 'AA':
                return 'risk-medium';
            default:
                return 'risk-high';
        }
    }

    /**
     * 显示企业详情
     */
    showCompanyDetail(company) {
        const modal = document.getElementById('companyDetailModal');
        const modalTitle = document.getElementById('modalCompanyName');
        const modalBody = document.getElementById('modalBody');

        modalTitle.textContent = company.name;
        
        modalBody.innerHTML = `
            <div class="company-detail">
                <div class="detail-section">
                    <h4>基本信息</h4>
                    <div class="detail-grid">
                        <div class="detail-item">
                            <label>企业名称:</label>
                            <span>${company.name}</span>
                        </div>
                        <div class="detail-item">
                            <label>所属行业:</label>
                            <span>${company.industry}</span>
                        </div>
                        <div class="detail-item">
                            <label>成立年份:</label>
                            <span>${company.establishedYear}年</span>
                        </div>
                        <div class="detail-item">
                            <label>注册资本:</label>
                            <span>${company.registeredCapital}</span>
                        </div>
                    </div>
                </div>
                
                <div class="detail-section">
                    <h4>风险评估</h4>
                    <div class="risk-assessment">
                        <div class="risk-item">
                            <label>信用等级:</label>
                            <span class="rating-badge rating-${company.riskLevel.toLowerCase().replace('+', '-plus').replace('-及以下', '-minus')}">${company.riskLevel}</span>
                        </div>
                        <div class="risk-item">
                            <label>综合评分:</label>
                            <span class="score">${company.riskRating}分</span>
                        </div>
                    </div>
                </div>
                
                <div class="detail-section">
                    <h4>财务指标</h4>
                    <div class="financial-indicators">
                        <div class="indicator-item">
                            <label>盈利对利息覆盖能力:</label>
                            <span>${company.profitCoverage.toFixed(2)}</span>
                            <div class="indicator-bar">
                                <div class="indicator-fill" style="width: ${Math.min(company.profitCoverage * 10, 100)}%"></div>
                            </div>
                        </div>
                        <div class="indicator-item">
                            <label>流动性还本付息能力:</label>
                            <span>${company.liquidityCapacity.toFixed(2)}</span>
                            <div class="indicator-bar">
                                <div class="indicator-fill" style="width: ${Math.min(company.liquidityCapacity * 10, 100)}%"></div>
                            </div>
                        </div>
                        <div class="indicator-item">
                            <label>清偿性还本付息能力:</label>
                            <span>${company.solvencyCapacity.toFixed(2)}</span>
                            <div class="indicator-bar">
                                <div class="indicator-fill" style="width: ${Math.min(company.solvencyCapacity * 20, 100)}%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="detail-section">
                    <h4>风险建议</h4>
                    <div class="risk-suggestions">
                        ${this.generateRiskSuggestions(company)}
                    </div>
                </div>
            </div>
        `;

        modal.style.display = 'block';
    }

    /**
     * 生成风险建议
     */
    generateRiskSuggestions(company) {
        const suggestions = [];
        const { profitCoverage, liquidityCapacity, solvencyCapacity } = company;

        if (profitCoverage < 3.0) {
            suggestions.push('• 盈利能力偏低,建议关注企业经营状况和盈利模式');
        }
        if (liquidityCapacity < 3.0) {
            suggestions.push('• 流动性不足,需要关注短期偿债能力');
        }
        if (solvencyCapacity < 2.0) {
            suggestions.push('• 清偿能力较弱,建议加强资产负债结构分析');
        }

        if (suggestions.length === 0) {
            suggestions.push('• 企业财务状况良好,风险可控');
            suggestions.push('• 建议继续保持定期监控');
        }

        return suggestions.map(s => `<p>${s}</p>`).join('');
    }

    /**
     * 启动实时更新
     */
    startRealTimeUpdate() {
        setInterval(() => {
            this.updateTimeDisplay();
            // 这里可以添加数据更新逻辑
            // this.loadCompanyData();
        }, this.updateInterval);
    }

    /**
     * 更新时间显示
     */
    updateTimeDisplay() {
        const now = new Date();
        const timeString = now.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });
        
        const timeElement = document.getElementById('currentTime');
        if (timeElement) {
            timeElement.textContent = timeString;
        }
    }

    /**
     * 绑定事件
     */
    bindEvents() {
        // 关闭模态框事件
        window.closeModal = () => {
            document.getElementById('companyDetailModal').style.display = 'none';
        };

        // 退出登录事件
        window.logout = () => {
            if (confirm('确定要退出系统吗?')) {
                // 这里添加退出逻辑
                console.log('用户退出系统');
            }
        };

        // 点击模态框外部关闭
        window.addEventListener('click', (event) => {
            const modal = document.getElementById('companyDetailModal');
            if (event.target === modal) {
                modal.style.display = 'none';
            }
        });

        // 键盘事件
        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape') {
                this.closeModal();
            }
        });
    }

    /**
     * 显示错误消息
     */
    showErrorMessage(message) {
        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-message';
        errorDiv.innerHTML = `
            <div class="error-content">
                <h3>系统错误</h3>
                <p>${message}</p>
                <button onclick="location.reload()">重新加载</button>
            </div>
        `;
        document.body.appendChild(errorDiv);
    }

    /**
     * 获取备用数据
     */
    getBackupData() {
        return [
            {
                name: "示例企业A",
                profitCoverage: 5.50,
                liquidityCapacity: 5.60,
                solvencyCapacity: 2.00,
                industry: "制造业",
                establishedYear: 2000,
                registeredCapital: "5.0亿元"
            }
        ];
    }
}

// 页面加载完成后初始化系统
document.addEventListener('DOMContentLoaded', () => {
    const riskAnalyzer = new FinancialRiskAnalyzer();
    
    // 将实例挂载到全局,便于调试
    window.riskAnalyzer = riskAnalyzer;
});

5. 信用评级可视化实现

5.1 评级分布图表

/**
 * 信用评级可视化图表管理器
 */
class CreditRatingChartManager {
    constructor() {
        this.charts = new Map();
        this.colorScheme = this.initColorScheme();
        this.init();
    }

    /**
     * 初始化颜色方案
     */
    initColorScheme() {
        return {
            'AAA': '#00ff88',
            'AA+': '#00d4ff',
            'AA': '#ffd93d',
            'AA-': '#ff9f43',
            'A+': '#ff6b6b',
            'A': '#ff4757',
            'A-': '#ff3838',
            'BBB及以下': '#c44569'
        };
    }

    /**
     * 初始化图表管理器
     */
    init() {
        console.log('📊 初始化信用评级图表管理器');
    }

    /**
     * 创建评级分布饼图
     */
    createRatingDistributionChart(containerId, data) {
        const container = document.getElementById(containerId);
        if (!container) {
            console.error(`容器不存在: ${containerId}`);
            return null;
        }

        const chart = echarts.init(container);
        
        const option = {
            backgroundColor: 'transparent',
            title: {
                text: '企业信用评级分布',
                left: 'center',
                top: '5%',
                textStyle: {
                    color: '#ffffff',
                    fontSize: 18,
                    fontWeight: 'bold'
                }
            },
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                borderColor: 'rgba(0, 212, 255, 0.5)',
                borderWidth: 1,
                textStyle: {
                    color: '#ffffff'
                },
                formatter: function(params) {
                    return `${params.name}<br/>
                            企业数量: ${params.value}家<br/>
                            占比: ${params.percent}%`;
                }
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 'middle',
                textStyle: {
                    color: '#ffffff',
                    fontSize: 12
                },
                itemGap: 15
            },
            series: [{
                name: '信用评级',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['60%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 8,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '16',
                        fontWeight: 'bold',
                        color: '#ffffff'
                    },
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                labelLine: {
                    show: false
                },
                data: data.map(item => ({
                    name: item.rating,
                    value: item.count,
                    itemStyle: {
                        color: this.colorScheme[item.rating] || '#666'
                    }
                }))
            }]
        };

        chart.setOption(option);
        this.charts.set(containerId, chart);

        // 添加点击事件
        chart.on('click', (params) => {
            this.onRatingClick(params);
        });

        return chart;
    }

    /**
     * 创建风险指标雷达图
     */
    createRiskRadarChart(containerId, companyData) {
        const container = document.getElementById(containerId);
        if (!container) {
            console.error(`容器不存在: ${containerId}`);
            return null;
        }

        const chart = echarts.init(container);
        
        const indicators = [
            { name: '盈利能力', max: 10 },
            { name: '流动性', max: 10 },
            { name: '偿债能力', max: 10 },
            { name: '营运能力', max: 10 },
            { name: '成长能力', max: 10 },
            { name: '市场地位', max: 10 }
        ];

        const option = {
            backgroundColor: 'transparent',
            title: {
                text: '企业风险指标分析',
                left: 'center',
                top: '5%',
                textStyle: {
                    color: '#ffffff',
                    fontSize: 16
                }
            },
            tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                borderColor: 'rgba(0, 212, 255, 0.5)',
                textStyle: {
                    color: '#ffffff'
                }
            },
            radar: {
                indicator: indicators,
                center: ['50%', '55%'],
                radius: '70%',
                axisName: {
                    color: '#ffffff',
                    fontSize: 12
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: [
                            'rgba(0, 255, 136, 0.1)',
                            'rgba(0, 212, 255, 0.1)',
                            'rgba(255, 217, 61, 0.1)',
                            'rgba(255, 107, 107, 0.1)'
                        ]
                    }
                }
            },
            series: [{
                name: '风险指标',
                type: 'radar',
                data: companyData.map(company => ({
                    value: [
                        company.profitability || 0,
                        company.liquidity || 0,
                        company.solvency || 0,
                        company.operation || 0,
                        company.growth || 0,
                        company.market || 0
                    ],
                    name: company.name,
                    areaStyle: {
                        color: this.colorScheme[company.rating] || '#666',
                        opacity: 0.3
                    },
                    lineStyle: {
                        color: this.colorScheme[company.rating] || '#666',
                        width: 2
                    },
                    symbol: 'circle',
                    symbolSize: 5
                }))
            }]
        };

        chart.setOption(option);
        this.charts.set(containerId, chart);

        return chart;
    }

    /**
     * 创建风险趋势图
     */
    createRiskTrendChart(containerId, trendData) {
        const container = document.getElementById(containerId);
        if (!container) {
            console.error(`容器不存在: ${containerId}`);
            return null;
        }

        const chart = echarts.init(container);
        
        const option = {
            backgroundColor: 'transparent',
            title: {
                text: '信用风险趋势分析',
                left: 'center',
                top: '5%',
                textStyle: {
                    color: '#ffffff',
                    fontSize: 16
                }
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                borderColor: 'rgba(0, 212, 255, 0.5)',
                textStyle: {
                    color: '#ffffff'
                },
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['高风险', '中风险', '低风险'],
                top: '10%',
                textStyle: {
                    color: '#ffffff'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: '20%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: trendData.dates,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                },
                axisLabel: {
                    color: '#ffffff'
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                },
                axisLabel: {
                    color: '#ffffff'
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    }
                }
            },
            series: [
                {
                    name: '高风险',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    lineStyle: {
                        color: '#ff6b6b'
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0, x2: 0, y2: 1,
                            colorStops: [
                                { offset: 0, color: 'rgba(255, 107, 107, 0.8)' },
                                { offset: 1, color: 'rgba(255, 107, 107, 0.1)' }
                            ]
                        }
                    },
                    data: trendData.highRisk
                },
                {
                    name: '中风险',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    lineStyle: {
                        color: '#ffd93d'
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0, x2: 0, y2: 1,
                            colorStops: [
                                { offset: 0, color: 'rgba(255, 217, 61, 0.8)' },
                                { offset: 1, color: 'rgba(255, 217, 61, 0.1)' }
                            ]
                        }
                    },
                    data: trendData.mediumRisk
                },
                {
                    name: '低风险',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    lineStyle: {
                        color: '#00ff88'
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0, x2: 0, y2: 1,
                            colorStops: [
                                { offset: 0, color: 'rgba(0, 255, 136, 0.8)' },
                                { offset: 1, color: 'rgba(0, 255, 136, 0.1)' }
                            ]
                        }
                    },
                    data: trendData.lowRisk
                }
            ]
        };

        chart.setOption(option);
        this.charts.set(containerId, chart);

        return chart;
    }

    /**
     * 创建行业风险对比图
     */
    createIndustryRiskChart(containerId, industryData) {
        const container = document.getElementById(containerId);
        if (!container) {
            console.error(`容器不存在: ${containerId}`);
            return null;
        }

        const chart = echarts.init(container);
        
        const option = {
            backgroundColor: 'transparent',
            title: {
                text: '行业风险对比分析',
                left: 'center',
                top: '5%',
                textStyle: {
                    color: '#ffffff',
                    fontSize: 16
                }
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                borderColor: 'rgba(0, 212, 255, 0.5)',
                textStyle: {
                    color: '#ffffff'
                },
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: industryData.map(item => item.industry),
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                },
                axisLabel: {
                    color: '#ffffff',
                    rotate: 45
                }
            },
            yAxis: {
                type: 'value',
                name: '风险评分',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                },
                axisLabel: {
                    color: '#ffffff'
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    }
                }
            },
            series: [{
                name: '平均风险评分',
                type: 'bar',
                barWidth: '60%',
                data: industryData.map((item, index) => ({
                    value: item.riskScore,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0, x2: 0, y2: 1,
                            colorStops: [
                                { offset: 0, color: this.getGradientColor(item.riskScore, 0.8) },
                                { offset: 1, color: this.getGradientColor(item.riskScore, 0.3) }
                            ]
                        },
                        borderRadius: [4, 4, 0, 0]
                    }
                }))
            }]
        };

        chart.setOption(option);
        this.charts.set(containerId, chart);

        return chart;
    }

    /**
     * 根据风险评分获取渐变颜色
     */
    getGradientColor(score, alpha = 1) {
        if (score >= 80) {
            return `rgba(0, 255, 136, ${alpha})`;  // 绿色 - 低风险
        } else if (score >= 60) {
            return `rgba(255, 217, 61, ${alpha})`;  // 黄色 - 中风险
        } else {
            return `rgba(255, 107, 107, ${alpha})`;  // 红色 - 高风险
        }
    }

    /**
     * 评级点击事件处理
     */
    onRatingClick(params) {
        console.log('点击评级:', params.name);
        // 这里可以添加钻取分析逻辑
        if (window.riskAnalyzer && window.riskAnalyzer.filterByRating) {
            window.riskAnalyzer.filterByRating(params.name);
        }
    }

    /**
     * 更新图表数据
     */
    updateChart(containerId, newData) {
        const chart = this.charts.get(containerId);
        if (!chart) {
            console.error(`图表不存在: ${containerId}`);
            return;
        }

        const option = chart.getOption();
        // 根据图表类型更新相应的数据
        // 这里需要根据具体的图表类型来实现
        chart.setOption(option, true);
    }

    /**
     * 调整图表大小
     */
    resize(containerId = null) {
        if (containerId) {
            const chart = this.charts.get(containerId);
            if (chart) {
                chart.resize();
            }
        } else {
            this.charts.forEach(chart => {
                chart.resize();
            });
        }
    }

    /**
     * 销毁图表
     */
    dispose(containerId) {
        const chart = this.charts.get(containerId);
        if (chart) {
            chart.dispose();
            this.charts.delete(containerId);
        }
    }

    /**
     * 销毁所有图表
     */
    disposeAll() {
        this.charts.forEach(chart => {
            chart.dispose();
        });
        this.charts.clear();
    }
}

// 创建全局图表管理器实例
const creditChartManager = new CreditRatingChartManager();

// 窗口大小变化时调整图表
window.addEventListener('resize', () => {
    creditChartManager.resize();
});

// 示例:创建评级分布图表
document.addEventListener('DOMContentLoaded', () => {
    // 模拟评级分布数据
    const ratingDistributionData = [
        { rating: 'AAA', count: 2 },
        { rating: 'AA+', count: 3 },
        { rating: 'AA', count: 6 },
        { rating: 'AA-及以下', count: 10 }
    ];

    // 如果页面有对应容器,创建图表
    if (document.getElementById('ratingDistributionChart')) {
        creditChartManager.createRatingDistributionChart('ratingDistributionChart', ratingDistributionData);
    }

    // 模拟趋势数据
    const trendData = {
        dates: ['1月', '2月', '3月', '4月', '5月', '6月'],
        highRisk: [5, 8, 12, 10, 15, 18],
        mediumRisk: [15, 18, 20, 22, 25, 28],
        lowRisk: [30, 35, 40, 45, 50, 55]
    };

    if (document.getElementById('riskTrendChart')) {
        creditChartManager.createRiskTrendChart('riskTrendChart', trendData);
    }

    // 模拟行业数据
    const industryData = [
        { industry: '纺织业', riskScore: 85 },
        { industry: '服装业', riskScore: 82 },
        { industry: '家居用品', riskScore: 78 },
        { industry: '科技服务', riskScore: 75 },
        { industry: '制造业', riskScore: 70 }
    ];

    if (document.getElementById('industryRiskChart')) {
        creditChartManager.createIndustryRiskChart('industryRiskChart', industryData);
    }
});

6. 风险指标监控系统

6.1 实时监控仪表板

# 风险指标监控系统设计
class RiskIndicatorMonitoringSystem:
    """风险指标监控系统"""
    
    def __init__(self):
        self.indicators = self.define_risk_indicators()
        self.alert_rules = self.define_alert_rules()
        self.monitoring_config = self.define_monitoring_config()
    
    def define_risk_indicators(self):
        """定义风险监控指标"""
        return {
            "核心财务指标": {
                "资产负债率": {
                    "计算公式": "总负债 / 总资产 × 100%",
                    "正常范围": "40%-60%",
                    "预警阈值": "> 80%",
                    "危险阈值": "> 90%",
                    "监控频率": "日",
                    "权重": 0.25
                },
                "流动比率": {
                    "计算公式": "流动资产 / 流动负债",
                    "正常范围": "1.5-2.5",
                    "预警阈值": "< 1.2",
                    "危险阈值": "< 1.0",
                    "监控频率": "日",
                    "权重": 0.20
                },
                "速动比率": {
                    "计算公式": "(流动资产-存货) / 流动负债",
                    "正常范围": "1.0-1.5",
                    "预警阈值": "< 0.8",
                    "危险阈值": "< 0.5",
                    "监控频率": "日",
                    "权重": 0.15
                },
                "利息保障倍数": {
                    "计算公式": "息税前利润 / 利息费用",
                    "正常范围": "> 3.0",
                    "预警阈值": "< 2.0",
                    "危险阈值": "< 1.0",
                    "监控频率": "月",
                    "权重": 0.20
                }
            },
            "经营效率指标": {
                "总资产周转率": {
                    "计算公式": "营业收入 / 平均总资产",
                    "正常范围": "> 0.8",
                    "预警阈值": "< 0.5",
                    "危险阈值": "< 0.3",
                    "监控频率": "季",
                    "权重": 0.15
                },
                "应收账款周转率": {
                    "计算公式": "营业收入 / 平均应收账款",
                    "正常范围": "> 6",
                    "预警阈值": "< 4",
                    "危险阈值": "< 2",
                    "监控频率": "月",
                    "权重": 0.10
                },
                "存货周转率": {
                    "计算公式": "营业成本 / 平均存货",
                    "正常范围": "> 4",
                    "预警阈值": "< 2",
                    "危险阈值": "< 1",
                    "监控频率": "月",
                    "权重": 0.10
                }
            },
            "盈利能力指标": {
                "净资产收益率": {
                    "计算公式": "净利润 / 平均净资产 × 100%",
                    "正常范围": "> 10%",
                    "预警阈值": "< 5%",
                    "危险阈值": "< 0%",
                    "监控频率": "季",
                    "权重": 0.20
                },
                "销售净利率": {
                    "计算公式": "净利润 / 营业收入 × 100%",
                    "正常范围": "> 5%",
                    "预警阈值": "< 2%",
                    "危险阈值": "< 0%",
                    "监控频率": "月",
                    "权重": 0.15
                },
                "毛利率": {
                    "计算公式": "(营业收入-营业成本) / 营业收入 × 100%",
                    "正常范围": "> 20%",
                    "预警阈值": "< 10%",
                    "危险阈值": "< 5%",
                    "监控频率": "月",
                    "权重": 0.10
                }
            },
            "市场表现指标": {
                "市场份额变化": {
                    "计算公式": "企业销售额 / 行业总销售额 × 100%",
                    "正常范围": "稳定或增长",
                    "预警阈值": "连续下降",
                    "危险阈值": "大幅下降",
                    "监控频率": "季",
                    "权重": 0.15
                },
                "客户集中度": {
                    "计算公式": "前五大客户销售额 / 总销售额 × 100%",
                    "正常范围": "< 50%",
                    "预警阈值": "> 70%",
                    "危险阈值": "> 85%",
                    "监控频率": "季",
                    "权重": 0.10
                }
            }
        }
    
    def define_alert_rules(self):
        """定义预警规则"""
        return {
            "预警级别": {
                "绿色": {
                    "描述": "风险可控",
                    "触发条件": "所有指标正常",
                    "处理措施": "常规监控",
                    "通知方式": "无需通知"
                },
                "黄色": {
                    "描述": "需要关注",
                    "触发条件": "单项指标达到预警阈值",
                    "处理措施": "加强监控,分析原因",
                    "通知方式": "系统提醒"
                },
                "橙色": {
                    "描述": "风险较高",
                    "触发条件": "多项指标达到预警阈值或单项达到危险阈值",
                    "处理措施": "立即分析,制定应对方案",
                    "通知方式": "邮件+短信"
                },
                "红色": {
                    "描述": "高风险",
                    "触发条件": "多项指标达到危险阈值",
                    "处理措施": "紧急处理,风险控制",
                    "通知方式": "电话+邮件+短信"
                }
            },
            "自动化处理": {
                "数据收集": "自动从各系统采集数据",
                "指标计算": "实时计算各项风险指标",
                "阈值监控": "持续监控指标是否超过阈值",
                "预警触发": "自动触发相应级别的预警",
                "报告生成": "自动生成风险分析报告"
            }
        }
    
    def define_monitoring_config(self):
        """定义监控配置"""
        return {
            "数据源配置": {
                "财务系统": {
                    "连接方式": "API接口",
                    "更新频率": "实时",
                    "数据类型": "财务报表数据"
                },
                "业务系统": {
                    "连接方式": "数据库连接",
                    "更新频率": "每小时",
                    "数据类型": "经营数据"
                },
                "外部数据": {
                    "连接方式": "第三方API",
                    "更新频率": "每日",
                    "数据类型": "市场数据、行业数据"
                }
            },
            "监控策略": {
                "实时监控": ["资产负债率", "流动比率", "速动比率"],
                "日度监控": ["利息保障倍数", "应收账款周转率"],
                "周度监控": ["存货周转率", "销售净利率"],
                "月度监控": ["净资产收益率", "总资产周转率"],
                "季度监控": ["市场份额变化", "客户集中度"]
            },
            "报告配置": {
                "日报": {
                    "生成时间": "每日9:00",
                    "包含内容": ["核心指标概览", "异常预警", "趋势分析"],
                    "发送对象": ["风控经理", "业务经理"]
                },
                "周报": {
                    "生成时间": "每周一9:00",
                    "包含内容": ["周度指标分析", "风险评估", "建议措施"],
                    "发送对象": ["部门总监", "风控委员会"]
                },
                "月报": {
                    "生成时间": "每月1日9:00",
                    "包含内容": ["月度风险评估", "行业对比", "预测分析"],
                    "发送对象": ["高级管理层", "董事会"]
                }
            }
        }
    
    def calculate_risk_score(self, company_data):
        """计算企业风险评分"""
        total_score = 0
        total_weight = 0
        
        for category, indicators in self.indicators.items():
            for indicator_name, indicator_info in indicators.items():
                if indicator_name in company_data:
                    value = company_data[indicator_name]
                    score = self.evaluate_indicator(value, indicator_info)
                    weight = indicator_info['权重']
                    
                    total_score += score * weight
                    total_weight += weight
        
        if total_weight > 0:
            final_score = total_score / total_weight * 100
            return min(100, max(0, final_score))
        
        return 0
    
    def evaluate_indicator(self, value, indicator_info):
        """评估单个指标"""
        # 简化的评估逻辑
        normal_range = indicator_info['正常范围']
        warning_threshold = indicator_info['预警阈值']
        danger_threshold = indicator_info['危险阈值']
        
        # 这里需要根据具体的阈值类型进行判断
        # 返回0-100的评分
        if self.is_in_normal_range(value, normal_range):
            return 90
        elif self.exceeds_threshold(value, warning_threshold):
            return 60
        elif self.exceeds_threshold(value, danger_threshold):
            return 30
        else:
            return 80
    
    def is_in_normal_range(self, value, range_str):
        """判断是否在正常范围内"""
        # 简化实现,实际需要解析各种格式的范围表达式
        return True
    
    def exceeds_threshold(self, value, threshold_str):
        """判断是否超过阈值"""
        # 简化实现,实际需要解析各种格式的阈值表达式
        return False
    
    def generate_risk_alert(self, company_data, risk_score):
        """生成风险预警"""
        alert_level = self.determine_alert_level(risk_score)
        
        return {
            "企业名称": company_data.get("name", "未知"),
            "风险评分": risk_score,
            "预警级别": alert_level,
            "预警时间": "2024-07-20 17:30:00",
            "风险描述": self.get_risk_description(alert_level),
            "建议措施": self.get_recommended_actions(alert_level),
            "详细分析": self.analyze_risk_factors(company_data)
        }
    
    def determine_alert_level(self, risk_score):
        """确定预警级别"""
        if risk_score >= 80:
            return "绿色"
        elif risk_score >= 60:
            return "黄色"
        elif risk_score >= 40:
            return "橙色"
        else:
            return "红色"
    
    def get_risk_description(self, alert_level):
        """获取风险描述"""
        descriptions = {
            "绿色": "企业财务状况良好,风险可控",
            "黄色": "企业存在一定风险,需要关注",
            "橙色": "企业风险较高,需要采取措施",
            "红色": "企业风险很高,需要紧急处理"
        }
        return descriptions.get(alert_level, "未知风险级别")
    
    def get_recommended_actions(self, alert_level):
        """获取建议措施"""
        actions = {
            "绿色": ["继续保持良好的财务管理", "定期监控关键指标"],
            "黄色": ["加强财务监控", "分析风险原因", "制定改进计划"],
            "橙色": ["立即进行风险评估", "制定风险控制方案", "加强资金管理"],
            "红色": ["紧急风险控制", "暂停新增授信", "要求提供担保", "考虑提前收回贷款"]
        }
        return actions.get(alert_level, ["联系风控专家"])
    
    def analyze_risk_factors(self, company_data):
        """分析风险因素"""
        risk_factors = []
        
        # 这里可以添加更详细的风险因素分析逻辑
        if company_data.get("debt_ratio", 0) > 0.8:
            risk_factors.append("资产负债率过高")
        
        if company_data.get("current_ratio", 0) < 1.2:
            risk_factors.append("流动比率偏低")
        
        if company_data.get("profit_margin", 0) < 0.05:
            risk_factors.append("盈利能力不足")
        
        return risk_factors
    
    def print_monitoring_system_overview(self):
        """打印监控系统概述"""
        print("=== 风险指标监控系统概述 ===\n")
        
        print("📊 监控指标体系:")
        for category, indicators in self.indicators.items():
            print(f"\n🔹 {category}:")
            for indicator, info in indicators.items():
                print(f"   • {indicator}")
                print(f"     计算公式: {info['计算公式']}")
                print(f"     正常范围: {info['正常范围']}")
                print(f"     预警阈值: {info['预警阈值']}")
                print(f"     监控频率: {info['监控频率']}")
                print(f"     权重: {info['权重']}")
        
        print(f"\n🚨 预警规则:")
        for level, rule in self.alert_rules['预警级别'].items():
            print(f"\n🔸 {level}级预警:")
            print(f"   描述: {rule['描述']}")
            print(f"   触发条件: {rule['触发条件']}")
            print(f"   处理措施: {rule['处理措施']}")
            print(f"   通知方式: {rule['通知方式']}")
        
        print(f"\n⚙️ 监控配置:")
        config = self.monitoring_config
        print(f"   数据源: {len(config['数据源配置'])}个")
        print(f"   监控策略: {len(config['监控策略'])}种")
        print(f"   报告类型: {len(config['报告配置'])}种")

# 创建监控系统实例
risk_monitor = RiskIndicatorMonitoringSystem()
risk_monitor.print_monitoring_system_overview()

# 示例:风险评估
sample_company = {
    "name": "示例企业",
    "debt_ratio": 0.75,
    "current_ratio": 1.5,
    "profit_margin": 0.08
}

risk_score = risk_monitor.calculate_risk_score(sample_company)
alert = risk_monitor.generate_risk_alert(sample_company, risk_score)

print(f"\n📈 风险评估示例:")
print(f"   企业名称: {alert['企业名称']}")
print(f"   风险评分: {alert['风险评分']:.2f}")
print(f"   预警级别: {alert['预警级别']}")
print(f"   风险描述: {alert['风险描述']}")
print(f"   建议措施: {', '.join(alert['建议措施'])}")

7. 实时数据处理与更新

7.1 数据同步机制

/**
 * 实时数据处理与更新系统
 */
class RealTimeDataProcessor {
    constructor() {
        this.websocket = null;
        this.updateQueue = [];
        this.isProcessing = false;
        this.reconnectAttempts = 0;
        this.maxReconnectAttempts = 5;
        this.reconnectDelay = 5000;
        this.dataCache = new Map();
        this.subscribers = new Map();
        
        this.init();
    }

    /**
     * 初始化实时数据处理器
     */
    init() {
        console.log('🔄 初始化实时数据处理器...');
        
        // 建立WebSocket连接
        this.connectWebSocket();
        
        // 启动数据处理循环
        this.startProcessingLoop();
        
        // 绑定页面事件
        this.bindPageEvents();
        
        console.log('✅ 实时数据处理器初始化完成');
    }

    /**
     * 建立WebSocket连接
     */
    connectWebSocket() {
        try {
            // 实际应用中替换为真实的WebSocket地址
            const wsUrl = this.getWebSocketUrl();
            this.websocket = new WebSocket(wsUrl);
            
            this.websocket.onopen = (event) => {
                console.log('🔗 WebSocket连接已建立');
                this.reconnectAttempts = 0;
                this.onWebSocketOpen(event);
            };
            
            this.websocket.onmessage = (event) => {
                this.onWebSocketMessage(event);
            };
            
            this.websocket.onclose = (event) => {
                console.log('❌ WebSocket连接已关闭');
                this.onWebSocketClose(event);
            };
            
            this.websocket.onerror = (error) => {
                console.error('❌ WebSocket连接错误:', error);
                this.onWebSocketError(error);
            };
            
        } catch (error) {
            console.error('WebSocket连接失败:', error);
            this.scheduleReconnect();
        }
    }

    /**
     * 获取WebSocket URL
     */
    getWebSocketUrl() {
        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        const host = window.location.host;
        return `${protocol}//${host}/ws/risk-data`;
    }

    /**
     * WebSocket连接打开事件
     */
    onWebSocketOpen(event) {
        // 发送认证信息
        this.sendAuthentication();
        
        // 订阅数据更新
        this.subscribeToDataUpdates();
    }

    /**
     * WebSocket消息接收事件
     */
    onWebSocketMessage(event) {
        try {
            const data = JSON.parse(event.data);
            this.handleIncomingData(data);
        } catch (error) {
            console.error('解析WebSocket消息失败:', error);
        }
    }

    /**
     * WebSocket连接关闭事件
     */
    onWebSocketClose(event) {
        if (event.code !== 1000) {
            // 非正常关闭,尝试重连
            this.scheduleReconnect();
        }
    }

    /**
     * WebSocket错误事件
     */
    onWebSocketError(error) {
        console.error('WebSocket错误:', error);
    }

    /**
     * 发送认证信息
     */
    sendAuthentication() {
        const authData = {
            type: 'auth',
            token: this.getAuthToken(),
            userId: this.getCurrentUserId()
        };
        
        this.sendWebSocketMessage(authData);
    }

    /**
     * 订阅数据更新
     */
    subscribeToDataUpdates() {
        const subscriptionData = {
            type: 'subscribe',
            channels: [
                'company-risk-updates',
                'market-data-updates',
                'alert-notifications'
            ]
        };
        
        this.sendWebSocketMessage(subscriptionData);
    }

    /**
     * 发送WebSocket消息
     */
    sendWebSocketMessage(data) {
        if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
            this.websocket.send(JSON.stringify(data));
        } else {
            console.warn('WebSocket未连接,消息发送失败');
        }
    }

    /**
     * 处理接收到的数据
     */
    handleIncomingData(data) {
        switch (data.type) {
            case 'company-update':
                this.handleCompanyUpdate(data);
                break;
            case 'market-update':
                this.handleMarketUpdate(data);
                break;
            case 'alert':
                this.handleAlert(data);
                break;
            case 'batch-update':
                this.handleBatchUpdate(data);
                break;
            default:
                console.log('未知数据类型:', data.type);
        }
    }

    /**
     * 处理企业数据更新
     */
    handleCompanyUpdate(data) {
        const { companyId, updates } = data;
        
        // 更新缓存
        this.updateDataCache('company', companyId, updates);
        
        // 添加到更新队列
        this.addToUpdateQueue({
            type: 'company-update',
            companyId: companyId,
            data: updates,
            timestamp: Date.now()
        });
        
        // 通知订阅者
        this.notifySubscribers('company-update', { companyId, updates });
    }

    /**
     * 处理市场数据更新
     */
    handleMarketUpdate(data) {
        const { marketData } = data;
        
        // 更新缓存
        this.updateDataCache('market', 'current', marketData);
        
        // 添加到更新队列
        this.addToUpdateQueue({
            type: 'market-update',
            data: marketData,
            timestamp: Date.now()
        });
        
        // 通知订阅者
        this.notifySubscribers('market-update', marketData);
    }

    /**
     * 处理预警信息
     */
    handleAlert(data) {
        const { alert } = data;
        
        // 显示预警通知
        this.showAlertNotification(alert);
        
        // 更新预警列表
        this.updateAlertList(alert);
        
        // 通知订阅者
        this.notifySubscribers('alert', alert);
    }

    /**
     * 处理批量更新
     */
    handleBatchUpdate(data) {
        const { updates } = data;
        
        updates.forEach(update => {
            this.handleIncomingData(update);
        });
    }

    /**
     * 更新数据缓存
     */
    updateDataCache(category, key, data) {
        const cacheKey = `${category}:${key}`;
        const existingData = this.dataCache.get(cacheKey) || {};
        const updatedData = { ...existingData, ...data };
        
        this.dataCache.set(cacheKey, updatedData);
    }

    /**
     * 添加到更新队列
     */
    addToUpdateQueue(update) {
        this.updateQueue.push(update);
        
        // 限制队列大小
        if (this.updateQueue.length > 1000) {
            this.updateQueue.shift();
        }
    }

    /**
     * 启动数据处理循环
     */
    startProcessingLoop() {
        setInterval(() => {
            this.processUpdateQueue();
        }, 100); // 每100ms处理一次队列
    }

    /**
     * 处理更新队列
     */
    processUpdateQueue() {
        if (this.isProcessing || this.updateQueue.length === 0) {
            return;
        }
        
        this.isProcessing = true;
        
        try {
            const batchSize = 10;
            const batch = this.updateQueue.splice(0, batchSize);
            
            batch.forEach(update => {
                this.applyUpdate(update);
            });
            
        } catch (error) {
            console.error('处理更新队列失败:', error);
        } finally {
            this.isProcessing = false;
        }
    }

    /**
     * 应用数据更新
     */
    applyUpdate(update) {
        switch (update.type) {
            case 'company-update':
                this.applyCompanyUpdate(update);
                break;
            case 'market-update':
                this.applyMarketUpdate(update);
                break;
            default:
                console.log('未知更新类型:', update.type);
        }
    }

    /**
     * 应用企业数据更新
     */
    applyCompanyUpdate(update) {
        const { companyId, data } = update;
        
        // 更新表格中的企业数据
        this.updateCompanyInTable(companyId, data);
        
        // 更新图表数据
        this.updateChartsWithCompanyData(companyId, data);
        
        // 重新计算风险评级
        this.recalculateRiskRating(companyId, data);
    }

    /**
     * 应用市场数据更新
     */
    applyMarketUpdate(update) {
        const { data } = update;
        
        // 更新市场指标显示
        this.updateMarketIndicators(data);
        
        // 更新相关图表
        this.updateMarketCharts(data);
    }

    /**
     * 更新表格中的企业数据
     */
    updateCompanyInTable(companyId, data) {
        const tableRows = document.querySelectorAll('table tr');
        
        tableRows.forEach(row => {
            const companyNameCell = row.querySelector('td:first-child');
            if (companyNameCell && companyNameCell.textContent.includes(data.name)) {
                // 更新相应的单元格
                this.updateTableRow(row, data);
            }
        });
    }

    /**
     * 更新表格行数据
     */
    updateTableRow(row, data) {
        const cells = row.querySelectorAll('td');
        
        if (cells.length >= 4) {
            // 更新盈利覆盖能力
            if (data.profitCoverage !== undefined) {
                cells[1].textContent = data.profitCoverage.toFixed(2);
                this.animateValueChange(cells[1]);
            }
            
            // 更新流动性能力
            if (data.liquidityCapacity !== undefined) {
                cells[2].textContent = data.liquidityCapacity.toFixed(2);
                this.animateValueChange(cells[2]);
            }
            
            // 更新清偿能力
            if (data.solvencyCapacity !== undefined) {
                cells[3].textContent = data.solvencyCapacity.toFixed(2);
                this.animateValueChange(cells[3]);
            }
        }
    }

    /**
     * 动画显示数值变化
     */
    animateValueChange(element) {
        element.style.backgroundColor = 'rgba(0, 212, 255, 0.3)';
        element.style.transition = 'background-color 0.5s ease';
        
        setTimeout(() => {
            element.style.backgroundColor = '';
        }, 1000);
    }

    /**
     * 显示预警通知
     */
    showAlertNotification(alert) {
        const notification = document.createElement('div');
        notification.className = `alert-notification alert-${alert.level}`;
        notification.innerHTML = `
            <div class="alert-header">
                <span class="alert-icon">⚠️</span>
                <span class="alert-title">${alert.title}</span>
                <button class="alert-close" onclick="this.parentElement.parentElement.remove()">×</button>
            </div>
            <div class="alert-content">
                <p>${alert.message}</p>
                <small>时间: ${new Date(alert.timestamp).toLocaleString()}</small>
            </div>
        `;
        
        // 添加到页面
        const container = document.getElementById('alertContainer') || document.body;
        container.appendChild(notification);
        
        // 自动移除
        setTimeout(() => {
            if (notification.parentNode) {
                notification.remove();
            }
        }, 10000);
    }

    /**
     * 订阅数据更新
     */
    subscribe(channel, callback) {
        if (!this.subscribers.has(channel)) {
            this.subscribers.set(channel, []);
        }
        
        this.subscribers.get(channel).push(callback);
    }

    /**
     * 取消订阅
     */
    unsubscribe(channel, callback) {
        if (this.subscribers.has(channel)) {
            const callbacks = this.subscribers.get(channel);
            const index = callbacks.indexOf(callback);
            if (index > -1) {
                callbacks.splice(index, 1);
            }
        }
    }

    /**
     * 通知订阅者
     */
    notifySubscribers(channel, data) {
        if (this.subscribers.has(channel)) {
            this.subscribers.get(channel).forEach(callback => {
                try {
                    callback(data);
                } catch (error) {
                    console.error('订阅者回调执行失败:', error);
                }
            });
        }
    }

    /**
     * 计划重连
     */
    scheduleReconnect() {
        if (this.reconnectAttempts < this.maxReconnectAttempts) {
            this.reconnectAttempts++;
            console.log(`${this.reconnectDelay / 1000}秒后尝试第${this.reconnectAttempts}次重连...`);
            
            setTimeout(() => {
                this.connectWebSocket();
            }, this.reconnectDelay);
            
            // 增加重连延迟
            this.reconnectDelay = Math.min(this.reconnectDelay * 2, 30000);
        } else {
            console.error('❌ 达到最大重连次数,停止重连');
            this.showConnectionError();
        }
    }

    /**
     * 显示连接错误
     */
    showConnectionError() {
        const errorDiv = document.createElement('div');
        errorDiv.className = 'connection-error';
        errorDiv.innerHTML = `
            <div class="error-content">
                <h3>连接中断</h3>
                <p>与服务器的连接已中断,实时数据更新暂停</p>
                <button onclick="location.reload()">重新连接</button>
            </div>
        `;
        document.body.appendChild(errorDiv);
    }

    /**
     * 绑定页面事件
     */
    bindPageEvents() {
        // 页面可见性变化
        document.addEventListener('visibilitychange', () => {
            if (document.hidden) {
                console.log('📱 页面隐藏,暂停数据处理');
            } else {
                console.log('📱 页面显示,恢复数据处理');
            }
        });
        
        // 页面卸载
        window.addEventListener('beforeunload', () => {
            this.cleanup();
        });
    }

    /**
     * 获取认证令牌
     */
    getAuthToken() {
        return localStorage.getItem('authToken') || 'demo-token';
    }

    /**
     * 获取当前用户ID
     */
    getCurrentUserId() {
        return localStorage.getItem('userId') || 'demo-user';
    }

    /**
     * 清理资源
     */
    cleanup() {
        if (this.websocket) {
            this.websocket.close();
        }
        
        this.subscribers.clear();
        this.dataCache.clear();
        this.updateQueue = [];
    }
}

// 创建全局实时数据处理器实例
const realTimeProcessor = new RealTimeDataProcessor();

// 示例:订阅企业数据更新
realTimeProcessor.subscribe('company-update', (data) => {
    console.log('企业数据更新:', data);
});

// 示例:订阅预警信息
realTimeProcessor.subscribe('alert', (alert) => {
    console.log('收到预警:', alert);
});

8. 用户界面设计与交互

8.1 响应式界面设计

/* 金融风控系统界面样式 */

/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 根元素样式 */
:root {
    --primary-color: #1e3c72;
    --secondary-color: #2a5298;
    --accent-color: #00d4ff;
    --success-color: #00ff88;
    --warning-color: #ffd93d;
    --danger-color: #ff6b6b;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #a0a0a0;
    --bg-primary: #0f1419;
    --bg-secondary: #1a2332;
    --bg-card: rgba(255, 255, 255, 0.1);
    --border-color: rgba(255, 255, 255, 0.2);
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-heavy: 0 16px 48px rgba(0, 0, 0, 0.3);
}

/* 基础样式 */
body {
    font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

/* 页面头部样式 */
.header {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-light);
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-display {
    font-size: 14px;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
}

.system-title {
    font-size: 24px;
    font-weight: 300;
    background: linear-gradient(45deg, var(--accent-color), var(--success-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.user-info {
    font-size: 14px;
    color: var(--text-secondary);
}

.user-info a {
    color: var(--accent-color);
    text-decoration: none;
    margin-left: 10px;
    transition: color 0.3s ease;
}

.user-info a:hover {
    color: var(--success-color);
}

/* 主标题样式 */
.main-title {
    text-align: center;
    padding: 30px 20px;
    position: relative;
}

.main-title h2 {
    font-size: 28px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.title-decoration {
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), var(--success-color));
    margin: 0 auto;
    border-radius: 2px;
}

/* 信用评级容器样式 */
.credit-rating-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    gap: 25px;
}

/* 评级面板样式 */
.rating-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 25px;
    backdrop-filter: blur(15px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.rating-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), var(--success-color));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.rating-panel:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-heavy);
    border-color: var(--accent-color);
}

.rating-panel:hover::before {
    opacity: 1;
}

/* 评级头部样式 */
.rating-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
}

.rating-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 评级徽章样式 */
.rating-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-light);
}

.rating-aaa {
    background: linear-gradient(45deg, var(--success-color), #00b894);
}

.rating-aa-plus {
    background: linear-gradient(45deg, var(--accent-color), #74b9ff);
}

.rating-aa {
    background: linear-gradient(45deg, var(--warning-color), #fdcb6e);
}

.rating-aa-minus {
    background: linear-gradient(45deg, var(--danger-color), #fd79a8);
}

/* 企业表格样式 */
.company-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 13px;
}

.company-table th {
    background: rgba(0, 0, 0, 0.4);
    color: var(--text-primary);
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.company-table td {
    padding: 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.company-table tr:hover {
    background: rgba(0, 212, 255, 0.1);
    transform: scale(1.02);
}

.company-table tr:hover td {
    color: var(--text-primary);
}

/* 风险指示器样式 */
.risk-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    animation: pulse 2s infinite;
}

.risk-low {
    background: var(--success-color);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.5);
}

.risk-medium {
    background: var(--warning-color);
    box-shadow: 0 0 12px rgba(255, 217, 61, 0.5);
}

.risk-high {
    background: var(--danger-color);
    box-shadow: 0 0 12px rgba(255, 107, 107, 0.5);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* 模态框样式 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-heavy);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    padding: 25px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 20px;
    color: var(--text-primary);
}

.close {
    font-size: 28px;
    font-weight: bold;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.3s ease;
}

.close:hover {
    color: var(--danger-color);
}

.modal-body {
    padding: 25px;
}

/* 企业详情样式 */
.company-detail {
    color: var(--text-secondary);
}

.detail-section {
    margin-bottom: 30px;
}

.detail-section h4 {
    color: var(--text-primary);
    font-size: 16px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent-color);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.detail-item label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-item span {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

/* 风险评估样式 */
.risk-assessment {
    display: flex;
    gap: 20px;
    align-items: center;
}

.risk-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.score {
    font-size: 18px;
    font-weight: 600;
    color: var(--success-color);
}

/* 财务指标样式 */
.financial-indicators {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.indicator-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.indicator-item label {
    font-size: 13px;
    color: var(--text-muted);
}

.indicator-item span {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.indicator-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.indicator-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), var(--success-color));
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* 风险建议样式 */
.risk-suggestions p {
    margin-bottom: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border-left: 3px solid var(--accent-color);
}

/* 预警通知样式 */
.alert-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    max-width: 400px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-heavy);
    z-index: 3000;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.alert-header {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-icon {
    font-size: 18px;
}

.alert-title {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary);
}

 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CarlowZJ

我的文章对你有用的话,可以支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值