xieyonghong 3 лет назад
Родитель
Сommit
9ee6853831

+ 44 - 0
src/pages/home/components/Pie.tsx

@@ -0,0 +1,44 @@
+import * as echarts from 'echarts';
+import { useEffect, useRef } from 'react';
+
+interface Props {
+  value: number;
+}
+
+const Pie = (props: Props) => {
+  const myChart: any = useRef(null);
+
+  useEffect(() => {
+    const dom = document.getElementById('charts');
+    if (dom) {
+      const option = {
+        series: [
+          {
+            type: 'pie',
+            radius: [20, 40],
+            top: 0,
+            height: 70,
+            left: 'center',
+            width: 70,
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 1,
+            },
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [props.value, 100 - props.value],
+          },
+        ],
+      };
+      myChart.current = myChart.current || echarts.init(dom);
+      myChart.current.setOption(option);
+    }
+  }, [props.value]);
+  return <div id="charts" style={{ width: '100%', height: 80 }}></div>;
+};
+
+export default Pie;

+ 10 - 5
src/pages/home/components/Statistics.tsx

@@ -4,13 +4,14 @@ import './index.less';
 
 type StatisticsItem = {
   name: string;
-  value: number;
-  img: string;
+  value: number | string;
+  children: React.ReactNode | string;
 };
 
 interface StatisticsProps {
   extra?: React.ReactNode | string;
   data: StatisticsItem[];
+  title: string;
 }
 
 const defaultImage = require('/public/images/home/top-1.png');
