DX-LargeScreen/src/components2/table1/index.vue

<template>
  <el-table ref="initList" :data="initList"  height="11.11111vh" @row-click="clickData" highlight-current-row @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave">
      <el-table-column label="告警时间" align="center" prop="time"  show-overflow-tooltip />
      <el-table-column label="告警内容" align="center" prop="evtname"  show-overflow-tooltip />
      <el-table-column label="告警类型" align="center" prop="dwtype"  show-overflow-tooltip >
         <template slot-scope="scope">
          <span>{{scope.row.dwtype == "1" ? "用户传输装置" : scope.row.dwtype == "2" ? "喷淋水压" :
            scope.row.dwtype == "2" ? "喷淋水压" : scope.row.dwtype == "5" ? "消防水箱液位" :
            scope.row.dwtype == "6" ? "RTU" : scope.row.dwtype == "16" ? "消防视频监控" : "其它"}}</span>
        </template>
      </el-table-column>
      <el-table-column label="告警状态" align="center" prop="evt"  show-overflow-tooltip >
        <template slot-scope="scope">
          <span :class="scope.row.evt ? 'handle' : 'untreated'">{{scope.row.evt  ? "已处理" : "未处理"}}</span>
        </template>
      </el-table-column>
    </el-table>
</template>
<script>
export default {

  data() {
    return {
      initList:[],
      table_interval:null,
    };
  },
  created(){
    this.initData();
  },
  mounted() {},
  methods: {
    //初始化数据
    initData() {
      let that = this
      let num = 0
      let wsUri = "wss://iot.usky.cn:55120";
      try {
          let websocket = new WebSocket(wsUri);
          websocket.onopen = function(evt) {
            let json = {};
            json.agentid = 'admin';
            websocket.send(JSON.stringify(json));
          };
          websocket.onclose = function(evt) {
              this.initWebSocket();
          };
          websocket.onmessage = function(evt) {
            let warningInfo = eval('(' + evt.data + ')');
            if(warningInfo.dwtype){
              that.initList.push(warningInfo)
              if(num == '0'){
                if(that.initList.length>2){
                  that.dataScrolling();
                  num = 1
                }
              }
            }
          };
          websocket.onerror = function(evt) {
            // console.log("Error:", evt.data);
            (function() {})()
          };
      } catch (exception) {
        // console.log("Exception:", exception);
        (function() {})()
      }
      that.dataScrolling();
    },
    //数据滚动
    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;
    },
    //鼠标离开，开始滚动
    mouseLeave:function(){
        this.dataScrolling();
    },
    //点击行
    clickData(row, event, column){
      console.log(row.devIdx)
    },
    cellStyle (row, column, rowIndex, columnIndex) {
    //列的label的名称
      if (row.column.label === "告警" || row.column.label === "离线") {
        return 'color:#2280D9' //修改的样式
      }
    },
  },
};
</script>
<style scoped>
/*最外层透明*/
.el-table{
  height:11.11111vh !important;
}
</style>