fix: 设备输出

src/pages/rule-engine/Scene/Save/action/DeviceOutput/actions/ObjModel.tsx

@@ -12,6 +12,7 @@ export default (props: Props) => {
   const monacoRef = useRef<any>();
 
   const [value, setValue] = useState<any>(props.value);
+  const [loading, setLoading] = useState(false);
 
   const editorDidMountHandle = (editor: any) => {
     monacoRef.current = editor;
@@ -35,17 +36,27 @@ export default (props: Props) => {
         props.ok(value);
       }}
     >
-      <MonacoEditor
-        width={'100%'}
-        height={400}
-        theme="vs-dark"
-        language={'json'}
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue);
+      <div
+        ref={() => {
+          setTimeout(() => {
+            setLoading(true);
+          }, 100);
         }}
-        editorDidMount={editorDidMountHandle}
-      />
+      >
+        {loading && (
+          <MonacoEditor
+            width={'100%'}
+            height={400}
+            theme="vs-dark"
+            language={'json'}
+            value={value}
+            onChange={(newValue) => {
+              setValue(newValue);
+            }}
+            editorDidMount={editorDidMountHandle}
+          />
+        )}
+      </div>
     </Modal>
   );
 };

src/pages/rule-engine/Scene/Save/action/DeviceOutput/actions/TypeModel.tsx

