|
@@ -3,19 +3,34 @@
|
|
|
<!-- 天气消息 -->
|
|
<!-- 天气消息 -->
|
|
|
<div v-if="showNotice" class="notice-box">
|
|
<div v-if="showNotice" class="notice-box">
|
|
|
<div>
|
|
<div>
|
|
|
- <van-notice-bar v-if="lists.length > 0" left-icon="volume-o" mode="closeable" :background="background">
|
|
|
|
|
- <van-swipe
|
|
|
|
|
- @change="changeColor"
|
|
|
|
|
- vertical
|
|
|
|
|
- class="notice-swipe"
|
|
|
|
|
- :autoplay="8000"
|
|
|
|
|
- :show-indicators="false">
|
|
|
|
|
- <van-swipe-item v-for="item in lists" :key="item.id" @click="clickHandler(item)" >
|
|
|
|
|
- <span :style="{color:color,textShadow:'0 0 1px #666'}">
|
|
|
|
|
- {{item.alarmTitle}}
|
|
|
|
|
- </span>
|
|
|
|
|
- </van-swipe-item>
|
|
|
|
|
- </van-swipe>
|
|
|
|
|
|
|
+ <van-notice-bar
|
|
|
|
|
+ ref="NoticeBar"
|
|
|
|
|
+ v-if="lists.length > 0"
|
|
|
|
|
+ mode="closeable"
|
|
|
|
|
+ :speed="50"
|
|
|
|
|
+ :text="itemInfo.alarmTitle"
|
|
|
|
|
+ :color="color"
|
|
|
|
|
+ background="#f5f5f5"
|
|
|
|
|
+ :scrollable="true"
|
|
|
|
|
+ @click="clickHandler(itemInfo)"
|
|
|
|
|
+ left-icon="bulb-o">
|
|
|
|
|
+<!-- <span v-if="itemInfo" :style="{color:color,textShadow:'0 0 1px #666'}">-->
|
|
|
|
|
+<!-- {{itemInfo.alarmTitle}}-->
|
|
|
|
|
+<!-- </span>-->
|
|
|
|
|
+<!-- <van-swipe-->
|
|
|
|
|
+<!-- @change="changeColor"-->
|
|
|
|
|
+<!-- vertical-->
|
|
|
|
|
+<!-- class="notice-swipe"-->
|
|
|
|
|
+<!-- :autoplay="5000"-->
|
|
|
|
|
+<!-- :show-indicators="false">-->
|
|
|
|
|
+<!-- <van-swipe-item v-for="item in lists" :key="item.id" @click="clickHandler(item)" >-->
|
|
|
|
|
+<!-- <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" :style="{color:color,textShadow:'0 0 1px #666'}">-->
|
|
|
|
|
+<!-- <span :style="{color:color,textShadow:'0 0 1px #666'}">-->
|
|
|
|
|
+<!-- {{item.alarmTitle}}-->
|
|
|
|
|
+<!-- </span>-->
|
|
|
|
|
+<!-- </p>-->
|
|
|
|
|
+<!-- </van-swipe-item>-->
|
|
|
|
|
+<!-- </van-swipe>-->
|
|
|
</van-notice-bar>
|
|
</van-notice-bar>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -35,6 +50,7 @@
|
|
|
<script >
|
|
<script >
|
|
|
import { mapGetters } from 'vuex'
|
|
import { mapGetters } from 'vuex'
|
|
|
import { getTheAreaWeather } from '@/api/public'
|
|
import { getTheAreaWeather } from '@/api/public'
|
|
|
|
|
+import request from "@/utils/request";
|
|
|
export default {
|
|
export default {
|
|
|
props:{
|
|
props:{
|
|
|
showNotice:{
|
|
showNotice:{
|
|
@@ -49,7 +65,12 @@ export default {
|
|
|
lists:[],
|
|
lists:[],
|
|
|
active: this.defaultActive,
|
|
active: this.defaultActive,
|
|
|
color: '#ecf9ff',
|
|
color: '#ecf9ff',
|
|
|
- background: null
|
|
|
|
|
|
|
+ background: null,
|
|
|
|
|
+ noticeIcon:require('@/assets/img/icon/error.png'),
|
|
|
|
|
+ itemInfo: null,
|
|
|
|
|
+ timer:8000,
|
|
|
|
|
+ timeOut:null,
|
|
|
|
|
+ index:0,
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
mounted() {
|
|
mounted() {
|
|
@@ -120,14 +141,25 @@ export default {
|
|
|
},
|
|
},
|
|
|
]
|
|
]
|
|
|
this.lists = str;
|
|
this.lists = str;
|
|
|
- if(this.lists.length > 0){
|
|
|
|
|
- this.changeColor(0);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ if(this.lists.length <= 0) return;
|
|
|
|
|
+ this.itemInfo = this.lists[this.index];
|
|
|
|
|
+ this.changeItem(this.lists[0]);
|
|
|
|
|
+ this.setAutoTime();
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
- changeColor(index){
|
|
|
|
|
- console.log(this.lists,'alarmLevel')
|
|
|
|
|
- let alarmLevel = this.lists[index].alarmLevel;
|
|
|
|
|
|
|
+ //
|
|
|
|
|
+ setAutoTime(){
|
|
|
|
|
+ this.timeOut = setInterval(()=>{
|
|
|
|
|
+ if(this.index >= this.lists.length-1) this.index = -1;
|
|
|
|
|
+ this.index++;
|
|
|
|
|
+ console.log(this.index,'index')
|
|
|
|
|
+ this.itemInfo = this.lists[this.index];
|
|
|
|
|
+ this.changeItem(this.itemInfo)
|
|
|
|
|
+ },this.timer)
|
|
|
|
|
+ },
|
|
|
|
|
+ //
|
|
|
|
|
+ changeItem(info){
|
|
|
|
|
+ let alarmLevel = info.alarmLevel;
|
|
|
switch (alarmLevel){
|
|
switch (alarmLevel){
|
|
|
case '蓝色':
|
|
case '蓝色':
|
|
|
this.color= '#2E65FE';
|
|
this.color= '#2E65FE';
|
|
@@ -153,20 +185,24 @@ export default {
|
|
|
//this.background = 'rgba(215,43,35,0.8)';
|
|
//this.background = 'rgba(215,43,35,0.8)';
|
|
|
//this.color = '#fff';
|
|
//this.color = '#fff';
|
|
|
}
|
|
}
|
|
|
|
|
+ console.log(info,'info')
|
|
|
},
|
|
},
|
|
|
clickHandler(item) {
|
|
clickHandler(item) {
|
|
|
this.info = item;
|
|
this.info = item;
|
|
|
this.info.color = this.color;
|
|
this.info.color = this.color;
|
|
|
this.show = true;
|
|
this.show = true;
|
|
|
},
|
|
},
|
|
|
- }
|
|
|
|
|
|
|
+ },
|
|
|
|
|
+ beforeDestroy(){
|
|
|
|
|
+ clearInterval(this.timeOut);
|
|
|
|
|
+ },
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
.van-notice-bar{
|
|
.van-notice-bar{
|
|
|
- line-height:60px;
|
|
|
|
|
- height: 60px;
|
|
|
|
|
|
|
+ line-height:90px;
|
|
|
|
|
+ height: 90px;
|
|
|
}
|
|
}
|
|
|
.notice-swipe {
|
|
.notice-swipe {
|
|
|
height: 30px;
|
|
height: 30px;
|
|
@@ -175,7 +211,11 @@ export default {
|
|
|
.van-swipe-item{
|
|
.van-swipe-item{
|
|
|
-text-shadow: 0 0 2px #333;
|
|
-text-shadow: 0 0 2px #333;
|
|
|
}
|
|
}
|
|
|
|
|
+.van-notice-bar__content{
|
|
|
|
|
+ text-shadow: 0 0 2px #333;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|
|
|
|
|
+
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
|
|
|
|
|
.dialog-title{
|
|
.dialog-title{
|