Skip to content

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

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

parent af4c4270
Expand all 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();
......
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