bug修复

package-lock.json

@@ -10,9 +10,9 @@
       "dependencies": {
         "axios": "^1.10.0",
         "core-js": "^3.8.3",
-        "element-ui": "^2.15.14",
         "flv.js": "^1.6.2",
         "save": "^2.9.0",
+        "vant": "^2.13.8",
         "vue": "^2.6.14",
         "vue-router": "^3.6.5",
         "vuex": "^3.6.2",
@@ -1602,7 +1602,6 @@
       "version": "7.27.6",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.27.6.tgz",
       "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -2155,11 +2154,20 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@vant/icons": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/@vant/icons/-/icons-3.0.2.tgz",
+      "integrity": "sha512-4OlRVMd0uiDtD9hgSISZW8hB95vU0fFtc41tQchRIyiXkR0tS+DydZOLb8/bQkithrNWhW7Uud38MbKjlJ9lJw=="
+    },
+    "node_modules/@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
     "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
-      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA==",
-      "dev": true
+      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA=="
     },
     "node_modules/@vue/babel-helper-vue-transform-on": {
       "version": "1.4.0",
@@ -4887,22 +4895,6 @@
       "integrity": "sha512-wObbz/ar3Bc6e4X5vf0iO8xTN8YAjN/tgiAOJLr7yjYFtP9wAjq8Mb5h0yn6kResir+VYx2DXBj9NNobs0ETSA==",
       "dev": true
     },
-    "node_modules/element-ui": {
-      "version": "2.15.14",
-      "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.14.tgz",
-      "integrity": "sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==",
-      "dependencies": {
-        "async-validator": "~1.8.1",
-        "babel-helper-vue-jsx-merge-props": "^2.0.0",
-        "deepmerge": "^1.2.0",
-        "normalize-wheel": "^1.0.1",
-        "resize-observer-polyfill": "^1.5.0",
-        "throttle-debounce": "^1.0.1"
-      },
-      "peerDependencies": {
-        "vue": "^2.5.17"
-      }
-    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -10588,6 +10580,21 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "node_modules/vant": {
+      "version": "2.13.8",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-2.13.8.tgz",
+      "integrity": "sha512-w5xDfQROoI2uIWjKVfng9sI+DOQYRZhWKdXj3flJQuay1+YJAxoooCI3COPgi+uazJwHrvF86CG6q/mCyVBRIA==",
+      "dependencies": {
+        "@babel/runtime": "7.x",
+        "@vant/icons": "^3.0.2",
+        "@vant/popperjs": "^1.1.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+        "vue-lazyload": "1.2.3"
+      },
+      "peerDependencies": {
+        "vue": ">= 2.6.0"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
@@ -10703,6 +10710,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "node_modules/vue-lazyload": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
+      "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
+    },
     "node_modules/vue-loader": {
       "version": "17.4.2",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.4.2.tgz",
@@ -12546,8 +12558,7 @@
     "@babel/runtime": {
       "version": "7.27.6",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.27.6.tgz",
-      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
-      "dev": true
+      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q=="
     },
     "@babel/template": {
       "version": "7.27.2",
@@ -13042,11 +13053,20 @@
         "@types/node": "*"
       }
     },
+    "@vant/icons": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/@vant/icons/-/icons-3.0.2.tgz",
+      "integrity": "sha512-4OlRVMd0uiDtD9hgSISZW8hB95vU0fFtc41tQchRIyiXkR0tS+DydZOLb8/bQkithrNWhW7Uud38MbKjlJ9lJw=="
+    },
+    "@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
-      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA==",
-      "dev": true
+      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA=="
     },
     "@vue/babel-helper-vue-transform-on": {
       "version": "1.4.0",
@@ -15078,19 +15098,6 @@
       "integrity": "sha512-wObbz/ar3Bc6e4X5vf0iO8xTN8YAjN/tgiAOJLr7yjYFtP9wAjq8Mb5h0yn6kResir+VYx2DXBj9NNobs0ETSA==",
       "dev": true
     },
