feat: 新增触发条件组件

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

@@ -19,7 +19,7 @@ interface ItemProps {
 export default (props: ItemProps) => {
   const [visible] = useState<boolean>(false);
   return (
-    <>
+    <div className="actions-item-warp">
       <div className="actions-item">
         <div className="item-options-warp">
           <div className="type">
@@ -40,7 +40,14 @@ export default (props: ItemProps) => {
           <DeleteOutlined />
         </div>
       </div>
+      {props.type === 'serial' ? (
+        props.data.terms?.length ? (
+          <div></div>
+        ) : (
+          <div>添加过滤条件</div>
+        )
+      ) : null}
       {visible && <Modal />}
-    </>
+    </div>
   );
 };

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

@@ -1,3 +1,9 @@
+import Terms from '@/pages/rule-engine/Scene/Save/terms';
+
 export default () => {
-  return <div>设备触发</div>;
+  return (
+    <div>
+      <Terms />
+    </div>
+  );
 };

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

@@ -10,6 +10,16 @@ import type { FormModelType } from '@/pages/rule-engine/Scene/typings';
 
 export const FormModel = observable<FormModelType>({
   actions: [],
+  terms: [
+    {
+      column: undefined,
+      value: undefined,
+    },
+    {
+      column: undefined,
+      value: undefined,
+    },
+  ],
 });
 
 export default () => {

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

@@ -0,0 +1,97 @@
+.deleteBtn() {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  display: none;
+  width: 20px;
+  height: 20px;
+  color: #999;
+  line-height: 20px;
+  text-align: center;
+  background-color: rgba(#f1f1f1, 0.8);
+  border-radius: 50%;
+  cursor: pointer;
+
+  &.show {
+    display: block;
+  }
+
+  &:hover {
+    background-color: #f1f1f1;
+  }
+}
+
+.terms-params {
+  display: inline-block;
+
+  .terms-params-content {
+    position: relative;
+    display: flex;
+    padding: 8px;
+    background-color: #fafafa;
+  }
+
+  .terms-params-delete {
+    .deleteBtn();
+  }
+}
+
+.terms-params-item {
+  .params-button {
+    display: inline-block;
+    padding: 6px 8px;
+    border: 1px solid #d9d9d9;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+
+  .params-item_button {
+    position: relative;
+    display: inline-block;
+    padding: 4px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 2px;
+
+    .params-button {
+      &.parameter {
+        color: #00a4fe;
+        background-color: rgba(154, 219, 255, 0.3);
+        border-color: rgba(0, 164, 254, 0.3);
+      }
+
+      &.termType {
+        color: #2f54eb;
+        background-color: rgba(163, 202, 255, 0.3);
+        border-color: rgba(47, 84, 235, 0.3);
+      }
+
+      &.termsValue {
+        color: #692ca7;
+        background-color: rgba(188, 125, 238, 0.1);
+        border-color: rgba(188, 125, 238, 0.5);
+      }
+    }
+
+    .button-delete {
+      .deleteBtn();
+    }
+  }
+
+  .term-type-warp {
+    display: inline-block;
+    margin: 0 16px;
+    .term-type {
+      border-radius: 2px;
+    }
+  }
+
+  .term-add {
+    display: inline-block;
+    margin-left: 16px;
+    padding: 4px 8px;
+    color: #333;
+    background: #e8e8e8;
+    border: 1px solid #f0f0f0;
+    border-radius: 30px;
+  }
+}

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

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { TitleComponent } from '@/components';
+import { observer } from '@formily/react';
+import { FormModel } from '@/pages/rule-engine/Scene/Save';
+import Term from './term';
+
+export default observer(() => {
+  const queryColumn = () => {};
+
+  useEffect(() => {
+    console.log('terms', FormModel.trigger?.device);
+    if (FormModel.trigger?.device) {
+      queryColumn();
+    }
+  }, [FormModel.trigger?.device]);
+
+  return (
+    <div className="actions-terms">
+      <TitleComponent style={{ fontSize: 14 }} data="触发条件" />
+      <Term />
+    </div>
+  );
+});

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

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import type { TermsType } from '@/pages/rule-engine/Scene/typings';
+import { Popover } from 'antd';
+import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import './index.less';
+
+interface ParamsItemProps {
+  data: TermsType;
+  name: number;
+  isLast: boolean;
+}
+
+export default (props: ParamsItemProps) => {
+  const [deleteVisible, setDeleteVisible] = useState(false);
+
+  const deleteItem = () => {};
+
+  return (
+    <div className="terms-params-item">
+      <div
+        className="params-item_button"
+        onMouseOver={() => setDeleteVisible(true)}
+        onMouseOut={() => setDeleteVisible(false)}
+      >
+        <Popover trigger={'click'} content={<span>1231</span>}>
+          <div className="params-button parameter">请选择参数</div>
+        </Popover>
+        <Popover trigger={'click'} content={<span>1231</span>}>
+          <div className="params-button termType">操作符</div>
+        </Popover>
+        <Popover trigger={'click'} content={<span>1231</span>}>
+          <div className="params-button termsValue">参数值</div>
+        </Popover>
+        <div className={classNames('button-delete', { show: deleteVisible })}>
+          <CloseOutlined />
+        </div>
+      </div>
+      {!props.isLast ? (
+        <div className="term-type-warp" onClick={deleteItem}>
+          <Popover trigger={'click'} content={<span>1231</span>}>
+            <div className="params-button term-type">参数值</div>
+          </Popover>
+        </div>
+      ) : (
+        <div className="term-add">
+          <PlusOutlined style={{ fontSize: 12, paddingRight: 4 }} />
+          <span>条件</span>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,37 @@
+import { Observer } from '@formily/react';
+import { FormModel } from '@/pages/rule-engine/Scene/Save';
+import ParamsItem from './paramsItem';
+import { useState } from 'react';
+import { CloseOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import './index.less';
+
+export default () => {
+  const [deleteVisible, setDeleteVisible] = useState(false);
+
+  return (
+    <div
+      className="terms-params"
+      onMouseOver={() => setDeleteVisible(true)}
+      onMouseOut={() => setDeleteVisible(false)}
+    >
+      <div className="terms-params-content">
+        <Observer>
+          {() =>
+            FormModel.terms?.map((item, index) => (
+              <ParamsItem
+                name={index}
+                data={item}
+                key={item.key}
+                isLast={index === FormModel.terms!.length - 1}
+              />
+            ))
+          }
+        </Observer>
+        <div className={classNames('terms-params-delete', { show: deleteVisible })}>
+          <CloseOutlined />
+        </div>
+      </div>
+    </div>
+  );
+};

src/pages/rule-engine/Scene/typings.d.ts

@@ -164,6 +164,7 @@ export type TermsType = {
   termType?: string;
   options?: any[];
   terms?: TermsType[];
+  key?: string;
 };
 
 export type PlatformRelation = {