fix: bug#5268、5231、4988、5397

src/components/DashBoard/header.tsx

@@ -69,7 +69,6 @@ export default forwardRef((props: HeaderProps, ref) => {
                 <Form.Item name={props.extraParams.key}>{props.extraParams.Children}</Form.Item>
               </Col>
             )}
-            {}
             <Col span={props.extraParams ? 18 : 24}>
               <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
                 {props.showTimeTool ? (

src/components/Player/mediaTool.less

@@ -109,3 +109,24 @@
     }
   }
 }
+
+@media screen {
+  @media (min-width: 1300px) {
+    .live-player-tools {
+      flex-basis: 150px;
+      margin-left: 16px;
+
+      .direction {
+        .direction-item {
+          font-size: 24px;
+        }
+      }
+
+      .zoom {
+        .zoom-item {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+}

src/components/ProTableCard/CardItems/mediaDevice.tsx

@@ -24,7 +24,7 @@ export default (props: ProductCardProps) => {
       statusNames={{
         offline: StatusColorEnum.error,
         online: StatusColorEnum.processing,
-        notActive: StatusColorEnum.processing,
+        notActive: StatusColorEnum.warning,
       }}
     >
       <div className={'pro-table-card-item'}>

src/pages/link/DashBoard/index.tsx

@@ -177,15 +177,29 @@ export default () => {
     return newArray;
   };
 
+  const getTimeFormat = (type: string) => {
+    switch (type) {
+      case 'year':
+        return 'YYYY-MM-DD';
+      case 'month':
+        return 'MM-DD';
+      case 'week':
+        return 'MM-DD HH';
+      default:
+        return 'HH';
+    }
+  };
+
   const getInterval = (type: string) => {
     switch (type) {
       case 'year':
         return '30d';
       case 'week':
-      case 'month':
         return '1d';
-      default:
+      case 'month':
         return '1h';
+      default:
+        return '1m';
     }
   };
 
@@ -206,24 +220,31 @@ export default () => {
         right: '2%',
       },
       color: ['#979AFF'],
-      series: Object.keys(data).map((key) => ({
-        data: data[key]._data,
-        name: key,
-        type: 'line',
-        smooth: true,
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 1,
-              color: 'rgba(151, 154, 255, 0)',
+      series: Object.keys(data).length
+        ? Object.keys(data).map((key) => ({
+            data: data[key]._data,
+            name: key,
+            type: 'line',
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 1,
+                  color: 'rgba(151, 154, 255, 0)',
+                },
+                {
+                  offset: 0,
+                  color: 'rgba(151, 154, 255, .24)',
+                },
+              ]),
             },
+          }))
+        : [
             {
-              offset: 0,
-              color: 'rgba(151, 154, 255, .24)',
+              data: [],
+              type: 'line',
             },
-          ]),
-        },
-      })),
+          ],
     });
   };
 
@@ -255,24 +276,31 @@ export default () => {
         },
       ],
       color: ['#60DFC7'],
-      series: Object.keys(data).map((key) => ({
-        data: arrayReverse(data[key]),
-        name: key,
-        type: 'line',
-        smooth: true,
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 1,
-              color: 'rgba(96, 223, 199, 0)',
+      series: Object.keys(data).length
+        ? Object.keys(data).map((key) => ({
+            data: arrayReverse(data[key]),
+            name: key,
+            type: 'line',
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 1,
+                  color: 'rgba(96, 223, 199, 0)',
+                },
+                {
+                  offset: 0,
+                  color: 'rgba(96, 223, 199, .24)',
+                },
+              ]),
             },
+          }))
+        : [
             {
-              offset: 0,
-              color: 'rgba(96, 223, 199, .24)',
+              data: [],
+              type: 'line',
             },
-          ]),
-        },
-      })),
+          ],
     });
   };
 
@@ -304,24 +332,31 @@ export default () => {
         },
       ],
       color: ['#2CB6E0'],
