castgroup_bigscreen/src/components/alarm.vue

<!--
 * @LastEditors: gcz
-->
<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 class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()">
            <li
              v-for="(item,index) in data"
              :key="index"
              @click="jumpMap(item)"
            >{{item.countyName}}{{item.townName}}{{item.villageName}}{{item.createTime.slice(5,16)}}发现[{{item.eventType|filterEventType}}]，请尽快处理！</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
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);
    this.ScrollUp();
  },
  computed: {
    ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
  },
  watch: {
    '$store.state.addr.mapLevel': {
      handler(val) {
        console.log(val);
        if (val === 'city') {
          // console.log('aowfk');
          let _this = this;
          this.jumpDistrict();
          // setTimeout(() => {
          //   console.log('321');
          //   _this.jumpDistrict();
          // }, 800);
        }
      }
    }
  },
  methods: {
    ...mapMutations([
      'changeSelectCity',
      'changeSelectDistrict',
      'changeSelectStreet'
    ]),
    jumpMap(item) {
      this.alarData = item;
     
      this.vuexCityList.forEach((element) => {
        if (item.cityId === element.areaId) {
          this.changeSelectCity({
            value: element.areaCode,
            label: item.cityName,
            areaId: element.areaId
          });
          console.log(element.areaCode.substring(0, 6));
          console.log(item.cityName);
          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);
      }, 5000);
    },
    //鼠标移上去停止
    Stop() {
      clearInterval(this.intNum);
    },
    Up() {
      this.ScrollUp();
    }
  }
};
</script>

<style lang='scss' scoped>
.new-list {
  // line-height: 28px;
  transition: top 0.5s;
}
.anim {
  transition: all 0.5s;
  margin-top: calc(var(--h) * -1px); //高度等于行高
}
.alarm-wrap {
  pointer-events: none;
  & > * {
    pointer-events: auto;
  }
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--header-height) + 34px + 50px);
}
.alarm {
  position: relative;
  width: 32vw;
  margin: 0 auto;
  transform: translateX(10%);
  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: 100px;
      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;
  }
  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;
  background: transparent;
  color: #fff;
  overflow: hidden;
}
ul {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

ul li {
  flex-shrink: 0;
  width: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}

ul li {
  flex-shrink: 0;
  width: 100%;
  // padding-left: 10px;
  box-sizing: border-box;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
}

ul {
  animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}

ul li {
  white-space: nowrap;
  cursor: pointer;
  animation: liMove calc(var(--speed)) infinite;
}

// @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));
//   }
// }
@media only screen and (max-width: 1200px) {
  .alarm {
    width: 35vw;
    ul {
      li {
        font-size: 14px;
      }
    }
  }
}
</style>