预警列表优化部分细节，预警列表详情页开发

src/components/warn-detail/tab.vue

@@ -14,7 +14,7 @@
         <template #status="{ row }">
           <span v-if="item.prop == 'push'">
             <span class="status" :class="`status-${row.status}`"></span>
-            <span>{{ STATUS_OBJ[row.status] }}</span>
+            <span>{{ PUSH_STATUS[row.status] }}</span>
           </span>
           <span v-else :class="`tab-${row.status}`">
             {{ STATUS_OBJ[row.status] }}
@@ -27,7 +27,7 @@
 
 <script setup>
 import { ref } from "vue";
-import { STATUS_OBJ } from "./env.js";
+import { STATUS_OBJ, PUSH_STATUS } from "./env.js";
 const activeTab = ref("push");
 const props = defineProps({
   tabs: {
@@ -59,22 +59,22 @@ const headers = {
     },
   ],
   dispose: [
-    {
-      prop: "status",
-      label: "状态",
-    },
     {
       prop: "feedback",
       label: "处置反馈",
     },
     {
       prop: "feedback_time",
-      label: "处置反馈",
+      label: "反馈时间",
     },
     {
       prop: "feedback_person",
       label: "反馈人员",
     },
+    {
+      prop: "status",
+      label: "状态",
+    },
   ],
 };
 </script>

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

+<template>
+  <div class="my-warn-detail">
+    <div class="breadcrumb">
+      <bg-breadcrumb />
+    </div>
+    <div class="content">
+      <warn-detail :label-data="labelData" :value-data="info" :tabs="tabs"></warn-detail>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+import warnDetail from "@/components/warn-detail/index.vue";
+const labelData = [
+  [
+    {
+      label: "预警点",
+      prop: "warning_point",
+    },
+    {
+      label: "预警分类",
+      prop: "warning_type",
+    },
+  ],
+  [
+    {
+      label: "预警指标",
+      prop: "warning_index",
+    },
+    {
+      label: "风险等级",
+      prop: "risk_level",
+    },
+  ],
+  [
+    {
+      label: "状态",
+      prop: "status",
+    },
+    {
+      label: "预警阈值",
+      prop: "warning_threshold",
+    },
+  ],
+  [
+    {
+      label: "当前报警值",
+      prop: "current_alarm_value",
+    },
+    {
+      label: "预警时间",
+      prop: "warning_time",
+    },
+  ],
+];
+const info = {
+  warning_point: "SaaS层/数据治理系统",
+  warning_type: "容器集群",
+  warning_index: "响应时间超时",
+  risk_level: "一般风险",
+  status: "success",
+  warning_threshold: "10ms",
+  current_alarm_value: "16ms",
+  warning_time: "2020-01-01 00:00:00",
+};
+const tabs = [
+  {
+    label: "推送记录",
+    prop: "push",
+    lists: [
+      {
+        method: "短信",
+        person: [11, 22, 33, 44],
+        push_time: "2022-07-29 10:23:59",
+        push_type: "自动推送",
+        status: "success",
+      },
+      {
+        method: "钉钉",
+        person: [11, 33, 44],
+        push_time: "2022-07-29 10:23:59",
+        push_type: "自动推送",
+        status: "error",
+      },
+    ],
+  },
+  {
+    label: "处置记录",
+    prop: "dispose",
+    lists: [
+      {
+        status: "error",
+        feedback: "暂时无法处理，需要时间",
+        feedback_time: "2022-07-29 10:23:59",
+        feedback_person: "张三",
+      },
+      {
+        status: "success",
+        feedback: "暂时无法处理，需要时间",
+        feedback_time: "2022-07-29 10:23:59",
+        feedback_person: "张三",
+      },
+    ],
+  },
+];
+</script>
+
+<style lang="scss" scoped>
+.my-warn-detail {
+  width: 100%;
+  height: 100%;
+  padding: 0 24px 16px;
+  .breadcrumb {
+    width: 100%;
+    height: 46px;
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 46px);
+    background-color: #ffffff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
+    border-radius: 6px;
+    padding: 32px;
+  }
+}
+</style>

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

@@ -2,14 +2,14 @@
   <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" 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>
-            <el-button type="default" @click="batchDelete"> 批量删除 </el-button>
+            <el-button type="default" @click="batchClose">批量关闭</el-button>
             <span class="header_info"
               >已选择 <span style="color: #202531; font-weight: bold"> {{ state.selected.length }} </span> 项
             </span>
@@ -18,7 +18,7 @@
         </template>
         <template v-slot:filter_group>
           <div class="left-filter filter_list">
-            <div class="filter_item">
+            <!-- <div class="filter_item">
               <span class="filter_title">预警分类</span>
               <el-select v-model="filter.warning_type" placeholder="请选择" style="width: 300px">
                 <el-option
@@ -39,7 +39,7 @@
                   :value="item.value">
                 </el-option>
               </el-select>
