fix: #2766

public/config/app.config.json

@@ -1,3 +1,3 @@
 {
-    "apiUrl": "http://192.168.31.202:8080/cfg?key=test_202"
+    "apiUrl": "http://192.168.31.139:8080/cfg?key=test_139"
 }

src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/delisting/index.vue

@@ -1,6 +1,13 @@
 <template>
   <!-- 挂牌求购 -->
-  <Drawer :title="!isBuy() ? '摘牌买入' : '摘牌卖出'" :placement="'right'" :visible="visible" :width="1052" @cancel="cancel" class="post-buying-container">
+  <Drawer
+    :title="!isBuy() ? '摘牌买入' : '摘牌卖出'"
+    :placement="'right'"
+    :visible="visible"
+    :width="1052"
+    @cancel="cancel"
+    class="post-buying-container"
+  >
     <a-row>
       <a-col :span="12">
         <div class="post_buying_chart">
@@ -9,32 +16,47 @@
             <div class="content--right">{{ parantSelectedRow.goodsname }}</div>
           </div>
           <div class="chart-tips__last">
-            <div :class="['content--left', handleQuotePriceColor_out(parantSelectedRow.refgoodscode, 'last')]">{{ getQuoteValue_out(parantSelectedRow.refgoodscode, 'last') }}</div>
+            <div
+              :class="['content--left', handleQuotePriceColor_out(parantSelectedRow.refgoodscode, 'last')]"
+            >{{ getQuoteValue_out(parantSelectedRow.refgoodscode, 'last') }}</div>
             <div class="content--right">
-              <span :class="handleQuotePriceColor_out(parantSelectedRow.refgoodscode, 'last')">{{ quoteChange_out(parantSelectedRow.refgoodscode) }}</span>
-              <span :class="handleQuotePriceColor_out(parantSelectedRow.refgoodscode, 'last')">{{ quoteAmplitude_out(parantSelectedRow.refgoodscode) }}</span>
+              <span
+                :class="handleQuotePriceColor_out(parantSelectedRow.refgoodscode, 'last')"
+              >{{ quoteChange_out(parantSelectedRow.refgoodscode) }}</span>
+              <span
+                :class="handleQuotePriceColor_out(parantSelectedRow.refgoodscode, 'last')"
+              >{{ quoteAmplitude_out(parantSelectedRow.refgoodscode) }}</span>
             </div>
           </div>
           <a-row>
             <a-col :span="4" :offset="2">最高价</a-col>
             <a-col :span="6">
-              <span :class="handleQuotePriceColor_out(parantSelectedRow.refgoodscode, 'highest')">{{ getQuoteValue_out(parantSelectedRow.refgoodscode, 'highest') }}</span>
+              <span
+                :class="handleQuotePriceColor_out(parantSelectedRow.refgoodscode, 'highest')"
+              >{{ getQuoteValue_out(parantSelectedRow.refgoodscode, 'highest') }}</span>
             </a-col>
             <a-col :span="4" :offset="2">开盘价</a-col>
             <a-col :span="6">
-              <span :class="handleQuotePriceColor_out(parantSelectedRow.refgoodscode, 'opened')">{{ getQuoteValue_out(parantSelectedRow.refgoodscode, 'opened') }}</span>
+              <span
+                :class="handleQuotePriceColor_out(parantSelectedRow.refgoodscode, 'opened')"
+              >{{ getQuoteValue_out(parantSelectedRow.refgoodscode, 'opened') }}</span>
             </a-col>
           </a-row>
           <a-row>
             <a-col :span="4" :offset="2">最低价</a-col>
             <a-col :span="6">
