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="introduce-info" v-for="item in rolesList" :key="item.roleId">{{ orgName }} · {{ item.roleName }}</p>
        </div>
        <van-icon name="arrow" size="20" />
      </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 {
      list: [],
      show: false,
      info: '',
      active: this.defaultActive,
      rolesList: [],
      color: '#ecf9ff',
      background: '#4ea2f8'
    }
  },
  computed: {
    ...mapGetters(['userName', 'orgName', 'orgId'])
  },
  created() {},
  mounted() {
    setTimeout(() => {
      if(this.orgId){

        this.getTheWeather()
      }
    }, 100);


    // this.rolesList=JSON.parse(window.sessionStorage.getItem('SET_USER_ROLELIST'))||[]
  },
  methods: {
    onChange(index){
      let alarmLevel = this.list[index].alarmLevel;
      switch (alarmLevel){
        case '蓝色':
          this.background = '#4ea2f8';
          this.color = '#fff';
          break;
        case '黄色':
          this.background = '#eee367';
          this.color = '#fff';
          break;
        case '橙色':
          this.background = '#f6b568';
          this.color = '#fff';
          break;
        case '红色':
          this.background = '#ef464a';
          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
    },

    //获取天气数据
    getTheWeather() {
      getTheAreaWeather(this.orgId).then(res => {
        this.list = res.data || []
        this.list.forEach(item => {
          if (item.alarmLevel == '橙色') {
            item.bgc = '#fa8e00'
          } else if (item.alarmLevel == '红色') {
            item.bgc = '#fa0008'
          } else if (item.alarmLevel == '蓝色') {
            item.bgc = '#3788fa'
          } else if (item.alarmLevel == '黄色') {
            item.bgc = '#e9fa00'
          }
        })
        setTimeout(() => {
          this.rolesList = JSON.parse(window.sessionStorage.getItem('SET_USER_ROLELIST')) || []
        }, 100)
        console.log(this.rolesList)
      })
    }
  }
}
</script>
<style lang="scss">
.van-notice-bar{
  line-height:60px;
  height: 60px;
}
.notice-swipe {
  height: 30px;
  line-height: 30px;
}
</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;
  background-size: 100% 100%;
  padding: 40px;
  box-shadow: 0 1px 8px #ccc;
  > div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
  }
}
.top-box {
  > span {
    font-size: 40px;
  }
}
.notice-box{
  width: 100%;
  position: absolute;
  bottom: -80;
  z-index: 1000;
}
.bottom-box {
  padding-top: 50px;
  > div {
    .user-name {
      font-size: 30px;
      margin-bottom: 20px;
    }
    .introduce-info {
      font-size: 20px;
    }
  }
}
</style>