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: "", name: "",
components: { components: {
tabs1, tabs1,
}, },
data() { data() {
return { return {
@ -53,11 +52,13 @@ export default {
computed: {}, computed: {},
methods: { methods: {
handleClick(tab) { 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> </script>

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

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

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

@ -127,5 +127,20 @@ export default {
padding: 10px 0; padding: 10px 0;
background-color: #f9fafc; 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> </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>
<el-table-column label="类型" align="center"> <el-table-column label="类型" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-tag v-if="scope.row.profit >0" type="danger">买</el-tag>
v-if="scope.row.name < 1" <el-tag v-else>卖</el-tag>
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> </template>
</el-table-column> </el-table-column>
<el-table-column prop="StudentID" label="交易量(手)" align="center"> <el-table-column prop="StudentID" label="交易量(手)" align="center">
</el-table-column> </el-table-column>
<el-table-column label="交易价位" align="center"> <el-table-column label="交易价位" align="center" prop="profit">
<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> </el-table-column>
<el-table-column prop="income" label="止损" align="center"> <el-table-column prop="income" label="止损" align="center">
</el-table-column> </el-table-column>
@ -48,19 +31,17 @@
</el-table-column> </el-table-column>
<el-table-column prop="Simulation" label="当前价位" align="center"> <el-table-column prop="Simulation" label="当前价位" align="center">
</el-table-column> </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>
<el-table-column prop="class" label="交易时间" align="center"> <el-table-column prop="class" label="交易时间" align="center">
</el-table-column> </el-table-column>
<el-table-column prop="address" label="操作" align="center" width="200"> <el-table-column prop="address" label="操作" align="center" width="200">
<el-button <el-button size="mini" type="primary" @click="centerDialogVisible = true">修改</el-button>
size="mini" <el-button size="mini" type="warning" @click="colseDialogVisible = true" >平仓</el-button
type="primary"
@click="centerDialogVisible = true"
>修 改</el-button
>
<el-button size="mini" type="warning" @click="colseDialogVisible = true"
>平 仓</el-button
> >
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -198,7 +179,7 @@ export default {
income: "20%", income: "20%",
number: "8", number: "8",
Simulation: "80", Simulation: "80",
experiment: "70", experiment: "-70",
}, },
{ {
ranking: "euresd", ranking: "euresd",

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

@ -1,146 +1,114 @@
<template> <template>
<div> <div>
<el-table :data="tableData" style="width: 100%"> <el-table
<el-table-column prop="ranking" label="时间" width="150" align="center"> :data="tableData"
</el-table-column> style="width: 100%"
<el-table-column prop="class" label="交易品种" width="140" align="center"> :cell-style="{ background: '#f8f8f9' }"
</el-table-column> >
<el-table-column prop="StudentID" label="订单号" align="center"> <el-table-column prop="ranking" label="时间" width="150" align="center">
</el-table-column>
</el-table-column> <el-table-column prop="class" label="交易品种" width="140" align="center">
<el-table-column prop="profit" label="类型" 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"> <template slot-scope="scope">
<el-button v-if="scope.row.profit " style="color: #fc3d64;border:none;background-color: #FAEFF0 ;" size="small">买方 </el-button> <el-tag v-if="scope.row.profit >0">买</el-tag>
<el-button v-else style="color: #3C9CF5 ;border:none;background-color: #EAF5FF ;" size="small">卖方 </el-button> <el-tag v-else>卖</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="income" label="交易量" align="center"> <el-table-column prop="income" label="交易量" align="center">
</el-table-column>
</el-table-column> <el-table-column prop="income" label="交易价位" align="center">
<el-table-column prop="income" label="交易价位" align="center"> </el-table-column>
</el-table-column> <el-table-column prop="number" label="止损" align="center">
<el-table-column prop="number" label="止损" align="center"> </el-table-column>
</el-table-column> <el-table-column prop="Simulation" label="止盈" align="center">
<el-table-column prop="Simulation" label="止盈" align="center"> </el-table-column>
</el-table-column> <el-table-column prop="experiment" label="平仓时间" align="center">
<el-table-column prop="experiment" label="平仓时间" align="center"> </el-table-column>
</el-table-column> <el-table-column prop="address" label="平仓价位" align="center">
<el-table-column prop="address" label="平仓价位" align="center"> </el-table-column>
</el-table-column> <el-table-column prop="address" label="盈利" align="center">
<el-table-column prop="address" label="盈利" align="center"> </el-table-column>
</el-table-column> </el-table>
</el-table> <pagination :total="10" />
<pagination <div class="transaction-footer">
:total="10" <span>累计盈亏: <i>+8999.22</i> </span>
/> </div>
<div class="transaction-footer"> </div>
<span>累计盈亏: <i>+8999.22</i> </span> </template>
</div>
</div>
</template>
<script> <script>
export default { export default {
data(){ data() {
return{ return {
tableData: [{ tableData: [
ranking: '2023-06-13 22:22:21', {
class: 'eurusd', ranking: "2023-06-13 22:22:21",
name:1, class: "eurusd",
StudentID:"2003001", name: 1,
profit :"+20000", StudentID: "2003001",
income:"50%", profit: "+20000",
number:"8", income: "50%",
Simulation:"80", number: "8",
experiment:"70" Simulation: "80",
experiment: "70",
}, { },
ranking: '2023-06-13 22:22:21', {
class: 'eurusd', ranking: "2023-06-13 22:22:21",
name: 0, class: "eurusd",
StudentID:"2003001", name: 0,
profit :"+20000", StudentID: "2003001",
income:"20%", profit: "+20000",
number:"8", income: "20%",
Simulation:"80", number: "8",
experiment:"70" Simulation: "80",
experiment: "70",
}, { },
ranking: '2023-06-13 22:22:21', {
class: 'eurusd', ranking: "2023-06-13 22:22:21",
name:0, class: "eurusd",
StudentID:"2003001", name: 0,
profit :"+20000", StudentID: "2003001",
income:"20%", profit: "+20000",
number:"8", income: "20%",
Simulation:"80", number: "8",
experiment:"70" Simulation: "80",
experiment: "70",
}, },
{ {
ranking: '2023-06-13 22:22:21', ranking: "2023-06-13 22:22:21",
class: 'eurusd', class: "eurusd",
name: 1, name: 0,
StudentID:"2003001", StudentID: "2003001",
profit :"+20000", profit: "+20000",
income:"20%", income: "20%",
number:"8", number: "8",
Simulation:"80", Simulation: "80",
experiment:"70" 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> ],
};
},
};
</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> <template>
<div> <div>
<el-table :data="tableData" style="width: 100%"> <el-table :data="tableData" style="width: 100%">
<el-table-column prop="ranking" label="交易品种" width="100" align="center"> <el-table-column
</el-table-column> prop="ranking"
<el-table-column prop="class" label="名称" width="140" align="center"> label="交易品种"
</el-table-column> width="100"
<el-table-column label="卖佳" align="center"> align="center"
>
</el-table-column> </el-table-column>
<el-table-column prop="StudentID" label="最高卖价/最低卖价" align="center"> <el-table-column prop="class" label="名称" align="center">
</el-table-column> </el-table-column>
<el-table-column label="买价" align="center"> <el-table-column label="卖价" align="center"> </el-table-column>
<el-table-column
</el-table-column> prop="StudentID"
<el-table-column prop="income" label="最高买价/最低买价" align="center"> label="最高卖价/最低卖价"
</el-table-column> align="center"
<el-table-column prop="number" label="日变化" align="center"> >
</el-table-column> </el-table-column>
<el-table-column prop="Simulation" label="日变化" align="center"> <el-table-column label="买价" align="center"> </el-table-column>
</el-table-column> <el-table-column prop="income" label="最高买价/最低买价" align="center">
<el-table-column prop="Simulation" label="操作" align="center"> </el-table-column>
<el-button type="primary" size="mini">交易</el-button> <el-table-column prop="number" label="日变化" align="center">
</el-table-column> </el-table-column>
</el-table> <el-table-column prop="Simulation" label="日变化" align="center">
<pagination </el-table-column>
:total="10" <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-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
<el-tab-pane <el-tab-pane
v-for="(item, index) in tabsArr" v-for="(item, index) in tabsArr"
@ -40,19 +43,21 @@
></components> ></components>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</template> </template>
<script> <script>
import tabs1 from "./components/current.vue"; 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 { export default {
components: { components: {
tabs1, tabs1,
tabs2, tabs2,
tabs3,
}, },
data(){ data() {
return{ return {
activeName: "tabs1", activeName: "tabs1",
nowName: "tabs1", nowName: "tabs1",
tabsArr: [ tabsArr: [
{ {
@ -60,92 +65,90 @@ export default {
name: "tabs1", name: "tabs1",
}, },
{ {
label: "历史成交", label: "现有挂单",
name: "tabs2", name: "tabs2",
}, },
{
label: "历史成交",
name: "tabs3",
},
], ],
tableData: [{ tableData: [
ranking: 'euresd', {
class: '1612167713', ranking: "euresd",
name:1, class: "1612167713",
StudentID:"2003001", name: 1,
profit :"+20000", StudentID: "2003001",
income:"50%", profit: "+20000",
number:"8", income: "50%",
Simulation:"80", number: "8",
experiment:"70" 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",
},
{
ranking: "euresd",
class: "1612167713",
name: 0, name: 0,
StudentID:"2003001", StudentID: "2003001",
profit :"+20000", profit: "+20000",
income:"20%", income: "20%",
number:"8", number: "8",
Simulation:"80", Simulation: "80",
experiment:"70" experiment: "70",
}, {
ranking: 'euresd',
class: '1612167713',
name:0,
StudentID:"2003001",
profit :"+20000",
income:"20%",
number:"8",
Simulation:"80",
experiment:"70"
}, },
{ {
ranking: 'euresd', ranking: "euresd",
class: '1612167713', class: "1612167713",
name: 1, name: 1,
StudentID:"2003001", StudentID: "2003001",
profit :"+20000", profit: "+20000",
income:"20%", income: "20%",
number:"8", number: "8",
Simulation:"80", Simulation: "80",
experiment:"70" experiment: "70",
}, },
{ {
ranking: 'euresd', ranking: "euresd",
class: '1612167713', class: "1612167713",
name: 0, name: 0,
StudentID:"2003001", StudentID: "2003001",
profit :"+20000", profit: "+20000",
income:"20%", income: "20%",
number:"8", number: "8",
Simulation:"80", Simulation: "80",
experiment:"70" experiment: "70",
}, },
{ {
ranking: 'euresd', ranking: "euresd",
class: '1612167713', class: "1612167713",
name: 1, name: 1,
StudentID:"2003001", StudentID: "2003001",
profit :"+20000", profit: "+20000",
income:"20%", income: "20%",
number:"8", number: "8",
Simulation:"80", Simulation: "80",
experiment:"70" experiment: "70",
}, },
],
] };
} },
}, methods: {
methods: {
handleClick(tab) { handleClick(tab) {
tab.name == "tabs1" tab.name == "tabs1" ? this.nowName = tab.name: ( tab.name = "tabs2" ? this.nowName = tab.name : this.nowName = tab.name)
? (this.nowName = tab.name)
: (this.nowName = tab.name);
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep.el-tabs { ::v-deep.el-tabs {
@ -163,7 +166,7 @@ export default {
} }
} }
} }
.pagination-container{ .pagination-container {
margin-bottom: 20px !important; margin-bottom: 20px !important;
} }
</style> </style>

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

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