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

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();

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(