From 3d4226e9bc8a54ca9941a06b8ef12106a5868231 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E4=BC=9F=E5=BA=9A?= <zhaoweigeng@wodcloud.com>
Date: Sun, 25 Jun 2023 16:36:14 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E8=AD=A6=E5=88=97=E8=A1=A8=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E9=83=A8=E5=88=86=E7=BB=86=E8=8A=82=EF=BC=8C=E9=A2=84?=
 =?UTF-8?q?=E8=AD=A6=E5=88=97=E8=A1=A8=E8=AF=A6=E6=83=85=E9=A1=B5=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/warn-detail/tab.vue            |  14 +-
 .../main/forewarning/list/detail/index.vue    | 127 ++++
 src/page/main/forewarning/list/index.vue      |  94 ++-
 .../forewarning/list/user-input-table.vue     |   8 +-
 src/page/main/forewarning/rule-set/index.vue  | 605 +++++++++++++++++-
 5 files changed, 821 insertions(+), 27 deletions(-)
 create mode 100644 src/page/main/forewarning/list/detail/index.vue

diff --git a/src/components/warn-detail/tab.vue b/src/components/warn-detail/tab.vue
index 069ab3f..1615ab4 100644
--- a/src/components/warn-detail/tab.vue
+++ b/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>
diff --git a/src/page/main/forewarning/list/detail/index.vue b/src/page/main/forewarning/list/detail/index.vue
new file mode 100644
index 0000000..c405a24
--- /dev/null
+++ b/src/page/main/forewarning/list/detail/index.vue
@@ -0,0 +1,127 @@
+<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>
diff --git a/src/page/main/forewarning/list/index.vue b/src/page/main/forewarning/list/index.vue
index 9ccecf8..8bf49b1 100644
--- a/src/page/main/forewarning/list/index.vue
+++ b/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);
     }
   });
 }; // 关闭预警弹窗确定按钮：提交表单
diff --git a/src/page/main/forewarning/list/user-input-table.vue b/src/page/main/forewarning/list/user-input-table.vue
index 86288fc..4353285 100644
--- a/src/page/main/forewarning/list/user-input-table.vue
+++ b/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();
diff --git a/src/page/main/forewarning/rule-set/index.vue b/src/page/main/forewarning/rule-set/index.vue
index 2d6fb16..039f240 100644
--- a/src/page/main/forewarning/rule-set/index.vue
+++ b/src/page/main/forewarning/rule-set/index.vue
@@ -1,7 +1,606 @@
 <template>
-  <div>预警规则管理</div>
+  <div class="detail_container">
+    <bg-breadcrumb></bg-breadcrumb>
+    <div class="main_container">
+      <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>
+            <span class="header_info"
+              >已选择 <span style="color: #202531; font-weight: bold"> {{ state.selected.length }} </span> 项
+            </span>
+            <span class="header_info can_click_text" @click="clearSelected">清空</span>
+          </div>
+        </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">
+                <el-option
+                  v-for="(item, index) in riskLevels"
+                  :key="'riskLevels' + 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.state" placeholder="请选择" style="width: 300px">
+                <el-option
+                  v-for="(item, index) in stateOptions"
+                  :key="'stateOptions' + index"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">预警时间</span>
+              <el-date-picker
+                style="width: 300px"
+                v-model="filter.time"
+                type="daterange"
+                value-format="yyyy-MM-DD"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期" />
+            </div>
+          </div>
+          <div class="right-action apaas_button">
+            <el-button type="primary" @click="filterAction"> 查询 </el-button>
+            <el-button type="default" @click="filterClear"> 重置 </el-button>
+          </div>
+        </template>
+      </bg-filter-group>
+      <div class="table_container">
+        <div class="table bg-scroll">
+          <bg-table
+            ref="dataTable"
+            :headers="headers"
+            :rows="tableRows"
+            @selectAc="selectRows"
+            :isIndex="true"
+            :select="true"
+            :stripe="true">
+            <template v-slot:warning_point="{ row }">
+              <span class="can_click_text" @click="goDetail(row)">
+                {{ row.warning_point }}
+              </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>
+            <template #state="{ row }">
+              <span :class="`circle bgc_${row.state}`"></span>
+              {{ ["未恢复", "已恢复", "已关闭"][row.state] }}
+            </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-btns2>
+            </template>
+          </bg-table>
+        </div>
+        <bg-pagination
+          :page="filter.page"
+          :size="filter.size"
+          :total="tableTotal"
+          @change-page="changePage"
+          @change-size="changeSize">
+        </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>
+      <template v-slot:footer>
+        <div class="apaas_button">
+          <el-button type="default" @click="cancelPushDialog">取消</el-button>
+          <el-button type="primary" @click="pushConfirm">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { reactive, ref, onBeforeMount, toRefs, computed, watch, nextTick, watchEffect } from "vue";
+import { ElMessage } from "element-plus";
+import axios from "@/request/http.js";
+import { Search } from "@element-plus/icons-vue";
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+import { useRouter } from "vue-router";
 
