简柏林 / thingskit-front · Commits

Commit 9965f1423ad38bf5d1fa90f3c6f267e4e0080e91

Authored by xp.Huang
2 parents 5366af27 fbfd0b98

Merge branch 'ft-dev' into 'main' 

refractor:重构设备配置新增完成

See merge request huang/yun-teng-iot-front!154
Inline Side-by-side
Showing 9 changed files with 620 additions and 1253 deletions
@@ -105,11 +105,7 @@ @@ -105,11 +105,7 @@
105 messageMode: '', 105 messageMode: '',
106 }, 106 },
107 }); 107 });
108 - const isGetStepThreeData = reactive({  
109 - profileData: {  
110 - alarms: [],  
111 - },  
112 - }); 108 + let isGetStepThreeData = reactive({});
113 const postEditId = ref(''); 109 const postEditId = ref('');
114 const current = ref(0); 110 const current = ref(0);
115 const isUpdate = ref(0); 111 const isUpdate = ref(0);
@@ -126,7 +122,7 @@ @@ -126,7 +122,7 @@
126 const [register, { closeModal }] = useModalInner(async (data) => { 122 const [register, { closeModal }] = useModalInner(async (data) => {
127 isUpdate.value = data.isUpdate; 123 isUpdate.value = data.isUpdate;
128 if (isUpdate.value == 1) { 124 if (isUpdate.value == 1) {
129 - proxy.$refs.DeviceProfileStep3Ref.isAddRuleStatusFunc(true); 125 + // proxy.$refs.DeviceProfileStep3Ref.isAddRuleStatusFunc(true);
130 isShowRule.value = true; 126 isShowRule.value = true;
131 isShowOkBtnFalse.value = true; 127 isShowOkBtnFalse.value = true;
132 current.value = 0; 128 current.value = 0;
@@ -134,15 +130,15 @@ @@ -134,15 +130,15 @@
134 //清空第一步数据 130 //清空第一步数据
135 proxy.$refs.DeviceProfileStep1Ref?.resetIconFunc(); 131 proxy.$refs.DeviceProfileStep1Ref?.resetIconFunc();
136 proxy.$refs.DeviceProfileStep1Ref?.customResetStepOneFunc(); 132 proxy.$refs.DeviceProfileStep1Ref?.customResetStepOneFunc();
137 - proxy.$refs.DeviceProfileStep3Ref?.clearProfileDataFunc1();  
138 - proxy.$refs.DeviceProfileStep3Ref?.deleteClearCondition(); 133 + // proxy.$refs.DeviceProfileStep3Ref?.clearProfileDataFunc1();
  134 + // proxy.$refs.DeviceProfileStep3Ref?.deleteClearCondition();
139 //报警详细信息 135 //报警详细信息
140 - proxy.$refs.DeviceProfileStep3Ref?.setRegisterFormChangeDetailFunc({  
141 - isEditStatus: false,  
142 - stepThreeData: {},  
143 - }); 136 + // proxy.$refs.DeviceProfileStep3Ref?.setRegisterFormChangeDetailFunc({
  137 + // isEditStatus: false,
  138 + // stepThreeData: {},
  139 + // });
144 } else if (isUpdate.value == 2) { 140 } else if (isUpdate.value == 2) {
145 - isGetStepThreeData.profileData.alarms.length = 0; 141 + // isGetStepThreeData.profileData.alarms.length = 0;
146 try { 142 try {
147 proxy.$refs.DeviceProfileStep3Ref?.clearEditAllRegisterFormFunc(); 143 proxy.$refs.DeviceProfileStep3Ref?.clearEditAllRegisterFormFunc();
148 } catch (e) { 144 } catch (e) {
@@ -289,49 +285,57 @@ @@ -289,49 +285,57 @@
289 } 285 }
290 const handleSubmit = async () => { 286 const handleSubmit = async () => {
291 if (isUpdate.value == 1) { 287 if (isUpdate.value == 1) {
292 - isGetStepThreeData.profileData.alarms = getStepThreeData.value;  
293 - getStepFourData = await proxy.$refs.DeviceProfileStep4Ref.getAllFields();  
294 - const getJoinAlarmContactIdData = getStepFourData.alarmContactId.join(',');  
295 - const getJoinMessageModeData = getStepFourData.messageMode.join(',');  
296 - getAlarmContactId.value = getJoinAlarmContactIdData;  
297 - getMessageMode.value = getJoinMessageModeData;  
298 - alarmProfileData.alarmProfile.alarmContactId = getAlarmContactId.value;  
299 - alarmProfileData.alarmProfile.messageMode = getMessageMode.value; 288 + const step1Val = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
  289 + isGetStepThreeData = {
  290 + ...{
  291 + profileData:
  292 + getStepThreeData.value.length == 0 ? { alarms: null } : getStepThreeData.value,
  293 + },
  294 + };
  295 + try {
  296 + getStepFourData = await proxy.$refs.DeviceProfileStep4Ref?.getAllFields();
  297 + const getJoinAlarmContactIdData = getStepFourData.alarmContactId.join(',');
  298 + const getJoinMessageModeData = getStepFourData.messageMode.join(',');
  299 + getAlarmContactId.value = getJoinAlarmContactIdData;
  300 + getMessageMode.value = getJoinMessageModeData;
  301 + alarmProfileData.alarmProfile.alarmContactId = getAlarmContactId.value;
  302 + alarmProfileData.alarmProfile.messageMode = getMessageMode.value;
  303 + } catch {}
300 Object.assign( 304 Object.assign(
301 postDeviceConfogData.value, 305 postDeviceConfogData.value,
302 - getStepOneData.value, 306 + step1Val,
303 getStepTwoData.value, 307 getStepTwoData.value,
304 isGetStepThreeData, 308 isGetStepThreeData,
305 - alarmProfileData 309 + alarmProfileData.alarmProfile.alarmContactId == '' ? null : alarmProfileData
306 ); 310 );
307 await deviceConfigAddOrEdit(postDeviceConfogData.value); 311 await deviceConfigAddOrEdit(postDeviceConfogData.value);
308 - createMessage.success('新增设备配置成功'); 312 + createMessage.success('新增成功');
309 closeModal(); 313 closeModal();
310 emit('success'); 314 emit('success');
311 } else if (isUpdate.value == 2) { 315 } else if (isUpdate.value == 2) {
312 - isGetStepThreeData.profileData.alarms =  
313 - isEditAndChange.value == true  
314 - ? editData.value.profileData.alarms  
315 - : getStepThreeData.value;  
316 - postDeviceConfogData.value.id = postEditId.value;  
317 - getStepFourData = await proxy.$refs.DeviceProfileStep4Ref.getAllFields();  
318 - const getJoinAlarmContactIdData = getStepFourData.alarmContactId.join(',');  
319 - const getJoinMessageModeData = getStepFourData.messageMode.join(',');  
320 - getAlarmContactId.value = getJoinAlarmContactIdData;  
321 - getMessageMode.value = getJoinMessageModeData;  
322 - alarmProfileData.alarmProfile.alarmContactId = getAlarmContactId.value;  
323 - alarmProfileData.alarmProfile.messageMode = getMessageMode.value;  
324 - Object.assign(  
325 - postDeviceConfogData.value,  
326 - getStepOneData.value,  
327 - getStepTwoData.value,  
328 - isGetStepThreeData,  
329 - alarmProfileData  
330 - );  
331 - await deviceConfigAddOrEdit(postDeviceConfogData.value);  
332 - createMessage.success('编辑设备配置成功');  
333 - closeModal();  
334 - emit('success'); 316 + // isGetStepThreeData.profileData.alarms =
  317 + // isEditAndChange.value == true
  318 + // ? editData.value.profileData.alarms
  319 + // : getStepThreeData.value;
  320 + // postDeviceConfogData.value.id = postEditId.value;
  321 + // getStepFourData = await proxy.$refs.DeviceProfileStep4Ref.getAllFields();
  322 + // const getJoinAlarmContactIdData = getStepFourData.alarmContactId.join(',');
  323 + // const getJoinMessageModeData = getStepFourData.messageMode.join(',');
  324 + // getAlarmContactId.value = getJoinAlarmContactIdData;
  325 + // getMessageMode.value = getJoinMessageModeData;
  326 + // alarmProfileData.alarmProfile.alarmContactId = getAlarmContactId.value;
  327 + // alarmProfileData.alarmProfile.messageMode = getMessageMode.value;
  328 + // Object.assign(
  329 + // postDeviceConfogData.value,
  330 + // getStepOneData.value,
  331 + // getStepTwoData.value,
  332 + // isGetStepThreeData,
  333 + // alarmProfileData
  334 + // );
  335 + // await deviceConfigAddOrEdit(postDeviceConfogData.value);
  336 + // createMessage.success('编辑成功');
  337 + // closeModal();
  338 + // emit('success');
335 } 339 }
336 }; 340 };
337 const handleCancel = () => { 341 const handleCancel = () => {
@@ -113,6 +113,10 @@ @@ -113,6 +113,10 @@
113 const customResetStepOneFunc = () => { 113 const customResetStepOneFunc = () => {
114 resetFields(); 114 resetFields();
115 }; 115 };
  116 + const getStep1Func = async () => {
  117 + const valueStep1 = await validate();
  118 + return valueStep1;
  119 + };
116 return { 120 return {
117 editIconFunc, 121 editIconFunc,
118 resetIconFunc, 122 resetIconFunc,
@@ -123,6 +127,7 @@ @@ -123,6 +127,7 @@
123 peresonalPic, 127 peresonalPic,
124 beforeUploadqrcodePic, 128 beforeUploadqrcodePic,
125 customUploadqrcodePic, 129 customUploadqrcodePic,
  130 + getStep1Func,
126 }; 131 };
127 }, 132 },
128 }); 133 });
1 <template> 1 <template>
2 <div> 2 <div>
3 - <div class="step3" style="background-color: #f6f8f9">  
4 - <!-- 报警规则 -->  
5 - <template v-for="(item, index) in profileData" :key="item.id">  
6 - <CollapseContainer class="border mb-1" :canExpan="false">  
7 - <!-- 移除按钮 -->  
8 - <template #action>  
9 - <div class="cursor-pointer">  
10 - <img  
11 - v-if="isAddRuleStatus"  
12 - style="cursor: pointer"  
13 - @click="deleteAlarmRule(index)"  
14 - alt="移除"  
15 - src="../../../../assets/images/delete.png"  
16 - />  
17 - </div>  
18 - </template>  
19 - <!-- 移除按钮 -->  
20 - <!-- 报警类型和传递报警-->  
21 - <div style="margin-top: -15px; margin-left: 10px">  
22 - <div class="alert-type" style="margin-left: -50px; margin-top: -10px">  
23 - <BasicForm @register="registerForm"  
24 - /></div>  
25 - <div style="margin-top: -15px">  
26 - <div style="margin-left: -8px; margin-top: -10px">  
27 - <BasicForm  
28 - @register="registerFormHighSetting"  
29 - style="margin-left: 12px; margin-top: -10px"  
30 - >  
31 - <template #checkBox="{ model, field }">  
32 - <Checkbox v-model:checked="model[field]">传递报警</Checkbox>  
33 - </template>  
34 - </BasicForm>  
35 - </div>  
36 - </div> 3 + <div>
  4 + <div v-if="alarmsData.length === 0" style="text-align: center">
  5 + <p style="font-size: large">未配置报警规则</p>
  6 + </div>
  7 + <div>
  8 + <template v-for="(item, index) in alarmsData" :key="index">
  9 + <span style="display: none">{{ item }}</span>
  10 + <span style="display: none">{{ index }}</span>
  11 + <div class="cursor-pointer" style="position: relative; top: 3.5vh; right: -40.8vw">
  12 + <img
  13 + style="cursor: pointer"
  14 + @click="removeAlarmRule(index, item)"
  15 + alt="移除"
  16 + src="../../../../assets/images/delete.png"
  17 + />
37 </div> 18 </div>
38 - <!-- 报警类型和传递报警 -->  
39 - <!-- 创建报警规则 -->  
40 - <div style="margin-top: -57px">  
41 - <p style="margin-left: 10px; font-size: medium">创建报警规则</p>  
42 - <template  
43 - v-for="(childItem, createIndex) in getStepThreeEditStatus  
44 - ? getFilterStepThreeEditArr  
45 - : item.alarms"  
46 - :key="childItem.id"  
47 - >  
48 - <div>  
49 - <span style="display: none">{{ childItem }}</span>  
50 - <!-- 报警添加条件 -->  
51 - <div>  
52 - <!-- 报警启用规则 -->  
53 - <EnableRule  
54 - v-if="isRuleAlarmRuleConditions === 2"  
55 - ref="getChildData2"  
56 - @getAllFieldsEnab="getAllFieldsEnabFunc"  
57 - @register="registerModal2"  
58 - />  
59 - <!-- 报警规则条件 -->  
60 - <AlarmRuleConditions  
61 - v-if="isRuleAlarmRuleConditions === 3"  
62 - ref="getChildData3"  
63 - @getAllFieldsRule="getAllFieldsRuleFunc"  
64 - @register="registerModal3"  
65 - />  
66 - </div>  
67 - <!-- 添加条件按钮 -->  
68 - <div class="aic" style="border: 1px solid #bfbfbf">  
69 - <div class="w-3/4" style="margin-left: 40px">  
70 - <!-- 报警严重程度 -->  
71 - <div style="height: 2vh; margin-top: 0.8vh; margin-left: 0.35vw">  
72 - <AlarmSeverity  
73 - ref="alarmSeverityRef"  
74 - :alarmSeverityInfo="getStepThreeEditStatus ? childItem : 1"  
75 - />  
76 - </div>  
77 - <!-- 报警严重程度 -->  
78 - <div style="margin-left: 5px; margin-top: 35px">  
79 - <div style="color: #f5594e" class="ml-4"  
80 - >报警规则条件：  
81 - <Button  
82 - style="margin-left: 4px"  
83 - size="small"  
84 - type="primary"  
85 - @click="handleOpenAlaramRuleConditions"  
86 - >添加</Button  
87 - >  
88 - <template  
89 - v-for="(v2, index2) in getStepThreeEditStatus  
90 - ? getFilterStepThreeEditArr  
91 - : fliterTempRuleConditionTempArr"  
92 - :key="index2"  
93 - >  
94 - <p v-if="index2 == createIndex && !getStepThreeEditStatus"  
95 - >报警规则条件：{{ formatAddRuleFunc(v2) }}</p  
96 - >  
97 - <p v-if="index2 == createIndex && getStepThreeEditStatus"  
98 - >报警规则条件：{{ openRuleConditionComp(v2) }}</p  
99 - >  
100 - </template>  
101 - </div>  
102 - <div style="white-space: wrap; margin-top: 25px" class="mt-4 ml-4"  
103 - >报警启用规则：  
104 - <Button  
105 - style="margin-left: 4px"  
106 - size="small"  
107 - type="primary"  
108 - @click="handleOpenEnableRule"  
109 - >添加</Button  
110 - >  
111 - <template  
112 - v-for="(v1, index1) in getStepThreeEditStatus  
113 - ? getFilterStepThreeEditArr  
114 - : fliterTempOpenRuleTempArr"  
115 - :key="index1"  
116 - >  
117 - <p v-if="index1 == createIndex && !getStepThreeEditStatus"  
118 - >启用方式：{{  
119 - v1.type == 'ANY_TIME'  
120 - ? '始终启用'  
121 - : v1.type == 'SPECIFIC_TIME'  
122 - ? '定时启用'  
123 - : '自定义启用'  
124 - }}</p  
125 - >  
126 - <p v-if="index1 == createIndex && getStepThreeEditStatus">  
127 - 启用方式：{{ openRuleComp(v1) }}  
128 - </p>  
129 - </template>  
130 - <!-- 报警详情模板-->  
131 - <div  
132 - class="mt-4 ml-4"  
133 - style="  
134 - margin-left: -0.2vw;  
135 - margin-top: 25px;  
136 - display: flex;  
137 - flex-direction: row;  
138 - justify-content: space-between;  
139 - width: 29vw;  
140 - height: 2vh;  
141 - "  
142 - >  
143 - <div style="width: 6vw; height: 2vh"> 报警详情模板： </div>  
144 - <div style="width: 25vw; height: 2vh">  
145 - <DetailTemplate  
146 - ref="detailTemplateRef"  
147 - :detailTemplateInfo="  
148 - getStepThreeEditStatus ? returnChildItem(childItem) : 1  
149 - "  
150 - />  
151 - </div>  
152 - </div>  
153 - <!-- 报警详情模板-->  
154 - <div style="margin-top: 25px; position: relative">  
155 - <div style="margin-left: -14px">  
156 - <BasicForm @register="dashboardForm" />  
157 - </div>  
158 - </div>  
159 - </div>  
160 - </div>  
161 - <!-- 移除按钮 -->  
162 - <div  
163 - class="remove-type"  
164 - style="display: inline-block; position: relative; top: -25.2vh; left: 39.4vw"  
165 - >  
166 - <img  
167 - v-if="isAddRuleStatus"  
168 - style="cursor: pointer"  
169 - @click="deleteCondition(index, createIndex)"  
170 - alt="移除"  
171 - src="../../../../assets/images/close.png"  
172 - />  
173 - </div>  
174 - <!-- 移除按钮 -->  
175 - </div>  
176 - </div>  
177 - </div>  
178 - </template>  
179 - <div>  
180 - <a-button  
181 - v-if="isAddRuleStatus"  
182 - style="border-radius: 10px"  
183 - class="mt-5"  
184 - @click="addCreateRule(index)"  
185 - ><PlusCircleOutlined />添加创建条件</a-button  
186 - >  
187 - </div> 19 + <div
  20 + style="
  21 + margin-left: 0.21vw;
  22 + border-radius: 4px;
  23 + width: 44vw;
  24 + height: 46vh;
  25 + border: 1px solid grey;
  26 + overflow-y: scroll;
  27 + "
  28 + >
  29 + <CommonCpns ref="commonCpnsRef" />
188 </div> 30 </div>
189 - <!-- 创建报警规则 -->  
190 - <div style="height: 20px"></div>  
191 - <!-- 清除报警规则 -->  
192 - <div v-if="clearRuleStatus || getStepThreeEditStatus">  
193 - <p style="margin-left: 10px; font-size: medium; position: relative">清除报警规则</p>  
194 - <template  
195 - v-for="(childClearItem, clearIndexItem) in item.clearRule"  
196 - :key="childClearItem.id"  
197 - >  
198 - <span style="display: none">{{ childClearItem }}</span>  
199 - <span style="display: none">{{ clearIndexItem }}</span>  
200 - <div>  
201 - <!-- 报警启用规则 -->  
202 - <EnableRule  
203 - v-if="isRuleAlarmRuleConditions === 5"  
204 - ref="getChildData5"  
205 - @getAllFieldsEnab="getAllClearFieldsEnabFunc"  
206 - @register="registerModal5"  
207 - />  
208 - <!-- 报警规则条件 -->  
209 - <AlarmRuleConditions  
210 - v-if="isRuleAlarmRuleConditions === 6"  
211 - ref="getChildData6"  
212 - @getAllFieldsRule="getAllClearFieldsRuleFunc"  
213 - @register="registerModal6"  
214 - />  
215 - </div>  
216 - <div class="aic mb-1" style="border: 1px solid #bfbfbf">  
217 - <div class="w-3/4 aic-class" style="margin-left: 40px">  
218 - <div style="margin-left: 5px">  
219 - <div style="color: #f5594e" class="mt-4 ml-4"  
220 - >报警规则条件：  
221 - <Button  
222 - style="margin-left: 2px"  
223 - size="small"  
224 - type="primary"  
225 - @click="handleOpenClearAlaramRuleConditions"  
226 - >添加</Button  
227 - >  
228 - <template  
229 - v-for="(v4, index4) in getStepThreeEditStatus  
230 - ? getFilterStepThreeEditClearArr  
231 - : fliterClearTempRuleConditionTempArr"  
232 - :key="index4"  
233 - >  
234 - <span style="display: none">{{ index4 }}</span>  
235 -  
236 - <p v-if="!getStepThreeEditStatus"  
237 - >报警规则条件：{{ formatClearRuleFunc(v4) }}</p  
238 - >  
239 - <p v-if="getStepThreeEditStatus"  
240 - >报警规则条件：{{ openClearRuleConditionComp(v4) }}</p  
241 - >  
242 - </template>  
243 - </div>  
244 - <div style="white-space: wrap; margin-top: 25px" class="mt-4 ml-4"  
245 - >报警启用规则：  
246 - <Button  
247 - style="margin-left: 2px"  
248 - size="small"  
249 - type="primary"  
250 - @click="handleOpenClearEnableRule"  
251 - >添加</Button  
252 - >  
253 - <template  
254 - v-for="(v3, index3) in getStepThreeEditStatus  
255 - ? getFilterStepThreeEditClearArr  
256 - : fliterClearTempOpenRuleTempArr"  
257 - :key="index3"  
258 - >  
259 - <span style="display: none">{{ index3 }}</span>  
260 - <p v-if="getStepThreeEditStatus"  
261 - >启用方式：{{  
262 - v3?.schedule?.type == 'ANY_TIME'  
263 - ? '始终启用'  
264 - : v3?.schedule?.type == 'SPECIFIC_TIME'  
265 - ? '定时启用'  
266 - : '自定义启用'  
267 - }}</p  
268 - >  
269 - <p v-if="!getStepThreeEditStatus"  
270 - >启用方式：{{  
271 - v3.type == 'ANY_TIME'  
272 - ? '始终启用'  
273 - : v3.type == 'SPECIFIC_TIME'  
274 - ? '定时启用'  
275 - : '自定义启用'  
276 - }}</p  
277 - >  
278 - </template>  
279 - <div  
280 - class="mt-4 ml-4"  
281 - style="margin-left: 0px; position: relative; margin-top: 25px"  
282 - >报警详情模板：  
283 - <div style="position: absolute; top: -5px; left: 106px; width: 581px">  
284 - <BasicForm @register="registerFormChangeClearDetail" />  
285 - </div>  
286 - </div>  
287 - <div style="margin-left: 0px; margin-top: 25px">  
288 - <div style="margin-left: -14px">  
289 - <BasicForm @register="dashboardForm" />  
290 - </div>  
291 - </div>  
292 - </div>  
293 - </div>  
294 - </div>  
295 - </div>  
296 - </template>  
297 - <!-- 移除按钮 -->  
298 - <div  
299 - class="remove-type"  
300 - style="display: inline-block; position: relative; top: -21.2vh; left: 41.4vw"  
301 - >  
302 - <img  
303 - v-if="isAddRuleStatus"  
304 - style="cursor: pointer"  
305 - @click="deleteClearCondition"  
306 - alt="移除"  
307 - src="../../../../assets/images/close.png"  
308 - />  
309 - </div>  
310 - <!-- 移除按钮 -->  
311 - </div>  
312 - <div>  
313 - <a-button  
314 - v-if="isAddRuleStatus"  
315 - style="border-radius: 10px; margin-top: -2vh"  
316 - class="mt-5"  
317 - @click="addClearRuleStatus"  
318 - ><PlusCircleOutlined />清除报警规则</a-button  
319 - >  
320 - </div>  
321 - <!-- 清除报警规则 -->  
322 - </CollapseContainer>  
323 - </template>  
324 - <!-- 报警规则 --> 31 + </template>
  32 + </div>
325 </div> 33 </div>
326 <!-- 按钮 --> 34 <!-- 按钮 -->
327 - <div class="flex justify-center" style="display: fixed; bottom: 100px">  
328 - <a-button class="mr-5" @click="prevStep">上一步</a-button>  
329 - <a-button @click="handleFormStep3toStep4Next">下一步</a-button>  
330 - <a-button  
331 - v-if="isAddRuleStatus"  
332 - style="margin-left: 20px"  
333 - type="primary"  
334 - @click="addAlarmRule" 35 + <div style="margin-left: 14.5vw; margin-top: 2vh">
  36 + <a-button class="mr-5" @click="prevStepFunc">上一步</a-button>
  37 + <a-button @click="nextStepFunc">下一步</a-button>
  38 + <a-button style="margin-left: 20px" type="primary" @click="clickAddAlaramRuleFunc"
335 >添加报警规则</a-button 39 >添加报警规则</a-button
336 > 40 >
337 </div> 41 </div>
@@ -341,882 +45,48 @@ @@ -341,882 +45,48 @@
341 45
342 <script lang="ts"> 46 <script lang="ts">
343 import { defineComponent, ref, getCurrentInstance, reactive } from 'vue'; 47 import { defineComponent, ref, getCurrentInstance, reactive } from 'vue';
344 - import type { IProfileData } from './index.t';  
345 - import { CollapseContainer } from '/@/components/Container/index';  
346 - import { BasicForm, useForm } from '/@/components/Form';  
347 - import {  
348 - step3Schemas,  
349 - step3HighSetting,  
350 - dashboardFormScheme,  
351 - formChangeDetailSchema,  
352 - } from './data';  
353 - import { PlusCircleOutlined } from '@ant-design/icons-vue';  
354 - import { Checkbox } from 'ant-design-vue';  
355 - import { useModal } from '/@/components/Modal';  
356 - import EnableRule from './cpns/enablerule/index.vue';  
357 - import AlarmRuleConditions from './cpns/alarmruleconditions/index.vue';  
358 - import { Button } from '/@/components/Button';  
359 - import AlarmSeverity from './cpns/alarmseverity/index.vue';  
360 - import DetailTemplate from './cpns/detailtemplate/index.vue';  
361 - import { generateUUID } from '/@/hooks/web/useGenerateUUID'; 48 + import CommonCpns from './common/index.vue';
362 49
363 export default defineComponent({ 50 export default defineComponent({
364 components: { 51 components: {
365 - BasicForm,  
366 - CollapseContainer,  
367 - PlusCircleOutlined,  
368 - Checkbox,  
369 - EnableRule,  
370 - AlarmRuleConditions,  
371 - Button,  
372 - AlarmSeverity,  
373 - DetailTemplate, 52 + CommonCpns,
374 }, 53 },
375 - emits: ['prev', 'next', 'redo', 'handleFormStep3toStep4Next', 'isEdit'],  
376 - props: ['getAllStepThreeData', 'isAddOrEdit', 'isShowAddRule'],  
377 -  
378 - setup(props, { emit }) {  
379 - const detailTemplateRef = ref(null);  
380 - const alarmSeverityRef = ref(null);  
381 - const isAddRuleStatus = ref(true); 54 + emits: ['next', 'prev'],
  55 + setup(_, { emit }) {
382 const { proxy } = getCurrentInstance() as any; 56 const { proxy } = getCurrentInstance() as any;
383 - const changeGetDetailValue = ref({});  
384 - const changeGetClearDetailValue = ref({});  
385 - const getChildData1 = ref(null);  
386 - const getChildData2 = ref(null);  
387 - const getChildData3 = ref(null);  
388 - const getChildData5 = ref(null);  
389 - const getChildData6 = ref(null);  
390 - const isRuleAlarmRuleConditions = ref(0);  
391 - const ruleObj: any = ref<[]>([]);  
392 - const ruleLastObj: any = ref<[]>([]);  
393 - const enableObj: any = ref({});  
394 - const enableClearObj: any = ref({});  
395 - //重构  
396 - //告警列表接口  
397 - let profileData: any = ref<IProfileData[]>([]);  
398 - //初始化alarams数据  
399 - const initProfileData = reactive({  
400 - alarms: [  
401 - {  
402 - id: Date.now() + Math.random() + '',  
403 - alarmType: '',  
404 - createRules: {},  
405 - propagate: false,  
406 - propagateRelationTypes: [''],  
407 - },  
408 - ],  
409 - clearRule: [  
410 - {  
411 - id: Date.now() + Math.random() + '',  
412 - alarmDetails: '',  
413 - dashboardId: {  
414 - id: '',  
415 - entityType: '',  
416 - },  
417 - propagate: '',  
418 - propagateRelationTypes: [''],  
419 - schedule: {  
420 - type: '',  
421 - },  
422 - condition: {},  
423 - },  
424 - ],  
425 - });  
426 - //初始化创建条件  
427 - let initCreateRules = reactive({  
428 - id: Date.now() + Math.random() + '',  
429 - alarmType: '',  
430 - createRules: {},  
431 - propagate: false,  
432 - propagateRelationTypes: [''],  
433 - });  
434 -  
435 - //创建条件总对象  
436 - const createRulesObj: any = ref({});  
437 - let addCreateRulesObj = reactive({  
438 - createRules: {},  
439 - });  
440 - const addChangeSeverity: any = ref({});  
441 - let addNewOpenRule = reactive({  
442 - schedule: {},  
443 - });  
444 - let addNewRuleTem = reactive({  
445 - condition: {  
446 - condition: {},  
447 - },  
448 - });  
449 - const refAlarmDetailTemplate = ref(null);  
450 - const tempDetailTempArr = ref<[]>([]);  
451 - const tempOpenRuleTempArr = ref<[]>([]);  
452 - const tempRuleConditionTempArr = ref<[]>([]);  
453 - let addClearRule = reactive({});  
454 - //总的alarms数据  
455 - let allAlarms = ref<[]>([]);  
456 - let getClearObj = reactive({});  
457 - let getAllObjTemp = reactive({});  
458 - //报警类型数据  
459 - const alarmTypeGet = ref({});  
460 - const propagateAndpropagateRelationTypes = reactive({  
461 - propagate: '',  
462 - propagateRelationTypes: [],  
463 - });  
464 - let clearObj = reactive({  
465 - clearRule: {},  
466 - });  
467 - let kongClearOpenRuleObj = reactive({  
468 - schedule: {},  
469 - });  
470 - let kongClearRuleConditionObj = reactive({  
471 - condition: {  
472 - condition: {},  
473 - },  
474 - });  
475 - const kongDetail = ref({});  
476 - let kongOpenRuleObj = reactive({  
477 - schedule: {},  
478 - });  
479 - let kongRuleConditionObj = reactive({  
480 - condition: {},  
481 - });  
482 - let fliterTempRuleConditionTempArr = ref<[]>([]);  
483 - let fliterTempOpenRuleTempArr: any = ref<[]>([]);  
484 - let fliterClearTempRuleConditionTempArr = ref<[]>([]);  
485 - let fliterClearTempOpenRuleTempArr: any = ref<[]>([]);  
486 - const getStepThreeEditStatus: any = ref(false);  
487 - const getStepThreeEditArr = ref<[]>([]);  
488 - const getFilterStepThreeEditArr: any = ref<[]>([]);  
489 - const getFilterStepThreeEditClearArr: any = ref<[]>([]);  
490 - const getFilterStepThreeClearDetailEditArr = ref<[]>([]);  
491 - let getIsShowAddRule = true;  
492 - const detailDetailModelArray = ref<[]>([]);  
493 - const createAlarmArray = ref<[]>([]);  
494 - const isLostFocuxStatus = ref(true);  
495 - const editIndex = ref(-1);  
496 - // const allAlarmsData = ref<[]>([]);  
497 - // let allAlarmsSingleObj = reactive({});  
498 - const clearRuleStatus = ref(false);  
499 -  
500 - setTimeout(() => {  
501 - getIsShowAddRule = props.isShowAddRule;  
502 - }, 10);  
503 - const isAddRuleStatusFunc = (v) => {  
504 - isAddRuleStatus.value = v;  
505 - };  
506 - //编辑清空操作  
507 - const clearProfileDataFunc = () => {  
508 - profileData.value.splice(0, 1);  
509 - };  
510 - const clearProfileDataFunc1 = () => {  
511 - profileData.value.length = 0;  
512 - };  
513 - //删除告警配置  
514 - const deleteAlarmRule = (index: number) => {  
515 - profileData.value.splice(index, 1);  
516 - };  
517 - // 上一步  
518 - const prevStep = () => { 57 + const commonCpnsRef = ref(null);
  58 + const alarmsData: any = ref([]);
  59 + let profileData: any = reactive({});
  60 + const prevStepFunc = () => {
519 emit('prev'); 61 emit('prev');
520 }; 62 };
521 -  
522 - //TODO Mobile dashboard:  
523 - const [dashboardForm] = useForm({  
524 - labelWidth: 120,  
525 - schemas: dashboardFormScheme,  
526 - showResetButton: false,  
527 - showSubmitButton: false,  
528 - });  
529 - //报警类型  
530 - const [  
531 - registerForm,  
532 - {  
533 - setFieldsValue: setAlaramTypeValueFunc,  
534 - resetFields: clearAlaramTypeValueFunc,  
535 - getFieldsValue: validateAlaramTypeValueFunc,  
536 - },  
537 - ] = useForm({  
538 - labelWidth: 120,  
539 - schemas: step3Schemas,  
540 - showResetButton: false,  
541 - showSubmitButton: false,  
542 - });  
543 - // 高级设置  
544 - const [  
545 - registerFormHighSetting,  
546 - {  
547 - setFieldsValue: setTransmitAlarmFunc,  
548 - resetFields: clearTransmitAlarmFunc,  
549 - getFieldsValue: getTransmitAlarmFunc,  
550 - },  
551 - ] = useForm({  
552 - labelWidth: 120,  
553 - schemas: step3HighSetting,  
554 - showResetButton: false,  
555 - showSubmitButton: false,  
556 - actionColOptions: {  
557 - span: 24,  
558 - },  
559 - });  
560 - //清除详情模板  
561 - const [  
562 - registerFormChangeClearDetail,  
563 - {  
564 - getFieldsValue: getRegisterFormClearChangeDetail,  
565 - setFieldsValue: setRegisterFormClearChangeDetail,  
566 - resetFields: resetRegisterFormClearChangeDetail,  
567 - },  
568 - ] = useForm({  
569 - labelWidth: 120,  
570 - schemas: formChangeDetailSchema,  
571 - showResetButton: false,  
572 - showSubmitButton: false,  
573 - actionColOptions: {  
574 - span: 24,  
575 - },  
576 - });  
577 -  
578 - //重置编辑数据  
579 - const clearEditAllRegisterFormFunc = () => {  
580 - getFilterStepThreeEditArr.value.length = 0;  
581 - getFilterStepThreeEditArr.value = [];  
582 - };  
583 -  
584 - //重置表单数据  
585 - const clearAllRegisterFormFunc = () => {  
586 - try {  
587 - setTimeout(() => {  
588 - //报警类型  
589 - clearAlaramTypeValueFunc();  
590 - //传递报警  
591 - clearTransmitAlarmFunc();  
592 - //报警严重程度  
593 - addChangeSeverity.value = {};  
594 - proxy.$refs.alarmSeverityRef?.resetFieldsFunc();  
595 - //报警详情模板  
596 - proxy.$refs.detailTemplateRef?.resetFieldsFunc();  
597 - //清除报警详情模板  
598 - resetRegisterFormClearChangeDetail();  
599 - //重置报警规则条件  
600 - fliterTempRuleConditionTempArr.value = [];  
601 - fliterTempRuleConditionTempArr.value.length = 0;  
602 - //重置报警启用规则  
603 - fliterTempOpenRuleTempArr.value = [];  
604 - fliterTempOpenRuleTempArr.value.length = 0;  
605 - //重置清除报警规则条件  
606 - fliterClearTempRuleConditionTempArr.value = [];  
607 - fliterClearTempRuleConditionTempArr.value.length = 0;  
608 - //重置清除报警启用规则  
609 - fliterClearTempOpenRuleTempArr.value = [];  
610 - fliterClearTempOpenRuleTempArr.value.length = 0;  
611 - resetAllTemplateFunc();  
612 - }, 10);  
613 - } catch {}  
614 - };  
615 -  
616 - //重置报警启用规则-报警规则条件  
617 - const resetAllTemplateFunc = () => {  
618 - allAlarms.value = [];  
619 - tempDetailTempArr.value = [];  
620 - addCreateRulesObj.createRules = {};  
621 - initClearCreateRuleFunc();  
622 - getFilterStepThreeEditArr.value = [];  
623 - getFilterStepThreeEditClearArr.value = [];  
624 - getStepThreeEditStatus.value = false;  
625 - detailDetailModelArray.value = [];  
626 - createAlarmArray.value = [];  
627 - };  
628 - const initClearCreateRuleFunc = () => {  
629 - profileData.value.forEach((f) => {  
630 - f.alarms = [];  
631 - if (f.alarms.length === 0) {  
632 - f.alarms.push(initCreateRules);  
633 - } 63 + const nextStepFunc = async () => {
  64 + profileData = await proxy.$refs.commonCpnsRef?.getStep3AllDataFunc();
  65 + alarmsData.value.push(profileData);
  66 + alarmsData.value.shift();
  67 + emit('next', {
  68 + alarms: alarmsData.value,
634 }); 69 });
635 }; 70 };
636 -  
637 - //回显报警类型和传递报警数据  
638 - const setAlaramTypeFormFunc = (v) => {  
639 - setAlaramTypeValueFunc(v);  
640 - };  
641 - const setTransmitAlarmFormFunc = (v) => {  
642 - setTransmitAlarmFunc(v);  
643 - };  
644 - const openRuleComp = (v1) => {  
645 - let openSchemObj: any = {};  
646 - for (let i in v1) {  
647 - if (i == 'CRITICAL') {  
648 - openSchemObj = v1[i];  
649 - } else if (i == 'MAJOR') {  
650 - openSchemObj = v1[i];  
651 - } else if (i == 'MINOR') {  
652 - openSchemObj = v1[i];  
653 - } else if (i == 'WARNING') {  
654 - openSchemObj = v1[i];  
655 - } else if (i == 'INDETERMINATE') {  
656 - openSchemObj = v1[i];  
657 - }  
658 - }  
659 - let formatSchemeMap =  
660 - openSchemObj?.schedule?.type == 'ANY_TIME'  
661 - ? '始终启用'  
662 - : openSchemObj?.schedule?.type == 'SPECIFIC_TIME'  
663 - ? '定时启用'  
664 - : '自定义启用';  
665 - return formatSchemeMap; 71 + const clickAddAlaramRuleFunc = async () => {
  72 + profileData = await proxy.$refs.commonCpnsRef?.getStep3AllDataFunc();
  73 + alarmsData.value.push(profileData);
666 }; 74 };
667 - //清除报警规则  
668 - const openClearRuleConditionComp = (v4) => {  
669 - try {  
670 - let formatMap = v4.condition.condition.map((f) => {  
671 - return f.predicate.operation == 'EQUAL'  
672 - ? f.key.key + '等于' + f.predicate.value.defaultValue  
673 - : f.predicate.operation == 'STARTS_WITH'  
674 - ? f.key.key + '开始于' + f.predicate.value.defaultValue  
675 - : f.predicate.operation == 'ENDS_WITH'  
676 - ? f.key.key + '结束于' + f.predicate.value.defaultValue  
677 - : f.predicate.operation == 'NOT_CONTAINS'  
678 - ? f.key.key + '不包含' + f.predicate.value.defaultValue  
679 - : f.predicate.operation == 'NOT_EQUAL'  
680 - ? f.key.key + '不等于' + f.predicate.value.defaultValue  
681 - : f.predicate.operation == 'GREATER'  
682 - ? f.key.key + '大于' + f.predicate.value.defaultValue  
683 - : f.predicate.operation == 'LESS'  
684 - ? f.key.key + '小于' + f.predicate.value.defaultValue  
685 - : f.predicate.operation == 'GREATER_OR_EQUAL'  
686 - ? f.key.key + '大于或等于' + f.predicate.value.defaultValue  
687 - : f.key.key + '小于或等于' + f.predicate.value.defaultValue;  
688 - });  
689 - return formatMap;  
690 - } catch (e) {  
691 - return e;  
692 - }  
693 - };  
694 -  
695 - const openRuleConditionComp = (v2) => {  
696 - try {  
697 - let openRuleConditObj: any = {};  
698 - for (let i in v2) {  
699 - if (i == 'CRITICAL') {  
700 - openRuleConditObj = v2[i];  
701 - } else if (i == 'MAJOR') {  
702 - openRuleConditObj = v2[i];  
703 - } else if (i == 'MINOR') {  
704 - openRuleConditObj = v2[i];  
705 - } else if (i == 'WARNING') {  
706 - openRuleConditObj = v2[i];  
707 - } else if (i == 'INDETERMINATE') {  
708 - openRuleConditObj = v2[i];  
709 - }  
710 - }  
711 - let formatMap = openRuleConditObj?.condition?.condition.map((f) => {  
712 - return f.predicate.operation == 'EQUAL'  
713 - ? f.key.key + '等于' + f.predicate.value.defaultValue  
714 - : f.predicate.operation == 'STARTS_WITH'  
715 - ? f.key.key + '开始于' + f.predicate.value.defaultValue  
716 - : f.predicate.operation == 'ENDS_WITH'  
717 - ? f.key.key + '结束于' + f.predicate.value.defaultValue  
718 - : f.predicate.operation == 'NOT_CONTAINS'  
719 - ? f.key.key + '不包含' + f.predicate.value.defaultValue  
720 - : f.predicate.operation == 'NOT_EQUAL'  
721 - ? f.key.key + '不等于' + f.predicate.value.defaultValue  
722 - : f.predicate.operation == 'GREATER'  
723 - ? f.key.key + '大于' + f.predicate.value.defaultValue  
724 - : f.predicate.operation == 'LESS'  
725 - ? f.key.key + '小于' + f.predicate.value.defaultValue  
726 - : f.predicate.operation == 'GREATER_OR_EQUAL'  
727 - ? f.key.key + '大于或等于' + f.predicate.value.defaultValue  
728 - : f.key.key + '小于或等于' + f.predicate.value.defaultValue;  
729 - });  
730 - return formatMap;  
731 - } catch (e) {  
732 - return e;  
733 - }  
734 - };  
735 -  
736 - //详情模板  
737 - const setRegisterFormChangeDetailFunc = (v) => {  
738 - if (v.isEditStatus) {  
739 - getFilterStepThreeEditArr.value = [];  
740 - getFilterStepThreeEditClearArr.value = [];  
741 - getStepThreeEditStatus.value = v.isEditStatus;  
742 - getStepThreeEditArr.value = v.stepThreeData;  
743 - if (getFilterStepThreeEditClearArr.value.length == 0) {  
744 - getFilterStepThreeEditClearArr.value.push(v.stepThreeClearData as never);  
745 - }  
746 - Object.keys(getStepThreeEditArr.value).forEach((v) => {  
747 - let o = {};  
748 - o[v] = getStepThreeEditArr.value[v];  
749 - getFilterStepThreeEditArr.value.push(o as never);  
750 - });  
751 - }  
752 - };  
753 - const setCreateRegisterFormChangeDetailFunc = (v) => {  
754 - for (let i in v) {  
755 - detailDetailModelArray.value.push(v[i].alarmDetails as never);  
756 - createAlarmArray.value.push(i as never);  
757 - }  
758 - };  
759 -  
760 - //清除修改详情模板  
761 - const setRegisterFormClearChangeDetailFunc = (v) => {  
762 - setRegisterFormClearChangeDetail(v);  
763 - };  
764 -  
765 - const getRegisterFormChangeDetailFunc = () => {  
766 - try {  
767 - changeGetDetailValue.value = proxy.$refs.detailTemplateRef.getFieldsValueFunc();  
768 - } catch (e) {  
769 - return e;  
770 - }  
771 - };  
772 - const getRegisterClearFormChangeDetailFunc = () => {  
773 - changeGetClearDetailValue.value = getRegisterFormClearChangeDetail();  
774 - };  
775 -  
776 - const emptyCreateRoleFunc = () => {  
777 - addNewOpenRule.schedule = {};  
778 - addNewRuleTem.condition.condition = {};  
779 - };  
780 -  
781 - const getOpenRuleAndRuleCondition = () => {  
782 - addNewOpenRule.schedule = enableObj.value as never;  
783 - addNewRuleTem.condition.condition = ruleObj.value as never;  
784 - tempOpenRuleTempArr.value.push(addNewOpenRule.schedule as never);  
785 - tempRuleConditionTempArr.value.push({  
786 - condition: addNewRuleTem.condition.condition,  
787 - } as never);  
788 - };  
789 -  
790 - const getClearOpenRuleAndRuleCondition = () => {  
791 - kongClearOpenRuleObj.schedule = enableClearObj.value as never;  
792 - kongClearRuleConditionObj.condition.condition = ruleLastObj.value as never;  
793 - };  
794 -  
795 - //传递报警数据  
796 - const validateRegisterFormHighSettingFunc = () => {  
797 - const val = getTransmitAlarmFunc();  
798 - try {  
799 - propagateAndpropagateRelationTypes.propagate = val.propagate;  
800 - propagateAndpropagateRelationTypes.propagateRelationTypes.push(  
801 - val.propagateRelationTypes as never  
802 - );  
803 - } catch {}  
804 - };  
805 - //报警类型数据  
806 - const validateRegisterFormFunc = () => {  
807 - const val1 = validateAlaramTypeValueFunc();  
808 - alarmTypeGet.value = val1;  
809 - };  
810 - //添加报警规则  
811 - const addAlarmRule = () => {  
812 - profileData.value.push(initProfileData);  
813 - addAlarmRuleFunc();  
814 - clearAllRegisterFormFunc();  
815 - };  
816 - //添加报警规则方法  
817 - const addAlarmRuleFunc = () => {  
818 - // validateRegisterFormFunc();  
819 - // validateRegisterFormHighSettingFunc();  
820 - // addCreateRuleFunc();  
821 - // tempDetailTempArr.value.push(changeGetDetailValue.value as never);  
822 - // tempDetailTempArr.value.forEach((f1) => {  
823 - // kongDetail.value = f1;  
824 - // });  
825 - // addChangeSeverity.value = proxy.$refs.alarmSeverityRef.getFieldsValueFunc();  
826 - // emptyCreateRoleFunc();  
827 - // getOpenRuleAndRuleCondition();  
828 - // tempOpenRuleTempArr.value.forEach((f2) => {  
829 - // kongOpenRuleObj.schedule = f2;  
830 - // });  
831 - // tempRuleConditionTempArr.value.forEach((f3) => {  
832 - // kongRuleConditionObj.condition = f3;  
833 - // });  
834 - // createRulesObj.value[addChangeSeverity.value?.default] = {  
835 - // ...kongDetail.value,  
836 - // ...addNewOpenRule,  
837 - // ...addNewRuleTem,  
838 - // ...kongOpenRuleObj,  
839 - // ...kongRuleConditionObj,  
840 - // };  
841 - // console.log(createRulesObj);  
842 - // const sigleAlarmTypeGetVal = [];  
843 - // let sigleAlarmTypeGetObj = {};  
844 - // sigleAlarmTypeGetVal.push(alarmTypeGet.value as never);  
845 - // sigleAlarmTypeGetVal.forEach((f) => {  
846 - // sigleAlarmTypeGetObj = f;  
847 - // });  
848 - // allAlarmsSingleObj = {  
849 - // ...sigleAlarmTypeGetObj,  
850 - // };  
851 - // allAlarmsData.value.push(allAlarmsSingleObj as never);  
852 - // console.log(allAlarmsData.value);  
853 - };  
854 -  
855 - //初始化添加一个报警规则  
856 - // const initAddAlarmRuleFunc = () => {  
857 - // if (profileData.value.length === 0) {  
858 - // profileData.value.push(initProfileData);  
859 - // }  
860 - // };  
861 - // 添加创建条件方法  
862 - const addCreateRuleFunc = async () => {  
863 - try {  
864 - getRegisterFormChangeDetailFunc();  
865 - tempDetailTempArr.value.push(changeGetDetailValue.value as never);  
866 - tempDetailTempArr.value.forEach((f1) => {  
867 - kongDetail.value = f1;  
868 - });  
869 - addChangeSeverity.value = proxy.$refs.alarmSeverityRef.getFieldsValueFunc();  
870 - emptyCreateRoleFunc();  
871 - getOpenRuleAndRuleCondition();  
872 -  
873 - tempOpenRuleTempArr.value.forEach((f2) => {  
874 - kongOpenRuleObj.schedule = f2;  
875 - });  
876 -  
877 - tempRuleConditionTempArr.value.forEach((f3) => {  
878 - kongRuleConditionObj.condition = f3;  
879 - });  
880 -  
881 - createRulesObj.value[addChangeSeverity.value?.default] = {  
882 - ...kongDetail.value,  
883 - ...addNewOpenRule,  
884 - ...addNewRuleTem,  
885 - ...kongOpenRuleObj,  
886 - ...kongRuleConditionObj,  
887 - };  
888 - addCreateRulesObj.createRules = createRulesObj.value;  
889 - initCreateRules.createRules = addCreateRulesObj;  
890 - } catch (e) {  
891 - return e;  
892 - }  
893 - };  
894 -  
895 - //清除报警规则  
896 - const addClearAlaramRule = () => {  
897 - getClearOpenRuleAndRuleCondition();  
898 - getRegisterClearFormChangeDetailFunc();  
899 - addClearRule = {  
900 - ...kongClearOpenRuleObj,  
901 - ...kongClearRuleConditionObj,  
902 - ...changeGetClearDetailValue.value,  
903 - };  
904 - clearObj.clearRule = { ...addClearRule };  
905 - getClearObj = clearObj;  
906 - };  
907 -  
908 - // 添加创建条件  
909 - const addCreateRule = async (index: number) => {  
910 - profileData.value[index]?.alarms.push(initCreateRules);  
911 - addCreateRuleFunc();  
912 - proxy.$refs.alarmSeverityRef?.updateSchemaSelectDisableFunc();  
913 - };  
914 -  
915 - // 删除创建条件  
916 - const deleteCondition = (index: number, createIndex: number) => {  
917 - profileData.value[index].alarms.splice(createIndex, 1);  
918 - if (getStepThreeEditStatus.value) {  
919 - getFilterStepThreeEditArr.value.pop();  
920 - }  
921 - };  
922 -  
923 - const addClearRuleStatus = () => {  
924 - clearRuleStatus.value = true;  
925 - };  
926 - const deleteClearCondition = () => {  
927 - clearRuleStatus.value = false;  
928 - };  
929 - //报警规则  
930 - //启用规则  
931 - const getAllFieldsEnabFunc = (v) => {  
932 - enableObj.value = v;  
933 - fliterTempOpenRuleTempArr.value.push(v as never);  
934 - };  
935 - //规则条件  
936 - const getAllFieldsRuleFunc = (v) => {  
937 - ruleObj.value = v;  
938 - addNewRuleTem.condition.condition = ruleObj.value as never;  
939 - fliterTempRuleConditionTempArr.value.push({  
940 - condition: addNewRuleTem.condition.condition,  
941 - } as never);  
942 - };  
943 - //格式化新增  
944 - const formatAddRuleFunc = (v) => {  
945 - let formatMap = v.condition.map((f) => {  
946 - return f.predicate.operation == 'EQUAL'  
947 - ? f.key.key + '等于' + f.predicate.value.defaultValue  
948 - : f.predicate.operation == 'STARTS_WITH'  
949 - ? f.key.key + '开始于' + f.predicate.value.defaultValue  
950 - : f.predicate.operation == 'ENDS_WITH'  
951 - ? f.key.key + '结束于' + f.predicate.value.defaultValue  
952 - : f.predicate.operation == 'NOT_CONTAINS'  
953 - ? f.key.key + '不包含' + f.predicate.value.defaultValue  
954 - : f.predicate.operation == 'NOT_EQUAL'  
955 - ? f.key.key + '不等于' + f.predicate.value.defaultValue  
956 - : f.predicate.operation == 'GREATER'  
957 - ? f.key.key + '大于' + f.predicate.value.defaultValue  
958 - : f.predicate.operation == 'LESS'  
959 - ? f.key.key + '小于' + f.predicate.value.defaultValue  
960 - : f.predicate.operation == 'GREATER_OR_EQUAL'  
961 - ? f.key.key + '大于或等于' + f.predicate.value.defaultValue  
962 - : f.key.key + '小于或等于' + f.predicate.value.defaultValue;  
963 - });  
964 - return formatMap;  
965 - };  
966 - //清除报警规则  
967 - //启用规则  
968 - const getAllClearFieldsEnabFunc = (v) => {  
969 - enableClearObj.value = v;  
970 - fliterClearTempOpenRuleTempArr.value.push(v as never);  
971 - };  
972 - //规则条件  
973 - const getAllClearFieldsRuleFunc = (v) => {  
974 - ruleLastObj.value = v;  
975 - addNewRuleTem.condition.condition = ruleLastObj.value as never;  
976 - fliterClearTempRuleConditionTempArr.value.push({  
977 - condition: addNewRuleTem.condition.condition,  
978 - } as never);  
979 - };  
980 -  
981 - const formatClearRuleFunc = (v) => {  
982 - let formatMap = v.condition.map((f) => {  
983 - return f.predicate.operation == 'EQUAL'  
984 - ? f.key.key + '等于' + f.predicate.value.defaultValue  
985 - : f.predicate.operation == 'STARTS_WITH'  
986 - ? f.key.key + '开始于' + f.predicate.value.defaultValue  
987 - : f.predicate.operation == 'ENDS_WITH'  
988 - ? f.key.key + '结束于' + f.predicate.value.defaultValue  
989 - : f.predicate.operation == 'NOT_CONTAINS'  
990 - ? f.key.key + '不包含' + f.predicate.value.defaultValue  
991 - : f.predicate.operation == 'NOT_EQUAL'  
992 - ? f.key.key + '不等于' + f.predicate.value.defaultValue  
993 - : f.predicate.operation == 'GREATER'  
994 - ? f.key.key + '大于' + f.predicate.value.defaultValue  
995 - : f.predicate.operation == 'LESS'  
996 - ? f.key.key + '小于' + f.predicate.value.defaultValue  
997 - : f.predicate.operation == 'GREATER_OR_EQUAL'  
998 - ? f.key.key + '大于或等于' + f.predicate.value.defaultValue  
999 - : f.key.key + '小于或等于' + f.predicate.value.defaultValue;  
1000 - });  
1001 - return formatMap;  
1002 - };  
1003 -  
1004 - const handleFormStep3toStep4Next = () => {  
1005 - try {  
1006 - validateRegisterFormFunc();  
1007 - validateRegisterFormHighSettingFunc();  
1008 - const objectId = {  
1009 - id: generateUUID(),  
1010 - };  
1011 - getRegisterFormChangeDetailFunc();  
1012 - addCreateRuleFunc();  
1013 - addAlarmRuleFunc();  
1014 - addClearAlaramRule();  
1015 - getAllObjTemp = {  
1016 - ...alarmTypeGet.value,  
1017 - ...propagateAndpropagateRelationTypes,  
1018 - ...objectId,  
1019 - };  
1020 - setTimeout(() => {  
1021 - Object.assign(getAllObjTemp, addCreateRulesObj, getClearObj);  
1022 - }, 10);  
1023 - allAlarms.value.push(getAllObjTemp as never);  
1024 - emit('next', allAlarms.value, getStepThreeEditStatus.value);  
1025 - } catch (e) {  
1026 - return e;  
1027 - }  
1028 - };  
1029 -  
1030 - const [registerModal1, { openModal: openModal1 }] = useModal();  
1031 - const [registerModal2, { openModal: openModal2 }] = useModal();  
1032 - const [registerModal3, { openModal: openModal3 }] = useModal();  
1033 - const [registerModal4, { openModal: openModal4 }] = useModal();  
1034 - const [registerModal5, { openModal: openModal5 }] = useModal();  
1035 - const [registerModal6, { openModal: openModal6 }] = useModal();  
1036 - const handleOpenDetailTemplate = () => {  
1037 - isRuleAlarmRuleConditions.value = 1;  
1038 - setTimeout(() => {  
1039 - openModal1(true);  
1040 - setTimeout(() => {  
1041 - proxy.$refs.getChildData1.resetDataFunc();  
1042 - }, 10);  
1043 - }, 10);  
1044 - };  
1045 - const handleOpenEnableRule = () => {  
1046 - isRuleAlarmRuleConditions.value = 2;  
1047 - setTimeout(() => {  
1048 - openModal2(true);  
1049 - setTimeout(() => {  
1050 - proxy.$refs.getChildData2.resetDataFunc();  
1051 - }, 10);  
1052 - }, 10);  
1053 - };  
1054 - const handleOpenAlaramRuleConditions = () => {  
1055 - isRuleAlarmRuleConditions.value = 3;  
1056 - getStepThreeEditStatus.value = false;  
1057 - setTimeout(() => {  
1058 - openModal3(true);  
1059 - try {  
1060 - setTimeout(() => {  
1061 - proxy.$refs.getChildData3.resetDataFunc();  
1062 - }, 100);  
1063 - } catch {}  
1064 - }, 10);  
1065 - };  
1066 - const handleOpenClearDetailTemplate = () => {  
1067 - isRuleAlarmRuleConditions.value = 4;  
1068 - setTimeout(() => {  
1069 - openModal4(true);  
1070 - try {  
1071 - setTimeout(() => {  
1072 - proxy.$refs.getChildData1.resetDataFunc();  
1073 - }, 10);  
1074 - } catch (e) {  
1075 - return e;  
1076 - }  
1077 - }, 10);  
1078 - };  
1079 - const handleOpenClearEnableRule = () => {  
1080 - isRuleAlarmRuleConditions.value = 5;  
1081 - setTimeout(() => {  
1082 - openModal5(true);  
1083 - }, 10);  
1084 - };  
1085 - const handleOpenClearAlaramRuleConditions = () => {  
1086 - isRuleAlarmRuleConditions.value = 6;  
1087 - setTimeout(() => {  
1088 - openModal6(true);  
1089 - }, 10);  
1090 - };  
1091 - const handleClickHidenEdit = (v) => {  
1092 - editIndex.value = v;  
1093 - };  
1094 - const returnChildItem = (v) => {  
1095 - let openRuleConditObj: any = {};  
1096 - for (let i in v) {  
1097 - if (i == 'CRITICAL') {  
1098 - openRuleConditObj = v[i];  
1099 - } else if (i == 'MAJOR') {  
1100 - openRuleConditObj = v[i];  
1101 - } else if (i == 'MINOR') {  
1102 - openRuleConditObj = v[i];  
1103 - } else if (i == 'WARNING') {  
1104 - openRuleConditObj = v[i];  
1105 - } else if (i == 'INDETERMINATE') {  
1106 - openRuleConditObj = v[i];  
1107 - }  
1108 - }  
1109 - return openRuleConditObj.alarmDetails; 75 + const removeAlarmRule = (i, e) => {
  76 + let delI = i;
  77 + alarmsData.value.splice(alarmsData.value.indexOf(e), 1);
1110 }; 78 };
1111 79
1112 return { 80 return {
1113 - deleteClearCondition,  
1114 - clearRuleStatus,  
1115 - addClearRuleStatus,  
1116 - clearProfileDataFunc1,  
1117 - clearEditAllRegisterFormFunc,  
1118 - returnChildItem,  
1119 - editIndex,  
1120 - isAddRuleStatusFunc,  
1121 - isAddRuleStatus,  
1122 - createAlarmArray,  
1123 - formatClearRuleFunc,  
1124 - formatAddRuleFunc,  
1125 - getFilterStepThreeClearDetailEditArr,  
1126 - getIsShowAddRule,  
1127 - openRuleConditionComp,  
1128 - openClearRuleConditionComp,  
1129 - getFilterStepThreeEditClearArr,  
1130 - openRuleComp,  
1131 - getFilterStepThreeEditArr,  
1132 - getStepThreeEditStatus,  
1133 - getStepThreeEditArr,  
1134 - initClearCreateRuleFunc,  
1135 - fliterTempOpenRuleTempArr,  
1136 - fliterTempRuleConditionTempArr,  
1137 - fliterClearTempOpenRuleTempArr,  
1138 - fliterClearTempRuleConditionTempArr,  
1139 - tempRuleConditionTempArr,  
1140 - tempOpenRuleTempArr,  
1141 - kongOpenRuleObj,  
1142 - allAlarms,  
1143 - // initAddAlarmRuleFunc,  
1144 - getChildData5,  
1145 - getChildData6,  
1146 - refAlarmDetailTemplate,  
1147 - setRegisterFormClearChangeDetailFunc,  
1148 - setRegisterFormChangeDetailFunc,  
1149 - registerFormChangeClearDetail,  
1150 - clearProfileDataFunc,  
1151 - setAlaramTypeFormFunc,  
1152 - setTransmitAlarmFormFunc,  
1153 - clearAllRegisterFormFunc,  
1154 - handleOpenClearDetailTemplate,  
1155 - handleOpenClearEnableRule,  
1156 - handleOpenClearAlaramRuleConditions,  
1157 - dashboardForm,  
1158 - getAllClearFieldsRuleFunc,  
1159 - getAllClearFieldsEnabFunc,  
1160 - getAllFieldsRuleFunc,  
1161 - getAllFieldsEnabFunc,  
1162 - getChildData1,  
1163 - getChildData2,  
1164 - getChildData3,  
1165 - isRuleAlarmRuleConditions,  
1166 - registerModal1,  
1167 - registerModal2,  
1168 - registerModal3,  
1169 - registerModal4,  
1170 - registerModal5,  
1171 - registerModal6,  
1172 - handleOpenEnableRule,  
1173 - handleOpenAlaramRuleConditions,  
1174 - handleOpenDetailTemplate,  
1175 - handleFormStep3toStep4Next,  
1176 - profileData,  
1177 - deleteAlarmRule,  
1178 - prevStep,  
1179 - addAlarmRule,  
1180 - registerForm,  
1181 - registerFormHighSetting,  
1182 - addCreateRule,  
1183 - deleteCondition,  
1184 - setCreateRegisterFormChangeDetailFunc,  
1185 - detailDetailModelArray,  
1186 - isLostFocuxStatus,  
1187 - handleClickHidenEdit,  
1188 - alarmSeverityRef,  
1189 - detailTemplateRef, 81 + clickAddAlaramRuleFunc,
  82 + prevStepFunc,
  83 + nextStepFunc,
  84 + alarmsData,
  85 + removeAlarmRule,
  86 + commonCpnsRef,
1190 }; 87 };
1191 }, 88 },
1192 }); 89 });
1193 </script> 90 </script>
1194 91
1195 -<style lang="less" scoped>  
1196 - .step3 {  
1197 - width: 100%;  
1198 - background-color: #f6f8f9;  
1199 - z-index: 1;  
1200 - }  
1201 - .border {  
1202 - border: 1px solid #bfbfbf;  
1203 - border-radius: 10px;  
1204 - }  
1205 -  
1206 - .aic {  
1207 - display: flex;  
1208 - align-items: center;  
1209 - border-radius: 10px;  
1210 - margin-top: 15px;  
1211 - .aic-class {  
1212 - position: relative;  
1213 - }  
1214 - }  
1215 -  
1216 - :deep(.vben-collapse-container__header) {  
1217 - border: none;  
1218 - }  
1219 - :deep .ant-select-selection-placeholder {  
1220 - display: none;  
1221 - }  
1222 -</style> 92 +<style lang="less" scoped></style>
1 <template> 1 <template>
2 <div class="step-4"> 2 <div class="step-4">
3 - <BasicForm :showSubmitButton="false" @register="register" /> 3 + <div v-if="isShow">
  4 + <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register" />
  5 + </div>
  6 + <div
  7 + style="
  8 + display: flex;
  9 + width: 17vw;
  10 + height: 4vh;
  11 + flex-direction: row;
  12 + align-items: center;
  13 + justify-content: space-between;
  14 + margin-left: 14vw;
  15 + margin-top: -1.2vh;
  16 + "
  17 + >
  18 + <div style="width: 5vw; height: 4vh; margin-top: -3.5vh">
  19 + <Button type="primary" style="border-radius: 2px" class="mt-5" @click="prevStep4"
  20 + >上一步</Button
  21 + >
  22 + </div>
  23 + <div style="width: 5vw; height: 4vh; margin-top: -3.5vh">
  24 + <Button type="default" style="border-radius: 2px" class="mt-5" @click="addStep4">
  25 + 打开告警通知</Button
  26 + >
  27 + </div>
  28 + <div style="width: 5vw; height: 4vh; margin-top: -3.5vh; margin-left: 2.2vw">
  29 + <Button type="default" style="border-radius: 2px" class="mt-5" @click="closeStep4">
  30 + 关闭</Button
  31 + >
  32 + </div>
  33 + </div>
4 </div> 34 </div>
5 </template> 35 </template>
6 <script lang="ts"> 36 <script lang="ts">
7 import { defineComponent, ref } from 'vue'; 37 import { defineComponent, ref } from 'vue';
8 import { BasicForm, useForm } from '/@/components/Form/index'; 38 import { BasicForm, useForm } from '/@/components/Form/index';
9 import { alertContactsSchemas } from './data'; 39 import { alertContactsSchemas } from './data';
  40 + import { Button } from '/@/components/Button';
10 41
11 export default defineComponent({ 42 export default defineComponent({
12 components: { 43 components: {
13 BasicForm, 44 BasicForm,
  45 + Button,
14 }, 46 },
15 emits: ['prev', 'register'], 47 emits: ['prev', 'register'],
16 setup(_, { emit }) { 48 setup(_, { emit }) {
17 const getValueData: any = ref({}); 49 const getValueData: any = ref({});
  50 + const isShow = ref(false);
18 const [register, { setProps, validate, setFieldsValue, resetFields }] = useForm({ 51 const [register, { setProps, validate, setFieldsValue, resetFields }] = useForm({
19 schemas: alertContactsSchemas, 52 schemas: alertContactsSchemas,
20 actionColOptions: { 53 actionColOptions: {
21 span: 24, 54 span: 24,
22 }, 55 },
23 - resetButtonOptions: {  
24 - text: '上一步',  
25 - },  
26 - resetFunc: customResetFunc,  
27 }); 56 });
28 const setAlaramContactAndNoticeMethodFunc = (v) => { 57 const setAlaramContactAndNoticeMethodFunc = (v) => {
29 setFieldsValue(v); 58 setFieldsValue(v);
@@ -31,32 +60,41 @@ @@ -31,32 +60,41 @@
31 const clearAlaramContactAndNoticeMethodFunc = async () => { 60 const clearAlaramContactAndNoticeMethodFunc = async () => {
32 await resetFields(); 61 await resetFields();
33 }; 62 };
34 - async function customResetFunc() {  
35 - emit('prev');  
36 - }  
37 const getAllFields = async (getV) => { 63 const getAllFields = async (getV) => {
38 const values = await validate(); 64 const values = await validate();
39 getValueData.value = values; 65 getValueData.value = values;
40 getV = getValueData.value; 66 getV = getValueData.value;
41 return getV; 67 return getV;
42 }; 68 };
  69 + const prevStep4 = () => {
  70 + emit('prev');
  71 + };
  72 + const addStep4 = () => {
  73 + isShow.value = true;
  74 + };
  75 + const closeStep4 = () => {
  76 + isShow.value = false;
  77 + };
43 return { 78 return {
44 clearAlaramContactAndNoticeMethodFunc, 79 clearAlaramContactAndNoticeMethodFunc,
45 setAlaramContactAndNoticeMethodFunc, 80 setAlaramContactAndNoticeMethodFunc,
46 - customResetFunc,  
47 getAllFields, 81 getAllFields,
48 register, 82 register,
49 setProps, 83 setProps,
  84 + addStep4,
  85 + prevStep4,
  86 + isShow,
  87 + closeStep4,
50 }; 88 };
51 }, 89 },
52 }); 90 });
53 </script> 91 </script>
54 <style lang="less" scoped> 92 <style lang="less" scoped>
55 .step-4 { 93 .step-4 {
56 - :deep .ant-btn {  
57 - position: relative;  
58 - right: 375px;  
59 - top: 18px;  
60 - } 94 + // :deep .ant-btn {
  95 + // position: relative;
  96 + // right: 375px;
  97 + // top: 18px;
  98 + // }
61 } 99 }
62 </style> 100 </style>
  1 +export const formatAlarmRuleConditionsData = (f) => {
  2 + return f.predicate.operation == 'EQUAL'
  3 + ? f.key.key + '等于' + f.predicate.value.defaultValue
  4 + : f.predicate.operation == 'STARTS_WITH'
  5 + ? f.key.key + '开始于' + f.predicate.value.defaultValue
  6 + : f.predicate.operation == 'ENDS_WITH'
  7 + ? f.key.key + '结束于' + f.predicate.value.defaultValue
  8 + : f.predicate.operation == 'NOT_CONTAINS'
  9 + ? f.key.key + '不包含' + f.predicate.value.defaultValue
  10 + : f.predicate.operation == 'NOT_EQUAL'
  11 + ? f.key.key + '不等于' + f.predicate.value.defaultValue
  12 + : f.predicate.operation == 'GREATER'
  13 + ? f.key.key + '大于' + f.predicate.value.defaultValue
  14 + : f.predicate.operation == 'LESS'
  15 + ? f.key.key + '小于' + f.predicate.value.defaultValue
  16 + : f.predicate.operation == 'GREATER_OR_EQUAL'
  17 + ? f.key.key + '大于或等于' + f.predicate.value.defaultValue
  18 + : f.key.key + '小于或等于' + f.predicate.value.defaultValue;
  19 +};
  20 +
  21 +export const formatEnableRuleData = (f) => {
  22 + return f.type == 'ANY_TIME' ? '始终启用' : f.type == 'SPECIFIC_TIME' ? '定时启用' : '自定义启用';
  23 +};
  1 +<template>
  2 + <div style="margin-left: 0.6vw">
  3 + <!-- 报警类型和传递报警-->
  4 + <div>
  5 + <div class="alert-type" style="margin-left: -2.1vw; margin-top: 1vh">
  6 + <BasicForm @register="registerForm"
  7 + /></div>
  8 + <div style="margin-top: -15px">
  9 + <div style="margin-left: -8px; margin-top: -10px">
  10 + <BasicForm
  11 + @register="registerFormHighSetting"
  12 + style="margin-left: 12px; margin-top: -10px"
  13 + >
  14 + <template #checkBox="{ model, field }">
  15 + <Checkbox v-model:checked="model[field]">传递报警</Checkbox>
  16 + </template>
  17 + </BasicForm>
  18 + </div>
  19 + </div>
  20 + </div>
  21 + <!-- 报警类型和传递报警 -->
  22 + <!-- 创建报警规则 -->
  23 + <div style="margin-top: -6vh">
  24 + <p style="margin-left: 10px; font-size: medium">创建报警规则</p>
  25 + <p v-if="createAlarmRuleData.length === 0" style="text-align: center; font-size: large"
  26 + >请添加创建报警规则</p
  27 + >
  28 + <div v-if="createAlarmRuleData.length > 0">
  29 + <template v-for="(item, index) in createAlarmRuleData" :key="index">
  30 + <span style="display: none">{{ item }}</span>
  31 + <span style="display: none">{{ index }}</span>
  32 + <div class="cursor-pointer" style="position: relative; top: 15.5vh; right: -40.8vw">
  33 + <img
  34 + style="cursor: pointer"
  35 + @click="removeAddCreateRuleFunc(index)"
  36 + alt="移除"
  37 + src="../../../../../../src/assets/images/close.png"
  38 + />
  39 + </div>
  40 + <div style="width: 38vw; height: 30vh; border: 1px solid grey; border-radius: 4px">
  41 + <div style="margin-top: 1vh">
  42 + <AlarmSeverityCpn ref="AlarmSeverityRef" />
  43 + <DetailTemplateCpn ref="DetailTemplateRef" />
  44 + <AlarmRuleConditionsCpn
  45 + ref="AlarmRuleConditionsRef"
  46 + @register="registerAlarmRuleConditionsModal"
  47 + @getAllFieldsRule="getAlarmRuleConditionsValFunc"
  48 + />
  49 + <EnableRuleCpn
  50 + ref="EnableRuleRef"
  51 + @register="registerEnableRuleModal"
  52 + @getAllFieldsEnab="getEnableRuleFunc"
  53 + />
  54 + <div style="margin-left: 0.5vw">
  55 + <span style="color: red">请添加报警规则条件：</span>
  56 + <a-button
  57 + style="border-radius: 10px"
  58 + class="mt-5"
  59 + @click="clickAddAlarmRuleConditionsFunc"
  60 + ><PlusCircleOutlined
  61 + /></a-button>
  62 + <div>
  63 + <template v-for="(item1, index1) in formatAlarmRuleConditions" :key="index1">
  64 + <p v-if="index1 == index">
  65 + 报警规则条件：{{ formatAlarmRuleConditionsFunc(item1) }}
  66 + </p>
  67 + </template>
  68 + </div>
  69 + </div>
  70 + <div style="margin-left: 0.5vw">
  71 + <span style="color: red">启用规则：</span>
  72 + <a-button style="border-radius: 10px" class="mt-5" @click="clickAddEnableRuleFunc"
  73 + ><PlusCircleOutlined
  74 + /></a-button>
  75 + <div>
  76 + <p v-if="formatEnableRule.length == 0">始终启用</p>
  77 + <template v-for="(item2, index2) in formatEnableRule" :key="index2">
  78 + <p v-if="index2 == index"> 启用规则：{{ formatEnableRuleFunc(item2) }} </p>
  79 + </template>
  80 + </div>
  81 + </div>
  82 + <div></div>
  83 + <div></div>
  84 + </div>
  85 + </div>
  86 + </template>
  87 + </div>
  88 + <div>
  89 + <a-button style="border-radius: 10px" class="mt-5" @click="clickAddCreateRuleFunc"
  90 + ><PlusCircleOutlined />添加创建条件</a-button
  91 + >
  92 + </div>
  93 + <!-- 清除报警规则 -->
  94 + <div style="margin-top: 2vh">
  95 + <p style="margin-left: 10px; font-size: medium">清除报警规则</p>
  96 + <div
  97 + v-if="isClearStatus"
  98 + class="cursor-pointer"
  99 + style="position: relative; top: 15.5vh; right: -40.8vw"
  100 + >
  101 + <img
  102 + style="cursor: pointer"
  103 + @click="removeAddClearRuleFunc"
  104 + alt="移除"
  105 + src="../../../../../../src/assets/images/close.png"
  106 + />
  107 + </div>
  108 + <div
  109 + v-if="isClearStatus"
  110 + style="width: 38vw; height: 30vh; border: 1px solid grey; border-radius: 4px"
  111 + >
  112 + <div style="margin-top: 2vh">
  113 + <div style="height: 3vh">
  114 + <BasicForm @register="registerFormChangeClearDetail" />
  115 + </div>
  116 + <AlarmRuleConditionsCpn
  117 + ref="AlarmRuleConditionsRef"
  118 + @register="registerClearAlarmRuleConditionsModal"
  119 + @getAllFieldsRule="getClearAlarmRuleConditionsValFunc"
  120 + />
  121 + <EnableRuleCpn
  122 + ref="EnableRuleRef"
  123 + @register="registerClearEnableRuleModal"
  124 + @getAllFieldsEnab="getClearEnableRuleFunc"
  125 + />
  126 + <div style="margin-left: 0.5vw">
  127 + <span style="color: red">请添加报警规则条件：</span>
  128 + <a-button
  129 + style="border-radius: 10px"
  130 + class="mt-5"
  131 + @click="clickClearAlarmRuleConditionsFunc"
  132 + ><PlusCircleOutlined
  133 + /></a-button>
  134 + <div>
  135 + <template v-for="(item3, index3) in formatClearAlarmRuleConditions" :key="index3">
  136 + <span style="display: none">{{ index3 }}</span>
  137 + <p> 报警规则条件：{{ formatClearAlarmRuleConditionsFunc(item3) }} </p>
  138 + </template>
  139 + </div>
  140 + </div>
  141 + <div style="margin-left: 0.5vw">
  142 + <span style="color: red">启用规则：</span>
  143 + <a-button style="border-radius: 10px" class="mt-5" @click="clickClearEnableRuleFunc"
  144 + ><PlusCircleOutlined
  145 + /></a-button>
  146 + <div>
  147 + <p v-if="formatEnableRule.length == 0">始终启用</p>
  148 + <template v-for="(item4, index4) in formatClearEnableRule" :key="index4">
  149 + <span style="display: none">{{ index4 }}</span>
  150 + <p> 启用规则：{{ formatClearEnableRuleFunc(item4) }} </p>
  151 + </template>
  152 + </div>
  153 + </div>
  154 + <div></div>
  155 + <div></div>
  156 + </div>
  157 + </div>
  158 + <div>
  159 + <a-button style="border-radius: 10px" class="mt-5" @click="clickAddClearRuleFunc"
  160 + ><PlusCircleOutlined />添加清除条件</a-button
  161 + >
  162 + </div>
  163 + </div>
  164 + <!-- 清除报警规则 -->
  165 + </div>
  166 + <!-- 创建报警规则 -->
  167 + </div>
  168 +</template>
  169 +
  170 +<script lang="ts">
  171 + import { defineComponent, ref, getCurrentInstance, nextTick, reactive } from 'vue';
  172 + import { BasicForm, useForm } from '/@/components/Form';
  173 + import { step3Schemas, step3HighSetting, formChangeDetailSchema } from '../data';
  174 + import { Checkbox } from 'ant-design-vue';
  175 + import { PlusCircleOutlined } from '@ant-design/icons-vue';
  176 + import AlarmSeverityCpn from '../cpns/alarmseverity/index.vue';
  177 + import DetailTemplateCpn from '../cpns/detailtemplate/index.vue';
  178 + import AlarmRuleConditionsCpn from '../cpns/alarmruleconditions/index.vue';
  179 + import EnableRuleCpn from '../cpns/enablerule/index.vue';
  180 + import { useModal } from '/@/components/Modal';
  181 + import { formatAlarmRuleConditionsData, formatEnableRuleData } from '../common/format-data/index';
  182 +
  183 + export default defineComponent({
  184 + components: {
  185 + BasicForm,
  186 + Checkbox,
  187 + PlusCircleOutlined,
  188 + AlarmSeverityCpn,
  189 + DetailTemplateCpn,
  190 + AlarmRuleConditionsCpn,
  191 + EnableRuleCpn,
  192 + },
  193 +
  194 + setup() {
  195 + const { proxy } = getCurrentInstance() as any;
  196 + const createAlarmRuleData: any = ref([1]);
  197 + const AlarmRuleConditionsRef = ref(null);
  198 + const EnableRuleRef = ref(null);
  199 + const formatAlarmRuleConditions: any = ref([]);
  200 + const formatClearAlarmRuleConditions: any = ref([]);
  201 + const formatEnableRule: any = ref([]);
  202 + const formatClearEnableRule: any = ref({});
  203 + let alaramsObj: any = reactive({
  204 + alarmType: null,
  205 + propagate: null,
  206 + propagateRelationTypes: null,
  207 + clearRule: {},
  208 + createRules: {},
  209 + });
  210 + const AlarmSeverityRef = ref(null);
  211 + const DetailTemplateRef = ref(null);
  212 + const tempDetailTemplateData: any = ref([]);
  213 + const isClearStatus = ref(false);
  214 +
  215 + const [registerAlarmRuleConditionsModal, { openModal: openModalAlarmRuleConditions }] =
  216 + useModal();
  217 + const [registerEnableRuleModal, { openModal: openModalEnableRule }] = useModal();
  218 + const [
  219 + registerClearAlarmRuleConditionsModal,
  220 + { openModal: openModalClearAlarmRuleConditions },
  221 + ] = useModal();
  222 + const [registerClearEnableRuleModal, { openModal: openModalClearEnableRule }] = useModal();
  223 + const [registerForm, { validate: getAlarmTypeValFunc }] = useForm({
  224 + labelWidth: 120,
  225 + schemas: step3Schemas,
  226 + showResetButton: false,
  227 + showSubmitButton: false,
  228 + });
  229 + const [registerFormHighSetting, { getFieldsValue: getDeliverAlertsValFunc }] = useForm({
  230 + labelWidth: 120,
  231 + schemas: step3HighSetting,
  232 + showResetButton: false,
  233 + showSubmitButton: false,
  234 + actionColOptions: {
  235 + span: 24,
  236 + },
  237 + });
  238 + const [registerFormChangeClearDetail, { getFieldsValue: getRegisterFormClearChangeDetail }] =
  239 + useForm({
  240 + labelWidth: 120,
  241 + schemas: formChangeDetailSchema,
  242 + showResetButton: false,
  243 + showSubmitButton: false,
  244 + actionColOptions: {
  245 + span: 24,
  246 + },
  247 + });
  248 +
  249 + const clickAddCreateRuleFunc = () => {
  250 + createAlarmRuleData.value.push(1);
  251 + getAddCreateRuleFunc();
  252 + };
  253 + /**
  254 + * 获取创建报警规则数据
  255 + */
  256 + const getAddCreateRuleFunc = () => {
  257 + const val4 = proxy.$refs.AlarmSeverityRef?.getFieldsValueFunc();
  258 + const val5 = proxy.$refs.DetailTemplateRef?.getFieldsValueFunc();
  259 + let kongDetail = {};
  260 + let kongRule = {};
  261 + let kongEnable = {};
  262 + tempDetailTemplateData.value.push(val5 as never);
  263 + tempDetailTemplateData.value.forEach((f) => {
  264 + kongDetail = f;
  265 + });
  266 + formatAlarmRuleConditions.value.forEach((f) => {
  267 + kongRule = f;
  268 + });
  269 + formatEnableRule.value.forEach((f) => {
  270 + kongEnable = f;
  271 + });
  272 + alaramsObj.createRules[val4?.default] = {
  273 + ...kongDetail,
  274 + ...{ condition: Object.keys(kongRule).length == 0 ? null : kongRule },
  275 + ...{ schedule: Object.keys(kongEnable).length == 0 ? null : kongEnable },
  276 + };
  277 + };
  278 + const clickAddClearRuleFunc = () => {
  279 + isClearStatus.value = true;
  280 + const val6 = getRegisterFormClearChangeDetail();
  281 + let kongClearRule = {};
  282 + formatClearAlarmRuleConditions.value.forEach((f) => {
  283 + kongClearRule = f;
  284 + });
  285 + alaramsObj.clearRule = {
  286 + ...val6,
  287 + ...{
  288 + schedule:
  289 + Object.keys(formatClearEnableRule.value).length == 0
  290 + ? null
  291 + : formatClearEnableRule.value,
  292 + },
  293 + ...{
  294 + condition: formatClearAlarmRuleConditions.value.length == 0 ? null : kongClearRule,
  295 + },
  296 + };
  297 + };
  298 + const removeAddClearRuleFunc = () => {
  299 + isClearStatus.value = false;
  300 + alaramsObj.clearRule = null;
  301 + };
  302 + const removeAddCreateRuleFunc = (i) => {
  303 + let delI = i;
  304 + createAlarmRuleData.value.splice(delI, 1);
  305 + for (let i1 in alaramsObj.createRules) {
  306 + if (delI) {
  307 + delete alaramsObj.createRules[i1];
  308 + }
  309 + }
  310 + };
  311 + const clickAddAlarmRuleConditionsFunc = () => {
  312 + nextTick(() => {
  313 + openModalAlarmRuleConditions(true);
  314 + });
  315 + };
  316 + const clickAddEnableRuleFunc = () => {
  317 + nextTick(() => {
  318 + openModalEnableRule(true);
  319 + });
  320 + };
  321 +
  322 + const clickClearAlarmRuleConditionsFunc = () => {
  323 + nextTick(() => {
  324 + openModalClearAlarmRuleConditions(true);
  325 + });
  326 + };
  327 + const clickClearEnableRuleFunc = () => {
  328 + nextTick(() => {
  329 + openModalClearEnableRule(true);
  330 + });
  331 + };
  332 + const getAlarmRuleConditionsValFunc = (e) => {
  333 + formatAlarmRuleConditions.value.push({
  334 + condition: e,
  335 + } as never);
  336 + };
  337 + const getClearAlarmRuleConditionsValFunc = (e) => {
  338 + formatClearAlarmRuleConditions.value.push({
  339 + condition: e,
  340 + } as never);
  341 + };
  342 + const formatAlarmRuleConditionsFunc = (e) => {
  343 + let formatMap = e.condition.map((f: any) => formatAlarmRuleConditionsData(f));
  344 + return formatMap;
  345 + };
  346 + const formatClearAlarmRuleConditionsFunc = (e) => {
  347 + let formatMap = e.condition.map((f: any) => formatAlarmRuleConditionsData(f));
  348 + return formatMap;
  349 + };
  350 +
  351 + const getEnableRuleFunc = (e) => {
  352 + formatEnableRule.value.push(e);
  353 + };
  354 + const getClearEnableRuleFunc = (e) => {
  355 + formatClearEnableRule.value = e;
  356 + };
  357 +
  358 + const formatEnableRuleFunc = (e) => {
  359 + let formatMap = formatEnableRuleData(e);
  360 + return formatMap;
  361 + };
  362 + const formatClearEnableRuleFunc = (e) => {
  363 + let formatMap = formatEnableRuleData(e);
  364 + return formatMap;
  365 + };
  366 +
  367 + const getStep3AllDataFunc = async () => {
  368 + const val1 = await getAlarmTypeValFunc();
  369 + const val2 = getDeliverAlertsValFunc();
  370 + const val3 = [];
  371 + val3.push(val2.propagateRelationTypes as never);
  372 + alaramsObj.alarmType = val1.alarmType;
  373 + alaramsObj.propagate = val2.propagate;
  374 + if (val2.propagateRelationTypes == undefined) {
  375 + alaramsObj.propagateRelationTypes = null;
  376 + } else {
  377 + alaramsObj.propagateRelationTypes = val3;
  378 + }
  379 + getAddCreateRuleFunc();
  380 + clickAddClearRuleFunc();
  381 + if (alaramsObj.clearRule.condition == null) {
  382 + isClearStatus.value = false;
  383 + }
  384 + return alaramsObj;
  385 + };
  386 +
  387 + return {
  388 + registerForm,
  389 + registerFormHighSetting,
  390 + clickAddCreateRuleFunc,
  391 + createAlarmRuleData,
  392 + clickAddClearRuleFunc,
  393 + removeAddCreateRuleFunc,
  394 + clickAddEnableRuleFunc,
  395 + clickAddAlarmRuleConditionsFunc,
  396 + AlarmRuleConditionsRef,
  397 + EnableRuleRef,
  398 + registerAlarmRuleConditionsModal,
  399 + registerEnableRuleModal,
  400 + getAlarmRuleConditionsValFunc,
  401 + formatAlarmRuleConditions,
  402 + formatAlarmRuleConditionsFunc,
  403 + formatEnableRule,
  404 + formatEnableRuleFunc,
  405 + getEnableRuleFunc,
  406 + getStep3AllDataFunc,
  407 + AlarmSeverityRef,
  408 + DetailTemplateRef,
  409 + isClearStatus,
  410 + removeAddClearRuleFunc,
  411 + formatClearAlarmRuleConditions,
  412 + formatClearAlarmRuleConditionsFunc,
  413 + formatClearEnableRule,
  414 + formatClearEnableRuleFunc,
  415 + registerClearAlarmRuleConditionsModal,
  416 + registerClearEnableRuleModal,
  417 + clickClearAlarmRuleConditionsFunc,
  418 + clickClearEnableRuleFunc,
  419 + getClearAlarmRuleConditionsValFunc,
  420 + getClearEnableRuleFunc,
  421 + registerFormChangeClearDetail,
  422 + };
  423 + },
  424 + });
  425 +</script>
  426 +
  427 +<style lang="less" scoped></style>
@@ -80,7 +80,7 @@ @@ -80,7 +80,7 @@
80 }, 10); 80 }, 10);
81 } 81 }
82 }; 82 };
83 - setFieldsValueFunc(); 83 + // setFieldsValueFunc();
84 return { 84 return {
85 resetFieldsFunc, 85 resetFieldsFunc,
86 updateSchemaSelectDisableFunc, 86 updateSchemaSelectDisableFunc,
@@ -3,7 +3,7 @@ import { FormSchema } from '/@/components/Table'; @@ -3,7 +3,7 @@ import { FormSchema } from '/@/components/Table';
3 export const formSchema: FormSchema[] = [ 3 export const formSchema: FormSchema[] = [
4 { 4 {
5 field: 'alarmDetails', 5 field: 'alarmDetails',
6 - label: '', 6 + label: '报警详细信息：',
7 colProps: { span: 17 }, 7 colProps: { span: 17 },
8 component: 'Input', 8 component: 'Input',
9 componentProps: { 9 componentProps: {
@@ -188,7 +188,7 @@ export const alertContactsSchemas: FormSchema[] = [ @@ -188,7 +188,7 @@ export const alertContactsSchemas: FormSchema[] = [
188 export const formChangeDetailSchema: FormSchema[] = [ 188 export const formChangeDetailSchema: FormSchema[] = [
189 { 189 {
190 field: 'alarmDetails', 190 field: 'alarmDetails',
191 - label: '', 191 + label: '报警详细信息：',
192 colProps: { span: 13 }, 192 colProps: { span: 13 },
193 component: 'Input', 193 component: 'Input',
194 defaultValue: '', 194 defaultValue: '',