MTP2.0_WEB/src/views/market/futures/setup.tsx

import { TabList } from '@/common/components/description/interface';
import { initData } from '@/common/methods';
import APP from '@/services';
import { GoodsQuote } from '@/services/go/ermcp/goodsInfo/interface';
import { Externalexchange } from '@/services/go/useInfo/interface';
import { ref } from 'vue';
import { quoteChange, quoteAmplitude } from '@/common/setup/table/tableQuote';
import { getGoodsQuoteList } from '@/services/bus/goods';
import { subcriteGoodsQuote } from '@/common/setup/table/tableQuote';
import { changeUnit } from '@/utils/qt/common'

/**
 * 处理空数据
 */
function formatValue<Key extends keyof GoodsQuote>(value: GoodsQuote[Key]) {
    return value > 0 ? value : '--';
}

/**
 * 处理行情价格颜色
 */
function handleQuotePriceColor<T, Key extends keyof GoodsQuote>(text: T, value: GoodsQuote[Key], presettle: GoodsQuote['presettle']) {
    let className = ''
    if (presettle && value !== presettle) {
        if (value > presettle) {
            className = 'up-quote-color'
        } else {
            className = 'down-quote-color'
        }
    }
    return <span class={className}>{text}</span>;
}

export function getColumnsList() {
    const columns = [
        {
            title: '序号',
            key: 'index',
            width: 80
        },
        {
            title: '代码',
            key: 'goodscode',
        },
        {
            title: '名称',
            key: 'goodsname'
        },
        {
            title: '最新价',
            key: 'last',
            customRender: ({ record }: { record: GoodsQuote }) => {
                const text = formatValue(record.last);
                return handleQuotePriceColor(text, record.last, record.presettle);
            }
        },
        {
            title: '涨跌幅%',
            key: 'amplitude',
            customRender: ({ record }: { record: GoodsQuote }) => {
                const text = quoteAmplitude(record);
                return handleQuotePriceColor(text, record.last, record.presettle);
            }
        },
        {
            title: '涨跌额',
            key: 'change',
            customRender: ({ record }: { record: GoodsQuote }) => {
                const text = quoteChange(record, record.decimalplace);
                return handleQuotePriceColor(text, record.last, record.presettle);
            }
        },
        {
            title: '买价',
            key: 'bid',
            customRender: ({ record }: { record: GoodsQuote }) => {
                const text = formatValue(record.bid);
                return handleQuotePriceColor(text, record.bid, record.presettle);
            }
        },
        {
            title: '卖价',
            key: 'ask',
            customRender: ({ record }: { record: GoodsQuote }) => {
                const text = formatValue(record.ask);
                return handleQuotePriceColor(text, record.ask, record.presettle);
            }
        },
        {
            title: '买量',
            key: 'bidvolume',
            customRender: ({ record }: { record: GoodsQuote }) => {
                const text = formatValue(record.bidvolume);
                return handleQuotePriceColor(text, record.bidvolume, record.presettle);
            }
        },
        {
            title: '卖量',
            key: 'askvolume',
            customRender: ({ record }: { record: GoodsQuote }) => {
                const text = formatValue(record.askvolume);
                return handleQuotePriceColor(text, record.askvolume, record.presettle);
            }
        },
        {
            title: '总量',
            key: 'totalvolume',
            customRender: ({ record }: { record: GoodsQuote }) => {
                return formatValue(record.totalvolume);
            }
        },
        {
            title: '现量',
            key: 'lastvolume',
            customRender: ({ record }: { record: GoodsQuote }) => {
                const text = formatValue(record.lastvolume);
                return handleQuotePriceColor(text, record.lastvolume, record.presettle);
            }
        },
        {
            title: '持仓量',
            key: 'holdvolume',
            customRender: ({ record }: { record: GoodsQuote }) => {
                return formatValue(record.holdvolume);
            }
        },
        {
            title: '日增',
            key: 'holdincrement',
            customRender: ({ record }: { record: GoodsQuote }) => {
                const text = formatValue(record.holdincrement);
                return handleQuotePriceColor(text, record.holdincrement, record.presettle);
            }
        },
        {
            title: '昨结价',
            key: 'presettle',
            customRender: ({ record }: { record: GoodsQuote }) => {
                return formatValue(record.presettle);
            }
        },
        {
            title: '金额',
            key: 'totalturnover',
            customRender: ({ record }: { record: GoodsQuote }) => {
                if (record.totalturnover > 0) {
                    return changeUnit(record.totalturnover);
                }
                return formatValue(record.totalturnover);
            }
        },
        {
            title: '开盘',
            key: 'opened',
            customRender: ({ record }: { record: GoodsQuote }) => {
                const text = formatValue(record.opened);
                return handleQuotePriceColor(text, record.opened, record.presettle);
            }
        },
        {
            title: '最高',
            key: 'highest',
            customRender: ({ record }: { record: GoodsQuote }) => {
                const text = formatValue(record.highest);
                return handleQuotePriceColor(text, record.highest, record.presettle);
            }
        },
        {
            title: '最低',
            key: 'lowest',
            customRender: ({ record }: { record: GoodsQuote }) => {
                const text = formatValue(record.lowest);
                return handleQuotePriceColor(text, record.lowest, record.presettle);
            }
        },
    ];

    return columns.map(el => {
        return {
            dataIndex: el.key,
            width: 100,
            align: 'center',
            slots: { customRender: el.key, },
            ...el
        }
    })
}

// 外部交易所
export const useExternalexchange = () => {
    let stopSubcribe: () => void;
    const loading = ref(false)
    // 交易所ID
    const exchangeId = ref(0);
    // 表格数据
    const tableList = ref<GoodsQuote[]>([]);
    // 外部交易所 数据
    const externalexchangeList = ref<Externalexchange[]>([])
    // 交易所标签
    const tabList = ref<TabList[]>([]);

    function hanldeQuoteData(index: number) {
        exchangeId.value = externalexchangeList.value[index].autoid;
        tableList.value = getGoodsQuoteList(exchangeId.value);

        const codes = tableList.value.map((el) => el.goodscode);
        // 行情按需订阅
        stopSubcribe = subcriteGoodsQuote(codes);
    }

    // 切换交易所标签
    function changeTab(index: number, current: TabList) {
        // 停止上次订阅
        stopSubcribe();
        hanldeQuoteData(index);
        console.log(index, current);
    }

    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)
        }
    })

    return { loading, exchangeId, tabList, tableList, changeTab, }
}