1062 lines
58 KiB
HTML
1062 lines
58 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>完整报告生成接口测试 - Finyx Data AI</title>
|
||
<link rel="stylesheet" href="test_common.css">
|
||
<style>
|
||
.report-section {
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius);
|
||
margin-bottom: 20px;
|
||
overflow: hidden;
|
||
}
|
||
.report-section-header {
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, #2196f3 100%);
|
||
color: var(--white);
|
||
padding: 16px 20px;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
}
|
||
.report-section-body {
|
||
padding: 20px;
|
||
background-color: var(--white);
|
||
}
|
||
.subsection {
|
||
margin-bottom: 16px;
|
||
padding: 12px;
|
||
background-color: var(--light-color);
|
||
border-radius: var(--radius);
|
||
}
|
||
.subsection-title {
|
||
font-weight: 600;
|
||
color: var(--dark-color);
|
||
margin-bottom: 8px;
|
||
font-size: 14px;
|
||
}
|
||
.subsection-content {
|
||
font-size: 13px;
|
||
line-height: 1.8;
|
||
color: var(--text-color);
|
||
}
|
||
.warning-box {
|
||
background-color: #fff3e0;
|
||
border-left: 4px solid #ff9800;
|
||
padding: 12px;
|
||
margin-bottom: 12px;
|
||
border-radius: 0 var(--radius) var(--radius) 0;
|
||
}
|
||
.warning-title {
|
||
font-weight: 600;
|
||
color: #e65100;
|
||
margin-bottom: 4px;
|
||
font-size: 13px;
|
||
}
|
||
.warning-content {
|
||
font-size: 13px;
|
||
color: #5d4037;
|
||
line-height: 1.6;
|
||
}
|
||
.suggestion-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
.suggestion-item {
|
||
padding: 8px 12px;
|
||
margin-bottom: 8px;
|
||
background-color: var(--white);
|
||
border-left: 3px solid var(--success-color);
|
||
border-radius: 0 var(--radius) var(--radius) 0;
|
||
}
|
||
.suggestion-number {
|
||
display: inline-block;
|
||
width: 24px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
text-align: center;
|
||
background-color: var(--success-color);
|
||
color: var(--white);
|
||
border-radius: 50%;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.report-nav {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-bottom: 20px;
|
||
overflow-x: auto;
|
||
padding-bottom: 8px;
|
||
}
|
||
.report-nav-btn {
|
||
padding: 8px 16px;
|
||
background: var(--white);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius);
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
white-space: nowrap;
|
||
}
|
||
.report-nav-btn:hover {
|
||
border-color: var(--primary-color);
|
||
color: var(--primary-color);
|
||
}
|
||
.report-nav-btn.active {
|
||
background-color: var(--primary-color);
|
||
color: var(--white);
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.storage-chart-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12px;
|
||
margin-bottom: 8px;
|
||
background-color: var(--light-color);
|
||
border-radius: var(--radius);
|
||
}
|
||
.storage-color {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 4px;
|
||
margin-right: 12px;
|
||
}
|
||
.storage-info {
|
||
flex: 1;
|
||
}
|
||
.storage-name {
|
||
font-weight: 500;
|
||
font-size: 13px;
|
||
}
|
||
.storage-volume {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 页面头部 -->
|
||
<header class="page-header">
|
||
<h1 class="page-title">📊 完整报告生成接口测试</h1>
|
||
<p class="page-subtitle">
|
||
基于数据盘点结果、背景调研信息和价值挖掘场景，生成完整的数据资产盘点工作总结报告
|
||
</p>
|
||
</header>
|
||
|
||
<div class="content-grid">
|
||
<!-- 左侧：输入配置 -->
|
||
<div class="col-4">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">报告配置</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<form id="reportForm">
|
||
<div class="form-group">
|
||
<label class="form-label">快速配置</label>
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-info btn-sm" onclick="loadReportData('retail')">零售场景</button>
|
||
<button type="button" class="btn btn-info btn-sm" onclick="loadReportData('finance')">金融场景</button>
|
||
<button type="button" class="btn btn-info btn-sm" onclick="loadReportData('healthcare')">医疗场景</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目信息 -->
|
||
<div class="form-group">
|
||
<label class="form-label">项目信息</label>
|
||
<input type="text" id="projectName" class="form-control" placeholder="项目名称" style="margin-bottom: 8px;">
|
||
<select id="industry" class="form-control">
|
||
<option value="">请选择行业</option>
|
||
<option value="retail-fresh" selected>零售生鲜</option>
|
||
<option value="retail-general">零售通用</option>
|
||
<option value="finance">金融</option>
|
||
<option value="healthcare">医疗健康</option>
|
||
<option value="logistics">物流</option>
|
||
<option value="manufacturing">制造业</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- 数据盘点结果 -->
|
||
<div class="form-group">
|
||
<label class="form-label">数据盘点结果</label>
|
||
<div class="form-row">
|
||
<input type="number" id="totalTables" class="form-control" placeholder="总表数" value="14582">
|
||
<input type="number" id="totalFields" class="form-control" placeholder="总字段数" value="245000">
|
||
</div>
|
||
<input type="text" id="totalVolume" class="form-control" placeholder="总数据量" value="58 PB" style="margin-top: 8px;">
|
||
</div>
|
||
|
||
<!-- 价值挖掘场景 -->
|
||
<div class="form-group">
|
||
<label class="form-label">选中的场景</label>
|
||
<div id="selectedScenariosList" style="max-height: 150px; overflow-y: auto;">
|
||
<!-- 动态加载 -->
|
||
</div>
|
||
<button type="button" class="btn btn-outline btn-sm" style="margin-top: 8px;" onclick="addScenario()">+ 添加场景</button>
|
||
</div>
|
||
|
||
<!-- 生成选项 -->
|
||
<div class="form-group">
|
||
<label class="form-label">生成选项</label>
|
||
<select id="detailLevel" class="form-control" style="margin-bottom: 8px;">
|
||
<option value="standard" selected>标准详细程度</option>
|
||
<option value="detailed">详细</option>
|
||
<option value="concise">简洁</option>
|
||
</select>
|
||
<select id="model" class="form-control">
|
||
<option value="qwen-max" selected>通义千问 Max</option>
|
||
<option value="gpt-4">GPT-4</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="btn-group" style="margin-top: 20px;">
|
||
<button type="submit" class="btn btn-primary">🚀 生成报告</button>
|
||
<button type="button" class="btn btn-outline" onclick="resetForm()">重置</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- API 调用信息 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">API 调用信息</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="form-group">
|
||
<label class="form-label">请求端点</label>
|
||
<code style="display: block; padding: 8px; background: var(--light-color); border-radius: var(--radius); font-size: 12px;">
|
||
POST /api/v1/delivery/generate-report
|
||
</code>
|
||
</div>
|
||
<div id="requestInfo" class="form-group">
|
||
<label class="form-label">请求数据</label>
|
||
<pre id="requestJson" style="max-height: 200px; overflow: auto; font-size: 11px; background: var(--light-color); padding: 8px; border-radius: var(--radius);">等待提交...</pre>
|
||
</div>
|
||
<div id="responseInfo" class="form-group" style="display: none;">
|
||
<label class="form-label">响应数据</label>
|
||
<pre id="responseJson" style="max-height: 300px; overflow: auto; font-size: 11px; background: var(--light-color); padding: 8px; border-radius: var(--radius);"></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：报告展示 -->
|
||
<div class="col-8">
|
||
<!-- 加载状态 -->
|
||
<div id="loadingArea" style="display: none;"></div>
|
||
|
||
<!-- 报告区域 -->
|
||
<div id="reportArea" style="display: none;">
|
||
<!-- 报告头部 -->
|
||
<div class="card">
|
||
<div style="text-align: center; padding: 30px 20px;">
|
||
<h1 style="font-size: 28px; color: var(--dark-color); margin-bottom: 12px;">数据资产盘点工作总结报告</h1>
|
||
<p style="font-size: 14px; color: var(--text-muted);" id="reportDate"></p>
|
||
<div style="margin-top: 16px; font-size: 18px; color: var(--primary-color);" id="reportProjectName"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 报告导航 -->
|
||
<div class="report-nav">
|
||
<button class="report-nav-btn active" onclick="scrollToSection('section1')">一、企业数字化情况简介</button>
|
||
<button class="report-nav-btn" onclick="scrollToSection('section2')">二、数据资源统计</button>
|
||
<button class="report-nav-btn" onclick="scrollToSection('section3')">三、数据资产情况盘点</button>
|
||
<button class="report-nav-btn" onclick="scrollToSection('section4')">四、专家建议与下一步计划</button>
|
||
</div>
|
||
|
||
<!-- 章节一：企业数字化情况简介 -->
|
||
<div class="report-section" id="section1">
|
||
<div class="report-section-header">章节一：企业数字化情况简介</div>
|
||
<div class="report-section-body">
|
||
<div class="subsection">
|
||
<div class="subsection-title">1.1 企业背景</div>
|
||
<div class="subsection-content" id="enterpriseBackground"></div>
|
||
</div>
|
||
<div class="subsection">
|
||
<div class="subsection-title">1.2 信息化建设现状</div>
|
||
<div class="subsection-content" id="informatizationStatus"></div>
|
||
</div>
|
||
<div class="subsection">
|
||
<div class="subsection-title">1.3 业务流与数据流</div>
|
||
<div class="subsection-content" id="businessDataFlow"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 章节二：数据资源统计 -->
|
||
<div class="report-section" id="section2">
|
||
<div class="report-section-header">章节二：数据资源统计</div>
|
||
<div class="report-section-body">
|
||
<div class="subsection">
|
||
<div class="subsection-title">2.1 数据总量概览</div>
|
||
<div class="stats-grid" style="margin-top: 12px;">
|
||
<div class="stat-card">
|
||
<div class="stat-label">总数据量</div>
|
||
<div class="stat-value" id="totalDataVolume">0</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">总表数</div>
|
||
<div class="stat-value" id="reportTotalTables">0</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">总字段数</div>
|
||
<div class="stat-value" id="reportTotalFields">0</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="subsection">
|
||
<div class="subsection-title">2.2 存储分布</div>
|
||
<div class="subsection-content" id="storageDistribution"></div>
|
||
</div>
|
||
<div class="subsection">
|
||
<div class="subsection-title">2.3 数据来源结构</div>
|
||
<div class="subsection-content" id="dataSourceStructure"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 章节三：数据资产情况盘点 -->
|
||
<div class="report-section" id="section3">
|
||
<div class="report-section-header">章节三：数据资产情况盘点</div>
|
||
<div class="report-section-body">
|
||
<div class="subsection">
|
||
<div class="subsection-title">3.1 资产概览</div>
|
||
<div class="subsection-content" id="assetOverview"></div>
|
||
</div>
|
||
<div class="subsection">
|
||
<div class="subsection-title">3.2 资产构成</div>
|
||
<div id="assetComposition"></div>
|
||
</div>
|
||
<div class="subsection">
|
||
<div class="subsection-title">3.3 合规风险提示</div>
|
||
<div id="complianceRisks"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 章节四：专家建议与下一步计划 -->
|
||
<div class="report-section" id="section4">
|
||
<div class="report-section-header">章节四：专家建议与下一步计划</div>
|
||
<div class="report-section-body">
|
||
<div class="subsection">
|
||
<div class="subsection-title">4.1 合规整改建议</div>
|
||
<ul class="suggestion-list" id="complianceRemediation"></ul>
|
||
</div>
|
||
<div class="subsection">
|
||
<div class="subsection-title">4.2 技术演进建议</div>
|
||
<div class="subsection-content" id="technicalEvolution"></div>
|
||
</div>
|
||
<div class="subsection">
|
||
<div class="subsection-title">4.3 价值深化建议</div>
|
||
<ul class="suggestion-list" id="valueDeepening"></ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 报告页脚 -->
|
||
<div class="card" style="text-align: center; padding: 20px;">
|
||
<div style="font-size: 12px; color: var(--text-muted);">
|
||
<div>报告生成时间：<span id="generationTime"></span></div>
|
||
<div>使用模型：<span id="modelUsed"></span></div>
|
||
<div style="margin-top: 8px;">本报告由 Finyx Data AI 数据资产盘点系统自动生成</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<div id="emptyState" class="card" style="text-align: center; padding: 60px 20px;">
|
||
<div style="font-size: 48px; margin-bottom: 20px;">📊</div>
|
||
<h3 style="margin-bottom: 12px;">等待生成报告</h3>
|
||
<p style="color: var(--text-muted);">
|
||
配置报告参数或使用快速配置<br>
|
||
点击"生成报告"按钮生成完整的数据资产盘点报告
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="base_test_framework.js"></script>
|
||
<script>
|
||
// ==================== 虚拟数据 ====================
|
||
let currentScenarioType = 'retail';
|
||
let selectedScenarios = [
|
||
{ name: '精准会员营销', description: '基于用户画像实现千人千面营销' },
|
||
{ name: '智能库存补货', description: '基于历史销售数据预测需求，自动补货' },
|
||
{ name: '价格弹性分析', description: '分析价格变化对销量的影响' }
|
||
];
|
||
|
||
const mockReportData = {
|
||
retail: {
|
||
projectName: '某连锁生鲜零售企业数据资产盘点项目',
|
||
industry: 'retail-fresh',
|
||
enterpriseBackground: '某连锁生鲜零售企业成立于2010年，主营业务为水果、蔬菜等生鲜产品的销售。经过十余年的发展，目前已在全国拥有200+线下门店，并建立了完善的线上电商平台，形成了线上线下全渠道的销售网络。企业始终坚持"新鲜、品质、健康"的经营理念，为广大消费者提供优质的生鲜产品。',
|
||
informatizationStatus: {
|
||
overview: '企业已建立了较为完善的信息化系统，包括ERP系统、CRM系统、供应链管理系统等。私有云平台承载了核心业务系统，公有云平台用于扩展业务和数据分析。',
|
||
privateCloud: {
|
||
title: '私有云平台',
|
||
description: '基于OpenStack构建的私有云平台，承载核心ERP、CRM、供应链管理等业务系统，保障核心数据的安全和稳定运行。'
|
||
},
|
||
publicCloud: {
|
||
title: '公有云平台',
|
||
description: '采用阿里云公有云服务，用于数据分析、业务扩展、移动端应用等场景，实现资源的弹性伸缩。'
|
||
}
|
||
},
|
||
businessDataFlow: {
|
||
overview: '企业业务流程涵盖采购、仓储、销售、配送等环节，形成了完整的业务链条。数据流贯穿整个业务流程，实现了从采购到销售的全链路数据采集。',
|
||
manufacturing: {
|
||
title: '采购环节',
|
||
description: '从供应商采购生鲜产品，录入采购订单、供应商信息、产品质量数据等。'
|
||
},
|
||
logistics: {
|
||
title: '仓储配送环节',
|
||
description: '仓储管理库存数据，配送管理运输数据，确保产品及时送达。'
|
||
},
|
||
retail: {
|
||
title: '销售环节',
|
||
description: '线上线下销售渠道，采集订单数据、客户数据、支付数据等。'
|
||
},
|
||
dataAggregation: {
|
||
title: '数据聚合',
|
||
description: '各环节数据汇聚到数据仓库，进行统一存储和分析。'
|
||
}
|
||
},
|
||
storageDistribution: [
|
||
{ category: '供应链物流', volume: '25.4 PB', storage_type: '主要存储于 HDFS / NoSQL', color: 'blue' },
|
||
{ category: '销售交易', volume: '18.6 PB', storage_type: 'MySQL / Redis', color: 'purple' },
|
||
{ category: '会员运营', volume: '8.5 PB', storage_type: 'MongoDB / Elasticsearch', color: 'amber' },
|
||
{ category: '其他业务', volume: '5.5 PB', storage_type: '混合存储', color: 'gray' }
|
||
],
|
||
dataSourceStructure: {
|
||
structured: 35,
|
||
semi_structured: 65
|
||
},
|
||
assets: [
|
||
{
|
||
id: 'asset1',
|
||
title: '消费者全景画像',
|
||
subtitle: '核心数据资产',
|
||
composition: {
|
||
description: '整合多源数据，构建360度用户画像，包括基础信息、行为偏好、购买力分析等维度。',
|
||
core_tables: ['Dim_Customer', 'Fact_Sales', 'Dim_Product', 'Fact_Member_Point']
|
||
},
|
||
application_scenarios: {
|
||
description: '用于精准营销、个性化推荐、客户分层运营、流失预警等应用场景。'
|
||
},
|
||
compliance_risks: {
|
||
warnings: [
|
||
{
|
||
type: 'PIPL个人信息保护',
|
||
content: '该资产包含用户手机号、身份证号等敏感个人信息，需严格遵守《个人信息保护法》要求，确保数据采集、存储、使用合法合规。',
|
||
highlights: ['需取得用户明确授权', '实施数据脱敏处理', '建立访问审计机制']
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
id: 'asset2',
|
||
title: '全渠道销售数据',
|
||
subtitle: '高价值数据资产',
|
||
composition: {
|
||
description: '汇聚线上线下全渠道销售交易数据，包含订单信息、支付信息、物流信息等。',
|
||
core_tables: ['Fact_Sales', 'Dim_Store', 'Dim_Channel', 'Fact_Order_Delivery']
|
||
},
|
||
application_scenarios: {
|
||
description: '用于销售分析、商品推荐、供应链优化、库存管理等应用场景。'
|
||
},
|
||
compliance_risks: {
|
||
warnings: [
|
||
{
|
||
type: '数据安全',
|
||
content: '该资产包含大量交易数据，需加强数据安全防护，防止数据泄露和滥用。',
|
||
highlights: ['实施数据加密', '建立访问控制', '定期安全审计']
|
||
}
|
||
]
|
||
}
|
||
}
|
||
],
|
||
complianceRemediation: [
|
||
{ order: 1, category: '数据合规', description: '全面梳理数据资产，识别敏感个人信息，制定数据分类分级标准，建立数据合规管理体系。', code_references: ['PIPL第6条', '数据安全法第21条'] },
|
||
{ order: 2, category: '权限管控', description: '实施最小权限原则，建立细粒度的数据访问控制机制，记录所有数据访问行为。', code_references: ['PIPL第51条'] },
|
||
{ order: 3, category: '脱敏处理', description: '对敏感数据进行脱敏处理，在生产环境和测试环境间建立数据脱敏机制。', code_references: ['PIPL第24条'] },
|
||
{ order: 4, category: '审计监控', description: '建立数据访问审计日志，定期审计数据使用情况，及时发现异常行为。', code_references: ['数据安全法第22条'] }
|
||
],
|
||
technicalEvolution: {
|
||
title: '技术演进建议',
|
||
description: '建议引入数据湖仓一体架构、实时计算引擎、机器学习平台等技术，提升数据处理和分析能力。',
|
||
technologies: ['数据湖仓一体', '实时计算引擎', '机器学习平台', '数据血缘追踪', '自动化运维']
|
||
},
|
||
valueDeepening: [
|
||
{ description: '深化数据资产盘点，挖掘更多高价值数据资产，构建更完整的数据资产地图。', scenarios: ['数据资产发现', '数据价值评估'] },
|
||
{ description: '建立数据质量管理体系，提升数据质量，为数据应用提供高质量数据支撑。', scenarios: ['数据质量监控', '数据清洗'] },
|
||
{ description: '建设数据中台，统一数据服务，提升数据共享和复用效率。', scenarios: ['数据服务化', '数据共享'] }
|
||
]
|
||
},
|
||
finance: {
|
||
projectName: '某银行数据资产盘点项目',
|
||
industry: 'finance',
|
||
enterpriseBackground: '某银行成立于2005年，是一家股份制商业银行，主要提供个人银行、公司银行、投资银行等金融服务。银行在全国设有300+分支机构，服务客户超过1000万。',
|
||
informatizationStatus: {
|
||
overview: '银行已建立了完善的核心业务系统、风控系统、数据仓库等。核心业务系统运行在私有云平台，数据分析平台基于公有云构建。',
|
||
privateCloud: {
|
||
title: '核心业务系统',
|
||
description: '基于IBM大型机构建的核心业务系统，承载存取款、转账、支付等核心业务。'
|
||
},
|
||
publicCloud: {
|
||
title: '数据分析平台',
|
||
description: '采用阿里云构建的数据分析平台，用于风险分析、客户分析、业务分析等。'
|
||
}
|
||
},
|
||
businessDataFlow: {
|
||
overview: '银行业务流程涵盖开户、存取款、转账、贷款等环节，数据流贯穿整个业务流程，实现了从业务发生到数据分析的全链路记录。',
|
||
manufacturing: {
|
||
title: '客户服务环节',
|
||
description: '客户开户、存取款、转账等业务，采集客户信息、交易信息。'
|
||
},
|
||
logistics: {
|
||
title: '风险控制环节',
|
||
description: '实时风险评估、反欺诈检测、信用评估等。'
|
||
},
|
||
retail: {
|
||
title: '产品服务环节',
|
||
description: '提供贷款、理财、保险等金融产品服务。'
|
||
},
|
||
dataAggregation: {
|
||
title: '数据分析',
|
||
description: '各环节数据汇聚到数据仓库，进行统一分析和应用。'
|
||
}
|
||
},
|
||
storageDistribution: [
|
||
{ category: '核心交易数据', volume: '35.2 PB', storage_type: 'DB2 / Oracle', color: 'blue' },
|
||
{ category: '风险数据', volume: '12.8 PB', storage_type: 'Greenplum / Hive', color: 'purple' },
|
||
{ category: '客户数据', volume: '8.5 PB', storage_type: 'MySQL / PostgreSQL', color: 'amber' },
|
||
{ category: '其他数据', volume: '6.5 PB', storage_type: '混合存储', color: 'gray' }
|
||
],
|
||
dataSourceStructure: {
|
||
structured: 45,
|
||
semi_structured: 55
|
||
},
|
||
assets: [
|
||
{
|
||
id: 'asset1',
|
||
title: '客户账户数据',
|
||
subtitle: '核心数据资产',
|
||
composition: {
|
||
description: '包含客户账户信息、余额信息、交易记录等核心数据。',
|
||
core_tables: ['Dim_Customer', 'Fact_Account', 'Fact_Transaction']
|
||
},
|
||
application_scenarios: {
|
||
description: '用于客户分析、账户管理、风险控制、合规报送等应用场景。'
|
||
},
|
||
compliance_risks: {
|
||
warnings: [
|
||
{
|
||
type: '金融数据保护',
|
||
content: '该资产包含敏感金融数据，需严格遵守金融监管要求，确保数据安全和合规。',
|
||
highlights: ['符合金融监管要求', '实施严格访问控制', '加强数据加密']
|
||
}
|
||
]
|
||
}
|
||
}
|
||
],
|
||
complianceRemediation: [
|
||
{ order: 1, category: '金融数据合规', description: '确保符合金融监管要求，建立金融数据分类分级标准。', code_references: ['商业银行法', '数据安全法'] },
|
||
{ order: 2, category: '跨境数据', description: '严格管理跨境数据传输，确保符合数据出境安全评估要求。', code_references: ['数据出境安全评估办法'] },
|
||
{ order: 3, category: '数据安全', description: '加强数据安全防护，实施数据加密、访问控制、安全审计等措施。', code_references: ['网络安全法', '数据安全法'] }
|
||
],
|
||
technicalEvolution: {
|
||
title: '技术演进建议',
|
||
description: '建议引入实时风控、大数据分析、人工智能等技术，提升风险管理和服务能力。',
|
||
technologies: ['实时风控引擎', '大数据分析', '人工智能', '区块链', '隐私计算']
|
||
},
|
||
valueDeepening: [
|
||
{ description: '深化客户画像，构建360度客户视图，提升客户服务质量。', scenarios: ['客户画像', '精准营销'] },
|
||
{ description: '建立智能风控体系，提升风险识别和预警能力。', scenarios: ['智能风控', '反欺诈'] }
|
||
]
|
||
},
|
||
healthcare: {
|
||
projectName: '某医疗机构数据资产盘点项目',
|
||
industry: 'healthcare',
|
||
enterpriseBackground: '某医疗机构成立于2008年，是一所综合性医院，设有临床科室30余个，床位1000余张。医院年门诊量超过100万人次，年住院量超过5万人次。',
|
||
informatizationStatus: {
|
||
overview: '医院已建立了完善的医院信息系统（HIS）、电子病历系统（EMR）、影像归档系统（PACS）等。核心业务系统运行在私有云平台。',
|
||
privateCloud: {
|
||
title: '医院信息系统',
|
||
description: '基于HIS、EMR、PACS等系统构建的医院信息系统，承载核心医疗服务。'
|
||
},
|
||
publicCloud: {
|
||
title: '数据分析平台',
|
||
description: '采用阿里云构建的数据分析平台，用于医疗数据分析、科研支持等。'
|
||
}
|
||
},
|
||
businessDataFlow: {
|
||
overview: '医院业务流程涵盖挂号、诊疗、检查、取药等环节，数据流贯穿整个诊疗流程。',
|
||
manufacturing: {
|
||
title: '挂号登记环节',
|
||
description: '患者挂号、登记，采集患者基本信息。'
|
||
},
|
||
logistics: {
|
||
title: '诊疗检查环节',
|
||
description: '医生诊疗、检查检验，采集诊疗数据。'
|
||
},
|
||
retail: {
|
||
title: '处方取药环节',
|
||
description: '开具处方、药品调配，采集处方数据。'
|
||
},
|
||
dataAggregation: {
|
||
title: '数据汇聚',
|
||
description: '各环节数据汇聚到数据仓库，进行统一存储和分析。'
|
||
}
|
||
},
|
||
storageDistribution: [
|
||
{ category: '临床数据', volume: '28.6 PB', storage_type: 'MySQL / Oracle', color: 'blue' },
|
||
{ category: '影像数据', volume: '22.4 PB', storage_type: '对象存储 / 分布式文件系统', color: 'purple' },
|
||
{ category: '检验数据', volume: '6.5 PB', storage_type: 'LIS系统数据库', color: 'amber' },
|
||
{ category: '其他数据', volume: '4.5 PB', storage_type: '混合存储', color: 'gray' }
|
||
],
|
||
dataSourceStructure: {
|
||
structured: 40,
|
||
semi_structured: 60
|
||
},
|
||
assets: [
|
||
{
|
||
id: 'asset1',
|
||
title: '电子病历数据',
|
||
subtitle: '核心数据资产',
|
||
composition: {
|
||
description: '包含患者就诊记录、诊断记录、处方记录等核心医疗数据。',
|
||
core_tables: ['Dim_Patient', 'Fact_Visit', 'Fact_Diagnosis', 'Fact_Prescription']
|
||
},
|
||
application_scenarios: {
|
||
description: '用于临床决策支持、医疗质量管理、科研分析等应用场景。'
|
||
},
|
||
compliance_risks: {
|
||
warnings: [
|
||
{
|
||
type: '医疗数据保护',
|
||
content: '该资产包含敏感医疗数据，需严格遵守医疗数据保护法律法规要求。',
|
||
highlights: ['符合医疗数据保护要求', '实施严格访问控制', '加强数据加密']
|
||
}
|
||
]
|
||
}
|
||
}
|
||
],
|
||
complianceRemediation: [
|
||
{ order: 1, category: '医疗数据合规', description: '确保符合医疗数据保护要求，建立医疗数据分类分级标准。', code_references: ['医疗机构管理条例', '基本医疗卫生与健康促进法'] },
|
||
{ order: 2, category: '患者隐私', description: '严格保护患者隐私信息，实施脱敏处理，确保患者隐私安全。', code_references: ['民法典', '个人信息保护法'] },
|
||
{ order: 3, category: '数据安全', description: '加强医疗数据安全防护，防止数据泄露和滥用。', code_references: ['数据安全法', '网络安全法'] }
|
||
],
|
||
technicalEvolution: {
|
||
title: '技术演进建议',
|
||
description: '建议引入医疗大数据、人工智能辅助诊断、医疗知识图谱等技术，提升医疗服务能力。',
|
||
technologies: ['医疗大数据', 'AI辅助诊断', '医疗知识图谱', '区块链医疗', '远程医疗']
|
||
},
|
||
valueDeepening: [
|
||
{ description: '深化医疗数据分析，支持临床决策和医疗质量管理。', scenarios: ['临床决策支持', '医疗质量管理'] },
|
||
{ description: '建设医疗科研平台，支持医学研究和药物研发。', scenarios: ['医疗科研', '药物研发'] }
|
||
]
|
||
}
|
||
};
|
||
|
||
// ==================== 表单处理 ====================
|
||
|
||
// 加载报告数据
|
||
function loadReportData(type) {
|
||
currentScenarioType = type;
|
||
|
||
// 更新行业选择
|
||
document.getElementById('industry').value = {
|
||
'retail': 'retail-fresh',
|
||
'finance': 'finance',
|
||
'healthcare': 'healthcare'
|
||
}[type];
|
||
|
||
// 更新数据盘点结果
|
||
const stats = {
|
||
'retail': { tables: 14582, fields: 245000, volume: '58 PB' },
|
||
'finance': { tables: 18234, fields: 312000, volume: '63 PB' },
|
||
'healthcare': { tables: 8756, fields: 156000, volume: '62 PB' }
|
||
};
|
||
|
||
document.getElementById('totalTables').value = stats[type].tables;
|
||
document.getElementById('totalFields').value = stats[type].fields;
|
||
document.getElementById('totalVolume').value = stats[type].volume;
|
||
|
||
// 更新场景
|
||
const scenarios = {
|
||
'retail': [
|
||
{ name: '精准会员营销', description: '基于用户画像实现千人千面营销' },
|
||
{ name: '智能库存补货', description: '基于历史销售数据预测需求，自动补货' },
|
||
{ name: '价格弹性分析', description: '分析价格变化对销量的影响' }
|
||
],
|
||
'finance': [
|
||
{ name: '智能风控', description: '基于机器学习模型，实时评估交易风险' },
|
||
{ name: '理财产品推荐', description: '基于客户风险偏好和资产情况，推荐合适的理财产品' },
|
||
{ name: '客户分群画像', description: '对客户进行精细化分群，制定差异化营销策略' }
|
||
],
|
||
'healthcare': [
|
||
{ name: '临床决策支持', description: '基于医疗数据和知识库，辅助医生进行临床决策' },
|
||
{ name: '医疗质量分析', description: '分析医疗服务质量，持续改进医疗质量' },
|
||
{ name: '科研数据分析', description: '支持医疗科研数据分析，助力医学研究' }
|
||
]
|
||
};
|
||
|
||
selectedScenarios = scenarios[type];
|
||
renderSelectedScenariosList();
|
||
|
||
showToast(`已加载${{ 'retail': '零售', 'finance': '金融', 'healthcare': '医疗' }[type]}场景配置`);
|
||
}
|
||
|
||
// 渲染选中的场景列表
|
||
function renderSelectedScenariosList() {
|
||
const container = document.getElementById('selectedScenariosList');
|
||
|
||
if (selectedScenarios.length === 0) {
|
||
container.innerHTML = '<p style="text-align: center; color: var(--text-muted); padding: 12px;">暂无场景</p>';
|
||
return;
|
||
}
|
||
|
||
let html = '';
|
||
selectedScenarios.forEach((scenario, index) => {
|
||
html += `
|
||
<div style="display: flex; align-items: center; padding: 8px 12px; background: var(--light-color); border-radius: var(--radius); margin-bottom: 8px;">
|
||
<div style="flex: 1;">
|
||
<div style="font-weight: 500; font-size: 13px;">${scenario.name}</div>
|
||
<div style="font-size: 11px; color: var(--text-muted);">${scenario.description}</div>
|
||
</div>
|
||
<button type="button" onclick="removeScenario(${index})" style="background: none; border: none; color: var(--danger-color); cursor: pointer; font-size: 18px;">×</button>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
container.innerHTML = html;
|
||
}
|
||
|
||
// 添加场景
|
||
function addScenario() {
|
||
const name = prompt('请输入场景名称:');
|
||
if (!name) return;
|
||
|
||
const description = prompt('请输入场景描述:') || '';
|
||
|
||
selectedScenarios.push({ name, description });
|
||
renderSelectedScenariosList();
|
||
}
|
||
|
||
// 移除场景
|
||
function removeScenario(index) {
|
||
selectedScenarios.splice(index, 1);
|
||
renderSelectedScenariosList();
|
||
}
|
||
|
||
// 重置表单
|
||
function resetForm() {
|
||
document.getElementById('reportForm').reset();
|
||
selectedScenarios = [];
|
||
renderSelectedScenariosList();
|
||
document.getElementById('reportArea').style.display = 'none';
|
||
document.getElementById('emptyState').style.display = 'block';
|
||
document.getElementById('requestInfo').style.display = 'block';
|
||
document.getElementById('responseInfo').style.display = 'none';
|
||
}
|
||
|
||
// 滚动到章节
|
||
function scrollToSection(sectionId) {
|
||
const element = document.getElementById(sectionId);
|
||
if (element) {
|
||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
|
||
// 更新导航按钮状态
|
||
document.querySelectorAll('.report-nav-btn').forEach(btn => btn.classList.remove('active'));
|
||
event.target.classList.add('active');
|
||
}
|
||
}
|
||
|
||
// 表单提交
|
||
document.getElementById('reportForm').addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
|
||
const projectName = document.getElementById('projectName').value;
|
||
if (!projectName) {
|
||
showToast('请输入项目名称');
|
||
return;
|
||
}
|
||
|
||
if (selectedScenarios.length === 0) {
|
||
showToast('请至少添加一个场景');
|
||
return;
|
||
}
|
||
|
||
// 获取表单数据
|
||
const requestData = {
|
||
project_info: {
|
||
project_name: projectName,
|
||
industry: document.getElementById('industry').value
|
||
},
|
||
inventory_data: {
|
||
total_tables: parseInt(document.getElementById('totalTables').value),
|
||
total_fields: parseInt(document.getElementById('totalFields').value),
|
||
total_data_volume: document.getElementById('totalVolume').value
|
||
},
|
||
value_data: {
|
||
selected_scenarios: selectedScenarios
|
||
},
|
||
options: {
|
||
language: 'zh-CN',
|
||
detail_level: document.getElementById('detailLevel').value,
|
||
generation_mode: 'full',
|
||
model: document.getElementById('model').value
|
||
}
|
||
};
|
||
|
||
// 显示请求数据
|
||
document.getElementById('requestJson').textContent = JSON.stringify(requestData, null, 2);
|
||
document.getElementById('responseInfo').style.display = 'none';
|
||
|
||
// 显示加载状态
|
||
document.getElementById('emptyState').style.display = 'none';
|
||
document.getElementById('reportArea').style.display = 'none';
|
||
showLoading('loadingArea');
|
||
|
||
try {
|
||
// 模拟API调用
|
||
await delay(3000);
|
||
|
||
// 生成模拟响应
|
||
const response = generateMockResponse(requestData);
|
||
|
||
// 显示结果
|
||
hideLoading('loadingArea', '');
|
||
document.getElementById('reportArea').style.display = 'block';
|
||
|
||
// 显示响应数据
|
||
document.getElementById('responseInfo').style.display = 'block';
|
||
document.getElementById('responseJson').textContent = JSON.stringify(response, null, 2);
|
||
|
||
// 渲染报告
|
||
renderReport(response);
|
||
|
||
showSuccess('loadingArea', '✅ 报告生成完成！');
|
||
setTimeout(() => {
|
||
document.getElementById('loadingArea').style.display = 'none';
|
||
}, 2000);
|
||
|
||
} catch (error) {
|
||
hideLoading('loadingArea', '');
|
||
showError('loadingArea', error.message);
|
||
}
|
||
});
|
||
|
||
// 生成模拟响应
|
||
function generateMockResponse(requestData) {
|
||
const reportData = mockReportData[currentScenarioType];
|
||
const now = new Date();
|
||
|
||
return {
|
||
header: {
|
||
project_name: reportData.projectName
|
||
},
|
||
section1: reportData,
|
||
section2: reportData,
|
||
section3: reportData,
|
||
section4: reportData,
|
||
generation_time: (Math.random() * 3 + 2).toFixed(2),
|
||
model_used: requestData.options.model
|
||
};
|
||
}
|
||
|
||
// 渲染报告
|
||
function renderReport(response) {
|
||
const reportData = response.section1;
|
||
const now = new Date();
|
||
const dateStr = now.getFullYear() + '年' + (now.getMonth() + 1) + '月' + now.getDate() + '日 ' +
|
||
String(now.getHours()).padStart(2, '0') + ':' + String(now.getMinutes()).padStart(2, '0');
|
||
|
||
// 报告头部
|
||
document.getElementById('reportDate').textContent = '生成时间：' + dateStr;
|
||
document.getElementById('reportProjectName').textContent = reportData.projectName;
|
||
|
||
// 章节一：企业数字化情况简介
|
||
document.getElementById('enterpriseBackground').textContent = reportData.enterpriseBackground;
|
||
document.getElementById('informatizationStatus').innerHTML = `
|
||
<p style="margin-bottom: 8px;"><strong>概述：</strong>${reportData.informatizationStatus.overview}</p>
|
||
<div style="padding: 12px; background: var(--light-color); border-radius: var(--radius); margin-top: 8px;">
|
||
<strong>私有云：</strong>${reportData.informatizationStatus.privateCloud.title}<br>
|
||
<span style="font-size: 12px; color: var(--text-muted);">${reportData.informatizationStatus.privateCloud.description}</span>
|
||
</div>
|
||
<div style="padding: 12px; background: var(--light-color); border-radius: var(--radius); margin-top: 8px;">
|
||
<strong>公有云：</strong>${reportData.informatizationStatus.publicCloud.title}<br>
|
||
<span style="font-size: 12px; color: var(--text-muted);">${reportData.informatizationStatus.publicCloud.description}</span>
|
||
</div>
|
||
`;
|
||
document.getElementById('businessDataFlow').innerHTML = `
|
||
<p style="margin-bottom: 8px;"><strong>概述：</strong>${reportData.businessDataFlow.overview}</p>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px;">
|
||
<div style="padding: 8px; background: var(--light-color); border-radius: var(--radius);">
|
||
<strong>${reportData.businessDataFlow.manufacturing.title}：</strong><br>
|
||
<span style="font-size: 12px; color: var(--text-muted);">${reportData.businessDataFlow.manufacturing.description}</span>
|
||
</div>
|
||
<div style="padding: 8px; background: var(--light-color); border-radius: var(--radius);">
|
||
<strong>${reportData.businessDataFlow.logistics.title}：</strong><br>
|
||
<span style="font-size: 12px; color: var(--text-muted);">${reportData.businessDataFlow.logistics.description}</span>
|
||
</div>
|
||
<div style="padding: 8px; background: var(--light-color); border-radius: var(--radius);">
|
||
<strong>${reportData.businessDataFlow.retail.title}：</strong><br>
|
||
<span style="font-size: 12px; color: var(--text-muted);">${reportData.businessDataFlow.retail.description}</span>
|
||
</div>
|
||
<div style="padding: 8px; background: var(--light-color); border-radius: var(--radius);">
|
||
<strong>${reportData.businessDataFlow.dataAggregation.title}：</strong><br>
|
||
<span style="font-size: 12px; color: var(--text-muted);">${reportData.businessDataFlow.dataAggregation.description}</span>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 章节二：数据资源统计
|
||
document.getElementById('totalDataVolume').textContent = reportData.storageDistribution.reduce((sum, item) => sum + parseFloat(item.volume), 0).toFixed(1) + ' PB';
|
||
document.getElementById('reportTotalTables').textContent = document.getElementById('totalTables').value;
|
||
document.getElementById('reportTotalFields').textContent = document.getElementById('totalFields').value;
|
||
|
||
// 存储分布
|
||
let storageHtml = '';
|
||
reportData.storageDistribution.forEach(item => {
|
||
storageHtml += `
|
||
<div class="storage-chart-item">
|
||
<div class="storage-color" style="background-color: ${item.color};"></div>
|
||
<div class="storage-info">
|
||
<div class="storage-name">${item.category}</div>
|
||
<div class="storage-volume">${item.volume} | ${item.storage_type}</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
document.getElementById('storageDistribution').innerHTML = storageHtml;
|
||
|
||
// 数据来源结构
|
||
document.getElementById('dataSourceStructure').innerHTML = `
|
||
<div style="display: flex; gap: 20px; align-items: center; justify-content: center; padding: 20px;">
|
||
<div style="text-align: center;">
|
||
<div style="font-size: 32px; font-weight: 600; color: var(--primary-color);">${reportData.dataSourceStructure.structured}%</div>
|
||
<div style="font-size: 12px; color: var(--text-muted);">结构化数据</div>
|
||
</div>
|
||
<div style="height: 60px; width: 2px; background-color: var(--border-color);"></div>
|
||
<div style="text-align: center;">
|
||
<div style="font-size: 32px; font-weight: 600; color: var(--warning-color);">${reportData.dataSourceStructure.semi_structured}%</div>
|
||
<div style="font-size: 12px; color: var(--text-muted);">半结构化数据</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 章节三：数据资产情况盘点
|
||
document.getElementById('assetOverview').innerHTML = `
|
||
<p style="margin-bottom: 8px;">共识别 <strong>${reportData.assets.length}</strong> 个核心数据资产：</p>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
|
||
`;
|
||
reportData.assets.forEach(asset => {
|
||
document.getElementById('assetOverview').innerHTML += `
|
||
<div style="padding: 12px; background: var(--light-color); border-radius: var(--radius); border-left: 3px solid var(--primary-color);">
|
||
<strong style="display: block; margin-bottom: 4px;">${asset.title}</strong>
|
||
<span style="font-size: 11px; color: var(--text-muted);">${asset.subtitle}</span>
|
||
</div>
|
||
`;
|
||
});
|
||
document.getElementById('assetOverview').innerHTML += '</div>';
|
||
|
||
// 资产构成
|
||
let assetCompositionHtml = '';
|
||
reportData.assets.forEach(asset => {
|
||
assetCompositionHtml += `
|
||
<div style="padding: 16px; background: var(--light-color); border-radius: var(--radius); margin-bottom: 12px;">
|
||
<strong style="display: block; margin-bottom: 8px;">${asset.title}</strong>
|
||
<div style="margin-bottom: 8px;"><strong>构成：</strong>${asset.composition.description}</div>
|
||
<div style="margin-bottom: 8px;">
|
||
<strong>核心表：</strong>
|
||
<div class="tag-list" style="margin-top: 4px;">
|
||
${asset.composition.core_tables.map(table => `<span class="tag">${table}</span>`).join('')}
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom: 8px;"><strong>应用场景：</strong>${asset.application_scenarios.description}</div>
|
||
</div>
|
||
`;
|
||
});
|
||
document.getElementById('assetComposition').innerHTML = assetCompositionHtml;
|
||
|
||
// 合规风险
|
||
let complianceHtml = '';
|
||
reportData.assets.forEach(asset => {
|
||
asset.compliance_risks.warnings.forEach(warning => {
|
||
complianceHtml += `
|
||
<div class="warning-box">
|
||
<div class="warning-title">⚠️ ${warning.type}</div>
|
||
<div class="warning-content" style="margin-bottom: 8px;">${warning.content}</div>
|
||
${warning.highlights ? `
|
||
<div style="margin-top: 8px;">
|
||
<strong>关键要点：</strong>
|
||
<ul style="margin: 4px 0 0 20px; font-size: 12px;">
|
||
${warning.highlights.map(h => `<li>${h}</li>`).join('')}
|
||
</ul>
|
||
</div>
|
||
` : ''}
|
||
</div>
|
||
`;
|
||
});
|
||
});
|
||
document.getElementById('complianceRisks').innerHTML = complianceHtml;
|
||
|
||
// 章节四：专家建议与下一步计划
|
||
let remediationHtml = '';
|
||
reportData.complianceRemediation.forEach(item => {
|
||
remediationHtml += `
|
||
<li class="suggestion-item">
|
||
<span class="suggestion-number">${item.order}</span>
|
||
<div>
|
||
<div style="font-weight: 500; margin-bottom: 4px;">${item.category}</div>
|
||
<div style="font-size: 13px;">${item.description}</div>
|
||
${item.code_references ? `
|
||
<div class="tag-list" style="margin-top: 4px;">
|
||
${item.code_references.map(ref => `<span class="tag" style="background-color: #ffebee; color: #c62828;">${ref}</span>`).join('')}
|
||
</div>
|
||
` : ''}
|
||
</div>
|
||
</li>
|
||
`;
|
||
});
|
||
document.getElementById('complianceRemediation').innerHTML = remediationHtml;
|
||
|
||
document.getElementById('technicalEvolution').innerHTML = `
|
||
<p style="margin-bottom: 12px;">${reportData.technicalEvolution.description}</p>
|
||
<div class="tag-list">
|
||
${reportData.technicalEvolution.technologies.map(tech => `<span class="tag" style="background-color: #e3f2fd; color: #1976d2;">${tech}</span>`).join('')}
|
||
</div>
|
||
`;
|
||
|
||
let deepeningHtml = '';
|
||
reportData.valueDeepening.forEach(item => {
|
||
deepeningHtml += `
|
||
<li class="suggestion-item">
|
||
<div style="font-size: 13px;">${item.description}</div>
|
||
${item.scenarios ? `
|
||
<div class="tag-list" style="margin-top: 4px;">
|
||
${item.scenarios.map(s => `<span class="tag">${s}</span>`).join('')}
|
||
</div>
|
||
` : ''}
|
||
</li>
|
||
`;
|
||
});
|
||
document.getElementById('valueDeepening').innerHTML = deepeningHtml;
|
||
|
||
// 报告页脚
|
||
document.getElementById('generationTime').textContent = dateStr;
|
||
document.getElementById('modelUsed').textContent = response.model_used;
|
||
}
|
||
|
||
// 初始化
|
||
loadReportData('retail');
|
||
</script>
|
||
</body>
|
||
</html>
|