add(dms): 生成报警信息和报警详情页面

- 添加报警信息和报警详情的 API 接口
- 实现报警信息和报警详情的列表、新增、修改、删除等功能
master
zch 3 months ago
parent 033b3190a3
commit 84f1169ed5

@ -0,0 +1,77 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { BaseAlarmDetailVO, BaseAlarmDetailForm, BaseAlarmDetailQuery } from '@/api/dms/baseAlarmDetail/types';
/**
* ;
* @param query
* @returns {*}
*/
export const listBaseAlarmDetail = (query?: BaseAlarmDetailQuery): AxiosPromise<BaseAlarmDetailVO[]> => {
return request({
url: '/dms/baseAlarmDetail/list',
method: 'get',
params: query
});
};
/**
* ;
* @param alarmDetailId
*/
export const getBaseAlarmDetail = (alarmDetailId: string | number): AxiosPromise<BaseAlarmDetailVO> => {
return request({
url: '/dms/baseAlarmDetail/' + alarmDetailId,
method: 'get'
});
};
/**
* ;
* @param data
*/
export const addBaseAlarmDetail = (data: BaseAlarmDetailForm) => {
return request({
url: '/dms/baseAlarmDetail',
method: 'post',
data: data
});
};
/**
* ;
* @param data
*/
export const updateBaseAlarmDetail = (data: BaseAlarmDetailForm) => {
return request({
url: '/dms/baseAlarmDetail',
method: 'put',
data: data
});
};
/**
* ;
* @param alarmDetailId
*/
export const delBaseAlarmDetail = (alarmDetailId: string | number | Array<string | number>) => {
return request({
url: '/dms/baseAlarmDetail/' + alarmDetailId,
method: 'delete'
});
};
/**
* ;
* @param query
* @returns {*}
*/
export function getBaseAlarmDetailList (query) {
return request({
url: '/dms/baseAlarmDetail/getBaseAlarmDetailList',
method: 'get',
params: query
});
};

@ -0,0 +1,152 @@
export interface BaseAlarmDetailVO {
/**
* ID
*/
alarmDetailId: string | number;
/**
* hw_alarm_infoalarm_info_id
*/
alarmInfoId: string | number;
/**
* ID
*/
modeFunctionId: string | number;
/**
*
*/
functionName: string;
/**
*
*/
functionIdentifier: string | number;
/**
*
*/
functionValue: string;
/**
*
*/
monitorTime: string;
/**
*
*/
alarmContent: string;
/**
*
*/
modeFunctionName: string;
}
export interface BaseAlarmDetailForm extends BaseEntity {
/**
* ID
*/
alarmDetailId?: string | number;
/**
* hw_alarm_infoalarm_info_id
*/
alarmInfoId?: string | number;
/**
* ID
*/
modeFunctionId?: string | number;
/**
*
*/
functionName?: string;
/**
*
*/
functionIdentifier?: string | number;
/**
*
*/
functionValue?: string;
/**
*
*/
monitorTime?: string;
/**
*
*/
alarmContent?: string;
/**
*
*/
modeFunctionName?: string;
}
export interface BaseAlarmDetailQuery extends PageQuery {
/**
* ID
*/
alarmDetailId?: string | number;
/**
* hw_alarm_infoalarm_info_id
*/
alarmInfoId?: string | number;
/**
* ID
*/
modeFunctionId?: string | number;
/**
*
*/
functionName?: string;
/**
*
*/
functionIdentifier?: string | number;
/**
*
*/
functionValue?: string;
/**
*
*/
monitorTime?: string;
/**
*
*/
params?: any;
/**
*
*/
alarmContent?: string;
/**
*
*/
modeFunctionName?: string;
}

