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>
|