Compressor/frontend/src/components/TimePointStrip.vue

<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import type { DevicePoint, Fault, MeasurementType, TimePoint } from '../types'
import { SITE_POINT_COLORS } from '../types'
import { RUNNING_COLOR, STOPPED_COLOR, statusGradientColor } from '../statusColor'

const props = defineProps<{
  points: TimePoint[]
  devicePoints: DevicePoint[]
  pointToType: Record<DevicePoint, MeasurementType>
  startIndex: number
  windowSize: number
  loading?: boolean
  minTime?: string
  maxTime?: string
  annotatedFileIds?: number[]
  faults?: Fault[]
  ruler?: { min: number; max: number } | null
  sitePoints?: string[]
  siteDescriptions?: Record<string, string>
}>()

const emit = defineEmits<{
  'update:startIndex': [value: number]
}>()

const canvas = ref<HTMLCanvasElement | null>(null)
const canvasHost = ref<HTMLElement | null>(null)
let resizeObserver: ResizeObserver | undefined

let drawLeft = 70

function rowLabel(name: string) {
  return props.siteDescriptions?.[name] || name
}

const maxStart = computed(() => Math.max(0, props.points.length - props.windowSize))
const endIndex = computed(() => Math.min(props.points.length, props.startIndex + props.windowSize))

function displayDate(value: string | undefined) {
  if (!value) return '--'
  return value.replace('T', ' ').slice(0, 10)
}

function pointColor(devicePoint: DevicePoint, fileInfo: { rpm: number; status?: number }): string {
  const running = fileInfo.rpm > 0
  if (!running) return STOPPED_COLOR
  if (props.pointToType[devicePoint] === '压力') return statusGradientColor(fileInfo.status, props.ruler ?? null)
  return RUNNING_COLOR
}

