securityHtml/src/views/index/components/alarming.vue

<template>
  <div class="panel alarming">
    <div class="panel-tit">告警信息</div>

    <table class="alarm-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>报警时间</th>
          <th>报警事件</th>
        </tr>
      </thead>
    </table>
    <div class="scroll gj">
      <table class="alarm-table">
        <tbody id="scroll-box">
          <tr @click="abnormal('')" v-for="item in arrayList" :key="item.id">
            <td>{{ item.id }}</td>
            <td class="online">{{ item.creatTime }}</td>
            <td>
                 {{item.eventtriger == "1" ? "恢复事件" : item.eventtriger == "2" ? "触发事件" :""}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="panel-footer"></div>
  </div>
</template>
<script>
import api from "@/api/alarming"
export default {
  name: "alarming",
  data() {
    return {
      username: "",
      path: "",
      socket: "",
      arrayList: [],
    };
  },
  mounted() {
    // 初始化
    this.init();
    this.scroll();
  },
  methods: {
    scroll() {
       api.queryPerimeterAlarm().then((response)=>{
        if(response.status == "SUCCESS"){
          if(response.data.pageList.length>0){
            this.arrayList = response.data.pageList
            if (this.arrayList.length > 5) {
              const dom = document.getElementById("scroll-box");
              const that = this;
              let timer = null;
              const animationEndHandler = (evt) => {
                const dom = document.getElementById("scroll-box");
                dom.style.cssText = "transform:translate(0,0)";
                dom.appendChild(dom.children[0]); //把第一个DOM添加到最后一个去
              };
              const mouseEnterHander = (evt) => {
                clearInterval(timer);
              };
              const initInterval = () => {
                timer = setInterval(() => {
                  if (dom.children[0]) {
                    let scrollHeight = dom.children[0].offsetHeight;
                    scrollHeight = parseInt(scrollHeight);
                    dom.style.cssText = `transform:translate(0px,-${
                      scrollHeight
                    }px);transition:all 1s ease;`;
                  }
                }, 3000);
              };
              const mouseLeaveHandler = () => {
                initInterval();
              };
              dom.addEventListener("mouseenter", mouseEnterHander);
              dom.addEventListener("mouseleave", mouseLeaveHandler);
              dom.removeEventListener("transitionend", animationEndHandler);
              dom.addEventListener("transitionend", animationEndHandler); //只要监听到translate就会执行,这样就能一直动了
              initInterval();
            }
          }
        }
      })

    },
    init: function () {
      let wsUrl = window.PLATFROM_WEBSOCKET.wsUrl
      this.path = wsUrl;
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
    },
    open: function () {
      console.log("socket连接成功");
    },
    error: function () {
      console.log("连接错误");
    },
    getMessage: function (msg) {
      this.arrayList = JSON.parse(msg.data)
    },
    send: function () {
      this.socket.send(params);
    },
    close: function () {
      console.log("socket已经关闭");
    },
  },
  destroyed() {
    // 销毁监听
    this.socket.onclose = this.close;
  },
};
</script>
<style lang="scss" scoped>
#scroll-box {
  height: 16rem;
}
.panel.alarming {
  margin-top: 2rem;
  z-index: 3;
  box-sizing: border-box;
  table {
    padding: 0 1rem;

    border-spacing: 0;
  }

  tr td,
  tr th {
    font-size: 1.4rem;
    height:0.5rem;
    line-height: 3rem;
    text-align: left;
    // padding: 0 1rem;
    // padding: 0;
    // margin: 0;
    // background:pink;
    border-bottom: 1px solid #1c5899;
    border-left: 0px solid red;
    border-right: 0px solid red;
    border-top: 0px solid red;
  }
  .alarm-table tr td:first-child,
  .alarm-table tr th:first-child {
    width: 16%;
  }

  .alarm-table tr td:nth-child(2),
  .alarm-table tr th:nth-child(2) {
    width: 60%;
  }

  .alarm-table tr td:nth-child(3),
  .alarm-table tr th:nth-child(3) {
    width: 100px;
  }
}
.gj{
  height: calc(100vh - 80rem);
  overflow: hidden;
}
.alarm-table tr td{
  height:30px !important;
}
</style>
<style lang="scss">
</style>