lizhixin
4 years ago
7 changed files with 750 additions and 165 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<custom-base-table |
|||
:data="data" |
|||
:columns="columns" |
|||
thead-classes="text-primary" |
|||
> |
|||
<template slot="LogType" slot-scope="item"> |
|||
{{ typeRender(item.row.item.LogType) }} |
|||
</template> |
|||
</custom-base-table> |
|||
</template> |
|||
|
|||
<script> |
|||
import Bus from "../../common/bus"; |
|||
import CustomBaseTable from "../../components/CustomBaseTable"; |
|||
import moment from "moment"; |
|||
export default { |
|||
props: { |
|||
RobotId: { type: String, default: "60521323-28C3-AC14-0076-48B075584510" } |
|||
}, |
|||
components: { CustomBaseTable }, |
|||
data() { |
|||
return { |
|||
columns: [ |
|||
{ name: "RobotId", prop: "RobotId" }, |
|||
{ name: "内容", prop: "Content" }, |
|||
{ |
|||
name: "日志类型", |
|||
prop: "LogType", |
|||
|
|||
customSlot: "LogType" |
|||
}, |
|||
{ |
|||
name: "订单Id", |
|||
prop: "SpotGoodsOrderId" |
|||
}, |
|||
{ name: "创建时间", prop: "CreateTime" } |
|||
], |
|||
data: [], |
|||
noMoreData: false, |
|||
endTime: null, |
|||
scrollInstance: null, |
|||
nullPlusTime: 0 |
|||
}; |
|||
}, |
|||
created() { |
|||
let endTime = moment(); |
|||
this.endTime = endTime; |
|||
this.getLatestLog(endTime); |
|||
}, |
|||
|
|||
mounted() { |
|||
Bus.$on("tradeLog", data => { |
|||
console.log(data, "received from ws Bus"); |
|||
this.data.unshift(data); |
|||
}); |
|||
this.initScroller(); |
|||
}, |
|||
|
|||
destroyed() { |
|||
if (this.scrollInstance) |
|||
this.scrollInstance.removeEventListener("scroll", this.scrollerListener); |
|||
}, |
|||
methods: { |
|||
initScroller() { |
|||
let target = document.getElementById("tradeLog"); |
|||
this.scrollInstance = target; |
|||
this.scrollInstance.addEventListener( |
|||
"scroll", |
|||
this.scrollerListener, |
|||
false |
|||
); |
|||
}, |
|||
|
|||
getPreday() {}, |
|||
|
|||
scrollerListener() { |
|||
// console.log( |
|||
// this.scrollInstance.scrollTop, |
|||
// this.scrollInstance.scrollHeight, |
|||
// this.scrollInstance.clientHeight |
|||
// ); |
|||
if ( |
|||
this.scrollInstance.scrollTop + this.scrollInstance.clientHeight == |
|||
this.scrollInstance.scrollHeight |
|||
) { |
|||
if (!this.spinning && !this.noMoreData) this.getLatestLog(this.endTime); |
|||
} |
|||
}, |
|||
|
|||
typeRender(logType) { |
|||
switch (logType) { |
|||
case 0: |
|||
return "买入"; |
|||
case 1: |
|||
return "卖出"; |
|||
case 2: |
|||
return "做多"; |
|||
case 3: |
|||
return "做空"; |
|||
case 4: |
|||
return "大趋势看多"; |
|||
case 5: |
|||
return "大趋势看空"; |
|||
case 10: |
|||
return "自动卖出"; |
|||
} |
|||
}, |
|||
getLatestLog(endTime) { |
|||
this.spinning = true; |
|||
let _endTime = endTime.format("YYYY-MM-DD HH:mm:ss"); |
|||
|
|||
this.$http |
|||
.get( |
|||
`/Api/ExecutionLog/GetList?robotId=${this.RobotId}&endTime=${_endTime}` |
|||
) |
|||
.then(res => { |
|||
this.spinning = false; |
|||
if (res.Code == 200) { |
|||
if (res.Data.length > 0) { |
|||
if (this.data.length > 0) { |
|||
res.Data.forEach(item => this.data.push(item)); |
|||
this.endTime = moment( |
|||
this.data[this.data.length - 1].CreateTime |
|||
); |
|||
} else { |
|||
this.data = res.Data; |
|||
} |
|||
} else { |
|||
this.noMoreData = true; |
|||
this.sMessage("danger", "已经没有更多日志了"); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
// 封装showNotification |
|||
sMessage(type, message) { |
|||
this.$notify({ |
|||
type: type, |
|||
message, |
|||
timeout: 1800 |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,350 @@ |
|||
<template> |
|||
<card> |
|||
<el-tabs v-model="activeName"> |
|||
<el-tab-pane label="历史订单" name="first"> |
|||
<custom-base-table |
|||
:data="historyOrders" |
|||
:columns="OrderColumns.filter(item => !item.hidden)" |
|||
thead-classes="text-primary" |
|||
></custom-base-table> |
|||
<el-pagination |
|||
small |
|||
:hide-on-single-page="true" |
|||
layout="prev, pager, next" |
|||
:total="historyOrdersPagination.total" |
|||
:page-size="historyOrdersPagination.pageSize" |
|||
:current-page="historyOrdersPagination.current" |
|||
> |
|||
</el-pagination> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="持仓订单" name="second"> |
|||
<custom-base-table |
|||
:data="nowOrders" |
|||
:columns="OrderColumns" |
|||
thead-classes="text-primary" |
|||
></custom-base-table> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
|
|||
<card> |
|||
<h5 slot="header" class="title">账号配置信息</h5> |
|||
<div class="row"> |
|||
<div class="col-md-3"> |
|||
<base-input v-model="basic.CoinCount" label="持币数量" disabled> |
|||
</base-input> |
|||
</div> |
|||
<div class="col-md-3"> |
|||
<base-input |
|||
v-model="basic.TotalPurchasePrice" |
|||
label="持仓总价" |
|||
disabled |
|||
> |
|||
</base-input> |
|||
</div> |
|||
<div class="col-md-3"> |
|||
<base-input |
|||
v-model="basic.AvgPurchasePrice" |
|||
label="持仓均价" |
|||
disabled |
|||
> |
|||
</base-input> |
|||
</div> |
|||
<div class="col-md-3"> |
|||
<base-input |
|||
v-model="basic.TotalPurchasePriceRatio" |
|||
label="持仓占比(%)" |
|||
disabled |
|||
> |
|||
</base-input> |
|||
</div> |
|||
<div class="col-md-3"> |
|||
<base-input v-model="basic.FloatingPL" label="浮动盈亏(%)" disabled> |
|||
</base-input> |
|||
</div> |
|||
<div class="col-md-3"> |
|||
<base-input |
|||
v-model="basic.TotalPurchasePriceProfit" |
|||
label="浮动持仓利润(已预扣手续费)" |
|||
disabled |
|||
> |
|||
</base-input> |
|||
</div> |
|||
<div class="col-md-3"> |
|||
<base-input |
|||
v-model="basic.TotalProfit" |
|||
label="总利润(已预扣手续费)" |
|||
disabled |
|||
> |
|||
</base-input> |
|||
</div> |
|||
<div class="col-md-3"> |
|||
<base-input v-model="basic.NewestPrice" label="最新成交价" disabled> |
|||
</base-input> |
|||
</div> |
|||
</div> |
|||
</card> |
|||
</card> |
|||
</template> |
|||
<script> |
|||
import { OrderColumns } from "../../pages/prePages/js/columns"; |
|||
import CustomBaseTable from "../../components/CustomBaseTable"; |
|||
import Bus from "../../common/bus"; |
|||
|
|||
import { |
|||
sendSock, |
|||
initWebSocket, |
|||
closeWebSocket |
|||
} from "../../utils/plugin/socket"; |
|||
|
|||
const S_PING = 100; |
|||
const R_PONG = 101; |
|||
const SUBSCRIBE = 102; |
|||
const ACCOUNT_INFO = 103; |
|||
const ORDER_PUBLISH = 104; |
|||
const TRADE_LOG = 105; |
|||
|
|||
export default { |
|||
components: { CustomBaseTable }, |
|||
props: { |
|||
RobotId: { type: String, default: "60521323-28C3-AC14-0076-48B075584510" } |
|||
}, |
|||
data() { |
|||
return { |
|||
activeName: "first", |
|||
OrderColumns, |
|||
historyOrders: [], |
|||
nowOrders: [], |
|||
basic: {}, |
|||
historyOrdersPagination: { current: 1, pageSize: 15 }, |
|||
pingInterval: null |
|||
}; |
|||
}, |
|||
|
|||
created() { |
|||
this.initOrders(); //初始化两个订单列表 |
|||
}, |
|||
|
|||
mounted() { |
|||
console.log("connecting"); |
|||
this.initWs(); //初始化ws连接 |
|||
}, |
|||
|
|||
beforeDestroy() { |
|||
closeWebSocket(); |
|||
localStorage.clear(); |
|||
clearInterval(this.pingInterval); |
|||
}, |
|||
|
|||
methods: { |
|||
initOrders() { |
|||
this.initHistoryOrders(); |
|||
this.initNowOrders(); |
|||
}, |
|||
initHistoryOrders() { |
|||
let pageIndex = this.historyOrdersPagination.current; |
|||
let pageSize = this.historyOrdersPagination.pageSize; |
|||
this.$http |
|||
.get( |
|||
`/Api/Order/GetHistorySpotGoodsOrder?pageIndex=${pageIndex}&pageSize=${pageSize}&robotId=${this.RobotId}` |
|||
) |
|||
.then(res => { |
|||
if (res.Code == 200) { |
|||
this.historyOrders = res.Data.List; |
|||
const pager = { ...this.historyOrdersPagination }; |
|||
pager.total = res.Data.Count; |
|||
this.historyOrdersPagination = pager; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
//触发分页 |
|||
historyOrdersChange(pagination) { |
|||
this.historyOrdersPagination = pagination; |
|||
this.initHistoryOrders(); |
|||
}, |
|||
|
|||
initNowOrders() { |
|||
this.$http |
|||
.get(`/Api/Order/GetRuningSpotGoodsOrder?robotId=${this.RobotId}`) |
|||
.then(res => { |
|||
if (res.Code == 200) { |
|||
this.nowOrders = res.Data; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
initWs() { |
|||
let that = this; |
|||
initWebSocket("ws://54.249.164.224").then( |
|||
rs => { |
|||
//订阅事件 |
|||
sendSock( |
|||
{ |
|||
Notify: SUBSCRIBE, |
|||
RobotId: this.RobotId |
|||
}, |
|||
that.wsCb |
|||
); |
|||
//ping包检测连接 |
|||
that.pingIntervalKeeper(); |
|||
}, |
|||
rj => { |
|||
that.$message.error("连接websocket失败，正在重连"); |
|||
that.initWs(); |
|||
} |
|||
); |
|||
}, |
|||
|
|||
wsCb(data) { |
|||
console.log("ws received", data); |
|||
|
|||
if (data && data.Notify == ACCOUNT_INFO) { |
|||
this.dealAccountInfo(data); |
|||
} else if (data && data.Notify == ORDER_PUBLISH) { |
|||
this.dealOrder(data); |
|||
} else if (data && data.Notify == R_PONG) { |
|||
this.dealPong(data); |
|||
} else if (data && data.Notify == TRADE_LOG) { |
|||
Bus.$emit("tradeLog", data); |
|||
} |
|||
}, |
|||
|
|||
pingPkg() { |
|||
console.log("心跳包检测发送"); |
|||
let timeStamp = Date.now(); |
|||
let that = this; |
|||
sendSock( |
|||
{ |
|||
Notify: S_PING, |
|||
TimeStamp: timeStamp |
|||
}, |
|||
that.wsCb |
|||
); |
|||
localStorage.setItem("pingTimeStamp", timeStamp); |
|||
if (!localStorage.getItem("missPkg")) { |
|||
localStorage.setItem("missPkg", 1); |
|||
} else { |
|||
let missPkgCount = parseInt(localStorage.getItem("missPkg")) + 1; |
|||
localStorage.setItem("missPkg", missPkgCount); |
|||
console.log("丢包次数增加1", missPkgCount); |
|||
if (missPkgCount > 3) { |
|||
/** 达到丢包上限 |
|||
* 1.停止ping包interval |
|||
* 2.关闭ws |
|||
* 3.重新获取订单列表 |
|||
*/ |
|||
console.log("达到丢包次数", missPkgCount); |
|||
clearInterval(this.pingInterval); |
|||
localStorage.clear(); |
|||
closeWebSocket(); |
|||
this.initOrders(); |
|||
this.initWs(); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
//心跳包ping包定时发送 |
|||
pingIntervalKeeper() { |
|||
let that = this; |
|||
that.pingPkg(); |
|||
this.pingInterval = setInterval(() => { |
|||
that.pingPkg(); |
|||
}, 30000); |
|||
}, |
|||
|
|||
//心跳包pong包检测 |
|||
dealPong(data) { |
|||
//收到pong包后与本地得timeStamp匹配到之后丢包次数默认-1 |
|||
let timeStamp = localStorage.getItem("pingTimeStamp"); |
|||
let missPkgCount = parseInt(localStorage.getItem("missPkg")); |
|||
if (data.TimeStamp == timeStamp) { |
|||
missPkgCount--; |
|||
console.log("丢包次数减少1", missPkgCount); |
|||
localStorage.setItem("missPkg", missPkgCount); |
|||
} |
|||
}, |
|||
|
|||
//账号信息推送处理 |
|||
dealAccountInfo(data) { |
|||
this.basic = { ...this.basic, ...data }; |
|||
if ( |
|||
this.nowOrders.length > 0 && |
|||
data.NewestPrice && |
|||
data.NewestPrice != 0 |
|||
) { |
|||
this.nowOrders.forEach(item => { |
|||
let totalSalePrice = data.NewestPrice * item.PurchaseCoinCount; //销售总价 |
|||
let saleFee = totalSalePrice * 0.02; //销售手续费 |
|||
let Profit = |
|||
totalSalePrice - |
|||
item.TotalPurchasePrice - |
|||
saleFee - |
|||
item.PurchaseFee; |
|||
item.Profit = Profit.toFixed(5); //算出利润 |
|||
item.UnstableProfit = ( |
|||
(data.NewestPrice / item.PurchasePrice - 1) * |
|||
100 |
|||
).toFixed(5); //算出浮动盈亏 |
|||
// console.log(item.UnstableProfit, "看看数据"); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
//订单推送处理 |
|||
dealOrder(data) { |
|||
//4|| 6 |
|||
let targetIndex = -1; |
|||
for (let i = 0; i < this.nowOrders.length; i++) { |
|||
if (data.Id == this.nowOrders[i].Id) { |
|||
targetIndex = i; |
|||
break; |
|||
} |
|||
} |
|||
if (targetIndex == -1) { |
|||
this.nowOrders.push(data); |
|||
} else { |
|||
this.nowOrders[targetIndex] = { |
|||
...this.nowOrders[targetIndex], |
|||
...data |
|||
}; |
|||
if (data.Status == 4 || data.Status == 6) { |
|||
this.nowOrders.splice(targetIndex, 1); |
|||
if (this.historyOrdersPagination.current == 1) |
|||
this.initHistoryOrders(); |
|||
} |
|||
} |
|||
}, |
|||
statusRender(status) { |
|||
//已创建=0,部分购买=1,已购买=2,部分购买被撤销=3,购买被撤销=4,部分卖出=5,已卖出=6,部分卖出已撤销=7,卖出已撤销=8 |
|||
switch (status) { |
|||
case 0: |
|||
return "已创建"; |
|||
case 1: |
|||
return "部分购买"; |
|||
case 2: |
|||
return "已购买"; |
|||
case 3: |
|||
return "部分购买被撤销"; |
|||
case 4: |
|||
return "购买被撤销"; |
|||
case 5: |
|||
return "部分卖出"; |
|||
case 6: |
|||
return "已卖出"; |
|||
case 7: |
|||
return "部分卖出已撤销"; |
|||
case 8: |
|||
return "卖出已撤销"; |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style> |
|||
.el-pagination button:disabled { |
|||
background-color: transparent; |
|||
} |
|||
.el-pager li { |
|||
background-color: transparent; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue