bugfix

src/App.jsx

@@ -39,17 +39,17 @@ function Home(props) {
         // //   pointId: "ABC123_AAA_chr1_AEff_MIN_H",
         // // }}
       ></Alarm.DetailModal> */}
-      <Alarm.ComplexConfig
+      {/* <Alarm.ComplexConfig
         ref={compRef}
         editId={-1}
       ></Alarm.ComplexConfig>
-      <button onClick={() => compRef?.current?.ok()}>测试</button>
-      {/* <Alarm.EasyConfig
+      <button onClick={() => compRef?.current?.ok()}>测试</button> */}
+      <Alarm.EasyConfig
         ref={compRef}
         // pointId="ZWB_ALARM_chr_2_AQ"
         // readonly
         editId={-1}
-      ></Alarm.EasyConfig> */}
+      ></Alarm.EasyConfig>
     </>
   );
 }

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, pointId, readonly } = props;
+  const { editId = -1, onConfirm, groupList, pointId, readonly, style } = props;
   const compRef = useRef(null);
 
   const [themeName, setThemeName] = useState();
@@ -53,6 +53,7 @@ const EasyConfig = forwardRef((props, ref) => {
               onConfirm={onConfirm}
               groupList={groupList}
               readonly={readonly}
+              style={style}
             />
           </App>
         </ConfigProvider>
@@ -62,7 +63,7 @@ const EasyConfig = forwardRef((props, ref) => {
 });
 
 const ComplexConfig = forwardRef((props, ref) => {
-  const { editId = -1, onConfirm, groupList, showList } = props;
+  const { editId = -1, onConfirm, groupList, showList, style, rightStyle } = props;
   const compRef = useRef(null);
 
   const [themeName, setThemeName] = useState();
@@ -94,6 +95,8 @@ const ComplexConfig = forwardRef((props, ref) => {
               onConfirm={onConfirm}
               groupList={groupList}
               showList={showList}
+              style={style}
+              rightStyle={rightStyle}
             />
           </App>
         </ConfigProvider>

src/pages/Alarm/components/complex.jsx

@@ -45,7 +45,7 @@ const Complex = (props, ref) => {
   const [loading, setLoading] = useState(false);
   const [deviceList, setDeviceList] = useState([]);
   const [paginationProps, setPaginationProps] = useState({
-    pageSize: 10,
+    pageSize: 15,
     current: 1,
     showTotal: (total) => `共${total}条`,
     // showQuickJumper: true,
@@ -244,7 +244,7 @@ const Complex = (props, ref) => {
   return (
     <div className={styles.wrapper}>
       <div className="main">
-        <div className="left">
+        <div className="left" style={props.style}>
           <Form
             name="basic"
             autoComplete="off"
@@ -354,15 +354,15 @@ const Complex = (props, ref) => {
                 <Form.Item
                   label={TranslateText(["告警级别", "Alarm level"])}
                   name="alarm_level"
-                  rules={[
-                    {
-                      required: true,
-                      message: TranslateText([
-                        "请输入告警级别",
-                        "Please input",
-                      ]),
-                    },
-                  ]}
+                  // rules={[
+                  //   {
+                  //     required: true,
+                  //     message: TranslateText([
+                  //       "请输入告警级别",
+                  //       "Please input",
+                  //     ]),
+                  //   },
+                  // ]}
                 >
                   <Select
                     placeholder={TranslateText(["请选择", "Please choose"])}
@@ -450,7 +450,7 @@ const Complex = (props, ref) => {
 
         {(!showList || type !== 0) && (
           <>
-            <div className="right">
+            <div className="right" style={props.rightStyle}>
               <div className="header">
                 <Search
                   placeholder={TranslateText([
@@ -478,7 +478,7 @@ const Complex = (props, ref) => {
                 // className="deviceListTable"
                 pagination={paginationProps}
                 onChange={handleTableChange}
-                size="middle"
+                size="small"
               />
             </div>
           </>

src/pages/Alarm/components/complex.module.less

@@ -45,6 +45,7 @@
 
       .left {
         padding-top: 16px;
+        padding-left: 1px;
         width: 60%;
         border-right: 1px solid var(--dt-line-color2);
       }

src/pages/Alarm/components/easy.jsx

@@ -461,485 +461,499 @@ const Easy = (props, ref) => {
   };
 
   return (
-    <Form
-      className={styles.wrapper}
-      name="basic"
-      autoComplete="off"
-      form={form}
-      // requiredMark={false}
-      labelAlign="left"
-      colon={false}
-      labelCol={{
-        span: 6,
-      }}
-      onValuesChange={onValuesChange}
-      wrapperCol={{
-        span: 18,
-      }}
-    >
-      <Form.Item label={TranslateText(["告警类型", "Mode"])} name={"sub_type"}>
-        <Radio.Group disabled={alarmId !== -1}>
-          <Radio value={14}>限值报警</Radio>
-          <Radio value={13}>离散报警</Radio>
-        </Radio.Group>
-      </Form.Item>
-      <Form.Item
-        label={TranslateText(["点位名称", "Point name"])}
-        name="point_name"
-        rules={[
-          {
-            required: true,
-            message: TranslateText(["请输入点位名称", "Please input"]),
-          },
-        ]}
-        getValueFromEvent={(e) => e.value}
+    <div style={props.style}>
+      <Form
+        className={styles.wrapper}
+        name="basic"
+        autoComplete="off"
+        form={form}
+        // requiredMark={false}
+        labelAlign="left"
+        colon={false}
+        labelCol={{
+          span: 6,
+        }}
+        onValuesChange={onValuesChange}
+        wrapperCol={{
+          span: 18,
+        }}
       >
-        <Select
-          showSearch
-          disabled={alarmId !== -1 || props.readonly}
-          filterOption={false}
-          dropdownMatchSelectWidth={400}
-          labelInValue={true}
-          onChange={(e) => {
-            onChange(e);
-          }}
-          onSearch={onSearch}
-          placeholder={TranslateText(["请输入点位名称", "Please input"])}
-          style={{ width: "320px" }}
+        <Form.Item
+          label={TranslateText(["告警类型", "Mode"])}
+          name={"sub_type"}
         >
-          {pointList.map((item, index) => {
-            return (
-              <Select.Option
-                value={
-                  item.name +
-                    "<==>" +
-                    item.defer_unit +
-                    "<==>" +
-                    item.point_id +
-                    "<==>" +
-                    item.unit || ""
-                }
-                key={item.point_id}
-              >
-                {item.name}({item.point_id})(
-                {item.defer_unit === 1 ? "秒级" : "分钟级"})
-              </Select.Option>
-            );
-          })}
-        </Select>
-      </Form.Item>
-
-      <Form.Item
-        label={TranslateText(["点位编号", "Point id"])}
-        name="point_id"
-        style={{ display: alarmId === -1 && !props.readonly ? "none" : "" }}
-      >
-        <Input
-          placeholder={TranslateText(["请输入point_id", "Please input"])}
-          disabled={alarmId !== -1 || props.readonly}
-          style={{ width: "320px" }}
-        />
-      </Form.Item>
-      <Form.Item
-        label={TranslateText(["告警名称", "Alarm name"])}
-        name="name"
-        rules={[
-          {
-            required: true,
-            message: TranslateText(["请输入告警名称", "Please input"]),
-          },
-        ]}
-      >
-        <Input
-          placeholder={TranslateText(["请输入告警名称", "Please input"])}
-          style={{ width: "320px" }}
-        />
-      </Form.Item>
-
-      {subType === 13 && (
+          <Radio.Group disabled={alarmId !== -1}>
+            <Radio value={14}>限值报警</Radio>
+            <Radio value={13}>离散报警</Radio>
+          </Radio.Group>
+        </Form.Item>
         <Form.Item
-          label={TranslateText(["告警值", "Alarm value"])}
-          name="alarm_value"
-          required={true}
+          label={TranslateText(["点位名称", "Point name"])}
+          name="point_name"
           rules={[
             {
               required: true,
-              message: TranslateText(["请输入告警值", "Please input"]),
+              message: TranslateText(["请输入点位名称", "Please input"]),
             },
-            () => ({
-              validator(rule, value) {
-                let regPos =
-                  /^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9])$)|^(([1-9]+)$)/;
-                let regNeg =
-                  /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
-                if (regPos.test(value) || regNeg.test(value)) {
-                  //if中是正则表达是,判断是否是6位数字
-                  return Promise.resolve();
-                } else {
-                  if (!Boolean(value)) return Promise.resolve();
-                  return Promise.reject("只能输入整数、小数或负数"); //如果违反规则，就会给出提示
-                }
-              },
-            }),
           ]}
+          getValueFromEvent={(e) => e.value}
         >
-          <Input
-            placeholder={TranslateText(["请输入告警值", "Please input"])}
-            style={{ width: "200px" }}
-          />
-        </Form.Item>
-      )}
-
-      {subType === 14 && (
-        <>
-          <Form.Item label="阈值">
-            <div>
-              <Space size={8}>
-                <div className={styles.itemContainer}>
-                  {ah && <div className={styles.label}>上限</div>}
-                  <Form.Item
-                    name="ah_value"
-                    key={ahEnable}
-                    noStyle
-                    rules={[
-                      {
-                        required: ahEnable,
-                        message: TranslateText(["请输入上限", "Please input"]),
-                      },
-                      () => ({
-                        validator(rule, value) {
-                          let regPos =
-                            /^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9])$)|^(([1-9]+)$)/;
-                          let regNeg =
-                            /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
-                          if (regPos.test(value) || regNeg.test(value)) {
-                            //if中是正则表达是,判断是否是6位数字
-                            return Promise.resolve();
-                          } else {
-                            if (!Boolean(value)) return Promise.resolve();
-                            return Promise.reject("只能输入整数、小数或负数"); //如果违反规则，就会给出提示
-                          }
-                        },
-                      }),
-                    ]}
-                  >
-                    <Input
-                      placeholder={TranslateText(["上限", "Please input"])}
-                      style={{ width: "128px" }}
-                    />
-                  </Form.Item>
-                </div>
-                <Form.Item name="ah_enable" valuePropName="checked" noStyle>
-                  <Checkbox size={"small"} />
-                </Form.Item>
-                <div className={styles.itemContainer}>
-                  {ahh && <div className={styles.label}>上上限</div>}
-                  <Form.Item
-                    name="ahh_value"
-                    key={ahhEnable}
-                    noStyle
-                    rules={[
-                      {
-                        required: ahhEnable,
-                        message: TranslateText([
-                          "请输入上上限",
-                          "Please input",
-                        ]),
-                      },
-                      () => ({
-                        validator(rule, value) {
-                          let regPos =
-                            /^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9])$)|^(([1-9]+)$)/;
-                          let regNeg =
-                            /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
-                          if (regPos.test(value) || regNeg.test(value)) {
-                            //if中是正则表达是,判断是否是6位数字
-                            return Promise.resolve();
-                          } else {
-                            if (!Boolean(value)) return Promise.resolve();
-                            return Promise.reject("只能输入整数、小数或负数"); //如果违反规则，就会给出提示
-                          }
-                        },
-                      }),
-                    ]}
-                  >
-                    <Input
-                      placeholder={TranslateText(["上上限", "Please input"])}
-                      style={{ width: "128px", marginLeft: 8 }}
-                    />
-                  </Form.Item>
-                </div>
-
-                <Form.Item
-                  label={""}
-                  name="ahh_enable"
-                  valuePropName="checked"
-                  noStyle
+          <Select
+            showSearch
+            disabled={alarmId !== -1 || props.readonly}
+            filterOption={false}
+            dropdownMatchSelectWidth={400}
+            labelInValue={true}
+            onChange={(e) => {
+              onChange(e);
+            }}
+            onSearch={onSearch}
+            placeholder={TranslateText(["请输入点位名称", "Please input"])}
+            style={{ width: "320px" }}
+          >
+            {pointList.map((item, index) => {
+              return (
+                <Select.Option
+                  value={
+                    item.name +
+                      "<==>" +
+                      item.defer_unit +
+                      "<==>" +
+                      item.point_id +
+                      "<==>" +
+                      item.unit || ""
+                  }
+                  key={item.point_id}
                 >
-                  <Checkbox size={"small"} />
-                </Form.Item>
-              </Space>
-            </div>
-            <div style={{ marginTop: 10 }}>
-              <Space size={8}>
-                <div className={styles.itemContainer}>
-                  {al && <div className={styles.label}>下限</div>}
-                  <Form.Item
-                    name="al_value"
-                    key={alEnable}
-                    noStyle
-                    rules={[
-                      {
-                        required: alEnable,
-                        message: TranslateText(["请输入下限", "Please input"]),
-                      },
-                      () => ({
-                        validator(rule, value) {
-                          let regPos =
-                            /^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9])$)|^(([1-9]+)$)/;
-                          let regNeg =
-                            /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
-                          if (regPos.test(value) || regNeg.test(value)) {
-                            //if中是正则表达是,判断是否是6位数字
-                            return Promise.resolve();
-                          } else {
-                            if (!Boolean(value)) return Promise.resolve();
-                            return Promise.reject("只能输入整数、小数或负数"); //如果违反规则，就会给出提示
-                          }
-                        },
-                      }),
-                    ]}
-                  >
-                    <Input
-                      placeholder={TranslateText(["下限", "Please input"])}
-                      style={{ width: "128px" }}
-                    />
-                  </Form.Item>
-                </div>
-
-                <Form.Item name="al_enable" valuePropName="checked" noStyle>
-                  <Checkbox size={"small"} />
-                </Form.Item>
-                <div className={styles.itemContainer}>
-                  {all && <div className={styles.label}>下下限</div>}
-                  <Form.Item
-                    name="all_value"
-                    key={allEnable}
-                    noStyle
-                    rules={[
-                      {
-                        required: allEnable,
-                        message: TranslateText([
-                          "请输入下下限",
-                          "Please input",
-                        ]),
-                      },
-                      () => ({
-                        validator(rule, value) {
-                          let regPos =
-                            /^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9])$)|^(([1-9]+)$)/;
-                          let regNeg =
-                            /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
-                          if (regPos.test(value) || regNeg.test(value)) {
-                            //if中是正则表达是,判断是否是6位数字
-                            return Promise.resolve();
-                          } else {
-                            if (!Boolean(value)) return Promise.resolve();
-                            return Promise.reject("只能输入整数、小数或负数"); //如果违反规则，就会给出提示
-                          }
-                        },
-                      }),
-                    ]}
-                  >
-                    <Input
-                      placeholder={TranslateText(["下下限", "Please input"])}
-                      style={{ width: "128px", marginLeft: 8 }}
-                    />
-                  </Form.Item>
-                </div>
+                  {item.name}({item.point_id})(
+                  {item.defer_unit === 1 ? "秒级" : "分钟级"})
+                </Select.Option>
+              );
+            })}
+          </Select>
+        </Form.Item>
 
-                <Form.Item name="all_enable" valuePropName="checked" noStyle>
-                  <Checkbox size={"small"} />
-                </Form.Item>
-              </Space>
-            </div>
-          </Form.Item>
-        </>
-      )}
-      <Form.Item
-        label={TranslateText(["告警级别", "Level"])}
-        required={false}
-        name="alarm_level"
-        rules={[
-          {
-            required: true,
-            message: TranslateText(["请输入告警级别", "Please input"]),
-          },
-        ]}
-      >
-        <Select
-          placeholder={TranslateText(["请选择", "Please choose"])}
-          style={{ width: "200px" }}
+        <Form.Item
+          label={TranslateText(["点位编号", "Point id"])}
+          name="point_id"
+          // style={{ display: !props.readonly ? "none" : "" }}
         >
-          <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.Item label="告警开关" name="status">
-        <Switch size={"small"} />
-      </Form.Item>
-
-      {!showMore && (
+          <Input
+            placeholder={TranslateText(["请输入point_id", "Please input"])}
+            disabled
+            style={{ width: "320px" }}
+          />
+        </Form.Item>
         <Form.Item
-          label={
-            <Button
-              type="link"
-              onClick={() => {
-                setShowMore(true);
-              }}
-            >
-              更多
-              <DownOutlined></DownOutlined>
-            </Button>
-          }
-        ></Form.Item>
-      )}
+          label={TranslateText(["告警名称", "Alarm name"])}
+          name="name"
+          rules={[
+            {
+              required: true,
+              message: TranslateText(["请输入告警名称", "Please input"]),
+            },
+          ]}
+        >
+          <Input
+            placeholder={TranslateText(["请输入告警名称", "Please input"])}
+            style={{ width: "320px" }}
+          />
+        </Form.Item>
 
-      {showMore && (
-        <>
+        {subType === 13 && (
           <Form.Item
-            label={TranslateText(["单位", "Unit"])}
-            name="unit"
+            label={TranslateText(["告警值", "Alarm value"])}
+            name="alarm_value"
+            required={true}
             rules={[
               {
-                required: false,
-                message: TranslateText(["请输入单位", "Please input"]),
+                required: true,
+                message: TranslateText(["请输入告警值", "Please input"]),
               },
+              () => ({
+                validator(rule, value) {
+                  let regPos =
+                    /^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9])$)|^(([1-9]+)$)/;
+                  let regNeg =
+                    /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
+                  if (regPos.test(value) || regNeg.test(value)) {
+                    //if中是正则表达是,判断是否是6位数字
+                    return Promise.resolve();
+                  } else {
+                    if (!Boolean(value)) return Promise.resolve();
+                    return Promise.reject("只能输入整数、小数或负数"); //如果违反规则，就会给出提示
+                  }
+                },
+              }),
             ]}
           >
             <Input
-              placeholder={TranslateText(["请输入", "Please input"])}
+              placeholder={TranslateText(["请输入告警值", "Please input"])}
               style={{ width: "200px" }}
             />
           </Form.Item>
+        )}
+
+        {subType === 14 && (
+          <>
+            <Form.Item label="阈值">
+              <div>
+                <Space size={8}>
+                  <div className={styles.itemContainer}>
+                    {ah && <div className={styles.label}>上限</div>}
+                    <Form.Item
+                      name="ah_value"
+                      key={ahEnable}
+                      noStyle
+                      rules={[
+                        {
+                          required: ahEnable,
+                          message: TranslateText([
+                            "请输入上限",
+                            "Please input",
+                          ]),
+                        },
+                        () => ({
+                          validator(rule, value) {
+                            let regPos =
+                              /^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9])$)|^(([1-9]+)$)/;
+                            let regNeg =
+                              /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
+                            if (regPos.test(value) || regNeg.test(value)) {
+                              //if中是正则表达是,判断是否是6位数字
+                              return Promise.resolve();
+                            } else {
+                              if (!Boolean(value)) return Promise.resolve();
+                              return Promise.reject("只能输入整数、小数或负数"); //如果违反规则，就会给出提示
+                            }
+                          },
+                        }),
+                      ]}
+                    >
+                      <Input
+                        disabled={!ahEnable}
+                        placeholder={TranslateText(["上限", "Please input"])}
+                        style={{ width: "128px" }}
+                      />
+                    </Form.Item>
+                  </div>
+                  <Form.Item name="ah_enable" valuePropName="checked" noStyle>
+                    <Checkbox size={"small"} />
+                  </Form.Item>
+                  <div className={styles.itemContainer}>
+                    {ahh && <div className={styles.label}>上上限</div>}
+                    <Form.Item
+                      name="ahh_value"
+                      key={ahhEnable}
+                      noStyle
+                      rules={[
+                        {
+                          required: ahhEnable,
+                          message: TranslateText([
+                            "请输入上上限",
+                            "Please input",
+                          ]),
+                        },
+                        () => ({
+                          validator(rule, value) {
+                            let regPos =
+                              /^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9])$)|^(([1-9]+)$)/;
+                            let regNeg =
+                              /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
+                            if (regPos.test(value) || regNeg.test(value)) {
+                              //if中是正则表达是,判断是否是6位数字
+                              return Promise.resolve();
+                            } else {
+                              if (!Boolean(value)) return Promise.resolve();
+                              return Promise.reject("只能输入整数、小数或负数"); //如果违反规则，就会给出提示
+                            }
+                          },
+                        }),
+                      ]}
+                    >
+                      <Input
+                        disabled={!ahhEnable}
+                        placeholder={TranslateText(["上上限", "Please input"])}
+                        style={{ width: "128px", marginLeft: 8 }}
+                      />
+                    </Form.Item>
+                  </div>
 
