xuziqiang
/
SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix:修改设备告警ui

temp
zhaohy 3 months ago
parent
bb792158d8
commit
cf9854e005
16 changed files with 473 additions and 253 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 42
      hx-ai-intelligent/src/components/ns-steps.vue
  2. BIN
      hx-ai-intelligent/src/icon/add.png
  3. BIN
      hx-ai-intelligent/src/icon/del.png
  4. 6
      hx-ai-intelligent/src/icon/del.svg
  5. 218
      hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/editConfigureEnergyAlarm.vue
  6. 224
      hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue
  7. 2
      hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editeEquipmentAlarm.vue
  8. 9
      hx-ai-intelligent/src/view/alarmManagement/energyAlarm/index.vue
  9. 49
      hx-ai-intelligent/src/view/alarmManagement/energyAlarm/look.vue
  10. 18
      hx-ai-intelligent/src/view/alarmManagement/energyAlarm/status.vue
  11. 9
      hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/index.vue
  12. 53
      hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue
  13. 18
      hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue
  14. 9
      hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/index.vue
  15. 51
      hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/look.vue
  16. 18
      hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/status.vue

42
hx-ai-intelligent/src/components/ns-steps.vue
View File

@ -1,18 +1,33 @@
<template> <template>
<a-steps direction="vertical" :current="size"> <a-steps direction="vertical" :current="size">
<template v-for="(item, index) in dataSource" :key="index"> <template v-for="(item, index) in dataSource" :key="index">
<a-step> <a-step title="">
<template #icon> <template #icon>
<ns-icon size="20" :name="item.src" /> <ns-icon size="20" :name="item.src" />
</template> </template>
<template #description> <template #description>
<div class="card"> <div class="card">
<div class="card-title"> <div class="card-title">
<a-tag class="card-title-tag" :color="item.color">{{ item.stateName }}</a-tag>
<div class="name">{{ item.realName }}</div> <div class="name">{{ item.realName }}</div>
<a-tag
class="card-title-tag"
:style="{
background: item.bgColor,
border: '1px solid ' + item.color,
color: item.color,
}"
>{{ item.stateName }}</a-tag
>
<div class="time">{{ item.createTime }}</div> <div class="time">{{ item.createTime }}</div>
</div> </div>
<div style="width: 100%; color: #3a3a3a; height: 25px; overflow: auto"> <div
style="
width: 100%;
color: rgba(0, 0, 0, 0.45);
height: 27px;
overflow: auto;
padding: 7px 0px;
">
{{ item.remarks }}</div {{ item.remarks }}</div
> >
</div> </div>
@ -41,36 +56,37 @@
margin-top: 10px; margin-top: 10px;
} }
.card { .card {
width: 400px; width: 450px;
min-height: 0px; min-height: 0px;
background-color: #f8fafc; background: rgba(191, 205, 226, 0.3);
margin-left: 20px;
border-radius: 4px; /* 设置圆角半径 */ border-radius: 4px; /* 设置圆角半径 */
padding: 12px; padding: 12px;
margin-left: 8px;
.card-title { .card-title {
width: 100%; width: 100%;
height: 30px; height: 30px;
display: flex; display: flex;
position: relative; position: relative;
.card-title-tag { .card-title-tag {
width: 60px; width: 50px;
height: 20px; height: 24px;
text-align: center; text-align: center;
line-height: 24px;
margin-left: 12px;
} }
} }
} }
.name { .name {
position: absolute; left: 12px;
left: 35%;
top: -2px; top: -2px;
transform: translateX(-50%); font-size: 16px;
color: #3a3a3a; color: rgba(153, 153, 153, 1);
} }
.time { .time {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: -2px; top: -2px;
color: #ff7602; color: rgba(0, 0, 0, 0.45);
} }
:deep(.ant-steps-item-tail) { :deep(.ant-steps-item-tail) {
position: absolute !important; position: absolute !important;

BIN
hx-ai-intelligent/src/icon/add.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 356 B

BIN
hx-ai-intelligent/src/icon/del.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 352 B

6
hx-ai-intelligent/src/icon/del.svg
View File

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="12px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -347 -469 )">
<path d="M 10.684322033898304 5.219491525423729 C 10.685593220338983 4.930932203389831 10.452966101694914 4.698305084745764 10.165677966101695 4.698305084745764 C 9.878389830508475 4.698305084745764 9.644491525423728 4.930932203389831 9.644491525423728 5.219491525423729 L 9.644491525423728 10.426271186440678 C 9.644491525423728 10.7135593220339 9.410593220338983 10.947457627118645 9.123305084745763 10.947457627118645 L 2.8754237288135593 10.947457627118645 C 2.588135593220339 10.947457627118645 2.354237288135593 10.7135593220339 2.354237288135593 10.426271186440678 L 2.354237288135593 5.219491525423729 C 2.354237288135593 4.932203389830509 2.1216101694915253 4.698305084745764 1.833050847457627 4.698305084745764 C 1.5444915254237288 4.698305084745764 1.3118644067796608 4.930932203389831 1.3118644067796608 5.219491525423729 L 1.3118644067796608 10.426271186440678 C 1.3118644067796608 11.288135593220339 2.01228813559322 11.988559322033899 2.8741525423728818 11.988559322033899 L 9.122033898305085 11.988559322033899 C 9.983898305084745 11.988559322033899 10.684322033898304 11.288135593220339 10.684322033898304 10.426271186440678 L 10.684322033898304 5.219491525423729 Z M 11.98728813559322 2.8766949152542374 C 11.98728813559322 2.589406779661017 11.753389830508475 2.3555084745762715 11.467372881355931 2.3555084745762715 L 9.12457627118644 2.3555084745762715 L 9.12457627118644 1.314406779661017 C 9.12457627118644 0.5961864406779662 8.539830508474576 0.012711864406779662 7.8228813559322035 0.012711864406779662 L 4.177118644067797 0.012711864406779662 C 3.458898305084746 0.012711864406779662 2.87542372881356 0.5961864406779662 2.87542372881356 1.314406779661017 L 2.87542372881356 2.3555084745762715 L 0.5326271186440679 2.3555084745762715 C 0.24661016949152548 2.3555084745762715 0.011440677966101768 2.589406779661017 0.011440677966101768 2.8766949152542374 C 0.011440677966101768 3.1627118644067798 0.2453389830508475 3.3978813559322036 0.5326271186440679 3.3978813559322036 L 11.466101694915254 3.3978813559322036 C 11.752118644067796 3.3978813559322036 11.98728813559322 3.163983050847458 11.98728813559322 2.8766949152542374 Z M 8.083474576271188 2.3555084745762715 L 3.917796610169492 2.3555084745762715 L 3.917796610169492 1.314406779661017 C 3.917796610169492 1.1707627118644068 4.034745762711864 1.053813559322034 4.1783898305084755 1.053813559322034 L 7.822881355932205 1.053813559322034 C 7.966525423728815 1.053813559322034 8.083474576271188 1.1707627118644068 8.083474576271188 1.314406779661017 L 8.083474576271188 2.3555084745762715 Z M 4.698305084745764 9.385169491525422 C 4.985593220338984 9.385169491525422 5.219491525423729 9.149999999999999 5.219491525423729 8.863983050847457 L 5.219491525423729 5.739406779661016 C 5.219491525423729 5.453389830508475 4.985593220338984 5.21822033898305 4.698305084745764 5.21822033898305 C 4.411016949152542 5.21822033898305 4.177118644067797 5.452118644067796 4.177118644067797 5.739406779661016 L 4.177118644067797 8.863983050847457 C 4.177118644067797 9.149999999999999 4.411016949152542 9.385169491525422 4.698305084745764 9.385169491525422 Z M 7.301694915254236 9.385169491525422 C 7.58771186440678 9.383898305084745 7.8228813559322035 9.149999999999999 7.8228813559322035 8.863983050847457 L 7.8228813559322035 5.739406779661016 C 7.8228813559322035 5.453389830508475 7.5889830508474585 5.21822033898305 7.301694915254236 5.21822033898305 C 7.015677966101695 5.21822033898305 6.780508474576271 5.452118644067796 6.780508474576271 5.739406779661016 L 6.780508474576271 8.863983050847457 C 6.780508474576271 9.149999999999999 7.014406779661017 9.385169491525422 7.301694915254236 9.385169491525422 Z " fill-rule="nonzero" fill="#d9001b" stroke="none" transform="matrix(1 0 0 1 347 469 )" />
</g>
</svg>

218
hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/editConfigureEnergyAlarm.vue
View File

@ -92,40 +92,64 @@
:showSearch="false" :showSearch="false"
placeholder="请选择对比类型" /> placeholder="请选择对比类型" />
</a-form-item> </a-form-item>
<template v-for="index in infoObject.alarmList?.length" :key="index"> <div class="card-log">
<div style="width: 100%; display: flex; margin-left: 42px; padding: 12px"> <template v-for="index in infoObject.alarmList?.length" :key="index">
<span style="line-height: 32px">{{ `逻辑${index}:` }}</span> <div style="width: 100%; display: flex; margin-left: 22px; padding: 12px 14px 12px 0px">
<a-select <span class="title-name" style="line-height: 32px">{{ `逻辑${index}:` }}</span>
v-model:value="infoObject.alarmList[index - 1].logic" <a-select
style="width: 70px; margin-left: 12px" v-model:value="infoObject.alarmList[index - 1].logic"
:options="logicEnum" /> style="width: 110px; margin-left: 12px"
<span style="line-height: 32px; margin-left: 32px">{{ `数值${index}:` }}</span> placeholder="请选择逻辑"
<a-input :options="logicEnum" />
style="width: 65px; margin-left: 6px" <span class="title-name" style="line-height: 32px; margin-left: 32px">{{
type="number" `数值${index}:`
v-model:value="infoObject.alarmList[index - 1].num" /> }}</span>
<a-input
style="width: 110px; margin-left: 6px"
type="number"
placeholder="请输入数值"
v-model:value="infoObject.alarmList[index - 1].num" />
<div
v-if="index > 1 && index === infoObject.alarmList?.length"
style="
cursor: pointer;
width: 20px;
height: 32px;
display: flex;
align-items: center;
margin-left: 16px;
"
@click="addAlarmList">
<img style="width: 16px" src="../../../../../src/icon/add.png" />
</div>
<div
v-if="index > 1 && infoObject.alarmList?.length > 2"
style="
cursor: pointer;
width: 20px;
height: 32px;
display: flex;
align-items: center;
margin-left: 16px;
"
@click="deleteAlarmList(index - 1)">
<img style="width: 16px" src="../../../../../src/icon/del.png" />
</div>
</div>
<div <div
style="width: 70px; align-items: center; cursor: pointer" v-if="
@click="deleteAlarmList(index - 1)"> infoObject.alarmList[index - 1]?.num === '' ||
<img style="width: 14px; margin: 0 12px" src="../../../../../src/icon/del.svg" /> infoObject.alarmList[index - 1]?.logic === null
"
style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }}
</div> </div>
</div> </template>
<div <div
v-if=" v-if="infoObject.alarmList?.length < 2"
infoObject.alarmList[index - 1]?.num === null ||
infoObject.alarmList[index - 1]?.logic === null
"
style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px"> style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }} 逻辑至少2条
</div> </div>
</template>
<div
v-if="infoObject.alarmList?.length < 2"
style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
逻辑至少2条
</div>
<div style="width: 100%; margin-top: 12px; display: flex; justify-content: flex-end">
<a-button type="primary" @click="addAlarmList"> 新增</a-button>
</div> </div>
</a-form> </a-form>
</div> </div>
@ -157,7 +181,10 @@
abnormalDescription: null, abnormalDescription: null,
dataSources: null, dataSources: null,
enableRules: 0, enableRules: 0,
alarmList: [{ id: null, logic: null, num: null, isDelete: 0 }], alarmList: [
{ id: null, logic: null, num: '', isDelete: 0 },
{ id: null, logic: null, num: '', isDelete: 0 },
],
}); });
const emit = defineEmits(['editObject']); const emit = defineEmits(['editObject']);
//删除的逻辑列表 //删除的逻辑列表
@ -346,7 +373,10 @@
abnormalDescription: null, abnormalDescription: null,
dataSources: null, dataSources: null,
enableRules: 0, enableRules: 0,
alarmList: [{ id: null, logic: null, num: null, isDelete: 0 }], alarmList: [
{ id: null, logic: null, num: '', isDelete: 0 },
{ id: null, logic: null, num: '', isDelete: 0 },
],
}; };
infoObject.value.site = orgId.value; infoObject.value.site = orgId.value;
} }
@ -374,61 +404,68 @@
}, },
], ],
}; };
// 确认按钮 const getBoolean = () => {
const btnClick = () => { for (const item of infoObject.value.alarmList) {
infoObject.value.alarmList.forEach((item) => { if (item.logic === null || item.num === '') {
if (item.logic === null || item.num === null) { return false;
return;
} }
}); }
if (infoObject.value.alarmList.length < 2) { if (infoObject.value.alarmList.length < 2) {
NsMessage.error('请选择逻辑和数值'); NsMessage.error('请选择逻辑和数值');
return; return false;
} }
return true;
};
// 确认按钮
const btnClick = async () => {
let formBoolean = await getBoolean();
//数据是否验证通过 //数据是否验证通过
formRef.value.validate().then(() => { if (formBoolean) {
//处理数据 formRef.value.validate().then(() => {
let data = { ...infoObject.value }; //处理数据
if (!data.orgId) { let data = { ...infoObject.value };
data.orgId = orgId.value; if (!data.orgId) {
} data.orgId = orgId.value;
//关联能耗告警id
data.energyConsumptionAlarmId = energyAlarm.value.id;
data.errorCode = energyAlarm.value.errorCode;
data.dataSourcesType = data.dataSources[0];
data.dataSourcesWay = data.dataSources[1];
delete data.dataSources;
data.hxAlarmRuleLogicList = [...infoObject.value.alarmList, ...delAlarmList.value];
data.comparisonType = data.comparisonType.toString();
data.hxAlarmRuleLogicList.forEach((item) => {
const num = Number(item.num);
if (!isNaN(num)) {
item.num = Number(num.toFixed(2));
} else {
item.num = 0; // 可以设置为0或其他默认值
} }
}); //关联能耗告警id
data.ruleType = Number(data.ruleType); data.energyConsumptionAlarmId = energyAlarm.value.id;
delete data.alarmList; data.errorCode = energyAlarm.value.errorCode;
http data.dataSourcesType = data.dataSources[0];
.post(energyAlarms.configAddOrUpNewData, data) data.dataSourcesWay = data.dataSources[1];
.then((res) => { delete data.dataSources;
if (res.msg === 'success') { data.hxAlarmRuleLogicList = [...infoObject.value.alarmList, ...delAlarmList.value];
// 操作成功时的处理 data.comparisonType = data.comparisonType.toString();
if (data.id) { data.hxAlarmRuleLogicList.forEach((item) => {
NsMessage.success('告警规则编辑成功'); const num = Number(item.num);
} else { if (!isNaN(num)) {
NsMessage.success('告警规则新增成功'); item.num = Number(num.toFixed(2));
} } else {
emit('editObject', null); item.num = 0; // 可以设置为0或其他默认值
handleClose();
} }
})
.catch((error) => {
// 错误处理
console.error('请求失败：', error);
}); });
}); data.ruleType = Number(data.ruleType);
delete data.alarmList;
http
.post(energyAlarms.configAddOrUpNewData, data)
.then((res) => {
if (res.msg === 'success') {
// 操作成功时的处理
if (data.id) {
NsMessage.success('告警规则编辑成功');
} else {
NsMessage.success('告警规则新增成功');
}
emit('editObject', null);
handleClose();
}
})
.catch((error) => {
// 错误处理
console.error('请求失败：', error);
});
});
}
}; };
//取消按钮 //取消按钮
const handleClose = () => { const handleClose = () => {
@ -443,7 +480,10 @@
abnormalDescription: null, abnormalDescription: null,
dataSources: null, dataSources: null,
enableRules: 0, enableRules: 0,
alarmList: [{ id: null, logic: null, num: null, isDelete: 0 }], alarmList: [
{ id: null, logic: null, num: '', isDelete: 0 },
{ id: null, logic: null, num: '', isDelete: 0 },
],
}; };
visible.value = false; visible.value = false;
delAlarmList.value = []; delAlarmList.value = [];
@ -451,9 +491,9 @@
// 新增逻辑列表 // 新增逻辑列表
const addAlarmList = () => { const addAlarmList = () => {
if (infoObject.value.alarmList) { if (infoObject.value.alarmList) {
infoObject.value.alarmList.push({ id: null, logic: null, num: null, isDelete: 0 }); infoObject.value.alarmList.push({ id: null, logic: null, num: '', isDelete: 0 });
} else { } else {
infoObject.value.alarmList = [{ id: null, logic: null, num: null, isDelete: 0 }]; infoObject.value.alarmList = [{ id: null, logic: null, num: '', isDelete: 0 }];
} }
}; };
// 删除 逻辑列表、 // 删除 逻辑列表、
@ -522,4 +562,20 @@
text-align: right; text-align: right;
width: 20%; width: 20%;
} }
.card-log {
width: 100%;
height: auto;
border-radius: 4px;
background: rgba(250, 250, 250, 1);
padding-bottom: 12px;
.title-name::before {
display: inline-block;
margin-right: 4px;
color: #ff4d4f;
font-size: 14px;
font-family: SimSun, sans-serif;
line-height: 1;
content: '*';
}
}
</style> </style>

