<template>
|
<div class="TimesLogs-table">
|
<!--<dv-scroll-board :config="ywTableConfig" style="width:500px;height:100%" />-->
|
<el-table
|
@row-click="handleRowClick"
|
style="width: 100%"
|
:data="tableData">
|
<el-table-column
|
prop="warnDate"
|
label="时间"
|
show-overflow-tooltip
|
align="left"
|
header-align="left"
|
:formatter="formatData"
|
min-width="45">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="设备名称"
|
show-overflow-tooltip
|
align="left"
|
header-align="left"
|
min-width="60">
|
</el-table-column>
|
<el-table-column
|
prop="content"
|
label="原因"
|
show-overflow-tooltip
|
align="left"
|
header-align="left"
|
min-width="70">
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
import animateCSS from "../../../../libs/animateCSS";
|
import {getWarn} from '@/api/daping'
|
export default {
|
name: "TimesLogsTable",
|
props: {
|
logType: {
|
type: String,
|
default: 1
|
},
|
label: {
|
type:String,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
tableData:[],
|
timmer:null, //定时器
|
type:null
|
/*ywTableConfig: {
|
header: ['时间','设备名称','原因'],
|
headerBGC: 'rgba(255, 255, 255, 0)',
|
oddRowBGC: 'rgba(0,213,255,0.08)',
|
evenRowBGC: 'rgba(255, 255, 255, 0)',
|
// indexHeader: '#',
|
// index: 'true',
|
align:'center',
|
hoverPause: 'true',
|
columnWidth: [100,140],
|
data: [
|
['2023-04-06','3号服务器异常，报警错误', '异常错误'],
|
['2023-04-06','3号服务器异常，报警错误', '异常错误'],
|
['2023-04-06','3号服务器异常，报警错误', '异常错误'],
|
['2023-04-03','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
],
|
rowNum: 14
|
},*/
|
}
|
},
|
watch: {
|
tableData: {
|
handler(newVal,oldVal) {
|
if(oldVal && oldVal.length > 0) {
|
if(newVal[0].warnDate != oldVal[0].warnDate) {
|
let dom = document.querySelector('.el-table__body tbody')
|
let list = dom.childNodes
|
for(let i=0;i<list.length;i++) {
|
if(list[i].nodeType == 1) {
|
if(i == 0) {
|
list[0].classList.add('animate__animated','animate__bounceIn')
|
// animateCSS(`.tiaodong${newVal[0].id}`, 'heartBeat')
|
// animateCSS(`.tiaodong${newVal[0].id}`, 'borderCircle')
|
/*let a = document.querySelector(`.tiaodong${newVal[0].compId}`)
|
a.classList.add('animate__animated','borderName')*/
|
setTimeout(() => {
|
list[0].classList.remove('animate__animated','animate__bounceIn')
|
},1000)
|
}else {
|
list[i].classList.add('animate__animated','animate__fadeInDown')
|
setTimeout(() => {
|
list[i].classList.remove('animate__animated','animate__fadeInDown')
|
},1000)
|
}
|
}
|
}
|
}
|
}
|
},
|
deep: true,
|
immediate: true
|
},
|
logType: {
|
handler(newVal,oldVal) {
|
console.log('new===',newVal)
|
console.log('old=---',oldVal)
|
this.type = newVal
|
},
|
immediate:true
|
}
|
},
|
mounted() {
|
console.log(this.type,'222222222222222----type---初始化')
|
this.getWarn() //默认主机状态下 1.主机 2.数通设备 3.ups 4.空调 5.温湿度 6、漏水 7.其他
|
this.timmer = setInterval(() => {
|
this.getWarn()
|
},180000)
|
},
|
methods: {
|
handleRowClick(row) { //点击行跳转链接
|
console.log(row,'row====')
|
if(row.type) {
|
if(row.type == 3 || row.type == 4 || row.type == 5 || row.type == 6){
|
window.open('http://139.24.190.121:8080/login.html','_blank')
|
}
|
if(row.type == 1 || row.type == 2) {
|
window.open('http://139.24.190.120:9999/tssw','_blank')
|
}
|
}
|
|
},
|
formatData(val) {
|
if(val) {
|
return this.moment(val.warnDate).format('HH:mm:ss')
|
}
|
},
|
getWarn(){
|
if(this.label == '全部') this.type = null //全部不传type参数
|
console.log(this.type,'type----接口')
|
let param = null
|
if(this.type) {
|
param = Number(this.type)
|
}
|
getWarn({type:param}).then(res => {
|
if(res.code == 0) {
|
this.tableData = res.data
|
}
|
|
})
|
},
|
},
|
destroyed() {
|
clearInterval(this.timmer)
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
.TimesLogs-table{
|
width: 100%;
|
height: 100%;
|
/*.dv-scroll-board{*/
|
/* width: 100% !important;*/
|
/* height: 100%!important;*/
|
/*}*/
|
/*.header-item{*/
|
/* width: 50%;*/
|
/* display: flex;*/
|
/* justify-content: center;*/
|
/*}*/
|
/*.dv-scroll-board .rows .ceil{*/
|
/* font-size: 0.0677rem !* 13/192 *!;*/
|
/*}*/
|
.el-table, .el-table__expanded-cell,.el-table tr,.el-table th.el-table__cell{
|
background: transparent;
|
}
|
.el-table thead,.el-table{
|
color: #fff;
|
}
|
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
|
border:none;
|
}
|
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
|
background:rgba(0,213,255,0.08);
|
}
|
.el-table__row{
|
&:nth-child(odd) {
|
background:rgba(0,213,255,0.08);
|
}
|
}
|
.el-table::before{
|
height: 0;
|
}
|
.el-table th.el-table__cell>.cell{
|
font-size: 0.0729rem /* 14/192 */;
|
}
|
.el-table td.el-table__cell div{
|
font-size: 0.0729rem /* 14/192 */;
|
}
|
.el-table .cell,.el-table th > .cell {
|
display: inline-block;
|
white-space: nowrap;
|
width: auto;
|
}
|
.el-table .el-table__cell{
|
padding: 0.026rem /* 5/192 */ 0;
|
}
|
}
|
</style>
|
<style scoped>
|
|
</style>
|
