修改样式

src/App.jsx

@@ -7,6 +7,12 @@ function Home(props) {
 
   return (
     <>
+      <div style={{ padding: "0px 30px" }}>
+        <Alarm.ComplexConfig
+          ref={compRef}
+          editId={-1}
+        ></Alarm.ComplexConfig>
+      </div>
       {/* <Alarm.DetailModal
         open={open}
         onCancel={() => setOpen(false)}
@@ -39,17 +45,16 @@ function Home(props) {
         // //   pointId: "ABC123_AAA_chr1_AEff_MIN_H",
         // // }}
       ></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"
-        // readonly
-        editId={-1}
-      ></Alarm.EasyConfig>
+      {/* <Alarm.ComplexConfig ref={compRef} editId={-1} showList></Alarm.ComplexConfig>
+      <button onClick={() => compRef?.current?.ok()}>测试</button>
+      {/* <div style={{ padding: 30 }}>
+        <Alarm.EasyConfig
+          ref={compRef}
+          // pointId="ZWB_ALARM_chr_2_AQ"
+          // readonly
+          editId={-1}
+        ></Alarm.EasyConfig>
+      </div> */}
     </>
   );
 }

src/pages/Alarm/components/complex.jsx

@@ -253,15 +253,12 @@ const Complex = (props, ref) => {
             labelAlign="left"
             colon={false}
             labelCol={{
-              span: 4,
-            }}
-            wrapperCol={{
-              span: 15,
+              flex: "84px",
             }}
           >
             {showList && (
               <>
-                <Form.Item label="类型">
+                <Form.Item label="告警类型">
                   <Radio.Group
                     value={type}
                     onChange={(e) => setType(e.target.value)}
@@ -295,7 +292,7 @@ const Complex = (props, ref) => {
                     <Select
                       value={alarmId}
                       onChange={setAlarmId}
-                      style={{ width: 240 }}
+                      style={{ width: 320 }}
                       options={ruleOptions}
                       placeholder={TranslateText(["请选择", "Please choose"])}
                     />
@@ -384,7 +381,7 @@ const Complex = (props, ref) => {
                   label={TranslateText(["条件符号", "Symbol"])}
                   // name="symb"
                 >
-                  <div className="symb" style={{ width: "500px" }}>
+                  <div className="symb">
                     <Button type="primary" onClick={symbClick}>
                       ()
                     </Button>

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

@@ -9,10 +9,21 @@
     // padding-top: 24px;
     width: 100%;
     height: 100%;
-    overflow: hidden;
 
-    .ant-input {
-      // background-color: #212b38;
+    .ant-form-item-label {
+      overflow: visible;
+    }
+
+    .ant-form-item-label > label {
+      color: var(--dt-text-color1);
+    }
+
+    .ant-form-item
+      .ant-form-item-label
+      > label.ant-form-item-required:not(
+        .ant-form-item-required-mark-optional
+      )::before {
+      margin-left: -12px;
     }
 
     .symb {
@@ -20,7 +31,7 @@
         margin-right: 8px;
         margin-bottom: 8px;
         min-width: 28px;
-        padding: 4px 0px;
+        padding: 4px 9.5px;
       }
     }
 
@@ -61,12 +72,27 @@
       }
     }
 
-    .ant-form-item-label>label {
+    .ant-form-item-label > label {
       color: var(--dt-text-color1);
     }
 
     .ant-table-cell:before {
       background-color: transparent !important;
     }
+
+    .ant-table {
+      height: 580px;
+    }
+
+    .ant-table-row {
+      height: 36px !important;
+    }
+    .ant-table-tbody > tr > td {
+      padding: 0px 8px !important;
+    }
+
+    .ant-empty-normal {
+      height: 540px;
+    }
   }
-}
+}

src/pages/Alarm/components/easy.jsx

@@ -471,12 +471,9 @@ const Easy = (props, ref) => {
         labelAlign="left"
         colon={false}
         labelCol={{
-          span: 6,
+          flex: "84px",
         }}
         onValuesChange={onValuesChange}
-        wrapperCol={{
-          span: 18,
-        }}
       >
         <Form.Item
           label={TranslateText(["告警类型", "Mode"])}
@@ -640,7 +637,10 @@ const Easy = (props, ref) => {
                   <Form.Item name="ah_enable" valuePropName="checked" noStyle>
                     <Checkbox size={"small"} />
                   </Form.Item>
-                  <div className={styles.itemContainer}>
+                  <div
+                    className={styles.itemContainer}
+                    style={{ marginLeft: 8 }}
+                  >
                     {ahh && <div className={styles.label}>上上限</div>}
                     <Form.Item
                       name="ahh_value"
@@ -674,7 +674,7 @@ const Easy = (props, ref) => {
                       <Input
                         disabled={!ahhEnable}
                         placeholder={TranslateText(["上上限", "Please input"])}
-                        style={{ width: "128px", marginLeft: 8 }}
+                        style={{ width: "128px" }}
                       />
                     </Form.Item>
                   </div>
@@ -733,7 +733,10 @@ const Easy = (props, ref) => {
                   <Form.Item name="al_enable" valuePropName="checked" noStyle>
                     <Checkbox size={"small"} />
                   </Form.Item>
-                  <div className={styles.itemContainer}>
+                  <div
+                    className={styles.itemContainer}
+                    style={{ marginLeft: 8 }}
+                  >
                     {all && <div className={styles.label}>下下限</div>}
                     <Form.Item
                       name="all_value"
@@ -767,7 +770,7 @@ const Easy = (props, ref) => {
                       <Input
                         disabled={!allEnable}
                         placeholder={TranslateText(["下下限", "Please input"])}
-                        style={{ width: "128px", marginLeft: 8 }}
+                        style={{ width: "128px" }}
                       />
                     </Form.Item>
                   </div>

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

@@ -22,9 +22,21 @@
       }
     }
 
+    .ant-form-item-label {
+      overflow: visible;
+    }
+
     .ant-form-item-label > label {
       color: var(--dt-text-color1);
     }
+
+    .ant-form-item
+      .ant-form-item-label
+      > label.ant-form-item-required:not(
+        .ant-form-item-required-mark-optional
+      )::before {
+      margin-left: -12px;
+    }
   }
 }