fix: dashboard

src/pages/device/DashBoard/index.less

@@ -1,8 +1,11 @@
-.media-dash-board {
+.device-dash-board {
   .top-card-items {
     margin-bottom: 12px;
 
     .top-card-item {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
       width: 25%;
       padding: 6px 24px;
       border: 1px solid #e3e3e3;
@@ -19,6 +22,15 @@
           .top-card-total {
             font-weight: bold;
             font-size: 20px;
+            line-height: 50px;
+          }
+        }
+        .top-card-top-charts {
+          display: flex;
+          flex-direction: column;
+          .top-card-top-charts-total {
+            font-weight: bold;
+            font-size: 18px;
           }
         }
       }

src/pages/device/DashBoard/index.tsx

@@ -5,33 +5,64 @@ import './index.less';
 import Service from './service';
 import encodeQuery from '@/utils/encodeQuery';
 import { useRequest } from 'umi';
+import DashBoard from '@/components/DashBoard';
+import type { EChartsOption } from 'echarts';
+import Echarts from '@/components/DashBoard/echarts';
 
 interface TopCardProps {
-  url?: string;
   isEcharts: boolean;
   title: string;
-  total: number | string;
+  total?: number | string;
+  topRender?: any;
   bottomRender: () => React.ReactNode;
 }
 const service = new Service('device/instance');
 const TopCard = (props: TopCardProps) => {
   return (
     <div className={'top-card-item'}>
-      <div className={'top-card-top'}>
-        {!props.isEcharts && <div className={'top-card-top-left'}></div>}
-        <div className={'top-card-top-right'}>
-          <div className={'top-card-title'}>{props.title}</div>
-          <div className={'top-card-total'}>{props.total}</div>
+      {props.isEcharts ? (
+        <div className={'top-card-top'}>
+          <div className={'top-card-top-charts'}>
+            <div>{props.title}</div>
+            <div className={'top-card-top-charts-total'}>{props.total}</div>
+            <div style={{ height: 40 }}>{props.topRender}</div>
+          </div>
         </div>
-      </div>
+      ) : (
+        <div className={'top-card-top'}>
+          <div className={'top-card-top-left'}></div>
+          <div className={'top-card-top-right'}>
+            <div className={'top-card-title'}>{props.title}</div>
+            <div className={'top-card-total'}>{props.total}</div>
+          </div>
+        </div>
+      )}
+
       <div className={'top-card-bottom'}>{props.bottomRender()}</div>
     </div>
   );
 };
 
-const DashBoard = () => {
+const DeviceBoard = () => {
   const [deviceOnline, setDeviceOnline] = useState(0);
   const [deviceOffline, setDeviceOffline] = useState(0);
+  const [options, setOptions] = useState<EChartsOption>({
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: 'line',
+        areaStyle: {},
+      },
+    ],
+  });
 
   const { data: deviceTotal } = useRequest(service.deviceCount, {
     formatResult: (res) => res.result,
@@ -48,13 +79,37 @@ const DashBoard = () => {
       setDeviceOffline(offlineRes.result);
     }
   };
+
+  const getEcharts = async (params: any) => {
+    // 请求数据
+    console.log(params);
+
+    setOptions({
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [
+        {
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+          type: 'line',
+          areaStyle: {},
+        },
+      ],
+    });
+  };
+
   useEffect(() => {
     deviceStatus();
   }, []);
 
   return (
     <PageContainer>
-      <div className={'media-dash-board'}>
+      <div className={'device-dash-board'}>
         <Card className={'top-card-items'} bodyStyle={{ display: 'flex', gap: 12 }}>
           <TopCard
             title={'产品数量'}
@@ -83,19 +138,34 @@ const DashBoard = () => {
           />
           <TopCard
             title={'当前在线'}
-            total={1}
+            total={22}
             isEcharts={true}
+            topRender={
+              <div style={{ height: 50 }}>
+                <Echarts options={options} />
+              </div>
+            }
             bottomRender={() => <>昨日在线： </>}
           />
           <TopCard
             title={'今日设备消息量'}
-            total={1}
+            total={2221}
             isEcharts={true}
             bottomRender={() => <>当月设备消息量： </>}
           />
         </Card>
+        <DashBoard
+          title={'设备消息'}
+          options={options}
+          height={500}
+          initialValues={{
+            test: '2',
+          }}
+          onParamsChange={getEcharts}
+        />
+        {/* <Echarts options={options} /> */}
       </div>
     </PageContainer>
   );
 };
-export default DashBoard;
+export default DeviceBoard;