增加复杂配置的编辑模式；增加简单告警通过pointId配置

src/App.jsx

@@ -7,15 +7,15 @@ function Home(props) {
 
   return (
     <>
-      <Alarm.DetailModal
+      {/* <Alarm.DetailModal
         open={open}
         onCancel={() => setOpen(false)}
         options={{ ruleId: 25 }}
         // options={{
         //   pointId: "ABC123_AAA_chr1_AEff_MIN_H",
         // }}
-      ></Alarm.DetailModal>
-      {/* <Alarm.EasyConfig editId={33}></Alarm.EasyConfig> */}
+      ></Alarm.DetailModal> */}
+      <Alarm.ComplexConfig editId={27} showList></Alarm.ComplexConfig>
     </>
   );
 }

src/api/alarm.js

@@ -76,6 +76,24 @@ export async function getAlarmPointData(rule_id, begin, end) {
   return res.statusText ? res.data : res;
 }
 
+export async function getRuleList(point_id) {
+  const res = await axios.post(
+    "/api/unialarm/get_rule_list",
+    {
+      key_word: "",
+      type: 1,
+      page_num: 1,
+      page_size: 9999,
+      alarm_level: 0,
+      group_id: 0,
+      status: 0,
+      sub_type: 12,
+    },
+    config
+  );
+  return res.statusText ? res.data : res;
+}
+
 export default {
   editRule,
   addRule,
@@ -85,4 +103,5 @@ export default {
   detailAlarm,
   confirmAlarm,
   getAlarmPointData,
+  getRuleList,
 };

src/entry.jsx

@@ -20,7 +20,7 @@ import dayjs from "dayjs";
 dayjs.locale("zh-cn");
 
 const EasyConfig = forwardRef((props, ref) => {
-  const { editId = -1, onConfirm, groupList } = props;
+  const { editId = -1, onConfirm, groupList, pointId } = props;
   const compRef = useRef(null);
 
   const [themeName, setThemeName] = useState();
@@ -48,7 +48,8 @@ const EasyConfig = forwardRef((props, ref) => {
           <App className={styles.App}>
             <Easy
               ref={compRef}
-              alarmId={editId}
+              editId={editId}
+              pointId={pointId}
               onConfirm={onConfirm}
               groupList={groupList}
             />
@@ -60,7 +61,7 @@ const EasyConfig = forwardRef((props, ref) => {
 });
 
 const ComplexConfig = forwardRef((props, ref) => {
-  const { editId = -1, onConfirm, groupList } = props;
+  const { editId = -1, onConfirm, groupList, showList } = props;
   const compRef = useRef(null);
 
   const [themeName, setThemeName] = useState();
@@ -88,9 +89,10 @@ const ComplexConfig = forwardRef((props, ref) => {
           <App className={styles.App}>
             <Complex
               ref={compRef}
-              alarmId={editId}
+              editId={editId}
               onConfirm={onConfirm}
               groupList={groupList}
+              showList={showList}
             />
           </App>
         </ConfigProvider>

src/pages/Alarm/components/complex.jsx

@@ -6,7 +6,7 @@ import React, {
   useImperativeHandle,
 } from "react";
 import { Form, Input, Select, message } from "antd";
-import { Modal, Button, Table } from "antd";
+import { Modal, Button, Table, Radio } from "antd";
 import Formular from "./components/Formular";
 import API2 from "../../../api/alarm";
 import styles from "./complex.module.less";
@@ -32,7 +32,7 @@ function TranslateText(arr) {
 }
 
 const Complex = (props, ref) => {
-  const { alarmId, groupList = [] } = props;
+  const { editId, groupList = [], showList } = props;
 
   const [form] = Form.useForm();
   const formuRef = useRef();
@@ -51,6 +51,9 @@ const Complex = (props, ref) => {
     // showSizeChanger:true,
     // size:'Large',
   });
+  const [alarmId, setAlarmId] = useState(null);
+  const [type, setType] = useState(0);
+  const [ruleOptions, setRuleOptions] = useState([]);
 
   const handleTableChange = async (pagination) => {
     setPaginationProps({ ...pagination, showTotal: (total) => `共${total}条` });
@@ -73,12 +76,23 @@ const Complex = (props, ref) => {
         });
         formuRef.current.backEndInput(data.formula);
         setData(data);
+      } else {
+        form.setFieldsValue({
+          name: "",
+          alarm_level: "",
+          group_id: "",
+        });
+        setData(null);
       }
     }
     run();
   }, [alarmId]);
 
   const onModalOk = async () => {
+    if (type === 0) {
+      props.onConfirm(null);
+      return;
+    }
     if (alarmId == -1) {
       const value = await form.validateFields();
       const obj = {
@@ -109,7 +123,7 @@ const Complex = (props, ref) => {
       const { state } = await API2.editRule(obj);
       if (state === 0) {
         message.success("保存成功");
-        props.onConfirm();
+        props.onConfirm(data.id);
       }
     }
     form.resetFields();
@@ -182,6 +196,43 @@ const Complex = (props, ref) => {
     form.resetFields();
   };
 
+  useEffect(() => {
+    function run() {
+      if (editId && editId !== -1) {
+        setAlarmId(editId);
+        if (showList) {
+          setType(1);
+        }
+      } else if (showList) {
+        setType(0);
+      }
+    }
+    run();
+  }, [editId, showList]);
+
+  useEffect(() => {
+    async function run() {
+      if (showList) {
+        const res = await API2.getRuleList();
+        setRuleOptions(
+          res?.data?.rules?.map((item) => ({
+            label: item.name,
+            value: item.id,
+          }))
+        );
+      }
+    }
+    run();
+  }, [showList]);
+
+  useEffect(() => {
+    if (type === 2) {
+      setAlarmId(-1);
+    } else if(alarmId === -1 && type !== 2) {
+      setAlarmId(null);
+    }
+  }, [type, alarmId]);
+
   return (
     <div className={styles.wrapper}>
       <div className="main">
@@ -200,158 +251,203 @@ const Complex = (props, ref) => {
               span: 15,
             }}
           >
-            <Form.Item
-              label={TranslateText(["告警名称", "Alarm name"])}
-              name="name"
-              rules={[
-                {
-                  required: true,
-                  message: TranslateText(["请输入告警名称", "Please input"]),
-                },
-              ]}
-            >
-              <Input
-                placeholder={TranslateText(["请输入告警名称", "Please input"])}
-                style={{ width: "240px" }}
-              />
-            </Form.Item>
+            {showList && (
+              <>
+                <Form.Item label="类型">
+                  <Radio.Group
+                    value={type}
+                    onChange={(e) => setType(e.target.value)}
+                  >
+                    <Radio value={0}>无规则</Radio>
+                    <Radio value={1}>关联规则</Radio>
+                    <Radio value={2}>新建规则</Radio>
+                  </Radio.Group>
+                </Form.Item>
+                {type === 1 && (
+                  <Form.Item label="关联规则">
+                    <Select
+                      value={alarmId}
+                      onChange={setAlarmId}
+                      style={{ width: 240 }}
+                      options={ruleOptions}
+                      placeholder={TranslateText(["请选择", "Please choose"])}
+                    />
+                  </Form.Item>
+                )}
+              </>
+            )}
+            {(!showList || type !== 0) && (
+              <>
+                <Form.Item
+                  label={TranslateText(["告警名称", "Alarm name"])}
+                  name="name"
+                  rules={[
+                    {
+                      required: true,
+                      message: TranslateText([
+                        "请输入告警名称",
+                        "Please input",
+                      ]),
+                    },
+                  ]}
+                >
+                  <Input
+                    placeholder={TranslateText([
+                      "请输入告警名称",
+                      "Please input",
+                    ])}
+                    style={{ width: "240px" }}
+                  />
+                </Form.Item>
 
-            <Form.Item
-              label={TranslateText(["条件符号", "Symbol"])}
-              // name="symb"
-            >
-              <div className="symb" style={{ width: "500px" }}>
-                <Button type="primary" onClick={symbClick}>
-                  ()
-                </Button>
-                <Button type="primary" onClick={symbClick}>
-                  {"&&(and)"}
-                </Button>
-                <Button type="primary" onClick={symbClick}>
-                  {"||(or)"}
-                </Button>
-                <Button type="primary" onClick={symbClick}>
-                  ≥
-                </Button>
-                <Button type="primary" onClick={symbClick}>
-                  {">"}
-                </Button>
-                <Button type="primary" onClick={symbClick}>
-                  =
-                </Button>
-                <Button type="primary" onClick={symbClick}>{`<`}</Button>
-                <Button type="primary" onClick={symbClick}>
-                  ≤
-                </Button>
-                <Button type="primary" onClick={symbClick}>
-                  +
-                </Button>
-                <Button type="primary" onClick={symbClick}>
-                  -
-                </Button>
-                <Button type="primary" onClick={symbClick}>
-                  ×
-                </Button>
-                <Button type="primary" onClick={symbClick}>
-                  ÷
-                </Button>
-              </div>
-            </Form.Item>
+                <Form.Item
+                  label={TranslateText(["条件符号", "Symbol"])}
+                  // name="symb"
+                >
+                  <div className="symb" style={{ width: "500px" }}>
+                    <Button type="primary" onClick={symbClick}>
+                      ()
+                    </Button>
+                    <Button type="primary" onClick={symbClick}>
+                      {"&&(and)"}
+                    </Button>
+                    <Button type="primary" onClick={symbClick}>
+                      {"||(or)"}
+                    </Button>
+                    <Button type="primary" onClick={symbClick}>
+                      ≥
+                    </Button>
+                    <Button type="primary" onClick={symbClick}>
+                      {">"}
+                    </Button>
+                    <Button type="primary" onClick={symbClick}>
+                      =
+                    </Button>
+                    <Button type="primary" onClick={symbClick}>{`<`}</Button>
+                    <Button type="primary" onClick={symbClick}>
+                      ≤
+                    </Button>
+                    <Button type="primary" onClick={symbClick}>
+                      +
+                    </Button>
+                    <Button type="primary" onClick={symbClick}>
+                      -
+                    </Button>
+                    <Button type="primary" onClick={symbClick}>
+                      ×
+                    </Button>
+                    <Button type="primary" onClick={symbClick}>
+                      ÷
+                    </Button>
+                  </div>
+                </Form.Item>
 
-            <Form.Item
-              label={TranslateText(["条件编辑", "Edit"])}
-              // name="formu"
-            >
-              <Formular ref={formuRef} />
-            </Form.Item>
+                <Form.Item
+                  label={TranslateText(["条件编辑", "Edit"])}
+                  // name="formu"
+                >
+                  <Formular ref={formuRef} key={`${type}-${alarmId}`} />
+                </Form.Item>
 
-            <Form.Item
-              label={TranslateText(["告警组", "Alarm group"])}
-              name={"group_id"}
-            >
-              <Select
-                style={{ width: 240 }}
-                options={[
-                  ...[
+                <Form.Item
+                  label={TranslateText(["告警组", "Alarm group"])}
+                  name={"group_id"}
+                >
+                  <Select
+                    style={{ width: 240 }}
+                    options={[
+                      ...[
+                        {
+                          label: "未分组",
+                          value: 0,
+                        },
+                      ],
+                      ...(groupList?.map((item) => {
+                        return {
+                          label: item?.name,
+                          value: item?.id,
+                        };
+                      }) ?? []),
+                    ]}
+                    placeholder={TranslateText(["请选择", "Please choose"])}
+                  />
+                </Form.Item>
+
+                <Form.Item
+                  label={TranslateText(["告警级别", "Alarm level"])}
+                  name="alarm_level"
+                  rules={[
                     {
-                      label: "未分组",
-                      value: 0,
+                      required: true,
+                      message: TranslateText([
+                        "请输入告警级别",
+                        "Please input",
+                      ]),
                     },
-                  ],
-                  ...(groupList?.map((item) => {
-                    return {
-                      label: item?.name,
-                      value: item?.id,
-                    };
-                  }) ?? []),
-                ]}
-                placeholder={TranslateText(["请选择", "Please choose"])}
-              />
-            </Form.Item>
-
-            <Form.Item
-              label={TranslateText(["告警级别", "Alarm level"])}
-              name="alarm_level"
-              rules={[
-                {
-                  required: true,
-                  message: TranslateText(["请输入告警级别", "Please input"]),
-                },
-              ]}
-            >
-              <Select
-                placeholder={TranslateText(["请选择", "Please choose"])}
-                style={{ width: "240px" }}
-              >
-                <Select.Option value={1}>
-                  {TranslateText(["低", "Low"])}
-                </Select.Option>
-                <Select.Option value={2}>
-                  {TranslateText(["中", "Medium"])}
-                </Select.Option>
-                <Select.Option value={3}>
-                  {TranslateText(["高", "High"])}
-                </Select.Option>
-              </Select>
-            </Form.Item>
+                  ]}
+                >
+                  <Select
+                    placeholder={TranslateText(["请选择", "Please choose"])}
+                    style={{ width: "240px" }}
+                  >
+                    <Select.Option value={1}>
+                      {TranslateText(["低", "Low"])}
+                    </Select.Option>
+                    <Select.Option value={2}>
+                      {TranslateText(["中", "Medium"])}
+                    </Select.Option>
+                    <Select.Option value={3}>
+                      {TranslateText(["高", "High"])}
+                    </Select.Option>
+                  </Select>
+                </Form.Item>
+              </>
+            )}
           </Form>
         </div>
 
-        <div
-          style={{
-            borderRight: "1px solid rgba(255, 255, 255, 0.12)",
-            marginLeft: "16px",
-          }}
-        ></div>
+        {(!showList || type !== 0) && (
+          <>
+            <div
+              style={{
+                borderRight: "1px solid rgba(255, 255, 255, 0.12)",
+                marginLeft: "16px",
+              }}
+            ></div>
 
-        <div className="right">
-          <div className="header">
-            <Search
-              placeholder={TranslateText(["请输入点位名称", "Please input"])}
-              onSearch={onSearch}
-              style={{ width: "240px" }}
-              // className={styles.deviceListTreeSearch}
-            />
-          </div>
-          <Table
-            onRow={(record) => {
-              return {
-                onClick: (event) => {
-                  clickTableRow(record);
-                }, // 点击行
-              };
-            }}
-            key={deviceList}
-            loading={loading}
-            columns={columns}
-            dataSource={deviceList}
-            rowKey="point_id"
-            // className="deviceListTable"
-            pagination={paginationProps}
-            onChange={handleTableChange}
-            size="middle"
-          />
-        </div>
+            <div className="right">
+              <div className="header">
+                <Search
+                  placeholder={TranslateText([
+                    "请输入点位名称",
+                    "Please input",
+                  ])}
+                  onSearch={onSearch}
+                  style={{ width: "240px" }}
+                  // className={styles.deviceListTreeSearch}
+                />
+              </div>
+              <Table
+                onRow={(record) => {
+                  return {
+                    onClick: (event) => {
+                      clickTableRow(record);
+                    }, // 点击行
+                  };
+                }}
+                key={deviceList}
+                loading={loading}
+                columns={columns}
+                dataSource={deviceList}
+                rowKey="point_id"
+                // className="deviceListTable"
+                pagination={paginationProps}
+                onChange={handleTableChange}
+                size="middle"
+              />
+            </div>
+          </>
+        )}
       </div>
     </div>
   );

src/pages/Alarm/components/easy.jsx

@@ -28,7 +28,7 @@ function TranslateText(arr) {
 }
 
 const Easy = (props, ref) => {
-  const { alarmId, groupList = [] } = props;
+  const { editId, groupList = [], pointId = null } = props;
   const [form] = Form.useForm();
   // const [alarmId, setAlarmId] = useState(searchParams.get('alarm_id'))
   // const [token, setToken] = useState(searchParams.get('token'))
@@ -45,6 +45,7 @@ const Easy = (props, ref) => {
   const [alEnable, setAlEnable] = useState(false);
   const [allEnable, setAllEnable] = useState(false);
   const [showMore, setShowMore] = useState(false);
+  const [alarmId, setAlarmId] = useState(null);
 
   const onModalOk = useMemoizedFn(async () => {
     const isNull = (val, bool) => {
@@ -263,6 +264,18 @@ const Easy = (props, ref) => {
     run();
   }, [alarmId]);
 
+  useEffect(() => {
+    async function run() {
+      if (editId && editId !== -1) {
+        setAlarmId(editId);
+      } else if (pointId && pointId !== -1) {
+        const res = await API2.getRuleIdByPointId(pointId);
+        setAlarmId(res?.data?.[0]?.id);
+      }
+    }
+    run();
+  }, [editId, pointId]);
+
   useEffect(() => {
     if (data) {
       setSubType(data.sub_type);