zengzy / hhrcs_web · Files

<script lang="ts" setup>
/**
 * 设备监控界面
 * @author zzy
 * @date 2026-01-05
 */
import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useToast } from 'vuestic-ui'
import mapsApi from '../../../services/maps'
import robotTasksApi from '../../../services/robotTasks'
import robotsApi from '../../../services/robots'
import {
  HHRCSWs,
  SubscriptionType,
  type RobotStatus,
  type StorageArea,
  type StorageLocation,
} from '../../../services/HHRCSWs'
import RobotStatusCard from './cards/RobotStatusCard.vue'

const { t } = useI18n()
const { init: notify } = useToast()

/**
 * 检测设备是否为平板
 * @description 通过用户代理字符串检测是否为平板设备(iPad/Android平板等)
 * @author zzy
 * @date 2026-01-31
 */
const isTablet = ref(false)

/**
 * 检测用户代理是否为平板设备
 * @param userAgent 浏览器用户代理字符串
 * @returns 是否为平板设备
 * @author zzy
 */
const detectTablet = (userAgent: string): boolean => {
  const tabletRegex =
    /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/i
  return tabletRegex.test(userAgent)
}

// 聚焦到指定机器人
const focusOnRobot = (robot: RobotStatus) => {
  if (robot.x == null || robot.y == null) return

  const svg = svgRef.value
  if (!svg) return
  const rect = svg.getBoundingClientRect()
  const width = rect.width
  const height = rect.height
  if (!width || !height) return

  const targetScale = viewport.value.scale // 保持当前缩放不再放大
  const targetX = width / 2 - robot.x * targetScale
  const targetY = height / 2 + robot.y * targetScale

  // 取消之前的动画
  if (animationId) cancelAnimationFrame(animationId)

  // 平滑动画
  const startX = viewport.value.x
  const startY = viewport.value.y
  const startScale = viewport.value.scale
  const duration = 400
  const startTime = performance.now()

  const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3)

  const animate = (now: number) => {
    const elapsed = now - startTime
    const progress = Math.min(elapsed / duration, 1)
    const eased = easeOutCubic(progress)

    viewport.value.x = startX + (targetX - startX) * eased
    viewport.value.y = startY + (targetY - startY) * eased
    viewport.value.scale = startScale + (targetScale - startScale) * eased

    if (progress < 1) {
      animationId = requestAnimationFrame(animate)
    } else {
      animationId = null
    }
  }

  animationId = requestAnimationFrame(animate)
}

/**
 * 处理机器人卡片点击
 * @author zzy
 */
const onRobotCardClick = (robot: RobotStatus) => {
  // 如果已经是选中状态，再次点击则聚焦
  if (selectedRobotId.value === robot.robotId) {
    focusOnRobot(robot)
  } else {
    selectedRobotId.value = robot.robotId
    focusOnRobot(robot)
  }
}

/**
 * 检测设备类型并应用相应样式
 * @author zzy
 */
const checkDeviceType = () => {
  const ua = navigator.userAgent
  isTablet.value =
    detectTablet(ua) || (window.innerWidth >= 600 && window.innerWidth <= 1366 && 'ontouchstart' in window)
  // 如果是平板设备,添加全局样式类
  if (isTablet.value) {
    document.body.classList.add('tablet-mode')
    document.documentElement.classList.add('tablet-mode')
  } else {
    document.body.classList.remove('tablet-mode')
    document.documentElement.classList.remove('tablet-mode')
  }
}

// 地图列表
const mapList = ref<any[]>([])
const selectedMapId = ref<string | null>(null)
const isLoading = ref(false)

// 机器人状态列表
const robotList = ref<RobotStatus[]>([])
let unsubscribeWs: (() => void) | null = null
let unsubscribeLocationWs: (() => void) | null = null

// 当前地图数据
const currentMap = ref({
  id: null as string | null,
  name: '',
  code: '',
  type: 1,
  nodes: [] as any[],
  edges: [] as any[],
  resources: [] as any[],
})

// 画布相关
const NODE_DIAMETER = 256
const NODE_RADIUS = NODE_DIAMETER / 2
const MIN_SCALE = 0.005
const svgRef = ref<HTMLElement | null>(null)
const canvasSize = ref({ width: 0, height: 0 })
const viewport = ref({ x: 0, y: 0, scale: 0.1 })
let resizeObserver: ResizeObserver | null = null
let isPanning = false
let panStart = { x: 0, y: 0 }
let viewportStart = { x: 0, y: 0 }

// 背景图
const bgImageUrl = ref('')
const bgImgSize = ref({ width: 0, height: 0 })
const bgScale = ref(1)
const bgOpacity = ref(0.6)
const bgRotation = ref(0)
const bgOffsetX = ref(0)
const bgOffsetY = ref(0)
const bgWorldWidth = computed(() => Math.max(0, Math.round((bgImgSize.value.width || 0) * (bgScale.value || 0))))
const bgWorldHeight = computed(() => Math.max(0, Math.round((bgImgSize.value.height || 0) * (bgScale.value || 0))))

// 节点、边和资源
const nodes = computed(() => currentMap.value.nodes || [])
const edges = computed(() => currentMap.value.edges || [])
const resources = computed(() => currentMap.value.resources || [])

// 选中的节点（支持多选，最多2个）
const selectedNodeIds = ref<string[]>([])

// 选中的资源区域
const selectedResourceId = ref<string | null>(null)

// 任务起点和终点（显示code，存储id）
const startNodeCode = ref('')
const endNodeCode = ref('')
const startNodeId = ref('')
const endNodeId = ref('')
const endResourceId = ref('')
const endResourceName = ref('')

// 重定位模式状态
const relocateMode = ref(false)
const relocateRobotId = ref<string | null>(null)
const relocateRobotCode = ref<string>('')
const relocatePosition = ref<{ x: number; y: number } | null>(null)
const relocateAngle = ref(0)
const isRelocating = ref(false)

// 画布中选中的机器人
const selectedRobotId = ref<string | null>(null)
const isRobotActionLoading = ref(false)
const isRobotPauseLoading = ref(false)

/**
 * 更新任务起点终点显示
 * @author zzy
 */
const updateTaskLocations = () => {
  const node1 = selectedNodeIds.value.length >= 1 ? nodes.value.find((n: any) => n.id === selectedNodeIds.value[0]) : null
  const node2 = selectedNodeIds.value.length >= 2 ? nodes.value.find((n: any) => n.id === selectedNodeIds.value[1]) : null

  // 使用选中的库位或默认第一个库位
  const startLocation = node1 ? nodeSelectedLocationMap.value.get(node1.id) || node1?.storageLocations?.[0] : null
  const endLocation = node2 ? nodeSelectedLocationMap.value.get(node2.id) || node2?.storageLocations?.[0] : null

  startNodeCode.value = startLocation?.locationName || startLocation?.locationCode || ''
  startNodeId.value = startLocation?.locationId || ''
  endNodeCode.value = endLocation?.locationName || endLocation?.locationCode || ''
  endNodeId.value = endLocation?.locationId || ''
}

// 监听选中节点变化，自动填充起点终点
watch(selectedNodeIds, updateTaskLocations, { deep: true })

// 执行任务
const executeTask = async () => {
  if (!startNodeId.value) {
    notify({ message: t('dashboard.taskValidation') || '请选择起点', color: 'warning' })
    return
  }
  // 终点节点和终点区域至少选择一个
  if (!endNodeId.value && !endResourceId.value) {
    notify({ message: t('dashboard.selectEndTarget') || '请选择终点节点或终点区域', color: 'warning' })
    return
  }
  try {
    isLoading.value = true
    const payload: any = {
      beginLocationId: startNodeId.value,
    }
    // 优先使用终点节点，其次使用终点区域
    if (endNodeId.value) {
      payload.endLocationId = endNodeId.value
    } else if (endResourceId.value) {
      payload.endResourceId = endResourceId.value
    }
    const res = await robotTasksApi.createOrUpdate(payload)
    if (res?.success === false || res?.Success === false) {
      notify({ message: res.message || res.Message || t('dashboard.taskFailed'), color: 'danger' })
    } else {
      notify({ message: res?.message || res?.Message || t('dashboard.taskCreated'), color: 'success' })
      startNodeCode.value = ''
      endNodeCode.value = ''
      startNodeId.value = ''
      endNodeId.value = ''
    }
  } catch (err: any) {
    notify({ message: err?.message || t('dashboard.taskFailed'), color: 'danger' })
  } finally {
    isLoading.value = false
  }
}

/**
 * 清空任务选择（起点、终点节点和区域）
 * @author zzy
 */
const clearTaskSelection = () => {
  selectedNodeIds.value = []
  selectedResourceId.value = null
  nodeSelectedLocationMap.value.clear()
  startNodeCode.value = ''
  endNodeCode.value = ''
  startNodeId.value = ''
  endNodeId.value = ''
  endResourceId.value = ''
  endResourceName.value = ''
  closeLocationSelector()
  notify({ message: '已清空选择', color: 'info' })
}

// 判断节点是否在当前视口可见范围内
const isNodeInViewport = (node: any, width: number, height: number) => {
  const screenX = viewport.value.x + node.x * viewport.value.scale
  const screenY = viewport.value.y - node.y * viewport.value.scale
  const margin = NODE_RADIUS * viewport.value.scale
  return screenX >= -margin && screenX <= width + margin && screenY >= -margin && screenY <= height + margin
}

// 平滑动画到目标视图
let animationId: number | null = null
const animateToShowSelectedNodes = () => {
  if (selectedNodeIds.value.length < 2) return

  // 直接从 SVG 获取尺寸
  const svg = svgRef.value
  if (!svg) return
  const rect = svg.getBoundingClientRect()
  const width = rect.width
  const height = rect.height
  if (!width || !height) return

  const node1 = nodes.value.find((n: any) => n.id === selectedNodeIds.value[0])
  const node2 = nodes.value.find((n: any) => n.id === selectedNodeIds.value[1])
  if (!node1 || !node2) return

  // 如果两个节点都在当前视口内，不进行缩放移动
  if (isNodeInViewport(node1, width, height) && isNodeInViewport(node2, width, height)) return

  // 计算两节点的边界
  const pad = 500
  const xMin = Math.min(node1.x, node2.x) - pad
  const xMax = Math.max(node1.x, node2.x) + pad
  const yMin = Math.min(node1.y, node2.y) - pad
  const yMax = Math.max(node1.y, node2.y) + pad

  // 计算目标缩放和位置
  const worldW = xMax - xMin || 100
  const worldH = yMax - yMin || 100
  const scaleX = width / worldW
  const scaleY = height / worldH
  const targetScale = Math.max(MIN_SCALE, Math.min(scaleX, scaleY) * 0.8)
  const centerX = (xMin + xMax) / 2
  const centerY = (yMin + yMax) / 2
  const targetX = width / 2 - centerX * targetScale
  const targetY = height / 2 + centerY * targetScale

  // 取消之前的动画
  if (animationId) cancelAnimationFrame(animationId)

  // 平滑动画
  const startX = viewport.value.x
  const startY = viewport.value.y
  const startScale = viewport.value.scale
  const duration = 400
  const startTime = performance.now()

  const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3)

  const animate = (now: number) => {
    const elapsed = now - startTime
    const progress = Math.min(elapsed / duration, 1)
    const eased = easeOutCubic(progress)

    viewport.value.x = startX + (targetX - startX) * eased
    viewport.value.y = startY + (targetY - startY) * eased
    viewport.value.scale = startScale + (targetScale - startScale) * eased

    if (progress < 1) {
      animationId = requestAnimationFrame(animate)
    } else {
      animationId = null
    }
  }

  animationId = requestAnimationFrame(animate)
}

