296 lines
9.6 KiB
Vue
296 lines
9.6 KiB
Vue
<template>
|
|
<div id="app">
|
|
<div class="top">
|
|
<div class="left" text="盐都电力可视化系统">
|
|
盐都电力可视化系统
|
|
</div>
|
|
<div class="middle">
|
|
<div class="router" :class="{'active':routerActive==index}" v-for="(item,index) in routerTitle" @click="handleChange(index)" :key="index" :text="item">{{item}}</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="time">
|
|
<span>{{this.$moment().format("MM月DD日")}} {{week}}</span>
|
|
<span style="font-size:24px;margin-top: 3px;">{{this.$moment().format("YYYY-MM-DD")}}</span>
|
|
</div>
|
|
<div class="weather" v-for="(item,index) in weatherArr" :key="index">
|
|
<div class="pic">
|
|
<img :src="item.pic" alt="" style="height:100%;width:100%">
|
|
</div>
|
|
<div class="date">
|
|
<span>{{item.date}}</span>
|
|
<span style="font-size:24px;margin-top: 3px;">{{item.temperature}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<router-view />
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import MinxinItem from "./mixins"
|
|
import axios from 'axios'
|
|
import {getWather,Weather,getToken} from "./api/index.js";
|
|
export default {
|
|
name: 'home',
|
|
mixins:[MinxinItem],
|
|
data(){
|
|
return{
|
|
addDay:'',
|
|
subDay:'',
|
|
routerTitle:['10KV','20kv','安全管控','站房智辅'],
|
|
routerActive:0,
|
|
weatherArr:[
|
|
{day:'今天',temperature:'',pic:require('./assets/images/sun.png')},
|
|
{day:'昨天',temperature:'',pic:require('./assets/images/union.png')},
|
|
{day:'明天',temperature:'',pic:require('./assets/images/windy.png')}
|
|
],
|
|
weekList:['周日','周一','周二','周三','周四','周五','周六'],
|
|
week:'',
|
|
}
|
|
},
|
|
mounted(){
|
|
this.handleWather()
|
|
let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
|
|
this.week = this.weekList[week]
|
|
// let params = new URLSearchParams()
|
|
let params = {
|
|
appKey:'symnzwxdfu1ul8raqrykgbld7zonktga',
|
|
appSecret:'a3tdb6nxfciekxcgcl94ljvtmw2lsafx'
|
|
}
|
|
// params.append('appKey','symnzwxdfu1ul8raqrykgbld7zonktga')
|
|
// params.append('appSecret','a3tdb6nxfciekxcgcl94ljvtmw2lsafx')
|
|
getToken(params).then((res)=>{
|
|
localStorage.setItem('token',res.data.data.token)
|
|
// console.log(localStorage.getItem('token'),'token');
|
|
})
|
|
},
|
|
|
|
methods:{
|
|
getDateSub(n){
|
|
let day = this.$moment(new Date()).subtract(n, 'days').format('YYYY-MM-DD');
|
|
this.subDay = day
|
|
return day;
|
|
},
|
|
getDateAdd(n){
|
|
var dd = new Date();
|
|
dd.setDate(dd.getDate() + n); //获取n天后的日期
|
|
var y = dd.getFullYear();
|
|
var m = dd.getMonth() + 1; //获取当前月份的日期
|
|
var d = dd.getDate();
|
|
let day = y + '-' + m + '-' + d;
|
|
this.addDay = day
|
|
return day;
|
|
},
|
|
//天气
|
|
handleWather(){
|
|
// axios({url:"http://www.jcznedu.com:5000/weather/prediction/?city=盐都&&limit=3",methods:'GET'}).then(res=>{
|
|
// })
|
|
Weather({
|
|
action:'one',
|
|
key:'天气情况'
|
|
}).then((res)=>{
|
|
let toDay = this.$moment().format("D")
|
|
this.getDateSub(1);
|
|
this.getDateAdd(1),
|
|
res.data.data.forEach((item,index) => {
|
|
if (item.第N天 == this.$moment(this.subDay).format("D")) {
|
|
this.weatherArr[1].date = '昨天'
|
|
this.weatherArr[1].temperature = item.最低温度 +'℃' + '~' + item.最高温度 +'℃'
|
|
this.Onweather(item.天气,1)
|
|
}else if (item.第N天 == this.$moment(this.addDay).format("D")) {
|
|
this.weatherArr[2].date = '明天'
|
|
this.weatherArr[2].temperature = item.最低温度 +'℃' + '~' + item.最高温度 +'℃'
|
|
this.Onweather(item.天气,2)
|
|
}else if (item.第N天 == toDay) {
|
|
this.weatherArr[0].date = '今天'
|
|
this.weatherArr[0].temperature = item.最低温度 +'℃' + '~' + item.最高温度 +'℃'
|
|
this.Onweather(item.天气,0)
|
|
}
|
|
});
|
|
})
|
|
},
|
|
//天气
|
|
Onweather(name,index){
|
|
switch (name) {
|
|
case "多云":
|
|
return this.weatherArr[index].pic = require('./assets/weather/Cloudy .png');
|
|
case "阴":
|
|
return this.weatherArr[index].pic = require('./assets/weather/Cloudy .png')
|
|
case "暴雨":
|
|
return this.weatherArr[index].pic = require('./assets/weather/rainstorm.png')
|
|
case "冰雹":
|
|
return this.weatherArr[index].pic = require('./assets/weather/hail.png')
|
|
case "大风":
|
|
return this.weatherArr[index].pic = require('./assets/weather/gale.png')
|
|
case "大雪":
|
|
return this.weatherArr[index].pic = require('./assets/weather/bigsnow.png')
|
|
case "大雨":
|
|
return this.weatherArr[index].pic = require('./assets/weather/bigrain.png')
|
|
case "雷电":
|
|
return this.weatherArr[index].pic = require('./assets/weather/thunder.png')
|
|
case "雷阵雨":
|
|
return this.weatherArr[index].pic = require('./assets/weather/shower.png')
|
|
case "沙尘暴":
|
|
return this.weatherArr[index].pic = require('./assets/weather/sand.png')
|
|
case "晴":
|
|
return this.weatherArr[index].pic = require('./assets/weather/sun.png')
|
|
case "雾霾":
|
|
return this.weatherArr[index].pic = require('./assets/weather/smog.png')
|
|
case "小雪":
|
|
return this.weatherArr[index].pic = require('./assets/weather/snow.png')
|
|
case "小雨":
|
|
return this.weatherArr[index].pic = require('./assets/weather/rain.png')
|
|
case "雪":
|
|
return this.weatherArr[index].pic = require('./assets/weather/rainlitter.png')
|
|
case "多云":
|
|
return this.weatherArr[index].pic = require('./assets/weather/night.png')
|
|
case "雨夹雪":
|
|
return this.weatherArr[index].pic = require('./assets/weather/rainsnow.png')
|
|
case "月亮":
|
|
return this.weatherArr[index].pic = require('./assets/weather/moon.png')
|
|
case "中雪":
|
|
return this.weatherArr[index].pic = require('./assets/weather/mieddlesnow.png')
|
|
case "中雨":
|
|
return this.weatherArr[index].pic = require('./assets/weather/middlerain.png')
|
|
}
|
|
},
|
|
handleChange(index){
|
|
let that = this;
|
|
this.routerActive = index
|
|
if (this.routerActive == 0) {
|
|
if (this.$route.name != 'index') {
|
|
that.$router.push({name:'index'})
|
|
}
|
|
}else if (this.routerActive == 3) {
|
|
that.$router.push({name:'stationBuilding'})
|
|
}else if (this.routerActive == 1) {
|
|
that.$router.push({name:'twentyKV'})
|
|
}else if (this.routerActive == 2) {
|
|
that.$router.push({name:'thirtyFiveKV'})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
@import "./assets/index.css";
|
|
#app {
|
|
font-family: "Avenir", Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
background: url('./assets/images/homePg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.top {
|
|
width: 100%;
|
|
height: 100px;
|
|
/* background: rgba(147, 230, 244,0.6); */
|
|
/* background-image: linear-gradient(90deg, rgba(147, 230, 244,0.6),rgba(147, 230, 244,0), rgba(147, 230, 244,0.6)); */
|
|
background: url('./assets/images/topBg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
.left{
|
|
width: 815px;
|
|
height: 97px;
|
|
background: url('./assets/images/titleBg1.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
font-size: 44px;
|
|
font-weight: 700;
|
|
letter-spacing: 22px;
|
|
color: #ffffff;
|
|
line-height: 97px;
|
|
padding-left: 86px;
|
|
text-align: left;
|
|
box-sizing: border-box;
|
|
}
|
|
.left:before{
|
|
content: attr(text);
|
|
position: absolute;
|
|
z-index: 10;
|
|
color:rgb(86, 254, 246);
|
|
-webkit-mask:linear-gradient(to top, rgb(86,244,254), transparent );
|
|
}
|
|
.middle{
|
|
width: auto;
|
|
height: 78px;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
.router{
|
|
width: 244px;
|
|
height: 100%;
|
|
line-height: 78px;
|
|
color: rgb(41,114,124);
|
|
font-size: 22px;
|
|
cursor: pointer;
|
|
}
|
|
.active{
|
|
color: #ffffff;
|
|
background: url('./assets/images/routerActive.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.active:before{
|
|
content: attr(text);
|
|
position: absolute;
|
|
z-index: 10;
|
|
color:rgb(86, 254, 246);
|
|
-webkit-mask:linear-gradient(to top, rgb(86,244,254), transparent );
|
|
}
|
|
}
|
|
.right{
|
|
// width: 740px;
|
|
height: 78px;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
padding-right: 15px;
|
|
.time{
|
|
height: 100%;
|
|
color: #ffffff;
|
|
font-size: 18px;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
text-align: left;
|
|
}
|
|
.weather{
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
height: 100%;
|
|
align-items: center;
|
|
margin-left: 36px;
|
|
.pic{
|
|
width: 61px;
|
|
height: 61px;
|
|
}
|
|
.date{
|
|
height: 100%;
|
|
color: #ffffff;
|
|
font-size: 18px;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
margin-left: 19px;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
width: 100%;
|
|
height: calc(100% - 100px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
</style>
|