Forráskód Böngészése

fix: 修改告警仪表盘查询参数

xieyonghong 3 éve
szülő
commit
886249a092

+ 1 - 1
src/components/DashBoard/echarts.tsx

@@ -87,7 +87,7 @@ export default (props: EchartsProps) => {
     if (chartsRef.current && props.options) {
       chartsRef.current.setOption(props.options);
     }
-  }, [props.options]);
+  }, [props.options, chartsRef.current]);
 
   return (
     <div

+ 0 - 1
src/components/Player/ScreenPlayer.tsx

@@ -297,7 +297,6 @@ export default forwardRef((props: ScreenProps, ref) => {
         {props.showScreen !== false && (
           <div className={'player-screen-tool'}>
             <>
-              <div></div>
               <div>
                 <Radio.Group
                   options={[

+ 3 - 3
src/components/ProTableCard/CardItems/device.tsx

@@ -67,11 +67,11 @@ export const ExtraDeviceCard = (props: DeviceCardProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <span className={'card-item-header-name'}>
+            <div className={'card-item-header-name'}>
               <Tooltip title={props.name}>
-                <span className={'ellipsis'}>{props.name}</span>
+                <div className={'ellipsis'}>{props.name}</div>
               </Tooltip>
-            </span>
+            </div>
           </div>
           <div className={'card-item-content-flex'}>
             <div className={'flex-auto'}>

+ 3 - 3
src/components/ProTableCard/CardItems/product.tsx

@@ -69,11 +69,11 @@ export const ExtraProductCard = (props: ProductCardProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <span className={'card-item-header-name'}>
+            <div className={'card-item-header-name'}>
               <Tooltip title={props.name}>
-                <span className={'ellipsis'}>{props.name}</span>
+                <div className={'ellipsis'}>{props.name}</div>
               </Tooltip>
-            </span>
+            </div>
           </div>
           <div className={'card-item-content-items'} style={{ display: 'flex', gap: 12 }}>
             {props.content}

+ 0 - 1
src/components/ProTableCard/index.less

@@ -46,7 +46,6 @@
           margin-bottom: 12px;
 
           .card-item-header-name {
-            flex: 1;
             font-weight: bold;
             font-size: 16px;
           }

+ 2 - 0
src/pages/device/DashBoard/index.tsx

@@ -268,6 +268,7 @@ const DeviceBoard = () => {
         setOptions({
           xAxis: {
             type: 'category',
+            boundaryGap: false,
             data: x,
           },
           yAxis: {
@@ -339,6 +340,7 @@ const DeviceBoard = () => {
         setOptions({
           xAxis: {
             type: 'category',
+            boundaryGap: false,
             data: x,
           },
           yAxis: {

+ 23 - 0
src/pages/link/DashBoard/index.less

@@ -14,6 +14,8 @@
       background-color: #fff;
 
       .echarts-item-left {
+        display: flex;
+        flex-direction: column;
         width: 45%;
       }
 
@@ -31,6 +33,27 @@
         font-weight: bold;
         font-size: 36px;
       }
+
+      .echarts-item-bottom {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        justify-content: center;
+        height: 0;
+        padding-left: 12px;
+
+        &::before {
+          position: absolute;
+          top: 50%;
+          left: 0;
+          width: 4px;
+          height: 12px;
+          background-color: #ff595e;
+          transform: translateY(-50%);
+          content: ' ';
+        }
+      }
     }
   }
 }

+ 39 - 13
src/pages/link/DashBoard/index.tsx

@@ -16,7 +16,10 @@ type RefType = {
 };
 type TopEchartsItemNodeType = {
   value: any;
+  max?: any;
   title: string;
+  formatter?: string;
+  bottom?: string;
 };
 
 const service = new Service('dashboard');
@@ -27,7 +30,7 @@ const TopEchartsItemNode = (props: TopEchartsItemNodeType) => {
       {
         type: 'gauge',
         min: 0,
-        max: 100,
+        max: props.max || 100,
         startAngle: 200,
         endAngle: -20,
         center: ['50%', '65%'],
@@ -50,9 +53,10 @@ const TopEchartsItemNode = (props: TopEchartsItemNodeType) => {
           },
         },
         axisLabel: {
-          distance: -18,
+          distance: -22,
           color: 'auto',
           fontSize: 12,
+          formatter: '{value}' + (props.formatter || '%'),
         },
         pointer: {
           length: '80%',
@@ -132,7 +136,11 @@ const TopEchartsItemNode = (props: TopEchartsItemNodeType) => {
     <div className={'echarts-item'}>
       <div className={'echarts-item-left'}>
         <div className={'echarts-item-title'}>{props.title}</div>
-        <div className={'echarts-item-value'}>{props.value}%</div>
+        <div className={'echarts-item-value'}>
+          {props.value}
+          {props.formatter || '%'}
+        </div>
+        {props.bottom && <div className={'echarts-item-bottom'}>{props.bottom}</div>}
       </div>
       <div className={'echarts-item-right'}>
         <>
@@ -160,8 +168,10 @@ export default () => {
   const [topValues, setTopValues] = useState({
     cpu: 0,
     jvm: 0,
+    jvmTotal: 0,
     usage: 0,
     systemUsage: 0,
+    systemUsageTotal: 0,
   });
 
   const NETWORKRef = useRef<RefType>(); // 网络流量
@@ -187,9 +197,8 @@ export default () => {
       case 'year':
         return 'YYYY-MM-DD';
       case 'month':
-        return 'MM-DD';
       case 'week':
-        return 'MM-DD HH';
+        return 'MM-DD';
       case 'hour':
         return 'HH:mm';
       default:
@@ -201,12 +210,11 @@ export default () => {
     switch (type) {
       case 'year':
         return '30d';
+      case 'month':
       case 'week':
         return '1d';
-      case 'month':
-        return '1h';
       default:
-        return '1m';
+        return '1h';
     }
   };
 
@@ -215,6 +223,7 @@ export default () => {
       xAxis: {
         type: 'category',
         data: xAxis,
+        boundaryGap: false,
       },
       tooltip: {
         trigger: 'axis',
@@ -259,6 +268,7 @@ export default () => {
     setJvmOptions({
       xAxis: {
         type: 'category',
+        boundaryGap: false,
         data: arrayReverse(xAxis),
       },
       tooltip: {
@@ -315,6 +325,7 @@ export default () => {
     setCpuOptions({
       xAxis: {
         type: 'category',
+        boundaryGap: false,
         data: arrayReverse(xAxis),
       },
       tooltip: {
@@ -610,12 +621,15 @@ export default () => {
         const cpu = value.cpu;
         const memory = value.memory;
         const disk = value.disk;
-
         setTopValues({
           cpu: cpu.systemUsage,
-          jvm: memory.jvmHeapUsage,
+          jvm: Number(((memory.jvmHeapUsage / 100) * (memory.jvmHeapTotal / 1024)).toFixed(1)),
+          jvmTotal: Math.ceil(memory.jvmHeapTotal / 1024),
           usage: disk.usage,
-          systemUsage: memory.systemUsage,
+          systemUsage: Number(
+            ((memory.systemTotal / 1024) * (memory.systemUsage / 100)).toFixed(1),
+          ),
+          systemUsageTotal: Math.ceil(memory.systemTotal / 1024),
         });
       });
 
@@ -645,9 +659,21 @@ export default () => {
         ) : null}
         <div className={'echarts-items'}>
           <TopEchartsItemNode title={'CPU使用率'} value={topValues.cpu} />
-          <TopEchartsItemNode title={'JVM内存'} value={topValues.jvm} />
+          <TopEchartsItemNode
+            title={'JVM内存'}
+            formatter={'G'}
+            value={topValues.jvm}
+            max={topValues.jvmTotal}
+            bottom={`总JVM内存  ${topValues.jvmTotal}G`}
+          />
           <TopEchartsItemNode title={'磁盘占用率'} value={topValues.usage} />
-          <TopEchartsItemNode title={'系统内存'} value={topValues.systemUsage} />
+          <TopEchartsItemNode
+            title={'系统内存'}
+            formatter={'G'}
+            value={topValues.systemUsage}
+            max={topValues.systemUsageTotal}
+            bottom={`系统内存  ${topValues.systemUsageTotal}G`}
+          />
           {/*<div className={'echarts-item'}>*/}
           {/*  */}
           {/*  <Progress*/}

+ 1 - 0
src/pages/media/DashBoard/index.tsx

@@ -96,6 +96,7 @@ export default () => {
       setOptions({
         xAxis: {
           type: 'category',
+          boundaryGap: false,
           data: xData,
         },
         yAxis: {

+ 6 - 0
src/pages/media/Device/Save/index.tsx

@@ -209,6 +209,7 @@ const Save = () => {
                     >
                       <Form.Item name={'productId'} noStyle>
                         <Select
+                          showSearch
                           fieldNames={{
                             label: 'name',
                             value: 'id',
@@ -217,6 +218,11 @@ const Save = () => {
                           options={productList}
                           placeholder={'请选择所属产品'}
                           style={{ width: id ? '100%' : 'calc(100% - 36px)' }}
+                          filterOption={(input, option) =>
+                            (option!.name as unknown as string)
+                              .toLowerCase()
+                              .includes(input.toLowerCase())
+                          }
                           onSelect={(_: any, node: any) => {
                             const pwd = node.configuration ? node.configuration.access_pwd : '';
                             form.setFieldsValue({

+ 1 - 1
src/pages/media/Home/index.tsx

@@ -108,7 +108,7 @@ export default () => {
             data={[
               {
                 name: '设备数量',
-                value: deviceTotal,
+                value: deviceTotal || 0,
                 children: require('/public/images/home/top-1.png'),
               },
               {

+ 2 - 1
src/pages/media/Home/service.tsx

@@ -5,7 +5,8 @@ import type { DeviceItem } from '@/pages/media/Device/typings';
 class Service extends BaseService<DeviceItem> {
   deviceCount = (data?: any) => request(`${this.uri}/_count`, { methods: 'GET', params: data });
 
-  channelCount = (data?: any) => request(`${this.uri}/channel/_count`, { method: 'POST', data });
+  channelCount = (data?: any) =>
+    request(`${this.uri}/channel/_count`, { method: 'GET', params: data });
 }
 
 export default Service;

+ 18 - 7
src/pages/rule-engine/DashBoard/index.tsx

@@ -10,6 +10,7 @@ import DashBoard, { DashBoardTopCard } from '@/components/DashBoard';
 import styles from './index.less';
 import moment from 'moment';
 import Echarts from '@/components/DashBoard/echarts';
+import encodeQuery from '@/utils/encodeQuery';
 
 const service = new Service();
 export const state = model<{
@@ -51,7 +52,7 @@ const Dashboard = observer(() => {
     dimension: 'agg',
     group: 'today',
     params: {
-      time: '1d',
+      time: '1h',
       targetType: 'device',
       format: 'HH:mm:ss',
       from: moment(new Date(new Date().setHours(0, 0, 0, 0))).format('YYYY-MM-DD HH:mm:ss'),
@@ -67,7 +68,7 @@ const Dashboard = observer(() => {
     dimension: 'agg',
     group: 'thisMonth',
     params: {
-      time: '1M',
+      time: '1d',
       targetType: 'device',
       format: 'yyyy-MM',
       limit: 1,
@@ -164,8 +165,8 @@ const Dashboard = observer(() => {
 
   const getCurrentAlarm = async () => {
     const alarmLevel = await service.getAlarmLevel();
-
-    const currentAlarm = await service.getAlarm({});
+    const sorts = { alarmTime: 'desc' };
+    const currentAlarm = await service.getAlarm(encodeQuery({ sorts }));
     if (currentAlarm.status === 200) {
       if (alarmLevel.status === 200) {
         const levels = alarmLevel.result.levels;
@@ -185,6 +186,16 @@ const Dashboard = observer(() => {
   }, []);
 
   const getEcharts = async (params: any) => {
+    let time = '1h';
+    let format = 'HH';
+    if (params.time.type === 'week' || params.time.type === 'month') {
+      time = '1d';
+      format = 'M月dd日';
+    } else if (params.time.type === 'year') {
+      time = '1M';
+      format = 'yyyy年-M月';
+    }
+
     // 告警趋势
     const chartData = {
       dashboard: 'alarm',
@@ -194,8 +205,8 @@ const Dashboard = observer(() => {
       group: 'alarmTrend',
       params: {
         targetType: 'device', // product、device、org、other
-        format: 'yyyy年-M月',
-        time: '1M',
+        format: format,
+        time: time,
         // from: 'now-1y', // now-1d、now-1w、now-1M、now-1y
         // to: 'now',
         limit: 12,
@@ -215,7 +226,7 @@ const Dashboard = observer(() => {
       group: 'alarmRank',
       params: {
         // time: '1h',
-        time: params.time.type === 'today' ? '1h' : '1d',
+        time: time,
         targetType: params.targetType,
         from: moment(params.time.start).format('YYYY-MM-DD HH:mm:ss'),
         to: moment(params.time.end).format('YYYY-MM-DD HH:mm:ss'),

+ 4 - 1
src/pages/rule-engine/Scene/TriggerTerm/index.tsx

@@ -135,6 +135,9 @@ const TriggerTerm = (props: Props, ref: any) => {
                   : [{ label: '手动输入', value: 'manual' }];
               state.value = 'manual';
             });
+            form1.setFieldState(field.query('.value.value[0]'), (state) => {
+              state.value = undefined;
+            });
           });
           onFieldReact('trigger.*.terms.*.value.source', (field, form1) => {
             const params = field.query('..column').value();
@@ -311,7 +314,7 @@ const TriggerTerm = (props: Props, ref: any) => {
                         'x-decorator': 'FormItem',
                         'x-component': 'TreeSelect',
                         'x-decorator-props': {
-                          gridSpan: 6,
+                          gridSpan: 5,
                         },
                         required: true,
                         'x-component-props': {

+ 6 - 3
src/pages/system/Department/Assets/deivce/index.tsx

@@ -81,8 +81,9 @@ export default observer((props: { parentId: string }) => {
     {
       dataIndex: 'id',
       title: 'ID',
-      width: 220,
+      width: 180,
       fixed: 'left',
+      ellipsis: true,
     },
     {
       dataIndex: 'name',
@@ -90,7 +91,8 @@ export default observer((props: { parentId: string }) => {
         id: 'pages.table.name',
         defaultMessage: '名称',
       }),
-      width: 200,
+      width: 180,
+      ellipsis: true,
     },
     {
       title: intl.formatMessage({
@@ -102,6 +104,7 @@ export default observer((props: { parentId: string }) => {
         return row.productName;
       },
       width: 200,
+      ellipsis: true,
     },
     {
       title: '资产权限',
@@ -164,7 +167,7 @@ export default observer((props: { parentId: string }) => {
       }),
       valueType: 'option',
       align: 'center',
-      width: 200,
+      width: 60,
       fixed: 'right',
       render: (text, record) => [
         <Popconfirm

+ 6 - 3
src/pages/system/Department/Assets/product/index.tsx

@@ -68,8 +68,9 @@ export default observer((props: { parentId: string }) => {
     {
       dataIndex: 'id',
       title: 'ID',
-      width: 220,
+      width: 180,
       fixed: 'left',
+      ellipsis: true,
     },
     {
       dataIndex: 'name',
@@ -80,7 +81,8 @@ export default observer((props: { parentId: string }) => {
       search: {
         transform: (value) => ({ name$LIKE: value }),
       },
-      width: 200,
+      width: 180,
+      ellipsis: true,
     },
     {
       title: '资产权限',
@@ -98,6 +100,7 @@ export default observer((props: { parentId: string }) => {
       }),
       dataIndex: 'describe',
       hideInSearch: true,
+      ellipsis: true,
       width: 200,
     },
     {
@@ -107,7 +110,7 @@ export default observer((props: { parentId: string }) => {
       }),
       valueType: 'option',
       align: 'center',
-      width: 200,
+      width: 60,
       fixed: 'right',
       render: (text, record) => [
         <Popconfirm

+ 2 - 1
src/pages/system/Department/Member/index.tsx

@@ -122,7 +122,8 @@ const Member = observer((props: { parentId: string }) => {
         defaultMessage: '操作',
       }),
       valueType: 'option',
-      width: 200,
+      width: 60,
+      ellipsis: true,
       fixed: 'right',
       render: (text, record) => [
         <Popconfirm