-              <span :class="handleQuotePriceColor_out(parantSelectedRow.refgoodscode, 'lowest')">{{ getQuoteValue_out(parantSelectedRow.refgoodscode, 'lowest') }}</span>
+              <span
+                :class="handleQuotePriceColor_out(parantSelectedRow.refgoodscode, 'lowest')"
+              >{{ getQuoteValue_out(parantSelectedRow.refgoodscode, 'lowest') }}</span>
             </a-col>
             <a-col :span="4" :offset="2">昨结价</a-col>
             <a-col :span="6">{{ getQuoteValue_out(parantSelectedRow.refgoodscode, 'presettle') }}</a-col>
           </a-row>
           <div class="chart-content">
-            <Chart :selectedRow="getQuoteDayInfoByCode(parantSelectedRow.refgoodscode)" :showExchange="false" />
+            <Chart
+              :selectedRow="getQuoteDayInfoByCode(parantSelectedRow.refgoodscode)"
+              :showExchange="false"
+            />
           </div>
         </div>
       </a-col>
@@ -45,8 +67,17 @@
               <a-row :gutter="24">
                 <a-col :span="24">
                   <a-form-item label="交易账户" name="accountid">
-                    <a-select class="inlineFormSelect" style="width: 260px" v-model:value="formState.accountid" placeholder="请选择">
-                      <a-select-option v-for="item in accountList" :value="item.accountid" :key="item.accountid">{{ item.accountid }}</a-select-option>
+                    <a-select
+                      class="inlineFormSelect"
+                      style="width: 260px"
+                      v-model:value="formState.accountid"
+                      placeholder="请选择"
+                    >
+                      <a-select-option
+                        v-for="item in accountList"
+                        :value="item.accountid"
+                        :key="item.accountid"
+                      >{{ item.accountid }}</a-select-option>
                     </a-select>
                   </a-form-item>
                 </a-col>
@@ -75,7 +106,12 @@
                 </a-col>
                 <a-col :span="24" v-if="isFloat() && isLimit()">
                   <a-form-item label="摘牌价格" name="price" class="inputIconBox">
-                    <a-input-number class="commonInput" style="width: 260px" :min="0" v-model:value="formState.price" />
+                    <a-input-number
+                      class="commonInput"
+                      style="width: 260px"
+                      :min="0"
+                      v-model:value="formState.price"
+                    />
                     <MinusOutlined @click="decreasePrice" />
                     <PlusOutlined @click="increasePrice" />
                   </a-form-item>
@@ -92,7 +128,13 @@
                 </a-col>
                 <a-col :span="24" v-if="useUserType()">
                   <a-form-item label="摘牌数量" name="num" class="inputIconBox">
-                    <a-input-number class="commonInput" style="width: 260px" :min="0" :max="selectedRow.orderqty" v-model:value="formState.num" />
+                    <a-input-number
+                      class="commonInput"
+                      style="width: 260px"
+                      :min="0"
+                      :max="selectedRow.orderqty"
+                      v-model:value="formState.num"
+                    />
                     <MinusOutlined @click="decreaseNumber" />
                     <PlusOutlined @click="increaseNumber" />
                     <span class="input-enumdicname">{{ selectedRow.enumdicname }}</span>
@@ -100,7 +142,12 @@
                 </a-col>
                 <a-col :span="24" v-if="useUserType()" class="mt-10">
                   <a-form-item>
-                    <a-slider :min="0" v-model:value="formState.num" :max="selectedRow.orderqty" class="formSlider" />
+                    <a-slider
+                      :min="0"
+                      v-model:value="formState.num"
+                      :max="selectedRow.orderqty"
+                      class="formSlider"
+                    />
                     <div class="unit">
                       <span>0</span>
                       <span>{{ selectedRow.orderqty }}{{ selectedRow.enumdicname }}</span>