-<style lang="scss" scoped></style>
+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: [
+    {
+      name: "全部",
+      value: "",
+    },
+    {
+      name: "等级1",
+      value: 1,
+    },
+    {
+      name: "等级2",
+      value: 2,
+    },
+  ], // 风险等级
+  stateOptions: [
+    {
+      name: "全部",
+      value: "",
+    },
+    {
+      name: "已恢复",
+      value: "1",
+    },
+    {
+      name: "未恢复",
+      value: "0",
+    },
+    {
+      name: "已关闭",
+      value: "2",
+    },
+  ], // 状态
+  headers: [
+    {
+      label: "预警点",
+      prop: "warning_point",
+      width: 180,
+    },
+    {
+      label: "预警时间",
+      prop: "warning_time",
+      width: 160,
+    },
+    {
+      label: "预警分类",
+      prop: "warning_type_name",
+    },
+    {
+      label: "预警指标",
+      prop: "warning_target_name",
+    },
+    {
+      label: "风险等级",
+      prop: "risk_level_name",
+    },
+    {
+      label: "当前报警值",
+      prop: "now_warn_data",
+    },
+    {
+      label: "预警阈值",
+      prop: "warn_threshold",
+    },
+    {
+      label: "通知人数",
+      prop: "notice_people_num",
+      width: 80,
+    },
+    {
+      label: "推送次数",
+      prop: "push_times",
+      width: 80,
+    },
+    {
+      label: "最后推送时间",
+      prop: "last_push_time",
+      width: 160,
+    },
+    {
+      label: "状态",
+      prop: "state",
+      width: 90,
+    },
+    {
+      label: "操作",
+      prop: "action",
+      width: 180,
+      fixed: "right",
+    },
+  ],
+  tableRows: [], // 表格数据
+  selected: [], //选择数据
+  tableTotal: 0, // 表格数据条数
+  filter: {
+    warning_type: "", // 预警类型
+    warning_target: "", // 预警指标
+    risk_level: "", // 风险等级
+    state: "", // 状态
+    time: [],
+    search: "",
+    page: 1,
+    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;
+});
+
+const selectRows = (data) => {
+  state.selected = data.selection;
+};
+
+const clearSelected = () => {
+  dataTable.value.clearTable();
+}; // 清空
+
+const batchDelete = () => {
+  console.log("批量删除");
+}; // 批量删除
+
+const goDetail = (row) => {
+  console.log("去详情");
+  router.push(`/forewarning/list/detail?id=${row.id}`);
+}; // 查看详情
+
+const changeSearch = (val) => {
+  state.filter.search = val;
+  changePage(1);
+}; // 表格关键字筛选
+
+const filterAction = () => {
+  changePage(1);
+}; // 查询按钮
+
+const filterClear = () => {
+  state.filter = {
+    warning_type: "", // 预警类型
+    warning_target: "", // 预警指标
+    risk_level: "", // 风险等级
+    state: "", // 状态
+    time: "",
+    search: "",
+    page: 1,
+    limit: 10,
+  };
+  changePage(1);
+}; // 重置筛选项
+
+const getTableRows = () => {
+  let params = { ...state.filter };
+  // axios
+  //   .get(`/apaas/system/v5/dictionary/list`, {
+  //     params,
+  //   })
+  //   .then((res) => {
+  //     if (res.data.code == 200) {
+  //       state.tableRows = res.data.data || [];
+  //       state.tableTotal = res.data.total;
+  //     } else {
+  //       ElMessage.error(res.data.data);
+  //     }
+  //   });
+  state.tableTotal = 23;
+  state.tableRows = [
+    {
+      id: 1,
+      warning_point: "容器云/tyyh",
+      warning_time: "2020-01-01 00:00:00",
+      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,
+    },
+    {
+      id: 2,
+      warning_point: "容器云/kube-apiserver",
+      warning_time: "2020-01-01 00:00:00",
+      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: 0,
+    },
+    {
+      id: 3,
+      warning_point: "容器云/kube-apiserver",
+      warning_time: "2020-01-01 00:00:00",
+      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,
+    },
+  ];
+}; // 获取表格数据
+
+const changePage = (page) => {
+  state.filter.page = page;
+  getTableRows();
+}; // 改变页码
+
+const changeSize = (size) => {
+  state.filter.limit = 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 cancelPushDialog = () => {
+  pushForm.value.resetFields();
+  state.pushDialog = false;
+}; // 预警推送弹窗取消按钮：重置表单
+
+const pushConfirm = () => {
+  pushForm.value.validate((valid) => {
+    if (valid) {
+      console.log(state.actionRow.id, state.userData);
+      console.log(state.pushFormData);
+      cancelPushDialog();
+    }
+  });
+};
+
+const closeWarning = (row) => {
+  state.actionRow = row;
+  state.closeWarningDialog = 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();
+    }
+  });
+}; // 关闭预警弹窗确定按钮：提交表单
+
+onBeforeMount(() => {
+  getTableRows();
+});
+
+const {
+  headers,
+  tableRows,
+  tableTotal,
+  filter,
+  warningTypes,
+  warningTargets,
+  riskLevels,
+  stateOptions,
+  closeWarningDialog,
+  closeFormData,
+  closeRules,
+  pushDialog,
+  userData,
+  pushFormData,
+  pushRules,
+} = toRefs(state);
+</script>
+
+<style lang="scss" scoped>
+.detail_container {
+  width: 100%;
+  height: calc(100vh - 56px);
+  padding: 0 24px;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  .main_container {
+    height: 100%;
+    .filter-group {
+      .left-filter {
+        flex: 1;
+        display: flex;
+        justify-content: start;
+        flex-wrap: wrap;
+      }
+      .right-action {
+        width: 144px;
+        padding-bottom: 16px;
+        .el-button {
+          width: 64px;
+        }
+      }
+    }
+
+    .table_container {
+      height: calc(100% - 70px);
+      width: 100%;
+      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>
-- 
2.26.0