个股中心
This commit is contained in:
renzhijun
@@ -163,12 +163,7 @@
|
|||||||
"navigationBarTitleText": ""
|
"navigationBarTitleText": ""
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"path": "components/word-cloud/word-cloud",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": ""
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "components/WordCloud/WordCloud",
|
"path": "components/WordCloud/WordCloud",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
@@ -109,25 +109,50 @@
|
|||||||
<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>
|
||||||
<text :style="{
|
<text :style="{
|
||||||
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,29 +248,49 @@
|
|||||||
|
|
||||||
<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="{
|
||||||
<text style="color: #71675D; margin-left: 20rpx;">涨停比</text>
|
color: downCount > 0 ? '#01AB5D' : '#888888',
|
||||||
<text style="color: #EC3440; font-weight: bold; margin-left: 10rpx;">0%</text>
|
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>
|
||||||
</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>
|
</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,26 +744,31 @@
|
|||||||
},
|
},
|
||||||
bkydAction(item) {
|
bkydAction(item) {
|
||||||
this.$refs["detailPopup"].open()
|
this.$refs["detailPopup"].open()
|
||||||
|
this.formattedAvg = item.formattedAvg,
|
||||||
this.conceptStocksDetails(item.concept_id)
|
this.upCount = item.upCount,
|
||||||
|
this.downCount = item.downCount,
|
||||||
|
this.limit_up_ratio = item.limit_up_ratio,
|
||||||
|
this.conceptStocksDetails(item.concept_id)
|
||||||
},
|
},
|
||||||
conceptStocksDetails(concept_id) {
|
conceptStocksDetails(concept_id) {
|
||||||
console.log("concept_id", concept_id)
|
console.log("concept_id", concept_id)
|
||||||
|
|
||||||
conceptStocks(concept_id,{}).then(res => {
|
conceptStocks(concept_id, {}).then(res => {
|
||||||
if (res.data && res.data.stocks) {
|
if (res.data && res.data.stocks) {
|
||||||
// 将接口数据赋值给列表数组
|
// 将接口数据赋值给列表数组
|
||||||
let rawData = res.data.stocks;
|
let rawData = res.data.stocks;
|
||||||
|
|
||||||
// 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;
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
console.warn('接口返回数据格式异常', res);
|
console.warn('接口返回数据格式异常', res);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user