更改历史轨迹组件引入位置

src/views/BI/components/bottom_options.vue

@@ -38,10 +38,21 @@
       </div>
     </div>
   </div>
+  <teleport to="#bi_container">
+    <transition
+      enter-active-class="animate__animated animate__fadeInDown"
+      leave-active-class="animate__animated animate__fadeOutDown"
+      mode="out-in"
+    >
+      <historical-trajectory-options
+        v-if="isHistoricalTrajectory && !isPureMap"
+      />
+    </transition>
+  </teleport>
 </template>
 
 <script setup>
-import { reactive, markRaw } from "vue";
+import { reactive, markRaw, ref } from "vue";
 import Personnel from "@/views/BI/components/personnel.vue";
 import WorkSafely from "@/views/BI/components/work_safely.vue";
 import EntranceControl from "@/views/BI/components/entrance_control.vue";
@@ -52,6 +63,7 @@ import { useVModels } from "@vueuse/core";
 import { handleTrajectory, handleFence } from "@/views/BI/js/trajectory.js";
 import { handleWork } from "@/views/BI/js/eight_work.js";
 import { handleCamera } from "@/views/BI/js/camera.js";
+import HistoricalTrajectoryOptions from "@/views/BI/components/historical_trajectory_options.vue";
 
 const props = defineProps({
   leftCurrentComponent: {
@@ -69,7 +81,7 @@ const props = defineProps({
     required: true,
     default: false,
   },
-  isHistoricalTrajectory: {
+  isPureMap: {
     type: Boolean,
     required: true,
     default: false,
@@ -78,15 +90,12 @@ const props = defineProps({
 const emits = defineEmits([
   "update:leftCurrentComponent",
   "update:rightCurrentComponent",
-  "update:isHistoricalTrajectory",
   "update:rightOption",
 ]);
-const {
+const { leftCurrentComponent, rightCurrentComponent, rightOption } = useVModels(
-  leftCurrentComponent,
+  props,
-  rightCurrentComponent,
+  emits
-  rightOption,
+);
-  isHistoricalTrajectory,
-} = useVModels(props, emits);
 
 const bottomOptionsList = [
   {
@@ -355,6 +364,7 @@ const bottomOptionsList = [
     list: [],
   },
 ];
+const isHistoricalTrajectory = ref(false);
 const data = reactive({
   bottomOptionsList,
 });

src/views/BI/components/personnel.vue

@@ -55,17 +55,18 @@
       v-model:pd="data.form"
       :ele-type-num="+data.eleType"
     />
-    <template v-if="data.block2OptionsList.some((item) => item.total > 0)">
+    <teleport to="body">
-      <teleport to="body">
+      <div
-        <div class="alarm_full_screen">
+        v-if="data.block2OptionsList.some((item) => item.total > 0)"
-          <div
+        class="alarm_full_screen"
-            v-for="item in 4"
+      >
-            :key="item"
+        <div
-            :class="['alarm_full_screen_item', 'alarm_full_screen_item' + item]"
+          v-for="item in 4"
-          />
+          :key="item"
-        </div>
+          :class="['alarm_full_screen_item', 'alarm_full_screen_item' + item]"
-      </teleport>
+        />
-    </template>
+      </div>
+    </teleport>
   </div>
 </template>
 <script setup>

src/views/BI/index.vue

@@ -37,7 +37,7 @@
             v-model:left-current-component="leftCurrentComponent"
             v-model:right-current-component="rightCurrentComponent"
             v-model:right-option="right_option"
-            v-model:is-historical-trajectory="isHistoricalTrajectory"
+            v-model:is-pure-map="isPureMap"
           />
         </div>
       </transition>
@@ -59,16 +59,6 @@
     <div v-show="right_option" class="right_ico">
       <right-ico v-model:is-pure-map="isPureMap" />
     </div>
-
-    <transition
-      enter-active-class="animate__animated animate__fadeInDown"
-      leave-active-class="animate__animated animate__fadeOutDown"
-      mode="out-in"
-    >
-      <historical-trajectory-options
-        v-if="isHistoricalTrajectory && !isPureMap"
-      />
-    </transition>
   </div>
 </template>
 
@@ -77,7 +67,6 @@ import autofit from "autofit.js";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 import RightIco from "./components/rightico.vue";
 import BottomOptions from "./components/bottom_options.vue";
-import HistoricalTrajectoryOptions from "./components/historical_trajectory_options.vue";
 import { useRouter } from "vue-router";
 import { initMap } from "./js/map";
 import { useUserStore } from "@/pinia/user.js";
@@ -88,7 +77,6 @@ const right_option = ref(true);
 const transitionKey = ref(0);
 const leftCurrentComponent = ref("");
 const rightCurrentComponent = ref("");
-const isHistoricalTrajectory = ref(false);
 const isPureMap = ref(false);
 const userStore = useUserStore();
 const CORPINFO_ID = userStore.getUserInfo.CORPINFO_ID;