diff --git a/src/api/device/fenceDevice.js b/src/api/device/fenceDevice.js
new file mode 100644
index 0000000..458510a
--- /dev/null
+++ b/src/api/device/fenceDevice.js
@@ -0,0 +1,115 @@
+import request from '@/utils/request'
+
+export function listFence(query) {
+  return request({
+    url: '/fence/device/fence/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getFence(id) {
+  return request({
+    url: '/fence/device/fence/' + id,
+    method: 'get'
+  })
+}
+
+export function addFence(data) {
+  return request({
+    url: '/fence/device/fence',
+    method: 'post',
+    data
+  })
+}
+
+export function updateFence(data) {
+  return request({
+    url: '/fence/device/fence',
+    method: 'put',
+    data
+  })
+}
+
+export function removeFence(ids) {
+  return request({
+    url: '/fence/device/fence/' + ids,
+    method: 'delete'
+  })
+}
+
+export function changeFenceStatus(id, status) {
+  return request({
+    url: '/fence/device/fence/' + id + '/status/' + status,
+    method: 'put'
+  })
+}
+
+export function listFenceDeviceOptions(query) {
+  return request({
+    url: '/fence/device/device/options',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getFenceMonitorOverview() {
+  return request({
+    url: '/fence/device/monitor/overview',
+    method: 'get'
+  })
+}
+
+export function listFenceMonitorFences(query) {
+  return request({
+    url: '/fence/device/monitor/fences',
+    method: 'get',
+    params: query
+  })
+}
+
+export function listFenceMonitorDevices(query) {
+  return request({
+    url: '/fence/device/monitor/devices',
+    method: 'get',
+    params: query
+  })
+}
+
+export function setFenceMonitorStateNormal(data) {
+  return request({
+    url: '/fence/device/monitor/state/normal',
+    method: 'put',
+    data
+  })
+}
+
+export function listFenceAlarms(query) {
+  return request({
+    url: '/fence/device/alarm/list',
+    method: 'get',
+    params: query
+  })
+}
+export function getTodayAlarmDeviceCount() {
+  return request({
+    url: '/fence/device/alarm/today/device-count',
+    method: 'get'
+  })
+}
+
+export function handleFenceAlarm(id, data) {
+  return request({
+    url: '/fence/device/alarm/' + id + '/handle',
+    method: 'put',
+    data
+  })
+}
+
+export function executeFenceScan() {
+  return request({
+    url: '/fence/device/scan/execute',
+    method: 'post'
+  })
+}
+
diff --git a/src/lang/fence-messages.js b/src/lang/fence-messages.js
new file mode 100644
index 0000000..211ec83
--- /dev/null
+++ b/src/lang/fence-messages.js
@@ -0,0 +1,257 @@
+const fenceDrawZh = {
+  toolbar: {
+    actions: { title: '取消绘制', text: '取消' },
+    finish: { title: '完成绘制', text: '完成' },
+    undo: { title: '删除最后一个点', text: '撤销' },
+    buttons: { polygon: '绘制围栏（多边形）', rectangle: '绘制围栏（矩形）', circle: '绘制围栏（圆形）' }
+  },
+  handlers: {
+    circle: { start: '点击并拖拽，绘制圆形围栏' },
+    rectangle: { start: '点击并拖拽，绘制矩形围栏' },
+    simpleShape: { end: '释放鼠标完成绘制' },
+    polygon: { start: '点击地图开始绘制围栏', cont: '点击继续绘制围栏', end: '点击起点完成绘制' }
+  },
+  edit: {
+    actions: { saveTitle: '保存修改', saveText: '保存', cancelTitle: '取消编辑', cancelText: '取消' },
+    buttons: { edit: '编辑围栏', editDisabled: '没有可编辑的围栏', remove: '删除围栏', removeDisabled: '没有可删除的围栏' },
+    handlers: { editText: '拖拽控制点调整围栏', editSubtext: '点击取消可放弃修改', removeText: '点击围栏进行删除' }
+  }
+}
+
+const fenceDrawEn = {
+  toolbar: {
+    actions: { title: 'Cancel drawing', text: 'Cancel' },
+    finish: { title: 'Finish drawing', text: 'Finish' },
+    undo: { title: 'Delete last point', text: 'Undo' },
+    buttons: { polygon: 'Draw polygon fence', rectangle: 'Draw rectangle fence', circle: 'Draw circular fence' }
+  },
+  handlers: {
+    circle: { start: 'Click and drag to draw a circular fence' },
+    rectangle: { start: 'Click and drag to draw a rectangular fence' },
+    simpleShape: { end: 'Release mouse to finish drawing' },
+    polygon: { start: 'Click map to start drawing fence', cont: 'Click to continue drawing', end: 'Click first point to finish' }
+  },
+  edit: {
+    actions: { saveTitle: 'Save changes', saveText: 'Save', cancelTitle: 'Cancel editing', cancelText: 'Cancel' },
+    buttons: { edit: 'Edit fence', editDisabled: 'No editable fence', remove: 'Delete fence', removeDisabled: 'No removable fence' },
+    handlers: { editText: 'Drag handles to adjust fence', editSubtext: 'Click cancel to discard changes', removeText: 'Click a fence to remove' }
+  }
+}
+
+const fenceDrawFr = {
+  toolbar: {
+    actions: { title: 'Annuler le tracé', text: 'Annuler' },
+    finish: { title: 'Terminer le tracé', text: 'Terminer' },
+    undo: { title: 'Supprimer le dernier point', text: 'Annuler' },
+    buttons: { polygon: 'Tracer une clôture polygonale', rectangle: 'Tracer une clôture rectangulaire', circle: 'Tracer une clôture circulaire' }
+  },
+  handlers: {
+    circle: { start: 'Cliquez et faites glisser pour tracer une clôture circulaire' },
+    rectangle: { start: 'Cliquez et faites glisser pour tracer une clôture rectangulaire' },
+    simpleShape: { end: 'Relâchez la souris pour terminer le tracé' },
+    polygon: { start: 'Cliquez sur la carte pour commencer le tracé', cont: 'Cliquez pour continuer le tracé', end: 'Cliquez sur le point de départ pour terminer' }
+  },
+  edit: {
+    actions: { saveTitle: 'Enregistrer les modifications', saveText: 'Enregistrer', cancelTitle: 'Annuler la modification', cancelText: 'Annuler' },
+    buttons: { edit: 'Modifier la clôture', editDisabled: 'Aucune clôture modifiable', remove: 'Supprimer la clôture', removeDisabled: 'Aucune clôture à supprimer' },
+    handlers: { editText: 'Faites glisser les poignées pour ajuster la clôture', editSubtext: 'Cliquez sur annuler pour ignorer les modifications', removeText: 'Cliquez sur une clôture pour la supprimer' }
+  }
+}
+
+const fenceDrawEs = {
+  toolbar: {
+    actions: { title: 'Cancelar dibujo', text: 'Cancelar' },
+    finish: { title: 'Finalizar dibujo', text: 'Finalizar' },
+    undo: { title: 'Eliminar el último punto', text: 'Deshacer' },
+    buttons: { polygon: 'Dibujar cerca poligonal', rectangle: 'Dibujar cerca rectangular', circle: 'Dibujar cerca circular' }
+  },
+  handlers: {
+    circle: { start: 'Haz clic y arrastra para dibujar una cerca circular' },
+    rectangle: { start: 'Haz clic y arrastra para dibujar una cerca rectangular' },
+    simpleShape: { end: 'Suelta el ratón para terminar el dibujo' },
+    polygon: { start: 'Haz clic en el mapa para comenzar', cont: 'Haz clic para continuar', end: 'Haz clic en el primer punto para finalizar' }
+  },
+  edit: {
+    actions: { saveTitle: 'Guardar cambios', saveText: 'Guardar', cancelTitle: 'Cancelar edición', cancelText: 'Cancelar' },
+    buttons: { edit: 'Editar cerca', editDisabled: 'No hay cercas editables', remove: 'Eliminar cerca', removeDisabled: 'No hay cercas para eliminar' },
+    handlers: { editText: 'Arrastra los puntos de control para ajustar la cerca', editSubtext: 'Haz clic en cancelar para descartar cambios', removeText: 'Haz clic en una cerca para eliminarla' }
+  }
+}
+
+const fenceDrawPt = {
+  toolbar: {
+    actions: { title: 'Cancelar desenho', text: 'Cancelar' },
+    finish: { title: 'Finalizar desenho', text: 'Finalizar' },
+    undo: { title: 'Remover o último ponto', text: 'Desfazer' },
+    buttons: { polygon: 'Desenhar cerca poligonal', rectangle: 'Desenhar cerca retangular', circle: 'Desenhar cerca circular' }
+  },
+  handlers: {
+    circle: { start: 'Clique e arraste para desenhar uma cerca circular' },
+    rectangle: { start: 'Clique e arraste para desenhar uma cerca retangular' },
+    simpleShape: { end: 'Solte o mouse para concluir o desenho' },
+    polygon: { start: 'Clique no mapa para começar', cont: 'Clique para continuar', end: 'Clique no primeiro ponto para finalizar' }
+  },
+  edit: {
+    actions: { saveTitle: 'Salvar alterações', saveText: 'Salvar', cancelTitle: 'Cancelar edição', cancelText: 'Cancelar' },
+    buttons: { edit: 'Editar cerca', editDisabled: 'Nenhuma cerca editável', remove: 'Excluir cerca', removeDisabled: 'Nenhuma cerca para excluir' },
+    handlers: { editText: 'Arraste os pontos de controle para ajustar a cerca', editSubtext: 'Clique em cancelar para descartar alterações', removeText: 'Clique em uma cerca para removê-la' }
+  }
+}
+
+const fenceDrawRu = {
+  toolbar: {
+    actions: { title: 'Отменить рисование', text: 'Отмена' },
+    finish: { title: 'Завершить рисование', text: 'Готово' },
+    undo: { title: 'Удалить последнюю точку', text: 'Отменить' },
+    buttons: { polygon: 'Нарисовать полигон', rectangle: 'Нарисовать прямоугольник', circle: 'Нарисовать круг' }
+  },
+  handlers: {
+    circle: { start: 'Нажмите и перетащите, чтобы нарисовать круг' },
+    rectangle: { start: 'Нажмите и перетащите, чтобы нарисовать прямоугольник' },
+    simpleShape: { end: 'Отпустите мышь, чтобы завершить рисование' },
+    polygon: { start: 'Нажмите на карту, чтобы начать рисование', cont: 'Нажмите, чтобы продолжить', end: 'Нажмите на первую точку, чтобы завершить' }
+  },
+  edit: {
+    actions: { saveTitle: 'Сохранить изменения', saveText: 'Сохранить', cancelTitle: 'Отменить редактирование', cancelText: 'Отмена' },
+    buttons: { edit: 'Редактировать геозону', editDisabled: 'Нет геозон для редактирования', remove: 'Удалить геозону', removeDisabled: 'Нет геозон для удаления' },
+    handlers: { editText: 'Перетаскивайте точки, чтобы изменить геозону', editSubtext: 'Нажмите отмена, чтобы отклонить изменения', removeText: 'Нажмите на геозону, чтобы удалить' }
+  }
+}
+const fenceZh = {
+  title: '围栏设备管理',
+  description: '围栏、设备状态和告警联动放在同一工作台里，支持地图监控、地图绘制和告警处理。',
+  tabs: { monitor: '地图监控', fence: '围栏管理', alarm: '告警中心' },
+  sidebar: {
+    title: '围栏设备',
+    searchPlaceholder: '搜索 SN / 名称 / 地址',
+    fenceSearchPlaceholder: '选择围栏名称',
+    statusPlaceholder: '全部状态',
+    statusAll: '全部状态',
+    statusAlert: '告警',
+    statusBoundary: '边界',
+    statusNormal: '正常',
+    unbound: '未关联围栏'
+  },
+  device: { normal: '正常', boundary: '边界', outside: '围栏外', alert: '告警' },
+  overview: { online: '监控设备', normalDevice: '正常设备', alertDevice: '告警设备', activeFence: '启用围栏', openAlarm: '未处理告警', todayAlarm: '今日告警' },
+  query: { keyword: '关键字', fenceName: '围栏名称', status: '状态', shapeType: '图形类型', alarmType: '告警类型', handleStatus: '处理状态', alarmLevel: '告警级别', alarmTime: '告警时间' },
+  placeholder: { keyword: '请输入围栏名称或备注', fenceName: '请输入围栏名称', monitorKeyword: '请输入设备 SN / 名称 / 地址', alarmKeyword: '请输入告警内容', alarmSn: '请输入设备 SN', alarmFenceName: '请输入围栏名称', alarmDeviceName: '请输入设备名称', alarmTimeStart: '开始时间', alarmTimeEnd: '结束时间' },
+  button: { add: '新增围栏', edit: '编辑', remove: '删除', scan: '执行扫描', refresh: '刷新', refreshAll: '刷新全局', save: '保存', handle: '处理告警', locate: '定位', more: '更多', preview: '预览', resetEditor: '重置编辑器', selectDevice: '选择设备', markNormal: '设为正常', expandMap: '放大地图', restoreMap: '还原地图' },
+  status: { enabled: '启用', disabled: '停用' },
+  shape: { circle: '圆形', rect: '矩形', polygon: '多边形' },
+  alarmRule: { enter: '进入', exit: '离开', inside: '范围内', outside: '范围外', boundary: '边界', exitRecommended: '离开告警（防丢推荐）', enterExit: '进入+离开', enterOnly: '仅进入' },
+  schedule: { all: '全天', custom: '自定义' },
+  level: { critical: '严重', warning: '警告', info: '提示' },
+  alarmStatus: { open: '未处理', acked: '已确认', closed: '已关闭' },
+  monitor: { realtimeTitle: '实时事件' },
+  map: { monitorHint: '地图显示当前设备、围栏和最新告警位置', providerGoogle: '谷歌地图', providerAmap: '高德地图', providerMaptiler: 'MapTiler' },
+  editor: { help: '在下方地图里使用绘图工具画圆、画矩形、画多边形，图形会同步到当前围栏。', createHint: '新增围栏模式，可直接开始绘制。', editHint: '编辑模式已加载，地图上的图形就是当前围栏。', previewHint: '正在展示围栏：{name}', idleHint: '先绘制围栏，或从下方列表选择已有围栏。', syncShape: '同步图形', clearShape: '清空图形' },
+  draw: fenceDrawZh,
+  form: { addTitle: '新增围栏', editTitle: '编辑围栏', name: '围栏名称', shapeType: '几何类型', alarmRules: '告警策略', scheduleType: '生效时间', scheduleStart: '开始时间', scheduleEnd: '结束时间', alarmCountdownMinutes: '告警倒计时(小时)', remark: '围栏备注', centerLat: '中心纬度', centerLng: '中心经度', radiusMeter: '半径(米)', geomWkt: '几何 WKT', shapeDataJson: '图形 JSON', deviceIds: '绑定设备', devicePlaceholder: '请选择需要监控的设备', deviceSearchPlaceholder: '搜索 SN / 设备名称 / 地址', timePlaceholder: 'HH:mm:ss' },
+  dialog: { deviceTitle: '选择绑定设备', deviceHint: '仅显示当前企业下已启用的设备，双击行可快速选择。', selectedCount: '已选择 {count} 台设备', alarmLocateTitle: '设备位置定位' },
+  table: { name: '围栏名称', shape: '图形', rules: '告警策略', status: '状态', actions: '操作', sn: '设备 SN', alias: '设备名称', lat: '纬度', lng: '经度', coordinates: '经纬度', address: '位置地址', locationTime: '更新时间', fenceStatus: '围栏状态', lastAlarm: '最近告警', alarmMessage: '告警内容', alarmTime: '告警时间', alarmType: '告警类型', alarmLevel: '告警级别' },
+  message: { loadFailed: '围栏工作台加载失败', mapConfigLoadFailed: '地图配置加载失败', nameRequired: '请先填写围栏名称', ruleRequired: '请至少选择一项告警规则', circleRequired: '圆形围栏需要中心点和半径', shapeRequired: '请先在地图上绘制围栏图形', shapeSynced: '图形已同步到表单', saveSuccess: '保存成功', removeSuccess: '删除成功', confirmRemove: '确认删除选中的围栏吗？', selectFence: '请先选择围栏', handleSuccess: '告警处理成功', markNormalSuccess: '设备状态已设为正常', markNormalFailed: '当前状态无法设为正常', noMonitorDevice: '当前没有可监控设备', noFenceData: '当前没有围栏数据', noAlarmData: '当前没有告警数据', scanSuccessDetail: '扫描完成，设备 {deviceCount} 个，判定 {evaluatedCount} 条，新增告警 {alarmCount} 条。', alarmLocationMissing: '当前告警缺少经纬度，无法定位。', devicePointLoadFailed: '设备坐标加载失败，已先展示围栏' }
+}
+
+const fenceEn = {
+  title: 'Fence Device Management',
+  description: 'Manage fences, device states, and alarms in one workspace with map monitoring and map drawing.',
+  tabs: { monitor: 'Monitor', fence: 'Fences', alarm: 'Alarms' },
+  sidebar: {
+    title: 'Fence Devices',
+    searchPlaceholder: 'Search SN / name / address',
+    fenceSearchPlaceholder: 'Select Fence Name',
+    statusPlaceholder: 'All Statuses',
+    statusAll: 'All Statuses',
+    statusAlert: 'Alert',
+    statusBoundary: 'Boundary',
+    statusNormal: 'Normal',
+    unbound: 'No Fence Linked'
+  },
+  device: { normal: 'Normal', boundary: 'Boundary', outside: 'Outside', alert: 'Alert' },
+  overview: { online: 'Monitored Devices', normalDevice: 'Normal Devices', alertDevice: 'Alert Devices', activeFence: 'Active Fences', openAlarm: 'Open Alarms', todayAlarm: 'Today Alarms' },
+  query: { keyword: 'Keyword', fenceName: 'Fence Name', status: 'Status', shapeType: 'Shape', alarmType: 'Alarm Type', handleStatus: 'Handle Status', alarmLevel: 'Alarm Level', alarmTime: 'Alarm Time' },
+  placeholder: { keyword: 'Enter fence name or remark', fenceName: 'Enter fence name', monitorKeyword: 'Enter device SN / name / address', alarmKeyword: 'Enter alarm content', alarmSn: 'Enter device SN', alarmFenceName: 'Enter fence name', alarmDeviceName: 'Enter device name', alarmTimeStart: 'Start time', alarmTimeEnd: 'End time' },
+  button: { add: 'Add Fence', edit: 'Edit', remove: 'Delete', scan: 'Run Scan', refresh: 'Refresh', refreshAll: 'Refresh All', save: 'Save', handle: 'Handle', locate: 'Locate', more: 'More', preview: 'Preview', resetEditor: 'Reset Editor', selectDevice: 'Select Devices', markNormal: 'Set Normal', expandMap: 'Expand Map', restoreMap: 'Restore Map' },
+  status: { enabled: 'Enabled', disabled: 'Disabled' },
+  shape: { circle: 'Circle', rect: 'Rectangle', polygon: 'Polygon' },
+  alarmRule: { enter: 'Enter', exit: 'Exit', inside: 'Inside', outside: 'Outside', boundary: 'Boundary', exitRecommended: 'Exit Alert (Recommended)', enterExit: 'Enter + Exit', enterOnly: 'Enter Only' },
+  schedule: { all: 'All Day', custom: 'Custom' },
+  level: { critical: 'Critical', warning: 'Warning', info: 'Info' },
+  alarmStatus: { open: 'Open', acked: 'Acknowledged', closed: 'Closed' },
+  monitor: { realtimeTitle: 'Realtime Events' },
+  map: { monitorHint: 'The map shows devices, fences, and the latest alarm location', providerGoogle: 'Google Maps', providerAmap: 'Amap', providerMaptiler: 'MapTiler' },
+  editor: { help: 'Use the drawing tools below to draw circles, rectangles, and polygons for the current fence.', createHint: 'Create mode is ready. Start drawing on the map.', editHint: 'Edit mode loaded. The map shape is the current fence.', previewHint: 'Showing fence: {name}', idleHint: 'Draw a fence first or choose one from the list below.', syncShape: 'Sync Shape', clearShape: 'Clear Shape' },
+  draw: fenceDrawEn,
+  form: { addTitle: 'Add Fence', editTitle: 'Edit Fence', name: 'Fence Name', shapeType: 'Geometry Type', alarmRules: 'Alarm Rules', scheduleType: 'Schedule', scheduleStart: 'Start Time', scheduleEnd: 'End Time', alarmCountdownMinutes: 'Alarm Countdown (hour)', remark: 'Fence Remark', centerLat: 'Center Lat', centerLng: 'Center Lng', radiusMeter: 'Radius (m)', geomWkt: 'Geometry WKT', shapeDataJson: 'Shape JSON', deviceIds: 'Bind Devices', devicePlaceholder: 'Select devices', deviceSearchPlaceholder: 'Search SN / device name / address', timePlaceholder: 'HH:mm:ss' },
+  dialog: { deviceTitle: 'Select Devices', deviceHint: 'Only active devices in the current business are shown. Double-click a row to select it quickly.', selectedCount: '{count} devices selected', alarmLocateTitle: 'Device Location' },
+  table: { name: 'Fence Name', shape: 'Shape', rules: 'Rules', status: 'Status', actions: 'Actions', sn: 'Device SN', alias: 'Device Name', lat: 'Latitude', lng: 'Longitude', coordinates: 'Coordinates', address: 'Address', locationTime: 'Update Time', fenceStatus: 'Fence Status', lastAlarm: 'Last Alarm', alarmMessage: 'Alarm Message', alarmTime: 'Alarm Time', alarmType: 'Alarm Type', alarmLevel: 'Alarm Level' },
+  message: { loadFailed: 'Failed to load fence workspace', mapConfigLoadFailed: 'Failed to load map config', nameRequired: 'Fence name is required', ruleRequired: 'Select at least one alarm rule', circleRequired: 'Circle fence needs center and radius', shapeRequired: 'Draw the fence shape on the map first', shapeSynced: 'The shape has been synced to the form', saveSuccess: 'Saved successfully', removeSuccess: 'Deleted successfully', confirmRemove: 'Delete the selected fences?', selectFence: 'Select fences first', handleSuccess: 'Alarm handled successfully', markNormalSuccess: 'State has been set to normal', markNormalFailed: 'Unable to set current state to normal', noMonitorDevice: 'No device available', noFenceData: 'No fence data', noAlarmData: 'No alarm data', scanSuccessDetail: 'Scan finished: {deviceCount} devices, {evaluatedCount} evaluations, {alarmCount} new alarms.', alarmLocationMissing: 'This alarm has no coordinates and cannot be located.', devicePointLoadFailed: 'Failed to load device coordinates, fence is shown first.' }
+}
+
+
+const fenceFr = {
+  ...fenceEn,
+  tabs: { monitor: 'Surveillance', fence: 'Clôtures', alarm: 'Alertes' },
+  editor: {
+    ...fenceEn.editor,
+    help: 'Utilisez les outils ci-dessous pour dessiner des cercles, rectangles et polygones pour la clôture actuelle.',
+    createHint: 'Mode création activé. Commencez à dessiner sur la carte.',
+    editHint: 'Mode édition chargé. La forme affichée correspond à la clôture en cours.',
+    previewHint: 'Clôture affichée : {name}',
+    idleHint: 'Dessinez d’abord une clôture ou choisissez-en une dans la liste.'
+  },
+  draw: fenceDrawFr
+}
+
+const fenceEs = {
+  ...fenceEn,
+  tabs: { monitor: 'Monitoreo', fence: 'Cercas', alarm: 'Alarmas' },
+  editor: {
+    ...fenceEn.editor,
+    help: 'Usa las herramientas de dibujo para crear círculos, rectángulos y polígonos para la cerca actual.',
+    createHint: 'Modo creación listo. Comienza a dibujar en el mapa.',
+    editHint: 'Modo edición cargado. La forma del mapa corresponde a la cerca actual.',
+    previewHint: 'Cerca mostrada: {name}',
+    idleHint: 'Primero dibuja una cerca o elige una de la lista.'
+  },
+  draw: fenceDrawEs
+}
+
+const fencePt = {
+  ...fenceEn,
+  tabs: { monitor: 'Monitoramento', fence: 'Cercas', alarm: 'Alertas' },
+  editor: {
+    ...fenceEn.editor,
+    help: 'Use as ferramentas para desenhar círculos, retângulos e polígonos para a cerca atual.',
+    createHint: 'Modo de criação pronto. Comece a desenhar no mapa.',
+    editHint: 'Modo de edição carregado. A forma no mapa é a cerca atual.',
+    previewHint: 'Cerca exibida: {name}',
+    idleHint: 'Desenhe uma cerca primeiro ou escolha uma da lista.'
+  },
+  draw: fenceDrawPt
+}
+
+const fenceRu = {
+  ...fenceEn,
+  tabs: { monitor: 'Мониторинг', fence: 'Геозоны', alarm: 'Тревоги' },
+  editor: {
+    ...fenceEn.editor,
+    help: 'Используйте инструменты рисования, чтобы создать круг, прямоугольник или полигон для текущей геозоны.',
+    createHint: 'Режим создания готов. Начните рисовать на карте.',
+    editHint: 'Режим редактирования загружен. Фигура на карте — текущая геозона.',
+    previewHint: 'Показана геозона: {name}',
+    idleHint: 'Сначала нарисуйте геозону или выберите ее из списка.'
+  },
+  draw: fenceDrawRu
+}
+const fenceMessages = {
+  'zh-CN': { fenceDevice: fenceZh },
+  'en-US': { fenceDevice: fenceEn },
+  'fr-FR': { fenceDevice: fenceFr },
+  'es-ES': { fenceDevice: fenceEs },
+  'pt-BR': { fenceDevice: fencePt },
+  'ru-RU': { fenceDevice: fenceRu }
+}
+
+export default fenceMessages
diff --git a/src/utils/loadLeafletDraw.js b/src/utils/loadLeafletDraw.js
new file mode 100644
index 0000000..84f0893
--- /dev/null
+++ b/src/utils/loadLeafletDraw.js
@@ -0,0 +1,73 @@
+import { loadLeaflet } from "@/utils/loadLeaflet";
+
+let leafletDrawPromise = null;
+
+function ensureLeafletDrawCss() {
+  const styleId = "geotag-leaflet-draw-style";
+  if (document.getElementById(styleId)) {
+    return;
+  }
+  const link = document.createElement("link");
+  link.id = styleId;
+  link.rel = "stylesheet";
+  link.href = "https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css";
+  document.head.appendChild(link);
+}
+
+export function loadLeafletDraw() {
+  if (typeof window === "undefined") {
+    return Promise.reject(new Error("Current environment does not support Leaflet.Draw"));
+  }
+
+  if (window.L && window.L.Control && window.L.Control.Draw) {
+    return Promise.resolve(window.L);
+  }
+
+  if (leafletDrawPromise) {
+    return leafletDrawPromise;
+  }
+
+  leafletDrawPromise = loadLeaflet().then((L) => {
+    if (L && L.Control && L.Control.Draw) {
+      return L;
+    }
+
+    return new Promise((resolve, reject) => {
+      ensureLeafletDrawCss();
+
+      const scriptId = "geotag-leaflet-draw-script";
+      const existingScript = document.getElementById(scriptId);
+
+      const handleResolve = () => {
+        if (window.L && window.L.Control && window.L.Control.Draw) {
+          resolve(window.L);
+          return;
+        }
+        leafletDrawPromise = null;
+        reject(new Error("Leaflet.Draw script failed to load"));
+      };
+
+      const handleError = () => {
+        leafletDrawPromise = null;
+        reject(new Error("Leaflet.Draw script failed to load"));
+      };
+
+      if (existingScript) {
+        existingScript.addEventListener("load", handleResolve, { once: true });
+        existingScript.addEventListener("error", handleError, { once: true });
+        return;
+      }
+
+      const script = document.createElement("script");
+      script.id = scriptId;
+      script.async = true;
+      script.defer = true;
+      script.src = "https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js";
+      script.onload = handleResolve;
+      script.onerror = handleError;
+      document.head.appendChild(script);
+    });
+  });
+
+  return leafletDrawPromise;
+}
diff --git a/src/views/device/device/history/index.vue b/src/views/device/device/history/index.vue
new file mode 100644
index 0000000..a4b6ab0
--- /dev/null
+++ b/src/views/device/device/history/index.vue
@@ -0,0 +1,462 @@
+<template>
+  <div class="app-container history-trajectory-page" ref="pageRoot">
+    <div class="history-trajectory-layout" :style="{ height: layoutHeight + 'px' }">
+      <section class="panel left">
+        <div class="panel-title">{{ $t("device.trajectory.page.title.deviceList") }}</div>
+
+        <el-form :model="query" class="query-form" @submit.native.prevent>
+          <el-form-item class="query-compact-item">
+            <el-input
+              v-model="query.sn"
+              size="mini"
+              clearable
+              :placeholder="$t('device.trajectory.page.placeholder.sn')"
+              @keyup.enter.native="searchList"
+            />
+          </el-form-item>
+          <el-form-item class="query-compact-item">
+            <el-input
+              v-model="query.alias"
+              size="mini"
+              clearable
+              :placeholder="$t('device.trajectory.page.placeholder.alias')"
+              @keyup.enter.native="searchList"
+            />
+          </el-form-item>
+          <el-form-item class="query-compact-item">
+            <el-input
+              v-model="query.address"
+              size="mini"
+              clearable
+              :placeholder="$t('device.placeholder.lastAddress')"
+              @keyup.enter.native="searchList"
+            />
+          </el-form-item>
+          <el-form-item class="query-compact-item">
+            <el-date-picker
+              v-model="range"
+              size="mini"
+              type="datetimerange"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              :start-placeholder="$t('device.trajectory.filter.startPlaceholder')"
+              :end-placeholder="$t('device.trajectory.filter.endPlaceholder')"
+              :clearable="true"
+              class="range"
+            />
+          </el-form-item>
+
+          <div class="query-actions">
+            <el-button type="primary" size="mini" @click="searchList">{{ $t("device.trajectory.page.button.search") }}</el-button>
+            <el-button size="mini" @click="resetList">{{ $t("device.trajectory.page.button.reset") }}</el-button>
+          </div>
+        </el-form>
+
+        <div class="device-list" v-loading="loadingList">
+          <el-empty v-if="!loadingList && !items.length" :description="$t('device.trajectory.page.empty.deviceList')" :image-size="66" />
+          <el-scrollbar v-else class="device-scroll">
+            <div
+              v-for="item in items"
+              :key="item.sn"
+              class="device-item"
+              :class="{ active: currentItem && currentItem.sn === item.sn }"
+              @click="selectItem(item)"
+            >
+              <div class="device-item__top">
+                <span>{{ item.alias || "-" }}</span>
+              </div>
+              <div class="device-item__line">{{ $t("device.table.sn") }}: {{ item.sn || "-" }}</div>
+              <div class="device-item__line">{{ $t("device.table.lastAddress") }}: {{ item.address || "-" }}</div>
+              <div class="device-item__line">{{ $t("device.trajectory.filter.locationTime") }}: {{ formatTime(item.locationTime) }}</div>
+            </div>
+          </el-scrollbar>
+        </div>
+
+        <div class="panel-pagination" v-show="total > 0">
+          <pagination
+            :total="total"
+            :page.sync="query.pageNum"
+            :limit.sync="query.pageSize"
+            layout="prev, pager, next"
+            :pager-count="5"
+            :auto-scroll="false"
+            @pagination="getList"
+          />
+        </div>
+      </section>
+
+      <section class="panel right">
+        <div class="panel-title">{{ $t("device.trajectory.page.title.detail") }}</div>
+        <el-empty v-if="!currentItem" :description="$t('device.trajectory.page.empty.selectDevice')" :image-size="66" />
+        <div v-else class="detail-panel">
+          <el-table :data="detailList" border size="mini" :height="detailTableHeight" v-loading="loadingDetail">
+            <el-table-column type="index" width="50" label="#" />
+            <el-table-column :label="$t('device.table.sn')" prop="sn" min-width="160" show-overflow-tooltip />
+            <el-table-column :label="$t('device.table.lastAddress')" prop="address" min-width="220" show-overflow-tooltip />
+            <el-table-column :label="$t('device.table.coordinates')" min-width="130">
+              <template slot-scope="scope">{{ formatCoordinates(scope.row.lat, scope.row.lng) }}</template>
+            </el-table-column>
+            <el-table-column :label="$t('device.trajectory.table.time')" min-width="170">
+              <template slot-scope="scope">{{ formatTime(scope.row.locationTime) }}</template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listHistoryTrajectory, listHistoryTrajectoryDetail } from "@/api/device/deviceLocation";
+
+function getDefaultQuery() {
+  return {
+    pageNum: 1,
+    pageSize: 10,
+    sn: null,
+    alias: null,
+    address: null,
+  };
+}
+
+export default {
+  name: "DeviceHistoryTrajectoryPage",
+  data() {
+    return {
+      query: getDefaultQuery(),
+      items: [],
+      total: 0,
+      loadingList: false,
+      currentItem: null,
+      detailList: [],
+      loadingDetail: false,
+      range: [],
+      availableHeight: 760,
+    };
+  },
+  computed: {
+    layoutHeight() {
+      return Math.max(640, this.availableHeight);
+    },
+    detailTableHeight() {
+      return Math.max(360, this.layoutHeight - 120);
+    },
+  },
+  created() {
+    this.initRange();
+    this.getList();
+  },
+  mounted() {
+    this.bindViewportResize();
+  },
+  beforeDestroy() {
+    this.unbindViewportResize();
+  },
+  methods: {
+    initRange() {
+      const now = new Date();
+      const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
+      const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
+      const format = (date) => this.parseTime(date, "{y}-{m}-{d} {h}:{i}:{s}");
+      this.range = [format(start), format(end)];
+    },
+    bindViewportResize() {
+      this.updateViewportHeight();
+      if (typeof window !== "undefined") {
+        window.addEventListener("resize", this.updateViewportHeight);
+      }
+    },
+    unbindViewportResize() {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("resize", this.updateViewportHeight);
+      }
+    },
+    updateViewportHeight() {
+      if (typeof window === "undefined") return;
+      const root = this.$refs.pageRoot;
+      const rectTop = root && root.getBoundingClientRect ? root.getBoundingClientRect().top : 0;
+      const bottomGap = 12;
+      this.availableHeight = window.innerHeight - rectTop - bottomGap;
+    },
+    async getList() {
+      this.loadingList = true;
+      try {
+        const res = await listHistoryTrajectory(this.buildQueryParams());
+        const data = (res && res.data) || res || {};
+        const list = Array.isArray(data.list) ? data.list : Array.isArray(data.rows) ? data.rows : [];
+        this.items = list;
+        this.total = Number(data.total || 0);
+        if (this.items.length) {
+          if (!this.currentItem || !this.items.find((item) => item.sn === this.currentItem.sn)) {
+            await this.selectItem(this.items[0]);
+          }
+        } else {
+          this.currentItem = null;
+          this.detailList = [];
+        }
+      } catch (error) {
+        this.items = [];
+        this.total = 0;
+        this.currentItem = null;
+        this.detailList = [];
+        this.$message.error((error && error.message) || this.$t("device.trajectory.message.trajectoryLoadFailed"));
+      } finally {
+        this.loadingList = false;
+      }
+    },
+    buildQueryParams() {
+      const params = { ...this.query };
+      if (Array.isArray(this.range) && this.range.length === 2) {
+        params.startLocationTime = this.range[0];
+        params.endLocationTime = this.range[1];
+      }
+      return params;
+    },
+    searchList() {
+      this.query.pageNum = 1;
+      this.getList();
+    },
+    resetList() {
+      this.query = getDefaultQuery();
+      this.initRange();
+      this.getList();
+    },
+    async selectItem(item) {
+      this.currentItem = item;
+      await this.loadDetail();
+    },
+    async loadDetail() {
+      if (!this.currentItem || !this.currentItem.sn) {
+        this.detailList = [];
+        return;
+      }
+      this.loadingDetail = true;
+      try {
+        const res = await listHistoryTrajectoryDetail({
+          sn: this.currentItem.sn,
+          alias: this.query.alias || undefined,
+          address: this.query.address || undefined,
+          startLocationTime: this.range && this.range.length ? this.range[0] : undefined,
+          endLocationTime: this.range && this.range.length ? this.range[1] : undefined,
+        });
+        const data = (res && res.data) || res || {};
+        this.detailList = Array.isArray(data.list) ? data.list : Array.isArray(data.rows) ? data.rows : [];
+      } catch (error) {
+        this.detailList = [];
+        this.$message.error((error && error.message) || this.$t("device.trajectory.message.trajectoryLoadFailed"));
+      } finally {
+        this.loadingDetail = false;
+      }
+    },
+    formatTime(value) {
+      if (!value) {
+        return "-";
+      }
+      return this.parseTime ? this.parseTime(value, "{y}-{m}-{d} {h}:{i}:{s}") : String(value);
+    },
+    normalizeCoordinate(value, type) {
+      if (value === undefined || value === null || value === "") {
+        return null;
+      }
+      const numberValue = Number(value);
+      if (!Number.isFinite(numberValue)) {
+        return null;
+      }
+      const directLimit = type === "lat" ? 90 : 180;
+      const normalizedValue = Math.abs(numberValue) > directLimit ? numberValue / 10000000 : numberValue;
+      if (Math.abs(normalizedValue) > directLimit) {
+        return null;
+      }
+      return Number(normalizedValue.toFixed(7));
+    },
+    formatCoordinateValue(value) {
+      if (value === null || value === undefined) {
+        return "-";
+      }
+      const strValue = String(value).trim();
+      if (!strValue || strValue === "-") {
+        return "-";
+      }
+      const match = strValue.match(/^([+-]?\d+)(?:\.(\d+))?$/);
+      if (!match) {
+        return "-";
+      }
+      const integerPart = match[1];
+      const decimalPart = match[2] || "";
+      const fixedDecimal = decimalPart.slice(0, 2).padEnd(2, "0");
+      return `${integerPart}.${fixedDecimal}`;
+    },
+    formatCoordinates(lat, lng) {
+      const latNum = this.normalizeCoordinate(lat, "lat");
+      const lngNum = this.normalizeCoordinate(lng, "lng");
+      return `${this.formatCoordinateValue(latNum)} / ${this.formatCoordinateValue(lngNum)}`;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.history-trajectory-layout {
+  display: grid;
+  grid-template-columns: 320px minmax(0, 1fr);
+  gap: 14px;
+  height: 760px;
+  align-items: stretch;
+}
+
+.panel {
+  background: #fff;
+  border: 1px solid #e8edf3;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(31, 45, 61, .05);
+}
+
+.left {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.right {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2d3d;
+  padding: 12px 14px;
+  border-bottom: 1px solid #eef2f7;
+  background: linear-gradient(180deg, #f8fbff 0, #fff 100%);
+}
+
+.query-form {
+  padding: 2px 10px 0;
+}
+
+.query-form .query-compact-item {
+  margin-bottom: 4px !important;
+}
+
+.query-form :deep(.el-form-item__content) {
+  line-height: 28px !important;
+}
+
+.query-form :deep(.el-input--mini .el-input__inner) {
+  height: 28px !important;
+  line-height: 28px !important;
+  padding: 0 10px;
+}
+
+.query-form :deep(.el-input--mini .el-input__icon) {
+  line-height: 28px !important;
+}
+
+.query-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 2px;
+}
+
+.query-actions :deep(.el-button--mini) {
+  padding: 3px 8px;
+}
+
+.range {
+  width: 100%;
+}
+
+.device-list {
+  flex: 1;
+  min-height: 0;
+  padding: 0 10px 10px;
+  overflow: hidden;
+}
+
+.device-scroll {
+  height: 100%;
+}
+
+.panel-pagination {
+  flex: 0 0 auto;
+  padding: 6px 10px 8px;
+  border-top: 1px solid #eef2f7;
+  background: #fff;
+}
+
+.panel-pagination :deep(.pagination-container) {
+  margin-top: 0;
+}
+
+.panel-pagination :deep(.el-pagination) {
+  display: flex;
+  justify-content: center;
+}
+
+.device-item {
+  border: 1px solid #eef2f7;
+  border-radius: 8px;
+  padding: 10px 12px;
+  margin-bottom: 10px;
+  cursor: pointer;
+  transition: all .2s ease;
+}
+
+.device-item:hover {
+  border-color: #c6e2ff;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, .12);
+}
+
+.device-item.active {
+  border-color: #409eff;
+  background: #ecf5ff;
+}
+
+.device-item__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.device-item__line {
+  font-size: 12px;
+  line-height: 1.6;
+  color: #606266;
+}
+
+.detail-panel {
+  padding: 12px;
+  flex: 1;
+  min-height: 0;
+}
+
+.detail-panel :deep(.el-table) {
+  height: 100%;
+}
+
+@media (max-width: 1280px) {
+  .history-trajectory-layout {
+    grid-template-columns: 1fr;
+    height: auto;
+    min-height: auto;
+  }
+
+  .left,
+  .right {
+    height: auto;
+    min-height: 0;
+  }
+
+  .device-list {
+    min-height: 320px;
+  }
+}
+</style>
diff --git a/src/views/fence/device/alarmCenter.vue b/src/views/fence/device/alarmCenter.vue
new file mode 100644
index 0000000..59c0811
--- /dev/null
+++ b/src/views/fence/device/alarmCenter.vue
@@ -0,0 +1,14 @@
+<template>
+  <FenceDeviceIndex menu-mode="alarm" />
+</template>
+
+<script>
+import FenceDeviceIndex from './index.vue'
+
+export default {
+  name: 'FenceAlarmCenterPage',
+  components: {
+    FenceDeviceIndex
+  }
+}
+</script>
diff --git a/src/views/fence/device/fenceManage.vue b/src/views/fence/device/fenceManage.vue
new file mode 100644
index 0000000..99df429
--- /dev/null
+++ b/src/views/fence/device/fenceManage.vue
@@ -0,0 +1,14 @@
+<template>
+  <FenceDeviceIndex menu-mode="fence" />
+</template>
+
+<script>
+import FenceDeviceIndex from './index.vue'
+
+export default {
+  name: 'FenceManagePage',
+  components: {
+    FenceDeviceIndex
+  }
+}
+</script>
diff --git a/src/views/fence/device/index.vue b/src/views/fence/device/index.vue
new file mode 100644
index 0000000..abdfd93
--- /dev/null
+++ b/src/views/fence/device/index.vue
@@ -0,0 +1,3344 @@
+<template>
+  <div class="app-container fence-workbench" :class="{ 'fence-workbench--no-sidebar': !showSidebar }" v-loading="pageLoading">
+    <div v-if="showOverviewCards" class="kpi-grid fence-global-kpi">
+      <div class="kpi-card"><p>{{ $t('fenceDevice.overview.online') }}</p><b>{{ sidebarDisplayTotal || 0 }}</b></div>
+      <div class="kpi-card kpi-card--normal"><p>{{ $t('fenceDevice.overview.normalDevice') }}</p><b>{{ monitorNormalDeviceCount }}</b></div>
+      <div class="kpi-card kpi-card--alert"><p>{{ $t('fenceDevice.overview.alertDevice') }}</p><b>{{ monitorAlertDeviceCount }}</b></div>
+      <div class="kpi-card kpi-card--open"><p>{{ $t('fenceDevice.overview.openAlarm') }}</p><b>{{ overview.openAlarmCount || 0 }}</b></div>
+      <div class="kpi-card kpi-card--today"><p>{{ $t('fenceDevice.overview.todayAlarm') }}</p><b>{{ overview.todayAlarmCount || 0 }}</b></div>
+    </div>
+
+    <aside v-if="showSidebar" class="fence-sidebar card-shell">
+      <div class="panel-tools">
+        <el-input
+          v-model="deviceSidebarKeyword"
+          :placeholder="$t('fenceDevice.sidebar.searchPlaceholder')"
+          clearable
+          size="small"
+          class="panel-tools__field"
+        />
+        <div
+          class="panel-tools__field fence-select-wrap"
+          :class="{ 'fence-select-wrap--marquee-active': showFenceSidebarMarquee }"
+        >
+          <el-select
+            ref="fenceSidebarSelect"
+            v-model="fenceSidebarKeyword"
+            clearable
+            filterable
+            remote
+            size="small"
+            :placeholder="$t('fenceDevice.sidebar.fenceSearchPlaceholder')"
+            :loading="sidebarFenceLoading"
+            class="panel-tools__field fence-name-select"
+            :remote-method="handleFenceKeywordSearch"
+            @visible-change="handleFenceSelectVisibleChange"
+            @clear="handleFenceKeywordClear"
+          >
+            <el-option
+              v-for="item in sidebarFenceOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+              <span class="fence-option__text">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <div
+            v-if="showFenceSidebarMarquee"
+            class="fence-select-marquee"
+            :style="fenceSidebarMarqueeStyle"
+            aria-hidden="true"
+          >
+            <span class="fence-select-marquee__text">{{ fenceSidebarMarqueeText }}</span>
+          </div>
+          <span ref="fenceSidebarMarqueeMeasure" class="fence-select-marquee__measure" aria-hidden="true">
+            {{ fenceSidebarMarqueeText }}
+          </span>
+        </div>
+        <el-select
+          v-model="sidebarStatusFilter"
+          size="small"
+          :placeholder="$t('fenceDevice.sidebar.statusPlaceholder')"
+          class="panel-tools__field"
+        >
+          <el-option :label="$t('fenceDevice.sidebar.statusAll')" value="" />
+          <el-option :label="$t('fenceDevice.sidebar.statusAlert')" value="alert" />
+          <el-option :label="$t('fenceDevice.sidebar.statusNormal')" value="normal" />
+        </el-select>
+      </div>
+        <div class="device-list">
+        <div v-for="group in fenceGroupedMonitorDevices" :key="group.key" class="fence-group">
+          <button
+            v-for="(item, index) in group.devices"
+            :key="`${group.key}-${item.deviceId || index}-${index}`"
+            type="button"
+            class="device-item"
+            :class="{ 'device-item--active': isMonitorItemSelected(item) }"
+            @click="selectDevice(item)"
+          >
+            <div class="device-item__title">
+              <span>{{ item.alias || item.sn }}</span>
+              <span class="device-item__actions">
+                <span
+                  v-if="isAlertMonitorDevice(item)"
+                  class="device-item__alert-action"
+                  :class="{
+                    'device-item__alert-action--can-switch': canSetMonitorStateNormal(item),
+                    'device-item__alert-action--switching': isSettingMonitorStateNormal(item)
+                  }"
+                >
+                  <span class="device-chip device-chip--alert device-item__alert-chip">
+                    {{ getDeviceChipText(item) }}
+                  </span>
+                  <span
+                    v-if="canSetMonitorStateNormal(item)"
+                    class="device-item__normal-switch"
+                    :class="{ 'device-item__normal-switch--visible': isSettingMonitorStateNormal(item) }"
+                    @click.stop
+                  >
+                    <el-switch
+                      :value="false"
+                      :disabled="isSettingMonitorStateNormal(item)"
+                      active-color="#10b981"
+                      inactive-color="#d1d5db"
+                      @change="value => handleMonitorNormalSwitchChange(value, item)"
+                    />
+                    <span class="device-item__normal-switch-label">
+                      {{ isSettingMonitorStateNormal(item) ? '...' : $t('fenceDevice.button.markNormal') }}
+                    </span>
+                  </span>
+                </span>
+                <span
+                  v-else
+                  class="device-chip"
+                  :class="getDeviceChipClass(item)"
+                >
+                  {{ getDeviceChipText(item) }}
+                </span>
+              </span>
+            </div>
+            <div v-if="item.sn" class="device-item__meta">SN: {{ item.sn }}</div>
+            <div v-if="item.locationTime" class="device-item__meta">
+              {{ $t('fenceDevice.table.locationTime') }}: {{ formatDateTime(item.locationTime) }}
+            </div>
+          </button>
+        </div>
+        <el-empty v-if="!fenceGroupedMonitorDevices.length" :description="$t('fenceDevice.message.noMonitorDevice')" :image-size="52" />
+      </div>
+      <div v-if="sidebarDisplayTotal" class="sidebar-pagination">
+        <pagination
+          :total="sidebarDisplayTotal"
+          :page.sync="sidebarPageNum"
+          :limit.sync="sidebarPageSize"
+          layout="prev, pager, next"
+          :pager-count="5"
+          :auto-scroll="false"
+          @pagination="handleSidebarPagination"
+        />
+      </div>
+    </aside>
+
+    <section
+      class="card-shell fence-main"
+      :class="{ 'fence-main--alarm': isAlarmMenuMode, 'fence-main--fence': isFenceMenuMode, 'fence-main--monitor-only': isWorkbenchMonitorMode }"
+    >
+      <div v-if="showTabsBar" class="tabs-bar">
+        <template v-if="showTabButtons">
+          <button
+            v-for="item in tabOptions"
+            :key="item.value"
+            type="button"
+            class="tab-button"
+            :class="{ 'tab-button--active': activeTab === item.value }"
+            @click="switchTab(item.value)"
+          >
+            {{ item.label }}
+          </button>
+        </template>
+        <div v-else class="single-page-title">{{ currentPageTitle }}</div>
+        <div v-if="showMapProviderToolsInTabs" class="tabs-bar__tools">
+          <el-radio-group v-model="mapProvider" size="mini" @change="handleMapProviderChange">
+            <el-radio-button
+              v-for="item in mapProviderOptions"
+              :key="item.value"
+              :label="item.value"
+              :disabled="item.disabled"
+            >
+              {{ item.label }}
+            </el-radio-button>
+          </el-radio-group>
+          <span class="tabs-bar__provider">{{ mapProviderLabel }}</span>
+      <!--    <el-button type="warning" size="mini" icon="el-icon-video-play" @click="handleExecuteScan">{{ $t('fenceDevice.button.scan') }}</el-button> -->
+        </div>
+      </div>
+
+      <div v-show="activeTab === 'monitor'" class="view-panel monitor-view">
+        <div class="monitor-body">
+          <div class="map-block">
+            <div class="map-head">
+              <div class="map-hint-inline">
+                <span>{{ $t('fenceDevice.map.monitorHint') }}</span>
+                <strong v-if="selectedDevice">{{ selectedDevice.alias || selectedDevice.sn }}</strong>
+              </div>
+              <div v-if="showMapProviderToolsInMap" class="map-provider-tools">
+                <el-radio-group v-model="mapProvider" size="mini" @change="handleMapProviderChange">
+                  <el-radio-button
+                    v-for="item in mapProviderOptions"
+                    :key="item.value"
+                    :label="item.value"
+                    :disabled="item.disabled"
+                  >
+                    {{ item.label }}
+                  </el-radio-button>
+                </el-radio-group>
+                <span class="tabs-bar__provider">{{ mapProviderLabel }}</span>
+              </div>
+            </div>
+            <el-alert v-if="mapLoadError" :title="mapLoadError" type="warning" show-icon :closable="false" class="map-alert" />
+            <div v-show="!mapLoadError" ref="monitorMap" class="workbench-map"></div>
+          </div>
+          <aside class="event-panel">
+            <div class="panel-head panel-head--thin">
+              <h4>{{ $t('fenceDevice.monitor.realtimeTitle') }}</h4>
+            </div>
+            <ul class="event-list">
+              <li v-for="item in realtimeLogs" :key="item.id">
+                <span class="event-time">{{ formatDateTime(item.time) }}</span>
+                <div class="event-text">{{ item.text }}</div>
+              </li>
+            </ul>
+          </aside>
+        </div>
+      </div>
+
+      <div v-show="activeTab === 'fence'" class="view-panel fence-view">
+        <div class="fence-form-toolbar">
+          <div class="form-grid compact-form-grid">
+            <div>
+              <label>{{ $t('fenceDevice.form.name') }}</label>
+              <el-input v-model="fenceForm.fenceName" size="small" />
+            </div>
+            <div>
+              <label>{{ $t('fenceDevice.form.shapeType') }}</label>
+              <el-select v-model="fenceForm.shapeType" size="small" @change="handleShapeTypeChange">
+                <el-option :label="$t('fenceDevice.shape.circle')" value="circle" />
+                <el-option :label="$t('fenceDevice.shape.rect')" value="rect" />
+                <el-option :label="$t('fenceDevice.shape.polygon')" value="polygon" />
+              </el-select>
+            </div>
+            <div>
+              <label>{{ $t('fenceDevice.form.scheduleType') }}</label>
+              <el-select v-model="fenceForm.scheduleType" size="small" @change="handleScheduleTypeChange">
+                <el-option value="all" :label="$t('fenceDevice.schedule.all')" />
+                <el-option value="custom" :label="$t('fenceDevice.schedule.custom')" />
+              </el-select>
+            </div>
+            <div>
+              <label>{{ $t('fenceDevice.form.alarmRules') }}</label>
+              <el-select v-model="fenceForm.alarmRules" size="small">
+                <el-option v-for="item in alarmStrategyOptions" :key="item" :label="getAlarmRuleGroupLabel(item)" :value="item" />
+              </el-select>
+            </div>
+            <div>
+              <label>{{ $t('fenceDevice.form.alarmCountdownMinutes') }}</label>
+              <el-input-number
+                v-model="fenceForm.alarmCountdownMinutes"
+                :min="0.1"
+                :max="24"
+                :step="0.5"
+                controls-position="right"
+                size="small"
+                class="panel-tools__field"
+              />
+            </div>
+            <div class="span-2">
+              <label>{{ $t('fenceDevice.form.deviceIds') }}</label>
+              <div class="device-picker-row">
+                <el-button size="small" @click="openDeviceSelector">{{ $t('fenceDevice.button.selectDevice') }}</el-button>
+              </div>
+            </div>
+            <div v-if="fenceForm.scheduleType === 'custom'">
+              <label>{{ $t('fenceDevice.form.scheduleStart') }}</label>
+              <el-time-picker v-model="fenceForm.scheduleStartTime" value-format="HH:mm:ss" format="HH:mm:ss" size="small" :placeholder="$t('fenceDevice.form.timePlaceholder')" />
+            </div>
+            <div v-if="fenceForm.scheduleType === 'custom'">
+              <label>{{ $t('fenceDevice.form.scheduleEnd') }}</label>
+              <el-time-picker v-model="fenceForm.scheduleEndTime" value-format="HH:mm:ss" format="HH:mm:ss" size="small" :placeholder="$t('fenceDevice.form.timePlaceholder')" />
+            </div>
+          </div>
+          <div class="fence-actions-row">
+            <el-button size="mini" type="primary" @click="startCreateFence">{{ $t('fenceDevice.button.add') }}</el-button>
+            <el-button size="mini" @click="resetEditor">{{ $t('fenceDevice.button.resetEditor') }}</el-button>
+            <el-button size="mini" type="success" @click="submitFenceForm">{{ $t('fenceDevice.button.save') }}</el-button>
+          </div>
+        </div>
+
+        <div class="fence-content-split">
+          <div class="fence-map-block">
+            <div class="fence-map-head">
+              <span class="fence-map-head__text">{{ $t('fenceDevice.editor.help') }}</span>
+              <div v-if="showMapProviderToolsInFenceMap" class="fence-map-tools">
+                <el-button size="mini" icon="el-icon-full-screen" @click="toggleFenceMapFullscreen">
+                  {{ fenceMapFullscreen ? $t('fenceDevice.button.restoreMap') : $t('fenceDevice.button.expandMap') }}
+                </el-button>
+                <el-radio-group v-model="mapProvider" size="mini" @change="handleMapProviderChange">
+                  <el-radio-button
+                    v-for="item in mapProviderOptions"
+                    :key="item.value"
+                    :label="item.value"
+                    :disabled="item.disabled"
+                  >
+                    {{ item.label }}
+                  </el-radio-button>
+                </el-radio-group>
+                <span class="tabs-bar__provider">{{ mapProviderLabel }}</span>
+              </div>
+            </div>
+            <div ref="fenceMapWrap" class="map-wrap">
+              <div class="draw-hint" v-if="editorNotice">{{ editorNotice }}</div>
+              <div ref="editorMap" class="workbench-map workbench-map--fence"></div>
+            </div>
+          </div>
+
+          <div class="table-wrap fence-table-wrap">
+            <el-table :data="fenceList" v-loading="fenceLoading" border stripe>
+              <el-table-column prop="fenceName" :label="$t('fenceDevice.table.name')" min-width="160" show-overflow-tooltip />
+              <el-table-column :label="$t('fenceDevice.table.shape')" width="90"><template slot-scope="scope">{{ getShapeLabel(scope.row.shapeType) }}</template></el-table-column>
+              <el-table-column :label="$t('fenceDevice.table.rules')" min-width="160" show-overflow-tooltip><template slot-scope="scope">{{ getAlarmRuleGroupLabel(scope.row.alarmRules) }}</template></el-table-column>
+              <el-table-column :label="$t('fenceDevice.form.scheduleType')" width="100"><template slot-scope="scope">{{ getScheduleLabel(scope.row.scheduleType) }}</template></el-table-column>
+              <el-table-column :label="$t('fenceDevice.table.status')" width="110"><template slot-scope="scope"><el-switch :value="scope.row.status === 0" @change="value => handleFenceStatusChange(scope.row, value)" /></template></el-table-column>
+              <el-table-column :label="$t('fenceDevice.table.actions')" width="170" fixed="right">
+                <template slot-scope="scope">
+                  <el-button type="text" size="mini" @click="startEditFence(scope.row)">{{ $t('fenceDevice.button.edit') }}</el-button>
+                  <el-button type="text" size="mini" @click="focusFence(scope.row)">{{ $t('fenceDevice.button.preview') }}</el-button>
+                  <el-button type="text" size="mini" @click="handleRemoveFence(scope.row)">{{ $t('fenceDevice.button.remove') }}</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              :total="fenceTotal"
+              :page.sync="fencePageNum"
+              :limit.sync="fencePageSize"
+              layout="total, prev, pager, next, jumper"
+              :auto-scroll="false"
+              @pagination="handleFencePagination"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div v-show="activeTab === 'alarm'" class="view-panel alerts-view">
+        <div class="alert-filter-grid alert-filter-grid--alarm compact-form-grid">
+          <div>
+            <label>{{ $t('fenceDevice.table.sn') }}</label>
+            <el-input v-model="alarmQuery.sn" :placeholder="$t('fenceDevice.placeholder.alarmSn')" clearable size="small" @keyup.enter.native="handleAlarmSearch" />
+          </div>
+          <div>
+            <label>{{ $t('fenceDevice.query.fenceName') }}</label>
+            <el-input v-model="alarmQuery.fenceName" :placeholder="$t('fenceDevice.placeholder.alarmFenceName')" clearable size="small" @keyup.enter.native="handleAlarmSearch" />
+          </div>
+          <div>
+            <label>{{ $t('fenceDevice.table.alias') }}</label>
+            <el-input v-model="alarmQuery.deviceAlias" :placeholder="$t('fenceDevice.placeholder.alarmDeviceName')" clearable size="small" @keyup.enter.native="handleAlarmSearch" />
+          </div>
+          <div>
+            <label>{{ $t('fenceDevice.query.alarmTime') }}</label>
+            <el-date-picker
+              v-model="alarmTimeRange"
+              type="datetimerange"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              size="small"
+              :start-placeholder="$t('fenceDevice.placeholder.alarmTimeStart')"
+              :end-placeholder="$t('fenceDevice.placeholder.alarmTimeEnd')"
+              clearable
+            />
+          </div>
+          <div>
+            <label>{{ $t('fenceDevice.query.alarmType') }}</label>
+            <el-select v-model="alarmQuery.alarmType" clearable size="small"><el-option v-for="item in alarmRuleOptions" :key="item" :label="getAlarmRuleLabel(item)" :value="item" /></el-select>
+          </div>
+          <div class="filter-actions filter-actions--alarm span-2">
+            <el-button type="primary" size="mini" icon="el-icon-search" @click="handleAlarmSearch">{{ $t('common.search') }}</el-button>
+            <el-button size="mini" icon="el-icon-refresh" @click="resetAlarmQuery">{{ $t('common.reset') }}</el-button>
+          </div>
+        </div>
+        <div class="table-wrap">
+          <el-table :data="alarmList" v-loading="alarmLoading" border stripe>
+            <el-table-column :label="$t('fenceDevice.table.alarmTime')" min-width="170"><template slot-scope="scope">{{ formatDateTime(scope.row.createTime || scope.row.locationTime) }}</template></el-table-column>
+            <el-table-column prop="sn" :label="$t('fenceDevice.table.sn')" min-width="150" />
+            <el-table-column prop="deviceAlias" :label="$t('fenceDevice.table.alias')" min-width="160" show-overflow-tooltip />
+            <el-table-column prop="fenceName" :label="$t('fenceDevice.table.name')" min-width="180" show-overflow-tooltip />
+            <el-table-column :label="$t('fenceDevice.table.alarmType')" width="110"><template slot-scope="scope">{{ getAlarmRuleLabel(scope.row.alarmType) }}</template></el-table-column>
+            <el-table-column :label="$t('fenceDevice.table.alarmLevel')" width="100"><template slot-scope="scope"><el-tag size="mini" :type="getAlarmLevelTagType(scope.row.alarmLevel)">{{ getAlarmLevelLabel(scope.row.alarmLevel) }}</el-tag></template></el-table-column>
+            <el-table-column label="设备最后地址" min-width="320" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row.address || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('fenceDevice.table.actions')" width="160" fixed="right">
+              <template slot-scope="scope">
+                <el-button type="text" size="mini" @click="focusAlarm(scope.row)">{{ $t('fenceDevice.button.locate') }}</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination
+            :total="alarmTotal"
+            :page.sync="alarmPageNum"
+            :limit.sync="alarmPageSize"
+            layout="total, prev, pager, next, jumper"
+            :auto-scroll="false"
+            @pagination="handleAlarmPagination"
+          />
+        </div>
+      </div>
+
+      <el-dialog :title="$t('fenceDevice.button.handle')" :visible.sync="handleDialogVisible" width="520px" append-to-body>
+        <el-form :model="handleForm" label-position="top">
+          <el-form-item :label="$t('fenceDevice.query.handleStatus')"><el-select v-model="handleForm.handleStatus"><el-option value="acked" :label="$t('fenceDevice.alarmStatus.acked')" /><el-option value="closed" :label="$t('fenceDevice.alarmStatus.closed')" /></el-select></el-form-item>
+          <el-form-item :label="$t('fenceDevice.form.remark')"><el-input type="textarea" :rows="3" v-model="handleForm.handleRemark" /></el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitHandleAlarm">{{ $t('common.confirm') }}</el-button><el-button @click="handleDialogVisible = false">{{ $t('common.cancel') }}</el-button></div>
+      </el-dialog>
+
+      <el-dialog
+        :title="$t('fenceDevice.dialog.alarmLocateTitle')"
+        :visible.sync="alarmLocateDialogVisible"
+        width="1280px"
+        custom-class="alarm-locate-dialog"
+        append-to-body
+        @open="handleAlarmLocateDialogOpen"
+        @close="handleAlarmLocateDialogClose"
+      >
+        <div class="alarm-locate-header">
+          <div><strong>{{ $t('fenceDevice.table.sn') }}:</strong> {{ alarmLocateTarget ? (alarmLocateTarget.sn || '-') : '-' }}</div>
+          <div><strong>{{ $t('fenceDevice.table.alias') }}:</strong> {{ alarmLocateTarget ? (alarmLocateTarget.deviceAlias || '-') : '-' }}</div>
+          <div><strong>{{ $t('fenceDevice.table.locationTime') }}:</strong> {{ alarmLocateTarget ? formatDateTime(alarmLocateTarget.locationTime || alarmLocateTarget.createTime) : '-' }}</div>
+        </div>
+        <div class="alarm-locate-tools">
+          <el-radio-group v-model="mapProvider" size="mini" @change="handleMapProviderChange">
+            <el-radio-button
+              v-for="item in mapProviderOptions"
+              :key="item.value"
+              :label="item.value"
+              :disabled="item.disabled"
+            >
+              {{ item.label }}
+            </el-radio-button>
+          </el-radio-group>
+          <span class="tabs-bar__provider">{{ mapProviderLabel }}</span>
+        </div>
+        <el-alert
+          v-if="alarmLocateDialogVisible && !alarmLocateHasCoordinate"
+          :title="$t('fenceDevice.message.alarmLocationMissing')"
+          type="warning"
+          :closable="false"
+          show-icon
+          class="alarm-locate-alert"
+        />
+        <div v-else ref="alarmLocateMap" class="alarm-locate-map"></div>
+      </el-dialog>
+
+      <el-dialog :title="$t('fenceDevice.dialog.deviceTitle')" :visible.sync="deviceSelectorVisible" width="860px" append-to-body @open="handleDeviceDialogOpen" @close="handleDeviceDialogClose">
+        <div class="device-dialog-tools">
+          <el-input
+            v-model="deviceOptionKeyword"
+            clearable
+            size="small"
+            :placeholder="$t('fenceDevice.form.deviceSearchPlaceholder')"
+            @clear="searchDeviceOptions"
+            @keyup.enter.native="searchDeviceOptions"
+          />
+          <el-button size="small" type="primary" icon="el-icon-search" @click="searchDeviceOptions">{{ $t('common.search') }}</el-button>
+          <el-button size="small" icon="el-icon-refresh" @click="resetDeviceOptionKeyword">{{ $t('common.reset') }}</el-button>
+        </div>
+        <el-table
+          ref="deviceOptionTable"
+          :data="deviceOptions"
+          :row-key="deviceOptionRowKey"
+          v-loading="deviceOptionLoading"
+          border
+          stripe
+          height="420"
+          @selection-change="handleDeviceOptionSelectionChange"
+          @row-dblclick="handleDeviceOptionRowDblClick"
+        >
+          <el-table-column type="selection" width="50" :reserve-selection="true" />
+          <el-table-column prop="sn" :label="$t('fenceDevice.table.sn')" min-width="160" />
+          <el-table-column prop="alias" :label="$t('fenceDevice.table.alias')" min-width="160" show-overflow-tooltip />
+          <el-table-column :label="$t('fenceDevice.table.coordinates')" min-width="220" show-overflow-tooltip>
+            <template slot-scope="scope">{{ formatCoordinatePair(resolveOptionLat(scope.row), resolveOptionLng(scope.row)) }}</template>
+          </el-table-column>
+          <el-table-column prop="lastAddress" :label="$t('fenceDevice.table.address')" min-width="240" show-overflow-tooltip />
+          <el-table-column prop="lastLocationTimeText" :label="$t('fenceDevice.table.locationTime')" min-width="170" />
+        </el-table>
+        <div slot="footer" class="dialog-footer">
+          <pagination
+            :total="deviceOptionTotal"
+            :page.sync="deviceOptionPageNum"
+            :limit.sync="deviceOptionPageSize"
+            layout="total, prev, pager, next"
+            :pager-count="5"
+            :auto-scroll="false"
+            @pagination="handleDeviceOptionPagination"
+          />
+          <span class="dialog-footer__meta">{{ $t('fenceDevice.dialog.selectedCount', { count: deviceDraftIds.length }) }}</span>
+          <el-button @click="deviceSelectorVisible = false">{{ $t('common.cancel') }}</el-button>
+          <el-button type="primary" @click="confirmDeviceSelector">{{ $t('common.confirm') }}</el-button>
+        </div>
+      </el-dialog>
+    </section>
+  </div>
+</template>
+<script>
+import { getDeviceTrajectoryMapConfig } from '@/api/device/device'
+import {
+  addFence,
+  changeFenceStatus,
+  executeFenceScan,
+  getFence,
+  getFenceMonitorOverview,
+  getTodayAlarmDeviceCount,
+  handleFenceAlarm,
+  listFence,
+  listFenceAlarms,
+  listFenceDeviceOptions,
+  listFenceMonitorDevices,
+  listFenceMonitorFences,
+  removeFence,
+  setFenceMonitorStateNormal,
+  updateFence
+} from '@/api/device/fenceDevice'
+import { loadLeaflet } from '@/utils/loadLeaflet'
+import { loadLeafletDraw } from '@/utils/loadLeafletDraw'
+
+const DEFAULT_CENTER = [31.2304, 121.4737]
+const DEFAULT_ZOOM = 5
+const FOCUS_ZOOM = 14
+const MAP_SERIES_COLORS = ['#2563eb', '#16a34a', '#d97706', '#7c3aed', '#0f766e', '#db2777']
+const MAPTILER_TILE_URL = 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key='
+const GOOGLE_TILE_URL = 'https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}'
+const AMAP_TILE_URL = 'https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
+
+function clone(obj) {
+  return JSON.parse(JSON.stringify(obj))
+}
+
+export default {
+  name: 'FenceDeviceIndex',
+  props: {
+    menuMode: {
+      type: String,
+      default: 'workbench',
+      validator(value) {
+        return ['workbench', 'fence', 'alarm'].includes(value)
+      }
+    }
+  },
+  data() {
+    return {
+      pageLoading: false,
+      activeTab: 'monitor',
+      mapProvider: 'google',
+      tabOptions: [],
+      mapConfig: {},
+      mapLoadError: '',
+      overview: {},
+      monitorLoading: false,
+      fenceLoading: false,
+      alarmLoading: false,
+      alarmPageNum: 1,
+      alarmPageSize: 10,
+      alarmTotal: 0,
+      deviceSidebarKeyword: '',
+      fenceSidebarKeyword: '',
+      sidebarFenceOptions: [],
+      sidebarFenceLoading: false,
+      sidebarStatusFilter: '',
+      sidebarPageNum: 1,
+      sidebarPageSize: 8,
+      sidebarRemoteTotal: 0,
+      monitorNormalDeviceTotal: null,
+      monitorAlertDeviceTotal: null,
+      settingMonitorStateNormalKeys: {},
+      sidebarSearchTimer: null,
+      sidebarFenceSearchTimer: null,
+      sidebarFenceSearchSeq: 0,
+      sidebarFenceLoadedKeyword: '',
+      sidebarFencePendingKeyword: '',
+      fenceSidebarSelectOpen: false,
+      fenceSidebarMarqueeDistance: 0,
+      selectedDeviceId: null,
+      selectedMonitorFenceId: null,
+      monitorQuery: { keyword: '' },
+      fenceQuery: { keyword: '', status: undefined, shapeType: '' },
+      alarmQuery: { sn: '', fenceName: '', deviceAlias: '', alarmType: '', alarmLevel: '' },
+      alarmTimeRange: [],
+      monitorDevices: [],
+      activeFences: [],
+      recentAlarms: [],
+      fenceList: [],
+      fencePageNum: 1,
+      fencePageSize: 10,
+      fenceTotal: 0,
+      alarmList: [],
+      deviceOptions: [],
+      deviceSelectorVisible: false,
+      deviceOptionKeyword: '',
+      deviceOptionLoading: false,
+      syncingDeviceOptionSelection: false,
+      deviceOptionPinInitialSelected: false,
+      deviceOptionInitialSelectedIds: [],
+      deviceOptionPageNum: 1,
+      deviceOptionPageSize: 10,
+      deviceOptionTotal: 0,
+      deviceOptionCacheMap: {},
+      deviceDraftIds: [],
+      editorDeviceOptions: [],
+      currentFenceId: null,
+      editorFocusedFence: null,
+      fenceForm: this.getDefaultFenceForm(),
+      handleDialogVisible: false,
+      selectedAlarmId: null,
+      handleForm: { handleStatus: 'acked', handleRemark: '' },
+      editorNotice: '',
+      pendingDrawShapeType: '',
+      deviceOptionSearchTimer: null,
+      alarmStrategyOptions: ['exit', 'enter,exit', 'enter'],
+      alarmRuleOptions: ['enter', 'exit'],
+      monitorMap: null,
+      monitorLeaflet: null,
+      monitorFenceGroup: null,
+      monitorDeviceGroup: null,
+      monitorPulseLayers: [],
+      monitorPulseTimer: null,
+      editorMap: null,
+      editorLeaflet: null,
+      editorReferenceGroup: null,
+      editorDeviceGroup: null,
+      editorDrawGroup: null,
+      editorDrawControl: null,
+      editorPulseWaveSets: [],
+      editorPulseTimer: null,
+      resizeTimer: null,
+      selectedDeviceRequestSeq: 0,
+      alarmLocateDialogVisible: false,
+      alarmLocateTarget: null,
+      alarmLocateMap: null,
+      alarmLocateLeaflet: null,
+      alarmLocateMarker: null,
+      alarmLocateTileLayer: null,
+      alarmLocatePulseLayers: [],
+      alarmLocatePulseTimer: null,
+      fenceMapFullscreen: false
+    }
+  },
+  created() {
+    this.syncTabOptions()
+    this.activeTab = this.resolveInitialTab()
+  },
+  computed: {
+    hasGoogleKey() {
+      return true
+    },
+    hasAmapKey() {
+      return !!(this.mapConfig && this.mapConfig.gaodeKey)
+    },
+    hasMaptilerKey() {
+      return !!(this.mapConfig && this.mapConfig.maptilerKey)
+    },
+    mapProviderOptions() {
+      return [
+        { value: 'google', label: this.$t('fenceDevice.map.providerGoogle'), disabled: !this.hasGoogleKey },
+        { value: 'amap', label: this.$t('fenceDevice.map.providerAmap'), disabled: !this.hasAmapKey },
+        { value: 'maptiler', label: this.$t('fenceDevice.map.providerMaptiler'), disabled: !this.hasMaptilerKey }
+      ]
+    },
+    resolvedMapProvider() {
+      const current = this.mapProviderOptions.find(item => item.value === this.mapProvider)
+      if (current && !current.disabled) {
+        return current.value
+      }
+      if (this.hasGoogleKey) return 'google'
+      if (this.hasAmapKey) return 'amap'
+      if (this.hasMaptilerKey) return 'maptiler'
+      return 'google'
+    },
+    mapProviderLabel() {
+      const keyMap = {
+        google: 'fenceDevice.map.providerGoogle',
+        amap: 'fenceDevice.map.providerAmap',
+        maptiler: 'fenceDevice.map.providerMaptiler'
+      }
+      return this.$t(keyMap[this.resolvedMapProvider] || keyMap.google)
+    },
+    isFenceMenuMode() {
+      return this.menuMode === 'fence'
+    },
+    isAlarmMenuMode() {
+      return this.menuMode === 'alarm'
+    },
+    isSingleMenuMode() {
+      return this.isFenceMenuMode || this.isAlarmMenuMode
+    },
+    showTabButtons() {
+      return !this.isSingleMenuMode && this.tabOptions.length > 1
+    },
+    showTabsBar() {
+      return !this.isAlarmMenuMode && !this.isFenceMenuMode && !this.isWorkbenchMonitorMode
+    },
+    isWorkbenchMonitorMode() {
+      return !this.isSingleMenuMode && this.activeTab === 'monitor' && this.tabOptions.length === 1
+    },
+    showSidebar() {
+      return !this.isSingleMenuMode
+    },
+    showOverviewCards() {
+      return this.activeTab === 'monitor'
+    },
+    showMapProviderTools() {
+      return this.activeTab === 'monitor' || this.activeTab === 'fence'
+    },
+    showMapProviderToolsInTabs() {
+      return this.activeTab === 'monitor' && !this.isWorkbenchMonitorMode
+    },
+    showMapProviderToolsInMap() {
+      return this.activeTab === 'monitor' && this.isWorkbenchMonitorMode
+    },
+    showMapProviderToolsInFenceMap() {
+      return this.activeTab === 'fence'
+    },
+    currentPageTitle() {
+      const titleMap = {
+        monitor: this.$t('fenceDevice.tabs.monitor'),
+        fence: this.$t('fenceDevice.tabs.fence'),
+        alarm: this.$t('fenceDevice.tabs.alarm')
+      }
+      return titleMap[this.activeTab] || titleMap.monitor
+    },
+    sidebarDisplayTotal() {
+      return this.sidebarRemoteTotal
+    },
+    monitorNormalDeviceCount() {
+      if (Number.isFinite(this.monitorNormalDeviceTotal)) {
+        return this.monitorNormalDeviceTotal
+      }
+      return (this.filteredMonitorDevices || []).reduce((total, item) => {
+        return total + (this.resolveMonitorDeviceStatusType(item) === 'alert' ? 0 : 1)
+      }, 0)
+    },
+    monitorAlertDeviceCount() {
+      if (Number.isFinite(this.monitorAlertDeviceTotal)) {
+        return this.monitorAlertDeviceTotal
+      }
+      return (this.filteredMonitorDevices || []).reduce((total, item) => {
+        return total + (this.resolveMonitorDeviceStatusType(item) === 'alert' ? 1 : 0)
+      }, 0)
+    },
+    fenceSidebarMarqueeText() {
+      return String(this.fenceSidebarKeyword || '').trim()
+    },
+    showFenceSidebarMarquee() {
+      return !!this.fenceSidebarMarqueeText && !this.fenceSidebarSelectOpen && this.fenceSidebarMarqueeDistance > 0
+    },
+    fenceSidebarMarqueeStyle() {
+      const distance = Math.max(Number(this.fenceSidebarMarqueeDistance) || 0, 0)
+      const duration = Math.max(distance / 24, 6)
+      return {
+        '--fence-marquee-distance': `${distance}px`,
+        '--fence-marquee-duration': `${duration}s`
+      }
+    },
+    selectedDevice() {
+      return this.monitorDevices.find(item => item.deviceId === this.selectedDeviceId)
+        || null
+    },
+    selectedFenceDevices() {
+      const selectedIds = new Set((this.fenceForm.deviceIds || []).map(id => this.normalizeDeviceId(id)))
+      return Array.from(selectedIds)
+        .map(id => this.deviceOptionCacheMap[id])
+        .filter(Boolean)
+    },
+    selectedFenceMapDevices() {
+      return this.selectedFenceDevices.filter(item => this.hasCoordinatePair(this.resolveOptionLat(item), this.resolveOptionLng(item)))
+    },
+    monitorDisplayFences() {
+      if (!this.selectedDeviceId) {
+        return []
+      }
+      const fences = Array.isArray(this.activeFences) ? this.activeFences : []
+      if (!fences.length) {
+        return []
+      }
+      const selectedFenceId = this.normalizeFenceId(this.selectedMonitorFenceId)
+      if (selectedFenceId) {
+        const selectedFenceList = fences.filter(item => this.isSameFenceId(this.extractFenceId(item), selectedFenceId))
+        if (selectedFenceList.length) {
+          return selectedFenceList
+        }
+      }
+      const statuses = this.parseFenceStatuses(this.selectedDevice && this.selectedDevice.fenceStatuses)
+      if (!statuses.length) {
+        return []
+      }
+      const fenceIdSet = new Set(
+        statuses.map(item => this.normalizeFenceId(item && item.id)).filter(Boolean)
+      )
+      const fenceNameSet = new Set(
+        statuses.map(item => String((item && item.name) || '').trim()).filter(Boolean)
+      )
+      return fences.filter(item => {
+        const itemFenceId = this.normalizeFenceId(this.extractFenceId(item))
+        if (itemFenceId && fenceIdSet.has(itemFenceId)) {
+          return true
+        }
+        const itemFenceName = String((item && (item.fenceName || item.name || item.label)) || '').trim()
+        return !!itemFenceName && fenceNameSet.has(itemFenceName)
+      })
+    },
+    filteredMonitorDevices() {
+      const keyword = (this.deviceSidebarKeyword || '').trim().toLowerCase()
+      const fenceKeyword = (this.fenceSidebarKeyword || '').trim().toLowerCase()
+      return (this.monitorDevices || []).filter(item => {
+        if (keyword && !this.matchMonitorDeviceByKeyword(item, keyword)) {
+          return false
+        }
+        if (fenceKeyword && !this.matchMonitorDeviceByFenceKeyword(item, fenceKeyword)) {
+          return false
+        }
+        return true
+      })
+    },
+    fenceGroupedMonitorDevices() {
+      const groups = new Map()
+      const statusFilter = String(this.sidebarStatusFilter || '')
+      ;(this.filteredMonitorDevices || []).forEach(item => {
+        const statuses = this.parseFenceStatuses(item && item.fenceStatuses)
+        const groupMeta = statuses.length
+          ? statuses.map(status => ({
+            id: status && status.id ? status.id : null,
+            name: String((status && status.name) || '').trim() || this.$t('fenceDevice.sidebar.unbound'),
+            status: String((status && status.status) || '').trim().toLowerCase()
+          }))
+          : [{ id: null, name: this.$t('fenceDevice.sidebar.unbound'), status: '' }]
+        const dedupe = new Set()
+        groupMeta.forEach(group => {
+          if (statusFilter && !this.matchMonitorGroupStatus(group.status, statusFilter)) {
+            return
+          }
+          const groupKey = `${group.id || 0}|${group.name}`
+          if (dedupe.has(groupKey)) return
+          dedupe.add(groupKey)
+          if (!groups.has(groupKey)) {
+            groups.set(groupKey, {
+              key: groupKey,
+              id: group.id,
+              name: group.name,
+              devices: []
+            })
+          }
+          groups.get(groupKey).devices.push({
+            ...item,
+            _groupFenceId: group.id,
+            _groupFenceName: group.name,
+            _groupFenceStatus: group.status
+          })
+        })
+      })
+      return Array.from(groups.values())
+    },
+    realtimeLogs() {
+      return (this.recentAlarms || []).map(item => ({
+        id: item.id,
+        time: item.createTime,
+        text: `${item.sn || '-'} ${this.buildAlarmContent(item)}`
+      }))
+    },
+    alarmLocateHasCoordinate() {
+      return this.alarmLocateTarget && this.isFiniteNumber(this.alarmLocateTarget.lat) && this.isFiniteNumber(this.alarmLocateTarget.lng)
+    }
+  },
+  async mounted() {
+    await this.reloadAll()
+    await this.$nextTick()
+    this.updateFenceSidebarMarquee()
+    await this.handleTabChange()
+    window.addEventListener('resize', this.handleWindowResize)
+    document.addEventListener('fullscreenchange', this.handleFenceFullscreenChange)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleWindowResize)
+    document.removeEventListener('fullscreenchange', this.handleFenceFullscreenChange)
+    if (this.resizeTimer) clearTimeout(this.resizeTimer)
+    if (this.sidebarSearchTimer) clearTimeout(this.sidebarSearchTimer)
+    if (this.sidebarFenceSearchTimer) clearTimeout(this.sidebarFenceSearchTimer)
+    if (this.deviceOptionSearchTimer) clearTimeout(this.deviceOptionSearchTimer)
+    this.clearEditorPulseAnimation()
+    this.destroyMap('monitor')
+    this.destroyMap('editor')
+    this.destroyMap('alarmLocate')
+  },
+  watch: {
+    menuMode() {
+      this.syncTabOptions()
+      this.activeTab = this.resolveInitialTab()
+      this.$nextTick(() => {
+        this.handleTabChange()
+      })
+    },
+    '$i18n.locale'() {
+      if (!this.editorLeaflet) {
+        return
+      }
+      this.applyLeafletDrawLocale(this.editorLeaflet)
+      this.$nextTick(() => {
+        this.rebuildEditorDrawControl()
+      })
+    },
+    deviceSidebarKeyword() {
+      this.sidebarPageNum = 1
+      if (this.sidebarSearchTimer) clearTimeout(this.sidebarSearchTimer)
+      this.sidebarSearchTimer = setTimeout(() => {
+        this.loadMonitorDevices()
+      }, 250)
+    },
+    fenceSidebarKeyword() {
+      this.sidebarPageNum = 1
+      this.loadMonitorDevices()
+      this.$nextTick(() => {
+        this.updateFenceSidebarMarquee()
+      })
+    },
+    sidebarStatusFilter() {
+      this.sidebarPageNum = 1
+      this.loadMonitorDevices()
+    },
+    selectedDeviceId(newValue, oldValue) {
+      if (newValue === oldValue) {
+        return
+      }
+      if (this.activeTab !== 'monitor') {
+        return
+      }
+      const requestSeq = ++this.selectedDeviceRequestSeq
+      this.clearSelectedDevicePanels()
+      this.refreshSelectedDevicePanels(requestSeq, newValue)
+    },
+    deviceOptionKeyword() {
+      if (!this.deviceSelectorVisible) {
+        return
+      }
+      if (this.deviceOptionSearchTimer) clearTimeout(this.deviceOptionSearchTimer)
+      this.deviceOptionSearchTimer = setTimeout(() => {
+        this.deviceOptionPageNum = 1
+        this.loadDeviceOptions()
+      }, 250)
+    }
+  },
+  methods: {
+    syncTabOptions() {
+      const allTabs = [
+        { value: 'monitor', label: this.$t('fenceDevice.tabs.monitor') },
+        { value: 'fence', label: this.$t('fenceDevice.tabs.fence') },
+        { value: 'alarm', label: this.$t('fenceDevice.tabs.alarm') }
+      ]
+      if (this.isFenceMenuMode) {
+        this.tabOptions = [allTabs[1]]
+        return
+      }
+      if (this.isAlarmMenuMode) {
+        this.tabOptions = [allTabs[2]]
+        return
+      }
+      this.tabOptions = [allTabs[0]]
+    },
+    resolveInitialTab() {
+      if (this.isFenceMenuMode) return 'fence'
+      if (this.isAlarmMenuMode) return 'alarm'
+      return 'monitor'
+    },
+    resolveDefaultProvider() {
+      if (this.hasGoogleKey) return 'google'
+      if (this.hasAmapKey) return 'amap'
+      if (this.hasMaptilerKey) return 'maptiler'
+      return 'google'
+    },
+    async switchTab(tab) {
+      if (this.isSingleMenuMode || this.activeTab === tab) {
+        return
+      }
+      this.activeTab = tab
+      await this.handleTabChange()
+    },
+    handleSidebarPagination(pagination) {
+      this.sidebarPageNum = pagination.page
+      this.sidebarPageSize = pagination.limit
+      this.loadMonitorDevices()
+    },
+    getDefaultFenceForm() {
+      return {
+        id: undefined,
+        fenceName: '',
+        shapeType: 'circle',
+        alarmRules: 'exit',
+        status: 0,
+        scheduleType: 'all',
+        scheduleStartTime: '',
+        scheduleEndTime: '',
+        boundaryToleranceMeter: 5,
+        repeatIntervalSeconds: 0,
+        alarmCountdownMinutes: 0.5,
+        centerLat: undefined,
+        centerLng: undefined,
+        radiusMeter: undefined,
+        geomWkt: '',
+        shapeDataJson: '',
+        deviceIds: [],
+        remark: ''
+      }
+    },
+    normalizeRows(response) {
+      if (Array.isArray(response)) {
+        return response
+      }
+      if (!response || typeof response !== 'object') {
+        return []
+      }
+      if (Array.isArray(response.rows)) {
+        return response.rows
+      }
+      if (Array.isArray(response.list)) {
+        return response.list
+      }
+      if (response.data && typeof response.data === 'object') {
+        if (Array.isArray(response.data)) {
+          return response.data
+        }
+        if (Array.isArray(response.data.rows)) {
+          return response.data.rows
+        }
+        if (Array.isArray(response.data.list)) {
+          return response.data.list
+        }
+      }
+      return []
+    },
+    normalizeObject(response) {
+      if (response && response.data && typeof response.data === 'object' && !Array.isArray(response.data)) {
+        return response.data
+      }
+      if (response && typeof response === 'object' && !Array.isArray(response)) {
+        return response
+      }
+      return {}
+    },
+    normalizeTotal(response) {
+      const toNumber = (value) => {
+        if (typeof value === 'number' && Number.isFinite(value)) {
+          return value
+        }
+        if (typeof value === 'string' && value.trim() !== '') {
+          const parsed = Number(value)
+          if (Number.isFinite(parsed)) {
+            return parsed
+          }
+        }
+        return null
+      }
+      const totalFromRoot = toNumber(response && response.total)
+      if (totalFromRoot !== null) {
+        return totalFromRoot
+      }
+      const totalFromData = toNumber(response && response.data && response.data.total)
+      if (totalFromData !== null) {
+        return totalFromData
+      }
+      return this.normalizeRows(response).length
+    },
+    normalizeDeviceId(value) {
+      if (value === null || value === undefined) return ''
+      return String(value).trim()
+    },
+    resolveDeviceOptionId(item) {
+      if (!item || typeof item !== 'object') {
+        return ''
+      }
+      const directId = this.normalizeDeviceId(item.id)
+      if (directId) {
+        return directId
+      }
+      return this.normalizeDeviceId(item.deviceId)
+    },
+    deviceOptionRowKey(row) {
+      return this.resolveDeviceOptionId(row)
+    },
+    normalizeFenceId(value) {
+      if (value === null || value === undefined) return ''
+      return String(value).trim()
+    },
+    normalizeDeviceIds(value) {
+      if (Array.isArray(value)) {
+        return value.filter(item => this.normalizeDeviceId(item))
+      }
+      if (typeof value === 'string') {
+        return value.split(',').map(item => item.trim()).filter(Boolean)
+      }
+      if (value === null || value === undefined || value === '') {
+        return []
+      }
+      const normalized = this.normalizeDeviceId(value)
+      return normalized ? [value] : []
+    },
+    isSameDeviceId(left, right) {
+      const leftId = this.normalizeDeviceId(left)
+      const rightId = this.normalizeDeviceId(right)
+      if (!leftId || !rightId) return false
+      return leftId === rightId
+    },
+    isSameFenceId(left, right) {
+      const leftId = this.normalizeFenceId(left)
+      const rightId = this.normalizeFenceId(right)
+      if (!leftId || !rightId) return false
+      return leftId === rightId
+    },
+    extractFenceId(item) {
+      if (!item || typeof item !== 'object') {
+        return null
+      }
+      if (item.id !== undefined && item.id !== null && item.id !== '') return item.id
+      if (item.fenceId !== undefined && item.fenceId !== null && item.fenceId !== '') return item.fenceId
+      if (item.fence_id !== undefined && item.fence_id !== null && item.fence_id !== '') return item.fence_id
+      return null
+    },
+    isMonitorItemSelected(item) {
+      if (!item || !this.isSameDeviceId(item.deviceId, this.selectedDeviceId)) {
+        return false
+      }
+      const selectedFenceId = this.normalizeFenceId(this.selectedMonitorFenceId)
+      if (!selectedFenceId) {
+        return true
+      }
+      const rowFenceId = this.normalizeFenceId(item._groupFenceId)
+      if (!rowFenceId) {
+        return true
+      }
+      return rowFenceId === selectedFenceId
+    },
+    syncSelectedMonitorFenceContext(preferredItem = null) {
+      const preferredFenceId = this.normalizeFenceId(preferredItem && preferredItem._groupFenceId)
+      if (preferredFenceId) {
+        this.selectedMonitorFenceId = preferredFenceId
+        return
+      }
+      if (!this.selectedDeviceId) {
+        this.selectedMonitorFenceId = null
+        return
+      }
+      const groups = this.fenceGroupedMonitorDevices || []
+      for (let i = 0; i < groups.length; i++) {
+        const devices = (groups[i] && groups[i].devices) || []
+        for (let j = 0; j < devices.length; j++) {
+          const row = devices[j]
+          if (!this.isSameDeviceId(row && row.deviceId, this.selectedDeviceId)) {
+            continue
+          }
+          const fenceId = this.normalizeFenceId(row && row._groupFenceId)
+          this.selectedMonitorFenceId = fenceId || null
+          return
+        }
+      }
+      this.selectedMonitorFenceId = null
+    },
+    async reloadAll() {
+      this.pageLoading = true
+      try {
+        await this.fetchMapConfig()
+        if (this.activeTab === 'monitor') {
+          await Promise.all([
+            this.loadOverview(),
+            this.loadRecentAlarms(),
+            this.loadMonitorDevices(),
+            this.loadMonitorFences()
+          ])
+          return
+        }
+        if (this.activeTab === 'fence') {
+          await this.loadFenceList()
+          if (!this.fenceForm.id) {
+            this.resetEditor(false)
+          }
+          return
+        }
+        if (this.activeTab === 'alarm') {
+          await this.loadAlarmList()
+        }
+      } catch (error) {
+        this.$message.error((error && error.message) || this.$t('fenceDevice.message.loadFailed'))
+      } finally {
+        this.pageLoading = false
+      }
+    },
+    async fetchMapConfig() {
+      try {
+        const response = await getDeviceTrajectoryMapConfig()
+        this.mapConfig = this.normalizeObject(response)
+        this.mapProvider = this.resolveDefaultProvider()
+        this.mapLoadError = ''
+      } catch (error) {
+        this.mapConfig = {}
+        this.mapProvider = this.resolveDefaultProvider()
+        this.mapLoadError = (error && error.message) || this.$t('fenceDevice.message.mapConfigLoadFailed')
+      }
+    },
+    async loadOverview() {
+      const [response, openAlarmCount, todayAlarmCount] = await Promise.all([
+        getFenceMonitorOverview(),
+        this.fetchOpenAlertCount(),
+        this.fetchTodayAlarmCount()
+      ])
+      this.overview = {
+        ...this.normalizeObject(response),
+        openAlarmCount,
+        todayAlarmCount
+      }
+    },
+    async fetchOpenAlertCount() {
+      try {
+        const response = await listFenceMonitorDevices({
+          status: 'alert',
+          pageNum: 1,
+          pageSize: 1
+        })
+        return this.normalizeTotal(response)
+      } catch (error) {
+        const fallback = Number(this.overview && this.overview.openAlarmCount)
+        return Number.isFinite(fallback) ? fallback : 0
+      }
+    },
+    async fetchTodayAlarmCount() {
+      try {
+        const response = await getTodayAlarmDeviceCount()
+        const directCount = Number(response && response.data)
+        if (Number.isFinite(directCount)) {
+          return directCount
+        }
+        const objectData = this.normalizeObject(response)
+        const objectCount = Number(objectData && objectData.count)
+        if (Number.isFinite(objectCount)) {
+          return objectCount
+        }
+        const fallback = Number(this.overview && this.overview.todayAlarmCount)
+        return Number.isFinite(fallback) ? fallback : 0
+      } catch (error) {
+        const fallback = Number(this.overview && this.overview.todayAlarmCount)
+        return Number.isFinite(fallback) ? fallback : 0
+      }
+    },
+    getTodayTimeRange() {
+      const now = new Date()
+      const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0)
+      const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59)
+      return [this.formatQueryDateTime(start), this.formatQueryDateTime(end)]
+    },
+    formatQueryDateTime(date) {
+      if (!(date instanceof Date) || Number.isNaN(date.getTime())) {
+        return ''
+      }
+      const year = date.getFullYear()
+      const month = this.padDateNumber(date.getMonth() + 1)
+      const day = this.padDateNumber(date.getDate())
+      const hour = this.padDateNumber(date.getHours())
+      const minute = this.padDateNumber(date.getMinutes())
+      const second = this.padDateNumber(date.getSeconds())
+      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
+    },
+    padDateNumber(value) {
+      return String(value).padStart(2, '0')
+    },
+    async loadMonitorDevices() {
+      this.monitorLoading = true
+      try {
+        const keyword = (this.deviceSidebarKeyword || '').trim()
+        const selectedFenceName = (this.fenceSidebarKeyword || '').trim()
+        const selectedStatus = String(this.sidebarStatusFilter || '').trim()
+        const response = await listFenceMonitorDevices({
+          keyword: keyword || undefined,
+          fenceName: selectedFenceName || undefined,
+          status: selectedStatus || undefined,
+          pageNum: this.sidebarPageNum,
+          pageSize: this.sidebarPageSize
+        })
+        const responseData = this.normalizeObject(response)
+        const normalTotal = Number(responseData.normalDeviceCount)
+        const alertTotal = Number(responseData.alertDeviceCount)
+        this.monitorNormalDeviceTotal = Number.isFinite(normalTotal) && normalTotal >= 0 ? normalTotal : null
+        this.monitorAlertDeviceTotal = Number.isFinite(alertTotal) && alertTotal >= 0 ? alertTotal : null
+        this.monitorDevices = this.normalizeRows(response)
+        this.sidebarRemoteTotal = this.normalizeTotal(response)
+        if (!this.monitorDevices.length) {
+          this.selectedDeviceId = null
+          this.selectedMonitorFenceId = null
+          this.renderMonitorMap()
+          return
+        }
+        if (!this.selectedDeviceId && this.monitorDevices.length) {
+          this.selectedDeviceId = this.monitorDevices[0].deviceId
+        }
+        if (this.selectedDeviceId && !this.monitorDevices.some(item => item.deviceId === this.selectedDeviceId) && this.monitorDevices.length) {
+          this.selectedDeviceId = this.monitorDevices[0].deviceId
+        }
+        this.syncSelectedMonitorFenceContext()
+        this.renderMonitorMap()
+      } finally {
+        this.monitorLoading = false
+      }
+    },
+    handleFenceSelectVisibleChange(visible) {
+      this.fenceSidebarSelectOpen = !!visible
+      this.updateFenceSidebarMarquee()
+      if (!visible) {
+        this.$nextTick(() => {
+          this.updateFenceSidebarMarquee()
+        })
+        return
+      }
+      this.handleFenceKeywordSearch('')
+    },
+    handleFenceKeywordSearch(keyword) {
+      const normalizedKeyword = String(keyword || '').trim()
+      if (this.sidebarFenceLoading && normalizedKeyword === this.sidebarFencePendingKeyword) {
+        return
+      }
+      if (!this.sidebarFenceLoading && normalizedKeyword === this.sidebarFenceLoadedKeyword && this.sidebarFenceOptions.length) {
+        return
+      }
+      if (this.sidebarFenceSearchTimer) {
+        clearTimeout(this.sidebarFenceSearchTimer)
+      }
+      this.sidebarFenceSearchTimer = setTimeout(() => {
+        this.loadFenceOptions(normalizedKeyword)
+      }, 250)
+    },
+    handleFenceKeywordClear() {
+      this.handleFenceKeywordSearch('')
+      this.$nextTick(() => {
+        this.updateFenceSidebarMarquee()
+      })
+    },
+    async loadFenceOptions(keyword = '') {
+      const normalizedKeyword = String(keyword || '').trim()
+      const requestSeq = ++this.sidebarFenceSearchSeq
+      this.sidebarFencePendingKeyword = normalizedKeyword
+      this.sidebarFenceLoading = true
+      try {
+        const response = await listFenceMonitorFences({
+          keyword: normalizedKeyword || undefined,
+          fenceName: normalizedKeyword || undefined,
+          pageNum: 1,
+          pageSize: 50
+        })
+        if (requestSeq !== this.sidebarFenceSearchSeq) {
+          return
+        }
+        const rows = this.normalizeRows(response)
+        const optionNames = rows
+          .map(item => String((item && (item.fenceName || item.name || item.label || item.value)) || '').trim())
+          .filter(Boolean)
+        this.sidebarFenceOptions = Array.from(new Set(optionNames)).map(name => ({ label: name, value: name }))
+        this.sidebarFenceLoadedKeyword = normalizedKeyword
+      } catch (error) {
+        if (requestSeq === this.sidebarFenceSearchSeq) {
+          this.sidebarFenceOptions = []
+          this.sidebarFenceLoadedKeyword = ''
+        }
+      } finally {
+        if (requestSeq === this.sidebarFenceSearchSeq) {
+          this.sidebarFencePendingKeyword = ''
+          this.sidebarFenceLoading = false
+        }
+      }
+    },
+    updateFenceSidebarMarquee() {
+      let overflowDistance = 0
+      if (this.fenceSidebarSelectOpen || !this.fenceSidebarMarqueeText) {
+        this.fenceSidebarMarqueeDistance = 0
+      } else {
+        const selectComponent = this.$refs.fenceSidebarSelect
+        const selectRoot = selectComponent && selectComponent.$el
+        const measureEl = this.$refs.fenceSidebarMarqueeMeasure
+        if (selectRoot && measureEl && typeof window !== 'undefined') {
+          const inputEl = selectRoot.querySelector('.el-input__inner')
+          if (inputEl) {
+            const inputStyle = window.getComputedStyle(inputEl)
+            measureEl.style.font = inputStyle.font
+            measureEl.style.fontFamily = inputStyle.fontFamily
+            measureEl.style.fontSize = inputStyle.fontSize
+            measureEl.style.fontWeight = inputStyle.fontWeight
+            measureEl.style.letterSpacing = inputStyle.letterSpacing
+            const extraRightSpace = 30
+            const availableWidth = Math.max(inputEl.clientWidth - extraRightSpace, 0)
+            const textWidth = Math.ceil(measureEl.scrollWidth)
+            overflowDistance = textWidth - availableWidth
+          }
+        }
+        this.fenceSidebarMarqueeDistance = overflowDistance > 0 ? overflowDistance + 12 : 0
+      }
+      this.toggleFenceSidebarNativeTextMask(this.showFenceSidebarMarquee)
+    },
+    toggleFenceSidebarNativeTextMask(hidden) {
+      const selectComponent = this.$refs.fenceSidebarSelect
+      const selectRoot = selectComponent && selectComponent.$el
+      if (!selectRoot) {
+        return
+      }
+      const applyVisibility = (el) => {
+        if (!el || !el.style) {
+          return
+        }
+        if (hidden) {
+          el.style.color = 'transparent'
+          el.style.webkitTextFillColor = 'transparent'
+          el.style.textShadow = 'none'
+          el.style.opacity = '0'
+          return
+        }
+        el.style.color = ''
+        el.style.webkitTextFillColor = ''
+        el.style.textShadow = ''
+        el.style.opacity = ''
+      }
+      applyVisibility(selectRoot.querySelector('.el-input__inner'))
+      applyVisibility(selectRoot.querySelector('.el-select__input'))
+    },
+    async refreshSidebarDevices() {
+      await this.loadMonitorDevices()
+    },
+    async loadMonitorFences() {
+      const response = await listFenceMonitorFences()
+      this.activeFences = this.normalizeRows(response)
+      if (this.showSidebar) {
+        this.syncFenceSidebarOptionsByRows(this.activeFences)
+      }
+      this.renderMonitorMap()
+      this.renderEditorMap()
+    },
+    async loadRecentAlarms(options = {}) {
+      const hasDeviceId = Object.prototype.hasOwnProperty.call(options, 'deviceId')
+      const deviceId = hasDeviceId ? options.deviceId : this.selectedDeviceId
+      const hasFenceId = Object.prototype.hasOwnProperty.call(options, 'fenceId')
+      const fenceId = hasFenceId ? options.fenceId : this.selectedMonitorFenceId
+      const requestSeq = options.requestSeq
+      const response = await listFenceAlarms({
+        pageNum: 1,
+        pageSize: 8,
+        deviceId: deviceId || undefined,
+        fenceId: this.normalizeFenceId(fenceId) || undefined
+      })
+      if (requestSeq !== undefined && requestSeq !== this.selectedDeviceRequestSeq) {
+        return
+      }
+      this.recentAlarms = this.normalizeRows(response)
+    },
+    async refreshMonitor() {
+      await Promise.all([this.loadOverview(), this.loadMonitorDevices(), this.loadMonitorFences(), this.loadRecentAlarms()])
+    },
+    async loadFenceList(options = {}) {
+      const hasDeviceId = Object.prototype.hasOwnProperty.call(options, 'deviceId')
+      const deviceId = hasDeviceId ? options.deviceId : undefined
+      const hasPageNum = Object.prototype.hasOwnProperty.call(options, 'pageNum')
+      const hasPageSize = Object.prototype.hasOwnProperty.call(options, 'pageSize')
+      const pageNum = hasPageNum ? options.pageNum : this.fencePageNum
+      const pageSize = hasPageSize ? options.pageSize : this.fencePageSize
+      const requestSeq = options.requestSeq
+      this.fenceLoading = true
+      try {
+        const response = await listFence({
+          ...this.fenceQuery,
+          pageNum,
+          pageSize,
+          deviceId: deviceId || undefined
+        })
+        if (requestSeq !== undefined && requestSeq !== this.selectedDeviceRequestSeq) {
+          return
+        }
+        this.fenceList = this.normalizeRows(response)
+        this.fenceTotal = this.normalizeTotal(response)
+        this.fencePageNum = pageNum
+        this.fencePageSize = pageSize
+        this.renderMonitorMap()
+        this.renderEditorMap()
+      } finally {
+        this.fenceLoading = false
+      }
+    },
+    async loadAlarmList(options = {}) {
+      const hasDeviceId = Object.prototype.hasOwnProperty.call(options, 'deviceId')
+      const deviceId = hasDeviceId ? options.deviceId : undefined
+      const requestSeq = options.requestSeq
+      const hasPageNum = Object.prototype.hasOwnProperty.call(options, 'pageNum')
+      const hasPageSize = Object.prototype.hasOwnProperty.call(options, 'pageSize')
+      const pageNum = hasPageNum ? options.pageNum : 1
+      const pageSize = hasPageSize ? options.pageSize : this.alarmPageSize
+      const startAlarmTime = Array.isArray(this.alarmTimeRange) && this.alarmTimeRange.length === 2 ? this.alarmTimeRange[0] : undefined
+      const endAlarmTime = Array.isArray(this.alarmTimeRange) && this.alarmTimeRange.length === 2 ? this.alarmTimeRange[1] : undefined
+      this.alarmLoading = true
+      try {
+        const response = await listFenceAlarms({
+          ...this.alarmQuery,
+          startAlarmTime,
+          endAlarmTime,
+          pageNum,
+          pageSize,
+          deviceId: deviceId || undefined
+        })
+        if (requestSeq !== undefined && requestSeq !== this.selectedDeviceRequestSeq) {
+          return
+        }
+        this.alarmList = this.normalizeRows(response)
+        this.alarmTotal = this.normalizeTotal(response)
+        this.alarmPageNum = pageNum
+        this.alarmPageSize = pageSize
+      } finally {
+        this.alarmLoading = false
+      }
+    },
+    clearSelectedDevicePanels() {
+      this.recentAlarms = []
+      this.alarmList = []
+      this.alarmTotal = 0
+      this.alarmPageNum = 1
+      this.renderMonitorMap()
+    },
+    async refreshSelectedDevicePanels(requestSeq = this.selectedDeviceRequestSeq, deviceId = this.selectedDeviceId) {
+      await this.loadRecentAlarms({ requestSeq, deviceId })
+    },
+    async loadDeviceOptions() {
+      this.deviceOptionLoading = true
+      try {
+        const keyword = (this.deviceOptionKeyword || '').trim()
+        const response = await listFenceDeviceOptions({
+          keyword,
+          pageNum: this.deviceOptionPageNum,
+          pageSize: this.deviceOptionPageSize
+        })
+        const fetchedRows = this.normalizeRows(response).map(item => {
+          const resolvedId = this.resolveDeviceOptionId(item)
+          return resolvedId ? { ...item, id: resolvedId } : item
+        })
+        ;(fetchedRows || []).forEach(item => {
+          this.$set(this.deviceOptionCacheMap, item.id, item)
+          this.$set(this.deviceOptionCacheMap, this.normalizeDeviceId(item.id), item)
+        })
+        const shouldPinInitialSelected = this.deviceOptionPinInitialSelected && this.deviceOptionPageNum === 1 && !keyword
+        if (shouldPinInitialSelected && (this.deviceOptionInitialSelectedIds || []).length) {
+          await this.ensureFenceDeviceCache(this.deviceOptionInitialSelectedIds)
+          const selectedRows = this.collectDeviceRowsByIds(this.deviceOptionInitialSelectedIds)
+          const selectedIdSet = new Set(selectedRows.map(item => this.resolveDeviceOptionId(item)))
+          this.deviceOptions = [...selectedRows, ...fetchedRows.filter(item => !selectedIdSet.has(this.resolveDeviceOptionId(item)))]
+            .slice(0, this.deviceOptionPageSize)
+        } else {
+          this.deviceOptions = fetchedRows
+        }
+        this.deviceOptionTotal = this.normalizeTotal(response)
+        ;(this.deviceOptions || []).forEach(item => {
+          const resolvedId = this.resolveDeviceOptionId(item)
+          this.$set(this.deviceOptionCacheMap, item.id, item)
+          this.$set(this.deviceOptionCacheMap, resolvedId, item)
+        })
+        this.applyDeviceOptionSelectionState()
+        this.deviceOptionPinInitialSelected = false
+      } finally {
+        this.deviceOptionLoading = false
+      }
+    },
+    openDeviceSelector() {
+      this.deviceOptionKeyword = ''
+      this.deviceOptionPageNum = 1
+      this.deviceDraftIds = Array.isArray(this.fenceForm.deviceIds) ? [...this.fenceForm.deviceIds] : []
+      this.deviceOptionInitialSelectedIds = [...this.deviceDraftIds]
+      this.deviceOptionPinInitialSelected = true
+      this.deviceSelectorVisible = true
+    },
+    handleDeviceDialogOpen() {
+      this.loadDeviceOptions()
+    },
+    handleDeviceDialogClose() {
+      this.deviceOptionKeyword = ''
+      this.deviceOptionInitialSelectedIds = []
+      this.deviceOptionPinInitialSelected = false
+      this.loadDeviceOptions()
+    },
+    searchDeviceOptions() {
+      this.deviceOptionPageNum = 1
+      this.loadDeviceOptions()
+    },
+    resetDeviceOptionKeyword() {
+      this.deviceOptionKeyword = ''
+      this.deviceOptionPageNum = 1
+      this.loadDeviceOptions()
+    },
+    handleDeviceOptionPagination(pagination) {
+      this.deviceOptionPageNum = pagination.page
+      this.deviceOptionPageSize = pagination.limit
+      this.loadDeviceOptions()
+    },
+    async ensureFenceDeviceCache(deviceIds) {
+      const ids = (deviceIds || []).filter(id => {
+        const normalized = this.normalizeDeviceId(id)
+        return normalized && !this.deviceOptionCacheMap[id] && !this.deviceOptionCacheMap[normalized]
+      })
+      if (!ids.length) {
+        return
+      }
+      const response = await listFenceDeviceOptions({ deviceIds: ids.join(',') })
+      this.normalizeRows(response).forEach(item => {
+        const resolvedId = this.resolveDeviceOptionId(item)
+        const normalizedItem = resolvedId ? { ...item, id: resolvedId } : item
+        this.$set(this.deviceOptionCacheMap, normalizedItem.id, normalizedItem)
+        this.$set(this.deviceOptionCacheMap, resolvedId, normalizedItem)
+      })
+    },
+    async loadEditorMapDeviceOptions(deviceIds) {
+      const ids = this.normalizeDeviceIds(deviceIds)
+      if (!ids.length) {
+        this.editorDeviceOptions = []
+        return []
+      }
+      const response = await listFenceDeviceOptions({ deviceIds: ids.join(',') })
+      const rows = this.normalizeRows(response)
+      this.editorDeviceOptions = rows
+      return rows
+    },
+    collectDeviceRowsByIds(deviceIds) {
+      const used = new Set()
+      return (deviceIds || []).map(id => {
+        const normalized = this.normalizeDeviceId(id)
+        return this.deviceOptionCacheMap[normalized] || this.deviceOptionCacheMap[id]
+      }).filter(item => {
+        if (!item) {
+          return false
+        }
+        const normalized = this.resolveDeviceOptionId(item)
+        if (!normalized || used.has(normalized)) {
+          return false
+        }
+        used.add(normalized)
+        return true
+      })
+    },
+    handleDeviceOptionSelectionChange(selection) {
+      if (this.syncingDeviceOptionSelection) {
+        return
+      }
+      const currentPageIds = new Set((this.deviceOptions || []).map(item => this.resolveDeviceOptionId(item)))
+      const selectedCurrentPageIds = (selection || []).map(item => this.resolveDeviceOptionId(item))
+      const selectedCurrentPageIdSet = new Set(selectedCurrentPageIds.map(id => this.normalizeDeviceId(id)))
+      const keptDeviceIds = (this.deviceDraftIds || []).filter(id => !currentPageIds.has(this.normalizeDeviceId(id)))
+      const mergedDeviceIds = [...keptDeviceIds, ...selectedCurrentPageIds]
+      this.deviceDraftIds = Array.from(new Map(
+        mergedDeviceIds.map(id => [this.normalizeDeviceId(id), id])
+      ).values()).filter(id => {
+        const normalized = this.normalizeDeviceId(id)
+        return normalized && (!currentPageIds.has(normalized) || selectedCurrentPageIdSet.has(normalized))
+      })
+      this.applyDeviceOptionSelectionState()
+    },
+    handleDeviceOptionRowDblClick(row) {
+      if (!this.$refs.deviceOptionTable) {
+        return
+      }
+      const rowId = this.resolveDeviceOptionId(row)
+      const selected = (this.deviceDraftIds || []).some(id => this.isSameDeviceId(id, rowId))
+      this.$refs.deviceOptionTable.toggleRowSelection(row, !selected)
+    },
+    syncDeviceTableSelection() {
+      if (!this.deviceSelectorVisible || !this.$refs.deviceOptionTable) {
+        this.syncingDeviceOptionSelection = false
+        return
+      }
+      this.syncingDeviceOptionSelection = true
+      this.$refs.deviceOptionTable.clearSelection()
+      const selectedIds = new Set((this.deviceDraftIds || []).map(id => this.normalizeDeviceId(id)))
+      ;(this.deviceOptions || []).forEach(item => {
+        if (selectedIds.has(this.resolveDeviceOptionId(item))) {
+          this.$refs.deviceOptionTable.toggleRowSelection(item, true)
+        }
+      })
+      this.$nextTick(() => {
+        this.syncingDeviceOptionSelection = false
+      })
+    },
+    applyDeviceOptionSelectionState() {
+      this.syncingDeviceOptionSelection = true
+      this.$nextTick(() => this.syncDeviceTableSelection())
+    },
+    async confirmDeviceSelector() {
+      this.editorFocusedFence = null
+      this.fenceForm.deviceIds = [...this.deviceDraftIds]
+      this.deviceSelectorVisible = false
+      this.editorDeviceOptions = []
+      this.renderEditorMap()
+      if (this.fenceForm.deviceIds.length) {
+        try {
+          await this.loadEditorMapDeviceOptions(this.fenceForm.deviceIds)
+          this.renderEditorMap()
+        } catch (error) {
+          this.$message.warning((error && error.message) || this.$t('fenceDevice.message.devicePointLoadFailed'))
+        }
+      }
+    },
+    selectDevice(item) {
+      this.syncSelectedMonitorFenceContext(item)
+      this.selectedDeviceId = item.deviceId
+      if (this.activeTab === 'monitor') {
+        this.focusMonitorDevice(item)
+      }
+    },
+    monitorStateNormalActionKey(item) {
+      const fenceId = item && item._groupFenceId
+      const deviceId = item && item.deviceId
+      if (!fenceId || !deviceId) {
+        return ''
+      }
+      return `${fenceId}_${deviceId}`
+    },
+    canSetMonitorStateNormal(item) {
+      if (!item || !item._groupFenceId || !item.deviceId) {
+        return false
+      }
+      return this.resolveMonitorDeviceStatusType(item) === 'alert'
+    },
+    isSettingMonitorStateNormal(item) {
+      const key = this.monitorStateNormalActionKey(item)
+      return key ? !!this.settingMonitorStateNormalKeys[key] : false
+    },
+    handleMonitorNormalSwitchChange(value, item) {
+      if (!value) {
+        return
+      }
+      this.handleSetMonitorStateNormal(item)
+    },
+    async handleSetMonitorStateNormal(item) {
+      if (!this.canSetMonitorStateNormal(item)) {
+        return
+      }
+      const key = this.monitorStateNormalActionKey(item)
+      if (!key || this.settingMonitorStateNormalKeys[key]) {
+        return
+      }
+      this.$set(this.settingMonitorStateNormalKeys, key, true)
+      try {
+        await setFenceMonitorStateNormal({
+          fenceId: item._groupFenceId,
+          deviceId: item.deviceId
+        })
+        this.$message.success(this.$t('fenceDevice.message.markNormalSuccess'))
+        await this.loadMonitorDevices()
+      } catch (error) {
+        this.$message.error((error && error.message) || this.$t('fenceDevice.message.markNormalFailed'))
+      } finally {
+        this.$delete(this.settingMonitorStateNormalKeys, key)
+      }
+    },
+    handleAlarmSearch() {
+      this.alarmPageNum = 1
+      this.loadAlarmList({ pageNum: 1, pageSize: this.alarmPageSize })
+    },
+    handleAlarmPagination(pagination) {
+      this.alarmPageNum = pagination.page
+      this.alarmPageSize = pagination.limit
+      this.loadAlarmList({ pageNum: this.alarmPageNum, pageSize: this.alarmPageSize })
+    },
+    resetFenceQuery() {
+      this.fenceQuery = { keyword: '', status: undefined, shapeType: '' }
+      this.fencePageNum = 1
+      this.loadFenceList()
+    },
+    handleFencePagination(pagination) {
+      this.fencePageNum = pagination.page
+      this.fencePageSize = pagination.limit
+      this.loadFenceList({ pageNum: this.fencePageNum, pageSize: this.fencePageSize })
+    },
+    resetAlarmQuery() {
+      this.alarmQuery = { sn: '', fenceName: '', deviceAlias: '', alarmType: '', alarmLevel: '' }
+      this.alarmTimeRange = []
+      this.alarmPageNum = 1
+      this.loadAlarmList({ pageNum: 1, pageSize: this.alarmPageSize })
+    },
+    async startCreateFence() {
+      this.editorFocusedFence = null
+      await this.switchTab('fence')
+      this.resetEditor(true)
+      this.editorNotice = this.$t('fenceDevice.editor.createHint')
+    },
+    async startEditFence(row) {
+      this.editorFocusedFence = null
+      await this.switchTab('fence')
+      const response = await getFence(row.id)
+      const data = this.normalizeObject(response)
+      this.currentFenceId = data.id
+      this.fenceForm = {
+        ...this.getDefaultFenceForm(),
+        ...data,
+        scheduleType: this.normalizeScheduleTypeValue(data.scheduleType),
+        alarmRules: this.normalizeAlarmRuleValue(data.alarmRules),
+        deviceIds: this.normalizeDeviceIds(data.deviceIds)
+      }
+      if (this.fenceForm.scheduleType !== 'custom') {
+        this.fenceForm.scheduleStartTime = ''
+        this.fenceForm.scheduleEndTime = ''
+      }
+      this.fenceForm.boundaryToleranceMeter = 5
+      this.fenceForm.repeatIntervalSeconds = 0
+      this.fenceForm.alarmCountdownMinutes = this.countdownMinutesToHours(this.fenceForm.alarmCountdownMinutes)
+      this.editorNotice = this.$t('fenceDevice.editor.editHint')
+      this.editorDeviceOptions = []
+      this.renderEditorMap()
+      if (this.fenceForm.deviceIds.length) {
+        try {
+          await this.loadEditorMapDeviceOptions(this.fenceForm.deviceIds)
+          this.renderEditorMap()
+        } catch (error) {
+          this.$message.warning((error && error.message) || this.$t('fenceDevice.message.devicePointLoadFailed'))
+        }
+      }
+    },
+    resetEditor(renderMap = true) {
+      this.editorFocusedFence = null
+      this.fenceForm = this.getDefaultFenceForm()
+      this.editorDeviceOptions = []
+      this.currentFenceId = null
+      this.editorNotice = this.$t('fenceDevice.editor.idleHint')
+      if (this.editorDrawGroup) this.editorDrawGroup.clearLayers()
+      if (renderMap) this.renderEditorMap()
+    },
+    async submitFenceForm() {
+      if (!this.fenceForm.fenceName) {
+        this.$message.warning(this.$t('fenceDevice.message.nameRequired'))
+        return
+      }
+      if (!this.fenceForm.alarmRules) {
+        this.$message.warning(this.$t('fenceDevice.message.ruleRequired'))
+        return
+      }
+      if (!this.validateShape()) return
+      const payload = clone(this.fenceForm)
+      payload.scheduleType = this.normalizeScheduleTypeValue(payload.scheduleType)
+      if (payload.scheduleType !== 'custom') {
+        payload.scheduleStartTime = ''
+        payload.scheduleEndTime = ''
+      }
+      payload.boundaryToleranceMeter = 5
+      payload.repeatIntervalSeconds = 0
+      payload.alarmCountdownMinutes = this.countdownHoursToMinutes(payload.alarmCountdownMinutes)
+      if (payload.id) {
+        await updateFence(payload)
+      } else {
+        await addFence(payload)
+      }
+      this.$modal.msgSuccess(this.$t('fenceDevice.message.saveSuccess'))
+      if (this.isFenceMenuMode) {
+        await this.loadFenceList()
+      } else {
+        await Promise.all([this.loadFenceList(), this.loadMonitorFences(), this.loadRecentAlarms(), this.loadOverview(), this.refreshSidebarDevices()])
+      }
+      this.resetEditor()
+    },
+    validateShape() {
+      if (this.fenceForm.shapeType === 'circle') {
+        if (!this.isFiniteNumber(this.fenceForm.centerLat) || !this.isFiniteNumber(this.fenceForm.centerLng) || !this.isFiniteNumber(this.fenceForm.radiusMeter)) {
+          this.$message.warning(this.$t('fenceDevice.message.circleRequired'))
+          return false
+        }
+        return true
+      }
+      if (!this.fenceForm.geomWkt || !this.fenceForm.shapeDataJson) {
+        this.$message.warning(this.$t('fenceDevice.message.shapeRequired'))
+        return false
+      }
+      return true
+    },
+    async handleRemoveFence(row) {
+      const ids = row && row.id ? [row.id] : []
+      if (!ids.length) {
+        return
+      }
+      await this.$modal.confirm(this.$t('fenceDevice.message.confirmRemove'))
+      await removeFence(ids.join(','))
+      this.$modal.msgSuccess(this.$t('fenceDevice.message.removeSuccess'))
+      if (this.isFenceMenuMode) {
+        await this.loadFenceList()
+      } else {
+        await Promise.all([this.loadFenceList(), this.loadMonitorFences(), this.loadOverview()])
+      }
+      if (ids.indexOf(this.fenceForm.id) > -1) this.resetEditor()
+    },
+    async handleFenceStatusChange(row, value) {
+      await changeFenceStatus(row.id, value ? 0 : 1)
+      if (this.isFenceMenuMode) {
+        await this.loadFenceList()
+      } else {
+        await Promise.all([this.loadFenceList(), this.loadMonitorFences(), this.loadOverview()])
+      }
+    },
+    async handleExecuteScan() {
+      const response = await executeFenceScan()
+      const summary = this.normalizeObject(response)
+      this.$modal.msgSuccess(this.$t('fenceDevice.message.scanSuccessDetail', { deviceCount: summary.deviceCount || 0, evaluatedCount: summary.evaluatedCount || 0, alarmCount: summary.alarmCount || 0 }))
+      if (this.activeTab === 'alarm') {
+        await Promise.all([this.refreshMonitor(), this.loadAlarmList()])
+        return
+      }
+      await this.refreshMonitor()
+    },
+    openHandleDialog(row) {
+      this.selectedAlarmId = row.id
+      this.handleForm = { handleStatus: row.handleStatus === 'closed' ? 'closed' : 'acked', handleRemark: '' }
+      this.handleDialogVisible = true
+    },
+    async submitHandleAlarm() {
+      await handleFenceAlarm(this.selectedAlarmId, this.handleForm)
+      this.$modal.msgSuccess(this.$t('fenceDevice.message.handleSuccess'))
+      this.handleDialogVisible = false
+      await Promise.all([this.loadAlarmList(), this.loadRecentAlarms(), this.loadOverview()])
+    },
+    async handleTabChange() {
+      await this.$nextTick()
+      if (this.activeTab === 'monitor') {
+        await this.ensureMonitorMap()
+        this.renderMonitorMap()
+      }
+      if (this.activeTab === 'fence') {
+        await this.ensureEditorMap()
+        this.renderEditorMap()
+      }
+    },
+    async handleMapProviderChange() {
+      this.mapProvider = this.resolvedMapProvider
+      this.destroyMap('monitor')
+      this.destroyMap('editor')
+      this.destroyMap('alarmLocate')
+      await this.$nextTick()
+      if (this.activeTab === 'monitor') {
+        await this.ensureMonitorMap()
+        this.renderMonitorMap()
+      } else if (this.activeTab === 'fence') {
+        await this.ensureEditorMap()
+        this.renderEditorMap()
+      }
+      if (this.alarmLocateDialogVisible) {
+        await this.ensureAlarmLocateMap()
+        this.renderAlarmLocateMarker()
+      }
+    },
+    async toggleFenceMapFullscreen() {
+      const container = this.$refs.fenceMapWrap
+      if (!container) {
+        return
+      }
+      if (document.fullscreenElement) {
+        await document.exitFullscreen()
+        return
+      }
+      if (container.requestFullscreen) {
+        await container.requestFullscreen()
+      }
+    },
+    handleFenceFullscreenChange() {
+      const container = this.$refs.fenceMapWrap
+      this.fenceMapFullscreen = !!(container && document.fullscreenElement && document.fullscreenElement === container)
+      this.$nextTick(() => {
+        if (this.editorMap) {
+          this.editorMap.invalidateSize(true)
+        }
+      })
+    },
+    handleWindowResize() {
+      if (this.resizeTimer) clearTimeout(this.resizeTimer)
+      this.resizeTimer = setTimeout(() => {
+        if (this.monitorMap) this.monitorMap.invalidateSize(true)
+        if (this.editorMap) this.editorMap.invalidateSize(true)
+        if (this.alarmLocateMap) this.alarmLocateMap.invalidateSize(true)
+        this.updateFenceSidebarMarquee()
+      }, 120)
+    },
+    async ensureMonitorMap() {
+      if (this.monitorMap || !this.$refs.monitorMap) return
+      const L = await loadLeaflet()
+      this.monitorLeaflet = L
+      this.monitorMap = L.map(this.$refs.monitorMap, { center: DEFAULT_CENTER, zoom: DEFAULT_ZOOM, zoomControl: true })
+      this.createTileLayer(L).addTo(this.monitorMap)
+      this.monitorFenceGroup = L.featureGroup().addTo(this.monitorMap)
+      this.monitorDeviceGroup = L.featureGroup().addTo(this.monitorMap)
+    },
+    async ensureEditorMap() {
+      if (this.editorMap || !this.$refs.editorMap) return
+      const L = await loadLeafletDraw()
+      this.editorLeaflet = L
+      this.applyLeafletDrawLocale(L)
+      this.editorMap = L.map(this.$refs.editorMap, { center: DEFAULT_CENTER, zoom: DEFAULT_ZOOM, zoomControl: true })
+      this.createTileLayer(L).addTo(this.editorMap)
+      this.editorReferenceGroup = L.featureGroup().addTo(this.editorMap)
+      this.editorDeviceGroup = L.featureGroup().addTo(this.editorMap)
+      this.editorDrawGroup = L.featureGroup().addTo(this.editorMap)
+      this.rebuildEditorDrawControl()
+      this.editorMap.on(L.Draw.Event.CREATED, event => {
+        this.editorDrawGroup.clearLayers()
+        this.editorDrawGroup.addLayer(event.layer)
+        this.syncShapeFromLayer(event.layer)
+      })
+      this.editorMap.on(L.Draw.Event.EDITED, () => this.syncEditorShape())
+      this.editorMap.on(L.Draw.Event.DELETED, () => this.clearShapeOnly())
+    },
+    rebuildEditorDrawControl() {
+      if (!this.editorLeaflet || !this.editorMap || !this.editorDrawGroup) {
+        return
+      }
+      if (this.editorDrawControl) {
+        this.editorMap.removeControl(this.editorDrawControl)
+      }
+      this.editorDrawControl = new this.editorLeaflet.Control.Draw({
+        draw: { polygon: true, rectangle: true, circle: true, polyline: false, marker: false, circlemarker: false },
+        edit: { featureGroup: this.editorDrawGroup }
+      })
+      this.editorMap.addControl(this.editorDrawControl)
+    },
+    applyLeafletDrawLocale(L) {
+      if (!L || !L.drawLocal) {
+        return
+      }
+      const resolveDrawText = (key, fallback) => {
+        const fullKey = 'fenceDevice.draw.' + key
+        const translated = this.$t(fullKey)
+        return (typeof translated === 'string' && translated && translated !== fullKey) ? translated : fallback
+      }
+      const drawLocal = L.drawLocal
+      drawLocal.draw = drawLocal.draw || {}
+      drawLocal.draw.toolbar = drawLocal.draw.toolbar || {}
+      drawLocal.draw.toolbar.actions = drawLocal.draw.toolbar.actions || {}
+      drawLocal.draw.toolbar.finish = drawLocal.draw.toolbar.finish || {}
+      drawLocal.draw.toolbar.undo = drawLocal.draw.toolbar.undo || {}
+      drawLocal.draw.toolbar.buttons = drawLocal.draw.toolbar.buttons || {}
+      drawLocal.draw.handlers = drawLocal.draw.handlers || {}
+      drawLocal.draw.handlers.circle = drawLocal.draw.handlers.circle || {}
+      drawLocal.draw.handlers.circle.tooltip = drawLocal.draw.handlers.circle.tooltip || {}
+      drawLocal.draw.handlers.rectangle = drawLocal.draw.handlers.rectangle || {}
+      drawLocal.draw.handlers.rectangle.tooltip = drawLocal.draw.handlers.rectangle.tooltip || {}
+      drawLocal.draw.handlers.polygon = drawLocal.draw.handlers.polygon || {}
+      drawLocal.draw.handlers.polygon.tooltip = drawLocal.draw.handlers.polygon.tooltip || {}
+      drawLocal.draw.handlers.simpleshape = drawLocal.draw.handlers.simpleshape || {}
+      drawLocal.draw.handlers.simpleshape.tooltip = drawLocal.draw.handlers.simpleshape.tooltip || {}
+      drawLocal.edit = drawLocal.edit || {}
+      drawLocal.edit.toolbar = drawLocal.edit.toolbar || {}
+      drawLocal.edit.toolbar.actions = drawLocal.edit.toolbar.actions || {}
+      drawLocal.edit.toolbar.save = drawLocal.edit.toolbar.save || {}
+      drawLocal.edit.toolbar.cancel = drawLocal.edit.toolbar.cancel || {}
+      drawLocal.edit.toolbar.buttons = drawLocal.edit.toolbar.buttons || {}
+      drawLocal.edit.handlers = drawLocal.edit.handlers || {}
+      drawLocal.edit.handlers.edit = drawLocal.edit.handlers.edit || {}
+      drawLocal.edit.handlers.edit.tooltip = drawLocal.edit.handlers.edit.tooltip || {}
+      drawLocal.edit.handlers.remove = drawLocal.edit.handlers.remove || {}
+      drawLocal.edit.handlers.remove.tooltip = drawLocal.edit.handlers.remove.tooltip || {}
+
+      drawLocal.draw.toolbar.actions.title = resolveDrawText('toolbar.actions.title', 'Cancel drawing')
+      drawLocal.draw.toolbar.actions.text = resolveDrawText('toolbar.actions.text', 'Cancel')
+      drawLocal.draw.toolbar.finish.title = resolveDrawText('toolbar.finish.title', 'Finish drawing')
+      drawLocal.draw.toolbar.finish.text = resolveDrawText('toolbar.finish.text', 'Finish')
+      drawLocal.draw.toolbar.undo.title = resolveDrawText('toolbar.undo.title', 'Delete last point')
+      drawLocal.draw.toolbar.undo.text = resolveDrawText('toolbar.undo.text', 'Undo')
+      drawLocal.draw.toolbar.buttons.polygon = resolveDrawText('toolbar.buttons.polygon', 'Draw polygon fence')
+      drawLocal.draw.toolbar.buttons.rectangle = resolveDrawText('toolbar.buttons.rectangle', 'Draw rectangle fence')
+      drawLocal.draw.toolbar.buttons.circle = resolveDrawText('toolbar.buttons.circle', 'Draw circular fence')
+
+      drawLocal.draw.handlers.circle.tooltip.start = resolveDrawText('handlers.circle.start', 'Click and drag to draw a circular fence')
+      drawLocal.draw.handlers.rectangle.tooltip.start = resolveDrawText('handlers.rectangle.start', 'Click and drag to draw a rectangular fence')
+      drawLocal.draw.handlers.simpleshape.tooltip.end = resolveDrawText('handlers.simpleShape.end', 'Release mouse to finish drawing')
+      drawLocal.draw.handlers.polygon.tooltip.start = resolveDrawText('handlers.polygon.start', 'Click map to start drawing fence')
+      drawLocal.draw.handlers.polygon.tooltip.cont = resolveDrawText('handlers.polygon.cont', 'Click to continue drawing')
+      drawLocal.draw.handlers.polygon.tooltip.end = resolveDrawText('handlers.polygon.end', 'Click first point to finish')
+
+      drawLocal.edit.toolbar.actions.save.title = resolveDrawText('edit.actions.saveTitle', 'Save changes')
+      drawLocal.edit.toolbar.actions.save.text = resolveDrawText('edit.actions.saveText', 'Save')
+      drawLocal.edit.toolbar.actions.cancel.title = resolveDrawText('edit.actions.cancelTitle', 'Cancel editing')
+      drawLocal.edit.toolbar.actions.cancel.text = resolveDrawText('edit.actions.cancelText', 'Cancel')
+      drawLocal.edit.toolbar.buttons.edit = resolveDrawText('edit.buttons.edit', 'Edit fence')
+      drawLocal.edit.toolbar.buttons.editDisabled = resolveDrawText('edit.buttons.editDisabled', 'No editable fence')
+      drawLocal.edit.toolbar.buttons.remove = resolveDrawText('edit.buttons.remove', 'Delete fence')
+      drawLocal.edit.toolbar.buttons.removeDisabled = resolveDrawText('edit.buttons.removeDisabled', 'No removable fence')
+      drawLocal.edit.handlers.edit.tooltip.text = resolveDrawText('edit.handlers.editText', 'Drag handles to adjust fence')
+      drawLocal.edit.handlers.edit.tooltip.subtext = resolveDrawText('edit.handlers.editSubtext', 'Click cancel to discard changes')
+      drawLocal.edit.handlers.remove.tooltip.text = resolveDrawText('edit.handlers.removeText', 'Click a fence to remove')
+    },
+    createTileLayer(L) {
+      if (this.resolvedMapProvider === 'google') {
+        return L.tileLayer(GOOGLE_TILE_URL, {
+          maxZoom: 18
+        })
+      }
+      if (this.resolvedMapProvider === 'amap') {
+        return L.tileLayer(AMAP_TILE_URL, {
+          subdomains: ['1', '2', '3', '4'],
+          attribution: '&copy; AutoNavi',
+          maxZoom: 18
+        })
+      }
+      if (this.resolvedMapProvider === 'maptiler') {
+        return L.tileLayer(MAPTILER_TILE_URL + encodeURIComponent(this.mapConfig.maptilerKey), {
+          attribution: '&copy; MapTiler &copy; OpenStreetMap',
+          maxZoom: 18
+        })
+      }
+      return L.tileLayer(GOOGLE_TILE_URL, {
+        maxZoom: 18
+      })
+    },
+    normalizeMapColor(color) {
+      const text = String(color || '').trim()
+      return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(text) ? text : '#2563eb'
+    },
+    createFenceWaveLayers(item, color, L) {
+      if (!item || !L) {
+        return []
+      }
+      const normalizedColor = this.normalizeMapColor(color)
+      const waveStyles = [
+        {
+          color: normalizedColor,
+          weight: 2.4,
+          opacity: 0.78,
+          fillOpacity: 0,
+          className: 'fence-wave-path fence-wave-path--one',
+          interactive: false
+        },
+        {
+          color: normalizedColor,
+          weight: 2.4,
+          opacity: 0.7,
+          fillOpacity: 0,
+          className: 'fence-wave-path fence-wave-path--two',
+          interactive: false
+        }
+      ]
+      return waveStyles
+        .map(style => this.createFenceLayer(item, style, L))
+        .filter(Boolean)
+    },
+    createPulseMarker(L, lat, lng, color, options = {}) {
+      if (!L || !this.hasCoordinatePair(lat, lng)) {
+        return null
+      }
+      const size = Number(options.size || 48)
+      const core = Number(options.core || 12)
+      const duration = Number(options.duration || 2.4)
+      const className = options.className || 'monitor-pulse-marker'
+      const normalizedColor = this.normalizeMapColor(color)
+      const icon = L.divIcon({
+        className,
+        html: [
+          '<span class="monitor-pulse" style="color: ' + normalizedColor + '; --pulse-size: ' + size + 'px; --pulse-core: ' + core + 'px; --pulse-duration: ' + duration + 's;">',
+          '<span class="monitor-pulse-ring monitor-pulse-ring--1"></span>',
+          '<span class="monitor-pulse-ring monitor-pulse-ring--2"></span>',
+          '<span class="monitor-pulse-ring monitor-pulse-ring--3"></span>',
+          '<span class="monitor-pulse-core"></span>',
+          '</span>'
+        ].join(''),
+        iconSize: [size, size],
+        iconAnchor: [size / 2, size / 2]
+      })
+      return L.marker([Number(lat), Number(lng)], {
+        icon,
+        interactive: false,
+        keyboard: false,
+        riseOnHover: true,
+        zIndexOffset: 1000
+      })
+    },
+    createAlarmPinMarker(L, lat, lng, options = {}) {
+      if (!L || !this.hasCoordinatePair(lat, lng)) {
+        return null
+      }
+      const size = Number(options.size || 46)
+      const icon = L.divIcon({
+        className: 'alarm-locate-pin-marker',
+        html: [
+          '<span class="alarm-locate-pin">',
+          '<span class="alarm-locate-pin__ring alarm-locate-pin__ring--1"></span>',
+          '<span class="alarm-locate-pin__ring alarm-locate-pin__ring--2"></span>',
+          '<span class="alarm-locate-pin__ring alarm-locate-pin__ring--3"></span>',
+          '<span class="alarm-locate-pin__core"></span>',
+          '</span>'
+        ].join(''),
+        iconSize: [size, size],
+        iconAnchor: [size / 2, size / 2]
+      })
+      return L.marker([Number(lat), Number(lng)], {
+        icon,
+        interactive: options.interactive !== false,
+        keyboard: false,
+        riseOnHover: true,
+        zIndexOffset: 1000
+      })
+    },
+    renderMonitorMap() {
+      if (!this.monitorMap || !this.monitorLeaflet) return
+      this.monitorFenceGroup.clearLayers()
+      this.monitorDeviceGroup.clearLayers()
+      this.clearMonitorPulseAnimation()
+      const bounds = []
+      const fenceBounds = []
+      ;(this.monitorDisplayFences || []).forEach((item, index) => {
+        const style = this.getFenceSeriesStyle(index)
+        const layer = this.createFenceLayer(item, style, this.monitorLeaflet)
+        if (layer) {
+          layer.bindTooltip(item.fenceName || '-')
+          this.monitorFenceGroup.addLayer(layer)
+          const waveLayers = this.createFenceWaveLayers(item, style.color, this.monitorLeaflet)
+          waveLayers.forEach(waveLayer => {
+            this.monitorFenceGroup.addLayer(waveLayer)
+          })
+          this.extendBounds(bounds, layer)
+          this.extendBounds(fenceBounds, layer)
+        }
+      })
+      const selectedLat = this.resolveOptionLat(this.selectedDevice)
+      const selectedLng = this.resolveOptionLng(this.selectedDevice)
+      if (this.selectedDevice && this.hasCoordinatePair(selectedLat, selectedLng)) {
+        const markerColor = this.selectedDevice.lastAlarmLevel
+          ? this.getAlarmLevelColor(this.selectedDevice.lastAlarmLevel)
+          : '#ef4444'
+        const coreMarker = this.monitorLeaflet.circleMarker([selectedLat, selectedLng], {
+          radius: 10,
+          color: '#ffffff',
+          weight: 2.6,
+          fillColor: markerColor,
+          fillOpacity: 0.96
+        })
+        coreMarker.bindPopup('<strong>' + (this.selectedDevice.alias || this.selectedDevice.sn || '-') + '</strong><br/>SN: ' + (this.selectedDevice.sn || '-') + '<br/>' + (this.selectedDevice.address || '-') + '<br/>' + this.formatDateTime(this.selectedDevice.locationTime))
+        coreMarker.addTo(this.monitorDeviceGroup)
+        this.startMonitorPulseAnimation(selectedLat, selectedLng, markerColor)
+        bounds.push([selectedLat, selectedLng])
+        if (fenceBounds.length) {
+          const focusBounds = [...fenceBounds, [selectedLat, selectedLng]]
+          this.fitMap(this.monitorMap, this.monitorLeaflet, focusBounds)
+        } else {
+          this.monitorMap.setView([selectedLat, selectedLng], FOCUS_ZOOM)
+        }
+      } else {
+        this.fitMap(this.monitorMap, this.monitorLeaflet, bounds)
+      }
+    },
+    clearMonitorPulseAnimation() {
+      if (this.monitorPulseTimer) {
+        clearInterval(this.monitorPulseTimer)
+        this.monitorPulseTimer = null
+      }
+      if (this.monitorPulseLayers && this.monitorPulseLayers.length && this.monitorMap) {
+        this.monitorPulseLayers.forEach(layer => {
+          if (layer && this.monitorMap.hasLayer(layer)) {
+            this.monitorMap.removeLayer(layer)
+          }
+        })
+      }
+      this.monitorPulseLayers = []
+    },
+    startMonitorPulseAnimation(lat, lng, color = '#ef4444') {
+      if (!this.monitorMap || !this.monitorLeaflet || !this.hasCoordinatePair(lat, lng)) {
+        return
+      }
+      this.clearMonitorPulseAnimation()
+      const L = this.monitorLeaflet
+      const waveOffsets = [0, 0.33, 0.66]
+      const duration = 2200
+      const minRadius = 10
+      const maxRadius = 86
+      const startAt = Date.now()
+      const pulseColor = this.normalizeMapColor(color || '#ef4444')
+      this.monitorPulseLayers = waveOffsets.map(() =>
+        L.circleMarker([lat, lng], {
+          radius: minRadius,
+          color: pulseColor,
+          weight: 2.2,
+          opacity: 0,
+          fillColor: pulseColor,
+          fillOpacity: 0,
+          interactive: false
+        }).addTo(this.monitorMap)
+      )
+      const updateWaves = () => {
+        const elapsed = Date.now() - startAt
+        this.monitorPulseLayers.forEach((layer, index) => {
+          const progress = ((elapsed / duration) + waveOffsets[index]) % 1
+          const radius = minRadius + (maxRadius - minRadius) * progress
+          const opacity = Math.max(0, 1 - progress)
+          layer.setLatLng([lat, lng])
+          layer.setRadius(radius)
+          layer.setStyle({
+            opacity: 0.82 * opacity,
+            fillOpacity: 0.18 * opacity,
+            weight: 2.6 - 1.8 * progress
+          })
+          if (typeof layer.bringToBack === 'function') {
+            layer.bringToBack()
+          }
+        })
+      }
+      updateWaves()
+      this.monitorPulseTimer = setInterval(updateWaves, 90)
+    },
+    renderEditorMap() {
+      if (!this.editorMap || !this.editorLeaflet) return
+      this.clearEditorPulseAnimation()
+      this.editorReferenceGroup.clearLayers()
+      if (this.editorDeviceGroup) {
+        this.editorDeviceGroup.clearLayers()
+      }
+      this.editorDrawGroup.clearLayers()
+      const isFocusedMode = !!this.editorFocusedFence
+      const targetFence = this.resolveRenderableFence(isFocusedMode ? this.editorFocusedFence : this.fenceForm)
+      const targetStyle = isFocusedMode
+        ? { color: '#dc2626', weight: 3.2, opacity: 1, fillOpacity: 0.08 }
+        : { color: '#2563eb', weight: 2.4, fillOpacity: 0.18 }
+      const current = this.createFenceLayer(targetFence, targetStyle, this.editorLeaflet)
+      if (current) this.editorDrawGroup.addLayer(current)
+      const mapDevices = this.resolveFenceDeviceOptionsByIds(this.normalizeDeviceIds(targetFence && targetFence.deviceIds))
+      const pulsePoints = []
+      ;(mapDevices || []).forEach((item, index) => {
+        const lat = this.resolveOptionLat(item)
+        const lng = this.resolveOptionLng(item)
+        if (!this.hasCoordinatePair(lat, lng)) return
+        const seriesColor = this.getSeriesColor(index)
+        pulsePoints.push({ lat: Number(lat), lng: Number(lng), color: seriesColor })
+        const marker = this.editorLeaflet.circleMarker([lat, lng], {
+          radius: 7,
+          color: '#ffffff',
+          weight: 2,
+          fillColor: seriesColor,
+          fillOpacity: 0.95
+        })
+        marker.bindTooltip(item.alias || item.sn || '-', { direction: 'top' })
+        this.editorDeviceGroup.addLayer(marker)
+      })
+      this.startEditorPulseAnimation(pulsePoints, {
+        minRadius: isFocusedMode ? 18 : 16,
+        maxRadius: isFocusedMode ? 1200 : 900,
+        duration: isFocusedMode ? 2100 : 2300
+      })
+      this.fitMap(this.editorMap, this.editorLeaflet, this.collectEditorBounds())
+    },
+    resolveFenceDeviceOptionsByIds(deviceIds) {
+      const optionMap = new Map()
+      ;(this.editorDeviceOptions || []).forEach(item => {
+        const normalized = this.normalizeDeviceId(item && item.id)
+        if (normalized && !optionMap.has(normalized)) {
+          optionMap.set(normalized, item)
+        }
+      })
+      const used = new Set()
+      return (deviceIds || []).map(id => {
+        const normalized = this.normalizeDeviceId(id)
+        if (!normalized || used.has(normalized)) {
+          return null
+        }
+        used.add(normalized)
+        return optionMap.get(normalized) || null
+      }).filter(Boolean)
+    },
+    normalizeFenceShapeType(value) {
+      const text = String(value || '').trim().toLowerCase()
+      if (!text) return ''
+      if (text === 'circle' || text === '\u5706\u5f62' || text === '\u5706') return 'circle'
+      if (text === 'rect' || text === 'rectangle' || text === '\u77e9\u5f62') return 'rect'
+      if (text === 'polygon' || text === '\u591a\u8fb9\u5f62' || text === '\u591a\u8fb9\u578b') return 'polygon'
+      return ''
+    },
+    resolveRenderableFence(fence) {
+      if (!fence || typeof fence !== 'object') {
+        return fence
+      }
+      const nextFence = { ...fence }
+      const normalizedShapeType = this.normalizeFenceShapeType(nextFence.shapeType)
+      if (normalizedShapeType) {
+        nextFence.shapeType = normalizedShapeType
+        return nextFence
+      }
+      if (this.circlePayload(nextFence)) {
+        nextFence.shapeType = 'circle'
+        return nextFence
+      }
+      if (this.rectPayload(nextFence)) {
+        nextFence.shapeType = 'rect'
+        return nextFence
+      }
+      if (this.polygonPayload(nextFence).length) {
+        nextFence.shapeType = 'polygon'
+      }
+      return nextFence
+    },
+    clearEditorPulseAnimation() {
+      if (this.editorPulseTimer) {
+        clearInterval(this.editorPulseTimer)
+        this.editorPulseTimer = null
+      }
+      if (this.editorPulseWaveSets && this.editorPulseWaveSets.length && this.editorMap) {
+        this.editorPulseWaveSets.forEach(set => {
+          ;(set.layers || []).forEach(layer => {
+            if (layer && this.editorMap.hasLayer(layer)) {
+              this.editorMap.removeLayer(layer)
+            }
+          })
+        })
+      }
+      this.editorPulseWaveSets = []
+    },
+    startEditorPulseAnimation(points, options = {}) {
+      if (!this.editorMap || !this.editorLeaflet) {
+        return
+      }
+      this.clearEditorPulseAnimation()
+      if (!Array.isArray(points) || !points.length) {
+        return
+      }
+      const L = this.editorLeaflet
+      const waveOffsets = [0, 0.35, 0.7]
+      const duration = Number(options.duration || 2200)
+      const minRadius = Number(options.minRadius || 12)
+      const baseMaxRadius = Number(options.maxRadius || 220)
+      const zoom = Number(this.editorMap.getZoom ? this.editorMap.getZoom() : 14)
+      const zoomScale = Math.pow(2, Math.max(0, 12 - Math.max(0, zoom)))
+      const maxRadius = Math.max(baseMaxRadius, Math.min(40000, baseMaxRadius * zoomScale))
+      const startAt = Date.now()
+      this.editorPulseWaveSets = points.map(point => {
+        const lat = Number(point.lat)
+        const lng = Number(point.lng)
+        const color = this.normalizeMapColor(point.color || '#ef4444')
+        const layers = waveOffsets.map(() =>
+          L.circle([lat, lng], {
+            radius: minRadius,
+            color,
+            weight: 2.2,
+            opacity: 0,
+            fillColor: color,
+            fillOpacity: 0
+          }).addTo(this.editorMap)
+        )
+        return { lat, lng, color, layers }
+      })
+      const updateWaves = () => {
+        const elapsed = Date.now() - startAt
+        this.editorPulseWaveSets.forEach(set => {
+          ;(set.layers || []).forEach((layer, index) => {
+            const progress = ((elapsed / duration) + waveOffsets[index]) % 1
+            const radius = minRadius + (maxRadius - minRadius) * progress
+            const opacity = Math.max(0, 1 - progress)
+            layer.setLatLng([set.lat, set.lng])
+            layer.setRadius(radius)
+            layer.setStyle({
+              opacity: 0.72 * opacity,
+              fillOpacity: 0.16 * opacity,
+              weight: 2.4 - 1.4 * progress
+            })
+          })
+        })
+      }
+      updateWaves()
+      this.editorPulseTimer = setInterval(updateWaves, 90)
+    },
+    collectEditorBounds() {
+      const bounds = []
+      if (this.editorReferenceGroup) this.editorReferenceGroup.getLayers().forEach(layer => this.extendBounds(bounds, layer))
+      if (this.editorDeviceGroup) this.editorDeviceGroup.getLayers().forEach(layer => this.extendBounds(bounds, layer))
+      if (this.editorDrawGroup) this.editorDrawGroup.getLayers().forEach(layer => this.extendBounds(bounds, layer))
+      return bounds
+    },
+    fitMap(map, L, bounds) {
+      if (bounds.length) {
+        const fitBounds = L.latLngBounds(bounds)
+        if (fitBounds.isValid()) {
+          map.fitBounds(fitBounds, { padding: [24, 24], maxZoom: 15 })
+          return
+        }
+      }
+      map.setView(DEFAULT_CENTER, DEFAULT_ZOOM)
+    },
+    getSeriesColor(index) {
+      if (!Number.isFinite(index) || index < 0) return MAP_SERIES_COLORS[0]
+      return MAP_SERIES_COLORS[index % MAP_SERIES_COLORS.length]
+    },
+    getFenceSeriesStyle(index, overrides = {}) {
+      const color = this.getSeriesColor(index)
+      const fillColor = overrides.fillColor || overrides.color || color
+      return {
+        color,
+        fillColor,
+        weight: 2,
+        opacity: 0.95,
+        fillOpacity: 0.12,
+        ...overrides
+      }
+    },
+    focusMonitorDevice(row) {
+      this.syncSelectedMonitorFenceContext(row)
+      this.selectedDeviceId = row.deviceId
+      this.renderMonitorMap()
+    },
+    async focusFence(row) {
+      if (!row || !row.id) {
+        return
+      }
+      await this.switchTab('fence')
+      const response = await getFence(row.id)
+      const detailData = this.normalizeObject(response)
+      const focusedDeviceIds = this.normalizeDeviceIds(detailData.deviceIds).length
+        ? this.normalizeDeviceIds(detailData.deviceIds)
+        : this.normalizeDeviceIds(row.deviceIds)
+      this.editorFocusedFence = {
+        ...row,
+        ...detailData,
+        id: (detailData && detailData.id) || (row && row.id),
+        shapeType: (detailData && detailData.shapeType) || (row && row.shapeType) || 'polygon',
+        shapeDataJson: (detailData && detailData.shapeDataJson) || (row && row.shapeDataJson) || '',
+        geomJson: (detailData && detailData.geomJson) || (row && row.geomJson) || '',
+        geomWkt: (detailData && detailData.geomWkt) || (row && row.geomWkt) || '',
+        deviceIds: focusedDeviceIds
+      }
+      this.editorDeviceOptions = []
+      this.editorNotice = this.$t('fenceDevice.editor.previewHint', { name: this.editorFocusedFence.fenceName || '-' })
+      await this.$nextTick()
+      await this.ensureEditorMap()
+      this.renderEditorMap()
+      if (focusedDeviceIds.length) {
+        try {
+          await this.loadEditorMapDeviceOptions(focusedDeviceIds)
+          this.renderEditorMap()
+        } catch (error) {
+          this.$message.warning((error && error.message) || this.$t('fenceDevice.message.devicePointLoadFailed'))
+        }
+      }
+    },
+    async focusAlarm(row) {
+      this.alarmLocateTarget = row ? { ...row } : null
+      this.alarmLocateDialogVisible = true
+      await this.$nextTick()
+    },
+    async handleAlarmLocateDialogOpen() {
+      await this.$nextTick()
+      if (!this.alarmLocateHasCoordinate) {
+        return
+      }
+      await this.ensureAlarmLocateMap()
+      this.renderAlarmLocateMarker()
+    },
+    handleAlarmLocateDialogClose() {
+      this.clearAlarmLocateMarker()
+    },
+    async ensureAlarmLocateMap() {
+      if (!this.$refs.alarmLocateMap) {
+        return
+      }
+      if (!this.alarmLocateMap) {
+        const L = await loadLeaflet()
+        this.alarmLocateLeaflet = L
+        this.alarmLocateMap = L.map(this.$refs.alarmLocateMap, {
+          center: DEFAULT_CENTER,
+          zoom: FOCUS_ZOOM,
+          zoomControl: true
+        })
+      } else {
+        this.alarmLocateMap.invalidateSize(true)
+      }
+      if (this.alarmLocateTileLayer) {
+        this.alarmLocateMap.removeLayer(this.alarmLocateTileLayer)
+      }
+      this.alarmLocateTileLayer = this.createTileLayer(this.alarmLocateLeaflet)
+      this.alarmLocateTileLayer.addTo(this.alarmLocateMap)
+    },
+    clearAlarmLocateMarker() {
+      if (this.alarmLocatePulseTimer) {
+        clearInterval(this.alarmLocatePulseTimer)
+        this.alarmLocatePulseTimer = null
+      }
+      if (this.alarmLocatePulseLayers && this.alarmLocatePulseLayers.length && this.alarmLocateMap) {
+        this.alarmLocatePulseLayers.forEach(layer => {
+          this.alarmLocateMap.removeLayer(layer)
+        })
+      }
+      this.alarmLocatePulseLayers = []
+      if (this.alarmLocateMarker && this.alarmLocateMap) {
+        this.alarmLocateMap.removeLayer(this.alarmLocateMarker)
+      }
+      this.alarmLocateMarker = null
+    },
+    startAlarmLocatePulseAnimation(lat, lng) {
+      if (!this.alarmLocateMap || !this.alarmLocateLeaflet) {
+        return
+      }
+      if (this.alarmLocatePulseTimer) {
+        clearInterval(this.alarmLocatePulseTimer)
+        this.alarmLocatePulseTimer = null
+      }
+      const L = this.alarmLocateLeaflet
+      const waveOffsets = [0, 0.33, 0.66]
+      const duration = 2400
+      const minRadius = 16
+      const maxRadius = 260
+      const startAt = Date.now()
+      this.alarmLocatePulseLayers = waveOffsets.map(() =>
+        L.circle([lat, lng], {
+          radius: minRadius,
+          color: '#ef4444',
+          weight: 2,
+          opacity: 0,
+          fillColor: '#ef4444',
+          fillOpacity: 0
+        }).addTo(this.alarmLocateMap)
+      )
+
+      const updateWaves = () => {
+        const elapsed = Date.now() - startAt
+        this.alarmLocatePulseLayers.forEach((layer, index) => {
+          const progress = ((elapsed / duration) + waveOffsets[index]) % 1
+          const radius = minRadius + (maxRadius - minRadius) * progress
+          const opacity = Math.max(0, 1 - progress)
+          layer.setLatLng([lat, lng])
+          layer.setRadius(radius)
+          layer.setStyle({
+            opacity: 0.78 * opacity,
+            fillOpacity: 0.2 * opacity,
+            weight: 2.2 - 1.3 * progress
+          })
+        })
+      }
+      updateWaves()
+      this.alarmLocatePulseTimer = setInterval(updateWaves, 90)
+    },
+    renderAlarmLocateMarker() {
+      if (!this.alarmLocateMap || !this.alarmLocateLeaflet || !this.alarmLocateHasCoordinate) {
+        return
+      }
+      this.clearAlarmLocateMarker()
+      const lat = Number(this.alarmLocateTarget.lat)
+      const lng = Number(this.alarmLocateTarget.lng)
+      const L = this.alarmLocateLeaflet
+      this.alarmLocateMarker = L.circleMarker([lat, lng], {
+        radius: 8,
+        color: '#ffffff',
+        weight: 2.2,
+        fillColor: '#ef4444',
+        fillOpacity: 0.98
+      }).addTo(this.alarmLocateMap)
+      this.startAlarmLocatePulseAnimation(lat, lng)
+      this.alarmLocateMap.setView([lat, lng], Math.max(this.alarmLocateMap.getZoom() || 0, FOCUS_ZOOM))
+    },
+    buildAlarmContent(row) {
+      return this.formatCoordinatePair(row && row.lat, row && row.lng)
+    },
+    syncEditorShape() {
+      const layer = this.editorDrawGroup && this.editorDrawGroup.getLayers()[0]
+      if (!layer) {
+        this.$message.warning(this.$t('fenceDevice.message.shapeRequired'))
+        return
+      }
+      this.syncShapeFromLayer(layer)
+      this.$message.success(this.$t('fenceDevice.message.shapeSynced'))
+    },
+    clearEditorShape() {
+      if (this.editorDrawGroup) this.editorDrawGroup.clearLayers()
+      this.clearShapeOnly()
+    },
+    clearShapeOnly() {
+      this.editorFocusedFence = null
+      this.fenceForm.centerLat = undefined
+      this.fenceForm.centerLng = undefined
+      this.fenceForm.radiusMeter = undefined
+      this.fenceForm.geomWkt = ''
+      this.fenceForm.shapeDataJson = ''
+    },
+    handleShapeTypeChange() {
+      this.clearShapeOnly()
+      if (this.editorDrawGroup) this.editorDrawGroup.clearLayers()
+    },
+    handleScheduleTypeChange(value) {
+      this.fenceForm.scheduleType = this.normalizeScheduleTypeValue(value)
+      if (this.fenceForm.scheduleType !== 'custom') {
+        this.fenceForm.scheduleStartTime = ''
+        this.fenceForm.scheduleEndTime = ''
+      }
+    },
+    syncShapeFromLayer(layer) {
+      this.editorFocusedFence = null
+      const type = this.resolveLayerType(layer)
+      if (type === 'circle') {
+        const center = layer.getLatLng()
+        this.fenceForm.shapeType = 'circle'
+        this.fenceForm.centerLat = Number(center.lat.toFixed(8))
+        this.fenceForm.centerLng = Number(center.lng.toFixed(8))
+        this.fenceForm.radiusMeter = Number(layer.getRadius().toFixed(2))
+        this.fenceForm.geomWkt = ''
+        this.fenceForm.shapeDataJson = JSON.stringify({ type: 'circle', center: [this.fenceForm.centerLat, this.fenceForm.centerLng], radius: this.fenceForm.radiusMeter })
+        return
+      }
+      const points = this.layerPoints(layer)
+      this.fenceForm.shapeType = type
+      this.fenceForm.centerLat = undefined
+      this.fenceForm.centerLng = undefined
+      this.fenceForm.radiusMeter = undefined
+      this.fenceForm.geomWkt = this.toWkt(points)
+      this.fenceForm.shapeDataJson = JSON.stringify(type === 'rect' ? { type: 'rect', bounds: this.rectangleBounds(layer), points } : { type: 'polygon', points })
+    },
+    resolveLayerType(layer) {
+      if (layer instanceof this.editorLeaflet.Circle) return 'circle'
+      if (layer instanceof this.editorLeaflet.Rectangle) return 'rect'
+      return 'polygon'
+    },
+    layerPoints(layer) {
+      let points = layer.getLatLngs()
+      while (Array.isArray(points) && Array.isArray(points[0])) points = points[0]
+      const normalized = (points || []).map(item => [Number(item.lat.toFixed(8)), Number(item.lng.toFixed(8))])
+      if (normalized.length > 1) {
+        const first = normalized[0]
+        const last = normalized[normalized.length - 1]
+        if (first[0] === last[0] && first[1] === last[1]) normalized.pop()
+      }
+      return normalized
+    },
+    rectangleBounds(layer) {
+      const bounds = layer.getBounds()
+      const sw = bounds.getSouthWest()
+      const ne = bounds.getNorthEast()
+      return [[Number(sw.lat.toFixed(8)), Number(sw.lng.toFixed(8))], [Number(ne.lat.toFixed(8)), Number(ne.lng.toFixed(8))]]
+    },
+    toWkt(points) {
+      if (!points.length) return ''
+      const all = points.concat([points[0]])
+      return 'POLYGON((' + all.map(item => item[1] + ' ' + item[0]).join(', ') + '))'
+    },
+    createFenceLayer(item, style, L) {
+      if (!item || !L) return null
+      const normalizedShapeType = this.normalizeFenceShapeType(item.shapeType)
+      const circle = this.circlePayload(item)
+      const bounds = this.rectPayload(item)
+      const points = this.polygonPayload(item)
+      if (normalizedShapeType === 'circle' && circle) {
+        return L.circle(circle.center, { radius: circle.radius, ...style })
+      }
+      if (normalizedShapeType === 'rect' && bounds) {
+        return L.rectangle(bounds, style)
+      }
+      if (normalizedShapeType === 'polygon' && points.length) {
+        return L.polygon(points, style)
+      }
+      if (circle) {
+        return L.circle(circle.center, { radius: circle.radius, ...style })
+      }
+      if (bounds) {
+        return L.rectangle(bounds, style)
+      }
+      return points.length ? L.polygon(points, style) : null
+    },
+    circlePayload(item) {
+      if (this.isFiniteNumber(item.centerLat) && this.isFiniteNumber(item.centerLng) && this.isFiniteNumber(item.radiusMeter)) {
+        return { center: [Number(item.centerLat), Number(item.centerLng)], radius: Number(item.radiusMeter) }
+      }
+      const json = this.parseShapeData(item.shapeDataJson)
+      return json && json.type === 'circle' ? { center: [Number(json.center[0]), Number(json.center[1])], radius: Number(json.radius) } : null
+    },
+    rectPayload(item) {
+      const json = this.parseShapeData(item.shapeDataJson)
+      if (json && Array.isArray(json.bounds) && json.bounds.length === 2) return json.bounds
+      const points = this.polygonPayload(item)
+      if (!points.length) return null
+      const lats = points.map(point => point[0])
+      const lngs = points.map(point => point[1])
+      return [[Math.min.apply(null, lats), Math.min.apply(null, lngs)], [Math.max.apply(null, lats), Math.max.apply(null, lngs)]]
+    },
+    polygonPayload(item) {
+      const json = this.parseShapeData(item.shapeDataJson)
+      if (json && Array.isArray(json.points)) return json.points.map(point => [Number(point[0]), Number(point[1])])
+      if (item.geomJson) {
+        try {
+          const geom = typeof item.geomJson === 'string' ? JSON.parse(item.geomJson) : item.geomJson
+          return (geom.coordinates[0] || []).slice(0, -1).map(point => [Number(point[1]), Number(point[0])])
+        } catch (error) {
+          return []
+        }
+      }
+      if (item.geomWkt) {
+        const points = this.parsePolygonWkt(item.geomWkt)
+        if (points.length) {
+          return points
+        }
+      }
+      return []
+    },
+    parsePolygonWkt(wktText) {
+      if (!wktText) {
+        return []
+      }
+      const text = String(wktText).trim()
+      const match = text.match(/^POLYGON\s*\(\((.+)\)\)$/i)
+      if (!match || !match[1]) {
+        return []
+      }
+      const pairs = match[1].split(',').map(item => item.trim()).filter(Boolean)
+      const points = pairs.map(pair => {
+        const nums = pair.split(/\s+/).map(value => Number(value))
+        if (nums.length < 2 || !Number.isFinite(nums[0]) || !Number.isFinite(nums[1])) {
+          return null
+        }
+        // WKT uses "lng lat", map expects "[lat, lng]"
+        return [nums[1], nums[0]]
+      }).filter(Boolean)
+      if (points.length > 1) {
+        const first = points[0]
+        const last = points[points.length - 1]
+        if (Number(first[0]) === Number(last[0]) && Number(first[1]) === Number(last[1])) {
+          points.pop()
+        }
+      }
+      return points
+    },
+    parseShapeData(value) {
+      if (!value) return null
+      try {
+        return typeof value === 'string' ? JSON.parse(value) : value
+      } catch (error) {
+        return null
+      }
+    },
+    extendBounds(bounds, layer) {
+      if (!layer || !layer.getBounds) return
+      const layerBounds = layer.getBounds()
+      if (layerBounds && layerBounds.isValid()) {
+        bounds.push([layerBounds.getSouthWest().lat, layerBounds.getSouthWest().lng])
+        bounds.push([layerBounds.getNorthEast().lat, layerBounds.getNorthEast().lng])
+      }
+    },
+    parseRuleList(value) {
+      return value ? (Array.isArray(value) ? value : String(value).split(',')).map(item => String(item).trim()).filter(Boolean) : []
+    },
+    normalizeAlarmRuleValue(value) {
+      const rules = this.parseRuleList(value)
+      if (!rules.length) return 'exit'
+      if (rules.includes('enter') && rules.includes('exit')) return 'enter,exit'
+      if (rules.includes('enter')) return 'enter'
+      return 'exit'
+    },
+    normalizeScheduleTypeValue(value) {
+      return value === 'custom' ? 'custom' : 'all'
+    },
+    getScheduleLabel(type) {
+      return this.$t('fenceDevice.schedule.' + this.normalizeScheduleTypeValue(type))
+    },
+    getAlarmRuleLabel(type) {
+      return type ? this.$t('fenceDevice.alarmRule.' + type) : '-'
+    },
+    getAlarmRuleGroupLabel(value) {
+      const normalized = this.normalizeAlarmRuleValue(value)
+      if (normalized === 'enter,exit') {
+        return this.$t('fenceDevice.alarmRule.enterExit')
+      }
+      if (normalized === 'enter') {
+        return this.$t('fenceDevice.alarmRule.enterOnly')
+      }
+      return this.$t('fenceDevice.alarmRule.exitRecommended')
+    },
+    getShapeLabel(type) {
+      return this.$t('fenceDevice.shape.' + (type || 'polygon'))
+    },
+    getFenceStatusLabel(type) {
+      return type ? this.$t('fenceDevice.alarmRule.' + type) : '-'
+    },
+    getAlarmLevelLabel(type) {
+      return type ? this.$t('fenceDevice.level.' + type) : '-'
+    },
+    getAlarmStatusLabel(type) {
+      return type ? this.$t('fenceDevice.alarmStatus.' + type) : '-'
+    },
+    getFenceStatusTagType(type) {
+      return type === 'outside' ? 'danger' : type === 'boundary' ? 'warning' : 'success'
+    },
+    getAlarmLevelTagType(type) {
+      return type === 'critical' ? 'danger' : type === 'warning' ? 'warning' : 'info'
+    },
+    getAlarmStatusTagType(type) {
+      return type === 'open' ? 'danger' : type === 'acked' ? 'warning' : 'success'
+    },
+    getAlarmLevelColor(type) {
+      return type === 'critical' ? '#dc2626' : type === 'warning' ? '#d97706' : '#059669'
+    },
+    resolveMonitorDeviceStatusType(item) {
+      const groupStatus = String((item && item._groupFenceStatus) || '').trim().toLowerCase()
+      if (groupStatus === 'outside') return 'alert'
+      if (groupStatus === 'boundary') return 'alert'
+      if (groupStatus === 'inside') return 'normal'
+      const statuses = this.parseFenceStatuses(item && item.fenceStatuses)
+      if (statuses.some(status => status.status === 'outside')) return 'alert'
+      if (statuses.some(status => status.status === 'boundary')) return 'alert'
+      return 'normal'
+    },
+    getDeviceChipClass(item) {
+      const statusType = this.resolveMonitorDeviceStatusType(item)
+      if (statusType === 'alert') return 'device-chip--alert'
+      return 'device-chip--ok'
+    },
+    getDeviceChipText(item) {
+      const statusType = this.resolveMonitorDeviceStatusType(item)
+      if (statusType === 'alert') return this.$t('fenceDevice.device.alert')
+      return this.$t('fenceDevice.device.normal')
+    },
+    isAlertMonitorDevice(item) {
+      return this.resolveMonitorDeviceStatusType(item) === 'alert'
+    },
+    getPrimaryFenceName(item) {
+      const statuses = this.parseFenceStatuses(item && item.fenceStatuses)
+      if (!statuses.length) {
+        return this.$t('fenceDevice.sidebar.unbound')
+      }
+      if (statuses.length === 1) {
+        return statuses[0].name
+      }
+      return statuses[0].name + ' +' + (statuses.length - 1)
+    },
+    countdownMinutesToHours(value) {
+      const num = Number(value)
+      if (!Number.isFinite(num) || num <= 0) {
+        return 0.5
+      }
+      const clampedMinutes = Math.min(Math.max(Math.floor(num), 1), 1440)
+      return Number((clampedMinutes / 60).toFixed(2))
+    },
+    countdownHoursToMinutes(value) {
+      const num = Number(value)
+      if (!Number.isFinite(num) || num <= 0) {
+        return 30
+      }
+      const clampedHours = Math.min(Math.max(num, 0.1), 24)
+      return Math.min(Math.max(Math.round(clampedHours * 60), 1), 1440)
+    },
+    parseFenceStatuses(text) {
+      return text ? String(text).split(',').map(item => item.trim()).filter(Boolean).map(item => {
+        const parts = item.split(':')
+        const rawFence = String(parts[0] || '').trim()
+        const splitIndex = rawFence.indexOf('|')
+        const fenceIdText = splitIndex >= 0 ? rawFence.slice(0, splitIndex).trim() : ''
+        const fenceName = splitIndex >= 0 ? rawFence.slice(splitIndex + 1).trim() : rawFence
+        const fenceId = /^[0-9]+$/.test(fenceIdText) ? Number(fenceIdText) : null
+        return { id: fenceId, name: fenceName, status: parts[1] || '' }
+      }) : []
+    },
+    formatDeviceOption(item) {
+      return (item.sn || '-') + (item.alias ? ' / ' + item.alias : '') + (item.lastAddress ? ' / ' + item.lastAddress : '')
+    },
+    formatDateTime(value) {
+      return value ? (this.parseTime ? this.parseTime(value, '{y}-{m}-{d} {h}:{i}:{s}') : String(value)) : '-'
+    },
+    formatCoordinate(value) {
+      return this.isFiniteNumber(value) ? Number(value).toFixed(6) : ''
+    },
+    formatCoordinateTableValue(value) {
+      if (value === null || value === undefined) {
+        return '-'
+      }
+      const strValue = String(value).trim()
+      if (!strValue || strValue === '-') {
+        return '-'
+      }
+      const match = strValue.match(/^([+-]?\d+)(?:\.(\d+))?$/)
+      if (!match) {
+        return '-'
+      }
+      const integerPart = match[1]
+      const decimalPart = match[2] || ''
+      const fixedDecimal = decimalPart.slice(0, 2).padEnd(2, '0')
+
+      return `${integerPart}.${fixedDecimal}`
+    },
+    formatCoordinatePair(lat, lng) {
+      return `${this.formatCoordinateTableValue(lat)} / ${this.formatCoordinateTableValue(lng)}`
+    },
+    syncFenceSidebarOptionsByRows(rows = []) {
+      const optionNames = (rows || [])
+        .map(item => String((item && (item.fenceName || item.name || item.label || item.value)) || '').trim())
+        .filter(Boolean)
+      this.sidebarFenceOptions = Array.from(new Set(optionNames)).map(name => ({ label: name, value: name }))
+      this.sidebarFenceLoadedKeyword = ''
+    },
+    matchMonitorDeviceByKeyword(item, lowerKeyword) {
+      if (!item) {
+        return false
+      }
+      const fields = [
+        item.sn,
+        item.alias,
+        item.address
+      ]
+      return fields.some(value => String(value || '').toLowerCase().includes(lowerKeyword))
+    },
+    matchMonitorDeviceByFenceKeyword(item, lowerKeyword) {
+      if (!item) {
+        return false
+      }
+      const statuses = this.parseFenceStatuses(item.fenceStatuses)
+      if (!statuses.length) {
+        return this.$t('fenceDevice.sidebar.unbound').toLowerCase().includes(lowerKeyword)
+      }
+      return statuses.some(status => String((status && status.name) || '').toLowerCase().includes(lowerKeyword))
+    },
+    matchMonitorDeviceByStatus(item, statusFilter) {
+      const normalized = String(statusFilter || '').trim().toLowerCase()
+      if (!normalized) {
+        return true
+      }
+      const statusType = this.resolveMonitorDeviceStatusType(item)
+      if (normalized === 'alert') return statusType === 'alert'
+      if (normalized === 'normal') return statusType === 'normal'
+      return true
+    },
+    matchMonitorGroupStatus(groupStatus, statusFilter) {
+      const normalizedFilter = String(statusFilter || '').trim().toLowerCase()
+      if (!normalizedFilter) {
+        return true
+      }
+      const normalizedGroupStatus = String(groupStatus || '').trim().toLowerCase()
+      const groupType = (normalizedGroupStatus === 'outside' || normalizedGroupStatus === 'boundary') ? 'alert' : 'normal'
+      if (normalizedFilter === 'alert') {
+        return groupType === 'alert'
+      }
+      if (normalizedFilter === 'normal') {
+        return groupType === 'normal'
+      }
+      return true
+    },
+    resolveOptionLat(item) {
+      if (!item || typeof item !== 'object') {
+        return null
+      }
+      return this.isFiniteNumber(item.lat) ? item.lat : item.lastLat
+    },
+    resolveOptionLng(item) {
+      if (!item || typeof item !== 'object') {
+        return null
+      }
+      return this.isFiniteNumber(item.lng) ? item.lng : item.lastLng
+    },
+    hasCoordinatePair(lat, lng) {
+      return this.isFiniteNumber(lat) && this.isFiniteNumber(lng)
+    },
+    isFiniteNumber(value) {
+      return value !== null && value !== undefined && value !== '' && Number.isFinite(Number(value))
+    },
+    destroyMap(type) {
+      const map = type === 'monitor' ? this.monitorMap : type === 'editor' ? this.editorMap : this.alarmLocateMap
+      if (type === 'alarmLocate') {
+        this.clearAlarmLocateMarker()
+      }
+      if (type === 'monitor') {
+        this.clearMonitorPulseAnimation()
+      }
+      if (map && typeof map.remove === 'function') map.remove()
+      if (type === 'monitor') {
+        this.monitorMap = null
+        this.monitorLeaflet = null
+        this.monitorFenceGroup = null
+        this.monitorDeviceGroup = null
+        this.monitorPulseLayers = []
+        this.monitorPulseTimer = null
+      } else if (type === 'editor') {
+        this.clearEditorPulseAnimation()
+        this.editorMap = null
+        this.editorLeaflet = null
+        this.editorReferenceGroup = null
+        this.editorDeviceGroup = null
+        this.editorDrawGroup = null
+        this.editorDrawControl = null
+      } else {
+        this.alarmLocateMap = null
+        this.alarmLocateLeaflet = null
+        this.alarmLocateMarker = null
+        this.alarmLocateTileLayer = null
+        this.alarmLocatePulseLayers = []
+        this.alarmLocatePulseTimer = null
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.fence-workbench { height: calc(100vh - 50px); display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
+.fence-workbench--no-sidebar { grid-template-columns: minmax(0, 1fr); }
+.fence-global-kpi { grid-column: 1 / -1; padding: 0; border-bottom: 0; align-self: start; }
+.card-shell { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; min-height: 0; }
+.panel-head { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
+.panel-head h3, .panel-head h4 { margin: 0; font-size: 16px; }
+.panel-head--thin h4 { font-size: 14px; }
+.panel-badge { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: #f8fafc; border: 1px solid #cbd5e1; color: #334155; }
+.panel-tools { padding: 10px; border-bottom: 1px solid #e5e7eb; display: grid; grid-template-columns: 1fr; gap: 8px; }
+.panel-tools__field { width: 100%; }
+.fence-sidebar { display: flex; flex-direction: column; }
+.device-list { overflow: auto; flex: 1; }
+.fence-sidebar .panel-head { padding: 2px 10px; }
+.fence-sidebar .panel-head h3 { font-size: 14px; }
+.fence-sidebar .panel-badge { padding: 0 7px; font-size: 12px; }
+.fence-sidebar .panel-tools { padding: 8px 10px; }
+.fence-sidebar .panel-tools :deep(.el-input__inner) { height: 30px; line-height: 30px; padding: 0 9px; }
+.fence-select-wrap { position: relative; }
+.fence-name-select { width: 100%; }
+.fence-select-wrap--marquee-active :deep(.fence-name-select .el-input__inner) {
+  color: transparent !important;
+  -webkit-text-fill-color: transparent !important;
+  text-shadow: none;
+}
+.fence-select-wrap--marquee-active :deep(.fence-name-select .el-select__input) {
+  color: transparent !important;
+  -webkit-text-fill-color: transparent !important;
+}
+.fence-select-wrap--marquee-active :deep(.fence-name-select .el-input__inner::placeholder) {
+  color: transparent !important;
+}
+.fence-select-marquee {
+  position: absolute;
+  left: 10px;
+  right: 34px;
+  top: 50%;
+  transform: translateY(-50%);
+  overflow: hidden;
+  white-space: nowrap;
+  pointer-events: none;
+}
+.fence-select-marquee__text {
+  display: inline-block;
+  padding-right: 12px;
+  color: #303133;
+  animation: fence-select-marquee var(--fence-marquee-duration, 6s) linear infinite;
+}
+.fence-select-marquee__measure {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  visibility: hidden;
+  white-space: nowrap;
+  pointer-events: none;
+}
+.fence-option__text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@keyframes fence-select-marquee {
+  0%, 14% {
+    transform: translateX(0);
+  }
+  86%, 100% {
+    transform: translateX(calc(-1 * var(--fence-marquee-distance, 0px)));
+  }
+}
+.sidebar-pagination { padding: 6px 6px 8px; border-top: 1px solid #e5e7eb; background: #fff; }
+.sidebar-pagination :deep(.pagination-container) { margin-top: 0; padding: 0; min-height: 28px; }
+.sidebar-pagination :deep(.el-pagination) { display: flex; justify-content: center; }
+.sidebar-pagination :deep(.btn-prev),
+.sidebar-pagination :deep(.btn-next),
+.sidebar-pagination :deep(.el-pager li) { min-width: 28px; height: 28px; line-height: 28px; }
+.sidebar-pagination :deep(.el-pagination button),
+.sidebar-pagination :deep(.el-pager li) { margin: 0 2px; }
+.fence-group { border-bottom: 1px solid #f1f5f9; }
+.device-item { width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid #e5e7eb; background: #fff; text-align: left; cursor: pointer; }
+.device-item:hover { background: #f8fafc; }
+.device-item--active { background: #eff6ff; box-shadow: inset 3px 0 0 #2563eb; }
+.device-item__fence { font-size: 12px; color: #2563eb; font-weight: 600; margin-bottom: 4px; line-height: 1.4; }
+.device-item__title { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-weight: 600; color: #111827; }
+.device-item__actions { display: inline-flex; align-items: center; gap: 8px; }
+.device-item__alert-action { display: inline-flex; align-items: center; max-width: 170px; }
+.device-item__alert-chip {
+  transition: opacity .2s ease, max-width .2s ease, padding .2s ease, border-width .2s ease, margin .2s ease;
+  max-width: 84px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.device-item__normal-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  opacity: 0;
+  max-width: 0;
+  overflow: hidden;
+  pointer-events: none;
+  transform: translateX(6px);
+  transition: opacity .2s ease, max-width .2s ease, transform .2s ease;
+}
+.device-item__alert-action--can-switch:hover .device-item__normal-switch,
+.device-item__alert-action--switching .device-item__normal-switch,
+.device-item__normal-switch--visible {
+  opacity: 1;
+  max-width: 168px;
+  pointer-events: auto;
+  transform: translateX(0);
+}
+.device-item__alert-action--can-switch:hover .device-item__alert-chip,
+.device-item__alert-action--switching .device-item__alert-chip {
+  opacity: 0;
+  max-width: 0;
+  padding: 0;
+  border-width: 0;
+  margin: 0;
+}
+.device-item__normal-switch-label { font-size: 12px; color: #2563eb; white-space: nowrap; user-select: none; }
+.device-item__normal-switch :deep(.el-switch) { transform: scale(0.84); transform-origin: left center; }
+.device-item__meta { margin-top: 2px; font-size: 12px; color: #6b7280; line-height: 1.45; }
+.device-chip { font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid #cbd5e1; background: #f8fafc; }
+.device-chip--ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
+.device-chip--alert { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
+.fence-main { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
+.fence-main--alarm { grid-template-rows: 1fr; }
+.fence-main--fence { grid-template-rows: 1fr; }
+.fence-main--monitor-only { grid-template-rows: 1fr; }
+.tabs-bar { padding: 10px; border-bottom: 1px solid #e5e7eb; display: flex; gap: 8px; background: #f8fafc; align-items: center; flex-wrap: wrap; }
+.tab-button { border: 1px solid #cbd5e1; background: #fff; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
+.tab-button--active { background: #2563eb; border-color: #2563eb; color: #fff; }
+.single-page-title { font-size: 14px; font-weight: 600; color: #111827; }
+.tabs-bar__tools { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.tabs-bar__provider { font-size: 12px; color: #6b7280; }
+.view-panel { height: 100%; min-height: 0; }
+.monitor-view { height: 100%; min-height: 0; display: flex; flex-direction: column; }
+.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 10px; border-bottom: 1px solid #e5e7eb; }
+.kpi-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; }
+.kpi-card p { margin: 0; color: #6b7280; font-size: 12px; }
+.kpi-card b { font-size: 20px; color: #111827; }
+.kpi-card--normal { background: #f0fdf4; border-color: #bbf7d0; }
+.kpi-card--alert { background: #fff7ed; border-color: #fed7aa; }
+.kpi-card--today { background: #fff6f6; border-color: #f5dddd; }
+.kpi-card--open { background: #fffaf2; border-color: #f5e8ce; }
+.monitor-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; height: 100%; }
+.map-block { min-height: 0; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); align-self: stretch; }
+.map-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border-bottom: 1px solid #e5e7eb; background: #fff; }
+.map-hint-inline { font-size: 12px; color: #334155; display: flex; gap: 8px; align-items: center; min-width: 0; flex-wrap: wrap; }
+.map-provider-tools { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.map-alert { margin: 10px; }
+.workbench-map { width: 100%; height: 100%; min-height: 620px; }
+.event-panel { min-width: 280px; border-left: 1px solid #e5e7eb; display: flex; flex-direction: column; min-height: 0; height: 100%; background: #fff; }
+.event-list { list-style: none; margin: 0; padding: 10px; overflow: auto; flex: 1; font-size: 12px; }
+.event-list li { border-bottom: 1px dashed #e5e7eb; padding-bottom: 8px; margin-bottom: 8px; }
+.event-time { color: #6b7280; }
+.event-text { margin-top: 4px; color: #111827; line-height: 1.6; }
+.fence-view { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
+.alerts-view { display: grid; grid-template-rows: auto 1fr; min-height: 0; gap: 12px; padding: 12px; }
+.fence-form-toolbar { padding: 10px; border-bottom: 1px solid #e5e7eb; display: grid; gap: 10px; }
+.fence-content-split { display: grid; grid-template-columns: minmax(480px, 0.92fr) minmax(640px, 1.08fr); min-height: 0; height: 100%; }
+.form-grid, .alert-filter-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; }
+.form-grid label, .alert-filter-grid label { display: block; margin-bottom: 4px; font-size: 12px; color: #6b7280; }
+.alert-filter-grid--alarm { grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px 16px; padding: 14px 16px 10px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f8fafc; }
+.alert-filter-grid--alarm label { margin-bottom: 6px; color: #475569; font-weight: 600; }
+.span-2 { grid-column: span 2; }
+.fence-actions-row, .filter-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.filter-actions { justify-content: flex-start; }
+.filter-actions--alarm { padding-top: 2px; }
+.device-picker-row { display: flex; gap: 8px; align-items: center; }
+.device-dialog-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 1fr; gap: 8px; align-items: center; margin-bottom: 12px; }
+.device-dialog-tools__hint { justify-self: end; font-size: 12px; color: #6b7280; }
+.dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
+.dialog-footer :deep(.pagination-container) { padding: 0; margin-right: auto; }
+.dialog-footer__meta { color: #6b7280; line-height: 32px; }
+.fence-map-block { border-right: 1px solid #e5e7eb; background: #f8fafc; min-height: 0; display: grid; grid-template-rows: auto 1fr; }
+.fence-map-head { padding: 8px 10px; font-size: 12px; color: #6b7280; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
+.fence-map-head__text { color: #6b7280; line-height: 1.5; }
+.fence-map-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.map-wrap { position: relative; min-height: 0; height: 100%; display: grid; }
+.map-wrap:fullscreen { background: #0f172a; padding: 8px; }
+.map-wrap:fullscreen .workbench-map--fence { min-height: calc(100vh - 16px); height: calc(100vh - 16px); }
+.workbench-map--fence { height: 100%; min-height: 540px; }
+.draw-hint { position: absolute; left: 10px; top: 10px; z-index: 500; background: rgba(255,255,255,.95); border: 1px solid #e5e7eb; padding: 8px 10px; border-radius: 8px; font-size: 12px; color: #334155; }
+.table-wrap { overflow: auto; padding: 10px; }
+.alerts-view .table-wrap { padding: 0 0 10px; }
+.fence-table-wrap { border-left: 0; padding: 10px; overflow: visible; }
+.alarm-locate-header { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 12px; color: #334155; }
+.alarm-locate-header > div { min-height: 42px; display: flex; align-items: center; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
+.alarm-locate-tools { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.alarm-locate-alert { margin-bottom: 10px; }
+.alarm-locate-map { height: 620px; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
+:deep(.alarm-locate-dialog) { max-width: 96vw; }
+:deep(.alarm-locate-dialog .el-dialog__body) { padding-top: 14px; }
+:deep(.alarm-locate-pin-marker) { background: transparent; border: 0; }
+:deep(.alarm-locate-pin) { position: relative; width: 44px; height: 44px; background: transparent; border: 0; }
+:deep(.alarm-locate-pin__ring) { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(239, 68, 68, 0.7); transform: translate(-50%, -50%) scale(0.35); animation: alarm-red-wave 2.4s ease-out infinite; }
+:deep(.alarm-locate-pin__ring--2) { animation-delay: 0.7s; }
+:deep(.alarm-locate-pin__ring--3) { animation-delay: 1.4s; }
+:deep(.alarm-locate-pin__core) { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin-left: -7px; margin-top: -7px; border-radius: 999px; border: 2px solid #ffffff; background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.26), 0 0 18px rgba(239, 68, 68, 0.48); }
+@keyframes alarm-red-wave {
+  0% { transform: translate(-50%, -50%) scale(0.35); opacity: 0.95; }
+  70% { opacity: 0.18; }
+  100% { transform: translate(-50%, -50%) scale(2.35); opacity: 0; }
+}
+:deep(.workbench-map.leaflet-container) { width: 100% !important; height: 100% !important; }
+:deep(.workbench-map .leaflet-tile), :deep(.workbench-map .leaflet-marker-icon), :deep(.workbench-map .leaflet-marker-shadow) { max-width: none !important; max-height: none !important; }
+:deep(.workbench-map .fence-wave-path) {
+  fill: transparent !important;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  animation: fence-wave-spread 2.8s ease-out infinite;
+}
+:deep(.workbench-map .fence-wave-path--two) { animation-delay: 1.4s; }
+:deep(.monitor-pulse-marker),
+:deep(.fence-edit-pulse-marker),
+:deep(.leaflet-marker-icon.monitor-pulse-marker),
+:deep(.leaflet-marker-icon.fence-edit-pulse-marker) {
+  background: transparent !important;
+  border: 0 !important;
+  overflow: visible !important;
+}
+:deep(.monitor-pulse) { position: relative; display: block; width: var(--pulse-size); height: var(--pulse-size); pointer-events: none; }
+:deep(.monitor-pulse-ring) {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: var(--pulse-core);
+  height: var(--pulse-core);
+  border-radius: 999px;
+  border: 2px solid currentColor;
+  transform: translate(-50%, -50%) scale(0.38);
+  opacity: 0;
+  animation: monitor-point-wave var(--pulse-duration, 2.4s) ease-out infinite;
+}
+:deep(.monitor-pulse-ring--2) { animation-delay: 0.8s; }
+:deep(.monitor-pulse-ring--3) { animation-delay: 1.6s; }
+:deep(.fence-edit-pulse-marker .monitor-pulse-ring) { border-width: 2.4px; opacity: 0.92; }
+:deep(.fence-edit-pulse-marker .monitor-pulse-core) { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.42), 0 0 26px currentColor; }
+:deep(.monitor-pulse-core) {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: var(--pulse-core);
+  height: var(--pulse-core);
+  margin-left: calc(var(--pulse-core) / -2);
+  margin-top: calc(var(--pulse-core) / -2);
+  border-radius: 999px;
+  border: 2px solid #ffffff;
+  background: currentColor;
+  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.32), 0 0 20px currentColor;
+}
+@keyframes fence-wave-spread {
+  0% { stroke-width: 2px; stroke-opacity: 0.72; }
+  72% { stroke-width: 12px; stroke-opacity: 0.08; }
+  100% { stroke-width: 14px; stroke-opacity: 0; }
+}
+@keyframes monitor-point-wave {
+  0% { transform: translate(-50%, -50%) scale(0.38); opacity: 0.9; }
+  70% { opacity: 0.16; }
+  100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
+}
+@media (max-width: 1080px) {
+  .fence-global-kpi { grid-column: 1; }
+  .map-head { flex-direction: column; align-items: flex-start; }
+  .map-provider-tools { margin-left: 0; width: 100%; }
+  .fence-map-head { align-items: flex-start; }
+  .fence-map-tools { margin-left: 0; width: 100%; }
+  .workbench-map--fence { min-height: 420px; }
+}
+@media (max-width: 1080px) { .fence-workbench { grid-template-columns: 1fr; height: auto; } .fence-sidebar { max-height: 44vh; } .monitor-body { grid-template-columns: 1fr; } .event-panel { border-left: 0; border-top: 1px solid #e5e7eb; max-height: 240px; } .workbench-map { min-height: 460px; } .kpi-grid { grid-template-columns: repeat(3, 1fr); } .fence-content-split { grid-template-columns: 1fr; } .fence-map-block { border-right: 0; border-bottom: 1px solid #e5e7eb; } .form-grid, .alert-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .span-2 { grid-column: span 2; } .tabs-bar__tools { margin-left: 0; } .device-dialog-tools { grid-template-columns: minmax(0, 1fr) auto auto; } .alarm-locate-header { grid-template-columns: 1fr; } .alarm-locate-map { height: 420px; } }
+@media (max-width: 768px) { .kpi-grid { grid-template-columns: 1fr 1fr; } .form-grid, .alert-filter-grid { grid-template-columns: 1fr; } .span-2 { grid-column: span 1; } .workbench-map { min-height: 360px; } .workbench-map--fence { min-height: 340px; } .device-picker-row { width: 100%; } .device-dialog-tools { grid-template-columns: 1fr; } .device-dialog-tools__hint { justify-self: start; } .alarm-locate-map { height: 340px; } }
+@media (max-width: 1440px) { .alert-filter-grid--alarm { grid-template-columns: repeat(3, minmax(220px, 1fr)); } .alert-filter-grid--alarm .filter-actions--alarm { grid-column: span 3; } }
+@media (max-width: 1080px) { .alerts-view { padding: 10px; gap: 10px; } .alert-filter-grid--alarm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; } .alert-filter-grid--alarm .filter-actions--alarm { grid-column: span 2; } .alarm-locate-map { height: 500px; } }
+@media (max-width: 768px) { .alert-filter-grid--alarm { grid-template-columns: 1fr; padding: 10px; } .alert-filter-grid--alarm .filter-actions--alarm { grid-column: span 1; } .alarm-locate-map { height: 380px; } }
+</style>
+
+
+
+
+
+
+