From 736f026069849c48e232d2f8152be97d9fcfcaf1 Mon Sep 17 00:00:00 2001
From: simple321vip <simple321@vip.qq.com>
Date: Wed, 14 Sep 2022 15:58:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=904=E5=A4=A7?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/capital.ts               | 58 ++++++++++++++++++-
 src/api/cta_strategy.ts          |  9 ---
 src/components/layout/NavBar.vue | 26 +++++++--
 src/store/strategy.ts            |  4 +-
 src/view/capital/index.vue       | 50 +++++++++++------
 src/view/dashboard/index.vue     | 33 +++++++++--
 src/view/recommend/index.vue     | 96 ++++++++++++++++++++++++++++++--
 src/view/trader/dialog.vue       |  2 +-
 8 files changed, 236 insertions(+), 42 deletions(-)

diff --git a/src/api/capital.ts b/src/api/capital.ts
index 1f0fc28..5283994 100644
--- a/src/api/capital.ts
+++ b/src/api/capital.ts
@@ -18,7 +18,23 @@ const get_contract = (symbol: string) => {
   })
 }
 
-"unload a strategy file"
+"get tick"
+const get_tick = (symbol: string) => {
+  return trader_service({
+    url: '/trader/api/v1/tick/' + symbol,
+    method: 'GET',
+  })
+}
+
+"get ticks"
+const get_ticks = () => {
+  return trader_service({
+    url: '/trader/api/v1/ticks',
+    method: 'GET',
+  })
+}
+
+"send_order"
 const send_order = (data: any) => {
   return trader_service({
     url: '/trader/api/v1/order',
@@ -27,8 +43,46 @@ const send_order = (data: any) => {
   })
 }
 
+"get tick"
+const subscribe = (symbol: string) => {
+  return trader_service({
+    url: '/trader/api/v1/subscribe/' + symbol,
+    method: 'GET',
+  })
+}
+
+"get subscribe vt_symbols"
+const get_subscribe_vt_symbols = () => {
+  return trader_service({
+    url: '/trader/api/v1/subscribe/vt_symbols',
+    method: 'GET',
+  })
+}
+
+"get all vt_symbols"
+const get_vt_symbols = () => {
+  return trader_service({
+    url: '/trader/api/v1/vt_symbols',
+    method: 'GET',
+  })
+}
+
+"get exchanges"
+const get_exchanges = () => {
+  return trader_service({
+    url: '/trader/api/v1/exchanges',
+    method: 'GET',
+  })
+}
+
 export {
   get_accounts,
   get_contract,
-  send_order
+  get_tick,
+  get_ticks,
+  subscribe,
+  send_order,
+  get_vt_symbols,
+  get_subscribe_vt_symbols,
+  get_exchanges
 }
\ No newline at end of file
diff --git a/src/api/cta_strategy.ts b/src/api/cta_strategy.ts
index f9dc129..78a3e9b 100644
--- a/src/api/cta_strategy.ts
+++ b/src/api/cta_strategy.ts
@@ -114,14 +114,6 @@ const get_strategy_status = (strategy_name: string) => {
   })
 }
 
-"get a strategy status"
-const get_vt_symbols = () => {
-  return trader_service({
-    url: '/trader/api/v1/strategy/vt_symbols',
-    method: 'GET',
-  })
-}
-
 export {
   get_strategy_files,
   get_strategy_load_files,
@@ -136,5 +128,4 @@ export {
   stop_strategy,
   remove_strategy,
   get_strategy_status,
-  get_vt_symbols
 }
\ No newline at end of file
diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue
index a8a15fe..c8b9618 100644
--- a/src/components/layout/NavBar.vue
+++ b/src/components/layout/NavBar.vue
@@ -1,7 +1,22 @@
 <template>
   <div class="nav-main">
-    当前时间：{{ time }}
-    <span>论一个程序员的寂寞与忧伤</span>
+    <div style="width: 800px;">
+      <div>
+        当前时间：{{ time }}
+      </div>
+      <div>
+        期货交易时间&nbsp
+        <el-icon color="yellow">
+          <Sunrise />
+        </el-icon>&nbsp 9:00-11:30 &nbsp
+        <el-icon color="gold">
+          <Sunny />
+        </el-icon>&nbsp 13:00-15:00 &nbsp
+        <el-icon color="blue">
+          <Moon />
+        </el-icon>&nbsp 21:00-23:00
+      </div>
+    </div>
     <el-dropdown trigger="click" v-show="tenant.account">
       <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
       <template #dropdown>
@@ -11,7 +26,6 @@
         </el-dropdown-menu>
       </template>
     </el-dropdown>
-    <span @click="doLogin" v-show="!tenant.account">登录</span>
   </div>
   <el-dialog v-model="dialogVisible" title="提示" width="30%">
     <span>确认你的登出操作么？</span>
@@ -22,6 +36,7 @@
       </span>
     </template>
   </el-dialog>
+  <span @click="doLogin" v-show="!tenant.account">登录</span>
 </template>
 
 <script setup lang='ts'>
@@ -65,6 +80,9 @@ const doLogout = () => {
 }
 
 .nav-main {
-  float: right;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* background-color: bisque; */
 }
 </style>
diff --git a/src/store/strategy.ts b/src/store/strategy.ts
index 2b0e770..540d46b 100644
--- a/src/store/strategy.ts
+++ b/src/store/strategy.ts
@@ -4,7 +4,9 @@ export const strategyStore = defineStore({
   id: 'strategy',
   state: () => ({
     class_names: [],
-    vt_symbols: []
+    vt_symbols: new Map(),
+    subscribe_vt_symbols: [],
+    exchanges: []
   }),
 })
 
diff --git a/src/view/capital/index.vue b/src/view/capital/index.vue
index 9db0225..80816e0 100644
--- a/src/view/capital/index.vue
+++ b/src/view/capital/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/view/dashboard/index.vue b/src/view/dashboard/index.vue
index 7dbb457..365a75f 100644
--- a/src/view/dashboard/index.vue
+++ b/src/view/dashboard/index.vue
@@ -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()
diff --git a/src/view/recommend/index.vue b/src/view/recommend/index.vue
index 2d29cc5..01686ea 100644
--- a/src/view/recommend/index.vue
+++ b/src/view/recommend/index.vue
@@ -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>
diff --git a/src/view/trader/dialog.vue b/src/view/trader/dialog.vue
index f870bd3..13c17cf 100644
--- a/src/view/trader/dialog.vue
+++ b/src/view/trader/dialog.vue
@@ -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">