@@ -18,14 +19,18 @@ const defaultImage = require('/public/images/home/top-1.png');
 const Statistics = (props: StatisticsProps) => {
   return (
     <div className={'home-statistics'}>
-      <Title title={'设备统计'} extra={props.extra} />
+      <Title title={props.title} extra={props.extra} />
       <div className={'home-statistics-body'}>
         {props.data.map((item) => (
-          <div className={'home-guide-item'}>
+          <div className={'home-guide-item'} key={item.name}>
             <div className={'item-english'}>{item.name}</div>
             <div className={'item-title'}>{item.value}</div>
             <div className={`item-index`}>
-              <img src={item.img || defaultImage} />
+              {typeof item.children === 'string' ? (
+                <img src={item.children || defaultImage} />
+              ) : (
+                item.children
+              )}
             </div>
           </div>
         ))}

+ 221 - 1
src/pages/home/comprehensive/index.tsx

@@ -1,4 +1,224 @@
+import { PermissionButton } from '@/components';
+import useHistory from '@/hooks/route/useHistory';
+import { getMenuPathByCode, MENUS_CODE } from '@/utils/menu';
+import { Col, message, Row } from 'antd';
+import Body from '../components/Body';
+import Guide from '../components/Guide';
+import Statistics from '../components/Statistics';
+import Steps from '../components/Steps';
+import { service } from '..';
+import { useEffect, useState } from 'react';
+import useSendWebsocketMessage from '@/hooks/websocket/useSendWebsocketMessage';
+import { map } from 'rxjs';
+import Pie from '../components/Pie';
+
 const Comprehensive = () => {
-  return <div>综合管理视图</div>;
+  const [subscribeTopic] = useSendWebsocketMessage();
+  const productPermission = PermissionButton.usePermission('device/Product').permission;
+  const devicePermission = PermissionButton.usePermission('device/Instance').permission;
+  const rulePermission = PermissionButton.usePermission('rule-engine/Instance').permission;
+
+  const [productCount, setProductCount] = useState<number>(0);
+  const [deviceCount, setDeviceCount] = useState<number>(0);
+  const [cpuValue, setCpuValue] = useState<number>(0);
+  const [jvmValue, setJvmValue] = useState<number>(0);
+
+  const getProductCount = async () => {
+    const resp = await service.productCount({});
+    if (resp.status === 200) {
+      setProductCount(resp.result);
+    }
+  };
+
+  const getDeviceCount = async () => {
+    const resp = await service.deviceCount();
+    if (resp.status === 200) {
+      setDeviceCount(resp.result);
+    }
+  };
+
+  // websocket
+  useEffect(() => {
+    getProductCount();
+    getDeviceCount();
+  }, []);
+
+  useEffect(() => {
+    const cpuRealTime = subscribeTopic!(
+      `operations-statistics-system-info-cpu-realTime`,
+      `/dashboard/systemMonitor/stats/info/realTime`,
+      {
+        type: 'cpu',
+        interval: '2s',
+        agg: 'avg',
+      },
+    )
+      ?.pipe(map((res) => res.payload))
+      .subscribe((payload: any) => {
+        setCpuValue(payload.value?.systemUsage || 0);
+      });
+
+    const jvmRealTime = subscribeTopic!(
+      `operations-statistics-system-info-memory-realTime`,
+      `/dashboard/systemMonitor/stats/info/realTime`,
+      {
+        type: 'memory',
+        interval: '2s',
+        agg: 'avg',
+      },
+    )
+      ?.pipe(map((res) => res.payload))
+      .subscribe((payload: any) => {
+        setJvmValue(payload.value?.jvmHeapUsage || 0);
+      });
+
+    return () => {
+      cpuRealTime?.unsubscribe();
+      jvmRealTime?.unsubscribe();
+    };
+  }, []);
+
+  const history = useHistory();
+  // // 跳转
+
+  const guideList = [
+    {
+      key: 'product',
+      name: '创建产品',
+      english: 'CREATE PRODUCT',
+      auth: !!productPermission.add,
+      url: 'device/Product',
+      param: '?save=true',
+    },
+    {
+      key: 'device',
+      name: '创建设备',
+      english: 'CREATE DEVICE',
+      auth: !!devicePermission.add,
+      url: 'device/Instance',
+      param: '?save=true',
+    },
+    {
+      key: 'rule-engine',
+      name: '规则引擎',
+      english: 'RULE ENGINE',
+      auth: !!rulePermission.add,
+      url: 'rule-engine/Instance',
+      param: '?save=true',
+    },
+  ];
+
+  const guideOpsList = [
+    {
+      key: 'product',
+      name: '设备接入配置',
+      english: 'CREATE PRODUCT',
+      auth: !!productPermission.add,
+      url: 'device/Product',
+      param: '?save=true',
+    },
+    {
+      key: 'device',
+      name: '日志排查',
+      english: 'CREATE DEVICE',
+      auth: !!devicePermission.add,
+      url: 'device/Instance',
+      param: '?save=true',
+    },
+    {
+      key: 'rule-engine',
+      name: '实时监控',
+      english: 'RULE ENGINE',
+      auth: !!rulePermission.add,
+      url: 'rule-engine/Instance',
+      param: '?save=true',
+    },
+  ];
+
+  return (
+    <Row gutter={24}>
+      <Col span={14}>
+        <Guide title="物联网引导" data={guideList} />
+      </Col>
+      <Col span={10}>
+        <Statistics
+          data={[
+            {
+              name: '产品数量',
+              value: productCount,
+              children: '',
+            },
+            {
+              name: '设备数量',
+              value: deviceCount,
+              children: '',
+            },
+          ]}
+          title="设备统计"
+          extra={
+            <div style={{ fontSize: 14, fontWeight: 400 }}>
+              <a
+                onClick={() => {
+                  const url = getMenuPathByCode(MENUS_CODE['device/DashBoard']);
+                  if (!!url) {
+                    history.push(`${url}`);
+                  } else {
+                    message.warning('暂无权限,请联系管理员');
+                  }
+                }}
+              >
+                详情
+              </a>
+            </div>
+          }
+        />
+      </Col>
+      <Col span={14}>
+        <Guide title="运维引导" data={guideOpsList} />
+      </Col>
+      <Col span={10}>
+        <Statistics
+          data={[
+            {
+              name: 'CPU使用率',
+              value: String(cpuValue) + '%',
+              children: <Pie value={cpuValue} />,
+            },
+            {
+              name: 'JVM内存',
+              value: String(jvmValue) + '%',
+              children: <Pie value={jvmValue} />,
+            },
+          ]}
+          title="基础统计"
+          extra={
+            <div style={{ fontSize: 14, fontWeight: 400 }}>
+              <a
+                onClick={() => {
+                  const url = getMenuPathByCode(MENUS_CODE['device/DashBoard']);
+                  if (!!url) {
+                    history.push(`${url}`);
+                  } else {
+                    message.warning('暂无权限,请联系管理员');
+                  }
+                }}
+              >
+                详情
+              </a>
+            </div>
+          }
+        />
+      </Col>
+      <Col span={24}>
+        <Body title={'平台架构图'} english={'PLATFORM ARCHITECTURE DIAGRAM'} />
+      </Col>
+      <Col span={24}>
+        <Steps />
+      </Col>
+      <Col span={24}>
+        <Steps />
+      </Col>
+    </Row>
+  );
 };
 export default Comprehensive;

+ 50 - 5
src/pages/home/device/index.tsx

@@ -1,14 +1,42 @@
-import { Col, Row, Tooltip } from 'antd';
+import { Col, Row, Tooltip, message } from 'antd';
 import { PermissionButton } from '@/components';
 import { Body, Guide } from '../components';
 import Statistics from '../components/Statistics';
 import Steps from '../components/Steps';
+import { getMenuPathByCode, MENUS_CODE } from '@/utils/menu';
+import { useHistory } from '@/hooks';
+import { service } from '..';
+import { useEffect, useState } from 'react';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 
 const Device = () => {
   const productPermission = PermissionButton.usePermission('device/Product').permission;
   const devicePermission = PermissionButton.usePermission('device/Instance').permission;
   const rulePermission = PermissionButton.usePermission('rule-engine/Instance').permission;
+
+  const [productCount, setProductCount] = useState<number>(0);
+  const [deviceCount, setDeviceCount] = useState<number>(0);
+
+  const getProductCount = async () => {
+    const resp = await service.productCount({});
+    if (resp.status === 200) {
+      setProductCount(resp.result);
+    }
+  };
+
+  const getDeviceCount = async () => {
+    const resp = await service.deviceCount();
+    if (resp.status === 200) {
+      setDeviceCount(resp.result);
+    }
+  };
+
+  useEffect(() => {
+    getProductCount();
+    getDeviceCount();
+  }, []);
+
+  const history = useHistory();
   // // 跳转
 
   const guideList = [
@@ -76,15 +104,32 @@ const Device = () => {
           data={[
             {
               name: '产品数量',
-              value: 111,
-              img: '',
+              value: productCount,
+              children: '',
             },
             {
               name: '设备数量',
-              value: 12,
-              img: '',
+              value: deviceCount,
+              children: '',
             },
           ]}
+          title="设备统计"
+          extra={
+            <div style={{ fontSize: 14, fontWeight: 400 }}>
+              <a
+                onClick={() => {
+                  const url = getMenuPathByCode(MENUS_CODE['device/DashBoard']);
+                  if (!!url) {
+                    history.push(`${url}`);
+                  } else {
+                    message.warning('暂无权限,请联系管理员');
+                  }
+                }}
+              >
+                详情
+              </a>
+            </div>
+          }
         />
       </Col>
       <Col span={24}>

+ 2 - 2
src/pages/home/index.tsx

@@ -9,7 +9,7 @@ import Service from './service';
 export const service = new Service();
 const Home = () => {
   type ViewType = keyof typeof ViewMap;
-  const [current, setCurrent] = useState<ViewType>('device');
+  const [current, setCurrent] = useState<ViewType>('comprehensive');
 
   const ViewMap = {
     init: <Init changeView={(value: ViewType) => setCurrent(value)} />,
@@ -24,7 +24,7 @@ const Home = () => {
         if (resp.result.length == 0) {
           setCurrent('init');
         } else {
-          // setCurrent(resp.result[0]?.content);
+          setCurrent(resp.result[0]?.content);
         }
       }
     });

+ 9 - 0
src/pages/home/service.ts

@@ -12,6 +12,15 @@ class Service {
       method: 'POST',
       data,
     });
+  // 设备数量
+  deviceCount = (data?: any) =>
+    request(`/${SystemConst.API_BASE}/device/instance/_count`, { methods: 'GET', params: data });
+  // 产品数量
+  productCount = (data?: any) =>
+    request(`/${SystemConst.API_BASE}/device-product/_count`, {
+      method: 'POST',
+      data,
+    });
 }
 
 export default Service;

+ 1 - 1
src/pages/rule-engine/Scene/Save/action/VariableItems/user.tsx

@@ -25,7 +25,7 @@ interface UserProps {
 
 export default (props: UserProps) => {
   const [source, setSource] = useState(props.value?.source);
-  const [value, setValue] = useState<string | undefined>('');
+  const [value, setValue] = useState<string | undefined>();
   const [userList, setUserList] = useState({ platform: [], relation: [] });
   const [relationList, setRelationList] = useState([]);
 

+ 3 - 0
src/pages/rule-engine/Scene/TriggerTerm/index.tsx

@@ -366,6 +366,9 @@ const TriggerTerm = (props: Props, ref: any) => {
                           'value[0]': {
                             type: 'string',
                             'x-component': 'Input',
+                            'x-component-props': {
+                              placeholder: '请输入过滤条件值',
+                            },
                             'x-decorator': 'FormItem',
                             'x-decorator-props': {
                               style: {

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

@@ -141,7 +141,7 @@ export default observer(() => {
             column2: {
               type: 'void',
               'x-component': 'ArrayTable.Column',
-              'x-component-props': { title: '参数名称' },
+              'x-component-props': { title: '参数' },
               properties: {
                 values: {
                   type: 'string',

+ 1 - 1
src/pages/system/Platforms/index.tsx

@@ -109,7 +109,7 @@ export default () => {
       }),
       valueType: 'option',
       align: 'center',
-      width: 200,
+      width: 250,
       render: (_, record: any) => [
         <PermissionButton
           key={'update'}

+ 3 - 0
src/pages/system/Platforms/password.tsx

@@ -139,10 +139,12 @@ export default (props: SaveProps) => {
   const modalClose = () => {
     if (props.onCancel) {
       props.onCancel();
+      form.reset();
     }
   };
 
   const saveData = useCallback(async () => {
+    console.log(props.data.id);
     const data: any = await form.submit();
     if (data) {
       setLoading(true);
@@ -151,6 +153,7 @@ export default (props: SaveProps) => {
       if (resp.status === 200) {
         modalClose();
         message.success('操作成功');
+        await form.reset();
       }
     }
   }, [props.data]);

+ 1 - 1
src/pages/system/Role/Detail/UserManage/index.tsx

@@ -39,7 +39,7 @@ const UserManage = () => {
         id: 'pages.system.username',
         defaultMessage: '用户名',
       }),
-      align: 'center',
+      // align: 'center',
       dataIndex: 'username',
       ellipsis: true,
     },