fix:修改配置设备告警字段

This commit is contained in:
zhaohy
2024-07-19 14:13:01 +08:00
parent 2f1a54a114
commit ecdcd900d3
8 changed files with 696 additions and 16 deletions

View File

@@ -43,6 +43,25 @@ const alarmManagement = {
},
],
},
// {
// path: 'gatewayAlarm',
// name: 'GatewayAlarm',
// meta: { title: '网关告警', hideChildren: true, icon: 'gaojingguanli' },
// component: Base,
// redirect: { name: 'GatewayAlarmIndex' },
// children: [
// {
// path: 'index',
// name: 'GatewayAlarmIndex',
// component: () => import('/@/view/alarmManagement/gatewayAlarm/index.vue'),
// meta: {
// title: '网关告警',
// keepAlive: false,
// // backApi: [],
// },
// },
// ],
// },
{
path: 'alarmSettings',
name: 'AlarmSettings',

View File

@@ -204,7 +204,7 @@
title: value.errorCode,
schemas: [
{
field: 'deviceName',
field: 'deviceId',
label: '设备名称',
component: 'nsSelectApi',
componentProps: {
@@ -231,7 +231,7 @@
label: '设备点位',
component: 'nsSelectApi',
dynamicParams: {
id: 'deviceName', //帮定上级联动数据
id: 'deviceId', //帮定上级联动数据
},
componentProps: {
api: device.queryDevicePoint,
@@ -240,7 +240,7 @@
placeholder: '请选择设备点位',
labelField: 'code',
valueField: 'id',
dependency: 'deviceName',
dependency: 'deviceId',
showSearch: true,
filterOption: (input: string, option: any) => {
return option.code.toLowerCase().indexOf(input.toLowerCase()) >= 0;

View File

@@ -40,9 +40,9 @@
@change="selectDeviceType"
placeholder="请选择设备类型" />
</a-form-item>
<a-form-item label="设备名称" name="deviceName">
<a-form-item label="设备名称" name="deviceId">
<a-select
v-model:value="infoObject.deviceName"
v-model:value="infoObject.deviceId"
:disabled="!(infoObject && infoObject.deviceType && infoObject.deviceType.length > 0)"
style="width: 100%"
:autoClearSearchValue="true"
@@ -61,7 +61,7 @@
show-search
placeholder="请选择设备点位"
style="width: 100%"
:disabled="!infoObject?.deviceName"
:disabled="!infoObject?.deviceId"
:options="devicePointData"
:filter-option="filterDevicePoint" />
</a-form-item>
@@ -167,7 +167,7 @@
deviceType: [],
devicePoint: null,
valueType: null,
deviceName: null,
deviceId: null,
enableRules: 0,
alarmList: [{ logic: null, num: null, isDelete: 0 }],
});
@@ -197,7 +197,7 @@
};
//选择设备方法
const selectDevice = () => {
getDevicePoint({ id: infoObject.value.deviceName });
getDevicePoint({ id: infoObject.value.deviceId });
};
//获取设备列表
const getDevicePage = (value: any) => {
@@ -258,16 +258,21 @@
const emit = defineEmits(['editObject']);
// 定义一个递归函数来查找每一级的id 设备类型回显 层级方法
function findParentIds(tree: any, targetId: number, result: any) {
function findParentIds(tree: any[], targetId: number, result: number[]): boolean {
for (let item of tree) {
if (item.children && item.children.length > 0) {
if (item.children.some((child: any) => child.id === targetId)) {
result.unshift(item.id); // 将当前节点的id添加到结果数组的最前面
findParentIds(tree, item.id, result); // 递归查找父级节点的id
break; // 找到后可以退出循环
return true; // 表示找到了目标节点的父节点
}
// 递归查找当前节点的子节点
if (findParentIds(item.children, targetId, result)) {
result.unshift(item.id); // 递归返回后将当前节点的id添加到结果数组的最前面
return true;
}
}
}
return false; // 没有找到目标节点
}
// 递归 获取当前 选择的设备类型 对象 用来获取设备列表
const findNodeById = (nodes: any, id: any) => {
@@ -305,7 +310,6 @@
siteDataTree.value = res.data.linkList;
}
});
//判断 是新增 还是修改
if (value) {
//获取详情接口
@@ -316,9 +320,13 @@
let selectDevice = ref([Number(infoObject.value.deviceType)]);
findNodeById(deviceTypeTreeData.value, Number(infoObject.value.deviceType));
//获取设备点位
getDevicePoint({ id: infoObject.value.deviceName });
getDevicePoint({ id: infoObject.value.deviceId });
// 回显 选择设备类型
findParentIds(deviceTypeTreeData.value, infoObject.value.deviceType, selectDevice.value);
findParentIds(
deviceTypeTreeData.value,
Number(infoObject.value.deviceType),
selectDevice.value,
);
//枚举 需要重新赋值
if (
infoObject.value.hxAlarmRuleLogicList &&
@@ -344,7 +352,7 @@
deviceType: [],
devicePoint: null,
valueType: null,
deviceName: null,
deviceId: null,
enableRules: 0,
alarmList: [{ logic: null, num: null, isDelete: 0 }],
};
@@ -357,7 +365,7 @@
site: [{ required: true, message: '请选择站点', trigger: 'change' }],
deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
enableRules: [{ required: true, message: '请选择启用规则', trigger: 'change' }],
deviceName: [{ required: true, message: '请选择设备名称', trigger: 'change' }],
deviceId: [{ required: true, message: '请选择设备名称', trigger: 'change' }],
devicePoint: [{ required: true, message: '请选择设备点位', trigger: 'change' }],
valueType: [{ required: true, message: '请选择取值类型', trigger: 'change' }],
ruleType: [{ required: true, message: '请选择规则类型', trigger: 'change' }],

View File

@@ -0,0 +1,29 @@
<template>
<ns-view-list-table v-bind="config" ref="mainRef" />
<!-- 详情页面 -->
<Look ref="look" />
<!-- 状态页面 -->
<Status ref="status" />
</template>
<script lang="ts">
import { notificationtableConfig } from './ts/config';
import Look from './look.vue';
import Status from './status.vue';
import { ref } from 'vue';
export default {
name: 'EquipmentAlarmIndex',
components: { Look, Status },
setup() {
const look = ref(null);
const status = ref(null);
const config = notificationtableConfig(look, status);
return {
config,
look,
status,
};
},
};
</script>

View File

@@ -0,0 +1,234 @@
<template>
<ns-drawer
v-model:visible="visible"
width="520"
:title="' '"
:footer-style="{ textAlign: 'right' }"
:ok="btnClick"
:cancel="handleClose"
placement="right"
@close="handleClose">
<div style="width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden">
<!-- top -->
<div class="box">
<div class="card"></div>
<div style="left: 25px; position: absolute; height: 35px; line-height: 35px">
告警编号20230310001
</div>
<div style="right: 20px; position: absolute; height: 35px; line-height: 35px">
2024-03-10 15:08:10
</div>
</div>
<!-- center -->
<div style="width: 100%; height: 400px">
<div style="width: 100%; height: 100%" ref="graphChart"></div>
</div>
<!-- bottom -->
<div style="width: 100%; margin-top: 10px">
<a-descriptions :column="1" bordered>
<a-descriptions-item label="优先级">紧急</a-descriptions-item>
<a-descriptions-item label="状态">新告警</a-descriptions-item>
<a-descriptions-item label="错误码">C003</a-descriptions-item>
<a-descriptions-item label="告警描述">网关心跳包丢失</a-descriptions-item>
<a-descriptions-item label="设备信息">1号网关_Di23j596_0001 </a-descriptions-item>
<a-descriptions-item label="重复次数"> 0 </a-descriptions-item>
</a-descriptions>
</div>
</div>
<template #footer>
<a-button type="primary" @click="handleClose">确定</a-button>
</template>
</ns-drawer>
</template>
<script lang="ts" setup>
defineOptions({
name: 'look', // 与页面路由name一致缓存才可生效
});
import { ref } from 'vue';
import * as echarts from 'echarts';
let chartInstance: echarts.ECharts | null = null;
const graphChart = ref(null);
const visible = ref(false);
const handleClose = () => {
visible.value = false;
};
const btnClick = () => {
console.log('btnClick');
handleClose();
};
const toggle = (data: any) => {
console.log(data, 'data');
visible.value = true;
setTimeout(() => {
getChatr();
}, 500);
};
const getChatr = () => {
let dayData = [];
let energyAlarm = [];
// Extend data for 30 days
for (let i = 1; i < 9; i++) {
dayData.push('10:' + i * 9 + ':00');
energyAlarm.push(Math.floor(Math.random() * 2));
}
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(graphChart.value);
const option = {
// title: {
// text: '告警趋势/ 近30天',
// textStyle: {
// fontSize: 16,
// fontWeight: 'normal',
// color: '#aaaaaa',
// },
// left: '1%',
// top: '2%',
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: function (params: any) {
let res = params[0].marker + ' ' + params[0].seriesName + ' : ' + params[0].data;
return res;
},
},
grid: {
left: '10%', // 设置图表距离左边的距离
right: '4%', // 设置图表距离右边的距离
top: '6%',
borderWidth: 0,
y2: 60, // 距离底边
},
legend: [
{
show: false,
top: 5,
left: 'center', // 将图例居中显示
textStyle: {
color: 'rgb(89, 89, 89)',
fontSize: '14',
fontWeight: 'normal',
}, // 注意这里的颜色值要用引号括起来
data: ['状态'],
itemGap: 30, // 这里可以调整图例项之间的间距,单位为像素
},
],
calculable: true,
xAxis: [
{
type: 'category',
splitLine: {
show: false,
},
axisTick: {
show: true,
},
splitArea: {
show: false,
},
axisLabel: {
show: true, // 显示 X 轴刻度标签
color: 'rgb(89, 89, 89)', // X 轴刻度标签的字体颜色
fontSize: 12, // X 轴刻度标签的字体大小
interval: 0, // 显示所有刻度标签
formatter: function (value) {
// 可选:格式化 X 轴刻度标签文本
return value;
},
},
data: dayData,
},
],
yAxis: [
{
type: 'value',
shwo: false,
splitLine: {
show: true,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitArea: {
show: false,
},
axisLabel: {
show: true, // 显示
formatter: function (value) {
return value;
},
},
interval: 1, // 设置 Y 轴刻度间隔为 1
},
],
dataZoom: [
{
height: 12,
start: 0,
end: 100,
handleSize: '300%', // 设置滑块的大小
bottom: 15,
},
],
series: [
{
name: '状态',
type: 'line',
itemStyle: {
normal: {
barBorderRadius: 0,
color: '#2778FF',
},
},
symbol: 'circle', // 数据点的形状,这里设置为圆形
symbolSize: 8,
// label: {
// show: true,
// color: 'rgb(89, 89, 89)',
// position: 'top',
// top: '10',
// formatter: function (value) {
// return Number(energyAlarm[value.dataIndex]) ;
// },
// },
data: energyAlarm,
},
],
};
chartInstance = echarts.init(graphChart.value);
chartInstance.setOption(option);
};
defineExpose({
toggle,
});
</script>
<style scoped lang="less">
.box {
width: 100%;
height: 35px;
display: flex;
position: relative;
font-size: @font-size-base;
border-bottom: 1px solid @primary-color;
}
.card {
position: absolute;
left: 0px;
top: 0px;
width: 5px;
height: 35px;
background-color: @primary-color;
}
:deep(.ant-descriptions-item-label) {
width: 25%;
}
</style>

View File

@@ -0,0 +1,108 @@
{
"listData":[
{
"id": "d4",
"isDel": "0",
"officesId": "84",
"deviceCode": "37430200143",
"deviceName": "地听测试电表",
"category": "1",
"type": "1001",
"energyCount": "1",
"serialNumber": "69",
"pidCode": null,
"brand": "",
"types": "",
"manufacturer": "elit non in",
"contacts": "ad reprehenderit",
"phonenumber": "34",
"position": "in esse commodo1",
"activeState": "1",
"measurementDirection": "1",
"deviceMagnification": 62,
"deviceAccuracy": "89",
"frequency": "anim consequat irure",
"standardFrequency": "ut elit",
"deviceHead": "pariatur ex velit",
"constructor": "84566",
"voltageType": "cillum aliquip reprehenderit",
"pt": 61,
"ct": 64,
"communicationProtocol": "cupidatat nisi ea ad",
"ip": "",
"port": "",
"com": "",
"slaveAddress": "",
"dlt": "",
"conversionIdentifier": "48",
"multiplicationAdjustment": "1",
"accessMethod": "1",
"replacementFrequency": "0",
"dataDetail": "sit",
"insertTime": null,
"children": null,
"devicePointList": null,
"insertUser": null,
"priority": "1",
"alarmTitle": "电压异常告警",
"errorCode": "A001",
"monitorTime":"1",
"repetitions":"1",
"monitorTimeUnit": "分",
"enableRules": "1",
"isUse":true
} , {
"id": "d5",
"isDel": "0",
"officesId": "84",
"deviceCode": "37430200143",
"deviceName": "地听测试电表",
"category": "1",
"type": "1001",
"energyCount": "1",
"serialNumber": "69",
"pidCode": null,
"brand": "",
"types": "",
"manufacturer": "elit non in",
"contacts": "ad reprehenderit",
"phonenumber": "34",
"position": "in esse commodo2",
"activeState": "1",
"measurementDirection": "1",
"deviceMagnification": 62,
"deviceAccuracy": "89",
"frequency": "anim consequat irure",
"standardFrequency": "ut elit",
"deviceHead": "pariatur ex velit",
"constructor": "84566",
"voltageType": "cillum aliquip reprehenderit",
"pt": 61,
"ct": 64,
"communicationProtocol": "cupidatat nisi ea ad",
"ip": "",
"port": "",
"com": "",
"slaveAddress": "",
"dlt": "",
"conversionIdentifier": "48",
"multiplicationAdjustment": "1",
"accessMethod": "1",
"replacementFrequency": "0",
"dataDetail": "sit",
"insertTime": null,
"children": null,
"devicePointList": null,
"insertUser": null,
"priority": "1",
"alarmTitle": "电压异常告警",
"errorCode": "A001",
"monitorTime":"1",
"repetitions":"1",
"monitorTimeUnit": "分",
"enableRules": "0",
"isUse":true
}
]
}

View File

@@ -0,0 +1,124 @@
<template>
<ns-drawer
v-model:visible="visible"
width="550"
:title="' '"
:footer-style="{ textAlign: 'right' }"
:ok="btnClick"
:cancel="handleClose"
placement="right"
@close="handleClose">
<a-tabs>
<a-tab-pane key="1" tab="更新状态">
<div style="width: 100%; padding: 24px">
<a-form ref="formRef" :model="infoObject" :rules="rules">
<a-form-item ref="status" label="当前状态" name="status">
<a-select
v-model:value="infoObject.status"
show-search
placeholder="请选择设备点位"
style="width: 85%"
:options="statusOptions"
:disabled="true"
:filter-option="filterDevicePoint" />
</a-form-item>
<a-form-item label="备注" name="desc">
<a-textarea
v-model:value="infoObject.desc"
placeholder="请输入异常描述"
:disabled="true"
style="width: 85%"
:autoSize="{ minRows: 4, maxRows: 4 }" />
</a-form-item>
</a-form>
</div>
</a-tab-pane>
<a-tab-pane key="2" tab="状态流程">
<NsSteps v-bind="config" />
</a-tab-pane>
</a-tabs>
<template #footer>
<a-button type="primary" @click="btnClick">确定</a-button>
</template>
</ns-drawer>
</template>
<script>
import { defineComponent } from 'vue';
import { ref, createVNode } from 'vue';
import NsSteps from '/@/components/ns-steps.vue';
import { NsMessage, NsModal } from '/nerv-lib/component';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: { NsSteps },
setup() {
const visible = ref(false);
const infoObject = ref({});
const statusOptions = ref([
{ value: '0', label: '待处理' },
{ value: '1', label: '处理中' },
{ value: '2', label: '已完成' },
{ value: '3', label: '超时' },
{ value: '4', label: '已关闭' },
]);
const logList = ref([
{ name: '李四', status: '2', time: '2024-03-10 10:00:00', desc: '完成' },
{ name: '王五', status: '4', time: '2024-03-10 10:00:00' },
{ name: '王五', status: '3', time: '2024-03-10 10:00:00' },
{ name: '王五', status: '1', time: '2024-03-10 10:00:00', desc: '创建工单' },
{ name: '赵六', status: '0', time: '2024-03-10 10:00:00' },
]);
const config = ref({
size: logList.value.length,
dataSource: logList.value,
});
const handleClose = () => {
visible.value = false;
};
const btnClick = () => {
visible.value = false;
};
const toggle = (data) => {
infoObject.value = { ...logList.value[0] };
let statusMap = {
0: '待处理',
1: '处理中',
2: '已完成',
3: '超时',
4: '已关闭',
};
let colorMap = {
0: '#ff7602',
1: '#00a1e6',
2: '#04d919',
3: '#d9001b',
4: '#a6a6a6',
};
logList.value.forEach((item) => {
item.statusName = statusMap[item.status];
item.color = colorMap[item.status];
item.src = 'status-' + item.status;
});
visible.value = true;
};
return {
infoObject,
statusOptions,
btnClick,
visible,
logList,
config,
handleClose,
toggle,
};
},
});
</script>
<style scoped lang="less">
:deep(.ant-form-item-label) {
z-index: 20;
text-align: right;
width: 17%;
}
</style>

View File

@@ -0,0 +1,158 @@
import { dateUtil } from '/nerv-lib/util/date-util';
import data from '../notificationManagementMock.json';
import { http } from '/nerv-lib/util';
import { ref } from 'vue';
const tableKeyMap = [
{
title: '序号',
dataIndex: 'address',
customRender: (text: any) => {
return text.index + 1;
},
},
{
title: '告警编号',
dataIndex: 'id',
},
{
title: '告警描述',
dataIndex: 'deviceCode',
},
{
title: '优先级',
dataIndex: 'deviceName',
},
{
title: '状态',
dataIndex: 'position',
},
{
title: '错误码',
dataIndex: 'position',
textEllipsis: true,
},
{
title: '设备信息',
dataIndex: 'position',
},
{
title: '更新时间',
dataIndex: 'enableRules',
},
{
title: '断网时长',
dataIndex: 'enableRules',
},
];
const mockData = ref(data.listData);
export const notificationtableConfig = (look: any, status: any) => {
return {
title: '告警记录',
// api: '/carbon_emission/device/getDeviceList',
value: mockData.value,
headerActions: [{}],
columns: tableKeyMap,
// rowSelection: null, 选择按钮
columnActions: {
title: '操作',
actions: [
{
label: '详情',
name: 'FeedBackDetail',
dynamicParams: ['uuid', 'appealType'],
handle: (data: any) => {
console.log(look.value);
look.value.toggle(data);
},
},
{
label: '状态',
name: 'FeedBackDetail',
dynamicParams: ['uuid', 'appealType'],
handle: (data: any) => {
status.value.toggle(data);
},
},
],
},
formConfig: {
schemas: [
{
field: 'name',
label: '告警类型',
component: 'NsSelect',
defaultValue: '2',
componentProps: {
placeholder: '请选择告警优先级',
disabled: true,
options: [
{
label: '紧急',
value: '1',
},
{
label: '重要',
value: '2',
},
{
label: '一般',
value: '3',
},
],
},
},
{
field: 'provider',
label: '状态',
component: 'NsSelect',
componentProps: {
placeholder: '请选择状态',
options: [
{
label: '待处理',
value: '1',
},
{
label: '处理中',
value: '2',
},
{
label: '已完成',
value: '3',
},
{
label: '超时',
value: '4',
},
{
label: '关闭',
value: '5',
},
],
},
},
{
field: 'provider',
label: '错误码',
component: 'NsInput',
componentProps: {
placeholder: '请输入告警错误码',
},
},
{
field: 'createTime',
label: '生产日期',
component: 'NsRangePicker',
fieldMap: ['manufactureBeginDate', 'manufactureEndDate'],
componentProps: {
valueFormat: 'YYYY-MM-DD',
placeholder: ['开始日期', '结束日期'],
},
},
],
},
// pagination: { pageSizeOptions: false },
rowKey: 'id',
};
};