Commit c4522e9c authored by 张耀's avatar 张耀

feat:

预警列表接口对接
parent 3ff8cf65
export const STATUS_OBJ = { export const STATUS_OBJ = {
success: "已恢复", 1: "已恢复",
error: '未恢复' 2: '未恢复'
} }
export const PUSH_STATUS = { export const PUSH_STATUS = {
1: '成功', 1: '成功',
......
...@@ -105,6 +105,10 @@ const tabs = ref([ ...@@ -105,6 +105,10 @@ const tabs = ref([
], ],
}, },
]); ]);
const pushType = {
1: "自动推送",
2: "手动推送",
};
const getInfo = () => { const getInfo = () => {
const params = { const params = {
id, id,
...@@ -124,6 +128,36 @@ const getInfo = () => { ...@@ -124,6 +128,36 @@ const getInfo = () => {
current_alarm_value: data.current_value + (ruleTypeOptions.value[data.alert_rule_type]?.unit || ""), current_alarm_value: data.current_value + (ruleTypeOptions.value[data.alert_rule_type]?.unit || ""),
warning_time: data.alert_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-", warning_time: data.alert_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-",
}; };
//
tabs.value = [
{
label: "推送记录",
prop: "push",
lists:
data.push_records?.map((e) => {
return {
method: e.notify_method,
person: e.system_account,
push_time: e.push_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-",
push_type: pushType[e.push_type],
status: e.status,
};
}) || [],
},
{
label: "处置记录",
prop: "dispose",
lists:
data.disposed_list?.map((e) => {
return {
status: e.is_disposed,
feedback: e.disposal_content,
feedback_time: e.disposal_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-",
feedback_person: e.disposal_user,
};
}) || [],
},
];
} }
}); });
}; };
...@@ -146,29 +180,8 @@ const GetRuleTypeOptions = () => { ...@@ -146,29 +180,8 @@ const GetRuleTypeOptions = () => {
} }
}); });
}; };
const pushType = {
1: "自动推送",
2: "手动推送",
};
const getPushLog = () => {
axios.get("/v1/api/push_record/list", { params: { alert_list_id: id } }).then((res) => {
if (res.data.code == 200) {
tabs.value[0].lists =
res.data.data.list?.map((e) => {
return {
method: e.notify_method,
person: e.system_account,
push_time: e.push_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-",
push_type: pushType[e.push_type],
status: e.status,
};
}) || [];
}
});
};
onBeforeMount(() => { onBeforeMount(() => {
GetRuleTypeOptions(); GetRuleTypeOptions();
getPushLog();
}); });
</script> </script>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="detail_container"> <div class="detail_container">
<bg-breadcrumb></bg-breadcrumb> <bg-breadcrumb></bg-breadcrumb>
<div class="main_container"> <div class="main_container">
<bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入预警点/分类/指标"> <bg-filter-group @search="changeSearch" v-model="filter.keyword" placeholder="请输入预警点/分类/指标">
<template v-slot:left_action> <template v-slot:left_action>
<div class="apaas_button"> <div class="apaas_button">
<el-button type="primary" @click="batchPush"> <el-button type="primary" @click="batchPush">
...@@ -43,10 +43,10 @@ ...@@ -43,10 +43,10 @@
<div class="filter_item"> <div class="filter_item">
<span class="filter_title">预警时间</span> <span class="filter_title">预警时间</span>
<el-date-picker <el-date-picker
style="width: 300px" style="width: 400px"
v-model="filter.time" v-model="filter.time"
type="daterange" type="datetimerange"
value-format="yyyy-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" /> end-placeholder="结束日期" />
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
{{ statusOptions[row.status] }} {{ statusOptions[row.status] }}
</template> </template>
<template v-slot:action="{ row }"> <template v-slot:action="{ row }">
<bg-table-btns2 :limit="3" :tableData="tableRows"> <bg-table-btns2 :page_size="3" :tableData="tableRows">
<bg-table-btn :disabled="row.status != 2" @click="pushWarning(row)">推送提醒</bg-table-btn> <bg-table-btn :disabled="row.status != 2" @click="pushWarning(row)">推送提醒</bg-table-btn>
<bg-table-btn :disabled="row.status != 2" @click="closeWarning(row)">关闭预警</bg-table-btn> <bg-table-btn :disabled="row.status != 2" @click="closeWarning(row)">关闭预警</bg-table-btn>
</bg-table-btns2> </bg-table-btns2>
...@@ -146,7 +146,7 @@ ...@@ -146,7 +146,7 @@
v-model="closeFormData.close_notes" v-model="closeFormData.close_notes"
type="textarea" type="textarea"
:autosize="{ minRows: 2 }" :autosize="{ minRows: 2 }"
show-word-limit show-word-page_size
maxlength="30" maxlength="30"
resize="vertical" resize="vertical"
placeholder="请输入内容"></el-input> placeholder="请输入内容"></el-input>
...@@ -174,7 +174,6 @@ import { ElMessage } from "element-plus"; ...@@ -174,7 +174,6 @@ import { ElMessage } from "element-plus";
import axios from "@/request/http.js"; import axios from "@/request/http.js";
import { Search } from "@element-plus/icons-vue"; import { Search } from "@element-plus/icons-vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue"; import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import userInputTable from "./user-input-table.vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import ManualDistributionForm from "@/components/manual-distribution/form.vue"; import ManualDistributionForm from "@/components/manual-distribution/form.vue";
import { GetRuleTypeOptions } from "@/components/env.js"; import { GetRuleTypeOptions } from "@/components/env.js";
...@@ -264,14 +263,12 @@ const state = reactive({ ...@@ -264,14 +263,12 @@ const state = reactive({
selected: [], //选择数据 selected: [], //选择数据
tableTotal: 0, // 表格数据条数 tableTotal: 0, // 表格数据条数
filter: { filter: {
warning_type: "", // 预警类型
warning_target: "", // 预警指标
risk_level: "", // 风险等级 risk_level: "", // 风险等级
status: "", // 状态 status: "", // 状态
time: [], time: [],
search: "", keyword: "",
page: 1, page: 1,
limit: 10, page_size: 10,
}, // 表格筛选项 }, // 表格筛选项
actionRow: null, // 当前操作的数据 actionRow: null, // 当前操作的数据
closeWarningDialog: false, // 删除弹窗 closeWarningDialog: false, // 删除弹窗
...@@ -314,7 +311,7 @@ const goDetail = (row) => { ...@@ -314,7 +311,7 @@ const goDetail = (row) => {
}; // 查看详情 }; // 查看详情
const changeSearch = (val) => { const changeSearch = (val) => {
state.filter.search = val; state.filter.keyword = val;
changePage(1); changePage(1);
}; // 表格关键字筛选 }; // 表格关键字筛选
...@@ -328,10 +325,10 @@ const filterClear = () => { ...@@ -328,10 +325,10 @@ const filterClear = () => {
warning_target: "", // 预警指标 warning_target: "", // 预警指标
risk_level: "", // 风险等级 risk_level: "", // 风险等级
status: "", // 状态 status: "", // 状态
time: "", time: [],
search: "", keyword: "",
page: 1, page: 1,
limit: 10, page_size: 10,
}; };
changePage(1); changePage(1);
}; // 重置筛选项 }; // 重置筛选项
...@@ -339,7 +336,13 @@ const selectable = (row, index) => { ...@@ -339,7 +336,13 @@ const selectable = (row, index) => {
return row.status === 2; return row.status === 2;
}; };
const getTableRows = () => { const getTableRows = () => {
let params = { ...state.filter }; let [start_time = "", end_time = ""] = state.filter.time || [];
let params = {
...state.filter,
start_time,
end_time,
};
Reflect.deleteProperty(params, "time");
axios.get("/v1/api/alert_list/list", { params }).then((res) => { axios.get("/v1/api/alert_list/list", { params }).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
let { list, total_count } = res.data.data; let { list, total_count } = res.data.data;
...@@ -357,7 +360,7 @@ const changePage = (page) => { ...@@ -357,7 +360,7 @@ const changePage = (page) => {
}; // 改变页码 }; // 改变页码
const changeSize = (size) => { const changeSize = (size) => {
state.filter.limit = size; state.filter.page_size = size;
changePage(1); changePage(1);
}; // 改变每页条数 }; // 改变每页条数
......
<template>
<el-form ref="ruleFormRef" class="ruleForm" :model="tableRows" :size="formSize" :rules="formRules">
<bg-table-pro showIndex :headers="headers" :data="tableRows" ref="input-table" :border="true" :stripe="false">
<template v-slot:account="{ row, index }">
<el-form-item :prop="`[${index}].account`" :rules="formRules.account" style="width: 100%">
<el-select
v-model="row.account"
placeholder="请选择帐号"
style="width: 100%"
@change="changeAccount(row)"
:disabled="disabled">
<el-option
v-for="(item, index) in userLists"
:key="'userItem' + index"
:disabled="item.disabled"
:label="item.account"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</template>
<template v-slot:name="{ row, index }">
<el-form-item :prop="`[${index}].name`" :rules="formRules.name" style="width: 100%">
<el-input @change="changeName" placeholder="请输入姓名" :disabled="disabled" v-model.trim="row.name" />
</el-form-item>
</template>
<template v-slot:mobile="{ row, index }">
<el-form-item :prop="`[${index}].mobile`" :rules="formRules.mobile" style="width: 100%">
<el-input
@change="changeMobile"
placeholder="请输入联系方式"
:disabled="disabled"
v-model.trim="row.mobile" />
</el-form-item>
</template>
<template v-slot:action="{ row, index }">
<bg-table-btn
:disabled="disabled"
:click="
() => {
addParam(index);
}
"
>增加</bg-table-btn
>
<bg-table-btn
:disabled="disabled"
:click="
() => {
removeParam(row, index);
}
">
删除
</bg-table-btn>
</template>
</bg-table-pro>
</el-form>
</template>
<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref, getCurrentInstance, watch, computed } from "vue";
import { v4 as uuidv4 } from "uuid";
import { validatePhone } from "@/services/rules.js";
const props = defineProps({
data: {
type: Array,
default: () => [],
},
disabled: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["change"]);
const formSize = ref("default");
const ruleFormRef = ref(null);
const formRules = reactive({
name: [
{
required: true,
message: "请输入键",
trigger: "blur",
},
{
max: 50,
message: "最多50个字符",
trigger: "blur",
},
],
account: [
{
required: true,
message: "请选择帐号",
trigger: "change",
},
],
mobile: [
{
required: true,
message: "请输入联系方式",
trigger: "blur",
},
{ validator: validatePhone, trigger: "blur" },
],
});
const headers = reactive([
{
label: "帐号",
prop: "account",
required: true,
},
{
label: "姓名",
prop: "name",
required: true,
},
{
label: "联系方式",
prop: "mobile",
required: true,
},
{
label: "操作",
prop: "action",
width: 120,
},
]);
const state = reactive({
tableRows: [],
userLists: [
{
account: "admin",
id: 1,
name: "张一",
mobile: "13111111111",
},
{
account: "ys-admin",
id: 2,
name: "张二",
mobile: "13222222222",
},
{
account: "yf-user",
id: 3,
name: "张三",
mobile: "13333333333",
},
{
account: "putong",
id: 4,
name: "张四",
mobile: "13444444444",
},
],
});
watch(
() => state.tableRows,
(n, o) => {
let list = state.tableRows.map((e) => {
return e.account;
});
state.userLists.forEach((e) => {
if (list.indexOf(e.id) > -1) {
e.disabled = true;
} else {
e.disabled = false;
}
});
},
{
deep: true,
}
);
// const canAdd = computed(() => {
// return state.tableRows.length >= 5 ? false : true;
// }); // 最多五条数据,控制下新增按钮的禁用
onBeforeMount(() => {
initTable();
});
var initTable = () => {
if (props.data && props.data.length >= 1) {
state.tableRows = props.data;
} else {
state.tableRows = [];
addParam(0);
}
};
var createRow = () => {
return {
id: uuidv4(),
account: "",
name: "",
mobile: "",
};
};
var addParam = (index) => {
state.tableRows.splice(index + 1, 0, createRow());
};
var removeParam = (row, index) => {
state.tableRows.splice(index, 1);
if (state.tableRows.length === 0) {
addParam(0);
}
};
const changeAccount = (row) => {
state.userLists.forEach((e) => {
if (e.id == row.account) {
row.name = e.name;
row.mobile = e.mobile;
}
});
emit("change", {
type: "account",
data: state.tableRows,
});
};
const changeName = () => {
emit("change", {
type: "name",
data: state.tableRows,
});
};
const changeMobile = () => {
emit("change", {
type: "mobile",
data: state.tableRows,
});
};
var getInputData = () => {
let lastData = [];
let tempObj = {};
state.tableRows.forEach((e) => {
tempObj[e.name] = e;
});
for (const key in tempObj) {
if (key && tempObj[key].value) {
lastData.push(tempObj[key]);
}
}
return lastData;
};
const { tableRows, userLists } = toRefs(state);
//暴露获取数据方法
defineExpose({
getInputData,
initTable,
});
</script>
<style scoped></style>
...@@ -176,6 +176,7 @@ let headers = reactive([ ...@@ -176,6 +176,7 @@ let headers = reactive([
prop: "operation", prop: "operation",
align: "left", align: "left",
width: "80px", width: "80px",
fixed: "right",
}, },
]); ]);
let rows = ref([]); let rows = ref([]);
......
...@@ -174,6 +174,7 @@ let headers = reactive([ ...@@ -174,6 +174,7 @@ let headers = reactive([
prop: "operation", prop: "operation",
align: "left", align: "left",
width: "80px", width: "80px",
fixed: "right",
}, },
]); ]);
let rows = ref([]); let rows = ref([]);
......
...@@ -3,8 +3,15 @@ ...@@ -3,8 +3,15 @@
<div class="breadcrumb"> <div class="breadcrumb">
<bg-breadcrumb /> <bg-breadcrumb />
</div> </div>
<div class="content"> <div class="content bg-scroll">
<warn-detail :label-data="labelData" :value-data="info" :tabs="tabs"></warn-detail> <warn-detail :label-data="labelData" :value-data="info" :tabs="tabs">
<template #status="{ item, valueData }">
<span class="status-body">
<span class="status" :class="`status-${valueData.status}`"></span>
<span>{{ statusOptions[valueData[item.prop]] }}</span>
</span>
</template>
</warn-detail>
</div> </div>
</div> </div>
</template> </template>
...@@ -12,12 +19,34 @@ ...@@ -12,12 +19,34 @@
<script setup> <script setup>
import bgBreadcrumb from "@/components/bg-breadcrumb.vue"; import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import warnDetail from "@/components/warn-detail/index.vue"; import warnDetail from "@/components/warn-detail/index.vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
import { ref, onBeforeMount } from "vue";
const route = useRoute();
const { id } = route.query;
const ruleTypeOptions = ref({});
const statusOptions = {
1: "已恢复",
2: "未恢复",
3: "已关闭",
};
const riskLevels = {
1: "低风险",
2: "一般风险",
3: "较大风险",
4: "重大风险",
};
const labelData = [ const labelData = [
[ [
{ {
label: "预警点", label: "预警点",
prop: "warning_point", prop: "warning_point",
}, },
{
label: "预警分类",
prop: "warning_type",
},
], ],
[ [
{ {
...@@ -35,7 +64,7 @@ const labelData = [ ...@@ -35,7 +64,7 @@ const labelData = [
prop: "status", prop: "status",
}, },
{ {
label: "预警", label: "预警",
prop: "warning_threshold", prop: "warning_threshold",
}, },
], ],
...@@ -50,35 +79,12 @@ const labelData = [ ...@@ -50,35 +79,12 @@ const labelData = [
}, },
], ],
]; ];
const info = { const info = ref({});
warning_point: "SaaS层/数据治理系统", const tabs = ref([
warning_index: "响应时间超时",
risk_level: "一般风险",
status: "success",
warning_threshold: "10ms",
current_alarm_value: "16ms",
warning_time: "2020-01-01 00:00:00",
};
const tabs = [
{ {
label: "推送记录", label: "推送记录",
prop: "push", prop: "push",
lists: [ 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: "处置记录", label: "处置记录",
...@@ -98,7 +104,85 @@ const tabs = [ ...@@ -98,7 +104,85 @@ const tabs = [
}, },
], ],
}, },
]; ]);
const pushType = {
1: "自动推送",
2: "手动推送",
};
const getInfo = () => {
const params = {
id,
};
axios.get("/v1/api/alert_list", { params }).then((res) => {
if (res.data.code == 200) {
const { data } = res.data;
info.value = {
warning_point: data.alert_point,
warning_type: data.class_parent_name,
warning_index: data.class_name,
risk_level: riskLevels[data.risk_level],
status: data.status,
warning_threshold: `${data.alert_condition.thresholds_min}${
ruleTypeOptions.value[data.alert_rule_type]?.unit || ""
}-${data.alert_condition.thresholds_max}${ruleTypeOptions.value[data.alert_rule_type]?.unit || ""}`,
current_alarm_value: data.current_value + (ruleTypeOptions.value[data.alert_rule_type]?.unit || ""),
warning_time: data.alert_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-",
};
//
tabs.value = [
{
label: "推送记录",
prop: "push",
lists:
data.push_records?.map((e) => {
return {
method: e.notify_method,
person: e.system_account,
push_time: e.push_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-",
push_type: pushType[e.push_type],
status: e.status,
};
}) || [],
},
{
label: "处置记录",
prop: "dispose",
lists:
data.disposed_list?.map((e) => {
return {
status: e.is_disposed,
feedback: e.disposal_content,
feedback_time: e.disposal_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-",
feedback_person: e.disposal_user,
};
}) || [],
},
];
}
});
};
const GetRuleTypeOptions = () => {
const params = {
page: 1,
page_size: 10000000000000,
class: 3,
};
axios.get(`/v1/api/dict`, { params }).then((res) => {
if (res.data.code == 200) {
res.data.data?.forEach((e) => {
let isEmptyOption = e.name == "空";
ruleTypeOptions.value[e.id] = {
label: e.name,
unit: isEmptyOption ? "" : e.unit,
};
});
getInfo();
}
});
};
onBeforeMount(() => {
GetRuleTypeOptions();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -117,6 +201,27 @@ const tabs = [ ...@@ -117,6 +201,27 @@ const tabs = [
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15); box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px; border-radius: 6px;
padding: 32px; padding: 32px;
.status {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
$statusObj: (
1: #48ad97,
3: #9e9e9e,
2: #3759be,
);
@each $status, $color in $statusObj {
&-#{$status} {
background-color: $color;
}
}
}
.status-body {
display: flex;
align-items: center;
}
} }
} }
</style> </style>
...@@ -4,39 +4,17 @@ ...@@ -4,39 +4,17 @@
<bg-breadcrumb /> <bg-breadcrumb />
</div> </div>
<div class="content"> <div class="content">
<bg-filter-group @search="changeSearch" v-model="filter.key_word" placeholder="请输入角色名称"> <bg-filter-group @search="changeSearch" v-model="filter.keyword" placeholder="请输入预警点/分类/指标">
<template v-slot:filter_group> <template v-slot:filter_group>
<div class="left-filter filter_list"> <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 wainingTypeOptions"
:key="'pushOptions' + 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_index" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in wainingIndexOptions"
:key="'warning_index_options' + index"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="filter_item"> <div class="filter_item">
<span class="filter_title">风险等级</span> <span class="filter_title">风险等级</span>
<el-select v-model="filter.risk_level" placeholder="请选择" style="width: 300px"> <el-select v-model="filter.risk_level" placeholder="请选择" style="width: 300px">
<el-option <el-option
v-for="(item, index) in riskLevelOptions" v-for="(value, key, index) in riskLevels"
:key="'risk_level_options' + index" :key="'riskLevels' + index"
:label="item.name" :label="value"
:value="item.id"> :value="key">
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
...@@ -44,17 +22,18 @@ ...@@ -44,17 +22,18 @@
<span class="filter_title">状态</span> <span class="filter_title">状态</span>
<el-select v-model="filter.status" placeholder="请选择" style="width: 300px"> <el-select v-model="filter.status" placeholder="请选择" style="width: 300px">
<el-option <el-option
v-for="(item, index) in statusOptions" v-for="(value, key, index) in statusOptions"
:key="'statusOptions' + index" :key="'stateOptions' + index"
:label="item" :label="value"
:value="index"> :value="key">
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="filter_item"> <div class="filter_item">
<span class="filter_title">预警时段</span> <span class="filter_title">预警时段</span>
<el-date-picker <el-date-picker
v-model="filter.date" v-model="filter.time"
style="width: 400px"
type="datetimerange" type="datetimerange"
value-format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
range-separator="-" range-separator="-"
...@@ -72,11 +51,34 @@ ...@@ -72,11 +51,34 @@
<div class="table_container"> <div class="table_container">
<div class="table"> <div class="table">
<bg-table ref="listtable" :headers="headers" :rows="rows" height="100%" :isIndex="true" :stripe="true"> <bg-table ref="listtable" :headers="headers" :rows="rows" height="100%" :isIndex="true" :stripe="true">
<template #alert_point="{ row }"> <template v-slot:alert_point="{ row }">
<div class="href" @click="goTo(row)">{{ row.alert_point || "-" }}</div> <span class="can_click_text" @click="goDetail(row)">
{{ row.alert_point }}
</span>
</template>
<template v-slot:risk_level="{ row }">
{{ riskLevels[row.risk_level] }}
</template>
<template v-slot:current_value="{ row }">
{{ row.current_value }}{{ ruleTypeOptions[row.alert_rule_type]?.unit || "" }}
</template>
<template v-slot:warn_threshold="{ row }">
{{ row.alert_condition.thresholds_min }}{{ ruleTypeOptions[row.alert_rule_type]?.unit || "" }}
-
{{ row.alert_condition.thresholds_max }}{{ ruleTypeOptions[row.alert_rule_type]?.unit || "" }}
</template>
<template v-slot:alert_time="{ row }">
{{ row.alert_time ? row.alert_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 #status="{ row }">
<span :class="`circle status-${row.status}`"></span>
{{ statusOptions[row.status] }}
</template> </template>
<template #operation="{ row }"> <template #operation="{ row }">
<el-button type="primary" :disabled="row.order_state != 1" link size="small" @click="operation(row)"> <el-button type="primary" :disabled="row.is_disposed == 1" link size="small" @click="operation(row)">
处置反馈 处置反馈
</el-button> </el-button>
</template> </template>
...@@ -98,87 +100,63 @@ ...@@ -98,87 +100,63 @@
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted, nextTick } from "vue"; import { reactive, ref, onBeforeMount, toRefs, computed, watch, nextTick, watchEffect } from "vue";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue"; import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import FeedBack from "../modules/feedback.vue"; import FeedBack from "../modules/feedback.vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { GetRuleTypeOptions } from "@/components/env.js";
const router = useRouter(); const router = useRouter();
const filter = reactive({ const filter = reactive({
warning_type: "", risk_level: "", // 风险等级
key_word: "", status: "", // 状态
warning_index: "", time: [],
risk_level: "", keyword: "",
status: "",
date: [],
page: 1, page: 1,
page_size: 10, page_size: 10,
}); });
const tableTotal = ref(0); const tableTotal = ref(0);
const ruleTypeOptions = ref({});
const filterClear = () => { const filterClear = () => {
filter.warning_type = "";
filter.key_word = "";
filter.warning_index = ""; filter.warning_index = "";
filter.risk_level = ""; filter.risk_level = "";
filter.status = ""; filter.status = "";
filter.date = []; filter.time = [];
filter.page_size = 10; filter.page_size = 10;
filter.page = 1; filter.page = 1;
changePage(1); changePage(1);
}; // 重置筛选项 }; // 重置筛选项
const statusOptions = ["全部", "待处置", "已完成", "已关闭"]; const statusOptions = ["全部", "待处置", "已完成", "已关闭"];
const wainingTypeOptions = ref([ // const disposedOptions = ["", "已处置", "已处置"];
{ const riskLevels = {
value: "", "": "全部",
name: "全部", 1: "低风险",
}, 2: "一般风险",
]); 3: "较大风险",
const wainingIndexOptions = ref([ 4: "重大风险",
{ };
value: "",
name: "全部",
},
]);
const riskLevelOptions = ref([
{
id: "",
name: "全部",
},
{
id: 4,
name: "重大风险",
},
{
id: 3,
name: "较大风险",
},
{
id: 2,
name: "一般风险",
},
{
id: 1,
name: "低风险",
},
]);
let headers = reactive([ let headers = reactive([
{ {
label: "预警点", label: "预警点",
prop: "alert_point", prop: "alert_point",
align: "left", align: "left",
width: 180,
}, },
{ {
label: "预警时间", label: "预警时间",
prop: "alert_point", prop: "alert_time",
align: "left", align: "left",
width: 160,
}, },
{ {
label: "预警分类", label: "预警分类",
prop: "warning_type", prop: "class_parent_name",
align: "left", align: "left",
}, },
{ {
label: "预警指标", label: "预警指标",
prop: "warning_index", prop: "class_name",
align: "left", align: "left",
}, },
{ {
...@@ -188,42 +166,40 @@ let headers = reactive([ ...@@ -188,42 +166,40 @@ let headers = reactive([
}, },
{ {
label: "当前报警值", label: "当前报警值",
prop: "current_alarm_value", prop: "current_value",
align: "left", align: "left",
}, },
{ {
label: "预警阀值", label: "预警阀值",
prop: "warning_threshold", prop: "warn_threshold",
align: "left", align: "left",
}, },
{ {
label: "推送次数", label: "推送次数",
prop: "push_num", prop: "push_count",
align: "left", align: "left",
}, },
{ {
label: "最近推送时间", label: "最近推送时间",
prop: "push_time", prop: "last_push_time",
align: "left", align: "left",
width: 160,
}, },
{ {
label: "状态", label: "状态",
prop: "status", prop: "status",
align: "left", align: "left",
width: 90,
}, },
{ {
label: "操作", label: "操作",
prop: "operation", prop: "operation",
align: "left", align: "left",
width: "80px", width: 80,
}, fixed: "right",
]);
let rows = ref([
{
alert_point: 1,
id: 1,
}, },
]); ]);
let rows = ref([]);
const changeSize = (size) => { const changeSize = (size) => {
filter.page_size = size; filter.page_size = size;
changePage(1); changePage(1);
...@@ -234,26 +210,23 @@ const changePage = (page) => { ...@@ -234,26 +210,23 @@ const changePage = (page) => {
getTableRows(); getTableRows();
}; };
const changeSearch = (val) => { const changeSearch = (val) => {
filter.key_word = val; filter.keyword = val;
changePage(1); changePage(1);
}; // 表格关键字筛选 }; // 表格关键字筛选
const filterAction = () => { const filterAction = () => {
changePage(1); changePage(1);
}; // 查询按钮 }; // 查询按钮
onMounted(() => {
getTableRows();
});
const getTableRows = async () => { const getTableRows = async () => {
let [startTime = "", endTime = ""] = filter.date || []; let [start_time = "", end_time = ""] = filter.time || [];
let urlParams = { let params = {
...filter, ...filter,
startTime, start_time,
endTime, end_time,
}; };
Reflect.deleteProperty(urlParams, "date"); Reflect.deleteProperty(params, "time");
axios.get("/v1/api/alert_list/list", { params: urlParams }).then((res) => { axios.get("/v1/api/alert_list/list", { params }).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
let { list, total_count } = res.data.data; let { list, total_count } = res.data.data;
rows.value = list || []; rows.value = list || [];
...@@ -270,7 +243,7 @@ const operation = (row) => { ...@@ -270,7 +243,7 @@ const operation = (row) => {
active_row.value = row; active_row.value = row;
visible.value = true; visible.value = true;
}; };
const goTo = ({ id }) => { const goDetail = ({ id }) => {
router.push({ router.push({
path: "/ticket/my-warn-ticket/detail", path: "/ticket/my-warn-ticket/detail",
query: { query: {
...@@ -278,6 +251,13 @@ const goTo = ({ id }) => { ...@@ -278,6 +251,13 @@ const goTo = ({ id }) => {
}, },
}); });
}; };
const getRuleTypeOptions = async () => {
ruleTypeOptions.value = await GetRuleTypeOptions();
getTableRows();
};
onBeforeMount(() => {
getRuleTypeOptions();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
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