编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宽频阻抗谱电缆故障智能定位检测系统 V1.0</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: #e8e8e8; color: #333; min-height: 100vh;
}

/* Header */
.header {
  background: linear-gradient(135deg, #1a5f4a 0%, #2d8a6e 100%);
  color: #fff; padding: 10px 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.header h1 { font-size: 16px; font-weight: 600; }
.header-sub { font-size: 11px; color: rgba(255,255,255,0.75); margin-top: 2px; }

/* Top bar */
.top-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 20px; background: #f5f5f5; border-bottom: 1px solid #d0d0d0;
}
.file-info { font-size: 12px; color: #555; }
.btn-group { display: flex; gap: 8px; }
.import-file { display: none; }

/* Import modal */
.modal-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.4); z-index: 1000;
  justify-content: center; align-items: center;
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: #fff; border-radius: 6px; width: 400px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2); overflow: hidden;
}
.modal-title {
  padding: 12px 16px; background: #1a5f4a; color: #fff;
  font-size: 14px; font-weight: 600;
}
.modal-body { padding: 20px 16px; }
.modal-option {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid #ddd; border-radius: 4px; cursor: pointer;
  margin-bottom: 12px; transition: all 0.15s;
}
.modal-option:hover { border-color: #1a5f4a; background: #f5faf7; }
.modal-option .opt-icon { font-size: 22px; width: 36px; text-align: center; }
.modal-option .opt-label { font-size: 13px; font-weight: 600; color: #333; }
.modal-option .opt-hint { font-size: 11px; color: #888; }
.modal-footer { padding: 12px 16px; text-align: right; border-top: 1px solid #eee; }
.modal-footer button { margin-left: 8px; }
.btn-cancel { background: #eee; color: #555; }
.btn-cancel:hover { background: #ddd; }

.btn {
  padding: 5px 14px; border: none; border-radius: 3px;
  cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.15s;
}
.btn-green { background: #1a5f4a; color: #fff; }
.btn-green:hover { background: #145242; }
.btn-gray { background: #888; color: #fff; }
.btn-gray:hover { background: #666; }
.btn-red { background: #c0392b; color: #fff; }
.btn-red:hover { background: #a93226; }

/* Main */
.main { display: flex; padding: 12px 20px; gap: 12px; max-width: 1400px; margin: 0 auto; }

/* Left area: params + overview + diagnosis */
.left-top { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }

.card {
  background: #fff; border: 1px solid #ccc; border-radius: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.card-header {
  background: #f0f0f0; padding: 6px 12px; font-size: 13px;
  font-weight: 600; color: #1a5f4a; border-bottom: 1px solid #ccc;
}
.card-body { padding: 10px 12px; font-size: 12px; }

/* Analysis params */
.param-card { flex: 1; min-width: 240px; }
.param-row { display: flex; gap: 12px; flex-wrap: wrap; }
.param-item { flex: 1; min-width: 100px; }
.param-item label { display: block; font-size: 11px; color: #666; margin-bottom: 3px; }
.param-item input {
  width: 100%; padding: 4px 6px; border: 1px solid #bbb; font-size: 12px;
  border-radius: 2px; font-family: inherit; background: #fafafa;
}
.param-item input:focus { outline: none; border-color: #1a5f4a; background: #fff; }

/* Data overview */
.overview-card { flex: 1.5; min-width: 280px; }
.overview-line { padding: 2px 0; font-size: 11px; color: #444; }
.overview-line strong { color: #1a5f4a; font-weight: 600; }

/* Diagnosis result */
.diag-card { flex: 1.2; min-width: 260px; }
.diag-title {
  font-size: 13px; font-weight: 700; color: #c0392b;
  border: 1px solid #c0392b; padding: 4px 8px; display: inline-block;
  margin-bottom: 8px; background: #fff0f0;
}
.diag-phase { padding: 2px 0; font-size: 11px; color: #444; }
.diag-phase .ph-name { font-weight: 600; color: #333; }
.diag-phase .ph-val { color: #1a5f4a; font-weight: 500; }

/* Bottom: chart + annotation */
.bottom-area { display: flex; gap: 12px; flex: 1; }

.chart-card {
  flex: 1; background: #fff; border: 1px solid #ccc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08); display: flex; flex-direction: column;
}
.chart-header {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: #f0f0f0; border-bottom: 1px solid #ccc;
}
.chart-tabs { display: flex; gap: 0; font-size: 12px; }
.chart-tab {
  padding: 4px 10px; cursor: pointer; border: 1px solid transparent;
  border-bottom: none; background: #e0e0e0; color: #666;
  margin-right: 2px;
}
.chart-tab.active { background: #fff; color: #1a5f4a; border-color: #ccc; font-weight: 600; }
.chart-body { padding: 8px 12px 12px; flex: 1; display: flex; position: relative; }

.canvas-wrap {
  position: relative; flex: 1; height: 360px;
  background: #fafafa; border: 1px solid #ddd;
}
canvas { display: block; width: 100%; height: 100%; }

/* Annotation panel (right of chart) */
.anno-panel {
  width: 140px; border-left: 1px solid #ccc; background: #fafafa;
  padding: 8px; font-size: 11px; display: flex; flex-direction: column; gap: 6px;
}
.anno-title { font-weight: 600; color: #333; font-size: 12px; margin-bottom: 4px; }
.anno-item {
  display: flex; align-items: center; gap: 6px; padding: 4px 0;
  border-bottom: 1px solid #e0e0e0; cursor: pointer;
}
.anno-item:last-child { border-bottom: none; }
.anno-item input { cursor: pointer; }
.anno-line { width: 18px; height: 2px; border-radius: 1px; }
.anno-color-a { background: #e74c3c; }
.anno-color-b { background: #3498db; }
.anno-color-c { background: #27ae60; }
.anno-name { font-size: 11px; color: #333; font-weight: 500; flex: 1; }
.anno-val { font-size: 10px; color: #888; text-align: right; }
.anno-val .num { color: #1a5f4a; font-weight: 600; font-size: 11px; }

/* Tooltip */
.tooltip {
  position: absolute; background: rgba(0,0,0,0.8); color: #fff;
  font-size: 11px; padding: 4px 8px; border-radius: 3px;
  pointer-events: none; z-index: 100; display: none;
}

.crosshair-line {
  position: absolute; pointer-events: none; z-index: 5;
  background: rgba(200,50,50,0.35);
}
.crosshair-x { height: 1px; width: 100%; left: 0; }
.crosshair-y { width: 1px; height: 100%; top: 0; }
.crosshair-label {
  position: absolute; background: rgba(0,0,0,0.75); color: #fff;
  font-size: 11px; padding: 2px 6px; border-radius: 3px;
  pointer-events: none; z-index: 6; display: none;
}

.drag-hint {
  position: absolute; top: 4px; right: 8px; font-size: 10px; color: #999;
  background: rgba(255,255,255,0.85); padding: 2px 6px; border-radius: 3px;
  pointer-events: none; z-index: 10;
}
.zoom-controls {
  position: absolute; bottom: 6px; right: 8px;
  display: flex; gap: 3px; z-index: 10;
}
.zoom-controls button {
  width: 24px; height: 24px; border: 1px solid #bbb; background: #fff;
  border-radius: 2px; cursor: pointer; font-size: 12px; color: #555;
  display: flex; align-items: center; justify-content: center;
}
.zoom-controls button:hover { background: #f0f0f0; border-color: #1a5f4a; color: #1a5f4a; }

@media (max-width: 1100px) {
  .left-top { flex-direction: column; }
  .bottom-area { flex-direction: column; }
  .anno-panel { width: 100%; border-left: none; border-top: 1px solid #ccc; }
}
</style>
</head>
<body>

<div class="header">
  <h1>诊断分析</h1>
  <div class="header-sub">宽频阻抗谱电缆故障智能定位检测系统 V1.0</div>
</div>

<div class="top-bar">
  <div class="file-info">当前文件：<span id="currentFilePath">s_2.xlsx(示例数据)</span></div>
  <div class="btn-group">
    <button class="btn btn-green" onclick="openImport()" style="background:#fff;color:#1a5f4a;border:1px solid #1a5f4a;">导入数据</button>
    <button class="btn btn-green" onclick="runAnalysis()">运行分析</button>
    <button class="btn btn-gray" onclick="exportResult()">导出结果</button>
    <button class="btn btn-red" onclick="resetAll()">重置</button>
  </div>
</div>

<input type="file" class="import-file" id="csvInput" accept=".csv,.txt,.dat" onchange="handleCSV(this)">
<input type="file" class="import-file" id="imgInput" accept=".jpg,.jpeg,.png,.bmp,.gif" onchange="handleImage(this)">

<!-- Import Modal -->
<div class="modal-overlay" id="importModal" onclick="closeImport(event)">
  <div class="modal-box" onclick="event.stopPropagation()">
    <div class="modal-title">导入数据</div>
    <div class="modal-body">
      <div class="modal-option" onclick="triggerImport('csv')">
        <div class="opt-icon">CSV</div>
        <div>
          <div class="opt-label">导入波形数据 (CSV/TXT)</div>
          <div class="opt-hint">支持检测仪导出的时序数据，自动解析三相信号</div>
        </div>
      </div>
      <div class="modal-option" onclick="triggerImport('image')">
        <div class="opt-icon">IMG</div>
        <div>
          <div class="opt-label">导入参考图片 (JPG/PNG/BMP)</div>
          <div class="opt-hint">将检测仪截图自动解析为波形曲线，替换当前波形</div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-cancel" onclick="closeImport()">取消</button>
    </div>
  </div>
</div>

<div class="main">
  <div style="flex:1;">
    <!-- Top row: params + overview + diagnosis -->
    <div class="left-top">
      <div class="card param-card">
        <div class="card-header">分析参数</div>
        <div class="card-body">
          <div class="param-row">
            <div class="param-item">
              <label>预设全长 / m</label>
              <input type="number" id="presetLen" value="260" onchange="redraw()">
            </div>
            <div class="param-item">
              <label>波速 / m/s</label>
              <input type="text" id="waveSpeed" value="1.72e+08" onchange="redraw()">
            </div>
            <div class="param-item">
              <label>Kaiser β</label>
              <input type="number" id="kaiserBeta" value="9" onchange="redraw()">
            </div>
            <div class="param-item">
              <label>分析点频点数（0=全部）</label>
              <input type="number" id="freqPoints" value="0" onchange="redraw()">
            </div>
          </div>
        </div>
      </div>

      <div class="card overview-card">
        <div class="card-header">数据概览</div>
        <div class="card-body">
          <div class="overview-line"><strong>检测相别：</strong>A, B, C, AB, AC, BC</div>
          <div class="overview-line">A 相: 5000 点, 5e-06-20 MHz</div>
          <div class="overview-line">B 相: 5000 点, 5e-06-20 MHz</div>
          <div class="overview-line">C 相: 5000 点, 5e-06-20 MHz</div>
          <div class="overview-line">Excel Veta: 1.72e+08 m/s</div>
        </div>
      </div>

      <div class="card diag-card">
        <div class="card-header">诊断结果</div>
        <div class="card-body">
          <div class="diag-title">闪络故障相诊断：C 相（置信度 90.0%）</div>
          <div class="diag-phase"><span class="ph-name">A</span> 相置信度 <span class="ph-val">54.3%</span>：定位谐振幅范围 <span class="ph-val">4.3668</span></div>
          <div class="diag-phase"><span class="ph-name">B</span> 相置信度 <span class="ph-val">38.2%</span>：定位谐振幅范围 <span class="ph-val">3.99976</span></div>
          <div class="diag-phase"><span class="ph-name">C</span> 相置信度 <span class="ph-val">90.0%</span>：定位谐振幅范围 <span class="ph-val">4.95578</span></div>
        </div>
      </div>
    </div>

    <!-- Bottom: chart + annotation -->
    <div class="bottom-area">
      <div class="chart-card" style="flex:1;">
        <div class="chart-header">
          <div class="chart-tabs">
            <div class="chart-tab" onclick="switchTab(this)">原始数据</div>
            <div class="chart-tab" onclick="switchTab(this)">分析序列</div>
            <div class="chart-tab active" onclick="switchTab(this)">三相对比</div>
            <div class="chart-tab" onclick="switchTab(this)">故障结果</div>
          </div>
        </div>
        <div class="chart-body">
          <div class="canvas-wrap" id="canvasWrap" style="flex:1;">
            <div class="drag-hint">拖拽移动 | 滚轮缩放</div>
            <div class="zoom-controls">
              <button onclick="zoomIn()">+</button>
              <button onclick="zoomOut()">-</button>
              <button onclick="zoomReset()">R</button>
            </div>
            <canvas id="waveCanvas"></canvas>
            <div class="crosshair-line crosshair-x" id="crosshairX"></div>
            <div class="crosshair-line crosshair-y" id="crosshairY"></div>
            <div class="crosshair-label" id="crosshairLabel"></div>
          </div>
          <div class="anno-panel">
            <div class="anno-title">标注</div>
            <div class="anno-item" onclick="togglePhase('A')">
              <input type="checkbox" id="showA" checked>
              <div class="anno-line anno-color-a"></div>
              <span class="anno-name">A 相</span>
              <div class="anno-val"><span class="num">250.3</span> m<br>1.000</div>
            </div>
            <div class="anno-item" onclick="togglePhase('B')">
              <input type="checkbox" id="showB" checked>
              <div class="anno-line anno-color-b"></div>
              <span class="anno-name">B 相</span>
              <div class="anno-val"><span class="num">250.1</span> m<br>1.000</div>
            </div>
            <div class="anno-item" onclick="togglePhase('C')">
              <input type="checkbox" id="showC" checked>
              <div class="anno-line anno-color-c"></div>
              <span class="anno-name">C 相</span>
              <div class="anno-val"><span class="num">250.4</span> m<br>1.000</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="tooltip" id="tooltip"></div>

<script>
// ===================== Realistic Waveform (matching sample screenshot) =====================
const canvas = document.getElementById('waveCanvas');
const ctx = canvas.getContext('2d');
const wrap = document.getElementById('canvasWrap');
const crosshairX = document.getElementById('crosshairX');
const crosshairY = document.getElementById('crosshairY');
const crosshairLabel = document.getElementById('crosshairLabel');

let showA = true, showB = true, showC = true;
let scaleX = 1, offsetX = 0;
let isDragging = false, lastX = 0;

const N = 512, defaultDistMax = 281;
let distMax = defaultDistMax;
const yMin = -3.5, yMax = 4.5;
let gYMin = yMin, gYMax = yMax;

function niceNum(x, round) {
  const exp = Math.floor(Math.log10(x));
  const f = x / Math.pow(10, exp);
  const nf = round ? (f < 1.5 ? 1 : f < 3 ? 2 : f < 7 ? 5 : 10)
                   : (f <= 1 ? 1 : f <= 2 ? 2 : f <= 5 ? 5 : 10);
  return nf * Math.pow(10, exp);
}
function niceTicks(min, max, count) {
  const range = max - min;
  if (!isFinite(range) || range <= 0) return [0];
  const step = niceNum(range / (count - 1), true);
  const start = Math.floor(min / step) * step;
  const ticks = [];
  for (let v = start; v <= max + step * 0.5; v += step) {
    ticks.push(Math.abs(v) < step * 1e-6 ? 0 : v);
  }
  return ticks;
}
function formatTick(v) {
  const a = Math.abs(v);
  if (a >= 1000) return v.toFixed(0);
  if (a >= 100) return v.toFixed(1);
  if (a >= 1) return v.toFixed(2);
  return v.toFixed(3);
}

function generateRealWave(phase) {
  const data = [];
  for (let i = 0; i < N; i++) {
    const x = (i / (N - 1)) * defaultDistMax;
    let y = 0;
    
    // Initial large peak at x=0 (injection end reflection)
    const initialPeak = 3.5 * Math.exp(-x * 0.08);
    y += initialPeak;
    
    // Damped oscillation with distance
    const freq1 = 0.15;
    const decay1 = 0.025;
    y += 1.2 * Math.exp(-decay1 * x) * Math.cos(freq1 * x * Math.PI * 2);
    
    // Secondary oscillation (higher freq, smaller amp)
    const freq2 = 0.35;
    const decay2 = 0.04;
    y += 0.6 * Math.exp(-decay2 * x) * Math.cos(freq2 * x * Math.PI * 2 + 1.0);
    
    // Tertiary small oscillation
    y += 0.3 * Math.exp(-0.05 * x) * Math.sin(0.6 * x * Math.PI * 2 + 0.5);
    
    // Deep valleys at specific positions (fault/connection points)
    // Valley at ~70m
    const v1 = Math.abs(x - 70.2);
    if (v1 < 20) y -= 2.0 * Math.exp(-v1 * v1 / 80);
    
    // Valley at ~211m
    const v2 = Math.abs(x - 211);
    if (v2 < 25) y -= 2.2 * Math.exp(-v2 * v2 / 120);
    
    // End peak at ~250m (end reflection / fault reflection)
    const endPeak = 2.0 * Math.exp(-Math.pow(x - 250, 2) / 80);
    y += endPeak;
    
    // Phase-specific differences (C phase has more pronounced fault features)
    if (phase === 'C') {
      // C phase has deeper valleys and more deviation at end
      y -= 0.3 * Math.exp(-Math.pow(x - 70, 2) / 100);
      y -= 0.4 * Math.exp(-Math.pow(x - 211, 2) / 150);
      y += 0.5 * Math.exp(-Math.pow(x - 250, 2) / 60);
    } else if (phase === 'A') {
      y += 0.15 * Math.exp(-Math.pow(x - 70, 2) / 100);
      y -= 0.1 * Math.exp(-Math.pow(x - 250, 2) / 80);
    } else if (phase === 'B') {
      y -= 0.05 * Math.exp(-Math.pow(x - 70, 2) / 100);
      y += 0.2 * Math.exp(-Math.pow(x - 211, 2) / 150);
    }
    
    // Small noise
    y += (Math.random() - 0.5) * 0.06;
    
    // Clamp to range
    y = Math.max(yMin - 0.5, Math.min(yMax + 0.5, y));
    
    data.push({ x, y });
  }
  return data;
}

let dataA = generateRealWave('A');
let dataB = generateRealWave('B');
let dataC = generateRealWave('C');

function resizeCanvas() {
  const rect = wrap.getBoundingClientRect();
  canvas.width = rect.width * window.devicePixelRatio;
  canvas.height = rect.height * window.devicePixelRatio;
  canvas.style.width = rect.width + 'px';
  canvas.style.height = rect.height + 'px';
  ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
  redraw();
}

function constrainOffset() {
  const width = canvas.width / window.devicePixelRatio;
  const padLeft = 50, padRight = 20;
  const chartW = width - padLeft - padRight;
  const maxOffset = 0;
  const minOffset = -(distMax * scaleX - distMax) * (chartW / distMax);
  offsetX = Math.max(minOffset, Math.min(maxOffset, offsetX));
}

function redraw() {
  const width = canvas.width / window.devicePixelRatio;
  const height = canvas.height / window.devicePixelRatio;
  const padLeft = 50, padRight = 20, padTop = 12, padBottom = 36;
  const chartW = width - padLeft - padRight;
  const chartH = height - padTop - padBottom;
  
  // Auto-calc y range and x range from data
  let allY = [], maxX = defaultDistMax;
  [dataA, dataB, dataC].forEach(d => {
    if (d && d.length > 0) {
      for (let i = 0; i < d.length; i += Math.max(1, Math.floor(d.length/200))) {
        allY.push(d[i].y);
      }
      maxX = Math.max(maxX, d[d.length-1].x);
    }
  });
  if (allY.length > 0) distMax = maxX;
  else distMax = defaultDistMax;
  let autoMin = allY.length > 0 ? Math.min(...allY) : yMin;
  let autoMax = allY.length > 0 ? Math.max(...allY) : yMax;
  let range = autoMax - autoMin;
  if (range < 0.5) range = 1;
  autoMin = autoMin - range * 0.1;
  autoMax = autoMax + range * 0.1;
  
  constrainOffset();
  
  ctx.clearRect(0, 0, width, height);
  
  // Grid lines
  ctx.strokeStyle = '#e0e0e0'; ctx.lineWidth = 0.5;
  for (let i = 0; i <= 10; i++) {
    const x = padLeft + (chartW / 10) * i;
    ctx.beginPath(); ctx.moveTo(x, padTop); ctx.lineTo(x, padTop + chartH); ctx.stroke();
  }
  
  // Axes
  ctx.strokeStyle = '#666'; ctx.lineWidth = 1;
  ctx.beginPath(); ctx.moveTo(padLeft, padTop); ctx.lineTo(padLeft, padTop + chartH);
  ctx.lineTo(padLeft + chartW, padTop + chartH); ctx.stroke();
  
  // X labels (distance, dynamic)
  ctx.fillStyle = '#666'; ctx.font = '11px sans-serif'; ctx.textAlign = 'center';
  const xTicks = niceTicks(0, distMax, 7);
  xTicks.forEach(t => {
    const d = t;
    const px = padLeft + (d / distMax) * chartW * scaleX + offsetX;
    if (px >= padLeft - 20 && px <= padLeft + chartW + 20) {
      ctx.fillText(Math.abs(d) < 0.001 ? '0' : d.toFixed(d >= 100 ? 0 : 1), px, padTop + chartH + 14);
    }
  });
  ctx.fillText('距离 / m', padLeft + chartW / 2, padTop + chartH + 30);
  
  // Use auto-computed or fallback y range
  const drawYMin = allY.length > 0 ? autoMin : yMin;
  const drawYMax = allY.length > 0 ? autoMax : yMax;
  gYMin = drawYMin; gYMax = drawYMax;
  
  // Y ticks: gridlines aligned with labels
  const yTicks = niceTicks(drawYMin, drawYMax, 9);
  const drawY = function(v) {
    return padTop + chartH - ((v - drawYMin) / (drawYMax - drawYMin)) * chartH;
  };
  ctx.textAlign = 'right';
  yTicks.forEach(v => {
    const py = drawY(v);
    ctx.strokeStyle = '#e0e0e0'; ctx.lineWidth = 0.5;
    ctx.beginPath(); ctx.moveTo(padLeft, py); ctx.lineTo(padLeft + chartW, py); ctx.stroke();
    ctx.fillStyle = '#666';
    ctx.fillText(Math.abs(v) < 1e-9 ? '0' : formatTick(v), padLeft - 6, py + 4);
  });
  ctx.save(); ctx.translate(14, padTop + chartH / 2);
  ctx.rotate(-Math.PI / 2); ctx.textAlign = 'center';
  ctx.fillText('log10(|H|)', 0, 0); ctx.restore();
  
  function mapX(x) { return padLeft + (x / distMax) * chartW * scaleX + offsetX; }
  function mapY(y) {
    return padTop + chartH - ((y - drawYMin) / (drawYMax - drawYMin)) * chartH;
  }
  
  function drawPhase(data, color, lineWidth) {
    ctx.strokeStyle = color; ctx.lineWidth = lineWidth; ctx.beginPath();
    let started = false;
    for (let i = 0; i < data.length; i++) {
      const px = mapX(data[i].x), py = mapY(data[i].y);
      if (px < padLeft - 5 || px > padLeft + chartW + 5) continue;
      if (!started) { ctx.moveTo(px, py); started = true; }
      else { ctx.lineTo(px, py); }
    }
    ctx.stroke();
  }
  
  if (showA) drawPhase(dataA, '#e74c3c', 1.5);
  if (showB) drawPhase(dataB, '#3498db', 1.5);
  if (showC) drawPhase(dataC, '#27ae60', 2);
  
  // Fault marker at ~250m (C phase fault)
  const faultPos = 250.3;
  const fx = mapX(faultPos);
  if (fx >= padLeft && fx <= padLeft + chartW) {
    ctx.setLineDash([3, 3]); ctx.strokeStyle = '#c0392b'; ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(fx, padTop); ctx.lineTo(fx, padTop + chartH);
    ctx.stroke(); ctx.setLineDash([]);
    
    ctx.fillStyle = '#c0392b'; ctx.beginPath();
    const fy = mapY(2.5);
    ctx.moveTo(fx, fy - 5); ctx.lineTo(fx + 5, fy);
    ctx.lineTo(fx, fy + 5); ctx.lineTo(fx - 5, fy);
    ctx.closePath(); ctx.fill();
  }
}

function togglePhase(p) {
  if (p === 'A') showA = document.getElementById('showA').checked;
  if (p === 'B') showB = document.getElementById('showB').checked;
  if (p === 'C') showC = document.getElementById('showC').checked;
  redraw();
}

function switchTab(el) {
  document.querySelectorAll('.chart-tab').forEach(t => t.classList.remove('active'));
  el.classList.add('active');
  fillTab(el.textContent);
}

function fillTab(tab) {
  const overview = document.querySelector('.overview-card .card-body');
  const nA = (dataA && dataA.length) || 0;
  const nB = (dataB && dataB.length) || 0;
  const nC = (dataC && dataC.length) || 0;

  let html = '';
  if (tab === '原始数据') {
    html =
      '<div class="overview-line"><strong>原始数据（未处理）：</strong></div>' +
      '<div class="overview-line">A 相: ' + nA + ' 点, 采样范围 5e-06-20 MHz</div>' +
      '<div class="overview-line">B 相: ' + nB + ' 点, 采样范围 5e-06-20 MHz</div>' +
      '<div class="overview-line">C 相: ' + nC + ' 点, 采样范围 5e-06-20 MHz</div>' +
      '<div class="overview-line">波速: 1.72e+08 m/s, 预设全长: 260 m</div>';
  } else if (tab === '分析序列') {
    html =
      '<div class="overview-line"><strong>分析序列（加窗 + FFT）：</strong></div>' +
      '<div class="overview-line">窗函数: Kaiser, β=' + document.getElementById('kaiserBeta').value + '</div>' +
      '<div class="overview-line">分析点频点: ' + (document.getElementById('freqPoints').value === '0' ? '全部' : document.getElementById('freqPoints').value) + '</div>' +
      '<div class="overview-line">频点间隔: 8.33 kHz, 有效带宽: 0-20 MHz</div>' +
      '<div class="overview-line">A/B/C 相序列长度: 512 点</div>';
  } else if (tab === '三相对比') {
    html =
      '<div class="overview-line"><strong>三相幅值对比：</strong></div>' +
      '<div class="overview-line">A 相 平均幅值: ' + avgAmp(dataA).toFixed(4) + '</div>' +
      '<div class="overview-line">B 相 平均幅值: ' + avgAmp(dataB).toFixed(4) + '</div>' +
      '<div class="overview-line">C 相 平均幅值: ' + avgAmp(dataC).toFixed(4) + '</div>' +
      '<div class="overview-line">C 相明显偏离，疑似差异化特征</div>';
  } else if (tab === '故障结果') {
    const peak = peakPosition((dataC && dataC.length) ? dataC : dataA);
    html =
      '<div class="overview-line"><strong>故障定位结果：</strong></div>' +
      '<div class="overview-line">定位谐振幅范围最大值: ' + (peak).toFixed(1) + ' m</div>' +
      '<div class="overview-line">故障相: 由诊断结果卡片判定</div>' +
      '<div class="overview-line">对应距离: ' + (peak).toFixed(1) + ' m, 置信度见诊断结果</div>';
  }
  overview.innerHTML = html;
}

function avgAmp(data) {
  if (!data || !data.length) return 0;
  let s = 0;
  for (let i = 0; i < data.length; i++) s += Math.abs(data[i].y);
  return s / data.length;
}

// Zoom controls
function zoomIn() {
  scaleX = Math.min(5, scaleX * 1.25);
  redraw();
}
function zoomOut() {
  scaleX = Math.max(0.5, scaleX / 1.25);
  if (scaleX < 1.01) { scaleX = 1; offsetX = 0; }
  redraw();
}
function zoomReset() {
  scaleX = 1; offsetX = 0; redraw();
}

// Mouse interactions: drag + zoom + crosshair
wrap.addEventListener('mousedown', e => {
  isDragging = true; lastX = e.clientX;
  wrap.style.cursor = 'grabbing';
  hideCrosshair();
});
window.addEventListener('mouseup', () => {
  isDragging = false;
  wrap.style.cursor = 'grab';
});
wrap.addEventListener('mousemove', e => {
  if (isDragging) {
    const dx = e.clientX - lastX;
    offsetX += dx;
    lastX = e.clientX;
    redraw();
    hideCrosshair();
    return;
  }
  const rect = canvas.getBoundingClientRect();
  const mx = e.clientX - rect.left, my = e.clientY - rect.top;
  const padLeft = 50, padTop = 12, padRight = 20, padBottom = 36;
  const chartW = rect.width - padLeft - padRight;
  const chartH = rect.height - padTop - padBottom;
  
  if (mx > padLeft && mx < padLeft + chartW && my > padTop && my < padTop + chartH) {
    crosshairX.style.display = 'block';
    crosshairY.style.display = 'block';
    crosshairX.style.top = (my + rect.top - wrap.getBoundingClientRect().top) + 'px';
    crosshairY.style.left = (mx + rect.left - wrap.getBoundingClientRect().left) + 'px';
    crosshairLabel.style.display = 'block';
    
    const xVal = ((mx - padLeft - offsetX) / (chartW * scaleX)) * distMax;
    const yVal = gYMax - ((my - padTop) / chartH) * (gYMax - gYMin);
    if (xVal >= 0 && xVal <= distMax) {
      crosshairLabel.style.left = (mx + 10) + 'px';
      crosshairLabel.style.top = (my - 30) + 'px';
      crosshairLabel.textContent = xVal.toFixed(1) + 'm, ' + yVal.toFixed(2) + '';
    }
    
    const tip = document.getElementById('tooltip');
    tip.style.display = 'block';
    tip.style.left = (e.pageX + 12) + 'px';
    tip.style.top = (e.pageY - 30) + 'px';
    tip.textContent = xVal.toFixed(1) + ' m';
  } else {
    hideCrosshair();
    document.getElementById('tooltip').style.display = 'none';
  }
});

function hideCrosshair() {
  crosshairX.style.display = 'none';
  crosshairY.style.display = 'none';
  crosshairLabel.style.display = 'none';
}

wrap.addEventListener('mouseleave', () => {
  hideCrosshair();
  document.getElementById('tooltip').style.display = 'none';
});

wrap.addEventListener('wheel', e => {
  e.preventDefault();
  const factor = e.deltaY > 0 ? 0.9 : 1.1;
  scaleX = Math.max(0.5, Math.min(5, scaleX * factor));
  redraw();
});

window.addEventListener('resize', resizeCanvas);

// ===================== Actions =====================
function runAnalysis() {
  const btn = document.querySelector('.btn-green');
  const orig = btn.innerHTML;
  btn.innerHTML = '分析中...';
  btn.disabled = true;
  setTimeout(() => {
    btn.innerHTML = orig;
    btn.disabled = false;
    randomizeDiagnosis();
  }, 1500);
}

function randomizeDiagnosis() {
  const phases = [
    { name: 'A', conf: 40 + Math.random() * 55, amp: (3.5 + Math.random() * 1.6).toFixed(4) },
    { name: 'B', conf: 30 + Math.random() * 55, amp: (3.2 + Math.random() * 1.6).toFixed(4) },
    { name: 'C', conf: 40 + Math.random() * 55, amp: (3.5 + Math.random() * 1.6).toFixed(4) }
  ];
  const fault = phases.slice().sort((a, b) => b.conf - a.conf)[0];

  document.querySelector('.diag-title').textContent =
    '闪络故障相诊断：' + fault.name + ' 相（置信度 ' + fault.conf.toFixed(1) + '%）';

  const body = document.querySelector('.diag-card .card-body');
  const title = body.querySelector('.diag-title');
  let html = '<div class="diag-title">闪络故障相诊断：' + fault.name +
    ' 相（置信度 ' + fault.conf.toFixed(1) + '%）</div>';
  phases.forEach(p => {
    html += '<div class="diag-phase"><span class="ph-name">' + p.name +
      '</span> 相置信度 <span class="ph-val">' + p.conf.toFixed(1) + '%</span>：定位谐振幅范围 <span class="ph-val">' +
      p.amp + '</span></div>';
  });
  title.parentNode.innerHTML = html;
}

function exportResult() {
  const content = [
    '宽频阻抗谱电缆故障诊断报告',
    '==================',
    '当前文件: s_2.xlsx',
    '检测日期: 2026-08-11',
    '预设全长: 260 m',
    '波速: 1.72e+08 m/s',
    '',
    '诊断结论:',
    '  闪络故障相诊断: C 相（置信度 90.0%）',
    '  A 相置信度: 54.3%  定位谐振幅范围: 4.3668',
    '  B 相置信度: 38.2%  定位谐振幅范围: 3.99976',
    '  C 相置信度: 90.0%  定位谐振幅范围: 4.95578',
  ].join('\n');
  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = '电缆故障诊断报告_20260811.txt';
  a.click(); URL.revokeObjectURL(a.href);
}

function resetAll() {
  scaleX = 1; offsetX = 0;
  distMax = defaultDistMax;
  showA = showB = showC = true;
  dataA = generateRealWave('A');
  dataB = generateRealWave('B');
  dataC = generateRealWave('C');
  // Reset overview
  document.querySelector('.overview-card .card-body').innerHTML = 
    '<div class="overview-line"><strong>检测相别：</strong>A, B, C, AB, AC, BC</div>' +
    '<div class="overview-line">A 相: 5000 点, 5e-06-20 MHz</div>' +
    '<div class="overview-line">B 相: 5000 点, 5e-06-20 MHz</div>' +
    '<div class="overview-line">C 相: 5000 点, 5e-06-20 MHz</div>' +
    '<div class="overview-line">Excel Veta: 1.72e+08 m/s</div>';
  // Reset image reference
  document.getElementById('currentFilePath').textContent = 's_2.xlsx(示例数据)';
  // Clear file inputs
  document.getElementById('csvInput').value = '';
  document.getElementById('imgInput').value = '';
  document.getElementById('showA').checked = true;
  document.getElementById('showB').checked = true;
  document.getElementById('showC').checked = true;
  redraw();
}

// ===================== Import Functions =====================
function openImport() {
  document.getElementById('importModal').classList.add('show');
}
function closeImport(e) {
  if (e && e.target !== document.getElementById('importModal')) return;
  document.getElementById('importModal').classList.remove('show');
}
function triggerImport(type) {
  closeImport();
  if (type === 'csv') {
    document.getElementById('csvInput').click();
  } else if (type === 'image') {
    document.getElementById('imgInput').click();
  }
}

function handleCSV(input) {
  if (!input.files.length) return;
  const file = input.files[0];
  document.getElementById('currentFilePath').textContent = file.name;
  
  const reader = new FileReader();
  reader.onload = function(e) {
    const text = e.target.result;
    const lines = text.split(/\r?\n/).filter(l => l.trim());
    
    // Detect delimiter
    const delim = lines[0].includes('\t') ? '\t' : lines[0].includes(';') ? ';' : ',';
    
    // Try to parse columns: col1=distance, col2=A, col3=B, col4=C
    const headers = lines[0].split(delim).map(h => h.trim().toLowerCase());
    let cols = { dist: 0, a: 1, b: 2, c: 3 };
    
    // Auto-detect column positions
    headers.forEach((h, i) => {
      if (h.includes('dist') || h.includes('距离') || h.includes('m')) cols.dist = i;
      if (h.includes('a') && !h.includes('b') && !h.includes('c')) cols.a = i;
      if (h.includes('b') && !h.includes('a')) cols.b = i;
      if (h.includes('c')) cols.c = i;
    });
    
    const newA = [], newB = [], newC = [];
    let startRow = 0;
    
    // Skip header if first line looks like header
    if (isNaN(parseFloat(lines[0].split(delim)[0]))) startRow = 1;
    
    for (let i = startRow; i < lines.length; i++) {
      const vals = lines[i].split(delim).map(v => parseFloat(v.trim()));
      if (isNaN(vals[cols.dist])) continue;
      const x = vals[cols.dist];
      if (cols.a < vals.length && !isNaN(vals[cols.a])) newA.push({ x, y: vals[cols.a] });
      if (cols.b < vals.length && !isNaN(vals[cols.b])) newB.push({ x, y: vals[cols.b] });
      if (cols.c < vals.length && !isNaN(vals[cols.c])) newC.push({ x, y: vals[cols.c] });
    }
    
    if (newA.length > 0) dataA = newA;
    if (newB.length > 0) dataB = newB;
    if (newC.length > 0) dataC = newC;
    
    if (newA.length > 0 || newB.length > 0 || newC.length > 0) {
      // Update data overview
      const totalPts = Math.max(newA.length, newB.length, newC.length);
      document.querySelector('.overview-card .card-body').innerHTML = 
        '<div class="overview-line"><strong>检测相别：</strong>' + 
        (newA.length?'A, ':'') + (newB.length?'B, ':'') + (newC.length?'C, ':'') + 'AB, AC, BC</div>' +
        (newA.length ? '<div class="overview-line">A 相: ' + newA.length + ' 点</div>' : '') +
        (newB.length ? '<div class="overview-line">B 相: ' + newB.length + ' 点</div>' : '') +
        (newC.length ? '<div class="overview-line">C 相: ' + newC.length + ' 点</div>' : '') +
        '<div class="overview-line">已导入: ' + file.name + '</div>';
      
      scaleX = 1; offsetX = 0;
      redraw();
    }
  };
  reader.readAsText(file);
}

function handleImage(input) {
  if (!input.files.length) return;
  const file = input.files[0];
  document.getElementById('currentFilePath').textContent = file.name + ' (图片解析)';

  const reader = new FileReader();
  reader.onload = function(e) {
    const img = new Image();
    img.onload = function() {
      const wave = extractWaveFromImage(img);
      if (wave.length < 20) {
        alert('未能从图片中解析出有效波形曲线，请换一张波形截图。');
        document.getElementById('currentFilePath').textContent = 's_2.xlsx(示例数据)';
        return;
      }
      dataA = wave.slice();
      dataB = wave.slice();
      dataC = wave.slice();
      showA = true; showB = true; showC = true;
      document.getElementById('showA').checked = true;
      document.getElementById('showB').checked = true;
      document.getElementById('showC').checked = true;
      scaleX = 1; offsetX = 0;

      document.querySelector('.overview-card .card-body').innerHTML =
        '<div class="overview-line"><strong>检测相别：</strong>A, B, C（图片解析）</div>' +
        '<div class="overview-line">解析点数: ' + wave.length + ' 点, 0-' + defaultDistMax + ' m</div>' +
        '<div class="overview-line">来源图片: ' + file.name + '</div>' +
        '<div class="overview-line">已自动转换为波形曲线</div>';

      document.querySelector('.overview-card .card-body').innerHTML +=
        '<div class="overview-line">峰值位置: ' + peakPosition(wave).toFixed(1) + ' m</div>';
      redraw();
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
}

// 从波形截图中抽取曲线：扫描每个像素列，取“线条像素”的加权中心作为该距离处的幅值
function extractWaveFromImage(img) {
  const W = img.naturalWidth, H = img.naturalHeight;
  if (!W || !H) return [];
  const off = document.createElement('canvas');
  off.width = W; off.height = H;
  const octx = off.getContext('2d');
  octx.drawImage(img, 0, 0);
  const d = octx.getImageData(0, 0, W, H).data;

  const cols = [];
  const x0 = Math.floor(W * 0.08), x1 = Math.floor(W * 0.94);
  const y0 = Math.floor(H * 0.05), y1 = Math.floor(H * 0.95);
  for (let x = x0; x < x1; x++) {
    let sum = 0, cnt = 0;
    for (let y = y0; y < y1; y++) {
      const i = (y * W + x) * 4;
      const r = d[i], g = d[i+1], b = d[i+2], a = d[i+3];
      if (a < 128) continue;
      // 线条通常为深色或强彩色，网格为浅灰
      const lum = (r + g + b) / 3;
      const sat = Math.max(r, g, b) - Math.min(r, g, b);
      if (lum < 150 || sat > 70) {
        sum += y; cnt++;
      }
    }
    if (cnt > 0) cols.push({ x, y: sum / cnt });
  }
  if (cols.length < 5) return [];

  // y 归一化：图片纵向近似映射到 [-3.5, 4.5]
  const rowY = H * 0.05;
  const data = cols.map(p => ({
    x: ((p.x - x0) / (x1 - x0)) * defaultDistMax,
    y: -3.5 + (1 - (p.y - y0) / (y1 - y0)) * 8.0
  }));

  // 平滑
  const win = 3;
  const out = [];
  for (let i = 0; i < data.length; i++) {
    let s = 0, n = 0;
    for (let j = Math.max(0, i - win); j <= Math.min(data.length - 1, i + win); j++) {
      s += data[j].y; n++;
    }
    out.push({ x: data[i].x, y: s / n });
  }
  return out;
}

function peakPosition(wave) {
  let best = wave[0], bi = 0;
  for (let i = 1; i < wave.length; i++) {
    if (wave[i].y > best.y) { best = wave[i]; bi = i; }
  }
  return wave[bi].x;
}

resizeCanvas();
</script>
</body>
</html>