飞行作业，弹窗层级根据点击的先后顺序赋值

src/views/demo/workmanagement/flightoperation/index.vue

@@ -35,12 +35,14 @@
       @changeLoadControl="changeLoadControl"
       :msgData="msgData"
       :cameraType="cameraType"
+      :zIndex="zIndex"
     />
     <!-- 飞行控制 -->
     <FlightControl
       @changeFlightControl="changeFlightControl"
       @clickTakeOff="clickTakeOff"
       @clickFlyTo="clickFlyTo"
+      :zIndex="zIndex"
       v-if="flightControlVisible"
     />
     <!-- 一键起飞表单 -->
@@ -48,6 +50,7 @@
       v-if="takeOffFormVisible"
       @changeTakeOffForm="changeTakeOffForm"
       :locationVal="locationVal"
+      :zIndex="zIndex"
     />
     <!-- 指点飞行表单 -->
 
@@ -55,10 +58,12 @@
       v-if="flyToFormVisible"
       @changeFlyToForm="changeFlyToForm"
       :locationVal="locationVal"
+      :zIndex="zIndex"
     />
     <AirportLive
       :msgData="msgData"
       v-if="airportLiveVisible"
+      :zIndex="zIndex"
       @changeAirportLive="airportLiveVisible = false"
     />
     <LivePreview
@@ -67,6 +72,7 @@
       :uavLive="uavLive"
       :uavStatus="uavStatus"
       :airportLiveVisible="airportLiveVisible"
+      :zIndex="zIndex"
       @loadLiveStreaming="livePreviewVisible = false"
       @changeCameraType="changeCameraType"
     />
@@ -95,6 +101,7 @@
   import { drcUpTopic } from '@/utils/debugging/remote';
   import { airPortStore } from '@/store/modules/airport';
 
+  const zIndex = ref(0);
   const airPortStoreVal = airPortStore();
   const airPortInfo = airPortStoreVal.getAirport;
   const UAVinfo = airPortStoreVal.getUAV;
