From f05f49e7960f425e46769463fec28fa59747d5f8 Mon Sep 17 00:00:00 2001
From: cheng <545895878@qq.com>
Date: Wed, 17 Dec 2025 23:53:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                             |   1 +
 pnpm-lock.yaml                           |  13 +-
 src/App.vue                              | 931 +++++++++++++++++++++--
 src/assets/image/1.png                   | Bin 0 -> 441 bytes
 src/assets/image/2.png                   | Bin 0 -> 496 bytes
 src/assets/image/3.png                   | Bin 0 -> 169 bytes
 src/assets/image/4.png                   | Bin 0 -> 309 bytes
 src/assets/image/5.png                   | Bin 0 -> 441 bytes
 src/assets/image/6.png                   | Bin 0 -> 390 bytes
 src/assets/image/7.png                   | Bin 0 -> 292 bytes
 src/assets/image/Completed.png           | Bin 0 -> 524 bytes
 src/assets/image/fire.png                | Bin 0 -> 809 bytes
 src/assets/image/in_progress.png         | Bin 0 -> 705 bytes
 src/assets/image/personnel.png           | Bin 0 -> 986 bytes
 src/assets/image/regional_management.png | Bin 0 -> 5772 bytes
 src/assets/image/smoke.png               | Bin 0 -> 305 bytes
 src/assets/image/to_be_started.png       | Bin 0 -> 684 bytes
 src/assets/image/wrj.png                 | Bin 0 -> 9906 bytes
 src/main.js                              |   5 +
 19 files changed, 905 insertions(+), 45 deletions(-)
 create mode 100644 src/assets/image/1.png
 create mode 100644 src/assets/image/2.png
 create mode 100644 src/assets/image/3.png
 create mode 100644 src/assets/image/4.png
 create mode 100644 src/assets/image/5.png
 create mode 100644 src/assets/image/6.png
 create mode 100644 src/assets/image/7.png
 create mode 100644 src/assets/image/Completed.png
 create mode 100644 src/assets/image/fire.png
 create mode 100644 src/assets/image/in_progress.png
 create mode 100644 src/assets/image/personnel.png
 create mode 100644 src/assets/image/regional_management.png
 create mode 100644 src/assets/image/smoke.png
 create mode 100644 src/assets/image/to_be_started.png
 create mode 100644 src/assets/image/wrj.png

diff --git a/package.json b/package.json
index 6272289..f3d2b45 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@element-plus/icons-vue": "^2.3.2",
     "DroneCtrl": "1.0.1",
     "axios": "^1.13.2",
     "element-plus": "^2.12.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d9adf3f..3581664 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@amap/amap-jsapi-loader':
         specifier: ^1.0.1
         version: 1.0.1
+      '@element-plus/icons-vue':
+        specifier: ^2.3.2
+        version: 2.3.2(vue@3.5.25)
       DroneCtrl:
         specifier: 1.0.1
         version: 1.0.1
