看板全屏

src/router/modules/remaining.ts

@@ -1806,7 +1806,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
     children: [
       {
         path: 'monitor/kanban',
-        name: 'DeviceKanban',
+        name: 'Kanban',
         meta: {
           title: '设备看板',
           noCache: true,

src/styles/index.scss

@@ -35,3 +35,66 @@
     border-left-color: var(--el-color-primary);
   }
 }
+
+/* 全屏模式样式 */
+.app-fullscreen {
+  /* 隐藏所有布局相关元素 */
+  .layout-aside,
+  .sidebar-container,
+  .el-aside,
+  .app-header,
+  .layout-header,
+  .el-header,
+  .tags-view-container,
+  .app-footer,
+  .el-footer,
+  .layout-border__right,
+  .layout-border__top,
+  .layout-border__bottom,
+  .fixed.top-0.left-0.z-10,
+  .bg-\[var\(--top-header-bg-color\)\] {
+    display: none !important;
+  }
+
+  /* 调整主应用容器 */
+  .app-wrapper,
+  .layout-container,
+  .layout-content,
+  .app-main,
+  .main-container,
+  .layout-app-main {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    margin: 0 !important;
+    padding: 0 !important;
+
+    overflow: hidden !important;
+  }
+
+  /* 确保内容区域完全填充 */
+  .content-container,
+  .p-\[var\(--app-content-padding\)\].w-full {
+    height: 100% !important;
+    width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+  }
+
+  .min-h-screen {
+    height: 100vh !important;
+    width: 100vw !important;
+    margin: 0 !important;
+    padding: 0 !important;
+
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    overflow: hidden !important;
+    max-width: 100vw !important;
+    max-height: 100vh !important;
+  }
+}

src/views/pms/monitor/index.vue

@@ -398,7 +398,7 @@ const handleAdd = () => {
 
 // 显示编辑对话框
 const handleEdit = (row) => {
-  router.push({ path: '/kanban/monitor/kanban' })
+  router.push({ path: '/kanban/monitor/kanban', query: { deviceSetId: row.id } })
 }
 
 // 重置表单

src/views/pms/monitor/kanban.vue

@@ -1,6 +1,7 @@
 <template>
   <div
-    class="min-h-screen bg-gradient-to-br from-slate-950 via-blue-950 to-slate-900 text-cyan-100 p-6 relative overflow-hidden"
+    class="bg-gradient-to-br from-slate-950 via-blue-950 to-slate-900 text-cyan-100 p-6 relative"
+    :class="{ 'fullscreen-layout': isFullscreen }"
   >
     <!-- Animated background grid -->
     <div class="absolute inset-0 opacity-20">
@@ -38,6 +39,15 @@
           >
             <span class="inline-block skew-x-[12deg]">{{ item }}</span>
           </div>
+          <div
+            @click="toggleFullscreen"
+            style="border: 0.5px solid #085b77"
+            class="px-4 py-2 bg-cyan-500/10 border border-cyan-500/30 skew-x-[-12deg] hover:bg-cyan-500/20 transition-all cursor-pointer"
+          >
+            <span class="inline-block skew-x-[12deg]">{{
+              isFullscreen ? '退出全屏' : '全屏'
+            }}</span>
+          </div>
         </div>
       </div>
     </div>
@@ -54,7 +64,6 @@
             </div>
 
             <div class="space-y-3">
-              <!-- <DataRow label="氧气纯度" value="99.66 %" button="启停按钮" button-color="green" /> -->
               <DataRow label="氧气压力" value="0.54 MPa" />
               <DataRow label="氧气瞬时流量" value="3002.10 Nm³" />
               <DataRow label="氧气累计流量" value="219.6217 万Nm³" />
@@ -72,7 +81,6 @@
               <dv-decoration3 style="width: 120px; height: 30px" />
             </div>
             <div class="space-y-3">
-              <!-- <DataRow label="出口温度" value="6.7 ℃" button="启停按钮" button-color="green" /> -->
               <DataRow label="出口压力" value="0.6 MPa" />
               <div class="flex items-center justify-between mt-4">
                 <span class="text-cyan-200">冷干机运行状态</span>
@@ -93,8 +101,7 @@
               <dv-decoration3 style="width: 120px; height: 30px" />
             </div>
 
-            <div class="space-y-3">
-              <!-- <DataRow label="排气压力" value="3.47 MPa" button="启停按钮" button-color="green" /> -->
+            <div class="space-y-5">
               <DataRow label="排气温度" value="107.0 ℃" />
               <DataRow label="总用电能" value="247406.4 kWh" />
               <div class="flex items-center justify-between mt-4">
@@ -109,7 +116,6 @@
           <div class="panel relative overflow-hidden">
             <div class="relative h-[450px] flex items-center justify-center">
               <ModelViewer />
-              <!-- <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></div> -->
             </div>
           </div>
 
@@ -120,7 +126,6 @@
                 <h3 class="text-cyan-300 text-lg font-bold px-1"> 1050空压机参数 </h3>
               </dv-decoration7>
             </div>
-            <!-- <h3 class="panel-title">1050空压机参数</h3> -->
             <div class="grid grid-cols-5 gap-4">
               <div v-for="(unit, i) in compressorUnits" :key="i" class="space-y-2 text-center">
                 <div class="text-cyan-300 font-bold mb-2">{{ unit.name }}</div>
@@ -154,7 +159,9 @@
               <h3 class="text-cyan-300 text-lg font-bold">液驱压缩机参数</h3>
               <dv-decoration8 :reverse="true" style="width: 110px; height: 20px" />
             </div>
-            <div class="space-y-2 text-sm overflow-y-auto overflow-x-hidden">
+            <div
+              class="space-y-2 text-sm overflow-y-auto overflow-x-hidden max-h-[calc(100vh-200px)]"
+            >
               <DataRow label="入口压力" value="3.30 MPa" :compact="true" />
               <DataRow label="一级入口压力" value="3.32 MPa" :compact="true" />
               <DataRow label="A级一级出口温度" value="104.5 ℃" :compact="true" />
@@ -177,14 +184,57 @@
         </div>
       </div>
     </dv-border-box1>
-
-    <!-- Main content -->
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
 import DataRow from './data-row.vue'
 import ModelViewer from './ModelViewer.vue'
+
+defineOptions({
+  name: 'Kanban'
+})
+
+const isFullscreen = ref(false)
+
+const toggleFullscreen = async () => {
+  if (!document.fullscreenElement) {
+    // 进入全屏
+    document.body.classList.add('app-fullscreen')
+
+    // 等待 DOM 更新后请求全屏
+    await nextTick()
+    document.documentElement.requestFullscreen()
+  } else {
+    // 退出全屏
+    document
+      .exitFullscreen()
+      .then(() => {
+        document.body.classList.remove('app-fullscreen')
+      })
+      .catch((err) => {
+        console.error('退出全屏失败:', err)
+        document.body.classList.remove('app-fullscreen')
+      })
+  }
+}
+
+const handleFullscreenChange = () => {
+  isFullscreen.value = !!document.fullscreenElement
+  if (!document.fullscreenElement) {
+    document.body.classList.remove('app-fullscreen')
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+})
+// 添加 onUnmounted 来清理事件监听器
+onUnmounted(() => {
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
+})
+
 const leftNavItems = ['箱变', '1050空压机', 'PSA数据', '空气处理镜']
 const rightNavItems = ['主界面', '液驱及中压', '报警监控']
 
@@ -341,4 +391,22 @@ const compressorUnits = [
   box-shadow: 0 0 20px rgba(220, 38, 38, 0.8);
   transform: translateY(-1px);
 }
+
+/* 全屏模式下组件特定样式 */
+.fullscreen-layout {
+  height: 100vh !important;
+  width: 100vw !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  padding-top: 20px !important;
+  padding-left: 10px !important;
+  padding-right: 10px !important;
+  padding-bottom: 110px !important;
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  overflow: hidden !important;
+  max-width: 100vw !important;
+  max-height: 100vh !important;
+}
 </style>