feat: merge

src/components/DashBoard/echarts.tsx

@@ -1,24 +1,21 @@
 import { useCallback, useEffect, useRef } from 'react';
 import * as echarts from 'echarts/core';
-import type { ECharts } from 'echarts';
+import type { ECharts, EChartsOption } from 'echarts';
 import {
-  TitleComponent,
-  ToolboxComponent,
-  TooltipComponent,
   GridComponent,
   LegendComponent,
   MarkLineComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
 } from 'echarts/components';
 
-import { LineChart } from 'echarts/charts';
-import { PieChart } from 'echarts/charts';
-import { BarChart } from 'echarts/charts';
+import { BarChart, LineChart, PieChart } from 'echarts/charts';
 
 import { UniversalTransition } from 'echarts/features';
 import { CanvasRenderer } from 'echarts/renderers';
 
 import Style from './index.less';
-import type { EChartsOption } from 'echarts';
 import classNames from 'classnames';
 
 export interface EchartsProps {

src/components/DashBoard/index.less

@@ -5,6 +5,7 @@
   padding: 24px;
   background-color: #fff;
 }
+
 .header {
   display: flex;
   gap: 20px;

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

@@ -0,0 +1,38 @@
+.media-dash-board {
+  .top-card-items {
+    margin-bottom: 12px;
+
+    .top-card-item {
+      width: 25%;
+      padding: 6px 24px;
+      border: 1px solid #e3e3e3;
+
+      .top-card-top {
+        display: flex;
+        padding: 12px 0;
+
+        .top-card-top-left {
+          width: 80px;
+        }
+
+        .top-card-top-right {
+          .top-card-total {
+            font-weight: bold;
+            font-size: 20px;
+          }
+        }
+      }
+
+      .top-card-bottom {
+        display: flex;
+        justify-content: space-between;
+        padding: 12px 0;
+        border-top: 1px solid #e3e3e3;
+      }
+    }
+  }
+
+  .media-dash-board-body {
+    border: 1px solid #f0f0f0;
+  }
+}

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

@@ -0,0 +1,160 @@
+import { PageContainer } from '@ant-design/pro-layout';
+import { EChartsOption } from 'echarts';
+import { 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';
+
+const imgStyle = {
+  display: 'block',
+  width: 42,
+  height: 42,
+};
+
+const Dashboard = () => {
+  const [options, setOptions] = useState<EChartsOption>({});
+
+  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>
+                    </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/index.tsx

@@ -1,37 +0,0 @@
-import { PageContainer } from '@ant-design/pro-layout';
-// import {EChartsOption} from "echarts";
-// import {useState} from "react";
-
-const Dashboard = () => {
-  // const [options, setOptions] = useState<EChartsOption>({});
-  //
-  // const getEcharts = async (data: any) => {
-  //
-  // };
-  return (
-    <PageContainer>
-      123
-      {/*<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: 250}}*/}
-      {/*/>*/}
-    </PageContainer>
-  );
-};
-export default Dashboard;

src/pages/system/DataSource/Management/DataRow.tsx

@@ -1,4 +1,4 @@
-import { Form, FormGrid, FormItem, Input, Password, NumberPicker, Radio } from '@formily/antd';
+import { Form, FormGrid, FormItem, Input, NumberPicker, Password, Radio } from '@formily/antd';
 import { createForm } from '@formily/core';
 import type { ISchema } from '@formily/react';
 import { createSchemaField } from '@formily/react';

src/pages/system/DataSource/Management/EditTable.tsx

@@ -1,4 +1,4 @@
-import { FormItem, Input, ArrayTable, Editable, Form, NumberPicker, Radio } from '@formily/antd';
+import { ArrayTable, Editable, Form, FormItem, Input, NumberPicker, Radio } from '@formily/antd';
 import { createForm } from '@formily/core';
 import { createSchemaField } from '@formily/react';
 import { Button } from 'antd';

src/pages/system/DataSource/Management/index copy.tsx

@@ -4,11 +4,11 @@ import { useEffect, useRef, useState } from 'react';
 import { service } from '@/pages/system/DataSource';
 import { useIntl, useLocation } from 'umi';
 import type { ActionType, ProColumns } from '@jetlinks/pro-table';
+import ProTable from '@jetlinks/pro-table';
 import PermissionButton from '@/components/PermissionButton';
 import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
 import usePermissions from '@/hooks/permission';
 import SearchComponent from '@/components/SearchComponent';
-import ProTable from '@jetlinks/pro-table';
 import DataTable from './DataTable';
 import styles from './index.less';
 import DataRow from './DataRow';

src/pages/system/DataSource/Management/index.less

@@ -6,6 +6,7 @@
 
   .left {
     width: 280px;
+
     .tables {
       :global {
         .ant-tree-treenode .ant-tree-node-selected {