// 节点点击事件（支持多选，最多2个）
const onNodeClick = (node: any, e: MouseEvent) => {
  e.stopPropagation()

  // 重定位模式下，点击节点只设置重定位位置
  if (relocateMode.value) {
    relocatePosition.value = { x: node.x, y: node.y }
    return
  }

  // 关闭库位选择器（如果打开）
  closeLocationSelector()

  // 如果是储位节点且有多个库位，显示库位选择器，不改变选中状态
  if (node.type === 2 && node.storageLocations?.length > 1) {
    // 如果节点未选中，先预选中该节点（但不提交到 selectedNodeIds）
    // 如果已选中，只显示选择器让用户切换库位
    showLocationSelector(node, e)
    return
  }

  const idx = selectedNodeIds.value.indexOf(node.id)
  if (idx >= 0) {
    // 已选中则取消选择
    selectedNodeIds.value.splice(idx, 1)
    nodeSelectedLocationMap.value.delete(node.id)
  } else if (selectedNodeIds.value.length < 2) {
    // 添加到选中列表
    selectedNodeIds.value.push(node.id)
    // 如果只有一个库位，自动选中
    if (node.storageLocations?.length === 1) {
      nodeSelectedLocationMap.value.set(node.id, node.storageLocations[0])
    }
    if (selectedNodeIds.value.length === 2) {
      setTimeout(() => animateToShowSelectedNodes(), 50)
    }
  } else {
    // 替换第二个选中的节点
    selectedNodeIds.value[1] = node.id
    // 如果只有一个库位，自动选中
    if (node.storageLocations?.length === 1) {
      nodeSelectedLocationMap.value.set(node.id, node.storageLocations[0])
    } else {
      // 清除之前第二个节点选中的库位
      const prevNodeId = selectedNodeIds.value[1]
      if (prevNodeId !== node.id) {
        nodeSelectedLocationMap.value.delete(prevNodeId)
      }
    }
    setTimeout(() => animateToShowSelectedNodes(), 50)
  }
}

// 判断节点是否选中
const isNodeSelected = (id: string) => selectedNodeIds.value.includes(id)

// 选中节点的颜色（起点绿色，终点红色）
const getSelectedNodeColor = (id: string) => {
  const idx = selectedNodeIds.value.indexOf(id)
  return idx === 0 ? '#28a745' : idx === 1 ? '#dc3545' : '#0d6efd'
}

// ==================== 库位选择功能 ====================
/**
 * 库位选择相关状态
 * @author zzy
 */
const isLocationSelectorVisible = ref(false) // 是否显示库位选择器
const locationSelectNode = ref<any>(null) // 当前正在选择库位的节点
const locationSelectNodeId = ref<string>('') // 当前正在选择库位的节点ID（用于UI高亮）
const locationSelectorPosition = ref({ x: 0, y: 0 }) // 库位选择器的位置
const hoveredLocationId = ref<string | null>(null) // 当前悬停的库位ID
const pendingNodeSelection = ref<{ node: any; location: StorageLocation } | null>(null) // 待处理的节点选择

/**
 * 按layerNumber排序的库位列表（由小到大，由上到下排列）
 * @author zzy
 */
const sortedStorageLocations = computed(() => {
  if (!locationSelectNode.value?.storageLocations?.length) return []
  return [...locationSelectNode.value.storageLocations].sort(
    (a: StorageLocation, b: StorageLocation) => (a.layerNumber ?? 0) - (b.layerNumber ?? 0),
  )
})

/**
 * 获取库位状态颜色
 * @param status 库位状态: 0=空闲, 1=占用, 2=预占用, 3=禁用
 * @author zzy
 */
const getLocationStatusColor = (status: number): string => {
  const colors: Record<number, string> = {
    0: '#28a745', // 空闲 - 绿色
    1: '#dc3545', // 占用 - 红色
    2: '#ffc107', // 预占用 - 黄色
    3: '#6c757d', // 禁用 - 灰色
  }
  return colors[status] ?? '#28a745'
}

/**
 * 获取库位状态文本
 * @param status 库位状态
 * @author zzy
 */
const getLocationStatusText = (status: number): string => {
  const texts: Record<number, string> = {
    0: '空闲',
    1: '占用',
    2: '预占用',
    3: '禁用',
  }
  return texts[status] ?? '未知'
}

/**
 * 显示库位选择器
 * @param node 节点对象
 * @param e 鼠标事件
 * @author zzy
 */
const showLocationSelector = (node: any, e: MouseEvent) => {
  // 重定位模式下不处理
  if (relocateMode.value) return

  e.stopPropagation()

  // 显示库位选择器
  isLocationSelectorVisible.value = true
  locationSelectNode.value = node
  locationSelectNodeId.value = node.id
  locationSelectorPosition.value = { x: e.clientX, y: e.clientY }
  hoveredLocationId.value = null
  pendingNodeSelection.value = null
}

/**
 * 关闭库位选择器
 * @author zzy
 */
const closeLocationSelector = () => {
  isLocationSelectorVisible.value = false
  locationSelectNode.value = null
  locationSelectNodeId.value = ''
  hoveredLocationId.value = null
  pendingNodeSelection.value = null
}

/**
 * 选择库位
 * @param location 库位对象
 * @author zzy
 */
const selectLocation = (location: StorageLocation) => {
  if (!locationSelectNode.value) return

  // 如果库位被禁用，提示并返回
  if (location.status === 3) {
    notify({ message: '该库位已被禁用', color: 'warning' })
    return
  }

  // 执行节点选择逻辑（添加节点或更新库位）
  handleNodeSelectionWithLocation(locationSelectNode.value, location)

  // 关闭选择器
  closeLocationSelector()
}

/**
 * 处理节点选择（带指定库位）
 * @param node 节点对象
 * @param location 指定的库位
 * @author zzy
 */
const handleNodeSelectionWithLocation = (node: any, location: StorageLocation) => {
  const idx = selectedNodeIds.value.indexOf(node.id)

  if (idx >= 0) {
    // 如果节点已选中，只更新库位，不取消选择
    updateNodeSelectedLocation(node.id, location)
    // 手动触发起点终点更新（因为 selectedNodeIds 没变，watch 不会触发）
    updateTaskLocations()
  } else if (selectedNodeIds.value.length < 2) {
    // 添加到选中列表
    selectedNodeIds.value.push(node.id)
    // 更新节点的选中库位信息
    updateNodeSelectedLocation(node.id, location)
    if (selectedNodeIds.value.length === 2) {
      setTimeout(() => animateToShowSelectedNodes(), 50)
    }
  } else {
    // 替换第二个选中的节点 - 使用 splice 确保响应式
    selectedNodeIds.value.splice(1, 1, node.id)
    updateNodeSelectedLocation(node.id, location)
    setTimeout(() => animateToShowSelectedNodes(), 50)
  }
}

/**
 * 节点选中的库位映射（用于存储每个节点选中的具体库位）
 * @author zzy
 */
const nodeSelectedLocationMap = ref<Map<string, StorageLocation>>(new Map())

/**
 * 更新节点选中的库位
 * @param nodeId 节点ID
 * @param location 库位对象
 * @author zzy
 */
const updateNodeSelectedLocation = (nodeId: string, location: StorageLocation) => {
  nodeSelectedLocationMap.value.set(nodeId, location)
}

/**
 * 获取节点选中的库位显示文本
 * @param nodeId 节点ID
 * @author zzy
 */
const getNodeSelectedLocationDisplay = (nodeId: string): string => {
  const node = nodes.value.find((n: any) => n.id === nodeId)
  if (!node) return ''

  // 如果只有一个库位，直接显示
  if (node.storageLocations?.length === 1) {
    return node.storageLocations[0].locationName || node.storageLocations[0].locationCode
  }

  // 如果有选中的库位，显示选中的库位
  const selectedLocation = nodeSelectedLocationMap.value.get(nodeId)
  if (selectedLocation) {
    return selectedLocation.locationName || selectedLocation.locationCode
  }

  // 默认显示第一个库位
  return node.storageLocations?.[0]?.locationName || node.storageLocations?.[0]?.locationCode || node.code
}

// 指引线路径（起点到终点节点或终点区域）
const guideLine = computed(() => {
  // 必须有起点
  if (selectedNodeIds.value.length < 1) return null
  const node1 = nodes.value.find((n: any) => n.id === selectedNodeIds.value[0])
  if (!node1) return null

  // 优先指向终点节点
  if (selectedNodeIds.value.length >= 2) {
    const node2 = nodes.value.find((n: any) => n.id === selectedNodeIds.value[1])
    if (node2) {
      return { x1: node1.x, y1: -node1.y, x2: node2.x, y2: -node2.y }
    }
  }

  // 其次指向终点区域中心
  if (selectedResourceId.value) {
    const resource = resources.value.find((r: any) => r.id === selectedResourceId.value)
    if (resource) {
      const center = getResourceCenter(resource)
      return { x1: node1.x, y1: -node1.y, x2: center.x, y2: -center.y }
    }
  }

  return null
})

// 世界边界
const worldBounds = computed(() => {
  const ns = nodes.value
  if (!ns.length) return { xMin: -50, xMax: 50, yMin: -50, yMax: 50 }
  let xMin = Infinity,
    xMax = -Infinity,
    yMin = Infinity,
    yMax = -Infinity
  ns.forEach((n: any) => {
    if (n.x < xMin) xMin = n.x
    if (n.x > xMax) xMax = n.x
    if (n.y < yMin) yMin = n.y
    if (n.y > yMax) yMax = n.y
  })
  const pad = 20
  return { xMin: xMin - pad, xMax: xMax + pad, yMin: yMin - pad, yMax: yMax + pad }
})

