AlarmDetailDrawer.vue
2.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<template>
<BasicDrawer v-bind="$attrs" title="告警详情" @register="registerDrawer" width="30%">
<BasicForm @register="registerForm" />
<div class="flex justify-end">
<!-- [
'激活未确认: 可以处理，清除',
'激活已确认: 只可清除，已经处理',
'清除未确认: 只可处理，已经清除',
'清除已确认: 不需要做处理和清除',
] -->
<a-button
type="primary"
class="mr-4"
@click="handleAlarm"
v-if="alarmStatus !== AlarmStatus.ACTIVE_ACK && alarmStatus !== AlarmStatus.CLEARED_ACK"
>
处理
</a-button>
<a-button
danger
type="primary"
@click="clearAlarm"
v-if="alarmStatus === AlarmStatus.ACTIVE_ACK"
>
清除
</a-button>
</div>
</BasicDrawer>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form';
import { alarmSchemasForm } from '../config/detail.config';
import { clearOrAckAlarm } from '/@/api/device/deviceManager';
import { alarmLevel, statusType } from '/@/views/device/list/config/detail.config';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { AlarmStatus } from '/@/enums/alarmEnum';
export default defineComponent({
name: 'AlarmDetailDrawer',
components: {
BasicForm,
BasicDrawer,
},
emits: ['success', 'register'],
setup(_, { emit }) {
const [registerForm, { setFieldsValue, resetFields }] = useForm({
showActionButtonGroup: false,
schemas: alarmSchemasForm,
labelCol: {
span: 5,
},
});
const alarmId = ref('');
const alarmStatus = ref('');
const [registerDrawer, { closeDrawer }] = useDrawerInner(async (data) => {
await resetFields();
const { deviceAlias, deviceName, severity, status, details, id } = data || {};
await setFieldsValue({
...data,
deviceName: deviceAlias || deviceName,
severity: alarmLevel(severity),
status: statusType(status),
details: JSON.stringify(details),
});
alarmStatus.value = status;
alarmId.value = id;
});
// 处理报警
const handleAlarm = async () => {
await clearOrAckAlarm(unref(alarmId), false);
emit('success');
closeDrawer();
};
// 清除报警
const clearAlarm = async () => {
await clearOrAckAlarm(unref(alarmId), true);
emit('success');
closeDrawer();
};
return {
registerDrawer,
registerForm,
clearAlarm,
handleAlarm,
alarmStatus,
AlarmStatus,
};
},
});
</script>
<style lang="less" scoped></style>