简柏林 / thingskit-front · Commits

Commit bbd84d5ce88e9af9ac3f5e7a6641121e53c05c97

Authored by fengwotao
1 parent 49f76cb5

perf: 优化告警记录里的告警详情和设备列表里的告警详情内容展示

Inline Side-by-side
Showing 2 changed files with 91 additions and 69 deletions
... ... @@ -85,6 +85,16 @@
85 85 useTable({
86 86 title: '告警记录列表',
87 87 api: getDeviceAlarm,
  88 + beforeFetch: (params) => {
  89 + const { status } = params;
  90 + const obj = {
  91 + ...params,
  92 + ...{
  93 + status: status ? status.at(-1) : null,
  94 + },
  95 + };
  96 + return obj;
  97 + },
88 98 columns: alarmColumns,
89 99 rowKey: 'id',
90 100 useSearchForm: true,
... ... @@ -120,25 +130,25 @@
120 130 reload();
121 131 };
122 132
123   - const findName = (item: any, curr: any) => {
124   - return item.attribute.find((item) => item.identifier === curr.key)?.name;
  133 + const findName = (item: Recordable, curr: Recordable) => {
  134 + return item.attribute.find((item) => item.identifier === curr?.key)?.name;
125 135 };
126 136
127   - const findLogin = (curr: any) => {
  137 + const findLogin = (curr: Recordable) => {
128 138 return [...operationNumber_OR_TIME, ...operationString, ...operationBoolean].find(
129   - (item) => item.value === curr.logic
  139 + (item) => item.value === curr?.logic
130 140 )?.symbol;
131 141 };
132 142
133   - const findAttribute = (item: any, curr: any) => {
134   - item.attribute.find((findItem) => findItem.identifier === curr.key);
  143 + const findAttribute = (item: Recordable, curr: Recordable) => {
  144 + item.attribute.find((findItem) => findItem.identifier === curr?.key);
135 145 };
136 146
137   - const findValue = (item: any, curr: any) => {
  147 + const findValue = (item: Recordable, curr: Recordable) => {
138 148 return {
139 149 ['触发属性']: findName(item, curr),
140   - ['触发条件']: `${findLogin(curr)}${curr.logicValue}`,
141   - ['触发值']: `${curr.realValue}${
  150 + ['触发条件']: `${findLogin(curr)}${curr?.logicValue}`,
  151 + ['触发值']: `${curr?.realValue}${
142 152 findAttribute(item, curr)?.detail?.dataType?.specs?.unit?.key ?? ''
143 153 }`,
144 154 };
... ... @@ -151,56 +161,62 @@
151 161 const { details } = record;
152 162 if (!details) return;
153 163 const deviceIdKeys = Object.keys(details);
154   - const detailObject = deviceIdKeys.map((key) => ({ label: key, value: details[key] }));
155 164 const dataFormat = await handleAlarmDetailFormat(deviceIdKeys);
156   - const dataFormats = detailObject.reduce((acc: Recordable[], curr: Recordable) => {
157   - let currentObj: Recordable = {};
158   - dataFormat.forEach((item) => {
159   - if (item.tbDeviceId === curr.label) {
160   - const { triggerData, conditionData } = curr.value;
161   - if (triggerData || conditionData) {
162   - for (let currItem in curr.value) {
163   - const value = findValue(item, curr.value[currItem]);
164   - currentObj = {
165   - [item.name]: {
166   - [handleAlarmText(currItem)]: value,
167   - },
168   - };
169   - acc.push(currentObj);
170   - }
171   - } else {
172   - const value = findValue(item, curr.value);
173   - currentObj = {
174   - [item.name]: value,
175   - };
176   - acc.push(currentObj);
177   - }
  165 + const mapDataFormat = deviceIdKeys.map((deviceKey: string) => {
  166 + const findDataFormat = dataFormat.find(
  167 + (dataItem: Recordable) => dataItem.tbDeviceId === deviceKey
  168 + );
  169 + const dataKeys = Object.keys(details[deviceKey]);
  170 + const data: any = dataKeys.map((dataItem: string) => {
  171 + if (dataItem !== 'triggerData' && dataItem !== 'conditionData') {
  172 + return findValue(findDataFormat, details[deviceKey]);
  173 + } else {
  174 + return {
  175 + [handleAlarmText(dataItem)]: findValue(
  176 + findDataFormat,
  177 + details[deviceKey][dataItem]
  178 + ),
  179 + };
178 180 }
179 181 });
180   - return [...acc];
181   - }, []);
  182 + const objectDataFormat = data.reduce((acc: Recordable, curr: Recordable) => {
  183 + return {
  184 + ...acc,
  185 + ...curr,
  186 + };
  187 + });
  188 + return {
  189 + [findDataFormat.name]: objectDataFormat,
  190 + };
  191 + });
  192 + const objectDataFormats = mapDataFormat.reduce((acc: Recordable, curr: Recordable) => {
  193 + return {
  194 + ...acc,
  195 + ...curr,
  196 + };
  197 + });
182 198 Modal.info({
183 199 title: '告警详情',
184 200 width: 600,
185 201 centered: true,
186 202 maskClosable: true,
187   - content: h(JsonPreview, { data: JSON.parse(JSON.stringify(dataFormats)), deep: 4 }),
  203 + content: h(JsonPreview, { data: JSON.parse(JSON.stringify(objectDataFormats)), deep: 4 }),
188 204 });
189 205 };
190 206 const handleAlarmDetailFormat = async (keys: string[]) => {
191   - const temp: any = [];
  207 + const temp: Recordable = [];
192 208 for (let item of keys) {
193 209 if (item === 'key' || item === 'data') return []; //旧数据则终止
194 210 const deviceDetailRes = await getDeviceDetail(item);
195 211 const { deviceProfileId } = deviceDetailRes;
196 212 if (!deviceProfileId) return [];
197 213 const attributeRes = await getAttribute(deviceProfileId);
198   - const dataFormat: any = handleDataFormat(deviceDetailRes, attributeRes);
  214 + const dataFormat: Recordable = handleDataFormat(deviceDetailRes, attributeRes);
199 215 temp.push(dataFormat);
200 216 }
201 217 return temp;
202 218 };
203   - const handleDataFormat = (deviceDetail: any, attributes: any) => {
  219 + const handleDataFormat = (deviceDetail: Recordable, attributes: Recordable) => {
204 220 const { name, tbDeviceId, alias } = deviceDetail;
205 221 const attribute = attributes.map((item) => ({
206 222 identifier: item.identifier,
... ...
... ... @@ -81,24 +81,24 @@
81 81 reload();
82 82 };
83 83 const findName = (item: any, curr: any) => {
84   - return item.attribute.find((item) => item.identifier === curr.key)?.name;
  84 + return item.attribute.find((item) => item.identifier === curr?.key)?.name;
85 85 };
86 86
87 87 const findLogin = (curr: any) => {
88 88 return [...operationNumber_OR_TIME, ...operationString, ...operationBoolean].find(
89   - (item) => item.value === curr.logic
  89 + (item) => item.value === curr?.logic
90 90 )?.symbol;
91 91 };
92 92
93 93 const findAttribute = (item: any, curr: any) => {
94   - item.attribute.find((findItem) => findItem.identifier === curr.key);
  94 + item.attribute.find((findItem) => findItem.identifier === curr?.key);
95 95 };
96 96
97 97 const findValue = (item: any, curr: any) => {
98 98 return {
99 99 ['触发属性']: findName(item, curr),
100   - ['触发条件']: `${findLogin(curr)}${curr.logicValue}`,
101   - ['触发值']: `${curr.realValue}${
  100 + ['触发条件']: `${findLogin(curr)}${curr?.logicValue}`,
  101 + ['触发值']: `${curr?.realValue}${
102 102 findAttribute(item, curr)?.detail?.dataType?.specs?.unit?.key ?? ''
103 103 }`,
104 104 };
... ... @@ -111,40 +111,46 @@
111 111 const { details } = record;
112 112 if (!details) return;
113 113 const deviceIdKeys = Object.keys(details);
114   - const detailObject = deviceIdKeys.map((key) => ({ label: key, value: details[key] }));
115 114 const dataFormat = await handleAlarmDetailFormat(deviceIdKeys);
116   - const dataFormats = detailObject.reduce((acc: Recordable[], curr: Recordable) => {
117   - let currentObj: Recordable = {};
118   - dataFormat.forEach((item) => {
119   - if (item.tbDeviceId === curr.label) {
120   - const { triggerData, conditionData } = curr.value;
121   - if (triggerData || conditionData) {
122   - for (let currItem in curr.value) {
123   - const value = findValue(item, curr.value[currItem]);
124   - currentObj = {
125   - [item.name]: {
126   - [handleAlarmText(currItem)]: value,
127   - },
128   - };
129   - acc.push(currentObj);
130   - }
131   - } else {
132   - const value = findValue(item, curr.value);
133   - currentObj = {
134   - [item.name]: value,
135   - };
136   - acc.push(currentObj);
137   - }
  115 + const mapDataFormat = deviceIdKeys.map((deviceKey: string) => {
  116 + const findDataFormat = dataFormat.find(
  117 + (dataItem: Recordable) => dataItem.tbDeviceId === deviceKey
  118 + );
  119 + const dataKeys = Object.keys(details[deviceKey]);
  120 + const data: any = dataKeys.map((dataItem: string) => {
  121 + if (dataItem !== 'triggerData' && dataItem !== 'conditionData') {
  122 + return findValue(findDataFormat, details[deviceKey]);
  123 + } else {
  124 + return {
  125 + [handleAlarmText(dataItem)]: findValue(
  126 + findDataFormat,
  127 + details[deviceKey][dataItem]
  128 + ),
  129 + };
138 130 }
139 131 });
140   - return [...acc];
141   - }, []);
  132 + const objectDataFormat = data.reduce((acc: Recordable, curr: Recordable) => {
  133 + return {
  134 + ...acc,
  135 + ...curr,
  136 + };
  137 + });
  138 + return {
  139 + [findDataFormat.name]: objectDataFormat,
  140 + };
  141 + });
  142 + const objectDataFormats = mapDataFormat.reduce((acc: Recordable, curr: Recordable) => {
  143 + return {
  144 + ...acc,
  145 + ...curr,
  146 + };
  147 + });
142 148 Modal.info({
143 149 title: '告警详情',
144 150 width: 600,
145 151 centered: true,
146 152 maskClosable: true,
147   - content: h(JsonPreview, { data: JSON.parse(JSON.stringify(dataFormats)), deep: 4 }),
  153 + content: h(JsonPreview, { data: JSON.parse(JSON.stringify(objectDataFormats)), deep: 4 }),
148 154 });
149 155 };
150 156 const handleAlarmDetailFormat = async (keys: string[]) => {
... ...