修改行情颜色

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

@@ -1,64 +1,82 @@
 <template>
   <!--订单交易 基差点价-->
   <div class="topTableHeight">
-    <a-table :columns="columns"
-             :class="['srcollYTable', isBottom ? 'secondTabTable' : 'secondTabTableNoBottom', getQuoteList().length ? 'noPlaceHolder' : 'hasPlaceHolder']"
-             :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 407px)' : 'calc(100vh - 167px)' }"
-             :pagination="false"
-             :loading="loading"
-             :expandedRowKeys="expandedRowKeys"
-             :customRow="Rowclick"
-             rowKey="goodscode"
-             ref="tableRef"
-             :data-source="getQuoteList()">
+    <a-table
+      :columns="columns"
+      :class="['srcollYTable', isBottom ? 'secondTabTable' : 'secondTabTableNoBottom', getQuoteList().length ? 'noPlaceHolder' : 'hasPlaceHolder']"
+      :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 407px)' : 'calc(100vh - 167px)' }"
+      :pagination="false"
+      :loading="loading"
+      :expandedRowKeys="expandedRowKeys"
+      :customRow="Rowclick"
+      rowKey="goodscode"
+      ref="tableRef"
+      :data-source="getQuoteList()"
+    >
       <template #totalturnover="{ text }">
-        <span>{{changeUnit(text)}}</span>
+        <span>{{ changeUnit(text) }}</span>
+      </template>
+      <!-- 买量 -->
+      <template #bidvolume="{ text }">
+        <span>{{ handleNoneValue(text) }}</span>
+      </template>
+      <!-- 卖量 -->
+      <template #askvolume="{ text }">
+        <span>{{ handleNoneValue(text) }}</span>
+      </template>
+      <!-- 开盘价 -->
+      <template #opened="{ record, text }">
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
       </template>
       <!-- 涨跌 -->
-      <template #change="{ record }">
-        <span>{{quoteChange(record, record.decimalplace)}}</span>
+      <template #change="{ record, text }">
+        <span
+          :class="handleQuotePriceColor(text, record.presettle)"
+        >{{ quoteChange(record, record.decimalplace) }}</span>
       </template>
       <!-- 幅度 -->
-      <template #amplitude="{ record }">
-        <span>{{quoteAmplitude(record, record.decimalplace)}}</span>
+      <template #amplitude="{ record, text }">
+        <span
+          :class="handleQuotePriceColor(text, record.presettle)"
+        >{{ quoteAmplitude(record, record.decimalplace) }}</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="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
       </template>
       <!-- 卖价 -->
       <template #ask="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
       </template>
       <!-- 最新价 -->
       <template #last="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
       </template>
       <!-- 最低价 -->
       <template #lowest="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
       </template>
       <!-- 最高价 -->
       <template #highest="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
       </template>
     </a-table>
     <!-- 右键 -->
-    <contextMenu :contextMenu="contextMenu"
-                 @cancel="closeContext"
-                 :list="btnList"></contextMenu>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               :deliverGoods="findDeilverGoodsByGoodsCode(selectedRow.goodscode)"
-               @cancel="closeComponent"></component>
+    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="btnList"></contextMenu>
+    <component
+      :is="componentId"
+      v-if="componentId"
+      :selectedRow="selectedRow"
+      :deliverGoods="findDeilverGoodsByGoodsCode(selectedRow.goodscode)"
+      @cancel="closeComponent"
+    ></component>
   </div>
 </template>
 
@@ -68,7 +86,7 @@ import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/exp
 
 import { handleDeliveryRelation } from '../setup';
 
-import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteAmplitude, quoteAmplituOfVibration } from '@/common/setup/table/tableQuote';
+import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteAmplitude, quoteAmplituOfVibration, handleNoneValue } from '@/common/setup/table/tableQuote';
 import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
 import { columnsList } from '../setup';
 