@ -0,0 +1,77 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { BaseAlarmInfoVO, BaseAlarmInfoForm, BaseAlarmInfoQuery } from '@/api/dms/baseAlarmInfo/types';
/**
*
* @param query
* @returns {*}
*/
export const listBaseAlarmInfo = (query?: BaseAlarmInfoQuery): AxiosPromise<BaseAlarmInfoVO[]> => {
return request({
url: '/dms/baseAlarmInfo/list',
method: 'get',
params: query
});
};
/**
*
* @param alarmInfoId
*/
export const getBaseAlarmInfo = (alarmInfoId: string | number): AxiosPromise<BaseAlarmInfoVO> => {
return request({
url: '/dms/baseAlarmInfo/' + alarmInfoId,
method: 'get'
});
};
/**
*
* @param data
*/
export const addBaseAlarmInfo = (data: BaseAlarmInfoForm) => {
return request({
url: '/dms/baseAlarmInfo',
method: 'post',
data: data
});
};
/**
*
* @param data
*/
export const updateBaseAlarmInfo = (data: BaseAlarmInfoForm) => {
return request({
url: '/dms/baseAlarmInfo',
method: 'put',
data: data
});
};
/**
*
* @param alarmInfoId
*/
export const delBaseAlarmInfo = (alarmInfoId: string | number | Array<string | number>) => {
return request({
url: '/dms/baseAlarmInfo/' + alarmInfoId,
method: 'delete'
});
};
/**
*
* @param query
* @returns {*}
*/
export function getBaseAlarmInfoList (query) {
return request({
url: '/dms/baseAlarmInfo/getBaseAlarmInfoList',
method: 'get',
params: query
});
};

@ -0,0 +1,235 @@
export interface BaseAlarmInfoVO {
/**
* ID
*/
alarmInfoId: string | number;
/**
* 13线
*/
alarmInfoType: string;
/**
* 1alarm_rulealarm_rule_id3hw_offline_ruleoffline_rule_id
*/
alarmReleatedId: string | number;
/**
* IDhw_devicedevice_id
*/
deviceId: string | number;
/**
*
*/
alarmContent: string;
/**
* hw_alarm_levelalarm_level_id123
*/
alarmLevelId: string | number;
/**
* hw_alarm_typealarm_type_id12
*/
alarmTypeId: string | number;
/**
* 12
*/
alarmMode: string;
/**
* 0 1 2
*/
alarmStatus: string;
/**
*
*/
alarmBeginTime: string;
/**
*
*/
alarmEndTime: string;
/**
*
*/
handleTime: string;
/**
*
*/
alarmTypeName: string;//join映射字段
/**
*
*/
alarmLevelName: string;//join映射字段
releateadContent: string;//join映射字段,预留字段
}
export interface BaseAlarmInfoForm extends BaseEntity {
/**
* ID
*/
alarmInfoId?: string | number;
/**
* 13线
*/
alarmInfoType?: string;
/**
* 1alarm_rulealarm_rule_id3hw_offline_ruleoffline_rule_id
*/
alarmReleatedId?: string | number;
/**
* IDhw_devicedevice_id
*/
deviceId?: string | number;
/**
*
*/
alarmContent?: string;
/**
* hw_alarm_levelalarm_level_id123
*/
alarmLevelId?: string | number;
/**
* hw_alarm_typealarm_type_id12
*/
alarmTypeId?: string | number;
/**
* 12
*/
alarmMode?: string;
/**
* 0 1 2
*/
alarmStatus?: string;
/**
*
*/
alarmBeginTime?: string;
/**
*
*/
alarmEndTime?: string;
/**
*
*/
handleTime?: string;
/**
*
*/
alarmTypeName?: string;//join映射字段
/**
*
*/
alarmLevelName?: string;//join映射字段
releateadContent?: string;//join映射字段,预留字段
}
export interface BaseAlarmInfoQuery extends PageQuery {
/**
* ID
*/
alarmInfoId?: string | number;
/**
* 13线
*/
alarmInfoType?: string;
/**
* 1alarm_rulealarm_rule_id3hw_offline_ruleoffline_rule_id
*/
alarmReleatedId?: string | number;
/**
* IDhw_devicedevice_id
*/
deviceId?: string | number;
/**
*
*/
alarmContent?: string;
/**
* hw_alarm_levelalarm_level_id123
*/
alarmLevelId?: string | number;
/**
* hw_alarm_typealarm_type_id12
*/
alarmTypeId?: string | number;
/**
* 12
*/
alarmMode?: string;
/**
* 0 1 2
*/
alarmStatus?: string;
/**
*
*/
alarmBeginTime?: string;
/**
*
*/
alarmEndTime?: string;
/**
*
*/
handleTime?: string;
/**
*
*/
params?: any;
/**
*
*/
alarmTypeName?: string;//join映射字段
/**
*
*/
alarmLevelName?: string;//join映射字段
releateadContent?: string;//join映射字段,预留字段
}

