<template>
|
<div>
|
<el-table
|
:data="tableData"
|
class="position"
|
:cell-style="cellStyle"
|
:empty-text="$t('message.home.noData')"
|
>
|
<!-- 合约会显示buy和杠杆 -->
|
<el-table-column :label="$t('message.jiaoyi.heyue')" width="280">
|
<template #default="scope">
|
<div class="first-column">
|
<span
|
class="direction"
|
:class="`direction-${scope.row.direction}`"
|
></span>
|
<span class="name"
|
>{{ scope.row.name }} {{ $t("message.home.yongxu") }}</span
|
>
|
<span class="lever_rate">{{
|
scope.row.lever_rate ? `${scope.row.lever_rate}x` : "1x"
|
}}</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
v-for="(item, index) in tables"
|
:key="index"
|
:prop="item.prop"
|
:label="$t(item.label)"
|
:formatter="item.formatter"
|
/>
|
<el-table-column :label="$t('message.home.caozuo')" min-width="100">
|
<template #default="scope">
|
<!-- <el-button
|
class="btn"
|
size="small"
|
@click="handleClose(scope.$index)"
|
>{{ $t("message.home.pingcang") }}</el-button
|
> -->
|
|
<el-button class="btn" size="small" @click="handleAllClose(scope)">{{
|
$t("message.home.pingcang")
|
}}</el-button
|
>
|
<el-button class="btn" size="small" @click="zhiyingzhisunClose(scope)">{{
|
$t("message.jiaoyi.zhiyingzhisun")
|
}}</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<close-all-dialog ref="closeAllDialog"></close-all-dialog>
|
<close-dialog ref="closeDialog"></close-dialog>
|
<el-dialog v-model="dialogFormVisible" width="400">
|
<el-form :model="form">
|
<el-form-item :label="$t('message.jiaoyi.zhiying')" :label-width="formLabelWidth">
|
<el-input v-model="form.zhiying" :placeholder="$t(`message.jiaoyi['请输入止盈金额']`)" autocomplete="off" />
|
</el-form-item>
|
</el-form>
|
<el-form :model="form">
|
<el-form-item :label="$t('message.jiaoyi.zhisun')" :label-width="formLabelWidth">
|
<el-input v-model="form.zhisun" :placeholder="$t(`message.jiaoyi['请输入止损金额']`)" autocomplete="off" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="dialogFormVisible = false">{{ $t('message.jiaoyi.quxiao') }}</el-button>
|
<el-button type="primary" @click="quedingSetting">
|
{{ $t('message.user.queding') }}
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import CloseAllDialog from "./dialog/closeAllDialog.vue";
|
import CloseDialog from "./dialog/closeDialog.vue";
|
import Axios from "@/api/perpetualContract.js";
|
import bus from "vue3-eventbus";
|
|
export default {
|
emits: [
|
"getPositionNum",
|
"CurrencySort",
|
"getSelectList",
|
"checkCurrency",
|
"filterFun",
|
"deleteCollectFun",
|
],
|
name: "position",
|
props: {
|
symbol: {
|
type: String,
|
},
|
paramsType: {
|
type: String,
|
default: "indices",
|
},
|
},
|
data() {
|
return {
|
formLabelWidth: '40px',
|
form: {
|
zhiying: "",
|
zhisun: ""
|
},
|
order_no: '',
|
dialogFormVisible: false,
|
pageNum: 1,
|
timer: null,
|
tables: [
|
{
|
prop: "shuliang", //volume_open持仓总张数，volume表示剩余
|
label: "message.home.shuliang",
|
},
|
{
|
prop: "trade_avg_price",
|
label: "message.user.kaicangjiage",
|
},
|
// {
|
// prop: "mark_price",
|
// label: "message.home.biaojijiage",
|
// },
|
{
|
prop: "direction",
|
label: "message.home.fangxiang",
|
formatter: this.directionFormatter,
|
},
|
|
// {
|
// prop: "change_ratio",
|
// label: "message.home.baozhengjinbilv",
|
// formatter: this.ratioFormatter,
|
// },
|
{
|
prop: "deposit",
|
label: "message.home.baozhengjin",
|
},
|
{
|
prop: "profit",
|
label: "message.user.weishixianyingkui",
|
formatter: this.formatterData,
|
},
|
{
|
prop: "profit",
|
label: "message.user.shouyilv",
|
formatter: this.formatterData1,
|
},
|
],
|
tableData: [],
|
};
|
},
|
mounted() {
|
this.getList();
|
this.timer = setInterval(() => {
|
this.getList();
|
}, 2000);
|
},
|
components: {
|
CloseAllDialog,
|
CloseDialog,
|
},
|
|
unmounted() {
|
clearInterval(this.timer);
|
},
|
methods: {
|
quedingSetting(){
|
const data = {
|
order_no: this.order_no,
|
stop_price_profit: this.form.zhiying,
|
stop_price_loss: this.form.zhisun,
|
}
|
Axios.quedingSetting(data).then(res => {
|
if(res.code == 0) {
|
this.$message({
|
message: this.$t("message.user.chenggong"),
|
type: "success",
|
});
|
this.dialogFormVisible = false
|
}
|
})
|
},
|
ratioFormatter(row) {
|
const { change_ratio } = row;
|
const ratio = `${bigDecimal.divide(change_ratio, 100, 4)}%`;
|
return ratio;
|
},
|
directionFormatter(row, column, val) {
|
return val === "buy"
|
? 'Long'
|
: 'Shot';
|
},
|
formatterData(row) {
|
const ratio = this.ratioFormatter(row);
|
const profit = Number(row.profit).toFixed(4);
|
return profit > 0 ?`+${profit}`: `${profit}`;
|
},
|
formatterData1(row) {
|
const ratio = this.ratioFormatter(row);
|
const profit = Number(row.profit).toFixed(4);
|
return ratio > 0 ? `+${ratio}` : `${ratio}`;
|
},
|
|
//设置单个单元格样式 行下标：rowIndex 列下标：columnIndex
|
cellStyle({ row, column, rowIndex, columnIndex }) {
|
if (columnIndex == 6 || columnIndex == 5) {
|
if (Number(row.profit) > 0) {
|
return { color: "#62C885" };
|
} else {
|
return { color: "#E05561" };
|
}
|
}
|
if (columnIndex == 3) {
|
return row.direction === "buy"
|
? { color: "#62C885" }
|
: { color: "#E05561" };
|
}
|
},
|
getList() {
|
const data = {
|
page_no: this.pageNum,
|
type: "orders",
|
symbol: this.symbol,
|
symbolType: this.paramsType,
|
};
|
Axios.contractOrderList(data).then((res) => {
|
this.tableData = res.data;
|
this.tableData.forEach(item => {
|
let shuliang = item.deposit*item.lever_rate/item.trade_avg_price
|
item.shuliang = shuliang.toFixed(4)
|
})
|
console.log(this.tableData,'this.tableData');
|
this.$emit("getPositionNum", res.data.length);
|
// 未实现盈亏
|
const profitLoss = res.data.reduce(
|
(accumulator, cur) => Number(accumulator) + Number(cur.profit),
|
0
|
);
|
const dataloss = bigDecimal.round(profitLoss, 2);
|
// 保证金率
|
const marginRate = res.data.reduce(
|
(accumulator, cur) =>
|
Number(accumulator) +
|
Number(bigDecimal.divide(cur.change_ratio, 100)),
|
0
|
);
|
const datarate = `${bigDecimal.round(marginRate, 4)}%`;
|
bus.emit("ProfitLossRefresh", dataloss);
|
bus.emit("MarginRefresh", datarate);
|
});
|
},
|
handleClose(index) {
|
const data = this.tableData[index];
|
this.$refs.closeDialog.open(data);
|
},
|
handleAllClose(data) {
|
this.$refs.closeAllDialog.open(data.row);
|
},
|
zhiyingzhisunClose(data){
|
this.order_no = data.row.order_no
|
this.dialogFormVisible = true
|
}
|
},
|
};
|
</script>
|
<style scoped>
|
@import url("@/assets/css/commonTrade/constract/position/table.css");
|
.first-column {
|
display: flex;
|
align-items: center;
|
}
|
.name {
|
margin: 0 2px;
|
}
|
.direction {
|
display: inline-block;
|
height: 20px;
|
width: 2px;
|
}
|
.direction-buy {
|
background: #62c885;
|
}
|
.direction-sell {
|
background: #e05561;
|
}
|
.lever_rate {
|
color: #1d91ff;
|
background: #243046;
|
border-radius: 2px;
|
padding: 2px 6px;
|
}
|
.btn {
|
background: #409eff;
|
color: #fff;
|
}
|
/deep/ .el-dialog__header {
|
border-bottom: none;
|
}
|
</style>
|