// 加载地图列表
const loadMapList = async () => {
  try {
    const params = {
      pageNumber: 1,
      pageSize: 100,
      filterModel: JSON.stringify({ active: { filterType: 'text', type: 'equals', filter: 'true' } }),
    }
    const res = await mapsApi.list(params)
    const data = (res && (res.Data ?? res.data)) || []
    mapList.value = Array.isArray(data) ? data.filter((m: any) => m.active) : []
    // 默认选择第一个地图
    if (mapList.value.length > 0 && !selectedMapId.value) {
      selectedMapId.value = mapList.value[0].mapId
    }
  } catch (err: any) {
    notify({ message: err?.message || t('dashboard.loadMapListFailed'), color: 'danger' })
  }
}

// 加载地图详情
const loadMapData = async (mapId: string) => {
  if (!mapId) return
  isLoading.value = true
  try {
    const res = await mapsApi.getDetails(mapId)
    const data = (res && (res.Data ?? res.data)) || res || {}

    currentMap.value.id = String(data.mapId ?? data.id ?? mapId)
    currentMap.value.name = data.mapName ?? data.name ?? ''
    currentMap.value.code = data.mapCode ?? data.code ?? ''
    currentMap.value.type = data.mapType ?? data.type ?? 1

    // 处理节点
    const nodesData = data.mapNodes ?? data.nodes ?? []
    const nodeIdToCodeMap = new Map()
    currentMap.value.nodes = nodesData.map((node: any) => {
      const nodeId = String(node.nodeId ?? node.id)
      const nodeCode = node.nodeCode ?? node.code ?? node.label ?? `N${nodeId}`
      nodeIdToCodeMap.set(nodeId, nodeCode)
      return {
        id: nodeId,
        x: node.x,
        y: node.y,
        code: nodeCode,
        name: node.nodeName ?? node.name ?? '',
        type: node.type,
        storageLocations: [],
      }
    })

    // 处理边
    const edgesData = data.mapEdges ?? data.edges ?? []
    currentMap.value.edges = edgesData.map((edge: any) => {
      const sourceCode = edge.fromNode
        ? (nodeIdToCodeMap.get(String(edge.fromNode)) ?? edge.sourceCode ?? '')
        : (edge.sourceCode ?? '')
      const targetCode = edge.toNode
        ? (nodeIdToCodeMap.get(String(edge.toNode)) ?? edge.targetCode ?? '')
        : (edge.targetCode ?? '')
      return {
        id: String(edge.edgeId ?? edge.id),
        sourceCode,
        targetCode,
        curve: edge.isCurve ?? edge.curve ?? false,
        radius: edge.radius,
        centerX: edge.centerX,
        centerY: edge.centerY,
      }
    })

    // 处理资源
    const resourcesData = data.mapResources ?? data.resources ?? []
    currentMap.value.resources = resourcesData.map((resource: any) => ({
      id: String(resource.resourceId ?? resource.id),
      resourceCode: resource.resourceCode ?? resource.code ?? '',
      resourceName: resource.resourceName ?? resource.name ?? '',
      type: resource.type ?? 1,
      locationCoordinates: resource.locationCoordinates ?? [],
    }))

    // 加载背景图（不添加时间戳，利用浏览器缓存）
    try {
      const fileRes = await mapsApi.getMapFile(mapId)
      const fileData = (fileRes && (fileRes.Data ?? fileRes.data)) || null
      if (fileData && fileData.fileUrl) {
        bgOpacity.value = fileData.opacity ?? 1
        bgRotation.value = fileData.rotation ?? 0
        bgOffsetX.value = fileData.offsetX ?? 0
        bgOffsetY.value = fileData.offsetY ?? 0
        const dbScale = fileData.scale ?? 0

        // 先预加载图片，完成后再设置URL，避免重复请求
        const img = new Image()
        img.crossOrigin = 'anonymous'
        img.onload = () => {
          bgImgSize.value = { width: img.naturalWidth, height: img.naturalHeight }
          bgScale.value =
            dbScale > 0 && dbScale < 1
              ? Math.max(0.01, 800 / img.naturalWidth)
              : dbScale || Math.max(0.01, 800 / img.naturalWidth)
          bgImageUrl.value = fileData.fileUrl
          setTimeout(() => resetView(), 50)
        }
        img.src = fileData.fileUrl
      } else {
        bgImageUrl.value = ''
        // 无背景图时直接重置视图
        setTimeout(() => resetView(), 100)
      }
    } catch {
      bgImageUrl.value = ''
      setTimeout(() => resetView(), 100)
    }
  } catch (err: any) {
    notify({ message: err?.message || t('dashboard.loadMapDetailFailed'), color: 'danger' })
  } finally {
    isLoading.value = false
  }
}

// 监听地图选择变化
watch(selectedMapId, async (newId) => {
  if (newId) {
    // 清空旧地图的机器人数据和选中状态
    robotList.value = []
    selectedNodeIds.value = []
    loadMapData(newId)
    // 断开旧连接，连接新地图的 WebSocket 并订阅
    await HHRCSWs.disconnect()
    await HHRCSWs.connect(newId)
    await HHRCSWs.subscribe([SubscriptionType.RobotStatus, SubscriptionType.StorageLocations])
  }
  33
})

// 获取节点坐标
const getNodeByCode = (code: string) => nodes.value.find((n: any) => n.code === code)

// 边路径（中点在2/3处，与MapEditor一致）
const getEdgePath = (edge: any) => {
  const s = getNodeByCode(edge.sourceCode)
  const t = getNodeByCode(edge.targetCode)
  if (!s || !t) return ''
  const dx = t.x - s.x
  const dy = t.y - s.y
  const xm = s.x + (2 / 3) * dx
  const ym = s.y + (2 / 3) * dy
  return `M ${s.x},${-s.y} L ${xm},${-ym} L ${t.x},${-t.y}`
}

// 弧线路径（与MapEditor一致）
const getArcPath = (arc: any) => {
  if (!arc || !arc.radius || arc.centerX == null || arc.centerY == null) return ''

  // 获取起点和终点坐标
  let startX: number, startY: number, endX: number, endY: number
  if (arc.startX != null && arc.startY != null && arc.endX != null && arc.endY != null) {
    startX = arc.startX
    startY = arc.startY
    endX = arc.endX
    endY = arc.endY
  } else {
    const src = getNodeByCode(arc.sourceCode)
    const tgt = getNodeByCode(arc.targetCode)
    if (!src || !tgt) return ''
    startX = src.x
    startY = src.y
    endX = tgt.x
    endY = tgt.y
  }

  const toRad = (deg: number) => deg * (Math.PI / 180)
  const toDeg = (rad: number) => rad * (180 / Math.PI)
  const normDeg = (a: number) => {
    let x = a % 360
    if (x < 0) x += 360
    return x
  }
  const normDelta = (a0: number, a1: number) => {
    const raw = a1 - a0
    let d = ((raw % 360) + 360) % 360
    if (d > 180) d -= 360
    return d
  }

  const startAngle = normDeg(toDeg(Math.atan2(-(startY - arc.centerY), startX - arc.centerX)))
  const endAngle = normDeg(toDeg(Math.atan2(-(endY - arc.centerY), endX - arc.centerX)))
  const delta = normDelta(startAngle, endAngle)
  const sweepFlag = delta > 0 ? 1 : 0
  const midAngle = startAngle + delta * (2 / 3)
  const rx = arc.radius
  const ry = arc.radius

  const x1 = startX
  const y1s = -startY
  const xm = arc.centerX + rx * Math.cos(toRad(midAngle))
  const ym = arc.centerY - ry * Math.sin(toRad(midAngle))
  const xms = xm
  const yms = -ym
  const x2 = endX
  const y2s = -endY
  const largeArcFlag = 0

  return `M ${x1},${y1s} A ${rx},${ry} 0 ${largeArcFlag},${sweepFlag} ${xms},${yms} A ${rx},${ry} 0 ${largeArcFlag},${sweepFlag} ${x2},${y2s}`
}

/**
 * 获取储位整体状态（综合判断所有储位）
 * @param node 节点对象
 * @returns 状态值：0=空闲，1=占用，2=预占用，3=禁用
 * @author zzy
 *
 * 优先级策略：
 * - 如果有任何储位被禁用(3)，整体返回禁用(3)
 * - 如果有任何储位被占用(1)，整体返回占用(1)
 * - 如果有任何储位被预占用(2)，整体返回预占用(2)
 * - 只有全部空闲时，整体返回空闲(0)
 */
const getStorageStatus = (node: any) => {
  // 检查节点是否有储位区域
  if (!node?.storageLocations?.length) return 0

  // 收集所有储位的状态
  const allStatuses: number[] = []

  for (const location of node.storageLocations) {
    const status = location.status ?? 0
    allStatuses.push(status)
  }

  // 如果没有任何储位，返回空闲
  if (allStatuses.length === 0) return 0

  // 按优先级判断整体状态
  if (allStatuses.includes(3)) return 3 // 禁用
  if (allStatuses.includes(1)) return 1 // 占用
  if (allStatuses.includes(2)) return 2 // 预占用
  return 0 // 空闲
}

// 节点填充色（与MapEditor一致）
const getNodeFill = (node: any) => {
  if (!node || !node.type) return '#ffffff'
  if (node.type === 1) return '#74c0fc' // 高速点
  if (node.type === 4) return '#0d47a1' // 停车位
  return node.type === 2 ? '#ffb020' : '#ffffff' // 储位
}

// 节点描边色（与MapEditor一致）
const getNodeStroke = (node: any) => {
  if (!node) return '#6c757d'
  if (!node.type) return '#6c757d'
  if (node.type === 3) return '#28a745' // 充电点
  if (node.type === 2) return '#d9480f' // 储位
  if (node.type === 4) return '#0d47a1' // 停车位
  return '#6c757d'
}

// 资源颜色（与MapEditor一致）
const getResourceColor = (type: number, alpha = 1) => {
  const colors: Record<number, string> = {
    1: `rgba(33, 150, 243, ${alpha})`, // 停靠点 - 蓝色
    2: `rgba(76, 175, 80, ${alpha})`, // 充电桩 - 绿色
    3: `rgba(156, 39, 176, ${alpha})`, // 电梯 - 紫色
    4: `rgba(0, 188, 212, ${alpha})`, // 风淋门 - 青色
    5: `rgba(255, 152, 0, ${alpha})`, // 传送带 - 橙色
    6: `rgba(121, 85, 72, ${alpha})`, // 存储区 - 棕色
    7: `rgba(158, 158, 158, ${alpha})`, // 标记区域 - 灰色
    8: `rgba(96, 125, 139, ${alpha})`, // 其他 - 蓝灰色
  }
  return colors[type] || `rgba(158, 158, 158, ${alpha})`
}

