From 4434480f32d517065d3ddb96343cdd74e31b7dbe Mon Sep 17 00:00:00 2001
From: zuqijia <2924963185@qq.com>
Date: Tue, 19 May 2026 17:56:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Navbar/index.vue        |  88 ++-
 src/layout/components/Sidebar/index.vue       | 219 ++----
 src/layout/index.vue                          |  48 +-
 src/modules/dashboardBig/views/cost.vue       | 426 +++++++-----
 src/modules/dashboardBig/views/energy.vue     | 451 +++++++-----
 src/modules/dashboardBig/views/index.vue      | 376 ++++++----
 src/modules/dashboardBig/views/oee.vue        | 324 ++++++---
 src/modules/dashboardBig/views/order.vue      | 422 +++++++-----
 src/modules/dashboardBig/views/output.vue     | 338 ++++++---
 .../dashboardBig/views/stopAnalysis.vue       | 355 +++++++---
 src/router/index.js                           | 112 +--
 src/store/modules/permission.js               |  23 +-
 src/views/dashboard/cost/index.vue            | 602 ----------------
 src/views/dashboard/demo/index.vue            | 458 -------------
 src/views/dashboard/energy/index.vue          | 644 ------------------
 src/views/dashboard/order/index.vue           |  78 ---
 src/views/data-source/index.vue               |  70 --
 src/views/home/index.vue                      | 278 --------
 src/views/reports/acid-rolling/index.vue      | 332 ---------
 src/views/reports/acid-stop/index.vue         | 308 ---------
 src/views/reports/index.vue                   | 107 ---
 src/views/screens/acid-rolling/index.vue      | 502 +++++++-------
 src/views/screens/create.vue                  | 170 -----
 src/views/screens/edit.vue                    | 178 -----
 src/views/screens/index.vue                   | 201 ------
 src/views/screens/list.vue                    | 198 ------
 src/views/system/config/index.vue             |  34 -
 src/views/system/index.vue                    | 180 -----
 src/views/system/menu/index.vue               | 126 ----
 src/views/system/role/index.vue               | 109 ---
 src/views/system/user/index.vue               | 121 ----
 31 files changed, 2162 insertions(+), 5716 deletions(-)
 delete mode 100644 src/views/dashboard/cost/index.vue
 delete mode 100644 src/views/dashboard/demo/index.vue
 delete mode 100644 src/views/dashboard/energy/index.vue
 delete mode 100644 src/views/dashboard/order/index.vue
 delete mode 100644 src/views/data-source/index.vue
 delete mode 100644 src/views/home/index.vue
 delete mode 100644 src/views/reports/acid-rolling/index.vue
 delete mode 100644 src/views/reports/acid-stop/index.vue
 delete mode 100644 src/views/reports/index.vue
 delete mode 100644 src/views/screens/create.vue
 delete mode 100644 src/views/screens/edit.vue
 delete mode 100644 src/views/screens/index.vue
 delete mode 100644 src/views/screens/list.vue
 delete mode 100644 src/views/system/config/index.vue
 delete mode 100644 src/views/system/index.vue
 delete mode 100644 src/views/system/menu/index.vue
 delete mode 100644 src/views/system/role/index.vue
 delete mode 100644 src/views/system/user/index.vue

diff --git a/src/layout/components/Navbar/index.vue b/src/layout/components/Navbar/index.vue
index fbbbd98..e56cb8f 100644
--- a/src/layout/components/Navbar/index.vue
+++ b/src/layout/components/Navbar/index.vue
@@ -5,39 +5,58 @@
       <span class="navbar-title">{{ title }}</span>
     </div>
     <div class="navbar-right">
-      <el-button link icon="Search" class="nav-btn">搜索</el-button>
-      <el-button link icon="Refresh" class="nav-btn">刷新</el-button>
-      <el-button link icon="FullScreen" class="nav-btn">全屏</el-button>
-      <el-button link icon="Bell" class="nav-btn">
-        <span class="badge">3</span>
+      <el-button link icon="Refresh" class="nav-btn" @click="handleRefresh" title="刷新数据">
+        <span>{{ refreshing ? '刷新中...' : '' }}</span>
       </el-button>
-      <div class="user-info">
-        <el-icon><User /></el-icon>
-        <span>管理员</span>
-      </div>
+      <el-button link :icon="isFullscreen ? 'FullScreenExit' : 'FullScreen'" class="nav-btn" @click="handleToggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏'"></el-button>
     </div>
   </nav>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
-import { User } from '@element-plus/icons-vue'
 import Hamburger from './Hamburger.vue'
 
 const store = useStore()
 
 const title = computed(() => store.state.settings.title)
+const isFullscreen = ref(false)
+const refreshing = ref(false)
 
 const toggleSideBar = () => {
   store.dispatch('app/toggleSideBar')
 }
