优化平仓推送逻辑

src/common/setup/modal/modal.ts

@@ -61,9 +61,9 @@ export function _closeModal(context: SetupContext<emitFn[]>) {
      * 关闭弹窗
      * @param isRefresh 是否需要刷新页面: true => 刷新；false => 不刷新
      */
-    function cancel(isRefresh = false) {
+    function cancel(isRefresh = false, ...params: unknown[]) {
         visible.value = false;
-        context.emit('cancel', isRefresh)
+        context.emit('cancel', isRefresh, ...params)
     }
     return { visible, cancel }
 }

src/views/order/swap_the_order/components/swap_commodity_contract_summary/components/swap_commodity_contract_summary_order_closed/index.vue

@@ -30,7 +30,8 @@
                   <div>{{ selectedRow.holderprice }}</div>
                   <div>{{ selectedRow.holderamount }}</div>
                 </div>
-                <div :class="['right', +useProfit(selectedRow, goodscode) > 0 ? 'up-quote-color' : 'down-quote-color']">{{ useProfit(selectedRow, goodscode) }}</div>
+                <div :class="['right', +useProfit(selectedRow, goodscode) > 0 ? 'up-quote-color' : 'down-quote-color']">
+                  {{ useProfit(selectedRow, goodscode) }}</div>
               </div>
             </div>
           </div>
@@ -128,7 +129,7 @@ export default defineComponent({
           OperatorID: geLoginID_number()!, // uint64 操作员账号ID
         };
         requestResultLoadingAndInfo(holderClose, param, loading, ['平仓成功', '平仓失败:']).then(() => {
-          cancel();
+          cancel(false, true);
         });
       });
     }
