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 @@
-
-
-
-
-
-
-
- | {{ $t("contract.h5") }} |
- {{ $t("contract.g3") }} |
-
- {{ $t("contract.h6") }}
- |
-
-
-
-
-
+
+
+ | {{ $t("contract.h5") }} |
+ {{ $t("contract.g3") }} |
+
+ {{ $t("contract.h6") }}
+ |
+
+
+
+
+ |
+ {{ item.coin_name }}
+ |
+
- |
-
- {{ item.coin_name }}
- |
-
- {{item.price}}
-
- |
-
- {{ item.increaseStr }}
- |
-
-
-
-
+ {{ 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() {