Compressor/frontend/src/App.vue

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
import { ElMessageBox } from 'element-plus'
import { createAnnotation, deleteAnnotation, deletePretrain, fetchAnnotationConfig, fetchAnnotationsByIds, fetchPeriodDetail, fetchPretrainStatus, fetchQueryOptions, fetchTimePoints, fetchTspluseRuler, fetchWaveWindow, getToken, login as apiLogin, logout as apiLogout, recordPretrain } from './api'
import PeriodModal from './components/PeriodModal.vue'
import TimePointStrip from './components/TimePointStrip.vue'
import WaveChart from './components/WaveChart.vue'
import { STOPPED_COLOR, statusGradientColor } from './statusColor'
import { MEASUREMENT_TYPES, type Annotation, type AnnotationLabel, type Cycle, type MeasurementType, type PeriodDetail, type QueryOption, type TimePoint, type QueryOptionsResponse, type WaveWindowFile, type WaveWindowResponse } from './types'

const queryMeta = ref<QueryOptionsResponse | null>(null)
const selectedPointName = ref('')
const selectedTypes = ref<MeasurementType[]>(['压力'])
const minTime = ref('')
const maxTime = ref('')
const windowSize = ref(4)
const maxPoints = ref(200000)
const noSampling = ref(false)
const includeStopped = ref(false)
const abnormalOnly = ref(false)
const noCycleOnly = ref(false)
const minStatus = ref<number | null>(null)
const ruler = ref<{ min: number; max: number } | null>(null)
const timePoints = ref<TimePoint[]>([])
const referencePoints = ref<TimePoint[]>([])
const startIndex = ref(0)
const waveData = ref<WaveWindowResponse | null>(null)
const chartMode = ref<'split' | 'merge'>('split')
const chartDirty = ref(false)
const queryLoading = ref(false)
const timePointsLoading = ref(false)
const waveLoading = ref(false)
const errorMessage = ref('')
const initialized = ref(false)
const periodDetail = ref<PeriodDetail | null>(null)
const periodVisible = ref(false)
const periodLoading = ref(false)
const annotationWidth = ref(10)
const annotations = ref<Annotation[]>([])
const annotationLoading = ref(false)
const loggedIn = ref(false)
const loginLoading = ref(false)
const loginError = ref('')
const loginForm = reactive({ username: '', password: '' })
const waveChartRef = ref<InstanceType<typeof WaveChart> | null>(null)
const recordedFileIds = ref<number[]>([])
const recordingFileId = ref<number | null>(null)
let queryDebounce: ReturnType<typeof setTimeout> | undefined
let waveRequestId = 0

const pointNames = computed(() => queryMeta.value?.pointNames ?? [])

const pointCounts = computed<Record<string, { pre: number | null; ab: number | null }>>(() => {
  const map: Record<string, { pre: number | null; ab: number | null }> = {}
  for (const name of pointNames.value) {
    map[name] = {
      pre: queryMeta.value?.pretrainCounts?.[name] ?? null,
      ab: queryMeta.value?.abnormalCounts?.[name] ?? null,
    }
  }
  return map
})

function pointLabel(pointName: string): string {
  const { pre, ab } = pointCounts.value[pointName] ?? { pre: null, ab: null }
  const inner: string[] = []
  if (pre != null) inner.push(String(pre))
  if (ab != null) inner.push(String(ab))
  return inner.length ? `${pointName} (${inner.join(' · ')})` : pointName
}
const selectedOptionRows = computed<QueryOption[]>(() => (
  queryMeta.value?.options.filter((row) => (
    row.pointName === selectedPointName.value && selectedTypes.value.includes(row.measurementType)
  )) ?? []
))
const selectedWindowPoints = computed(() => {
  const slice = timePoints.value.slice(startIndex.value, startIndex.value + stripWindowSize.value)
  return hasReference.value ? [...referencePoints.value, ...slice] : slice
})
const hasReference = computed(() => referencePoints.value.length > 0)
const stripWindowSize = computed(() => Math.max(0, windowSize.value - (hasReference.value ? 1 : 0)))
const maxStart = computed(() => Math.max(0, timePoints.value.length - stripWindowSize.value))
const endIndex = computed(() => Math.min(timePoints.value.length, startIndex.value + stripWindowSize.value))
const statusFilter = computed(() => {
  const list: string[] = []
  if (abnormalOnly.value) list.push('abnormal')
  if (noCycleOnly.value) list.push('no_cycle')
  return list
})
const currentCycles = computed(() => waveData.value?.cycles ?? [])
const currentSource = computed(() => waveData.value?.source ?? timePointsSource.value)
const timePointsSource = ref<'database' | 'demo'>('demo')
const availableTypeCount = computed(() => selectedOptionRows.value.reduce((total, row) => total + row.fileCount, 0))
const annotatedFileIds = computed(() => [...new Set(annotations.value.map((item) => item.waveFileId))])

