-
+
+
{{ group.label }}
@@ -104,6 +107,10 @@
{{ formatPct(stock.pct_chg) }}
+
+ 首次涨停
+ {{ formatLimitTime(stock.ak_first_limit_time) }}
+
@@ -157,6 +164,7 @@ const overview = ref({
const strengthSeries = ref([])
const detailTradeDate = ref('')
const detailGroups = ref([])
+const detailGroupMode = ref('board')
const dialogVisible = ref(false)
const dialogTitle = ref('')
@@ -168,6 +176,61 @@ const isPhoneViewport = computed(() => viewportWidth.value <= PHONE_BREAKPOINT)
const isIpadMiniViewport = computed(() => viewportWidth.value <= IPAD_MINI_BREAKPOINT)
const isTabletViewport = computed(() => viewportWidth.value <= TABLET_BREAKPOINT)
const detailTradeDateLabel = computed(() => detailTradeDate.value || overview.value.trade_date || '--')
+const allDetailStocks = computed(() => detailGroups.value.flatMap((group) => group.stocks || []))
+const sectorDetailGroups = computed(() => {
+ const groupMap = new Map()
+
+ allDetailStocks.value.forEach((stock) => {
+ const sectorName = stock.ak_industry || stock.market || '未分类'
+ if (!groupMap.has(sectorName)) {
+ groupMap.set(sectorName, {
+ key: `sector-${sectorName}`,
+ label: sectorName,
+ count: 0,
+ stocks: []
+ })
+ }
+
+ const sectorGroup = groupMap.get(sectorName)
+ sectorGroup.count += 1
+ sectorGroup.stocks.push(stock)
+ })
+
+ return Array.from(groupMap.values())
+ .map((group) => ({
+ ...group,
+ maxBoardCount: Math.max(...group.stocks.map((stock) => Number(stock.board_count || 0)), 0),
+ stocks: group.stocks.sort((left, right) => {
+ const timeDiff = getLimitTimeOrder(left.ak_first_limit_time) - getLimitTimeOrder(right.ak_first_limit_time)
+ if (timeDiff !== 0) return timeDiff
+ const boardDiff = Number(right.board_count || 0) - Number(left.board_count || 0)
+ if (boardDiff !== 0) return boardDiff
+ const pctDiff = Number(right.pct_chg || 0) - Number(left.pct_chg || 0)
+ if (pctDiff !== 0) return pctDiff
+ return String(left.ts_code || left.symbol || '').localeCompare(String(right.ts_code || right.symbol || ''))
+ })
+ }))
+ .sort((left, right) => {
+ if (right.count !== left.count) return right.count - left.count
+ if (right.maxBoardCount !== left.maxBoardCount) return right.maxBoardCount - left.maxBoardCount
+ return left.label.localeCompare(right.label, 'zh-Hans-CN')
+ })
+})
+const displayDetailGroups = computed(() => {
+ if (detailGroupMode.value === 'sector') return sectorDetailGroups.value
+ return detailGroups.value.map((group) => ({
+ ...group,
+ key: `board-${group.board_count ?? group.label}`
+ }))
+})
+const detailModeDescription = computed(() => (
+ detailGroupMode.value === 'sector'
+ ? '按所属行业或板块汇总展示当日涨停股票。'
+ : '按连板高度从高到低展示当日涨停股票。'
+))
+const detailModeButtonText = computed(() => (
+ detailGroupMode.value === 'sector' ? '切换为按板数' : '切换为按板块'
+))
const dialogWidth = computed(() => {
if (isPhoneViewport.value) return '96%'
if (isIpadMiniViewport.value) return '94%'
@@ -289,6 +352,61 @@ const formatPct = (value) => {
return `${amount > 0 ? '+' : ''}${amount.toFixed(2)}%`
}
+const getLimitTimeOrder = (value) => {
+ const matched = parseLimitTime(value)
+ if (!matched) return Number.POSITIVE_INFINITY
+ const { hour, minute, second = '0' } = matched
+ return Number(hour) * 3600 + Number(minute) * 60 + Number(second)
+}
+
+const formatLimitTime = (value) => {
+ const matched = parseLimitTime(value)
+ if (!matched) return '--'
+ const { hour, minute, second } = matched
+ return `${hour.padStart(2, '0')}:${minute}${second ? `:${second}` : ''}`
+}
+
+const parseLimitTime = (value) => {
+ if (value === null || value === undefined || value === '') return null
+
+ const rawValue = String(value).trim()
+ const colonMatched = rawValue.match(/(\d{1,2}):(\d{2})(?::(\d{2}))?/)
+ if (colonMatched) {
+ const [, hour, minute, second] = colonMatched
+ return { hour, minute, second }
+ }
+
+ const digits = rawValue.replace(/\D/g, '')
+ if (!digits) return null
+
+ if (digits.length <= 4) {
+ const normalized = digits.padStart(4, '0')
+ return {
+ hour: normalized.slice(0, 2),
+ minute: normalized.slice(2, 4),
+ second: ''
+ }
+ }
+
+ const normalized = digits.padStart(6, '0').slice(0, 6)
+ return {
+ hour: normalized.slice(0, 2),
+ minute: normalized.slice(2, 4),
+ second: normalized.slice(4, 6)
+ }
+}
+
+const formatVolume = (value) => {
+ const amount = Number(value ?? 0)
+ if (amount >= 100000000) return `${(amount / 100000000).toFixed(2)}亿`
+ if (amount >= 10000) return `${(amount / 10000).toFixed(2)}万`
+ return amount.toLocaleString('zh-CN')
+}
+
+const toggleDetailMode = () => {
+ detailGroupMode.value = detailGroupMode.value === 'sector' ? 'board' : 'sector'
+}
+
const disposeStrengthChart = () => {
if (!strengthChartInstance) return
const chartDom = strengthChartInstance.getDom()
@@ -410,6 +528,17 @@ const openKlineDialog = async (stock) => {
try {
const rawData = await getKlineData(stock.ts_code || stock.symbol)
+ const klineData = Array.isArray(rawData)
+ ? rawData.map((item) => ({
+ trade_date: item.trade_date,
+ open: item.open,
+ close: item.close,
+ low: item.low,
+ high: item.high,
+ pct_chg: item.pct_chg,
+ vol: item.vol
+ }))
+ : []
await nextTick()
const chartDom = document.getElementById('limit-board-kline-chart')
@@ -418,14 +547,20 @@ const openKlineDialog = async (stock) => {
disposeChart()
chartInstance = echarts.init(chartDom)
- const dates = rawData.map((item) => dayjs(item.trade_date).format('YYYY-MM-DD'))
- const values = rawData.map((item) => [
+ const dates = klineData.map((item) => dayjs(item.trade_date).format('YYYY-MM-DD'))
+ const values = klineData.map((item) => [
item.open,
item.close,
item.low,
item.high,
item.pct_chg
])
+ const volumes = klineData.map((item) => ({
+ value: Number(item.vol ?? 0),
+ itemStyle: {
+ color: Number(item.pct_chg || 0) >= 0 ? '#e85d75' : '#45b37b'
+ }
+ }))
chartInstance.setOption({
animation: false,
@@ -433,8 +568,8 @@ const openKlineDialog = async (stock) => {
trigger: 'axis',
axisPointer: { type: 'cross' },
formatter(params) {
- const point = params[0]
- const currentItem = rawData[point.dataIndex] || {}
+ const point = params.find((item) => item.seriesType === 'candlestick') || params[0]
+ const currentItem = klineData[point.dataIndex] || {}
const pct = Number(currentItem.pct_chg || 0)
const color = pct >= 0 ? '#d9485f' : '#2f9e62'
return `
@@ -444,21 +579,59 @@ const openKlineDialog = async (stock) => {
开盘价: ${formatPrice(currentItem.open)}
收盘价: ${formatPrice(currentItem.close)}
最低价: ${formatPrice(currentItem.low)}
- 最高价: ${formatPrice(currentItem.high)}
+ 最高价: ${formatPrice(currentItem.high)}
+ 成交量: ${formatVolume(currentItem.vol)}