地图设备信息

resources/js/views/map/index.vue

@@ -76,7 +76,7 @@
       width="35%"
       :modal="false"
       top="20vh"
-      custom-class="zero-dialog"
+      :custom-class="dialogClass"
     >
       <el-table :data="gridData" :show-header="false">
         <el-table-column property="title" width="180px"></el-table-column>
@@ -209,6 +209,7 @@ export default {
   data(){
     const _this = this;
     return {
+      dialogClass: 'zero-dialog',
       leftDeviceListVisible: true,
       markersGoodsVisible: false,
       markersGoods: [{
@@ -388,12 +389,17 @@ export default {
     },
     // 获取设备详细信息
     getUserDeviceInfo(id) {
+      this.dialogClass = 'zero-dialog';
       deviceinfo(id)
         .then(res => {
           const deviceInfo = res.data;
+          console.log(deviceInfo);
           this.center = deviceInfo.devicecoord.replace(/\s*/g, '').split(',');
           this.dialogTableVisible = true;
           this.markersDeviceVisible = true;
+          if (deviceInfo.devicepolice === 4 || deviceInfo.devicepolice === 5 || deviceInfo.devicepolice === 6) {
+            this.dialogClass += ' device-box-fade-alarm';
+          }
           this.gridData = [
             {
               title: '设备编号',
@@ -596,4 +602,34 @@ export default {
   right: 1px;
   bottom: 1px;
 }
+
+@keyframes fade {
+  from {
+    opacity: 1.0;
+  }
+  50% {
+    opacity: 1.0;
+    background-color: red;
+  }
+  to {
+    opacity: 1.0;
+  }
+}
+
+@-webkit-keyframes fade {
+  from {
+    opacity: 1.0;
+  }
+  50% {
+    opacity: 1.0;
+    background-color: red;
+  }
+  to {
+    opacity: 1.0;
+  }
+}
+.device-box-fade-alarm .el-dialog__header {
+    animation: fade 600ms infinite;
+    -webkit-animation: fade 600ms infinite;
+}
 </style>