224
hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue
View File

@ -103,48 +103,64 @@
<a-radio value="2">或 (or) </a-radio> <a-radio value="2">或 (or) </a-radio>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<template v-for="index in infoObject.alarmList?.length" :key="index"> <div class="card-log">
<div <template v-for="index in infoObject.alarmList?.length" :key="index">
style=" <div style="width: 100%; display: flex; margin-left: 22px; padding: 12px 14px 12px 0px">
width: 100%; <span class="title-name" style="line-height: 32px">{{ `逻辑${index}:` }}</span>
display: flex; <a-select
margin-left: 42px; v-model:value="infoObject.alarmList[index - 1].logic"
padding: 12px; style="width: 110px; margin-left: 12px"
border-color: #ff4d4f !important; placeholder="请选择逻辑"
"> :options="logicEnum" />
<span style="line-height: 32px">{{ `逻辑${index}:` }}</span> <span class="title-name" style="line-height: 32px; margin-left: 32px">{{
<a-select `数值${index}:`
v-model:value="infoObject.alarmList[index - 1].logic" }}</span>
style="width: 70px; margin-left: 12px" <a-input
:options="logicEnum" /> style="width: 110px; margin-left: 6px"
<span style="line-height: 32px; margin-left: 32px">{{ `数值${index}:` }}</span> type="number"
<a-input placeholder="请输入数值"
style="width: 65px; margin-left: 6px" v-model:value="infoObject.alarmList[index - 1].num" />
type="number" <div
status="error" v-if="index > 1 && index === infoObject.alarmList?.length"
v-model:value="infoObject.alarmList[index - 1].num" /> style="
cursor: pointer;
width: 20px;
height: 32px;
display: flex;
align-items: center;
margin-left: 16px;
"
@click="addAlarmList">
<img style="width: 16px" src="../../../../../src/icon/add.png" />
</div>
<div
v-if="index > 1 && infoObject.alarmList?.length > 2"
style="
cursor: pointer;
width: 20px;
height: 32px;
display: flex;
align-items: center;
margin-left: 16px;
"
@click="deleteAlarmList(index - 1)">
<img style="width: 16px" src="../../../../../src/icon/del.png" />
</div>
</div>
<div <div
style="width: 70px; align-items: center; cursor: pointer" v-if="
@click="deleteAlarmList(index - 1)"> infoObject.alarmList[index - 1]?.num === '' ||
<img style="width: 14px; margin: 0 12px" src="../../../../../src/icon/del.svg" /> infoObject.alarmList[index - 1]?.logic === null
"
style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }}
</div> </div>
</div> </template>
<div <div
v-if=" v-if="infoObject?.alarmList?.length < 2"
infoObject.alarmList[index - 1]?.num === null ||
infoObject.alarmList[index - 1]?.logic === null
"
style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px"> style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }} 逻辑至少2条
</div> </div>
</template>
<div
v-if="infoObject?.alarmList?.length < 2"
style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
逻辑至少2条
</div>
<div style="width: 100%; margin-top: 12px; display: flex; justify-content: flex-end">
<a-button type="primary" @click="addAlarmList"> 新增</a-button>
</div> </div>
</a-form> </a-form>
</div> </div>
@ -173,7 +189,10 @@
valueType: null, valueType: null,
deviceInfoCode: null, deviceInfoCode: null,
enableRules: 0, enableRules: 0,
alarmList: [{ logic: null, num: null, isDelete: 0 }], alarmList: [
{ logic: null, num: '', isDelete: 0 },
{ id: null, logic: null, num: '', isDelete: 0 },
],
}); });
//删除的逻辑列表 //删除的逻辑列表
const delAlarmList = ref([]); const delAlarmList = ref([]);
@ -363,7 +382,10 @@
valueType: null, valueType: null,
deviceInfoCode: null, deviceInfoCode: null,
enableRules: 0, enableRules: 0,
alarmList: [{ logic: null, num: null, isDelete: 0 }], alarmList: [
{ logic: null, num: '', isDelete: 0 },
{ logic: null, num: '', isDelete: 0 },
],
}; };
infoObject.value.site = orgId.value; infoObject.value.site = orgId.value;
} }
@ -396,60 +418,67 @@
alarm: [{ required: true, message: '请选择逻辑', trigger: 'blur' }], alarm: [{ required: true, message: '请选择逻辑', trigger: 'blur' }],
number: [{ required: true, message: '请输入数值', trigger: 'blur' }], number: [{ required: true, message: '请输入数值', trigger: 'blur' }],
}; };
// 确认按钮 const getBoolean = () => {
const btnClick = () => { for (const item of infoObject.value.alarmList) {
infoObject.value.alarmList.forEach((item) => { if (item.logic === null || item.num === '') {
if (item.logic === null || item.num === null) { return false;
return;
} }
}); }
if (infoObject.value.alarmList.length < 2) { if (infoObject.value.alarmList.length < 2) {
NsMessage.error('请选择逻辑和数值'); NsMessage.error('请选择逻辑和数值');
return; return false;
} }
return true;
};
// 确认按钮
const btnClick = async () => {
let formBoolean = await getBoolean();
//数据是否验证通过 //数据是否验证通过
formRef.value.validate().then(() => { if (formBoolean) {
let data = { ...infoObject.value }; formRef.value.validate().then(() => {
if (!data.orgId) { let data = { ...infoObject.value };
data.orgId = orgId.value; if (!data.orgId) {
} data.orgId = orgId.value;
// 配置关联id
data.equipmentAlarmId = equipmentAlarm.value.id;
// 逻辑列表
data.hxAlarmRuleLogicList = [...infoObject.value.alarmList, ...delAlarmList.value];
data.hxAlarmRuleLogicList.forEach((item) => {
const num = Number(item.num);
if (!isNaN(num)) {
item.num = Number(num.toFixed(2));
} else {
item.num = 0; // 可以设置为0或其他默认值
} }
}); // 配置关联id
// 设备类型 只取最后一级的id data.equipmentAlarmId = equipmentAlarm.value.id;
data.deviceType = infoObject.value.deviceType[infoObject.value.deviceType.length - 1]; // 逻辑列表
data.ruleType = Number(data.ruleType); data.hxAlarmRuleLogicList = [...infoObject.value.alarmList, ...delAlarmList.value];
data.errorCode = equipmentAlarm.value.errorCode; data.hxAlarmRuleLogicList.forEach((item) => {
delete data.alarmList; const num = Number(item.num);
// 发起 HTTP POST 请求 if (!isNaN(num)) {
http item.num = Number(num.toFixed(2));
.post(deviceAlarms.configAddOrUpNewData, data) } else {
.then((res) => { item.num = 0; // 可以设置为0或其他默认值
if (res.msg === 'success') {
// 操作成功时的处理
if (data.id) {
NsMessage.success('告警规则编辑成功');
} else {
NsMessage.success('告警规则新增成功');
}
emit('editObject', null);
handleClose();
} }
})
.catch((error) => {
// 错误处理
console.error('请求失败：', error);
}); });
}); // 设备类型 只取最后一级的id
data.deviceType = infoObject.value.deviceType[infoObject.value.deviceType.length - 1];
data.ruleType = Number(data.ruleType);
data.errorCode = equipmentAlarm.value.errorCode;
delete data.alarmList;
// 发起 HTTP POST 请求
http
.post(deviceAlarms.configAddOrUpNewData, data)
.then((res) => {
if (res.msg === 'success') {
// 操作成功时的处理
if (data.id) {
NsMessage.success('告警规则编辑成功');
} else {
NsMessage.success('告警规则新增成功');
}
emit('editObject', null);
handleClose();
}
})
.catch((error) => {
// 错误处理
console.error('请求失败：', error);
});
});
}
}; };
//取消按钮 //取消按钮
const handleClose = () => { const handleClose = () => {
@ -466,7 +495,10 @@
valueType: null, valueType: null,
deviceInfoCode: null, deviceInfoCode: null,
enableRules: 0, enableRules: 0,
alarmList: [{ logic: null, num: null, isDelete: 0 }], alarmList: [
{ logic: null, num: '', isDelete: 0 },
{ logic: null, num: '', isDelete: 0 },
],
}; };
visible.value = false; visible.value = false;
//清空删除列表 //清空删除列表
@ -475,9 +507,9 @@
// 新增逻辑列表 // 新增逻辑列表
const addAlarmList = () => { const addAlarmList = () => {
if (infoObject.value.alarmList) { if (infoObject.value.alarmList) {
infoObject.value.alarmList.push({ logic: null, num: null, isDelete: 0 }); infoObject.value.alarmList.push({ logic: null, num: '', isDelete: 0 });
} else { } else {
infoObject.value.alarmList = [{ logic: null, num: null, isDelete: 0 }]; infoObject.value.alarmList = [{ logic: null, num: '', isDelete: 0 }];
} }
}; };
// 删除 逻辑列表、 // 删除 逻辑列表、
@ -550,4 +582,20 @@
width: 20%; width: 20%;
position: relative; position: relative;
} }
.card-log {
width: 100%;
height: auto;
border-radius: 4px;
background: rgba(250, 250, 250, 1);
padding-bottom: 12px;
.title-name::before {
display: inline-block;
margin-right: 4px;
color: #ff4d4f;
font-size: 14px;
font-family: SimSun, sans-serif;
line-height: 1;
content: '*';
}
}
</style> </style>

