skyfffire
/
arbitrage


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>价格与价差监控 Binance-OpenOcean</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.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; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; margin-bottom: 20px; }
        th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
        th { background-color: #e9e9e9; }
        .price-up { color: green; }
        .price-down { color: red; }
        .error-message { color: #c00; font-style: italic; font-size: 0.9em; }
        .status-cell { /* For status messages, not just errors */ }
        .timestamp { font-size: 0.9em; color: #666; text-align: right; margin-top: 15px; }
        .chart-container {
            position: relative;
            height: 45vh;
            width: 90vw;
            margin: auto;
            margin-bottom: 10px;
        }
        .controls-container {
            text-align: center;
            margin-bottom: 20px;
            margin-top: 5px;
        }
        .control-button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 15px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            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;
        }
        .pause-button-active:hover {
            background-color: #e0a800;
        }
    </style>
</head>
<body>
    <!-- HTML 结构与之前相同，此处省略 -->
    <div class="container">
        <h1>USDT 价格监控</h1>
        <div class="controls-container">
            <button id="pause-resume-button" class="control-button">暂停刷新</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th>平台</th>
                    <th>价格</th>
                    <th>状态/错误</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>OpenOcean (BSC)</td>
                    <td id="oo-price">加载中...</td>
                    <td id="oo-status" class="status-cell"></td>
                </tr>
                <tr>
                    <td>Gate.io (Spot)</td>
                    <td id="gate-price">加载中...</td>
                    <td id="gate-status" class="status-cell"></td>
                </tr>
                <tr>
                    <td><b>价差百分比</b></td>
                    <td id="diff-percentage" colspan="2">计算中...</td>
                </tr>
            </tbody>
        </table>
        <div class="timestamp">最后更新: <span id="last-updated">N/A</span></div>
    </div>

    <div class="container">
        <h2>价格历史曲线</h2>
        <div class="chart-container">
            <canvas id="priceHistoryChart"></canvas>
        </div>
        <div class="controls-container">
            <button id="reset-price-zoom-button" class="control-button">重置缩放</button>
        </div>
    </div>

    <div class="container">
        <h2>价差百分比历史曲线</h2>
        <div class="chart-container">
            <canvas id="diffHistoryChart"></canvas>
        </div>
        <div class="controls-container">
            <button id="reset-diff-zoom-button" class="control-button">重置缩放</button>
        </div>
    </div>

    <script>
        let priceChartInstance = null;
        let diffChartInstance = null;

        let dataUpdateIntervalID = null;
        let isPaused = false;
        const REFRESH_INTERVAL_MS = 5000;
        const pauseResumeButton = document.getElementById('pause-resume-button');

        let isSyncingZoomPan = false; // 标志位，防止同步死循环

        function formatPrice(priceStr) {
            if (priceStr === null || priceStr === undefined || priceStr === "N/A") return "N/A";
            const price = parseFloat(priceStr);
            return isNaN(price) ? "N/A" : price.toFixed(6);
        }

        // 函数：从源图表同步X轴到目标图表
        function syncXAxes(sourceChart, targetChart) {
            if (isSyncingZoomPan || !sourceChart || !targetChart) return; // 如果正在同步或图表未定义，则跳过

            isSyncingZoomPan = true; // 设置标志位

            const sourceXScale = sourceChart.scales.x;
            const targetXScale = targetChart.scales.x;

            if (sourceXScale && targetXScale) {
                targetXScale.options.min = sourceXScale.min; // 同步X轴的最小值
                targetXScale.options.max = sourceXScale.max; // 同步X轴的最大值
                targetChart.update('none'); // 更新目标图表，'none' 表示不执行动画
            }

            // 短暂延迟后重置标志位，允许下一次同步
            // 如果不加延迟，快速连续操作可能会有问题
            requestAnimationFrame(() => {
                 isSyncingZoomPan = false;
            });
        }

        function initializeChart(ctx, chartIdentifier, chartType, datasetsConfig, initialLabels, titleText) {
            const chartInstance = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: initialLabels,
                    datasets: datasetsConfig
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    animation: {
                        duration: 150
                    },
                    scales: {
                        x: {
                            title: { display: true, text: '时间' },
                            // 我们将通过回调函数同步 min/max，这里不设置
                        },
                        y: {
                            title: { display: true, text: chartType === 'price' ? '价格 (USDT)' : '价差 (%)' },
                            beginAtZero: chartType === 'diff' ? false : undefined
                        }
                    },
                    plugins: {
                        legend: { position: 'top' },
                        title: { display: true, text: titleText },
                        zoom: {
                            pan: {
                                enabled: true,
                                mode: 'x', // 只在X轴上平移 (Y轴通常不需要同步)
                                threshold: 5,
                                onPanComplete({chart}) { // 平移完成回调
                                    if (chartIdentifier === 'price' && diffChartInstance) {
                                        syncXAxes(chart, diffChartInstance);
                                    } else if (chartIdentifier === 'diff' && priceChartInstance) {
                                        syncXAxes(chart, priceChartInstance);
                                    }
                                }
                            },
                            zoom: {
                                wheel: { enabled: true, speed: 0.1 }, // 调整滚轮速度
                                pinch: { enabled: true },
                                drag: { enabled: true, backgroundColor: 'rgba(0,123,255,0.25)'},
                                mode: 'x', // 只在X轴上缩放
                                onZoomComplete({chart}) { // 缩放完成回调
                                    if (chartIdentifier === 'price' && diffChartInstance) {
                                        syncXAxes(chart, diffChartInstance);
                                    } else if (chartIdentifier === 'diff' && priceChartInstance) {
                                        syncXAxes(chart, priceChartInstance);
                                    }
                                }
                            }
                        }
                    },
                    elements: {
                        point:{ radius: 2 }
                    }
                }
            });
            return chartInstance;
        }

        function updateChartData(chartInstance, newLabels, newDatasetsData) {
            if (!chartInstance) return; // 确保图表实例存在

            const currentXMin = chartInstance.scales.x.min;
            const currentXMax = chartInstance.scales.x.max;
            const isZoomed = (currentXMin !== undefined && currentXMax !== undefined &&
                             (currentXMin !== chartInstance.data.labels[0] || currentXMax !== chartInstance.data.labels[chartInstance.data.labels.length - 1]));

            chartInstance.data.labels = newLabels;
            newDatasetsData.forEach((datasetData, index) => {
                chartInstance.data.datasets[index].data = datasetData;
            });

            // 如果图表之前是缩放状态，并且新的标签范围与旧的缩放范围不完全匹配，
            // 尝试保持缩放，否则新的数据可能会导致缩放重置。
            // 但这里简单处理：如果暂停，不更新 x 轴的 min/max，让用户控制。
            // 如果正在刷新，则让图表根据新数据自动调整。
            // 若要更精细控制 (如保持缩放比例滚动)，会更复杂。
            if (!isPaused) {
                 // 当数据刷新时，如果用户是手动缩放的，我们不应该重置它
                 // Chart.js 会在数据更新时自动调整范围，除非 min/max 固定
                 // 为了允许新数据扩展X轴，我们不在这里设置 min/max
                 // 除非我们想实现固定窗口滚动
            } else {
                // 如果暂停了，并且图表被用户缩放了，保持这个缩放
                if(isZoomed) {
                    chartInstance.options.scales.x.min = currentXMin;
                    chartInstance.options.scales.x.max = currentXMax;
                } else {
                    // 如果没缩放，允许图表自动调整（尽管暂停时数据不会变）
                    chartInstance.options.scales.x.min = undefined;
                    chartInstance.options.scales.x.max = undefined;
                }
            }

            chartInstance.update('quiet');
        }

        function updateDisplayAndCharts() {
            fetch('/data')
                .then(response => response.json())
                .then(data => {
                    const current = data.current;
                    // ... (表格数据更新部分与之前相同，此处省略以保持简洁) ...
                    document.getElementById('oo-price').textContent = formatPrice(current.oo_price);
                    document.getElementById('gate-price').textContent = formatPrice(current.gate_price);

                    const diffEl = document.getElementById('diff-percentage');
                    if (current.difference_percentage && current.difference_percentage !== "N/A") {
                        diffEl.textContent = current.difference_percentage;
                        const diffValue = parseFloat(current.difference_percentage.replace('%', ''));
                        if (!isNaN(diffValue)) {
                           if (diffValue > 0) diffEl.className = 'price-up';
                           else if (diffValue < 0) diffEl.className = 'price-down';
                           else diffEl.className = '';
                        } else {
                           diffEl.className = '';
                        }
                    } else {
                        diffEl.textContent = current.difference_percentage || "N/A";
                        diffEl.className = '';
                    }

                    const ooStatusEl = document.getElementById('oo-status');
                    ooStatusEl.textContent = current.oo_error ? `错误: ${current.oo_error}` : '正常';
                    ooStatusEl.className = current.oo_error ? 'status-cell error-message' : 'status-cell ';

                    const gateStatusEl = document.getElementById('gate-status');
                    gateStatusEl.textContent = current.gate_error ? `错误: ${current.gate_error}` : '正常';
                    gateStatusEl.className = current.gate_error ? 'status-cell error-message' : 'status-cell ';

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

                    const history = data.history;

                    // --- 价格历史图表 ---
                    const priceCtx = document.getElementById('priceHistoryChart').getContext('2d');
                    const priceDatasets = [
                        { label: 'OpenOcean', data: history.prices.oo, borderColor: 'rgb(75, 192, 192)', tension: 0.1, fill: false },
                        { label: 'Gate.io', data: history.prices.gate, borderColor: 'rgb(255, 99, 132)', tension: 0.1, fill: false }
                    ];
                    if (!priceChartInstance) {
                        priceChartInstance = initializeChart(priceCtx, 'price', 'price', priceDatasets, history.prices.labels, '价格历史');
                    } else {
                        updateChartData(priceChartInstance, history.prices.labels, [history.prices.oo, history.prices.gate]);
                    }

                    // --- 价差历史图表 ---
                    const diffCtx = document.getElementById('diffHistoryChart').getContext('2d');
                    const diffDatasets = [{ label: '价差百分比 (OO vs Gate)', data: history.difference.values, borderColor: 'rgb(54, 162, 235)', tension: 0.1, fill: false }];
                    if (!diffChartInstance) {
                        diffChartInstance = initializeChart(diffCtx, 'diff', 'diff', diffDatasets, history.difference.labels, '价差百分比历史');
                    } else {
                         updateChartData(diffChartInstance, history.difference.labels, [history.difference.values]);
                    }

                    // 初始加载或取消暂停时، 手动同步一次 (如果 X 轴不同步)
                    // 避免初始加载时两个图表的 x 轴范围不一样
                    if (priceChartInstance && diffChartInstance &&
                        (priceChartInstance.scales.x.min !== diffChartInstance.scales.x.min ||
                         priceChartInstance.scales.x.max !== diffChartInstance.scales.x.max) &&
                        (!isPaused || !dataUpdateIntervalID ) // 只有在首次加载或从暂停恢复时才这样做
                    ) {
                        // console.log("Initial or resume sync needed");
                        // syncXAxes(priceChartInstance, diffChartInstance); // 让价格图表作为主导
                    }

                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                    // ... (错误处理与之前相同) ...
                });
        }

        function togglePauseResume() {
            isPaused = !isPaused;
            if (isPaused) {
                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');
                updateDisplayAndCharts(); // Refresh immediately
                dataUpdateIntervalID = setInterval(updateDisplayAndCharts, REFRESH_INTERVAL_MS);
                console.log("Data refresh RESUMED");
            }
        }

        function resetAllZooms() {
            if (priceChartInstance) {
                priceChartInstance.resetZoom();
                // 重置后，手动清除 options 里的 min/max，确保下次数据更新能自动调整
                priceChartInstance.options.scales.x.min = undefined;
                priceChartInstance.options.scales.x.max = undefined;
                priceChartInstance.update('none'); // 立即应用
            }
            if (diffChartInstance) {
                diffChartInstance.resetZoom();
                diffChartInstance.options.scales.x.min = undefined;
                diffChartInstance.options.scales.x.max = undefined;
                diffChartInstance.update('none'); // 立即应用
            }
            // 重置后，如果两个图表X轴范围不同，需要再次同步
            // 简单起见，下次 updateDisplayAndCharts 时会自动尝试同步（如果需要）
            // 或者我们可以在 updateDisplayAndCharts 中，如果 isZoomed 为 false，则不设置 min/max
             if (priceChartInstance && diffChartInstance) {
                 // 在这里，我们希望两个图表都显示完整的数据范围
                 // 所以清空min/max后，让下次数据更新（如果是暂停状态，手动触发一次）来重建
                 if(isPaused){ // 如果是暂停状态，主动更新一下以确保X轴重置并数据重绘
                    updateDisplayAndCharts();
                 }
             }
        }

        // --- Event Listeners ---
        pauseResumeButton.addEventListener('click', togglePauseResume);

        document.getElementById('reset-price-zoom-button').addEventListener('click', () => {
            resetAllZooms(); // 现在一个按钮重置所有，并尝试同步
        });

        document.getElementById('reset-diff-zoom-button').addEventListener('click', () => {
             resetAllZooms(); // 现在一个按钮重置所有，并尝试同步
        });

        // Initial data load and start interval
        updateDisplayAndCharts();
        if (!isPaused) {
            dataUpdateIntervalID = setInterval(updateDisplayAndCharts, REFRESH_INTERVAL_MS);
        }

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