人员定位区域人员统计增加自动滚动

src/views/BI/components/bottom_options.vue

@@ -38,21 +38,10 @@
       </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, ref } from "vue";
+import { reactive, markRaw } 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";
@@ -63,7 +52,6 @@ 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: {
@@ -81,7 +69,7 @@ const props = defineProps({
     required: true,
     default: false,
   },
-  isPureMap: {
+  isHistoricalTrajectory: {
     type: Boolean,
     required: true,
     default: false,
@@ -91,11 +79,14 @@ const emits = defineEmits([
   "update:leftCurrentComponent",
   "update:rightCurrentComponent",
   "update:rightOption",
+  "update:isHistoricalTrajectory",
 ]);
-const { leftCurrentComponent, rightCurrentComponent, rightOption } = useVModels(
+const {
-  props,
+  leftCurrentComponent,
-  emits
+  rightCurrentComponent,
-);
+  rightOption,
+  isHistoricalTrajectory,
+} = useVModels(props, emits);
 
 const bottomOptionsList = [
   {
@@ -364,7 +355,6 @@ const bottomOptionsList = [
     list: [],
   },
 ];
-const isHistoricalTrajectory = ref(false);
 const data = reactive({
   bottomOptionsList,
 });

src/views/BI/components/personnel.vue

@@ -45,8 +45,6 @@
             hover
             class="scroll"
             :step="0.5"
-            :single-wait-time="1000"
-            :single-height="25.8"
           >
             <div
               v-for="(item, index) in data.block3List"
@@ -80,16 +78,18 @@
     </teleport>
   </div>
 </template>
+
 <script setup>
 import LayoutTitle from "./title.vue";
 import AlarmDialog from "../components/dialog/alarm_dialog.vue";
 import CountUp from "vue-countup-v3";
-import { ref, onBeforeUnmount, reactive } from "vue";
+import { onBeforeUnmount, reactive } from "vue";
 import {
   handleGetPerList,
   handleTrajectory,
 } from "@/views/BI/js/trajectory.js";
 import { Vue3SeamlessScroll as SeamlessScroll } from "vue3-seamless-scroll";
+import { useIntervalFn } from "@vueuse/core";
 
 const typeList = {
   1: "滞留报警",
@@ -126,16 +126,14 @@ const data = reactive({
   form: {},
   drawer: false,
 });
-const timer = ref();
+useIntervalFn(async () => {
-timer.value = setInterval(async () => {
   const res = await handleGetPerList();
-  for (let i = 0; i < res.perDataList.data.length; i++) {
+  for (let i = 0; i < res.perDataList.data?.length; i++) {
     data.block1OptionsList[i].label = res.perDataList.data[i].name;
     data.block1OptionsList[i].count = res.perDataList.data[i].value;
   }
   data.block2OptionsList = res.armDataList;
   data.block3List = res.regPerDataList;
-  console.log("setInterval");
 }, 2000);
 const fnInit = async () => {
   await handleTrajectory(true);
@@ -150,7 +148,6 @@ const fnAlarmTypeClick = (e) => {
 // 人员定位 websocket 根据 人员定位侧边栏 链接与断开
 onBeforeUnmount(async () => {
   await handleTrajectory(false);
-  clearInterval(timer.value);
 });
 </script>
 <style scoped lang="scss">

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-pure-map="isPureMap"
+            v-model:is-historical-trajectory="isHistoricalTrajectory"
           />
         </div>
       </transition>
@@ -59,6 +59,15 @@
     <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>
 
@@ -71,12 +80,14 @@ import { useRouter } from "vue-router";
 import { initMap } from "./js/map";
 import { useUserStore } from "@/pinia/user.js";
 import { getEnterpriseInfo } from "@/request/enterprise_management.js";
+import HistoricalTrajectoryOptions from "@/views/BI/components/historical_trajectory_options.vue";
 
 const router = useRouter();
 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;