skyfffire
/
arbitrage


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多平台价格与价差监控 (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: 450px; margin: 20px auto; } /* Plotly chart div */
        .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-style: italic; color: grey; }
    </style>
</head>
<body>
    <div class="container">
        <h1 id="main-title">{{ target_asset }}/USDT 多平台价格监控</h1>
        <div class="controls-container">
            <button id="pause-resume-button" class="control-button">暂停刷新</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th>平台</th>
                    <th>价格 (USDT)</th>
                    <th class="status-cell">状态/错误</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="platform-name">OpenOcean (BSC)</td>
                    <td id="oo-price">加载中...</td>
                    <td id="oo-status" class="status-cell"></td>
                </tr>
                <tr>
                    <td class="platform-name" id="gate-spot-label">Gate.io 现货 ({{ spot_pair }})</td>
                    <td id="gate-spot-price">加载中...</td>
                    <td id="gate-spot-status" class="status-cell"></td>
                </tr>
                <tr>
                    <td class="platform-name" id="gate-futures-label">Gate.io 期货 ({{ futures_contract }})</td>
                    <td id="gate-futures-price">加载中...</td>
                    <td id="gate-futures-status" class="status-cell"></td>
                </tr>
            </tbody>
        </table>
        <h2>价差百分比</h2>
        <table>
             <thead>
                <tr>
                    <th>对比</th>
                    <th>价差 (%)</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id="diff-label-oo-spot">OO vs Gate.io 现货 ({{ spot_pair }})</td>
                    <td id="diff-oo-vs-spot">计算中...</td>
                </tr>
                <tr>
                    <td id="diff-label-oo-futures">OO vs Gate.io 期货 ({{ futures_contract }})</td>
                    <td id="diff-oo-vs-futures">计算中...</td>
                </tr>
                <tr>
                    <td id="diff-label-spot-futures">Gate.io 现货 ({{ spot_pair }}) vs 期货 ({{ futures_contract }})</td>
                    <td id="diff-spot-vs-futures">计算中...</td>
                </tr>
            </tbody>
        </table>
        <div class="timestamp">最后更新: <span id="last-updated">N/A</span></div>
    </div>

    <div class="container">
        <h2 id="price-chart-title">价格历史曲线</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">价差百分比历史曲线</h2>
        <div id='diffPercentageChartPlotly' class="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;
        let isPaused = false;

        let pricePlotInitialized = false;
        let diffPlotInitialized = false;

        // --- Helper function to format price (same as your Chart.js version) ---
        function formatPriceForTable(priceStr) {
            if (priceStr === null || priceStr === undefined || priceStr === "N/A" || String(priceStr).toLowerCase() === "n/a") return "N/A";
            const price = parseFloat(priceStr);
            if (isNaN(price)) return "N/A";
            if (price === 0) return "0.00000000";
            if (Math.abs(price) < 0.0000001 && price !== 0) return price.toExponential(3);
            if (Math.abs(price) < 0.001) return price.toFixed(8);
            if (Math.abs(price) < 1) return price.toFixed(6);
            return price.toFixed(4);
        }
        function formatPercentageForTable(percStr) {
            if (percStr === null || percStr === undefined || percStr === "N/A" || String(percStr).toLowerCase() === "n/a") return "N/A";
            if (String(percStr).includes('%')) return percStr; // Already formatted
            const perc = parseFloat(percStr);
            if (isNaN(perc)) return "N/A";
            return `${perc > 0 ? '+' : ''}${perc.toFixed(4)}%`;
        }

        async function updateTableData() {
            if (isPaused) return; // Don't update table if paused (charts are also paused via their own update)
            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').textContent = formatPriceForTable(data.oo_price);
                document.getElementById('gate-spot-price').textContent = formatPriceForTable(data.gate_spot_price);
                document.getElementById('gate-futures-price').textContent = formatPriceForTable(data.gate_futures_price);

                document.getElementById('oo-status').textContent = data.oo_error || '正常';
                document.getElementById('gate-spot-status').textContent = data.gate_spot_error || '正常';
                document.getElementById('gate-futures-status').textContent = data.gate_futures_error || '正常';
                // Update error classes
                document.getElementById('oo-status').className = data.oo_error ? 'status-cell error-message' : 'status-cell';
                document.getElementById('gate-spot-status').className = data.gate_spot_error ? 'status-cell error-message' : 'status-cell';
                document.getElementById('gate-futures-status').className = data.gate_futures_error ? 'status-cell error-message' : 'status-cell';

                const diffOOSpotEl = document.getElementById('diff-oo-vs-spot');
                const diffOOFuturesEl = document.getElementById('diff-oo-vs-futures');
                const diffSpotFuturesEl = document.getElementById('diff-spot-vs-futures');

                diffOOSpotEl.textContent = formatPercentageForTable(data.diff_oo_vs_spot_percentage);
                diffOOFuturesEl.textContent = formatPercentageForTable(data.diff_oo_vs_futures_percentage);
                diffSpotFuturesEl.textContent = formatPercentageForTable(data.diff_spot_vs_futures_percentage);

                [diffOOSpotEl, diffOOFuturesEl, diffSpotFuturesEl].forEach(el => {
                    const valStr = el.textContent.replace('%','').replace('+','');
                    const val = parseFloat(valStr);
                    if (!isNaN(val)) { el.className = val > 0 ? 'price-up' : (val < 0 ? 'price-down' : ''); }
                     else { el.className = ''; }
                });

                document.getElementById('last-updated').textContent = data.last_updated || "N/A";

            } catch (error) {
                console.error('Error fetching table data:', error);
                // Optionally update status for table data errors
            }
        }

        async function updatePlotlyCharts() {
            if(isPaused && (pricePlotInitialized || diffPlotInitialized) ) return; // Don't fetch new chart data if paused and already drawn once

            try {
                const response = await fetch('/plotly-chart-data');
                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

                const chartData = await response.json(); // This now contains { price_chart: ..., diff_chart: ... }

                if (chartData.price_chart && chartData.price_chart.data && chartData.price_chart.layout) {
                    Plotly.react(priceChartDiv, chartData.price_chart.data, chartData.price_chart.layout, {responsive: true});
                    if (!pricePlotInitialized) {
                        console.log("Price chart initialized with Plotly.");
                        pricePlotInitialized = true;
                    }
                    priceChartStatusDiv.textContent = `价格图表更新于: ${new Date().toLocaleTimeString()}`;
                } else {
                    console.error("Received invalid price_chart data structure");
                    priceChartStatusDiv.textContent = "错误: 价格图表数据无效。";
                }

                if (chartData.diff_chart && chartData.diff_chart.data && chartData.diff_chart.layout) {
                    Plotly.react(diffChartDiv, chartData.diff_chart.data, chartData.diff_chart.layout, {responsive: true});
                     if (!diffPlotInitialized) {
                        console.log("Diff chart initialized with Plotly.");
                        diffPlotInitialized = true;
                    }
                    diffChartStatusDiv.textContent = `价差图表更新于: ${new Date().toLocaleTimeString()}`;
                } else {
                    console.error("Received invalid diff_chart data structure");
                    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');
                console.log("Data refresh PAUSED");
            } else {
                pauseResumeButton.textContent = '暂停刷新';
                pauseResumeButton.classList.remove('pause-button-active');
                // Refresh immediately on resume
                updateTableData();
                updatePlotlyCharts();
                dataUpdateIntervalID = setInterval(() => {
                    updateTableData();
                    updatePlotlyCharts();
                }, refreshIntervalMs);
                console.log("Data refresh RESUMED");
            }
        }

        pauseResumeButton.addEventListener('click', togglePauseResume);

        // Initial load
        console.log("Page loaded. Initializing data and charts...");
        updateTableData();
        updatePlotlyCharts();

        if (!isPaused) {
            dataUpdateIntervalID = setInterval(() => {
                updateTableData();
                updatePlotlyCharts();
            }, refreshIntervalMs);
        }

    </script>
</body>
</html>