From 4eb432c321b8f52ec3c1a0f0cc8aa6c626231fa7 Mon Sep 17 00:00:00 2001
From: zonawayne <wangzengming@fanhaninfo.com>
Date: Wed, 4 Jun 2025 21:54:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=85=8D=E7=BD=AE=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=96=87=E4=BB=B6=E4=BC=A0?=
 =?UTF-8?q?=E8=BE=93=E4=BB=A3=E7=90=86=EF=BC=9B=E4=BF=AE=E6=94=B9=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E6=96=87=E4=BB=B6=EF=BC=8C=E5=A2=9E=E5=8A=A0=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=BB=9A=E5=8A=A8=E6=9D=A1=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=9B=E6=9B=B4=E6=96=B0=E5=9C=B0=E5=9B=BE=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E8=B0=83=E6=95=B4=E5=9C=B0=E5=9B=BE=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=92=8C=E5=8A=9F=E8=83=BD=EF=BC=9B=E6=96=B0=E5=A2=9E=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=8D=B3=E5=B0=86=E6=8E=A8?=
 =?UTF-8?q?=E5=87=BA=E7=9A=84=E9=A1=B5=E9=9D=A2=EF=BC=9B=E6=89=A9=E5=B1=95?=
 =?UTF-8?q?=E5=B7=A5=E5=8D=95=E5=AD=98=E5=82=A8=EF=BC=8C=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E5=B7=A5=E5=8D=95=E7=9A=84=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=9B=E6=9B=B4=E6=96=B0=E7=94=A8=E6=88=B7=E5=AD=98=E5=82=A8?=
 =?UTF-8?q?=EF=BC=8C=E6=94=AF=E6=8C=81=E7=94=A8=E6=88=B7=E5=90=8D=E7=9A=84?=
 =?UTF-8?q?=E5=AD=98=E5=82=A8=EF=BC=9B=E4=BF=AE=E5=A4=8D=E8=B5=84=E4=BA=A7?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E8=A7=86=E5=9B=BE=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E8=8E=B7=E5=8F=96=E9=80=BB=E8=BE=91=EF=BC=9B?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BB=AA=E8=A1=A8=E6=9D=BF=E8=A7=86=E5=9B=BE?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=9C=B0=E5=9B=BE=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E5=92=8C=E5=8A=A0=E8=BD=BD=E7=8A=B6=E6=80=81=EF=BC=9B=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=BB=B4=E6=8A=A4=E8=A7=86=E5=9B=BE=EF=BC=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=95=85=E9=9A=9C=E8=AE=BE=E5=A4=87=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=92=8C=E5=A4=84=E7=90=86=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/dataBoard.ts                 |   21 +
 src/components/MapLocationPicker.vue |   20 +-
 src/router/index.ts                  |    6 +
 src/stores/ticket.ts                 |   15 +-
 src/stores/user.ts                   |   10 +-
 src/style.css                        |   46 +-
 src/styles/element-dark.scss         |   57 +-
 src/types/ticket.ts                  |    5 +
 src/views/AssetCategoryView.vue      |   17 +-
 src/views/AssetTreeView.vue          |   22 +-
 src/views/AssetTypeView.vue          |   83 +-
 src/views/ComingSoonView.vue         |  149 ++
 src/views/DashboardView.vue          |    6 +-
 src/views/DataScreenView.vue         | 2189 +++++++++++++++++++-------
 src/views/LightingView.vue           | 1469 +++++++++++++----
 src/views/LoginView.vue              |    3 +-
 src/views/MaintenanceView.vue        |  381 +++--
 vite.config.js                       |    8 +
 18 files changed, 3508 insertions(+), 999 deletions(-)
 create mode 100644 src/api/dataBoard.ts
 create mode 100644 src/views/ComingSoonView.vue

diff --git a/src/api/dataBoard.ts b/src/api/dataBoard.ts
new file mode 100644
index 0000000..9daa129
--- /dev/null
+++ b/src/api/dataBoard.ts
@@ -0,0 +1,21 @@
+import rpc from '../utils/rpc'
+
+// 获取大屏基础数据
+export const fetchBasicData = (params = {}) => {
+  return rpc.post('/dataBoard/basicData', params)
+}
+
+// 获取设备统计数据
+export const fetchDeviceStats = (params = {}) => {
+  return rpc.post('/dataBoard/deviceStats', params)
+}
+
+// 获取能耗数据
+export const fetchEnergyData = (params = {}) => {
+  return rpc.post('/dataBoard/energyData', params)
+}
+
+// 获取故障统计数据
+export const fetchFaultStats = (params = {}) => {
+  return rpc.post('/dataBoard/faultStats', params)
+} 
\ No newline at end of file
diff --git a/src/components/MapLocationPicker.vue b/src/components/MapLocationPicker.vue
index 2f4b997..7e5f423 100644
--- a/src/components/MapLocationPicker.vue
+++ b/src/components/MapLocationPicker.vue
@@ -113,11 +113,25 @@ const initMap = async () => {
       zoom: 15,
       center: [currentLocation.value.lng || 121.4737, currentLocation.value.lat || 31.23037],
       viewMode: '3D',
-      mapStyle: 'amap://styles/dark',
+      mapStyle: 'amap://styles/darkblue',
       features: ['bg', 'building', 'point'],
-      buildingAnimation: true,
-      pitch: 50,
       skyColor: '#1E1E1E',
+      pitch: 40,
+      resizeEnable: true,
+      buildingAnimation: true, // 仅显示背景、建筑物和POI点
+      showBuildingBlock: true,
+      showIndoorMap: false,
+      showLabel: true, // 启用标签显示
+      showRoad: true, // 显示道路提供参考
+      showTraffic: false, // 不显示交通
+      zoomEnable: true, // 确保允许缩放
+      dragEnable: true, // 确保允许拖动
+      scrollWheel: true, // 启用鼠标滚轮缩放
+      keyboardEnable: true, // 启用键盘控制
+      doubleClickZoom: true, // 启用双击缩放
+      touchZoom: true, // 启用触摸缩放
+      jogEnable: true, // 地图
+      logoVisible: false, // 隐藏左下角高德地图标记
     })
 
     // 添加点击事件
diff --git a/src/router/index.ts b/src/router/index.ts
index 1ca166d..b85849f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,6 +7,7 @@ import DataScreenView from '../views/DataScreenView.vue'
 import DefaultLayout from '../layouts/DefaultLayout.vue'
 import { useUserStore } from '../stores/user'
 import AssetTreeView from '../views/AssetTreeView.vue'
