|
@@ -44,13 +44,13 @@ const initFetchAlarmList = async () => { |
|
@@ -44,13 +44,13 @@ const initFetchAlarmList = async () => { |
44
|
const { startTime, endTime, deviceId, interval, autoPlay, polling }
|
44
|
const { startTime, endTime, deviceId, interval, autoPlay, polling }
|
45
|
= alarmListOption
|
45
|
= alarmListOption
|
46
|
|
46
|
|
47
|
- const resp = (await fetchAlarmList({
|
47
|
+ const resp = await fetchAlarmList({
|
48
|
startTime,
|
48
|
startTime,
|
49
|
endTime,
|
49
|
endTime,
|
50
|
deviceIds: deviceId,
|
50
|
deviceIds: deviceId,
|
51
|
page: 1,
|
51
|
page: 1,
|
52
|
pageSize: 30,
|
52
|
pageSize: 30,
|
53
|
- }))
|
53
|
+ })
|
54
|
|
54
|
|
55
|
initOptions.alarmList = resp.items || []
|
55
|
initOptions.alarmList = resp.items || []
|
56
|
initOptions.interval = interval * 1000 || 0
|
56
|
initOptions.interval = interval * 1000 || 0
|
|
@@ -81,16 +81,55 @@ onMounted(async () => { |
|
@@ -81,16 +81,55 @@ onMounted(async () => { |
81
|
})
|
81
|
})
|
82
|
}
|
82
|
}
|
83
|
})
|
83
|
})
|
|
|
84
|
+
|
|
|
85
|
+/**
|
|
|
86
|
+ * 之前返回的有status,是通过status判断告警级别的
|
|
|
87
|
+ * 现在没有返回此字段,是通过acknowledged和cleared来判断告警级别
|
|
|
88
|
+ */
|
|
|
89
|
+const formatAlarmStatusName = (acknowledged: boolean, cleared: boolean) => {
|
|
|
90
|
+ const value = {
|
|
|
91
|
+ text: '',
|
|
|
92
|
+ color: '',
|
|
|
93
|
+ }
|
|
|
94
|
+ if (!acknowledged && !cleared) {
|
|
|
95
|
+ value.text = AlarmStatusNameEnum.ACTIVE_UNACK
|
|
|
96
|
+ value.color = AlarmStatusColorEnum.ACTIVE_UNACK
|
|
|
97
|
+ }
|
|
|
98
|
+ else if (!acknowledged && cleared) {
|
|
|
99
|
+ value.text = AlarmStatusNameEnum.CLEARED_UNACK
|
|
|
100
|
+ value.color = AlarmStatusColorEnum.CLEARED_UNACK
|
|
|
101
|
+ }
|
|
|
102
|
+ else if (acknowledged && cleared) {
|
|
|
103
|
+ value.text = AlarmStatusNameEnum.CLEARED_ACK
|
|
|
104
|
+ value.color = AlarmStatusColorEnum.CLEARED_ACK
|
|
|
105
|
+ }
|
|
|
106
|
+ else {
|
|
|
107
|
+ value.text = AlarmStatusNameEnum.ACTIVE_ACK
|
|
|
108
|
+ value.color = AlarmStatusColorEnum.ACTIVE_ACK
|
|
|
109
|
+ }
|
|
|
110
|
+ return value
|
|
|
111
|
+}
|
|
|
112
|
+//
|
84
|
</script>
|
113
|
</script>
|
85
|
|
114
|
|
86
|
<template>
|
115
|
<template>
|
87
|
- <div class="seamless-scroll w-full h-full flex justify-center items-center overflow-y-scroll">
|
116
|
+ <div
|
|
|
117
|
+ class="seamless-scroll w-full h-full flex justify-center items-center overflow-y-scroll"
|
|
|
118
|
+ >
|
88
|
<ScrollList
|
119
|
<ScrollList
|
89
|
v-if="initOptions.alarmList.length"
|
120
|
v-if="initOptions.alarmList.length"
|
90
|
- v-model="initOptions.scroll" :single-wait-time="initOptions.interval" :single-height="58" :list="initOptions.alarmList"
|
|
|
91
|
- :delay="10" hover
|
121
|
+ v-model="initOptions.scroll"
|
|
|
122
|
+ :single-wait-time="initOptions.interval"
|
|
|
123
|
+ :single-height="58"
|
|
|
124
|
+ :list="initOptions.alarmList"
|
|
|
125
|
+ :delay="10"
|
|
|
126
|
+ hover
|
92
|
>
|
127
|
>
|
93
|
- <div v-for="(item, index) in initOptions.alarmList" :key="index" class="flex flex-col items-start p-2 border-gray-600 border-t border-solid border-b-transparent border-l-transparent border-r-transparent">
|
128
|
+ <div
|
|
|
129
|
+ v-for="(item, index) in initOptions.alarmList"
|
|
|
130
|
+ :key="index"
|
|
|
131
|
+ class="flex flex-col items-start p-2 border-gray-600 border-t border-solid border-b-transparent border-l-transparent border-r-transparent"
|
|
|
132
|
+ >
|
94
|
<div class="text-xs mb-2">
|
133
|
<div class="text-xs mb-2">
|
95
|
<span>设备:</span>
|
134
|
<span>设备:</span>
|
96
|
<span class="ml-1">{{ item.deviceAlias || item.deviceName }}</span>
|
135
|
<span class="ml-1">{{ item.deviceAlias || item.deviceName }}</span>
|
|
@@ -98,8 +137,13 @@ onMounted(async () => { |
|
@@ -98,8 +137,13 @@ onMounted(async () => { |
98
|
<div class="flex items-center justify-between -mt-2 text-xs">
|
137
|
<div class="flex items-center justify-between -mt-2 text-xs">
|
99
|
<span>时间:</span>
|
138
|
<span>时间:</span>
|
100
|
<span class="ml-1">{{ item.startTs }}</span>
|
139
|
<span class="ml-1">{{ item.startTs }}</span>
|
101
|
- <Tag class="ml-2" :color="AlarmStatusColorEnum[item.status]">
|
|
|
102
|
- {{ AlarmStatusNameEnum[item.status] }}
|
140
|
+ <Tag
|
|
|
141
|
+ class="ml-2"
|
|
|
142
|
+ :color="
|
|
|
143
|
+ formatAlarmStatusName(item.acknowledged, item.cleared)?.color
|
|
|
144
|
+ "
|
|
|
145
|
+ >
|
|
|
146
|
+ {{ formatAlarmStatusName(item.acknowledged, item.cleared)?.text }}
|
103
|
</Tag>
|
147
|
</Tag>
|
104
|
</div>
|
148
|
</div>
|
105
|
</div>
|
149
|
</div>
|
|
@@ -110,10 +154,8 @@ onMounted(async () => { |
|
@@ -110,10 +154,8 @@ onMounted(async () => { |
110
|
|
154
|
|
111
|
<style scoped lang="less">
|
155
|
<style scoped lang="less">
|
112
|
.seamless-scroll {
|
156
|
.seamless-scroll {
|
113
|
-
|
|
|
114
|
::-webkit-scrollbar {
|
157
|
::-webkit-scrollbar {
|
115
|
display: none;
|
158
|
display: none;
|
116
|
-
|
|
|
117
|
}
|
159
|
}
|
118
|
}
|
160
|
}
|
119
|
</style> |
161
|
</style> |