Commit 2efabdd5 authored by Cai Wei's avatar Cai Wei

feat(*): 修改除尘器监控单位及描述

parent fec6e04b
......@@ -10,7 +10,7 @@
@toggleClick="toggleSideBar"
:is-active="sidebar"
/>
<h3>DC-TOM管理平台</h3>
<h3>E-Core / DC-TOM 管理平台</h3>
<div class="go-tom" @click="goTom" v-if="!currentDomain.includes('screen.bmetech.com')">EcoTOM 三流合一</div>
<div class="right-block">
<el-dropdown class="right-menu-item" trigger="click">
......
......@@ -605,11 +605,15 @@ onMounted(() => {
window.addEventListener("resize", resizeFun);
refeshFun();
getAllMouseEvent();
// 启动实时监测
startRealTimeMonitoring();
});
onUnmounted(() => {
window.removeEventListener("resize", resizeFun);
cancelAllMouseEvent();
chartRemoveEvent();
// 停止实时监测
stopRealTimeMonitoring();
});
watch(
() => form.dusterNo,
......@@ -619,6 +623,8 @@ watch(
getEnergy();
getDustDetail();
getAlarmInfo();
// 重新启动实时监测
startRealTimeMonitoring();
}
);
watch(
......@@ -629,6 +635,8 @@ watch(
getEnergy();
getDustDetail();
getAlarmInfo();
// 重新启动实时监测
startRealTimeMonitoring();
}
);
const dusterName = computed(() => {
......@@ -662,6 +670,24 @@ const refeshFun = () => {
refeshFun()
}, 1000 * 60 * 30);
}
// 实时监测数据变化 - 每秒轮询 getDustDetail
let realTimeTimer = null;
const startRealTimeMonitoring = () => {
if (realTimeTimer) {
clearInterval(realTimeTimer);
}
realTimeTimer = setInterval(() => {
getDustDetail();
}, 10000);
}
const stopRealTimeMonitoring = () => {
if (realTimeTimer) {
clearInterval(realTimeTimer);
realTimeTimer = null;
}
}
const dustBox = ref(null);
// 获取鼠标所有事件
const getAllMouseEvent = () => {
......@@ -846,7 +872,7 @@ $borderColor: #3a3f45;
transition: transform 0.3s ease-in-out;
&:hover {
transform: scale(1.2);
box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5);
box-shadow: 0 0 0px 0 rgba(255, 255, 255, 0.5);
}
}
.point::after {
......@@ -855,17 +881,73 @@ $borderColor: #3a3f45;
padding-bottom: 100%; /* 9/16 * 100% = 56.25% */
}
.status-normal {
background-color: #67c23a; // 绿色
background-color: rgb(103, 194, 58); // 绿色
animation: pulse-glow1 2s ease-in-out infinite;
}
.status-warning {
background-color: #e6a23c; // 橙色
background-color: rgb(230, 162, 60); // 橙色
animation: pulse-glow2 2s ease-in-out infinite;
}
.status-error {
background-color: #f56c6c; // 红色
background-color: rgb(245, 108, 108); // 红色
animation: pulse-glow3 2s ease-in-out infinite;
}
@keyframes pulse-glow1 {
0% {
box-shadow: 0 0 0px rgba(103, 194, 58, 0.3),
0 0 10px rgba(103, 194, 58, 0.2),
0 0 20px rgba(103, 194, 58, 0.1);
}
50% {
box-shadow: 0 0 20px rgba(103, 194, 58, 0.8),
0 0 10px rgba(103, 194, 58, 0.6),
0 0 20px rgba(103, 194, 58, 0.4);
}
100% {
box-shadow: 0 0 0px rgba(103, 194, 58, 0.3),
0 0 10px rgba(103, 194, 58, 0.2),
0 0 20px rgba(103, 194, 58, 0.1);
}
}
@keyframes pulse-glow2 {
0% {
box-shadow: 0 0 0px rgba(230, 162, 60, 0.3),
0 0 10px rgba(230, 162, 60, 0.2),
0 0 20px rgba(230, 162, 60, 0.1);
}
50% {
box-shadow: 0 0 0px rgba(230, 162, 60, 0.8),
0 0 10px rgba(230, 162, 60, 0.6),
0 0 20px rgba(230, 162, 60, 0.4);
}
100% {
box-shadow: 0 0 0px rgba(230, 162, 60, 0.3),
0 0 10px rgba(230, 162, 60, 0.2),
0 0 20px rgba(230, 162, 60, 0.1);
}
}
@keyframes pulse-glow3 {
0% {
box-shadow: 0 0 0px rgba(245, 108, 108, 0.3),
0 0 10px rgba(245, 108, 108, 0.2),
0 0 20px rgba(245, 108, 108, 0.1);
}
50% {
box-shadow: 0 0 0px rgba(245, 108, 108, 0.8),
0 0 10px rgba(245, 108, 108, 0.6),
0 0 20px rgba(245, 108, 108, 0.4);
}
100% {
box-shadow: 0 0 0px rgba(245, 108, 108, 0.3),
0 0 10px rgba(245, 108, 108, 0.2),
0 0 20px rgba(245, 108, 108, 0.1);
}
}
}
.other-info {
padding: 20px;
border-top: 1px solid $borderColor;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment