update pay ui

This commit is contained in:
2025-12-10 14:01:38 +08:00
parent d6d4bb8a12
commit 3cb9b4237b
2 changed files with 34 additions and 12 deletions

View File

@@ -313,12 +313,29 @@ const StockChartAntdModal = ({
axisPointer: { type: 'cross' }, axisPointer: { type: 'cross' },
formatter: function(params) { formatter: function(params) {
const d = params[0]?.dataIndex ?? 0; const d = params[0]?.dataIndex ?? 0;
const priceChangePercent = ((prices[d] - prevClose) / prevClose * 100); const price = prices[d];
const avgChangePercent = ((avgPrices[d] - prevClose) / prevClose * 100); const avgPrice = avgPrices[d];
const volume = volumes[d];
// 安全计算涨跌幅,处理 undefined/null/0 的情况
const safeCalcPercent = (val, base) => {
if (val == null || base == null || base === 0) return 0;
return ((val - base) / base * 100);
};
const priceChangePercent = safeCalcPercent(price, prevClose);
const avgChangePercent = safeCalcPercent(avgPrice, prevClose);
const priceColor = priceChangePercent >= 0 ? '#ef5350' : '#26a69a'; const priceColor = priceChangePercent >= 0 ? '#ef5350' : '#26a69a';
const avgColor = avgChangePercent >= 0 ? '#ef5350' : '#26a69a'; const avgColor = avgChangePercent >= 0 ? '#ef5350' : '#26a69a';
return `时间:${times[d]}<br/>现价:<span style="color: ${priceColor}">¥${prices[d]?.toFixed(2)} (${priceChangePercent >= 0 ? '+' : ''}${priceChangePercent.toFixed(2)}%)</span><br/>均价:<span style="color: ${avgColor}">¥${avgPrices[d]?.toFixed(2)} (${avgChangePercent >= 0 ? '+' : ''}${avgChangePercent.toFixed(2)}%)</span><br/>昨收:¥${prevClose?.toFixed(2)}<br/>成交量:${Math.round(volumes[d]/100)}`; // 安全格式化数字
const safeFixed = (val, digits = 2) => (val != null && !isNaN(val)) ? val.toFixed(digits) : '-';
const formatPercent = (val) => {
if (val == null || isNaN(val)) return '-';
return (val >= 0 ? '+' : '') + val.toFixed(2) + '%';
};
return `时间:${times[d] || '-'}<br/>现价:<span style="color: ${priceColor}">¥${safeFixed(price)} (${formatPercent(priceChangePercent)})</span><br/>均价:<span style="color: ${avgColor}">¥${safeFixed(avgPrice)} (${formatPercent(avgChangePercent)})</span><br/>昨收:¥${safeFixed(prevClose)}<br/>成交量:${volume != null ? Math.round(volume/100) + '手' : '-'}`;
} }
}, },
grid: [ grid: [
@@ -337,6 +354,7 @@ const StockChartAntdModal = ({
position: 'left', position: 'left',
axisLabel: { axisLabel: {
formatter: function(value) { formatter: function(value) {
if (value == null || isNaN(value)) return '-';
return (value >= 0 ? '+' : '') + value.toFixed(2) + '%'; return (value >= 0 ? '+' : '') + value.toFixed(2) + '%';
} }
}, },
@@ -354,11 +372,12 @@ const StockChartAntdModal = ({
position: 'right', position: 'right',
axisLabel: { axisLabel: {
formatter: function(value) { formatter: function(value) {
if (value == null || isNaN(value)) return '-';
return (value >= 0 ? '+' : '') + value.toFixed(2) + '%'; return (value >= 0 ? '+' : '') + value.toFixed(2) + '%';
} }
} }
}, },
{ type: 'value', gridIndex: 1, scale: true, axisLabel: { formatter: v => Math.round(v/100) + '手' } } { type: 'value', gridIndex: 1, scale: true, axisLabel: { formatter: v => (v != null && !isNaN(v)) ? Math.round(v/100) + '手' : '-' } }
], ],
dataZoom: [ dataZoom: [
{ type: 'inside', xAxisIndex: [0, 1], start: 0, end: 100 }, { type: 'inside', xAxisIndex: [0, 1], start: 0, end: 100 },

View File

@@ -207,9 +207,12 @@ const CompactIndexCard = ({ indexCode, indexName }) => {
const raw = chartData.rawData[idx]; const raw = chartData.rawData[idx];
if (!raw) return ''; if (!raw) return '';
// 安全格式化数字
const safeFixed = (val, digits = 2) => (val != null && !isNaN(val)) ? val.toFixed(digits) : '-';
// 计算涨跌 // 计算涨跌
const prevClose = raw.prev_close || (idx > 0 ? chartData.rawData[idx - 1]?.close : raw.open) || raw.open; const prevClose = raw.prev_close || (idx > 0 ? chartData.rawData[idx - 1]?.close : raw.open) || raw.open;
const changeAmount = raw.close - prevClose; const changeAmount = (raw.close != null && prevClose != null) ? (raw.close - prevClose) : 0;
const changePct = prevClose ? ((changeAmount / prevClose) * 100) : 0; const changePct = prevClose ? ((changeAmount / prevClose) * 100) : 0;
const isUp = changeAmount >= 0; const isUp = changeAmount >= 0;
const color = isUp ? '#ef5350' : '#26a69a'; const color = isUp ? '#ef5350' : '#26a69a';
@@ -218,22 +221,22 @@ const CompactIndexCard = ({ indexCode, indexName }) => {
return ` return `
<div style="min-width: 180px;"> <div style="min-width: 180px;">
<div style="font-weight: bold; color: #FFD700; margin-bottom: 10px; font-size: 13px; border-bottom: 1px solid rgba(255,215,0,0.2); padding-bottom: 8px;"> <div style="font-weight: bold; color: #FFD700; margin-bottom: 10px; font-size: 13px; border-bottom: 1px solid rgba(255,215,0,0.2); padding-bottom: 8px;">
📅 ${raw.time} 📅 ${raw.time || '-'}
</div> </div>
<div style="display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 12px;"> <div style="display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 12px;">
<span style="color: #999;">开盘</span> <span style="color: #999;">开盘</span>
<span style="text-align: right; font-family: monospace;">${raw.open.toFixed(2)}</span> <span style="text-align: right; font-family: monospace;">${safeFixed(raw.open)}</span>
<span style="color: #999;">收盘</span> <span style="color: #999;">收盘</span>
<span style="text-align: right; font-weight: bold; color: ${color}; font-family: monospace;">${raw.close.toFixed(2)}</span> <span style="text-align: right; font-weight: bold; color: ${color}; font-family: monospace;">${safeFixed(raw.close)}</span>
<span style="color: #999;">最高</span> <span style="color: #999;">最高</span>
<span style="text-align: right; color: #ef5350; font-family: monospace;">${raw.high.toFixed(2)}</span> <span style="text-align: right; color: #ef5350; font-family: monospace;">${safeFixed(raw.high)}</span>
<span style="color: #999;">最低</span> <span style="color: #999;">最低</span>
<span style="text-align: right; color: #26a69a; font-family: monospace;">${raw.low.toFixed(2)}</span> <span style="text-align: right; color: #26a69a; font-family: monospace;">${safeFixed(raw.low)}</span>
</div> </div>
<div style="margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center;"> <div style="margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center;">
<span style="color: #999; font-size: 11px;">涨跌幅</span> <span style="color: #999; font-size: 11px;">涨跌幅</span>
<span style="color: ${color}; font-weight: bold; font-size: 14px; font-family: monospace;"> <span style="color: ${color}; font-weight: bold; font-size: 14px; font-family: monospace;">
${sign}${changeAmount.toFixed(2)} (${sign}${changePct.toFixed(2)}%) ${sign}${safeFixed(changeAmount)} (${sign}${safeFixed(changePct)}%)
</span> </span>
</div> </div>
</div> </div>
@@ -529,7 +532,7 @@ const FlowingConcepts = () => {
color={colors.text} color={colors.text}
whiteSpace="nowrap" whiteSpace="nowrap"
> >
{concept.change_pct > 0 ? '+' : ''}{concept.change_pct.toFixed(2)}% {concept.change_pct > 0 ? '+' : ''}{concept.change_pct?.toFixed(2) ?? '-'}%
</Text> </Text>
</HStack> </HStack>
</Box> </Box>