@@ -163,6 +210,7 @@ import { QueryQuoteGoodsListRsp, QueryTjmdTodayAccountMarginReq, QueryTjmdTradeO
 import { diaoQiOrder } from '@/services/socket/order';
 import { OrderReq } from '@/services/socket/order/interface';
 import Bus from '@/utils/eventBus/index';
+import Chart from '@/views/market/spot_trade/components/goods-chart/chart/index.vue';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
 import Long from 'long';
 import moment from 'moment';
@@ -172,7 +220,6 @@ import { RefGoodsList } from '../../interface';
 import { useUserType } from '../setup';
 import { FormParam } from './interface';
 import { handleForm, useBlocksNumber, useBlocksPrice } from './setup';
-import Chart from '@/views/market/spot_trade/components/goods-chart/chart/index.vue';
 
 export default defineComponent({
   emits: ['cancel', 'update'],
@@ -209,7 +256,7 @@ export default defineComponent({
       marketids: getMarketIdsByTradeMode(TradeMode.DiaoQi),
     };
     // 获取保证金比例
-    const { getReckonMarginValueByTradeMode } = useTodayMargin(marginParam);
+    const { getReckonMarginTypeAndValueByTradeMode } = useTodayMargin(marginParam);
     // 控制弹窗
     const { visible, cancel } = _closeModal(context);
     // 表单
@@ -271,10 +318,11 @@ export default defineComponent({
       let result = '--';
       const price = getMoney();
       if (price !== '--') {
-        const marginvalue = getReckonMarginValueByTradeMode(TradeMode.DiaoQi);
-        if (formState.num && marginvalue) {
+        const [marginType, marginValue] = getReckonMarginTypeAndValueByTradeMode(TradeMode.DiaoQi);
+        if (marginValue && formState.num) {
+          const temp = marginType === 1 ? +price * marginValue : formState.num * marginValue
           // 四舍五入
-          result = fn(+price + marginvalue * formState.num).toString();
+          result = fn(temp).toString();
         }
       }
       return result;
@@ -363,239 +411,245 @@ export default defineComponent({
     };
   },
 });
+
+
 </script>
 
 <style lang="less">
 .post-buying-container {
-    top: 101px;
-    .ant-drawer-content-wrapper {
-        height: 605px;
-    }
+  top: 101px;
+  .ant-drawer-content-wrapper {
+    height: 605px;
+  }
 }
 .chart-content {
-    height: 400px;
-    .chart-content__header,
-    .chart-content__main {
-        width: 90% !important;
-        margin: auto !important;
-    }
+  height: 400px;
+  .chart-content__header,
+  .chart-content__main {
+    width: 90% !important;
+    margin: auto !important;
+  }
 
-    .chart-slider {
-        display: none;
-    }
+  .chart-slider {
+    display: none;
+  }
 }
 .formBar {
-    height: 100%;
-    max-height: 100%;
+  height: 100%;
+  max-height: 100%;
 }
 .post_buying_chart {
-    [theme='light'] & {
-        --bgcolor: #fff;
-        --tab-border-color: #dae5ec;
-        --tab-checked-color: #0866b8;
-        --tab-checked-bgcolor: #d4e0ff;
-        --slider-border-color: #b2c4dd;
-        --slider-bgcolor: #edf2f7;
-        --slider-button-color: #b2c4dd;
-        --row-border-color: #dae5ec;
-        --row-title-color: #acb8c0;
-        --row-content-color: #3c454b;
-        --tik-title-bgcolor: #ecf2f5;
-        --tik-title-color: #7a8a94;
-    }
-    color: @m-grey67;
+  [theme="light"] & {
+    --bgcolor: #fff;
+    --tab-border-color: #dae5ec;
+    --tab-checked-color: #0866b8;
+    --tab-checked-bgcolor: #d4e0ff;
+    --slider-border-color: #b2c4dd;
+    --slider-bgcolor: #edf2f7;
+    --slider-button-color: #b2c4dd;
+    --row-border-color: #dae5ec;
+    --row-title-color: #acb8c0;
+    --row-content-color: #3c454b;
+    --tik-title-bgcolor: #ecf2f5;
+    --tik-title-color: #7a8a94;
+  }
+  color: @m-grey67;
 
-    // background-color: var(--bgcolor, #0e0e0f);
+  // background-color: var(--bgcolor, #0e0e0f);
 
-    // background: @m-blue37;
-    // color: @m-grey67;
-    .buying_chart {
-        display: flex;
+  // background: @m-blue37;
+  // color: @m-grey67;
+  .buying_chart {
+    display: flex;
 
-        // background-color: @m-blue36;
-        &__nav {
-            display: flex;
-            justify-content: center;
-            align-items: center;
+    // background-color: @m-blue36;
+    &__nav {
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
-            .content {
-                &:first-child:not(:last-child) {
-                    margin-right: 16px;
-                }
+      .content {
+        &:first-child:not(:last-child) {
+          margin-right: 16px;
+        }
 
-                &--left {
-                    font-size: 16px;
-                    color: var(--row-content-color, #acb8c0);
-                    margin-right: 6px;
-                }
+        &--left {
+          font-size: 16px;
+          color: var(--row-content-color, #acb8c0);
+          margin-right: 6px;
+        }
 
-                &--right {
-                    font-size: 24px;
-                    color: #fc9618;
-                }
-            }
+        &--right {
+          font-size: 24px;
+          color: #fc9618;
         }
+      }
     }
-    .chart-tips {
-        display: flex;
-        flex-direction: column;
-        width: 300px;
-        height: 100%;
+  }
+  .chart-tips {
+    display: flex;
+    flex-direction: column;
+    width: 300px;
+    height: 100%;
 
-        &__last {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 16px 0;
-            .content {
-                &--left {
-                    font-size: 24px;
-                    margin-right: 16px;
-                }
+    &__last {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 16px 0;
+      .content {
+        &--left {
+          font-size: 24px;
+          margin-right: 16px;
+        }
 
-                &--right {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: flex-start;
-                }
-            }
+        &--right {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
         }
+      }
     }
+  }
 }
 .post_buying {
-    width: 100%;
+  width: 100%;
+  height: 100%;
+  .flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  .ant-form {
     height: 100%;
-    .flex;
-    flex-direction: column;
-    position: relative;
-    overflow: hidden;
-    .ant-form {
-        height: 100%;
+  }
+  .condition {
+    width: 100%;
+    height: 48px;
+    margin: 0 16px;
+    padding: 10px 0;
+    border-bottom: 1px solid @m-black6;
+    .inlineflex;
+    .conditionBtn {
+      align-self: center;
+      align-items: center;
+      border: 0;
+      min-width: 80px;
+      height: 28px;
+      line-height: 28px;
+      background: @m-black7;
+      .rounded-corners(3px);
+      font-size: 14px;
+      color: @m-blue0;
+      &:hover {
+        background: @m-black7-hover;
+        color: @m-blue0-hover;
+      }
     }
-    .condition {
-        width: 100%;
-        height: 48px;
-        margin: 0 16px;
-        padding: 10px 0;
-        border-bottom: 1px solid @m-black6;
-        .inlineflex;
-        .conditionBtn {
-            align-self: center;
-            align-items: center;
-            border: 0;
-            min-width: 80px;
-            height: 28px;
-            line-height: 28px;
-            background: @m-black7;
-            .rounded-corners(3px);
-            font-size: 14px;
-            color: @m-blue0;
-            &:hover {
-                background: @m-black7-hover;
-                color: @m-blue0-hover;
-            }
-        }
-        .conditionBtn + .conditionBtn {
-            margin-left: 10px;
-        }
+    .conditionBtn + .conditionBtn {
+      margin-left: 10px;
     }
+  }
 }
 
 .unit {
-    margin-left: 70px;
-    width: 260px;
-    .flex;
-    justify-content: space-between;
-    font-size: 14px;
-    color: @m-grey41;
-    height: 14px;
-    line-height: 14px;
+  margin-left: 70px;
+  width: 260px;
+  .flex;
+  justify-content: space-between;
+  font-size: 14px;
+  color: @m-grey41;
+  height: 14px;
+  line-height: 14px;
 }
 .listedBtn {
-    width: 120px;
-    height: 30px;
-    line-height: 30px;
-    background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
-    border-radius: 3px;
-    color: @m-white0;
-    font-size: 14px;
-    text-align: center;
-    border: 0;
-    &:hover {
-        background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
-        color: @m-white0-hover;
-    }
+  width: 120px;
+  height: 30px;
+  line-height: 30px;
+  background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
+  border-radius: 3px;
+  color: @m-white0;
+  font-size: 14px;
+  text-align: center;
+  border: 0;
+  &:hover {
+    background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
+    color: @m-white0-hover;
+  }
 }
 .cancelBtn:extend(.listedBtn) {
-    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%) !important;
-    &:hover {
-        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%) !important;
-        color: @m-white0-hover;
-    }
+  background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%) !important;
+  &:hover {
+    background: linear-gradient(
+      0deg,
+      @m-grey12-hover 0%,
+      @m-grey13-hover 100%
+    ) !important;
+    color: @m-white0-hover;
+  }
 }
 .ml10 {
-    margin-left: 10px;
+  margin-left: 10px;
 }
 .ant-form.dialogForm .ant-row.ant-form-item {
-    margin-bottom: 14px;
+  margin-bottom: 14px;
 }
 .mt20 {
-    margin-top: 20px;
+  margin-top: 20px;
 }
 .mt-10 {
-    margin-top: -10px;
+  margin-top: -10px;
 }
 .ant-input-suffix {
-    position: absolute;
-    right: -25px;
+  position: absolute;
+  right: -25px;
 }
 .minusBtn,
 .plusBtn {
-    width: 15px;
-    height: 32px;
-    line-height: 32px;
-    font-size: 15px;
-    color: @m-blue15;
-    cursor: pointer;
+  width: 15px;
+  height: 32px;
+  line-height: 32px;
+  font-size: 15px;
+  color: @m-blue15;
+  cursor: pointer;
 }
 .minusBtn {
-    position: absolute;
-    top: -6px;
-    left: 14px;
-    z-index: 1;
+  position: absolute;
+  top: -6px;
+  left: 14px;
+  z-index: 1;
 }
 .plusBtn {
-    position: absolute;
-    top: -6px;
-    right: 14px;
-    z-index: 1;
+  position: absolute;
+  top: -6px;
+  right: 14px;
+  z-index: 1;
 }
 .stepper {
-    padding-left: 30px;
-    padding-right: 30px;
-    text-align: center;
-    color: @m-yellow1;
-    font-size: 16px;
+  padding-left: 30px;
+  padding-right: 30px;
+  text-align: center;
+  color: @m-yellow1;
+  font-size: 16px;
 }
 .ant-slider.formSlider {
-    width: 260px !important;
-    margin-left: 70px;
-    .ant-slider-rail {
-        margin-right: 0;
-        padding-right: 0;
-        height: 3px !important;
-        border-radius: 2px !important;
-        background-color: @m-blue14;
-    }
-    .ant-slider-track {
-        height: 3px;
-        background-color: @m-blue0;
-    }
-    .ant-slider-step {
-        height: 3px;
-    }
-    .ant-progress-text {
-        display: none;
-    }
+  width: 260px !important;
+  margin-left: 70px;
+  .ant-slider-rail {
+    margin-right: 0;
+    padding-right: 0;
+    height: 3px !important;
+    border-radius: 2px !important;
+    background-color: @m-blue14;
+  }
+  .ant-slider-track {
+    height: 3px;
+    background-color: @m-blue0;
+  }
+  .ant-slider-step {
+    height: 3px;
+  }
+  .ant-progress-text {
+    display: none;
+  }
 }
 </style>