2
hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editeEquipmentAlarm.vue
View File

@ -326,8 +326,6 @@
data.intervalDuration = null; data.intervalDuration = null;
data.intervalDurationUnit = null; data.intervalDurationUnit = null;
} }
console.log(data, '数据');
if (!data.orgId) { if (!data.orgId) {
data.orgId = orgId.value; data.orgId = orgId.value;
} }

9
hx-ai-intelligent/src/view/alarmManagement/energyAlarm/index.vue
View File

@ -14,7 +14,7 @@
</template> </template>
</ns-view-list-table> </ns-view-list-table>
<!-- 详情页面 --> <!-- 详情页面 -->
<Look ref="look" /> <Look class="look-energy" ref="look" />
<!-- 状态页面 --> <!-- 状态页面 -->
<Status ref="status" @logAdd="logAdd" /> <Status ref="status" @logAdd="logAdd" />
</template> </template>
@ -46,3 +46,10 @@
}, },
}; };
</script> </script>
<style lang="less">
.look-energy {
.ant-drawer-body {
padding: 24px 40px !important;
}
}
</style>

49
hx-ai-intelligent/src/view/alarmManagement/energyAlarm/look.vue
View File

@ -11,9 +11,7 @@
<div style="width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden"> <div style="width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden">
<!-- top --> <!-- top -->
<div class="boxstyle"> <div class="boxstyle">
<div <div class="ns-title-extra-box" style="position: absolute; height: 35px; line-height: 30px">
class="ns-title-extra-box"
style="left: 5px; position: absolute; height: 35px; line-height: 30px">
告警编号：{{ infoObject.alarmCode }} 告警编号：{{ infoObject.alarmCode }}
</div> </div>
<div style="right: 20px; position: absolute; height: 35px; line-height: 30px"> <div style="right: 20px; position: absolute; height: 35px; line-height: 30px">
@ -21,7 +19,7 @@
</div> </div>
</div> </div>
<!-- center --> <!-- center -->
<div style="width: 100%; height: 400px"> <div style="width: 100%; height: 300px">
<div style="width: 100%; height: 100%" ref="graphChart"></div> <div style="width: 100%; height: 100%" ref="graphChart"></div>
</div> </div>
<!-- bottom --> <!-- bottom -->
@ -214,19 +212,14 @@
//滑块样式 //滑块样式
dataZoom: [ dataZoom: [
{ {
type: 'inside',
start: 0,
end: 100,
},
{
type: 'slider', type: 'slider',
// backgroundColor: 'yellow', // backgroundColor: 'yellow',
// fillerColor: 'yellow', // fillerColor: 'yellow',
height: 12, // 设置slider的高度为15 height: 12, // 设置slider的高度为15
start: 0, start: 0,
end: 100, end: 100,
right: 60, right: 11,
left: 60, left: 10,
bottom: 10, bottom: 10,
handleIcon: handleIcon:
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标
@ -257,15 +250,20 @@
name: '电压值', name: '电压值',
type: 'line', type: 'line',
itemStyle: { itemStyle: {
color: '#fff',
borderColor: 'rgba(67, 136, 251, 1)',
borderWidth: 2,
},
lineStyle: {
normal: { normal: {
barBorderRadius: 0, color: 'rgba(67, 136, 251, 1)',
color: '#2778FF', width: 2,
}, },
}, },
symbol: 'circle', // 数据点的形状，这里设置为圆形 symbol: 'circle', // 数据点的形状，这里设置为圆形
symbolSize: 8, symbolSize: 8,
label: { label: {
show: true, show: false,
color: 'rgb(89, 89, 89)', color: 'rgb(89, 89, 89)',
position: 'top', position: 'top',
top: '10', top: '10',
@ -273,6 +271,29 @@
return Number(energyAlarm[value.dataIndex]) + 'V'; return Number(energyAlarm[value.dataIndex]) + 'V';
}, },
}, },
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(22, 127, 255, 0.4)',
},
{
offset: 1,
color: 'rgba(22, 127, 255, 0)',
},
],
false,
),
shadowColor: 'rgba(22, 127, 255, 0.4)',
shadowBlur: 20,
},
},
data: energyAlarm, data: energyAlarm,
}, },
], ],

