[feat](预警规则设置): 静态列表页及交互弹窗完成

src/bg-ui/bg-filter-group.vue

@@ -13,6 +13,7 @@
           @keydown.enter="search"
           @clear="search"
           clearable
+          :style="{ width: inputWidth }"
           v-model.trim="modelValue">
           <template #append>
             <div class="append-btn" @click="search">
@@ -59,6 +60,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  inputWidth: {
+    type: String,
+    default: "280px",
+  },
 });
 
 watch(props, (n, o) => {

src/bg-ui/index.scss

@@ -1999,7 +1999,7 @@ a {
       flex: 1;
     }
     .right-filter {
-      width: 398px;
+      min-width: 398px;
       justify-content: end;
       display: flex;
       .el-input {

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

@@ -122,7 +122,7 @@
         </bg-pagination>
       </div>
     </div>
-    <!-- todo: 推送提醒 -->
+    <!-- 推送提醒 -->
     <el-dialog title="推送提醒" v-model="pushDialog" width="780px" :before-close="cancelPushDialog">
       <div class="warning_info">
         <bg-icon
@@ -537,8 +537,8 @@ const pushConfirm = () => {
       if (state.pushType == 1) {
         ids.push(state.actionRow.id);
       } else {
-        state.selected.forEach((e) => {
-          ids.push(e.id);
+        ids = state.selected.map((e) => {
+          return e.id;
         });
       }
       let params = {
@@ -573,8 +573,8 @@ const confirmClose = () => {
       if (state.closeType == 1) {
         ids.push(state.actionRow.id);
       } else {
-        state.selected.forEach((e) => {
-          ids.push(e.id);
+        ids = state.selected.map((e) => {
+          return e.id;
         });
       }
       let params = {

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

+<template>
+  <div>规则详情</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

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

@@ -2,14 +2,18 @@
   <div class="detail_container">
     <bg-breadcrumb></bg-breadcrumb>
     <div class="main_container">
-      <bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入预警点/分类/指标">
+      <bg-filter-group
+        @search="changeSearch"
+        v-model="filter.search"
+        inputWidth="380px"
+        placeholder="请输入预警规则名称/预警对象/预警分类/预警指标">
         <template v-slot:left_action>
           <div class="apaas_button">
-            <el-button type="primary" @click="batchPush">
-              <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-edit"></bg-icon>
+            <el-button type="primary" @click="addRule">
+              <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>
+            <el-button type="default" @click="batchDelete">批量删除</el-button>
             <span class="header_info"
               >已选择 <span style="color: #202531; font-weight: bold"> {{ state.selected.length }} </span> 项
             </span>
@@ -18,41 +22,19 @@
         </template>
         <template v-slot:filter_group>
           <div class="left-filter filter_list">
-            <!-- <div class="filter_item">
-              <span class="filter_title">预警分类</span>
-              <el-select v-model="filter.warning_type" placeholder="请选择" style="width: 300px">
-                <el-option
-                  v-for="(item, index) in warningTypes"
-                  :key="'warningType' + index"
-                  :label="item.name"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </div>
-            <div class="filter_item">
-              <span class="filter_title">预警指标</span>
-              <el-select v-model="filter.warning_target" placeholder="请选择" style="width: 300px">
-                <el-option
-                  v-for="(item, index) in warningTargets"
-                  :key="'warningTargets' + index"
-                  :label="item.name"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </div> -->
             <div class="filter_item">
-              <span class="filter_title">风险等级</span>
-              <el-select v-model="filter.risk_level" placeholder="请选择" style="width: 300px">
+              <span class="filter_title">通知方式</span>
+              <el-select v-model="filter.notice_method" placeholder="请选择" style="width: 300px">
                 <el-option
-                  v-for="(item, index) in riskLevels"
-                  :key="'riskLevels' + index"
+                  v-for="(item, index) in noticeTypes"
+                  :key="'noticeTypes' + index"
                   :label="item.name"
                   :value="item.value">
                 </el-option>
               </el-select>
             </div>
             <div class="filter_item">
-              <span class="filter_title">状态</span>
+              <span class="filter_title">启用状态</span>
               <el-select v-model="filter.state" placeholder="请选择" style="width: 300px">
                 <el-option
                   v-for="(item, index) in stateOptions"
@@ -63,7 +45,7 @@
               </el-select>
             </div>
             <div class="filter_item">
-              <span class="filter_title">预警时间</span>
+              <span class="filter_title">时段</span>
               <el-date-picker
                 style="width: 300px"
                 v-model="filter.time"
@@ -90,25 +72,28 @@
             :isIndex="true"
             :select="true"
             :stripe="true">
-            <template v-slot:warning_point="{ row }">
+            <template v-slot:rule_name="{ row }">
               <span class="can_click_text" @click="goDetail(row)">
-                {{ row.warning_point }}
+                {{ row.rule_name }}
               </span>
             </template>
-            <template v-slot:warning_time="{ row }">
-              {{ row.warning_time ? row.warning_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
-            </template>
-            <template v-slot:last_push_time="{ row }">
-              {{ row.last_push_time ? row.last_push_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
+            <template v-slot:notice_method="{ row }">
+              {{ ["", "钉钉", "短信"][row.notice_method] }}
             </template>
             <template #state="{ row }">
-              <span :class="`circle bgc_${row.state}`"></span>
-              {{ ["未恢复", "已恢复", "已关闭"][row.state] }}
+              <bg-switch
+                @click="stateChange(row)"
+                :labels="['否', '是']"
+                :values="[0, 1]"
+                v-model="row.state"></bg-switch>
+            </template>
+            <template v-slot:created_time="{ row }">
+              {{ row.created_time ? row.created_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
             </template>
             <template v-slot:action="{ row }">
               <bg-table-btns2 :limit="3" :tableData="tableRows">
-                <bg-table-btn :disabled="row.state != 0" @click="pushWarning(row)">编辑</bg-table-btn>
-                <bg-table-btn :disabled="row.state != 0" @click="closeWarning(row)">删除</bg-table-btn>
+                <bg-table-btn :disabled="row.state != 0" @click="editRow(row)">编辑</bg-table-btn>
+                <bg-table-btn :disabled="row.state != 0" @click="deleteRow(row)">删除</bg-table-btn>
               </bg-table-btns2>
             </template>
           </bg-table>
@@ -122,26 +107,13 @@
         </bg-pagination>
       </div>
     </div>
-    <!-- todo: 推送提醒 -->
-    <el-dialog title="推送提醒" v-model="pushDialog" width="780px" :before-close="cancelPushDialog">
-      <div class="warning_info">
-        <bg-icon
-          style="font-size: 12px; color: #a9b1c7; margin-right: 8px; vertical-align: middle"
-          icon="#bg-ic-s-circle-tips"></bg-icon
-        >该推送为临时推送，可调整推送人员，仅本次有效！如固定通知人员，则前往【预警规则设置】调整预警内容
-      </div>
-      <el-form ref="pushForm" :model="pushFormData" :rules="pushRules" label-width="120px" class="bg_form">
-        <el-form-item label="预警工单推送" prop="method" style="margin-bottom: 24px">
-          <el-checkbox-group v-model="pushFormData.method">
-            <el-checkbox :label="1">钉钉</el-checkbox>
-            <el-checkbox :label="2">短信</el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
-      </el-form>
+    <!-- 删除 -->
+    <el-dialog class="dialog_box" title="删除" v-model="delDialog" width="420px">
+      <div>确定要删除吗？</div>
       <template v-slot:footer>
         <div class="apaas_button">
-          <el-button type="default" @click="cancelPushDialog">取消</el-button>
-          <el-button type="primary" @click="pushConfirm">确定</el-button>
+          <el-button type="default" @click="delDialog = false">取消</el-button>
+          <el-button type="primary" @click="delConfirm">确定</el-button>
         </div>
       </template>
     </el-dialog>
@@ -158,52 +130,20 @@ import { useRouter } from "vue-router";
 
 const router = useRouter();
 
-const bgForm = ref(null);
 const dataTable = ref(null);
-const closeForm = ref(null);
-const userTable = ref(null);
-const pushForm = ref(null);
 
 const state = reactive({
-  warningTypes: [
-    {
-      name: "全部",
-      value: "",
-    },
-    {
-      name: "分类1",
-      value: 1,
-    },
-    {
-      name: "分类2",
-      value: 2,
-    },
-  ], // 预警分类数据
-  warningTargets: [
-    {
-      name: "全部",
-      value: "",
-    },
-    {
-      name: "指标1",
-      value: 1,
-    },
-    {
-      name: "指标2",
-      value: 2,
-    },
-  ], // 预警指标数据
-  riskLevels: [
+  noticeTypes: [
     {
       name: "全部",
       value: "",
     },
     {
-      name: "等级1",
+      name: "钉钉",
       value: 1,
     },
     {
-      name: "等级2",
+      name: "短信",
       value: 2,
     },
   ], // 风险等级
@@ -213,28 +153,23 @@ const state = reactive({
       value: "",
     },
     {
-      name: "已恢复",
-      value: "1",
-    },
-    {
-      name: "未恢复",
-      value: "0",
+      name: "启用",
+      value: 1,
     },
     {
-      name: "已关闭",
-      value: "2",
+      name: "停用",
+      value: 2,
     },
   ], // 状态
   headers: [
     {
-      label: "预警点",
-      prop: "warning_point",
-      width: 180,
+      label: "预警规则名称",
+      prop: "rule_name",
+      width: 200,
     },
     {
-      label: "预警时间",
-      prop: "warning_time",
-      width: 160,
+      label: "预警对象",
+      prop: "warning_object",
     },
     {
       label: "预警分类",
@@ -245,41 +180,30 @@ const state = reactive({
       prop: "warning_target_name",
     },
     {
-      label: "风险等级",
-      prop: "risk_level_name",
-    },
-    {
-      label: "当前报警值",
-      prop: "now_warn_data",
-    },
-    {
-      label: "预警阈值",
-      prop: "warn_threshold",
+      label: "通知方式",
+      prop: "notice_method",
     },
     {
       label: "通知人数",
       prop: "notice_people_num",
-      width: 80,
     },
     {
-      label: "推送次数",
-      prop: "push_times",
-      width: 80,
+      label: "是否启用",
+      prop: "state",
     },
     {
-      label: "最后推送时间",
-      prop: "last_push_time",
-      width: 160,
+      label: "创建人",
+      prop: "created_user",
     },
     {
-      label: "状态",
-      prop: "state",
-      width: 90,
+      label: "创建时间",
+      prop: "created_time",
+      width: 160,
     },
     {
       label: "操作",
       prop: "action",
-      width: 180,
+      width: 136,
       fixed: "right",
     },
   ],
@@ -287,9 +211,7 @@ const state = reactive({
   selected: [], //选择数据
   tableTotal: 0, // 表格数据条数
   filter: {
-    warning_type: "", // 预警类型
-    warning_target: "", // 预警指标
-    risk_level: "", // 风险等级
+    notice_method: "", // 通知方式
     state: "", // 状态
     time: [],
     search: "",
@@ -297,26 +219,8 @@ const state = reactive({
     limit: 10,
   }, // 表格筛选项
   actionRow: null, // 当前操作的数据
-  closeWarningDialog: false, // 删除弹窗
-  closeFormData: {
-    close_notes: "",
-    close_remind: false,
-  },
-  closeRules: {
-    close_notes: [{ required: true, message: "请输入关闭备注", trigger: "blur" }],
-  },
-  pushDialog: false,
-  userData: [],
-  pushFormData: {
-    method: [],
-  },
-  pushRules: {
-    method: [{ type: "array", required: true, message: "请最少选择一种推送方式", trigger: "change" }],
-  },
-});
-
-const userTableFlag = computed(() => {
-  return !!state.pushDialog;
+  delDialog: false, // 删除弹窗
+  delType: 0, // 1-单条删除 2-批量删除
 });
 
 const selectRows = (data) => {
@@ -329,11 +233,17 @@ const clearSelected = () => {
 
 const batchDelete = () => {
   console.log("批量删除");
+  if (!state.selected || state.selected.length == 0) {
+    ElMessage.error("请先勾选要删除的数据");
+    return;
+  }
+  state.delType = 2;
+  state.delDialog = true;
 }; // 批量删除
 
 const goDetail = (row) => {
   console.log("去详情");
-  router.push(`/forewarning/list/detail?id=${row.id}`);
+  router.push(`/forewarning/rule-set/detail?id=${row.id}`);
 }; // 查看详情
 
 const changeSearch = (val) => {
@@ -347,9 +257,7 @@ const filterAction = () => {
 
 const filterClear = () => {
   state.filter = {
-    warning_type: "", // 预警类型
-    warning_target: "", // 预警指标
-    risk_level: "", // 风险等级
+    notice_method: "", // 通知方式
     state: "", // 状态
     time: "",
     search: "",
@@ -377,45 +285,39 @@ const getTableRows = () => {
   state.tableRows = [
     {
       id: 1,
-      warning_point: "容器云/tyyh",
-      warning_time: "2020-01-01 00:00:00",
+      rule_name: "容器云/tyyh",
+      warning_object: "容器云",
       warning_type_name: "容器组",
       warning_target_name: "服务中断",
-      risk_level_name: "重大风险",
-      now_warn_data: "",
-      warn_threshold: "",
-      notice_people_num: 2,
-      push_times: 2,
-      last_push_time: "2020-01-01 00:00:00",
-      state: 0,
+      notice_people_num: 1,
+      created_user: "王五",
+      created_time: "2020-01-01 00:00:00",
+      state: 1,
+      notice_method: 1,
     },
     {
       id: 2,
-      warning_point: "容器云/kube-apiserver",
-      warning_time: "2020-01-01 00:00:00",
+      rule_name: "容器云/kube-apiserver",
+      warning_object: "容器云",
       warning_type_name: "容器集群",
       warning_target_name: "内存使用率",
-      risk_level_name: "较大风险",
-      now_warn_data: "66%",
-      warn_threshold: "60%-70%",
-      notice_people_num: 3,
-      push_times: 1,
-      last_push_time: "2020-01-01 00:00:00",
+      notice_people_num: 23,
+      created_user: "李四",
+      created_time: "2020-01-01 00:00:00",
       state: 0,
+      notice_method: 2,
     },
     {
       id: 3,
-      warning_point: "容器云/kube-apiserver",
-      warning_time: "2020-01-01 00:00:00",
+      rule_name: "容器云/kube-apiserver",
+      warning_object: "容器云",
       warning_type_name: "容器集群",
       warning_target_name: "内存使用率",
-      risk_level_name: "较大风险",
-      now_warn_data: "66%",
-      warn_threshold: "60%-70%",
-      notice_people_num: 3,
-      push_times: 1,
-      last_push_time: "2020-01-01 00:00:00",
-      state: 2,
+      notice_people_num: 456,
+      created_user: "张三",
+      created_time: "2020-01-01 00:00:00",
+      state: 0,
+      notice_method: 1,
     },
   ];
 }; // 获取表格数据
@@ -430,94 +332,60 @@ const changeSize = (size) => {
   changePage(1);
 }; // 改变每页条数
 
-const batchPush = () => {
-  console.log("批量推送");
-}; // 批量推送
-
-const pushWarning = (row) => {
-  state.actionRow = row;
-  console.log("推送提醒");
-  state.userData = [
-    {
-      account: 1,
-      name: "张一",
-      mobile: "13111111111",
-    },
-    {
-      account: 2,
-      name: "张二二",
-      mobile: "13222222222",
-    },
-    {
-      account: 4,
-      name: "张四三",
-      mobile: "13443434344",
-    },
-  ];
-  state.pushDialog = true;
-}; // 推送提醒
-
-const changeData = (data) => {
-  state.userData = data.data;
+const stateChange = (row) => {
+  console.log("更改状态");
+  // axios
+  //   .put(`/xxx/xxx?id=${row.id}&state=${row.state}`)
+  //   .then((res) => {
+  //     if (res.data.code == 200) {
+  //       ElMessage.success(res.data.msg);
+  //       changePage(1);
+  //     } else {
+  //       ElMessage.error(res.data.data);
+  //       row.state = row.state == 0 ? 1 : 0;
+  //     }
+  //   });
 };
 
-const cancelPushDialog = () => {
-  pushForm.value.resetFields();
-  state.pushDialog = false;
-}; // 预警推送弹窗取消按钮：重置表单
+const addRule = () => {
+  console.log("新增");
+  // router.push(`/xxx/xxx`);
+}; // 新增规则
 
-const pushConfirm = () => {
-  pushForm.value.validate((valid) => {
-    if (valid) {
-      console.log(state.actionRow.id, state.userData);
-      console.log(state.pushFormData);
-      cancelPushDialog();
-    }
-  });
-};
+const editRow = (row) => {
+  console.log("编辑");
+  // router.push(`/xxx/xxx?id=${row.id}`);
+}; // 编辑
 
-const closeWarning = (row) => {
+const deleteRow = (row) => {
   state.actionRow = row;
-  state.closeWarningDialog = true;
-  console.log("关闭预警");
-}; // 关闭预警
+  state.delType = 1;
+  state.delDialog = true;
+  console.log("删除");
+}; // 删除
 
-const cancelCloseWarningDialog = () => {
-  closeForm.value.resetFields();
-  state.closeWarningDialog = false;
-}; // 关闭预警弹窗取消按钮：重置表单
-
-const confirmClose = () => {
-  closeForm.value.validate((valid) => {
-    if (valid) {
-      console.log(state.actionRow.id);
-      console.log(state.closeFormData);
-      cancelCloseWarningDialog();
-    }
-  });
-}; // 关闭预警弹窗确定按钮：提交表单
+const delConfirm = () => {
+  let ids = [];
+  if (state.delType == 1) {
+    ids.push(state.actionRow.id);
+  } else {
+    ids = state.selected.map((e) => {
+      return e.id;
+    });
+  }
+  console.log(ids);
+  state.delDialog = false;
+  setTimeout(() => {
+    clearSelected();
+    changePage(1);
+  }, 200);
+}; // 确定删除
 
 onBeforeMount(() => {
   getTableRows();
 });
 
-const {
-  headers,
-  tableRows,
-  tableTotal,
-  filter,
-  warningTypes,
-  warningTargets,
-  riskLevels,
-  stateOptions,
-  closeWarningDialog,
-  closeFormData,
-  closeRules,
-  pushDialog,
-  userData,
-  pushFormData,
-  pushRules,
-} = toRefs(state);
+const { headers, tableRows, tableTotal, filter, noticeTypes, stateOptions, delDialog } = toRefs(state);
 </script>
 
 <style lang="scss" scoped>
@@ -554,53 +422,8 @@ const {
       padding: 0 16px;
       .table {
         max-height: calc(100% - 64px);
-        .circle {
-          display: inline-block;
-          width: 6px;
-          height: 6px;
-          border-radius: 3px;
-          margin-right: 8px;
-          transform: translateY(-2px);
-        }
-        .bgc_0 {
-          background-color: #d75138;
-        }
-        .bgc_1 {
-          background-color: #48ad97;
-        }
-        .bgc_2 {
-          background-color: #9e9e9e;
-        }
-      }
-    }
-  }
-
-  .bg_form {
-    width: 100%;
-    box-sizing: border-box;
-    .el-form-item {
-      margin-bottom: 16px;
-      :deep().el-form-item__label {
-        line-height: 36px;
-        height: 36px;
-      }
-      .el-form-item__content {
-        width: 100%;
-        .el-textarea {
-          :deep().el-input__count {
-            bottom: 6px;
-            right: 4px;
-            font-family: Roboto-Regular;
-            color: #a9b1c7;
-          }
-        }
       }
     }
   }
-  :deep().dialog_box {
-    .el-dialog__body {
-      padding-bottom: 0;
-    }
-  }
 }
 </style>