<template>
|
<div class="stock_list">
|
<van-row class="markets_head">
|
<van-col span="12" class="flex-start head_item">{{ $t("Name") }}</van-col>
|
<van-col span="4" class="flex-start head_item">{{ $t("Price") }}</van-col>
|
<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-col span="12" class="item_n">
|
<div class="flex-start">
|
<span class="i_icon">{{ item.stock_type }}</span>
|
<span class="i_hint">{{ item.spell }}</span>
|
</div>
|
<div class="i_name">{{ item.name }}</div>
|
</van-col>
|
<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 }"
|
>
|
{{ item.hcrate }}
|
</div>
|
<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)"
|
>
|
<span>{{ $t("移除") }}</span>
|
</div>
|
</van-row>
|
|
<!-- 无数据时显示 -->
|
<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>
|
</div>
|
</template>
|
|
<script>
|
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: {
|
nPagination
|
},
|
data() {
|
return {
|
pageNum: 1,
|
pageSize: 10,
|
total: 1,
|
stockList: [],
|
premarketTimer: null // 盘前数据轮询定时器
|
};
|
},
|
props: {
|
propOption: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
listApi: {
|
default: () => {
|
return api.getStockByType;
|
}
|
},
|
// 编辑状态
|
editorShow: {
|
type: Boolean,
|
default: false
|
}
|
},
|
watch: {
|
propOption: {
|
handler(val) {
|
// 根据当前股票类型连接对应的ws
|
if (val.stockType == "US")
|
this.initWebSocket("wss://ws.sceazy.com/websocket-server");
|
else this.initWebSocket("wss://ws.jafco1.cc/websocket-server");
|
|
this.pageNum = 1;
|
this.getStockList();
|
},
|
deep: true,
|
immediate: true
|
},
|
pageNum: {
|
handler(val) {
|
// this.stockList = [];
|
this.getStockList();
|
}
|
}
|
},
|
mounted() {
|
this.getStockList();
|
// this.initWebSocket();
|
this.getPremarketStock();
|
this.startPremarketPolling();
|
},
|
methods: {
|
// 获取数据
|
async getStockList() {
|
let opt = {
|
pageNum: this.pageNum,
|
pageSize: this.pageSize,
|
stockPlate: "",
|
keyWords: "",
|
// stockType: '',
|
orderBy: ""
|
};
|
|
opt = { ...opt, ...this.propOption };
|
|
let data = await this.listApi(opt);
|
this.stockList = data.data.list;
|
this.total = data.data.total || 1;
|
// 列表更新后，重新应用盘前数据（如果轮询已启动）
|
if (this.premarketTimer) {
|
this.getPremarketStock();
|
}
|
},
|
// 获取后台设置的盘前数据
|
async getPremarketStock() {
|
try {
|
let data = await api.getPremarketStock({});
|
if (data.status === 0) {
|
let list = data.data || [];
|
// 通过code匹配，更新stockList中的nowPrice
|
list.forEach((premarketItem) => {
|
const stockItem = this.stockList.find(
|
(item) => item.code === premarketItem.code
|
);
|
if (stockItem && premarketItem.price) {
|
// 更新价格
|
stockItem.nowPrice = premarketItem.price;
|
stockItem.hcrate = premarketItem.hcrate;
|
stockItem.hcrateP = premarketItem.hcrateP;
|
// 标记该价格已被盘前数据更新，防止WebSocket覆盖
|
this.$set(stockItem, 'isPremarketUpdated', true);
|
}
|
});
|
}
|
} catch (error) {
|
console.error('获取盘前数据失败:', error);
|
}
|
},
|
// 启动盘前数据轮询
|
startPremarketPolling() {
|
// 清除已有定时器
|
this.stopPremarketPolling();
|
// 每3秒轮询一次（可根据需要调整间隔）
|
this.premarketTimer = setInterval(() => {
|
this.getPremarketStock();
|
}, 3000);
|
},
|
// 停止盘前数据轮询
|
stopPremarketPolling() {
|
if (this.premarketTimer) {
|
clearInterval(this.premarketTimer);
|
this.premarketTimer = null;
|
}
|
},
|
// 点击进入详情
|
toDetails(item) {
|
const obj = {
|
pid: item.code || "",
|
type: item.stock_type || ""
|
};
|
window.localStorage.setItem("kLine", JSON.stringify(obj));
|
|
this.$router.push({
|
path: "/kline",
|
query: {
|
code: item.code,
|
type: item.stock_type
|
}
|
});
|
},
|
// 删除自选股
|
async deleteStock(item) {
|
let opt = {
|
code: item.code
|
};
|
let data = await api.delOption(opt);
|
if (data.status === 0) {
|
this.$emit("update:editorShow", false);
|
Toast.success(data.msg);
|
this.getStockList();
|
} else {
|
Toast.fail(data.msg);
|
}
|
},
|
// 连接ws实时监控变动
|
initWebSocket(url) {
|
console.log("initWebSocket");
|
if (this.Trade) {
|
this.Trade.close();
|
}
|
this.Trade = new WhrWebSocket({
|
path: url,
|
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) {
|
// 如果该股票的价格已被盘前数据更新，则不再通过WebSocket覆盖
|
if (!userToUpdate.isPremarketUpdated) {
|
// 更新对象数据
|
userToUpdate.nowPrice = result.last;
|
userToUpdate.hcrateP = result.pcp;
|
userToUpdate.hcrate = result.pc;
|
}
|
}
|
}
|
},
|
beforeDestroy() {
|
// 清除WebSocket连接
|
if (this.Trade) {
|
this.Trade.close();
|
console.log("WebSocket disconnected");
|
}
|
// 清除盘前数据轮询定时器
|
this.stopPremarketPolling();
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@green2: #f0f0f0;
|
@dark_green: #07c160;
|
@red: #ee0a24;
|
|
.stock_list {
|
.markets_head {
|
background-color: @green2;
|
margin-top: 0.25em;
|
height: 1em;
|
padding: 0 0.25em;
|
|
.head_item {
|
font-size: 0.4em;
|
height: 100%;
|
font-weight: 600;
|
}
|
}
|
|
.markets_item {
|
// margin-top: .25em;
|
// height: 1em;
|
padding: 0.5em 0.25em 0.25em;
|
border-bottom: #f5f5f5 solid 0.01em;
|
position: relative;
|
|
.item_n {
|
font-size: 0.4em;
|
min-height: 2em;
|
font-weight: 500;
|
|
.i_icon {
|
border-radius: 0 26em 26em 0;
|
background: @dark_green;
|
color: #fff;
|
padding: 0.1em 0.5em 0.1em 0.4em;
|
margin-right: 0.3em;
|
font-size: 0.8em;
|
}
|
|
.i_name {
|
margin-top: 0.3em;
|
color: #777777;
|
font-size: 0.8em;
|
}
|
}
|
|
.up {
|
color: @dark_green;
|
}
|
|
.down {
|
color: @red;
|
}
|
|
.edit {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
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;
|
|
span {
|
font-size: 0.55em;
|
}
|
}
|
}
|
}
|
</style>
|