@@ -78,46 +96,49 @@ import { BtnListType } from '@/common/components/btnList/interface';
 import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
 import { getShowBottomValue } from '@/common/config/constrolBottom';
 import { ref } from 'vue';
+import { changeUnit } from '@/utils/qt/common';
 
 export default defineComponent({
-    name: EnumRouterName.spot_trade_order_transaction_basis_difference,
-    components: {
-        contextMenu,
-        BuyAndSell: defineAsyncComponent(() => import('../components/buy-sell-market/index.vue')),
-        Listing: defineAsyncComponent(() => import('../components/listing/index.vue')),
-        Detail: defineAsyncComponent(() => import('../components/detail/index.vue')),
-    },
-    setup() {
-        const isBottom = getShowBottomValue();
-        const loading = ref<boolean>(false);
-        const param: TableParam = {
-            columnsList,
-            queryFn: () => {},
-            clickName: 'BuyAndSell',
-        };
-        const btnList: BtnListType[] = [
-            { lable: '挂牌求购', code: 'Listing', className: 'btnDeafault' },
-            { lable: '图表', code: 'BuyAndSell', className: 'btnDeafault' },
-            { lable: '详情', code: 'Detail', className: 'btnDeafault' },
-        ];
-        const { deliverGoods, getQuoteList, findDeilverGoodsByGoodsCode } = handleDeliveryRelation([2, 4]);
-        // 行情按需订阅
-        handleSubcriteOnDemandQuote<QueryDeliveryRelationRsp>(deliverGoods);
+  name: EnumRouterName.spot_trade_order_transaction_basis_difference,
+  components: {
+    contextMenu,
+    BuyAndSell: defineAsyncComponent(() => import('../components/buy-sell-market/index.vue')),
+    Listing: defineAsyncComponent(() => import('../components/listing/index.vue')),
+    Detail: defineAsyncComponent(() => import('../components/detail/index.vue')),
+  },
+  setup() {
+    const isBottom = getShowBottomValue();
+    const loading = ref<boolean>(false);
+    const param: TableParam = {
+      columnsList,
+      queryFn: () => { },
+      clickName: 'BuyAndSell',
+    };
+    const btnList: BtnListType[] = [
+      { lable: '挂牌求购', code: 'Listing', className: 'btnDeafault' },
+      { lable: '图表', code: 'BuyAndSell', className: 'btnDeafault' },
+      { lable: '详情', code: 'Detail', className: 'btnDeafault' },
+    ];
+    const { deliverGoods, getQuoteList, findDeilverGoodsByGoodsCode } = handleDeliveryRelation([2, 4]);
+    // 行情按需订阅
+    handleSubcriteOnDemandQuote<QueryDeliveryRelationRsp>(deliverGoods);
 
-        return {
-            isBottom,
-            ...handleTableEventAndData<QueryQuoteDayRsp>(param),
-            deliverGoods,
-            btnList,
-            handleQuotePriceColor,
-            quoteChange,
-            quoteAmplitude,
-            quoteAmplituOfVibration,
-            getQuoteList,
-            findDeilverGoodsByGoodsCode,
-            loading,
-        };
-    },
+    return {
+      isBottom,
+      ...handleTableEventAndData<QueryQuoteDayRsp>(param),
+      deliverGoods,
+      btnList,
+      handleQuotePriceColor,
+      quoteChange,
+      quoteAmplitude,
+      quoteAmplituOfVibration,
+      getQuoteList,
+      findDeilverGoodsByGoodsCode,
+      loading,
+      handleNoneValue,
+      changeUnit,
+    };
+  },
 });
 </script>
 <style lang="less">

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

@@ -1,16 +1,18 @@
 <template>
   <!--订单交易 挂牌转让-->
   <div class="topTableHeight">