-      series: Object.keys(data).map((key) => ({
-        data: arrayReverse(data[key]),
-        name: key,
-        type: 'line',
-        smooth: true,
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 1,
-              color: 'rgba(44, 182, 224, 0)',
+      series: Object.keys(data).length
+        ? Object.keys(data).map((key) => ({
+            data: arrayReverse(data[key]),
+            name: key,
+            type: 'line',
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 1,
+                  color: 'rgba(44, 182, 224, 0)',
+                },
+                {
+                  offset: 0,
+                  color: 'rgba(44, 182, 224, .24)',
+                },
+              ]),
             },
+          }))
+        : [
             {
-              offset: 0,
-              color: 'rgba(44, 182, 224, .24)',
+              data: [0],
+              type: 'line',
             },
-          ]),
-        },
-      })),
+          ],
     });
   };
 
@@ -378,41 +413,42 @@ export default () => {
           const _jvmXAxis = new Set<string>();
           const _cpuOptions = {};
           const _cpuXAxis = new Set<string>();
-
-          res.result.forEach((item: any) => {
-            const value = item.data.value;
-            const nodeID = item.data.clusterNodeId;
-            if (item.group === 'network') {
-              const _data: any[] = [];
-              value.forEach((networkItem: any) => {
-                _data.push(Number(networkItem.value).toFixed(2));
-                _networkXAxis.add(networkItem.timeString);
-              });
-              _networkOptions[nodeID] = {
-                _data: _networkOptions[nodeID]
-                  ? _networkOptions[nodeID]._data.concat(_data)
-                  : _data,
-              };
-            } else if (item.group === 'cpu') {
-              const memoryJvmHeapFree = value.memoryJvmHeapFree;
-              const memoryJvmHeapTotal = value.memoryJvmHeapTotal;
-              const _value = (
-                ((memoryJvmHeapTotal - memoryJvmHeapFree) / memoryJvmHeapTotal) *
-                100
-              ).toFixed(2);
-              if (!_jvmOptions[nodeID]) {
-                _jvmOptions[nodeID] = [];
-              }
-              _jvmXAxis.add(moment(value.timestamp).format('YYYY-MM-DD HH:mm:ss'));
-              _jvmOptions[nodeID].push(_value);
-            } else {
-              if (!_cpuOptions[nodeID]) {
-                _cpuOptions[nodeID] = [];
+          if (res.result?.length) {
+            res.result.forEach((item: any) => {
+              const value = item.data.value;
+              const nodeID = item.data.clusterNodeId;
+              if (item.group === 'network') {
+                const _data: any[] = [];
+                value.forEach((networkItem: any) => {
+                  _data.push(Number(networkItem.value).toFixed(2));
+                  _networkXAxis.add(networkItem.timeString);
+                });
+                _networkOptions[nodeID] = {
+                  _data: _networkOptions[nodeID]
+                    ? _networkOptions[nodeID]._data.concat(_data)
+                    : _data,
+                };
+              } else if (item.group === 'cpu') {
+                const memoryJvmHeapFree = value.memoryJvmHeapFree;
+                const memoryJvmHeapTotal = value.memoryJvmHeapTotal;
+                const _value = (
+                  ((memoryJvmHeapTotal - memoryJvmHeapFree) / memoryJvmHeapTotal) *
+                  100
+                ).toFixed(2);
+                if (!_jvmOptions[nodeID]) {
+                  _jvmOptions[nodeID] = [];
+                }
+                _jvmXAxis.add(moment(value.timestamp).format(getTimeFormat('week')));
+                _jvmOptions[nodeID].push(_value);
+              } else {
+                if (!_cpuOptions[nodeID]) {
+                  _cpuOptions[nodeID] = [];
+                }
+                _cpuXAxis.add(moment(value.timestamp).format(getTimeFormat('week')));
+                _cpuOptions[nodeID].push(Number(value.cpuSystemUsage).toFixed(2));
               }
-              _cpuXAxis.add(moment(value.timestamp).format('YYYY-MM-DD HH:mm:ss'));
-              _cpuOptions[nodeID].push(Number(value.cpuSystemUsage).toFixed(2));
-            }
-          });
+            });
+          }
           handleNetworkOptions(_networkOptions, [..._networkXAxis.keys()]);
           handleJVMOptions(_jvmOptions, [..._jvmXAxis.keys()]);
           handleCpuOptions(_cpuOptions, [..._cpuXAxis.keys()]);
@@ -444,21 +480,23 @@ export default () => {
           if (res.status === 200) {
             const _networkOptions = {};
             const _networkXAxis = new Set<string>();
-            res.result.forEach((item: any) => {
-              const value = item.data.value;
-              const _data: any[] = [];
-              const nodeID = item.data.clusterNodeId;
-              value.forEach((networkItem: any) => {
-                _data.push(Number(networkItem.value).toFixed(2));
-                _networkXAxis.add(networkItem.timeString);
-              });
+            if (res.result.length) {
+              res.result.forEach((item: any) => {
+                const value = item.data.value;
+                const _data: any[] = [];
+                const nodeID = item.data.clusterNodeId;
+                value.forEach((networkItem: any) => {
+                  _data.push(Number(networkItem.value).toFixed(2));
+                  _networkXAxis.add(networkItem.timeString);
+                });
 
-              _networkOptions[nodeID] = {
-                _data: _networkOptions[nodeID]
-                  ? _networkOptions[nodeID]._data.concat(_data)
-                  : _data,
-              };
-            });
+                _networkOptions[nodeID] = {
+                  _data: _networkOptions[nodeID]
+                    ? _networkOptions[nodeID]._data.concat(_data)
+                    : _data,
+                };
+              });
+            }
             handleNetworkOptions(_networkOptions, [..._networkXAxis.keys()]);
           }
         });
@@ -479,7 +517,6 @@ export default () => {
             params: {
               from: data.time.start,
               to: data.time.end,
-              interval: getInterval(data.time.type),
             },
           },
         ])
