Skip to content

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

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

parent 552e1f78
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 312 deletions
src/bg-ui/bg-filter-group.vue
View file @ d565627b
......@@ -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
View file @ d565627b
......@@ -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
View file @ d565627b
......@@ -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 0 → 100644
View file @ d565627b
<template>
<div>规则详情</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
src/page/main/forewarning/rule-set/index.vue
View file @ d565627b
......@@ -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>
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