feat: 设备仪表

src/pages/device/DashBoard/index.less

@@ -28,6 +28,7 @@
         .top-card-top-charts {
           display: flex;
           flex-direction: column;
+          width: 100%;
           .top-card-top-charts-total {
             font-weight: bold;
             font-size: 18px;

src/pages/device/DashBoard/index.tsx

@@ -25,7 +25,7 @@ const TopCard = (props: TopCardProps) => {
           <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 style={{ height: 45, width: '100%' }}>{props.topRender}</div>
           </div>
         </div>
       ) : (
@@ -46,27 +46,21 @@ const TopCard = (props: TopCardProps) => {
 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 [productPublish, setProductPublish] = useState(0);
+  const [productUnPublish, setProductUnPublish] = useState(0);
+  const [options, setOptions] = useState<EChartsOption>({});
+  const [onlineOptions, setOnlineOptions] = useState<EChartsOption>({});
+  const [yesterdayCount, setYesterdayCount] = useState(0);
+  const [deviceOptions, setDeviceOptions] = useState<EChartsOption>({});
+  const [month, setMonth] = useState(0);
 
   const { data: deviceTotal } = useRequest(service.deviceCount, {
     formatResult: (res) => res.result,
   });
+  const { data: productTotal } = useRequest(service.productCount, {
+    defaultParams: [{}],
+    formatResult: (res) => res.result,
+  });
 
   //设备数量
   const deviceStatus = async () => {
@@ -80,6 +74,130 @@ const DeviceBoard = () => {
     }
   };
 
+  //产品数量
+  const productStatus = async () => {
+    const pusblish = await service.productCount({
+      terms: [
+        {
+          column: 'state',
+          value: '1',
+        },
+      ],
+    });
+    if (pusblish.status === 200) {
+      setProductPublish(pusblish.result);
+    }
+    const unpublish = await service.productCount({
+      terms: [
+        {
+          column: 'state',
+          value: '0',
+        },
+      ],
+    });
+    if (unpublish.status === 200) {
+      setProductUnPublish(unpublish.result);
+    }
+  };
+
+  //当前在线
+  const getOnline = async () => {
+    const res = await service.dashboard([
+      {
+        dashboard: 'device',
+        object: 'status',
+        measurement: 'record',
+        dimension: 'aggOnline',
+        group: 'aggOnline',
+        params: {
+          state: 'online',
+          limit: 15,
+          from: 'now-15d',
+          time: '1d',
+        },
+      },
+    ]);
+    if (res.status === 200) {
+      const x = res.result.map((item: any) => item.data.timeString);
+      const y = res.result.map((item: any) => item.data.value);
+      setYesterdayCount(y?.[1]);
+      setOnlineOptions({
+        xAxis: {
+          type: 'category',
+          data: x,
+          show: false,
+        },
+        yAxis: {
+          type: 'value',
+          show: false,
+        },
+        series: [
+          {
+            data: y,
+            type: 'bar',
+          },
+        ],
+      });
+    }
+  };
+  //今日设备消息量
+  const getDevice = async () => {
+    const res = await service.dashboard([
+      {
+        dashboard: 'device',
+        object: 'message',
+        measurement: 'quantity',
+        dimension: 'agg',
+        group: 'today',
+        params: {
+          time: '1h',
+          format: 'yyyy-MM-dd HH:mm:ss',
+          limit: 24,
+          from: 'now-1d',
+        },
+      },
+      {
+        dashboard: 'device',
+        object: 'message',
+        measurement: 'quantity',
+        dimension: 'agg',
+        group: 'thisMonth',
+        params: {
+          time: '1M',
+          format: 'yyyy-MM',
+          limit: 1,
+          from: 'now-1M',
+        },
+      },
+    ]);
+    if (res.status === 200) {
+      const thisMonth = res.result.find((item: any) => item.group === 'thisMonth').data.value;
+      setMonth(thisMonth);
+      const today = res.result.filter((item: any) => item.group !== 'thisMonth');
+      const x = today.map((item: any) => item.data.timeString);
+      const y = today.map((item: any) => item.data.value);
+      setDeviceOptions({
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          show: false,
+          data: x,
+        },
+        yAxis: {
+          type: 'value',
+          show: false,
+        },
+        series: [
+          {
+            data: y,
+            type: 'line',
+            areaStyle: {},
+          },
+        ],
+      });
+    }
+  };
+
   const getEcharts = async (params: any) => {
     // 请求数据
     console.log(params);
@@ -105,6 +223,9 @@ const DeviceBoard = () => {
 
   useEffect(() => {
     deviceStatus();
+    productStatus();
+    getOnline();
+    getDevice();
   }, []);
 
   return (
@@ -113,13 +234,14 @@ const DeviceBoard = () => {
         <Card className={'top-card-items'} bodyStyle={{ display: 'flex', gap: 12 }}>
           <TopCard
             title={'产品数量'}
-            total={1}
+            total={productTotal}
             isEcharts={false}
             bottomRender={() => (
               <>
-                <Badge status="success" text="未发布" />{' '}
-                <span style={{ padding: '0 4px' }}>{1}</span>
-                <Badge status="error" text="已发布" /> <span style={{ padding: '0 4px' }}>{1}</span>
+                <Badge status="success" text="已发布" />
+                <span style={{ padding: '0 4px' }}>{productPublish}</span>
+                <Badge status="error" text="未发布" />{' '}
+                <span style={{ padding: '0 4px' }}>{productUnPublish}</span>
               </>
             )}
           />
@@ -141,17 +263,22 @@ const DeviceBoard = () => {
             total={22}
             isEcharts={true}
             topRender={
-              <div style={{ height: 50 }}>
-                <Echarts options={options} />
+              <div style={{ height: 56 }}>
+                <Echarts options={onlineOptions} />
               </div>
             }
-            bottomRender={() => <>昨日在线： </>}
+            bottomRender={() => <>昨日在线：{yesterdayCount} </>}
           />
           <TopCard
             title={'今日设备消息量'}
             total={2221}
             isEcharts={true}
-            bottomRender={() => <>当月设备消息量： </>}
+            topRender={
+              <div style={{ height: 56 }}>
+                <Echarts options={deviceOptions} />
+              </div>
+            }
+            bottomRender={() => <>当月设备消息量：{month} </>}
           />
         </Card>
         <DashBoard
@@ -163,7 +290,6 @@ const DeviceBoard = () => {
           }}
           onParamsChange={getEcharts}
         />
-        {/* <Echarts options={options} /> */}
       </div>
     </PageContainer>
   );

src/pages/device/DashBoard/service.ts

@@ -1,9 +1,20 @@
 import BaseService from '@/utils/BaseService';
 import { request } from 'umi';
 import type { DeviceInstance } from '@/pages/device/Instance/typings';
+import SystemConst from '@/utils/const';
 
 class Service extends BaseService<DeviceInstance> {
   deviceCount = (data?: any) => request(`${this.uri}/_count`, { methods: 'GET', params: data });
+  productCount = (data?: any) =>
+    request(`/${SystemConst.API_BASE}/device-product/_count`, {
+      method: 'POST',
+      data,
+    });
+  dashboard = (data?: any) =>
+    request(`/${SystemConst.API_BASE}/dashboard/_multi`, {
+      method: 'POST',
+      data,
+    });
 }
 
 export default Service;