fix: bug

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

@@ -3,7 +3,7 @@ import { Select } from 'antd';
 interface ReadPropertyProps {
   properties: any[];
   value?: any;
-  onChange?: (value?: any) => void;
+  onChange?: (value?: any, text?: any) => void;
   propertiesChange?: (value?: string) => void;
   id?: string;
 }
@@ -21,9 +21,10 @@ export default (props: ReadPropertyProps) => {
       })}
       fieldNames={{ label: 'name', value: 'id' }}
       style={{ width: '100%' }}
-      onSelect={(key: any) => {
+      onSelect={(key: any, option: any) => {
+        // console.log(key,option)
         if (props.onChange) {
-          props.onChange([key]);
+          props.onChange([key], option.name);
           props.propertiesChange?.(key);
         }
       }}

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

@@ -35,14 +35,17 @@ export default (props: Props) => {
     });
     return lable?.description;
   };
+
   const filterTree = (nodes: any[]) => {
     if (!nodes?.length) {
       return nodes;
     }
     return nodes.filter((it) => {
-      if (it.children.find((item: any) => item.type === props.type)) {
+      const children = it.children.filter((item: any) => item.type === props.type);
+      if (children && children.length !== 0) {
         return true;
       }
+      it.children = filterTree(it.children);
       return false;
     });
   };
@@ -53,7 +56,8 @@ export default (props: Props) => {
       if (res.status === 200) {
         const _data = BuiltInParamsHandleTreeData(res.result);
         const filterData = filterTree(_data);
-        // console.log('_data',_data,)
+        console.log('_data', _data);
+        console.log('filterData', filterData);
         // console.log('type',props.type)
         setBuiltInList(filterData);
         const label = filterLabel(filterData);
@@ -208,7 +212,8 @@ export default (props: Props) => {
             defaultExpandAll
             fieldNames={{ title: 'name', key: 'id' }}
             onSelect={(selectedKeys, e) => {
-              // console.log(e.node);
+              console.log(e.node);
+              setDateOpen(false);
               setLabelValue(e.node.description);
               setValue(selectedKeys[0]);
               if (props.onChange) {

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

@@ -1,5 +1,5 @@
 import { Col, Row, Select } from 'antd';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import TypeModel from './TypeModel';
 // import { useEffect, useState } from "react";
 
@@ -7,7 +7,7 @@ interface Props {
   properties: any[];
   value?: any;
   id?: string;
-  onChange?: (value?: any) => void;
+  onChange?: (value?: any, text?: any) => void;
   propertiesChange?: (value?: string) => void;
   name?: any;
 }
@@ -24,6 +24,7 @@ export default (props: Props) => {
   const [propertiesValue, setPropertiesValue] = useState(undefined);
   const [propertiesType, setPropertiesType] = useState('');
   const [source, setSource] = useState<string>('fixed');
+  const textRef = useRef<any>('');
 
   useEffect(() => {
     console.log(props.value);
@@ -58,7 +59,7 @@ export default (props: Props) => {
           source: source,
         },
       };
-      props.onChange(obj);
+      props.onChange(obj, textRef.current);
     }
   }, [propertiesValue, source]);
 
@@ -80,6 +81,7 @@ export default (props: Props) => {
           onChange={(e, option) => {
             setPropertiesId(e);
             setPropertiesType(option.valueType.type);
+            textRef.current = option.name;
             console.log(option);
           }}
         ></Select>

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

@@ -131,8 +131,10 @@ export default observer((props: Props) => {
                 filterOption={(input: string, option: any) =>
                   option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }
-                onChange={(value) => {
+                onChange={(value, option) => {
                   setFunctionId(value);
+                  // console.log(option.name)
+                  DeviceModel.propertiesName = option.name;
                 }}
               />
             </Form.Item>
@@ -152,7 +154,13 @@ export default observer((props: Props) => {
             label="读取属性"
             rules={[{ required: true, message: '请选择读取属性' }]}
           >
-            <ReadProperty properties={properties} />
+            <ReadProperty
+              properties={properties}
+              onChange={(_, text) => {
+                console.log(text);
+                DeviceModel.propertiesName = text;
+              }}
+            />
           </Form.Item>
         )}
         {deviceMessageType === 'WRITE_PROPERTY' && (
@@ -161,7 +169,17 @@ export default observer((props: Props) => {
             label="设置属性"
             rules={[{ required: true, message: '请选择属性' }]}
           >
-            <WriteProperty properties={properties} name={props.name} />
+            <WriteProperty
+              properties={properties}
+              name={props.name}
+              onChange={(value, text) => {
+                console.log(Object.keys(value));
+                const item = value[Object.keys(value)?.[0]]?.value;
+                console.log(item);
+                DeviceModel.propertiesName = text;
+                DeviceModel.propertiesValue = item;
+              }}
+            />
           </Form.Item>
         )}
       </Form>

src/pages/rule-engine/Scene/Save/action/DeviceOutput/device/TopCard.tsx

@@ -1,6 +1,8 @@
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import '../index.less';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { Popover } from 'antd';
 
 interface Props {
   typeList: any[];
@@ -9,6 +11,7 @@ interface Props {
   onChange?: (type: string) => void;
   onSelect?: (type: string) => void;
   disabled?: boolean;
+  labelBottom?: boolean;
 }
 
 const TopCard = (props: Props) => {
@@ -21,6 +24,7 @@ const TopCard = (props: Props) => {
   const onSelect = (_type: string) => {
     if (!props.disabled) {
       setType(_type);
+
       if (props.onChange) {
         props.onChange(_type);
       }
@@ -34,17 +38,19 @@ const TopCard = (props: Props) => {
           key={item.value}
           className={classNames('trigger-way-item', {
             active: type === item.value,
+            labelBottom: props.labelBottom,
           })}
           onClick={() => {
             onSelect(item.value);
-            if (props.onChange) {
-              props.onChange(item.value);
-            }
           }}
         >
           <div className={'way-item-title'}>
-            <p>{item.label}</p>
-            <span>{item.tip}</span>
+            <span className={'way-item-label'}>{item.label}</span>
+            {item.tip && (
+              <Popover content={item.tip}>
+                <QuestionCircleOutlined className={'way-item-icon'} />
+              </Popover>
+            )}
           </div>
           <div className={'way-item-image'}>
             <img width={48} src={item.image} />

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

@@ -457,7 +457,14 @@ export default observer((props: Props) => {
       form.setFieldsValue({ selector: DeviceModel.selector });
     }
     sourceChangeEvent();
-    console.log('-----deviceid-----', DeviceModel.deviceId);
+    // console.log('-----deviceid-----', DeviceModel.deviceId);
+    if (DeviceModel.deviceId) {
+      service.detail(DeviceModel.deviceId).then((res) => {
+        if (res.status === 200) {
+          DeviceModel.deviceDetail = res.result || {};
+        }
+      });
+    }
   }, []);
 
   useEffect(() => {

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

@@ -1,4 +1,5 @@
-@import '../../../../../../../node_modules/antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.less';
+@import '~@/global.less';
 
 .steps-steps {
   width: 100%;
@@ -14,46 +15,64 @@
 .trigger-way-warp {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 16px 24px;
   width: 100%;
 
   .trigger-way-item {
     display: flex;
+    align-items: center;
     justify-content: space-between;
     width: 237px;
     //width: 100%;
-    padding: 16px;
-    border: 1px solid #e0e4e8;
+    padding: 12px 16px;
+    border: 1px solid rgba(#e0e4e8, 0.6);
     border-radius: 2px;
     cursor: pointer;
-    opacity: 0.6;
     transition: all 0.3s;
 
     .way-item-title {
-      p {
-        margin-bottom: 8px;
-        font-weight: bold;
+      span {
         font-size: 16px;
       }
+      .way-item-label {
+        padding-right: 6px;
+        color: rgba(#000, 0.64);
+      }
 
-      span {
-        color: rgba(#000, 0.35);
-        font-size: 12px;
+      .way-item-icon {
+        color: rgba(#000, 0.5);
       }
     }
 
     .way-item-image {
       margin: 0 !important;
+      opacity: 0.6;
     }
 
     &:hover {
-      color: @primary-color-hover;
-      opacity: 0.8;
+      //color: @primary-color-hover;
+      .way-item-image {
+        opacity: 0.8;
+      }
     }
 
     &.active {
       border-color: @primary-color-active;
-      opacity: 1;
+      .way-item-image {
+        opacity: 1;
+      }
+    }
+
+    &.labelBottom {
+      flex-direction: column-reverse;
+      grid-gap: 16px;
+      gap: 0;
+      align-items: center;
+      width: auto;
+      padding: 8px 16px;
+      p {
+        margin: 0;
+      }
     }
   }
 
@@ -88,3 +107,17 @@
     color: #fab247;
   }
 }
+
+.trigger-options-content {
+  .trigger-options-name {
+    .ellipsisFn(1, 30%);
+  }
+
+  .trigger-options-type {
+    .ellipsisFn(1, 10%);
+  }
+
+  .trigger-options-when {
+    .ellipsisFn(1, 15%);
+  }
+}

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

@@ -79,26 +79,29 @@ export default observer((props: Props) => {
       name: '-', //设备名称
       type: '', //类型
       properties: '', //属性功能
+      propertiesValue: '', //设置功能
       selector: DeviceModel.selector, //选择器标识
       productName: DeviceModel.productDetail.name,
       relationName: DeviceModel.relationName,
       taglist: [],
     };
-    _options.name = DeviceModel.deviceDetail.name;
+    _options.name = DeviceModel.deviceDetail?.name;
     const _type = value.message.messageType;
     if (_type === 'INVOKE_FUNCTION') {
       _options.type = '执行';
-      _options.properties = value.message.functionId;
+      // _options.properties = value.message.functionId;
+      _options.properties = DeviceModel.propertiesName;
     }
     if (_type === 'READ_PROPERTY') {
       _options.type = '读取';
-      _options.properties = value.message.properties?.[0];
+      _options.properties = DeviceModel.propertiesName;
       // _options.name = DeviceModel.selectorValues[0].name;
     }
     if (_type === 'WRITE_PROPERTY') {
       _options.type = '设置';
-      _options.properties = Object.keys(value.message.properties)?.[0];
-      // _options.name = DeviceModel.selectorValues[0].name;
+      // _options.properties = Object.keys(value.message.properties)?.[0];
+      _options.properties = DeviceModel.propertiesName;
+      _options.propertiesValue = DeviceModel.propertiesValue;
     }
     if (_options.selector === 'tag') {
       _options.taglist = DeviceModel.selectorValues?.[0]?.value.map((it: any) => ({
@@ -132,7 +135,7 @@ export default observer((props: Props) => {
     <Modal
       title={'执行动作'}
       open
-      width={880}
+      width={810}
       onCancel={() => {
         props.cancel();
         DeviceModel.current = 0;

src/pages/rule-engine/Scene/Save/action/DeviceOutput/model.ts

@@ -22,6 +22,8 @@ type ModelType = {
   source: string;
   relationName: string;
   message: any;
+  propertiesName: string;
+  propertiesValue: string;
 };
 
 const DeviceModel = model<ModelType>({
@@ -39,6 +41,8 @@ const DeviceModel = model<ModelType>({
   source: 'fixed',
   relationName: '',
   message: {},
+  propertiesName: '',
+  propertiesValue: '',
 });
 
 export default DeviceModel;

src/pages/rule-engine/Scene/Save/action/ListItem/Item.tsx

@@ -152,9 +152,12 @@ export default (props: ItemProps) => {
       case 'fixed':
         return (
           <div>
-            {data?.options?.type}
+            {`${data?.options?.type} ${data?.options?.name} ${data?.options?.properties} ${
+              data?.options?.propertiesValue || ''
+            }`}
+            {/* {data?.options?.type}
             <span>{data?.options?.name}</span>
-            {data?.options?.properties}
+            {data?.options?.properties} */}
           </div>
         );
       case 'tag':

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

@@ -42,6 +42,7 @@ export default (props: Props) => {
   }, [props.value]);
 
   useEffect(() => {
+    // console.log(props.open)
     if (props.open !== undefined) {
       setOpen(props.open);
     }
@@ -88,10 +89,6 @@ export default (props: Props) => {
             setValue(e.target.value);
             props.onChange(value, tabKey);
           }}
-          onFocus={() => {
-            // setOpen(true);
-            props.openChange?.(true);
-          }}
         />
       )}
     </Dropdown>