@@ -123,11 +130,11 @@
     connected.value = true;
   };
   const topicUrl = computed(() => {
-    return 'thing/product/' + airPortInfo.sn + '/osd'
-  })
+    return 'thing/product/' + airPortInfo.sn + '/osd';
+  });
   const topicUAVUrl = computed(() => {
-    return 'thing/product/' + UAVinfo.sn + '/osd'
-  })
+    return 'thing/product/' + UAVinfo.sn + '/osd';
+  });
   onMounted(() => {
     destroyConnection();
     createConnection(connectCallback);
@@ -189,21 +196,26 @@
   const uavLive = ref(false);
   const changeAirportLive = () => {
     airportLiveVisible.value = !airportLiveVisible.value;
+    zIndex.value++;
   };
   const changeRemote = () => {
     remoteVisible.value = !remoteVisible.value;
   };
   const changeLoadControl = () => {
     loadControlVisible.value = !loadControlVisible.value;
+    zIndex.value++;
   };
   const changeFlightControl = () => {
     flightControlVisible.value = !flightControlVisible.value;
+    zIndex.value++;
   };
   const clickTakeOff = () => {
     takeOffFormVisible.value = true;
+    zIndex.value++;
   };
   const clickFlyTo = () => {
     flyToFormVisible.value = true;
+    zIndex.value++;
   };
   const changeTakeOffForm = (val) => {
     takeOffFormVisible.value = false;
@@ -218,6 +230,7 @@
   const loadLiveStreaming = (val) => {
     livePreviewVisible.value = !livePreviewVisible.value;
     uavStatus.value = val;
+    zIndex.value++;
   };
   const changeFlyToForm = () => {
     flyToFormVisible.value = false;

src/views/demo/workmanagement/flightoperation/src/AirportLive.vue

@@ -4,6 +4,7 @@
     :h="height"
     :x="left"
     :y="top"
+    :z="zIndex"
     :isActive="true"
     :parentLimitation="true"
     @dragging="changeSize"
@@ -53,21 +54,24 @@
   import { getClient } from '@/utils/mqtt';
   import VueDragResize from 'vue-drag-resize/src';
 
+  const props = defineProps({
+    msgData: Object,
+    zIndex: Number,
+  });
   const pageHeight = document.documentElement.clientHeight;
   const pageWidth = document.documentElement.clientWidth;
   const width = ref(500);
   const height = ref(348);
   const left = ref(pageWidth - 800);
   const top = ref(pageHeight - 460);
+  const zIndex = ref(props.zIndex);
   const axisVal = ref('none');
   const airPortStoreVal = airPortStore();
   const live_info = airPortStoreVal.getLiveInfo;
   const airPort = airPortStoreVal.getAirport;
   const { createMessage } = useMessage();
   const emits = defineEmits(['changeAirportLive']);
-  const props = defineProps({
-    msgData: Object,
-  });
+
   let player;
   const liveCode = ref('5');
   console.log(liveCode);

src/views/demo/workmanagement/flightoperation/src/FlightControl.vue

@@ -4,6 +4,7 @@
     :h="height"
     :x="left"
     :y="top"
+    :z="zIndex"
     :isActive="true"
     :parentLimitation="true"
     :isResizable="false"
@@ -194,6 +195,9 @@
   import { airPortStore } from '@/store/modules/airport';
   import { EventBus } from '@/utils/eventBus';
 
+  const props = defineProps({
+    zIndex: Number,
+  });
   const uavStatus = ref(0);
   const airPortStoreVal = airPortStore();
   const uav = airPortStoreVal.getUAV;
@@ -202,6 +206,7 @@
   const height = ref(390);
   const left = ref(700);
   const top = ref(100);
+  const zIndex = ref(props.zIndex);
   const userStore = useUserStore();
   const userInfo = userStore.getUserInfo;
   const redisUser = ref({});
@@ -628,7 +633,8 @@
     border-radius: 6px;
     backdrop-filter: blur(3px);
     color: #fff;
-
+    position: relative;
+    z-index: 10;
     .title {
       width: 100%;
       padding: 10px 0;

src/views/demo/workmanagement/flightoperation/src/FlyToForm.vue

@@ -4,6 +4,7 @@
     :h="height"
     :x="left"
     :y="top"
+    :z="zIndex"
     :isActive="true"
     :parentLimitation="true"
     :isResizable="false"
@@ -64,15 +65,17 @@
   import VueDragResize from 'vue-drag-resize/src';
   import { useMessage } from '@/hooks/web/useMessage';
 
+  const emits = defineEmits(['changeFlyToForm']);
+  const props = defineProps({
+    msgData: Object,
+    zIndex: Number,
+  });
   const { createMessage } = useMessage();
   const width = ref(460);
   const height = ref(260);
   const left = ref(300);
   const top = ref(120);
-  const emits = defineEmits(['changeFlyToForm']);
-  const props = defineProps({
-    msgData: Object,
-  });
+  const zIndex = ref(props.zIndex);
 
   const data = reactive({
     fly_to_id: buildGUID(),
@@ -129,7 +132,6 @@
 </script>
 <style lang="less" scoped>
   .takeoff-information {
-    z-index: 999;
     width: 96%;
     height: 98%;
     padding: 10px;

src/views/demo/workmanagement/flightoperation/src/LivePreview.vue

@@ -4,6 +4,7 @@
     :h="height"
     :x="left"
     :y="top"
+    :z="zIndex"
     :isActive="true"
     :parentLimitation="true"
     @dragging="changeSize"
@@ -80,23 +81,25 @@
   import { airPortStore } from '@/store/modules/airport';
   import VueDragResize from 'vue-drag-resize/src';
 
-  const airPortStoreVal = airPortStore();
-  const live_info = airPortStoreVal.getLiveInfo;
-  const uav = airPortStoreVal.getUAV;
-  const { createMessage } = useMessage();
-  const emits = defineEmits(['loadLiveStreaming', 'changeCameraType']);
   const props = defineProps({
     msgData: Object,
     uavLive: Boolean,
     airportLiveVisible: Boolean,
     uavStatus: Number,
+    zIndex: Number,
   });
+  const emits = defineEmits(['loadLiveStreaming', 'changeCameraType']);
+  const airPortStoreVal = airPortStore();
+  const live_info = airPortStoreVal.getLiveInfo;
+  const uav = airPortStoreVal.getUAV;
+  const { createMessage } = useMessage();
   const pageHeight = document.documentElement.clientHeight;
   const pageWidth = document.documentElement.clientWidth;
   const width = ref(500);
   const height = ref(348);
   const left = ref(pageWidth - 800);
   const top = ref(pageHeight - 460);
+  const zIndex = ref(props.zIndex);
   if (props.airportLiveVisible) {
     top.value = pageHeight - 820;
   }

src/views/demo/workmanagement/flightoperation/src/LoadControl.vue

@@ -4,6 +4,7 @@
     :h="height"
     :x="left"
     :y="top"
+    :z="zIndex"
     :isActive="true"
     :parentLimitation="true"
     :isResizable="false"
@@ -124,24 +125,26 @@
   import { airPortStore } from '@/store/modules/airport';
   import VueDragResize from 'vue-drag-resize/src';
 
+  const props = defineProps({
+    msgData: Object,
+    cameraType: String,
+    zIndex: Number,
+  });
   const width = ref(400);
   const height = ref(440);
   const left = ref(300);
   const top = ref(100);
+  const zIndex = ref(props.zIndex);
   const airPortStoreVal = airPortStore();
   const airPort = airPortStoreVal.getAirport;
   const uav = airPortStoreVal.getUAV;
-
   const selectName = ref('');
   const userStore = useUserStore();
   const userInfo = userStore.getUserInfo;
   const redisUser = ref({});
   const { createMessage } = useMessage();
   const emits = defineEmits(['changeLoadControl']);
-  const props = defineProps({
-    msgData: Object,
-    cameraType: String,
-  });
+
   const uavStatus = ref();
   const monitorDRC = ref(false);
   // 是否飞行控制权抢夺

src/views/demo/workmanagement/flightoperation/src/TakeOffForm.vue

@@ -4,6 +4,7 @@
     :h="height"
     :x="left"
     :y="top"
+    :z="zIndex"
     :isActive="true"
     :parentLimitation="true"
     :isResizable="false"
@@ -118,18 +119,20 @@
   import VueDragResize from 'vue-drag-resize/src';
   import { useMessage } from '@/hooks/web/useMessage';
 
+  const emits = defineEmits(['changeTakeOffForm']);
+  const props = defineProps({
+    msgData: Object,
+    zIndex: Number,
+  });
   const { createMessage } = useMessage();
   const width = ref(460);
   const height = ref(620);
   const left = ref(300);
   const top = ref(100);
+  const zIndex = ref(props.zIndex);
   const airPortStoreVal = airPortStore();
   const airPort = airPortStoreVal.getAirport;
 
-  const emits = defineEmits(['changeTakeOffForm']);
-  const props = defineProps({
-    msgData: Object,
-  });
   const data = reactive({
     flight_id: uuid(14, 14),
     target_latitude: null,

src/views/demo/workmanagement/flightoperation/src/UAVInformation.vue

@@ -253,7 +253,6 @@
     position: absolute;
     top: 360px;
     left: 0;
-    z-index: 999;
     width: 260px;
     padding: 10px;
     background: #0d0e15;