IOT平台的后端管理前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

835 lines
28 KiB

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="120px">
<el-form-item label="中台设备ID" prop="deviceUuid">
<el-input
v-model="queryParams.deviceUuid"
placeholder="请输入中台设备ID"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-input
v-model="queryParams.deviceName"
placeholder="请输入设备名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="参数编码" prop="paramCode">
<el-input
v-model="queryParams.paramCode"
placeholder="请输入参数编码"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="参数名称" prop="paramName">
<el-input
v-model="queryParams.paramName"
placeholder="请输入参数名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item class="childTextAlignCenter">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" plain icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="success"
icon="Plus"
@click="handleAdd"
>新增</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="success"
icon="Edit"
@click="handleUpdate"
>修改</el-button>
</el-col> -->
<el-col :span="1.5">
<el-button
type="success"
icon="Delete"
@click="handleDelete"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
icon="Download"
@click="handleExport"
>导出</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="alertList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="主键" align="center" prop="id" /> -->
<el-table-column label="中台设备ID" align="center" prop="deviceUuid" />
<el-table-column label="设备名称" align="center" prop="deviceName" :width="120"/>
2 years ago
<el-table-column label="参数名称" align="center" prop="paramName" :width="120"/>
<el-table-column label="参数类型" align="center" prop="paramType" :width="120">
<template #default="scope">
<dict-tag :options="dc_param_value_type" :value="scope.row.paramType"/>
</template>
</el-table-column>
<el-table-column label="参数编码" align="center" prop="paramCode" />
<el-table-column label="是否可用" align="center" prop="enabledFlag" :width="120">
<template #default="scope">
<dict-tag :options="enabledFlagTable" :value="scope.row.enabledFlag"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<!-- <el-button
type="text"
icon="Edit"
@click="handleUpdate(scope.row)"
>修改</el-button> -->
<el-button
type="text"
icon="Delete"
@click="handlePolicy(scope.row)"
>维护告警策略</el-button>
<el-button
type="text"
icon="Delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</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-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="alertRef" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
2 years ago
<el-form-item label="告警设备" prop="deviceUuid">
<el-select v-model="form.deviceUuid" filterable placeholder="请选择参数" clearable @change="getParamsList">
<el-option
v-for="item in deviceList"
:key="item.uuid"
:label="item.deviceName"
:value="item.uuid"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
2 years ago
<el-form-item label="告警参数" prop="paramCode">
<el-select v-model="form.paramCode" filterable placeholder="请选择参数" clearable>
<el-option
v-for="item in paramsList"
:key="item.paramCode"
:label="item.paramName"
:value="item.paramCode"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
<!-- 添加或修改参数值状态策略对话框 -->
<el-dialog :title="titlePolicy" v-model="openPolicy" width="1200px" append-to-body>
<el-form ref="policyRef" :model="formPolicy" :rules="rulesPolicy" label-width="120px">
<el-row>
2 years ago
<el-col :span="12" v-show="beginValueVisiable">
<el-form-item label="告警值" prop="beginValue">
<!-- <el-input v-model="formPolicy.beginValue" placeholder="请输入开始值" /> -->
<el-select v-model="formPolicy.beginValue" placeholder="请选择是否告警">
<el-option
v-for="item in alert_value"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否告警" prop="alertFlag">
<el-select v-model="formPolicy.alertFlag" placeholder="请选择是否告警">
<el-option
v-for="item in alertFlag"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
2 years ago
<el-col :span="12" v-show="methodIdVisiable">
<el-form-item label="告警方式" prop="methodId">
<el-select v-model="formPolicy.methodId" placeholder="请选择告警方式">
<el-option
v-for="item in methodList"
:key="item.id"
:label="item.methodName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-show="sortIdVisiable">
<el-form-item label="排序" prop="sortId">
<el-input-number v-model="formPolicy.sortId" :min="1" :max="1000" />
</el-form-item>
2 years ago
</el-col>
<el-col :span="12" v-show="statusValueVisiable">
<el-form-item label="状态值" prop="statusValue">
<el-input v-model="formPolicy.statusValue" placeholder="请输入状态值" />
</el-form-item>
</el-col>
2 years ago
<el-col :span="12" v-show="statusTypeVisiable">
<el-form-item label="状态类型" prop="statusType">
<el-select v-model="formPolicy.statusType" placeholder="请选择状态类型">
<el-option
v-for="item in status"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
2 years ago
<el-col :span="24" v-show="policyModelVisiable">
<el-form-item label="告警算法" prop="policyModel">
<el-table ref="policyTable" v-loading="loading" :data="modelList" :row-key="getRowKey">
<el-table-column type="selection" reserve-selection="true" width="55" align="center" />
<el-table-column label="名称" align="center" prop="name">
<template #default="scope">
<el-input v-model="scope.row.name"></el-input>
</template>
</el-table-column>
<el-table-column label="符号" align="center" prop="code" :width="120"/>
<el-table-column label="运算符" align="center" prop="operator" :width="120">
<template #default="scope">
<dict-tag :options="operator_sign" :value="scope.row.operator"/>
</template>
</el-table-column>
<el-table-column label="限值" align="center" prop="value">
<template #default="scope">
<el-input v-model="scope.row.value"></el-input>
</template>
</el-table-column>
<el-table-column label="级别" align="center" prop="level">
<template #default="scope">
<el-input v-model="scope.row.level"></el-input>
</template>
</el-table-column>
<el-table-column label="告警方式" align="center" prop="methodId">
<template #default="scope">
<el-select v-model="scope.row.methodId" placeholder="请选择告警方式">
<el-option
v-for="item in methodList"
:key="item.id"
:label="item.methodName"
:value="item.id"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="状态值" align="center" prop="statusValue">
<template #default="scope">
<el-input v-model="scope.row.statusValue"></el-input>
</template>
</el-table-column>
<el-table-column label="状态类型" align="center" prop="statusType">
<template #default="scope">
<el-select v-model="scope.row.statusType" placeholder="请选择状态类型">
<el-option
v-for="item in status"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
2 years ago
</el-table>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitFormPolicy"> </el-button>
<el-button @click="cancelPolicy"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<style lang="scss" >
@import "@/assets/styles/self-defined.scss";
</style>
<script setup name="Alert">
import { getDeviceParamsAlertInfo, listAlert, getAlert, delAlert, addAlert, updateAlert } from "@/api/model/alert";
2 years ago
import { listDeviceNoPage } from "@/api/model/device";
import { listMethod } from "@/api/model/method";
2 years ago
import { listModel } from "@/api/model/alertmodel";
import { ElMessageBox } from 'element-plus';
import { listPolicy,listPolicyInfo,updatePolicy,updatePolicyBatch,addPolicy,addPolicyBatch,newDelPolicy, listAlertParamSelect } from "@/api/model/policy";
const { proxy } = getCurrentInstance();
const router = useRouter();
const { operator_sign,dc_param_value_type,alert_value } = proxy.useDict('operator_sign','dc_param_value_type','alert_value');
const alertList = ref([]);
const open = ref(false);
const openPolicy = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const deviceList = ref([]);
const paramsList = ref([]);
const methodList = ref([]);
2 years ago
const modelList = ref([]);
const selectedRows = ref([]);
const deletePolicyRows = ref([]);
const oldPolicyRows = ref([]);
const addPolicyRows = ref([]);
const policyParamsUpdateAdd = ref([]);
const beginValueVisiable = ref(false);
const statusValueVisiable = ref(false);
const statusTypeVisiable = ref(false);
const sortIdVisiable = ref(false);
const methodIdVisiable = ref(false);
const policyModelVisiable = ref(false);
const policyParams = ref([]);
const policyAlertId = ref("");
const policyDeviceUuid = ref("");
const paramTypeValue = ref("");
const enabledFlagTable = ref([
{label: '可用', value: 'true', elTagType: 'default', elTagClass: null},
{label: '不可用', value: 'false', elTagType: 'default', elTagClass: null}
]);
const alertFlag = ref([
2 years ago
{label: '告警', value: '1', elTagType: 'default', elTagClass: null},
{label: '不告警', value: '0', elTagType: 'default', elTagClass: null}
]);
const status = ref([
2 years ago
{label: '状态1', value: '1', elTagType: 'default', elTagClass: null},
{label: '状态2', value: '2', elTagType: 'default', elTagClass: null}
]);
const data = reactive({
form: {},
formPolicy: {},
queryParams: {
pageNum: 1,
pageSize: 10,
deviceUuid: null,
paramCode: null,
note: null
},
2 years ago
queryParamsDevice: {
deviceUuid: null,
},
queryParamsParam: {
deviceUuid: null,
paramCode: null,
},
queryParamsPolicy:{
pageNum: 1,
pageSize: 10,
beginValue: null,
endValue: null,
alertFlag: null,
alertId: null,
statusValue: null,
statusType: null,
deviceId: null,
sortId: null,
methodId: null
},
2 years ago
queryPolicy:{
alertId: null,
},
rules: {
deviceUuid: [
{ required: true, message: "中台设备UUID不能为空", trigger: "blur" }
],
paramCode: [
{ required: true, message: "参数编码不能为空", trigger: "blur" }
],
},
rulesPolicy: {
deviceUuid: [
{ required: true, message: "中台设备UUID不能为空", trigger: "blur" }
],
paramCode: [
{ required: true, message: "参数编码不能为空", trigger: "blur" }
],
}
});
2 years ago
const { queryParamsDevice, queryParamsParam, queryParams, form, rules,queryParamsPolicy,queryPolicy, formPolicy, rulesPolicy } = toRefs(data);
/** 查询设备告警列表 */
function getList() {
loading.value = true;
getDeviceParamsAlertInfo(queryParams.value).then(response => {
alertList.value = response.rows;
total.value = response.total;
loading.value = false;
});
}
// 取消按钮
function cancel() {
open.value = false;
reset();
}
// 表单重置
function reset() {
form.value = {
id: null,
tentantId: null,
version: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
deptId: null,
userId: null,
deleteBy: null,
deleteTime: null,
deviceUuid: null,
paramCode: null,
note: null
};
proxy.resetForm("alertRef");
}
// 表单重置
function resetPolicy() {
formPolicy.value = {
tentantId: null,
version: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
deptId: null,
userId: null,
deleteBy: null,
deleteTime: null,
id: null,
beginValue: null,
endValue: null,
alertFlag: null,
alertId: null,
statusValue: null,
statusType: null,
deviceId: null,
sortId: null,
methodId: null
};
proxy.resetForm("policyRef");
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
ids.value = selection.map(item => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
reset();
getDeviceList();
open.value = true;
title.value = "添加设备告警";
}
/** 维护告警策略 */
function handlePolicy(row) {
resetPolicy();
2 years ago
selectedRows.value=[];
deletePolicyRows.value=[];
if(row.paramType==4){
getModelListSwitch(row);
beginValueVisiable.value=true;
policyModelVisiable.value=false;
statusValueVisiable.value=true;
statusTypeVisiable.value=true;
2 years ago
sortIdVisiable.value=false;
methodIdVisiable.value=true;
}else{
getModelList(row);
policyModelVisiable.value=true;
beginValueVisiable.value=false;
statusValueVisiable.value=false;
statusTypeVisiable.value=false;
2 years ago
sortIdVisiable.value=false;
methodIdVisiable.value=false;
2 years ago
}
getMethodList();
queryParamsPolicy.value.alertId = row.id;
2 years ago
policyAlertId.value = row.id;
policyDeviceUuid.value = row.deviceUuid;
paramTypeValue.value = row.paramType;
openPolicy.value = true;
title.value = "维护告警策略";
}
/** 提交按钮 */
function submitForm() {
proxy.$refs["alertRef"].validate(valid => {
if (valid) {
if (form.value.id != null) {
updateAlert(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
});
} else {
addAlert(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
});
}
}
});
}
/** 删除按钮操作 */
function handleDelete(row) {
const _ids = row.id || ids.value;
proxy.$modal.confirm('是否确认删除设备告警编号为"' + _ids + '"的数据项?').then(function() {
return delAlert(_ids);
}).then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
proxy.download('model/alert/export', {
...queryParams.value
}, `alert_${new Date().getTime()}.xlsx`)
}
function getDeviceList(){
2 years ago
loading.value = false;
listDeviceNoPage(queryParamsDevice.value).then(response => {
deviceList.value = response.data;
loading.value = false;
});
}
function getParamsList(deviceUuid){
2 years ago
loading.value = true;
queryParamsParam.value.deviceUuid = deviceUuid;
listAlertParamSelect(queryParamsParam.value).then(response => {
2 years ago
paramsList.value = response.data;
loading.value = false;
});
}
function getMethodList(){
listMethod().then(response => {
methodList.value = response.rows;
});
}
2 years ago
//提交到策略信息表
function submitFormPolicy() {
proxy.$refs["policyRef"].validate(valid => {
if (valid) {
2 years ago
//根据标志值来判断是否是修改操作
if (formPolicy.value.id != null) {
2 years ago
//根据参数类型区分
if(paramTypeValue.value != 4 ){
if(proxy.$refs.policyTable.getSelectionRows().length==0){
ElMessageBox.alert('请确保至少勾选了一条告警算法', '提示', {
confirmButtonText: '确定',
center: true,
})
return;
}
mapFormTableUpdate();
computeDelPolicy();
computeAddPolicy();
updatePolicyBatch(policyParams.value).then(response => {
if(deletePolicyRows.value.length>0){
newHandleDeletePolicy();
}
if(addPolicyRows.value.length>0){
handleAddPolicy();
}
proxy.$modal.msgSuccess("修改成功");
openPolicy.value = false;
getList();
});
}else{
updatePolicy(formPolicy.value).then(response => {
2 years ago
proxy.$modal.msgSuccess("新增成功");
openPolicy.value = false;
getList();
});
}
} else {
2 years ago
//根据参数类型区分
if(paramTypeValue.value != 4 ){
if(proxy.$refs.policyTable.getSelectionRows().length==0){
ElMessageBox.alert('请确保至少勾选了一条告警算法', '提示', {
confirmButtonText: '确定',
center: true,
})
return;
}
mapFormTable();
addPolicyBatch(policyParams.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
openPolicy.value = false;
getList();
});
}else{
addPolicy(formPolicy.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
openPolicy.value = false;
getList();
});
}
}
}
});
}
function cancelPolicy() {
openPolicy.value = false;
resetPolicy();
}
2 years ago
//开关量初始化策略表单
function getModelListSwitch(row){
queryPolicy.value.alertId = row.id;
listPolicyInfo(queryPolicy.value).then(response=>{
//修改界面初始化
if(response.data && response.data.length>0){
formPolicy.value.statusValue = response.data[0].statusValue;
formPolicy.value.statusType = response.data[0].statusType;
formPolicy.value.methodId = response.data[0].methodId;
formPolicy.value.alertFlag = response.data[0].alertFlag;
formPolicy.value.beginValue = response.data[0].beginValue;
2 years ago
formPolicy.value.alertId = row.id;
formPolicy.value.deviceId = row.deviceUuid;
formPolicy.value.id = response.data[0].id;
2 years ago
//新增界面初始化
}else{
formPolicy.value.alertId = row.id;
formPolicy.value.deviceId = row.deviceUuid;
}
});
}
//非开关量初始化策略表单
function getModelList(row){
queryPolicy.value.alertId = row.id;
listModel().then(response => {
modelList.value = response.rows;
formPolicy.value.alertId = row.id;
formPolicy.value.deviceId = row.deviceUuid;
proxy.$refs.policyTable.clearSelection();
console.log(queryPolicy.value);
listPolicyInfo(queryPolicy.value).then(response=>{
//修改界面初始化
if(response.data && response.data.length>0){
console.log(response.data);
oldPolicyRows.value = response.data;
formPolicy.value.alertFlag = response.data[0].alertFlag;
formPolicy.value.alertId = response.data[0].alertId;
formPolicy.value.deviceId = response.data[0].deviceId;
formPolicy.value.id = response.data[0].id;
2 years ago
modelList.value.map(element=>{
response.data.forEach(item=>{
if(item.alertModelId == element.id){
policyDeviceUuid.value = item.deviceId;
policyAlertId.value = item.alertId;
element.value = item.beginValue;
element.level = item.sortId;
element.name = item.name;
element.id = item.id;
element.statusValue = item.statusValue;
element.statusType = item.statusType;
element.methodId = item.methodId;
2 years ago
proxy.$refs.policyTable.toggleRowSelection(element,true);
return element;
}
})
})
}
});
});
}
//新增表单映射
function mapFormTable(){
const policyTableRows = proxy.$refs.policyTable.getSelectionRows();
policyParams.value=[];
policyTableRows.forEach(item=>{
let policyParam = {};
policyParam.alertFlag = formPolicy.value.alertFlag;
policyParam.deviceId = policyDeviceUuid.value;
policyParam.alertId = policyAlertId.value;
policyParam.beginValue = item.value;
policyParam.sortId = item.level;
policyParam.alertModelId = item.id;
policyParam.name = item.name;
policyParam.statusValue = item.statusValue;
policyParam.statusType = item.statusType;
policyParam.methodId = item.methodId;
2 years ago
policyParams.value.push(policyParam);
})
}
//修改表单映射
function mapFormTableUpdate(){
const policyTableRows = proxy.$refs.policyTable.getSelectionRows();
policyParams.value=[];
policyTableRows.forEach(item=>{
let policyParam = {};
policyParam.id = item.id;
policyParam.alertFlag = formPolicy.value.alertFlag;
policyParam.deviceId = policyDeviceUuid.value;
policyParam.alertId = item.alertId;
policyParam.beginValue = item.value;
policyParam.sortId = item.level;
policyParam.alertModelId = item.alertModelId;
policyParam.name = item.name;
policyParam.statusValue = item.statusValue;
policyParam.statusType = item.statusType;
policyParam.methodId = item.methodId;
2 years ago
policyParams.value.push(policyParam);
})
}
function getRowKey(row){
// 返回行的唯一标识符
// 这里使用 id 作为唯一标识符,你可以根据实际情况进行修改
return row.id;
}
/** 删除按钮操作 */
function newHandleDeletePolicy(){
const _names = deletePolicyRows.value.map(item=>{
return item.name;
});
const _ids = deletePolicyRows.value.map(item=>{
return item.id;
});
proxy.$modal.confirm('是否确认删除告警算法"' + _names + '"的数据项?').then(function() {
return newDelPolicy(_ids);
}).then(() => {
}).catch(() => {});
}
function computeDelPolicy() {
const newSeletedRows = proxy.$refs.policyTable.getSelectionRows();
oldPolicyRows.value.forEach(item=>{
let flag = false;
newSeletedRows.forEach(element=>{
if(item.id == element.id){
flag = true;
}
})
if(!flag){
deletePolicyRows.value.push(item);
}
})
}
function computeAddPolicy() {
const newSeletedRows = proxy.$refs.policyTable.getSelectionRows();
newSeletedRows.forEach(item=>{
let flag = false;
oldPolicyRows.value.forEach(element=>{
if(item.id == element.id){
flag = true;
}
})
if(!flag){
addPolicyRows.value.push(item);
}
})
}
/** 新增方法 */
function handleAddPolicy(){
mapFormTableUpdataAdd();
addPolicyBatch(policyParamsUpdateAdd.value);
}
//修改新增表单映射
function mapFormTableUpdataAdd(){
policyParamsUpdateAdd.value=[];
addPolicyRows.value.forEach(item=>{
let policyParam = {};
policyParam.alertFlag = formPolicy.value.alertFlag;
policyParam.deviceId = policyDeviceUuid.value;
policyParam.alertId = policyAlertId.value;
policyParam.beginValue = item.value;
policyParam.sortId = item.level;
policyParam.alertModelId = item.id;
policyParam.name = item.name;
policyParam.statusValue = item.statusValue;
policyParam.statusType = item.statusType;
policyParam.methodId = item.methodId;
2 years ago
policyParamsUpdateAdd.value.push(policyParam);
})
}
getList();
</script>