告警

c1f14e78 · liuwange1 · 4298a7f5 · c1f14e78
Commit c1f14e78 authored Dec 14, 2021 by liuwange1
Show whitespace changes
Inline Side-by-side

Showing with 56 additions and 21 deletions

src/App.vue
+56 -21

No files found.
--- a/src/App.vue
+++ b/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,9 +355,21 @@ export default {
      };
    },
    // 获取报警信息列表接口
-    getAlarmList() {
+    getAlarmList(menuCode) {
-      this.$axios.get("/alarmMsg/msgList").then((e) => {
+      this.$axios
-        this.alarmList = e.data;
+        .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;
        });
    },
    // 点击报警事件
@@ -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>