863 lines
38 KiB
HTML
863 lines
38 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>沪深港通资金流向监控</title>
|
||
<!-- Bootstrap CSS -->
|
||
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="../static/css/hsgt_monitor.css">
|
||
<!-- 自定义样式 -->
|
||
|
||
</head>
|
||
<body>
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="/">股票估值分析工具</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="/">个股估值分析</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="/industry">行业估值分析</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="/hsgt">资金情况</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<div class="container-fluid py-4">
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<h2 class="text-center">沪深港通资金流向监控
|
||
<button id="refreshBtn" class="btn btn-sm btn-outline-primary refresh-btn">
|
||
<i class="bi bi-arrow-clockwise"></i> 刷新数据
|
||
</button>
|
||
</h2>
|
||
<p class="text-center update-time" id="updateTime"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 北向资金卡片 -->
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
北向资金流向 (单位:亿元)
|
||
</div>
|
||
<div class="card-body">
|
||
<p class="flow-direction text-center">提示：该走势图为陆股通指数成分股大单资金流向，非北向资金，但具备一定参考价值。</p>
|
||
<div class="row mb-3">
|
||
<div class="col-md-4">
|
||
<div class="stat-card" id="northTotal">
|
||
<div class="stat-value">--</div>
|
||
<div class="stat-title">北向资金净流入(亿元)</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="stat-card" id="northSH">
|
||
<div class="stat-value">--</div>
|
||
<div class="stat-title">沪股通净流入(亿元)</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="stat-card" id="northSZ">
|
||
<div class="stat-value">--</div>
|
||
<div class="stat-title">深股通净流入(亿元)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="northChart" class="chart-container"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 南向资金卡片 -->
|
||
<div class="col-md-6">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
南向资金流向 (单位:亿元)
|
||
</div>
|
||
<div class="card-body">
|
||
<p class="flow-direction text-center">从内地流入港股的资金</p>
|
||
<div class="row mb-3">
|
||
<div class="col-md-4">
|
||
<div class="stat-card" id="southTotal">
|
||
<div class="stat-value">--</div>
|
||
<div class="stat-title">南向资金净流入(亿元)</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="stat-card" id="southHKSH">
|
||
<div class="stat-value">--</div>
|
||
<div class="stat-title">沪市港股通净流入(亿元)</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="stat-card" id="southHKSZ">
|
||
<div class="stat-value">--</div>
|
||
<div class="stat-title">深市港股通净流入(亿元)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="southChart" class="chart-container"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 融资融券数据汇总信息 -->
|
||
<div class="row mt-3 mb-2">
|
||
<div class="col-12 text-center">
|
||
<p class="summary-text" id="summaryBalanceChangeDesc">--</p>
|
||
<p class="summary-text" id="summarySecuritiesChangeDesc">--</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 融资融券数据展示 -->
|
||
<div class="row mt-4">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header d-flex justify-content-between align-items-center">
|
||
<span>融资融券数据监控 (单位:亿元)</span>
|
||
<div class="btn-group" role="group">
|
||
<button type="button" class="btn btn-sm btn-outline-primary active" data-metric="total_rzrq_balance">融资融券余额合计</button>
|
||
<button type="button" class="btn btn-sm btn-outline-primary" data-metric="total_financing_buy">融资买入额合计</button>
|
||
<button type="button" class="btn btn-sm btn-outline-primary" data-metric="total_financing_balance">融资余额合计</button>
|
||
<button type="button" class="btn btn-sm btn-outline-primary" data-metric="financing_repayment">融资偿还</button>
|
||
<button type="button" class="btn btn-sm btn-outline-primary" data-metric="securities_balance">融券余额</button>
|
||
<button id="rzrqRefreshBtn" class="btn btn-sm btn-outline-secondary ms-2">
|
||
<i class="bi bi-arrow-clockwise"></i> 刷新
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="rzrqChart" class="chart-container"></div>
|
||
<p class="update-time text-center" id="rzrqUpdateTime"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 融资融券风险分析 -->
|
||
<!-- <div class="row mt-4">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
融资融券市场风险分析
|
||
</div>
|
||
<div class="card-body">
|
||
|
||
<div class="row mb-4">
|
||
<div class="col-md-12">
|
||
<div class="alert" id="overallRiskAlert">
|
||
<h5 class="alert-heading">市场综合风险评估: <span id="overallRiskLevel">加载中...</span></h5>
|
||
<p id="overallRiskDesc">正在分析融资融券数据，评估市场风险...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
|
||
<div class="col-md-6 mb-3">
|
||
<div class="card h-100">
|
||
<div class="card-header">
|
||
融资融券余额变化
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span>变化率:</span>
|
||
<span id="balanceChangeRate" class="fw-bold">--</span>
|
||
</div>
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span>风险等级:</span>
|
||
<span id="balanceRiskLevel">--</span>
|
||
</div>
|
||
<p id="balanceRiskDesc" class="mt-2 small text-muted">详细分析如下。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-3">
|
||
<div class="card h-100">
|
||
<div class="card-header">
|
||
融资偿还与买入比率
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span>平均比率:</span>
|
||
<span id="repayBuyRatio" class="fw-bold">--</span>
|
||
</div>
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span>风险等级:</span>
|
||
<span id="repayRiskLevel">--</span>
|
||
</div>
|
||
<p id="repayRiskDesc" class="mt-2 small">--</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-3">
|
||
<div class="card h-100">
|
||
<div class="card-header">
|
||
融券余额变化 (空头力量)
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span>变化率:</span>
|
||
<span id="securitiesChangeRate" class="fw-bold">--</span>
|
||
</div>
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span>风险等级:</span>
|
||
<span id="securitiesRiskLevel">--</span>
|
||
</div>
|
||
<p id="securitiesRiskDesc" class="mt-2 small text-muted">详细分析如下。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-3">
|
||
<div class="card h-100">
|
||
<div class="card-header">
|
||
融资占比分析
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span>融资占比:</span>
|
||
<span id="financingRatio" class="fw-bold">--</span>
|
||
</div>
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span>历史百分位:</span>
|
||
<span id="financingRatioPercentile">--</span>
|
||
</div>
|
||
<p class="mt-2 small text-muted">融资占比反映了市场中多头使用杠杆的程度。百分位数越高表示融资占比处于历史较高水平。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
|
||
<!-- 恐贪指数展示 -->
|
||
<div class="row mt-4">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header d-flex justify-content-between align-items-center">
|
||
<span>市场恐贪指数 (Fear & Greed Index)</span>
|
||
<button id="addFearGreedBtn" class="btn btn-sm btn-primary">
|
||
<i class="bi bi-plus-circle"></i> 新增数据
|
||
</button>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="row mb-3">
|
||
<div class="col-md-4">
|
||
<div class="stat-card" id="fearGreedValue">
|
||
<div class="stat-value">--</div>
|
||
<div class="stat-title">最新恐贪指数</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="stat-card" id="fearGreedStatus">
|
||
<div class="stat-value">--</div>
|
||
<div class="stat-title">市场情绪状态</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="stat-card" id="fearGreedDate">
|
||
<div class="stat-value">--</div>
|
||
<div class="stat-title">更新日期</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="fearGreedChart" class="chart-container"></div>
|
||
<p class="update-time text-center" id="fearGreedUpdateTime"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增恐贪指数数据的模态框 -->
|
||
<div class="modal fade" id="addFearGreedModal" tabindex="-1" aria-labelledby="addFearGreedModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="addFearGreedModalLabel">新增恐贪指数数据</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="addFearGreedForm">
|
||
<div class="mb-3">
|
||
<label for="indexValue" class="form-label">恐贪指数值 (0-100)</label>
|
||
<input type="number" class="form-control" id="indexValue" min="0" max="100" step="0.01" required>
|
||
<div class="form-text">输入0-100之间的数值，保留两位小数</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="tradingDate" class="form-label">交易日期</label>
|
||
<input type="date" class="form-control" id="tradingDate" required>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||
<button type="button" class="btn btn-primary" id="submitFearGreed">提交</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- JavaScript 库 -->
|
||
<script src="../static/js/jquery.min.js"></script>
|
||
<script src="../static/js/bootstrap.bundle.min.js"></script>
|
||
<script src="../static/js/echarts.min.js"></script>
|
||
<script src="../static/js/hsgt_monitor.js"></script>
|
||
|
||
<!-- 恐贪指数相关的JavaScript -->
|
||
<script>
|
||
// 初始化恐贪指数图表
|
||
let fearGreedChart = null;
|
||
let fearGreedIndexSelector = null;
|
||
let fearGreedChartData = null; // 存储恐贪指数数据
|
||
|
||
// 加载恐贪指数数据
|
||
function loadFearGreedData() {
|
||
$.ajax({
|
||
url: '/api/fear_greed/data',
|
||
type: 'GET',
|
||
dataType: 'json',
|
||
success: function(response) {
|
||
if (response.status === 'success') {
|
||
fearGreedChartData = response.data; // 存储恐贪指数数据
|
||
updateFearGreedUI(response.data);
|
||
|
||
// 初始化恐贪指数选择器，只在首次加载时初始化
|
||
if (!fearGreedIndexSelector) {
|
||
initFearGreedIndexSelector();
|
||
}
|
||
} else {
|
||
console.error('加载恐贪指数数据失败:', response.message);
|
||
}
|
||
},
|
||
error: function(xhr, status, error) {
|
||
console.error('请求恐贪指数数据失败:', error);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 更新恐贪指数UI
|
||
function updateFearGreedUI(data) {
|
||
// 更新统计卡片
|
||
if (data.latest) {
|
||
$('#fearGreedValue .stat-value').text(data.latest.index_value.toFixed(2));
|
||
$('#fearGreedStatus .stat-value').text(data.latest_status);
|
||
$('#fearGreedDate .stat-value').text(data.latest.trading_date);
|
||
|
||
// 根据状态设置颜色
|
||
const value = data.latest.index_value;
|
||
let statusColor;
|
||
|
||
if (value < 25) {
|
||
statusColor = '#d9534f'; // 红色，极度恐慌
|
||
} else if (value < 40) {
|
||
statusColor = '#f0ad4e'; // 橙色，恐慌
|
||
} else if (value < 50) {
|
||
statusColor = '#5bc0de'; // 浅蓝色，偏向恐慌
|
||
} else if (value < 60) {
|
||
statusColor = '#5cb85c'; // 绿色，中性
|
||
} else if (value < 75) {
|
||
statusColor = '#0275d8'; // 蓝色，偏向贪婪
|
||
} else if (value < 90) {
|
||
statusColor = '#f0ad4e'; // 橙色，贪婪
|
||
} else {
|
||
statusColor = '#d9534f'; // 红色，极度贪婪
|
||
}
|
||
|
||
$('#fearGreedStatus .stat-value').css('color', statusColor);
|
||
}
|
||
|
||
// 更新更新时间 - 显示最新数据的更新时间
|
||
$('#fearGreedUpdateTime').text('最后更新: ' + data.update_time);
|
||
|
||
// 初始化/更新图表
|
||
initFearGreedChart(data.dates, data.values);
|
||
}
|
||
|
||
// 初始化恐贪指数图表
|
||
function initFearGreedChart(dates, values) {
|
||
if (!fearGreedChart) {
|
||
fearGreedChart = echarts.init(document.getElementById('fearGreedChart'));
|
||
}
|
||
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function(params) {
|
||
const param = params[0];
|
||
const value = param.value;
|
||
let status;
|
||
|
||
if (value < 25) {
|
||
status = '极度恐慌';
|
||
} else if (value < 40) {
|
||
status = '恐慌';
|
||
} else if (value < 50) {
|
||
status = '偏向恐慌';
|
||
} else if (value < 60) {
|
||
status = '中性';
|
||
} else if (value < 75) {
|
||
status = '偏向贪婪';
|
||
} else if (value < 90) {
|
||
status = '贪婪';
|
||
} else {
|
||
status = '极度贪婪';
|
||
}
|
||
|
||
return `${param.axisValue}<br/>恐贪指数: ${value.toFixed(2)}<br/>状态: ${status}`;
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: dates
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
min: 0,
|
||
max: 100,
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
},
|
||
visualMap: {
|
||
show: false,
|
||
dimension: 1,
|
||
pieces: [
|
||
{gt: 0, lte: 25, color: '#d9534f'}, // 极度恐慌
|
||
{gt: 25, lte: 40, color: '#f0ad4e'}, // 恐慌
|
||
{gt: 40, lte: 50, color: '#5bc0de'}, // 偏向恐慌
|
||
{gt: 50, lte: 60, color: '#5cb85c'}, // 中性
|
||
{gt: 60, lte: 75, color: '#0275d8'}, // 偏向贪婪
|
||
{gt: 75, lte: 90, color: '#f0ad4e'}, // 贪婪
|
||
{gt: 90, lte: 100, color: '#d9534f'} // 极度贪婪
|
||
]
|
||
},
|
||
series: [
|
||
{
|
||
name: '恐贪指数',
|
||
type: 'line',
|
||
data: values,
|
||
markLine: {
|
||
silent: true,
|
||
lineStyle: {
|
||
color: '#999'
|
||
},
|
||
data: [
|
||
{
|
||
yAxis: 25,
|
||
label: {
|
||
formatter: '极度恐慌'
|
||
}
|
||
},
|
||
{
|
||
yAxis: 50,
|
||
label: {
|
||
formatter: '中性'
|
||
}
|
||
},
|
||
{
|
||
yAxis: 75,
|
||
label: {
|
||
formatter: '贪婪'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
fearGreedChart.setOption(option);
|
||
}
|
||
|
||
// 初始化恐贪指数选择器
|
||
function initFearGreedIndexSelector() {
|
||
fearGreedIndexSelector = new IndexSelector('fearGreedChart', {
|
||
// 获取图表当前显示的日期范围
|
||
getDateRange: function() {
|
||
// 获取恐贪指数图表的日期范围
|
||
if (fearGreedChartData && fearGreedChartData.dates && fearGreedChartData.dates.length) {
|
||
return {
|
||
startDate: fearGreedChartData.dates[0],
|
||
endDate: fearGreedChartData.dates[fearGreedChartData.dates.length - 1]
|
||
};
|
||
}
|
||
return { startDate: null, endDate: null };
|
||
},
|
||
// 指数数据更新时的回调
|
||
onChange: function(selectedIndices) {
|
||
updateFearGreedChartWithIndices(selectedIndices);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 将数据对齐到日期范围
|
||
function alignDataToDateRange(sourceDates, sourceValues, targetDates) {
|
||
const result = new Array(targetDates.length).fill(null);
|
||
const dateMap = {};
|
||
|
||
// 创建源数据日期到值的映射
|
||
sourceDates.forEach((date, index) => {
|
||
dateMap[date] = sourceValues[index];
|
||
});
|
||
|
||
// 映射到目标日期
|
||
targetDates.forEach((date, index) => {
|
||
if (dateMap[date] !== undefined) {
|
||
result[index] = dateMap[date];
|
||
}
|
||
});
|
||
|
||
return result;
|
||
}
|
||
|
||
// 更新图表时添加指数数据
|
||
function updateFearGreedChartWithIndices(indices) {
|
||
if (!fearGreedChart) return;
|
||
|
||
// 获取图表当前选项
|
||
const option = fearGreedChart.getOption();
|
||
|
||
// 保留原始恐贪指数系列
|
||
const originalSeries = option.series.filter(s => s.name === '恐贪指数');
|
||
|
||
// 清除所有系列，并重新添加原始恐贪指数系列
|
||
option.series = [...originalSeries];
|
||
|
||
// 添加指数数据
|
||
indices.forEach(index => {
|
||
if (!index.data || !index.data.dates) return;
|
||
|
||
// 将指数数据对齐到日期范围
|
||
const alignedData = alignDataToDateRange(index.data.dates, index.data.values, option.xAxis[0].data);
|
||
|
||
// 如果没有第二Y轴，创建新的Y轴用于指数
|
||
if (!option.yAxis.some(axis => axis.name === '指数值')) {
|
||
option.yAxis.push({
|
||
name: '指数值',
|
||
type: 'value',
|
||
position: 'right',
|
||
min: 'dataMin',
|
||
max: 'dataMax',
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
});
|
||
}
|
||
|
||
// 添加新的指数系列
|
||
option.series.push({
|
||
name: `${index.name}指数`,
|
||
type: 'line',
|
||
yAxisIndex: 1, // 使用第二个Y轴
|
||
data: alignedData,
|
||
symbol: 'none',
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: index.color
|
||
},
|
||
itemStyle: {
|
||
color: index.color
|
||
}
|
||
});
|
||
});
|
||
|
||
// 更新图表
|
||
option.legend = {
|
||
data: [
|
||
'恐贪指数',
|
||
...indices.map(i => `${i.name}指数`)
|
||
],
|
||
selected: {
|
||
'恐贪指数': true,
|
||
...indices.reduce((acc, index) => {
|
||
acc[`${index.name}指数`] = true;
|
||
return acc;
|
||
}, {})
|
||
}
|
||
};
|
||
|
||
fearGreedChart.setOption(option, true);
|
||
}
|
||
|
||
// 窗口大小改变时调整图表大小
|
||
window.addEventListener('resize', function() {
|
||
if (fearGreedChart) {
|
||
fearGreedChart.resize();
|
||
}
|
||
});
|
||
|
||
// 添加恐贪指数数据
|
||
function addFearGreedData() {
|
||
const indexValue = parseFloat($('#indexValue').val());
|
||
const tradingDate = $('#tradingDate').val();
|
||
|
||
if (isNaN(indexValue) || indexValue < 0 || indexValue > 100) {
|
||
alert('请输入有效的恐贪指数值(0-100)');
|
||
return;
|
||
}
|
||
|
||
if (!tradingDate) {
|
||
alert('请选择交易日期');
|
||
return;
|
||
}
|
||
|
||
$.ajax({
|
||
url: '/api/fear_greed/add',
|
||
type: 'POST',
|
||
contentType: 'application/json',
|
||
data: JSON.stringify({
|
||
index_value: indexValue,
|
||
trading_date: tradingDate
|
||
}),
|
||
success: function(response) {
|
||
if (response.status === 'success') {
|
||
// 关闭模态框
|
||
$('#addFearGreedModal').modal('hide');
|
||
// 重新加载数据
|
||
loadFearGreedData();
|
||
// 重置表单
|
||
$('#addFearGreedForm')[0].reset();
|
||
|
||
// 显示成功消息
|
||
// alert('恐贪指数数据添加成功！');
|
||
} else {
|
||
alert('添加失败: ' + response.message);
|
||
}
|
||
},
|
||
error: function(xhr, status, error) {
|
||
console.error('添加恐贪指数数据失败:', error);
|
||
alert('添加失败: ' + error);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 事件绑定
|
||
$(document).ready(function() {
|
||
// 加载恐贪指数数据
|
||
loadFearGreedData();
|
||
|
||
// 新增数据按钮点击事件
|
||
$('#addFearGreedBtn').click(function() {
|
||
// 设置默认日期为今天
|
||
$('#tradingDate').val(new Date().toISOString().split('T')[0]);
|
||
// 显示模态框
|
||
$('#addFearGreedModal').modal('show');
|
||
});
|
||
|
||
// 提交按钮点击事件
|
||
$('#submitFearGreed').click(function() {
|
||
addFearGreedData();
|
||
});
|
||
|
||
// 刷新按钮点击事件（与恐贪指数一起刷新）
|
||
$('#refreshBtn').click(function() {
|
||
loadFearGreedData();
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<!-- 指数选择器通用组件 -->
|
||
<script>
|
||
// 通用指数选择器组件
|
||
class IndexSelector {
|
||
constructor(targetChartId, options = {}) {
|
||
this.targetChartId = targetChartId;
|
||
this.targetChart = null;
|
||
this.indices = [];
|
||
this.selectedIndices = [];
|
||
this.colors = options.colors || ['#8A2BE2', '#FF1493', '#FF7F50', '#00CED1', '#32CD32'];
|
||
this.maxIndices = options.maxIndices || 3;
|
||
this.containerClass = options.containerClass || 'index-selector';
|
||
this.onChange = options.onChange || (() => {});
|
||
this.options = options;
|
||
|
||
// 创建选择器DOM元素
|
||
this.createSelectorDOM();
|
||
// 加载指数列表
|
||
this.loadIndicesList();
|
||
}
|
||
|
||
// 创建选择器DOM
|
||
createSelectorDOM() {
|
||
const container = document.createElement('div');
|
||
container.className = this.containerClass;
|
||
container.style.cssText = 'margin-left: 10px; display: inline-block;';
|
||
|
||
const select = document.createElement('select');
|
||
select.className = 'form-select form-select-sm';
|
||
select.id = `${this.targetChartId}-index-select`;
|
||
select.innerHTML = '<option value="">添加指数叠加...</option>';
|
||
|
||
container.appendChild(select);
|
||
|
||
// 添加到目标图表的header旁边
|
||
const chartHeader = document.querySelector(`#${this.targetChartId}`).closest('.card').querySelector('.card-header');
|
||
const btnGroup = chartHeader.querySelector('.btn-group') || chartHeader;
|
||
btnGroup.appendChild(container);
|
||
|
||
// 添加事件监听
|
||
select.addEventListener('change', (e) => this.handleSelectChange(e));
|
||
}
|
||
|
||
// 加载指数列表
|
||
loadIndicesList() {
|
||
fetch('/api/indices/list')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.status === 'success') {
|
||
this.indices = data.data;
|
||
this.updateSelectOptions();
|
||
}
|
||
})
|
||
.catch(error => console.error('加载指数列表失败:', error));
|
||
}
|
||
|
||
// 更新下拉选项
|
||
updateSelectOptions() {
|
||
const select = document.getElementById(`${this.targetChartId}-index-select`);
|
||
// 保留第一个选项
|
||
select.innerHTML = '<option value="">添加指数叠加...</option>';
|
||
|
||
// 添加未选择的指数到下拉列表
|
||
this.indices.forEach(index => {
|
||
if (!this.selectedIndices.some(i => i.code === index.code)) {
|
||
const option = document.createElement('option');
|
||
option.value = index.code;
|
||
option.textContent = index.name;
|
||
select.appendChild(option);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 处理选择变更
|
||
handleSelectChange(e) {
|
||
const indexCode = e.target.value;
|
||
if (!indexCode) return;
|
||
|
||
const index = this.indices.find(i => i.code === indexCode);
|
||
if (!index) return;
|
||
|
||
// 检查选择的指数数量限制
|
||
if (this.selectedIndices.length >= this.maxIndices) {
|
||
alert(`最多只能叠加${this.maxIndices}个指数!`);
|
||
e.target.value = '';
|
||
return;
|
||
}
|
||
|
||
// 添加到已选择列表
|
||
const colorIndex = this.selectedIndices.length % this.colors.length;
|
||
const selectedIndex = {
|
||
...index,
|
||
color: this.colors[colorIndex],
|
||
visible: true
|
||
};
|
||
|
||
this.selectedIndices.push(selectedIndex);
|
||
|
||
// 添加指数标签
|
||
this.addIndexLabel(selectedIndex);
|
||
|
||
// 加载并显示指数数据
|
||
this.loadIndexData(selectedIndex);
|
||
|
||
// 重置选择框
|
||
e.target.value = '';
|
||
this.updateSelectOptions();
|
||
}
|
||
|
||
// 添加指数标签
|
||
addIndexLabel(index) {
|
||
const container = document.querySelector(`#${this.targetChartId}`).closest('.card-body');
|
||
const labelsContainer = container.querySelector('.index-labels') || (() => {
|
||
const div = document.createElement('div');
|
||
div.className = 'index-labels d-flex flex-wrap mt-2';
|
||
container.insertBefore(div, container.firstChild);
|
||
return div;
|
||
})();
|
||
|
||
const label = document.createElement('div');
|
||
label.className = 'badge bg-light text-dark me-2 mb-2 p-2 d-flex align-items-center';
|
||
label.style.borderLeft = `3px solid ${index.color}`;
|
||
label.innerHTML = `
|
||
<span class="me-2">${index.name}</span>
|
||
<button type="button" class="btn-close btn-close-sm" aria-label="移除"></button>
|
||
`;
|
||
|
||
label.querySelector('.btn-close').addEventListener('click', () => {
|
||
this.removeIndex(index.code);
|
||
labelsContainer.removeChild(label);
|
||
});
|
||
|
||
labelsContainer.appendChild(label);
|
||
}
|
||
|
||
// 加载指数数据
|
||
loadIndexData(index) {
|
||
// 获取图表当前日期范围
|
||
const chartDates = this.options.getDateRange ?
|
||
this.options.getDateRange() :
|
||
{ startDate: null, endDate: null };
|
||
|
||
fetch(`/api/indices/data?code=${index.code}&start_date=${chartDates.startDate || ''}&end_date=${chartDates.endDate || ''}`)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.status === 'success') {
|
||
// 更新指数数据
|
||
index.data = data.data;
|
||
|
||
// 调用回调函数更新图表
|
||
this.onChange(this.selectedIndices);
|
||
}
|
||
})
|
||
.catch(error => console.error(`加载指数 ${index.name} 数据失败:`, error));
|
||
}
|
||
|
||
// 移除指数
|
||
removeIndex(indexCode) {
|
||
const index = this.selectedIndices.findIndex(i => i.code === indexCode);
|
||
if (index !== -1) {
|
||
this.selectedIndices.splice(index, 1);
|
||
this.updateSelectOptions();
|
||
|
||
// 调用回调函数更新图表
|
||
this.onChange(this.selectedIndices);
|
||
}
|
||
}
|
||
|
||
// 获取所有已选择的指数
|
||
getSelectedIndices() {
|
||
return [...this.selectedIndices];
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |