Browse Source

优化市场列表显示逻辑,新增符号市场映射和弹出框可见性管理,改进数据更新机制以支持延迟加载和合并市场数据。

master
TorsenLi 1 week ago
parent
commit
80a5d8b97b
  1. 112
      src/views/exchangeStock/index.vue

112
src/views/exchangeStock/index.vue

@ -47,6 +47,8 @@
ref="popover" ref="popover"
width="400" width="400"
trigger="click" trigger="click"
@show="popoverVisible = true"
@hide="popoverVisible = false"
> >
<div slot="reference"> <div slot="reference">
<!-- {{ activeContract.pair_name }} --> <!-- {{ activeContract.pair_name }} -->
@ -56,14 +58,11 @@
</el-button> </el-button>
</div> </div>
<div <div
v-if="popoverVisible"
class="markets-pair-list" class="markets-pair-list"
style="max-height:300px;overflow:auto;" style="max-height:300px;overflow:auto;"
> >
<template v-for="parent in marketList"> <table class="table">
<div class="px-3 text-primary" :key="parent.coin_name">
<!-- {{ parent.coin_name }} -->
</div>
<table class="table" :key="parent.coin_name + 1">
<thead> <thead>
<tr class="text-secondary"> <tr class="text-secondary">
<th class="w-10/24">{{ $t("contract.h5") }}</th> <th class="w-10/24">{{ $t("contract.h5") }}</th>
@ -74,23 +73,20 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<!-- @click="symbol = item.symbol" -->
<tr <tr
v-for="item in parent.marketInfoList" v-for="item in flatMarketList"
:key="item.symbol" :key="item.symbol"
:class="{ active: item.symbol == symbol }" :class="{ active: item.symbol == symbol }"
@click="ispopover1(item.symbol)" @click="ispopover1(item.symbol)"
> >
<td class="w-10/24"> <td class="w-10/24">
<!-- {{ item.symbol }}/{{ parent.coin_name }} -->
{{ item.coin_name }} {{ item.coin_name }}
</td> </td>
<td <td
class="w-7/24 " class="w-7/24"
:class="item.increase < 0 ? 'decreace' : 'increace'" :class="item.increase < 0 ? 'decreace' : 'increace'"
> >
{{item.price}} {{ item.price }}
<!-- item.symbol == symbol ? price1 : -->
</td> </td>
<td <td
class="w-7/24" class="w-7/24"
@ -101,7 +97,6 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</template>
</div> </div>
</el-popover> </el-popover>
</div> </div>
@ -207,6 +202,10 @@
to: '-', to: '-',
}, },
marketList: [], // symbol marketList: [], // symbol
symbolMarketMap: {},
popoverVisible: false,
marketListPending: null,
marketListUpdateTimer: null,
trade: [], trade: [],
pcBannerList: [], pcBannerList: [],
newTrade: null, newTrade: null,
@ -312,15 +311,18 @@
}; };
} }
}, },
activeContract(val) { activeContract() {
let marketList=this.marketList return this.symbolMarketMap[this.symbol] || {};
.map(item => item.marketInfoList) },
.flat() flatMarketList() {
.find(item => item.symbol == this.symbol) || {} if (!this.popoverVisible) return [];
if(val.price){ const list = [];
delete marketList.price this.marketList.forEach(group => {
} (group.marketInfoList || []).forEach(item => {
return marketList; list.push(item);
});
});
return list;
}, },
}, },
@ -405,6 +407,59 @@
ispopover1(item){ ispopover1(item){
this.symbol=item; this.symbol=item;
}, },
rebuildSymbolMarketMap() {
const map = {};
this.marketList.forEach(group => {
(group.marketInfoList || []).forEach(item => {
map[item.symbol] = item;
});
});
this.symbolMarketMap = map;
},
mergeMarketListInPlace(newData) {
const symbolMap = {};
newData.forEach(group => {
(group.marketInfoList || []).forEach(item => {
symbolMap[item.symbol] = item;
});
});
this.marketList.forEach(group => {
(group.marketInfoList || []).forEach((item, index) => {
const updated = symbolMap[item.symbol];
if (updated) {
this.$set(group.marketInfoList, index, Object.assign({}, item, updated));
}
});
});
this.rebuildSymbolMarketMap();
},
updateMarketList(data) {
if (!data || !data.length) return;
if (!this.marketList.length) {
this.marketList = data;
this.rebuildSymbolMarketMap();
} else {
this.mergeMarketListInPlace(data);
}
if (!this.symbol) {
this.initDefaultSymbol(data);
} else {
this.findMarketBySymbol();
}
},
scheduleMarketListUpdate(data) {
if (!this.popoverVisible) {
this.updateMarketList(data);
return;
}
this.marketListPending = data;
if (this.marketListUpdateTimer) return;
this.marketListUpdateTimer = setTimeout(() => {
this.updateMarketList(this.marketListPending);
this.marketListPending = null;
this.marketListUpdateTimer = null;
}, 300);
},
initMarket() { initMarket() {
// marketList // marketList
this.ws.send({ this.ws.send({
@ -652,13 +707,7 @@
case "exchangeMarketList": case "exchangeMarketList":
this.marketList = data; this.scheduleMarketListUpdate(data);
if (!this.symbol) {
this.initDefaultSymbol(data);
} else {
this.findMarketBySymbol();
}
break; break;
@ -708,13 +757,16 @@
this.indexList() this.indexList()
Market.getstockMarketList().then(data => { Market.getstockMarketList().then(data => {
this.marketList = data; this.updateMarketList(data);
this.initDefaultSymbol(data);
}).catch(err => {}); }).catch(err => {});
// this.update(); // this.update();
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.timer); clearInterval(this.timer);
if (this.marketListUpdateTimer) {
clearTimeout(this.marketListUpdateTimer);
this.marketListUpdateTimer = null;
}
}, },
mounted() { mounted() {

Loading…
Cancel
Save