feat(device): device status

src/hooks/websocket/useSendWebsocketMessage.ts

@@ -60,6 +60,7 @@ export const useSendWebsocketMessage = () => {
     topic: string,
     parameter: Record<string, any>,
   ): Observable<any> => {
+    console.log(parameter, 'par');
     return new Observable((subscriber) => {
       if (!subscribeList[id]) {
         subscribeList[id] = [];
@@ -69,7 +70,11 @@ export const useSendWebsocketMessage = () => {
         complete: () => subscriber.complete(),
       });
       const message = JSON.stringify({ id, topic, parameter, type: MsgType.sub });
-      sendMessage?.(message);
+      if (sendMessage) {
+        sendMessage(message);
+      } else {
+        console.error('sendMessage错误');
+      }
       return () => {
         const unsub = JSON.stringify({ id, type: MsgType.unsub });
         delete subscribeList[id];

src/pages/Analysis/MessageChart/index.tsx

@@ -2,7 +2,7 @@ import { Column } from '@ant-design/charts';
 import moment from 'moment';
 import { useEffect } from 'react';
 import { service } from '@/pages/Analysis';
-import { ColumnConfig } from '@ant-design/plots/es/components/column';
+import type { ColumnConfig } from '@ant-design/plots/es/components/column';
 
 const calculationDate = () => {
   const dd = new Date();

src/pages/device/Instance/Detail/Running/Property.tsx

@@ -2,6 +2,7 @@ import { SyncOutlined } from '@ant-design/icons';
 import { message } from 'antd';
 import ProCard from '@ant-design/pro-card';
 import type { PropertyMetadata } from '@/pages/device/Product/typings';
+import { Line } from '@ant-design/charts';
 
 interface Props {
   data: Partial<PropertyMetadata>;
@@ -18,7 +19,20 @@ const Property = (props: Props) => {
       headerBordered
       colSpan={{ xs: 12, sm: 8, md: 6, lg: 6, xl: 6 }}
     >
-      <div style={{ height: 60 }}>{`${data.name}-属性`}</div>
+      <Line
+        height={60}
+        xField="key"
+        yField="value"
+        xAxis={false}
+        yAxis={false}
+        data={[
+          { key: 1, value: 12 },
+          { key: 2, value: 22 },
+          { key: 3, value: 32 },
+          { key: 4, value: 22 },
+          { key: 5, value: 12 },
+        ]}
+      />
     </ProCard>
   );
 };

src/pages/device/Instance/Detail/Running/index.tsx

@@ -1,11 +1,12 @@
-import { InstanceModel } from '@/pages/device/Instance';
+import { InstanceModel, service } from '@/pages/device/Instance';
 import { Badge, Card, Col, Row } from 'antd';
 import type { DeviceMetadata } from '@/pages/device/Product/typings';
 import { useIntl } from '@@/plugin-locale/localeExports';
-// import useSendWebsocketMessage from "@/hooks/websocket/useSendWebsocketMessage";
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import Property from '@/pages/device/Instance/Detail/Running/Property';
 import Event from '@/pages/device/Instance/Detail/Running/Event';
+import useSendWebsocketMessage from '@/hooks/websocket/useSendWebsocketMessage';
+import { map } from 'rxjs/operators';
 
 const ColResponsiveProps = {
   xs: 24,
@@ -20,7 +21,7 @@ const Running = () => {
   const metadata = JSON.parse(InstanceModel.detail.metadata as string) as DeviceMetadata;
 
   const device = InstanceModel.detail;
-  // const [subscribeTopic] = useSendWebsocketMessage();
+  const [subscribeTopic] = useSendWebsocketMessage();
 
   const addObserver = (item: Record<string, any>) => {
     item.listener = [];
@@ -35,15 +36,58 @@ const Running = () => {
     return item;
   };
 
+  const [propertiesList, setPropertiesList] = useState<string[]>([]);
   // const eventWS = {
   //   id: `instance-info-event-${device.id}-${device.productId}`,
   //   topic: `/dashboard/device/${device.productId}/events/realTime`,
   // }
-  // const propertyWs = {
-  //   // id: `instance-info-property-${device.id}-${device.productId}-${propertiesList.join('-')}`,
-  //   topic: `/dashboard/device/${device.productId}/properties/realTime`,
-  // }
+  useEffect(() => {
+    const list = metadata.properties.map((item: any) => item.id);
+    setPropertiesList(list);
+  }, []);
+  const propertyWs = {
+    id: `instance-info-property-${device.id}-${device.productId}-${propertiesList.join('-')}`,
+    topic: `/dashboard/device/${device.productId}/properties/realTime`,
+  };
+
+  const getProperty = () => {
+    subscribeTopic!(propertyWs.id, propertyWs.topic, {
+      deviceId: device.id,
+      properties: propertiesList,
+      history: 0,
+    })
+      ?.pipe(map((res) => res.result))
+      .subscribe((resp: any) => {
+        console.log(resp, 'resp');
+      });
+  };
+
+  const getDashboard = () => {
+    const params = [
+      {
+        dashboard: 'device',
+        object: device.productId,
+        measurement: 'properties',
+        dimension: 'history',
+        params: {
+          deviceId: device.id,
+          history: 15,
+          properties: propertiesList,
+        },
+      },
+    ];
 
+    service.propertyRealTime(params).subscribe((data) => {
+      const index = metadata.properties.findIndex((i) => i.id === data.property);
+      if (index > -1) {
+        metadata.properties[index].list = data.list as any;
+      }
+    });
+  };
+  useEffect(() => {
+    getProperty();
+    getDashboard();
+  }, []);
   metadata.events = metadata.events.map(addObserver);
   metadata.properties = metadata.properties.map(addObserver);
 

src/pages/device/Instance/service.ts

@@ -1,7 +1,9 @@
 import BaseService from '@/utils/BaseService';
 import { request } from 'umi';
-import type { DeviceInstance } from '@/pages/device/Instance/typings';
+import type { DeviceInstance, PropertyData } from '@/pages/device/Instance/typings';
 import SystemConst from '@/utils/const';
+import { defer, from, mergeMap, toArray } from 'rxjs';
+import { filter, groupBy, map } from 'rxjs/operators';
 
 class Service extends BaseService<DeviceInstance> {
   public detail = (id: string) => request(`${this.uri}/${id}/detail`, { method: 'GET' });
@@ -10,6 +12,32 @@ class Service extends BaseService<DeviceInstance> {
     request(`${this.uri}/${id}/config-metadata`, { method: 'GET' });
 
   public getUnits = () => request(`/${SystemConst.API_BASE}/protocol/units`, { method: 'GET' });
+
+  public propertyRealTime = (data: Record<string, unknown>[]) =>
+    defer(() =>
+      from(
+        request(`/${SystemConst.API_BASE}/dashboard/_multi`, {
+          method: 'POST',
+          data,
+        }),
+      ).pipe(
+        filter((resp) => resp.status === 200),
+        map((resp) => resp.result),
+        mergeMap((temp: PropertyData[]) => from(temp)),
+        map((item) => ({
+          timeString: item.data.timeString,
+          timestamp: item.data.timestamp,
+          ...item.data.value,
+        })),
+        groupBy((group$) => group$.property),
+        mergeMap((group) => group.pipe(toArray())),
+        map((arr) => ({
+          list: arr.sort((a, b) => a.timestamp - b.timestamp),
+          property: arr[0].property,
+        })),
+        // toArray()
+      ),
+    );
 }
 
 export default Service;

src/pages/device/Instance/typings.d.ts

@@ -47,3 +47,19 @@ type Unit = {
   value: string;
   description: string;
 };
+
+type PropertyData = {
+  data: {
+    value?:
+      | {
+          formatValue: string;
+          property: string;
+          value: any;
+        }
+      | any;
+    timeString: string;
+    timestamp: number;
+    formatValue: string;
+    property: string;
+  };
+};

src/pages/device/Product/typings.d.ts

@@ -95,6 +95,14 @@ type PropertyMetadata = {
   } & Record<any, any>;
   expands: Record<string, any>;
   description?: string;
+  // 运行状态处需要数据
+  list?: {
+    timeString: string;
+    timestamp: number;
+    formatValue: string;
+    property: string;
+    value: number;
+  } & Record<string, unknown>;
 };
 type TagMetadata = {
   id: string;