diff --git a/src/views/layout/components/main/planes/swarm.vue b/src/views/layout/components/main/planes/swarm.vue
new file mode 100644
index 0000000..fd074ef
--- /dev/null
+++ b/src/views/layout/components/main/planes/swarm.vue
@@ -0,0 +1,246 @@
+<template>
+  <div class="h-100">
+    <!-- 地图组件 -->
+    <map-box ref="mapbox" :enableShowNofly="true" :enableGuided="true" :enableFollow="true"
+      :enblueScale="!$store.state.app.isWideScreen" @longPress="handleLongPress" @map-ready="onMapReady">
+      <template #content>
+        <div v-show="mapReady">
+          <BatteryStatus :plane="plane" />
+          <PlaneStatus :plane="plane" />
+          <ControllerTabs :plane="plane" @mapXOffset="mapXOffset" @makeRoute="makeRoute" @clearRoute="clearRoute" />
+        </div>
+      </template>
+    </map-box>
+    <!-- 弹出框 -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="320px" top="30vh" @close="closeCallback"
+      @open="openCallback">
+      <!-- 点飞设置弹出框 -->
+      <template v-if="dialogItem == 'guidedBox'">
+        <el-form label-position="left">
+          <el-form-item label="纬度" label-width="80px">
+            <el-input v-model="guidedLonLat.lat" placeholder="请输维度" label="纬度"></el-input>
+          </el-form-item>
+          <el-form-item label="经度" label-width="80px">
+            <el-input v-model="guidedLonLat.lon" placeholder="请输经度" label="经度"></el-input>
+          </el-form-item>
+          <el-form-item label="高度设置" label-width="80px">
+            <el-input-number v-model="guidedAlt" label="高度设置"></el-input-number>
+            <font class="m-l-5">米</font>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button size="medium" @click="dialogVisible = false">关闭</el-button>
+          <el-button size="medium" type="primary"
+            @click="publishFun(`{guidedMode:{lon:${guidedLonLat.lon},lat:${guidedLonLat.lat},alt:${guidedAlt}}`); isReserveGuidedMaker = true; dialogVisible = false">飞至</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import MapBox from '@/components/MapBox'
+import ControllerTabs from '@/components/ControllerTabs'
+import BatteryStatus from '@/components/BatteryStatus'
+import PlaneStatus from '@/components/PlaneStatus'
+import mqtt from '@/utils/mqtt'
+import { waitForMapCanvasReady } from '@/utils'
+
+export default {
+  name: 'Planes',
+  data () {
+    return {
+      dialogTitle: '', // 弹出框 标题
+      dialogItem: '', // 弹出框 项目类型判断
+      dialogVisible: false, // 弹出框 显隐
+      guidedLonLat: {}, // 点飞 的经纬度
+      guidedAlt: '', // 点飞的高度
+      isReserveGuidedMaker: false, // 关闭指点飞行操作窗口时 标记是否删除图标
+      planesId: this.$route.params.id,
+      localCount: 0, // 本地存储计数器
+      mapReady: false// 地图加载完成后 回调时 设置此值  让地图组件插槽内容 滞后显示
+    }
+  },
+  components: {
+    MapBox,
+    ControllerTabs,
+    BatteryStatus,
+    PlaneStatus
+  },
+  computed: {
+    plane () {
+      if (this.$store.state.airList.length > 0) {
+        return this.$store.state.airList.find(plane => plane.id === this.planesId)
+      }
+      return null
+    },
+    position () {
+      if (this.plane) {
+        if (this.plane.planeState.position.length > 0) {
+          return this.plane.planeState.position
+        } else {
+          return []
+        }
+      } else {
+        return []
+      }
+    },
+    noflyData () {
+      return this.$store.state.noflyData
+    },
+    ADSBList () {
+      return this.$store.state.ADSBList
+    },
+    /**
+     * @description: 侧边栏显隐
+     */
+    isCollapse () {
+      return this.$store.state.app.isCollapse
+    }
+  },
+  methods: {
+    /** 弹出框 关闭事件回调 */
+    closeCallback () {
+      if (this.dialogItem === 'guidedBox' && this.isReserveGuidedMaker === false) { // 关闭点飞窗口时
+        this.$refs.mapbox.delGuidedMarker()// 删除所有点飞的地图标记
+      }
+      this.dialogVisible = false
+      this.dialogItem = ''
+    },
+    /** 弹出框 打开事件回调 */
+    openCallback () {
+    },
+    // 地图长按事件 记录地图经纬度
+    handleLongPress (lonLat) {
+      this.isReserveGuidedMaker = false
+      this.dialogTitle = '指点飞行'
+      this.dialogVisible = true
+      this.dialogItem = 'guidedBox'
+      this.guidedLonLat = lonLat // 设置点击的经纬度
+
+      // 安全获取飞机当前高度
+      let height = 0
+      if (this.plane && this.plane.planeState && Array.isArray(this.plane.planeState.position)) {
+        const posLen = this.plane.planeState.position.length
+        if (posLen > 0 && Array.isArray(this.plane.planeState.position[posLen - 1])) {
+          height = this.plane.planeState.position[posLen - 1][2] || 0
+        }
+      }
+      this.guidedAlt = height
+    },
+    // 地图组件回调地图加载完成后 执行
+    onMapReady () {
+      this.mapReady = true// 标记地图加载完成
+      this.makePlane(this.plane)
+    },
+    /**
+     * @description: 创建飞机图标
+     */
+    makePlane (plane) {
+      let planeDefaultLonLat
+      if (localStorage.getItem(plane.name)) { // 从本地缓存 拿飞机得初始位置
+        planeDefaultLonLat = JSON.parse(localStorage.getItem(plane.name))
+        plane.lon = planeDefaultLonLat.lon
+        plane.lat = planeDefaultLonLat.lat
+      } else {
+        // 缺省 给经纬度 小数点后随机第五位 即有个10米左右的随机距离
+        plane.lon = 100 + Number((Math.random() * 0.01).toFixed(5))
+        plane.lat = 40 + Number((Math.random() * 0.01).toFixed(5))
+      }
+      this.$refs.mapbox.removePlanes()// 先清除画布上现有的飞机
+      this.$refs.mapbox.makePlane(plane)// 创建飞机
+      this.$refs.mapbox.goto({ lon: plane.lon, lat: plane.lat })// 跳转到飞机位置
+    },
+    /**
+     * @description: 创建航线
+     */
+    makeRoute (routeData) {
+      this.$refs.mapbox.makeRoute(routeData)
+    },
+    /**
+     * @description: 清楚航线
+     */
+    clearRoute () {
+      this.$refs.mapbox.clearRoute()
+    },
+    /**
+     * @description: 屏幕横移
+     * @param {*} val 正数向左移动 负数向右移动
+     * @param {*} y 正数向上移动 负数向下移动
+     */
+    mapXOffset (x, y) {
+      this.$refs.mapbox.mapXOffset(x, y)
+    },
+    /**
+     * @description: 发布 mqtt 信息
+     * @param {*} jsonData {'item':val} // item: questAss飞行航点任务 setQuestState 设置飞机状态  resetQuestState设置飞机初始状态 chan1油门通道1 chan2油门通道2  chan3油门通道3  chan4油门通道4 hookConteroller钩子控制 cameraController云台相机控制
+     */
+    publishFun (jsonData) {
+      if (this.plane) {
+        mqtt.publishFun(`cmd/${this.plane.macadd}`, jsonData)
+      } else {
+        this.$message.warning('与飞机通信未接通,请稍后')
+      }
+    }
+  },
+  mounted () {
+  },
+  watch: {
+    plane: {
+      async handler () {
+        try {
+          // 等待地图画布准备好
+          await waitForMapCanvasReady(this.map)
+          // 画布准备好后执行你自己的逻辑
+          this.onMapReady()
+        } catch (err) {
+          console.debug('等待地图画布准备超时', err)
+        }
+      },
+      immediate: true
+    },
+    /**
+     * @description: 更新飞机位置 并画出轨迹 跟随飞机
+     */
+    position: {
+      handler (val) {
+        const len = val.length
+        if (len > 2) {
+          const lon = val[len - 1][0]
+          const lat = val[len - 1][1]
+          this.localCount++// 计数器 叠加
+          if (this.localCount % 100 === 1) {
+            localStorage.setItem(this.plane.name, `{ "lon": ${lon}, "lat": ${lat} }`)
+          }
+          this.$refs.mapbox.setPlaneLonLat({ lon: lon, lat: lat }, 0, val)// 更新飞机位置 并画出轨迹 跟随飞机
+        }
+      },
+      deep: true
+    },
+    ADSBList: {
+      handler (newList) {
+        if (this.$refs.mapbox && typeof this.$refs.mapbox.makeADSBPlanes === 'function') {
+          this.$refs.mapbox.makeADSBPlanes(newList)
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    /**
+     * @description: 侧边栏缩进有变化时 地图重新自适应
+     */
+    isCollapse: {
+      handler (val) {
+        if (val) {
+          this.$nextTick(() => {
+            this.$refs.mapbox.handleResize()
+          })
+        }
+      }
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped></style>