简柏林 / 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,6 +85,16 @@
85 useTable({ 85 useTable({
86 title: '告警记录列表', 86 title: '告警记录列表',
87 api: getDeviceAlarm, 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 columns: alarmColumns, 98 columns: alarmColumns,
89 rowKey: 'id', 99 rowKey: 'id',
90 useSearchForm: true, 100 useSearchForm: true,
@@ -120,25 +130,25 @@ @@ -120,25 +130,25 @@
120 reload(); 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 return [...operationNumber_OR_TIME, ...operationString, ...operationBoolean].find( 138 return [...operationNumber_OR_TIME, ...operationString, ...operationBoolean].find(
129 - (item) => item.value === curr.logic 139 + (item) => item.value === curr?.logic
130 )?.symbol; 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 return { 148 return {
139 ['触发属性']: findName(item, curr), 149 ['触发属性']: findName(item, curr),
140 - ['触发条件']: `${findLogin(curr)}${curr.logicValue}`,  
141 - ['触发值']: `${curr.realValue}${ 150 + ['触发条件']: `${findLogin(curr)}${curr?.logicValue}`,
  151 + ['触发值']: `${curr?.realValue}${
142 findAttribute(item, curr)?.detail?.dataType?.specs?.unit?.key ?? '' 152 findAttribute(item, curr)?.detail?.dataType?.specs?.unit?.key ?? ''
143 }`, 153 }`,
144 }; 154 };
@@ -151,56 +161,62 @@ @@ -151,56 +161,62 @@
151 const { details } = record; 161 const { details } = record;
152 if (!details) return; 162 if (!details) return;
153 const deviceIdKeys = Object.keys(details); 163 const deviceIdKeys = Object.keys(details);
154 - const detailObject = deviceIdKeys.map((key) => ({ label: key, value: details[key] }));  
155 const dataFormat = await handleAlarmDetailFormat(deviceIdKeys); 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 Modal.info({ 198 Modal.info({
183 title: '告警详情', 199 title: '告警详情',
184 width: 600, 200 width: 600,
185 centered: true, 201 centered: true,
186 maskClosable: true, 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 const handleAlarmDetailFormat = async (keys: string[]) => { 206 const handleAlarmDetailFormat = async (keys: string[]) => {
191 - const temp: any = []; 207 + const temp: Recordable = [];
192 for (let item of keys) { 208 for (let item of keys) {
193 if (item === 'key' || item === 'data') return []; //旧数据则终止 209 if (item === 'key' || item === 'data') return []; //旧数据则终止
194 const deviceDetailRes = await getDeviceDetail(item); 210 const deviceDetailRes = await getDeviceDetail(item);
195 const { deviceProfileId } = deviceDetailRes; 211 const { deviceProfileId } = deviceDetailRes;
196 if (!deviceProfileId) return []; 212 if (!deviceProfileId) return [];
197 const attributeRes = await getAttribute(deviceProfileId); 213 const attributeRes = await getAttribute(deviceProfileId);
198 - const dataFormat: any = handleDataFormat(deviceDetailRes, attributeRes); 214 + const dataFormat: Recordable = handleDataFormat(deviceDetailRes, attributeRes);
199 temp.push(dataFormat); 215 temp.push(dataFormat);
200 } 216 }
201 return temp; 217 return temp;
202 }; 218 };
203 - const handleDataFormat = (deviceDetail: any, attributes: any) => { 219 + const handleDataFormat = (deviceDetail: Recordable, attributes: Recordable) => {
204 const { name, tbDeviceId, alias } = deviceDetail; 220 const { name, tbDeviceId, alias } = deviceDetail;
205 const attribute = attributes.map((item) => ({ 221 const attribute = attributes.map((item) => ({
206 identifier: item.identifier, 222 identifier: item.identifier,
@@ -81,24 +81,24 @@ @@ -81,24 +81,24 @@
81 reload(); 81 reload();
82 }; 82 };
83 const findName = (item: any, curr: any) => { 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 const findLogin = (curr: any) => { 87 const findLogin = (curr: any) => {
88 return [...operationNumber_OR_TIME, ...operationString, ...operationBoolean].find( 88 return [...operationNumber_OR_TIME, ...operationString, ...operationBoolean].find(
89 - (item) => item.value === curr.logic 89 + (item) => item.value === curr?.logic
90 )?.symbol; 90 )?.symbol;
91 }; 91 };
92 92
93 const findAttribute = (item: any, curr: any) => { 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 const findValue = (item: any, curr: any) => { 97 const findValue = (item: any, curr: any) => {
98 return { 98 return {
99 ['触发属性']: findName(item, curr), 99 ['触发属性']: findName(item, curr),
100 - ['触发条件']: `${findLogin(curr)}${curr.logicValue}`,  
101 - ['触发值']: `${curr.realValue}${ 100 + ['触发条件']: `${findLogin(curr)}${curr?.logicValue}`,
  101 + ['触发值']: `${curr?.realValue}${
102 findAttribute(item, curr)?.detail?.dataType?.specs?.unit?.key ?? '' 102 findAttribute(item, curr)?.detail?.dataType?.specs?.unit?.key ?? ''
103 }`, 103 }`,
104 }; 104 };
@@ -111,40 +111,46 @@ @@ -111,40 +111,46 @@
111 const { details } = record; 111 const { details } = record;
112 if (!details) return; 112 if (!details) return;
113 const deviceIdKeys = Object.keys(details); 113 const deviceIdKeys = Object.keys(details);
114 - const detailObject = deviceIdKeys.map((key) => ({ label: key, value: details[key] }));  
115 const dataFormat = await handleAlarmDetailFormat(deviceIdKeys); 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 Modal.info({ 148 Modal.info({
143 title: '告警详情', 149 title: '告警详情',
144 width: 600, 150 width: 600,
145 centered: true, 151 centered: true,
146 maskClosable: true, 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 const handleAlarmDetailFormat = async (keys: string[]) => { 156 const handleAlarmDetailFormat = async (keys: string[]) => {