修改 商品掉期 颜色

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

@@ -54,7 +54,7 @@
                                 <a-col :span="4" :offset="2">开盘价</a-col>
                                 <a-col :span="6">
                                     <span
-                                        :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')"
+                                        :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'opened')"
                                     >{{ getQuoteValue_out(selectedRow.refgoodscode, 'opened') }}</span>
                                 </a-col>
                             </a-row>
@@ -498,6 +498,7 @@ export default defineComponent({
                 &--left {
                     font-size: 16px;
                     color: var(--row-content-color, #acb8c0);
+                    margin-right: 6px;
                 }
 
                 &--right {

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

@@ -3,96 +3,104 @@
   <div class="topTableHeight">
     <div class="filterTable">
       <div class="filter-custom-table">
-        <a-select class="conditionSelect"
-                  :style="{width: '180px', maxHeight: '400px', overflow: 'auto' }"
-                  @change="goodsChange"
-                  placeholder="全部标的合约">
-          <a-select-option v-for="item in getRefGoodsList()"
-                           :value="item"
-                           :key="item">{{item}}</a-select-option>
+        <a-select
+          class="conditionSelect"
+          :style="{ width: '180px', maxHeight: '400px', overflow: 'auto' }"
+          @change="goodsChange"
+          placeholder="全部标的合约"
+        >
+          <a-select-option v-for="item in getRefGoodsList()" :value="item" :key="item">{{ item }}</a-select-option>
         </a-select>
         <!-- <a-button class="btnDeafault"
                 @click="search(true)"
-                style="width: 80px">筛选</a-button>-->
+        style="width: 80px">筛选</a-button>-->
       </div>
     </div>
-    <a-table :columns="columns"
-             :class="['srcollYTable', isBottom ? 'secondTabTable' : 'secondTabTableNoBottom', goodsList.length ? 'noPlaceHolder' : 'hasPlaceHolder']"
-             :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 407px)' : 'calc(100vh - 167px)' }"
-             :pagination="false"
-             :loading="loading"
-             :expandedRowKeys="expandedRowKeys"
-             :customRow="Rowclick"
-             rowKey="refgoodscode"
-             ref="tableRef"
-             :data-source="goodsList">
+    <a-table
+      :columns="columns"
+      :class="['srcollYTable', isBottom ? 'secondTabTable' : 'secondTabTableNoBottom', goodsList.length ? 'noPlaceHolder' : 'hasPlaceHolder']"
+      :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 407px)' : 'calc(100vh - 167px)' }"
+      :pagination="false"
+      :loading="loading"
+      :expandedRowKeys="expandedRowKeys"
+      :customRow="Rowclick"
+      rowKey="refgoodscode"
+      ref="tableRef"
+      :data-source="goodsList"
+    >
       <!-- <template #totalturnover="{ text }">
         <span>{{changeUnit(text)}}</span>
-      </template> -->
+      </template>-->
       <!-- 涨跌 -->
       <template #change="{ record }">
-        <span>{{quoteChange_out(record.refgoodscode)}}</span>
+        <span
+          :class="handleQuotePriceColor_out(record.refgoodscode, 'last')"
+        >{{ quoteChange_out(record.refgoodscode) }}</span>
       </template>
       <!-- 幅度 -->
       <template #amplitude="{ record }">
-        <span>{{quoteAmplitude_out(record.refgoodscode)}}</span>
+        <span
+          :class="handleQuotePriceColor_out(record.refgoodscode, 'last')"
+        >{{ quoteAmplitude_out(record.refgoodscode) }}</span>
       </template>
       <!-- 振幅 -->
       <template #vibration="{ record }">
-        <span>{{quoteAmplituOfVibration(record, record.decimalplace)}}</span>
+        <span>{{ quoteAmplituOfVibration(record, record.decimalplace) }}</span>
       </template>
       <template #index="{ index }">
-        <span>{{index + 1}}</span>
+        <span>{{ index + 1 }}</span>
       </template>
       <!-- 买价 -->
       <!-- <template #bid="{ record }">
         <span :class="handleQuotePriceColor_out(record.refgoodscode, 'bid')">
           {{getQuoteValue_out(record.refgoodscode, 'bid')}}</span>
-      </template> -->
+      </template>-->
       <!-- 卖价 -->
       <!-- <template #ask="{  record }">
         <span :class="handleQuotePriceColor_out(record.refgoodscode, 'ask')">
           {{getQuoteValue_out(record.refgoodscode, 'ask')}}</span>
-      </template> -->
+      </template>-->
       <!-- 最新价 -->
       <template #last="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">
-          {{getQuoteValue_out(record.refgoodscode, 'last')}}</span>
+        <span
+          :class="handleQuotePriceColor_out(record.refgoodscode, 'last')"
+        >{{ getQuoteValue_out(record.refgoodscode, 'last') }}</span>
       </template>
       <!-- 开盘 -->
       <template #opened="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">
-          {{getQuoteValue_out(record.refgoodscode, 'opened')}}</span>
+        <span
+          :class="handleQuotePriceColor_out(record.refgoodscode, 'opened')"
+        >{{ getQuoteValue_out(record.refgoodscode, 'opened') }}</span>
       </template>
       <!-- 结算 -->
       <template #settle="{ record }">
-        <span>
-          {{getQuoteValue_out(record.refgoodscode, 'settle')}}</span>
+        <span>{{ getQuoteValue_out(record.refgoodscode, 'settle') }}</span>
       </template>
       <!-- 昨结算 -->
       <template #presettle="{ record }">
-        <span>
-          {{getQuoteValue_out(record.refgoodscode, 'presettle')}}</span>
+        <span>{{ getQuoteValue_out(record.refgoodscode, 'presettle') }}</span>
       </template>
       <!-- 最低价 -->
-      <template #lowest="{record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'lowest')">
-          {{getQuoteValue_out(record.refgoodscode, 'lowest')}}</span>
+      <template #lowest="{ record }">
+        <span
+          :class="handleQuotePriceColor_out(record.refgoodscode, 'lowest')"
+        >{{ getQuoteValue_out(record.refgoodscode, 'lowest') }}</span>
       </template>
       <!-- 最高价 -->
       <template #highest="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'highest')">
-          {{getQuoteValue_out(record.refgoodscode, 'highest')}}</span>
+        <span
+          :class="handleQuotePriceColor_out(record.refgoodscode, 'highest')"
+        >{{ getQuoteValue_out(record.refgoodscode, 'highest') }}</span>
       </template>
     </a-table>
     <!-- 右键 -->
-    <contextMenu :contextMenu="contextMenu"
-                 @cancel="closeContext"
-                 :list="btnList"></contextMenu>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               @cancel="closeComponent"></component>
+    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="btnList"></contextMenu>
+    <component
+      :is="componentId"
+      v-if="componentId"
+      :selectedRow="selectedRow"
+      @cancel="closeComponent"
+    ></component>
   </div>
 </template>
 
@@ -109,108 +117,109 @@ import { getAllQuoteDayInfo, getQuoteDayInfoByCode } from '@/services/bus/goods'
 import { QueryQuoteGoodsListRsp } from '@/services/go/Tjmd/interface';
 
 export default defineComponent({
-    name: 'spot_trade_order_transaction_swap',
-    components: {
-        contextMenu,
-        BuyAndSell: defineAsyncComponent(() => import('./components/buy-sell-market/index.vue')),
-        PostBuying: defineAsyncComponent(() => import('./components/post_buying/index.vue')),
-        Detail: defineAsyncComponent(() => import('./components/detail/index.vue')),
-    },
-    setup() {
-        const isBottom = getShowBottomValue();
-        const { loading, goodsList, getRefGoodsList, filterGoodsList } = useSwapList();
+  name: 'spot_trade_order_transaction_swap',
+  components: {
+    contextMenu,
+    BuyAndSell: defineAsyncComponent(() => import('./components/buy-sell-market/index.vue')),
+    PostBuying: defineAsyncComponent(() => import('./components/post_buying/index.vue')),
+    Detail: defineAsyncComponent(() => import('./components/detail/index.vue')),
+  },
+  setup() {
+    const isBottom = getShowBottomValue();
+    const { loading, goodsList, getRefGoodsList, filterGoodsList } = useSwapList();
 
-        const param: TableParam = {
-            columnsList,
-            queryFn: () => {},
-            clickName: 'BuyAndSell',
-        };
+    const param: TableParam = {
+      columnsList,
+      queryFn: () => { },
+      clickName: 'BuyAndSell',
+    };
 
-        // 行情按需订阅
-        let stopSubcribe = handleSubcriteOnDemandQuote<QueryQuoteGoodsListRsp>(goodsList, 'refgoodscode');
-        // 过滤标的合约
-        function goodsChange(value: string) {
-            filterGoodsList(value);
-            // 停止上次订阅
-            stopSubcribe();
-            // 重新发起订阅
-            stopSubcribe = handleSubcriteOnDemandQuote<QueryQuoteGoodsListRsp>(goodsList, 'refgoodscode');
-        }
-        return {
-            isBottom,
-            ...handleTableEventAndData<QueryQuoteDayRsp>(param),
-            btnList: getBtnList(true),
-            handleQuotePriceColor_out,
-            quoteChange_out,
-            quoteAmplitude_out,
-            quoteAmplituOfVibration,
-            getRefGoodsList,
-            goodsList,
-            loading,
-            goodsChange,
-            getQuoteValue_out,
-        };
-    },
+    // 行情按需订阅
+    let stopSubcribe = handleSubcriteOnDemandQuote<QueryQuoteGoodsListRsp>(goodsList, 'refgoodscode');
+    // 过滤标的合约
+    function goodsChange(value: string) {
+      filterGoodsList(value);
+      // 停止上次订阅
+      stopSubcribe();
+      // 重新发起订阅
+      stopSubcribe = handleSubcriteOnDemandQuote<QueryQuoteGoodsListRsp>(goodsList, 'refgoodscode');
+    }
+    return {
+      isBottom,
+      ...handleTableEventAndData<QueryQuoteDayRsp>(param),
+      btnList: getBtnList(true),
+      handleQuotePriceColor_out,
+      quoteChange_out,
+      quoteAmplitude_out,
+      quoteAmplituOfVibration,
+      getRefGoodsList,
+      goodsList,
+      loading,
+      goodsChange,
+      getQuoteValue_out,
+    };
+  },
 });
 </script>
 <style lang="less">
 .noData {
-    .position(absolute, 28px, 0, 0, 0);
+  .position(absolute, 28px, 0, 0, 0);
 }
 .filter-custom-table {
-    display: inline-flex;
-    padding-top: 4px;
-    height: 34px;
-    .conditionSelect:first-child {
-        margin-right: 10px;
-    }
-    .btnDeafault.ant-btn,
-    .operBtn.ant-btn {
-        height: 26px !important;
-        line-height: 26px !important;
-    }
+  display: inline-flex;
+  padding-top: 4px;
+  height: 34px;
+  .conditionSelect:first-child {
+    margin-right: 10px;
+  }
+  .btnDeafault.ant-btn,
+  .operBtn.ant-btn {
+    height: 26px !important;
+    line-height: 26px !important;
+  }
 
-    .ant-select-single:not(.ant-select-customize-input) + .ant-select-single:not(.ant-select-customize-input),
-    .ant-select + .ant-space.ant-space-vertical {
-        margin-left: 10px;
-    }
-    .ant-select-single:not(.ant-select-customize-input) {
+  .ant-select-single:not(.ant-select-customize-input)
+    + .ant-select-single:not(.ant-select-customize-input),
+  .ant-select + .ant-space.ant-space-vertical {
+    margin-left: 10px;
+  }
+  .ant-select-single:not(.ant-select-customize-input) {
+    height: 26px;
+    line-height: 26px !important;
+    .ant-select-selector {
+      height: 26px;
+      border-color: @m-grey46 !important;
+      background: @m-grey47;
+      .rounded-corners(3px);
+      .ant-select-selection-item {
+        line-height: 26px;
+      }
+      .ant-select-selection-search {
         height: 26px;
-        line-height: 26px !important;
-        .ant-select-selector {
-            height: 26px;
-            border-color: @m-grey46 !important;
-            background: @m-grey47;
-            .rounded-corners(3px);
-            .ant-select-selection-item {
-                line-height: 26px;
-            }
-            .ant-select-selection-search {
-                height: 26px;
-                .ant-select-selection-search-input {
-                    height: 26px;
-                    line-height: 27px !important;
-                }
-            }
-            .ant-select-selection-placeholder {
-                line-height: 26px;
-            }
+        .ant-select-selection-search-input {
+          height: 26px;
+          line-height: 27px !important;
         }
+      }
+      .ant-select-selection-placeholder {
+        line-height: 26px;
+      }
     }
+  }
 
-    .allDatePicker.ant-calendar-picker {
-        height: 26px !important;
-        border: 1px solid @m-grey46 !important;
-        .ant-calendar-picker-input.ant-input {
-            height: 26px;
-            line-height: 26px;
-            &::placeholder {
-                color: @m-grey10 !important;
-            }
-        }
-    }
-    .conditionSelect + .conditionSelect {
-        margin-left: 10px;
+  .allDatePicker.ant-calendar-picker {
+    height: 26px !important;
+    border: 1px solid @m-grey46 !important;
+    .ant-calendar-picker-input.ant-input {
+      height: 26px;
+      line-height: 26px;
+      &::placeholder {
+        color: @m-grey10 !important;
+      }
     }
+  }
+  .conditionSelect + .conditionSelect {
+    margin-left: 10px;
+  }
 }
 </style>