@@ -11,14 +11,15 @@ import ObjModel from './ObjModel';
 interface Props {
   value: any;
   type: string;
-  onChange?: (data: any, format?: any) => void;
-  record: any;
+  onChange: (data: any, source?: any) => void;
+  record?: any; //枚举值使用
 }
 
 export default (props: Props) => {
-  const [value, setValue] = useState<any>(null);
+  const [value, setValue] = useState<any>(props.value || '');
   const [visible, setVisible] = useState<boolean>(false);
   const [objVisiable, setObjVisable] = useState<boolean>(false);
+  const [source, setSource] = useState<string>('');
   const treeData: DataNode[] = [
     {
       title: 'parent 1',
@@ -47,9 +48,9 @@ export default (props: Props) => {
     },
   ];
 
-  useEffect(() => {
-    setValue(props.value);
-  }, [props.value]);
+  // useEffect(() => {
+  //   setValue(props.value);
+  // }, [props.value]);
 
   const onChange = (params: any) => {
     setValue(params);
@@ -58,6 +59,10 @@ export default (props: Props) => {
     }
   };
 
+  useEffect(() => {
+    props.onChange(value, source);
+  }, [source, value]);
+
   const renderNode = (type: string) => {
     switch (type) {
       case 'int':
@@ -175,7 +180,7 @@ export default (props: Props) => {
     },
     {
       label: `内置参数`,
-      key: 'built-in',
+      key: 'upper',
       content: (
         <Tree
           treeData={treeData}
@@ -202,9 +207,11 @@ export default (props: Props) => {
         tabKey={'manual'}
         itemList={itemList}
         value={value}
-        onChange={(val: any) => {
+        onChange={(val: any, tabKey: any) => {
           setValue(val);
+          setSource(tabKey);
         }}
+        type={props.type}
       />
       {visible && (
         <AMap

src/pages/rule-engine/Scene/Save/action/DeviceOutput/actions/WriteProperty.tsx

@@ -1,4 +1,6 @@
-import { Col, Form, Row, Select } from 'antd';
+import { Col, Row, Select } from 'antd';
+import { useEffect, useState } from 'react';
+import TypeModel from './TypeModel';
 // import { useEffect, useState } from "react";
 
 interface Props {
@@ -9,80 +11,92 @@ interface Props {
   propertiesChange?: (value?: string) => void;
 }
 
+// const item = {
+//   a1: {
+//     "value": 10,
+//     "source": "fixed",
+//   }
+// }
+
 export default (props: Props) => {
-  // const [propertiesKey, setPropertiesKey] = useState<string | undefined>(undefined);
-  // const [propertiesValue, setPropertiesValue] = useState(undefined);
-  // const [propertiesType, setPropertiesType] = useState('');
+  const [propertiesId, setPropertiesId] = useState<string | undefined>(undefined);
+  const [propertiesValue, setPropertiesValue] = useState(undefined);
+  const [propertiesType, setPropertiesType] = useState('');
+  const [source, setSource] = useState<string>('');
+
+  useEffect(() => {
+    console.log(props.value);
+    if (props.value) {
+      if (props.properties && props.properties.length) {
+        if (0 in props.value) {
+          setPropertiesValue(props.value[0]);
+        } else if ('undefined' in props.value) {
+          // setPropertiesKey(undefined);
+          setPropertiesValue(undefined);
+        } else {
+          Object.keys(props.value).forEach((key: string) => {
+            // setPropertiesKey(key);
+            setPropertiesValue(props.value[key].value);
+            const propertiesItem = props.properties.find((item: any) => item.id === key);
+            if (propertiesItem) {
+              setPropertiesType(propertiesItem.valueType.type);
+            }
+          });
+        }
+      }
+    } else {
+      // setPropertiesKey(undefined);
+      setPropertiesValue(undefined);
+    }
+  }, [props.value, props.properties]);
+
+  useEffect(() => {
+    // console.log(propertiesValue)
+    if (props.onChange && propertiesValue) {
+      const obj = {
+        [propertiesId || 0]: {
+          value: propertiesValue,
+          source: source,
+        },
+      };
+      props.onChange(obj);
+    }
+  }, [propertiesValue, source]);
 
-  // useEffect(() => {
-  //     console.log(props.value);
-  //     if (props.value) {
-  //         if (props.properties && props.properties.length) {
-  //             if (0 in props.value) {
-  //                 setPropertiesValue(props.value[0]);
-  //             } else if ('undefined' in props.value) {
-  //                 setPropertiesKey(undefined);
-  //                 setPropertiesValue(undefined);
-  //             } else {
-  //                 Object.keys(props.value).forEach((key: string) => {
-  //                     setPropertiesKey(key);
-  //                     setPropertiesValue(props.value[key].value);
-  //                     const propertiesItem = props.properties.find((item: any) => item.id === key);
-  //                     if (propertiesItem) {
-  //                         setPropertiesType(propertiesItem.valueType.type);
-  //                     }
-  //                 });
-  //             }
-  //         }
-  //     } else {
-  //         setPropertiesKey(undefined);
-  //         setPropertiesValue(undefined);
-  //     }
-  // }, [props.value, props.properties]);
   return (
     <Row gutter={24}>
-      <Col span={24}>
-        <Form.Item
-          name={['device', 'message', 'properties']}
-          label="设置属性"
-          rules={[{ required: true, message: '请选择属性' }]}
-        >
-          <Select
-            id={props.id}
-            value={props.value ? props.value[0] : undefined}
-            options={props.properties.filter((item) => {
-              if (item.expands && item.expands.type) {
-                return item.expands.type.includes('write');
-              }
-              return false;
-            })}
-            fieldNames={{ label: 'name', value: 'id' }}
-            style={{ width: '100%' }}
-            placeholder={'请选择属性'}
-          ></Select>
-        </Form.Item>
-      </Col>
       <Col span={12}>
-        <Form.Item
-          name={['device', 'message', 'properties']}
-          label="设置属性"
-          rules={[{ required: true, message: '请选择属性' }]}
-        >
-          <Select
-            id={props.id}
-            value={props.value ? props.value[0] : undefined}
-            options={props.properties.filter((item) => {
-              if (item.expands && item.expands.type) {
-                return item.expands.type.includes('write');
-              }
-              return false;
-            })}
-            fieldNames={{ label: 'name', value: 'id' }}
-            style={{ width: '100%' }}
-            placeholder={'请选择属性'}
-          ></Select>
-        </Form.Item>
+        <Select
+          id={props.id}
+          value={props.value ? props.value[0] : undefined}
+          options={props.properties.filter((item) => {
+            if (item.expands && item.expands.type) {
+              return item.expands.type.includes('write');
+            }
+            return false;
+          })}
+          fieldNames={{ label: 'name', value: 'id' }}
+          style={{ width: '100%' }}
+          placeholder={'请选择属性'}
+          onChange={(e, option) => {
+            setPropertiesId(e);
+            setPropertiesType(option.valueType.type);
+            console.log(option);
+          }}
+        ></Select>
       </Col>
+      {propertiesId && (
+        <Col span={12}>
+          <TypeModel
+            value={propertiesValue}
+            type={propertiesType}
+            onChange={(value, sources) => {
+              setPropertiesValue(value);
+              setSource(sources);
+            }}
+          />
+        </Col>
+      )}
     </Row>
   );
 };

src/pages/rule-engine/Scene/Save/action/DeviceOutput/actions/functionCall.tsx

@@ -27,7 +27,7 @@ export default (props: FunctionCallProps) => {
     if (props.functionData && props.functionData.length) {
       setEditableRowKeys(props.functionData.map((d) => d.id));
       if (props.value) {
-        console.log(props.functionData, 11111111111);
+        // console.log(props.functionData, 11111111111);
         const tableData = props.functionData.map((item: any) => {
           const oldValue = props.value.find((oldItem: any) => oldItem.name === item.id);
           if (oldValue) {

src/pages/rule-engine/Scene/Save/action/DeviceOutput/actions/index.tsx

@@ -129,7 +129,16 @@ export default observer((props: Props) => {
             <ReadProperty properties={properties} propertiesChange={setPropertiesId} />
           </Form.Item>
         )}
-        {deviceMessageType === 'WRITE_PROPERTY' && <WriteProperty properties={properties} />}
+        {deviceMessageType === 'WRITE_PROPERTY' && (
+          <Form.Item
+            name={['device', 'message', 'properties']}
+            label="设置属性"
+            rules={[{ required: true, message: '请选择属性' }]}
+          >
+            <WriteProperty properties={properties} />
+          </Form.Item>
+        )}
+        {/* {deviceMessageType === 'WRITE_PROPERTY' && <WriteProperty properties={properties} />} */}
       </Form>
     </div>
   );

src/pages/rule-engine/Scene/Save/action/Modal/add.tsx

@@ -25,6 +25,7 @@ export default (props: Props) => {
   }, [props.data]);
 
   const actionTypeComponent = (type: string) => {
+    console.log(type, '111');
     switch (type) {
       case 'device':
         return <Device />;
@@ -57,8 +58,9 @@ export default (props: Props) => {
       }}
       onOk={async () => {
         const values = await form.validateFields();
+        console.log(values.type);
         setActionType(values.type);
-        props.save({ ...props.data, type: values.type });
+        // props.save({ ...props.data, type: values.type });
       }}
     >
       <Form form={form} layout={'vertical'}>

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

@@ -14,11 +14,12 @@ export interface ItemProps {
 interface Props {
   placeholder?: string;
   value: any;
-  onChange: (dt: any) => void;
+  onChange: (valeu: any, sources?: any) => void;
   inputProps?: InputProps;
   itemList: ItemProps[];
   style?: object;
   tabKey: string;
+  type?: string;
 }
 
 export default (props: Props) => {
@@ -27,7 +28,6 @@ export default (props: Props) => {
   const wrapperRef = useRef<any>(null);
   const nodeRef = useRef<any>(null);
   const [value, setValue] = useState<any>(props.value);
-  // const [showValue, setShowValue] = useState<string | undefined>('');
 
   useEffect(() => {
     setTabKey(props.tabKey);
@@ -52,20 +52,9 @@ export default (props: Props) => {
     };
   });
 
-  // const contentRender = (item: ItemProps | undefined) => {
-  //   switch (item?.type) {
-  //     case 'time-picker':
-  //       return <MTimePicker {...item.children} value={value} onChange={(time: any, timeString: string) => {
-  //         setShowValue(timeString)
-  //         console.log(timeString)
-  //         setValue(time)
-  //       }} />;
-  //     case 'tree':
-  //       return <Tree {...item.children} height={300} defaultExpandAll />
-  //     default:
-  //       return null;
-  //   }
-  // }
+  useEffect(() => {
+    props.onChange(value, tabKey);
+  }, [value, tabKey]);
 
   return (
     <div className={'select-wrapper'} ref={wrapperRef} style={props.style}>
@@ -81,7 +70,11 @@ export default (props: Props) => {
         }}
       />
       {visible && (
-        <div className={'select-container'} ref={nodeRef}>
+        <div
+          className={'select-container'}
+          ref={nodeRef}
+          style={props.type !== 'date' ? { minHeight: 100 } : undefined}
+        >
           <div className={'select-box'}>
             <div className={'select-box-header-top'}>
               <div className={'select-box-header'}>