// 资源多边形点
const getResourcePolygonPoints = (resource: any) => {
  if (!resource.locationCoordinates || resource.locationCoordinates.length === 0) return ''
  return resource.locationCoordinates.map((p: any) => `${p.x},${-p.y}`).join(' ')
}

// 资源中心点
const getResourceCenter = (resource: any) => {
  if (!resource.locationCoordinates || resource.locationCoordinates.length === 0) return { x: 0, y: 0 }
  const pts = resource.locationCoordinates
  const sumX = pts.reduce((acc: number, p: any) => acc + p.x, 0)
  const sumY = pts.reduce((acc: number, p: any) => acc + p.y, 0)
  return { x: sumX / pts.length, y: sumY / pts.length }
}

// 资源点击事件
const onResourceClick = (resource: any, e: MouseEvent) => {
  e.stopPropagation()
  // 重定位模式下，点击资源区域只设置重定位位置（使用区域中心点）
  if (relocateMode.value) {
    const center = getResourceCenter(resource)
    relocatePosition.value = { x: center.x, y: center.y }
    return
  }
  // 必须先选择起点节点
  if (selectedNodeIds.value.length < 1) {
    notify({ message: t('dashboard.selectStartFirst') || '请先选择起点节点', color: 'warning' })
    return
  }
  if (selectedResourceId.value === resource.id) {
    selectedResourceId.value = null
    endResourceId.value = ''
    endResourceName.value = ''
  } else {
    selectedResourceId.value = resource.id
    endResourceId.value = resource.id
    endResourceName.value = resource.resourceName || resource.resourceCode
  }
}

// 画布事件
let hasDragged = false
const onCanvasMouseDown = (e: MouseEvent) => {
  isPanning = true
  hasDragged = false
  panStart = { x: e.clientX, y: e.clientY }
  viewportStart = { x: viewport.value.x, y: viewport.value.y }
}

const onCanvasMouseMove = (e: MouseEvent) => {
  if (!isPanning) return
  const dx = e.clientX - panStart.x
  const dy = e.clientY - panStart.y
  if (Math.abs(dx) > 3 || Math.abs(dy) > 3) hasDragged = true
  viewport.value.x = viewportStart.x + dx
  viewport.value.y = viewportStart.y + dy
}

const onCanvasMouseUp = (e: MouseEvent) => {
  if (isPanning && !hasDragged) {
    // 如果在重定位模式下，处理点击选择位置
    if (relocateMode.value) {
      onRelocateCanvasClick(e)
    } else {
      // 点击空白处关闭库位选择器，不清空已选节点
      closeLocationSelector()
    }
  }
  isPanning = false
}

const onCanvasWheel = (e: WheelEvent) => {
  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
  const mx = e.clientX - rect.left
  const my = e.clientY - rect.top
  const factor = e.deltaY < 0 ? 1.1 : 0.9
  const newScale = Math.max(MIN_SCALE, viewport.value.scale * factor)
  const wx = (mx - viewport.value.x) / viewport.value.scale
  const wy = (my - viewport.value.y) / viewport.value.scale
  viewport.value.scale = newScale
  viewport.value.x = mx - wx * newScale
  viewport.value.y = my - wy * newScale
}

// 触屏事件
let lastTouchDist = 0
let lastTouchCenter = { x: 0, y: 0 }

const onTouchStart = (e: TouchEvent) => {
  if (e.touches.length === 1) {
    isPanning = true
    hasDragged = false
    panStart = { x: e.touches[0].clientX, y: e.touches[0].clientY }
    viewportStart = { x: viewport.value.x, y: viewport.value.y }
  } else if (e.touches.length === 2) {
    isPanning = false
    const dx = e.touches[1].clientX - e.touches[0].clientX
    const dy = e.touches[1].clientY - e.touches[0].clientY
    lastTouchDist = Math.hypot(dx, dy)
    lastTouchCenter = {
      x: (e.touches[0].clientX + e.touches[1].clientX) / 2,
      y: (e.touches[0].clientY + e.touches[1].clientY) / 2,
    }
  }
}

const onTouchMove = (e: TouchEvent) => {
  e.preventDefault()
  if (e.touches.length === 1 && isPanning) {
    const dx = e.touches[0].clientX - panStart.x
    const dy = e.touches[0].clientY - panStart.y
    if (Math.abs(dx) > 3 || Math.abs(dy) > 3) hasDragged = true
    viewport.value.x = viewportStart.x + dx
    viewport.value.y = viewportStart.y + dy
  } else if (e.touches.length === 2) {
    const dx = e.touches[1].clientX - e.touches[0].clientX
    const dy = e.touches[1].clientY - e.touches[0].clientY
    const dist = Math.hypot(dx, dy)
    const center = {
      x: (e.touches[0].clientX + e.touches[1].clientX) / 2,
      y: (e.touches[0].clientY + e.touches[1].clientY) / 2,
    }
    if (lastTouchDist > 0) {
      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
      const mx = center.x - rect.left
      const my = center.y - rect.top
      const factor = dist / lastTouchDist
      const newScale = Math.max(MIN_SCALE, Math.min(10, viewport.value.scale * factor))
      const wx = (mx - viewport.value.x) / viewport.value.scale
      const wy = (my - viewport.value.y) / viewport.value.scale
      viewport.value.scale = newScale
      viewport.value.x = mx - wx * newScale + (center.x - lastTouchCenter.x)
      viewport.value.y = my - wy * newScale + (center.y - lastTouchCenter.y)
    }
    lastTouchDist = dist
    lastTouchCenter = center
  }
}

const onTouchEnd = (e: TouchEvent) => {
  if (e.touches.length === 0) {
    if (isPanning && !hasDragged) {
      // 触摸点击空白处只关闭库位选择器，不清空已选节点
      closeLocationSelector()
    }
    isPanning = false
    lastTouchDist = 0
  } else if (e.touches.length === 1) {
    isPanning = true
    hasDragged = true
    panStart = { x: e.touches[0].clientX, y: e.touches[0].clientY }
    viewportStart = { x: viewport.value.x, y: viewport.value.y }
    lastTouchDist = 0
  }
}

const resetView = () => {
  if (!canvasSize.value.width || !canvasSize.value.height) return
  const { xMin, xMax, yMin, yMax } = worldBounds.value
  // 合并节点边界和背景图边界
  const bgXMin = bgOffsetX.value
  const bgXMax = bgOffsetX.value + bgWorldWidth.value
  const bgYMin = bgOffsetY.value
  const bgYMax = bgOffsetY.value + bgWorldHeight.value
  const hasBg = bgImageUrl.value && bgWorldWidth.value > 0
  const finalXMin = hasBg ? Math.min(xMin, bgXMin) : xMin
  const finalXMax = hasBg ? Math.max(xMax, bgXMax) : xMax
  const finalYMin = hasBg ? Math.min(yMin, bgYMin) : yMin
  const finalYMax = hasBg ? Math.max(yMax, bgYMax) : yMax
  const worldW = finalXMax - finalXMin || 100
  const worldH = finalYMax - finalYMin || 100
  const scaleX = canvasSize.value.width / worldW
  const scaleY = canvasSize.value.height / worldH
  const scale = Math.min(scaleX, scaleY) * 0.9
  const centerX = (finalXMin + finalXMax) / 2
  const centerY = (finalYMin + finalYMax) / 2
  viewport.value.scale = Math.max(MIN_SCALE, scale)
  viewport.value.x = canvasSize.value.width / 2 - centerX * viewport.value.scale
  viewport.value.y = canvasSize.value.height / 2 + centerY * viewport.value.scale
}

const zoomIn = () => {
  viewport.value.scale = Math.min(10, viewport.value.scale * 1.2)
}

const zoomOut = () => {
  viewport.value.scale = Math.max(MIN_SCALE, viewport.value.scale / 1.2)
}

/**
 * 进入重定位模式
 * @param robotId 机器人ID
 * @param robotCode 机器人编码
 * @author zzy
 */
const enterRelocateMode = (robotId: string, robotCode: string) => {
  relocateMode.value = true
  relocateRobotId.value = robotId
  relocateRobotCode.value = robotCode
  relocatePosition.value = null
  relocateAngle.value = 0
  notify({ message: t('dashboard.relocate.clickToSelect'), color: 'info' })
}

/**
 * 取消重定位模式
 * @author zzy
 */
const cancelRelocate = () => {
  relocateMode.value = false
  relocateRobotId.value = null
  relocateRobotCode.value = ''
  relocatePosition.value = null
  relocateAngle.value = 0
}

/**
 * 获取选中的机器人对象
 * @author zzy
 */
const selectedRobot = computed(() => {
  if (!selectedRobotId.value) return null
  return robotList.value.find((r) => r.robotId === selectedRobotId.value) || null
})

/**
 * 选中机器人面板的样式（跟随机器人位置）
 * @author zzy
 */
const selectedRobotStyle = computed(() => {
  const robot = selectedRobot.value
  if (!robot || robot.x == null || robot.y == null) return {}

  // 计算屏幕坐标：ViewPort + RobotWorldPos * Scale
  // 注意：世界坐标Y轴向上，SVG坐标Y轴向下，所以Y要取反
  const screenX = viewport.value.x + robot.x * viewport.value.scale
  const screenY = viewport.value.y - robot.y * viewport.value.scale

  // 偏移量，避免遮挡机器人
  const offsetX = 50 * viewport.value.scale + 20
  const offsetY = -50 * viewport.value.scale - 20

  return {
    left: `${screenX + offsetX}px`,
    top: `${screenY + offsetY}px`,
    bottom: 'auto',
    right: 'auto',
    transform: 'none', // 确保没有其他transform干扰
  }
})

/**
 * 处理画布中机器人的点击事件
 * @param robot 机器人对象
 * @param e 鼠标事件
 * @author zzy
 */
const onRobotClick = (robot: RobotStatus, e: MouseEvent) => {
  e.stopPropagation()
  // 重定位模式下不处理机器人选中
  if (relocateMode.value) return
  // 切换选中状态
  if (selectedRobotId.value === robot.robotId) {
    selectedRobotId.value = null
  } else {
    selectedRobotId.value = robot.robotId
  }
}

/**
 * 复位选中的机器人（与RobotStatusCard相同功能）
 * @author zzy
 */
