|
|
@@ -1,37 +1,41 @@
|
|
|
<!-- 交易市场 - 挂牌点价 -->
|
|
|
<template>
|
|
|
- <app-table :data="tableList" v-model:columns="tableColumns" @row-click="onRowClick" showIndex>
|
|
|
+ <app-table :data="futuresStore.marketGoodsList" v-model:columns="tableColumns" @row-click="onRowClick" showIndex>
|
|
|
<!-- 当前价 -->
|
|
|
<template #last="{ row }">
|
|
|
- <span :class="row.lastColor">{{ row.last }}</span>
|
|
|
+ <span :class="row.lastColor">{{ handleNumberValue(formatDecimal(row.last, row.decimalplace)) }}</span>
|
|
|
</template>
|
|
|
<!-- 涨跌 -->
|
|
|
<template #rise="{ row }">
|
|
|
- <span :class="row.lastColor">{{ row.rise }}</span>
|
|
|
+ <span :class="row.lastColor">{{ formatDecimal(row.rise, row.decimalplace) }}</span>
|
|
|
</template>
|
|
|
<!-- 幅度 -->
|
|
|
<template #change="{ row }">
|
|
|
- <span :class="row.lastColor">{{ row.change }}</span>
|
|
|
+ <span :class="row.lastColor">{{ parsePercent(row.change) }}</span>
|
|
|
</template>
|
|
|
<!-- 今开 -->
|
|
|
<template #opened="{ row }">
|
|
|
- <span :class="row.openedColor">{{ row.opened }}</span>
|
|
|
+ <span :class="row.openedColor">{{ handleNumberValue(formatDecimal(row.opened, row.decimalplace)) }}</span>
|
|
|
</template>
|
|
|
<!-- 最低 -->
|
|
|
<template #lowest="{ row }">
|
|
|
- <span :class="row.lowestColor">{{ row.lowest }}</span>
|
|
|
+ <span :class="row.lowestColor">{{ handleNumberValue(formatDecimal(row.opened, row.decimalplace)) }}</span>
|
|
|
</template>
|
|
|
<!-- 最高 -->
|
|
|
<template #highest="{ row }">
|
|
|
- <span :class="row.highestColor">{{ row.highest }}</span>
|
|
|
+ <span :class="row.highestColor">{{ handleNumberValue(formatDecimal(row.lowest, row.decimalplace)) }}</span>
|
|
|
</template>
|
|
|
<!-- 买价 -->
|
|
|
<template #ask="{ row }">
|
|
|
- <span :class="row.askColor">{{ row.ask }}</span>
|
|
|
+ <span :class="row.askColor">{{ handleNumberValue(formatDecimal(row.ask, row.decimalplace)) }}</span>
|
|
|
</template>
|
|
|
<!-- 卖价 -->
|
|
|
<template #bid="{ row }">
|
|
|
- <span :class="row.bidColor">{{ row.bid }}</span>
|
|
|
+ <span :class="row.bidColor">{{ handleNumberValue(formatDecimal(row.bid, row.decimalplace)) }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 振幅 -->
|
|
|
+ <template #amplitude="{ value }">
|
|
|
+ <span>{{ parsePercent(value) }}</span>
|
|
|
</template>
|
|
|
<template #footer>
|
|
|
<component ref="componentRef" v-bind="{ goodsId: futuresStore.selectedGoodsId }"
|
|
|
@@ -41,15 +45,12 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef, onMounted, onUnmounted, defineAsyncComponent, computed } from 'vue'
|
|
|
+import { shallowRef, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
|
|
|
import { useComponent } from '@/hooks/component'
|
|
|
import { parsePercent, handleNumberValue, formatDecimal } from '@/filters'
|
|
|
import { useFuturesStore, useGlobalStore } from '@/stores'
|
|
|
-import { ETradeMode } from '@/constants/client'
|
|
|
-import quoteSocket from '@/services/websocket/quote'
|
|
|
import AppTable from '@pc/components/base/table/index.vue'
|
|
|
|
|
|
-const subscribe = quoteSocket.createSubscribe()
|
|
|
const futuresStore = useFuturesStore()
|
|
|
const globalStore = useGlobalStore()
|
|
|
|
|
|
@@ -59,36 +60,6 @@ const componentMap = new Map<string, unknown>([
|
|
|
['detail', defineAsyncComponent(() => import('@pc/components/modules/goods-detail/index.vue'))], // 详情
|
|
|
])
|
|
|
|
|
|
-const dataList = computed(() => {
|
|
|
- return futuresStore.getGoodsListByTradeMode(ETradeMode.TRADEMODE_MARKETMAKE)
|
|
|
-})
|
|
|
-
|
|
|
-const tableList = computed(() => {
|
|
|
- return dataList.value.map((item ) => {
|
|
|
- const quote = futuresStore.getGoodsQuote(item.goodscode)
|
|
|
- const { lastColor, openedColor, lowestColor, highestColor, last = 0, presettle = 0, rise = 0, change, amplitude, highest = 0, lowest = 0, opened = 0, ask = 0, bid = 0, bidColor, askColor, decimalplace } = quote.value ?? {}
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- lastColor,
|
|
|
- openedColor,
|
|
|
- lowestColor,
|
|
|
- highestColor,
|
|
|
- last: handleNumberValue(formatDecimal(last, decimalplace)),
|
|
|
- rise: handleNumberValue(formatDecimal(rise, decimalplace)),
|
|
|
- change: parsePercent(change),
|
|
|
- opened: handleNumberValue(formatDecimal(opened, decimalplace)),
|
|
|
- presettle: handleNumberValue(formatDecimal(presettle, decimalplace)),
|
|
|
- lowest: handleNumberValue(formatDecimal(lowest, decimalplace)),
|
|
|
- highest: handleNumberValue(formatDecimal(highest, decimalplace)),
|
|
|
- amplitude: parsePercent(amplitude),
|
|
|
- ask: handleNumberValue(formatDecimal(ask, decimalplace)),
|
|
|
- bid: handleNumberValue(formatDecimal(bid, decimalplace)),
|
|
|
- bidColor,
|
|
|
- askColor
|
|
|
- }
|
|
|
- })
|
|
|
-})
|
|
|
-
|
|
|
const tableColumns = shallowRef<Model.TableColumn[]>([
|
|
|
{ field: 'goodsname', label: 'quote.goodsname' },
|
|
|
{ field: 'last', label: 'quote.last' },
|
|
|
@@ -115,6 +86,4 @@ onMounted(() => {
|
|
|
onUnmounted(() => {
|
|
|
globalStore.showPricingListing = false
|
|
|
})
|
|
|
-
|
|
|
-onUnmounted(() => subscribe.stop())
|
|
|
</script>
|