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

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

parent fec6e04b
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
@toggleClick="toggleSideBar" @toggleClick="toggleSideBar"
:is-active="sidebar" :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="go-tom" @click="goTom" v-if="!currentDomain.includes('screen.bmetech.com')">EcoTOM 三流合一</div>
<div class="right-block"> <div class="right-block">
<el-dropdown class="right-menu-item" trigger="click"> <el-dropdown class="right-menu-item" trigger="click">
......
...@@ -605,11 +605,15 @@ onMounted(() => { ...@@ -605,11 +605,15 @@ onMounted(() => {
window.addEventListener("resize", resizeFun); window.addEventListener("resize", resizeFun);
refeshFun(); refeshFun();
getAllMouseEvent(); getAllMouseEvent();
// 启动实时监测
startRealTimeMonitoring();
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener("resize", resizeFun); window.removeEventListener("resize", resizeFun);
cancelAllMouseEvent(); cancelAllMouseEvent();
chartRemoveEvent(); chartRemoveEvent();
// 停止实时监测
stopRealTimeMonitoring();
}); });
watch( watch(
() => form.dusterNo, () => form.dusterNo,
...@@ -619,6 +623,8 @@ watch( ...@@ -619,6 +623,8 @@ watch(
getEnergy(); getEnergy();
getDustDetail(); getDustDetail();
getAlarmInfo(); getAlarmInfo();
// 重新启动实时监测
startRealTimeMonitoring();
} }
); );
watch( watch(
...@@ -629,6 +635,8 @@ watch( ...@@ -629,6 +635,8 @@ watch(
getEnergy(); getEnergy();
getDustDetail(); getDustDetail();
getAlarmInfo(); getAlarmInfo();
// 重新启动实时监测
startRealTimeMonitoring();
} }
); );
const dusterName = computed(() => { const dusterName = computed(() => {
...@@ -662,6 +670,24 @@ const refeshFun = () => { ...@@ -662,6 +670,24 @@ const refeshFun = () => {
refeshFun() refeshFun()
}, 1000 * 60 * 30); }, 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 dustBox = ref(null);
// 获取鼠标所有事件 // 获取鼠标所有事件
const getAllMouseEvent = () => { const getAllMouseEvent = () => {
...@@ -846,7 +872,7 @@ $borderColor: #3a3f45; ...@@ -846,7 +872,7 @@ $borderColor: #3a3f45;
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
&:hover { &:hover {
transform: scale(1.2); 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 { .point::after {
...@@ -855,17 +881,73 @@ $borderColor: #3a3f45; ...@@ -855,17 +881,73 @@ $borderColor: #3a3f45;
padding-bottom: 100%; /* 9/16 * 100% = 56.25% */ padding-bottom: 100%; /* 9/16 * 100% = 56.25% */
} }
.status-normal { .status-normal {
background-color: #67c23a; // 绿色 background-color: rgb(103, 194, 58); // 绿色
animation: pulse-glow1 2s ease-in-out infinite;
} }
.status-warning { .status-warning {
background-color: #e6a23c; // 橙色 background-color: rgb(230, 162, 60); // 橙色
animation: pulse-glow2 2s ease-in-out infinite;
} }
.status-error { .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 { .other-info {
padding: 20px; padding: 20px;
border-top: 1px solid $borderColor; 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