From ffbf92930f5fdb896322371b29ebe1232f49daa8 Mon Sep 17 00:00:00 2001
From: sd <1504629600@qq.com>
Date: Tue, 20 Jan 2026 15:03:55 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E8=8A=B1=E6=8E=A5=E6=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/package.json                             |   1 +
 ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue   | 128 ++++
 ruoyi-ui/src/views/cesiumMap/MeasurementPanel.vue | 104 +++
 ruoyi-ui/src/views/cesiumMap/index.vue            | 863 ++++++++--------------
 ruoyi-ui/src/views/childRoom/BottomLeftPanel.vue  | 391 ++++++++++
 ruoyi-ui/src/views/childRoom/index.vue            | 167 ++++-
 6 files changed, 1072 insertions(+), 582 deletions(-)
 create mode 100644 ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue
 create mode 100644 ruoyi-ui/src/views/cesiumMap/MeasurementPanel.vue
 create mode 100644 ruoyi-ui/src/views/childRoom/BottomLeftPanel.vue

diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index 92bbe25..915ace5 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -52,6 +52,7 @@
   "devDependencies": {
     "@babel/plugin-transform-nullish-coalescing-operator": "^7.28.6",
     "@babel/plugin-transform-optional-chaining": "^7.28.6",
+    "@open-wc/webpack-import-meta-loader": "^0.4.7",
     "@vue/cli-plugin-babel": "4.4.6",
     "@vue/cli-service": "4.4.6",
     "babel-plugin-dynamic-import-node": "2.3.3",
diff --git a/ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue b/ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue
new file mode 100644
index 0000000..f53a9c0
--- /dev/null
+++ b/ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="drawing-toolbar" v-if="drawDomClick">
+    <div class="toolbar-icons">
+      <div
+        v-for="item in toolbarItems"
+        :key="item.id"
+        class="toolbar-item"
+        :class="{ active: drawingMode === item.id }"
+        @click="handleItemClick(item)"
+        :title="item.name"
+      >
+        <i :class="item.icon"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DrawingToolbar',
+  props: {
+    drawDomClick: {
+      type: Boolean,
+      default: false
+    },
+    drawingMode: {
+      type: String,
+      default: null
+    },
+    hasEntities: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      toolbarItems: [
+        { id: 'point', name: '点', icon: 'el-icon-location' },
+        { id: 'line', name: '线', icon: 'el-icon-edit-outline' },
+        { id: 'polygon', name: '面', icon: 'el-icon-s-grid' },
+        { id: 'rectangle', name: '矩形', icon: 'el-icon-s-data' },
+        { id: 'circle', name: '圆形', icon: 'el-icon-circle-plus-outline' },
+        { id: 'locate', name: '定位', icon: 'el-icon-aim' },
+        { id: 'clear', name: '清除', icon: 'el-icon-delete' },
+        { id: 'import', name: '导入', icon: 'el-icon-upload' },
+        { id: 'export', name: '导出', icon: 'el-icon-download' }
+      ]
+    }
+  },
+  methods: {
+    handleItemClick(item) {
+      if (item.id === 'clear') {
+        this.$emit('clear-all')
+      } else if (item.id === 'export') {
+        this.$emit('export-data')
+      } else if (item.id === 'import') {
+        this.$emit('import-data')
+      } else if (item.id === 'locate') {
+        this.$emit('locate')
+      } else {
+        this.$emit('toggle-drawing', item.id)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawing-toolbar {
+  position: absolute;
+  top: 70px;
+  right: 20px;
+  width: 40px;
+  background: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(0, 138, 255, 0.1);
+  border-radius: 8px;
+  z-index: 90;
+  box-shadow: 0 4px 12px rgba(0, 138, 255, 0.2);
+  padding: 15px 5px;
+  transition: all 0.3s ease;
+  overflow: hidden;
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.toolbar-icons {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 30px;
+}
+
+.toolbar-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  cursor: pointer;
+  color: #555;
+  font-size: 20px;
+  position: relative;
+  transition: all 0.3s;
+  border-radius: 4px;
+  padding: 0 5px;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(5px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.toolbar-item:hover {
+  background: rgba(0, 138, 255, 0.1);
+  color: #008aff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(0, 138, 255, 0.2);
+}
+
+.toolbar-item.active {
+  background: rgba(0, 138, 255, 0.15);
+  color: #008aff;
+  box-shadow: 0 2px 8px rgba(0, 138, 255, 0.3);
+}
+
+.toolbar-item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>
diff --git a/ruoyi-ui/src/views/cesiumMap/MeasurementPanel.vue b/ruoyi-ui/src/views/cesiumMap/MeasurementPanel.vue
new file mode 100644
index 0000000..d09f8d4
--- /dev/null
+++ b/ruoyi-ui/src/views/cesiumMap/MeasurementPanel.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="measurement-panel">
+    <div class="measurement-content">
+      <h5>测量结果</h5>
+      <div class="measurement-item" v-if="result.distance">
+        <span>长度：</span>
+        <strong>{{ result.distance.toFixed(2) }} 米</strong>
+      </div>
+      <div class="measurement-item" v-if="result.area">
+        <span>面积：</span>
+        <strong>{{ result.area.toFixed(2) }} 平方米</strong>
+      </div>
+      <div class="measurement-item" v-if="result.radius">
+        <span>半径：</span>
+        <strong>{{ result.radius.toFixed(2) }} 米</strong>
+      </div>
+      <button @click="handleClose" class="close-btn">关闭</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MeasurementPanel',
+  props: {
+    result: {
+      type: Object,
+      default: null
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.measurement-panel {
+  position: absolute;
+  bottom: 20px;
+  right: 80px;
+  z-index: 85;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  padding: 20px;
+  min-width: 250px;
+}
+
+.measurement-content h5 {
+  margin: 0 0 15px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  border-bottom: 2px solid #409EFF;
+  padding-bottom: 8px;
+}
+
+.measurement-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: #666;
+}
+
+.measurement-item strong {
+  color: #409EFF;
+  font-weight: 600;
+}
+
+.close-btn {
+  width: 100%;
+  padding: 10px;
+  background: #409EFF;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.3s;
+  margin-top: 15px;
+}
+
+.close-btn:hover {
+  background: #66b1ff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+}
+
+@media (max-width: 768px) {
+  .measurement-panel {
+    bottom: 10px;
+    right: 10px;
+    left: 10px;
+    min-width: auto;
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue
index 309ef03..a72c2b2 100644
--- a/ruoyi-ui/src/views/cesiumMap/index.vue
+++ b/ruoyi-ui/src/views/cesiumMap/index.vue
@@ -2,200 +2,30 @@
   <div class="cesium-container">
     <div id="cesiumViewer" ref="cesiumViewer"></div>
 
-    <!-- 主工具栏 -->
-    <div class="main-toolbar" v-if="drawDomClick" :class="{ collapsed: isToolbarCollapsed }">
-      <!-- 展开/收起按钮 -->
-      <!-- <div class="collapse-btn" @click="toggleToolbar">
-        <span class="collapse-icon">{{ isToolbarCollapsed ? '▶' : '◀' }}</span>
-        <span class="collapse-text" v-if="!isToolbarCollapsed">收起</span>
-      </div> -->
-
-      <!-- 工具栏内容 -->
-       <div class="location-panel">
-      <div class="input-group">
-        <input 
-          type="number" 
-          v-model.number="targetLng" 
-          placeholder="经度 (例如 116.40)" 
-          step="0.000001"
-        >
-        <input 
-          type="number" 
-          v-model.number="targetLat" 
-          placeholder="纬度 (例如 39.90)" 
-          step="0.000001"
-        >
-        <button @click="flyToLocation" class="tool-btn location-btn">
-          <span class="icon">🚀</span>
-          定位
-        </button>
-      </div>
-    </div>
-      <div class="toolbar-content"  v-show="!isToolbarCollapsed">
-        <div class="toolbar-group">
-          <button
-            @click="toggleDrawing('point')"
-            :class="{ active: drawingMode === 'point' }"
-            title="点"
-            class="tool-btn"
-          >
-            <span class="icon">📍</span>
-            <span class="text">{{ drawingMode === 'point' ? '停止' : '点' }}</span>
-          </button>
-
-          <button
-            @click="toggleDrawing('line')"
-            :class="{ active: drawingMode === 'line' }"
-            title="线"
-            class="tool-btn"
-          >
-            <span class="icon">📏</span>
-            <span class="text">{{ drawingMode === 'line' ? '停止' : '线' }}</span>
-          </button>
-
-          <button
-            @click="toggleDrawing('polygon')"
-            :class="{ active: drawingMode === 'polygon' }"
-            title="面"
-            class="tool-btn"
-          >
-            <span class="icon">🔶</span>
-            <span class="text">{{ drawingMode === 'polygon' ? '停止' : '面' }}</span>
-          </button>
-        </div>
-
-        <div class="toolbar-group">
-          <button
-            @click="toggleDrawing('rectangle')"
-            :class="{ active: drawingMode === 'rectangle' }"
-            title="矩形"
-            class="tool-btn"
-          >
-            <span class="icon">⬜</span>
-            <span class="text">{{ drawingMode === 'rectangle' ? '停止' : '矩形' }}</span>
-          </button>
-
-          <button
-            @click="toggleDrawing('circle')"
-            :class="{ active: drawingMode === 'circle' }"
-            title="圆形"
-            class="tool-btn"
-          >
-            <span class="icon">⭕</span>
-            <span class="text">{{ drawingMode === 'circle' ? '停止' : '圆形' }}</span>
-          </button>
-        </div>
-
-        <div class="toolbar-group">
-          <button
-            @click="clearAll"
-            :disabled="!allEntities.length"
-            title="清除所有"
-            class="tool-btn danger"
-          >
-            <span class="icon">🗑️</span>
-            <span class="text">清除</span>
-          </button>
-
-          <button
-            @click="exportData"
-            :disabled="!allEntities.length"
-            title="导出数据"
-            class="tool-btn success"
-          >
-            <span class="icon">💾</span>
-            <span class="text">导出</span>
-          </button>
-        </div>
-      </div>
-
-      <!-- 收起时的最小化工具栏 -->
-      <div class="toolbar-minimized" v-show="isToolbarCollapsed">
-        <button
-          @click="toggleDrawing('point')"
-          :class="{ active: drawingMode === 'point' }"
-          title="点"
-          class="min-tool-btn"
-        >
-          <span class="icon">📍</span>
-        </button>
-        <button
-          @click="toggleDrawing('line')"
-          :class="{ active: drawingMode === 'line' }"
-          title="线"
-          class="min-tool-btn"
-        >
-          <span class="icon">📏</span>
-        </button>
-        <button
-          @click="toggleDrawing('polygon')"
-          :class="{ active: drawingMode === 'polygon' }"
-          title="面"
-          class="min-tool-btn"
-        >
-          <span class="icon">🔶</span>
-        </button>
-        <button
-          @click="toggleDrawing('rectangle')"
-          :class="{ active: drawingMode === 'rectangle' }"
-          title="矩形"
-          class="min-tool-btn"
-        >
-          <span class="icon">⬜</span>
-        </button>
-        <button
-          @click="toggleDrawing('circle')"
-          :class="{ active: drawingMode === 'circle' }"
-          title="圆形"
-          class="min-tool-btn"
-        >
-          <span class="icon">⭕</span>
-        </button>
-        <div class="min-tool-separator"></div>
-        <button
-          @click="clearAll"
-          :disabled="!allEntities.length"
-          title="清除所有"
-          class="min-tool-btn danger"
-        >
-          <span class="icon">🗑️</span>
-        </button>
-        <button
-          @click="exportData"
-          :disabled="!allEntities.length"
-          title="导出数据"
-          class="min-tool-btn success"
-        >
-          <span class="icon">💾</span>
-        </button>
-      </div>
-    </div>
-
-    <!-- 测量结果显示 -->
-    <div class="measurement-panel" v-if="measurementResult">
-      <div class="measurement-content">
-        <h5>测量结果</h5>
-        <div class="measurement-item" v-if="measurementResult.distance">
-          <span>长度：</span>
-          <strong>{{ measurementResult.distance.toFixed(2) }} 米</strong>
-        </div>
-        <div class="measurement-item" v-if="measurementResult.area">
-          <span>面积：</span>
-          <strong>{{ measurementResult.area.toFixed(2) }} 平方米</strong>
-        </div>
-        <div class="measurement-item" v-if="measurementResult.radius">
-          <span>半径：</span>
-          <strong>{{ measurementResult.radius.toFixed(2) }} 米</strong>
-        </div>
-        <button @click="measurementResult = null" class="close-btn">关闭</button>
-      </div>
-    </div>
+    <drawing-toolbar
+      :draw-dom-click="drawDomClick"
+      :drawing-mode="drawingMode"
+      :has-entities="allEntities.length > 0"
+      @toggle-drawing="toggleDrawing"
+      @clear-all="clearAll"
+      @export-data="exportData"
+      @import-data="importData"
+      @locate="handleLocate"
+    />
+
+    <measurement-panel
+      v-if="measurementResult"
+      :result="measurementResult"
+      @close="measurementResult = null"
+    />
   </div>
 </template>
 
 <script>
-// import * as Cesium from 'cesium'
-// import 'cesium/Build/Cesium/Widgets/widgets.css'
+import * as Cesium from 'cesium'
+import 'cesium/Build/Cesium/Widgets/widgets.css'
+import DrawingToolbar from './DrawingToolbar.vue'
+import MeasurementPanel from './MeasurementPanel.vue'
 export default {
   name: 'CesiumMap',
   props: {
@@ -227,12 +57,6 @@ export default {
     return {
       viewer: null,
       scaleBar: null,
-      isToolbarCollapsed: false,
-
-      // ================== 新增：定位数据 ==================
-      targetLng: 116.3974, // 默认经度 (北京)
-      targetLat: 39.9093,  // 默认纬度
-      // =================================================
 
       // 绘制相关
       drawingMode: null, // 'point', 'line', 'polygon', 'rectangle', 'circle'
@@ -242,15 +66,15 @@ export default {
       drawingPoints: [],
       drawingStartPoint: null,
       isDrawing: false,
-      
+
       // 实体管理
       allEntities: [], // 所有绘制的实体
       entityCounter: 0,
       selectedEntity: null, // 当前选中的实体
-      
+
       // 测量结果
       measurementResult: null,
-      
+
       // 默认样式
       defaultStyles: {
         point: { color: '#FF0000', size: 12 },
@@ -261,7 +85,10 @@ export default {
       }
     }
   },
-
+  components: {
+    DrawingToolbar,
+    MeasurementPanel
+  },
   mounted() {
     console.log(this.drawDomClick,999999)
     // this.initMap()
@@ -273,10 +100,6 @@ export default {
   },
 
   methods: {
-    // 切换工具栏展开/收起
-    toggleToolbar() {
-      this.isToolbarCollapsed = !this.isToolbarCollapsed
-    },
     checkCesiumLoaded() {
       if (typeof Cesium === 'undefined') {
         console.error('Cesium未加载，请检查CDN链接');
@@ -295,7 +118,7 @@ export default {
     initMap() {
       try {
         // 确保 Cesium 已加载
-    // Cesium.buildModuleUrl.setBaseUrl(window.CESIUM_BASE_URL)
+        Cesium.buildModuleUrl.setBaseUrl(window.CESIUM_BASE_URL)
         Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjN2MzMmE5OS01NGU3LTQzOGQtYjdjZi1mNGIwZTFjZjQ0NmEiLCJpZCI6MTQ0MDc2LCJpYXQiOjE2ODU3NjY1OTN9.iCmFY-5WNdvyAT-EO2j-unrFm4ZN9J6aSuB2wElQZ-I'
 
         this.viewer = new Cesium.Viewer('cesiumViewer', {
@@ -400,11 +223,11 @@ export default {
       // 高德不需要专门的 TilingScheme，默认即可，或者使用 WebMercator
       tilingScheme: new Cesium.WebMercatorTilingScheme()
     })
-    
+
     this.viewer.imageryLayers.addImageryProvider(administrativeMap)
-    
+
     // 如果需要叠加路网或注记，可以在这里再 add 一个图层
-    
+
   } catch (error) {
     console.error('加载地图失败:', error)
     this.showGridLayer()
@@ -497,7 +320,7 @@ export default {
         this.viewer.entities.remove(this.tempEntity);
         this.tempEntity = null;
       }
-      
+
       // 确保也清理预览实体
       if (this.tempPreviewEntity) {
         this.viewer.entities.remove(this.tempPreviewEntity);
@@ -528,7 +351,7 @@ export default {
       this.drawingPoints = [];
       // 记录当前鼠标的实时位置
       let activeCursorPosition = null;
-      
+
       // 清除可能存在的旧实体
       if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
       if (this.tempPreviewEntity) this.viewer.entities.remove(this.tempPreviewEntity);
@@ -552,7 +375,7 @@ export default {
           // === 第一步：点击第一个点后，立即创建“动态虚线” ===
           if (this.drawingPoints.length === 1) {
             activeCursorPosition = position; // 初始化鼠标位置
-            
+
             // 创建预览虚线（只创建这一次，之后它会自动随数据更新）
             this.tempPreviewEntity = this.viewer.entities.add({
               polyline: {
@@ -576,7 +399,7 @@ export default {
                 clampToGround: true // 贴地
               }
             });
-          } 
+          }
           // === 第二步：点击后续点时，绘制/延长“固定实线” ===
           else {
             // 移除旧的实线，重新画包含新点的实线
@@ -608,7 +431,7 @@ export default {
         } else {
           this.cancelDrawing();
         }
-        
+
         // 重置局部变量
         activeCursorPosition = null;
       }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
@@ -622,7 +445,7 @@ export default {
           this.viewer.entities.remove(this.tempPreviewEntity);
           this.tempPreviewEntity = null;
         }
-        
+
         // 创建最终的实线实体
         const entity = this.addLineEntity([...this.drawingPoints]);
 
@@ -685,7 +508,7 @@ export default {
                 // 使用半透明颜色，方便看到地图底图
                 material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5),
                 // 确保贴地
-                perPositionHeight: false 
+                perPositionHeight: false
               },
               // --- 边框线配置 ---
               polyline: {
@@ -717,7 +540,7 @@ export default {
         } else {
           this.cancelDrawing(); // 点数不够则取消
         }
-        
+
         // 重置状态
         activeCursorPosition = null;
       }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
@@ -785,15 +608,15 @@ export default {
                 clampToGround: true // 贴地
               }
             });
-          } 
+          }
           // --- 情况B：第二次点击（确定终点） ---
           else {
             this.drawingPoints.push(position);
             // 停止监听鼠标移动，因为形状已确定
-            activeCursorPosition = null; 
-            
+            activeCursorPosition = null;
+
             // 调用完成逻辑
-            this.finishRectangleDrawing(); 
+            this.finishRectangleDrawing();
           }
         }
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
@@ -807,7 +630,7 @@ export default {
     finishRectangleDrawing() {
       // 1. 获取最终的矩形范围对象
       const rect = Cesium.Rectangle.fromCartesianArray(this.drawingPoints);
-      
+
       // 2. 移除动态预览的临时实体
       if (this.tempEntity) {
         this.viewer.entities.remove(this.tempEntity);
@@ -826,10 +649,10 @@ export default {
           clampToGround: true
         }
       });
-      
+
       // 4. 记录到实体列表
       this.allEntities.push(finalEntity);
-      
+
       // 5. 计算并显示面积
       const area = this.calculateRectangleArea(rect);
       this.measurementResult = {
@@ -845,33 +668,33 @@ export default {
     calculateRectangleArea(rectangle) {
       // 获取地球椭球体对象
       const ellipsoid = this.viewer.scene.globe.ellipsoid;
-      
+
       // 方法一：使用 Cesium 几何管道计算（更精确，但需要特定模块支持）
       // const geometry = new Cesium.RectangleGeometry({ rectangle: rectangle });
       // const geometryInstance = Cesium.RectangleGeometry.createGeometry(geometry);
       // ...比较复杂
-      
+
       // 方法二：使用采样估算（简单且足够精确）
       // 获取矩形的四个角（弧度）
       const west = rectangle.west;
       const south = rectangle.south;
       const east = rectangle.east;
       const north = rectangle.north;
-      
+
       // 计算中心点的纬度
       const centerLat = (south + north) / 2;
-      
+
       // 计算宽度（东西向距离）：使用余弦定理校正纬度影响
       // 地球半径约为 6378137 米
-      const R = 6378137; 
+      const R = 6378137;
       const width = (east - west) * R * Math.cos(centerLat);
-      
+
       // 计算高度（南北向距离）
       const height = (north - south) * R;
-      
+
       // 面积 = 宽 * 高
       const area = Math.abs(width * height);
-      
+
       return area;
     },
     // 绘制圆形
@@ -927,15 +750,15 @@ export default {
                 // height: 0, // 如果需要贴地可开启或使用 heightReference
               }
             });
-          } 
+          }
           // --- 情况B：第二次点击（确定边缘/半径） ---
           else {
             // 记录边缘点（虽然圆只需要圆心和半径，但记录下来方便后续处理）
             this.drawingPoints.push(position);
             activeCursorPosition = null; // 停止动态更新
-            
+
             // 传递边缘点位置去结束绘制
-            this.finishCircleDrawing(position); 
+            this.finishCircleDrawing(position);
           }
         }
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
@@ -948,10 +771,10 @@ export default {
 
     finishCircleDrawing(edgePosition) {
       const centerPoint = this.drawingPoints[0];
-      
+
       // 1. 计算最终半径
       const radius = Cesium.Cartesian3.distance(centerPoint, edgePosition);
-      
+
       // 2. 移除动态预览实体
       if (this.tempEntity) {
         this.viewer.entities.remove(this.tempEntity);
@@ -978,7 +801,7 @@ export default {
       // 5. 计算面积 (π * r²) 并显示
       // 半径单位是米，面积单位是平方米
       const area = Math.PI * Math.pow(radius, 2);
-      
+
       this.measurementResult = {
         radius: radius, // 也可以额外显示半径
         area: area,
@@ -989,39 +812,6 @@ export default {
       this.stopDrawing();
     },
 
-    flyToLocation() {
-      // 1. 校验输入
-      if (!this.targetLng || !this.targetLat) {
-        alert("请输入有效的经度和纬度！");
-        return;
-      }
-
-      const lng = parseFloat(this.targetLng);
-      const lat = parseFloat(this.targetLat);
-
-      // 简单校验范围
-      if (lng < -180 || lng > 180 || lat < -90 || lat > 90) {
-        alert("经纬度超出有效范围！");
-        return;
-      }
-
-      // 2. 执行飞行
-      if (this.viewer) {
-        this.viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(lng, lat, 5000), // 5000是默认高度，可调整
-          orientation: {
-            heading: Cesium.Math.toRadians(0.0),
-            pitch: Cesium.Math.toRadians(-90.0), // 俯视
-            roll: 0.0
-          },
-          duration: 2 // 飞行持续时间（秒）
-        });
-
-        // 可选：添加一个临时的标记点来指示位置
-        this.addTempMarker(lng, lat);
-      }
-    },
-
     // ================== 实体创建方法 ==================
 
     addPointEntity(lat, lng) {
@@ -1180,7 +970,7 @@ export default {
     id: id,
     name: `圆形 ${this.entityCounter}`,
     position: center, // 圆心位置
-    
+
     // 【优化】使用 ellipse (椭圆) 绘制圆形
     ellipse: {
       semiMinorAxis: radius, // 半短轴 = 半径
@@ -1378,7 +1168,7 @@ export default {
     clearAll() {
   // 1. 检查数组是否有内容
   if (this.allEntities && this.allEntities.length > 0) {
-    
+
     // 2. 遍历每一个对象进行删除
     this.allEntities.forEach(item => {
       try {
@@ -1465,6 +1255,239 @@ export default {
       console.log('数据已导出', data)
     },
 
+    importData() {
+      const input = document.createElement('input')
+      input.type = 'file'
+      input.accept = '.json'
+      input.onchange = (e) => {
+        const file = e.target.files[0]
+        if (!file) return
+
+        const reader = new FileReader()
+        reader.onload = (event) => {
+          try {
+            const data = JSON.parse(event.target.result)
+            if (data.entities && Array.isArray(data.entities)) {
+              data.entities.forEach(entityData => {
+                this.importEntity(entityData)
+              })
+              console.log('数据已导入', data)
+              this.$message.success(`成功导入 ${data.entities.length} 个实体`)
+            } else {
+              this.$message.error('文件格式不正确')
+            }
+          } catch (error) {
+            console.error('导入失败', error)
+            this.$message.error('文件解析失败')
+          }
+        }
+        reader.readAsText(file)
+      }
+      input.click()
+    },
+
+    importEntity(entityData) {
+      let entity
+      const color = entityData.color || '#008aff'
+
+      switch (entityData.type) {
+        case 'point':
+          entity = this.viewer.entities.add({
+            position: Cesium.Cartesian3.fromDegrees(entityData.data.lng, entityData.data.lat),
+            point: {
+              pixelSize: 10,
+              color: Cesium.Color.fromCssColorString(color),
+              outlineColor: Cesium.Color.WHITE,
+              outlineWidth: 2
+            },
+            label: {
+              text: entityData.label || '点',
+              font: '14px sans-serif',
+              fillColor: Cesium.Color.WHITE,
+              outlineColor: Cesium.Color.BLACK,
+              outlineWidth: 2,
+              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+              pixelOffset: new Cesium.Cartesian2(0, -10)
+            }
+          })
+          break
+
+        case 'line':
+          const linePositions = entityData.data.points.map(p => Cesium.Cartesian3.fromDegrees(p.lng, p.lat))
+          entity = this.viewer.entities.add({
+            polyline: {
+              positions: linePositions,
+              width: 3,
+              material: Cesium.Color.fromCssColorString(color),
+              clampToGround: true
+            },
+            label: {
+              text: entityData.label || '线',
+              font: '14px sans-serif',
+              fillColor: Cesium.Color.WHITE,
+              outlineColor: Cesium.Color.BLACK,
+              outlineWidth: 2,
+              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+              position: linePositions[0]
+            }
+          })
+          break
+
+        case 'polygon':
+          const polygonPositions = entityData.data.points.map(p => Cesium.Cartesian3.fromDegrees(p.lng, p.lat))
+          entity = this.viewer.entities.add({
+            polygon: {
+              hierarchy: polygonPositions,
+              material: Cesium.Color.fromCssColorString(color).withAlpha(0.5),
+              outline: true,
+              outlineColor: Cesium.Color.fromCssColorString(color),
+              outlineWidth: 2
+            },
+            label: {
+              text: entityData.label || '面',
+              font: '14px sans-serif',
+              fillColor: Cesium.Color.WHITE,
+              outlineColor: Cesium.Color.BLACK,
+              outlineWidth: 2,
+              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+              position: polygonPositions[0]
+            }
+          })
+          break
+
+        case 'rectangle':
+          const rectCoords = entityData.data.coordinates
+          entity = this.viewer.entities.add({
+            rectangle: {
+              coordinates: Cesium.Rectangle.fromDegrees(rectCoords.west, rectCoords.south, rectCoords.east, rectCoords.north),
+              material: Cesium.Color.fromCssColorString(color).withAlpha(0.5),
+              outline: true,
+              outlineColor: Cesium.Color.fromCssColorString(color),
+              outlineWidth: 2
+            },
+            label: {
+              text: entityData.label || '矩形',
+              font: '14px sans-serif',
+              fillColor: Cesium.Color.WHITE,
+              outlineColor: Cesium.Color.BLACK,
+              outlineWidth: 2,
+              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+              position: Cesium.Cartesian3.fromDegrees((rectCoords.west + rectCoords.east) / 2, (rectCoords.south + rectCoords.north) / 2)
+            }
+          })
+          break
+
+        case 'circle':
+          entity = this.viewer.entities.add({
+            position: Cesium.Cartesian3.fromDegrees(entityData.data.center.lng, entityData.data.center.lat),
+            ellipse: {
+              semiMinorAxis: entityData.data.radius,
+              semiMajorAxis: entityData.data.radius,
+              material: Cesium.Color.fromCssColorString(color).withAlpha(0.5),
+              outline: true,
+              outlineColor: Cesium.Color.fromCssColorString(color),
+              outlineWidth: 2
+            },
+            label: {
+              text: entityData.label || '圆形',
+              font: '14px sans-serif',
+              fillColor: Cesium.Color.WHITE,
+              outlineColor: Cesium.Color.BLACK,
+              outlineWidth: 2,
+              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+              pixelOffset: new Cesium.Cartesian2(0, -10)
+            }
+          })
+          break
+      }
+
+      if (entity) {
+        this.allEntities.push({
+          id: entity.id,
+          type: entityData.type,
+          label: entityData.label,
+          color: color,
+          ...entityData.data
+        })
+      }
+    },
+
+    handleLocate() {
+      const h = this.$createElement
+      this.$msgbox({
+        title: '定位',
+        message: h('div', { style: 'padding: 10px 0;' }, [
+          h('div', { style: 'margin-bottom: 15px;' }, [
+            h('label', { style: 'display: block; margin-bottom: 5px; color: #606266;' }, '经度：'),
+            h('input', {
+              attrs: {
+                type: 'number',
+                placeholder: '例如 116.40',
+                step: '0.000001',
+                value: '116.3974'
+              },
+              style: 'width: 100%; padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;',
+              ref: 'lngInput'
+            })
+          ]),
+          h('div', null, [
+            h('label', { style: 'display: block; margin-bottom: 5px; color: #606266;' }, '纬度：'),
+            h('input', {
+              attrs: {
+                type: 'number',
+                placeholder: '例如 39.90',
+                step: '0.000001',
+                value: '39.9093'
+              },
+              style: 'width: 100%; padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;',
+              ref: 'latInput'
+            })
+          ])
+        ]),
+        showCancelButton: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            const lngInput = instance.$el.querySelector('input[placeholder="例如 116.40"]')
+            const latInput = instance.$el.querySelector('input[placeholder="例如 39.90"]')
+            const lng = parseFloat(lngInput.value)
+            const lat = parseFloat(latInput.value)
+
+            if (!lng || !lat || isNaN(lng) || isNaN(lat)) {
+              this.$message.error('请输入有效的经度和纬度！')
+              return
+            }
+            if (lng < -180 || lng > 180 || lat < -90 || lat > 90) {
+              this.$message.error('经纬度超出有效范围！')
+              return
+            }
+
+            if (this.viewer) {
+              this.viewer.camera.flyTo({
+                destination: Cesium.Cartesian3.fromDegrees(lng, lat, 5000),
+                orientation: {
+                  heading: Cesium.Math.toRadians(0.0),
+                  pitch: Cesium.Math.toRadians(-90.0),
+                  roll: 0.0
+                },
+                duration: 2
+              })
+              this.$message.success(`已定位到经度 ${lng.toFixed(4)}，纬度 ${lat.toFixed(4)}`)
+            }
+            done()
+          } else {
+            this.$message.info('已取消定位')
+            done()
+          }
+        }
+      }).catch(() => {
+        this.$message.info('已取消定位')
+      })
+    },
+
     initScaleBar() {
       // ... 原有的比例尺代码保持不变
     },
@@ -1498,284 +1521,6 @@ export default {
   height: 100%;
 }
 
-/* 主工具栏 - 修改后 */
-.main-toolbar {
-  position: absolute;
-  top: 365px; /* 增大这个数值即可整体下移，比如从100px改成150px */
-  left: 62px;
-  z-index: 1000;
-  display: flex;
-  background: rgba(255, 255, 255, 0.95);
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  transition: all 0.3s ease;
-}
-
-.main-toolbar.collapsed {
-  background: rgba(255, 255, 255, 0.9);
-}
-
-/* 工具栏内容 - 无需修改 */
-.toolbar-content {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  padding: 15px;
-  min-width: 180px;
-}
-
-/* 收起按钮 */
-.collapse-btn {
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  cursor: pointer;
-  background: #f8f9fa;
-  border-top-left-radius: 12px;
-  border-bottom-left-radius: 12px;
-  border-right: 1px solid #e9ecef;
-  transition: all 0.3s ease;
-  user-select: none;
-}
-
-.collapse-btn:hover {
-  background: #e9ecef;
-}
-
-.collapse-icon {
-  font-size: 14px;
-  font-weight: bold;
-  color: #495057;
-  margin-right: 5px;
-}
-
-.collapse-text {
-  font-size: 12px;
-  color: #6c757d;
-  white-space: nowrap;
-}
-
-/* 工具栏组 */
-.toolbar-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #e9ecef;
-}
-
-.toolbar-group:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-
-/* 收起时的最小化工具栏 */
-.toolbar-minimized {
-  display: flex;
-  flex-direction: column;
-  padding: 10px 8px;
-  gap: 8px;
-}
-
-.min-tool-btn {
-  width: 36px;
-  height: 36px;
-  border: 2px solid #e9ecef;
-  border-radius: 8px;
-  background: white;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  color: #495057;
-  transition: all 0.3s ease;
-}
-
-.min-tool-btn:hover {
-  background: #f8f9fa;
-  border-color: #4dabf7;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.min-tool-btn.active {
-  background: #4dabf7;
-  color: white;
-  border-color: #4dabf7;
-}
-
-.min-tool-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none !important;
-}
-
-.min-tool-btn.danger {
-  color: #dc3545;
-}
-
-.min-tool-btn.danger:hover {
-  background: #f8d7da;
-  border-color: #dc3545;
-}
-
-.min-tool-btn.success {
-  color: #28a745;
-}
-
-.min-tool-btn.success:hover {
-  background: #d4edda;
-  border-color: #28a745;
-}
-
-.min-tool-separator {
-  height: 1px;
-  background: #e9ecef;
-  margin: 5px 0;
-}
-
-/* 定位面板样式 */
-.location-panel {
-  position: absolute;
-  top: -80px;
-  right: -180px; /* 放在右上角 */
-  z-index: 1000;
-  background: rgba(255, 255, 255, 0.95);
-  border-radius: 8px;
-  padding: 10px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
-}
-
-.input-group {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.input-group input {
-  width: 100px;
-  padding: 6px 10px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  outline: none;
-  font-size: 14px;
-}
-
-.input-group input:focus {
-  border-color: #4dabf7;
-}
-
-.location-btn {
-  background: #4dabf7;
-  color: white;
-  border: none;
-  padding: 6px 15px;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  transition: background 0.3s;
-}
-
-.location-btn:hover {
-  background: #3b8dbd;
-}
-
-/* 原来的工具按钮样式保持不变，但添加展开/收起状态的调整 */
-.tool-btn {
-  padding: 10px 15px;
-  background: white;
-  border: 2px solid #e9ecef;
-  border-radius: 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #495057;
-  transition: all 0.3s ease;
-  min-width: 120px;
-}
-
-.tool-btn:hover {
-  background: #f8f9fa;
-  border-color: #4dabf7;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.tool-btn.active {
-  background: #4dabf7;
-  color: white;
-  border-color: #4dabf7;
-}
-
-.tool-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none !important;
-}
-
-.tool-btn.danger {
-  color: #dc3545;
-}
-
-.tool-btn.danger:hover {
-  background: #f8d7da;
-  border-color: #dc3545;
-}
-
-.tool-btn.success {
-  color: #28a745;
-}
-
-.tool-btn.success:hover {
-  background: #d4edda;
-  border-color: #28a745;
-}
-
-.tool-btn .icon {
-  font-size: 16px;
-  width: 20px;
-  text-align: center;
-}
-
-.tool-btn .text {
-  white-space: nowrap;
-}
-
-/* 其他样式保持不变... */
-
-/* 属性面板 */
-.property-panel {
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  z-index: 1000;
-  background: rgba(255, 255, 255, 0.98);
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  min-width: 250px;
-  max-width: 300px;
-}
-
-/* 测量结果面板 */
-.measurement-panel {
-  position: absolute;
-  bottom: 80px;
-  left: 20px;
-  z-index: 1000;
-  background: rgba(255, 255, 255, 0.98);
-  border-radius: 12px;
-  padding: 15px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  min-width: 200px;
-}
-
 /* 自定义比例尺样式 */
 :deep(.scale-bar-container) {
   user-select: none;
@@ -1794,23 +1539,5 @@ export default {
 :deep(.cesium-credit-textContainer) {
   display: none !important;
 }
-
-/* 响应式调整 */
-@media (max-width: 768px) {
-  .main-toolbar {
-    right: 10px;
-    top: 80px;
-  }
-
-  .toolbar-content {
-    min-width: 150px;
-  }
-
-  .tool-btn {
-    min-width: 100px;
-    padding: 8px 12px;
-  }
-}
 </style>
 
-
diff --git a/ruoyi-ui/src/views/childRoom/BottomLeftPanel.vue b/ruoyi-ui/src/views/childRoom/BottomLeftPanel.vue
new file mode 100644
index 0000000..177a63a
--- /dev/null
+++ b/ruoyi-ui/src/views/childRoom/BottomLeftPanel.vue
@@ -0,0 +1,391 @@
+<template>
+  <div class="bottom-left-panel">
+    <div class="panel-toggle" @click="togglePanel" :title="isExpanded ? '收起' : '展开'">
+      <i :class="isExpanded ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i>
+      <span v-if="!isExpanded" class="toggle-text">工具</span>
+    </div>
+
+    <div class="panel-content" :class="{ expanded: isExpanded }">
+      <div class="panel-item" @click="showTimeline">
+        <i class="el-icon-time"></i>
+        <span>时间线</span>
+      </div>
+      <div class="panel-item" @click="showProgress">
+        <i class="el-icon-s-data"></i>
+        <span>进度检查</span>
+      </div>
+      <div class="panel-item" @click="showSixSteps">
+        <i class="el-icon-s-operation"></i>
+        <span>六步法</span>
+      </div>
+    </div>
+
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="dialogTitle"
+      width="350px"
+      :modal="false"
+      custom-class="panel-dialog"
+    >
+      <div class="dialog-content">
+        <div v-if="activeTab === 'timeline'" class="timeline-content">
+          <h3>时间线</h3>
+          <div class="timeline-list">
+            <div v-for="(item, index) in timelineData" :key="index" class="timeline-item">
+              <div class="timeline-dot"></div>
+              <div class="timeline-info">
+                <div class="timeline-time">{{ item.time }}</div>
+                <div class="timeline-event">{{ item.event }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="activeTab === 'progress'" class="progress-content">
+          <h3>进度检查</h3>
+          <div class="progress-list">
+            <div v-for="(item, index) in progressData" :key="index" class="progress-item">
+              <div class="progress-label">{{ item.label }}</div>
+              <el-progress :percentage="item.percentage" :status="item.status"></el-progress>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="activeTab === 'sixsteps'" class="sixsteps-content">
+          <h3>六步法</h3>
+          <div class="steps-container">
+            <div v-for="(step, index) in sixStepsData" :key="index" class="step-item" :class="{ active: step.active, completed: step.completed }">
+              <div class="step-number">{{ index + 1 }}</div>
+              <div class="step-content">
+                <div class="step-title">{{ step.title }}</div>
+                <div class="step-desc">{{ step.desc }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BottomLeftPanel',
+  data() {
+    return {
+      isExpanded: false,
+      dialogVisible: false,
+      dialogTitle: '',
+      activeTab: '',
+      timelineData: [
+        { time: 'K-02:00', event: '任务准备阶段' },
+        { time: 'K-01:00', event: '资源调配' },
+        { time: 'K时', event: '任务执行' },
+        { time: 'K+01:00', event: '任务监控' },
+        { time: 'K+02:00', event: '任务完成' }
+      ],
+      progressData: [
+        { label: '任务准备', percentage: 100, status: 'success' },
+        { label: '资源调配', percentage: 80, status: '' },
+        { label: '任务执行', percentage: 45, status: '' },
+        { label: '任务监控', percentage: 20, status: 'exception' },
+        { label: '任务完成', percentage: 0, status: '' }
+      ],
+      sixStepsData: [
+        { title: '理解', desc: '明确任务目标和要求', active: true, completed: true },
+        { title: '判断', desc: '评估可用资源和能力', active: false, completed: true },
+        { title: '规划', desc: '制定详细执行方案', active: false, completed: false },
+        { title: '准备', desc: '识别和评估潜在风险', active: false, completed: false },
+        { title: '执行', desc: '实时监控执行过程', active: false, completed: false },
+        { title: '评估', desc: '评估任务完成效果', active: false, completed: false }
+      ]
+    }
+  },
+  methods: {
+    togglePanel() {
+      this.isExpanded = !this.isExpanded
+    },
+    showTimeline() {
+      this.activeTab = 'timeline'
+      this.dialogTitle = '时间线'
+      this.dialogVisible = true
+    },
+    showProgress() {
+      this.activeTab = 'progress'
+      this.dialogTitle = '进度检查'
+      this.dialogVisible = true
+    },
+    showSixSteps() {
+      this.activeTab = 'sixsteps'
+      this.dialogTitle = '六步法'
+      this.dialogVisible = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bottom-left-panel {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  z-index: 100;
+}
+
+.panel-toggle {
+  width: 50px;
+  height: 50px;
+  background: rgba(0, 138, 255, 0.9);
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  color: white;
+  font-size: 20px;
+  box-shadow: 0 4px 12px rgba(0, 138, 255, 0.4);
+  transition: all 0.3s;
+}
+
+.panel-toggle:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 16px rgba(0, 138, 255, 0.6);
+}
+
+.toggle-text {
+  font-size: 10px;
+  margin-top: 2px;
+}
+
+.panel-content {
+  position: absolute;
+  bottom: 60px;
+  left: 0;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  padding: 10px;
+  min-width: 150px;
+  opacity: 0;
+  transform: translateY(20px);
+  pointer-events: none;
+  transition: all 0.3s;
+}
+
+.panel-content.expanded {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.panel-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 15px;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: all 0.3s;
+  color: #333;
+}
+
+.panel-item:hover {
+  background: rgba(0, 138, 255, 0.1);
+  color: #008aff;
+  transform: translateX(5px);
+}
+
+.panel-item i {
+  font-size: 18px;
+  margin-right: 10px;
+  color: #008aff;
+}
+
+.panel-item span {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.dialog-content {
+  padding: 0;
+}
+
+.timeline-content h3,
+.progress-content h3,
+.sixsteps-content h3 {
+  margin: 0 0 15px 0;
+  font-size: 14px;
+  color: #333;
+  border-bottom: 2px solid #409EFF;
+  padding-bottom: 8px;
+}
+
+.timeline-list {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.timeline-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 12px;
+  position: relative;
+}
+
+.timeline-item::before {
+  content: '';
+  position: absolute;
+  left: 5px;
+  top: 15px;
+  bottom: -12px;
+  width: 2px;
+  background: #e0e0e0;
+}
+
+.timeline-item:last-child::before {
+  display: none;
+}
+
+.timeline-dot {
+  width: 12px;
+  height: 12px;
+  background: #409EFF;
+  border-radius: 50%;
+  margin-right: 10px;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
+}
+
+.timeline-info {
+  flex: 1;
+}
+
+.timeline-time {
+  font-size: 12px;
+  color: #409EFF;
+  font-weight: 600;
+  margin-bottom: 3px;
+}
+
+.timeline-event {
+  font-size: 12px;
+  color: #666;
+}
+
+.progress-list {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.progress-item {
+  margin-bottom: 15px;
+}
+
+.progress-label {
+  font-size: 12px;
+  color: #333;
+  margin-bottom: 5px;
+  font-weight: 500;
+}
+
+.steps-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.step-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 10px;
+  background: #f5f7fa;
+  border-radius: 6px;
+  transition: all 0.3s;
+  border-left: 3px solid #dcdfe6;
+}
+
+.step-item.active {
+  background: rgba(64, 158, 255, 0.1);
+  border-left-color: #409EFF;
+}
+
+.step-item.completed {
+  background: rgba(103, 194, 58, 0.1);
+  border-left-color: #67c23a;
+}
+
+.step-number {
+  width: 24px;
+  height: 24px;
+  background: #dcdfe6;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: #909399;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+.step-item.active .step-number {
+  background: #409EFF;
+  color: white;
+}
+
+.step-item.completed .step-number {
+  background: #67c23a;
+  color: white;
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 3px;
+}
+
+.step-desc {
+  font-size: 11px;
+  color: #666;
+}
+</style>
+
+<style>
+.panel-dialog {
+  position: absolute !important;
+  left: 170px !important;
+  bottom: 20px !important;
+  top: auto !important;
+  margin: 0 !important;
+  max-height: 400px;
+}
+
+.panel-dialog .el-dialog__header {
+  padding: 12px 15px;
+  background: #409EFF;
+  color: white;
+}
+
+.panel-dialog .el-dialog__title {
+  color: white;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.panel-dialog .el-dialog__headerbtn .el-dialog__close {
+  color: white;
+}
+
+.panel-dialog .el-dialog__body {
+  padding: 15px;
+  max-height: 350px;
+  overflow-y: auto;
+}
+</style>
diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue
index 869b09f..924ef63 100644
--- a/ruoyi-ui/src/views/childRoom/index.vue
+++ b/ruoyi-ui/src/views/childRoom/index.vue
@@ -280,6 +280,9 @@
       @open-platform-dialog="openPlatformDialog"
     />
 
+    <!-- 左下角工具面板 -->
+    <bottom-left-panel />
+
     <!-- 底部时间轴（最初版本的样式）- 蓝色主题 -->
     <div 
       class="floating-timeline blue-theme" 
@@ -305,12 +308,34 @@
           />
         </div>
         
-        <div class="timeline-marks">
-          <span class="mark">K-02:00</span>
-          <span class="mark">K-01:00</span>
-          <span class="mark current blue-mark">K时</span>
-          <span class="mark">K+01:00</span>
-          <span class="mark">K+02:00</span>
+        <div class="playback-controls">
+          <button 
+            class="control-btn blue-control-btn" 
+            @click="togglePlay"
+            :title="isPlaying ? '暂停' : '播放'"
+          >
+            <i :class="isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"></i>
+          </button>
+          
+          <div class="speed-control">
+            <button 
+              class="control-btn blue-control-btn" 
+              @click="decreaseSpeed"
+              :disabled="playbackSpeed <= 1"
+              title="减速"
+            >
+              <i class="el-icon-arrow-down"></i>
+            </button>
+            <span class="speed-text">{{ playbackSpeed }}x</span>
+            <button 
+              class="control-btn blue-control-btn" 
+              @click="increaseSpeed"
+              :disabled="playbackSpeed >= 25"
+              title="加速"
+            >
+              <i class="el-icon-arrow-up"></i>
+            </button>
+          </div>
         </div>
       </div>
       
@@ -353,6 +378,7 @@ import RouteEditDialog from '@/views/dialogs/RouteEditDialog'
 import WaypointEditDialog from '@/views/dialogs/WaypointEditDialog'
 import LeftMenu from './LeftMenu'
 import RightPanel from './RightPanel'
+import BottomLeftPanel from './BottomLeftPanel'
 export default {
   name: 'MissionPlanningView',
   components: {
@@ -362,7 +388,8 @@ export default {
     RouteEditDialog,
     WaypointEditDialog,
     LeftMenu,
-    RightPanel
+    RightPanel,
+    BottomLeftPanel
   },
   data() {
     return {
@@ -473,6 +500,9 @@ export default {
       // 时间控制
       timeProgress: 45,
       currentTime: 'K+01:15:30',
+      isPlaying: false,
+      playbackSpeed: 1,
+      playbackInterval: null,
       
       // 用户
       userAvatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
@@ -490,6 +520,13 @@ export default {
     // 作战时间也需要实时更新
     setInterval(this.updateCombatTime, 1000);
   },
+  beforeDestroy() {
+    // 清除播放定时器
+    if (this.playbackInterval) {
+      clearInterval(this.playbackInterval);
+      this.playbackInterval = null;
+    }
+  },
   methods: {
     // 显示在线成员弹窗
     showOnlineMembersDialog() {
@@ -813,6 +850,68 @@ export default {
       this.$message.info('隐藏推演时钟控制');
     },
     
+    // 播放控制
+    togglePlay() {
+      this.isPlaying = !this.isPlaying;
+      if (this.isPlaying) {
+        this.startPlayback();
+        this.$message.success('开始播放');
+      } else {
+        this.stopPlayback();
+        this.$message.info('暂停播放');
+      }
+    },
+    
+    startPlayback() {
+      if (this.playbackInterval) {
+        clearInterval(this.playbackInterval);
+      }
+      this.playbackInterval = setInterval(() => {
+        this.timeProgress += this.playbackSpeed * 0.1;
+        if (this.timeProgress >= 100) {
+          this.timeProgress = 0;
+        }
+        this.updateTimeFromProgress();
+      }, 100);
+    },
+    
+    stopPlayback() {
+      if (this.playbackInterval) {
+        clearInterval(this.playbackInterval);
+        this.playbackInterval = null;
+      }
+    },
+    
+    increaseSpeed() {
+      if (this.playbackSpeed < 25) {
+        this.playbackSpeed++;
+        if (this.isPlaying) {
+          this.startPlayback();
+        }
+      }
+    },
+    
+    decreaseSpeed() {
+      if (this.playbackSpeed > 1) {
+        this.playbackSpeed--;
+        if (this.isPlaying) {
+          this.startPlayback();
+        }
+      }
+    },
+    
+    updateTimeFromProgress() {
+      const totalSeconds = Math.floor(this.timeProgress * 72);
+      const hours = Math.floor(totalSeconds / 3600) - 2;
+      const minutes = Math.floor((totalSeconds % 3600) / 60);
+      const seconds = totalSeconds % 60;
+      
+      const sign = hours >= 0 ? '+' : '-';
+      const absHours = Math.abs(hours);
+      
+      this.currentTime = `K${sign}${String(absHours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+    },
+    
     // 时间控制（保留用于底部时间轴）
     play() {
       this.$message.success('推演开始');
@@ -1495,16 +1594,56 @@ background: url('~@/assets/map-background.png');
   background-color: rgba(0, 138, 255, 0.8);
 }
 
-.timeline-marks {
+.playback-controls {
   display: flex;
-  justify-content: space-between;
-  font-size: 11px;
-  color: #666;
-  margin-top: 5px;
+  align-items: center;
+  gap: 10px;
 }
 
-.mark.current {
-  font-weight: bold;
+.control-btn {
+  width: 26px;
+  height: 26px;
+  border: 1px solid rgba(0, 138, 255, 0.3);
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+  color: #008aff;
+}
+
+.control-btn:hover:not(:disabled) {
+  background: rgba(0, 138, 255, 0.1);
+  border-color: rgba(0, 138, 255, 0.5);
+}
+
+.control-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.control-btn i {
+  font-size: 14px;
+}
+
+.speed-control {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 8px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 138, 255, 0.3);
+  border-radius: 4px;
+}
+
+.speed-text {
+  font-size: 11px;
+  font-weight: 600;
+  color: #008aff;
+  min-width: 24px;
+  text-align: center;
 }
 
 .system-status {