feat:

优化预警规则设置展示逻辑

src/components/env.js

@@ -5,6 +5,8 @@ export const TIMEING_RULES = {
     3: '自定义时间'
 }
 export const MAX_DAY = 7;
+export const WIELESS_SMALL = '-∞'
+export const WIELESS_BIG = '+∞'
 export const ONLY_INPUT_NUM = (value) => {
     return value.replace(/[^\d]/g, '')
 }

src/page/main/forewarning/rule-set/detail/index.vue

@@ -58,7 +58,7 @@ import gapTitle from "@/components/gap-title.vue";
 import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
 import Info from "@/components/warn-detail/info.vue";
 import { METHODS } from "@/components/manual-distribution/env.js";
-import { GetRuleTypeOptions, Empty } from "@/components/env.js";
+import { GetRuleTypeOptions, Empty, WIELESS_SMALL, WIELESS_BIG } from "@/components/env.js";
 const route = useRoute();
 const { id } = route.query;
 const STATUS_OBJ = ["禁用", "启用"];
@@ -227,10 +227,26 @@ const getInfoData = () => {
           ];
         }
         ruleRows.value = data.alert_condition.map((e) => {
+          let min = e.thresholds_min;
+          if (min === undefined) {
+            if (ruleTypeOptions.value[data.alert_rule_type].down !== "") {
+              min = ruleTypeOptions.value[data.alert_rule_type].down;
+            } else {
+              min = WIELESS_SMALL;
+            }
+          }
+          let max = e.thresholds_max;
+          if (max === undefined) {
+            if (ruleTypeOptions.value[data.alert_rule_type].up !== "") {
+              max = ruleTypeOptions.value[data.alert_rule_type].up;
+            } else {
+              max = WIELESS_SMALL;
+            }
+          }
           return {
-            warning_threshold: `${e.thresholds_min}${ruleTypeOptions.value[data.alert_rule_type]?.unit || ""} - ${
-              e.thresholds_max
-            }${ruleTypeOptions.value[data.alert_rule_type]?.unit || ""}`,
+            warning_threshold: `${min}${ruleTypeOptions.value[data.alert_rule_type]?.unit || ""} - ${max}${
+              ruleTypeOptions.value[data.alert_rule_type]?.unit || ""
+            }`,
             risk_level: riskLevelOptions[e.risk_level],
           };
         });

src/page/main/forewarning/rule-set/modules/custom.vue

@@ -76,7 +76,7 @@
                   :width="header.width">
                   <template #default="{ $index }">
                     <div class="warning-threshold" v-if="header.prop == 'warning_threshold'">
-                      <el-form-item :prop="`[${$index}].from`" :rules="state.tableRules.from" style="flex: 1">
+                      <el-form-item :prop="`[${$index}].from`" :rules="state.tableRules.from($index)" style="flex: 1">
                         <el-input
                           style="flex: 1"
                           v-model="state.form.ruleRows[$index].from"
@@ -87,7 +87,11 @@
                         </el-input>
                       </el-form-item>
                       <span class="to">-</span>
-                      <el-form-item label="" :prop="`${$index}.to`" :rules="state.tableRules.to" style="flex: 1">
+                      <el-form-item
+                        label=""
+                        :prop="`${$index}.to`"
+                        :rules="state.tableRules.to($index)"
+                        style="flex: 1">
                         <el-input
                           style="flex: 1"
                           v-model="state.form.ruleRows[$index].to"
@@ -172,6 +176,30 @@ var validateWarnIndex = (rule, value, callback) => {
     callback();
   }
 };
