Skip to content

S
so-manage-ui
Commit d6bcf35c authored by 张耀's avatar 张耀
Browse files
Options

Merge branch 'dev' into zy

parents 894ce7f6 462bf878
Hide whitespace changes
Inline Side-by-side
Showing with 862 additions and 159 deletions
.beagle.yml
View file @ d6bcf35c
......@@ -56,7 +56,7 @@ steps: # 定义流水线执行步骤，这些步骤将顺序执行
- name: docker-sock
path: /var/run/docker.sock # 将下载依赖的目录挂载出来，防止重复下载
settings: # 当前设置
base: registry.cn-qingdao.aliyuncs.com/wod/nginx:1.19.5-amd64 # 基础镜像
base: registry.cn-qingdao.aliyuncs.com/wod/nginx:1.19.5-amd64 # 基础镜像
dockerfile: .beagle/dockerfile
repo: smart-operation/so-manage-ui # 生成镜像的 分组/名称
version: "v3.0.1" # 版本号
......
src/App.vue
View file @ d6bcf35c
......@@ -5,10 +5,10 @@
<div class="container" v-if="pageShow">
<!-- <bg-nav :highlightParentRule="highlightParentRule" :title="nowParent.menuName" width="208px" :list="nowParent.children" v-show="navShow" class="con-nav" /> -->
<bg-nav
v-if="nowParent.children"
v-if="nowParent"
:highlightParentRule="highlightParentRule"
width="208px"
:list="nowParent.children"
:list="nowParent"
v-show="navShow"
class="con-nav" />
<div class="bg-main view">
......@@ -86,7 +86,7 @@ export default {
},
nowParent() {
if (this.pageShow && this.$store.state.userInfo) {
return this.rowPath ? this.navMenu[this.rowPath.slice(1, 2)] : "";
return this.rowPath ? [this.navMenu[this.rowPath.slice(1, 2)]] : "";
} else {
return "";
}
......
src/components/bg-menu.vue
View file @ d6bcf35c
......@@ -151,8 +151,7 @@ export default {
},
transparentBg() {
return (
this.documentScrollTop < 180 &&
(this.$route.name === "shopRecommend" || this.$route.name === "shopSearch")
this.documentScrollTop < 180 && (this.$route.name === "shopRecommend" || this.$route.name === "shopSearch")
);
},
isFront() {
......@@ -236,7 +235,7 @@ export default {
if (n == "logout") {
this.$axios.post("/apaas/system/v5/user/logout").then((res) => {
if (res.data.code == "200") {
window.location.href = "/apaas/manage/ui/#/login";
window.location.href = "/so/manage/ui//#/login";
this.$store.commit("setUserInfo", null);
clearCookie("bgToken");
this.$message.success("退出成功");
......@@ -247,7 +246,7 @@ export default {
});
} else if (n == "login") {
let path = this.$route.path;
window.location.href = `/apaas/manage/ui/#/login?redirect=${path}`;
window.location.href = `/so/manage/ui//#/login?redirect=${path}`;
} else {
//是否有子路由，有则寻找子路由的第一个进行跳转，无则直接进行跳转
//使用childMenuAction是模拟template中，子路径点击跳转使用childMenuAction，
......
src/components/warn-detail/tab.vue
View file @ d6bcf35c
......@@ -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/auto-maintenance/task-manage/add/index.vue
View file @ d6bcf35c
......@@ -8,9 +8,7 @@
<el-step title="" :class="{ process_complete: step > 1 }">
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 0"
><bg-icon class="step_icon" icon="#bg-ic-file-editing"></bg-icon
></span>
<span class="icon_box" v-if="step > 0"><bg-icon class="step_icon" icon="#bg-ic-file"></bg-icon></span>
<span class="circle" v-else></span>
基本信息
</span>
......@@ -20,7 +18,7 @@
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 1"
><bg-icon class="step_icon" icon="#bg-ic-file-lock"></bg-icon
><bg-icon class="step_icon" icon="#bg-ic-instruction"></bg-icon
></span>
<span class="circle" v-else></span>
执行内容
......
src/page/main/config/accessRule/add/index.vue
View file @ d6bcf35c
......@@ -4,12 +4,7 @@
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<div class="form_content apaas_scroll_nor">
<el-form
ref="refForm"
label-position="left"
:model="formData"
:rules="rules"
label-width="82px">
<el-form ref="refForm" label-position="left" :model="formData" :rules="rules" label-width="82px">
<div class="top_content">
<el-form-item label="规则名称" prop="ruleName">
<el-input placeholder="请输入" maxlength="100" v-model="formData.ruleName"></el-input>
......@@ -30,29 +25,19 @@
<el-tooltip placement="top-start" effect="light">
<template #content>
<span>输入IP段，不可重复，例如：192.168.0.0/24</span><br />
<span
>输入IP地址，例如192.168.0.1（支持ipv4地址，配置多个IP时使用回车符分隔）</span
>
<span>输入IP地址，例如192.168.0.1（支持ipv4地址，配置多个IP时使用回车符分隔）</span>
</template>
<div class="tip-image"></div>
</el-tooltip>
</el-form-item>
<el-form-item class="switch-item" label="是否启用" prop="state" required>
<bg-switch
:labels="['否', '是']"
:values="[0, 1]"
v-model="formData.state"></bg-switch>
<bg-switch :labels="['否', '是']" :values="[0, 1]" v-model="formData.state"></bg-switch>
</el-form-item>
</div>
<el-form-item class="userScope" label="用户范围" prop="userScope">
<el-button type="primary" @click="userMaintain"> 用户维护 </el-button>
<div class="table_content clearfix">
<bg-table
ref="bgTable"
:headers="detailHeaders"
:rows="tableRows"
height="550"
:stripe="true">
<bg-table ref="bgTable" :headers="detailHeaders" :rows="tableRows" height="550" :stripe="true">
<template v-slot:isAdmin="{ row }">
<span>{{ userTypeConfig[row.isAdmin] }}</span>
</template>
......@@ -67,11 +52,7 @@
</div>
</el-form-item>
</el-form>
<el-dialog
class="dialog_box_maintain"
title="用户维护"
v-model="dialogMaintain"
width="1062px">
<el-dialog class="dialog_box_maintain" title="用户维护" v-model="dialogMaintain" width="1062px">
<div class="content_detail">
<div class="form_filter">
<div class="left">
......@@ -299,10 +280,7 @@ const getOrgTree = () => {
};
const changePage = (page) => {
state.pageConfig.page = page;
state.tableRows = state.selectedRows.slice(
(page - 1) * state.pageConfig.limit,
page * state.pageConfig.limit
);
state.tableRows = state.selectedRows.slice((page - 1) * state.pageConfig.limit, page * state.pageConfig.limit);
};
const changeSize = (size) => {
......@@ -392,7 +370,7 @@ const submit = () => {
height: 100%;
padding-left: 40px;
.el-form {
::v-deep .el-form-item {
:deep() .el-form-item {
display: block;
margin-bottom: 24px;
width: 60%;
......@@ -435,7 +413,7 @@ const submit = () => {
}
}
::v-deep .dialog_box_maintain {
:deep() .dialog_box_maintain {
.el-dialog__body {
padding: 0 0 70px 0;
height: 630px;
......
src/page/main/config/accessRule/edit/index.vue
View file @ d6bcf35c
......@@ -4,12 +4,7 @@
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<div class="form_content apaas_scroll_nor">
<el-form
ref="refForm"
label-position="left"
:model="formData"
:rules="rules"
label-width="82px">
<el-form ref="refForm" label-position="left" :model="formData" :rules="rules" label-width="82px">
<div class="top_content">
<el-form-item label="规则名称" prop="ruleName">
<el-input placeholder="请输入" maxlength="100" v-model="formData.ruleName"></el-input>
......@@ -30,29 +25,19 @@
<el-tooltip placement="top-start" effect="light">
<template #content>
<span>输入IP段，不可重复，例如：192.168.0.0/24</span><br />
<span
>输入IP地址，例如192.168.0.1（支持ipv4地址，配置多个IP时使用回车符分隔）</span
>
<span>输入IP地址，例如192.168.0.1（支持ipv4地址，配置多个IP时使用回车符分隔）</span>
</template>
<div class="tip-image"></div>
</el-tooltip>
</el-form-item>
<el-form-item class="switch-item" label="是否启用" prop="state" required>
<bg-switch
:labels="['否', '是']"
:values="[0, 1]"
v-model="formData.state"></bg-switch>
<bg-switch :labels="['否', '是']" :values="[0, 1]" v-model="formData.state"></bg-switch>
</el-form-item>
</div>
<el-form-item class="userScope" label="用户范围" prop="userScope">
<el-button type="primary" @click="userMaintain"> 用户维护 </el-button>
<div class="table_content clearfix">
<bg-table
ref="bgTable"
:headers="detailHeaders"
:rows="tableRows"
height="550"
:stripe="true">
<bg-table ref="bgTable" :headers="detailHeaders" :rows="tableRows" height="550" :stripe="true">
<template v-slot:isAdmin="{ row }">
<span>{{ userTypeConfig[row.isAdmin] }}</span>
</template>
......@@ -67,11 +52,7 @@
</div>
</el-form-item>
</el-form>
<el-dialog
class="dialog_box_maintain"
title="用户维护"
v-model="dialogMaintain"
width="1062px">
<el-dialog class="dialog_box_maintain" title="用户维护" v-model="dialogMaintain" width="1062px">
<div class="content_detail">
<div class="form_filter">
<div class="left">
......@@ -312,10 +293,7 @@ const getOrgTree = () => {
};
const changePage = (page) => {
state.pageConfig.page = page;
state.tableRows = state.selectedRows.slice(
(page - 1) * state.pageConfig.limit,
page * state.pageConfig.limit
);
state.tableRows = state.selectedRows.slice((page - 1) * state.pageConfig.limit, page * state.pageConfig.limit);
};
const changeSize = (size) => {
......@@ -427,7 +405,7 @@ const submit = () => {
height: 100%;
padding-left: 40px;
.el-form {
::v-deep .el-form-item {
:deep() .el-form-item {
display: block;
margin-bottom: 24px;
width: 60%;
......@@ -470,7 +448,7 @@ const submit = () => {
}
}
::v-deep .dialog_box_maintain {
:deep() .dialog_box_maintain {
.el-dialog__body {
padding: 0 0 70px 0;
height: 630px;
......
src/page/main/forewarning/list/detail/index.vue 0 → 100644
View file @ d6bcf35c
<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 @ d6bcf35c
......@@ -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 @ d6bcf35c
......@@ -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 @ d6bcf35c
<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>
src/page/main/system-admin/visit-control/add/index.vue
View file @ d6bcf35c
......@@ -4,12 +4,7 @@
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<div class="form_content apaas_scroll_nor">
<el-form
ref="refForm"
label-position="left"
:model="formData"
:rules="rules"
label-width="82px">
<el-form ref="refForm" label-position="left" :model="formData" :rules="rules" label-width="82px">
<div class="top_content">
<el-form-item label="规则名称" prop="ruleName">
<el-input placeholder="请输入" maxlength="100" v-model="formData.ruleName"></el-input>
......@@ -30,29 +25,19 @@
<el-tooltip placement="top-start" effect="light">
<template #content>
<span>输入IP段，不可重复，例如：192.168.0.0/24</span><br />
<span
>输入IP地址，例如192.168.0.1（支持ipv4地址，配置多个IP时使用回车符分隔）</span
>
<span>输入IP地址，例如192.168.0.1（支持ipv4地址，配置多个IP时使用回车符分隔）</span>
</template>
<div class="tip-image"></div>
</el-tooltip>
</el-form-item>
<el-form-item class="switch-item" label="是否启用" prop="state" required>
<bg-switch
:labels="['否', '是']"
:values="[0, 1]"
v-model="formData.state"></bg-switch>
<bg-switch :labels="['否', '是']" :values="[0, 1]" v-model="formData.state"></bg-switch>
</el-form-item>
</div>
<el-form-item class="userScope" label="用户范围" prop="userScope">
<el-button type="primary" @click="userMaintain"> 用户维护 </el-button>
<div class="table_content clearfix">
<bg-table
ref="bgTable"
:headers="detailHeaders"
:rows="tableRows"
height="550"
:stripe="true">
<bg-table ref="bgTable" :headers="detailHeaders" :rows="tableRows" height="550" :stripe="true">
<template v-slot:isAdmin="{ row }">
<span>{{ userTypeConfig[row.isAdmin] }}</span>
</template>
......@@ -67,11 +52,7 @@
</div>
</el-form-item>
</el-form>
<el-dialog
class="dialog_box_maintain"
title="用户维护"
v-model="dialogMaintain"
width="1062px">
<el-dialog class="dialog_box_maintain" title="用户维护" v-model="dialogMaintain" width="1062px">
<div class="content_detail">
<div class="form_filter">
<div class="left">
......@@ -299,10 +280,7 @@ const getOrgTree = () => {
};
const changePage = (page) => {
state.pageConfig.page = page;
state.tableRows = state.selectedRows.slice(
(page - 1) * state.pageConfig.limit,
page * state.pageConfig.limit
);
state.tableRows = state.selectedRows.slice((page - 1) * state.pageConfig.limit, page * state.pageConfig.limit);
};
const changeSize = (size) => {
......@@ -392,7 +370,7 @@ const submit = () => {
height: 100%;
padding-left: 40px;
.el-form {
::v-deep .el-form-item {
:deep() .el-form-item {
display: block;
margin-bottom: 24px;
width: 60%;
......@@ -435,7 +413,7 @@ const submit = () => {
}
}
::v-deep .dialog_box_maintain {
:deep() .dialog_box_maintain {
.el-dialog__body {
padding: 0 0 70px 0;
height: 630px;
......
src/page/main/system-admin/visit-control/edit/index.vue
View file @ d6bcf35c
......@@ -4,12 +4,7 @@
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<div class="form_content apaas_scroll_nor">
<el-form
ref="refForm"
label-position="left"
:model="formData"
:rules="rules"
label-width="82px">
<el-form ref="refForm" label-position="left" :model="formData" :rules="rules" label-width="82px">
<div class="top_content">
<el-form-item label="规则名称" prop="ruleName">
<el-input placeholder="请输入" maxlength="100" v-model="formData.ruleName"></el-input>
......@@ -30,29 +25,19 @@
<el-tooltip placement="top-start" effect="light">
<template #content>
<span>输入IP段，不可重复，例如：192.168.0.0/24</span><br />
<span
>输入IP地址，例如192.168.0.1（支持ipv4地址，配置多个IP时使用回车符分隔）</span
>
<span>输入IP地址，例如192.168.0.1（支持ipv4地址，配置多个IP时使用回车符分隔）</span>
</template>
<div class="tip-image"></div>
</el-tooltip>
</el-form-item>
<el-form-item class="switch-item" label="是否启用" prop="state" required>
<bg-switch
:labels="['否', '是']"
:values="[0, 1]"
v-model="formData.state"></bg-switch>
<bg-switch :labels="['否', '是']" :values="[0, 1]" v-model="formData.state"></bg-switch>
</el-form-item>
</div>
<el-form-item class="userScope" label="用户范围" prop="userScope">
<el-button type="primary" @click="userMaintain"> 用户维护 </el-button>
<div class="table_content clearfix">
<bg-table
ref="bgTable"
:headers="detailHeaders"
:rows="tableRows"
height="550"
:stripe="true">
<bg-table ref="bgTable" :headers="detailHeaders" :rows="tableRows" height="550" :stripe="true">
<template v-slot:isAdmin="{ row }">
<span>{{ userTypeConfig[row.isAdmin] }}</span>
</template>
......@@ -67,11 +52,7 @@
</div>
</el-form-item>
</el-form>
<el-dialog
class="dialog_box_maintain"
title="用户维护"
v-model="dialogMaintain"
width="1062px">
<el-dialog class="dialog_box_maintain" title="用户维护" v-model="dialogMaintain" width="1062px">
<div class="content_detail">
<div class="form_filter">
<div class="left">
......@@ -312,10 +293,7 @@ const getOrgTree = () => {
};
const changePage = (page) => {
state.pageConfig.page = page;
state.tableRows = state.selectedRows.slice(
(page - 1) * state.pageConfig.limit,
page * state.pageConfig.limit
);
state.tableRows = state.selectedRows.slice((page - 1) * state.pageConfig.limit, page * state.pageConfig.limit);
};
const changeSize = (size) => {
......@@ -427,7 +405,7 @@ const submit = () => {
height: 100%;
padding-left: 40px;
.el-form {
::v-deep .el-form-item {
:deep() .el-form-item {
display: block;
margin-bottom: 24px;
width: 60%;
......@@ -470,7 +448,7 @@ const submit = () => {
}
}
::v-deep .dialog_box_maintain {
:deep() .dialog_box_maintain {
.el-dialog__body {
padding: 0 0 70px 0;
height: 630px;
......
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