105 lines
6.9 KiB
Vue
105 lines
6.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import QuantSplitter from '../components/QuantSplitter.vue'
|
|
import QuantStatusChip from '../components/QuantStatusChip.vue'
|
|
|
|
// Temp/kis_data_collection_v1.json 실증 퀀트 데이터 바인딩
|
|
const realQuantData = ref<Array<{ symbol: string; name: string; sector: string; price: string; source: string; status: 'PASS' | 'LIMIT' | 'FAIL' }>>([
|
|
{ symbol: '005930', name: '삼성전자', sector: '반도체', price: '340,500', source: 'kis_open_api', status: 'PASS' },
|
|
{ symbol: '000660', name: 'SK하이닉스', sector: '반도체', price: '2,580,000', source: 'kis_open_api', status: 'PASS' },
|
|
{ symbol: '000270', name: '기아', sector: '자동차', price: '138,900', source: 'kis_open_api', status: 'PASS' },
|
|
{ symbol: '091160', name: 'KODEX 반도체', sector: 'ETF/반도체', price: '171,440', source: 'kis_open_api', status: 'PASS' },
|
|
{ symbol: '012450', name: '한화에어로스페이스', sector: '방산/항공', price: '1,094,000', source: 'kis_open_api', status: 'LIMIT' },
|
|
{ symbol: '010120', name: 'LS ELECTRIC', sector: 'AI전력망', price: '224,500', source: 'kis_open_api', status: 'PASS' },
|
|
{ symbol: '494670', name: 'TIGER 조선TOP10', sector: 'ETF/조선', price: '25,645', source: 'kis_open_api', status: 'PASS' },
|
|
{ symbol: '471990', name: 'KODEX AI반도체핵심', sector: 'ETF/AI반도체', price: '26,945', source: 'kis_open_api', status: 'FAIL' }
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Type 3: Real Quant Engine Live Data Comparison View -->
|
|
<div style="display: flex; flex-direction: column; height: 100%; width: 100%; background: #F4F6F9;">
|
|
<!-- Top Bar -->
|
|
<div style="background: #34495E; color: white; padding: 8px 16px; display: flex; justify-content: space-between; align-items: center;">
|
|
<span style="font-weight: bold;"><i class="ti ti-activity me-1"></i> SCR-05: [실증 현장감 데이터] KIS OpenAPI 실시간 시세 vs 퀀트 엔진 데이터 스플릿 대조</span>
|
|
<div style="display: flex; gap: 8px; align-items: center;">
|
|
<span style="font-size: 11px; background: #27AE60; padding: 2px 8px; border-radius: 4px; font-weight: bold;">LIVE PROD CONNECTED</span>
|
|
<button style="background: #2C3E50; color: white; border: 1px solid #5D7D9A; padding: 4px 12px; font-weight: bold; border-radius: 3px; cursor: pointer;">
|
|
<span class="hotkey-badge">F3</span>실시간 KIS 패킷 수집
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reusable Splitter Component -->
|
|
<div style="flex: 1; overflow: hidden;">
|
|
<QuantSplitter :initial-left-width="50">
|
|
<!-- Left Panel: KIS OpenAPI Live Data -->
|
|
<template #left>
|
|
<div style="background: white; height: 100%; display: flex; flex-direction: column; border-right: 1px solid #CBD5E1;">
|
|
<div style="background: #E2E8F0; padding: 8px 12px; font-weight: bold; color: #2C3E50; border-bottom: 1px solid #CBD5E1; display: flex; justify-content: space-between;">
|
|
<span>KIS OpenAPI 수집 원천 실 시세</span>
|
|
<span style="font-size: 11px; color: #7F8C8D;">Formula ID: KIS_DATA_COLLECTION_V1</span>
|
|
</div>
|
|
<div style="flex: 1; overflow: auto; padding: 8px;">
|
|
<table style="width: 100%; border-collapse: collapse; border: 1px solid #CBD5E1;">
|
|
<thead>
|
|
<tr style="background: #F8FAFC;">
|
|
<th style="padding: 6px; border: 1px solid #CBD5E1; text-align: left;">종목코드</th>
|
|
<th style="padding: 6px; border: 1px solid #CBD5E1; text-align: left;">종목명</th>
|
|
<th style="padding: 6px; border: 1px solid #CBD5E1; text-align: left;">섹터/분류</th>
|
|
<th style="padding: 6px; border: 1px solid #CBD5E1; text-align: right;">KIS 체결가(원)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="item in realQuantData" :key="item.symbol" style="border-bottom: 1px solid #ECF0F1;">
|
|
<td style="padding: 6px; border: 1px solid #CBD5E1; font-family: monospace; font-weight: bold;">{{ item.symbol }}</td>
|
|
<td style="padding: 6px; border: 1px solid #CBD5E1; font-weight: bold;">{{ item.name }}</td>
|
|
<td style="padding: 6px; border: 1px solid #CBD5E1; color: #7F8C8D;">{{ item.sector }}</td>
|
|
<td style="padding: 6px; border: 1px solid #CBD5E1; text-align: right; font-weight: bold; color: #2980B9;">{{ item.price }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Right Panel: Quant Engine Scoring & Risk Gating -->
|
|
<template #right>
|
|
<div style="background: white; height: 100%; display: flex; flex-direction: column;">
|
|
<div style="background: #E2E8F0; padding: 8px 12px; font-weight: bold; color: #2C3E50; border-bottom: 1px solid #CBD5E1; display: flex; justify-content: space-between;">
|
|
<span>퀀트 엔진 알파 스코어 & 게이트 하네스</span>
|
|
<span style="font-size: 11px; color: #7F8C8D;">Budget: 500,000,000 KRW</span>
|
|
</div>
|
|
<div style="flex: 1; overflow: auto; padding: 8px;">
|
|
<table style="width: 100%; border-collapse: collapse; border: 1px solid #CBD5E1;">
|
|
<thead>
|
|
<tr style="background: #F8FAFC;">
|
|
<th style="padding: 6px; border: 1px solid #CBD5E1; text-align: left;">종목명</th>
|
|
<th style="padding: 6px; border: 1px solid #CBD5E1; text-align: left;">데이터 수집원</th>
|
|
<th style="padding: 6px; border: 1px solid #CBD5E1; text-align: center;">리스크 게이트</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="item in realQuantData" :key="item.symbol" style="border-bottom: 1px solid #ECF0F1;">
|
|
<td style="padding: 6px; border: 1px solid #CBD5E1; font-weight: bold;">{{ item.name }}</td>
|
|
<td style="padding: 6px; border: 1px solid #CBD5E1; font-family: monospace; font-size: 11px;">{{ item.source }}</td>
|
|
<td style="padding: 6px; border: 1px solid #CBD5E1; text-align: center;">
|
|
<QuantStatusChip :type="item.status" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</QuantSplitter>
|
|
</div>
|
|
|
|
<!-- Bottom Cadence Bar -->
|
|
<div style="background: #34495E; color: white; padding: 6px 16px; font-size: 12px; display: flex; justify-content: space-between;">
|
|
<span>[현장감 실증 데이터] KIS 수집 종목 11건 연동 완료 | 목표 예산: 5억 원 | D+2 현금비율: 12.4%</span>
|
|
<span style="color: #F1C40F;">Operating Cadence: 주말 리밸런싱 / 월 1·11·21일 중간점검</span>
|
|
</div>
|
|
</div>
|
|
</template>
|