Files
fe.ems.vue3/src/views/faultManage/active-alarm/index.vue
2025-06-13 14:21:56 +08:00

1549 lines
43 KiB
Vue

<script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { ProModal } from 'antdv-pro-modal';
import { message, Modal } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import {
listAct,
ackAlarm,
listSync,
clearAlarm,
showPass,
getPass,
exportAll,
exportAlarm,
} from '@/api/faultManage/actAlarm';
import useI18n from '@/hooks/useI18n';
import useNeStore from '@/store/modules/ne';
import useDictStore from '@/store/modules/dict';
import saveAs from 'file-saver';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import { writeSheet } from '@/utils/execl-utils';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { readLoalXlsx } from '@/utils/execl-utils';
import { parseDateToStr } from '@/utils/date-utils';
import dayjs, { type Dayjs } from 'dayjs';
const neListStore = useNeStore();
const { getDict } = useDictStore();
const { t, currentLocale } = useI18n();
/**字典数据 */
let dict: {
/**活动告警类型 */
activeAlarmType: DictType[];
/**告警清除类型 */
activeClearType: DictType[];
/**告警清除类型 */
activeAckState: DictType[];
/**原始严重程度 */
activeAlarmSeverity: DictType[];
} = reactive({
activeAlarmType: [],
activeClearType: [],
activeAckState: [],
activeAlarmSeverity: [],
});
/**表格字段列排序 */
let tableColumnsDnd = ref<ColumnsType>([]);
/**开始结束时间 */
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({
alarmStatus: 1,
sortField: 'event_time',
sortOrder: 'desc',
/**告警设备类型 */
neType: '',
/**告警网元名称 */
neName: '',
/**告警网元标识 */
neId: '',
/**告警编号 */
alarmCode: '',
/**告警级别 */
origSeverity: undefined,
/**告警产生时间开始时间 */
beginTime: undefined as undefined | number,
/**告警产生时间结束时间 */
endTime: undefined as undefined | number,
/**虚拟化标识 */
pvFlag: undefined,
/**告警类型 */
alarmType: undefined,
/**当前页数 */
pageNum: 1,
/**每页条数 */
pageSize: 20,
/**条件sql */
sql: undefined,
});
/**查询参数重置 */
function fnQueryReset() {
queryParams = Object.assign(queryParams, {
alarmStatus: 1,
/**告警设备类型 */
neType: '',
/**告警网元名称 */
neName: '',
/**告警网元标识 */
neId: '',
/**告警编号 */
alarmCode: '',
/**告警级别 */
origSeverity: undefined,
/**告警产生时间 */
beginTime: undefined,
endTime: undefined,
/**虚拟化标识 */
pvFlag: undefined,
/**告警类型 */
alarmType: undefined,
/**当前页数 */
});
queryRangePicker.value = 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: false,
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.alarmType'),
dataIndex: 'alarmType',
key: 'alarmType',
align: 'left',
width: 150,
},
{
title: t('views.faultManage.activeAlarm.origLevel'),
align: 'left',
key: 'origSeverity',
dataIndex: 'origSeverity',
width: 100,
},
{
title: t('views.faultManage.activeAlarm.alarmTitle'),
dataIndex: 'alarmTitle',
align: 'left',
width: 200,
ellipsis: true,
},
{
title: t('views.faultManage.activeAlarm.eventTime'),
dataIndex: 'eventTime',
align: 'left',
width: 200,
customRender(opt) {
if (typeof opt.value === 'number') {
return parseDateToStr(+opt.value);
}
return opt.value;
},
},
{
title: t('views.faultManage.activeAlarm.alarmId'),
dataIndex: 'alarmId',
align: 'left',
width: 150,
ellipsis: true,
},
{
title: t('views.faultManage.activeAlarm.alarmCode'),
dataIndex: 'alarmCode',
align: 'left',
width: 100,
},
{
title: t('views.ne.common.neType'),
dataIndex: 'neType',
align: 'left',
width: 100,
},
{
title: t('views.ne.common.neName'),
dataIndex: 'neName',
align: 'left',
width: 100,
},
{
title: t('views.ne.common.neId'),
dataIndex: 'neId',
align: 'left',
width: 100,
},
{
title: t('common.operate'),
key: 'id',
align: 'left',
fixed: 'right',
width: 100,
},
];
/**帮助文档表格字段列 */
let alarmTableColumns = ref<ColumnsType>([
{
title: t('views.faultManage.activeAlarm.alarmCode'),
dataIndex: 'alarmCode',
align: 'left',
width: 100,
},
{
title: t('views.faultManage.activeAlarm.alarmType'),
dataIndex: 'alarmType',
align: 'left',
width: 150,
},
{
title: t('views.faultManage.activeAlarm.clearType'),
dataIndex: 'clearType',
align: 'left',
width: 100,
},
{
title: t('views.faultManage.activeAlarm.origLevel'),
dataIndex: 'alarmLevel',
align: 'left',
width: 100,
},
{
title: t('views.faultManage.activeAlarm.alarmTitle'),
dataIndex: 'alarmName',
align: 'left',
width: 150,
},
{
title: t('views.faultManage.activeAlarm.realTitle'),
dataIndex: 'enTitle',
align: 'left',
width: 150,
},
{
title: t('views.faultManage.activeAlarm.locationInfo'),
dataIndex: 'alarmInfo',
align: 'left',
width: 150,
},
{
title: t('views.faultManage.activeAlarm.objectNf'),
dataIndex: 'objNf',
align: 'left',
width: 100,
},
{
title: t('views.faultManage.activeAlarm.specificProblem'),
dataIndex: 'cause',
align: 'left',
width: 200,
},
{
title: t('views.faultManage.activeAlarm.addInfo'),
dataIndex: 'helpInfo',
align: 'left',
width: 300,
resizable: true,
minWidth: 150,
maxWidth: 400,
},
]);
/**表格分页器参数 */
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 = {
/**详情框是否显示 */
openByView: boolean;
/**新增框或修改框是否显示 */
openByEdit: boolean;
/**显示过滤设置是否显示 */
openByShowSet: boolean;
/**告警帮助文档是否显示 */
helpShowView: boolean;
/**个性化设置置是否显示 */
openByMyselfSet: boolean;
/**标题 */
title: string;
/**表单数据 */
from: Record<string, any>;
/**表单数据 */
showSetFrom: Record<string, any>;
/**确定按钮 loading */
confirmLoading: boolean;
};
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
openByView: false,
openByEdit: false,
openByShowSet: false,
helpShowView: false,
openByMyselfSet: 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.openByView = 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 == '1') {
message.error({
content: t('views.faultManage.activeAlarm.ackError'),
duration: 3,
});
modalState.confirmLoading = false;
modalState.openByView = false;
return false;
}
const hide = message.loading(t('common.loading'), 0);
ackAlarm([from.id], true)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3,
});
modalState.openByView = 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(t('common.loading'), 0);
result
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3,
});
modalState.openByShowSet = 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: t('common.tipTitle'),
content: t('views.faultManage.activeAlarm.cancelSure'),
onOk() {
const hide = message.loading(t('common.loading'), 0);
const ids = state.selectedRowKeys.map(v => Number(v));
ackAlarm(ids, false).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 => {
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,
});
}
}).finally(()=>{
hide();
});
}
/**
* 清除
*/
function fnClear() {
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.faultManage.activeAlarm.delSure'),
onOk() {
const hide = message.loading(t('common.loading'), 0);
const ids = state.selectedRowKeys.map(v => Number(v));
clearAlarm(ids).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.openByShowSet = true;
} else {
message.error(t('common.getInfoFail'), 2);
}
});
}
// key替换中文title
function mapKeysWithReduce(data: any[], titleMapping: Record<string, string>) {
return data.map((item: any) => {
if (typeof item !== 'object' || item === null) {
return item; // 如果不是对象,直接返回原值
}
return Object.keys(item).reduce(
(newItem: Record<string, any>, key: string) => {
const title = titleMapping[key] || key;
newItem[title] = item[key];
return newItem;
},
{}
); // 确保初始值是一个空对象
});
}
/**
* 导出全部
*/
function fnExportAll() {
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.faultManage.activeAlarm.exportSure'),
onOk() {
const key = 'exportAlarm';
message.loading({ content: t('common.loading'), key });
let sortArr: any = [];
let writeSheetOpt: any = [];
let mappArr: any = {};
tableColumnsDnd.value.forEach((item: any) => {
if (item.dataIndex) {
sortArr.push(item.dataIndex);
writeSheetOpt.push(item.title);
mappArr[item.dataIndex] = item.title;
}
});
//提供给writeSheet排序参数
const sortData = {
header: writeSheetOpt,
};
exportAll(queryParams).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
res.data = res.data.map((objA: any) => {
let filteredObj: any = {};
//sort Data
sortArr.forEach((key: any) => {
if (objA.hasOwnProperty(key)) {
filteredObj[key] = objA[key];
}
});
const mapProps = (dict: any, key: string) => {
const item = dict.find(
(item: any) => item.value === `${filteredObj[key]}`
);
if (item) {
filteredObj[key] = item.label;
}
};
mapProps(dict.activeAckState, 'ackState');
mapProps(dict.activeClearType, 'clearType');
mapProps(dict.activeAlarmSeverity, 'origSeverity');
mapProps(dict.activeAlarmType, 'alarmType');
return filteredObj;
});
console.log(mappArr);
res.data = mapKeysWithReduce(res.data, mappArr);
writeSheet(res.data, 'alarm', sortData).then(fileBlob => {
saveAs(fileBlob, `alarm_${Date.now()}.xlsx`);
message.success({
content: t('common.msgSuccess', { msg: t('common.export') }),
key,
duration: 3,
});
});
} else {
message.error({
content: `${res.msg}`,
key,
duration: 3,
});
}
});
},
});
}
/**
* 对话框弹出关闭执行函数
* 进行表达规则校验
*/
function fnModalCancel() {
modalState.openByEdit = false;
modalState.openByView = false;
modalState.openByShowSet = false;
modalState.helpShowView = false;
}
/**列表导出 */
function fnExportList() {
if (modalState.confirmLoading) return;
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.faultManage.activeAlarm.exportTip'),
onOk() {
const hide = message.loading(t('common.loading'), 0);
const querys = toRaw(queryParams);
exportAlarm(querys)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.operateOk'),
duration: 3,
});
saveAs(res.data, `active_alarm_export_${Date.now()}.xlsx`);
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
modalState.confirmLoading = false;
});
},
});
}
/**查询列表, pageNum初始页数 */
function fnGetList(pageNum?: number) {
if (tableState.loading) return;
tableState.loading = true;
if (pageNum) {
queryParams.pageNum = pageNum;
}
// 时间范围
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;
}
// 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;
// }
// });
const form = toRaw(queryParams);
form.sql = filterState.sql;
listAct(form).then((res: any) => {
if (res.code === RESULT_CODE_SUCCESS) {
// 取消勾选
if (state.selectedRowKeys.length > 0) {
state.selectedRowKeys = [];
}
const { total, rows } = res.data;
tablePagination.total = total;
tableState.data = rows;
if (
tablePagination.total <=
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}
} 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.ne.common.neType')" name="neType">
<a-auto-complete
v-model:value="queryParams.neType"
:options="neListStore.getNeSelectOtions"
allow-clear
:placeholder="t('views.ne.common.neTypePlease')"
/>
</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.alarmType')"
name="alarm_type"
>
<a-select
v-model:value="queryParams.alarmType"
:placeholder="t('common.selectPlease')"
:options="dict.activeAlarmType"
/>
</a-form-item>
</a-col>
<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
:placeholder="t('common.inputPlease')"
></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.eventTime')"
name="eventTime"
>
<a-range-picker
v-model:value="queryRangePicker"
: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-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-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"
v-if="false"
>
<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" @click.prevent="fnShowSet()" v-if="false">
<template #icon> <SettingOutlined /> </template>
{{ t('views.faultManage.activeAlarm.disPlayFilfter') }}
</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="dashed" @click.prevent="fnExportList()">
<template #icon><ExportOutlined /></template>
{{ t('common.export') }}
</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>
<TableColumnsDnd
cache-id="alarmActive"
:columns="tableColumns"
v-model:columns-dnd="tableColumnsDnd"
></TableColumnsDnd>
</a-space>
</template>
<!-- 表格列表 -->
<a-table
class="table"
row-key="id"
:columns="tableColumnsDnd"
:loading="tableState.loading"
:data-source="tableState.data"
:size="tableState.size"
:row-selection="{
type: 'checkbox',
columnWidth: '48px',
selectedRowKeys: state.selectedRowKeys,
onChange: onSelectChange,
}"
:pagination="tablePagination"
:scroll="{ x: tableColumns.length * 150, y: 'calc(100vh - 480px)' }"
>
<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 === '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>
<!-- 帮助文档 -->
<ProModal
:drag="true"
:forceFullscreen="true"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:open="modalState.helpShowView"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
:body-style="{ padding: '0px' }"
:footer="false"
@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: alarmTableColumns.length * 250, y: '88vh' }"
@resizeColumn="(w:number, col:any) => (col.width = w)"
>
</a-table>
</ProModal>
<!-- 详情框 -->
<ProModal
:drag="true"
:width="800"
:body-style="{ height: '520px', overflowY: 'scroll' }"
:keyboard="false"
:mask-closable="false"
:open="modalState.openByView"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
@ok="fnModalOk"
:ok-text="t('views.faultManage.activeAlarm.confirm')"
@cancel="fnModalCancel"
>
<template v-slot:footer>
<a-button @click="fnModalCancel">
{{ t('views.faultManage.activeAlarm.closeModal') }}
</a-button>
</template>
<a-form
name="modalStateFrom"
layout="horizontal"
:label-col="{ span: 8 }"
:label-wrap="true"
>
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.alarmId')"
name="alarmId"
>
{{ modalState.from.alarmId }}
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.alarmSeq')"
name="alarmSeq"
>
{{ modalState.from.alarmSeq }}
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.ne.common.neType')" name="neType">
{{ modalState.from.neType }}
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.ne.common.neId')" name="neId">
{{ modalState.from.neId }}
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.ne.common.neName')" name="neName">
{{ modalState.from.neName }}
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.ne.neInfo.pvflag')" name="pvFlag">
{{ modalState.from.pvFlag }}
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.alarmTitle')"
name="alarmTitle"
>
{{ modalState.from.alarmTitle }}
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.eventTime')"
name="eventTime"
>
{{ parseDateToStr(modalState.from.eventTime) }}
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.alarmType')"
name="alarmType"
>
<DictTag
:options="dict.activeAlarmType"
:value="modalState.from.alarmType"
/>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.alarmCode')"
name="alarmCode"
>
{{ modalState.from.alarmCode }}
</a-form-item>
</a-col>
</a-row>
<a-form-item
:label="t('views.faultManage.activeAlarm.locationInfo')"
name="locationInfo"
:label-col="{ span: 4 }"
>
{{ modalState.from.locationInfo }}
</a-form-item>
<a-row> </a-row>
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.province')"
name="province"
>
{{ modalState.from.province }}
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.origLevel')"
name="origSeverity"
>
<DictTag
:options="dict.activeAlarmSeverity"
:value="modalState.from.origSeverity"
/>
</a-form-item>
</a-col>
</a-row>
<a-form-item
:label="t('views.faultManage.activeAlarm.addInfo')"
name="addInfo"
:label-col="{ span: 4 }"
>
{{ modalState.from.addInfo }}
</a-form-item>
<a-form-item
:label="t('views.faultManage.activeAlarm.specificProblemId')"
name="specificProblemId"
:label-col="{ span: 4 }"
>
{{ modalState.from.specificProblemId }}
</a-form-item>
<a-form-item
:label="t('views.faultManage.activeAlarm.specificProblem')"
name="specificProblem"
:label-col="{ span: 4 }"
>
{{ modalState.from.specificProblem }}
</a-form-item>
<a-form-item
:label="t('views.faultManage.activeAlarm.objectName')"
name="objectName"
:label-col="{ span: 4 }"
>
{{ modalState.from.objectName }}
</a-form-item>
<a-row v-show="modalState.from.ackUser != ''">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.ackUser')"
name="ackUser"
>
{{ modalState.from.ackUser }}
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.ackState')"
name="ackState"
>
<DictTag
:options="dict.activeAckState"
:value="modalState.from.ackState"
/>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.ackTime')"
name="ackTime"
>
{{ parseDateToStr(modalState.from.ackTime) }}
</a-form-item>
</a-col>
</a-row>
</a-form>
</ProModal>
<!-- 显示过滤框 -->
<ProModal
:drag="true"
:width="800"
:keyboard="false"
:mask-closable="false"
:open="modalState.openByShowSet"
: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>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.neType')"
name="neType"
>
<a-auto-complete
v-model:value="modalState.showSetFrom.ne_type"
:options="neListStore.getNeSelectOtions"
allow-clear
:placeholder="t('common.inputPlease')"
/>
</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>
<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>
<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>
</ProModal>
<!-- 个性化设置框 -->
<ProModal
:drag="true"
:width="800"
:keyboard="false"
:mask-closable="false"
:open="modalState.openByMyselfSet"
: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>
<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>
<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>
<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>
</ProModal>
</PageContainer>
</template>
<style lang="less" scoped>
.table :deep(.ant-pagination) {
padding: 0 24px;
}
</style>