MTLargeScreen/src/components/record/equipment/index.vue

<template>
    <van-row class="recordList">
      <van-row class="titleWrap">
        <span class="line"></span>
        <span class="title">设备告警信息</span>
      </van-row>
      <el-table ref="initList" :data="initList"  height="180px"  highlight-current-row :header-cell-style="{background:'#F5F5F5',color:'#000','font-weight':'400'}" class="table">
      <el-table-column label="告警时间"  prop="alarmTime"  show-overflow-tooltip  min-width="35%" />
      <el-table-column label="告警内容"  prop="property"  show-overflow-tooltip min-width="25%" />
      <el-table-column label="告警类型"  prop="deviceTypeName"  show-overflow-tooltip min-width="25%" />
      <!-- <el-table-column label="状态"  prop="alarmStatus"  show-overflow-tooltip min-width="15%" >
        <template slot-scope="scope">
          <span :class="scope.row.alarmStatus == '1' ? 'color8' : 'color1'">{{scope.row.alarmStatus == "1"  ? "已处理" : "未处理"}}</span>
        </template>
      </el-table-column> -->
    </el-table>
    </van-row>
</template>
<script>
import axios from 'axios'
import { YearMonthDate } from "@/assets/js/dataFormate.js";
export default {
  data() {
    return {
      initList:[
        // {alarmTime:'2022-05-10 12:33:53',property:'故障',deviceType:1,deviceTypeName:'1层监控室用户信息传输装置',deviceId:'74869'},
        // {alarmTime:'2022-05-08 00:30:40',property:'故障',deviceType:1,deviceTypeName:'1层监控室用户信息传输装置',deviceId:'74869'},
        // {alarmTime:'2022-03-13 08:06:01',property:'故障',deviceType:1,deviceTypeName:'1层监控室用户信息传输装置',deviceId:'74869'},
        // {alarmTime:'2022-03-10 19:41:23',property:'故障',deviceType:1,deviceTypeName:'1层监控室用户信息传输装置',deviceId:'74869'},
        // {alarmTime:'2022-03-05 03:12:21',property:'故障',deviceType:1,deviceTypeName:'1层监控室用户信息传输装置',deviceId:'74869'}
      ],
      table_interval:null,
    };
  },
  created(){
    this.initData();
  },

  mounted() {},
  methods: {
    //初始化数据
    initData() {
      // 
      axios({
        method: 'post',
        url: 'https://smartpark.caih.com/dmapi/tbAlarm/page',
        timeout: 3000,
        data:{
          startTime:YearMonthDate().split(" ")[0] + " 00:00:00",
          endTime:YearMonthDate(),
          current:1,
          size:500,
          type:1
        }
      }).then(res =>{
          this.initList = res.data.data.records
      })
      let that = this
      let num = 0
      if ("WebSocket" in window) {
				this.ws = new WebSocket("ws://10.21.39.1:8084/dm/alarmPush");
				this.ws.onopen = ()=> {
				// console.log("websocket连接成功");
				this.sendWs({agentid:'admin'});
				};
				this.ws.onmessage = (res) => { //接收websocket消息
					let warningInfo = JSON.parse(res.data)
          if(warningInfo.property != "火警" && warningInfo.property != "故障"){
            that.initList.push(warningInfo)
          }
          if(num == '0'){
            if(that.initList.length>2){
              that.dataScrolling();
              num = 1
            }
          }
				};
				this.ws.onclose = ()=> { //关闭websocket
					// 关闭 websocket
					//console.log("连接已关闭...");
					//断线重新连接
					setTimeout(() => {
						this.initData();
					}, 2000);
				}
			} else {
				// 浏览器不支持 WebSocket
				alert("您的浏览器不支持 WebSocket!");
			}
      // that.dataScrolling();
    },
    sendWs(val){
			if (this.ws && this.ws.readyState == 1) {
				this.ws.send(JSON.stringify(val));
				// console.log('发送成功')
			} else {
				setTimeout(() => {
				  this.sendWs(val);
				}, 100);
			}
		},
    //数据滚动
    dataScrolling:function(){
        let top=this.$refs.initList.bodyWrapper;
        
        this.table_interval=setInterval(() => {
            top.scrollTop+=1;
            if(top.clientHeight+top.scrollTop==top.scrollHeight){
              top.scrollTop=0;
            }
        }, 100);
    },
    //鼠标进入，停止滚动
    mouseEnter:function(){
        clearInterval(this.table_interval);
        this.table_interval=null;
    },
    timing(){
      setInterval(() =>{
        this.initList = []
      },1000 * 60 * 10)
    },
  },
};
</script>

<style lang="scss" scoped></style>