|
@@ -69,7 +69,7 @@
|
|
|
</div>
|
|
|
<div class="item-monitor-box">
|
|
|
<span class="title">火灾监测</span>
|
|
|
- <span class="value value1">{{ centerData.fire }}</span>
|
|
|
+ <span class="value" :class="calcTextColor(centerData.fire)">{{ centerData.fire }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item item2">
|
|
@@ -78,7 +78,7 @@
|
|
|
</div>
|
|
|
<div class="item-monitor-box">
|
|
|
<span class="title">设备监测</span>
|
|
|
- <span class="value value">{{ centerData.sb }}</span>
|
|
|
+ <span class="value" :class="calcTextColor(centerData.fire)">{{ centerData.sb }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item item3">
|
|
@@ -87,7 +87,7 @@
|
|
|
</div>
|
|
|
<div class="item-monitor-box">
|
|
|
<span class="title">瓦斯监测</span>
|
|
|
- <span class="value">{{ centerData.ws }}</span>
|
|
|
+ <span class="value" :class="calcTextColor(centerData.fire)">{{ centerData.ws }}</span>
|
|
|
<!-- <div class="">
|
|
|
<span class="title">矿井瓦斯鉴定等级监测</span>
|
|
|
<span class="value">低瓦斯</span>
|
|
@@ -100,7 +100,7 @@
|
|
|
</div>
|
|
|
<div class="item-monitor-box">
|
|
|
<span class="title">粉尘监测</span>
|
|
|
- <span class="value">{{ centerData.fc }}</span>
|
|
|
+ <span class="value" :class="calcTextColor(centerData.fire)">{{ centerData.fc }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item item5">
|
|
@@ -109,7 +109,7 @@
|
|
|
</div>
|
|
|
<div class="item-monitor-box">
|
|
|
<span class="title">通风监测</span>
|
|
|
- <span class="value">{{ centerData.tf }}</span>
|
|
|
+ <span class="value" :class="calcTextColor(centerData.fire)">{{ centerData.tf }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -193,6 +193,23 @@
|
|
|
}
|
|
|
);
|
|
|
|
|
|
+ function calcTextColor(str: string) {
|
|
|
+ switch (str) {
|
|
|
+ case '正常':
|
|
|
+ return '';
|
|
|
+ case '低风险':
|
|
|
+ return '';
|
|
|
+ case '一般风险':
|
|
|
+ return 'value-yellow';
|
|
|
+ case '较高风险':
|
|
|
+ return 'value-orange';
|
|
|
+ case '高风险':
|
|
|
+ return 'value-red';
|
|
|
+ default:
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
onMounted(async () => {
|
|
|
rainBg('rain', 'animation-box');
|
|
|
});
|
|
@@ -579,13 +596,27 @@
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
|
|
|
- .value1 {
|
|
|
+ .value-red {
|
|
|
font-size: 16px;
|
|
|
font-weight: 800;
|
|
|
margin-top: 6px;
|
|
|
color: #ff0000;
|
|
|
animation: color-blink 1s infinite;
|
|
|
}
|
|
|
+ .value-orange {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 800;
|
|
|
+ margin-top: 6px;
|
|
|
+ color: #ff8800;
|
|
|
+ animation: color-blink 1s infinite;
|
|
|
+ }
|
|
|
+ .value-yellow {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 800;
|
|
|
+ margin-top: 6px;
|
|
|
+ color: #ffff00;
|
|
|
+ animation: color-blink 1s infinite;
|
|
|
+ }
|
|
|
|
|
|
@keyframes color-blink {
|
|
|
0% {
|