18
hx-ai-intelligent/src/view/alarmManagement/energyAlarm/status.vue
View File

@ -142,15 +142,23 @@
infoObject.value = { ...logList.value[0] }; infoObject.value = { ...logList.value[0] };
infoObject.value.state = infoObject.value.state.value; infoObject.value.state = infoObject.value.state.value;
let colorMap = { let colorMap = {
1: '#ff7602', 1: 'rgba(191, 205, 226, 1)',
2: '#00a1e6', 2: 'rgba(243, 97, 99, 1)',
3: '#04d919', 3: 'rgba(41, 196, 154, 1)',
4: '#d9001b', 4: 'rgba(217, 0, 27,1)',
5: '#a6a6a6', 5: 'rgba(166, 166, 166,1)',
};
let bgColorMap = {
1: 'rgba(191, 205, 226, 0.1)',
2: 'rgba(243, 97, 99, 0.1)',
3: 'rgba(41, 196, 154, 0.1)',
4: 'rgba(217, 0, 27, 0.1)',
5: 'rgba(166, 166, 166,0.1)',
}; };
logList.value.forEach((item) => { logList.value.forEach((item) => {
item.stateName = item.state.label; item.stateName = item.state.label;
item.color = colorMap[item.state.value]; item.color = colorMap[item.state.value];
item.bgColor = bgColorMap[item.state];
item.src = 'state-' + item.state.value; item.src = 'state-' + item.state.value;
}); });
config.value.dataSource = logList.value; config.value.dataSource = logList.value;

