Skip to content

S
so-manage-ui
Commit a91640a0 authored by 赵伟庚's avatar 赵伟庚
Browse files
Options

[feat](预警管理): 预警列表静态页面搭建

parent 7077da63
Show whitespace changes
Inline Side-by-side
Showing with 578 additions and 3 deletions
src/page/main/forewarning/list/index.vue
View file @ a91640a0
<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
class="dialog_box"
:title="addType == 1 ? '新增' : '编辑'"
v-model="addDialog"
width="758px">
<el-form ref="bgForm" :model="formData" :rules="rules" label-width="80px" class="bg_form">
<el-form-item label="名称" prop="name">
<el-input
v-model.trim="formData.name"
show-word-limit
:maxlength="
nodeClassifyId == 'eb9c7d70-c123-42b7-8e61-dde1b022b669'
? 6
: nodeClassifyId == 'efd9ec3b-7f18-49e2-9d88-bcca022243bb'
? 4
: nodeClassifyId == '949a1138-4995-464e-97a9-424d097eb271'
? 2
: 20
"
placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="描述" prop="describe">
<el-input
v-model="formData.describe"
type="textarea"
:autosize="{ minRows: 5 }"
show-word-limit
maxlength="200"
resize="vertical"
placeholder="请输入描述"></el-input>
</el-form-item>
<el-form-item label="是否启用" prop="state" style="margin-bottom: 0px">
<el-switch
class="bg-switch-ele"
v-model="formData.state"
:active-value="1"
:inactive-value="0"
inline-prompt
active-text="是"
inactive-text="否" />
</el-form-item>
</el-form>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="addDialog = false">取 消</el-button>
<el-button type="primary" @click="addConfirm">保 存</el-button>
</div>
</template>
</el-dialog> -->
<!-- todo：关闭提醒 -->
<!-- <el-dialog
class="dialog_box"
title="提示"
v-model="dialogDelete"
width="400px"
:before-close="
() => {
dialogDelete = false;
}
">
<div>确定要删除此字典值吗？</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="dialogDelete = false">取 消</el-button>
<el-button type="primary" @click="deleteData">确 定</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";
const bgForm = ref(null);
const dataTable = ref(null);
const state = reactive({
bgForm,
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, // 当前操作的数据
dialogDelete: false, // 删除弹窗
addType: 0, //
addDialog: false,
formData: {
name: "",
describe: "",
state: 1,
p_dict_id: "",
},
rules: {
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
describe: [
{ required: true, message: "请输入描述", trigger: "blur" },
{ max: 200, message: "描述最大为200字", trigger: "blur" },
],
state: [{ required: true, message: "请选择是否启用", trigger: "change" }],
},
});
const selectRows = (data) => {
state.selected = data.selection;
};
const clearSelected = () => {
dataTable.value.clearTable();
}; // 清空
const batchDelete = () => {
console.log("批量删除");
}; // 批量删除
const goDetail = (row) => {
console.log("去详情");
}; // 查看详情
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: 1,
},
{
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("推送提醒");
}; // 推送提醒
const closeWarning = (row) => {
state.actionRow = row;
console.log("关闭预警");
}; // 关闭预警
onBeforeMount(() => {
getTableRows();
});
const { headers, tableRows, tableTotal, filter, warningTypes, warningTargets, riskLevels, stateOptions } =
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;
}
}
}
}
<style lang="scss" scoped></style>
.bg_form {
width: 100%;
box-sizing: border-box;
.el-form-item {
margin-bottom: 24px;
:deep().el-form-item__label {
line-height: 36px;
height: 36px;
}
.el-form-item__content {
width: 100%;
.el-textarea {
:deep().el-input__count {
bottom: -16px;
right: 4px;
font-family: Roboto-Regular;
color: #a9b1c7;
}
}
.bg-switch-ele {
width: 52px;
height: 24px;
:deep().el-switch__core {
width: 100%;
height: 24px;
.el-switch__inner,
.el-switch__action {
top: 3px;
}
}
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment