feat:

修复bug，优化预警规则设置和指标配置逻辑

.vscode/settings.json

 {
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "GitCommitPlugin.ShowEmoji": false,
-  "editor.formatOnSave": false,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
-  "volar.inlayHints.eventArgumentInInlineHandlers": false,
-  // "path-intellisense.mappings": {
-  //   "@": "${workspaceFolder}/src"
-  // },
-  // 文件保存自动格式化
-  "editor.formatOnSave": true,
-  "[vue]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "vue.codeActions.enabled": false
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "GitCommitPlugin.ShowEmoji": false,
+    "volar.inlayHints.eventArgumentInInlineHandlers": false,
+    "path-intellisense.mappings": {
+        "@": "${workspaceFolder}/src"
+    },
+    // 文件保存自动格式化
+    "editor.formatOnSave": true,
+    "[vue]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
+}
\ No newline at end of file
-}

package.json

@@ -7,12 +7,14 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@element-plus/icons-vue": "^2.0.6",
     "@wangeditor/editor": "^5.1.14",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "ace-builds": "^1.9.6",
     "axios": "^0.21.1",
     "clipboard": "^2.0.11",
+    "codemirror": "^6.0.1",
     "crypto-js": "^4.1.1",
     "echarts": "^5.3.3",
     "element-plus": "^2.2.19",
@@ -26,8 +28,9 @@
     "string-format": "^2.0.0",
     "uuid": "^8.3.2",
     "vue": "^3.2.31",
+    "vue-codemirror": "^6.1.1",
     "vue-demi": "^0.14.5",
-    "vue-i18n": "^9.1.7",
+    "vue-i18n": "^9.5.0",
     "vue-router": "^4.0.10",
     "vue3-ace-editor": "^2.2.2",
     "vuex": "^4.0.2"

src/bg-ui/bg-codemirror.vue

+<template>
+  <Codemirror
+    v-model="code"
+    :placeholder="placeholder"
+    :style="{ ...options.style, ...options.style }"
+    class="code-style"
+    :mode="options.mode"
+    :disabled="disabled"
+    :spellcheck="options.spellcheck"
+    :indentWithTab="options.indentWithTab"
+    :autofocus="options.autofocus"
+    :tabSize="options.tabSize"
+    :extensions="options.extensions"
+    @change="Change($event)"
+    @blur="Blur($event)" />
+</template>
+
+<script setup>
+import { Codemirror } from "vue-codemirror";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { ref, watch, reactive, nextTick } from "vue";
+const jsonData = ref("");
+const options = reactive({
+  style: { height: "100%" },
+  mode: "text/x-c++src",
+  spellcheck: true,
+  autofocus: true,
+  indentWithTab: true,
+  tabSize: 2,
+  extensions: [oneDark],
+});
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: "请输入表达式",
+  },
+});
+const code = ref("");
+watch(
+  () => props.modelValue,
+  (n) => {
+    code.value = n;
+  },
+  {
+    immediate: true,
+  }
+);
+const emits = defineEmits(["update:modelValue", "change", "blur"]);
+const Change = async ($event) => {
+  await nextTick();
+  emits("update:modelValue", code.value);
+  emits("change", { $event, value: code.value });
+};
+const Blur = async ($event) => {
+  await nextTick();
+  emits("update:modelValue", code.value);
+  emits("blur", { $event, value: code.value });
+};
+</script>
+
+<style lang="scss" scoped>
+.code-style {
+  text-align: left;
+}
+</style>
+<style>
+.cm-editor {
+  border-radius: 4px;
+  overflow: hidden;
+}
+</style>

src/bg-ui/index.js

@@ -21,6 +21,7 @@ import BgTags from "./bg-tags.vue";
 import BgSwitch from "./bg-switch.vue";
 import BgRichText from "./bg-rich-text.vue";
 import BgCodeEditor from "./bg-code-editor.vue";
+import BgCodemirror from "./bg-codemirror.vue";
 import BgFilter from "./bg-filter.vue";
 import BgSort from "./bg-sort.vue";
 import BgFilterDate from "./bg-filter-date.vue";
