feat(device): use adapter discovery backend

yeg

2026-08-26 cd0cd108a4a3c35cda8c977f0cb5172a536bf0f5

feat(device): use adapter discovery backend

 src/api/deviceAdapters.ts

New file
@@ -0,0 +1,83 @@
import { request, type ApiResponse } from './request'

export type AdapterConnectionStatus = 'DISCONNECTED' | 'CONNECTED' | 'ERROR'
export type ChannelOnlineStatus = 'ONLINE' | 'OFFLINE' | 'UNKNOWN'

export interface DeviceAdapterRecord {
  adapterId: number
  adapterCode: string
  adapterName: string
  adapterType: 'BTS'
  host: string
  port: number
  pollIntervalMs: number
  timezoneId: string
  readOnly: boolean
  status: '0' | '1'
  connectionStatus: AdapterConnectionStatus
  lastErrorCode: string | null
  lastErrorMessage: string | null
  lastAttemptAtUtc: string | null
  lastObservedAtUtc: string | null
  remark: string | null
}

export interface DeviceAdapterPayload {
  adapterId?: number
  adapterCode: string
  adapterName: string
  adapterType: 'BTS'
  host: string
  port: number
  pollIntervalMs: number
  timezoneId: string
  readOnly: true
  remark: string
}

export interface DetectionChannelRecord {
  channelId: number
  adapterId: number
  cabinetId: number
  devtype: number
  devid: number
  subdevid: number
  chlid: number
  displayNo: string
  onlineStatus: ChannelOnlineStatus
  workStatus: string
  lastSeenAtUtc: string | null
}

interface AdapterListResponse extends ApiResponse { total: number; rows: DeviceAdapterRecord[] }
interface DataResponse<T> extends ApiResponse { data: T }

export async function getDeviceAdapters(pageNum: number, pageSize: number) {
  const result = await request<AdapterListResponse>(`/system/deviceAdapter/list?pageNum=${pageNum}&pageSize=${pageSize}`)
  return { total: Number(result.total) || 0, rows: result.rows || [] }
}

export async function createDeviceAdapter(payload: DeviceAdapterPayload) {
  await request<ApiResponse>('/system/deviceAdapter', { method: 'POST', body: JSON.stringify(payload) })
}

export async function updateDeviceAdapter(payload: DeviceAdapterPayload) {
  await request<ApiResponse>('/system/deviceAdapter', { method: 'PUT', body: JSON.stringify(payload) })
}

export async function changeDeviceAdapterStatus(adapterId: number, enabled: boolean) {
  await request<ApiResponse>(`/system/deviceAdapter/${adapterId}/status`, {
    method: 'PUT', body: JSON.stringify({ enabled }),
  })
}

export async function discoverDeviceAdapter(adapterId: number) {
  return request<DataResponse<{ cabinetCount: number; channelCount: number; observedAtUtc: string }>>(
    `/system/deviceAdapter/${adapterId}/discover`, { method: 'POST' },
  )
}

export async function getDeviceAdapterChannels(adapterId: number) {
  const result = await request<DataResponse<DetectionChannelRecord[]>>(`/system/deviceAdapter/${adapterId}/channels`)
  return result.data || []
}

 src/router/index.ts

@@ -119,18 +119,6 @@
          meta: { title: '检测柜' },
        },
        {
          path: 'device-cabinet/new',
          name: 'device-cabinet-create',
          component: () => import('@/views/DeviceCabinetForm.vue'),
          meta: { title: '新增检测柜' },
        },
        {
          path: 'device-cabinet/:id/edit',
          name: 'device-cabinet-edit',
          component: () => import('@/views/DeviceCabinetForm.vue'),
          meta: { title: '编辑检测柜' },
        },
        {
          path: 'device-collector',
          name: 'device-collector',
          component: () => import('@/views/DeviceCollector.vue'),

 src/stores/deviceCabinets.ts

@@ -1,5 +1,3 @@
import { ref } from 'vue'

export type CabinetOnlineStatus = '在线' | '离线'
export type CabinetTestStatus = '待检测' | '测试中' | '空闲'
export type CabinetStatus = '启用' | '禁用'
@@ -22,74 +20,6 @@
  createdAt: string
}

export type CabinetPayload = Pick<DeviceCabinetRecord, 'deviceCode' | 'ip' | 'mac' | 'name' | 'manufacturer' | 'model' | 'channelCount' | 'specs' | 'remark' | 'onlineStatus' | 'testStatus' | 'currentTest' | 'status'>

const STORAGE_KEY = 'battery_detection_device_cabinets_v1'

