update

src/components/area/windturbine/BasicInformationDetail.vue

@@ -102,7 +102,28 @@
         clearInterval(this.refreshTimer);
       },
       alarmd(bi) {
+        let dataList = []
         let warnList = []
+        let date1 = {
+          type: 1,
+          alertText :[]
+        }
+        let date2 = {
+          type: 2,
+          alertText :[]
+        }
+        let date3 = {
+          type: 3,
+          alertText :[]
+        }
+        let date4 = {
+          type: 4,
+          alertText :[]
+        }
+        let date5 = {
+          type: 5,
+          alertText :[]
+        }
         bi.forEach(item => {
           let data = {}
           data.alertText = item.alertText
@@ -122,7 +143,31 @@
           }
           data.type ? warnList.push(data) : ''
         })
-        this.warnList = warnList
+        warnList.forEach(item =>{
+          switch (item.type) {
+            case 1:
+              date1.alertText.push(item.alertText)
+              break;
+            case 2:
+              date2.alertText.push(item.alertText)
+              break;
+            case 3:
+              date3.alertText.push(item.alertText)
+              break;
+            case 4:
+              date4.alertText.push(item.alertText)
+              break;
+            case 5:
+              date5.alertText.push(item.alertText)
+              break;
+          }
+        })
+        dataList.push(date1)
+        dataList.push(date2)
+        dataList.push(date3)
+        dataList.push(date4)
+        dataList.push(date5)
+        this.warnList = dataList
       },
       /* 刷新数据 */
       refreshData() {
@@ -213,25 +258,30 @@
     position: absolute;
     top: 143px;
     left: 119px;
+    z-index: 999;
   }
   .worning2{
     position: absolute;
     top: 210px;
     left: 282px;
+    z-index: 99;
   }
   .worning3{
     position: absolute;
     top: 219px;
     left: 348px;
+    z-index: 0;
   }
   .worning4{
     position: absolute;
     top: 273px;
     left: 296px;
+    z-index: 0;
   }
   .worning5{
     position: absolute;
     top: 287px;
     left: 252px;
+    z-index: 0;
   }
 </style>

src/components/area/windturbine/warning.vue

@@ -2,14 +2,14 @@
     <div class="container">
         <div class="dot"></div>
         <div class="pulse"></div>
-        <div class="content">{{worn}}</div>
+        <div class="content" v-for="(item , index) in worn" :key="index">{{item}}</div>
     </div>
 </template>
 
 <script>
     export default {
         props: {
-            worn: String,
+            worn: Array,
         },
     }
 </script>
@@ -79,23 +79,29 @@
     }
 
     .container {
-        position: relative;
+        position: absolute;
         width: 40px;
         height: 40px;
+        z-index: 99;
         /*border: 1px solid #000; hovertree.com */
     }
 
     .content{
+        position: relative;
         display: none;
+        z-index: 9999;
     }
 
     .container:hover .content{
+        /* position: absolute;  */
         padding: 10px;
         width: 200px;
         color: #000000;
         background-color: #ffffff;
         display: block;
         min-height: 20px;
+        z-index: 9999;
+        margin-left: 40px;
     }
 
     /* 保持大小不变的小圆圈 何问起 */