告警类型统计与 区域人员统计

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 {