const seedRecords: DeviceCabinetRecord[] = [
  { id: 4012, deviceCode: '45643166', ip: '192.1.1.152', mac: '41:F5:D6:N1', name: '测试柜1', manufacturer: 'XXX', model: 'A1', channelCount: 12, specs: 120, remark: '一号实验区', onlineStatus: '在线', testStatus: '待检测', currentTest: 'SP2电池寿命循环', status: '启用', createdAt: '2026-08-05 09:26' },
  { id: 4011, deviceCode: '45643167', ip: '192.1.1.153', mac: '41:F5:D6:N2', name: '测试柜2', manufacturer: 'XXX', model: 'A1', channelCount: 12, specs: 120, remark: '一号实验区', onlineStatus: '在线', testStatus: '测试中', currentTest: '高温循环性能测试', status: '启用', createdAt: '2026-08-04 16:18' },
  { id: 4010, deviceCode: '45643168', ip: '192.1.1.154', mac: '41:F5:D6:N3', name: '测试柜3', manufacturer: 'XXX', model: 'A2', channelCount: 24, specs: 240, remark: '二号实验区', onlineStatus: '在线', testStatus: '空闲', currentTest: '-', status: '启用', createdAt: '2026-08-04 10:42' },
  { id: 4009, deviceCode: '45643169', ip: '192.1.1.155', mac: '41:F5:D6:N4', name: '测试柜4', manufacturer: 'XXX', model: 'A2', channelCount: 24, specs: 240, remark: '二号实验区', onlineStatus: '离线', testStatus: '空闲', currentTest: '-', status: '禁用', createdAt: '2026-08-03 15:06' },
  { id: 4008, deviceCode: '45643170', ip: '192.1.1.156', mac: '41:F5:D6:N5', name: '测试柜5', manufacturer: 'YYY', model: 'B1', channelCount: 8, specs: 80, remark: '三号实验区', onlineStatus: '在线', testStatus: '待检测', currentTest: '-', status: '启用', createdAt: '2026-08-02 11:35' },
  { id: 4007, deviceCode: '45643171', ip: '192.1.1.157', mac: '41:F5:D6:N6', name: '测试柜6', manufacturer: 'YYY', model: 'B1', channelCount: 8, specs: 80, remark: '三号实验区', onlineStatus: '在线', testStatus: '空闲', currentTest: '-', status: '启用', createdAt: '2026-08-01 09:18' },
  { id: 4006, deviceCode: '45643172', ip: '192.1.1.158', mac: '41:F5:D6:N7', name: '测试柜7', manufacturer: 'YYY', model: 'B2', channelCount: 16, specs: 160, remark: '四号实验区', onlineStatus: '离线', testStatus: '待检测', currentTest: '-', status: '禁用', createdAt: '2026-07-30 14:20' },
  { id: 4005, deviceCode: '45643173', ip: '192.1.1.159', mac: '41:F5:D6:N8', name: '测试柜8', manufacturer: 'YYY', model: 'B2', channelCount: 16, specs: 160, remark: '四号实验区', onlineStatus: '在线', testStatus: '测试中', currentTest: '低温充放电测试', status: '启用', createdAt: '2026-07-29 17:12' },
  { id: 4004, deviceCode: '45643174', ip: '192.1.1.160', mac: '41:F5:D6:N9', name: '测试柜9', manufacturer: 'ZZZ', model: 'C1', channelCount: 32, specs: 320, remark: '五号实验区', onlineStatus: '在线', testStatus: '空闲', currentTest: '-', status: '启用', createdAt: '2026-07-28 13:46' },
  { id: 4003, deviceCode: '45643175', ip: '192.1.1.161', mac: '41:F5:D6:N0', name: '测试柜10', manufacturer: 'ZZZ', model: 'C1', channelCount: 32, specs: 320, remark: '五号实验区', onlineStatus: '离线', testStatus: '空闲', currentTest: '-', status: '禁用', createdAt: '2026-07-26 10:16' },
]

function loadRecords() {
  try {
    const stored = localStorage.getItem(STORAGE_KEY)
    if (stored) {
      const parsed = JSON.parse(stored) as Array<Omit<DeviceCabinetRecord, 'specs'> & { specs: number | string }>
      return parsed.map(item => ({
        ...item,
        specs: typeof item.specs === 'number' ? item.specs : Number(item.specs) || item.channelCount * 10,
      }))
    }
  } catch {
    localStorage.removeItem(STORAGE_KEY)
  }
  return seedRecords
}

const records = ref<DeviceCabinetRecord[]>(loadRecords())

function persist() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(records.value))
}

function nowString() {
  const date = new Date()
  const pad = (value: number) => String(value).padStart(2, '0')
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
}

