事件信息接口联调，点击事件跳转定位

src/components/alarm.vue

@@ -1,146 +1,230 @@
 <!--
- * @LastEditors: gcz
+ * @LastEditors: wangcc
 -->
 <template>
-    <div class="alarm-wrap">
-        <div class='alarm'>
-            <div class="alarm-con u-flex">
-                <img src="../assets/img/gaojing.png" alt="">
-                <div class="g-container">
-                <ul :style="{'--s': alarmNum}">
-                    <li v-for="(item) in data" :key="item.id">{{item.content}}</li>
-                    <!--末尾补一个首条数据-->
-                    <li>{{data[0].content}}</li>
-                </ul>
-                </div>
-            </div>
+  <div class="alarm-wrap">
+    <div class="alarm">
+      <div class="alarm-con u-flex">
+        <img src="../assets/img/gaojing.png" alt />
+        <div class="g-container">
+          <ul class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()">
+            <li v-for="(item) in data" :key="item.id" @click="jumpMap(item)">{{item.content}}</li>
+          </ul>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-    export default {
-        name: '',
-        props:{
-            data:{
-                type: Array,
-                default: null,
-            },
-        },
-        components: {},
-        data () {
-            return {
-                alarmNum:this.data.length,
-            };
-        },
-        created(){},
-        methods: {},
+import { mapMutations, mapState, mapGetters } from 'vuex';
+export default {
+  name: '',
+  props: {
+    data: {
+      type: Array,
+      default: null
     }
+  },
+  components: {},
+  data() {
+    return {
+      alarmNum: this.data.length,
+      animate: false,
+      intNum: undefined,
+      alarData: {}
+    };
+  },
+  created() {
+    console.log(this.data);
+  },
+  computed: {
+    ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
+  },
+  watch: {
+    '$store.state.addr.mapLevel': {
+      handler(val) {
+        if (val === 'city') {
+          // console.log('aowfk');
+          this.jumpDistrict()
+        }
+      }
+    }
+  },
+  methods: {
+    ...mapMutations([
+      'changeSelectCity',
+      'changeSelectDistrict',
+      'changeSelectStreet'
+    ]),
+    jumpMap(item) {
+      console.log(item);
+      this.alarData = item;
+      if (this.$store.state.addr.mapLevel === 'province') {
+        this.vuexCityList.forEach((element) => {
+          if (item.cityId === element.areaId) {
+            this.changeSelectCity({
+              value: element.areaCode,
+              label: item.cityName,
+              areaId: element.areaId
+            });
+            this.$store.dispatch('searchArea', {
+              parentId: element.areaCode.substring(0, 6),
+              name: item.cityName,
+              mapLevel: 'city'
+            });
+          }
+        });
+      }
+    },
+    jumpDistrict() {
+      if (this.vuexDistrictList) {
+        this.vuexDistrictList.forEach((element) => {
+          if (this.alarData.countyId === element.areaId) {
+            this.changeSelectDistrict({
+              value: element.areaCode,
+              label: this.alarData.cityName,
+              areaId: element.areaId
+            });
+            this.$store.dispatch('searchArea', {
+              parentId: element.areaCode.substring(0, 6),
+              name: element.areaName,
+              mapLevel: 'district'
+            });
+          }
+        });
+      }
+    },
+    ScrollUp() {
+      this.intNum = setInterval(() => {
+        this.animate = true; // 向上滚动的时候需要添加css3过渡动画
+        setTimeout(() => {
+          this.data.push(this.data[0]); // 将数组的第一个元素添加到数组的
+          this.data.shift(); //删除数组的第一个元素
+          this.animate = false;
+        }, 500);
+      }, 2000);
+    },
+    //鼠标移上去停止
+    Stop() {
+      clearInterval(this.intNum);
+    },
+    Up() {
+      this.ScrollUp();
+    }
+  }
+};
 </script>
 
 <style lang='scss' scoped>
-.alarm-wrap{
+.new-list {
+  // line-height: 28px;
+  transition: top 0.5s;
+}
+.anim {
+  transition: all 0.5s;
+  margin-top: -28px; //高度等于行高
+}
+.alarm-wrap {
   pointer-events: none;
   & > * {
     pointer-events: auto;
   }
-position: fixed;
-    left: 0;
-    right: 0;
-    top: calc( var(--header-height) + 34px + 40px );
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: calc(var(--header-height) + 34px + 40px);
 }
 .alarm {
-     position: relative;
-     width: 30vw;
-     margin: 0 auto;
-     border: 1px solid rgba(186, 25, 25, 0.17);
-     height: 2.998501rem;
-     background: rgba(186, 25, 25, 0.17);
-     backdrop-filter: blur(6px);
-     &::before {
-         position: absolute;
-         top: 0;
-         left: 0;
-         content: "";
-         width: 10px;
-         height: 10px;
-         border-top: 2px solid #f33c52;
-         border-left: 2px solid #f33c52;
-       }
-       &::after {
-         position: absolute;
-         top: 0;
-         right: 0;
-         content: "";
-         width: 10px;
-         height: 10px;
-         border-top: 2px solid #f33c52;
-         border-right: 2px solid #f33c52;
-       }
-       .alarm-con{
-         position: absolute;
-         left: 0;
-         bottom: 0;
-         width: 100%;
-         height: 100%;
-         img{
-            width: 150px;
-            border-radius: unset;
-            cursor: default;
-            pointer-events: auto;
-            animation-name: imageAnimation;
-            animation-iteration-count: infinite;
-            animation-timing-function: linear;
-            animation-duration: 2s;
-            animation-delay: 0s;
-            -webkit-user-drag: none;
-            filter: brightness(120%);
-         }
-         &::before {
-           position: absolute;
-           bottom: 0;
-           left: 0;
-           content: "";
-           width: 10px;
-           height: 10px;
-           border-bottom: 2px solid #f33c52;
-           border-left: 2px solid #f33c52;
-         }
-         &::after {
-           position: absolute;
-           bottom: 0;
-           right: 0;
-           content: "";
-           width: 10px;
-           height: 10px;
-           border-bottom: 2px solid #f33c52;
-           border-right: 2px solid #f33c52;
-         }
-       }
-}
-@keyframes imageAnimation {
-    0% {
-        opacity: 1;
-        transform: none;
+  position: relative;
+  width: 30vw;
+  margin: 0 auto;
+  border: 1px solid rgba(186, 25, 25, 0.17);
+  height: 2.998501rem;
+  background: rgba(186, 25, 25, 0.17);
+  backdrop-filter: blur(6px);
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: '';
+    width: 10px;
+    height: 10px;
+    border-top: 2px solid #f33c52;
+    border-left: 2px solid #f33c52;
+  }
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    content: '';
+    width: 10px;
+    height: 10px;
+    border-top: 2px solid #f33c52;
+    border-right: 2px solid #f33c52;
+  }
+  .alarm-con {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    img {
+      width: 150px;
+      border-radius: unset;
+      cursor: default;
+      pointer-events: auto;
+      animation-name: imageAnimation;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+      animation-duration: 2s;
+      animation-delay: 0s;
+      -webkit-user-drag: none;
+      filter: brightness(120%);
     }
-    50% {
-        opacity: 0.3;
-        transform: none;
+    &::before {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      content: '';
+      width: 10px;
+      height: 10px;
+      border-bottom: 2px solid #f33c52;
+      border-left: 2px solid #f33c52;
     }
-    100% {
-        opacity: 1;
-        transform: none;
+    &::after {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      content: '';
+      width: 10px;
+      height: 10px;
+      border-bottom: 2px solid #f33c52;
+      border-right: 2px solid #f33c52;
     }
+  }
 }
-
-
+// @keyframes imageAnimation {
+//   0% {
+//     opacity: 1;
+//     transform: none;
+//   }
+//   50% {
+//     opacity: 0.3;
+//     transform: none;
+//   }
+//   100% {
+//     opacity: 1;
+//     transform: none;
+//   }
+// }
 
 .g-container {
   width: 100%;
   // margin: auto;
   height: calc(var(--h) * 1px);
   line-height: calc(var(--h) * 1px);
-//   font-size: 20px;
+  //   font-size: 20px;
   background: transparent;
   color: #fff;
   overflow: hidden;
@@ -158,7 +242,7 @@ ul li {
   width: 100%;
   padding-left: 10px;
   box-sizing: border-box;
-  list-style:none;
+  list-style: none;
   margin: 0;
   padding: 0;
 }
@@ -186,22 +270,22 @@ ul li {
   animation: liMove calc(var(--speed)) infinite;
 }
 
-@keyframes move {
-  0% {
-    transform: translate(0, 0);
-  }
-  100% {
-    transform: translate(0, calc(var(--s) * var(--h) * -1px));
-  }
-}
+// @keyframes move {
+//   0% {
+//     transform: translate(0, 0);
+//   }
+//   100% {
+//     transform: translate(0, calc(var(--s) * var(--h) * -1px));
+//   }
+// }
 
-@keyframes liMove {
-  0% {
-    transform: translate(0, 0);
-  }
-  60%,
-  100%  {
-    transform: translate(0, calc(var(--h) * -1px));
-  }
-}
+// @keyframes liMove {
+//   0% {
+//     transform: translate(0, 0);
+//   }
+//   60%,
+//   100% {
+//     transform: translate(0, calc(var(--h) * -1px));
+//   }
+// }
 </style>

src/components/amap.vue

@@ -130,8 +130,6 @@ export default {
       });
     },
     getDistrict(adName, mapLevel) {
-      console.log(adName);
-      console.log(mapLevel);
       let that = this;
       AMap.plugin(['AMap.DistrictSearch'], function () {
         var district = new AMap.DistrictSearch({
@@ -361,18 +359,20 @@ export default {
         }
 
         this.currentAreaNode = areaNode;
-        console.log(selectCity);
-        if (mapLevel == 'city' || mapLevel == undefined || mapLevel == 'province') {
+        if (
+          mapLevel == 'city' ||
+          mapLevel == undefined ||
+          mapLevel == 'province'
+        ) {
           this.setMarker();
         }
-        console.log(this.$store.state.addr.page);
         if (mapLevel === 'district') {
           if (this.$store.state.addr.page === 'forest') {
             this.addForestPolygon();
           } else if (this.$store.state.addr.page === 'treeSpecies') {
             this.addTreeSpeciesPolygon();
-          }else if(this.$store.state.addr.page ==='event'){
-            this.getEven()
+          } else if (this.$store.state.addr.page === 'event') {
+            this.getEven();
           }
         }
         //设置当前使用的定位用节点
@@ -607,9 +607,89 @@ export default {
       });
     },
     getEven() {
-      alarmDataApi().then( res => {
-        console.log(res);
-      })
+      alarmDataApi().then((res) => {
+        console.log(res.data);
+        res.data.forEach((item) => {
+          let lanLatArr = [item.longitude, item.latitude];
+          let fireIcon = require('@/assets/img/fire.png');
+          let cutTreeIcon = require('@/assets/img/cutTree.png');
+          let insectpestIcon = require('@/assets/img/insectpest.png');
+          if (item.eventType == 1) {
+            item.eventContLabel = '火灾';
+          } else if (item.eventType == 2) {
+            item.eventContLabel = '砍伐';
+          } else if (item.eventType == 3) {
+            item.eventContLabel = '病虫害';
+          }
+          let treeSmallLabel =
+            "<div class='info-small'>" +
+            "<h5 class='marker-title'>最新事件" +
+            '</h5>' +
+            "<div class='marker-content'>" +
+            '<p>事件类型：' +
+            item.eventContLabel +
+            '</p>' +
+            '<p>上报时间：' +
+            item.createTime +
+            '</p>' +
+            '<p>上报人：' +
+            item.createBy +
+            '</p>' +
+            '<p>位置：' +
+            item.cityName +
+            item.countyName +
+            item.townName +
+            item.villageName +
+            '</p>' +
+            '</div>' +
+            '</div>';
+
+          switch (item.eventType) {
+            case 1:
+              this.smallMarker = new AMap.Marker({
+                position: lanLatArr,
+                icon: fireIcon,
+                anchor: 'bottom-center',
+                offset: new AMap.Pixel(0, 0)
+              });
+              this.smallMarker.setLabel({
+                direction: 'top',
+                offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
+                content: treeSmallLabel //设置文本标注内容
+              });
+              break;
+            case 2:
+              this.smallMarker = new AMap.Marker({
+                position: lanLatArr,
+                icon: cutTreeIcon,
+                anchor: 'bottom-center',
+                offset: new AMap.Pixel(0, 0)
+              });
+              this.smallMarker.setLabel({
+                direction: 'top',
+                offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
+                content: treeSmallLabel //设置文本标注内容
+              });
+              break;
+            case 3:
+              this.smallMarker = new AMap.Marker({
+                position: lanLatArr,
+                icon: insectpestIcon,
+                anchor: 'bottom-center',
+                offset: new AMap.Pixel(0, 0)
+              });
+              this.smallMarker.setLabel({
+                direction: 'top',
+                offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
+                content: treeSmallLabel //设置文本标注内容
+              });
+              break;
+            default:
+              break;
+          }
+          this.smallMarker.setMap(this.map);
+        });
+      });
     },
     setMarker() {
       let forestFarm = [

src/components/pickerAddr.vue

@@ -1,5 +1,5 @@
 <!--
- * @LastEditors: gcz
+ * @LastEditors: wangcc
 -->
 <template>
   <div class="pickerAddr u-flex">