<template>
|
<div class="home_lb">
|
<div class="tabs_box">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane :label="$t('hj2')" name="0"></el-tab-pane>
|
<el-tab-pane :label="$t('hj121')" name="1"></el-tab-pane>
|
</el-tabs>
|
</div>
|
|
<div class="order_list" v-if="activeName == '0'">
|
<el-button type="primary" style="margin-left: 16px;" @click="CloseAll">{{ $t("一鍵平倉") }}</el-button>
|
<el-table height="100%" :data="tableData" style="width: 100%" size="small" empty-text="No Data"
|
@row-click="Choice">
|
<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="orderDirection" :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>
|
|
<div class="order_list" v-else-if="activeName == '1'">
|
<el-table :data="tableData" style="width: 100%" height="100%" size="small" empty-text="No Data"
|
@row-click="Choice">
|
<el-table-column prop="stockCode" :label="$t('sc')" width="130">
|
</el-table-column>
|
|
<el-table-column prop="buyOrderId" :label="$t('hj234')" width="150">
|
</el-table-column>
|
|
<el-table-column prop="stockSpell" :label="$t('hj313')" min-width="150">
|
<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('類型')}`" width="150">
|
<template slot-scope="scope">
|
<el-tag type="warning">
|
{{ dictionary.gplx[scope.row.positionType] }}
|
</el-tag>
|
</template>
|
1
|
</el-table-column>
|
|
<el-table-column prop="orderNum" :label="$t('sl')" width="100"></el-table-column>
|
|
<el-table-column prop="profitAndLoseParent" :label="$t('Profit')" width="130">
|
<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')" width="150">
|
<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')" width="150">
|
<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-column prop="buyOrderTime" :label="$t('gmsj')" width="180">
|
<template slot-scope="scope">
|
<span>
|
{{ scope.row.buyOrderTime | gettime }}
|
</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="sellOrderTime" :label="$t('hj128')" width="180">
|
<template slot-scope="scope">
|
<span>
|
{{ scope.row.sellOrderTime | gettime }}
|
</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<div class="pagination_box">
|
<el-pagination background layout="prev, pager, next" :total="total" :current-page="pageNum" :page-size="pageSize"
|
@current-change="handleCurrentChange">
|
</el-pagination>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
let times = null; // 计时器
|
import mixins from "@/mixins/myMixins"; // 混入
|
import * as api from "@/axios/api";
|
export default {
|
mixins: [mixins],
|
data() {
|
return {
|
activeName: "0",
|
// 列表参数,必须是opt和myMixins混入配合使用
|
opt: {},
|
};
|
},
|
created() {
|
this.opt.state = this.activeName;
|
this.apiInterface = api.getchicang;
|
this.init();
|
|
this.stopTimer()
|
times = setInterval(() => {
|
this.getList()
|
}, 3000)
|
},
|
beforeDestroy() {
|
this.stopTimer()
|
},
|
methods: {
|
handleClick() {
|
this.opt.state = this.activeName;
|
this.tableData = [];
|
this.init();
|
|
this.stopTimer()
|
if (this.activeName == 1) return // 如果是平仓则不轮询
|
times = setInterval(() => {
|
this.getList()
|
}, 3000)
|
},
|
// 股票选择
|
Choice(val) {
|
this.$emit("choice", val.stockCode, val.positionSn);
|
console.log("1");
|
},
|
stopTimer() {
|
if (times) {
|
clearInterval(times);
|
times = null;
|
}
|
},
|
// 一键平仓
|
async CloseAll() {
|
const res = await api.allsell();
|
if (res.status === 0) {
|
this.$message.success(res.msg);
|
} else {
|
this.$message.error(res.msg);
|
}
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.home_lb {
|
.pagination_box {
|
display: flex;
|
justify-content: flex-end;
|
padding: 10px;
|
}
|
|
.order_list {
|
height: 0;
|
flex: 1;
|
}
|
|
.tabs_box {
|
padding: 0 16px;
|
}
|
}
|
</style>
|
