532 lines
17 KiB
Vue
532 lines
17 KiB
Vue
<template>
|
|
<div id="app">
|
|
<div class="top">
|
|
<div class="left">
|
|
<div class="time">
|
|
{{this.$moment().format("YYYY.MM.DD")}} {{nowDate}} | {{week}}
|
|
</div>
|
|
|
|
</div>
|
|
<div class="middle">
|
|
<div class="box">
|
|
|
|
<img :src="middleImg" alt="" ref="switchBtn" />
|
|
</div>
|
|
<!-- <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="weather">
|
|
<div v-if="backShow" @click="backBtn">
|
|
<img src="./assets/indexN/back.png" alt="" style="height: 100%; width: 100%" />
|
|
</div>
|
|
<div class="pic">
|
|
<img src="./assets/images/union.png" alt="" style="height: 100%; width: 100%" />
|
|
</div>
|
|
<span>阴转多云</span>|
|
|
<span style="font-size: 24px; color:#0B4A6B">25℃~30℃</span>|
|
|
<span style="font-size: 24px; margin-top: 3px">东风3~4级</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.wendu
|
|
}}</span>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<router-view></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: "",
|
|
backShow: false,
|
|
routerTitle: ["实时监测", "安全管控", "站房智辅"],
|
|
routerActive: 0,
|
|
middleImg:require("./assets/indexN/titleText.png"),
|
|
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: "",
|
|
nowDate:'',
|
|
};
|
|
},
|
|
mounted() {
|
|
// this.handleWather();
|
|
let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay();
|
|
this.week = this.weekList[week];
|
|
this.getLoc()
|
|
// 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');
|
|
// });
|
|
// setInterval(()=>{
|
|
// this. handleWather()
|
|
// },480000)
|
|
setInterval(()=>{
|
|
this.nowDate = this.$moment().format("HH:mm:ss")
|
|
},100)
|
|
window.getLoc = this.getLoc;
|
|
},
|
|
|
|
methods: {
|
|
getLoc(){
|
|
var curWwwPath=window.document.location.href;
|
|
console.log("curWwwPath",curWwwPath)
|
|
let paramArr = curWwwPath.split('/');
|
|
let ele = paramArr.pop();
|
|
console.log("ele",ele)
|
|
if(ele=='index'){
|
|
this.backShow = false
|
|
this.middleImg = require("./assets/indexN/titleText.png")
|
|
this.$refs.switchBtn.style.height = "79%";
|
|
this.$refs.switchBtn.style.width = "85%";
|
|
}else if(ele =='stationBuilding'){
|
|
this.middleImg = require("./assets/title/02.png"),
|
|
this.backShow = true
|
|
this.$refs.switchBtn.style.height = "72%";
|
|
this.$refs.switchBtn.style.width = "36%";
|
|
}else if(ele =='twentyKV'){
|
|
this.middleImg = require("./assets/title/03.png"),
|
|
this.backShow = true
|
|
this.$refs.switchBtn.style.height = "79%";
|
|
this.$refs.switchBtn.style.width = "85%";
|
|
}else if(ele =='thirtyFiveKV'){
|
|
this.middleImg = require("./assets/title/04.png"),
|
|
this.backShow = true
|
|
this.$refs.switchBtn.style.height = "79%";
|
|
this.$refs.switchBtn.style.width = "85%";
|
|
}else if(ele =='powerQualityControl'){
|
|
this.middleImg = require("./assets/title/05.png"),
|
|
this.backShow = true
|
|
this.$refs.switchBtn.style.height = "79%";
|
|
this.$refs.switchBtn.style.width = "85%";
|
|
}else if(ele =='ruralRevitalizationPower'){
|
|
this.middleImg = require("./assets/title/07.png"),
|
|
this.backShow = true
|
|
this.$refs.switchBtn.style.height = "79%";
|
|
this.$refs.switchBtn.style.width = "85%";
|
|
}else if(ele =='enterprisePollutionMonitoring'){
|
|
this.middleImg = require("./assets/title/08.png"),
|
|
this.backShow = true
|
|
this.$refs.switchBtn.style.height = "79%";
|
|
this.$refs.switchBtn.style.width = "85%";
|
|
}else if(ele =='ruralDomesticSewageTreatment'){
|
|
this.middleImg = require("./assets/title/07.png"),
|
|
this.backShow = true
|
|
this.$refs.switchBtn.style.height = "79%";
|
|
this.$refs.switchBtn.style.width = "85%";
|
|
}else if(ele =='digitalFloodDrainageDroughtRelief'){
|
|
this.middleImg = require("./assets/title/09.png"),
|
|
this.backShow = true
|
|
this.$refs.switchBtn.style.height = "79%";
|
|
this.$refs.switchBtn.style.width = "85%";
|
|
}
|
|
|
|
},
|
|
backBtn(){
|
|
this.$router.push("/index");
|
|
},
|
|
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; //获取当前月份的日期
|
|
if (m < 10) {
|
|
m = "0" + m;
|
|
}
|
|
var d = dd.getDate();
|
|
if (d < 10) {
|
|
d = "0" + d;
|
|
}
|
|
let day = m + "-" + d;
|
|
// this.addDay = day;
|
|
return day;
|
|
},
|
|
getNewDate() {
|
|
var date = new Date();
|
|
var month = date.getMonth() + 1; //获取当前月份的日期
|
|
if (month < 10) {
|
|
month = "0" + month;
|
|
}
|
|
var a = date.getDate();
|
|
if (a < 10) {
|
|
a = "0" + a;
|
|
}
|
|
let day = month + "-" + a;
|
|
return day;
|
|
},
|
|
//天气
|
|
handleWather() {
|
|
// axios({url:"http://www.jcznedu.com:5000/weather/prediction/?city=盐都&&limit=3",methods:'GET'}).then(res=>{
|
|
// })
|
|
|
|
getWather().then((res) => {
|
|
// console.log(res, "天气情况");
|
|
for (let i = 0; i < res.data.data.length; i++) {
|
|
let item = res.data.data[i];
|
|
// console.log(item.date);
|
|
if (item.date == this.getNewDate()) {
|
|
item.date = "今天";
|
|
item.wendu = item.low + "℃~" + item.high + "℃";
|
|
item.pic = this.Onweather(item.weather, i);
|
|
} else if (item.date == this.getDateAdd(1)) {
|
|
item.date = "明天";
|
|
item.wendu = item.low + "℃~" + item.high + "℃";
|
|
item.pic = this.Onweather(item.weather, i);
|
|
} else if (item.date == this.getDateAdd(2)) {
|
|
item.date = "后天";
|
|
item.wendu = item.low + "℃~" + item.high + "℃";
|
|
item.pic = this.Onweather(item.weather, i);
|
|
}
|
|
}
|
|
// console.log(res.data.data);
|
|
// 天气
|
|
this.weatherArr = res.data.data;
|
|
// console.log(this.weatherArr);
|
|
// console.log(this.getNewDate(),'获取');
|
|
});
|
|
// Weather({
|
|
// action: "one",
|
|
// key: "天气情况",
|
|
// }).then((res) => {
|
|
// // console.log(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) {
|
|
// console.log(name, "名字");
|
|
if(name.includes('阴')||name.includes('多云')){
|
|
if(name.includes('雨')){
|
|
return require("./assets/weather/rain.png");
|
|
}else{
|
|
return require("./assets/weather/Cloudy .png");
|
|
}
|
|
}
|
|
if(name.includes('小雨')){
|
|
|
|
return require("./assets/weather/rain.png");
|
|
|
|
}
|
|
// console.log(index);
|
|
switch (name) {
|
|
|
|
case '风转阴':
|
|
return require("./assets/weather/Cloudy .png");
|
|
case "多云":
|
|
return require("./assets/weather/Cloudy .png");
|
|
case "阴":
|
|
return require("./assets/weather/Cloudy .png");
|
|
case "阴转多云":
|
|
return require("./assets/weather/Cloudy .png");
|
|
case "暴雨":
|
|
return require("./assets/weather/rainstorm.png");
|
|
case "冰雹":
|
|
return require("./assets/weather/hail.png");
|
|
case "大风":
|
|
return require("./assets/weather/gale.png");
|
|
case "大雪":
|
|
return require("./assets/weather/bigsnow.png");
|
|
case "大雨":
|
|
return require("./assets/weather/bigrain.png");
|
|
case "雷电":
|
|
return require("./assets/weather/thunder.png");
|
|
case "雷阵雨":
|
|
return require("./assets/weather/shower.png");
|
|
case "沙尘暴":
|
|
return require("./assets/weather/sand.png");
|
|
case "晴":
|
|
return require("./assets/weather/sun.png");
|
|
case "雾霾":
|
|
return require("./assets/weather/smog.png");
|
|
case "小雪":
|
|
return require("./assets/weather/snow.png");
|
|
case "小雨":
|
|
return require("./assets/weather/rain.png");
|
|
case "雪":
|
|
return require("./assets/weather/rainlitter.png");
|
|
case "多云":
|
|
return require("./assets/weather/night.png");
|
|
case "雨夹雪":
|
|
return require("./assets/weather/rainsnow.png");
|
|
case "月亮":
|
|
return require("./assets/weather/moon.png");
|
|
case "中雪":
|
|
return require("./assets/weather/mieddlesnow.png");
|
|
case "中雨":
|
|
return require("./assets/weather/middlerain.png");
|
|
case "阴转雨":
|
|
return require("./assets/weather/rain.png");
|
|
case "阴转晴":
|
|
return require("./assets/weather/Cloudy .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 == 2) {
|
|
that.$router.push({ name: "stationBuilding" });
|
|
}
|
|
// else if (this.routerActive == 1) {
|
|
// that.$router.push({ name: "twentyKV" });
|
|
// }
|
|
else if (this.routerActive == 1) {
|
|
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/index/bg.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: url("./assets/indexN/title.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
.left {
|
|
width: 30%;
|
|
height: 97px;
|
|
// background: url("./assets/index/title.png") no-repeat;
|
|
// background-size: 100% 100%;
|
|
font-size: 44px;
|
|
font-weight: 700;
|
|
letter-spacing: 10px;
|
|
color: #ffffff;
|
|
// line-height: 97px;
|
|
padding-left: 86px;
|
|
text-align: left;
|
|
display: flex;
|
|
margin-left: 1%;
|
|
margin-top: 0.5%;
|
|
box-sizing: border-box;
|
|
.time {
|
|
height: 100%;
|
|
color: #ffffff;
|
|
font-size: 22px;
|
|
// display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
text-align: left;
|
|
}
|
|
.weather {
|
|
// display: flex;
|
|
// flex-flow: row nowrap;
|
|
height: 100%;
|
|
align-items: center;
|
|
color: #ffffff;
|
|
font-size: 22px;
|
|
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;
|
|
}
|
|
}
|
|
|
|
}
|
|
.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: 27%;
|
|
height: 80px;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
/* display: flex; */
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
position: absolute;
|
|
left: 38%;
|
|
top: 3%;
|
|
.box{
|
|
width: 100%;
|
|
height: 100%;
|
|
// background: url("./assets/indexN/titleText.png") no-repeat;
|
|
}
|
|
.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;
|
|
font-size: 44px;
|
|
font-weight: 700;
|
|
letter-spacing: 10px;
|
|
margin-right: 1%;
|
|
.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;
|
|
color: #ffffff;
|
|
font-size: 22px;
|
|
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>
|