const handleSelectedRobotReset = async () => {
  if (isRobotActionLoading.value || !selectedRobot.value) return
  isRobotActionLoading.value = true
  try {
    const res = await robotsApi.reset(selectedRobot.value.robotId)
    if (res?.Success || res?.success) {
      notify({ message: t('dashboard.robotCard.messages.resetSuccess'), color: 'success' })
    } else {
      notify({
        message: res?.Message || res?.message || t('dashboard.robotCard.messages.resetFailed'),
        color: 'danger',
      })
    }
  } catch (err: any) {
    notify({ message: err?.message || t('dashboard.robotCard.messages.resetFailed'), color: 'danger' })
  } finally {
    isRobotActionLoading.value = false
  }
}

/**
 * 暂停/恢复选中的机器人（与RobotStatusCard相同功能）
 * @author zzy
 */
const handleSelectedRobotPauseToggle = async () => {
  if (isRobotPauseLoading.value || !selectedRobot.value) return
  isRobotPauseLoading.value = true
  const isPaused = selectedRobot.value.paused
  try {
    const action = isPaused ? robotsApi.unpause : robotsApi.pause
    const res = await action(selectedRobot.value.robotId)
    if (res?.Success || res?.success) {
      notify({ message: t('dashboard.robotCard.messages.operationSuccess'), color: 'success' })
    } else {
      notify({
        message:
          res?.Message ||
          res?.message ||
          (isPaused ? t('dashboard.robotCard.messages.resumeFailed') : t('dashboard.robotCard.messages.pauseFailed')),
        color: 'danger',
      })
    }
  } catch (err: any) {
    notify({
      message:
        err?.message ||
        (isPaused ? t('dashboard.robotCard.messages.resumeFailed') : t('dashboard.robotCard.messages.pauseFailed')),
      color: 'danger',
    })
  } finally {
    isRobotPauseLoading.value = false
  }
}

/**
 * 取消选中机器人的任务（与RobotStatusCard相同功能）
 * @author zzy
 */
const handleSelectedRobotCancelTask = async () => {
  if (isRobotActionLoading.value || !selectedRobot.value) return
  isRobotActionLoading.value = true
  try {
    const res = await robotsApi.cancelTask(selectedRobot.value.robotId)
    if (res?.Success || res?.success) {
      notify({ message: t('dashboard.robotCard.messages.cancelTaskSuccess'), color: 'success' })
    } else {
      notify({
        message: res?.Message || res?.message || t('dashboard.robotCard.messages.cancelTaskFailed'),
        color: 'danger',
      })
    }
  } catch (err: any) {
    notify({ message: err?.message || t('dashboard.robotCard.messages.cancelTaskFailed'), color: 'danger' })
  } finally {
    isRobotActionLoading.value = false
  }
}

/**
 * 从画布选中机器人进入重定位模式
 * @author zzy
 */
const handleSelectedRobotRelocate = () => {
  if (!selectedRobot.value) return
  const robot = selectedRobot.value
  selectedRobotId.value = null // 清除选中状态
  enterRelocateMode(robot.robotId, robot.robotCode)
}

/**
 * 确认重定位
 * @author zzy
 */
const confirmRelocate = async () => {
  if (!relocateRobotId.value || !relocatePosition.value) return

  isRelocating.value = true
  try {
    // 将角度转换为弧度
    const thetaRad = (relocateAngle.value * Math.PI) / 180
    const res = await robotsApi.relocate(
      relocateRobotId.value,
      relocatePosition.value.x,
      relocatePosition.value.y,
      thetaRad,
    )
    if (res?.Success || res?.success) {
      notify({ message: t('dashboard.relocate.success'), color: 'success' })
      cancelRelocate()
    } else {
      notify({ message: res?.Message || res?.message || t('dashboard.relocate.failed'), color: 'danger' })
    }
  } catch (err: any) {
    notify({ message: err?.message || t('dashboard.relocate.failed'), color: 'danger' })
  } finally {
    isRelocating.value = false
  }
}

/**
 * 处理重定位模式下的画布点击
 * @param e 鼠标事件
 * @author zzy
 */
const onRelocateCanvasClick = (e: MouseEvent) => {
  if (!relocateMode.value) return

  const svg = svgRef.value
  if (!svg) return

  const rect = svg.getBoundingClientRect()
  const screenX = e.clientX - rect.left
  const screenY = e.clientY - rect.top

  // 将屏幕坐标转换为世界坐标
  const worldX = (screenX - viewport.value.x) / viewport.value.scale
  const worldY = -((screenY - viewport.value.y) / viewport.value.scale)

  relocatePosition.value = { x: worldX, y: worldY }
}

/**
 * 角度选择器拖拽状态
 */
let isAngleDragging = false

/**
 * 开始拖拽角度
 * @author zzy
 */
const onAngleDragStart = (e: MouseEvent) => {
  isAngleDragging = true
  updateAngleFromEvent(e)
}

/**
 * 拖拽角度
 * @author zzy
 */
const onAngleDrag = (e: MouseEvent) => {
  if (!isAngleDragging) return
  updateAngleFromEvent(e)
}

/**
 * 结束拖拽角度
 * @author zzy
 */
const onAngleDragEnd = () => {
  isAngleDragging = false
}

/**
 * 从鼠标事件更新角度
 * @author zzy
 */
const updateAngleFromEvent = (e: MouseEvent) => {
  const svg = e.currentTarget as SVGElement
  const rect = svg.getBoundingClientRect()
  const centerX = rect.width / 2
  const centerY = rect.height / 2
  const x = e.clientX - rect.left - centerX
  const y = centerY - (e.clientY - rect.top)

  let angle = Math.atan2(y, x) * (180 / Math.PI)
  // 将角度规范化到0-360
  if (angle < 0) angle += 360
  // 四舍五入到最近的5度
  relocateAngle.value = (Math.round(angle / 5) * 5) % 360
}

onMounted(async () => {
  // 检测设备类型
  checkDeviceType()
  // 监听窗口大小变化以重新检测设备类型
  window.addEventListener('resize', checkDeviceType)

  await loadMapList()

  // 订阅机器人状态更新
  unsubscribeWs = HHRCSWs.onStatusUpdate((robots) => {
    robotList.value = robots
  })

  /**
   * 订阅库位状态更新
   * @description 通过 WebSocket 接收储位区域数据，并按节点ID更新对应节点的储位列表
   * @author zzy
   */
  unsubscribeLocationWs = HHRCSWs.onLocationUpdate((areas: StorageArea[]) => {
    // 构建节点ID到储位列表的映射表（使用 Map 提升查找性能）
    const storageLocationMap = new Map<string, StorageLocation[]>()

    // 第一遍遍历：收集所有有效的节点-储位映射关系
    for (const area of areas) {
      if (area.nodeId && area.storageLocations?.length >= 0) {
        storageLocationMap.set(area.nodeId, area.storageLocations)
      }
    }

    // 第二遍遍历：更新节点数据（直接修改引用以触发 Vue 响应式更新）
    for (const node of currentMap.value.nodes) {
      const locations = storageLocationMap.get(node.id)
      node.storageLocations = locations ?? []
    }
  })

  // 监听画布大小
  if (svgRef.value) {
    const parent = svgRef.value.parentElement
    if (parent) {
      resizeObserver = new ResizeObserver((entries) => {
        for (const entry of entries) {
          canvasSize.value = { width: entry.contentRect.width, height: entry.contentRect.height }
        }
      })
      resizeObserver.observe(parent)
      canvasSize.value = { width: parent.clientWidth, height: parent.clientHeight }
    }
  }
})

onBeforeUnmount(() => {
  // 移除窗口大小变化监听
  window.removeEventListener('resize', checkDeviceType)
  // 移除平板模式样式类
  document.body.classList.remove('tablet-mode')
  document.documentElement.classList.remove('tablet-mode')

  if (resizeObserver) resizeObserver.disconnect()
  if (unsubscribeWs) unsubscribeWs()
  if (unsubscribeLocationWs) unsubscribeLocationWs()
  HHRCSWs.disconnect()
})
</script>