function toInputTime(value: string) {
  if (!value) return ''
  return value.replace('T', ' ').slice(0, 19)
}

function toApiTime(value: string) {
  return value ? value.replace('T', ' ') + (value.length === 16 ? ':00' : '') : undefined
}

function boundsForSelection() {
  const rows = selectedOptionRows.value
  if (!rows.length) return null
  const min = rows.reduce((latest, row) => (row.minTime > latest ? row.minTime : latest), rows[0].minTime)
  const max = rows.reduce((earliest, row) => (row.maxTime < earliest ? row.maxTime : earliest), rows[0].maxTime)
  return { min: toInputTime(min), max: toInputTime(max) }
}

function syncTimeBounds(force = false) {
  const bounds = boundsForSelection()
  if (!bounds) return
  if (force || !minTime.value || minTime.value < bounds.min || minTime.value > bounds.max) minTime.value = bounds.min
  if (force || !maxTime.value || maxTime.value > bounds.max || maxTime.value < bounds.min) maxTime.value = bounds.max
  if (minTime.value > maxTime.value) {
    minTime.value = bounds.min
    maxTime.value = bounds.max
  }
}

function formatDateTime(value: string | undefined) {
  if (!value) return '未选择'
  return value.replace('T', ' ').slice(0, 16)
}

function statusText() {
  if (timePointsLoading.value) return '正在读取时间点'
  if (waveLoading.value) return '正在整理波形'
  if (!timePoints.value.length) return '等待查询'
  return '窗口已就绪'
}

async function loadOptions() {
  queryLoading.value = true
  errorMessage.value = ''
  try {
    const result = await fetchQueryOptions()
    queryMeta.value = result
    selectedPointName.value = result.pointNames[0] ?? ''
    syncTimeBounds(true)
    initialized.value = true
    await loadTimePoints()
  } catch (error) {
    errorMessage.value = error instanceof Error ? error.message : '查询条件读取失败'
  } finally {
    queryLoading.value = false
  }
}

async function loadTspluseRuler() {
  try {
    ruler.value = await fetchTspluseRuler()
  } catch {
    ruler.value = null
  }
}

function firstRunningIndex(): number {
  const index = timePoints.value.findIndex((point) =>
    selectedTypes.value.some((type) => (point.files[type]?.rpm ?? 0) > 0),
  )
  return index >= 0 ? index : 0
}

async function loadTimePoints() {
  if (!selectedPointName.value || !selectedTypes.value.length) return
  timePointsLoading.value = true
  waveData.value = null
  errorMessage.value = ''
  try {
    const result = await fetchTimePoints({
      pointName: selectedPointName.value,
      measurementTypes: selectedTypes.value,
      minTime: toApiTime(minTime.value),
      maxTime: toApiTime(maxTime.value),
      includeStopped: includeStopped.value,
      minStatus: noCycleOnly.value ? null : minStatus.value,
      statusFilter: statusFilter.value,
    })
    timePoints.value = result.points
    referencePoints.value = result.referencePoints ?? []
    timePointsSource.value = result.source
    startIndex.value = Math.max(
      0,
      Math.min(firstRunningIndex(), Math.max(0, timePoints.value.length - stripWindowSize.value)),
    )
    chartDirty.value = true
    void loadAnnotations()
  } catch (error) {
    timePoints.value = []
    referencePoints.value = []
    errorMessage.value = error instanceof Error ? error.message : '时间点读取失败'
  } finally {
    timePointsLoading.value = false
  }
}

