|
|
@@ -1,94 +1,154 @@
|
|
|
<template>
|
|
|
<app-view>
|
|
|
<template #header>
|
|
|
- <app-navbar title="参考行情" />
|
|
|
+ <app-navbar title="行情" />
|
|
|
</template>
|
|
|
- <app-list :columns="columns" :data-list="dataList" @row-click="rowClick">
|
|
|
- <!-- 卖价 -->
|
|
|
+ <app-list :columns="columns" :data-list="touristTradeGoodsList" @row-click="rowClick">
|
|
|
+ <!-- 回购 -->
|
|
|
<template #ask="{ row }">
|
|
|
- <span :class="row.askColor">{{ row.ask }}</span>
|
|
|
+ <span :class="row.bidColor">{{ handleNumberValue(row.bid) }}</span>
|
|
|
</template>
|
|
|
- <!-- 买价 -->
|
|
|
+ <!-- 销售 -->
|
|
|
<template #bid="{ row }">
|
|
|
- <span :class="row.bidColor">{{ row.bid }}</span>
|
|
|
+ <span :class="row.askColor">{{ handleNumberValue(row.ask) }}</span>
|
|
|
</template>
|
|
|
- <!-- 最新价 -->
|
|
|
- <template #last="{ row }">
|
|
|
- <span :class="row.lastColor">{{ row.last }}</span>
|
|
|
+ <!-- 高/低 -->
|
|
|
+ <template #hl="{ row }">
|
|
|
+ <span :class="row.highestColor">{{ handleNumberValue(row.highest) }}</span>
|
|
|
+ <span :class="row.lowestColor">{{ handleNumberValue(row.lowest) }}</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>
|
|
|
+ </app-list>
|
|
|
+ <div>参考行情</div>
|
|
|
+ <app-list :columns="columns" :data-list="touristRefGoodsList" @row-click="rowClick">
|
|
|
+ <!-- 回购 -->
|
|
|
+ <template #ask="{ row }">
|
|
|
+ <span :class="row.bidColor">{{ handleNumberValue(row.bid) }}</span>
|
|
|
</template>
|
|
|
- <!-- 最低 -->
|
|
|
- <template #lowest="{ row }">
|
|
|
- <span :class="row.lowestColor">{{ row.lowest }}</span>
|
|
|
+ <!-- 销售 -->
|
|
|
+ <template #bid="{ row }">
|
|
|
+ <span :class="row.askColor">{{ handleNumberValue(row.ask) }}</span>
|
|
|
</template>
|
|
|
- <!-- 最高 -->
|
|
|
- <template #highest="{ row }">
|
|
|
- <span :class="row.highestColor">{{ row.highest }}</span>
|
|
|
+ <!-- 高/低 -->
|
|
|
+ <template #hl="{ row }">
|
|
|
+ <span :class="row.highestColor">{{ handleNumberValue(row.highest) }}</span>
|
|
|
+ <span :class="row.lowestColor">{{ handleNumberValue(row.lowest) }}</span>
|
|
|
</template>
|
|
|
</app-list>
|
|
|
</app-view>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { onMounted, onUnmounted, computed } from 'vue'
|
|
|
-import { parsePercent, handleNumberValue } from '@/filters'
|
|
|
+import { computed, onActivated, onDeactivated ,nextTick} from 'vue'
|
|
|
+import { handleNumberValue } from '@/filters'
|
|
|
import { useNavigation } from '@/packages/sbyj/router/navigation'
|
|
|
-import { useFuturesStore } from '@/stores'
|
|
|
+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'
|
|
|
|
|
|
const { router } = useNavigation()
|
|
|
const futuresStore = useFuturesStore()
|
|
|
+const loginStore = useLoginStore()
|
|
|
+
|
|
|
+// *************** 游客 ***************
|
|
|
+// 获取游客商品列表
|
|
|
+const { dataList: touristGoodsList, run: getTouristGoods } = useRequest(queryTouristGoods, {
|
|
|
+ manual: true,
|
|
|
+ onSuccess: (res) => {
|
|
|
+ const goodsCodes = res.data.map((item) => item.goodscode)
|
|
|
+ getTouristQuoteDay({goodsCodes: goodsCodes.join(',')})
|
|
|
+ }
|
|
|
+})
|
|
|
+// 获取游客商品盘面
|
|
|
+const { dataList: srcTouristQuoteDayList, run: getTouristQuoteDay } = useRequest(queryTouristQuoteDay, {
|
|
|
+ manual: true,
|
|
|
+ onSuccess: () => {
|
|
|
+ const goodsCodes = touristGoodsList.value.map((item) => item.goodscode)
|
|
|
+ // 每2秒轮训一次游客商品盘面(递归调用)
|
|
|
+ timerTask.setTimeout(() => getTouristQuoteDay({goodsCodes: goodsCodes.join(',')}), 2000, 'queryTouristQuoteDayKey')
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 构建显示使用游客商品(包括交易与参考行情)
|
|
|
+const touristQuoteDayList = computed(() => {
|
|
|
+ const arr: Partial<Model.Futures>[] = []
|
|
|
+ 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,
|
|
|
+ ask: t.ask,
|
|
|
+ bid: t.bid,
|
|
|
+ highest: t.highest,
|
|
|
+ lowest: t.lowest,
|
|
|
+ askColor: handleColor(t.ask, t.presettle),
|
|
|
+ bidColor: handleColor(t.bid, t.presettle),
|
|
|
+ highestColor: handleColor(t.highest, t.presettle),
|
|
|
+ lowestColor: handleColor(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 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.quoteList.filter((e) => e.marketid === 99201)
|
|
|
return list.map((e) => ({
|
|
|
goodscode: e.goodscode,
|
|
|
+ goodsname: e.goodsname,
|
|
|
askColor: e.askColor,
|
|
|
bidColor: e.bidColor,
|
|
|
- lastColor: e.lastColor,
|
|
|
- openedColor: e.openedColor,
|
|
|
lowestColor: e.lowestColor,
|
|
|
highestColor: e.highestColor,
|
|
|
- ask: handleNumberValue(e.ask),
|
|
|
- bid: handleNumberValue(e.bid),
|
|
|
- last: handleNumberValue(e.last),
|
|
|
- rise: handleNumberValue(e.rise.toFixed(e.decimalplace)),
|
|
|
- change: parsePercent(e.change),
|
|
|
- opened: handleNumberValue(e.opened),
|
|
|
- presettle: handleNumberValue(e.presettle),
|
|
|
- lowest: handleNumberValue(e.lowest),
|
|
|
- highest: handleNumberValue(e.highest),
|
|
|
- amplitude: parsePercent(e.amplitude),
|
|
|
+ ask: e.ask,
|
|
|
+ bid: e.bid,
|
|
|
+ lowest: e.lowest,
|
|
|
+ highest: e.highest,
|
|
|
+ trademode: e.trademode,
|
|
|
}))
|
|
|
})
|
|
|
|
|
|
-const goodsCodes = dataList.value.map((e) => e.goodscode.toUpperCase())
|
|
|
+// 处理行情价格颜色
|
|
|
+const handleColor = (value: number, presettle: number) => {
|
|
|
+ if (value === 0 || value === presettle) {
|
|
|
+ return ''
|
|
|
+ } else if (value > presettle) {
|
|
|
+ return 'g-price-up'
|
|
|
+ } else {
|
|
|
+ return 'g-price-down'
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
const subscribe = quoteSocket.createSubscribe()
|
|
|
|
|
|
const columns: Model.TableColumn[] = [
|
|
|
- { prop: 'goodscode', label: '合约' },
|
|
|
- { prop: 'ask', label: '卖价' },
|
|
|
- { prop: 'bid', label: '买价' },
|
|
|
- { prop: 'last', label: '最新价' },
|
|
|
- { prop: 'rise', label: '涨跌' },
|
|
|
- { prop: 'change', label: '幅度' },
|
|
|
- { prop: 'opened', label: '今开' },
|
|
|
- { prop: 'presettle', label: '昨结' },
|
|
|
- { prop: 'lowest', label: '最低' },
|
|
|
- { prop: 'highest', label: '最高' },
|
|
|
- { prop: 'amplitude', label: '振幅' },
|
|
|
+ { prop: 'goodsname', label: '商品' },
|
|
|
+ { prop: 'ask', label: '回购' },
|
|
|
+ { prop: 'bid', label: '销售' },
|
|
|
+ { prop: 'hl', label: '高/低' },
|
|
|
]
|
|
|
|
|
|
const rowClick = (row: Model.Futures) => {
|
|
|
@@ -100,6 +160,18 @@ const rowClick = (row: Model.Futures) => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-onMounted(() => subscribe.start(...goodsCodes))
|
|
|
-onUnmounted(() => subscribe.stop())
|
|
|
+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')
|
|
|
+})
|
|
|
</script>
|