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

2025-03-12 11:05:17 +08:00
parent ac7079b91a
commit ccbea1fc51
3 changed files with 75 additions and 138 deletions
--- a/src/views/faultManage/active-alarm/index.vue
+++ b/src/views/faultManage/active-alarm/index.vue
@@ -145,66 +145,60 @@ let alarmTableState: TabeStateType = reactive({
 let tableColumns: ColumnsType = [
  {
    title: t('views.faultManage.activeAlarm.origLevel'),
-    align: 'center',
+    align: 'left',
    key: 'origSeverity',
    dataIndex: 'origSeverity',
-    width: 5,
+    width: 100,
  },
  {
    title: t('views.faultManage.activeAlarm.alarmTitle'),
    dataIndex: 'alarmTitle',
    align: 'left',
-    width: 5,
+    width: 200,
  },
  {
    title: t('views.faultManage.activeAlarm.neType'),
    dataIndex: 'neType',
-    align: 'center',
-    width: 5,
+    align: 'left',
+    width: 100,
  },
  {
    title: t('views.faultManage.activeAlarm.eventTime'),
    dataIndex: 'eventTime',
-    align: 'center',
+    align: 'left',
    sorter: (a: any, b: any) => 1,
-    width: 5,
+    width: 150,
  },
  {
    title: t('views.faultManage.activeAlarm.alarmCode'),
    dataIndex: 'alarmCode',
-    align: 'center',
-    width: 5,
+    align: 'left',
+    width: 100,
  },
  {
    title: t('views.faultManage.activeAlarm.alarmType'),
    dataIndex: 'alarmType',
    key: 'alarmType',
    align: 'left',
-    width: 5,
+    width: 120,
  },
  {
    title: t('views.faultManage.activeAlarm.neName'),
    dataIndex: 'neName',
-    align: 'center',
-    width: 5,
+    align: 'left',
+    width: 100,
  },
  {
    title: t('views.faultManage.activeAlarm.neId'),
    dataIndex: 'neId',
-    align: 'center',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.pvFlag'),
-    dataIndex: 'pvFlag',
-    align: 'center',
-    width: 5,
+    align: 'left',
+    width: 100,
  },
  {
    title: t('views.faultManage.activeAlarm.alarmId'),
    dataIndex: 'alarmId',
-    align: 'center',
-    width: 5,
+    align: 'left',
+    width: 100,
  },

  {
@@ -212,20 +206,20 @@ let tableColumns: ColumnsType = [
    dataIndex: 'ackState',
    key: 'ackState',
    align: 'left',
-    width: 5,
+    width: 100,
  },
  {
    title: t('views.faultManage.activeAlarm.ackUser'),
    dataIndex: 'ackUser',
    align: 'left',
-    width: 5,
+    width: 100,
  },
  {
    title: t('common.operate'),
    key: 'alarm_id',
-    align: 'center',
+    align: 'left',
    fixed: 'right',
-    width: 5,
+    width: 100,
  },
 ];

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

@@ -626,7 +618,7 @@ onMounted(() => {
            </a-dropdown>
          </a-tooltip>
          <TableColumnsDnd
-            cache-id="alarmActive"
+            cache-id="alarmEvent"
            :columns="tableColumns"
            v-model:columns-dnd="tableColumnsDnd"
          ></TableColumnsDnd>
--- a/src/views/faultManage/history-alarm/index.vue
+++ b/src/views/faultManage/history-alarm/index.vue
@@ -125,105 +125,99 @@ let tableColumns: ColumnsType = [
  {
    title: t('views.faultManage.activeAlarm.alarmId'),
    dataIndex: 'alarmId',
-    align: 'center',
-    width: 5,
+    align: 'left',
+    width: 100,
  },
  {
    title: t('views.faultManage.activeAlarm.neId'),
    dataIndex: 'neId',
-    align: 'center',
-    width: 5,
+    align: 'left',
+    width: 100,
  },
  {
    title: t('views.faultManage.activeAlarm.neName'),
    dataIndex: 'neName',
-    align: 'center',
-    width: 5,
+    align: 'left',
+    width: 100,
  },
  {
    title: t('views.faultManage.activeAlarm.neType'),
    dataIndex: 'neType',
-    align: 'center',
-    width: 5,
+    align: 'left',
+    width: 100,
  },
  {
    title: t('views.faultManage.activeAlarm.origLevel'),
    align: 'left',
    dataIndex: 'origSeverity',
    key: 'origSeverity',
-    width: 5,
+    width: 100,
  },
  {
    title: t('views.faultManage.activeAlarm.alarmCode'),
    dataIndex: 'alarmCode',
-    align: 'center',
-    width: 5,
+    align: 'left',
+    width: 100,
  },
  {
    title: t('views.faultManage.activeAlarm.alarmTitle'),
    dataIndex: 'alarmTitle',
    align: 'left',
-    width: 5,
+    width: 200,
  },
  {
    title: t('views.faultManage.activeAlarm.eventTime'),
    dataIndex: 'eventTime',
-    align: 'center',
+    align: 'left',
    sorter: (a: any, b: any) => 1,
-    width: 5,
+    width: 150,
  },
  {
    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,
+    width: 120,
  },
  {
    title: t('views.faultManage.activeAlarm.clearUser'),
    dataIndex: 'clearUser',
    align: 'left',
-    width: 5,
+    width: 100,
  },
  {
    title: t('views.faultManage.activeAlarm.clearType'),
    dataIndex: 'clearType',
    key: 'clearType',
    align: 'left',
-    width: 5,
+    width: 120,
  },
  {
    title: t('views.faultManage.activeAlarm.clearTime'),
    dataIndex: 'clearTime',
    align: 'left',
    sorter: (a: any, b: any) => 1,
-    width: 5,
+    width: 150,
  },
  {
    title: t('views.faultManage.activeAlarm.ackState'),
    dataIndex: 'ackState',
    key: 'ackState',
    align: 'left',
-    width: 5,
+    width: 100,
  },
  {
    title: t('views.faultManage.activeAlarm.ackUser'),
    dataIndex: 'ackUser',
    align: 'left',
-    width: 5,
+    width: 100,
  },
  {
    title: t('common.operate'),
    key: 'alarm_id',
-    align: 'center',
+    align: 'left',
    fixed: 'right',
-    width: 5,
+    width: 120,
  },
 ];

@@ -648,7 +642,7 @@ onMounted(() => {
            </a-form-item>
          </a-col>
        </a-row>
-        <a-row>
+        <a-row :gutter="16">
          <a-col :lg="6" :md="12" :xs="24">
            <a-form-item
              :label="t('views.faultManage.activeAlarm.alarmCode')"
@@ -688,22 +682,7 @@ onMounted(() => {
            </a-form-item>
          </a-col>
        </a-row>
-        <a-row>
-          <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-row :gutter="16"> 
          <a-col :lg="6" :md="12" :xs="24">
            <a-form-item
              :label="t('views.faultManage.activeAlarm.alarmType')"
@@ -804,12 +783,12 @@ onMounted(() => {
        :data-source="tableState.data"
        :size="tableState.size"
        :row-selection="{
-          columnWidth: 3,
+          columnWidth: 48,
          selectedRowKeys: state.selectedRowKeys,
          onChange: onSelectChange,
        }"
        :pagination="tablePagination"
-        :scroll="{ x: tableColumns.length * 120, y: 400 }"
+        :scroll="{ x: tableColumns.length * 150, y: 400 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'origSeverity'">
@@ -863,6 +842,7 @@ onMounted(() => {
      @ok="fnModalOk"
      :ok-text="t('views.faultManage.activeAlarm.confirm')"
      @cancel="fnModalCancel"
+      :footer="null"
    >
      <a-form
        name="modalStateFrom"
@@ -946,15 +926,6 @@ onMounted(() => {
        </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-form-item
              :label="t('views.faultManage.activeAlarm.alarmType')"
@@ -973,14 +944,6 @@ onMounted(() => {
          {{ modalState.from.locationInfo }}
        </a-form-item>
        <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')"
@@ -1019,7 +982,10 @@ onMounted(() => {
              :label="t('views.faultManage.activeAlarm.clearType')"
              name="clearType"
            >
-              {{ modalState.from.clearType }}
+              <DictTag
+                :options="dict.activeClearType"
+                :value="modalState.from.clearType"
+              />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :xs="24">
@@ -1046,7 +1012,10 @@ onMounted(() => {
              :label="t('views.faultManage.activeAlarm.ackState')"
              name="ackState"
            >
-              {{ modalState.from.ackState }}
+              <DictTag
+                :options="dict.activeAckState"
+                :value="modalState.from.ackState"
+              />
            </a-form-item>
          </a-col>
        </a-row>