async function loadWaveWindowNow() {
  const points = selectedWindowPoints.value
  if (!points.length || !selectedPointName.value) {
    waveData.value = null
    chartDirty.value = false
    return
  }
  const requestId = ++waveRequestId
  waveLoading.value = true
  try {
    const result = await fetchWaveWindow({
      pointName: selectedPointName.value,
      measurementTypes: selectedTypes.value,
      points,
      maxPoints: maxPoints.value,
      noSampling: noSampling.value,
    })
    if (requestId === waveRequestId) {
      waveData.value = result
      chartDirty.value = false
    }
  } catch (error) {
    if (requestId === waveRequestId) errorMessage.value = error instanceof Error ? error.message : '波形读取失败'
  } finally {
    if (requestId === waveRequestId) waveLoading.value = false
  }
}

function markChartDirty() {
  chartDirty.value = true
}

function scheduleTimePoints() {
  if (!initialized.value) return
  if (queryDebounce) clearTimeout(queryDebounce)
  queryDebounce = setTimeout(() => void loadTimePoints(), 180)
}

function onPointChange() {
  syncTimeBounds(true)
  scheduleTimePoints()
}

function onTypesChange() {
  if (!selectedTypes.value.length) {
    selectedTypes.value = ['压力']
    return
  }
  syncTimeBounds(true)
  scheduleTimePoints()
}

function onTimeChange() {
  if (minTime.value > maxTime.value) {
    errorMessage.value = '开始时间不能晚于结束时间'
    return
  }
  scheduleTimePoints()
}

function onStartIndexChange(value: number) {
  startIndex.value = Math.max(0, Math.min(value, maxStart.value))
  markChartDirty()
}

function onWindowSizeChange(value: number) {
  windowSize.value = Math.max(1, Math.min(200, Math.round(value || 1)))
  startIndex.value = Math.min(startIndex.value, maxStart.value)
  markChartDirty()
}

function resetWindow() {
  startIndex.value = 0
  markChartDirty()
}

function pageWindow(direction: -1 | 1) {
  const next = startIndex.value + direction * stripWindowSize.value
  startIndex.value = Math.max(0, Math.min(next, maxStart.value))
  markChartDirty()
}

function jumpToIndex(index: number) {
  onStartIndexChange(Number(index))
}

const jumpOptions = computed(() => timePoints.value.map((point, index) => {
  const file = point.files['压力']
  const text = point.sampleTime.replace('T', ' ')
  const label = file && file.status !== undefined ? `${text} (${file.status})` : text
  const color = file ? (file.rpm <= 0 ? STOPPED_COLOR : statusGradientColor(file.status, ruler.value)) : undefined
  return { value: index, label, color }
}))

function sampleTimeStyle(file: WaveWindowFile) {
  if (file.measurementType !== '压力') return undefined
  const color = file.rpm <= 0 ? STOPPED_COLOR : statusGradientColor(file.status, ruler.value)
  return { color }
}

function refresh() {
  void loadOptions()
}

async function openPeriod(cycle: Cycle) {
  periodVisible.value = true
  periodLoading.value = true
  periodDetail.value = null
  try {
    periodDetail.value = await fetchPeriodDetail(cycle.waveFileId, cycle.periodNo)
  } catch (error) {
    errorMessage.value = error instanceof Error ? error.message : '周期详情读取失败'
    periodVisible.value = false
  } finally {
    periodLoading.value = false
  }
}

function closePeriod() {
  periodVisible.value = false
}

async function loadAnnotationConfig() {
  try {
    const result = await fetchAnnotationConfig()
    annotationWidth.value = result.annotationWidth
  } catch {
    annotationWidth.value = 10
  }
}

