longcai/JiaZhiQianYan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

个股中心

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

225
pages/geGuCenter/geGuCenter.vue
View File

@@ -109,25 +109,50 @@
<view style="color: #2B2B2B; font-weight: bold; font-size: 26rpx; margin-right: 10rpx;">
{{item.concept_name}}
</view>
<view
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;">
<image style="width: 18rpx; height: auto;" src="/pages/geGuCenter/icon/ydjk-zs.png"
mode="widthFix"></image>
<view style="margin-left: 10rpx;">异动</view>
<view :style="{
color: alertTypeConfig[item.alert_type]?.color || '#FF7A45',
fontSize: '20rpx',
border: '1rpx solid ' + (alertTypeConfig[item.alert_type]?.color || '#FF7A45'),
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 style="flex: 1; font-size: 22rpx; text-align: right;">
<text style="color: #71675D;">板块均涨</text>
<text :style="{
color: Number(item.alpha) > 0 ? '#EC3440' : '#01AB5D',
fontWeight: 'bold',
marginLeft: '5rpx',
marginRight: '15rpx'
}">
{{ Number(item.alpha) > 0 ? '+' + formatAlpha(item.alpha) : formatAlpha(item.alpha) }}%
color: Number(item.alpha) > 0 ? '#EC3440' : '#01AB5D',
fontWeight: 'bold',
marginLeft: '5rpx',
marginRight: '25rpx'
}">
{{ item.formattedAvg }}%
</text>
<text :style="{
color: item.upCount > 0 ? '#EC3440' : '#888888',
fontWeight: 'bold'
}">
{{item.upCount}}涨
</text>
<text style="color: #EC3440; font-weight: bold;">0涨</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>
@@ -199,7 +224,7 @@
</uni-popup>
<uni-popup ref="detailPopup" type="bottom" :safeArea="false">
<view class="detailPopup">
<view class="detailPopup" style="height: 550rpx;">
<view
style="height: 120rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 500;">
<view style="color: #727A8E; width: 60rpx;"></view>
@@ -223,30 +248,50 @@
<view style="flex: 1; font-size: 22rpx; text-align: right;">
<text style="color: #71675D;">板块均涨</text>
<text
style="color: #EC3440; font-weight: bold; margin-left: 10rpx; margin-right: 20rpx;">+0.00%</text>
<text style="color: #EC3440; font-weight: bold;">0涨</text>
<text :style="{
color: Number(formattedAvg) > 0 ? '#EC3440' : '#01AB5D',
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: #01AB5D; font-weight: bold;">0跌</text>
<text style="color: #71675D; margin-left: 20rpx;">涨停比</text>
<text style="color: #EC3440; font-weight: bold; margin-left: 10rpx;">0%</text>
<text :style="{
color: downCount > 0 ? '#01AB5D' : '#888888',
fontWeight: 'bold'
}">
{{downCount}}跌
</text>
<text style="color: #71675D; margin-left: 20rpx;">涨停比</text>
<text
style="color: #EC3440; font-weight: bold; margin-left: 10rpx;">{{ formatLimitUpRatio(limit_up_ratio, 0) }}</text>
</view>
</view>
</view>
<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="{ 'background-color': (index % 2 == 0 ? '#fff' : '#FAFAFC')}">
<!-- 股票名称 -->
<view style="color: #222222; font-size: 24rpx; font-weight: bold;">{{ item.name }}</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' }">
{{ formatChangePct(item.change_pct) }}
</view>
</view>
<scroll-view scroll-y="true" show-scrollbar="false" style="flex: 1; ">
<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="{ 'background-color': (index % 2 == 0 ? '#fff' : '#FAFAFC')}">
<!-- 股票名称 -->
<view style="color: #222222; font-size: 24rpx; font-weight: bold;">{{ item.name }}</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' }">
{{ formatChangePct(item.change_pct) }}
</view>
</view>
</scroll-view>
</view>
</uni-popup>
</view>
@@ -273,6 +318,43 @@
allStockData: [],
filteredData: [],
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: [{
title: '大盘涨跌幅',
value: '+0.00%',
@@ -345,7 +427,11 @@
backIcon: '/static/icon/gegu/cate-4.png'
}
],
marketAlertsList: []
marketAlertsList: [],
formattedAvg: 0,
upCount: 0,
downCount: 0,
limit_up_ratio: 0
}
},
onLoad(e) {
@@ -543,6 +629,39 @@
this.topLists[0].value = formattedPct;
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 数组进行排序
const sortedAlerts = alerts.sort(sortByTimeDesc);
// 4. 将排序后的数组赋值给页面变量（假设你用的是 Vue，可根据实际框架调整）
const sortedAlerts = processedAlerts.sort(sortByTimeDesc);
// 赋值给页面变量的是处理+排序后的数组
this.marketAlertsList = sortedAlerts;
}).catch(error => {
@@ -626,26 +744,31 @@
},
bkydAction(item) {
this.$refs["detailPopup"].open()
this.conceptStocksDetails(item.concept_id)
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)
},
conceptStocksDetails(concept_id) {
console.log("concept_id", concept_id)
conceptStocks(concept_id,{}).then(res => {
conceptStocks(concept_id, {}).then(res => {
if (res.data && res.data.stocks) {
// 将接口数据赋值给列表数组
let rawData = res.data.stocks;
// 2. 对数据进行排序处理
this.conceptStocksList = rawData.sort((a, b) => {
// 将 None 值转换为 -999
const aValue = a.change_pct === null || a.change_pct === undefined ? -999 : Number(a.change_pct);
const bValue = b.change_pct === null || b.change_pct === undefined ? -999 : Number(b.change_pct);
// 降序排列（涨幅高的在前）
return bValue - aValue;
});
let rawData = res.data.stocks;
// 2. 对数据进行排序处理
this.conceptStocksList = rawData.sort((a, b) => {
// 将 None 值转换为 -999
const aValue = a.change_pct === null || a.change_pct === undefined ? -999 :
Number(a.change_pct);
const bValue = b.change_pct === null || b.change_pct === undefined ? -999 :
Number(b.change_pct);
// 降序排列（涨幅高的在前）
return bValue - aValue;
});
} else {
console.warn('接口返回数据格式异常', res);
}