+const validateFrom = (rule, value, callback, index) => {
+  let thisRow = state.form.ruleRows[index];
+  //   如果只有一条数据，并且上限下限都没有填写，则提示错误
+  if (state.form.ruleRows.length == 1 && thisRow.from === "" && thisRow.to == "") {
+    return callback(new Error("请输入"));
+  }
+  //   当前下限不是第一条数据，并且为空，提示错误
+  if (index > 0 && value === "") {
+    return callback(new Error("请输入"));
+  }
+  callback();
+};
+const validateTo = (rule, value, callback, index) => {
+  let thisRow = state.form.ruleRows[index];
+  //   如果只有一条数据，并且上限下限都没有填写，则提示错误
+  if (state.form.ruleRows.length == 1 && thisRow.from === "" && thisRow.to == "") {
+    return callback(new Error("请输入"));
+  }
+  //   当前上限不是最后一条数据，并且为空，提示错误
+  if (index < state.form.ruleRows.length - 1 && value === "") {
+    return callback(new Error("请输入"));
+  }
+  callback();
+};
 const ruleTypeOptions = ref({});
 const state = reactive({
   form: {
@@ -192,8 +220,12 @@ const state = reactive({
     risk_level: [{ required: true, message: "请选择风险程度", trigger: "change" }],
   },
   tableRules: {
-    from: [{ required: true, message: "请输入", trigger: "blur" }],
-    to: [{ required: true, message: "请输入", trigger: "blur" }],
+    from: (index) => {
+      return [{ validator: (rule, value, callback) => validateFrom(rule, value, callback, index), trigger: "blur" }];
+    },
+    to: (index) => {
+      return [{ validator: (rule, value, callback) => validateTo(rule, value, callback, index), trigger: "blur" }];
+    },
     risk_level: [{ required: true, message: "请选择风险程度", trigger: "change" }],
   },
 });
@@ -215,8 +247,14 @@ const setLimits = (index) => {
   );
 };
 const inputNum = (index, key) => {
+  if (state.form.ruleRows[index][key] == "") return;
   if (state.form.ruleRows[index][key] == "-") return;
-  state.form.ruleRows[index][key] = +`${state.form.ruleRows[index][key]}`.replace(/[^\-?\d.]/g, "");
+  state.form.ruleRows[index][key] = `${state.form.ruleRows[index][key]}`
+    .replace(/[^\-?\d.]/g, "") //只允许输入负号，数字，小数点
+    .replace(/(\-)+/, "$1") //过滤连续多个负号
+    .replace(/(\.)+/, "$1") //过滤连续多个小数点
+    .replace(/(\.\d+)\./g, "$1") //过滤出现多个小数点
+    .replace(/(\d)\-/g, "$1"); //过滤处于非开头的负号
 };
 const changeWarningThresholdFrom = (index) => {
   let { down, up } = limit.value;

src/page/main/forewarning/rule-set/modules/gateway.vue

@@ -16,10 +16,10 @@
             :width="header.width">
             <template #default="{ $index }">
               <div class="warning-threshold" v-if="header.prop == 'warning_threshold'">
-                <el-form-item :prop="`[${$index}].from`" :rules="state.tableRules.from" style="flex: 1">
+                <el-form-item :prop="`[${$index}].from`" :rules="state.tableRules.from($index)" style="flex: 1">
                   <el-input
                     style="flex: 1"
-                    v-model.number="state.form.ruleRows[$index].from"
+                    v-model="state.form.ruleRows[$index].from"
                     placeholder="请输入"
                     @input="inputNum($index, 'from')"
                     @blur="changeWarningThresholdFrom($index)">
@@ -29,10 +29,10 @@
                   </el-input>
                 </el-form-item>
                 <span class="to">-</span>
-                <el-form-item label="" :prop="`${$index}.to`" :rules="state.tableRules.to" style="flex: 1">
+                <el-form-item label="" :prop="`${$index}.to`" :rules="state.tableRules.to($index)" style="flex: 1">
                   <el-input
                     style="flex: 1"
-                    v-model.number="state.form.ruleRows[$index].to"
+                    v-model="state.form.ruleRows[$index].to"
                     placeholder="请输入"
                     clearable
                     @input="inputNum($index, 'to')"
@@ -100,13 +100,41 @@ const getRuleTypeOptions = async (cb) => {
   ruleTypeOptions.value = await GetRuleTypeOptions();
   cb && cb();
 };
+const validateFrom = (rule, value, callback, index) => {
+  let thisRow = state.form.ruleRows[index];
+  //   如果只有一条数据，并且上限下限都没有填写，则提示错误
+  if (state.form.ruleRows.length == 1 && thisRow.from === "" && thisRow.to == "") {
+    return callback(new Error("请输入"));
+  }
+  //   当前下限不是第一条数据，并且为空，提示错误
+  if (index > 0 && value === "") {
+    return callback(new Error("请输入"));
+  }
+  callback();
+};
+const validateTo = (rule, value, callback, index) => {
+  let thisRow = state.form.ruleRows[index];
+  //   如果只有一条数据，并且上限下限都没有填写，则提示错误
+  if (state.form.ruleRows.length == 1 && thisRow.from === "" && thisRow.to == "") {
+    return callback(new Error("请输入"));
+  }
+  //   当前上限不是最后一条数据，并且为空，提示错误
+  if (index < state.form.ruleRows.length - 1 && value === "") {
+    return callback(new Error("请输入"));
+  }
+  callback();
+};
 const state = reactive({
   form: {
     ruleRows: [],
   },
   tableRules: {
-    from: [{ required: true, message: "请输入", trigger: "blur" }],
-    to: [{ required: true, message: "请输入", trigger: "blur" }],
+    from: (index) => {
+      return [{ validator: (rule, value, callback) => validateFrom(rule, value, callback, index), trigger: "blur" }];
+    },
+    to: (index) => {
+      return [{ validator: (rule, value, callback) => validateTo(rule, value, callback, index), trigger: "blur" }];
+    },
     risk_level: [{ required: true, message: "请选择", trigger: "change" }],
   },
 });
@@ -217,8 +245,14 @@ const changeWarningThresholdFrom = (index) => {
   }
 };
 const inputNum = (index, key) => {
+  if (state.form.ruleRows[index][key] == "") return;
   if (state.form.ruleRows[index][key] == "-") return;
-  state.form.ruleRows[index][key] = +`${state.form.ruleRows[index][key]}`.replace(/[^\-?\d.]/g, "");
+  state.form.ruleRows[index][key] = `${state.form.ruleRows[index][key]}`
+    .replace(/[^\-?\d.]/g, "") //只允许输入负号，数字，小数点
+    .replace(/(\-)+/, "$1") //过滤连续多个负号
+    .replace(/(\.)+/, "$1") //过滤连续多个小数点
+    .replace(/(\.\d+)\./g, "$1") //过滤出现多个小数点
+    .replace(/(\d)\-/g, "$1"); //过滤处于非开头的负号
 };
 const changeWarningThresholdTo = (index) => {
   let { down, up } = limit.value;

src/page/main/forewarning/rule-set/modules/interface.js

@@ -2,7 +2,6 @@ import { ElMessage } from "element-plus";
 import axios from "@/request/http.js";
 // max(container_fs_usage_bytes{pod!=\"\", namespace!=\"arms-prom\",namespace!=\"monitoring\"}) by (pod_name, namespace, device)/max(container_fs_limit_bytes{pod!=\"\"}) by (pod_name,namespace, device) * 100
 const setParams = (res, { id }) => {
-    console.log('res: ', res);
     let isEmpty = res.type_com_ref.isEmpty
     let params = {
         // 预警规则名称
@@ -85,11 +84,16 @@ const setParams = (res, { id }) => {
         }]
     } else {
         alert_condition = res.type_com_ref.ruleRows.map(e => {
-            return {
-                thresholds_max: +e.to,
-                thresholds_min: +e.from,
+            let obj = {
                 risk_level: +e.risk_level
             }
+            if (e.to !== "") {
+                obj.thresholds_max = +e.to
+            }
+            if (e.from !== "") {
+                obj.thresholds_min = +e.to
+            }
+            return obj
         })
     }
     params = {