async function loadAnnotations() {
  const ids = [...new Set(
    timePoints.value.flatMap((point) => (
      selectedTypes.value
        .map((type) => point.files[type]?.id)
        .filter((id): id is number => id != null)
    )),
  )]
  if (!ids.length) {
    annotations.value = []
    return
  }
  try {
    const result = await fetchAnnotationsByIds(ids)
    annotations.value = result.annotations
  } catch {
    annotations.value = []
  }
}

type AnnotationBlock = {
  waveFileId: number
  periodStart: number
  periodEnd: number
  sampleIndexStart: number
  sampleIndexEnd: number
}

function annotationBlock(cycle: Cycle): AnnotationBlock | null {
  const width = Math.max(1, annotationWidth.value)
  const fileCycles = (waveData.value?.cycles ?? []).filter((item) => item.waveFileId === cycle.waveFileId)
  const maxPeriod = Math.max(1, ...fileCycles.map((item) => item.periodNo))
  let leftBound = 1
  let rightBound = maxPeriod
  const existing = annotations.value
    .filter((item) => item.waveFileId === cycle.waveFileId)
    .sort((a, b) => a.periodStart - b.periodStart)
  for (const item of existing) {
    if (item.periodEnd < cycle.periodNo) {
      leftBound = Math.max(leftBound, item.periodEnd + 1)
    } else if (item.periodStart > cycle.periodNo) {
      rightBound = Math.min(rightBound, item.periodStart - 1)
    } else {
      return null
    }
  }
  if (leftBound > rightBound) return null
  let start = Math.max(leftBound, cycle.periodNo - Math.floor((width - 1) / 2))
  let end = Math.min(rightBound, start + width - 1)
  start = Math.max(leftBound, end - width + 1)
  const startCycle = fileCycles.find((item) => item.periodNo === start)
  const endCycle = fileCycles.find((item) => item.periodNo === end)
  return {
    waveFileId: cycle.waveFileId,
    periodStart: start,
    periodEnd: end,
    sampleIndexStart: startCycle?.startSampleIndex ?? cycle.startSampleIndex,
    sampleIndexEnd: endCycle?.endSampleIndex ?? cycle.endSampleIndex,
  }
}

async function chooseLabel(block: AnnotationBlock): Promise<AnnotationLabel | null> {
  try {
    await ElMessageBox.confirm(
      `将在周期 ${block.periodStart} — ${block.periodEnd} 创建标注，请选择样本类型`,
      '创建标注',
      {
        confirmButtonText: '正常样本',
        cancelButtonText: '异常样本',
        distinguishCancelAndClose: true,
        type: 'info',
        closeOnClickModal: false,
      },
    )
    return '正常'
  } catch (action) {
    if (action === 'cancel') return '异常'
    return null
  }
}

async function onAnnotationToggle(cycle: Cycle) {
  if (annotationLoading.value) return
  const existing = annotations.value.find((item) => (
    item.waveFileId === cycle.waveFileId && cycle.periodNo >= item.periodStart && cycle.periodNo <= item.periodEnd
  ))
  if (existing) {
    try {
      await ElMessageBox.confirm(
        `取消该标注（${existing.label}，周期 ${existing.periodStart} — ${existing.periodEnd}）？`,
        '取消标注',
        { confirmButtonText: '取消标注', cancelButtonText: '保留', type: 'warning', closeOnClickModal: false },
      )
    } catch {
      return
    }
    annotationLoading.value = true
    try {
      await deleteAnnotation(existing.id)
      await loadAnnotations()
    } catch (error) {
      errorMessage.value = error instanceof Error ? error.message : '标注取消失败'
    } finally {
      annotationLoading.value = false
    }
    return
  }
  const block = annotationBlock(cycle)
  if (!block) return
  const label = await chooseLabel(block)
  if (!label) return
  annotationLoading.value = true
  try {
    await createAnnotation({
      wave_file_id: block.waveFileId,
      label,
      period_start: block.periodStart,
      period_end: block.periodEnd,
      sample_index_start: block.sampleIndexStart,
      sample_index_end: block.sampleIndexEnd,
    })
    await loadAnnotations()
  } catch (error) {
    errorMessage.value = error instanceof Error ? error.message : '标注创建失败'
  } finally {
    annotationLoading.value = false
  }
}

