locale: add en-us

src/pages/Analysis/DeviceMessage/index.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import { Area } from '@ant-design/charts';
+
+const DeviceMessageChart = () => {
+  const [data, setData] = useState([]);
+
+  const asyncFetch = () => {
+    fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
+      .then((response) => response.json())
+      .then((json) => setData(json))
+      .catch((error) => {
+        console.log('fetch data failed', error);
+      });
+  };
+  useEffect(() => {
+    asyncFetch();
+  }, []);
+
+  const config = {
+    data,
+    xField: 'Date',
+    yField: 'scales',
+    xAxis: {
+      range: [0, 1],
+      tickCount: 5,
+    },
+    slider: {
+      start: 0.1,
+      end: 0.9,
+      trendCfg: { isArea: true },
+    },
+    areaStyle: function areaStyle() {
+      return { fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff' };
+    },
+  };
+  return <Area {...config} />;
+};
+export default DeviceMessageChart;

src/pages/Analysis/MessageChart/index.tsx

@@ -0,0 +1,127 @@
+import { Column } from '@ant-design/charts';
+import moment from 'moment';
+import { useEffect } from 'react';
+import { service } from '@/pages/Analysis';
+
+const calculationDate = () => {
+  const dd = new Date();
+  dd.setDate(dd.getDate() - 30);
+  const y = dd.getFullYear();
+  const m = dd.getMonth() + 1 < 10 ? `0${dd.getMonth() + 1}` : dd.getMonth() + 1;
+  const d = dd.getDate() < 10 ? `0${dd.getDate()}` : dd.getDate();
+  return `${y}-${m}-${d} 00:00:00`;
+};
+
+const MessageChart = () => {
+  const list = [
+    {
+      dashboard: 'device',
+      object: 'message',
+      measurement: 'quantity',
+      dimension: 'agg',
+      group: 'sameDay',
+      params: {
+        time: '1d',
+        format: 'yyyy-MM-dd',
+      },
+    },
+    {
+      dashboard: 'device',
+      object: 'message',
+      measurement: 'quantity',
+      dimension: 'agg',
+      group: 'sameMonth',
+      params: {
+        limit: 30,
+        time: '1d',
+        format: 'yyyy-MM-dd',
+        from: calculationDate(),
+        to: `${moment(new Date()).format('YYYY-MM-DD')} 23:59:59`,
+      },
+    },
+    {
+      dashboard: 'device',
+      object: 'message',
+      measurement: 'quantity',
+      dimension: 'agg',
+      group: 'month',
+      params: {
+        time: '1M',
+        format: 'yyyy-MM-dd',
+        from: calculationDate(),
+        to: `${moment(new Date()).format('YYYY-MM-DD')} 23:59:59`,
+      },
+    },
+  ];
+
+  useEffect(() => {
+    service.getMulti(list).subscribe((data) => {
+      console.log(data);
+    });
+  }, []);
+
+  const data = [
+    {
+      type: '1-3秒',
+      value: 0.16,
+    },
+    {
+      type: '4-10秒',
+      value: 0.125,
+    },
+    {
+      type: '11-30秒',
+      value: 0.24,
+    },
+    {
+      type: '31-60秒',
+      value: 0.19,
+    },
+    {
+      type: '1-3分',
+      value: 0.22,
+    },
+    {
+      type: '3-10分',
+      value: 0.05,
+    },
+    {
+      type: '10-30分',
+      value: 0.01,
+    },
+    {
+      type: '30+分',
+      value: 0.015,
+    },
+  ];
+
+  const paletteSemanticRed = '#F4664A';
+  const brandColor = '#5B8FF9';
+  const config = {
+    data,
+    xField: 'type',
+    yField: 'value',
+    seriesField: '',
+    color: function color(_ref: any) {
+      const { type } = _ref;
+      if (type === '10-30分' || type === '30+分') {
+        return paletteSemanticRed;
+      }
+      return brandColor;
+    },
+    width: 200,
+    height: 200,
+    label: {
+      offset: 10,
+    },
+    legend: false,
+    xAxis: {
+      label: {
+        autoHide: true,
+        autoRotate: false,
+      },
+    },
+  };
+  return <Column {...config} />;
+};
+export default MessageChart;

src/pages/Analysis/index.tsx

@@ -1,66 +1,58 @@
-import { PageContainer } from '@ant-design/pro-layout';
 import { StatisticCard } from '@ant-design/pro-card';
 import RcResizeObserver from 'rc-resize-observer';
 import { useState } from 'react';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import CPU from '@/pages/Analysis/CPU';
 import Jvm from '@/pages/Analysis/Jvm';
+import DeviceMessageChart from '@/pages/Analysis/DeviceMessage';
+import DeviceChart from '@/pages/Analysis/DeviceChart';
+import MessageChart from '@/pages/Analysis/MessageChart';
+import Service from '@/pages/Analysis/service';
 
 const { Divider } = StatisticCard;
 
+export const service = new Service();
 const Analysis = () => {
   const [responsive, setResponsive] = useState(false);
   const intl = useIntl();
 
   return (
-    <PageContainer>
-      <RcResizeObserver
-        key="resize-observer"
-        onResize={(offset) => {
-          setResponsive(offset.width < 596);
+    <RcResizeObserver
+      key="resize-observer"
+      onResize={(offset) => {
+        setResponsive(offset.width < 596);
+      }}
+    >
+      <StatisticCard.Group direction={responsive ? 'column' : 'row'}>
+        <StatisticCard
+          title={intl.formatMessage({
+            id: 'pages.analysis.cpu',
+            defaultMessage: 'CPU使用率',
+          })}
+          chart={<CPU />}
+        />
+        <Divider type={responsive ? 'horizontal' : 'vertical'} />
+        <StatisticCard
+          title={intl.formatMessage({
+            id: 'pages.analysis.jvm',
+            defaultMessage: 'JVM内存',
+          })}
+          chart={<Jvm />}
+        />
+        <Divider type={responsive ? 'horizontal' : 'vertical'} />
+        <StatisticCard title="今日设备消息量" chart={<MessageChart />} />
+        <Divider type={responsive ? 'horizontal' : 'vertical'} />
+        <DeviceChart />
+      </StatisticCard.Group>
+      <Divider type={responsive ? 'horizontal' : 'vertical'} />
+      <StatisticCard
+        statistic={{
+          title: '设备消息',
         }}
       >
-        <StatisticCard.Group direction={responsive ? 'column' : 'row'}>
-          <StatisticCard
-            statistic={{
-              title: intl.formatMessage({
-                id: 'pages.analysis.cpu',
-                defaultMessage: 'CPU使用率',
-              }),
-            }}
-            chart={<CPU />}
-          />
-          <Divider type={responsive ? 'horizontal' : 'vertical'} />
-          <StatisticCard
-            statistic={{
-              title: intl.formatMessage({
-                id: 'pages.analysis.jvm',
-                defaultMessage: 'JVM内存',
-              }),
-            }}
-            chart={<Jvm />}
-          />
-          <Divider type={responsive ? 'horizontal' : 'vertical'} />
-          <StatisticCard
-            statistic={{
-              title: intl.formatMessage({
-                id: 'pages.analysis.information',
-                defaultMessage: '信息完成度',
-              }),
-              value: 5,
-              suffix: '/ 100',
-            }}
-            chart={
-              <img
-                src="https://gw.alipayobjects.com/zos/alicdn/RLeBTRNWv/bianzu%25252043x.png"
-                alt="直方图"
-                width="100%"
-              />
-            }
-          />
-        </StatisticCard.Group>
-      </RcResizeObserver>
-    </PageContainer>
+        <DeviceMessageChart />
+      </StatisticCard>
+    </RcResizeObserver>
   );
 };
 export default Analysis;