feat(merge): merge sc

fix: 基础饼图

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;

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

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;

src/pages/home/device/index.tsx

@@ -1,13 +1,41 @@
-import { Col, Row } from 'antd';
+import { Col, message, Row } 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';
 
 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 = [
@@ -75,15 +103,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}>

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>('init');
+  const [current, setCurrent] = useState<ViewType>('comprehensive');
 
   const ViewMap = {
     init: <Init changeView={(value: ViewType) => setCurrent(value)} />,

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;