<template>
  <div class="device-monitor-wrapper" :class="{ 'tablet-fullscreen': isTablet }">
    <!-- 平板模式提示 -->
    <div v-if="isTablet" class="tablet-mode-indicator">
      <VaIcon name="tablet_android" size="small" />
      <span>{{ t('dashboard.tabletMode') || '平板模式' }}</span>
    </div>
    <div class="monitor-main">
      <VaCard class="device-monitor-card">
        <VaCardContent class="device-monitor-content">
          <!-- 顶部工具栏 -->
          <div class="toolbar-container">
            <div class="toolbar-left">
              <VaSelect
                v-model="selectedMapId"
                :options="mapList"
                :placeholder="t('dashboard.selectMap') || '请选择地图'"
                text-by="mapName"
                value-by="mapId"
                class="map-select"
                :loading="isLoading"
              />
              <div class="task-input-group">
                <VaInput
                  v-model="startNodeCode"
                  :placeholder="t('dashboard.startNode') || '起点'"
                  class="node-input"
                  readonly
                />
                <span class="arrow-icon">→</span>
                <VaInput
                  v-model="endResourceName"
                  :placeholder="t('dashboard.endArea') || '终点区域'"
                  class="node-input"
                  readonly
                />
                <span class="separator">:</span>
                <VaInput
                  v-model="endNodeCode"
                  :placeholder="t('dashboard.endNode') || '终点节点'"
                  class="node-input"
                  readonly
                />
                <VaButton
                  color="primary"
                  icon="play_arrow"
                  round
                  :title="t('dashboard.executeTask') || '执行任务'"
                  :loading="isLoading"
                  class="execute-btn"
                  @click="executeTask"
                />
                <VaButton
                  color="secondary"
                  icon="clear"
                  round
                  :title="t('dashboard.clearSelection') || '清空选择'"
                  class="clear-btn"
                  @click="clearTaskSelection"
                />
              </div>
            </div>
            <div class="toolbar-right">
              <VaButtonGroup class="toolbar-group">
                <VaButton
                  color="secondary"
                  icon="zoom_in"
                  size="small"
                  :title="t('dashboard.zoomIn')"
                  @click="zoomIn"
                />
                <VaButton
                  color="secondary"
                  icon="zoom_out"
                  size="small"
                  :title="t('dashboard.zoomOut')"
                  @click="zoomOut"
                />
                <VaButton
                  color="secondary"
                  icon="history"
                  size="small"
                  :title="t('dashboard.resetView')"
                  @click="resetView"
                />
              </VaButtonGroup>
              <span v-if="currentMap.id" class="stats-text">
                {{ t('dashboard.stats') || '节点' }}: {{ nodes.length }} | {{ t('dashboard.edges') || '边' }}:
                {{ edges.length }}
              </span>
            </div>
          </div>

          <!-- 地图画布 -->
          <div class="map-canvas-wrapper">
            <div
              v-if="currentMap.id"
              class="topo-canvas"
              :class="{ 'relocate-mode': relocateMode }"
              @mousedown="onCanvasMouseDown"
              @mousemove="onCanvasMouseMove"
              @mouseup="onCanvasMouseUp"
              @mouseleave="onCanvasMouseUp"
              @wheel.prevent="onCanvasWheel"
              @touchstart="onTouchStart"
              @touchmove.prevent="onTouchMove"
              @touchend="onTouchEnd"
            >
              <svg ref="svgRef" width="100%" height="100%">
                <defs>
                  <marker
                    id="arrow-black"
                    viewBox="0 0 10 10"
                    refX="10"
                    refY="5"
                    markerUnits="strokeWidth"
                    markerWidth="10"
                    markerHeight="6"
                    orient="auto"
                  >
                    <path d="M 0 0 L 10 5 L 0 10 z" fill="#000000" />
                  </marker>
                  <marker
                    id="arrow-red"
                    viewBox="0 0 10 10"
                    refX="10"
                    refY="5"
                    markerUnits="strokeWidth"
                    markerWidth="10"
                    markerHeight="6"
                    orient="auto"
                  >
                    <path d="M 0 0 L 10 5 L 0 10 z" fill="#dc3545" />
                  </marker>
                  <marker
                    id="arrow-guide"
                    viewBox="0 0 10 10"
                    refX="5"
                    refY="5"
                    markerUnits="strokeWidth"
                    markerWidth="4"
                    markerHeight="4"
                    orient="auto"
                  >
                    <path d="M 0 0 L 10 5 L 0 10 z" fill="#ff6b35" />
                  </marker>
                  <!-- 潜伏车图标 -->
                  <image id="latent-agv" href="/src/components/icons/LatentAgv.svg" width="50" height="40" />
                  <!-- 叉车图标 -->
                  <image id="forklift-agv" href="/src/components/icons/ForkliftAgv.svg" width="65" height="40" />
                </defs>

                <g :transform="`translate(${viewport.x}, ${viewport.y}) scale(${viewport.scale})`">
                  <!-- 背景图 -->
                  <g v-if="bgImageUrl">
                    <g
                      :transform="`translate(${bgWorldWidth / 2 + bgOffsetX}, ${-bgWorldHeight / 2 - bgOffsetY}) rotate(${bgRotation}) translate(${-bgWorldWidth / 2}, ${bgWorldHeight / 2})`"
                    >
                      <image
                        :href="bgImageUrl"
                        :x="0"
                        :y="-bgWorldHeight"
                        :width="bgWorldWidth"
                        :height="bgWorldHeight"
                        :opacity="bgOpacity"
                        preserveAspectRatio="none"
                        crossorigin="anonymous"
                      />
                    </g>
                  </g>

                  <!-- 网格（简化：只显示坐标轴） -->
                  <g class="grid">
                    <line
                      :x1="0"
                      :y1="-worldBounds.yMin"
                      :x2="0"
                      :y2="-worldBounds.yMax"
                      stroke="#adb5bd"
                      :stroke-width="0.2 / viewport.scale"
                    />
                    <line
                      :x1="worldBounds.xMin"
                      y1="0"
                      :x2="worldBounds.xMax"
                      y2="0"
                      stroke="#adb5bd"
                      :stroke-width="0.2 / viewport.scale"
                    />
                  </g>

                  <!-- 资源区域 -->
                  <g class="resources">
                    <g v-for="resource in resources" :key="resource.id">
                      <polygon
                        :points="getResourcePolygonPoints(resource)"
                        :fill="
                          selectedResourceId === resource.id
                            ? 'rgba(13, 110, 253, 0.4)'
                            : getResourceColor(resource.type, 0.3)
                        "
                        :stroke="selectedResourceId === resource.id ? '#0d6efd' : getResourceColor(resource.type, 1)"
                        :stroke-width="(selectedResourceId === resource.id ? 2 : 1) / viewport.scale"
                        :stroke-dasharray="
                          selectedResourceId === resource.id
                            ? 'none'
                            : `${0.5 / viewport.scale} ${0.25 / viewport.scale}`
                        "
                        style="cursor: pointer"
                        @mousedown.stop
                        @click.stop="onResourceClick(resource, $event)"
                      />
                      <text
                        v-if="resource.locationCoordinates && resource.locationCoordinates.length > 0"
                        :x="getResourceCenter(resource).x"
                        :y="-Math.max(...resource.locationCoordinates.map((p: any) => p.y)) - 10 / viewport.scale"
                        :font-size="15 / viewport.scale"
                        fill="#333"
                        text-anchor="middle"
                        dominant-baseline="auto"
                      >
                        {{ resource.resourceName || resource.resourceCode }}
                      </text>
                    </g>
                  </g>

                  <!-- 边 -->
                  <g class="edges">
                    <g v-for="edge in edges.filter((e: any) => !e.curve)" :key="edge.id">
                      <path
                        :d="getEdgePath(edge)"
                        fill="none"
                        :stroke="'#000000'"
                        stroke-width="6"
                        :marker-mid="'url(#arrow-black)'"
                      />
                    </g>
                  </g>

                  <!-- 弧线 -->
                  <g class="arcs">
                    <g v-for="arc in edges.filter((e: any) => e.curve)" :key="arc.id">
                      <path
                        :d="getArcPath(arc)"
                        fill="none"
                        :stroke="'#000000'"
                        stroke-width="6"
                        :marker-mid="'url(#arrow-black)'"
                      />
                    </g>
                  </g>

                  <!-- 机器人路径线条（橙色） -->
                  <g class="robot-paths">
                    <g v-for="robot in robotList" :key="'path-' + robot.robotId">
                      <!-- 重定位模式下隐藏正在重定位的机器人路径 -->
                      <polyline
                        v-if="
                          robot.path && robot.path.length > 1 && !(relocateMode && robot.robotId === relocateRobotId)
                        "
                        :points="robot.path.map((p: number[]) => `${p[0]},${-p[1]}`).join(' ')"
                        fill="none"
                        stroke="#fdb933"
                        stroke-width="160"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </g>
                  </g>

                  <!-- 节点 -->
                  <g class="nodes">
                    <g
                      v-for="node in nodes"
                      :key="node.id"
                      :transform="`translate(${node.x}, ${-node.y})`"
                      style="cursor: pointer"
                      :class="{ 'location-selecting': locationSelectNodeId === node.id }"
                      @click="onNodeClick(node, $event)"
                    >
                      <!-- 储位类型：1000x1000橙黄色方框 -->
                      <g v-if="node.type === 2">
                        <rect
                          x="-500"
                          y="-500"
                          width="1000"
                          height="1000"
                          rx="50"
                          ry="50"
                          :fill="isNodeSelected(node.id) ? '#7bbfea' : '#fcf16e'"
                          :stroke="isNodeSelected(node.id) ? getSelectedNodeColor(node.id) : '#fdb933'"
                          stroke-width="50"
                        />
                        <!-- 库位状态图标：禁用=红叉，占用=绿色托盘，预占用=灰色托盘 -->
                        <g v-if="getStorageStatus(node) === 3" transform="translate(-450,-450)">
                          <line
                            x1="100"
                            y1="100"
                            x2="800"
                            y2="800"
                            stroke="#dc3545"
                            stroke-width="100"
                            stroke-linecap="round"
                          />
                          <line
                            x1="800"
                            y1="100"
                            x2="100"
                            y2="800"
                            stroke="#dc3545"
                            stroke-width="100"
                            stroke-linecap="round"
                          />
                        </g>
                        <g
                          v-else-if="getStorageStatus(node) === 1 || getStorageStatus(node) === 2"
                          transform="translate(-450,-450)"
                        >
                          <!-- 托盘俯视图：三横三纵木板结构 900x900 -->
                          <rect
                            x="0"
                            y="0"
                            width="900"
                            height="900"
                            rx="30"
                            :fill="getStorageStatus(node) === 1 ? '#8B4513' : '#9e9e9e'"
                            opacity="0.3"
                          />
                          <!-- 横向木板 -->
                          <rect
                            x="30"
                            y="50"
                            width="840"
                            height="80"
                            rx="10"
                            :fill="getStorageStatus(node) === 1 ? '#A0522D' : '#757575'"
                          />
                          <rect
                            x="30"
                            y="410"
                            width="840"
                            height="80"
                            rx="10"
                            :fill="getStorageStatus(node) === 1 ? '#A0522D' : '#757575'"
                          />
                          <rect
                            x="30"
                            y="770"
                            width="840"
                            height="80"
                            rx="10"
                            :fill="getStorageStatus(node) === 1 ? '#A0522D' : '#757575'"
                          />
                          <!-- 纵向木板 -->
                          <rect
                            x="50"
                            y="30"
                            width="80"
                            height="840"
                            rx="10"
                            :fill="getStorageStatus(node) === 1 ? '#CD853F' : '#888'"
                          />
                          <rect
                            x="410"
                            y="30"
                            width="80"
                            height="840"
                            rx="10"
                            :fill="getStorageStatus(node) === 1 ? '#CD853F' : '#888'"
                          />
                          <rect
                            x="770"
                            y="30"
                            width="80"
                            height="840"
                            rx="10"
                            :fill="getStorageStatus(node) === 1 ? '#CD853F' : '#888'"
                          />
                        </g>
                        <text
                          v-else
                          x="0"
                          y="0"
                          text-anchor="middle"
                          dominant-baseline="central"
                          font-size="200"
                          :fill="isNodeSelected(node.id) ? getSelectedNodeColor(node.id) : '#d68910'"
                        >
                          {{ getNodeSelectedLocationDisplay(node.id) }}
                        </text>
                        <!-- 多库位指示器 -->
                        <g v-if="node.storageLocations?.length > 1" transform="translate(350, -350)">
                          <circle r="80" fill="#2196f3" />
                          <text
                            x="0"
                            y="0"
                            text-anchor="middle"
                            dominant-baseline="central"
                            font-size="100"
                            fill="white"
                          >
                            {{ node.storageLocations.length }}
                          </text>
                        </g>
                      </g>
                      <!-- 非储位类型：圆形 -->
                      <g v-else>
                        <circle
                          :r="NODE_RADIUS"
                          :fill="isNodeSelected(node.id) ? getSelectedNodeColor(node.id) : getNodeFill(node)"
                          :stroke="isNodeSelected(node.id) ? getSelectedNodeColor(node.id) : getNodeStroke(node)"
                          :stroke-width="isNodeSelected(node.id) ? 6 : 2"
                        />
                        <text
                          v-if="!isNodeSelected(node.id) && node.type === 3"
                          x="0"
                          y="0"
                          text-anchor="middle"
                          dominant-baseline="central"
                          :font-size="NODE_RADIUS * 1.4"
                          fill="#28a745"
                        >
                          ⚡
                        </text>
                        <text
                          v-if="!isNodeSelected(node.id) && node.type === 4"
                          x="0"
                          y="0"
                          text-anchor="middle"
                          dominant-baseline="central"
                          :font-size="NODE_RADIUS * 1.4"
                          fill="#ffffff"
                        >
                          P
                        </text>
                      </g>
                    </g>
                  </g>

                  <!-- 机器人图标 -->
                  <g class="robots">
                    <template v-for="robot in robotList" :key="'robot-' + robot.robotId">
                      <!-- 重定位模式下隐藏正在重定位的机器人 -->
                      <g
                        v-if="
                          robot.x != null && robot.y != null && !(relocateMode && robot.robotId === relocateRobotId)
                        "
                        :transform="`translate(${robot.x}, ${-robot.y!}) rotate(${-(robot.theta ?? 0)})`"
                        style="cursor: pointer"
                        @mousedown.stop
                        @click="onRobotClick(robot, $event)"
                      >
                        <!-- 选中高亮圆环 -->
                        <g v-if="selectedRobotId === robot.robotId" :transform="`rotate(${robot.theta ?? 0})`">
                          <circle
                            r="1200"
                            fill="var(--va-primary)"
                            fill-opacity="0.15"
                            stroke="var(--va-primary)"
                            stroke-width="60"
                            stroke-dasharray="150 75"
                          />
                        </g>
                        <image
                          v-if="robot.robotType === 2"
                          href="/src/components/icons/ForkliftAgv.svg"
                          x="-341"
                          y="-853"
                          width="2773"
                          height="1707"
                        />
                        <image v-else href="/src/components/icons/LatentAgv.svg" x="-1067" y="-853" width="2133" height="1707" />
                        <text x="0" y="1067" text-anchor="middle" font-size="400" fill="#333">
                          {{ robot.robotCode }}
                        </text>
                      </g>
                    </template>
                  </g>

                  <!-- 重定位标记 -->
                  <g v-if="relocateMode && relocatePosition" class="relocate-marker">
                    <g :transform="`translate(${relocatePosition.x}, ${-relocatePosition.y})`">
                      <!-- 定位圆环 -->
                      <circle
                        r="400"
                        fill="rgba(33, 150, 243, 0.2)"
                        stroke="#2196f3"
                        stroke-width="40"
                        stroke-dasharray="80 40"
                      />
                      <circle r="200" fill="rgba(33, 150, 243, 0.4)" stroke="#2196f3" stroke-width="20" />
                      <circle r="50" fill="#2196f3" />
                      <!-- 方向箭头 -->
                      <g :transform="`rotate(${-relocateAngle})`">
                        <line x1="0" y1="0" x2="600" y2="0" stroke="#f44336" stroke-width="40" stroke-linecap="round" />
                        <polygon points="600,-80 750,0 600,80" fill="#f44336" />
                      </g>
                      <!-- 坐标文字 -->
                      <text x="0" y="-500" text-anchor="middle" font-size="200" fill="#333" font-weight="bold">
                        {{ relocateRobotCode }}
                      </text>
                    </g>
                  </g>

                  <!-- 指引线（选中两个节点时显示） -->
                  <g v-if="guideLine" class="guide-line">
                    <line
                      :x1="guideLine.x1"
                      :y1="guideLine.y1"
                      :x2="guideLine.x2"
                      :y2="guideLine.y2"
                      stroke="#ff6b35"
                      :stroke-width="4 / viewport.scale"
                      stroke-dasharray="20 10"
                      stroke-linecap="round"
                      marker-end="url(#arrow-guide)"
                    />
                  </g>
                </g>
              </svg>
            </div>

            <!-- 未选择地图提示 -->
            <div v-else class="empty-state">
              <VaIcon name="map" size="64px" color="secondary" />
              <p>{{ t('dashboard.selectMapHint') || '请从上方下拉框选择要监控的地图' }}</p>
            </div>

            <!-- 重定位控制面板 -->
            <div v-if="relocateMode" class="relocate-panel">
              <div class="relocate-panel-header">
                <VaIcon name="gps_fixed" color="primary" />
                <span>{{ t('dashboard.relocate.title') }} - {{ relocateRobotCode }}</span>
              </div>

              <div class="relocate-panel-body">
                <!-- 位置信息 -->
                <div class="relocate-info">
                  <div class="info-row">
                    <span class="info-label">X:</span>
                    <span class="info-value">{{ relocatePosition ? relocatePosition.x.toFixed(0) : '-' }}</span>
                  </div>
                  <div class="info-row">
                    <span class="info-label">Y:</span>
                    <span class="info-value">{{ relocatePosition ? relocatePosition.y.toFixed(0) : '-' }}</span>
                  </div>
                </div>

                <!-- 角度选择器 -->
                <div class="angle-selector-wrapper">
                  <div class="angle-label">{{ t('dashboard.relocate.direction') }}</div>
                  <div class="angle-disk-container">
                    <svg viewBox="0 0 120 120" class="angle-disk">
                      <!-- 外圈 -->
                      <circle cx="60" cy="60" r="50" fill="none" stroke="#e0e0e0" stroke-width="2" />
                      <!-- 刻度 -->
                      <g v-for="i in 8" :key="i">
                        <line
                          :x1="60 + 42 * Math.cos(((i - 1) * 45 * Math.PI) / 180)"
                          :y1="60 - 42 * Math.sin(((i - 1) * 45 * Math.PI) / 180)"
                          :x2="60 + 50 * Math.cos(((i - 1) * 45 * Math.PI) / 180)"
                          :y2="60 - 50 * Math.sin(((i - 1) * 45 * Math.PI) / 180)"
                          stroke="#999"
                          stroke-width="2"
                        />
                      </g>
                      <!-- 方向指针 -->
                      <g :transform="`rotate(${-relocateAngle}, 60, 60)`">
                        <line
                          x1="60"
                          y1="60"
                          x2="100"
                          y2="60"
                          stroke="#f44336"
                          stroke-width="3"
                          stroke-linecap="round"
                        />
                        <polygon points="100,55 110,60 100,65" fill="#f44336" />
                      </g>
                      <!-- 中心点 -->
                      <circle cx="60" cy="60" r="6" fill="#2196f3" />
                      <!-- 可点击区域 -->
                      <circle
                        cx="60"
                        cy="60"
                        r="50"
                        fill="transparent"
                        class="angle-click-area"
                        @mousedown="onAngleDragStart"
                        @mousemove="onAngleDrag"
                        @mouseup="onAngleDragEnd"
                        @mouseleave="onAngleDragEnd"
                      />
                      <!-- 角度标签 -->
                      <text x="60" y="12" text-anchor="middle" font-size="9" fill="#666">90°</text>
                      <text x="108" y="63" text-anchor="middle" font-size="9" fill="#666">0°</text>
                      <text x="60" y="115" text-anchor="middle" font-size="9" fill="#666">-90°</text>
                      <text x="12" y="63" text-anchor="middle" font-size="9" fill="#666">180°</text>
                    </svg>
                  </div>
                  <div class="angle-value">{{ relocateAngle }}°</div>
                  <!-- 快捷角度按钮 -->
                  <div class="angle-shortcuts">
                    <VaButton
                      v-for="angle in [0, 90, 180, 270]"
                      :key="angle"
                      size="small"
                      preset="secondary"
                      @click="relocateAngle = angle"
                    >
                      {{ angle }}°
                    </VaButton>
                  </div>
                </div>
              </div>

              <div class="relocate-panel-footer">
                <VaButton color="secondary" @click="cancelRelocate">
                  {{ t('common.cancel') }}
                </VaButton>
                <VaButton
                  color="primary"
                  :disabled="!relocatePosition"
                  :loading="isRelocating"
                  @click="confirmRelocate"
                >
                  {{ t('dashboard.relocate.confirm') }}
                </VaButton>
              </div>
            </div>

            <!-- 库位选择器 -->
            <div
              v-if="isLocationSelectorVisible && locationSelectNode"
              class="location-selector-overlay"
              :style="{
                left: locationSelectorPosition.x + 'px',
                top: locationSelectorPosition.y + 'px',
              }"
              @click.stop
            >
              <div class="location-selector-content">
                <div class="location-selector-header">
                  <span class="location-selector-title">{{ locationSelectNode.code }} - 选择库位</span>
                  <button class="location-selector-close" @click="closeLocationSelector">×</button>
                </div>
                <div class="location-selector-list">
                  <div
                    v-for="(location, index) in sortedStorageLocations"
                    :key="location.locationId"
                    class="location-item"
                    :class="{
                      disabled: location.status === 3,
                      active: hoveredLocationId === location.locationId,
                    }"
                    :style="{
                      borderLeftColor: getLocationStatusColor(location.status),
                    }"
                    @mouseenter="hoveredLocationId = location.locationId"
                    @mouseleave="hoveredLocationId = null"
                    @click="selectLocation(location)"
                  >
                    <div class="location-item-layer">层 {{ location.layerNumber }}</div>
                    <div class="location-item-code">{{ location.locationCode }}</div>
                    <div class="location-item-status" :style="{ color: getLocationStatusColor(location.status) }">
                      {{ getLocationStatusText(location.status) }}
                    </div>
                  </div>
                </div>
                <div class="location-selector-hint">点击库位选中，点击 × 关闭</div>
              </div>
            </div>

            <!-- 选中机器人操作面板 -->
            <div v-if="selectedRobot && !relocateMode" class="selected-robot-panel" :style="selectedRobotStyle">
              <div class="selected-robot-header">
                <VaIcon name="smart_toy" color="white" />
                <span>{{ selectedRobot.robotName }}-{{ selectedRobot.robotCode }}</span>
                <VaButton preset="plain" color="white" size="small" class="close-btn" @click="selectedRobotId = null">
                  <VaIcon name="close" size="small" />
                </VaButton>
              </div>
              <div class="selected-robot-actions">
                <VaButton
                  size="small"
                  preset="secondary"
                  color="primary"
                  :loading="isRobotActionLoading"
                  :disabled="selectedRobot.online !== 1"
                  :title="t('dashboard.robotCard.actions.reset')"
                  class="action-btn"
                  @click="handleSelectedRobotReset"
                >
                  <VaIcon name="restart_alt" size="small" class="mr-1" />
                  {{ t('dashboard.robotCard.actions.reset') }}
                </VaButton>
                <VaButton
                  size="small"
                  preset="secondary"
                  color="primary"
                  :loading="isRobotPauseLoading"
                  :disabled="selectedRobot.online !== 1"
                  :title="
                    selectedRobot.paused
                      ? t('dashboard.robotCard.actions.resume')
                      : t('dashboard.robotCard.actions.pause')
                  "
                  class="action-btn"
                  @click="handleSelectedRobotPauseToggle"
                >
                  <VaIcon :name="selectedRobot.paused ? 'play_arrow' : 'pause'" size="small" class="mr-1" />
                  {{
                    selectedRobot.paused
                      ? t('dashboard.robotCard.actions.resume')
                      : t('dashboard.robotCard.actions.pause')
                  }}
                </VaButton>
                <VaButton
                  size="small"
                  preset="secondary"
                  color="primary"
                  :loading="isRobotActionLoading"
                  :disabled="selectedRobot.online !== 1"
                  :title="t('dashboard.robotCard.actions.cancelTask')"
                  class="action-btn"
                  @click="handleSelectedRobotCancelTask"
                >
                  <VaIcon name="cancel" size="small" class="mr-1" />
                  {{ t('dashboard.robotCard.actions.cancelTask') }}
                </VaButton>
                <VaButton
                  size="small"
                  preset="secondary"
                  color="primary"
                  :disabled="selectedRobot.online !== 1"
                  :title="t('dashboard.robotCard.actions.relocate')"
                  class="action-btn"
                  @click="handleSelectedRobotRelocate"
                >
                  <VaIcon name="gps_fixed" size="small" class="mr-1" />
                  {{ t('dashboard.robotCard.actions.relocate') }}
                </VaButton>
              </div>
            </div>
          </div>
        </VaCardContent>
      </VaCard>
    </div>

    <!-- 右侧机器人状态面板 -->
    <div class="robot-panel">
      <VaCard class="robot-panel-card">
        <VaCardTitle class="robot-panel-title">
          <VaIcon name="smart_toy" size="small" />
          <span>{{ t('dashboard.robotStatus') }}</span>
          <VaBadge :text="String(robotList.length)" color="primary" />
        </VaCardTitle>
        <VaCardContent class="robot-panel-content">
          <div v-if="robotList.length === 0" class="no-robots">
            <VaIcon name="info" color="secondary" />
            <span>{{ t('dashboard.noRobotData') }}</span>
          </div>
          <div v-else class="robot-list">
            <RobotStatusCard
              v-for="robot in robotList"
              :key="robot.robotId"
              :robot="robot"
              :is-selected="selectedRobotId === robot.robotId"
              @relocate="enterRelocateMode"
              @click="onRobotCardClick"
            />
          </div>
        </VaCardContent>
      </VaCard>
    </div>
  </div>
