add 资金管理

2022-09-13 16:33:17 +08:00
parent cb6db21ab5
commit 3baa441fbb
8 changed files with 306 additions and 100 deletions
@@ -0,0 +1,34 @@
+import { trader_service } from '../utils/request'
+
+"CTA strategy"
+
+"query account"
+const get_accounts = () => {
+  return trader_service({
+    url: '/trader/api/v1/accounts',
+    method: 'GET',
+  })
+}
+
+"get contract"
+const get_contract = (symbol: string) => {
+  return trader_service({
+    url: '/trader/api/v1/contract/' + symbol,
+    method: 'GET',
+  })
+}
+
+"unload a strategy file"
+const send_order = (data: any) => {
+  return trader_service({
+    url: '/trader/api/v1/order',
+    method: 'POST',
+    data: data
+  })
+}
+
+export {
+  get_accounts,
+  get_contract,
+  send_order
+}
@@ -48,17 +48,17 @@ const routes: Array<RouteRecordRaw> = [
        }
      },
      {
-        path: '/recommend',
+        path: '/market',
        component: () => import('../view/recommend/index.vue'),
        meta: {
-          name: '推荐中'
+          name: '市场行情'
        }
      },
      {
-        path: '/download',
-        component: () => import('../view/download/index.vue'),
+        path: '/capital',
+        component: () => import('../view/capital/index.vue'),
        meta: {
-          name: '一键打包'
+          name: '资金管理'
        }
      },
      // {
@@ -0,0 +1,188 @@
+<template>
+  <div class="capital">
+    <el-descriptions title="Account Info">
+      <el-descriptions-item>
+        <template #label>
+          <div class="cell-item">
+            <el-icon style="iconStyle">
+              <user />
+            </el-icon>
+            Account
+          </div>
+        </template>
+        {{account_data.account_id}}
+      </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 label="balance">
+        <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="query_contract">
+          <el-option v-for="symbol in store.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="position_data" stripe style="width: 100%">
+      <el-table-column prop="symbol" label="合约名称" width="180" />
+      <el-table-column prop="direction" label="多空" width="180" />
+      <el-table-column prop="open_price" label="开仓价格" width="180" />
+      <el-table-column prop="gain_loss" label="盈亏" />
+    </el-table>
+    <el-table v-if="activeName == 2" :data="position_data" stripe style="width: 100%">
+      <el-table-column prop="symbol" label="合约名称" width="180" />
+      <el-table-column prop="direction" label="多空" width="180" />
+      <el-table-column prop="balance" label="盈亏" />
+    </el-table>
+    <el-table v-if="activeName == 3" :data="position_data" stripe style="width: 100%">
+      <el-table-column prop="symbol" label="合约名称" width="180" />
+      <el-table-column prop="direction" label="多空" width="180" />
+      <el-table-column prop="balance" label="盈亏" />
+    </el-table>
+    <el-table v-if="activeName == 4" :data="deal_data" stripe style="width: 100%">
+      <el-table-column prop="symbol" label="合约名称" width="180" />
+      <el-table-column prop="direction" label="开平" width="180" />
+      <el-table-column prop="price" label="成交价" width="180" />
+      <el-table-column prop="volume" label="成交量" width="180" />
+      <el-table-column prop="balance" label="成交时间" width="180" />
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { ElMessage, TabsPaneContext } from 'element-plus'
+import { reactive, ref, h } from 'vue'
+import { get_accounts, send_order, get_contract } from '../../api/capital'
+import { strategyStore } from '../../store/strategy';
+type AccountData = {
+  geteway_name: string
+  account_id: string
+  balance: number
+  frozen: number
+}
+type PositionData = {
+  symbol: string
+  direction: string
+  open_price: number
+  gain_loss: number
+}
+type DealData = {
+  symbol: string
+  direction: string
+  price: number
+  volume: number
+}
+const store = strategyStore()
+const vt_symbol = ref<string>("")
+const contracts = reactive<string[]>([])
+const direction = ref('多')
+const offset = ref('开')
+const activeName = ref(1)
+const account_data = reactive<AccountData>({
+  geteway_name: '',
+  account_id: '',
+  balance: 0.0,
+  frozen: 0.0
+})
+const position_data = reactive<PositionData[]>([])
+const deal_data = reactive<DealData[]>([])
+
+
+const on_query_accounts = () => {
+  get_accounts().then(res => {
+    account_data.account_id = res.data.account_id
+    account_data.balance = res.data.balance
+    account_data.geteway_name = res.data.geteway_name
+    account_data.frozen = res.data.frozen
+  })
+}
+const query_contract = () => {
+  get_contract(vt_symbol.value).then(res => {
+
+  })
+}
+
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const volume = ref(1)
+const price = ref(3000)
+const handleChange = (value: number) => {
+  console.log(value)
+}
+const on_order = () => {
+
+  ""
+  if (vt_symbol.value == "") {
+    ElMessage({
+      message: h('p', null, [
+        h('i', { style: 'color: teal' }, "合约不能为空"),
+      ]),
+    })
+    return
+  }
+
+  let data = {
+    vt_symbol: vt_symbol.value,
+    direction: direction.value,
+    offset: offset.value,
+    volume: volume.value,
+    price: price.value
+  }
+  send_order(data).then(res => {
+
+  })
+}
+
+const init = () => {
+  on_query_accounts()
+}
+init()
+
+</script>
+
+<style>
+.dashboard {
+  background-color: beige;
+}
+
+.iconStyle {
+  margin-right: '6px'
+}
+
+.operate {
+  display: flex;
+  align-items: center
+    /* justify-content: center */
+}
+</style>
@@ -8,56 +8,47 @@
 <script setup lang="ts">
 import * as echarts from 'echarts'
 import { onMounted, ref } from 'vue';