9
hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/index.vue
View File

@ -14,7 +14,7 @@
</template> </template>
</ns-view-list-table> </ns-view-list-table>
<!-- 详情页面 --> <!-- 详情页面 -->
<Look ref="look" /> <Look class="look-equipment" ref="look" />
<!-- 状态页面 --> <!-- 状态页面 -->
<Status ref="status" @logAdd="logAdd" /> <Status ref="status" @logAdd="logAdd" />
</template> </template>
@ -46,3 +46,10 @@
}, },
}; };
</script> </script>
<style lang="less">
.look-equipment {
.ant-drawer-body {
padding: 24px 40px !important;
}
}
</style>

53
hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue
View File

@ -11,9 +11,7 @@
<div style="width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden"> <div style="width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden">
<!-- top --> <!-- top -->
<div class="boxstyle"> <div class="boxstyle">
<div <div class="ns-title-extra-box" style="position: absolute; height: 35px; line-height: 30px">
class="ns-title-extra-box"
style="left: 5px; position: absolute; height: 35px; line-height: 30px">
告警编号：{{ infoObject.alarmCode }} 告警编号：{{ infoObject.alarmCode }}
</div> </div>
<div style="right: 20px; position: absolute; height: 35px; line-height: 30px"> <div style="right: 20px; position: absolute; height: 35px; line-height: 30px">
@ -21,7 +19,7 @@
</div> </div>
</div> </div>
<!-- center --> <!-- center -->
<div style="width: 100%; height: 400px"> <div style="width: 100%; height: 300px">
<div style="width: 100%; height: 100%" ref="graphChart"></div> <div style="width: 100%; height: 100%" ref="graphChart"></div>
</div> </div>
<!-- bottom --> <!-- bottom -->
@ -134,8 +132,8 @@
}, },
}, },
grid: { grid: {
left: '10%', // 设置图表距离左边的距离 left: '9%', // 设置图表距离左边的距离
right: '4%', // 设置图表距离右边的距离 right: '3%', // 设置图表距离右边的距离
top: '6%', top: '6%',
borderWidth: 0, borderWidth: 0,
y2: 60, // 距离底边 y2: 60, // 距离底边
@ -213,19 +211,14 @@
//滑块样式 //滑块样式
dataZoom: [ dataZoom: [
{ {
type: 'inside',
start: 0,
end: 100,
},
{
type: 'slider', type: 'slider',
// backgroundColor: 'yellow', // backgroundColor: 'yellow',
// fillerColor: 'yellow', // fillerColor: 'yellow',
height: 12, // 设置slider的高度为15 height: 12, // 设置slider的高度为15
start: 0, start: 0,
end: 100, end: 100,
right: 60, right: 10,
left: 60, left: 10,
bottom: 10, bottom: 10,
handleIcon: handleIcon:
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标
@ -256,15 +249,20 @@
name: '电压值', name: '电压值',
type: 'line', type: 'line',
itemStyle: { itemStyle: {
color: '#fff',
borderColor: 'rgba(67, 136, 251, 1)',
borderWidth: 2,
},
lineStyle: {
normal: { normal: {
barBorderRadius: 0, color: 'rgba(67, 136, 251, 1)',
color: '#2778FF', width: 2,
}, },
}, },
symbol: 'circle', // 数据点的形状，这里设置为圆形 symbol: 'circle', // 数据点的形状，这里设置为圆形
symbolSize: 8, symbolSize: 8,
label: { label: {
show: true, show: false,
color: 'rgb(89, 89, 89)', color: 'rgb(89, 89, 89)',
position: 'top', position: 'top',
top: '10', top: '10',
@ -272,6 +270,29 @@
return Number(energyAlarm[value.dataIndex]) + 'V'; return Number(energyAlarm[value.dataIndex]) + 'V';
}, },
}, },
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(22, 127, 255, 0.4)',
},
{
offset: 1,
color: 'rgba(22, 127, 255, 0)',
},
],
false,
),
shadowColor: 'rgba(22, 127, 255, 0.4)',
shadowBlur: 20,
},
},
data: energyAlarm, data: energyAlarm,
}, },
], ],