</template>

<style scoped>
.device-monitor-wrapper {
  height: calc(100vh - 80px);
  padding: 0;
  display: flex;
  gap: 12px;
}

/* 平板设备全屏模式 - 隐藏顶部、底部和左侧菜单栏 */
.device-monitor-wrapper.tablet-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  z-index: 9999;
  background: var(--va-background-primary);
}

/* 平板模式下显示右侧设备列表卡片 */
.device-monitor-wrapper.tablet-fullscreen {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 8px;
}

.device-monitor-wrapper.tablet-fullscreen .robot-panel {
  width: 200px;
  display: block;
  flex-shrink: 0;
}

/* 平板模式下主内容区域自适应 */
.device-monitor-wrapper.tablet-fullscreen .monitor-main {
  flex: 1;
  min-width: 0;
  height: 100%;
}

.device-monitor-wrapper.tablet-fullscreen .device-monitor-card {
  border-radius: 8px;
  height: 100%;
}

.device-monitor-wrapper.tablet-fullscreen .robot-panel-card {
  border-radius: 8px;
}

.device-monitor-wrapper.tablet-fullscreen .device-monitor-content {
  padding: 8px;
}

/* 平板模式下调整工具栏大小 */
.device-monitor-wrapper.tablet-fullscreen .toolbar-container {
  padding: 4px 0;
  margin-bottom: 8px;
}

