From 988452c8211565601c3f8c9e5031ba62dddc0086 Mon Sep 17 00:00:00 2001
From: zhangzq <zhangzhiqiang@yoycol.com>
Date: Tue, 9 Jun 2026 16:20:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BC=98=E5=8C=96=E7=9C=8B=E4=B8=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 acs/nladmin-ui/src/router/routers.js          |    6 +
 .../src/views/layout/screen/fullscreen.vue    | 1010 +++++++++++++++++
 .../src/views/layout/screen/index.vue         |   26 +-
 3 files changed, 1038 insertions(+), 4 deletions(-)
 create mode 100644 acs/nladmin-ui/src/views/layout/screen/fullscreen.vue

diff --git a/acs/nladmin-ui/src/router/routers.js b/acs/nladmin-ui/src/router/routers.js
index 07be08d..61eba28 100644
--- a/acs/nladmin-ui/src/router/routers.js
+++ b/acs/nladmin-ui/src/router/routers.js
@@ -11,6 +11,12 @@ export const constantRouterMap = [
     component: (resolve) => require(['@/views/login'], resolve),
     hidden: true
   },
+  {
+    path: '/screen/fullscreen',
+    meta: { title: 'AGV监控看板', noCache: true },
+    component: (resolve) => require(['@/views/layout/screen/fullscreen'], resolve),
+    hidden: true
+  },
   {
     path: '/404',
     component: (resolve) => require(['@/views/features/404'], resolve),
diff --git a/acs/nladmin-ui/src/views/layout/screen/fullscreen.vue b/acs/nladmin-ui/src/views/layout/screen/fullscreen.vue
new file mode 100644
index 0000000..609cea1
--- /dev/null
+++ b/acs/nladmin-ui/src/views/layout/screen/fullscreen.vue
@@ -0,0 +1,1010 @@
+<template>
+  <div class="fullscreen-container">
+    <!-- 顶部标题栏 -->
+    <div class="screen-header">
+      <div class="header-left">
+        <div class="time-display">
+          <div class="time-label">当前时间</div>
+          <div class="time">{{ currentTime }}</div>
+        </div>
+      </div>
+      <div class="header-center">
+        <i class="el-icon-monitor" />
+        <span class="title">AGV实时监控看板</span>
+      </div>
+      <div class="header-right">
+        <el-button size="small" :type="autoRefresh ? 'success' : 'info'" @click="toggleAutoRefresh">
+          <i :class="autoRefresh ? 'el-icon-video-play' : 'el-icon-video-pause'" />
+          {{ autoRefresh ? '自动刷新' : '已暂停' }}
+        </el-button>
+        <el-button size="small" type="danger" @click="closeWindow">
+          <i class="el-icon-close" />
+          关闭
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 主体内容 -->
+    <div class="screen-body">
+      <!-- 左侧统计面板 -->
+      <div class="left-panel">
+        <div class="stat-card">
+          <div class="stat-icon" style="background: #67c23a;">
+            <i class="el-icon-success" />
+          </div>
+          <div class="stat-content">
+            <div class="stat-value">{{ agvStats.normal }}</div>
+            <div class="stat-label">正常运行</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon" style="background: #909399;">
+            <i class="el-icon-coffee-cup" />
+          </div>
+          <div class="stat-content">
+            <div class="stat-value">{{ agvStats.rest }}</div>
+            <div class="stat-label">休息待机</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon" style="background: #f56c6c;">
+            <i class="el-icon-warning" />
+          </div>
+          <div class="stat-content">
+            <div class="stat-value">{{ agvStats.error }}</div>
+            <div class="stat-label">异常故障</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon" style="background: #409eff;">
+            <i class="el-icon-data-line" />
+          </div>
+          <div class="stat-content">
+            <div class="stat-value">{{ agvStats.total }}</div>
+            <div class="stat-label">AGV总数</div>
+          </div>
+        </div>
+
+        <!-- AGV列表 -->
+        <div class="agv-list-panel">
+          <div class="panel-title">AGV列表</div>
+          <div class="agv-list">
+            <div
+              v-for="agv in agvList"
+              :key="agv.carId"
+              class="agv-item"
+              :class="{ active: selectedAgv && selectedAgv.carId === agv.carId }"
+              @click="handleAgvClick(agv)"
+            >
+              <div class="agv-item-header">
+                <span class="agv-id">{{ agv.carId }}</span>
+                <el-tag :type="getStatusTagType(agv.status)" size="mini">
+                  {{ agv.statusInfo }}
+                </el-tag>
+              </div>
+              <div class="agv-item-info">
+                <div class="info-row">
+                  <span class="label">任务:</span>
+                  <span class="value">{{ agv.taskCode || '-' }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="label">电量:</span>
+                  <span class="value">
+                    <el-progress
+                      :percentage="agv.power"
+                      :color="getPowerColor(agv.power)"
+                      :show-text="false"
+                      style="width: 60px;"
+                    />
+                    {{ agv.power }}%
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 中间地图区域 -->
+      <div class="center-panel">
+        <div class="map-toolbar">
+          <el-button-group>
+            <el-button size="small" icon="el-icon-zoom-in" @click="zoomIn">放大</el-button>
+            <el-button size="small" icon="el-icon-zoom-out" @click="zoomOut">缩小</el-button>
+            <el-button size="small" icon="el-icon-refresh" @click="resetZoom">重置</el-button>
+          </el-button-group>
+          <span class="zoom-info">{{ Math.round(mapScale * 100) }}%</span>
+        </div>
+
+        <div class="map-canvas" @mousedown="handleCanvasMouseDown">
+          <div class="map-container" :style="containerStyle">
+            <!-- 地图背景 -->
+            <img
+              v-if="mapDetail && mapDetail.mapId"
+              :src="getMapUrl(mapDetail.mapId)"
+              :style="mapStyle"
+              class="map-image"
+            >
+
+            <!-- 静态设备组件 -->
+            <div
+              v-for="(device, index) in staticDevices"
+              :key="'device-' + index"
+              class="static-device"
+              :style="getDeviceStyle(device)"
+            >
+              <img
+                :src="getDeviceIconUrl(device)"
+                class="device-image"
+                :style="getDeviceImageStyle(device)"
+              >
+            </div>
+
+            <!-- AGV车辆 -->
+            <div
+              v-for="agv in agvList"
+              :key="'agv-' + agv.carId"
+              class="agv-vehicle"
+              :class="{
+                active: selectedAgv && selectedAgv.carId === agv.carId,
+                'status-normal': agv.status === 2,
+                'status-rest': agv.status === 1,
+                'status-error': agv.status === 3,
+                'status-request': isRequestAction(agv.action)
+              }"
+              :style="getAgvStyle(agv)"
+              @click="handleAgvClick(agv)"
+            >
+              <img
+                :src="getAgvIcon(agv)"
+                class="agv-image"
+                :style="getAgvImageStyle(agv)"
+              >
+              <div class="agv-label">
+                <div class="agv-id-label">{{ agv.carId }}</div>
+                <div class="agv-power-label" :class="getPowerClass(agv.power)">
+                  <i class="el-icon-lightning" /> {{ agv.power }}%
+                </div>
+              </div>
+            </div>
+
+            <!-- 原点标记 -->
+            <div v-if="mapDetail" class="origin-marker" :style="originStyle">
+              <i class="el-icon-location" />
+            </div>
+          </div>
+
+          <!-- 无地图提示 -->
+          <div v-if="!mapDetail" class="empty-map">
+            <i class="el-icon-map-location" />
+            <p>加载中...</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧详情面板 -->
+      <div v-if="selectedAgv" class="right-panel">
+        <div class="panel-title">
+          AGV详情
+          <el-button
+            type="text"
+            icon="el-icon-close"
+            style="float: right; color: #fff;"
+            @click="selectedAgv = null"
+          />
+        </div>
+        <div class="agv-detail">
+          <div class="detail-section">
+            <div class="section-title">基本信息</div>
+            <div class="detail-item">
+              <span class="label">车辆ID:</span>
+              <span class="value">{{ selectedAgv.carId }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="label">车辆类型:</span>
+              <span class="value">{{ selectedAgv.type }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="label">状态:</span>
+              <el-tag :type="getStatusTagType(selectedAgv.status)">
+                {{ selectedAgv.statusInfo }}
+              </el-tag>
+            </div>
+          </div>
+
+          <div class="detail-section">
+            <div class="section-title">任务信息</div>
+            <div class="detail-item">
+              <span class="label">任务号:</span>
+              <span class="value">{{ selectedAgv.taskCode || '-' }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="label">动作状态:</span>
+              <span class="value">{{ selectedAgv.action || '-' }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="label">交互信息:</span>
+              <span class="value">{{ selectedAgv.actionInfo || '-' }}</span>
+            </div>
+          </div>
+
+          <div class="detail-section">
+            <div class="section-title">位置信息</div>
+            <div class="detail-item">
+              <span class="label">坐标X:</span>
+              <span class="value">{{ selectedAgv.x }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="label">坐标Y:</span>
+              <span class="value">{{ selectedAgv.y }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="label">航向角:</span>
+              <span class="value">{{ selectedAgv.angle }}°</span>
+            </div>
+          </div>
+
+          <div class="detail-section">
+            <div class="section-title">电量信息</div>
+            <el-progress
+              :percentage="selectedAgv.power"
+              :color="getPowerColor(selectedAgv.power)"
+              :stroke-width="20"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getMapDetail, getAgvStatus } from '@/api/layout/screen'
+
+export default {
+  name: 'AgvScreenFullscreen',
+  data() {
+    return {
+      currentTime: '',
+      mapId: null,
+      mapDetail: null,
+      agvList: [],
+      selectedAgv: null,
+      mapScale: 1,
+      canvasOffset: { x: 0, y: 0 },
+      isDragging: false,
+      dragStart: { x: 0, y: 0 },
+      autoRefresh: true,
+      refreshTimer: null
+    }
+  },
+  computed: {
+    staticDevices() {
+      return this.mapDetail && this.mapDetail.device ? this.mapDetail.device : []
+    },
+    agvStats() {
+      const stats = { total: 0, normal: 0, rest: 0, error: 0 }
+      this.agvList.forEach(agv => {
+        stats.total++
+        if (agv.status == "1") stats.rest++
+        else if (agv.status =="2") stats.normal++
+        else if (agv.status == "3") stats.error++
+      })
+      return stats
+    },
+    containerStyle() {
+      return {
+        transform: `translate(${this.canvasOffset.x}px, ${this.canvasOffset.y}px)`,
+        cursor: this.isDragging ? 'grabbing' : 'grab'
+      }
+    },
+    mapStyle() {
+      if (!this.mapDetail) return {}
+      return {
+        width: this.mapDetail.width + 'px',
+        height: this.mapDetail.height + 'px',
+        transform: `scale(${this.mapScale})`,
+        transformOrigin: 'top left'
+      }
+    },
+    originStyle() {
+      if (!this.mapDetail) return {}
+      return {
+        left: this.mapDetail.x * this.mapScale + 'px',
+        top: this.mapDetail.y * this.mapScale + 'px'
+      }
+    }
+  },
+  mounted() {
+    // 从URL参数获取地图ID
+    this.mapId = this.$route.query.mapId
+    
+    this.updateTime()
+    setInterval(this.updateTime, 1000)
+    
+    if (this.mapId) {
+      this.loadMapDetail()
+    }
+    
+    this.startAutoRefresh()
+
+    document.addEventListener('mousemove', this.handleMouseMove)
+    document.addEventListener('mouseup', this.handleMouseUp)
+    
+    // 自动进入浏览器全屏
+    this.$nextTick(() => {
+      this.enterFullscreen()
+    })
+  },
+  beforeDestroy() {
+    this.stopAutoRefresh()
+    document.removeEventListener('mousemove', this.handleMouseMove)
+    document.removeEventListener('mouseup', this.handleMouseUp)
+  },
+  methods: {
+    updateTime() {
+      const now = new Date()
+      this.currentTime = now.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+      })
+    },
+    loadMapDetail() {
+      if (!this.mapId) return
+      getMapDetail(this.mapId).then(res => {
+        this.mapDetail = res
+        this.mapScale = 1
+        this.canvasOffset = { x: 0, y: 0 }
+      })
+    },
+    loadAgvStatus() {
+      getAgvStatus().then(res => {
+        this.agvList = res || []
+      })
+    },
+    startAutoRefresh() {
+      this.loadAgvStatus()
+      this.refreshTimer = setInterval(() => {
+        if (this.autoRefresh) {
+          this.loadAgvStatus()
+        }
+      }, 3000)
+    },
+    stopAutoRefresh() {
+      if (this.refreshTimer) {
+        clearInterval(this.refreshTimer)
+        this.refreshTimer = null
+      }
+    },
+    toggleAutoRefresh() {
+      this.autoRefresh = !this.autoRefresh
+      if (this.autoRefresh) {
+        this.loadAgvStatus()
+      }
+    },
+    enterFullscreen() {
+      const element = document.documentElement
+      if (element.requestFullscreen) {
+        element.requestFullscreen()
+      } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen()
+      } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen()
+      } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen()
+      }
+    },
+    closeWindow() {
+      window.close()
+    },
+    getMapUrl(mapId) {
+      return `${process.env.NODE_ENV === 'production' ? window.g.prod.VUE_APP_BASE_API : ''}/api/localStorage/download?storageId=${mapId}`
+    },
+    getDeviceIconUrl(device) {
+      return `${process.env.NODE_ENV === 'production' ? window.g.prod.VUE_APP_BASE_API : ''}/api/localStorage/download?storageId=${device.fileId}`
+    },
+    getAgvIcon(agv) {
+      if (agv.fileId) {
+        return `${process.env.NODE_ENV === 'production' ? window.g.prod.VUE_APP_BASE_API : ''}/api/localStorage/download?storageId=${agv.fileId}`
+      }
+      return ''
+    },
+    getDeviceStyle(device) {
+      return {
+        left: device.x * this.mapScale + 'px',
+        top: device.y * this.mapScale + 'px',
+        transform: 'translate(-50%, -50%)'
+      }
+    },
+    getDeviceImageStyle(device) {
+      const scale = device.size / 100
+      return {
+        transform: `rotate(${device.angle}deg) scale(${scale})`
+      }
+    },
+    getAgvStyle(agv) {
+      return {
+        left: agv.x * this.mapScale + 'px',
+        top: agv.y * this.mapScale + 'px',
+        transform: 'translate(-50%, -50%)'
+      }
+    },
+    getAgvImageStyle(agv) {
+      return {
+        transform: `rotate(${agv.angle}deg)`
+      }
+    },
+    isRequestAction(action) {
+      if (!action) return false
+      const requestActions = ['请求取货', '请求放货']
+      return requestActions.some(req => action.includes(req))
+    },
+    getPowerColor(power) {
+      if (power > 50) return '#67c23a'
+      if (power > 20) return '#e6a23c'
+      return '#f56c6c'
+    },
+    getPowerClass(power) {
+      if (power > 50) return 'power-high'
+      if (power > 20) return 'power-medium'
+      return 'power-low'
+    },
+    zoomIn() {
+      this.mapScale = Math.min(3, this.mapScale + 0.1)
+    },
+    zoomOut() {
+      this.mapScale = Math.max(0.3, this.mapScale - 0.1)
+    },
+    resetZoom() {
+      this.mapScale = 1
+      this.canvasOffset = { x: 0, y: 0 }
+    },
+    handleCanvasMouseDown(event) {
+      this.isDragging = true
+      this.dragStart = {
+        x: event.clientX - this.canvasOffset.x,
+        y: event.clientY - this.canvasOffset.y
+      }
+    },
+    handleMouseMove(event) {
+      if (this.isDragging) {
+        this.canvasOffset = {
+          x: event.clientX - this.dragStart.x,
+          y: event.clientY - this.dragStart.y
+        }
+      }
+    },
+    handleMouseUp() {
+      this.isDragging = false
+    },
+    handleAgvClick(agv) {
+      this.selectedAgv = agv
+    },
+    getStatusTagType(status) {
+      if (status === 1) return 'info'
+      if (status === 2) return 'success'
+      if (status === 3) return 'danger'
+      return 'warning'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.fullscreen-container {
+  width: 100vw;
+  height: 100vh;
+  background: #0a0e27;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.screen-header {
+  height: 60px;
+  background: linear-gradient(90deg, #1a1f3a 0%, #2d3561 100%);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  position: relative;
+}
+
+.header-left {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.time-display {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.time-label {
+  font-size: 11px;
+  color: #8b92b2;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.time {
+  font-size: 22px;
+  font-weight: 700;
+  color: #00f7ff;
+  font-family: 'Orbitron', 'Rajdhani', 'Share Tech Mono', 'Courier New', monospace;
+  letter-spacing: 2px;
+  text-shadow: 
+    0 0 10px rgba(0, 247, 255, 0.8),
+    0 0 20px rgba(0, 247, 255, 0.5),
+    0 0 30px rgba(0, 247, 255, 0.3);
+  animation: glow 2s ease-in-out infinite alternate;
+}
+
+@keyframes glow {
+  from {
+    text-shadow: 
+      0 0 10px rgba(0, 247, 255, 0.8),
+      0 0 20px rgba(0, 247, 255, 0.5),
+      0 0 30px rgba(0, 247, 255, 0.3);
+  }
+  to {
+    text-shadow: 
+      0 0 15px rgba(0, 247, 255, 1),
+      0 0 25px rgba(0, 247, 255, 0.7),
+      0 0 35px rgba(0, 247, 255, 0.5);
+  }
+}
+
+.header-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #fff;
+}
+
+.header-center i {
+  font-size: 28px;
+  color: #409eff;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  background: linear-gradient(90deg, #409eff, #67c23a);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.header-right {
+  flex: 1;
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.screen-body {
+  flex: 1;
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.left-panel {
+  width: 280px;
+  min-width: 250px;
+  max-width: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex-shrink: 0;
+  min-height: 0;
+}
+
+.stat-card {
+  background: linear-gradient(135deg, #1e2139 0%, #2a2f4a 100%);
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.stat-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  color: white;
+}
+
+.stat-content {
+  flex: 1;
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: bold;
+  color: #fff;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #8b92b2;
+  margin-top: 4px;
+}
+
+.agv-list-panel {
+  flex: 1;
+  background: linear-gradient(135deg, #1e2139 0%, #2a2f4a 100%);
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.panel-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 2px solid #409eff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  top: -16px;
+  background: linear-gradient(135deg, #1e2139 0%, #2a2f4a 100%);
+  z-index: 10;
+  margin: -16px -16px 12px -16px;
+  padding: 16px 16px 8px 16px;
+}
+
+.agv-list {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.agv-item {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  padding: 12px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.agv-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: #409eff;
+}
+
+.agv-item.active {
+  background: rgba(64, 158, 255, 0.2);
+  border-color: #409eff;
+}
+
+.agv-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.agv-id {
+  font-size: 14px;
+  font-weight: bold;
+  color: #fff;
+}
+
+.agv-item-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.info-row .label {
+  color: #8b92b2;
+}
+
+.info-row .value {
+  color: #fff;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.center-panel {
+  flex: 1;
+  min-width: 0;
+  background: linear-gradient(135deg, #1e2139 0%, #2a2f4a 100%);
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.map-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.zoom-info {
+  color: #fff;
+  font-size: 14px;
+}
+
+.map-canvas {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  background: #0f1219;
+  border-radius: 4px;
+  background-image:
+    linear-gradient(rgba(64, 158, 255, 0.1) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(64, 158, 255, 0.1) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+
+.map-container {
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.map-image {
+  display: block;
+  user-select: none;
+  pointer-events: none;
+}
+
+.static-device {
+  position: absolute;
+  opacity: 0.6;
+}
+
+.device-image {
+  width: 50px;
+  height: 50px;
+  object-fit: contain;
+}
+
+.agv-vehicle {
+  position: absolute;
+  cursor: pointer;
+  transition: all 0.3s;
+  z-index: 100;
+}
+
+.agv-vehicle.active {
+  z-index: 200;
+  filter: drop-shadow(0 0 10px #409eff);
+}
+
+.agv-vehicle.status-normal {
+  filter: drop-shadow(0 0 8px #67c23a);
+}
+
+.agv-vehicle.status-rest {
+  filter: drop-shadow(0 0 8px #909399);
+}
+
+.agv-vehicle.status-error {
+  filter: drop-shadow(0 0 8px #f56c6c);
+  animation: blink 1s infinite;
+}
+
+.agv-vehicle.status-request {
+  filter: drop-shadow(0 0 10px #e6a23c);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    filter: drop-shadow(0 0 8px #e6a23c);
+  }
+  50% {
+    filter: drop-shadow(0 0 15px #e6a23c);
+  }
+}
+
+.agv-image {
+  width: 60px;
+  height: 60px;
+  object-fit: contain;
+}
+
+.agv-label {
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  white-space: nowrap;
+}
+
+.agv-id-label {
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.agv-power-label {
+  background: rgba(0, 0, 0, 0.8);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.agv-power-label.power-high {
+  color: #67c23a;
+}
+
+.agv-power-label.power-medium {
+  color: #e6a23c;
+}
+
+.agv-power-label.power-low {
+  color: #f56c6c;
+}
+
+.origin-marker {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  color: #f56c6c;
+  font-size: 24px;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  z-index: 50;
+}
+
+.empty-map {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: #8b92b2;
+}
+
+.empty-map i {
+  font-size: 64px;
+  margin-bottom: 16px;
+}
+
+.empty-map p {
+  font-size: 16px;
+  margin: 0;
+}
+
+.right-panel {
+  width: 320px;
+  min-width: 280px;
+  max-width: 320px;
+  background: linear-gradient(135deg, #1e2139 0%, #2a2f4a 100%);
+  border-radius: 8px;
+  padding: 16px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-shrink: 0;
+  animation: slideInRight 0.3s ease;
+  min-height: 0;
+  max-height: 100%;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.agv-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.detail-section {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  padding: 12px;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: #409eff;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(64, 158, 255, 0.3);
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  font-size: 13px;
+}
+
+.detail-item .label {
+  color: #8b92b2;
+}
+
+.detail-item .value {
+  color: #fff;
+  font-weight: 500;
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(64, 158, 255, 0.5);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(64, 158, 255, 0.7);
+}
+</style>
diff --git a/acs/nladmin-ui/src/views/layout/screen/index.vue b/acs/nladmin-ui/src/views/layout/screen/index.vue
index 2534086..cd59543 100644
--- a/acs/nladmin-ui/src/views/layout/screen/index.vue
+++ b/acs/nladmin-ui/src/views/layout/screen/index.vue
@@ -22,6 +22,10 @@
           <i :class="autoRefresh ? 'el-icon-video-play' : 'el-icon-video-pause'" />
           {{ autoRefresh ? '自动刷新' : '已暂停' }}
         </el-button>
+        <el-button size="small" type="primary" @click="toggleFullscreen">
+          <i class="el-icon-full-screen" />
+          全屏展示
+        </el-button>
       </div>
     </div>
 
@@ -148,7 +152,7 @@
               class="agv-vehicle"
               :class="{
                 active: selectedAgv && selectedAgv.carId === agv.carId,
-                'status-normal': agv.status === 2 && !isRequestAction(agv.action),
+                'status-normal': agv.status === 2,
                 'status-rest': agv.status === 1,
                 'status-error': agv.status === 3,
                 'status-request': isRequestAction(agv.action)
@@ -289,9 +293,9 @@ export default {
       const stats = { total: 0, normal: 0, rest: 0, error: 0 }
       this.agvList.forEach(agv => {
         stats.total++
-        if (agv.status === 1) stats.rest++
-        else if (agv.status === 2) stats.normal++
-        else if (agv.status === 3) stats.error++
+        if (agv.status == "1") stats.rest++
+        else if (agv.status =="2") stats.normal++
+        else if (agv.status == "3") stats.error++
       })
       return stats
     },
@@ -478,6 +482,20 @@ export default {
     },
     handleMouseUp() {
       this.isDragging = false
+    },
+    toggleFullscreen() {
+      // 构建全屏页面URL，传递当前选中的地图ID
+      const baseUrl = window.location.origin + window.location.pathname.replace(/\/[^/]*$/, '')
+      const fullscreenUrl = `${baseUrl}/#/screen/fullscreen?mapId=${this.selectedMapId || ''}`
+
+      // 打开新窗口，设置为全屏
+      const width = window.screen.width
+      const height = window.screen.height
+      window.open(
+        fullscreenUrl,
+        '_blank',
+        `width=${width},height=${height},left=0,top=0,toolbar=no,menubar=no,location=no,status=no`
+      )
     }
   }
 }