From 2aea269e9beac08c60adb546470855a025a048d6 Mon Sep 17 00:00:00 2001
From: Lxy <windsdreaming@163.com>
Date: Sat, 11 Apr 2026 19:59:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=86=E8=82=A1=E7=A5=A8=E5=92=8C?=
 =?UTF-8?q?=E6=9C=9F=E8=B4=A7=E6=95=B0=E6=8D=AE=E5=8C=BA=E5=88=86=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/app/services/future_service.py        |  12 +-
 frontend/src/api/future.ts                    |   9 +
 .../src/views/DataQuery/FutureBatchQuery.vue  | 176 ++++++++++++
 .../src/views/DataQuery/FutureKlineQuery.vue  | 267 +++++++++++++++++
 .../src/views/DataQuery/StockBatchQuery.vue   | 176 ++++++++++++
 .../src/views/DataQuery/StockKlineQuery.vue   | 270 ++++++++++++++++++
 frontend/src/views/DataQuery/index.vue        |  34 ++-
 7 files changed, 934 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/views/DataQuery/FutureBatchQuery.vue
 create mode 100644 frontend/src/views/DataQuery/FutureKlineQuery.vue
 create mode 100644 frontend/src/views/DataQuery/StockBatchQuery.vue
 create mode 100644 frontend/src/views/DataQuery/StockKlineQuery.vue

diff --git a/backend/app/services/future_service.py b/backend/app/services/future_service.py
index 4079e68..7028dd1 100644
--- a/backend/app/services/future_service.py
+++ b/backend/app/services/future_service.py
@@ -180,7 +180,11 @@ class FutureService:
             return
         
         for idx, row in df.iterrows():