-          <Form.Item
-            label={TranslateText(["告警组", "Group"])}
-            name={"group_id"}
+                  <Form.Item
+                    label={""}
+                    name="ahh_enable"
+                    valuePropName="checked"
+                    noStyle
+                  >
+                    <Checkbox size={"small"} />
+                  </Form.Item>
+                </Space>
+              </div>
+              <div style={{ marginTop: 10 }}>
+                <Space size={8}>
+                  <div className={styles.itemContainer}>
+                    {al && <div className={styles.label}>下限</div>}
+                    <Form.Item
+                      name="al_value"
+                      key={alEnable}
+                      noStyle
+                      rules={[
+                        {
+                          required: alEnable,
+                          message: TranslateText([
+                            "请输入下限",
+                            "Please input",
+                          ]),
+                        },
+                        () => ({
+                          validator(rule, value) {
+                            let regPos =
+                              /^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9])$)|^(([1-9]+)$)/;
+                            let regNeg =
+                              /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
+                            if (regPos.test(value) || regNeg.test(value)) {
+                              //if中是正则表达是,判断是否是6位数字
+                              return Promise.resolve();
+                            } else {
+                              if (!Boolean(value)) return Promise.resolve();
+                              return Promise.reject("只能输入整数、小数或负数"); //如果违反规则，就会给出提示
+                            }
+                          },
+                        }),
+                      ]}
+                    >
+                      <Input
+                        disabled={!alEnable}
+                        placeholder={TranslateText(["下限", "Please input"])}
+                        style={{ width: "128px" }}
+                      />
+                    </Form.Item>
+                  </div>
+
+                  <Form.Item name="al_enable" valuePropName="checked" noStyle>
+                    <Checkbox size={"small"} />
+                  </Form.Item>
+                  <div className={styles.itemContainer}>
+                    {all && <div className={styles.label}>下下限</div>}
+                    <Form.Item
+                      name="all_value"
+                      key={allEnable}
+                      noStyle
+                      rules={[
+                        {
+                          required: allEnable,
+                          message: TranslateText([
+                            "请输入下下限",
+                            "Please input",
+                          ]),
+                        },
+                        () => ({
+                          validator(rule, value) {
+                            let regPos =
+                              /^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9])$)|^(([1-9]+)$)/;
+                            let regNeg =
+                              /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
+                            if (regPos.test(value) || regNeg.test(value)) {
+                              //if中是正则表达是,判断是否是6位数字
+                              return Promise.resolve();
+                            } else {
+                              if (!Boolean(value)) return Promise.resolve();
+                              return Promise.reject("只能输入整数、小数或负数"); //如果违反规则，就会给出提示
+                            }
+                          },
+                        }),
+                      ]}
+                    >
+                      <Input
+                        disabled={!allEnable}
+                        placeholder={TranslateText(["下下限", "Please input"])}
+                        style={{ width: "128px", marginLeft: 8 }}
+                      />
+                    </Form.Item>
+                  </div>
+
+                  <Form.Item name="all_enable" valuePropName="checked" noStyle>
+                    <Checkbox size={"small"} />
+                  </Form.Item>
+                </Space>
+              </div>
+            </Form.Item>
+          </>
+        )}
+        <Form.Item
+          label={TranslateText(["告警级别", "Level"])}
+          required={false}
+          name="alarm_level"
+          rules={[
+            {
+              required: true,
+              message: TranslateText(["请输入告警级别", "Please input"]),
+            },
+          ]}
+        >
+          <Select
+            placeholder={TranslateText(["请选择", "Please choose"])}
+            style={{ width: "200px" }}
           >
