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 { 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, toRefs } from 'vue';
import { quoteChange, quoteAmplitude } from '@/common/setup/table/tableQuote';
import { TableQuote } from '@/common/setup/table/interface';

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

/**
 * 处理行情价格颜色
 */
function handleQuotePriceColor<T, Key extends keyof TableQuote>(text: T, value: TableQuote[Key], presettle: TableQuote['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: TableQuote }) => {
                const text = formatValue(record.last);
                return handleQuotePriceColor(text, record.last, record.presettle);
            }
        },
        {
            title: '涨跌幅%',
            key: 'amplitude',
            customRender: ({ record }: { record: TableQuote }) => {
                const text = quoteAmplitude(record);
                return handleQuotePriceColor(text, record.last, record.presettle);
            }
        },
        {
            title: '涨跌额',
            key: 'change',
            customRender: ({ record }: { record: TableQuote }) => {
                const text = quoteChange(record, record.decimalplace);
                return handleQuotePriceColor(text, record.last, record.presettle);
            }
        },
        {
            title: '买价',
            key: 'bid',
            customRender: ({ record }: { record: TableQuote }) => {
                const text = formatValue(record.bid);
                return handleQuotePriceColor(text, record.bid, record.presettle);
            }
        },
        {
            title: '卖价',
            key: 'ask',
            customRender: ({ record }: { record: TableQuote }) => {
                const text = formatValue(record.ask);
                return handleQuotePriceColor(text, record.ask, record.presettle);
            }
        },
        {
            title: '买量',
            key: 'bidvolume',
            customRender: ({ record }: { record: TableQuote }) => {
                const text = formatValue(record.bidvolume);
                return handleQuotePriceColor(text, record.bidvolume, record.presettle);
            }
        },
        {
            title: '卖量',
            key: 'askvolume',
            customRender: ({ record }: { record: TableQuote }) => {
                const text = formatValue(record.askvolume);
                return handleQuotePriceColor(text, record.askvolume, record.presettle);
            }
        },
        {
            title: '总量',
            key: 'totalvolume',
            customRender: ({ record }: { record: TableQuote }) => {
                return formatValue(record.totalvolume);
            }
        },
        {
            title: '现量',
            key: 'lastvolume',
            customRender: ({ record }: { record: TableQuote }) => {
                const text = formatValue(record.lastvolume);
                return handleQuotePriceColor(text, record.lastvolume, record.presettle);
            }
        },
        {
            title: '持仓量',
            key: 'holdvolume',
            customRender: ({ record }: { record: TableQuote }) => {
                return formatValue(record.holdvolume);
            }
        },
        {
            title: '日增',
            key: 'holdincrement',
            customRender: ({ record }: { record: TableQuote }) => {
                const text = formatValue(record.holdincrement);
                return handleQuotePriceColor(text, record.holdincrement, record.presettle);
            }
        },
        {
            title: '昨结价',
            key: 'presettle',
            customRender: ({ record }: { record: TableQuote }) => {
                return formatValue(record.presettle);
            }
        },
        {
            title: '金额',
            key: 'totalturnover',
            customRender: ({ record }: { record: TableQuote }) => {
                return formatValue(record.totalturnover);
            }
        },
        {
            title: '开盘',
            key: 'opened',
            customRender: ({ record }: { record: TableQuote }) => {
                const text = formatValue(record.opened);
                return handleQuotePriceColor(text, record.opened, record.presettle);
            }
        },
        {
            title: '最高',
            key: 'highest',
            customRender: ({ record }: { record: TableQuote }) => {
                const text = formatValue(record.highest);
                return handleQuotePriceColor(text, record.highest, record.presettle);
            }
        },
        {
            title: '最低',
            key: 'lowest',
            customRender: ({ record }: { record: TableQuote }) => {
                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 = () => {
    const loading = ref<boolean>(false)
    const index = ref<string>('0');
    // 盘面数据
    const quoteList = ref<QueryQuoteDayRsp[]>([]);
    // 表格数据
    const tableList = ref<TableQuote[]>([]);
    // 外部交易所 数据
    const externalexchangeList = ref<Externalexchange[]>([])
    const tabList = ref<TabList[]>([])

    // 获取 商品数据
    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)

        // 重置表格数据
        tableList.value = goodsList.map((el) => {
            return {
                goodsid: el.goodsid,
                goodscode: el.goodscode,
                goodsname: el.goodsname,
                decimalplace: el.decimalplace,
                marketid: el.marketid,
            }
        })

        // 找到 盘面数据
        getQuoteData(goodsList)
    }
    function getQuoteData(goodsList: Goods[]) {
        quoteList.value.length = 0
        // 找到盘面数据
        goodsList.forEach(el => {
            const quote = getQuoteDayInfoByCode(el.goodscode);
            if (quote) {
                quoteList.value.push(quote)
            }
        })
    }

    // 处理表格行情数据
    function hanldeTableData() {
        quoteList.value.forEach((quote) => {
            const refs = toRefs(quote);
            const index = tableList.value.findIndex((e) => e.goodscode === quote.goodscode);
            if (index > -1) {
                const item = tableList.value[index];
                item.last = refs.last; // 最新价
                item.bid = refs.bid; // 买价
                item.ask = refs.ask; // 卖价
                item.bidvolume = refs.bidvolume; // 买量
                item.askvolume = refs.askvolume; // 卖量
                item.totalvolume = refs.totalvolume; // 总量
                item.lastvolume = refs.lastvolume; // 现量
                item.holdvolume = refs.holdvolume; // 持仓量
                item.holdincrement = refs.holdincrement; // 日增
                item.presettle = refs.presettle; // 昨结价
                item.totalturnover = refs.totalturnover; // 金额
                item.opened = refs.opened; // 开盘
                item.highest = refs.highest; // 最高
                item.lowest = refs.lowest; // 最低
            }
        });
    }

    function getExternalId(index: number) {
        return externalexchangeList.value[index].autoid
    }

    return { index, loading, tabList, tableList, quoteList, hanldeQuoteData, hanldeTableData }
}