---活动告警,历史告警,故障通用设置

src/views/faultManage/active-alarm/index.vue

@@ -16,9 +16,12 @@ import {
   clearAlarm,
   showPass,
   getPass,
+  exportAll
 } from '@/api/faultManage/actAlarm';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
+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 { t } = useI18n();
@@ -145,7 +148,7 @@ let tableColumns: ColumnsType = [
   {
     title: t('views.faultManage.activeAlarm.origLevel'),
     align: 'center',
-    key:'origSeverity',
+    key: 'origSeverity',
   },
   {
     title: t('views.faultManage.activeAlarm.alarmCode'),
@@ -161,6 +164,7 @@ let tableColumns: ColumnsType = [
     title: t('views.faultManage.activeAlarm.eventTime'),
     dataIndex: 'eventTime',
     align: 'center',
+    sorter: true,
   },
   {
     title: t('views.faultManage.activeAlarm.alarmType'),
@@ -194,11 +198,32 @@ let tableColumns: ColumnsType = [
     title: t('views.faultManage.activeAlarm.clearType'),
     dataIndex: 'clearType',
     align: 'center',
+    customRender(opt) {
+      let clearType: any = {
+        0: '未清除',
+        1: '自动清除',
+        2: '手动清除',
+      };
+      if (clearType[opt.value]) {
+        return clearType[opt.value];
+      }
+      return opt.value;
+    },
   },
   {
     title: t('views.faultManage.activeAlarm.ackState'),
     dataIndex: 'ackState',
     align: 'center',
+    customRender(opt) {
+      let ackState: any = {
+        0: '未确认',
+        1: '已确认',
+      };
+      if (ackState[opt.value]) {
+        return ackState[opt.value];
+      }
+      return opt.value;
+    },
   },
   {
     title: t('views.faultManage.activeAlarm.ackUser'),
@@ -212,6 +237,9 @@ let tableColumns: ColumnsType = [
   },
 ];
 
+// //监听点击的是升序还是降序,还是取消排序
+// const change= (pagination, filters, sorter) => {console.log(sorter)}
+
 /**帮助文档表格字段列 */
 let alarmTableColumns: ColumnsType = [
   {
@@ -368,12 +396,16 @@ type ModalStateType = {
   visibleByEdit: boolean;
   /**显示过滤设置是否显示 */
   visibleByShowSet: boolean;
+  /**个性化设置置是否显示 */
+  visibleByMyselfSet: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
   from: Record<string, any>;
   /**表单数据 */
   showSetFrom: Record<string, any>;
+  // /**表单数据 */
+  // myselfSetFrom: Record<string, any>;
   /**确定按钮 loading */
   confirmLoading: boolean;
 };
@@ -383,6 +415,7 @@ let modalState: ModalStateType = reactive({
   visibleByView: false,
   visibleByEdit: false,
   visibleByShowSet: false,
+  visibleByMyselfSet: false,
   title: '全部信息',
   from: {
     alarmId: '',
@@ -417,6 +450,9 @@ let modalState: ModalStateType = reactive({
     alarm_code: '',
     pv_flag: '',
   },
+  // myselfSetFrom:{
+
+  // }
   confirmLoading: false,
 });
 
@@ -541,7 +577,7 @@ const onSelectChange = (
 };
 
 /**
- * 选中行后的取消确认
+ * 选中行后的取消确认告警
  */
 function fnCancelConfirm() {
   Modal.confirm({
@@ -642,6 +678,34 @@ function fnShowSet() {
     }
   });
 }
+
+/**
+ * 导出全部
+ */
+function fnExportAll(){
+  const key = 'exportAlarm';
+  message.loading({ content: '请稍等...', key });
+  exportAll(queryParams)
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: `已完成导出`,
+            key,
+            duration: 3,
+          });
+          writeSheet(res.data, 'alarm').then(fileBlob =>
+            saveAs(fileBlob, `alarm_${Date.now()}.xlsx`)
+          );
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            key,
+            duration: 3,
+          });
+        }
+      })
+
+}
 /**
  * 对话框弹出关闭执行函数
  * 进行表达规则校验
@@ -874,6 +938,11 @@ onMounted(() => {
             <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>
 
@@ -960,7 +1029,9 @@ onMounted(() => {
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'origSeverity'">
-            <a-tag :color="profile.color[record.origSeverity]">{{record.origSeverity}}</a-tag>
+            <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">
@@ -1328,7 +1399,7 @@ onMounted(() => {
       </a-form>
     </a-modal>
 
-    <!-- 显示过滤 -->
+    <!-- 显示过滤框 -->
     <a-modal
       width="800px"
       :keyboard="false"
@@ -1422,6 +1493,101 @@ onMounted(() => {
         </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="设置"
+      @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="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>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-modal>
   </PageContainer>
 </template>
 

src/views/faultManage/fault-setting/index.vue

@@ -1,11 +1,306 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from '@ant-design-vue/pro-layout';
+import { Form, Modal, message } from 'ant-design-vue/lib';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import {
+  getForwardSet,
+  getAlarmSet,
+  updateAlarmSet,
+  updateForwardSet,
+} from '@/api/faultManage/faultSetting';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+const route = useRoute();
 
-const msg = ref<string>('愿这世间美好与你环环相扣');
+/**路由标题 */
+let title = ref<string>((route.meta.title as string) ?? '标题');
+
+/**对象信息状态类型 */
+type ModalStateType = {
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**表单数据 loading */
+  fromLoading: boolean;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**告警设置信息状态 */
+let alarmState: ModalStateType = reactive({
+  title: '告警设置',
+  from: {
+    historyDuration: '',
+    unit: 'day',
+    syncTaskPeriod: '',
+    alarmStart: '',
+    alarmEnd: '',
+  },
+  fromLoading: true,
+  confirmLoading: true,
+});
+
+/**告警设置信息内表单属性和校验规则 */
+const alarmStateFrom = Form.useForm(
+  alarmState.from,
+  reactive({
+    historyDuration: [
+      {
+        required: true,
+        trigger: 'blur',
+        message: '请输入日志保存时间,最少15天',
+      },
+    ],
+    syncTaskPeriod: [
+      {
+        required: true,
+        trigger: 'blur',
+        message: '请输入告警同步周期',
+      },
+    ],
+    alarmStart: [
+      {
+        required: true,
+        trigger: 'blur',
+        message: '请选择告警同步开始时间',
+      },
+    ],
+    alarmEnd: [
+      {
+        required: true,
+        trigger: 'blur',
+        message: '请选择告警同步结束时间',
+      },
+    ],
+  })
+);
+
+/**告警设置保存 */
+function fnFormLogSetFinish() {
+  alarmStateFrom.validate().then(() => {
+    alarmState.confirmLoading = true;
+    const from = toRaw(alarmState.from);
+    updateAlarmSet(from)
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS && res.data > 0) {
+          message.success(`告警设置保存成功`, 3);
+        } else {
+          message.warning(`告警设置无变更`, 3);
+        }
+      })
+      .finally(() => {
+        alarmState.confirmLoading = false;
+      });
+  });
+}
+
+/**告警前转接口对象信息状态 */
+let forwardState: ModalStateType = reactive({
+  title: '告警前转接口设置',
+  from: {
+    interface: 'email',
+    forObject: '',
+  },
+  fromLoading: true,
+  confirmLoading: true,
+});
+
+/**告警前转接口对象信息内表单属性和校验规则 */
+const forwardStateFrom = Form.useForm(
+  forwardState.from,
+  reactive({
+    forObject: [
+      {
+        required: true,
+        message: '请输入前转对象',
+      },
+    ],
+  })
+);
+
+/**告警前转接口对象保存 */
+function fnFormForwardFinish() {
+  forwardStateFrom.validate().then(() => {
+    forwardState.confirmLoading = true;
+    const from = toRaw(forwardState.from);
+    updateForwardSet(from)
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success(`告警前转接口设置保存成功`, 3);
+        } else {
+          message.warning(`告警前转接口设置无变更`, 3);
+        }
+      })
+      .finally(() => {
+        forwardState.confirmLoading = false;
+      });
+  });
+}
+
+onMounted(() => {
+  Promise.allSettled([getAlarmSet(), getForwardSet()]).then(resArr => {
+    // 查询告警设置
+    if (resArr[0].status === 'fulfilled') {
+      const result = resArr[0].value;
+      if (result.code === RESULT_CODE_SUCCESS) {
+        alarmState.from = Object.assign(alarmState.from, result.data);
+        alarmState.fromLoading = false;
+        alarmState.confirmLoading = false;
+      }
+    }
+    // 查询告警前转接口设置
+    if (resArr[1].status === 'fulfilled') {
+      const result = resArr[1].value;
+      if (result.code === RESULT_CODE_SUCCESS) {
+        forwardState.from = Object.assign(forwardState.from, result.data);
+        forwardState.fromLoading = false;
+        forwardState.confirmLoading = false;
+      }
+    }
+  });
+});
 </script>
 
 <template>