-    <a-table :columns="columns"
-             :class="['srcollYTable', isBottom ? 'secondTabTable' : 'secondTabTableNoBottom', getQuoteList().length ? 'noPlaceHolder' : 'hasPlaceHolder']"
-             :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 407px)' : 'calc(100vh - 167px)' }"
-             :pagination="false"
-             :loading="loading"
-             :expandedRowKeys="expandedRowKeys"
-             :customRow="Rowclick"
-             rowKey="goodscode"
-             ref="tableRef"
-             :data-source="getQuoteList()">
+    <a-table
+      :columns="columns"
+      :class="['srcollYTable', isBottom ? 'secondTabTable' : 'secondTabTableNoBottom', getQuoteList().length ? 'noPlaceHolder' : 'hasPlaceHolder']"
+      :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 407px)' : 'calc(100vh - 167px)' }"
+      :pagination="false"
+      :loading="loading"
+      :expandedRowKeys="expandedRowKeys"
+      :customRow="Rowclick"
+      rowKey="goodscode"
+      ref="tableRef"
+      :data-source="getQuoteList()"
+    >
       <template #totalturnover="{ text }">
         <span>{{ changeUnit(text) }}</span>
       </template>
@@ -23,16 +25,20 @@
         <span>{{ handleNoneValue(text) }}</span>
       </template>
       <!-- 开盘价 -->
-      <template #opened="{ text }">
-        <span>{{ handleNoneValue(text) }}</span>
+      <template #opened="{ record, text }">
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
       </template>
       <!-- 涨跌 -->
-      <template #change="{ record }">
-        <span>{{ quoteChange(record, record.decimalplace) }}</span>
+      <template #change="{ record, text }">
+        <span
+          :class="handleQuotePriceColor(text, record.presettle)"
+        >{{ quoteChange(record, record.decimalplace) }}</span>
       </template>
       <!-- 幅度 -->
-      <template #amplitude="{ record }">
-        <span>{{ quoteAmplitude(record, record.decimalplace) }}</span>
+      <template #amplitude="{ record, text }">
+        <span
+          :class="handleQuotePriceColor(text, record.presettle)"
+        >{{ quoteAmplitude(record, record.decimalplace) }}</span>
       </template>
       <!-- 振幅 -->
       <template #vibration="{ record }">
@@ -43,39 +49,38 @@
       </template>
       <!-- 买价 -->
       <template #bid="{ text, record }">
-        <span
-              :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
       </template>
       <!-- 卖价 -->
       <template #ask="{ text, record }">
-        <span
-              :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
       </template>
       <!-- 最新价 -->
       <template #last="{ text, record }">
-        <span
-              :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
       </template>
       <!-- 最低价 -->
       <template #lowest="{ text, record }">
-        <span
-              :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
       </template>
       <!-- 最高价 -->
       <template #highest="{ text, record }">
-        <span
-              :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
       </template>
     </a-table>
     <!-- 右键 -->
-    <contextMenu :contextMenu="contextMenu"
-                 @cancel="closeContext"
-                 :list="handleBtnList(selectedRow)"></contextMenu>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               :deliverGoods="findDeilverGoodsByGoodsCode(selectedRow.goodscode)"
-               @cancel="closeComponent"></component>
+    <contextMenu
+      :contextMenu="contextMenu"
+      @cancel="closeContext"
+      :list="handleBtnList(selectedRow)"
+    ></contextMenu>
+    <component
+      :is="componentId"
+      v-if="componentId"
+      :selectedRow="selectedRow"
+      :deliverGoods="findDeilverGoodsByGoodsCode(selectedRow.goodscode)"
+      @cancel="closeComponent"
+    ></component>
   </div>
 </template>
 
