From 481750be3f515686a5d3ba83b759718352e56cdf Mon Sep 17 00:00:00 2001
From: LiuJiaNan <liujianan@zcloudchina.com>
Date: Fri, 1 Mar 2024 13:52:31 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E5=8E=86=E5=8F=B2?=
 =?UTF-8?q?=E8=BD=A8=E8=BF=B9=E7=BB=84=E4=BB=B6=E5=BC=95=E5=85=A5=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/BI/components/bottom_options.vue | 28 +++++++++++++++-------
 src/views/BI/components/personnel.vue      | 23 +++++++++---------
 src/views/BI/index.vue                     | 14 +----------
 3 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/src/views/BI/components/bottom_options.vue b/src/views/BI/components/bottom_options.vue
index bbea9e5..e217029 100644
--- a/src/views/BI/components/bottom_options.vue
+++ b/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 {
-  leftCurrentComponent,
-  rightCurrentComponent,
-  rightOption,
-  isHistoricalTrajectory,
-} = useVModels(props, emits);
+const { leftCurrentComponent, rightCurrentComponent, rightOption } = useVModels(
+  props,
+  emits
+);
 
 const bottomOptionsList = [
   {
@@ -355,6 +364,7 @@ const bottomOptionsList = [
     list: [],
   },
 ];
+const isHistoricalTrajectory = ref(false);
 const data = reactive({
   bottomOptionsList,
 });
diff --git a/src/views/BI/components/personnel.vue b/src/views/BI/components/personnel.vue
index c3218e4..94ca9ef 100644
--- a/src/views/BI/components/personnel.vue
+++ b/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">
-        <div class="alarm_full_screen">
-          <div
-            v-for="item in 4"
-            :key="item"
-            :class="['alarm_full_screen_item', 'alarm_full_screen_item' + item]"
-          />
-        </div>
-      </teleport>
-    </template>
+    <teleport to="body">
+      <div
+        v-if="data.block2OptionsList.some((item) => item.total > 0)"
+        class="alarm_full_screen"
+      >
+        <div
+          v-for="item in 4"
+          :key="item"
+          :class="['alarm_full_screen_item', 'alarm_full_screen_item' + item]"
+        />
+      </div>
+    </teleport>
   </div>
 </template>
 <script setup>
diff --git a/src/views/BI/index.vue b/src/views/BI/index.vue
index 1cd2ddf..bbcd535 100644
--- a/src/views/BI/index.vue
+++ b/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;

From 7145e51ebb994177f358d0fabb8c5bc939c092c2 Mon Sep 17 00:00:00 2001
From: dearlin <1261008090@qq.com>
Date: Fri, 1 Mar 2024 15:08:30 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E5=91=8A=E8=AD=A6=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E4=B8=8E=20=E5=8C=BA=E5=9F=9F=E4=BA=BA?=
 =?UTF-8?q?=E5=91=98=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/BI/components/personnel.vue | 94 ++++++++++-----------------
 src/views/BI/js/trajectory.js         | 35 ++++++++--
 2 files changed, 66 insertions(+), 63 deletions(-)

diff --git a/src/views/BI/components/personnel.vue b/src/views/BI/components/personnel.vue
index 94ca9ef..8cba58a 100644
--- a/src/views/BI/components/personnel.vue
+++ b/src/views/BI/components/personnel.vue
@@ -4,14 +4,14 @@
       <layout-title title="人员类型统计" />
       <div class="option">
         <div
-          v-for="(item, index) in data.block1OptionsList"
+          v-for="(item, index) in data.block1OptionsList.data"
           :key="index"
           class="list"
         >
           <img :src="item.img" alt="" class="img" />
-          <div class="label">{{ item.label }}</div>
+          <div class="label">{{ item.name }}</div>
           <div class="num">
-            <count-up :end-val="item.count"></count-up>
+            <count-up :end-val="item.value"></count-up>
           </div>
         </div>
       </div>
@@ -22,29 +22,27 @@
         <div
           v-for="(item, index) in data.block2OptionsList"
           :key="index"
-          :class="['list', { alarm: item.total > 0 }]"
+          :class="['list', { alarm: item.count > 0 }]"
           @click="fnAlarmTypeClick(item)"
         >
-          <div class="name">{{ item.label }}</div>
+          <div class="name">{{ typeList[item.eleType] }}</div>
           <div class="num">
-            <count-up :end-val="item.total"></count-up>
+            <count-up :end-val="item.count"></count-up>
           </div>
         </div>
       </div>
     </div>
     <div class="block3">
-      <layout-title title="人员定位情况" />
+      <layout-title title="区域人员统计" />
       <div class="option">
         <div class="table">
           <div class="tr">
-            <div class="td">姓名</div>
-            <div class="td">卡号</div>
-            <div class="td">电量</div>
+            <div class="td">区域</div>
+            <div class="td">人员</div>
           </div>
           <div v-for="(item, index) in data.block3List" :key="index" class="tr">
-            <div class="td">{{ item.name }}</div>
-            <div class="td">{{ item.cardNo }}</div>
-            <div class="td">{{ item.stset + "%" }}</div>
+            <div class="td">{{ item.group }}</div>
+            <div class="td">{{ item.count }}</div>
           </div>
         </div>
       </div>
@@ -57,7 +55,7 @@
     />
     <teleport to="body">
       <div
-        v-if="data.block2OptionsList.some((item) => item.total > 0)"
+        v-if="data.block2OptionsList.some((item) => item.count > 0)"
         class="alarm_full_screen"
       >
         <div
@@ -79,7 +77,18 @@ import {
   getAlarmTypeCount,
   getPersonnelPositioningCount,
 } from "@/request/bi/mapApi.js";
-
+import { handleGetPerList, handleInit } from "@/views/BI/js/trajectory.js";
+const typeList = {
+  1: "滞留报警",
+  2: "串岗报警",
+  3: "超员报警",
+  4: "缺员报警",
+  5: "静止报警",
+  6: "一键报警",
+  7: "越界报警",
+  8: "聚集告警",
+  9: "作业告警",
+};
 const data = reactive({
   block1OptionsList: [
     {
@@ -90,51 +99,20 @@ const data = reactive({
   ],
   eleType: 0,
   block2OptionsList: [],
-  block3List: [
-    {
-      name: "赵一诺",
-      Office: "大堂经理",
-      electricity: "30%",
-    },
-    {
-      name: "赵一诺",
-      Office: "大堂经理",
-      electricity: "30%",
-    },
-    {
-      name: "赵一诺",
-      Office: "大堂经理",
-      electricity: "30%",
-    },
-    {
-      name: "赵一诺",
-      Office: "大堂经理",
-      electricity: "30%",
-    },
-    {
-      name: "赵一诺",
-      Office: "大堂经理",
-      electricity: "30%",
-    },
-    {
-      name: "赵一诺",
-      Office: "大堂经理",
-      electricity: "30%",
-    },
-    {
-      name: "赵一诺",
-      Office: "大堂经理",
-      electricity: "30%",
-    },
-    {
-      name: "赵一诺",
-      Office: "大堂经理",
-      electricity: "30%",
-    },
-  ],
+  block3List: [],
   form: {},
   drawer: false,
 });
+setInterval(async () => {
+  const res = await handleGetPerList();
+  data.block1OptionsList = res.perDataList;
+  data.block2OptionsList = res.armDataList;
+  data.block3List = res.regPerDataList;
+}, 2000);
+const fnInit = async () => {
+  await handleInit();
+};
+fnInit();
 const getPersonnelData = async () => {
   const resData = await getPersonnelTypeCount();
   await nextTick(() => {
@@ -146,7 +124,7 @@ const getPersonnelData = async () => {
 const fnAlarmTypeClick = (e) => {
   data.drawer = true;
   data.form.title = e.label;
-  data.eleType = e.type;
+  data.eleType = e.eleType;
 };
 const getAlarmTypeData = async () => {
   const resData = await getAlarmTypeCount();
diff --git a/src/views/BI/js/trajectory.js b/src/views/BI/js/trajectory.js
index 9fd02e9..18ff38a 100644
--- a/src/views/BI/js/trajectory.js
+++ b/src/views/BI/js/trajectory.js
@@ -10,7 +10,12 @@ const pls_ip = userStore.getUserInfo.POST_URL;
 let entityArr = [];
 let billboardArr = [];
 const fencesArr = [];
-
+const leftObj = {
+  perDataList: [],
+  armDataList: [],
+  regPerDataList: [], // 区域人员统计
+  deptDataList: [], // 部门统计
+};
 const { open, close } = useWebSocket(
   encodeURI("ws://" + pls_ip.replace("http://", "") + "/netty/test.io?u=1"),
   // encodeURI("ws://58.58.162.14:8084/netty/test.io?userid=1"),
@@ -25,13 +30,13 @@ const { open, close } = useWebSocket(
     onMessage: (ws, event) => {
       const msg = unzip(event.data);
       const decodedMsg = JSON.parse(decodeURIComponent(msg));
-      console.log(decodedMsg);
       if (decodedMsg.msg === "000") {
         peoMovement(decodedMsg.data);
       }
       if (decodedMsg.msg === "006") {
         addNewPerson(decodedMsg.data);
       }
+      changeLeftObjData(decodedMsg);
     },
     onDisconnected: () => {
       if (entityArr && entityArr.children) {
@@ -47,6 +52,13 @@ const { open, close } = useWebSocket(
     },
   }
 );
+export const handleGetPerList = async () => {
+  return leftObj;
+};
+export const handleInit = async () => {
+  getOnlineUser();
+  open();
+};
 export const handleTrajectory = (b) => {
   if (b) {
     getOnlineUser();
@@ -149,7 +161,20 @@ const drawCanvas = (name, floor) => {
   ctx.fillText((name || "未知人员") + `(${floor}F)`, width / 2, height / 2);
   return canvas;
 };
-
+const changeLeftObjData = (decodedMsg) => {
+  if (decodedMsg.msg === "005") {
+    leftObj.perDataList = decodedMsg.data;
+  }
+  if (decodedMsg.msg === "003") {
+    leftObj.armDataList = decodedMsg.data;
+  }
+  if (decodedMsg.msg === "002") {
+    leftObj.regPerDataList = decodedMsg.data;
+  }
+  if (decodedMsg.msg === "008") {
+    leftObj.deptDataList = decodedMsg.data;
+  }
+};
 const addNewPerson = (data) => {
   data.forEach((item) => {
     const entity = item.split(",");
@@ -203,8 +228,8 @@ function peoMovement(moveData) {
           Number(Number(itData[4]) + 2.05),
           2000
         ); // 人物铭牌平滑移动
-        console.log(b.entity.floor);
-        console.log(Number(itData[6]));
+        // console.log(b.entity.floor);
+        // console.log(Number(itData[6]));
         if (Number(itData[6]) !== Number(b.entity.floor)) {
           b.entity.floor = itData[6];
           billboardArr.children[m].uopdateImg(

From cf1c3bbc1305b4b8ef04ad1e6d8a9f01231c8bb8 Mon Sep 17 00:00:00 2001
From: dearlin <1261008090@qq.com>
Date: Fri, 1 Mar 2024 15:34:00 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E5=91=8A=E8=AD=A6=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E4=B8=8E=20=E5=8C=BA=E5=9F=9F=E4=BA=BA?=
 =?UTF-8?q?=E5=91=98=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/BI/components/personnel.vue | 76 +++++++++++----------------
 1 file changed, 31 insertions(+), 45 deletions(-)

diff --git a/src/views/BI/components/personnel.vue b/src/views/BI/components/personnel.vue
index 8cba58a..f90a45f 100644
--- a/src/views/BI/components/personnel.vue
+++ b/src/views/BI/components/personnel.vue
@@ -4,14 +4,14 @@
       <layout-title title="人员类型统计" />
       <div class="option">
         <div
-          v-for="(item, index) in data.block1OptionsList.data"
+          v-for="(item, index) in data.block1OptionsList"
           :key="index"
           class="list"
         >
           <img :src="item.img" alt="" class="img" />
-          <div class="label">{{ item.name }}</div>
+          <div class="label">{{ item.label }}</div>
           <div class="num">
-            <count-up :end-val="item.value"></count-up>
+            <count-up :end-val="item.count"></count-up>
           </div>
         </div>
       </div>
@@ -71,13 +71,11 @@
 import LayoutTitle from "./title.vue";
 import AlarmDialog from "../components/dialog/alarm_dialog.vue";
 import CountUp from "vue-countup-v3";
-import { nextTick, reactive } from "vue";
+import { ref, onBeforeUnmount, reactive } from "vue";
 import {
-  getPersonnelTypeCount,
-  getAlarmTypeCount,
-  getPersonnelPositioningCount,
-} from "@/request/bi/mapApi.js";
-import { handleGetPerList, handleInit } from "@/views/BI/js/trajectory.js";
+  handleGetPerList,
+  handleTrajectory,
+} from "@/views/BI/js/trajectory.js";
 const typeList = {
   1: "滞留报警",
   2: "串岗报警",
@@ -96,6 +94,16 @@ const data = reactive({
       label: "全部人员",
       count: 0,
     },
+    {
+      img: new URL("/src/assets/images/map/img2.png", import.meta.url).href,
+      label: "外来人员",
+      count: 0,
+    },
+    {
+      img: new URL("/src/assets/images/map/img3.png", import.meta.url).href,
+      label: "第三方人员",
+      count: 0,
+    },
   ],
   eleType: 0,
   block2OptionsList: [],
@@ -103,54 +111,32 @@ const data = reactive({
   form: {},
   drawer: false,
 });
-setInterval(async () => {
+const timer = ref();
+timer.value = setInterval(async () => {
   const res = await handleGetPerList();
-  data.block1OptionsList = res.perDataList;
+  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 handleInit();
+  await handleTrajectory(true);
 };
 fnInit();
-const getPersonnelData = async () => {
-  const resData = await getPersonnelTypeCount();
-  await nextTick(() => {
-    data.block1OptionsList.forEach((item) => {
-      item.count = resData.userCount;
-    });
-  });
-};
 const fnAlarmTypeClick = (e) => {
   data.drawer = true;
   data.form.title = e.label;
   data.eleType = e.eleType;
 };
-const getAlarmTypeData = async () => {
-  const resData = await getAlarmTypeCount();
-  const dataList = resData.data.data.data;
-  const typeList = {
-    1: "滞留报警",
-    2: "串岗报警",
-    3: "超员报警",
-    4: "缺员报警",
-    5: "静止报警",
-    6: "一键报警",
-    7: "越界报警",
-    8: "聚集告警",
-  };
-  dataList.forEach((item) => {
-    item.label = typeList[item.type];
-  });
-  data.block2OptionsList = dataList;
-};
-const getPositionData = async () => {
-  const resData = await getPersonnelPositioningCount();
-  data.block3List = resData.data.rows;
-};
-getPersonnelData();
-getAlarmTypeData();
-getPositionData();
+
+// 人员定位 websocket 根据 人员定位侧边栏 链接与断开
+onBeforeUnmount(async () => {
+  await handleTrajectory(false);
+  clearInterval(timer.value);
+});
 </script>
 <style scoped lang="scss">
 .container {

From ece4403288a2b6a3ce10bb447ee9e909b95bfce6 Mon Sep 17 00:00:00 2001
From: LiuJiaNan <liujianan@zcloudchina.com>
Date: Fri, 1 Mar 2024 15:49:32 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E4=BA=BA=E5=91=98=E5=AE=9A=E4=BD=8D?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E4=BA=BA=E5=91=98=E7=BB=9F=E8=AE=A1=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/BI/components/personnel.vue | 39 ++++++++++++++++++---------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/views/BI/components/personnel.vue b/src/views/BI/components/personnel.vue
index f90a45f..f9dee76 100644
--- a/src/views/BI/components/personnel.vue
+++ b/src/views/BI/components/personnel.vue
@@ -40,10 +40,23 @@
             <div class="td">区域</div>
             <div class="td">人员</div>
           </div>
-          <div v-for="(item, index) in data.block3List" :key="index" class="tr">
-            <div class="td">{{ item.group }}</div>
-            <div class="td">{{ item.count }}</div>
-          </div>
+          <seamless-scroll
+            :list="data.block3List"
+            hover
+            class="scroll"
+            :step="0.5"
+            :single-wait-time="1000"
+            :single-height="25.8"
+          >
+            <div
+              v-for="(item, index) in data.block3List"
+              :key="index"
+              class="tr"
+            >
+              <div class="td line-1">{{ item.group }}</div>
+              <div class="td">{{ item.count }}</div>
+            </div>
+          </seamless-scroll>
         </div>
       </div>
     </div>
@@ -76,6 +89,8 @@ import {
   handleGetPerList,
   handleTrajectory,
 } from "@/views/BI/js/trajectory.js";
+import { Vue3SeamlessScroll as SeamlessScroll } from "vue3-seamless-scroll";
+
 const typeList = {
   1: "滞留报警",
   2: "串岗报警",
@@ -257,9 +272,6 @@ onBeforeUnmount(async () => {
     width: 430px;
     margin-top: 10px;
 
-    .tab_list {
-    }
-
     .option {
       width: 100%;
       min-height: 100px;
@@ -301,6 +313,11 @@ onBeforeUnmount(async () => {
         }
       }
 
+      .scroll {
+        height: 210px;
+        overflow: hidden;
+      }
+
       .table {
         margin-top: 5px;
 
@@ -312,22 +329,18 @@ onBeforeUnmount(async () => {
           }
 
           .td {
-            flex: 1;
             text-align: left;
             font-size: 12px;
             color: #fff;
             padding: 6px 10px;
 
             &:nth-child(1) {
-              flex-basis: 30%;
+              flex: 1;
             }
 
             &:nth-child(2) {
-              flex-basis: 50%;
-            }
-
-            &:nth-child(3) {
               flex-basis: 20%;
+              text-align: center;
             }
           }
 

From b6ba08a0053778fc50f23a8597b85d9dcf9ef476 Mon Sep 17 00:00:00 2001
From: LiuJiaNan <liujianan@zcloudchina.com>
Date: Fri, 1 Mar 2024 16:26:47 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E4=BA=BA=E5=91=98=E5=AE=9A=E4=BD=8D?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E4=BA=BA=E5=91=98=E7=BB=9F=E8=AE=A1=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/BI/components/bottom_options.vue | 28 +++++++---------------
 src/views/BI/components/personnel.vue      | 13 ++++------
 src/views/BI/index.vue                     | 13 +++++++++-
 3 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/views/BI/components/bottom_options.vue b/src/views/BI/components/bottom_options.vue
index e217029..883fac2 100644
--- a/src/views/BI/components/bottom_options.vue
+++ b/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(
-  props,
-  emits
-);
+const {
+  leftCurrentComponent,
+  rightCurrentComponent,
+  rightOption,
+  isHistoricalTrajectory,
+} = useVModels(props, emits);
 
 const bottomOptionsList = [
   {
@@ -364,7 +355,6 @@ const bottomOptionsList = [
     list: [],
   },
 ];
-const isHistoricalTrajectory = ref(false);
 const data = reactive({
   bottomOptionsList,
 });
diff --git a/src/views/BI/components/personnel.vue b/src/views/BI/components/personnel.vue
index f9dee76..6050668 100644
--- a/src/views/BI/components/personnel.vue
+++ b/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();
-timer.value = setInterval(async () => {
+useIntervalFn(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">
diff --git a/src/views/BI/index.vue b/src/views/BI/index.vue
index bbcd535..d1998af 100644
--- a/src/views/BI/index.vue
+++ b/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;