refactor(device): device -> invoke Function

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

@@ -17,15 +17,12 @@ const componentMap = {
 const Config = () => {
   const params = useParams<{ id: string }>();
   useEffect(() => {
-    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();
     }
   }, []);

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

@@ -1,4 +1,109 @@
+import { Card } from 'antd';
+import { Submit, FormButtonGroup, Form, FormItem, Input, Select } from '@formily/antd';
+import { createSchemaField } from '@formily/react';
+import type { Field } from '@formily/core';
+import { createForm, onFieldValueChange } from '@formily/core';
+import type { ISchema } from '@formily/json-schema';
+import FMonacoEditor from '@/components/FMonacoEditor';
+import { InstanceModel, service } from '@/pages/device/Instance';
+import type { FunctionMetadata } from '@/pages/device/Product/typings';
+
 const Functions = () => {
-  return <div>设备功能</div>;
+  const functionList = JSON.parse(InstanceModel.detail.metadata || '{}')
+    .functions as FunctionMetadata[];
+  const form = createForm({
+    initialValues: {},
+    effects() {
+      onFieldValueChange('function', (field, f) => {
+        const funcId = (field as Field).value;
+        const params = functionList
+          .find((i) => i.id === funcId)
+          ?.inputs?.reduce((previousValue, currentValue) => {
+            let tip = '';
+            const type = currentValue.valueType?.type;
+            if (type === 'enum') {
+              tip = `(${currentValue.valueType.elements
+                .map((e: any) => e.text + e.value)
+                .join(';')})`;
+            } else if (type === 'date') {
+              tip = `(${currentValue.valueType.format})`;
+            }
+            previousValue[`${currentValue.id}`] = `${currentValue.name}${tip}`;
+            return previousValue;
+          }, {});
+        f.setFieldState('params', async (state) => {
+          state.loading = true;
+          state.value = JSON.stringify(params);
+          state.loading = false;
+        });
+      });
+    },
+  });
+  const SchemaField = createSchemaField({
+    components: {
+      FormItem,
+      Input,
+      Select,
+      FMonacoEditor,
+    },
+  });
+
+  const schema: ISchema = {
+    type: 'object',
+    properties: {
+      function: {
+        title: '功能列表',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        enum: functionList.map((item: any) => ({
+          label: item.name,
+          value: item.id,
+        })),
+      },
+      params: {
+        title: '参数',
+        'x-decorator': 'FormItem',
+        'x-component': 'FMonacoEditor',
+        'x-component-props': {
+          height: 200,
+          theme: 'dark',
+          language: 'json',
+          editorDidMount: (editor1: any) => {
+            editor1.onDidContentSizeChange?.(() => {
+              editor1.getAction('editor.action.formatDocument').run();
+            });
+          },
+        },
+      },
+      result: {
+        title: '结果',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input.TextArea',
+      },
+    },
+  };
+
+  const invokeFunction = async () => {
+    const values: any = await form.submit();
+
+    const id = InstanceModel.detail?.id;
+    if (!values || !id) {
+      return;
+    }
+    const response = await service.invokeFunction(id, values?.function, JSON.parse(values?.params));
+    form.setFieldState('result', (state) => {
+      state.value = response.result;
+    });
+  };
+  return (
+    <Card title="功能调试">
+      <Form form={form} layout={'vertical'}>
+        <SchemaField schema={schema} />
+        <FormButtonGroup>
+          <Submit onSubmit={invokeFunction}>提交</Submit>
+        </FormButtonGroup>
+      </Form>
+    </Card>
+  );
 };
 export default Functions;

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

@@ -76,6 +76,7 @@ const InstanceDetail = observer(() => {
       component: (
         <Card>
           <Metadata
+            type="device"
             tabAction={
               <Tooltip title="重置后将使用产品的物模型配置">
                 <Button onClick={resetMetadata}>重置操作</Button>
@@ -86,6 +87,7 @@ const InstanceDetail = observer(() => {
       ),
     },
     {
+      // 物模型中有事件信息，且设备状态是在线的情况下才显示此模块
       key: 'functions',
       tab: intl.formatMessage({
         id: 'pages.device.instanceDetail.functions',

src/pages/device/Instance/service.ts

@@ -66,6 +66,12 @@ class Service extends BaseService<DeviceInstance> {
     request(`/${SystemConst.API_BASE}/device/instance/${deviceId}/metadata`, {
       method: 'DELETE',
     });
+
+  public invokeFunction = (deviceId: string, functionId: string, data: Record<string, unknown>) =>
+    request(`/${SystemConst.API_BASE}/device/invoked/${deviceId}/function/${functionId}`, {
+      method: 'POST',
+      data,
+    });
 }
 
 export default Service;