OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

refactor: 优化告警相关API去除SQL查询

Browse Source
This commit is contained in:
TsMask
2025-02-28 15:56:18 +08:00
parent 7ccaf6df65
commit 1e2824657c
12 changed files with 879 additions and 1109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
src/views/logManage/alarm/index.vue
View File

@@ -10,6 +10,7 @@ import { listAlarm } from '@/api/logManage/alarm';
import useNeInfoStore from '@/store/modules/neinfo';
import useDictStore from '@/store/modules/dict';
import useI18n from '@/hooks/useI18n';
import dayjs, { type Dayjs } from 'dayjs';
const { getDict } = useDictStore();
const { t } = useI18n();
@@ -17,22 +18,48 @@ const { t } = useI18n();
let dict: {
/**告警状态 */
alarmStatus: DictType[];
/**活动告警类型 */
activeAlarmType: DictType[];
/**原始严重程度 */
activeAlarmSeverity: DictType[];
} = reactive({
alarmStatus: [],
activeAlarmType: [],
activeAlarmSeverity: [],
});
/**记录开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
/**开始结束时间 */
let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>(undefined);
/**时间范围 */
let rangePickerPresets = ref([
{
label: 'Now hour',
value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
},
{ label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
{
label: 'Yesterday',
value: [
dayjs().subtract(1, 'day').startOf('day'),
dayjs().subtract(1, 'day').endOf('day'),
],
},
]);
/**查询参数 */
let queryParams = reactive({
/**网元类型 */
neType: '',
/**告警状态 */
status: undefined,
/**记录时间 */
beginTime: '',
endTime: '',
alarmStatus: undefined,
/**告警类型 */
origSeverity: undefined,
sortField: 'event_time',
sortOrder: 'desc',
/**开始时间 */
beginTime: undefined as undefined | number,
/**结束时间 */
endTime: undefined as undefined | number,
/**当前页数 */
pageNum: 1,
/**每页条数 */
@@ -43,13 +70,13 @@ let queryParams = reactive({
function fnQueryReset() {
queryParams = Object.assign(queryParams, {
neType: '',
status: undefined,
beginTime: '',
endTime: '',
alarmStatus: undefined,
beginTime: undefined,
endTime: undefined,
pageNum: 1,
pageSize: 20,
});
queryRangePicker.value = ['', ''];
queryRangePicker.value = undefined;
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
@@ -71,7 +98,7 @@ type TabeStateType = {
let tableState: TabeStateType = reactive({
loading: false,
size: 'middle',
seached: true,
seached: false,
data: [],
});
@@ -80,55 +107,85 @@ let tableColumns: ColumnsType = [
{
title: t('common.rowId'),
dataIndex: 'id',
align: 'center',
align: 'left',
width: 100,
},
{
title: t('views.logManage.alarm.type'),
title: t('views.ne.common.neType'),
dataIndex: 'neType',
align: 'center',
align: 'left',
width: 100,
},
{
title: t('views.logManage.alarm.neId'),
title: t('views.ne.common.neId'),
dataIndex: 'neId',
align: 'center',
align: 'left',
width: 100,
},
{
title: t('views.logManage.alarm.alarmId'),
dataIndex: 'alarmId',
align: 'center',
align: 'left',
width: 120,
},
{
title: t('views.logManage.alarm.alarmSeq'),
dataIndex: 'alarmSeq',
align: 'center',
align: 'left',
width: 150,
},
{
title: t('views.logManage.alarm.alarmCode'),
dataIndex: 'alarmCode',
align: 'center',
align: 'left',
width: 150,
ellipsis: true,
},
{
title: t('views.logManage.alarm.alarmTitle'),
dataIndex: 'alarmTitle',
align: 'left',
width: 200,
ellipsis: true,
},
{
title: t('views.logManage.alarm.alarmStatus'),
dataIndex: 'alarmStatus',
key: 'alarmStatus',
align: 'center',
align: 'left',
width: 150,
},
{
title: t('views.logManage.alarm.alarmType'),
dataIndex: 'alarmType',
key: 'alarmType',
align: 'left',
width: 150,
},
{
title: t('views.logManage.alarm.origSeverity'),
dataIndex: 'origSeverity',
key: 'origSeverity',
align: 'left',
width: 150,
},
{
title: t('views.logManage.alarm.eventTime'),
dataIndex: 'eventTime',
align: 'center',
align: 'left',
customRender(opt) {
if (!opt.value) return '';
return parseDateToStr(opt.value);
return parseDateToStr(+opt.value);
},
width: 150,
},
{
title: t('views.logManage.alarm.logTime'),
dataIndex: 'logTime',
align: 'center',
dataIndex: 'createdAt',
align: 'left',
customRender(opt) {
if (!opt.value) return '';
return parseDateToStr(opt.value);
return parseDateToStr(+opt.value);
},
},
];
@@ -170,20 +227,32 @@ function fnTableSize({ key }: MenuInfo) {
function fnGetList(pageNum?: number) {
if (tableState.loading) return;
tableState.loading = true;
if(pageNum){
if (pageNum) {
queryParams.pageNum = pageNum;
}
if (!queryRangePicker.value) {
queryRangePicker.value = ['', ''];
// 时间范围
if (
Array.isArray(queryRangePicker.value) &&
queryRangePicker.value.length > 0
) {
queryParams.beginTime = queryRangePicker.value[0].valueOf();
queryParams.endTime = queryRangePicker.value[1].valueOf();
} else {
queryParams.beginTime = undefined;
queryParams.endTime = undefined;
}
queryParams.beginTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1];
listAlarm(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
if (res.code === RESULT_CODE_SUCCESS) {
const { total, rows } = res.data;
tablePagination.total = total;
tableState.data = rows;
if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
if (
tablePagination.total <=
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}
@@ -194,15 +263,28 @@ function fnGetList(pageNum?: number) {
onMounted(() => {
// 初始字典数据
Promise.allSettled([getDict('alarm_status')]).then(resArr => {
Promise.allSettled([
getDict('alarm_status'),
getDict('active_alarm_type'),
getDict('active_alarm_severity'),
]).then(resArr => {
if (resArr[0].status === 'fulfilled') {
dict.alarmStatus = resArr[0].value;
}
if (resArr[1].status === 'fulfilled') {
dict.activeAlarmType = resArr[1].value;
}
if (resArr[2].status === 'fulfilled') {
dict.activeAlarmSeverity = resArr[2].value;
}
});
// 获取网元网元列表
useNeInfoStore().fnNelist();
// 获取列表数据
fnGetList();
useNeInfoStore()
.fnNelist()
.finally(() => {
// 获取列表数据
fnGetList();
});
});
</script>
@@ -216,19 +298,24 @@ onMounted(() => {
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item :label="t('views.logManage.alarm.type')" name="neType">
<a-col :lg="4" :md="12" :xs="24">
<a-form-item :label="t('views.ne.common.neType')" name="neType">
<a-auto-complete
v-model:value="queryParams.neType"
:options="useNeInfoStore().getNeSelectOtions"
:placeholder="t('views.ne.common.neTypePlease')"
allow-clear
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item :label="t('views.logManage.alarm.status')" name="status">
<a-form-item
:label="t('views.logManage.alarm.status')"
name="status"
>
<a-select
v-model:value="queryParams.status"
v-model:value="queryParams.alarmStatus"
:placeholder="t('common.selectPlease')"
allow-clear
:options="dict.alarmStatus"
>
@@ -236,20 +323,23 @@ onMounted(() => {
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :xs="24">
<a-form-item :label="t('views.logManage.alarm.logTime')" name="queryRangePicker">
<a-form-item
:label="t('views.logManage.alarm.logTime')"
name="queryRangePicker"
>
<a-range-picker
v-model:value="queryRangePicker"
allow-clear
bordered
show-time
value-format="YYYY-MM-DD HH:mm:ss"
format="YYYY-MM-DD HH:mm:ss"
:presets="rangePickerPresets"
:bordered="true"
:allow-clear="false"
style="width: 100%"
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
></a-range-picker>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-col :lg="4" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" @click.prevent="fnGetList(1)">
@@ -325,12 +415,24 @@ onMounted(() => {
:data-source="tableState.data"
:size="tableState.size"
:pagination="tablePagination"
:scroll="{ x: true }"
:scroll="{ x: tableColumns.length * 150, y: 'calc(100vh - 480px)' }"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'alarmStatus'">
<DictTag :options="dict.alarmStatus" :value="record.alarmStatus" />
</template>
<template v-if="column.key === 'alarmType'">
<DictTag
:options="dict.activeAlarmType"
:value="record.alarmType"
/>
</template>
<template v-if="column.key === 'origSeverity'">
<DictTag
:options="dict.activeAlarmSeverity"
:value="record.origSeverity"
/>
</template>
</template>
</a-table>
</a-card>

201
src/views/logManage/forwarding/index.vue
View File

@@ -10,6 +10,7 @@ import { listForwarding } from '@/api/logManage/forwarding';
import useNeInfoStore from '@/store/modules/neinfo';
import useDictStore from '@/store/modules/dict';
import useI18n from '@/hooks/useI18n';
import dayjs, { type Dayjs } from 'dayjs';
const { getDict } = useDictStore();
const { t } = useI18n();
@@ -17,20 +18,44 @@ const { t } = useI18n();
let dict: {
/**告警状态 */
alarmStatus: DictType[];
/**活动告警类型 */
activeAlarmType: DictType[];
/**原始严重程度 */
activeAlarmSeverity: DictType[];
} = reactive({
alarmStatus: [],
activeAlarmType: [],
activeAlarmSeverity: [],
});
/**记录开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
/**开始结束时间 */
let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>(undefined);
/**时间范围 */
let rangePickerPresets = ref([
{
label: 'Now hour',
value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
},
{ label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
{
label: 'Yesterday',
value: [
dayjs().subtract(1, 'day').startOf('day'),
dayjs().subtract(1, 'day').endOf('day'),
],
},
]);
/**查询参数 */
let queryParams = reactive({
/**网元类型 */
neType: '',
/**记录时间 */
beginTime: '',
endTime: '',
sortField: 'event_time',
sortOrder: 'desc',
/**开始时间 */
beginTime: undefined as undefined | number,
/**结束时间 */
endTime: undefined as undefined | number,
/**当前页数 */
pageNum: 1,
/**每页条数 */
@@ -41,12 +66,12 @@ let queryParams = reactive({
function fnQueryReset() {
queryParams = Object.assign(queryParams, {
neType: '',
beginTime: '',
endTime: '',
beginTime: undefined,
endTime: undefined,
pageNum: 1,
pageSize: 20,
});
queryRangePicker.value = ['', ''];
queryRangePicker.value = undefined;
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
@@ -68,7 +93,7 @@ type TabeStateType = {
let tableState: TabeStateType = reactive({
loading: false,
size: 'middle',
seached: true,
seached: false,
data: [],
});
@@ -77,77 +102,106 @@ let tableColumns: ColumnsType = reactive([
{
title: t('common.rowId'),
dataIndex: 'id',
align: 'center',
width: 3,
align: 'left',
width: 100,
},
{
title: t('views.logManage.forwarding.alarmInter'),
dataIndex: 'type',
align: 'center',
width: 5,
align: 'left',
width: 150,
},
{
title: t('views.logManage.forwarding.alarmObj'),
dataIndex: 'target',
align: 'center',
width: 5,
align: 'left',
width: 150,
ellipsis: true,
},
{
title: t('views.logManage.forwarding.alarmInfo'),
dataIndex: 'result',
align: 'center',
width: 6,
align: 'left',
ellipsis: true,
},
{
title: t('views.logManage.forwarding.type'),
title: t('views.ne.common.neType'),
dataIndex: 'neType',
align: 'center',
width: 4,
align: 'left',
width: 100,
},
{
title: t('views.logManage.forwarding.neId'),
title: t('views.ne.common.neId'),
dataIndex: 'neId',
align: 'center',
width: 5,
align: 'left',
width: 100,
},
{
title: t('views.logManage.forwarding.alarmId'),
dataIndex: 'alarmId',
align: 'center',
width: 5,
align: 'left',
width: 120,
},
{
title: t('views.logManage.forwarding.alarmSeq'),
dataIndex: 'alarmSeq',
align: 'center',
width: 4,
align: 'left',
width: 150,
},
{
title: t('views.logManage.forwarding.alarmCode'),
dataIndex: 'alarmCode',
align: 'left',
width: 150,
ellipsis: true,
},
{
title: t('views.logManage.forwarding.alarmTitle'),
dataIndex: 'alarmTitle',
align: 'center',
width: 5,
align: 'left',
width: 200,
ellipsis: true,
},
{
title: t('views.logManage.forwarding.alarmStatus'),
dataIndex: 'alarmStatus',
key: 'alarmStatus',
align: 'left',
width: 150,
},
{
title: t('views.logManage.forwarding.alarmType'),
dataIndex: 'alarmType',
key: 'alarmType',
align: 'left',
width: 150,
},
{
title: t('views.logManage.forwarding.origSeverity'),
dataIndex: 'origSeverity',
key: 'origSeverity',
align: 'left',
width: 150,
},
{
title: t('views.logManage.forwarding.eventTime'),
dataIndex: 'eventTime',
align: 'center',
align: 'left',
customRender(opt) {
if (!opt.value) return '';
return parseDateToStr(opt.value);
return parseDateToStr(+opt.value);
},
width: 5,
width: 150,
},
{
title: t('views.logManage.forwarding.logTime'),
dataIndex: 'createdAt',
align: 'center',
align: 'left',
customRender(opt) {
if (!opt.value) return '';
return parseDateToStr(opt.value);
return parseDateToStr(+opt.value);
},
width: 5,
width: 150,
},
]);
@@ -191,11 +245,19 @@ function fnGetList(pageNum?: number) {
if (pageNum) {
queryParams.pageNum = pageNum;
}
if (!queryRangePicker.value) {
queryRangePicker.value = ['', ''];
// 时间范围
if (
Array.isArray(queryRangePicker.value) &&
queryRangePicker.value.length > 0
) {
queryParams.beginTime = queryRangePicker.value[0].valueOf();
queryParams.endTime = queryRangePicker.value[1].valueOf();
} else {
queryParams.beginTime = undefined;
queryParams.endTime = undefined;
}
queryParams.beginTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1];
listForwarding(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
const { total, rows } = res.data;
@@ -216,15 +278,28 @@ function fnGetList(pageNum?: number) {
onMounted(() => {
// 初始字典数据
Promise.allSettled([getDict('alarm_status')]).then(resArr => {
Promise.allSettled([
getDict('alarm_status'),
getDict('active_alarm_type'),
getDict('active_alarm_severity'),
]).then(resArr => {
if (resArr[0].status === 'fulfilled') {
dict.alarmStatus = resArr[0].value;
}
if (resArr[1].status === 'fulfilled') {
dict.activeAlarmType = resArr[1].value;
}
if (resArr[2].status === 'fulfilled') {
dict.activeAlarmSeverity = resArr[2].value;
}
});
// 获取网元网元列表
useNeInfoStore().fnNelist();
// 获取列表数据
fnGetList();
useNeInfoStore()
.fnNelist()
.finally(() => {
// 获取列表数据
fnGetList();
});
});
</script>
@@ -238,14 +313,12 @@ onMounted(() => {
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.logManage.forwarding.type')"
name="neType"
>
<a-col :lg="4" :md="12" :xs="24">
<a-form-item :label="t('views.ne.common.neType')" name="neType">
<a-auto-complete
v-model:value="queryParams.neType"
:options="useNeInfoStore().getNeSelectOtions"
:placeholder="t('views.ne.common.neTypePlease')"
allow-clear
/>
</a-form-item>
@@ -257,17 +330,16 @@ onMounted(() => {
>
<a-range-picker
v-model:value="queryRangePicker"
allow-clear
bordered
show-time
value-format="YYYY-MM-DD HH:mm:ss"
format="YYYY-MM-DD HH:mm:ss"
:presets="rangePickerPresets"
:bordered="true"
:allow-clear="false"
style="width: 100%"
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
></a-range-picker>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-col :lg="4" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" @click.prevent="fnGetList(1)">
@@ -343,8 +415,25 @@ onMounted(() => {
:data-source="tableState.data"
:size="tableState.size"
:pagination="tablePagination"
:scroll="{ x: 1500, y: 400 }"
:scroll="{ x: tableColumns.length * 150, y: 'calc(100vh - 480px)' }"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'alarmStatus'">
<DictTag :options="dict.alarmStatus" :value="record.alarmStatus" />
</template>
<template v-if="column.key === 'alarmType'">
<DictTag
:options="dict.activeAlarmType"
:value="record.alarmType"
/>
</template>
<template v-if="column.key === 'origSeverity'">
<DictTag
:options="dict.activeAlarmSeverity"
:value="record.origSeverity"
/>
</template>
</template>
</a-table>
</a-card>
</PageContainer>