function draw() {
  const element = canvas.value
  const host = canvasHost.value
  if (!element || !host) return
  const width = Math.max(host.clientWidth, 320)
  const topY = 32
  const rowGap = 39
  const rows = [...props.devicePoints, ...(props.sitePoints ?? [])]
  const annotationY = topY + rows.length * rowGap
  const tickY = annotationY + 109
  const height = tickY + 30
  const ratio = window.devicePixelRatio || 1
  element.width = width * ratio
  element.height = height * ratio
  element.style.width = `${width}px`
  element.style.height = `${height}px`
  const context = element.getContext('2d')
  if (!context) return
  context.setTransform(ratio, 0, 0, ratio, 0, 0)
  context.clearRect(0, 0, width, height)

  context.font = '600 13px -apple-system, BlinkMacSystemFont, sans-serif'
  let maxLabelWidth = 70
  for (const name of rows) {
    maxLabelWidth = Math.max(maxLabelWidth, Math.ceil(context.measureText(rowLabel(name)).width) + 14)
  }
  drawLeft = maxLabelWidth
  const left = drawLeft
  const right = 20
  const available = Math.max(width - left - right, 1)
  const rowY = (index: number) => topY + index * rowGap
  const xAt = (index: number) => left + (props.points.length <= 1 ? 0 : index / (props.points.length - 1)) * available
  const selectedLeft = xAt(props.startIndex)
  const selectedRight = xAt(Math.min(props.points.length - 1, Math.max(props.startIndex, endIndex.value - 1)))
  const selectedWidth = Math.max(selectedRight - selectedLeft, 8)

  context.fillStyle = '#f4f6f7'
  context.fillRect(selectedLeft, 10, selectedWidth, 172)
  context.strokeStyle = '#dbe2e6'
  context.lineWidth = 1
  context.strokeRect(selectedLeft + 0.5, 10.5, selectedWidth - 1, 171)

  rows.forEach((rowName, rowIndex) => {
    const y = rowY(rowIndex)
    context.strokeStyle = '#d7e0e4'
    context.setLineDash([2, 5])
    context.beginPath()
    context.moveTo(left, y)
    context.lineTo(width - right, y)
    context.stroke()
    context.setLineDash([])
    context.fillStyle = '#52616b'
    context.font = '600 13px -apple-system, BlinkMacSystemFont, sans-serif'
    context.fillText(rowLabel(rowName), 10, y + 4)

      const isSiteRow = rowIndex >= props.devicePoints.length
      const siteIndex = rowIndex - props.devicePoints.length
      let lastX = -Infinity
      props.points.forEach((point, pointIndex) => {
        if (isSiteRow) {
          if (point.siteValues?.[rowName] == null) return
        } else if (!point.files[rowName as DevicePoint]) {
          return
        }
        const x = xAt(pointIndex)
        if (x - lastX < 6 && pointIndex !== props.startIndex && pointIndex !== endIndex.value - 1) return
        lastX = x
        let siteRunning = true
        if (isSiteRow) {
          siteRunning = point.machineRunning !== undefined
            ? point.machineRunning
            : props.devicePoints.some((devicePoint) => (point.files[devicePoint]?.rpm ?? 0) > 0)
        }
        context.fillStyle = isSiteRow
          ? (siteRunning ? SITE_POINT_COLORS[siteIndex % SITE_POINT_COLORS.length] : STOPPED_COLOR)
          : pointColor(rowName as DevicePoint, point.files[rowName as DevicePoint]!)
      context.beginPath()
      context.arc(x, y, pointIndex >= props.startIndex && pointIndex < endIndex.value ? 3.5 : 2.5, 0, Math.PI * 2)
      context.fill()
    })
  })

  context.strokeStyle = '#d7e0e4'
  context.setLineDash([2, 5])
  context.beginPath()
  context.moveTo(left, annotationY)
  context.lineTo(width - right, annotationY)
  context.stroke()
  context.setLineDash([])
  context.fillStyle = '#52616b'
  context.font = '600 13px -apple-system, BlinkMacSystemFont, sans-serif'
  context.fillText('标注', 10, annotationY + 4)
  const annotatedSet = new Set(props.annotatedFileIds ?? [])
  const isAnnotated = (point: TimePoint) => props.devicePoints.some((devicePoint) => {
    const id = point.files[devicePoint]?.id
    return id != null && annotatedSet.has(id)
  })
  let lastGrayX = -Infinity
  props.points.forEach((point, pointIndex) => {
    if (isAnnotated(point)) return
    const hasFile = props.devicePoints.some((devicePoint) => point.files[devicePoint])
    if (!hasFile) return
    const x = xAt(pointIndex)
    if (x - lastGrayX < 6 && pointIndex !== props.startIndex && pointIndex !== endIndex.value - 1) return
    lastGrayX = x
    context.fillStyle = '#c0c4cc'
    context.beginPath()
    context.arc(x, annotationY, pointIndex >= props.startIndex && pointIndex < endIndex.value ? 3 : 2.5, 0, Math.PI * 2)
    context.fill()
  })
  props.points.forEach((point, pointIndex) => {
    if (!isAnnotated(point)) return
    const x = xAt(pointIndex)
    context.fillStyle = '#e05252'
    context.beginPath()
    context.arc(x, annotationY, pointIndex >= props.startIndex && pointIndex < endIndex.value ? 3.5 : 2.5, 0, Math.PI * 2)
    context.fill()
  })

  // 故障竖线：按 fault_date 在时间轴上的位置显示，黄色，标签为 fault_category。
  if (props.faults?.length && props.points.length) {
    const faultColor = '#f5c400'
    const pointTimes = props.points.map((item) => new Date(item.sampleTime.replace(' ', 'T')).getTime())
    const firstTime = pointTimes[0]
    const lastTime = pointTimes[pointTimes.length - 1]
    const faultX = (iso: string): number | null => {
      const target = new Date(`${iso}T00:00:00`).getTime()
      if (!Number.isFinite(target)) return null
      if (target <= firstTime) return xAt(0)
      if (target >= lastTime) return xAt(props.points.length - 1)
      let lo = 0
      let hi = pointTimes.length - 1
      while (lo < hi) {
        const mid = (lo + hi) >> 1
        if (pointTimes[mid] < target) lo = mid + 1
        else hi = mid
      }
      const t0 = pointTimes[lo - 1]
      const t1 = pointTimes[lo]
      const ratio = t1 === t0 ? 0 : (target - t0) / (t1 - t0)
      return xAt(lo - 1) + ratio * (xAt(lo) - xAt(lo - 1))
    }
    context.save()
    context.strokeStyle = faultColor
    context.fillStyle = faultColor
    context.lineWidth = 1.5
    context.setLineDash([])
    for (const fault of props.faults) {
      const x = faultX(fault.faultDate)
      if (x == null) continue
      context.beginPath()
      context.moveTo(x, 14)
      context.lineTo(x, tickY)
      context.stroke()
    }
    context.textAlign = 'center'
    context.textBaseline = 'top'
    context.font = '600 11px -apple-system, BlinkMacSystemFont, sans-serif'
    for (const fault of props.faults) {
      const x = faultX(fault.faultDate)
      if (x == null) continue
      context.fillText(fault.faultCategory || '故障', x, 3)
    }
    context.restore()
  }

  context.fillStyle = '#788892'
  context.font = '12px -apple-system, BlinkMacSystemFont, sans-serif'
  const tickCount = Math.min(6, Math.max(2, Math.floor(width / 180)))
  for (let tick = 0; tick <= tickCount; tick += 1) {
    const index = Math.min(props.points.length - 1, Math.round((props.points.length - 1) * tick / tickCount))
    const x = xAt(index)
    context.strokeStyle = '#d6dfe3'
    context.beginPath()
    context.moveTo(x, tickY)
    context.lineTo(x, tickY + 6)
    context.stroke()
    const label = displayDate(props.points[index]?.sampleTime)
    context.textAlign = tick === 0 ? 'left' : tick === tickCount ? 'right' : 'center'
    context.fillText(label, x, tickY + 22)
  }
  context.textAlign = 'left'
  if (!props.points.length) {
    context.fillStyle = '#8a989f'
    context.fillText('暂无时间点', left, 70)
  }
}

