|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div class="top-bar-box">
|
|
|
<div class="top-bar">
|
|
|
<div class="top-box">
|
|
|
<span>移动安全保卫管理平台</span>
|
|
|
@@ -14,19 +14,36 @@
|
|
|
<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>
|
|
|
|
|
|
- <!-- 天气预警 -->
|
|
|
- <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>
|
|
|
+<!-- <!– 天气预警 –>-->
|
|
|
+<!-- <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>
|
|
|
@@ -37,13 +54,21 @@ export default {
|
|
|
components: {
|
|
|
[Icon.name]: Icon
|
|
|
},
|
|
|
+ props:{
|
|
|
+ showNotice:{
|
|
|
+ type:Boolean,
|
|
|
+ default:true
|
|
|
+ },
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
list: [],
|
|
|
show: false,
|
|
|
info: '',
|
|
|
active: this.defaultActive,
|
|
|
- rolesList: []
|
|
|
+ rolesList: [],
|
|
|
+ color: '#ecf9ff',
|
|
|
+ background: '#4ea2f8'
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -57,11 +82,31 @@ export default {
|
|
|
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()
|
|
|
@@ -70,6 +115,7 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
clickHandler(item) {
|
|
|
+ console.log(item,'1111111')
|
|
|
this.info = item.alarmContent
|
|
|
this.show = true
|
|
|
},
|
|
|
@@ -98,8 +144,20 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</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%;
|
|
|
@@ -120,6 +178,12 @@ export default {
|
|
|
font-size: 40px;
|
|
|
}
|
|
|
}
|
|
|
+.notice-box{
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -80;
|
|
|
+ z-index: 1000;
|
|
|
+}
|
|
|
.bottom-box {
|
|
|
padding-top: 50px;
|
|
|
> div {
|