.device-monitor-wrapper.tablet-fullscreen .map-select {
  min-width: 150px;
}

.device-monitor-wrapper.tablet-fullscreen .node-input {
  width: 100px;
}

.device-monitor-wrapper.tablet-fullscreen .task-input-group {
  gap: 4px;
}

.device-monitor-wrapper.tablet-fullscreen .execute-btn {
  width: 36px;
  height: 36px;
  font-size: 18px;
}

.device-monitor-wrapper.tablet-fullscreen .clear-btn {
  width: 36px;
  height: 36px;
  font-size: 18px;
}

/* 平板模式下的地图画布 */
.device-monitor-wrapper.tablet-fullscreen .map-canvas-wrapper {
  border-radius: 4px;
}

/* 平板模式指示器 */
.tablet-mode-indicator {
  position: fixed;
  bottom: 8px;
  left: 8px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(33, 150, 243, 0.9);
  color: white;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.monitor-main {
  flex: 1;
  min-width: 0;
}

.device-monitor-card {
  height: 100%;
}

.device-monitor-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 12px;
}

/* 右侧机器人面板 */
.robot-panel {
  width: 240px;
  flex-shrink: 0;
}

.robot-panel-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.robot-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--va-background-border);
  font-size: 14px;
  font-weight: 600;
}

.robot-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px !important;
}

.no-robots {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  color: var(--va-text-secondary);
  font-size: 13px;
}

.robot-list {
  display: flex;
  flex-direction: column;
}

.toolbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--va-background-border);
  margin-bottom: 12px;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.map-select {
  min-width: 250px;
}

.task-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-input {
  width: 150px;
}

.execute-btn {
  width: 48px;
  height: 48px;
  font-size: 24px;
}

.clear-btn {
  width: 48px;
  height: 48px;
  font-size: 24px;
}

.arrow-icon {
  font-size: 16px;
  color: var(--va-text-secondary);
}

.separator {
  font-size: 16px;
  color: var(--va-text-secondary);
  font-weight: bold;
}

.toolbar-group {
  display: flex;
}

.stats-text {
  font-size: 13px;
  color: var(--va-text-secondary);
}

.map-canvas-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #fafafa;
}

.topo-canvas {
  width: 100%;
  height: 100%;
  cursor: grab;
}

.topo-canvas:active {
  cursor: grabbing;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--va-text-secondary);
  gap: 16px;
}

.empty-state p {
  font-size: 16px;
}

/* 重定位面板样式 */
.relocate-panel {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--va-background-primary);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 240px;
  z-index: 100;
  overflow: hidden;
}

.relocate-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #2196f3, #1976d2);
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.relocate-panel-body {
  padding: 16px;
}

.relocate-info {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--va-background-secondary);
  border-radius: 8px;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.info-label {
  font-weight: 600;
  color: var(--va-text-secondary);
  font-size: 12px;
}

.info-value {
  font-family: 'Consolas', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--va-primary);
}

.angle-selector-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.angle-label {
  font-size: 12px;
  color: var(--va-text-secondary);
  margin-bottom: 8px;
}

.angle-disk-container {
  width: 120px;
  height: 120px;
}

.angle-disk {
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.angle-click-area {
  cursor: crosshair;
}

.angle-click-area:hover {
  fill: rgba(33, 150, 243, 0.1);
}

.angle-value {
  font-size: 18px;
  font-weight: 700;
  color: #f44336;
  margin: 8px 0;
}

.angle-shortcuts {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.relocate-panel-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--va-background-border);
  justify-content: flex-end;
}

/* 重定位模式下的画布样式 */
.topo-canvas.relocate-mode {
  cursor: crosshair !important;
}

/* 选中机器人操作面板样式 */
.selected-robot-panel {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 160px;
  z-index: 100;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.selected-robot-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--va-primary);
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.selected-robot-header span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-robot-header .close-btn {
  min-width: 24px !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
}

.selected-robot-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.selected-robot-actions .action-btn {
  width: 100%;
}

/* 库位选择器样式 */
.location-selector-overlay {
  position: fixed;
  transform: translate(-50%, 0);
  z-index: 1000;
  pointer-events: auto;
}

.location-selector-content {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  min-width: 220px;
  border: 2px solid #2196f3;
  animation: location-selector-appear 0.15s ease-out;
  overflow: hidden;
}

@keyframes location-selector-appear {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.location-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #2196f3, #1976d2);
  color: white;
}

.location-selector-title {
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.location-selector-close {
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.location-selector-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.location-selector-list {
  padding: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.location-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 8px;
  border-left: 4px solid;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.location-item:last-child {
  margin-bottom: 0;
}

.location-item:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.location-item.active {
  background: #f5f5f5;
}

.location-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.location-item.disabled:hover {
  transform: none;
}

.location-item-layer {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  min-width: 40px;
  text-align: center;
  padding: 4px 8px;
  background: #f0f0f0;
  border-radius: 4px;
}

.location-item-code {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.location-item-status {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
}

.location-selector-hint {
  font-size: 11px;
  color: #666;
  text-align: center;
  padding: 10px;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
}

/* 节点选择时的样式 */
.nodes g.location-selecting rect,
.nodes g.location-selecting circle {
  filter: drop-shadow(0 0 12px #2196f3);
}
</style>

<!-- 平板模式全局样式 - 非 scoped -->
<style>
/* 平板模式下隐藏左侧菜单栏 */
.tablet-mode .app-layout__sidebar,
.tablet-mode .sidebar,
.tablet-mode aside[class*='sidebar'],
.tablet-mode .va-sidebar {
  display: none !important;
}

/* 平板模式下隐藏顶部导航栏 */
.tablet-mode .app-layout__navbar,
.tablet-mode .navbar,
.tablet-mode header[class*='navbar'],
.tablet-mode nav[class*='navbar'],
.tablet-mode .va-navbar {
  display: none !important;
}

/* 平板模式下隐藏底部区域 */
.tablet-mode .app-layout__footer,
.tablet-mode footer,
.tablet-mode .footer {
  display: none !important;
}

/* 平板模式下调整主内容区域 */
.tablet-mode .app-layout__main,
.tablet-mode main,
.tablet-mode .main-content,
.tablet-mode .app-layout {
  margin-left: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* 隐藏面包屑导航 */
.tablet-mode .va-breadcrumbs,
.tablet-mode .breadcrumbs,
.tablet-mode nav[class*='breadcrumbs'] {
  display: none !important;
}
</style>