|
|
@@ -2,17 +2,15 @@
|
|
|
<div class="menu-container">
|
|
|
<top-bar></top-bar>
|
|
|
<!-- 天气预警 -->
|
|
|
- <van-swipe style="height: 50px" vertical autoplay="1000">
|
|
|
- <van-swipe-item>
|
|
|
- <div class="color">
|
|
|
-
|
|
|
+ <van-swipe 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>
|
|
|
- <van-swipe-item>2</van-swipe-item>
|
|
|
- <van-swipe-item>3</van-swipe-item>
|
|
|
- <van-swipe-item>4</van-swipe-item>
|
|
|
+ </van-swipe-item>
|
|
|
+
|
|
|
<template #indicator>
|
|
|
- <div class="custom-indicator"></div>
|
|
|
+ <div class="custom-indicator"></div>
|
|
|
</template>
|
|
|
</van-swipe>
|
|
|
<div class="menu-list">
|
|
|
@@ -29,23 +27,32 @@
|
|
|
</van-grid>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <van-dialog v-model="show" title="标题" confirmButtonText="关闭">
|
|
|
+
|
|
|
+ <p class="text">
|
|
|
+ {{ info }}
|
|
|
+ </p>
|
|
|
+ </van-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import TopBar from '@/components/TopBar'
|
|
|
import { mapGetters } from 'vuex'
|
|
|
-import { getMenu,getTheAreaWeather } from '@/api/public'
|
|
|
+import { getMenu, getTheAreaWeather } from '@/api/public'
|
|
|
export default {
|
|
|
name: 'menus',
|
|
|
components: { TopBar },
|
|
|
data() {
|
|
|
return {
|
|
|
- menuList: []
|
|
|
+ menuList: [],
|
|
|
+ list: [],
|
|
|
+ show: false,
|
|
|
+ info: ''
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(['userName','orgId'])
|
|
|
+ ...mapGetters(['userName', 'orgId'])
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getMenuList()
|
|
|
@@ -57,11 +64,28 @@ export default {
|
|
|
this.menuList = res.data
|
|
|
})
|
|
|
},
|
|
|
+ clickHandler(item) {
|
|
|
+ this.info = item.alarmContent
|
|
|
+ this.show = true
|
|
|
+ },
|
|
|
+
|
|
|
//获取天气数据
|
|
|
- getTheWeather(){
|
|
|
- getTheAreaWeather(this.orgId).then(res=>{
|
|
|
- console.log(res);
|
|
|
- })
|
|
|
+ getTheWeather() {
|
|
|
+ getTheAreaWeather(this.orgId).then(res => {
|
|
|
+ console.log(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'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
},
|
|
|
onclick() {
|
|
|
this.$router.push('/workTime')
|
|
|
@@ -71,19 +95,23 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.color{
|
|
|
+.text{
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+.color {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- background-color: red;
|
|
|
+ line-height: 120px;
|
|
|
+ // background-color: red;
|
|
|
+}
|
|
|
+.custom-indicator {
|
|
|
+ position: absolute;
|
|
|
+ right: 5px;
|
|
|
+ bottom: 5px;
|
|
|
+ padding: 2px 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ background: rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
- .custom-indicator {
|
|
|
- position: absolute;
|
|
|
- right: 5px;
|
|
|
- bottom: 5px;
|
|
|
- padding: 2px 5px;
|
|
|
- font-size: 12px;
|
|
|
- background: rgba(0, 0, 0, 0.1);
|
|
|
- }
|
|
|
.menu-container {
|
|
|
background-color: rgba(237, 252, 255, 1);
|
|
|
}
|