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

---完善活动告警 -80%

Browse Source
This commit is contained in:
lai
2023-09-28 18:02:31 +08:00
parent 4cdf40b3b1
commit 11e4159368
4 changed files with 406 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

419
src/views/faultManage/active-alarm/index.vue
View File

@@ -13,6 +13,9 @@ import {
updateConfirm,
cancelConfirm,
listSync,
clearAlarm,
showPass,
getPass,
} from '@/api/faultManage/actAlarm';
import useNeInfoStore from '@/store/modules/neinfo';
import useI18n from '@/hooks/useI18n';
@@ -20,10 +23,13 @@ import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { readLoalXlsx } from '@/utils/execl-utils';
const { t } = useI18n();
const route = useRoute();
type RangeValue = [Dayjs, Dayjs];
/**路由标题 */
let title = ref<string>((route.meta.title as string) ?? '标题');
/**记录开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
/**查询参数 */
let queryParams = reactive({
/**告警设备类型 */
@@ -35,9 +41,11 @@ let queryParams = reactive({
/**告警编号 */
alarm_code: '',
/**告警级别 */
orig_severity: "'Critical','Major','Minor','Warning','Event'",
orig_severity: '',
beginTime: '',
endTime: '',
/**告警产生时间 */
eventTime: '',
eventTime: (queryRangePicker.value = ['', '']),
/**虚拟化标识 */
pv_flag: '',
/**告警类型 */
@@ -51,10 +59,23 @@ let queryParams = reactive({
/**查询参数重置 */
function fnQueryReset() {
queryParams = Object.assign(queryParams, {
imsi: '',
msisdn: '',
pageNum: 1,
pageSize: 20,
/**告警设备类型 */
ne_type: '',
/**告警网元名称 */
ne_name: '',
/**告警网元标识 */
ne_id: '',
/**告警编号 */
alarm_code: '',
/**告警级别 */
orig_severity: '',
/**告警产生时间 */
eventTime: (queryRangePicker.value = ['', '']),
/**虚拟化标识 */
pv_flag: '',
/**告警类型 */
alarm_type: '',
/**当前页数 */
});
tablePagination.current = 1;
tablePagination.pageSize = 20;
@@ -84,6 +105,12 @@ let tableState: TabeStateType = reactive({
selectedRowKeys: [],
});
/**过滤设置 */
let filterState: any = reactive({
data: {},
sql: '',
});
/**帮助文档表格状态 */
let alarmTableState: TabeStateType = reactive({
loading: false,
@@ -117,21 +144,8 @@ let tableColumns: ColumnsType = [
},
{
title: t('views.faultManage.activeAlarm.origLevel'),
dataIndex: 'origSeverity',
align: 'center',
customRender(opt) {
let levelName: any = {
Critical: '严重告警',
Major: '主要告警',
Minor: '次要告警',
Warning: '警告告警',
Event: '事件告警',
};
if (levelName[opt.value]) {
return levelName[opt.value];
}
return opt.value;
},
key:'origSeverity',
},
{
title: t('views.faultManage.activeAlarm.alarmCode'),
@@ -214,7 +228,6 @@ let alarmTableColumns: ColumnsType = [
title: t('views.faultManage.activeAlarm.addInfo'),
dataIndex: '告警帮助信息',
align: 'center',
},
{
title: t('views.faultManage.activeAlarm.alarmType'),
@@ -304,41 +317,46 @@ function fnTableSize({ key }: MenuInfo) {
/**表格所需option */
const actAlarmOption = reactive({
pvFlag: [
{ label: 'PNF', value: "'PNF'" },
{ label: 'VNF', value: "'VNF'" },
{ label: 'PNF', value: 'PNF' },
{ label: 'VNF', value: 'VNF' },
],
alarmType: [
{
label: t('views.faultManage.activeAlarm.communicationAlarm'),
value: "'CommunicationAlarm'",
value: 'CommunicationAlarm',
},
{
label: t('views.faultManage.activeAlarm.equipmentAlarm'),
value: "'EquipmentAlarm'",
value: 'EquipmentAlarm',
},
{
label: t('views.faultManage.activeAlarm.processingFailure'),
value: "'ProcessingFailure'",
value: 'ProcessingFailure',
},
{
label: t('views.faultManage.activeAlarm.environmentalAlarm'),
value: "'EnvironmentalAlarm'",
value: 'EnvironmentalAlarm',
},
{
label: t('views.faultManage.activeAlarm.qualityOfServiceAlarm'),
value: "'QualityOfServiceAlarm'",
value: 'QualityOfServiceAlarm',
},
],
origSeverity: [
{
label: t('views.faultManage.activeAlarm.all'),
value: "'Critical','Major','Minor','Warning','Event'",
},
{ label: t('views.faultManage.activeAlarm.critical'), value: "'Critical'" },
{ label: t('views.faultManage.activeAlarm.major'), value: "'Major'" },
{ label: t('views.faultManage.activeAlarm.minor'), value: "'Minor'" },
{ label: t('views.faultManage.activeAlarm.warning'), value: "'Warning'" },
{ label: t('views.faultManage.activeAlarm.eventAlarm'), value: "'Event'" },
{ label: t('views.faultManage.activeAlarm.critical'), value: 'Critical' },
{ label: t('views.faultManage.activeAlarm.major'), value: 'Major' },
{ label: t('views.faultManage.activeAlarm.minor'), value: 'Minor' },
{ label: t('views.faultManage.activeAlarm.warning'), value: 'Warning' },
{ label: t('views.faultManage.activeAlarm.eventAlarm'), value: 'Event' },
],
clearType: [
{ label: '告警未清除', value: 0 },
{ label: '自动清除', value: 1 },
{ label: '手动清除', value: 2 },
],
ackState: [
{ label: '未确认', value: 0 },
{ label: '已确认', value: 1 },
],
});
@@ -348,10 +366,14 @@ type ModalStateType = {
visibleByView: boolean;
/**新增框或修改框是否显示 */
visibleByEdit: boolean;
/**显示过滤设置是否显示 */
visibleByShowSet: boolean;
/**标题 */
title: string;
/**表单数据 */
from: Record<string, any>;
/**表单数据 */
showSetFrom: Record<string, any>;
/**确定按钮 loading */
confirmLoading: boolean;
};
@@ -360,6 +382,7 @@ type ModalStateType = {
let modalState: ModalStateType = reactive({
visibleByView: false,
visibleByEdit: false,
visibleByShowSet: false,
title: '全部信息',
from: {
alarmId: '',
@@ -386,6 +409,14 @@ let modalState: ModalStateType = reactive({
ackTime: '',
origSeverity: '',
},
showSetFrom: {
ne_type: '',
ne_id: '',
alarm_type: '',
orig_severity: '',
alarm_code: '',
pv_flag: '',
},
confirmLoading: false,
});
@@ -399,18 +430,18 @@ function fnModalVisibleByVive(row: Record<string, any>) {
modalState.visibleByView = true;
}
/**抽屉 网元详细信息 */
/**告警帮助文档抽屉 初始设置 */
const visible = ref(false);
const closeDrawer = () => {
visible.value = false;
};
/**抽屉 告警帮助文档详细信息 */
function fnModalVisibleBy(code: string) {
const result = readLoalXlsx(code);
result
.then(res => {
console.log(res);
if (!res.length) {
visible.value = false;
}
@@ -460,6 +491,35 @@ function fnModalOk() {
});
}
/**
* 对话框弹出确认执行 设置显示过滤
*/
function fnShowModalOk() {
modalState.confirmLoading = true;
const from = toRaw(modalState.showSetFrom);
const result = showPass(from);
const hide = message.loading({ content: t('common.loading') });
result
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3,
});
modalState.visibleByShowSet = false;
fnGetList();
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
modalState.confirmLoading = false;
});
}
/**表格状态 */
const state = reactive<{
selectedRowKeys: (string | number)[];
@@ -520,8 +580,7 @@ function fnSync() {
content: `手工同步成功`,
duration: 2,
});
console.log(toRaw(res));
return false;
tablePagination.total = res.total;
tableState.data = res.rows;
} else {
@@ -533,6 +592,56 @@ function fnSync() {
});
}
/**
* 清除
*/
function fnClear() {
Modal.confirm({
title: 'Tip',
content: `是否清除该告警?`,
onOk() {
const hide = message.loading('请稍等...', 0);
clearAlarm(state.selectedRowKeys).then(res => {
hide();
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: `清除成功`,
duration: 2,
});
fnGetList();
} else {
message.error({
content: `${res.msg}`,
duration: 2,
});
}
});
},
});
}
/**
* 显示过滤
*/
function fnShowSet() {
if (modalState.confirmLoading) return;
const hide = message.loading('正在打开...', 0);
modalState.confirmLoading = true;
getPass().then(res => {
modalState.confirmLoading = false;
hide();
if (res.code === RESULT_CODE_SUCCESS) {
let realJson = res.data.data[0]['config'][0].value_json
? JSON.parse(res.data.data[0]['config'][0].value_json)
: {};
modalState.showSetFrom = Object.assign(modalState.showSetFrom, realJson);
modalState.title = '显示过滤设置';
modalState.visibleByShowSet = true;
} else {
message.error(`获取显示过滤设置失败`, 2);
}
});
}
/**
* 对话框弹出关闭执行函数
* 进行表达规则校验
@@ -540,30 +649,43 @@ function fnSync() {
function fnModalCancel() {
modalState.visibleByEdit = false;
modalState.visibleByView = false;
modalState.visibleByShowSet = false;
}
/**查询列表 */
function fnGetList() {
if (tableState.loading) return;
tableState.loading = true;
listAct(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
// 取消勾选
if (state.selectedRowKeys.length > 0) {
state.selectedRowKeys = [];
}
tablePagination.total = res.total;
tableState.data = res.rows;
} else {
tablePagination.total = 0;
tableState.data = [];
if (!queryRangePicker.value) {
queryRangePicker.value = ['', ''];
}
queryParams.beginTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1];
getPass().then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
let sql = res.data.data[0]['config'][0].value
? res.data.data[0]['config'][0].value
: '';
filterState.sql = sql;
}
tableState.loading = false;
listAct(toRaw(queryParams), filterState.sql).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
// 取消勾选
if (state.selectedRowKeys.length > 0) {
state.selectedRowKeys = [];
}
tablePagination.total = res.total;
tableState.data = res.rows;
} else {
tablePagination.total = 0;
tableState.data = [];
}
tableState.loading = false;
});
});
}
const profile = useUserStore().profile;
onMounted(() => {
fnGetList();
});
@@ -660,6 +782,7 @@ onMounted(() => {
v-model:value="queryParams.orig_severity"
placeholder="Select alarm Type"
show-search
allow-clear
:options="actAlarmOption.origSeverity"
/>
</a-form-item>
@@ -669,7 +792,13 @@ onMounted(() => {
:label="t('views.faultManage.activeAlarm.eventTime')"
name="eventTime"
>
<a-range-picker show-time style="width: 400px" />
<a-range-picker
v-model:value="queryRangePicker"
value-format="YYYY-MM-DD HH:mm:ss"
format="YYYY-MM-DD HH:mm:ss"
show-time
style="width: 400px"
/>
</a-form-item>
</a-col>
</a-row>
@@ -728,6 +857,23 @@ onMounted(() => {
</template>
{{ t('views.faultManage.activeAlarm.syncMyself') }}
</a-button>
<a-button
type="primary"
danger
@click.prevent="fnClear()"
:disabled="state.selectedRowKeys.length <= 0"
>
<template #icon>
<DeleteOutlined />
</template>
{{ t('views.faultManage.activeAlarm.clear') }}
</a-button>
<a-button type="primary" @click.prevent="fnShowSet()">
<template #icon> <SettingOutlined /> </template>
{{ t('views.faultManage.activeAlarm.disPlayFilfter') }}
</a-button>
</a-space>
</template>
@@ -783,42 +929,6 @@ onMounted(() => {
:height="700"
placement="bottom"
>
<!-- <a-descriptions
bordered
:column="1"
:label-style="{ width: '160px' }"
>
<a-descriptions-item :label="t('views.faultManage.activeAlarm.alarmTitle')">{{
pronInfo['告警名称']
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.faultManage.activeAlarm.locationInfo')">{{
pronInfo['告警定位信息']
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.faultManage.activeAlarm.addInfo')">{{
pronInfo['告警帮助信息']
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.faultManage.activeAlarm.alarmType')">{{
pronInfo['告警类型']
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.faultManage.activeAlarm.origLevel')">{{
pronInfo['告警级别']
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.faultManage.activeAlarm.alarmCode')">{{
pronInfo['告警编号']
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.faultManage.activeAlarm.specificProblem')">{{
pronInfo['告警问题原因']
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.faultManage.activeAlarm.clearType')">{{
pronInfo['清除类型']
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.faultManage.activeAlarm.realTitle')">{{
pronInfo['英文标题']
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.faultManage.activeAlarm.objectNf')">{{
pronInfo['适用网元']
}}</a-descriptions-item>
</a-descriptions> -->
<a-table
class="table"
row-key="id"
@@ -827,7 +937,7 @@ onMounted(() => {
:data-source="alarmTableState.data"
:size="alarmTableState.size"
:pagination="false"
:scroll="{ x: true , y: 450 }"
:scroll="{ x: true, y: 450 }"
>
</a-table>
</a-drawer>
@@ -849,6 +959,9 @@ onMounted(() => {
:scroll="{ x: true }"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'origSeverity'">
<a-tag :color="profile.color[record.origSeverity]">{{record.origSeverity}}</a-tag>
</template>
<template v-if="column.key === 'alarm_id'">
<a-space :size="8" align="center">
<a-tooltip>
@@ -886,6 +999,7 @@ onMounted(() => {
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
@ok="fnModalOk"
ok-text="查阅"
@cancel="fnModalCancel"
>
<a-form name="modalStateFrom" layout="horizontal">
@@ -1024,12 +1138,13 @@ onMounted(() => {
:label="t('views.faultManage.activeAlarm.alarmType')"
name="alarmType"
>
<a-input
<a-select
v-model:value="modalState.from.alarmType"
style="width: 100%"
:options="actAlarmOption.alarmType"
disabled
allow-clear
>
</a-input>
</a-select>
</a-form-item>
</a-col>
</a-row>
@@ -1093,12 +1208,13 @@ onMounted(() => {
:label="t('views.faultManage.activeAlarm.origLevel')"
name="origSeverity"
>
<a-input
<a-select
v-model:value="modalState.from.origSeverity"
style="width: 100%"
:options="actAlarmOption.origSeverity"
disabled
allow-clear
>
</a-input>
</a-select>
</a-form-item>
</a-col>
</a-row>
@@ -1141,12 +1257,13 @@ onMounted(() => {
:label="t('views.faultManage.activeAlarm.clearType')"
name="clearType"
>
<a-input
<a-select
v-model:value="modalState.from.clearType"
style="width: 100%"
:options="actAlarmOption.clearType"
disabled
allow-clear
>
</a-input>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
@@ -1183,12 +1300,12 @@ onMounted(() => {
:label="t('views.faultManage.activeAlarm.ackState')"
name="ackState"
>
<a-input
<a-select
v-model:value="modalState.from.ackState"
style="width: 100%"
:options="actAlarmOption.ackState"
disabled
allow-clear
>
</a-input>
/>
</a-form-item>
</a-col>
</a-row>
@@ -1207,14 +1324,96 @@ onMounted(() => {
</a-input>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-modal>
<!-- 显示过滤 -->
<a-modal
width="800px"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByShowSet"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
@ok="fnShowModalOk"
ok-text="设置"
@cancel="fnModalCancel"
>
<a-form name="modalStateShowFrom" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.alarmStatus')"
name="alarmStatus"
:label="t('views.faultManage.activeAlarm.neType')"
name="neType"
>
<a-input
v-model:value="modalState.from.alarmStatus"
disabled
v-model:value="modalState.showSetFrom.ne_type"
allow-clear
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.neId')"
name="ackState"
>
<a-input v-model:value="modalState.showSetFrom.ne_id" allow-clear>
</a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.pvFlag')"
name="neType"
>
<a-select
v-model:value="modalState.showSetFrom.pv_flag"
style="width: 100%"
allow-clear
:options="actAlarmOption.pvFlag"
/>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.alarmType')"
name="ackState"
>
<a-select
v-model:value="modalState.showSetFrom.alarm_type"
style="width: 100%"
allow-clear
:options="actAlarmOption.alarmType"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.origLevel')"
name="neType"
>
<a-select
v-model:value="modalState.showSetFrom.orig_severity"
style="width: 100%"
allow-clear
:options="actAlarmOption.origSeverity"
/>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.alarmCode')"
name="alarmCode"
>
<a-input
v-model:value="modalState.showSetFrom.alarm_code"
allow-clear
>
</a-input>