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> |
|||
<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> |
|||
<!-- 借币金额 --> |
|||
<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> |
|||
</template> |
|||
<script> |
|||
import {secondTradeColumns} from '../prePages/js/columns' |
|||
import { secondTradeColumns } from "../prePages/js/columns"; |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
props: { |
|||
robotId: { type: String, default: "" } |
|||
}, |
|||
data() { |
|||
return { |
|||
columns: secondTradeColumns, |
|||
data: [] |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
methods: { |
|||
init() {} |
|||
} |
|||
}; |
|||
</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> |
|||
<div> |
|||
<el-tabs value="1"> |
|||
<el-tab-pane name="1" label="概况"> </el-tab-pane> |
|||
<el-tab-pane name="2" label="交易清单"> </el-tab-pane> |
|||
<el-tab-pane name="3" label="信号日志"> </el-tab-pane> |
|||
<el-tab-pane name="1" label="概况"> <Summary /></el-tab-pane> |
|||
<el-tab-pane name="2" label="交易清单"><OrderTable /> </el-tab-pane> |
|||
<el-tab-pane name="3" label="信号日志"> <SignalTable /></el-tab-pane> |
|||
<el-tab-pane name="4" label="资金日志"> </el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</template> |
|||
|
|||
<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> |
|||
|
|||
Loading…
Reference in new issue