Skip to content

S
so-manage-ui
Commit e8660ffb authored by 张俊's avatar 张俊
Browse files
Options

Merge branch 'dev' of https://cloud.wodcloud.com/git/smart-operation/so-manage-ui into dev

parents 4f92a0d9 72566ef3
Show whitespace changes
Inline Side-by-side
Showing with 752 additions and 295 deletions
src/components/warn-detail/info.vue
View file @ e8660ffb
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<span class="status" :class="`status-${valueData.status}`"></span> <span class="status" :class="`status-${valueData.status}`"></span>
<span>{{ STATUS_OBJ[valueData[item.prop]] }}</span> <span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
</span> </span>
<span v-else :title="valueData[item.prop]">{{ valueData[item.prop] }}</span> <span v-else :title="valueData[item.prop]">{{ valueData[item.prop] || "-" }}</span>
</span> </span>
</div> </div>
</div> </div>
......
src/page/main/forewarning/indicator-config/add/index.vue
View file @ e8660ffb
...@@ -27,7 +27,9 @@ const params = {}; ...@@ -27,7 +27,9 @@ const params = {};
const SaveSubmit = async () => { const SaveSubmit = async () => {
let res = await add_form.value.Submit(); let res = await add_form.value.Submit();
if (!res) return; if (!res) return;
Save(res); Save(res, { id, class_id }, () => {
Cancle();
});
}; };
const Cancle = () => { const Cancle = () => {
router.go(-1); router.go(-1);
......
src/page/main/forewarning/indicator-config/detail/index.vue
View file @ e8660ffb
<template> <template>
<div>指标配置详情</div> <div class="detail_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container bg-scroll">
<gap-title :hasLine="true" title="基本信息"></gap-title>
<div class="info">
<Info :labelData="labelData" :valueData="info">
<template #status="{ item, valueData }">
<span class="status-body">
<span class="status" :class="`status-${valueData.status}`"></span>
<span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
</span>
</template>
<template #create_time="{ valueData }">
<span>{{
valueData.create_time ? valueData.create_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-"
}}</span>
</template>
<template #update_time="{ valueData }">
<span>{{
valueData.update_time ? valueData.update_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-"
}}</span>
</template>
</Info>
</div>
<gap-title :hasLine="true" title="指标表达式"></gap-title>
<div class="info">
<div class="indicator-expression">
<bg-code-editor v-model="info.indicator_expression" disabled></bg-code-editor>
</div>
</div>
<gap-title :hasLine="true" title="预警范围"></gap-title>
<div class="info">
<bg-table border ref="ruletable" :headers="warningScopeHeaders" :rows="warningScopeRows" height="100%">
<template #metric="{ row }">
<span>{{ row.metric_name }}/{{ row.metric_label }}</span>
</template>
<template #is_required="{ row }">
<span>{{ row.is_required ? "是" : "否" }}</span>
</template>
<template #is_linked="{ row }">
<span>{{ row.is_linked ? "是" : "否" }}</span>
</template>
</bg-table>
</div>
<gap-title :hasLine="true" title="预警规则类型"></gap-title>
<div class="info">
<Info :labelData="rule_label" :valueData="rule_data">
<template #alert_rule_type="{ valueData }">
<span>
{{ ruleTypeOptions[valueData.alert_rule_type] }}
</span>
</template>
</Info>
</div>
<gap-title :hasLine="true" title="高级配置"> </gap-title>
<div class="info">
<Info :labelData="advanced_label" :valueData="advanced_data"></Info>
</div>
</div>
</div>
</template> </template>
<script setup></script> <script setup>
import { ref, onBeforeMount } from "vue";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
import { useRoute } from "vue-router";
import gapTitle from "@/components/gap-title.vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import Info from "@/components/warn-detail/info.vue";
import { METHODS } from "@/components/manual-distribution/env.js";
const route = useRoute();
const { id, type_name, target_name } = route.query;
const STATUS_OBJ = {
1: "启用",
2: "禁用",
};
const unitOptions = {
s: "秒",
m: "分钟",
h: "小时",
};
const labelData = [
[
{
label: "预警分类",
prop: "warning_target",
},
{
label: "预警对象",
prop: "warning_type",
},
],
[
{
label: "预警指标",
prop: "warning_index",
},
{
label: "启用状态",
prop: "status",
},
],
[
{
label: "创建人",
prop: "create_by",
},
{
label: "创建时间",
prop: "create_time",
},
],
[
{
label: "更新时间",
prop: "update_time",
},
],
];
const info = ref({});
const rule_label = [
[
{
prop: "alert_rule_type",
label: "预警规则类型",
},
],
];
const rule_data = ref({});
const ruleTypeOptions = {
empty: "空",
1: "百分比范围",
2: "毫秒范围",
3: "秒范围",
4: "个范围",
5: "温度范围",
};
const advanced_label = [
[
{
prop: "duration",
label: "持续时间",
},
],
[
{
prop: "check_period",
label: "检查周期",
},
],
];
const advanced_data = ref({});
const warningScopeHeaders = [
{
prop: "variable_name",
label: "变量名称",
width: 100,
},
{
prop: "metric",
label: "指标标签",
},
{
prop: "chinese_name",
label: "中文名称",
},
{
prop: "is_required",
label: "是否必填",
width: 150,
},
{
prop: "is_linked",
label: "是否联动",
width: 150,
},
];
const warningScopeRows = ref([]);
const getInfoData = () => {
axios
.get("/v1/api/metric_config", {
params: {
id: id,
},
})
.then((res) => {
if (res.data.code == 200) {
let {
metric_name,
is_enabled,
expr,
created_by,
created_at,
updated_at,
alert_range,
duration,
duration_unit,
check_period,
alert_rule_type,
} = res.data.data;
info.value = {
warning_target: type_name,
warning_type: target_name,
warning_index: metric_name,
status: is_enabled,
indicator_expression: expr,
created_by: created_by,
create_time: created_at,
update_time: updated_at,
};
warningScopeRows.value = alert_range || [];
advanced_data.value = {
duration: duration == 0 ? "直接产生预警" : duration + unitOptions[duration_unit],
check_period: check_period + "分钟",
};
rule_data.value = {
// alert_rule_type: alert_rule_type,
alert_rule_type: "1",
};
} else {
ElMessage.error(res.data.data);
}
});
};
onBeforeMount(() => {
getInfoData();
});
</script>
<style lang="scss" scoped></style> <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%;
padding: 24px;
:deep(.gap-title) {
margin-bottom: 16px;
}
.info {
max-width: 1072px;
width: 100%;
padding: 0 8px 0;
&:not(:last-child) {
padding-bottom: 24px;
}
.push-lists {
margin-top: 16px;
}
.indicator-expression {
height: 300px;
width: 100%;
:deep(.vue-ace-editor) {
margin-top: 0;
}
}
}
:deep(.bg-table) {
th > .cell,
td > .cell {
line-height: 20px;
}
}
}
}
.status {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
$statusObj: (
enabled: #48ad97,
disabled: #9e9e9e,
);
@each $status, $color in $statusObj {
&-#{$status} {
background-color: $color;
}
}
}
.status-body {
display: flex;
align-items: center;
}
</style>
src/page/main/forewarning/indicator-config/edit/index.vue
View file @ e8660ffb
...@@ -17,7 +17,8 @@ ...@@ -17,7 +17,8 @@
import { onBeforeMount, ref } from "vue"; import { onBeforeMount, ref } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue"; import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import addForm from "../modules/add-form.vue"; import addForm from "../modules/add-form.vue";
import { Save, URL } from "../modules/interface.js"; import { Save } from "../modules/interface.js";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
const router = useRouter(); const router = useRouter();
...@@ -34,53 +35,25 @@ const Cancle = () => { ...@@ -34,53 +35,25 @@ const Cancle = () => {
router.go(-1); router.go(-1);
}; };
const getInfoData = () => { const getInfoData = () => {
// axios axios
// .get(URL, { .get("/v1/api/metric_config", {
// params: { params: {
// id: id, id: id,
// },
// })
// .then((res) => {
// if (res.data.code == 200) {
// console.log(res.data.data);
// } else {
// ElMessage.error(res.data.data);
// }
// });
let res = {
id: "20da8f87-628a-4f0c-bd9c-0ad176d18d59",
class_id: 101,
metric_name: "xx请求次数告警",
expr: 'shttp_requests_total{method="GET",$pod$}',
duration: 5,
duration_unit: "m",
check_period: 3,
is_enabled: 1,
alert_rule_type: "9f1e6170-65e8-4e14-9c17-6a7b87a900a7",
created_by: "",
created_at: "2023-06-28 17:28:29",
updated_by: "",
updated_at: "2023-06-28 17:54:33",
alert_range: [
{
variable_name: "$pod$",
metric_name: "shttp_requests_total",
metric_label: "pod",
chinese_name: "demoString",
is_required: true,
is_linked: true,
}, },
], })
}; .then((res) => {
if (res.data.code == 200) {
console.log(res.data.data);
let res_d = res.data.data;
infoData.value = { infoData.value = {
name: res.metric_name, name: res_d.metric_name,
indicator_expression: res.expr, indicator_expression: res_d.expr,
rule_type: res.alert_rule_type, rule_type: res_d.alert_rule_type,
time: res.duration, time: res_d.duration,
unit: res.duration_unit, unit: res_d.duration_unit,
inspection_cycle: res.check_period, inspection_cycle: res_d.check_period,
warningScopeRows: warningScopeRows:
res.alert_range.map((e) => { res_d.alert_range.map((e) => {
return { return {
key: e.variable_name, key: e.variable_name,
input_indicator_tag: e.metric_label, input_indicator_tag: e.metric_label,
...@@ -91,9 +64,13 @@ const getInfoData = () => { ...@@ -91,9 +64,13 @@ const getInfoData = () => {
is_linkage: e.is_linked ? 1 : 0, is_linkage: e.is_linked ? 1 : 0,
}; };
}) || [], }) || [],
state: res.is_enabled, state: res_d.is_enabled,
res: res, res: res_d,
}; };
} else {
ElMessage.error(res.data.data);
}
});
}; };
onBeforeMount(() => { onBeforeMount(() => {
getInfoData(); getInfoData();
......
src/page/main/forewarning/indicator-config/index.vue
View file @ e8660ffb
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="detail_container-main"> <div class="detail_container-main">
<Slide v-model="node" /> <Slide v-model="node" />
<div class="main-content"> <div class="main-content">
<bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入指标名称"> <bg-filter-group @search="changeSearch" v-model="filter.metric_name" placeholder="请输入指标名称">
<template v-slot:left_action> <template v-slot:left_action>
<div class="apaas_button"> <div class="apaas_button">
<el-button type="primary" @click="addRule"> <el-button type="primary" @click="addRule">
...@@ -22,10 +22,10 @@ ...@@ -22,10 +22,10 @@
<div class="left-filter filter_list"> <div class="left-filter filter_list">
<div class="filter_item"> <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-select v-model="filter.is_enabled" placeholder="请选择" style="width: 300px">
<el-option <el-option
v-for="(item, index) in stateOptions" v-for="(item, index) in isEnabledOptions"
:key="'stateOptions' + index" :key="'isEnabledOptions' + index"
:label="item.name" :label="item.name"
:value="item.value"> :value="item.value">
</el-option> </el-option>
...@@ -60,25 +60,25 @@ ...@@ -60,25 +60,25 @@
:isIndex="true" :isIndex="true"
:select="true" :select="true"
:stripe="true"> :stripe="true">
<template v-slot:indicator_name="{ row }"> <template v-slot:metric_name="{ row }">
<span class="can_click_text" @click="goDetail(row)"> <span class="can_click_text" @click="goDetail(row)">
{{ row.indicator_name }} {{ row.metric_name }}
</span> </span>
</template> </template>
<template #state="{ row }"> <template #is_enabled="{ row }">
<bg-switch <bg-switch
@click="stateChange(row)" @click="stateChange(row)"
:labels="['否', '是']" :labels="['否', '是']"
:values="[0, 1]" :values="[2, 1]"
v-model="row.state"></bg-switch> v-model="row.is_enabled"></bg-switch>
</template> </template>
<template v-slot:created_time="{ row }"> <template v-slot:created_at="{ row }">
{{ row.created_time ? row.created_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }} {{ row.created_at ? row.created_at.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
</template> </template>
<template v-slot:action="{ row }"> <template v-slot:action="{ row }">
<bg-table-btns2 :limit="3" :tableData="tableRows"> <bg-table-btns2 :limit="3" :tableData="tableRows">
<bg-table-btn :disabled="row.state != 0" @click="editRow(row)">编辑</bg-table-btn> <bg-table-btn :disabled="row.is_enabled != 2" @click="editRow(row)">编辑</bg-table-btn>
<bg-table-btn :disabled="row.state != 0" @click="deleteRow(row)">删除</bg-table-btn> <bg-table-btn :disabled="row.is_enabled != 2" @click="deleteRow(row)">删除</bg-table-btn>
</bg-table-btns2> </bg-table-btns2>
</template> </template>
</bg-table> </bg-table>
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
</div> </div>
<!-- 删除 --> <!-- 删除 -->
<el-dialog class="dialog_box" title="删除" v-model="delDialog" width="420px"> <el-dialog class="dialog_box" title="删除" v-model="delDialog" width="420px">
<div style="padding: 20px 0">确定要删除吗？</div> <div>确定要删除吗？</div>
<template v-slot:footer> <template v-slot:footer>
<div class="apaas_button"> <div class="apaas_button">
<el-button type="default" @click="delDialog = false">取消</el-button> <el-button type="default" @click="delDialog = false">取消</el-button>
...@@ -118,13 +118,15 @@ const node = ref({}); ...@@ -118,13 +118,15 @@ const node = ref({});
watch( watch(
() => node.value, () => node.value,
(n) => { (n) => {
console.log(n); if (n?.data.class_id) {
getTableRows();
}
}, },
{ deep: true } { deep: true }
); );
const dataTable = ref(null); const dataTable = ref(null);
const state = reactive({ const state = reactive({
stateOptions: [ isEnabledOptions: [
{ {
name: "全部", name: "全部",
value: "", value: "",
...@@ -134,27 +136,27 @@ const state = reactive({ ...@@ -134,27 +136,27 @@ const state = reactive({
value: 1, value: 1,
}, },
{ {
name: "停用", name: "禁用",
value: 2, value: 2,
}, },
], // 状态 ], // 状态
headers: [ headers: [
{ {
label: "指标名称", label: "指标名称",
prop: "indicator_name", prop: "metric_name",
width: 200, width: 200,
}, },
{ {
label: "是否启用", label: "是否启用",
prop: "state", prop: "is_enabled",
}, },
{ {
label: "创建人", label: "创建人",
prop: "created_user", prop: "created_by",
}, },
{ {
label: "创建时间", label: "创建时间",
prop: "created_time", prop: "created_at",
width: 160, width: 160,
}, },
{ {
...@@ -166,11 +168,11 @@ const state = reactive({ ...@@ -166,11 +168,11 @@ const state = reactive({
], ],
filter: { filter: {
notice_method: "", // 通知方式 notice_method: "", // 通知方式
state: "", // 状态 is_enabled: "", // 状态
time: [], time: [],
search: "", metric_name: "",
page: 1, page: 1,
limit: 10, page_size: 10,
}, },
tableRows: [], // 表格数据 tableRows: [], // 表格数据
selected: [], //选择数据 selected: [], //选择数据
...@@ -184,11 +186,11 @@ const changePage = (page) => { ...@@ -184,11 +186,11 @@ const changePage = (page) => {
getTableRows(); getTableRows();
}; // 改变页码 }; // 改变页码
const changeSize = (size) => { const changeSize = (size) => {
state.filter.limit = size; state.filter.page_size = size;
changePage(1); changePage(1);
}; // 改变每页条数 }; // 改变每页条数
const changeSearch = (val) => { const changeSearch = (val) => {
state.filter.search = val; state.filter.metric_name = val;
changePage(1); changePage(1);
}; };
const filterAction = () => { const filterAction = () => {
...@@ -196,50 +198,40 @@ const filterAction = () => { ...@@ -196,50 +198,40 @@ const filterAction = () => {
}; };
const filterClear = () => { const filterClear = () => {
state.filter = { state.filter = {
state: "", // 状态 is_enabled: "", // 状态
time: [], time: [],
search: "", metric_name: "",
page: 1, page: 1,
limit: 10, page_size: 10,
}; };
changePage(1); changePage(1);
}; };
const selectable = (row, index) => { const selectable = (row, index) => {
return row.state === 0; return row.is_enabled === 2;
}; };
const getTableRows = () => { const getTableRows = () => {
let params = { ...state.filter }; let params = { ...state.filter, class_id: node.value.data.class_id };
state.tableTotal = 23; // axios.get("/v1/api/metric_config/list", { params }).then((res) => {
state.tableRows = [ axios.get("/v1/api/metric_config/list").then((res) => {
{ if (res.data.code == 200) {
id: 1, state.tableRows =
indicator_name: "磁盘使用率", res.data.data?.list?.map((e) => {
state: 1, return {
created_user: "李四", ...e,
created_time: "2020-01-01 00:00:00", };
}, }) || [];
{ state.tableTotal = res.data.data.total_count;
id: 2, }
indicator_name: "磁盘使用率", });
state: 0,
created_user: "李四",
created_time: "2020-01-01 00:00:00",
},
{
id: 3,
indicator_name: "磁盘使用率",
state: 1,
created_user: "李四",
created_time: "2020-01-01 00:00:00",
},
];
}; };
const goDetail = (row) => { const goDetail = (row) => {
router.push({ router.push({
path: "/forewarning/rule-set/detail", path: "/forewarning/indicator-config/detail",
query: { query: {
id: row.id, id: row.id,
class_id: node.value.data.id, class_id: node.value.data.class_id,
type_name: node.value.node.parent.data.class_name,
target_name: node.value.data.class_name,
}, },
}); });
}; // 查看详情 }; // 查看详情
...@@ -250,10 +242,10 @@ const deleteRow = (row) => { ...@@ -250,10 +242,10 @@ const deleteRow = (row) => {
state.actionRow = row; state.actionRow = row;
state.delType = 1; state.delType = 1;
state.delDialog = true; state.delDialog = true;
console.log("删除"); // console.log("删除");
}; // 删除 }; // 删除
const batchDelete = () => { const batchDelete = () => {
console.log("批量删除"); // console.log("批量删除");
if (!state.selected || state.selected.length == 0) { if (!state.selected || state.selected.length == 0) {
ElMessage.error("请先勾选要删除的数据"); ElMessage.error("请先勾选要删除的数据");
return; return;
...@@ -270,53 +262,63 @@ const delConfirm = () => { ...@@ -270,53 +262,63 @@ const delConfirm = () => {
return e.id; return e.id;
}); });
} }
console.log(ids); // console.log(ids);
state.delDialog = false; state.delDialog = false;
setTimeout(() => { axios
clearSelected(); .delete("/v1/api/metric_config", {
data: {
ids,
},
})
.then((res) => {
if (res.data.code == 200) {
ElMessage.success("删除成功");
changePage(1); changePage(1);
}, 200); clearSelected();
} else {
ElMessage.error(res.data.msg);
}
});
}; // 确定删除 }; // 确定删除
const clearSelected = () => { const clearSelected = () => {
dataTable.value.clearTable(); dataTable.value.clearTable();
}; // 清空 }; // 清空
const addRule = () => { const addRule = () => {
console.log("新增"); // console.log("新增");
router.push({ router.push({
path: `/forewarning/indicator-config/add`, path: `/forewarning/indicator-config/add`,
query: { query: {
class_id: node.value.data.id, class_id: node.value.data.class_id,
}, },
}); });
}; // 新增规则 }; // 新增规则
const editRow = (row) => { const editRow = (row) => {
console.log("编辑"); // console.log("编辑");
router.push({ router.push({
path: `/forewarning/indicator-config/edit`, path: `/forewarning/indicator-config/edit`,
query: { query: {
id: row.id, id: row.id,
class_id: node.value.data.id, class_id: node.value.data.class_id,
}, },
}); });
}; // 编辑 }; // 编辑
const stateChange = (row) => { const stateChange = async (row) => {
console.log("更改状态"); await nextTick();
// axios const params = {
// .put(`/xxx/xxx?id=${row.id}&state=${row.state}`) id: row.id,
// .then((res) => { is_enabled: row.is_enabled,
// if (res.data.code == 200) { };
// ElMessage.success(res.data.msg); axios.put("/v1/api/metric_config", params).then((res) => {
// changePage(1); if (res.data.code == 200) {
// } else { ElMessage.success(`状态更新成功`);
// ElMessage.error(res.data.data);
// row.state = row.state == 0 ? 1 : 0;
// }
// });
};
onBeforeMount(() => {
getTableRows(); getTableRows();
}); } else {
const { headers, tableRows, tableTotal, filter, noticeTypes, stateOptions, delDialog } = toRefs(state); row.is_enabled = row.is_enabled == 1 ? 2 : 1;
ElMessage.error(res.data.msg);
}
});
};
const { headers, tableRows, tableTotal, filter, noticeTypes, isEnabledOptions, delDialog } = toRefs(state);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/page/main/forewarning/indicator-config/modules/add-form.vue
View file @ e8660ffb
...@@ -150,7 +150,7 @@ const props = defineProps({ ...@@ -150,7 +150,7 @@ const props = defineProps({
const tableSelOptions = ["否", "是"]; const tableSelOptions = ["否", "是"];
const ruleTypeOptions = { const ruleTypeOptions = {
empty: "空", empty: "空",
1: "百分比范围", "9f1e6170-65e8-4e14-9c17-6a7b87a900a7": "百分比范围",
2: "毫秒范围", 2: "毫秒范围",
3: "秒范围", 3: "秒范围",
4: "个范围", 4: "个范围",
...@@ -329,7 +329,7 @@ watch( ...@@ -329,7 +329,7 @@ watch(
async (n) => { async (n) => {
if (!n) return; if (!n) return;
state.form.warningScopeRows = state.form.warningScopeRows =
n.warningScopeRows.map((e) => { n.warningScopeRows?.map((e) => {
return { return {
key: e.key, key: e.key,
input_indicator_tag: e.input_indicator_tag, input_indicator_tag: e.input_indicator_tag,
......
src/page/main/forewarning/indicator-config/modules/interface.js
View file @ e8660ffb
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
const setParams = (res, { id, class_id }) => { const setParams = (res, { id, class_id }) => {
let params = { let params = {
class_id, class_id,
...@@ -25,15 +26,14 @@ const setParams = (res, { id, class_id }) => { ...@@ -25,15 +26,14 @@ const setParams = (res, { id, class_id }) => {
} }
return params; return params;
} }
export const URL = "https://so.wodcloud.co/v1/api/metric_config" export const Save = (res, p, cb) => {
export const Save = (res, p) => {
let params = setParams(res, p); let params = setParams(res, p);
console.log("params: ", params); axios[p.id ? 'put' : 'post']('/v1/api/metric_config', params).then(res => {
// axios[id ? 'put' : 'post'](URL, params).then(res => { if (res.data.code == 200) {
// if(res.data.code == 200){ ElMessage.success(`${p.id ? '编辑' : '新增'}成功`)
// console.log('success'); cb && cb()
// }else{ } else {
// ElMessage.error(res.data.data) ElMessage.error(res.data.data)
// } }
// }) })
} }
\ No newline at end of file
src/page/main/forewarning/indicator-config/modules/slide.vue
View file @ e8660ffb
...@@ -17,8 +17,9 @@ ...@@ -17,8 +17,9 @@
default-expand-all default-expand-all
:data="slideTree" :data="slideTree"
:current-node-key="selectId" :current-node-key="selectId"
node-key="id" node-key="class_id"
empty-text="暂无数据" empty-text="暂无数据"
:props="treeProps"
:highlight-current="true" :highlight-current="true"
:expand-on-click-node="false" :expand-on-click-node="false"
:filter-node-method="filterNode" :filter-node-method="filterNode"
...@@ -69,7 +70,8 @@ ...@@ -69,7 +70,8 @@
<el-form :model="state.form_target" ref="add_warn_target_form" :rules="state.target_rules" label-width="80px"> <el-form :model="state.form_target" ref="add_warn_target_form" :rules="state.target_rules" label-width="80px">
<el-form-item label="预警分类" prop="type"> <el-form-item label="预警分类" prop="type">
<el-select style="flex: 1" v-model="state.form_target.type" placeholder="请选择预警分类" filterable> <el-select style="flex: 1" v-model="state.form_target.type" placeholder="请选择预警分类" filterable>
<el-option v-for="item in slideTree" :key="item.id" :label="item.label" :value="item.id"> </el-option> <el-option v-for="item in slideTree" :key="item.class_id" :label="item.class_name" :value="item.class_id">
</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="预警对象" prop="target"> <el-form-item label="预警对象" prop="target">
...@@ -101,6 +103,8 @@ ...@@ -101,6 +103,8 @@
<script setup> <script setup>
import { nextTick, onBeforeMount, reactive, ref } from "vue"; import { nextTick, onBeforeMount, reactive, ref } from "vue";
import GapTitle from "@/components/gap-title.vue"; import GapTitle from "@/components/gap-title.vue";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: Object, type: Object,
...@@ -109,55 +113,35 @@ const props = defineProps({ ...@@ -109,55 +113,35 @@ const props = defineProps({
}); });
const search = ref(""); const search = ref("");
let slideTree = ref([]); let slideTree = ref([]);
const treeProps = {
// 组织树获取数据规则
children: "children",
label: "class_name",
};
const treeRef = ref(null); const treeRef = ref(null);
const selectId = ref(""); const selectId = ref("");
const getSlideTree = async () => { const getSlideTree = () => {
slideTree.value = [ axios.get("/v1/api/alert_class/tree").then(async (res) => {
{ if (res.data.code == 200) {
id: 1, slideTree.value = res.data.data;
label: "容器云", try {
children: [ slideTree.value.forEach((e) => {
{ if (e.children && e.children.length > 0) {
id: 11, throw e.children[0];
label: "容器集群", }
}, });
{ } catch (item) {
id: 12,
label: "容器节点",
},
{
id: 13,
label: "工作负载",
},
{
id: 4,
label: "网关",
},
],
},
{
id: 2,
label: "机房",
},
{
id: 3,
label: "机柜",
},
{
id: 4,
label: "服务器",
},
{
id: 5,
label: "数据库/达梦数据库",
},
];
await nextTick(); await nextTick();
treeRef.value.setCurrentKey(slideTree.value[0].children[0].id); treeRef.value.setCurrentKey(item.class_id);
setTimeout(() => { const node = treeRef.value.getNode(item);
const node = treeRef.value.getNode(slideTree.value[0].children[0]); if (node) {
treeNodeChoose(slideTree.value[0].children[0], node); treeNodeChoose(item, node);
}, 1000); }
}
} else {
ElMessage.error(res.data.msg);
}
});
}; };
const filterNode = (value, data) => { const filterNode = (value, data) => {
if (!value) return data; if (!value) return data;
...@@ -172,6 +156,7 @@ const Add = () => { ...@@ -172,6 +156,7 @@ const Add = () => {
}; };
const emits = defineEmits(["undate:modelValue"]); const emits = defineEmits(["undate:modelValue"]);
const treeNodeChoose = (data, node) => { const treeNodeChoose = (data, node) => {
console.log("data, node: ", data, node);
if (node.level == 1) return; if (node.level == 1) return;
emits("update:modelValue", { data, node }); emits("update:modelValue", { data, node });
}; };
...@@ -209,8 +194,8 @@ const operations = { ...@@ -209,8 +194,8 @@ const operations = {
label: () => "上移", label: () => "上移",
disabled: (node, data) => { disabled: (node, data) => {
let arr = getBrotherNodes(node); let arr = getBrotherNodes(node);
let id = data.id; let id = data.class_id;
let i = arr.findIndex((e) => e.id == id); let i = arr.findIndex((e) => e.class_id == id);
return 0 == i; return 0 == i;
}, },
}, },
...@@ -218,8 +203,8 @@ const operations = { ...@@ -218,8 +203,8 @@ const operations = {
label: () => "下移", label: () => "下移",
disabled: (node, data) => { disabled: (node, data) => {
let arr = getBrotherNodes(node); let arr = getBrotherNodes(node);
let id = data.id; let id = data.class_id;
let i = arr.findIndex((e) => e.id == id); let i = arr.findIndex((e) => e.class_id == id);
return arr.length - 1 == i; return arr.length - 1 == i;
}, },
}, },
...@@ -240,38 +225,49 @@ const Operation = (key, node, data) => { ...@@ -240,38 +225,49 @@ const Operation = (key, node, data) => {
if (node.level == 1) { if (node.level == 1) {
addWarnType.value = true; addWarnType.value = true;
await nextTick(); await nextTick();
state.form.name = data.label; state.form.name = data.class_name;
} else { } else {
addWarnTarget.value = true; addWarnTarget.value = true;
await nextTick(); await nextTick();
state.form_target.type = activeTree.value.data.id; state.form_target.type = activeTree.value.data.class_id;
state.form_target.target = data.label; state.form_target.target = data.class_name;
} }
isEditWarnType.value = true; isEditWarnType.value = true;
}, },
2: () => { 2: () => {
addWarnTarget.value = true; addWarnTarget.value = true;
isEditWarnType.value = false; isEditWarnType.value = false;
state.form_target.type = activeTree.value.data.id; state.form_target.type = activeTree.value.data.class_id;
}, },
3: () => { 3: () => {
delWarnType.value = true; delWarnType.value = true;
}, },
4: () => { 4: () => {
let arr = getBrotherNodes(node); move(data.class_id, "up");
let id = data.id;
let i = arr.findIndex((e) => e.id == id);
let prev = arr[i - 1];
}, },
5: () => { 5: () => {
let arr = getBrotherNodes(node); move(data.class_id, "down");
let id = data.id;
let i = arr.findIndex((e) => e.id == id);
let next = arr[i + 1];
}, },
}; };
operation_handled_fn[key](); operation_handled_fn[key]();
}; };
const move = (class_id, type) => {
const params = {
class_id,
};
axios.put(`/v1/api/alert_class/move/${type}`, params).then((res) => {
if (res.data.code == 200) {
let text = {
up: "上移",
down: "下移",
};
ElMessage.success(`${text[type]}成功`);
getSlideTree();
} else {
ElMessage.error(res.data.msg);
}
});
};
const add_warn_type_form = ref(null); const add_warn_type_form = ref(null);
const add_warn_target_form = ref(null); const add_warn_target_form = ref(null);
const state = reactive({ const state = reactive({
...@@ -298,8 +294,23 @@ const Cancel = async () => { ...@@ -298,8 +294,23 @@ const Cancel = async () => {
const Save = () => { const Save = () => {
add_warn_type_form.value.validate((valid) => { add_warn_type_form.value.validate((valid) => {
if (valid) { if (valid) {
console.log(state.form); const params = {
class_name: state.form.name,
parent_id: 0,
};
if (isEditWarnType.value) {
params.class_id = activeTree.value.own.class_id;
}
let method = isEditWarnType.value ? "put" : "post";
axios[method]("/v1/api/alert_class", params).then((res) => {
if (res.data.code == 200) {
ElMessage.success("预警分类新建成功");
Cancel(); Cancel();
getSlideTree();
} else {
ElMessage.error(res.data.msg);
}
});
} else { } else {
return false; return false;
} }
...@@ -313,8 +324,23 @@ const CancelAddWarnTarget = async () => { ...@@ -313,8 +324,23 @@ const CancelAddWarnTarget = async () => {
const SaveAddWarnTarget = () => { const SaveAddWarnTarget = () => {
add_warn_target_form.value.validate((valid) => { add_warn_target_form.value.validate((valid) => {
if (valid) { if (valid) {
console.log(state.form_target); const params = {
Cancel(); class_name: state.form_target.target,
parent_id: state.form_target.type,
};
if (isEditWarnType.value) {
params.class_id = activeTree.value.own.class_id;
}
let method = isEditWarnType.value ? "put" : "post";
axios[method]("/v1/api/alert_class", params).then((res) => {
if (res.data.code == 200) {
ElMessage.success("预警对象新建成功");
CancelAddWarnTarget();
getSlideTree();
} else {
ElMessage.error(res.data.msg);
}
});
} else { } else {
return false; return false;
} }
...@@ -324,8 +350,21 @@ const CancelDel = () => { ...@@ -324,8 +350,21 @@ const CancelDel = () => {
delWarnType.value = false; delWarnType.value = false;
}; };
const ConfirmDel = () => { const ConfirmDel = () => {
console.log(activeTree.value.own); axios
.delete("/v1/api/alert_class", {
data: {
class_id: activeTree.value.own.class_id,
},
})
.then((res) => {
if (res.data.code == 200) {
ElMessage.success("删除成功");
CancelDel(); CancelDel();
getSlideTree();
} else {
ElMessage.error(res.data.msg);
}
});
}; };
onBeforeMount(() => { onBeforeMount(() => {
getSlideTree(); getSlideTree();
......
src/page/main/forewarning/list/index.vue
View file @ e8660ffb
...@@ -155,6 +155,7 @@ ...@@ -155,6 +155,7 @@
v-model="closeWarningDialog" v-model="closeWarningDialog"
width="400px" width="400px"
:before-close="cancelCloseWarningDialog"> :before-close="cancelCloseWarningDialog">
<div style="padding-top: 20px">
<el-form ref="closeForm" :model="closeFormData" :rules="closeRules" label-width="80px" class="bg_form"> <el-form ref="closeForm" :model="closeFormData" :rules="closeRules" label-width="80px" class="bg_form">
<el-form-item label="关闭备注" prop="close_notes"> <el-form-item label="关闭备注" prop="close_notes">
<el-input <el-input
...@@ -166,10 +167,14 @@ ...@@ -166,10 +167,14 @@
resize="vertical" resize="vertical"
placeholder="请输入内容"></el-input> placeholder="请输入内容"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="" prop="close_remind" style="margin-bottom: 0px"> <el-form-item label="" class="no-el-label" prop="close_remind" style="margin-bottom: 0px">
<el-checkbox v-model="closeFormData.close_remind" label="三天内将不再推送该预警信息" /> <el-checkbox v-model="closeFormData.close_remind">
<div>三天内将不再自动推送该告警信息给处置人员，</div>
<div>可手动推送，但告警数据依然会出现</div>
</el-checkbox>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div>
<template v-slot:footer> <template v-slot:footer>
<div class="apaas_button"> <div class="apaas_button">
<el-button type="default" @click="cancelCloseWarningDialog">取消</el-button> <el-button type="default" @click="cancelCloseWarningDialog">取消</el-button>
...@@ -701,4 +706,13 @@ const { ...@@ -701,4 +706,13 @@ const {
} }
} }
} }
.no-el-label {
:deep(.el-form-item__content) {
text-align: left;
margin-left: 10px !important;
.el-checkbox__label {
line-height: 18px;
}
}
}
</style> </style>
src/page/main/forewarning/rule-set/detail/index.vue
View file @ e8660ffb
...@@ -63,11 +63,11 @@ const labelData = [ ...@@ -63,11 +63,11 @@ const labelData = [
], ],
[ [
{ {
label: "预警对象", label: "预警分类",
prop: "warning_target", prop: "warning_target",
}, },
{ {
label: "预警分类", label: "预警对象",
prop: "warning_type", prop: "warning_type",
}, },
], ],
......
src/page/main/forewarning/rule-set/index.vue
View file @ e8660ffb
...@@ -169,11 +169,11 @@ const state = reactive({ ...@@ -169,11 +169,11 @@ const state = reactive({
width: 200, width: 200,
}, },
{ {
label: "预警对象", label: "预警分类",
prop: "warning_object", prop: "warning_object",
}, },
{ {
label: "预警分类", label: "预警对象",
prop: "warning_type_name", prop: "warning_type_name",
}, },
{ {
......
src/page/main/forewarning/rule-set/modules/add-form.vue
View file @ e8660ffb
...@@ -28,20 +28,39 @@ ...@@ -28,20 +28,39 @@
<div class="add-form-item"> <div class="add-form-item">
<div class="duration"> <div class="duration">
<el-form-item label="持续时间" prop="time"> <el-form-item label="持续时间" prop="time">
<el-input v-model="state.form.time" placeholder="请输入持续时间" @input="inputNum">
<template #prepend>
<span>当预警持续</span> <span>当预警持续</span>
<el-input v-model="state.form.time" placeholder="请输入持续时间" @input="inputNum"></el-input> </template>
</el-form-item> <template #append>
<el-form-item label="" prop="time" class="no-el-label">
<el-select v-model="state.form.unit" placeholder="请选择"> <el-select v-model="state.form.unit" placeholder="请选择">
<el-option v-for="(value, key) in unitOptions" :key="key" :label="value.label" :value="key"> </el-option> <el-option v-for="(value, key) in unitOptions" :key="key" :label="value.label" :value="key">
</el-option>
</el-select> </el-select>
<span>时产生报警</span> </template>
</el-input>
<span class="duration-append">
<span> 时产生报警 </span>
<el-popover
:width="300"
title=""
content="大于等于0的正整数，等于0时代表直接报警"
trigger="hover"
placement="top-start">
<template #reference>
<bg-icon
style="font-size: 12px; color: #a9b1c7; margin-left: 8px; vertical-align: middle"
icon="#bg-ic-s-circle-tips"></bg-icon>
</template>
</el-popover>
</span>
</el-form-item> </el-form-item>
</div> </div>
<el-form-item label="检查周期" prop="inspection_cycle"> <el-form-item label="检查周期" prop="inspection_cycle">
<el-select style="flex: 1" v-model="state.form.inspection_cycle" placeholder="请选择"> <el-select class="cycle-select" style="flex: 1" v-model="state.form.inspection_cycle" placeholder="请选择">
<el-option v-for="item in inspectionCycleOptions" :key="item" :label="item" :value="item"> </el-option> <el-option v-for="item in inspectionCycleOptions" :key="item" :label="item" :value="item"> </el-option>
</el-select> </el-select>
<div class="cycle-unit">分钟</div>
</el-form-item> </el-form-item>
</div> </div>
<gap-title :hasLine="true" title="预警工单推送"></gap-title> <gap-title :hasLine="true" title="预警工单推送"></gap-title>
...@@ -205,25 +224,37 @@ defineExpose({ ...@@ -205,25 +224,37 @@ defineExpose({
} }
} }
.duration { .duration {
flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; :deep(.el-form-item) {
:deep(.el-form-item__content) { flex: 1;
display: flex; .el-input {
align-items: center; margin-right: 8px;
gap: 8px;
> .el-input {
flex: 1; flex: 1;
width: 80px;
} }
.el-input-group__prepend {
width: 102px;
border-radius: 4px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
} }
.no-el-label { .el-input-group__append {
:deep(.el-form-item__content) {
.el-select {
width: 80px; width: 80px;
border-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
} }
} }
} // :deep(.el-form-item__content) {
// display: flex;
// align-items: center;
// gap: 8px;
// > .el-input {
// flex: 1;
// width: 80px;
// }
// }
} }
:deep(.el-switch__inner) { :deep(.el-switch__inner) {
.is-hide { .is-hide {
...@@ -235,6 +266,26 @@ defineExpose({ ...@@ -235,6 +266,26 @@ defineExpose({
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.duration-append {
display: flex;
align-items: center;
color: #404a62;
}
.cycle-unit {
width: 60px;
height: 36px;
background-color: #f7f7f9;
border-radius: 0px 4px 4px 0px;
border: solid 1px #dadee7;
text-align: center;
border-left: 0;
}
.cycle-select {
:deep(.el-input__wrapper) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
} }
} }
.no-el-label { .no-el-label {
......
src/page/main/forewarning/rule-set/modules/custom.vue
View file @ e8660ffb
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<el-form-item label="预警对象" prop="warn_target"> <el-form-item label="预警对象" prop="warn_target">
<el-input <el-input
v-model="state.form.warn_target" v-model="state.form.warn_target"
placeholder="请输入" placeholder="请输入预警对象"
:disabled="isEdit" :disabled="isEdit"
:maxlength="20" :maxlength="20"
show-word-limit show-word-limit
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<el-form-item label="预警分类" prop="warn_type"> <el-form-item label="预警分类" prop="warn_type">
<el-input <el-input
v-model="state.form.warn_type" v-model="state.form.warn_type"
placeholder="请输入" placeholder="请输入预警分类"
:disabled="isEdit" :disabled="isEdit"
clearable clearable
:maxlength="20" :maxlength="20"
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<el-form-item label="预警指标" prop="warn_indicator"> <el-form-item label="预警指标" prop="warn_indicator">
<el-input <el-input
v-model="state.form.warn_indicator" v-model="state.form.warn_indicator"
placeholder="请输入" placeholder="请输入预警指标"
:disabled="isEdit" :disabled="isEdit"
:maxlength="30" :maxlength="30"
show-word-limit show-word-limit
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
<el-select <el-select
style="flex: 1" style="flex: 1"
v-model="state.form.ruleRows[$index].risk_level" v-model="state.form.ruleRows[$index].risk_level"
placeholder="请选择"> placeholder="请选择风险程度">
<el-option <el-option
v-for="item in riskLevelOptions($index)" v-for="item in riskLevelOptions($index)"
:key="item.id" :key="item.id"
...@@ -175,16 +175,15 @@ const state = reactive({ ...@@ -175,16 +175,15 @@ const state = reactive({
ruleRows: [], ruleRows: [],
}, },
rules: { rules: {
warn_target: [{ required: true, message: "请输入", trigger: "blur" }], warn_target: [{ required: true, message: "请输入预警对象", trigger: "blur" }],
warn_type: [{ required: true, message: "请输入", trigger: "blur" }], warn_type: [{ required: true, message: "请输入预警分类", trigger: "blur" }],
warn_indicator: [{ validator: validateWarnIndex, trigger: "blur" }], warn_indicator: [{ validator: validateWarnIndex, trigger: "blur" }],
indicator_expression: [{ required: true, message: "请输入", trigger: "blur" }], indicator_expression: [{ required: true, message: "请输入预警指标", trigger: "blur" }],
rule_type: [{ required: true, message: "请选择", trigger: "change" }],
}, },
tableRules: { tableRules: {
from: [{ required: true, message: "请输入", trigger: "blur" }], from: [{ required: true, message: "请输入", trigger: "blur" }],
to: [{ required: true, message: "请输入", trigger: "blur" }], to: [{ required: true, message: "请输入", trigger: "blur" }],
risk_level: [{ required: true, message: "请选择", trigger: "change" }], risk_level: [{ required: true, message: "请选择风险程度", trigger: "change" }],
}, },
}); });
const changeWarnCustomTarget = () => {}; const changeWarnCustomTarget = () => {};
......
src/page/main/forewarning/rule-set/modules/gateway.vue
View file @ e8660ffb
...@@ -21,8 +21,11 @@ ...@@ -21,8 +21,11 @@
style="flex: 1" style="flex: 1"
v-model.number="state.form.ruleRows[$index].from" v-model.number="state.form.ruleRows[$index].from"
placeholder="请输入" placeholder="请输入"
@input="changeWarningThresholdFrom($index)"> @input="inputNum($index, 'from')"
<template v-if="state.form.rule_type != 'empty'" #append>ms</template> @blur="changeWarningThresholdFrom($index)">
<template v-if="state.form.rule_type != 'empty'" #append>{{
ruleTypeOptions[props.rule_type].unit
}}</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<span class="to">-</span> <span class="to">-</span>
...@@ -32,8 +35,11 @@ ...@@ -32,8 +35,11 @@
v-model.number="state.form.ruleRows[$index].to" v-model.number="state.form.ruleRows[$index].to"
placeholder="请输入" placeholder="请输入"
clearable clearable
@input="changeWarningThresholdTo($index)"> @input="inputNum($index, 'to')"
<template v-if="state.form.rule_type != 'empty'" #append>ms</template> @blur="changeWarningThresholdTo($index)">
<template v-if="state.form.rule_type != 'empty'" #append>{{
ruleTypeOptions[props.rule_type].unit
}}</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
</div> </div>
...@@ -77,13 +83,62 @@ ...@@ -77,13 +83,62 @@
<script setup> <script setup>
import { computed, reactive, ref, watch } from "vue"; import { computed, reactive, ref, watch } from "vue";
import gapTitle from "@/components/gap-title.vue"; import gapTitle from "@/components/gap-title.vue";
import { ElMessage } from "element-plus";
const props = defineProps({ const props = defineProps({
form: { form: {
type: Object, type: Object,
default: null, default: null,
}, },
rule_type: {
type: String,
default: "1",
},
}); });
const ruleTypeOptions = {
empty: {
label: "空",
},
1: {
label: "百分比范围",
unit: "%",
limit: {
down: 0,
up: 100,
},
},
2: {
label: "毫秒范围",
unit: "ms",
limit: {
down: 0,
up: "",
},
},
3: {
label: "秒范围",
unit: "s",
limit: {
down: 0,
up: "",
},
},
4: {
label: "个范围",
unit: "个",
limit: {
down: 0,
up: "",
},
},
5: {
label: "温度范围",
unit: "℃",
limit: {
down: "",
up: "",
},
},
};
const state = reactive({ const state = reactive({
form: { form: {
ruleRows: [], ruleRows: [],
...@@ -160,11 +215,26 @@ const setLimits = (index) => { ...@@ -160,11 +215,26 @@ const setLimits = (index) => {
}) || [] }) || []
); );
}; };
const limit = computed(() => {
return (
ruleTypeOptions[props.rule_type].limit || {
down: "",
up: "",
}
);
});
const changeWarningThresholdFrom = (index) => { const changeWarningThresholdFrom = (index) => {
let { down, up } = limit.value; let { down, up } = limit.value;
if (down === "") return; if (down === "") return;
let { from, to } = state.form.ruleRows[index]; let { from, to } = state.form.ruleRows[index];
if (+from > +up || (index == 0 && +from < +down) || +from > +to) { if (+from > +up || (index == 0 && +from < +down) || (to != "" && from > +to)) {
if (+from < +down) {
ElMessage.error(`下限不能小于${down}`);
} else if (+from > +up) {
ElMessage.error(`上限不能超过${up}`);
} else {
ElMessage.error(`下限不能大于上限`);
}
state.form.ruleRows[index].from = ""; state.form.ruleRows[index].from = "";
return; return;
} }
...@@ -177,14 +247,25 @@ const changeWarningThresholdFrom = (index) => { ...@@ -177,14 +247,25 @@ const changeWarningThresholdFrom = (index) => {
} }
}); });
} catch (e) { } catch (e) {
ElMessage.error(`该范围已被设置`);
state.form.ruleRows[index].from = ""; state.form.ruleRows[index].from = "";
} }
}; };
const inputNum = (index, key) => {
state.form.ruleRows[index][key] = state.form.ruleRows[index][key].replace(/[^\d]/g, "");
};
const changeWarningThresholdTo = (index) => { const changeWarningThresholdTo = (index) => {
let { down, up } = limit.value; let { down, up } = limit.value;
if (up === "") return; if (up === "") return;
let { from, to } = state.form.ruleRows[index]; let { from, to } = state.form.ruleRows[index];
if ((index == 0 && +to > +up) || +to < +down || +from > +to) { if ((index == 0 && +to > +up) || +to < +down || (from != "" && +from > +to)) {
if (+to > +up) {
ElMessage.error(`上限不能超过${up}`);
} else if (+to < +down) {
ElMessage.error(`下限不能小于${down}`);
} else {
ElMessage.error(`上限不能小于下限`);
}
state.form.ruleRows[index].to = ""; state.form.ruleRows[index].to = "";
return; return;
} }
...@@ -197,6 +278,7 @@ const changeWarningThresholdTo = (index) => { ...@@ -197,6 +278,7 @@ const changeWarningThresholdTo = (index) => {
} }
}); });
} catch (e) { } catch (e) {
ElMessage.error(`该范围已被设置`);
state.form.ruleRows[index].to = ""; state.form.ruleRows[index].to = "";
} }
}; };
......
src/page/main/forewarning/rule-set/modules/static.vue
View file @ e8660ffb
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
<el-input <el-input
class="warn-scpoe-input-value" class="warn-scpoe-input-value"
v-model="state.form.warning_scpoe_form[index].value" v-model="state.form.warning_scpoe_form[index].value"
placeholder="请输入" :placeholder="`请输入${item.chinese_name}`"
v-if="!showSelect.includes(item.select)" v-if="!showSelect.includes(item.select)"
:disabled="item.select == 1"> :disabled="item.select == 1">
</el-input> </el-input>
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
class="warn-scpoe-input-value" class="warn-scpoe-input-value"
v-else v-else
v-model="item.value" v-model="item.value"
placeholder="请选择" :placeholder="`请选择${item.chinese_name}`"
filterable filterable
:loading="item.loading" :loading="item.loading"
remote remote
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<Gateway v-else ref="warn_type_com" /> <Gateway v-else ref="warn_type_com" :rule_type="alert_rule_type" />
</div> </div>
</div> </div>
</div> </div>
...@@ -370,9 +370,9 @@ defineExpose({ ...@@ -370,9 +370,9 @@ defineExpose({
width: 100%; width: 100%;
padding-left: 8px; padding-left: 8px;
.warning-scope-main { .warning-scope-main {
display: grid; // display: grid;
grid-template-columns: 1fr 1fr; // grid-template-columns: 1fr 1fr;
grid-column-gap: 16px; // grid-column-gap: 16px;
:deep(.el-input-group__prepend) { :deep(.el-input-group__prepend) {
border-radius: 4px; border-radius: 4px;
border-top-right-radius: 0; border-top-right-radius: 0;
...@@ -385,9 +385,13 @@ defineExpose({ ...@@ -385,9 +385,13 @@ defineExpose({
.warn-scpoe-select { .warn-scpoe-select {
width: 114px !important; width: 114px !important;
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
background-color: #2b4695;
border-radius: 4px; border-radius: 4px;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
.el-input__inner {
color: #fff;
}
} }
} }
.warn-scpoe-input-item { .warn-scpoe-input-item {
......
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