Bläddra i källkod

fix: 合并冲突

sun-chaochao 3 år sedan
förälder
incheckning
aadf570d96

BIN
public/images/home/comprehensive.png


BIN
public/images/home/device.png


BIN
public/images/home/ops.png


+ 1 - 1
src/components/RightContent/index.tsx

@@ -55,7 +55,7 @@ const GlobalHeaderRight: React.FC = () => {
       <span
         className={styles.action}
         onClick={() => {
-          window.open('https://doc.jetlinks.cn');
+          window.open('http://doc.jetlinks.cn');
         }}
       >
         <QuestionCircleOutlined />

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

@@ -1,6 +1,7 @@
 import Echarts from '@/components/DashBoard/echarts';
 import { useEffect, useState } from 'react';
 import type { EChartsOption } from 'echarts';
+
 interface Props {
   value: number;
 }

+ 1 - 1
src/pages/home/device/index.tsx

@@ -1,4 +1,4 @@
-import { Col, Row, Tooltip, message } from 'antd';
+import { Col, message, Row, Tooltip } from 'antd';
 import { PermissionButton } from '@/components';
 import { Body, Guide } from '../components';
 import Statistics from '../components/Statistics';

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

@@ -22,10 +22,11 @@ const Home = () => {
     service.queryView().then((resp) => {
       if (resp.status === 200) {
         if (resp.result.length == 0) {
-          setCurrent('init');
+          setCurrent('ops');
         } else {
           setCurrent(resp.result[0]?.content);
         }
+        setCurrent('ops');
       }
     });
   }, []);

+ 206 - 1
src/pages/home/ops/index.tsx

@@ -1,4 +1,209 @@
+import { Col, message, Row, Tooltip } from 'antd';
+import Guide from '../components/Guide';
+import { PermissionButton } from '@/components';
+import Statistics from '../components/Statistics';
+import Pie from '@/pages/home/components/Pie';
+import { getMenuPathByCode, MENUS_CODE } from '@/utils/menu';
+import { useEffect, useState } from 'react';
+import { map } from 'rxjs';
+import useSendWebsocketMessage from '@/hooks/websocket/useSendWebsocketMessage';
+import useHistory from '@/hooks/route/useHistory';
+import Body from '@/pages/home/components/Body';
+import Steps from '@/pages/home/components/Steps';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+
 const Ops = () => {
-  return <div>运维管理视图</div>;
+  const [subscribeTopic] = useSendWebsocketMessage();
+  const history = useHistory();
+
+  const productPermission = PermissionButton.usePermission('device/Product').permission;
+  const devicePermission = PermissionButton.usePermission('device/Instance').permission;
+  const rulePermission = PermissionButton.usePermission('rule-engine/Instance').permission;
+
+  const [cpuValue, setCpuValue] = useState<number>(0);
+  const [jvmValue, setJvmValue] = useState<number>(0);
+
+  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 guideOpsList: any[] = [
+    {
+      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={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
+          title={
+            <span>
+              运维管理推荐步骤
+              <Tooltip title="请根据业务需要对下述步骤进行选择性操作。">
+                <QuestionCircleOutlined style={{ paddingLeft: 12 }} />
+              </Tooltip>
+            </span>
+          }
+          data={[
+            {
+              title: '协议管理',
+              content: '根据业务需求自定义开发对应的产品(设备模型)接入协议,并上传到平台。',
+              url: require('/public/images/home/bottom-1.png'),
+              onClick: () => {
+                const url = getMenuPathByCode(MENUS_CODE['link/Protocol']);
+                if (!!url) {
+                  history.push(url);
+                } else {
+                  message.warning('暂无权限,请联系管理员');
+                }
+              },
+            },
+            {
+              title: '证书管理',
+              content: '统一维护平台内的证书,用于数据通信加密。',
+              url: require('/public/images/home/bottom-6.png'),
+              onClick: () => {
+                const url = getMenuPathByCode(MENUS_CODE['link/Certificate']);
+                if (!!url) {
+                  history.push(url);
+                } else {
+                  message.warning('暂无权限,请联系管理员');
+                }
+              },
+            },
+            {
+              title: '网络组件',
+              content: '根据不同的传输类型配置平台底层网络组件相关参数。',
+              url: require('/public/images/home/bottom-3.png'),
+              onClick: () => {
+                const url = getMenuPathByCode(MENUS_CODE['link/Type']);
+                if (!!url) {
+                  history.push(url);
+                } else {
+                  message.warning('暂无权限,请联系管理员');
+                }
+              },
+            },
+            {
+              title: '设备接入网关',
+              content: '根据不同的传输类型,关联消息协议,配置设备接入网关相关参数。',
+              url: require('/public/images/home/bottom-4.png'),
+              onClick: () => {
+                const url = getMenuPathByCode(MENUS_CODE['link/Gateway']);
+                if (!!url) {
+                  history.push(url);
+                } else {
+                  message.warning('暂无权限,请联系管理员');
+                }
+              },
+            },
+            {
+              title: '日志管理',
+              content: '监控系统日志,及时处理系统异常。',
+              url: require('/public/images/home/bottom-5.png'),
+              onClick: () => {
+                const url = getMenuPathByCode(MENUS_CODE['Log']);
+                if (!!url) {
+                  history.push(url);
+                } else {
+                  message.warning('暂无权限,请联系管理员');
+                }
+              },
+            },
+          ]}
+        />
+      </Col>
+    </Row>
+  );
 };
 export default Ops;

+ 0 - 1
src/pages/system/Role/index.tsx

@@ -197,7 +197,6 @@ const Role: React.FC = observer(() => {
       CurdModel.add();
     }
     const subscription = Store.subscribe(SystemConst.BASE_UPDATE_DATA, (data) => {
-      debugger;
       console.log('订阅数据');
       if ((window as any).onTabSaveSuccess) {
         (window as any).onTabSaveSuccess(data);