export function useDeviceCabinets() {
  function createCabinet(data: CabinetPayload) {
    const id = Math.max(4000, ...records.value.map(item => item.id)) + 1
    records.value.unshift({ ...data, id, createdAt: nowString() })
    persist()
  }

  function updateCabinet(id: number, data: CabinetPayload) {
    const target = records.value.find(item => item.id === id)
    if (!target) return false
    Object.assign(target, data)
    persist()
    return true
  }

  function removeCabinet(id: number) {
    records.value = records.value.filter(item => item.id !== id)
    persist()
  }

  function saveChanges() {
    persist()
  }

  return { records, createCabinet, updateCabinet, removeCabinet, saveChanges }
}
export type CabinetPayload = Pick<DeviceCabinetRecord,
  'deviceCode' | 'ip' | 'mac' | 'name' | 'manufacturer' | 'model' | 'channelCount' |
  'specs' | 'remark' | 'onlineStatus' | 'testStatus' | 'currentTest' | 'status'>

 src/views/DeviceCabinet.vue

@@ -1,237 +1,198 @@
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { changeDeviceCabinetStatus, deleteDeviceCabinets, getDeviceCabinetList } from '@/api/deviceCabinets'
import type { CabinetOnlineStatus, CabinetStatus, CabinetTestStatus, DeviceCabinetRecord } from '@/stores/deviceCabinets'
import { ElMessage } from 'element-plus'
import {
  changeDeviceAdapterStatus, createDeviceAdapter, discoverDeviceAdapter,
  getDeviceAdapterChannels, getDeviceAdapters, updateDeviceAdapter,
  type DetectionChannelRecord, type DeviceAdapterPayload, type DeviceAdapterRecord,
} from '@/api/deviceAdapters'

interface FilterState {
  device: string
  dateRange: [string, string] | null
  onlineStatus: string
  testStatus: string
  status: string
}

const router = useRouter()
const onlineStatuses: CabinetOnlineStatus[] = ['在线', '离线']
const testStatuses: CabinetTestStatus[] = ['测试中', '空闲']
const statuses: CabinetStatus[] = ['启用', '禁用']
const filters = reactive<FilterState>({ device: '', dateRange: null, onlineStatus: '', testStatus: '', status: '' })
const records = ref<DeviceCabinetRecord[]>([])
const adapters = ref<DeviceAdapterRecord[]>([])
const channels = ref<DetectionChannelRecord[]>([])
const total = ref(0)
const pageNum = ref(1)
const pageSize = 10
const selectedId = ref<number | null>(null)
const loading = ref(false)
const channelLoading = ref(false)
const submittingId = ref<number | null>(null)
const currentPage = ref(1)
const pageSize = ref(10)
const dialogVisible = ref(false)
const saving = ref(false)
const editingId = ref<number | null>(null)
const form = reactive<DeviceAdapterPayload>({
  adapterCode: '', adapterName: '', adapterType: 'BTS', host: '', port: 502,
  pollIntervalMs: 5000, timezoneId: 'Asia/Hong_Kong', readOnly: true, remark: '',
})

const onlineStatusValues: Record<CabinetOnlineStatus, string> = { 在线: '0', 离线: '1' }
const testStatusValues: Record<CabinetTestStatus, string> = { 空闲: '0', 测试中: '1', 待检测: '0' }
const statusValues: Record<CabinetStatus, string> = { 启用: '0', 禁用: '1' }

async function loadRecords(showResult = false) {
async function loadAdapters() {
  loading.value = true
  try {
    const result = await getDeviceCabinetList({
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      device: filters.device.trim() || undefined,
      beginCreateTime: filters.dateRange?.[0] ? `${filters.dateRange[0]} 00:00:00` : undefined,
      endCreateTime: filters.dateRange?.[1] ? `${filters.dateRange[1]} 23:59:59` : undefined,
      onlineStatus: filters.onlineStatus && filters.onlineStatus !== '全部' ? onlineStatusValues[filters.onlineStatus as CabinetOnlineStatus] : undefined,
      testStatus: filters.testStatus && filters.testStatus !== '全部' ? testStatusValues[filters.testStatus as CabinetTestStatus] : undefined,
      status: filters.status && filters.status !== '全部' ? statusValues[filters.status as CabinetStatus] : undefined,
    })
    records.value = result.rows
    const result = await getDeviceAdapters(pageNum.value, pageSize)
    adapters.value = result.rows
    total.value = result.total
    if (showResult) ElMessage.success(`共找到 ${result.total} 个检测柜`)
    if (selectedId.value && !result.rows.some(item => item.adapterId === selectedId.value)) selectedId.value = null
    if (!selectedId.value && result.rows.length) selectedId.value = result.rows[0].adapterId
    await loadChannels()
  } catch (error) {
    records.value = []
    total.value = 0
    ElMessage.error(error instanceof Error ? error.message : '检测柜列表加载失败')
  } finally {
    loading.value = false
  }
    adapters.value = []
    channels.value = []
    ElMessage.error(error instanceof Error ? error.message : '设备适配器加载失败')
  } finally { loading.value = false }
}