-            </div>
+            </div> -->
             <div class="filter_item">
               <span class="filter_title">风险等级</span>
               <el-select v-model="filter.risk_level" placeholder="请选择" style="width: 300px">
@@ -186,6 +186,10 @@ import axios from "@/request/http.js";
 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";
+
+const router = useRouter();
+
 const bgForm = ref(null);
 const dataTable = ref(null);
 const closeForm = ref(null);
@@ -341,6 +345,8 @@ const state = reactive({
   pushRules: {
     method: [{ type: "array", required: true, message: "请最少选择一种推送方式", trigger: "change" }],
   },
+  pushType: 0, // 1-单条推送 2-批量推送
+  closeType: 0, // 1-单条推送 2-批量推送
 });
 
 const userTableFlag = computed(() => {
@@ -355,12 +361,19 @@ const clearSelected = () => {
   dataTable.value.clearTable();
 }; // 清空
 
-const batchDelete = () => {
-  console.log("批量删除");
-}; // 批量删除
+const batchClose = () => {
+  console.log("批量关闭");
+  if (!state.selected || state.selected.length == 0) {
+    ElMessage.error("请先勾选要关闭的预警数据");
+    return;
+  }
+  state.closeType = 2;
+  state.closeWarningDialog = true;
+}; // 批量关闭
 
 const goDetail = (row) => {
   console.log("去详情");
+  router.push(`/forewarning/list/detail?id=${row.id}`);
 }; // 查看详情
 
 const changeSearch = (val) => {
@@ -459,11 +472,35 @@ const changeSize = (size) => {
 
 const batchPush = () => {
   console.log("批量推送");
+  if (!state.selected || state.selected.length == 0) {
+    ElMessage.error("请先勾选要推送的数据");
+    return;
+  }
+  state.pushType = 2;
+  state.userData = [
+    {
+      account: 1,
+      name: "张一",
+      mobile: "13111111111",
+    },
+    {
+      account: 2,
+      name: "张二二",
+      mobile: "13222222222",
+    },
+    {
+      account: 4,
+      name: "张四三",
+      mobile: "13443434344",
+    },
+  ];
+  state.pushDialog = true;
 }; // 批量推送
 
 const pushWarning = (row) => {
   state.actionRow = row;
   console.log("推送提醒");
+  state.pushType = 1;
   state.userData = [
     {
       account: 1,
@@ -496,15 +533,30 @@ const cancelPushDialog = () => {
 const pushConfirm = () => {
   pushForm.value.validate((valid) => {
     if (valid) {
-      console.log(state.actionRow.id, state.userData);
-      console.log(state.pushFormData);
-      cancelPushDialog();
+      let ids = [];
+      if (state.pushType == 1) {
+        ids.push(state.actionRow.id);
+      } else {
+        state.selected.forEach((e) => {
+          ids.push(e.id);
+        });
+      }
+      let params = {
+        ids: ids,
+        method: state.pushFormData.method || [],
+      };
+      setTimeout(() => {
+        cancelPushDialog();
+        clearSelected();
+        changePage(1);
+      }, 200);
     }
   });
 };
 
 const closeWarning = (row) => {
   state.actionRow = row;
+  state.closeType = 1;
   state.closeWarningDialog = true;
   console.log("关闭预警");
 }; // 关闭预警
@@ -517,9 +569,25 @@ const cancelCloseWarningDialog = () => {
 const confirmClose = () => {
   closeForm.value.validate((valid) => {
     if (valid) {
-      console.log(state.actionRow.id);
-      console.log(state.closeFormData);
-      cancelCloseWarningDialog();
+      let ids = [];
+      if (state.closeType == 1) {
+        ids.push(state.actionRow.id);
+      } else {
+        state.selected.forEach((e) => {
+          ids.push(e.id);
+        });
+      }
+      let params = {
+        ids: ids,
+        close_notes: state.closeFormData.close_notes,
+        close_remind: state.closeFormData.close_remind,
+      };
+      console.log(params);
+      setTimeout(() => {
+        cancelCloseWarningDialog();
+        clearSelected();
+        changePage(1);
+      }, 200);
     }
   });
 }; // 关闭预警弹窗确定按钮：提交表单

src/page/main/forewarning/list/user-input-table.vue

@@ -36,7 +36,7 @@
 
       <template v-slot:action="{ row, index }">
         <bg-table-btn
-          :disabled="disabled || !canAdd"
+          :disabled="disabled"
           :click="
             () => {
               addParam(index);
@@ -179,9 +179,9 @@ watch(
   }
 );
 
-const canAdd = computed(() => {
-  return state.tableRows.length >= 5 ? false : true;
-}); // 最多五条数据，控制下新增按钮的禁用
+// const canAdd = computed(() => {
+//   return state.tableRows.length >= 5 ? false : true;
+// }); // 最多五条数据，控制下新增按钮的禁用
 
 onBeforeMount(() => {
   initTable();