|
|
@@ -0,0 +1,146 @@
|
|
|
+<!-- 交易市场-订单交易 -->
|
|
|
+<template>
|
|
|
+ <app-table :data="tableList" v-model:columns="tableColumns" :loading="loading" @row-click="onRowClick" showIndex>
|
|
|
+ <!-- 规格 -->
|
|
|
+ <template #spec="{ row }">
|
|
|
+ {{ handleNumberValue(row.agreeunit, getGoodsUnitName(row.goodunitid)) }}
|
|
|
+ </template>
|
|
|
+ <!-- 卖价 -->
|
|
|
+ <template #ask="{ row }">
|
|
|
+ <span :class="row.askColor">{{ row.ask }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 买价 -->
|
|
|
+ <template #bid="{ row }">
|
|
|
+ <span :class="row.bidColor">{{ row.bid }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 当前价 -->
|
|
|
+ <template #last="{ row }">
|
|
|
+ <span :class="row.lastColor">{{ row.last }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 涨跌 -->
|
|
|
+ <template #rise="{ row }">
|
|
|
+ <span :class="row.lastColor">{{ row.rise }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 涨跌幅 -->
|
|
|
+ <template #change="{ row }">
|
|
|
+ <span :class="row.lastColor">{{ row.change }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 开盘 -->
|
|
|
+ <template #opened="{ row }">
|
|
|
+ <span :class="row.openedColor">{{ row.opened }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 最低 -->
|
|
|
+ <template #lowest="{ row }">
|
|
|
+ <span :class="row.lowestColor">{{ row.lowest }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 最高 -->
|
|
|
+ <template #highest="{ row }">
|
|
|
+ <span :class="row.highestColor">{{ row.highest }}</span>
|
|
|
+ </template>
|
|
|
+ </app-table>
|
|
|
+ <component ref="componentRef" v-bind="{ goodsId }" :is="componentMap.get(componentId)" @closed="closeComponent"
|
|
|
+ v-if="componentId" />
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { shallowRef, computed, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
|
|
|
+import { parsePercent, handleNumberValue } from '@/filters'
|
|
|
+import { useComponent } from '@/hooks/component'
|
|
|
+import { getGoodsUnitName } from '@/constants/unit'
|
|
|
+import { useFuturesStore, useGoodsStore } from '@/stores'
|
|
|
+import quoteSocket from '@/services/websocket/quote'
|
|
|
+import AppTable from '@pc/components/base/table/index.vue'
|
|
|
+
|
|
|
+const componentMap = new Map<string, unknown>([
|
|
|
+ ['detail', defineAsyncComponent(() => import('./detail/index.vue'))], // 详情
|
|
|
+])
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ code: String
|
|
|
+})
|
|
|
+
|
|
|
+const marketIds = (()=>{
|
|
|
+ switch (props.code) {
|
|
|
+ case 'market_trade_goods_50101':
|
|
|
+ return '50101'
|
|
|
+ case 'market_trade_goods_50102':
|
|
|
+ return '50102'
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+})()
|
|
|
+
|
|
|
+const futuresStore = useFuturesStore()
|
|
|
+const goodsStore = useGoodsStore()
|
|
|
+const subscribe = quoteSocket.createSubscribe()
|
|
|
+
|
|
|
+const { loading, goodsId, quoteGoodsList } = goodsStore.$toRefs()
|
|
|
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => goodsStore.getQuoteGoodsList({
|
|
|
+ marketids: marketIds
|
|
|
+}), false)
|
|
|
+
|
|
|
+const tableList = computed(() => {
|
|
|
+ return quoteGoodsList.value.map((item) => {
|
|
|
+ const quote = futuresStore.getGoodsQuote(item.goodscode)
|
|
|
+ const { bid, bidColor, bidvolume, ask, askColor, askvolume, goodunitid, agreeunit, limitdown, limitup, lastColor, openedColor, lowestColor, highestColor, last, presettle, rise, change, amplitude, highest, lowest, opened, decimalplace } = quote.value ?? {}
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ lastColor,
|
|
|
+ openedColor,
|
|
|
+ lowestColor,
|
|
|
+ highestColor,
|
|
|
+ askColor,
|
|
|
+ bidColor,
|
|
|
+ bid: handleNumberValue(bid?.toFixed(decimalplace)),
|
|
|
+ bidvolume: handleNumberValue(bidvolume),
|
|
|
+ ask: handleNumberValue(ask?.toFixed(decimalplace)),
|
|
|
+ askvolume: handleNumberValue(askvolume),
|
|
|
+ last: handleNumberValue(last?.toFixed(decimalplace)),
|
|
|
+ rise: rise?.toFixed(item.decimalplace),
|
|
|
+ change: parsePercent(change),
|
|
|
+ opened: handleNumberValue(opened?.toFixed(decimalplace)),
|
|
|
+ presettle: handleNumberValue(presettle?.toFixed(decimalplace)),
|
|
|
+ lowest: handleNumberValue(lowest?.toFixed(decimalplace)),
|
|
|
+ highest: handleNumberValue(highest?.toFixed(decimalplace)),
|
|
|
+ amplitude: parsePercent(amplitude),
|
|
|
+ limitdown: handleNumberValue(limitdown?.toFixed(decimalplace)),
|
|
|
+ limitup: handleNumberValue(limitup?.toFixed(decimalplace)),
|
|
|
+ agreeunit,
|
|
|
+ goodunitid
|
|
|
+ }
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+const tableColumns = shallowRef<Model.TableColumn[]>([
|
|
|
+ { prop: 'goodscode', label: '代码' },
|
|
|
+ { prop: 'goodsname', label: '名称' },
|
|
|
+ { prop: 'spec', label: '规格' },
|
|
|
+ { prop: 'bid', label: '买价' },
|
|
|
+ { prop: 'bidvolume', label: '买量' },
|
|
|
+ { prop: 'ask', label: '卖价' },
|
|
|
+ { prop: 'askvolume', label: '卖量' },
|
|
|
+ { prop: 'last', label: '当前价' },
|
|
|
+ { prop: 'rise', label: '涨跌' },
|
|
|
+ { prop: 'change', label: '涨跌幅' },
|
|
|
+ { prop: 'opened', label: '开盘' },
|
|
|
+ { prop: 'presettle', label: '昨结' },
|
|
|
+ { prop: 'highest', label: '最高' },
|
|
|
+ { prop: 'lowest', label: '最低' },
|
|
|
+ { prop: 'amplitude', label: '振幅' },
|
|
|
+ { prop: 'limitup', label: '涨停价', className: 'g-price-up' },
|
|
|
+ { prop: 'limitdown', label: '跌停价', className: 'g-price-down' },
|
|
|
+])
|
|
|
+
|
|
|
+const onRowClick = (row: Model.OrderQuoteRsp) => {
|
|
|
+ goodsId.value = row.goodsid
|
|
|
+ openComponent('detail')
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ goodsStore.getQuoteGoodsList({ marketids: marketIds }).then(() => {
|
|
|
+ const goodsCodes = goodsStore.quoteGoodsList.map((e) => e.goodscode)
|
|
|
+ subscribe.start(...goodsCodes)
|
|
|
+ })
|
|
|
+})
|
|
|
+onUnmounted(() => subscribe.stop())
|
|
|
+</script>
|