@@ -134,24 +137,28 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-arm64-musl@1.0.0-beta.50':
     resolution: {integrity: sha512-L0zRdH2oDPkmB+wvuTl+dJbXCsx62SkqcEqdM+79LOcB+PxbAxxjzHU14BuZIQdXcAVDzfpMfaHWzZuwhhBTcw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rolldown/binding-linux-x64-gnu@1.0.0-beta.50':
     resolution: {integrity: sha512-gyoI8o/TGpQd3OzkJnh1M2kxy1Bisg8qJ5Gci0sXm9yLFzEXIFdtc4EAzepxGvrT2ri99ar5rdsmNG0zP0SbIg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-x64-musl@1.0.0-beta.50':
     resolution: {integrity: sha512-zti8A7M+xFDpKlghpcCAzyOi+e5nfUl3QhU023ce5NCgUxRG5zGP2GR9LTydQ1rnIPwZUVBWd4o7NjZDaQxaXA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rolldown/binding-openharmony-arm64@1.0.0-beta.50':
     resolution: {integrity: sha512-eZUssog7qljrrRU9Mi0eqYEPm3Ch0UwB+qlWPMKSUXHNqhm3TvDZarJQdTevGEfu3EHAXJvBIe0YFYr0TPVaMA==}
@@ -204,7 +211,7 @@ packages:
     resolution: {integrity: sha512-iHmwV3QcVGGvSC1BG5bZ4z6iwa1SOpAPWmnjOErd4Ske+lZua5K9TtAVdx0gMBClJ28DViCbSmZitjWZsWO3LA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
-      vite: ^5.0.0 || ^6.0.0 || ^7.0.0
+      vite: npm:rolldown-vite@7.2.5
       vue: ^3.2.25
 
   '@vue/compiler-core@3.5.25':
@@ -404,24 +411,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.2:
     resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.2:
     resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.2:
     resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.2:
     resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
diff --git a/src/App.vue b/src/App.vue
index 1b478b0..343a6c9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,118 @@
 <template>
-  <div class="map-container">
-    <!-- 地图容器 -->
-    <div id="map-container" ref="mapContainer"></div>
-    
-    <!-- 控制面板 -->
-    <div class="control-panel">
+  <div class="app-container">
+    <!-- 顶部导航栏 -->
+    <header class="top-header">
+      <div class="header-left">
+        <span class="demo-tag">演示界面——电脑端</span>
+        <!-- <span class="region-name">傲来国</span> -->
+      </div>
+      <div class="header-center">
+        <h1 class="app-title">天枢视界</h1>
+      </div>
+      <div class="header-right">
+        <span class="datetime">{{ currentDateTime }}</span>
+      </div>
+    </header>
+
+    <!-- 主内容区域 -->
+    <div class="main-content">
+      <!-- 地图容器（全屏） -->
+      <div class="map-container">
+        <div id="map-container" ref="mapContainer"></div>
+        
+        <!-- 左侧信息面板（覆盖层） -->
+        <aside class="left-panel">
+          <!-- 实时画面 -->
+          <div class="info-panel">
+            <div class="panel-header">
+              <span class="panel-title">实时画面</span>
+              <span class="panel-count">35路</span>
+            </div>
+            <div class="video-grid">
+              <div v-for="i in 12" :key="i" class="video-item">
+                <div class="video-placeholder">
+                  <span class="video-label">{{ i }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 巡检航线 -->
+          <div class="info-panel">
+            <div class="panel-header">
+              <span class="panel-title">巡检航线</span>
+              <span class="panel-count">35条</span>
+            </div>
+            <div class="status-list">
+              <div class="status-item">
+                <img src="./assets/image/Completed.png" alt="已完成" class="status-icon" />
+                <span class="status-number">13</span>
+                <span class="status-text">已完成</span>
+              </div>
+              <div class="status-item">
+                <img src="./assets/image/in_progress.png" alt="进行中" class="status-icon" />
+                <span class="status-number">23</span>
+                <span class="status-text">进行中</span>
+              </div>
+              <div class="status-item">
+                <img src="./assets/image/to_be_started.png" alt="待开始" class="status-icon" />
+                <span class="status-number">11</span>
+                <span class="status-text">待开始</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 识别场景 -->
+          <div class="info-panel">
+            <div class="panel-header">
+              <span class="panel-title">识别场景</span>
+              <span class="panel-count">35个</span>
+            </div>
+            <div class="status-list">
+              <div class="status-item">
+                <img src="./assets/image/fire.png" alt="火点" class="status-icon" />
+                <span class="status-number">13</span>
+                <span class="status-text">火点</span>
+              </div>
+              <div class="status-item">
+                <img src="./assets/image/personnel.png" alt="人员" class="status-icon" />
+                <span class="status-number">23</span>
+                <span class="status-text">人员</span>
+              </div>
+              <div class="status-item">
+                <img src="./assets/image/smoke.png" alt="烟雾" class="status-icon" />
+                <span class="status-number">11</span>
+                <span class="status-text">烟雾</span>
+              </div>
+            </div>
+          </div>
+        </aside>
+        
+        <!-- 控制面板 -->
+        <div class="control-panel" v-show="showControlPanel">
       <div class="panel-title">电子围栏控制</div>
       
+      <!-- 地图类型切换 -->
+      <div class="control-group">
+        <div class="draw-type-title">地图类型：</div>
+        <div class="draw-buttons">
+          <el-button 
+            @click="switchMapType('normal')" 
+            :type="mapType === 'normal' ? 'primary' : 'default'"
+            size="default"
+          >
+            普通地图
+          </el-button>
+          <el-button 
+            @click="switchMapType('satellite')" 
+            :type="mapType === 'satellite' ? 'primary' : 'default'"
+            size="default"
+          >
+            卫星地图
+          </el-button>
+        </div>
+      </div>
+      
       <!-- 绘制类型选择 -->
       <div class="control-group">
         <div class="draw-type-title">选择绘制类型：</div>
@@ -82,7 +188,7 @@
           @click="toggleWebSocket" 
           :type="wsConnected ? 'danger' : 'primary'"
           size="small"
-          style="width: 100%; margin-top: 8px;"
+          style="width: 100%; margin-top: 8px;margin-left: 0;"
         >
           {{ wsConnected ? '断开连接' : '开始连接' }}
         </el-button>
@@ -125,34 +231,196 @@
           清除所有围栏
         </el-button>
       </div>
+        </div>
+        
+        <!-- 右侧信息面板（覆盖层） -->
+        <aside class="right-panel">
+        <!-- 区域管理 -->
+        <div class="info-panel">
+          <div class="panel-header">
+            <span class="panel-title">区域管理</span>
+            <span class="panel-count">12个</span>
+          </div>
+          <div class="area-preview">
+            <img src="./assets/image/regional_management.png" alt="区域管理" class="area-image" />
+          </div>
+        </div>
+
+        <!-- 出勤设备 -->
+        <div class="info-panel">
+          <div class="panel-header">
+            <span class="panel-title">出勤设备</span>
+            <span class="panel-count">35台</span>
+          </div>
+          <div class="status-list">
+            <div class="status-item">
+              <div class="device-icon device-standby"></div>
+              <span class="status-number">25</span>
+              <span class="status-text">待机</span>
+            </div>
+            <div class="status-item">
+              <div class="device-icon device-duty"></div>
+              <span class="status-number">13</span>
+              <span class="status-text">在勤</span>
+            </div>
+            <div class="status-item">
+              <div class="device-icon device-charging"></div>
+              <span class="status-number">12</span>
+              <span class="status-text">充电</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 执行任务 -->
+        <div class="info-panel">
+          <div class="panel-header">
+            <span class="panel-title">执行任务</span>
+            <span class="panel-count">12项</span>
+          </div>
+          <div class="task-progress">
+            <div class="progress-item">
+              <div class="progress-bar">
+                <div class="progress-fill progress-completed" style="width: 13%"></div>
+              </div>
+              <span class="progress-text">13% 已完成</span>
+            </div>
+            <div class="progress-item">
+              <div class="progress-bar">
+                <div class="progress-fill progress-in-progress" style="width: 48%"></div>
+              </div>
+              <span class="progress-text">48% 进行中</span>
+            </div>
+            <div class="progress-item">
+              <div class="progress-bar">
+                <div class="progress-fill progress-pending" style="width: 60%"></div>
+              </div>
+              <span class="progress-text">60% 待开始</span>
+            </div>
+          </div>
+        </div>
+        </aside>
+      </div>
     </div>
+
+    <!-- 底部导航栏 -->
+    <footer class="bottom-footer">
+      <div class="footer-left">
+        <span class="storage-info">62.3GB</span>
+      </div>
+      <div class="footer-center">
+        <div class="resolution-info">
+          <!-- <span class="resolution-text">1109px x 1902px</span> -->
+        </div>
+        <div class="footer-icons">
+          <img 
+            :src="icon1" 
+            class="footer-icon-img"
+            @click="handleFooterIconClick(1)"
+            alt="图标1"
+          />
+          <img 
+            :src="icon2" 
+            class="footer-icon-img"
+            @click="handleFooterIconClick(2)"
+            alt="图标2"
+          />
+          <img 
+            :src="icon3" 
+            class="footer-icon-img"
+            @click="handleFooterIconClick(3)"
+            alt="图标3"
+          />
+          <img 
+            :src="icon4" 
+            class="footer-icon-img"
+            :class="{ 'active': showControlPanel }"
+            @click="handleFooterIconClick(4)"
+            alt="图标4"
+          />
+          <img 
+            :src="icon5" 
+            class="footer-icon-img"
+            @click="handleFooterIconClick(5)"
+            alt="图标5"
+          />
+          <img 
+            :src="icon6" 
+            class="footer-icon-img"
+            @click="handleFooterIconClick(6)"
+            alt="图标6"
+          />
+          <img 
+            :src="icon7" 
+            class="footer-icon-img"
+            @click="handleFooterIconClick(7)"
+            alt="图标7"
+          />
+        </div>
+      </div>
+      <div class="footer-right">
+        <span class="uptime-info">120.3 h</span>
+      </div>
+    </footer>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, computed } from 'vue'
 import AMapLoader from '@amap/amap-jsapi-loader'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { 
+  Upload, 
+  Connection, 
+  Folder, 
+  Download, 
+  ChatLineRound, 
+  Link, 
+  VideoPlay 
+} from '@element-plus/icons-vue'
 import { WebSocketClient, MockWebSocketDataGenerator } from './utils/websocket.js'
-import droneImage from './assets/wrj.jpg'
+import droneImage from './assets/image/wrj.png'
+import icon1 from './assets/image/1.png'
+import icon2 from './assets/image/2.png'
+import icon3 from './assets/image/3.png'
+import icon4 from './assets/image/4.png'
+import icon5 from './assets/image/5.png'
+import icon6 from './assets/image/6.png'
+import icon7 from './assets/image/7.png'
 import { getConfig } from ".//utils/request";
-import gcoord from 'gcoord';
+import gcoord from 'gcoord'; 
 import DroneCtrl, {
   UploadAreaReq
 } from 'DroneCtrl';
 
 const ctrl = new DroneCtrl(getConfig());
 
+// 当前日期时间
+const currentDateTime = ref('')
+const updateDateTime = () => {
+  const now = new Date()
+  const year = now.getFullYear()
+  const month = String(now.getMonth() + 1).padStart(2, '0')
+  const day = String(now.getDate()).padStart(2, '0')
+  const hours = String(now.getHours()).padStart(2, '0')
+  const minutes = String(now.getMinutes()).padStart(2, '0')
+  currentDateTime.value = `${year}年${month}月${day}日 ${hours}:${minutes}`
+}
+
 // 地图相关
 const mapContainer = ref(null)
 let map = null
 let AMap = null
 let mouseTool = null
+const mapType = ref('satellite') // 'normal' | 'satellite'
+const dronePath = ref([]) // 无人机轨迹点集合
+let droneTrackLine = null
+const MAX_TRACK_POINTS = 2000
 
 // 围栏相关状态
 const isDrawing = ref(false)
 const currentDrawType = ref(null) // 'polygon' | 'rectangle' | 'circle'
 const fences = ref([])
+const showControlPanel = ref(true) // 控制面板显示/隐藏
 
 // 无人机相关状态
 const wsConnected = ref(false)
@@ -174,7 +442,7 @@ const initMap = async () => {
     AMap = await AMapLoader.load({
       key: mapKey,
       version: '2.0',
-      plugins: ['AMap.MouseTool', 'AMap.Polygon', 'AMap.Rectangle', 'AMap.Circle', 'AMap.Marker', 'AMap.Icon', 'AMap.Text']
+      plugins: ['AMap.MouseTool', 'AMap.Polygon', 'AMap.Rectangle', 'AMap.Circle', 'AMap.Marker', 'AMap.Icon', 'AMap.Text', 'AMap.TileLayer', 'AMap.TileLayer.Satellite', 'AMap.Polyline']
     })
 
     // 创建地图实例
@@ -182,8 +450,19 @@ const initMap = async () => {
       viewMode: '3D',
       zoom: 13,
       // center: [116.397428, 39.90923], // 默认北京天安门
-      mapStyle: 'amap://styles/normal'
+      mapStyle: 'amap://styles/normal' // 默认普通地图
     })
+    
+    // 初始化卫星图层（默认显示，因为mapType默认是satellite）
+    const satelliteLayer = new AMap.TileLayer.Satellite()
+    map.add(satelliteLayer)
+    satelliteLayer.show() // 默认显示卫星图层
+    
+    // 保存图层引用以便切换
+    window.satelliteLayer = satelliteLayer
+
+    // 初始化无人机轨迹图层
+    initDroneTrack()
 
     AMap.plugin('AMap.Geolocation', function () {
       // 插件加载完成后才能使用
@@ -228,6 +507,50 @@ const initMap = async () => {
   }
 }
 
+// 切换地图类型
+const switchMapType = (type) => {
+  if (!map) return
+  
+  mapType.value = type
+  
+  if (type === 'satellite') {
+    // 切换到卫星地图
+    map.setMapStyle('amap://styles/normal')
+    // 显示卫星图层
+    if (window.satelliteLayer) {
+      window.satelliteLayer.show()
+    } else {
+      const satelliteLayer = new AMap.TileLayer.Satellite()
+      map.add(satelliteLayer)
+      window.satelliteLayer = satelliteLayer
+    }
+    ElMessage.success('已切换到卫星地图')
+  } else if (type === 'normal') {
+    // 切换到普通地图
+    map.setMapStyle('amap://styles/normal')
+    // 隐藏卫星图层
+    if (window.satelliteLayer) {
+      window.satelliteLayer.hide()
+    }
+    ElMessage.success('已切换到普通地图')
+  }
+}
+
+// 切换控制面板显示/隐藏
+const toggleControlPanel = () => {
+  showControlPanel.value = !showControlPanel.value
+}
+
+// 处理底部图标点击
+const handleFooterIconClick = (index) => {
+  if (index === 4) {
+    // 第4个图标：显示/隐藏控制面板
+    toggleControlPanel()
+  }
+  // 其他图标的功能可以在这里添加
+  console.log('点击了图标:', index)
+}
+
 // 性能优化：节流处理数据更新
 let lastUpdateTime = 0
 const UPDATE_INTERVAL = 1000 // 3秒更新一次，大幅降低更新频率
@@ -291,6 +614,7 @@ const toggleWebSocket = () => {
     }
     wsConnected.value = false
     isFlying.value = false // 断开连接时重置飞行状态
+    clearDroneTrack()
     ElMessage.info('已断开连接')
     conn.close();
   } else {
@@ -333,8 +657,8 @@ const updateDroneMarker = (lng, lat, heading = 0) => {
     // 创建无人机图标
     const icon = new AMap.Icon({
       image: droneImage,
-      size: new AMap.Size(40, 40),
-      imageSize: new AMap.Size(40, 40),
+      size: new AMap.Size(0, 100),
+      imageSize: new AMap.Size(100, 100),
       imageOffset: new AMap.Pixel(0, 0)
     })
 
@@ -360,10 +684,64 @@ const updateDroneMarker = (lng, lat, heading = 0) => {
     }
   }
 
+  // 更新飞行轨迹
+  updateDroneTrack(lng, lat)
+
   // 将地图中心移动到无人机位置（可选，可以注释掉）
   map.setCenter([lng, lat])
 }
 
+// 初始化无人机轨迹线
+const initDroneTrack = () => {
+  if (!map || !AMap) return
+
+  // 如果已有轨迹线，先移除
+  if (droneTrackLine) {
+    map.remove(droneTrackLine)
+  }
+
+  droneTrackLine = new AMap.Polyline({
+    map,
+    path: [],
+    showDir: true,
+    isOutline: true,
+    outlineColor: 'rgba(0,0,0,0.3)',
+    borderWeight: 2,
+    strokeColor: '#00e0ff',
+    strokeOpacity: 0.8,
+    strokeWeight: 4,
+    lineJoin: 'round',
+    lineCap: 'round',
+    zIndex: 90
+  })
+}
+
+// 更新无人机轨迹
+const updateDroneTrack = (lng, lat) => {
+  if (!map || !AMap) return
+
+  if (!droneTrackLine) {
+    initDroneTrack()
+  }
+
+  dronePath.value.push([lng, lat])
+  if (dronePath.value.length > MAX_TRACK_POINTS) {
+    dronePath.value.shift()
+  }
+
+  if (droneTrackLine) {
+    droneTrackLine.setPath(dronePath.value)
+  }
+}
+
+// 清空无人机轨迹
+const clearDroneTrack = () => {
+  dronePath.value = []
+  if (droneTrackLine) {
+    droneTrackLine.setPath([])
+  }
+}
+
 // 检测点是否在多边形内（射线法）
 const isPointInPolygon = (point, polygon) => {
   const [x, y] = point
@@ -1039,6 +1417,9 @@ const clearAllFences = async () => {
     // 清空围栏列表
     fences.value = []
     
+    // 清除无人机轨迹
+    clearDroneTrack()
+    
     console.log('所有围栏已清除，当前围栏数量:', fences.value.length)
     ElMessage.success('所有围栏已清除')
   } catch (error) {
@@ -1052,13 +1433,24 @@ const clearAllFences = async () => {
 
 // watch已移除：无人机位置实时更新时会自动检测围栏状态，不需要监听围栏变化
 
+// 日期时间更新定时器
+let dateTimeTimer = null
+
 // 组件挂载时初始化地图
 onMounted(() => {
   initMap()
+  updateDateTime()
+  // 每秒更新一次时间
+  dateTimeTimer = setInterval(updateDateTime, 1000)
 })
 
 // 组件卸载时清理
 onUnmounted(() => {
+  // 清除日期时间定时器
+  if (dateTimeTimer) {
+    clearInterval(dateTimeTimer)
+    dateTimeTimer = null
+  }
   // 停止WebSocket连接
   if (mockDataGenerator) {
     mockDataGenerator.stop()
@@ -1085,38 +1477,364 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.map-container {
+/* 全局容器 */
+.app-container {
   width: 100%;
   height: 100vh;
+  display: flex;
+  flex-direction: column;
+  /* background: #0a0e27; */
+  color: #ffffff;
+  overflow: hidden;
+}
+
+/* 顶部导航栏 */
+.top-header {
+  height: 60px;
+  background: #0a0e27;
+  backdrop-filter: blur(15px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 30px;
+  z-index: 1000;
+  position: relative;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.demo-tag {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.6);
+  padding: 4px 12px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+}
+
+.region-name {
+  font-size: 16px;
+  color: #ffffff;
+  font-weight: 500;
+}
+
+.header-center {
+  flex: 1;
+  text-align: center;
+}
+
+.app-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0;
+  text-shadow: 0 2px 10px rgba(0, 150, 255, 0.5);
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.datetime {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.8);
+  font-family: 'Courier New', monospace;
+}
+
+/* 主内容区域 */
+.main-content {
+  flex: 1;
   position: relative;
   overflow: hidden;
 }
 
+/* 地图容器 */
+.map-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+/* 左侧面板（覆盖层） */
+.left-panel {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 320px;
+  padding: 20px;
+  overflow-y: auto;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* 右侧面板（覆盖层） */
+.right-panel {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 320px;
+  padding: 20px;
+  overflow-y: auto;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* 信息面板 */
+.info-panel {
+ background: rgba(36, 39, 56, 0.7);
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.panel-title {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 500;
+}
+
+.panel-count {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* 视频网格 */
+.video-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.video-item {
+  aspect-ratio: 16/9;
+  position: relative;
+}
+
+.video-placeholder {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.video-placeholder::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(0, 150, 255, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
+}
+
+.video-label {
+  position: relative;
+  z-index: 1;
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* 状态列表 */
+.status-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.status-icon {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+.status-number {
+  font-size: 18px;
+  font-weight: bold;
+  color: #ffffff;
+  min-width: 30px;
+}
+
+.status-text {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.7);
+  flex: 1;
+}
+
+/* 区域预览 */
+.area-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.area-image {
+  max-width: 100%;
+  height: auto;
+  opacity: 0.8;
+}
+
+/* 设备图标 */
+.device-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: 2px solid;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.device-icon::before {
+  content: '✈';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+}
+
+.device-standby {
+  background: transparent;
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+.device-standby::before {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.device-duty {
+  background: rgba(255, 165, 0, 0.3);
+  border-color: #ffa500;
+}
+
+.device-duty::before {
+  color: #ffa500;
+}
+
+.device-charging {
+  background: rgba(0, 255, 0, 0.3);
+  border-color: #00ff00;
+}
+
+.device-charging::before {
+  color: #00ff00;
+}
+
+/* 任务进度 */
+.task-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.progress-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.progress-bar {
+  flex: 1;
+  height: 8px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.progress-completed {
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.progress-in-progress {
+  background: rgba(255, 165, 0, 0.8);
+}
+
+.progress-pending {
+  background: rgba(0, 255, 0, 0.8);
+}
+
+.progress-text {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+  min-width: 80px;
+  text-align: right;
+}
+
 #map-container {
   width: 100%;
   height: 100%;
 }
 
+/* 控制面板 */
 .control-panel {
   position: absolute;
-  top: 20px;
-  right: 20px;
-  background: rgba(255, 255, 255, 0.95);
+  top: 80px;
+  right: 340px;
+  background: rgba(36, 39, 56, 0.7);
   border-radius: 8px;
   padding: 16px;
   min-width: 280px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+  max-width: 320px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.15);
   z-index: 1000;
-  max-height: calc(100vh - 40px);
+  max-height: calc(100vh - 160px);
   overflow-y: auto;
+  color: #ffffff;
 }
 
-.panel-title {
+.control-panel .panel-title {
   font-size: 16px;
   font-weight: bold;
   margin-bottom: 12px;
-  color: #333;
-  border-bottom: 1px solid #eee;
+  color: rgba(255, 255, 255, 0.9);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   padding-bottom: 8px;
 }
 
@@ -1126,7 +1844,7 @@ onUnmounted(() => {
 
 .draw-type-title {
   font-size: 14px;
-  color: #666;
+  color: rgba(255, 255, 255, 0.7);
   margin-bottom: 8px;
   font-weight: 500;
 }
@@ -1152,7 +1870,7 @@ onUnmounted(() => {
 .list-title {
   font-size: 14px;
   font-weight: 600;
-  color: #666;
+  color: rgba(255, 255, 255, 0.7);
   margin-bottom: 8px;
 }
 
@@ -1162,13 +1880,14 @@ onUnmounted(() => {
   align-items: center;
   padding: 8px;
   margin-bottom: 8px;
-  background-color: #f5f5f5;
+  background-color: rgba(0, 0, 0, 0.2);
   border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .fence-info {
   font-size: 12px;
-  color: #666;
+  color: rgba(255, 255, 255, 0.7);
   flex: 1;
   display: flex;
   align-items: center;
@@ -1202,7 +1921,7 @@ onUnmounted(() => {
 
 .fence-name {
   font-size: 12px;
-  color: #333;
+  color: rgba(255, 255, 255, 0.9);
   font-weight: 500;
   margin-left: 4px;
 }
@@ -1210,20 +1929,20 @@ onUnmounted(() => {
 .drone-status-panel {
   margin-top: 16px;
   margin-bottom: 16px;
-  border-top: 1px solid #eee;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
   padding-top: 12px;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   padding-bottom: 12px;
 }
 
-.status-title {
+.drone-status-panel .status-title {
   font-size: 14px;
   font-weight: 600;
-  color: #666;
+  color: rgba(255, 255, 255, 0.7);
   margin-bottom: 12px;
 }
 
-.status-item {
+.drone-status-panel .status-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1231,33 +1950,157 @@ onUnmounted(() => {
   font-size: 12px;
 }
 
-.status-label {
-  color: #666;
+.drone-status-panel .status-label {
+  color: rgba(255, 255, 255, 0.7);
   font-weight: 500;
 }
 
-.status-value {
-  color: #333;
+.drone-status-panel .status-value {
+  color: rgba(255, 255, 255, 0.9);
   font-family: monospace;
 }
 
+/* 底部导航栏 */
+.bottom-footer {
+  height: 55px;
+  background:#0a0e27; 
+  backdrop-filter: blur(15px);
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 40px;
+  z-index: 1000;
+  position: relative;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.footer-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.storage-info {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.85);
+  font-family: 'Courier New', monospace;
+  font-weight: 500;
+  padding: 4px 12px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.footer-center {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+.resolution-info {
+  position: relative;
+}
+
+.resolution-text {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.7);
+  background: rgba(0, 0, 0, 0.25);
+  padding: 3px 10px;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
+  letter-spacing: 0.5px;
+}
+
+.footer-icons {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding: 4px 0;
+}
+
+.footer-icon {
+  font-size: 56px;
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  padding: 6px;
+  border-radius: 4px;
+}
+
+.footer-icon:hover {
+  color: rgba(0, 150, 255, 1);
+  background: rgba(0, 150, 255, 0.1);
+  transform: translateY(-2px);
+}
+
+.footer-icon-img {
+  width: 48px;
+  height: 48px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  padding: 4px;
+  border-radius: 4px;
+  object-fit: contain;
+  opacity: 0.8;
+}
+
+.footer-icon-img:hover {
+  opacity: 1;
+  background: rgba(0, 150, 255, 0.1);
+  transform: translateY(-2px);
+}
+
+.footer-icon-img.active {
+  opacity: 1;
+  background: rgba(0, 150, 255, 0.2);
+  border: 1px solid rgba(0, 150, 255, 0.5);
+}
+
+.footer-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.uptime-info {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.85);
+  font-family: 'Courier New', monospace;
+  font-weight: 500;
+  padding: 4px 12px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
 /* 滚动条样式 */
-.control-panel::-webkit-scrollbar {
+.control-panel::-webkit-scrollbar,
+.left-panel::-webkit-scrollbar,
+.right-panel::-webkit-scrollbar {
   width: 6px;
 }
 
-.control-panel::-webkit-scrollbar-track {
-  background: #f1f1f1;
+.control-panel::-webkit-scrollbar-track,
+.left-panel::-webkit-scrollbar-track,
+.right-panel::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.2);
   border-radius: 3px;
 }
 
-.control-panel::-webkit-scrollbar-thumb {
-  background: #888;
+.control-panel::-webkit-scrollbar-thumb,
+.left-panel::-webkit-scrollbar-thumb,
+.right-panel::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
   border-radius: 3px;
 }
 
-.control-panel::-webkit-scrollbar-thumb:hover {
-  background: #555;
+.control-panel::-webkit-scrollbar-thumb:hover,
+.left-panel::-webkit-scrollbar-thumb:hover,
+.right-panel::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
 }
 </style>
 
diff --git a/src/assets/image/1.png b/src/assets/image/1.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3bba0c04bd39f20a2906ed87e50c2601d4d6c9f
GIT binary patch
literal 441
zcmV;q0Y?6bP)<h;3K|Lk000e1NJLTq001Qb001Be1^@s6l~b{>00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZqV@X6oR9J=0m~C}~FcgO08wJb(bI>`!0doKjwmGPS
zNtgtRgE}Y<r~`2D_6K37%OJ4qLi(J;uW;Z=NbU!MKuBf)3IOTdbp_A^I0L9f<Q)3^
zzsi&(Tdt$E@|y~Mu9R{4BAIB*BqT3^LL(PdF*{QYDlMURC83e>zd{MgPFboYnfl&q
z7Q6}ox*K!|9o`eUB=xH6^G)F!l(_+WQo2o)2A)KupBnJ3l=f$HncY`DDeq=fV0O}z
zQucJbZK?$1tAi=YqjCuF(UCm*WD=6qjzafTldGnfN`l2)A?;KWN(lgBm#y6)1gzmI
zBF|={R1!)`vNTJ1C<3_waENW;a1fG=ZQ){U_wh*d#<oR|L~j5zu`L`<20$I#!l4!n
z5xw1^R9QnKA}?d<@)22P<fq5ZCCe1kB}_!I`I^d#WeP3&T3V97IwoH?lL5$Wo0TXf
j?cT=4#{McgP2F?@CZ$-aE7o$v00000NkvXXu0mjf$*Q*8

literal 0
HcmV?d00001

diff --git a/src/assets/image/2.png b/src/assets/image/2.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4a35e72e55adbb9cd27ff1065afc529604e7f8a
GIT binary patch
literal 496
zcmV<M0T2F(P)<h;3K|Lk000e1NJLTq000{R000{Z1^@s6jnwp200001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZqnn^@KR7i=Xmf>-OFbqbYvp^YvZomj^5Jq5wrW?=+
znhnwwGC{IIvH@&BI>FaJrgdBy6Y}o3+y&uJl4V(r43Y|<2DU&MJOgk8uD}^MI_GY=
z^-?0Gq)#npl+=0WOk6@}2fX<RCI%nH0DJ>4z!Y_8cLUy?b6-m$>LQO1lIjIn=zMe&
z-6KN1q&Dl_{r82WOIA=)8wr)BVLGzf|CUjNZERdb2D4(`zVZ$pGKF)$ma$Kg)Fgy*
zi(7Q5s3zVFp?ZbTM6vOuYn_eC_;0o<Gt?X387x|#@38d8C&ac+(j^f^%m>f|`NL{+
zc9Qz21I%$tq<jg3lcbd&6ExxhXtIv@eObdUS|?YjJ(5mqloF2b630lAE*qbMHR=0@
zb8Zj30(;~26-mvS$Z}oXuy3XgvX<nn5T$ecy;KvuaS3CpVMlgd_@aEGDtkkyGNTF%
z*6y9cbQ+G^seU4z2mUVLQ0Sr2U@0f#yv_>+g6+)V%+aSV-Z{a-n3!^ObK`_LH^!pD
mL|pl1J59vXa|F)0iTDTg>pPDl*rNCV0000<MNUMnLSTYgj@a-3

literal 0
HcmV?d00001

diff --git a/src/assets/image/3.png b/src/assets/image/3.png
new file mode 100644
index 0000000000000000000000000000000000000000..72df3cc5a6d6bb19162542ac463047c9037fe7db
GIT binary patch
literal 169
zcmeAS@N?(olHy`uVBq!ia0vp^(m*W1!3HF`9ol{aDaPU;cPEB*=VV?2IV{Cao*^7S
zP{WbZ0ptgJx;Tb-biO_7DB55kz<jZRNkw7n)E1!v2EGFauP~iW^q={AkN$#>`-N{j
zVcR1tae((t-&O{R`^qbQ?b^F7W2erzrlk?FA>m*XD|cE_?4|I8uZ(kwD{qAA^M(VB
OXYh3Ob6Mw<&;$Splr`=E

literal 0
HcmV?d00001

diff --git a/src/assets/image/4.png b/src/assets/image/4.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb979fcc1c77dfe2c4a63b265ab83ebf0e060dce
GIT binary patch
literal 309
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU1|)m_?Z^dEjKx9jP7LeL$-D$|Sc;uILpXq-
zh9ji|$iMID;usRq`u65op=JdhmIoKa^=m(UQ8K>zNu1-f+>OcXN6#1fm~>gVg)Uy@
zcHZ=E(Ziq}6ZmDsH#IzVFe|8@ICqDwhcaKc%n@GYX62ZC?)C?pzMW2<IMwpN&5*_p
z_52?)FEdTw)OUZhkp8rNN<+in6X|oAnQotm5oBXNeIls+2E!kBzisP7JC&3k-m3T>
zXJ{e+%SqR%u6wq}Vb@(U(~n-AAl<Mnii7ReZcYJ<YyFM~KAKB0Y^dt{>}xcec}}n7
zjoXDqzc=`cuXt{JMOg2Zq~g~pQ<<kb*}C{gew2R1E&k7Q7lWD72B23NJYD@<);T3K
F0RSjQdsqMf

literal 0
HcmV?d00001

diff --git a/src/assets/image/5.png b/src/assets/image/5.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a8cd7a3b39e23e9f94c21be882a2bc99a334933
GIT binary patch
literal 441
zcmV;q0Y?6bP)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZqV@X6oR5*>bmCbS6Fc5{mx5J^XDuJ#bF2Sxq_EFMk
zGVH)5s06zLP7V~0mMXAHkSj1t;8i$aeK6@s6l&r`$h+b11F(yI5NFghO%Y?fku(De
zcP{`Wb-)4G9*@UeS(e?{dX06~b-kAK9VpIi4B+k^@DxILJl)_IaMLt}yTAMiIHH53
z`}us{{sz7PI;fR&JHQQ~s;a5GKVJZ)&%?{mFn~PIAAsu%pr7!%uGavns%o0&`J1F^
z0x&~JvdLsJ15!Z&iWuXK0e1<Z@bT7XmMFHTD$Lzeh5<ebr?Aw}K_;pF!o0tdq|Sik
zVBlcxzWWd0tpGNg&D(|L{3&<uLI_tw@<u)NAN5q0WoNwsB{?l{2q8QISe9kiiF~4!
zbUzrrnc25Q(A%GlK08y=dw2iJO<H&Vv0N_KrvsU!0@%9yKF0XETCMi<=HENt-N|R#
j_Q0K)?H7y1XdS!*yL^-lren?K00000NkvXXu0mjfWy{EL

literal 0
HcmV?d00001

diff --git a/src/assets/image/6.png b/src/assets/image/6.png
new file mode 100644
index 0000000000000000000000000000000000000000..ad9402203c27843dbe2b786c488e0063fb850da6
GIT binary patch
literal 390
zcmV;10eSw3P)<h;3K|Lk000e1NJLTq000>P000;W1^@s654Bdt00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZqFiAu~R7i=nmf=-|Fc5?%J`11(?0^#JKsq?B;4Fa-
zDB-RH?EtOdt^@4g?BMf<$ukCsNsgO8Jo4C?VRy5M(G399l3GbSN!6yrz!Na?7vuc~
zjvpm;*7*`XN*(Wk6KPlzpAk2}kU)G1-z8}^T|i?C*GZ}qyqxW`@z&m!h+E(QOo^#*
zIIhI(t|i9Cw2|1#i5v>Z0eV}jHGwfq(~v<vd3z!(w2%E#J^B>)8Q(TD5gYsxbDtq_
ziT2?_8v25?4p9;PZoZS}zRK9)0NuYLfnZ(G-g%R^Kwu0x?y?lqFdHSe5Sfkk6p_yi
zfiGjsIb6*BlXpoE-oy=Y%;ft4@M;S>xvq({bYAOvBAq?A>tMZFIM27cGz4O9iqBft
k;i`*-BpG9#0mUv1-)u?5&$)oy`v3p{07*qoM6N<$f`tvIQUCw|

literal 0
HcmV?d00001

diff --git a/src/assets/image/7.png b/src/assets/image/7.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d9fe051e287b15f0e1c85aab1c055bcc5d6ee20
GIT binary patch
literal 292
zcmeAS@N?(olHy`uVBq!ia0vp^B0wy_!3HG7B;uuk6k~CayA#8@b22Z19F}4y&kznE
zsNqQI0P@dyx;Tbd^sb$9JCMmyz|}wapErkeQ_2Q61vdso4;BZuv<-?GYywS^8EiRh
z$LCMI6_p<Gt+0OCs^zc0d`Xu2`lKNCiYcdVgHh?l#i}2!n68@LF1VpSi2DJHNVjCd
zZF>oa6@4kPvy1QdPPpW#d-eUoyQh}P2&N~n?%}Wec2>&GMOM)IL8(}RxA%g1JR#g$
znO3pgTKz_5RVuTVkzT2mM_$gPbF#9H?hn@Ho>^KGUbVI@_O<oT<t|6kjpO3)ta|A1
nqW>4qo&|M15%JHiUDtoz^LfG*z5->S&lo&i{an^LB{Ts5aI<bX

literal 0
HcmV?d00001

diff --git a/src/assets/image/Completed.png b/src/assets/image/Completed.png
new file mode 100644
index 0000000000000000000000000000000000000000..a7b3a1ad4d6aec996801cdf6e23f3c25f8d2990d
GIT binary patch
literal 524
zcmV+n0`vWeP)<h;3K|Lk000e1NJLTq001HY001Ni1^@s6>>lXf00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZqwn;=mR9J=0mtAqfKoo_)%kYW-5C8(`I|!fxS^*%S
z6@Y+N02n|36+i_<01*HJBH;F+7rMRqfo76T&kQp#yJWw)yL--!P$5;F19M;u41qz_
z{4$Bi!>u{}5`ZDF2BviuuA>}?s*Zs-U=#}?2V#}j)ZK!{K=|Gc50L;n;3y*J)<INt
zT5u+|BC>63@ld_s``nEsu^>Fi%#H10L3j{<HjZ6^bgB@<--t<9AgLRB>I&rG#-^&e
zj0Ga$4^`b1cu5pP^B@<CZ#ri(`+Nci5lJdR_zAtX^Ckh-VTE%b#A^dGU?n1HDM$b`
zHS3>Qg_^F?$zaZvAWg|CJTXhiT?P?ZMFDY8OTgR0YjlgZMEAF5-c{E4WFL10;*)*&
zZ_?K{&kNwu-ea&J+>6LZ!|VEF&xHG|Jq2Ex%9?^q+x1j+0KDJGmy7K;0kJIbl0)B2
zW?b^WP$N}c)Y+yx3@wq8=#Qlgcova!@6Kwpp=-|2Ve_1X$%|dzG{V+o)|{u-82Pr8
zKCu4-$hrkj0ib6OKHV|*)D{H68Cey)PW*zfIj!m1kC?Gt?s?l5pVJqSQjwKKN46#a
O0000<MNUMnLSTYc3*zkn

literal 0
HcmV?d00001

diff --git a/src/assets/image/fire.png b/src/assets/image/fire.png
new file mode 100644
index 0000000000000000000000000000000000000000..5a1c07a888b14f192d5a1c80e5246b164fc4b4b7
GIT binary patch
literal 809
zcmV+^1J?YBP)<h;3K|Lk000e1NJLTq001EX001ut1^@s6ZSJEV00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZr(@8`@R9J<@m_bt8FcgOWr+8?0^%24enl9RCI<dz+
z0eEr%-~^#308S7%0qkk2a01eV>6qz)^aS__S<)HM>%ws`K{mEyC;##(vcCL!eorz`
zQa|1Hsq$pA?EIue*@?vT0h;dyPWy0U5OWk;5cQQKuUBzpMTnRM9yH&nub*4%g&<y9
zkZf4uS~+rmeGq`bezHM0AGq?kb_gY96CgX|p+`kP$~m#cJ2@Vl8>Acr({9d(=K`Uk
z>nkan*us6GNsmvT{NI13X~V^x*y3K{IaWhu4Htq?9q9p7rb0HewxyU8g8L-^<_mEz
zt*YjRP;R>qP^pR-iERA@uQWttWvOjgUTm)v#K37E3gBo}0Kio0b3hDSc`S%Z=YfI3
zSY=Zo2Ch7=%z=cWlD~vz{9%-YE9Zbo{y2EGrnMZHzt6P*00>RN7u!*35*o!rQ*_~k
z>PQcS3X{+vO;?!^pgJ7@0G|3cw<FVtz_Sa+YF3pr(^=YBloNHkz!-HW!9^;B@>+J?
zE`V`j3deUA3;Lb0o>wK!{Jm?)g}4}AcI4CoQ>*y-DyNu--O24~GNing4SwGTV;=x4
z!8=yeRO+DMDH{I{l93<ImtAPle{o%4YFSxF_Z1XEknfMCGXS{kNY83uFaGy0L}-$7
zC09+L5hbEv{s^L$`J(hJ3*cGRZY)Ya<=W;@q&1cGiDv>#v&}Lf6d-eFTbDG^Ux7#c
zYm*S-@o7i^pj>(XRtDFk&>sie0swSMZLeFJ`3%W3<_6pd{c*63<neCpZfGn@`U0Xm
z2`=JFSHJkwzX=wd^;Jnzj=Zk*e8Cv`li*u2^!oDCc<{k6o&~D_K;yw*4yP9PsxLqq
zIO&c9<2Q=T4x>8KgTVQUZ%wEfCs}9ATy1XPv=0SQuOQ5uix+~36@4`09WXo);%}Kv
n03mqZjfsa4bmfnN+}-&<1;p(lUPtFS00000NkvXXu0mjf+2(BA

literal 0
HcmV?d00001

diff --git a/src/assets/image/in_progress.png b/src/assets/image/in_progress.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e9335e4f34602e0e01aa642ed8372483647344d
GIT binary patch
literal 705
zcmV;y0zUnTP)<h;3K|Lk000e1NJLTq001HY001Ni1^@s6>>lXf00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZrYe_^wR9J=0moakMKoo}mhc@<%EB7{;Wl(zEAaDZX
z6U07&DTSIi4W^7wfPDg+6QCog4~#Scr=~T7^rrwENnjvENck(x?#}EtZ{K_WlVF2>
zwyF(7Z~=$~Km$14bpAb^wFk28j9Rzo+gg7R)fGW)pNsd=3dq>`WC^0DMFetF0>rnq
z7O)S<UQdu2$g!v{Q+XhSI|J`ShF+x;1P2Eh*=CKYoQQyL<-5V{p)QZBwEUP?#~%sd
zmfQJ2BtQr@;u|yYJ}-y_2qc-HAw#bikb)HlNmPU(hE)&<6HlQaH-&(NL@&NUL2cxi
zxm8WVjK(dqpZ1r$8d?Ixx3xYh8GS&q_L&LDi9nu1qF3$=+>Ic3Gd=eAwftQqg!{_b
zbv(jr=LFx@`dCyq-SRWmgpm4q`-k@~$WkNQtQmp}f{jJP%Q#95rcqe0bb?^(<dlVc
zTWdoMOF?eZQ6}M@-wo=yfW$R&%-a(1HNF;-m$`!gz^|6sPez6hg?P=Xvx`*-$QozY
z|Bd@5X4bJ&y#nQn2rSGSj~59a&)dU?EH7Pgc5))vt+jj8Xm**E*QAqGi0>u8sZWne
z>S>F=SaZ;S*T^w%)4e1ldP<$BCV(A=Akkx|dbQ6pB^nx5-M!oyxXK_tbH{EXknW3P
zcK;S+DXuO}UOBr4fD&bwXdFTe2&pggu8{I2;ZCFQ&3OSpk??Z(>z~Yrb9y1s`*=5e
zP9IPZJ_5262*K;Dd&*J*0549}-##8PIBO3phk(E`N2XC&2e9GKZa%;q3Ig#7&2Q>c
nb)uS!a<(u}Dh~%}@$2*(nUwx7d8hG500000NkvXXu0mjf15!Al

literal 0
HcmV?d00001

diff --git a/src/assets/image/personnel.png b/src/assets/image/personnel.png
new file mode 100644
index 0000000000000000000000000000000000000000..8926fcb4aedc476e2250ec2ee62688e5236986f6
GIT binary patch
literal 986
zcmV<0110>4P)<h;3K|Lk000e1NJLTq001-q001-y1^@s6#dsU*00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZsgh@m}RA_<ina^$;RTRd5=Q^$H1PLR7s6-v65_|jt
zQ0EO?39*gy1P+1)h(%-xAtaD+o&a}S7Nk#LR~2h!%?2k92+AU}piG?9_ptD|G5Irp
z+&ir+&A0Q+x#zpz9N%-!oPh!b3Oo-aFUNXX`w&YT<pV_CM0t$x2t!w{9sHaZZ!Us#
zT>BQ}vlx?aq<rv29^A&YLmjVo62t&}uH)L5uDNj?Aq_nbV}Av%rC<&@)%Rp=^oPqm
zxQ&qLN2$aBC>2Wbu~YsW1ih8bp0}Oy=W&K!HrxtQ`8%6Ee>vrMFUb4|`ZT5WF%!M-
zl;5==sr<GN@^w0E{mONQBe%kOQu_{-Ph(7SE37ZB^${MUJYqsuR$r0UN5fhRBW<9b
z!rTY#NO`p9au3b~X?UxFG5yR7t+_3g;n3AS+$9Agn+vTg*|xJiI2ELLi>=eDvpp1@
z!YhD6(6XZtwCpGZEjtQ9%Z@_OvZD}m88q}3>$Cxox}L0WYIyTGe9U=UbfJ!GO<)tG
z4hz0IT*MG`fYo~(ulVxDFv#j4lb~pJy#q9X`S+LrRUachN;9QEAIk$uybfANrGCMu
z&|_kDv%Jx!5~N37l~wya&^o)Q1B~o(GI=Pk{qFzIeq8$jq;;9E$f76Z(bk2l|GZP@
zdg%^m6P3o?F1tK2oiq_!Nfa}UN`LOD_pqkpat<&<^k95oH=0pw0xgtnR&7&5ZzG8}
zHYw<lSDh0RVC{yK54Q3Ua~@JT97y?K3u`xk0PrxjpOk>&v)r29c@`OK?@Hxx;C9=|
zkjmizYwt!sXJ`0I#0#1paDd=th?ybco}HgYoNd}VRLxXtMB)!`(*1LYxKmAsk_4Sa
z#n`?cdFe(@st;rDPwazKe$JB8PtPt0v6I$#LDqDp#SQ?ERr`yEw_-yMAmz~>Lih5U
zbkqKQr=w-tpBpU?d15-T+{sQaq-~}dk6k$FN#)NgGoBu=ZzHs$wLVsNr84Tp^37_I
zvVD$oh&736JAGkYvpW&Vc}&|C5g*lk?5WT3jUY`Coc3=k9wqZWs*RX7s>i?PlQcfF
zw>~A?Mroxuq`_Qf3Q!FYnQgY3a{XS`BEC>_sz+Xx8&B)g0lhRFH>W;uZ_&>zPCln-
zc+;bF{SFguWAt4V?}})gMNM^xFvQ9}Mty9_e-Rx>fdY>4A5c?Uqm~92_W%F@07*qo
IM6N<$f{UNTK>z>%

literal 0
HcmV?d00001

diff --git a/src/assets/image/regional_management.png b/src/assets/image/regional_management.png
new file mode 100644
index 0000000000000000000000000000000000000000..a77d79d066f3b962577506ad5299d348f893f91d
GIT binary patch
literal 5772
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

literal 0
HcmV?d00001

diff --git a/src/assets/image/smoke.png b/src/assets/image/smoke.png
new file mode 100644
index 0000000000000000000000000000000000000000..b796ffaa14620ec566a861c0ca7ebe53eb4955e5
GIT binary patch
literal 305
zcmeAS@N?(olHy`uVBq!ia0vp^IzX(-!3HEPySYySDaPU;cPEB*=VV?2IV{Cao*^7S
zP{WbZ0p#EIba4!cXni~VBJUvs9+z653%m&|W(%YZoZMgY<S+o~n+no1<}0|W1x?n{
zbJ_KMy4UkN?r)1-cve}xwpx7Ahjo^k%$kSw?QMG-{|fv+|G4WNn}W)$$sI8<GD1#u
z+)3@*^?7t&MuxHrN@|^MDUqt>+L@5A*Hd#k=XHs=jL93`H>+-}F(~jqzj0@_v<*YW
zwo*5al}g(W%r|#=F{v|Y`peI*t2yolEbe&M)ZDiBq-pHry;rl(tF^r02`Rnxa-F->
z{X(hOa1;IC0tMX{cqZ>G*SYZF>K^O6l6A~wyGqxV@I5~W^d^I+tDnm{r-UW|H)D3O

literal 0
HcmV?d00001

diff --git a/src/assets/image/to_be_started.png b/src/assets/image/to_be_started.png
new file mode 100644
index 0000000000000000000000000000000000000000..6892c743e87fd0da5822ef4ff67f7fbc2d509e45
GIT binary patch
literal 684
zcmV;d0#p5oP)<h;3K|Lk000e1NJLTq001HY001Ni1^@s6>>lXf00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZrR!KxbR9J=0mrYXJKoEsr%M#i82+9qV6T~V5Rje>4
z$asw%-~@3_;DF59!wG^{uEIFd4Wb)FNAMQQsI##AGm;Sw=qImARjQgP%~w6${aS<!
ziASdeqEj#|5KI8|to<)ZHaqm%9(^akxNpKRh9EQm0Iz=L{Yrs|hg%CZ{t3V={`eO_
z#JF#w#_n6MAU6<vFoxg+1i?eZ*9aHBJh=)A2N4se0giKGrHH@Fqi(OL!?&ev-sn_W
zA$Vm$s31T~S&8_%EQlnCnj7K5uL`76Z9o`mMHsqO4G2NK3XLwR0bw2~D~yJiIHgsM
z;v(X4;I92;v!j%Trh<(7CJqd@0H2w~&pjd@$)m2934)F373((y4^LrxJHn~*mB;5k
z=HVw0Qq;ML(ZGT6TRhyZD>HM_5EG{nxBgZfp}eCMU>@4?<SHm(<XH_`x&@6cQpU>g
z<YC7y1w?_GI6Y|eO@-mJ(m?<~{2I84$jEBECh6=9s~V7`vlGn!#(mY{d3qzj+7}R(
z^-b`>(Vc95mARgpcJ>)zpVrRs5r$`ZdCiVw{h<lBUx#62|Hlxl81(%R6Q{RhNFV7~
z=$Fv2&k$sa>5X{HHDxxm<&f^_sL^NezMs^FVmcW9E67^ub7pu7+W??}_lial3h+$!
zD(|W(UxtTyXv^dCbwAO;@KaM+{+fXiEZYH(<YD(dxj_d-cYwAhNYu`~r^H(Jk?G*i
z9^+vko1KqEKwzCC^Uww(>(4I0JhY2~!1jbD+<qMk{W31+WhF6uPysD|hyDU&QQz~2
S*O8q70000<MNUMnLSTXekUIwe

literal 0
HcmV?d00001

diff --git a/src/assets/image/wrj.png b/src/assets/image/wrj.png
new file mode 100644
index 0000000000000000000000000000000000000000..a8ac2023379374b0fc05c336e72592d7ef820156
GIT binary patch
literal 9906
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

literal 0
HcmV?d00001

diff --git a/src/main.js b/src/main.js
index 368d823..dab6993 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,13 @@
 import { createApp } from 'vue'
 import './style.css'
 import ElementPlus from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
 import 'element-plus/dist/index.css'
 import App from './App.vue'
 const app = createApp(App)
 app.use(ElementPlus)
 app.mount('#app')
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
\ No newline at end of file