<template>
|
<div class="home_ltl">
|
<div class="tabs_box">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="United States" name="US"></el-tab-pane>
|
<el-tab-pane label="Hong Kong" name="HK"></el-tab-pane>
|
<el-tab-pane label="Taiwan" name="TW"></el-tab-pane>
|
<el-tab-pane label="India" name="IN"></el-tab-pane>
|
</el-tabs>
|
</div>
|
|
<div class="search_box">
|
<el-input
|
:placeholder="$t('请输入')"
|
v-model="keyWords"
|
clearable
|
size="small"
|
>
|
<el-button
|
slot="append"
|
icon="el-icon-search"
|
@click="Search"
|
></el-button>
|
</el-input>
|
</div>
|
|
<div class="resoult_list">
|
<el-table
|
height="100%"
|
:data="tableData"
|
style="width: 100%"
|
size="small"
|
empty-text="No Data"
|
@row-click="Choice"
|
>
|
<el-table-column prop="spell" :label="$t('hj313')">
|
<template slot-scope="scope">
|
<el-tag
|
:type="scope.row.stock_type != $mc ? 'success' : ''"
|
size="small"
|
style="margin-right: 8px"
|
>
|
{{ scope.row.stock_type }}
|
</el-tag>
|
<span>{{ scope.row.spell }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="nowPrice" :label="$t('Price')" width="100">
|
</el-table-column>
|
|
<el-table-column
|
prop="hcrateP"
|
:label="$t('Change')"
|
align="right"
|
width="80"
|
>
|
<template slot-scope="scope">
|
<div
|
:class="{
|
red: scope.row.hcrate < 0,
|
green: scope.row.hcrate > 0,
|
}"
|
>
|
{{ scope.row.hcrateP }}
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<div class="pagination_box">
|
<el-pagination
|
layout="prev, next"
|
:total="total"
|
:current-page="pageNum"
|
:page-size="pageSize"
|
@current-change="handleCurrentChange"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
// import handleDt from "@/utils/deTh";
|
import { WhrWebSocket } from "@/utils/WhrWebSocket";
|
import mixins from "@/mixins/myMixins"; // 混入
|
export default {
|
mixins: [mixins],
|
data() {
|
return {
|
activeName: "US",
|
keyWords: "",
|
// 列表参数,必须是opt和myMixins混入配合使用
|
opt: {},
|
};
|
},
|
created() {
|
this.pageSize = 50;
|
this.opt.stockType = this.activeName; // 赋值类型
|
this.apiInterface = api.getStockByType; // 赋值接口
|
this.init(); // 获取记录列表
|
// this.initWebSocket(); // 连接ws实时监控变动
|
},
|
watch: {
|
activeName: {
|
handler(val) {
|
// 根据当前股票类型连接对应的ws
|
if (val == "US")
|
this.initWebSocket("wss://usws.yanshiz.com/websocket-server");
|
else this.initWebSocket("wss://ws.acapl.net/websocket-server");
|
},
|
immediate: true,
|
deep: true,
|
},
|
},
|
computed: {
|
tableData() {
|
return this.list;
|
},
|
},
|
props: {
|
total: {
|
type: Number,
|
default: 0,
|
},
|
pageNum: {
|
type: Number,
|
default: 1,
|
},
|
},
|
components: {},
|
mounted() {},
|
beforeDestroy() {
|
if (this.Trade) {
|
this.Trade.close();
|
console.log("WebSocket disconnected");
|
}
|
},
|
methods: {
|
handleClick() {
|
this.opt.stockType = this.activeName;
|
this.init();
|
},
|
Search() {
|
this.opt.keyWords = this.keyWords;
|
this.init();
|
},
|
// 股票选择
|
Choice(val) {
|
this.$emit("choice", val.code);
|
},
|
// 连接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.tableData.find((item) => item.code == pid);
|
if (userToUpdate) {
|
// 更新对象数据
|
userToUpdate.nowPrice = result.last;
|
userToUpdate.hcrateP = result.pcp;
|
}
|
},
|
getListAfter() {
|
if (this.once) return;
|
this.Choice(this.tableData[0]);
|
this.once = true;
|
},
|
},
|
beforeDestroy() {
|
if (this.Trade) {
|
this.Trade.close();
|
console.log("WebSocket disconnected");
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.home_ltl {
|
width: 360px;
|
border-right: 1px solid #ebeef5;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
.red {
|
color: #ee0a24 !important;
|
}
|
.green {
|
color: #07c160 !important;
|
}
|
.resoult_list {
|
height: 0;
|
flex: 1;
|
}
|
.pagination_box {
|
display: flex;
|
justify-content: flex-end;
|
// border-top: 1px solid #ebeef5;
|
}
|
.search_box {
|
padding: 10px;
|
border-bottom: 1px solid #ebeef5;
|
}
|
|
.tabs_box {
|
padding: 0 16px;
|
|
::v-deep .el-tabs__header {
|
margin-bottom: 0;
|
}
|
}
|
}
|
</style>
|
