fix: merge

Next wzy

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

@@ -0,0 +1,34 @@
+import { Select } from 'antd';
+
+interface ReadPropertyProps {
+  properties: any[];
+  value?: any;
+  onChange?: (value?: any, text?: any) => void;
+  propertiesChange?: (value?: string) => void;
+  id?: string;
+}
+
+export default (props: ReadPropertyProps) => {
+  return (
+    <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('read');
+        }
+        return false;
+      })}
+      fieldNames={{ label: 'name', value: 'id' }}
+      style={{ width: '100%' }}
+      onSelect={(key: any, option: any) => {
+        // console.log(key,option)
+        if (props.onChange) {
+          props.onChange([key], option.name);
+          props.propertiesChange?.(key);
+        }
+      }}
+      placeholder={'请选择属性'}
+    ></Select>
+  );
+};

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

@@ -1,10 +1,10 @@
 import { observer } from '@formily/reactive-react';
 import { Form, Select } from 'antd';
 import { useEffect, useState } from 'react';
-import ReadProperty from '../../device/readProperty';
 import TopCard from '../device/TopCard';
 import DeviceModel from '../model';
 import FunctionCall from './functionCall';
+import ReadProperty from './ReadProperty';
 import WriteProperty from './WriteProperty';
 
 interface Props {
@@ -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

@@ -323,6 +323,7 @@ export default observer((props: Props) => {
             <SearchComponent
               field={columns}
               model={'simple'}
+              bodyStyle={{ padding: 0, paddingBottom: 16 }}
               enableSave={false}
               onSearch={async (data) => {
                 actionRef.current?.reset?.();
@@ -456,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/DeviceOutput/product/index.tsx

@@ -210,18 +210,14 @@ export default observer((props: Props) => {
         field={columns}
         model={'simple'}
         enableSave={false}
+        bodyStyle={{ padding: 0, paddingBottom: 16 }}
         onSearch={async (data) => {
           actionRef.current?.reset?.();
           setSearchParam(data);
         }}
         target="department-assets-product"
       />
-      <div
-        style={{
-          height: 'calc(100vh - 440px)',
-          overflowY: 'auto',
-        }}
-      >
+      <div>
         <ProTableCard<ProductItem>
           noPadding
           cardScrollY={460}

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>

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

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import './index.less';
-import {QuestionCircleOutlined} from "@ant-design/icons";
-import { Popover } from 'antd'
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { Popover } from 'antd';
 
 interface Props {
   typeList: any[];
@@ -46,7 +46,11 @@ const TopCard = (props: Props) => {
         >
           <div className={'way-item-title'}>
             <span className={'way-item-label'}>{item.label}</span>
-            { item.tip && <Popover content={item.tip}><QuestionCircleOutlined className={'way-item-icon'} /></Popover> }
+            {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/device/deviceList.tsx

@@ -223,27 +223,31 @@ export default observer(() => {
             tableAlertRender={false}
             rowSelection={{
               selectedRowKeys: [...TriggerDeviceModel.deviceKeys],
-              onSelect: (record, selected, selectedRows) => {
-                console.log(record)
+              onSelect: (record, selected) => {
+                console.log(record);
                 if (selected) {
-                  TriggerDeviceModel.deviceKeys.push(record.id)
+                  TriggerDeviceModel.deviceKeys.push(record.id);
                   if (TriggerDeviceModel.selectorValues) {
                     TriggerDeviceModel.selectorValues?.push({
                       name: record.name,
-                      value: record.id
-                    })
+                      value: record.id,
+                    });
                   } else {
-                    TriggerDeviceModel.selectorValues = [{
-                      name: record.name,
-                      value: record.id
-                    }]
+                    TriggerDeviceModel.selectorValues = [
+                      {
+                        name: record.name,
+                        value: record.id,
+                      },
+                    ];
                   }
                 } else {
-                  const newArray = TriggerDeviceModel.selectorValues?.filter((item) => item.value !== record.id);
-                  TriggerDeviceModel.deviceKeys = newArray?.map(item => item.value) || []
-                  TriggerDeviceModel.selectorValues = newArray || []
+                  const newArray = TriggerDeviceModel.selectorValues?.filter(
+                    (item) => item.value !== record.id,
+                  );
+                  TriggerDeviceModel.deviceKeys = newArray?.map((item) => item.value) || [];
+                  TriggerDeviceModel.selectorValues = newArray || [];
                 }
-              }
+              },
             }}
             onPageChange={(page, size) => {
               TriggerDeviceModel.devicePage = page;

src/pages/rule-engine/Scene/Save/device/index.less

@@ -20,15 +20,15 @@
 
   .trigger-way-item {
     display: flex;
+    align-items: center;
     justify-content: space-between;
     width: 237px;
     //width: 100%;
     padding: 12px 16px;
-    border: 1px solid rgba(#e0e4e8, .6);
+    border: 1px solid rgba(#e0e4e8, 0.6);
     border-radius: 2px;
     cursor: pointer;
     transition: all 0.3s;
-    align-items: center;
 
     .way-item-title {
       span {
@@ -36,11 +36,11 @@
       }
       .way-item-label {
         padding-right: 6px;
-        color: rgba(#000, .64);
+        color: rgba(#000, 0.64);
       }
 
       .way-item-icon {
-        color: rgba(#000, .5);
+        color: rgba(#000, 0.5);
       }
     }
 

src/pages/rule-engine/Scene/Save/device/org.tsx

@@ -50,7 +50,7 @@ export default observer(() => {
         tableAlertRender={false}
         options={false}
         scroll={{
-          y: 350
+          y: 350,
         }}
         rowSelection={{
           type: 'radio',

src/pages/rule-engine/Scene/Save/device/type.tsx

@@ -166,7 +166,7 @@ export default forwardRef((props: Props, ref) => {
       style={{
         maxHeight: 'calc(100vh - 350px)',
         overflowY: 'auto',
-        overflowX: 'hidden'
+        overflowX: 'hidden',
       }}
     >
       <Form form={form} layout={'vertical'}>

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

@@ -5,10 +5,10 @@ import { model } from '@formily/reactive';
 import { FormModel, defaultBranches } from '@/pages/rule-engine/Scene/Save';
 import BranchItem from './branchItem';
 import { service } from '@/pages/rule-engine/Scene/index';
-import { Switch } from 'antd'
+import { Switch } from 'antd';
 import type { TriggerType } from '@/pages/rule-engine/Scene/typings';
 import Actions from '@/pages/rule-engine/Scene/Save/action';
-import {cloneDeep} from "lodash";
+import { cloneDeep } from 'lodash';
 
 interface TermsModelProps {
   columnOptions: any[];
@@ -19,15 +19,14 @@ export const TermsModel = model<TermsModelProps>({
 });
 
 export default observer(() => {
-
-  const [open, setOpen] = useState(true)
+  const [open, setOpen] = useState(true);
 
   useEffect(() => {
-    console.log('terms-effect',FormModel.current.branches)
+    console.log('terms-effect', FormModel.current.branches);
     if (FormModel.current.branches && FormModel.current.branches.length === 1) {
-      setOpen(false)
+      setOpen(false);
     }
-  }, [FormModel.current.branches])
+  }, [FormModel.current.branches]);
 
   const queryColumn = (data: TriggerType) => {
     service.getParseTerm({ trigger: data }).then((res: any) => {
@@ -36,8 +35,8 @@ export default observer(() => {
   };
 
   const openChange = (checked: boolean) => {
-    console.log('terms-effect-change')
-    setOpen(checked)
+    console.log('terms-effect-change');
+    setOpen(checked);
     if (checked) {
       FormModel.current.branches = cloneDeep([
         ...defaultBranches,
@@ -52,12 +51,12 @@ export default observer(() => {
           },
           then: [],
         },
-      ])
+      ]);
     } else {
       FormModel.current.branches = [
         {
           when: [],
-          key: 'branches_'+new Date().getTime(),
+          key: 'branches_' + new Date().getTime(),
           shakeLimit: {
             enabled: false,
             time: 0,
@@ -65,10 +64,10 @@ export default observer(() => {
             alarmFirst: false,
           },
           then: [],
-        }
-      ]
+        },
+      ];
     }
-  }
+  };
 
   useEffect(() => {
     if (FormModel.current.trigger?.device) {
@@ -82,12 +81,17 @@ export default observer(() => {
         style={{ fontSize: 14 }}
         data={
           <span>
-            触发条件 <Switch checked={open} onChange={openChange} checkedChildren={'开'} unCheckedChildren={'关'}/>
+            触发条件{' '}
+            <Switch
+              checked={open}
+              onChange={openChange}
+              checkedChildren={'开'}
+              unCheckedChildren={'关'}
+            />
           </span>
         }
       />
-      {
-        open ?
+      {open ? (
         <Observer>
           {() =>
             FormModel.current.branches?.map((item, index) => {
@@ -106,9 +110,14 @@ export default observer(() => {
               );
             })
           }
-        </Observer> :
-          <Actions openShakeLimit={true} name={0} thenOptions={FormModel.current.branches ? FormModel.current.branches[0].then : []} />
-      }
+        </Observer>
+      ) : (
+        <Actions
+          openShakeLimit={true}
+          name={0}
+          thenOptions={FormModel.current.branches ? FormModel.current.branches[0].then : []}
+        />
+      )}
     </div>
   );
 });