-const bookmarks = ref<HTMLElement>()
+import {
+  get_strategy_load_files,
+  get_vt_symbols
+} from '../../api/cta_strategy'
+import { h } from 'vue'
+import { ElMessage } from 'element-plus'
+import { strategyStore } from '../../store/strategy';
+
+const store = strategyStore()
 onMounted(() => {
-  const myEcharts = echarts.init(bookmarks.value!)
-  const option = {
-    tooltip: {
-      trigger: 'item'
-    },
-    legend: {
-      top: '5%',
-      left: 'center'
-    },
-    series: [
-      {
-        name: 'Access From',
-        type: 'pie',
-        radius: ['40%', '70%'],
-        avoidLabelOverlap: false,
-        itemStyle: {
-          borderRadius: 10,
-          borderColor: '#fff',
-          borderWidth: 2
-        },
-        label: {
-          show: false,
-          position: 'center'
-        },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: '25',
-            fontWeight: 'bold'
-          }
-        },
-        labelLine: {
-          show: false
-        },
-        data: [
-          { value: 1048, name: 'Java' },
-          { value: 735, name: 'JavaScript' },
-          { value: 580, name: 'Internet' },
-          { value: 484, name: '数据结构' },
-          { value: 300, name: '数据库' }
-        ]
-      }
-    ]
-  }
-  myEcharts.setOption(option)
+
 })

+const init = () => {
+
+  get_strategy_load_files().then(res => {
+    store.$patch({ class_names: res.data.class_names })
+  }).catch(error => {
+    ElMessage({
+      message: h('p', null, [
+        h('i', { style: 'color: teal' }, "读取策略文件失败"),
+      ]),
+    })
+  })
+
+  get_vt_symbols().then(res => {
+    store.$patch({ vt_symbols: res.data.vt_symbols })
+  }).catch(error => {
+    ElMessage({
+      message: h('p', null, [
+        h('i', { style: 'color: teal' }, "读取vt_symbols失败"),
+      ]),
+    })
+  })
+}
+// init process
+init()
+
+
 </script>

 <style>
+
 </style>
