36 lines
1.2 KiB
Vue
36 lines
1.2 KiB
Vue
<script lang='ts' setup>
|
|
import type { ChartingLibraryWidgetOptions } from "#/charting_library";
|
|
import type { TradableData } from "@/api/types";
|
|
import type { TradingViewInst } from "@/tradingview";
|
|
import { client, safeClient } from "@/api";
|
|
import { TradingViewChart } from "@/tradingview";
|
|
import OrderBook from "./order-book.vue";
|
|
|
|
const props = defineProps<{
|
|
data: TradableData | null;
|
|
}>();
|
|
|
|
const tradingviewOptions: Partial<ChartingLibraryWidgetOptions> = {
|
|
disabled_features: [
|
|
"create_volume_indicator_by_default",
|
|
],
|
|
};
|
|
|
|
const tradingViewInst = useTemplateRef<TradingViewInst>("tradingViewInst");
|
|
const symbol = computed(() => props.data?.asset?.tradingPairsAsBase[0].symbol || "");
|
|
|
|
const { data } = await safeClient(client.api.trading_pairs.orderbook.get({ query: { symbol: symbol.value, depth: 30 } }));
|
|
</script>
|
|
|
|
<template>
|
|
<TradingViewChart v-if="symbol" ref="tradingViewInst" class="mb-5" height="300px" :symbol="symbol" :options="tradingviewOptions" />
|
|
|
|
<ui-tabs size="small" class="my-3">
|
|
<ui-tab-pane name="order_book" title="订单表">
|
|
<OrderBook :symbol="symbol" />
|
|
</ui-tab-pane>
|
|
</ui-tabs>
|
|
</template>
|
|
|
|
<style lang='css' scoped></style>
|