1
|
1
|
<template>
|
2
|
2
|
<div class="step3">
|
3
|
3
|
<template v-for="(item, index) in profileData" :key="item.id">
|
4
|
|
- <CollapseContainer class="border mb-1">
|
|
4
|
+ <CollapseContainer class="border mb-1" :canExpan="false">
|
5
|
5
|
<template #action>
|
6
|
6
|
<div @click="deleteAlarmRule(index)" class="cursor-pointer">
|
7
|
7
|
<DeleteOutlined style="font-size: 20px" class="mr-2" />
|
8
|
8
|
</div>
|
9
|
9
|
</template>
|
10
|
|
- <div style="margin-left: -30px"> <BasicForm @register="registerForm" /></div>
|
|
10
|
+ <div class="alert-type" style="margin-left: -30px; margin-top: -10px">
|
|
11
|
+ <BasicForm @register="registerForm"
|
|
12
|
+ /></div>
|
11
|
13
|
<CollapseContainer style="margin-top: -20px">
|
12
|
14
|
<template #action> </template>
|
13
|
15
|
<div style="margin-left: 10px">
|
...
|
...
|
@@ -22,52 +24,63 @@ |
22
|
24
|
<template v-for="(childItem, createIndex) in item.alarms" :key="childItem.id">
|
23
|
25
|
<div class="aic mb-1" style="border: 1px solid #bfbfbf">
|
24
|
26
|
<div class="w-3/4">
|
25
|
|
- <div style="margin-left: -30px"
|
26
|
|
- ><BasicForm @register="registerFormCreateAlarm"
|
27
|
|
- /></div>
|
28
|
|
- <div style="margin-left: 5px">
|
29
|
|
- <p style="color: #f5594e" class="mt-4 ml-4"
|
30
|
|
- >请添加报警规则条件
|
31
|
|
- <PlusOutlined
|
|
27
|
+ <div style="margin-left: -30px; margin-top: 20px"
|
|
28
|
+ ><BasicForm @register="registerFormCreateAlarm" />
|
|
29
|
+ </div>
|
|
30
|
+ <div style="margin-left: 5px; position: relative">
|
|
31
|
+ <div style="color: #f5594e" class="mt-4 ml-4"
|
|
32
|
+ >报警规则条件:
|
|
33
|
+ <Button size="small" type="primary" @click="handleOpenAlaramRuleConditions"
|
|
34
|
+ >添加</Button
|
|
35
|
+ >
|
|
36
|
+ <p>{{ ruleTemplateData }}</p>
|
|
37
|
+ <!-- <PlusOutlined
|
32
|
38
|
@click="handleOpenAlaramRuleConditions"
|
33
|
39
|
class="cursor-pointer ml-4"
|
34
|
40
|
style="font-size: 20px"
|
35
|
|
- />{{ ruleTemplateData }}
|
36
|
|
- </p>
|
37
|
|
- <p style="white-space: wrap" class="mt-4 ml-4"
|
38
|
|
- >启用规则:始终启用
|
39
|
|
- <EditOutlined
|
|
41
|
+ />{{ ruleTemplateData }} -->
|
|
42
|
+ </div>
|
|
43
|
+ <div style="white-space: wrap" class="mt-4 ml-4"
|
|
44
|
+ >启用规则:
|
|
45
|
+ <Button size="small" type="primary" @click="handleOpenEnableRule">添加</Button>
|
|
46
|
+ <p>{{ enableTemplateData }}</p>
|
|
47
|
+ <!-- <EditOutlined
|
40
|
48
|
@click="handleOpenEnableRule"
|
41
|
49
|
class="cursor-pointer ml-4"
|
42
|
50
|
style="font-size: 20px"
|
43
|
|
- />{{ enableTemplateData }}
|
44
|
|
- </p>
|
45
|
|
- <p class="mt-4 ml-4"
|
46
|
|
- >详情模板:<EditOutlined
|
|
51
|
+ /> -->
|
|
52
|
+ <div class="mt-4 ml-4" style="margin-left: 0px"
|
|
53
|
+ >详情模板:
|
|
54
|
+ <Button size="small" type="primary" @click="handleOpenDetailTemplate"
|
|
55
|
+ >添加</Button
|
|
56
|
+ >
|
|
57
|
+ <p>{{ detailTemplateData }}</p>
|
|
58
|
+ <!-- <EditOutlined
|
47
|
59
|
@click="handleOpenDetailTemplate"
|
48
|
60
|
class="cursor-pointer ml-4"
|
49
|
61
|
style="font-size: 20px"
|
50
|
|
- />{{ detailTemplateData }}
|
51
|
|
- </p>
|
52
|
|
- <div style="margin-left: 16px">
|
53
|
|
- <BasicForm @register="dashboardForm" />
|
|
62
|
+ /> -->
|
|
63
|
+ </div>
|
|
64
|
+ <div style="margin-left: 0px">
|
|
65
|
+ <BasicForm @register="dashboardForm" />
|
|
66
|
+ </div>
|
54
|
67
|
</div>
|
55
|
68
|
</div>
|
56
|
|
- </div>
|
57
|
|
- <div class="w-1/4 flex justify-center">
|
58
|
|
- <img
|
59
|
|
- style="cursor: pointer"
|
60
|
|
- @click="deleteCondition(index, createIndex)"
|
61
|
|
- alt="移除"
|
62
|
|
- src="../../../../assets/images/close.png"
|
63
|
|
- />
|
64
|
|
- <!-- <Tooltip title="移除">
|
|
69
|
+ <div class="remove-type" style="position: absolute; top: -10px; right: 10px">
|
|
70
|
+ <img
|
|
71
|
+ style="cursor: pointer"
|
|
72
|
+ @click="deleteCondition(index, createIndex)"
|
|
73
|
+ alt="移除"
|
|
74
|
+ src="../../../../assets/images/close.png"
|
|
75
|
+ />
|
|
76
|
+ <!-- <Tooltip title="移除">
|
65
|
77
|
<MinusCircleOutlined
|
66
|
78
|
style="font-size: 25px; color: #305680"
|
67
|
79
|
class="cursor-pointer"
|
68
|
80
|
@click="deleteCondition(index, createIndex)"
|
69
|
81
|
/>
|
70
|
82
|
</Tooltip> -->
|
|
83
|
+ </div>
|
71
|
84
|
</div>
|
72
|
85
|
</div>
|
73
|
86
|
</template>
|
...
|
...
|
@@ -80,48 +93,61 @@ |
80
|
93
|
<div class="aic mb-1" style="border: 1px solid #bfbfbf">
|
81
|
94
|
<div class="w-3/4">
|
82
|
95
|
<div style="margin-left: 5px">
|
83
|
|
- <p style="color: #f5594e" class="mt-4 ml-4"
|
84
|
|
- >请添加报警规则条件
|
85
|
|
- <PlusOutlined
|
|
96
|
+ <div style="color: #f5594e" class="mt-4 ml-4"
|
|
97
|
+ >报警规则条件:
|
|
98
|
+ <Button size="small" type="primary" @click="handleOpenClearAlaramRuleConditions"
|
|
99
|
+ >添加</Button
|
|
100
|
+ >
|
|
101
|
+ <p>{{ ruleClearTemplateData }}</p>
|
|
102
|
+ <!-- <PlusOutlined
|
86
|
103
|
@click="handleOpenClearAlaramRuleConditions"
|
87
|
104
|
class="cursor-pointer ml-4"
|
88
|
105
|
style="font-size: 20px"
|
89
|
|
- />{{ ruleClearTemplateData }}</p
|
90
|
|
- >
|
91
|
|
- <p class="mt-4 ml-4"
|
92
|
|
- >启用规则:始终启用
|
93
|
|
- <EditOutlined
|
|
106
|
+ /> -->
|
|
107
|
+ </div>
|
|
108
|
+ <div style="white-space: wrap" class="mt-4 ml-4"
|
|
109
|
+ >启用规则:
|
|
110
|
+ <Button size="small" type="primary" @click="handleOpenClearEnableRule"
|
|
111
|
+ >添加</Button
|
|
112
|
+ >
|
|
113
|
+ <p>{{ enableClearTemplateData }}</p>
|
|
114
|
+ <!-- <EditOutlined
|
94
|
115
|
@click="handleOpenClearEnableRule"
|
95
|
116
|
class="cursor-pointer ml-4"
|
96
|
117
|
style="font-size: 20px"
|
97
|
|
- />{{ enableClearTemplateData }}</p
|
98
|
|
- >
|
99
|
|
- <p class="mt-4 ml-4"
|
100
|
|
- >详情模板:<EditOutlined
|
|
118
|
+ /> -->
|
|
119
|
+ <div class="mt-4 ml-4" style="margin-left: 0px"
|
|
120
|
+ >详情模板:
|
|
121
|
+ <Button size="small" type="primary" @click="handleOpenClearDetailTemplate"
|
|
122
|
+ >添加</Button
|
|
123
|
+ >
|
|
124
|
+ <p>{{ detailClearTemplateData }}</p>
|
|
125
|
+ <!-- <EditOutlined
|
101
|
126
|
@click="handleOpenClearDetailTemplate"
|
102
|
127
|
class="cursor-pointer ml-4"
|
103
|
128
|
style="font-size: 20px"
|
104
|
|
- />{{ detailClearTemplateData }}</p
|
105
|
|
- >
|
106
|
|
- <div style="margin-left: 16px">
|
107
|
|
- <BasicForm @register="dashboardForm" />
|
|
129
|
+ /> -->
|
|
130
|
+ </div>
|
|
131
|
+ <div style="margin-left: 0px">
|
|
132
|
+ <BasicForm @register="dashboardForm" />
|
|
133
|
+ </div>
|
108
|
134
|
</div>
|
109
|
135
|
</div>
|
110
|
|
- </div>
|
111
|
|
- <div class="w-1/4 flex justify-center">
|
112
|
|
- <img
|
113
|
|
- style="cursor: pointer"
|
114
|
|
- @click="deleteClearCondition(index, createIndex)"
|
115
|
|
- alt="移除"
|
116
|
|
- src="../../../../assets/images/close.png"
|
117
|
|
- />
|
118
|
|
- <!-- <Tooltip title="移除">
|
|
136
|
+ <div class="w-1/4 flex justify-center">
|
|
137
|
+ <img
|
|
138
|
+ style="cursor: pointer"
|
|
139
|
+ @click="deleteClearCondition(index, createIndex)"
|
|
140
|
+ alt="移除"
|
|
141
|
+ src="../../../../assets/images/close.png"
|
|
142
|
+ />
|
|
143
|
+ <!-- <Tooltip title="移除">
|
119
|
144
|
<MinusCircleOutlined
|
120
|
145
|
style="font-size: 25px; color: #305680"
|
121
|
146
|
class="cursor-pointer"
|
122
|
147
|
@click="deleteClearCondition(index, createIndex)"
|
123
|
148
|
/>
|
124
|
149
|
</Tooltip> -->
|
|
150
|
+ </div>
|
125
|
151
|
</div>
|
126
|
152
|
</div>
|
127
|
153
|
</template>
|
...
|
...
|
@@ -204,6 +230,7 @@ |
204
|
230
|
import DetailTemplate from './cpns/detailtemplate/index.vue';
|
205
|
231
|
import EnableRule from './cpns/enablerule/index.vue';
|
206
|
232
|
import AlarmRuleConditions from './cpns/alarmruleconditions/index.vue';
|
|
233
|
+ import { Button } from '/@/components/Button';
|
207
|
234
|
|
208
|
235
|
export default defineComponent({
|
209
|
236
|
components: {
|
...
|
...
|
@@ -219,6 +246,7 @@ |
219
|
246
|
DetailTemplate,
|
220
|
247
|
EnableRule,
|
221
|
248
|
AlarmRuleConditions,
|
|
249
|
+ Button,
|
222
|
250
|
},
|
223
|
251
|
emits: ['prev', 'next'],
|
224
|
252
|
setup(_, { emit }) {
|
...
|
...
|
@@ -231,6 +259,7 @@ |
231
|
259
|
const alarmss: any = ref([]);
|
232
|
260
|
const emptyObj: any = ref({});
|
233
|
261
|
const detailObj: any = ref({});
|
|
262
|
+ const detailClearObj: any = ref({});
|
234
|
263
|
const ruleObj: any = ref({});
|
235
|
264
|
const ruleLastObj: any = ref({});
|
236
|
265
|
const enableObj: any = ref({});
|
...
|
...
|
@@ -246,32 +275,32 @@ |
246
|
275
|
const detailClearTemplateData: any = ref(null);
|
247
|
276
|
//告警列表
|
248
|
277
|
let profileData = ref<alarmListItem[]>([
|
249
|
|
- {
|
250
|
|
- configuration: {},
|
251
|
|
- transportConfiguration: {},
|
252
|
|
- provisionConfiguration: {
|
253
|
|
- provisionDeviceSecret: '',
|
254
|
|
- },
|
255
|
|
- alarms: [
|
256
|
|
- {
|
257
|
|
- id: Date.now() + Math.random(),
|
258
|
|
- alarmType: '',
|
259
|
|
- createRules: {},
|
260
|
|
- clearRule: {},
|
261
|
|
- propagate: true,
|
262
|
|
- propagateRelationTypes: [''],
|
263
|
|
- },
|
264
|
|
- ],
|
265
|
|
- clearAlarms: [
|
266
|
|
- {
|
267
|
|
- id: Date.now() + Math.random(),
|
268
|
|
- alarmType: '',
|
269
|
|
- clearRules: {},
|
270
|
|
- propagate: true,
|
271
|
|
- propagateRelationTypes: [''],
|
272
|
|
- },
|
273
|
|
- ],
|
274
|
|
- },
|
|
278
|
+ // {
|
|
279
|
+ // configuration: {},
|
|
280
|
+ // transportConfiguration: {},
|
|
281
|
+ // provisionConfiguration: {
|
|
282
|
+ // provisionDeviceSecret: '',
|
|
283
|
+ // },
|
|
284
|
+ // alarms: [
|
|
285
|
+ // {
|
|
286
|
+ // id: Date.now() + Math.random(),
|
|
287
|
+ // alarmType: '',
|
|
288
|
+ // createRules: {},
|
|
289
|
+ // clearRule: {},
|
|
290
|
+ // propagate: true,
|
|
291
|
+ // propagateRelationTypes: [''],
|
|
292
|
+ // },
|
|
293
|
+ // ],
|
|
294
|
+ // clearAlarms: [
|
|
295
|
+ // {
|
|
296
|
+ // id: Date.now() + Math.random(),
|
|
297
|
+ // alarmType: '',
|
|
298
|
+ // clearRules: {},
|
|
299
|
+ // propagate: true,
|
|
300
|
+ // propagateRelationTypes: [''],
|
|
301
|
+ // },
|
|
302
|
+ // ],
|
|
303
|
+ // },
|
275
|
304
|
]);
|
276
|
305
|
const log = (e) => {
|
277
|
306
|
console.log(e);
|
...
|
...
|
@@ -286,6 +315,7 @@ |
286
|
315
|
};
|
287
|
316
|
|
288
|
317
|
const addAlarmRule = () => {
|
|
318
|
+ console.log(typeof unref(profileData));
|
289
|
319
|
unref(profileData).push({
|
290
|
320
|
configuration: {},
|
291
|
321
|
transportConfiguration: {},
|
...
|
...
|
@@ -542,7 +572,7 @@ |
542
|
572
|
//清除条件
|
543
|
573
|
//详情模板
|
544
|
574
|
const getAllClearFieldsFunc = (v) => {
|
545
|
|
- detailObj.value = v;
|
|
575
|
+ detailClearObj.value = v;
|
546
|
576
|
detailClearTemplateData.value = `
|
547
|
577
|
报警详细信息:${v.alarmDetails}
|
548
|
578
|
`;
|
...
|
...
|
@@ -669,7 +699,7 @@ |
669
|
699
|
const getClearSchedule = {
|
670
|
700
|
schedule: scheduleClearValue,
|
671
|
701
|
};
|
672
|
|
- const getClearAdditionalProp = Object.assign({}, detailObj.value, getClearSchedule);
|
|
702
|
+ const getClearAdditionalProp = Object.assign({}, detailClearObj.value, getClearSchedule);
|
673
|
703
|
const scheduleValue = {
|
674
|
704
|
type: enableObj.value.schedule,
|
675
|
705
|
daysOfWeek: enableObj.value.daysOfWeek,
|
...
|
...
|
@@ -847,4 +877,7 @@ |
847
|
877
|
:deep(.vben-collapse-container__header) {
|
848
|
878
|
border: none;
|
849
|
879
|
}
|
|
880
|
+ :deep(.anticon svg) {
|
|
881
|
+ display: none !important;
|
|
882
|
+ }
|
850
|
883
|
</style> |
...
|
...
|
|