feat(device): status layout

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

@@ -1,12 +1,12 @@
 import { Card, Divider, Empty } from 'antd';
 import { InstanceModel, service } from '@/pages/device/Instance';
 import { useEffect, useState } from 'react';
-import { createSchemaField, observer } from '@formily/react';
+import { createSchemaField } from '@formily/react';
 import type { ConfigMetadata, ConfigProperty } from '@/pages/device/Product/typings';
 import type { ISchema } from '@formily/json-schema';
 import { Form, FormGrid, FormItem, FormLayout, Input, Password, PreviewText } from '@formily/antd';
 import { createForm } from '@formily/core';
-import { history } from 'umi';
+import { history, useParams } from 'umi';
 import Tags from '@/pages/device/Instance/Detail/Config/Tags';
 
 const componentMap = {
@@ -14,13 +14,18 @@ const componentMap = {
   password: 'Password',
 };
 
-const Config = observer(() => {
+const Config = () => {
+  const params = useParams<{ id: string }>();
   useEffect(() => {
-    if (InstanceModel.current?.id) {
-      service.getConfigMetadata(InstanceModel.current.id).then((response) => {
+    console.log(params, 'parasm');
+    const id = InstanceModel.current?.id || params.id;
+    console.log(id, 'id');
+    if (id) {
+      service.getConfigMetadata(id).then((response) => {
         InstanceModel.config = response?.result;
       });
     } else {
+      console.log('推出');
       history.goBack();
     }
   }, []);
@@ -117,6 +122,6 @@ const Config = observer(() => {
       <Tags />
     </>
   );
-});
+};
 
 export default Config;

src/pages/device/Instance/Detail/Metadata/ItemDetail/index.tsx

@@ -1,5 +1,4 @@
 import { InstanceModel } from '@/pages/device/Instance';
-import { observer } from '@formily/react';
 
 import { createForm } from '@formily/core';
 import { createSchemaField } from '@formily/react';
@@ -19,7 +18,7 @@ import {
 import type { MetadataItem } from '@/pages/device/Product/typings';
 import { useIntl } from '@@/plugin-locale/localeExports';
 
-const ItemDetail = observer(() => {
+const ItemDetail = () => {
   const intl = useIntl();
   const form = createForm<MetadataItem>({
     validateFirst: true,
@@ -130,6 +129,6 @@ const ItemDetail = observer(() => {
       </Form>
     </>
   );
-});
+};
 
 export default ItemDetail;

src/pages/device/Instance/Detail/Metadata/ItemParam/index.tsx

@@ -1,4 +1,4 @@
-import { createSchemaField, observer } from '@formily/react';
+import { createSchemaField } from '@formily/react';
 import type { IFieldState } from '@formily/core';
 import { createForm, onFieldValueChange } from '@formily/core';
 import {
@@ -22,7 +22,7 @@ import ProCard from '@ant-design/pro-card';
 import { useState } from 'react';
 import { useIntl } from '@@/plugin-locale/localeExports';
 
-const ItemParam = observer(() => {
+const ItemParam = () => {
   const intl = useIntl();
   const [cardId, setCardId] = useState<string>('');
   const form = createForm({
@@ -215,5 +215,5 @@ const ItemParam = observer(() => {
       </PreviewText.Placeholder>
     </ProCard>
   );
-});
+};
 export default ItemParam;

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

@@ -1,4 +1,3 @@
-import { observer } from '@formily/react';
 import ProCard from '@ant-design/pro-card';
 import { Col, Input, Row } from 'antd';
 import { InstanceModel } from '@/pages/device/Instance';
@@ -9,7 +8,7 @@ import ItemParam from '@/pages/device/Instance/Detail/Metadata/ItemParam';
 import { useEffect } from 'react';
 import { useIntl } from '@@/plugin-locale/localeExports';
 
-const Metadata = observer(() => {
+const Metadata = () => {
   const intl = useIntl();
   const metadata = JSON.parse(InstanceModel.detail.metadata as string) as DeviceMetadata;
   useEffect(() => {
@@ -107,5 +106,5 @@ const Metadata = observer(() => {
       </ProCard.TabPane>
     </ProCard>
   );
-});
+};
 export default Metadata;

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

@@ -0,0 +1,25 @@
+import { SyncOutlined } from '@ant-design/icons';
+import { message } from 'antd';
+import ProCard from '@ant-design/pro-card';
+import type { EventMetadata } from '@/pages/device/Product/typings';
+
+interface Props {
+  data: Partial<EventMetadata>;
+}
+
+const Event = (props: Props) => {
+  const { data } = props;
+  return (
+    <ProCard
+      title={data.name}
+      extra={<SyncOutlined onClick={() => message.success('刷新')} />}
+      layout="center"
+      bordered
+      headerBordered
+      colSpan={{ xs: 12, sm: 8, md: 6, lg: 6, xl: 6 }}
+    >
+      <div style={{ height: 60 }}>{`${data.name}-事件`}</div>
+    </ProCard>
+  );
+};
+export default Event;

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

@@ -0,0 +1,25 @@
+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';
+
+interface Props {
+  data: Partial<PropertyMetadata>;
+}
+
+const Property = (props: Props) => {
+  const { data } = props;
+  return (
+    <ProCard
+      title={data.name}
+      extra={<SyncOutlined onClick={() => message.success('刷新')} />}
+      layout="center"
+      bordered
+      headerBordered
+      colSpan={{ xs: 12, sm: 8, md: 6, lg: 6, xl: 6 }}
+    >
+      <div style={{ height: 60 }}>{`${data.name}-属性`}</div>
+    </ProCard>
+  );
+};
+export default Property;

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

@@ -1,66 +1,95 @@
 import { InstanceModel } from '@/pages/device/Instance';
-import ProCard from '@ant-design/pro-card';
-import { SyncOutlined } from '@ant-design/icons';
-import { Badge, Col, message, Row } from 'antd';
+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 Property from '@/pages/device/Instance/Detail/Running/Property';
+import Event from '@/pages/device/Instance/Detail/Running/Event';
 
+const ColResponsiveProps = {
+  xs: 24,
+  sm: 12,
+  md: 12,
+  lg: 12,
+  xl: 6,
+  style: { marginBottom: 24 },
+};
 const Running = () => {
   const intl = useIntl();
   const metadata = JSON.parse(InstanceModel.detail.metadata as string) as DeviceMetadata;
+
+  const device = InstanceModel.detail;
+  // const [subscribeTopic] = useSendWebsocketMessage();
+
+  const addObserver = (item: Record<string, any>) => {
+    item.listener = [];
+    item.subscribe = (callback: () => void) => {
+      item.listener.push(callback);
+    };
+    item.next = (data: any) => {
+      item.listener.forEach((element: any) => {
+        element(data);
+      });
+    };
+    return item;
+  };
+
+  // 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`,
+  // }
+
+  metadata.events = metadata.events.map(addObserver);
+  metadata.properties = metadata.properties.map(addObserver);
+
+  const renderCard = useCallback(() => {
+    return [
+      ...metadata.properties.map((item) => (
+        <Col {...ColResponsiveProps} key={item.id}>
+          <Property data={item} />
+        </Col>
+      )),
+      ...metadata.events.map((item) => (
+        <Col {...ColResponsiveProps} key={item.id}>
+          <Event data={item} />
+        </Col>
+      )),
+    ];
+  }, [device]);
+
   return (
-    <ProCard style={{ marginTop: 8 }} gutter={[16, 16]} wrap>
-      <ProCard
-        title={intl.formatMessage({
-          id: 'pages.device.instanceDetail.running.status',
-          defaultMessage: '设备状态',
-        })}
-        extra={<SyncOutlined onClick={() => message.success('刷新')} />}
-        layout="default"
-        bordered
-        headerBordered
-        colSpan={{ xs: 12, sm: 8, md: 6, lg: 6, xl: 6 }}
-      >
-        <div style={{ height: 60 }}>
-          <Row gutter={[16, 16]}>
-            <Col span={24}>
-              <Badge status="success" text={<span style={{ fontSize: 25 }}>在线</span>} />
-            </Col>
-            <Col span={24}>
-              {intl.formatMessage({
-                id: 'pages.device.instanceDetail.running.onlineTime',
-                defaultMessage: '在线时间',
-              })}
-              : 2021-8-20 12:20:33
-            </Col>
-          </Row>
-        </div>
-      </ProCard>
-      {metadata.properties.map((item) => (
-        <ProCard
-          title={item.name}
-          extra={<SyncOutlined onClick={() => message.success('刷新')} />}
-          layout="center"
-          bordered
-          headerBordered
-          colSpan={{ xs: 12, sm: 8, md: 6, lg: 6, xl: 6 }}
+    <Row gutter={24}>
+      <Col {...ColResponsiveProps}>
+        <Card
+          title={intl.formatMessage({
+            id: 'pages.device.instanceDetail.running.status',
+            defaultMessage: '设备状态',
+          })}
         >
-          <div style={{ height: 60 }}>{`${item.name}-属性`}</div>
-        </ProCard>
-      ))}
-      {metadata.events.map((item) => (
-        <ProCard
-          title={item.name}
-          extra={<SyncOutlined onClick={() => message.success('刷新')} />}
-          layout="center"
-          bordered
-          headerBordered
-          colSpan={{ xs: 12, sm: 8, md: 6, lg: 6, xl: 6 }}
-        >
-          <div style={{ height: 60 }}>{`${item.name}-事件`}</div>
-        </ProCard>
-      ))}
-    </ProCard>
+          <div style={{ height: 60 }}>
+            <Row gutter={[16, 16]}>
+              <Col span={24}>
+                <Badge status="success" text={<span style={{ fontSize: 25 }}>在线</span>} />
+              </Col>
+              <Col span={24}>
+                {intl.formatMessage({
+                  id: 'pages.device.instanceDetail.running.onlineTime',
+                  defaultMessage: '在线时间',
+                })}
+                : 2021-8-20 12:20:33
+              </Col>
+            </Row>
+          </div>
+        </Card>
+      </Col>
+
+      {renderCard()}
+    </Row>
   );
 };
 export default Running;

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

@@ -1,6 +1,6 @@
 import { PageContainer } from '@ant-design/pro-layout';
 import { InstanceModel, service } from '@/pages/device/Instance';
-import { history } from 'umi';
+import { history, useParams } from 'umi';
 import { Button } from 'antd';
 import { useEffect, useState } from 'react';
 import { statusMap } from '@/pages/device/Product';
@@ -22,12 +22,12 @@ const InstanceDetail = observer(() => {
       InstanceModel.detail = response?.result;
     });
   };
-
+  const params = useParams<{ id: string }>();
   useEffect(() => {
-    if (!InstanceModel.current) {
+    if (!InstanceModel.current && !params.id) {
       history.goBack();
     } else {
-      getDetail(InstanceModel.current?.id);
+      getDetail(InstanceModel.current?.id || params.id);
     }
   }, []);
 

src/pages/device/Product/Detail/Alarm/Setting/index.tsx

@@ -18,7 +18,7 @@ import { useState } from 'react';
 const Setting = () => {
   const intl = useIntl();
   const param = useParams<{ id: string }>();
-  const [edit, setEdit] = useState<boolean>(true);
+  const [edit, setEdit] = useState<boolean>(false);
   const [data, setData] = useState<Record<string, unknown>>();
   const columns: ProColumns<AlarmSetting>[] = [
     {