@ -0,0 +1,328 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<!-- <el-form-item label="报警详细信息ID" prop="alarmDetailId">
<el-input v-model="queryParams.alarmDetailId" placeholder="请输入报警详细信息ID" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="关联hw_alarm_info的alarm_info_id" prop="alarmInfoId">
<el-input v-model="queryParams.alarmInfoId" placeholder="请输入关联hw_alarm_info的alarm_info_id" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="设备模型功能ID" prop="modeFunctionId">
<el-input v-model="queryParams.modeFunctionId" placeholder="请输入设备模型功能ID" clearable @keyup.enter="handleQuery" />
</el-form-item>-->
<el-form-item label="功能名称" prop="functionName">
<el-input v-model="queryParams.functionName" placeholder="请输入功能名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<!-- <el-form-item label="标识符" prop="functionIdentifier">
<el-input v-model="queryParams.functionIdentifier" placeholder="请输入标识符" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="值" prop="functionValue">
<el-input v-model="queryParams.functionValue" placeholder="请输入值" clearable @keyup.enter="handleQuery" />
</el-form-item>-->
<el-form-item label="监测时间" prop="monitorTime">
<el-date-picker clearable
v-model="queryParams.monitorTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择监测时间"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"></el-button>
<el-button icon="Refresh" @click="resetQuery"></el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['dms:baseAlarmDetail:add']"></el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['dms:baseAlarmDetail:edit']"></el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['dms:baseAlarmDetail:remove']"></el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['dms:baseAlarmDetail:export']"></el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="baseAlarmDetailList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="报警详细信息" align="center" prop="alarmDetailId" v-if="columns[0].visible"/>
<el-table-column label="报警信息" align="center" prop="alarmContent" v-if="columns[1].visible"/>
<el-table-column label="设备模型功能" align="center" prop="modeFunctionName" v-if="columns[2].visible"/>
<el-table-column label="功能名称" align="center" prop="functionName" v-if="columns[3].visible"/>
<el-table-column label="标识符" align="center" prop="functionIdentifier" v-if="columns[4].visible"/>
<el-table-column label="值" align="center" prop="functionValue" v-if="columns[5].visible"/>
<el-table-column label="监测时间" align="center" prop="monitorTime" width="180" v-if="columns[6].visible">
<template #default="scope">
<span>{{ parseTime(scope.row.monitorTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['dms:baseAlarmDetail:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['dms:baseAlarmDetail:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<!-- 添加或修改报警详情信息;对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="baseAlarmDetailFormRef" :model="form" :rules="rules" label-width="80px">
<!-- <el-form-item label="报警详细信息ID" prop="alarmDetailId">
<el-input v-model="form.alarmDetailId" placeholder="请输入报警详细信息ID" />
</el-form-item>-->
<!-- <el-form-item label="关联hw_alarm_info的alarm_info_id" prop="alarmInfoId">
<el-input v-model="form.alarmInfoId" placeholder="请输入关联hw_alarm_info的alarm_info_id" />
</el-form-item>-->
<el-form-item label="设备模型功能" prop="modeFunctionId">
<!-- <el-input v-model="form.modeFunctionId" placeholder="请输入设备模型功能" />-->
<el-select v-model="form.modeFunctionId" placeholder="请选择设备模型功能">
<el-option v-for="item in modeFunctionOptions"
:key="item.modeFunctionId"
:label="item.modeFunctionName"
:value="item.modeFunctionId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="功能名称" prop="functionName">
<el-input v-model="form.functionName" placeholder="请输入功能名称" />
</el-form-item>
<el-form-item label="标识符" prop="functionIdentifier">
<el-input v-model="form.functionIdentifier" placeholder="请输入标识符" />
</el-form-item>
<el-form-item label="值" prop="functionValue">
<el-input v-model="form.functionValue" placeholder="请输入值" />
</el-form-item>
<el-form-item label="监测时间" prop="monitorTime">
<el-date-picker clearable
v-model="form.monitorTime"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择监测时间">
</el-date-picker>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="BaseAlarmDetail" lang="ts">
import { listBaseAlarmDetail, getBaseAlarmDetail, delBaseAlarmDetail, addBaseAlarmDetail, updateBaseAlarmDetail } from '@/api/dms/baseAlarmDetail';
import { BaseAlarmDetailVO, BaseAlarmDetailQuery, BaseAlarmDetailForm } from '@/api/dms/baseAlarmDetail/types';
import {getDmsDeviceModeFunctionList} from "@/api/dms/deviceModeFunction";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const baseAlarmDetailList = ref<BaseAlarmDetailVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const baseAlarmDetailFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
//
const columns = ref<FieldOption[]>([
{ key: 0, label: `报警详细信息ID`, visible: false },
{ key: 1, label: `报警信息`, visible: false },
{ key: 2, label: `设备模型功能`, visible: true },
{ key: 3, label: `功能名称`, visible: true },
{ key: 4, label: `标识符`, visible: true },
{ key: 5, label: ``, visible: true },
{ key: 6, label: `监测时间`, visible: true },
]);
const initFormData: BaseAlarmDetailForm = {
alarmDetailId: undefined,
alarmInfoId: undefined,
modeFunctionId: undefined,
functionName: undefined,
functionIdentifier: undefined,
functionValue: undefined,
monitorTime: undefined,
alarmContent: undefined,
modeFunctionName: undefined,
}
const data = reactive<PageData<BaseAlarmDetailForm, BaseAlarmDetailQuery>>({
form: {...initFormData},
queryParams: {
pageNum: 1,
pageSize: 10,
alarmDetailId: undefined,
alarmInfoId: undefined,
modeFunctionId: undefined,
functionName: undefined,
functionIdentifier: undefined,
functionValue: undefined,
monitorTime: undefined,
alarmContent: undefined,
modeFunctionName: undefined,
params: {
}
},
rules: {
/* alarmDetailId: [
{ required: true, message: "报警详细信息ID不能为空", trigger: "blur" }
],*/
/* alarmInfoId: [
{ required: true, message: "报警信息", trigger: "blur" }
],*/
modeFunctionId: [
{ required: true, message: "设备模型功能不能为空", trigger: "blur" }
],
functionName: [
{ required: true, message: "功能名称不能为空", trigger: "blur" }
],
/* functionIdentifier: [
{ required: true, message: "标识符不能为空", trigger: "blur" }
],
functionValue: [
{ required: true, message: "值不能为空", trigger: "blur" }
],
monitorTime: [
{ required: true, message: "监测时间不能为空", trigger: "blur" }
]*/
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询报警详情信息;列表 */
const getList = async () => {
loading.value = true;
const res = await listBaseAlarmDetail(queryParams.value);
baseAlarmDetailList.value = res.rows;
total.value = res.total;
loading.value = false;
}
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
}
/** 表单重置 */
const reset = () => {
form.value = {...initFormData};
baseAlarmDetailFormRef.value?.resetFields();
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
}
/** 多选框选中数据 */
const handleSelectionChange = (selection: BaseAlarmDetailVO[]) => {
ids.value = selection.map(item => item.alarmDetailId);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = "添加报警详情信息;";
}
/** 修改按钮操作 */
const handleUpdate = async (row?: BaseAlarmDetailVO) => {
reset();
const _alarmDetailId = row?.alarmDetailId || ids.value[0]
const res = await getBaseAlarmDetail(_alarmDetailId);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = "修改报警详情信息;";
}
/** 提交按钮 */
const submitForm = () => {
baseAlarmDetailFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.alarmDetailId) {
await updateBaseAlarmDetail(form.value).finally(() => buttonLoading.value = false);
} else {
await addBaseAlarmDetail(form.value).finally(() => buttonLoading.value = false);
}
proxy?.$modal.msgSuccess("操作成功");
dialog.visible = false;
await getList();
}
});
}
/** 删除按钮操作 */
const handleDelete = async (row?: BaseAlarmDetailVO) => {
const _alarmDetailIds = row?.alarmDetailId || ids.value;
await proxy?.$modal.confirm('是否确认删除报警详情信息;编号为"' + _alarmDetailIds + '"的数据项?').finally(() => loading.value = false);
await delBaseAlarmDetail(_alarmDetailIds);
proxy?.$modal.msgSuccess("删除成功");
await getList();
}
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download('dms/baseAlarmDetail/export', {
...queryParams.value
}, `baseAlarmDetail_${new Date().getTime()}.xlsx`)
}
//
let modeFunctionOptions = ref([]);
const getModeFunctionOptions = async () => {
const res = await getDmsDeviceModeFunctionList(null);
modeFunctionOptions.value = res.data;
}
onMounted(() => {
getModeFunctionOptions();
getList();
});
</script>

@ -0,0 +1,492 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<!-- <el-form-item label="报警信息ID" prop="alarmInfoId">
<el-input v-model="queryParams.alarmInfoId" placeholder="请输入报警信息ID" clearable @keyup.enter="handleQuery" />
</el-form-item>-->
<el-form-item label="报警信息类型" prop="alarmInfoType">
<el-select v-model="queryParams.alarmInfoType" placeholder="请选择报警信息类型" clearable >
<el-option v-for="dict in alarm_info_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<!-- <el-form-item label="报警信息类型" prop="alarmReleatedId">
<el-input v-model="queryParams.alarmReleatedId" placeholder="请输入报警信息类型" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="报警设备ID关联hw_device表的device_id字段" prop="deviceId">
<el-input v-model="queryParams.deviceId" placeholder="请输入报警设备ID关联hw_device表的device_id字段" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="报警级别" prop="alarmLevelId">
<el-input v-model="queryParams.alarmLevelId" placeholder="请输入报警级别" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="报警类型" prop="alarmTypeId">
<el-input v-model="queryParams.alarmTypeId" placeholder="请输入报警类型" clearable @keyup.enter="handleQuery" />
</el-form-item>-->
<el-form-item label="报警方式" prop="alarmMode">
<el-select v-model="queryParams.alarmMode" placeholder="请选择报警方式" clearable >
<el-option v-for="dict in alarm_mode" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="报警状态" prop="alarmStatus">
<el-select v-model="queryParams.alarmStatus" placeholder="请选择报警状态" clearable >
<el-option v-for="dict in alarm_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<!-- <el-form-item label="实际报警开始时间" prop="alarmBeginTime">
<el-date-picker clearable
v-model="queryParams.alarmBeginTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择实际报警开始时间"
/>
</el-form-item>
<el-form-item label="实际报警结束时间" prop="alarmEndTime">
<el-date-picker clearable
v-model="queryParams.alarmEndTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择实际报警结束时间"
/>
</el-form-item>-->
<!-- <el-form-item label="人工处理时间" prop="handleTime">
<el-date-picker clearable
v-model="queryParams.handleTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择人工处理时间"
/>
</el-form-item>-->
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"></el-button>
<el-button icon="Refresh" @click="resetQuery"></el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['dms:baseAlarmInfo:add']"></el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['dms:baseAlarmInfo:edit']"></el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['dms:baseAlarmInfo:remove']"></el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['dms:baseAlarmInfo:export']"></el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="baseAlarmInfoList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="报警信息" align="center" prop="alarmInfoId" v-if="columns[0].visible"/>
<el-table-column label="报警信息类型" align="center" prop="alarmInfoType" v-if="columns[1].visible">
<template #default="scope">
<dict-tag :options="alarm_info_type" :value="scope.row.alarmInfoType"/>
</template>
</el-table-column>
<el-table-column label="报警信息相关" align="center" prop="alarmReleatedId" v-if="columns[2].visible"/>
<el-table-column label="报警设备" align="center" prop="deviceId" v-if="columns[3].visible"/>
<el-table-column label="报警内容" align="center" prop="alarmContent" v-if="columns[4].visible"/>
<el-table-column label="报警级别" align="center" prop="alarmLevelName" v-if="columns[5].visible"/>
<el-table-column label="报警类型" align="center" prop="alarmTypeName" v-if="columns[6].visible"/>
<el-table-column label="报警方式" align="center" prop="alarmMode" v-if="columns[7].visible">
<template #default="scope">
<dict-tag :options="alarm_mode" :value="scope.row.alarmMode"/>
</template>
</el-table-column>
<el-table-column label="报警状态" align="center" prop="alarmStatus" v-if="columns[8].visible">
<template #default="scope">
<dict-tag :options="alarm_status" :value="scope.row.alarmStatus"/>
</template>
</el-table-column>
<el-table-column label="实际报警开始时间" align="center" prop="alarmBeginTime" width="180" v-if="columns[9].visible">
<template #default="scope">
<span>{{ parseTime(scope.row.alarmBeginTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="实际报警结束时间" align="center" prop="alarmEndTime" width="180" v-if="columns[10].visible">
<template #default="scope">
<span>{{ parseTime(scope.row.alarmEndTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="人工处理时间" align="center" prop="handleTime" width="180" v-if="columns[11].visible">
<template #default="scope">
<span>{{ parseTime(scope.row.handleTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['dms:baseAlarmInfo:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['dms:baseAlarmInfo:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<!-- 添加或修改报警信息对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="baseAlarmInfoFormRef" :model="form" :rules="rules" label-width="130px">
<!-- <el-form-item label="报警信息ID" prop="alarmInfoId">
<el-input v-model="form.alarmInfoId" placeholder="请输入报警信息ID" />
</el-form-item>-->
<el-form-item label="报警信息类型" prop="alarmInfoType">
<el-select v-model="form.alarmInfoType" placeholder="请选择报警信息类型">
<el-option
v-for="dict in alarm_info_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="报警信息相关;" prop="alarmReleatedId">
<el-input v-model="form.alarmReleatedId" placeholder="请输入报警信息类型是1关联表alarm_rule的字段alarm_rule_id报警信息类型是3关联表hw_offline_rule的字段offline_rule_id" />
</el-form-item>-->
<el-form-item label="报警设备" prop="deviceId">
<el-input v-model="form.deviceId" placeholder="请输入报警设备" />
</el-form-item>
<el-form-item label="报警内容">
<editor v-model="form.alarmContent" :min-height="192"/>
</el-form-item>
<el-form-item label="报警级别" prop="alarmLevelId">
<!-- <el-input v-model="form.alarmLevelId" placeholder="请输入报警级别" />-->
<el-select v-model="form.alarmLevelId" placeholder="请选择报警级别">
<el-option
v-for="item in alarmLevelOptions"
:key="item.alarmLevelId"
:label="item.alarmLevelName"
:value="item.alarmLevelId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="报警类型" prop="alarmTypeId">
<!-- <el-input v-model="form.alarmTypeId" placeholder="请输入报警类型," />-->
<el-select v-model="form.alarmTypeId" placeholder="请选择报警类型">
<el-option
v-for="item in alarmTypeOptions"
:key="item.alarmTypeId"
:label="item.alarmTypeName"
:value="item.alarmTypeId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="报警方式" prop="alarmMode">
<el-select v-model="form.alarmMode" placeholder="请选择报警方式">
<el-option
v-for="dict in alarm_mode"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="报警状态" prop="alarmStatus">
<el-select v-model="form.alarmStatus" placeholder="请选择报警状态">
<el-option
v-for="dict in alarm_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="实际报警开始时间" prop="alarmBeginTime">
<el-date-picker clearable
v-model="form.alarmBeginTime"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择实际报警开始时间">
</el-date-picker>
</el-form-item>
<el-form-item label="实际报警结束时间" prop="alarmEndTime">
<el-date-picker clearable
v-model="form.alarmEndTime"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择实际报警结束时间">
</el-date-picker>
</el-form-item>
<el-form-item label="人工处理时间" prop="handleTime">
<el-date-picker clearable
v-model="form.handleTime"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择人工处理时间">
</el-date-picker>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="BaseAlarmInfo" lang="ts">
import {
listBaseAlarmInfo,
getBaseAlarmInfo,
delBaseAlarmInfo,
addBaseAlarmInfo,
updateBaseAlarmInfo,
getBaseAlarmInfoList
} from '@/api/dms/baseAlarmInfo';
import { BaseAlarmInfoVO, BaseAlarmInfoQuery, BaseAlarmInfoForm } from '@/api/dms/baseAlarmInfo/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { alarm_mode, alarm_info_type, alarm_status } = toRefs<any>(proxy?.useDict('alarm_mode', 'alarm_info_type', 'alarm_status'));
const baseAlarmInfoList = ref<BaseAlarmInfoVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const baseAlarmInfoFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
//
const columns = ref<FieldOption[]>([
{ key: 0, label: `报警信息ID`, visible: false },
{ key: 1, label: `报警信息类型`, visible: true },
{ key: 2, label: `报警信息类型相关;`, visible: false },
{ key: 3, label: `报警设备`, visible: true },
{ key: 4, label: `报警内容`, visible: true },
{ key: 5, label: `报警级别`, visible: true },
{ key: 6, label: `报警类型,`, visible: true },
{ key: 7, label: `报警方式`, visible: true },
{ key: 8, label: `报警状态`, visible: true },
{ key: 9, label: `实际报警开始时间`, visible: true },
{ key: 10, label: `实际报警结束时间`, visible: true },
{ key: 11, label: `人工处理时间`, visible: true },
{ key: 12, label: `创建时间`, visible: false },
{ key: 13, label: `更新人`, visible: false },
{ key: 14, label: `更新时间`, visible: false },
]);
const initFormData: BaseAlarmInfoForm = {
alarmInfoId: undefined,
alarmInfoType: undefined,
alarmReleatedId: undefined,
deviceId: undefined,
alarmContent: undefined,
alarmLevelId: undefined,
alarmTypeId: undefined,
alarmMode: undefined,
alarmStatus: undefined,
alarmBeginTime: undefined,
alarmEndTime: undefined,
handleTime: undefined,
alarmTypeName: undefined,
alarmLevelName: undefined,
releateadContent: undefined
}
const data = reactive<PageData<BaseAlarmInfoForm, BaseAlarmInfoQuery>>({
form: {...initFormData},
queryParams: {
pageNum: 1,
pageSize: 10,
alarmInfoId: undefined,
alarmInfoType: undefined,
alarmReleatedId: undefined,
deviceId: undefined,
alarmContent: undefined,
alarmLevelId: undefined,
alarmTypeId: undefined,
alarmMode: undefined,
alarmStatus: undefined,
alarmBeginTime: undefined,
alarmEndTime: undefined,
handleTime: undefined,
alarmTypeName: undefined,
alarmLevelName: undefined,
releateadContent: undefined,
params: {
}
},
rules: {
/* alarmInfoId: [
{ required: true, message: "报警信息ID不能为空", trigger: "blur" }
],*/
alarmInfoType: [
{ required: true, message: "报警信息类型不能为空", trigger: "change" }
],
alarmReleatedId: [
{ required: true, message: "报警相关不能为空", trigger: "blur" }
],
deviceId: [
{ required: true, message: "报警设备不能为空", trigger: "blur" }
],
alarmContent: [
{ required: true, message: "报警内容不能为空", trigger: "blur" }
],
alarmLevelId: [
{ required: true, message: "报警级别不能为空", trigger: "blur" }
],
alarmTypeId: [
{ required: true, message: "报警类型,不能为空", trigger: "blur" }
],
/* alarmMode: [
{ required: true, message: "报警方式不能为空", trigger: "change" }
],
alarmStatus: [
{ required: true, message: "报警状态不能为空", trigger: "change" }
],
alarmBeginTime: [
{ required: true, message: "实际报警开始时间不能为空", trigger: "blur" }
],
alarmEndTime: [
{ required: true, message: "实际报警结束时间不能为空", trigger: "blur" }
],
handleTime: [
{ required: true, message: "人工处理时间不能为空", trigger: "blur" }
],*/
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询报警信息列表 */
const getList = async () => {
loading.value = true;
const res = await listBaseAlarmInfo(queryParams.value);
baseAlarmInfoList.value = res.rows;
total.value = res.total;
loading.value = false;
}
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
}
/** 表单重置 */
const reset = () => {
form.value = {...initFormData};
baseAlarmInfoFormRef.value?.resetFields();
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
}
/** 多选框选中数据 */
const handleSelectionChange = (selection: BaseAlarmInfoVO[]) => {
ids.value = selection.map(item => item.alarmInfoId);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = "添加报警信息";
}
/** 修改按钮操作 */
const handleUpdate = async (row?: BaseAlarmInfoVO) => {
reset();
const _alarmInfoId = row?.alarmInfoId || ids.value[0]
const res = await getBaseAlarmInfo(_alarmInfoId);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = "修改报警信息";
}
/** 提交按钮 */
const submitForm = () => {
baseAlarmInfoFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.alarmInfoId) {
await updateBaseAlarmInfo(form.value).finally(() => buttonLoading.value = false);
} else {
await addBaseAlarmInfo(form.value).finally(() => buttonLoading.value = false);
}
proxy?.$modal.msgSuccess("操作成功");
dialog.visible = false;
await getList();
}
});
}
/** 删除按钮操作 */
const handleDelete = async (row?: BaseAlarmInfoVO) => {
const _alarmInfoIds = row?.alarmInfoId || ids.value;
await proxy?.$modal.confirm('是否确认删除报警信息编号为"' + _alarmInfoIds + '"的数据项?').finally(() => loading.value = false);
await delBaseAlarmInfo(_alarmInfoIds);
proxy?.$modal.msgSuccess("删除成功");
await getList();
}
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download('dms/baseAlarmInfo/export', {
...queryParams.value
}, `baseAlarmInfo_${new Date().getTime()}.xlsx`)
}
//
let alarmLevelOptions = ref([]);
const getAlarmLevelOptions = async () => {
const res = await getBaseAlarmInfoList(null);
alarmLevelOptions.value = res.rows;
};
//
let alarmTypeOptions = ref([]);
const getAlarmTypeOptions = async () => {
const res = await getBaseAlarmInfoList(null);
alarmTypeOptions.value = res.rows;
};
//
let machineOptions = ref([]);
/*const getMachineOptions = async () => {
const res = await (null);
machineOptions.value = res.rows;
};*/
onMounted(() => {
getAlarmLevelOptions();
getAlarmTypeOptions();
getList();
});
</script>
Loading…
Cancel
Save