|
@@ -4,6 +4,22 @@
|
|
|
<app-navbar title="订单挂牌" />
|
|
<app-navbar title="订单挂牌" />
|
|
|
</template>
|
|
</template>
|
|
|
<app-list :columns="columns" :data-list="tableList" @row-click="rowClick">
|
|
<app-list :columns="columns" :data-list="tableList" @row-click="rowClick">
|
|
|
|
|
+ <!-- 买价 -->
|
|
|
|
|
+ <template #bid="{ row }">
|
|
|
|
|
+ <span :class="row.bidColor">{{ row.bid }}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <!-- 买量 -->
|
|
|
|
|
+ <template #bidvolume="{ row }">
|
|
|
|
|
+ <span :class="row.bidvolumeColor">{{ row.bidvolume }}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <!-- 卖价 -->
|
|
|
|
|
+ <template #ask="{ row }">
|
|
|
|
|
+ <span :class="row.askColor">{{ row.ask }}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <!-- 卖量 -->
|
|
|
|
|
+ <template #askvolume="{ row }">
|
|
|
|
|
+ <span :class="row.askvolumeColor">{{ row.askvolume }}</span>
|
|
|
|
|
+ </template>
|
|
|
<!-- 当前价 -->
|
|
<!-- 当前价 -->
|
|
|
<template #last="{ row }">
|
|
<template #last="{ row }">
|
|
|
<span :class="row.lastColor">{{ row.last }}</span>
|
|
<span :class="row.lastColor">{{ row.last }}</span>
|
|
@@ -28,12 +44,19 @@
|
|
|
<template #highest="{ row }">
|
|
<template #highest="{ row }">
|
|
|
<span :class="row.highestColor">{{ row.highest }}</span>
|
|
<span :class="row.highestColor">{{ row.highest }}</span>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
+ <!-- 涨停 -->
|
|
|
|
|
+ <template #limitup="{ value }">
|
|
|
|
|
+ <span class="g-up-color">{{ value }}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <!-- 跌停 -->
|
|
|
|
|
+ <template #limitdown="{ value }">
|
|
|
|
|
+ <span class="g-down-color">{{ value }}</span>
|
|
|
|
|
+ </template>
|
|
|
</app-list>
|
|
</app-list>
|
|
|
</app-view>
|
|
</app-view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
-
|
|
|
|
|
import { computed } from 'vue'
|
|
import { computed } from 'vue'
|
|
|
import { v4 } from 'uuid'
|
|
import { v4 } from 'uuid'
|
|
|
import { parsePercent, handleNumberValue } from '@/filters'
|
|
import { parsePercent, handleNumberValue } from '@/filters'
|
|
@@ -55,7 +78,7 @@ const { dataList } = useRequest(queryQuoteGoodsList, {
|
|
|
marketids: '50101'
|
|
marketids: '50101'
|
|
|
},
|
|
},
|
|
|
onSuccess: (res) => {
|
|
onSuccess: (res) => {
|
|
|
- const goodsCodes = res.data.map((e) => e.refgoodscode)
|
|
|
|
|
|
|
+ const goodsCodes = res.data.map((e) => e.goodscode)
|
|
|
const subscribe = quoteSocket.addSubscribe(goodsCodes, subscribeId)
|
|
const subscribe = quoteSocket.addSubscribe(goodsCodes, subscribeId)
|
|
|
subscribe.start()
|
|
subscribe.start()
|
|
|
}
|
|
}
|
|
@@ -64,7 +87,7 @@ const { dataList } = useRequest(queryQuoteGoodsList, {
|
|
|
const tableList = computed(() => {
|
|
const tableList = computed(() => {
|
|
|
return dataList.value.map((item) => {
|
|
return dataList.value.map((item) => {
|
|
|
const quote = futuresStore.getQuoteInfo(item.goodscode)
|
|
const quote = futuresStore.getQuoteInfo(item.goodscode)
|
|
|
- const { goodsname, lastColor, openedColor, lowestColor, highestColor, last, presettle, rise, change, amplitude, highest, lowest, opened } = quote.value ?? {}
|
|
|
|
|
|
|
+ const { goodsname, bid, bidColor, bidvolume, ask, askColor, askvolume, limitdown, limitup, lastColor, openedColor, lowestColor, highestColor, last, presettle, rise, change, amplitude, highest, lowest, opened } = quote.value ?? {}
|
|
|
return {
|
|
return {
|
|
|
...item,
|
|
...item,
|
|
|
goodsname,
|
|
goodsname,
|
|
@@ -72,6 +95,12 @@ const tableList = computed(() => {
|
|
|
openedColor,
|
|
openedColor,
|
|
|
lowestColor,
|
|
lowestColor,
|
|
|
highestColor,
|
|
highestColor,
|
|
|
|
|
+ askColor,
|
|
|
|
|
+ bidColor,
|
|
|
|
|
+ bid: handleNumberValue(bid),
|
|
|
|
|
+ bidvolume: handleNumberValue(bidvolume),
|
|
|
|
|
+ ask: handleNumberValue(ask),
|
|
|
|
|
+ askvolume: handleNumberValue(askvolume),
|
|
|
last: handleNumberValue(last),
|
|
last: handleNumberValue(last),
|
|
|
rise: handleNumberValue(rise?.toFixed(item.decimalplace)),
|
|
rise: handleNumberValue(rise?.toFixed(item.decimalplace)),
|
|
|
change: parsePercent(change),
|
|
change: parsePercent(change),
|
|
@@ -80,12 +109,18 @@ const tableList = computed(() => {
|
|
|
lowest: handleNumberValue(lowest),
|
|
lowest: handleNumberValue(lowest),
|
|
|
highest: handleNumberValue(highest),
|
|
highest: handleNumberValue(highest),
|
|
|
amplitude: parsePercent(amplitude),
|
|
amplitude: parsePercent(amplitude),
|
|
|
|
|
+ limitdown: handleNumberValue(limitdown),
|
|
|
|
|
+ limitup: handleNumberValue(limitup),
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
const columns: Model.TableColumn[] = [
|
|
const columns: Model.TableColumn[] = [
|
|
|
{ prop: 'goodsname', label: '商品/标的' },
|
|
{ prop: 'goodsname', label: '商品/标的' },
|
|
|
|
|
+ { prop: 'bid', label: '买价' },
|
|
|
|
|
+ { prop: 'bidvolume', label: '买量' },
|
|
|
|
|
+ { prop: 'ask', label: '卖价' },
|
|
|
|
|
+ { prop: 'askvolume', label: '卖量' },
|
|
|
{ prop: 'last', label: '当前价' },
|
|
{ prop: 'last', label: '当前价' },
|
|
|
{ prop: 'rise', label: '涨跌' },
|
|
{ prop: 'rise', label: '涨跌' },
|
|
|
{ prop: 'change', label: '幅度' },
|
|
{ prop: 'change', label: '幅度' },
|
|
@@ -94,13 +129,15 @@ const columns: Model.TableColumn[] = [
|
|
|
{ prop: 'lowest', label: '最低' },
|
|
{ prop: 'lowest', label: '最低' },
|
|
|
{ prop: 'highest', label: '最高' },
|
|
{ prop: 'highest', label: '最高' },
|
|
|
{ prop: 'amplitude', label: '振幅' },
|
|
{ prop: 'amplitude', label: '振幅' },
|
|
|
|
|
+ { prop: 'limitup', label: '涨停' },
|
|
|
|
|
+ { prop: 'limitdown', label: '跌停' },
|
|
|
]
|
|
]
|
|
|
|
|
|
|
|
const rowClick = (row: Model.QuoteGoodsListRsp) => {
|
|
const rowClick = (row: Model.QuoteGoodsListRsp) => {
|
|
|
router.push({
|
|
router.push({
|
|
|
name: 'goods-detail',
|
|
name: 'goods-detail',
|
|
|
- params: {
|
|
|
|
|
- item: JSON.stringify(row)
|
|
|
|
|
|
|
+ query: {
|
|
|
|
|
+ goodsid: row.goodsid
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|