From 03043192ddf00f9a36b7454799a9152cd1b50a0b Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 06 Jan 2026 11:13:45 +0800
Subject: [PATCH] 1
---
src/views/usStock/List.vue | 116 ++++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 96 insertions(+), 20 deletions(-)
diff --git a/src/views/usStock/List.vue b/src/views/usStock/List.vue
index ae12380..f07c340 100644
--- a/src/views/usStock/List.vue
+++ b/src/views/usStock/List.vue
@@ -49,8 +49,8 @@
'text-up': item.changeRatio > 0,
'text-down': item.changeRatio <= 0,
}">{{ item.changeRatio ? `${item.changeRatio}%` : item.changeRatio === 0 ? 0
- :
- '--' }}</p>
+ :
+ '--' }}</p>
</div>
</div>
<div class="divider mt-10"></div>
@@ -115,7 +115,7 @@
</div>
<div class="divider"></div>
<div class="all-etf-ranking">
- <p class="title">{{ t('WellUSstocks') }}</p>
+ <p class="title">{{ t('涨幅榜') }}</p>
<div class="etf-table">
<ul>
<li class="title-line">
@@ -131,7 +131,7 @@
</div>
</div>
</li>
- <li v-for="(item, index) in prominentListData.slice(0, 5)" :key="item.symbol" @click="itemClick(item)">
+ <li v-for="(item) in prominentListData.slice(0, 5)" :key="item.symbol" @click="itemClick(item)">
<div class="flex-l">
<p>{{ item.name }}</p>
<p class="gray-text">
@@ -151,7 +151,7 @@
</li>
</ul>
</div>
- <div class="more-box" @click="moreOpen(0, t('WellUSstocks'), 'prominent')">
+ <div class="more-box" @click="moreOpen(0, t('涨幅榜'), 'prominent')">
<div class="icon-group">
<p class="">{{ t('更多') }}</p>
<img src="@/assets/image/quotes/right-arrow-grey.png" alt="" class="icon arrow">
@@ -186,7 +186,8 @@
</div>
</li>
- <li v-for="(item, index) in technologyListData.slice(0, 5)" :key="item.symbol" @click="itemClick(item)">
+ <li v-for="(item, index) in technologyListData.slice(0, 5)" :key="item.symbol"
+ @click="itemClick(item)">
<div class="flex-l">
<p>{{ item.name }}</p>
<p class="gray-text">
@@ -234,7 +235,8 @@
</div>
</div>
</li>
- <li v-for="(item, index) in dinancialListData.slice(0, 5)" :key="item.symbol" @click="itemClick(item)">
+ <li v-for="(item, index) in dinancialListData.slice(0, 5)" :key="item.symbol"
+ @click="itemClick(item)">
<div class="flex-l">
<p>{{ item.name }}</p>
<p class="gray-text">
@@ -282,7 +284,8 @@
</div>
</div>
</li>
- <li v-for="(item, index) in healthcareListData.slice(0, 5)" :key="item.symbol" @click="itemClick(item)">
+ <li v-for="(item, index) in healthcareListData.slice(0, 5)" :key="item.symbol"
+ @click="itemClick(item)">
<div class="flex-l">
<p>{{ item.name }}</p>
<p class="gray-text">
@@ -508,6 +511,7 @@
const isZh = language == "zh-CN" || language == "CN"
const isLoading = ref(false)
const initObjData = ref({})
+const sockets = ref(null)
const props = defineProps({
index: {
type: Number,
@@ -521,23 +525,26 @@
onMounted(async () => {
getNewsList()
- getRealtimeByType()
- publicRealtimeTop()
- letMeGo()
+ await getRealtimeByType()
+ await publicRealtimeTop()
+ await startStocksSocket()
+ // letMeGo() // 取消美股的轮询请求,通过ws来获取最新的数据
nextTick(() => {
renderFundChart(linesData)
})
})
-const emit = defineEmits(['changeLetMego'])
-const letMeGo = () => {
- emit('changeLetMego', () => {
- getRealtimeByType()
- publicRealtimeTop()
- })
-}
+// 轮询相关
+// const emit = defineEmits(['changeLetMego'])
+// const letMeGo = () => {
+// emit('changeLetMego', () => {
+// getRealtimeByType()
+// publicRealtimeTop()
+// })
+// }
onBeforeUnmount(() => {
fundChart && fundChart.dispose()
+ sockets.value && sockets.value.close()
})
const renderFundChart = (_rawData) => {
@@ -639,6 +646,7 @@
type: 'US-stocks',
}).then(data => {
indexCardInfo.value = data.slice(0, 3) || []
+ initObjData.value = data[0]
}).catch((e) => {
})
@@ -659,8 +667,75 @@
energyListData.value = data.filter(item => item.category.indexOf('energy') > -1) || []
manufacturingListData.value = data.filter(item => item.category.indexOf('manufacturing') > -1) || []
chineseListData.value = data.filter(item => item.category.indexOf('chinese') > -1) || []
- initObjData.value = data[0]
+ // initObjData.value = data[0]
})
+}
+
+// 去除字符串中的 % 符号
+const removePercentSign = (str) => {
+ if (typeof str === 'string' && str.includes('%')) {
+ return str.replace(/%/g, '')
+ }
+ return str
+}
+
+const startStocksSocket = () => {
+ sockets.value = new WebSocket(`wss://ws.sceazy.com/websocket-server`)
+ sockets.value.onmessage = (evt) => {
+ const { data } = evt
+ const _data = JSON.parse(data)
+
+ // 处理 pcp 值，去除 % 符号
+ const pcpValue = removePercentSign(_data.pcp)
+
+ let upData = prominentListData.value.find(item => item.pid == _data.pid);
+ if (upData) {
+ upData.changeRatio = pcpValue;
+ upData.close = _data.last;
+ }
+
+ let upData1 = technologyListData.value.find(item => item.pid == _data.pid);
+ if (upData1) {
+ upData1.changeRatio = pcpValue;
+ upData1.close = _data.last;
+ }
+
+ let upData2 = dinancialListData.value.find(item => item.pid == _data.pid);
+ if (upData2) {
+ upData2.changeRatio = pcpValue;
+ upData2.close = _data.last;
+ }
+
+ let upData3 = healthcareListData.value.find(item => item.pid == _data.pid);
+ if (upData3) {
+ upData3.changeRatio = pcpValue;
+ upData3.close = _data.last;
+ }
+
+ let upData4 = energyListData.value.find(item => item.pid == _data.pid);
+ if (upData4) {
+ upData4.changeRatio = pcpValue;
+ upData4.close = _data.last;
+ }
+
+ let upData5 = manufacturingListData.value.find(item => item.pid == _data.pid);
+ if (upData5) {
+ upData5.changeRatio = pcpValue;
+ upData5.close = _data.last;
+ }
+
+ let upData6 = chineseListData.value.find(item => item.pid == _data.pid);
+ if (upData6) {
+ upData6.changeRatio = pcpValue;
+ upData6.close = _data.last;
+ }
+
+ let upData7 = indexCardInfo.value.find(item => item.pid == _data.pid);
+ if (upData7) {
+ upData7.changeRatio = pcpValue;
+ upData7.close = _data.last;
+ }
+ }
}
const onRoute = (path) => {
@@ -682,6 +757,7 @@
}
})
</script>
+
<style lang="scss" scoped>
.loading-box-us {
position: absolute;
@@ -1086,7 +1162,7 @@
flex: 1;
align-self: center;
text-align: center;
-
+
&:last-child {
text-align: right;
}
--
Gitblit v1.9.3