@@ -155,185 +156,212 @@ export default defineComponent({
 
 <style lang="less" scoped>
 .c_c_s_s {
-    background: @m-black40;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    .formBar {
-        padding: 0;
-        height: calc(100% - 170px);
-        background: @m-black41;
-        .formtop {
-            width: 100%;
-            padding: 0 20px;
-            .flex;
-            flex-direction: column;
-            .firstTitle {
-                width: calc(100% + 40px);
-                height: 40px;
-                line-height: 40px;
-                margin-left: -20px;
-                padding: 0 20px;
-                font-size: 14px;
-                color: @m-white6;
-                border-bottom: 1px solid @m-black42;
-            }
-            .secondLine {
-                width: 100%;
-                height: 40px;
-                line-height: 40px;
-                display: inline-flex;
-                > div {
-                    flex: 1;
-                    font-size: 14px;
-                    color: @m-grey1;
-                }
-                .left {
-                    text-align: left;
-                }
-                .middle {
-                    text-align: center;
-                }
-                .right {
-                    text-align: right;
-                }
-            }
-            .lineBar {
-                width: 100%;
-                min-height: 100px;
-                padding-left: 15px;
-                padding-right: 10px;
-                background: @m-blue19;
-                margin-bottom: 10px;
-                .rounded-corners(5px);
-                .line1 {
-                    display: inline-flex;
-                    user-select: none;
-                    width: 100%;
-                    height: 40px;
-                    line-height: 40px;
-                    font-size: 12px;
-                    color: @m-white6;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                    border-bottom: 1px solid @m-blue20;
-                    > div {
-                        align-self: center;
-                        align-items: center;
-                    }
-                    .name {
-                        margin-left: 10px;
-                    }
-                    .date {
-                        flex: 1;
-                        text-align: right;
-                        font-size: 14px;
-                        color: @m-grey1;
-                    }
-                }
-                .line2 {
-                    width: 100%;
-                    user-select: none;
-                    padding: 12px 0 14px 0;
-                    display: inline-flex;
-                    .left {
-                        width: 25%;
-                        color: @m-white6;
-                        font-size: 14px;
-                        white-space: nowrap;
-                        text-overflow: ellipsis;
-                        overflow: hidden;
-                        line-height: 34px;
-                        // }
-                    }
-                    .middle {
-                        width: 50%;
-                        display: inline-flex;
-                        justify-content: space-between;
-                        padding: 0 10px;
-                        font-size: 16px;
-                        color: @m-white6;
-                        line-height: 34px;
-                        > div {
-                            white-space: nowrap;
-                        }
-                    }
-                    .right {
-                        width: 25%;
-                        font-size: 16px;
-                        text-align: right;
-                        line-height: 34px;
-                        white-space: nowrap;
-                    }
-                }
-            }
+  background: @m-black40;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .formBar {
+    padding: 0;
+    height: calc(100% - 170px);
+    background: @m-black41;
+
+    .formtop {
+      width: 100%;
+      padding: 0 20px;
+      .flex;
+      flex-direction: column;
+
+      .firstTitle {
+        width: calc(100% + 40px);
+        height: 40px;
+        line-height: 40px;
+        margin-left: -20px;
+        padding: 0 20px;
+        font-size: 14px;
+        color: @m-white6;
+        border-bottom: 1px solid @m-black42;
+      }
+
+      .secondLine {
+        width: 100%;
+        height: 40px;
+        line-height: 40px;
+        display: inline-flex;
+
+        >div {
+          flex: 1;
+          font-size: 14px;
+          color: @m-grey1;
         }
-    }
-    .fixedBtns {
-        padding-top: 0;
-        left: 0;
-        right: 0;
-        padding-left: 20px;
-        padding-right: 20px;
-    }
-    .formbottom {
+
+        .left {
+          text-align: left;
+        }
+
+        .middle {
+          text-align: center;
+        }
+
+        .right {
+          text-align: right;
+        }
+      }
+
+      .lineBar {
         width: 100%;
-        .flex;
-        flex-direction: column;
-        background: @m-black40;
-        padding: 0 18px 0 20px;
+        min-height: 100px;
+        padding-left: 15px;
+        padding-right: 10px;
+        background: @m-blue19;
+        margin-bottom: 10px;
+        .rounded-corners(5px);
+
         .line1 {
-            width: 100%;
-            padding: 0 12px 0 16px;
-            height: 36px;
-            line-height: 36px;
-            display: inline-flex;
-            justify-content: space-between;
-            color: @m-grey1;
+          display: inline-flex;
+          user-select: none;
+          width: 100%;
+          height: 40px;
+          line-height: 40px;
+          font-size: 12px;
+          color: @m-white6;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          border-bottom: 1px solid @m-blue20;
+
+          >div {
+            align-self: center;
+            align-items: center;
+          }
+
+          .name {
+            margin-left: 10px;
+          }
+
+          .date {
+            flex: 1;
+            text-align: right;
             font-size: 14px;
+            color: @m-grey1;
+          }
         }
+
         .line2 {
-            width: 100%;
-            height: 35px;
-            line-height: 34px;
-            padding-left: 15px;
-            padding-right: 10px;
-            background: @m-black43;
-            .rounded-corners(5px);
+          width: 100%;
+          user-select: none;
+          padding: 12px 0 14px 0;
+          display: inline-flex;
+
+          .left {
+            width: 25%;
+            color: @m-white6;
             font-size: 14px;
-            color: @m-grey1;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            line-height: 34px;
+            // }
+          }
+
+          .middle {
+            width: 50%;
             display: inline-flex;
             justify-content: space-between;
-            > div {
-                align-self: baseline;
-                align-items: baseline;
-            }
-            .right {
-                display: inline-flex;
-                color: @m-yellow6;
-                div:last-child {
-                    font-size: 16px;
-                    margin-left: 2px;
-                }
+            padding: 0 10px;
+            font-size: 16px;
+            color: @m-white6;
+            line-height: 34px;
+
+            >div {
+              white-space: nowrap;
             }
-        }
-        .line3 {
-            margin-top: 16px;
-            width: 100%;
-            height: 15px;
-            line-height: 15px;
-            font-size: 14px;
+          }
+
+          .right {
+            width: 25%;
+            font-size: 16px;
             text-align: right;
-            color: @m-white6;
+            line-height: 34px;
+            white-space: nowrap;
+          }
         }
+      }
     }
-    .inputIconBox {
-        .ant-form-item-children {
-            .anticon-plus {
-                right: 156px;
-            }
+  }
+
+  .fixedBtns {
+    padding-top: 0;
+    left: 0;
+    right: 0;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .formbottom {
+    width: 100%;
+    .flex;
+    flex-direction: column;
+    background: @m-black40;
+    padding: 0 18px 0 20px;
+
+    .line1 {
+      width: 100%;
+      padding: 0 12px 0 16px;
+      height: 36px;
+      line-height: 36px;
+      display: inline-flex;
+      justify-content: space-between;
+      color: @m-grey1;
+      font-size: 14px;
+    }
+
+    .line2 {
+      width: 100%;
+      height: 35px;
+      line-height: 34px;
+      padding-left: 15px;
+      padding-right: 10px;
+      background: @m-black43;
+      .rounded-corners(5px);
+      font-size: 14px;
+      color: @m-grey1;
+      display: inline-flex;
+      justify-content: space-between;
+
+      >div {
+        align-self: baseline;
+        align-items: baseline;
+      }
+
+      .right {
+        display: inline-flex;
+        color: @m-yellow6;
+
+        div:last-child {
+          font-size: 16px;
+          margin-left: 2px;
         }
+      }
+    }
+
+    .line3 {
+      margin-top: 16px;
+      width: 100%;
+      height: 15px;
+      line-height: 15px;
+      font-size: 14px;
+      text-align: right;
+      color: @m-white6;
+    }
+  }
+
+  .inputIconBox {
+    .ant-form-item-children {
+      .anticon-plus {
+        right: 156px;
+      }
     }
+  }
 }
 </style>;

src/views/order/swap_the_order/components/swap_commodity_contract_summary/index.vue

@@ -2,16 +2,24 @@
   <!-- 商品订单 - 合约汇总 -->
   <mtp-table-scroll>
     <template #default="{ scroll }">
-      <a-table :columns="getTableColums()" class="srcollYTableExpendBgColor srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :expandIcon="expandIcon" :expandIconAsCell="false" rowKey="key" :data-source="positionList">
+      <a-table :columns="getTableColums()" class="srcollYTableExpendBgColor srcollYTable" :scroll="scroll"
+        :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick"
+        :expandIcon="expandIcon" :expandIconAsCell="false" rowKey="key" :data-source="positionList">
         <!-- 额外的展开行 -->
         <template #expandedRowRender="{ record }">
-          <a-table :columns="getDetailColums()" class="expandBottomTable" :pagination="false" :loading="detailLoading" :expandedRowKeys="expandedRowKeys" :expandIcon="expandIcon" :expandIconAsCell="false" rowKey="key" :data-source="getTradeHolderDetail(record)">
+          <a-table :columns="getDetailColums()" class="expandBottomTable" :pagination="false" :loading="detailLoading"
+            :expandedRowKeys="expandedRowKeys" :expandIcon="expandIcon" :expandIconAsCell="false" rowKey="key"
+            :data-source="getTradeHolderDetail(record)">
             <template #operate="sub">
-              <BtnList :btnList="handleBtnList(record, btnList)" :record="sub.record" class="btn-list-sticky" @click="openComponent" />
+              <BtnList :btnList="handleBtnList(record, btnList)" :record="sub.record" class="btn-list-sticky"
+                @click="openComponent" />
             </template>
             <!-- 持仓盈亏 -->
             <template #profitloss="{ record }">
-              <span :class="[+getDetailProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) > 0 ? 'up-quote-color' : +getDetailProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) < 0 ? 'down-quote-color' : '']">{{ getDetailProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) }}</span>
+              <span
+                :class="[+getDetailProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) > 0 ? 'up-quote-color' : +getDetailProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) < 0 ? 'down-quote-color' : '']">{{
+                    getDetailProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList))
+                }}</span>
             </template>
             <!-- 市值 -->
             <template #marketamount="{ record }">
@@ -35,7 +43,11 @@
         </template> -->
         <!-- 持仓盈亏 -->
         <template #profitloss="{ record }">
-          <span :class="[+useProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) > 0 ? 'up-quote-color' : +useProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) < 0 ? 'down-quote-color' : '']">{{ record.averageprice ? useProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) : '--' }}</span>
+          <span
+            :class="[+useProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) > 0 ? 'up-quote-color' : +useProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) < 0 ? 'down-quote-color' : '']">{{
+                record.averageprice ? useProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) :
+                  '--'
+            }}</span>
         </template>
         <template #buyorsell="{ record }">
           <span>{{ getBuyOrSellName(record.buyorsell) }}</span>
@@ -46,7 +58,8 @@
       </a-table>
     </template>
   </mtp-table-scroll>
-  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :tableList="positionList" :swapList="swapList" @cancel="clsoeAction"></component>
+  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :tableList="positionList"
+    :swapList="swapList" @cancel="clsoeAction"></component>
 </template>
 
 <script lang="ts">
@@ -71,7 +84,7 @@ import Bus from '@/utils/eventBus/index';
 import { isInvestment } from '@/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/setup';
 import { useHazardRates } from '@/views/order/funding_information/components/funding_information_funding_summary/setup'
 import { findGoodsCode, getTableColums, useDetail } from './setup';
-
+import { message } from 'ant-design-vue'
 
 export default defineComponent({
   name: enumOrderComponents.commodity_contract_summary,
@@ -83,6 +96,7 @@ export default defineComponent({
     detail: defineAsyncComponent(() => import('./components/detail/index.vue')), // 详情
   },
   setup() {
+    let timer = 0; // 推送超时定时器
     const { positionList, swapList, getHoldsList, getSwapList, getTradeHolderDetail, useProfitloss } = useHazardRates();
     // 表格列表数据
     const { loading } = queryTableList<QueryTradePositionRsp>();
@@ -91,7 +105,10 @@ export default defineComponent({
     getSwapList();
 
     // 获取列表数据
-    const queryTableAction = () => getHoldsList(loading, TradeMode.DiaoQi.toString());
+    const queryTableAction = () => {
+      window.clearTimeout(timer);
+      getHoldsList(loading, TradeMode.DiaoQi.toString());
+    }
 
     // 明细 逻辑
     const { detailLoading, getDetailColums, getDetailProfitloss, getDetailMarketAmount } = useDetail();
@@ -127,7 +144,14 @@ export default defineComponent({
       btnList, // 表格按钮
     } = handleComposeOrderTable<QueryTradePositionRsp>(param)
 
-    function clsoeAction(value: boolean) {
+    function clsoeAction(value: boolean, showLoading: boolean) {
+      if (showLoading) {
+        loading.value = true;
+        // 5秒内没收到推送手动刷新数据
+        timer = window.setTimeout(() => {
+          queryTableAction();
+        }, 5000)
+      }
       closeComponent(value)
     }