fix: 优化设备运行状态，无数据时跳转

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

@@ -1,67 +1,16 @@
-import { Button, Card, Tabs } from 'antd';
+import { Card, Tabs } from 'antd';
 import { InstanceModel } from '@/pages/device/Instance';
 import type { FunctionMetadata } from '@/pages/device/Product/typings';
 import FnForm from './form';
 import AModel from './AdvancedMode';
-import { Empty, PermissionButton } from '@/components';
 import { useDomFullHeight } from '@/hooks';
-import { getMenuPathByParams } from '@/utils/menu';
-import useHistory from '@/hooks/route/useHistory';
+import Empty from '@/pages/device/components/Empty';
 
 const Functions = () => {
   const functionList = JSON.parse(InstanceModel.detail.metadata || '{}')
     .functions as FunctionMetadata[];
-  const history = useHistory();
 
   const { minHeight } = useDomFullHeight(`.device-detail-function`);
-  const { permission } = PermissionButton.usePermission('device/Product');
-
-  const empty = () => {
-    const isIndependent = InstanceModel.detail?.independentMetadata;
-    const path = isIndependent
-      ? getMenuPathByParams('device/Product/Detail', InstanceModel.detail?.productId)
-      : getMenuPathByParams('device/Instance/Detail', InstanceModel.detail?.id);
-
-    let description = <></>;
-    if (isIndependent) {
-      // 物模型解绑
-      if (!permission.update) {
-        description = <span>请联系管理员配置物模型属性</span>;
-      } else {
-        description = (
-          <span>
-            暂无数据, 请前往产品配置
-            <Button
-              style={{ margin: '0 6px' }}
-              type={'link'}
-              onClick={() => {
-                history.push(`${path}?key=metadata`);
-              }}
-            >
-              物模型-功能定义
-            </Button>
-          </span>
-        );
-      }
-    } else {
-      description = (
-        <span>
-          暂无数据，请配置
-          <Button
-            style={{ margin: '0 6px' }}
-            type={'link'}
-            onClick={() => {
-              history.push(`${path}?key=metadata`);
-            }}
-          >
-            物模型-功能定义
-          </Button>
-        </span>
-      );
-    }
-
-    return <Empty description={description} />;
-  };
 
   return (
     <Card className={'device-detail-function'} style={{ minHeight: minHeight }}>
@@ -93,7 +42,9 @@ const Functions = () => {
           </Tabs.TabPane>
         </Tabs>
       ) : (
-        <div style={{ height: minHeight - 150 }}>{empty()}</div>
+        <div style={{ height: minHeight - 150 }}>
+          <Empty />
+        </div>
       )}
     </Card>
   );

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

@@ -1,11 +1,11 @@
-import { Card } from 'antd';
+import { Button, Card, Empty } from 'antd';
 import { useEffect, useState } from 'react';
-import { service } from '@/pages/device/Instance';
+import { InstanceModel, service } from '@/pages/device/Instance';
 import EditableTable from './EditableTable';
 import { getMenuPathByParams, MENUS_CODE } from '@/utils/menu';
 import type { ProductItem } from '@/pages/device/Product/typings';
 import { useParams } from 'umi';
