lizhixin
4 years ago
16 changed files with 883 additions and 46 deletions
@ -0,0 +1,104 @@ |
|||||
|
<template> |
||||
|
<div :id="id" class="k-line"></div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
/* eslint-disable */ |
||||
|
import * as echarts from "echarts/core"; |
||||
|
import { |
||||
|
TitleComponent, |
||||
|
ToolboxComponent, |
||||
|
TooltipComponent, |
||||
|
GridComponent, |
||||
|
DataZoomComponent |
||||
|
} from "echarts/components"; |
||||
|
import { LineChart } from "echarts/charts"; |
||||
|
import { SVGRenderer } from "echarts/renderers"; |
||||
|
|
||||
|
echarts.use([ |
||||
|
TitleComponent, |
||||
|
ToolboxComponent, |
||||
|
TooltipComponent, |
||||
|
GridComponent, |
||||
|
DataZoomComponent, |
||||
|
LineChart, |
||||
|
SVGRenderer |
||||
|
]); |
||||
|
|
||||
|
export default { |
||||
|
props: { |
||||
|
id: { type: String, default: "lineEchart" }, |
||||
|
data: { type: Array, default: () => [] } |
||||
|
}, |
||||
|
watch: { |
||||
|
data(newVal, oldVal) { |
||||
|
console.log(newVal, oldVal); |
||||
|
this.options.series[0].data = newVal; |
||||
|
this.options && this.chart.setOption(this.options); |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
tempKeyPointArray: [], |
||||
|
options: { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
position: function(pt) { |
||||
|
return [pt[0], "10%"]; |
||||
|
} |
||||
|
}, |
||||
|
title: { |
||||
|
left: "center", |
||||
|
text: "收益面积图" |
||||
|
}, |
||||
|
toolbox: { |
||||
|
feature: {} |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "time", |
||||
|
boundaryGap: false |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: "value", |
||||
|
boundaryGap: [0, "100%"] |
||||
|
}, |
||||
|
dataZoom: [ |
||||
|
{ |
||||
|
type: "inside", |
||||
|
start: 0, |
||||
|
end: 100 |
||||
|
}, |
||||
|
{ |
||||
|
start: 0, |
||||
|
end: 100 |
||||
|
} |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "收益", |
||||
|
type: "line", |
||||
|
smooth: true, |
||||
|
symbol: "none", |
||||
|
areaStyle: {}, |
||||
|
data: this.data |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
let chartDom = document.getElementById(this.id); |
||||
|
this.chart = echarts.init(chartDom); |
||||
|
this.options && this.chart.setOption(this.options); |
||||
|
}, |
||||
|
methods: {} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.k-line { |
||||
|
height: 500px; |
||||
|
width: 90%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,321 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-4"> |
||||
|
<card |
||||
|
><span style="fontSize:20px;color:#ffffff;fontWeight:600" |
||||
|
>投资总资金：1000000U</span |
||||
|
></card |
||||
|
> |
||||
|
</div> |
||||
|
<div class="col-md-4"> |
||||
|
<card |
||||
|
><span style="fontSize:20px;color:#ffffff;fontWeight:600" |
||||
|
>系统收益：10000000000U</span |
||||
|
></card |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
<base-button @click="modal.accountAddVisible = true"> |
||||
|
创建账户 |
||||
|
</base-button> |
||||
|
<el-table :data="data" class="customer-no-border-table" style="width:100%"> |
||||
|
<el-table-column |
||||
|
v-for="i in columns" |
||||
|
:label="i.name" |
||||
|
:prop="i.prop" |
||||
|
:key="i.prop" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- 投资收益 --> |
||||
|
<div v-if="i.customSlot == 'OrderType'"></div> |
||||
|
<!-- 操作 --> |
||||
|
<div v-if="i.customSlot == 'Actions'"> |
||||
|
<el-dropdown |
||||
|
trigger="click" |
||||
|
:tabindex="1000" |
||||
|
@command="handleCommand" |
||||
|
> |
||||
|
<base-button>操作</base-button> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<el-dropdown-item command="apiKeyVisible" |
||||
|
>编辑</el-dropdown-item |
||||
|
> |
||||
|
<el-dropdown-item command="amountChangeFormVisible" |
||||
|
>资金变动</el-dropdown-item |
||||
|
> |
||||
|
<el-dropdown-item command="logVisible" |
||||
|
>变更记录</el-dropdown-item |
||||
|
> |
||||
|
<el-dropdown-item command="delete">删除</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
</div> |
||||
|
<span v-else> {{ scope.row[i.prop] }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 添加账户 --> |
||||
|
<modal |
||||
|
:show.sync="modal.accountAddVisible" |
||||
|
body-classes="p-0" |
||||
|
modal-classes="modal-dialog-centered modal-sm" |
||||
|
> |
||||
|
<card |
||||
|
type="secondary" |
||||
|
header-classes="bg-white pb-5" |
||||
|
body-classes="px-lg-5 py-lg-5" |
||||
|
class="border-0 mb-0" |
||||
|
> |
||||
|
<template> |
||||
|
<div class="text-muted text-center mb-3"> |
||||
|
<small>添加账号</small> |
||||
|
</div> |
||||
|
<form role="form"> |
||||
|
<base-input |
||||
|
label="账户" |
||||
|
placeholder="请填写账户" |
||||
|
v-model="accountForm.LoginName" |
||||
|
> |
||||
|
</base-input> |
||||
|
<base-input |
||||
|
label="密码" |
||||
|
placeholder="请填写密码" |
||||
|
v-model="accountForm.AccessKey" |
||||
|
> |
||||
|
</base-input> |
||||
|
<base-input |
||||
|
label="投资资金" |
||||
|
placeholder="请填写投资资金" |
||||
|
v-model="accountForm.AccessKey" |
||||
|
> |
||||
|
</base-input> |
||||
|
|
||||
|
<div class="text-center"> |
||||
|
<base-button |
||||
|
type="primary" |
||||
|
class="my-4" |
||||
|
@click="addAccount" |
||||
|
:loading="createLoading" |
||||
|
>创建账户</base-button |
||||
|
> |
||||
|
</div> |
||||
|
</form> |
||||
|
</template> |
||||
|
</card> |
||||
|
</modal> |
||||
|
|
||||
|
<!-- 资金变动 --> |
||||
|
<modal |
||||
|
:show.sync="modal.amountChangeFormVisible" |
||||
|
body-classes="p-0" |
||||
|
modal-classes="modal-dialog-centered modal-sm" |
||||
|
> |
||||
|
<card |
||||
|
type="secondary" |
||||
|
header-classes="bg-white pb-5" |
||||
|
body-classes="px-lg-5 py-lg-5" |
||||
|
class="border-0 mb-0" |
||||
|
> |
||||
|
<template> |
||||
|
<div class="text-muted text-center mb-3"> |
||||
|
<small>资金变动</small> |
||||
|
</div> |
||||
|
<form role="form"> |
||||
|
<!-- 类型 --> |
||||
|
<p class="form-label" style="color:rgba(255, 255, 255, 0.6)"> |
||||
|
类型： |
||||
|
</p> |
||||
|
<el-select |
||||
|
class="select-danger mb-4" |
||||
|
style="width:100%" |
||||
|
placeholder="选择改变资金类型" |
||||
|
v-model="amountChangeForm.AccountType" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in changeTypes" |
||||
|
class="select-danger" |
||||
|
:value="item.value" |
||||
|
:label="item.title" |
||||
|
:key="item.value" |
||||
|
> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
<base-input |
||||
|
label="变动金额" |
||||
|
placeholder="请填写变动金额" |
||||
|
v-model="amountChangeForm.AccessKey" |
||||
|
> |
||||
|
</base-input> |
||||
|
|
||||
|
<base-input |
||||
|
label="备注" |
||||
|
placeholder="请填写备注" |
||||
|
v-model="amountChangeForm.AccessKey" |
||||
|
> |
||||
|
</base-input> |
||||
|
|
||||
|
<div class="text-center"> |
||||
|
<base-button |
||||
|
type="primary" |
||||
|
class="my-4" |
||||
|
@click="moneyChange" |
||||
|
:loading="createLoading" |
||||
|
>确定</base-button |
||||
|
> |
||||
|
</div> |
||||
|
</form> |
||||
|
</template> |
||||
|
</card> |
||||
|
</modal> |
||||
|
|
||||
|
<!-- 变更记录 --> |
||||
|
<modal |
||||
|
:show.sync="modal.logVisible" |
||||
|
body-classes="p-0" |
||||
|
modal-classes="modal-dialog-centered modal-xl" |
||||
|
> |
||||
|
<card |
||||
|
type="secondary" |
||||
|
header-classes="bg-white pb-5" |
||||
|
body-classes="px-lg-5 py-lg-5" |
||||
|
class="border-0 mb-0" |
||||
|
> |
||||
|
<template> |
||||
|
<div class="text-muted text-center mb-3"> |
||||
|
<small>资金变动</small> |
||||
|
</div> |
||||
|
<el-table :data="changeData"> |
||||
|
<el-table-column |
||||
|
v-for="i in changeColumns" |
||||
|
:label="i.name" |
||||
|
:width="i.width || 160" |
||||
|
:prop="i.prop" |
||||
|
:key="i.prop" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- 投资收益 --> |
||||
|
<div v-if="i.customSlot == 'OrderType'"></div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</template> |
||||
|
</card> |
||||
|
</modal> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { Modal } from "@/components"; |
||||
|
import Card from "../../components/Cards/Card.vue"; |
||||
|
|
||||
|
const Columns = [ |
||||
|
{ |
||||
|
name: "账户", |
||||
|
prop: "Account", |
||||
|
key: "Account" |
||||
|
}, |
||||
|
{ |
||||
|
name: "昵称", |
||||
|
prop: "Nick", |
||||
|
key: "Nick" |
||||
|
}, |
||||
|
{ |
||||
|
name: "投资资金", |
||||
|
prop: "Money", |
||||
|
key: "Money", |
||||
|
customSlot: "CapitalAfter" |
||||
|
}, |
||||
|
{ |
||||
|
name: "投资占比", |
||||
|
prop: "Ratio", |
||||
|
key: "Ratio", |
||||
|
customSlot: "CapitalAfter" |
||||
|
}, |
||||
|
{ |
||||
|
name: "投资收益", |
||||
|
prop: "Profit", |
||||
|
key: "Profit" |
||||
|
}, |
||||
|
{ |
||||
|
name: "最后变更时间", |
||||
|
prop: "LastModified", |
||||
|
key: "LastModified" |
||||
|
}, |
||||
|
{ |
||||
|
name: "操作", |
||||
|
prop: "Actions", |
||||
|
key: "Actions", |
||||
|
customSlot: "Actions" |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
const ChangeColumns = [ |
||||
|
{ |
||||
|
name: "账户", |
||||
|
prop: "Account", |
||||
|
key: "Account" |
||||
|
}, |
||||
|
{ |
||||
|
name: "昵称", |
||||
|
prop: "Nick", |
||||
|
key: "Nick" |
||||
|
}, |
||||
|
{ |
||||
|
name: "类型", |
||||
|
prop: "Type", |
||||
|
key: "Type", |
||||
|
customSlot: "Type" |
||||
|
}, |
||||
|
{ |
||||
|
name: "变更金额", |
||||
|
prop: "ChangeAmount", |
||||
|
key: "ChangeAmount" |
||||
|
}, |
||||
|
{ |
||||
|
name: "备注", |
||||
|
prop: "Remark", |
||||
|
key: "Remark" |
||||
|
}, |
||||
|
{ |
||||
|
name: "时间", |
||||
|
prop: "Time", |
||||
|
key: "Time" |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
export default { |
||||
|
components: { Modal }, |
||||
|
data() { |
||||
|
return { |
||||
|
modal: { |
||||
|
accountAddVisible: false, |
||||
|
logVisible: false, |
||||
|
amountChangeFormVisible: false |
||||
|
}, |
||||
|
createLoading: false, |
||||
|
columns: Columns, |
||||
|
changeColumns: ChangeColumns, |
||||
|
accountForm: {}, |
||||
|
amountChangeForm: {}, |
||||
|
data: [{ Account: "小一" }], |
||||
|
changeData: [], |
||||
|
changeTypes: [ |
||||
|
{ value: 0, title: "增加资金" }, |
||||
|
{ value: 1, title: "减少资金" } |
||||
|
] |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
addAccount() {}, |
||||
|
moneyChange() {}, |
||||
|
handleCommand(command) { |
||||
|
this.modal[command] = true; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style></style> |
||||
@ -1,11 +1,126 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div> |
||||
|
<el-table :data="data" height="600" class="customer-no-border-table"> |
||||
|
<el-table-column |
||||
|
v-for="i in columns" |
||||
|
:label="i.name" |
||||
|
:prop="i.prop" |
||||
|
:key="i.prop" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- 卖卖类型 --> |
||||
|
<div v-if="i.customSlot == 'OrderType'"> |
||||
|
<p>买入</p> |
||||
|
<p>卖出</p> |
||||
|
</div> |
||||
|
<!-- 手持资金 --> |
||||
|
<div v-else-if="i.customSlot == 'CapitalAfter'"> |
||||
|
<p>{{ scope.row.CapitalAfterPurchase.toFixed(2) || 0 }}</p> |
||||
|
<p>{{ scope.row.CapitalAfterSale.toFixed(2) || 0 }}</p> |
||||
|
</div> |
||||
|
<!-- 买卖时间 --> |
||||
|
<div v-else-if="i.customSlot == 'KLineId'"> |
||||
|
<p> |
||||
|
{{ |
||||
|
scope.row.PurchaseKLineId |
||||
|
? moment(scope.row.PurchaseKLineId * 1000).format( |
||||
|
"YYYY-MM-DD HH:mm:ss" |
||||
|
) |
||||
|
: "-" |
||||
|
}} |
||||
|
</p> |
||||
|
<p> |
||||
|
{{ |
||||
|
scope.row.SaleKLineId |
||||
|
? moment(scope.row.SaleKLineId * 1000).format( |
||||
|
"YYYY-MM-DD HH:mm:ss" |
||||
|
) |
||||
|
: "-" |
||||
|
}} |
||||
|
</p> |
||||
|
</div> |
||||
|
<!-- 买卖价格 --> |
||||
|
<div v-else-if="i.customSlot == 'Price'"> |
||||
|
<p>{{ scope.row.PurchasePrice }}</p> |
||||
|
<p>{{ scope.row.SalePrice }}</p> |
||||
|
</div> |
||||
|
<!-- 买卖数量 --> |
||||
|
<div v-else-if="i.customSlot == 'Count'"> |
||||
|
<p>{{ scope.row.PurchaseCoinCount || "-" }}</p> |
||||
|
<p>{{ scope.row.SaleCoinCount || "-" }}</p> |
||||
|
</div> |
||||
|
<!-- 成交总价 --> |
||||
|
<div v-else-if="i.customSlot == 'Total'"> |
||||
|
<p>{{ scope.row.TotalPurchasePrice || "-" }}</p> |
||||
|
<p>{{ scope.row.TotalSalePrice || "-" }}</p> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 借币金额 --> |
||||
|
<div v-else-if="i.customSlot == 'BorrowAmount'"> |
||||
|
<p>{{ scope.row.BorrowAmount.toFixed(2) || "-" }}</p> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 借币利息 --> |
||||
|
<div v-else-if="i.customSlot == 'BorrowFee'"> |
||||
|
<p>{{ scope.row.BorrowFee.toFixed(2) || "-" }}</p> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 借币比例 --> |
||||
|
<div v-else-if="i.customSlot == 'BorrowRatio'"> |
||||
|
<p>{{ scope.row.BorrowRatio.toFixed(2) || "-" }}%</p> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 最大浮亏 --> |
||||
|
<div v-else-if="i.customSlot == 'MaxLossRatio'"> |
||||
|
<p>{{ scope.row.MaxLossPrice || "-" }}</p> |
||||
|
<p>{{ scope.row.MaxLossRatio || "-" }}%</p> |
||||
|
</div> |
||||
|
<!-- 盈亏 --> |
||||
|
<div v-else-if="i.customSlot == 'Profit'"> |
||||
|
<p>{{ scope.row.Profit }}</p> |
||||
|
<p v-if="scope.row.Profit"> |
||||
|
{{ |
||||
|
( |
||||
|
(scope.row.Profit / scope.row.TotalPurchasePrice) * |
||||
|
100 |
||||
|
).toFixed(2) |
||||
|
}}% |
||||
|
</p> |
||||
|
<p v-else>-</p> |
||||
|
</div> |
||||
|
<!-- 累计盈亏 --> |
||||
|
<div v-else-if="i.customSlot == 'TotalProfit'"> |
||||
|
<p>{{ scope.row.TotalProfit }}</p> |
||||
|
<p v-if="scope.row.TotalProfit"> |
||||
|
{{ scope.row.TotalProfitRatio }}% |
||||
|
</p> |
||||
|
<p v-else>-</p> |
||||
|
</div> |
||||
|
<div v-else> |
||||
|
<p>{{ scope.row[i.prop] }}</p> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
import {secondTradeColumns} from '../prePages/js/columns' |
import { secondTradeColumns } from "../prePages/js/columns"; |
||||
export default { |
export default { |
||||
|
props: { |
||||
} |
robotId: { type: String, default: "" } |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
columns: secondTradeColumns, |
||||
|
data: [] |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.init(); |
||||
|
}, |
||||
|
methods: { |
||||
|
init() {} |
||||
|
} |
||||
|
}; |
||||
</script> |
</script> |
||||
@ -0,0 +1,40 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-table :data="data" class="customer-no-border-table"> |
||||
|
<el-table-column |
||||
|
v-for="i in secondLogColumns" |
||||
|
:label="i.name" |
||||
|
:prop="i.prop" |
||||
|
:key="i.prop" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<div v-if="i.customSlot == 'OrderType'"></div> |
||||
|
<div v-else> |
||||
|
<p>{{ scope.row[i.prop] }}</p> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { secondLogColumns } from "../prePages/js/columns"; |
||||
|
export default { |
||||
|
props: { |
||||
|
robotId: { type: String, default: "" } |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
secondLogColumns, |
||||
|
data: [] |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.init(); |
||||
|
}, |
||||
|
methods: { |
||||
|
init() {} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,38 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<card><LineEcahrt :data="data"/></card> |
||||
|
<card> |
||||
|
<p>购买交易数量：</p> |
||||
|
<p>购买交易数量：</p> |
||||
|
<p>购买交易数量：</p> |
||||
|
<p>购买交易数量：</p> |
||||
|
<p>购买交易数量：</p> |
||||
|
<p>购买交易数量：</p> |
||||
|
<p>购买交易数量：</p> |
||||
|
</card> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import LineEcahrt from "../../oldComponents/EchartTable/line.vue"; |
||||
|
export default { |
||||
|
components: { |
||||
|
LineEcahrt |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
data: [ |
||||
|
["2021/6/28", 12], |
||||
|
["2021/6/29", 2], |
||||
|
["2021/6/30", 44], |
||||
|
["2021/7/1", 54], |
||||
|
["2021/7/2", 34], |
||||
|
["2021/7/3", 12], |
||||
|
["2021/7/4", 21], |
||||
|
["2021/7/5", 21], |
||||
|
["2021/7/6", 333], |
||||
|
["2021/7/7", 43] |
||||
|
] |
||||
|
}; |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
@ -1,14 +1,23 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div> |
||||
<el-tabs value="1"> |
<el-tabs value="1"> |
||||
<el-tab-pane name="1" label="概况"> </el-tab-pane> |
<el-tab-pane name="1" label="概况"> <Summary /></el-tab-pane> |
||||
<el-tab-pane name="2" label="交易清单"> </el-tab-pane> |
<el-tab-pane name="2" label="交易清单"><OrderTable /> </el-tab-pane> |
||||
<el-tab-pane name="3" label="信号日志"> </el-tab-pane> |
<el-tab-pane name="3" label="信号日志"> <SignalTable /></el-tab-pane> |
||||
<el-tab-pane name="4" label="资金日志"> </el-tab-pane> |
<el-tab-pane name="4" label="资金日志"> </el-tab-pane> |
||||
</el-tabs> |
</el-tabs> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default {}; |
import OrderTable from "./OrderTable.vue"; |
||||
|
import SignalTable from "./SignalTable.vue"; |
||||
|
import Summary from "./Summary.vue"; |
||||
|
export default { |
||||
|
components: { |
||||
|
OrderTable, |
||||
|
SignalTable, |
||||
|
Summary |
||||
|
} |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|||||
Loading…
Reference in new issue