From 86c2d61ba9d33f1886cfc904dcaf17f033e4c80a Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 17 Jan 2026 13:52:53 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/jagzwxm/ja_web

---
 applications/drone-command/src/views/dataCockpit/index.vue |   67 ++++++++++++++++++++++++++++++---
 1 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/applications/drone-command/src/views/dataCockpit/index.vue b/applications/drone-command/src/views/dataCockpit/index.vue
index 2d1cf1d..0568cef 100644
--- a/applications/drone-command/src/views/dataCockpit/index.vue
+++ b/applications/drone-command/src/views/dataCockpit/index.vue
@@ -2,7 +2,7 @@
  * @Author       : yuan
  * @Date         : 2026-01-06 16:35:50
  * @LastEditors  : yuan
- * @LastEditTime : 2026-01-07 15:20:14
+ * @LastEditTime : 2026-01-16 17:17:24
  * @FilePath     : \applications\drone-command\src\views\dataCockpit\index.vue
  * @Description  : 
  * Copyright 2026 OBKoro1, All Rights Reserved. 
@@ -10,18 +10,37 @@
 -->
 <template>
   <div class="page-container">
-    <MapContainer />  
-    <LeftContainer />  
-    <RightContainer />  
-    <CenterContainer />  
+    <DeviceMapContainer
+      :online-devices="onlineDevices"
+      :left-collapsed="leftCollapsed"
+      container-id="data-cockpit-map"
+    />  
+    <LeftContainer class="left-container" v-model:activeId="leftActiveId" v-model:collapsed="leftCollapsed" />  
+    <RightContainer class="right-container" v-model:collapsed="rightCollapsed" v-model:onlineDevices="onlineDevices" />  
+    <CenterContainer @select-warning="onSelectWarning" @select-equipment="onSelectEquipment" />  
   </div>
 </template>
 
 <script setup>
-  import MapContainer from './components/MapContainer.vue';
+  import DeviceMapContainer from '@/components/map-container/device-map-container.vue';
   import LeftContainer from './components/LeftContainer.vue';
   import RightContainer from './components/RightContainer.vue';
   import CenterContainer from './components/CenterContainer.vue';
+
+  const leftActiveId = ref(1);
+  const leftCollapsed = ref(false);
+
+  const rightCollapsed = ref(false);
+  const onlineDevices = ref([]);
+
+  const onSelectWarning = (type) => {
+    leftActiveId.value = type;
+    leftCollapsed.value = false;
+  };
+
+  const onSelectEquipment = () => {
+    rightCollapsed.value = false;
+  };
 </script>
 
 <style scoped lang="scss">
@@ -30,4 +49,40 @@
     width: 100%;
     height: 100%;
   }
+
+  .left-container,
+  .right-container {
+    position: absolute;
+    bottom: 20px;
+    width: 300px;
+    z-index: 9;
+    backdrop-filter: blur(2px);
+    border-radius: 10px 10px 10px 10px;
+
+    ::v-deep(.wrapper) {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      padding: 20px;
+      width: 300px;
+      background: rgba(0,0,0,0.3);
+      backdrop-filter: blur(16px);
+      border-radius: 10px 10px 10px 10px;
+      box-sizing: border-box;
+    }
+  }
+
+  .left-container {
+    top: 113px;
+    left: 17px;
+    background: linear-gradient( 270deg, rgba(17,23,34,0) 0%, rgba(17,23,34,0.56) 50%, rgba(17,23,34,0.96) 100%);
+  }
+
+  .right-container {
+    top: 75px;
+    right: 17px;
+    background: linear-gradient( 270deg, rgba(17,23,34,0.96) 0.16%, rgba(17,23,34,0.56) 57.57%, rgba(4,30,37,0) 100%);
+  }
 </style>

--
Gitblit v1.9.3