feat: 完善 QMT 交易模块文档和配置展示功能
- 优化前端仪表盘界面 - 添加配置文件可视化展示 - 编写 QMT 模块配置文档 - 完善项目规则体系（KiloCode）
This commit is contained in:
@@ -5,233 +5,374 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>QMT 多终端监控看板</title>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
|
||||
<script src="https://unpkg.com/element-plus"></script>
|
||||
<script src="https://unpkg.com/@element-plus/icons-vue"></script>
|
||||
<script src="https://unpkg.com/naive-ui"></script>
|
||||
<style>
|
||||
body { background-color: #f0f2f5; margin: 0; padding: 20px; font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', sans-serif; }
|
||||
.card-header { display: flex; justify-content: space-between; align-items: center; }
|
||||
.box-card { margin-bottom: 20px; }
|
||||
.log-box {
|
||||
background: #1e1e1e; color: #d4d4d4; padding: 10px; border-radius: 4px;
|
||||
height: 350px; overflow-y: scroll; font-family: 'Consolas', monospace;
|
||||
font-size: 12px; line-height: 1.5;
|
||||
}
|
||||
.log-line { margin: 0; border-bottom: 1px solid #333; white-space: pre-wrap; word-break: break-all; }
|
||||
.terminal-group { margin-bottom: 15px; border: 1px solid #ebeef5; border-radius: 8px; padding: 10px; background: #fff; }
|
||||
.terminal-title { font-weight: bold; font-size: 14px; margin-bottom: 8px; color: #409EFF; display: flex; align-items: center; }
|
||||
.status-badge { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
|
||||
.bg-green { background-color: #67C23A; }
|
||||
.bg-red { background-color: #F56C6C; }
|
||||
.bg-gray { background-color: #909399; }
|
||||
.virtual-item { margin-bottom: 15px; border-left: 4px solid #E6A23C; padding-left: 10px; }
|
||||
body { margin: 0; min-height: 100vh; background: #f5f7fa; }
|
||||
.app-container { padding: 20px; max-width: 1400px; margin: 0 auto; }
|
||||
.log-box { height: 300px; overflow-y: auto; font-family: 'Consolas', 'Monaco', monospace; font-size: 12px; background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; }
|
||||
.log-line { padding: 4px 8px; margin: 2px 0; border-radius: 4px; white-space: pre-wrap; }
|
||||
.log-error { color: #cf1322; background: rgba(207, 34, 34, 0.08); border-left: 3px solid #cf1322; }
|
||||
.log-warning { color: #d46b08; background: rgba(212, 107, 8, 0.08); border-left: 3px solid #d46b08; }
|
||||
.log-success { color: #389e0d; background: rgba(56, 158, 13, 0.08); border-left: 3px solid #389e0d; }
|
||||
.log-info { color: #096dd9; background: rgba(9, 109, 217, 0.08); border-left: 3px solid #096dd9; }
|
||||
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; }
|
||||
.status-connected { background: #52c41a; box-shadow: 0 0 8px rgba(82, 196, 26, 0.4); }
|
||||
.status-disconnected { background: #ff4d4f; }
|
||||
.status-connecting { background: #faad14; animation: pulse 1s infinite; }
|
||||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
||||
.footer { text-align: center; padding: 20px; color: #8c8c8c; font-size: 12px; }
|
||||
.config-section { margin-bottom: 16px; padding: 16px; background: #fafafa; border-radius: 6px; border: 1px solid #f0f0f0; }
|
||||
.config-section-title { font-size: 14px; font-weight: 600; color: #096dd9; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #e8e8e8; }
|
||||
.config-item { display: flex; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed #f0f0f0; }
|
||||
.config-item:last-child { border-bottom: none; }
|
||||
.config-key { color: #666; width: 140px; flex-shrink: 0; }
|
||||
.config-value { color: #333; flex: 1; word-break: break-all; }
|
||||
.config-json { background: #fafafa; padding: 12px; border-radius: 6px; border: 1px solid #e8e8e8; font-family: 'Consolas', 'Monaco', monospace; font-size: 12px; line-height: 1.6; max-height: 400px; overflow-y: auto; white-space: pre-wrap; color: #333; }
|
||||
.terminal-badge { display: inline-block; padding: 2px 8px; background: #e6f7ff; color: #096dd9; border: 1px solid #91d5ff; border-radius: 4px; font-size: 12px; margin-right: 8px; }
|
||||
.strategy-badge { display: inline-block; padding: 2px 8px; background: #f9f0ff; color: #722ed1; border: 1px solid #d3adf7; border-radius: 4px; font-size: 12px; margin-right: 8px; }
|
||||
.stat-card-green { background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%); color: #389e0d; border: 1px solid #b7eb8f; }
|
||||
.stat-card-blue { background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%); color: #096dd9; border: 1px solid #91d5ff; }
|
||||
.stat-card-purple { background: linear-gradient(135deg, #f9f0ff 0%, #efdbff 100%); color: #722ed1; border: 1px solid #d3adf7; }
|
||||
.stat-card-orange { background: linear-gradient(135deg, #fff7e6 0%, #ffd591 100%); color: #d46b08; border: 1px solid #ffe7ba; }
|
||||
.title-bar { background: #fff; padding: 16px 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); display: flex; justify-content: space-between; align-items: center; }
|
||||
.title-text { font-size: 20px; font-weight: 600; color: #1a1a1a; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<el-container>
|
||||
<el-header height="auto" style="padding: 0;">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div style="display:flex; align-items:center;">
|
||||
<el-icon size="24" style="margin-right: 10px;"><Monitor /></el-icon>
|
||||
<span style="font-weight: bold; font-size: 20px;">QMT 多账号实盘守护系统</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-tag :type="status.running ? 'success' : 'info'" effect="dark" style="margin-right: 10px;">
|
||||
系统: {{ status.running ? '运行中' : '离线' }}
|
||||
</el-tag>
|
||||
<el-button type="primary" :icon="Refresh" @click="manualRefresh" :loading="loading">手动刷新</el-button>
|
||||
<div id="app" class="app-container">
|
||||
<n-config-provider :theme="darkTheme">
|
||||
<n-message-provider>
|
||||
<n-notification-provider>
|
||||
<n-dialog-provider>
|
||||
<!-- 顶部状态栏 -->
|
||||
<div class="title-bar">
|
||||
<span class="title-text">QMT 多账号实盘守护系统</span>
|
||||
<div style="display: flex; align-items: center; gap: 12px;">
|
||||
<n-tag :type="connectionStatusType">{{ connectionStatusText }}</n-tag>
|
||||
<n-button type="info" @click="showConfigModal = true" size="small">查看配置</n-button>
|
||||
<n-button type="warning" @click="manualReconnect" :loading="reconnecting" size="small">重连</n-button>
|
||||
<n-button type="primary" @click="manualRefresh" :loading="loading" size="small">刷新</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 终端状态概览 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" v-for="t in status.terminals" :key="t.qmt_id">
|
||||
<el-card shadow="never" style="background: #fcfcfc;">
|
||||
<div style="font-size: 14px; font-weight: bold; margin-bottom: 5px;">{{ t.alias }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">ID: {{ t.account_id }}</div>
|
||||
<div style="margin-top: 8px; display: flex; align-items: center; justify-content: space-between;">
|
||||
<el-tag :type="t.is_connected ? 'success' : 'danger'" size="small">
|
||||
{{ t.is_connected ? '已连接' : '已断开' }}
|
||||
</el-tag>
|
||||
<span style="font-size: 11px; color: #c0c4cc;">{{ t.last_heartbeat }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div style="padding: 10px;">
|
||||
<div style="font-size: 12px; color: #909399;">启动时间: {{ status.start_time }}</div>
|
||||
<div style="margin-top: 10px;">
|
||||
<el-checkbox v-model="autoRefresh" label="自动刷新 (1min)" border size="small"></el-checkbox>
|
||||
<span style="font-size: 12px; margin-left: 8px; color: #E6A23C;">{{ tradingStatusText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-header>
|
||||
<n-card style="margin-bottom: 20px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);">
|
||||
<n-grid :cols="4" :x-gap="12">
|
||||
<n-gi v-for="t in status.terminals" :key="t.qmt_id">
|
||||
<n-card size="small" :bordered="false">
|
||||
<n-descriptions :column="1" size="small">
|
||||
<n-descriptions-item :label="t.alias">
|
||||
<span :class="['status-dot', t.is_connected ? 'status-connected' : 'status-disconnected']"></span>
|
||||
{{ t.is_connected ? '已连接' : '已断开' }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="账户">{{ t.account_id }}</n-descriptions-item>
|
||||
<n-descriptions-item label="心跳">{{ t.last_heartbeat }}</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</n-card>
|
||||
|
||||
<el-main style="padding: 0;">
|
||||
<el-row :gutter="20">
|
||||
<!-- 左侧：多账号实盘持仓 -->
|
||||
<el-col :span="13">
|
||||
<el-card class="box-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span><el-icon><Suitcase /></el-icon> 实盘真实持仓 (按终端分组)</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="Object.keys(positions.real_positions).length === 0" style="text-align:center; padding:20px; color:#909399;">暂无持仓数据</div>
|
||||
|
||||
<div v-for="(posList, qmtId) in positions.real_positions" :key="qmtId" class="terminal-group">
|
||||
<div class="terminal-title">
|
||||
<span class="status-badge" :class="getTerminalStatusClass(qmtId)"></span>
|
||||
{{ getTerminalAlias(qmtId) }}
|
||||
</div>
|
||||
<el-table :data="posList" style="width: 100%" border size="small" empty-text="当前空仓">
|
||||
<el-table-column prop="code" label="代码" width="100"></el-table-column>
|
||||
<el-table-column prop="volume" label="持仓" width="90"></el-table-column>
|
||||
<el-table-column prop="can_use" label="可用" width="90"></el-table-column>
|
||||
<el-table-column prop="market_value" label="市值"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- 持仓汇总 -->
|
||||
<n-grid :cols="4" :x-gap="12" style="margin-bottom: 20px;">
|
||||
<n-gi>
|
||||
<n-card size="small" class="stat-card-green" style="border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);">
|
||||
<n-statistic label="持仓品种" :value="totalPositions" value-style="color: #389e0d; font-size: 24px; font-weight: 600;" label-style="color: #666; font-size: 13px;" />
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-card size="small" class="stat-card-blue" style="border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);">
|
||||
<n-statistic label="总持仓" :value="formatNumber(totalVolume)" value-style="color: #096dd9; font-size: 24px; font-weight: 600;" label-style="color: #666; font-size: 13px;" />
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-card size="small" class="stat-card-purple" style="border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);">
|
||||
<n-statistic label="总市值" :value="'¥' + formatNumber(totalMarketValue)" value-style="color: #722ed1; font-size: 24px; font-weight: 600;" label-style="color: #666; font-size: 13px;" />
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-card size="small" class="stat-card-orange" style="border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);">
|
||||
<n-statistic label="策略数" :value="Object.keys(positions.virtual_positions).length" value-style="color: #d46b08; font-size: 24px; font-weight: 600;" label-style="color: #666; font-size: 13px;" />
|
||||
</n-card>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<!-- 右侧：Redis 虚拟账本 -->
|
||||
<el-col :span="11">
|
||||
<el-card class="box-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span><el-icon><Memo /></el-icon> Redis 虚拟账本 (策略隔离)</span>
|
||||
</div>
|
||||
</template>
|
||||
<div v-for="(posObj, strategyName) in positions.virtual_positions" :key="strategyName" class="virtual-item">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:5px;">
|
||||
<span style="font-weight:bold; font-size:13px; color:#606266;">{{ strategyName }}</span>
|
||||
<el-tag size="small" type="warning">虚拟占位: {{ Object.keys(posObj).length }}</el-tag>
|
||||
</div>
|
||||
<el-table :data="formatVirtual(posObj)" style="width: 100%;" border size="small">
|
||||
<el-table-column prop="code" label="股票代码"></el-table-column>
|
||||
<el-table-column prop="vol" label="记账数量"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 主体区域 -->
|
||||
<n-grid :cols="2" :x-gap="20">
|
||||
<!-- 真实持仓 -->
|
||||
<n-gi>
|
||||
<n-card title="实盘真实持仓 (按终端分组)" style="border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);">
|
||||
<template #header-extra>
|
||||
<n-tag type="info">{{ Object.keys(positions.real_positions).length }} 终端</n-tag>
|
||||
</template>
|
||||
<div v-for="(posList, qmtId) in positions.real_positions" :key="qmtId" style="margin-bottom: 16px;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 8px;">
|
||||
<span :class="['status-dot', getTerminalStatusClass(qmtId)]"></span>
|
||||
<strong>{{ getTerminalAlias(qmtId) }}</strong>
|
||||
<n-tag size="small" style="margin-left: 8px;">{{ posList.length }} 只</n-tag>
|
||||
</div>
|
||||
<n-data-table :columns="realPosColumns" :data="posList" size="small" :bordered="false" :single-line="false" />
|
||||
</div>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
|
||||
<!-- 底部：日志 -->
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header"><span>系统实时日志 (最新 50 条)</span></div>
|
||||
<!-- 虚拟账本 -->
|
||||
<n-gi>
|
||||
<n-card title="Redis 虚拟账本 (策略隔离)" style="border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);">
|
||||
<template #header-extra>
|
||||
<n-tag type="warning">{{ Object.keys(positions.virtual_positions).length }} 策略</n-tag>
|
||||
</template>
|
||||
<div v-for="(posObj, strategyName) in positions.virtual_positions" :key="strategyName" style="margin-bottom: 12px;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
||||
<strong>{{ strategyName }}</strong>
|
||||
<n-tag size="small" type="warning">{{ Object.keys(posObj).length }} 只</n-tag>
|
||||
</div>
|
||||
<n-data-table :columns="virtualPosColumns" :data="formatVirtual(posObj)" size="small" :bordered="false" :single-line="false" />
|
||||
</div>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<!-- 日志 -->
|
||||
<n-card title="系统日志" style="margin-top: 20px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);">
|
||||
<template #header-extra>
|
||||
<span style="color: #8c8c8c;">{{ logs.length }} 条</span>
|
||||
</template>
|
||||
<div class="log-box" ref="logBox">
|
||||
<div v-for="(line, index) in logs" :key="index" class="log-line">{{ line }}</div>
|
||||
<div v-for="(line, index) in logs" :key="index" class="log-line" :class="getLogClass(line)">
|
||||
{{ formatLogTime(line) }} {{ line }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</n-card>
|
||||
|
||||
<div class="footer">最后更新: {{ lastUpdateTime }}</div>
|
||||
|
||||
<!-- 配置查看模态框 -->
|
||||
<n-modal v-model:show="showConfigModal" preset="card" title="配置文件内容" style="width: 700px; max-width: 90vw;" :mask-closable="false" :bordered="false">
|
||||
<template #header-extra>
|
||||
<n-button type="primary" size="small" @click="copyConfig">复制配置</n-button>
|
||||
</template>
|
||||
<n-tabs type="card" animated>
|
||||
<n-tab-pane name="redis" tab="Redis 配置">
|
||||
<div class="config-section" v-if="fileConfig.redis && Object.keys(fileConfig.redis).length > 0">
|
||||
<div v-for="(value, key) in fileConfig.redis" :key="key" class="config-item">
|
||||
<span class="config-key">{{ key }}:</span>
|
||||
<span class="config-value">{{ value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<n-empty v-else description="暂无 Redis 配置" />
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="terminals" tab="QMT 终端">
|
||||
<div v-for="(terminal, idx) in fileConfig.qmt_terminals" :key="idx" class="config-section">
|
||||
<div class="config-section-title">
|
||||
<span class="terminal-badge">终端 {{ idx + 1 }}</span>
|
||||
{{ terminal.alias || terminal.qmt_id }}
|
||||
</div>
|
||||
<div v-for="(value, key) in terminal" :key="key" class="config-item">
|
||||
<span class="config-key">{{ key }}:</span>
|
||||
<span class="config-value">{{ value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<n-empty v-if="!fileConfig.qmt_terminals || fileConfig.qmt_terminals.length === 0" description="暂无终端配置" />
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="strategies" tab="策略配置">
|
||||
<div v-for="(strategy, name) in fileConfig.strategies" :key="name" class="config-section">
|
||||
<div class="config-section-title">
|
||||
<span class="strategy-badge">{{ name }}</span>
|
||||
终端: {{ strategy.qmt_id }}
|
||||
</div>
|
||||
<div v-for="(value, key) in strategy" :key="key" class="config-item">
|
||||
<template v-if="key !== 'execution'">
|
||||
<span class="config-key">{{ key }}:</span>
|
||||
<span class="config-value">{{ value }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="margin-left: 140px; margin-top: 8px;">
|
||||
<div style="color: #8c8c8c; font-size: 12px; margin-bottom: 4px;">execution:</div>
|
||||
<div v-for="(execVal, execKey) in value" :key="execKey" class="config-item" style="margin-left: 20px;">
|
||||
<span class="config-key">{{ execKey }}:</span>
|
||||
<span class="config-value">{{ execVal }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<n-empty v-if="!fileConfig.strategies || Object.keys(fileConfig.strategies).length === 0" description="暂无策略配置" />
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="json" tab="JSON 源码">
|
||||
<div class="config-json">{{ fileConfig.raw_config || '暂无配置内容' }}</div>
|
||||
<div v-if="fileConfig.config_path" style="margin-top: 8px; font-size: 12px; color: #8c8c8c;">
|
||||
配置文件路径: {{ fileConfig.config_path }}
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-modal>
|
||||
</n-dialog-provider>
|
||||
</n-notification-provider>
|
||||
</n-message-provider>
|
||||
</n-config-provider>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp, ref, onMounted, onUnmounted, computed } = Vue;
|
||||
const { Monitor, Refresh, Suitcase, Memo } = ElementPlusIconsVue;
|
||||
const { createApp, ref, onMounted, onUnmounted, computed, watch } = Vue;
|
||||
const { NCard, NButton, NTag, NGrid, NGi, NDescriptions, NDescriptionsItem, NDataTable, NStatistic, NConfigProvider, NMessageProvider, NNotificationProvider, NDialogProvider, NModal, NTabs, NTabPane, NEmpty } = naive;
|
||||
|
||||
const app = createApp({
|
||||
setup() {
|
||||
const status = ref({ running: false, terminals: [], start_time: "" });
|
||||
const status = ref({ terminals: [] });
|
||||
const positions = ref({ real_positions: {}, virtual_positions: {} });
|
||||
const logs = ref([]);
|
||||
const autoRefresh = ref(true);
|
||||
const loading = ref(false);
|
||||
const reconnecting = ref(false);
|
||||
const logBox = ref(null);
|
||||
let timer = null;
|
||||
const lastUpdateTime = ref("");
|
||||
const API_BASE = "";
|
||||
|
||||
const API_BASE = "";
|
||||
// 配置相关
|
||||
const showConfigModal = ref(false);
|
||||
const fileConfig = ref({ redis: {}, qmt_terminals: [], strategies: {}, raw_config: "", config_path: "" });
|
||||
const configLoading = ref(false);
|
||||
|
||||
const isTradingTime = () => {
|
||||
const now = new Date();
|
||||
const day = now.getDay();
|
||||
if (day === 0 || day === 6) return false;
|
||||
const val = now.getHours() * 100 + now.getMinutes();
|
||||
return (val >= 900 && val <= 1515);
|
||||
};
|
||||
// 表格列（使用简单 render，不依赖 h 函数）
|
||||
const realPosColumns = [
|
||||
{ title: '代码', key: 'code', ellipsis: { tooltip: true } },
|
||||
{ title: '持仓', key: 'volume', render: (row) => row.volume.toLocaleString() },
|
||||
{ title: '可用', key: 'can_use', render: (row) => row.can_use.toLocaleString() },
|
||||
{ title: '市值', key: 'market_value', render: (row) => '¥' + row.market_value.toLocaleString() }
|
||||
];
|
||||
|
||||
const tradingStatusText = computed(() => {
|
||||
return isTradingTime() ? "市场开放中" : "非交易时段";
|
||||
const virtualPosColumns = [
|
||||
{ title: '代码', key: 'code', ellipsis: { tooltip: true } },
|
||||
{ title: '数量', key: 'vol', render: (row) => parseInt(row.vol).toLocaleString() }
|
||||
];
|
||||
|
||||
// 状态
|
||||
const connectionStatusText = computed(() => {
|
||||
if (status.value.terminals.length === 0) return '未连接';
|
||||
return status.value.terminals.every(t => t.is_connected) ? '全部在线' : '部分离线';
|
||||
});
|
||||
|
||||
const connectionStatusType = computed(() => {
|
||||
if (status.value.terminals.length === 0) return 'error';
|
||||
return status.value.terminals.every(t => t.is_connected) ? 'success' : 'warning';
|
||||
});
|
||||
|
||||
const getTerminalStatusClass = (qmtId) => {
|
||||
const t = status.value.terminals.find(x => x.qmt_id === qmtId);
|
||||
return t?.is_connected ? 'status-connected' : 'status-disconnected';
|
||||
};
|
||||
|
||||
const getTerminalAlias = (qmtId) => status.value.terminals.find(x => x.qmt_id === qmtId)?.alias || qmtId;
|
||||
|
||||
// 统计
|
||||
const totalPositions = computed(() => Object.values(positions.value.real_positions).reduce((sum, list) => sum + list.length, 0));
|
||||
const totalVolume = computed(() => Object.values(positions.value.real_positions).flat().reduce((sum, p) => sum + (p.volume || 0), 0));
|
||||
const totalMarketValue = computed(() => Object.values(positions.value.real_positions).flat().reduce((sum, p) => sum + (p.market_value || 0), 0));
|
||||
|
||||
// 工具
|
||||
const formatNumber = (num) => {
|
||||
if (num === undefined || num === null || isNaN(num)) return '0';
|
||||
return num >= 10000 ? (num / 10000).toFixed(2) + '万' : num.toLocaleString();
|
||||
};
|
||||
const formatVirtual = (obj) => Object.keys(obj).map(k => ({ code: k, vol: parseInt(obj[k]) || 0 }));
|
||||
const getLogClass = (line) => {
|
||||
if (line.includes('ERROR') || line.includes('错误')) return 'log-error';
|
||||
if (line.includes('WARNING') || line.includes('警告')) return 'log-warning';
|
||||
if (line.includes('SUCCESS') || line.includes('成功')) return 'log-success';
|
||||
return 'log-info';
|
||||
};
|
||||
const formatLogTime = (line) => {
|
||||
const match = line.match(/\[(.*?)\]/);
|
||||
return match ? match[1] : '';
|
||||
};
|
||||
|
||||
// 数据获取
|
||||
const fetchData = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const sRes = await fetch(`${API_BASE}/api/status`);
|
||||
if(sRes.ok) status.value = await sRes.json();
|
||||
|
||||
const pRes = await fetch(`${API_BASE}/api/positions`);
|
||||
if(pRes.ok) positions.value = await pRes.json();
|
||||
|
||||
const lRes = await fetch(`${API_BASE}/api/logs`);
|
||||
if(lRes.ok) {
|
||||
const data = await lRes.json();
|
||||
logs.value = data.logs;
|
||||
setTimeout(() => {
|
||||
if(logBox.value) logBox.value.scrollTop = logBox.value.scrollHeight;
|
||||
}, 100);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Fetch Error:", e);
|
||||
console.log('[DEBUG] 获取数据...');
|
||||
const [s, p, l] = await Promise.all([
|
||||
fetch(`${API_BASE}/api/status`).then(r => r.ok ? r.json() : {}),
|
||||
fetch(`${API_BASE}/api/positions`).then(r => r.ok ? r.json() : {}),
|
||||
fetch(`${API_BASE}/api/logs`).then(r => r.ok ? r.json() : {})
|
||||
]);
|
||||
status.value = s;
|
||||
positions.value = p;
|
||||
logs.value = l.logs || [];
|
||||
if (logBox.value) setTimeout(() => logBox.value.scrollTop = logBox.value.scrollHeight, 100);
|
||||
lastUpdateTime.value = new Date().toLocaleString('zh-CN');
|
||||
console.log('[DEBUG] 数据已更新', p);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const getTerminalAlias = (qmtId) => {
|
||||
const t = status.value.terminals.find(x => x.qmt_id === qmtId);
|
||||
return t ? t.alias : qmtId;
|
||||
};
|
||||
|
||||
const getTerminalStatusClass = (qmtId) => {
|
||||
const t = status.value.terminals.find(x => x.qmt_id === qmtId);
|
||||
return t && t.is_connected ? 'bg-green' : 'bg-red';
|
||||
};
|
||||
|
||||
const formatVirtual = (obj) => {
|
||||
return Object.keys(obj).map(k => ({ code: k, vol: obj[k] }));
|
||||
};
|
||||
|
||||
const manualRefresh = () => fetchData();
|
||||
const manualReconnect = async () => {
|
||||
reconnecting.value = true;
|
||||
await fetch(`${API_BASE}/api/reconnect`, { method: 'POST' });
|
||||
setTimeout(fetchData, 2000);
|
||||
setTimeout(() => reconnecting.value = false, 5000);
|
||||
};
|
||||
|
||||
// 获取配置文件内容
|
||||
const fetchConfig = async () => {
|
||||
configLoading.value = true;
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/file_config`).then(r => r.ok ? r.json() : {});
|
||||
fileConfig.value = res;
|
||||
} catch (e) {
|
||||
console.error('[CONFIG] 获取配置失败:', e);
|
||||
} finally {
|
||||
configLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 复制配置到剪贴板
|
||||
const copyConfig = () => {
|
||||
if (fileConfig.value.raw_config) {
|
||||
navigator.clipboard.writeText(fileConfig.value.raw_config).then(() => {
|
||||
// 使用 Naive UI 的 message
|
||||
if (typeof message !== 'undefined') {
|
||||
message.success('配置已复制到剪贴板');
|
||||
} else {
|
||||
alert('配置已复制到剪贴板');
|
||||
}
|
||||
}).catch(() => {
|
||||
if (typeof message !== 'undefined') {
|
||||
message.error('复制失败');
|
||||
} else {
|
||||
alert('复制失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
timer = setInterval(() => {
|
||||
if (autoRefresh.value && isTradingTime()) fetchData();
|
||||
}, 60000);
|
||||
let timer = null;
|
||||
const unwatch = watch(showConfigModal, (newVal) => {
|
||||
if (newVal && !fileConfig.value.raw_config) {
|
||||
fetchConfig();
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => { if (timer) clearInterval(timer); });
|
||||
|
||||
onMounted(() => { fetchData(); timer = setInterval(fetchData, 30000); });
|
||||
onUnmounted(() => { if (timer) clearInterval(timer); unwatch(); });
|
||||
|
||||
return {
|
||||
status, positions, logs, autoRefresh, loading, logBox,
|
||||
manualRefresh, formatVirtual, tradingStatusText,
|
||||
status, positions, logs, loading, reconnecting, logBox, lastUpdateTime,
|
||||
connectionStatusText, connectionStatusType,
|
||||
manualRefresh, manualReconnect,
|
||||
getTerminalAlias, getTerminalStatusClass,
|
||||
Monitor, Refresh, Suitcase, Memo
|
||||
formatNumber, formatVirtual, getLogClass, formatLogTime,
|
||||
totalPositions, totalVolume, totalMarketValue,
|
||||
realPosColumns, virtualPosColumns,
|
||||
// 配置相关
|
||||
showConfigModal, fileConfig, configLoading,
|
||||
fetchConfig, copyConfig
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component);
|
||||
}
|
||||
app.use(ElementPlus);
|
||||
app.use(naive);
|
||||
app.mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user