<template>
<div class="fixTopBox">
<vue-scroll ref="vs">
<div class="topContaion">
<div class="topBox">
<div class="topTime">
<a>{{year}}</a>年<a>{{mouth}}</a>月<a>{{day}}</a>日
<a>{{time}}</a>
<a>{{week}}</a>
</div>
<div class="topMenu">
<ul>
<li v-for="(value,index) in topMenuLeft" :key="index" @click="changeStatus(value.component)"><a>{{value.label}}</a></li>
</ul>
</div>
<div class="topTitle">
<img :src="require(`@/assets/images/top-titleBg.png`)">
<h1>赣州蓉江新区智慧云脑</h1>
<img :src="require(`@/assets/images/top-titleBg.png`)">
</div>
<div class="topMenu">
<ul>
<li v-for="(value,index) in topMenuRight" :key="index" @click="changeStatus(value.component)"><a>{{value.label}}</a></li>
</ul>
</div>
<div class="topWeather">
<ul v-if="weatherInfo.length>0">
<li v-for="(v,i) in weatherInfo" :key="i">
<div v-if="i < 3">
<img :src="v.dayWeather | weatherFilter">
<!-- <img :src="require(`@/assets/images/weather-${v.dayWeather}.png`)"> -->
{{i | daysFilter}}
<a>{{v.nightTemp}}~{{v.dayTemp}}℃</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</vue-scroll>
</div>
</template>
<script>
import { mapActions } from 'vuex'
import moment from 'moment'
moment.locale('zh-cn')
import MapLoader from '@/utils/AMap.js'
export default {
data(){
return {
currentTime: null,
year: '0000',
mouth: '00',
day: '00',
time: '00:00:00',
week: '0000',
topMenuLeft:[
{ label:'总体态势', id:1, component:'index' },
{ label:'智慧管网', id:2, component:'WisdomPipeNetwork' },
{ label:'智慧交通', id:3, component:'WisdomTraffic' },
{ label:'智慧公共安全 ', id:4, component:'WisdomPublicSafety' },
{ label:'智慧城管', id:5, component:'WisdomCityManage' },
],
topMenuRight:[
{ label:'智慧政务', id:6, component:'WisdomGovernmentAffairs' },
{ label:'智慧社区', id:7, component:'WisdomCommunity' },
{ label:'智慧园林', id:8, component:'WisdomGardens' },
{ label:'智慧教育', id:9, component:'WisdomEducation' },
{ label:'智慧医疗', id:10, component:'WisdomMedicalTreatment' },
{ label:'智慧旅游', id:11, component:'WisdomTravel' }
],
city:'赣州市',
weatherInfo: [], //天气情况
}
},
created(){
this.currentTime = setInterval(()=>{
this.year= moment().format('YYYY');
this.mouth= moment().format('MM');
this.day= moment().format('DD');
this.time= moment().format('hh:mm:ss');
this.week= moment().format('dddd');
}, 1000)
this.getWeather() // 获取天气
},
mounted(){
this.$refs['vs'].scrollTo({ x: '50%' },500);
},
methods:{
...mapActions(['changeStatus']),
getWeather(){
let that = this;
MapLoader().then(AMap => {
//加载天气查询插件
AMap.plugin('AMap.Weather', () => {
//创建天气查询实例
var weather = new AMap.Weather();
//执行实时天气信息查询
weather.getForecast(this.city, (err, data) => {
console.log(data);
that.weatherInfo = data.forecasts;
});
});
}, e => {
console.log('地图加载失败' ,e)
})
},
},
filters:{
daysFilter(day){
switch(day){
case 0: return '今天'; break;
case 1: return '明天'; break;
case 2: return '后天'; break;
case 3: return '大后天'; break;
}
},
weatherFilter(wether){
switch(wether){
case '晴': return require(`@/assets/images/weather-qing.png`); break;
case '多云': return require(`@/assets/images/weather-duoyun.png`); break;
case '阴': return require(`@/assets/images/weather-yin.png`); break;
case '雨': return require(`@/assets/images/weather-yu.png`); break;
case '小雨': return require(`@/assets/images/weather-xiaoyu.png`); break;
default: return require(`@/assets/images/weather-yin.png`);
}
}
},
destroyed(){
clearInterval(this.currentTime);
this.currentTime = null;
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fixTopBox {
width: 100%;
height: .45rem;
overflow: auto;
position: fixed;
top: 0;
left: 0;
font-size: .07rem;
}
.topContaion{
width: 100%;
min-width: 17rem;
height: .45rem;
padding-bottom: .12rem;
overflow: hidden;
background: url("../assets/images/top-line.png") no-repeat;
background-size: contain;
background-position: bottom center;
}
.topBox{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.topTime{
color: #fff;
font-size: .1rem;
margin-left: .05rem;
width: 2rem;
letter-spacing: .005rem;
}
.topTime a{
font-size: .1rem;
font-weight: bolder;
background: linear-gradient(to right, #0072ff, #00eaff, #01aaff);
-webkit-background-clip: text;
color: transparent;
}
.topTitle{
height: 100%;
padding: 0 .6rem;
display: flex;
align-items: center;
text-align: center;
position: relative;
}
.topTitle img{
width: .5rem;
height: .2rem;
position: absolute;
bottom: -.03rem;
}
.topTitle img:first-child{
left: 0;
transform: rotatey(-180deg);
}
.topTitle img:last-child{
right:0;
}
.topTitle h1{
font-size: .13rem;
letter-spacing: .02rem;
background: linear-gradient(to right, #0072ff, #00eaff, #01aaff);
-webkit-background-clip: text;
color: transparent;
}
.topMenu{
flex: 1;
margin: 0 2%;
}
.topMenu:last-child{
flex: 2;
}
.topMenu ul, .topWeather ul{
display: flex;
justify-content: space-between;
}
.topMenu ul li{
cursor: pointer;
padding: .06rem .12rem;
color: #fff;
background: url("../assets/images/menu-bg.png") no-repeat;
background-size: 100% 100%;
margin-right: .05rem;
}
.topMenu ul li a, .topWeather ul li a{
font-size: .08rem;
font-weight: bolder;
background: linear-gradient(to right, #0072ff, #00eaff, #01aaff);
-webkit-background-clip: text;
color: transparent;
}
.topWeather{
width: 2rem;
}
.topWeather ul li, .topWeather ul li>div{
display: flex;
align-items: center;
font-size: .06rem;
color:#FFF;
margin-right: .05rem;
}
.topWeather ul li img{
width: .11rem;
margin-right: .03rem;
}
.topWeather ul li a{
font-size: .06rem;
}
</style>
<!--
<style scoped>
.fixTopBox {
width: 100%;
height: 15vh;
overflow: auto;
position: fixed;
top: 0;
left: 0;
font-size: .07rem;
}
.topContaion{
width: 100%;
min-width: 550vh;
height: 15vh;
overflow: hidden;
padding-bottom: 1vh;
overflow: auto;
background: url("../assets/images/top-line.png") no-repeat;
background-size: contain;
background-position: bottom center;
}
.topBox{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
margin-top: 1.5vh;
}
.topTime{
color: #fff;
font-size: .1rem;
margin-left: .05rem;
width: 2rem;
letter-spacing: .005rem;
}
.topTime a{
font-size: .1rem;
font-weight: bolder;
background: linear-gradient(to right, #0072ff, #00eaff, #01aaff);
-webkit-background-clip: text;
color: transparent;
}
.topTitle{
height: 100%;
padding: 0 .6rem;
display: flex;
align-items: center;
text-align: center;
position: relative;
}
.topTitle img{
width: .5rem;
height: .2rem;
position: absolute;
bottom: -.03rem;
}
.topTitle img:first-child{
left: 0;
transform: rotatey(-180deg);
}
.topTitle img:last-child{
right:0;
}
.topTitle h1{
font-size: .13rem;
letter-spacing: .02rem;
background: linear-gradient(to right, #0072ff, #00eaff, #01aaff);
-webkit-background-clip: text;
color: transparent;
}
.topMenu{
flex: 1;
margin: 0 2%;
}
.topMenu ul, .topWeather ul{
display: flex;
justify-content: space-between;
}
.topMenu ul li{
cursor: pointer;
padding: 2vh 4vh;
color: #fff;
background: url("../assets/images/menu-bg.png") no-repeat;
background-size: 100% 100%;
margin-right: .05rem;
}
.topMenu ul li a, .topWeather ul li a{
font-size: 2.6vh;
font-weight: bolder;
background: linear-gradient(to right, #0072ff, #00eaff, #01aaff);
-webkit-background-clip: text;
color: transparent;
}
.topWeather{
width: 2rem;
}
.topWeather ul li, .topWeather ul li>div{
display: flex;
align-items: center;
font-size: .06rem;
color:#FFF;
margin-right: .05rem;
}
.topWeather ul li img{
width: .11rem;
margin-right: .03rem;
}
.topWeather ul li a{
font-size: .06rem;
}
</style>
-->
