|
|
@@ -19,136 +19,19 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 天气消息 -->
|
|
|
- <div v-if="showNotice" class="notice-box">
|
|
|
- <div>
|
|
|
- <van-notice-bar v-if="lists.length > 0" left-icon="volume-o" mode="closeable" :color="color" :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)" >
|
|
|
- {{item.alarmTitle}}
|
|
|
- </van-swipe-item>
|
|
|
- </van-swipe>
|
|
|
- </van-notice-bar>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 弹窗 -->
|
|
|
- <van-dialog v-model="show" title="标题" :message="info.alarmContent" messageAlign="left">
|
|
|
- <template #title>
|
|
|
- <p class="dialog-title" :style="{color:background}">{{info.alarmTitle}}</p>
|
|
|
- </template>
|
|
|
- </van-dialog>
|
|
|
-
|
|
|
-
|
|
|
-<!-- <!– 天气预警 –>-->
|
|
|
-<!-- <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'
|
|
|
+import { logout } from '@/api/public'
|
|
|
export default {
|
|
|
- components: {
|
|
|
- [Icon.name]: Icon
|
|
|
- },
|
|
|
- props:{
|
|
|
- showNotice:{
|
|
|
- type:Boolean,
|
|
|
- default:true
|
|
|
- },
|
|
|
- },
|
|
|
data() {
|
|
|
- return {
|
|
|
- show: false,
|
|
|
- info: '',
|
|
|
- lists:[],
|
|
|
- active: this.defaultActive,
|
|
|
- color: '#ecf9ff',
|
|
|
- background: null
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getList();
|
|
|
+ return {}
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters(['userName', 'orgName','roleList', 'orgId']),
|
|
|
},
|
|
|
methods: {
|
|
|
- //获取天气数据
|
|
|
- getList() {
|
|
|
- if(!this.orgId)return [];
|
|
|
- getTheAreaWeather(this.orgId).then(res => {
|
|
|
- this.lists = res.data || [];
|
|
|
- //模拟数据
|
|
|
- // let str = [
|
|
|
- // {
|
|
|
- // alarmContent:"周宁县气象台2023年12月13日10时27分继续发布大雾黄色预警信号:预计未来12小时,我县部分乡镇将出现能见度小于500米的雾。请注意防范!(预警信息来源:国家预警信息发布中心)",
|
|
|
- // alarmLevel:"黄色",
|
|
|
- // alarmTime:"2023-12-13 14:00:10",
|
|
|
- // alarmTitle:"周宁县气象台2023年12月13日10时27分继续发布大雾黄色预警信号",
|
|
|
- // alarmType:"大雾",
|
|
|
- // area:"周宁",
|
|
|
- // city:"宁德",
|
|
|
- // code:"101230305",
|
|
|
- // createTime:"2023-12-13 10:27:00",
|
|
|
- // id:"8",
|
|
|
- // province:"福建"
|
|
|
- // },
|
|
|
- // {
|
|
|
- // alarmContent:"YY县气象台2023年12月13日10时27分继续发布大雾黄色预警信号:预计未来12小时,我县部分乡镇将出现能见度小于500米的雾。请注意防范!(预警信息来源:国家预警信息发布中心)",
|
|
|
- // alarmLevel:"红色",
|
|
|
- // alarmTime:"2023-12-13 14:00:10",
|
|
|
- // alarmTitle:"YY县气象台2023年12月13日10时27分继续发布大雾黄色预警信号",
|
|
|
- // alarmType:"大雾",
|
|
|
- // area:"周宁",
|
|
|
- // city:"宁德",
|
|
|
- // code:"101230305",
|
|
|
- // createTime:"2023-12-13 10:27:00",
|
|
|
- // id:"9",
|
|
|
- // province:"福建"
|
|
|
- // },
|
|
|
- // ]
|
|
|
- //this.lists = str;
|
|
|
- this.changeColor(0);
|
|
|
- })
|
|
|
- },
|
|
|
- changeColor(index){
|
|
|
- console.log(this.lists,'alarmLevel')
|
|
|
- let alarmLevel = this.lists[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 = '#fdb0b1';
|
|
|
- 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();
|
|
|
@@ -156,26 +39,10 @@ export default {
|
|
|
this.$toast('退出登录');
|
|
|
})
|
|
|
},
|
|
|
- clickHandler(item) {
|
|
|
- this.info = item;
|
|
|
- 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;
|
|
|
@@ -193,9 +60,7 @@ export default {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
-.dialog-title{
|
|
|
- padding: 0 30px;
|
|
|
-}
|
|
|
+
|
|
|
.top-box {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
@@ -204,12 +69,6 @@ export default {
|
|
|
font-size: 40px;
|
|
|
}
|
|
|
}
|
|
|
-.notice-box{
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- bottom: -80;
|
|
|
- z-index: 1000;
|
|
|
-}
|
|
|
.bottom-box {
|
|
|
padding-top: 30px;
|
|
|
> div {
|