diff --git a/src/views/exchangeStock/index.vue b/src/views/exchangeStock/index.vue index fcb62b9..382326f 100644 --- a/src/views/exchangeStock/index.vue +++ b/src/views/exchangeStock/index.vue @@ -47,6 +47,8 @@ ref="popover" width="400" trigger="click" + @show="popoverVisible = true" + @hide="popoverVisible = false" >
@@ -56,52 +58,45 @@
- + {{ item.price }} + + + {{ item.increaseStr }} + + + +
@@ -207,6 +202,10 @@ to: '-', }, marketList: [], // 在symbol组件中 需要遍历 因此默认数组避免出错 + symbolMarketMap: {}, + popoverVisible: false, + marketListPending: null, + marketListUpdateTimer: null, trade: [], pcBannerList: [], newTrade: null, @@ -312,15 +311,18 @@ }; } }, - activeContract(val) { - let marketList=this.marketList - .map(item => item.marketInfoList) - .flat() - .find(item => item.symbol == this.symbol) || {} - if(val.price){ - delete marketList.price - } - return marketList; + activeContract() { + return this.symbolMarketMap[this.symbol] || {}; + }, + flatMarketList() { + if (!this.popoverVisible) return []; + const list = []; + this.marketList.forEach(group => { + (group.marketInfoList || []).forEach(item => { + list.push(item); + }); + }); + return list; }, }, @@ -405,6 +407,59 @@ ispopover1(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() { // 初始化订阅marketList数据 this.ws.send({ @@ -652,13 +707,7 @@ case "exchangeMarketList": - this.marketList = data; - - if (!this.symbol) { - this.initDefaultSymbol(data); - } else { - this.findMarketBySymbol(); - } + this.scheduleMarketListUpdate(data); break; @@ -708,13 +757,16 @@ this.indexList() Market.getstockMarketList().then(data => { - this.marketList = data; - this.initDefaultSymbol(data); + this.updateMarketList(data); }).catch(err => {}); // this.update(); }, beforeDestroy() { clearInterval(this.timer); + if (this.marketListUpdateTimer) { + clearTimeout(this.marketListUpdateTimer); + this.marketListUpdateTimer = null; + } }, mounted() {