create

dashboard/src/components/admin/api/ApiDelayHour.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import { Column } from "@ant-design/plots";
+import { put } from "../../../request";
+import { StatisticCard } from "@ant-design/pro-components";
+
+interface IApiDelay {
+  date: string;
+  value: number;
+}
+interface IApiDelayResponse {
+  ok: boolean;
+  message: string;
+  data: IApiDelay[];
+}
+interface IApiRequest {
+  api: string;
+  item: string;
+}
+
+interface IWidget {
+  type: "average" | "count" | "delay";
+  api?: string;
+}
+
+const ApiDelayHourWidget = ({ type, api = "all" }: IWidget) => {
+  const [delayData, setDelayData] = useState<IApiDelay[]>([]);
+
+  useEffect(() => {
+    put<IApiRequest, IApiDelayResponse>("/v2/api/10", {
+      api: api,
+      item: type,
+    }).then((json) => {
+      console.log("data", json.data);
+      setDelayData(json.data);
+    });
+  }, []);
+
+  const config = {
+    data: delayData,
+    xField: "date",
+    yField: "value",
+    seriesField: "",
+    xAxis: {
+      label: {
+        autoHide: true,
+        autoRotate: false,
+      },
+    },
+  };
+
+  return (
+    <StatisticCard
+      style={{ width: 400 }}
+      statistic={{
+        title: "平均响应时间",
+        value: "",
+        suffix: "/ ms",
+      }}
+      chart={<Column {...config} />}
+    />
+  );
+};
+
+export default ApiDelayHourWidget;

dashboard/src/components/admin/api/ApiGauge.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useRef, useState } from "react";
+import { Gauge } from "@ant-design/plots";
+import { get } from "../../../request";
+import { StatisticCard } from "@ant-design/pro-components";
+
+interface IApiResponse {
+  ok: boolean;
+  message: string;
+  data: number;
+}
+const ApiGaugeWidget = () => {
+  const min = 0;
+  const max = 1;
+  const [percent, setPercent] = useState<number>(0);
+  const [delay, setDelay] = useState<number>(0);
+  const maxAxis = 5000; //最大量程-毫秒
+
+  useEffect(() => {
+    let timer = setInterval(() => {
+      get<IApiResponse>("/v2/api/10?item=average").then((json) => {
+        setPercent(json.data / maxAxis);
+        setDelay(json.data);
+      });
+    }, 1000 * 5);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  const graphRef: any = useRef(null);
+
+  const config = {
+    percent: percent,
+    range: {
+      ticks: [min, max],
+      color: ["l(0) 0:#30BF78 0.5:#FAAD14 1:#F4664A"],
+    },
+    indicator: {
+      pointer: {
+        style: {
+          stroke: "#D0D0D0",
+        },
+      },
+      pin: {
+        style: {
+          stroke: "#D0D0D0",
+        },
+      },
+    },
+    axis: {
+      label: {
+        formatter(v: any) {
+          return Number(v) * maxAxis;
+        },
+      },
+      subTickLine: {
+        count: 3,
+      },
+    },
+  };
+
+  return (
+    <StatisticCard
+      style={{ width: 400 }}
+      statistic={{
+        title: "平均相应时间",
+        value: delay,
+        suffix: "/ ms",
+      }}
+      chart={
+        <Gauge
+          ref={graphRef}
+          {...config}
+          onReady={(chart) => {
+            graphRef.current = chart;
+          }}
+        />
+      }
+    />
+  );
+};
+
+export default ApiGaugeWidget;

dashboard/src/pages/admin/api/dashboard.tsx

@@ -0,0 +1,31 @@
+import { StatisticCard } from "@ant-design/pro-components";
+import { useState } from "react";
+import RcResizeObserver from "rc-resize-observer";
+import ApiGauge from "../../../components/admin/api/ApiGauge";
+import ApiDelayHour from "../../../components/admin/api/ApiDelayHour";
+const { Divider } = StatisticCard;
+const Widget = () => {
+  const [responsive, setResponsive] = useState(true);
+
+  return (
+    <RcResizeObserver
+      key="resize-observer"
+      onResize={(offset) => {
+        setResponsive(offset.width < 596);
+      }}
+    >
+      <StatisticCard.Group
+        direction={responsive ? "column" : "row"}
+        title="总量"
+      >
+        <ApiDelayHour type="count" />
+        <Divider type={responsive ? "horizontal" : "vertical"} />
+        <ApiDelayHour type="average" />
+        <Divider type={responsive ? "horizontal" : "vertical"} />
+        <ApiGauge />
+      </StatisticCard.Group>
+    </RcResizeObserver>
+  );
+};
+
+export default Widget;

dashboard/src/pages/admin/api/index.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from "react-router-dom";
+import { Layout } from "antd";
+import { styleStudioContent } from "../../studio/style";
+
+const { Content } = Layout;
+
+const Widget = () => {
+  return (
+    <Content style={styleStudioContent}>
+      <Outlet />
+    </Content>
+  );
+};
+
+export default Widget;