MTP20_WEB_GLOBAL/src/packages/quote/views/quote/index.vue

<template>
    <div ref="quoteRef" class="quote">
        <div class="quote-header">
            <div class="quote-header__logo">
                <img :src="'./logo/logo-horizontal.png'" />
            </div>
            <div class="quote-header__time">
                <span>
                    {{ serverTime?.format('YYYY/MM/DD HH:mm:ss') }}
                </span>
                <span v-if="market">
                    {{ [2, 6].includes(market.runstatus) ? getRunStatusName(market.runstatus) : '未开盘' }}
                </span>
            </div>
        </div>
        <table class="quote-table" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th>商品</th>
                    <th>回购</th>
                    <th>销售</th>
                    <th>高</th>
                    <th>低</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in touristTradeGoodsList" :key="index">
                    <td>{{ item.goodsname }}</td>
                    <td :class="item.bidColor">
                        {{ handleNumberValue(formatDecimal(item.bid, item.decimalplace)) }}
                    </td>
                    <td :class="item.askColor">
                        {{ handleNumberValue(formatDecimal(item.ask, item.decimalplace)) }}
                    </td>
                    <td :class="item.highestColor">
                        {{ handleNumberValue(formatDecimal(item.highest, item.decimalplace)) }}
                    </td>
                    <td :class="item.lowestColor">
                        {{ handleNumberValue(formatDecimal(item.lowest, item.decimalplace)) }}
                    </td>
                </tr>
            </tbody>
            <thead>
                <tr>
                    <th class="title" colspan="5">参考商品</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in touristRefGoodsList" :key="index">
                    <td>{{ item.goodsname }}</td>
                    <td :class="item.bidColor">
                        {{ handleNumberValue(formatDecimal(item.bid, item.decimalplace)) }}
                    </td>
                    <td :class="item.askColor">
                        {{ handleNumberValue(formatDecimal(item.ask, item.decimalplace)) }}
                    </td>
                    <td :class="item.highestColor">
                        {{ handleNumberValue(formatDecimal(item.highest, item.decimalplace)) }}
                    </td>
                    <td :class="item.lowestColor">
                        {{ handleNumberValue(formatDecimal(item.lowest, item.decimalplace)) }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script lang="ts" setup>
import { shallowRef, computed, onActivated, onDeactivated, ref, onMounted, onUnmounted, nextTick } from 'vue'
import moment, { Moment } from 'moment'
import { timerInterceptor } from '@/utils/timer'
import { getServerTime } from '@/services/api/common'
import { handleNumberValue, formatDecimal } from '@/filters'
import { queryTouristGoods, queryTouristQuoteDay } from '@/services/api/goods'
import { useEnumStore, useFuturesStore } from '@/stores'
import { timerTask } from '@/utils/timer'
import { useRequest } from '@/hooks/request'
import { getRunStatusName } from '@/constants/market'
import { queryMarketRun } from '@/services/api/market'
import quoteSocket from '@/services/websocket/quote'
import service from '@/services'

const enumStore = useEnumStore()
const futuresStore = useFuturesStore()
const subscribe = quoteSocket.createSubscribe()
const quoteRef = shallowRef<HTMLDivElement>()
const maxQty = 8 // 显示最多商品数量

// 订阅的商品代码
const subscribeData = shallowRef<string[]>([])
// 系统时间
const serverTime = ref<Moment>()

service.onReady().then(() => {
    enumStore.getAllEnumList()

    // 获取游客商品列表
    queryTouristGoods().then((res) => {
        futuresStore.goodsList = res.data
        subscribeData.value = res.data.map((e) => e.goodscode)

        // 获取游客商品盘面
        queryTouristQuoteDay({
            data: {
                goodsCodes: subscribeData.value.join(',')
            }
        }).then((res) => {
            subscribeData.value.forEach((goodscode) => {
                const item = res.data.find((e) => e.goodscode === goodscode)
                futuresStore.updateQuotation(item ?? { goodscode })
            })
            subscribe.start(...subscribeData.value)

            const [firstMarket] = touristTradeGoodsList.value
            if (firstMarket) {
                /// 获取市场运行情况
                marketRun({
                    marketID: firstMarket.marketid
                })
            }

            nextTick(() => autoHeight())
        })
    })

    // 校验服务器时间
    const checkServerTime = () => {
        getServerTime().then((res) => {
            serverTime.value = moment.parseZone(res.data)
            // 每1分钟同步一次服务器时间
            timerTask.setTimeout(() => {
                checkServerTime()
            }, 60 * 1000, 'getServerTime')
        })
    }

    checkServerTime()
})

const { data: market, run: marketRun } = useRequest(queryMarketRun, {
    manual: true,
    onSuccess: (res) => {
        market.value = res.data[0]
        // 每1分钟轮询刷新
        timerTask.setTimeout(() => marketRun(), 60 * 1000, 'getMarketRun')
    }
})


// 构建游客交易商品
const touristTradeGoodsList = computed(() => {
    const list = futuresStore.getGoodsListByTradeMode(52)
    return list.sort((a, b) => a.goodsorder.localeCompare(b.goodsorder))
})

// 构建游客参考行情商品
const touristRefGoodsList = computed(() => {
    const list = futuresStore.getGoodsListByTradeMode(99, 97)
    return list.sort((a, b) => a.goodsorder.localeCompare(b.goodsorder))
})

// 自适应高度
const autoHeight = () => {
    const el = quoteRef.value
    const header = el?.querySelector('.quote-header')
    const table = el?.querySelector('.quote-table')

    if (header && table) {
        let height = document.body.clientHeight - header.clientHeight

        table.querySelectorAll('thead').forEach((e) => {
            height -= e.clientHeight
        })

        const tableRows = table.querySelectorAll('tbody tr') // 获取行数

        table.querySelectorAll('td').forEach((e) => {
            const n = tableRows.length < maxQty ? tableRows.length : maxQty
            e.style.setProperty('height', (height / n) + 'px')
        })
    }
}

onMounted(() => {
    serverTime.value = moment(new Date())
    timerTask.setInterval(() => {
        serverTime.value = moment(serverTime.value).add(1000, 'ms')
    }, 1000, 'refreshTime')

    // 监听窗口大小变化
    window.addEventListener('resize', timerInterceptor.setDebounce(() => autoHeight()))
})

onActivated(() => subscribeData.value.length && subscribe.start(...subscribeData.value))
onDeactivated(() => subscribe.stop())

onUnmounted(() => {
    timerTask.clearInterval('refreshTime')
    timerTask.clearTimeout('getServerTime')
    timerTask.clearTimeout('getMarketRun')
})
</script>

<style lang="less">
@import './index.less';
</style>