Commit 592444b2df612c7ce331ffff4bdc730012516f03
1 parent
e3719bf7
fix: DEFECT-1557 告警记录里面加上告警详情,跟设备告警记录一致
Showing
3 changed files
with
95 additions
and
2 deletions
| ... | ... | @@ -126,6 +126,12 @@ export const alarmColumns: BasicColumn[] = [ |
| 126 | 126 | format: (text) => alarmLevel(text), |
| 127 | 127 | }, |
| 128 | 128 | { |
| 129 | + title: '告警详情', | |
| 130 | + dataIndex: 'details', | |
| 131 | + slots: { customRender: 'details' }, | |
| 132 | + width: 160, | |
| 133 | + }, | |
| 134 | + { | |
| 129 | 135 | title: '状态', |
| 130 | 136 | dataIndex: 'status', |
| 131 | 137 | format: (text) => statusType(text), | ... | ... |
| ... | ... | @@ -13,17 +13,31 @@ |
| 13 | 13 | ]" |
| 14 | 14 | /> |
| 15 | 15 | </template> |
| 16 | + <template #details="{ record }"> | |
| 17 | + <a-button type="link" class="ml-2" @click="handleViewAlarmDetails(record)"> | |
| 18 | + 查看告警详情 | |
| 19 | + </a-button> | |
| 20 | + </template> | |
| 16 | 21 | </BasicTable> |
| 17 | 22 | <AlarmDetailDrawer @register="registerDetailDrawer" @success="handleSuccess" /> |
| 18 | 23 | </div> |
| 19 | 24 | </template> |
| 20 | 25 | <script lang="ts"> |
| 21 | - import { defineComponent } from 'vue'; | |
| 26 | + import { defineComponent, nextTick, h } from 'vue'; | |
| 22 | 27 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
| 23 | 28 | import { alarmColumns, alarmSearchSchemas } from './config/detail.config'; |
| 24 | 29 | import { getDeviceAlarm } from '/@/api/device/deviceManager'; |
| 25 | 30 | import { useDrawer } from '/@/components/Drawer'; |
| 26 | 31 | import AlarmDetailDrawer from './cpns/AlarmDetailDrawer.vue'; |
| 32 | + import { Modal } from 'ant-design-vue'; | |
| 33 | + import { JsonPreview } from '/@/components/CodeEditor'; | |
| 34 | + import { getDeviceDetail } from '/@/api/device/deviceManager'; | |
| 35 | + import { getAttribute } from '/@/api/ruleengine/ruleengineApi'; | |
| 36 | + import { | |
| 37 | + operationNumber_OR_TIME, | |
| 38 | + operationString, | |
| 39 | + operationBoolean, | |
| 40 | + } from '/@/views/rule/linkedge/config/formatData'; | |
| 27 | 41 | |
| 28 | 42 | export default defineComponent({ |
| 29 | 43 | name: 'AlarmCenter', |
| ... | ... | @@ -61,11 +75,85 @@ |
| 61 | 75 | const handleSuccess = () => { |
| 62 | 76 | reload(); |
| 63 | 77 | }; |
| 78 | + const handleViewAlarmDetails = async (record: Recordable) => { | |
| 79 | + await nextTick(); | |
| 80 | + const { details } = record; | |
| 81 | + const deviceIdKeys = Object.keys(details); | |
| 82 | + const detailObject = deviceIdKeys.map((key) => ({ label: key, value: details[key] })); | |
| 83 | + const dataFormat = await handleAlarmDetailFormat(deviceIdKeys); | |
| 84 | + const dataFormats = detailObject.reduce((acc: any, curr: any) => { | |
| 85 | + dataFormat.forEach((item) => { | |
| 86 | + if (item.tbDeviceId === curr.label) { | |
| 87 | + const findName = item.attribute.find( | |
| 88 | + (item) => item.identifier === curr.value.key | |
| 89 | + )?.name; | |
| 90 | + const findLogin = [ | |
| 91 | + ...operationNumber_OR_TIME, | |
| 92 | + ...operationString, | |
| 93 | + ...operationBoolean, | |
| 94 | + ].find((item) => item.value === curr.value.logic)?.symbol; | |
| 95 | + const findAttribute = item.attribute.find( | |
| 96 | + (findItem) => findItem.identifier === curr.value.key | |
| 97 | + ); | |
| 98 | + const value = { | |
| 99 | + ['触发属性']: findName, | |
| 100 | + ['触发条件']: `${findLogin}${curr.value.logicValue}`, | |
| 101 | + ['触发值']: `${curr.value.realValue}${findAttribute.detail?.dataType?.specs?.unit?.key}`, | |
| 102 | + }; | |
| 103 | + const data = { | |
| 104 | + [item.name]: value, | |
| 105 | + }; | |
| 106 | + acc.push(data); | |
| 107 | + } | |
| 108 | + }); | |
| 109 | + return [...acc]; | |
| 110 | + }, []); | |
| 111 | + const objectFormat = dataFormats.reduce((acc: any, curr: any) => { | |
| 112 | + return { | |
| 113 | + ...acc, | |
| 114 | + ...curr, | |
| 115 | + }; | |
| 116 | + }, {}); | |
| 117 | + Modal.info({ | |
| 118 | + title: '告警详情', | |
| 119 | + width: 600, | |
| 120 | + centered: true, | |
| 121 | + maskClosable: true, | |
| 122 | + content: h(JsonPreview, { data: JSON.parse(JSON.stringify(objectFormat)) }), | |
| 123 | + }); | |
| 124 | + }; | |
| 125 | + const handleAlarmDetailFormat = async (keys: string[]) => { | |
| 126 | + const temp: any = []; | |
| 127 | + for (let item of keys) { | |
| 128 | + if (item === 'key' || item === 'data') return []; //旧数据则终止 | |
| 129 | + const deviceDetailRes = await getDeviceDetail(item); | |
| 130 | + const { deviceProfileId } = deviceDetailRes; | |
| 131 | + if (!deviceProfileId) return []; | |
| 132 | + const attributeRes = await getAttribute(deviceProfileId); | |
| 133 | + const dataFormat: any = handleDataFormat(deviceDetailRes, attributeRes); | |
| 134 | + temp.push(dataFormat); | |
| 135 | + } | |
| 136 | + return temp; | |
| 137 | + }; | |
| 138 | + const handleDataFormat = (deviceDetail: any, attributes: any) => { | |
| 139 | + const { name, tbDeviceId } = deviceDetail; | |
| 140 | + const attribute = attributes.map((item) => ({ | |
| 141 | + identifier: item.identifier, | |
| 142 | + name: item.name, | |
| 143 | + detail: item.detail, | |
| 144 | + })); | |
| 145 | + return { | |
| 146 | + name, | |
| 147 | + tbDeviceId, | |
| 148 | + attribute, | |
| 149 | + }; | |
| 150 | + }; | |
| 64 | 151 | return { |
| 65 | 152 | registerTable, |
| 66 | 153 | registerDetailDrawer, |
| 67 | 154 | handleDetail, |
| 68 | 155 | handleSuccess, |
| 156 | + handleViewAlarmDetails, | |
| 69 | 157 | }; |
| 70 | 158 | }, |
| 71 | 159 | }); | ... | ... |
| ... | ... | @@ -86,7 +86,6 @@ |
| 86 | 86 | const deviceIdKeys = Object.keys(details); |
| 87 | 87 | const detailObject = deviceIdKeys.map((key) => ({ label: key, value: details[key] })); |
| 88 | 88 | const dataFormat = await handleAlarmDetailFormat(deviceIdKeys); |
| 89 | - console.log(detailObject, dataFormat, 'dataFormat'); | |
| 90 | 89 | const dataFormats = detailObject.reduce((acc: any, curr: any) => { |
| 91 | 90 | dataFormat.forEach((item) => { |
| 92 | 91 | if (item.tbDeviceId === curr.label) { | ... | ... |