人员报警增加动画

src/views/BI/components/personnel.vue

@@ -22,7 +22,7 @@
         <div
           v-for="(item, index) in data.block2OptionsList"
           :key="index"
-          class="list"
+          :class="['list', { alarm: item.total > 0 }]"
           @click="fnAlarmTypeClick(item)"
         >
           <div class="name">{{ item.label }}</div>
@@ -55,6 +55,17 @@
       v-model:pd="data.form"
       :ele-type-num="+data.eleType"
     />
+    <template v-if="data.block2OptionsList.some((item) => item.total > 0)">
+      <teleport to="body">
+        <div class="alarm_full_screen">
+          <div
+            v-for="item in 4"
+            :key="item"
+            :class="['alarm_full_screen_item', 'alarm_full_screen_item' + item]"
+          />
+        </div>
+      </teleport>
+    </template>
   </div>
 </template>
 <script setup>
@@ -67,6 +78,7 @@ import {
   getAlarmTypeCount,
   getPersonnelPositioningCount,
 } from "@/request/bi/mapApi.js";
+
 const data = reactive({
   block1OptionsList: [
     {
@@ -254,6 +266,24 @@ getPositionData();
         justify-content: space-between;
         padding: 10px;
         cursor: pointer;
+
+        &.alarm {
+          background: rgba(139, 65, 65, 0.5);
+          border: 1px solid red;
+          animation: scale 2s infinite;
+        }
+
+        @keyframes scale {
+          0% {
+            transform: scale(0.95);
+          }
+          50% {
+            transform: scale(1.05);
+          }
+          100% {
+            transform: scale(0.95);
+          }
+        }
       }
     }
   }
@@ -305,26 +335,32 @@ getPositionData();
           }
         }
       }
+
       .table {
         margin-top: 5px;
 
         .tr {
           display: flex;
+
           &:nth-child(odd) {
             background-color: rgba(42, 86, 158, 0.53);
           }
+
           .td {
             flex: 1;
             text-align: left;
             font-size: 12px;
             color: #fff;
             padding: 6px 10px;
+
             &:nth-child(1) {
               flex-basis: 30%;
             }
+
             &:nth-child(2) {
               flex-basis: 50%;
             }
+
             &:nth-child(3) {
               flex-basis: 20%;
             }
@@ -354,4 +390,56 @@ getPositionData();
     }
   }
 }
+
+.alarm_full_screen {
+  .alarm_full_screen_item {
+    position: absolute;
+    box-shadow: 0 0 20px 10px red;
+    animation: opacity 2s infinite;
+
+    &1 {
+      top: 0;
+      left: 0;
+      right: 0;
+      width: 100vw;
+      height: 0;
+    }
+
+    &2 {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 100vh;
+    }
+
+    &3 {
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100vw;
+      height: 0;
+    }
+
+    &4 {
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 0;
+      height: 100vh;
+    }
+
+    @keyframes opacity {
+      0% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  }
+}
 </style>