<template>
|
<el-drawer :title="$t('hj2')" :visible.sync="dialogVisible" direction="rtl" :before-close="onClose" size="980px">
|
<div class="drawer-content">
|
<div class="card sb_b">
|
<div class="card_1 flex-center">
|
<div>{{ $t("浮動盈虧") }}</div>
|
<div style="font-size: 24px" :style="`color:${thisMoneyData.profitAndLoss > 0
|
? 'red'
|
: thisMoneyData.profitAndLoss < 0
|
? 'green'
|
: ''
|
}`">
|
{{ thisMoneyData.symbol }} {{ thisMoneyData.profitAndLoss }}
|
</div>
|
</div>
|
<div class="card_2 flex-between">
|
<div class="card_2_item flex-center" style="align-items: start">
|
<div>{{ $t("總資產") }}</div>
|
<div>{{ thisMoneyData.symbol }}{{ thisMoneyData.totalMoney }}</div>
|
</div>
|
<div class="card_2_item flex-center">
|
<div>{{ $t("hj48") }}</div>
|
<div>
|
{{ thisMoneyData.symbol }}{{ thisMoneyData.availableBalance }}
|
</div>
|
</div>
|
<div class="card_2_item flex-center" style="align-items: end">
|
<div>{{ $t("平仓盈亏") }}</div>
|
<div>
|
{{ thisMoneyData.symbol
|
}}{{ thisMoneyData.cumulativeProfitAndLoss }}
|
</div>
|
</div>
|
</div>
|
<div class="card_2 flex-between" style="border-top: #aaa solid 1px">
|
<el-button type="primary" size="medium" @click="$router.push('/home')">
|
{{ $t("buy") }}
|
</el-button>
|
<el-button type="primary" size="medium" @click="$router.push('/home')">
|
{{ $t("hj78") }}
|
</el-button>
|
<el-button type="primary" size="medium" @click="pc">
|
{{ $t("hj121") }}
|
</el-button>
|
</div>
|
</div>
|
|
<el-table :data="tableData" style="width: 100%; flex: 1" height="100%" empty-text="No Data">
|
<el-table-column prop="stockSpell" :label="$t('hj313')">
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.stockGid != $mc ? 'success' : ''" size="small" style="margin-right: 8px">
|
{{ scope.row.stockGid }}
|
</el-tag>
|
<span>{{ scope.row.stockName }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="positionType" :label="`${$t('hj313')} ${$t('類型')}`">
|
<template slot-scope="scope">
|
<el-tag type="warning">
|
{{ dictionary.gplx[scope.row.positionType] }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="positionType" :label="$t('類型')">
|
<template slot-scope="scope">
|
<div>
|
{{ scope.row.orderDirection == "买涨" ? $t("gm") : $t("hj78") }}
|
</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="orderNum" :label="$t('sl')"></el-table-column>
|
|
<el-table-column prop="profitAndLoseParent" :label="$t('Profit')">
|
<template slot-scope="scope">
|
<span :class="`${scope.row.profitAndLose < 0
|
? 'r_c'
|
: scope.row.profitAndLose > 0
|
? 'lc_c'
|
: ''
|
}`">
|
{{ scope.row.profitAndLose }} ({{
|
scope.row.profitAndLoseParent
|
}})
|
</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="buyOrderPrice" :label="$t('Cost')">
|
<template slot-scope="scope">
|
<span>
|
{{ scope.row.stockGid | currencySymbol }}
|
{{ scope.row.buyOrderPrice }}
|
</span>
|
<div v-if="scope.row.stockGid != $mc">
|
≈ $
|
{{
|
(scope.row.buyOrderPrice * rate(scope.row.stockGid)).toFixed(2)
|
}}
|
</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="now_price" :label="$t('Current')">
|
<template slot-scope="scope">
|
<span>
|
{{ scope.row.stockGid | currencySymbol }}
|
{{ scope.row.now_price }}
|
</span>
|
<div v-if="scope.row.stockGid != $mc">
|
≈ $
|
{{ (scope.row.now_price * rate(scope.row.stockGid)).toFixed(2) }}
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="pagination flex-end">
|
<el-pagination background layout="prev, pager, next" :total="total" :current-page="pageNum"
|
:page-size="pageSize" @current-change="handleCurrentChange">
|
</el-pagination>
|
</div>
|
</div>
|
</el-drawer>
|
</template>
|
|
<script>
|
|
let teimss2 = null; // 轮询获取持仓数据计时器
|
import mixins from "@/mixins/myMixins"; // 混入
|
import * as api from "@/axios/api";
|
export default {
|
data() {
|
return {
|
opt: {
|
state: 0,
|
}, // 列表参数,必须是opt和myMixins混入配合使用
|
};
|
},
|
mixins: [mixins],
|
props: {
|
dialogVisible: {
|
type: Boolean,
|
default: false,
|
},
|
type: {
|
type: String,
|
default: "",
|
},
|
moneyData: {
|
type: Array,
|
default: () => [],
|
},
|
},
|
computed: {
|
thisMoneyData() {
|
return this.moneyData.find((item) => item.accectType == this.type) || {};
|
},
|
},
|
watch: {},
|
async created() {
|
// await this.getExchangeRate(); // 获取汇率
|
this.opt.stockType = this.type;
|
this.apiInterface = api.getchicang; // 赋值接口
|
this.init(); // 获取记录列表
|
|
teimss2 = setInterval(() => {
|
this.getList();
|
}, 3000);
|
},
|
beforeDestroy() {
|
clearInterval(teimss2);
|
},
|
methods: {
|
// 关闭弹窗
|
onClose() {
|
this.$emit("update:dialogVisible", false);
|
this.$emit("onClose"); // 关闭弹窗时，通知父组件
|
},
|
// 打开平仓弹窗
|
pc() {
|
this.$emit("pc");
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.drawer-content {
|
padding: 20px;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.card {
|
border-radius: 16px;
|
overflow: hidden;
|
border: 1px solid #777;
|
|
.card_1 {
|
padding: 20px;
|
font-size: 18px;
|
flex-direction: column;
|
}
|
|
.card_2 {
|
width: 100%;
|
padding: 10px 30px 10px;
|
|
.card_2_item {
|
width: 33%;
|
flex-direction: column;
|
|
&>div {
|
padding: 3px 0;
|
}
|
}
|
}
|
}
|
|
.pagination {
|
margin-top: 20px;
|
text-align: center;
|
}
|
}
|
</style>
|