18
hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue
View File

@ -143,15 +143,23 @@
infoObject.value = { ...logList.value[0] }; infoObject.value = { ...logList.value[0] };
infoObject.value.state = infoObject.value.state.value; infoObject.value.state = infoObject.value.state.value;
let colorMap = { let colorMap = {
1: '#ff7602', 1: 'rgba(191, 205, 226, 1)',
2: '#00a1e6', 2: 'rgba(243, 97, 99, 1)',
3: '#04d919', 3: 'rgba(41, 196, 154, 1)',
4: '#d9001b', 4: 'rgba(217, 0, 27,1)',
5: '#a6a6a6', 5: 'rgba(166, 166, 166,1)',
};
let bgColorMap = {
1: 'rgba(191, 205, 226, 0.1)',
2: 'rgba(243, 97, 99, 0.1)',
3: 'rgba(41, 196, 154, 0.1)',
4: 'rgba(217, 0, 27, 0.1)',
5: 'rgba(166, 166, 166,0.1)',
}; };
logList.value.forEach((item) => { logList.value.forEach((item) => {
item.stateName = item.state.label; item.stateName = item.state.label;
item.color = colorMap[item.state.value]; item.color = colorMap[item.state.value];
item.bgColor = bgColorMap[item.state];
item.src = 'state-' + item.state.value; item.src = 'state-' + item.state.value;
}); });
config.value.dataSource = logList.value; config.value.dataSource = logList.value;

