简柏林 / thingskit-front · Commits

Commit ba4a9c35769f8b6757fd0e4594fdd817da08e5e0

Authored by xp.Huang
2 parents 2803d442 30099968

Merge branch 'local_devbranch_byft' into 'main_dev' 

perf: 优化告警记录表格列表顺序展示和表格查询

See merge request yunteng/thingskit-front!1041
Inline Side-by-side
Showing 3 changed files with 169 additions and 94 deletions
1 -import { alarmLevel, statusType } from '/@/views/device/list/config/detail.config'; 1 +import { alarmLevel } from '/@/views/device/list/config/detail.config';
2 import { FormSchema } from '/@/components/Form'; 2 import { FormSchema } from '/@/components/Form';
3 import { BasicColumn } from '/@/components/Table'; 3 import { BasicColumn } from '/@/components/Table';
4 import moment from 'moment'; 4 import moment from 'moment';
5 import { findDictItemByCode } from '/@/api/system/dict'; 5 import { findDictItemByCode } from '/@/api/system/dict';
6 -import { AlarmStatus, AlarmStatusMean } from '/@/enums/alarmEnum'; 6 +import { AlarmStatus } from '/@/enums/alarmEnum';
  7 +import { Tag } from 'ant-design-vue';
  8 +import { h } from 'vue';
7 9
8 export const alarmSearchSchemas: FormSchema[] = [ 10 export const alarmSearchSchemas: FormSchema[] = [
9 { 11 {
10 field: 'status', 12 field: 'status',
11 label: '告警状态', 13 label: '告警状态',
12 - component: 'Select', 14 + component: 'Cascader',
13 colProps: { span: 6 }, 15 colProps: { span: 6 },
14 componentProps: { 16 componentProps: {
15 options: [ 17 options: [
16 { 18 {
17 - label: AlarmStatusMean[AlarmStatus.CLEARED_UN_ACK],  
18 - value: AlarmStatus.CLEARED_UN_ACK, 19 + value: '0',
  20 + label: '清除',
  21 + children: [
  22 + {
  23 + value: AlarmStatus.CLEARED_UN_ACK,
  24 + label: '清除未确认',
  25 + },
  26 + {
  27 + value: AlarmStatus.CLEARED_ACK,
  28 + label: '清除已确认',
  29 + },
  30 + ],
19 }, 31 },
20 { 32 {
21 - label: AlarmStatusMean[AlarmStatus.ACTIVE_UN_ACK],  
22 - value: AlarmStatus.ACTIVE_UN_ACK,  
23 - },  
24 - {  
25 - label: AlarmStatusMean[AlarmStatus.CLEARED_ACK],  
26 - value: AlarmStatus.CLEARED_ACK,  
27 - },  
28 - {  
29 - label: AlarmStatusMean[AlarmStatus.ACTIVE_ACK],  
30 - value: AlarmStatus.ACTIVE_ACK, 33 + value: '1',
  34 + label: '激活',
  35 + children: [
  36 + {
  37 + value: AlarmStatus.ACTIVE_UN_ACK,
  38 + label: '激活未确认',
  39 + },
  40 + {
  41 + value: AlarmStatus.ACTIVE_ACK,
  42 + label: '激活已确认',
  43 + },
  44 + ],
31 }, 45 },
32 ], 46 ],
  47 + // options: [
  48 + // {
  49 + // label: AlarmStatusMean[AlarmStatus.CLEARED_UN_ACK],
  50 + // value: AlarmStatus.CLEARED_UN_ACK,
  51 + // },
  52 + // {
  53 + // label: AlarmStatusMean[AlarmStatus.ACTIVE_UN_ACK],
  54 + // value: AlarmStatus.ACTIVE_UN_ACK,
  55 + // },
  56 + // {
  57 + // label: AlarmStatusMean[AlarmStatus.CLEARED_ACK],
  58 + // value: AlarmStatus.CLEARED_ACK,
  59 + // },
  60 + // {
  61 + // label: AlarmStatusMean[AlarmStatus.ACTIVE_ACK],
  62 + // value: AlarmStatus.ACTIVE_ACK,
  63 + // },
  64 + // ],
33 }, 65 },
34 }, 66 },
35 { 67 {
@@ -103,16 +135,29 @@ export const alarmSearchSchemas: FormSchema[] = [ @@ -103,16 +135,29 @@ export const alarmSearchSchemas: FormSchema[] = [
103 colProps: { span: 6 }, 135 colProps: { span: 6 },
104 }, 136 },
105 ]; 137 ];
  138 +
  139 +const handleAlarmStatus = (status: string) => {
  140 + return status.split('_').includes('ACTIVE');
  141 +};
  142 +
  143 +const handleAlarmAckStatus = (status: string) => {
  144 + return status.split('_').includes('ACK');
  145 +};
  146 +
106 export const alarmColumns: BasicColumn[] = [ 147 export const alarmColumns: BasicColumn[] = [
107 { 148 {
108 - title: '告警时间',  
109 - dataIndex: 'createdTime',  
110 - width: 120, 149 + title: '告警状态',
  150 + dataIndex: 'status',
  151 + customRender({ record }: { record }) {
  152 + const flag = handleAlarmStatus(record.status);
  153 + return h(Tag, { color: flag ? 'red' : 'green' }, () => (flag ? '激活' : '清除'));
  154 + },
  155 + width: 90,
111 }, 156 },
112 { 157 {
113 title: '告警设备', 158 title: '告警设备',
114 dataIndex: 'deviceName', 159 dataIndex: 'deviceName',
115 - width: 100, 160 + width: 180,
116 customRender: ({ record }) => { 161 customRender: ({ record }) => {
117 const { deviceAlias, deviceName } = record || {}; 162 const { deviceAlias, deviceName } = record || {};
118 return deviceAlias || deviceName; 163 return deviceAlias || deviceName;
@@ -121,12 +166,12 @@ export const alarmColumns: BasicColumn[] = [ @@ -121,12 +166,12 @@ export const alarmColumns: BasicColumn[] = [
121 { 166 {
122 title: '告警场景', 167 title: '告警场景',
123 dataIndex: 'type', 168 dataIndex: 'type',
124 - width: 160, 169 + width: 180,
125 }, 170 },
126 { 171 {
127 title: '告警级别', 172 title: '告警级别',
128 dataIndex: 'severity', 173 dataIndex: 'severity',
129 - width: 160, 174 + width: 90,
130 format: (text) => alarmLevel(text), 175 format: (text) => alarmLevel(text),
131 }, 176 },
132 { 177 {
@@ -136,10 +181,18 @@ export const alarmColumns: BasicColumn[] = [ @@ -136,10 +181,18 @@ export const alarmColumns: BasicColumn[] = [
136 width: 160, 181 width: 160,
137 }, 182 },
138 { 183 {
139 - title: '状态',  
140 - dataIndex: 'status',  
141 - format: (text) => statusType(text),  
142 - width: 160, 184 + title: '确认状态',
  185 + dataIndex: 'ackStatus',
  186 + customRender({ record }: { record }) {
  187 + const flag = handleAlarmAckStatus(record.status);
  188 + return h(Tag, { color: flag ? 'blue' : 'orange' }, () => (flag ? '已确认' : '未确认'));
  189 + },
  190 + width: 110,
  191 + },
  192 + {
  193 + title: '告警时间',
  194 + dataIndex: 'createdTime',
  195 + width: 130,
143 }, 196 },
144 ]; 197 ];
145 198
@@ -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[]) => {