-import { PermissionButton, Empty } from '@/components';
+import { PermissionButton } from '@/components';
 import { useDomFullHeight } from '@/hooks';
 
 interface Props {
@@ -55,92 +55,94 @@ const MetadataMap = (props: Props) => {
     const dmetadata = JSON.parse(data?.metadata || '{}');
     const height = minHeight - 150;
     if (product) {
+      // 是否有物模型属性
       const flag =
         (type === 'device' &&
           (metadata?.properties || []).length === 0 &&
           (dmetadata?.properties || []).length === 0) ||
         (type === 'product' && (dmetadata?.properties || []).length === 0);
-      if (!product.accessId && flag) {
+
+      const isIndependent = InstanceModel.detail?.independentMetadata;
+      let description = undefined;
+
+      if (type === 'device' && isIndependent && flag) {
+        description = (
+          <span>
+            暂无数据，请配置
+            <Button
+              style={{ margin: 0, padding: '0 4px' }}
+              type={'link'}
+              onClick={() => {
+                InstanceModel.active = 'metadata';
+              }}
+            >
+              物模型属性
+            </Button>
+          </span>
+        );
+      } else if (!product.accessId && flag) {
         if (!permission.update) {
-          return (
-            <div style={{ height }}>
-              <Empty
-                description={<span>请联系管理员配置物模型属性，并选择对应产品的设备接入方式</span>}
-              />
-            </div>
-          );
+          description = <span>请联系管理员配置物模型属性，并选择对应产品的设备接入方式</span>;
         } else {
-          return (
-            <div style={{ height }}>
-              <Empty
-                description={
-                  <span>
-                    请先配置对应产品的
-                    <a
-                      onClick={() => {
-                        checkUrl('metadata');
-                      }}
-                    >
-                      物模型属性
-                    </a>
-                    ,并选择对应产品的
-                    <a
-                      onClick={() => {
-                        checkUrl('access');
-                      }}
-                    >
-                      设备接入方式
-                    </a>
-                  </span>
-                }
-              />
-            </div>
+          description = (
+            <span>
+              请先配置对应产品的
+              <a
+                onClick={() => {
+                  checkUrl('metadata');
+                }}
+              >
+                物模型属性
+              </a>
+              ,并选择对应产品的
+              <a
+                onClick={() => {
+                  checkUrl('access');
+                }}
+              >
+                设备接入方式
+              </a>
+            </span>
           );
         }
       } else if (flag && product.accessId) {
-        return (
-          <div style={{ height }}>
-            <Empty
-              description={
-                !permission.update ? (
-                  <span>请联系管理员配置物模型属性</span>
-                ) : (
-                  <span>
-                    请配置对应产品的
-                    <a
-                      onClick={() => {
-                        checkUrl('metadata');
-                      }}
-                    >
-                      物模型属性
-                    </a>
-                  </span>
-                )
-              }
-            />
-          </div>
+        description = !permission.update ? (
+          <span>请联系管理员配置物模型属性</span>
+        ) : (
+          <span>
+            请配置对应产品的
+            <a
+              onClick={() => {
+                checkUrl('metadata');
+              }}
+            >
+              物模型属性
+            </a>
+          </span>
         );
       } else if (!flag && !product.accessId) {
+        description = (
+          <span>
+            请选择对应产品的
+            <a
+              onClick={() => {
+                checkUrl('access');
+              }}
+            >
+              设备接入方式
+            </a>
+          </span>
+        );
+      }
+
+      if (!description) {
+        return <EditableTable data={data} type={type} />;
+      } else {
         return (
           <div style={{ height }}>
-            <Empty
-              description={
-                <span>
-                  请选择对应产品的
-                  <a
-                    onClick={() => {
-                      checkUrl('access');
-                    }}
-                  >
-                    设备接入方式
-                  </a>
-                </span>
-              }
-            />
+            <Empty description={description} />
           </div>
         );
-      } else {
-        return <EditableTable data={data} type={type} />;
       }
     }
     return (

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

@@ -1,13 +1,16 @@
 import { InstanceModel } from '@/pages/device/Instance';
-import { Card, Empty, Input, Tabs } from 'antd';
+import { Card, Input, Tabs } from 'antd';
 import type { DeviceMetadata } from '@/pages/device/Product/typings';
 import Property from '@/pages/device/Instance/Detail/Running/Property';
 import Event from '@/pages/device/Instance/Detail/Running/Event';
 import { useEffect, useState } from 'react';
+import Empty from '@/pages/device/components/Empty';
+import { useDomFullHeight } from '@/hooks';
 
 const Running = () => {
   const metadata = JSON.parse((InstanceModel.detail?.metadata || '{}') as string) as DeviceMetadata;
   const [list, setList] = useState<any[]>([]);
+  const { minHeight } = useDomFullHeight(`.device-detail-running`);
 
   useEffect(() => {
     setList(metadata?.events || []);
@@ -32,27 +35,18 @@ const Running = () => {
   );
 
   return (
-    <Card>
+    <Card className={'device-detail-running'} style={{ minHeight }}>
       {list?.length === 0 && (metadata?.properties || [])?.length === 0 ? (
         <div
           style={{
-            height: 480,
-            display: 'flex',
-            alignItems: 'center',
-            width: '100%',
-            justifyContent: 'center',
+            height: minHeight - 150,
           }}
         >
           <Empty />
         </div>
       ) : (
         <div className="tabs-full-active">
-          <Tabs
-            defaultActiveKey="1"
-            tabPosition="left"
-            style={{ minHeight: 600 }}
-            tabBarExtraContent={{ left: operations() }}
-          >
+          <Tabs defaultActiveKey="1" tabPosition="left" tabBarExtraContent={{ left: operations() }}>
             <Tabs.TabPane tab="属性" key="1">
               <Property data={metadata?.properties || []} />
             </Tabs.TabPane>

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

@@ -35,7 +35,7 @@ deviceStatus.set('notActive', <Badge status="processing" text={'未启用'} />);
 
 const InstanceDetail = observer(() => {
   const intl = useIntl();
-  const [tab, setTab] = useState<string>('detail');
+  // const [tab, setTab] = useState<string>('detail');
   const params = useParams<{ id: string }>();
   const service = new Service('device-instance');
   const { permission } = PermissionButton.usePermission('device/Instance');
@@ -224,7 +224,8 @@ const InstanceDetail = observer(() => {
     if (!InstanceModel.current && !params.id) {
       history.goBack();
     } else {
-      setTab('detail');
+      // setTab('detail');
+      InstanceModel.active = 'detail';
       getDetail(params?.id || InstanceModel.current?.id || '');
     }
     return () => {
@@ -233,9 +234,9 @@ const InstanceDetail = observer(() => {
   }, [params.id]);
 
   useEffect(() => {
-    console.log(location.query);
     if ((location as any).query?.key) {
-      setTab((location as any).query?.key || 'detail');
+      // setTab((location as any).query?.key || 'detail');
+      InstanceModel.active = (location as any).query?.key || 'detail';
     }
     const subscription = Store.subscribe(SystemConst.BASE_UPDATE_DATA, (data) => {
       if ((window as any).onTabSaveSuccess) {
@@ -249,7 +250,8 @@ const InstanceDetail = observer(() => {
   useEffect(() => {
     const { state } = location;
     if (state && state?.tab) {
-      setTab(state?.tab);
+      // setTab(state?.tab);
+      InstanceModel.active = state?.tab;
     }
   }, [location]);
 
@@ -257,9 +259,11 @@ const InstanceDetail = observer(() => {
     <PageContainer
       className={'page-title-show'}
       onBack={history.goBack}
-      onTabChange={setTab}
+      onTabChange={(e) => {
+        InstanceModel.active = e;
+      }}
       tabList={list}
-      tabActiveKey={tab}
+      tabActiveKey={InstanceModel.active}
       content={
         <Descriptions size="small" column={4}>
           <Descriptions.Item label={'ID'}>{InstanceModel.detail?.id}</Descriptions.Item>
@@ -362,7 +366,7 @@ const InstanceDetail = observer(() => {
       //   </Button>,
       // ]}
     >
-      {list.find((k) => k.key === tab)?.component}
+      {list.find((k) => k.key === InstanceModel.active)?.component}
     </PageContainer>
   );
 });

src/pages/device/Instance/index.tsx

@@ -54,6 +54,7 @@ export const InstanceModel = model<{
   detail: {},
   config: {},
   metadataItem: {},
+  active: 'detail',
   params: new Set<string>(['test']),
 });
 export const service = new Service('device-instance');

src/pages/device/components/Empty/index.tsx

@@ -0,0 +1,54 @@
+import { InstanceModel } from '@/pages/device/Instance';
+import { getMenuPathByParams } from '@/utils/menu';
+import { Button } from 'antd';
+import { Empty, PermissionButton } from '@/components';
+import useHistory from '@/hooks/route/useHistory';
+
+export default () => {
+  const isIndependent = InstanceModel.detail?.independentMetadata;
+  const path = getMenuPathByParams('device/Product/Detail', InstanceModel.detail?.productId);
+  const { permission } = PermissionButton.usePermission('device/Product');
+  const history = useHistory();
+
+  let description = <></>;
+
+  if (!isIndependent) {
+    if (!permission.update) {
+      description = <span>请联系管理员配置物模型属性</span>;
+    } else {
+      description = (
+        <span>
+          暂无数据, 请前往产品配置
+          <Button
+            style={{ margin: 0, padding: '0 4px' }}
+            type={'link'}
+            onClick={() => {
+              history.push(`${path}?key=metadata`);
+            }}
+          >
+            物模型
+          </Button>
+        </span>
+      );
+    }
+  } else {
+    // 物模型解绑
+    description = (
+      <span>
+        暂无数据，请配置
+        <Button
+          style={{ margin: 0, padding: '0 4px' }}
+          type={'link'}
+          onClick={() => {
+            InstanceModel.active = 'metadata';
+            // history.push(`${path}?key=metadata`);
+          }}
+        >
+          物模型
+        </Button>
+      </span>
+    );
+  }
+
+  return <Empty description={description} />;
+};