From cc9e88924fd45b2893d2fb4213ca980e026611a4 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Wed, 07 Jan 2026 10:24:45 +0800
Subject: [PATCH] 1
---
src/views/usStock/Detail.vue | 138 +++++++++++++++++++++++++++++----------------
1 files changed, 88 insertions(+), 50 deletions(-)
diff --git a/src/views/usStock/Detail.vue b/src/views/usStock/Detail.vue
index d95f270..0e1c4de 100644
--- a/src/views/usStock/Detail.vue
+++ b/src/views/usStock/Detail.vue
@@ -50,8 +50,8 @@
<span class="value">{{ formatMoney(chartData?.open) }}</span>
</p>
<p class="flex">
- <span class="label">{{ $t("quantity") }}</span>
- <span class="value">{{ formatMoney(chartData?.volume) }}</span>
+ <span class="label">{{ $t("收") }}</span>
+ <span class="value">{{ formatMoney(chartData?.close) }}</span>
</p>
<!-- <p class="flex">
<span class="label">{{ $t("Change") }}</span>
@@ -60,7 +60,7 @@
}}</span>
</p> -->
</div>
- <div class="flex-r-item">
+ <!-- <div class="flex-r-item">
<p class="flex">
<span class="label">{{ $t("Forehead") }}</span>
<span class="value">{{ formatMoney(chartData?.volume) }}</span>
@@ -75,9 +75,9 @@
</p>
<p class="flex">
<span class="label">{{ $t("amplitude") }}</span>
- <span class="value">{{ formatMoney(chartData?.changeRatio) }}</span>
+ <span class="value">{{ formatMoney(chartData?.amplitude) }}</span>
</p>
- </div>
+ </div> -->
</div>
</section>
<p class="status-info" v-if="chartData?.market?.status">
@@ -110,11 +110,11 @@
</section>
<section class="kline-container flex">
<div class="chart-index">
- <fx-kline :height="400" :symbol="symbol" :isShowsolid="true" :chartType="chartType" v-if="symbol" @data="onData"
- :key="`${symbol}-${timeValue}`" />
+ <fx-kline :height="400" :symbol="symbol" :isShowsolid="true" :chartType="chartType" v-if="symbol"
+ @data="onData" :key="`${symbol}-${timeValue}`" />
</div>
<div class="order-book-container"
- v-if="timeLabelActive === 0 && !['HK-stocks', 'JP-stocks'].includes(symbolType)">
+ v-if="timeLabelActive === -1 && !['HK-stocks', 'JP-stocks'].includes(symbolType)">
<!-- <keep-alive>
<trade-deep-data :symbol="symbol" v-if="symbol" :price="price" class="trade-deep-container" />
</keep-alive> -->
@@ -127,7 +127,7 @@
<div class="justify-between flex flex-1">
<span :class="item.trade_volume >= 100 ? 'text-green' : 'text-red'">{{
item.current ?
- Number(item.current).toFixed(3) : '--'
+ Number(item.current).toFixed(3) : '--'
}}</span>
<span class="text-right textColor" :class="item.trade_volume >= 100 ? 'text-green' : ''">{{
formatMoney(item?.trade_volume)
@@ -141,11 +141,11 @@
<div class="all-etf-ranking">
<div class="tabs flex">
<div class="tab-item" v-for="(item, index) in tabList" @click="selectTabIndex(index, item.value)"
- :class="[tabIndex === index ? 'active' : '']" :key="item">
+ :class="[tabIndex === item.value ? 'active' : '']" :key="item">
{{ item.title }}
</div>
</div>
- <F10Details :details="details" v-if="tabIndex === 0" />
+ <!-- <F10Details :details="details" v-if="tabIndex === 0" /> -->
<div class="new-trade" v-if="tabIndex === 1">
<ul class="px-12 text-grey">
<li class="flex justify-between mt-30">
@@ -278,7 +278,7 @@
const active = ref(0)
const timeLabelActive = ref(0)
const chartType = ref('')
-const tabIndex = ref(0)
+const tabIndex = ref(1)
const constituentList = ref([])
const isConstituent = ref(false)
const price = ref('')
@@ -303,7 +303,7 @@
const bids = ref(arr)
const tabList = route.query.symbolType === 'US-stocks' ? ref([
- { title: t('ProfileF10'), value: 0 },
+ // { title: t('ProfileF10'), value: 0 },
{ title: t('最新交易'), value: 1 },
{ title: t('深度图'), value: 2 },
]) : ref([
@@ -311,22 +311,46 @@
])
const filterOne = ref([
- { name: t('分时'), paramsValue: 'timeSharing', seconds: 1 * 60 * 1000, index: 0, },
- { name: '1' + t('天'), paramsValue: '1day', seconds: 1 * 24 * 60 * 60 * 1000, index: 1, },
- { name: '1' + t('周'), paramsValue: '1week', seconds: 7 * 24 * 60 * 60 * 1000, index: 2, },
- { name: '1' + t('月'), paramsValue: '1mon', seconds: 30 * 24 * 60 * 60 * 1000, index: 3, },
- { name: '5' + t('天'), paramsValue: '5day', seconds: 5 * 24 * 60 * 60 * 1000, index: 4, },
- { name: t('season'), paramsValue: '1quarter', seconds: 3 * 30 * 24 * 60 * 60 * 1000, index: 5, },
- { name: t('Year'), paramsValue: '1year', seconds: 12 * 30 * 24 * 60 * 60 * 1000, index: 6, },
+ { name: '1' + t('分'), paramsValue: '1', seconds: 1 * 60 * 1000, index: 12, },
+ { name: '1' + t('周'), paramsValue: 'W', seconds: 7 * 24 * 60 * 60 * 1000, index: 2, },
+ { name: '1' + t('月'), paramsValue: 'M', seconds: 30 * 24 * 60 * 60 * 1000, index: 3, },
+ { name: '1' + t('天'), paramsValue: 'D', seconds: 1 * 24 * 60 * 60 * 1000, index: 4, },
+
+ // 乱序的
+ // { name: "1" + t("分"), paramsValue: "1day", seconds: 1 * 60 * 1000, index: 12 },
+ // { name: "15" + t("分"), paramsValue: "1week", seconds: 15 * 60 * 1000, index: 10 },
+ // { name: "30" + t("分"), paramsValue: "1mon", seconds: 30 * 60 * 1000, index: 9 },
+ // { name: "120" + t("分"), paramsValue: "1quarter", seconds: 2 * 60 * 60 * 1000, index: 7 },
+
+ // {
+ // name: "1" + t("天"),
+ // paramsValue: "1year",
+ // seconds: 1 * 24 * 60 * 60 * 1000,
+ // index: 1,
+ // },
+ // 原本的
+ // { name: t('分时'), paramsValue: 'timeSharing', seconds: 1 * 60 * 1000, index: 0, },
+ // { name: '1' + t('天'), paramsValue: '1day', seconds: 1 * 24 * 60 * 60 * 1000, index: 1, },
+ // { name: '1' + t('周'), paramsValue: '1week', seconds: 7 * 24 * 60 * 60 * 1000, index: 2, },
+ // { name: '1' + t('月'), paramsValue: '1mon', seconds: 30 * 24 * 60 * 60 * 1000, index: 3, },
+ // { name: '5' + t('天'), paramsValue: '5day', seconds: 5 * 24 * 60 * 60 * 1000, index: 4, },
+ // { name: t('season'), paramsValue: '1quarter', seconds: 3 * 30 * 24 * 60 * 60 * 1000, index: 5, },
+ // { name: t('Year'), paramsValue: '1year', seconds: 12 * 30 * 24 * 60 * 60 * 1000, index: 6, },
])
const filterTwo = ref([
- { name: '120' + t('分'), paramsValue: '120min', seconds: 2 * 60 * 60 * 1000, index: 7, },
- { name: '60' + t('分'), paramsValue: '60min', seconds: 1 * 60 * 60 * 1000, index: 8, },
- { name: '30' + t('分'), paramsValue: '30min', seconds: 30 * 60 * 1000, index: 9, },
- { name: '15' + t('分'), paramsValue: '15min', seconds: 15 * 60 * 1000, index: 10, },
- { name: '5' + t('分'), paramsValue: '5min', seconds: 5 * 60 * 1000, index: 11, },
- { name: '1' + t('分'), paramsValue: '1min', seconds: 1 * 60 * 1000, index: 12, },
+ { name: '60' + t('分'), paramsValue: '60', seconds: 60 * 60 * 1000, index: 7, },
+ { name: '45' + t('分'), paramsValue: '45', seconds: 45 * 60 * 1000, index: 8, },
+ { name: '30' + t('分'), paramsValue: '30', seconds: 30 * 60 * 1000, index: 9, },
+ { name: '15' + t('分'), paramsValue: '15', seconds: 15 * 60 * 1000, index: 10, },
+ { name: '5' + t('分'), paramsValue: '5', seconds: 5 * 60 * 1000, index: 11, },
+ // 原本的
+ // { name: '120' + t('分'), paramsValue: '120min', seconds: 2 * 60 * 60 * 1000, index: 7, },
+ // { name: '60' + t('分'), paramsValue: '60min', seconds: 1 * 60 * 60 * 1000, index: 8, },
+ // { name: '30' + t('分'), paramsValue: '30min', seconds: 30 * 60 * 1000, index: 9, },
+ // { name: '15' + t('分'), paramsValue: '15min', seconds: 15 * 60 * 1000, index: 10, },
+ // { name: '5' + t('分'), paramsValue: '5min', seconds: 5 * 60 * 1000, index: 11, },
+ // { name: '1' + t('分'), paramsValue: '1min', seconds: 1 * 60 * 1000, index: 12, },
])
const leftIcon = new URL(`../../assets/theme/${thStore.theme}/image/black-convert.png`, import.meta.url)
@@ -354,9 +378,9 @@
getIsItemHasAddGlobal()
// 默认日k
handleClickSelectTime({
- paramsValue: 'timeSharing',
- seconds: 1 * 24 * 60 * 60 * 1000,
- index: 0
+ paramsValue: '1',
+ seconds: 1 * 60 * 1000,
+ index: 12
})
})
@@ -381,24 +405,7 @@
}
})
-watch([tabIndex, symbol], ([val, val2]) => {
- if (val / 1 === 0) {
- sockets.value.deals && sockets.value.deals.close()
- sockets.value.deals = null
- if (val2) { // 刚进来可能是null
- symbol.value = val2
- startAskBidSocket()
- }
- } else {
- sockets.value.askBid && sockets.value.askBid.close()
- sockets.value.askBid = null
- startDealsSocket()
- }
-}, {
- immediate: true
-})
-
-const startAskBidSocket = () => { // 委托
+const startAskBidSocket = () => { // 委托和深度
sockets.value.askBid = new WebSocket(`${WS_URL}/3/${symbol.value}`)
sockets.value.askBid.onmessage = (evt) => {
const { data } = evt
@@ -414,16 +421,43 @@
}
}
const startDealsSocket = () => { // 交易
- sockets.value.deals = new WebSocket(`${WS_URL}/2/${symbol.value}`)
+ sockets.value.deals = new WebSocket(`${WS_URL}/3/${symbol.value}`)
sockets.value.deals.onmessage = (evt) => {
const { data } = evt
const { code, data: _data } = JSON.parse(data)
// todo: 数据有些问题
if (code / 1 === 0) {
- deals.value = _data.data.slice(0, 17)
+ // deals.value = _data.data.slice(0, 17)
+ let buys = _data.bids.map(item => {
+ item.direction = 'buy'
+ return item
+ })
+ let sells = _data.asks.map(item => {
+ item.direction = 'sell'
+ return item
+ })
+ deals.value = [...buys.slice(0, 8), ...sells.slice(0, 9)]
}
}
}
+
+watch([tabIndex, symbol], ([val, val2]) => {
+ if (val / 1 === 0 || val / 1 === 2) {
+ sockets.value.deals && sockets.value.deals.close()
+ sockets.value.deals = null
+ if (val2) { // 刚进来可能是null
+ symbol.value = val2
+ startAskBidSocket()
+ }
+ } else {
+ sockets.value.askBid && sockets.value.askBid.close()
+ sockets.value.askBid = null
+ startDealsSocket()
+ }
+}, {
+ immediate: true
+})
+
const closeSocket = () => {
sockets.value.quote && sockets.value.quote.close()
@@ -572,10 +606,14 @@
// 事件
const onData = (data) => {
+ console.log("dataaaaa", data);
+
chartData.value = data
// symbolType.value = data?.type
}
const fetchQuotes = () => {
+ // console.log("quotesStore", quotesStore.coins);
+
_getQuotes(quotesStore.coins).then(data => {
data.map(item => {
item.name = item.symbol
@@ -614,7 +652,7 @@
}
const selectTabIndex = (index, value) => {
- tabIndex.value = index
+ tabIndex.value = value
}
const handleClickMoreBtn = () => {
--
Gitblit v1.9.3