function selectFromPointer(event: PointerEvent) {
  if (!canvas.value || !props.points.length) return
  const rect = canvas.value.getBoundingClientRect()
  const left = drawLeft
  const right = 20
  const usable = Math.max(rect.width - left - right, 1)
  const ratio = Math.max(0, Math.min(1, (event.clientX - rect.left - left) / usable))
  const pointIndex = Math.round(ratio * (props.points.length - 1))
  const value = Math.max(0, Math.min(maxStart.value, pointIndex - Math.floor(props.windowSize / 2)))
  emit('update:startIndex', value)
}

function updateSlider(value: number | number[]) {
  emit('update:startIndex', Number(Array.isArray(value) ? value[0] : value))
}

watch(
  () => [props.points, props.devicePoints, props.startIndex, props.windowSize, props.annotatedFileIds, props.faults, props.ruler, props.sitePoints],
  () => nextTick(draw),
  { deep: true },
)

onMounted(() => {
  resizeObserver = new ResizeObserver(draw)
  if (canvasHost.value) resizeObserver.observe(canvasHost.value)
  draw()
})

onBeforeUnmount(() => resizeObserver?.disconnect())
</script>

<template>
  <section class="time-strip" aria-label="时间点选择区">
    <div class="time-strip-head">
      <div>
        <h2>时间点选择</h2>
      </div>
      <div class="time-summary">
        <span class="time-legend"><i class="legend-running"></i>运转</span>
        <span class="time-legend"><i class="legend-stopped"></i>停机</span>
        <span class="time-legend"><i class="legend-fault"></i>故障</span>
        <span class="summary-divider">/</span>
        <span class="mono">{{ points.length.toLocaleString() }}</span> 个时间点
        <span class="summary-divider">/</span>
        当前 {{ points.length ? `${startIndex + 1} — ${endIndex}` : '—' }}
      </div>
    </div>
    <div ref="canvasHost" class="timeline-canvas-host" :class="{ 'is-loading': loading }">
      <canvas ref="canvas" @pointerdown="selectFromPointer" />
      <div v-if="loading" class="canvas-loading">正在读取时间点…</div>
    </div>
    <div class="time-strip-foot">
      <div class="time-foot-item">
        <span class="foot-label">起点</span>
        <strong>{{ displayDate(minTime) }}</strong>
      </div>
      <div class="window-track">
        <el-slider
          :model-value="startIndex"
          :min="0"
          :max="maxStart"
          :disabled="!points.length || maxStart === 0"
          :show-tooltip="false"
          aria-label="时间窗口位置"
          @update:model-value="updateSlider"
        />
      </div>
      <div class="time-foot-item align-right">
        <span class="foot-label">终点</span>
        <strong>{{ displayDate(maxTime) }}</strong>
      </div>
    </div>
  </section>
</template>