feat(instance): device instance detail

src/locales/en-US/menu.ts

@@ -15,6 +15,7 @@ export default {
   'menu.device.product': 'Product',
   'menu.device.product-detail': 'ProductDetail',
   'menu.device.instance': 'Instance',
+  'menu.device.instance-detail': 'InstanceDetail',
   'menu.device.command': 'Command',
   'menu.device.firmware': 'Firmware',
   'menu.device.alarm': 'Alarm',

src/locales/zh-CN/menu.ts

@@ -14,6 +14,7 @@ export default {
   'menu.device.product': '产品',
   'menu.device.product-detail': '产品详情',
   'menu.device.instance': '设备',
+  'menu.device.instance-detail': '设备详情',
   'menu.device.command': '指令下发',
   'menu.device.firmware': '固件升级',
   'menu.device.alarm': '告警记录',

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

@@ -0,0 +1,4 @@
+const Alarm = () => {
+  return <div>告警设置</div>;
+};
+export default Alarm;

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

@@ -0,0 +1,23 @@
+import { Card, Divider } from 'antd';
+import { InstanceModel, service } from '@/pages/device/Instance';
+import { useEffect } from 'react';
+import { observer } from '@formily/react';
+
+const Config = observer(() => {
+  useEffect(() => {
+    if (InstanceModel.current?.id) {
+      service.getConfigMetadata(InstanceModel.current.id).then((response) => {
+        InstanceModel.config = response?.result;
+      });
+    }
+  }, []);
+  return (
+    <>
+      <Card title="配置">{JSON.stringify(InstanceModel.config)}</Card>
+      <Divider />
+      <Card title="标签">{JSON.stringify(InstanceModel.detail.tags)}</Card>
+    </>
+  );
+});
+
+export default Config;

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

@@ -0,0 +1,4 @@
+const Functions = () => {
+  return <div>设备功能</div>;
+};
+export default Functions;

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

@@ -0,0 +1,28 @@
+import { Descriptions } from 'antd';
+import { InstanceModel } from '@/pages/device/Instance';
+import moment from 'moment';
+
+const Info = () => {
+  return (
+    <>
+      <Descriptions size="small" column={3}>
+        <Descriptions.Item label="设备ID">{InstanceModel.detail?.id}</Descriptions.Item>
+        <Descriptions.Item label="产品名称">{InstanceModel.detail?.name}</Descriptions.Item>
+        <Descriptions.Item label="设备类型">
+          {InstanceModel.detail?.deviceType?.text}
+        </Descriptions.Item>
+        <Descriptions.Item label="链接协议">{InstanceModel.detail?.protocolName}</Descriptions.Item>
+        <Descriptions.Item label="消息协议">{InstanceModel.detail?.transport}</Descriptions.Item>
+        <Descriptions.Item label="创建时间">
+          {moment(InstanceModel.detail?.createTime).format('YYYY-MM-DD HH:mm:ss')}
+        </Descriptions.Item>
+        <Descriptions.Item label="注册时间">{InstanceModel.detail?.createTime}</Descriptions.Item>
+        <Descriptions.Item label="最后上线时间">
+          {InstanceModel.detail?.createTime}
+        </Descriptions.Item>
+        <Descriptions.Item label="说明">{InstanceModel.detail?.description}</Descriptions.Item>
+      </Descriptions>
+    </>
+  );
+};
+export default Info;

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

@@ -0,0 +1,4 @@
+const Log = () => {
+  return <div>日志管理</div>;
+};
+export default Log;

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

@@ -0,0 +1,7 @@
+import { observer } from '@formily/react';
+import { InstanceModel } from '@/pages/device/Instance';
+
+const Metadata = observer(() => {
+  return <div>{JSON.stringify(JSON.parse(InstanceModel.detail.metadata as string))}</div>;
+});
+export default Metadata;

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

@@ -0,0 +1,11 @@
+import { InstanceModel } from '@/pages/device/Instance';
+
+const Running = () => {
+  return (
+    <div>
+      运行状态
+      {JSON.stringify(JSON.parse(InstanceModel.detail.metadata as string))}
+    </div>
+  );
+};
+export default Running;

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

@@ -1,70 +1,82 @@
 import { PageContainer } from '@ant-design/pro-layout';
-import { InstanceModel } from '@/pages/device/Instance';
+import { InstanceModel, service } from '@/pages/device/Instance';
 import { history } from 'umi';
-import { Button, Descriptions } from 'antd';
+import { Button } from 'antd';
 import { useEffect, useState } from 'react';
 import { statusMap } from '@/pages/device/Product';
+import { observer } from '@formily/react';
+import Config from '@/pages/device/Instance/Detail/Config';
+import Metadata from '@/pages/device/Instance/Detail/Metadata';
+import Log from '@/pages/device/Instance/Detail/Log';
+import Alarm from '@/pages/device/Instance/Detail/Alarm';
+import Info from '@/pages/device/Instance/Detail/Info';
+import Functions from '@/pages/device/Instance/Detail/Functions';
+import Running from '@/pages/device/Instance/Detail/Running';
 
-const InstanceDetail = () => {
+const list = [
+  {
+    key: 'detail',
+    tab: '实例信息',
+    component: <Config />,
+  },
+  {
+    key: 'running',
+    tab: '运行状态',
+    component: <Running />,
+  },
+  {
+    key: 'metadata',
+    tab: '物模型',
+    component: <Metadata />,
+  },
+  {
+    key: 'functions',
+    tab: '设备功能',
+    component: <Functions />,
+  },
+  {
+    key: 'log',
+    tab: '日志管理',
+    component: <Log />,
+  },
+  {
+    key: 'alarm',
+    tab: '告警设置',
+    component: <Alarm />,
+  },
+  {
+    key: 'visualization',
+    tab: '可视化',
+    component: null,
+  },
+  {
+    key: 'shadow',
+    tab: '设备影子',
+    component: null,
+  },
+];
+const InstanceDetail = observer(() => {
   const [tab, setTab] = useState<string>('detail');
+  const getDetail = (id: string) => {
+    service.detail(id).then((response) => {
+      InstanceModel.detail = response?.result;
+    });
+  };
+
   useEffect(() => {
-    if (!InstanceModel.current) history.goBack();
+    if (!InstanceModel.current) {
+      history.goBack();
+    } else {
+      getDetail(InstanceModel.current?.id);
+    }
   }, []);
+
   return (
     <PageContainer
       onBack={() => history.goBack()}
       onTabChange={setTab}
-      tabList={[
-        {
-          key: 'detail',
-          tab: '实例信息',
-        },
-        {
-          key: 'metadata',
-          tab: '物模型',
-        },
-        {
-          key: 'log',
-          tab: '日志管理',
-        },
-        {
-          key: 'alarm',
-          tab: '告警设置',
-        },
-        {
-          key: 'visualization',
-          tab: '可视化',
-        },
-        {
-          key: 'shadow',
-          tab: '设备影子',
-        },
-      ]}
-      content={
-        <Descriptions size="small" column={3}>
-          <Descriptions.Item label="设备ID">{InstanceModel.current?.id}</Descriptions.Item>
-          <Descriptions.Item label="产品名称">{InstanceModel.current?.name}</Descriptions.Item>
-          <Descriptions.Item label="设备类型">
-            {InstanceModel.current?.deviceType?.text}
-          </Descriptions.Item>
-          <Descriptions.Item label="链接协议">
-            {InstanceModel.current?.protocolName}
-          </Descriptions.Item>
-          <Descriptions.Item label="消息协议">
-            {InstanceModel.current?.transportProtocol}
-          </Descriptions.Item>
-          <Descriptions.Item label="创建时间">
-            {InstanceModel.current?.createTime}
-          </Descriptions.Item>
-          <Descriptions.Item label="注册时间">
-            {InstanceModel.current?.createTime}
-          </Descriptions.Item>
-          <Descriptions.Item label="最后上线时间">
-            {InstanceModel.current?.createTime}
-          </Descriptions.Item>
-          <Descriptions.Item label="说明">{InstanceModel.current?.createTime}</Descriptions.Item>
-        </Descriptions>
-      }
+      tabList={list}
+      content={<Info />}
       extra={[
         statusMap[0],
         <Button key="2">停用</Button>,
@@ -73,9 +85,8 @@ const InstanceDetail = () => {
         </Button>,
       ]}
     >
-      设备实例{tab}
-      {JSON.stringify(InstanceModel.current)}
+      {list.find((k) => k.key === tab)?.component}
     </PageContainer>
   );
-};
+});
 export default InstanceDetail;

src/pages/device/Instance/index.tsx

@@ -5,7 +5,6 @@ import moment from 'moment';
 import { Badge, message, Popconfirm, Tooltip } from 'antd';
 import { useRef } from 'react';
 import BaseCrud from '@/components/BaseCrud';
-import BaseService from '@/utils/BaseService';
 import { Link } from 'umi';
 import {
   CloseCircleOutlined,
@@ -16,6 +15,7 @@ import {
 import { useIntl } from '@@/plugin-locale/localeExports';
 import { CurdModel } from '@/components/BaseCrud/model';
 import { model } from '@formily/reactive';
+import Service from '@/pages/device/Instance/service';
 
 const statusMap = new Map();
 statusMap.set('在线', 'success');
@@ -27,10 +27,14 @@ statusMap.set('notActive', 'processing');
 
 export const InstanceModel = model<{
   current: DeviceInstance | undefined;
+  detail: Partial<DeviceInstance>;
+  config: any;
 }>({
   current: undefined,
+  detail: {},
+  config: {},
 });
-const service = new BaseService<DeviceInstance>('device/instance');
+export const service = new Service('device/instance');
 const Instance = () => {
   const actionRef = useRef<ActionType>();
   const intl = useIntl();

src/pages/device/Instance/service.ts

@@ -0,0 +1,12 @@
+import BaseService from '@/utils/BaseService';
+import { request } from 'umi';
+import type { DeviceInstance } from '@/pages/device/Instance/typings';
+
+class Service extends BaseService<DeviceInstance> {
+  public detail = (id: string) => request(`${this.uri}/${id}/detail`, { method: 'GET' });
+
+  public getConfigMetadata = (id: string) =>
+    request(`${this.uri}/${id}/config-metadata`, { method: 'GET' });
+}
+
+export default Service;