@@ -58,6 +59,7 @@ const components = {
   BgSwitch, // 开关
   BgRichText, // 富文本
   BgCodeEditor, //代码输入
+  BgCodemirror, //代码输入
   BgFilter, // 首页筛选
   BgSort, // 首页排序
   BgFilterDate,

src/i18n/i18n.js

-import { createI18n } from "vue-i18n/index";
-import lang from "./index";
+import { createI18n } from "vue-i18n/index.js";
+import lang from "./index.js";
 
 const i18n = createI18n({
   locale: localStorage.lang || "zh",

src/main.js

@@ -5,7 +5,7 @@ import "element-plus/dist/index.css";
 
 import mavonEditor from "mavon-editor";
 import "mavon-editor/dist/css/index.css";
-import locale from "element-plus/lib/locale/lang/zh-cn";
+import locale from "element-plus/dist/locale/zh-cn.mjs";
 
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 
@@ -27,7 +27,7 @@ import "../src/assets/item.css";
 
 import store from "@/store";
 
-import i18n from "./i18n/i18n.js";
+// import i18n from "./i18n/i18n.js";
 
 import axios from "./request/http.js";
 import api from "./request/api.js";
@@ -109,7 +109,7 @@ Promise.all([getUser(), getMenu("1e99371c-187f-4966-94cf-32f116f42ce6")])
     console.error(e);
   })
   .finally(() => {
-    createVue.use(ElementPlus, { locale }).use(store).use(router).use(i18n).use(bgui).use(mavonEditor);
+    createVue.use(ElementPlus, { locale }).use(store).use(router).use(bgui).use(mavonEditor);
     createVue.mount("#app");
   });
 

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

@@ -22,7 +22,8 @@
       <gap-title :hasLine="true" title="指标表达式"></gap-title>
       <div class="info">
         <div class="indicator-expression">
-          <bg-code-editor v-model="info.indicator_expression" disabled></bg-code-editor>
+          <!-- <bg-code-editor v-model="info.indicator_expression" disabled></bg-code-editor> -->
+          <bg-codemirror :disabled="true" v-model="info.indicator_expression"></bg-codemirror>
         </div>
       </div>
       <gap-title :hasLine="true" title="预警范围"></gap-title>
@@ -129,7 +130,6 @@ const rule_data = ref({});
 const ruleTypeOptions = ref({});
 const getRuleTypeOptions = async () => {
   ruleTypeOptions.value = await GetRuleTypeOptions();
-  console.log("ruleTypeOptions.value: ", ruleTypeOptions.value);
   getInfoData();
 };
 const advanced_label = [

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

@@ -2,20 +2,38 @@
   <div class="detail_container">
     <bg-breadcrumb></bg-breadcrumb>
     <div class="detail_container-main">
-      <Slide v-model="node" />
+      <Slide v-model="nodeData" />
       <div class="main-content">
         <bg-filter-group @search="changeSearch" v-model="filter.metric_name" placeholder="请输入指标名称">
           <template v-slot:left_action>
             <div class="apaas_button">
-              <el-button type="primary" @click="addRule">
+              <el-button
+                type="primary"
+                class="add-btn"
+                @click="addRule"
+                :disabled="nodeData?.node?.level == 1"
+                :style="[noType ? 'cursor: not-allowed' : '']">
                 <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
                 新增
               </el-button>
-              <el-button type="default" @click="batchDelete">批量删除</el-button>
-              <span class="header_info">
-                已选择 <span style="color: #202531; font-weight: bold"> {{ state.selected.length }} </span> 项
+              <el-button
+                type="default"
+                @click="batchDelete"
+                :disabled="nodeData?.node?.level == 1"
+                :style="[noType ? 'cursor: not-allowed' : '']">
+                批量删除
+              </el-button>
+              <span class="header_info selected-count">
+                已选择
+                <span style="color: #202531"> {{ state.selected.length }} </span>
+                项
+              </span>
+              <span
+                class="header_info can_click_text clear-selected"
+                :class="{ 'is-disabled': nodeData?.node?.level == 1 }"
+                @click="clearSelected">
+                清空
               </span>
-              <span class="header_info can_click_text" @click="clearSelected">清空</span>
             </div>
           </template>
           <template v-slot:filter_group>
@@ -65,12 +83,19 @@
                   {{ row.metric_name }}
                 </span>
               </template>
-              <template #is_enabled="{ row }">
-                <bg-switch
+              <template #status="{ row }">
+                <el-switch
+                  v-model="row.status"
+                  active-text="是"
+                  inactive-text="否"
+                  inline-prompt
+                  @change="stateChange(row)">
+                </el-switch>
+                <!-- <bg-switch
                   @click="stateChange(row)"
                   :labels="['否', '是']"
                   :values="[2, 1]"
-                  v-model="row.is_enabled"></bg-switch>
+                  v-model="row.is_enabled"></bg-switch> -->
               </template>
               <template v-slot:created_at="{ row }">
                 {{ dateStringToDate(row.created_at) }}
@@ -115,12 +140,18 @@ import axios from "@/request/http.js";
 import { useRouter } from "vue-router";
 import { dateStringToDate } from "@/components/env";
 const router = useRouter();
-const node = ref({});
+const nodeData = ref({});
+const noType = computed(() => {
+  return !nodeData.value?.data?.class_id;
+});
+const active_node_id = ref("");
 watch(
-  () => node.value,
+  () => nodeData.value,
   (n) => {
-    if (n?.data.class_id) {
+    if (n.node.level == 1) return;
+    if (n?.data.class_id && active_node_id.value != n?.data.class_id) {
       getTableRows();
+      active_node_id.value = n.data.class_id;
     }
   },
   { deep: true }
@@ -149,7 +180,7 @@ const state = reactive({
     },
     {
       label: "是否启用",
-      prop: "is_enabled",
+      prop: "status",
     },
     {
       label: "创建人",
@@ -211,15 +242,16 @@ const selectable = (row, index) => {
   return row.is_enabled === 2;
 };
 const getTableRows = () => {
-  const [start_time = "", end_time = ""] = state.filter.time;
-  let params = { ...state.filter, class_id: node.value.data.class_id, start_time, end_time };
+  const [start_time = "", end_time = ""] = state.filter.time || [];
+  let params = { ...state.filter, class_id: nodeData.value.data.class_id, start_time, end_time };
   Reflect.deleteProperty(params, "time");
   axios.get("/v1/api/metric_config/list", { params }).then((res) => {
     if (res.data.code == 200) {
       state.tableRows =
-        res.data.data?.list?.map((e) => {
+        res.data.data?.list.map((e) => {
           return {
             ...e,
+            status: e.is_enabled == 1,
           };
         }) || [];
       state.tableTotal = res.data.data.total_count;
@@ -248,6 +280,7 @@ const deleteRow = (row) => {
 }; // 删除
 const batchDelete = () => {
   //   console.log("批量删除");
+  if (noType.value) return;
   if (!state.selected || state.selected.length == 0) {
     ElMessage.error("请先勾选要删除的数据");
     return;
@@ -283,14 +316,16 @@ const delConfirm = () => {
     });
 }; // 确定删除
 const clearSelected = () => {
+  if (nodeData.value.node.level == 1) return;
   dataTable.value.clearTable();
 }; // 清空
 const addRule = () => {
   //   console.log("新增");
+  if (noType.value) return;
   router.push({
     path: `/forewarning/indicator-config/add`,
     query: {
-      class_id: node.value.data.class_id,
+      class_id: nodeData.value.data?.class_id,
     },
   });
 }; // 新增规则
@@ -300,7 +335,7 @@ const editRow = (row) => {
     path: `/forewarning/indicator-config/edit`,
     query: {
       id: row.id,
-      class_id: node.value.data.class_id,
+      class_id: nodeData.value.data.class_id,
     },
   });
 }; // 编辑
@@ -308,17 +343,22 @@ const stateChange = async (row) => {
   await nextTick();
   const params = {
     id: row.id,
-    is_enabled: row.is_enabled,
+    is_enabled: row.status ? 1 : 2,
   };
-  axios.put("/v1/api/metric_config", params).then((res) => {
-    if (res.data.code == 200) {
-      ElMessage.success(`状态更新成功`);
-      getTableRows();
-    } else {
-      row.is_enabled = row.is_enabled == 1 ? 2 : 1;
-      ElMessage.error(res.data.msg);
-    }
-  });
+  axios
+    .put("/v1/api/metric_config", params)
+    .then((res) => {
+      if (res.data.code == 200) {
+        ElMessage.success(`状态更新成功`);
+        getTableRows();
+      } else {
+        row.status = !row.status;
+        ElMessage.error(res.data.msg);
+      }
+    })
+    .catch((e) => {
+      row.status = !row.status;
+    });
 };
 const { headers, tableRows, tableTotal, filter, noticeTypes, isEnabledOptions, delDialog } = toRefs(state);
 </script>
@@ -362,6 +402,21 @@ const { headers, tableRows, tableTotal, filter, noticeTypes, isEnabledOptions, d
         }
       }
     }
+    .selected-count {
+      color: #404a62;
+      font-size: 14px;
+      margin: 0 24px 0 40px;
+    }
+
+    .clear-selected {
+      color: #3759be;
+      font-size: 14px;
+      cursor: pointer;
+      &.is-disabled {
+        color: #c0c4cc;
+        cursor: not-allowed;
+      }
+    }
     .table_container {
       flex: 1;
       width: 100%;
@@ -385,4 +440,12 @@ const { headers, tableRows, tableTotal, filter, noticeTypes, isEnabledOptions, d
     }
   }
 }
+.add-btn.is-disabled {
+  &,
+  &:hover {
+    background-image: none;
+    background-color: rgb(149, 163, 202);
+    border-color: rgb(149, 163, 202);
+  }
+}
 </style>

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

@@ -7,7 +7,8 @@
         </el-form-item>
         <el-form-item label="指标表达式" prop="indicator_expression">
           <div class="indicator-expression">
-            <bg-code-editor v-model="state.form.indicator_expression"></bg-code-editor>
+            <!-- <bg-code-editor v-model="state.form.indicator_expression"></bg-code-editor> -->
+            <bg-codemirror v-model="state.form.indicator_expression"></bg-codemirror>
           </div>
         </el-form-item>
         <el-form-item label="预警范围" prop="">
@@ -53,9 +54,12 @@
           </el-form-item>
         </div>
         <el-form-item label="检查周期" prop="inspection_cycle">
-          <el-select style="flex: 1" v-model="state.form.inspection_cycle" placeholder="请选择检查周期">
-            <el-option v-for="item in inspectionCycleOptions" :key="item" :label="item" :value="item"> </el-option>
-          </el-select>
+          <div style="flex: 1; display: flex; align-items: center; gap: 8px">
+            <el-select style="flex: 1" v-model="state.form.inspection_cycle" placeholder="请选择检查周期">
+              <el-option v-for="item in inspectionCycleOptions" :key="item" :label="item" :value="item"> </el-option>
+            </el-select>
+            <span>分钟</span>
+          </div>
         </el-form-item>
         <el-form-item label="是否立即启用">
           <el-switch
@@ -143,14 +147,27 @@ const Submit = async () => {
   });
   let table_form_valid = await table_form_ref.value.Submit();
   if (form_valid && table_form_valid) {
-    return {
+    let obj = {
       ...state.form,
       ...table_form_ref.value?.form,
     };
+    if (!isEdit.value) {
+      setTimeout(() => {
+        state.form.indicator_expression = "";
+        table_form_ref.value.form_ref.resetFields();
+        form_ref.value.resetFields();
+      }, 100);
+    }
+    return obj;
   }
-  ElMessage.error("有必填项没有填写");
   return;
 };
+watch(
+  () => state.form.indicator_expression,
+  (n) => {
+    form_ref.value?.validateField(["indicator_expression"]);
+  }
+);
 // 监听是否是编辑，是则插入原数据
 watch(
   () => props.row,

src/page/main/forewarning/indicator-config/modules/interface.js

 import { ElMessage } from "element-plus";
 import axios from "@/request/http.js";
 const setParams = (res, { id, class_id }) => {
-    let params = {
-        class_id: +class_id,
-        metric_name: res.name,
-        expr: res.indicator_expression,
-        alert_range: res.warningScopeRows.map((e) => {
-            return {
-                variable_name: e.key,
-                metric_name: e.indicator_scope,
-                metric_label: e.indicator_tag,
-                chinese_name: e.cname,
-                is_required: e.is_required == 1,
-                is_linked: e.is_linkage == 1,
-            };
-        }) || [],
-        duration: +res.time,
-        duration_unit: res.unit,
-        check_period: res.inspection_cycle,
-        is_enabled: res.state,
-        alert_rule_type: res.rule_type,
-    }
-    if (id) {
-        params.id = id
-    }
-    return params;
-}
+  let params = {
+    class_id: +class_id,
+    metric_name: res.name,
+    expr: res.indicator_expression,
+    alert_range:
+      res.warningScopeRows.map((e) => {
+        return {
+          variable_name: e.key,
+          metric_name: e.indicator_scope,
+          metric_label: e.indicator_tag,
+          chinese_name: e.cname,
+          is_required: e.is_required == 1,
+          is_linked: e.is_linkage == 1,
+        };
+      }) || [],
+    duration: +res.time,
+    duration_unit: res.unit,
+    check_period: res.inspection_cycle,
+    is_enabled: res.state,
+    alert_rule_type: res.rule_type,
+  };
+  if (id) {
+    params.id = id;
+  }
+  return params;
+};
 export const Save = (res, p, cb) => {
-    let params = setParams(res, p);
-    axios[p.id ? 'put' : 'post']('/v1/api/metric_config', params).then(res => {
-        if (res.data.code == 200) {
-            ElMessage.success(`${p.id ? '编辑' : '新增'}成功`)
-            cb && cb()
-        } else {
-            ElMessage.error(res.data.data)
-        }
-    })
-}
+  let params = setParams(res, p);
+  axios[p.id ? "put" : "post"]("/v1/api/metric_config", params).then((res) => {
+    if (res.data.code == 200) {
+      ElMessage.success(`${p.id ? "编辑" : "新增"}成功`);
+      cb && cb();
+    } else {
+      ElMessage.error(res.data.data);
+    }
+  });
+};
\ No newline at end of file

src/page/main/forewarning/indicator-config/modules/slide.vue

@@ -62,7 +62,7 @@
       <el-button type="primary" size="default" @click="Save"> 保存 </el-button>
     </template>
   </el-dialog>
-  <el-dialog :close-on-click-modal="false" v-model="addWarnTarget" width="558px" :before-close="Cancel">
+  <el-dialog :close-on-click-modal="false" v-model="addWarnTarget" width="558px" :before-close="CancelAddWarnTarget">
     <template #header>
       <GapTitle :title="isEditWarnType ? '编辑预警对象' : '新增预警对象'"></GapTitle>
     </template>
@@ -88,11 +88,13 @@
       <el-button type="primary" size="default" @click="SaveAddWarnTarget"> 保存 </el-button>
     </template>
   </el-dialog>
-  <el-dialog v-model="delWarnType" width="400px" :before-close="Cancel">
+  <el-dialog v-model="delWarnType" width="400px" :before-close="CancelDel">
     <template #header>
-      <GapTitle title="删除预警分类"></GapTitle>
+      <GapTitle :title="`删除预警${activeTree.node.level == 1 ? '分类' : '对象'}`"></GapTitle>
     </template>
-    <div style="padding: 20px 0">是否确定删除 {{ activeTree.own.label }} 这个预警分类</div>
+    <div style="padding: 20px 0">
+      是否确定删除 {{ activeTree.own.label }} 这个预警{{ activeTree.node.level == 1 ? "分类" : "对象" }}
+    </div>
     <template #footer>
       <el-button size="default" @click="CancelDel">取消</el-button>
       <el-button type="primary" size="default" @click="ConfirmDel"> 确定 </el-button>
@@ -145,7 +147,7 @@ const getSlideTree = () => {
 };
 const filterNode = (value, data) => {
   if (!value) return data;
-  return data.label.includes(value);
+  return data.class_name.includes(value);
 };
 const Search = async () => {
   await nextTick();
@@ -156,7 +158,6 @@ const Add = () => {
 };
 const emits = defineEmits(["undate:modelValue"]);
 const treeNodeChoose = (data, node) => {
-  if (node.level == 1) return;
   emits("update:modelValue", { data, node });
 };
 const getBrotherNodes = (node) => {
@@ -333,7 +334,7 @@ const SaveAddWarnTarget = () => {
       let method = isEditWarnType.value ? "put" : "post";
       axios[method]("/v1/api/alert_class", params).then((res) => {
         if (res.data.code == 200) {
-          ElMessage.success("预警对象新建成功");
+          ElMessage.success(`预警对象${isEditWarnType.value ? "编辑" : "新建"}成功`);
           CancelAddWarnTarget();
           getSlideTree();
         } else {

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

@@ -26,10 +26,11 @@ const Cancle = () => {
 };
 const add_form = ref(null);
 const SaveSubmit = async () => {
-  let res = await add_form.value.Submit();
+  let { res, cb } = await add_form.value.Submit();
   if (!res) return;
   Save(res, {}, () => {
     Cancle();
+    cb && cb();
   });
 };
 </script>

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

@@ -13,7 +13,7 @@
           </template>
         </Info>
       </div>
-      <div class="warn-scope" v-if="detection_type == 1">
+      <div class="warn-scope" v-if="detection_type == 1 && watning_scope_data_key.length > 0">
         <gap-title :hasLine="true" title="预警范围"></gap-title>
         <div class="info">
           <Info :labelData="warning_scope_label" :valueData="watning_scope_data"> </Info>
@@ -22,7 +22,8 @@
       <div class="warn-scope" v-else>
         <gap-title :hasLine="true" title="指标表达式"></gap-title>
         <div class="indicator-expression">
-          <bg-code-editor v-model="indicator_expression" :disabled="true"></bg-code-editor>
+          <!-- <bg-code-editor v-model="indicator_expression" :disabled="true"></bg-code-editor> -->
+          <bg-codemirror :disabled="true" v-model="indicator_expression"></bg-codemirror>
         </div>
       </div>
       <gap-title :hasLine="true" title="预警规则"></gap-title>
@@ -210,11 +211,12 @@ const getInfoData = () => {
         data.alert_range.forEach((e) => {
           warning_scope_label.value.push([
             {
-              prop: e.name,
+              prop: e.chinese_name || e.name,
               label: e.chinese_name || e.name,
             },
           ]);
-          watning_scope_data.value[e.name] = e.value == ".*" ? "全部" : `${selectRule[e.compare]} ${e.value}`;
+          watning_scope_data.value[e.chinese_name || e.name] =
+            e.value == ".*" ? "全部" : `${selectRule[e.compare]} ${e.value}`;
         });
         let isEmpty = Empty(data.alert_rule_type, ruleTypeOptions.value);
         if (!isEmpty) {
@@ -241,7 +243,7 @@ const getInfoData = () => {
             if (ruleTypeOptions.value[data.alert_rule_type].up !== "") {
               max = ruleTypeOptions.value[data.alert_rule_type].up + unit;
             } else {
-              max = WIELESS_SMALL;
+              max = WIELESS_BIG;
             }
           }
           return {

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

@@ -32,9 +32,8 @@ const Cancle = () => {
 };
 const add_form = ref(null);
 const SaveSubmit = async () => {
-  let res = await add_form.value.Submit();
+  let { res, cb } = await add_form.value.Submit();
   if (!res) return;
-  console.log("res: ", res);
   Save(res, { id }, () => {
     Cancle();
   });
@@ -65,20 +64,20 @@ const getInfoData = () => {
                 warn_indicator: data.metric_config_id,
                 warn_target: findTypeBySecond(data.class_id)?.class_id || "",
                 rule_type: data.alert_rule_type,
+                warning_scpoe_form:
+                  data.alert_range?.map((e) => {
+                    return {
+                      ...e,
+                      value: e.value == ".*" ? "" : e.value,
+                      select: e.value == ".*" ? "all" : e.compare,
+                      options: [],
+                    };
+                  }) || [],
               },
             };
             if (isEmpty) {
               obj.type_com_ref.risk_level = data.alert_condition[0].risk_level;
             } else {
-              obj.type_com_ref.warning_scpoe_form =
-                data.alert_range?.map((e) => {
-                  return {
-                    ...e,
-                    value: e.value == ".*" ? "" : e.value,
-                    select: e.value == ".*" ? "all" : e.compare,
-                    options: [],
-                  };
-                }) || [];
               obj.type_com_ref.ruleRows =
                 data.alert_condition?.map((e) => {
                   return {

src/page/main/forewarning/rule-set/modules/add-form.vue

@@ -23,7 +23,8 @@
         ref="type_com_ref"
         :is="typeCom[state.form.type_key]"
         :isEdit="isEdit"
-        :form="typrFormData"></component>
+        :form="typrFormData"
+        @update-duration="updateDuration"></component>
       <gap-title :hasLine="true" title="高级配置"></gap-title>
       <div class="add-form-item">
         <div class="duration">
@@ -108,6 +109,7 @@ import ManualDistributionForm from "@/components/manual-distribution/form.vue";
 import Static from "./static.vue";
 import Custom from "./custom.vue";
 import { MAX_DAY } from "@/components/env.js";
+import { ElMessage } from "element-plus";
 const props = defineProps({
   row: {
     type: Object,
@@ -151,6 +153,14 @@ const inputNum = () => {
     state.form.time = max;
   }
 };
+
+const updateDuration = (data) => {
+  const { duration, duration_unit, check_period } = data;
+  state.form.time = duration;
+  state.form.unit = duration_unit;
+  state.form.inspection_cycle = check_period;
+};
+
 const types = {
   static: "静态阈值",
   custom: "自定义",
@@ -159,16 +169,6 @@ const changeType = async (key) => {
   state.form.type_key = key;
   form_ref.value.clearValidate();
 };
-const durationOptions = [
-  {
-    id: 1,
-    name: "直接产生预警",
-  },
-  {
-    id: 2,
-    name: "当预警持续",
-  },
-];
 const timeOptions = [10, 20, 60, 120, 180, 300];
 const inspectionCycleOptions = ref([1, 3, 5, 10, 20]);
 const form_ref = ref(null);
@@ -180,14 +180,26 @@ const Submit = async () => {
   let type_com_ref_valid = await type_com_ref.value.Submit();
   let manual_distribution_form_valid = await manual_distribution_form.value.Submit();
   if (form_valid && type_com_ref_valid && manual_distribution_form_valid) {
-    return {
+    let obj = {
       ...state.form,
       type_com_ref: type_com_ref.value?.form || {},
       manual_distribution_form: manual_distribution_form.value?.form || {},
     };
+    return {
+      res: obj,
+      cb: () => {
+        if (!isEdit.value) {
+          setTimeout(() => {
+            type_com_ref.value.form_ref.resetFields();
+            manual_distribution_form.value.form_ref.resetFields();
+            form_ref.value.resetFields();
+          }, 100);
+        }
+      },
+    };
   }
   ElMessage.error("有必填项没有填写");
-  return;
+  return {};
 };
 watch(
   () => props.row,

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

@@ -37,7 +37,8 @@
       <div class="custom-form-item">
         <el-form-item label="" prop="indicator_expression">
           <div class="indicator-expression">
-            <bg-code-editor v-model="state.form.indicator_expression"></bg-code-editor>
+            <!-- <bg-code-editor v-model="state.form.indicator_expression"></bg-code-editor> -->
+            <bg-codemirror v-model="state.form.indicator_expression"></bg-codemirror>
           </div>
         </el-form-item>
       </div>
@@ -250,11 +251,10 @@ 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, "") //只允许输入负号，数字，小数点
-    .replace(/(\-)+/, "$1") //过滤连续多个负号
-    .replace(/(\.)+/, "$1") //过滤连续多个小数点
-    .replace(/(\.\d+)\./g, "$1") //过滤出现多个小数点
-    .replace(/(\d)\-/g, "$1"); //过滤处于非开头的负号
+    .replace(/[^\-?\d.]/g, "")
+    .replace(/(\.)+/, "$1")
+    .replace(/(\.\d+)\.+/g, "$1")
+    .replace(/(\..*)\./g, "$1");
 };
 const changeWarningThresholdFrom = (index) => {
   let { down, up } = limit.value;
@@ -274,18 +274,13 @@ const changeWarningThresholdFrom = (index) => {
   }
   let rows = setLimits(index);
   if (rows.length == 0) return;
-  try {
-    rows.forEach((e) => {
-      if (from !== "") {
-        if (i == 0 && e.down === "" && +from <= +e.up) {
-          throw "";
-        }
-        if (e.up !== "" && e.down !== "" && +e.up >= +from && +from > +e.down) {
-          throw "";
-        }
-      }
-    });
-  } catch (e) {
+  let items = rows.filter((e, i) => {
+    let isPassDown = e.down !== "" ? +e.down <= +from : false;
+    let isLessUp = e.up !== "" ? +e.up >= +from : false;
+    let isLessDownAndPassUp = e.down !== "" && e.up !== "" && to !== "" ? +from < +e.down && +to > +e.up : false;
+    return (isPassDown && isLessUp) || isLessDownAndPassUp;
+  });
+  if (items.length > 0) {
     ElMessage.error(`该范围已被设置`);
     state.form.ruleRows[index].from = "";
   }
@@ -308,18 +303,13 @@ const changeWarningThresholdTo = (index) => {
   }
   let rows = setLimits(index);
   if (rows.length == 0) return;
-  try {
-    rows.forEach((e) => {
-      if (to !== "") {
-        if (i == rows.length - 1 && e.up === "" && +to > +e.down) {
-          throw "";
-        }
-        if (e.up !== "" && e.down !== "" && +e.up > +to && +to > +e.down) {
-          throw "";
-        }
-      }
-    });
-  } catch (e) {
+  let items = rows.filter((e, i) => {
+    let isPassDown = e.down !== "" ? +e.down <= +to : false;
+    let isLessUp = e.up !== "" ? +e.up >= +to : false;
+    let isLessDownAndPassUp = e.down !== "" && e.up !== "" && from !== "" ? +from < +e.down && +to > +e.up : false;
+    return (isPassDown && isLessUp) || isLessDownAndPassUp;
+  });
+  if (items.length > 0) {
     ElMessage.error(`该范围已被设置`);
     state.form.ruleRows[index].to = "";
   }

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

@@ -130,10 +130,20 @@ const state = reactive({
   },
   tableRules: {
     from: (index) => {
-      return [{ validator: (rule, value, callback) => validateFrom(rule, value, callback, index), trigger: "blur" }];
+      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" }];
+      return [
+        {
+          validator: (rule, value, callback) => validateTo(rule, value, callback, index),
+          trigger: "blur",
+        },
+      ];
     },
     risk_level: [{ required: true, message: "请选择", trigger: "change" }],
   },
@@ -218,7 +228,7 @@ const limit = computed(() => {
 const changeWarningThresholdFrom = (index) => {
   let { down, up } = limit.value;
   let { from, to } = state.form.ruleRows[index];
-  if (to !== "" && from !== "" && from > +to) {
+  if (to !== "" && from !== "" && from >= +to) {
     ElMessage.error(`下限不能大于上限`);
     state.form.ruleRows[index].from = "";
     return;
@@ -233,18 +243,13 @@ const changeWarningThresholdFrom = (index) => {
   }
   let rows = setLimits(index);
   if (rows.length == 0) return;
-  try {
-    rows.forEach((e, i) => {
-      if (from !== "") {
-        if (i == 0 && e.down === "" && +from <= +e.up) {
-          throw "";
-        }
-        if (e.up !== "" && e.down !== "" && +e.up >= +from && +from > +e.down) {
-          throw "";
-        }
-      }
-    });
-  } catch (e) {
+  let items = rows.filter((e, i) => {
+    let isPassDown = e.down !== "" ? +e.down <= +from : false;
+    let isLessUp = e.up !== "" ? +e.up >= +from : false;
+    let isLessDownAndPassUp = e.down !== "" && e.up !== "" && to !== "" ? +from < +e.down && +to > +e.up : false;
+    return (isPassDown && isLessUp) || isLessDownAndPassUp;
+  });
+  if (items.length > 0) {
     ElMessage.error(`该范围已被设置`);
     state.form.ruleRows[index].from = "";
   }
@@ -262,7 +267,7 @@ const inputNum = (index, key) => {
 const changeWarningThresholdTo = (index) => {
   let { down, up } = limit.value;
   let { from, to } = state.form.ruleRows[index];
-  if (to !== "" && from !== "" && from > +to) {
+  if (to !== "" && from !== "" && from >= +to) {
     ElMessage.error(`下限不能大于上限`);
     state.form.ruleRows[index].to = "";
     return;
@@ -277,18 +282,13 @@ const changeWarningThresholdTo = (index) => {
   }
   let rows = setLimits(index);
   if (rows.length == 0) return;
-  try {
-    rows.forEach((e, i) => {
-      if (to !== "") {
-        if (i == rows.length - 1 && e.up === "" && +to > +e.down) {
-          throw "";
-        }
-        if (e.up !== "" && e.down !== "" && +e.up > +to && +to > +e.down) {
-          throw "";
-        }
-      }
-    });
-  } catch (e) {
+  let items = rows.filter((e, i) => {
+    let isPassDown = e.down !== "" ? +e.down <= +to : false;
+    let isLessUp = e.up !== "" ? +e.up >= +to : false;
+    let isLessDownAndPassUp = e.down !== "" && e.up !== "" && from !== "" ? +from < +e.down && +to > +e.up : false;
+    return (isPassDown && isLessUp) || isLessDownAndPassUp;
+  });
+  if (items.length > 0) {
     ElMessage.error(`该范围已被设置`);
     state.form.ruleRows[index].to = "";
   }

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

 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 }) => {
     let isEmpty = res.type_com_ref.isEmpty
     let params = {
@@ -69,13 +68,12 @@ const setParams = (res, { id }) => {
                         compare: e.select == 'all' ? '=~' : e.select
                     }
                 }),
-                // // 预警规则(下拉)
+                // 预警规则(下拉)
                 alert_rule_type: res.type_com_ref.alert_rule_type,
             }
         }
     }
     let alert_condition = []
-        // debugger;
     if (isEmpty) {
         alert_condition = [{
             thresholds_max: 0,

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

@@ -89,7 +89,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onMounted, reactive, ref, shallowReactive } from "vue";
+import { computed, nextTick, onMounted, reactive, ref, shallowReactive, watch } from "vue";
 import gapTitle from "@/components/gap-title.vue";
 import Gateway from "./gateway.vue";
 import { ElMessage } from "element-plus";
@@ -132,13 +132,6 @@ const props = defineProps({
     default: false,
   },
 });
-// const changeSelect = (index, item) => {
-//   if (showSelect.includes(item.is_linked)) {
-//     state.form.warning_scpoe_form[index].value = [];
-//   } else {
-//     state.form.warning_scpoe_form[index].value = "";
-//   }
-// };
 const validateValue = (rule, value, callback, item, index) => {
   if (!item.is_required || item.select == "all") return callback();
   if (item.value == "") {
@@ -160,6 +153,22 @@ const state = reactive({
     risk_level: [{ required: true, message: "请选择风险程度", trigger: "change" }],
   },
 });
+const info = () => {
+  state.form.warn_type =
+    props.form.warn_target && props.form.warn_type ? [props.form.warn_target, props.form.warn_type] : [];
+  state.form.warn_indicator = props.form.warn_indicator;
+  alert_rule_type.value = props.form.rule_type || "1";
+  let params = {
+    page: 1,
+    page_size: 10000000000000,
+    class_id: props.form.warn_type,
+    is_enabled: 1,
+  };
+  getWarningIndicator(params, () => {
+    state.form.warning_scpoe_form = props.form?.warning_scpoe_form || [];
+  });
+  state.form.risk_level = props.form.risk_level;
+};
 const ruleTypeOptions = ref({});
 const getRuleTypeOptions = async (cb) => {
   ruleTypeOptions.value = await GetRuleTypeOptions();
@@ -167,11 +176,22 @@ const getRuleTypeOptions = async (cb) => {
     info();
   }
 };
+watch(
+  () => props.form,
+  (n) => {
+    if (!n) return;
+    info();
+  },
+  {
+    deep: true,
+  }
+);
 const module_data = ref({});
 const alert_rule_type = ref("");
 const isEmpty = computed(() => {
   return Empty(alert_rule_type.value, ruleTypeOptions.value);
 });
+const emits = defineEmits(["update-duration"]);
 const chooseWarnIndicator = () => {
   axios
     .get("/v1/api/metric_config", {
@@ -192,6 +212,7 @@ const chooseWarnIndicator = () => {
             loading: false,
           };
         });
+        emits("update-duration", module_data.value);
       } else {
         ElMessage.error(res.data.data);
       }
@@ -219,10 +240,29 @@ const cascaderProps = {
   label: "class_name",
 };
 const staticTypeOptions = ref([]);
+const staticTypeFormat = (res) => {
+  let arr = res?.map((e) => {
+    let children = [];
+    let is_disabled = false;
+    if (e.children?.length == 0 && e.parent_id == 0) {
+      children = [];
+      is_disabled = true;
+    } else {
+      children = staticTypeFormat(e.children);
+      is_disabled = false;
+    }
+    return {
+      ...e,
+      children: children,
+      disabled: is_disabled,
+    };
+  });
+  return arr;
+};
 const getStaticTypeOptions = () => {
   axios.get("/v1/api/alert_class/tree").then(async (res) => {
     if (res.data.code == 200) {
-      staticTypeOptions.value = res.data.data;
+      staticTypeOptions.value = staticTypeFormat(res.data.data);
     } else {
       ElMessage.error(res.data.msg);
     }
@@ -249,7 +289,8 @@ const warningIndexOptions = ref({});
 const cascader_ref = ref(null);
 const changeWarnStaticType = async () => {
   let class_id = state.form.warn_type[1];
-  let params = { page: 1, page_size: 10000000000000, class_id };
+  if (!class_id) return;
+  let params = { page: 1, page_size: 10000000000000, class_id, is_enabled: 1 };
   getWarningIndicator(params);
 };
 const getWarningIndicator = (params, cb) => {
@@ -293,16 +334,6 @@ const ruleHeaders = [
   },
 ];
 const rule_rows = computed(() => props.form?.ruleRows || []);
-const info = () => {
-  state.form.warn_type =
-    props.form.warn_target && props.form.warn_type ? [props.form.warn_target, props.form.warn_type] : [];
-  state.form.warn_indicator = props.form.warn_indicator;
-  alert_rule_type.value = props.form.rule_type || "1";
-  let params = { page: 1, page_size: 10000000000000, class_id: props.form.warn_type };
-  getWarningIndicator(params, () => {
-    state.form.warning_scpoe_form = props.form?.warning_scpoe_form || [];
-  });
-};
 onMounted(() => {
   getStaticTypeOptions();
   getRuleTypeOptions();