大单提醒的图标,通知重叠问题

This commit is contained in:
dongzp 2026-07-24 10:50:12 +08:00
parent 1ae0639fc2
commit e8d60aa63a
2 changed files with 27 additions and 3 deletions

View File

@ -47,3 +47,12 @@ a:hover {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
} }
/* 大单提醒:买入 Top / 卖出 Bottom(无 type,避免覆盖自定义 icon) */
.large-order-alert--buy .el-notification__icon {
color: var(--up);
}
.large-order-alert--sell .el-notification__icon {
color: var(--down);
}

View File

@ -1,4 +1,6 @@
import { markRaw, nextTick } from 'vue'
import { ElNotification } from 'element-plus' import { ElNotification } from 'element-plus'
import { Bottom, Top } from '@element-plus/icons-vue'
import type { ContractItem, TradeTick } from '../types' import type { ContractItem, TradeTick } from '../types'
/** /**
@ -9,15 +11,28 @@ export function notifyLargeOrders(trades: TradeTick[], contract: ContractItem):
const threshold = contract.largeOrderAlertLots const threshold = contract.largeOrderAlertLots
if (!threshold || threshold <= 0 || trades.length === 0) return if (!threshold || threshold <= 0 || trades.length === 0) return
let shown = 0
for (const t of trades) { for (const t of trades) {
if (t.volume <= threshold) continue if (t.volume <= threshold) continue
const sideLabel = t.side === 'B' ? '买' : '卖' const isBuy = t.side === 'B'
const sideLabel = isBuy ? '买' : '卖'
ElNotification({ ElNotification({
title: `大单提醒 · ${contract.name || contract.code}`, title: `大单提醒 · ${contract.name || contract.code}`,
message: `${t.time} ${sideLabel} ${t.volume}手 @ ${t.price.toFixed(2)}`, message: `${t.time} ${sideLabel} ${t.volume}手 @ ${t.price.toFixed(2)}`,
type: t.side === 'B' ? 'error' : 'success', // 勿设 type:type 会覆盖自定义 icon,买入会变成 error 图标
duration: 4500, icon: markRaw(isBuy ? Top : Bottom),
duration: 10000,
position: 'top-right', position: 'top-right',
customClass: isBuy ? 'large-order-alert--buy' : 'large-order-alert--sell',
})
shown++
}
// 同步连弹时前一个通知尚未 mount(visible=false → offsetHeight=0),会叠在一起;
// 等 DOM 就绪后按真实高度重算 offset。
if (shown > 1) {
void nextTick(() => {
ElNotification.updateOffsets('top-right')
}) })
} }
} }