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] =?UTF-8?q?=E5=91=8A=E8=AD=A6=E7=B1=BB=E5=9E=8B=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E4=B8=8E=20=E5=8C=BA=E5=9F=9F=E4=BA=BA=E5=91=98?=
 =?UTF-8?q?=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 {