watch(selectedPointName, () => {
  if (initialized.value) onPointChange()
})
watch(selectedTypes, () => {
  if (initialized.value) onTypesChange()
}, { deep: true })
watch([minTime, maxTime], () => {
  if (initialized.value) onTimeChange()
})
watch(windowSize, () => {
  if (initialized.value) onWindowSizeChange(windowSize.value)
})
watch(noSampling, () => {
  if (initialized.value && selectedWindowPoints.value.length) loadWaveWindowNow()
})
watch(includeStopped, () => {
  if (initialized.value) scheduleTimePoints()
})
watch(abnormalOnly, () => {
  if (initialized.value) scheduleTimePoints()
})
watch(noCycleOnly, () => {
  if (initialized.value) scheduleTimePoints()
})
watch(minStatus, () => {
  if (initialized.value) scheduleTimePoints()
})
watch(waveData, () => void refreshPretrainStatus(), { deep: false })

async function refreshPretrainStatus() {
  const ids = waveData.value?.files.map((file) => file.id) ?? []
  if (!ids.length) {
    recordedFileIds.value = []
    return
  }
  try {
    const result = await fetchPretrainStatus(ids)
    recordedFileIds.value = result.recorded
  } catch {
    recordedFileIds.value = []
  }
}

function locateFile(file: WaveWindowFile) {
  waveChartRef.value?.locateFile(file.pointIndex)
}

async function recordFile(file: WaveWindowFile) {
  if (recordedFileIds.value.includes(file.id) || recordingFileId.value != null) return
  recordingFileId.value = file.id
  try {
    const result = await recordPretrain({
      id: file.id,
      point_name: file.pointName,
      measurement_type: file.measurementType,
      rpm: file.rpm,
      sample_time: file.sampleTime,
      file_name: file.fileName,
    })
    if (result.recorded || result.already) {
      recordedFileIds.value = [...new Set([...recordedFileIds.value, file.id])]
    }
  } catch (error) {
    errorMessage.value = error instanceof Error ? error.message : '记录失败'
  } finally {
    recordingFileId.value = null
  }
}

async function deleteRecordedFile(file: WaveWindowFile) {
  if (!recordedFileIds.value.includes(file.id) || recordingFileId.value != null) return
  recordingFileId.value = file.id
  try {
    await deletePretrain(file.id)
    recordedFileIds.value = recordedFileIds.value.filter((id) => id !== file.id)
  } catch (error) {
    errorMessage.value = error instanceof Error ? error.message : '删除失败'
  } finally {
    recordingFileId.value = null
  }
}

async function handleLogin() {
  if (!loginForm.username || !loginForm.password) {
    loginError.value = '请输入账号和密码'
    return
  }
  loginLoading.value = true
  loginError.value = ''
  try {
    await apiLogin(loginForm.username, loginForm.password)
    loggedIn.value = true
    loginForm.password = ''
    await loadOptions()
    void loadTspluseRuler()
    void loadAnnotationConfig()
  } catch (error) {
    loginError.value = error instanceof Error ? error.message : '登录失败'
  } finally {
    loginLoading.value = false
  }
}

async function handleLogout() {
  await apiLogout()
  loggedIn.value = false
  waveData.value = null
  timePoints.value = []
  annotations.value = []
}

function onAuthExpired() {
  loggedIn.value = false
  waveData.value = null
  timePoints.value = []
  annotations.value = []
}

onMounted(() => {
  window.addEventListener('auth-expired', onAuthExpired)
  loggedIn.value = getToken() != null
  if (loggedIn.value) {
    void loadOptions()
    void loadTspluseRuler()
    void loadAnnotationConfig()
  }
})
onBeforeUnmount(() => {
  window.removeEventListener('auth-expired', onAuthExpired)
  if (queryDebounce) clearTimeout(queryDebounce)
})
</script>

