From 35ba5f69dc6f207e73c99af9c46e0820a7388852 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Sat, 26 Jul 2025 17:49:17 +0800
Subject: [PATCH] 1
---
src/components/stock-list.vue | 73 +++++++++++++++++++-----------------
1 files changed, 38 insertions(+), 35 deletions(-)
diff --git a/src/components/stock-list.vue b/src/components/stock-list.vue
index a2b8ad3..03e8878 100644
--- a/src/components/stock-list.vue
+++ b/src/components/stock-list.vue
@@ -6,12 +6,7 @@
<van-col span="8" class="flex-end head_item">{{ $t("Change") }}</van-col>
</van-row>
- <van-row
- class="markets_item"
- v-for="item in stockList"
- :key="item.id"
- @click="toDetails(item)"
- >
+ <van-row class="markets_item" v-for="item in stockList" :key="item.id" @click="toDetails(item)">
<van-col span="12" class="item_n">
<div class="flex-start">
<span class="i_icon">{{ item.stock_type }}</span>
@@ -22,43 +17,25 @@
<van-col span="4" class="flex-start item_n">{{ item.nowPrice }}</van-col>
<van-col span="8" class="item_n">
- <div
- class="flex-end"
- style="margin-bottom: .15em;"
- :class="{ red: item.hcrate < 0, green: item.hcrate > 0 }"
- >
+ <div class="flex-end" style="margin-bottom: .15em;" :class="{ red: item.hcrate < 0, green: item.hcrate > 0 }">
{{ item.hcrate }}
</div>
- <div
- class="flex-end"
- :class="{ red: item.hcrate < 0, green: item.hcrate > 0 }"
- >
+ <div class="flex-end" :class="{ red: item.hcrate < 0, green: item.hcrate > 0 }">
{{ item.hcrateP }}
</div>
</van-col>
- <div
- class="edit flex-end"
- v-show="editorShow"
- @click.stop="deleteStock(item)"
- >
+ <div class="edit flex-end" v-show="editorShow" @click.stop="deleteStock(item)">
<span>{{ $t("移除") }}</span>
</div>
</van-row>
<!-- 无数据时显示 -->
- <div
- class="no_data flex-center"
- v-show="!stockList || stockList.length == 0"
- >
+ <div class="no_data flex-center" v-show="!stockList || stockList.length == 0">
<img src="@/assets/img/zhaobudao2.png" alt="" />
</div>
- <n-pagination
- :pageNo.sync="pageNum"
- :pageSize="pageSize"
- :total="total"
- ></n-pagination>
+ <n-pagination :pageNo.sync="pageNum" :pageSize="pageSize" :total="total"></n-pagination>
</div>
</template>
@@ -66,6 +43,7 @@
import nPagination from "@/components/nPagination.vue";
import * as api from "@/axios/api";
import { Toast } from "vant";
+import { WhrWebSocket } from "@/utils/WhrWebSocket";
export default {
name: "stock_list",
components: {
@@ -113,6 +91,7 @@
},
mounted() {
this.getStockList();
+ this.initWebSocket();
},
methods: {
// 获取数据
@@ -161,8 +140,34 @@
} else {
Toast.fail(data.msg);
}
+ },
+ // 连接ws实时监控变动
+ initWebSocket() {
+ console.log("initWebSocket");
+ this.Trade = new WhrWebSocket({
+ path: `wss://ws.kuspitai.com/websocket-server `,
+ onmessage: this.getTradeMessage,
+ });
+
+ this.Trade.init();
+ },
+ getTradeMessage({ data }) {
+ let result = JSON.parse(data);
+ let pid = result.pid;
+ let userToUpdate = this.stockList.find((item) => item.code == pid);
+ if (userToUpdate) {
+ // 更新对象数据
+ userToUpdate.nowPrice = result.last;
+ userToUpdate.hcrateP = result.pcp;
+ }
+ },
+ },
+ beforeDestroy() {
+ if (this.Trade) {
+ this.Trade.close();
+ console.log('WebSocket disconnected');
}
- }
+ },
};
</script>
@@ -227,11 +232,9 @@
position: absolute;
top: 0;
left: 0;
- background: linear-gradient(
- to right,
- rgba(0, 0, 0, 0),
- rgba(0, 0, 0, 0.8)
- );
+ background: linear-gradient(to right,
+ rgba(0, 0, 0, 0),
+ rgba(0, 0, 0, 0.8));
text-align: end;
color: @red;
padding-right: 0.25em;
--
Gitblit v1.9.3