From 9f48971c72653f573e3ea2b8eb4301e051b23870 Mon Sep 17 00:00:00 2001
From: szdot <szdot@qq.com>
Date: Sun, 22 Jun 2025 18:30:19 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B1=BB=20=20=E5=9E=8B=E3=80=91?=
 =?UTF-8?q?=EF=BC=9Afeat=20=E3=80=90=E5=8E=9F=20=20=E5=9B=A0=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A=E5=88=9B=E5=BB=BA=E9=9B=86=E7=BE=A4=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=20=E7=9B=B8=E5=85=B3=E7=BB=84=E4=BB=B6=20=E3=80=90=E8=BF=87=20?=
 =?UTF-8?q?=20=E7=A8=8B=E3=80=91=EF=BC=9A=20=E3=80=90=E5=BD=B1=20=20?=
 =?UTF-8?q?=E5=93=8D=E3=80=91=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动
---
 src/components/SwarmControllerTabs.vue | 1200 ++++++++++++++++++++++++
 src/components/SwarmStatus.vue         |  254 +++++
 2 files changed, 1454 insertions(+)
 create mode 100644 src/components/SwarmControllerTabs.vue
 create mode 100644 src/components/SwarmStatus.vue

diff --git a/src/components/SwarmControllerTabs.vue b/src/components/SwarmControllerTabs.vue
new file mode 100644
index 0000000..7850db7
--- /dev/null
+++ b/src/components/SwarmControllerTabs.vue
@@ -0,0 +1,1200 @@
+<template>
+  <div class="w-100 h-100 mainBox">
+    <!-- 弹出框 -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="320px" top="30vh" @close="closeCallback"
+      @open="openCallback">
+      <!-- 起飞设置弹出框 -->
+      <template v-if="dialogItem == 'takeoffBox'">
+        <div class="flex  mse mac">
+          <el-slider class="w-100" v-model="takeoffValue" :show-tooltip="false" show-input :min="1" :max="100">
+          </el-slider>
+          <font class="m-l-5">米</font>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button size="medium" @click="dialogVisible = false">关闭</el-button>
+          <el-button size="medium" type="primary"
+            @click="publishFun(`{guidedMode:{alt:${takeoffValue}}}`); speakText('确认起飞')">飞至</el-button>
+        </span>
+      </template>
+      <!-- 摄像头弹出框 -->
+      <template v-else-if="dialogItem == 'cameraBox'">
+        <div class="slider-container w-100 flex mse mac">
+          <font>俯</font>
+          <el-slider @change="releaseCameraSlider('pitch')" @input="setCamera('pitch')" v-model="pitchValue"
+            :show-tooltip="false" class="w-80"></el-slider>
+          <font>仰</font>
+        </div>
+        <div class="slider-container w-100 flex mse mac m-t-10">
+          <font>左</font>
+          <el-slider @change="releaseCameraSlider('yaw')" @input="setCamera('yaw')" v-model="yawValue"
+            :show-tooltip="false" class="w-80"></el-slider>
+          <font>右</font>
+        </div>
+        <div class="slider-container w-100 flex mse mac m-t-10">
+          <font>大</font>
+          <el-slider @change="releaseCameraSlider('scale')" @input="setCamera('scale')" v-model="scaleValue"
+            :show-tooltip="false" class="w-80"></el-slider>
+          <font>小</font>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button size="medium" @click="dialogVisible = false">关闭</el-button>
+        </span>
+      </template>
+      <!-- 校准磁罗盘 -->
+      <template v-else-if="dialogItem === 'compassBox'">
+        <div>
+          <template v-if="reportCal === null">
+            <el-progress :percentage="completionPct"></el-progress>
+          </template>
+          <template v-else>
+            {{ reportCal === 'successful' ? '校准成功，重启飞机即可生效！' : '校准失败!' }}
+          </template>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button size="medium" @click="handlerCloseCompassBox">关闭</el-button>
+        </span>
+      </template>
+      <!-- 校准加速度计 -->
+      <template v-else-if="dialogItem === 'acceBox'">
+        <div v-loading="acceState === null"></div>
+        <div v-if="acceState === 'level'">
+          水平
+        </div>
+        <div v-else-if="acceState === 'left'">
+          左
+        </div>
+        <div v-else-if="acceState === 'right'">
+          右
+        </div>
+        <div v-else-if="acceState === 'down'">
+          前
+        </div>
+        <div v-else-if="acceState === 'up'">
+          后
+        </div>
+        <div v-else-if="acceState === 'back'">
+          反
+        </div>
+        <div v-else-if="acceState === 'successful'">
+          校准成功，重启飞机即可生效！
+        </div>
+        <div v-else-if="acceState === 'failed'">
+          校准失败
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button size="medium" @click="handlerCloseAcceBox">关闭</el-button>
+          <el-button size="medium" v-if="acceState !== 'successful' && acceState !== 'failed' && acceState !== null"
+            @click="publishFun('{initAcce:2}')" type="primary">已摆好</el-button>
+        </span>
+      </template>
+      <!-- 喊话参数 -->
+      <template v-else-if="dialogItem === 'talkBox'">
+        <el-form label-position="left">
+          <el-form-item label="喊话内容" label-width="80px">
+            <el-input v-model="talkValue" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
+              placeholder="请输入喊话内容"></el-input>
+          </el-form-item>
+          <el-form-item label="音量设置" label-width="80px">
+            <el-slider class="w-90" v-model="talkVolume" :show-tooltip="false" :min="1" :max="9">
+            </el-slider>
+          </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="playText(talkValue, talkVolume);">发送</el-button>
+        </span>
+      </template>
+      <!-- 读写参数 -->
+      <template v-else-if="dialogItem === 'paramBox'">
+        <el-input v-model="paramItem" placeholder="参数名"></el-input>
+        <el-input v-model="paramValue" placeholder="值" class="m-t-20"></el-input>
+        <span slot="footer" class="dialog-footer">
+          <el-button size="medium" @click="dialogVisible = false">关闭</el-button>
+          <el-button size="medium" type="primary"
+            @click="paramValue = ''; clearPlanePar(); publishFun(`{'getParam':'${paramItem}'}`);">读取</el-button>
+          <el-button size="medium" type="primary"
+            @click="publishFun(`{'setParam':{'item':'${paramItem}','value':'${paramValue}'}}`)">写入</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <!-- 底边 tab控件组 -->
+    <div class="flex column mr mac tabContainer p-l-10 p-r-10">
+      <!-- tab控件组 内容组 -->
+      <div class="tabContent" :class="{ 'active': activeIndex !== null }">
+        <!-- 订单任务 -->
+        <div v-if="activeIndex === 0" class="tabContentBox">
+          <!-- 标题 -->
+          <div class="clearB m-b-15 fb f-s-16 contentTit">
+            <i class="iconfont icon-dingdanguanli f-s-22 m-r-5"></i>
+            <span>送餐任务</span>
+          </div>
+          <!-- 内容 -->
+          <el-form label-position="left" ref="questForm" :model="questForm" label-width="80px">
+            <el-form-item label="订单选择" v-if="!executeOrder">
+              <el-select v-model="questForm.id" :filterable="isMobile" placeholder="请选择，也可输入搜索"
+                :disabled="executeOrder">
+                <el-option v-for="item in questList" :key="item.id" :label="item.id" :value="item.id"
+                  :class="isWaring(item) ? 'danger-color' : ''">
+                  <span class="l">{{ item.id }}</span>
+                  <span class="l m-l-5">{{ item.receiver }}</span>
+                  <span class="l m-l-5">{{ item.receive_site_name }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <template v-else>
+              <el-form-item v-if="waringTags.length > 0" label="提示">
+                <el-tag v-for="(tag, index) in waringTags" :key="index" class="m-r-5" type="warning">{{ tag }}</el-tag>
+              </el-form-item>
+              <el-form-item label="订单ID">
+                {{ executeOrder.id }}
+              </el-form-item>
+              <el-form-item label="收货站点">
+                {{ executeOrder.receive_site_name }}
+              </el-form-item>
+              <el-form-item label="联系电话">
+                {{ executeOrder.tel }}
+              </el-form-item>
+            </template>
+            <el-form-item label="飞机操作">
+              <el-button-group>
+                <!-- <el-button size="mini" class="f-s-14" v-if="Number(plane.planeState.questState) === 1" type="primary"
+                  icon="f-s-14 iconfont icon-chakanzhihangrizhi" @click="checkQuest">
+                  <font class="m-l-5">上传航点</font>
+                </el-button> -->
+                <el-button size="mini" class="f-s-14"
+                  v-if="Number(plane.planeState.questState) === 1 || Number(plane.planeState.questState) === 4"
+                  type="warning" icon="f-s-14 iconfont icon-chakanzhihangrizhi" @click="checkQuest">
+                  <font class="m-l-5">准备任务</font>
+                </el-button>
+                <el-button size="mini" class="f-s-14" v-else-if="Number(plane.planeState.questState) === 2"
+                  key="wirteBut" type="info" :loading="true" disabled>
+                  <font class="m-l-5">航点写入中···</font>
+                </el-button>
+                <el-button size="mini" class="f-s-14" v-else-if="Number(plane.planeState.questState) === 12" type="info"
+                  :loading="true" disabled>
+                  <font class="m-l-5">解锁中...</font>
+                </el-button>
+                <el-button size="mini" class="f-s-14" v-else-if="Number(plane.planeState.questState) === 20"
+                  type="success" icon="f-s-14 iconfont icon-yangshi_icon_tongyong_departure"
+                  @click="publishFun('{setQuestState:{bit:5,state:1}}'); speakText('执行送餐任务')">
+                  <font class="m-l-5">执行任务</font>
+                </el-button>
+                <el-button size="mini" class="f-s-14" v-else-if="isShipped" type="info" :loading="true" disabled>
+                  <font class="m-l-5">执行任务中...</font>
+                </el-button>
+              </el-button-group>
+            </el-form-item>
+            <el-form-item label="任务确认">
+              <el-button-group>
+                <el-button size="mini" class="f-s-14" type="danger" icon="iconfont icon-cuowu" key="celBUt"
+                  @click="reQuest">
+                  <font class="m-l-5">取消</font>
+                </el-button>
+                <el-button size="mini" class="f-s-14" type="success" icon="iconfont icon-qiandai" key="bingBut"
+                  @click="overQuest">
+                  <font class="m-l-5">已送达</font>
+                </el-button>
+              </el-button-group>
+            </el-form-item>
+          </el-form>
+        </div>
+        <!-- 飞机操作 -->
+        <div v-else-if="activeIndex === 1" class="tabContentBox">
+          <!-- 标题 -->
+          <div class="clearB m-b-15 fb f-s-16 contentTit">
+            <i class="iconfont icon-youxishoubing f-s-22 m-r-5"></i>
+            <span>飞机控制</span>
+          </div>
+          <div class="butIconBox gap10 flex">
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="publishFun('{unlock:1}'); speakText('解锁飞机')">
+              <i class="iconfont icon-jiesuo f-s-24"></i>
+              <div class="m-t-5">解锁</div>
+            </el-button>
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="confirmation('飞机加锁，螺旋桨将停转，请谨慎操作！', '加锁操作', '{lock:1}'); speakText('加锁,请注意安全')">
+              <i class=" iconfont icon-suoding f-s-24"></i>
+              <div class="m-t-5">加锁</div>
+            </el-button>
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="dialogVisible = true; dialogTitle = '高度设置'; dialogItem = 'takeoffBox'; speakText('设置起飞高度')">
+              <i class="iconfont icon-yangshi_icon_tongyong_departure f-s-24"></i>
+              <div class="m-t-5">起飞</div>
+            </el-button>
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="publishFun('{loiterMode:1}'); speakText('悬停')">
+              <i class="iconfont icon-fengzheng1 f-s-24"></i>
+              <div class="m-t-5">悬停</div>
+            </el-button>
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="publishFun('{autoMode:1}'); speakText('继续执行航线')">
+              <i class="iconfont icon-duandianxufei f-s-24"></i>
+              <div class="m-t-5">复航</div>
+            </el-button>
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="publishFun('{rtlMode:1}'); speakText('返航')">
+              <i class="iconfont icon-yijianfanhang f-s-24"></i>
+              <div class="m-t-5">返航</div>
+            </el-button>
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="publishFun('{landMode:1}'); speakText('降落')">
+              <i class="iconfont icon-yangshi_icon_tongyong_arriving f-s-24"></i>
+              <div class="m-t-5">降落</div>
+            </el-button>
+          </div>
+        </div>
+        <!-- 附加模组操作 -->
+        <div v-else-if="activeIndex === 2" class="tabContentBox">
+          <!-- 标题 -->
+          <div class="clearB m-b-15 fb f-s-16 contentTit">
+            <i class="iconfont icon-mianxingdiaogou f-s-22 m-r-5"></i>
+            <span>挂载仓控制</span>
+          </div>
+          <div class="butIconBox m-b-15 gap10 flex">
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="publishFun('{hookConteroller:4}'); pesoIsZero(); speakText('重置重量传感器')">
+              <i class="iconfont icon-zhongliang f-s-24"></i>
+              <div class="m-t-5">归零</div>
+            </el-button>
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="publishFun('{hookConteroller:0}'); speakText('收钩')">
+              <i class="iconfont icon-xiangshang f-s-24"></i>
+              <div class="m-t-5">收钩</div>
+            </el-button>
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="publishFun('{hookConteroller:3}'); speakText('继续放钩')">
+              <i class="iconfont icon-qiyong f-s-24"></i>
+              <div class="m-t-5">继续</div>
+            </el-button>
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="publishFun('{hookConteroller:2}'); speakText('暂停放钩')">
+              <i class="iconfont icon-xuanting-zanting f-s-24"></i>
+              <div class="m-t-5">暂停</div>
+            </el-button>
+          </div>
+          <!-- 标题 -->
+          <div class="clearB m-b-15 fb f-s-16 contentTit">
+            <i class="iconfont icon-shipinjiankong f-s-22 m-r-5"></i>
+            <span>摄像头控制</span>
+          </div>
+          <div class="butIconBox m-b-15 gap10 flex">
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="publishFun('{cameraController:{item:0,val:0}}'); speakText('摄像头一键回中')">
+              <i class="iconfont icon-icon-rotation f-s-24"></i>
+              <div class="m-t-5">回中</div>
+            </el-button>
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="publishFun('{cameraController:{item:2,val:0,yaw:0,pitch:-50}}'); speakText('摄像头一键俯瞰')">
+              <i class="iconfont icon-down f-s-24"></i>
+              <div class="m-t-5">俯瞰</div>
+            </el-button>
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="dialogVisible = true; dialogTitle = '摄像头控制'; dialogItem = 'cameraBox'; speakText('手动调整摄像头')">
+              <i class="iconfont icon-chukong f-s-24"></i>
+              <div class="m-t-5">手动</div>
+            </el-button>
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="dialogVisible = true; dialogTitle = '摄像头控制'; dialogItem = 'cameraBox'; speakText('调整镜头焦距')">
+              <i class="iconfont icon-fangda f-s-24"></i>
+              <div class="m-t-5">焦距</div>
+            </el-button>
+          </div>
+          <!-- 标题 -->
+          <div class="clearB m-b-15 fb f-s-16 contentTit">
+            <i class="iconfont icon-tongzhi f-s-22 m-r-5"></i>
+            <span>喇叭控制</span>
+          </div>
+          <div class="butIconBox gap10 flex">
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="dialogVisible = true; dialogTitle = '喊话参数'; dialogItem = 'talkBox';">
+              <i class="iconfont icon-icon-test f-s-24"></i>
+              <div class="m-t-5">喊话</div>
+            </el-button>
+          </div>
+        </div>
+        <!-- 飞机调试 -->
+        <div v-else-if="activeIndex === 3" class="tabContentBox">
+          <!-- 标题 -->
+          <div class="clearB m-b-15 fb f-s-16 contentTit">
+            <i class="iconfont icon-banshou_Line f-s-22 m-r-5"></i>
+            <span>飞机调试</span>
+          </div>
+          <div class="butIconBox m-b-15 gap10 flex">
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="publishFun('{resetCompass:1}'); dialogVisible = true; dialogTitle = '校准磁罗盘'; dialogItem = 'compassBox'; speakText('校准磁罗盘')">
+              <i class="iconfont icon-zhinanzhen f-s-24"></i>
+              <div class="m-t-5">磁罗盘</div>
+            </el-button>
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="publishFun('{initAcce:1}'); speakText('校准加速度计'); dialogVisible = true; dialogTitle = '校准加速度计'; dialogItem = 'acceBox';">
+              <i class="iconfont icon-zuobiaozhoupeizhixiang f-s-24"></i>
+              <div class="m-t-5">加速度计</div>
+            </el-button>
+            <el-button size="medium" type="primary" class="flex1 butIcon"
+              @click="speakText('读写参数'); dialogVisible = true; dialogTitle = '读写参数'; dialogItem = 'paramBox';">
+              <i class="iconfont icon-canshupeizhi f-s-24"></i>
+              <div class="m-t-5">读写参数</div>
+            </el-button>
+          </div>
+        </div>
+      </div>
+      <!-- tab控件组 按钮组 -->
+      <div class="flex gap10 m-b-10 taButGroup">
+        <div class="flex1 h-100 taBut flex column mac mc animation" :class="activeIndex === index ? 'taButBG' : ''"
+          v-for="(item, index) in controlItems" :key="index" @click="toggleContent(index, item.voice)">
+          <i :class="item.icon" class="iconfont f-s-35 no-select"></i>
+          <div class="m-t-15 fb f-s-18 no-select">{{ item.title }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { lockSite } from '@/utils/api/table'
+import mqtt from '@/utils/mqtt'
+import { speakText } from '@/utils/index'
+
+export default {
+  name: 'TabController',
+  data () {
+    return {
+      dialogTitle: '', // 弹出框 标题
+      dialogItem: '', // 弹出框 项目类型判断
+      dialogVisible: false, // 弹出框 显隐
+      pitchValue: 50, // 摄像头控制滑动条 俯仰值
+      yawValue: 50, // 摄像头控制滑动条 旋转值
+      scaleValue: 50, // 摄像头控制滑动条 焦距值
+      takeoffValue: 2, // 起飞高度
+      controlItems: [// 菜单
+        { title: '任务', icon: 'icon-songcanfuwu', voice: '设置送餐任务' },
+        { title: '控制', icon: 'icon-youxishoubing', voice: '控制飞机' },
+        { title: '扩展', icon: 'icon-linghuokuozhan', voice: '控制扩展组件' },
+        { title: '调试', icon: 'icon-banshou_Line', voice: '调试飞机' }
+      ],
+      activeIndex: null, // 当前选中的菜单
+      tabIsOpen: false, // 判断tab 是否弹出
+      questForm: { // 送餐任务表单
+        id: ''
+      },
+      waringTags: [], // 任务栏 提示标签 有退款 超重 等
+      paramItem: '', // 参数 键
+      paramValue: '', // 参数 值
+      talkValue: '', // 喊话参数
+      talkVolume: 9// 喊话音量
+    }
+  },
+  props: {
+    plane: {
+      type: Object,
+      deep: true
+    }
+  },
+  computed: {
+    /**
+     * @description: 终端平台是否是pc
+     */
+    isMobile () {
+      return this.$store.state.app.isMobile
+    },
+    /**
+     * @description: 已付款 已接单 未发起退款 订单列表
+     */
+    questList () {
+      const plane = this.plane
+      return plane ? this.$store.state.paidOrderList.filter((item) => item.shop_id === plane.shop_id && item.shipment_status === '已接单' && item.refund_status !== '申请中') : []
+    },
+    /**
+     * @description: 已发货 订单列表
+     */
+    ShippedList () {
+      const plane = this.plane
+      return plane ? this.$store.state.paidOrderList.filter((item) => item.shop_id === plane.shop_id && item.shipment_status === '已发货') : []
+    },
+    /**
+     * @description: 当前选框 中的订单
+     */
+    currentOrder () {
+      if (this.questForm && this.questForm.id !== undefined) {
+        return this.questList.find((item) => item.id === this.questForm.id) || null
+      }
+      return null
+    },
+    /**
+     * @description: 正在执行的订单 没有未null 代表飞机空闲
+     */
+    executeOrder () {
+      const plane = this.plane
+      if (plane) {
+        const order = this.ShippedList.find((item) => item.by_plane_id === plane.id)
+        return order && Object.keys(order).length === 0 ? null : order || null
+      }
+      return null
+    },
+    /**
+     * @description: 是否已经发货
+     */
+    isShipped () {
+      if (this.executeOrder) {
+        return this.executeOrder.shipment_status === '已发货'
+      }
+      return false
+    },
+    /**
+     * @description: 航线列表
+     */
+    routeList () {
+      return this.$store.state.routeList
+    },
+    /**
+     * @description: 获取站点列表
+     */
+    siteList () {
+      return this.$store.state.siteList
+    },
+    /**
+     * @description: 磁罗盘校准进度
+     */
+    completionPct () {
+      if (this.plane && this.plane.planeState && this.plane.planeState.completionPct) {
+        return Number(this.plane.planeState.completionPct)
+      }
+      return 0
+    },
+    /**
+     * @description: 磁罗盘校准结果
+     */
+    reportCal () {
+      if (this.plane && this.plane.planeState && this.plane.planeState.reportCal) {
+        return this.plane.planeState.reportCal
+      }
+      return null
+    },
+    /**
+     * @description:加速度计 状态
+     */
+    acceState () {
+      if (this.plane && this.plane.planeState && this.plane.planeState.acceState) {
+        return this.plane.planeState.acceState
+      }
+      return null
+    },
+    /**
+     * @description: 从飞控获取的参数键值对
+     */
+    parameterValue () {
+      if (this.plane && this.plane.planeState && this.plane.planeState.parameterValue) {
+        return this.plane.planeState.parameterValue
+      }
+      return null
+    }
+  },
+  methods: {
+    speakText,
+    /**
+     *关闭磁盘校准弹出窗口
+     */
+    handlerCloseCompassBox () {
+      this.dialogVisible = false
+      // 磁罗盘校准进度 校准结果 重置
+      this.plane.planeState.reportCal = null
+      this.plane.planeState.completionPct = 0
+    },
+    /**
+     *关闭磁盘校准弹出窗口
+     */
+    handlerCloseAcceBox () {
+      this.dialogVisible = false
+      // 加速度计校准状态 重置
+      this.plane.planeState.acceState = null
+    },
+    /** 弹出框 关闭事件回调 */
+    closeCallback () {
+      if (this.dialogItem === 'compassBox') { this.handlerCloseCompassBox() } else if (this.dialogItem === 'acceBox') { this.handlerCloseAcceBox() }
+    },
+    /** 弹出框 打开事件回调 */
+    openCallback () {
+      if (this.dialogItem === 'compassBox') { this.plane.planeState.reportCal = null }// 如果是校准磁罗盘 先重置校准结果
+    },
+    /**
+     * @description: 摄像头 滑动条松开
+     * @param {string} item 项目
+     */
+    releaseCameraSlider (item) {
+      if (item === 'pitch') {
+        this.pitchValue = 50
+        this.publishFun('{cameraController:{item:2,val:0,yaw:0,pitch:0}}')
+      } else if (item === 'yaw') {
+        this.yawValue = 50
+        this.publishFun('{cameraController:{item:2,val:0,yaw:0,pitch:0}}')
+      } else if (item === 'scale') {
+        this.publishFun('{cameraController:{item:1,val:0}}')
+        this.scaleValue = 50
+      }
+    },
+    /**
+     * @description: 摄像头 滑动条滚动 发送设置命令
+     * @param {*} item 项目
+     */
+    setCamera (item) {
+      if (item === 'pitch') { // 设置pitch轴
+        const pitchV = (this.pitchValue - 50) * 2
+        this.publishFun(`{cameraController:{item:2,yaw:0,pitch:${pitchV}}`)
+      } else if (item === 'yaw') { // 设置yaw轴
+        const yawV = (this.yawValue - 50) * 2
+        this.publishFun(`{cameraController:{item:2,yaw:${yawV},pitch:0}`)
+      } else if (item === 'scale') {
+        if (this.scaleValue < 50) { // 焦距放大
+          this.publishFun('{cameraController:{item:1,val:1}}')
+        } else if (this.scaleValue > 50) {
+          this.publishFun('{cameraController:{item:1,val:255}}')
+        }
+      }
+    },
+    /**
+     * @description: 菜单切换 PS:UI
+     * @param {*} index 序号
+     * @param {*} voice 播放声音的文本
+     */
+    toggleContent (index, voice) {
+      this.activeIndex = this.activeIndex === index ? null : index
+      if (this.tabIsOpen) {
+        if (index !== this.activeIndex) {
+          this.tabIsOpen = false
+          this.$emit('mapXOffset', 0, -200)
+        } else {
+          this.speakText(voice)
+        }
+      } else {
+        this.tabIsOpen = true
+        this.$emit('mapXOffset', 0, 200)
+        this.speakText(voice)
+      }
+    },
+    /**
+     * @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('与飞机通信未接通,请稍后')
+      }
+    },
+    /**
+     * @description: 控制飞机上的喇叭播放语音
+     * @param {*} val 播放文本
+     * @param {*} vol 播放音量 默认音量为1声音最小  范围1-9
+     */
+    playText (val, vol = 1) {
+      const jsonData = {
+        playText: {
+          val: val,
+          vol: parseInt(vol)
+        }
+      }
+      this.publishFun(JSON.stringify(jsonData))
+    },
+    /**
+ * @description: 监听重量传感器是否归零，8秒内 loadweight 进入±60 范围则语音播报
+ */
+    pesoIsZero () {
+      const timeout = 8000 // 最大监听时间 8 秒
+      const interval = 200 // 轮询间隔 200ms
+      const threshold = 60 // 正负60以内
+      let elapsed = 0
+
+      const checkInterval = setInterval(() => {
+        if (!this.plane || !this.plane.planeState) return
+
+        const weight = Number(this.plane.planeState.loadweight)
+        if (Math.abs(weight) <= threshold) {
+          this.playText('重量传感器已归零')
+          this.speakText('重量传感器已归零')
+          clearInterval(checkInterval) // 停止监听
+        }
+
+        elapsed += interval
+        if (elapsed >= timeout) {
+          clearInterval(checkInterval) // 超时后停止监听
+        }
+      }, interval)
+    },
+    /**
+     * @description: 执行任务前 先检测订单是否合法，例如：订单重量会不会超出飞机载重上限
+     */
+    checkQuest () {
+      let checkOrder // 要检查的订单
+      // 如果有正在执行的订单，检查正在执行的；否则检查当前选中的订单
+      if (this.executeOrder) {
+        checkOrder = this.executeOrder
+      } else {
+        checkOrder = this.currentOrder
+      }
+
+      // 检查是否选择了订单
+      if (this.questForm.id === '' && !checkOrder) {
+        this.$message.error('未选择订单任务!')
+        return
+      }
+
+      // 检查订单是否在退款状态
+      if (checkOrder.refund_status === '申请中') {
+        this.$message.error('此订单已被申请退款或者订单已经被取消!')
+        return
+      }
+
+      // 检查站点是否已经绑定任务航点
+      if (checkOrder.bind_route === null) {
+        this.$message.error('此站点，未绑定任务航点')
+        return
+      }
+
+      // 如果有正在执行的订单，直接调用重新提交
+      if (this.executeOrder) {
+        this.continueQuest()
+        return
+      }
+
+      /* 综合检查，针对新提交订单 */
+      // 飞机载重上限检查
+      const weightCheck = new Promise((resolve, reject) => {
+        if (Number(checkOrder.total_weight) >= Number(this.plane.weight_max)) {
+          // 如果订单总重超出飞机载重上限，显示确认弹窗
+          this.$confirm('此订单总重超出本飞机的载重上限', '检测订单', {
+            confirmButtonText: '继续',
+            cancelButtonText: '放弃',
+            type: 'warning'
+          })
+            .then(() => {
+              resolve() // 用户选择继续
+            })
+            .catch(() => {
+              this.$message({
+                type: 'info',
+                message: '取消提交订单'
+              })
+              reject(new Error('Weight check failed')) // 用户取消操作
+            })
+        } else {
+          resolve() // 如果重量没有超出限制，直接通过检查
+        }
+      })
+
+      // 检查站点是否有飞机正在执行
+      const runningCheck = weightCheck.then(() => {
+        return new Promise((resolve, reject) => {
+          if ((checkOrder.runing ?? '').split(',').some(item => item !== '')) {
+            // 如果站点已经有飞机在执行任务，显示确认弹窗
+            this.$confirm('此订单的目标站点，已经有飞机正在执行任务。请注意安全！', '检测订单', {
+              confirmButtonText: '继续',
+              cancelButtonText: '放弃',
+              type: 'warning'
+            })
+              .then(() => {
+                resolve() // 用户选择继续
+              })
+              .catch(() => {
+                this.$message({
+                  type: 'info',
+                  message: '取消提交订单'
+                })
+                reject(new Error('Running check failed')) // 用户取消操作
+              })
+          } else {
+            resolve() // 如果没有飞机正在执行任务，直接通过检查
+          }
+        })
+      })
+
+      // 选择订单检查并执行任务
+      runningCheck
+        .then(() => {
+          this.runQuest() // 如果所有检查通过，执行任务
+        })
+        .catch((error) => {
+          console.log(error.message) // 处理检查失败的情况
+        })
+    },
+    /** 等待上传完航点之后 解锁飞机 */
+    watchUnlock () {
+      // 使用 Vue 的 $watch 方法监听 planeState.questState 的变化
+      const unwatch = this.$watch(() => this.plane.planeState.questState, (newVal) => {
+        if (Number(newVal) === 4) { // 如果 questState 变为 4
+          this.publishFun('{unlock:1}') // 解锁飞机
+          unwatch() // 解除监听，防止多次触发
+        }
+      })
+    },
+    /**
+     * @description: 正在执行的任务 重新上传航线
+     */
+    continueQuest () {
+      /* 执行写在这里 */
+      let routeData // 航线数据内容
+      try {
+        /* 航线选择 */
+        const bindRoute = (this.executeOrder.bind_route ?? '').split(',')
+        const runing = (this.executeOrder.runing ?? '').split(',')
+        const matchingIndex = runing
+          .map((route, index) => route === this.executeOrder.by_plane_id ? index : -1)
+          .filter(index => index !== -1)// 找到注册飞机与绑定航线对应索引
+        routeData = this.routeList.find(element => element.id === bindRoute[matchingIndex]).route_data
+        routeData = JSON.parse(routeData)// 反序列化
+        // 处理声音航点 航点里面的表达式 如$food_sn$ 正则替换成订单对应的字段
+        this.executeOrder.telTail = this.executeOrder.tel.substr(-4)// 手动加一个手机尾号telTail字段 从 tel字段截取后四位
+        routeData.questAss.tasks.forEach((x, index) => {
+          if (x.sound) {
+            const str = this.voiceRouteParse(this.executeOrder, x.sound)
+            routeData.questAss.tasks[index].sound = str// 重新写入声音航点
+          }
+        })
+        routeData = JSON.stringify(routeData)// 重新序列化
+        this.publishFun(routeData) // 发送航点信息主题
+        this.watchUnlock()// 等待飞机写完航点 解锁飞机
+      } catch (error) {
+        this.$message.error('操作失败,航线异常')
+      }
+    },
+    /**
+     * @description: 选择订单的 执行订单任务 ps:改变订单状态 站点runing状态 上传航线
+     */
+    async runQuest () {
+      /* 插入日志 */
+      this.$store.dispatch('fetchLog', { content: `${this.plane.name} 开始执行 订单ID：${this.currentOrder.id}、叫餐号：${this.currentOrder.food_sn}号。` })
+      /* 执行写在这里 */
+      let routeData // 航线数据内容
+      let newRuning // 执行飞机注册后的 running字段信息
+      try {
+        /* 站点正在执行任务runing 注册 */
+        const runing = (this.currentOrder.runing ?? '').split(',')
+        let foundEmpty = false
+        let matchingIndex // 记录执行飞机注册的索引 此索引对应要使用的航线的索引
+
+        runing.some((item, index, arr) => {
+          if (item === '') {
+            arr[index] = this.plane.id
+            foundEmpty = true
+            matchingIndex = index
+            return true // 找到空位后退出循环
+          }
+        })
+
+        newRuning = runing.join(',')
+        if (!foundEmpty) {
+          this.$message({
+            type: 'warning',
+            message: '此站点所有航线均被占用，等航线空闲再试！'
+          })
+          return // 退出外层函数
+        }
+        /* 航线选择 */
+        const bindRoute = (this.currentOrder.bind_route ?? '').split(',')
+        routeData = this.routeList.find(element => element.id === bindRoute[matchingIndex]).route_data
+        routeData = JSON.parse(routeData)// 反序列化
+        // 处理声音航点 航点里面的表达式 如$food_sn$ 正则替换成订单对应的字段
+        this.currentOrder.telTail = this.currentOrder.tel.substr(-4)// 手动加一个手机尾号telTail字段 从 tel字段截取后四位
+        routeData.questAss.tasks.forEach((x, index) => {
+          if (x.sound) {
+            const str = this.voiceRouteParse(this.currentOrder, x.sound)
+            routeData.questAss.tasks[index].sound = str// 重新写入声音航点
+          }
+        })
+        routeData = JSON.stringify(routeData)// 重新序列化
+      } catch (error) {
+        this.$message.error('操作失败,航线异常')
+        return
+      }
+      // 站点表 和 订单表 同时修改 没问题 向飞机提交航点
+      const res = await lockSite({
+        site_id: this.currentOrder.receive_site_id,
+        shop_id: this.plane.shop_id,
+        runing: newRuning,
+        order_id: this.currentOrder.id,
+        shipment_status: '已发货',
+        by_plane_id: this.plane.id
+      })
+      if (res.data.status === 1) {
+        this.publishFun(routeData)// 发送航点信息主题
+        this.watchUnlock()// 等待飞机写完航点 解锁飞机
+      }
+    },
+    /**
+     * @description: 匹配声音航点字符串 比如$food_sn$ food_sn匹配成 送餐订单里面的对应字段
+     * @param {*} questItem 送餐的订单 ps:从数据库里拿的 订单信息对象
+     * @param {*} voiceRouteStr 声音航点的字符串
+     */
+    voiceRouteParse (questItem, voiceRouteStr) {
+      // 定义正则表达式
+      const regex = /\$(.*?)\$/g
+      // 使用replace()方法进行匹配和替换
+      const replacedStr = voiceRouteStr.replace(regex, (match, p1) => {
+        // match表示匹配到的字符串，p1表示捕获组中的内容
+        return questItem[p1] // 用捕获组的内容替换匹配到的字符串
+      })
+      // 输出替换后的字符串
+      return replacedStr // 输出 "请45号电话为13301115846的先生取餐"
+    },
+    /**
+     * @description: 确认操作
+     * @param {*}msg 提示的话语内容
+     * @param {*}tit 提示框的标题
+     * @param {*}instruct 需要发送的mqtt指令内容
+     */
+    confirmation (msg, tit, instruct) {
+      this.$confirm(msg, tit, {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.publishFun(instruct)
+      }).catch(() => {
+        this.$message.info('取消操作！')
+      })
+    },
+    /**
+     * @description: 取消任务
+     */
+    async reQuest () {
+      if (!this.executeOrder) { // 只有飞机锁定状态 才向下执行 "取消"操作
+        this.$message.warning('当前没有执行任务')
+        return
+      }
+      try {
+        const confirmation = await this.$confirm('确认货物未送达，取消已发货状态，并使飞机复位?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+
+        if (confirmation) {
+          // 分割字符串成数组
+          const runingArray = this.executeOrder.runing.split(',')
+          // 遍历数组并替换相等的值
+          for (let i = 0; i < runingArray.length; i++) {
+            if (runingArray[i] === this.executeOrder.by_plane_id) {
+              runingArray[i] = ''
+            }
+          }
+          // 将数组重新组合成字符串
+          const newRuning = runingArray.join(',')
+          // 站点表 和 订单表 同时修改 没问题 让飞机状态复位
+          const res = await lockSite({
+            site_id: this.executeOrder.receive_site_id,
+            shop_id: this.plane.shop_id,
+            runing: newRuning,
+            order_id: this.executeOrder.id,
+            shipment_status: '已接单',
+            by_plane_id: 'null'
+          })
+
+          if (res.data.status === 1) {
+            this.publishFun('{"resetQuestState":1}') // 发送设置飞机状态主题 状态设为闲置
+          }
+        }
+      } catch (error) {
+        this.$message.info('取消操作！')
+      }
+    },
+    /**
+ * @description: 已送达任务
+ */
+    async overQuest () {
+      if (!this.executeOrder) {
+        this.$message.warning('当前没有执行任务')
+        return
+      }
+
+      try {
+        const confirmation = await this.$confirm('确认货物已送达?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+
+        if (confirmation) {
+          // 分割字符串成数组
+          const runingArray = this.executeOrder.runing.split(',')
+          // 遍历数组并替换相等的值
+          for (let i = 0; i < runingArray.length; i++) {
+            if (runingArray[i] === this.executeOrder.by_plane_id) {
+              runingArray[i] = ''
+            }
+          }
+          // 将数组重新组合成字符串
+          const newRuning = runingArray.join(',')
+
+          // 站点表 和 订单表 同时修改 没问题 让飞机状态复位
+          const res = await lockSite({
+            site_id: this.executeOrder.receive_site_id,
+            shop_id: this.plane.shop_id,
+            runing: newRuning,
+            order_id: this.executeOrder.id,
+            shipment_status: '已送达',
+            by_plane_id: this.plane.id
+          })
+
+          if (res.data.status === 1) {
+            this.publishFun('{"resetQuestState":1}') // 发送设置飞机状态主题 状态设为闲置
+          }
+        }
+      } catch (error) {
+        console.error('Confirmation dialog error:', error)
+        this.$message.info('取消操作！')
+      }
+    },
+    /**
+     * @description: 在地图上绘制航线
+     */
+    makeRouteForMap () {
+      let bindRoute
+      let routeData
+      let found = false
+      this.siteList.some(item => {
+        const runing = (item.runing ?? '').split(',')
+        const index = runing.indexOf(this.plane.id.toString())
+        if (index !== -1) {
+          found = true
+          // 获取航点信息
+          if (item.bind_route !== null) { // 判断站点是否已经绑定站点
+            bindRoute = (item.bind_route ?? '').split(',')
+            this.$store.dispatch('fetchRouteList').then(res => { // 只能异步拿 虽然效率低一些
+              routeData = res.find(element => element.id === bindRoute[index]).route_data
+              this.$emit('makeRoute', JSON.parse(routeData))
+            })
+          } else {
+            this.$message.error('此站点，未绑定任务航点')
+          }
+          return true // 找到匹配项后退出循环
+        }
+        return false // 继续循环
+      })
+      if (!found) {
+        this.$message.error('未找到匹配的站点')
+      }
+    },
+    /**
+     * @description: 判断 已接订单下拉框 的任务 有疑问的 坐标集 class样式显示成红色
+     * @param {*} item 对应下拉框的任务
+     */
+    isWaring (item) {
+      const isOverWaight = Number(item.total_weight) >= Number(this.plane.weight_max)// 是否超重
+      const isQuestIng = (item.runing ?? '').split(',').some(i => i !== '') // 是否有飞机正在执行
+      return isOverWaight || isQuestIng
+    },
+    /**
+     * 设置执行订单 提示标签
+     * @param order 执行订单
+     */
+    setExecuteOrderTag (order) {
+      const aIndex = this.waringTags.indexOf('已申请退款')
+      const bIndex = this.waringTags.indexOf('已退款')
+      const cIndex = this.waringTags.indexOf('超出飞机载重')
+      const dIndex = this.waringTags.indexOf('站点多架执行')
+      // 退款提示
+      if (order.refund_status === '申请中') {
+        if (aIndex === -1) {
+          this.waringTags.push('已申请退款')
+        }
+      } else if (order.refund_status === '已同意') {
+        if (bIndex === -1) {
+          this.waringTags.push('已退款')
+        }
+      } else {
+        if (aIndex !== -1) {
+          this.waringTags.splice(aIndex, 1)
+        }
+        if (bIndex !== -1) {
+          this.waringTags.splice(bIndex, 1)
+        }
+      }
+      // 超出飞机载重 提示
+      if (Number(this.plane.weight_max) < Number(order.total_weight)) {
+        if (cIndex === -1) {
+          this.waringTags.push('超出飞机载重')
+        }
+      } else {
+        if (cIndex !== -1) {
+          this.waringTags.splice(cIndex, 1)
+        }
+      }
+      // 站点多飞机执行 提示
+      const splitArray = order.runing.split(',')// 分割执行任务的飞机s
+      const nonEmptyArray = splitArray.filter(item => item.trim() !== '')// 过滤掉空值
+      if (nonEmptyArray.length > 1) { // 不止一架
+        this.waringTags.push('站点多架执行')
+      } else {
+        if (dIndex !== -1) {
+          this.waringTags.splice(dIndex, 1)
+        }
+      }
+    },
+    // 飞机状态参数默认值 复位
+    clearPlanePar () {
+      // 调用 Vuex 的 mutation 更新对应飞机的 parameterValue
+      this.$store.commit('updateParameterValue', { planeId: this.$route.params.id, parameterValue: '{}' })
+    }
+  },
+  mounted () {
+    // 初始化
+    if (this.executeOrder) { // 有正在执行单点
+      // 设置提示标签
+      this.setExecuteOrderTag(this.executeOrder)
+      // 绘制地图
+      if (this.siteList.length > 0) {
+        this.makeRouteForMap()
+      } else {
+        setTimeout(() => {
+          this.makeRouteForMap()
+        }, 1000)
+      }
+    } else { // 没有执行订单
+      if (this.plane) {
+        this.publishFun('{"resetQuestState":1}')// 发送设置飞机状态主题 状态设为闲置
+      }
+    }
+  },
+  watch: {
+    executeOrder (val) {
+      if (val) {
+        /* 如果当前飞机正在执行任务 把航线绘制到地图上 */
+        if (this.siteList.length > 0) {
+          this.makeRouteForMap()
+        } else {
+          setTimeout(() => {
+            this.makeRouteForMap()
+          }, 1000)
+        }
+        /* 检查添加提示标签 */
+        this.setExecuteOrderTag(val)
+      } else {
+        this.$emit('clearRoute')// 如果没有执行任务 把地图上航线清除
+        this.publishFun('{"resetQuestState":1}')// 发送设置飞机状态主题 状态设为闲置
+      }
+    },
+    questList (val) {
+      /* 任务列表更新时 判断还有没有当前选择的id 没有就清空 */
+      const found = val.some(item => item.id === this.questForm.id)
+      if (!found) {
+        this.questForm.id = ''
+      }
+    },
+    // 监听parameterValue 对比飞控更新的 参数名 和 要读取的参数名一致 把值显示出来
+    parameterValue (val) {
+      // 反序列化 JSON 字符串
+      const parsed = JSON.parse(val)
+
+      // 假设 JSON 只有一个键值对，提取参数名和值
+      const key = Object.keys(parsed)[0] // 获取键名
+      const value = parsed[key] // 获取键对应的值
+
+      // 更新 data 中的 paramName 和 paramValue
+      if (key === this.paramItem) {
+        this.paramValue = value
+      }
+      this.paramName = key
+    }
+  },
+  destroyed () {
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/theme.scss";
+
+.danger-color {
+  color: $danger-color;
+  font-weight: bold;
+}
+
+.mainBox {
+  position: absolute;
+}
+
+.tabContainer {
+  width: 100%;
+  height: 100%;
+}
+
+.tabContent {
+  z-index: 90;
+  position: relative;
+  width: 100%;
+  border-radius: 10px;
+  max-width: 470px;
+  background-color: rgba(255, 255, 255, 0.8);
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
+  top: -50px;
+  opacity: 0;
+  transition: top 0.5s ease, opacity 1s ease;
+}
+
+.tabContent.active {
+  top: -10px;
+  opacity: 1;
+}
+
+.tabContentBox {
+  padding: 20px;
+}
+
+.contentTit i {
+  vertical-align: middle;
+}
+
+.butIconBox {
+  flex-wrap: wrap;
+  /* 允许换行 */
+  justify-content: flex-start;
+  /* 主轴对齐方式 */
+  align-content: space-around;
+  /* 多行在侧轴上的对齐方式 */
+}
+
+.butIcon {
+  border-radius: 10px;
+  text-align: center;
+  border: none;
+  margin-left: 0px !important;
+}
+
+.taButGroup {
+  position: relative;
+  width: 100%;
+  max-width: 470px;
+  height: 105px;
+  cursor: pointer;
+  z-index: 90;
+}
+
+@media (max-width: 480px) {
+  .taButGroup {
+    height: calc((100vw - 50px)/4);
+  }
+
+  .tabContainer {
+    width: 100vw;
+  }
+}
+
+.taBut {
+  color: $maintext-color;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 10px;
+  padding: 5px;
+  text-align: center;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
+}
+
+.taButBG {
+  color: $graylight-color;
+  background-color: $brand-color;
+}
+
+.gap10 {
+  gap: 10px;
+}
+</style>
diff --git a/src/components/SwarmStatus.vue b/src/components/SwarmStatus.vue
new file mode 100644
index 0000000..30c9342
--- /dev/null
+++ b/src/components/SwarmStatus.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="mainBox flex column no-select">
+    <!-- 心跳 -->
+    <div class="flex">
+      <div class="tag flex mac mc iconfont"
+        :class="online ? heartAnimation ? 'icon-heart online' : 'icon-heart1 online' : 'icon-xinsui offline'">
+      </div>
+    </div>
+    <!-- 锁定状态 -->
+    <div class="flex">
+      <div class="tag flex mac mc iconfont" :class="isLockState ? 'icon-suoding' : 'icon-jiesuo'">
+      </div>
+    </div>
+    <!-- 飞机模式 -->
+    <div class="flex">
+      <div v-if="getPlaneMode" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{ getPlaneMode }}</font>
+      </div>
+      <div class="tag flex mac mc iconfont icon-moshixuanze">
+      </div>
+    </div>
+    <!-- 卫星 -->
+    <div class="flex">
+      <div v-if="satCount" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{ fixType  }} {{ satCount }}颗</font>
+      </div>
+      <div class="tag flex mac mc iconfont icon-weixing">
+      </div>
+    </div>
+    <!-- 电池电压 -->
+    <div class="flex">
+      <div v-if="voltagBattery" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{ voltagBattery }}V</font>
+      </div>
+      <div class="tag flex mac mc iconfont icon-dianya1">
+      </div>
+    </div>
+    <!-- 电池电流 -->
+    <div class="flex">
+      <div v-if="currentBattery" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{ currentBattery }}A</font>
+      </div>
+      <div class="tag flex mac mc iconfont icon-dianliu">
+      </div>
+    </div>
+    <!-- 飞机高度 -->
+    <div class="flex">
+      <div v-if="positionAlt" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{ positionAlt }}米</font>
+      </div>
+      <div class="tag flex mac mc iconfont icon-gaodu">
+      </div>
+    </div>
+    <!-- 飞机对地速度 -->
+    <div class="flex">
+      <div v-if="groundSpeed" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{ groundSpeed }}米/秒</font>
+      </div>
+      <div class="tag flex mac mc iconfont icon-sudu">
+      </div>
+    </div>
+    <!-- 飞机载重 钩子状态 -->
+    <div class="flex">
+      <div v-if="loadweight" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{hookstatus}} {{ loadweight }}克</font>
+      </div>
+      <div class="tag flex mac mc iconfont icon-mianxingdiaogou">
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+
+export default {
+  name: 'PlaneStatus',
+  data () {
+    return {
+      /* 心跳 */
+      heartAnimation: false, // 控制心跳动画图标
+      online: false,
+      isOnlineSetTimeout: null
+    }
+  },
+  props: {
+    plane: {
+      type: Object,
+      deep: true
+    }
+  },
+  components: {
+  },
+  computed: {
+    // 心跳随机数
+    heartRandom () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.heartRandom
+      }
+      return null
+    },
+    // 锁定状态
+    isLockState () {
+      if (this.plane && this.plane.planeState) {
+        if (Number(this.plane.planeState.heartBeat) & 128) {
+          return false
+        }
+      }
+      return true
+    },
+    // 飞机模式
+    getPlaneMode () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.getPlaneMode
+      }
+      return null
+    },
+    // 卫星数
+    satCount () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.satCount
+      }
+      return null
+    },
+    // 定位状态
+    fixType () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.fixType
+      }
+      return null
+    },
+    // 电池电压
+    voltagBattery () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.voltagBattery
+      }
+      return null
+    },
+    // 电池电流
+    currentBattery () {
+      if (this.plane && this.plane.planeState) {
+        if (Number(this.plane.planeState.currentBattery) > 0) {
+          return this.plane.planeState.currentBattery
+        } else {
+          return 0
+        }
+      }
+      return null
+    },
+    // 飞机高度
+    positionAlt () {
+      if (this.plane && this.plane.planeState && this.plane.planeState.position.length > 0) {
+        const posLen = this.plane.planeState.position.length
+        return this.plane.planeState.position[posLen - 1][2]
+      }
+      return null
+    },
+    // 飞机对地速度
+    groundSpeed () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.groundSpeed
+      }
+      return null
+    },
+    // 钩子状态
+    hookstatus () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.hookstatus
+      }
+      return null
+    },
+    // 飞机载重
+    loadweight () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.loadweight
+      }
+      return null
+    }
+  },
+  watch: {
+    heartRandom: {
+      handler () {
+        console.log('心跳：', this.plane.heartBeat)
+        // 心跳动画
+        this.heartAnimation = true
+        setTimeout(() => {
+          this.heartAnimation = false
+        }, 500)
+        // 在线状态
+        if (this.isOnlineSetTimeout) { // 进入本次心跳 删除掉线计时 既以下会重新计时
+          clearInterval(this.isOnlineSetTimeout)
+        }
+        this.online = true
+        this.isOnlineSetTimeout = setTimeout(() => { // 计时10秒后 掉线
+          this.online = false
+        }, 10000)
+      }
+    }
+  },
+  methods: {
+
+  },
+  created () {
+  },
+  destroyed () {
+    if (this.isOnlineSetTimeout) {
+      clearInterval(this.isOnlineSetTimeout)
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/theme.scss";
+
+.mainBox {
+  position: absolute;
+  width: 29px;
+  top: 40px;
+  left: 10px;
+  z-index: 90;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+  background-color: white;
+  border-radius: 4px;
+}
+
+.mainBox .flex:not(:first-child) {
+  border-top: 1px solid #ddd;
+}
+
+.tag {
+  height: 29px;
+  min-width: 29px;
+  cursor: pointer;
+  border: 0;
+  font-size: 22px;
+}
+
+.plane-mode {
+  position: absolute;
+  left: 29px;
+  height: 29px;
+  display: flex;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.plane-mode-text {
+  display: inline-block;
+  white-space: nowrap; /* 防止内容换行 */
+}
+</style>