feat(DashBoard): 添加控制条件参数

src/components/DashBoard/baseCard.tsx

@@ -4,14 +4,16 @@ import Echarts from './echarts';
 import type { EchartsProps } from './echarts';
 import Style from './index.less';
 import classNames from 'classnames';
+import { forwardRef } from 'react';
 
 interface BaseCardProps extends HeaderProps, EchartsProps {
   height: number;
   className?: string;
 }
 
-export default (props: BaseCardProps) => {
+export default forwardRef((props: BaseCardProps, ref) => {
   const { height, className, options, ...formProps } = props;
+
   return (
     <div
       className={classNames(Style['dash-board-echarts'], className)}
@@ -19,8 +21,8 @@ export default (props: BaseCardProps) => {
         height: height || 200,
       }}
     >
-      <Header {...formProps} />
+      <Header ref={ref} {...formProps} />
       <Echarts options={options} />
     </div>
   );
-};
+});

src/components/DashBoard/header.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import Style from './index.less';
 import { Col, Form, Row } from 'antd';
 import RangePicker from './timePicker';
@@ -16,11 +16,16 @@ export interface HeaderProps {
     Children: React.ReactNode;
   };
   initialValues?: any;
+  /**
+   * true 关闭初始化时触发onParamsChange
+   */
+  closeInitialParams?: boolean;
   defaultTime?: TimeType;
 }
 
-export default (props: HeaderProps) => {
+export default forwardRef((props: HeaderProps, ref) => {
   const [form] = Form.useForm();
+  const isCloseInitial = useRef<boolean>(false);
 
   const change = async (data: any) => {
     if (props.onParamsChange) {
@@ -28,6 +33,10 @@ export default (props: HeaderProps) => {
     }
   };
 
+  useImperativeHandle(ref, () => ({
+    getValues: form.getFieldsValue,
+  }));
+
   return (
     <div className={Style.header}>
       <div className={Style.title}>{props.title}</div>
@@ -39,7 +48,11 @@ export default (props: HeaderProps) => {
           preserve={false}
           initialValues={props.initialValues}
           onValuesChange={(_, allValue) => {
-            change(allValue);
+            if (props.closeInitialParams && !isCloseInitial.current) {
+              isCloseInitial.current = true;
+            } else {
+              change(allValue);
+            }
           }}
         >
           <Row style={{ width: '100%' }}>
@@ -60,4 +73,4 @@ export default (props: HeaderProps) => {
       </div>
     </div>
   );
-};
+});

src/pages/link/DashBoard/index.tsx

@@ -1,11 +1,33 @@
 import { PageContainer } from '@ant-design/pro-layout';
 import DashBoard from '@/components/DashBoard';
-import { Radio } from 'antd';
-import { useState } from 'react';
+import { Radio, Select } from 'antd';
+import { useEffect, useRef, useState } from 'react';
 import type { EChartsOption } from 'echarts';
+import { useRequest } from 'umi';
+import Service from './service';
+
+type RefType = {
+  getValues: Function;
+};
+
+const service = new Service('dashboard');
 
 export default () => {
   const [options, setOptions] = useState<EChartsOption>({});
+  const [serverId, setServerId] = useState(undefined);
+
+  const NETWORKRef = useRef<RefType>(); // 网络流量
+  const CPURef = useRef<RefType>(); // CPU使用率
+  const JVMRef = useRef<RefType>(); // JVM内存使用率
+
+  const { data: serverNode } = useRequest(service.serverNode, {
+    formatResult: (res) => res.result.map((item: any) => ({ label: item.name, value: item.id })),
+  });
+
+  const getFormValues = () => {
+    const data = NETWORKRef.current!.getValues();
+    console.log(data);
+  };
 
   const getEcharts = async (data: any) => {
     console.log(data);
@@ -26,20 +48,44 @@ export default () => {
     });
   };
 
+  useEffect(() => {
+    if (serverId) {
+      getFormValues();
+    }
+  }, [serverId]);
+
+  useEffect(() => {
+    if (serverNode && serverNode.length) {
+      setServerId(serverNode[0].value);
+    }
+  }, [serverNode]);
+
   return (
     <PageContainer>
       <div>
+        {serverNode && serverNode.length ? (
+          <Select
+            value={serverId}
+            options={serverNode}
+            onChange={(value) => {
+              setServerId(value);
+            }}
+            style={{ width: 300 }}
+          />
+        ) : null}
         <div>
           <DashBoard
             title={'网络流量'}
-            initialValues={{ test: false }}
+            ref={NETWORKRef}
+            initialValues={{ type: 'bytesSent' }}
             height={400}
+            closeInitialParams={true}
             extraParams={{
-              key: 'test',
+              key: 'type',
               Children: (
                 <Radio.Group buttonStyle={'solid'}>
-                  <Radio.Button value={true}>上行</Radio.Button>
-                  <Radio.Button value={false}>下行</Radio.Button>
+                  <Radio.Button value={'bytesRead'}>上行</Radio.Button>
+                  <Radio.Button value={'bytesSent'}>下行</Radio.Button>
                 </Radio.Group>
               ),
             }}
@@ -51,7 +97,8 @@ export default () => {
         <div style={{ display: 'flex' }}>
           <DashBoard
             title={'CPU使用率趋势'}
-            initialValues={{ test: false }}
+            closeInitialParams={true}
+            ref={CPURef}
             height={400}
             defaultTime={'week'}
             options={options}
@@ -59,6 +106,8 @@ export default () => {
           />
           <DashBoard
             title={'JVM内存使用率趋势'}
+            closeInitialParams={true}
+            ref={JVMRef}
             height={400}
             defaultTime={'week'}
             options={options}

src/pages/link/DashBoard/service.ts

@@ -0,0 +1,16 @@
+import BaseService from '@/utils/BaseService';
+import SystemConst from '@/utils/const';
+import { request } from 'umi';
+
+class Service extends BaseService<any> {
+  serverNode = () =>
+    request(`/${SystemConst.API_BASE}/network/resources/clusters`, { method: 'GET' });
+
+  /**
+   * 网络流量
+   */
+  networkMulti = (data: any) =>
+    request(`/${SystemConst.API_BASE}/dashboard_multi`, { method: 'POST', data });
+}
+
+export default Service;