|
|
@@ -38,101 +38,40 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { computed, onActivated, onDeactivated, nextTick } from 'vue'
|
|
|
-import { handleNumberValue, formatDecimal, handlePriceColor } from '@/filters'
|
|
|
+import { computed, onUnmounted } from 'vue'
|
|
|
+import { handleNumberValue, formatDecimal } from '@/filters'
|
|
|
import { useNavigation } from '@/packages/sbyj/router/navigation'
|
|
|
-import { useFuturesStore, useLoginStore } from '@/stores'
|
|
|
import quoteSocket from '@/services/websocket/quote'
|
|
|
import AppList from '@/packages/sbyj/components/base/list/index.vue'
|
|
|
import { useRequest } from '@/hooks/request'
|
|
|
import { queryTouristGoods, queryTouristQuoteDay } from '@/services/api/goods'
|
|
|
-import { timerTask } from '@/utils/timer'
|
|
|
+import { useFuturesStore } from '@/stores'
|
|
|
|
|
|
const { router } = useNavigation()
|
|
|
const futuresStore = useFuturesStore()
|
|
|
-const loginStore = useLoginStore()
|
|
|
+const subscribe = quoteSocket.createSubscribe()
|
|
|
|
|
|
-// *************** 游客 ***************
|
|
|
// 获取游客商品列表
|
|
|
-const { dataList: touristGoodsList, run: getTouristGoods } = useRequest(queryTouristGoods, {
|
|
|
- manual: true,
|
|
|
+useRequest(queryTouristGoods, {
|
|
|
onSuccess: (res) => {
|
|
|
const goodsCodes = res.data.map((item) => item.goodscode)
|
|
|
+ subscribe.start(...goodsCodes)
|
|
|
+ futuresStore.goodsList = res.data
|
|
|
getTouristQuoteDay({ goodsCodes: goodsCodes.join(',') })
|
|
|
}
|
|
|
})
|
|
|
// 获取游客商品盘面
|
|
|
-const { dataList: srcTouristQuoteDayList, run: getTouristQuoteDay } = useRequest(queryTouristQuoteDay, {
|
|
|
+const { run: getTouristQuoteDay } = useRequest(queryTouristQuoteDay, {
|
|
|
manual: true,
|
|
|
- onSuccess: () => {
|
|
|
- const goodsCodes = touristGoodsList.value.map((item) => item.goodscode)
|
|
|
- // 每2秒轮训一次游客商品盘面(递归调用)
|
|
|
- timerTask.setTimeout(() => getTouristQuoteDay({ goodsCodes: goodsCodes.join(',') }), 2000, 'queryTouristQuoteDayKey')
|
|
|
+ onSuccess: (res) => {
|
|
|
+ futuresStore.quoteDayList = res.data
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-// 构建显示使用游客商品(包括交易与参考行情)
|
|
|
-const touristQuoteDayList = computed(() => {
|
|
|
- const arr: Partial<Model.GoodsQuote>[] = []
|
|
|
- touristGoodsList.value.forEach((item) => {
|
|
|
- const t = srcTouristQuoteDayList.value.find((r) => r.goodscode === item.goodscode)
|
|
|
- if (t) {
|
|
|
- arr.push({
|
|
|
- goodsid: item.goodsid,
|
|
|
- goodscode: item.goodscode,
|
|
|
- goodsname: item.goodsname,
|
|
|
- decimalplace: item.decimalplace,
|
|
|
- ask: t.ask,
|
|
|
- bid: t.bid,
|
|
|
- highest: t.highest,
|
|
|
- lowest: t.lowest,
|
|
|
- askColor: handlePriceColor(t.ask, t.presettle),
|
|
|
- bidColor: handlePriceColor(t.bid, t.presettle),
|
|
|
- highestColor: handlePriceColor(t.highest, t.presettle),
|
|
|
- lowestColor: handlePriceColor(t.lowest, t.presettle),
|
|
|
- trademode: item.trademode,
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- return arr
|
|
|
-})
|
|
|
// 构建游客交易商品
|
|
|
-const touristTradeGoodsList = computed(() => {
|
|
|
- if (loginStore.token) {
|
|
|
- return dataList.value.filter((e) => e.trademode === 52)
|
|
|
- } else {
|
|
|
- return touristQuoteDayList.value.filter((e) => e.trademode === 52)
|
|
|
- }
|
|
|
-})
|
|
|
+const touristTradeGoodsList = computed(() => futuresStore.goodsQuoteList.filter((e) => e.trademode === 52))
|
|
|
// 构建游客参考行情商品
|
|
|
-const touristRefGoodsList = computed(() => {
|
|
|
- if (loginStore.token) {
|
|
|
- return dataList.value.filter((e) => e.trademode === 99)
|
|
|
- } else {
|
|
|
- return touristQuoteDayList.value.filter((e) => e.trademode === 99)
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-// *************** 已登录 ***************
|
|
|
-const dataList = computed(() => {
|
|
|
- const list = futuresStore.goodsQuoteList.filter((e) => e.trademode === 52 || e.trademode === 99)
|
|
|
- return list.map((e) => ({
|
|
|
- goodscode: e.goodscode,
|
|
|
- goodsname: e.goodsname,
|
|
|
- decimalplace: e.decimalplace,
|
|
|
- askColor: e.askColor,
|
|
|
- bidColor: e.bidColor,
|
|
|
- lowestColor: e.lowestColor,
|
|
|
- highestColor: e.highestColor,
|
|
|
- ask: e.ask,
|
|
|
- bid: e.bid,
|
|
|
- lowest: e.lowest,
|
|
|
- highest: e.highest,
|
|
|
- trademode: e.trademode,
|
|
|
- }))
|
|
|
-})
|
|
|
-
|
|
|
-const subscribe = quoteSocket.createSubscribe()
|
|
|
+const touristRefGoodsList = computed(() => futuresStore.goodsQuoteList.filter((e) => e.trademode === 99))
|
|
|
|
|
|
const columns: Model.TableColumn[] = [
|
|
|
{ prop: 'goodsname', label: '商品' },
|
|
|
@@ -141,7 +80,7 @@ const columns: Model.TableColumn[] = [
|
|
|
{ prop: 'hl', label: '高/低' },
|
|
|
]
|
|
|
|
|
|
-const rowClick = (row: Model.Futures) => {
|
|
|
+const rowClick = (row: Model.GoodsQuote) => {
|
|
|
router.push({
|
|
|
name: 'market-detail',
|
|
|
query: {
|
|
|
@@ -150,20 +89,7 @@ const rowClick = (row: Model.Futures) => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-onActivated(() => {
|
|
|
- if (loginStore.token) {
|
|
|
- nextTick(() => {
|
|
|
- const goodsCodes = dataList.value.map((e) => e.goodscode.toUpperCase())
|
|
|
- subscribe.start(...goodsCodes)
|
|
|
- })
|
|
|
- } else {
|
|
|
- getTouristGoods()
|
|
|
- }
|
|
|
-})
|
|
|
-onDeactivated(() => {
|
|
|
- subscribe.stop()
|
|
|
- timerTask.clearTimeout('queryTouristQuoteDayKey')
|
|
|
-})
|
|
|
+onUnmounted(() => subscribe.stop())
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|