Files
fe.ems.vue3/src/views/faultManage/active-alarm/index.vue
2023-11-28 21:08:26 +08:00

1593 lines
43 KiB
Vue

<script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import {
listAct,
updateConfirm,
cancelConfirm,
listSync,
clearAlarm,
showPass,
getPass,
exportAll,
} from '@/api/faultManage/actAlarm';
import useI18n from '@/hooks/useI18n';
import useDictStore from '@/store/modules/dict';
import saveAs from 'file-saver';
import { writeSheet } from '@/utils/execl-utils';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { readLoalXlsx } from '@/utils/execl-utils';
const { getDict } = useDictStore();
const { t,currentLocale } = useI18n();
/**字典数据 */
let dict: {
/**活动告警类型 */
activeAlarmType: DictType[];
/**告警清除类型 */
activeClearType: DictType[];
/**告警清除类型 */
activeAckState: DictType[];
/**原始严重程度 */
activeAlarmSeverity: DictType[];
} = reactive({
activeAlarmType: [],
activeClearType: [],
activeAckState: [],
activeAlarmSeverity: [],
});
/**记录开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
/**查询参数 */
let queryParams = reactive({
/**告警设备类型 */
neType: '',
/**告警网元名称 */
neName: '',
/**告警网元标识 */
neId: '',
/**告警编号 */
alarmCode: '',
/**告警级别 */
origSeverity: undefined,
beginTime: '',
endTime: '',
/**告警产生时间 */
eventTime: '',
/**虚拟化标识 */
pvFlag: undefined,
/**告警类型 */
alarmType: undefined,
/**当前页数 */
pageNum: 1,
/**每页条数 */
pageSize: 20,
});
/**查询参数重置 */
function fnQueryReset() {
queryParams = Object.assign(queryParams, {
/**告警设备类型 */
neType: '',
/**告警网元名称 */
neName: '',
/**告警网元标识 */
neId: '',
/**告警编号 */
alarmCode: '',
/**告警级别 */
origSeverity: undefined,
/**告警产生时间 */
eventTime: '',
/**虚拟化标识 */
pvFlag: undefined,
/**告警类型 */
alarmType: undefined,
/**当前页数 */
});
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
}
/**表格状态类型 */
type TabeStateType = {
/**加载等待 */
loading: boolean;
/**紧凑型 */
size: SizeType;
/**搜索栏 */
seached: boolean;
/**记录数据 */
data: object[];
/**勾选记录 */
selectedRowKeys: (string | number)[];
};
/**表格状态 */
let tableState: TabeStateType = reactive({
loading: false,
size: 'middle',
seached: true,
data: [],
selectedRowKeys: [],
});
/**过滤设置 */
let filterState: any = reactive({
data: {},
sql: '',
});
/**帮助文档表格状态 */
let alarmTableState: TabeStateType = reactive({
loading: false,
size: 'middle',
seached: true,
data: [],
selectedRowKeys: [],
});
/**表格字段列 */
let tableColumns: ColumnsType = [
{
title: t('views.faultManage.activeAlarm.alarmId'),
dataIndex: 'alarmId',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.neId'),
dataIndex: 'neId',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.neName'),
dataIndex: 'neName',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.neType'),
dataIndex: 'neType',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.origLevel'),
align: 'center',
key: 'origSeverity',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.alarmCode'),
dataIndex: 'alarmCode',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.alarmTitle'),
dataIndex: 'alarmTitle',
align: 'left',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.eventTime'),
dataIndex: 'eventTime',
align: 'center',
sorter: (a: any, b: any) => 1,
width: 5,
},
{
title: t('views.faultManage.activeAlarm.alarmType'),
dataIndex: 'alarmType',
key: 'alarmType',
align: 'left',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.pvFlag'),
dataIndex: 'pvFlag',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.clearUser'),
dataIndex: 'clearUser',
align: 'left',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.clearType'),
dataIndex: 'clearType',
key: 'clearType',
align: 'left',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.ackState'),
dataIndex: 'ackState',
key: 'ackState',
align: 'left',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.ackUser'),
dataIndex: 'ackUser',
align: 'left',
width: 5,
},
{
title: t('common.operate'),
key: 'alarm_id',
align: 'center',
fixed: 'right',
width: 5,
},
];
/**帮助文档表格字段列 */
let alarmTableColumns: ColumnsType = [
{
title: t('views.faultManage.activeAlarm.alarmTitle'),
dataIndex: 'alarmName',
align: 'center',
width: 3,
},
{
title: t('views.faultManage.activeAlarm.locationInfo'),
dataIndex: 'alarmInfo',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.addInfo'),
dataIndex:'helpInfo',
align: 'center',
width: 8,
},
{
title: t('views.faultManage.activeAlarm.alarmType'),
dataIndex: 'alarmType',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.origLevel'),
dataIndex: 'alarmLevel',
align: 'center',
width: 3,
},
{
title: t('views.faultManage.activeAlarm.alarmCode'),
dataIndex: 'alarmCode',
align: 'center',
width: 3,
},
{
title: t('views.faultManage.activeAlarm.specificProblem'),
dataIndex: 'cause',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.clearType'),
dataIndex: 'clearType',
align: 'center',
width: 3,
},
{
title: t('views.faultManage.activeAlarm.realTitle'),
dataIndex: 'enTitle',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.objectNf'),
dataIndex:'objNf',
align: 'center',
width: 2,
},
];
/**表格分页器参数 */
let tablePagination = reactive({
/**当前页数 */
current: 1,
/**每页条数 */
pageSize: 20,
/**默认的每页条数 */
defaultPageSize: 20,
/**指定每页可以显示多少条 */
pageSizeOptions: ['10', '20', '50', '100'],
/**只有一页时是否隐藏分页器 */
hideOnSinglePage: false,
/**是否可以快速跳转至某页 */
showQuickJumper: true,
/**是否可以改变 pageSize */
showSizeChanger: true,
/**数据总数 */
total: 0,
showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
onChange: (page: number, pageSize: number) => {
tablePagination.current = page;
tablePagination.pageSize = pageSize;
queryParams.pageNum = page;
queryParams.pageSize = pageSize;
fnGetList();
},
});
/**表格紧凑型变更操作 */
function fnTableSize({ key }: MenuInfo) {
tableState.size = key as SizeType;
}
/**对话框对象信息状态类型 */
type ModalStateType = {
/**详情框是否显示 */
visibleByView: boolean;
/**新增框或修改框是否显示 */
visibleByEdit: boolean;
/**显示过滤设置是否显示 */
visibleByShowSet: boolean;
/**告警帮助文档是否显示 */
helpShowView: boolean;
/**个性化设置置是否显示 */
visibleByMyselfSet: boolean;
/**标题 */
title: string;
/**表单数据 */
from: Record<string, any>;
/**表单数据 */
showSetFrom: Record<string, any>;
/**确定按钮 loading */
confirmLoading: boolean;
};
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
visibleByView: false,
visibleByEdit: false,
visibleByShowSet: false,
helpShowView: false,
visibleByMyselfSet: false,
title: '全部信息',
from: {
alarmId: '',
alarmSeq: '',
neId: '',
neName: '',
neType: '',
alarmCode: '',
alarmTitle: '',
eventTime: '',
alarmType: '',
pvFlag: '',
objectName: '',
locationInfo: '',
province: '',
alarmStatus: '',
specificProblemId: '',
specificProblem: '',
addInfo: '',
clearType: '',
clearTime: '',
ackState: '',
ackUser: '',
ackTime: '',
origSeverity: '',
},
showSetFrom: {
ne_type: '',
ne_id: '',
alarm_type: '',
orig_severity: '',
alarm_code: '',
pv_flag: '',
},
// myselfSetFrom:{
// }
confirmLoading: false,
});
/**
* 对话框弹出显示为 查看
* @param row 单行记录信息
*/
function fnModalVisibleByVive(row: Record<string, any>) {
modalState.from = Object.assign(modalState.from, row);
modalState.from.clearType = `${modalState.from.clearType}`;
modalState.from.ackState = `${modalState.from.ackState}`;
modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', {
alarmId: row.alarmId,
});
modalState.visibleByView = true;
}
/** 告警帮助文档详细信息 */
function fnModalVisibleBy(code: string) {
modalState.helpShowView = false;
const lang=currentLocale.value.split('_')[0];
modalState.title=t('views.faultManage.activeAlarm.helpFile');
readLoalXlsx(lang,code)
.then(res => {
alarmTableState.data = res;
modalState.helpShowView = true;
tableState.loading = false;
})
.catch(error => console.error(error));
}
/**
* 对话框弹出确认执行 确认查阅函数
*/
function fnModalOk() {
modalState.confirmLoading = true;
const from = toRaw(modalState.from);
if (from.ackState) {
message.error({
content: t('views.faultManage.activeAlarm.ackError'),
duration: 3,
});
modalState.confirmLoading = false;
modalState.visibleByView = false;
return false;
}
const result = updateConfirm(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.visibleByView = false;
fnGetList();
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
modalState.confirmLoading = false;
});
}
/**
* 对话框弹出确认执行 设置显示过滤
*/
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)[];
selectedRow: Record<string, any>;
loading: boolean;
}>({
selectedRowKeys: [], // Check here to configure the default column
selectedRow: {},
loading: false,
});
/**监听多选 */
const onSelectChange = (
keys: (string | number)[],
record: Record<string, any>
) => {
state.selectedRowKeys = keys;
state.selectedRow = record;
};
/**
* 选中行后的取消确认告警
*/
function fnCancelConfirm() {
Modal.confirm({
title: 'Tip',
content: t('views.faultManage.activeAlarm.cancelSure'),
onOk() {
const hide = message.loading(t('common.loading'), 0);
cancelConfirm(state.selectedRowKeys).then(res => {
hide();
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.faultManage.activeAlarm.cancelSuss'),
duration: 2,
});
fnGetList();
} else {
message.error({
content: `${res.msg}`,
duration: 2,
});
}
});
},
});
}
/**
* 手工同步
*/
function fnSync() {
const hide = message.loading(t('common.loading'), 0);
listSync().then(res => {
hide();
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.faultManage.activeAlarm.sysncSuss'),
duration: 2,
});
fnGetList();
} else {
message.error({
content: `${res.msg}`,
duration: 2,
});
}
});
}
/**
* 清除
*/
function fnClear() {
Modal.confirm({
title: 'Tip',
content: t('views.faultManage.activeAlarm.delSure'),
onOk() {
const hide = message.loading(t('common.loading'), 0);
clearAlarm(state.selectedRowKeys).then(res => {
hide();
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.faultManage.activeAlarm.delSuss'),
duration: 2,
});
fnGetList();
} else {
message.error({
content: `${res.msg}`,
duration: 2,
});
}
});
},
});
}
/**
* 显示过滤
*/
function fnShowSet() {
if (modalState.confirmLoading) return;
const hide = message.loading(t('common.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 = t('views.faultManage.activeAlarm.showSet');
modalState.visibleByShowSet = true;
} else {
message.error(t('common.getInfoFail'), 2);
}
});
}
/**
* 导出全部
*/
function fnExportAll() {
Modal.confirm({
title: 'Tip',
content: t('views.faultManage.activeAlarm.exportSure'),
onOk() {
const key = 'exportAlarm';
message.loading({ content: t('common.loading'), key });
exportAll(queryParams).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: t('common.export') }),
key,
duration: 3,
});
writeSheet(res.data, 'alarm').then(fileBlob =>
saveAs(fileBlob, `alarm_${Date.now()}.xlsx`)
);
} else {
message.error({
content: `${res.msg}`,
key,
duration: 3,
});
}
});
},
});
}
/**
* 对话框弹出关闭执行函数
* 进行表达规则校验
*/
function fnModalCancel() {
modalState.visibleByEdit = false;
modalState.visibleByView = false;
modalState.visibleByShowSet = false;
modalState.helpShowView=false;
}
/**查询列表, pageNum初始页数 */
function fnGetList(pageNum?: number) {
if (tableState.loading) return;
tableState.loading = true;
if (pageNum) {
queryParams.pageNum = pageNum;
}
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;
}
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;
});
});
}
onMounted(() => {
// 初始字典数据
Promise.allSettled([
getDict('active_alarm_type'),
getDict('active_clear_type'),
getDict('active_ack_state'),
getDict('active_alarm_severity'),
]).then(resArr => {
if (resArr[0].status === 'fulfilled') {
dict.activeAlarmType = resArr[0].value;
}
if (resArr[1].status === 'fulfilled') {
dict.activeClearType = resArr[1].value;
}
if (resArr[2].status === 'fulfilled') {
dict.activeAckState = resArr[2].value;
}
if (resArr[3].status === 'fulfilled') {
dict.activeAlarmSeverity = resArr[3].value;
}
});
fnGetList();
});
</script>
<template>
<PageContainer>
<a-card
v-show="tableState.seached"
:bordered="false"
:body-style="{ marginBottom: '24px', paddingBottom: 0 }"
>
<!-- 表格搜索栏 -->
<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.faultManage.activeAlarm.neType')"
name="ne_type"
>
<a-input v-model:value="queryParams.neType" allow-clear></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.neName')"
name="ne_name"
>
<a-input v-model:value="queryParams.neName" allow-clear></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.neId')"
name="ne_id"
>
<a-input v-model:value="queryParams.neId" allow-clear></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" @click.prevent="fnGetList(1)">
<template #icon><SearchOutlined /></template>
{{ t('common.search') }}
</a-button>
<a-button type="default" @click.prevent="fnQueryReset">
<template #icon><ClearOutlined /></template>
{{ t('common.reset') }}
</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.alarmCode')"
name="alarm_code"
>
<a-input
v-model:value="queryParams.alarmCode"
allow-clear
></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.origLevel')"
name="orig_severity"
>
<a-select
v-model:value="queryParams.origSeverity"
:placeholder="t('common.selectPlease')"
allow-clear
:options="dict.activeAlarmSeverity"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.eventTime')"
name="eventTime"
>
<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>
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.pvFlag')"
name="pv_flag"
>
<a-select
v-model:value="queryParams.pvFlag"
:placeholder="t('common.selectPlease')"
:options="[
{ label: 'PNF', value: 'PNF' },
{ label: 'VNF', value: 'VNF' },
]"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.alarmType')"
name="alarm_type"
>
<a-select
v-model:value="queryParams.alarmType"
:placeholder="t('common.selectPlease')"
:options="dict.activeAlarmType"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-card>
<a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-space :size="8" align="center">
<a-button
type="primary"
@click.prevent="fnCancelConfirm()"
:disabled="state.selectedRowKeys.length <= 0"
>
<template #icon>
<CloseOutlined />
</template>
{{ t('views.faultManage.activeAlarm.updateConfirm') }}
</a-button>
<a-button type="primary" @click.prevent="fnSync()">
<template #icon>
<ReloadOutlined />
</template>
{{ t('views.faultManage.activeAlarm.syncMyself') }}
</a-button>
<a-button
type="primary"
danger
@click.prevent="fnClear()"
:disabled="state.selectedRowKeys.length !== 1"
>
<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-button type="primary" @click.prevent="fnExportAll()">
<template #icon> <export-outlined /> </template>
{{ t('views.faultManage.activeAlarm.exportAll') }}
</a-button>
</a-space>
</template>
<!-- 插槽-卡片右侧 -->
<template #extra>
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template>
<a-switch
v-model:checked="tableState.seached"
:checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')"
size="small"
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList()">
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown trigger="click">
<a-button type="text">
<template #icon><ColumnHeightOutlined /></template>
</a-button>
<template #overlay>
<a-menu
:selected-keys="[tableState.size as string]"
@click="fnTableSize"
>
<a-menu-item key="default">
{{ t('common.size.default') }}
</a-menu-item>
<a-menu-item key="middle">
{{ t('common.size.middle') }}
</a-menu-item>
<a-menu-item key="small">
{{ t('common.size.small') }}
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</a-tooltip>
</a-space>
</template>
<!-- 表格列表 -->
<a-table
class="table"
row-key="id"
:columns="tableColumns"
:loading="tableState.loading"
:data-source="tableState.data"
:size="tableState.size"
:row-selection="{
columnWidth: 2,
selectedRowKeys: state.selectedRowKeys,
onChange: onSelectChange,
}"
:pagination="tablePagination"
:scroll="{ x: 2500, y: 400 }"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'origSeverity'">
<DictTag
:options="dict.activeAlarmSeverity"
:value="record.origSeverity"
/>
</template>
<template v-if="column.key === 'alarmType'">
<DictTag
:options="dict.activeAlarmType"
:value="record.alarmType"
/>
</template>
<template v-if="column.key === 'clearType'">
<DictTag
:options="dict.activeClearType"
:value="record.clearType"
/>
</template>
<template v-if="column.key === 'ackState'">
<DictTag :options="dict.activeAckState" :value="record.ackState" />
</template>
<template v-if="column.key === 'alarm_id'">
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.viewText') }}</template>
<a-button
type="link"
@click.prevent="fnModalVisibleByVive(record)"
>
<template #icon><InfoCircleOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>
{{ t('views.faultManage.activeAlarm.helpFile') }}
</template>
<a-button
type="link"
@click.prevent="fnModalVisibleBy(record.alarmCode)"
>
<template #icon
><QuestionCircleOutlined style="color: crimson"
/></template>
</a-button>
</a-tooltip>
</a-space>
</template>
</template>
</a-table>
</a-card>
<!-- 帮助文档 -->
<a-modal
width="100%"
wrap-class-name="full-modal"
:keyboard="false"
:mask-closable="false"
:visible="modalState.helpShowView"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
:footer="null"
@cancel="fnModalCancel"
>
<a-table
class="table"
row-key="id"
:columns="alarmTableColumns"
:loading="alarmTableState.loading"
:data-source="alarmTableState.data"
:size="alarmTableState.size"
:pagination="false"
:scroll="{ x: 1700, y: 560 }"
>
</a-table>
</a-modal>
<!-- 详情框 -->
<a-modal
width="800px"
:body-style="{ height: '520px', overflowY: 'scroll' }"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByView"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
@ok="fnModalOk"
:ok-text="t('views.faultManage.activeAlarm.confirm')"
@cancel="fnModalCancel"
>
<a-form name="modalStateFrom" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.alarmId')"
name="alarmId"
>
<a-input
v-model:value="modalState.from.alarmId"
disabled
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.alarmSeq')"
name="alarmSeq"
>
<a-input
v-model:value="modalState.from.alarmSeq"
disabled
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.neId')"
name="neId"
>
<a-input
v-model:value="modalState.from.neId"
disabled
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.neName')"
name="neName"
>
<a-input
v-model:value="modalState.from.neName"
disabled
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.neType')"
name="neType"
>
<a-input
v-model:value="modalState.from.neType"
disabled
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.alarmCode')"
name="alarmCode"
>
<a-input
v-model:value="modalState.from.alarmCode"
disabled
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.alarmTitle')"
name="alarmTitle"
>
<a-input
v-model:value="modalState.from.alarmTitle"
disabled
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.eventTime')"
name="eventTime"
>
<a-input
v-model:value="modalState.from.eventTime"
disabled
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.alarmTitle')"
name="alarmTitle"
>
<a-input
v-model:value="modalState.from.alarmTitle"
disabled
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.alarmType')"
name="alarmType"
>
<a-select
v-model:value="modalState.from.alarmType"
style="width: 100%"
:options="dict.activeAlarmType"
disabled
>
</a-select>
</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="pvFlag"
>
<a-input
v-model:value="modalState.from.pvFlag"
disabled
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.objectName')"
name="objectName"
>
<a-input
v-model:value="modalState.from.objectName"
disabled
allow-clear
>
</a-input>
</a-form-item>
</a-col>
</a-row>
<a-form-item
:label="t('views.faultManage.activeAlarm.locationInfo')"
name="locationInfo"
>
<a-textarea
v-model:value="modalState.from.locationInfo"
placeholder="Autosize height with minimum and maximum number of lines"
:auto-size="{ minRows: 1, maxRows: 5 }"
disabled
/>
</a-form-item>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.province')"
name="province"
>
<a-input
v-model:value="modalState.from.province"
disabled
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.origLevel')"
name="origSeverity"
>
<a-select
v-model:value="modalState.from.origSeverity"
style="width: 100%"
:options="dict.activeAlarmSeverity"
disabled
>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item
:label="t('views.faultManage.activeAlarm.addInfo')"
name="addInfo"
>
<a-textarea
v-model:value="modalState.from.addInfo"
:auto-size="{ minRows: 1, maxRows: 5 }"
disabled
/>
</a-form-item>
<a-form-item
:label="t('views.faultManage.activeAlarm.specificProblemId')"
name="specificProblemId"
>
<a-input
v-model:value="modalState.from.specificProblemId"
disabled
allow-clear
>
</a-input>
</a-form-item>
<a-form-item
:label="t('views.faultManage.activeAlarm.specificProblem')"
name="specificProblem"
>
<a-textarea
v-model:value="modalState.from.specificProblem"
:auto-size="{ minRows: 1, maxRows: 5 }"
disabled
/>
</a-form-item>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.clearType')"
name="clearType"
>
<a-select
v-model:value="modalState.from.clearType"
style="width: 100%"
:options="dict.activeClearType"
disabled
>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.clearTime')"
name="clearTime"
>
<a-input
v-model:value="modalState.from.clearTime"
disabled
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.ackUser')"
name="ackUser"
>
<a-input
v-model:value="modalState.from.ackUser"
disabled
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.ackState')"
name="ackState"
>
<a-select
v-model:value="modalState.from.ackState"
style="width: 100%"
:options="dict.activeAckState"
disabled
/>
</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.ackTime')"
name="ackTime"
>
<a-input
v-model:value="modalState.from.ackTime"
disabled
allow-clear
>
</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="t('views.faultManage.activeAlarm.set')"
@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.neType')"
name="neType"
>
<a-input
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="[
{ label: 'PNF', value: 'PNF' },
{ label: 'VNF', value: 'VNF' },
]"
/>
</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="dict.activeAlarmType"
/>
</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="dict.activeAlarmSeverity"
/>
</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>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-modal>
<!-- 个性化设置框 -->
<a-modal
width="800px"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByMyselfSet"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
@ok="fnShowModalOk"
:ok-text="t('views.faultManage.activeAlarm.set')"
@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.neType')"
name="neType"
>
<a-input
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="[
{ label: 'PNF', value: 'PNF' },
{ label: 'VNF', value: 'VNF' },
]"
/>
</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="dict.activeAlarmType"
/>
</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="dict.activeAlarmSeverity"
/>
</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>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-modal>
</PageContainer>
</template>
<style lang="less" scoped>
.table :deep(.ant-pagination) {
padding: 0 24px;
}
.full-modal {
.ant-modal {
max-width: 100%;
top: 0;
padding-bottom: 0;
margin: 0;
}
.ant-modal-content {
display: flex;
flex-direction: column;
height: calc(100vh);
}
.ant-modal-body {
flex: 1;
}
}
</style>