@@ -1,20 +0,0 @@
-<template>
-  <div class="dashboard">
-    初期设想，作为登录用户的功能之一，可选择式的数据抽取
-    包括用户相关资料的全部取回操作。
-    bookmark
-    blog
-    study
-    cloud
-    等等。并没有打算在每个模块下提供下载工程，因为我这个不是面向业务的。提供下载工程无非是怕数据丢失而已，仅限于此
-  </div>
-</template>
-
-<script setup lang="ts">
-</script>
-
-<style>
-.dashboard {
-  background-color: beige;
-}
-</style>
@@ -1,5 +1,9 @@
 <template>
-  <div class="dashboard">这里我想分享的一些东西，无论是生活还是工作，还是学科</div>
+  <div class="recommend">
+    - 行情订阅后，将会出现在创建策略的symbol中<br>
+    -
+
+  </div>
 </template>

 <script setup lang="ts">
@@ -138,26 +138,6 @@ const on_status = (row: any) => {

 const init = () => {
  on_list()
-
-  get_strategy_load_files().then(res => {
-    store.$patch({ class_names: res.data.class_names })
-  }).catch(error => {
-    ElMessage({
-      message: h('p', null, [
-        h('i', { style: 'color: teal' }, "读取策略文件失败"),
-      ]),
-    })
-  })
-
-  get_vt_symbols().then(res => {
-    store.$patch({ vt_symbols: res.data.vt_symbols })
-  }).catch(error => {
-    ElMessage({
-      message: h('p', null, [
-        h('i', { style: 'color: teal' }, "读取vt_symbols失败"),
-      ]),
-    })
-  })
 }
 // init process
 init()
@@ -21,15 +21,44 @@
      <el-table-column type="index" label="index" width="80" />
      <el-table-column prop="file_name" label="策略文件名" width="200" />
      <el-table-column prop="class_name" label="策略类名" width="200" />
-      <el-table-column prop="status" label="状态" width="180" />
-      <el-table-column prop="facvion" label="图标" width="60" />
-      <el-table-column class="click-icon" prop="url" label="操作">
+      <el-table-column prop="status" label="状态" width="60">
        <template #default="scope">
-          <span v-if="scope.row.status == 0" style="cursor: pointer" @click="on_load(scope.row)">{{ "加载图标" }}</span>
-          <span v-if="scope.row.status == 0" style="cursor: pointer" @click="on_remove(scope.row)">{{ "删除" }}</span>
-          <span v-if="scope.row.status == 2" style="cursor: pointer">{{ "加载中图标" }}</span>
-          <span v-if="scope.row.status == 1" style="cursor: pointer" @click="on_unload(scope.row)">{{
-          "卸载图标" }}</span>
+          <el-icon v-if="scope.row.status == 0" :size="20">
+            <InfoFilled />
+          </el-icon>
+          <el-icon v-if="scope.row.status == 1" :size="20" color="green">
+            <SuccessFilled />
+          </el-icon>
+          <el-icon v-if="scope.row.status == 2" :size="20" color="gold">
+            <WarningFilled />
+          </el-icon>
+        </template>
+      </el-table-column>
+      <el-table-column prop="url" label="加载" width="60">
+        <template #default="scope">
+          <span v-if="scope.row.status == 0" style="cursor: pointer">
+            <el-icon :size="20" @click="on_remove(scope.row)" color="blue">
+              <CirclePlusFilled />
+            </el-icon>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="url" label="卸载" width="60">
+        <template #default="scope">
+          <span v-if="scope.row.status == 1" style="cursor: pointer">
+            <el-icon :size="20" @click="on_remove(scope.row)" color="red">
+              <RemoveFilled />
+            </el-icon>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="url" label="删除" width="60">
+        <template #default="scope">
+          <span v-if="scope.row.status == 0" style="cursor: pointer">
+            <el-icon :size="20" @click="on_remove(scope.row)" color="red">
+              <Delete />
+            </el-icon>
+          </span>
        </template>
      </el-table-column>
    </el-table>