@@ -99,57 +104,57 @@ import { Tradesfer } from './interface';
 import { changeUnit } from '@/utils/qt/common';
 
 export default defineComponent({
-    name: EnumRouterName.spot_trade_order_transaction_listing_transfer,
-    components: {
-        contextMenu,
-        BuyAndSell: defineAsyncComponent(() => import('../components/buy-sell-market/index.vue')),
-        Listing: defineAsyncComponent(() => import('../components/listing/index.vue')),
-        Detail: defineAsyncComponent(() => import('../components/detail/index.vue')),
-    },
-    setup() {
-        const isBottom = getShowBottomValue();
-        const loading = ref<boolean>(false);
-        const param: TableParam = {
-            columnsList,
-            queryFn: () => {},
-            clickName: 'BuyAndSell',
-        };
-        function handleBtnList(record: Tradesfer) {
-            const result: BtnListType[] = [
-                { lable: '挂牌求购', code: 'Listing', className: 'btnDeafault' },
-                { lable: '图表', code: 'BuyAndSell', className: 'btnDeafault' },
-            ];
-            if (record && record.deliverytype) {
-                result.push({ lable: '详情', code: 'Detail', className: 'btnDeafault' });
-            }
-            return result;
-        }
+  name: EnumRouterName.spot_trade_order_transaction_listing_transfer,
+  components: {
+    contextMenu,
+    BuyAndSell: defineAsyncComponent(() => import('../components/buy-sell-market/index.vue')),
+    Listing: defineAsyncComponent(() => import('../components/listing/index.vue')),
+    Detail: defineAsyncComponent(() => import('../components/detail/index.vue')),
+  },
+  setup() {
+    const isBottom = getShowBottomValue();
+    const loading = ref<boolean>(false);
+    const param: TableParam = {
+      columnsList,
+      queryFn: () => { },
+      clickName: 'BuyAndSell',
+    };
+    function handleBtnList(record: Tradesfer) {
+      const result: BtnListType[] = [
+        { lable: '挂牌求购', code: 'Listing', className: 'btnDeafault' },
+        { lable: '图表', code: 'BuyAndSell', className: 'btnDeafault' },
+      ];
+      if (record && record.deliverytype) {
+        result.push({ lable: '详情', code: 'Detail', className: 'btnDeafault' });
+      }
+      return result;
+    }
 
-        const { deliverGoods, getQuoteList, goodsList, findDeilverGoodsByGoodsCode } = handleDeliveryRelation([1, 3]);
-        // 行情按需订阅
-        handleSubcriteOnDemandQuote<QueryDeliveryRelationRsp>(deliverGoods);
+    const { deliverGoods, getQuoteList, goodsList, findDeilverGoodsByGoodsCode } = handleDeliveryRelation([1, 3]);
+    // 行情按需订阅
+    handleSubcriteOnDemandQuote<QueryDeliveryRelationRsp>(deliverGoods);
 
-        return {
-            isBottom,
-            ...handleTableEventAndData<Tradesfer>(param),
-            deliverGoods,
-            handleBtnList,
-            handleQuotePriceColor,
-            quoteChange,
-            quoteAmplitude,
-            quoteAmplituOfVibration,
-            getQuoteList,
-            findDeilverGoodsByGoodsCode,
-            goodsList,
-            loading,
-            handleNoneValue,
-            changeUnit,
-        };
-    },
+    return {
+      isBottom,
+      ...handleTableEventAndData<Tradesfer>(param),
+      deliverGoods,
+      handleBtnList,
+      handleQuotePriceColor,
+      quoteChange,
+      quoteAmplitude,
+      quoteAmplituOfVibration,
+      getQuoteList,
+      findDeilverGoodsByGoodsCode,
+      goodsList,
+      loading,
+      handleNoneValue,
+      changeUnit,
+    };
+  },
 });
 </script>
 <style lang="less">
 .noData {
-    .position(absolute, 28px, 0, 0, 0);
+  .position(absolute, 28px, 0, 0, 0);
 }
 </style>

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

@@ -73,6 +73,7 @@
         >{{ getQuoteValue_out(record.refgoodscode, 'opened') }}</span>
       </template>
       <!-- 结算 -->
+      \
       <template #settle="{ record }">
         <span
           :class="handleQuotePriceColor_out(record.refgoodscode, 'settle')"