个股中心

This commit is contained in:
renzhijun
2026-01-31 11:05:49 +08:00
parent 1bce4b8e6c
commit e2610ccd9c
2 changed files with 175 additions and 57 deletions

View File

@@ -163,12 +163,7 @@
"navigationBarTitleText": "" "navigationBarTitleText": ""
} }
}, },
{
"path": "components/word-cloud/word-cloud",
"style": {
"navigationBarTitleText": ""
}
},
{ {
"path": "components/WordCloud/WordCloud", "path": "components/WordCloud/WordCloud",
"style": { "style": {

View File

@@ -109,11 +109,26 @@
<view style="color: #2B2B2B; font-weight: bold; font-size: 26rpx; margin-right: 10rpx;"> <view style="color: #2B2B2B; font-weight: bold; font-size: 26rpx; margin-right: 10rpx;">
{{item.concept_name}} {{item.concept_name}}
</view> </view>
<view <view :style="{
style="color: #EC3440; font-size: 20rpx; border: 1rpx solid #EC3440; border-radius: 15rpx; height: 30rpx; display: flex; align-items: center; justify-content: center; padding: 0 10rpx; box-sizing: border-box;"> color: alertTypeConfig[item.alert_type]?.color || '#FF7A45',
<image style="width: 18rpx; height: auto;" src="/pages/geGuCenter/icon/ydjk-zs.png" fontSize: '20rpx',
mode="widthFix"></image> border: '1rpx solid ' + (alertTypeConfig[item.alert_type]?.color || '#FF7A45'),
<view style="margin-left: 10rpx;">异动</view> borderRadius: '15rpx',
height: '30rpx',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '0 10rpx',
boxSizing: 'border-box'
}">
<image style="width: 18rpx; height: auto;"
:style="{ filter: alertTypeConfig[item.alert_type]?.filter || '' }"
src="/pages/geGuCenter/icon/ydjk-zs.png" mode="widthFix">
</image>
<view style="margin-left: 10rpx;">
{{ alertTypeConfig[item.alert_type]?.text || '异动' }}
</view>
</view> </view>
<view style="flex: 1; font-size: 22rpx; text-align: right;"> <view style="flex: 1; font-size: 22rpx; text-align: right;">
<text style="color: #71675D;">板块均涨</text> <text style="color: #71675D;">板块均涨</text>
@@ -121,13 +136,23 @@
color: Number(item.alpha) > 0 ? '#EC3440' : '#01AB5D', color: Number(item.alpha) > 0 ? '#EC3440' : '#01AB5D',
fontWeight: 'bold', fontWeight: 'bold',
marginLeft: '5rpx', marginLeft: '5rpx',
marginRight: '15rpx' marginRight: '25rpx'
}"> }">
{{ Number(item.alpha) > 0 ? '+' + formatAlpha(item.alpha) : formatAlpha(item.alpha) }}% {{ item.formattedAvg }}%
</text>
<text :style="{
color: item.upCount > 0 ? '#EC3440' : '#888888',
fontWeight: 'bold'
}">
{{item.upCount}}
</text> </text>
<text style="color: #EC3440; font-weight: bold;">0</text>
<text style="color: #888888; margin: 0 5rpx;">/</text> <text style="color: #888888; margin: 0 5rpx;">/</text>
<text style="color: #01AB5D; font-weight: bold;">0</text> <text :style="{
color: item.downCount > 0 ? '#01AB5D' : '#888888',
fontWeight: 'bold'
}">
{{item.downCount}}
</text>
</view> </view>
</view> </view>
@@ -199,7 +224,7 @@
</uni-popup> </uni-popup>
<uni-popup ref="detailPopup" type="bottom" :safeArea="false"> <uni-popup ref="detailPopup" type="bottom" :safeArea="false">
<view class="detailPopup"> <view class="detailPopup" style="height: 550rpx;">
<view <view
style="height: 120rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 500;"> style="height: 120rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 500;">
<view style="color: #727A8E; width: 60rpx;"></view> <view style="color: #727A8E; width: 60rpx;"></view>
@@ -223,16 +248,35 @@
<view style="flex: 1; font-size: 22rpx; text-align: right;"> <view style="flex: 1; font-size: 22rpx; text-align: right;">
<text style="color: #71675D;">板块均涨</text> <text style="color: #71675D;">板块均涨</text>
<text <text :style="{
style="color: #EC3440; font-weight: bold; margin-left: 10rpx; margin-right: 20rpx;">+0.00%</text> color: Number(formattedAvg) > 0 ? '#EC3440' : '#01AB5D',
<text style="color: #EC3440; font-weight: bold;">0</text> fontWeight: 'bold',
marginLeft: '10rpx',
marginRight: '20rpx'
}">{{ formattedAvg }}%</text>
<text :style="{
color: upCount > 0 ? '#EC3440' : '#888888',
fontWeight: 'bold'
}">
{{upCount}}
</text>
<text style="color: #888888; margin: 0 5rpx;">/</text> <text style="color: #888888; margin: 0 5rpx;">/</text>
<text style="color: #01AB5D; font-weight: bold;">0</text> <text :style="{
color: downCount > 0 ? '#01AB5D' : '#888888',
fontWeight: 'bold'
}">
{{downCount}}
</text>
<text style="color: #71675D; margin-left: 20rpx;">涨停比</text> <text style="color: #71675D; margin-left: 20rpx;">涨停比</text>
<text style="color: #EC3440; font-weight: bold; margin-left: 10rpx;">0%</text> <text
style="color: #EC3440; font-weight: bold; margin-left: 10rpx;">{{ formatLimitUpRatio(limit_up_ratio, 0) }}</text>
</view> </view>
</view> </view>
</view> </view>
<scroll-view scroll-y="true" show-scrollbar="false" style="flex: 1; ">
<view v-for="(item, index) in conceptStocksList" :key="index" <view v-for="(item, index) in conceptStocksList" :key="index"
style="padding: 0 25rpx; box-sizing: border-box; height: 45rpx; margin: 0 45rpx; display: flex; align-items: center; font-weight: 500;" style="padding: 0 25rpx; box-sizing: border-box; height: 45rpx; margin: 0 45rpx; display: flex; align-items: center; font-weight: 500;"
:style="{ 'background-color': (index % 2 == 0 ? '#fff' : '#FAFAFC')}"> :style="{ 'background-color': (index % 2 == 0 ? '#fff' : '#FAFAFC')}">
@@ -241,11 +285,12 @@
<!-- 股票代码 --> <!-- 股票代码 -->
<view style="flex: 1; color: #888888; font-size: 20rpx; margin: 0 20rpx;">{{ item.code }}</view> <view style="flex: 1; color: #888888; font-size: 20rpx; margin: 0 20rpx;">{{ item.code }}</view>
<!-- 涨跌幅动态绑定颜色和格式化显示 --> <!-- 涨跌幅动态绑定颜色和格式化显示 -->
<view :style="{ color: getChangeColor(item.change_pct), fontSize: '22rpx', fontWeight: 'bold' }"> <view
:style="{ color: getChangeColor(item.change_pct), fontSize: '22rpx', fontWeight: 'bold' }">
{{ formatChangePct(item.change_pct) }} {{ formatChangePct(item.change_pct) }}
</view> </view>
</view> </view>
</scroll-view>
</view> </view>
</uni-popup> </uni-popup>
@@ -273,6 +318,43 @@
allStockData: [], allStockData: [],
filteredData: [], filteredData: [],
conceptStocksList: [], conceptStocksList: [],
alertTypeConfig: {
'surge': {
text: '异动',
color: '#FF7A45', // rgb(255, 122, 69)
filter: 'brightness(0) saturate(100%) invert(54%) sepia(60%) saturate(467%) hue-rotate(344deg) brightness(102%) contrast(101%)'
},
'shrink_surge_up': {
text: '缩量急涨',
color: '#722ED1', // rgb(114, 46, 209)
filter: 'brightness(0) saturate(100%) invert(24%) sepia(90%) saturate(2865%) hue-rotate(266deg) brightness(87%) contrast(98%)'
},
'volume_surge_up': {
text: '放量急涨',
color: '#EB2F96', // rgb(235, 47, 150)
filter: 'brightness(0) saturate(100%) invert(34%) sepia(82%) saturate(1970%) hue-rotate(313deg) brightness(91%) contrast(94%)'
},
'volume_oscillation': {
text: '放量震荡',
color: '#13C2C2', // rgb(19, 194, 194)
filter: 'brightness(0) saturate(100%) invert(71%) sepia(62%) saturate(487%) hue-rotate(142deg) brightness(91%) contrast(93%)'
},
'surge_up': {
text: '急涨',
color: '#FF4D4F', // rgb(255, 77, 79)
filter: 'brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(727%) hue-rotate(346deg) brightness(102%) contrast(104%)'
},
'surge_down': {
text: '急跌',
color: '#52C41A', // rgb(82, 196, 26)
filter: 'brightness(0) saturate(100%) invert(68%) sepia(65%) saturate(456%) hue-rotate(71deg) brightness(91%) contrast(86%)'
},
'shrink_surge_down': {
text: '缩量急跌',
color: '#FF7A45', // rgb(255, 122, 69)
filter: 'brightness(0) saturate(100%) invert(54%) sepia(60%) saturate(467%) hue-rotate(344deg) brightness(102%) contrast(101%)'
}
},
topLists: [{ topLists: [{
title: '大盘涨跌幅', title: '大盘涨跌幅',
value: '+0.00%', value: '+0.00%',
@@ -345,7 +427,11 @@
backIcon: '/static/icon/gegu/cate-4.png' backIcon: '/static/icon/gegu/cate-4.png'
} }
], ],
marketAlertsList: [] marketAlertsList: [],
formattedAvg: 0,
upCount: 0,
downCount: 0,
limit_up_ratio: 0
} }
}, },
onLoad(e) { onLoad(e) {
@@ -543,6 +629,39 @@
this.topLists[0].value = formattedPct; this.topLists[0].value = formattedPct;
this.topLists[0].color = color; this.topLists[0].color = color;
// ========== 新增:处理每个异动条目的均涨/涨数/跌数 ==========
const processedAlerts = alerts.map(alertItem => {
// 1. 获取当前异动条目下的股票列表(假设字段是 stocks需根据实际接口调整
const stocks = alertItem.stocks || [];
// 2. 过滤有效股票change_pct 非空且是数字)
const validStocks = stocks.filter(s => s.change_pct != null && !isNaN(Number(s
.change_pct)));
// 3. 计算板块均涨
const avgChange = validStocks.length > 0 ?
validStocks.reduce((sum, s) => sum + Number(s.change_pct), 0) / validStocks
.length :
0;
// 4. 计算上涨/下跌股票数量
const upCount = validStocks.filter(s => Number(s.change_pct) > 0).length;
const downCount = validStocks.filter(s => Number(s.change_pct) < 0).length;
// 5. 格式化均涨值保留2位小数处理正负号
const roundedAvg = Math.round(avgChange * 100) / 100; // 四舍五入保留2位
const formattedAvg = roundedAvg > 0 ? `+${roundedAvg.toFixed(2)}` : roundedAvg
.toFixed(2);
// 6. 返回原数据 + 新增计算字段
return {
...alertItem,
alpha: avgChange, // 供模板中判断颜色和显示数值
upCount: upCount, // 上涨股票数
downCount: downCount, // 下跌股票数
formattedAvg: formattedAvg // 格式化后的均涨值(带正负号)
};
});
@@ -562,9 +681,8 @@
}; };
// 3. 对 alerts 数组进行排序 // 3. 对 alerts 数组进行排序
const sortedAlerts = alerts.sort(sortByTimeDesc); const sortedAlerts = processedAlerts.sort(sortByTimeDesc);
// 赋值给页面变量的是处理+排序后的数组
// 4. 将排序后的数组赋值给页面变量(假设你用的是 Vue可根据实际框架调整
this.marketAlertsList = sortedAlerts; this.marketAlertsList = sortedAlerts;
}).catch(error => { }).catch(error => {
@@ -626,7 +744,10 @@
}, },
bkydAction(item) { bkydAction(item) {
this.$refs["detailPopup"].open() this.$refs["detailPopup"].open()
this.formattedAvg = item.formattedAvg,
this.upCount = item.upCount,
this.downCount = item.downCount,
this.limit_up_ratio = item.limit_up_ratio,
this.conceptStocksDetails(item.concept_id) this.conceptStocksDetails(item.concept_id)
}, },
conceptStocksDetails(concept_id) { conceptStocksDetails(concept_id) {
@@ -640,8 +761,10 @@
// 2. 对数据进行排序处理 // 2. 对数据进行排序处理
this.conceptStocksList = rawData.sort((a, b) => { this.conceptStocksList = rawData.sort((a, b) => {
// 将 None 值转换为 -999 // 将 None 值转换为 -999
const aValue = a.change_pct === null || a.change_pct === undefined ? -999 : Number(a.change_pct); const aValue = a.change_pct === null || a.change_pct === undefined ? -999 :
const bValue = b.change_pct === null || b.change_pct === undefined ? -999 : Number(b.change_pct); Number(a.change_pct);
const bValue = b.change_pct === null || b.change_pct === undefined ? -999 :
Number(b.change_pct);
// 降序排列(涨幅高的在前) // 降序排列(涨幅高的在前)
return bValue - aValue; return bValue - aValue;