-  <h1>{{ msg }}</h1>
+  <PageContainer :title="title">
+    <a-row :gutter="16">
+      <a-col :span="8">
+        <!-- 日志设置 -->
+        <a-card :title="alarmState.title" :loading="alarmState.fromLoading">
+          <template #extra>
+            <a-space :size="8" align="center">
+              <a-button
+                type="primary"
+                :loading="alarmState.confirmLoading"
+                @click.prevent="fnFormLogSetFinish"
+              >
+                <template #icon><SaveOutlined /></template>
+                保存设置
+              </a-button>
+            </a-space>
+          </template>
+          <a-form
+            name="alarmState.from"
+            layout="horizontal"
+            autocomplete="off"
+            :label-col="{ span: 8 }"
+          >
+            <a-form-item
+              label="历史告警保存时间(天)"
+              name="historyDuration"
+              v-bind="alarmStateFrom.validateInfos.historyDuration"
+            >
+              <a-input-number
+                v-model:value="alarmState.from.historyDuration"
+                placeholder="15"
+                :min="15"
+              />
+            </a-form-item>
+            <a-form-item
+              label="告警同步周期单位"
+              name="unit"
+              v-bind="alarmStateFrom.validateInfos.unit"
+            >
+              <a-select v-model:value="alarmState.from.unit">
+                <a-select-option key="hour" value="hour">小时</a-select-option>
+                <a-select-option key="day" value="day">天</a-select-option>
+              </a-select>
+            </a-form-item>
+            <a-form-item
+              label="告警同步周期"
+              name="syncTaskPeriod"
+              v-bind="alarmStateFrom.validateInfos.syncTaskPeriod"
+            >
+              <a-input-number
+                v-model:value="alarmState.from.syncTaskPeriod"
+                placeholder="10"
+                :min="10"
+              />
+            </a-form-item>
+            <a-form-item
+              label="告警同步开始时间"
+              name="alarmStart"
+              v-bind="alarmStateFrom.validateInfos.alarmStart"
+            >
+              <a-date-picker
+                show-time
+                placeholder="Select Time"
+                v-model:value="alarmState.from.alarmStart"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                format="YYYY-MM-DD HH:mm:ss"
+              />
+            </a-form-item>
+            <a-form-item
+              label="告警同步结束时间"
+              name="alarmEnd"
+              v-bind="alarmStateFrom.validateInfos.alarmEnd"
+            >
+              <a-date-picker
+                show-time
+                placeholder="Select Time"
+                v-model:value="alarmState.from.alarmEnd"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                format="YYYY-MM-DD HH:mm:ss"
+              />
+            </a-form-item>
+          </a-form>
+        </a-card>
+      </a-col>
+
+      <a-col :span="8">
+        <!-- 告警前转接口设置-->
+        <a-card :title="forwardState.title" :loading="forwardState.fromLoading">
+          <template #extra>
+            <a-space :size="8" align="center">
+              <a-button
+                type="primary"
+                :loading="forwardState.confirmLoading"
+                @click.prevent="fnFormForwardFinish"
+              >
+                <template #icon><SaveOutlined /></template>
+                保存设置
+              </a-button>
+            </a-space>
+          </template>
+          <a-form
+            name="forwardState"
+            layout="horizontal"
+            autocomplete="off"
+            :label-col="{ span: 8 }"
+          >
+            <a-form-item label="告警前转接口类型" name="interface">
+              <a-select v-model:value="forwardState.from.interface">
+                <a-select-option key="sms" value="sms">SMS</a-select-option>
+                <a-select-option key="email" value="email"
+                  >Email</a-select-option
+                >
+              </a-select>
+            </a-form-item>
+            <a-form-item
+              label="告警前转对象"
+              name="forObject"
+              v-bind="forwardStateFrom.validateInfos.forObject"
+            >
+              <a-input
+                v-model:value="forwardState.from.forObject"
+                allow-clear
+                placeholder="请输入告警前转对象"
+              ></a-input>
+            </a-form-item>
+          </a-form>
+        </a-card>
+      </a-col>
+    </a-row>
+  </PageContainer>
 </template>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.backFile-download {
+  margin-left: 12px;
+  color: #eb2f96;
+  text-decoration: underline;
+}
+</style>