<template>
  <div v-if="!loggedIn" class="login-shell">
    <form class="login-card" @submit.prevent="handleLogin">
      <div class="login-brand">
        <div class="brand-mark"><span></span><span></span><span></span></div>
        <div>
          <div class="brand-kicker">COMPRESSOR / WAVE LAB</div>
          <h1>故障预测波形工作台</h1>
        </div>
      </div>
      <p class="login-hint">请登录后继续使用</p>
      <el-input v-model="loginForm.username" class="login-input" size="large" placeholder="账号" clearable @input="loginError = ''" />
      <el-input v-model="loginForm.password" class="login-input" size="large" type="password" show-password placeholder="密码" @keyup.enter="handleLogin" @input="loginError = ''" />
      <el-alert v-if="loginError" class="login-error" type="error" :closable="false" show-icon :title="loginError" />
      <el-button class="login-button" type="primary" size="large" :loading="loginLoading" native-type="submit">登 录</el-button>
    </form>
  </div>
  <div v-else class="app-shell">
    <header class="app-header">
      <div class="brand-lockup">
        <div class="brand-mark"><span></span><span></span><span></span></div>
        <div>
          <div class="brand-kicker">COMPRESSOR / WAVE LAB</div>
          <h1>故障预测波形工作台</h1>
        </div>
      </div>
      <div class="header-meta">
        <span class="live-indicator"><i></i> 浏览模式</span>
        <span class="header-date">{{ selectedPointName || '未选择采样点' }}</span>
        <el-button class="header-refresh" type="primary" plain :loading="queryLoading" @click="refresh">刷新</el-button>
        <el-button class="header-logout" plain @click="handleLogout">退出登录</el-button>
      </div>
    </header>

    <main class="workspace">
      <section class="query-panel panel">
        <div class="panel-heading compact-heading">
          <div>
            <h2>查询条件</h2>
          </div>
          <el-tag class="connection-badge" :type="currentSource === 'database' ? 'success' : 'warning'" effect="plain">
            {{ currentSource === 'database' ? '数据库已连接' : '演示数据' }}
          </el-tag>
        </div>
        <div class="query-grid">
          <label class="field field-point">
            <span class="field-label">机组与部位</span>
            <el-select
              v-model="selectedPointName"
              class="query-control"
              size="large"
              filterable
              :disabled="queryLoading"
              placeholder="输入机组、气缸或部位关键词"
              filter-placeholder="搜索采样点"
            >
              <el-option v-for="pointName in pointNames" :key="pointName" :label="pointLabel(pointName)" :value="pointName">
                <span>{{ pointName }}</span>
                <template v-if="pointCounts[pointName]?.pre !== null || pointCounts[pointName]?.ab !== null">
                  <span class="point-counts">
                    (<span v-if="pointCounts[pointName]?.pre !== null">{{ pointCounts[pointName]?.pre }}</span><template v-if="pointCounts[pointName]?.pre !== null && pointCounts[pointName]?.ab !== null"> · </template><span v-if="pointCounts[pointName]?.ab !== null" class="abnormal-count">{{ pointCounts[pointName]?.ab }}</span>)
                  </span>
                </template>
              </el-option>
            </el-select>
          </label>
          <div class="field field-types">
            <span class="field-label">数据名称</span>
            <el-select
              v-model="selectedTypes"
              class="query-control"
              size="large"
              multiple
              collapse-tags
              collapse-tags-tooltip
              :max-collapse-tags="2"
              placeholder="选择数据名称"
            >
              <el-option v-for="type in MEASUREMENT_TYPES" :key="type" :label="type" :value="type" />
            </el-select>
          </div>
          <label class="field">
            <span class="field-label">开始时间</span>
            <el-date-picker
              v-model="minTime"
              class="query-control"
              size="large"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"
              :disabled="queryLoading"
              :disabled-date="(date: Date) => date < new Date(`${boundsForSelection()?.min ?? '1970-01-01 00:00:00'}`) || date > new Date(`${boundsForSelection()?.max ?? '2999-12-31 23:59:59'}`)"
              placeholder="选择开始时间"
            />
          </label>
          <label class="field">
            <span class="field-label">结束时间</span>
            <el-date-picker
              v-model="maxTime"
              class="query-control"
              size="large"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"
              :disabled="queryLoading"
              :disabled-date="(date: Date) => date < new Date(`${boundsForSelection()?.min ?? '1970-01-01 00:00:00'}`) || date > new Date(`${boundsForSelection()?.max ?? '2999-12-31 23:59:59'}`)"
              placeholder="选择结束时间"
            />
          </label>
          <label class="field window-field">
            <span class="field-label">时间窗口 <em>文件数量</em></span>
            <el-input-number
              v-model="windowSize"
              class="query-control window-number"
              size="large"
              :min="1"
              :max="200"
              controls-position="right"
              :disabled="queryLoading"
            />
          </label>
          <el-button class="query-action query-button" type="primary" size="large" :loading="timePointsLoading" :disabled="!selectedPointName" @click="loadTimePoints">
            查询时间点
          </el-button>
          <div class="query-row-2">
            <label class="field field-check">
              <span class="field-label">运行状态</span>
              <el-checkbox v-model="includeStopped" class="query-checkbox" size="large">停机</el-checkbox>
              <el-checkbox v-model="abnormalOnly" class="query-checkbox" size="large">异常</el-checkbox>
              <el-checkbox v-model="noCycleOnly" class="query-checkbox" size="large">无周期</el-checkbox>
            </label>
            <label class="field field-status">
              <span class="field-label">质心距离</span>
              <el-input-number
                v-model="minStatus"
                class="query-control"
                size="large"
                :min="0"
                :max="4"
                :step="1"
                :step-strictly="true"
                controls-position="right"
                :disabled="queryLoading || noCycleOnly"
                clearable
                placeholder="可空"
                :title="noCycleOnly ? '勾选无周期时忽略质心距离' : undefined"
              />
            </label>
          </div>
        </div>
        <el-alert v-if="errorMessage" class="data-alert" type="error" :closable="false" show-icon :title="errorMessage" />
      </section>

      <section class="selection-panel panel">
        <TimePointStrip
          :points="timePoints"
          :measurement-types="selectedTypes"
          :start-index="startIndex"
          :window-size="stripWindowSize"
          :loading="timePointsLoading"
          :min-time="minTime"
          :max-time="maxTime"
          :annotated-file-ids="annotatedFileIds"
          :ruler="ruler"
          @update:start-index="onStartIndexChange"
        />
        <div class="selection-controls">
          <div class="selection-readout">
            <span class="selection-accent"></span>
            <span>当前窗口覆盖 <strong>{{ selectedWindowPoints.length }}</strong> 个时间点</span>
            <span v-if="hasReference" class="reference-badge" title="始终保留一个 status=0 的正常数据用于对比，固定不随翻页变化">
              正常对比：{{ formatDateTime(referencePoints[0]?.sampleTime) }}
            </span>
          </div>
          <div class="selection-actions">
            <el-button class="ghost-button" plain :disabled="!startIndex" @click="resetWindow">回到起点</el-button>
            <el-button class="ghost-button" plain :disabled="startIndex <= 0" @click="pageWindow(-1)">上一页</el-button>
            <el-button class="ghost-button" plain :disabled="startIndex >= timePoints.length - windowSize" @click="pageWindow(1)">下一页</el-button>
            <el-select-v2
              class="jump-select"
              :options="jumpOptions"
              :model-value="startIndex"
              :disabled="!timePoints.length"
              size="small"
              filterable
              placeholder="跳转"
              @update:model-value="jumpToIndex"
            >
              <template #default="{ item }">
                <span :style="item.color ? { color: item.color } : undefined">{{ item.label }}</span>
              </template>
            </el-select-v2>
            <el-button
              class="ghost-button chart-query"
              :class="{ 'is-dirty': chartDirty }"
              type="primary"
              plain
              :loading="waveLoading"
              :disabled="waveLoading || !selectedWindowPoints.length"
              @click="loadWaveWindowNow"
            >查询图表</el-button>
          </div>
        </div>
        <div v-if="waveData?.files.length" class="window-files">
          <div class="window-files-title">当前窗口 wave_file 记录</div>
          <table class="window-files-table">
            <thead>
              <tr>
                <th>id</th>
                <th>point_name</th>
                <th>measurement_type</th>
                <th>rpm</th>
                <th>sample_time</th>
                <th>tspluse_status</th>
                <th>file_name</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="file in waveData.files" :key="file.id">
                <td class="mono">{{ file.id }}</td>
                <td>{{ file.pointName }}</td>
                <td>{{ file.measurementType }}</td>
                <td class="mono">{{ file.rpm }}</td>
                <td class="mono" :style="sampleTimeStyle(file)">{{ file.sampleTime.replace('T', ' ') }}</td>
                <td class="mono">{{ file.status ?? '' }}</td>
                <td class="file-name" :title="file.fileName">{{ file.fileName || '—' }}</td>
                <td class="actions">
                  <el-button class="file-action" size="small" plain :disabled="!waveData" @click="locateFile(file)">定位</el-button>
                  <el-button
                    v-if="!recordedFileIds.includes(file.id)"
                    class="file-action"
                    size="small"
                    type="primary"
                    plain
                    :loading="recordingFileId === file.id"
                    @click="recordFile(file)"
                  >记录</el-button>
                  <el-button
                    v-else
                    class="file-action"
                    size="small"
                    type="danger"
                    plain
                    :loading="recordingFileId === file.id"
                    @click="deleteRecordedFile(file)"
                  >删除</el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <section class="chart-panel panel">
        <div class="panel-heading chart-heading">
          <div>
            <h2>波形预览</h2>
          </div>
          <div class="chart-actions">
            <span class="annotation-width">标度宽度：<strong>{{ annotationWidth }}</strong></span>
            <el-radio-group v-model="chartMode" class="mode-switch" size="small">
              <el-radio-button label="split">分图显示</el-radio-button>
              <el-radio-button label="merge">归一合并</el-radio-button>
            </el-radio-group>
            <el-switch
              v-model="noSampling"
              class="sampling-switch"
              size="small"
              active-text="不采样"
              inactive-text="采样"
              :disabled="waveLoading"
            />
            <div class="chart-status"><i :class="{ busy: waveLoading }"></i>{{ statusText() }}</div>
          </div>
        </div>
        <WaveChart
          ref="waveChartRef"
          :data="waveData"
          :points="selectedWindowPoints"
          :mode="chartMode"
          :loading="waveLoading"
          :annotations="annotations"
          @period-dblclick="openPeriod"
          @annotation-toggle="onAnnotationToggle"
        />
      </section>

       <aside class="insight-panel panel">
        <div class="panel-heading compact-heading">
          <div><h2>当前窗口</h2></div>
          <span class="readout-number">{{ String(selectedWindowPoints.length).padStart(2, '0') }}</span>
        </div>
        <div class="readout-grid">
          <div class="readout-card">
            <span>时间跨度</span>
            <div class="readout-value">
              <strong>{{ formatDateTime(selectedWindowPoints[0]?.sampleTime) }}</strong>
              <small>至 {{ formatDateTime(selectedWindowPoints[selectedWindowPoints.length - 1]?.sampleTime) }}</small>
            </div>
          </div>
          <div class="readout-card"><span>检测周期</span><strong>{{ currentCycles.length }}</strong></div>
          <div class="readout-card"><span>选择范围</span><strong>#{{ startIndex + 1 }} — #{{ endIndex }}</strong></div>
          <div class="readout-card"><span>显示策略</span><strong>MIN / MAX</strong></div>
        </div>
        <div class="data-footprint">
          <div><span>数据名称</span><strong>{{ selectedTypes.join(' / ') }}</strong></div>
          <div><span>可用文件</span><strong>{{ availableTypeCount.toLocaleString() }}</strong></div>
          <div><span>抽样上限</span><strong>{{ maxPoints.toLocaleString() }} 点</strong></div>
        </div>
      </aside>
    </main>

    <PeriodModal :visible="periodVisible" :detail="periodDetail" :loading="periodLoading" @close="closePeriod" />
  </div>
</template>