迁移广播通知

src/apps/AppBroadcast/onlineList.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="onlineList">
+    <div class="record">
+      <div class="item" v-for="(item, index) in list" :key="index">
+        <img src="./img/bigHorn-lb@2x.png" alt="">
+        <div class="info">
+          <p>{{ item.deviceName }}</p>
+          <span>{{ item.areaName }}</span>
+        </div>
+      </div>
+    </div>
+    <AiEmpty v-if="!list.length"/>
+    <AiBack/>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "onlineList",
+  data() {
+    return {
+      page: {current: 1, size: 10, total: 0},
+      list: []
+    }
+  },
+  methods: {
+    getList() {
+      this.$http.post("/app/appdlbquipment/getDlbDeviceList", null, {
+        params: {...this.page, devStatus: 5}
+      }).then(res => {
+        if (res?.data) {
+          if (this.page.current > 1) {
+            this.list = [...this.list, ...res.data.records]
+          } else this.list = res.data.records
+          this.page.total = res.data.total
+        }
+      })
+    },
+    reachBottom() {
+      if (this.page.total > this.list.length) {
+        this.page.current++
+        this.getList()
+      }
+    },
+  },
+  created() {
+    this.getList()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.onlineList {
+  .record {
+    padding-left: 32px;
+    background-color: #fff;
+
+    .item {
+      width: 100%;
+      border-bottom: 1px solid #ddd;
+      display: flex;
+      padding: 12px 40px 16px 0;
+
+      img {
+        width: 48px;
+        height: 48px;
+        margin: 12px 16px 0 0;
+      }
+
+      .info {
+        width: calc(100% - 100px);
+
+        p {
+          font-size: 34px;
+          font-family: PingFang-SC-Medium, PingFang-SC;
+          font-weight: 500;
+          color: #333;
+          line-height: 48px;
+          margin-bottom: 12px;
+        }
+
+        span {
+          font-size: 22px;
+          font-family: PingFang-SC-Medium, PingFang-SC;
+          font-weight: 500;
+          color: #999;
+          line-height: 32px;
+        }
+      }
+    }
+  }
+}
+</style>