skyfffire
/
arbitrage


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ target_asset }} / {{ base_asset }}价格监控 (Plotly)</title> 
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; color: #333; }
        .container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin-bottom: 20px; }
        h1, h2 { text-align: center; color: #333; margin-top:10px; margin-bottom:15px; }
        table { width: 100%; border-collapse: collapse; margin-top: 10px; margin-bottom: 15px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; font-size:0.85em; word-break: break-all;}
        th { background-color: #e9e9e9; white-space: nowrap; }
        .price-up { color: green; } .price-down { color: red; } .error-message { color: #c00; font-style: italic;}
        .status-cell { min-width: 100px; } .timestamp { font-size: 0.9em; color: #666; text-align: right; margin-top: 10px; }
        .chart-container { width: 95%; height: 400px; margin: 20px auto; }
        .diff-chart-container { height: 280px; }
        .controls-container { text-align: center; margin-bottom: 15px; margin-top: 5px; }
        .control-button { background-color: #007bff; color: white; border: none; padding: 8px 15px; font-size: 14px; border-radius: 5px; cursor: pointer; margin:0 5px; }
        .control-button:hover { background-color: #0056b3; } .pause-button-active { background-color: #ffc107; color: #333; }
        .platform-name {font-weight: bold;} #main-title { font-size: 1.8em; } h2 { font-size: 1.3em; }
        .status-line { text-align: center; margin-top: 10px; font-size:0.8em; font-style: italic; color: grey; }
    </style>
</head>
<body>
    <div class="container">
        <!-- 主标题显示 RATO/USDT (base/target) -->
        <h1 id="main-title">{{ target_asset }}/{{ base_asset }} 多平台价格监控</h1>
        <div class="controls-container"> <button id="pause-resume-button" class="control-button">暂停刷新</button> </div>
        <table>
            <thead>
                <!-- 表格列标题也显示 USDT (base_asset) -->
                <tr><th>平台</th><th>价格 ({{ base_asset }})</th><th class="status-cell">状态/错误</th></tr>
            </thead>
            <tbody>
                <tr> <!-- OpenOcean显示 RATO/USDT -->
                    <td class="platform-name">OpenOcean ({{ target_asset }}/{{ base_asset }})</td>
                    <td id="oo-price-usdt-per-target">加载中...</td><td id="oo-status" class="status-cell"></td>
                </tr>
                <tr> <!-- MEXC显示 RATO/USDT (转换后) -->
                    <td class="platform-name" id="mexc-label">MEXC 现货 Bid1 ({{ mexc_pair_usdt }} → {{ target_asset }}/{{ base_asset }})</td>
                    <td id="mexc-price-usdt-per-target-bid1">加载中...</td>
                    <td id="mexc-status" class="status-cell"></td>
                </tr>
            </tbody>
        </table>
        <h2>利润 (基于 {{ target_asset }}/{{ base_asset }} 价格)</h2>
        <table>
             <thead><tr><th>对比</th><th>利润 (0.01代表1%)</th></tr></thead>
            <tbody>
                <tr><td>OpenOcean vs MEXC Bid1</td><td id="diff-oo-vs-mexc-bid1">计算中...</td></tr>
            </tbody>
        </table>
        <div class="timestamp">最后更新: <span id="last-updated">N/A</span></div>
    </div>

    <div class="container">
        <h2 id="price-chart-title">{{ target_asset }}/{{ base_asset }} 价格历史曲线</h2>
        <div id='priceHistoryChartPlotly' class="chart-container"></div>
        <div id="price-chart-status" class="status-line">加载价格图表...</div>
    </div>
    <div class="container">
        <h2 id="diff-chart-title">{{ target_asset }}/{{ base_asset }} 利润百分比历史曲线</h2>
        <div id='diffPercentageChartPlotly' class="chart-container diff-chart-container"></div>
        <div id="diff-chart-status" class="status-line">加载利润图表...</div>
    </div>

    <script type='text/javascript'>
        const priceChartDiv = document.getElementById('priceHistoryChartPlotly');
        const diffChartDiv = document.getElementById('diffPercentageChartPlotly');
        const priceChartStatusDiv = document.getElementById('price-chart-status');
        const diffChartStatusDiv = document.getElementById('diff-chart-status');
        const pauseResumeButton = document.getElementById('pause-resume-button');
        const refreshIntervalMs = {{ refresh_interval_ms }};
        let dataUpdateIntervalID = null, isPaused = false, pricePlotInitialized = false, diffPlotInitialized = false, isSyncingLayout = false;
        // JavaScript端的 TARGET_ASSET 和 BASE_ASSET 现在与模板一致，表示 RATO 和 USDT
        const TARGET_ASSET_JS = "{{ target_asset }}"; // e.g., RATO
        const BASE_ASSET_JS = "{{ base_asset }}";   // e.g., USDT

        // Updated formatPrice to handle USDT/TARGET (base/target) style formatting
        function formatPriceForTable(priceStr, precision = 8) {
            if (priceStr === null || priceStr === undefined || String(priceStr).toLowerCase() === "n/a") return "N/A";
            const price = parseFloat(priceStr);
            if (isNaN(price)) return "N/A";
            if (price === 0) return (0).toFixed(precision);
            // 对于 USDT/TARGET 这种价格，可能很小，也可能相对较大
            // 如果价格非常小 (例如 1 RATO = 0.00000001 USDT), 指数表示法可能更好
            // 如果价格相对"正常" (例如 1 RATO = 0.1 USDT), 固定小数位更好
            // 这里的阈值需要根据实际情况调整
            if (Math.abs(price) < 1e-6 && price !== 0) { // 如果1 TARGET 价值远小于 1 USDT
                 return price.toExponential(3);
            }
            return price.toFixed(precision);
        }

        function formatPercentageForTable(percStr) {
            if (percStr === null || percStr === undefined || String(percStr).toLowerCase() === "n/a") return "N/A";
            if (String(percStr).includes('%')) return percStr;
            const perc = parseFloat(percStr);
            if (isNaN(perc)) return "N/A";
            return `${perc > 0 ? '+' : ''}${perc.toFixed(4)}`;
        }

        function syncPlotlyXAxes(sourceDiv, targetDiv, eventData) {
            if (isSyncingLayout) return;
            isSyncingLayout = true;
            const update = {};
            let newXRange = null;
            if (eventData && eventData['xaxis.autorange'] === true) {
                update['xaxis.autorange'] = true;
            } else if (eventData && eventData['xaxis.range[0]'] !== undefined && eventData['xaxis.range[1]'] !== undefined) {
                newXRange = [eventData['xaxis.range[0]'], eventData['xaxis.range[1]']];
                update['xaxis.range'] = newXRange;
                update['xaxis.autorange'] = false;
            } else {
                if (sourceDiv.layout && sourceDiv.layout.xaxis) {
                    if (sourceDiv.layout.xaxis.autorange) {
                        update['xaxis.autorange'] = true;
                    } else if (sourceDiv.layout.xaxis.range) {
                        newXRange = sourceDiv.layout.xaxis.range;
                        update['xaxis.range'] = newXRange;
                        update['xaxis.autorange'] = false;
                    } else { isSyncingLayout = false; return; }
                } else { isSyncingLayout = false; return; }
            }
            Plotly.relayout(targetDiv, update).then(() => { isSyncingLayout = false; }).catch(e => { console.error("Error syncing layout:", e); isSyncingLayout = false; });
        }

        async function updateTableData() {
            if (isPaused) return;
            try {
                const response = await fetch('/table-data');
                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                const data = await response.json();

                document.getElementById('oo-price-usdt-per-target').textContent = formatPriceForTable(data.oo_price_usdt_per_target);
                document.getElementById('mexc-price-usdt-per-target-bid1').textContent = formatPriceForTable(data.mexc_price_usdt_per_target_bid1);

                document.getElementById('oo-status').textContent = data.oo_error || '正常';
                document.getElementById('mexc-status').textContent = data.mexc_error || '正常';
                document.getElementById('oo-status').className = data.oo_error ? 'status-cell error-message' : 'status-cell';
                document.getElementById('mexc-status').className = data.mexc_error ? 'status-cell error-message' : 'status-cell';

                const diffOOMexcBidEl = document.getElementById('diff-oo-vs-mexc-bid1');
                diffOOMexcBidEl.textContent = formatPercentageForTable(data.diff_oo_vs_mexc_bid1_percentage);

                const valStr = diffOOMexcBidEl.textContent.replace('%','').replace('+','');
                const val = parseFloat(valStr);
                if (!isNaN(val)) { diffOOMexcBidEl.className = val > 0 ? 'price-up' : (val < 0 ? 'price-down' : ''); }
                else { diffOOMexcBidEl.className = ''; }

                document.getElementById('last-updated').textContent = data.last_updated || "N/A";
            } catch (error) { console.error('Error fetching table data:', error); }
        }

        async function updatePlotlyCharts() {
            if(isPaused && (pricePlotInitialized || diffPlotInitialized) ) return;
            try {
                const response = await fetch('/plotly-chart-data');
                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                const chartDataResponse = await response.json();
                const priceChartConfig = chartDataResponse.price_chart;
                const diffChartConfig = chartDataResponse.diff_chart;

                const currentPriceLayout = priceChartDiv.layout;
                const currentDiffLayout = diffChartDiv.layout;

                if (priceChartConfig && priceChartConfig.data && priceChartConfig.layout) {
                    if (pricePlotInitialized && !isPaused && currentPriceLayout && currentPriceLayout.xaxis && !currentPriceLayout.xaxis.autorange && currentPriceLayout.xaxis.range) {
                        priceChartConfig.layout.xaxis.range = currentPriceLayout.xaxis.range;
                        priceChartConfig.layout.xaxis.autorange = false;
                    }
                    Plotly.react(priceChartDiv, priceChartConfig.data, priceChartConfig.layout, {responsive: true});
                    if (!pricePlotInitialized) {
                        pricePlotInitialized = true;
                        priceChartDiv.on('plotly_relayout', (eventData) => { syncPlotlyXAxes(priceChartDiv, diffChartDiv, eventData); });
                    }
                    priceChartStatusDiv.textContent = `价格图表 (${TARGET_ASSET_JS}/${BASE_ASSET_JS}) 更新于: ${new Date().toLocaleTimeString()}`;
                } else {
                    priceChartStatusDiv.textContent = "错误: 价格图表数据无效。";
                }

                if (diffChartConfig && diffChartConfig.data && diffChartConfig.layout) {
                     if (diffPlotInitialized && !isPaused && currentDiffLayout && currentDiffLayout.xaxis && !currentDiffLayout.xaxis.autorange && currentDiffLayout.xaxis.range) {
                        diffChartConfig.layout.xaxis.range = currentDiffLayout.xaxis.range;
                        diffChartConfig.layout.xaxis.autorange = false;
                    }
                    Plotly.react(diffChartDiv, diffChartConfig.data, diffChartConfig.layout, {responsive: true});
                    if (!diffPlotInitialized) {
                        diffPlotInitialized = true;
                        diffChartDiv.on('plotly_relayout', (eventData) => { syncPlotlyXAxes(diffChartDiv, priceChartDiv, eventData); });
                    }
                    diffChartStatusDiv.textContent = `利润图表 (${TARGET_ASSET_JS}/${BASE_ASSET_JS}) 更新于: ${new Date().toLocaleTimeString()}`;
                } else {
                     diffChartStatusDiv.textContent = "错误: 利润图表数据无效。";
                }
            } catch (error) {
                console.error('Error fetching or plotting Plotly data:', error);
                priceChartStatusDiv.textContent = `图表更新错误: ${error.message}`;
                diffChartStatusDiv.textContent = `图表更新错误: ${error.message}`;
            }
        }

        function togglePauseResume() {
            isPaused = !isPaused;
            if (isPaused) {
                if (dataUpdateIntervalID) clearInterval(dataUpdateIntervalID);
                dataUpdateIntervalID = null;
                pauseResumeButton.textContent = '继续刷新';
                pauseResumeButton.classList.add('pause-button-active');
            } else {
                pauseResumeButton.textContent = '暂停刷新';
                pauseResumeButton.classList.remove('pause-button-active');
                updateTableData(); // Immediately update on resume
                updatePlotlyCharts(); // Immediately update on resume
                dataUpdateIntervalID = setInterval(() => { updateTableData(); updatePlotlyCharts(); }, refreshIntervalMs);
            }
        }

        pauseResumeButton.addEventListener('click', togglePauseResume);
        updateTableData();
        updatePlotlyCharts();
        if (!isPaused) {
            dataUpdateIntervalID = setInterval(() => { updateTableData(); updatePlotlyCharts(); }, refreshIntervalMs);
        }
    </script>
</body>
</html>