<template>
|
<div>
|
<el-alert
|
v-if="list.list.length>0 && list.list[0].nowPrice === 0"
|
style="margin-bottom:10px"
|
title="集合竞价中，'最新点数'、'浮动盈亏'、'总盈亏'暂不能查看"
|
type="warning"
|
close-text="知道了">
|
</el-alert>
|
<div class="table transaction-table">
|
<el-table
|
stripe
|
v-loading="loading"
|
:data="list.list"
|
height="250"
|
style="width: 100%">
|
<el-table-column
|
prop="futuresName"
|
width="120px"
|
label="期货">
|
<template slot-scope="scope">
|
<div class="name">
|
{{scope.row.futuresName}}
|
<i v-if="scope.row.orderDirection === '买涨'" class="red iconfont icon-up"></i>
|
<i v-if="scope.row.orderDirection === '买跌'" class="green iconfont icon-down"></i>
|
<p class="exchange-p">
|
{{scope.row.futuresCode}}
|
</p>
|
</div>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column
|
prop="orderDirection"
|
label="方向">
|
<template slot-scope="scope">
|
<p>
|
{{scope.row.orderDirection}}
|
|
</p>
|
</template>
|
</el-table-column> -->
|
<el-table-column
|
prop="nowPrice"
|
label="最新">
|
<template slot-scope="scope">
|
<div v-if="scope.row.nowPrice"
|
:class="changeTextClass[scope.$index] === true?'heartBeat tab-number':' tab-number'">
|
<p
|
:class="scope.row.nowPrice - scope.row.buyOrderPrice < 0?'green bounceIn':scope.row.nowPrice - scope.row.buyOrderPrice > 0?'bounceIn red':'bounceIn'">
|
{{scope.row.nowPrice === 0?'-':Number(scope.row.nowPrice).toFixed(2)}} <span class="jibi-code">{{scope.row.coinCode}}</span>
|
<!-- <i v-if="scope.row.nowPrice - scope.row.buyOrderPrice < 0" class="iconfont icon-down"></i> -->
|
<!-- <i v-if="scope.row.nowPrice - scope.row.buyOrderPrice > 0" class="iconfont icon-up"></i> -->
|
</p>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="buyOrderPrice"
|
label="买入点数">
|
<template slot-scope="scope">
|
{{scope.row.buyOrderPrice}} <span class="jibi-code">{{scope.row.coinCode}}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
prop="profitAndLose"
|
label="浮动盈亏">
|
<template slot-scope="scope">
|
<div class="bounceIn tab-number">
|
<p :class="changeTextClass[scope.$index] === true?'heartBeat':''">
|
<span v-if="scope.row.nowPrice === 0">-</span>
|
<span v-else :class="scope.row.profitAndLose<0?'green bounceIn':'red bounceIn'">{{scope.row.profitAndLose}} <i
|
class="jibi-code">{{scope.row.coinCode}}</i></span>
|
</p>
|
<p class="exchange-p">≈{{(scope.row.profitAndLose*scope.row.coinRate).toFixed(2)}} CNY</p>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="allProfitAndLose"
|
label="总盈亏">
|
<template slot-scope="scope">
|
<div class="bounceIn tab-number">
|
<p :class="changeTextClass[scope.$index] === true?'heartBeat':''">
|
<span v-if="scope.row.nowPrice === 0">-</span>
|
<span v-else :class="scope.row.allProfitAndLose<0?'green bounceIn':'red bounceIn'">{{scope.row.allProfitAndLose}} <i
|
class="jibi-code">{{scope.row.coinCode}}</i></span>
|
</p>
|
<p class="exchange-p">≈{{(scope.row.allProfitAndLose*scope.row.coinRate).toFixed(2)}} CNY</p>
|
</div>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column
|
prop="orderTotalPrice"
|
label="保证金">
|
</el-table-column> -->
|
<el-table-column
|
width="70px"
|
prop="orderNum"
|
label="数量/手">
|
</el-table-column>
|
<el-table-column
|
width="80px"
|
label="平仓">
|
<template slot-scope="scope">
|
<el-button class="btn-sell" plain title="我要平仓" size="mini" @click="toSell(scope.row)"><i
|
class="iconfont icon-chakan"></i>平仓
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- <div class="page-box">
|
<el-pagination
|
class="pull-right"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="list.pageNum"
|
:page-sizes="[10, 20, 30, 40,50]"
|
:page-size="list.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="list.total">
|
</el-pagination>
|
</div> -->
|
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
import * as api from '../../../axios/api'
|
|
export default {
|
components: {},
|
props: {
|
handleOptions: {
|
type: Function,
|
default: function () {}
|
},
|
hasGetNewOrder: {
|
type: Number,
|
default: function () {}
|
}
|
},
|
data () {
|
return {
|
loading: false,
|
pageNum: 1,
|
pageSize: 10,
|
currentNum: 10,
|
list: {
|
list: []
|
},
|
timer: null,
|
refresh: false, // 刷新中
|
changeTextClass: {}, // 表格中的数据变化
|
hasChangeSell: 0 // 平仓状态改变
|
}
|
},
|
watch: {
|
haslogin (newval, oldVal) {
|
if (newval !== oldVal) {
|
this.getList()
|
clearInterval(this.timer)
|
this.timer = setInterval(this.refreshList, 5000)
|
}
|
if (!newval) {
|
clearInterval(this.timer)
|
}
|
},
|
hasGetNewOrder (newval, oldVal) {
|
if (newval) {
|
this.getList()
|
}
|
}
|
},
|
computed: {
|
haslogin () {
|
return this.$store.state.haslogin
|
}
|
},
|
created () {
|
if (this.$store.state.haslogin) {
|
this.timer = setInterval(this.refreshList, 5000)
|
}
|
},
|
beforeDestroy () {
|
clearInterval(this.timer)
|
},
|
mounted () {
|
if (this.$store.state.haslogin) {
|
this.getList()
|
}
|
},
|
methods: {
|
handleSizeChange (val) {
|
this.form.pageSize = val
|
this.getList()
|
},
|
handleCurrentChange (val) {
|
this.form.pageNum = val
|
this.getList()
|
},
|
async refreshList () {
|
if (this.refresh || this.loading) {
|
return
|
}
|
this.refresh = true
|
this.changeTextClass = {}
|
// 获取表格数据
|
let opts = {
|
state: 0,
|
pageNum: this.pageNum,
|
pageSize: this.pageSize
|
}
|
let data = await api.getFuturesOrderList(opts)
|
this.refresh = false
|
if (data.status === 0) {
|
if (data.data.list.length === this.list.list.length) {
|
data.data.list.forEach((element, i) => {
|
this.changeTextClass[i] = ''
|
if (data.data.list[i].nowPrice !== this.list.list[i].nowPrice) {
|
this.changeTextClass[i] = true // 设置对应的动画过滤
|
this.list.list[i].nowPrice = data.data.list[i].nowPrice
|
this.list.list[i].profitAndLose = data.data.list[i].profitAndLose
|
this.list.list[i].allProfitAndLose = data.data.list[i].allProfitAndLose
|
}
|
})
|
} else {
|
this.list = data.data
|
}
|
} else {
|
if (data.success === false) {
|
} else {
|
this.$message.error(data.msg)
|
}
|
}
|
},
|
onSubmit () {
|
// 查询表格
|
this.getList()
|
},
|
async getList () {
|
// 取表格数据
|
let opts = {
|
state: 0,
|
pageNum: this.pageNum,
|
pageSize: this.pageSize
|
}
|
this.loading = true
|
let data = await api.getFuturesOrderList(opts)
|
this.loading = false
|
if (data.status === 0) {
|
this.list = data.data
|
} else {
|
if (data.success === false) {
|
|
} else {
|
this.$message.error(data.msg)
|
}
|
}
|
},
|
async getUserInfo () {
|
// 获取用户信息
|
let data = await api.getUserInfo()
|
if (data.status === 0) {
|
this.$store.state.userInfo = data.data
|
} else {
|
this.$message.error(data.msg)
|
}
|
},
|
toSell (val) {
|
this.$confirm('您确定要平仓吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async () => {
|
let opt = {
|
positionSn: val.positionSn
|
}
|
let data = await api.sellFutures(opt)
|
if (data.status === 0) {
|
this.hasChangeSell++
|
this.handleOptions(this.hasChangeSell)
|
this.getList()
|
this.getUserInfo()
|
this.$message.success(data.msg)
|
} else {
|
this.$message.error(data.msg)
|
}
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消平仓'
|
})
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.transaction-table {
|
.name {
|
font-size: 12px;
|
}
|
.btn-sell {
|
background: #4ba07b;
|
border: 1px solid #4ba07b;
|
color: #fff;
|
}
|
}
|
</style>
|
