feat:

接口对接及逻辑优化

src/components/env.js

+import axios from "@/request/http.js";
 export const TIMEING_RULES = {
     1: '手动下发',
     2: '按周',
@@ -6,4 +7,34 @@ export const TIMEING_RULES = {
 export const MAX_DAY = 7;
 export const ONLY_INPUT_NUM = (value) => {
     return value.replace(/[^\d]/g, '')
+}
+export const GetRuleTypeOptions = () => {
+    return new Promise((resolve, reject) => {
+        const params = {
+            page: 1,
+            page_size: 10000000000000,
+            class: 3,
+        };
+        let obj = {}
+        axios.get(`/v1/api/dict`, { params }).then((res) => {
+            if (res.data.code == 200) {
+                if (res.data.data) {
+                    res.data.data.forEach((e) => {
+                        let isEmptyOption = e.name == "空";
+                        obj[e.id] = {
+                            label: e.name,
+                            unit: isEmptyOption ? "" : e.unit,
+                            down: isEmptyOption ? '' : e.min_val,
+                            up: isEmptyOption ? '' : e.max_val
+                        };
+                    });
+                }
+                resolve(obj)
+            }
+        });
+    })
+}
+export const Empty = (key, Obj) => {
+    let item = Obj[key]
+    return !item || item.label == '空'
 }
\ No newline at end of file

src/page/main/forewarning/indicator-config/detail/index.vue

@@ -70,6 +70,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";
 const route = useRoute();
 const { id, type_name, target_name } = route.query;
 const STATUS_OBJ = {
@@ -130,41 +131,8 @@ const rule_label = [
 ];
 const rule_data = ref({});
 const ruleTypeOptions = ref({});
-const getRuleTypeOptions = () => {
-  let arr = [
-    {
-      id: "empty",
-      label: "空",
-    },
-    {
-      id: "1",
-      label: "百分比范围",
-      unit: "%",
-    },
-    {
-      id: "2",
-      label: "毫秒范围",
-      unit: "ms",
-    },
-    {
-      id: "3",
-      label: "秒范围",
-      unit: "s",
-    },
-    {
-      id: "4",
-      label: "个范围",
-      unit: "个",
-    },
-    {
-      id: "5",
-      label: "温度范围",
-      unit: "℃",
-    },
-  ];
-  arr.forEach((e) => {
-    ruleTypeOptions.value[e.id] = e.label;
-  });
+const getRuleTypeOptions = async () => {
+  ruleTypeOptions.value = await GetRuleTypeOptions();
 };
 const advanced_label = [
   [

src/page/main/forewarning/indicator-config/modules/add-form.vue

@@ -18,7 +18,8 @@
         </el-form-item>
         <el-form-item label="预警规则类型" prop="rule_type">
           <el-select style="flex: 1" v-model="state.form.rule_type" placeholder="请选择" filterable>
-            <el-option v-for="(value, key) in ruleTypeOptions" :key="key" :label="value" :value="key"> </el-option>
+            <el-option v-for="(value, key) in ruleTypeOptions" :key="key" :label="value.label" :value="key">
+            </el-option>
           </el-select>
         </el-form-item>
         <div class="duration">
@@ -61,50 +62,13 @@ import { MAX_DAY, ONLY_INPUT_NUM } from "@/components/env.js";
 import { ElMessage } from "element-plus";
 import axios from "@/request/http.js";
 import warningScope from "./warning-scope.vue";
+import { GetRuleTypeOptions, Empty } from "@/components/env.js";
 const props = defineProps({
   row: {
     type: Object,
     default: null,
   },
 });
-// 预警规则类型下拉
-const ruleTypeOptions = ref({});
-const getRuleTypeOptions = () => {
-  let arr = [
-    {
-      id: "empty",
-      label: "空",
-    },
-    {
-      id: "1",
-      label: "百分比范围",
-      unit: "%",
-    },
-    {
-      id: "2",
-      label: "毫秒范围",
-      unit: "ms",
-    },
-    {
-      id: "3",
-      label: "秒范围",
-      unit: "s",
-    },
-    {
-      id: "4",
-      label: "个范围",
-      unit: "个",
-    },
-    {
-      id: "5",
-      label: "温度范围",
-      unit: "℃",
-    },
-  ];
-  arr.forEach((e) => {
-    ruleTypeOptions.value[e.id] = e.label;
-  });
-};
 // 当前是否是编辑
 const isEdit = computed(() => !!props.row);
 // 获取旧数据
@@ -119,7 +83,7 @@ const state = reactive({
   form: {
     name: "",
     indicator_expression: "",
-    rule_type: "empty",
+    rule_type: "",
     time: 10,
     unit: "s",
     inspection_cycle: 1,
@@ -127,10 +91,16 @@ const state = reactive({
   },
   rules: {
     name: [{ required: true, message: "请输入指标名称", trigger: "blur" }],
+    rule_type: [{ required: true, message: "请选择预警规则类型", trigger: "change" }],
     indicator_expression: [{ required: true, message: "请输入指标表达式", trigger: "blur" }],
     time: [{ required: true, message: "请输入持续时间", trigger: "blur" }],
   },
 });
+// 预警规则类型下拉
+const ruleTypeOptions = ref({});
+const getRuleTypeOptions = async () => {
+  ruleTypeOptions.value = await GetRuleTypeOptions();
+};
 // 当预警持续输入限制
 const inputNum = () => {
   state.form.time = state.form.time.replace(/[^\d]/g, "");
@@ -166,7 +136,7 @@ watch(
   async (n) => {
     if (!n) return;
     state.form.name = n.name;
-    state.form.rule_type = n.rule_type || "empty";
+    state.form.rule_type = n.rule_type;
     state.form.inspection_cycle = n.inspection_cycle || 1;
     state.form.state = n.state || 1;
     state.form.time = n.time || 10;

src/page/main/forewarning/list/detail/index.vue

@@ -143,41 +143,23 @@ const getInfo = () => {
   });
 };
 const GetRuleTypeOptions = () => {
-  let arr = [
-    {
-      id: "empty",
-      label: "空",
-    },
-    {
-      id: "1",
-      label: "百分比范围",
-      unit: "%",
-    },
-    {
-      id: "2",
-      label: "毫秒范围",
-      unit: "ms",
-    },
-    {
-      id: "3",
-      label: "秒范围",
-      unit: "s",
-    },
-    {
-      id: "4",
-      label: "个范围",
-      unit: "个",
-    },
-    {
-      id: "5",
-      label: "温度范围",
-      unit: "℃",
-    },
-  ];
-  arr.forEach((e) => {
-    ruleTypeOptions.value[e.id] = e;
+  const params = {
+    page: 1,
+    page_size: 10000000000000,
+    class: 3,
+  };
+  axios.get(`/v1/api/dict`, { params }).then((res) => {
+    if (res.data.code == 200) {
+      res.data.data?.forEach((e) => {
+        let isEmptyOption = e.name == "空";
+        ruleTypeOptions.value[e.id] = {
+          label: e.name,
+          unit: isEmptyOption ? "" : e.unit,
+        };
+      });
+      getInfo();
+    }
   });
-  getInfo();
 };
 onBeforeMount(() => {
   GetRuleTypeOptions();

src/page/main/forewarning/list/index.vue

@@ -83,7 +83,7 @@
             <template v-slot:warn_threshold="{ row }">
               {{ row.alert_condition.thresholds_min }}{{ ruleTypeOptions[row.alert_rule_type]?.unit || "" }}
               -
-              {{ row.alert_condition.thresholds_max }}{{ ruleTypeOptions[row.alert_rule_type] || "" }}
+              {{ row.alert_condition.thresholds_max }}{{ ruleTypeOptions[row.alert_rule_type]?.unit || "" }}
             </template>
             <template v-slot:alert_time="{ row }">
               {{ row.alert_time ? row.alert_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
@@ -180,6 +180,7 @@ import { Search } from "@element-plus/icons-vue";
 import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
 import userInputTable from "./user-input-table.vue";
 import { useRouter } from "vue-router";
+import { GetRuleTypeOptions } from "@/components/env.js";
 
 const router = useRouter();
 
@@ -490,45 +491,12 @@ const confirmClose = () => {
     }
   });
 }; // 关闭预警弹窗确定按钮：提交表单
-const GetRuleTypeOptions = () => {
-  let arr = [
-    {
-      id: "empty",
-      label: "空",
-    },
-    {
-      id: "1",
-      label: "百分比范围",
-      unit: "%",
-    },
-    {
-      id: "2",
-      label: "毫秒范围",
-      unit: "ms",
-    },
-    {
-      id: "3",
-      label: "秒范围",
-      unit: "s",
-    },
-    {
-      id: "4",
-      label: "个范围",
-      unit: "个",
-    },
-    {
-      id: "5",
-      label: "温度范围",
-      unit: "℃",
-    },
-  ];
-  arr.forEach((e) => {
-    ruleTypeOptions.value[e.id] = e;
-  });
+const getRuleTypeOptions = async () => {
+  ruleTypeOptions.value = await GetRuleTypeOptions();
   getTableRows();
 };
 onBeforeMount(() => {
-  GetRuleTypeOptions();
+  getRuleTypeOptions();
 });
 
 const {

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

@@ -58,8 +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 { Empty } from "../modules/env.js";
-import { GetRuleTypeOptions } from "../modules/interface.js";
+import { GetRuleTypeOptions, Empty } from "@/components/env.js";
 const route = useRoute();
 const { id } = route.query;
 const STATUS_OBJ = ["禁用", "启用"];
@@ -217,7 +216,7 @@ const getInfoData = () => {
           ]);
           watning_scope_data.value[e.name] = e.value == ".*" ? "全部" : `${selectRule[e.compare]} ${e.value}`;
         });
-        let isEmpty = Empty(data.alert_rule_type);
+        let isEmpty = Empty(data.alert_rule_type, ruleTypeOptions.value);
         if (!isEmpty) {
           ruleHeaders.value = [
             {

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

@@ -21,9 +21,9 @@ import addForm from "../modules/add-form.vue";
 import axios from "@/request/http.js";
 import { ElMessage } from "element-plus";
 import { Save } from "../modules/interface.js";
-import { Empty } from "../modules/env.js";
+import { Empty, GetRuleTypeOptions } from "@/components/env.js";
 const infoData = ref({});
-
+const ruleTypeOptions = ref({});
 const router = useRouter();
 const route = useRoute();
 const { id } = route.query;
@@ -55,7 +55,7 @@ const getInfoData = () => {
     .then((res) => {
       if (res.data.code == 200) {
         const { data } = res.data;
-        const isEmpty = Empty(data.alert_rule_type);
+        let isEmpty = Empty(data.alert_rule_type, ruleTypeOptions.value);
         let type_json = {
           1: () => {
             let obj = {
@@ -144,11 +144,15 @@ const getInfoData = () => {
       }
     });
 };
+const getRuleTypeOptions = async (cb) => {
+  ruleTypeOptions.value = await GetRuleTypeOptions();
+  getInfoData();
+};
 const getStaticTypeOptions = () => {
   axios.get("/v1/api/alert_class/tree").then(async (res) => {
     if (res.data.code == 200) {
       staticTypeOptions.value = res.data.data;
-      getInfoData();
+      getRuleTypeOptions();
     } else {
       ElMessage.error(res.data.msg);
     }

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

@@ -150,8 +150,7 @@
 import { computed, onBeforeMount, reactive, ref } from "vue";
 import gapTitle from "@/components/gap-title.vue";
 import { ElMessage } from "element-plus";
-import { Empty } from "../modules/env.js";
-import { GetRuleTypeOptions } from "./interface.js";
+import { GetRuleTypeOptions, Empty } from "@/components/env.js";
 const props = defineProps({
   form: {
     type: Object,
@@ -173,19 +172,21 @@ var validateWarnIndex = (rule, value, callback) => {
     callback();
   }
 };
+const ruleTypeOptions = ref({});
 const state = reactive({
   form: {
     warn_target: "",
     warn_type: "",
     warn_indicator: "",
     indicator_expression: "",
-    rule_type: "empty",
+    rule_type: "",
     ruleRows: [],
     risk_level: "",
   },
   rules: {
     warn_target: [{ required: true, message: "请输入预警分类", trigger: "blur" }],
     warn_type: [{ required: true, message: "请输入预警对象", trigger: "blur" }],
+    rule_type: [{ required: true, message: "请选择预警规则类型", trigger: "change" }],
     warn_indicator: [{ validator: validateWarnIndex, trigger: "blur" }],
     indicator_expression: [{ required: true, message: "请输入预警指标", trigger: "blur" }],
     risk_level: [{ required: true, message: "请选择风险程度", trigger: "change" }],
@@ -197,7 +198,7 @@ const state = reactive({
   },
 });
 const isEmpty = computed(() => {
-  return Empty(state.form.rule_type);
+  return Empty(state.form.rule_type, ruleTypeOptions.value);
 });
 const changeWarnCustomTarget = () => {};
 const changeWarnCustomType = () => {};
@@ -315,7 +316,6 @@ const riskLevelOptions = computed(() => {
     return riskLevels.value.filter((e) => !rows.includes(e.id));
   };
 });
-const ruleTypeOptions = ref({});
 const unitMap = computed(() => {
   return ruleTypeOptions.value[state.form.rule_type]?.unit || "";
 });

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

-export const Empty = (key) => {
-    return !key || key == "empty"
-}
\ No newline at end of file

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

@@ -23,8 +23,8 @@
                     placeholder="请输入"
                     @input="inputNum($index, 'from')"
                     @blur="changeWarningThresholdFrom($index)">
-                    <template v-if="state.form.rule_type != 'empty'" #append>{{
-                      ruleTypeOptions[rule_type]?.unit || ""
+                    <template v-if="!isEmptyOption" #append>{{
+                      ruleTypeOptions[props.rule_type]?.unit || ""
                     }}</template>
                   </el-input>
                 </el-form-item>
@@ -37,8 +37,8 @@
                     clearable
                     @input="inputNum($index, 'to')"
                     @blur="changeWarningThresholdTo($index)">
-                    <template v-if="state.form.rule_type != 'empty'" #append>{{
-                      ruleTypeOptions[rule_type]?.unit || ""
+                    <template v-if="!isEmptyOption" #append>{{
+                      ruleTypeOptions[props.rule_type]?.unit || ""
                     }}</template>
                   </el-input>
                 </el-form-item>
@@ -84,7 +84,7 @@
 import { computed, nextTick, onBeforeMount, reactive, ref } from "vue";
 import gapTitle from "@/components/gap-title.vue";
 import { ElMessage } from "element-plus";
-import { GetRuleTypeOptions } from "./interface.js";
+import { Empty, GetRuleTypeOptions } from "@/components/env.js";
 const props = defineProps({
   form: {
     type: Object,
@@ -176,13 +176,12 @@ const setLimits = (index) => {
     }) || []
   );
 };
-const rule_type = computed(() => {
-  // return props.rule_type
-  return "1";
+const isEmptyOption = computed(() => {
+  return Empty(props.rule_type, ruleTypeOptions.value);
 });
 const limit = computed(() => {
   return (
-    ruleTypeOptions.value[rule_type.value].limit || {
+    ruleTypeOptions.value[rule_type.value] || {
       down: "",
       up: "",
     }
@@ -308,6 +307,10 @@ defineExpose({
 .warning-threshold {
   display: flex;
   align-items: center;
+  :deep(.el-input__wrapper) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
   :deep(.el-input-group__append, .el-input-group__prepend) {
     border-radius: 4px;
     border-top-left-radius: 0;

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

@@ -113,41 +113,4 @@ export const Save = (res, p, cb) => {
             ElMessage.error(res.data.data)
         }
     })
-}
-export const GetRuleTypeOptions = () => {
-    let arr = [{
-            id: "empty",
-            label: "空",
-        },
-        {
-            id: "1",
-            label: "百分比范围",
-            unit: "%",
-        },
-        {
-            id: "2",
-            label: "毫秒范围",
-            unit: "ms",
-        },
-        {
-            id: "3",
-            label: "秒范围",
-            unit: "s",
-        },
-        {
-            id: "4",
-            label: "个范围",
-            unit: "个",
-        },
-        {
-            id: "5",
-            label: "温度范围",
-            unit: "℃",
-        },
-    ];
-    let obj = {}
-    arr.forEach((e) => {
-        obj[e.id] = e;
-    });
-    return obj
 }
\ No newline at end of file

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

@@ -94,7 +94,7 @@ import gapTitle from "@/components/gap-title.vue";
 import Gateway from "./gateway.vue";
 import { ElMessage } from "element-plus";
 import axios from "@/request/http.js";
-import { Empty } from "../modules/env.js";
+import { GetRuleTypeOptions, Empty } from "@/components/env.js";
 
 const showSelect = ["=~", "!~"];
 const selectRule = ref({
@@ -160,10 +160,17 @@ const state = reactive({
     risk_level: [{ required: true, message: "请选择风险程度", trigger: "change" }],
   },
 });
+const ruleTypeOptions = ref({});
+const getRuleTypeOptions = async (cb) => {
+  ruleTypeOptions.value = await GetRuleTypeOptions();
+  if (props.form) {
+    info();
+  }
+};
 const module_data = ref({});
 const alert_rule_type = ref("");
 const isEmpty = computed(() => {
-  return Empty(alert_rule_type.value);
+  return Empty(alert_rule_type.value, ruleTypeOptions.value);
 });
 const chooseWarnIndicator = () => {
   axios
@@ -298,9 +305,7 @@ const info = () => {
 };
 onMounted(() => {
   getStaticTypeOptions();
-  if (props.form) {
-    info();
-  }
+  getRuleTypeOptions();
 });
 defineExpose({
   Submit,