添加 期货市场 行情列表

src/services/socket/quota/adapter/index.ts

@@ -7,9 +7,9 @@ import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
 import { mergeObj } from '@/utils/objHandle';
 import { Package40 } from '@/utils/websocket/package';
 import Long from 'long';
+import moment from 'moment';
 import { SubscribeInfoType } from '../interface';
 import { byteArrayToUInt, subscribeInfosToByteArrary } from './byteUtils';
-import moment from 'moment';
 
 /**
  * 构建行情订阅请求包
@@ -127,6 +127,7 @@ export function parseReceivePush(quotationData: any) {
         if (itemQuote) {
             const goods = getGoodsByCode(itemQuote.goodscode);
             if (goods) {
+                console.log('quoteDayInfo', itemQuote)
                 // 处理报价小数为
                 const decimalplace = goods.decimalplace
                 const num = Math.pow(10, decimalplace)
@@ -165,7 +166,7 @@ export function parseReceivePush(quotationData: any) {
                 goodsQuoteTik.preclose = goodsQuoteTik.preclose ? (fn(goodsQuoteTik.preclose)) : '--'
                 goodsQuoteTik.settle = goodsQuoteTik.settle ? (fn(goodsQuoteTik.settle)) : '--'
                 goodsQuoteTik.strikeprice = goodsQuoteTik.strikeprice ? (fn(goodsQuoteTik.strikeprice)) : '--'
-                
+
                 goodsQuoteTik.lasttime = moment(goodsQuoteTik.date + goodsQuoteTik.time, 'YYYYMMDDHHmmss').format('YYYY-MM-DD HH:mm:ss')
 
                 // !goodsQuoteTik.bidvolume && (goodsQuoteTik.bidvolume = '--')
@@ -189,7 +190,7 @@ export function parseReceivePush(quotationData: any) {
 
             // 注意：此处已 go 服务查询出来的盘面数据为基准，查询盘面 先修改成go 服务，第一次进入项目时候回查询一次所有盘面
             // 之前是 通过 websocket 查询的，故 可能存在字段发生变化问题，如遇到，则进行优化处理
-            
+
             // 判断是一下行情时间是否比现在的要早
             const quoteTime = moment(goodsQuoteTik.lasttime, 'YYYY-MM-DD HH:mm:ss')
             const localTime = moment(itemQuote.lasttime, 'YYYY-MM-DD HH:mm:ss')

src/views/market/futures/index.vue

@@ -0,0 +1,187 @@
+<template>
+  <!--期货-->
+  <div class="topTableHeight">
+    <a-table :columns="getColumnsList()"
+             :class="['srcollYTable', isBottom ? 'condSecondTabTable' : 'condSecondTabTableNoBottom', tableList.length ? 'noPlaceHolder' : 'hasPlaceHolder']"
+             :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 443px)' : 'calc(100vh - 196px)' }"
+             :pagination="false"
+             :loading="loading"
+             rowKey="key"
+             :data-source="tableList">
+      <template #totalturnover="{ text }">
+        <span>{{changeUnit(text)}}</span>
+      </template>
+      <!-- 涨跌 -->
+      <template #change="{ record }">
+        <span>{{quoteChange(record, record.decimalplace)}}</span>
+      </template>
+      <!-- 幅度 -->
+      <template #amplitude="{ record }">
+        <span>{{quoteAmplitude(record, record.decimalplace)}}</span>
+      </template>
+      <!-- 振幅 -->
+      <template #vibration="{ record }">
+        <span>{{quoteAmplituOfVibration(record, record.decimalplace)}}</span>
+      </template>
+      <template #index="{ index }">
+        <span>{{index + 1}}</span>
+      </template>
+      <!-- 买价 -->
+      <template #bid="{ text, record }">
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
+      </template>
+      <!-- 卖价 -->
+      <template #ask="{ text, record }">
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
+      </template>
+      <!-- 最新价 -->
+      <template #last="{ text, record }">
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
+      </template>
+      <!-- 最低价 -->
+      <template #lowest="{ text, record }">
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
+      </template>
+      <!-- 最高价 -->
+      <template #highest="{ text, record }">
+        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
+      </template>
+    </a-table>
+    <ThridMenu :list="tabList"
+               :selectedKey="index"
+               @selectMenu="changeTab" />
+    <!-- 右键 -->
+    <!-- <contextMenu :contextMenu="contextMenu"
+                 @cancel="closeContext"
+                 :list="btnList"></contextMenu>
+    <component :is="componentId"
+               v-if="componentId"
+               :selectedRow="selectedRow"
+               @cancel="closeComponent"></component> -->
+  </div>
+</template>
+
+<script lang="ts">
+import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
+
+import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteAmplitude, quoteAmplituOfVibration } from '@/common/setup/table/tableQuote';
+import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
+
+import { handleTableEventAndData } from '@/common/setup/table/compose';
+import { TableParam } from '@/common/setup/table/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
+import { getShowBottomValue } from '@/common/config/constrolBottom';
+import { ref } from 'vue';
+import { useQueryData } from '@/common/setup/request';
+import { QueryQuoteGoodsListReq } from '@/services/go/Tjmd/interface';
+import { queryQuoteGoodsList } from '@/services/go/Tjmd';
+import APP from '@/services';
+import { getGoodsList } from '@/services/bus/goods';
+import { Goods } from '@/services/go/ermcp/goodsInfo/interface';
+import { getColumnsList, useExternalexchange } from './setup';
+import ThridMenu from '@/common/components/thirdMenu/index.vue';
+import { Externalexchange } from '@/services/go/useInfo/interface';
+import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
+import { TabList } from '@/common/components/description/interface';
+
+export default defineComponent({
+    name: 'spot_trade_order_transaction_swap',
+    components: {
+        ThridMenu,
+    },
+    setup() {
+        const isBottom = getShowBottomValue();
+
+        const { index, loading, tabList, tableList, hanldeQuoteData } = useExternalexchange();
+        // 行情按需订阅
+        let stopSubcribe = handleSubcriteOnDemandQuote<QueryQuoteDayRsp>(tableList);
+        function changeTab(index: number, current: TabList) {
+            hanldeQuoteData(index);
+            console.log(index, current);
+            // 停止上次订阅
+            stopSubcribe();
+            // 重新发起订阅
+            stopSubcribe = handleSubcriteOnDemandQuote<QueryQuoteDayRsp>(tableList);
+        }
+
+        return {
+            index,
+            loading,
+            tabList,
+            changeTab,
+            tableList,
+            isBottom,
+            // ...handleTableEventAndData<Goods>(param),
+            handleQuotePriceColor,
+            quoteChange,
+            quoteAmplitude,
+            quoteAmplituOfVibration,
+            // goodsList,
+            getColumnsList,
+            // loading,
+            // goodsChange,
+        };
+    },
+});
+</script>
+<style lang="less">
+.noData {
+    .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;
+    }
+
+    .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;
+                .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;
+    }
+}
+</style>

src/views/market/futures/setup.ts

@@ -0,0 +1,101 @@
+import { TabList } from '@/common/components/description/interface';
+import { initData } from '@/common/methods';
+import APP from '@/services';
+import { getQuoteDayInfoByCode } from '@/services/bus/goods';
+import { Ermcp3GoodsGroup, Goods } from '@/services/go/ermcp/goodsInfo/interface';
+import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
+import { Externalexchange } from '@/services/go/useInfo/interface';
+import { ref } from 'vue';
+
+
+export function getColumnsList() {
+    const columns = [
+        { title: '序号', key: 'index', width: 80 },
+        { title: '代码', key: 'goodscode' },
+        { title: '名称', key: 'goodsname' },
+
+        { title: '买价', key: 'bid' },
+        { title: '买量', key: 'bidvolume' },
+        { title: '卖价', key: 'ask' },
+        { title: '卖量', key: 'askvolume' },
+
+        { title: '当前价', key: 'last' },
+        { title: '涨跌', key: 'change' }, // 最新价 - 昨结价
+        { title: '幅度', key: 'amplitude' }, // （最新价 - 昨结价） / 100 %
+        { title: '开盘', key: 'opened' },
+        { title: '最高', key: 'highest' },
+        { title: '最低', key: 'lowest' },
+
+        { title: '结算', key: 'settle' },
+
+        { title: '昨结算', key: 'presettle' },
+
+        // { title: '振幅', key: 'vibration' }, // (最高价 - 最低价 ) / 最新价  * 100 %
+        // { title: '总量', key: 'totalvolume' },
+        // { title: '现量', key: 'lastvolume' },
+        // { title: '持仓量', key: 'holdvolume' },
+        // { title: '日增', key: 'holdincrement' },
+        // { title: '金额', key: 'totalturnover' },
+    ];
+
+    return columns.map(el => {
+        return { dataIndex: el.key, width: 100, align: 'center', slots: { customRender: el.key, }, ...el }
+    })
+}
+
+// 外部交易所
+export const useExternalexchange = () => {
+    const loading = ref<boolean>(false)
+    const index = ref<string>('0');
+    // 外部交易所 数据
+    const externalexchangeList = ref<Externalexchange[]>([])
+    const tabList = ref<TabList[]>([])
+    // 盘面数据
+    const tableList = ref<QueryQuoteDayRsp[]>([
+    ])
+    // 获取 商品数据
+    const useGoodsList = (exchareaid: number) => {
+        const goodsList = APP.get('Goods') as Goods[];
+        const goodsGroups = APP.get('goodsgroups') as Ermcp3GoodsGroup[]
+        // 商品组
+        const selectedGoodsGroups = goodsGroups.filter(e => e.exexchangeid === exchareaid).map(el => el.goodsgroupid)
+        return goodsList.filter(e => {
+            return e.goodsstatus === 3 && selectedGoodsGroups.includes(e.goodsgroupid)
+        })
+
+    }
+
+    initData(() => {
+        externalexchangeList.value = APP.get('externalexchange')
+        const list = externalexchangeList.value.map((e: Externalexchange) => {
+            return { lable: e.exexchangename, code: e.exexchangecode };
+        }) as TabList[]
+
+        tabList.value = list
+        if (list.length) {
+            hanldeQuoteData(0)
+        }
+    })
+    function hanldeQuoteData(index: number) {
+        const id = getExternalId(index)
+        // 找到 交易所 下的商品列表
+        const goodsList = useGoodsList(id)
+        // 找到 盘面数据
+        getQuoteData(goodsList)
+    }
+    function getQuoteData(goodsList: Goods[]) {
+        tableList.value.length = 0
+        // 找到盘面数据
+        goodsList.forEach(el => {
+            const quote = getQuoteDayInfoByCode(el.goodscode);
+            if (quote) {
+                tableList.value.push(quote)
+            }
+        })
+    }
+    function getExternalId(index: number) {
+        return externalexchangeList.value[index].autoid
+    }
+
+    return { index, loading, tabList, tableList, hanldeQuoteData }
+}