初步完成4大模块开发

2022-09-14 15:58:51 +08:00
parent 3baa441fbb
commit 736f026069
8 changed files with 236 additions and 42 deletions
@@ -1,20 +1,26 @@
 <template>
  <div class="capital">
    <el-descriptions title="Account Info">
-      <el-descriptions-item>
+      <el-descriptions-item class="descriptionsclass">
        <template #label>
          <div class="cell-item">
            <el-icon style="iconStyle">
              <user />
            </el-icon>
-            Account
          </div>
        </template>
-        {{account_data.account_id}}
+        <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 label="balance">
+      <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
@@ -23,8 +29,8 @@

    <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 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" />
@@ -80,8 +86,8 @@
 <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 { reactive, ref, h, onMounted, onUnmounted } from 'vue'
+import { get_accounts, send_order, get_contract, subscribe } from '../../api/capital'
 import { strategyStore } from '../../store/strategy';
 type AccountData = {
  geteway_name: string
@@ -107,6 +113,9 @@ const contracts = reactive<string[]>([])
 const direction = ref('多')
 const offset = ref('开')
 const activeName = ref(1)
+const volume = ref(1)
+const price = ref(3000)
+const timer = ref(0)
 const account_data = reactive<AccountData>({
  geteway_name: '',
  account_id: '',
@@ -125,9 +134,9 @@ const on_query_accounts = () => {
    account_data.frozen = res.data.frozen
  })
 }
-const query_contract = () => {
-  get_contract(vt_symbol.value).then(res => {
-
+const select_contract = () => {
+  subscribe(vt_symbol.value).then(res => {
+    price.value = res.data.tick.last_price
  })
 }

@@ -135,8 +144,7 @@ const query_contract = () => {
 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)
 }
@@ -164,10 +172,13 @@ const on_order = () => {
  })
 }

-const init = () => {
-  on_query_accounts()
-}
-init()
+onMounted(() => {
+  clearInterval(timer.value)
+  timer.value = window.setInterval(on_query_accounts, 3000);
+})
+onUnmounted(() => {
+  window.clearInterval(timer.value);
+})

 </script>

@@ -185,4 +196,9 @@ init()
  align-items: center
    /* justify-content: center */
 }
+
+.descriptionsclass {
+  display: flex;
+  align-items: center
+}
 </style>
@@ -8,10 +8,8 @@
 <script setup lang="ts">
 import * as echarts from 'echarts'
 import { onMounted, ref } from 'vue';
-import {
-  get_strategy_load_files,
-  get_vt_symbols
-} from '../../api/cta_strategy'
+import { get_vt_symbols, get_exchanges, get_subscribe_vt_symbols } from '../../api/capital';
+import { get_strategy_load_files } from '../../api/cta_strategy'
 import { h } from 'vue'
 import { ElMessage } from 'element-plus'
 import { strategyStore } from '../../store/strategy';
@@ -34,6 +32,22 @@ const init = () => {
  })

  get_vt_symbols().then(res => {
+    console.log(res)
+    let map = new Map()
+    let keys = Object.keys(res.data.vt_symbols)
+    keys.forEach(key => {
+      map.set(key, res.data.vt_symbols[key])
+    })
+    store.$patch({ vt_symbols: map })
+  }).catch(error => {
+    ElMessage({
+      message: h('p', null, [
+        h('i', { style: 'color: teal' }, "读取vt_symbols失败"),
+      ]),
+    })
+  })
+
+  get_subscribe_vt_symbols().then(res => {
    store.$patch({ vt_symbols: res.data.vt_symbols })
  }).catch(error => {
    ElMessage({
@@ -42,6 +56,17 @@ const init = () => {
      ]),
    })
  })
+
+  get_exchanges().then(res => {
+    store.$patch({ exchanges: res.data.exchanges })
+  }).catch(error => {
+    ElMessage({
+      message: h('p', null, [
+        h('i', { style: 'color: teal' }, "读取exchanges失败"),
+      ]),
+    })
+  })
+
 }
 // init process
 init()
@@ -1,12 +1,100 @@
 <template>
-  <div class="recommend">
-    - 行情订阅后，将会出现在创建策略的symbol中<br>
-    -
+  <el-row>
+    <el-col :span="4">
+      <el-select v-model="exchange" placeholder="select a exchange" @change="filter_vt_symbols">
+        <el-option v-for="ex in store.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 store.vt_symbols.get(exchange)" :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(vt_symbol)">
+          <ZoomIn />
+        </el-icon>
+      </span>
+    </el-col>
+  </el-row>

-  </div>
+  <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>
 </template>

 <script setup lang="ts">
+import { ref, h, onMounted, onUnmounted, reactive } from 'vue'
+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 exchange = ref<string>()
+const timer = ref(0)
+
+type TickData = {
+  symbol: string,
+  exchange: string,
+  name: string,
+  last_price: number,
+  volume: number,
+  open_price: number,
+  high_price: number,
+  low_price: number,
+}
+const ticks_data = reactive<TickData[]>([])
+
+const on_subscribe = (vt_symbol: string) => {
+  subscribe(vt_symbol).then(res => {
+    ElMessage({
+      message: h('p', null, [
+        h('i', { style: 'color: green' }, "行情订阅成功"),
+      ]),
+    })
+  }).catch(error => {
+    ElMessage({
+      message: h('p', null, [
+        h('i', { style: 'color: red' }, "行情订阅失败"),
+      ]),
+    })
+  })
+}
+
+const on_ticks = () => {
+  get_ticks().then(res => {
+    ticks_data.length = 0
+    res.data.ticks.forEach((element: any) => {
+      ticks_data.push(element)
+    });
+  })
+}
+
+const filter_vt_symbols = () => {
+
+}
+
+onMounted(() => {
+  clearInterval(timer.value)
+  timer.value = window.setInterval(on_ticks, 3000);
+})
+onUnmounted(() => {
+  window.clearInterval(timer.value);
+})
+
 </script>

 <style>
@@ -7,7 +7,7 @@
      </el-form-item>
      <el-form-item label="vt_symbol" prop="vt_symbol">
        <el-select v-model="ruleForm.vt_symbol" placeholder="select a vt_symbol">
-          <el-option v-for="vt_symbol in store.vt_symbols" :value="vt_symbol" />
+          <el-option v-for="vt_symbol in store.subscribe_vt_symbols" :value="vt_symbol" />
        </el-select>
      </el-form-item>
      <el-form-item label="class_name" prop="class_name">