@@ -487,15 +524,17 @@ export default () => {
           if (res.status === 200) {
             const _cpuOptions = {};
             const _cpuXAxis = new Set<string>();
-            res.result.forEach((item: any) => {
-              const value = item.data.value;
-              const nodeID = item.data.clusterNodeId;
-              _cpuXAxis.add(moment(value.timestamp).format('YYYY-MM-DD HH:mm:ss'));
-              if (!_cpuOptions[nodeID]) {
-                _cpuOptions[nodeID] = [];
-              }
-              _cpuOptions[nodeID].push(Number(value.cpuSystemUsage).toFixed(2));
-            });
+            if (res.result?.length) {
+              res.result.forEach((item: any) => {
+                const value = item.data.value;
+                const nodeID = item.data.clusterNodeId;
+                _cpuXAxis.add(moment(value.timestamp).format(getTimeFormat(data.time.type)));
+                if (!_cpuOptions[nodeID]) {
+                  _cpuOptions[nodeID] = [];
+                }
+                _cpuOptions[nodeID].push(Number(value.cpuSystemUsage).toFixed(2));
+              });
+            }
             handleCpuOptions(_cpuOptions, [..._cpuXAxis.keys()]);
           }
         });
@@ -516,7 +555,6 @@ export default () => {
             params: {
               from: data.time.start,
               to: data.time.end,
-              interval: getInterval(data.time.type),
             },
           },
         ])
@@ -524,22 +562,24 @@ export default () => {
           if (res.status === 200) {
             const _jvmOptions = {};
             const _jvmXAxis = new Set<string>();
-            res.result.forEach((item: any) => {
-              const value = item.data.value;
-              const memoryJvmHeapFree = value.memoryJvmHeapFree;
-              const memoryJvmHeapTotal = value.memoryJvmHeapTotal;
-              const nodeID = item.data.clusterNodeId;
+            if (res.result?.length) {
+              res.result.forEach((item: any) => {
+                const value = item.data.value;
+                const memoryJvmHeapFree = value.memoryJvmHeapFree;
+                const memoryJvmHeapTotal = value.memoryJvmHeapTotal;
+                const nodeID = item.data.clusterNodeId;
 
-              const _value = (
-                ((memoryJvmHeapTotal - memoryJvmHeapFree) / memoryJvmHeapTotal) *
-                100
-              ).toFixed(2);
-              if (!_jvmOptions[nodeID]) {
-                _jvmOptions[nodeID] = [];
-              }
-              _jvmXAxis.add(moment(value.timestamp).format('YYYY-MM-DD HH:mm:ss'));
-              _jvmOptions[nodeID].push(_value);
-            });
+                const _value = (
+                  ((memoryJvmHeapTotal - memoryJvmHeapFree) / memoryJvmHeapTotal) *
+                  100
+                ).toFixed(2);
+                if (!_jvmOptions[nodeID]) {
+                  _jvmOptions[nodeID] = [];
+                }
+                _jvmXAxis.add(moment(value.timestamp).format(getTimeFormat(data.time.type)));
+                _jvmOptions[nodeID].push(_value);
+              });
+            }
             handleJVMOptions(_jvmOptions, [..._jvmXAxis.keys()]);
           }
         });
