告警

src/App.vue

@@ -2,7 +2,7 @@
   <div class="home">
     <header>
       <img @click="kc0" src="./assets/image/logo.png" alt="" />
-      <p>上海滨江中心IOC大屏控制台</p>
+      <p @click="mockPost">上海滨江中心IOC大屏控制台</p>
     </header>
     <main>
       <div class="left-nav">
@@ -40,7 +40,7 @@
       <div class="pclose" @click="closeHandle" v-if="isShowClose">
         <img src="./assets/image/close.png" alt="" />
       </div>
-      <div class="inner-list">
+      <div class="inner-list" @scroll="scrolll">
         <div
           class="item"
           :class="{
@@ -54,9 +54,10 @@
           <div class="key">{{ item.devName }}</div>
           <div class="key">{{ item.devLocation }}</div>
           <div class="key">
-            {{ item.alarmTime.substring(item.alarmTime.length - 9) }}
+            {{ item.alarmTime }}
+            <!-- {{ item.alarmTime.substring(item.alarmTime.length - 9) }} -->
           </div>
-          <div class="key">{{ item.devType }}</div>
+          <div class="key">{{ item.status }}</div>
         </div>
       </div>
     </div>
@@ -93,53 +94,63 @@ export default {
           url: require("./assets/image/icon2.png"),
           label: "首页",
           routerName: "homepage",
+          menuCode: "",
         },
         {
           url: require("./assets/image/icon3.png"),
           label: "智慧消防",
           routerName: "xiaofang",
-          number: 2,
+          number: 0,
+          menuCode: "XF",
         },
         {
           url: require("./assets/image/icon4.png"),
           label: "智慧安防",
           routerName: "anfang",
+          menuCode: "AF",
         },
         {
           url: require("./assets/image/icon5.png"),
           label: "智慧能耗",
           routerName: "nengyuan",
+          menuCode: "NF",
         },
         {
           url: require("./assets/image/icon6.png"),
           label: "智慧运营",
           routerName: "yunying",
-          number: 5,
+          number: 0,
+          menuCode: "",
         },
         {
           url: require("./assets/image/icon7.png"),
           label: "智慧照明",
           routerName: "zhaoming",
+          menuCode: "ZM",
         },
         {
           url: require("./assets/image/icon8.png"),
           label: "智慧电梯",
           routerName: "dianti",
+          menuCode: "",
         },
         {
           url: require("./assets/image/icon9.png"),
           label: "智慧通行",
           routerName: "tongxing",
+          menuCode: "",
         },
         {
           url: require("./assets/image/icon10.png"),
           label: "智慧环境",
           routerName: "huanjing",
+          menuCode: "HJ",
         },
         {
           url: require("./assets/image/icon11.png"),
           label: "智慧停车",
           routerName: "tingche",
+          menuCode: "",
         },
       ],
       activeIndex: 0,
@@ -152,12 +163,14 @@ export default {
       isShowClose: false,
       alarmList: [],
       alarmActiveIndex: -1,
+      pageNum: 1,
+      isScrolling: false,
     };
   },
   created() {
     // this.getBuildListData();
     this.initSocket();
-    this.getAlarmList();
+    this.getAlarmList("");
   },
   methods: {
     getBuildListData() {
@@ -176,15 +189,6 @@ export default {
     },
     navClickHandle(index) {
       this.activeIndex = index;
-      // if (index == 0) {
-      //   // 开场动画 1
-      //   this.$axios.post("/osc/sendInt", {
-      //     arg: 1,
-      //     name: "/KC",
-      //   });
-      // } else {
-      //   // 一级动画
-      // }
       this.$axios
         .post("/osc/sendInt", {
           arg: 0,
@@ -199,6 +203,8 @@ export default {
       let routerName = this.navList[index].routerName;
       if (routerName && routerName != this.$route.name) {
         this.$router.push({ name: routerName });
+        this.pageNum = 1;
+        this.getAlarmList(this.navList[index].menuCode);
       }
     },
     // touchStart(e) {
@@ -286,14 +292,18 @@ export default {
       });
     },
     mockPost() {
+      let msgCode = "M02320211209095" + Math.floor(Math.random() * 999999);
       this.$axios
         .post("/ws/sendAlarmMsg", {
+          actionType: "0",
           alarmLevel: "102",
           alarmType: "10004",
           content:
             "您有一条报警消息。  2021-11-19 03:43:13  2_1区/N1\\A/地上2层/强电  照明回路报警，请尽快处理！",
           devCode: "0230102001011701010040047",
           id: "MSG-01",
+          isSendNow: "0",
+          msgCode: msgCode,
           paramJson: "[object Object]",
           projectCode: "023",
           receivedTime: "2021-11-28 10:40:00",
@@ -322,12 +332,14 @@ export default {
       };
 
       websocket.onmessage = function (event) {
-        console.log("收到消息:" + event.data);
         try {
           let data = JSON.parse(event.data);
           data.data.isNew = true;
-          _this.alarmList.push(data.data);
+          _this.alarmList.unshift(data.data);
           _this.goup();
+          setTimeout(() => {
+            _this.alarmList[0].isNew = false;
+          }, 2000);
         } catch (e) {
           console.log(e);
         }
@@ -343,10 +355,22 @@ export default {
       };
     },
     // 获取报警信息列表接口
-    getAlarmList() {
-      this.$axios.get("/alarmMsg/msgList").then((e) => {
-        this.alarmList = e.data;
-      });
+    getAlarmList(menuCode) {
+      this.$axios
+        .get("/alarmMsg/msgListWithPage", {
+          date: "2021-12-14",
+          pageNum: this.pageNum,
+          pageSize: 10,
+          menuCode: menuCode,
+        })
+        .then((e) => {
+          if (this.pageNum == 1) {
+            this.alarmList = e.data.list;
+          } else {
+            this.alarmList = [...this.alarmList, ...e.data.list];
+          }
+          this.isScrolling = false;
+        });
     },
     // 点击报警事件
     alarmClickHandle(index) {
@@ -364,6 +388,17 @@ export default {
         });
       }
     },
+    scrolll(e) {
+      if (
+        e.srcElement.scrollTop + e.srcElement.offsetHeight >
+        e.srcElement.scrollHeight - 100
+      ) {
+        if (this.isScrolling) return;
+        this.isScrolling = true;
+        this.pageNum++;
+        this.getAlarmList();
+      }
+    },
   },
 };
 </script>