DX-LargeScreen/src/components2/intrusionAlarm/seTable.vue

<template>
  <el-table ref="initList" :data="initList"  height="120" @row-click="clickData" highlight-current-row @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave" v-loading="loading">
      <template slot="empty">
          <span>{{text}}</span>
      </template>
      <el-table-column label="告警时间"  prop="creatTime"  show-overflow-tooltip min-width="35%" />
      <el-table-column label="告警内容"  prop="message"  show-overflow-tooltip min-width="25%" />
      <el-table-column label="告警类型"  prop="eventFlag"  show-overflow-tooltip min-width="25%">
        <template  slot-scope="scope">
            {{scope.row.eventFlag == "1" ? "主机事件" : scope.row.eventFlag == "2" ? "dk903键盘事件" :""}}
        </template>
      </el-table-column>
      <el-table-column label="状态"  prop="status"  show-overflow-tooltip min-width="15%">
        <template  slot-scope="scope">
            {{scope.row.status == "0" ? "未处理" : scope.row.status == "1" ? "已处理" :""}}
        </template>
      </el-table-column>
    </el-table>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      initList:[],
      table_interval:null,
      text:"",
      loading:true,
    };
  },
  created(){
    this.initData();
  },
  mounted() {},
  methods: {
    //初始化数据
    initData() {
      this.initList = [
    // {
    //     "id": 1,
    //     "message": "告警",
    //     "commType": "1",
    //     "connect": "192.168.1.222",
    //     "ip": "192.168.1.222",
    //     "port": "8082",
    //     "eventFlag": "1",
    //     "eventtriger": "1",
    //     "cidcode": "12145",
    //     "cidlevel": "1",
    //     "cidtype": "1",
    //     "cidmemo": "内容",
    //     "partCode": "分区",
    //     "guardCode": "分区",
    //     "creatTime": "2022-02-25 15:23:46",
    //     "status": 1,
    //     "remark": "告警",
    //     "handler": "",
    //     "updateTime": "2022-03-10 10:35:21"
    // },
    // {
    //     "id": 2,
    //     "message": "告警",
    //     "commType": "1",
    //     "connect": "192.168.1.222",
    //     "ip": "192.168.1.222",
    //     "port": "8082",
    //     "eventFlag": "1",
    //     "eventtriger": "1",
    //     "cidcode": "12145",
    //     "cidlevel": "1",
    //     "cidtype": "1",
    //     "cidmemo": "内容",
    //     "partCode": "分区",
    //     "guardCode": "分区",
    //     "creatTime": "2022-02-25 15:23:46",
    //     "status": 1,
    //     "remark": "告警",
    //     "handler": "",
    //     "updateTime": "2022-03-10 10:35:21"
    // },
    // {
    //     "id": 3,
    //     "message": "告警",
    //     "commType": "1",
    //     "connect": "192.168.1.222",
    //     "ip": "192.168.1.222",
    //     "port": "8082",
    //     "eventFlag": "1",
    //     "eventtriger": "1",
    //     "cidcode": "12145",
    //     "cidlevel": "1",
    //     "cidtype": "1",
    //     "cidmemo": "内容",
    //     "partCode": "分区",
    //     "guardCode": "分区",
    //     "creatTime": "2022-02-25 15:23:46",
    //     "status": 1,
    //     "remark": "告警",
    //     "handler": "",
    //     "updateTime": "2022-03-10 10:35:21"
    // },
    // {
    //     "id": 4,
    //     "message": "告警",
    //     "commType": "1",
    //     "connect": "192.168.1.222",
    //     "ip": "192.168.1.222",
    //     "port": "8082",
    //     "eventFlag": "1",
    //     "eventtriger": "1",
    //     "cidcode": "12145",
    //     "cidlevel": "1",
    //     "cidtype": "1",
    //     "cidmemo": "内容",
    //     "partCode": "分区",
    //     "guardCode": "分区",
    //     "creatTime": "2022-02-25 15:23:46",
    //     "status": 1,
    //     "remark": "告警",
    //     "handler": "",
    //     "updateTime": "2022-03-10 10:35:21"
    // },
    // {
    //     "id": 5,
    //     "message": "告警",
    //     "commType": "1",
    //     "connect": "192.168.1.222",
    //     "ip": "192.168.1.222",
    //     "port": "8082",
    //     "eventFlag": "1",
    //     "eventtriger": "1",
    //     "cidcode": "12145",
    //     "cidlevel": "1",
    //     "cidtype": "1",
    //     "cidmemo": "内容",
    //     "partCode": "分区",
    //     "guardCode": "分区",
    //     "creatTime": "2022-02-25 15:23:46",
    //     "status": 1,
    //     "remark": "告警",
    //     "handler": "",
    //     "updateTime": "2022-03-10 10:35:21"
    // },
    // {
    //     "id": 6,
    //     "message": "告警",
    //     "commType": "1",
    //     "connect": "192.168.1.222",
    //     "ip": "192.168.1.222",
    //     "port": "8082",
    //     "eventFlag": "1",
    //     "eventtriger": "1",
    //     "cidcode": "12145",
    //     "cidlevel": "1",
    //     "cidtype": "1",
    //     "cidmemo": "内容",
    //     "partCode": "分区",
    //     "guardCode": "分区",
    //     "creatTime": "2022-02-25 15:23:46",
    //     "status": 1,
    //     "remark": "告警",
    //     "handler": "",
    //     "updateTime": "2022-03-10 10:35:21"
    // },
    // {
    //     "id": 7,
    //     "message": "告警",
    //     "commType": "1",
    //     "connect": "192.168.1.222",
    //     "ip": "192.168.1.222",
    //     "port": "8082",
    //     "eventFlag": "1",
    //     "eventtriger": "1",
    //     "cidcode": "12145",
    //     "cidlevel": "1",
    //     "cidtype": "1",
    //     "cidmemo": "内容",
    //     "partCode": "分区",
    //     "guardCode": "分区",
    //     "creatTime": "2022-02-25 15:23:46",
    //     "status": 1,
    //     "remark": "告警",
    //     "handler": "",
    //     "updateTime": "2022-03-10 10:35:21"
    // },
    // {
    //     "id": 8,
    //     "message": "告警",
    //     "commType": "1",
    //     "connect": "192.168.1.222",
    //     "ip": "192.168.1.222",
    //     "port": "8082",
    //     "eventFlag": "1",
    //     "eventtriger": "1",
    //     "cidcode": "12145",
    //     "cidlevel": "1",
    //     "cidtype": "1",
    //     "cidmemo": "内容",
    //     "partCode": "分区",
    //     "guardCode": "分区",
    //     "creatTime": "2022-02-25 15:23:46",
    //     "status": 1,
    //     "remark": "告警",
    //     "handler": "",
    //     "updateTime": "2022-03-10 10:35:21"
    // },
    // {
    //     "id": 9,
    //     "message": "告警",
    //     "commType": "1",
    //     "connect": "192.168.1.222",
    //     "ip": "192.168.1.222",
    //     "port": "8082",
    //     "eventFlag": "1",
    //     "eventtriger": "1",
    //     "cidcode": "12145",
    //     "cidlevel": "1",
    //     "cidtype": "1",
    //     "cidmemo": "内容",
    //     "partCode": "分区",
    //     "guardCode": "分区",
    //     "creatTime": "2022-02-25 15:23:46",
    //     "status": 1,
    //     "remark": "告警",
    //     "handler": "",
    //     "updateTime": "2022-03-10 10:35:21"
    // },
    // {
    //     "id": 10,
    //     "message": "告警",
    //     "commType": "1",
    //     "connect": "192.168.1.222",
    //     "ip": "192.168.1.222",
    //     "port": "8082",
    //     "eventFlag": "1",
    //     "eventtriger": "1",
    //     "cidcode": "12145",
    //     "cidlevel": "1",
    //     "cidtype": "1",
    //     "cidmemo": "内容",
    //     "partCode": "分区",
    //     "guardCode": "分区",
    //     "creatTime": "2022-02-25 15:23:46",
    //     "status": 1,
    //     "remark": "告警",
    //     "handler": "",
    //     "updateTime": "2022-03-10 10:35:21"
    // },
    // {
    //     "id": 11,
    //     "message": "告警",
    //     "commType": "1",
    //     "connect": "192.168.1.222",
    //     "ip": "192.168.1.222",
    //     "port": "8082",
    //     "eventFlag": "1",
    //     "eventtriger": "1",
    //     "cidcode": "12145",
    //     "cidlevel": "1",
    //     "cidtype": "1",
    //     "cidmemo": "内容",
    //     "partCode": "分区",
    //     "guardCode": "分区",
    //     "creatTime": "2022-02-25 15:23:46",
    //     "status": 1,
    //     "remark": "告警",
    //     "handler": "",
    //     "updateTime": "2022-03-10 10:35:21"
    // },
    // {
    //     "id": 12,
    //     "message": "告警",
    //     "commType": "1",
    //     "connect": "192.168.1.222",
    //     "ip": "192.168.1.222",
    //     "port": "8082",
    //     "eventFlag": "1",
    //     "eventtriger": "1",
    //     "cidcode": "12145",
    //     "cidlevel": "1",
    //     "cidtype": "1",
    //     "cidmemo": "内容",
    //     "partCode": "分区",
    //     "guardCode": "分区",
    //     "creatTime": "2022-02-25 15:23:46",
    //     "status": 1,
    //     "remark": "告警",
    //     "handler": "",
    //     "updateTime": "2022-03-10 10:35:21"
    // }
]
        axios({
            method: 'post',
            url: 'http://10.21.39.1:8082/PerimeterController/queryPerimeterAlarm',
            data:{
                pageNo: 1,
                pageSize: 50,
            },
            timeout: 3000,
        }).then(res =>{
            if(res.data.data.pageList){
                let data = res.data.data.pageList
                this.initList = data
            }
            this.loading = false
            this.text = "暂无数据"
        }).catch(err =>{
          this.loading = false
          this.text = "数据加载失败..."
        })
    },
    //数据滚动
    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){
      this.$emit("rqgjClick",row)
    },
    // cellStyle (row, column, rowIndex, columnIndex) {
    // //列的label的名称
    //   if (row.column.label === "告警" || row.column.label === "离线") {
    //     return 'color:#2280D9' //修改的样式
    //   }
    // },
  },
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/common.scss';
::v-deep {
  .el-table__body-wrapper::-webkit-scrollbar {
    /*width: 0;宽度为0隐藏*/
    width: 4px;
  }
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 6px;
    height: 50px;
    background: $white;//滚动条颜色
  }
  .el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(35,40,49,1);
    border-radius: 6px;
    background: $modularBackGround;//滚动条背景色
  }
}
</style>