fix(alarm): alarm dashboard

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

@@ -0,0 +1,292 @@
+import { PageContainer } from '@ant-design/pro-layout';
+import { EChartsOption } from 'echarts';
+import { useEffect, useState } from 'react';
+import { Statistic, StatisticCard } from '@ant-design/pro-card';
+import { Card, Select } from 'antd';
+import './index.less';
+import Header from '@/components/DashBoard/header';
+import Echarts from '@/components/DashBoard/echarts';
+import Service from './service';
+import { observer } from '@formily/react';
+import { model } from '@formily/reactive';
+
+const imgStyle = {
+  display: 'block',
+  width: 42,
+  height: 42,
+};
+
+const service = new Service();
+export const state = model<{
+  today: number;
+  thisMonth: number;
+  config: number;
+  enabledConfig: number;
+  disabledConfig: number;
+  alarmList: any[];
+}>({
+  today: 0,
+  thisMonth: 0,
+  config: 0,
+  enabledConfig: 0,
+  disabledConfig: 0,
+  alarmList: [],
+});
+
+type DashboardItem = {
+  group: string;
+  data: Record<string, any>;
+};
+const Dashboard = observer(() => {
+  const [options, setOptions] = useState<EChartsOption>({});
+
+  // 今日告警
+  const today = {
+    dashboard: 'alarm',
+    object: 'record',
+    measurement: 'trend',
+    dimension: 'agg',
+    group: 'today',
+    params: {
+      time: '1h',
+      targetType: 'device',
+      format: 'HH:mm:ss',
+      from: 'now-1d',
+      to: 'now',
+      limit: 24,
+    },
+  };
+  // 当月告警
+  const thisMonth = {
+    dashboard: 'alarm',
+    object: 'record',
+    measurement: 'trend',
+    dimension: 'agg',
+    group: 'thisMonth',
+    params: {
+      time: '1M',
+      targetType: 'device',
+      format: 'yyyy-MM',
+      limit: 1,
+      from: 'now-1M',
+    },
+  };
+  // 告警趋势
+  const chartData = {
+    dashboard: 'alarm',
+    object: 'record',
+    measurement: 'trend',
+    dimension: 'agg',
+    group: 'alarmTrend',
+    params: {
+      time: '1M',
+      targetType: 'device', // product、device、org、other
+      from: 'now-1y', // now-1d、now-1w、now-1M、now-1y
+      format: 'M月',
+      to: 'now',
+      limit: 12,
+    },
+  };
+
+  // 告警排名
+  const order = {
+    dashboard: 'alarm',
+    object: 'record',
+    measurement: 'rank',
+    dimension: 'agg',
+    group: 'alarmRank',
+    params: {
+      time: '1h',
+      targetType: 'device',
+      from: 'now-1w',
+      to: 'now',
+      limit: 10,
+    },
+  };
+
+  const getDashboard = async () => {
+    const resp = await service.dashboard([today, thisMonth, chartData, order]);
+    if (resp.status === 200) {
+      const _data = resp.result as DashboardItem[];
+      state.today = _data.find((item) => item.group === 'today')?.data.value;
+      state.thisMonth = _data.find((item) => item.group === 'thisMonth')?.data.value;
+    }
+  };
+
+  const getAlarmConfig = async () => {
+    const countResp = await service.getAlarmConfigCount({});
+    const enabledResp = await service.getAlarmConfigCount({
+      terms: [
+        {
+          column: 'state',
+          value: 'enabled',
+        },
+      ],
+    });
+    const disabledResp = await service.getAlarmConfigCount({
+      terms: [
+        {
+          column: 'state',
+          value: 'disabled',
+        },
+      ],
+    });
+    if (countResp.status === 200) {
+      state.config = countResp.result;
+    }
+    if (enabledResp.status === 200) {
+      state.enabledConfig = enabledResp.result;
+    }
+    if (disabledResp.status === 200) {
+      state.disabledConfig = disabledResp.result;
+    }
+  };
+
+  useEffect(() => {
+    getDashboard();
+    getAlarmConfig();
+  }, []);
+
+  const getEcharts = async (params: any) => {
+    // 请求数据
+    console.log(params);
+
+    setOptions({
+      xAxis: {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [
+        {
+          data: [150, 230, 224, 218, 135, 147, 260],
+          type: 'line',
+        },
+      ],
+    });
+  };
+
+  return (
+    <PageContainer>
+      <div style={{ display: 'flex' }}>
+        <StatisticCard
+          title="今日告警"
+          statistic={{
+            value: 75,
+            suffix: '次',
+          }}
+          chart={
+            <img
+              src="https://gw.alipayobjects.com/zos/alicdn/PmKfn4qvD/mubiaowancheng-lan.svg"
+              width="100%"
+              alt="进度条"
+            />
+          }
+          footer={
+            <>
+              <Statistic value={15.1} title="当月告警" suffix="次" layout="horizontal" />
+            </>
+          }
+          style={{ width: '24%', marginRight: '5px' }}
+        />
+        <StatisticCard
+          statistic={{
+            title: '告警配置',
+            value: 2176,
+            icon: (
+              <img
+                style={imgStyle}
+                src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*dr_0RKvVzVwAAAAAAAAAAABkARQnAQ"
+                alt="icon"
+              />
+            ),
+          }}
+          style={{ width: '25%', marginRight: '5px' }}
+          footer={
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <Statistic value={76} title="正常" suffix="次" layout="horizontal" />
+              <Statistic value={76} title="禁用" suffix="次" layout="horizontal" />
+            </div>
+          }
+        />
+        <div style={{ width: '50%' }}>
+          <StatisticCard
+            title="最新告警"
+            statistic={{
+              // title: '最新告警'
+              value: undefined,
+            }}
+            chart={
+              <ul>
+                {[
+                  {
+                    dateTime: '2022-01-01 00:00:00',
+                    name: '一楼烟感告警',
+                    product: '产品',
+                    level: '1极告警',
+                  },
+                  {
+                    dateTime: '2022-01-01 00:00:00',
+                    name: '一楼烟感告警',
+                    product: '产品',
+                    level: '1极告警',
+                  },
+                  {
+                    dateTime: '2022-01-01 00:00:00',
+                    name: '一楼烟感告警',
+                    product: '产品',
+                    level: '1极告警',
+                  },
+                  {
+                    dateTime: '2022-01-01 00:00:00',
+                    name: '一楼烟感告警',
+                    product: '产品',
+                    level: '1极告警',
+                  },
+                ].map((item) => (
+                  <li>
+                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                      <div>{item.dateTime}</div>
+                      <div>{item.name}</div>
+                      <div>{item.product}</div>
+                      <div>{item.level}</div>
+                      {JSON.stringify(state)}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            }
+          />
+        </div>
+      </div>
+      <Card style={{ marginTop: 10 }}>
+        <div
+          // className={classNames(Style['dash-board-echarts'], className)}
+          style={{
+            height: 200,
+          }}
+        >
+          <Header
+            title={'告警统计'}
+            extraParams={{
+              key: 'test',
+              Children: (
+                <Select
+                  options={[
+                    { label: '设备', value: 'device' },
+                    { label: '产品', value: 'product' },
+                  ]}
+                ></Select>
+              ),
+            }}
+            onParamsChange={getEcharts}
+          />
+          <Echarts options={options} />
+        </div>
+      </Card>
+    </PageContainer>
+  );
+});
+export default Dashboard;

src/pages/rule-engine/DashBoard/service.ts

@@ -0,0 +1,24 @@
+import { request } from '@@/plugin-request/request';
+import SystemConst from '@/utils/const';
+
+class Service {
+  dashboard = (data: Record<string, any>[]) =>
+    request(`/${SystemConst.API_BASE}/dashboard/_multi`, {
+      method: 'POST',
+      data,
+    });
+
+  getAlarm = (params: Record<string, any>) =>
+    request(`/${SystemConst.API_BASE}/alarm/record/_query`, {
+      method: 'GET',
+      params,
+    });
+
+  getAlarmConfigCount = (data: Record<string, any>) =>
+    request(`/${SystemConst.API_BASE}/alarm/config/_count`, {
+      method: 'POST',
+      data,
+    });
+}
+
+export default Service;