cirry/stock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善知行短线

Browse Source
This commit is contained in:
cirry
2026-08-17 00:47:02 +08:00
parent 436a126e3b
commit 5029a22de1
12 changed files with 517 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/components/DetailKLine.vue
View File

@@ -11,8 +11,14 @@ import {
threeWaves, triangle, xabcd,
} from '@klinecharts/extension';
import { useSettingsStore, TOOLTIP_FIELDS, DEFAULT_TOOLTIP_FIELDS } from '@/stores/settings';
import { registerCustomIndicators, computeZhixingSeries, DKX_PERIODS, ZHIXING_NAME, CHIPS_NAME, type ChipsExt } from '@/indicators';
import type { Candle, TooltipField } from '@/api/types';
// 通达信导入的自定义主图指标注册表；知行序列走 PV 管道按时间戳取预计算值。
// g 闭包的 PV/allData 是本组件实例级的，切股会重挂新实例——注册表每次挂载
// 重注册知行模板换绑新实例的 g，幂等注册会永远读第一只股票的数据（线全错）
registerCustomIndicators((k, ts) => g(k)(ts));
// 扩展画线模板一次性全局注册（registerOverlay 是全局的，模块加载时执行一次即可）
for (const t of [
abcd, xabcd, threeWaves, fiveWaves, eightWaves, anyWaves, arrow, triangle, parallelogram,
@@ -85,6 +91,14 @@ const props = defineProps<{
subHeights: Record<string, number>;
/** 主图是否叠加布林带 */
showBoll: boolean;
/** 主图是否叠加知行指标（趋势线+多空线，纯前端计算） */
showZhixing: boolean;
/** 知行指标图例行的板块文本（通达信 HYBLOCK+DYBLOCK 的近似，行业+地域） */
zhixingBlocks?: string;
/** 主图是否叠加筹码峰（cyq 截面横向直方图，纯 draw 绘制） */
showChips: boolean;
/** 筹码峰截面数据（父组件按 当前窗口末根/十字线 所在周期取数；null=暂无） */
chips?: ChipsExt | null;
/** K线周期标签（仅用于 MA 指标名缓存 key） */
timeframe: string;
/** 浮层显示的指标（可选；缺省=目录全开，空数组=仅日期头） */
@@ -100,6 +114,8 @@ const props = defineProps<{
const emit = defineEmits<{
/** 日期跳转锚点在本次数据窗口里找不到（早于上市/晚于最后一根）：请父组件回退到最新行情并提示 */
(e: 'centerMiss', ts: number): void;
/** 十字线落在某根K线上（开启筹码峰时逐根上报，父组件防抖后取该周期筹码截面） */
(e: 'crosshairDate', ts: number): void;
}>();
// A股语义色（黑底高对比）；UP/DOWN 跟随设置中的涨跌配色
@@ -128,6 +144,14 @@ const g = (k: string) => (ts: number) => {
return i >= 0 ? PV[k]?.[i] ?? undefined : undefined;
};
// 知行序列：在整段 allData 上预计算写入 PV（MA114 预热 113 根，比首吐窗口 240 根长，
// 必须在全部已加载历史上算才能覆盖整屏）；build 与左滑前插后各跑一次
function applyZhixingSeries() {
const s = computeZhixingSeries(allData.map((b) => b.close));
PV['zx_trend'] = s.trend;
PV['zx_dkx'] = s.dkx;
}
// 动态 MA：按周期组合注册一次（figures 的 key 必须静态，故按签名建缓存）
// 前端直接从收盘价计算 MA，无需后端重拉数据，切换均线周期即时响应
const _maReg = new Set<string>();
@@ -285,6 +309,7 @@ async function ensureOlder(myEpoch: number): Promise<void> {
// 注：klinecharts v10 数据只经 dataLoader 流入、无 updateData，
// 已渲染的半周期首K无法原地刷新；替换 allData/PV 保证后续翻页与重建使用完整聚合。
hasMore = page.hasMore;
applyZhixingSeries(); // allData 已前插，知行序列整体重算（EMA 前缀/MA114 预热自愈）
failCount = 0;
} catch {
// 网络失败：保留 hasMore，下次左缘触发时重试；连续 3 次失败才放弃
@@ -412,6 +437,8 @@ function bindCrosshair(ch: Chart) {
const idx = ts != null ? idxOfTs(ts) : -1; // 全量数组与指标序列按索引对齐
if (idx < 0) { hover.value = null; return; }
const k = allData[idx];
// 筹码峰跟随：十字线逐根上报（父组件防抖取截面）；不开启时不上报，避免无谓事件
if (props.showChips) emit('crosshairDate', k.timestamp);
const prev = idx > 0 ? allData[idx - 1] : null;
const diff = prev ? k.close - prev.close : null;
const chg = prev ? (diff! / prev.close) * 100 : null;
@@ -635,6 +662,20 @@ function placeTradeTip(px: number, py: number, rowCount: number): { x: number; y
return { x, y };
}
// ---------- 筹码峰指标同步（不重建图表：createIndicator 不支持原地改 extendData，
// 先删后建即可；数据/开关变化走这里，保留滚动位置与用户画线） ----------
function syncChipsIndicator() {
if (!chart) return;
const exists = chart.getIndicators().some((i) => i.name === CHIPS_NAME);
const want = props.showChips && !!props.chips;
if (want) {
if (exists) chart.removeIndicator({ name: CHIPS_NAME });
chart.createIndicator({ name: CHIPS_NAME, paneId: 'candle_pane', extendData: props.chips ?? undefined });
} else if (exists) {
chart.removeIndicator({ name: CHIPS_NAME });
}
}
function build() {
if (!container.value || props.candles.length === 0) return;
UP = settings.upHex;
@@ -654,6 +695,7 @@ function build() {
timestamp: new Date(k.ts).getTime(),
open: k.open, high: k.high, low: k.low, close: k.close, volume: k.volume,
}));
applyZhixingSeries();
served = 0;
hasMore = props.hasMore;
fetching = null;
@@ -716,9 +758,17 @@ function build() {
ch.setSymbol({ ticker: props.ticker });
ch.setPeriod({ type: 'day', span: 1 });
// 主图：MA（周期可配置）恒开，BOLL 可选
// 主图：MA（周期可配置）恒开，BOLL / 知行可选
ch.createIndicator({ name: ensureMaIndicator(props.maPeriods), paneId: 'candle_pane' });
if (props.showBoll) ch.createIndicator({ name: 'pv-boll', paneId: 'candle_pane' });
if (props.showZhixing) {
// calcParams 用于图例显示「知行(14,28,57,114)」（通达信式）；板块文本经 extendData 注入图例行
ch.createIndicator({
name: ZHIXING_NAME, paneId: 'candle_pane',
calcParams: DKX_PERIODS, extendData: { blocks: props.zhixingBlocks },
});
}
if (props.showChips) syncChipsIndicator(); // 筹码峰（数据未到时 draw 直接空转，到货后由 watch 补建）
// 副图按用户顺序创建，并设置用户高度；主图吃剩余高度。
// minHeight 交给库在分隔条拖拽时强制执行（与 subH 的 40px 下限一致）
@@ -773,7 +823,10 @@ function teardown() {
onMounted(build);
onBeforeUnmount(teardown);
watch(() => [props.candles, props.indicators, props.subPanes, props.showBoll, props.maPeriods, props.timeframe], () => { teardown(); build(); }, { deep: true });
watch(() => [props.candles, props.indicators, props.subPanes, props.showBoll, props.showZhixing, props.zhixingBlocks, props.maPeriods, props.timeframe], () => { teardown(); build(); }, { deep: true });
// 筹码峰开关/截面变化：只同步该指标，不重建图表（保留滚动位置与用户画线；
// 十字线跟随会高频更新截面，重建会闪 + 丢状态）
watch(() => [props.showChips, props.chips], syncChipsIndicator, { deep: true });
// 买卖点数据变化（导入/清空/开关显示）：只重画标记，不重建图表（保留滚动位置与用户画线）
watch(() => props.tradeMarkers, renderTradeMarkers, { deep: true });
// 涨跌配色切换：重建图表以应用新颜色

111
frontend/src/components/StockDetailOverlay.vue
View File

@@ -1,14 +1,15 @@
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import {
addWatchlist, clearTrades, getStockPreview, getTrades, getWatchlist as getWatchlistApi,
addWatchlist, clearTrades, getStockChips, getStockPreview, getTrades, getWatchlist as getWatchlistApi,
importTrades, removeWatchlist,
} from '@/api/client';
import type {
ChartLayoutPrefs, PreviewResponse, ScreenerItemOut, Timeframe, TooltipField,
ChartLayoutPrefs, ChipsResponse, PreviewResponse, ScreenerItemOut, Timeframe, TooltipField,
TradesImportResponse, UserTrade,
} from '@/api/types';
import { useSettingsStore, DEFAULT_TOOLTIP_FIELDS, TOOLTIP_FIELDS, type PriceAdjust } from '@/stores/settings';
import type { ChipsExt } from '@/indicators';
import DetailKLine from './DetailKLine.vue';
const props = defineProps<{
@@ -67,6 +68,91 @@ const maPeriods = computed<number[]>(() => layout.value.maPeriods);
const subHeights = computed(() => layout.value.subHeights);
const tooltipFields = computed<TooltipField[]>(() => layout.value.tooltipFields ?? DEFAULT_TOOLTIP_FIELDS);
const showBoll = ref(false);
const showZhixing = ref(false);
// 知行指标图例行的板块文本（通达信 HYBLOCK+' '+DYBLOCK 的近似；GNBLOCK 概念板块无数据源）
const zhixingBlocks = computed(() => {
const info = data.value?.info;
if (!info) return undefined;
return [info.industry, info.area].filter(Boolean).join(' ') || undefined;
});
// ---------- 筹码峰（cyq 截面，跟随 日/周/月K 的当前周期 + 十字线） ----------
const showChips = ref(false);
const chipsExt = ref<ChipsExt | null>(null);
let chipsToken = 0; // 请求序号：切股/切口径瞬间乱序返回的旧截面不能回填
let chipsKey = ''; // 已请求去重键（code|adjust|参考日）
function toChipsExt(res: ChipsResponse, refClose: number): ChipsExt {
return {
rows: res.rows.map((r) => ({ price: r.price, percent: r.percent })),
date: res.trade_date ?? undefined,
refClose,
winner: res.winner_rate,
avg: res.weight_avg,
costLow: res.cost_5pct,
costHigh: res.cost_95pct,
error: res.error ?? undefined,
};
}
/** 筹码锚点（同花顺式）：返回 参考日 + 锚定 bar 收盘价（获利/套牢的分界价）。
* 日K=bar 当日；周/月/年K 的 bar ts 是周期首日，参考日=下一根 bar 首日的前一天
* （最后一根=今天，后端再吸附到 <=参考日 的最近有数据交易日）。
* idx 缺省=窗口最后一根（跟随当前可视周期）；十字线跟随时传落点下标。
* 注：翻页前插的更早 bar 不在 data.candles 里，十字线落到那些 bar 上时沿用上一截面。 */
function chipsAnchor(idx?: number): { ref: string; close: number } | undefined {
const bars = data.value?.candles;
if (!bars?.length) return undefined;
const i = idx != null && idx >= 0 && idx < bars.length ? idx : bars.length - 1;
if (timeframe.value === '1d') return { ref: bars[i].ts.slice(0, 10), close: bars[i].close };
const nextTs = i + 1 < bars.length ? new Date(bars[i + 1].ts).getTime() - 86400000 : Date.now();
return { ref: fmtDashDate(Math.min(nextTs, Date.now())), close: bars[i].close };
}
async function loadChips(anchorIdx?: number) {
if (!showChips.value) return;
const anchor = chipsAnchor(anchorIdx);
if (!anchor) return;
const key = `${active.value}|${adjust.value}|${anchor.ref}`;
if (key === chipsKey) return; // 同股同口径同参考日不重复请求（后端有 Redis 缓存，前端也省一次往返）
chipsKey = key;
const token = ++chipsToken;
try {
const res = await getStockChips(active.value, { date: anchor.ref, adjust: adjust.value });
if (token === chipsToken) chipsExt.value = toChipsExt(res, anchor.close);
} catch {
if (token === chipsToken) chipsExt.value = { rows: [], refClose: anchor.close, error: '筹码数据获取失败' };
}
}
/** K线数据就绪/切换（切股、复权、周期、日期跳转都经 load() 换 data）：筹码重置到新窗口末根 */
watch(data, () => {
chipsKey = '';
chipHoverTs = null;
chipsExt.value = null;
void loadChips();
});
/** 十字线跟随（防抖 350ms）：落在哪根K线就取那个周期的截面；离开图表保留最后截面（通达信同款） */
let chipHoverTimer: ReturnType<typeof setTimeout> | null = null;
let chipHoverTs: number | null = null;
function onCrosshairDate(ts: number) {
if (!showChips.value || chipHoverTs === ts) return;
chipHoverTs = ts;
if (chipHoverTimer) clearTimeout(chipHoverTimer);
chipHoverTimer = setTimeout(() => {
chipHoverTimer = null;
const bars = data.value?.candles;
if (!bars) return;
const idx = bars.findIndex((b) => new Date(b.ts).getTime() === ts);
if (idx >= 0) void loadChips(idx);
}, 350);
}
function toggleChips() {
showChips.value = !showChips.value;
if (showChips.value) { chipsKey = ''; chipHoverTs = null; void loadChips(); }
}
function toggleSub(key: string) {
const cur = subPanes.value;
@@ -580,6 +666,22 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
title="主图叠加布林带"
@click="showBoll = !showBoll"
>BOLL</button>
<!-- 知行：通达信导入的自定义主图指标（趋势线+多空线） -->
<button
type="button"
class="rounded-md border px-2.5 py-1 text-[13px] transition-colors"
:class="showZhixing ? 'border-[#E61851] bg-[#E61851] text-white' : 'border-[#26272E] bg-[#101014] text-[#9BA3AE]'"
title="知行指标：短期趋势线 EMA(EMA(C,10),10) + 多空线 (MA14+MA28+MA57+MA114)/4"
@click="showZhixing = !showZhixing"
>知行</button>
<!-- 筹码峰：右侧横向线状直方图（选中K线下方获利盘红/上方套牢盘蓝+平均成本虚线） -->
<button
type="button"
class="rounded-md border px-2.5 py-1 text-[13px] transition-colors"
:class="showChips ? 'border-cyan-400 bg-cyan-400 text-black' : 'border-[#26272E] bg-[#101014] text-[#9BA3AE]'"
title="筹码峰：各价位持仓占比（选中K线分界：下方获利盘红/上方套牢盘蓝），随日/周/月K与十字线切换截面"
@click="toggleChips"
>筹码峰</button>
<!-- 实盘交易点：交割单导入的买卖标记 -->
<button
type="button"
@@ -708,6 +810,11 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
:ma-periods="maPeriods"
:sub-heights="subHeights"
:show-boll="showBoll"
:show-zhixing="showZhixing"
:zhixing-blocks="zhixingBlocks"
:show-chips="showChips"
:chips="chipsExt"
@crosshair-date="onCrosshairDate"
:timeframe="timeframe"
:tooltip-fields="tooltipFields"
:center-ts="jumpTs"