fish/trade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

适配移动端展示

Browse Source
This commit is contained in:
fish
2026-05-04 21:36:48 +08:00
parent c852b1d871
commit b6bacbfae9
10 changed files with 298 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/frontend/src/components/KLineChart.vue
View File

@@ -3,9 +3,11 @@ import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import type { Candle } from '@/api/candles'
import { useThemeStore } from '@/stores/theme'
import { useMobile } from '@/composables/useMobile'
const props = defineProps<{ data: Candle[] }>()
const theme = useThemeStore()
const { isMobile } = useMobile()
const containerRef = ref<HTMLDivElement | null>(null)
let chart: echarts.ECharts | null = null
@@ -32,8 +34,8 @@ function render() {
tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
legend: { data: ['K 线', '持仓量'], top: 0 },
grid: [
{ left: 60, right: 40, top: 40, height: '60%' },
{ left: 60, right: 40, top: '78%', height: '18%' },
{ left: isMobile.value ? 48 : 60, right: isMobile.value ? 12 : 40, top: 40, height: '60%' },
{ left: isMobile.value ? 48 : 60, right: isMobile.value ? 12 : 40, top: '78%', height: '18%' },
],
xAxis: [
{ type: 'category', data: dates, scale: true, boundaryGap: false },
@@ -100,6 +102,10 @@ watch(
render()
},
)
watch(isMobile, () => {
ensureChart()
render()
})
</script>
<template>
@@ -111,4 +117,9 @@ watch(
width: 100%;
height: 560px;
}
@media (max-width: 768px) {
.chart {
height: 420px;
}
}
</style>

41
web/frontend/src/components/ScoreDetailDrawer.vue
View File

@@ -2,6 +2,9 @@
import { computed, ref, watch } from 'vue'
import { getScore, type Score } from '@/api/scores'
import { parseTsCode } from '@/utils/contract'
import { useMobile } from '@/composables/useMobile'
const { isMobile } = useMobile()
const props = defineProps<{ scoreId: number | null }>()
const emit = defineEmits<{ (e: 'close'): void }>()
@@ -34,9 +37,9 @@ watch(
</script>
<template>
<el-drawer v-model="visible" title="打分明细" size="640px" destroy-on-close>
<el-drawer v-model="visible" title="打分明细" :size="isMobile ? '92%' : '640px'" destroy-on-close>
<div v-loading="loading" v-if="score">
<el-descriptions :column="2" border>
<el-descriptions :column="isMobile ? 1 : 2" border>
<el-descriptions-item label="品种">{{ parseTsCode(score.ts_code).symbol }}</el-descriptions-item>
<el-descriptions-item label="合约">{{ parseTsCode(score.ts_code).contract }}</el-descriptions-item>
<el-descriptions-item label="日期">{{ score.trade_date }}</el-descriptions-item>
@@ -50,23 +53,25 @@ watch(
</el-descriptions-item>
<el-descriptions-item label="短期(7d × 0.4)">{{ score.short_term.toFixed(2) }}</el-descriptions-item>
<el-descriptions-item label="中期(15d × 0.35)">{{ score.medium_term.toFixed(2) }}</el-descriptions-item>
<el-descriptions-item label="长期(30d × 0.25)" :span="2">
<el-descriptions-item label="长期(30d × 0.25)" :span="isMobile ? 1 : 2">
{{ score.long_term.toFixed(2) }}
</el-descriptions-item>
</el-descriptions>
<h4 class="section">短期 7 日逐日打分</h4>
<el-table :data="score.detail?.short_details ?? []" size="small" border>
<el-table-column prop="trade_date" label="日期" width="100" />
<el-table-column prop="close" label="收盘" />
<el-table-column prop="pre_close" label="昨收" />
<el-table-column prop="oi" label="持仓" />
<el-table-column prop="oi_chg" label="持仓变化" />
<el-table-column prop="score" label="单日得分" />
</el-table>
<div class="table-wrapper">
<el-table :data="score.detail?.short_details ?? []" size="small" border class="detail-table">
<el-table-column prop="trade_date" label="日期" width="100" />
<el-table-column prop="close" label="收盘" />
<el-table-column prop="pre_close" label="昨收" />
<el-table-column prop="oi" label="持仓" />
<el-table-column prop="oi_chg" label="持仓变化" />
<el-table-column prop="score" label="单日得分" />
</el-table>
</div>
<h4 class="section">中期(15d)细节</h4>
<el-descriptions :column="2" border v-if="score.detail?.medium_detail">
<el-descriptions :column="isMobile ? 1 : 2" border v-if="score.detail?.medium_detail">
<el-descriptions-item label="价格收益率">
{{ (score.detail.medium_detail.price_return_pct * 100).toFixed(2) }}%
</el-descriptions-item>
@@ -79,20 +84,20 @@ watch(
<el-descriptions-item label="增仓下跌日">
{{ score.detail.medium_detail.long_down_days }}
</el-descriptions-item>
<el-descriptions-item label="资金意愿分" :span="2">
<el-descriptions-item label="资金意愿分" :span="isMobile ? 1 : 2">
{{ score.detail.medium_detail.fund_signal }}
</el-descriptions-item>
</el-descriptions>
<h4 class="section">长期(30d)细节</h4>
<el-descriptions :column="2" border v-if="score.detail?.long_detail">
<el-descriptions :column="isMobile ? 1 : 2" border v-if="score.detail?.long_detail">
<el-descriptions-item label="30 日均持仓">
{{ score.detail.long_detail.avg_oi.toFixed(0) }}
</el-descriptions-item>
<el-descriptions-item label="30 日前持仓">
{{ score.detail.long_detail.oi_before.toFixed(0) }}
</el-descriptions-item>
<el-descriptions-item label="变化幅度" :span="2">
<el-descriptions-item label="变化幅度" :span="isMobile ? 1 : 2">
{{ (score.detail.long_detail.change_pct * 100).toFixed(2) }}%
</el-descriptions-item>
</el-descriptions>
@@ -104,4 +109,10 @@ watch(
.section {
margin: 18px 0 8px;
}
.table-wrapper {
overflow-x: auto;
}
.detail-table {
min-width: 520px;
}
</style>