soc_app/src/components/TopBar.vue

<template>
  <div class="top-bar-box">
    <div class="top-bar">
      <div class="top-box">
        <span>移动安全保卫管理平台</span>
        <van-icon name="setting-o" size="26" @click="clickOutLogin" />
      </div>
      <div class="bottom-box">
        <div>
          <p class="user-name">{{ userName }}</p>
          <p class="org-info">
            <span>{{ orgName }}</span>
            <van-icon name="arrow" size="20" />
          </p>
          <p class="van-multi-ellipsis--l2 introduce-info ">
            <span v-for="item in roleList" :key="item.roleId">{{ item.roleName }}</span>
          </p>
        </div>
      </div>
    </div>


    <div v-if="showNotice" class="notice-box">
      <div>
        <van-notice-bar  v-if="list.length>0" left-icon="volume-o" mode="closeable"  :color="color" :background="background">
          <van-swipe
            @change="onChange"
            vertical
            class="notice-swipe"
            :autoplay="8000"
            :show-indicators="false">
            <van-swipe-item v-for="item in list" :key="item.id" @click="clickHandler(item)" >
              {{item.alarmTitle}}
            </van-swipe-item>
          </van-swipe>
        </van-notice-bar>
      </div>
    </div>


<!--    &lt;!&ndash; 天气预警 &ndash;&gt;-->
<!--    <van-swipe v-if="list.length > 0" style="height: 50px" vertical autoplay="2000">-->
<!--      <van-swipe-item v-for="item in list" :key="item.id" @click="clickHandler(item)">-->
<!--        <div class="color" :style="{ color: item.bgc, backgroundColor: '#fff' }">-->
<!--          <van-icon name="warn-o" /> {{ item.alarmTitle }}-->
<!--        </div>-->
<!--      </van-swipe-item>-->

<!--      <template #indicator>-->
<!--        <div class="custom-indicator"></div>-->
<!--      </template>-->
<!--    </van-swipe>-->
  </div>
</template>
<script>
import { Icon } from 'vant'
import { mapGetters } from 'vuex'
import { logout, getTheAreaWeather } from '@/api/public'
export default {
  components: {
    [Icon.name]: Icon
  },
  props:{
    showNotice:{
      type:Boolean,
      default:true
    },
  },
  data() {
    return {
      show: false,
      info: '',
      active: this.defaultActive,
      color: '#ecf9ff',
      background: 'rgba(78,162,248,0.63)'
    }
  },
  computed: {
    ...mapGetters(['userName', 'orgName','roleList', 'orgId']),
    //获取天气数据
    list() {
      if(!this.orgId)return [];
      let lists = [];
      getTheAreaWeather(this.orgId).then(res => {
       lists = res.data
      })
      return lists;
    }
  },
  methods: {
    onChange(index){
      let alarmLevel = this.list[index].alarmLevel;
      switch (alarmLevel){
        case '蓝色':
          this.background = 'rgba(78,162,248,0.62)';
          //this.color = '#fff';
          break;
        case '黄色':
          this.background = 'rgba(238,227,103,0.63)';
          //this.color = '#fff';
          break;
        case '橙色':
          this.background = 'rgba(246,181,104,0.62)';
          //this.color = '#fff';
          break;
        case '红色':
          this.background = 'rgba(239,70,74,0.65)';
          //this.color = '#fff';
      }
    },
    clickOutLogin() {
      logout().then(res => {
        sessionStorage.clear()
        this.$router.replace('/login')
        this.$toast('退出登录')
      })
    },
    clickHandler(item) {
      console.log(item,'1111111')
      this.info = item.alarmContent
      this.show = true
    },
  }
}
</script>
<style lang="scss">
.van-notice-bar{
  line-height:60px;
  height: 60px;
}
.notice-swipe {
  height: 30px;
  line-height: 30px;
}
.van-swipe-item{
  text-shadow: 0 0 3px #888;
}
</style>
<style scoped lang="scss">
.top-bar-box{
  position: relative;
}
.top-bar {
  height: 300px;
  width: 100%;
  background: url('../assets/img/banner.png') no-repeat center rgba(255,255,255,.1);
  background-size: 100% 100%;
  padding: 40px 40px 20px 40px;
  text-shadow: 0 1px 3px #666;
  box-shadow: 0 1px 10px #5ebaee;
  color: #fff;
  > div {
    width: 100%;
  }
}
.top-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  > span {
    font-size: 40px;
  }
}
.notice-box{
  width: 100%;
  position: absolute;
  bottom: -80;
  z-index: 1000;
}
.bottom-box {
  padding-top: 30px;
  > div {
    .user-name {
      font-size: 30px;
      margin-bottom: 10px;
    }
    .org-info{
      font-size: 28px;
      display: flex;
      justify-content: space-between;
    }
    .introduce-info {
      font-size: 24px;
      line-height: 34px;
      >span{
        display: inline-block;
        margin-right: 20px;
      }
    }
  }
}
</style>