换底图

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

@@ -9,10 +9,10 @@
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.2)" >
 
-            <div class="left" v-if='stationList[0]'>
+            <!-- <div class="left" v-if='stationList[0]'>
             </div>
             <div class="center" v-if='stationList[1]'></div>
-            <div class="right" v-if='stationList[2]'></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" @click='handleStation(item.id)'>
                 <div :class="['stationPoint',alarmList.map(e=>e.stationId).includes(item.id)?'css_animation':'']"></div>
@@ -378,7 +378,7 @@
                         // console.log('alarm', data)
                         this.alarmList = data.list
                         this.stationAlarmList = data.stationAlarmList
-                        // console.log('stationAlarmList:', this.stationAlarmList)
+                        console.log('stationAlarmList:', this.stationAlarmList)
                         isSuccess = true
                         this.oneCount = data.countList.oneCount
                         this.twoCount = data.countList.twoCount
@@ -412,7 +412,7 @@
                     params: this.$http.adornParams(params)
                 }).then(data => {
                     if (data) {
-                        // console.log('stationList:', data.list[0])
+                        console.log('stationList:', data.list[0])
                         // 站点集合
                         this.stationList = data.list[0]
                         // 线路
@@ -942,44 +942,44 @@ color: #fff;
     left:0;
     background: url('../../../../assets/images/bg.png') no-repeat;
     background-size: 100% 100%;
-    .left{
-        width: 13%;
-        height: 90px;
-        height: 12%;
-        line-height: 12%;
-        text-align: center;
-        border: 1px solid red;
-        position: absolute;
-        left: 30%;
-        top: 24%;
-        transform: skewX(-44deg) rotate(5deg);
+    // .left{
+    //     width: 13%;
+    //     height: 90px;
+    //     height: 12%;
+    //     line-height: 12%;
+    //     text-align: center;
+    //     border: 1px solid red;
+    //     position: absolute;
+    //     left: 30%;
+    //     top: 24%;
+    //     transform: skewX(-44deg) rotate(5deg);
 
-    }
-    .center{
-        width: 22%;
-        height: 440px;
-        height: 56%;
-        line-height: 56%;
-        text-align: center;
-        border: 1px solid red;
-        position: absolute;
-        left: 40.5%;
-        top: 29%;
-        transform: skewX(-16deg) rotate(6deg);
+    // }
+    // .center{
+    //     width: 22%;
+    //     height: 440px;
+    //     height: 56%;
+    //     line-height: 56%;
+    //     text-align: center;
+    //     border: 1px solid red;
+    //     position: absolute;
+    //     left: 40.5%;
+    //     top: 29%;
+    //     transform: skewX(-16deg) rotate(6deg);
 
-    }
-    .right{
-        width: 15%;
-        height: 170px;
-        height: 22%;
-        line-height: 22%;
-        text-align: center;
-        border: 1px solid red;
-        position: absolute;
-        left: 69%;
-        top: 24%;
-        transform: skewX(7deg) rotate(4deg);
-    }
+    // }
+    // .right{
+    //     width: 15%;
+    //     height: 170px;
+    //     height: 22%;
+    //     line-height: 22%;
+    //     text-align: center;
+    //     border: 1px solid red;
+    //     position: absolute;
+    //     left: 69%;
+    //     top: 24%;
+    //     transform: skewX(7deg) rotate(4deg);
+    // }
 
 }
 
@@ -997,7 +997,7 @@ color: #fff;
 
 @keyframes myfirst {
     to {
-        transform: scale(3);//变换结束大小
+        transform: scale(2.8);//变换结束大小
         background:  rgba(#FF3823,0);//结束时颜色
     }
 }