feat: merge

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 />

src/pages/Log/index.tsx

@@ -1,10 +1,21 @@
 import { PageContainer } from '@ant-design/pro-layout';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Access from '@/pages/Log/Access';
 import System from '@/pages/Log/System';
+import useLocation from '@/hooks/route/useLocation';
 
 const Log = () => {
   const [tab, setTab] = useState<string>('access');
+
+  const location = useLocation();
+
+  useEffect(() => {
+    const { state } = location;
+    if (state?.key) {
+      setTab(state?.key);
+    }
+  }, [location]);
+
   const list = [
     {
       key: 'access',

src/pages/device/Instance/index.tsx

@@ -90,6 +90,10 @@ const Instance = () => {
           type: 'or',
         },
       ]);
+      if (location.state && location.state?.save) {
+        setVisible(true);
+        setCurrent({});
+      }
     }
   }, [location]);
 

src/pages/device/Product/index.tsx

@@ -12,7 +12,7 @@ import {
 import Service from '@/pages/device/Product/service';
 import { observer } from '@formily/react';
 import { model } from '@formily/reactive';
-import { useHistory, useLocation } from 'umi';
+import { useHistory } from 'umi';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import type { ActionType, ProColumns } from '@jetlinks/pro-table';
 import { useEffect, useRef, useState } from 'react';
@@ -25,6 +25,7 @@ import { downloadObject } from '@/utils/util';
 import { service as categoryService } from '@/pages/device/Category';
 import { service as deptService } from '@/pages/system/Department';
 import { omit } from 'lodash';
+import useLocation from '@/hooks/route/useLocation';
 
 export const service = new Service('device-product');
 export const statusMap = {
@@ -81,11 +82,12 @@ const Product = observer(() => {
   const location = useLocation();
 
   useEffect(() => {
-    if ((location as any).query?.save === 'true') {
+    const { state } = location;
+    if (state && state.save) {
       setCurrent(undefined);
       setVisible(true);
     }
-  }, []);
+  }, [location]);
 
   const deleteItem = async (id: string) => {
     const response: any = await service.remove(id);

src/pages/home/components/Guide.tsx

@@ -20,7 +20,7 @@ interface GuideItemProps {
   name: string;
   english: string;
   url: string;
-  param: string;
+  param?: Record<string, any>;
   index?: number;
   auth: boolean;
 }
@@ -31,7 +31,7 @@ const GuideItem = (props: GuideItemProps) => {
 
   const jumpPage = () => {
     if (path && props.auth) {
-      history.push(`${path}${props.param}`);
+      history.push(`${path}`, props.param);
     } else {
       message.warning('暂无权限，请联系管理员');
     }
@@ -57,7 +57,7 @@ const Guide = (props: GuideProps) => {
         style={{ gridTemplateColumns: `repeat(${props.data ? props.data.length : 1}, 1fr)` }}
       >
         {props.data.map((item, index) => (
-          <GuideItem {...item} index={index + 1} />
+          <GuideItem {...item} index={index + 1} key={item.key} />
         ))}
       </div>
     </div>

src/pages/home/components/Pie.tsx

@@ -1,44 +1,37 @@
-import * as echarts from 'echarts';
-import { useEffect, useRef } from 'react';
+import Echarts from '@/components/DashBoard/echarts';
+import { useEffect, useState } from 'react';
+import type { EChartsOption } from 'echarts';
 
 interface Props {
   value: number;
 }
 
 const Pie = (props: Props) => {
-  const myChart: any = useRef(null);
+  const [options, setOptions] = useState<EChartsOption>({});
 
   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],
+    setOptions({
+      color: ['#2F54EB', '#979AFF'],
+      series: [
+        {
+          type: 'pie',
+          radius: ['100%', '50%'],
+          center: ['50%', '50%'],
+          width: 80,
+          label: {
+            show: false,
           },
-        ],
-      };
-      myChart.current = myChart.current || echarts.init(dom);
-      myChart.current.setOption(option);
-    }
+          data: [props.value, 100 - props.value],
+        },
+      ],
+    });
   }, [props.value]);
-  return <div id="charts" style={{ width: '100%', height: 80 }}></div>;
+
+  return (
+    <div style={{ width: '100%', height: 80 }}>
+      <Echarts options={options} />
+    </div>
+  );
 };
 
 export default Pie;

src/pages/home/components/Steps.tsx

@@ -17,7 +17,7 @@ interface StepsProps {
 const ItemDefaultImg = require('/public/images/home/bottom-1.png');
 const StepsItem = (props: StepItemProps) => {
   return (
-    <div className={'step-item step-bar arrow-1'}>
+    <div className={'step-item step-bar arrow-1'} onClick={() => props.onClick()}>
       <div className={'step-item-title'}>
         <div className={'step-item-img'}>
           <img src={props.url || ItemDefaultImg} />

src/pages/home/comprehensive/index.tsx

@@ -5,7 +5,7 @@ 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 Steps from '../components/Steps';
 import { service } from '..';
 import { useEffect, useState } from 'react';
 import useSendWebsocketMessage from '@/hooks/websocket/useSendWebsocketMessage';
@@ -17,6 +17,9 @@ const Comprehensive = () => {
   const productPermission = PermissionButton.usePermission('device/Product').permission;
   const devicePermission = PermissionButton.usePermission('device/Instance').permission;
   const rulePermission = PermissionButton.usePermission('rule-engine/Instance').permission;
+  const accessPermission = getMenuPathByCode(MENUS_CODE['link/AccessConfig']);
+  const logPermission = getMenuPathByCode(MENUS_CODE['Log']);
+  const linkPermission = getMenuPathByCode(MENUS_CODE['link/DashBoard']);
 
   const [productCount, setProductCount] = useState<number>(0);
   const [deviceCount, setDeviceCount] = useState<number>(0);
@@ -37,7 +40,6 @@ const Comprehensive = () => {
     }
   };
 
-  // websocket
   useEffect(() => {
     getProductCount();
     getDeviceCount();
@@ -80,7 +82,6 @@ const Comprehensive = () => {
 
   const history = useHistory();
   // // 跳转
-
   const guideList = [
     {
       key: 'product',
@@ -88,7 +89,9 @@ const Comprehensive = () => {
       english: 'CREATE PRODUCT',
       auth: !!productPermission.add,
       url: 'device/Product',
-      param: '?save=true',
+      param: {
+        save: true,
+      },
     },
     {
       key: 'device',
@@ -96,7 +99,9 @@ const Comprehensive = () => {
       english: 'CREATE DEVICE',
       auth: !!devicePermission.add,
       url: 'device/Instance',
-      param: '?save=true',
+      param: {
+        save: true,
+      },
     },
     {
       key: 'rule-engine',
@@ -104,34 +109,39 @@ const Comprehensive = () => {
       english: 'RULE ENGINE',
       auth: !!rulePermission.add,
       url: 'rule-engine/Instance',
-      param: '?save=true',
+      param: {
+        save: true,
+      },
     },
   ];
 
   const guideOpsList = [
     {
-      key: 'product',
+      key: 'access',
       name: '设备接入配置',
-      english: 'CREATE PRODUCT',
-      auth: !!productPermission.add,
-      url: 'device/Product',
-      param: '?save=true',
+      english: 'DEVICE ACCESS CONFIGURATION',
+      auth: !!accessPermission,
+      url: 'link/AccessConfig',
     },
     {
-      key: 'device',
+      key: 'logger',
       name: '日志排查',
-      english: 'CREATE DEVICE',
-      auth: !!devicePermission.add,
-      url: 'device/Instance',
-      param: '?save=true',
+      english: 'LOG SCREEN',
+      auth: !!logPermission,
+      url: 'Log',
+      param: {
+        key: 'system',
+      },
     },
     {
-      key: 'rule-engine',
+      key: 'realtime',
       name: '实时监控',
-      english: 'RULE ENGINE',
-      auth: !!rulePermission.add,
-      url: 'rule-engine/Instance',
-      param: '?save=true',
+      english: 'REAL-TIME MONITORING',
+      auth: !!linkPermission,
+      url: 'link/DashBoard',
+      param: {
+        save: true,
+      },
     },
   ];
 
@@ -195,7 +205,7 @@ const Comprehensive = () => {
             <div style={{ fontSize: 14, fontWeight: 400 }}>
               <a
                 onClick={() => {
-                  const url = getMenuPathByCode(MENUS_CODE['device/DashBoard']);
+                  const url = getMenuPathByCode(MENUS_CODE['link/DashBoard']);
                   if (!!url) {
                     history.push(`${url}`);
                   } else {
@@ -212,12 +222,12 @@ const Comprehensive = () => {
       <Col span={24}>
         <Body title={'平台架构图'} english={'PLATFORM ARCHITECTURE DIAGRAM'} />
       </Col>
-      <Col span={24}>
+      {/* <Col span={24}>
         <Steps />
       </Col>
       <Col span={24}>
         <Steps />
-      </Col>
+      </Col> */}
     </Row>
   );
 };

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';
@@ -46,7 +46,9 @@ const Device = () => {
       english: 'CREATE PRODUCT',
       auth: !!productPermission.add,
       url: 'device/Product',
-      param: '?save=true',
+      param: {
+        save: true,
+      },
     },
     {
       key: 'device',
@@ -54,7 +56,9 @@ const Device = () => {
       english: 'CREATE DEVICE',
       auth: !!devicePermission.add,
       url: 'device/Instance',
-      param: '?save=true',
+      param: {
+        save: true,
+      },
     },
     {
       key: 'rule-engine',
@@ -62,32 +66,12 @@ const Device = () => {
       english: 'RULE ENGINE',
       auth: !!rulePermission.add,
       url: 'rule-engine/Instance',
-      param: '?save=true',
+      param: {
+        save: true,
+      },
     },
   ];
 
-  // const statisticsList = [{
-  //   key: 'product',
-  //   name: '1、创建产品',
-  //   auth: !!productPermission.add,
-  //   url: 'device/Product',
-  //   param: "?save=true"
-  // }, {
-  //   key: 'device',
-  //   name: '2、创建设备',
-  //   auth: !!devicePermission.add,
-  //   url: 'device/Instance',
-  //   param: "?save=true"
-  // },
-  // {
-  //   key: 'rule-engine',
-  //   name: '3、规则引擎',
-  //   auth: !!rulePermission.add,
-  //   url: 'rule-engine/Instance',
-  //   param: "?save=true"
-  // }
-  // ];
-
   return (
     <Row gutter={24}>
       <Col span={14}>

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');
       }
     });
   }, []);

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;

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

@@ -1,7 +1,7 @@
 import { PageContainer } from '@ant-design/pro-layout';
 import Service from '@/pages/rule-engine/Instance/serivce';
 import type { InstanceItem } from '@/pages/rule-engine/Instance/typings';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { ActionType, ProColumns } from '@jetlinks/pro-table';
 import {
   DeleteOutlined,
@@ -19,6 +19,7 @@ import RuleInstanceCard from '@/components/ProTableCard/CardItems/ruleInstance';
 import Save from '@/pages/rule-engine/Instance/Save';
 import SystemConst from '@/utils/const';
 import { StatusColorEnum } from '@/components/BadgeStatus';
+import useLocation from '@/hooks/route/useLocation';
 
 export const service = new Service('rule-engine/instance');
 
@@ -30,6 +31,16 @@ const Instance = () => {
   const [searchParams, setSearchParams] = useState<any>({});
   const { permission } = PermissionButton.usePermission('rule-engine/Instance');
 
+  const location = useLocation();
+
+  useEffect(() => {
+    const { state } = location;
+    if (state && state.save) {
+      setCurrent({});
+      setVisible(true);
+    }
+  }, [location]);
+
   const tools = (record: InstanceItem) => [
     <PermissionButton
       isPermission={permission.update}

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);