@@ -547,10 +587,10 @@ export default () => {
   };
 
   useEffect(() => {
-    if (serverId) {
-      getAllEcharts();
-    }
+    getAllEcharts();
+  }, []);
 
+  useEffect(() => {
     const id = 'operations-statistics-system-info-realTime';
     const topic = '/dashboard/systemMonitor/stats/info/realTime';
     const sub = subscribeTopic!(id, topic, {
@@ -602,7 +642,7 @@ export default () => {
           <TopEchartsItemNode title={'CPU使用率'} value={topValues.cpu} />
           <TopEchartsItemNode title={'JVM内存'} value={topValues.jvm} />
           <TopEchartsItemNode title={'磁盘占用率'} value={topValues.usage} />
-          <TopEchartsItemNode title={'磁盘占用率'} value={topValues.systemUsage} />
+          <TopEchartsItemNode title={'系统内存'} value={topValues.systemUsage} />
           {/*<div className={'echarts-item'}>*/}
           {/*  */}
           {/*  <Progress*/}

src/pages/media/Device/Channel/Save.tsx

@@ -1,7 +1,7 @@
 // Modal 弹窗，用于新增、修改数据
 import { createForm } from '@formily/core';
 import { createSchemaField } from '@formily/react';
-import { Form, FormGrid, FormItem, FormTab, Input, Select } from '@formily/antd';
+import { Form, FormGrid, FormItem, FormTab, Input, Select, Password } from '@formily/antd';
 import { Modal } from 'antd';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import type { ISchema } from '@formily/json-schema';
@@ -32,6 +32,7 @@ const Save = (props: SaveModalProps) => {
       Input,
       Select,
       FormGrid,
+      Password,
     },
   });
 
@@ -63,118 +64,194 @@ const Save = (props: SaveModalProps) => {
   const schema: ISchema = {
     type: 'object',
     properties: {
-      channelId: {
-        type: 'string',
-        title: '通道ID',
-        'x-decorator': 'FormItem',
-        'x-component': 'Input',
+      grid: {
+        type: 'void',
+        'x-component': 'FormGrid',
         'x-component-props': {
-          disabled: props.model === 'edit',
+          maxColumns: 2,
+          minColumns: 1,
+          columnGap: 12,
         },
-      },
-      name: {
-        type: 'string',
-        title: '通道名称',
-        required: true,
-        'x-decorator': 'FormItem',
-        'x-component': 'Input',
-        'x-validator': [
-          {
-            max: 64,
-            message: '最多可输入64个字符',
+        properties: {
+          channelId: {
+            type: 'string',
+            title: '通道ID',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            'x-component-props': {
+              disabled: props.model === 'edit',
+              placeholder: '请输入通道ID',
+            },
+            'x-decorator-props': {
+              gridSpan: 1,
+            },
           },
-          {
+          name: {
+            type: 'string',
+            title: '通道名称',
             required: true,
-            message: '请输入通道名称',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            'x-component-props': {
+              placeholder: '请输入通道名称',
+            },
+            'x-validator': [
+              {
+                max: 64,
+                message: '最多可输入64个字符',
+              },
+              {
+                required: true,
+                message: '请输入通道名称',
+              },
+            ],
+            'x-decorator-props': {
+              gridSpan: 1,
+            },
           },
-        ],
-      },
-      manufacturer: {
-        type: 'string',
-        title: '厂商',
-        'x-visible': props.type === ProviderValue.GB281,
-        'x-decorator': 'FormItem',
-        'x-component': 'Input',
-        'x-validator': [
-          {
-            max: 64,
-            message: '最多可输入64个字符',
+          manufacturer: {
+            type: 'string',
+            title: '厂商',
+            'x-visible': props.type === ProviderValue.GB281,
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            'x-component-props': {
+              placeholder: '请输入厂商名称',
+            },
+            'x-validator': [
+              {
+                max: 64,
+                message: '最多可输入64个字符',
+              },
+            ],
+            'x-decorator-props': {
+              gridSpan: 2,
+            },
           },
-        ],
-        'x-decorator-props': {
-          gridSpan: 24,
-        },
-      },
-      'others.media_url': {
-        type: 'string',
-        title: '视频地址',
-        'x-visible': props.type === ProviderValue.FIXED,
-        'x-decorator': 'FormItem',
-        'x-component': 'Input',
-        'x-validator': [
-          {
-            max: 128,
-            message: '最多可输入128个字符',
+          'others.media_url': {
+            type: 'string',
+            title: '视频地址',
+            'x-visible': props.type === ProviderValue.FIXED,
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            'x-component-props': {
+              placeholder: '请输入视频地址',
+            },
+            'x-validator': [
+              {
+                max: 128,
+                message: '最多可输入128个字符',
+              },
+              {
+                validator: (value: string) => {
+                  const reg = /(http|https|rtsp|rtmp):\/\/([\w.]+\/?)\S*/;
+                  return new Promise((resolve) => {
+                    if (!value) {
+                      resolve('');
+                      return;
+                    }
+                    if (reg.test(value)) {
+                      resolve('');
+                    } else {
+                      resolve('请输入正确的视频地址');
+                    }
+                  });
+                },
+              },
+            ],
+            'x-decorator-props': {
+              gridSpan: 2,
+            },
           },
-          {
-            validator: (value: string) => {
-              const reg = /(http|https|rtsp|rtmp):\/\/([\w.]+\/?)\S*/;
-              return new Promise((resolve) => {
-                if (!value) {
-                  resolve('');
-                  return;
-                }
-                if (reg.test(value)) {
-                  resolve('');
-                } else {
-                  resolve('请输入正确的视频地址');
-                }
-              });
+          username: {
+            type: 'string',
+            title: '用户名',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            'x-component-props': {
+              placeholder: '请输入用户名',
+            },
+            'x-decorator-props': {
+              gridSpan: 1,
             },
+            'x-validator': [
+              {
+                max: 64,
+                message: '最多可输入64个字符',
+              },
+            ],
           },
-        ],
-      },
-      address: {
-        type: 'string',
-        title: '安装地址',
-        'x-decorator': 'FormItem',
-        'x-component': 'Input',
-        'x-validator': [
-          {
-            max: 64,
-            message: '最多可输入64个字符',
+          password: {
+            type: 'string',
+            title: '密码',
+            'x-decorator': 'FormItem',
+            'x-component': 'Password',
+            'x-component-props': {
+              placeholder: '请输入密码',
+              checkStrength: true,
+            },
+            'x-decorator-props': {
+              gridSpan: 1,
+            },
           },
-        ],
-      },
-      ptzType: {
-        type: 'string',
-        title: '云台类型',
-        'x-decorator': 'FormItem',
-        'x-component': 'Select',
-        'x-visible': props.type === ProviderValue.GB281,
-        'x-validator': [
-          {
-            max: 64,
-            message: '最多可输入64个字符',
+          address: {
+            type: 'string',
+            title: '安装地址',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            'x-component-props': {
+              placeholder: '请输入安装地址',
+            },
+            'x-validator': [
+              {
+                max: 64,
+                message: '最多可输入64个字符',
+              },
+            ],
+            'x-decorator-props': {
+              gridSpan: 2,
+            },
+          },
+          ptzType: {
+            type: 'string',
+            title: '云台类型',
+            'x-decorator': 'FormItem',
+            'x-component': 'Select',
+            'x-visible': props.type === ProviderValue.GB281,
+            'x-component-props': {
+              placeholder: '请选择云台类型',
+            },
+            'x-validator': [
+              {
+                max: 64,
+                message: '最多可输入64个字符',
+              },
+            ],
+            enum: [
+              { label: '未知', value: 0 },
+              { label: '球体', value: 1 },
+              { label: '半球体', value: 2 },
+              { label: '固定枪机', value: 3 },
+              { label: '遥控枪机', value: 4 },
+            ],
+            'x-decorator-props': {
+              gridSpan: 2,
+            },
+          },
+          description: {
+            type: 'string',
+            title: '说明',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input.TextArea',
+            'x-component-props': {
+              rows: 4,
+              maxLength: 200,
+              showCount: true,
+            },
+            'x-decorator-props': {
+              gridSpan: 2,
+            },
           },
-        ],
-        enum: [
-          { label: '未知', value: 0 },
-          { label: '球体', value: 1 },
-          { label: '半球体', value: 2 },
-          { label: '固定枪机', value: 3 },
-          { label: '遥控枪机', value: 4 },
-        ],
-      },
-      description: {
-        type: 'string',
-        title: '说明',
-        'x-decorator': 'FormItem',
-        'x-component': 'Input.TextArea',
-        'x-component-props': {
-          rows: 4,
-          maxLength: 200,
-          showCount: true,
         },
       },
     },
@@ -223,7 +300,7 @@ const Save = (props: SaveModalProps) => {
       })}
       maskClosable={false}
       visible={props.visible}
-      width={550}
+      width={650}
       onOk={saveData}
       onCancel={() => {
         modalClose();

src/pages/media/Device/index.tsx

@@ -152,7 +152,7 @@ const Device = () => {
           statusNames={{
             online: StatusColorEnum.success,
             offline: StatusColorEnum.error,
-            notActive: StatusColorEnum.processing,
+            notActive: StatusColorEnum.warning,
           }}
           text={record.state.text}
         />

src/pages/media/Home/deviceModal.tsx

@@ -138,11 +138,11 @@ export default (props: DeviceModalProps) => {
             ],
           })
         }
+        tableAlertRender={false}
         rowSelection={{
           type: 'radio',
           selectedRowKeys: deviceItem.id ? [deviceItem.id] : undefined,
           onSelect: (record) => {
-            console.log(record);
             setDeviceItem(record);
           },
         }}

src/pages/media/SplitScreen/index.less

@@ -74,3 +74,13 @@
     }
   }
 }
+
+@media screen {
+  @media (min-width: 1300px) {
+    .split-screen {
+      .left-content {
+        width: 200px;
+      }
+    }
+  }
+}

src/pages/rule-engine/DashBoard/index.less

@@ -1,3 +1,5 @@
+@import '~antd/es/style/themes/default.less';
+
 .alarm-dash-board {
   .top-card-items {
     margin-bottom: 12px;
@@ -35,6 +37,73 @@
   .media-dash-board-body {
     border: 1px solid #f0f0f0;
   }
+
+  .new-alarm-items {
+    > ul {
+      padding: 0;
+
+      .new-alarm-item {
+        display: flex;
+        gap: 12px;
+        margin: 20px 0;
+        font-size: 12px;
+
+        .new-alarm-item-time {
+          width: 180px;
+          font-size: 14px;
+
+          > img {
+            margin-right: 8px;
+          }
+        }
+
+        .new-alarm-item-content {
+          flex-grow: 1;
+        }
+
+        .new-alarm-item-state {
+          width: 110px;
+          text-align: center;
+
+          .error {
+            color: @error-color;
+          }
+
+          .default {
+            color: @text-color;
+          }
+        }
+
+        .new-alarm-item-level {
+          width: 52px;
+          padding: 2px 8px;
+          color: #fff;
+          text-align: center;
+          border-radius: 2px;
+
+          &.level-1 {
+            background-color: #e50012;
+          }
+
+          &.level-2 {
+            background-color: #ff9457;
+          }
+
+          &.level-3 {
+            background-color: #fabd47;
+          }
+
+          &.level-4 {
+            background-color: #999;
+          }
+
+          &.level-5 {
+            background-color: #bbb;
+          }
+        }
+      }
+    }
+  }
 }
 
 .alarmRank {

src/pages/rule-engine/DashBoard/index.tsx

@@ -1,13 +1,12 @@
 import { PageContainer } from '@ant-design/pro-layout';
 import { EChartsOption } from 'echarts';
 import { useEffect, useRef, useState } from 'react';
-import { Card, Col } from 'antd';
+import { Badge, Card, Col, Tooltip } from 'antd';
 import './index.less';
 import Service from './service';
 import { observer } from '@formily/react';
 import { model } from '@formily/reactive';
 import DashBoard, { DashBoardTopCard } from '@/components/DashBoard';
-import { FireOutlined } from '@ant-design/icons';
 import styles from './index.less';
 import moment from 'moment';
 import Echarts from '@/components/DashBoard/echarts';
@@ -172,7 +171,7 @@ const Dashboard = observer(() => {
         const levels = alarmLevel.result.levels;
         state.alarmList = currentAlarm.result?.data.map((item: { level: any }) => ({
           ...item,
-          level: levels.find((l: any) => l.level === item.level)?.title,
+          levelName: levels.find((l: any) => l.level === item.level)?.title,
         }));
       } else {
         state.alarmList = currentAlarm.result?.data;
@@ -308,20 +307,33 @@ const Dashboard = observer(() => {
             <div className={'dash-board-top-item'}>
               <div className={'content-left'}>
                 <div className={'content-left-title'}>最新告警</div>
-                <div>
+                <div className={'new-alarm-items'}>
                   <ul>
                     {state.alarmList.slice(0, 3).map((item) => (
                       <li key={item.id}>
-                        <div
-                          style={{ display: 'flex', justifyContent: 'space-between', margin: 10 }}
-                        >
-                          <div>
-                            <FireOutlined style={{ marginRight: 5 }} />{' '}
+                        <div className={'new-alarm-item'}>
+                          <div className={'new-alarm-item-time'}>
+                            <img src={require('/public/images/alarm/bashboard.png')} alt="" />
                             {moment(item.alarmTime).format('YYYY-MM-DD hh:mm:ss')}
                           </div>
-                          <div>{item.alarmName}</div>
-                          <div>{item.state?.text}</div>
-                          <div>{item.level}</div>
+                          <div className={'new-alarm-item-content ellipsis'}>
+                            <Tooltip title={item.alarmName}>{item.alarmName}</Tooltip>
+                          </div>
+                          <div className={'new-alarm-item-state'}>
+                            <Badge
+                              status={item.state?.value === 'warning' ? 'error' : 'default'}
+                              text={
+                                <span
+                                  className={item.state?.value === 'warning' ? 'error' : 'default'}
+                                >
+                                  {item.state?.text}
+                                </span>
+                              }
+                            />
+                          </div>
+                          <div className={`new-alarm-item-level level-${item.level}`}>
+                            {item.levelName}
+                          </div>
                         </div>
                       </li>
                     ))}

src/pages/system/Platforms/Api/base.tsx

@@ -35,6 +35,7 @@ interface ApiPageProps {
    * false：table暂时所有接口
    */
   isOpenGranted?: boolean;
+  type?: 'all' | 'empowerment' | 'authorize';
 }
 
 export default observer((props: ApiPageProps) => {
@@ -96,6 +97,8 @@ export default observer((props: ApiPageProps) => {
         <Tree
           isShowGranted={props.isShowGranted}
           grantKeys={GrantKeys}
+          operations={operations}
+          type={props.type}
           onSelect={(data) => {
             ApiModel.data = data;
             ApiModel.showTable = true;

src/pages/system/Platforms/Api/basePage.tsx

@@ -128,7 +128,7 @@ export default (props: TableProps) => {
               return (
                 <Button
                   type={'link'}
-                  style={{ padding: 0, width: '100%' }}
+                  style={{ padding: 0, width: '100%', textAlign: 'left' }}
                   onClick={() => {
                     console.log(record);
                     ApiModel.swagger = record;

src/pages/system/Platforms/Api/index.tsx

@@ -4,7 +4,7 @@ import BasePage from './base';
 export default () => {
   return (
     <PageContainer>
-      <BasePage />
+      <BasePage type={'empowerment'} />
     </PageContainer>
   );
 };

src/pages/system/Platforms/Api/leftTree.tsx

@@ -9,7 +9,9 @@ type LeftTreeType = {
    * 是否只展示已授权的接口
    */
   isShowGranted?: boolean;
-  grantKeys?: string[];
+  grantKeys?: string[]; // 已授权的接口
+  type?: 'all' | 'empowerment' | 'authorize'; // 全部、赋权、授权
+  operations?: string[]; // 能赋权的key
 };
 
 interface DataNode {
@@ -35,16 +37,34 @@ export default (props: LeftTreeType) => {
       return list.map((node) => {
         if (node.id === key) {
           const newChildren = node.children ? [...node.children, ...children] : children;
+          // // 屏蔽掉没有子节点的接口
+          // const noOperations = newChildren.filter((item: any) => {
+          //   return item.extraData &&
+          //     item.extraData.some((extraItem: any) =>
+          //       props.operations?.includes(extraItem.operationId),
+          //     )
+          // })
+
+          let filterChildren = newChildren;
           // api详情时，过滤掉没有授权的接口
-          const filterChildren = props.isShowGranted
-            ? newChildren.filter(
-                (item: any) =>
-                  item.extraData &&
-                  item.extraData.some((extraItem: any) =>
-                    props.grantKeys?.includes(extraItem.operationId),
-                  ),
-              )
-            : newChildren;
+          if (props.type === 'empowerment') {
+            filterChildren = newChildren.filter(
+              (item: any) =>
+                item.extraData &&
+                item.extraData.some((extraItem: any) =>
+                  props.operations?.includes(extraItem.operationId),
+                ),
+            );
+          } else if (props.type === 'authorize') {
+            filterChildren = newChildren.filter(
+              (item: any) =>
+                item.extraData &&
+                item.extraData.some((extraItem: any) =>
+                  props.grantKeys?.includes(extraItem.operationId),
+                ),
+            );
+          }
+
           return {
             ...node,
             children: filterChildren,
@@ -60,7 +80,7 @@ export default (props: LeftTreeType) => {
         return node;
       });
     },
-    [props.isShowGranted, props.grantKeys],
+    [props.isShowGranted, props.grantKeys, props.type, props.operations],
   );
 
   const handleTreeData = (data: any) => {
@@ -93,7 +113,6 @@ export default (props: LeftTreeType) => {
       if (resp) {
         ApiModel.components = { ...ApiModel.components, ...resp.components.schemas };
         const handleData = handleTreeData(resp);
-        console.log(handleData);
         setTreeData((origin) => {
           const data = updateTreeData(origin, key, handleData);
 

src/pages/system/Platforms/Api/swagger-ui/base.tsx

@@ -336,15 +336,24 @@ export default observer(() => {
                         dataSource={handleResponseParam(item.entityName)}
                       />
                     </div>
-                    {
-                      // @ts-ignore
-                      <ReactJson
-                        displayObjectSize={false}
-                        displayDataTypes={false}
-                        name={false}
-                        src={item.result}
-                      />
-                    }
+                    <div
+                      style={{
+                        padding: 1,
+                        border: '1px solid #f0f0f0',
+                        borderRadius: 2,
+                        marginTop: 12,
+                      }}
+                    >
+                      {
+                        // @ts-ignore
+                        <ReactJson
+                          displayObjectSize={false}
+                          displayDataTypes={false}
+                          name={false}
+                          src={item.result}
+                        />
+                      }
+                    </div>
                   </div>
                 </Tabs.TabPane>
               );

src/pages/system/Platforms/Api/swagger-ui/debugging.tsx

@@ -236,7 +236,7 @@ export default observer(() => {
       </div>
       <div className={'swagger-content-item'}>
         <TitleComponent data={'响应内容'} />
-        <div style={{ border: '1px solid #fefefe', borderRadius: 2 }}>
+        <div style={{ border: '1px solid #f0f0f0', borderRadius: 2, padding: 1 }}>
           {
             // @ts-ignore
             <ReactJson

src/pages/system/Platforms/Setting/index.tsx

@@ -9,7 +9,7 @@ export default () => {
         <ExclamationCircleOutlined style={{ marginRight: 12, fontSize: 16 }} />
         配置系统支持API赋权的范围
       </div>
-      <ApiPage showDebugger={true} isOpenGranted={false} />
+      <ApiPage type={'all'} showDebugger={true} isOpenGranted={false} />
     </PageContainer>
   );
 };

src/pages/system/Platforms/View/index.tsx

@@ -111,7 +111,7 @@ export default () => {
         </Col>
         <Col span={24}>
           <Card title={'API文档'}>
-            <ApiPage showDebugger={true} isShowGranted={true} />
+            <ApiPage type={'authorize'} showDebugger={true} isShowGranted={true} />
           </Card>
         </Col>
       </Row>