332 lines
8.2 KiB
Vue
332 lines
8.2 KiB
Vue
<template>
|
||
<div class="top-right-box">
|
||
<ItemBox :title="$t('dashboard.realtimeAlarm')">
|
||
<div v-loading="loading" class="box">
|
||
<div class="alarm-list">
|
||
<template v-if="listData.length">
|
||
<div v-for="(item, index) in listData" :key="index" :class="index % 2 ? 'item1' : 'item'">
|
||
<div class="alarm-title">
|
||
<div class="dev">
|
||
<span class="title">{{ $t('dashboard.device') }}：</span>
|
||
<span class="value">{{ item.deviceName }}</span>
|
||
</div>
|
||
<div class="time-box">
|
||
<div class="time">{{ item.createTime }}</div>
|
||
</div>
|
||
<div class="leve">
|
||
<span :class="item.name === '异常' ? 'leve-value' : 'leve-value2'">{{ item.name }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<span class="content">{{ item.description }}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div v-else style="height:100%;text-align:center;font-size:14px;color:#999;display: flex;justify-content: center;align-items: center;">
|
||
{{ $t('screen.runSuccess' ) }}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</ItemBox>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { GetAlarmList } from '@/api/alarm/realtime'
|
||
export default {
|
||
name: 'Index',
|
||
props: {
|
||
stationId: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
config: {
|
||
header: ['等级', '内容', '时间'],
|
||
data: [],
|
||
columnWidth: [80],
|
||
align: ['center', 'center', 'center', 'center'],
|
||
headerBGC: '#062b40',
|
||
oddRowBGC: 'rgba(255, 255, 255, 0)',
|
||
evenRowBGC: 'rgba(255, 255, 255, 0.05)'
|
||
},
|
||
pageflag: false,
|
||
listData: [],
|
||
loading: false
|
||
}
|
||
},
|
||
computed: {
|
||
eventLevels() {
|
||
return this.$store.getters.dicts['eventLevel'] || []
|
||
},
|
||
eventTypes() {
|
||
return this.$store.getters.dicts['eventType'] || []
|
||
}
|
||
},
|
||
watch: {},
|
||
created() {
|
||
// this.GetAlarmList()
|
||
},
|
||
mounted() {
|
||
// this.getData()
|
||
},
|
||
methods: {
|
||
oldsortData(data) {
|
||
const result = data.sort(function(a, b) {
|
||
return b.createTime - a.createTime
|
||
})
|
||
return result
|
||
},
|
||
async getData() {
|
||
this.loading = true
|
||
this.pageflag = false
|
||
const params = {
|
||
pageNum: 1,
|
||
pageSize: 50,
|
||
status: 0,
|
||
stationIds: this.stationId ? [this.stationId] : [],
|
||
deviceTypeList: [],
|
||
description: '',
|
||
eventLevels: ['1', '2', '3'],
|
||
eventTypes: ['2', '3', '4', '5', '6']
|
||
}
|
||
this.config.data = []
|
||
try {
|
||
const res = await GetAlarmList(params)
|
||
// const sortDataRes = this.oldsortData(res.data.list)
|
||
const chartData = []
|
||
res.data.list.forEach(item => {
|
||
const eventLevel = this.getEventLevelsname(item.eventLevel)
|
||
const lastIndex = item.timeStamp.lastIndexOf('.')
|
||
const result = item.timeStamp.slice(0, lastIndex)
|
||
item.timeStamp = result
|
||
|
||
const i = {
|
||
name: eventLevel,
|
||
deviceName: item.name,
|
||
description: item.description,
|
||
createTime: item.timeStamp
|
||
}
|
||
chartData.push(i)
|
||
})
|
||
// console.log(chartData)
|
||
this.listData = chartData
|
||
|
||
this.pageflag = true
|
||
} catch (error) {
|
||
// console.log(error);
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
getEventLevelsname(item) {
|
||
return (
|
||
this.eventLevels.find(level => Number(level.value) === item).label || ''
|
||
)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.top-right-box{
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 10px;
|
||
padding-bottom: 0;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
font-family: Source Han Sans CN;
|
||
|
||
.top-box {
|
||
width: 100%;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
.alarm-list {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0 auto;
|
||
overflow: auto;
|
||
|
||
.alarm-title {
|
||
display: flex;
|
||
width: 100%;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.dev {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.title {
|
||
display: inline-block;
|
||
|
||
font-family: Source Han Sans CN;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
text-align: center;
|
||
letter-spacing: 0px;
|
||
|
||
color: rgba(206, 235, 255, 0.7);
|
||
|
||
}
|
||
|
||
.value {
|
||
|
||
font-family: Source Han Sans CN;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
letter-spacing: 0px;
|
||
|
||
color: rgba(206, 235, 255, 0.7);
|
||
width: calc(100% - 45px);
|
||
display: -webkit-box; //将盒子转换为弹性盒子
|
||
-webkit-box-orient: vertical; //文本显示方式，默认水平
|
||
-webkit-line-clamp: 1; //设置显示多少行
|
||
overflow: hidden;
|
||
}
|
||
|
||
.time {
|
||
/* 12:33:17 */
|
||
|
||
opacity: 1;
|
||
|
||
font-family: Source Han Sans CN;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
letter-spacing: 0px;
|
||
|
||
color: #ffffff;
|
||
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
.time-box {
|
||
min-width: 117px;
|
||
height: 100%;
|
||
/* 设备：PCS */
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-right: 5px;
|
||
|
||
.title {
|
||
font-family: Source Han Sans CN;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
text-align: center;
|
||
letter-spacing: 0px;
|
||
flex-shrink: 0;
|
||
|
||
color: rgba(206, 235, 255, 0.7);
|
||
}
|
||
|
||
.time {
|
||
/* 12:33:17 */
|
||
|
||
opacity: 1;
|
||
|
||
font-family: Source Han Sans CN;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
letter-spacing: 0px;
|
||
|
||
color: rgba(206, 235, 255, 0.7);
|
||
|
||
z-index: 1;
|
||
display: -webkit-box; //将盒子转换为弹性盒子
|
||
-webkit-box-orient: vertical; //文本显示方式，默认水平
|
||
-webkit-line-clamp: 1; //设置显示多少行
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.leve {
|
||
// width: 20%;
|
||
margin-left: auto;
|
||
|
||
height: 100%;
|
||
/* 异常 */
|
||
text-align: center;
|
||
opacity: 1;
|
||
font-family: Source Han Sans CN;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
letter-spacing: 0em;
|
||
color: #ffeeee;
|
||
text-shadow: 0px 0px 5px 0px #ff0000, 0px 0px 5px 0px #ffb800;
|
||
|
||
.leve-value {
|
||
display: inline-block;
|
||
width: 40px;
|
||
background: url(../../../../assets/images/alarm-error.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.leve-value2 {
|
||
display: inline-block;
|
||
width: 40px;
|
||
background: url(../../../../assets/images/alarm-error-2.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
padding: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
background-image: url('../../../../assets/images/alarm-con-bg.png');
|
||
background-size: 100% 100%;
|
||
|
||
.content {
|
||
/* 这是内容这是内容这是内容这是内容这是内容这 */
|
||
|
||
opacity: 1;
|
||
|
||
font-family: Source Han Sans CN;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
letter-spacing: 0px;
|
||
|
||
color: rgba(255, 255, 255, 1);
|
||
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.item {
|
||
width: 100%;
|
||
padding: 5px 10px;
|
||
background-color: #0c3650;
|
||
background-size: 100% 100%;
|
||
margin-bottom: 10px;
|
||
|
||
}
|
||
|
||
.item1 {
|
||
width: 100%;
|
||
padding: 5px 10px;
|
||
margin-bottom: 10px;
|
||
background-color: transparent;
|
||
background-size: 100% 100%;
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|