fix(alarm): alarm trigger

src/pages/rule-engine/Scene/Save/index.tsx

@@ -1,7 +1,7 @@
 import { PageContainer } from '@ant-design/pro-layout';
 import { Button, Card, Form, Input } from 'antd';
 import { useLocation } from 'umi';
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { PermissionButton } from '@/components';
 import ActionItems from './action/action';
 import { PlusOutlined } from '@ant-design/icons';
@@ -11,6 +11,7 @@ import TriggerTerm from '@/pages/rule-engine/Scene/TriggerTerm';
 export default () => {
   const location = useLocation();
   const [form] = Form.useForm();
+  const triggerRef = useRef<any>();
 
   const { getOtherPermission } = PermissionButton.usePermission('rule-engine/Scene');
 
@@ -28,9 +29,60 @@ export default () => {
 
   const saveData = async () => {
     const formData = await form.validateFields();
+    // 获取触发条件数据
+    const triggerData = await triggerRef.current.getTriggerForm();
+    console.log(JSON.stringify(triggerData), 'trigger');
     console.log(formData);
   };
 
+  const [triggerValue, setTriggerValue] = useState<any>();
+  const requestParams = {
+    trigger: {
+      type: 'device',
+      device: {
+        productId: '0412-zj',
+        selector: 'device',
+        selectorValue: [
+          {
+            id: '0412-zj',
+            name: '0412-zj',
+          },
+        ],
+        operation: {
+          operator: 'reportProperty',
+          timer: {
+            trigger: 'week',
+            cron: '',
+            when: [1, 3, 5],
+            mod: 'period',
+            period: {
+              from: '09:30',
+              to: '14:30',
+              every: 1,
+              unit: 'hours',
+            },
+            once: {
+              time: '',
+            },
+          },
+          eventId: '',
+          readProperties: ['temparature', 'temperature-k', 'test-zhibioa'],
+          writeProperties: {},
+          functionId: '',
+          functionParameters: [
+            {
+              name: '',
+              value: {},
+            },
+          ],
+        },
+        defaultVariable: [],
+      },
+      timer: {},
+      defaultVariable: [],
+    },
+  };
+
   return (
     <PageContainer>
       <Card>
@@ -69,9 +121,44 @@ export default () => {
         <PermissionButton isPermission={getOtherPermission(['add', 'update'])} onClick={saveData}>
           保存
         </PermissionButton>
+        <Button
+          onClick={() => {
+            setTriggerValue({
+              trigger: [
+                {
+                  terms: [
+                    {
+                      column: '_now',
+                      termType: 'eq',
+                      source: 'manual',
+                      value: '2022-04-21 14:26:04',
+                    },
+                  ],
+                },
+                {
+                  terms: [
+                    {
+                      column: 'properties.test-zhibioa.recent',
+                      termType: 'lte',
+                      source: 'metrics',
+                      value: '123',
+                    },
+                  ],
+                },
+              ],
+            });
+          }}
+        >
+          设置
+        </Button>
       </Card>
       <Card>
-        <TriggerTerm />
+        <TriggerTerm
+          ref={triggerRef}
+          params={requestParams}
+          value={triggerValue}
+          onChange={console.log}
+        />
       </Card>
     </PageContainer>
   );

src/pages/rule-engine/Scene/TriggerTerm/index.tsx

@@ -2,22 +2,128 @@ import { createSchemaField } from '@formily/react';
 import {
   ArrayCards,
   ArrayItems,
+  DatePicker,
   Form,
   FormGrid,
   FormItem,
   Input,
+  NumberPicker,
   Select,
   Space,
+  Switch,
+  TreeSelect,
 } from '@formily/antd';
 import { ISchema } from '@formily/json-schema';
-import { createForm } from '@formily/core';
-import { useMemo } from 'react';
+import { createForm, onFieldValueChange } from '@formily/core';
+import { forwardRef, useImperativeHandle, useMemo } from 'react';
 import FTermArrayCards from '@/components/FTermArrayCards';
 import FTermTypeSelect from '@/components/FTermTypeSelect';
 import styles from './index.less';
+import Service from '@/pages/rule-engine/Scene/service';
+import { useAsyncDataSource } from '@/utils/util';
+import { Store } from 'jetlinks-store';
+import { treeFilter } from '@/utils/tree';
 
-const TriggerTerm = () => {
-  const form = useMemo(() => createForm({}), []);
+const service = new Service('scene');
+
+interface Props {
+  // 查询下拉框的参数
+  params: Record<string, any>;
+  value?: Record<string, any>;
+  onChange?: (value: any) => void;
+}
+
+const TriggerTerm = (props: Props, ref: any) => {
+  const form = useMemo(
+    () =>
+      createForm({
+        validateFirst: true,
+        initialValues: props.value,
+        effects() {
+          onFieldValueChange('trigger.*.terms.*.column', (field, form1) => {
+            const operator = field.query('.termType');
+            // 找到选中的
+            const _data = Store.get('trigger-parse-term');
+            // 树形搜索
+            const treeValue = treeFilter(_data, field.value, 'column');
+            // 找到
+            const target =
+              treeValue && treeValue[0].children
+                ? treeValue[0]?.children.find((item) => item.column === field.value)
+                : treeValue[0];
+
+            form1.setFieldState(operator, (state) => {
+              state.dataSource = target?.termTypes?.map((item: any) => ({
+                label: item.name,
+                value: item.id,
+              }));
+            });
+            form1.setFieldState(field.query('.source'), (state) => {
+              state.dataSource =
+                target && target.metrics && target.metrics.length > 0
+                  ? [
+                      { label: '手动输入', value: 'manual' },
+                      { label: '指标', value: 'metrics' },
+                    ]
+                  : [{ label: '手动输入', value: 'manual' }];
+            });
+          });
+          onFieldValueChange('trigger.*.terms.*.source', (field, form1) => {
+            const params = field.query('.column').value();
+            const value = field.query('.value');
+            // 找到选中的
+            const _data = Store.get('trigger-parse-term');
+            // 树形搜索
+            const treeValue = treeFilter(_data, params, 'column');
+            // 找到
+            const target =
+              treeValue && treeValue[0].children
+                ? treeValue[0]?.children.find((item) => item.column === params)
+                : treeValue[0];
+
+            if (target) {
+              if (field.value === 'manual') {
+                // 手动输入
+                const valueType = target.dataType;
+
+                const valueTypeMap = {
+                  int: NumberPicker,
+                  float: NumberPicker,
+                  double: NumberPicker,
+                  long: NumberPicker,
+                  string: Input,
+                  date: DatePicker,
+                  boolean: Switch,
+                };
+
+                form1.setFieldState(value, (state) => {
+                  state.componentType = valueTypeMap[valueType];
+                  if (valueType === 'date') {
+                    state.componentProps = {
+                      showTime: true,
+                    };
+                  }
+                });
+              } else if (field.value === 'metrics') {
+                // 指标
+                form1.setFieldState(value, (state) => {
+                  state.componentType = Select;
+                  state.dataSource = target?.metrics.map((item: any) => ({
+                    label: item.name,
+                    value: item.id,
+                  }));
+                });
+              }
+            }
+          });
+        },
+      }),
+    [props.value],
+  );
+
+  useImperativeHandle(ref, () => ({
+    getTriggerForm: () => form.submit(),
+  }));
   const SchemaField = createSchemaField({
     components: {
       FormItem,
@@ -29,9 +135,20 @@ const TriggerTerm = () => {
       Space,
       FormGrid,
       FTermTypeSelect,
+      TreeSelect,
     },
   });
 
+  const getParseTerm = () =>
+    service.getParseTerm(props.params).then((data) => {
+      Store.set('trigger-parse-term', data);
+      return data.map((item: any) => ({
+        column: item.column,
+        name: item.name,
+        children: item.children,
+      }));
+    });
+
   const schema: ISchema = {
     type: 'object',
     properties: {
@@ -56,7 +173,8 @@ const TriggerTerm = () => {
               items: {
                 type: 'object',
                 properties: {
-                  termType: {
+                  // 关联类型
+                  type: {
                     type: 'string',
                     // "x-decorator": 'FormItem',
                     'x-component': 'FTermTypeSelect',
@@ -69,52 +187,45 @@ const TriggerTerm = () => {
                       minColumns: 24,
                     },
                     properties: {
-                      params: {
+                      // columns
+                      column: {
                         type: 'string',
                         // title: '日期',
                         'x-decorator': 'FormItem',
-                        'x-component': 'Input',
+                        'x-component': 'TreeSelect',
                         'x-decorator-props': {
                           gridSpan: 4,
                         },
                         'x-component-props': {
                           placeholder: '请选择参数',
+                          fieldNames: { value: 'column', label: 'name', options: 'children' },
                         },
+                        'x-reactions': '{{useAsyncDataSource(getParseTerm)}}',
                       },
-                      operator: {
+                      termType: {
                         type: 'string',
                         // title: '输入框',
                         'x-decorator': 'FormItem',
                         'x-component': 'Select',
                         'x-decorator-props': {
-                          gridSpan: 3,
+                          gridSpan: 1,
                         },
                         'x-component-props': {
                           placeholder: '操作符',
                         },
                       },
-                      type: {
+                      source: {
                         type: 'string',
                         'x-decorator': 'FormItem',
                         'x-component': 'Select',
-                        enum: [
-                          { label: '手动输入', value: 'sd' },
-                          { label: '指标', value: 'metrics' },
-                        ],
                         'x-decorator-props': {
-                          gridSpan: 3,
+                          gridSpan: 1,
                         },
                       },
                       value: {
                         type: 'string',
-                        enum: [
-                          { label: '高高值', value: 1 },
-                          { label: '低低值', value: 2 },
-                          { label: '高值', value: 3 },
-                          { label: '低值', value: 4 },
-                        ],
                         'x-decorator': 'FormItem',
-                        'x-component': 'Select',
+                        'x-component': 'Input',
                         'x-component-props': {},
                         'x-decorator-props': {
                           gridSpan: 3,
@@ -158,8 +269,9 @@ const TriggerTerm = () => {
   };
   return (
     <Form form={form} layout="vertical" className={styles.form}>
-      <SchemaField schema={schema} />
+      <SchemaField schema={schema} scope={{ useAsyncDataSource, getParseTerm }} />
     </Form>
   );
 };
-export default TriggerTerm;
+
+export default forwardRef(TriggerTerm);

src/pages/rule-engine/Scene/service.ts

@@ -4,6 +4,12 @@ import type { SceneItem } from '@/pages/rule-engine/Scene/typings';
 
 class Service extends BaseService<SceneItem> {
   start = (id: string) => request(`${this.uri}/${id}`, { methods: 'GET' });
+
+  getParseTerm = (data: Record<string, any>) =>
+    request(`${this.uri}/parse-term-column`, {
+      method: 'POST',
+      data,
+    }).then((resp) => resp.result);
 }
 
 export default Service;