9
hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/index.vue
View File

@ -10,7 +10,7 @@
</template> </template>
</ns-view-list-table> </ns-view-list-table>
<!-- 详情页面 --> <!-- 详情页面 -->
<Look ref="look" /> <Look class="look-gateWay" ref="look" />
<!-- 状态页面 --> <!-- 状态页面 -->
<Status ref="status" /> <Status ref="status" />
</template> </template>
@ -36,3 +36,10 @@
}, },
}; };
</script> </script>
<style lang="less">
.look-gateWay {
.ant-drawer-body {
padding: 24px 40px !important;
}
}
</style>

51
hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/look.vue
View File

@ -11,9 +11,7 @@
<div style="width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden"> <div style="width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden">
<!-- top --> <!-- top -->
<div class="boxstyle"> <div class="boxstyle">
<div <div class="ns-title-extra-box" style="position: absolute; height: 35px; line-height: 30px">
class="ns-title-extra-box"
style="left: 25px; position: absolute; height: 35px; line-height: 30px">
告警编号：{{ infoObject.alarmCode }} 告警编号：{{ infoObject.alarmCode }}
</div> </div>
<div style="right: 30px; position: absolute; height: 35px; line-height: 30px"> <div style="right: 30px; position: absolute; height: 35px; line-height: 30px">
@ -21,7 +19,7 @@
</div> </div>
</div> </div>
<!-- center --> <!-- center -->
<div style="width: 100%; height: 400px"> <div style="width: 100%; height: 300px">
<div style="width: 100%; height: 100%" ref="graphChart"></div> <div style="width: 100%; height: 100%" ref="graphChart"></div>
</div> </div>
<!-- bottom --> <!-- bottom -->
@ -127,8 +125,8 @@
}, },
}, },
grid: { grid: {
left: '10%', // 设置图表距离左边的距离 left: '3%', // 设置图表距离左边的距离
right: '4%', // 设置图表距离右边的距离 right: '3%', // 设置图表距离右边的距离
top: '6%', top: '6%',
borderWidth: 0, borderWidth: 0,
y2: 60, // 距离底边 y2: 60, // 距离底边
@ -201,19 +199,14 @@
//滑块样式 //滑块样式
dataZoom: [ dataZoom: [
{ {
type: 'inside',
start: 0,
end: 100,
},
{
type: 'slider', type: 'slider',
// backgroundColor: 'yellow', // backgroundColor: 'yellow',
// fillerColor: 'yellow', // fillerColor: 'yellow',
height: 12, // 设置slider的高度为15 height: 12, // 设置slider的高度为15
start: 0, start: 0,
end: 100, end: 100,
right: 60, right: 11,
left: 60, left: 10,
bottom: 10, bottom: 10,
handleIcon: handleIcon:
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标
@ -244,9 +237,14 @@
name: '状态', name: '状态',
type: 'line', type: 'line',
itemStyle: { itemStyle: {
color: '#fff',
borderColor: 'rgba(67, 136, 251, 1)',
borderWidth: 2,
},
lineStyle: {
normal: { normal: {
barBorderRadius: 0, color: 'rgba(67, 136, 251, 1)',
color: '#2778FF', width: 2,
}, },
}, },
symbol: 'circle', // 数据点的形状，这里设置为圆形 symbol: 'circle', // 数据点的形状，这里设置为圆形
@ -260,6 +258,29 @@
// return Number(energyAlarm[value.dataIndex]) ; // return Number(energyAlarm[value.dataIndex]) ;
// }, // },
// }, // },
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(22, 127, 255, 0.4)',
},
{
offset: 1,
color: 'rgba(22, 127, 255, 0)',
},
],
false,
),
shadowColor: 'rgba(22, 127, 255, 0.4)',
shadowBlur: 20,
},
},
data: energyAlarm, data: energyAlarm,
}, },
], ],

