|
|
@@ -20,7 +20,7 @@
|
|
|
<i class="iconfont huifont-jinggao"></i>
|
|
|
</div>
|
|
|
<div class="alarm-data-content">
|
|
|
- <div class="alarm-data-number alibaba">18</div>
|
|
|
+ <div class="alarm-data-number alibaba">{{alarmData.totalState}}</div>
|
|
|
<div class="alarm-data-label">告警</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -29,7 +29,7 @@
|
|
|
<i class="iconfont huifont-yichuli1"></i>
|
|
|
</div>
|
|
|
<div class="alarm-data-content">
|
|
|
- <div class="alarm-data-number alibaba">9</div>
|
|
|
+ <div class="alarm-data-number alibaba">{{alarmData.state2}}</div>
|
|
|
<div class="alarm-data-label">已处理</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -40,7 +40,7 @@
|
|
|
<i class="iconfont huifont-weichuli"></i>
|
|
|
</div>
|
|
|
<div class="alarm-data-content">
|
|
|
- <div class="alarm-data-number alibaba">3</div>
|
|
|
+ <div class="alarm-data-number alibaba">{{alarmData.state0}}</div>
|
|
|
<div class="alarm-data-label">未处理</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -49,7 +49,7 @@
|
|
|
<i class="iconfont huifont-yichuli"></i>
|
|
|
</div>
|
|
|
<div class="alarm-data-content">
|
|
|
- <div class="alarm-data-number alibaba">6</div>
|
|
|
+ <div class="alarm-data-number alibaba">{{alarmData.state1}}</div>
|
|
|
<div class="alarm-data-label">处理中</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -115,75 +115,12 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="alarm-table hui-flex-box">
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-100">
|
|
|
- <div class="tr-top1">TOP01</div>
|
|
|
- </span>
|
|
|
- <span class="tr-flex">设备1</span>
|
|
|
- <span class="tr-flex tr-center alibaba">122</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-100">
|
|
|
- <div class="tr-top2">TOP02</div>
|
|
|
- </span>
|
|
|
- <span class="tr-flex">设备1</span>
|
|
|
- <span class="tr-flex tr-center alibaba">100</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-100">
|
|
|
- <div class="tr-top3">TOP03</div>
|
|
|
- </span>
|
|
|
- <span class="tr-flex">设备1</span>
|
|
|
- <span class="tr-flex tr-center alibaba">92</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-100">
|
|
|
- <div class="tr-top">TOP04</div>
|
|
|
- </span>
|
|
|
- <span class="tr-flex">设备1</span>
|
|
|
- <span class="tr-flex tr-center alibaba">81</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-100">
|
|
|
- <div class="tr-top">TOP05</div>
|
|
|
- </span>
|
|
|
- <span class="tr-flex">设备1</span>
|
|
|
- <span class="tr-flex tr-center alibaba">77</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-100">
|
|
|
- <div class="tr-top">TOP06</div>
|
|
|
- </span>
|
|
|
- <span class="tr-flex">设备1</span>
|
|
|
- <span class="tr-flex tr-center alibaba">65</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-100">
|
|
|
- <div class="tr-top">TOP07</div>
|
|
|
- </span>
|
|
|
- <span class="tr-flex">设备1</span>
|
|
|
- <span class="tr-flex tr-center alibaba">59</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
+ <div class="alarm-tr" v-for="(item,index) in topAlarm" :key="item.id">
|
|
|
<span class="tr-100">
|
|
|
- <div class="tr-top">TOP08</div>
|
|
|
+ <div :class="'tr-top'+(index+1)">{{returnTop(String(index+1))}}</div>
|
|
|
</span>
|
|
|
- <span class="tr-flex">设备1</span>
|
|
|
- <span class="tr-flex tr-center alibaba">48</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-100">
|
|
|
- <div class="tr-top">TOP09</div>
|
|
|
- </span>
|
|
|
- <span class="tr-flex">设备1</span>
|
|
|
- <span class="tr-flex tr-center alibaba">34</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-100">
|
|
|
- <div class="tr-top">TOP10</div>
|
|
|
- </span>
|
|
|
- <span class="tr-flex">设备1</span>
|
|
|
- <span class="tr-flex tr-center alibaba">22</span>
|
|
|
+ <span class="tr-flex">{{item.deviceName}}</span>
|
|
|
+ <span class="tr-flex tr-center alibaba">{{item.number}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -192,44 +129,44 @@
|
|
|
<div class="alarm-monitor-right">
|
|
|
<div class="alarm-stat">
|
|
|
<div class="stat-item all-stat">
|
|
|
- <div class="stat-number alibaba">1023</div>
|
|
|
+ <div class="stat-number alibaba">{{alarmData.totalAlarm}}</div>
|
|
|
<div class="stat-label">总告警</div>
|
|
|
<div class="today-content">
|
|
|
<span class="today-label">今日告警</span>
|
|
|
- <span class="today-number alibaba">23</span>
|
|
|
+ <span class="today-number alibaba">{{alarmData.todayTotalAlarm}}</span>
|
|
|
</div>
|
|
|
<div class="stat-icon">
|
|
|
<i class="iconfont huifont-jinggao"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="stat-item">
|
|
|
- <div class="stat-number alibaba">168</div>
|
|
|
+ <div class="stat-number alibaba">{{alarmData.emergencyAlarm}}</div>
|
|
|
<div class="stat-label">总紧急告警</div>
|
|
|
<div class="today-content">
|
|
|
<span class="today-label">今日紧急告警</span>
|
|
|
- <span class="today-number alibaba">1</span>
|
|
|
+ <span class="today-number alibaba">{{alarmData.todayEmergencyAlarm}}</span>
|
|
|
</div>
|
|
|
<div class="stat-icon red1">
|
|
|
<div class="stat-bg stat-bg3"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="stat-item">
|
|
|
- <div class="stat-number alibaba">112</div>
|
|
|
+ <div class="stat-number alibaba">{{alarmData.magnitudeAlarm}}</div>
|
|
|
<div class="stat-label">总重大告警</div>
|
|
|
<div class="today-content">
|
|
|
<span class="today-label">今日重大告警</span>
|
|
|
- <span class="today-number alibaba">0</span>
|
|
|
+ <span class="today-number alibaba">{{alarmData.todayMagnitudeAlarm}}</span>
|
|
|
</div>
|
|
|
<div class="stat-icon red2">
|
|
|
<div class="stat-bg stat-bg4"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="stat-item">
|
|
|
- <div class="stat-number alibaba">861</div>
|
|
|
+ <div class="stat-number alibaba">{{alarmData.generalAlarm}}</div>
|
|
|
<div class="stat-label">总一般告警</div>
|
|
|
<div class="today-content">
|
|
|
<span class="today-label">总一般告警</span>
|
|
|
- <span class="today-number alibaba">23</span>
|
|
|
+ <span class="today-number alibaba">{{alarmData.todayGeneralAlarm}}</span>
|
|
|
</div>
|
|
|
<div class="stat-icon yellow">
|
|
|
<div class="stat-bg stat-bg5"></div>
|
|
|
@@ -252,90 +189,37 @@
|
|
|
<span class="tr-80">处理状态</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="alarm-table hui-flex-box">
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">1</span>
|
|
|
- <span class="tr-150">3#风管压差传感器</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器发生故障，请及时处理!</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
+ <div class="alarm-empty hui-flex-box"
|
|
|
+ v-if="alarmList.filter(node=>node.type === 1).length === 0">
|
|
|
+ <empty width="100"></empty>
|
|
|
+ </div>
|
|
|
+ <div class="alarm-table hui-flex-box" v-else>
|
|
|
+ <div class="alarm-tr" v-for="(item,index) in alarmList.filter(node=>node.type === 1)"
|
|
|
+ :key="-item.id">
|
|
|
+ <span class="tr-50">{{index+1}}</span>
|
|
|
+ <span class="tr-150">{{item.name}}</span>
|
|
|
+ <span class="tr-flex">{{item.info}}</span>
|
|
|
+ <span class="tr-150">{{item.date}}</span>
|
|
|
<span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
+ <div class="hui-state" v-if="item.alarmLevel === 1">
|
|
|
<span class="hui-state-bage hui-state-common"></span>
|
|
|
<span class="hui-state-label">一般</span>
|
|
|
</div>
|
|
|
- </span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-red">未处理</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">2</span>
|
|
|
- <span class="tr-150">3#风管压差传感器</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器发生故障，请及时处理!</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
- <span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
+ <div class="hui-state" v-else-if="item.alarmLevel === 2">
|
|
|
<span class="hui-state-bage hui-state-major"></span>
|
|
|
<span class="hui-state-label">重大</span>
|
|
|
</div>
|
|
|
- </span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-green">已处理</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">3</span>
|
|
|
- <span class="tr-150">3#风管压差传感器</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器发生故障，请及时处理!</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
- <span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
+ <div class="hui-state" v-if="item.alarmLevel === 3">
|
|
|
<span class="hui-state-bage hui-state-urgent"></span>
|
|
|
<span class="hui-state-label">紧急</span>
|
|
|
</div>
|
|
|
</span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-blue">处理中</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">4</span>
|
|
|
- <span class="tr-150">3#风管压差传感器</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器发生故障，请及时处理!</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
- <span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
- <span class="hui-state-bage hui-state-common"></span>
|
|
|
- <span class="hui-state-label">一般</span>
|
|
|
- </div>
|
|
|
+ <span class="tr-80">{{item.number}}</span>
|
|
|
+ <span class="tr-80">
|
|
|
+ <span class="color-red" v-if="!item.state">未处理</span>
|
|
|
+ <span class="color-blue" v-else-if="item.state === 1">处理中</span>
|
|
|
+ <span class="color-green" v-else-if="item.state === 2">已处理</span>
|
|
|
</span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-red">未处理</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">5</span>
|
|
|
- <span class="tr-150">3#风管压差传感器</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器发生故障，请及时处理!</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
- <span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
- <span class="hui-state-bage hui-state-major"></span>
|
|
|
- <span class="hui-state-label">重大</span>
|
|
|
- </div>
|
|
|
- </span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-green">已处理</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">6</span>
|
|
|
- <span class="tr-150">3#风管压差传感器</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器发生故障，请及时处理!</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
- <span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
- <span class="hui-state-bage hui-state-urgent"></span>
|
|
|
- <span class="hui-state-label">紧急</span>
|
|
|
- </div>
|
|
|
- </span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-blue">处理中</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -358,102 +242,39 @@
|
|
|
<span class="tr-80">处理状态</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="alarm-table hui-flex-box">
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">1</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器</span>
|
|
|
- <span class="tr-100">电压</span>
|
|
|
- <span class="tr-100">12</span>
|
|
|
- <span class="tr-100">10</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
+ <div class="alarm-empty hui-flex-box"
|
|
|
+ v-if="alarmList.filter(node=>node.type === 2).length === 0">
|
|
|
+ <empty width="100"></empty>
|
|
|
+ </div>
|
|
|
+ <div class="alarm-table hui-flex-box" v-else>
|
|
|
+ <div class="alarm-tr" v-for="(item,index) in alarmList.filter(node=>node.type === 2)"
|
|
|
+ :key="item.id">
|
|
|
+ <span class="tr-50">{{index+1}}</span>
|
|
|
+ <span class="tr-flex">{{item.name}}</span>
|
|
|
+ <span class="tr-100">{{item.alarmParameter}}</span>
|
|
|
+ <span class="tr-100">{{item.currentValue}}</span>
|
|
|
+ <span class="tr-100">{{item.thresholdValue}}</span>
|
|
|
+ <span class="tr-150">{{item.date}}</span>
|
|
|
<span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
+ <div class="hui-state" v-if="item.alarmLevel === 1">
|
|
|
<span class="hui-state-bage hui-state-common"></span>
|
|
|
<span class="hui-state-label">一般</span>
|
|
|
</div>
|
|
|
- </span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-red">未处理</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">2</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器</span>
|
|
|
- <span class="tr-100">电压</span>
|
|
|
- <span class="tr-100">12</span>
|
|
|
- <span class="tr-100">10</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
- <span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
+ <div class="hui-state" v-else-if="item.alarmLevel === 2">
|
|
|
<span class="hui-state-bage hui-state-major"></span>
|
|
|
<span class="hui-state-label">重大</span>
|
|
|
</div>
|
|
|
- </span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-green">已处理</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">3</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器</span>
|
|
|
- <span class="tr-100">电压</span>
|
|
|
- <span class="tr-100">12</span>
|
|
|
- <span class="tr-100">10</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
- <span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
+ <div class="hui-state" v-if="item.alarmLevel === 3">
|
|
|
<span class="hui-state-bage hui-state-urgent"></span>
|
|
|
<span class="hui-state-label">紧急</span>
|
|
|
</div>
|
|
|
</span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-green">已处理</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">4</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器</span>
|
|
|
- <span class="tr-100">电压</span>
|
|
|
- <span class="tr-100">12</span>
|
|
|
- <span class="tr-100">10</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
- <span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
- <span class="hui-state-bage hui-state-common"></span>
|
|
|
- <span class="hui-state-label">一般</span>
|
|
|
- </div>
|
|
|
+ <span class="tr-80">{{item.number}}</span>
|
|
|
+ <span class="tr-80">
|
|
|
+ <span class="color-red" v-if="!item.state">未处理</span>
|
|
|
+ <span class="color-blue" v-else-if="item.state === 1">处理中</span>
|
|
|
+ <span class="color-green" v-else-if="item.state === 2">已处理</span>
|
|
|
</span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-red">未处理</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">5</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器</span>
|
|
|
- <span class="tr-100">电压</span>
|
|
|
- <span class="tr-100">12</span>
|
|
|
- <span class="tr-100">10</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
- <span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
- <span class="hui-state-bage hui-state-major"></span>
|
|
|
- <span class="hui-state-label">重大</span>
|
|
|
- </div>
|
|
|
- </span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-green">已处理</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">6</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器</span>
|
|
|
- <span class="tr-100">电压</span>
|
|
|
- <span class="tr-100">12</span>
|
|
|
- <span class="tr-100">10</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
- <span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
- <span class="hui-state-bage hui-state-urgent"></span>
|
|
|
- <span class="hui-state-label">紧急</span>
|
|
|
- </div>
|
|
|
- </span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-green">已处理</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -498,97 +319,42 @@
|
|
|
<span class="tr-80">处理状态</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="alarm-table hui-flex-box">
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">1</span>
|
|
|
- <span class="tr-150">3#风管压差传感器</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器发生故障，请及时处理!</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
+ <div class="alarm-empty hui-flex-box" v-if="alarmList.length === 0">
|
|
|
+ <empty width="100"></empty>
|
|
|
+ </div>
|
|
|
+ <div class="alarm-table hui-flex-box" v-else>
|
|
|
+ <div class="alarm-tr" v-for="(item,index) in alarmList" :key="-item.id">
|
|
|
+ <span class="tr-50">{{index+1}}</span>
|
|
|
+ <span class="tr-150">{{item.name}}</span>
|
|
|
+ <span class="tr-flex">{{item.info}}</span>
|
|
|
+ <span class="tr-150">{{item.date}}</span>
|
|
|
<span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
+ <div class="hui-state" v-if="item.alarmLevel === 1">
|
|
|
<span class="hui-state-bage hui-state-common"></span>
|
|
|
<span class="hui-state-label">一般</span>
|
|
|
</div>
|
|
|
- </span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-red">未处理</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">2</span>
|
|
|
- <span class="tr-150">3#风管压差传感器</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器发生故障，请及时处理!</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
- <span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
+ <div class="hui-state" v-else-if="item.alarmLevel === 2">
|
|
|
<span class="hui-state-bage hui-state-major"></span>
|
|
|
<span class="hui-state-label">重大</span>
|
|
|
</div>
|
|
|
- </span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-green">已处理</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">3</span>
|
|
|
- <span class="tr-150">3#风管压差传感器</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器发生故障，请及时处理!</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
- <span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
+ <div class="hui-state" v-if="item.alarmLevel === 3">
|
|
|
<span class="hui-state-bage hui-state-urgent"></span>
|
|
|
<span class="hui-state-label">紧急</span>
|
|
|
</div>
|
|
|
</span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-green">已处理</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">4</span>
|
|
|
- <span class="tr-150">3#风管压差传感器</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器发生故障，请及时处理!</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
- <span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
- <span class="hui-state-bage hui-state-common"></span>
|
|
|
- <span class="hui-state-label">一般</span>
|
|
|
- </div>
|
|
|
- </span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-red">未处理</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">5</span>
|
|
|
- <span class="tr-150">3#风管压差传感器</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器发生故障，请及时处理!</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
- <span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
- <span class="hui-state-bage hui-state-major"></span>
|
|
|
- <span class="hui-state-label">重大</span>
|
|
|
- </div>
|
|
|
+ <span class="tr-80">{{item.number}}</span>
|
|
|
+ <span class="tr-80">
|
|
|
+ <span class="color-red" v-if="!item.state">未处理</span>
|
|
|
+ <span class="color-blue" v-else-if="item.state === 1">处理中</span>
|
|
|
+ <span class="color-green" v-else-if="item.state === 2">已处理</span>
|
|
|
</span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-green">已处理</span>
|
|
|
- </div>
|
|
|
- <div class="alarm-tr">
|
|
|
- <span class="tr-50">6</span>
|
|
|
- <span class="tr-150">3#风管压差传感器</span>
|
|
|
- <span class="tr-flex">3#风管压差传感器发生故障，请及时处理!</span>
|
|
|
- <span class="tr-150">2024-01-12 12:14:10</span>
|
|
|
- <span class="tr-100">
|
|
|
- <div class="hui-state">
|
|
|
- <span class="hui-state-bage hui-state-urgent"></span>
|
|
|
- <span class="hui-state-label">紧急</span>
|
|
|
- </div>
|
|
|
- </span>
|
|
|
- <span class="tr-80">10081</span>
|
|
|
- <span class="tr-80 color-green">已处理</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="params-chart">
|
|
|
<div class="hui-chart-title">
|
|
|
- 实时故障告警
|
|
|
+ 故障告警统计
|
|
|
</div>
|
|
|
<div class="params-chart-box">
|
|
|
<div class="params-chart-item params-chart-left">
|
|
|
@@ -607,19 +373,40 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import {
|
|
|
+ getCallAlarmCount,
|
|
|
+ getCallAlarmList
|
|
|
+ } from '@/httpApi/test'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ alarmData: {
|
|
|
+ todayEmergencyAlarm: 0,
|
|
|
+ state0: 0,
|
|
|
+ state2: 0,
|
|
|
+ state1: 0,
|
|
|
+ totalState: 0,
|
|
|
+ totalAlarm: 0,
|
|
|
+ todayTotalAlarm: 0,
|
|
|
+ magnitudeAlarm: 0,
|
|
|
+ todayMagnitudeAlarm: 0,
|
|
|
+ todayGeneralAlarm: 0,
|
|
|
+ emergencyAlarm: 0,
|
|
|
+ generalAlarm: 0
|
|
|
+ },
|
|
|
+ alarmList: [],
|
|
|
+ topAlarm: [],
|
|
|
value: '',
|
|
|
value1: ''
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.$nextTick(() => {
|
|
|
+ this.init();
|
|
|
this.chartEnergy({
|
|
|
min: 0,
|
|
|
- max: 10,
|
|
|
- value: 5
|
|
|
+ max: 100,
|
|
|
+ value: 99
|
|
|
});
|
|
|
this.chart();
|
|
|
this.chart1(this.$refs.chart2, [
|
|
|
@@ -628,17 +415,40 @@
|
|
|
this.chart1(this.$refs.chart3, [
|
|
|
[0, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
|
1, 1
|
|
|
- ],
|
|
|
- [1, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2, 1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2,
|
|
|
- 2, 2
|
|
|
- ],
|
|
|
- [3, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,
|
|
|
- 3, 3
|
|
|
]
|
|
|
])
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
+ init() {
|
|
|
+ getCallAlarmCount(this.$store.getters.project.id).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.alarmData = res.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ getCallAlarmList({
|
|
|
+ projectId: this.$store.getters.project.id
|
|
|
+ }).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.alarmList = res.data;
|
|
|
+ this.testTopData();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ testTopData() {
|
|
|
+ let obj = {};
|
|
|
+ for (let i = 0; i < this.alarmList.length; i++) {
|
|
|
+ console.log(this.alarmList[i]);
|
|
|
+ if (!obj[this.alarmList[i].deviceName]) obj[this.alarmList[i].deviceName] = 0;
|
|
|
+ obj[this.alarmList[i].deviceName]++
|
|
|
+ }
|
|
|
+ console.log(obj);
|
|
|
+ // this.topAlarm = res.data.sort((a, b) => a.number > b.number);
|
|
|
+ },
|
|
|
+ returnTop(number) {
|
|
|
+ let str = number.length === 1 ? ('0' + number) : number;
|
|
|
+ return 'TOP' + str;
|
|
|
+ },
|
|
|
chart1(elem, data) {
|
|
|
let chart = echarts.init(elem);
|
|
|
let series = [];
|
|
|
@@ -1041,6 +851,12 @@
|
|
|
overflow-y: auto;
|
|
|
font-size: 12px;
|
|
|
|
|
|
+ .alarm-empty {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
.real-time {
|
|
|
flex: 1;
|
|
|
height: 0;
|
|
|
@@ -1216,6 +1032,7 @@
|
|
|
background: rgba(0, 4, 10, 0.3);
|
|
|
flex: 1;
|
|
|
height: 0;
|
|
|
+ min-height: 400px;
|
|
|
}
|
|
|
|
|
|
.params-chart {
|
