Skip to content

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

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

parent af4c4270
Hide whitespace changes
Inline Side-by-side
Showing with 821 additions and 27 deletions
src/components/warn-detail/tab.vue
View file @ 3d4226e9
......@@ -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 0 → 100644
View file @ 3d4226e9
<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
View file @ 3d4226e9
......@@ -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
View file @ 3d4226e9
......@@ -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();
......
src/page/main/forewarning/rule-set/index.vue
View file @ 3d4226e9
<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>
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