-            <Select
-              style={{ width: 200 }}
-              options={[
-                ...[
-                  {
-                    label: "未分组",
-                    value: 0,
-                  },
-                ],
-                ...(groupList?.map((item) => {
-                  return {
-                    label: item?.name,
-                    value: item?.id,
-                  };
-                }) ?? []),
-              ]}
-              placeholder={TranslateText(["请选择", "Please choose"])}
-            />
-          </Form.Item>
+            <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.Item label="告警开关" name="status">
+          <Switch size={"small"} />
+        </Form.Item>
 
+        {!showMore && (
           <Form.Item
-            name={isDisabled ? "" : "defer_seconds"}
-            disabled={isDisabled}
-            required={true}
-            label={TranslateText(["延时告警", "Delayed alarm"])}
-          >
-            <div>
-              <div
-                style={{
-                  display: "flex",
-                  gap: 8,
-                  alignItems: "center",
+            label={
+              <Button
+                type="link"
+                onClick={() => {
+                  setShowMore(true);
                 }}
               >
-                <Checkbox
-                  checked={status === 1}
-                  disabled={isDisabled}
-                  onChange={(e) => {
-                    setStatus(e.target.checked ? 1 : 2);
-                    if (e.target.checked) {
-                      setDateTime(null);
-                    } else {
-                      setDateTime(0);
-                    }
-                  }}
-                ></Checkbox>
-                <span
-                  style={{
-                    color: "var(--dt-text-color1)",
-                    fontWeight: 400,
-                    fontSize: 14,
-                  }}
-                >
-                  {TranslateText(["持续", "Alarm after"])}
-                </span>
-                <Input
-                  disabled={status !== 1 || isDisabled}
-                  value={dateTime}
-                  onChange={(e) => {
-                    console.log(e.target.value);
-                    setDateTime(e.target.value?.replace(/\D/g, ""));
-                  }}
-                  placeholder={TranslateText(["请输入", "Please input"])}
-                  style={{ width: 100 }}
-                />
-                <span
+                更多
+                <DownOutlined></DownOutlined>
+              </Button>
+            }
+          ></Form.Item>
+        )}
+
+        {showMore && (
+          <>
+            <Form.Item
+              label={TranslateText(["单位", "Unit"])}
+              name="unit"
+              rules={[
+                {
+                  required: false,
+                  message: TranslateText(["请输入单位", "Please input"]),
+                },
+              ]}
+            >
+              <Input
+                placeholder={TranslateText(["请输入", "Please input"])}
+                style={{ width: "200px" }}
+              />
+            </Form.Item>
+
+            <Form.Item
+              label={TranslateText(["告警组", "Group"])}
+              name={"group_id"}
+            >
+              <Select
+                style={{ width: 200 }}
+                options={[
+                  ...[
+                    {
+                      label: "未分组",
+                      value: 0,
+                    },
+                  ],
+                  ...(groupList?.map((item) => {
+                    return {
+                      label: item?.name,
+                      value: item?.id,
+                    };
+                  }) ?? []),
+                ]}
+                placeholder={TranslateText(["请选择", "Please choose"])}
+              />
+            </Form.Item>
+
+            <Form.Item
+              name={isDisabled ? "" : "defer_seconds"}
+              disabled={isDisabled}
+              label={TranslateText(["延时告警", "Delayed alarm"])}
+            >
+              <div>
+                <div
                   style={{
-                    color: "var(--dt-text-color1)",
-                    fontWeight: 400,
-                    fontSize: 14,
+                    display: "flex",
+                    gap: 8,
+                    alignItems: "center",
                   }}
                 >
-                  {deferUnit === 1
-                    ? TranslateText(["秒", "seconds"])
-                    : TranslateText(["分钟", "minutes"])}{" "}
-                  {TranslateText(["后报警", "of duration"])}
-                </span>
+                  <Checkbox
+                    checked={status === 1}
+                    disabled={isDisabled}
+                    onChange={(e) => {
+                      setStatus(e.target.checked ? 1 : 2);
+                      if (e.target.checked) {
+                        setDateTime(null);
+                      } else {
+                        setDateTime(0);
+                      }
+                    }}
+                  ></Checkbox>
+                  <span
+                    style={{
+                      color: "var(--dt-text-color1)",
+                      fontWeight: 400,
+                      fontSize: 14,
+                    }}
+                  >
+                    {TranslateText(["持续", "Alarm after"])}
+                  </span>
+                  <Input
+                    disabled={status !== 1 || isDisabled}
+                    value={dateTime}
+                    onChange={(e) => {
+                      console.log(e.target.value);
+                      setDateTime(e.target.value?.replace(/\D/g, ""));
+                    }}
+                    placeholder={TranslateText(["请输入", "Please input"])}
+                    style={{ width: 100 }}
+                  />
+                  <span
+                    style={{
+                      color: "var(--dt-text-color1)",
+                      fontWeight: 400,
+                      fontSize: 14,
+                    }}
+                  >
+                    {deferUnit === 1
+                      ? TranslateText(["秒", "seconds"])
+                      : TranslateText(["分钟", "minutes"])}{" "}
+                    {TranslateText(["后报警", "of duration"])}
+                  </span>
+                </div>
+                {dateTime !== null &&
+                  ["", undefined, null].indexOf(dateTime) !== -1 &&
+                  status === 1 &&
+                  !isDisabled && (
+                    <div style={{ color: "var(--dt-error-color1)" }}>
+                      请输入数字
+                    </div>
+                  )}
               </div>
-              {dateTime !== null &&
-                ["", undefined, null].indexOf(dateTime) !== -1 &&
-                status === 1 &&
-                !isDisabled && (
-                  <div style={{ color: "var(--dt-error-color1)" }}>
-                    请输入数字
-                  </div>
-                )}
-            </div>
-          </Form.Item>
-        </>
-      )}
+            </Form.Item>
+          </>
+        )}
 
-      {showMore && (
-        <Form.Item
-          label={
-            <Button
-              type="link"
-              onClick={() => {
-                setShowMore(false);
-              }}
-            >
-              收起<UpOutlined></UpOutlined>
-            </Button>
-          }
-        ></Form.Item>
-      )}
-    </Form>
+        {showMore && (
+          <Form.Item
+            label={
+              <Button
+                type="link"
+                onClick={() => {
+                  setShowMore(false);
+                }}
+              >
+                收起<UpOutlined></UpOutlined>
+              </Button>
+            }
+          ></Form.Item>
+        )}
+      </Form>
+    </div>
   );
 };
 

src/pages/Alarm/components/easy.module.less

@@ -39,7 +39,7 @@
   font-size: 12px;
   transform: scale(0.8);
   color: var(--dt-text-color3);
-  left: 12px;
+  left: 4px;
   top: -8px;
   z-index: 9999;
   background-color: var(--dt-fill-color3);

src/utils/theme/index.js

@@ -133,6 +133,7 @@ const antdTokenCorRes = {
     "Table": {
       "controlItemBgActive": "transparent",
       "controlItemBgActiveHover": "transparent",
+      'headerBg': '--dt-special-color6',
     },
   }
 }