function applySearch() {
  currentPage.value = 1
  loadRecords(true)
async function loadChannels() {
  if (!selectedId.value) { channels.value = []; return }
  channelLoading.value = true
  try { channels.value = await getDeviceAdapterChannels(selectedId.value) }
  catch (error) {
    channels.value = []
    ElMessage.error(error instanceof Error ? error.message : '检测柜通道加载失败')
  } finally { channelLoading.value = false }
}

function resetSearch() {
  Object.assign(filters, { device: '', dateRange: null, onlineStatus: '', testStatus: '', status: '' })
  currentPage.value = 1
  loadRecords()
function resetForm() {
  Object.assign(form, {
    adapterCode: '', adapterName: '', adapterType: 'BTS', host: '', port: 502,
    pollIntervalMs: 5000, timezoneId: 'Asia/Hong_Kong', readOnly: true, remark: '',
  })
  editingId.value = null
}
function openCreate() { resetForm(); dialogVisible.value = true }
function openEdit(item: DeviceAdapterRecord) {
  editingId.value = item.adapterId
  Object.assign(form, {
    adapterId: item.adapterId, adapterCode: item.adapterCode, adapterName: item.adapterName,
    adapterType: 'BTS', host: item.host, port: item.port, pollIntervalMs: item.pollIntervalMs,
    timezoneId: item.timezoneId, readOnly: true, remark: item.remark || '',
  })
  dialogVisible.value = true
}

function handlePageChange(page: number) {
  currentPage.value = page
  loadRecords()
async function saveAdapter() {
  if (!form.adapterCode.trim() || !form.adapterName.trim() || !form.host.trim()) {
    ElMessage.warning('请填写适配器编码、名称和主机')
    return
}

function handleSizeChange(size: number) {
  pageSize.value = size
  currentPage.value = 1
  loadRecords()
}

function createCabinet() {
  router.push('/device-cabinet/new')
}

function editCabinet(id: number) {
  router.push(`/device-cabinet/${id}/edit`)
}

async function changeStatus(item: DeviceCabinetRecord) {
  const nextStatus: CabinetStatus = item.status === '启用' ? '禁用' : '启用'
  saving.value = true
  try {
    await ElMessageBox.confirm(
      `确认${nextStatus}检测柜“${item.name}”吗？`,
      `${nextStatus}确认`,
      { type: 'warning', confirmButtonText: '确认', cancelButtonText: '取消' },
    )
    submittingId.value = item.id
    await changeDeviceCabinetStatus(item.id, nextStatus)
    ElMessage.success(`检测柜已${nextStatus}`)
    await loadRecords()
  } catch (error) {
    if (error !== 'cancel' && error !== 'close') {
      ElMessage.error(error instanceof Error ? error.message : `${nextStatus}检测柜失败`)
    }
  } finally {
    submittingId.value = null
  }
    const payload = { ...form, adapterId: editingId.value || undefined }
    if (editingId.value) await updateDeviceAdapter(payload)
    else await createDeviceAdapter(payload)
    dialogVisible.value = false
    ElMessage.success(editingId.value ? '设备适配器已更新' : '设备适配器已新增')
    await loadAdapters()
  } catch (error) { ElMessage.error(error instanceof Error ? error.message : '设备适配器保存失败') }
  finally { saving.value = false }
}

async function deleteCabinet(item: DeviceCabinetRecord) {
async function toggleStatus(item: DeviceAdapterRecord, enabled: boolean) {
  submittingId.value = item.adapterId
  try {
    await ElMessageBox.confirm(
      `删除后无法恢复，确认删除检测柜“${item.name}”吗？`,
      '删除确认',
      { type: 'warning', confirmButtonText: '确认删除', cancelButtonText: '取消' },
    )
    submittingId.value = item.id
    await deleteDeviceCabinets(item.id)
    if (records.value.length === 1 && currentPage.value > 1) currentPage.value -= 1
    ElMessage.success('检测柜已删除')
    await loadRecords()
    await changeDeviceAdapterStatus(item.adapterId, enabled)
    ElMessage.success(enabled ? '设备适配器已启用' : '设备适配器已停用')
    await loadAdapters()
  } catch (error) { ElMessage.error(error instanceof Error ? error.message : '启停操作失败') }
  finally { submittingId.value = null }
}

function handleStatusChange(item: DeviceAdapterRecord, value: string | number | boolean) {
  toggleStatus(item, Boolean(value))
}

function handlePageChange(value: number) {
  pageNum.value = value
  loadAdapters()
}

async function discover(item: DeviceAdapterRecord) {
  submittingId.value = item.adapterId
  selectedId.value = item.adapterId
  try {
    const result = await discoverDeviceAdapter(item.adapterId)
    ElMessage.success(`发现 ${result.data.channelCount} 个检测柜通道`)
    await loadAdapters()
  } catch (error) {
    if (error !== 'cancel' && error !== 'close') {
      ElMessage.error(error instanceof Error ? error.message : '删除检测柜失败')
    }
  } finally {
    submittingId.value = null
  }
    await loadAdapters()
    ElMessage.error(error instanceof Error ? error.message : '设备发现失败')
  } finally { submittingId.value = null }
}

function testStatusClass(status: CabinetTestStatus) {
  return { '待检测': 'pending', '测试中': 'running', '空闲': 'idle' }[status]
}

onMounted(() => loadRecords())
function selectAdapter(item: DeviceAdapterRecord) { selectedId.value = item.adapterId; loadChannels() }
function formatTime(value: string | null) { return value ? new Date(value).toLocaleString() : '-' }
function connectionLabel(value: string) { return { CONNECTED: '已连接', ERROR: '连接异常', DISCONNECTED: '未连接' }[value] || value }
function onlineLabel(value: string) { return { ONLINE: '在线', OFFLINE: '离线', UNKNOWN: '未知' }[value] || value }
onMounted(loadAdapters)
</script>

<template>
  <div class="cabinet-page">
    <section class="filter-panel" aria-label="检测柜查询条件">
      <header class="section-heading"><div><i></i><strong>查询条件</strong><span>FILTER CONDITIONS</span></div><small>共 {{ total }} 个检测柜</small></header>
      <div class="filter-grid">
        <label><span>设备</span><el-input v-model="filters.device" clearable placeholder="输入IP、设备编码、MAC或名称" @keyup.enter="applySearch" /></label>
        <label class="date-filter"><span>创建时间</span><el-date-picker v-model="filters.dateRange" type="daterange" value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至" unlink-panels /></label>
        <label><span>在线状态</span><el-select v-model="filters.onlineStatus" clearable placeholder="全部状态"><el-option label="全部" value="全部" /><el-option v-for="item in onlineStatuses" :key="item" :label="item" :value="item" /></el-select></label>
        <label><span>测试状态</span><el-select v-model="filters.testStatus" clearable placeholder="全部状态"><el-option label="全部" value="全部" /><el-option v-for="item in testStatuses" :key="item" :label="item" :value="item" /></el-select></label>
        <label><span>状态</span><el-select v-model="filters.status" clearable placeholder="全部状态"><el-option label="全部" value="全部" /><el-option v-for="item in statuses" :key="item" :label="item" :value="item" /></el-select></label>
        <div class="filter-actions"><button class="primary-button" type="button" @click="applySearch"><el-icon><Search /></el-icon>查询</button><button class="secondary-button" type="button" @click="resetSearch"><el-icon><RefreshLeft /></el-icon>重置</button></div>
      </div>
    </section>

    <section class="result-panel">
      <div class="result-toolbar"><div><i></i><strong>检测柜列表</strong><span>{{ total }} RESULTS · 按创建时间倒序</span></div><button class="primary-button" type="button" @click="createCabinet"><el-icon><Plus /></el-icon>手动添加</button></div>
  <div class="adapter-page">
    <section class="adapter-panel">
      <header class="panel-heading">
        <div><i></i><strong>设备适配器实例</strong><span>{{ total }} INSTANCES</span></div>
        <button class="primary-button" type="button" @click="openCreate"><el-icon><Plus /></el-icon>新增</button>
      </header>
      <div v-loading="loading" class="table-wrap">
        <table>
          <thead><tr><th>设备编码</th><th>IP</th><th>MAC</th><th>名称</th><th>制造商</th><th>型号</th><th>通道数</th><th>规格/容量</th><th>备注</th><th>在线状态</th><th>测试状态</th><th>当前测试</th><th class="action-column">操作</th></tr></thead>
        <table class="adapter-table">
          <thead><tr><th>实例</th><th>端点</th><th>轮询</th><th>时区</th><th>连接状态</th><th>最近观测</th><th>最近错误</th><th>启用</th><th>操作</th></tr></thead>
          <tbody>
            <tr v-for="item in records" :key="item.id">
              <td class="code-cell">{{ item.deviceCode }}</td><td class="code-cell">{{ item.ip }}</td><td class="code-cell">{{ item.mac }}</td><td><strong>{{ item.name }}</strong></td><td>{{ item.manufacturer }}</td><td>{{ item.model }}</td><td>{{ item.channelCount }}</td><td :title="String(item.specs)">{{ item.specs }}</td><td :title="item.remark">{{ item.remark || '-' }}</td>
              <td><span class="online-state" :class="item.onlineStatus === '在线' ? 'online' : 'offline'"><i></i>{{ item.onlineStatus }}</span></td>
              <td><span class="test-state" :class="testStatusClass(item.testStatus)">{{ item.testStatus }}</span></td>
              <td :title="item.currentTest">{{ item.currentTest || '-' }}</td>
              <td class="action-column"><div class="row-actions"><button type="button" :disabled="submittingId !== null" :class="item.status === '启用' ? 'disable-action' : 'enable-action'" @click="changeStatus(item)">{{ submittingId === item.id ? '处理中' : item.status === '启用' ? '禁用' : '启用' }}</button><button type="button" :disabled="submittingId !== null" @click="editCabinet(item.id)">编辑</button><button class="delete-action" type="button" :disabled="submittingId !== null" @click="deleteCabinet(item)">删除</button></div></td>
            <tr v-for="item in adapters" :key="item.adapterId" :class="{ selected: selectedId === item.adapterId }" @click="selectAdapter(item)">
              <td><strong>{{ item.adapterName }}</strong><small>{{ item.adapterCode }} · {{ item.adapterType }} · 只读</small></td>
              <td class="mono">{{ item.host }}:{{ item.port }}</td><td>{{ item.pollIntervalMs / 1000 }} 秒</td><td>{{ item.timezoneId }}</td>
              <td><span class="state" :class="item.connectionStatus.toLowerCase()"><i></i>{{ connectionLabel(item.connectionStatus) }}</span></td>
              <td>{{ formatTime(item.lastObservedAtUtc) }}</td>
              <td class="error-cell" :title="item.lastErrorMessage || ''"><span v-if="item.lastErrorCode">{{ item.lastErrorCode }} · {{ item.lastErrorMessage }}</span><span v-else>-</span></td>
              <td @click.stop><el-switch :model-value="item.status === '0'" :loading="submittingId === item.adapterId" @change="handleStatusChange(item, $event)" /></td>
              <td @click.stop><div class="row-actions"><el-tooltip content="发现设备" placement="top"><button type="button" :disabled="item.status !== '0' || submittingId !== null" aria-label="发现设备" @click="discover(item)"><el-icon><Refresh /></el-icon></button></el-tooltip><el-tooltip content="编辑配置" placement="top"><button type="button" aria-label="编辑配置" @click="openEdit(item)"><el-icon><EditPen /></el-icon></button></el-tooltip></div></td>
            </tr>
            <tr v-if="!loading && !records.length"><td colspan="13" class="empty-cell">暂无符合条件的检测柜</td></tr>
            <tr v-if="!loading && !adapters.length"><td class="empty" colspan="9">暂无设备适配器实例</td></tr>
          </tbody>
        </table>
      </div>
      <footer class="pagination-bar"><span>显示 {{ records.length }} 条，共 {{ total }} 条</span><el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 50]" :total="total" layout="sizes, prev, pager, next" background @current-change="handlePageChange" @size-change="handleSizeChange" /></footer>
      <footer class="pagination"><span>显示 {{ adapters.length }} 条，共 {{ total }} 条</span><el-pagination :current-page="pageNum" :page-size="pageSize" :total="total" layout="prev, pager, next" background @current-change="handlePageChange" /></footer>
    </section>

    <section class="channel-panel">
      <header class="panel-heading"><div><i></i><strong>检测柜通道</strong><span>{{ channels.length }} CHANNELS</span></div><button class="icon-button" type="button" :disabled="!selectedId" aria-label="刷新通道" @click="loadChannels"><el-icon><Refresh /></el-icon></button></header>
      <div v-loading="channelLoading" class="table-wrap">
        <table class="channel-table">
          <thead><tr><th>通道身份</th><th>设备类型</th><th>设备号</th><th>单元号</th><th>通道号</th><th>在线状态</th><th>工作状态</th><th>最近观测</th></tr></thead>
          <tbody>
            <tr v-for="item in channels" :key="item.channelId"><td class="mono">{{ item.adapterId }} / {{ item.devtype }} / {{ item.devid }} / {{ item.subdevid }} / {{ item.chlid }}</td><td>{{ item.devtype }}</td><td>{{ item.devid }}</td><td>{{ item.subdevid }}</td><td>{{ item.chlid }}</td><td><span class="state" :class="item.onlineStatus.toLowerCase()"><i></i>{{ onlineLabel(item.onlineStatus) }}</span></td><td>{{ item.workStatus }}</td><td>{{ formatTime(item.lastSeenAtUtc) }}</td></tr>
            <tr v-if="!channelLoading && !channels.length"><td class="empty" colspan="8">暂无已发现的检测柜通道</td></tr>
          </tbody>
        </table>
      </div>
    </section>

    <el-dialog v-model="dialogVisible" :title="editingId ? '编辑设备适配器实例' : '新增设备适配器实例'" width="620px" destroy-on-close>
      <div class="config-grid">
        <label><span>实例编码</span><el-input v-model="form.adapterCode" :disabled="Boolean(editingId)" maxlength="64" /></label>
        <label><span>实例名称</span><el-input v-model="form.adapterName" maxlength="100" /></label>
        <label><span>类型</span><el-select v-model="form.adapterType"><el-option label="BTS" value="BTS" /></el-select></label>
        <label><span>只读能力</span><el-switch v-model="form.readOnly" disabled inline-prompt active-text="只读" /></label>
        <label class="wide"><span>主机</span><el-input v-model="form.host" maxlength="255" placeholder="IP 或主机名" /></label>
        <label><span>端口</span><el-input-number v-model="form.port" :min="1" :max="65535" controls-position="right" /></label>
        <label><span>轮询周期（毫秒）</span><el-input-number v-model="form.pollIntervalMs" :min="1000" :step="1000" controls-position="right" /></label>
        <label><span>时区</span><el-input v-model="form.timezoneId" maxlength="64" /></label>
        <label class="wide"><span>备注</span><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit /></label>
      </div>
      <template #footer><button class="secondary-button" type="button" @click="dialogVisible = false">取消</button><button class="primary-button" type="button" :disabled="saving" @click="saveAdapter"><el-icon><Check /></el-icon>{{ saving ? '保存中' : '保存' }}</button></template>
    </el-dialog>
  </div>
</template>

<style scoped>
.cabinet-page { width: 100%; }
.primary-button, .secondary-button { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; border: 1px solid transparent; border-radius: 3px; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.primary-button { color: #fff; background: var(--blue); border-color: var(--blue); }
.primary-button:hover { background: #176fcb; border-color: #176fcb; }
.secondary-button { color: #52606d; background: #fff; border-color: var(--line-strong); }
.secondary-button:hover { color: var(--blue); border-color: #9dc8f5; }
.filter-panel, .result-panel { background: #fff; border: 1px solid #d8e1e9; }
.filter-panel { margin-bottom: 16px; }
.section-heading, .result-toolbar { display: flex; align-items: center; justify-content: space-between; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.section-heading { height: 44px; padding: 0 16px; }
.section-heading > div, .result-toolbar > div { display: flex; align-items: center; gap: 8px; }
.section-heading > div > i, .result-toolbar > div:first-child > i { width: 3px; height: 16px; background: #2b78a3; }
.section-heading strong, .result-toolbar strong { color: var(--ink); font-size: 15px; font-weight: 600; }
.section-heading span, .result-toolbar span { color: #81909d; font-size: 10px; }
.section-heading small { color: #647380; font-size: 11px; }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; padding: 16px; }
.filter-grid label { width: 100%; min-width: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; }
.filter-grid label > span { color: #52606d; font-size: 12px; font-weight: 500; }
.filter-grid :deep(.el-select), .filter-grid :deep(.el-date-editor) { width: 100%; }
.filter-grid :deep(.el-input__wrapper), .filter-grid :deep(.el-select__wrapper) { min-height: 34px; border-radius: 3px; box-shadow: 0 0 0 1px #d8e1e9 inset; background: #f8fafc; }
.filter-actions { grid-column: -2 / -1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.result-toolbar { height: 50px; padding: 0 16px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 1740px; table-layout: fixed; border-collapse: collapse; color: #52606d; font-size: 13px; }
th, td { height: 50px; padding: 0 12px; border-right: 1px solid #dde7f0; border-bottom: 1px solid #dde7f0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
th { height: 40px; color: #52606d; background: #eaf4ff; border-color: #c7e0ff; font-size: 12px; font-weight: 600; }
th:nth-child(1) { width: 115px; } th:nth-child(2) { width: 120px; } th:nth-child(3) { width: 130px; } th:nth-child(4) { width: 130px; }
th:nth-child(5), th:nth-child(6) { width: 100px; } th:nth-child(7) { width: 80px; } th:nth-child(8) { width: 145px; } th:nth-child(9) { width: 145px; }
th:nth-child(10), th:nth-child(11) { width: 100px; } th:nth-child(12) { width: 180px; } th:last-child { width: 180px; }
th:last-child, td:last-child { border-right: 0; text-align: center; }
.action-column { position: sticky; right: 0; z-index: 2; background: #fff; overflow: visible; border-left: 0; box-shadow: inset 1px 0 0 #b4c7d9, -8px 0 14px rgba(23, 49, 74, .12); }
th.action-column { z-index: 3; background: #eaf4ff; }
tbody tr:hover td.action-column { background: #f7fbff; }
tbody tr:hover { background: #f7fbff; }
tbody tr:last-child td { border-bottom: 0; }
td strong { color: #26333f; font-weight: 600; }
.code-cell { color: #647380; font-family: 'Cascadia Mono', Consolas, monospace; font-size: 12px; }
.online-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.online-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.online-state.online { color: #23865e; }
.online-state.offline { color: #a64a4a; }
.test-state { display: inline-flex; padding: 4px 7px; border: 1px solid; font-size: 11px; line-height: 1; }
.test-state.pending { color: #a96b16; background: #fff8e9; border-color: #efd59e; }
.test-state.running { color: #176fcb; background: #edf6ff; border-color: #b8d9fb; }
.test-state.idle { color: #697682; background: #f2f4f6; border-color: #ccd4da; }
.row-actions { display: flex; align-items: center; justify-content: center; gap: 12px; }
.row-actions button { border: 0; color: var(--blue); background: transparent; font-size: 12px; font-weight: 500; cursor: pointer; }
.row-actions button:disabled { opacity: .55; cursor: not-allowed; }
.row-actions .disable-action, .row-actions .delete-action { color: #ad4a4a; }
.row-actions .enable-action { color: #23865e; }
.empty-cell { height: 160px; color: #8795a3; text-align: center; }
.pagination-bar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 14px 8px 16px; border-top: 1px solid var(--line); }
.pagination-bar > span { color: #7b8794; font-size: 11px; }
.pagination-bar :deep(.el-pagination) { --el-pagination-button-bg-color: #edf4fa; --el-pagination-hover-color: var(--blue); }
@media (max-width: 1320px) { .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) { .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .filter-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 12px; }
  .filter-actions { justify-content: stretch; }
  .filter-actions button { flex: 1; }
  .section-heading, .result-toolbar { padding-left: 12px; }
  .section-heading span, .result-toolbar span { display: none; }
  .pagination-bar { align-items: flex-start; flex-direction: column; overflow-x: auto; }
}
.adapter-page { display: grid; gap: 16px; width: 100%; }
.adapter-panel, .channel-panel { border: 1px solid #d8e1e9; background: #fff; }
.panel-heading { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; border-bottom: 1px solid #d8e1e9; background: var(--surface-soft); }
.panel-heading > div { display: flex; align-items: center; gap: 8px; }.panel-heading i { width: 3px; height: 16px; background: #2b78a3; }.panel-heading strong { color: var(--ink); font-size: 15px; }.panel-heading span { color: #81909d; font-size: 10px; }
.primary-button, .secondary-button, .icon-button { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; border: 1px solid transparent; border-radius: 3px; font-size: 13px; cursor: pointer; }.primary-button { color: #fff; border-color: var(--blue); background: var(--blue); }.secondary-button, .icon-button { color: #52606d; border-color: var(--line-strong); background: #fff; }.icon-button { width: 34px; padding: 0; }button:disabled { opacity: .5; cursor: not-allowed; }
.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; color: #52606d; font-size: 12px; table-layout: fixed; }.adapter-table { min-width: 1320px; }.channel-table { min-width: 980px; }
th, td { height: 48px; padding: 0 11px; border-right: 1px solid #dde7f0; border-bottom: 1px solid #dde7f0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }th { height: 40px; color: #52606d; background: #eaf4ff; border-color: #c7e0ff; font-weight: 600; }th:last-child, td:last-child { border-right: 0; }
.adapter-table th:first-child { width: 180px; }.adapter-table th:nth-child(2) { width: 150px; }.adapter-table th:nth-child(5) { width: 105px; }.adapter-table th:nth-child(6) { width: 165px; }.adapter-table th:nth-child(7) { width: 210px; }.adapter-table th:nth-child(8) { width: 70px; }.adapter-table th:last-child { width: 88px; }.channel-table th:first-child { width: 230px; }.channel-table th:last-child { width: 180px; }
tbody tr.selected { background: #edf6ff; }tbody tr:hover { background: #f7fbff; }td strong, td small { display: block; overflow: hidden; text-overflow: ellipsis; }td strong { color: #26333f; font-size: 13px; }td small { margin-top: 3px; color: #7b8794; font-size: 10px; }.mono { font-family: 'Cascadia Mono', Consolas, monospace; }
.state { display: inline-flex; align-items: center; gap: 6px; }.state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.state.connected, .state.online { color: #23865e; }.state.error, .state.offline { color: #a64a4a; }.state.disconnected, .state.unknown { color: #697682; }.error-cell { color: #a64a4a; }
.row-actions { display: flex; justify-content: center; gap: 8px; }.row-actions button { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 0; color: var(--blue); background: transparent; cursor: pointer; }.empty { height: 120px; color: #8795a3; text-align: center; }
.pagination { min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }.pagination > span { color: #7b8794; font-size: 11px; }.config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.config-grid label { min-width: 0; display: grid; gap: 7px; }.config-grid label > span { color: #52606d; font-size: 12px; font-weight: 500; }.config-grid .wide { grid-column: 1 / -1; }.config-grid :deep(.el-select), .config-grid :deep(.el-input-number) { width: 100%; }
@media (max-width: 680px) { .panel-heading { padding: 0 12px; }.panel-heading span { display: none; }.pagination { align-items: flex-start; flex-direction: column; gap: 8px; padding: 10px 12px; }.config-grid { grid-template-columns: minmax(0, 1fr); }.config-grid .wide { grid-column: auto; } }
</style>