simple321vip/violin-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加折叠板

Browse Source
This commit is contained in:
simple321vip
2022-09-17 08:54:48 +08:00
parent 4320f35a52
commit c7aae62f43
3 changed files with 186 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/NavBar.vue
+1 -1
View File
@@ -11,7 +11,7 @@
</el-icon>&nbsp 9:00-11:30 &nbsp
<el-icon color="gold">
<Sunny />
</el-icon>&nbsp 13:00-15:00 &nbsp
</el-icon>&nbsp 13:30-15:00 &nbsp
<el-icon color="blue">
<Moon />
</el-icon>&nbsp 21:00-23:00
src/view/capital/index.vue
+131 -102
View File
@@ -1,102 +1,131 @@
<template>
<div class="capital">
<el-descriptions title="Account Info">
<el-descriptions-item class="descriptionsclass">
<template #label>
<div class="cell-item">
<el-icon style="iconStyle">
<user />
</el-icon>
</div>
</template>
<el-tag size="small"> {{account_data.account_id}}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="gateway_name">{{account_data.geteway_name}}</el-descriptions-item>
<el-descriptions-item label="frozen">{{account_data.frozen}}</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">
<el-icon style="iconStyle">
<Coin />
</el-icon>
</div>
</template>
<el-tag size="small"> {{account_data.balance}}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="Address">No.1188, Gaoxinyuan Avenue, Dalian District, Liaoning, Jiangsu
Province</el-descriptions-item>
</el-descriptions>
<div class="operate">
<div width="180px">
<el-select v-model="vt_symbol" placeholder="select a vt_symbol" @change="select_contract">
<el-option v-for="symbol in store.subscribe_vt_symbols" :value="symbol" />
</el-select>
<el-input-number v-model="volume" :min="1" :max="10" @change="handleChange" />
<el-input-number v-model="price" :min="1" :max="10000" @change="handleChange" />
<el-button type="primary" @click="on_order">下单</el-button>
</div>
<div>
<div style="margin-top: 20px">
<el-radio-group v-model="direction">
<el-radio-button label="多" />
<el-radio-button label="空" />
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="offset">
<el-radio-button label="开" />
<el-radio-button label="平" />
</el-radio-group>
</div>
</div>
</div>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="持仓" name=1></el-tab-pane>
<el-tab-pane label="挂单" name=2></el-tab-pane>
<el-tab-pane label="委托" name=3></el-tab-pane>
<el-tab-pane label="成交" name=4></el-tab-pane>
</el-tabs>
<el-table v-if="activeName == 1" :data="positions_data" stripe style="width: 100%">
<el-table-column prop="symbol" label="合约名称" width="100" />
<el-table-column prop="exchange" label="交易所" width="100" />
<el-table-column prop="direction" label="多空" width="100" />
<el-table-column prop="volume" label="成交量" width="100" />
<el-table-column prop="price" label="开仓价格" width="100" />
<el-table-column prop="frozen" label="frozen" width="100" />
<el-table-column prop="pnl" label="pnl" width="100" />
<el-table-column prop="yd_volume" label="yd_volume" width="120" />
</el-table>
<el-table v-if="activeName == 2" :data="orders_data" stripe style="width: 100%">
<el-table-column prop="symbol" label="合约名称" width="100" />
<el-table-column prop="exchange" label="交易所" width="100" />
<el-table-column prop="direction" label="多空" width="100" />
<el-table-column prop="volume" label="成交量" width="100" />
<el-table-column prop="price" label="开仓价格" width="100" />
</el-table>
<el-table v-if="activeName == 3" :data="orders_data" stripe style="width: 100%">
<el-table-column prop="symbol" label="合约名称" width="80" />
<el-table-column prop="exchange" label="交易所" width="80" />
<el-table-column prop="direction" label="多空" width="80" />
<el-table-column prop="volume" label="成交量" width="80" />
<el-table-column prop="price" label="委托价格" width="100" />
<el-table-column prop="orderid" label="orderid" width="160" />
<el-table-column prop="type" label="type" width="80" />
<el-table-column prop="offset" label="开平" width="80" />
<el-table-column prop="traded" label="traded" width="80" />
<el-table-column prop="status" label="status" width="80" />
<el-table-column prop="reference" label="reference" width="100" />
</el-table>
<el-table v-if="activeName == 4" :data="trades_data" stripe style="width: 100%">
<el-table-column prop="symbol" label="合约名称" width="100" />
<el-table-column prop="exchange" label="交易所" width="100" />
<el-table-column prop="direction" label="多空" width="100" />
<el-table-column prop="volume" label="成交量" width="100" />
<el-table-column prop="price" label="开仓价格" width="100" />
<el-table-column prop="orderid" label="orderid" width="100" />
<el-table-column prop="orderid" label="orderid" width="100" />
<el-table-column prop="offset" label="offset" width="100" />
</el-table>
<div class="demo-collapse">
<el-collapse v-model="activeNames">
<el-collapse-item title="Account Info" name="1">
<el-row>
<el-col :span="1">
<div class="cell-item">
<el-icon style="iconStyle">
<user />
</el-icon>
</div>
</el-col>
<el-col :span="3">
<el-tag size="small"> {{account_data.account_id}}</el-tag>
</el-col>
<el-col :span="1">
<div class="cell-item">
<el-icon style="iconStyle">
<Coin />
</el-icon>
</div>
</el-col>
<el-col :span="3">
<el-tag size="small"> {{account_data.balance}}</el-tag>
</el-col>
<el-col :span="1">
<div class="cell-item">
<el-icon style="iconStyle">
<GobletFull />
</el-icon>
</div>
</el-col>
<el-col :span="3">
<el-tag size="small"> {{account_data.frozen}}</el-tag>
</el-col>
<el-col :span="1">
<div class="cell-item">
<el-icon style="iconStyle">
<School />
</el-icon>
</div>
</el-col>
<el-col :span="3">
<el-tag size="small"> {{account_data.gateway_name}}</el-tag>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="手动下单" name="2" style="display: flex;">
<el-row>
<el-col :span="2">
<el-radio-group v-model="direction">
<el-radio-button label="多" />
<el-radio-button label="空" />
</el-radio-group>
</el-col>
<el-col :span="2">
<el-radio-group v-model="offset">
<el-radio-button label="开" />
<el-radio-button label="平" />
</el-radio-group>
</el-col>
<el-col :span="1"></el-col>
<el-col :span="3">
<el-select v-model="vt_symbol" placeholder="select a vt_symbol" @change="select_contract">
<el-option v-for="symbol in store.subscribe_vt_symbols" :value="symbol" />
</el-select>
</el-col>
<el-col :span="1"></el-col>
<el-col :span="4">
<el-input-number v-model="volume" :min="1" :max="10" @change="handleChange" />
</el-col>
<el-col :span="4">
<el-input-number v-model="price" :min="1" :max="10000" @change="handleChange" />
</el-col>
<el-col :span="4">
<el-button type="primary" @click="on_order">下单</el-button>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="持仓一览" name="3">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="持仓" name=1></el-tab-pane>
<el-tab-pane label="挂单" name=2></el-tab-pane>
<el-tab-pane label="委托" name=3></el-tab-pane>
<el-tab-pane label="成交" name=4></el-tab-pane>
</el-tabs>
<el-table v-if="activeName == 1" :data="positions_data" stripe style="width: 100%">
<el-table-column prop="symbol" label="合约名称" width="100" />
<el-table-column prop="exchange" label="交易所" width="100" />
<el-table-column prop="direction" label="多空" width="100" />
<el-table-column prop="volume" label="成交量" width="100" />
<el-table-column prop="price" label="开仓价格" width="100" />
<el-table-column prop="frozen" label="frozen" width="100" />
<el-table-column prop="pnl" label="pnl" width="100" />
<el-table-column prop="yd_volume" label="yd_volume" width="120" />
</el-table>
<el-table v-if="activeName == 2" :data="orders_data" stripe style="width: 100%">
<el-table-column prop="symbol" label="合约名称" width="100" />
<el-table-column prop="exchange" label="交易所" width="100" />
<el-table-column prop="direction" label="多空" width="100" />
<el-table-column prop="volume" label="成交量" width="100" />
<el-table-column prop="price" label="开仓价格" width="100" />
</el-table>
<el-table v-if="activeName == 3" :data="orders_data" stripe style="width: 100%">
<el-table-column prop="symbol" label="合约名称" width="80" />
<el-table-column prop="exchange" label="交易所" width="80" />
<el-table-column prop="direction" label="多空" width="80" />
<el-table-column prop="volume" label="成交量" width="80" />
<el-table-column prop="price" label="委托价格" width="100" />
<el-table-column prop="orderid" label="orderid" width="160" />
<el-table-column prop="type" label="type" width="80" />
<el-table-column prop="offset" label="开平" width="80" />
<el-table-column prop="traded" label="traded" width="80" />
<el-table-column prop="status" label="status" width="80" />
<el-table-column prop="reference" label="reference" width="100" />
</el-table>
<el-table v-if="activeName == 4" :data="trades_data" stripe style="width: 100%">
<el-table-column prop="symbol" label="合约名称" width="100" />
<el-table-column prop="exchange" label="交易所" width="100" />
<el-table-column prop="direction" label="多空" width="100" />
<el-table-column prop="volume" label="成交量" width="100" />
<el-table-column prop="price" label="开仓价格" width="100" />
<el-table-column prop="orderid" label="orderid" width="100" />
<el-table-column prop="orderid" label="orderid" width="100" />
<el-table-column prop="offset" label="offset" width="100" />
</el-table>
</el-collapse-item>
</el-collapse>
</div>
</template>
@@ -107,7 +136,7 @@ import { reactive, ref, h, onMounted, onUnmounted } from 'vue'
import { get_accounts, send_order, get_tick } from '../../api/capital'
import { strategyStore } from '../../store/strategy';
type AccountData = {
geteway_name: string
gateway_name: string
account_id: string
balance: number
frozen: number
@@ -156,7 +185,7 @@ const volume = ref(1)
const price = ref(3000)
const timer = ref(0)
const account_data = reactive<AccountData>({
geteway_name: '',
gateway_name: '',
account_id: '',
balance: 0.0,
frozen: 0.0
@@ -164,7 +193,7 @@ const account_data = reactive<AccountData>({
const positions_data = reactive<PositionData[]>([])
const trades_data = reactive<TradeData[]>([])
const orders_data = reactive<OrderData[]>([])
const activeNames = ref(['1'])
const on_query_accounts = () => {
get_accounts().then(res => {
@@ -172,7 +201,7 @@ const on_query_accounts = () => {
let account: any = accounts.pop()
account_data.account_id = account.account_id
account_data.balance = account.balance
account_data.geteway_name = account.geteway_name
account_data.gateway_name = account.gateway_name
account_data.frozen = account.frozen
positions_data.length = 0
src/view/recommend/index.vue
+54 -44
View File
@@ -1,38 +1,45 @@
<template>
<el-row>
<el-col :span="4">
<el-select v-model="exchange" placeholder="select a exchange">
<el-option v-for="ex in exchanges" :value="ex" />
</el-select>
</el-col>
<el-col :span="1">
</el-col>
<el-col :span="4">
<el-select v-model="vt_symbol" placeholder="select a vt_symbol">
<el-option v-for="symbol in vt_symbols" :value="symbol" />
</el-select>
</el-col>
<el-col :span="1">
</el-col>
<el-col :span="4">
<span style="cursor: pointer">
<el-icon :size="25" @click="on_subscribe()">
<ZoomIn />
</el-icon>
</span>
</el-col>
</el-row>
<el-table :data="ticks_data" style="width: 100%">
<el-table-column fixed prop="symbol" label="symbol" width="80" />
<el-table-column fixed prop="exchange" label="exchange" width="100" />
<el-table-column fixed prop="name" label="Name" width="120" />
<el-table-column fixed prop="last_price" label="last_price" width="120" />
<el-table-column fixed prop="volume" label="volume" width="100" />
<el-table-column fixed prop="open_price" label="open_price" width="120" />
<el-table-column fixed prop="high_price" label="high_price" width="120" />
<el-table-column fixed prop="low_price" label="low_price" width="120" />
</el-table>
<div class="demo-collapse">
<el-collapse v-model="activeNames">
<el-collapse-item title="订阅行情" name="2">
<el-row>
<el-col :span="4">
<el-select v-model="exchange" placeholder="select a exchange">
<el-option v-for="ex in exchanges" :value="ex" />
</el-select>
</el-col>
<el-col :span="1">
</el-col>
<el-col :span="4">
<el-select v-model="vt_symbol" placeholder="select a vt_symbol">
<el-option v-for="symbol in vt_symbols" :value="symbol" />
</el-select>
</el-col>
<el-col :span="1">
</el-col>
<el-col :span="4">
<span style="cursor: pointer">
<el-icon :size="25" @click="on_subscribe()">
<ZoomIn />
</el-icon>
</span>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="订阅一览" name="1">
<el-table :data="ticks_data" style="width: 100%">
<el-table-column fixed prop="symbol" label="symbol" width="80" />
<el-table-column fixed prop="exchange" label="exchange" width="100" />
<el-table-column fixed prop="name" label="Name" width="120" />
<el-table-column fixed prop="last_price" label="last_price" width="120" />
<el-table-column fixed prop="volume" label="volume" width="100" />
<el-table-column fixed prop="open_price" label="open_price" width="120" />
<el-table-column fixed prop="high_price" label="high_price" width="120" />
<el-table-column fixed prop="low_price" label="low_price" width="120" />
</el-table>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script setup lang="ts">
@@ -41,16 +48,6 @@ import { ElMessage } from 'element-plus'
import { get_ticks, subscribe } from '../../api/capital'
import { strategyStore } from '../../store/strategy'
const store = strategyStore()
const vt_symbol = ref<string>()
const vt_symbols = reactive<string[]>([])
const exchange = ref<string>()
const exchanges = reactive<string[]>([])
store.exchanges.forEach(exchange => {
exchanges.push(exchange)
})
const timer = ref(0)
type TickData = {
symbol: string,
exchange: string,
@@ -61,7 +58,20 @@ type TickData = {
high_price: number,
low_price: number,
}
const store = strategyStore()
const vt_symbol = ref<string>()
const vt_symbols = reactive<string[]>([])
const exchange = ref<string>()
const exchanges = reactive<string[]>([])
store.exchanges.forEach(exchange => {
exchanges.push(exchange)
})
const timer = ref(0)
const ticks_data = reactive<TickData[]>([])
const activeNames = ref(['1'])
const on_subscribe = () => {
if (!vt_symbol.value) {