+import ComingSoonView from '../views/ComingSoonView.vue'
 
 const router = createRouter({
   history: createWebHistory(),
@@ -48,6 +49,11 @@ const router = createRouter({
       path: '/asset-tree',
       name: 'AssetTree',
       component: AssetTreeView
+    },
+    {
+      path: '/coming-soon',
+      name: 'ComingSoon',
+      component: ComingSoonView
     }
   ]
     }
diff --git a/src/stores/ticket.ts b/src/stores/ticket.ts
index fde8def..0fdd6d6 100644
--- a/src/stores/ticket.ts
+++ b/src/stores/ticket.ts
@@ -71,6 +71,16 @@ export const useTicketStore = defineStore('ticket', () => {
     }
   }
 
+  // 处理接口
+  const processTicket = async (params: any) => {
+    loading.value = true
+    try {
+      await ticketApi.transitionTicket(params)
+    } finally {
+      loading.value = false
+    }
+  }
+
   return {
     ticketList,
     currentTicket,
@@ -80,6 +90,7 @@ export const useTicketStore = defineStore('ticket', () => {
     fetchTicketDetail,
     createTicket,
     updateTicket,
-    deleteTicket
+    deleteTicket,
+    processTicket,
   }
-}) 
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/src/stores/user.ts b/src/stores/user.ts
index 65191e0..272c75c 100644
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@@ -5,10 +5,15 @@ export const useUserStore = defineStore('user', () => {
   // 从本地存储获取初始值
   const nickname = ref(localStorage.getItem('nickname') || '')
   const token = ref(localStorage.getItem('token') || '')
+  const username = ref(localStorage.getItem('username') || '')
 
-  const setUserInfo = (userInfo: { nickname: string; token: string }) => {
+  const setUserInfo = (userInfo: { nickname: string; token: string; username?: string }) => {
     nickname.value = userInfo.nickname
     token.value = userInfo.token
+    if (userInfo.username) {
+      username.value = userInfo.username
+      localStorage.setItem('username', userInfo.username)
+    }
     // 保存到本地存储
     localStorage.setItem('nickname', userInfo.nickname)
     localStorage.setItem('token', userInfo.token)
@@ -17,14 +22,17 @@ export const useUserStore = defineStore('user', () => {
   const clearUserInfo = () => {
     nickname.value = ''
     token.value = ''
+    username.value = ''
     // 清除本地存储
     localStorage.removeItem('nickname')
     localStorage.removeItem('token')
+    localStorage.removeItem('username')
   }
 
   return {
     nickname,
     token,
+    username,
     setUserInfo,
     clearUserInfo
   }
diff --git a/src/style.css b/src/style.css
index 41094c1..72812d0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -124,11 +124,11 @@ body {
 }
 
 /* 状态标识色 */
-.el-tag {
+/* .el-tag {
   background-color: #001529 !important;
   border-color: #13c2c2 !important;
   color: #13c2c2 !important;
-}
+} */
 
 /* 空数据提示 */
 .el-empty__description p {
@@ -202,3 +202,45 @@ body {
   background: #002140 !important;
   padding: 12px;
 }
+
+/* 自定义深蓝科技风滚动条 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(24, 144, 255, 0.3);
+  border-radius: 20px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+  transition: all 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(24, 144, 255, 0.5);
+  border: 2px solid transparent;
+  background-clip: content-box;
+  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3);
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(0, 21, 41, 0.1);
+  border-radius: 20px;
+}
+
+/* 滚动容器的边缘发光效果 */
+.el-scrollbar__wrap,
+.el-table__body-wrapper,
+.el-select-dropdown__wrap,
+.el-cascader-menu__wrap {
+  &:hover::-webkit-scrollbar-thumb {
+    background: rgba(24, 144, 255, 0.4);
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+  
+  scrollbar-width: thin;
+  scrollbar-color: rgba(24, 144, 255, 0.3) transparent;
+}
diff --git a/src/styles/element-dark.scss b/src/styles/element-dark.scss
index 1fd274f..75aa63f 100644
--- a/src/styles/element-dark.scss
+++ b/src/styles/element-dark.scss
@@ -34,7 +34,7 @@
   --el-color-primary-light-5: #41cfff;
   --el-color-primary-light-7: #6eeaff;
   --el-color-primary-light-8: #b3e5ff;
-  --el-color-primary-light-9: #e6f7ff;
+  --el-color-primary-light-9: #1a9fff;
   --el-color-primary-dark-2: #0052cc;
   --el-bg-color-page: #020b1f;
   --el-bg-color-overlay: #0a1a3c;
@@ -43,6 +43,8 @@
   --el-box-shadow-light: 0 0 12px #00c3ff44;
   --el-box-shadow-dark: 0 0 24px #00c3ff88;
 
+  --el-dropdown-menuItem-hover-fill: #00c3ff;
+
   --el-button-hover-text-color: var(--el-text-color-primary);
 
   --el-button-hover-border-color: #188fffd5;
@@ -75,9 +77,52 @@ $--table-row-hover-background-color: rgba(24, 144, 255, 0.08); // 表格行悬
 $--button-default-background-color: transparent;    // 按钮透明背景
 $--button-default-border-color: rgba(255,255,255,0.3); // 按钮边框
 
-.el-tag,
-.el-button--primary {
-  box-shadow: 0 0 12px #00c3ff88, 0 0 2px #6eeaff;
-  text-shadow: 0 0 6px #6eeaff88;
-  border-color: #00c3ff !important;
+// .el-tag,
+// .el-button--primary {
+//   box-shadow: 0 0 12px #00c3ff88, 0 0 2px #6eeaff;
+//   text-shadow: 0 0 6px #6eeaff88;
+//   border-color: #00c3ff !important;
+// }
+
+// Tag 类型色彩方案（深蓝科技风）
+.el-tag--dark.el-tag--info {
+  --el-tag-bg-color: #409EFF;         // 蓝色
+  --el-tag-border-color: #409EFF;
+  --el-tag-text-color: #fff;
+  --el-tag-hover-color: #1a9fff;
+}
+
+.el-tag--dark.el-tag--primary {
+  --el-tag-bg-color: #00c3ff;         // 科技蓝
+  --el-tag-border-color: #00c3ff;
+  --el-tag-text-color: #fff;
+  --el-tag-hover-color: #41cfff;
+}
+
+.el-tag--dark.el-tag--success {
+  --el-tag-bg-color: #67c23a;         // 绿色
+  --el-tag-border-color: #67c23a;
+  --el-tag-text-color: #fff;
+  --el-tag-hover-color: #95d475;
+}
+
+.el-tag--dark.el-tag--warning {
+  --el-tag-bg-color: #e6a23c;         // 橙色
+  --el-tag-border-color: #e6a23c;
+  --el-tag-text-color: #fff;
+  --el-tag-hover-color: #ffb955;
+}
+
+.el-tag--dark.el-tag--danger {
+  --el-tag-bg-color: #f56c6c;         // 红色
+  --el-tag-border-color: #f56c6c;
+  --el-tag-text-color: #fff;
+  --el-tag-hover-color: #ff9999;
+}
+
+.el-tag--dark.el-tag--default {
+  --el-tag-bg-color: #606266;         // 灰色
+  --el-tag-border-color: #606266;
+  --el-tag-text-color: #fff;
+  --el-tag-hover-color: #909399;
 }
diff --git a/src/types/ticket.ts b/src/types/ticket.ts
index fa13393..41fe1bf 100644
--- a/src/types/ticket.ts
+++ b/src/types/ticket.ts
@@ -39,6 +39,11 @@ export interface TicketItem {
   updated_at: string
   contact_info: string
   expected_completion_time?: string
+  process_time?: string
+  fault_time?: string
+  handler?: string
+  images?: string[]
+  dispatch_time?: string
 }
 
 // 工单列表响应接口
diff --git a/src/views/AssetCategoryView.vue b/src/views/AssetCategoryView.vue
index 8dc37c9..3ff3cd2 100644
--- a/src/views/AssetCategoryView.vue
+++ b/src/views/AssetCategoryView.vue
@@ -72,15 +72,18 @@ const currentPage = ref(1)
 const allData = ref<any[]>([])
 
 const fetchList = async () => {
-  const res = await rpc.post('/markType/list', {})
-  const rows = (res as any)?.rows || []
-  allData.value = rows
-  let data = rows
+  const params: any = {
+    page: currentPage.value,
+    limit: pageSize.value,
+    orderby: [{ mark_type_id: 'desc' }]
+  }
   if (filters.keyword) {
-    data = data.filter((item: any) => item.markTypeName?.includes(filters.keyword))
+    params.like = { mark_type_name: ['%' + filters.keyword + '%'] }
   }
-  total.value = data.length
-  tableData.value = data.slice((currentPage.value-1)*pageSize.value, currentPage.value*pageSize.value)
+  const res = await rpc.post('/markType/list', params)
+  const rows = res?.rows || []
+  total.value = res?.count || rows.length
+  tableData.value = rows
 }
 
 const openAddDialog = () => {
diff --git a/src/views/AssetTreeView.vue b/src/views/AssetTreeView.vue
index 408e6ee..40245ec 100644
--- a/src/views/AssetTreeView.vue
+++ b/src/views/AssetTreeView.vue
@@ -187,14 +187,20 @@ const fetchTypeTree = async () => {
 
 // 获取资产列表
 const fetchList = async () => {
-  const res = await rpc.post('/asset/list', {
-    ...filters,
-    pageSize: pageSize.value,
-    currentPage: currentPage.value
-  })
-  const data = res as any
-  tableData.value = data.rows || []
-  total.value = data.total || 0
+  const params: any = {
+    page: currentPage.value,
+    limit: pageSize.value,
+    orderby: [{ id: 'desc' }]
+  }
+  if (filters.keyword) {
+    params.like = { asset_name: ['%' + filters.keyword + '%'] }
+  }
+  if (filters.assetTypeId) {
+    params.and = { asset_type_id: [filters.assetTypeId] }
+  }
+  const res = await rpc.post('/asset/list', params)
+  tableData.value = res?.rows || []
+  total.value = res?.count || 0
 }
 
 // 获取资产分类选项
diff --git a/src/views/AssetTypeView.vue b/src/views/AssetTypeView.vue
index c2b1084..39b9bfa 100644
--- a/src/views/AssetTypeView.vue
+++ b/src/views/AssetTypeView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="asset-type-page">
     <!-- 顶部筛选区 -->
-    
+
 
     <!-- 主表格区 -->
     <el-card class="table-card">
@@ -16,16 +16,11 @@
           <el-button type="success" @click="openAddDialog">新增资产类型</el-button>
         </el-form-item>
       </el-form>
-      <el-table
-        :data="tableData"
-        row-key="id"
-        border
-        style="width: 100%;"
-      >
+      <el-table :data="tableData" row-key="id" border style="width: 100%;">
         <el-table-column prop="assetTypeName" label="类型名称" min-width="120" />
         <el-table-column prop="parentId" label="父类型" min-width="120">
           <template #default="{ row }">
-            {{ row.parentId ? parentOptions.find(item => item.id === row.parentId)?.assetTypeName || '-' : '-' }}
+            {{row.parentId ? parentOptions.find(item => item.id === row.parentId)?.assetTypeName || '-' : '-'}}
           </template>
         </el-table-column>
         <el-table-column prop="remark" label="备注" min-width="120" />
@@ -36,34 +31,22 @@
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination
-        style="margin: 16px 0 0; text-align: right"
-        background
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        :page-size="pageSize"
-        :current-page="currentPage"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :page-sizes="[10, 20, 50, 100]"
-      />
+      <el-pagination style="margin: 16px 0 0; text-align: right" background
+        layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="pageSize"
+        :current-page="currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :page-sizes="[10, 20, 50, 100]" />
     </el-card>
 
     <!-- 新增/编辑弹窗 -->
-    <el-dialog v-model="showDialog" :title="dialogType==='add'?'新增资产类型':'编辑资产类型'" width="500px">
+    <el-dialog v-model="showDialog" :title="dialogType === 'add' ? '新增资产类型' : '编辑资产类型'" width="500px">
       <el-form :model="form" label-width="100px">
         <el-form-item label="类型名称" required>
           <el-input v-model="form.assetTypeName" />
         </el-form-item>
         <el-form-item label="父类型">
           <el-select v-model="form.parentId" placeholder="请选择父类型" clearable>
-            <el-option
-              v-for="item in parentOptions"
-              :key="item.id"
-              :label="item.assetTypeName"
-              :value="item.id"
-              :disabled="dialogType === 'edit' && item.id === form.id"
-            />
+            <el-option v-for="item in parentOptions" :key="item.id" :label="item.assetTypeName" :value="item.id"
+              :disabled="dialogType === 'edit' && item.id === form.id" />
           </el-select>
         </el-form-item>
         <el-form-item label="备注">
@@ -72,7 +55,7 @@
         <!-- 可根据接口补充attrs/assetAttrs等字段 -->
       </el-form>
       <template #footer>
-        <el-button @click="showDialog=false">取消</el-button>
+        <el-button @click="showDialog = false">取消</el-button>
         <el-button type="primary" @click="submitForm">确定</el-button>
       </template>
     </el-dialog>
@@ -87,7 +70,7 @@ import rpc from '../utils/rpc'
 const tableData = ref<any[]>([])
 const parentOptions = ref<any[]>([])
 const showDialog = ref(false)
-const dialogType = ref<'add'|'edit'>('add')
+const dialogType = ref<'add' | 'edit'>('add')
 const form = reactive<any>({})
 const filters = reactive({ keyword: '' })
 const total = ref(0)
@@ -96,22 +79,23 @@ const currentPage = ref(1)
 
 // 获取父类型选项
 const fetchParentOptions = async () => {
-  const res = await rpc.post('/assetType/list', {})
+  const res = await rpc.post('/assetType/list', { limit: -1 })
   parentOptions.value = (res as any)?.rows || []
 }
 
 const fetchList = async () => {
-  const res = await rpc.post('/assetType/list', {})
-  let rows = (res as any)?.rows || []
-  // 关键词过滤
+  const params: any = {
+    page: currentPage.value,
+    limit: pageSize.value,
+    orderby: [{ id: 'asc' }]
+  }
   if (filters.keyword) {
-    rows = rows.filter((item:any) => 
-      item.assetTypeName?.includes(filters.keyword) || 
-      parentOptions.value.find(p => p.id === item.parentId)?.assetTypeName?.includes(filters.keyword)
-    )
+    params.like = { asset_type_name: ['%' + filters.keyword + '%'] }
   }
-  total.value = rows.length
-  tableData.value = rows.slice((currentPage.value-1)*pageSize.value, currentPage.value*pageSize.value)
+  const res = await rpc.post('/assetType/list', params)
+  let rows = res?.rows || []
+  total.value = res?.count || rows.length
+  tableData.value = rows
 }
 
 const openAddDialog = () => {
@@ -133,11 +117,12 @@ const openEditDialog = (row: any) => {
 const handleDelete = (row: any) => {
   ElMessageBox.confirm('确定删除该资产类型吗？', '提示', { type: 'warning' })
     .then(async () => {
-      await rpc.post('/assetType/delete', { id: row.id })
+      await rpc.post('/assetType/delete', { id: row.id }
+      )
       ElMessage.success('删除成功')
       fetchList()
     })
-    .catch(() => {})
+    .catch(() => { })
 }
 
 const submitForm = async () => {
@@ -146,10 +131,12 @@ const submitForm = async () => {
     return
   }
   if (dialogType.value === 'add') {
-    await rpc.post('/assetType/create', form)
+    await rpc.post('/assetType/create', form
+    )
     ElMessage.success('新增成功')
   } else {
-    await rpc.post('/assetType/update', form)
+    await rpc.post('/assetType/update', form
+    )
     ElMessage.success('编辑成功')
   }
   showDialog.value = false
@@ -181,6 +168,7 @@ onMounted(() => {
   padding: 20px;
   box-sizing: border-box;
 }
+
 .filter-card {
   background: transparent;
   border: none;
@@ -188,9 +176,11 @@ onMounted(() => {
   margin-bottom: 16px;
   padding: 0;
 }
+
 .filter-form {
   padding: 0 0 8px 0;
 }
+
 .table-card {
   flex: 1;
   display: flex;
@@ -200,23 +190,28 @@ onMounted(() => {
   box-shadow: 0 0 20px #0003;
   padding: 0 0 16px 0;
 }
+
 .el-table {
   background: transparent;
   color: #e6f7ff;
 }
+
 .el-table th {
   background: #002140;
   color: #6eeaff;
   font-weight: bold;
   font-size: 15px;
 }
+
 .el-table .el-button {
   box-shadow: 0 0 8px #00c3ff88;
   border-radius: 4px;
 }
+
 .el-pagination {
   margin-top: 16px;
 }
+
 :deep(.el-select .el-input__wrapper) {
   background: rgba(0, 33, 64, 0.5);
   box-shadow: 0 0 0 1px rgba(0, 195, 255, 0.2);
@@ -247,4 +242,4 @@ onMounted(() => {
   color: #00c3ff;
   background: rgba(0, 195, 255, 0.2);
 }
-</style> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/views/ComingSoonView.vue b/src/views/ComingSoonView.vue
new file mode 100644
index 0000000..303f701
--- /dev/null
+++ b/src/views/ComingSoonView.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="coming-soon-container">
+    <!-- 动画层 -->
+    <div class="bg-animate">
+      <div class="bg-circle"></div>
+      <div class="bg-circle bg-circle2"></div>
+      <div class="bg-light"></div>
+    </div>
+    
+    <!-- Main content -->
+    <div class="main-content">
+      <div class="message-box">
+        <div class="icon">
+          <i class="building-icon"></i>
+        </div>
+        <h1>功能暂未开放</h1>
+        <div class="back-button" @click="router.push('/')">
+          返回首页
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+</script>
+
+<style scoped>
+.coming-soon-container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(180deg, #041236 0%, #02081A 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+/* 动画层样式 */
+.bg-animate {
+  position: absolute;
+  left: 50%; top: 50%;
+  transform: translate(-50%, -50%);
+  width: 120vw; height: 120vh;
+  pointer-events: none;
+  z-index: 0;
+}
+.bg-circle {
+  position: absolute;
+  left: 50%; top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  border: 2px solid #00c3ff55;
+  width: 60vw; height: 60vw;
+  animation: rotate 16s linear infinite;
+  box-shadow: 0 0 80px 20px #00c3ff33, 0 0 200px 40px #00c3ff22 inset;
+}
+.bg-circle2 {
+  width: 40vw; height: 40vw;
+  border: 2px dashed #00c3ff33;
+  animation: rotate-rev 24s linear infinite;
+  opacity: 0.7;
+}
+.bg-light {
+  position: absolute;
+  left: 50%; top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100vw; height: 100vw;
+  background: conic-gradient(from 0deg, #00c3ff33 0deg 60deg, transparent 60deg 360deg);
+  border-radius: 50%;
+  filter: blur(40px);
+  animation: rotate 10s linear infinite;
+  opacity: 0.5;
+}
+@keyframes rotate {
+  0% { transform: translate(-50%, -50%) rotate(0deg);}
+  100% { transform: translate(-50%, -50%) rotate(360deg);}
+}
+@keyframes rotate-rev {
+  0% { transform: translate(-50%, -50%) rotate(0deg);}
+  100% { transform: translate(-50%, -50%) rotate(-360deg);}
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+}
+
+.message-box {
+  background: rgba(11, 37, 96, 0.7);
+  border: 1px solid #0066ff;
+  border-radius: 10px;
+  padding: 40px;
+  text-align: center;
+  box-shadow: 0 0 30px rgba(0, 102, 255, 0.3);
+  max-width: 500px;
+  width: 90%;
+}
+
+.icon {
+  margin-bottom: 20px;
+}
+
+.building-icon {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  background: linear-gradient(135deg, #0066ff, #00c3ff);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 4c-3.3 0-6 2.7-6 6 0 1.9.9 3.6 2.2 4.7-.6.6-1.4 1-2.2 1.3V14c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v8h7v-2h4v2h9v-5h-3.5c.3-.8.5-1.6.5-2.5 0-3.3-2.7-6-6-6zm0 10c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z'/%3E%3C/svg%3E") no-repeat center;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 4c-3.3 0-6 2.7-6 6 0 1.9.9 3.6 2.2 4.7-.6.6-1.4 1-2.2 1.3V14c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v8h7v-2h4v2h9v-5h-3.5c.3-.8.5-1.6.5-2.5 0-3.3-2.7-6-6-6zm0 10c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z'/%3E%3C/svg%3E") no-repeat center;
+}
+
+h1 {
+  color: #ffffff;
+  font-size: 28px;
+  margin-bottom: 15px;
+  text-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
+}
+
+p {
+  color: #a0c8ff;
+  font-size: 16px;
+  margin-bottom: 30px;
+}
+
+.back-button {
+  background: linear-gradient(180deg, #0A3677 0%, #041A47 100%);
+  color: white;
+  padding: 10px 30px;
+  border-radius: 4px;
+  font-size: 16px;
+  display: inline-block;
+  border: 1px solid #0066ff;
+  box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
+  cursor: pointer;
+  transition: box-shadow 0.3s;
+}
+
+.back-button:hover {
+  box-shadow: 0 0 20px rgba(0, 102, 255, 0.8);
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
index 5a9c0a6..936cf1d 100644
--- a/src/views/DashboardView.vue
+++ b/src/views/DashboardView.vue
@@ -40,11 +40,11 @@ const activeModuleIndex = ref(3); // Data visualization screen is active by defa
 
 const modules = [
   { title: '照明监控系统', icon: 'camera', route: '/lighting' },
-  { title: '视频监控系统', icon: 'video', route: '/' },
-  { title: '分析决策系统', icon: 'chart', route: '/' },
+  { title: '视频监控系统', icon: 'video', route: '/coming-soon' },
+  { title: '分析决策系统', icon: 'chart', route: '/coming-soon' },
   { title: '数据可视大屏', icon: 'screen', route: '/datascreen' },
   { title: '资产管理系统', icon: 'asset', route: '/asset-tree' },
-  { title: '指挥调度系统', icon: 'command', route: '/' },
+  { title: '指挥调度系统', icon: 'command', route: '/coming-soon' },
   { title: '维护工单系统', icon: 'maintenance', route: '/maintenance' }
 ];
 
diff --git a/src/views/DataScreenView.vue b/src/views/DataScreenView.vue
index 4faba32..c8e31c2 100644
--- a/src/views/DataScreenView.vue
+++ b/src/views/DataScreenView.vue
@@ -1,5 +1,28 @@
 <template>
   <div class="data-screen-container">
+    <!-- 地图背景 -->
+    <div class="map-background" style="z-index: 1; pointer-events: auto;">
+      <!-- 地图加载指示器 -->
+      <div class="map-loading" v-if="mapLoading">
+        <div class="loading-spinner"></div>
+        <div class="loading-text">地图加载中...</div>
+      </div>
+      
+      <!-- 地图容器 - 增加内联样式确保可见和允许事件 -->
+      <div ref="amapContainer" class="city-map" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; pointer-events: auto;"></div>
+      
+      <!-- 地图效果层 - 确保不阻止鼠标事件 -->
+      <div class="map-effect-layer" style="pointer-events: none;"></div>
+    </div>
+    
+    <!-- 地图控制器 -->
+    <div class="map-controls">
+      <div class="control-btn" @click="zoomIn" role="button" tabindex="0">+</div>
+      <div class="control-btn" @click="zoomOut" role="button" tabindex="0">-</div>
+      <div class="control-btn" @click="resetMap" role="button" tabindex="0"><i class="map-home-icon"></i></div>
+      <div class="control-btn" @click="locateToCurrentPosition" role="button" tabindex="0"><i class="map-location-icon"></i></div>
+    </div>
+
     <!-- 顶部标题 -->
     <div class="screen-header">
       <div class="header-left" />
@@ -7,23 +30,20 @@
       <div class="header-right" />
     </div>
 
+    <!-- 加载状态指示器 -->
+    <div class="loading-overlay" v-if="loading">
+      <div class="loading-spinner"></div>
+      <div class="loading-text">数据加载中...</div>
+    </div>
+
     <!-- 设备总览 -->
     <div class="device-overview">
-      <div class="device-card">
-        <div class="card-value">0</div>
-        <div class="card-label">配电柜</div>
-      </div>
-      <div class="device-card">
-        <div class="card-value">0</div>
-        <div class="card-label">灯杆</div>
-      </div>
-      <div class="device-card">
-        <div class="card-value">0</div>
-        <div class="card-label">线缆</div>
-      </div>
-      <div class="device-card">
-        <div class="card-value">1</div>
-        <div class="card-label">灯具</div>
+      <div v-for="(item, index) in deviceOverviewItems" :key="index" 
+           class="device-card" 
+           :class="{'animate-in': !loading}"
+           :style="{'animation-delay': index * 0.2 + 's'}">
+        <div class="card-value">{{ item.value }}</div>
+        <div class="card-label">{{ item.label }}</div>
       </div>
     </div>
 
@@ -36,7 +56,7 @@
           <div class="title-text">中心城区资产统计</div>
         </div>
 
-        <div class="panel-content">
+        <div class="panel-content" :class="{'animate-in': !loading}" style="animation-delay: 0.3s">
           <div class="asset-info">
             <div class="asset-item">
               <div class="item-label">配电柜：</div>
@@ -68,49 +88,28 @@
         </div>
 
         <!-- 物联网设备 -->
-        <div class="iot-devices">
+        <div class="iot-devices" :class="{'animate-in': !loading}" style="animation-delay: 0.5s">
           <div class="panel-title">
             <div class="title-icon" />
             <div class="title-text">物联网设备</div>
           </div>
 
           <div class="iot-list">
-            <div class="iot-item">
-              <div class="item-label">监控终端</div>
-              <div class="item-value">0</div>
-            </div>
-            <div class="iot-item">
-              <div class="item-label">单灯控制器</div>
-              <div class="item-value">0</div>
-            </div>
-            <div class="iot-item">
-              <div class="item-label">照度监测器</div>
-              <div class="item-progress-container">
-                <div class="item-progress" style="width: 50%" />
-              </div>
-              <div class="item-value">1</div>
-            </div>
-            <div class="iot-item">
-              <div class="item-label">摄像头</div>
-              <div class="item-progress-container">
-                <div class="item-progress" style="width: 50%" />
+            <div class="iot-item" v-for="(device, index) in iotDevices" :key="index" 
+                 :class="{'animate-in': !loading}"
+                 :style="{'animation-delay': (0.5 + index * 0.1) + 's'}">
+              <div class="item-label">{{ device.label }}</div>
+              <div class="item-progress-container" v-if="device.showProgress">
+                <div class="item-progress" :style="{ width: (device.value / 10 * 100) + '%' }"></div>
               </div>
-              <div class="item-value">1</div>
-            </div>
-            <div class="iot-item">
-              <div class="item-label">车辆</div>
-              <div class="item-value">0</div>
+              <div class="item-value">{{ device.value }}</div>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- 中央地图区域 -->
-      <div class="map-area">
-        <div class="map-content">
-          <!-- 地图和站点标注 -->
-          <div id="amap-container" class="city-map"></div>
-        </div>
+      <!-- 内容占位区域，替代原地图区域 -->
+      <div class="center-content-area">
       </div>
 
       <!-- 右侧面板 -->
@@ -120,15 +119,15 @@
           <div class="title-text">中心城区能耗与实时负荷</div>
         </div>
 
-        <div class="panel-content">
+        <div class="panel-content" :class="{'animate-in': !loading}" style="animation-delay: 0.4s">
           <div class="energy-battery">
             <div class="battery-icon">
-              <div class="battery-level" />
+              <div class="battery-level"></div>
             </div>
             <div class="energy-stats">
-              <div class="energy-item">本年累计能耗：<span class="highlight">50.81 kW·h</span></div>
-              <div class="energy-item">当月累计能耗：<span class="highlight">50.81 kW·h</span></div>
-              <div class="energy-item">去年同月能耗：<span class="highlight">0.00 kW·h</span></div>
+              <div class="energy-item">本年累计能耗：<span class="highlight">{{ energyStats.yearTotal }} kW·h</span></div>
+              <div class="energy-item">当月累计能耗：<span class="highlight">{{ energyStats.monthTotal }} kW·h</span></div>
+              <div class="energy-item">去年同月能耗：<span class="highlight">{{ energyStats.lastYearMonth }} kW·h</span></div>
             </div>
           </div>
 
@@ -138,15 +137,9 @@
               <div class="chart-title">实时负荷</div>
               <div class="chart-unit">单位：kW</div>
             </div>
-            <div class="load-chart" ref="loadChart" />
+            <div class="load-chart" ref="loadChart"></div>
             <div class="chart-timeline">
-              <div class="time-label">00:00</div>
-              <div class="time-label">03:40</div>
-              <div class="time-label">07:20</div>
-              <div class="time-label">11:00</div>
-              <div class="time-label">14:40</div>
-              <div class="time-label">18:20</div>
-              <div class="time-label">22:00</div>
+              <div class="time-label" v-for="(time, index) in timeLabels" :key="index">{{ time }}</div>
             </div>
           </div>
 
@@ -156,21 +149,21 @@
             <div class="section-unit">单位：kW·h</div>
 
             <div class="energy-efficiency">
-              <div class="efficiency-chart" ref="efficiencyChart" />
+              <div class="efficiency-chart" ref="efficiencyChart"></div>
               <div class="efficiency-stats">
                 <div class="efficiency-label">额定能耗</div>
-                <div class="efficiency-value">0kW·h</div>
+                <div class="efficiency-value">{{ cableStats.rated }}kW·h</div>
                 <div class="efficiency-label">实际能耗</div>
-                <div class="efficiency-value">0kW·h</div>
+                <div class="efficiency-value">{{ cableStats.actual }}kW·h</div>
                 <div class="efficiency-label">节省能耗</div>
-                <div class="efficiency-value">0kW·h</div>
+                <div class="efficiency-value">{{ cableStats.saved }}kW·h</div>
               </div>
             </div>
           </div>
         </div>
 
         <!-- 实时故障统计 -->
-        <div class="fault-stats">
+        <div class="fault-stats" :class="{'animate-in': !loading}" style="animation-delay: 0.6s">
           <div class="panel-title">
             <div class="title-icon" />
             <div class="title-text">实时故障统计</div>
@@ -183,10 +176,13 @@
               <div class="th">时间</div>
             </div>
             <div class="table-body">
-              <div class="table-row" v-for="i in 5" :key="i">
-                <div class="td">001 泰林交道</div>
-                <div class="td">供电缺相</div>
-                <div class="td">2025-03-27 18:30:15</div>
+              <div class="table-row" 
+                   v-for="(fault, index) in faults" :key="index"
+                   :class="{'animate-in': !loading}"
+                   :style="{'animation-delay': (0.6 + index * 0.1) + 's'}">
+                <div class="td">{{ fault.deviceName }}</div>
+                <div class="td">{{ fault.content }}</div>
+                <div class="td">{{ fault.time }}</div>
               </div>
             </div>
           </div>
@@ -197,41 +193,930 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, shallowRef } from 'vue'
+import { ref, onMounted, onUnmounted, shallowRef, nextTick } from 'vue'
 import * as echarts from 'echarts'
+import { fetchBasicData } from '../api/dataBoard'
+import AMapLoader from '@amap/amap-jsapi-loader'
+
+// 数据加载状态
+const loading = ref(true)
+const mapLoading = ref(true)
+
+// 大屏数据
+const screenData = ref({})
+
+// 设备概览数据
+const deviceOverviewItems = ref([
+  { label: '配电柜', value: 0 },
+  { label: '灯杆', value: 0 },
+  { label: '线缆', value: 0 },
+  { label: '灯具', value: 0 }
+])
+
+// 物联网设备数据
+const iotDevices = ref([
+  { label: '监控终端', value: 0, showProgress: false },
+  { label: '单灯控制器', value: 0, showProgress: false },
+  { label: '照度监测器', value: 1, showProgress: true },
+  { label: '摄像头', value: 1, showProgress: true },
+  { label: '车辆', value: 0, showProgress: false }
+])
+
+// 能耗统计
+const energyStats = ref({
+  yearTotal: '50.81',
+  monthTotal: '50.81',
+  lastYearMonth: '0.00'
+})
 
-const map = shallowRef(null)
+// 时间标签
+const timeLabels = ref(['00:00', '03:40', '07:20', '11:00', '14:40', '18:20', '22:00'])
 
-const createMap = () => {
-  if (!window.AMap) return
+// 线缆统计
+const cableStats = ref({
+  rated: '0',
+  actual: '0',
+  saved: '0'
+})
+
+// 故障数据
+const faults = ref([
+  { deviceName: '001 泰林交道', content: '供电缺相', time: '2025-03-27 18:30:15' },
+  { deviceName: '002 高新大道', content: '通信异常', time: '2025-03-27 17:15:22' },
+  { deviceName: '003 科技路', content: '路灯损坏', time: '2025-03-27 16:45:08' },
+  { deviceName: '004 双湖大道', content: '电压波动', time: '2025-03-27 15:20:36' },
+  { deviceName: '005 湖心路', content: '设备离线', time: '2025-03-27 14:10:55' }
+])
+
+// 加载完成后在异步函数外部声明的变量
+const userLocationData = ref(null);
+
+// 定义常用城市中心点位置
+const commonCityCenters = {
+  beijing: [116.397428, 39.90923], // 北京
+  shanghai: [121.473667, 31.230525], // 上海
+  guangzhou: [113.264385, 23.129112], // 广州
+  shenzhen: [114.057868, 22.543099], // 深圳
+  hangzhou: [120.15507, 30.274085], // 杭州
+  chengdu: [104.065735, 30.659462], // 成都
+  wuhan: [114.305393, 30.593099], // 武汉
+  xian: [108.946609, 34.347861], // 西安
+  nanjing: [118.796877, 32.060255], // 南京
+  chongqing: [106.551556, 29.563009] // 重庆
+};
+
+// 使用备用位置处理
+const fallbackToDefaultLocation = (showNotification = false) => {
+  console.log('使用备用位置');
+  
+  if (!map.value) return;
+  
+  // 使用默认中心点（北京）
+  const defaultCity = commonCityCenters.beijing;
+  
+  // 如果需要显示通知
+  if (showNotification) {
+    const noticeDiv = document.createElement('div');
+    noticeDiv.className = 'location-notice';
+    noticeDiv.innerHTML = '<span>使用默认位置：北京</span>';
+    document.body.appendChild(noticeDiv);
+    
+    // 2秒后自动移除通知
+    setTimeout(() => {
+      document.body.removeChild(noticeDiv);
+    }, 2000);
+  }
+  
+  // 设置地图中心点
+  map.value.setZoomAndCenter(defaultZoom, defaultCity);
+  
+  // 添加默认位置标记（使用不同样式）
+  addDefaultLocationMarker(defaultCity);
+};
+
+// 添加默认位置标记
+const addDefaultLocationMarker = (position) => {
+  if (!map.value) return;
+  
+  // 清除之前的定位标记
+  if (window.currentLocationMarker) {
+    map.value.remove(window.currentLocationMarker);
+  }
+  
+  // 清除之前的脉冲效果
+  if (window.locationPulseMarker) {
+    map.value.remove(window.locationPulseMarker);
+  }
   
-  map.value = new window.AMap.Map('amap-container', {
-    zoom: 11,
-    center: [116.397428, 39.90923]
-  })
+  // 使用默认的系统标记
+  const marker = new window.AMap.Marker({
+    position: position,
+    icon: new window.AMap.Icon({
+      // 使用蓝色默认标记
+      size: new window.AMap.Size(24, 24),
+      image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzMzOTlmZiI+PHBhdGggZD0iTTEyIDJDOC4xMyAyIDUgNS4xMyA1IDljMCA1LjI1IDcgMTMgNyAxM3M3LTcuNzUgNy0xM2MwLTMuODctMy4xMy03LTctN3ptMCA5LjVjLTEuMzggMC0yLjUtMS4xMi0yLjUtMi41czEuMTItMi41IDIuNS0yLjUgMi41IDEuMTIgMi41IDIuNS0xLjEyIDIuNS0yLjUgMi41eiIvPjwvc3ZnPg==',
+      imageSize: new window.AMap.Size(24, 24)
+    }),
+    offset: new window.AMap.Pixel(-12, -12),
+    zIndex: 110,
+    title: '默认位置'
+  });
   
-  map.value?.addControl(new window.AMap.ControlBar())
+  // 添加到地图
+  map.value.add(marker);
   
-  const amarker = new window.AMap.Marker({
-    position: [116.397428, 39.90923],
-    title: '北京市'
-  })
+  // 保存引用以便后续清除
+  window.currentLocationMarker = marker;
+};
+
+// 获取大屏数据
+const fetchScreenData = async () => {
+  loading.value = true
+  try {
+    const result = await fetchBasicData()
+    screenData.value = result
+    console.log('大屏数据:', result)
+    // 更新显示数据
+    updateScreenDisplay()
+  } catch (error) {
+    console.error('获取大屏数据失败:', error)
+  } finally {
+    // 延迟关闭加载状态，展示动画效果
+    setTimeout(() => {
+      loading.value = false
+    }, 800)
+  }
+}
+
+// 更新显示数据
+const updateScreenDisplay = () => {
+  // 根据API返回数据更新页面显示
+  // 这里需要根据实际API返回的数据结构来实现
   
-  amarker.on('click', () => {
-    new window.AMap.InfoWindow({
-      content: '北京市',
-      offset: new window.AMap.Pixel(0, -30)
-    }).open(map.value, amarker.getPosition())
-  })
+  // 假设API返回的数据格式如下
+  if (screenData.value) {
+    const data = screenData.value
+    
+    // 更新设备概览
+    if (data.deviceStats) {
+      deviceOverviewItems.value = [
+        { label: '配电柜', value: data.deviceStats?.cabinets || 0 },
+        { label: '灯杆', value: data.deviceStats?.poles || 0 },
+        { label: '线缆', value: data.deviceStats?.cables || 0 },
+        { label: '灯具', value: data.deviceStats?.lights || 1 }
+      ]
+    }
+    
+    // 更新物联网设备
+    if (data.iotDevices) {
+      iotDevices.value = [
+        { label: '监控终端', value: data.iotDevices?.terminals || 0, showProgress: false },
+        { label: '单灯控制器', value: data.iotDevices?.controllers || 0, showProgress: false },
+        { label: '照度监测器', value: data.iotDevices?.illuminanceSensors || 1, showProgress: true },
+        { label: '摄像头', value: data.iotDevices?.cameras || 1, showProgress: true },
+        { label: '车辆', value: data.iotDevices?.vehicles || 0, showProgress: false }
+      ]
+    }
+    
+    // 更新能耗统计
+    if (data.energyStats) {
+      energyStats.value = {
+        yearTotal: data.energyStats?.yearTotal || '50.81',
+        monthTotal: data.energyStats?.monthTotal || '50.81',
+        lastYearMonth: data.energyStats?.lastYearMonth || '0.00'
+      }
+    }
+    
+    // 更新线缆统计
+    if (data.cableStats) {
+      cableStats.value = {
+        rated: data.cableStats?.rated || '0',
+        actual: data.cableStats?.actual || '0',
+        saved: data.cableStats?.saved || '0'
+      }
+    }
+    
+    // 更新故障数据
+    if (data.faults && data.faults.length > 0) {
+      faults.value = data.faults.map(fault => ({
+        deviceName: fault.deviceName || '',
+        content: fault.content || '',
+        time: fault.time || ''
+      }))
+    }
+    
+    // 更新图表数据
+    updateCharts(data)
+  }
+}
+
+  const map = shallowRef(null)
+  const defaultCenter = [116.397428, 39.90923]
+  const defaultZoom = 11 // 提高默认缩放级别以显示建筑物
+  const amapContainer = ref(null);
   
-  map.value?.add(amarker)
+  // 调试地图加载状态
+  console.log('初始化地图变量', { mapLoading: mapLoading.value, amapContainer: !!amapContainer.value });
+
+// 地图控制方法
+const zoomIn = () => {
+  console.log('尝试放大地图', map.value);
+  if (map.value) {
+    try {
+      const zoom = map.value.getZoom();
+      console.log('当前缩放级别:', zoom);
+      map.value.setZoom(zoom + 1);
+      console.log('放大地图成功');
+    } catch (e) {
+      console.error('放大地图失败:', e);
+    }
+  } else {
+    console.warn('地图实例不存在，无法放大');
+  }
 }
 
-onMounted(() => {
-  if (window.AMap) {
-    createMap()
+const zoomOut = () => {
+  console.log('尝试缩小地图', map.value);
+  if (map.value) {
+    try {
+      const zoom = map.value.getZoom();
+      console.log('当前缩放级别:', zoom);
+      map.value.setZoom(zoom - 1);
+      console.log('缩小地图成功');
+    } catch (e) {
+      console.error('缩小地图失败:', e);
+    }
+  } else {
+    console.warn('地图实例不存在，无法缩小');
   }
-})
+}
+
+const resetMap = () => {
+  console.log('尝试重置地图', map.value);
+  if (map.value) {
+    try {
+      map.value.setZoomAndCenter(defaultZoom, defaultCenter);
+      console.log('重置地图成功');
+    } catch (e) {
+      console.error('重置地图失败:', e);
+    }
+  } else {
+    console.warn('地图实例不存在，无法重置');
+  }
+}
+
+// 定位到当前位置
+const locateToCurrentPosition = (showLoading = true) => {
+  console.log('尝试定位到当前位置');
+  
+  if (!map.value) {
+    console.warn('地图实例不存在，无法定位');
+    fallbackToDefaultLocation(showLoading);
+    return;
+  }
+  
+  // 跟踪定位尝试，避免重复操作
+  if (window.isLocating) {
+    console.log('当前已有定位操作，忽略请求');
+    return;
+  }
+  
+  // 标记正在定位
+  window.isLocating = true;
+  
+  // 显示加载状态
+  let loadingDiv = null;
+  if (showLoading) {
+    loadingDiv = document.createElement('div');
+    loadingDiv.className = 'location-loading';
+    loadingDiv.innerHTML = '<span>正在获取位置...</span>';
+    document.body.appendChild(loadingDiv);
+  }
+  
+  // 设置获取位置的超时
+  const timeoutId = setTimeout(() => {
+    console.warn('获取位置超时，使用默认位置');
+    window.isLocating = false;
+    if (showLoading && loadingDiv) {
+      document.body.removeChild(loadingDiv);
+    }
+    fallbackToDefaultLocation(showLoading);
+  }, 10000);
+  
+  // 先检查浏览器是否支持地理定位
+  if (navigator.geolocation) {
+    
+    // 获取当前位置
+    navigator.geolocation.getCurrentPosition(
+      // 成功回调
+      (position) => {
+        // 清除超时计时器
+        clearTimeout(timeoutId);
+        
+        try {
+          const { latitude, longitude } = position.coords;
+          console.log('获取当前位置成功:', latitude, longitude);
+          
+          // 保存获取到的位置信息
+          userLocationData.value = { latitude, longitude };
+          
+          // 可能需要坐标系转换 (WGS84 to GCJ02)
+          if (window.AMap && window.AMap.convertFrom) {
+            window.AMap.convertFrom([longitude, latitude], 'gps', (status, result) => {
+              if (result.info === 'ok') {
+                const convertedPos = result.locations[0];
+                map.value.setZoomAndCenter(15, convertedPos);
+                
+                // 添加标记
+                addLocationMarker([convertedPos.lng, convertedPos.lat]);
+              } else {
+                // 坐标转换失败时直接使用
+                console.warn('坐标转换失败，使用原始坐标:', status);
+                map.value.setZoomAndCenter(15, [longitude, latitude]);
+                
+                // 添加标记
+                addLocationMarker([longitude, latitude]);
+              }
+            });
+          } else {
+            // 没有转换方法时直接使用
+            console.warn('地图API不支持坐标转换，使用原始坐标');
+            map.value.setZoomAndCenter(15, [longitude, latitude]);
+            
+            // 添加标记
+            addLocationMarker([longitude, latitude]);
+          }
+        } catch (e) {
+          console.error('设置当前位置失败:', e);
+        } finally {
+          // 清除定位标记
+          window.isLocating = false;
+          
+          // 移除加载状态
+          if (showLoading && loadingDiv) {
+            document.body.removeChild(loadingDiv);
+          }
+        }
+      },
+      // 错误回调
+      (error) => {
+        // 清除超时计时器
+        clearTimeout(timeoutId);
+        
+        console.error('获取当前位置失败:', error.message);
+        
+        // 根据错误类型显示不同消息
+        let errorMsg = '获取位置失败';
+        switch (error.code) {
+          case error.PERMISSION_DENIED:
+            errorMsg = '您已拒绝位置请求，请在浏览器设置中允许位置访问';
+            break;
+          case error.POSITION_UNAVAILABLE:
+            errorMsg = '位置信息不可用';
+            break;
+          case error.TIMEOUT:
+            errorMsg = '获取位置请求超时';
+            break;
+        }
+        
+        // 只在用户主动请求定位时显示错误提示
+        if (showLoading) {
+          alert(errorMsg);
+        } else {
+          console.warn(errorMsg);
+        }
+        
+        // 使用备用位置
+        fallbackToDefaultLocation(showLoading);
+        
+        // 清除定位标记
+        window.isLocating = false;
+        
+        // 移除加载状态
+        if (showLoading && loadingDiv) {
+          document.body.removeChild(loadingDiv);
+        }
+      },
+      // 选项
+      {
+        enableHighAccuracy: true, // 高精度
+        timeout: 10000, // 超时时间
+        maximumAge: 0 // 不使用缓存
+      }
+    );
+  } else {
+    console.error('浏览器不支持地理定位');
+    alert('您的浏览器不支持地理定位功能');
+  }
+}
+
+// 添加当前位置标记
+const addLocationMarker = (position) => {
+  if (!map.value) return;
+  
+  // 清除之前的定位标记
+  if (window.currentLocationMarker) {
+    map.value.remove(window.currentLocationMarker);
+  }
+  
+  // 创建新的标记
+  const marker = new window.AMap.Marker({
+    position: position,
+    icon: new window.AMap.Icon({
+      // 使用自定义图标
+      size: new window.AMap.Size(24, 24),
+      image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzAwZmZmZiI+PHBhdGggZD0iTTEyIDhhNCA0IDAgMTAgOCAwIDQgNCAwIDAwLTh6bTAgMTBjLTIuNjcgMC04LjAtMy4zMy04LjAtOWE4IDggMCAwMTE2IDBjMCA1LjY3LTUuMzMgOS04IDl6Ii8+PC9zdmc+',
+      imageSize: new window.AMap.Size(24, 24)
+    }),
+    offset: new window.AMap.Pixel(-12, -12),
+    zIndex: 110,
+    title: '当前位置'
+  });
+  
+  // 添加到地图
+  map.value.add(marker);
+  
+  // 保存引用以便后续清除
+  window.currentLocationMarker = marker;
+  
+  // 添加脉冲效果
+  addLocationPulse(position);
+}
+
+// 添加位置脉冲效果
+const addLocationPulse = (position) => {
+  if (!map.value || !window.AMap) return;
+  
+  try {
+    // 清除之前的脉冲效果
+    if (window.locationPulseMarker) {
+      map.value.remove(window.locationPulseMarker);
+    }
+    
+    // 创建脉冲效果
+    if (window.AMap.Marker) {
+      // 添加脉冲标记
+      const pulseMarker = new window.AMap.Marker({
+        position: position,
+        content: '<div class="location-pulse-ring"></div>',
+        zIndex: 109,
+        offset: new window.AMap.Pixel(-15, -15)
+      });
+      
+      // 添加到地图
+      map.value.add(pulseMarker);
+      
+      // 保存引用以便后续清除
+      window.locationPulseMarker = pulseMarker;
+    }
+  } catch (e) {
+    console.warn('添加位置脉冲效果失败:', e);
+  }
+}
+
+// 在地图容器中显示错误信息
+const showMapError = (message) => {
+  if (amapContainer.value) {
+    amapContainer.value.innerHTML = `
+      <div style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(4, 26, 71, 0.7);">
+        <div style="color: #ff5555; margin-bottom: 10px;">地图加载失败</div>
+        <div style="color: #ffffff; font-size: 12px; text-align: center; padding: 0 20px;">${message}</div>
+      </div>
+    `;
+  }
+  mapLoading.value = false;
+};
+
+// 检查并加载高德地图API
+const loadAMapAPI = () => {
+  return new Promise((resolve, reject) => {
+    console.log('检查高德地图API...');
+    
+    // 配置高德地图安全密钥
+    // window._AMapSecurityConfig = {
+    //   securityJsCode: '33ae5910cb2d9ccabc9c1a2ed887181b' // 您需要替换为您的安全密钥
+    // };
+    
+    // 使用AMapLoader加载最新版本的高德地图API
+    AMapLoader.load({
+      key: '2467ab6c994eb7d244ed68a830d35cde', // 您的高德地图key
+      version: '2.0',
+      plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.Buildings'],
+      AMapUI: {
+        version: '1.1',
+        plugins: []
+      }
+    })
+    .then((AMap) => {
+      console.log('高德地图API加载成功 - 版本2.0');
+      resolve(AMap);
+    })
+    .catch((error) => {
+      const errorMsg = '高德地图API加载失败: ' + error.message;
+      console.error(errorMsg);
+      showMapError(errorMsg);
+      reject(error);
+    });
+  });
+};
+
+const createMap = () => {
+  console.log('开始创建地图实例...');
+  
+  if (!window.AMap) {
+    const errorMsg = '高德地图API未加载，无法创建地图';
+    console.error(errorMsg);
+    showMapError(errorMsg);
+    return;
+  }
+  
+  mapLoading.value = true;
+  
+  try {
+    // 检查容器元素是否存在
+    const container = amapContainer.value;
+    console.log('地图容器元素:', container);
+    if (!container) {
+      const errorMsg = '找不到地图容器元素';
+      console.error(errorMsg);
+      showMapError(errorMsg);
+      return;
+    }
+    
+    // 确保容器尺寸正确
+    console.log('容器尺寸:', container.offsetWidth, 'x', container.offsetHeight);
+    if (container.offsetWidth === 0 || container.offsetHeight === 0) {
+      console.warn('地图容器尺寸为0，设置最小尺寸');
+      container.style.width = '100%';
+      container.style.height = '300px';
+      
+      // 等待DOM更新
+      nextTick(() => {
+        console.log('DOM已更新, 重新尝试创建地图');
+        createMap();
+      });
+      return;
+    }
+    
+    console.log('容器元素检查通过，初始化地图...');
+    
+    // 销毁已存在的地图实例
+    if (map.value) {
+      try {
+        map.value.destroy();
+      } catch (e) {
+        console.warn('销毁旧地图实例失败', e);
+      }
+    }
+    
+    // 使用新版高德地图API创建地图
+    console.log('创建地图实例，容器ID:', container.id || '未设置ID');
+    
+    // 确保容器可见
+    container.style.visibility = 'visible';
+    container.style.opacity = '1';
+    
+    // 强制设置容器尺寸
+    container.style.width = '100vw';
+    container.style.height = '100vh';
+    container.style.position = 'absolute';
+    container.style.top = '0';
+    container.style.left = '0';
+    container.style.zIndex = '1';
+    
+    // 为容器添加ID便于调试
+    container.id = 'amap-container';
+    
+    // 使用新版高德地图API创建地图
+    try {
+      map.value = new window.AMap.Map(container, {
+        zoom: defaultZoom,
+        center: defaultCenter,
+        viewMode: '3D',
+        pitch: 40,
+        resizeEnable: true,
+        buildingAnimation: true,
+        mapStyle: 'amap://styles/darkblue', // 暗色底图
+        features: ['bg', 'building', 'road', 'point'], // 添加基础图层，添加point以显示标签
+        showBuildingBlock: true,
+        showIndoorMap: false,
+        showLabel: true, // 启用标签显示
+        showRoad: true, // 显示道路提供参考
+        showTraffic: false, // 不显示交通
+        zoomEnable: true, // 确保允许缩放
+        dragEnable: true, // 确保允许拖动
+        scrollWheel: true, // 启用鼠标滚轮缩放
+        keyboardEnable: true, // 启用键盘控制
+        doubleClickZoom: true, // 启用双击缩放
+        touchZoom: true, // 启用触摸缩放
+        jogEnable: true, // 地图平移
+      });
+      
+      // 直接访问window变量以确保在任何位置都能访问到地图实例
+      window.mapInstance = map.value;
+      console.log('地图实例已保存到全局变量window.mapInstance');
+    } catch (err) {
+      console.error('创建地图实例失败:', err);
+      map.value = null;
+    }
+    
+    console.log('地图实例创建完成:', map.value);
+    
+    console.log('地图实例创建成功', map.value);
+    
+    // 先设置地图样式
+    try {
+      if (typeof map.value.setMapStyle === 'function') {
+        map.value.setMapStyle('amap://styles/darkblue');
+        console.log('应用预定义地图样式');
+      }
+    } catch (styleError) {
+      console.warn('应用地图样式失败:', styleError);
+    }
+    
+    // 调整初始缩放级别以确保显示建筑物
+    setTimeout(() => {
+      // 高德地图建筑物一般在14级以上才显示
+      if (map.value && map.value.getZoom() < 14) {
+        console.log(`提高地图缩放级别从${map.value.getZoom()}到15，以显示建筑物`);
+        // map.value.setZoom(15);
+        // 创建建筑物图层
+        setTimeout(() => createColorfulBuildings(map.value), 200);
+      } else {
+        // 直接创建建筑物图层
+        // createColorfulBuildings(map.value);
+      }
+    }, 500);
+    
+    // 添加地图错误处理事件
+    map.value.on('error', (e) => {
+      console.error('地图加载错误:', e);
+      showMapError('地图加载过程中出错: ' + (e?.info || '未知错误'));
+    });
+    
+    // 添加地图完成加载事件
+    map.value.on('complete', () => {
+      console.log('地图加载完成');
+      mapLoading.value = false;
+      
+      // 地图加载完成后自动定位到当前位置
+      setTimeout(() => {
+        console.log('准备自动定位到当前位置');
+        
+        // 如果已经获取到了位置信息，直接使用
+        if (userLocationData.value) {
+          console.log('使用预先获取的位置信息:', userLocationData.value);
+          const { latitude, longitude } = userLocationData.value;
+          
+          // 判断是否需要坐标转换
+          if (window.AMap && window.AMap.convertFrom) {
+            try {
+              // 转换坐标
+              window.AMap.convertFrom([longitude, latitude], 'gps', (status, result) => {
+                try {
+                  if (result && result.info === 'ok') {
+                    const convertedPos = result.locations[0];
+                    map.value.setZoomAndCenter(15, convertedPos);
+                    addLocationMarker([convertedPos.lng, convertedPos.lat]);
+                  } else {
+                    console.warn('坐标转换结果异常:', status, result);
+                    map.value.setZoomAndCenter(15, [longitude, latitude]);
+                    addLocationMarker([longitude, latitude]);
+                  }
+                } catch (error) {
+                  console.error('处理坐标转换结果时出错:', error);
+                  fallbackToDefaultLocation(false);
+                }
+              });
+            } catch (error) {
+              console.error('调用坐标转换时出错:', error);
+              // 尝试直接使用坐标
+              try {
+                map.value.setZoomAndCenter(15, [longitude, latitude]);
+                addLocationMarker([longitude, latitude]);
+              } catch (innerError) {
+                console.error('使用原始坐标失败:', innerError);
+                fallbackToDefaultLocation(false);
+              }
+            }
+          } else {
+            try {
+              map.value.setZoomAndCenter(15, [longitude, latitude]);
+              addLocationMarker([longitude, latitude]);
+            } catch (error) {
+              console.error('设置位置失败:', error);
+              fallbackToDefaultLocation(false);
+            }
+          }
+        } else {
+          // 否则，重新获取
+          try {
+            locateToCurrentPosition(false); // 不显示加载提示，静默定位
+          } catch (error) {
+            console.error('定位过程出错:', error);
+            fallbackToDefaultLocation(false);
+          }
+        }
+      }, 500);
+      
+          // 地图加载完成后添加建筑物样式
+    try {
+      console.log('地图完成加载后尝试设置建筑物样式');
+      
+      // 添加调试信息
+      const debugInfo = {
+        zoom: map.value.getZoom(),
+        center: map.value.getCenter(),
+        mapHasBuildings: !!window.AMap.Buildings,
+        viewMode: map.value.getViewMode()
+      };
+      console.log('地图状态:', debugInfo);
+      
+      // 直接注册地图缩放事件
+      map.value.on('zoom', (e) => {
+        console.log('地图缩放级别变化:', map.value.getZoom());
+      });
+      
+          // 在地图上添加控件
+    try {
+      if (window.AMap.plugin) {
+        // 添加缩放控件
+        window.AMap.plugin(['AMap.ToolBar', 'AMap.Geolocation'], function(){
+          // 缩放工具条
+          const toolbar = new window.AMap.ToolBar({
+            position: 'RT',
+            offset: new window.AMap.Pixel(20, 60)
+          });
+          map.value.addControl(toolbar);
+          
+          // 定位控件
+          const geolocation = new window.AMap.Geolocation({
+            position: 'RB',
+            offset: new window.AMap.Pixel(10, 10),
+            zoomToAccuracy: true,   // 定位成功后是否自动调整地图视野到定位点
+            showMarker: false,      // 不显示默认定位点
+            showCircle: false,      // 不显示精度圈
+            buttonPosition: 'RB',
+            buttonOffset: new window.AMap.Pixel(10, 20)
+          });
+          map.value.addControl(geolocation);
+          console.log('成功添加地图内置控件');
+        });
+      }
+    } catch (e) {
+      console.warn('添加内置控件失败:', e);
+    }
+        
+        // 确保建筑物可见
+        if (map.value.getZoom() < 14) {
+          console.log('在complete回调中提高缩放级别');
+          map.value.setZoom(15);
+        }
+        
+        // 在地图完成加载后创建建筑物图层
+        createColorfulBuildings(map.value);
+        
+        // 方法1: 使用样式覆盖
+        const style = document.createElement('style');
+        style.type = 'text/css';
+        style.innerHTML = `
+          .amap-buildings-1, .amap-buildings-2 {
+            filter: hue-rotate(180deg) saturate(2) brightness(1.2) !important;
+          }
+          .amap-buildings-1 path, .amap-buildings-2 path, .amap-building path {
+            fill: #00c3ff !important;
+            stroke: #0066ff !important;
+          }
+        `;
+        document.head.appendChild(style);
+        
+        console.log('在complete回调中应用建筑物样式成功');
+      } catch (e) {
+        console.warn('在complete事件中设置建筑物样式失败:', e);
+      }
+      
+      // 添加科技风格元素
+      nextTick(() => {
+        addTechMapEffects();
+      });
+    });
+    
+    // 强制在一段时间后关闭加载状态，以防complete事件没有触发
+    setTimeout(() => {
+      if (mapLoading.value) {
+        console.log('地图加载超时，强制关闭加载状态');
+        mapLoading.value = false;
+        
+        // 超时后也尝试创建建筑物图层
+        createColorfulBuildings(map.value);
+        
+        // 手动启用鼠标滚轮缩放
+        if (map.value && typeof map.value.setStatus === 'function') {
+          map.value.setStatus({
+            scrollWheel: true,
+            zoomEnable: true,
+            jogEnable: true,
+            animateEnable: true,
+            keyboardEnable: true
+          });
+          console.log('手动启用了地图鼠标滚轮缩放功能');
+        }
+        
+        // 尝试添加科技风格元素
+        addTechMapEffects();
+      }
+    }, 3000);
+    
+    // 强制刷新地图大小
+    setTimeout(() => {
+      try {
+        if (map.value) {
+          // 检查resize方法是否存在
+          if (typeof map.value.resize === 'function') {
+            map.value.resize();
+          } else {
+            // 尝试使用高德地图的另一种resize方法
+            console.log('尝试使用替代方法重置地图大小');
+            // 通过修改容器尺寸触发地图自动调整大小
+            const container = amapContainer.value;
+            if (container) {
+              const currentWidth = container.offsetWidth;
+              const currentHeight = container.offsetHeight;
+              container.style.width = (currentWidth - 1) + 'px';
+              container.style.height = (currentHeight - 1) + 'px';
+              
+              // 稍后再恢复原始尺寸
+              setTimeout(() => {
+                container.style.width = currentWidth + 'px';
+                container.style.height = currentHeight + 'px';
+              }, 50);
+            }
+          }
+          console.log('地图大小已重置');
+        }
+      } catch (e) {
+        console.warn('重置地图大小失败', e);
+      }
+    }, 200);
+  } catch (error) {
+    const errorMsg = '创建地图时出错: ' + (error?.message || '未知错误');
+    console.error(errorMsg, error);
+    showMapError(errorMsg);
+  }
+};
+
+// 添加科技风格元素 - 简化版
+const addTechMapEffects = () => {
+  if (!map.value) return;
+  
+  try {
+    const container = amapContainer.value;
+    if (container) {
+      // 清除已有的效果层
+      const existingEffects = container.querySelectorAll('.map-effect');
+      existingEffects.forEach(el => el.remove());
+      
+      // 检查地图是否成功渲染了内容
+      console.log('地图加载完成，保持简洁样式');
+      
+      // 只添加最简单的蓝色覆盖层
+      const blueOverlay = document.createElement('div');
+      blueOverlay.className = 'simple-map-overlay map-effect';
+      container.appendChild(blueOverlay);
+      
+      console.log('成功添加简洁地图效果');
+    }
+  } catch (e) {
+    console.warn('添加地图效果失败:', e);
+  }
+};
+
+// 创建建筑物图层的辅助函数 - 简化版
+const createColorfulBuildings = (mapInstance) => {
+  if (!mapInstance || !window.AMap || !window.AMap.Buildings) {
+    console.warn('无法创建建筑物图层：地图实例或Buildings类不存在');
+    return null;
+  }
+  
+  try {
+    console.log('创建简洁建筑物图层');
+    
+    // 创建新的建筑物图层
+    const buildings = new window.AMap.Buildings({
+      zIndex: 120,
+      zooms: [10, 20],
+      heightFactor: 1,  // 标准高度
+    });
+    
+    // 添加到地图
+    mapInstance.add(buildings);
+    console.log('成功创建建筑物图层');
+    return buildings;
+  } catch (error) {
+    console.error('创建建筑物图层失败:', error);
+    return null;
+  }
+};
 
 // 图表实例引用
 const loadChart = ref(null)
@@ -241,6 +1126,25 @@ const efficiencyChart = ref(null)
 let loadChartInstance = null
 let efficiencyChartInstance = null
 
+// 更新图表数据
+const updateCharts = (data) => {
+  if (loadChartInstance) {
+    const option = loadChartInstance.getOption()
+    if (data.loadChart) {
+      option.series[0].data = data.loadChart
+      loadChartInstance.setOption(option)
+    }
+  }
+  
+  if (efficiencyChartInstance) {
+    const option = efficiencyChartInstance.getOption()
+    if (data.efficiencyValue) {
+      option.series[0].data[0].value = data.efficiencyValue
+      efficiencyChartInstance.setOption(option)
+    }
+  }
+}
+
 // 初始化负荷图表
 const initLoadChart = () => {
   if (loadChart.value) {
@@ -257,7 +1161,7 @@ const initLoadChart = () => {
         type: 'category',
         boundaryGap: false,
         show: false,
-        data: ['00:00', '03:40', '07:20', '11:00', '14:40', '18:20', '22:00']
+        data: timeLabels.value
       },
       yAxis: {
         type: 'value',
@@ -350,7 +1254,7 @@ const initEfficiencyChart = () => {
           },
           data: [
             {
-              value: 0
+              value: 70
             }
           ]
         }
@@ -366,534 +1270,535 @@ const handleResize = () => {
   efficiencyChartInstance?.resize()
 }
 
-onMounted(() => {
+// 定义清理函数
+const cleanup = () => {
+  // 移除事件监听并释放图表实例
+  window.removeEventListener('resize', handleResize);
+  loadChartInstance?.dispose();
+  efficiencyChartInstance?.dispose();
+  
+  // 销毁地图
+  if (map.value) {
+    try {
+      map.value.destroy();
+    } catch (e) {
+      console.warn('卸载地图实例失败', e);
+    }
+  }
+}
+
+// 组件卸载时执行清理
+onUnmounted(() => {
+  // 清除定时器
+  if (dataTimer) {
+    clearInterval(dataTimer);
+  }
+  
+  cleanup();
+});
+
+let dataTimer;
+
+onMounted(async () => {
+  console.log('组件挂载，准备初始化地图');
+  
+  // 预先尝试获取位置，这样在地图加载完成时可能已经有位置数据
+  try {
+    tryGetInitialLocation();
+    
+    // 添加页面可见性变化监听，当用户切回页面时尝试刷新位置
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') {
+        console.log('页面重新可见，尝试刷新位置');
+        try {
+          tryGetInitialLocation();
+        } catch (e) {
+          console.warn('页面可见时刷新位置失败:', e);
+        }
+      }
+    });
+  } catch (e) {
+    console.error('初始化位置获取失败:', e);
+  }
+  
+  try {
+    // 先尝试加载高德地图API
+    await loadAMapAPI();
+    console.log('高德地图API加载完成，准备初始化地图容器');
+    
+    // 等待多个nextTick确保DOM已经完全渲染
+    setTimeout(() => {
+      console.log('延迟检查地图容器');
+      if (!amapContainer.value) {
+        console.error('找不到地图容器元素（ref: amapContainer）');
+        mapLoading.value = false;
+      } else {
+        console.log('已找到地图容器元素:', amapContainer.value);
+        // 检查容器尺寸
+        const { offsetWidth, offsetHeight } = amapContainer.value;
+        console.log('地图容器尺寸:', offsetWidth, 'x', offsetHeight);
+        
+        // 强制设置容器尺寸
+        amapContainer.value.style.width = '100%';
+        amapContainer.value.style.height = '100%';
+        
+        // 延迟创建地图，确保容器准备好
+        setTimeout(() => {
+          console.log('准备创建地图');
+          createMap();
+        }, 300);
+      }
+    }, 500);
+  } catch (error) {
+    console.error('加载高德地图API失败:', error);
+    mapLoading.value = false;
+  }
+  
   // 初始化图表
-  initLoadChart()
-  initEfficiencyChart()
+  initLoadChart();
+  initEfficiencyChart();
 
   // 监听窗口大小变化
-  window.addEventListener('resize', handleResize)
-})
-
-onUnmounted(() => {
-  // 移除事件监听并释放图表实例
-  window.removeEventListener('resize', handleResize)
-  loadChartInstance?.dispose()
-  efficiencyChartInstance?.dispose()
-})
+  window.addEventListener('resize', handleResize);
+  
+  // 获取大屏数据
+  fetchScreenData();
+  
+  // 定时刷新数据（每60秒）
+  dataTimer = setInterval(fetchScreenData, 60000);
+
+  // 使用nextTick确保DOM已渲染完成
+  nextTick(() => {
+    // 添加鼠标滚轮事件监听
+    console.log('添加鼠标滚轮事件监听');
+    const mapContainer = document.getElementById('amap-container');
+    if (mapContainer) {
+      // 添加鼠标滚轮事件监听
+      mapContainer.addEventListener('wheel', (event) => {
+        // 防止滚轮事件被其他元素阻止
+        if (map.value) {
+          console.log('检测到鼠标滚轮事件');
+          // 只标记不阻止，让事件继续传递到地图
+        }
+      }, { passive: true });
+      
+      console.log('鼠标滚轮事件监听器已添加到地图容器');
+    }
+    
+    // 为整个文档添加滚动事件检测
+    document.addEventListener('wheel', (event) => {
+      console.log('文档滚轮事件:', event.target);
+    }, { passive: true });
+  });
+});
+
+// 页面加载时尝试获取位置信息
+const tryGetInitialLocation = () => {
+  console.log('尝试获取初始位置信息');
+  
+  // 设置位置获取超时
+  const initialPositionTimeout = setTimeout(() => {
+    console.warn('初始位置获取超时');
+    userLocationData.value = null;
+  }, 5000);
+  
+  if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        clearTimeout(initialPositionTimeout);
+        const { latitude, longitude } = position.coords;
+        console.log('初始位置获取成功:', latitude, longitude);
+        userLocationData.value = { latitude, longitude };
+      },
+      (error) => {
+        clearTimeout(initialPositionTimeout);
+        console.warn('初始位置获取失败:', error.message);
+        userLocationData.value = null;
+      },
+      {
+        enableHighAccuracy: true,
+        timeout: 5000,
+        maximumAge: 0
+      }
+    );
+  } else {
+    clearTimeout(initialPositionTimeout);
+    console.warn('浏览器不支持地理定位');
+    userLocationData.value = null;
+  }
+};
 </script>
-
 <style scoped>
+/* 布局优化 - 紧凑型结构 */
 .data-screen-container {
   width: 100%;
   height: 100vh;
-  background: linear-gradient(180deg, #041236 0%, #02081A 100%);
   color: #ffffff;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   position: relative;
   font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  padding: 5px;
+  /* 移除背景色，由地图背景替代 */
+  background: none;
 }
 
-/* 边框样式 - 常用于面板边框 */
-@property --angle {
-  syntax: '<angle>';
-  initial-value: 0deg;
-  inherits: false;
-}
-
-@keyframes rotate-gradient {
-  0% { --angle: 0deg; }
-  100% { --angle: 360deg; }
+/* 地图背景样式 */
+.map-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: auto;
 }
 
-.border-box {
-  position: relative;
+.city-map {
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
-.border-box::before {
-  content: '';
+/* 地图效果层 */
+.map-effect-layer {
   position: absolute;
-  inset: 0;
-  padding: 1px;
-  border-radius: inherit;
-  background: linear-gradient(var(--angle), #00ffff, transparent, #00ffff);
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-  animation: rotate-gradient 5s linear infinite;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+  background: linear-gradient(to bottom, rgba(4, 18, 54, 0.2), rgba(4, 18, 54, 0.3));
 }
 
-/* 顶部标题 */
-.screen-header {
-  height: 60px;
+/* 地图控制按钮放到最上层 */
+.map-controls {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 100;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 10px 20px;
-  position: relative;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: auto;
 }
 
-.header-title {
-  font-size: 28px;
-  font-weight: bold;
-  color: #00ffff;
-  text-shadow: 0 0 10px rgba(0, 195, 255, 0.8);
+/* 确保所有内容在地图上方，但不阻止地图事件 */
+.screen-header, 
+.device-overview, 
+.screen-content,
+.loading-overlay {
   position: relative;
-  z-index: 2;
-  padding: 0 30px;
+  z-index: 10;
+  pointer-events: none; /* 允许事件穿透到地图 */
 }
 
-.header-title::before,
-.header-title::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  width: 40px;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, #00ffff);
+/* 为内容面板的子元素恢复事件捕获 */
+.screen-header *, 
+.device-overview *, 
+.screen-content *,
+.loading-overlay * {
+  pointer-events: auto; /* 恢复子元素的事件捕获 */
 }
 
-.header-title::before {
-  left: -20px;
-  transform: translateY(-50%);
+/* 左侧面板样式 - 透明背景 */
+.left-panel {
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 5;
 }
 
-.header-title::after {
-  right: -20px;
-  transform: translateY(-50%) scaleX(-1);
+/* 右侧面板样式 - 透明背景 */
+.right-panel {
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 5;
 }
 
-.header-left,
-.header-right {
+/* 中央内容区域 - 占位但透明 */
+.center-content-area {
   flex: 1;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.5), transparent);
 }
 
-/* 设备总览卡片 */
-.device-overview {
+/* 面板标题样式 */
+.panel-title {
   display: flex;
-  justify-content: center;
-  gap: 20px;
-  margin-top: 10px;
-  margin-bottom: 10px;
+  align-items: center;
+  padding: 8px 10px;
+  background: rgba(6, 34, 95, 0.5);
+  border-bottom: 1px solid rgba(0, 195, 255, 0.3);
 }
 
-.device-card {
-  width: 120px;
-  height: 80px;
-  background: rgba(4, 26, 71, 0.7);
+/* 面板内容样式 - 透明背景 */
+.panel-content {
+  flex: 1;
+  background: rgba(4, 26, 71, 0.4);
   border: 1px solid rgba(0, 195, 255, 0.3);
+  padding: 15px;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0 0 10px rgba(0, 195, 255, 0.1);
-  position: relative;
+  opacity: 0;
+  backdrop-filter: blur(2px);
 }
 
-.device-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, #00ffff, transparent);
+.panel-content.animate-in {
+  animation: fadeIn 0.5s forwards;
 }
 
-.card-value {
-  font-size: 32px;
-  font-weight: bold;
-  color: #00ffff;
-  margin-bottom: 5px;
+/* 物联网设备样式 - 透明背景 */
+.iot-devices {
+  display: flex;
+  flex-direction: column;
+  background: rgba(4, 26, 71, 0.4);
+  border: 1px solid rgba(0, 195, 255, 0.3);
+  margin-top: auto;
+  opacity: 0;
+  backdrop-filter: blur(2px);
 }
 
-.card-label {
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.8);
+/* 设备卡片样式 - 透明背景 */
+.device-card {
+  background: rgba(4, 26, 71, 0.6);
+  border: 1px solid rgba(0, 195, 255, 0.3);
+  border-radius: 4px;
+  padding: 10px 15px;
+  min-width: 120px;
+  text-align: center;
+  opacity: 0;
+  transform: translateY(20px);
+  backdrop-filter: blur(2px);
 }
 
-/* 主体内容布局 */
-.screen-content {
-  flex: 1;
+/* 故障统计样式 - 透明背景 */
+.fault-stats {
+  margin-top: auto;
+  background: rgba(4, 26, 71, 0.4);
+  border: 1px solid rgba(0, 195, 255, 0.3);
   display: flex;
-  padding: 0 10px 10px;
+  flex-direction: column;
+  opacity: 0;
+  backdrop-filter: blur(2px);
 }
 
-/* 左侧面板 */
-.left-panel {
-  width: 25%;
+/* 地图加载样式 */
+.map-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  justify-content: center;
+  align-items: center;
+  background: rgba(4, 18, 54, 0.5);
+  z-index: 10;
 }
 
-/* 中央地图区域 */
-.map-area {
-  flex: 1;
-  padding: 0 10px;
+/* 顶部标题样式 */
+.screen-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  padding: 0 20px;
+  position: relative;
 }
 
-/* 右侧面板 */
-.right-panel {
-  width: 25%;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+.header-title {
+  font-size: 22px;
+  font-weight: bold;
+  text-align: center;
+  background: linear-gradient(180deg, #FFFFFF 0%, #00FFFF 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
+  position: relative;
+  padding: 0 40px;
 }
 
-/* 面板标题 */
-.panel-title {
-  display: flex;
-  align-items: center;
+.header-title:before,
+.header-title:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 30px;
+  height: 2px;
+  background: linear-gradient(90deg, rgba(0, 255, 255, 0), rgba(0, 255, 255, 1));
+}
+
+.header-title:before {
+  left: 0;
+}
+
+.header-title:after {
+  right: 0;
+  transform: rotate(180deg);
+}
+
+.header-left, .header-right {
+  width: 150px;
   height: 30px;
-  margin-bottom: 5px;
-  position: relative;
 }
 
-.title-icon {
-  width: 10px;
-  height: 10px;
-  background: #00ffff;
-  margin-right: 10px;
-  position: relative;
+/* 设备总览样式 */
+.device-overview {
+  display: flex;
+  justify-content: space-around;
+  margin: 10px 5px;
+  padding-bottom: 10px;
 }
 
-.title-icon::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 15px;
-  width: 20px;
-  height: 1px;
-  background: linear-gradient(90deg, #00ffff, transparent);
+.device-card.animate-in {
+  animation: fadeInUp 0.5s forwards;
 }
 
-.title-text {
-  font-size: 16px;
+.card-value {
+  font-size: 22px;
+  font-weight: bold;
   color: #00ffff;
+  margin-bottom: 5px;
+  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
 }
 
-/* 面板内容 */
-.panel-content {
-  flex: 1;
-  border: 1px solid rgba(0, 195, 255, 0.3);
-  background: rgba(4, 26, 71, 0.7);
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
+.card-label {
+  font-size: 12px;
+  color: #adbfff;
 }
 
-/* 资产信息 */
+/* 资产信息样式 */
 .asset-info {
-  display: flex;
-  justify-content: space-between;
   margin-bottom: 15px;
 }
 
 .asset-item {
   display: flex;
-  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  font-size: 14px;
 }
 
 .item-label {
-  color: rgba(255, 255, 255, 0.8);
-  margin-right: 5px;
+  color: #adbfff;
 }
 
 .item-value {
-  color: #ffffff;
+  color: #00ffff;
+  font-weight: bold;
 }
 
-/* 设备圆形图 */
+/* 设备圆形样式 */
 .device-circle-container {
   display: flex;
   justify-content: space-around;
-  flex: 1;
+  padding: 10px 0;
 }
 
 .device-circle {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  text-align: center;
 }
 
 .circle-title {
   margin-bottom: 10px;
-  color: rgba(255, 255, 255, 0.8);
+  color: #adbfff;
+  font-size: 14px;
 }
 
 .circle {
-  width: 100px;
-  height: 100px;
+  width: 80px;
+  height: 80px;
   border-radius: 50%;
-  border: 2px solid rgba(0, 195, 255, 0.3);
+  background: rgba(0, 255, 255, 0.1);
+  border: 1px solid rgba(0, 255, 255, 0.3);
+  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 10px;
+  margin: 0 auto;
 }
 
 .circle-value {
-  font-size: 24px;
-  color: #ffffff;
+  font-size: 22px;
+  color: #00ffff;
+  font-weight: bold;
 }
 
 .circle-footer {
-  color: rgba(255, 255, 255, 0.6);
+  margin-top: 10px;
+  color: #adbfff;
+  font-size: 12px;
 }
 
-/* 物联网设备列表 */
-.iot-devices {
-  border: 1px solid rgba(0, 195, 255, 0.3);
-  background: rgba(4, 26, 71, 0.7);
-  padding: 10px;
+/* 物联网设备样式 */
+.iot-devices.animate-in {
+  animation: fadeIn 0.5s forwards;
 }
 
 .iot-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+  padding: 15px;
 }
 
 .iot-item {
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  opacity: 0;
+}
+
+.iot-item.animate-in {
+  animation: fadeInRight 0.5s forwards;
 }
 
 .item-progress-container {
   flex: 1;
   height: 6px;
   background: rgba(255, 255, 255, 0.1);
-  margin: 0 10px;
   border-radius: 3px;
+  margin: 0 10px;
   overflow: hidden;
 }
 
 .item-progress {
   height: 100%;
-  background: #00c3ff;
-}
-
-/* 地图区域 */
-.map-content {
-  height: 100%;
-  border: 1px solid rgba(0, 195, 255, 0.3);
-  background: rgba(4, 26, 71, 0.7);
-  position: relative;
-}
-
-.city-map {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.map-layer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: 
-    linear-gradient(90deg, rgba(0, 195, 255, 0.2) 1px, transparent 1px),
-    linear-gradient(0deg, rgba(0, 102, 255, 0.2) 1px, transparent 1px),
-    repeating-linear-gradient(
-      45deg,
-      transparent,
-      transparent 15px,
-      rgba(0, 195, 255, 0.3) 15px,
-      rgba(0, 102, 255, 0.3) 30px
-    );
-  background-size: 40px 40px, 40px 40px, auto;
-  animation: gridFlow 8s linear infinite, hologram 5s ease-in-out infinite;
-  box-shadow: 
-    0 0 80px rgba(0, 195, 255, 0.4),
-    inset 0 0 50px rgba(0, 102, 255, 0.3);
-  filter: hue-rotate(5deg);
-  position: relative;
-  overflow: hidden;
-  border: 1px solid rgba(0, 195, 255, 0.3);
-}
-
-.map-layer::before {
-  content: '';
-  position: absolute;
-  width: 200%;
-  height: 200%;
-  background: repeating-linear-gradient(
-    45deg,
-    transparent,
-    transparent 15px,
-    rgba(0, 195, 255, 0.2) 15px,
-    rgba(0, 102, 255, 0.2) 30px
-  );
-  animation: scan 20s linear infinite;
-  opacity: 0.3;
-}
-
-@keyframes scan {
-  0% { transform: translate(-50%, -50%); }
-  100% { transform: translate(0%, 0%); }
-}
-
-.map-layer::after {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  right: -50%;
-  bottom: -50%;
-  background: radial-gradient(circle, rgba(0, 255, 255, 0.1) 0%, transparent 60%);
-  animation: pulse 3s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0% { transform: scale(0.8); opacity: 0.5; }
-  50% { transform: scale(1.2); opacity: 0.8; }
-  100% { transform: scale(0.8); opacity: 0.5; }
-}
-
-.map-layer::before {
-  content: '';
-  position: absolute;
-  height: 1px;
-  width: 100%;
-  background: linear-gradient(90deg, transparent, rgba(0,195,255,0.8), transparent);
-  animation: lineFlowX 15s linear infinite;
-  filter: drop-shadow(0 0 5px rgba(0,195,255,0.5));
-}
-
-.map-layer::after {
-  content: '';
-  position: absolute;
-  width: 1px;
-  height: 100%;
-  background: linear-gradient(0deg, transparent, rgba(0,195,255,0.8), transparent);
-  animation: lineFlowY 12s linear infinite;
-  filter: drop-shadow(0 0 5px rgba(0,195,255,0.5));
-}
-
-@keyframes lineFlowX {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
-}
-
-@keyframes lineFlowY {
-  0% { transform: translateY(-100%); }
-  100% { transform: translateY(100%); }
-}
-.map-layer::after {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  right: -50%;
-  bottom: -50%;
-  background: linear-gradient(
-    45deg,
-    transparent 45%,
-    rgba(0, 195, 255, 0.1) 50%,
-    transparent 55%
-  );
-  animation: lightFlow 5s linear infinite;
-}
-
-@keyframes gridFlow {
-  0% { background-position: 0 0, 0 0, center; }
-  100% { background-position: 1000px 0, 0 1000px, center; }
-}
-
-/* 添加数据流粒子效果 */
-.map-marker::after {
-  content: '';
-  position: absolute;
-  width: 4px;
-  height: 4px;
-  background: rgba(0, 255, 255, 0.8);
-  border-radius: 50%;
-  animation: particle 2s infinite linear;
-  filter: drop-shadow(0 0 5px #00ffff);
-}
-
-@keyframes particle {
-  0% {
-    transform: translateY(0) scale(1);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(-100px) scale(0.2);
-    opacity: 0;
-  }
-}
-
-@keyframes lightFlow {
-  0% { transform: translate(0, 0); }
-  100% { transform: translate(100%, 100%); }
-}
-
-
-.map-marker {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: rgba(0, 255, 255, 0.8);
-  border-radius: 50%;
-  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
-}
-
-.marker-text {
-  position: absolute;
-  white-space: nowrap;
-  left: 15px;
-  top: -5px;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.device-hint {
-  position: absolute;
-  top: 16%;
-  left: 50%;
-  transform: translateX(-50%);
-  color: #00ffff;
-  font-size: 14px;
-  white-space: nowrap;
+  background: linear-gradient(90deg, #00ffff 0%, #0066ff 100%);
+  border-radius: 3px;
 }
 
-/* 能耗和电池图标 */
+/* 能耗与负荷样式 */
 .energy-battery {
   display: flex;
-  align-items: center;
   margin-bottom: 20px;
+  align-items: center;
 }
 
 .battery-icon {
-  width: 60px;
-  height: 100px;
-  border: 2px solid #00c3ff;
-  border-radius: 5px;
+  width: 40px;
+  height: 80px;
   position: relative;
-  margin-right: 20px;
-  background: rgba(0, 195, 255, 0.1);
+  border: 2px solid #00ffff;
+  border-radius: 3px;
+  margin-right: 15px;
 }
 
-.battery-icon::before {
+.battery-icon:before {
   content: '';
   position: absolute;
-  top: -10px;
-  left: 50%;
-  transform: translateX(-50%);
+  top: -8px;
+  left: 10px;
   width: 20px;
-  height: 10px;
-  background: #00c3ff;
-  border-radius: 5px 5px 0 0;
+  height: 6px;
+  background: #00ffff;
+  border-radius: 3px 3px 0 0;
 }
 
 .battery-level {
@@ -902,24 +1807,18 @@ onUnmounted(() => {
   left: 0;
   width: 100%;
   height: 70%;
-  background: linear-gradient(to top, #0066ff, #00c3ff);
-  animation: battery-pulse 2s infinite;
-}
-
-@keyframes battery-pulse {
-  0%, 100% { opacity: 0.7; }
-  50% { opacity: 1; }
+  background: linear-gradient(0deg, #00ffff 0%, #0066ff 100%);
+  border-radius: 0 0 1px 1px;
 }
 
 .energy-stats {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
+  flex: 1;
 }
 
 .energy-item {
+  margin-bottom: 8px;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.8);
+  color: #adbfff;
 }
 
 .highlight {
@@ -927,7 +1826,7 @@ onUnmounted(() => {
   font-weight: bold;
 }
 
-/* 负荷图表 */
+/* 实时负荷图表样式 */
 .load-chart-container {
   margin-bottom: 20px;
 }
@@ -935,123 +1834,343 @@ onUnmounted(() => {
 .chart-header {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
 }
 
 .chart-title {
+  color: #adbfff;
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.8);
 }
 
 .chart-unit {
+  color: #adbfff;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.6);
+  opacity: 0.8;
 }
 
 .load-chart {
-  height: 100px;
+  height: 120px;
   width: 100%;
 }
 
 .chart-timeline {
   display: flex;
   justify-content: space-between;
+  margin-top: 5px;
+}
+
+.time-label {
   font-size: 10px;
-  color: rgba(255, 255, 255, 0.6);
+  color: #adbfff;
+  opacity: 0.8;
 }
 
-/* 线缆能耗统计 */
+/* 线缆能耗统计样式 */
 .cable-energy {
-  display: flex;
-  flex-direction: column;
+  margin-top: 20px;
 }
 
 .section-title {
+  color: #adbfff;
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.8);
+  margin-bottom: 5px;
 }
 
 .section-unit {
+  color: #adbfff;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.6);
-  text-align: right;
+  opacity: 0.8;
+  margin-bottom: 15px;
 }
 
 .energy-efficiency {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 10px;
 }
 
 .efficiency-chart {
-  width: 100px;
-  height: 100px;
+  flex: 1;
+  height: 120px;
 }
 
 .efficiency-stats {
-  display: grid;
-  grid-template-columns: auto auto;
-  gap: 5px;
-  align-items: center;
+  width: 40%;
+  padding-left: 10px;
 }
 
 .efficiency-label {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.7);
-  text-align: right;
+  color: #adbfff;
+  margin-bottom: 5px;
 }
 
 .efficiency-value {
-  font-size: 12px;
+  font-size: 14px;
   color: #00ffff;
+  font-weight: bold;
+  margin-bottom: 10px;
 }
 
-/* 故障统计表格 */
-.fault-stats {
-  border: 1px solid rgba(0, 195, 255, 0.3);
-  background: rgba(4, 26, 71, 0.7);
+/* 实时故障统计样式 */
+.fault-stats.animate-in {
+  animation: fadeIn 0.5s forwards;
+}
+
+.fault-table {
   padding: 10px;
-  flex: 1;
+}
+
+.table-header {
   display: flex;
-  flex-direction: column;
+  font-size: 13px;
+  color: #adbfff;
+  border-bottom: 1px solid rgba(0, 195, 255, 0.3);
+  padding-bottom: 5px;
+  margin-bottom: 5px;
 }
 
-.fault-table {
-  flex: 1;
+.table-body {
+  padding: 8px 0;
+}
+
+.table-row {
   display: flex;
-  flex-direction: column;
+  font-size: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(0, 195, 255, 0.1);
+  opacity: 0;
+}
+
+.table-row.animate-in {
+  animation: fadeInRight 0.5s forwards;
+}
+
+.th, .td {
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.table-header {
+.th:nth-child(1), .td:nth-child(1) {
+  width: 30%;
+}
+
+.th:nth-child(2), .td:nth-child(2) {
+  width: 40%;
+}
+
+.th:nth-child(3), .td:nth-child(3) {
+  width: 30%;
+}
+
+.td {
+  color: #ffffff;
+}
+
+/* 动画定义 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@media screen and (max-width: 1366px) {
+  .device-card {
+    min-width: 100px;
+    padding: 8px 10px;
+  }
+  
+  .card-value {
+    font-size: 18px;
+  }
+  
+  .card-label {
+    font-size: 11px;
+  }
+  
+  .circle {
+    width: 60px;
+    height: 60px;
+  }
+  
+  .circle-value {
+    font-size: 18px;
+  }
+}
+
+/* 加载状态样式 */
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   display: flex;
-  background: rgba(0, 195, 255, 0.2);
-  padding: 8px 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: rgba(4, 18, 54, 0.8);
+  z-index: 100;
+  backdrop-filter: blur(3px);
 }
 
-.th {
-  flex: 1;
-  text-align: center;
+.loading-spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid rgba(0, 255, 255, 0.1);
+  border-left-color: #00ffff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-text {
+  margin-top: 12px;
   font-size: 14px;
   color: #00ffff;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
 }
 
-.table-body {
-  flex: 1;
-  overflow-y: auto;
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
 
-.table-row {
+/* 地图控制按钮 */
+.control-btn {
+  width: 30px;
+  height: 30px;
+  background: rgba(4, 26, 71, 0.8);
+  border: 1px solid rgba(0, 195, 255, 0.5);
+  color: #00ffff;
   display: flex;
-  border-bottom: 1px solid rgba(0, 195, 255, 0.1);
-  padding: 8px 0;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 16px;
+  border-radius: 4px;
+  transition: all 0.3s;
+  pointer-events: auto;
+  position: relative;
+  z-index: 100;
 }
 
-.td {
+.control-btn:hover {
+  background: rgba(0, 195, 255, 0.2);
+  border-color: rgba(0, 195, 255, 0.8);
+}
+
+.map-home-icon {
+  width: 14px;
+  height: 14px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ffff'%3E%3Cpath d='M12 2L2 12h3v8h14v-8h3L12 2z'/%3E%3C/svg%3E");
+  background-size: cover;
+}
+
+.map-location-icon {
+  width: 14px;
+  height: 14px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ffff'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
+  background-size: cover;
+}
+
+/* 主体内容样式 */
+.screen-content {
   flex: 1;
-  text-align: center;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  gap: 10px;
+  padding: 0 5px;
+  overflow: hidden;
+}
+
+/* 面板标题图标 */
+.title-icon {
+  width: 12px;
+  height: 12px;
+  background: linear-gradient(135deg, #00ffff 0%, #0066ff 100%);
+  margin-right: 8px;
+  transform: rotate(45deg);
+}
+
+.title-text {
+  font-size: 14px;
+  color: #ffffff;
+}
+
+/* 位置加载样式 */
+.location-loading {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(4, 26, 71, 0.8);
+  border: 1px solid rgba(0, 195, 255, 0.5);
+  color: #00ffff;
+  padding: 10px 20px;
+  border-radius: 4px;
+  z-index: 1000;
+  box-shadow: 0 0 15px rgba(0, 195, 255, 0.3);
+}
+
+/* 位置脉冲效果 */
+.location-pulse-ring {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: rgba(0, 255, 255, 0.4);
+  border: 2px solid rgba(0, 255, 255, 0.6);
+  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+  animation: pulse 1.5s infinite;
+}
+
+/* 位置通知样式 */
+.location-notice {
+  position: fixed;
+  top: 70px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(4, 26, 71, 0.8);
+  border: 1px solid rgba(0, 195, 255, 0.5);
+  color: #00ffff;
+  padding: 8px 15px;
+  border-radius: 4px;
+  z-index: 1000;
+  box-shadow: 0 0 15px rgba(0, 195, 255, 0.3);
+  font-size: 14px;
+  pointer-events: none;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.5);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
 }
 </style>
diff --git a/src/views/LightingView.vue b/src/views/LightingView.vue
index 47fa550..e98886a 100644
--- a/src/views/LightingView.vue
+++ b/src/views/LightingView.vue
@@ -23,53 +23,7 @@
     <div class="main-content">
       <!-- Left sidebar -->
       <div class="sidebar">
-        <!-- Overview section -->
-        <!-- <div class="section-header active">
-          <span class="section-icon">总览</span>
-        </div>
-        <div class="section-header">
-          <span class="section-icon">系统控制</span>
-        </div>
-
-        <!-- Lights controls -->
-        <!-- <div class="lights-control">
-          <div class="brightness-meter">
-            <div class="meter-circle">
-              <div class="meter-value">-1</div>
-              <div class="meter-label">照度值</div>
-            </div>
-          </div>
-
-          <div class="schedule-panel">
-            <div class="schedule-item">
-              <div class="light-icon">
-                <img src="../assets/light-on-icon.svg" alt="Light On">
-              </div>
-              <div class="schedule-details">
-                <div class="schedule-title">计划开灯</div>
-                <div class="schedule-time">7：30</div>
-              </div>
-            </div>
-            <div class="schedule-item">
-              <div class="light-icon">
-                <img src="../assets/light-off-icon.svg" alt="Light Off">
-              </div>
-              <div class="schedule-details">
-                <div class="schedule-title">计划关灯</div>
-                <div class="schedule-time">6：30</div>
-              </div>
-            </div>
-          </div> -->
-
-          <!-- Control buttons -->
-          <!-- <div class="control-buttons">
-            <button class="control-btn">自动亮测</button>
-            <button class="control-btn">自动控制</button>
-            <button class="control-btn">半夜灯</button>
-          </div>
-        </div> --> 
-
-        <!-- Devices list section -->
+        <!-- Device list section -->
         <div class="device-list-section">
           <div class="list-header">
             <div class="list-icon">
@@ -80,84 +34,179 @@
 
           <!-- Element Plus Tabs -->
           <el-tabs v-model="activeTab" class="device-tabs">
-            <el-tab-pane label="设备列表" name="device">
-          <!-- Filter section -->
-          <div class="filter-section">
-            <div class="search-box">
-                  <el-input
-                    v-model="searchKeyword"
-                    placeholder="输入关键词搜索设备"
-                    class="search-input"
-                    clearable
-                    @input="handleSearch"
-                  >
+            <el-tab-pane label="区域列表" name="region">
+              <!-- 区域列表过滤区域 -->
+              <div class="filter-section">
+                <div class="search-box">
+                  <el-input v-model="regionSearchKeyword" placeholder="输入关键词搜索区域" class="search-input" clearable
+                    @input="handleRegionSearch">
                     <template #prefix>
-                      <el-icon><Search /></el-icon>
+                      <el-icon>
+                        <Search />
+                      </el-icon>
                     </template>
                   </el-input>
-            </div>
-          </div>
+                </div>
+              </div>
+
+              <!-- 区域树 -->
+              <el-tree :data="filteredRegionTreeData" :props="regionProps" node-key="key" :expand-on-click-node="false"
+                default-expand-all class="device-tree" @node-click="handleRegionNodeClick" highlight-current>
+                <template #default="{ node, data }">
+                  <div class="custom-tree-node">
+                    <!-- 左侧图标和文本分组 -->
+                    <div class="node-left-content">
+                      <!-- 根据节点类型添加图标 - 使用内联样式 -->
+                      <span style="margin-right: 4px; display: inline-flex; align-items: center;">
+                        <el-icon v-if="data.isLight || data.deviceId" style="margin-right: 1px;">
+                          <Place />
+                        </el-icon>
+                        <el-icon v-else-if="data.isRoad || data.roadId || (data.key && data.key.startsWith('road_'))"
+                          style="margin-right: 1px;">
+                          <Guide />
+                        </el-icon>
+                        <el-icon v-else style="margin-right: 1px;">
+                          <Location />
+                        </el-icon>
+                      </span>
+                      <span>{{ node.label }}</span>
+                    </div>
+                    <span v-if="!data.deviceId">
+                      <el-button type="primary" link @click.stop="handleEditRegion(data)">
+                        <el-icon>
+                          <Edit />
+                        </el-icon>
+                      </el-button>
+                      <el-button type="primary" link @click.stop="handleAddRegion(data)">
+                        <el-icon>
+                          <Plus />
+                        </el-icon>
+                      </el-button>
+                    </span>
+                    <span v-else>
+                      <el-button type="primary" link @click.stop="handleEditRegionDevice(data)">
+                        <el-icon>
+                          <Edit />
+                        </el-icon>
+                      </el-button>
+                    </span>
+                  </div>
+                </template>
+              </el-tree>
+            </el-tab-pane>
+            <el-tab-pane label="分组列表" name="device">
+              <!-- Filter section -->
+              <div class="filter-section">
+                <div class="search-box">
+                  <el-input v-model="searchKeyword" placeholder="输入关键词搜索设备" class="search-input" clearable
+                    @input="handleSearch">
+                    <template #prefix>
+                      <el-icon>
+                        <Search />
+                      </el-icon>
+                    </template>
+                  </el-input>
+                </div>
+              </div>
 
               <!-- Device Tree -->
-              <el-tree
-                :data="filteredTreeData"
-                :props="defaultProps"
-                node-key="key"
-                :expand-on-click-node="false"
-                class="device-tree"
-                @node-click="handleNodeClick"
-                highlight-current
-              >
+              <el-tree :data="filteredTreeData" :props="defaultProps" node-key="key" :expand-on-click-node="false"
+                default-expand-all class="device-tree" @node-click="handleNodeClick" highlight-current>
                 <template #default="{ node, data }">
                   <div class="custom-tree-node">
-                    <span>{{ node.label }}</span>
+                    <!-- 左侧图标和文本分组 -->
+                    <div class="node-left-content">
+                      <!-- 根据节点类型添加图标 -->
+                      <span class="node-icon">
+                        <el-icon v-if="data.ilcName">
+                          <Place />
+                        </el-icon>
+                        <el-icon v-else-if="data.rtuName">
+                          <MapLocation />
+                        </el-icon>
+                        <el-icon v-else>
+                          <Location />
+                        </el-icon>
+                      </span>
+                      <span class="node-label">{{ node.label }}</span>
+                    </div>
                     <span v-if="data.children && data.children.length > 0 && !data.rtuId">
-                      <el-button
-                        type="primary"
-                        link
-                        @click.stop="handleEditGroup(data)"
-                      >
-                        <el-icon><Edit /></el-icon>
+                      <el-button type="primary" link @click.stop="handleEditGroup(data)">
+                        <el-icon>
+                          <Edit />
+                        </el-icon>
                       </el-button>
-                      <el-button
-                        type="primary"
-                        link
-                        @click.stop="handleAddDevice(data)"
-                      >
-                        <el-icon><Plus /></el-icon>
+                      <el-button type="primary" link @click.stop="handleAddDevice(data)">
+                        <el-icon>
+                          <Plus />
+                        </el-icon>
                       </el-button>
                     </span>
                     <span v-else-if="!data.ilcName">
-                      <el-button
-                        type="primary"
-                        link
-                        @click.stop="handleEditDevice(data)"
-                      >
-                        <el-icon><Edit /></el-icon>
+                      <el-button type="primary" link @click.stop="handleEditDevice(data)">
+                        <el-icon>
+                          <Edit />
+                        </el-icon>
                       </el-button>
-                      <el-button
-                        type="primary"
-                        link
-                        @click.stop="handleAddIlc(data)"
-                      >
-                        <el-icon><Plus /></el-icon>
+                      <el-button type="primary" link @click.stop="handleAddIlc(data)">
+                        <el-icon>
+                          <Plus />
+                        </el-icon>
                       </el-button>
                     </span>
                     <span v-else>
-                      <el-button
-                        type="primary"
-                        link
-                        @click.stop="handleEditIlc(data)"
-                      >
-                        <el-icon><Edit /></el-icon>
+                      <el-button type="primary" link @click.stop="handleEditIlc(data)">
+                        <el-icon>
+                          <Edit />
+                        </el-icon>
                       </el-button>
                     </span>
-            </div>
+                  </div>
                 </template>
               </el-tree>
             </el-tab-pane>
             <el-tab-pane label="故障列表" name="fault">
-              <!-- 故障列表内容 -->
+              <div class="fault-list-container">
+
+
+                <el-table :data="filteredFaultList" border style="width: 100%" v-loading="faultLoading"
+                  :header-cell-style="{
+                    background: 'rgba(4, 26, 71, 0.8)',
+                    color: '#fff',
+                    fontWeight: 'bold',
+                    fontSize: '15px',
+                    height: '50px'
+                  }" :row-style="{ height: '55px' }" class="fault-table">
+                  <el-table-column label="故障设备" min-width="150">
+                    <template #default="{ row }">
+                      <el-dropdown trigger="click"
+                        @command="(cmd: 'viewDetail' | 'viewLocation') => handleFaultCommand(cmd, row)">
+                        <div class="device-name">
+                          <el-icon class="device-icon">
+                            <Warning />
+                          </el-icon>
+                          <span>{{ getDeviceName(row) }}</span>
+                          <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                        </div>
+                        <template #dropdown>
+                          <el-dropdown-menu>
+                            <el-dropdown-item command="viewDetail">
+                              <el-icon>
+                                <View />
+                              </el-icon> 查看详情
+                            </el-dropdown-item>
+                            <el-dropdown-item command="viewLocation">
+                              <el-icon>
+                                <Location />
+                              </el-icon> 查看位置
+                            </el-dropdown-item>
+                          </el-dropdown-menu>
+                        </template>
+                      </el-dropdown>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
             </el-tab-pane>
           </el-tabs>
         </div>
@@ -167,16 +216,11 @@
       <div class="map-area">
         <!-- Map with lighting devices -->
         <div id="container" class="map"></div>
-            </div>
-          </div>
+      </div>
+    </div>
 
     <!-- Add Device Dialog -->
-    <el-dialog
-      v-model="showAddDeviceDialog"
-      title="创建"
-      width="900px"
-      :close-on-click-modal="false"
-    >
+    <el-dialog v-model="showAddDeviceDialog" title="创建" width="900px" :close-on-click-modal="false">
       <el-form label-width="100px" :model="addDeviceForm">
         <el-row :gutter="20">
           <el-col :span="12">
@@ -184,26 +228,24 @@
               <el-input v-model="addDeviceForm.name" placeholder="请输入终端名称" />
             </el-form-item>
             <el-form-item label="激活时间">
-              <el-date-picker v-model="addDeviceForm.activeTime" type="date" placeholder="请选择激活时间" style="width: 100%;" />
+              <el-date-picker v-model="addDeviceForm.activeTime" type="date" placeholder="请选择激活时间"
+                style="width: 100%;" />
             </el-form-item>
             <el-form-item label="CUID" required>
               <el-input v-model="addDeviceForm.cuid" placeholder="请输入CUID" />
             </el-form-item>
             <el-form-item label="经纬度">
-              <el-input v-model="addDeviceForm.longitude" placeholder="经度" style="width: 40%; margin-right: 8px;" readonly />
-              <el-input v-model="addDeviceForm.latitude" placeholder="纬度" style="width: 40%; margin-right: 8px;" readonly />
+              <el-input v-model="addDeviceForm.longitude" placeholder="经度" style="width: 40%; margin-right: 8px;"
+                readonly />
+              <el-input v-model="addDeviceForm.latitude" placeholder="纬度" style="width: 40%; margin-right: 8px;"
+                readonly />
               <el-button @click="showAddDeviceMapDialog = true">选择经纬度</el-button>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="所属分组" required>
               <el-select v-model="addDeviceForm.group" placeholder="请选择所属分组" style="width: 100%;">
-                <el-option
-                  v-for="item in groupOptions"
-                  :key="item.id"
-                  :label="item.groupName"
-                  :value="item.id"
-                />
+                <el-option v-for="item in groupOptions" :key="item.id" :label="item.groupName" :value="item.id" />
               </el-select>
             </el-form-item>
             <el-form-item label="高度">
@@ -216,7 +258,8 @@
               <el-input v-model="addDeviceForm.phone" placeholder="请输入11位手机卡号" />
             </el-form-item>
             <el-form-item label="备注">
-              <el-input v-model="addDeviceForm.remark" type="textarea" :maxlength="200" show-word-limit placeholder="请输入备注信息" />
+              <el-input v-model="addDeviceForm.remark" type="textarea" :maxlength="200" show-word-limit
+                placeholder="请输入备注信息" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -228,12 +271,7 @@
     </el-dialog>
 
     <!-- Edit Device Dialog -->
-    <el-dialog
-      v-model="showEditDeviceDialog"
-      title="编辑"
-      width="900px"
-      :close-on-click-modal="false"
-    >
+    <el-dialog v-model="showEditDeviceDialog" title="编辑" width="900px" :close-on-click-modal="false">
       <el-form label-width="100px" :model="editDeviceForm">
         <el-row :gutter="20">
           <el-col :span="12">
@@ -241,26 +279,24 @@
               <el-input v-model="editDeviceForm.name" placeholder="请输入终端名称" />
             </el-form-item>
             <el-form-item label="激活时间">
-              <el-date-picker v-model="editDeviceForm.activeTime" type="date" placeholder="请选择激活时间" style="width: 100%;" />
+              <el-date-picker v-model="editDeviceForm.activeTime" type="date" placeholder="请选择激活时间"
+                style="width: 100%;" />
             </el-form-item>
             <el-form-item label="CUID" required>
               <el-input v-model="editDeviceForm.cuid" placeholder="请输入CUID" />
             </el-form-item>
             <el-form-item label="经纬度">
-              <el-input v-model="editDeviceForm.longitude" placeholder="经度" style="width: 40%; margin-right: 8px;" readonly />
-              <el-input v-model="editDeviceForm.latitude" placeholder="纬度" style="width: 40%; margin-right: 8px;" readonly />
+              <el-input v-model="editDeviceForm.longitude" placeholder="经度" style="width: 40%; margin-right: 8px;"
+                readonly />
+              <el-input v-model="editDeviceForm.latitude" placeholder="纬度" style="width: 40%; margin-right: 8px;"
+                readonly />
               <el-button @click="showEditDeviceMapDialog = true">选择经纬度</el-button>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="所属分组" required>
               <el-select v-model="editDeviceForm.group" placeholder="请选择所属分组" style="width: 100%;">
-                <el-option
-                  v-for="item in groupOptions"
-                  :key="item.id"
-                  :label="item.groupName"
-                  :value="item.id"
-                />
+                <el-option v-for="item in groupOptions" :key="item.id" :label="item.groupName" :value="item.id" />
               </el-select>
             </el-form-item>
             <el-form-item label="高度">
@@ -273,7 +309,8 @@
               <el-input v-model="editDeviceForm.phone" placeholder="请输入11位手机卡号" />
             </el-form-item>
             <el-form-item label="备注">
-              <el-input v-model="editDeviceForm.remark" type="textarea" :maxlength="200" show-word-limit placeholder="请输入备注信息" />
+              <el-input v-model="editDeviceForm.remark" type="textarea" :maxlength="200" show-word-limit
+                placeholder="请输入备注信息" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -285,12 +322,7 @@
     </el-dialog>
 
     <!-- Edit Group Dialog -->
-    <el-dialog
-      v-model="showEditGroupDialog"
-      title="编辑"
-      width="900px"
-      :close-on-click-modal="false"
-    >
+    <el-dialog v-model="showEditGroupDialog" title="编辑" width="900px" :close-on-click-modal="false">
       <el-form label-width="120px" :model="editGroupForm">
         <el-row :gutter="20">
           <el-col :span="12">
@@ -298,10 +330,12 @@
               <el-input v-model="editGroupForm.groupName" placeholder="请输入分组名称" />
             </el-form-item>
             <el-form-item label="默认开灯时间">
-              <el-time-picker v-model="editGroupForm.defaultLightOnTime" format="HH:mm:ss" placeholder="请选择默认开灯时间" style="width: 100%;" />
+              <el-time-picker v-model="editGroupForm.defaultLightOnTime" format="HH:mm:ss" placeholder="请选择默认开灯时间"
+                style="width: 100%;" />
             </el-form-item>
             <el-form-item label="默认关灯时间">
-              <el-time-picker v-model="editGroupForm.defaultLightOffTime" format="HH:mm:ss" placeholder="请选择默认关灯时间" style="width: 100%;" />
+              <el-time-picker v-model="editGroupForm.defaultLightOffTime" format="HH:mm:ss" placeholder="请选择默认关灯时间"
+                style="width: 100%;" />
             </el-form-item>
             <el-form-item label="灯控方式">
               <el-radio-group v-model="editGroupForm.controlMethod">
@@ -338,12 +372,7 @@
     </el-dialog>
 
     <!-- Edit ILC Dialog -->
-    <el-dialog
-      v-model="showEditIlcDialog"
-      title="编辑"
-      width="900px"
-      :close-on-click-modal="false"
-    >
+    <el-dialog v-model="showEditIlcDialog" title="编辑" width="900px" :close-on-click-modal="false">
       <el-form label-width="100px" :model="editIlcForm">
         <el-row :gutter="20">
           <el-col :span="12">
@@ -351,8 +380,10 @@
               <el-input v-model="editIlcForm.ilcName" placeholder="请输入单灯名称" />
             </el-form-item>
             <el-form-item label="经纬度">
-              <el-input v-model="editIlcForm.positionX" placeholder="经度" style="width: 40%; margin-right: 8px;" readonly />
-              <el-input v-model="editIlcForm.positionY" placeholder="纬度" style="width: 40%; margin-right: 8px;" readonly />
+              <el-input v-model="editIlcForm.positionX" placeholder="经度" style="width: 40%; margin-right: 8px;"
+                readonly />
+              <el-input v-model="editIlcForm.positionY" placeholder="纬度" style="width: 40%; margin-right: 8px;"
+                readonly />
               <el-button @click="showEditIlcMapDialog = true">选择经纬度</el-button>
             </el-form-item>
             <el-form-item label="高度">
@@ -366,19 +397,15 @@
             </el-form-item>
             <el-form-item label="所属监控终端">
               <el-select v-model="editIlcForm.rtuId" placeholder="请选择所属监控终端" style="width: 100%;">
-                <el-option
-                  v-for="item in rtuOptions"
-                  :key="item.id"
-                  :label="item.rtuName"
-                  :value="item.id"
-                />
+                <el-option v-for="item in rtuOptions" :key="item.id" :label="item.rtuName" :value="item.id" />
               </el-select>
             </el-form-item>
             <el-form-item label="支路号">
               <el-input v-model="editIlcForm.rtuBranchNo" placeholder="请输入支路号" />
             </el-form-item>
             <el-form-item label="备注">
-              <el-input v-model="editIlcForm.description" type="textarea" :maxlength="200" show-word-limit placeholder="请输入备注信息" />
+              <el-input v-model="editIlcForm.description" type="textarea" :maxlength="200" show-word-limit
+                placeholder="请输入备注信息" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -390,12 +417,7 @@
     </el-dialog>
 
     <!-- Add ILC Dialog -->
-    <el-dialog
-      v-model="showAddIlcDialog"
-      title="添加灯具"
-      width="900px"
-      :close-on-click-modal="false"
-    >
+    <el-dialog v-model="showAddIlcDialog" title="添加灯具" width="900px" :close-on-click-modal="false">
       <el-form label-width="100px" :model="addIlcForm">
         <el-row :gutter="20">
           <el-col :span="12">
@@ -403,8 +425,10 @@
               <el-input v-model="addIlcForm.ilcName" placeholder="请输入单灯名称" />
             </el-form-item>
             <el-form-item label="经纬度">
-              <el-input v-model="addIlcForm.positionX" placeholder="经度" style="width: 40%; margin-right: 8px;" readonly />
-              <el-input v-model="addIlcForm.positionY" placeholder="纬度" style="width: 40%; margin-right: 8px;" readonly />
+              <el-input v-model="addIlcForm.positionX" placeholder="经度" style="width: 40%; margin-right: 8px;"
+                readonly />
+              <el-input v-model="addIlcForm.positionY" placeholder="纬度" style="width: 40%; margin-right: 8px;"
+                readonly />
               <el-button @click="showAddIlcMapDialog = true">选择经纬度</el-button>
             </el-form-item>
             <el-form-item label="高度">
@@ -415,12 +439,7 @@
             </el-form-item>
             <el-form-item label="所属监控终端">
               <el-select v-model="addIlcForm.rtuId" placeholder="请选择所属监控终端" style="width: 100%;">
-                <el-option
-                  v-for="item in rtuOptions"
-                  :key="item.id"
-                  :label="item.rtuName"
-                  :value="item.id"
-                />
+                <el-option v-for="item in rtuOptions" :key="item.id" :label="item.rtuName" :value="item.id" />
               </el-select>
             </el-form-item>
             <el-form-item label="手机号">
@@ -430,7 +449,8 @@
               <el-input v-model="addIlcForm.rtuBranchNo" placeholder="请输入支路号" />
             </el-form-item>
             <el-form-item label="备注">
-              <el-input v-model="addIlcForm.description" type="textarea" :maxlength="200" show-word-limit placeholder="请输入备注信息" />
+              <el-input v-model="addIlcForm.description" type="textarea" :maxlength="200" show-word-limit
+                placeholder="请输入备注信息" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -442,43 +462,23 @@
     </el-dialog>
 
     <!-- MapLocationPicker -->
-    <MapLocationPicker
-      v-model="showAddDeviceMapDialog"
-      :lng="addDeviceForm.longitude"
-      :lat="addDeviceForm.latitude"
-      title="选择经纬度"
-      @confirm="handleAddDeviceMapConfirm"
-    />
-    <MapLocationPicker
-      v-model="showEditDeviceMapDialog"
-      :lng="editDeviceForm.longitude"
-      :lat="editDeviceForm.latitude"
-      title="选择经纬度"
-      @confirm="handleEditDeviceMapConfirm"
-    />
-    <MapLocationPicker
-      v-model="showAddIlcMapDialog"
-      :lng="addIlcForm.positionX"
-      :lat="addIlcForm.positionY"
-      title="选择经纬度"
-      @confirm="handleAddIlcMapConfirm"
-    />
-    <MapLocationPicker
-      v-model="showEditIlcMapDialog"
-      :lng="editIlcForm.positionX"
-      :lat="editIlcForm.positionY"
-      title="选择经纬度"
-      @confirm="handleEditIlcMapConfirm"
-    />
+    <MapLocationPicker v-model="showAddDeviceMapDialog" :lng="addDeviceForm.longitude" :lat="addDeviceForm.latitude"
+      title="选择经纬度" @confirm="handleAddDeviceMapConfirm" />
+    <MapLocationPicker v-model="showEditDeviceMapDialog" :lng="editDeviceForm.longitude" :lat="editDeviceForm.latitude"
+      title="选择经纬度" @confirm="handleEditDeviceMapConfirm" />
+    <MapLocationPicker v-model="showAddIlcMapDialog" :lng="addIlcForm.positionX" :lat="addIlcForm.positionY"
+      title="选择经纬度" @confirm="handleAddIlcMapConfirm" />
+    <MapLocationPicker v-model="showEditIlcMapDialog" :lng="editIlcForm.positionX" :lat="editIlcForm.positionY"
+      title="选择经纬度" @confirm="handleEditIlcMapConfirm" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed, onUnmounted, nextTick } from 'vue';
-import { Plus, Search, Edit } from '@element-plus/icons-vue'
+import { ref, reactive, onMounted, computed, onUnmounted, nextTick, watch } from 'vue';
+import { Plus, Search, Edit, Warning, View, Location, MapLocation, Guide, Place, ArrowDown } from '@element-plus/icons-vue'
 import rpc from '../utils/rpc'
 import AMapLoader from '@amap/amap-jsapi-loader'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import axios from 'axios'
 import MapLocationPicker from '../components/MapLocationPicker.vue'
 
@@ -530,14 +530,292 @@ const submitAddDevice = async () => {
     showAddDeviceDialog.value = false
     fetchDeviceTree()
   } catch (e) {
-    ElMessage.error('设备添加失败')
+    console.error('设备添加失败:', e)
   }
 }
 
 // 标签页状态
-const activeTab = ref('device')
+const activeTab = ref('region') // 默认选中区域列表
 const searchKeyword = ref('')
 
+// 区域列表相关
+const regionSearchKeyword = ref('')
+const regionTreeData = ref<any[]>([])
+const regionProps = {
+  children: 'children',
+  label: (data: any) => {
+    // 判断节点类型及其标签
+    const nodeName = data.name || data.regionName || '未命名';
+
+    // 我们不在这里直接返回带图标的内容，而是在树组件的插槽中处理
+    return nodeName;
+  }
+}
+
+// 获取区域列表树
+const fetchRegionTree = async () => {
+  try {
+    const result = await rpc.post('/region/list/device/tree')
+    console.log('区域树原始数据类型:', typeof result)
+
+    // 确保数据是数组
+    let rawData: any[] = []
+    if (Array.isArray(result)) {
+      rawData = result
+    } else if (result && typeof result === 'object') {
+      if ('result' in result) {
+        rawData = Array.isArray(result.result) ? result.result : [result.result]
+      } else if ('rows' in result) {
+        rawData = Array.isArray(result.rows) ? result.rows : [result.rows]
+      } else {
+        // 如果是直接返回对象，尝试将其作为根节点
+        rawData = [result]
+      }
+    }
+
+    console.log('处理前的原始数据:', JSON.stringify(rawData).substring(0, 300) + '...')
+
+    // 生成唯一key的计数器
+    let keyCounter = 1;
+
+    // 根据实际数据结构构建树
+    // 先处理区域层级
+    const processedData = rawData.map(region => {
+      // 创建区域节点
+      const regionNode = {
+        id: region.id,
+        name: region.regionName || region.name || '未命名区域',
+        description: region.remark || region.description || '',
+        // 创建唯一key: region前缀+id+计数器
+        key: `region_${region.id}_${keyCounter++}`,
+        // 明确标记为区域类型
+        isRegion: true,
+        children: []
+      }
+
+      // 处理道路层级
+      if (region.roadList && Array.isArray(region.roadList)) {
+        regionNode.children = region.roadList.map((road: any) => {
+          // 创建道路节点
+          const roadNode = {
+            id: road.roadId || road.id,
+            name: road.roadName || road.name || '未命名道路',
+            description: road.remark || road.description || '',
+            // 创建唯一key: road前缀+id+计数器
+            key: `road_${road.roadId || road.id}_${keyCounter++}`,
+            // 添加明确的类型标记，确保在渲染时正确识别
+            isRoad: true,
+            // 标记道路ID，用于判断节点类型
+            roadId: road.roadId || road.id,
+            children: []
+          }
+
+          // 处理灯具层级
+          if (road.ilcs && Array.isArray(road.ilcs)) {
+            roadNode.children = road.ilcs.map((ilc: any) => {
+              // 创建灯具节点
+              return {
+                id: ilc.id,
+                deviceId: ilc.id, // 标记为设备
+                name: ilc.ilcName || ilc.name || '未命名灯具',
+                description: ilc.description || '',
+                positionX: ilc.positionX,
+                positionY: ilc.positionY,
+                positionZ: ilc.positionZ,
+                isPowerOn: ilc.workState === 1,
+                // 创建唯一key: light前缀+id+计数器
+                key: `light_${ilc.id}_${keyCounter++}`,
+                // 明确标记为灯具类型
+                isLight: true
+              }
+            })
+          }
+
+          return roadNode
+        })
+      }
+
+      return regionNode
+    })
+
+    console.log('处理后的区域树数据:', JSON.stringify(processedData).substring(0, 300) + '...')
+    regionTreeData.value = processedData
+
+    // 如果没有数据，添加一个默认节点用于测试
+    if (regionTreeData.value.length === 0) {
+      console.log('区域数据为空，添加测试节点')
+      regionTreeData.value = [
+        {
+          id: 1,
+          key: 'region_test_1',
+          name: '示例区域1',
+          description: '这是一个示例区域',
+          children: [
+            {
+              id: 2,
+              key: 'region_test_2',
+              name: '子区域1',
+              description: '子区域描述'
+            },
+            {
+              id: 3,
+              key: 'region_test_3',
+              name: '子区域2',
+              description: '子区域描述',
+              children: [
+                {
+                  id: 4,
+                  deviceId: 1001,
+                  key: 'light_test_4',
+                  name: '设备1',
+                  positionX: 121.4737,
+                  positionY: 31.23037
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  } catch (error) {
+    console.error('获取区域树数据失败:', error)
+    regionTreeData.value = []
+
+    // 发生错误时，提供测试数据
+    regionTreeData.value = [
+      {
+        id: 1,
+        key: 'error_region_1',
+        name: '测试区域（请检查接口）',
+        description: '接口请求失败时的测试数据',
+        children: [
+          {
+            id: 2,
+            key: 'error_region_2',
+            name: '子测试区域',
+            description: '子区域描述'
+          }
+        ]
+      }
+    ]
+  }
+}
+
+// 区域树过滤
+const filteredRegionTreeData = computed(() => {
+  if (!regionSearchKeyword.value) {
+    return regionTreeData.value
+  }
+
+  const keyword = regionSearchKeyword.value.toLowerCase()
+
+  // 递归过滤树形数据，支持所有层级
+  const filterNode = (node: any): any | null => {
+    const isMatch = (node.name || '').toLowerCase().includes(keyword)
+    let filteredChildren: any[] = []
+
+    if (node.children && node.children.length > 0) {
+      filteredChildren = node.children
+        .map((child: any) => filterNode(child))
+        .filter((child: any): child is any => child !== null)
+
+      if (isMatch || filteredChildren.length > 0) {
+        return {
+          ...node,
+          children: filteredChildren
+        }
+      }
+    } else if (isMatch) {
+      return node
+    }
+
+    return null
+  }
+
+  return regionTreeData.value
+    .map(node => filterNode(node))
+    .filter((node: any): node is any => node !== null)
+})
+
+// 区域搜索处理
+const handleRegionSearch = () => {
+  console.log('区域搜索关键词:', regionSearchKeyword.value)
+}
+
+// 区域节点点击
+const handleRegionNodeClick = (data: any) => {
+  console.log('点击的区域节点:', data)
+  console.log('节点类型信息:', {
+    isRegion: data.isRegion,
+    isRoad: data.isRoad,
+    isLight: data.isLight,
+    deviceId: data.deviceId,
+    key: data.key,
+    hasChildren: data.children && data.children.length > 0
+  })
+
+  clearMarkers()
+
+  // 判断节点类型
+  let nodeType;
+
+  if (data.isLight || data.deviceId) {
+    nodeType = 'light'; // 标记为单灯
+  } else if (data.isRoad) {
+    nodeType = 'road'; // 标记为道路
+  } else {
+    nodeType = 'region'; // 默认为区域
+  }
+
+  // 只有当节点有经纬度信息时才添加标记
+  if (data.positionX && data.positionY) {
+    console.log('添加标记 - 类型:', nodeType, '名称:', data.name);
+
+    // 只标记当前节点，不标记子节点
+    addMarker({
+      id: data.id || data.deviceId,
+      x: data.positionX,
+      y: data.positionY,
+      name: data.name,
+      active: data.isPowerOn || false,
+      type: nodeType
+    });
+
+    // 移动地图中心点到当前节点
+    map.value.setCenter([data.positionX, data.positionY]);
+    map.value.setZoom(15);
+  } else if (data.children && data.children.length > 0) {
+    // 如果当前节点没有经纬度但有子节点，获取第一个有经纬度的子节点并移动地图到那里
+    // 注意：仍然不会添加子节点的标记
+    const firstWithLatLng = data.children.find((child: any) => child.positionX && child.positionY);
+    if (firstWithLatLng) {
+      map.value.setCenter([firstWithLatLng.positionX, firstWithLatLng.positionY]);
+      map.value.setZoom(14); // 稍微缩小一点以显示更多区域
+    }
+  }
+}
+
+// 处理编辑区域
+const handleEditRegion = (data: any) => {
+  console.log('编辑区域:', data)
+  // 这里可以添加编辑区域的弹窗逻辑
+  ElMessage.info('编辑区域功能即将上线')
+}
+
+// 处理添加区域
+const handleAddRegion = (data: any) => {
+  console.log('添加区域:', data)
+  // 这里可以添加添加区域的弹窗逻辑
+  ElMessage.info('添加区域功能即将上线')
+}
+
+// 处理编辑区域设备
+const handleEditRegionDevice = (data: any) => {
+  console.log('编辑区域设备:', data)
+  // 这里可以添加编辑区域设备的弹窗逻辑
+  ElMessage.info('编辑区域设备功能即将上线')
+}
+
 // DeviceTreeItem 递归支持多级
 interface DeviceTreeItem {
   id: number;
@@ -566,6 +844,7 @@ interface DeviceTreeItem {
   ilcName?: string;
   rtuBranchNo?: number;
   key?: string;
+  isPowerOn: boolean;
 }
 
 // 编辑分组表单类型
@@ -583,7 +862,16 @@ interface EditGroupForm {
 const deviceTreeData = ref<DeviceTreeItem[]>([])
 const defaultProps = {
   children: 'children',
-  label: (data: DeviceTreeItem) => data.ilcName || data.rtuName || data.groupName || '未命名设备'
+  label: (data: DeviceTreeItem) => {
+    // 只返回节点名称，图标在模板中处理
+    if (data.ilcName) {
+      return data.ilcName;
+    } else if (data.rtuName) {
+      return data.rtuName;
+    } else {
+      return data.groupName || '未命名分组';
+    }
+  }
 }
 
 // 获取设备树数据
@@ -591,7 +879,7 @@ const fetchDeviceTree = async () => {
   try {
     const result = await rpc.post('/lightGroup/list/device/tree')
     console.log('设备树原始数据:', result)
-    
+
     // 确保数据是数组
     let treeData: any[] = []
     if (Array.isArray(result)) {
@@ -599,7 +887,7 @@ const fetchDeviceTree = async () => {
     } else if (result && typeof result === 'object' && 'result' in result) {
       treeData = Array.isArray(result.result) ? result.result : [result.result]
     }
-    
+
     // 递归转换所有节点为 DeviceTreeItem 结构，所有子节点合并到 children
     const convertNode = (item: any): DeviceTreeItem => {
       const isIlc = !!item.ilcName
@@ -626,7 +914,8 @@ const fetchDeviceTree = async () => {
         cameraNum: item.cameraNum,
         ilcName: item.ilcName,
         rtuBranchNo: item.rtuBranchNo,
-        key: item.id + "_" + item.groupName + "_" + item.rtuName + "_" + item.ilcName
+        key: item.id + "_" + item.groupName + "_" + item.rtuName + "_" + item.ilcName,
+        isPowerOn: item.isPowerOn,
       }
       const children: DeviceTreeItem[] = []
       if (item.rtuList) children.push(...item.rtuList.map((child: any) => convertNode(child)))
@@ -635,9 +924,9 @@ const fetchDeviceTree = async () => {
       // console.log('转换后的节点:', node)
       return node
     }
-    
+
     deviceTreeData.value = treeData.map(item => convertNode(item))
-    
+
     console.log('处理后的设备树数据:', deviceTreeData.value)
   } catch (error) {
     console.error('获取设备树数据失败:', error)
@@ -652,12 +941,12 @@ const filteredTreeData = computed(() => {
   }
 
   const keyword = searchKeyword.value.toLowerCase()
-  
+
   // 递归过滤树形数据，支持所有层级
   const filterNode = (node: DeviceTreeItem): DeviceTreeItem | null => {
     const isMatch = (node.groupName || '').toLowerCase().includes(keyword) ||
-                   (node.rtuName || '').toLowerCase().includes(keyword) ||
-                   (node.ilcName || '').toLowerCase().includes(keyword)
+      (node.rtuName || '').toLowerCase().includes(keyword) ||
+      (node.ilcName || '').toLowerCase().includes(keyword)
     let filteredChildren: DeviceTreeItem[] = []
     if (node.children && node.children.length > 0) {
       filteredChildren = node.children
@@ -709,20 +998,33 @@ const initMap = async () => {
       zoom: 11,
       center: [121.4737, 31.23037], // 默认中心点
       viewMode: '3D',
-      mapStyle: 'amap://styles/dark', // 使用深色主题
-      features: ['bg', 'building', 'point'], // 仅显示背景、建筑物和POI点
-      buildingAnimation: true, // 开启建筑物动画效果
-      pitch: 50, // 俯仰角度
-      skyColor: '#1E1E1E', // 天空颜色
+      mapStyle: 'amap://styles/darkblue', // 使用深色主题
+      features: ['bg', 'building', 'point'],
+      pitch: 40,
+      resizeEnable: true,
+      buildingAnimation: true, // 仅显示背景、建筑物和POI点
+      showBuildingBlock: true,
+      showIndoorMap: false,
+      showLabel: true, // 启用标签显示
+      showRoad: true, // 显示道路提供参考
+      showTraffic: false, // 不显示交通
+      zoomEnable: true, // 确保允许缩放
+      dragEnable: true, // 确保允许拖动
+      scrollWheel: true, // 启用鼠标滚轮缩放
+      keyboardEnable: true, // 启用键盘控制
+      doubleClickZoom: true, // 启用双击缩放
+      touchZoom: true, // 启用触摸缩放
+      jogEnable: true, // 地图
+      logoVisible: false, // 隐藏左下角高德地图标记
     })
 
     // 添加地图控件
-    map.value.addControl(new AMap.Scale({
-      position: 'LB' // 左下角
-    }))
-    map.value.addControl(new AMap.HawkEye({
-      position: 'RB' // 右下角
-    }))
+    // map.value.addControl(new AMap.Scale({
+    //   position: 'LB' // 左下角
+    // }))
+    // map.value.addControl(new AMap.HawkEye({
+    //   position: 'RB' // 右下角
+    // }))
   } catch (error) {
     console.error('地图加载失败:', error)
   }
@@ -731,7 +1033,7 @@ const initMap = async () => {
 // 判断节点是否有经纬度
 function hasLatLng(node: any) {
   return node.positionX !== undefined && node.positionX !== null &&
-         node.positionY !== undefined && node.positionY !== null
+    node.positionY !== undefined && node.positionY !== null
 }
 
 const handleNodeClick = (data: DeviceTreeItem) => {
@@ -744,10 +1046,11 @@ const handleNodeClick = (data: DeviceTreeItem) => {
     data.children.forEach(child => {
       if (hasLatLng(child)) {
         addMarker({
+          id: child.id,
           x: child.positionX,
           y: child.positionY,
           name: child.ilcName || child.rtuName || child.groupName,
-          active: true,
+          active: child.isPowerOn,
           type: child.ilcName ? 'light' : (child.rtuName ? 'rtu' : 'group')
         })
       }
@@ -759,10 +1062,11 @@ const handleNodeClick = (data: DeviceTreeItem) => {
   } else if (hasLatLng(data)) {
     console.log('处理单个设备节点:', data.ilcName || data.rtuName || data.groupName, '经纬度:', data.positionX, data.positionY)
     addMarker({
+      id: data.id,
       x: data.positionX,
       y: data.positionY,
       name: data.ilcName || data.rtuName || data.groupName,
-      active: true,
+      active: data.isPowerOn,
       type: data.ilcName ? 'light' : (data.rtuName ? 'rtu' : 'group')
     })
     map.value.setCenter([data.positionX, data.positionY])
@@ -780,57 +1084,92 @@ const addMarker = (marker: any) => {
   }
 
   console.log('添加标记:', marker)
+
+  // 根据类型选择不同的图标
+  let iconUrl = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png';
+  if (marker.type === 'region') {
+    iconUrl = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_g.png'; // 区域使用绿色
+  } else if (marker.type === 'road') {
+    iconUrl = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_y.png'; // 道路使用黄色
+  } else if (marker.type === 'light') {
+    // 单灯根据状态切换颜色
+    iconUrl = marker.active
+      ? 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png' // 开启状态蓝色
+      : 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'; // 关闭状态红色
+  }
+
   const newMarker = new AMap.Marker({
     position: [marker.x, marker.y],
     title: marker.name,
     icon: new AMap.Icon({
       size: new AMap.Size(25, 34),
-      image: marker.active 
-        ? 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
-        : 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
+      image: iconUrl,
       imageSize: new AMap.Size(25, 34)
     })
   })
 
-  // 添加信息窗体
-  const infoWindow = new AMap.InfoWindow({
-    content: `
-      <div style="padding: 15px; min-width: 200px;">
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-          <h4 style="margin: 0; color: #333;">${marker.name}</h4>
-          <span style="padding: 2px 8px; border-radius: 4px; font-size: 12px; background: ${marker.active ? '#67C23A' : '#F56C6C'}; color: white;">
-            ${marker.active ? '开启' : '关闭'}
-          </span>
-        </div>
-        <div style="border-top: 1px solid #eee; padding-top: 10px;">
-          <p style="margin: 5px 0; color: #666;">
-            <span style="display: inline-block; width: 80px;">设备类型：</span>
-            <span>${marker.type === 'light' ? '路灯' : marker.type === 'rtu' ? '终端' : '分组'}</span>
-          </p>
-          <p style="margin: 5px 0; color: #666;">
-            <span style="display: inline-block; width: 80px;">经度：</span>
-            <span>${marker.x.toFixed(6)}</span>
-          </p>
-          <p style="margin: 5px 0; color: #666;">
-            <span style="display: inline-block; width: 80px;">纬度：</span>
-            <span>${marker.y.toFixed(6)}</span>
-          </p>
-          <div style="margin-top: 10px; display: flex; gap: 10px;">
-            <button onclick="handleControl('on')" style="flex: 1; padding: 5px; background: #409EFF; color: white; border: none; border-radius: 4px; cursor: pointer;">
-              开启
-            </button>
-            <button onclick="handleControl('off')" style="flex: 1; padding: 5px; background: #F56C6C; color: white; border: none; border-radius: 4px; cursor: pointer;">
-              关闭
-            </button>
-          </div>
+  // 创建信息窗体内容
+  let content = `
+    <div style="padding: 15px; min-width: 200px;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+        <h4 style="margin: 0; color: #333;">${marker.name}</h4>
+      </div>
+      <div style="border-top: 1px solid #eee; padding-top: 10px;">
+        <p style="margin: 5px 0; color: #666;">
+          <span style="display: inline-block; width: 80px;">类型：</span>
+          <span>${getMarkerTypeName(marker.type)}</span>
+        </p>
+        <p style="margin: 5px 0; color: #666;">
+          <span style="display: inline-block; width: 80px;">经度：</span>
+          <span>${marker.x.toFixed(6)}</span>
+        </p>
+        <p style="margin: 5px 0; color: #666;">
+          <span style="display: inline-block; width: 80px;">纬度：</span>
+          <span>${marker.y.toFixed(6)}</span>
+        </p>
+  `;
+
+  // 只有单灯类型才显示控制按钮
+  if (marker.type === 'light') {
+    content += `
+        <div style="margin-top: 10px; display: flex; gap: 10px;">
+          <button id="light-on-btn" style="flex: 1; padding: 5px; background: #409EFF; color: white; border: none; border-radius: 4px; cursor: pointer;">
+            开启
+          </button>
+          <button id="light-off-btn" style="flex: 1; padding: 5px; background: #F56C6C; color: white; border: none; border-radius: 4px; cursor: pointer;">
+            关闭
+          </button>
         </div>
+    `;
+  }
+
+  // 关闭信息窗体内容
+  content += `
       </div>
-    `,
+    </div>
+  `;
+
+  // 添加信息窗体
+  const infoWindow = new AMap.InfoWindow({
+    content: content,
     offset: new AMap.Pixel(0, -30),
     closeWhenClickMap: true,
     autoMove: true
   })
 
+  // 只有单灯类型才挂载控制事件
+  if (marker.type === 'light') {
+    // 挂载事件，ilcId 取自 marker.id
+    infoWindow.on('open', () => {
+      setTimeout(() => {
+        const onBtn = document.getElementById('light-on-btn')
+        const offBtn = document.getElementById('light-off-btn')
+        if (onBtn) onBtn.onclick = () => handleControl('on', marker.id)
+        if (offBtn) offBtn.onclick = () => handleControl('off', marker.id)
+      }, 0)
+    })
+  }
+
   // 点击标记时显示信息窗体
   newMarker.on('click', () => {
     infoWindow.open(map.value, newMarker.getPosition())
@@ -841,19 +1180,34 @@ const addMarker = (marker: any) => {
   console.log('标记添加成功')
 }
 
+// 获取标记类型的显示名称
+const getMarkerTypeName = (type: string): string => {
+  switch (type) {
+    case 'region': return '区域';
+    case 'road': return '道路';
+    case 'light': return '单灯';
+    default: return '设备';
+  }
+}
+
 // 处理灯具控制
-const handleControl = async (action: 'on' | 'off') => {
+const handleControl = async (action: 'on' | 'off', ilcId?: number) => {
+  if (!ilcId) {
+    ElMessage.error('缺少灯具ID，无法控制')
+    return
+  }
   try {
-    // 这里添加控制灯具的API调用
-    console.log('控制灯具:', action)
-    // const response = await rpc.post('/light/control', {
-    //   action,
-    //   deviceId: currentDevice.value?.id
-    // })
-    ElMessage.success(`灯具${action === 'on' ? '开启' : '关闭'}成功`)
+    if (action === 'on') {
+      await rpc.post('/lightm/ilc/powerOn', { ilcId })
+      ElMessage.success('灯具开启成功')
+    } else {
+      await rpc.post('/lightm/ilc/powerOff', { ilcId })
+      ElMessage.success('灯具关闭成功')
+    }
+    // 操作成功后刷新设备树和地图
+    await fetchDeviceTree()
   } catch (error) {
     console.error('控制灯具失败:', error)
-    ElMessage.error('操作失败，请重试')
   }
 }
 
@@ -902,24 +1256,28 @@ onMounted(() => {
   // 初始化数据
   const init = async () => {
     try {
+      // 获取区域树数据
+      await fetchRegionTree()
+
+      // 获取设备树数据
       await fetchDeviceTree()
+
+      // 初始化地图
       await initMap()
+
+      // 获取其他选项数据
       fetchGroupOptions()
       fetchRtuOptions()
+
+      // 获取设备列表
+      fetchDeviceOptions()
     } catch (error) {
       console.error('初始化失败:', error)
     }
   }
-  
+
   // 执行初始化
   init()
-  
-  // 更新时间
-  // updateTime() // 立即更新一次
-  // timer.value = setInterval(updateTime, 1000)
-  
-  // // 添加全局方法供信息窗体调用
-  // (window as any).handleControl = handleControl
 })
 
 // 在组件卸载时清理定时器
@@ -948,7 +1306,7 @@ const fetchGroupOptions = async () => {
     const rows = (res && typeof res === 'object' && 'rows' in res) ? (res as any).rows : []
     groupOptions.value = Array.isArray(rows) ? rows : []
   } catch (e) {
-    ElMessage.error('获取分组列表失败')
+    console.error('获取分组列表失败:', e)
   }
 }
 
@@ -1008,7 +1366,6 @@ const submitEditDevice = async () => {
     fetchDeviceTree()
   } catch (e) {
     console.error('设备编辑失败:', e)
-    ElMessage.error('设备编辑失败')
   }
 }
 
@@ -1038,6 +1395,7 @@ const handleEditGroup = (data: DeviceTreeItem) => {
   }
 
   editGroupForm.value = {
+    id: data.id || 0,
     groupName: data.groupName || '',
     description: data.description || '',
     defaultLightOnTime: parseTime(data.defaultLightOnTime),
@@ -1073,12 +1431,13 @@ const submitEditGroup = async () => {
     showEditGroupDialog.value = false
     fetchDeviceTree()
   } catch (e) {
-    ElMessage.error('分组编辑失败')
+    console.error('分组编辑失败:', e)
   }
 }
 
 const resetEditGroupForm = () => {
   editGroupForm.value = {
+    id: 0,
     groupName: '',
     description: '',
     defaultLightOnTime: null,
@@ -1108,14 +1467,14 @@ const editIlcForm = ref({
 const handleEditIlc = (data: DeviceTreeItem) => {
   // 预填充ilc表单，所有字段都保证为 string
   editIlcForm.value = {
-    id: data.id !== undefined && data.id !== null ? data.id : '',
+    id: data.id || 0,
     ilcName: data.ilcName || '',
     positionX: data.positionX?.toString() || '',
     positionY: data.positionY?.toString() || '',
     positionZ: data.positionZ?.toString() || '',
     commUid: data.commUid || '',
     uimNumber: data.uimNumber || '',
-    rtuId: data.rtuId ?? '',
+    rtuId: data.rtuId !== undefined && data.rtuId !== null ? String(data.rtuId) : '',
     rtuBranchNo: data.rtuBranchNo?.toString() || '',
     description: data.description || '',
     // 可继续补充其它字段
@@ -1144,7 +1503,7 @@ const submitEditIlc = async () => {
     showEditIlcDialog.value = false
     fetchDeviceTree()
   } catch (e) {
-    ElMessage.error('灯具编辑失败')
+    console.error('灯具编辑失败:', e)
   }
 }
 
@@ -1171,7 +1530,7 @@ const handleAddIlc = (parent: DeviceTreeItem) => {
     positionZ: '',
     commUid: '',
     uimNumber: '',
-    rtuId: parent.rtuId ?? '', // 归属终端
+    rtuId: parent.rtuId !== undefined && parent.rtuId !== null ? String(parent.rtuId) : '',
     rtuBranchNo: '',
     description: '',
     // 可继续补充其它字段
@@ -1198,7 +1557,7 @@ const submitAddIlc = async () => {
     showAddIlcDialog.value = false
     fetchDeviceTree()
   } catch (e) {
-    ElMessage.error('灯具添加失败')
+    console.error('灯具添加失败:', e)
   }
 }
 
@@ -1232,12 +1591,301 @@ const rtuOptions = ref<{ id: number; rtuName: string }[]>([]);
 const fetchRtuOptions = async () => {
   try {
     const res = await rpc.post('/lightm/rtu/list', {});
-    const rows = res?.rows || [];
+    const data = res as any;
+    const rows = data?.rows || [];
     rtuOptions.value = Array.isArray(rows) ? rows : [];
   } catch (e) {
-    ElMessage.error('获取监控终端列表失败');
+    console.error('获取监控终端列表失败:', e);
   }
 };
+
+const faultSearchKeyword = ref('')
+const faultList = ref<any[]>([])
+const faultCurrentPage = ref(1)
+const faultPageSize = ref(10)
+const totalFaults = ref(0)
+const faultLoading = ref(false)
+const deviceOptions = ref<{ commUid: string, ilcName: string }[]>([])
+
+// 过滤后的故障列表
+const filteredFaultList = computed(() => {
+  return faultList.value
+})
+
+// 全局标志，用于控制故障列表是否已经获取过
+const hasFetchedFaultList = ref(false)
+
+// 获取故障工单列表
+const fetchFaultList = async () => {
+  // 如果已经获取过数据且列表不为空，则不再请求
+  if (hasFetchedFaultList.value && faultList.value.length > 0) {
+    console.log('已有故障列表数据，跳过请求')
+    return
+  }
+
+  console.log('开始获取故障列表数据')
+  hasFetchedFaultList.value = true
+
+  try {
+    faultLoading.value = true
+    const params: {
+      limit: number;
+      like: Record<string, any>;
+      and: Record<string, any>;
+      orderby: Array<Record<string, string>>;
+    } = {
+      limit: -1, // -1表示获取所有数据
+      like: {},
+      and: { status: ['new'] }, // 只查询新建状态的工单
+      orderby: [{ created_at: 'desc' }]
+    }
+
+    const res = await rpc.post('/ticket/list', params)
+    console.log('故障工单列表:', res)
+
+    // 兼容不同的返回格式
+    if (res && typeof res === 'object') {
+      const data = res as any;
+      if ('rows' in data) {
+        faultList.value = data.rows || []
+      } else if (Array.isArray(data)) {
+        faultList.value = data
+      } else if ('result' in data && Array.isArray(data.result)) {
+        faultList.value = data.result
+      } else {
+        faultList.value = []
+      }
+    } else {
+      faultList.value = []
+    }
+  } catch (error) {
+    console.error('获取故障工单列表失败:', error)
+    faultList.value = []
+  } finally {
+    faultLoading.value = false
+  }
+}
+
+// 在组件外部创建一个监听器，监听标签页变化
+watch(activeTab, (newVal) => {
+  console.log('标签切换到:', newVal)
+  if (newVal === 'fault') {
+    // 只要切换到故障列表，就调用fetchFaultList
+    // fetchFaultList函数内部会判断是否需要实际执行请求
+    fetchFaultList()
+  }
+})
+
+// 获取设备列表
+const fetchDeviceOptions = async () => {
+  try {
+    const res = await rpc.post('/lightm/ilc/list', { limit: -1 }) as any
+    deviceOptions.value = (res?.rows || []).map((item: any) => ({
+      commUid: item.commUid,
+      ilcName: item.ilcName || item.rtuName || item.commUid // 优先使用ilcName，其次使用rtuName
+    }))
+  } catch (error) {
+    console.error('获取设备列表失败:', error)
+  }
+}
+
+
+
+// 处理分页变化
+const handleFaultSizeChange = (val: number) => {
+  faultPageSize.value = val
+  fetchFaultList()
+}
+
+const handleFaultCurrentChange = (val: number) => {
+  faultCurrentPage.value = val
+  fetchFaultList()
+}
+
+// 获取设备名称的函数，处理不同字段名的兼容性
+const getDeviceName = (row: any): string => {
+  if (!row) return '-';
+
+  // 检查不同可能的字段
+  const deviceId = row.comm_uid || row.commUid || row.deviceId || '';
+  if (!deviceId) return row.deviceName || '-';
+
+  // 在设备列表中查找
+  const device = deviceOptions.value.find(item => item.commUid === deviceId);
+  return device?.ilcName || deviceId || row.deviceName || '-';
+}
+
+// 处理故障设备的下拉命令
+const handleFaultCommand = (command: 'viewDetail' | 'viewLocation', row: any) => {
+  if (command === 'viewDetail') {
+    showFaultDetail(row);
+  } else if (command === 'viewLocation') {
+    showFaultLocation(row);
+  }
+}
+
+// 兼容旧的接口调用
+const handleViewFault = (row: any) => {
+  showFaultDetail(row);
+}
+
+// 查看故障详情
+const showFaultDetail = (row: any) => {
+  let detailContent = `
+    <div style="padding: 10px;">
+      <h3 style="margin-bottom: 15px; color: #409EFF;">${row.title || '未命名工单'}</h3>
+      <div style="margin-bottom: 10px;">
+        <b>故障设备:</b> ${getDeviceName(row)}
+      </div>
+      <div style="margin-bottom: 10px;">
+        <b>发生时间:</b> ${row.created_at ? new Date(row.created_at).toLocaleString() : '未知'}
+      </div>
+      <div style="margin-bottom: 10px;">
+        <b>详细描述:</b><br>
+        <div style="padding: 10px; border-radius: 4px; margin-top: 5px; white-space: pre-wrap;">${row.description || '无'}</div>
+      </div>
+    </div>
+  `;
+
+  ElMessageBox.alert(detailContent, '故障详情', {
+    dangerouslyUseHTMLString: true,
+    confirmButtonText: '确定',
+    customClass: 'fault-detail-dialog'
+  })
+}
+
+// 查看故障位置
+const showFaultLocation = async (row: any) => {
+  // 获取设备ID
+  const deviceId = row.comm_uid || row.commUid || row.deviceId || row.ilcId;
+  if (!deviceId) {
+    ElMessage.warning('无法定位该设备，设备ID不存在');
+    return;
+  }
+
+  try {
+    // 设置加载状态
+    // ElMessage.info('正在查询设备位置...');
+
+    // 直接调用单灯详情接口获取位置信息
+    const response = await rpc.post('/lightm/ilc/detail', { id: deviceId });
+
+    console.log('单灯详情:', response);
+
+    let deviceInfo: any = null;
+
+    // 处理不同的返回格式
+    if (response && typeof response === 'object') {
+      // 处理 axios 响应对象可能的结构
+      if ('data' in response) {
+        deviceInfo = response.data;
+      } else {
+        deviceInfo = response;
+      }
+    }
+
+    if (deviceInfo && deviceInfo.positionX && deviceInfo.positionY) {
+      // 清除现有标记
+      clearMarkers();
+
+      // 添加设备标记并居中
+      addMarker({
+        id: deviceInfo.id,
+        x: deviceInfo.positionX,
+        y: deviceInfo.positionY,
+        name: deviceInfo.ilcName || getDeviceName(row),
+        active: deviceInfo.isPowerOn || false,
+        type: 'light'
+      });
+
+      // 居中并放大地图
+      map.value.setCenter([deviceInfo.positionX, deviceInfo.positionY]);
+      map.value.setZoom(16);
+
+      ElMessage.success('已在地图上标记设备位置');
+    } else {
+      // 如果接口没有返回位置信息，则尝试从本地树中查找
+      let localDeviceInfo = null;
+
+      // 在设备列表中查找
+      const device = deviceOptions.value.find(item => item.commUid === deviceId);
+      if (device) {
+        // 进一步查找完整设备信息，包含经纬度
+        const findDeviceInTree = (nodes: any[]): any => {
+          for (const node of nodes || []) {
+            if ((node.id === deviceId) || (node.commUid === deviceId) || (node.cuid === deviceId)) {
+              return node;
+            }
+            if (node.children && node.children.length > 0) {
+              const found = findDeviceInTree(node.children);
+              if (found) return found;
+            }
+          }
+          return null;
+        };
+
+        // 在两个树中查找
+        localDeviceInfo = findDeviceInTree(deviceTreeData.value) || findDeviceInTree(regionTreeData.value);
+
+        if (localDeviceInfo && localDeviceInfo.positionX && localDeviceInfo.positionY) {
+          // 清除现有标记
+          clearMarkers();
+
+          // 添加设备标记并居中
+          addMarker({
+            id: localDeviceInfo.id,
+            x: localDeviceInfo.positionX,
+            y: localDeviceInfo.positionY,
+            name: getDeviceName(row),
+            active: localDeviceInfo.isPowerOn || false,
+            type: 'light'
+          });
+
+          // 居中并放大地图
+          map.value.setCenter([localDeviceInfo.positionX, localDeviceInfo.positionY]);
+          map.value.setZoom(16);
+        } else {
+          ElMessage.warning('该设备没有位置信息，无法在地图上显示');
+        }
+      } else {
+        ElMessage.warning('该设备没有位置信息，无法在地图上显示');
+      }
+    }
+  } catch (error) {
+    console.error('获取设备位置失败:', error);
+    ElMessage.error('获取设备位置失败');
+  }
+}
+
+// 在组件挂载后获取设备列表和故障列表
+onMounted(() => {
+  // 初始化数据
+  const init = async () => {
+    try {
+      // 获取区域树数据
+      await fetchRegionTree()
+
+      // 获取设备树数据
+      await fetchDeviceTree()
+
+      // 初始化地图
+      await initMap()
+
+      // 获取其他选项数据
+      fetchGroupOptions()
+      fetchRtuOptions()
+
+      // 获取设备列表
+      fetchDeviceOptions()
+    } catch (error) {
+      console.error('初始化失败:', error)
+    }
+  }
+
+  // 执行初始化
+  init()
+})
+// ... existing code ...
 </script>
 
 <style scoped>
@@ -1290,7 +1938,8 @@ const fetchRtuOptions = async () => {
   gap: 20px;
 }
 
-.grid-icon img, .user img {
+.grid-icon img,
+.user img {
   width: 24px;
   height: 24px;
 }
@@ -1386,6 +2035,7 @@ const fetchRtuOptions = async () => {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -1529,11 +2179,54 @@ const fetchRtuOptions = async () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  /* 保留此属性确保左右两端对齐 */
   font-size: 14px;
   padding-right: 8px;
   color: #fff;
 }
 
+.node-left-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.node-icon {
+  margin-right: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.node-icon :deep(.el-icon) {
+  font-size: 16px;
+  margin-right: 1px;
+}
+
+.node-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 区域图标颜色 */
+.node-icon :deep(.el-icon.location) {
+  color: #00c3ff;
+}
+
+/* 路段/终端图标颜色 */
+.node-icon :deep(.el-icon.map-location),
+.node-icon :deep(.el-icon.guide) {
+  color: #faad14;
+}
+
+/* 单灯图标颜色 */
+.node-icon :deep(.el-icon.place) {
+  color: #13c2c2;
+}
+
 :deep(.el-tree-node__content) {
   height: 40px;
   color: #fff;
@@ -1606,9 +2299,11 @@ const fetchRtuOptions = async () => {
   0% {
     box-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
   }
+
   50% {
     box-shadow: 0 0 20px rgba(0, 255, 0, 0.9);
   }
+
   100% {
     box-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
   }
@@ -1696,7 +2391,8 @@ const fetchRtuOptions = async () => {
   color: white;
 }
 
-.form-input, .form-select {
+.form-input,
+.form-select {
   width: 100%;
   padding: 8px 12px;
   background: rgba(255, 255, 255, 0.1);
@@ -1720,7 +2416,8 @@ const fetchRtuOptions = async () => {
   border-top: 1px solid #0a3677;
 }
 
-.btn-cancel, .btn-add {
+.btn-cancel,
+.btn-add {
   padding: 8px 20px;
   border-radius: 4px;
   cursor: pointer;
@@ -1737,4 +2434,184 @@ const fetchRtuOptions = async () => {
   color: white;
   border: none;
 }
+
+.fault-list-container {
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.fault-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(10, 54, 119, 0.3);
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #00c3ff;
+  text-shadow: 0 0 10px rgba(0, 195, 255, 0.3);
+}
+
+.search-container {
+  width: 300px;
+}
+
+.search-input :deep(.el-input__wrapper) {
+  background-color: rgba(10, 54, 119, 0.2);
+  border: 1px solid rgba(0, 102, 255, 0.3);
+  box-shadow: none;
+  border-radius: 4px;
+  transition: all 0.3s;
+}
+
+.search-input :deep(.el-input__wrapper:hover) {
+  border-color: rgba(0, 102, 255, 0.5);
+}
+
+.search-input :deep(.el-input__wrapper.is-focus) {
+  border-color: #0066ff;
+  box-shadow: 0 0 10px rgba(0, 102, 255, 0.3);
+}
+
+.search-input :deep(.el-input__inner) {
+  color: white;
+}
+
+.search-input :deep(.el-input__prefix) {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.fault-table {
+  margin-bottom: 20px;
+  border: 1px solid rgba(10, 54, 119, 0.5);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.fault-table :deep(.el-table__inner-wrapper) {
+  background-color: transparent;
+}
+
+.fault-table :deep(.el-table__body tr:hover > td) {
+  background-color: rgba(10, 54, 119, 0.3) !important;
+}
+
+.fault-table :deep(.el-table__row) {
+  background-color: rgba(4, 26, 71, 0.5);
+  color: white;
+  transition: all 0.3s;
+}
+
+.fault-table :deep(.el-table__row:nth-child(even)) {
+  background-color: rgba(4, 26, 71, 0.7);
+}
+
+.fault-title {
+  font-weight: 500;
+  color: #fff;
+}
+
+.device-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #f56c6c;
+}
+
+.device-icon {
+  font-size: 16px;
+  color: #f56c6c;
+}
+
+.pagination-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 16px;
+}
+
+.pagination-wrapper :deep(.el-pagination) {
+  --el-pagination-button-bg-color: rgba(10, 54, 119, 0.3);
+  --el-pagination-hover-color: #00c3ff;
+  --el-pagination-font-size: 14px;
+  --el-pagination-button-color: white;
+  --el-pagination-button-disabled-color: rgba(255, 255, 255, 0.3);
+}
+
+.pagination-wrapper :deep(.el-pagination .is-active) {
+  background-color: #0066ff !important;
+  color: white !important;
+}
+
+.filter-section {
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.filter-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* 故障详情弹窗样式 */
+:deep(.fault-detail-dialog) {
+  max-width: 600px;
+}
+
+:deep(.fault-detail-dialog .el-message-box__content) {
+  padding: 0;
+  overflow: auto;
+  max-height: 70vh;
+}
+
+.device-name {
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.device-name:hover {
+  color: #409EFF;
+}
+
+.device-name .el-icon--right {
+  margin-left: auto;
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+:deep(.el-dropdown-menu__item) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+}
+
+:deep(.el-dropdown-menu__item .el-icon) {
+  margin-right: 4px;
+}
+
+:deep(.el-dropdown-menu) {
+  background: rgba(4, 26, 71, 0.9);
+  border: 1px solid rgba(10, 54, 119, 0.8);
+}
+
+:deep(.el-dropdown-menu__item) {
+  color: white;
+}
+
+:deep(.el-dropdown-menu__item:hover) {
+  background-color: rgba(10, 54, 119, 0.8);
+  color: #409EFF;
+}
 </style>
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 8e96486..3e826a8 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -128,7 +128,8 @@ const doLogin = async () => {
     });
     userStore.setUserInfo({
       nickname: (res as any).nickname || username.value,
-      token: (res as any).token
+      token: (res as any).token,
+      username: username.value
     });
     ElMessage.success('登录成功');
     await router.push('/dashboard');
diff --git a/src/views/MaintenanceView.vue b/src/views/MaintenanceView.vue
index 8300492..7dd448d 100644
--- a/src/views/MaintenanceView.vue
+++ b/src/views/MaintenanceView.vue
@@ -18,15 +18,16 @@
       <div class="main-area">
         <el-card>
           <div style="margin-bottom: 16px;">
-            <el-form :inline="true" :model="filters" size="small">
-              <el-form-item label="关键词">
-                <el-input v-model="filters.keyword" size="small" placeholder="请输入关键词" clearable />
+            <el-form :inline="true" :model="filters" size="small" @submit.prevent="handleQuery">
+              <el-form-item label="标题">
+                <el-input v-model="filters.keyword" style="width: 200px;" placeholder="请输入标题" clearable @keyup.enter="handleQuery" />
               </el-form-item>
-              <el-form-item label="时间区间">
+              <el-form-item label="故障时间">
                 <el-date-picker
                   v-model="filters.startTime"
                   type="datetime"
                   format="YYYY-MM-DD HH:mm:ss"
+                  value-format="YYYY-MM-DD HH:mm:ss"
                   placeholder="开始时间"
                   style="width: 160px"
                 />
@@ -35,6 +36,7 @@
                   v-model="filters.endTime"
                   type="datetime"
                   format="YYYY-MM-DD HH:mm:ss"
+                  value-format="YYYY-MM-DD HH:mm:ss"
                   placeholder="结束时间"
                   style="width: 160px"
                 />
@@ -58,12 +60,13 @@
             </el-form>
           </div>
           <el-tabs v-model="currentTab" @tab-change="handleTabChange" style="margin-bottom: 16px;">
-            <el-tab-pane label="全部工单" name="all" />
+
             <el-tab-pane label="我的工单" name="mine" />
+            <el-tab-pane label="全部工单" name="all" />
           </el-tabs>
           <el-table :data="ticketList" border style="width: 100%">
             <el-table-column prop="title" label="工单标题" min-width="120" />
-            <el-table-column prop="description" label="工单描述" min-width="180" />
+            <!-- <el-table-column prop="description" label="工单描述" min-width="180" /> -->
             <el-table-column prop="source" label="来源" min-width="80">
               <template #default="{ row }">
                 {{ getSourceLabel(row.source) }}
@@ -76,16 +79,31 @@
                 </el-tag>
               </template>
             </el-table-column>
+            <el-table-column label="故障设备" min-width="120">
+              <template #default="{ row }">
+                {{ deviceOptions.find(item => item.commUid === row.comm_uid)?.ilcName || row.comm_uid || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="fault_time" label="故障时间" min-width="180" />
+            <el-table-column label="处理人" min-width="100">
+              <template #default="{ row }">
+                {{ handlerOptions.find(user => user.username === row.handler)?.nickname || row.handler }}
+              </template>
+            </el-table-column>
             <el-table-column prop="contact" label="联系方式" min-width="120" />
-            <el-table-column prop="expected_completion_time" label="预计完成时间" min-width="140" />
-            <el-table-column prop="status" label="状态" min-width="100">
+            <el-table-column prop="expected_completion_time" label="预计完成时间" min-width="180" />
+            <el-table-column prop="status" label="状态" min-width="100" fixed="right">
               <template #default="{ row }">
-                <el-tag :type="row.status === 'completed' ? 'success' : row.status === 'in_progress' ? 'warning' : row.status === 'closed' ? 'info' : 'default'">
+                <el-tag
+                  :type="getStatusType(row.status)"
+                  effect="dark"
+                  disable-transitions
+                >
                   {{ getStatusLabel(row.status) }}
                 </el-tag>
               </template>
             </el-table-column>
-            <el-table-column label="操作" min-width="180">
+            <el-table-column label="操作" min-width="180" fixed="right">
               <template #default="{ row }">
                 <el-button-group>
                   <el-button size="small" @click="handleView(row)">查看</el-button>
@@ -96,8 +114,8 @@
                     </el-button>
                     <template #dropdown>
                       <el-dropdown-menu>
-                        <el-dropdown-item @click="handleUpdateStatus(row)" v-if="canUpdateStatus(row.status)">流转</el-dropdown-item>
-                        <el-dropdown-item @click="handleDispatch(row)">派工</el-dropdown-item>
+                        <el-dropdown-item @click="handleProcess(row)" :disabled="!canProcess(row.status, row)">处理</el-dropdown-item>
+                        <el-dropdown-item @click="handleDispatch(row)" :disabled="row.status !== 'new'">派工</el-dropdown-item>
                         <el-dropdown-item divided @click="handleDelete(row)" v-if="canDelete(row.status)">
                           <span style="color: #f56c6c;">删除</span>
                         </el-dropdown-item>
@@ -134,6 +152,16 @@
                 <el-option v-for="item in sources" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
             </el-form-item>
+            <el-form-item label="故障设备" required>
+              <el-select v-model="createForm.comm_uid" filterable placeholder="请选择故障设备">
+                <el-option
+                  v-for="item in deviceOptions"
+                  :key="item.commUid"
+                  :label="item.ilcName"
+                  :value="item.commUid"
+                />
+              </el-select>
+            </el-form-item>
             <el-form-item label="优先级" required>
               <el-select v-model="createForm.priority" placeholder="请选择">
                 <el-option v-for="item in priorities" :key="item.value" :label="item.label" :value="item.value" />
@@ -142,12 +170,9 @@
             <el-form-item label="联系方式" required>
               <el-input v-model="createForm.contact" />
             </el-form-item>
-            <el-form-item label="预计完成时间">
-              <el-date-picker v-model="createForm.expected_completion_time" format="YYYY-MM-DD HH:mm:ss" type="datetime" style="width: 100%" />
-            </el-form-item>
           </el-form>
           <template #footer>
-            <el-button @click="showCreateDialog = false">取消</el-button>
+            <el-button @click="() => { showCreateDialog = false; Object.assign(createForm, initialCreateForm()) }">取消</el-button>
             <el-button type="primary" @click="handleCreate">确定</el-button>
           </template>
         </el-dialog>
@@ -207,42 +232,64 @@
       <el-skeleton v-if="viewLoading" rows="6" animated />
       <div v-else>
         <div v-if="currentTicket" class="ticket-detail">
-          <div class="detail-item">
-            <span class="label">工单标题：</span>
-            <span class="value">{{ currentTicket.title }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">工单描述：</span>
-            <span class="value">{{ currentTicket.description }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">工单来源：</span>
-            <span class="value">{{ getSourceLabel(currentTicket.source) }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">优先级：</span>
-            <span class="value">{{ getPriorityLabel(currentTicket.priority) }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">联系方式：</span>
-            <span class="value">{{ currentTicket.contact }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">预计完成时间：</span>
-            <span class="value">{{ currentTicket.expected_completion_time }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">工单状态：</span>
-            <span class="value">{{ getStatusLabel(currentTicket.status) }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">创建时间：</span>
-            <span class="value">{{ currentTicket.created_at }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">更新时间：</span>
-            <span class="value">{{ currentTicket.updated_at }}</span>
+          <div class="detail-item"><span class="label">工单ID：</span><span class="value">{{ currentTicket.id }}</span></div>
+          <div class="detail-item"><span class="label">工单标题：</span><span class="value">{{ currentTicket.title }}</span></div>
+          <div class="detail-item"><span class="label">工单描述：</span><span class="value">{{ currentTicket.description }}</span></div>
+          <div class="detail-item"><span class="label">工单来源：</span><span class="value">{{ getSourceLabel(currentTicket.source) }}</span></div>
+          <div class="detail-item"><span class="label">故障设备：</span><span class="value">
+            {{
+              (() => {
+                if (!currentTicket) return '-';
+                // 兼容 comm_uid/commUid 字段
+                const commUid = (currentTicket as any).comm_uid || (currentTicket as any).commUid;
+                if (!commUid) return '-';
+                return deviceOptions.find(item => item.commUid === commUid)?.ilcName || commUid || '-';
+              })()
+            }}
+          </span></div>
+          <div class="detail-item"><span class="label">优先级：</span><span class="value">{{ getPriorityLabel(currentTicket.priority) }}</span></div>
+          <div class="detail-item"><span class="label">工单状态：</span><span class="value">{{ getStatusLabel(currentTicket.status) }}</span></div>
+          
+          <div class="detail-item"><span class="label">创建人姓名：</span><span class="value">{{ currentTicket.created_name }}</span></div>
+          <div class="detail-item"><span class="label">联系方式：</span><span class="value">
+            {{
+              (() => {
+                if (!currentTicket) return '-';
+                return (currentTicket as any).contact || (currentTicket as any).contact_info || '-';
+              })()
+            }}
+          </span></div>
+          
+          <div class="detail-item"><span class="label">故障发生时间：</span><span class="value">{{ currentTicket.fault_time }}</span></div>
+          <div class="detail-item"><span class="label">派单时间：</span><span class="value">{{ currentTicket.dispatch_time }}</span></div>
+          <div class="detail-item"><span class="label">预计完成时间：</span><span class="value">{{ currentTicket.expected_completion_time }}</span></div>
+          <div class="detail-item"><span class="label">处理人：</span><span class="value">{{ currentTicket.handler }}</span></div>
+          <div class="detail-item"><span class="label">故障描述：</span><span class="value">
+            {{
+              (() => {
+                if (!currentTicket) return '-';
+                const desc = (currentTicket as any).fault_description || (currentTicket as any).fault_description || '-';
+                return desc || '-';
+              })()
+            }}
+          </span></div>
+          <div class="detail-item"><span class="label">处理完成时间：</span><span class="value">{{ getStatusLabel(currentTicket.status) === '已完成' ? currentTicket.updated_at : '-' }}</span></div>
+          <div class="detail-item"><span class="label">图片：</span>
+            <span class="value">
+              <el-image
+                v-for="(img, idx) in currentTicket.images"
+                :key="idx"
+                :src="img"
+                style="width: 60px; margin-right: 8px;"
+                fit="cover"
+                :preview-src-list="currentTicket.images"
+                :initial-index="idx"
+                v-if="currentTicket.images && currentTicket.images.length"
+              />
+              <span v-if="!currentTicket.images || !currentTicket.images.length">-</span>
+            </span>
           </div>
+          
         </div>
       </div>
     </el-dialog>
@@ -251,7 +298,22 @@
     <el-dialog v-model="showDispatchDialog" title="派工" width="400px">
       <el-form :model="dispatchForm" label-width="80px">
         <el-form-item label="派工人">
-          <el-input v-model="dispatchForm.handler" />
+          <el-select v-model="dispatchForm.handler" filterable placeholder="请选择处理人">
+            <el-option
+              v-for="user in handlerOptions"
+              :key="user.username"
+              :label="user.nickname"
+              :value="user.username"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="优先级">
+          <el-select v-model="dispatchForm.priority" placeholder="请选择优先级">
+            <el-option v-for="item in priorities" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="预计完成时间" required>
+          <el-date-picker v-model="dispatchForm.expected_completion_time" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" style="width: 100%" />
         </el-form-item>
         <el-form-item label="备注">
           <el-input v-model="dispatchForm.remark" type="textarea" />
@@ -273,6 +335,34 @@
     >
       <fault-management-view />
     </el-dialog>
+
+    <!-- 处理弹窗 -->
+    <el-dialog v-model="showProcessDialog" title="工单处理" width="500px">
+      <el-form :model="processForm" label-width="100px">
+        <el-form-item label="故障描述" required>
+          <el-input v-model="processForm.fault_description" type="textarea" placeholder="请输入故障描述" />
+        </el-form-item>
+        <el-form-item label="上传图片">
+          <el-upload
+            action="/filestransfer/upload"
+            list-type="picture-card"
+            :file-list="processForm.images"
+            :on-remove="handleRemoveImage"
+            :on-success="handleUploadSuccess"
+            :before-upload="beforeImageUpload"
+            accept="image/*"
+            :limit="5"
+            multiple
+          >
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showProcessDialog = false">取消</el-button>
+        <el-button type="primary" @click="submitProcess">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -286,6 +376,8 @@ import type { TicketItem, TicketDetail } from '../types/ticket'
 import FaultManagementView from './FaultManagementView.vue'
 import { fetchTicketList } from '../api/ticket'
 import { ArrowDown } from '@element-plus/icons-vue'
+import dayjs from 'dayjs'
+import rpc from '../utils/rpc'
 
 const ticketStore = useTicketStore()
 const userStore = useUserStore()
@@ -298,21 +390,22 @@ const ticketList = ref<TicketItem[]>([])
 
 // 标签页配置
 const tabs = [
+  { label: '我的工单', value: 'mine' },
   { label: '全部工单', value: 'all' },
-  { label: '我的工单', value: 'my' }
+
 ]
-const currentTab = ref('all')
+const currentTab = ref('mine')
 
 // 状态配置
 const statuses = [
   { label: '新建', value: 'new' },
-  { label: '已审核', value: 'reviewed' },
+  // { label: '已审核', value: 'reviewed' },
   { label: '已派发', value: 'dispatched' },
-  { label: '已分配', value: 'assigned' },
-  { label: '处理中', value: 'in_progress' },
+  // { label: '已分配', value: 'assigned' },
+  // { label: '处理中', value: 'in_progress' },
   { label: '已完成', value: 'completed' },
-  { label: '已关闭', value: 'closed' },
-  { label: '已驳回', value: 'rejected' }
+  // { label: '已关闭', value: 'closed' },
+  // { label: '已驳回', value: 'rejected' }
 ]
 
 // 优先级配置
@@ -324,9 +417,9 @@ const priorities = [
 
 // 来源配置
 const sources = [
-  { label: '市民举报', value: 'CITIZEN' },
-  { label: '巡检发现', value: 'INSPECTION' },
-  { label: '监控系统', value: 'MONITOR' }
+  { label: '市民举报', value: '市民举报' },
+  { label: '巡检发现', value: '巡检发现' },
+  { label: '监控系统', value: '监控系统' }
 ]
 
 interface Filters {
@@ -358,19 +451,22 @@ const showHistory = ref(false)
 const showFaultManagement = ref(false)
 const viewLoading = ref(false)
 const showDispatchDialog = ref(false)
+const showProcessDialog = ref(false)
 
 // 当前选中的工单
 const currentTicket = ref<TicketDetail | null>(null)
 
 // 创建工单表单
-const createForm = reactive({
+const initialCreateForm = () => ({
   title: '',
   description: '',
   source: '',
   priority: '',
   contact: '',
-  expected_completion_time: ''
+  expected_completion_time: '',
+  comm_uid: ''
 })
+const createForm = reactive(initialCreateForm())
 
 // 状态更新表单
 const statusForm = ref({
@@ -382,7 +478,16 @@ const statusForm = ref({
 const dispatchForm = reactive({
   handler: '',
   remark: '',
-  ticketId: null as number | null
+  ticketId: null as number | null,
+  priority: '',
+  expected_completion_time: ''
+})
+
+// 处理表单
+const processForm = reactive({
+  id: null as number | null,
+  fault_description: '',
+  images: [] as any[]
 })
 
 // 获取工单列表
@@ -395,18 +500,18 @@ const fetchList = async () => {
       and: {},
       orderby: [{ created_at: 'desc' }]
     }
-    if (filters.keyword) params.like.title = [filters.keyword]
+    if (filters.keyword) params.like.title = ['%' + filters.keyword + '%']
     if (filters.status) params.and.status = [filters.status]
     if (filters.priority) params.and.priority = [filters.priority]
     if (filters.startTime && filters.endTime) {
       params.where = [
-        { field: 'created_at', operator: '>=', value: filters.startTime },
-        { field: 'created_at', operator: '<=', value: filters.endTime }
+        { field: 'fault_time', operator: '>=', value: dayjs(filters.startTime).format('YYYY-MM-DD HH:mm:ss') },
+        { field: 'fault_time', operator: '<=', value: dayjs(filters.endTime).format('YYYY-MM-DD HH:mm:ss') }
       ]
     }
     // 只查自己的工单
     if (currentTab.value === 'mine') {
-      params.and.handler = [userStore.nickname]
+      params.and.handler = [userStore.username]
     }
     const res: any = await fetchTicketList(params)
     ticketList.value = res?.rows || []
@@ -462,13 +567,14 @@ const handleCreate = async () => {
       ...createForm,
       status: 'new',
       creator_id: userStore.token || 1, // 用token或实际用户ID
-      fault_time: new Date().toISOString(),
+      fault_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
       expected_completion_time: createForm.expected_completion_time
-        ? new Date(createForm.expected_completion_time).toISOString()
+        ? dayjs(createForm.expected_completion_time).format('YYYY-MM-DD HH:mm:ss')
         : undefined
     })
     ElMessage.success('创建成功')
     showCreateDialog.value = false
+    Object.assign(createForm, initialCreateForm())
     fetchList()
   } catch (e: any) {
     console.error(e)
@@ -584,20 +690,132 @@ const handleDispatch = (row: any) => {
   dispatchForm.handler = ''
   dispatchForm.remark = ''
   dispatchForm.ticketId = row.id
+  dispatchForm.priority = row.priority
+  dispatchForm.expected_completion_time = row.expected_completion_time
   showDispatchDialog.value = true
 }
 
-const submitDispatch = () => {
+const submitDispatch = async () => {
+  if (!dispatchForm.handler) {
+    ElMessage.error('请填写派工人')
+    return
+  }
+  if (!dispatchForm.expected_completion_time) {
+    ElMessage.error('请填写预计完成时间')
+    return
+  }
+  await ticketStore.processTicket({
+    
+      id: dispatchForm.ticketId,
+      operator_id: userStore.token,
+      handler: dispatchForm.handler,
+      expected_completion_time: dayjs(dispatchForm.expected_completion_time).format('YYYY-MM-DD HH:mm:ss'),
+      // 优先级
+      priority: dispatchForm.priority,
+      remark: dispatchForm.remark
+    
+  })
+
   // TODO: 调用派工API
   ElMessage.success(`工单${dispatchForm.ticketId}已派工给：${dispatchForm.handler}`)
   showDispatchDialog.value = false
+
+  fetchList()
   // 可在此刷新列表
 }
 
+// 处理工单
+const handleProcess = (row: any) => {
+  processForm.id = row.id
+  processForm.fault_description = ''
+  processForm.images = []
+  showProcessDialog.value = true
+}
+
+const handleRemoveImage = (file: any, fileList: any[]) => {
+  processForm.images = fileList
+}
+
+const handleUploadSuccess = (response: any, file: any, fileList: any[]) => {
+  // 假设后端返回的图片url在 response.url
+  file.url = response.url || response?.result?.url || ''
+  processForm.images = fileList
+}
+
+const beforeImageUpload = (file: File) => {
+  const isImage = file.type.startsWith('image/')
+  if (!isImage) {
+    ElMessage.error('只能上传图片文件！')
+  }
+  return isImage
+}
+
+const submitProcess = async () => {
+  if (!processForm.fault_description) {
+    ElMessage.error('请输入故障描述')
+    return
+  }
+  // 模拟图片上传，实际应上传到服务器后拿到url
+  const imageUrls = processForm.images.map(f => f.url || f.response?.url).filter(Boolean)
+  await ticketStore.processTicket({
+      id: processForm.id,
+      operator_id: userStore.token,
+      fault_description: processForm.fault_description,
+      images: imageUrls
+    
+  })
+  ElMessage.success('处理成功')
+  showProcessDialog.value = false
+  fetchList()
+}
+
+// 判断是否可以处理
+const canProcess = (status: string, row?: any) => {
+  // 处理人必须是自己
+  const currentUser = userStore.username
+  const isMine = row && row.handler && row.handler === currentUser
+  return ['in_progress', 'dispatched', 'assigned'].includes(status) && isMine
+}
+
+const handlerOptions = ref<{username: string, nickname: string}[]>([])
+
+const fetchHandlerOptions = async () => {
+  const res = await rpc.post('/account/list', { limit: -1 }) as any
+  handlerOptions.value = (res?.rows || []).map((item: any) => ({
+    username: item.username,
+    nickname: item.nickname || item.username
+  }))
+}
+
+const deviceOptions = ref<{ commUid: string, ilcName: string }[]>([])
+
+const fetchDeviceOptions = async () => {
+  const res = await rpc.post('/lightm/ilc/list', { limit: -1 }) as any
+  deviceOptions.value = (res?.rows || []).map((item: any) => ({
+    commUid: item.commUid,
+    ilcName: item.ilcName || item.commUid
+  }))
+}
+
 // 初始化
 onMounted(() => {
   fetchList()
+  fetchHandlerOptions()
+  fetchDeviceOptions()
 })
+
+const getStatusType = (status: string) => {
+  switch (status) {
+    case 'new': return 'info';
+    case 'dispatched': return 'primary';
+    case 'assigned': return 'warning';
+    case 'in_progress': return 'warning';
+    case 'completed': return 'success';
+    case 'closed': return 'default';
+    case 'rejected': return 'danger';
+    default: return 'info';
+  }
+}
 </script>
 
 <style scoped>
@@ -1233,25 +1451,6 @@ input:checked + .slider:before {
   z-index: 999;
 }
 
-/* 自定义滚动条 */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
 .fault-management-dialog {
   :deep(.el-dialog) {
     margin: 0 !important;
diff --git a/vite.config.js b/vite.config.js
index d93c607..4729002 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -17,6 +17,14 @@ export default defineConfig({
                 target: 'https://lamp.ruixininfo.com',
                 changeOrigin: true
             },
+            "/filestransfer": {
+                secure: false,
+                headers: {
+                    Referer: 'https://lamp.ruixininfo.com'
+                },
+                target: 'https://lamp.ruixininfo.com',
+                changeOrigin: true
+            },
         }
     },
     plugins: [vue()],