From c7aae62f433aee1c28912abf6b34f49c7a65f31d Mon Sep 17 00:00:00 2001
From: simple321vip <simple321@vip.qq.com>
Date: Sat, 17 Sep 2022 08:54:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8A=98=E5=8F=A0=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/NavBar.vue |   2 +-
 src/view/capital/index.vue       | 233 +++++++++++++++++--------------
 src/view/recommend/index.vue     |  98 +++++++------
 3 files changed, 186 insertions(+), 147 deletions(-)

diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue
index c8b9618..465a7f7 100644
--- a/src/components/layout/NavBar.vue
+++ b/src/components/layout/NavBar.vue
@@ -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
diff --git a/src/view/capital/index.vue b/src/view/capital/index.vue
index a1969a9..3c559ed 100644
--- a/src/view/capital/index.vue
+++ b/src/view/capital/index.vue
@@ -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
diff --git a/src/view/recommend/index.vue b/src/view/recommend/index.vue
index bcb9cfe..491e138 100644
--- a/src/view/recommend/index.vue
+++ b/src/view/recommend/index.vue
@@ -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) {