-            trade_date = idx if isinstance(idx, date) else parse_date(str(idx))
+            kline_time = row.get("kline_time")
+            if kline_time is None:
+                continue
+            
+            trade_date = kline_time.date() if hasattr(kline_time, 'date') else parse_date(str(kline_time)[:10])
             
             existing = self.db.query(FutureKlineDaily).filter(
                 and_(
@@ -223,7 +227,11 @@ class FutureService:
         from datetime import datetime
         
         for idx, row in df.iterrows():
-            trade_datetime = idx if isinstance(idx, datetime) else datetime.fromisoformat(str(idx))
+            kline_time = row.get("kline_time")
+            if kline_time is None:
+                continue
+            
+            trade_datetime = kline_time if isinstance(kline_time, datetime) else datetime.fromisoformat(str(kline_time))
             
             existing = self.db.query(FutureKlineMin).filter(
                 and_(
diff --git a/frontend/src/api/future.ts b/frontend/src/api/future.ts
index 079748d..dc098fa 100644
--- a/frontend/src/api/future.ts
+++ b/frontend/src/api/future.ts
@@ -19,3 +19,12 @@ export const getFutureKlineChart = (
 ) => {
   return request.get(`/future/kline/${code}/chart`, { params })
 }
+
+export const batchGetFutureKline = (data: {
+  codes: string[]
+  start_date: string
+  end_date: string
+  period?: string
+}) => {
+  return request.post('/future/kline/batch', data)
+}
diff --git a/frontend/src/views/DataQuery/FutureBatchQuery.vue b/frontend/src/views/DataQuery/FutureBatchQuery.vue
new file mode 100644
index 0000000..9483b7c
--- /dev/null
+++ b/frontend/src/views/DataQuery/FutureBatchQuery.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="future-batch-query">
+    <el-card>
+      <el-form :model="queryForm" label-width="80px">
+        <el-form-item label="期货代码">
+          <el-input
+            v-model="codeInput"
+            type="textarea"
+            :rows="4"
+            placeholder="输入期货代码，每行一个或逗号分隔，如：&#10;IF2401.CFE&#10;IC2401.CFE"
+          />
+        </el-form-item>
+        <el-form-item label="开始日期">
+          <el-date-picker
+            v-model="queryForm.startDate"
+            type="date"
+            placeholder="开始日期"
+            value-format="YYYYMMDD"
+          />
+        </el-form-item>
+        <el-form-item label="结束日期">
+          <el-date-picker
+            v-model="queryForm.endDate"
+            type="date"
+            placeholder="结束日期"
+            value-format="YYYYMMDD"
+          />
+        </el-form-item>
+        <el-form-item label="周期">
+          <el-select v-model="queryForm.period" style="width: 120px;">
+            <el-option label="日线" value="daily" />
+            <el-option label="1分钟" value="min1" />
+            <el-option label="5分钟" value="min5" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery" :loading="loading">
+            <el-icon><Search /></el-icon> 查询
+          </el-button>
+          <el-button @click="handleExport" :disabled="!hasData">
+            <el-icon><Download /></el-icon> 导出
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    
+    <el-card class="result-card" v-if="hasData">
+      <template #header>
+        <span>查询结果</span>
+      </template>
+      <el-tabs v-model="activeCode">
+        <el-tab-pane
+          v-for="(data, code) in resultData"
+          :key="code"
+          :label="code"
+          :name="code"
+        >
+          <el-table :data="data" stripe height="400">
+            <el-table-column prop="trade_date" label="日期" width="120" />
+            <el-table-column prop="open" label="开盘" :formatter="formatNumber" />
+            <el-table-column prop="high" label="最高" :formatter="formatNumber" />
+            <el-table-column prop="low" label="最低" :formatter="formatNumber" />
+            <el-table-column prop="close" label="收盘" :formatter="formatNumber" />
+            <el-table-column prop="volume" label="成交量" />
+            <el-table-column prop="amount" label="成交额" :formatter="formatAmount" />
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import { batchGetFutureKline } from '@/api/future'
+
+const loading = ref(false)
+const codeInput = ref('IF2401.CFE\nIC2401.CFE')
+const activeCode = ref('')
+const resultData = ref<Record<string, any[]>>({})
+
+const hasData = computed(() => Object.keys(resultData.value).length > 0)
+
+const queryForm = reactive({
+  startDate: getDefaultStartDate(),
+  endDate: getDefaultEndDate(),
+  period: 'daily'
+})
+
+function getDefaultStartDate() {
+  const date = new Date()
+  date.setMonth(date.getMonth() - 3)
+  return formatDate(date)
+}
+
+function getDefaultEndDate() {
+  return formatDate(new Date())
+}
+
+function formatDate(date: Date) {
+  return date.toISOString().slice(0, 10).replace(/-/g, '')
+}
+
+function formatNumber(row: any, column: any, value: number) {
+  return value?.toFixed(2) || '-'
+}
+
+function formatAmount(row: any, column: any, value: number) {
+  if (!value) return '-'
+  return (value / 10000).toFixed(2) + '万'
+}
+
+const parseCodes = () => {
+  return codeInput.value
+    .split(/[\n,，]/)
+    .map(c => c.trim())
+    .filter(c => c.length > 0)
+}
+
+const handleQuery = async () => {
+  const codes = parseCodes()
+  if (codes.length === 0) {
+    ElMessage.warning('请输入期货代码')
+    return
+  }
+  
+  loading.value = true
+  try {
+    const res: any = await batchGetFutureKline({
+      codes,
+      start_date: queryForm.startDate,
+      end_date: queryForm.endDate,
+      period: queryForm.period
+    })
+    
+    if (res.data) {
+      resultData.value = res.data
+      activeCode.value = codes[0]
+    }
+  } catch (error) {
+    console.error(error)
+    ElMessage.error('查询失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleExport = () => {
+  let csv = '代码,日期,开盘,最高,最低,收盘,成交量,成交额\n'
+  
+  for (const [code, data] of Object.entries(resultData.value)) {
+    for (const item of data) {
+      csv += `${code},${item.trade_date || item.trade_datetime},${item.open},${item.high},${item.low},${item.close},${item.volume},${item.amount}\n`
+    }
+  }
+  
+  const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' })
+  const link = document.createElement('a')
+  link.href = URL.createObjectURL(blob)
+  link.download = `future_kline_${new Date().toISOString().slice(0, 10)}.csv`
+  link.click()
+  
+  ElMessage.success('导出成功')
+}
+</script>
+
+<style scoped>
+.future-batch-query {
+  padding: 10px;
+}
+
+.result-card {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/DataQuery/FutureKlineQuery.vue b/frontend/src/views/DataQuery/FutureKlineQuery.vue
new file mode 100644
index 0000000..d948b93
--- /dev/null
+++ b/frontend/src/views/DataQuery/FutureKlineQuery.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="future-kline-query">
+    <el-card>
+      <el-form :model="queryForm" inline>
+        <el-form-item label="期货代码">
+          <el-input v-model="queryForm.code" placeholder="如: IF2401.CFE, IC2401.CFE" style="width: 150px;" />
+        </el-form-item>
+        <el-form-item label="开始日期">
+          <el-date-picker
+            v-model="queryForm.startDate"
+            type="date"
+            placeholder="开始日期"
+            value-format="YYYYMMDD"
+            style="width: 140px;"
+          />
+        </el-form-item>
+        <el-form-item label="结束日期">
+          <el-date-picker
+            v-model="queryForm.endDate"
+            type="date"
+            placeholder="结束日期"
+            value-format="YYYYMMDD"
+            style="width: 140px;"
+          />
+        </el-form-item>
+        <el-form-item label="周期">
+          <el-select v-model="queryForm.period" style="width: 100px;">
+            <el-option label="日线" value="daily" />
+            <el-option label="1分钟" value="min1" />
+            <el-option label="5分钟" value="min5" />
+            <el-option label="15分钟" value="min15" />
+            <el-option label="30分钟" value="min30" />
+            <el-option label="60分钟" value="min60" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery" :loading="loading">
+            <el-icon><Search /></el-icon> 查询
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    
+    <el-card class="chart-card" v-if="chartData.categoryData.length > 0">
+      <template #header>
+        <span>期货K线图 - {{ queryForm.code }}</span>
+      </template>
+      <div ref="chartRef" class="kline-chart"></div>
+    </el-card>
+    
+    <el-card class="data-card" v-if="tableData.length > 0">
+      <template #header>
+        <span>数据列表</span>
+      </template>
+      <el-table :data="tableData" stripe height="300">
+        <el-table-column prop="date" label="日期" width="120" />
+        <el-table-column prop="open" label="开盘" :formatter="formatNumber" />
+        <el-table-column prop="high" label="最高" :formatter="formatNumber" />
+        <el-table-column prop="low" label="最低" :formatter="formatNumber" />
+        <el-table-column prop="close" label="收盘" :formatter="formatNumber" />
+        <el-table-column prop="volume" label="成交量" :formatter="formatVolume" />
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+import * as echarts from 'echarts'
+import { getFutureKlineChart } from '@/api/future'
+
+const loading = ref(false)
+const chartRef = ref<HTMLElement>()
+let chartInstance: echarts.ECharts | null = null
+
+const queryForm = reactive({
+  code: 'IF2401.CFE',
+  startDate: getDefaultStartDate(),
+  endDate: getDefaultEndDate(),
+  period: 'daily'
+})
+
+const chartData = reactive({
+  categoryData: [] as string[],
+  values: [] as number[][],
+  volumes: [] as number[][]
+})
+
+const tableData = ref<any[]>([])
+
+function getDefaultStartDate() {
+  const date = new Date()
+  date.setMonth(date.getMonth() - 3)
+  return formatDate(date)
+}
+
+function getDefaultEndDate() {
+  return formatDate(new Date())
+}
+
+function formatDate(date: Date) {
+  return date.toISOString().slice(0, 10).replace(/-/g, '')
+}
+
+function formatNumber(row: any, column: any, value: number) {
+  return value?.toFixed(2) || '-'
+}
+
+function formatVolume(row: any, column: any, value: number) {
+  if (!value) return '-'
+  if (value >= 10000) {
+    return (value / 10000).toFixed(2) + '万'
+  }
+  return value.toString()
+}
+
+const handleQuery = async () => {
+  if (!queryForm.code) {
+    ElMessage.warning('请输入期货代码')
+    return
+  }
+  
+  loading.value = true
+  try {
+    const res: any = await getFutureKlineChart(queryForm.code, {
+      start_date: queryForm.startDate,
+      end_date: queryForm.endDate,
+      period: queryForm.period
+    })
+    
+    if (res.data) {
+      chartData.categoryData = res.data.categoryData || []
+      chartData.values = res.data.values || []
+      chartData.volumes = res.data.volumes || []
+      
+      tableData.value = chartData.categoryData.map((date, index) => ({
+        date,
+        open: chartData.values[index]?.[0],
+        close: chartData.values[index]?.[1],
+        low: chartData.values[index]?.[2],
+        high: chartData.values[index]?.[3],
+        volume: chartData.values[index]?.[4]
+      })).reverse()
+      
+      nextTick(() => {
+        renderChart()
+      })
+    }
+  } catch (error) {
+    console.error(error)
+    ElMessage.error('查询失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const renderChart = () => {
+  if (!chartRef.value) return
+  
+  if (chartInstance) {
+    chartInstance.dispose()
+  }
+  
+  chartInstance = echarts.init(chartRef.value)
+  
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'cross' }
+    },
+    grid: [
+      { left: '10%', right: '8%', height: '50%' },
+      { left: '10%', right: '8%', top: '68%', height: '16%' }
+    ],
+    xAxis: [
+      {
+        type: 'category',
+        data: chartData.categoryData,
+        scale: true,
+        boundaryGap: false,
+        axisLine: { onZero: false },
+        splitLine: { show: false },
+        min: 'dataMin',
+        max: 'dataMax'
+      },
+      {
+        type: 'category',
+        gridIndex: 1,
+        data: chartData.categoryData,
+        scale: true,
+        boundaryGap: false,
+        axisLine: { onZero: false },
+        axisTick: { show: false },
+        splitLine: { show: false },
+        axisLabel: { show: false },
+        min: 'dataMin',
+        max: 'dataMax'
+      }
+    ],
+    yAxis: [
+      {
+        scale: true,
+        splitArea: { show: true }
+      },
+      {
+        scale: true,
+        gridIndex: 1,
+        splitNumber: 2,
+        axisLabel: { show: false },
+        axisLine: { show: false },
+        axisTick: { show: false },
+        splitLine: { show: false }
+      }
+    ],
+    dataZoom: [
+      { type: 'inside', xAxisIndex: [0, 1], start: 50, end: 100 },
+      { show: true, xAxisIndex: [0, 1], type: 'slider', top: '85%', start: 50, end: 100 }
+    ],
+    series: [
+      {
+        name: 'K线',
+        type: 'candlestick',
+        data: chartData.values,
+        itemStyle: {
+          color: '#ef232a',
+          color0: '#14b143',
+          borderColor: '#ef232a',
+          borderColor0: '#14b143'
+        }
+      },
+      {
+        name: '成交量',
+        type: 'bar',
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        data: chartData.volumes
+      }
+    ]
+  }
+  
+  chartInstance.setOption(option)
+}
+
+window.addEventListener('resize', () => {
+  chartInstance?.resize()
+})
+</script>
+
+<style scoped>
+.future-kline-query {
+  padding: 10px;
+}
+
+.chart-card {
+  margin-top: 20px;
+}
+
+.kline-chart {
+  width: 100%;
+  height: 400px;
+}
+
+.data-card {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/DataQuery/StockBatchQuery.vue b/frontend/src/views/DataQuery/StockBatchQuery.vue
new file mode 100644
index 0000000..71b4e79
--- /dev/null
+++ b/frontend/src/views/DataQuery/StockBatchQuery.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="stock-batch-query">
+    <el-card>
+      <el-form :model="queryForm" label-width="80px">
+        <el-form-item label="股票代码">
+          <el-input
+            v-model="codeInput"
+            type="textarea"
+            :rows="4"
+            placeholder="输入股票代码，每行一个或逗号分隔，如：&#10;000001.SZ&#10;600000.SH"
+          />
+        </el-form-item>
+        <el-form-item label="开始日期">
+          <el-date-picker
+            v-model="queryForm.startDate"
+            type="date"
+            placeholder="开始日期"
+            value-format="YYYYMMDD"
+          />
+        </el-form-item>
+        <el-form-item label="结束日期">
+          <el-date-picker
+            v-model="queryForm.endDate"
+            type="date"
+            placeholder="结束日期"
+            value-format="YYYYMMDD"
+          />
+        </el-form-item>
+        <el-form-item label="周期">
+          <el-select v-model="queryForm.period" style="width: 120px;">
+            <el-option label="日线" value="daily" />
+            <el-option label="1分钟" value="min1" />
+            <el-option label="5分钟" value="min5" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery" :loading="loading">
+            <el-icon><Search /></el-icon> 查询
+          </el-button>
+          <el-button @click="handleExport" :disabled="!hasData">
+            <el-icon><Download /></el-icon> 导出
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    
+    <el-card class="result-card" v-if="hasData">
+      <template #header>
+        <span>查询结果</span>
+      </template>
+      <el-tabs v-model="activeCode">
+        <el-tab-pane
+          v-for="(data, code) in resultData"
+          :key="code"
+          :label="code"
+          :name="code"
+        >
+          <el-table :data="data" stripe height="400">
+            <el-table-column prop="trade_date" label="日期" width="120" />
+            <el-table-column prop="open" label="开盘" :formatter="formatNumber" />
+            <el-table-column prop="high" label="最高" :formatter="formatNumber" />
+            <el-table-column prop="low" label="最低" :formatter="formatNumber" />
+            <el-table-column prop="close" label="收盘" :formatter="formatNumber" />
+            <el-table-column prop="volume" label="成交量" />
+            <el-table-column prop="amount" label="成交额" :formatter="formatAmount" />
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import { batchGetStockKline } from '@/api/stock'
+
+const loading = ref(false)
+const codeInput = ref('000001.SZ\n600000.SH')
+const activeCode = ref('')
+const resultData = ref<Record<string, any[]>>({})
+
+const hasData = computed(() => Object.keys(resultData.value).length > 0)
+
+const queryForm = reactive({
+  startDate: getDefaultStartDate(),
+  endDate: getDefaultEndDate(),
+  period: 'daily'
+})
+
+function getDefaultStartDate() {
+  const date = new Date()
+  date.setMonth(date.getMonth() - 3)
+  return formatDate(date)
+}
+
+function getDefaultEndDate() {
+  return formatDate(new Date())
+}
+
+function formatDate(date: Date) {
+  return date.toISOString().slice(0, 10).replace(/-/g, '')
+}
+
+function formatNumber(row: any, column: any, value: number) {
+  return value?.toFixed(2) || '-'
+}
+
+function formatAmount(row: any, column: any, value: number) {
+  if (!value) return '-'
+  return (value / 10000).toFixed(2) + '万'
+}
+
+const parseCodes = () => {
+  return codeInput.value
+    .split(/[\n,，]/)
+    .map(c => c.trim())
+    .filter(c => c.length > 0)
+}
+
+const handleQuery = async () => {
+  const codes = parseCodes()
+  if (codes.length === 0) {
+    ElMessage.warning('请输入股票代码')
+    return
+  }
+  
+  loading.value = true
+  try {
+    const res: any = await batchGetStockKline({
+      codes,
+      start_date: queryForm.startDate,
+      end_date: queryForm.endDate,
+      period: queryForm.period
+    })
+    
+    if (res.data) {
+      resultData.value = res.data
+      activeCode.value = codes[0]
+    }
+  } catch (error) {
+    console.error(error)
+    ElMessage.error('查询失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleExport = () => {
+  let csv = '代码,日期,开盘,最高,最低,收盘,成交量,成交额\n'
+  
+  for (const [code, data] of Object.entries(resultData.value)) {
+    for (const item of data) {
+      csv += `${code},${item.trade_date || item.trade_datetime},${item.open},${item.high},${item.low},${item.close},${item.volume},${item.amount}\n`
+    }
+  }
+  
+  const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' })
+  const link = document.createElement('a')
+  link.href = URL.createObjectURL(blob)
+  link.download = `stock_kline_${new Date().toISOString().slice(0, 10)}.csv`
+  link.click()
+  
+  ElMessage.success('导出成功')
+}
+</script>
+
+<style scoped>
+.stock-batch-query {
+  padding: 10px;
+}
+
+.result-card {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/DataQuery/StockKlineQuery.vue b/frontend/src/views/DataQuery/StockKlineQuery.vue
new file mode 100644
index 0000000..3249231
--- /dev/null
+++ b/frontend/src/views/DataQuery/StockKlineQuery.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="stock-kline-query">
+    <el-card>
+      <el-form :model="queryForm" inline>
+        <el-form-item label="股票代码">
+          <el-input v-model="queryForm.code" placeholder="如: 600000.SH, 000001.SZ" style="width: 150px;" />
+        </el-form-item>
+        <el-form-item label="开始日期">
+          <el-date-picker
+            v-model="queryForm.startDate"
+            type="date"
+            placeholder="开始日期"
+            value-format="YYYYMMDD"
+            style="width: 140px;"
+          />
+        </el-form-item>
+        <el-form-item label="结束日期">
+          <el-date-picker
+            v-model="queryForm.endDate"
+            type="date"
+            placeholder="结束日期"
+            value-format="YYYYMMDD"
+            style="width: 140px;"
+          />
+        </el-form-item>
+        <el-form-item label="周期">
+          <el-select v-model="queryForm.period" style="width: 100px;">
+            <el-option label="日线" value="daily" />
+            <el-option label="1分钟" value="min1" />
+            <el-option label="5分钟" value="min5" />
+            <el-option label="15分钟" value="min15" />
+            <el-option label="30分钟" value="min30" />
+            <el-option label="60分钟" value="min60" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery" :loading="loading">
+            <el-icon><Search /></el-icon> 查询
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    
+    <el-card class="chart-card" v-if="chartData.categoryData.length > 0">
+      <template #header>
+        <span>股票K线图 - {{ queryForm.code }}</span>
+      </template>
+      <div ref="chartRef" class="kline-chart"></div>
+    </el-card>
+    
+    <el-card class="data-card" v-if="tableData.length > 0">
+      <template #header>
+        <span>数据列表</span>
+      </template>
+      <el-table :data="tableData" stripe height="300">
+        <el-table-column prop="date" label="日期" width="120" />
+        <el-table-column prop="open" label="开盘" :formatter="formatNumber" />
+        <el-table-column prop="high" label="最高" :formatter="formatNumber" />
+        <el-table-column prop="low" label="最低" :formatter="formatNumber" />
+        <el-table-column prop="close" label="收盘" :formatter="formatNumber" />
+        <el-table-column prop="volume" label="成交量" :formatter="formatVolume" />
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+import * as echarts from 'echarts'
+import { getStockKlineChart } from '@/api/stock'
+
+const loading = ref(false)
+const chartRef = ref<HTMLElement>()
+let chartInstance: echarts.ECharts | null = null
+
+const queryForm = reactive({
+  code: '600000.SH',
+  startDate: getDefaultStartDate(),
+  endDate: getDefaultEndDate(),
+  period: 'daily'
+})
+
+const chartData = reactive({
+  categoryData: [] as string[],
+  values: [] as number[][],
+  volumes: [] as number[][]
+})
+
+const tableData = ref<any[]>([])
+
+function getDefaultStartDate() {
+  const date = new Date()
+  date.setFullYear(date.getFullYear() - 1)
+  return formatDate(date)
+}
+
+function getDefaultEndDate() {
+  return formatDate(new Date())
+}
+
+function formatDate(date: Date) {
+  return date.toISOString().slice(0, 10).replace(/-/g, '')
+}
+
+function formatNumber(row: any, column: any, value: number) {
+  return value?.toFixed(2) || '-'
+}
+
+function formatVolume(row: any, column: any, value: number) {
+  if (!value) return '-'
+  if (value >= 100000000) {
+    return (value / 100000000).toFixed(2) + '亿'
+  }
+  if (value >= 10000) {
+    return (value / 10000).toFixed(2) + '万'
+  }
+  return value.toString()
+}
+
+const handleQuery = async () => {
+  if (!queryForm.code) {
+    ElMessage.warning('请输入股票代码')
+    return
+  }
+  
+  loading.value = true
+  try {
+    const res: any = await getStockKlineChart(queryForm.code, {
+      start_date: queryForm.startDate,
+      end_date: queryForm.endDate,
+      period: queryForm.period
+    })
+    
+    if (res.data) {
+      chartData.categoryData = res.data.categoryData || []
+      chartData.values = res.data.values || []
+      chartData.volumes = res.data.volumes || []
+      
+      tableData.value = chartData.categoryData.map((date, index) => ({
+        date,
+        open: chartData.values[index]?.[0],
+        close: chartData.values[index]?.[1],
+        low: chartData.values[index]?.[2],
+        high: chartData.values[index]?.[3],
+        volume: chartData.values[index]?.[4]
+      })).reverse()
+      
+      nextTick(() => {
+        renderChart()
+      })
+    }
+  } catch (error) {
+    console.error(error)
+    ElMessage.error('查询失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const renderChart = () => {
+  if (!chartRef.value) return
+  
+  if (chartInstance) {
+    chartInstance.dispose()
+  }
+  
+  chartInstance = echarts.init(chartRef.value)
+  
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'cross' }
+    },
+    grid: [
+      { left: '10%', right: '8%', height: '50%' },
+      { left: '10%', right: '8%', top: '68%', height: '16%' }
+    ],
+    xAxis: [
+      {
+        type: 'category',
+        data: chartData.categoryData,
+        scale: true,
+        boundaryGap: false,
+        axisLine: { onZero: false },
+        splitLine: { show: false },
+        min: 'dataMin',
+        max: 'dataMax'
+      },
+      {
+        type: 'category',
+        gridIndex: 1,
+        data: chartData.categoryData,
+        scale: true,
+        boundaryGap: false,
+        axisLine: { onZero: false },
+        axisTick: { show: false },
+        splitLine: { show: false },
+        axisLabel: { show: false },
+        min: 'dataMin',
+        max: 'dataMax'
+      }
+    ],
+    yAxis: [
+      {
+        scale: true,
+        splitArea: { show: true }
+      },
+      {
+        scale: true,
+        gridIndex: 1,
+        splitNumber: 2,
+        axisLabel: { show: false },
+        axisLine: { show: false },
+        axisTick: { show: false },
+        splitLine: { show: false }
+      }
+    ],
+    dataZoom: [
+      { type: 'inside', xAxisIndex: [0, 1], start: 50, end: 100 },
+      { show: true, xAxisIndex: [0, 1], type: 'slider', top: '85%', start: 50, end: 100 }
+    ],
+    series: [
+      {
+        name: 'K线',
+        type: 'candlestick',
+        data: chartData.values,
+        itemStyle: {
+          color: '#ef232a',
+          color0: '#14b143',
+          borderColor: '#ef232a',
+          borderColor0: '#14b143'
+        }
+      },
+      {
+        name: '成交量',
+        type: 'bar',
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        data: chartData.volumes
+      }
+    ]
+  }
+  
+  chartInstance.setOption(option)
+}
+
+window.addEventListener('resize', () => {
+  chartInstance?.resize()
+})
+</script>
+
+<style scoped>
+.stock-kline-query {
+  padding: 10px;
+}
+
+.chart-card {
+  margin-top: 20px;
+}
+
+.kline-chart {
+  width: 100%;
+  height: 400px;
+}
+
+.data-card {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/DataQuery/index.vue b/frontend/src/views/DataQuery/index.vue
index cbb1a07..17ac01a 100644
--- a/frontend/src/views/DataQuery/index.vue
+++ b/frontend/src/views/DataQuery/index.vue
@@ -1,11 +1,25 @@
 <template>
   <div class="data-query">
     <el-tabs v-model="activeTab">
-      <el-tab-pane label="K线图查询" name="kline">
-        <KlineQuery />
+      <el-tab-pane label="股票数据查询" name="stock">
+        <el-tabs v-model="stockSubTab">
+          <el-tab-pane label="K线图查询" name="kline">
+            <StockKlineQuery />
+          </el-tab-pane>
+          <el-tab-pane label="批量数据查询" name="batch">
+            <StockBatchQuery />
+          </el-tab-pane>
+        </el-tabs>
       </el-tab-pane>
-      <el-tab-pane label="批量数据查询" name="batch">
-        <BatchQuery />
+      <el-tab-pane label="期货数据查询" name="future">
+        <el-tabs v-model="futureSubTab">
+          <el-tab-pane label="K线图查询" name="kline">
+            <FutureKlineQuery />
+          </el-tab-pane>
+          <el-tab-pane label="批量数据查询" name="batch">
+            <FutureBatchQuery />
+          </el-tab-pane>
+        </el-tabs>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -13,14 +27,18 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import KlineQuery from './KlineQuery.vue'
-import BatchQuery from './BatchQuery.vue'
+import StockKlineQuery from './StockKlineQuery.vue'
+import StockBatchQuery from './StockBatchQuery.vue'
+import FutureKlineQuery from './FutureKlineQuery.vue'
+import FutureBatchQuery from './FutureBatchQuery.vue'
 
-const activeTab = ref('kline')
+const activeTab = ref('stock')
+const stockSubTab = ref('kline')
+const futureSubTab = ref('kline')
 </script>
 
 <style scoped>
 .data-query {
   padding: 20px;
 }
-</style>
+</style>
\ No newline at end of file