Browse Source

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

temp
zhaohy 4 months ago
parent
commit
ecdcd900d3
  1. 19
      hx-ai-intelligent/src/router/alarmManagement.ts
  2. 6
      hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/configureDeviceAlarms.vue
  3. 34
      hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue
  4. 29
      hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/index.vue
  5. 234
      hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/look.vue
  6. 108
      hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/notificationManagementMock.json
  7. 124
      hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/status.vue
  8. 158
      hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/ts/config.ts

19
hx-ai-intelligent/src/router/alarmManagement.ts

@ -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', path: 'alarmSettings',
name: 'AlarmSettings', name: 'AlarmSettings',

6
hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/configureDeviceAlarms.vue

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

34
hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue

@ -40,9 +40,9 @@
@change="selectDeviceType" @change="selectDeviceType"
placeholder="请选择设备类型" /> placeholder="请选择设备类型" />
</a-form-item> </a-form-item>
<a-form-item label="设备名称" name="deviceName"> <a-form-item label="设备名称" name="deviceId">
<a-select <a-select
v-model:value="infoObject.deviceName" v-model:value="infoObject.deviceId"
:disabled="!(infoObject && infoObject.deviceType && infoObject.deviceType.length > 0)" :disabled="!(infoObject && infoObject.deviceType && infoObject.deviceType.length > 0)"
style="width: 100%" style="width: 100%"
:autoClearSearchValue="true" :autoClearSearchValue="true"
@ -61,7 +61,7 @@
show-search show-search
placeholder="请选择设备点位" placeholder="请选择设备点位"
style="width: 100%" style="width: 100%"
:disabled="!infoObject?.deviceName" :disabled="!infoObject?.deviceId"
:options="devicePointData" :options="devicePointData"
:filter-option="filterDevicePoint" /> :filter-option="filterDevicePoint" />
</a-form-item> </a-form-item>
@ -167,7 +167,7 @@
deviceType: [], deviceType: [],
devicePoint: null, devicePoint: null,
valueType: null, valueType: null,
deviceName: null, deviceId: null,
enableRules: 0, enableRules: 0,
alarmList: [{ logic: null, num: null, isDelete: 0 }], alarmList: [{ logic: null, num: null, isDelete: 0 }],
}); });
@ -197,7 +197,7 @@
}; };
// //
const selectDevice = () => { const selectDevice = () => {
getDevicePoint({ id: infoObject.value.deviceName }); getDevicePoint({ id: infoObject.value.deviceId });
}; };
// //
const getDevicePage = (value: any) => { const getDevicePage = (value: any) => {
@ -258,16 +258,21 @@
const emit = defineEmits(['editObject']); const emit = defineEmits(['editObject']);
// id // id
function findParentIds(tree: any, targetId: number, result: any) { function findParentIds(tree: any[], targetId: number, result: number[]): boolean {
for (let item of tree) { for (let item of tree) {
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
if (item.children.some((child: any) => child.id === targetId)) { if (item.children.some((child: any) => child.id === targetId)) {
result.unshift(item.id); // id result.unshift(item.id); // id
findParentIds(tree, item.id, result); // id return true; //
break; // 退 }
//
if (findParentIds(item.children, targetId, result)) {
result.unshift(item.id); // id
return true;
} }
} }
} }
return false; //
} }
// //
const findNodeById = (nodes: any, id: any) => { const findNodeById = (nodes: any, id: any) => {
@ -305,7 +310,6 @@
siteDataTree.value = res.data.linkList; siteDataTree.value = res.data.linkList;
} }
}); });
// //
if (value) { if (value) {
// //
@ -316,9 +320,13 @@
let selectDevice = ref([Number(infoObject.value.deviceType)]); let selectDevice = ref([Number(infoObject.value.deviceType)]);
findNodeById(deviceTypeTreeData.value, 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 ( if (
infoObject.value.hxAlarmRuleLogicList && infoObject.value.hxAlarmRuleLogicList &&
@ -344,7 +352,7 @@
deviceType: [], deviceType: [],
devicePoint: null, devicePoint: null,
valueType: null, valueType: null,
deviceName: null, deviceId: null,
enableRules: 0, enableRules: 0,
alarmList: [{ logic: null, num: null, isDelete: 0 }], alarmList: [{ logic: null, num: null, isDelete: 0 }],
}; };
@ -357,7 +365,7 @@
site: [{ required: true, message: '请选择站点', trigger: 'change' }], site: [{ required: true, message: '请选择站点', trigger: 'change' }],
deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }], deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
enableRules: [{ 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' }], devicePoint: [{ required: true, message: '请选择设备点位', trigger: 'change' }],
valueType: [{ required: true, message: '请选择取值类型', trigger: 'change' }], valueType: [{ required: true, message: '请选择取值类型', trigger: 'change' }],
ruleType: [{ required: true, message: '请选择规则类型', trigger: 'change' }], ruleType: [{ required: true, message: '请选择规则类型', trigger: 'change' }],

29
hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/index.vue

@ -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>

234
hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/look.vue

@ -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>

108
hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/notificationManagementMock.json

@ -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
}
]
}

124
hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/status.vue

@ -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>

158
hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/ts/config.ts

@ -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',
};
};
Loading…
Cancel
Save