+
+const handleRefresh = () => {
+  refreshing.value = true
+  window.dispatchEvent(new CustomEvent('refresh-data'))
+  setTimeout(() => {
+    refreshing.value = false
+  }, 1500)
+}
+
+const handleToggleFullscreen = () => {
+  window.dispatchEvent(new CustomEvent('toggle-fullscreen'))
+}
+
+const handleFullscreenChange = () => {
+  isFullscreen.value = !!document.fullscreenElement
+}
+
+onMounted(() => {
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
+})
 </script>
 
 <style lang="scss" scoped>
 .navbar {
   height: 50px;
-  background: linear-gradient(90deg, #20b6f9, #2178f1);
+  background: linear-gradient(90deg, rgba(0, 168, 204, 0.9) 0%, rgba(0, 212, 255, 0.8) 50%, rgba(0, 168, 204, 0.9) 100%);
   width: 100%;
   flex-shrink: 0;
   display: flex;
@@ -45,6 +64,7 @@ const toggleSideBar = () => {
   align-items: center;
   padding: 0 20px;
   box-sizing: border-box;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
 }
 
 .navbar-left {
@@ -56,54 +76,24 @@ const toggleSideBar = () => {
 .navbar-title {
   font-size: 18px;
   font-weight: bold;
-  color: #ffffff;
+  color: #0a1428;
 }
 
 .navbar-right {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
 }
 
 .nav-btn {
   width: 36px;
   height: 36px;
-  border-radius: 4px;
-  color: #ffffff;
+  border-radius: 6px;
+  color: #0a1428;
+  font-size: 16px;
 
   &:hover {
-    background: rgba(255, 255, 255, 0.2);
-  }
-
-  .badge {
-    position: absolute;
-    top: 2px;
-    right: 2px;
-    min-width: 16px;
-    height: 16px;
-    line-height: 16px;
-    font-size: 12px;
-    background: #f56c6c;
-    color: #fff;
-    border-radius: 8px;
-    text-align: center;
+    background: rgba(0, 20, 40, 0.2);
   }
 }
-
-.user-info {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 12px;
-  height: 36px;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-  font-size: 14px;
-  color: #ffffff;
-  margin-left: 8px;
-
-  :deep(.el-icon) {
-    color: #ffffff;
-  }
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 393630a..0fecaae 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -3,7 +3,7 @@
     <div class="sidebar-header">
       <div class="logo-wrapper">
         <span class="logo-icon">📊</span>
-        <span v-show="sidebar.opened" class="logo-text">数据管理平台</span>
+        <span v-show="sidebar.opened" class="logo-text">数据大屏</span>
       </div>
     </div>
     <el-scrollbar class="sidebar-scroll">
@@ -16,24 +16,10 @@
         router
         unique-opened
       >
-        <template v-for="item in menuItems" :key="item.path">
-          <el-menu-item v-if="!item.children || item.children.length === 0" :index="item.path">
-            <el-icon :size="14"><component :is="getIcon(item.meta?.icon)" /></el-icon>
-            <span>{{ item.meta?.title }}</span>
-          </el-menu-item>
-          <el-sub-menu v-else :index="item.path">
-            <template #title>
-              <el-icon :size="14"><component :is="getIcon(item.meta?.icon)" /></el-icon>
-              <span>{{ item.meta?.title }}</span>
-            </template>
-            <template v-for="child in item.children" :key="child.path">
-              <el-menu-item v-if="!child.children || child.children.length === 0" :index="child.path">
-                <el-icon :size="12"><component :is="getIcon(child.meta?.icon)" /></el-icon>
-                <span>{{ child.meta?.title }}</span>
-              </el-menu-item>
-            </template>
-          </el-sub-menu>
-        </template>
+        <el-menu-item v-for="item in menuItems" :key="item.path" :index="item.path">
+          <el-icon :size="14"><component :is="getIcon(item.meta?.icon)" /></el-icon>
+          <span>{{ item.meta?.title }}</span>
+        </el-menu-item>
       </el-menu>
     </el-scrollbar>
   </div>
@@ -43,7 +29,7 @@
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
-import { Refresh, Monitor, PieChart, Document, List, Plus, Bell, Setting } from '@element-plus/icons-vue'
+import { Monitor, PieChart, Document, Bell } from '@element-plus/icons-vue'
 
 const route = useRoute()
 const store = useStore()
@@ -52,24 +38,14 @@ const sidebar = computed(() => store.state.app.sidebar)
 const activeMenu = computed(() => route.path)
 
 const iconMap = {
-  'dashboard': Monitor,
   'monitor': Monitor,
   'example': PieChart,
   'order': Document,
   'cost': PieChart,
   'energy': Monitor,
-  'pie-chart': PieChart,
-  'list': List,
-  'plus': Plus,
-  'document': Document,
+  'oee': PieChart,
   'output': PieChart,
-  'stop': Bell,
-  'system': Setting,
-  'user': Refresh,
-  'role': Refresh,
-  'menu': List,
-  'config': Setting,
-  'database': Monitor
+  'stop': Bell
 }
 
 const getIcon = (iconName) => {
@@ -77,52 +53,14 @@ const getIcon = (iconName) => {
 }
 
 const menuItems = [
-  {
-    path: '/index',
-    meta: { title: '工作台', icon: 'dashboard' },
-    children: []
-  },
-  {
-    path: '/dashboard',
-    meta: { title: '数据大屏', icon: 'monitor' },
-    children: [
-      { path: '/dashboard/demo', meta: { title: '示例大屏', icon: 'example' }, children: [] },
-      { path: '/dashboard/order', meta: { title: '订单大屏', icon: 'order' }, children: [] },
-      { path: '/dashboard/cost', meta: { title: '成本大屏', icon: 'cost' }, children: [] },
-      { path: '/dashboard/energy', meta: { title: '能源大屏', icon: 'energy' }, children: [] },
-      { path: '/dashboard/acid-rolling', meta: { title: '酸轧数据大屏', icon: 'example' }, children: [] }
-    ]
-  },
-  {
-    path: '/screen-manage',
-    meta: { title: '大屏管理', icon: 'pie-chart' },
-    children: [
-      { path: '/screen-manage', meta: { title: '大屏列表', icon: 'list' }, children: [] },
-      { path: '/screen-manage/create', meta: { title: '新建大屏', icon: 'plus' }, children: [] }
-    ]
-  },
-  {
-    path: '/reports',
-    meta: { title: '报表管理', icon: 'document' },
-    children: [
-      { path: '/reports', meta: { title: '报表列表', icon: 'list' }, children: [] },
-      { path: '/reports/acid-rolling', meta: { title: '酸轧产出报表', icon: 'output' }, children: [] },
-      { path: '/reports/acid-stop', meta: { title: '酸轧停机报表', icon: 'stop' }, children: [] }
-    ]
-  },
-  {
-    path: '/system',
-    meta: { title: '系统管理', icon: 'system' },
-    children: [
-      { path: '/system/menu', meta: { title: '菜单管理', icon: 'menu' }, children: [] },
-      { path: '/system/config', meta: { title: '系统配置', icon: 'config' }, children: [] }
-    ]
-  },
-  {
-    path: '/data-source',
-    meta: { title: '数据源配置', icon: 'database' },
-    children: []
-  }
+  { path: '/dashboard/demo', meta: { title: '示例大屏', icon: 'example' } },
+  { path: '/dashboard/order', meta: { title: '订单大屏', icon: 'order' } },
+  { path: '/dashboard/cost', meta: { title: '成本大屏', icon: 'cost' } },
+  { path: '/dashboard/energy', meta: { title: '能源大屏', icon: 'energy' } },
+  { path: '/dashboard/oee', meta: { title: 'OEE综合大屏', icon: 'oee' } },
+  { path: '/dashboard/output', meta: { title: '产出监控大屏', icon: 'output' } },
+  { path: '/dashboard/stop-analysis', meta: { title: '停机分析大屏', icon: 'stop' } },
+  { path: '/dashboard/acid-rolling', meta: { title: '酸轧数据大屏', icon: 'example' } }
 ]
 </script>
 
@@ -131,9 +69,9 @@ const menuItems = [
   flex-shrink: 0;
   width: 200px;
   height: 100vh;
-  background: #ffffff;
-  border-right: 1px solid #e8e8e8;
-  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
+  background: linear-gradient(180deg, #0a1428 0%, #0d1b34 100%);
+  border-right: 1px solid rgba(0, 212, 255, 0.2);
+  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.3);
   transition: width 0.28s ease;
   overflow: hidden;
 
@@ -147,8 +85,8 @@ const menuItems = [
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #3A71A8, #324157);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  background: linear-gradient(90deg, #00a8cc 0%, #00d4ff 50%, #00a8cc 100%);
+  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
 
   .logo-wrapper {
     display: flex;
@@ -157,13 +95,13 @@ const menuItems = [
 
     .logo-icon {
       font-size: 20px;
-      color: #ffffff;
+      color: #0a1428;
     }
 
     .logo-text {
       font-size: 16px;
       font-weight: bold;
-      color: #ffffff;
+      color: #0a1428;
       transition: opacity 0.2s ease;
     }
   }
@@ -175,22 +113,22 @@ const menuItems = [
   overflow-x: hidden;
 
   &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
   }
 
   &::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 4px;
+    background: rgba(0, 212, 255, 0.1);
+    border-radius: 3px;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: #c1c1c1;
-    border-radius: 4px;
+    background: rgba(0, 212, 255, 0.3);
+    border-radius: 3px;
     transition: background 0.2s;
 
     &:hover {
-      background: #a8a8a8;
+      background: rgba(0, 212, 255, 0.5);
     }
   }
 }
@@ -198,78 +136,62 @@ const menuItems = [
 .sidebar-menu {
   border-right: none;
   background: transparent;
-  padding: 4px;
+  padding: 8px;
 
   :deep(.el-menu) {
     border-right: none;
     background: transparent;
   }
 
-  :deep(.el-menu-item),
-  :deep(.el-sub-menu__title) {
-    height: 38px;
-    line-height: 38px;
-    color: #333333;
-    margin: 2px 0;
-    padding: 0 8px;
-    border-radius: 0;
+  :deep(.el-menu-item) {
+    height: 44px;
+    line-height: 44px;
+    color: #ffffff;
+    margin: 6px 4px;
+    padding: 0 16px;
+    border-radius: 8px;
     position: relative;
     border-left: 3px solid transparent;
-    transition: all 0.2s ease;
+    transition: all 0.25s ease;
+    background: rgba(0, 212, 255, 0.08);
+    font-size: 14px;
 
     .el-icon {
-      color: #8c8c8c;
-      margin-right: 8px;
-      font-size: 14px;
+      color: #00d4ff;
+      margin-right: 12px;
+      font-size: 16px;
     }
 
     &:hover {
-      background: rgba(0, 0, 0, 0.06);
-      color: #1a1a1a;
+      background: rgba(0, 212, 255, 0.25);
+      color: #ffffff;
+      transform: translateX(4px);
 
       .el-icon {
-        color: #555555;
+        color: #00d4ff;
+        text-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
       }
     }
 
     &.is-active {
-      border-left: 3px solid #409eff;
-      background: rgba(64, 158, 255, 0.1);
-      color: #1a1a1a;
+      border-left: 3px solid #00d4ff;
+      background: rgba(0, 212, 255, 0.3);
+      color: #ffffff;
       font-weight: 600;
+      box-shadow: 0 0 15px rgba(0, 212, 255, 0.25);
 
       .el-icon {
-        color: #409eff;
+        color: #00d4ff;
+        text-shadow: 0 0 15px rgba(0, 212, 255, 0.9);
       }
     }
   }
 
-  :deep(.el-sub-menu__title) {
-    &::after {
-      font-size: 12px;
-      color: #8c8c8c;
-    }
-  }
-
-  :deep(.el-sub-menu .el-menu-item) {
-    padding-left: 18px !important;
-    font-size: 13px;
-
-    &.is-active {
-      padding-left: 18px !important;
-    }
-  }
-
-  :deep(.el-sub-menu .el-sub-menu .el-menu-item) {
-    padding-left: 28px !important;
-    font-size: 12px;
-  }
-
   &.is-collapse {
-    :deep(.el-menu-item),
-    :deep(.el-sub-menu__title) {
+    :deep(.el-menu-item) {
       padding: 0;
       text-align: center;
+      border-left: none;
 
       span {
         display: none;
@@ -278,27 +200,12 @@ const menuItems = [
       .el-icon {
         margin-right: 0;
       }
+
+      &.is-active {
+        border-left: none;
+        background: rgba(0, 212, 255, 0.2);
+      }
     }
   }
 }
-
-:deep(.el-menu--popup) {
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-
-  .el-menu-item {
-    padding: 0 20px;
-    border-left: none;
-
-    &:hover {
-      background: rgba(64, 158, 255, 0.08);
-    }
-
-    &.is-active {
-      border-left: none;
-      background: rgba(64, 158, 255, 0.12);
-    }
-  }
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index f1d3ee6..226070c 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,17 +1,48 @@
 <template>
   <div class="app-wrapper">
-    <sidebar />
-    <div class="main-wrapper">
-      <navbar />
+    <sidebar v-show="!isFullscreen" />
+    <div class="main-wrapper" :class="{ 'fullscreen': isFullscreen }">
+      <navbar v-show="!isFullscreen" />
       <app-main />
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
 import Sidebar from './components/Sidebar/index.vue'
 import Navbar from './components/Navbar/index.vue'
 import AppMain from './components/AppMain.vue'
+
+const isFullscreen = ref(false)
+
+const handleFullscreenChange = () => {
+  isFullscreen.value = !!document.fullscreenElement
+}
+
+const handleToggleFullscreen = () => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen().catch(err => {
+      console.error('全屏请求失败:', err)
+    })
+  } else {
+    document.exitFullscreen().catch(err => {
+      console.error('退出全屏失败:', err)
+    })
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+  
+  window.addEventListener('toggle-fullscreen', handleToggleFullscreen)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  
+  window.removeEventListener('toggle-fullscreen', handleToggleFullscreen)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -29,6 +60,15 @@ import AppMain from './components/AppMain.vue'
   height: 100vh;
   overflow: hidden;
   min-width: 0;
+
+  &.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9999;
+  }
 }
 
 :deep(.sidebar-container) {
@@ -40,4 +80,4 @@ import AppMain from './components/AppMain.vue'
     width: 54px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/dashboardBig/views/cost.vue b/src/modules/dashboardBig/views/cost.vue
index eb21d1c..319c225 100644
--- a/src/modules/dashboardBig/views/cost.vue
+++ b/src/modules/dashboardBig/views/cost.vue
@@ -3,29 +3,34 @@
     <div class="screen-content">
       <header class="screen-header">
         <h1 class="title">成本数据大屏</h1>
-        <span class="time">{{ currentTime }}</span>
+        <div class="header-right">
+          <span class="time">{{ currentTime }}</span>
+          <button v-if="isFullscreen" class="exit-fullscreen-btn" @click="exitFullscreen" title="退出全屏">
+            <span>⛶ 退出全屏</span>
+          </button>
+        </div>
       </header>
 
       <main class="screen-body">
-        <div class="card-grid">
-          <div class="data-card" v-for="card in cards" :key="card.title">
-            <div class="card-title">{{ card.title }}</div>
-            <div class="card-value" :style="{ color: card.color }">{{ card.value }}</div>
-            <div class="card-unit">{{ card.unit }}</div>
+        <div class="kpi-grid">
+          <div class="kpi-card" v-for="card in cards" :key="card.title">
+            <div class="card-header">{{ card.title }}</div>
+            <div class="kpi-value" :style="{ color: card.color }">{{ card.value }}</div>
+            <div class="kpi-unit">{{ card.unit }}</div>
           </div>
         </div>
 
-        <div class="chart-area">
-          <div class="chart-box">
-            <div class="box-title">成本趋势</div>
+        <div class="chart-row">
+          <div class="chart-box flex-1">
+            <div class="box-header">成本趋势</div>
             <div ref="trendChartRef" class="chart"></div>
           </div>
-          <div class="chart-box">
-            <div class="box-title">成本构成</div>
+          <div class="chart-box flex-1">
+            <div class="box-header">成本构成</div>
             <div ref="pieChartRef" class="chart"></div>
           </div>
-          <div class="chart-box">
-            <div class="box-title">成本对比</div>
+          <div class="chart-box flex-1">
+            <div class="box-header">成本对比</div>
             <div class="compare-list">
               <div class="compare-item" v-for="item in compareList" :key="item.name">
                 <span class="name">{{ item.name }}</span>
@@ -38,9 +43,9 @@
           </div>
         </div>
 
-        <div class="bottom-area">
-          <div class="bottom-box">
-            <div class="box-title">成本类型对比</div>
+        <div class="chart-row">
+          <div class="chart-box flex-1">
+            <div class="box-header">成本类型对比</div>
             <div class="cost-grid">
               <div class="cost-item" v-for="item in costItems" :key="item.name">
                 <div class="cost-header">
@@ -54,12 +59,12 @@
               </div>
             </div>
           </div>
-          <div class="bottom-box">
-            <div class="box-title">月度成本对比</div>
+          <div class="chart-box flex-1">
+            <div class="box-header">月度成本对比</div>
             <div ref="barChartRef" class="chart"></div>
           </div>
-          <div class="bottom-box">
-            <div class="box-title">成本分析</div>
+          <div class="chart-box flex-1">
+            <div class="box-header">成本分析</div>
             <div class="analysis-list">
               <div class="analysis-item" v-for="item in analysisList" :key="item.label">
                 <span class="label">{{ item.label }}</span>
@@ -79,6 +84,7 @@ import { ref, onMounted, onBeforeUnmount, onUnmounted, nextTick } from 'vue'
 import * as echarts from 'echarts'
 
 const currentTime = ref('')
+const isFullscreen = ref(false)
 const trendChartRef = ref(null)
 const pieChartRef = ref(null)
 const barChartRef = ref(null)
@@ -87,35 +93,36 @@ let pieChart = null
 let barChart = null
 let timeInterval = null
 let resizeObserver = null
+let fullscreenChangeHandler = null
 
 const cards = ref([
-  { title: '总成本', value: '156.8', unit: '万', color: '#f56c6c' },
-  { title: '材料成本', value: '98.5', unit: '万', color: '#4a90d9' },
-  { title: '人工成本', value: '23.4', unit: '万', color: '#5cd9e8' },
-  { title: '能源成本', value: '18.9', unit: '万', color: '#ff9800' }
+  { title: '总成本', value: '156.8', unit: '万', color: '#ff6b6b' },
+  { title: '材料成本', value: '98.5', unit: '万', color: '#00d4ff' },
+  { title: '人工成本', value: '23.4', unit: '万', color: '#7c63ff' },
+  { title: '能源成本', value: '18.9', unit: '万', color: '#ff9f43' }
 ])
 
 const compareList = ref([
-  { name: '材料成本', percent: 62.8, value: '98.5万', color: '#4a90d9' },
-  { name: '人工成本', percent: 14.9, value: '23.4万', color: '#5cd9e8' },
-  { name: '能源成本', percent: 12.1, value: '18.9万', color: '#ff9800' },
-  { name: '其他成本', percent: 10.2, value: '16.0万', color: '#f56c6c' }
+  { name: '材料成本', percent: 62.8, value: '98.5万', color: '#00d4ff' },
+  { name: '人工成本', percent: 14.9, value: '23.4万', color: '#7c63ff' },
+  { name: '能源成本', percent: 12.1, value: '18.9万', color: '#ff9f43' },
+  { name: '其他成本', percent: 10.2, value: '16.0万', color: '#ff6b6b' }
 ])
 
 const costItems = ref([
-  { name: '材料成本', percent: 62.8, value: '¥98.5万', color: '#4a90d9' },
-  { name: '人工成本', percent: 14.9, value: '¥23.4万', color: '#5cd9e8' },
-  { name: '能源成本', percent: 12.1, value: '¥18.9万', color: '#ff9800' },
-  { name: '其他成本', percent: 10.2, value: '¥16.0万', color: '#f56c6c' }
+  { name: '材料成本', percent: 62.8, value: '¥98.5万', color: '#00d4ff' },
+  { name: '人工成本', percent: 14.9, value: '¥23.4万', color: '#7c63ff' },
+  { name: '能源成本', percent: 12.1, value: '¥18.9万', color: '#ff9f43' },
+  { name: '其他成本', percent: 10.2, value: '¥16.0万', color: '#ff6b6b' }
 ])
 
 const analysisList = ref([
-  { label: '材料成本占比', value: '62.8%', change: 2.5, color: '#4a90d9' },
-  { label: '人工成本占比', value: '14.9%', change: -1.2, color: '#5cd9e8' },
-  { label: '能源成本占比', value: '12.1%', change: 3.8, color: '#ff9800' },
-  { label: '成本同比增长', value: '8.5%', change: 5.2, color: '#52c41a' },
-  { label: '预算执行率', value: '92.3%', change: -1.5, color: '#9c27b0' },
-  { label: '成本节约率', value: '5.6%', change: 2.1, color: '#33cea0' }
+  { label: '材料成本占比', value: '62.8%', change: 2.5, color: '#00d4ff' },
+  { label: '人工成本占比', value: '14.9%', change: -1.2, color: '#7c63ff' },
+  { label: '能源成本占比', value: '12.1%', change: 3.8, color: '#ff9f43' },
+  { label: '成本同比增长', value: '8.5%', change: 5.2, color: '#00ff88' },
+  { label: '预算执行率', value: '92.3%', change: -1.5, color: '#a0c4e8' },
+  { label: '成本节约率', value: '5.6%', change: 2.1, color: '#00ff88' }
 ])
 
 const updateTime = () => {
@@ -125,26 +132,51 @@ const updateTime = () => {
   })
 }
 
+const toggleFullscreen = () => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen().then(() => {
+      isFullscreen.value = true
+    }).catch(err => {
+      console.error('全屏请求失败:', err)
+    })
+  } else {
+    document.exitFullscreen().then(() => {
+      isFullscreen.value = false
+    }).catch(err => {
+      console.error('退出全屏失败:', err)
+    })
+  }
+}
+
+const handleFullscreenChange = () => {
+  isFullscreen.value = !!document.fullscreenElement
+}
+
 const initCharts = () => {
   if (trendChartRef.value) {
     trendChart = echarts.init(trendChartRef.value)
     trendChart.setOption({
-      backgroundColor: '#ffffff',
+      backgroundColor: 'transparent',
       grid: { top: 30, right: 30, bottom: 30, left: 60 },
-      tooltip: { trigger: 'axis' },
+      tooltip: { 
+        trigger: 'axis',
+        backgroundColor: 'rgba(10, 20, 40, 0.9)',
+        borderColor: '#1e3a5f',
+        textStyle: { color: '#fff' }
+      },
       xAxis: {
         type: 'category',
         data: ['1月', '2月', '3月', '4月', '5月', '6月'],
-        axisLine: { lineStyle: { color: '#ddd' } },
+        axisLine: { lineStyle: { color: '#3a5a8a' } },
         axisTick: { show: false },
-        axisLabel: { color: '#666' }
+        axisLabel: { color: '#a0c4e8' }
       },
       yAxis: {
         type: 'value',
         axisLine: { show: false },
         axisTick: { show: false },
-        splitLine: { lineStyle: { color: '#eee' } },
-        axisLabel: { color: '#666', formatter: (v) => (v / 10000).toFixed(0) + '万' }
+        splitLine: { lineStyle: { color: '#1e3a5f', type: 'dashed' } },
+        axisLabel: { color: '#a0c4e8', formatter: (v) => (v / 10000).toFixed(0) + '万' }
       },
       series: [{
         type: 'line',
@@ -152,12 +184,12 @@ const initCharts = () => {
         data: [1420000, 1380000, 1520000, 1490000, 1568000, 1568000],
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(74,144,217,0.5)' },
-            { offset: 1, color: 'rgba(74,144,217,0.1)' }
+            { offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
+            { offset: 1, color: 'rgba(0, 212, 255, 0.05)' }
           ])
         },
-        lineStyle: { color: '#4a90d9', width: 3 },
-        itemStyle: { color: '#4a90d9' },
+        lineStyle: { color: '#00d4ff', width: 3 },
+        itemStyle: { color: '#00d4ff' },
         symbol: 'circle',
         symbolSize: 8
       }]
@@ -167,18 +199,23 @@ const initCharts = () => {
   if (pieChartRef.value) {
     pieChart = echarts.init(pieChartRef.value)
     pieChart.setOption({
-      backgroundColor: '#ffffff',
-      tooltip: { trigger: 'item' },
-      legend: { bottom: 10, textStyle: { color: '#666' } },
+      backgroundColor: 'transparent',
+      tooltip: { 
+        trigger: 'item',
+        backgroundColor: 'rgba(10, 20, 40, 0.9)',
+        borderColor: '#1e3a5f',
+        textStyle: { color: '#fff' }
+      },
+      legend: { bottom: 0, textStyle: { color: '#a0c4e8' } },
       series: [{
         type: 'pie',
         radius: ['45%', '75%'],
         center: ['50%', '45%'],
         data: [
-          { value: 62.8, name: '材料成本', itemStyle: { color: '#4a90d9' } },
-          { value: 14.9, name: '人工成本', itemStyle: { color: '#5cd9e8' } },
-          { value: 12.1, name: '能源成本', itemStyle: { color: '#ff9800' } },
-          { value: 10.2, name: '其他成本', itemStyle: { color: '#f56c6c' } }
+          { value: 62.8, name: '材料成本', itemStyle: { color: '#00d4ff' } },
+          { value: 14.9, name: '人工成本', itemStyle: { color: '#7c63ff' } },
+          { value: 12.1, name: '能源成本', itemStyle: { color: '#ff9f43' } },
+          { value: 10.2, name: '其他成本', itemStyle: { color: '#ff6b6b' } }
         ],
         label: { show: false }
       }]
@@ -188,33 +225,38 @@ const initCharts = () => {
   if (barChartRef.value) {
     barChart = echarts.init(barChartRef.value)
     barChart.setOption({
-      backgroundColor: '#ffffff',
+      backgroundColor: 'transparent',
       grid: { top: 20, right: 20, bottom: 30, left: 50 },
-      tooltip: { trigger: 'axis' },
+      tooltip: { 
+        trigger: 'axis',
+        backgroundColor: 'rgba(10, 20, 40, 0.9)',
+        borderColor: '#1e3a5f',
+        textStyle: { color: '#fff' }
+      },
       xAxis: {
         type: 'category',
         data: ['1月', '2月', '3月', '4月', '5月'],
-        axisLine: { lineStyle: { color: '#ddd' } },
+        axisLine: { lineStyle: { color: '#3a5a8a' } },
         axisTick: { show: false },
-        axisLabel: { color: '#666' }
+        axisLabel: { color: '#a0c4e8' }
       },
       yAxis: {
         type: 'value',
         axisLine: { show: false },
         axisTick: { show: false },
-        splitLine: { lineStyle: { color: '#eee' } },
-        axisLabel: { color: '#666', formatter: (v) => (v / 10000).toFixed(0) + '万' }
+        splitLine: { lineStyle: { color: '#1e3a5f', type: 'dashed' } },
+        axisLabel: { color: '#a0c4e8', formatter: (v) => (v / 10000).toFixed(0) + '万' }
       },
       series: [{
         type: 'bar',
-        data: [142, 138, 152, 149, 156.8],
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#4a90d9' },
-            { offset: 1, color: '#5cd9e8' }
-          ]),
-          borderRadius: [4, 4, 0, 0]
-        }
+        data: [142, 138, 152, 149, 156.8].map((value, index) => ({
+          value,
+          itemStyle: {
+            color: ['#00d4ff', '#7c63ff', '#00ff88', '#ff9f43', '#ff6b6b'][index],
+            borderRadius: [4, 4, 0, 0]
+          }
+        })),
+        barWidth: '50%'
       }]
     })
   }
@@ -248,18 +290,32 @@ onMounted(() => {
       }
     }
   })
+
+  fullscreenChangeHandler = handleFullscreenChange
+  document.addEventListener('fullscreenchange', fullscreenChangeHandler)
+  
+  window.addEventListener('refresh-data', handleRefresh)
 })
 
+const handleRefresh = () => {
+  initCharts()
+}
+
 onBeforeUnmount(() => {
   if (timeInterval) {
     clearInterval(timeInterval)
     timeInterval = null
   }
   window.removeEventListener('resize', handleResize)
+  window.removeEventListener('refresh-data', handleRefresh)
   if (resizeObserver) {
     resizeObserver.disconnect()
     resizeObserver = null
   }
+  if (fullscreenChangeHandler) {
+    document.removeEventListener('fullscreenchange', fullscreenChangeHandler)
+    fullscreenChangeHandler = null
+  }
   if (trendChart) {
     trendChart.dispose()
     trendChart = null
@@ -283,18 +339,16 @@ onUnmounted(() => {
 .screen-wrapper {
   width: 100%;
   min-height: 100%;
-  background: #f5f5f5;
+  background: linear-gradient(180deg, #0a1428 0%, #0d1b34 50%, #0a1428 100%);
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 .screen-content {
-  background: #ffffff;
-  color: #333333;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  background: transparent;
+  color: #ffffff;
   width: 100%;
-  padding-bottom: 20px;
+  padding: 20px;
 }
 
 .screen-header {
@@ -302,94 +356,143 @@ onUnmounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 20px 30px;
-  border-bottom: 1px solid #eee;
+  background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, rgba(12, 30, 60, 0.8) 100%);
+  border-radius: 8px;
+  margin-bottom: 20px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
 
   .title {
-    font-size: 24px;
+    font-size: 26px;
     font-weight: bold;
-    color: #333333;
-    letter-spacing: 2px;
+    color: #00d4ff;
+    letter-spacing: 3px;
     margin: 0;
+    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 20px;
   }
 
   .time {
-    font-size: 16px;
-    color: #666666;
+    font-size: 18px;
+    color: #00d4ff;
     font-family: 'Courier New', monospace;
+    font-weight: bold;
+  }
+
+  .fullscreen-btn {
+    width: 36px;
+    height: 36px;
+    border: 1px solid rgba(0, 212, 255, 0.3);
+    border-radius: 6px;
+    background: rgba(0, 212, 255, 0.1);
+    color: #00d4ff;
+    font-size: 18px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background: rgba(0, 212, 255, 0.2);
+      border-color: rgba(0, 212, 255, 0.5);
+      box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
   }
 }
 
 .screen-body {
-  padding: 15px;
+  padding: 0;
 }
 
-.card-grid {
+.kpi-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 
-  .data-card {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
+  .kpi-card {
+    background: linear-gradient(180deg, rgba(14, 40, 80, 0.9) 0%, rgba(10, 20, 40, 0.95) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.2);
     border-radius: 8px;
-    padding: 20px;
+    padding: 0;
     text-align: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 
-    .card-title {
+    .card-header {
+      background: linear-gradient(90deg, #00a8cc 0%, #00d4ff 50%, #00a8cc 100%);
+      padding: 10px 15px;
       font-size: 14px;
-      color: #666666;
-      margin-bottom: 10px;
-    }
-
-    .card-value {
-      font-size: 32px;
       font-weight: bold;
-      margin-bottom: 4px;
+      color: #0a1428;
+      letter-spacing: 2px;
     }
 
-    .card-unit {
-      font-size: 12px;
-      color: #999999;
+    .kpi-value {
+      font-size: 36px;
+      font-weight: bold;
+      margin: 15px 0 5px;
+      text-shadow: 0 0 15px currentColor;
+    }
+
+    .kpi-unit {
+      font-size: 14px;
+      color: #a0c4e8;
+      margin-bottom: 15px;
     }
   }
 }
 
-.chart-area {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+.chart-row {
+  display: flex;
   gap: 16px;
   margin-bottom: 16px;
 
   .chart-box {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
+    background: linear-gradient(180deg, rgba(14, 40, 80, 0.85) 0%, rgba(10, 20, 40, 0.9) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.15);
     border-radius: 8px;
-    padding: 15px;
+    padding: 0;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 
-    .box-title {
+    &.flex-1 {
+      flex: 1;
+    }
+
+    .box-header {
+      background: linear-gradient(90deg, rgba(0, 168, 204, 0.8) 0%, rgba(0, 212, 255, 0.6) 100%);
+      padding: 12px 18px;
       font-size: 14px;
-      font-weight: 600;
-      color: #333333;
-      margin-bottom: 12px;
-      padding-left: 10px;
-      border-left: 3px solid #4a90d9;
+      font-weight: bold;
+      color: #0a1428;
+      letter-spacing: 2px;
+      border-bottom: 1px solid rgba(0, 212, 255, 0.3);
     }
 
     .chart {
-      height: 300px;
+      height: 280px;
       width: 100%;
+      padding: 15px;
     }
 
     .compare-list {
+      flex: 1;
+      padding: 15px;
       display: flex;
       flex-direction: column;
-      gap: 10px;
+      gap: 12px;
 
       .compare-item {
         display: flex;
@@ -398,14 +501,14 @@ onUnmounted(() => {
 
         .name {
           width: 80px;
-          font-size: 14px;
-          color: #333333;
+          font-size: 13px;
+          color: #a0c4e8;
         }
 
         .bar-container {
           flex: 1;
           height: 12px;
-          background: #e0e0e0;
+          background: rgba(0, 212, 255, 0.2);
           border-radius: 6px;
           overflow: hidden;
         }
@@ -420,42 +523,15 @@ onUnmounted(() => {
           width: 60px;
           text-align: right;
           font-size: 14px;
-          color: #4a90d9;
+          color: #00d4ff;
           font-weight: 600;
         }
       }
     }
-  }
-}
-
-.bottom-area {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-
-  .bottom-box {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    padding: 15px;
-    display: flex;
-    flex-direction: column;
-
-    .box-title {
-      font-size: 14px;
-      font-weight: 600;
-      color: #333333;
-      margin-bottom: 12px;
-      padding-left: 10px;
-      border-left: 3px solid #4a90d9;
-    }
-
-    .chart {
-      height: 300px;
-      width: 100%;
-    }
 
     .cost-grid {
+      flex: 1;
+      padding: 15px;
       display: flex;
       flex-direction: column;
       gap: 15px;
@@ -467,20 +543,20 @@ onUnmounted(() => {
           margin-bottom: 5px;
 
           .cost-name {
-            font-size: 14px;
-            color: #333333;
+            font-size: 13px;
+            color: #a0c4e8;
           }
 
           .cost-percent {
             font-size: 14px;
-            color: #4a90d9;
+            color: #00d4ff;
             font-weight: 600;
           }
         }
 
         .cost-bar {
           height: 8px;
-          background: #e0e0e0;
+          background: rgba(0, 212, 255, 0.2);
           border-radius: 4px;
           overflow: hidden;
           margin-bottom: 5px;
@@ -493,33 +569,35 @@ onUnmounted(() => {
         }
 
         .cost-value {
-          font-size: 14px;
-          color: #666666;
+          font-size: 13px;
+          color: #ffffff;
         }
       }
     }
 
     .analysis-list {
+      flex: 1;
+      padding: 15px;
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      gap: 10px;
 
       .analysis-item {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 10px;
-        background: #ffffff;
-        border: 1px solid #e0e0e0;
+        background: rgba(10, 20, 40, 0.8);
+        border: 1px solid rgba(0, 212, 255, 0.15);
         border-radius: 6px;
 
         .label {
-          font-size: 14px;
-          color: #666666;
+          font-size: 13px;
+          color: #a0c4e8;
         }
 
         .value {
-          font-size: 16px;
+          font-size: 14px;
           font-weight: bold;
         }
 
@@ -529,13 +607,15 @@ onUnmounted(() => {
           border-radius: 4px;
 
           &.up {
-            background: rgba(82, 196, 26, 0.2);
-            color: #52c41a;
+            background: rgba(0, 255, 136, 0.15);
+            color: #00ff88;
+            border: 1px solid rgba(0, 255, 136, 0.3);
           }
 
           &.down {
-            background: rgba(245, 108, 108, 0.2);
-            color: #f56c6c;
+            background: rgba(255, 107, 107, 0.15);
+            color: #ff6b6b;
+            border: 1px solid rgba(255, 107, 107, 0.3);
           }
         }
       }
@@ -544,25 +624,17 @@ onUnmounted(() => {
 }
 
 @media screen and (max-width: 1200px) {
-  .chart-area {
+  .kpi-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .card-grid {
-    grid-template-columns: repeat(2, 1fr);
+  .chart-row {
+    flex-direction: column;
   }
 }
 
 @media screen and (max-width: 768px) {
-  .chart-area {
-    grid-template-columns: 1fr;
-  }
-
-  .card-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .bottom-area {
+  .kpi-grid {
     grid-template-columns: 1fr;
   }
 }
diff --git a/src/modules/dashboardBig/views/energy.vue b/src/modules/dashboardBig/views/energy.vue
index f3481ad..9b0129d 100644
--- a/src/modules/dashboardBig/views/energy.vue
+++ b/src/modules/dashboardBig/views/energy.vue
@@ -3,39 +3,45 @@
     <div class="screen-content">
       <header class="screen-header">
         <h1 class="title">能源监控大屏</h1>
-        <span class="time">{{ currentTime }}</span>
+        <div class="header-right">
+          <span class="time">{{ currentTime }}</span>
+          <button v-if="isFullscreen" class="exit-fullscreen-btn" @click="exitFullscreen" title="退出全屏">
+            <span>⛶ 退出全屏</span>
+          </button>
+        </div>
       </header>
 
       <main class="screen-body">
-        <div class="card-grid">
-          <div class="data-card" v-for="card in energyOverview" :key="card.title">
-            <div class="card-title">{{ card.title }}</div>
-            <div class="card-value" :style="{ color: card.color }">{{ card.value }}</div>
-            <div class="card-unit">{{ card.unit }}</div>
-            <div class="card-trend" :class="card.trend > 0 ? 'up' : 'down'">
-              {{ card.trend > 0 ? '↑' : '↓' }} {{ Math.abs(card.trend) }}%
+        <div class="kpi-grid">
+          <div class="kpi-card" v-for="card in energyOverview" :key="card.title">
+            <div class="card-header">{{ card.title }}</div>
+            <div class="kpi-value" :style="{ color: card.color }">{{ card.value }}</div>
+            <div class="kpi-unit">{{ card.unit }}</div>
+            <div class="kpi-trend" :class="card.trend > 0 ? 'positive' : 'negative'">
+              <span>{{ card.trend > 0 ? '↑' : '↓' }}</span>
+              {{ Math.abs(card.trend) }}%
             </div>
           </div>
         </div>
 
-        <div class="chart-area">
-          <div class="chart-box">
-            <div class="box-title">实时用电量</div>
+        <div class="chart-row">
+          <div class="chart-box flex-1">
+            <div class="box-header">实时用电量</div>
             <div ref="gaugeChartRef" class="chart"></div>
           </div>
-          <div class="chart-box">
-            <div class="box-title">能源消耗趋势</div>
+          <div class="chart-box flex-1">
+            <div class="box-header">能源消耗趋势</div>
             <div ref="lineChartRef" class="chart"></div>
           </div>
-          <div class="chart-box">
-            <div class="box-title">能源类型分布</div>
+          <div class="chart-box flex-1">
+            <div class="box-header">能源类型分布</div>
             <div ref="pieChartRef" class="chart"></div>
           </div>
         </div>
 
-        <div class="bottom-area">
-          <div class="bottom-box">
-            <div class="box-title">设备能耗排名</div>
+        <div class="chart-row">
+          <div class="chart-box flex-1">
+            <div class="box-header">设备能耗排名</div>
             <div class="ranking-list">
               <div class="ranking-item" v-for="(item, index) in equipmentRanking" :key="item.name">
                 <span class="rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</span>
@@ -47,12 +53,12 @@
               </div>
             </div>
           </div>
-          <div class="bottom-box">
-            <div class="box-title">生产班次能耗</div>
+          <div class="chart-box flex-1">
+            <div class="box-header">生产班次能耗</div>
             <div ref="barChartRef" class="chart"></div>
           </div>
-          <div class="bottom-box">
-            <div class="box-title">实时告警</div>
+          <div class="chart-box flex-1">
+            <div class="box-header">实时告警</div>
             <div class="alarm-list">
               <div class="alarm-item" v-for="alarm in alarms" :key="alarm.time" :class="alarm.level">
                 <span class="alarm-icon">{{ alarm.icon }}</span>
@@ -74,6 +80,7 @@ import { ref, onMounted, onBeforeUnmount, onUnmounted, nextTick } from 'vue'
 import * as echarts from 'echarts'
 
 const currentTime = ref('')
+const isFullscreen = ref(false)
 const gaugeChartRef = ref(null)
 const lineChartRef = ref(null)
 const pieChartRef = ref(null)
@@ -81,23 +88,24 @@ const barChartRef = ref(null)
 let gaugeChart = null
 let lineChart = null
 let pieChart = null
+let fullscreenChangeHandler = null
 let barChart = null
 let timeInterval = null
 let resizeObserver = null
 
 const energyOverview = ref([
-  { title: '今日用电', value: '25,600', unit: 'kWh', color: '#5cd9e8', trend: 5.2 },
-  { title: '今日用气', value: '1,850', unit: 'm³', color: '#52c41a', trend: -2.1 },
-  { title: '今日用水', value: '320', unit: 't', color: '#4a90d9', trend: 1.8 },
-  { title: '综合能耗', value: '38.5', unit: 'kgce/t', color: '#ff9800', trend: -3.5 }
+  { title: '今日用电', value: '25,600', unit: 'kWh', color: '#00d4ff', trend: 5.2 },
+  { title: '今日用气', value: '1,850', unit: 'm³', color: '#00ff88', trend: -2.1 },
+  { title: '今日用水', value: '320', unit: 't', color: '#7c63ff', trend: 1.8 },
+  { title: '综合能耗', value: '38.5', unit: 'kgce/t', color: '#ff9f43', trend: -3.5 }
 ])
 
 const equipmentRanking = ref([
-  { name: '酸轧机组', value: '8,500', percent: 85, color: '#f56c6c' },
-  { name: '退火炉', value: '5,200', percent: 52, color: '#e6a23c' },
-  { name: '轧机', value: '4,800', percent: 48, color: '#4a90d9' },
-  { name: '酸洗槽', value: '3,200', percent: 32, color: '#52c41a' },
-  { name: '剪切线', value: '2,600', percent: 26, color: '#909399' }
+  { name: '酸轧机组', value: '8,500', percent: 85, color: '#ff6b6b' },
+  { name: '退火炉', value: '5,200', percent: 52, color: '#ffd43b' },
+  { name: '轧机', value: '4,800', percent: 48, color: '#00d4ff' },
+  { name: '酸洗槽', value: '3,200', percent: 32, color: '#00ff88' },
+  { name: '剪切线', value: '2,600', percent: 26, color: '#7c63ff' }
 ])
 
 const alarms = ref([
@@ -121,7 +129,7 @@ const initCharts = () => {
   if (gaugeChartRef.value) {
     gaugeChart = echarts.init(gaugeChartRef.value)
     gaugeChart.setOption({
-      backgroundColor: '#ffffff',
+      backgroundColor: 'transparent',
       series: [{
         type: 'gauge',
         center: ['50%', '60%'],
@@ -130,10 +138,10 @@ const initCharts = () => {
         min: 0,
         max: 100,
         splitNumber: 10,
-        itemStyle: { color: '#5cd9e8' },
+        itemStyle: { color: '#00d4ff' },
         progress: { show: true, width: 20 },
         pointer: { show: false },
-        axisLine: { lineStyle: { width: 20, color: [[1, 'rgba(92,217,232,0.2)']] } },
+        axisLine: { lineStyle: { width: 20, color: [[1, 'rgba(0, 212, 255, 0.2)']] } },
         axisTick: { show: false },
         splitLine: { show: false },
         axisLabel: { show: false },
@@ -142,7 +150,7 @@ const initCharts = () => {
           valueAnimation: true,
           fontSize: 32,
           fontWeight: 'bold',
-          color: '#5cd9e8',
+          color: '#00d4ff',
           formatter: '{value}%',
           offsetCenter: [0, '10%']
         },
@@ -154,20 +162,27 @@ const initCharts = () => {
   if (lineChartRef.value) {
     lineChart = echarts.init(lineChartRef.value)
     lineChart.setOption({
-      backgroundColor: '#ffffff',
-      tooltip: { trigger: 'axis', axisPointer: { type: 'line', lineStyle: { color: '#5cd9e8' } } },
+      backgroundColor: 'transparent',
+      tooltip: { 
+        trigger: 'axis', 
+        backgroundColor: 'rgba(10, 20, 40, 0.9)',
+        borderColor: '#1e3a5f',
+        textStyle: { color: '#fff' },
+        axisPointer: { type: 'line', lineStyle: { color: '#00d4ff' } } 
+      },
       grid: { top: 20, right: 20, bottom: 30, left: 50 },
       xAxis: {
         type: 'category',
         data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
-        axisLine: { lineStyle: { color: '#ddd' } },
-        axisLabel: { color: '#666' }
+        axisLine: { lineStyle: { color: '#3a5a8a' } },
+        axisTick: { show: false },
+        axisLabel: { color: '#a0c4e8' }
       },
       yAxis: {
         type: 'value',
         axisLine: { show: false },
-        splitLine: { lineStyle: { color: '#eee' } },
-        axisLabel: { color: '#666' }
+        splitLine: { lineStyle: { color: '#1e3a5f', type: 'dashed' } },
+        axisLabel: { color: '#a0c4e8' }
       },
       series: [
         {
@@ -177,20 +192,20 @@ const initCharts = () => {
           data: [620, 680, 650, 720, 780, 820],
           areaStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(92, 217, 232, 0.3)' },
-              { offset: 1, color: 'rgba(92, 217, 232, 0.05)' }
+              { offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
+              { offset: 1, color: 'rgba(0, 212, 255, 0.05)' }
             ])
           },
-          lineStyle: { color: '#5cd9e8', width: 2 },
-          itemStyle: { color: '#5cd9e8' }
+          lineStyle: { color: '#00d4ff', width: 2 },
+          itemStyle: { color: '#00d4ff' }
         },
         {
           name: '用气',
           type: 'line',
           smooth: true,
           data: [45, 48, 46, 52, 55, 58],
-          lineStyle: { color: '#52c41a', width: 2 },
-          itemStyle: { color: '#52c41a' }
+          lineStyle: { color: '#00ff88', width: 2 },
+          itemStyle: { color: '#00ff88' }
         }
       ]
     })
@@ -199,18 +214,24 @@ const initCharts = () => {
   if (pieChartRef.value) {
     pieChart = echarts.init(pieChartRef.value)
     pieChart.setOption({
-      backgroundColor: '#ffffff',
-      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
-      legend: { bottom: 10, textStyle: { color: '#666' } },
+      backgroundColor: 'transparent',
+      tooltip: { 
+        trigger: 'item', 
+        formatter: '{b}: {c}% ({d}%)',
+        backgroundColor: 'rgba(10, 20, 40, 0.9)',
+        borderColor: '#1e3a5f',
+        textStyle: { color: '#fff' }
+      },
+      legend: { bottom: 0, textStyle: { color: '#a0c4e8' } },
       series: [{
         type: 'pie',
         radius: ['45%', '75%'],
         center: ['50%', '45%'],
         data: [
-          { value: 65, name: '电能', itemStyle: { color: '#5cd9e8' } },
-          { value: 20, name: '天然气', itemStyle: { color: '#ff9800' } },
-          { value: 10, name: '水', itemStyle: { color: '#4a90d9' } },
-          { value: 5, name: '其他', itemStyle: { color: '#909399' } }
+          { value: 65, name: '电能', itemStyle: { color: '#00d4ff' } },
+          { value: 20, name: '天然气', itemStyle: { color: '#ff9f43' } },
+          { value: 10, name: '水', itemStyle: { color: '#7c63ff' } },
+          { value: 5, name: '其他', itemStyle: { color: '#a0c4e8' } }
         ],
         label: { show: false }
       }]
@@ -220,30 +241,36 @@ const initCharts = () => {
   if (barChartRef.value) {
     barChart = echarts.init(barChartRef.value)
     barChart.setOption({
-      backgroundColor: '#ffffff',
-      tooltip: { trigger: 'axis' },
+      backgroundColor: 'transparent',
+      tooltip: { 
+        trigger: 'axis',
+        backgroundColor: 'rgba(10, 20, 40, 0.9)',
+        borderColor: '#1e3a5f',
+        textStyle: { color: '#fff' }
+      },
       grid: { top: 20, right: 20, bottom: 30, left: 50 },
       xAxis: {
         type: 'category',
         data: ['早班', '中班', '晚班'],
-        axisLine: { lineStyle: { color: '#ddd' } },
-        axisLabel: { color: '#666' }
+        axisLine: { lineStyle: { color: '#3a5a8a' } },
+        axisTick: { show: false },
+        axisLabel: { color: '#a0c4e8' }
       },
       yAxis: {
         type: 'value',
         axisLine: { show: false },
-        splitLine: { lineStyle: { color: '#eee' } },
-        axisLabel: { color: '#666' }
+        splitLine: { lineStyle: { color: '#1e3a5f', type: 'dashed' } },
+        axisLabel: { color: '#a0c4e8' }
       },
       series: [{
         type: 'bar',
-        data: [9800, 12500, 8500],
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#5cd9e8' },
-            { offset: 1, color: '#4a90d9' }
-          ])
-        },
+        data: [9800, 12500, 8500].map((value, index) => ({
+          value,
+          itemStyle: {
+            color: ['#00d4ff', '#7c63ff', '#00ff88'][index],
+            borderRadius: [4, 4, 0, 0]
+          }
+        })),
         barWidth: '50%'
       }]
     })
@@ -279,18 +306,42 @@ onMounted(() => {
       }
     }
   })
+  
+  window.addEventListener('refresh-data', handleRefresh)
+  
+  fullscreenChangeHandler = () => {
+    isFullscreen.value = !!document.fullscreenElement
+  }
+  document.addEventListener('fullscreenchange', fullscreenChangeHandler)
 })
 
+const handleRefresh = () => {
+  initCharts()
+}
+
+const exitFullscreen = () => {
+  if (document.fullscreenElement) {
+    document.exitFullscreen().catch(err => {
+      console.error('退出全屏失败:', err)
+    })
+  }
+}
+
 onBeforeUnmount(() => {
   if (timeInterval) {
     clearInterval(timeInterval)
     timeInterval = null
   }
   window.removeEventListener('resize', handleResize)
+  window.removeEventListener('refresh-data', handleRefresh)
   if (resizeObserver) {
     resizeObserver.disconnect()
     resizeObserver = null
   }
+  if (fullscreenChangeHandler) {
+    document.removeEventListener('fullscreenchange', fullscreenChangeHandler)
+    fullscreenChangeHandler = null
+  }
   if (gaugeChart) {
     gaugeChart.dispose()
     gaugeChart = null
@@ -318,18 +369,16 @@ onUnmounted(() => {
 .screen-wrapper {
   width: 100%;
   min-height: 100%;
-  background: #f5f5f5;
+  background: linear-gradient(180deg, #0a1428 0%, #0d1b34 50%, #0a1428 100%);
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 .screen-content {
-  background: #ffffff;
-  color: #333333;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  background: transparent;
+  color: #ffffff;
   width: 100%;
-  padding-bottom: 20px;
+  padding: 20px;
 }
 
 .screen-header {
@@ -337,128 +386,153 @@ onUnmounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 20px 30px;
-  border-bottom: 1px solid #eee;
+  background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, rgba(12, 30, 60, 0.8) 100%);
+  border-radius: 8px;
+  margin-bottom: 20px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
 
   .title {
-    font-size: 24px;
+    font-size: 26px;
     font-weight: bold;
-    color: #333333;
-    letter-spacing: 2px;
+    color: #00d4ff;
+    letter-spacing: 3px;
     margin: 0;
+    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 20px;
   }
 
   .time {
-    font-size: 16px;
-    color: #666666;
+    font-size: 18px;
+    color: #00d4ff;
     font-family: 'Courier New', monospace;
+    font-weight: bold;
+  }
+
+  .exit-fullscreen-btn {
+    padding: 8px 16px;
+    border: 1px solid rgba(255, 107, 107, 0.5);
+    border-radius: 6px;
+    background: rgba(255, 107, 107, 0.2);
+    color: #ff6b6b;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: rgba(255, 107, 107, 0.3);
+      border-color: #ff6b6b;
+      box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
+    }
   }
 }
 
 .screen-body {
-  padding: 15px;
+  padding: 0;
 }
 
-.card-grid {
+.kpi-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 
-  .data-card {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
+  .kpi-card {
+    background: linear-gradient(180deg, rgba(14, 40, 80, 0.9) 0%, rgba(10, 20, 40, 0.95) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.2);
     border-radius: 8px;
-    padding: 20px;
+    padding: 0;
     text-align: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 
-    .card-title {
+    .card-header {
+      background: linear-gradient(90deg, #00a8cc 0%, #00d4ff 50%, #00a8cc 100%);
+      padding: 10px 15px;
       font-size: 14px;
-      color: #666666;
+      font-weight: bold;
+      color: #0a1428;
+      letter-spacing: 2px;
+    }
+
+    .kpi-value {
+      font-size: 36px;
+      font-weight: bold;
+      margin: 15px 0 5px;
+      text-shadow: 0 0 15px currentColor;
+    }
+
+    .kpi-unit {
+      font-size: 14px;
+      color: #a0c4e8;
       margin-bottom: 10px;
     }
 
-    .card-value {
-      font-size: 32px;
-      font-weight: bold;
-      margin-bottom: 4px;
-    }
+    .kpi-trend {
+      font-size: 13px;
+      padding: 3px 10px;
+      border-radius: 12px;
+      display: inline-block;
+      margin-bottom: 15px;
+      font-weight: 600;
 
-    .card-unit {
-      font-size: 12px;
-      color: #999999;
-    }
+      &.positive {
+        background: rgba(0, 255, 136, 0.15);
+        color: #00ff88;
+        border: 1px solid rgba(0, 255, 136, 0.3);
+      }
 
-    .card-trend {
-      font-size: 12px;
-      margin-top: 6px;
-
-      &.up { color: #f56c6c; }
-      &.down { color: #52c41a; }
+      &.negative {
+        background: rgba(255, 107, 107, 0.15);
+        color: #ff6b6b;
+        border: 1px solid rgba(255, 107, 107, 0.3);
+      }
     }
   }
 }
 
-.chart-area {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+.chart-row {
+  display: flex;
   gap: 16px;
   margin-bottom: 16px;
 
   .chart-box {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
+    background: linear-gradient(180deg, rgba(14, 40, 80, 0.85) 0%, rgba(10, 20, 40, 0.9) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.15);
     border-radius: 8px;
-    padding: 15px;
+    padding: 0;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 
-    .box-title {
+    &.flex-1 {
+      flex: 1;
+    }
+
+    .box-header {
+      background: linear-gradient(90deg, rgba(0, 168, 204, 0.8) 0%, rgba(0, 212, 255, 0.6) 100%);
+      padding: 12px 18px;
       font-size: 14px;
-      font-weight: 600;
-      color: #333333;
-      margin-bottom: 12px;
-      padding-left: 10px;
-      border-left: 3px solid #4a90d9;
+      font-weight: bold;
+      color: #0a1428;
+      letter-spacing: 2px;
+      border-bottom: 1px solid rgba(0, 212, 255, 0.3);
     }
 
     .chart {
-      height: 300px;
-      width: 100%;
-    }
-  }
-}
-
-.bottom-area {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-
-  .bottom-box {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    padding: 15px;
-    display: flex;
-    flex-direction: column;
-
-    .box-title {
-      font-size: 14px;
-      font-weight: 600;
-      color: #333333;
-      margin-bottom: 12px;
-      padding-left: 10px;
-      border-left: 3px solid #4a90d9;
-    }
-
-    .chart {
-      height: 300px;
+      height: 280px;
       width: 100%;
+      padding: 15px;
     }
 
     .ranking-list {
+      flex: 1;
+      padding: 15px;
       display: flex;
       flex-direction: column;
       gap: 10px;
@@ -466,39 +540,48 @@ onUnmounted(() => {
       .ranking-item {
         display: flex;
         align-items: center;
-        padding: 8px 12px;
-        background: #ffffff;
-        border: 1px solid #e0e0e0;
+        padding: 10px 12px;
+        background: rgba(10, 20, 40, 0.8);
+        border: 1px solid rgba(0, 212, 255, 0.15);
         border-radius: 6px;
 
         .rank {
-          width: 22px;
-          height: 22px;
+          width: 24px;
+          height: 24px;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 12px;
           font-weight: bold;
-          margin-right: 10px;
-          background: #e0e0e0;
-          color: #666;
+          margin-right: 12px;
+          background: #3a5a8a;
+          color: #a0c4e8;
 
-          &.rank-1 { background: linear-gradient(135deg, #ffd700, #ffb700); color: #fff; }
-          &.rank-2 { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); color: #fff; }
-          &.rank-3 { background: linear-gradient(135deg, #cd7f32, #b87333); color: #fff; }
+          &.rank-1 { 
+            background: linear-gradient(135deg, #ffd43b, #ff9f43); 
+            color: #0a1428; 
+          }
+          &.rank-2 { 
+            background: linear-gradient(135deg, #a0c4e8, #74c0fc); 
+            color: #0a1428; 
+          }
+          &.rank-3 { 
+            background: linear-gradient(135deg, #ffa94d, #ff6b6b); 
+            color: #fff; 
+          }
         }
 
         .name {
           flex: 1;
           font-size: 13px;
-          color: #333333;
+          color: #a0c4e8;
         }
 
         .bar-wrapper {
           width: 80px;
           height: 8px;
-          background: #e0e0e0;
+          background: rgba(0, 212, 255, 0.2);
           border-radius: 4px;
           margin-right: 10px;
           overflow: hidden;
@@ -513,12 +596,14 @@ onUnmounted(() => {
         .value {
           font-size: 14px;
           font-weight: bold;
-          color: #4a90d9;
+          color: #00d4ff;
         }
       }
     }
 
     .alarm-list {
+      flex: 1;
+      padding: 15px;
       display: flex;
       flex-direction: column;
       gap: 10px;
@@ -526,42 +611,42 @@ onUnmounted(() => {
       .alarm-item {
         display: flex;
         align-items: center;
-        padding: 10px;
+        padding: 12px;
         border-radius: 6px;
         border-left: 4px solid;
-        background: #ffffff;
-        border: 1px solid #e0e0e0;
+        background: rgba(10, 20, 40, 0.8);
+        border: 1px solid rgba(0, 212, 255, 0.15);
         border-left-width: 4px;
 
         &.danger {
-          border-color: #f56c6c;
+          border-color: #ff6b6b;
         }
 
         &.warning {
-          border-color: #e6a23c;
+          border-color: #ffd43b;
         }
 
         &.success {
-          border-color: #52c41a;
+          border-color: #00ff88;
         }
 
         .alarm-icon {
-          font-size: 16px;
-          margin-right: 10px;
+          font-size: 18px;
+          margin-right: 12px;
         }
 
         .alarm-content {
           flex: 1;
 
           .alarm-title {
-            font-size: 13px;
-            color: #333333;
-            margin-bottom: 2px;
+            font-size: 14px;
+            color: #ffffff;
+            margin-bottom: 4px;
           }
 
           .alarm-time {
-            font-size: 11px;
-            color: #999999;
+            font-size: 12px;
+            color: #a0c4e8;
           }
         }
       }
@@ -570,25 +655,17 @@ onUnmounted(() => {
 }
 
 @media screen and (max-width: 1200px) {
-  .chart-area {
+  .kpi-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .card-grid {
-    grid-template-columns: repeat(2, 1fr);
+  .chart-row {
+    flex-direction: column;
   }
 }
 
 @media screen and (max-width: 768px) {
-  .chart-area {
-    grid-template-columns: 1fr;
-  }
-
-  .card-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .bottom-area {
+  .kpi-grid {
     grid-template-columns: 1fr;
   }
 }
diff --git a/src/modules/dashboardBig/views/index.vue b/src/modules/dashboardBig/views/index.vue
index f6e952c..711c7c5 100644
--- a/src/modules/dashboardBig/views/index.vue
+++ b/src/modules/dashboardBig/views/index.vue
@@ -3,29 +3,34 @@
     <div class="screen-content">
       <header class="screen-header">
         <h1 class="title">大数据可视化平台</h1>
-        <span class="time">{{ currentTime }}</span>
+        <div class="header-right">
+          <span class="time">{{ currentTime }}</span>
+          <button v-if="isFullscreen" class="exit-fullscreen-btn" @click="exitFullscreen" title="退出全屏">
+            <span>⛶ 退出全屏</span>
+          </button>
+        </div>
       </header>
 
       <main class="screen-body">
-        <div class="card-grid">
-          <div class="data-card" v-for="card in cards" :key="card.title">
-            <div class="card-title">{{ card.title }}</div>
-            <div class="card-value" :style="{ color: card.color }">{{ card.value }}</div>
-            <div class="card-unit">{{ card.unit }}</div>
+        <div class="kpi-grid">
+          <div class="kpi-card" v-for="card in cards" :key="card.title">
+            <div class="card-header">{{ card.title }}</div>
+            <div class="kpi-value" :style="{ color: card.color }">{{ card.value }}</div>
+            <div class="kpi-unit">{{ card.unit }}</div>
           </div>
         </div>
 
-        <div class="chart-area">
-          <div class="chart-box">
-            <div class="box-title">产量趋势</div>
+        <div class="chart-row">
+          <div class="chart-box flex-1">
+            <div class="box-header">产量趋势</div>
             <div ref="lineChartRef" class="chart"></div>
           </div>
-          <div class="chart-box">
-            <div class="box-title">运行状态</div>
+          <div class="chart-box flex-1">
+            <div class="box-header">运行状态</div>
             <div ref="pieChartRef" class="chart"></div>
           </div>
-          <div class="chart-box">
-            <div class="box-title">班组排名</div>
+          <div class="chart-box flex-1">
+            <div class="box-header">班组排名</div>
             <div class="ranking-list">
               <div class="ranking-item" v-for="(item, index) in rankingList" :key="item.name">
                 <span class="rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</span>
@@ -37,9 +42,9 @@
           </div>
         </div>
 
-        <div class="alarm-area">
-          <div class="alarm-box">
-            <div class="box-title">实时告警</div>
+        <div class="chart-row">
+          <div class="chart-box flex-2">
+            <div class="box-header">实时告警</div>
             <div class="alarm-list">
               <div class="alarm-item" v-for="alarm in alarmList" :key="alarm.time">
                 <span class="alarm-icon">{{ alarm.icon }}</span>
@@ -61,18 +66,20 @@ import { ref, onMounted, onBeforeUnmount, onUnmounted, nextTick } from 'vue'
 import * as echarts from 'echarts'
 
 const currentTime = ref('')
+const isFullscreen = ref(false)
 const lineChartRef = ref(null)
 const pieChartRef = ref(null)
 let lineChart = null
 let pieChart = null
 let timeInterval = null
 let resizeObserver = null
+let fullscreenChangeHandler = null
 
 const cards = ref([
-  { title: '总产量', value: '12,580', unit: '吨', color: '#4a90d9' },
-  { title: '日产量', value: '1,258', unit: '吨', color: '#52c41a' },
-  { title: '运行效率', value: '96.8', unit: '%', color: '#5cd9e8' },
-  { title: '良品率', value: '99.2', unit: '%', color: '#ff9800' }
+  { title: '总产量', value: '12,580', unit: '吨', color: '#00d4ff' },
+  { title: '日产量', value: '1,258', unit: '吨', color: '#00ff88' },
+  { title: '运行效率', value: '96.8', unit: '%', color: '#7c63ff' },
+  { title: '良品率', value: '99.2', unit: '%', color: '#ff9f43' }
 ])
 
 const rankingList = ref([
@@ -83,9 +90,9 @@ const rankingList = ref([
 ])
 
 const alarmList = ref([
-  { icon: '✅', title: '系统运行正常', time: '15:30:00' },
-  { icon: '⚠️', title: '速度损失告警', time: '14:25:00' },
-  { icon: '🔴', title: '设备故障停机', time: '13:15:00' }
+  { icon: '✅', title: '系统运行正常', time: '15:30:00', level: 'success' },
+  { icon: '⚠️', title: '速度损失告警', time: '14:25:00', level: 'warning' },
+  { icon: '🔴', title: '设备故障停机', time: '13:15:00', level: 'danger' }
 ])
 
 const updateTime = () => {
@@ -103,20 +110,26 @@ const initCharts = () => {
   if (lineChartRef.value) {
     lineChart = echarts.init(lineChartRef.value)
     lineChart.setOption({
-      backgroundColor: '#ffffff',
-      tooltip: { trigger: 'axis' },
+      backgroundColor: 'transparent',
+      tooltip: { 
+        trigger: 'axis',
+        backgroundColor: 'rgba(10, 20, 40, 0.9)',
+        borderColor: '#1e3a5f',
+        textStyle: { color: '#fff' }
+      },
       grid: { top: 20, right: 20, bottom: 30, left: 50 },
       xAxis: {
         type: 'category',
         data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
-        axisLine: { lineStyle: { color: '#ddd' } },
-        axisLabel: { color: '#666' }
+        axisLine: { lineStyle: { color: '#3a5a8a' } },
+        axisTick: { show: false },
+        axisLabel: { color: '#a0c4e8' }
       },
       yAxis: {
         type: 'value',
         axisLine: { show: false },
-        splitLine: { lineStyle: { color: '#eee' } },
-        axisLabel: { color: '#666' }
+        splitLine: { lineStyle: { color: '#1e3a5f', type: 'dashed' } },
+        axisLabel: { color: '#a0c4e8' }
       },
       series: [{
         name: '产量',
@@ -125,12 +138,12 @@ const initCharts = () => {
         data: [820, 932, 901, 1234, 1290, 1330],
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(74, 144, 217, 0.3)' },
-            { offset: 1, color: 'rgba(74, 144, 217, 0.05)' }
+            { offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
+            { offset: 1, color: 'rgba(0, 212, 255, 0.05)' }
           ])
         },
-        lineStyle: { color: '#4a90d9', width: 2 },
-        itemStyle: { color: '#4a90d9' }
+        lineStyle: { color: '#00d4ff', width: 2 },
+        itemStyle: { color: '#00d4ff' }
       }]
     })
   }
@@ -138,18 +151,24 @@ const initCharts = () => {
   if (pieChartRef.value) {
     pieChart = echarts.init(pieChartRef.value)
     pieChart.setOption({
-      backgroundColor: '#ffffff',
-      tooltip: { trigger: 'item', formatter: '{b}: {c}% ({d}%)' },
-      legend: { bottom: 10, textStyle: { color: '#666' } },
+      backgroundColor: 'transparent',
+      tooltip: { 
+        trigger: 'item', 
+        formatter: '{b}: {c}% ({d}%)',
+        backgroundColor: 'rgba(10, 20, 40, 0.9)',
+        borderColor: '#1e3a5f',
+        textStyle: { color: '#fff' }
+      },
+      legend: { bottom: 0, textStyle: { color: '#a0c4e8' } },
       series: [{
         type: 'pie',
         radius: ['45%', '75%'],
         center: ['50%', '45%'],
         data: [
-          { value: 65, name: '运行中', itemStyle: { color: '#52c41a' } },
-          { value: 20, name: '待机', itemStyle: { color: '#ff9800' } },
-          { value: 10, name: '故障', itemStyle: { color: '#f56c6c' } },
-          { value: 5, name: '维护', itemStyle: { color: '#5cd9e8' } }
+          { value: 65, name: '运行中', itemStyle: { color: '#00ff88' } },
+          { value: 20, name: '待机', itemStyle: { color: '#ffd43b' } },
+          { value: 10, name: '故障', itemStyle: { color: '#ff6b6b' } },
+          { value: 5, name: '维护', itemStyle: { color: '#00d4ff' } }
         ],
         label: { show: false }
       }]
@@ -184,18 +203,42 @@ onMounted(() => {
       }
     }
   })
+  
+  window.addEventListener('refresh-data', handleRefresh)
+  
+  fullscreenChangeHandler = () => {
+    isFullscreen.value = !!document.fullscreenElement
+  }
+  document.addEventListener('fullscreenchange', fullscreenChangeHandler)
 })
 
+const handleRefresh = () => {
+  initCharts()
+}
+
+const exitFullscreen = () => {
+  if (document.fullscreenElement) {
+    document.exitFullscreen().catch(err => {
+      console.error('退出全屏失败:', err)
+    })
+  }
+}
+
 onBeforeUnmount(() => {
   if (timeInterval) {
     clearInterval(timeInterval)
     timeInterval = null
   }
   window.removeEventListener('resize', handleResize)
+  window.removeEventListener('refresh-data', handleRefresh)
   if (resizeObserver) {
     resizeObserver.disconnect()
     resizeObserver = null
   }
+  if (fullscreenChangeHandler) {
+    document.removeEventListener('fullscreenchange', fullscreenChangeHandler)
+    fullscreenChangeHandler = null
+  }
   if (lineChart) {
     lineChart.dispose()
     lineChart = null
@@ -215,18 +258,16 @@ onUnmounted(() => {
 .screen-wrapper {
   width: 100%;
   min-height: 100%;
-  background: #f5f5f5;
+  background: linear-gradient(180deg, #0a1428 0%, #0d1b34 50%, #0a1428 100%);
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 .screen-content {
-  background: #ffffff;
-  color: #333333;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  background: transparent;
+  color: #ffffff;
   width: 100%;
-  padding-bottom: 20px;
+  padding: 20px;
 }
 
 .screen-header {
@@ -234,106 +275,151 @@ onUnmounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 20px 30px;
-  border-bottom: 1px solid #eee;
+  background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, rgba(12, 30, 60, 0.8) 100%);
+  border-radius: 8px;
+  margin-bottom: 20px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
 
   .title {
-    font-size: 24px;
+    font-size: 26px;
     font-weight: bold;
-    color: #333333;
-    letter-spacing: 2px;
+    color: #00d4ff;
+    letter-spacing: 3px;
     margin: 0;
+    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 20px;
   }
 
   .time {
-    font-size: 16px;
-    color: #666666;
+    font-size: 18px;
+    color: #00d4ff;
     font-family: 'Courier New', monospace;
+    font-weight: bold;
+  }
+
+  .exit-fullscreen-btn {
+    padding: 8px 16px;
+    border: 1px solid rgba(255, 107, 107, 0.5);
+    border-radius: 6px;
+    background: rgba(255, 107, 107, 0.2);
+    color: #ff6b6b;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: rgba(255, 107, 107, 0.3);
+      border-color: #ff6b6b;
+      box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
+    }
   }
 }
 
 .screen-body {
-  padding: 15px;
+  padding: 0;
 }
 
-.card-grid {
+.kpi-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 
-  .data-card {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
+  .kpi-card {
+    background: linear-gradient(180deg, rgba(14, 40, 80, 0.9) 0%, rgba(10, 20, 40, 0.95) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.2);
     border-radius: 8px;
-    padding: 20px;
+    padding: 0;
     text-align: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 
-    .card-title {
+    .card-header {
+      background: linear-gradient(90deg, #00a8cc 0%, #00d4ff 50%, #00a8cc 100%);
+      padding: 10px 15px;
       font-size: 14px;
-      color: #666666;
-      margin-bottom: 10px;
-    }
-
-    .card-value {
-      font-size: 32px;
       font-weight: bold;
-      margin-bottom: 4px;
+      color: #0a1428;
+      letter-spacing: 2px;
     }
 
-    .card-unit {
-      font-size: 12px;
-      color: #999999;
+    .kpi-value {
+      font-size: 36px;
+      font-weight: bold;
+      margin: 15px 0 5px;
+      text-shadow: 0 0 15px currentColor;
+    }
+
+    .kpi-unit {
+      font-size: 14px;
+      color: #a0c4e8;
+      margin-bottom: 15px;
     }
   }
 }
 
-.chart-area {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+.chart-row {
+  display: flex;
   gap: 16px;
   margin-bottom: 16px;
 
   .chart-box {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
+    background: linear-gradient(180deg, rgba(14, 40, 80, 0.85) 0%, rgba(10, 20, 40, 0.9) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.15);
     border-radius: 8px;
-    padding: 15px;
+    padding: 0;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 
-    .box-title {
+    &.flex-1 {
+      flex: 1;
+    }
+
+    &.flex-2 {
+      flex: 2;
+    }
+
+    .box-header {
+      background: linear-gradient(90deg, rgba(0, 168, 204, 0.8) 0%, rgba(0, 212, 255, 0.6) 100%);
+      padding: 12px 18px;
       font-size: 14px;
-      font-weight: 600;
-      color: #333333;
-      margin-bottom: 12px;
-      padding-left: 10px;
-      border-left: 3px solid #4a90d9;
+      font-weight: bold;
+      color: #0a1428;
+      letter-spacing: 2px;
+      border-bottom: 1px solid rgba(0, 212, 255, 0.3);
     }
 
     .chart {
       height: 300px;
       width: 100%;
+      padding: 15px;
     }
 
     .ranking-list {
+      flex: 1;
+      padding: 15px;
       display: flex;
       flex-direction: column;
-      gap: 10px;
+      gap: 12px;
 
       .ranking-item {
         display: flex;
         align-items: center;
-        padding: 10px 12px;
-        background: #ffffff;
-        border: 1px solid #e0e0e0;
+        padding: 12px;
+        background: rgba(10, 20, 40, 0.8);
+        border: 1px solid rgba(0, 212, 255, 0.15);
         border-radius: 6px;
 
         .rank {
-          width: 22px;
-          height: 22px;
+          width: 24px;
+          height: 24px;
           border-radius: 50%;
           display: flex;
           align-items: center;
@@ -341,89 +427,89 @@ onUnmounted(() => {
           font-size: 12px;
           font-weight: bold;
           margin-right: 12px;
-          background: #e0e0e0;
-          color: #666;
+          background: #3a5a8a;
+          color: #a0c4e8;
 
-          &.rank-1 { background: linear-gradient(135deg, #ffd700, #ffb700); color: #fff; }
-          &.rank-2 { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); color: #fff; }
-          &.rank-3 { background: linear-gradient(135deg, #cd7f32, #b87333); color: #fff; }
+          &.rank-1 { 
+            background: linear-gradient(135deg, #ffd43b, #ff9f43); 
+            color: #0a1428; 
+          }
+          &.rank-2 { 
+            background: linear-gradient(135deg, #a0c4e8, #74c0fc); 
+            color: #0a1428; 
+          }
+          &.rank-3 { 
+            background: linear-gradient(135deg, #ffa94d, #ff6b6b); 
+            color: #fff; 
+          }
         }
 
         .name {
           flex: 1;
-          font-size: 13px;
-          color: #333333;
+          font-size: 14px;
+          color: #a0c4e8;
         }
 
         .value {
-          font-size: 14px;
+          font-size: 16px;
           font-weight: bold;
-          color: #4a90d9;
+          color: #00d4ff;
         }
 
         .unit {
-          font-size: 12px;
-          color: #999999;
-          margin-left: 4px;
+          font-size: 13px;
+          color: #a0c4e8;
+          margin-left: 5px;
         }
       }
     }
-  }
-}
-
-.alarm-area {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 16px;
-
-  .alarm-box {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    padding: 15px;
-    display: flex;
-    flex-direction: column;
-
-    .box-title {
-      font-size: 14px;
-      font-weight: 600;
-      color: #333333;
-      margin-bottom: 12px;
-      padding-left: 10px;
-      border-left: 3px solid #4a90d9;
-    }
 
     .alarm-list {
+      flex: 1;
+      padding: 15px;
       display: flex;
       flex-direction: column;
-      gap: 10px;
+      gap: 12px;
 
       .alarm-item {
         display: flex;
         align-items: center;
-        padding: 10px;
+        padding: 15px;
         border-radius: 6px;
-        border-left: 4px solid #4a90d9;
-        background: #ffffff;
-        border: 1px solid #e0e0e0;
+        border-left: 4px solid;
+        background: rgba(10, 20, 40, 0.8);
+        border: 1px solid rgba(0, 212, 255, 0.15);
+        border-left-width: 4px;
+
+        &.success {
+          border-color: #00ff88;
+        }
+
+        &.warning {
+          border-color: #ffd43b;
+        }
+
+        &.danger {
+          border-color: #ff6b6b;
+        }
 
         .alarm-icon {
-          font-size: 16px;
-          margin-right: 10px;
+          font-size: 20px;
+          margin-right: 14px;
         }
 
         .alarm-content {
           flex: 1;
 
           .alarm-title {
-            font-size: 13px;
-            color: #333333;
-            margin-bottom: 2px;
+            font-size: 14px;
+            color: #ffffff;
+            margin-bottom: 5px;
           }
 
           .alarm-time {
-            font-size: 11px;
-            color: #999999;
+            font-size: 12px;
+            color: #a0c4e8;
           }
         }
       }
@@ -432,21 +518,17 @@ onUnmounted(() => {
 }
 
 @media screen and (max-width: 1200px) {
-  .chart-area {
+  .kpi-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .card-grid {
-    grid-template-columns: repeat(2, 1fr);
+  .chart-row {
+    flex-direction: column;
   }
 }
 
 @media screen and (max-width: 768px) {
-  .chart-area {
-    grid-template-columns: 1fr;
-  }
-
-  .card-grid {
+  .kpi-grid {
     grid-template-columns: 1fr;
   }
 }
diff --git a/src/modules/dashboardBig/views/oee.vue b/src/modules/dashboardBig/views/oee.vue
index 1f51699..d0e8fc2 100644
--- a/src/modules/dashboardBig/views/oee.vue
+++ b/src/modules/dashboardBig/views/oee.vue
@@ -6,39 +6,42 @@
         <div class="header-right">
           <span class="current-shift">当前班组：{{ currentShift }}</span>
           <span class="time">{{ currentTime }}</span>
+          <button v-if="isFullscreen" class="exit-fullscreen-btn" @click="exitFullscreen" title="退出全屏">
+            <span>⛶ 退出全屏</span>
+          </button>
         </div>
       </header>
 
       <main class="screen-body">
         <div class="kpi-grid">
           <div class="kpi-card">
-            <div class="kpi-title">OEE</div>
-            <div class="kpi-value oee">{{ oeeData.oee.toFixed(1) }}%</div>
-            <div class="kpi-trend" :class="oeeData.oeeTrend">
+            <div class="card-header">OEE</div>
+            <div class="kpi-value">{{ oeeData.oee.toFixed(1) }}%</div>
+            <div class="kpi-trend" :class="getTrendClass(oeeData.oeeTrend)">
               <span>{{ oeeData.oeeTrend > 0 ? '↑' : '↓' }}</span>
               {{ Math.abs(oeeData.oeeTrend).toFixed(1) }}%
             </div>
           </div>
           <div class="kpi-card">
-            <div class="kpi-title">时间稼动率</div>
-            <div class="kpi-value availability">{{ oeeData.availability.toFixed(1) }}%</div>
-            <div class="kpi-trend" :class="oeeData.availabilityTrend">
+            <div class="card-header">时间稼动率</div>
+            <div class="kpi-value">{{ oeeData.availability.toFixed(1) }}%</div>
+            <div class="kpi-trend" :class="getTrendClass(oeeData.availabilityTrend)">
               <span>{{ oeeData.availabilityTrend > 0 ? '↑' : '↓' }}</span>
               {{ Math.abs(oeeData.availabilityTrend).toFixed(1) }}%
             </div>
           </div>
           <div class="kpi-card">
-            <div class="kpi-title">性能稼动率</div>
-            <div class="kpi-value performance">{{ oeeData.performance.toFixed(1) }}%</div>
-            <div class="kpi-trend" :class="oeeData.performanceTrend">
+            <div class="card-header">性能稼动率</div>
+            <div class="kpi-value">{{ oeeData.performance.toFixed(1) }}%</div>
+            <div class="kpi-trend" :class="getTrendClass(oeeData.performanceTrend)">
               <span>{{ oeeData.performanceTrend > 0 ? '↑' : '↓' }}</span>
               {{ Math.abs(oeeData.performanceTrend).toFixed(1) }}%
             </div>
           </div>
           <div class="kpi-card">
-            <div class="kpi-title">良品率</div>
-            <div class="kpi-value quality">{{ oeeData.quality.toFixed(1) }}%</div>
-            <div class="kpi-trend" :class="oeeData.qualityTrend">
+            <div class="card-header">良品率</div>
+            <div class="kpi-value">{{ oeeData.quality.toFixed(1) }}%</div>
+            <div class="kpi-trend" :class="getTrendClass(oeeData.qualityTrend)">
               <span>{{ oeeData.qualityTrend > 0 ? '↑' : '↓' }}</span>
               {{ Math.abs(oeeData.qualityTrend).toFixed(1) }}%
             </div>
@@ -47,22 +50,22 @@
 
         <div class="chart-row">
           <div class="chart-box flex-2">
-            <div class="box-title">OEE趋势分析</div>
+            <div class="box-header">OEE趋势分析</div>
             <div ref="trendChartRef" class="chart"></div>
           </div>
           <div class="chart-box flex-1">
-            <div class="box-title">7大损失分布</div>
+            <div class="box-header">7大损失分布</div>
             <div ref="lossChartRef" class="chart"></div>
           </div>
         </div>
 
         <div class="chart-row">
           <div class="chart-box flex-1">
-            <div class="box-title">设备状态监控</div>
+            <div class="box-header">设备状态监控</div>
             <div ref="statusChartRef" class="chart"></div>
           </div>
           <div class="chart-box flex-2">
-            <div class="box-title">停机事件明细</div>
+            <div class="box-header">停机事件明细</div>
             <div class="event-table">
               <el-table :data="stoppageList" border size="small" max-height="280">
                 <el-table-column prop="startDate" label="停机时间" width="160" />
@@ -87,6 +90,7 @@ import { getOeeDailySummary, getOeeLossSummary, getOeeStoppageEvents } from '@/a
 
 const currentTime = ref('')
 const currentShift = ref('甲班')
+const isFullscreen = ref(false)
 const trendChartRef = ref(null)
 const lossChartRef = ref(null)
 const statusChartRef = ref(null)
@@ -96,6 +100,7 @@ let statusChart = null
 let timeInterval = null
 let dataInterval = null
 let resizeObserver = null
+let fullscreenChangeHandler = null
 
 const oeeData = ref({
   oee: 0,
@@ -112,6 +117,12 @@ const summaryList = ref([])
 const lossList = ref([])
 const stoppageList = ref([])
 
+const getTrendClass = (value) => {
+  if (value > 0) return 'positive'
+  if (value < 0) return 'negative'
+  return 'zero'
+}
+
 const updateTime = () => {
   currentTime.value = new Date().toLocaleString('zh-CN', {
     year: 'numeric',
@@ -221,28 +232,33 @@ const updateTrendChart = () => {
   const qualValues = summaryList.value.map(item => item.quality)
 
   trendChart.setOption({
-    backgroundColor: '#ffffff',
+    backgroundColor: 'transparent',
     grid: { top: 40, right: 20, bottom: 30, left: 50 },
-    tooltip: { trigger: 'axis' },
+    tooltip: { 
+      trigger: 'axis',
+      backgroundColor: 'rgba(10, 20, 40, 0.9)',
+      borderColor: '#1e3a5f',
+      textStyle: { color: '#fff' }
+    },
     legend: {
       data: ['OEE', '时间稼动率', '性能稼动率', '良品率'],
       bottom: 0,
-      textStyle: { color: '#666' }
+      textStyle: { color: '#a0c4e8' }
     },
     xAxis: {
       type: 'category',
       data: dates,
-      axisLine: { lineStyle: { color: '#ddd' } },
+      axisLine: { lineStyle: { color: '#3a5a8a' } },
       axisTick: { show: false },
-      axisLabel: { color: '#666' }
+      axisLabel: { color: '#a0c4e8' }
     },
     yAxis: {
       type: 'value',
       min: 70,
       max: 100,
       axisLine: { show: false },
-      splitLine: { lineStyle: { color: '#eee' } },
-      axisLabel: { color: '#666' }
+      splitLine: { lineStyle: { color: '#1e3a5f', type: 'dashed' } },
+      axisLabel: { color: '#a0c4e8' }
     },
     series: [
       {
@@ -250,34 +266,40 @@ const updateTrendChart = () => {
         type: 'line',
         smooth: true,
         data: oeeValues,
-        lineStyle: { color: '#4a90d9', width: 3 },
-        itemStyle: { color: '#4a90d9' },
+        lineStyle: { color: '#00d4ff', width: 3 },
+        itemStyle: { color: '#00d4ff' },
         symbol: 'circle',
-        symbolSize: 8
+        symbolSize: 8,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
+            { offset: 1, color: 'rgba(0, 212, 255, 0.05)' }
+          ])
+        }
       },
       {
         name: '时间稼动率',
         type: 'line',
         smooth: true,
         data: avalValues,
-        lineStyle: { color: '#52c41a', width: 2 },
-        itemStyle: { color: '#52c41a' }
+        lineStyle: { color: '#00ff88', width: 2 },
+        itemStyle: { color: '#00ff88' }
       },
       {
         name: '性能稼动率',
         type: 'line',
         smooth: true,
         data: perfValues,
-        lineStyle: { color: '#5cd9e8', width: 2 },
-        itemStyle: { color: '#5cd9e8' }
+        lineStyle: { color: '#7c63ff', width: 2 },
+        itemStyle: { color: '#7c63ff' }
       },
       {
         name: '良品率',
         type: 'line',
         smooth: true,
         data: qualValues,
-        lineStyle: { color: '#ff9800', width: 2 },
-        itemStyle: { color: '#ff9800' }
+        lineStyle: { color: '#ff9f43', width: 2 },
+        itemStyle: { color: '#ff9f43' }
       }
     ]
   })
@@ -287,9 +309,15 @@ const updateLossChart = () => {
   if (!lossChart) return
 
   lossChart.setOption({
-    backgroundColor: '#ffffff',
-    tooltip: { trigger: 'item', formatter: '{b}: {c}分钟 ({d}%)' },
-    legend: { bottom: 0, textStyle: { color: '#666' } },
+    backgroundColor: 'transparent',
+    tooltip: { 
+      trigger: 'item', 
+      formatter: '{b}: {c}分钟 ({d}%)',
+      backgroundColor: 'rgba(10, 20, 40, 0.9)',
+      borderColor: '#1e3a5f',
+      textStyle: { color: '#fff' }
+    },
+    legend: { bottom: 0, textStyle: { color: '#a0c4e8' } },
     series: [{
       type: 'pie',
       radius: ['40%', '70%'],
@@ -298,10 +326,17 @@ const updateLossChart = () => {
         value: item.lossTimeMin || 0,
         name: item.lossCategoryName || '损失' + (index + 1),
         itemStyle: {
-          color: ['#4a90d9', '#5cd9e8', '#52c41a', '#ff9800', '#ff5722', '#9c27b0', '#673ab7'][index]
+          color: ['#ff6b6b', '#ffa94d', '#ffd43b', '#69db7c', '#74c0fc', '#b197fc', '#ff8fab'][index]
         }
       })),
-      label: { show: false }
+      label: { show: false },
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
     }]
   })
 }
@@ -310,20 +345,32 @@ const updateStatusChart = () => {
   if (!statusChart) return
 
   statusChart.setOption({
-    backgroundColor: '#ffffff',
-    tooltip: { trigger: 'item' },
-    legend: { bottom: 0, textStyle: { color: '#666' } },
+    backgroundColor: 'transparent',
+    tooltip: { 
+      trigger: 'item',
+      backgroundColor: 'rgba(10, 20, 40, 0.9)',
+      borderColor: '#1e3a5f',
+      textStyle: { color: '#fff' }
+    },
+    legend: { bottom: 0, textStyle: { color: '#a0c4e8' } },
     series: [{
       type: 'pie',
       radius: ['40%', '70%'],
       center: ['50%', '45%'],
       data: [
-        { value: 65, name: '运行中', itemStyle: { color: '#52c41a' } },
-        { value: 15, name: '待机', itemStyle: { color: '#ff9800' } },
-        { value: 12, name: '故障', itemStyle: { color: '#f56c6c' } },
-        { value: 8, name: '维护', itemStyle: { color: '#5cd9e8' } }
+        { value: 65, name: '运行中', itemStyle: { color: '#00ff88' } },
+        { value: 15, name: '待机', itemStyle: { color: '#ffd43b' } },
+        { value: 12, name: '故障', itemStyle: { color: '#ff6b6b' } },
+        { value: 8, name: '维护', itemStyle: { color: '#74c0fc' } }
       ],
-      label: { show: false }
+      label: { show: false },
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
     }]
   })
 }
@@ -366,8 +413,27 @@ onMounted(() => {
 
     dataInterval = setInterval(loadData, 30000)
   })
+  
+  window.addEventListener('refresh-data', handleRefresh)
+  
+  fullscreenChangeHandler = () => {
+    isFullscreen.value = !!document.fullscreenElement
+  }
+  document.addEventListener('fullscreenchange', fullscreenChangeHandler)
 })
 
+const handleRefresh = () => {
+  loadData()
+}
+
+const exitFullscreen = () => {
+  if (document.fullscreenElement) {
+    document.exitFullscreen().catch(err => {
+      console.error('退出全屏失败:', err)
+    })
+  }
+}
+
 onBeforeUnmount(() => {
   if (timeInterval) {
     clearInterval(timeInterval)
@@ -378,10 +444,15 @@ onBeforeUnmount(() => {
     dataInterval = null
   }
   window.removeEventListener('resize', handleResize)
+  window.removeEventListener('refresh-data', handleRefresh)
   if (resizeObserver) {
     resizeObserver.disconnect()
     resizeObserver = null
   }
+  if (fullscreenChangeHandler) {
+    document.removeEventListener('fullscreenchange', fullscreenChangeHandler)
+    fullscreenChangeHandler = null
+  }
   if (trendChart) {
     trendChart.dispose()
     trendChart = null
@@ -405,18 +476,16 @@ onUnmounted(() => {
 .screen-wrapper {
   width: 100%;
   min-height: 100%;
-  background: #f5f5f5;
+  background: linear-gradient(180deg, #0a1428 0%, #0d1b34 50%, #0a1428 100%);
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 .screen-content {
-  background: #ffffff;
-  color: #333333;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  background: transparent;
+  color: #ffffff;
   width: 100%;
-  padding-bottom: 20px;
+  padding: 20px;
 }
 
 .screen-header {
@@ -424,88 +493,117 @@ onUnmounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 20px 30px;
-  border-bottom: 1px solid #eee;
+  background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, rgba(12, 30, 60, 0.8) 100%);
+  border-radius: 8px;
+  margin-bottom: 20px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
 
   .title {
-    font-size: 24px;
+    font-size: 26px;
     font-weight: bold;
-    color: #333333;
-    letter-spacing: 2px;
+    color: #00d4ff;
+    letter-spacing: 3px;
     margin: 0;
+    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
   }
 
   .header-right {
     display: flex;
-    gap: 20px;
+    gap: 25px;
     align-items: center;
 
     .current-shift {
-      font-size: 14px;
-      color: #4a90d9;
+      font-size: 16px;
+      color: #a0c4e8;
       font-weight: 600;
     }
 
     .time {
-      font-size: 16px;
-      color: #666666;
+      font-size: 18px;
+      color: #00d4ff;
       font-family: 'Courier New', monospace;
+      font-weight: bold;
+    }
+
+    .exit-fullscreen-btn {
+      padding: 8px 16px;
+      border: 1px solid rgba(255, 107, 107, 0.5);
+      border-radius: 6px;
+      background: rgba(255, 107, 107, 0.2);
+      color: #ff6b6b;
+      font-size: 14px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:hover {
+        background: rgba(255, 107, 107, 0.3);
+        border-color: #ff6b6b;
+        box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
+      }
     }
   }
 }
 
 .screen-body {
-  padding: 15px;
+  padding: 0;
 }
 
 .kpi-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 
   .kpi-card {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
+    background: linear-gradient(180deg, rgba(14, 40, 80, 0.9) 0%, rgba(10, 20, 40, 0.95) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.2);
     border-radius: 8px;
-    padding: 20px;
+    padding: 0;
     text-align: center;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 
-    .kpi-title {
+    .card-header {
+      background: linear-gradient(90deg, #00a8cc 0%, #00d4ff 50%, #00a8cc 100%);
+      padding: 10px 15px;
       font-size: 14px;
-      color: #666666;
-      margin-bottom: 10px;
+      font-weight: bold;
+      color: #0a1428;
+      letter-spacing: 2px;
     }
 
     .kpi-value {
-      font-size: 32px;
+      font-size: 40px;
       font-weight: bold;
-      margin-bottom: 8px;
-
-      &.oee { color: #4a90d9; }
-      &.availability { color: #52c41a; }
-      &.performance { color: #5cd9e8; }
-      &.quality { color: #ff9800; }
+      color: #00d4ff;
+      margin: 15px 0;
+      text-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
     }
 
     .kpi-trend {
-      font-size: 12px;
-      padding: 2px 8px;
-      border-radius: 10px;
+      font-size: 14px;
+      padding: 4px 12px;
+      border-radius: 15px;
       display: inline-block;
+      margin-bottom: 15px;
+      font-weight: 600;
 
       &.positive {
-        background: #f0f9eb;
-        color: #52c41a;
+        background: rgba(0, 255, 136, 0.15);
+        color: #00ff88;
+        border: 1px solid rgba(0, 255, 136, 0.3);
       }
 
       &.negative {
-        background: #fef0f0;
-        color: #f56c6c;
+        background: rgba(255, 107, 107, 0.15);
+        color: #ff6b6b;
+        border: 1px solid rgba(255, 107, 107, 0.3);
       }
 
       &.zero {
-        background: #fafafa;
-        color: #999999;
+        background: rgba(160, 196, 232, 0.15);
+        color: #a0c4e8;
+        border: 1px solid rgba(160, 196, 232, 0.3);
       }
     }
   }
@@ -517,12 +615,14 @@ onUnmounted(() => {
   margin-bottom: 16px;
 
   .chart-box {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
+    background: linear-gradient(180deg, rgba(14, 40, 80, 0.85) 0%, rgba(10, 20, 40, 0.9) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.15);
     border-radius: 8px;
-    padding: 15px;
+    padding: 0;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 
     &.flex-1 {
       flex: 1;
@@ -532,22 +632,60 @@ onUnmounted(() => {
       flex: 2;
     }
 
-    .box-title {
+    .box-header {
+      background: linear-gradient(90deg, rgba(0, 168, 204, 0.8) 0%, rgba(0, 212, 255, 0.6) 100%);
+      padding: 12px 18px;
       font-size: 14px;
-      font-weight: 600;
-      color: #333333;
-      margin-bottom: 12px;
-      padding-left: 10px;
-      border-left: 3px solid #4a90d9;
+      font-weight: bold;
+      color: #0a1428;
+      letter-spacing: 2px;
+      border-bottom: 1px solid rgba(0, 212, 255, 0.3);
     }
 
     .chart {
       height: 300px;
       width: 100%;
+      padding: 15px;
     }
 
     .event-table {
       flex: 1;
+      padding: 15px;
+    }
+  }
+}
+
+:deep(.el-table) {
+  background: rgba(10, 20, 40, 0.8);
+  border: 1px solid rgba(0, 212, 255, 0.2);
+
+  .el-table__header-wrapper {
+    .el-table__header {
+      th {
+        background: rgba(0, 212, 255, 0.15);
+        color: #00d4ff;
+        font-weight: bold;
+        border-bottom: 1px solid rgba(0, 212, 255, 0.3);
+      }
+    }
+  }
+
+  .el-table__body-wrapper {
+    .el-table__body {
+      tr {
+        td {
+          color: #a0c4e8;
+          border-bottom: 1px solid rgba(0, 212, 255, 0.1);
+        }
+
+        &:nth-child(even) {
+          background: rgba(0, 212, 255, 0.05);
+        }
+
+        &:hover {
+          background: rgba(0, 212, 255, 0.1);
+        }
+      }
     }
   }
 }
diff --git a/src/modules/dashboardBig/views/order.vue b/src/modules/dashboardBig/views/order.vue
index 7b8ed4a..3cbd4dd 100644
--- a/src/modules/dashboardBig/views/order.vue
+++ b/src/modules/dashboardBig/views/order.vue
@@ -3,46 +3,53 @@
     <div class="screen-content">
       <header class="screen-header">
         <h1 class="title">订单数据大屏</h1>
-        <span class="time">{{ currentTime }}</span>
+        <div class="header-right">
+          <span class="time">{{ currentTime }}</span>
+          <button v-if="isFullscreen" class="exit-fullscreen-btn" @click="exitFullscreen" title="退出全屏">
+            <span>⛶ 退出全屏</span>
+          </button>
+        </div>
       </header>
 
       <main class="screen-body">
-        <div class="card-grid">
-          <div class="data-card" v-for="card in cards" :key="card.title">
-            <div class="card-title">{{ card.title }}</div>
-            <div class="card-value" :style="{ color: card.color }">{{ card.value }}</div>
-            <div class="card-unit">{{ card.unit }}</div>
+        <div class="kpi-grid">
+          <div class="kpi-card" v-for="card in cards" :key="card.title">
+            <div class="card-header">{{ card.title }}</div>
+            <div class="kpi-value" :style="{ color: card.color }">{{ card.value }}</div>
+            <div class="kpi-unit">{{ card.unit }}</div>
           </div>
         </div>
 
-        <div class="chart-area">
-          <div class="chart-box">
-            <div class="box-title">订单趋势</div>
+        <div class="chart-row">
+          <div class="chart-box flex-1">
+            <div class="box-header">订单趋势</div>
             <div ref="trendChartRef" class="chart"></div>
           </div>
-          <div class="chart-box">
-            <div class="box-title">订单状态分布</div>
+          <div class="chart-box flex-1">
+            <div class="box-header">订单状态分布</div>
             <div ref="pieChartRef" class="chart"></div>
           </div>
         </div>
 
-        <div class="order-list-box">
-          <div class="box-title">订单列表</div>
-          <div class="order-table">
-            <div class="table-header">
-              <span>订单号</span>
-              <span>客户</span>
-              <span>金额</span>
-              <span>状态</span>
-              <span>时间</span>
-            </div>
-            <div class="table-body">
-              <div class="table-row" v-for="order in orderList" :key="order.orderNo">
-                <span class="order-no">{{ order.orderNo }}</span>
-                <span>{{ order.customer }}</span>
-                <span class="amount">{{ formatAmount(order.amount) }}</span>
-                <span :class="['status', order.status]">{{ order.status }}</span>
-                <span class="time">{{ order.time }}</span>
+        <div class="chart-row">
+          <div class="chart-box flex-2">
+            <div class="box-header">订单列表</div>
+            <div class="order-table">
+              <div class="table-header">
+                <span>订单号</span>
+                <span>客户</span>
+                <span>金额</span>
+                <span>状态</span>
+                <span>时间</span>
+              </div>
+              <div class="table-body">
+                <div class="table-row" v-for="order in orderList" :key="order.orderNo">
+                  <span class="order-no">{{ order.orderNo }}</span>
+                  <span>{{ order.customer }}</span>
+                  <span class="amount">{{ formatAmount(order.amount) }}</span>
+                  <span :class="['status', order.status]">{{ order.status }}</span>
+                  <span class="time">{{ order.time }}</span>
+                </div>
               </div>
             </div>
           </div>
@@ -57,17 +64,20 @@ import { ref, onMounted, onBeforeUnmount, onUnmounted, nextTick } from 'vue'
 import * as echarts from 'echarts'
 
 const currentTime = ref('')
+const isFullscreen = ref(false)
 const trendChartRef = ref(null)
 const pieChartRef = ref(null)
 let trendChart = null
 let pieChart = null
 let timeInterval = null
 let resizeObserver = null
+let fullscreenChangeHandler = null
 
 const cards = ref([
-  { title: '今日订单', value: '45', unit: '单', color: '#4a90d9' },
-  { title: '待处理订单', value: '12', unit: '单', color: '#ff9800' },
-  { title: '已完成订单', value: '156', unit: '单', color: '#52c41a' }
+  { title: '今日订单', value: '45', unit: '单', color: '#00d4ff' },
+  { title: '待处理订单', value: '12', unit: '单', color: '#ffd43b' },
+  { title: '已完成订单', value: '156', unit: '单', color: '#00ff88' },
+  { title: '订单总额', value: '568', unit: '万', color: '#7c63ff' }
 ])
 
 const orderList = ref([
@@ -93,33 +103,38 @@ const initCharts = () => {
   if (trendChartRef.value) {
     trendChart = echarts.init(trendChartRef.value)
     trendChart.setOption({
-      backgroundColor: '#ffffff',
+      backgroundColor: 'transparent',
       grid: { top: 20, right: 20, bottom: 30, left: 50 },
-      tooltip: { trigger: 'axis' },
+      tooltip: { 
+        trigger: 'axis',
+        backgroundColor: 'rgba(10, 20, 40, 0.9)',
+        borderColor: '#1e3a5f',
+        textStyle: { color: '#fff' }
+      },
       xAxis: {
         type: 'category',
         data: ['1月', '2月', '3月', '4月', '5月', '6月'],
-        axisLine: { lineStyle: { color: '#ddd' } },
+        axisLine: { lineStyle: { color: '#3a5a8a' } },
         axisTick: { show: false },
-        axisLabel: { color: '#666' }
+        axisLabel: { color: '#a0c4e8' }
       },
       yAxis: {
         type: 'value',
         axisLine: { show: false },
         axisTick: { show: false },
-        splitLine: { lineStyle: { color: '#eee' } },
-        axisLabel: { color: '#666' }
+        splitLine: { lineStyle: { color: '#1e3a5f', type: 'dashed' } },
+        axisLabel: { color: '#a0c4e8' }
       },
       series: [{
         type: 'bar',
-        data: [35, 42, 38, 45, 40, 48],
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#4a90d9' },
-            { offset: 1, color: '#5cd9e8' }
-          ]),
-          borderRadius: [4, 4, 0, 0]
-        }
+        data: [35, 42, 38, 45, 40, 48].map((value, index) => ({
+          value,
+          itemStyle: {
+            color: ['#00d4ff', '#7c63ff', '#00ff88', '#ff9f43', '#ff6b6b', '#ffd43b'][index],
+            borderRadius: [4, 4, 0, 0]
+          }
+        })),
+        barWidth: '50%'
       }]
     })
   }
@@ -127,17 +142,22 @@ const initCharts = () => {
   if (pieChartRef.value) {
     pieChart = echarts.init(pieChartRef.value)
     pieChart.setOption({
-      backgroundColor: '#ffffff',
-      tooltip: { trigger: 'item' },
-      legend: { bottom: 10, textStyle: { color: '#666' } },
+      backgroundColor: 'transparent',
+      tooltip: { 
+        trigger: 'item',
+        backgroundColor: 'rgba(10, 20, 40, 0.9)',
+        borderColor: '#1e3a5f',
+        textStyle: { color: '#fff' }
+      },
+      legend: { bottom: 0, textStyle: { color: '#a0c4e8' } },
       series: [{
         type: 'pie',
         radius: ['45%', '75%'],
         center: ['50%', '45%'],
         data: [
-          { value: 45, name: '生产中', itemStyle: { color: '#4a90d9' } },
-          { value: 12, name: '待生产', itemStyle: { color: '#e6a23c' } },
-          { value: 156, name: '已完成', itemStyle: { color: '#52c41a' } }
+          { value: 45, name: '生产中', itemStyle: { color: '#00d4ff' } },
+          { value: 12, name: '待生产', itemStyle: { color: '#ffd43b' } },
+          { value: 156, name: '已完成', itemStyle: { color: '#00ff88' } }
         ],
         label: { show: false }
       }]
@@ -172,18 +192,42 @@ onMounted(() => {
       }
     }
   })
+  
+  window.addEventListener('refresh-data', handleRefresh)
+  
+  fullscreenChangeHandler = () => {
+    isFullscreen.value = !!document.fullscreenElement
+  }
+  document.addEventListener('fullscreenchange', fullscreenChangeHandler)
 })
 
+const handleRefresh = () => {
+  initCharts()
+}
+
+const exitFullscreen = () => {
+  if (document.fullscreenElement) {
+    document.exitFullscreen().catch(err => {
+      console.error('退出全屏失败:', err)
+    })
+  }
+}
+
 onBeforeUnmount(() => {
   if (timeInterval) {
     clearInterval(timeInterval)
     timeInterval = null
   }
   window.removeEventListener('resize', handleResize)
+  window.removeEventListener('refresh-data', handleRefresh)
   if (resizeObserver) {
     resizeObserver.disconnect()
     resizeObserver = null
   }
+  if (fullscreenChangeHandler) {
+    document.removeEventListener('fullscreenchange', fullscreenChangeHandler)
+    fullscreenChangeHandler = null
+  }
   if (trendChart) {
     trendChart.dispose()
     trendChart = null
@@ -203,18 +247,16 @@ onUnmounted(() => {
 .screen-wrapper {
   width: 100%;
   min-height: 100%;
-  background: #f5f5f5;
+  background: linear-gradient(180deg, #0a1428 0%, #0d1b34 50%, #0a1428 100%);
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 .screen-content {
-  background: #ffffff;
-  color: #333333;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  background: transparent;
+  color: #ffffff;
   width: 100%;
-  padding-bottom: 20px;
+  padding: 20px;
 }
 
 .screen-header {
@@ -222,170 +264,210 @@ onUnmounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 20px 30px;
-  border-bottom: 1px solid #eee;
+  background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, rgba(12, 30, 60, 0.8) 100%);
+  border-radius: 8px;
+  margin-bottom: 20px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
 
   .title {
-    font-size: 24px;
+    font-size: 26px;
     font-weight: bold;
-    color: #333333;
-    letter-spacing: 2px;
+    color: #00d4ff;
+    letter-spacing: 3px;
     margin: 0;
+    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 20px;
   }
 
   .time {
-    font-size: 16px;
-    color: #666666;
+    font-size: 18px;
+    color: #00d4ff;
     font-family: 'Courier New', monospace;
+    font-weight: bold;
+  }
+
+  .exit-fullscreen-btn {
+    padding: 8px 16px;
+    border: 1px solid rgba(255, 107, 107, 0.5);
+    border-radius: 6px;
+    background: rgba(255, 107, 107, 0.2);
+    color: #ff6b6b;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: rgba(255, 107, 107, 0.3);
+      border-color: #ff6b6b;
+      box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
+    }
   }
 }
 
 .screen-body {
-  padding: 15px;
+  padding: 0;
 }
 
-.card-grid {
+.kpi-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 
-  .data-card {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
+  .kpi-card {
+    background: linear-gradient(180deg, rgba(14, 40, 80, 0.9) 0%, rgba(10, 20, 40, 0.95) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.2);
     border-radius: 8px;
-    padding: 20px;
+    padding: 0;
     text-align: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 
-    .card-title {
+    .card-header {
+      background: linear-gradient(90deg, #00a8cc 0%, #00d4ff 50%, #00a8cc 100%);
+      padding: 10px 15px;
       font-size: 14px;
-      color: #666666;
-      margin-bottom: 10px;
-    }
-
-    .card-value {
-      font-size: 32px;
       font-weight: bold;
-      margin-bottom: 5px;
+      color: #0a1428;
+      letter-spacing: 2px;
     }
 
-    .card-unit {
-      font-size: 12px;
-      color: #999999;
+    .kpi-value {
+      font-size: 36px;
+      font-weight: bold;
+      margin: 15px 0 5px;
+      text-shadow: 0 0 15px currentColor;
+    }
+
+    .kpi-unit {
+      font-size: 14px;
+      color: #a0c4e8;
+      margin-bottom: 15px;
     }
   }
 }
 
-.chart-area {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+.chart-row {
+  display: flex;
   gap: 16px;
   margin-bottom: 16px;
 
   .chart-box {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
+    background: linear-gradient(180deg, rgba(14, 40, 80, 0.85) 0%, rgba(10, 20, 40, 0.9) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.15);
     border-radius: 8px;
-    padding: 15px;
+    padding: 0;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 
-    .box-title {
+    &.flex-1 {
+      flex: 1;
+    }
+
+    &.flex-2 {
+      flex: 2;
+    }
+
+    .box-header {
+      background: linear-gradient(90deg, rgba(0, 168, 204, 0.8) 0%, rgba(0, 212, 255, 0.6) 100%);
+      padding: 12px 18px;
       font-size: 14px;
-      font-weight: 600;
-      color: #333333;
-      margin-bottom: 10px;
-      padding-left: 10px;
-      border-left: 3px solid #4a90d9;
+      font-weight: bold;
+      color: #0a1428;
+      letter-spacing: 2px;
+      border-bottom: 1px solid rgba(0, 212, 255, 0.3);
     }
 
     .chart {
       height: 300px;
       width: 100%;
-    }
-  }
-}
-
-.order-list-box {
-  background: #fafafa;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-
-  .box-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: #333333;
-    margin-bottom: 10px;
-    padding-left: 10px;
-    border-left: 3px solid #4a90d9;
-  }
-
-  .order-table {
-    display: flex;
-    flex-direction: column;
-
-    .table-header {
-      display: grid;
-      grid-template-columns: 2fr 2fr 1.5fr 1fr 1fr;
-      gap: 15px;
-      padding: 10px 15px;
-      background: #e0e0e0;
-      border-radius: 4px;
-      font-size: 13px;
-      color: #666666;
-      font-weight: 500;
+      padding: 15px;
     }
 
-    .table-body {
-      .table-row {
+    .order-table {
+      flex: 1;
+      padding: 15px;
+      display: flex;
+      flex-direction: column;
+
+      .table-header {
         display: grid;
         grid-template-columns: 2fr 2fr 1.5fr 1fr 1fr;
         gap: 15px;
-        padding: 10px 15px;
-        border-bottom: 1px solid #eee;
+        padding: 12px 15px;
+        background: rgba(0, 212, 255, 0.15);
+        border-radius: 6px;
         font-size: 13px;
+        color: #00d4ff;
+        font-weight: bold;
+        border: 1px solid rgba(0, 212, 255, 0.3);
+      }
 
-        .order-no {
-          color: #4a90d9;
-          font-family: 'Courier New', monospace;
-        }
+      .table-body {
+        .table-row {
+          display: grid;
+          grid-template-columns: 2fr 2fr 1.5fr 1fr 1fr;
+          gap: 15px;
+          padding: 12px 15px;
+          border-bottom: 1px solid rgba(0, 212, 255, 0.1);
+          font-size: 13px;
 
-        .amount {
-          color: #ff9800;
-          font-weight: 600;
-        }
-
-        .status {
-          padding: 2px 8px;
-          border-radius: 4px;
-          font-size: 11px;
-          text-align: center;
-          display: inline-block;
-          width: fit-content;
-
-          &.已完成 {
-            background: rgba(82, 196, 26, 0.2);
-            color: #52c41a;
+          &:nth-child(even) {
+            background: rgba(0, 212, 255, 0.05);
           }
 
-          &.生产中 {
-            background: rgba(74, 144, 217, 0.2);
-            color: #4a90d9;
+          &:hover {
+            background: rgba(0, 212, 255, 0.1);
           }
 
-          &.待生产 {
-            background: rgba(230, 162, 60, 0.2);
-            color: #e6a23c;
+          .order-no {
+            color: #00d4ff;
+            font-family: 'Courier New', monospace;
+            font-weight: 600;
           }
-        }
 
-        .time {
-          color: #999999;
+          .amount {
+            color: #ff9f43;
+            font-weight: bold;
+          }
+
+          .status {
+            padding: 3px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            text-align: center;
+            display: inline-block;
+            width: fit-content;
+
+            &.已完成 {
+              background: rgba(0, 255, 136, 0.15);
+              color: #00ff88;
+              border: 1px solid rgba(0, 255, 136, 0.3);
+            }
+
+            &.生产中 {
+              background: rgba(0, 212, 255, 0.15);
+              color: #00d4ff;
+              border: 1px solid rgba(0, 212, 255, 0.3);
+            }
+
+            &.待生产 {
+              background: rgba(255, 212, 59, 0.15);
+              color: #ffd43b;
+              border: 1px solid rgba(255, 212, 59, 0.3);
+            }
+          }
+
+          .time {
+            color: #a0c4e8;
+          }
         }
       }
     }
@@ -393,17 +475,17 @@ onUnmounted(() => {
 }
 
 @media screen and (max-width: 1200px) {
-  .card-grid {
-    grid-template-columns: repeat(3, 1fr);
+  .kpi-grid {
+    grid-template-columns: repeat(2, 1fr);
   }
 
-  .chart-area {
-    grid-template-columns: 1fr;
+  .chart-row {
+    flex-direction: column;
   }
 }
 
 @media screen and (max-width: 768px) {
-  .card-grid {
+  .kpi-grid {
     grid-template-columns: 1fr;
   }
 }
diff --git a/src/modules/dashboardBig/views/output.vue b/src/modules/dashboardBig/views/output.vue
index e323fcb..b6a13b0 100644
--- a/src/modules/dashboardBig/views/output.vue
+++ b/src/modules/dashboardBig/views/output.vue
@@ -3,39 +3,44 @@
     <div class="screen-content">
       <header class="screen-header">
         <h1 class="title">产出监控大屏</h1>
-        <span class="time">{{ currentTime }}</span>
+        <div class="header-right">
+          <span class="time">{{ currentTime }}</span>
+          <button v-if="isFullscreen" class="exit-fullscreen-btn" @click="exitFullscreen" title="退出全屏">
+            <span>⛶ 退出全屏</span>
+          </button>
+        </div>
       </header>
 
       <main class="screen-body">
         <div class="kpi-grid">
           <div class="kpi-card">
+            <div class="card-header">今日产量</div>
             <div class="kpi-icon">📦</div>
             <div class="kpi-info">
-              <div class="kpi-title">今日产量</div>
               <div class="kpi-value">{{ outputData.todayCount }}</div>
               <div class="kpi-unit">卷</div>
             </div>
           </div>
           <div class="kpi-card">
+            <div class="card-header">今日重量</div>
             <div class="kpi-icon">⚖️</div>
             <div class="kpi-info">
-              <div class="kpi-title">今日重量</div>
               <div class="kpi-value">{{ outputData.todayWeight.toFixed(1) }}</div>
               <div class="kpi-unit">吨</div>
             </div>
           </div>
           <div class="kpi-card">
+            <div class="card-header">月累计</div>
             <div class="kpi-icon">📊</div>
             <div class="kpi-info">
-              <div class="kpi-title">月累计</div>
               <div class="kpi-value">{{ outputData.monthCount }}</div>
               <div class="kpi-unit">卷</div>
             </div>
           </div>
           <div class="kpi-card">
+            <div class="card-header">年累计</div>
             <div class="kpi-icon">🏭</div>
             <div class="kpi-info">
-              <div class="kpi-title">年累计</div>
               <div class="kpi-value">{{ outputData.yearCount }}</div>
               <div class="kpi-unit">卷</div>
             </div>
@@ -44,7 +49,7 @@
 
         <div class="chart-row">
           <div class="chart-box flex-2">
-            <div class="box-title">产出明细</div>
+            <div class="box-header">产出明细</div>
             <div class="table-container">
               <el-table :data="outputList" border size="small" max-height="320">
                 <el-table-column prop="batchNo" label="批次号" width="140" />
@@ -77,22 +82,22 @@
             </div>
           </div>
           <div class="chart-box flex-1">
-            <div class="box-title">质量分布</div>
+            <div class="box-header">质量分布</div>
             <div ref="qualityChartRef" class="chart"></div>
           </div>
         </div>
 
         <div class="chart-row">
           <div class="chart-box flex-1">
-            <div class="box-title">产品类型分布</div>
+            <div class="box-header">产品类型分布</div>
             <div ref="productTypeChartRef" class="chart"></div>
           </div>
           <div class="chart-box flex-1">
-            <div class="box-title">库存状态分布</div>
+            <div class="box-header">库存状态分布</div>
             <div ref="stockChartRef" class="chart"></div>
           </div>
           <div class="chart-box flex-1">
-            <div class="box-title">重量分布</div>
+            <div class="box-header">重量分布</div>
             <div ref="weightChartRef" class="chart"></div>
           </div>
         </div>
@@ -107,11 +112,13 @@ import * as echarts from 'echarts'
 import { getProductionOutput, getDashboardOverview } from '@/api/acidOee'
 
 const currentTime = ref('')
+const isFullscreen = ref(false)
 const qualityChartRef = ref(null)
 const productTypeChartRef = ref(null)
 const stockChartRef = ref(null)
 const weightChartRef = ref(null)
 let qualityChart = null
+let fullscreenChangeHandler = null
 let productTypeChart = null
 let stockChart = null
 let weightChart = null
@@ -207,18 +214,31 @@ const updateQualityChart = () => {
   const unqualified = outputList.value.filter(item => item.qualityStatus === '不合格').length
 
   qualityChart.setOption({
-    backgroundColor: '#ffffff',
-    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
-    legend: { bottom: 0, textStyle: { color: '#666' } },
+    backgroundColor: 'transparent',
+    tooltip: { 
+      trigger: 'item', 
+      formatter: '{b}: {c} ({d}%)',
+      backgroundColor: 'rgba(10, 20, 40, 0.9)',
+      borderColor: '#1e3a5f',
+      textStyle: { color: '#fff' }
+    },
+    legend: { bottom: 0, textStyle: { color: '#a0c4e8' } },
     series: [{
       type: 'pie',
       radius: ['45%', '75%'],
       center: ['50%', '45%'],
       data: [
-        { value: qualified || 150, name: '合格', itemStyle: { color: '#52c41a' } },
-        { value: unqualified || 6, name: '不合格', itemStyle: { color: '#f56c6c' } }
+        { value: qualified || 150, name: '合格', itemStyle: { color: '#00ff88' } },
+        { value: unqualified || 6, name: '不合格', itemStyle: { color: '#ff6b6b' } }
       ],
-      label: { show: false }
+      label: { show: false },
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
     }]
   })
 }
@@ -235,24 +255,37 @@ const updateProductTypeChart = () => {
     name,
     value,
     itemStyle: {
-      color: ['#4a90d9', '#5cd9e8', '#52c41a', '#ff9800', '#ff5722'][index % 5]
+      color: ['#00d4ff', '#7c63ff', '#00ff88', '#ffd43b', '#ff6b6b'][index % 5]
     }
   }))
 
   productTypeChart.setOption({
-    backgroundColor: '#ffffff',
-    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
-    legend: { bottom: 0, textStyle: { color: '#666' } },
+    backgroundColor: 'transparent',
+    tooltip: { 
+      trigger: 'item', 
+      formatter: '{b}: {c} ({d}%)',
+      backgroundColor: 'rgba(10, 20, 40, 0.9)',
+      borderColor: '#1e3a5f',
+      textStyle: { color: '#fff' }
+    },
+    legend: { bottom: 0, textStyle: { color: '#a0c4e8' } },
     series: [{
       type: 'pie',
       radius: ['40%', '70%'],
       center: ['50%', '45%'],
       data: data.length > 0 ? data : [
-        { value: 100, name: 'SPHC', itemStyle: { color: '#4a90d9' } },
-        { value: 80, name: 'SPHD', itemStyle: { color: '#5cd9e8' } },
-        { value: 60, name: 'SPHE', itemStyle: { color: '#52c41a' } }
+        { value: 100, name: 'SPHC', itemStyle: { color: '#00d4ff' } },
+        { value: 80, name: 'SPHD', itemStyle: { color: '#7c63ff' } },
+        { value: 60, name: 'SPHE', itemStyle: { color: '#00ff88' } }
       ],
-      label: { show: false }
+      label: { show: false },
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
     }]
   })
 }
@@ -269,24 +302,37 @@ const updateStockChart = () => {
     name,
     value,
     itemStyle: {
-      color: ['#52c41a', '#ff9800', '#f56c6c'][index % 3]
+      color: ['#00ff88', '#ffd43b', '#ff6b6b'][index % 3]
     }
   }))
 
   stockChart.setOption({
-    backgroundColor: '#ffffff',
-    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
-    legend: { bottom: 0, textStyle: { color: '#666' } },
+    backgroundColor: 'transparent',
+    tooltip: { 
+      trigger: 'item', 
+      formatter: '{b}: {c} ({d}%)',
+      backgroundColor: 'rgba(10, 20, 40, 0.9)',
+      borderColor: '#1e3a5f',
+      textStyle: { color: '#fff' }
+    },
+    legend: { bottom: 0, textStyle: { color: '#a0c4e8' } },
     series: [{
       type: 'pie',
       radius: ['40%', '70%'],
       center: ['50%', '45%'],
       data: data.length > 0 ? data : [
-        { value: 120, name: '在库', itemStyle: { color: '#52c41a' } },
-        { value: 25, name: '已出库', itemStyle: { color: '#ff9800' } },
-        { value: 11, name: '待处理', itemStyle: { color: '#f56c6c' } }
+        { value: 120, name: '在库', itemStyle: { color: '#00ff88' } },
+        { value: 25, name: '已出库', itemStyle: { color: '#ffd43b' } },
+        { value: 11, name: '待处理', itemStyle: { color: '#ff6b6b' } }
       ],
-      label: { show: false }
+      label: { show: false },
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
     }]
   })
 }
@@ -295,30 +341,35 @@ const updateWeightChart = () => {
   if (!weightChart) return
 
   weightChart.setOption({
-    backgroundColor: '#ffffff',
+    backgroundColor: 'transparent',
     grid: { top: 20, right: 20, bottom: 30, left: 50 },
-    tooltip: { trigger: 'axis' },
+    tooltip: { 
+      trigger: 'axis',
+      backgroundColor: 'rgba(10, 20, 40, 0.9)',
+      borderColor: '#1e3a5f',
+      textStyle: { color: '#fff' }
+    },
     xAxis: {
       type: 'category',
       data: ['<6t', '6-7t', '7-8t', '8-9t', '>9t'],
-      axisLine: { lineStyle: { color: '#ddd' } },
+      axisLine: { lineStyle: { color: '#3a5a8a' } },
       axisTick: { show: false },
-      axisLabel: { color: '#666' }
+      axisLabel: { color: '#a0c4e8' }
     },
     yAxis: {
       type: 'value',
       axisLine: { show: false },
-      splitLine: { lineStyle: { color: '#eee' } },
-      axisLabel: { color: '#666' }
+      splitLine: { lineStyle: { color: '#1e3a5f', type: 'dashed' } },
+      axisLabel: { color: '#a0c4e8' }
     },
     series: [{
       type: 'bar',
       data: [
-        { value: 20, itemStyle: { color: '#4a90d9' } },
-        { value: 85, itemStyle: { color: '#5cd9e8' } },
-        { value: 95, itemStyle: { color: '#52c41a' } },
-        { value: 45, itemStyle: { color: '#ff9800' } },
-        { value: 10, itemStyle: { color: '#ff5722' } }
+        { value: 20, itemStyle: { color: '#00d4ff' } },
+        { value: 85, itemStyle: { color: '#7c63ff' } },
+        { value: 95, itemStyle: { color: '#00ff88' } },
+        { value: 45, itemStyle: { color: '#ffd43b' } },
+        { value: 10, itemStyle: { color: '#ff6b6b' } }
       ],
       barWidth: '50%'
     }]
@@ -367,8 +418,27 @@ onMounted(() => {
 
     dataInterval = setInterval(loadData, 30000)
   })
+  
+  window.addEventListener('refresh-data', handleRefresh)
+  
+  fullscreenChangeHandler = () => {
+    isFullscreen.value = !!document.fullscreenElement
+  }
+  document.addEventListener('fullscreenchange', fullscreenChangeHandler)
 })
 
+const handleRefresh = () => {
+  loadData()
+}
+
+const exitFullscreen = () => {
+  if (document.fullscreenElement) {
+    document.exitFullscreen().catch(err => {
+      console.error('退出全屏失败:', err)
+    })
+  }
+}
+
 onBeforeUnmount(() => {
   if (timeInterval) {
     clearInterval(timeInterval)
@@ -379,10 +449,15 @@ onBeforeUnmount(() => {
     dataInterval = null
   }
   window.removeEventListener('resize', handleResize)
+  window.removeEventListener('refresh-data', handleRefresh)
   if (resizeObserver) {
     resizeObserver.disconnect()
     resizeObserver = null
   }
+  if (fullscreenChangeHandler) {
+    document.removeEventListener('fullscreenchange', fullscreenChangeHandler)
+    fullscreenChangeHandler = null
+  }
   if (qualityChart) {
     qualityChart.dispose()
     qualityChart = null
@@ -410,18 +485,16 @@ onUnmounted(() => {
 .screen-wrapper {
   width: 100%;
   min-height: 100%;
-  background: #f5f5f5;
+  background: linear-gradient(180deg, #0a1428 0%, #0d1b34 50%, #0a1428 100%);
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 .screen-content {
-  background: #ffffff;
-  color: #333333;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  background: transparent;
+  color: #ffffff;
   width: 100%;
-  padding-bottom: 20px;
+  padding: 20px;
 }
 
 .screen-header {
@@ -429,65 +502,102 @@ onUnmounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 20px 30px;
-  border-bottom: 1px solid #eee;
+  background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, rgba(12, 30, 60, 0.8) 100%);
+  border-radius: 8px;
+  margin-bottom: 20px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
 
   .title {
-    font-size: 24px;
+    font-size: 26px;
     font-weight: bold;
-    color: #333333;
-    letter-spacing: 2px;
+    color: #00d4ff;
+    letter-spacing: 3px;
     margin: 0;
+    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 20px;
   }
 
   .time {
-    font-size: 16px;
-    color: #666666;
+    font-size: 18px;
+    color: #00d4ff;
     font-family: 'Courier New', monospace;
+    font-weight: bold;
+  }
+
+  .exit-fullscreen-btn {
+    padding: 8px 16px;
+    border: 1px solid rgba(255, 107, 107, 0.5);
+    border-radius: 6px;
+    background: rgba(255, 107, 107, 0.2);
+    color: #ff6b6b;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: rgba(255, 107, 107, 0.3);
+      border-color: #ff6b6b;
+      box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
+    }
   }
 }
 
 .screen-body {
-  padding: 15px;
+  padding: 0;
 }
 
 .kpi-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 
   .kpi-card {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
+    background: linear-gradient(180deg, rgba(14, 40, 80, 0.9) 0%, rgba(10, 20, 40, 0.95) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.2);
     border-radius: 8px;
-    padding: 20px;
+    padding: 0;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 16px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+
+    .card-header {
+      background: linear-gradient(90deg, #00a8cc 0%, #00d4ff 50%, #00a8cc 100%);
+      padding: 10px 15px;
+      font-size: 14px;
+      font-weight: bold;
+      color: #0a1428;
+      letter-spacing: 2px;
+      width: 100%;
+      text-align: center;
+    }
 
     .kpi-icon {
       font-size: 36px;
+      margin-top: 15px;
     }
 
     .kpi-info {
-      flex: 1;
-
-      .kpi-title {
-        font-size: 14px;
-        color: #666666;
-        margin-bottom: 8px;
-      }
+      text-align: center;
+      margin: 10px 0 15px;
 
       .kpi-value {
-        font-size: 28px;
+        font-size: 36px;
         font-weight: bold;
-        color: #4a90d9;
-        margin-bottom: 4px;
+        color: #00d4ff;
+        text-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
       }
 
       .kpi-unit {
-        font-size: 12px;
-        color: #999999;
+        font-size: 14px;
+        color: #a0c4e8;
       }
     }
   }
@@ -499,12 +609,14 @@ onUnmounted(() => {
   margin-bottom: 16px;
 
   .chart-box {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
+    background: linear-gradient(180deg, rgba(14, 40, 80, 0.85) 0%, rgba(10, 20, 40, 0.9) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.15);
     border-radius: 8px;
-    padding: 15px;
+    padding: 0;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 
     &.flex-1 {
       flex: 1;
@@ -514,26 +626,88 @@ onUnmounted(() => {
       flex: 2;
     }
 
-    .box-title {
+    .box-header {
+      background: linear-gradient(90deg, rgba(0, 168, 204, 0.8) 0%, rgba(0, 212, 255, 0.6) 100%);
+      padding: 12px 18px;
       font-size: 14px;
-      font-weight: 600;
-      color: #333333;
-      margin-bottom: 12px;
-      padding-left: 10px;
-      border-left: 3px solid #4a90d9;
+      font-weight: bold;
+      color: #0a1428;
+      letter-spacing: 2px;
+      border-bottom: 1px solid rgba(0, 212, 255, 0.3);
     }
 
     .chart {
       height: 280px;
       width: 100%;
+      padding: 15px;
     }
 
     .table-container {
       flex: 1;
+      padding: 15px;
     }
   }
 }
 
+:deep(.el-table) {
+  background: rgba(10, 20, 40, 0.8);
+  border: 1px solid rgba(0, 212, 255, 0.2);
+
+  .el-table__header-wrapper {
+    .el-table__header {
+      th {
+        background: rgba(0, 212, 255, 0.15);
+        color: #00d4ff;
+        font-weight: bold;
+        border-bottom: 1px solid rgba(0, 212, 255, 0.3);
+      }
+    }
+  }
+
+  .el-table__body-wrapper {
+    .el-table__body {
+      tr {
+        td {
+          color: #a0c4e8;
+          border-bottom: 1px solid rgba(0, 212, 255, 0.1);
+        }
+
+        &:nth-child(even) {
+          background: rgba(0, 212, 255, 0.05);
+        }
+
+        &:hover {
+          background: rgba(0, 212, 255, 0.1);
+        }
+      }
+    }
+  }
+}
+
+:deep(.el-tag) {
+  background: rgba(0, 212, 255, 0.15);
+  border-color: rgba(0, 212, 255, 0.3);
+  color: #00d4ff;
+
+  &.el-tag--success {
+    background: rgba(0, 255, 136, 0.15);
+    border-color: rgba(0, 255, 136, 0.3);
+    color: #00ff88;
+  }
+
+  &.el-tag--danger {
+    background: rgba(255, 107, 107, 0.15);
+    border-color: rgba(255, 107, 107, 0.3);
+    color: #ff6b6b;
+  }
+
+  &.el-tag--warning {
+    background: rgba(255, 212, 59, 0.15);
+    border-color: rgba(255, 212, 59, 0.3);
+    color: #ffd43b;
+  }
+}
+
 @media screen and (max-width: 1200px) {
   .kpi-grid {
     grid-template-columns: repeat(2, 1fr);
diff --git a/src/modules/dashboardBig/views/stopAnalysis.vue b/src/modules/dashboardBig/views/stopAnalysis.vue
index 0fdd7be..1c42b18 100644
--- a/src/modules/dashboardBig/views/stopAnalysis.vue
+++ b/src/modules/dashboardBig/views/stopAnalysis.vue
@@ -3,63 +3,60 @@
     <div class="screen-content">
       <header class="screen-header">
         <h1 class="title">停机分析大屏</h1>
-        <span class="time">{{ currentTime }}</span>
+        <div class="header-right">
+          <span class="time">{{ currentTime }}</span>
+          <button v-if="isFullscreen" class="exit-fullscreen-btn" @click="exitFullscreen" title="退出全屏">
+            <span>⛶ 退出全屏</span>
+          </button>
+        </div>
       </header>
 
       <main class="screen-body">
         <div class="kpi-grid">
           <div class="kpi-card warning">
+            <div class="card-header">今日停机时长</div>
             <div class="kpi-icon">⏱️</div>
-            <div class="kpi-info">
-              <div class="kpi-title">今日停机时长</div>
-              <div class="kpi-value">{{ stopData.todayDuration }}</div>
-              <div class="kpi-unit">分钟</div>
-            </div>
+            <div class="kpi-value">{{ stopData.todayDuration }}</div>
+            <div class="kpi-unit">分钟</div>
           </div>
           <div class="kpi-card danger">
+            <div class="card-header">今日停机次数</div>
             <div class="kpi-icon">🔴</div>
-            <div class="kpi-info">
-              <div class="kpi-title">今日停机次数</div>
-              <div class="kpi-value">{{ stopData.todayCount }}</div>
-              <div class="kpi-unit">次</div>
-            </div>
+            <div class="kpi-value">{{ stopData.todayCount }}</div>
+            <div class="kpi-unit">次</div>
           </div>
           <div class="kpi-card success">
+            <div class="card-header">运行率</div>
             <div class="kpi-icon">✅</div>
-            <div class="kpi-info">
-              <div class="kpi-title">运行率</div>
-              <div class="kpi-value">{{ stopData.runningRate.toFixed(1) }}</div>
-              <div class="kpi-unit">%</div>
-            </div>
+            <div class="kpi-value">{{ stopData.runningRate.toFixed(1) }}</div>
+            <div class="kpi-unit">%</div>
           </div>
           <div class="kpi-card info">
+            <div class="card-header">平均停机时长</div>
             <div class="kpi-icon">📊</div>
-            <div class="kpi-info">
-              <div class="kpi-title">平均停机时长</div>
-              <div class="kpi-value">{{ stopData.avgDuration }}</div>
-              <div class="kpi-unit">分钟/次</div>
-            </div>
+            <div class="kpi-value">{{ stopData.avgDuration }}</div>
+            <div class="kpi-unit">分钟/次</div>
           </div>
         </div>
 
         <div class="chart-row">
           <div class="chart-box flex-1">
-            <div class="box-title">停机类型分布</div>
+            <div class="box-header">停机类型分布</div>
             <div ref="typeChartRef" class="chart"></div>
           </div>
           <div class="chart-box flex-1">
-            <div class="box-title">班组停机分布</div>
+            <div class="box-header">班组停机分布</div>
             <div ref="teamChartRef" class="chart"></div>
           </div>
           <div class="chart-box flex-1">
-            <div class="box-title">停机时长TOP10</div>
+            <div class="box-header">停机时长TOP10</div>
             <div ref="top10ChartRef" class="chart"></div>
           </div>
         </div>
 
         <div class="chart-row">
           <div class="chart-box flex-2">
-            <div class="box-title">停机事件明细</div>
+            <div class="box-header">停机事件明细</div>
             <div class="table-container">
               <el-table :data="stoppageList" border size="small" max-height="300">
                 <el-table-column prop="stopTime" label="停机时间" width="160" />
@@ -90,6 +87,7 @@ import * as echarts from 'echarts'
 import { getProductionStop } from '@/api/acidOee'
 
 const currentTime = ref('')
+const isFullscreen = ref(false)
 const typeChartRef = ref(null)
 const teamChartRef = ref(null)
 const top10ChartRef = ref(null)
@@ -99,6 +97,7 @@ let top10Chart = null
 let timeInterval = null
 let dataInterval = null
 let resizeObserver = null
+let fullscreenChangeHandler = null
 
 const stopData = ref({
   todayDuration: 0,
@@ -201,9 +200,15 @@ const updateTypeChart = () => {
   if (!typeChart) return
 
   typeChart.setOption({
-    backgroundColor: '#ffffff',
-    tooltip: { trigger: 'item', formatter: '{b}: {c}分钟 ({d}%)' },
-    legend: { bottom: 0, textStyle: { color: '#666' } },
+    backgroundColor: 'transparent',
+    tooltip: { 
+      trigger: 'item', 
+      formatter: '{b}: {c}分钟 ({d}%)',
+      backgroundColor: 'rgba(10, 20, 40, 0.9)',
+      borderColor: '#1e3a5f',
+      textStyle: { color: '#fff' }
+    },
+    legend: { bottom: 0, textStyle: { color: '#a0c4e8' } },
     series: [{
       type: 'pie',
       radius: ['40%', '70%'],
@@ -211,16 +216,23 @@ const updateTypeChart = () => {
       data: typeDistribution.value.length > 0 ? typeDistribution.value.map((item, index) => ({
         ...item,
         itemStyle: {
-          color: ['#f56c6c', '#ff9800', '#5cd9e8', '#52c41a', '#4a90d9'][index % 5]
+          color: ['#ff6b6b', '#ffd43b', '#74c0fc', '#00ff88', '#00d4ff'][index % 5]
         }
       })) : [
-        { name: '设备故障', value: 120, itemStyle: { color: '#f56c6c' } },
-        { name: '换模换线', value: 85, itemStyle: { color: '#ff9800' } },
-        { name: '质量异常', value: 55, itemStyle: { color: '#5cd9e8' } },
-        { name: '物料等待', value: 40, itemStyle: { color: '#52c41a' } },
-        { name: '计划停机', value: 30, itemStyle: { color: '#4a90d9' } }
+        { name: '设备故障', value: 120, itemStyle: { color: '#ff6b6b' } },
+        { name: '换模换线', value: 85, itemStyle: { color: '#ffd43b' } },
+        { name: '质量异常', value: 55, itemStyle: { color: '#74c0fc' } },
+        { name: '物料等待', value: 40, itemStyle: { color: '#00ff88' } },
+        { name: '计划停机', value: 30, itemStyle: { color: '#00d4ff' } }
       ],
-      label: { show: false }
+      label: { show: false },
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
     }]
   })
 }
@@ -229,33 +241,38 @@ const updateTeamChart = () => {
   if (!teamChart) return
 
   teamChart.setOption({
-    backgroundColor: '#ffffff',
-    tooltip: { trigger: 'axis' },
+    backgroundColor: 'transparent',
+    tooltip: { 
+      trigger: 'axis',
+      backgroundColor: 'rgba(10, 20, 40, 0.9)',
+      borderColor: '#1e3a5f',
+      textStyle: { color: '#fff' }
+    },
     grid: { top: 20, right: 20, bottom: 30, left: 50 },
     xAxis: {
       type: 'category',
       data: teamDistribution.value.length > 0 ? teamDistribution.value.map(item => item.name) : ['甲班', '乙班', '丙班', '丁班', '戊班'],
-      axisLine: { lineStyle: { color: '#ddd' } },
+      axisLine: { lineStyle: { color: '#3a5a8a' } },
       axisTick: { show: false },
-      axisLabel: { color: '#666' }
+      axisLabel: { color: '#a0c4e8' }
     },
     yAxis: {
       type: 'value',
       axisLine: { show: false },
-      splitLine: { lineStyle: { color: '#eee' } },
-      axisLabel: { color: '#666' }
+      splitLine: { lineStyle: { color: '#1e3a5f', type: 'dashed' } },
+      axisLabel: { color: '#a0c4e8' }
     },
     series: [{
       type: 'bar',
       data: teamDistribution.value.length > 0 ? teamDistribution.value.map((item, index) => ({
         value: item.value,
         itemStyle: {
-          color: ['#4a90d9', '#5cd9e8', '#52c41a', '#ff9800', '#ff5722'][index % 5]
+          color: ['#00d4ff', '#7c63ff', '#00ff88', '#ffd43b', '#ff6b6b'][index % 5]
         }
       })) : [95, 85, 75, 65, 50].map((value, index) => ({
         value,
         itemStyle: {
-          color: ['#4a90d9', '#5cd9e8', '#52c41a', '#ff9800', '#ff5722'][index]
+          color: ['#00d4ff', '#7c63ff', '#00ff88', '#ffd43b', '#ff6b6b'][index]
         }
       })),
       barWidth: '50%'
@@ -271,40 +288,46 @@ const updateTop10Chart = () => {
     .slice(0, 10)
 
   top10Chart.setOption({
-    backgroundColor: '#ffffff',
-    tooltip: { trigger: 'axis' },
+    backgroundColor: 'transparent',
+    tooltip: { 
+      trigger: 'axis',
+      backgroundColor: 'rgba(10, 20, 40, 0.9)',
+      borderColor: '#1e3a5f',
+      textStyle: { color: '#fff' }
+    },
     grid: { top: 20, right: 80, bottom: 30, left: 50 },
     xAxis: {
       type: 'value',
       axisLine: { show: false },
-      splitLine: { lineStyle: { color: '#eee' } },
-      axisLabel: { color: '#666' }
+      splitLine: { lineStyle: { color: '#1e3a5f', type: 'dashed' } },
+      axisLabel: { color: '#a0c4e8' }
     },
     yAxis: {
       type: 'category',
       data: top10Data.length > 0 ? top10Data.map(item => item.stopType) : ['设备故障', '换模换线', '质量异常'],
-      axisLine: { lineStyle: { color: '#ddd' } },
+      axisLine: { lineStyle: { color: '#3a5a8a' } },
       axisTick: { show: false },
-      axisLabel: { color: '#666' }
+      axisLabel: { color: '#a0c4e8' }
     },
     series: [{
       type: 'bar',
       data: top10Data.length > 0 ? top10Data.map((item, index) => ({
         value: item.duration,
         itemStyle: {
-          color: ['#f56c6c', '#ff9800', '#5cd9e8', '#52c41a', '#4a90d9', '#9c27b0', '#673ab7', '#00bcd4', '#ff5722', '#795548'][index % 10]
+          color: ['#ff6b6b', '#ffd43b', '#74c0fc', '#00ff88', '#00d4ff', '#7c63ff', '#b197fc', '#ff8fab', '#ffa94d', '#69db7c'][index % 10]
         }
       })) : [120, 85, 55].map((value, index) => ({
         value,
         itemStyle: {
-          color: ['#f56c6c', '#ff9800', '#5cd9e8'][index]
+          color: ['#ff6b6b', '#ffd43b', '#74c0fc'][index]
         }
       })),
       barWidth: '50%',
       label: {
         show: true,
         position: 'right',
-        formatter: '{c}分钟'
+        formatter: '{c}分钟',
+        color: '#a0c4e8'
       }
     }]
   })
@@ -348,8 +371,27 @@ onMounted(() => {
 
     dataInterval = setInterval(loadData, 30000)
   })
+  
+  window.addEventListener('refresh-data', handleRefresh)
+  
+  fullscreenChangeHandler = () => {
+    isFullscreen.value = !!document.fullscreenElement
+  }
+  document.addEventListener('fullscreenchange', fullscreenChangeHandler)
 })
 
+const handleRefresh = () => {
+  loadData()
+}
+
+const exitFullscreen = () => {
+  if (document.fullscreenElement) {
+    document.exitFullscreen().catch(err => {
+      console.error('退出全屏失败:', err)
+    })
+  }
+}
+
 onBeforeUnmount(() => {
   if (timeInterval) {
     clearInterval(timeInterval)
@@ -360,10 +402,15 @@ onBeforeUnmount(() => {
     dataInterval = null
   }
   window.removeEventListener('resize', handleResize)
+  window.removeEventListener('refresh-data', handleRefresh)
   if (resizeObserver) {
     resizeObserver.disconnect()
     resizeObserver = null
   }
+  if (fullscreenChangeHandler) {
+    document.removeEventListener('fullscreenchange', fullscreenChangeHandler)
+    fullscreenChangeHandler = null
+  }
   if (typeChart) {
     typeChart.dispose()
     typeChart = null
@@ -387,18 +434,16 @@ onUnmounted(() => {
 .screen-wrapper {
   width: 100%;
   min-height: 100%;
-  background: #f5f5f5;
+  background: linear-gradient(180deg, #0a1428 0%, #0d1b34 50%, #0a1428 100%);
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 .screen-content {
-  background: #ffffff;
-  color: #333333;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  background: transparent;
+  color: #ffffff;
   width: 100%;
-  padding-bottom: 20px;
+  padding: 20px;
 }
 
 .screen-header {
@@ -406,87 +451,121 @@ onUnmounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 20px 30px;
-  border-bottom: 1px solid #eee;
+  background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, rgba(12, 30, 60, 0.8) 100%);
+  border-radius: 8px;
+  margin-bottom: 20px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
 
   .title {
-    font-size: 24px;
+    font-size: 26px;
     font-weight: bold;
-    color: #333333;
-    letter-spacing: 2px;
+    color: #00d4ff;
+    letter-spacing: 3px;
     margin: 0;
+    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 20px;
   }
 
   .time {
-    font-size: 16px;
-    color: #666666;
+    font-size: 18px;
+    color: #00d4ff;
     font-family: 'Courier New', monospace;
+    font-weight: bold;
+  }
+
+  .exit-fullscreen-btn {
+    padding: 8px 16px;
+    border: 1px solid rgba(255, 107, 107, 0.5);
+    border-radius: 6px;
+    background: rgba(255, 107, 107, 0.2);
+    color: #ff6b6b;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: rgba(255, 107, 107, 0.3);
+      border-color: #ff6b6b;
+      box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
+    }
   }
 }
 
 .screen-body {
-  padding: 15px;
+  padding: 0;
 }
 
 .kpi-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 
   .kpi-card {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
+    background: linear-gradient(180deg, rgba(14, 40, 80, 0.9) 0%, rgba(10, 20, 40, 0.95) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.2);
     border-radius: 8px;
-    padding: 20px;
+    padding: 0;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 16px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
     border-left: 4px solid;
 
     &.warning {
-      border-left-color: #ff9800;
-      background: #fffbf0;
+      border-left-color: #ffd43b;
     }
 
     &.danger {
-      border-left-color: #f56c6c;
-      background: #fff5f5;
+      border-left-color: #ff6b6b;
     }
 
     &.success {
-      border-left-color: #52c41a;
-      background: #f0f9eb;
+      border-left-color: #00ff88;
     }
 
     &.info {
-      border-left-color: #4a90d9;
-      background: #f0f7ff;
+      border-left-color: #00d4ff;
+    }
+
+    .card-header {
+      background: linear-gradient(90deg, rgba(0, 168, 204, 0.8) 0%, rgba(0, 212, 255, 0.6) 100%);
+      padding: 10px 15px;
+      font-size: 14px;
+      font-weight: bold;
+      color: #0a1428;
+      letter-spacing: 2px;
+      width: 100%;
+      text-align: center;
     }
 
     .kpi-icon {
-      font-size: 36px;
+      font-size: 32px;
+      margin-top: 15px;
     }
 
-    .kpi-info {
-      flex: 1;
+    .kpi-value {
+      font-size: 36px;
+      font-weight: bold;
+      margin: 10px 0;
+      text-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
 
-      .kpi-title {
-        font-size: 14px;
-        color: #666666;
-        margin-bottom: 8px;
-      }
+      .warning & { color: #ffd43b; }
+      .danger & { color: #ff6b6b; }
+      .success & { color: #00ff88; }
+      .info & { color: #00d4ff; }
+    }
 
-      .kpi-value {
-        font-size: 28px;
-        font-weight: bold;
-        color: #333333;
-        margin-bottom: 4px;
-      }
-
-      .kpi-unit {
-        font-size: 12px;
-        color: #999999;
-      }
+    .kpi-unit {
+      font-size: 14px;
+      color: #a0c4e8;
+      margin-bottom: 15px;
     }
   }
 }
@@ -497,12 +576,14 @@ onUnmounted(() => {
   margin-bottom: 16px;
 
   .chart-box {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
+    background: linear-gradient(180deg, rgba(14, 40, 80, 0.85) 0%, rgba(10, 20, 40, 0.9) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.15);
     border-radius: 8px;
-    padding: 15px;
+    padding: 0;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 
     &.flex-1 {
       flex: 1;
@@ -512,26 +593,88 @@ onUnmounted(() => {
       flex: 2;
     }
 
-    .box-title {
+    .box-header {
+      background: linear-gradient(90deg, rgba(0, 168, 204, 0.8) 0%, rgba(0, 212, 255, 0.6) 100%);
+      padding: 12px 18px;
       font-size: 14px;
-      font-weight: 600;
-      color: #333333;
-      margin-bottom: 12px;
-      padding-left: 10px;
-      border-left: 3px solid #4a90d9;
+      font-weight: bold;
+      color: #0a1428;
+      letter-spacing: 2px;
+      border-bottom: 1px solid rgba(0, 212, 255, 0.3);
     }
 
     .chart {
       height: 280px;
       width: 100%;
+      padding: 15px;
     }
 
     .table-container {
       flex: 1;
+      padding: 15px;
     }
   }
 }
 
+:deep(.el-table) {
+  background: rgba(10, 20, 40, 0.8);
+  border: 1px solid rgba(0, 212, 255, 0.2);
+
+  .el-table__header-wrapper {
+    .el-table__header {
+      th {
+        background: rgba(0, 212, 255, 0.15);
+        color: #00d4ff;
+        font-weight: bold;
+        border-bottom: 1px solid rgba(0, 212, 255, 0.3);
+      }
+    }
+  }
+
+  .el-table__body-wrapper {
+    .el-table__body {
+      tr {
+        td {
+          color: #a0c4e8;
+          border-bottom: 1px solid rgba(0, 212, 255, 0.1);
+        }
+
+        &:nth-child(even) {
+          background: rgba(0, 212, 255, 0.05);
+        }
+
+        &:hover {
+          background: rgba(0, 212, 255, 0.1);
+        }
+      }
+    }
+  }
+}
+
+:deep(.el-tag) {
+  background: rgba(0, 212, 255, 0.15);
+  border-color: rgba(0, 212, 255, 0.3);
+  color: #00d4ff;
+
+  &.el-tag--success {
+    background: rgba(0, 255, 136, 0.15);
+    border-color: rgba(0, 255, 136, 0.3);
+    color: #00ff88;
+  }
+
+  &.el-tag--danger {
+    background: rgba(255, 107, 107, 0.15);
+    border-color: rgba(255, 107, 107, 0.3);
+    color: #ff6b6b;
+  }
+
+  &.el-tag--warning {
+    background: rgba(255, 212, 59, 0.15);
+    border-color: rgba(255, 212, 59, 0.3);
+    color: #ffd43b;
+  }
+}
+
 @media screen and (max-width: 1200px) {
   .kpi-grid {
     grid-template-columns: repeat(2, 1fr);
diff --git a/src/router/index.js b/src/router/index.js
index 8381e01..b3255c8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,15 +4,8 @@ export const constantRoutes = [
   {
     path: '/',
     component: () => import('@/layout/index.vue'),
-    redirect: '/index',
-    children: [
-      {
-        path: 'index',
-        name: 'Dashboard',
-        component: () => import('@/views/home/index.vue'),
-        meta: { title: '工作台', icon: 'dashboard' }
-      }
-    ]
+    redirect: '/dashboard/demo',
+    children: []
   },
   {
     path: '/dashboard',
@@ -43,6 +36,24 @@ export const constantRoutes = [
         component: () => import('@/modules/dashboardBig/views/energy.vue'),
         meta: { title: '能源大屏', icon: 'energy' }
       },
+      {
+        path: 'oee',
+        name: 'Oee',
+        component: () => import('@/modules/dashboardBig/views/oee.vue'),
+        meta: { title: 'OEE综合大屏', icon: 'oee' }
+      },
+      {
+        path: 'output',
+        name: 'Output',
+        component: () => import('@/modules/dashboardBig/views/output.vue'),
+        meta: { title: '产出监控大屏', icon: 'output' }
+      },
+      {
+        path: 'stop-analysis',
+        name: 'StopAnalysis',
+        component: () => import('@/modules/dashboardBig/views/stopAnalysis.vue'),
+        meta: { title: '停机分析大屏', icon: 'stop' }
+      },
       {
         path: 'acid-rolling',
         name: 'AcidRolling',
@@ -50,87 +61,6 @@ export const constantRoutes = [
         meta: { title: '酸轧数据大屏', icon: 'example' }
       }
     ]
-  },
-  {
-    path: '/screen-manage',
-    component: () => import('@/layout/index.vue'),
-    meta: { title: '大屏管理', icon: 'pie-chart' },
-    children: [
-      {
-        path: '',
-        name: 'ScreenList',
-        component: () => import('@/views/screens/list.vue'),
-        meta: { title: '大屏列表', icon: 'list' }
-      },
-      {
-        path: 'create',
-        name: 'ScreenCreate',
-        component: () => import('@/views/screens/create.vue'),
-        meta: { title: '新建大屏', icon: 'plus' }
-      },
-      {
-        path: 'edit/:id',
-        name: 'ScreenEdit',
-        component: () => import('@/views/screens/edit.vue'),
-        meta: { title: '编辑大屏', icon: 'edit', hidden: true }
-      }
-    ]
-  },
-  {
-    path: '/reports',
-    component: () => import('@/layout/index.vue'),
-    meta: { title: '报表管理', icon: 'document' },
-    children: [
-      {
-        path: '',
-        name: 'ReportList',
-        component: () => import('@/views/reports/index.vue'),
-        meta: { title: '报表列表', icon: 'list' }
-      },
-      {
-        path: 'acid-rolling',
-        name: 'AcidRollingReport',
-        component: () => import('@/views/reports/acid-rolling/index.vue'),
-        meta: { title: '酸轧产出报表', icon: 'output' }
-      },
-      {
-        path: 'acid-stop',
-        name: 'AcidStopReport',
-        component: () => import('@/views/reports/acid-stop/index.vue'),
-        meta: { title: '酸轧停机报表', icon: 'stop' }
-      }
-    ]
-  },
-  {
-    path: '/system',
-    component: () => import('@/layout/index.vue'),
-    meta: { title: '系统管理', icon: 'system' },
-    children: [
-      {
-        path: 'menu',
-        name: 'MenuManagement',
-        component: () => import('@/views/system/menu/index.vue'),
-        meta: { title: '菜单管理', icon: 'menu' }
-      },
-      {
-        path: 'config',
-        name: 'SystemConfig',
-        component: () => import('@/views/system/index.vue'),
-        meta: { title: '系统配置', icon: 'config' }
-      }
-    ]
-  },
-  {
-    path: '/data-source',
-    component: () => import('@/layout/index.vue'),
-    children: [
-      {
-        path: '',
-        name: 'DataSource',
-        component: () => import('@/views/data-source/index.vue'),
-        meta: { title: '数据源配置', icon: 'database' }
-      }
-    ]
   }
 ]
 
@@ -149,4 +79,4 @@ export function resetRouter() {
   router.matcher = newRouter.matcher
 }
 
-export default router
+export default router
\ No newline at end of file
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index 8c40370..bb720ac 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -16,7 +16,6 @@ const mutations = {
 const actions = {
   generateRoutes({ commit, state }) {
     return new Promise(resolve => {
-      // 避免重复加载
       if (state.addRoutes.length > 0) {
         resolve(state.addRoutes)
         return
@@ -34,11 +33,10 @@ const actions = {
   }
 }
 
-// 修复：Layout正常加载，空组件赋值首页
 function filterAsyncRoutes(routes) {
   return routes.filter(route => {
     if (!route.component || route.component === '') {
-      route.component = () => import('@/views/home/index.vue')
+      route.component = () => import('@/modules/dashboardBig/views/index.vue')
     } else if (route.component !== 'Layout') {
       route.component = loadComponent(route.component)
     }
@@ -50,11 +48,9 @@ function filterAsyncRoutes(routes) {
 }
 
 function loadComponent(componentPath) {
-  // 去除开头/和.vue后缀
   const path = componentPath.replace(/^\//, '').replace(/\.vue$/, '')
   const componentMap = {
     'Layout': () => import('@/layout/index.vue'),
-    'home/index': () => import('@/views/home/index.vue'),
     'modules/dashboardBig/views/index': () => import('@/modules/dashboardBig/views/index.vue'),
     'modules/dashboardBig/views/order': () => import('@/modules/dashboardBig/views/order.vue'),
     'modules/dashboardBig/views/cost': () => import('@/modules/dashboardBig/views/cost.vue'),
@@ -62,20 +58,9 @@ function loadComponent(componentPath) {
     'modules/dashboardBig/views/oee': () => import('@/modules/dashboardBig/views/oee.vue'),
     'modules/dashboardBig/views/output': () => import('@/modules/dashboardBig/views/output.vue'),
     'modules/dashboardBig/views/stopAnalysis': () => import('@/modules/dashboardBig/views/stopAnalysis.vue'),
-    'screens/list': () => import('@/views/screens/list.vue'),
-    'screens/create': () => import('@/views/screens/create.vue'),
-    'screens/edit': () => import('@/views/screens/edit.vue'),
-    'screens/acid-rolling/index': () => import('@/views/screens/acid-rolling/index.vue'),
-    'reports/index': () => import('@/views/reports/index.vue'),
-    'reports/acid-rolling/index': () => import('@/views/reports/acid-rolling/index.vue'),
-    'reports/acid-stop/index': () => import('@/views/reports/acid-stop/index.vue'),
-    'system/user/index': () => import('@/views/system/user/index.vue'),
-    'system/role/index': () => import('@/views/system/role/index.vue'),
-    'system/menu/index': () => import('@/views/system/menu/index.vue'),
-    'system/config/index': () => import('@/views/system/config/index.vue'),
-    'data-source/index': () => import('@/views/data-source/index.vue')
+    'screens/acid-rolling/index': () => import('@/views/screens/acid-rolling/index.vue')
   }
-  return componentMap[path] || (() => import('@/views/home/index.vue'))
+  return componentMap[path] || (() => import('@/modules/dashboardBig/views/index.vue'))
 }
 
 export default {
@@ -83,4 +68,4 @@ export default {
   state,
   mutations,
   actions
-}
\ No newline at end of file
+}
diff --git a/src/views/dashboard/cost/index.vue b/src/views/dashboard/cost/index.vue
deleted file mode 100644
index c3f577e..0000000
--- a/src/views/dashboard/cost/index.vue
+++ /dev/null
@@ -1,602 +0,0 @@
-<template>
-  <div class="screen-wrapper" ref="wrapperRef">
-    <div class="screen-content" :style="contentStyle" ref="contentRef">
-      <!-- 顶部标题 -->
-      <header class="screen-header">
-        <h1 class="title">成本分析大屏</h1>
-        <span class="time">{{ currentTime }}</span>
-      </header>
-
-      <!-- 主体区域 -->
-      <main class="screen-body">
-        <!-- 成本概览卡片 -->
-        <div class="card-grid">
-          <div class="data-card" v-for="card in costOverview" :key="card.title">
-            <div class="card-title">{{ card.title }}</div>
-            <div class="card-value" :style="{ color: card.color }">{{ card.value }}</div>
-            <div class="card-unit">{{ card.unit }}</div>
-            <div class="card-trend" :class="card.trend > 0 ? 'up' : 'down'">
-              {{ card.trend > 0 ? '↑' : '↓' }} {{ Math.abs(card.trend) }}%
-            </div>
-          </div>
-        </div>
-
-        <!-- 图表区域 -->
-        <div class="chart-area">
-          <div class="chart-box">
-            <div class="box-title">成本构成分析</div>
-            <div ref="pieChartRef" class="chart"></div>
-          </div>
-          <div class="chart-box">
-            <div class="box-title">月度成本趋势</div>
-            <div ref="lineChartRef" class="chart"></div>
-          </div>
-          <div class="chart-box">
-            <div class="box-title">成本类型分布</div>
-            <div ref="barChartRef" class="chart"></div>
-          </div>
-        </div>
-
-        <!-- 底部区域 -->
-        <div class="bottom-area">
-          <div class="bottom-box">
-            <div class="box-title">成本明细</div>
-            <el-table :data="costDetails" border size="small" max-height="250">
-              <el-table-column prop="item" label="成本项目" />
-              <el-table-column prop="budget" label="预算" align="right" />
-              <el-table-column prop="actual" label="实际" align="right" />
-              <el-table-column prop="diff" label="差异" align="right">
-                <template #default="scope">
-                  <span :style="{ color: scope.row.diff < 0 ? '#67c23a' : '#f56c6c' }">
-                    {{ scope.row.diff > 0 ? '+' : '' }}{{ scope.row.diff }}%
-                  </span>
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
-          <div class="bottom-box">
-            <div class="box-title">部门成本排名</div>
-            <div class="ranking-list">
-              <div class="ranking-item" v-for="(item, index) in deptRanking" :key="item.name">
-                <span class="rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</span>
-                <span class="name">{{ item.name }}</span>
-                <div class="bar-wrapper">
-                  <div class="bar-fill" :style="{ width: item.percent + '%', background: item.color }"></div>
-                </div>
-                <span class="value">{{ item.value }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="bottom-box">
-            <div class="box-title">成本预警</div>
-            <div class="alarm-list">
-              <div class="alarm-item" v-for="alarm in alarms" :key="alarm.time" :class="alarm.level">
-                <span class="alarm-icon">{{ alarm.icon }}</span>
-                <div class="alarm-content">
-                  <div class="alarm-title">{{ alarm.title }}</div>
-                  <div class="alarm-time">{{ alarm.time }}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
-import * as echarts from 'echarts'
-
-const currentTime = ref('')
-const pieChartRef = ref(null)
-const lineChartRef = ref(null)
-const barChartRef = ref(null)
-const wrapperRef = ref(null)
-const contentRef = ref(null)
-let pieChart = null
-let lineChart = null
-let barChart = null
-let timeInterval = null
-let resizeObserver = null
-
-// 大屏基准尺寸
-const BASE_WIDTH = 1920
-const BASE_HEIGHT = 1080
-
-// 缩放比例
-const scale = ref(1)
-
-// 计算内容样式
-const contentStyle = computed(() => ({
-  width: BASE_WIDTH + 'px',
-  height: BASE_HEIGHT + 'px',
-  transform: `scale(${scale.value})`,
-  transformOrigin: 'left top'
-}))
-
-// 计算缩放比例
-const calculateScale = () => {
-  if (!wrapperRef.value) return
-  
-  const wrapperWidth = wrapperRef.value.clientWidth
-  const wrapperHeight = wrapperRef.value.clientHeight
-  
-  // 取宽度和高度的最小缩放比例，确保完全显示
-  const scaleX = wrapperWidth / BASE_WIDTH
-  const scaleY = wrapperHeight / BASE_HEIGHT
-  scale.value = Math.min(scaleX, scaleY)
-  
-  // 重新调整图表大小
-  nextTick(() => {
-    pieChart?.resize()
-    lineChart?.resize()
-    barChart?.resize()
-  })
-}
-
-const costOverview = ref([
-  { title: '本月总成本', value: '1,568,000', unit: '元', color: '#f56c6c', trend: 3.2 },
-  { title: '单位成本', value: '2,850', unit: '元/吨', color: '#e6a23c', trend: -1.5 },
-  { title: '预算执行率', value: '96.8', unit: '%', color: '#67c23a', trend: 0.8 },
-  { title: '成本环比', value: '-2.3', unit: '%', color: '#409eff', trend: -2.3 }
-])
-
-const costDetails = ref([
-  { item: '原材料成本', budget: '1,000,000', actual: '985,000', diff: -1.5 },
-  { item: '人工成本', budget: '250,000', actual: '234,000', diff: -6.4 },
-  { item: '能源成本', budget: '180,000', actual: '189,000', diff: 5.0 },
-  { item: '设备折旧', budget: '120,000', actual: '115,000', diff: -4.2 },
-  { item: '维修费用', budget: '80,000', actual: '45,000', diff: -43.8 }
-])
-
-const deptRanking = ref([
-  { name: '生产部', value: '680,000', percent: 85, color: '#f56c6c' },
-  { name: '技术部', value: '320,000', percent: 40, color: '#e6a23c' },
-  { name: '质检部', value: '210,000', percent: 26, color: '#409eff' },
-  { name: '采购部', value: '185,000', percent: 23, color: '#67c23a' },
-  { name: '仓储部', value: '173,000', percent: 22, color: '#909399' }
-])
-
-const alarms = ref([
-  { icon: '🔴', title: '能源成本超预算5%', time: '15:30:00', level: 'danger' },
-  { icon: '⚠️', title: '原材料成本接近预算上限', time: '10:20:00', level: 'warning' },
-  { icon: '⚠️', title: '维修费用大幅低于预算', time: '09:15:00', level: 'success' }
-])
-
-const updateTime = () => {
-  currentTime.value = new Date().toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit'
-  })
-}
-
-const initCharts = () => {
-  if (pieChartRef.value) {
-    pieChart = echarts.init(pieChartRef.value)
-    pieChart.setOption({
-      tooltip: { trigger: 'item', formatter: '{b}: {c}万 ({d}%)' },
-      legend: { bottom: 10, textStyle: { color: '#999' } },
-      series: [{
-        type: 'pie',
-        radius: ['45%', '75%'],
-        center: ['50%', '45%'],
-        data: [
-          { value: 985, name: '原材料', itemStyle: { color: '#f56c6c' } },
-          { value: 234, name: '人工', itemStyle: { color: '#e6a23c' } },
-          { value: 189, name: '能源', itemStyle: { color: '#409eff' } },
-          { value: 115, name: '折旧', itemStyle: { color: '#67c23a' } },
-          { value: 45, name: '维修', itemStyle: { color: '#909399' } }
-        ],
-        label: { show: false }
-      }]
-    })
-  }
-
-  if (lineChartRef.value) {
-    lineChart = echarts.init(lineChartRef.value)
-    lineChart.setOption({
-      tooltip: { trigger: 'axis' },
-      legend: { data: ['实际', '预算'], bottom: 10, textStyle: { color: '#999' } },
-      grid: { top: 20, right: 20, bottom: 40, left: 50 },
-      xAxis: {
-        type: 'category',
-        data: ['1月', '2月', '3月', '4月', '5月', '6月'],
-        axisLine: { lineStyle: { color: '#2a3f5c' } },
-        axisLabel: { color: '#999' }
-      },
-      yAxis: {
-        type: 'value',
-        axisLine: { show: false },
-        splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
-        axisLabel: { color: '#999' }
-      },
-      series: [
-        {
-          name: '实际',
-          type: 'line',
-          smooth: true,
-          data: [1450, 1520, 1380, 1610, 1580, 1568],
-          lineStyle: { color: '#f56c6c', width: 2 },
-          itemStyle: { color: '#f56c6c' }
-        },
-        {
-          name: '预算',
-          type: 'line',
-          smooth: true,
-          data: [1500, 1500, 1500, 1500, 1500, 1500],
-          lineStyle: { color: '#67c23a', width: 2, type: 'dashed' },
-          itemStyle: { color: '#67c23a' }
-        }
-      ]
-    })
-  }
-
-  if (barChartRef.value) {
-    barChart = echarts.init(barChartRef.value)
-    barChart.setOption({
-      tooltip: { trigger: 'axis' },
-      grid: { top: 20, right: 20, bottom: 30, left: 50 },
-      xAxis: {
-        type: 'category',
-        data: ['原材料', '人工', '能源', '折旧', '维修'],
-        axisLine: { lineStyle: { color: '#2a3f5c' } },
-        axisLabel: { color: '#999' }
-      },
-      yAxis: {
-        type: 'value',
-        axisLine: { show: false },
-        splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
-        axisLabel: { color: '#999' }
-      },
-      series: [{
-        type: 'bar',
-        data: [985, 234, 189, 115, 45],
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#f56c6c' },
-            { offset: 1, color: '#e6a23c' }
-          ])
-        },
-        barWidth: '50%'
-      }]
-    })
-  }
-}
-
-onMounted(() => {
-  updateTime()
-  timeInterval = setInterval(updateTime, 1000)
-  
-  // 等DOM渲染完成后初始化图表和缩放
-  nextTick(() => {
-    initCharts()
-    calculateScale()
-    
-    // 使用 ResizeObserver 监听容器大小变化
-    if (wrapperRef.value && 'ResizeObserver' in window) {
-      resizeObserver = new ResizeObserver(() => {
-        calculateScale()
-      })
-      resizeObserver.observe(wrapperRef.value)
-    }
-  })
-})
-
-onUnmounted(() => {
-  if (timeInterval) clearInterval(timeInterval)
-  if (resizeObserver) resizeObserver.disconnect()
-  pieChart?.dispose()
-  lineChart?.dispose()
-  barChart?.dispose()
-})
-</script>
-
-<style lang="scss" scoped>
-.screen-wrapper {
-  width: 100%;
-  min-height: 500px;
-  background: #000;
-  overflow: hidden;
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  position: relative;
-}
-
-.screen-content {
-  background: linear-gradient(135deg, #1a1f4e 0%, #2d1b3d 100%);
-  color: #d3d6dd;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-}
-
-.screen-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px 30px;
-  flex-shrink: 0;
-
-  .title {
-    font-size: 24px;
-    font-weight: bold;
-    color: #fff;
-    text-shadow: 0 0 20px rgba(230, 162, 60, 0.8);
-    letter-spacing: 4px;
-    margin: 0;
-  }
-
-  .time {
-    font-size: 16px;
-    color: #e6a23c;
-    font-family: 'Courier New', monospace;
-  }
-}
-
-.screen-body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 0 15px 15px;
-  overflow: hidden;
-}
-
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 15px;
-  padding: 15px 0;
-  flex-shrink: 0;
-
-  .data-card {
-    background: rgba(19, 25, 47, 0.8);
-    border: 1px solid rgba(230, 162, 60, 0.3);
-    border-radius: 8px;
-    padding: 15px;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .card-title {
-      font-size: 14px;
-      color: #999;
-      margin-bottom: 8px;
-    }
-
-    .card-value {
-      font-size: 28px;
-      font-weight: bold;
-      margin-bottom: 4px;
-    }
-
-    .card-unit {
-      font-size: 12px;
-      color: #666;
-    }
-
-    .card-trend {
-      font-size: 12px;
-      margin-top: 6px;
-
-      &.up { color: #f56c6c; }
-      &.down { color: #67c23a; }
-    }
-  }
-}
-
-.chart-area {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 15px;
-  padding: 15px 0;
-  flex: 1;
-  min-height: 0;
-
-  .chart-box {
-    background: rgba(19, 25, 47, 0.8);
-    border: 1px solid rgba(230, 162, 60, 0.3);
-    border-radius: 8px;
-    padding: 12px;
-    display: flex;
-    flex-direction: column;
-
-    .box-title {
-      font-size: 14px;
-      color: #e6a23c;
-      margin-bottom: 12px;
-      padding-left: 8px;
-      border-left: 3px solid #e6a23c;
-    }
-
-    .chart {
-      flex: 1;
-      min-height: 200px;
-    }
-  }
-}
-
-.bottom-area {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 15px;
-  padding: 15px 0;
-  flex-shrink: 0;
-
-  .bottom-box {
-    background: rgba(19, 25, 47, 0.8);
-    border: 1px solid rgba(230, 162, 60, 0.3);
-    border-radius: 8px;
-    padding: 12px;
-    display: flex;
-    flex-direction: column;
-
-    .box-title {
-      font-size: 14px;
-      color: #e6a23c;
-      margin-bottom: 12px;
-      padding-left: 8px;
-      border-left: 3px solid #e6a23c;
-    }
-
-    :deep(.el-table) {
-      flex: 1;
-      font-size: 12px;
-
-      th, td {
-        padding: 8px 5px;
-      }
-    }
-  }
-
-  .ranking-list {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-
-    .ranking-item {
-      display: flex;
-      align-items: center;
-      padding: 8px 12px;
-      background: rgba(230, 162, 60, 0.1);
-      border-radius: 6px;
-
-      .rank {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 11px;
-        font-weight: bold;
-        margin-right: 10px;
-        background: rgba(255, 255, 255, 0.1);
-
-        &.rank-1 { background: linear-gradient(135deg, #ffd700, #ffb700); color: #fff; }
-        &.rank-2 { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); color: #fff; }
-        &.rank-3 { background: linear-gradient(135deg, #cd7f32, #b87333); color: #fff; }
-      }
-
-      .name {
-        width: 60px;
-        font-size: 13px;
-        color: #d3d6dd;
-      }
-
-      .bar-wrapper {
-        flex: 1;
-        height: 8px;
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 4px;
-        margin: 0 10px;
-        overflow: hidden;
-
-        .bar-fill {
-          height: 100%;
-          border-radius: 4px;
-          transition: width 0.5s ease;
-        }
-      }
-
-      .value {
-        font-size: 13px;
-        font-weight: bold;
-        color: #e6a23c;
-      }
-    }
-  }
-
-  .alarm-list {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-
-    .alarm-item {
-      display: flex;
-      align-items: center;
-      padding: 10px;
-      border-radius: 6px;
-      border-left: 4px solid;
-
-      &.danger {
-        background: rgba(245, 108, 108, 0.15);
-        border-color: #f56c6c;
-      }
-
-      &.warning {
-        background: rgba(230, 162, 60, 0.15);
-        border-color: #e6a23c;
-      }
-
-      &.success {
-        background: rgba(103, 194, 58, 0.15);
-        border-color: #67c23a;
-      }
-
-      .alarm-icon {
-        font-size: 16px;
-        margin-right: 10px;
-      }
-
-      .alarm-content {
-        flex: 1;
-
-        .alarm-title {
-          font-size: 13px;
-          color: #fff;
-          margin-bottom: 2px;
-        }
-
-        .alarm-time {
-          font-size: 11px;
-          color: #999;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 1200px) {
-  .card-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .chart-area,
-  .bottom-area {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .chart-area .chart-box:last-child,
-  .bottom-area .bottom-box:last-child {
-    grid-column: span 2;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .card-grid,
-  .chart-area,
-  .bottom-area {
-    grid-template-columns: 1fr;
-  }
-
-  .chart-area .chart-box:last-child,
-  .bottom-area .bottom-box:last-child {
-    grid-column: span 1;
-  }
-
-  .screen-header .title {
-    font-size: 18px;
-  }
-}
-</style>
diff --git a/src/views/dashboard/demo/index.vue b/src/views/dashboard/demo/index.vue
deleted file mode 100644
index 3537e6b..0000000
--- a/src/views/dashboard/demo/index.vue
+++ /dev/null
@@ -1,458 +0,0 @@
-<template>
-  <div class="dashboard-container">
-    <div class="dashboard-header">
-      <h2 class="dashboard-title">示例大屏</h2>
-      <div class="header-actions">
-        <el-button type="primary" @click="refreshData">
-          <el-icon><Refresh /></el-icon>
-          刷新数据
-        </el-button>
-        <el-button @click="toggleFullscreen">
-          <el-icon><FullScreen /></el-icon>
-          {{ isFullscreen ? '退出全屏' : '全屏' }}
-        </el-button>
-      </div>
-    </div>
-
-    <div class="dashboard-body">
-      <div class="stats-row">
-        <div class="stat-card" v-for="stat in stats" :key="stat.title">
-          <div class="stat-icon" :class="stat.iconClass">{{ stat.icon }}</div>
-          <div class="stat-info">
-            <div class="stat-value">{{ stat.value }}</div>
-            <div class="stat-title">{{ stat.title }}</div>
-            <div class="stat-trend" :class="stat.trend > 0 ? 'up' : 'down'">
-              {{ stat.trend > 0 ? '↑' : '↓' }} {{ Math.abs(stat.trend) }}%
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="charts-row">
-        <div class="chart-card">
-          <div class="chart-header">
-            <h3>数据趋势</h3>
-          </div>
-          <div ref="lineChart" class="chart-content"></div>
-        </div>
-
-        <div class="chart-card">
-          <div class="chart-header">
-            <h3>分类占比</h3>
-          </div>
-          <div ref="pieChart" class="chart-content"></div>
-        </div>
-
-        <div class="chart-card">
-          <div class="chart-header">
-            <h3>实时排名</h3>
-          </div>
-          <div class="ranking-list">
-            <div class="ranking-item" v-for="(item, index) in rankingData" :key="item.name">
-              <span class="rank-badge" :class="'rank-' + (index + 1)">{{ index + 1 }}</span>
-              <span class="rank-name">{{ item.name }}</span>
-              <span class="rank-value">{{ item.value }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="tables-row">
-        <div class="table-card">
-          <div class="table-header">
-            <h3>数据列表</h3>
-            <el-button link size="small">查看全部</el-button>
-          </div>
-          <el-table :data="tableData" border :height="280">
-            <el-table-column prop="name" label="名称" width="150" />
-            <el-table-column prop="value" label="数值" width="150" />
-            <el-table-column prop="status" label="状态">
-              <template #default="scope">
-                <el-tag :type="scope.row.status === '正常' ? 'success' : 'warning'">
-                  {{ scope.row.status }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column prop="time" label="时间" width="180" />
-            <el-table-column prop="action" label="操作" width="120">
-              <template #default>
-                <el-button link size="small">详情</el-button>
-                <el-button link size="small">编辑</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
-import { Refresh, FullScreen } from '@element-plus/icons-vue'
-import * as echarts from 'echarts'
-
-const isFullscreen = ref(false)
-const lineChart = ref(null)
-const pieChart = ref(null)
-let lineChartInstance = null
-let pieChartInstance = null
-
-const stats = [
-  { title: '总数据量', value: '128,543', icon: '📊', iconClass: 'icon-blue', trend: 12.5 },
-  { title: '处理完成', value: '98,341', icon: '✅', iconClass: 'icon-green', trend: 8.3 },
-  { title: '待处理', value: '30,202', icon: '⏳', iconClass: 'icon-orange', trend: -5.2 },
-  { title: '成功率', value: '98.7%', icon: '🎯', iconClass: 'icon-purple', trend: 2.1 }
-]
-
-const rankingData = [
-  { name: '数据中心A', value: '12,580' },
-  { name: '数据中心B', value: '10,320' },
-  { name: '数据中心C', value: '8,760' },
-  { name: '数据中心D', value: '7,450' },
-  { name: '数据中心E', value: '6,890' }
-]
-
-const tableData = [
-  { name: '订单数据', value: '12,345', status: '正常', time: '2024-01-15 10:30' },
-  { name: '用户数据', value: '8,765', status: '正常', time: '2024-01-15 10:28' },
-  { name: '日志数据', value: '45,678', status: '正常', time: '2024-01-15 10:25' },
-  { name: '设备数据', value: '3,210', status: '警告', time: '2024-01-15 10:20' },
-  { name: '系统数据', value: '15,890', status: '正常', time: '2024-01-15 10:15' },
-  { name: '监控数据', value: '22,456', status: '正常', time: '2024-01-15 10:10' },
-  { name: '告警数据', value: '1,234', status: '警告', time: '2024-01-15 10:05' },
-  { name: '报表数据', value: '5,678', status: '正常', time: '2024-01-15 10:00' }
-]
-
-const refreshData = () => {
-  console.log('刷新数据')
-}
-
-const toggleFullscreen = () => {
-  isFullscreen.value = !isFullscreen.value
-}
-
-const initCharts = () => {
-  if (lineChart.value) {
-    lineChartInstance = echarts.init(lineChart.value)
-    lineChartInstance.setOption({
-      tooltip: { trigger: 'axis' },
-      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
-      xAxis: {
-        type: 'category',
-        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
-      },
-      yAxis: { type: 'value' },
-      series: [{
-        name: '数据量',
-        type: 'line',
-        smooth: true,
-        data: [1200, 1320, 1010, 1340, 1900, 2300, 2200, 1800, 1900, 2300, 2900, 3300],
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
-            { offset: 1, color: 'rgba(64, 158, 255, 0.05)' }
-          ])
-        }
-      }]
-    })
-  }
-
-  if (pieChart.value) {
-    pieChartInstance = echarts.init(pieChart.value)
-    pieChartInstance.setOption({
-      tooltip: { trigger: 'item' },
-      legend: { orient: 'vertical', right: '5%', top: 'center' },
-      series: [{
-        type: 'pie',
-        radius: ['40%', '70%'],
-        center: ['35%', '50%'],
-        avoidLabelOverlap: false,
-        itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
-        label: { show: false, position: 'center' },
-        emphasis: {
-          label: { show: true, fontSize: 18, fontWeight: 'bold' }
-        },
-        labelLine: { show: false },
-        data: [
-          { value: 35, name: '类型A', itemStyle: { color: '#409EFF' } },
-          { value: 25, name: '类型B', itemStyle: { color: '#67C23A' } },
-          { value: 20, name: '类型C', itemStyle: { color: '#E6A23C' } },
-          { value: 15, name: '类型D', itemStyle: { color: '#F56C6C' } },
-          { value: 5, name: '其他', itemStyle: { color: '#909399' } }
-        ]
-      }]
-    })
-  }
-}
-
-const handleResize = () => {
-  lineChartInstance?.resize()
-  pieChartInstance?.resize()
-}
-
-onMounted(() => {
-  initCharts()
-  window.addEventListener('resize', handleResize)
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', handleResize)
-  if (lineChartInstance) {
-    lineChartInstance.dispose()
-    lineChartInstance = null
-  }
-  if (pieChartInstance) {
-    pieChartInstance.dispose()
-    pieChartInstance = null
-  }
-})
-
-onUnmounted(() => {
-  // 确保清理完成
-})
-</script>
-
-<style lang="scss" scoped>
-.dashboard-container {
-  width: 100%;
-  max-width: 1920px;
-  height: auto;
-  min-height: 500px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  padding: 0;
-  margin: 0 auto;
-}
-
-.dashboard-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-
-  .dashboard-title {
-    font-size: 18px;
-    font-weight: 600;
-    color: #303133;
-    margin: 0;
-  }
-
-  .header-actions {
-    display: flex;
-    gap: 10px;
-  }
-}
-
-.dashboard-body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  overflow: auto;
-}
-
-.stats-row {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
-}
-
-.stat-card {
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-  transition: all 0.3s ease;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-  }
-
-  .stat-icon {
-    width: 48px;
-    height: 48px;
-    border-radius: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-
-    &.icon-blue { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
-    &.icon-green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
-    &.icon-orange { background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%); }
-    &.icon-purple { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
-  }
-
-  .stat-info {
-    flex: 1;
-
-    .stat-value {
-      font-size: 24px;
-      font-weight: 600;
-      color: #303133;
-    }
-
-    .stat-title {
-      font-size: 13px;
-      color: #909399;
-      margin-top: 4px;
-    }
-
-    .stat-trend {
-      font-size: 12px;
-      margin-top: 4px;
-
-      &.up { color: #67C23A; }
-      &.down { color: #F56C6C; }
-    }
-  }
-}
-
-.charts-row {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 20px;
-}
-
-.chart-card {
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-  display: flex;
-  flex-direction: column;
-  min-height: 320px;
-
-  .chart-header {
-    margin-bottom: 15px;
-
-    h3 {
-      font-size: 14px;
-      font-weight: 600;
-      color: #303133;
-      margin: 0;
-    }
-  }
-
-  .chart-content {
-    flex: 1;
-    min-height: 250px;
-  }
-}
-
-.ranking-list {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding-top: 10px;
-
-  .ranking-item {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 10px 12px;
-    background: #f8f9fa;
-    border-radius: 6px;
-
-    .rank-badge {
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      font-weight: 600;
-      color: #fff;
-
-      &.rank-1 { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); }
-      &.rank-2 { background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%); }
-      &.rank-3 { background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%); }
-      &.rank-4, &.rank-5 { background: #909399; }
-    }
-
-    .rank-name {
-      flex: 1;
-      font-size: 13px;
-      color: #303133;
-    }
-
-    .rank-value {
-      font-size: 14px;
-      font-weight: 600;
-      color: #409EFF;
-    }
-  }
-}
-
-.tables-row {
-  flex: 1;
-  min-height: 350px;
-}
-
-.table-card {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  .table-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 15px 20px;
-    border-bottom: 1px solid #ebf0f5;
-
-    h3 {
-      font-size: 14px;
-      font-weight: 600;
-      color: #303133;
-      margin: 0;
-    }
-  }
-
-  :deep(.el-table) {
-    flex: 1;
-  }
-}
-
-@media screen and (max-width: 1200px) {
-  .stats-row {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .charts-row {
-    grid-template-columns: repeat(2, 1fr);
-
-    .chart-card:last-child {
-      grid-column: span 2;
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .stats-row {
-    grid-template-columns: 1fr;
-  }
-
-  .charts-row {
-    grid-template-columns: 1fr;
-
-    .chart-card:last-child {
-      grid-column: span 1;
-    }
-  }
-}
-</style>
diff --git a/src/views/dashboard/energy/index.vue b/src/views/dashboard/energy/index.vue
deleted file mode 100644
index 1f98070..0000000
--- a/src/views/dashboard/energy/index.vue
+++ /dev/null
@@ -1,644 +0,0 @@
-<template>
-  <div class="screen-wrapper" ref="wrapperRef">
-    <div class="screen-content" :style="contentStyle" ref="contentRef">
-      <!-- 顶部标题 -->
-      <header class="screen-header">
-        <h1 class="title">能源监控大屏</h1>
-        <span class="time">{{ currentTime }}</span>
-      </header>
-
-      <!-- 主体区域 -->
-      <main class="screen-body">
-        <!-- 能源概览卡片 -->
-        <div class="card-grid">
-          <div class="data-card" v-for="card in energyOverview" :key="card.title">
-            <div class="card-title">{{ card.title }}</div>
-            <div class="card-value" :style="{ color: card.color }">{{ card.value }}</div>
-            <div class="card-unit">{{ card.unit }}</div>
-            <div class="card-trend" :class="card.trend > 0 ? 'up' : 'down'">
-              {{ card.trend > 0 ? '↑' : '↓' }} {{ Math.abs(card.trend) }}%
-            </div>
-          </div>
-        </div>
-
-        <!-- 图表区域 -->
-        <div class="chart-area">
-          <div class="chart-box">
-            <div class="box-title">实时用电量</div>
-            <div ref="gaugeChartRef" class="chart"></div>
-          </div>
-          <div class="chart-box">
-            <div class="box-title">能源消耗趋势</div>
-            <div ref="lineChartRef" class="chart"></div>
-          </div>
-          <div class="chart-box">
-            <div class="box-title">能源类型分布</div>
-            <div ref="pieChartRef" class="chart"></div>
-          </div>
-        </div>
-
-        <!-- 底部区域 -->
-        <div class="bottom-area">
-          <div class="bottom-box">
-            <div class="box-title">设备能耗排名</div>
-            <div class="ranking-list">
-              <div class="ranking-item" v-for="(item, index) in equipmentRanking" :key="item.name">
-                <span class="rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</span>
-                <span class="name">{{ item.name }}</span>
-                <div class="bar-wrapper">
-                  <div class="bar-fill" :style="{ width: item.percent + '%', background: item.color }"></div>
-                </div>
-                <span class="value">{{ item.value }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="bottom-box">
-            <div class="box-title">生产班次能耗</div>
-            <div ref="barChartRef" class="chart"></div>
-          </div>
-          <div class="bottom-box">
-            <div class="box-title">实时告警</div>
-            <div class="alarm-list">
-              <div class="alarm-item" v-for="alarm in alarms" :key="alarm.time" :class="alarm.level">
-                <span class="alarm-icon">{{ alarm.icon }}</span>
-                <div class="alarm-content">
-                  <div class="alarm-title">{{ alarm.title }}</div>
-                  <div class="alarm-time">{{ alarm.time }}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
-import * as echarts from 'echarts'
-
-const currentTime = ref('')
-const gaugeChartRef = ref(null)
-const lineChartRef = ref(null)
-const pieChartRef = ref(null)
-const barChartRef = ref(null)
-const wrapperRef = ref(null)
-const contentRef = ref(null)
-let gaugeChart = null
-let lineChart = null
-let pieChart = null
-let barChart = null
-let timeInterval = null
-let resizeObserver = null
-
-// 大屏基准尺寸
-const BASE_WIDTH = 1920
-const BASE_HEIGHT = 1080
-
-// 缩放比例
-const scale = ref(1)
-
-// 计算内容样式
-const contentStyle = computed(() => ({
-  width: BASE_WIDTH + 'px',
-  height: BASE_HEIGHT + 'px',
-  transform: `scale(${scale.value})`,
-  transformOrigin: 'left top'
-}))
-
-// 计算缩放比例
-const calculateScale = () => {
-  if (!wrapperRef.value) return
-  
-  const wrapperWidth = wrapperRef.value.clientWidth
-  const wrapperHeight = wrapperRef.value.clientHeight
-  
-  // 取宽度和高度的最小缩放比例，确保完全显示
-  const scaleX = wrapperWidth / BASE_WIDTH
-  const scaleY = wrapperHeight / BASE_HEIGHT
-  scale.value = Math.min(scaleX, scaleY)
-  
-  // 重新调整图表大小
-  nextTick(() => {
-    gaugeChart?.resize()
-    lineChart?.resize()
-    pieChart?.resize()
-    barChart?.resize()
-  })
-}
-
-const energyOverview = ref([
-  { title: '今日用电', value: '25,600', unit: 'kWh', color: '#5cd9e8', trend: 5.2 },
-  { title: '今日用气', value: '1,850', unit: 'm³', color: '#33cea0', trend: -2.1 },
-  { title: '今日用水', value: '320', unit: 't', color: '#409eff', trend: 1.8 },
-  { title: '综合能耗', value: '38.5', unit: 'kgce/t', color: '#ff9800', trend: -3.5 }
-])
-
-const equipmentRanking = ref([
-  { name: '酸轧机组', value: '8,500', percent: 85, color: '#f56c6c' },
-  { name: '退火炉', value: '5,200', percent: 52, color: '#e6a23c' },
-  { name: '轧机', value: '4,800', percent: 48, color: '#409eff' },
-  { name: '卷取机', value: '3,100', percent: 31, color: '#67c23a' },
-  { name: '运输链', value: '2,400', percent: 24, color: '#909399' }
-])
-
-const alarms = ref([
-  { icon: '🔴', title: '用电负荷超限', time: '15:45:00', level: 'danger' },
-  { icon: '⚠️', title: '空压机效率下降', time: '12:30:00', level: 'warning' },
-  { icon: '✅', title: '能源回收系统正常', time: '10:00:00', level: 'success' }
-])
-
-const updateTime = () => {
-  currentTime.value = new Date().toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit'
-  })
-}
-
-const initCharts = () => {
-  if (gaugeChartRef.value) {
-    gaugeChart = echarts.init(gaugeChartRef.value)
-    gaugeChart.setOption({
-      series: [{
-        type: 'gauge',
-        startAngle: 200,
-        endAngle: -20,
-        min: 0,
-        max: 100,
-        splitNumber: 10,
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-            { offset: 0, color: '#67c23a' },
-            { offset: 0.5, color: '#e6a23c' },
-            { offset: 1, color: '#f56c6c' }
-          ])
-        },
-        progress: {
-          show: true,
-          width: 20
-        },
-        pointer: { show: false },
-        axisLine: {
-          lineStyle: { width: 20, color: [[1, 'rgba(255,255,255,0.1)']] }
-        },
-        axisTick: { show: false },
-        splitLine: { show: false },
-        axisLabel: { show: false },
-        anchor: { show: false },
-        title: { show: false },
-        detail: {
-          valueAnimation: true,
-          fontSize: 32,
-          color: '#5cd9e8',
-          offsetCenter: [0, '30%'],
-          formatter: '{value}%'
-        },
-        data: [{ value: 68 }]
-      }, {
-        type: 'gauge',
-        startAngle: 200,
-        endAngle: -20,
-        min: 0,
-        max: 100,
-        itemStyle: {
-          color: 'rgba(92, 217, 232, 0.2)'
-        },
-        progress: { show: false },
-        pointer: { show: false },
-        axisLine: { lineStyle: { width: 20, color: [[1, 'rgba(255,255,255,0.05)']] } },
-        axisTick: { show: false },
-        splitLine: { show: false },
-        axisLabel: { show: false },
-        anchor: { show: false },
-        title: { show: false },
-        detail: { show: false },
-        data: [{ value: 100 }]
-      }]
-    })
-  }
-
-  if (lineChartRef.value) {
-    lineChart = echarts.init(lineChartRef.value)
-    lineChart.setOption({
-      tooltip: { trigger: 'axis' },
-      legend: { data: ['用电', '用气'], bottom: 10, textStyle: { color: '#999' } },
-      grid: { top: 20, right: 20, bottom: 40, left: 50 },
-      xAxis: {
-        type: 'category',
-        data: ['1月', '2月', '3月', '4月', '5月', '6月'],
-        axisLine: { lineStyle: { color: '#2a3f5c' } },
-        axisLabel: { color: '#999' }
-      },
-      yAxis: {
-        type: 'value',
-        axisLine: { show: false },
-        splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
-        axisLabel: { color: '#999' }
-      },
-      series: [
-        {
-          name: '用电',
-          type: 'line',
-          smooth: true,
-          data: [620, 680, 650, 720, 780, 820],
-          areaStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(92, 217, 232, 0.3)' },
-              { offset: 1, color: 'rgba(92, 217, 232, 0.05)' }
-            ])
-          },
-          lineStyle: { color: '#5cd9e8', width: 2 },
-          itemStyle: { color: '#5cd9e8' }
-        },
-        {
-          name: '用气',
-          type: 'line',
-          smooth: true,
-          data: [45, 48, 46, 52, 55, 58],
-          lineStyle: { color: '#33cea0', width: 2 },
-          itemStyle: { color: '#33cea0' }
-        }
-      ]
-    })
-  }
-
-  if (pieChartRef.value) {
-    pieChart = echarts.init(pieChartRef.value)
-    pieChart.setOption({
-      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
-      legend: { bottom: 10, textStyle: { color: '#999' } },
-      series: [{
-        type: 'pie',
-        radius: ['45%', '75%'],
-        center: ['50%', '45%'],
-        data: [
-          { value: 65, name: '电能', itemStyle: { color: '#5cd9e8' } },
-          { value: 20, name: '天然气', itemStyle: { color: '#ff9800' } },
-          { value: 10, name: '水', itemStyle: { color: '#409eff' } },
-          { value: 5, name: '其他', itemStyle: { color: '#909399' } }
-        ],
-        label: { show: false }
-      }]
-    })
-  }
-
-  if (barChartRef.value) {
-    barChart = echarts.init(barChartRef.value)
-    barChart.setOption({
-      tooltip: { trigger: 'axis' },
-      grid: { top: 20, right: 20, bottom: 30, left: 50 },
-      xAxis: {
-        type: 'category',
-        data: ['早班', '中班', '晚班'],
-        axisLine: { lineStyle: { color: '#2a3f5c' } },
-        axisLabel: { color: '#999' }
-      },
-      yAxis: {
-        type: 'value',
-        axisLine: { show: false },
-        splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
-        axisLabel: { color: '#999' }
-      },
-      series: [{
-        type: 'bar',
-        data: [9800, 12500, 8500],
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#5cd9e8' },
-            { offset: 1, color: '#409eff' }
-          ])
-        },
-        barWidth: '50%'
-      }]
-    })
-  }
-}
-
-onMounted(() => {
-  updateTime()
-  timeInterval = setInterval(updateTime, 1000)
-  
-  // 等DOM渲染完成后初始化图表和缩放
-  nextTick(() => {
-    initCharts()
-    calculateScale()
-    
-    // 使用 ResizeObserver 监听容器大小变化
-    if (wrapperRef.value && 'ResizeObserver' in window) {
-      resizeObserver = new ResizeObserver(() => {
-        calculateScale()
-      })
-      resizeObserver.observe(wrapperRef.value)
-    }
-  })
-})
-
-onUnmounted(() => {
-  if (timeInterval) clearInterval(timeInterval)
-  if (resizeObserver) resizeObserver.disconnect()
-  gaugeChart?.dispose()
-  lineChart?.dispose()
-  pieChart?.dispose()
-  barChart?.dispose()
-})
-</script>
-
-<style lang="scss" scoped>
-.screen-wrapper {
-  width: 100%;
-  min-height: 500px;
-  background: #000;
-  overflow: hidden;
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  position: relative;
-}
-
-.screen-content {
-  background: linear-gradient(135deg, #0d2616 0%, #1a3a2d 100%);
-  color: #d3d6dd;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-}
-
-.screen-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px 30px;
-  flex-shrink: 0;
-
-  .title {
-    font-size: 24px;
-    font-weight: bold;
-    color: #fff;
-    text-shadow: 0 0 20px rgba(92, 217, 232, 0.8);
-    letter-spacing: 4px;
-    margin: 0;
-  }
-
-  .time {
-    font-size: 16px;
-    color: #5cd9e8;
-    font-family: 'Courier New', monospace;
-  }
-}
-
-.screen-body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 0 15px 15px;
-  overflow: hidden;
-}
-
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 15px;
-  padding: 15px 0;
-  flex-shrink: 0;
-
-  .data-card {
-    background: rgba(19, 25, 47, 0.8);
-    border: 1px solid rgba(92, 217, 232, 0.3);
-    border-radius: 8px;
-    padding: 15px;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .card-title {
-      font-size: 14px;
-      color: #999;
-      margin-bottom: 8px;
-    }
-
-    .card-value {
-      font-size: 28px;
-      font-weight: bold;
-      margin-bottom: 4px;
-    }
-
-    .card-unit {
-      font-size: 12px;
-      color: #666;
-    }
-
-    .card-trend {
-      font-size: 12px;
-      margin-top: 6px;
-
-      &.up { color: #f56c6c; }
-      &.down { color: #67c23a; }
-    }
-  }
-}
-
-.chart-area {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 15px;
-  padding: 15px 0;
-  flex: 1;
-  min-height: 0;
-
-  .chart-box {
-    background: rgba(19, 25, 47, 0.8);
-    border: 1px solid rgba(92, 217, 232, 0.3);
-    border-radius: 8px;
-    padding: 12px;
-    display: flex;
-    flex-direction: column;
-
-    .box-title {
-      font-size: 14px;
-      color: #5cd9e8;
-      margin-bottom: 12px;
-      padding-left: 8px;
-      border-left: 3px solid #5cd9e8;
-    }
-
-    .chart {
-      flex: 1;
-      min-height: 200px;
-    }
-  }
-}
-
-.bottom-area {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 15px;
-  padding: 15px 0;
-  flex-shrink: 0;
-
-  .bottom-box {
-    background: rgba(19, 25, 47, 0.8);
-    border: 1px solid rgba(92, 217, 232, 0.3);
-    border-radius: 8px;
-    padding: 12px;
-    display: flex;
-    flex-direction: column;
-
-    .box-title {
-      font-size: 14px;
-      color: #5cd9e8;
-      margin-bottom: 12px;
-      padding-left: 8px;
-      border-left: 3px solid #5cd9e8;
-    }
-  }
-
-  .ranking-list {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-
-    .ranking-item {
-      display: flex;
-      align-items: center;
-      padding: 8px 12px;
-      background: rgba(92, 217, 232, 0.1);
-      border-radius: 6px;
-
-      .rank {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 11px;
-        font-weight: bold;
-        margin-right: 10px;
-        background: rgba(255, 255, 255, 0.1);
-
-        &.rank-1 { background: linear-gradient(135deg, #ffd700, #ffb700); color: #fff; }
-        &.rank-2 { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); color: #fff; }
-        &.rank-3 { background: linear-gradient(135deg, #cd7f32, #b87333); color: #fff; }
-      }
-
-      .name {
-        width: 60px;
-        font-size: 13px;
-        color: #d3d6dd;
-      }
-
-      .bar-wrapper {
-        flex: 1;
-        height: 8px;
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 4px;
-        margin: 0 10px;
-        overflow: hidden;
-
-        .bar-fill {
-          height: 100%;
-          border-radius: 4px;
-          transition: width 0.5s ease;
-        }
-      }
-
-      .value {
-        font-size: 13px;
-        font-weight: bold;
-        color: #5cd9e8;
-      }
-    }
-  }
-
-  .alarm-list {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-
-    .alarm-item {
-      display: flex;
-      align-items: center;
-      padding: 10px;
-      border-radius: 6px;
-      border-left: 4px solid;
-
-      &.danger {
-        background: rgba(245, 108, 108, 0.15);
-        border-color: #f56c6c;
-      }
-
-      &.warning {
-        background: rgba(230, 162, 60, 0.15);
-        border-color: #e6a23c;
-      }
-
-      &.success {
-        background: rgba(103, 194, 58, 0.15);
-        border-color: #67c23a;
-      }
-
-      .alarm-icon {
-        font-size: 16px;
-        margin-right: 10px;
-      }
-
-      .alarm-content {
-        flex: 1;
-
-        .alarm-title {
-          font-size: 13px;
-          color: #fff;
-          margin-bottom: 2px;
-        }
-
-        .alarm-time {
-          font-size: 11px;
-          color: #999;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 1200px) {
-  .card-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .chart-area,
-  .bottom-area {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .chart-area .chart-box:last-child,
-  .bottom-area .bottom-box:last-child {
-    grid-column: span 2;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .card-grid,
-  .chart-area,
-  .bottom-area {
-    grid-template-columns: 1fr;
-  }
-
-  .chart-area .chart-box:last-child,
-  .bottom-area .bottom-box:last-child {
-    grid-column: span 1;
-  }
-
-  .screen-header .title {
-    font-size: 18px;
-  }
-}
-</style>
diff --git a/src/views/dashboard/order/index.vue b/src/views/dashboard/order/index.vue
deleted file mode 100644
index f5575c5..0000000
--- a/src/views/dashboard/order/index.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div class="order-dashboard-page">
-    <!-- 顶部面包屑+筛选区 对齐参考界面 -->
-    <div class="page-header">
-      <div class="breadcrumb">首页 / 数据大屏 / 订单大屏</div>
-      <div class="filter-bar">
-        <el-button type="primary" icon="Refresh">刷新数据</el-button>
-      </div>
-    </div>
-
-    <!-- 主体内容区 自适应全屏 -->
-    <el-card class="content-card" shadow="hover">
-      <template #header>
-        <div class="card-title">订单大屏</div>
-      </template>
-
-      <div class="table-box">
-        <el-table :data="tableData" border stripe style="width: 100%">
-          <el-table-column prop="orderNo" label="订单号" min-width="120" />
-          <el-table-column prop="customer" label="客户" min-width="150" />
-          <el-table-column prop="amount" label="金额(元)" min-width="120" />
-          <el-table-column prop="status" label="状态" min-width="100">
-            <template #default="scope">
-              <el-tag :type="scope.row.status === '生产中' ? 'primary' : scope.row.status === '已完成' ? 'success' : 'warning'">
-                {{ scope.row.status }}
-              </el-tag>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </el-card>
-  </div>
-</template>
-
-<script setup>
-const tableData = [
-  { orderNo: 'ORD001', customer: '客户A', amount: '10000', status: '生产中' },
-  { orderNo: 'ORD002', customer: '客户B', amount: '20000', status: '已完成' },
-  { orderNo: 'ORD003', customer: '客户C', amount: '15000', status: '待生产' }
-]
-</script>
-
-<style lang="scss" scoped>
-.order-dashboard-page {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-
-  // 顶部区域
-  .page-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
-    padding: 0 4px;
-
-    .breadcrumb {
-      font-size: 14px;
-      color: #606266;
-    }
-  }
-
-  // 卡片容器 自适应全屏
-  .content-card {
-    width: 100%;
-    box-sizing: border-box;
-
-    .card-title {
-      font-size: 16px;
-      font-weight: 500;
-    }
-
-    .table-box {
-      width: 100%;
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/data-source/index.vue b/src/views/data-source/index.vue
deleted file mode 100644
index fab3c97..0000000
--- a/src/views/data-source/index.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <div class="data-source-container">
-    <div class="toolbar">
-      <el-button type="primary" icon="Plus">添加数据源</el-button>
-      <el-button type="success" icon="Refresh">测试连接</el-button>
-    </div>
-    
-    <div class="data-source-list">
-      <el-table :data="dataSources" border>
-        <el-table-column prop="name" label="数据源名称" width="180" />
-        <el-table-column prop="type" label="类型" width="120">
-          <template #default="scope">
-            <el-tag :type="scope.row.type === 'klpl3' ? 'primary' : 'info'">
-              {{ scope.row.type === 'klpl3' ? 'KLPL3接口' : '数据库' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="host" label="地址" width="250" />
-        <el-table-column prop="port" label="端口" width="100" />
-        <el-table-column prop="database" label="数据库/接口" width="150" />
-        <el-table-column prop="status" label="连接状态" width="120">
-          <template #default="scope">
-            <el-badge :value="scope.row.status === 'connected' ? '已连接' : '未连接'" :type="scope.row.status === 'connected' ? 'success' : 'danger'" />
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="200">
-          <template #default="scope">
-            <el-button size="small" icon="DataAnalysis">配置</el-button>
-            <el-button size="small" icon="Refresh">测试</el-button>
-            <el-button size="small" icon="Delete" type="danger">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const dataSources = ref([
-  { id: 1, name: 'KLPL3主接口', type: 'klpl3', host: 'http://klpl3.kailaisi.com', port: '8080', database: '/api/v1', status: 'connected' },
-  { id: 2, name: '生产数据库', type: 'database', host: '192.168.1.100', port: '3306', database: 'production_db', status: 'connected' },
-  { id: 3, name: '报表数据库', type: 'database', host: '192.168.1.101', port: '5432', database: 'report_db', status: 'connected' },
-  { id: 4, name: 'KLPL3备用接口', type: 'klpl3', host: 'http://klpl3-backup.kailaisi.com', port: '8080', database: '/api/v1', status: 'disconnected' }
-])
-</script>
-
-<style lang="scss" scoped>
-.data-source-container {
-  padding: 20px;
-}
-
-.toolbar {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-.data-source-list {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-}
-
-:deep(.el-table) {
-  --el-table-header-text-color: #606266;
-  --el-table-row-hover-bg-color: #f5f7fa;
-}
-</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
deleted file mode 100644
index 27083a0..0000000
--- a/src/views/home/index.vue
+++ /dev/null
@@ -1,278 +0,0 @@
-<template>
-  <div class="home-container">
-    <div class="stats-grid">
-      <div class="stat-card">
-        <div class="stat-icon blue">📊</div>
-        <div class="stat-info">
-          <span class="stat-value">{{ stats.totalScreens }}</span>
-          <span class="stat-label">大屏总数</span>
-        </div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-icon green">📈</div>
-        <div class="stat-info">
-          <span class="stat-value">{{ stats.activeScreens }}</span>
-          <span class="stat-label">运行中</span>
-        </div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-icon orange">📁</div>
-        <div class="stat-info">
-          <span class="stat-value">{{ stats.totalReports }}</span>
-          <span class="stat-label">报表数量</span>
-        </div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-icon purple">🔄</div>
-        <div class="stat-info">
-          <span class="stat-value">{{ stats.dataSources }}</span>
-          <span class="stat-label">数据源数</span>
-        </div>
-      </div>
-    </div>
-    
-    <div class="charts-row">
-      <div class="chart-card">
-        <h3 class="chart-title">大屏类型分布</h3>
-        <div ref="typeChartRef" class="chart"></div>
-      </div>
-      <div class="chart-card">
-        <h3 class="chart-title">数据更新趋势</h3>
-        <div ref="trendChartRef" class="chart"></div>
-      </div>
-    </div>
-    
-    <div class="recent-activity">
-      <h3 class="activity-title">最近活动</h3>
-      <el-table :data="recentActivities" border>
-        <el-table-column prop="time" label="时间" width="180" />
-        <el-table-column prop="action" label="操作" width="200" />
-        <el-table-column prop="user" label="操作人" width="120" />
-        <el-table-column prop="status" label="状态">
-          <template #default="scope">
-            <el-tag :type="scope.row.status === '成功' ? 'success' : 'warning'">
-              {{ scope.row.status }}
-            </el-tag>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, nextTick } from 'vue'
-import * as echarts from 'echarts'
-
-const stats = ref({
-  totalScreens: 24,
-  activeScreens: 18,
-  totalReports: 156,
-  dataSources: 8
-})
-
-const recentActivities = ref([
-  { time: '2026-05-14 14:30', action: '创建酸轧数据大屏', user: '管理员', status: '成功' },
-  { time: '2026-05-14 14:25', action: '更新报表配置', user: '张三', status: '成功' },
-  { time: '2026-05-14 13:45', action: '同步数据源', user: '管理员', status: '成功' },
-  { time: '2026-05-14 10:20', action: '删除过期大屏', user: '李四', status: '成功' },
-  { time: '2026-05-14 09:15', action: '配置新数据源', user: '管理员', status: '成功' }
-])
-
-const typeChartRef = ref(null)
-const trendChartRef = ref(null)
-
-const initCharts = () => {
-  if (typeChartRef.value) {
-    const typeChart = echarts.init(typeChartRef.value)
-    typeChart.setOption({
-      tooltip: {
-        trigger: 'item'
-      },
-      legend: {
-        orient: 'vertical',
-        right: '5%',
-        top: 'center'
-      },
-      series: [
-        {
-          name: '大屏类型',
-          type: 'pie',
-          radius: ['40%', '70%'],
-          center: ['35%', '50%'],
-          avoidLabelOverlap: false,
-          itemStyle: {
-            borderRadius: 10,
-            borderColor: '#fff',
-            borderWidth: 2
-          },
-          label: {
-            show: false,
-            position: 'center'
-          },
-          emphasis: {
-            label: {
-              show: true,
-              fontSize: 20,
-              fontWeight: 'bold'
-            }
-          },
-          labelLine: {
-            show: false
-          },
-          data: [
-            { value: 8, name: '生产监控' },
-            { value: 6, name: '数据分析' },
-            { value: 5, name: '实时报表' },
-            { value: 3, name: '设备管理' },
-            { value: 2, name: '其他' }
-          ]
-        }
-      ]
-    })
-  }
-  
-  if (trendChartRef.value) {
-    const trendChart = echarts.init(trendChartRef.value)
-    trendChart.setOption({
-      tooltip: {
-        trigger: 'axis'
-      },
-      grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true
-      },
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        data: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00']
-      },
-      yAxis: {
-        type: 'value'
-      },
-      series: [
-        {
-          name: '数据更新',
-          type: 'line',
-          smooth: true,
-          data: [120, 132, 101, 134, 190, 230, 210],
-          areaStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
-              { offset: 1, color: 'rgba(64, 158, 255, 0.05)' }
-            ])
-          }
-        }
-      ]
-    })
-  }
-}
-
-onMounted(() => {
-  nextTick(() => {
-    initCharts()
-    window.addEventListener('resize', initCharts)
-  })
-})
-</script>
-
-<style lang="scss" scoped>
-.home-container {
-  padding: 20px;
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-.stat-card {
-  background: #fff;
-  border-radius: 12px;
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-}
-
-.stat-icon {
-  width: 56px;
-  height: 56px;
-  border-radius: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  margin-right: 16px;
-  
-  &.blue { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
-  &.green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
-  &.orange { background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%); }
-  &.purple { background: linear-gradient(135deg, #434343 0%, #000000 100%); }
-}
-
-.stat-info {
-  display: flex;
-  flex-direction: column;
-  
-  .stat-value {
-    font-size: 28px;
-    font-weight: bold;
-    color: #303133;
-  }
-  
-  .stat-label {
-    font-size: 14px;
-    color: #909399;
-    margin-top: 4px;
-  }
-}
-
-.charts-row {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-.chart-card {
-  background: #fff;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-}
-
-.chart-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #303133;
-  margin-bottom: 16px;
-}
-
-.chart {
-  height: 260px;
-}
-
-.recent-activity {
-  background: #fff;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-}
-
-.activity-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #303133;
-  margin-bottom: 16px;
-}
-
-:deep(.el-table) {
-  --el-table-header-text-color: #606266;
-  --el-table-row-hover-bg-color: #f5f7fa;
-}
-</style>
diff --git a/src/views/reports/acid-rolling/index.vue b/src/views/reports/acid-rolling/index.vue
deleted file mode 100644
index a23441a..0000000
--- a/src/views/reports/acid-rolling/index.vue
+++ /dev/null
@@ -1,332 +0,0 @@
-<template>
-  <div class="report-container">
-    <div class="query-form">
-      <el-form :model="queryForm" inline>
-        <el-form-item label="开始时间">
-          <el-date-picker
-            v-model="queryForm.startTime"
-            type="datetime"
-            placeholder="选择开始时间"
-          />
-        </el-form-item>
-        <el-form-item label="结束时间">
-          <el-date-picker
-            v-model="queryForm.endTime"
-            type="datetime"
-            placeholder="选择结束时间"
-          />
-        </el-form-item>
-        <el-form-item label="入场钢卷号">
-          <el-input v-model="queryForm.batchNo" placeholder="请输入入场钢卷号" />
-        </el-form-item>
-        <el-form-item label="当前钢卷号">
-          <el-input v-model="queryForm.currentNo" placeholder="请输入当前钢卷号" />
-        </el-form-item>
-        <el-form-item label="逻辑库位">
-          <el-select v-model="queryForm.warehouse" placeholder="请选择逻辑库位">
-            <el-option label="酸轧成品库" value="acid-rolling" />
-            <el-option label="原料库" value="raw-material" />
-            <el-option label="成品库" value="finished" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="产品名称">
-          <el-input v-model="queryForm.productName" placeholder="请输入产品名称" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
-          <el-button type="success" icon="Download">导出</el-button>
-          <el-button type="default" icon="Settings">列设置</el-button>
-          <el-button type="primary" icon="Save">保存产出报表</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <div class="summary-section">
-      <h3 class="section-title">统计信息</h3>
-      <div class="summary-cards">
-        <div class="summary-card">
-          <span class="summary-label">总钢卷数量</span>
-          <span class="summary-value">{{ summaryData.totalQuantity }}</span>
-        </div>
-        <div class="summary-card">
-          <span class="summary-label">总重量</span>
-          <span class="summary-value">{{ summaryData.totalWeight }}t</span>
-        </div>
-        <div class="summary-card">
-          <span class="summary-label">均重</span>
-          <span class="summary-value">{{ summaryData.avgWeight }}t</span>
-        </div>
-      </div>
-    </div>
-
-    <div class="table-section">
-      <div class="table-header">
-        <h3 class="section-title">明细信息</h3>
-        <div class="table-tools">
-          <el-input v-model="searchKeyword" placeholder="输入关键词筛选" style="width: 200px;" />
-          <el-select v-model="filterField" placeholder="选择筛选字段">
-            <el-option label="入场钢卷号" value="batchNo" />
-            <el-option label="当前钢卷号" value="coilNo" />
-            <el-option label="产品类型" value="productType" />
-          </el-select>
-          <el-select v-model="sortField" placeholder="选择排序字段">
-            <el-option label="生产时间" value="productionTime" />
-            <el-option label="重量" value="weight" />
-          </el-select>
-          <el-select v-model="sortOrder" placeholder="排序方式">
-            <el-option label="升序" value="asc" />
-            <el-option label="降序" value="desc" />
-          </el-select>
-          <span class="page-info">共 {{ filteredData.length }} 条</span>
-          <el-select v-model="pageSize" placeholder="每页条数">
-            <el-option label="10" :value="10" />
-            <el-option label="20" :value="20" />
-            <el-option label="50" :value="50" />
-            <el-option label="1000" :value="1000" />
-          </el-select>
-        </div>
-      </div>
-      <el-table :data="displayData" border :height="400">
-        <el-table-column prop="batchNo" label="入场钢卷号" width="160" />
-        <el-table-column prop="coilNo" label="当前钢卷号" width="160" />
-        <el-table-column prop="productionTime" label="生产时间" width="180" />
-        <el-table-column prop="warehouse" label="逻辑库区" width="120" />
-        <el-table-column prop="qualityStatus" label="质量状态" width="100">
-          <template #default="scope">
-            <el-tag :type="scope.row.qualityStatus === '合格' ? 'success' : 'danger'">
-              {{ scope.row.qualityStatus }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="productType" label="产品类型" width="120" />
-        <el-table-column prop="width" label="宽度" width="100" />
-        <el-table-column prop="thickness" label="厚度" width="100" />
-        <el-table-column prop="weight" label="重量" width="100" />
-        <el-table-column prop="length" label="长度" width="100" />
-        <el-table-column prop="stockStatus" label="在库状态" width="100">
-          <template #default="scope">
-            <el-tag :type="scope.row.stockStatus === '在库' ? 'success' : 'warning'">
-              {{ scope.row.stockStatus }}
-            </el-tag>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination
-        :current-page="currentPage"
-        :page-size="pageSize"
-        :total="filteredData.length"
-        layout="prev, pager, next, jumper"
-        @current-change="handlePageChange"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import { getAcidOutputReport } from '@/api/screen'
-
-const queryForm = ref({
-  startTime: '',
-  endTime: '',
-  batchNo: '',
-  currentNo: '',
-  warehouse: '',
-  productName: '',
-  spec: '',
-  material: '',
-  factory: ''
-})
-
-const summaryData = ref({
-  totalQuantity: 0,
-  totalWeight: 0.00,
-  avgWeight: 0
-})
-
-const searchKeyword = ref('')
-const filterField = ref('')
-const sortField = ref('productionTime')
-const sortOrder = ref('desc')
-const pageSize = ref(10)
-const currentPage = ref(1)
-
-const productionData = ref([])
-
-const loadData = async () => {
-  try {
-    const response = await getAcidOutputReport(queryForm.value)
-    if (response && response.data) {
-      const data = response.data
-      if (data.summary) {
-        summaryData.value = data.summary
-      }
-      if (data.details) {
-        productionData.value = data.details
-      }
-    }
-  } catch (error) {
-    console.error('加载数据失败:', error)
-    loadMockData()
-  }
-}
-
-const loadMockData = () => {
-  productionData.value = [
-    { batchNo: 'B20260514001', coilNo: 'C20260514001', productionTime: '2026-05-14 08:30:00', warehouse: '酸轧成品库', qualityStatus: '合格', productType: 'SPHC', width: '1250mm', thickness: '2.0mm', weight: '6.85', length: '12500mm', stockStatus: '在库' },
-    { batchNo: 'B20260514002', coilNo: 'C20260514002', productionTime: '2026-05-14 09:15:00', warehouse: '酸轧成品库', qualityStatus: '合格', productType: 'SPHD', width: '1500mm', thickness: '1.8mm', weight: '7.23', length: '14500mm', stockStatus: '在库' },
-    { batchNo: 'B20260514003', coilNo: 'C20260514003', productionTime: '2026-05-14 10:00:00', warehouse: '酸轧成品库', qualityStatus: '合格', productType: 'SPHE', width: '1000mm', thickness: '2.5mm', weight: '6.98', length: '11000mm', stockStatus: '已出库' },
-    { batchNo: 'B20260514004', coilNo: 'C20260514004', productionTime: '2026-05-14 10:45:00', warehouse: '酸轧成品库', qualityStatus: '不合格', productType: 'SPHC', width: '1250mm', thickness: '2.0mm', weight: '7.12', length: '12800mm', stockStatus: '待处理' },
-    { batchNo: 'B20260514005', coilNo: 'C20260514005', productionTime: '2026-05-14 11:30:00', warehouse: '酸轧成品库', qualityStatus: '合格', productType: 'SPHD', width: '1500mm', thickness: '1.6mm', weight: '6.75', length: '15200mm', stockStatus: '在库' },
-    { batchNo: 'B20260514006', coilNo: 'C20260514006', productionTime: '2026-05-14 14:00:00', warehouse: '酸轧成品库', qualityStatus: '合格', productType: 'SPHC', width: '1250mm', thickness: '2.2mm', weight: '7.35', length: '11800mm', stockStatus: '在库' }
-  ]
-  
-  summaryData.value = {
-    totalQuantity: productionData.value.length,
-    totalWeight: productionData.value.reduce((sum, item) => sum + parseFloat(item.weight), 0).toFixed(2),
-    avgWeight: (productionData.value.reduce((sum, item) => sum + parseFloat(item.weight), 0) / productionData.value.length).toFixed(2)
-  }
-}
-
-const filteredData = computed(() => {
-  let data = [...productionData.value]
-  
-  if (searchKeyword.value && filterField.value) {
-    data = data.filter(item => 
-      String(item[filterField.value])?.includes(searchKeyword.value)
-    )
-  }
-  
-  data.sort((a, b) => {
-    const aVal = String(a[sortField.value])
-    const bVal = String(b[sortField.value])
-    if (sortOrder.value === 'asc') {
-      return aVal > bVal ? 1 : -1
-    }
-    return aVal < bVal ? 1 : -1
-  })
-  
-  return data
-})
-
-const displayData = computed(() => {
-  const start = (currentPage.value - 1) * pageSize.value
-  return filteredData.value.slice(start, start + pageSize.value)
-})
-
-const handleSearch = () => {
-  currentPage.value = 1
-  loadData()
-}
-
-const handlePageChange = (page) => {
-  currentPage.value = page
-}
-
-onMounted(() => {
-  loadData()
-})
-</script>
-
-<style lang="scss" scoped>
-.report-container {
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.query-form {
-  padding: 16px;
-  background: #fafafa;
-  border-radius: 8px;
-  margin-bottom: 20px;
-  
-  :deep(.el-form-item) {
-    margin-bottom: 12px;
-  }
-  
-  :deep(.el-input), :deep(.el-select) {
-    width: 180px;
-  }
-}
-
-.summary-section {
-  margin-bottom: 20px;
-}
-
-.section-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #303133;
-  margin-bottom: 12px;
-  padding-left: 12px;
-  border-left: 3px solid #4a90d9;
-}
-
-.summary-cards {
-  display: flex;
-  gap: 16px;
-}
-
-.summary-card {
-  flex: 1;
-  background: #fafafa;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  padding: 20px;
-  text-align: center;
-  
-  .summary-label {
-    display: block;
-    font-size: 14px;
-    color: #666;
-    margin-bottom: 8px;
-  }
-  
-  .summary-value {
-    font-size: 28px;
-    font-weight: bold;
-    color: #333;
-  }
-}
-
-.table-section {
-  background: #fff;
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-}
-
-.table-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px;
-  border-bottom: 1px solid #e4e7ed;
-}
-
-.table-tools {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  
-  :deep(.el-input), :deep(.el-select) {
-    width: 150px;
-  }
-}
-
-.page-info {
-  font-size: 14px;
-  color: #606266;
-}
-
-:deep(.el-table) {
-  --el-table-header-text-color: #606266;
-  --el-table-row-hover-bg-color: #f5f7fa;
-}
-
-:deep(.el-pagination) {
-  padding: 16px;
-  border-top: 1px solid #e4e7ed;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/reports/acid-stop/index.vue b/src/views/reports/acid-stop/index.vue
deleted file mode 100644
index f44464b..0000000
--- a/src/views/reports/acid-stop/index.vue
+++ /dev/null
@@ -1,308 +0,0 @@
-<template>
-  <div class="report-container">
-    <div class="tabs-header">
-      <el-tabs v-model="activeTab" type="card">
-        <el-tab-pane label="日" name="day" />
-        <el-tab-pane label="月" name="month" />
-        <el-tab-pane label="年" name="year" />
-      </el-tabs>
-      <el-date-picker v-model="selectedDate" type="date" placeholder="选择日期" />
-    </div>
-
-    <div class="summary-section">
-      <h3 class="section-title">停机汇总</h3>
-      <div class="summary-cards">
-        <div class="summary-card">
-          <div class="card-icon">⏱️</div>
-          <div class="card-content">
-            <span class="card-label">停机时间</span>
-            <span class="card-value highlight">{{ summaryData.stopTime }}</span>
-          </div>
-        </div>
-        <div class="summary-card">
-          <div class="card-icon">🔄</div>
-          <div class="card-content">
-            <span class="card-label">停机次数</span>
-            <span class="card-value">{{ summaryData.stopCount }}</span>
-          </div>
-        </div>
-        <div class="summary-card">
-          <div class="card-icon">📊</div>
-          <div class="card-content">
-            <span class="card-label">作业率</span>
-            <span class="card-value highlight">{{ summaryData.rate }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="charts-section">
-      <div class="chart-panel">
-        <h3 class="section-title">班组停机分布</h3>
-        <div ref="teamChartRef" class="chart-content"></div>
-        <div class="chart-legend">
-          <span class="legend-item"><span class="legend-dot active"></span> 停机</span>
-          <span class="legend-item"><span class="legend-dot inactive"></span> 正常</span>
-        </div>
-      </div>
-      <div class="chart-panel">
-        <h3 class="section-title">停机类型分布</h3>
-        <div ref="typeChartRef" class="chart-content"></div>
-        <div class="chart-legend">
-          <span class="legend-item"><span class="legend-dot type1"></span> 来料缺陷</span>
-          <span class="legend-item"><span class="legend-dot type2"></span> 机械故障</span>
-          <span class="legend-item"><span class="legend-dot type3"></span> 换辊</span>
-        </div>
-      </div>
-    </div>
-
-    <div class="table-section">
-      <h3 class="section-title">停机详情</h3>
-      <el-table :data="stopData" border :height="300">
-        <el-table-column prop="timeRange" label="时间范围" width="200" />
-        <el-table-column prop="duration" label="持续时间" width="120" />
-        <el-table-column prop="team" label="机组" width="100" />
-        <el-table-column prop="remark" label="备注" width="300" />
-      </el-table>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, nextTick } from 'vue'
-import * as echarts from 'echarts'
-
-const activeTab = ref('day')
-const selectedDate = ref('2026-05-14')
-
-const summaryData = ref({
-  stopTime: '60 min',
-  stopCount: '4次',
-  rate: '95.83%'
-})
-
-const stopData = ref([
-  { timeRange: '2026-05-14 13:22 - 2026-05-14 13:34', duration: '12min', team: 'MLL', remark: '带尾夹送断带' },
-  { timeRange: '2026-05-14 12:47 - 2026-05-14 12:54', duration: '7min', team: 'MLL', remark: '处理表面缺陷' },
-  { timeRange: '2026-05-14 10:27 - 2026-05-14 12:54', duration: '33min', team: 'MLL', remark: '开卷机故障' },
-  { timeRange: '2026-05-14 10:27 - 2026-05-14 11:00', duration: '33min', team: 'MLL', remark: '换1-4机架辊,修4机架弯辊阀' },
-  { timeRange: '2026-05-14 04:03 - 2026-05-14 04:11', duration: '8min', team: 'MLL', remark: '换辊' }
-])
-
-const teamChartRef = ref(null)
-const typeChartRef = ref(null)
-
-const initCharts = () => {
-  if (teamChartRef.value) {
-    const chart = echarts.init(teamChartRef.value)
-    chart.setOption({
-      tooltip: { trigger: 'item' },
-      series: [
-        {
-          name: '班组停机',
-          type: 'pie',
-          radius: ['50%', '75%'],
-          center: ['50%', '50%'],
-          data: [
-            { value: 1, name: '停机', itemStyle: { color: '#409eff' } },
-            { value: 0, name: '正常', itemStyle: { color: '#e4e7ed' } }
-          ],
-          label: { show: false },
-          emphasis: {
-            label: { show: true, fontSize: 24, fontWeight: 'bold' }
-          }
-        }
-      ]
-    })
-  }
-
-  if (typeChartRef.value) {
-    const chart = echarts.init(typeChartRef.value)
-    chart.setOption({
-      tooltip: { trigger: 'item' },
-      series: [
-        {
-          name: '停机类型',
-          type: 'pie',
-          radius: ['50%', '75%'],
-          center: ['50%', '50%'],
-          data: [
-            { value: 45, name: '来料缺陷', itemStyle: { color: '#409eff' } },
-            { value: 35, name: '机械故障', itemStyle: { color: '#67c23a' } },
-            { value: 20, name: '换辊', itemStyle: { color: '#e6a23c' } }
-          ],
-          label: { show: false },
-          emphasis: {
-            label: { show: true, fontSize: 18, fontWeight: 'bold' }
-          }
-        }
-      ]
-    })
-  }
-}
-
-onMounted(() => {
-  nextTick(() => {
-    initCharts()
-    window.addEventListener('resize', initCharts)
-  })
-})
-</script>
-
-<style lang="scss" scoped>
-.report-container {
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.tabs-header {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  margin-bottom: 20px;
-  
-  :deep(.el-tabs) {
-    flex: 1;
-    
-    .el-tabs__header {
-      margin: 0;
-      border-bottom: 1px solid #e4e7ed;
-    }
-    
-    .el-tabs__item {
-      padding: 0 20px;
-      height: 40px;
-      line-height: 40px;
-      font-size: 14px;
-    }
-    
-    .el-tabs__item.is-active {
-      color: #409eff;
-    }
-    
-    .el-tabs__active-bar {
-      background: #409eff;
-    }
-  }
-}
-
-.summary-section {
-  margin-bottom: 20px;
-}
-
-.section-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #303133;
-  margin-bottom: 12px;
-  padding-left: 12px;
-  border-left: 3px solid #409eff;
-}
-
-.summary-cards {
-  display: flex;
-  gap: 16px;
-}
-
-.summary-card {
-  flex: 1;
-  background: #fff;
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  
-  .card-icon {
-    width: 48px;
-    height: 48px;
-    border-radius: 12px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-  }
-  
-  .card-content {
-    flex: 1;
-    
-    .card-label {
-      display: block;
-      font-size: 14px;
-      color: #909399;
-      margin-bottom: 4px;
-    }
-    
-    .card-value {
-      font-size: 24px;
-      font-weight: bold;
-      color: #303133;
-      
-      &.highlight {
-        color: #409eff;
-      }
-    }
-  }
-}
-
-.charts-section {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-.chart-panel {
-  background: #fff;
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  padding: 20px;
-}
-
-.chart-content {
-  height: 200px;
-}
-
-.chart-legend {
-  display: flex;
-  justify-content: center;
-  gap: 24px;
-  margin-top: 12px;
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  color: #606266;
-}
-
-.legend-dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  
-  &.active { background: #409eff; }
-  &.inactive { background: #e4e7ed; }
-  &.type1 { background: #409eff; }
-  &.type2 { background: #67c23a; }
-  &.type3 { background: #e6a23c; }
-}
-
-.table-section {
-  background: #fff;
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  padding: 20px;
-  
-  :deep(.el-table) {
-    --el-table-header-text-color: #606266;
-    --el-table-row-hover-bg-color: #f5f7fa;
-  }
-}
-</style>
diff --git a/src/views/reports/index.vue b/src/views/reports/index.vue
deleted file mode 100644
index ce0f726..0000000
--- a/src/views/reports/index.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <div class="reports-container">
-    <div class="search-bar">
-      <el-input placeholder="搜索报表名称" v-model="searchKeyword" class="search-input">
-        <template #append><el-icon><Search /></el-icon></template>
-      </el-input>
-      <el-select v-model="category" placeholder="选择分类">
-        <el-option label="全部" value="" />
-        <el-option label="生产报表" value="production" />
-        <el-option label="质量报表" value="quality" />
-        <el-option label="库存报表" value="inventory" />
-        <el-option label="销售报表" value="sales" />
-      </el-select>
-      <el-button type="primary" icon="Plus">新建报表</el-button>
-    </div>
-    
-    <div class="reports-list">
-      <el-table :data="filteredReports" border>
-        <el-table-column prop="name" label="报表名称" width="200" />
-        <el-table-column prop="category" label="分类" width="120">
-          <template #default="scope">
-            <el-tag>{{ getCategoryLabel(scope.row.category) }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="dataSource" label="数据源" width="150" />
-        <el-table-column prop="updateTime" label="更新时间" width="180" />
-        <el-table-column prop="status" label="状态" width="100">
-          <template #default="scope">
-            <el-tag :type="scope.row.status === 'active' ? 'success' : 'warning'">
-              {{ scope.row.status === 'active' ? '启用' : '禁用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="200">
-          <template #default="scope">
-            <el-button size="small" icon="View">预览</el-button>
-            <el-button size="small" icon="Edit">编辑</el-button>
-            <el-button size="small" icon="Download">导出</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-import { Search } from '@element-plus/icons-vue'
-
-const searchKeyword = ref('')
-const category = ref('')
-
-const reports = ref([
-  { id: 1, name: '酸轧产出报表', category: 'production', dataSource: 'klpl3', updateTime: '2026-05-14 14:30', status: 'active' },
-  { id: 2, name: '库存总览报表', category: 'inventory', dataSource: 'klpl3', updateTime: '2026-05-14 14:25', status: 'active' },
-  { id: 3, name: '产品质量报表', category: 'quality', dataSource: 'klpl3', updateTime: '2026-05-14 14:20', status: 'active' },
-  { id: 4, name: '销售统计报表', category: 'sales', dataSource: 'klpl3', updateTime: '2026-05-14 13:45', status: 'active' },
-  { id: 5, name: '生产日报表', category: 'production', dataSource: 'klpl3', updateTime: '2026-05-14 09:00', status: 'active' },
-  { id: 6, name: '设备状态报表', category: 'production', dataSource: 'klpl3', updateTime: '2026-05-13 18:00', status: 'disabled' }
-])
-
-const filteredReports = computed(() => {
-  return reports.value.filter(item => {
-    const matchKeyword = !searchKeyword.value || item.name.includes(searchKeyword.value)
-    const matchCategory = !category.value || item.category === category.value
-    return matchKeyword && matchCategory
-  })
-})
-
-const getCategoryLabel = (cat) => {
-  const map = {
-    production: '生产报表',
-    quality: '质量报表',
-    inventory: '库存报表',
-    sales: '销售报表'
-  }
-  return map[cat] || cat
-}
-</script>
-
-<style lang="scss" scoped>
-.reports-container {
-  padding: 20px;
-}
-
-.search-bar {
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  margin-bottom: 20px;
-  
-  .search-input {
-    width: 300px;
-  }
-}
-
-.reports-list {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-}
-
-:deep(.el-table) {
-  --el-table-header-text-color: #606266;
-  --el-table-row-hover-bg-color: #f5f7fa;
-}
-</style>
diff --git a/src/views/screens/acid-rolling/index.vue b/src/views/screens/acid-rolling/index.vue
index 11eac8e..206dc56 100644
--- a/src/views/screens/acid-rolling/index.vue
+++ b/src/views/screens/acid-rolling/index.vue
@@ -3,29 +3,34 @@
     <div class="screen-content">
       <header class="screen-header">
         <h1 class="title">酸轧数据大屏</h1>
-        <span class="time">{{ currentTime }}</span>
+        <div class="header-right">
+          <span class="time">{{ currentTime }}</span>
+          <button v-if="isFullscreen" class="exit-fullscreen-btn" @click="exitFullscreen" title="退出全屏">
+            <span>⛶ 退出全屏</span>
+          </button>
+        </div>
       </header>
 
       <main class="screen-body">
-        <div class="card-grid">
-          <div class="data-card" v-for="(card, index) in kpiCards" :key="card.title">
-            <div class="card-title">{{ card.title }}</div>
-            <div class="card-value">{{ card.value }}</div>
-            <div class="card-unit">{{ card.unit }}</div>
+        <div class="kpi-grid">
+          <div class="kpi-card" v-for="card in kpiCards" :key="card.title">
+            <div class="card-header">{{ card.title }}</div>
+            <div class="kpi-value" :style="{ color: '#00d4ff' }">{{ card.value }}</div>
+            <div class="kpi-unit">{{ card.unit }}</div>
           </div>
         </div>
 
-        <div class="chart-area">
-          <div class="chart-box">
-            <div class="box-title">OEE趋势分析</div>
+        <div class="chart-row">
+          <div class="chart-box flex-1">
+            <div class="box-header">OEE趋势分析</div>
             <div ref="trendChartRef" class="chart"></div>
           </div>
-          <div class="chart-box">
-            <div class="box-title">7大损失分布</div>
+          <div class="chart-box flex-1">
+            <div class="box-header">7大损失分布</div>
             <div ref="lossChartRef" class="chart"></div>
           </div>
-          <div class="chart-box">
-            <div class="box-title">班组产量排名</div>
+          <div class="chart-box flex-1">
+            <div class="box-header">班组产量排名</div>
             <div class="ranking-list">
               <div class="ranking-item" v-for="(item, index) in rankingList" :key="item.name">
                 <span class="rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</span>
@@ -36,9 +41,9 @@
           </div>
         </div>
 
-        <div class="alarm-area">
-          <div class="alarm-box">
-            <div class="box-title">实时告警</div>
+        <div class="chart-row">
+          <div class="chart-box full-width">
+            <div class="box-header">实时告警</div>
             <div class="alarm-list">
               <div class="alarm-item" v-for="(alarm, index) in alarmList" :key="index" :class="alarm.level">
                 <span class="alarm-icon">{{ alarm.icon }}</span>
@@ -56,11 +61,11 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount, onUnmounted, nextTick } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import * as echarts from 'echarts'
-import { getOeeLineSummary, getOeeLineLoss7, getOeeLineEvents, getAcidDashboardOverview } from '@/api/screen'
 
 const currentTime = ref('')
+const isFullscreen = ref(false)
 const trendChartRef = ref(null)
 const lossChartRef = ref(null)
 let trendChart = null
@@ -68,13 +73,14 @@ let lossChart = null
 let timeInterval = null
 let dataInterval = null
 let resizeObserver = null
+let fullscreenChangeHandler = null
 
 const kpiData = ref({
-  oee: 0,
-  availability: 0,
-  performanceTon: 0,
-  quality: 0,
-  totalOutputTon: 0,
+  oee: 86.5,
+  availability: 92.1,
+  performanceTon: 89.8,
+  quality: 97.5,
+  totalOutputTon: 13100,
   targetOutputTon: 15000
 })
 
@@ -85,8 +91,23 @@ const kpiCards = computed(() => [
   { title: '良品率', value: kpiData.value.quality.toFixed(1), unit: '%' }
 ])
 
-const summaryList = ref([])
-const loss7List = ref([])
+const summaryList = ref([
+  { statDate: '05-11', oee: 85.2, availability: 91.5, performanceTon: 88.7, quality: 97.2 },
+  { statDate: '05-12', oee: 86.8, availability: 92.8, performanceTon: 89.5, quality: 97.8 },
+  { statDate: '05-13', oee: 85.9, availability: 91.2, performanceTon: 89.2, quality: 97.5 },
+  { statDate: '05-14', oee: 87.2, availability: 93.5, performanceTon: 90.1, quality: 98.0 },
+  { statDate: '05-15', oee: 86.5, availability: 92.1, performanceTon: 89.8, quality: 97.5 }
+])
+
+const loss7List = ref([
+  { lossName: '故障停机', lossRatio: 35 },
+  { lossName: '换模换线', lossRatio: 24 },
+  { lossName: '空转停机', lossRatio: 15 },
+  { lossName: '速度损失', lossRatio: 12 },
+  { lossName: '质量损失', lossRatio: 7 },
+  { lossName: '启动损失', lossRatio: 4 },
+  { lossName: '管理损失', lossRatio: 3 }
+])
 
 const rankingList = ref([
   { name: '甲班', value: 3200 },
@@ -113,86 +134,16 @@ const updateCurrentTime = () => {
   })
 }
 
-const loadData = async () => {
-  try {
-    const [oeeRes, lossRes, overviewRes] = await Promise.all([
-      getOeeLineSummary(),
-      getOeeLineLoss7(),
-      getAcidDashboardOverview()
-    ])
-
-    if (oeeRes && oeeRes.data) {
-      summaryList.value = oeeRes.data
-    }
-
-    if (lossRes && lossRes.data) {
-      loss7List.value = lossRes.data
-    }
-
-    if (overviewRes && overviewRes.data) {
-      const data = overviewRes.data
-      kpiData.value = {
-        oee: data.oee || 86.5,
-        availability: data.availability || 92.1,
-        performanceTon: data.performance || 89.8,
-        quality: data.quality || 97.5,
-        totalOutputTon: data.totalOutput || 0,
-        targetOutputTon: data.targetOutput || 15000
-      }
-
-      if (data.teamRanking) {
-        rankingList.value = data.teamRanking.map(item => ({
-          name: item.name,
-          value: item.output
-        }))
-      }
-
-      if (data.alarms) {
-        alarmList.value = data.alarms.map(item => ({
-          icon: item.level === 'warning' ? '⚠️' : item.level === 'success' ? '✅' : '🔴',
-          title: item.message,
-          time: item.time,
-          level: item.level
-        }))
-      }
-    }
-
-    updateCharts()
-  } catch (error) {
-    console.error('加载数据失败:', error)
-    loadMockData()
+const exitFullscreen = () => {
+  if (document.fullscreenElement) {
+    document.exitFullscreen().catch(err => {
+      console.error('退出全屏失败:', err)
+    })
   }
 }
 
-const loadMockData = () => {
-  summaryList.value = [
-    { statDate: '05-11', oee: 85.2, availability: 91.5, performanceTon: 88.7, quality: 97.2, totalOutputTon: 12500 },
-    { statDate: '05-12', oee: 86.8, availability: 92.8, performanceTon: 89.5, quality: 97.8, totalOutputTon: 13200 },
-    { statDate: '05-13', oee: 85.9, availability: 91.2, performanceTon: 89.2, quality: 97.5, totalOutputTon: 12800 },
-    { statDate: '05-14', oee: 87.2, availability: 93.5, performanceTon: 90.1, quality: 98.0, totalOutputTon: 13500 },
-    { statDate: '05-15', oee: 86.5, availability: 92.1, performanceTon: 89.8, quality: 97.5, totalOutputTon: 13100 }
-  ]
-
-  loss7List.value = [
-    { lossName: '故障停机', lossRatio: 35 },
-    { lossName: '换模换线', lossRatio: 24 },
-    { lossName: '空转停机', lossRatio: 15 },
-    { lossName: '速度损失', lossRatio: 12 },
-    { lossName: '质量损失', lossRatio: 7 },
-    { lossName: '启动损失', lossRatio: 4 },
-    { lossName: '管理损失', lossRatio: 3 }
-  ]
-
-  kpiData.value = {
-    oee: 86.5,
-    availability: 92.1,
-    performanceTon: 89.8,
-    quality: 97.5,
-    totalOutputTon: 13100,
-    targetOutputTon: 15000
-  }
-  
-  updateCharts()
+const handleFullscreenChange = () => {
+  isFullscreen.value = !!document.fullscreenElement
 }
 
 const updateCharts = () => {
@@ -210,24 +161,31 @@ const updateTrendChart = () => {
   const qualValues = summaryList.value.map(item => item.quality)
   
   trendChart.setOption({
-    backgroundColor: '#ffffff',
-    grid: { top: 30, right: 20, bottom: 30, left: 50 },
-    tooltip: { trigger: 'axis', axisPointer: { type: 'line', lineStyle: { color: '#4a90d9' } } },
-    legend: { data: ['OEE', '时间稼动率', '性能稼动率', '良品率'], bottom: 0, textStyle: { color: '#666' } },
+    backgroundColor: 'transparent',
+    grid: { top: 30, right: 20, bottom: 30, left: 60 },
+    tooltip: { 
+      trigger: 'axis', 
+      backgroundColor: 'rgba(10, 20, 40, 0.9)',
+      borderColor: '#1e3a5f',
+      textStyle: { color: '#fff' },
+      axisPointer: { type: 'line', lineStyle: { color: '#00d4ff' } } 
+    },
+    legend: { data: ['OEE', '时间稼动率', '性能稼动率', '良品率'], bottom: 0, textStyle: { color: '#a0c4e8' } },
     xAxis: {
       type: 'category',
       data: dates,
-      axisLine: { lineStyle: { color: '#ddd' } },
+      axisLine: { lineStyle: { color: '#3a5a8a' } },
       axisTick: { show: false },
-      axisLabel: { color: '#666' }
+      axisLabel: { color: '#a0c4e8' }
     },
     yAxis: {
       type: 'value',
       min: 70,
       max: 100,
       axisLine: { show: false },
-      splitLine: { lineStyle: { color: '#eee' } },
-      axisLabel: { color: '#666' }
+      axisTick: { show: false },
+      splitLine: { lineStyle: { color: '#1e3a5f', type: 'dashed' } },
+      axisLabel: { color: '#a0c4e8' }
     },
     series: [
       {
@@ -235,8 +193,14 @@ const updateTrendChart = () => {
         type: 'line',
         smooth: true,
         data: oeeValues,
-        lineStyle: { color: '#4a90d9', width: 3 },
-        itemStyle: { color: '#4a90d9' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
+            { offset: 1, color: 'rgba(0, 212, 255, 0.05)' }
+          ])
+        },
+        lineStyle: { color: '#00d4ff', width: 3 },
+        itemStyle: { color: '#00d4ff' },
         symbol: 'circle',
         symbolSize: 8
       },
@@ -245,24 +209,24 @@ const updateTrendChart = () => {
         type: 'line',
         smooth: true,
         data: avalValues,
-        lineStyle: { color: '#52c41a', width: 2 },
-        itemStyle: { color: '#52c41a' }
+        lineStyle: { color: '#00ff88', width: 2 },
+        itemStyle: { color: '#00ff88' }
       },
       {
         name: '性能稼动率',
         type: 'line',
         smooth: true,
         data: perfValues,
-        lineStyle: { color: '#5cd9e8', width: 2 },
-        itemStyle: { color: '#5cd9e8' }
+        lineStyle: { color: '#7c63ff', width: 2 },
+        itemStyle: { color: '#7c63ff' }
       },
       {
         name: '良品率',
         type: 'line',
         smooth: true,
         data: qualValues,
-        lineStyle: { color: '#ff9800', width: 2 },
-        itemStyle: { color: '#ff9800' }
+        lineStyle: { color: '#ff9f43', width: 2 },
+        itemStyle: { color: '#ff9f43' }
       }
     ]
   })
@@ -272,9 +236,15 @@ const updateLossChart = () => {
   if (!lossChart) return
   
   lossChart.setOption({
-    backgroundColor: '#ffffff',
-    tooltip: { trigger: 'item', formatter: '{b}: {c}% ({d}%)' },
-    legend: { bottom: 0, textStyle: { color: '#666' } },
+    backgroundColor: 'transparent',
+    tooltip: { 
+      trigger: 'item', 
+      backgroundColor: 'rgba(10, 20, 40, 0.9)',
+      borderColor: '#1e3a5f',
+      textStyle: { color: '#fff' },
+      formatter: '{b}: {c}% ({d}%)' 
+    },
+    legend: { bottom: 0, textStyle: { color: '#a0c4e8' } },
     series: [{
       type: 'pie',
       radius: ['45%', '75%'],
@@ -283,7 +253,7 @@ const updateLossChart = () => {
         value: item.lossRatio || 10,
         name: item.lossName || '损失' + (index + 1),
         itemStyle: {
-          color: ['#4a90d9', '#5cd9e8', '#52c41a', '#ff9800', '#ff5722', '#9c27b0', '#673ab7'][index]
+          color: ['#00d4ff', '#7c63ff', '#00ff88', '#ff9f43', '#ff6b6b', '#ffd93d', '#6c5ce7'][index]
         }
       })),
       label: { show: false }
@@ -298,6 +268,10 @@ const handleResize = () => {
   })
 }
 
+const handleRefresh = () => {
+  updateCharts()
+}
+
 onMounted(() => {
   updateCurrentTime()
   timeInterval = setInterval(updateCurrentTime, 1000)
@@ -309,7 +283,7 @@ onMounted(() => {
     if (lossChartRef.value) {
       lossChart = echarts.init(lossChartRef.value)
     }
-    loadData()
+    updateCharts()
     
     window.addEventListener('resize', handleResize)
     
@@ -323,8 +297,13 @@ onMounted(() => {
       }
     }
 
-    dataInterval = setInterval(loadData, 30000)
+    dataInterval = setInterval(updateCharts, 30000)
   })
+
+  fullscreenChangeHandler = handleFullscreenChange
+  document.addEventListener('fullscreenchange', fullscreenChangeHandler)
+  
+  window.addEventListener('refresh-data', handleRefresh)
 })
 
 onBeforeUnmount(() => {
@@ -337,10 +316,15 @@ onBeforeUnmount(() => {
     dataInterval = null
   }
   window.removeEventListener('resize', handleResize)
+  window.removeEventListener('refresh-data', handleRefresh)
   if (resizeObserver) {
     resizeObserver.disconnect()
     resizeObserver = null
   }
+  if (fullscreenChangeHandler) {
+    document.removeEventListener('fullscreenchange', fullscreenChangeHandler)
+    fullscreenChangeHandler = null
+  }
   if (trendChart) {
     trendChart.dispose()
     trendChart = null
@@ -350,28 +334,23 @@ onBeforeUnmount(() => {
     lossChart = null
   }
 })
-
-onUnmounted(() => {
-  // 确保清理完成
-})
 </script>
 
 <style lang="scss" scoped>
 .screen-wrapper {
   width: 100%;
-  min-height: 100%;
-  background: #f5f5f5;
+  min-height: 100vh;
+  background: linear-gradient(180deg, #0a1428 0%, #0d1b34 50%, #0a1428 100%);
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 .screen-content {
-  background: #ffffff;
-  color: #333333;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  background: transparent;
+  color: #ffffff;
   width: 100%;
-  padding-bottom: 20px;
+  padding: 20px;
+  box-sizing: border-box;
 }
 
 .screen-header {
@@ -379,106 +358,156 @@ onUnmounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 20px 30px;
-  border-bottom: 1px solid #eee;
+  background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, rgba(12, 30, 60, 0.8) 100%);
+  border-radius: 8px;
+  margin-bottom: 20px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
 
   .title {
-    font-size: 24px;
+    font-size: 26px;
     font-weight: bold;
-    color: #333333;
-    letter-spacing: 2px;
+    color: #00d4ff;
+    letter-spacing: 3px;
     margin: 0;
+    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 20px;
   }
 
   .time {
-    font-size: 16px;
-    color: #666666;
+    font-size: 18px;
+    color: #00d4ff;
     font-family: 'Courier New', monospace;
+    font-weight: bold;
+  }
+
+  .exit-fullscreen-btn {
+    padding: 8px 16px;
+    border: 1px solid rgba(255, 107, 107, 0.5);
+    border-radius: 6px;
+    background: rgba(255, 107, 107, 0.2);
+    color: #ff6b6b;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: rgba(255, 107, 107, 0.3);
+      border-color: #ff6b6b;
+      box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
+    }
   }
 }
 
 .screen-body {
-  padding: 15px;
+  padding: 0;
 }
 
-.card-grid {
+.kpi-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 
-  .data-card {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
+  .kpi-card {
+    background: linear-gradient(180deg, rgba(14, 40, 80, 0.9) 0%, rgba(10, 20, 40, 0.95) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.2);
     border-radius: 8px;
-    padding: 20px;
+    padding: 0;
     text-align: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 
-    .card-title {
+    .card-header {
+      background: linear-gradient(90deg, #00a8cc 0%, #00d4ff 50%, #00a8cc 100%);
+      padding: 10px 15px;
       font-size: 14px;
-      color: #666666;
-      margin-bottom: 10px;
-    }
-
-    .card-value {
-      font-size: 32px;
       font-weight: bold;
-      margin-bottom: 4px;
+      color: #0a1428;
+      letter-spacing: 2px;
     }
 
-    .card-unit {
-      font-size: 12px;
-      color: #999999;
+    .kpi-value {
+      font-size: 36px;
+      font-weight: bold;
+      margin: 15px 0 5px;
+      text-shadow: 0 0 15px currentColor;
+    }
+
+    .kpi-unit {
+      font-size: 14px;
+      color: #a0c4e8;
+      margin-bottom: 15px;
     }
   }
 }
 
-.chart-area {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+.chart-row {
+  display: flex;
   gap: 16px;
   margin-bottom: 16px;
 
   .chart-box {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
+    background: linear-gradient(180deg, rgba(14, 40, 80, 0.85) 0%, rgba(10, 20, 40, 0.9) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.15);
     border-radius: 8px;
-    padding: 15px;
+    padding: 0;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    min-height: 320px;
 
-    .box-title {
-      font-size: 14px;
-      font-weight: 600;
-      color: #333333;
-      margin-bottom: 12px;
-      padding-left: 10px;
-      border-left: 3px solid #4a90d9;
+    &.flex-1 {
+      flex: 1;
     }
 
-    .chart {
-      height: 300px;
+    &.full-width {
       width: 100%;
     }
 
+    .box-header {
+      background: linear-gradient(90deg, rgba(0, 168, 204, 0.8) 0%, rgba(0, 212, 255, 0.6) 100%);
+      padding: 12px 18px;
+      font-size: 14px;
+      font-weight: bold;
+      color: #0a1428;
+      letter-spacing: 2px;
+      border-bottom: 1px solid rgba(0, 212, 255, 0.3);
+      flex-shrink: 0;
+    }
+
+    .chart {
+      flex: 1;
+      min-height: 260px;
+      width: 100%;
+      padding: 15px;
+      box-sizing: border-box;
+    }
+
     .ranking-list {
+      flex: 1;
+      padding: 15px;
       display: flex;
       flex-direction: column;
       gap: 10px;
+      overflow-y: auto;
 
       .ranking-item {
         display: flex;
         align-items: center;
         padding: 10px 12px;
-        background: #ffffff;
-        border: 1px solid #e0e0e0;
+        background: rgba(10, 20, 40, 0.8);
+        border: 1px solid rgba(0, 212, 255, 0.15);
         border-radius: 6px;
 
         .rank {
-          width: 22px;
-          height: 22px;
+          width: 24px;
+          height: 24px;
           border-radius: 50%;
           display: flex;
           align-items: center;
@@ -486,98 +515,80 @@ onUnmounted(() => {
           font-size: 12px;
           font-weight: bold;
           margin-right: 12px;
-          background: #e0e0e0;
-          color: #666;
+          background: rgba(0, 212, 255, 0.3);
+          color: #00d4ff;
 
-          &.rank-1 { background: linear-gradient(135deg, #ffd700, #ffb700); color: #fff; }
-          &.rank-2 { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); color: #fff; }
-          &.rank-3 { background: linear-gradient(135deg, #cd7f32, #b87333); color: #fff; }
+          &.rank-1 { background: linear-gradient(135deg, #ffd93d, #ffb700); color: #0a1428; }
+          &.rank-2 { background: linear-gradient(135deg, #a0c4e8, #7b9cc4); color: #fff; }
+          &.rank-3 { background: linear-gradient(135deg, #ff9f43, #e88a2e); color: #fff; }
         }
 
         .name {
           flex: 1;
           font-size: 13px;
-          color: #333333;
+          color: #a0c4e8;
         }
 
         .value {
           font-size: 14px;
           font-weight: bold;
-          color: #4a90d9;
+          color: #00d4ff;
         }
       }
     }
-  }
-}
-
-.alarm-area {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 16px;
-
-  .alarm-box {
-    background: #fafafa;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    padding: 15px;
-    display: flex;
-    flex-direction: column;
-
-    .box-title {
-      font-size: 14px;
-      font-weight: 600;
-      color: #333333;
-      margin-bottom: 12px;
-      padding-left: 10px;
-      border-left: 3px solid #4a90d9;
-    }
 
     .alarm-list {
+      flex: 1;
+      padding: 15px;
       display: flex;
-      flex-direction: column;
-      gap: 10px;
+      flex-direction: row;
+      gap: 15px;
+      overflow-x: auto;
 
       .alarm-item {
+        flex: 1;
+        min-width: 280px;
         display: flex;
-        align-items: center;
-        padding: 10px;
-        border-radius: 6px;
+        align-items: flex-start;
+        padding: 15px;
+        border-radius: 8px;
         border-left: 4px solid;
-        background: #ffffff;
-        border: 1px solid #e0e0e0;
+        background: rgba(10, 20, 40, 0.8);
 
         &.danger {
-          border-color: #f56c6c;
-          background: #fef0f0;
+          border-color: #ff6b6b;
+          background: rgba(255, 107, 107, 0.1);
         }
 
         &.warning {
-          border-color: #e6a23c;
-          background: #fdf6ec;
+          border-color: #ff9f43;
+          background: rgba(255, 159, 67, 0.1);
         }
 
         &.success {
-          border-color: #52c41a;
-          background: #f0f9eb;
+          border-color: #00ff88;
+          background: rgba(0, 255, 136, 0.1);
         }
 
         .alarm-icon {
-          font-size: 16px;
-          margin-right: 10px;
+          font-size: 20px;
+          margin-right: 12px;
+          flex-shrink: 0;
         }
 
         .alarm-content {
           flex: 1;
 
           .alarm-title {
-            font-size: 13px;
-            color: #333333;
-            margin-bottom: 2px;
+            font-size: 14px;
+            color: #ffffff;
+            margin-bottom: 5px;
+            font-weight: 500;
           }
 
           .alarm-time {
-            font-size: 11px;
-            color: #999999;
+            font-size: 12px;
+            color: #8899aa;
           }
         }
       }
@@ -586,22 +597,31 @@ onUnmounted(() => {
 }
 
 @media screen and (max-width: 1200px) {
-  .card-grid {
+  .kpi-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .chart-area {
-    grid-template-columns: repeat(2, 1fr);
+  .chart-row {
+    flex-direction: column;
+
+    .chart-box {
+      min-height: auto;
+    }
+
+    .alarm-list {
+      flex-direction: column;
+      overflow-x: visible;
+
+      .alarm-item {
+        min-width: auto;
+      }
+    }
   }
 }
 
 @media screen and (max-width: 768px) {
-  .chart-area {
-    grid-template-columns: 1fr;
-  }
-
-  .card-grid {
+  .kpi-grid {
     grid-template-columns: 1fr;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/screens/create.vue b/src/views/screens/create.vue
deleted file mode 100644
index 3e9e98c..0000000
--- a/src/views/screens/create.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<template>
-  <div class="create-screen-container">
-    <el-card>
-      <template #header>
-        <div class="card-header">
-          <span>新建大屏</span>
-          <el-button @click="handleBack">
-            <el-icon><Back /></el-icon>
-            返回列表
-          </el-button>
-        </div>
-      </template>
-
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="大屏名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入大屏名称" />
-        </el-form-item>
-
-        <el-form-item label="大屏类型" prop="type">
-          <el-select v-model="form.type" placeholder="请选择大屏类型" style="width: 100%">
-            <el-option label="示例大屏" value="demo" />
-            <el-option label="订单大屏" value="order" />
-            <el-option label="成本大屏" value="cost" />
-            <el-option label="能源大屏" value="energy" />
-            <el-option label="酸轧数据大屏" value="acidRolling" />
-            <el-option label="自定义大屏" value="custom" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="路由路径" prop="route">
-          <el-input v-model="form.route" placeholder="/dashboard/custom" />
-          <div class="form-tip">路由路径需以 / 开头，不能与其他大屏重复</div>
-        </el-form-item>
-
-        <el-form-item label="大屏描述">
-          <el-input v-model="form.description" type="textarea" :rows="4" placeholder="请输入大屏描述" />
-        </el-form-item>
-
-        <el-form-item label="数据源">
-          <el-select v-model="form.dataSource" placeholder="请选择数据源" style="width: 100%">
-            <el-option label="KLPL3数据库" value="klp" />
-            <el-option label="酸轧数据库" value="acid" />
-            <el-option label="综合数据库" value="mixed" />
-            <el-option label="无数据源" value="none" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="刷新频率">
-          <el-input-number v-model="form.refreshInterval" :min="5" :max="300" />
-          <span class="unit">秒</span>
-          <div class="form-tip">数据自动刷新间隔，建议设置为 30-60 秒</div>
-        </el-form-item>
-
-        <el-form-item label="背景主题">
-          <el-radio-group v-model="form.theme">
-            <el-radio label="dark">深色科技风</el-radio>
-            <el-radio label="light">浅色简洁风</el-radio>
-            <el-radio label="custom">自定义</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="是否启用">
-          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
-        </el-form-item>
-
-        <el-form-item>
-          <el-button type="primary" @click="handleSubmit" :loading="submitting">
-            确认创建
-          </el-button>
-          <el-button @click="handleBack">取消</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
-import { Back } from '@element-plus/icons-vue'
-
-const router = useRouter()
-const formRef = ref(null)
-const submitting = ref(false)
-
-const form = reactive({
-  name: '',
-  type: '',
-  route: '',
-  description: '',
-  dataSource: '',
-  refreshInterval: 30,
-  theme: 'dark',
-  status: 1
-})
-
-const rules = {
-  name: [
-    { required: true, message: '请输入大屏名称', trigger: 'blur' },
-    { min: 2, max: 50, message: '名称长度在 2 到 50 个字符', trigger: 'blur' }
-  ],
-  type: [
-    { required: true, message: '请选择大屏类型', trigger: 'change' }
-  ],
-  route: [
-    { required: true, message: '请输入路由路径', trigger: 'blur' },
-    { pattern: /^\/[a-z0-9-]+$/, message: '路由路径需以 / 开头，只能包含小写字母、数字和连字符', trigger: 'blur' }
-  ]
-}
-
-// 监听类型变化，自动生成路由
-const handleTypeChange = (type) => {
-  if (type && type !== 'custom') {
-    form.route = '/dashboard/' + type.replace(/([A-Z])/g, '-$1').toLowerCase()
-  }
-}
-
-// 提交表单
-const handleSubmit = async () => {
-  if (!formRef.value) return
-  
-  await formRef.value.validate(async (valid) => {
-    if (valid) {
-      submitting.value = true
-      try {
-        // 实际项目中这里应该调用API创建大屏
-        await new Promise(resolve => setTimeout(resolve, 1000))
-        
-        ElMessage.success('创建成功')
-        router.push('/screen-manage')
-      } catch (error) {
-        ElMessage.error('创建失败')
-      } finally {
-        submitting.value = false
-      }
-    }
-  })
-}
-
-// 返回列表
-const handleBack = () => {
-  router.push('/screen-manage')
-}
-</script>
-
-<style lang="scss" scoped>
-.create-screen-container {
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .el-form {
-    max-width: 800px;
-
-    .form-tip {
-      font-size: 12px;
-      color: #999;
-      margin-top: 5px;
-    }
-
-    .unit {
-      margin-left: 8px;
-      color: #666;
-    }
-  }
-}
-</style>
diff --git a/src/views/screens/edit.vue b/src/views/screens/edit.vue
deleted file mode 100644
index f9c190d..0000000
--- a/src/views/screens/edit.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<template>
-  <div class="edit-screen-container">
-    <el-card>
-      <template #header>
-        <div class="card-header">
-          <span>编辑大屏</span>
-          <el-button @click="handleBack">
-            <el-icon><Back /></el-icon>
-            返回列表
-          </el-button>
-        </div>
-      </template>
-
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="大屏名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入大屏名称" />
-        </el-form-item>
-
-        <el-form-item label="大屏类型" prop="type">
-          <el-select v-model="form.type" placeholder="请选择大屏类型" style="width: 100%" disabled>
-            <el-option label="示例大屏" value="demo" />
-            <el-option label="订单大屏" value="order" />
-            <el-option label="成本大屏" value="cost" />
-            <el-option label="能源大屏" value="energy" />
-            <el-option label="酸轧数据大屏" value="acidRolling" />
-            <el-option label="自定义大屏" value="custom" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="路由路径" prop="route">
-          <el-input v-model="form.route" placeholder="/dashboard/custom" disabled />
-        </el-form-item>
-
-        <el-form-item label="大屏描述">
-          <el-input v-model="form.description" type="textarea" :rows="4" placeholder="请输入大屏描述" />
-        </el-form-item>
-
-        <el-form-item label="数据源">
-          <el-select v-model="form.dataSource" placeholder="请选择数据源" style="width: 100%">
-            <el-option label="KLPL3数据库" value="klp" />
-            <el-option label="酸轧数据库" value="acid" />
-            <el-option label="综合数据库" value="mixed" />
-            <el-option label="无数据源" value="none" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="刷新频率">
-          <el-input-number v-model="form.refreshInterval" :min="5" :max="300" />
-          <span class="unit">秒</span>
-        </el-form-item>
-
-        <el-form-item label="背景主题">
-          <el-radio-group v-model="form.theme">
-            <el-radio label="dark">深色科技风</el-radio>
-            <el-radio label="light">浅色简洁风</el-radio>
-            <el-radio label="custom">自定义</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="是否启用">
-          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
-        </el-form-item>
-
-        <el-form-item>
-          <el-button type="primary" @click="handleSubmit" :loading="submitting">
-            保存修改
-          </el-button>
-          <el-button @click="handleBack">取消</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { ElMessage } from 'element-plus'
-import { Back } from '@element-plus/icons-vue'
-
-const router = useRouter()
-const route = useRoute()
-const formRef = ref(null)
-const submitting = ref(false)
-
-// 大屏类型映射
-const screenTypes = {
-  demo: { name: '示例大屏', route: '/dashboard/demo' },
-  order: { name: '订单大屏', route: '/dashboard/order' },
-  cost: { name: '成本大屏', route: '/dashboard/cost' },
-  energy: { name: '能源大屏', route: '/dashboard/energy' },
-  acidRolling: { name: '酸轧数据大屏', route: '/dashboard/acid-rolling' }
-}
-
-const form = reactive({
-  name: '',
-  type: '',
-  route: '',
-  description: '',
-  dataSource: '',
-  refreshInterval: 30,
-  theme: 'dark',
-  status: 1
-})
-
-const rules = {
-  name: [
-    { required: true, message: '请输入大屏名称', trigger: 'blur' },
-    { min: 2, max: 50, message: '名称长度在 2 到 50 个字符', trigger: 'blur' }
-  ]
-}
-
-// 加载大屏数据
-const loadScreenData = () => {
-  const type = route.query.type
-  if (type && screenTypes[type]) {
-    const screenInfo = screenTypes[type]
-    form.name = screenInfo.name
-    form.type = type
-    form.route = screenInfo.route
-    form.description = '数据可视化大屏'
-    form.dataSource = 'mixed'
-    form.refreshInterval = 30
-    form.theme = 'dark'
-    form.status = 1
-  }
-}
-
-// 提交表单
-const handleSubmit = async () => {
-  if (!formRef.value) return
-  
-  await formRef.value.validate(async (valid) => {
-    if (valid) {
-      submitting.value = true
-      try {
-        // 实际项目中这里应该调用API更新大屏
-        await new Promise(resolve => setTimeout(resolve, 1000))
-        
-        ElMessage.success('保存成功')
-        router.push('/screen-manage')
-      } catch (error) {
-        ElMessage.error('保存失败')
-      } finally {
-        submitting.value = false
-      }
-    }
-  })
-}
-
-// 返回列表
-const handleBack = () => {
-  router.push('/screen-manage')
-}
-
-onMounted(() => {
-  loadScreenData()
-})
-</script>
-
-<style lang="scss" scoped>
-.edit-screen-container {
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .el-form {
-    max-width: 800px;
-
-    .unit {
-      margin-left: 8px;
-      color: #666;
-    }
-  }
-}
-</style>
diff --git a/src/views/screens/index.vue b/src/views/screens/index.vue
deleted file mode 100644
index 046e4e1..0000000
--- a/src/views/screens/index.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<template>
-  <div class="screens-container">
-    <div class="toolbar">
-      <el-button type="primary" icon="Plus">新建大屏</el-button>
-      <el-button type="success" icon="Refresh">刷新数据</el-button>
-    </div>
-    
-    <div class="screens-grid">
-      <div
-        v-for="screen in screenList"
-        :key="screen.id"
-        class="screen-card"
-        :class="{ active: screen.status === 'running' }"
-      >
-        <div class="card-header">
-          <div class="screen-icon">{{ screen.icon }}</div>
-          <div class="screen-info">
-            <h3 class="screen-name">{{ screen.name }}</h3>
-            <span class="screen-type">{{ screen.type }}</span>
-          </div>
-          <el-tag :type="screen.status === 'running' ? 'success' : 'warning'">
-            {{ screen.status === 'running' ? '运行中' : '停止' }}
-          </el-tag>
-        </div>
-        <p class="screen-desc">{{ screen.description }}</p>
-        <div class="card-footer">
-          <span class="update-time">更新时间: {{ screen.updateTime }}</span>
-          <div class="actions">
-            <el-button size="small" icon="VideoPlay" @click="startScreen(screen)">启动</el-button>
-          <el-button size="small" icon="Edit">编辑</el-button>
-          <el-button size="small" icon="Delete" type="danger">删除</el-button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const screenList = ref([
-  {
-    id: 1,
-    name: '酸轧数据大屏',
-    type: '生产监控',
-    icon: '📊',
-    description: '实时展示酸轧生产线的生产数据和统计信息',
-    status: 'running',
-    updateTime: '2026-05-14 14:30'
-  },
-  {
-    id: 2,
-    name: '库存总览大屏',
-    type: '数据分析',
-    icon: '📦',
-    description: '展示仓库库存的实时状态和统计信息',
-    status: 'running',
-    updateTime: '2026-05-14 14:25'
-  },
-  {
-    id: 3,
-    name: '设备状态大屏',
-    type: '设备管理',
-    icon: '🔧',
-    description: '监控生产设备的运行状态和维护信息',
-    status: 'stopped',
-    updateTime: '2026-05-14 10:00'
-  },
-  {
-    id: 4,
-    name: '销售看板',
-    type: '实时报表',
-    icon: '📈',
-    description: '展示销售数据的实时统计和趋势分析',
-    status: 'running',
-    updateTime: '2026-05-14 14:15'
-  },
-  {
-    id: 5,
-    name: '能源消耗大屏',
-    type: '数据分析',
-    icon: '⚡',
-    description: '监控能源消耗情况和节能分析',
-    status: 'stopped',
-    updateTime: '2026-05-13 16:45'
-  },
-  {
-    id: 6,
-    name: '质量检测大屏',
-    type: '生产监控',
-    icon: '✅',
-    description: '展示产品质量检测数据和合格率统计',
-    status: 'running',
-    updateTime: '2026-05-14 14:20'
-  }
-])
-
-const startScreen = (screen) => {
-  screen.status = 'running'
-}
-</script>
-
-<style lang="scss" scoped>
-.screens-container {
-  padding: 20px;
-}
-
-.toolbar {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-.screens-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 20px;
-}
-
-.screen-card {
-  background: #fff;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  border-left: 4px solid #e4e7ed;
-  transition: all 0.3s ease;
-  
-  &.active {
-    border-left-color: #67c23a;
-    box-shadow: 0 4px 16px rgba(103, 194, 58, 0.15);
-  }
-  
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-  }
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.screen-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 22px;
-  margin-right: 14px;
-}
-
-.screen-info {
-  flex: 1;
-  
-  .screen-name {
-    font-size: 16px;
-    font-weight: 600;
-    color: #303133;
-    margin-bottom: 4px;
-  }
-  
-  .screen-type {
-    font-size: 12px;
-    color: #909399;
-    background: #f5f7fa;
-    padding: 2px 8px;
-    border-radius: 4px;
-  }
-}
-
-.screen-desc {
-  font-size: 13px;
-  color: #606266;
-  line-height: 1.6;
-  margin-bottom: 16px;
-}
-
-.card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 12px;
-  border-top: 1px solid #f0f0f0;
-}
-
-.update-time {
-  font-size: 12px;
-  color: #909399;
-}
-
-.actions {
-  display: flex;
-  gap: 8px;
-}
-</style>
diff --git a/src/views/screens/list.vue b/src/views/screens/list.vue
deleted file mode 100644
index e13b3dc..0000000
--- a/src/views/screens/list.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<template>
-  <div class="screen-list-container">
-    <div class="filter-container">
-      <el-button type="primary" @click="handleCreate">
-        <el-icon><Plus /></el-icon>
-        新建大屏
-      </el-button>
-      <el-button @click="handleRefresh">
-        <el-icon><Refresh /></el-icon>
-        刷新
-      </el-button>
-    </div>
-
-    <el-table :data="screenList" border stripe v-loading="loading">
-      <el-table-column prop="id" label="编号" width="80" align="center" />
-      <el-table-column prop="name" label="大屏名称" min-width="150" />
-      <el-table-column prop="type" label="大屏类型" width="120" align="center">
-        <template #default="{ row }">
-          <el-tag :type="getTypeTagType(row.type)">{{ row.typeName }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column prop="route" label="路由路径" width="180">
-        <template #default="{ row }">
-          <el-link type="primary" :href="row.routeUrl" target="_blank">{{ row.route }}</el-link>
-        </template>
-      </el-table-column>
-      <el-table-column prop="status" label="状态" width="80" align="center">
-        <template #default="{ row }">
-          <el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">
-            {{ row.status === 1 ? '启用' : '禁用' }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column prop="createTime" label="创建时间" width="160" />
-      <el-table-column label="操作" width="200" fixed="right" align="center">
-        <template #default="{ row }">
-          <el-button link type="primary" size="small" @click="handleView(row)">
-            <el-icon><View /></el-icon>
-            查看
-          </el-button>
-          <el-button link type="primary" size="small" @click="handleEdit(row)">
-            <el-icon><Edit /></el-icon>
-            编辑
-          </el-button>
-          <el-button link type="danger" size="small" @click="handleDelete(row)">
-            <el-icon><Delete /></el-icon>
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <el-dialog v-model="deleteDialogVisible" title="确认删除" width="400px">
-      <p>确定要删除大屏 "<strong>{{ currentScreen?.name }}</strong>" 吗？此操作不可恢复。</p>
-      <template #footer>
-        <el-button @click="deleteDialogVisible = false">取消</el-button>
-        <el-button type="danger" @click="confirmDelete">确定删除</el-button>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Refresh, View, Edit, Delete } from '@element-plus/icons-vue'
-
-const router = useRouter()
-const loading = ref(false)
-const screenList = ref([])
-const deleteDialogVisible = ref(false)
-const currentScreen = ref(null)
-
-// 大屏类型映射
-const screenTypes = {
-  demo: { name: '示例大屏', route: '/dashboard/demo', component: 'modules/dashboardBig/views/index.vue' },
-  order: { name: '订单大屏', route: '/dashboard/order', component: 'modules/dashboardBig/views/order.vue' },
-  cost: { name: '成本大屏', route: '/dashboard/cost', component: 'modules/dashboardBig/views/cost.vue' },
-  energy: { name: '能源大屏', route: '/dashboard/energy', component: 'modules/dashboardBig/views/energy.vue' },
-  acidRolling: { name: '酸轧数据大屏', route: '/dashboard/acid-rolling', component: 'views/screens/acid-rolling/index.vue' }
-}
-
-// 加载大屏列表
-const loadScreenList = () => {
-  loading.value = true
-  try {
-    const list = Object.entries(screenTypes).map(([key, value], index) => ({
-      id: index + 1,
-      name: value.name,
-      type: key,
-      typeName: value.name,
-      route: value.route,
-      routeUrl: value.route,
-      status: 1,
-      createTime: '2024-01-15 10:30:00',
-      component: value.component
-    }))
-    screenList.value = list
-  } catch (error) {
-    ElMessage.error('加载大屏列表失败')
-  } finally {
-    loading.value = false
-  }
-}
-
-// 获取类型标签颜色
-const getTypeTagType = (type) => {
-  const typeMap = {
-    demo: '',
-    order: 'success',
-    cost: 'warning',
-    energy: 'info',
-    acidRolling: 'danger'
-  }
-  return typeMap[type] || ''
-}
-
-// 新建大屏
-const handleCreate = () => {
-  router.push('/screen-manage/create')
-}
-
-// 刷新列表
-const handleRefresh = () => {
-  loadScreenList()
-  ElMessage.success('刷新成功')
-}
-
-// 查看大屏
-const handleView = (row) => {
-  window.open(row.routeUrl, '_blank')
-}
-
-// 编辑大屏
-const handleEdit = (row) => {
-  router.push({
-    path: '/screen-manage/edit/' + row.id,
-    query: { type: row.type }
-  })
-}
-
-// 删除大屏
-const handleDelete = (row) => {
-  currentScreen.value = row
-  deleteDialogVisible.value = true
-}
-
-// 确认删除
-const confirmDelete = async () => {
-  try {
-    await ElMessageBox.confirm(
-      `确定要删除大屏 "${currentScreen.value.name}" 吗？`,
-      '确认删除',
-      {
-        confirmButtonText: '确定删除',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }
-    )
-    
-    // 实际项目中这里应该调用API删除
-    const index = screenList.value.findIndex(item => item.id === currentScreen.value.id)
-    if (index > -1) {
-      screenList.value.splice(index, 1)
-    }
-    
-    deleteDialogVisible.value = false
-    ElMessage.success('删除成功')
-  } catch (error) {
-    if (error !== 'cancel') {
-      ElMessage.error('删除失败')
-    }
-  }
-}
-
-onMounted(() => {
-  loadScreenList()
-})
-</script>
-
-<style lang="scss" scoped>
-.screen-list-container {
-  .filter-container {
-    margin-bottom: 20px;
-    display: flex;
-    gap: 10px;
-  }
-
-  .el-table {
-    .el-button {
-      + .el-button {
-        margin-left: 0;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
deleted file mode 100644
index b82d5fa..0000000
--- a/src/views/system/config/index.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-button type="primary">保存配置</el-button>
-    </div>
-    <el-card title="系统配置">
-      <el-form :model="config" label-width="120px">
-        <el-form-item label="系统名称">
-          <el-input v-model="config.systemName" />
-        </el-form-item>
-        <el-form-item label="系统版本">
-          <el-input v-model="config.version" disabled />
-        </el-form-item>
-        <el-form-item label="数据刷新间隔">
-          <el-select v-model="config.refreshInterval">
-            <el-option label="10秒" :value="10" />
-            <el-option label="30秒" :value="30" />
-            <el-option label="1分钟" :value="60" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-    </el-card>
-  </div>
-</template>
-
-<script setup>
-import { reactive } from 'vue'
-
-const config = reactive({
-  systemName: '数据管理平台',
-  version: '1.0.0',
-  refreshInterval: 30
-})
-</script>
diff --git a/src/views/system/index.vue b/src/views/system/index.vue
deleted file mode 100644
index 84544b1..0000000
--- a/src/views/system/index.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<template>
-  <div class="system-container">
-    <el-tabs type="border-card" class="system-tabs">
-      <el-tab-pane label="基础设置">
-        <div class="setting-section">
-          <h3 class="section-title">系统信息</h3>
-          <el-form :model="systemInfo" label-width="120px">
-            <el-form-item label="系统名称">
-              <el-input v-model="systemInfo.name" />
-            </el-form-item>
-            <el-form-item label="版本号">
-              <el-input v-model="systemInfo.version" disabled />
-            </el-form-item>
-            <el-form-item label="运行时间">
-              <el-input v-model="systemInfo.uptime" disabled />
-            </el-form-item>
-          </el-form>
-        </div>
-        
-        <div class="setting-section">
-          <h3 class="section-title">大屏设置</h3>
-          <el-form :model="screenSettings" label-width="120px">
-            <el-form-item label="自动刷新间隔">
-              <el-select v-model="screenSettings.refreshInterval">
-                <el-option label="10秒" :value="10" />
-                <el-option label="30秒" :value="30" />
-                <el-option label="1分钟" :value="60" />
-                <el-option label="5分钟" :value="300" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="默认主题">
-              <el-select v-model="screenSettings.theme">
-                <el-option label="深色主题" value="dark" />
-                <el-option label="浅色主题" value="light" />
-              </el-select>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-tab-pane>
-      
-      <el-tab-pane label="用户管理">
-        <div class="user-section">
-          <el-button type="primary" icon="Plus" class="add-btn">添加用户</el-button>
-          <el-table :data="users" border>
-            <el-table-column prop="username" label="用户名" width="150" />
-            <el-table-column prop="name" label="真实姓名" width="120" />
-            <el-table-column prop="role" label="角色" width="120">
-              <template #default="scope">
-                <el-tag>{{ scope.row.role }}</el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column prop="status" label="状态" width="100">
-              <template #default="scope">
-                <el-switch :value="scope.row.status" />
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="150">
-              <template #default="scope">
-                <el-button size="small" icon="Edit">编辑</el-button>
-                <el-button size="small" icon="Key">重置密码</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-      </el-tab-pane>
-      
-      <el-tab-pane label="权限管理">
-        <div class="permission-section">
-          <el-button type="primary" icon="Plus" class="add-btn">添加角色</el-button>
-          <el-table :data="roles" border>
-            <el-table-column prop="name" label="角色名称" width="150" />
-            <el-table-column prop="description" label="角色描述" width="200" />
-            <el-table-column prop="permissions" label="权限" width="300">
-              <template #default="scope">
-                <span v-for="(p, idx) in scope.row.permissions" :key="idx" class="perm-tag">{{ p }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="150">
-              <template #default="scope">
-                <el-button size="small" icon="Edit">编辑权限</el-button>
-                <el-button size="small" icon="Delete" type="danger">删除</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-      </el-tab-pane>
-    </el-tabs>
-    
-    <div class="footer-actions">
-      <el-button type="primary">保存设置</el-button>
-      <el-button>取消</el-button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const systemInfo = ref({
-  name: '数据大屏管理系统',
-  version: '1.0.0',
-  uptime: '7天 12小时 30分钟'
-})
-
-const screenSettings = ref({
-  refreshInterval: 30,
-  theme: 'dark'
-})
-
-const users = ref([
-  { id: 1, username: 'admin', name: '管理员', role: '超级管理员', status: true },
-  { id: 2, username: 'zhang', name: '张三', role: '操作员', status: true },
-  { id: 3, username: 'li', name: '李四', role: '查看员', status: true },
-  { id: 4, username: 'wang', name: '王五', role: '操作员', status: false }
-])
-
-const roles = ref([
-  { id: 1, name: '超级管理员', description: '拥有系统全部权限', permissions: ['大屏管理', '报表管理', '数据源配置', '系统设置'] },
-  { id: 2, name: '操作员', description: '可操作大屏和报表', permissions: ['大屏管理', '报表管理'] },
-  { id: 3, name: '查看员', description: '仅可查看数据', permissions: ['大屏查看', '报表查看'] }
-])
-</script>
-
-<style lang="scss" scoped>
-.system-container {
-  padding: 20px;
-}
-
-.system-tabs {
-  margin-bottom: 20px;
-}
-
-.setting-section {
-  background: #fff;
-  border-radius: 12px;
-  padding: 24px;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-}
-
-.section-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #303133;
-  margin-bottom: 20px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.user-section, .permission-section {
-  background: #fff;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  
-  .add-btn {
-    margin-bottom: 16px;
-  }
-}
-
-.perm-tag {
-  background: #f0f5ff;
-  color: #409eff;
-  padding: 4px 10px;
-  border-radius: 4px;
-  font-size: 12px;
-  margin-right: 8px;
-}
-
-.footer-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-}
-
-:deep(.el-table) {
-  --el-table-header-text-color: #606266;
-  --el-table-row-hover-bg-color: #f5f7fa;
-}
-</style>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
deleted file mode 100644
index 27f146f..0000000
--- a/src/views/system/menu/index.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="search-area">
-      <el-input placeholder="菜单名称" class="search-item" style="width: 200px" />
-      <el-select placeholder="菜单类型" class="search-item" style="width: 150px">
-        <el-option label="全部" value="" />
-        <el-option label="目录" value="0" />
-        <el-option label="菜单" value="1" />
-        <el-option label="按钮" value="2" />
-      </el-select>
-      <el-button type="primary" class="search-item">查询</el-button>
-      <el-button class="search-item">重置</el-button>
-    </div>
-
-    <div class="btn-group">
-      <el-button type="primary">新增菜单</el-button>
-    </div>
-
-    <div class="table-container">
-      <el-table :data="menuList" border row-key="menuId" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-        <el-table-column prop="menuId" label="菜单ID" width="80" />
-        <el-table-column prop="menuName" label="菜单名称" />
-        <el-table-column prop="path" label="路由路径" />
-        <el-table-column prop="component" label="组件路径" />
-        <el-table-column prop="menuType" label="类型" width="80">
-          <template #default="scope">
-            <el-tag :type="getMenuTypeTag(scope.row.menuType)">
-              {{ getMenuTypeName(scope.row.menuType) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="icon" label="图标" width="80" />
-        <el-table-column prop="sort" label="排序" width="80" />
-        <el-table-column prop="status" label="状态" width="80">
-          <template #default="scope">
-            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
-              {{ scope.row.status === 1 ? '启用' : '禁用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="200">
-          <template #default="scope">
-            <el-button type="text">编辑</el-button>
-            <el-button type="text" @click="handleAddChild(scope.row)">新增子菜单</el-button>
-            <el-button type="text">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const menuList = ref([
-  {
-    menuId: 1, menuName: '系统管理', path: '/system', component: 'Layout', menuType: '0', icon: 'system', sort: 1, status: 1,
-    children: [
-      { menuId: 11, menuName: '用户管理', path: '/system/user', component: 'system/user/index', menuType: '1', icon: 'user', sort: 1, status: 1 },
-      { menuId: 12, menuName: '角色管理', path: '/system/role', component: 'system/role/index', menuType: '1', icon: 'role', sort: 2, status: 1 },
-      { menuId: 13, menuName: '菜单管理', path: '/system/menu', component: 'system/menu/index', menuType: '1', icon: 'menu', sort: 3, status: 1 }
-    ]
-  },
-  {
-    menuId: 2, menuName: '大屏管理', path: '/screen-manage', component: 'Layout', menuType: '0', icon: 'monitor', sort: 2, status: 1,
-    children: [
-      { menuId: 21, menuName: '大屏列表', path: '/screen-manage', component: 'screens/list', menuType: '1', icon: 'list', sort: 1, status: 1 },
-      { menuId: 22, menuName: '新建大屏', path: '/screen-manage/create', component: 'screens/create', menuType: '1', icon: 'plus', sort: 2, status: 1 }
-    ]
-  }
-])
-
-const getMenuTypeName = (type) => {
-  const map = { '0': '目录', '1': '菜单', '2': '按钮' }
-  return map[type] || '未知'
-}
-
-const getMenuTypeTag = (type) => {
-  const map = { '0': 'warning', '1': 'primary', '2': 'info' }
-  return map[type] || 'default'
-}
-
-const handleAddChild = (row) => {
-  console.log('新增子菜单', row)
-  // 这里可以添加打开弹窗的逻辑
-}
-</script>
-
-<style lang="scss" scoped>
-.app-container {
-  padding: 20px;
-  background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-.search-area {
-  background: #fff;
-  padding: 16px;
-  border-radius: 4px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-
-  .search-item {
-    display: inline-block;
-    margin-right: 16px;
-    margin-bottom: 10px;
-  }
-}
-
-.btn-group {
-  margin-bottom: 16px;
-
-  .el-button {
-    margin-right: 8px;
-  }
-}
-
-.table-container {
-  background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-}
-</style>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
deleted file mode 100644
index 1cdc7f0..0000000
--- a/src/views/system/role/index.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="search-area">
-      <el-input placeholder="角色名称" class="search-item" style="width: 200px" />
-      <el-select placeholder="状态" class="search-item" style="width: 150px">
-        <el-option label="全部" value="" />
-        <el-option label="启用" value="1" />
-        <el-option label="禁用" value="0" />
-      </el-select>
-      <el-button type="primary" class="search-item">查询</el-button>
-      <el-button class="search-item">重置</el-button>
-    </div>
-
-    <div class="btn-group">
-      <el-button type="primary">新增角色</el-button>
-      <el-button>批量删除</el-button>
-    </div>
-
-    <div class="table-container">
-      <el-table :data="roleList" border>
-        <el-table-column type="selection" width="55" />
-        <el-table-column prop="roleId" label="角色ID" width="80" />
-        <el-table-column prop="roleName" label="角色名称" />
-        <el-table-column prop="roleKey" label="角色标识" />
-        <el-table-column prop="description" label="描述" />
-        <el-table-column prop="sort" label="排序" width="80" />
-        <el-table-column prop="status" label="状态" width="80">
-          <template #default="scope">
-            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
-              {{ scope.row.status === 1 ? '启用' : '禁用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createTime" label="创建时间" />
-        <el-table-column label="操作" width="200">
-          <template #default="scope">
-            <el-button type="text">编辑</el-button>
-            <el-button type="text">权限设置</el-button>
-            <el-button type="text" :type="scope.row.status === 1 ? 'warning' : 'success'">
-              {{ scope.row.status === 1 ? '禁用' : '启用' }}
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-
-    <div class="pagination-container">
-      <el-pagination
-        :current-page="1"
-        :page-size="50"
-        :total="50"
-        layout="total, prev, pager, next, jumper"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const roleList = ref([
-  { roleId: 1, roleName: '超级管理员', roleKey: 'admin', description: '系统超级管理员', sort: 1, status: 1, createTime: '2024-01-01 10:00:00' },
-  { roleId: 2, roleName: '普通用户', roleKey: 'user', description: '普通用户权限', sort: 2, status: 1, createTime: '2024-01-02 10:00:00' },
-  { roleId: 3, roleName: '大屏管理员', roleKey: 'screen_admin', description: '大屏管理权限', sort: 3, status: 0, createTime: '2024-01-03 10:00:00' }
-])
-</script>
-
-<style lang="scss" scoped>
-.app-container {
-  padding: 20px;
-  background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-.search-area {
-  background: #fff;
-  padding: 16px;
-  border-radius: 4px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-
-  .search-item {
-    display: inline-block;
-    margin-right: 16px;
-    margin-bottom: 10px;
-  }
-}
-
-.btn-group {
-  margin-bottom: 16px;
-
-  .el-button {
-    margin-right: 8px;
-  }
-}
-
-.table-container {
-  background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-}
-
-.pagination-container {
-  margin-top: 20px;
-  text-align: right;
-}
-</style>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
deleted file mode 100644
index 2aea02e..0000000
--- a/src/views/system/user/index.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="search-area">
-      <el-input placeholder="用户名" class="search-item" style="width: 200px" />
-      <el-input placeholder="手机号" class="search-item" style="width: 200px" />
-      <el-select placeholder="状态" class="search-item" style="width: 150px">
-        <el-option label="全部" value="" />
-        <el-option label="启用" value="1" />
-        <el-option label="禁用" value="0" />
-      </el-select>
-      <el-button type="primary" class="search-item">查询</el-button>
-      <el-button class="search-item">重置</el-button>
-    </div>
-
-    <div class="btn-group">
-      <el-button type="primary">新增用户</el-button>
-      <el-button>批量删除</el-button>
-    </div>
-
-    <div class="table-container">
-      <el-table :data="userList" border>
-        <el-table-column type="selection" width="55" />
-        <el-table-column prop="userId" label="用户ID" width="80" />
-        <el-table-column prop="username" label="用户名" />
-        <el-table-column prop="realName" label="真实姓名" />
-        <el-table-column prop="phone" label="手机号" />
-        <el-table-column prop="email" label="邮箱" />
-        <el-table-column prop="roleName" label="角色" />
-        <el-table-column prop="status" label="状态" width="80">
-          <template #default="scope">
-            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
-              {{ scope.row.status === 1 ? '启用' : '禁用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createTime" label="创建时间" />
-        <el-table-column label="操作" width="200">
-          <template #default="scope">
-            <el-button type="text">编辑</el-button>
-            <el-button type="text">分配角色</el-button>
-            <el-button type="text" :type="scope.row.status === 1 ? 'warning' : 'success'">
-              {{ scope.row.status === 1 ? '禁用' : '启用' }}
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-
-    <div class="pagination-container">
-      <el-pagination
-        :current-page="1"
-        :page-size="50"
-        :total="100"
-        layout="total, prev, pager, next, jumper"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const userList = ref([
-  { userId: 1, username: 'admin', realName: '管理员', phone: '13800138000', email: 'admin@example.com', roleName: '超级管理员', status: 1, createTime: '2024-01-01 10:00:00' },
-  { userId: 2, username: 'user1', realName: '张三', phone: '13800138001', email: 'user1@example.com', roleName: '普通用户', status: 1, createTime: '2024-01-02 10:00:00' },
-  { userId: 3, username: 'user2', realName: '李四', phone: '13800138002', email: 'user2@example.com', roleName: '普通用户', status: 0, createTime: '2024-01-03 10:00:00' }
-])
-</script>
-
-<style lang="scss" scoped>
-.app-container {
-  padding: 20px;
-  background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-.search-area {
-  background: #fff;
-  padding: 16px;
-  border-radius: 4px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-
-  .search-item {
-    display: inline-block;
-    margin-right: 16px;
-    margin-bottom: 10px;
-  }
-}
-
-.btn-group {
-  margin-bottom: 16px;
-
-  .el-button {
-    margin-right: 8px;
-  }
-}
-
-.table-container {
-  background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  width: 100%;
-
-  :deep(.el-table) {
-    width: 100%;
-  }
-
-  :deep(.el-table__header-wrapper),
-  :deep(.el-table__body-wrapper) {
-    overflow-x: auto;
-  }
-}
-
-.pagination-container {
-  margin-top: 20px;
-  text-align: right;
-}
-</style>