-    "element-ui": {
-      "version": "2.15.14",
-      "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.14.tgz",
-      "integrity": "sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==",
-      "requires": {
-        "async-validator": "~1.8.1",
-        "babel-helper-vue-jsx-merge-props": "^2.0.0",
-        "deepmerge": "^1.2.0",
-        "normalize-wheel": "^1.0.1",
-        "resize-observer-polyfill": "^1.5.0",
-        "throttle-debounce": "^1.0.1"
-      }
-    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -19273,6 +19280,18 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vant": {
+      "version": "2.13.8",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-2.13.8.tgz",
+      "integrity": "sha512-w5xDfQROoI2uIWjKVfng9sI+DOQYRZhWKdXj3flJQuay1+YJAxoooCI3COPgi+uazJwHrvF86CG6q/mCyVBRIA==",
+      "requires": {
+        "@babel/runtime": "7.x",
+        "@vant/icons": "^3.0.2",
+        "@vant/popperjs": "^1.1.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+        "vue-lazyload": "1.2.3"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
@@ -19363,6 +19382,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-lazyload": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
+      "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
+    },
     "vue-loader": {
       "version": "17.4.2",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.4.2.tgz",

package.json

@@ -10,9 +10,9 @@
   "dependencies": {
     "axios": "^1.10.0",
     "core-js": "^3.8.3",
-    "element-ui": "^2.15.14",
     "flv.js": "^1.6.2",
     "save": "^2.9.0",
+    "vant": "^2.13.8",
     "vue": "^2.6.14",
     "vue-router": "^3.6.5",
     "vuex": "^3.6.2",

src/api/home.js

@@ -51,4 +51,13 @@ export function getDroneFlightTask(params) {
         method: 'get',
         params
     })
+}
+
+// 根据排队ID获取详情无人机飞行任务
+export function getDroneFlightTaskByQueueId(params) {
+    return request({
+        url: `/api/drone/getDroneFlightTaskByQueueId/${params.queueId}`,
+        method: 'get',
+        params
+    })
 }

src/components/LineUp.vue

@@ -1,18 +1,22 @@
 <template>
   <div>
-    <el-drawer
-      :visible.sync="show"
-      :before-close="close"
+    <!-- :before-close="close"
       direction="btt"
       round="20px"
       :withHeader="false"
-      size="auto"
+      size="auto" -->
+    <van-popup
+      v-model="show"
+      position="bottom"
+      :closeable="false"
+      safe-area-inset-bottom	
+      round
     >
       <div class="lineUp">
         <div class="title">
           <span>排队提醒</span>
           <div class="close" @click="close">
-             <i class="el-icon-close"></i>
+              <van-icon name="cross" size="20px" color="#666666"/>
           </div>
         </div>
         <img
@@ -43,7 +47,7 @@
           <div class="btn-item-confirm" @click="setflightStart">确认排队</div>
         </div>
       </div>
-    </el-drawer>
+    </van-popup>
   </div>
 </template>
 

src/components/OrderInfo.vue

@@ -1,237 +0,0 @@
-<template>
-  <div class="container">
-    <!-- 顶部导航栏 -->
-    <!-- <div class="navbar">
-      <div class="navbar-left" @click="handleBack()">
-        <img src="@/assets/back1.png" alt="" />
-      </div>
-      <div class="navbar-title">详情</div>
-    </div> -->
-    <div class="content-box">
-      <!-- 待使用状态 -->
-      <div class="topBox">
-        <div class="topBox_lab" v-if="form.orderStatus == 10">待使用</div>
-        <div
-          class="topBox_lab"
-          v-if="form.orderStatus == 20 && !form.refundStatus"
-        >
-          已完成
-        </div>
-      </div>
-
-      <!-- 订单内容 -->
-      <div class="topBox" style="padding: 0px">
-        <div class="item">
-          <!-- 商家信息 -->
-          <div class="item_t">
-            <img v-if="form.businessImage" :src="form.businessImage" />
-            <div>{{ form.businessName }}</div>
-          </div>
-
-          <!-- 商品信息 -->
-          <div class="item_c">
-            <div class="item_c_l">
-              <img
-                v-if="form.businessProductImage || form.businessImage"
-                :src="form.businessProductImage || form.businessImage"
-              />
-            </div>
-            <div class="item_c_r">
-              <div class="item_c_r_title">{{ form.businessProductName }}</div>
-              <div class="item_c_r_text" v-if="form.productDataJosn">
-                {{ form.productDataJosn.costIncluded }}
-              </div>
-              <div class="item_c_r_price">
-                <div class="item_c_r_price_r">X{{ form.buyQuantity }}</div>
-                <div class="item_c_r_price_l" v-if="form.sellingPrice">
-                  <span>{{ form.sellingPrice.split(".")[0] }}</span
-                  >.{{ form.sellingPrice.split(".")[1] }}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 合计金额 -->
-          <div class="item_c1">
-            <div class="item_c1_lab">合计：</div>
-            <div class="item_c1_val" v-if="form.orderAmount">
-              ￥ <span>{{ String(form.orderAmount).split(".")[0] }}</span
-              >.{{ String(form.orderAmount).split(".")[1] }}
-            </div>
-          </div>
-
-          <!-- 订单基本信息 -->
-          <div class="item_c2">
-            <div class="item_c2_item">
-              <div class="item_c2_item_lab">日期：</div>
-              <div class="item_c2_item_val">
-                {{
-                  form.orderTime
-                    ? form.orderTime.substr(0, 10).replace(/-/g, ".")
-                    : "--"
-                }}
-              </div>
-            </div>
-            <div class="item_c2_item">
-              <div class="item_c2_item_lab">购买数量：</div>
-              <div class="item_c2_item_val">x{{ form.buyQuantity }}</div>
-            </div>
-            <div class="item_c2_item">
-              <div class="item_c2_item_lab">游客信息：</div>
-              <div class="item_c2_item_val" v-if="form.refundOrderId">
-                {{ form.productOrder.productVisitor.visitorName }}，{{
-                  form.productOrder.productVisitor.visitorPhone
-                }}
-              </div>
-            </div>
-          </div>
-
-          <!-- 订单详细信息 -->
-          <div class="item_c2">
-            <div class="item_c2_title">订单信息</div>
-            <div class="item_c2_item">
-              <div class="item_c2_item_lab">订单编号：</div>
-              <div class="item_c2_item_val">{{ form.orderNumber }}</div>
-            </div>
-            <div class="item_c2_item">
-              <div class="item_c2_item_lab">订单创建时间：</div>
-              <div class="item_c2_item_val">
-                {{ form.orderTime ? form.orderTime.replace(/-/g, ".") : "--" }}
-              </div>
-            </div>
-            <div
-              class="item_c2_item"
-              v-if="
-                form.orderType == 0 &&
-                (form.orderStatus == 10 ||
-                  form.orderStatus == 20 ||
-                  form.refundStatus == 2 ||
-                  form.refundStatus == 1)
-              "
-            >
-              <div class="item_c2_item_lab">支付方式：</div>
-              <div class="item_c2_item_val">
-                <div v-if="form.payMethod == 'wechat'">微信支付</div>
-                <div v-if="form.payMethod == 'balance'">余额支付</div>
-              </div>
-            </div>
-            <div
-              class="item_c2_item"
-              v-if="
-                form.orderType == 0 &&
-                (form.orderStatus == 10 ||
-                  form.orderStatus == 20 ||
-                  form.refundStatus == 2 ||
-                  form.refundStatus == 1)
-              "
-            >
-              <div class="item_c2_item_lab">支付时间：</div>
-              <div class="item_c2_item_val" v-if="form.payTime">
-                {{ form.payTime ? form.payTime.replace(/-/g, ".") : "--" }}
-              </div>
-              <div class="item_c2_item_val" v-else-if="form.productOrder">
-                {{
-                  form.productOrder.payTime
-                    ? form.productOrder.payTime.replace(/-/g, ".")
-                    : "--"
-                }}
-              </div>
-              <div class="item_c2_item_val" v-else>
-                {{
-                  form.productDataJosn.payTime
-                    ? form.productDataJosn.payTime.replace(/-/g, ".")
-                    : "--"
-                }}
-              </div>
-            </div>
-          </div>
-
-          <div class="item_c2" v-if="takeOffObj.queueStatus">
-            <div class="item_c2_title">排队信息</div>
-            <template v-if="!takeOffObj.flightStatus">
-              <div class="item_c2_item">
-                <div class="item_c2_item_lab">排队人员：</div>
-                <div class="item_c2_item_val">
-                  {{ takeOffObj.currentMyNum }}
-                </div>
-              </div>
-              <div class="item_c2_item">
-                <div class="item_c2_item_lab">等候时间：</div>
-                <div class="item_c2_item_val">
-                  {{ takeOffObj.waitMyTime }}分钟
-                </div>
-              </div>
-              <div class="line_up_btn" @click="getFlightCancelt">
-                <i class="el-icon-remove-outline"></i>
-                <span class="text">取消排队</span>
-              </div>
-            </template>
-            <div class="item_c2_item_prompt" v-else>
-              <img
-                src="https://wrj-songlanyn.oss-cn-beijing.aliyuncs.com/static/img/icon_1.png"
-                mode=""
-              />
-              <div class="text">
-                请尽快操作起飞，3分钟内未起飞将取消资格，取消后需要重新操作排队
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 底部按钮 -->
-      <div
-        class="btnBox1"
-        v-if="
-          form.orderStatus == 10 &&
-          takeOffObj.flightStatus != null &&
-          (takeOffObj.flightStatus || !takeOffObj.queueStatus)
-        "
-      >
-        <!-- <div
-          class="btnBox_l"
-          @click="goPath('/pages/order/applicationDrawback')"
-        >
-          申请退款
-        </div> -->
-        <div
-          class="btnBox_r"
-          v-if="takeOffObj.flightStatus"
-          @click="setTakeOff()"
-        >
-          起飞拍摄
-        </div>
-        <div
-          class="btnBox_r"
-          v-if="!takeOffObj.flightStatus && !takeOffObj.queueStatus"
-          @click="lineUpRefClick()"
-        >
-          排队起飞
-        </div>
-      </div>
-    </div>
-    <LineUp ref="lineUpRef" @success="getFlightListAll()" />
-  </div>
-</template>
-
-<script>
-// import { defineComponent } from '@vue/composition-api'
-
-export default {
-    props: {
-        takeOffObj: {
-            type: Object,
-            default: () => {},
-        },
-        form: {
-            type: Object,
-            default: () => {},
-        },
-    },
-    data() {
-        return {
-            
-        }
-    },
-}
-</script>

src/components/VideoCom.vue

@@ -1,303 +0,0 @@
-<template>
-  <div class="video-container" :style="style">
-    <div class="container-title" :style="{ width: height + 'px' }">
-      <div class="title-left" @click.stop="back()">
-        <img src="@/assets/back1.png" alt="" />
-        <div class="title-text">{{ orderInfo.businessName }}</div>
-      </div>
-      <div class="title-right">
-        <img src="@/assets/dianliang.png" alt="" />
-        <span class="percent">98%</span>
-        <span class="time">{{ currentTime }}</span>
-      </div>
-    </div>
-    <!-- 飞行数据覆盖层 -->
-    <div class="flight-data">
-      <div class="data-row">
-        <div class="data-item">D {{ horizontalDistance }}m</div>
-        <div class="data-item">H {{ altitude }}m</div>
-      </div>
-      <div class="data-row">
-        <div class="data-item">H.S {{ horizontalSpeed }}m/s</div>
-        <div class="data-item">V.S {{ verticalSpeed }}m/s</div>
-      </div>
-    </div>
-    <div class="video-box">
-      <video
-        id="videoElement"
-        controls
-        :width="height + 'px'"
-        :height="width + 'px'"
-        ref="videoRef"
-        x5-video-player-type="x5"
-      ></video>
-    </div>
-  </div>
-</template>
-
-<script>
-import flvjs from "flv.js";
-import { getDroneFlightTask, flightTakeOff } from "@/api/home";
-export default {
-  name: "App",
-  data() {
-    return {
-      liveUrl: "",
-      width: 0,
-      height: 0,
-      currentTime: "",
-      altitude: 100,
-      horizontalDistance: 0,
-      horizontalSpeed: 0,
-      verticalSpeed: 0,
-      timer: null,
-      dronePosition: {
-        lat: 39.9042,
-        lng: 116.4074,
-      },
-      flvPlayer: null,
-      flightTaskUuid: null,
-    };
-  },
-  computed: {
-    style() {
-      return {
-        width: this.width + "px",
-        height: this.height + "px",
-      };
-    },
-    orderInfo() {
-      return this.$store.state.orderInfo || {};
-    },
-  },
-  created() {
-    console.log("this.$router==>", this.$route.query);
-    this.width = this.$store.state.width;
-    this.height = this.$store.state.height;
-
-    this.$store.commit("SET_APP_VERSION", {
-      type: "currentPage",
-      value: 2,
-    });
-    
-    this.$store.commit("SET_APP_VERSION", {
-      type: "router",
-      value: this.$router,
-    });
-
-    if (this.$route.query.flightTaskUuid) {
-      this.getLiveStreamUrl();
-      // 更新时间
-      this.updateTime();
-    } else {
-      // this.$message.error("参数错误");
-      // setTimeout(() => {
-      //   this.$router.back();
-      // }, 1000);
-    }
-  },
-  mounted() {
-    // 启动定时器更新时间和模拟飞行数据
-    this.startTimeUpdate();
-    // this.simulateFlightData();
-  },
-  methods: {
-    initPlayer() {
-      if (flvjs.isSupported()) {
-        const videoElement = document.getElementById("videoElement");
-        const flvPlayer = flvjs.createPlayer({
-          type: "flv",
-          url: this.liveUrl, // 替换为你的直播流URL
-          enableStashBuffer: true, // 启用缓冲优化
-          stashInitialSize: 128, // 初始缓冲大小（单位KB）
-          isLive: true, // 表示这是一个直播流
-        });
-        // setTimeout(() => {
-        //   console.log("videoRef==>", this.$refs.videoRef);
-        // }, 1000);
-        try {
-          flvPlayer.attachMediaElement(videoElement);
-          flvPlayer.load(); // 加载视频流
-          flvPlayer.play(); // 开始播放视频流
-        } catch {}
-      } else {
-        // alert("当前浏览器不支持FLV.js");
-      }
-    },
-    getLiveStreamUrl() {
-      const loading = this.$loading({
-        lock: true,
-        text: "准备中请稍等",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
-      // 实际项目中应该从API获取直播流地址
-      // 这里使用模拟数据
-      getDroneFlightTask({
-        flightTaskUuid: this.$route.query.flightTaskUuid,
-      })
-        .then((res) => {
-          loading.close();
-          if (res.code == 200 && res.data) {
-            this.info = res.data;
-            if (
-              res.data.startStreamConvert &&
-              res.data.startStreamConvert.videoUrl
-            ) {
-              this.liveUrl = res.data.startStreamConvert.videoUrl + ".flv";
-              try {
-                this.initPlayer();
-              } catch {}
-            }
-          }
-        })
-        .catch((err) => {
-          loading.close();
-          this.back();
-        });
-    },
-    getQueryParam(paramName) {
-      const urlParams = new URLSearchParams(window.location.search);
-      return urlParams.get(paramName);
-    },
-    updateTime() {
-      const now = new Date();
-      const year = now.getFullYear();
-      const month = String(now.getMonth() + 1).padStart(2, "0");
-      const day = String(now.getDate()).padStart(2, "0");
-      const hours = String(now.getHours()).padStart(2, "0");
-      const minutes = String(now.getMinutes()).padStart(2, "0");
-      const seconds = String(now.getSeconds()).padStart(2, "0");
-      this.currentTime = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
-    },
-    startTimeUpdate() {
-      this.timer = setInterval(() => {
-        this.updateTime();
-      }, 1000);
-    },
-    simulateFlightData() {
-      // 模拟飞行数据变化
-      setInterval(() => {
-        this.altitude = Math.floor(Math.random() * 10) + 95;
-        this.horizontalDistance = Math.floor(Math.random() * 5);
-        this.horizontalSpeed = (Math.random() * 0.5).toFixed(1);
-        this.verticalSpeed = (Math.random() * 0.5).toFixed(1);
-      }, 2000);
-    },
-    back(){
-      this.$router.push(`/?orderNumber=${this.$store.state.orderInfo.orderNumber}`);
-    }
-  },
-  beforeDestroy() {
-    // 清除定时器
-    if (this.timer) {
-      clearInterval(this.timer);
-    }
-    if (this.flvPlayer) {
-      this.flvPlayer.destroy(); // 销毁播放器实例，清理资源
-    }
-  },
-};
-</script>
-
-<style scoped>
-.video-container {
-  box-sizing: border-box;
-  overflow: hidden;
-  position: relative;
-  margin: 0 !important;
-  padding: 0;
-}
-.container-title {
-  position: absolute;
-  top: calc(50% - 20px);
-  left: -30px;
-  /* width: 100%; */
-  box-sizing: border-box;
-  background-color: rgba(0, 0, 0, 0.5);
-  padding: 10px 20px 10px 5px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: #ffffff;
-  font-size: 14px;
-  z-index: 20000;
-  transform: rotate(90deg);
-}
-.container-title .title-right {
-  flex-shrink: 0;
-  margin-left: 10px;
-  display: flex;
-  align-items: center;
-}
-.container-title .title-left {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-}
-
-.container-title .title-left img {
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  margin-right: 5px;
-}
-
-.container-title .title-left .title-text {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  box-sizing: border-box;
-}
-
-.container-title .title-right img {
-  width: 20px;
-  height: 20px;
-  margin-right: 5px;
-}
-
-.container-title .title-right .time {
-  margin-left: 10px;
-}
-
-.flight-data {
-  position: absolute;
-  bottom: 50%;
-  left: -25%;
-  width: 100%;
-  padding: 0;
-  box-sizing: border-box;
-  z-index: 20000;
-
-  transform: rotate(90deg);
-  color: #ffffff;
-}
-.flight-data .data-row {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.flight-data .data-item {
-  min-width: 35%;
-  text-align: center;
-  margin-bottom: 10px;
-}
-.video-box {
-  transform: rotate(90deg);
-  box-sizing: border-box;
-  margin: 0;
-}
-#videoElement {
-  display: block;
-  object-fit: fill; /* 使用cover或fill */
-  margin: 0 !important;
-  z-index: 900;
-  position: relative;
-  /* position: absolute;
-  left: 0;
-  bottom: 0; */
-}
-</style>

src/main.js

@@ -2,10 +2,14 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
-Vue.use(ElementUI);
-Vue.config.productionTip = false
+
+import Vant from 'vant';
+import 'vant/lib/index.css';
+
+Vue.use(Vant);
+
+Vue.config.productionTip = false;
+
 
 new Vue({
   router,

src/store/index.js

@@ -1,8 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import WebSocketUtil from '@/utils/WebSocketUtil';
-// import Router from '@/router'
-import { Message, MessageBox } from 'element-ui';
+import { Toast, Dialog } from 'vant';
 Vue.use(Vuex)
 
 export default new Vuex.Store({
@@ -13,6 +12,7 @@ export default new Vuex.Store({
     height: 0,
     apiToken: "",
     webSocket: WebSocketUtil,
+    // wsUrl: "ws://192.168.0.19:9002/socket/flight",
     wsUrl: "ws://192.168.0.151:9002/socket/flight",
     userId: '',  // 用户名称
     orderInfo: null, // 订单信息
@@ -20,9 +20,16 @@ export default new Vuex.Store({
     loading: null,  // loading
     taskNum: 0,  // 重新创建任务次数
     takeOffShow: false,  // 是否可以起飞
-    flightData: {
 
+    flightData: {
+      capacityPercent: 100, // 电池的总剩余电量
+      homeDistance: 0, //与起飞点的水平距离
+      height: 0, // 绝对高度
+      verticalSpeed: 0,  // 垂直速度
+      horizontalSpeed: 0,  // 水平速度
+      quality: 0,  // 网络质量 0:无信号 1:差 2:较差 3:一般 4:较好 5:好
     },  // 无人机飞行数据
+
     currentPage: 1, // 1: 订单详情页，2：无人机详情页
     router: null,  // 路由数据
 
@@ -44,7 +51,7 @@ export default new Vuex.Store({
     },
     // 初始化WebSocket
     initWebSocketUtil({ commit }, value) {
-      console.log('初始化WebSocket', this.$router)
+      // console.log('初始化WebSocket', this.$router)
       // console.log('初始化WebSocket', this.state.orderInfo)
       // return
       if (this.state.status != 0) return;
@@ -53,7 +60,7 @@ export default new Vuex.Store({
       // console.log('11111');
       this.state.status = 1; // 标记为连接中
       const url = `${this.state.wsUrl}/${this.state.orderInfo.businessProductId}/${this.state.userId}`
-      console.log('初始化WebSocket_url', url)
+      // console.log('初始化WebSocket_url', url)
       // 初始化WebSocket
       this.state.webSocket.init({
         url,
@@ -69,13 +76,14 @@ export default new Vuex.Store({
       // 连接打开事件
       this.state.webSocket.addEventListener('open', (event) => {
         this.state.status = 2;
+        // Toast('WebSocket连接已打开');
         // console.log('WebSocket连接已打开');
         // this.addMessage('system', '连接已建立');
       });
 
       // 消息接收事件
       this.state.webSocket.addEventListener('message', ({ data }) => {
-        console.log('收到消息:', data);
+        // console.log('收到消息:', data);
         // 如果是心跳消息
         if (data && data.type === 'heartbeat') {
           // this.lastHeartbeat = this.formatTime(new Date());
@@ -84,72 +92,80 @@ export default new Vuex.Store({
         }
         // 排队完成可以起飞 
         if (data.msgType == 1) {
-          // if (this.state.loading) this.state.loading.close();
+          // Toast('可以起飞');
+          // if (this.state.loading) this.state.loading.clear();
           // this.state.loading = null;
           // Router.push(`/droneOperation?flightTaskUuid=${this.state.flightTaskUuid}`);
-          this.state.takeOffShow = true;
+          setTimeout(() => {
+            this.state.takeOffShow = true;
+          }, 1000);
         }
         // 飞行结束
         if (data.msgType == 2) {
-          Message.success('飞行结束，即将退出');
+          Toast('飞行结束，即将退出');
           setTimeout(() => {
-            this.state.router.replace(`/?orderNumber=${this.state.orderInfo.orderNumber}`);
+            this.state.router.replace(`/?orderNumber=${this.state.orderInfo.orderNumber}&t=${new Date().getTime()}`);
           }, 1000);
           this.dispatch('disconnect');
         }
         // 创建任务失败，是否重新创建
         if (data.msgType == 3) {
-          console.log('当前页面', this.state.currentPage);
           if (this.state.currentPage == 2) {
-            // Message.error('飞行任务创建失败');
+            // Toast('飞行任务创建失败');
             setTimeout(() => {
-              console.log('this.state.router===>', this.state.router);
-              console.log('window.history===>', window.history.length);
-              console.log('router.getRoutes===>', this.state.router.getRoutes());
               try {
-                if (window.history.length > 1) {
-                  // this.state.router.go(-1);
-                  // this.state.router.back();
-                  // this.state.router.replace('/droneOperation')
-                  // window.location.back();
-                  this.state.router.replace(`/?orderNumber=${this.state.orderInfo.orderNumber}`);
-                } else {
-                  this.state.router.replace(`/?orderNumber=${this.state.orderInfo.orderNumber}`);
-                }
+                this.state.router.replace(`/?orderNumber=${this.state.orderInfo.orderNumber}&t=${new Date().getTime()}`);
               } catch (e) {
                 console.log(e);
               }
             }, 2000);
             return
           }
-          MessageBox.confirm('飞行任务创建失败，是否重新创建飞行任务？', '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
+
+          Dialog.confirm({
+            title: '提示',
+            message: '飞行任务创建失败，是否重新创建飞行任务？',
           }).then(() => {
             this.state.taskNum++;
           }).catch(() => {
             this.state.taskNum = 0;
             if (this.state.currentPage == 2) {
               // this.state.router.back();
-              this.state.router.replace(`/?orderNumber=${this.state.orderInfo.orderNumber}`);
+              this.state.router.replace(`/?orderNumber=${this.state.orderInfo.orderNumber}&t=${new Date().getTime()}`);
             }
           });
         }
         // 飞行任务创建结束，可以起飞
         if (data.msgType == 4) {
           this.state.taskNum = 0;
-          if (this.state.loading) this.state.loading.close();
+          if (this.state.loading) this.state.loading.clear();
           this.state.loading = null;
-          // Message.success('飞行任务创建成功，即将起飞');
+          // Toast('飞行任务创建成功，即将起飞');
           // this.state.router.replace(`/droneOperation?flightTaskUuid=${this.state.flightTaskUuid}&t=${new Date().getTime()}`);
-          console.log("flightTaskUuid===》", this.state.flightTaskUuid);
-          console.log("跳转页面vuex====>")
-          this.state.router.push(`/droneOperation?t=${new Date().getTime()}&flightTaskUuid=${this.state.flightTaskUuid}`);
+          if (this.state.flightTaskUuid == '') {
+
+            return
+          }
+          // console.log("flightTaskUuid===》", this.state.flightTaskUuid);
+          // console.log("跳转页面vuex====>")
+          this.state.router.replace(`/droneOperation?t=${new Date().getTime()}&flightTaskUuid=${this.state.flightTaskUuid}`);
         }
 
+        // 收到无人机数据
         if (data.msgType == 10) {
+          if (data.data) {
+            let obj = JSON.parse(data.data) || {};
+            // console.log('obj==>', obj);
+            let flightData = this.state.flightData;
+            if (obj.battery && obj.battery.capacityPercent != null) flightData.capacityPercent = obj.battery.capacityPercent;
+            if (obj.homeDistance) flightData.homeDistance = obj.homeDistance;
+            if (obj.height) flightData.height = obj.height;
+            if (obj.verticalSpeed) flightData.verticalSpeed = obj.verticalSpeed;
+            if (obj.horizontalSpeed) flightData.horizontalSpeed = obj.horizontalSpeed;
+            if (obj.networkState && obj.networkState.quality != null) flightData.quality = obj.networkState.quality;
 
+            this.state.flightData = flightData;
+          }
         }
 
         // 普通消息
@@ -160,11 +176,13 @@ export default new Vuex.Store({
       this.state.webSocket.addEventListener('error', (event) => {
         this.status = 0;
         console.log('WebSocket连接错误:', event);
+        // Toast('WebSocket连接错误');
       });
 
       // 关闭事件
       this.state.webSocket.addEventListener('close', (event) => {
         this.state.status = 0;
+        // Toast('WebSocket连接关闭');
         console.log('WebSocket连接关闭:', event);
       });
     },

src/utils/request.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { Notification, MessageBox, Message, Loading } from 'element-ui'
+import { Toast, Dialog } from 'vant';
 import errorCode from '@/utils/errorCode'
 import { tansParams } from "@/utils/index";
 import wx from "weixin-js-sdk";
@@ -55,16 +55,15 @@ service.interceptors.response.use(res => {
   }
 
   if (code === 500) {
-    Message({
-      message: msg,
-      type: 'error',
-      duration: 5 * 1000
-    })
+    // Message({
+    //   message: msg,
+    //   type: 'error',
+    //   duration: 5 * 1000
+    // })
+    Toast(msg)
     return Promise.reject(msg)
   } else if (code !== 200) {
-    Notification.error({
-      title: msg
-    })
+    Toast(msg)
     // 判断是否需要返回到登录页面重新登录
     if ([401].includes(code)) {
       wx.miniProgram.reLaunch({
@@ -88,11 +87,12 @@ service.interceptors.response.use(res => {
     else if (message.includes("Request failed with status code")) {
       message = "系统接口" + message.substr(message.length - 3) + "异常";
     }
-    Message({
-      message: message,
-      type: 'error',
-      duration: 5 * 1000
-    })
+    // Message({
+    //   message: message,
+    //   type: 'error',
+    //   duration: 5 * 1000
+    // })
+    Toast(message)
     return Promise.reject(error)
   }
 )

src/views/DroneOperation.vue

@@ -7,19 +7,19 @@
       </div>
       <div class="title-right">
         <img src="@/assets/dianliang.png" alt="" />
-        <span class="percent">98%</span>
+        <span class="percent">{{ flightData.capacityPercent }}%</span>
         <span class="time">{{ currentTime }}</span>
       </div>
     </div>
     <!-- 飞行数据覆盖层 -->
     <div class="flight-data">
       <div class="data-row">
-        <div class="data-item">D {{ horizontalDistance }}m</div>
-        <div class="data-item">H {{ altitude }}m</div>
+        <div class="data-item">D {{ flightData.homeDistance }}m</div>
+        <div class="data-item">H {{ flightData.height }}m</div>
       </div>
       <div class="data-row">
-        <div class="data-item">H.S {{ horizontalSpeed }}m/s</div>
-        <div class="data-item">V.S {{ verticalSpeed }}m/s</div>
+        <div class="data-item">H.S {{ flightData.horizontalSpeed }}m/s</div>
+        <div class="data-item">V.S {{ flightData.verticalSpeed }}m/s</div>
       </div>
     </div>
     <div class="video-box">
@@ -39,6 +39,8 @@
 <script>
 import flvjs from "flv.js";
 import { getDroneFlightTask, flightTakeOff } from "@/api/home";
+import { Toast, Dialog } from "vant";
+
 export default {
   name: "App",
   data() {
@@ -47,10 +49,6 @@ export default {
       width: 0,
       height: 0,
       currentTime: "",
-      altitude: 100,
-      horizontalDistance: 0,
-      horizontalSpeed: 0,
-      verticalSpeed: 0,
       timer: null,
       dronePosition: {
         lat: 39.9042,
@@ -58,6 +56,7 @@ export default {
       },
       flvPlayer: null,
       flightTaskUuid: null,
+      reconnectNum: 0,  // 直播重连次数
     };
   },
   computed: {
@@ -70,9 +69,12 @@ export default {
     orderInfo() {
       return this.$store.state.orderInfo || {};
     },
+    flightData() {
+      return this.$store.state.flightData || {};
+    },
   },
   created() {
-    console.log("this.$router==>", this.$route);
+    // console.log("this.$router==>", this.$route);
     this.width = this.$store.state.width;
     this.height = this.$store.state.height;
 
@@ -100,25 +102,11 @@ export default {
   mounted() {
     // 启动定时器更新时间和模拟飞行数据
     this.startTimeUpdate();
-    // this.simulateFlightData();
-    // this.$router.removeRoute('OrderDetails')
   },
-  // watch: {
-  //   $route(to, from) {
-  //     console.log("from==>", from);
-  //     console.log("to==>", to);
-  //     console.log("this.$route==>", this.$route);
-  //     if (from) {
-  //       this.$nextTick(() => {
-  //         this.$router.removeRoute(from.name);
-  //       });
-  //     }
-  //   },
-  // },
   methods: {
     initPlayer() {
-      console.log("initPlayer==>", 222222222);
-      console.log("flvjs.isSupported()==>", flvjs.isSupported());
+      // console.log("initPlayer==>", 222222222);
+      // console.log("flvjs.isSupported()==>", flvjs.isSupported());
       if (flvjs.isSupported()) {
         const videoElement = document.getElementById("videoElement");
         const flvPlayer = flvjs.createPlayer({
@@ -133,17 +121,21 @@ export default {
         //   console.log("videoRef==>", this.$refs.videoRef);
         // }, 1000);
         if (flvPlayer) {
-          flvPlayer.on(flvjs.Events.ERROR,  (eventType, detail)=> {
+          flvPlayer.on(flvjs.Events.ERROR, (eventType, detail) => {
             console.log("Error type:", eventType);
             console.log("Error detail:", detail);
-            if(eventType == 'NetworkError') this.flvPlayer.pause();
+            if (eventType == "NetworkError") {
+              this.flvPlayer.pause();
+              this.retryConnect(5000);
+            }
           });
-          flvPlayer.on(flvjs.Events.LOADING_COMPLETE,  (eventType, detail)=> {
+          flvPlayer.on(flvjs.Events.LOADING_COMPLETE, (eventType, detail) => {
             console.log("MEDIA_INFO111111:", eventType);
             console.log("MEDIA_INFO detail:", detail);
             // if(eventType == 'NetworkError') this.flvPlayer.pause();
+            this.reconnectNum = 0;
             flvPlayer.play(); // 开始播放视频流
-            
+            flvPlayer.volume(1);
           });
           try {
             flvPlayer.attachMediaElement(videoElement);
@@ -154,12 +146,22 @@ export default {
         // alert("当前浏览器不支持FLV.js");
       }
     },
+    // 当直播断开后重新加载直播，单次最高重连五次，每次失败五秒后重连
+    retryConnect(delay) {
+      if (this.reconnectNum > 5) {
+        return;
+      }
+      this.reconnectNum++;
+      setTimeout(() => {
+        // console.log("Retrying connection...");
+        this.initPlayer(); // 尝试重新连接
+      }, delay);
+    },
     getLiveStreamUrl() {
-      const loading = this.$loading({
-        lock: true,
-        text: "准备中请稍等",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)",
+      const loading = Toast.loading({
+        duration: 0, // 持续展示 toast
+        forbidClick: true,
+        message: "准备中请稍等",
       });
       // 实际项目中应该从API获取直播流地址
       // 这里使用模拟数据
@@ -167,7 +169,7 @@ export default {
         flightTaskUuid: this.$route.query.flightTaskUuid,
       })
         .then((res) => {
-          loading.close();
+          loading.clear();
           if (res.code == 200 && res.data) {
             this.info = res.data;
             if (
@@ -182,7 +184,7 @@ export default {
           }
         })
         .catch((err) => {
-          loading.close();
+          loading.clear();
           this.back();
         });
     },
@@ -205,15 +207,6 @@ export default {
         this.updateTime();
       }, 1000);
     },
-    simulateFlightData() {
-      // 模拟飞行数据变化
-      setInterval(() => {
-        this.altitude = Math.floor(Math.random() * 10) + 95;
-        this.horizontalDistance = Math.floor(Math.random() * 5);
-        this.horizontalSpeed = (Math.random() * 0.5).toFixed(1);
-        this.verticalSpeed = (Math.random() * 0.5).toFixed(1);
-      }, 2000);
-    },
     back() {
       this.$router.replace(
         `/?orderNumber=${this.$store.state.orderInfo.orderNumber}`
@@ -226,7 +219,7 @@ export default {
       clearInterval(this.timer);
     }
     if (this.flvPlayer) {
-      console.log("销毁播放器===》》》");
+      // console.log("销毁播放器===》》》");
       this.flvPlayer.pause();
       this.flvPlayer.destroy(); // 销毁播放器实例，清理资源
       this.flvPlayer = null;

src/views/OrderDetails.vue

@@ -145,7 +145,6 @@
               </div>
             </div>
           </div>
-
           <div class="item_c2" v-if="takeOffObj.queueStatus">
             <div class="item_c2_title">排队信息</div>
             <template v-if="!takeOffObj.flightStatus">
@@ -162,7 +161,8 @@
                 </div>
               </div>
               <div class="line_up_btn" @click="getFlightCancelt">
-                <i class="el-icon-remove-outline"></i>
+                <img class="img" src="@/assets/quxiao.png" alt="" />
+
                 <span class="text">取消排队</span>
               </div>
             </template>
@@ -194,6 +194,13 @@
         >
           申请退款
         </div> -->
+        <!-- <div
+          class="btnBox_r"
+          v-if="takeOffObj.takenOffStatus"
+          @click="setTakeOff()"
+        >
+          继续飞行
+        </div> -->
         <div
           class="btnBox_r"
           v-if="takeOffObj.flightStatus"
@@ -216,13 +223,14 @@
 
 <script>
 import wx from "weixin-js-sdk";
+import { Toast, Dialog } from "vant";
+
 import {
   orderInfo,
   flightTakeOff,
-  flightStart,
   flightCancelt,
   flightListAll,
-  getDroneFlightTask,
+  getDroneFlightTaskByQueueId,
 } from "@/api/home.js";
 import LineUp from "@/components/LineUp.vue";
 // import { mapState } from "vuex";
@@ -241,6 +249,8 @@ export default {
   created() {
     // 获取订单信息
     const query = this.$route.query;
+    // console.log(query);
+
     if (query.orderNumber) {
       this.getOrderInfo(query.orderNumber);
     }
@@ -254,7 +264,6 @@ export default {
       type: "router",
       value: this.$router,
     });
-
   },
   computed: {
     takeOffShow() {
@@ -266,30 +275,17 @@ export default {
   },
   watch: {
     taskNum(val) {
-      console.log("taskNum", val);
+      // console.log("taskNum", val);
       if (val) {
         if (this.$store.state.currentPage == 1) this.setTakeOff();
       }
     },
     takeOffShow(val) {
-      console.log("takeOffShow", val);
+      // console.log("takeOffShow", val);
       if (val) {
         this.getFlightListAll();
       }
     },
-    // $route(to, from) {
-    //   // console.log("this.$route.query==>", this.$route.query);
-    //   // this.width = this.$store.state.width;
-    //   // this.height = this.$store.state.height;
-    //   console.log("from==>", from);
-    //   console.log("to==>", to);
-    //   console.log("this.$route==>", this.$route);
-    //   if (from) {
-    //     this.$nextTick(() => {
-    //       this.$router.removeRoute(from.name);
-    //     });
-    //   }
-    // },
   },
   methods: {
     getOrderInfo(orderNumber) {
@@ -302,7 +298,6 @@ export default {
           value: res.data,
         });
         if (res.data.orderStatus == 10) {
-          console.log(res.data.orderStatus);
           this.$nextTick(() => {
             this.getFlightListAll(true);
           });
@@ -315,18 +310,17 @@ export default {
     // 起飞
     setTakeOff() {
       if (this.takeOffObj.flightStatus) {
-        const loading = this.$loading({
-          lock: true,
-          text: "起飞准备中",
-          spinner: "el-icon-loading",
-          background: "rgba(0, 0, 0, 0.7)",
+        const loading = Toast.loading({
+          duration: 0, // 持续展示 toast
+          forbidClick: true,
+          message: "起飞准备中",
         });
         flightTakeOff({
           orderId: this.form.orderId,
           productId: this.form.businessProductId,
         })
           .then((ret) => {
-            console.log("ret.data===>", ret.data);
+            // console.log("ret.data===>", ret.data);
             if (ret.code == 200) {
               this.$store.commit("SET_APP_VERSION", {
                 type: "flightTaskUuid",
@@ -334,9 +328,9 @@ export default {
               });
               this.$nextTick(() => {
                 if (ret.data.startStreamConvert) {
-                  loading.close();
-                  console.log('跳转==>', 1111);
-                  this.$router.push(
+                  loading.clear();
+                  // console.log("跳转==>", 1111);
+                  this.$router.replace(
                     `/droneOperation?t=${new Date().getTime()}&flightTaskUuid=${
                       ret.data.flightTaskUuid
                     }`
@@ -351,7 +345,7 @@ export default {
             }
           })
           .catch((err) => {
-            loading.close();
+            loading.clear();
             // console.log(err);
             if (err.code == 500) {
               this.$refs.lineUpRef.open({
@@ -379,24 +373,29 @@ export default {
         orderId: this.form.orderId,
         productId: this.form.businessProductId,
       }).then((res) => {
-        if (res.code == 200) {
+        if (res.code == 200 && res.data) {
+          console.log(res, "=====");
           this.takeOffObj = res.data;
-          console.log(show);
+          // console.log(show);
           if (show) {
+            if (res.data.takenOffStatus) {
+              this.getDroneFlightTaskByQueueId(res.data.queueId)
+            }
             // console.log("开始执行");
             this.$nextTick(() => {
               this.$store.dispatch("initWebSocketUtil");
             });
           }
+        }else{
+          this.takeOffObj = {};
         }
       });
     },
     // 取消排队
     getFlightCancelt() {
-      this.$confirm("是否确认取消排队？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+      Dialog.confirm({
+        title: "提示",
+        message: "是否确认取消排队？",
       })
         .then(() => {
           flightCancelt({
@@ -405,7 +404,7 @@ export default {
             queueId: this.takeOffObj.id,
           }).then((res) => {
             if (res.code == 200) {
-              this.$message.success("取消成功");
+              Toast("取消成功");
               this.takeOffObj = {};
             }
           });
@@ -416,6 +415,17 @@ export default {
       this.$store.dispatch("disconnect");
       wx.miniProgram.navigateBack();
     },
+    // 已起飞获取起飞数据
+    getDroneFlightTaskByQueueId(queueId) {
+      getDroneFlightTaskByQueueId({ queueId }).then((res) => {
+        if (res.code == 200) {
+          this.$store.commit("SET_APP_VERSION", {
+            type: "flightTaskUuid",
+            value: ret.data.flightTaskUuid,
+          });
+        }
+      });
+    },
   },
 };
 </script>
@@ -798,7 +808,7 @@ export default {
 }
 
 .line_up_btn {
-  width: 70px;
+  width: 75px;
   margin: 13px auto;
   display: flex;
   align-items: center;
@@ -814,4 +824,9 @@ export default {
 .line_up_btn .el-icon-remove-outline {
   color: #fb0b03;
 }
+
+.line_up_btn .img {
+  width: 15px;
+  height: 15px;
+}
 </style>

vue.config.js

@@ -20,6 +20,7 @@ module.exports = defineConfig({
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       "/prod-api": {
         target: `http://192.168.0.151:9002`,
+        // target: `http://192.168.0.19:9002`,
         // target: `http://192.168.0.78:9002`,
         // target: `https://test.yuemeikang.com/prod-api`,  // 测试环境
         // target: `https://app.yuemeikang.com/prod-api`,  // 正式环境