1

src/views/equipmentOperationMonitoring/index.vue

@@ -124,7 +124,9 @@
                 v-loading="loading"
                 v-infinite-scroll="loadMore"
                 :infinite-scroll-distance="50"
-                :infinite-scroll-disabled="loadingMore || deviceData.length >= total"
+                :infinite-scroll-disabled="
+                  loadingMore || deviceData.length >= total
+                "
                 :infinite-scroll-immediate="false"
               >
                 <el-row :gutter="10">
@@ -143,6 +145,24 @@
                       }"
                       @click="details(item)"
                     >
+                      <!-- 告警闪灯 -->
+                      <div
+                        v-if="item.alarmLogStatusDTO?.alarmId"
+                        class="alarm-badge"
+                        :class="{
+                          'alarm-yellow': item.alarmLogStatusDTO?.alarmId == 1,
+                          'alarm-orange': item.alarmLogStatusDTO?.alarmId == 2,
+                          'alarm-red':
+                            item.alarmLogStatusDTO?.alarmId == 3 ||
+                            item.alarmLogStatusDTO?.alarmId == 5 ||
+                            item.alarmLogStatusDTO?.alarmId == 4
+                        }"
+                      >
+                        <span class="alarm-text">{{
+                          getAlarmLevelText(item.alarmLogStatusDTO?.alarmId)
+                        }}</span>
+                        <i class="el-icon-bell alarm-icon"></i>
+                      </div>
                       <div class="card-header">
                         <div>{{item.postName|}}</div>
                         <div class="card-header-value">
@@ -335,7 +355,16 @@
           this.deviceData = [];
         }
       },
-      // 加载设备数据
+      getAlarmLevelText(level) {
+        const textMap = {
+          1: '轻微告警',
+          2: '中等告警',
+          3: '严重告警',
+          4: '紧急告警',
+          5: '致命告警'
+        };
+        return textMap[level] || '';
+      },
       loadDeviceData(isLoadMore = false) {
         if (this.loadingMore) return;
         this.loadingMore = true;
@@ -354,48 +383,50 @@
           areaId: this.areaId,
           keyWord: this.keyWord,
           postId: this.postId
-        }).then((res) => {
-          this.loadingMore = false;
-          this.loading = false;
-          this.updateTime = dayjs().format('YYYY-M-D HH:mm:ss');
-          const list = res.list.map((item) => {
-            let iotList = [];
-            if (item.iotPointDataList) {
-              item.iotPointDataList.forEach((element) => {
-                let data = item.iotModel.properties.find(
-                  (iotModel) => iotModel.identifier == element.identifier
-                );
-                if (data) {
-                  iotList.push({
-                    ...element,
-                    dataType: data.dataType
-                  });
-                }
-              });
-            }
+        })
+          .then((res) => {
+            this.loadingMore = false;
+            this.loading = false;
+            this.updateTime = dayjs().format('YYYY-M-D HH:mm:ss');
+            const list = res.list.map((item) => {
+              let iotList = [];
+              if (item.iotPointDataList) {
+                item.iotPointDataList.forEach((element) => {
+                  let data = item.iotModel.properties.find(
+                    (iotModel) => iotModel.identifier == element.identifier
+                  );
+                  if (data) {
+                    iotList.push({
+                      ...element,
+                      dataType: data.dataType
+                    });
+                  }
+                });
+              }
 
-            item['iotList'] = item.iotDashboardPoint.length
-              ? iotList.filter((iotListItem) =>
-                  item.iotDashboardPoint.find(
-                    (Point) =>
-                      Point.identifier == iotListItem.identifier &&
-                      Point.checked1
+              item['iotList'] = item.iotDashboardPoint.length
+                ? iotList.filter((iotListItem) =>
+                    item.iotDashboardPoint.find(
+                      (Point) =>
+                        Point.identifier == iotListItem.identifier &&
+                        Point.checked1
+                    )
                   )
-                )
-              : iotList.filter((iotListItem, index) => index < 4);
-            return item;
+                : iotList.filter((iotListItem, index) => index < 4);
+              return item;
+            });
+            if (isLoadMore) {
+              this.deviceData = this.deviceData.concat(list);
+            } else {
+              this.deviceData = list;
+            }
+            this.total = res.count;
+            console.log(res);
+          })
+          .catch(() => {
+            this.loadingMore = false;
+            this.loading = false;
           });
-          if (isLoadMore) {
-            this.deviceData = this.deviceData.concat(list);
-          } else {
-            this.deviceData = list;
-          }
-          this.total = res.count;
-          console.log(res);
-        }).catch(() => {
-          this.loadingMore = false;
-          this.loading = false;
-        });
       },
       // 加载更多
       loadMore() {
@@ -791,6 +822,40 @@
           transition: all 0.3s;
           box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
             inset 0 1px 0 rgba(255, 255, 255, 0.05);
+          position: relative;
+
+          .alarm-badge {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            z-index: 2;
+            animation: alarm-pulse 1.5s infinite;
+
+            .alarm-text {
+              font-size: 12px;
+              font-weight: 500;
+            }
+
+            .alarm-icon {
+              font-size: 18px;
+            }
+
+            &.alarm-yellow {
+              color: #f0a030;
+              text-shadow: 0 0 8px #f0a030;
+            }
+            &.alarm-orange {
+              color: #e67e22;
+              text-shadow: 0 0 8px #e67e22;
+            }
+            &.alarm-red {
+              color: #ff4d4f;
+              text-shadow: 0 0 8px #ff4d4f;
+            }
+          }
 
           &:hover {
             box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5),
@@ -995,6 +1060,15 @@
     }
   }
 
+  @keyframes alarm-pulse {
+    0%,
+    100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.15);
+    }
+  }
   @keyframes bellshake {
     0%,
     100% {
@@ -1014,6 +1088,15 @@
       transform: rotate(10deg);
     }
   }
+  @keyframes blink {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.3;
+    }
+  }
   .fullscreen-btn {
     position: absolute;
     right: 15px;

src/views/warning/warningMessage/index.vue

@@ -65,12 +65,7 @@
       append-to-body
     >
       <el-table :data="triggerList" border style="width: 100%">
-        <el-table-column
-          type="index"
-          label="序号"
-          width="55"
-          align="center"
-        />
+        <el-table-column type="index" label="序号" width="55" align="center" />
         <el-table-column
           prop="description"
           label="告警描述"
@@ -93,11 +88,10 @@
         >
           <template slot-scope="{ row }">
             <div v-if="row._deviceData && row._deviceData.length">
-              <div
-                v-for="(item, index) in row._deviceData"
-                :key="index"
-              >
-                告警值：{{ item.attributeName }} {{ item.value }}
+              <div v-for="(item, index) in row._deviceData" :key="index">
+                点位：{{ item.attributeName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    告警值：{{ item.thresholdValue }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  当前值： {{ item.value }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 差值：{{
+                  parseFloat((item.value - item.thresholdValue).toFixed(3))
+                }}
               </div>
             </div>
             <span v-else>-</span>
@@ -111,7 +105,7 @@
 <script>
   import MessageSearch from './components/message-search.vue';
   import processDialog from './components/processDialog.vue';
-  import { alarmlogsheetPage,getDetail } from '@/api/warning/index.js';
+  import { alarmlogsheetPage, getDetail } from '@/api/warning/index.js';
 
   import dictMixins from '@/mixins/dictMixins';
   export default {