update

src/pages/routes/ol/index/index.vue

@@ -14,15 +14,15 @@
             <div class="center" v-if='stationList[1]'></div>
             <div class="right" v-if='stationList[2]'></div>
 
-            <div v-for="item in stationList" :key="item.id" :style="{'left':item.x,'top':item.y}" class="stationWarp">
+            <div v-for="item in stationList" :key="item.id" :style="{'left':item.x,'top':item.y}" class="stationWarp" @click='handleStation(item.id)'>
                 <div :class="['stationPoint',alarmList.map(e=>e.stationId).includes(item.id)?'css_animation':'']"></div>
                 {{item.stationName}}
 
-                <div v-for='alarm in stationAlarmList' :key='alarm.stationId'>
-                    <div  v-if='item.id == alarm.stationId'>
-                    {{alarm.stationId}}
+                <div class="alarmWarp" v-for='alarm in stationAlarmList' :key='alarm.stationId'>
+                    <div class="alarmItem"  v-if='item.id == alarm.stationId'>
                                 <div v-for="info in alarm.list" :key="info.id">
-                                    {{info.eventName}}
+                                    {{info.createTime}} {{info.tierName}}
+                                    <br><span class="alarm-info">{{info.eventName}}</span><br>
                                 </div>
                     </div>
                 </div>
@@ -173,6 +173,10 @@
        },
         methods: {
 
+        handleStation(id) {
+            console.log('站点id', id)
+        },
+
       // ====================================
       //初始化weosocket-ol
       initWebSocketOl() {
@@ -836,15 +840,40 @@ flex-direction: column;
 align-items: center;
 text-align: center;
 position: absolute;
+color: #fff;
+    .stationPoint{
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background: #45b5f8;
+    }
+
+    .alarmWarp{
+        display: none;
+        width:245px;
+        text-align: left;
+        font-size:16px;
+        font-weight:400;
+        color:rgba(196,196,196,1);
+        background:#2A2828;
+        opacity:.95;
+        box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.1);
+    .alarmItem{
+        padding: 10px;
+        .alarm-info{
+                    font-size:16px;
+                    color: red;
+                    font-weight: 600;
+                }
+        }
+
+    }
 
-.stationPoint{
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    background: #45b5f8;
-}
 }
 
+.stationWarp:hover .alarmWarp{
+    display: block;
+}
 .map{
     width: 100%;
     height:100%;
@@ -896,7 +925,7 @@ position: absolute;
     height: 150px;//图标高
     width: 150px;//图标高
     border-radius: 50%;//圆形
-    background: rgba(skyblue,0.3);//颜色 可以为rgba()透明度
+    background: rgba(#FF3823,0.8) !important;//颜色 可以为rgba()透明度
     transform: scale(1);//变换初始大小
     animation: myfirst 2s;//变换速度
     animation-iteration-count:infinite;//重复闪烁
@@ -907,7 +936,7 @@ position: absolute;
 @keyframes myfirst {
     to {
         transform: scale(3);//变换结束大小
-        background:  rgba(skyblue,0);//结束时颜色
+        background:  rgba(#FF3823,0);//结束时颜色
     }
 }
     #map {