update

src/common/methods/format/index.ts

@@ -57,28 +57,30 @@ export function formatValue(value: number | string) {
     }
 }
 
-type TIME = 's' | 'm' | 'd'
+type TIME = 's' | 'm' | 'd' | 'hm'
 /**
  * 格式化时间
- * @param value 
+ * @param value
  * @param type 's' => 格式: YYYY-MM-DD HH:mm:ss ;  'm'  => 格式: YYYY-MM-DD HH:mm ;  'd' => 'YYYY-MM-DD'
- * @returns 
+ * @returns
  */
-export function formatTime(value: string | Date | Moment, type: TIME) {
+export function formatTime(value: string | Date | Moment, type?: TIME) {
     let str = 'YYYY-MM-DD HH:mm:ss';
     if (type === 'd') {
         str = 'YYYY-MM-DD'
     } else if (type === 'm') {
-        'YYYY-MM-DD HH:mm'
+        str = 'YYYY-MM-DD HH:mm'
+    } else if (type === 'hm') {
+        str = 'HH:mm'
     }
-    if(value === '--') return '';
+    if (value === '--') return '';
     if (value) return moment(value).format(str);
     return value;
 }
 
 
 export function formatNumber(value: number, decimals: number): string {
-    if(value === undefined){
+    if (value === undefined) {
         return "0"
     }
     return value.toFixed(decimals)

src/common/setup/request/index.ts

@@ -7,15 +7,24 @@ type PromoiseFn = (param?: any) => Promise<any>
 export function useQueryData<T>(fn: PromoiseFn, param?: any) {
     const loading = ref<boolean>(true)
     const list = ref<T[]>([])
-    if (param) {
-        fn(param).then(res => list.value = res)
-            .catch(err => message.error(err))
-            .finally(() => loading.value = false)
-    } else {
-        fn().then(res => list.value = res)
-            .catch(err => message.error(err))
-            .finally(() => loading.value = false)
+    function update() {
+        if (param) {
+            console.log('查询数据 参数', param)
+            fn(param).then(res => {
+                console.log(' 查询数据 hooks', res)
+                list.value = res
+            })
+                .catch(err => message.error(err))
+                .finally(() => loading.value = false)
+        } else {
+            fn().then(res => {
+                console.log(' 查询数据 hooks', res)
+                list.value = res
+            })
+                .catch(err => message.error(err))
+                .finally(() => loading.value = false)
+        }
     }
-
-    return { loading, list }
+    update()
+    return { loading, list, update }
 }

src/views/market/spot_trade/spot_trade_order_transaction/components/buy-sell-market/index.vue

@@ -1,88 +1,92 @@
 <template>
-    <!-- 买卖大厅 -->
-    <div class="buy-sell-market">
-        <div class="buy-sell-market-title">
-            <a class="backIcon" @click="cancelAction">
-                <LeftOutlined />
-            </a>
-            <div class="titleBtn">
-                <div class="name">{{selectedRow.goodscode}} {{selectedRow.goodsname}}</div>
-                <div class="arrowRightIcon"></div>
+  <!-- 买卖大厅 -->
+  <div class="buy-sell-market">
+    <div class="buy-sell-market-title">
+      <a class="backIcon"
+         @click="cancelAction">
+        <LeftOutlined />
+      </a>
+      <div class="titleBtn">
+        <div class="name">{{selectedRow.goodscode}} {{selectedRow.goodsname}}</div>
+        <div class="arrowRightIcon"></div>
+      </div>
+      <div class="inlineBar">
+        <div class="valNums bdf1 ml10">
+          <!-- 最新价 -->
+          <div class="firstNum start red1">1255.00</div>
+          <div class="lastNum start">
+            <!-- 涨跌值 -->
+            <div class="red1">1255.00</div>
+            <!-- 涨跌幅 -->
+            <div class="red1 ml20">1255.00</div>
+          </div>
+        </div>
+        <div class="priceBar ml20">
+          <div class="inlineBar start">
+            <div class="greenBar green">
+              <div class="numBlock ml15">
+                <div class="first">卖价</div>
+                <div class="last">{{selectedRow.sellprice}}</div>
+              </div>
+              <div class="numBlock">
+                <div class="first">卖量</div>
+                <div class="last">{{selectedRow.sellqty}}</div>
+              </div>
+            </div>
+            <div class="greenBar green">
+              <div class="numBlock ml15">
+                <div class="first">卖价</div>
+                <div class="last">{{selectedRow.sellprice}}</div>
+              </div>
+              <div class="numBlock">
+                <div class="first">卖量</div>
+                <div class="last">{{selectedRow.sellqty}}</div>
+              </div>
             </div>
-            <div class="inlineBar">
-                <div class="valNums bdf1 ml10">
-                    <!-- 最新价 -->
-                    <div class="firstNum start red1">1255.00</div>
-                    <div class="lastNum start">
-                        <!-- 涨跌值 -->
-                        <div class="red1">1255.00</div>
-                        <!-- 涨跌幅 -->
-                        <div class="red1 ml20">1255.00</div>
-                    </div>
-                </div>
-                <div class="priceBar ml20">
-                    <div class="inlineBar start">
-                        <div class="greenBar green">
-                            <div class="numBlock ml15">
-                                <div class="first">卖价</div>
-                                <div class="last">{{selectedRow.sellprice}}</div>
-                            </div>
-                            <div class="numBlock">
-                                <div class="first">卖量</div>
-                                <div class="last">{{selectedRow.sellqty}}</div>
-                            </div>
-                        </div>
-                        <div class="greenBar green">
-                            <div class="numBlock ml15">
-                                <div class="first">卖价</div>
-                                <div class="last">{{selectedRow.sellprice}}</div>
-                            </div>
-                            <div class="numBlock">
-                                <div class="first">卖量</div>
-                                <div class="last">{{selectedRow.sellqty}}</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="inlineBar start">
-                        <div class="redBar red1">
-                            <div class="numBlock">
-                                <div class="first">买价</div>
-                                <div class="last">{{selectedRow.buyprice}}</div>
-                            </div>
-                            <div class="numBlock">
-                                <div class="first">买量</div>
-                                <div class="last">{{selectedRow.buyqty}}</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+          </div>
+          <div class="inlineBar start">
+            <div class="redBar red1">
+              <div class="numBlock">
+                <div class="first">买价</div>
+                <div class="last">{{selectedRow.buyprice}}</div>
+              </div>
+              <div class="numBlock">
+                <div class="first">买量</div>
+                <div class="last">{{selectedRow.buyqty}}</div>
+              </div>
             </div>
-            <BtnList :btnList="btnListData" :record="selectedRow" @click="openComponent" />
+          </div>
         </div>
-        <!-- 交易图表 -->
-        <Chart v-if="showComponentsId === ComponentType.chart" @update="changeComponent" />
-        <!-- 买卖大厅内容 -->
-        <a-row class="buySellHall" v-if="showComponentsId === ComponentType.marketContent">
-            <a-col :span="12">
-                <Sell ref="sellRef" :parantSelectedRow="deliverGoods" />
-            </a-col>
-            <a-col :span="12">
-                <Buy ref="buyRef" :parantSelectedRow="deliverGoods" />
-            </a-col>
-        </a-row>
-        <!-- 成交明细 -->
-        <StockExchange
-            :deliverGoods="deliverGoods"
-            v-if="showComponentsId === ComponentType.tradeDetail"
-        />
-        <component
-            :is="componentId"
-            v-if="componentId"
-            :selectedRow="deliverGoods"
-            :parantSelectedRow="deliverGoods"
-            @cancel="closeComponent"
-        ></component>
+      </div>
+      <BtnList :btnList="btnListData"
+               :record="selectedRow"
+               @click="openComponent" />
     </div>
+    <!-- 交易图表 -->
+    <Chart v-if="showComponentsId === ComponentType.chart"
+           @update="changeComponent"
+           :deliverGoods="deliverGoods" />
+    <!-- 买卖大厅内容 -->
+    <a-row class="buySellHall"
+           v-if="showComponentsId === ComponentType.marketContent">
+      <a-col :span="12">
+        <Sell ref="sellRef"
+              :parantSelectedRow="deliverGoods" />
+      </a-col>
+      <a-col :span="12">
+        <Buy ref="buyRef"
+             :parantSelectedRow="deliverGoods" />
+      </a-col>
+    </a-row>
+    <!-- 成交明细 -->
+    <StockExchange :deliverGoods="deliverGoods"
+                   v-if="showComponentsId === ComponentType.tradeDetail" />
+    <component :is="componentId"
+               v-if="componentId"
+               :selectedRow="deliverGoods"
+               :parantSelectedRow="deliverGoods"
+               @cancel="closeComponent"></component>
+  </div>
 </template>
 
 <script lang="ts">

src/views/market/spot_trade/spot_trade_order_transaction/components/chart/index.vue

@@ -1,97 +1,50 @@
 <template>
-    <!-- 交易图表  -->
-    <div class="chart-container">
-        <div class="chart-content"></div>
-        <div class="chart-tips">
-            <a-tabs class="chartTabs" v-model:activeKey="activeKey">
-                <a-tab-pane key="1" tab="卖挂">
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                </a-tab-pane>
-                <a-tab-pane key="2" tab="买挂">Tab 2</a-tab-pane>
-                <a-tab-pane key="3" tab="成交">Tab 3</a-tab-pane>
-            </a-tabs>
-            <div @click="watchMore" class="watchMore">查看更多</div>
-        </div>
+  <!-- 交易图表  -->
+  <div class="chart-container">
+    <div class="chart-content"></div>
+    <div class="chart-tips">
+      <a-tabs class="chartTabs"
+              v-model:activeKey="activeKey"
+              @change="change">
+        <a-tab-pane key="1"
+                    ref="tabRef1"
+                    tab="卖挂">
+          <div class="chartRow"
+               v-for="(item, index) in sellList"
+               :key="index + '11'">
+            <div class="left">{{item.username}}</div>
+            <div class="middle">{{item.orderqty}}</div>
+            <div class="right">{{item.orderprice}}</div>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="2"
+                    class="chartTabs"
+                    tab="买挂">
+          <div class="chartRow"
+               v-for="(item, index) in buyList"
+               :key="index + '11'">
+            <div class="left">{{item.username}}</div>
+            <div class="middle">{{item.orderqty}}</div>
+            <div class="right">{{item.orderprice}}</div>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="3"
+                    class="chartTabs"
+                    tab="成交">
+          成交
+          <div class="chartRow"
+               v-for="(item, index) in tradedList"
+               :key="index + '11'">
+            <div class="left">{{formatTime(item.TS, 'hm')}}</div>
+            <div class="middle">{{item.PE}}</div>
+            <div class="right">{{item.Vol}}</div>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+      <div @click="watchMore"
+           class="watchMore">查看更多</div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -103,12 +56,10 @@ import { QueryHistoryTikDatasRsp, QueryQuoteDayRsp } from '@/services/go/quote/i
 import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
 import { QueryHistoryTikDatas } from '@/services/go/quote';
 import { ComponentType } from '../../setup';
-
-const columnsList = [
-    { title: '时间', key: 'TS', dataIndex: 'TS', align: 'center' },
-    { title: '成交价', key: 'Vol', dataIndex: 'Vol', align: 'center' },
-    { title: '成交量', key: 'PE', dataIndex: 'PE', align: 'center' },
-];
+import { WrTradeOrderDetailReq } from '@/services/go/wrtrade/interface';
+import { useQueryData } from '@/common/setup/request';
+import { queryWrTradeOrderDetail } from '@/services/go/wrtrade';
+import { formatTime } from '@/common/methods';
 
 export default defineComponent({
     emits: ['cancel', 'update'],
@@ -128,48 +79,43 @@ export default defineComponent({
             const type: ComponentType = activeKey.value === '3' ? ComponentType.tradeDetail : ComponentType.marketContent;
             context.emit('update', type);
         }
-        const param = {
-            goodsCode: props.deliverGoods.goodscode,
+        const { goodsid, goodscode } = props.deliverGoods;
+        // 买挂
+        const param: WrTradeOrderDetailReq = {
+            buyorsell: 0,
+            goodsid,
+        };
+        const { list: buyList, update: buyUpdate } = useQueryData(queryWrTradeOrderDetail, param);
+
+        // 卖挂
+        const sellParam: WrTradeOrderDetailReq = {
+            buyorsell: 1,
+            goodsid,
         };
-        const tableList = ref<QueryHistoryTikDatasRsp[][]>([]);
-        QueryHistoryTikDatas(param).then((res) => {
-            tableList.value = getHisList(res);
-        });
-        function getHisList(list: QueryHistoryTikDatasRsp[]) {
-            const len = list.length;
-            const result: QueryHistoryTikDatasRsp[][] = [[], [], []];
-            if (len) {
-                if (len === 1) {
-                    result[0] = list;
-                } else if (len === 2) {
-                    result[0].push(list[0]);
-                    result[1].push(list[1]);
-                } else {
-                    const temp = Math.floor(len / 3);
-                    result[0] = list.slice(0, temp);
-                    result[1] = list.slice(temp, 2 * temp);
-                    result[2] = list.slice(temp * 2, temp * 3);
-                    const last = len - temp;
-                    if (last) {
-                        if (last === 1) {
-                            result[0].push(list[len - 1]);
-                        } else {
-                            result[0].push(list[len - 2]);
-                            result[1].push(list[len - 1]);
-                        }
-                    }
-                }
+        const { list: sellList, update: sellUpdate } = useQueryData(queryWrTradeOrderDetail, sellParam);
+
+        // 成交
+        const { list: tradedList, update: tradedUpdate } = useQueryData(QueryHistoryTikDatas, { goodsCode: goodscode });
+        function change(activeKey: string) {
+            if (activeKey === '1') {
+                sellUpdate();
+            } else if (activeKey === '2') {
+                buyUpdate();
+            } else {
+                tradedUpdate();
             }
-            return result;
         }
         return {
             cancel,
             visible,
-            tableList,
-            columnsList,
+            buyList,
+            sellList,
+            tradedList,
+            change,
             loading,
             activeKey,
             watchMore,
+            formatTime,
         };
     },
 });

src/views/market/spot_trade/spot_trade_order_transaction/components/stock-exchange/index.vue

@@ -42,6 +42,7 @@ import { PropType, ref } from 'vue';
 import { QueryHistoryTikDatasRsp, QueryQuoteDayRsp } from '@/services/go/quote/interface';
 import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
 import { QueryHistoryTikDatas } from '@/services/go/quote';
+import { formatTime } from '@/common/methods';
 
 const columnsList = [
     { title: '时间', key: 'TS', dataIndex: 'TS', align: 'center' },
@@ -67,6 +68,7 @@ export default defineComponent({
         };
         const tableList = ref<QueryHistoryTikDatasRsp[][]>([]);
         QueryHistoryTikDatas(param).then((res) => {
+            res.forEach((el) => (el.TS = formatTime(el.TS)));
             tableList.value = getHisList(res);
         });
         function getHisList(list: QueryHistoryTikDatasRsp[]) {