|
|
@@ -1,9 +1,12 @@
|
|
|
<template>
|
|
|
<div
|
|
|
v-if="hasMsg"
|
|
|
- class="c-notify"
|
|
|
+ class="c-notify u-width--lg"
|
|
|
>
|
|
|
- <el-table :data="tableData">
|
|
|
+ <el-table
|
|
|
+ size="small"
|
|
|
+ :data="tableData"
|
|
|
+ >
|
|
|
<el-table-column
|
|
|
:label="title"
|
|
|
class-name="notify-column"
|
|
|
@@ -14,7 +17,7 @@
|
|
|
icon-class="v0-alarm"
|
|
|
:color="scope.row.color"
|
|
|
/>
|
|
|
- <span style="padding:10px;">{{ scope.row.happenTime }} {{ scope.row.deviceName }} {{ scope.row.bugName || `预警码【${scope.row.deviceErrorId}】` }}</span>
|
|
|
+ <span style="padding: 8px 0 8px 4px;">{{ scope.row.message }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
@@ -57,8 +60,11 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(['userId']),
|
|
|
+ ...mapGetters(['isSuperAdmin', 'userId']),
|
|
|
topic () {
|
|
|
+ if (this.isSuperAdmin) {
|
|
|
+ return 'dashboard/event'
|
|
|
+ }
|
|
|
return `user/event/${this.userId}`
|
|
|
},
|
|
|
title () {
|
|
|
@@ -71,11 +77,7 @@ export default {
|
|
|
return this.msgData.length > 0
|
|
|
},
|
|
|
tableData () {
|
|
|
- return this.msgData.slice(0, 5).map(msg => {
|
|
|
- const { level } = msg
|
|
|
- msg.color = AlarmColors[level] || AlarmColors[2]
|
|
|
- return msg
|
|
|
- })
|
|
|
+ return this.msgData.slice(0, 5)
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
@@ -95,7 +97,21 @@ export default {
|
|
|
},
|
|
|
onMessage (topic, message) {
|
|
|
if (topic === this.topic) {
|
|
|
- this.msgData.unshift(JSON.parse(message))
|
|
|
+ this.msgData.unshift(this.transform(JSON.parse(message)))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ transform ({ tenant, level, happenTime, deviceName, deviceErrorId, bugName }) {
|
|
|
+ const errorCode = bugName || `E${deviceErrorId.toString().padStart(3, '0')}`
|
|
|
+ const time = happenTime.split(' ')[1]
|
|
|
+ let message = ''
|
|
|
+ if (this.isSuperAdmin) {
|
|
|
+ message = `${time} ${errorCode}【${tenant} ${deviceName}】`
|
|
|
+ } else {
|
|
|
+ message = `${time} ${errorCode}【${deviceName}】`
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ color: AlarmColors[level] || AlarmColors[2],
|
|
|
+ message
|
|
|
}
|
|
|
},
|
|
|
onClear () {
|
|
|
@@ -112,32 +128,25 @@ export default {
|
|
|
.c-notify {
|
|
|
position: fixed;
|
|
|
display: flex;
|
|
|
- width: 300px;
|
|
|
right: $spacing;
|
|
|
bottom: $spacing;
|
|
|
+ border-radius: 8px 8px 0 0;
|
|
|
+ box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);
|
|
|
z-index: 2000;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
|
::v-deep .el-table {
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: 10px rgba(0, 0, 0, 0.25);
|
|
|
+ border-radius: 8px 8px 0 0;
|
|
|
|
|
|
&__cell {
|
|
|
- padding: 4px 0;
|
|
|
+ padding: 2px 0;
|
|
|
}
|
|
|
|
|
|
.notify-column .cell {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .cell {
|
|
|
- font-size: $font-size--sm;
|
|
|
+ padding: 0 0 0 6px;
|
|
|
}
|
|
|
|
|
|
th.el-table__cell {
|
|
|
color: white;
|
|
|
- font-size: $font-size;
|
|
|
background-color: #1c5cb0;
|
|
|
}
|
|
|
}
|