dekun/qihuo
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

行情K线：分类主力选择、图表指标与布局稳定

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-15 18:23:39 +08:00
parent 65992eb35e
commit 404872007f
8 changed files with 644 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+14 -1
View File
@@ -17,7 +17,7 @@ from flask import (
)
from werkzeug.security import check_password_hash, generate_password_hash
from symbols import search_symbols, ths_to_codes
from symbols import search_symbols, ths_to_codes, list_main_contracts_grouped
from contract_specs import calc_position_metrics
from fee_specs import (
calc_fee_breakdown,
@@ -381,10 +381,17 @@ def build_market_quote_payload(
codes = ths_to_codes(symbol)
if codes:
name = codes.get("name", symbol)
prev_close = None
if sina_code:
from market import fetch_raw_for_volume
raw = fetch_raw_for_volume(sina_code)
if raw and raw.get("prev_close") is not None:
prev_close = raw["prev_close"]
return {
"symbol": symbol,
"name": name,
"price": price,
"prev_close": prev_close,
}
@@ -639,6 +646,12 @@ def api_symbol_search():
return jsonify(search_symbols(q))
@app.route("/api/symbols/mains")
@login_required
def api_symbols_mains():
return jsonify(list_main_contracts_grouped())
@app.route("/api/key_prices")
@login_required
def api_key_prices():
kline_chart.py
+7 -1
View File
@@ -274,13 +274,19 @@ def fetch_market_klines(
except Exception as exc:
logger.warning("kline cache fallback failed %s %s: %s", chart_sym, p, exc)
api_bars = bars_to_api(bars)
prev_close = None
if len(api_bars) >= 2:
prev_close = api_bars[-2]["close"]
return {
"symbol": symbol,
"chart_symbol": chart_sym,
"period": p,
"chart_type": chart_type,
"count": len(bars),
"bars": bars_to_api(bars),
"bars": api_bars,
"prev_close": prev_close,
"source": source,
"cached_at": cached_at,
}
market.py
+17 -1
View File
@@ -66,7 +66,23 @@ def _fetch_sina_raw(sina_code: str) -> Optional[dict]:
return None
price = float(parts[8])
volume = float(parts[14]) if len(parts) > 14 and parts[14] else 0
return {"name": parts[0], "price": price, "volume": volume}
prev_close = None
if len(parts) > 9 and parts[9]:
try:
prev_close = float(parts[9])
except ValueError:
pass
if prev_close is None and len(parts) > 2 and parts[2]:
try:
prev_close = float(parts[2])
except ValueError:
pass
return {
"name": parts[0],
"price": price,
"volume": volume,
"prev_close": prev_close,
}
except Exception as exc:
logger.debug("sina fetch failed %s: %s", sina_code, exc)
return None
static/js/market.js
+393 -93
View File
@@ -1,13 +1,16 @@
(function () {
var chartEl = document.getElementById('market-chart');
var emptyEl = document.getElementById('market-chart-empty');
var wrapEl = chartEl && chartEl.parentElement;
var wrapEl = document.getElementById('market-chart-wrap');
var chart = null;
var currentPeriod = '15m';
var klineSource = null;
var streamActive = false;
var reconnectTimer = null;
var lastData = null;
var lastPrevClose = null;
var chartOpts = { prevClose: false, ma: false, gapDay: false };
var dataZoomBound = false;
function getSymbol() {
var hidden = document.getElementById('market-symbol-hidden');
@@ -38,6 +41,9 @@
area: dark ? 'rgba(76,194,255,0.12)' : 'rgba(37,99,235,0.1)',
slider: dark ? '#1e2640' : '#cbd5e1',
sliderFill: dark ? '#4cc2ff' : '#2563eb',
ma21: dark ? '#ffb347' : '#d97706',
ma55: dark ? '#c084fc' : '#7c3aed',
prevClose: dark ? '#fbbf24' : '#b45309',
};
}
@@ -57,6 +63,148 @@
return false;
}
function calcMA(period, closes) {
var result = [];
for (var i = 0; i < closes.length; i++) {
if (i < period - 1) {
result.push(null);
continue;
}
var sum = 0;
for (var j = 0; j < period; j++) sum += closes[i - j];
result.push(+(sum / period).toFixed(4));
}
return result;
}
function findMaCrosses(ma21, ma55) {
var points = [];
for (var i = 1; i < ma21.length; i++) {
if (ma21[i] == null || ma55[i] == null || ma21[i - 1] == null || ma55[i - 1] == null) continue;
var prev = ma21[i - 1] - ma55[i - 1];
var curr = ma21[i] - ma55[i];
if (prev <= 0 && curr > 0) points.push({ i: i, type: 'golden' });
if (prev >= 0 && curr < 0) points.push({ i: i, type: 'death' });
}
return points;
}
function getDefaultZoomStart() {
return currentPeriod === 'timeshare' ? 60 : 75;
}
function getZoomRange() {
if (!chart) return { start: getDefaultZoomStart(), end: 100 };
var opt = chart.getOption();
if (opt && opt.dataZoom && opt.dataZoom.length) {
var z = opt.dataZoom[0];
if (z.start != null && z.end != null) return { start: z.start, end: z.end };
}
return { start: getDefaultZoomStart(), end: 100 };
}
function visibleIndices(bars, zoom) {
var n = bars.length;
if (!n) return { start: 0, end: 0 };
var start = Math.floor(n * zoom.start / 100);
var end = Math.min(n - 1, Math.ceil(n * zoom.end / 100) - 1);
if (end < start) end = start;
return { start: start, end: end };
}
function computeVisibleHL(bars, startIdx, endIdx) {
var maxH = -Infinity;
var minL = Infinity;
var maxI = startIdx;
var minI = startIdx;
for (var i = startIdx; i <= endIdx; i++) {
var b = bars[i];
if (!b) continue;
if (b.high > maxH) { maxH = b.high; maxI = i; }
if (b.low < minL) { minL = b.low; minI = i; }
}
if (maxH === -Infinity) return null;
return { maxH: maxH, minL: minL, maxI: maxI, minI: minI };
}
function buildHLMarkPoint(hl, c) {
if (!hl) return { data: [] };
return {
symbol: 'circle',
symbolSize: 6,
data: [
{
name: '高',
xAxis: hl.maxI,
yAxis: hl.maxH,
value: hl.maxH.toFixed(2),
itemStyle: { color: c.up },
label: {
show: true,
formatter: '高 ' + hl.maxH.toFixed(2),
color: c.up,
fontSize: 11,
position: 'top',
},
},
{
name: '低',
xAxis: hl.minI,
yAxis: hl.minL,
value: hl.minL.toFixed(2),
itemStyle: { color: c.down },
label: {
show: true,
formatter: '低 ' + hl.minL.toFixed(2),
color: c.down,
fontSize: 11,
position: 'bottom',
},
},
],
};
}
function buildMaCrossMarkPoint(crosses, bars, c) {
if (!crosses.length) return { data: [] };
return {
symbol: 'pin',
symbolSize: 28,
data: crosses.map(function (p) {
var b = bars[p.i];
return {
name: p.type === 'golden' ? '金叉' : '死叉',
xAxis: p.i,
yAxis: b ? b.close : 0,
itemStyle: { color: p.type === 'golden' ? c.up : c.down },
label: {
show: true,
formatter: p.type === 'golden' ? '金叉' : '死叉',
fontSize: 10,
color: p.type === 'golden' ? c.up : c.down,
},
};
}),
};
}
function buildPrevCloseMarkLine(prevClose, c) {
if (prevClose == null) return { data: [] };
var v = Number(prevClose);
return {
silent: true,
symbol: 'none',
lineStyle: { color: c.prevClose, type: 'dashed', width: 1 },
label: {
show: true,
formatter: '昨收 ' + v.toFixed(2),
color: c.prevClose,
fontSize: 10,
},
data: [{ yAxis: v }],
};
}
function initChart() {
if (!chartEl || !window.echarts) return;
chart = echarts.init(chartEl);
@@ -72,8 +220,28 @@
});
}
function bindDataZoomHL() {
if (!chart || dataZoomBound) return;
dataZoomBound = true;
chart.on('dataZoom', function () {
updateVisibleHLMark();
});
}
function updateVisibleHLMark() {
if (!chart || !lastData || !lastData.bars) return;
var bars = lastData.bars;
var zoom = getZoomRange();
var idx = visibleIndices(bars, zoom);
var hl = computeVisibleHL(bars, idx.start, idx.end);
var c = themeColors();
chart.setOption({
series: [{ id: 'main', markPoint: buildHLMarkPoint(hl, c) }],
});
}
function getDataZoom(c, preserve) {
var defStart = currentPeriod === 'timeshare' ? 60 : 75;
var defStart = getDefaultZoomStart();
var zoom = [
{
type: 'inside',
@@ -116,19 +284,61 @@
return zoom;
}
function mapSeriesData(bars, values, gapDay) {
if (!gapDay) return values;
return bars.map(function (b, i) {
var v = values[i];
if (v == null || b.timestamp == null) return v;
return [b.timestamp, v];
});
}
function renderChart(data, preserveZoom) {
if (!chart) return;
lastData = data;
if (data.prev_close != null) lastPrevClose = data.prev_close;
var c = themeColors();
var bars = data.bars || [];
var times = bars.map(function (b) { return b.time; });
var isLine = data.chart_type === 'line' || data.period === 'timeshare';
var gapDay = chartOpts.gapDay;
var dataZoom = getDataZoom(c, preserveZoom);
var zoom = preserveZoom ? getZoomRange() : { start: dataZoom[0].start, end: dataZoom[0].end };
var vIdx = visibleIndices(bars, zoom);
var hl = computeVisibleHL(bars, vIdx.start, vIdx.end);
var closes = bars.map(function (b) { return b.close; });
var ma21 = chartOpts.ma ? calcMA(21, closes) : null;
var ma55 = chartOpts.ma ? calcMA(55, closes) : null;
var crosses = chartOpts.ma ? findMaCrosses(ma21, ma55) : [];
var prevCloseVal = lastPrevClose != null ? lastPrevClose : data.prev_close;
var showPrev = chartOpts.prevClose && prevCloseVal != null;
var grids = [
{ left: 56, right: 20, top: 44, height: '50%' },
{ left: 56, right: 20, top: '66%', height: '14%' },
{ left: 56, right: 24, top: 44, height: '50%' },
{ left: 56, right: 24, top: '66%', height: '14%' },
];
var xAxisType = gapDay ? 'time' : 'category';
var xAxis0 = {
type: xAxisType,
gridIndex: 0,
boundaryGap: gapDay ? false : true,
axisLabel: { color: c.text, fontSize: 10 },
axisLine: { lineStyle: { color: c.grid } },
};
var xAxis1 = {
type: xAxisType,
gridIndex: 1,
boundaryGap: gapDay ? false : true,
axisLabel: { show: false },
axisLine: { lineStyle: { color: c.grid } },
};
if (!gapDay) {
xAxis0.data = times;
xAxis1.data = times;
}
var base = {
backgroundColor: c.bg,
animation: false,
@@ -136,98 +346,139 @@
axisPointer: { link: [{ xAxisIndex: 'all' }] },
dataZoom: dataZoom,
grid: grids,
xAxis: [
{ type: 'category', data: times, gridIndex: 0, axisLabel: { color: c.text, fontSize: 10 }, axisLine: { lineStyle: { color: c.grid } } },
{ type: 'category', data: times, gridIndex: 1, axisLabel: { show: false }, axisLine: { lineStyle: { color: c.grid } } },
],
xAxis: [xAxis0, xAxis1],
yAxis: [
{ scale: true, gridIndex: 0, splitLine: { lineStyle: { color: c.grid } }, axisLabel: { color: c.text } },
{ scale: true, gridIndex: 1, splitLine: { show: false }, axisLabel: { color: c.text, fontSize: 10 }, splitNumber: 2 },
],
};
if (isLine) {
var closes = bars.map(function (b) { return b.close; });
var vols = bars.map(function (b) { return b.volume; });
chart.setOption(Object.assign(base, {
series: [
{
name: '价格',
type: 'line',
data: closes,
smooth: true,
showSymbol: false,
lineStyle: { width: 1.5, color: c.line },
areaStyle: { color: c.area },
xAxisIndex: 0,
yAxisIndex: 0,
},
{
name: '成交量',
type: 'bar',
data: vols,
itemStyle: { color: c.area },
xAxisIndex: 1,
yAxisIndex: 1,
},
],
}), true);
} else {
var candle = bars.map(function (b) { return [b.open, b.close, b.low, b.high]; });
var vols = bars.map(function (b) {
var up = b.close >= b.open;
return {
value: b.volume,
itemStyle: { color: up ? c.up : c.down, opacity: 0.65 },
};
});
chart.setOption(Object.assign(base, {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' },
formatter: function (params) {
var idx = params[0] && params[0].dataIndex;
if (idx == null || !bars[idx]) return '';
var b = bars[idx];
return [
b.time,
'开 ' + b.open,
'高 ' + b.high,
'低 ' + b.low,
'收 ' + b.close,
'量 ' + b.volume,
].join('<br/>');
},
},
series: [
{
name: 'K线',
type: 'candlestick',
data: candle,
itemStyle: {
color: c.up,
color0: c.down,
borderColor: c.up,
borderColor0: c.down,
},
xAxisIndex: 0,
yAxisIndex: 0,
},
{
name: '成交量',
type: 'bar',
data: vols,
xAxisIndex: 1,
yAxisIndex: 1,
},
],
}), true);
var series = [];
var mainMark = {
markPoint: buildHLMarkPoint(hl, c),
};
if (showPrev) mainMark.markLine = buildPrevCloseMarkLine(prevCloseVal, c);
if (chartOpts.ma && crosses.length) {
var crossMp = buildMaCrossMarkPoint(crosses, bars, c);
mainMark.markPoint.data = mainMark.markPoint.data.concat(crossMp.data);
}
if (isLine) {
var lineData = mapSeriesData(bars, closes, gapDay);
series.push({
id: 'main',
name: '价格',
type: 'line',
data: lineData,
smooth: true,
showSymbol: false,
lineStyle: { width: 1.5, color: c.line },
areaStyle: { color: c.area },
xAxisIndex: 0,
yAxisIndex: 0,
markPoint: mainMark.markPoint,
markLine: mainMark.markLine,
});
} else {
var candle = bars.map(function (b) {
if (gapDay && b.timestamp) {
return [b.timestamp, b.open, b.close, b.low, b.high];
}
return [b.open, b.close, b.low, b.high];
});
series.push({
id: 'main',
name: 'K线',
type: 'candlestick',
data: candle,
itemStyle: {
color: c.up,
color0: c.down,
borderColor: c.up,
borderColor0: c.down,
},
xAxisIndex: 0,
yAxisIndex: 0,
markPoint: mainMark.markPoint,
markLine: mainMark.markLine,
});
}
if (chartOpts.ma && ma21 && ma55) {
series.push({
id: 'ma21',
name: 'MA21',
type: 'line',
data: mapSeriesData(bars, ma21, gapDay),
smooth: true,
showSymbol: false,
lineStyle: { width: 1, color: c.ma21 },
xAxisIndex: 0,
yAxisIndex: 0,
});
series.push({
id: 'ma55',
name: 'MA55',
type: 'line',
data: mapSeriesData(bars, ma55, gapDay),
smooth: true,
showSymbol: false,
lineStyle: { width: 1, color: c.ma55 },
xAxisIndex: 0,
yAxisIndex: 0,
});
}
var vols = bars.map(function (b) {
var up = b.close >= b.open;
var val = {
value: b.volume,
itemStyle: { color: up ? c.up : c.down, opacity: 0.65 },
};
if (gapDay && b.timestamp) {
return { value: [b.timestamp, b.volume], itemStyle: val.itemStyle };
}
return val;
});
series.push({
id: 'volume',
name: '成交量',
type: 'bar',
data: vols,
xAxisIndex: 1,
yAxisIndex: 1,
});
if (!isLine) {
base.tooltip = {
trigger: 'axis',
axisPointer: { type: 'cross' },
formatter: function (params) {
var idx = params[0] && params[0].dataIndex;
if (idx == null || !bars[idx]) return '';
var b = bars[idx];
var lines = [b.time, '开 ' + b.open, '高 ' + b.high, '低 ' + b.low, '收 ' + b.close, '量 ' + b.volume];
if (ma21 && ma21[idx] != null) lines.push('MA21 ' + ma21[idx]);
if (ma55 && ma55[idx] != null) lines.push('MA55 ' + ma55[idx]);
return lines.join('<br/>');
},
};
}
chart.setOption(Object.assign(base, { series: series }), true);
var title = (data.chart_symbol || data.symbol || '') + ' · ' + periodLabel(data.period);
chart.setOption({
title: { text: title, left: 12, top: 8, textStyle: { color: c.title, fontSize: 13, fontWeight: 600 } },
legend: chartOpts.ma ? {
data: ['MA21', 'MA55'],
top: 8,
right: 12,
textStyle: { color: c.text, fontSize: 10 },
} : { show: false },
});
bindDataZoomHL();
}
function periodLabel(key) {
@@ -239,15 +490,11 @@
}
function hideEmptyOverlay() {
if (emptyEl) emptyEl.style.display = '';
if (wrapEl) wrapEl.classList.add('has-data');
}
function showEmptyOverlay(text) {
if (emptyEl) {
emptyEl.textContent = text;
emptyEl.style.display = 'flex';
}
if (emptyEl) emptyEl.textContent = text;
if (wrapEl) wrapEl.classList.remove('has-data');
}
@@ -257,8 +504,14 @@
btn.disabled = on;
btn.textContent = on ? '连接中…' : '查看';
}
if (on) showEmptyOverlay('连接中…');
else if (lastData) hideEmptyOverlay();
if (!wrapEl) return;
if (on && !lastData) {
wrapEl.classList.add('loading');
showEmptyOverlay('请选择合约并点击「查看」');
} else {
wrapEl.classList.remove('loading');
if (lastData) hideEmptyOverlay();
}
}
function updateRefreshHint(disconnected) {
@@ -284,6 +537,16 @@
}
}
function updatePrevCloseDisplay(val) {
var prevEl = document.getElementById('market-quote-prev');
if (!prevEl) return;
if (val != null && !isNaN(Number(val))) {
prevEl.textContent = '昨收 ' + Number(val).toFixed(2);
} else {
prevEl.textContent = '';
}
}
function applyQuote(data) {
var priceEl = document.getElementById('market-quote-price');
var nameEl = document.getElementById('market-quote-name');
@@ -291,6 +554,11 @@
if (priceEl) {
priceEl.textContent = data.price != null ? Number(data.price).toFixed(2) : '—';
}
if (data.prev_close != null) {
lastPrevClose = data.prev_close;
updatePrevCloseDisplay(data.prev_close);
if (chartOpts.prevClose && lastData) renderChart(lastData, true);
}
}
function stopKlineStream() {
@@ -340,6 +608,7 @@
hideEmptyOverlay();
renderChart(data, lastData !== null);
updateQuoteMeta(data);
if (data.prev_close != null) updatePrevCloseDisplay(data.prev_close);
updateRefreshHint(false);
setLoading(false);
} catch (err) { /* ignore */ }
@@ -392,8 +661,7 @@
function resetDataZoom() {
if (!chart) return;
var start = currentPeriod === 'timeshare' ? 60 : 75;
chart.dispatchAction({ type: 'dataZoom', start: start, end: 100 });
chart.dispatchAction({ type: 'dataZoom', start: getDefaultZoomStart(), end: 100 });
}
function bindPeriodTabs() {
@@ -418,10 +686,35 @@
if (zoomReset) zoomReset.addEventListener('click', resetDataZoom);
}
function bindChartOptions() {
var prevCb = document.getElementById('chart-opt-prev-close');
var maCb = document.getElementById('chart-opt-ma');
var gapCb = document.getElementById('chart-opt-gap-day');
if (prevCb) {
prevCb.addEventListener('change', function () {
chartOpts.prevClose = prevCb.checked;
if (lastData) renderChart(lastData, true);
});
}
if (maCb) {
maCb.addEventListener('change', function () {
chartOpts.ma = maCb.checked;
if (lastData) renderChart(lastData, true);
});
}
if (gapCb) {
gapCb.addEventListener('change', function () {
chartOpts.gapDay = gapCb.checked;
if (lastData) renderChart(lastData, false);
});
}
}
document.addEventListener('DOMContentLoaded', function () {
initChart();
bindPeriodTabs();
bindZoomButtons();
bindChartOptions();
var active = document.querySelector('.period-tab.active');
if (active) currentPeriod = active.getAttribute('data-period') || '15m';
@@ -431,6 +724,13 @@
var hidden = document.getElementById('market-symbol-hidden');
var input = document.getElementById('market-symbol-input');
if (input) {
input.addEventListener('symbol-selected', function () {
lastPrevClose = null;
updatePrevCloseDisplay(null);
loadKline(true);
});
}
if (hidden && hidden.value) {
if (input && !input.value) input.value = hidden.value;
loadKline(true);
static/js/symbol.js
+96 -11
View File
@@ -9,6 +9,16 @@
return item.input_label || (item.name + ' ' + item.ths_code);
}
function itemMatchesQuery(item, qLower) {
if (!qLower) return true;
var hay = (
item.name + ' ' + item.ths_code + ' ' +
(item.display || '') + ' ' + (item.contract || '') + ' ' +
(item.exchange || '')
).toLowerCase();
return hay.indexOf(qLower) >= 0;
}
function initSymbolInput(wrapper) {
const input = wrapper.querySelector('.symbol-input');
const hiddenThs = wrapper.querySelector('input[name="symbol"]');
@@ -17,9 +27,12 @@
const hiddenSina = wrapper.querySelector('input[name="sina_code"]');
const dropdown = wrapper.querySelector('.symbol-dropdown');
const selectedEl = wrapper.querySelector('.symbol-selected');
const isMarketPicker = wrapper.classList.contains('market-symbol-wrap');
let timer = null;
let abortCtrl = null;
const cache = new Map();
let mainsCache = null;
let mainsLoading = false;
function hideDropdown() {
dropdown.classList.remove('show');
@@ -34,6 +47,28 @@
if (hiddenSina) hiddenSina.value = item.sina_code || '';
selectedEl.textContent = formatSub(item);
hideDropdown();
if (isMarketPicker) {
input.dispatchEvent(new CustomEvent('symbol-selected', { detail: item }));
}
}
function buildOptionEl(item) {
const div = document.createElement('div');
div.className = 'symbol-option';
if (item.near_expiry) {
div.classList.add('near-expiry');
}
var label = item.display || (item.name + ' ' + item.ths_code);
if (item.near_expiry) {
label += ' <span class="near-expiry-tag">临期</span>';
}
div.innerHTML = label +
'<div class="sub">' + formatSub(item) + '</div>';
div.addEventListener('mousedown', function (e) {
e.preventDefault();
selectItem(item);
});
return div;
}
function renderItems(items) {
@@ -42,20 +77,57 @@
dropdown.innerHTML = '<div class="symbol-option">无匹配，可输入同花顺代码如 ag2608</div>';
} else {
items.forEach(function (item) {
const div = document.createElement('div');
div.className = 'symbol-option';
div.innerHTML = item.display +
'<div class="sub">' + formatSub(item) + '</div>';
div.addEventListener('mousedown', function (e) {
e.preventDefault();
selectItem(item);
});
dropdown.appendChild(div);
dropdown.appendChild(buildOptionEl(item));
});
}
dropdown.classList.add('show');
}
function renderGrouped(groups, filterQ) {
dropdown.innerHTML = '';
const qLower = (filterQ || '').trim().toLowerCase();
let any = false;
groups.forEach(function (group) {
const items = group.items.filter(function (item) {
return itemMatchesQuery(item, qLower);
});
if (!items.length) return;
any = true;
const head = document.createElement('div');
head.className = 'symbol-group-head';
head.textContent = group.category;
dropdown.appendChild(head);
items.forEach(function (item) {
dropdown.appendChild(buildOptionEl(item));
});
});
if (!any) {
dropdown.innerHTML = '<div class="symbol-option">无匹配品种，可输入合约代码如 ag2608</div>';
}
dropdown.classList.add('show');
}
function showMarketMains(filterQ) {
if (mainsCache) {
renderGrouped(mainsCache, filterQ);
return;
}
if (mainsLoading) return;
mainsLoading = true;
fetch('/api/symbols/mains')
.then(function (r) { return r.json(); })
.then(function (groups) {
mainsCache = groups;
renderGrouped(groups, filterQ);
})
.catch(function () {
hideDropdown();
})
.finally(function () {
mainsLoading = false;
});
}
function search(q) {
if (cache.has(q)) {
renderItems(cache.get(q));
@@ -87,12 +159,20 @@
selectedEl.textContent = '';
const q = input.value.trim();
if (!q) {
hideDropdown();
if (isMarketPicker) {
showMarketMains('');
} else {
hideDropdown();
}
return;
}
clearTimeout(timer);
timer = setTimeout(function () {
search(q);
if (isMarketPicker) {
showMarketMains(q);
} else {
search(q);
}
}, 120);
});
@@ -102,6 +182,10 @@
input.addEventListener('focus', function () {
const q = input.value.trim();
if (isMarketPicker) {
showMarketMains(q);
return;
}
if (q && !hiddenThs.value) {
search(q);
}
@@ -113,6 +197,7 @@
document.querySelectorAll('form').forEach(function (form) {
if (!form.querySelector('.symbol-wrap')) return;
if (form.id === 'market-form') return;
form.addEventListener('submit', function (e) {
const ths = form.querySelector('input[name="symbol"]');
const market = form.querySelector('input[name="market_code"]');
symbols.py
+66
View File
@@ -5,6 +5,7 @@
import re
import threading
import time
from collections import defaultdict
from concurrent.futures import ThreadPoolExecutor, as_completed
from datetime import date
from typing import Optional
@@ -64,6 +65,7 @@ PRODUCTS = [
{"name": "中证1000", "ths": "IM", "sina": "IM", "exchange": "中金所", "ex": "CFFEX"},
]
EXCHANGE_ORDER = ["上期所", "上期能源", "大商所", "郑商所", "中金所"]
_MAIN_CACHE: dict[str, tuple[float, dict]] = {}
_CACHE_TTL = 300
_main_index_lock = threading.Lock()
@@ -167,6 +169,47 @@ def ths_to_sina_code(ths_code: str) -> Optional[str]:
return codes["sina_code"] if codes else None
def parse_contract_year_month(ths_code: str) -> Optional[tuple[int, int]]:
"""从同花顺合约代码解析交割年月。"""
code = (ths_code or "").strip()
if not code or "888" in code:
return None
m4 = re.match(r"^([A-Za-z]+)(\d{4})$", code)
if m4:
digits = m4.group(2)
year = 2000 + int(digits[:2])
month = int(digits[2:])
if 1 <= month <= 12:
return year, month
m3 = re.match(r"^([A-Za-z]+)(\d{3})$", code)
if m3:
letters, digits = m3.group(1), m3.group(2)
month = int(digits[1:])
if not 1 <= month <= 12:
return None
y_digit = int(digits[0])
year = date.today().year
decade = year // 10 * 10
candidate = decade + y_digit
if candidate < year - 1:
candidate += 10
product = _find_product_by_letters(letters)
if product:
return candidate, month
return None
def is_near_expiry_main(ths_code: str) -> bool:
"""主力合约交割月为当月或下月时视为临期。"""
ym = parse_contract_year_month(ths_code)
if not ym:
return False
cy, cm = ym
today = date.today()
months_ahead = (cy - today.year) * 12 + (cm - today.month)
return months_ahead <= 1
def _make_symbol_item(product: dict, year: int, month: int, volume: float) -> dict:
ths = build_ths_code(product, year, month)
name = product["name"]
@@ -238,6 +281,7 @@ def _enrich_item(item: dict) -> dict:
out = dict(item)
if not out.get("input_label"):
out["input_label"] = f"{out.get('name', '')} {out.get('ths_code', '')}".strip()
out["near_expiry"] = is_near_expiry_main(out.get("ths_code", ""))
return out
@@ -351,6 +395,28 @@ def search_symbols(query: str) -> list:
return results
def list_main_contracts_grouped() -> list[dict]:
"""按交易所分类返回全部品种主力合约（行情页下拉用）。"""
with _main_index_lock:
index = dict(_main_index)
index_ready = bool(index)
buckets: dict[str, list] = defaultdict(list)
for p in PRODUCTS:
main = index.get(p["sina"])
if not main and not index_ready:
main = _stub_main_contract(p)
if main:
buckets[p["exchange"]].append(_enrich_item(main))
groups: list[dict] = []
for cat in EXCHANGE_ORDER:
items = buckets.get(cat)
if items:
groups.append({"category": cat, "items": items})
return groups
_start_warm_thread()
templates/base.html
+13
View File
@@ -294,6 +294,19 @@
.symbol-option{padding:.65rem 1rem;cursor:pointer;font-size:.85rem;border-bottom:1px solid var(--table-border)}
.symbol-option:hover{background:var(--list-item-bg)}
.symbol-option .sub{font-size:.75rem;color:var(--text-muted);margin-top:2px}
.symbol-option.near-expiry{color:#ff6b7a}
html[data-theme="light"] .symbol-option.near-expiry{color:#dc2626}
.symbol-option.near-expiry .sub{color:inherit;opacity:.85}
.near-expiry-tag{
font-size:.68rem;padding:.1rem .35rem;border-radius:4px;
background:rgba(255,107,122,.15);color:inherit;font-weight:600;
}
html[data-theme="light"] .near-expiry-tag{background:rgba(220,38,38,.12)}
.symbol-group-head{
padding:.4rem .85rem;font-size:.72rem;font-weight:600;
color:var(--text-muted);background:var(--card-inner);
border-bottom:1px solid var(--table-border);position:sticky;top:0;
}
.symbol-selected{font-size:.75rem;color:var(--accent);margin-top:4px}
.check-row{display:flex;flex-wrap:wrap;gap:1rem;margin:.75rem 0}
.check-row label{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--text-muted);cursor:pointer}
templates/market.html
+38 -7
View File
@@ -6,7 +6,7 @@
<h2>行情 K 线</h2>
<form class="market-toolbar" id="market-form" onsubmit="return false;">
<div class="symbol-wrap market-symbol-wrap">
<input type="text" class="symbol-input" id="market-symbol-input" placeholder="输入品种或合约，如 ag2608" autocomplete="off" value="{{ symbol }}">
<input type="text" class="symbol-input" id="market-symbol-input" placeholder="点击选择主力合约，或输入搜索" autocomplete="off" value="{{ symbol }}">
<input type="hidden" name="symbol" id="market-symbol-hidden" value="{{ symbol }}">
<input type="hidden" name="symbol_name" id="market-symbol-name">
<input type="hidden" name="market_code" id="market-market-code">
@@ -24,9 +24,15 @@
<div class="market-quote" id="market-quote">
<span class="market-quote-name" id="market-quote-name">—</span>
<span class="market-quote-price" id="market-quote-price">—</span>
<span class="market-quote-prev text-muted" id="market-quote-prev"></span>
<span class="market-quote-meta text-muted" id="market-quote-meta"></span>
</div>
<div class="market-chart-toolbar">
<div class="market-chart-options">
<label class="chart-opt"><input type="checkbox" id="chart-opt-prev-close">昨收线</label>
<label class="chart-opt"><input type="checkbox" id="chart-opt-ma">均线 21/55</label>
<label class="chart-opt"><input type="checkbox" id="chart-opt-gap-day">间隔日</label>
</div>
<div class="market-chart-zoom">
<button type="button" class="chart-zoom-btn" id="chart-zoom-in" title="放大">＋</button>
<button type="button" class="chart-zoom-btn" id="chart-zoom-out" title="缩小">－</button>
@@ -34,11 +40,12 @@
</div>
<span class="market-refresh-hint text-muted" id="market-refresh-hint"></span>
</div>
<div class="market-chart-wrap">
<div class="market-chart-wrap" id="market-chart-wrap">
<div id="market-chart" class="market-chart" aria-label="K线图"></div>
<div class="market-chart-empty" id="market-chart-empty">请选择合约并点击「查看」</div>
<div class="market-chart-loading" id="market-chart-loading">连接中…</div>
</div>
<p class="hint">数据来源：新浪财经。K 线由后台自动刷新并经 SSE 推送到前端；支持滚轮/拖拽缩放。</p>
<p class="hint">数据来源：新浪财经。K 线由后台自动刷新并经 SSE 推送到前端；支持滚轮/拖拽缩放。可视区内自动标注最高/最低价。</p>
</div>
<style>
@@ -47,8 +54,11 @@
.market-toolbar{
display:flex;flex-wrap:wrap;gap:.65rem;align-items:flex-end;
margin-bottom:.75rem;position:relative;z-index:2;
min-height:2.5rem;
}
.market-symbol-wrap{flex:1;min-width:200px;max-width:360px;z-index:3}
.market-symbol-wrap .symbol-dropdown{max-height:min(70vh,420px)}
.market-symbol-wrap .symbol-selected{display:none}
.market-period-tabs{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.period-tab{
padding:.4rem .65rem;border-radius:999px;
@@ -66,13 +76,22 @@
display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
margin-bottom:.75rem;padding:.65rem .85rem;
background:var(--card-inner);border-radius:10px;border:1px solid var(--card-border);
min-height:2.75rem;
}
.market-quote-name{font-weight:600;color:var(--text-title)}
.market-quote-price{font-size:1.35rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.market-quote-prev{font-size:.78rem}
.market-chart-toolbar{
display:flex;align-items:center;justify-content:space-between;gap:.75rem;
margin-bottom:.5rem;flex-wrap:wrap;
min-height:2rem;
}
.market-chart-options{display:flex;flex-wrap:wrap;gap:.5rem .85rem;align-items:center}
.chart-opt{
display:flex;align-items:center;gap:.35rem;font-size:.78rem;
color:var(--text-muted);cursor:pointer;user-select:none;
}
.chart-opt input{width:auto;margin:0;cursor:pointer}
.market-chart-zoom{display:flex;gap:.35rem;align-items:center}
.chart-zoom-btn{
width:32px;height:32px;padding:0;border-radius:8px;
@@ -84,20 +103,32 @@
.market-refresh-hint{font-size:.72rem}
.market-chart-wrap{
position:relative;border-radius:12px;border:1px solid var(--card-border);
background:var(--card-inner);min-height:420px;
background:var(--card-inner);
height:min(62vh,520px);min-height:360px;
}
.market-chart{width:100%;height:min(62vh,520px);min-height:360px}
.market-chart-empty{
.market-chart{width:100%;height:100%}
.market-chart-empty,
.market-chart-loading{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
color:var(--text-muted);font-size:.9rem;pointer-events:none;
}
.market-chart-loading{display:none}
html[data-theme="light"] .market-chart-loading{background:rgba(244,247,252,.75)}
.market-chart-wrap.has-data .market-chart-empty{display:none}
.market-chart-wrap.loading .market-chart-loading{
display:flex;background:rgba(10,12,20,.35);
}
html[data-theme="light"] .market-chart-wrap.loading .market-chart-loading{background:rgba(244,247,252,.75)}
.market-chart-wrap.loading .market-chart-empty{display:none}
@media(max-width:767px){
.market-toolbar{align-items:stretch}
.market-symbol-wrap{max-width:none}
.market-period-tabs{order:3;width:100%}
#market-load-btn{order:4;width:100%}
.market-chart{min-height:300px;height:50vh}
.market-chart-wrap{min-height:300px;height:50vh}
.market-chart-toolbar{flex-direction:column;align-items:stretch}
.market-chart-options{order:1}
.market-chart-zoom{order:2}
}
</style>
{% endblock %}