tianzeOrg
/
foreign-exchange-ui
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

模拟交易完成搭建

Browse Source
main
qinzhenpen 2 years ago
parent 109e58ed3f
commit 9412111c02
10 changed files with 859 additions and 558 deletions
Show Stats Download Patch File Download Diff File

11
ruoyi-ui/src/views/PracticeZone/index.vue
Unescape Escape View File

@ -35,7 +35,6 @@ export default {
name: "",
components: {
tabs1,
},
data() {
return {
@ -53,11 +52,13 @@ export default {
computed: {},
methods: {
handleClick(tab) {
tab.name == "tabs1"? this.nowName = tab.name: this.nowName = tab.name;
tab.name == "tabs1"
? (this.nowName = tab.name)
: (this.nowName = tab.name);
},
progress() {
this.$tab.openPage("进行中", "/trade/index");
},
progress(){
this.$tab.openPage("进行中", "/trade/index");
}
},
};
</script>

296
ruoyi-ui/src/views/homepage/components/deals.vue
Unescape Escape View File

@ -1,146 +1,158 @@
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="ranking" label="时间" width="150" align="center">
</el-table-column>
<el-table-column prop="class" label="交易品种" width="140" align="center">
</el-table-column>
<el-table-column prop="StudentID" label="订单号" align="center">
</el-table-column>
<el-table-column prop="profit" label="类型" align="center">
<div>
<el-table
:data="tableData"
style="width: 100%"
:cell-style="{ background: '#f8f8f9' }"
>
<el-table-column prop="ranking" label="时间" width="150" align="center">
</el-table-column>
<el-table-column prop="class" label="交易品种" width="140" align="center">
</el-table-column>
<el-table-column prop="StudentID" label="订单号" align="center">
</el-table-column>
<el-table-column prop="profit" label="类型" align="center">
<template slot-scope="scope">
<el-button v-if="scope.row.profit " style="color: #fc3d64;border:none;background-color: #FAEFF0 ;" size="small">买方 </el-button>
<el-button v-else style="color: #3C9CF5 ;border:none;background-color: #EAF5FF ;" size="small">卖方 </el-button>
</template>
</el-table-column>
<el-table-column prop="income" label="交易量" align="center">
</el-table-column>
<el-table-column prop="income" label="交易价位" align="center">
</el-table-column>
<el-table-column prop="number" label="止损" align="center">
</el-table-column>
<el-table-column prop="Simulation" label="止盈" align="center">
</el-table-column>
<el-table-column prop="experiment" label="平仓时间" align="center">
</el-table-column>
<el-table-column prop="address" label="平仓价位" align="center">
</el-table-column>
<el-table-column prop="address" label="盈利" align="center">
</el-table-column>
</el-table>
<pagination
:total="10"
/>
<div class="transaction-footer">
<span>累计盈亏: <i>+8999.22</i> </span>
</div>
</div>
</template>
<el-button
v-if="scope.row.profit"
style="color: #fc3d64; border: none; background-color: #faeff0"
size="small"
>买方
</el-button>
<el-button
v-else
style="color: #3c9cf5; border: none; background-color: #eaf5ff"
size="small"
>卖方
</el-button>
</template>
</el-table-column>
<el-table-column prop="income" label="交易量" align="center">
</el-table-column>
<el-table-column prop="income" label="交易价位" align="center">
</el-table-column>
<el-table-column prop="number" label="止损" align="center">
</el-table-column>
<el-table-column prop="Simulation" label="止盈" align="center">
</el-table-column>
<el-table-column prop="experiment" label="平仓时间" align="center">
</el-table-column>
<el-table-column prop="address" label="平仓价位" align="center">
</el-table-column>
<el-table-column prop="address" label="盈利" align="center">
</el-table-column>
</el-table>
<pagination :total="10" />
<div class="transaction-footer">
<span>累计盈亏: <i>+8999.22</i> </span>
</div>
</div>
</template>
<script>
export default {
data(){
return{
tableData: [{
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name:1,
StudentID:"2003001",
profit :"+20000",
income:"50%",
number:"8",
Simulation:"80",
experiment:"70"
}, {
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name: 0,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
}, {
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name:0,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
},
{
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name: 1,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
},
{
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name: 0,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
},
{
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name: 1,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
},
{
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name: 0,
StudentID:"2003001",
profit :"-20000",
income:"40%",
number:"8",
Simulation:"80",
experiment:"70"
}]
}
}
}
</script>
export default {
data() {
return {
tableData: [
{
ranking: "2023-06-13 22:22:21",
class: "eurusd",
name: 1,
StudentID: "2003001",
profit: "+20000",
income: "50%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "2023-06-13 22:22:21",
class: "eurusd",
name: 0,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "2023-06-13 22:22:21",
class: "eurusd",
name: 0,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "2023-06-13 22:22:21",
class: "eurusd",
name: 1,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "2023-06-13 22:22:21",
class: "eurusd",
name: 0,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "2023-06-13 22:22:21",
class: "eurusd",
name: 1,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "2023-06-13 22:22:21",
class: "eurusd",
name: 0,
StudentID: "2003001",
profit: "-20000",
income: "40%",
number: "8",
Simulation: "80",
experiment: "70",
},
],
};
},
};
</script>
<style lang="scss" scoped>
.transaction-footer{
height: 25px;
display: flex;
justify-content: flex-end;
margin-bottom: 16px;
& span{
margin-right: 51px;
& i{
color: pink;
font-size: 24px;
font-weight:bold;
}
}
}
</style>
.transaction-footer {
height: 25px;
display: flex;
justify-content: flex-end;
margin-bottom: 16px;
& span {
margin-right: 51px;
& i {
color: pink;
font-size: 24px;
font-weight: bold;
}
}
}
.pagination-container {
background: #f5f6f6 !important;
}
</style>

2
ruoyi-ui/src/views/homepage/index.vue
Unescape Escape View File

@ -91,7 +91,7 @@ export default {
border-bottom: none;
max-width: 80% !important;
}
.el-tabs__nav-scroll {
.el-tabs__nav {
border: none !important;
.el-tabs__item {
background-color: transparent;

17
ruoyi-ui/src/views/homepage/overview.vue
Unescape Escape View File

@ -127,5 +127,20 @@ export default {
padding: 10px 0;
background-color: #f9fafc;
}
::v-deep .tabs {
background: #F5F6F6;
padding: 19px;
border-radius: 5px;
.el-tabs__nav-wrap::after {
background: transparent;
}
.el-tabs__item {
background: #F5F6F6 !important;
margin-right: 0px !important;
&.is-active {
background-color: #3c9cf5;
color: #3c9cf5 !important;
}
}
}
</style>

144
ruoyi-ui/src/views/trade/components/Deposit.vue
Unescape Escape View File

@ -0,0 +1,144 @@
<template>
<div class="homepage-current">
<el-table
:data="tableData"
style="width: 100%"
>
<el-table-column
prop="ranking"
label="账号"
width="100"
align="center"
>
</el-table-column>
<el-table-column prop="class" label="姓名" width="140" align="center">
</el-table-column>
<el-table-column label="已用保证金" align="center" prop="profit">
</el-table-column>
<el-table-column prop="StudentID" label="净值" align="center">
</el-table-column>
<el-table-column label="保证金水平" align="center" prop="profit">
</el-table-column>
<el-table-column prop="income" label="保证金报警水平" align="center">
</el-table-column>
<el-table-column prop="number" label="状态" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.number >0" type="danger">预警中</el-tag>
<el-tag v-else>已停用</el-tag>
</template>
</el-table-column>
<el-table-column prop="class" label="设置时间" align="center">
</el-table-column>
<el-table-column prop="address" label="操作" align="center" width="200">
<el-button size="mini" @click="centerDialogVisible = true">删除</el-button>
<el-button size="mini" type="primary" @click="colseDialogVisible = true" >启用</el-button
>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination :total="10" />
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark">预警</div></el-col>
</el-row>
<el-table :data="tableData" style="width: 100%" >
<el-table-column prop="ranking" label="账号" width="100" align="center" >
</el-table-column>
<el-table-column prop="class" label="姓名" width="140" align="center">
</el-table-column>
<el-table-column label="已用保证金" align="center" prop="profit">
</el-table-column>
<el-table-column prop="StudentID" label="净值" align="center">
</el-table-column>
<el-table-column label="保证金水平" align="center" prop="profit">
</el-table-column>
<el-table-column prop="income" label="保证金报警水平" align="center">
</el-table-column>
<el-table-column prop="number" label="状态" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.number >0" type="danger">预警中</el-tag>
<el-tag v-else>已停用</el-tag>
</template>
</el-table-column>
<el-table-column prop="class" label="设置时间" align="center">
</el-table-column>
<el-table-column prop="address" label="操作" align="center" width="200">
<el-button size="mini" @click="centerDialogVisible = true">删除</el-button>
</el-table-column>
</el-table>
<pagination :total="10" />
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
ranking: "euresd",
class: "1612167713",
name: 1,
StudentID: "2003001",
profit: "+20000",
income: "50%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "euresd",
class: "1612167713",
name: 1,
StudentID: "2003001",
profit: "+20000",
income: "50%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "euresd",
class: "1612167713",
name: 0,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "-8",
Simulation: "80",
experiment: "70",
},
{
ranking: "euresd",
class: "1612167713",
name: 0,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "-70",
},
{
ranking: "euresd",
class: "1612167713",
name: 1,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "-8",
Simulation: "80",
experiment: "70",
},
],
};
},
};
</script>
<style lang="scss" scoped>
.pagination-container {
background: #f5f6f6;
}
</style>

43
ruoyi-ui/src/views/trade/components/current.vue
Unescape Escape View File

@ -16,31 +16,14 @@
</el-table-column>
<el-table-column label="类型" align="center">
<template slot-scope="scope">
<el-button
v-if="scope.row.name < 1"
style="color: #fc3d64; border: none; background-color: #faeff0"
size="small"
>买方</el-button
>
<el-button
v-else
style="color: #3c9cf5; border: none; background-color: #eaf5ff"
size="small"
>卖方</el-button
>
<el-tag v-if="scope.row.profit >0" type="danger">买</el-tag>
<el-tag v-else>卖</el-tag>
</template>
</el-table-column>
<el-table-column prop="StudentID" label="交易量(手)" align="center">
</el-table-column>
<el-table-column label="交易价位" align="center">
<template slot-scope="scope">
<span v-if="scope.row.profit > 0" style="color: #f98133">{{
scope.row.profit
}}</span>
<span v-else-if="scope.row.profit < 0" style="color: #36b9b2">{{
scope.row.profit
}}</span>
</template>
<el-table-column label="交易价位" align="center" prop="profit">
</el-table-column>
<el-table-column prop="income" label="止损" align="center">
</el-table-column>
@ -48,19 +31,17 @@
</el-table-column>
<el-table-column prop="Simulation" label="当前价位" align="center">
</el-table-column>
<el-table-column prop="experiment" label="持仓盈亏" align="center">
<el-table-column label="持仓盈亏" align="center">
<template slot-scope="scope">
<span v-if="scope.row.experiment > 0" style="color: #EC6C01;">{{ scope.row.experiment}}</span>
<span v-else style="color: #2CB7B0;">{{ scope.row.experiment}}</span>
</template>
</el-table-column>
<el-table-column prop="class" label="交易时间" align="center">
</el-table-column>
<el-table-column prop="address" label="操作" align="center" width="200">
<el-button
size="mini"
type="primary"
@click="centerDialogVisible = true"
>修 改</el-button
>
<el-button size="mini" type="warning" @click="colseDialogVisible = true"
>平 仓</el-button
<el-button size="mini" type="primary" @click="centerDialogVisible = true">修改</el-button>
<el-button size="mini" type="warning" @click="colseDialogVisible = true" >平仓</el-button
>
</el-table-column>
</el-table>
@ -198,7 +179,7 @@ export default {
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
experiment: "-70",
},
{
ranking: "euresd",

252
ruoyi-ui/src/views/trade/components/deals.vue
Unescape Escape View File

@ -1,146 +1,114 @@
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="ranking" label="时间" width="150" align="center">
</el-table-column>
<el-table-column prop="class" label="交易品种" width="140" align="center">
</el-table-column>
<el-table-column prop="StudentID" label="订单号" align="center">
</el-table-column>
<el-table-column prop="profit" label="类型" align="center">
<div>
<el-table
:data="tableData"
style="width: 100%"
:cell-style="{ background: '#f8f8f9' }"
>
<el-table-column prop="ranking" label="时间" width="150" align="center">
</el-table-column>
<el-table-column prop="class" label="交易品种" width="140" align="center">
</el-table-column>
<el-table-column prop="StudentID" label="订单号" align="center">
</el-table-column>
<el-table-column prop="profit" label="类型" align="center">
<template slot-scope="scope">
<el-button v-if="scope.row.profit " style="color: #fc3d64;border:none;background-color: #FAEFF0 ;" size="small">买方 </el-button>
<el-button v-else style="color: #3C9CF5 ;border:none;background-color: #EAF5FF ;" size="small">卖方 </el-button>
</template>
</el-table-column>
<el-table-column prop="income" label="交易量" align="center">
</el-table-column>
<el-table-column prop="income" label="交易价位" align="center">
</el-table-column>
<el-table-column prop="number" label="止损" align="center">
</el-table-column>
<el-table-column prop="Simulation" label="止盈" align="center">
</el-table-column>
<el-table-column prop="experiment" label="平仓时间" align="center">
</el-table-column>
<el-table-column prop="address" label="平仓价位" align="center">
</el-table-column>
<el-table-column prop="address" label="盈利" align="center">
</el-table-column>
</el-table>
<pagination
:total="10"
/>
<div class="transaction-footer">
<span>累计盈亏: <i>+8999.22</i> </span>
</div>
</div>
</template>
<el-tag v-if="scope.row.profit >0">买</el-tag>
<el-tag v-else>卖</el-tag>
</template>
</el-table-column>
<el-table-column prop="income" label="交易量" align="center">
</el-table-column>
<el-table-column prop="income" label="交易价位" align="center">
</el-table-column>
<el-table-column prop="number" label="止损" align="center">
</el-table-column>
<el-table-column prop="Simulation" label="止盈" align="center">
</el-table-column>
<el-table-column prop="experiment" label="平仓时间" align="center">
</el-table-column>
<el-table-column prop="address" label="平仓价位" align="center">
</el-table-column>
<el-table-column prop="address" label="盈利" align="center">
</el-table-column>
</el-table>
<pagination :total="10" />
<div class="transaction-footer">
<span>累计盈亏: <i>+8999.22</i> </span>
</div>
</div>
</template>
<script>
export default {
data(){
return{
tableData: [{
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name:1,
StudentID:"2003001",
profit :"+20000",
income:"50%",
number:"8",
Simulation:"80",
experiment:"70"
}, {
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name: 0,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
}, {
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name:0,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
},
{
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name: 1,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
},
{
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name: 0,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
},
{
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name: 1,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
},
{
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name: 0,
StudentID:"2003001",
profit :"-20000",
income:"40%",
number:"8",
Simulation:"80",
experiment:"70"
}]
}
}
}
</script>
<style lang="scss" scoped>
.transaction-footer{
height: 25px;
display: flex;
justify-content: flex-end;
margin-bottom: 16px;
& span{
margin-right: 51px;
& i{
color: pink;
font-size: 24px;
font-weight:bold;
}
export default {
data() {
return {
tableData: [
{
ranking: "2023-06-13 22:22:21",
class: "eurusd",
name: 1,
StudentID: "2003001",
profit: "+20000",
income: "50%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "2023-06-13 22:22:21",
class: "eurusd",
name: 0,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "2023-06-13 22:22:21",
class: "eurusd",
name: 0,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "2023-06-13 22:22:21",
class: "eurusd",
name: 0,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
}
}
</style>
],
};
},
};
</script>
<style lang="scss" scoped>
.transaction-footer {
height: 25px;
display: flex;
justify-content: flex-end;
margin-bottom: 16px;
& span {
margin-right: 51px;
& i {
color: pink;
font-size: 24px;
font-weight: bold;
}
}
}
.pagination-container {
background: #f5f6f6;
}
</style>

180
ruoyi-ui/src/views/trade/components/orders.vue
Unescape Escape View File

@ -0,0 +1,180 @@
<template>
<div class="homepage-current">
<el-table
:data="tableData"
style="width: 100%"
:cell-style="{ background: '#f8f8f9' }"
>
<el-table-column
prop="ranking"
label="委托时间"
width="100"
align="center"
>
</el-table-column>
<el-table-column prop="class" label="交易品种" width="140" align="center">
</el-table-column>
<el-table-column label="委托单号" align="center" prop="profit">
</el-table-column>
<el-table-column prop="StudentID" label="类型" align="center">
</el-table-column>
<el-table-column label="交易量 (手)" align="center" prop="profit">
</el-table-column>
<el-table-column prop="income" label="委托价位" align="center">
</el-table-column>
<el-table-column prop="number" label="止损" align="center">
</el-table-column>
<el-table-column prop="Simulation" label="止盈" align="center">
</el-table-column>
<el-table-column label="当前价位" align="center">
<template slot-scope="scope">
<span v-if="scope.row.experiment > 0" style="color: #EC6C01;">{{ scope.row.experiment}}</span>
<span v-else style="color: #2CB7B0;">{{ scope.row.experiment}}</span>
</template>
</el-table-column>
<el-table-column prop="class" label="持仓盈亏" align="center">
</el-table-column>
<el-table-column prop="class" label="有效期" align="center">
</el-table-column>
<el-table-column prop="address" label="操作" align="center" width="200">
<el-button size="mini" type="warning" @click="colseDialogVisible = true" >撤单</el-button
>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination :total="10" />
<!-- 修改 -->
<!-- 平仓 -->
<el-dialog
title="平仓"
:visible.sync="colseDialogVisible"
width="30%"
append-to-body
>
<el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="交易品种:">
<el-select placeholder="活动区域" style="width: 100%">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="名称:">
<el-input type="password" autocomplete="off"></el-input>
</el-form-item>
<div class="dialog-inline" style="display: flex">
<el-form-item label="订 单 号:">
<el-input></el-input>
</el-form-item>
<el-form-item label="持仓方向:">
<el-input></el-input>
</el-form-item>
</div>
<el-form-item label="交 易 量:">
<el-input></el-input>
</el-form-item>
<el-form-item label="开仓价位:">
<template>
<span
style="
font-size: 18px;
font-weight: bold;
font-family: Microsoft YaHei;
color: #1d2129;
"
>9661.00</span
>
<div class="price">6.90494 / 6.90498</div>
</template>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="colseDialogVisible = false"
>平 仓</el-button
>
<el-button @click="colseDialogVisible = false" type="info"
>取 消</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
// 平仓
colseDialogVisible: false,
tableData: [
{
ranking: "euresd",
class: "1612167713",
name: 1,
StudentID: "2003001",
profit: "+20000",
income: "50%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "euresd",
class: "1612167713",
name: 0,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "euresd",
class: "1612167713",
name: 0,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "-70",
},
{
ranking: "euresd",
class: "1612167713",
name: 1,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
],
};
},
};
</script>
<style lang="scss" scoped>
.pagination-container {
background: #f5f6f6;
}
::v-deep .price {
max-width: calc(100% - 136px);
min-height: 60px;
background: #f2f3f4;
border-radius: 4px;
margin-left: 20px;
text-align: center;
line-height: 60px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #1d2129;
}
</style>

207
ruoyi-ui/src/views/trade/holding.vue
Unescape Escape View File

@ -1,31 +1,34 @@
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="ranking" label="交易品种" width="100" align="center">
</el-table-column>
<el-table-column prop="class" label="名称" width="140" align="center">
</el-table-column>
<el-table-column label="卖佳" align="center">
</el-table-column>
<el-table-column prop="StudentID" label="最高卖价/最低卖价" align="center">
</el-table-column>
<el-table-column label="买价" align="center">
</el-table-column>
<el-table-column prop="income" label="最高买价/最低买价" align="center">
</el-table-column>
<el-table-column prop="number" label="日变化" align="center">
</el-table-column>
<el-table-column prop="Simulation" label="日变化" align="center">
</el-table-column>
<el-table-column prop="Simulation" label="操作" align="center">
<el-button type="primary" size="mini">交易</el-button>
</el-table-column>
</el-table>
<pagination
:total="10"
/>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column
prop="ranking"
label="交易品种"
width="100"
align="center"
>
</el-table-column>
<el-table-column prop="class" label="名称" align="center">
</el-table-column>
<el-table-column label="卖价" align="center"> </el-table-column>
<el-table-column
prop="StudentID"
label="最高卖价/最低卖价"
align="center"
>
</el-table-column>
<el-table-column label="买价" align="center"> </el-table-column>
<el-table-column prop="income" label="最高买价/最低买价" align="center">
</el-table-column>
<el-table-column prop="number" label="日变化" align="center">
</el-table-column>
<el-table-column prop="Simulation" label="日变化" align="center">
</el-table-column>
<el-table-column prop="Simulation" label="操作" align="center">
<el-button type="primary" size="mini">交易</el-button>
</el-table-column>
</el-table>
<pagination :total="10" />
<el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
<el-tab-pane
v-for="(item, index) in tabsArr"
@ -40,19 +43,21 @@
></components>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import tabs1 from "./components/current.vue";
import tabs2 from "./components/deals.vue";
import tabs3 from "./components/deals.vue";
import tabs2 from "./components/orders.vue";
export default {
components: {
tabs1,
tabs2,
tabs3,
},
data(){
return{
activeName: "tabs1",
data() {
return {
activeName: "tabs1",
nowName: "tabs1",
tabsArr: [
{
@ -60,92 +65,90 @@ export default {
name: "tabs1",
},
{
label: "历史成交",
label: "现有挂单",
name: "tabs2",
},
{
label: "历史成交",
name: "tabs3",
},
],
tableData: [{
ranking: 'euresd',
class: '1612167713',
name:1,
StudentID:"2003001",
profit :"+20000",
income:"50%",
number:"8",
Simulation:"80",
experiment:"70"
}, {
ranking: 'euresd',
class: '1612167713',
tableData: [
{
ranking: "euresd",
class: "1612167713",
name: 1,
StudentID: "2003001",
profit: "+20000",
income: "50%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "euresd",
class: "1612167713",
name: 0,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "euresd",
class: "1612167713",
name: 0,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
}, {
ranking: 'euresd',
class: '1612167713',
name:0,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: 'euresd',
class: '1612167713',
ranking: "euresd",
class: "1612167713",
name: 1,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: 'euresd',
class: '1612167713',
ranking: "euresd",
class: "1612167713",
name: 0,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: 'euresd',
class: '1612167713',
ranking: "euresd",
class: "1612167713",
name: 1,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
]
}
},
methods: {
],
};
},
methods: {
handleClick(tab) {
tab.name == "tabs1"
? (this.nowName = tab.name)
: (this.nowName = tab.name);
tab.name == "tabs1" ? this.nowName = tab.name: ( tab.name = "tabs2" ? this.nowName = tab.name : this.nowName = tab.name)
},
},
}
};
</script>
<style lang="scss" scoped>
::v-deep.el-tabs {
@ -163,7 +166,7 @@ export default {
}
}
}
.pagination-container{
.pagination-container {
margin-bottom: 20px !important;
}
</style>

265
ruoyi-ui/src/views/trade/strike.vue
Unescape Escape View File

@ -1,146 +1,143 @@
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="ranking" label="时间" width="150" align="center">
</el-table-column>
<el-table-column prop="class" label="交易品种" width="140" align="center">
</el-table-column>
<el-table-column prop="StudentID" label="订单号" align="center">
</el-table-column>
<el-table-column prop="profit" label="类型" align="center">
<template slot-scope="scope">
<el-button v-if="scope.row.profit " style="color: #fc3d64;border:none;background-color: #FAEFF0 ;" size="small">买方 </el-button>
<el-button v-else style="color: #3C9CF5 ;border:none;background-color: #EAF5FF ;" size="small">卖方 </el-button>
</template>
</el-table-column>
<el-table-column prop="income" label="交易量" align="center">
</el-table-column>
<el-table-column prop="income" label="交易价位" align="center">
</el-table-column>
<el-table-column prop="number" label="止损" align="center">
</el-table-column>
<el-table-column prop="Simulation" label="止盈" align="center">
</el-table-column>
<el-table-column prop="experiment" label="平仓时间" align="center">
</el-table-column>
<el-table-column prop="address" label="平仓价位" align="center">
</el-table-column>
<el-table-column prop="address" label="盈利" align="center">
</el-table-column>
</el-table>
<pagination
:total="10"
/>
<div class="transaction-footer">
<span>累计盈亏: <i>+8999.22</i> </span>
</div>
<el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
<el-tab-pane
v-for="(item, index) in tabsArr"
:key="index"
:label="item.label"
:name="item.name"
>
<components
:is="item.name"
:id="id"
v-if="item.name == nowName"
></components>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import tabs1 from "./components/Deposit.vue";
import tabs3 from "./components/deals.vue";
import tabs2 from "./components/orders.vue";
export default {
data(){
return{
tableData: [{
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name:1,
StudentID:"2003001",
profit :"+20000",
income:"50%",
number:"8",
Simulation:"80",
experiment:"70"
}, {
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name: 0,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
}, {
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name:0,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
},
{
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name: 1,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
},
{
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name: 0,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
},
{
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name: 1,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
},
components: {
tabs1,
tabs2,
tabs3,
},
data() {
return {
activeName: "tabs1",
nowName: "tabs1",
tabsArr: [
{
ranking: '2023-06-13 22:22:21',
class: 'eurusd',
name: 0,
StudentID:"2003001",
profit :"-20000",
income:"40%",
number:"8",
Simulation:"80",
experiment:"70"
}]
}
}
}
label: "保证金预警",
name: "tabs1",
},
{
label: "行情预警",
name: "tabs2",
},
{
label: "持仓时长预警",
name: "tabs3",
},
],
tableData: [
{
ranking: "euresd",
class: "1612167713",
name: 1,
StudentID: "2003001",
profit: "+20000",
income: "50%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "euresd",
class: "1612167713",
name: 0,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "euresd",
class: "1612167713",
name: 0,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "euresd",
class: "1612167713",
name: 1,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "euresd",
class: "1612167713",
name: 0,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
{
ranking: "euresd",
class: "1612167713",
name: 1,
StudentID: "2003001",
profit: "+20000",
income: "20%",
number: "8",
Simulation: "80",
experiment: "70",
},
],
};
},
methods: {
handleClick(tab) {
tab.name == "tabs1" ? this.nowName = tab.name: ( tab.name = "tabs2" ? this.nowName = tab.name : this.nowName = tab.name)
},
},
};
</script>
<style lang="scss" scoped>
.transaction-footer{
height: 25px;
display: flex;
justify-content: flex-end;
margin-bottom: 16px;
& span{
margin-right: 51px;
& i{
color: pink;
font-size: 24px;
font-weight:bold;
}
::v-deep.el-tabs {
background: #f8f8f9;
padding: 0 20px;
.el-tabs__nav-wrap::after {
background: transparent;
}
.el-tabs__item {
background: #f8f8f9 !important;
margin-right: 0px !important;
&.is-active {
background-color: #3c9cf5;
color: #3c9cf5 !important;
}
}
}
.pagination-container {
margin-bottom: 20px !important;
}
</style>
Write Preview
Loading…
Cancel
Save