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

style: 调整告警页面表格列对齐和宽度，去掉pvfig

Browse Source
This commit is contained in:
TsMask
2025-03-12 11:05:17 +08:00
parent ac7079b91a
commit ccbea1fc51
3 changed files with 75 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -145,66 +145,60 @@ let alarmTableState: TabeStateType = reactive({
let tableColumns: ColumnsType = [ let tableColumns: ColumnsType = [
{ {
title: t('views.faultManage.activeAlarm.origLevel'), title: t('views.faultManage.activeAlarm.origLevel'),
align: 'center', align: 'left',
key: 'origSeverity', key: 'origSeverity',
dataIndex: 'origSeverity', dataIndex: 'origSeverity',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmTitle'), title: t('views.faultManage.activeAlarm.alarmTitle'),
dataIndex: 'alarmTitle', dataIndex: 'alarmTitle',
align: 'left', align: 'left',
width: 5, width: 200,
}, },
{ {
title: t('views.faultManage.activeAlarm.neType'), title: t('views.faultManage.activeAlarm.neType'),
dataIndex: 'neType', dataIndex: 'neType',
align: 'center', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.eventTime'), title: t('views.faultManage.activeAlarm.eventTime'),
dataIndex: 'eventTime', dataIndex: 'eventTime',
align: 'center', align: 'left',
sorter: (a: any, b: any) => 1, sorter: (a: any, b: any) => 1,
width: 5, width: 150,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmCode'), title: t('views.faultManage.activeAlarm.alarmCode'),
dataIndex: 'alarmCode', dataIndex: 'alarmCode',
align: 'center', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmType'), title: t('views.faultManage.activeAlarm.alarmType'),
dataIndex: 'alarmType', dataIndex: 'alarmType',
key: 'alarmType', key: 'alarmType',
align: 'left', align: 'left',
width: 5, width: 120,
}, },
{ {
title: t('views.faultManage.activeAlarm.neName'), title: t('views.faultManage.activeAlarm.neName'),
dataIndex: 'neName', dataIndex: 'neName',
align: 'center', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.neId'), title: t('views.faultManage.activeAlarm.neId'),
dataIndex: 'neId', dataIndex: 'neId',
align: 'center', align: 'left',
width: 5, width: 100,
},
{
title: t('views.faultManage.activeAlarm.pvFlag'),
dataIndex: 'pvFlag',
align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmId'), title: t('views.faultManage.activeAlarm.alarmId'),
dataIndex: 'alarmId', dataIndex: 'alarmId',
align: 'center', align: 'left',
width: 5, width: 100,
}, },
{ {
@@ -212,20 +206,20 @@ let tableColumns: ColumnsType = [
dataIndex: 'ackState', dataIndex: 'ackState',
key: 'ackState', key: 'ackState',
align: 'left', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.ackUser'), title: t('views.faultManage.activeAlarm.ackUser'),
dataIndex: 'ackUser', dataIndex: 'ackUser',
align: 'left', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('common.operate'), title: t('common.operate'),
key: 'alarm_id', key: 'alarm_id',
align: 'center', align: 'left',
fixed: 'right', fixed: 'right',
width: 5, width: 100,
}, },
]; ];
@@ -1022,12 +1016,12 @@ onMounted(() => {
:data-source="tableState.data" :data-source="tableState.data"
:size="tableState.size" :size="tableState.size"
:row-selection="{ :row-selection="{
columnWidth: 2, columnWidth: 48,
selectedRowKeys: state.selectedRowKeys, selectedRowKeys: state.selectedRowKeys,
onChange: onSelectChange, onChange: onSelectChange,
}" }"
:pagination="tablePagination" :pagination="tablePagination"
:scroll="{ x: 2500, y: 400 }" :scroll="{ x: tableColumns.length * 150, y: 400 }"
> >
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'origSeverity'"> <template v-if="column.key === 'origSeverity'">
@@ -1213,14 +1207,6 @@ onMounted(() => {
{{ modalState.from.alarmType }} {{ modalState.from.alarmType }}
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.pvFlag')"
name="pvFlag"
>
{{ modalState.from.pvFlag }}
</a-form-item>
</a-col>
</a-row> </a-row>
<a-form-item <a-form-item
@@ -1231,17 +1217,7 @@ onMounted(() => {
{{ modalState.from.locationInfo }} {{ modalState.from.locationInfo }}
</a-form-item> </a-form-item>
<a-row> </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-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.origLevel')" :label="t('views.faultManage.activeAlarm.origLevel')"
@@ -1290,7 +1266,7 @@ onMounted(() => {
:label="t('views.faultManage.activeAlarm.ackState')" :label="t('views.faultManage.activeAlarm.ackState')"
name="ackState" name="ackState"
> >
{{ modalState.from.ackState }} <DictTag :options="dict.activeAckState" :value="modalState.from.ackState" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>

38
src/views/faultManage/event/index.vue
View File

@@ -121,58 +121,50 @@ let tableColumns: ColumnsType = [
{ {
title: t('views.faultManage.activeAlarm.alarmId'), title: t('views.faultManage.activeAlarm.alarmId'),
dataIndex: 'alarmId', dataIndex: 'alarmId',
align: 'center', align: 'left',
width: 5, width: 200,
}, },
{ {
title: t('views.faultManage.activeAlarm.neId'), title: t('views.faultManage.activeAlarm.neId'),
dataIndex: 'neId', dataIndex: 'neId',
align: 'center', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.neName'), title: t('views.faultManage.activeAlarm.neName'),
dataIndex: 'neName', dataIndex: 'neName',
align: 'center', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.neType'), title: t('views.faultManage.activeAlarm.neType'),
dataIndex: 'neType', dataIndex: 'neType',
align: 'center', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmCode'), title: t('views.faultManage.activeAlarm.alarmCode'),
dataIndex: 'alarmCode', dataIndex: 'alarmCode',
align: 'center', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmTitle'), title: t('views.faultManage.activeAlarm.alarmTitle'),
dataIndex: 'alarmTitle', dataIndex: 'alarmTitle',
align: 'left', align: 'left',
width: 5, width: 200,
}, },
{ {
title: t('views.faultManage.activeAlarm.eventTime'), title: t('views.faultManage.activeAlarm.eventTime'),
dataIndex: 'eventTime', dataIndex: 'eventTime',
align: 'center',
sorter: (a: any, b: any) => 1, sorter: (a: any, b: any) => 1,
width: 5, align: 'left',
}, width: 200,
{
title: t('views.faultManage.activeAlarm.pvFlag'),
dataIndex: 'pvFlag',
align: 'center',
width: 5,
}, },
{ {
title: t('common.operate'), title: t('common.operate'),
key: 'alarm_id', key: 'alarm_id',
align: 'center', align: 'left',
fixed: 'right',
width: 5,
}, },
]; ];
@@ -626,7 +618,7 @@ onMounted(() => {
</a-dropdown> </a-dropdown>
</a-tooltip> </a-tooltip>
<TableColumnsDnd <TableColumnsDnd
cache-id="alarmActive" cache-id="alarmEvent"
:columns="tableColumns" :columns="tableColumns"
v-model:columns-dnd="tableColumnsDnd" v-model:columns-dnd="tableColumnsDnd"
></TableColumnsDnd> ></TableColumnsDnd>

101
src/views/faultManage/history-alarm/index.vue
View File

@@ -125,105 +125,99 @@ let tableColumns: ColumnsType = [
{ {
title: t('views.faultManage.activeAlarm.alarmId'), title: t('views.faultManage.activeAlarm.alarmId'),
dataIndex: 'alarmId', dataIndex: 'alarmId',
align: 'center', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.neId'), title: t('views.faultManage.activeAlarm.neId'),
dataIndex: 'neId', dataIndex: 'neId',
align: 'center', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.neName'), title: t('views.faultManage.activeAlarm.neName'),
dataIndex: 'neName', dataIndex: 'neName',
align: 'center', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.neType'), title: t('views.faultManage.activeAlarm.neType'),
dataIndex: 'neType', dataIndex: 'neType',
align: 'center', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.origLevel'), title: t('views.faultManage.activeAlarm.origLevel'),
align: 'left', align: 'left',
dataIndex: 'origSeverity', dataIndex: 'origSeverity',
key: 'origSeverity', key: 'origSeverity',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmCode'), title: t('views.faultManage.activeAlarm.alarmCode'),
dataIndex: 'alarmCode', dataIndex: 'alarmCode',
align: 'center', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmTitle'), title: t('views.faultManage.activeAlarm.alarmTitle'),
dataIndex: 'alarmTitle', dataIndex: 'alarmTitle',
align: 'left', align: 'left',
width: 5, width: 200,
}, },
{ {
title: t('views.faultManage.activeAlarm.eventTime'), title: t('views.faultManage.activeAlarm.eventTime'),
dataIndex: 'eventTime', dataIndex: 'eventTime',
align: 'center', align: 'left',
sorter: (a: any, b: any) => 1, sorter: (a: any, b: any) => 1,
width: 5, width: 150,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmType'), title: t('views.faultManage.activeAlarm.alarmType'),
dataIndex: 'alarmType', dataIndex: 'alarmType',
key: 'alarmType', key: 'alarmType',
align: 'left', align: 'left',
width: 5, width: 120,
},
{
title: t('views.faultManage.activeAlarm.pvFlag'),
dataIndex: 'pvFlag',
align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.clearUser'), title: t('views.faultManage.activeAlarm.clearUser'),
dataIndex: 'clearUser', dataIndex: 'clearUser',
align: 'left', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.clearType'), title: t('views.faultManage.activeAlarm.clearType'),
dataIndex: 'clearType', dataIndex: 'clearType',
key: 'clearType', key: 'clearType',
align: 'left', align: 'left',
width: 5, width: 120,
}, },
{ {
title: t('views.faultManage.activeAlarm.clearTime'), title: t('views.faultManage.activeAlarm.clearTime'),
dataIndex: 'clearTime', dataIndex: 'clearTime',
align: 'left', align: 'left',
sorter: (a: any, b: any) => 1, sorter: (a: any, b: any) => 1,
width: 5, width: 150,
}, },
{ {
title: t('views.faultManage.activeAlarm.ackState'), title: t('views.faultManage.activeAlarm.ackState'),
dataIndex: 'ackState', dataIndex: 'ackState',
key: 'ackState', key: 'ackState',
align: 'left', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('views.faultManage.activeAlarm.ackUser'), title: t('views.faultManage.activeAlarm.ackUser'),
dataIndex: 'ackUser', dataIndex: 'ackUser',
align: 'left', align: 'left',
width: 5, width: 100,
}, },
{ {
title: t('common.operate'), title: t('common.operate'),
key: 'alarm_id', key: 'alarm_id',
align: 'center', align: 'left',
fixed: 'right', fixed: 'right',
width: 5, width: 120,
}, },
]; ];
@@ -648,7 +642,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row> <a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24"> <a-col :lg="6" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.alarmCode')" :label="t('views.faultManage.activeAlarm.alarmCode')"
@@ -688,22 +682,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<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.pv_flag"
: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-col :lg="6" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.alarmType')" :label="t('views.faultManage.activeAlarm.alarmType')"
@@ -804,12 +783,12 @@ onMounted(() => {
:data-source="tableState.data" :data-source="tableState.data"
:size="tableState.size" :size="tableState.size"
:row-selection="{ :row-selection="{
columnWidth: 3, columnWidth: 48,
selectedRowKeys: state.selectedRowKeys, selectedRowKeys: state.selectedRowKeys,
onChange: onSelectChange, onChange: onSelectChange,
}" }"
:pagination="tablePagination" :pagination="tablePagination"
:scroll="{ x: tableColumns.length * 120, y: 400 }" :scroll="{ x: tableColumns.length * 150, y: 400 }"
> >
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'origSeverity'"> <template v-if="column.key === 'origSeverity'">
@@ -863,6 +842,7 @@ onMounted(() => {
@ok="fnModalOk" @ok="fnModalOk"
:ok-text="t('views.faultManage.activeAlarm.confirm')" :ok-text="t('views.faultManage.activeAlarm.confirm')"
@cancel="fnModalCancel" @cancel="fnModalCancel"
:footer="null"
> >
<a-form <a-form
name="modalStateFrom" name="modalStateFrom"
@@ -946,15 +926,6 @@ onMounted(() => {
</a-row> </a-row>
<a-row> <a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.pvFlag')"
name="pvFlag"
>
{{ modalState.from.pvFlag }}
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.alarmType')" :label="t('views.faultManage.activeAlarm.alarmType')"
@@ -973,14 +944,6 @@ onMounted(() => {
{{ modalState.from.locationInfo }} {{ modalState.from.locationInfo }}
</a-form-item> </a-form-item>
<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-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.origLevel')" :label="t('views.faultManage.activeAlarm.origLevel')"
@@ -1019,7 +982,10 @@ onMounted(() => {
:label="t('views.faultManage.activeAlarm.clearType')" :label="t('views.faultManage.activeAlarm.clearType')"
name="clearType" name="clearType"
> >
{{ modalState.from.clearType }} <DictTag
:options="dict.activeClearType"
:value="modalState.from.clearType"
/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
@@ -1046,7 +1012,10 @@ onMounted(() => {
:label="t('views.faultManage.activeAlarm.ackState')" :label="t('views.faultManage.activeAlarm.ackState')"
name="ackState" name="ackState"
> >
{{ modalState.from.ackState }} <DictTag
:options="dict.activeAckState"
:value="modalState.from.ackState"
/>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>