18
hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/status.vue
View File

@ -60,15 +60,23 @@
5: '已关闭', 5: '已关闭',
}; };
let colorMap = { let colorMap = {
1: '#ff7602', 1: 'rgba(191, 205, 226, 1)',
2: '#00a1e6', 2: 'rgba(243, 97, 99, 1)',
3: '#04d919', 3: 'rgba(41, 196, 154, 1)',
4: '#d9001b', 4: 'rgba(217, 0, 27,1)',
5: '#a6a6a6', 5: 'rgba(166, 166, 166,1)',
};
let bgColorMap = {
1: 'rgba(191, 205, 226, 0.1)',
2: 'rgba(243, 97, 99, 0.1)',
3: 'rgba(41, 196, 154, 0.1)',
4: 'rgba(217, 0, 27, 0.1)',
5: 'rgba(166, 166, 166,0.1)',
}; };
logList.value.forEach((item) => { logList.value.forEach((item) => {
item.stateName = stateMap[item.state]; item.stateName = stateMap[item.state];
item.color = colorMap[item.state]; item.color = colorMap[item.state];
item.bgColor = bgColorMap[item.state];
item.src = 'state-' + item.state; item.src = 'state-' + item.state;
}); });
visible.value = true; visible.value = true;

Write Preview
Loading…
Cancel
Save