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

fix:修改设备告警ui

Browse Source
This commit is contained in:
zhaohy
2024-08-20 11:36:32 +08:00
parent bb792158d8
commit cf9854e005
16 changed files with 475 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -92,40 +92,64 @@
:showSearch="false"
placeholder="请选择对比类型" />
</a-form-item>
<template v-for="index in infoObject.alarmList?.length" :key="index">
<div style="width: 100%; display: flex; margin-left: 42px; padding: 12px">
<span style="line-height: 32px">{{ `逻辑${index}:` }}</span>
<a-select
v-model:value="infoObject.alarmList[index - 1].logic"
style="width: 70px; margin-left: 12px"
:options="logicEnum" />
<span style="line-height: 32px; margin-left: 32px">{{ `数值${index}:` }}</span>
<a-input
style="width: 65px; margin-left: 6px"
type="number"
v-model:value="infoObject.alarmList[index - 1].num" />
<div
style="width: 70px; align-items: center; cursor: pointer"
@click="deleteAlarmList(index - 1)">
<img style="width: 14px; margin: 0 12px" src="../../../../../src/icon/del.svg" />
<div class="card-log">
<template v-for="index in infoObject.alarmList?.length" :key="index">
<div style="width: 100%; display: flex; margin-left: 22px; padding: 12px 14px 12px 0px">
<span class="title-name" style="line-height: 32px">{{ `逻辑${index}:` }}</span>
<a-select
v-model:value="infoObject.alarmList[index - 1].logic"
style="width: 110px; margin-left: 12px"
placeholder="请选择逻辑"
:options="logicEnum" />
<span class="title-name" style="line-height: 32px; margin-left: 32px">{{
`数值${index}:`
}}</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
v-if="
infoObject.alarmList[index - 1]?.num === '' ||
infoObject.alarmList[index - 1]?.logic === null
"
style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }}
</div>
</template>
<div
v-if="
infoObject.alarmList[index - 1]?.num === null ||
infoObject.alarmList[index - 1]?.logic === null
"
v-if="infoObject.alarmList?.length < 2"
style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }}
逻辑至少2条
</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>
</a-form>
</div>
@@ -157,7 +181,10 @@
abnormalDescription: null,
dataSources: null,
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']);
//删除的逻辑列表
@@ -346,7 +373,10 @@
abnormalDescription: null,
dataSources: null,
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;
}
@@ -374,61 +404,68 @@
},
],
};
// 确认按钮
const btnClick = () => {
infoObject.value.alarmList.forEach((item) => {
if (item.logic === null || item.num === null) {
return;
const getBoolean = () => {
for (const item of infoObject.value.alarmList) {
if (item.logic === null || item.num === '') {
return false;
}
});
}
if (infoObject.value.alarmList.length < 2) {
NsMessage.error('请选择逻辑和数值');
return;
return false;
}
return true;
};
// 确认按钮
const btnClick = async () => {
let formBoolean = await getBoolean();
//数据是否验证通过
formRef.value.validate().then(() => {
//处理数据
let data = { ...infoObject.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或其他默认值
if (formBoolean) {
formRef.value.validate().then(() => {
//处理数据
let data = { ...infoObject.value };
if (!data.orgId) {
data.orgId = orgId.value;
}
});
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();
//关联能耗告警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或其他默认值
}
})
.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 = () => {
@@ -443,7 +480,10 @@
abnormalDescription: null,
dataSources: null,
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;
delAlarmList.value = [];
@@ -451,9 +491,9 @@
// 新增逻辑列表
const addAlarmList = () => {
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 {
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;
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>

226
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-group>
</a-form-item>
<template v-for="index in infoObject.alarmList?.length" :key="index">
<div
style="
width: 100%;
display: flex;
margin-left: 42px;
padding: 12px;
border-color: #ff4d4f !important;
">
<span style="line-height: 32px">{{ `逻辑${index}:` }}</span>
<a-select
v-model:value="infoObject.alarmList[index - 1].logic"
style="width: 70px; margin-left: 12px"
:options="logicEnum" />
<span style="line-height: 32px; margin-left: 32px">{{ `数值${index}:` }}</span>
<a-input
style="width: 65px; margin-left: 6px"
type="number"
status="error"
v-model:value="infoObject.alarmList[index - 1].num" />
<div
style="width: 70px; align-items: center; cursor: pointer"
@click="deleteAlarmList(index - 1)">
<img style="width: 14px; margin: 0 12px" src="../../../../../src/icon/del.svg" />
<div class="card-log">
<template v-for="index in infoObject.alarmList?.length" :key="index">
<div style="width: 100%; display: flex; margin-left: 22px; padding: 12px 14px 12px 0px">
<span class="title-name" style="line-height: 32px">{{ `逻辑${index}:` }}</span>
<a-select
v-model:value="infoObject.alarmList[index - 1].logic"
style="width: 110px; margin-left: 12px"
placeholder="请选择逻辑"
:options="logicEnum" />
<span class="title-name" style="line-height: 32px; margin-left: 32px">{{
`数值${index}:`
}}</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
v-if="
infoObject.alarmList[index - 1]?.num === '' ||
infoObject.alarmList[index - 1]?.logic === null
"
style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }}
</div>
</template>
<div
v-if="
infoObject.alarmList[index - 1]?.num === null ||
infoObject.alarmList[index - 1]?.logic === null
"
v-if="infoObject?.alarmList?.length < 2"
style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }}
逻辑至少2条
</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>
</a-form>
</div>
@@ -173,7 +189,10 @@
valueType: null,
deviceInfoCode: null,
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([]);
@@ -363,7 +382,10 @@
valueType: null,
deviceInfoCode: null,
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;
}
@@ -396,60 +418,67 @@
alarm: [{ required: true, message: '请选择逻辑', trigger: 'blur' }],
number: [{ required: true, message: '请输入数值', trigger: 'blur' }],
};
// 确认按钮
const btnClick = () => {
infoObject.value.alarmList.forEach((item) => {
if (item.logic === null || item.num === null) {
return;
const getBoolean = () => {
for (const item of infoObject.value.alarmList) {
if (item.logic === null || item.num === '') {
return false;
}
});
}
if (infoObject.value.alarmList.length < 2) {
NsMessage.error('请选择逻辑和数值');
return;
return false;
}
return true;
};
// 确认按钮
const btnClick = async () => {
let formBoolean = await getBoolean();
//数据是否验证通过
formRef.value.validate().then(() => {
let data = { ...infoObject.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或其他默认值
if (formBoolean) {
formRef.value.validate().then(() => {
let data = { ...infoObject.value };
if (!data.orgId) {
data.orgId = orgId.value;
}
});
// 设备类型 只取最后一级的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();
// 配置关联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或其他默认值
}
})
.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 = () => {
@@ -466,7 +495,10 @@
valueType: null,
deviceInfoCode: null,
enableRules: 0,
alarmList: [{ logic: null, num: null, isDelete: 0 }],
alarmList: [
{ logic: null, num: '', isDelete: 0 },
{ logic: null, num: '', isDelete: 0 },
],
};
visible.value = false;
//清空删除列表
@@ -475,9 +507,9 @@
// 新增逻辑列表
const addAlarmList = () => {
if (infoObject.value.alarmList) {
infoObject.value.alarmList.push({ logic: null, num: null, isDelete: 0 });
infoObject.value.alarmList.push({ logic: null, num: '', isDelete: 0 });
} else {
infoObject.value.alarmList = [{ logic: null, num: null, isDelete: 0 }];
infoObject.value.alarmList = [{ logic: null, num: '', isDelete: 0 }];
}
};
// 删除 逻辑列表、
@@ -550,4 +582,20 @@
width: 20%;
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>

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

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

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

@@ -14,7 +14,7 @@
</template>
</ns-view-list-table>
<!-- 详情页面 -->
<Look ref="look" />
<Look class="look-energy" ref="look" />
<!-- 状态页面 -->
<Status ref="status" @logAdd="logAdd" />
</template>
@@ -46,3 +46,10 @@
},
};
</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">
<!-- top -->
<div class="boxstyle">
<div
class="ns-title-extra-box"
style="left: 5px; position: absolute; height: 35px; line-height: 30px">
<div class="ns-title-extra-box" style="position: absolute; height: 35px; line-height: 30px">
告警编号：{{ infoObject.alarmCode }}
</div>
<div style="right: 20px; position: absolute; height: 35px; line-height: 30px">
@@ -21,7 +19,7 @@
</div>
</div>
<!-- center -->
<div style="width: 100%; height: 400px">
<div style="width: 100%; height: 300px">
<div style="width: 100%; height: 100%" ref="graphChart"></div>
</div>
<!-- bottom -->
@@ -213,11 +211,6 @@
],
//滑块样式
dataZoom: [
{
type: 'inside',
start: 0,
end: 100,
},
{
type: 'slider',
// backgroundColor: 'yellow',
@@ -225,8 +218,8 @@
height: 12, // 设置slider的高度为15
start: 0,
end: 100,
right: 60,
left: 60,
right: 11,
left: 10,
bottom: 10,
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 的图标
@@ -257,15 +250,20 @@
name: '电压值',
type: 'line',
itemStyle: {
color: '#fff',
borderColor: 'rgba(67, 136, 251, 1)',
borderWidth: 2,
},
lineStyle: {
normal: {
barBorderRadius: 0,
color: '#2778FF',
color: 'rgba(67, 136, 251, 1)',
width: 2,
},
},
symbol: 'circle', // 数据点的形状，这里设置为圆形
symbolSize: 8,
label: {
show: true,
show: false,
color: 'rgb(89, 89, 89)',
position: 'top',
top: '10',
@@ -273,6 +271,29 @@
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,
},
],

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

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

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

@@ -14,7 +14,7 @@
</template>
</ns-view-list-table>
<!-- 详情页面 -->
<Look ref="look" />
<Look class="look-equipment" ref="look" />
<!-- 状态页面 -->
<Status ref="status" @logAdd="logAdd" />
</template>
@@ -46,3 +46,10 @@
},
};
</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">
<!-- top -->
<div class="boxstyle">
<div
class="ns-title-extra-box"
style="left: 5px; position: absolute; height: 35px; line-height: 30px">
<div class="ns-title-extra-box" style="position: absolute; height: 35px; line-height: 30px">
告警编号：{{ infoObject.alarmCode }}
</div>
<div style="right: 20px; position: absolute; height: 35px; line-height: 30px">
@@ -21,7 +19,7 @@
</div>
</div>
<!-- center -->
<div style="width: 100%; height: 400px">
<div style="width: 100%; height: 300px">
<div style="width: 100%; height: 100%" ref="graphChart"></div>
</div>
<!-- bottom -->
@@ -134,8 +132,8 @@
},
},
grid: {
left: '10%', // 设置图表距离左边的距离
right: '4%', // 设置图表距离右边的距离
left: '9%', // 设置图表距离左边的距离
right: '3%', // 设置图表距离右边的距离
top: '6%',
borderWidth: 0,
y2: 60, // 距离底边
@@ -212,11 +210,6 @@
],
//滑块样式
dataZoom: [
{
type: 'inside',
start: 0,
end: 100,
},
{
type: 'slider',
// backgroundColor: 'yellow',
@@ -224,8 +217,8 @@
height: 12, // 设置slider的高度为15
start: 0,
end: 100,
right: 60,
left: 60,
right: 10,
left: 10,
bottom: 10,
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 的图标
@@ -256,15 +249,20 @@
name: '电压值',
type: 'line',
itemStyle: {
color: '#fff',
borderColor: 'rgba(67, 136, 251, 1)',
borderWidth: 2,
},
lineStyle: {
normal: {
barBorderRadius: 0,
color: '#2778FF',
color: 'rgba(67, 136, 251, 1)',
width: 2,
},
},
symbol: 'circle', // 数据点的形状，这里设置为圆形
symbolSize: 8,
label: {
show: true,
show: false,
color: 'rgb(89, 89, 89)',
position: 'top',
top: '10',
@@ -272,6 +270,29 @@
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,
},
],

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

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

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

@@ -10,7 +10,7 @@
</template>
</ns-view-list-table>
<!-- 详情页面 -->
<Look ref="look" />
<Look class="look-gateWay" ref="look" />
<!-- 状态页面 -->
<Status ref="status" />
</template>
@@ -36,3 +36,10 @@
},
};
</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">
<!-- top -->
<div class="boxstyle">
<div
class="ns-title-extra-box"
style="left: 25px; position: absolute; height: 35px; line-height: 30px">
<div class="ns-title-extra-box" style="position: absolute; height: 35px; line-height: 30px">
告警编号：{{ infoObject.alarmCode }}
</div>
<div style="right: 30px; position: absolute; height: 35px; line-height: 30px">
@@ -21,7 +19,7 @@
</div>
</div>
<!-- center -->
<div style="width: 100%; height: 400px">
<div style="width: 100%; height: 300px">
<div style="width: 100%; height: 100%" ref="graphChart"></div>
</div>
<!-- bottom -->
@@ -127,8 +125,8 @@
},
},
grid: {
left: '10%', // 设置图表距离左边的距离
right: '4%', // 设置图表距离右边的距离
left: '3%', // 设置图表距离左边的距离
right: '3%', // 设置图表距离右边的距离
top: '6%',
borderWidth: 0,
y2: 60, // 距离底边
@@ -200,11 +198,6 @@
],
//滑块样式
dataZoom: [
{
type: 'inside',
start: 0,
end: 100,
},
{
type: 'slider',
// backgroundColor: 'yellow',
@@ -212,8 +205,8 @@
height: 12, // 设置slider的高度为15
start: 0,
end: 100,
right: 60,
left: 60,
right: 11,
left: 10,
bottom: 10,
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 的图标
@@ -244,9 +237,14 @@
name: '状态',
type: 'line',
itemStyle: {
color: '#fff',
borderColor: 'rgba(67, 136, 251, 1)',
borderWidth: 2,
},
lineStyle: {
normal: {
barBorderRadius: 0,
color: '#2778FF',
color: 'rgba(67, 136, 251, 1)',
width: 2,
},
},
symbol: 'circle', // 数据点的形状，这里设置为圆形
@@ -260,6 +258,29 @@
// 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,
},
],

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

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