v0.9.12

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dt-alarm-component",
-  "version": "0.9.11",
+  "version": "0.9.12",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

src/App.jsx

@@ -7,7 +7,7 @@ function Home(props) {
 
   return (
     <>
-      <Alarm.DetailModal
+      {/* <Alarm.DetailModal
         open={open}
         onCancel={() => setOpen(false)}
         // options={{ ruleId: 69 }}
@@ -38,9 +38,12 @@ function Home(props) {
         // // options={{
         // //   pointId: "ABC123_AAA_chr1_AEff_MIN_H",
         // // }}
-      ></Alarm.DetailModal>
-      {/* <Alarm.ComplexConfig ref={compRef} showList editId={-1}></Alarm.ComplexConfig>
-      <button onClick={() => compRef?.current?.ok()}>测试</button> */}
+      ></Alarm.DetailModal> */}
+      <Alarm.ComplexConfig
+        ref={compRef}
+        editId={-1}
+      ></Alarm.ComplexConfig>
+      <button onClick={() => compRef?.current?.ok()}>测试</button>
       {/* <Alarm.EasyConfig
         ref={compRef}
         // pointId="ZWB_ALARM_chr_2_AQ"

src/pages/Alarm/components/complex.jsx

@@ -323,10 +323,63 @@ const Complex = (props, ref) => {
                       "请输入告警名称",
                       "Please input",
                     ])}
-                    style={{ width: "240px" }}
+                    style={{ width: "320px" }}
                   />
                 </Form.Item>
 
+                <Form.Item
+                  label={TranslateText(["告警组", "Alarm 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
+                  label={TranslateText(["告警级别", "Alarm level"])}
+                  name="alarm_level"
+                  rules={[
+                    {
+                      required: true,
+                      message: TranslateText([
+                        "请输入告警级别",
+                        "Please input",
+                      ]),
+                    },
+                  ]}
+                >
+                  <Select
+                    placeholder={TranslateText(["请选择", "Please choose"])}
+                    style={{ width: "200px" }}
+                  >
+                    <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={TranslateText(["条件符号", "Symbol"])}
                   // name="symb"
@@ -390,59 +443,6 @@ const Complex = (props, ref) => {
                 >
                   <Formular ref={formuRef} key={`${type}-${alarmId}`} />
                 </Form.Item>
-
-                <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={[
-                    {
-                      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>
               </>
             )}
           </Form>
@@ -450,18 +450,11 @@ const Complex = (props, ref) => {
 
         {(!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}

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

@@ -42,15 +42,18 @@
       width: 100%;
 
       .left {
+        padding-top: 16px;
         width: 60%;
+        border-right: 1px solid var(--dt-line-color2);
       }
 
       .right {
+        padding-top: 16px;
         width: 40%;
         margin-left: 16px;
 
         .header {
-          margin-bottom: 16px;
+          margin-bottom: 4px;
         }
       }
     }

src/pages/Alarm/components/components/AlarmDetail/index.module.less

@@ -91,6 +91,7 @@
     color: var(--dt-text-color2);
     font-size: 18px;
     margin-bottom: 18px;
+    margin-top: 4px;
   }
   .buttons {
     display: flex;

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

@@ -9,8 +9,8 @@
       margin: 0 auto;
       width: 100%;
       height: 236px;
-      background: var(--dt-fill-color1);
-      border: 1px solid rgba(255, 255, 255, 0.12);
+      border: 1px solid var(--dt-line-color3);
+      border-radius: 6px;
       text-align: left;
       padding: 10px;
       overflow: auto;
@@ -49,7 +49,6 @@
         margin: 0 1px;
         cursor: pointer;
       }
-
     }
   }
-}
+}

src/pages/Alarm/components/easy.jsx

@@ -4,7 +4,16 @@ import React, {
   forwardRef,
   useImperativeHandle,
 } from "react";
-import { Form, Input, Select, message, Switch, Space, Col } from "antd";
+import {
+  Form,
+  Input,
+  Select,
+  message,
+  Switch,
+  Space,
+  Col,
+  Checkbox,
+} from "antd";
 import { Modal, Button, Radio } from "antd";
 import styles from "./easy.module.less";
 import API2 from "../../../api/alarm";
@@ -34,6 +43,11 @@ const Easy = (props, ref) => {
   // const [alarmId, setAlarmId] = useState(searchParams.get('alarm_id'))
   // const [token, setToken] = useState(searchParams.get('token'))
   // const [apiUrl, setApiUrl] = useState(decodeURIComponent(searchParams.get('api_url')) + '/')
+  const ah = Form.useWatch("ah_value", form);
+  const ahh = Form.useWatch("ahh_value", form);
+  const al = Form.useWatch("al_value", form);
+  const all = Form.useWatch("all_value", form);
+
   const [data, setData] = useState();
   const [deferUnit, setDeferUnit] = useState();
   const [status, setStatus] = useState(2);
@@ -453,14 +467,14 @@ const Easy = (props, ref) => {
       autoComplete="off"
       form={form}
       // requiredMark={false}
-      labelAlign="right"
+      labelAlign="left"
       colon={false}
       labelCol={{
-        span: 7,
+        span: 1,
       }}
       onValuesChange={onValuesChange}
       wrapperCol={{
-        span: 17,
+        span: 23,
       }}
     >
       <Form.Item label={TranslateText(["告警类型", "Mode"])} name={"sub_type"}>
@@ -491,7 +505,7 @@ const Easy = (props, ref) => {
           }}
           onSearch={onSearch}
           placeholder={TranslateText(["请输入点位名称", "Please input"])}
-          style={{ width: "240px" }}
+          style={{ width: "320px" }}
         >
           {pointList.map((item, index) => {
             return (
@@ -523,7 +537,7 @@ const Easy = (props, ref) => {
         <Input
           placeholder={TranslateText(["请输入point_id", "Please input"])}
           disabled={alarmId !== -1 || props.readonly}
-          style={{ width: "240px" }}
+          style={{ width: "320px" }}
         />
       </Form.Item>
       <Form.Item
@@ -538,7 +552,7 @@ const Easy = (props, ref) => {
       >
         <Input
           placeholder={TranslateText(["请输入告警名称", "Please input"])}
-          style={{ width: "240px" }}
+          style={{ width: "320px" }}
         />
       </Form.Item>
 
@@ -571,169 +585,184 @@ const Easy = (props, ref) => {
         >
           <Input
             placeholder={TranslateText(["请输入告警值", "Please input"])}
-            style={{ width: "240px" }}
+            style={{ width: "200px" }}
           />
         </Form.Item>
       )}
 
       {subType === 14 && (
         <>
-          <Form.Item label={TranslateText(["上上限", "Ultra upper limit"])}>
-            <Space size={20}>
-              <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: "240px" }}
-                />
-              </Form.Item>
-              <Form.Item
-                label={""}
-                name="ahh_enable"
-                valuePropName="checked"
-                noStyle
-              >
-                <Switch size={"small"} />
-              </Form.Item>
-            </Space>
-          </Form.Item>
-          <Form.Item label={TranslateText(["上限", "Upper limit"])}>
-            <Space size={20}>
-              <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: "240px" }}
-                />
-              </Form.Item>
-              <Form.Item name="ah_enable" valuePropName="checked" noStyle>
-                <Switch size={"small"} />
-              </Form.Item>
-            </Space>
-          </Form.Item>
-          <Form.Item label={TranslateText(["下限", "Lower limit"])}>
-            <Space size={20}>
-              <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: "240px" }}
-                />
-              </Form.Item>
-              <Form.Item name="al_enable" valuePropName="checked" noStyle>
-                <Switch size={"small"} />
-              </Form.Item>
-            </Space>
-          </Form.Item>
-          <Form.Item label={TranslateText(["下下限", "Ultra lower limit"])}>
-            <Space size={20}>
-              <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: "240px" }}
-                />
-              </Form.Item>
-              <Form.Item name="all_enable" valuePropName="checked" noStyle>
-                <Switch size={"small"} />
-              </Form.Item>
-            </Space>
+          <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
+                >
+                  <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>
+
+                <Form.Item name="all_enable" valuePropName="checked" noStyle>
+                  <Checkbox size={"small"} />
+                </Form.Item>
+              </Space>
+            </div>
           </Form.Item>
         </>
       )}
@@ -750,7 +779,7 @@ const Easy = (props, ref) => {
       >
         <Select
           placeholder={TranslateText(["请选择", "Please choose"])}
-          style={{ width: "240px" }}
+          style={{ width: "200px" }}
         >
           <Select.Option value={1}>
             {TranslateText(["低", "Low"])}
@@ -797,7 +826,7 @@ const Easy = (props, ref) => {
           >
             <Input
               placeholder={TranslateText(["请输入", "Please input"])}
-              style={{ width: "240px" }}
+              style={{ width: "200px" }}
             />
           </Form.Item>
 
@@ -806,7 +835,7 @@ const Easy = (props, ref) => {
             name={"group_id"}
           >
             <Select
-              style={{ width: 240 }}
+              style={{ width: 200 }}
               options={[
                 ...[
                   {
@@ -831,30 +860,26 @@ const Easy = (props, ref) => {
             required={true}
             label={TranslateText(["延时告警", "Delayed alarm"])}
           >
-            <div style={{ marginTop: 6 }}>
-              <Radio.Group
-                value={status}
-                disabled={isDisabled}
-                onChange={(e) => {
-                  setStatus(e.target.value);
-                  if (e.target.value === 1) {
-                    setDateTime(null);
-                  } else {
-                    setDateTime(0);
-                  }
-                }}
-              >
-                <Radio value={1}>{TranslateText(["开启", "on"])}</Radio>
-                <Radio value={2}>{TranslateText(["关闭", "off"])}</Radio>
-              </Radio.Group>
+            <div>
               <div
                 style={{
                   display: "flex",
-                  marginTop: 10,
                   gap: 8,
                   alignItems: "center",
                 }}
               >
+                <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)",

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

@@ -22,8 +22,25 @@
       }
     }
 
-    .ant-form-item-label>label {
+    .ant-form-item-label > label {
       color: var(--dt-text-color1);
     }
   }
-}
+}
+
+.itemContainer {
+  display: inline-block;
+  position: relative;
+  overflow: visible;
+}
+
+.label {
+  position: absolute;
+  font-size: 12px;
+  transform: scale(0.8);
+  color: var(--dt-text-color3);
+  left: 12px;
+  top: -8px;
+  z-index: 9999;
+  background-color: var(--dt-fill-color3);
+}