agentworkshop 0.7.21 → 0.7.23

package/app/pages/daq/[id].vue

@@ -1,937 +1,919 @@
-<script setup lang="ts">
-/**
- * 数采节点控制台(/daq/[id])—— 单节点专业控制面。
- * 实时值 + live 趋势(WS 流);参数控制(server DaqNode 单点参数:启停/周期/
- * 驱动/量程/预警带);设备绑定;时序库历史查询(降采样桶选择)。
- */
-import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { useDcwStream } from '@/app/composables/workshop/useDcwStream'
-import { useDaqStream, type DaqFrameLive } from '@/app/composables/workshop/useDaqStream'
-import { useDeviceTwins } from '@/app/composables/workshop/useDeviceTwins'
-import { daqKeyFromRef, DAQ_DRIVERS, type DaqDriverKind, type DaqNodeState, type DriverConfigField, type DriverTestResult as DaqDriverTestResult } from '#shared/daq-protocol'
-
-const { t } = useI18n()
-
-definePageMeta({ layout: 'default' })
-
-const route = useRoute()
-const nodeId = computed(() => String(route.params.id ?? ''))
-const daq = useDaqStream()
-const dcw = useDcwStream()
-void dcw.load()
-const deviceTwins = useDeviceTwins()
-
-const node = computed(() => daq.nodeById(nodeId.value) ?? null)
-// server 模板目录为唯一事实源:模板被删除时降级显示 key 原文,不再回退到
-// 打包内置常量(那会渲染过期语义)
-const tpl = computed(() => {
-  const key = node.value ? daqKeyFromRef(node.value.templateRef) : ''
-  return daq.templates.find(t => t.key === key) ?? null
-})
-const stateLabel: Record<DaqNodeState, string> = { ok: t('daqDetail.k41k5c026'), warn: t('daqDetail.k49z8v027'), alarm: t('daqDetail.k3xmid028'), offline: t('daqDetail.k44c2n029') }
-const effectiveState = (): DaqNodeState => {
-  const n = node.value
-  if (!n) return 'offline'
-  if (!daq.controller.running || !n.enabled) return 'offline'
-  return n.state
-}
-
-let unsub: (() => void) | null = null
-onMounted(() => {
-  unsub = daq.ensureWsFeed()
-  void daq.load()
-  void deviceTwins.load()
-  if (isFrameNode.value) void loadFrames()
-})
-onBeforeUnmount(() => unsub?.())
-
-// ---------- 帧视图(v2 多形态信号:向量轮廓 / 图像画廊;scalar 节点不渲染) ----------
-
-const signalKind = computed(() => tpl.value?.signalKind ?? 'scalar')
-const isFrameNode = computed(() => signalKind.value !== 'scalar')
-const frames = computed(() => daq.framesOf(nodeId.value))
-
-async function loadFrames(): Promise<void> {
-  if (!nodeId.value) return
-  await daq.fetchFrames(nodeId.value, { limit: 24 }).catch(() => {})
-}
-watch(nodeId, () => {
-  if (isFrameNode.value) void loadFrames()
-})
-
-const timeOf = (at: number): string => new Date(at).toLocaleTimeString('zh-CN', { hour12: false })
-const metricsBrief = (f: DaqFrameLive): string =>
-  Object.entries(f.metrics ?? {}).slice(0, 3).map(([k, v]) => `${k}=${v}`).join(' ')
-
-/* 向量轮廓(最近一帧预览;SVG polyline,免 canvas 绘制循环) */
-const VEC_W = 320
-const VEC_H = 84
-const latestVector = computed(() => frames.value.find(f => f.kind === 'vector' && f.points?.length))
-const vecPath = computed(() => {
-  const pts = latestVector.value?.points ?? []
-  if (pts.length < 2) return ''
-  const min = Math.min(...pts)
-  const max = Math.max(...pts)
-  const span = max - min || 1
-  return pts
-    .map((p, i) => `${((i / (pts.length - 1)) * VEC_W).toFixed(1)},${(VEC_H - 6 - ((p - min) / span) * (VEC_H - 12)).toFixed(1)}`)
-    .join(' ')
-})
-
-/* 图像大图查看(点击缩略图;contentUrl 同源 cookie 鉴权直出) */
-const fullFrame = ref<DaqFrameLive | null>(null)
-
-/** WS 下发节拍展示(null=跟随全局;0=每帧;>0 独立间隔) */
-function publishLabel(v: number | null): string {
-  if (v == null) return t('daqDetail.k9vnp9h053', { p0: daq.controller.defaultPublishIntervalMs })
-  if (v === 0) return t('daqDetail.k1m1zwux030')
-  return `${v}ms`
-}
-
-// ---------- 参数表单(server 单点控制;变更经 PATCH 落库,node.changed 帧回灌) ----------
-const form = reactive({
-  enabled: true,
-  driver: 'mock' as DaqDriverKind,
-  lineId: '',
-  followGlobal: true,
-  intervalMs: 5000,
-  calKind: 'none' as 'none' | 'linear',
-  calScale: 1,
-  calOffset: 0,
-  publishFollow: true,
-  publishEveryFrame: false,
-  publishMs: 1000,
-  unit: '',
-  decimals: 1,
-  min: 0,
-  max: 100,
-  warnLow: null as number | null,
-  warnHigh: null as number | null,
-})
-watch(node, (n) => {
-  if (!n) return
-  form.enabled = n.enabled
-  form.lineId = n.lineId ?? ''
-  form.driver = n.driver
-  form.followGlobal = n.intervalMs == null
-  form.intervalMs = n.intervalMs ?? daq.controller.defaultIntervalMs
-  // WS 下发节拍:null=跟随全局;0=每帧;>0 独立间隔
-  form.publishFollow = n.publishIntervalMs == null
-  form.publishEveryFrame = n.publishIntervalMs === 0
-  form.publishMs = n.publishIntervalMs == null ? daq.controller.defaultPublishIntervalMs : n.publishIntervalMs
-  form.unit = n.unit
-  form.decimals = n.decimals
-  form.min = n.min
-  form.max = n.max
-  form.warnLow = n.warnLow
-  form.warnHigh = n.warnHigh
-}, { immediate: true })
-
-// 驱动连接参数编辑(真实协议:host/register/endpoint...;schema 驱动渲染)
-const driverCfg = ref<Record<string, string | number>>({})
-const driverFields = computed<DriverConfigField[]>(() =>
-  DAQ_DRIVERS.find(d => d.kind === form.driver)?.configFields ?? [])
-watch(node, (n) => {
-  if (n) driverCfg.value = { ...(n.driverConfig as Record<string, string | number>) }
-}, { immediate: true })
-watch(() => form.driver, () => {
-  // 切换协议且目标无参数 → 填 schema 缺省
-  if (driverFields.value.length && Object.keys(driverCfg.value).length === 0) {
-    const cfg: Record<string, string | number> = {}
-    for (const f of driverFields.value) if (f.default !== undefined) cfg[f.key] = f.default as string | number
-    driverCfg.value = cfg
-  }
-}, { immediate: true })
-const testing = ref(false)
-const testResult = ref<DaqDriverTestResult | null>(null)
-async function doTest(): Promise<void> {
-  testing.value = true
-  testResult.value = null
-  try {
-    // 先保存当前驱动与参数,再测(测存量节点 = 测已落库配置)
-    await daq.patchNode(nodeId.value, { driver: form.driver, driverConfig: { ...driverCfg.value } })
-    testResult.value = await daq.testNode(nodeId.value)
-  }
-  catch (err) {
-    testResult.value = { ok: false, message: apiErrorMessage(err) }
-  }
-  finally {
-    testing.value = false
-  }
-}
-
-const saving = ref(false)
-async function saveParams(): Promise<void> {
-  const n = node.value
-  if (!n || saving.value) return
-  saving.value = true
-  try {
-    await daq.patchNode(n.id, {
-      enabled: form.enabled,
-      driver: form.driver,
-      lineId: form.lineId,
-      driverConfig: { ...driverCfg.value },
-      intervalMs: form.followGlobal ? null : Math.max(1000, Math.min(60_000, Math.round(form.intervalMs))),
-      publishIntervalMs: form.publishFollow
-        ? null
-        : (form.publishEveryFrame ? 0 : Math.max(0, Math.min(60_000, Math.round(form.publishMs)))),
-      unit: form.unit,
-      decimals: Math.max(0, Math.min(6, Math.round(form.decimals))),
-      min: form.min,
-      max: form.max,
-      warnLow: form.warnLow,
-      warnHigh: form.warnHigh,
-    })
-  }
-  finally {
-    saving.value = false
-  }
-}
-
-/** 驱动是否为预留协议(meta status=planned) */
-function driverPlanned(kind: string): boolean {
-  return daq.meta.drivers.find(d => d.kind === kind)?.status === 'planned'
-}
-
-// ---------- 设备绑定 ----------
-const bindDeviceId = ref('')
-const boundDeviceName = computed(() => {
-  const id = node.value?.deviceBindingId
-  if (!id) return ''
-  return deviceTwins.twins.find(t => t.id === id)?.name ?? `${id.slice(0, 8)}…`
-})
-function onBindToggle(): void {
-  void daq.bindNode(nodeId.value, node.value?.deviceBindingId ? null : (bindDeviceId.value || null))
-}
-const availableDevices = computed(() =>
-  deviceTwins.twins.filter(t => t.kind !== 'daq' && t.id !== node.value?.id),
-)
-
-// ---------- 历史(时序库) ----------
-type ChartRow = { at: number, value?: number, avg?: number, min?: number, max?: number }
-const historyPoints = ref<ChartRow[]>([])
-const bucketMs = ref<number>(15000)
-const histLoading = ref(false)
-const BUCKETS = [
-  { label: '1s 桶', ms: 1000 },
-  { label: '5s 桶', ms: 5000 },
-  { label: '15s 桶(默认)', ms: 15000 },
-  { label: '30s 桶', ms: 30000 },
-  { label: '1min 桶', ms: 60000 },
-]
-async function loadHistory(): Promise<void> {
-  if (!nodeId.value) return
-  histLoading.value = true
-  try {
-    const pts = await daq.samplesOf(nodeId.value, {
-      toMs: Date.now(),
-      bucketMs: bucketMs.value || undefined,
-      limit: 400,
-    })
-    // 接口 DESC 返回 → 图表时间正序
-    historyPoints.value = [...pts].reverse() as ChartRow[]
-  }
-  finally {
-    histLoading.value = false
-    drawChart()
-  }
-}
-
-const chartCanvas = ref<HTMLCanvasElement | null>(null)
-const trendColor = '#35e0a0'
-const gridColor = 'rgba(120,135,160,0.18)'
-const inkColor = 'rgba(140,155,175,0.8)'
-function drawChart(): void {
-  const cv = chartCanvas.value
-  if (!cv) return
-  const dpr = Math.min(window.devicePixelRatio || 1, 2)
-  const w = cv.clientWidth
-  const h = cv.clientHeight
-  if (cv.width !== w * dpr || cv.height !== h * dpr) {
-    cv.width = w * dpr
-    cv.height = h * dpr
-  }
-  const ctx = cv.getContext('2d')
-  if (!ctx) return
-  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
-  ctx.clearRect(0, 0, w, h)
-  for (let i = 1; i < 4; i++) {
-    ctx.strokeStyle = gridColor
-    ctx.beginPath()
-    ctx.moveTo(0, (h / 4) * i)
-    ctx.lineTo(w, (h / 4) * i)
-    ctx.stroke()
-  }
-  const rows = historyPoints.value
-  if (rows.length < 2) return
-  let lo = Number.POSITIVE_INFINITY
-  let hi = Number.NEGATIVE_INFINITY
-  for (const r of rows) {
-    const v = r.value ?? r.avg ?? r.min ?? 0
-    lo = Math.min(lo, v)
-    hi = Math.max(hi, v)
-  }
-  const span = Math.max(hi - lo, 1e-9)
-  ctx.strokeStyle = inkColor
-  ctx.font = '10px monospace'
-  ctx.fillStyle = inkColor
-  ctx.fillText(hi.toFixed(2), 4, 11)
-  ctx.fillText(lo.toFixed(2), 4, h - 4)
-  ctx.strokeStyle = trendColor
-  ctx.lineWidth = 1.6
-  ctx.beginPath()
-  rows.forEach((r, i) => {
-    const x = (i / (rows.length - 1)) * w
-    const y = h - (((r.value ?? r.avg ?? 0) - lo) / span) * (h - 16) - 8
-    if (i === 0) ctx.moveTo(x, y)
-    else ctx.lineTo(x, y)
-  })
-  ctx.stroke()
-}
-
-/** live 趋势(WS hist 环形缓冲;独立小画布,与历史图互补) */
-const liveCanvas = ref<HTMLCanvasElement | null>(null)
-let uiTimer: ReturnType<typeof setInterval> | null = null
-function drawLive(): void {
-  const cv = liveCanvas.value
-  const n = node.value
-  if (!cv || !n || n.hist.length < 2) return
-  const dpr = Math.min(window.devicePixelRatio || 1, 2)
-  const w = cv.clientWidth
-  const h = cv.clientHeight
-  if (cv.width !== w * dpr || cv.height !== h * dpr) {
-    cv.width = w * dpr
-    cv.height = h * dpr
-  }
-  const ctx = cv.getContext('2d')
-  if (!ctx) return
-  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
-  ctx.clearRect(0, 0, w, h)
-  const hi = Math.max(...n.hist)
-  const lo = Math.min(...n.hist)
-  const span = Math.max(hi - lo, 1e-9)
-  ctx.strokeStyle = 'rgba(65,200,244,0.9)'
-  ctx.lineWidth = 1.5
-  ctx.beginPath()
-  n.hist.forEach((v, i) => {
-    const x = (i / (n.hist.length - 1)) * w
-    const y = h - ((v - lo) / span) * (h - 6) - 3
-    if (i === 0) ctx.moveTo(x, y)
-    else ctx.lineTo(x, y)
-  })
-  ctx.stroke()
-}
-onMounted(() => {
-  void loadHistory()
-  // live 趋势重绘循环(仅浏览器;SSR 安全)
-  uiTimer = setInterval(() => {
-    drawLive()
-  }, 800)
-})
-onBeforeUnmount(() => {
-  if (uiTimer) clearInterval(uiTimer)
-})
-
-watch(bucketMs, () => void loadHistory())
-</script>
-
-<template>
-  <div class="page">
-    <p class="aw-kicker">
-      <NuxtLink
-        to="/daq"
-        class="back"
-      >{{ $t('daqDetail.k1emg364001') }}</NuxtLink> / NODE {{ nodeId.slice(0, 8).toUpperCase() }}
-    </p>
-    <div class="aw-page-head">
-      <h1>{{ node?.name ?? nodeId }}</h1>
-      <span
-        class="st-pill"
-        :class="[effectiveState()]"
-      >{{ stateLabel[effectiveState()] }}</span>
-    </div>
-
-    <p
-      v-if="!node && daq.error"
-      class="err"
-    >
-      {{ daq.error }}(<NuxtLink to="/workshop">{{ $t('daqDetail.k1bhhheq002') }}</NuxtLink>)
-    </p>
-
-    <div
-      v-if="node"
-      class="grid"
-    >
-      <!-- 左列:实时状态卡 -->
-      <section class="col-live">
-        <div class="aw-tile value-card">
-          <p class="aw-kicker">
-            {{ $t('daqDetail.k1fx2vik032') }} {{ tpl?.ch ?? '-' }}
-          </p>
-          <div class="big-val mono">
-            {{ node.value != null ? node.value.toFixed(node.decimals) : '--' }}<small>{{ node.unit }}</small>
-          </div>
-          <canvas
-            ref="liveCanvas"
-            class="live-canvas"
-          />
-          <dl class="facts mono">
-            <div>
-              <dt>{{ $t('daqDetail.k4a0la003') }}</dt>
-              <dd>{{ node.driver }}{{ driverPlanned(node.driver) ? $t('daqDetail.kz8zr9v035') : '' }}</dd>
-            </div>
-            <div>
-              <dt>{{ $t('daqDetail.k3xg3w004') }}</dt>
-              <dd>{{ node.intervalMs ?? $t('daqDetail.k9vnp9h053', { p0: daq.controller.defaultIntervalMs }) }}</dd>
-            </div>
-            <div>
-              <dt>{{ $t('daqDetail.k3w6td005') }}</dt>
-              <dd>{{ publishLabel(node.publishIntervalMs) }}</dd>
-            </div>
-            <div>
-              <dt>{{ $t('daqDetail.k3x5tpx006') }}</dt>
-              <dd>{{ node.warnLow ?? '-∞' }} ~ {{ node.warnHigh ?? '+∞' }}</dd>
-            </div>
-            <div>
-              <dt>{{ $t('daqDetail.k1hjj0jf007') }}</dt>
-              <dd>{{ node.min }} ~ {{ node.max }}</dd>
-            </div>
-            <div>
-              <dt>{{ $t('daqDetail.k1i8rtqt008') }}</dt>
-              <dd>{{ boundDeviceName || $t('daqDetail.k3own4q036') }}</dd>
-            </div>
-          </dl>
-        </div>
-      </section>
-
-      <!-- 中列:参数控制 -->
-      <section class="col-form aw-tile pad">
-        <h3 class="sec">
-          {{ $t('daqDetail.kd9d69j009') }}
-        </h3>
-        <form
-          class="form-grid"
-          @submit.prevent="saveParams"
-        >
-          <label class="field">
-            <span>{{ $t('daqDetail.k1iw7tbf010') }}</span>
-            <button
-              type="button"
-              class="toggle"
-              :class="{ on: form.enabled }"
-              @click="form.enabled = !form.enabled"
-            >
-              {{ form.enabled ? $t('daqDetail.k3w3j8f037') : $t('daqDetail.k3n5aaj045') }}
-            </button>
-          </label>
-          <label class="field">
-            <span>{{ $t('daqDetail.k12k23od011') }}</span>
-            <select
-              v-model="form.lineId"
-              class="input"
-            >
-              <option value="">
-                {{ $t('daqDetail.k3ootr6012') }}
-              </option>
-              <option
-                v-for="l in dcw.lines"
-                :key="l.id"
-                :value="l.id"
-              >
-                {{ l.name }}
-              </option>
-            </select>
-          </label>
-          <label class="field">
-            <span>{{ $t('daqDetail.k1l6smxo013') }}</span>
-            <select
-              v-model="form.driver"
-              class="input"
-            >
-              <option
-                v-for="d in DAQ_DRIVERS"
-                :key="d.kind"
-                :value="d.kind"
-                :disabled="d.status === 'planned'"
-              >
-                {{ d.label }}{{ d.status === 'planned' ? $t('daqDetail.kz8zr9v035') : '' }}
-              </option>
-            </select>
-          </label>
-          <label class="field row">
-            <button
-              type="button"
-              class="toggle slim"
-              :class="{ on: form.followGlobal }"
-              @click="form.followGlobal = !form.followGlobal"
-            >
-              {{ form.followGlobal ? $t('daqDetail.k1k2ueyq038') : $t('daqDetail.k1cgi8fy046') }}
-            </button>
-            <input
-              v-model.number="form.intervalMs"
-              type="number"
-              min="1000"
-              max="60000"
-              step="500"
-              class="input"
-              :disabled="form.followGlobal"
-            ><small>ms</small>
-          </label>
-          <label class="field row">
-            <button
-              type="button"
-              class="toggle slim"
-              :class="{ on: form.calKind === 'linear' }"
-              title="采集标定 decoder:物理值 = scale × PLC采集值 + offset"
-              @click="form.calKind = form.calKind === 'linear' ? 'none' : 'linear'"
-            >
-              {{ form.calKind === 'linear' ? $t('daqDetail.k1eru4r1039') : $t('daqDetail.k3oktae047') }}
-            </button>
-            <input
-              v-model.number="form.calScale"
-              type="number"
-              step="0.1"
-              class="input"
-              :disabled="form.calKind !== 'linear'"
-              title="decode 斜率(≠0)"
-            >
-            <input
-              v-model.number="form.calOffset"
-              type="number"
-              step="0.1"
-              class="input"
-              :disabled="form.calKind !== 'linear'"
-              title="decode 截距"
-            ><small>decoder</small>
-          </label>
-          <label class="field row">
-            <button
-              type="button"
-              class="toggle slim"
-              :class="{ on: form.publishFollow }"
-              @click="form.publishFollow = !form.publishFollow"
-            >
-              {{ form.publishFollow ? $t('daqDetail.k1k2t5o7040') : $t('daqDetail.k1cggz5f048') }}
-            </button>
-            <span
-              class="toggle slim"
-              :class="{ on: form.publishEveryFrame }"
-              style="cursor: pointer;"
-              @click="form.publishEveryFrame = !form.publishEveryFrame"
-            >{{ form.publishEveryFrame ? $t('daqDetail.k41mvv041') : $t('daqDetail.k3n42dj049') }}</span>
-            <input
-              v-model.number="form.publishMs"
-              type="number"
-              min="0"
-              max="60000"
-              step="100"
-              class="input"
-              :disabled="form.publishFollow || form.publishEveryFrame"
-            ><small>ms</small>
-          </label>
-          <label class="field">
-            <span>{{ $t('daqDetail.k3x4ef014') }}</span>
-            <input
-              v-model="form.unit"
-              class="input"
-            >
-          </label>
-          <label class="field">
-            <span>{{ $t('daqDetail.k3mxmcx015') }}</span>
-            <input
-              v-model.number="form.decimals"
-              type="number"
-              min="0"
-              max="6"
-              class="input"
-            >
-          </label>
-          <div class="field-row">
-            <label class="field">
-              <span>{{ $t('daqDetail.k1l9jv5m016') }}</span>
-              <input
-                v-model.number="form.min"
-                type="number"
-                step="any"
-                class="input"
-              >
-            </label>
-            <label class="field">
-              <span>{{ $t('daqDetail.k1md63hm017') }}</span>
-              <input
-                v-model.number="form.warnLow"
-                type="number"
-                step="any"
-                class="input"
-              >
-            </label>
-            <label class="field">
-              <span>{{ $t('daqDetail.k1md63gp018') }}</span>
-              <input
-                v-model.number="form.warnHigh"
-                type="number"
-                step="any"
-                class="input"
-              >
-            </label>
-            <label class="field">
-              <span>{{ $t('daqDetail.k1l9jv4p019') }}</span>
-              <input
-                v-model.number="form.max"
-                type="number"
-                step="any"
-                class="input"
-              >
-            </label>
-          </div>
-          <button
-            class="aw-pill"
-            type="submit"
-            :disabled="saving"
-          >
-            {{ saving ? $t('daqDetail.k1as0g50042') : $t('daqDetail.ksn9cgo050') }}
-          </button>
-        </form>
-
-        <!-- 驱动连接参数(mock 空;真实协议 schema 动态表单 + 测试连接) -->
-        <template v-if="driverFields.length">
-          <h3 class="sec mt">
-            {{ $t('daqDetail.k1p9gioa033') }} {{ DAQ_DRIVERS.find(d => d.kind === form.driver)?.label }}
-          </h3>
-          <div class="driver-grid">
-            <label
-              v-for="f in driverFields"
-              :key="f.key"
-              class="field"
-            >
-              <span>{{ f.label }}<em v-if="f.required">*</em></span>
-              <select
-                v-if="f.type === 'select'"
-                v-model="driverCfg[f.key]"
-                class="input"
-              >
-                <option
-                  v-for="o in f.options"
-                  :key="o.value"
-                  :value="o.value"
-                >
-                  {{ o.label }}
-                </option>
-              </select>
-              <input
-                v-else
-                v-model="driverCfg[f.key]"
-                :type="f.type === 'number' ? 'number' : 'text'"
-                :placeholder="f.placeholder"
-                class="input"
-              >
-            </label>
-          </div>
-          <div class="test-row">
-            <button
-              class="pill-btn"
-              :disabled="testing"
-              @click="doTest"
-            >
-              {{ testing ? $t('daqDetail.k1fsh720043') : $t('daqDetail.k1fstglk051') }}
-            </button>
-            <span
-              v-if="testResult"
-              class="test-out mono"
-              :class="testResult.ok ? 'ok' : 'bad'"
-            >{{ testResult.ok ? '✓' : '✗' }} {{ testResult.message }}</span>
-          </div>
-        </template>
-
-        <h3 class="sec mt">
-          {{ $t('daqDetail.k1ie6qju020') }}
-        </h3>
-        <div class="bind-row">
-          <select
-            v-model="bindDeviceId"
-            class="input grow"
-          >
-            <option value="">
-              {{ $t('daqDetail.kjobzu3021') }}
-            </option>
-            <option
-              v-for="dv in availableDevices"
-              :key="dv.id"
-              :value="dv.id"
-            >
-              {{ dv.name }}
-            </option>
-          </select>
-          <button
-            class="pill-btn"
-            @click="onBindToggle"
-          >
-            {{ boundDeviceName ? $t('daqDetail.k479eh044') : $t('daqDetail.k452a8052') }}
-          </button>
-        </div>
-      </section>
-
-      <!-- 右列:时序库历史 -->
-      <section class="col-hist aw-tile pad">
-        <div class="hist-hd">
-          <h3 class="sec">
-            {{ $t('daqDetail.k1i535i5034') }}{{ daq.meta.tsdb }})
-          </h3>
-          <div class="hist-ctl mono">
-            <select
-              v-model.number="bucketMs"
-              class="input"
-            >
-              <option
-                v-for="b in BUCKETS"
-                :key="b.ms"
-                :value="b.ms"
-              >
-                {{ b.label }}
-              </option>
-            </select>
-            <button
-              class="pill-btn"
-              @click="loadHistory"
-            >
-              {{ $t('daqDetail.k3x1jg022') }}
-            </button>
-          </div>
-        </div>
-        <canvas
-          ref="chartCanvas"
-          class="hist-canvas"
-        />
-        <table class="raw-table mono">
-          <thead>
-            <tr><th>{{ $t('daqDetail.k40vsf023') }}</th><th>{{ $t('daqDetail.k48v5024') }}</th><th>{{ $t('daqDetail.k4bza025') }}</th></tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(p, i) in historyPoints.filter(r => r.value != null).slice(-12).reverse()"
-              :key="i"
-            >
-              <td>{{ new Date(p.at).toLocaleTimeString('zh-CN', { hour12: false }) }}</td>
-              <td>{{ p.value!.toFixed(node?.decimals ?? 2) }}</td>
-              <td>{{ p.state }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-    </div>
-
-    <!-- 帧视图(v2 多形态信号:向量轮廓 / 图像画廊;scalar 节点不渲染) -->
-    <section
-      v-if="isFrameNode"
-      class="aw-tile pad frames-tile"
-    >
-      <div class="hist-hd">
-        <h3 class="sec">
-          {{ signalKind === 'image' ? $t('daqDetail.kfrm0001') : $t('daqDetail.kfrm0002') }}
-          <span class="mono frames-n">{{ frames.length }}</span>
-        </h3>
-        <button
-          class="pill-btn"
-          @click="loadFrames"
-        >
-          {{ $t('daqDetail.k3x1jg022') }}
-        </button>
-      </div>
-
-      <!-- 向量:最近帧轮廓 + 帧表 -->
-      <template v-if="signalKind === 'vector'">
-        <svg
-          class="vec-svg"
-          :viewBox="`0 0 ${VEC_W} ${VEC_H}`"
-          preserveAspectRatio="none"
-        >
-          <polyline
-            :points="vecPath"
-            fill="none"
-            stroke="var(--accent)"
-            stroke-width="1.5"
-          />
-        </svg>
-        <table class="raw-table mono">
-          <thead>
-            <tr><th>{{ $t('daqDetail.k40vsf023') }}</th><th>{{ $t('daqDetail.kfrm0004') }}</th><th>{{ $t('daqDetail.kfrm0005') }}</th></tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="f in frames.filter(x => x.kind === 'vector').slice(0, 12)"
-              :key="f.at"
-            >
-              <td>{{ timeOf(f.at) }}</td>
-              <td>{{ f.points?.length ?? 0 }}</td>
-              <td>{{ metricsBrief(f) }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </template>
-
-      <!-- 图像:缩略图画gallery(懒加载;点击看原图) -->
-      <template v-else>
-        <div
-          v-if="frames.length"
-          class="gal"
-        >
-          <figure
-            v-for="f in frames"
-            :key="f.at"
-            class="gal-item"
-            :title="$t('daqDetail.kfrm0006')"
-            @click="fullFrame = f"
-          >
-            <img
-              :src="f.thumbUrl"
-              loading="lazy"
-              alt="daq frame"
-            >
-            <figcaption class="mono">
-              {{ timeOf(f.at) }} · {{ metricsBrief(f) }}
-            </figcaption>
-          </figure>
-        </div>
-        <p
-          v-else
-          class="frames-empty"
-        >
-          {{ $t('daqDetail.kfrm0003') }}
-        </p>
-        <div
-          v-if="fullFrame"
-          class="gal-full"
-          @click="fullFrame = null"
-        >
-          <img
-            :src="fullFrame.contentUrl ?? fullFrame.thumbUrl"
-            alt="daq frame full"
-          >
-        </div>
-      </template>
-    </section>
-  </div>
-</template>
-
-<style scoped>
-.page { padding: 4px; }
-.back { color: var(--ink-faint); text-decoration: none; }
-.back:hover { color: var(--accent); }
-.aw-page-head h1 { margin: 2px 0 4px; font-size: 26px; font-weight: 400; letter-spacing: -0.01em; }
-.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
-.sec { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
-.mt { margin-top: 22px; }
-.err { margin-top: 14px; font-size: 13px; color: var(--tone-danger-dot); }
-
-.grid {
-  display: grid;
-  gap: 14px;
-  align-items: start;
-  grid-template-columns: minmax(260px, 340px) minmax(320px, 1fr) minmax(280px, 380px);
-}
-@media (max-width: 1100px) {
-  .grid { grid-template-columns: 1fr; }
-}
-.pad { padding: 16px 18px; }
-
-/* 实时值卡 */
-.value-card { padding: 16px 18px; }
-.big-val { margin: 8px 0 10px; font-size: 40px; line-height: 1.1; color: var(--accent); }
-.big-val small { margin-left: 8px; font-size: 15px; color: var(--ink-faint); }
-.live-canvas { width: 100%; height: 64px; border: 1px solid var(--line); border-radius: var(--radius-chip); background: var(--paper-deep); }
-.facts { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 0; }
-.facts div { display: flex; justify-content: space-between; font-size: 11.5px; }
-.facts dt { color: var(--ink-faint); }
-.facts dd { margin: 0; color: var(--ink); }
-
-/* 参数表单 */
-.form-grid { display: flex; flex-direction: column; gap: 10px; }
-.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-faint); flex: 1; }
-.field.row { flex-direction: row; align-items: center; gap: 8px; }
-.field.row small { color: var(--ink-faint); }
-.field-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
-.input {
-  width: 100%;
-  padding: 6px 9px;
-  font-size: 12.5px;
-  color: var(--ink);
-  background: var(--paper-raised);
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius-chip);
-}
-.input:disabled { opacity: 0.45; }
-.grow { flex: 1 1 auto; }
-.toggle {
-  align-self: flex-start;
-  padding: 6px 12px;
-  font-size: 12px;
-  cursor: pointer;
-  color: var(--tone-neutral-dot);
-  background: var(--tone-neutral-bg);
-  border: 0;
-  border-radius: var(--radius-chip);
-}
-.toggle.on { color: var(--tone-success-dot); background: var(--tone-success-bg); }
-.toggle.slim { padding: 6px 10px; font-size: 11.5px; }
-.pill-btn {
-  padding: 7px 14px;
-  font-size: 12.5px;
-  cursor: pointer;
-  color: var(--paper-raised);
-  background: var(--accent);
-  border: 1px solid var(--accent);
-  border-radius: var(--radius-pill);
-}
-.bind-row { display: flex; gap: 8px; }
-.driver-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
-.field em { margin-left: 2px; font-style: normal; color: var(--tone-danger-dot); }
-.test-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
-.pill-btn {
-  padding: 7px 14px;
-  font-size: 12.5px;
-  cursor: pointer;
-  color: var(--paper-raised);
-  background: var(--accent);
-  border: 1px solid var(--accent);
-  border-radius: var(--radius-pill);
-}
-.pill-btn:disabled { opacity: 0.5; }
-.test-out { font-size: 11px; }
-.test-out.ok { color: var(--tone-success-dot); }
-.test-out.bad { color: var(--tone-danger-dot); }
-
-/* 历史 */
-.col-hist { min-width: 0; }
-.hist-hd { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
-.hist-ctl { display: flex; gap: 6px; }
-.hist-canvas { width: 100%; height: 130px; border: 1px solid var(--line); border-radius: var(--radius-chip); background: var(--paper-deep); }
-.raw-table { width: 100%; margin-top: 10px; font-size: 11px; border-collapse: collapse; }
-.raw-table th, .raw-table td { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--divider-hair); }
-.raw-table th { font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-fainter); }
-
-.st-pill {
-  display: inline-block;
-  padding: 3px 11px;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  letter-spacing: 0.04em;
-  border-radius: var(--radius-pill);
-}
-.st-pill.ok { color: var(--tone-success-dot); background: var(--tone-success-bg); }
-.st-pill.warn { color: var(--tone-warning-dot); background: var(--tone-warning-bg); }
-.st-pill.alarm { color: var(--tone-danger-dot); background: var(--tone-danger-bg); }
-.st-pill.offline { color: var(--tone-neutral-dot); background: var(--tone-neutral-bg); }
-
-/* 帧视图(v2 多形态) */
-.frames-tile { margin-top: 14px; }
-.frames-n { margin-left: 8px; color: var(--ink-faint); }
-.vec-svg { width: 100%; height: 96px; display: block; background: var(--tone-neutral-bg); border-radius: 6px; margin-bottom: 10px; }
-.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
-.gal-item { margin: 0; cursor: zoom-in; }
-.gal-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; background: var(--tone-neutral-bg); }
-.gal-item figcaption { margin-top: 4px; font-size: 11px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.frames-empty { margin: 8px 0; font-size: 13px; color: var(--ink-faint); }
-.gal-full { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 72%); cursor: zoom-out; }
-.gal-full img { max-width: 92vw; max-height: 92vh; border-radius: 8px; }
-</style>
+<script setup lang="ts">
+/**
+ * 数采节点控制台(/daq/[id])—— 单节点专业控制面。
+ * 实时值 + live 趋势(WS 流);参数控制(server DaqNode 单点参数:启停/周期/
+ * 驱动/量程/预警带);设备绑定;时序库历史查询(降采样桶选择)。
+ */
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useDcwStream } from '@/app/composables/workshop/useDcwStream'
+import { useDaqStream, type DaqFrameLive } from '@/app/composables/workshop/useDaqStream'
+import { useDeviceTwins } from '@/app/composables/workshop/useDeviceTwins'
+import { daqKeyFromRef, DAQ_DRIVERS, type DaqDriverKind, type DaqNodeState, type DriverConfigField, type DriverTestResult as DaqDriverTestResult } from '#shared/daq-protocol'
+
+const { t } = useI18n()
+
+definePageMeta({ layout: 'default' })
+
+const route = useRoute()
+const nodeId = computed(() => String(route.params.id ?? ''))
+const daq = useDaqStream()
+const dcw = useDcwStream()
+void dcw.load()
+const deviceTwins = useDeviceTwins()
+
+const node = computed(() => daq.nodeById(nodeId.value) ?? null)
+// server 模板目录为唯一事实源:模板被删除时降级显示 key 原文,不再回退到
+// 打包内置常量(那会渲染过期语义)
+const tpl = computed(() => {
+  const key = node.value ? daqKeyFromRef(node.value.templateRef) : ''
+  return daq.templates.find(t => t.key === key) ?? null
+})
+const stateLabel: Record<DaqNodeState, string> = { ok: t('daqDetail.k41k5c026'), warn: t('daqDetail.k49z8v027'), alarm: t('daqDetail.k3xmid028'), offline: t('daqDetail.k44c2n029') }
+const effectiveState = (): DaqNodeState => {
+  const n = node.value
+  if (!n) return 'offline'
+  if (!daq.controller.running || !n.enabled) return 'offline'
+  return n.state
+}
+
+let unsub: (() => void) | null = null
+onMounted(() => {
+  unsub = daq.ensureWsFeed()
+  void daq.load()
+  void deviceTwins.load()
+  if (isFrameNode.value) void loadFrames()
+})
+onBeforeUnmount(() => unsub?.())
+
+// ---------- 帧视图(v2 多形态信号:向量轮廓 / 图像画廊;scalar 节点不渲染) ----------
+
+const signalKind = computed(() => tpl.value?.signalKind ?? 'scalar')
+const isFrameNode = computed(() => signalKind.value !== 'scalar')
+const frames = computed(() => daq.framesOf(nodeId.value))
+
+async function loadFrames(): Promise<void> {
+  if (!nodeId.value) return
+  await daq.fetchFrames(nodeId.value, { limit: 24 }).catch(() => {})
+}
+watch(nodeId, () => {
+  if (isFrameNode.value) void loadFrames()
+})
+
+const timeOf = (at: number): string => new Date(at).toLocaleTimeString('zh-CN', { hour12: false })
+const metricsBrief = (f: DaqFrameLive): string =>
+  Object.entries(f.metrics ?? {}).slice(0, 3).map(([k, v]) => `${k}=${v}`).join(' ')
+
+/* 向量轮廓(最近一帧预览;SVG polyline,免 canvas 绘制循环) */
+const VEC_W = 320
+const VEC_H = 84
+const latestVector = computed(() => frames.value.find(f => f.kind === 'vector' && f.points?.length))
+const vecPath = computed(() => {
+  const pts = latestVector.value?.points ?? []
+  if (pts.length < 2) return ''
+  const min = Math.min(...pts)
+  const max = Math.max(...pts)
+  const span = max - min || 1
+  return pts
+    .map((p, i) => `${((i / (pts.length - 1)) * VEC_W).toFixed(1)},${(VEC_H - 6 - ((p - min) / span) * (VEC_H - 12)).toFixed(1)}`)
+    .join(' ')
+})
+
+/* 图像大图查看(点击缩略图;contentUrl 同源 cookie 鉴权直出) */
+const fullFrame = ref<DaqFrameLive | null>(null)
+
+/** WS 下发节拍展示(null=跟随全局;0=每帧;>0 独立间隔) */
+function publishLabel(v: number | null): string {
+  if (v == null) return t('daqDetail.k9vnp9h053', { p0: daq.controller.defaultPublishIntervalMs })
+  if (v === 0) return t('daqDetail.k1m1zwux030')
+  return `${v}ms`
+}
+
+// ---------- 参数表单(server 单点控制;变更经 PATCH 落库,node.changed 帧回灌) ----------
+const form = reactive({
+  enabled: true,
+  driver: 'mock' as DaqDriverKind,
+  lineId: '',
+  followGlobal: true,
+  intervalMs: 5000,
+  calKind: 'none' as 'none' | 'linear',
+  calScale: 1,
+  calOffset: 0,
+  publishFollow: true,
+  publishEveryFrame: false,
+  publishMs: 1000,
+  unit: '',
+  decimals: 1,
+  min: 0,
+  max: 100,
+  warnLow: null as number | null,
+  warnHigh: null as number | null,
+})
+watch(node, (n) => {
+  if (!n) return
+  form.enabled = n.enabled
+  form.lineId = n.lineId ?? ''
+  form.driver = n.driver
+  form.followGlobal = n.intervalMs == null
+  form.intervalMs = n.intervalMs ?? daq.controller.defaultIntervalMs
+  // WS 下发节拍:null=跟随全局;0=每帧;>0 独立间隔
+  form.publishFollow = n.publishIntervalMs == null
+  form.publishEveryFrame = n.publishIntervalMs === 0
+  form.publishMs = n.publishIntervalMs == null ? daq.controller.defaultPublishIntervalMs : n.publishIntervalMs
+  form.unit = n.unit
+  form.decimals = n.decimals
+  form.min = n.min
+  form.max = n.max
+  form.warnLow = n.warnLow
+  form.warnHigh = n.warnHigh
+}, { immediate: true })
+
+// 驱动连接参数编辑(真实协议:host/register/endpoint...;schema 驱动渲染)
+const driverCfg = ref<Record<string, string | number>>({})
+const driverFields = computed<DriverConfigField[]>(() =>
+  DAQ_DRIVERS.find(d => d.kind === form.driver)?.configFields ?? [])
+watch(node, (n) => {
+  if (n) driverCfg.value = { ...(n.driverConfig as Record<string, string | number>) }
+}, { immediate: true })
+watch(() => form.driver, () => {
+  // 切换协议且目标无参数 → 填 schema 缺省
+  if (driverFields.value.length && Object.keys(driverCfg.value).length === 0) {
+    const cfg: Record<string, string | number> = {}
+    for (const f of driverFields.value) if (f.default !== undefined) cfg[f.key] = f.default as string | number
+    driverCfg.value = cfg
+  }
+}, { immediate: true })
+const testing = ref(false)
+const testResult = ref<DaqDriverTestResult | null>(null)
+async function doTest(): Promise<void> {
+  testing.value = true
+  testResult.value = null
+  try {
+    // 先保存当前驱动与参数,再测(测存量节点 = 测已落库配置)
+    await daq.patchNode(nodeId.value, { driver: form.driver, driverConfig: { ...driverCfg.value } })
+    testResult.value = await daq.testNode(nodeId.value)
+  }
+  catch (err) {
+    testResult.value = { ok: false, message: apiErrorMessage(err) }
+  }
+  finally {
+    testing.value = false
+  }
+}
+
+const saving = ref(false)
+async function saveParams(): Promise<void> {
+  const n = node.value
+  if (!n || saving.value) return
+  saving.value = true
+  try {
+    await daq.patchNode(n.id, {
+      enabled: form.enabled,
+      driver: form.driver,
+      lineId: form.lineId,
+      driverConfig: { ...driverCfg.value },
+      intervalMs: form.followGlobal ? null : Math.max(1000, Math.min(60_000, Math.round(form.intervalMs))),
+      publishIntervalMs: form.publishFollow
+        ? null
+        : (form.publishEveryFrame ? 0 : Math.max(0, Math.min(60_000, Math.round(form.publishMs)))),
+      unit: form.unit,
+      decimals: Math.max(0, Math.min(6, Math.round(form.decimals))),
+      min: form.min,
+      max: form.max,
+      warnLow: form.warnLow,
+      warnHigh: form.warnHigh,
+    })
+  }
+  finally {
+    saving.value = false
+  }
+}
+
+/** 驱动是否为预留协议(meta status=planned) */
+function driverPlanned(kind: string): boolean {
+  return daq.meta.drivers.find(d => d.kind === kind)?.status === 'planned'
+}
+
+// ---------- 设备绑定 ----------
+const bindDeviceId = ref('')
+const boundDeviceName = computed(() => {
+  const ids = node.value?.deviceIds ?? (node.value?.deviceBindingId ? [node.value.deviceBindingId] : [])
+  return ids
+    .map(id => deviceTwins.twins.find(t => t.id === id)?.name ?? `${id.slice(0, 8)}…`)
+    .join(' / ')
+})
+function onBindToggle(): void {
+  void daq.bindNode(nodeId.value, node.value?.deviceBindingId ? null : (bindDeviceId.value || null))
+}
+const availableDevices = computed(() =>
+  deviceTwins.twins.filter(t => t.kind !== 'daq' && t.id !== node.value?.id),
+)
+
+// ---------- 历史(时序库) ----------
+type ChartRow = { at: number, value?: number, avg?: number, min?: number, max?: number }
+const historyPoints = ref<ChartRow[]>([])
+const bucketMs = ref<number>(15000)
+const histLoading = ref(false)
+const BUCKETS = [
+  { label: '1s 桶', ms: 1000 },
+  { label: '5s 桶', ms: 5000 },
+  { label: '15s 桶(默认)', ms: 15000 },
+  { label: '30s 桶', ms: 30000 },
+  { label: '1min 桶', ms: 60000 },
+]
+async function loadHistory(): Promise<void> {
+  if (!nodeId.value) return
+  histLoading.value = true
+  try {
+    const pts = await daq.samplesOf(nodeId.value, {
+      toMs: Date.now(),
+      bucketMs: bucketMs.value || undefined,
+      limit: 400,
+    })
+    // 接口 DESC 返回 → 图表时间正序
+    historyPoints.value = [...pts].reverse() as ChartRow[]
+  }
+  finally {
+    histLoading.value = false
+    drawChart()
+  }
+}
+
+const chartCanvas = ref<HTMLCanvasElement | null>(null)
+const trendColor = '#35e0a0'
+const gridColor = 'rgba(120,135,160,0.18)'
+const inkColor = 'rgba(140,155,175,0.8)'
+function drawChart(): void {
+  const cv = chartCanvas.value
+  if (!cv) return
+  const dpr = Math.min(window.devicePixelRatio || 1, 2)
+  const w = cv.clientWidth
+  const h = cv.clientHeight
+  if (cv.width !== w * dpr || cv.height !== h * dpr) {
+    cv.width = w * dpr
+    cv.height = h * dpr
+  }
+  const ctx = cv.getContext('2d')
+  if (!ctx) return
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  ctx.clearRect(0, 0, w, h)
+  for (let i = 1; i < 4; i++) {
+    ctx.strokeStyle = gridColor
+    ctx.beginPath()
+    ctx.moveTo(0, (h / 4) * i)
+    ctx.lineTo(w, (h / 4) * i)
+    ctx.stroke()
+  }
+  const rows = historyPoints.value
+  if (rows.length < 2) return
+  let lo = Number.POSITIVE_INFINITY
+  let hi = Number.NEGATIVE_INFINITY
+  for (const r of rows) {
+    const v = r.value ?? r.avg ?? r.min ?? 0
+    lo = Math.min(lo, v)
+    hi = Math.max(hi, v)
+  }
+  const span = Math.max(hi - lo, 1e-9)
+  ctx.strokeStyle = inkColor
+  ctx.font = '10px monospace'
+  ctx.fillStyle = inkColor
+  ctx.fillText(hi.toFixed(2), 4, 11)
+  ctx.fillText(lo.toFixed(2), 4, h - 4)
+  ctx.strokeStyle = trendColor
+  ctx.lineWidth = 1.6
+  ctx.beginPath()
+  rows.forEach((r, i) => {
+    const x = (i / (rows.length - 1)) * w
+    const y = h - (((r.value ?? r.avg ?? 0) - lo) / span) * (h - 16) - 8
+    if (i === 0) ctx.moveTo(x, y)
+    else ctx.lineTo(x, y)
+  })
+  ctx.stroke()
+}
+
+/** live 趋势(WS hist 环形缓冲;独立小画布,与历史图互补) */
+const liveCanvas = ref<HTMLCanvasElement | null>(null)
+let uiTimer: ReturnType<typeof setInterval> | null = null
+function drawLive(): void {
+  const cv = liveCanvas.value
+  const n = node.value
+  if (!cv || !n || n.hist.length < 2) return
+  const dpr = Math.min(window.devicePixelRatio || 1, 2)
+  const w = cv.clientWidth
+  const h = cv.clientHeight
+  if (cv.width !== w * dpr || cv.height !== h * dpr) {
+    cv.width = w * dpr
+    cv.height = h * dpr
+  }
+  const ctx = cv.getContext('2d')
+  if (!ctx) return
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  ctx.clearRect(0, 0, w, h)
+  const hi = Math.max(...n.hist)
+  const lo = Math.min(...n.hist)
+  const span = Math.max(hi - lo, 1e-9)
+  ctx.strokeStyle = 'rgba(65,200,244,0.9)'
+  ctx.lineWidth = 1.5
+  ctx.beginPath()
+  n.hist.forEach((v, i) => {
+    const x = (i / (n.hist.length - 1)) * w
+    const y = h - ((v - lo) / span) * (h - 6) - 3
+    if (i === 0) ctx.moveTo(x, y)
+    else ctx.lineTo(x, y)
+  })
+  ctx.stroke()
+}
+onMounted(() => {
+  void loadHistory()
+  // live 趋势重绘循环(仅浏览器;SSR 安全)
+  uiTimer = setInterval(() => {
+    drawLive()
+  }, 800)
+})
+onBeforeUnmount(() => {
+  if (uiTimer) clearInterval(uiTimer)
+})
+
+watch(bucketMs, () => void loadHistory())
+</script>
+
+<template>
+  <div class="page">
+    <p class="aw-kicker">
+      <NuxtLink
+        to="/daq"
+        class="back"
+      >{{ $t('daqDetail.k1emg364001') }}</NuxtLink> / NODE {{ nodeId.slice(0, 8).toUpperCase() }}
+    </p>
+    <div class="aw-page-head">
+      <h1>{{ node?.name ?? nodeId }}</h1>
+      <span
+        class="st-pill"
+        :class="[effectiveState()]"
+      >{{ stateLabel[effectiveState()] }}</span>
+    </div>
+
+    <p
+      v-if="!node && daq.error"
+      class="err"
+    >
+      {{ daq.error }}(<NuxtLink to="/workshop">{{ $t('daqDetail.k1bhhheq002') }}</NuxtLink>)
+    </p>
+
+    <div
+      v-if="node"
+      class="grid"
+    >
+      <!-- 左列:实时状态卡 -->
+      <section class="col-live">
+        <div class="aw-tile value-card">
+          <p class="aw-kicker">
+            {{ $t('daqDetail.k1fx2vik032') }} {{ tpl?.ch ?? '-' }}
+          </p>
+          <div class="big-val mono">
+            {{ node.value != null ? node.value.toFixed(node.decimals) : '--' }}<small>{{ node.unit }}</small>
+          </div>
+          <canvas
+            ref="liveCanvas"
+            class="live-canvas"
+          />
+          <dl class="facts mono">
+            <div>
+              <dt>{{ $t('daqDetail.k4a0la003') }}</dt>
+              <dd>{{ node.driver }}{{ driverPlanned(node.driver) ? $t('daqDetail.kz8zr9v035') : '' }}</dd>
+            </div>
+            <div>
+              <dt>{{ $t('daqDetail.k3xg3w004') }}</dt>
+              <dd>{{ node.intervalMs ?? $t('daqDetail.k9vnp9h053', { p0: daq.controller.defaultIntervalMs }) }}</dd>
+            </div>
+            <div>
+              <dt>{{ $t('daqDetail.k3w6td005') }}</dt>
+              <dd>{{ publishLabel(node.publishIntervalMs) }}</dd>
+            </div>
+            <div>
+              <dt>{{ $t('daqDetail.k3x5tpx006') }}</dt>
+              <dd>{{ node.warnLow ?? '-∞' }} ~ {{ node.warnHigh ?? '+∞' }}</dd>
+            </div>
+            <div>
+              <dt>{{ $t('daqDetail.k1hjj0jf007') }}</dt>
+              <dd>{{ node.min }} ~ {{ node.max }}</dd>
+            </div>
+            <div>
+              <dt>{{ $t('daqDetail.k1i8rtqt008') }}</dt>
+              <dd>{{ boundDeviceName || $t('daqDetail.k3own4q036') }}</dd>
+            </div>
+          </dl>
+        </div>
+      </section>
+
+      <!-- 中列:参数控制 -->
+      <section class="col-form aw-tile pad">
+        <h3 class="sec">
+          {{ $t('daqDetail.kd9d69j009') }}
+        </h3>
+        <form
+          class="form-grid"
+          @submit.prevent="saveParams"
+        >
+          <label class="field">
+            <span>{{ $t('daqDetail.k1iw7tbf010') }}</span>
+            <button
+              type="button"
+              class="toggle"
+              :class="{ on: form.enabled }"
+              @click="form.enabled = !form.enabled"
+            >
+              {{ form.enabled ? $t('daqDetail.k3w3j8f037') : $t('daqDetail.k3n5aaj045') }}
+            </button>
+          </label>
+          <label class="field">
+            <span>{{ $t('daqDetail.k12k23od011') }}</span>
+            <select
+              v-model="form.lineId"
+              class="input"
+            >
+              <option value="">
+                {{ $t('daqDetail.k3ootr6012') }}
+              </option>
+              <option
+                v-for="l in dcw.lines"
+                :key="l.id"
+                :value="l.id"
+              >
+                {{ l.name }}
+              </option>
+            </select>
+          </label>
+          <label class="field">
+            <span>{{ $t('daqDetail.k1l6smxo013') }}</span>
+            <select
+              v-model="form.driver"
+              class="input"
+            >
+              <option
+                v-for="d in DAQ_DRIVERS"
+                :key="d.kind"
+                :value="d.kind"
+                :disabled="d.status === 'planned'"
+              >
+                {{ d.label }}{{ d.status === 'planned' ? $t('daqDetail.kz8zr9v035') : '' }}
+              </option>
+            </select>
+          </label>
+          <label class="field row">
+            <button
+              type="button"
+              class="toggle slim"
+              :class="{ on: form.followGlobal }"
+              @click="form.followGlobal = !form.followGlobal"
+            >
+              {{ form.followGlobal ? $t('daqDetail.k1k2ueyq038') : $t('daqDetail.k1cgi8fy046') }}
+            </button>
+            <input
+              v-model.number="form.intervalMs"
+              type="number"
+              min="1000"
+              max="60000"
+              step="500"
+              class="input"
+              :disabled="form.followGlobal"
+            ><small>ms</small>
+          </label>
+          <label class="field row">
+            <button
+              type="button"
+              class="toggle slim"
+              :class="{ on: form.calKind === 'linear' }"
+              title="采集标定 decoder:物理值 = scale × PLC采集值 + offset"
+              @click="form.calKind = form.calKind === 'linear' ? 'none' : 'linear'"
+            >
+              {{ form.calKind === 'linear' ? $t('daqDetail.k1eru4r1039') : $t('daqDetail.k3oktae047') }}
+            </button>
+            <input
+              v-model.number="form.calScale"
+              type="number"
+              step="0.1"
+              class="input"
+              :disabled="form.calKind !== 'linear'"
+              title="decode 斜率(≠0)"
+            >
+            <input
+              v-model.number="form.calOffset"
+              type="number"
+              step="0.1"
+              class="input"
+              :disabled="form.calKind !== 'linear'"
+              title="decode 截距"
+            ><small>decoder</small>
+          </label>
+          <label class="field row">
+            <button
+              type="button"
+              class="toggle slim"
+              :class="{ on: form.publishFollow }"
+              @click="form.publishFollow = !form.publishFollow"
+            >
+              {{ form.publishFollow ? $t('daqDetail.k1k2t5o7040') : $t('daqDetail.k1cggz5f048') }}
+            </button>
+            <span
+              class="toggle slim"
+              :class="{ on: form.publishEveryFrame }"
+              style="cursor: pointer;"
+              @click="form.publishEveryFrame = !form.publishEveryFrame"
+            >{{ form.publishEveryFrame ? $t('daqDetail.k41mvv041') : $t('daqDetail.k3n42dj049') }}</span>
+            <input
+              v-model.number="form.publishMs"
+              type="number"
+              min="0"
+              max="60000"
+              step="100"
+              class="input"
+              :disabled="form.publishFollow || form.publishEveryFrame"
+            ><small>ms</small>
+          </label>
+          <label class="field">
+            <span>{{ $t('daqDetail.k3x4ef014') }}</span>
+            <input
+              v-model="form.unit"
+              class="input"
+            >
+          </label>
+          <label class="field">
+            <span>{{ $t('daqDetail.k3mxmcx015') }}</span>
+            <input
+              v-model.number="form.decimals"
+              type="number"
+              min="0"
+              max="6"
+              class="input"
+            >
+          </label>
+          <div class="field-row">
+            <label class="field">
+              <span>{{ $t('daqDetail.k1l9jv5m016') }}</span>
+              <input
+                v-model.number="form.min"
+                type="number"
+                step="any"
+                class="input"
+              >
+            </label>
+            <label class="field">
+              <span>{{ $t('daqDetail.k1md63hm017') }}</span>
+              <input
+                v-model.number="form.warnLow"
+                type="number"
+                step="any"
+                class="input"
+              >
+            </label>
+            <label class="field">
+              <span>{{ $t('daqDetail.k1md63gp018') }}</span>
+              <input
+                v-model.number="form.warnHigh"
+                type="number"
+                step="any"
+                class="input"
+              >
+            </label>
+            <label class="field">
+              <span>{{ $t('daqDetail.k1l9jv4p019') }}</span>
+              <input
+                v-model.number="form.max"
+                type="number"
+                step="any"
+                class="input"
+              >
+            </label>
+          </div>
+          <button
+            class="aw-pill"
+            type="submit"
+            :disabled="saving"
+          >
+            {{ saving ? $t('daqDetail.k1as0g50042') : $t('daqDetail.ksn9cgo050') }}
+          </button>
+        </form>
+
+        <!-- 驱动连接参数(mock 空;真实协议 schema 动态表单 + 测试连接) -->
+        <template v-if="driverFields.length">
+          <h3 class="sec mt">
+            {{ $t('daqDetail.k1p9gioa033') }} {{ DAQ_DRIVERS.find(d => d.kind === form.driver)?.label }}
+          </h3>
+          <div class="driver-grid">
+            <label
+              v-for="f in driverFields"
+              :key="f.key"
+              class="field"
+            >
+              <span>{{ f.label }}<em v-if="f.required">*</em></span>
+              <select
+                v-if="f.type === 'select'"
+                v-model="driverCfg[f.key]"
+                class="input"
+              >
+                <option
+                  v-for="o in f.options"
+                  :key="o.value"
+                  :value="o.value"
+                >
+                  {{ o.label }}
+                </option>
+              </select>
+              <input
+                v-else
+                v-model="driverCfg[f.key]"
+                :type="f.type === 'number' ? 'number' : 'text'"
+                :placeholder="f.placeholder"
+                class="input"
+              >
+            </label>
+          </div>
+          <div class="test-row">
+            <button
+              class="pill-btn"
+              :disabled="testing"
+              @click="doTest"
+            >
+              {{ testing ? $t('daqDetail.k1fsh720043') : $t('daqDetail.k1fstglk051') }}
+            </button>
+            <span
+              v-if="testResult"
+              class="test-out mono"
+              :class="testResult.ok ? 'ok' : 'bad'"
+            >{{ testResult.ok ? '✓' : '✗' }} {{ testResult.message }}</span>
+          </div>
+        </template>
+
+        <h3 class="sec mt">
+          {{ $t('daqDetail.k1ie6qju020') }}
+        </h3>
+        <div class="bind-row">
+          <select
+            v-model="bindDeviceId"
+            class="input grow"
+          >
+            <option value="">
+              {{ $t('daqDetail.kjobzu3021') }}
+            </option>
+            <option
+              v-for="dv in availableDevices"
+              :key="dv.id"
+              :value="dv.id"
+            >
+              {{ dv.name }}
+            </option>
+          </select>
+          <button
+            class="pill-btn"
+            @click="onBindToggle"
+          >
+            {{ boundDeviceName ? $t('daqDetail.k479eh044') : $t('daqDetail.k452a8052') }}
+          </button>
+        </div>
+      </section>
+
+      <!-- 右列:时序库历史 -->
+      <section class="col-hist aw-tile pad">
+        <div class="hist-hd">
+          <h3 class="sec">
+            {{ $t('daqDetail.k1i535i5034') }}{{ daq.meta.tsdb }})
+          </h3>
+          <div class="hist-ctl mono">
+            <select
+              v-model.number="bucketMs"
+              class="input"
+            >
+              <option
+                v-for="b in BUCKETS"
+                :key="b.ms"
+                :value="b.ms"
+              >
+                {{ b.label }}
+              </option>
+            </select>
+            <button
+              class="pill-btn"
+              @click="loadHistory"
+            >
+              {{ $t('daqDetail.k3x1jg022') }}
+            </button>
+          </div>
+        </div>
+        <canvas
+          ref="chartCanvas"
+          class="hist-canvas"
+        />
+        <table class="raw-table mono">
+          <thead>
+            <tr><th>{{ $t('daqDetail.k40vsf023') }}</th><th>{{ $t('daqDetail.k48v5024') }}</th><th>{{ $t('daqDetail.k4bza025') }}</th></tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(p, i) in historyPoints.filter(r => r.value != null).slice(-12).reverse()"
+              :key="i"
+            >
+              <td>{{ new Date(p.at).toLocaleTimeString('zh-CN', { hour12: false }) }}</td>
+              <td>{{ p.value!.toFixed(node?.decimals ?? 2) }}</td>
+              <td>{{ p.state }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+    </div>
+
+    <!-- 帧视图(v2 多形态信号:向量轮廓 / 图像画廊;scalar 节点不渲染) -->
+    <section
+      v-if="isFrameNode"
+      class="aw-tile pad frames-tile"
+    >
+      <div class="hist-hd">
+        <h3 class="sec">
+          {{ signalKind === 'image' ? $t('daqDetail.kfrm0001') : $t('daqDetail.kfrm0002') }}
+          <span class="mono frames-n">{{ frames.length }}</span>
+        </h3>
+        <button
+          class="pill-btn"
+          @click="loadFrames"
+        >
+          {{ $t('daqDetail.k3x1jg022') }}
+        </button>
+      </div>
+
+      <!-- 向量:最近帧轮廓 + 帧表 -->
+      <template v-if="signalKind === 'vector'">
+        <svg
+          class="vec-svg"
+          :viewBox="`0 0 ${VEC_W} ${VEC_H}`"
+          preserveAspectRatio="none"
+        >
+          <polyline
+            :points="vecPath"
+            fill="none"
+            stroke="var(--accent)"
+            stroke-width="1.5"
+          />
+        </svg>
+        <table class="raw-table mono">
+          <thead>
+            <tr><th>{{ $t('daqDetail.k40vsf023') }}</th><th>{{ $t('daqDetail.kfrm0004') }}</th><th>{{ $t('daqDetail.kfrm0005') }}</th></tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="f in frames.filter(x => x.kind === 'vector').slice(0, 12)"
+              :key="f.at"
+            >
+              <td>{{ timeOf(f.at) }}</td>
+              <td>{{ f.points?.length ?? 0 }}</td>
+              <td>{{ metricsBrief(f) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </template>
+
+      <!-- 图像:缩略图画gallery(懒加载;点击看原图) -->
+      <template v-else>
+        <div
+          v-if="frames.length"
+          class="gal"
+        >
+          <figure
+            v-for="f in frames"
+            :key="f.at"
+            class="gal-item"
+            :title="$t('daqDetail.kfrm0006')"
+            @click="fullFrame = f"
+          >
+            <img
+              :src="f.thumbUrl"
+              loading="lazy"
+              alt="daq frame"
+            >
+            <figcaption class="mono">
+              {{ timeOf(f.at) }} · {{ metricsBrief(f) }}
+            </figcaption>
+          </figure>
+        </div>
+        <p
+          v-else
+          class="frames-empty"
+        >
+          {{ $t('daqDetail.kfrm0003') }}
+        </p>
+        <div
+          v-if="fullFrame"
+          class="gal-full"
+          @click="fullFrame = null"
+        >
+          <img
+            :src="fullFrame.contentUrl ?? fullFrame.thumbUrl"
+            alt="daq frame full"
+          >
+        </div>
+      </template>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.page { padding: 4px; }
+.back { color: var(--ink-faint); text-decoration: none; }
+.back:hover { color: var(--accent); }
+.aw-page-head h1 { margin: 2px 0 4px; font-size: 26px; font-weight: 400; letter-spacing: -0.01em; }
+.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.sec { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
+.mt { margin-top: 22px; }
+.err { margin-top: 14px; font-size: 13px; color: var(--tone-danger-dot); }
+
+.grid {
+  display: grid;
+  gap: 14px;
+  align-items: start;
+  grid-template-columns: minmax(260px, 340px) minmax(320px, 1fr) minmax(280px, 380px);
+}
+@media (max-width: 1100px) {
+  .grid { grid-template-columns: 1fr; }
+}
+.pad { padding: 16px 18px; }
+
+/* 实时值卡 */
+.value-card { padding: 16px 18px; }
+.big-val { margin: 8px 0 10px; font-size: 40px; line-height: 1.1; color: var(--accent); }
+.big-val small { margin-left: 8px; font-size: 15px; color: var(--ink-faint); }
+.live-canvas { width: 100%; height: 64px; border: 1px solid var(--line); border-radius: var(--radius-chip); background: var(--paper-deep); }
+.facts { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 0; }
+.facts div { display: flex; justify-content: space-between; font-size: 11.5px; }
+.facts dt { color: var(--ink-faint); }
+.facts dd { margin: 0; color: var(--ink); }
+
+/* 参数表单 */
+.form-grid { display: flex; flex-direction: column; gap: 10px; }
+.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-faint); flex: 1; }
+.field.row { flex-direction: row; align-items: center; gap: 8px; }
+.field.row small { color: var(--ink-faint); }
+.field-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
+.input {
+  width: 100%;
+  padding: 6px 9px;
+  font-size: 12.5px;
+  color: var(--ink);
+  background: var(--paper-raised);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-chip);
+}
+.input:disabled { opacity: 0.45; }
+.grow { flex: 1 1 auto; }
+.toggle {
+  align-self: flex-start;
+  padding: 6px 12px;
+  font-size: 12px;
+  cursor: pointer;
+  color: var(--tone-neutral-dot);
+  background: var(--tone-neutral-bg);
+  border: 0;
+  border-radius: var(--radius-chip);
+}
+.toggle.on { color: var(--tone-success-dot); background: var(--tone-success-bg); }
+.toggle.slim { padding: 6px 10px; font-size: 11.5px; }
+.bind-row { display: flex; gap: 8px; }
+.driver-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
+.field em { margin-left: 2px; font-style: normal; color: var(--tone-danger-dot); }
+.test-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
+.test-out { font-size: 11px; }
+.test-out.ok { color: var(--tone-success-dot); }
+.test-out.bad { color: var(--tone-danger-dot); }
+
+/* 历史 */
+.col-hist { min-width: 0; }
+.hist-hd { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
+.hist-ctl { display: flex; gap: 6px; }
+.hist-canvas { width: 100%; height: 130px; border: 1px solid var(--line); border-radius: var(--radius-chip); background: var(--paper-deep); }
+.raw-table { width: 100%; margin-top: 10px; font-size: 11px; border-collapse: collapse; }
+.raw-table th, .raw-table td { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--divider-hair); }
+.raw-table th { font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-fainter); }
+
+.st-pill {
+  display: inline-block;
+  padding: 3px 11px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  border-radius: var(--radius-pill);
+}
+.st-pill.ok { color: var(--tone-success-dot); background: var(--tone-success-bg); }
+.st-pill.warn { color: var(--tone-warning-dot); background: var(--tone-warning-bg); }
+.st-pill.alarm { color: var(--tone-danger-dot); background: var(--tone-danger-bg); }
+.st-pill.offline { color: var(--tone-neutral-dot); background: var(--tone-neutral-bg); }
+
+/* 帧视图(v2 多形态) */
+.frames-tile { margin-top: 14px; }
+.frames-n { margin-left: 8px; color: var(--ink-faint); }
+.vec-svg { width: 100%; height: 96px; display: block; background: var(--tone-neutral-bg); border-radius: 6px; margin-bottom: 10px; }
+.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
+.gal-item { margin: 0; cursor: zoom-in; }
+.gal-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; background: var(--tone-neutral-bg); }
+.gal-item figcaption { margin-top: 4px; font-size: 11px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.frames-empty { margin: 8px 0; font-size: 13px; color: var(--ink-faint); }
+.gal-full { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 72%); cursor: zoom-out; }
+.gal-full img { max-width: 92vw; max-height: 92vh; border-radius: 8px; }
+</style>