You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

495 lines
20 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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="deviceName" 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: `报警信息`, 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,
deviceName: 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,
deviceName: 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>