358 lines
11 KiB
Vue
358 lines
11 KiB
Vue
<template>
|
|
<div id="app">
|
|
<div class="top">
|
|
<div class="left">
|
|
<div style="font-size:28px;color:#ffffff">{{time}} | {{week}}</div>
|
|
</div>
|
|
<div class="middle">
|
|
<div class="leftBtn" @click="powerPdf" :class="{'handleAction':handleAction=='电力行业发展'}"><div class="leftBtnText">2022年度中国能源大数据报告——电力行业发展篇</div></div>
|
|
<div class="middleText"><img src="./assets/images/homeText.png"/></div>
|
|
<div class="rightBtn" @click="energyPdf" :class="{'handleAction1':handleAction1=='能源发展综述'}"><div class="rightBtnText">2022年度中国能源大数据报告——能源发展综述篇</div></div>
|
|
</div>
|
|
<div class="right"><img :src="weather" style="width:10%;height:50%"/>{{weatherText}} | <span style="color:rgb(23,231,232)">{{lowTemperature}}-{{highTemperature}}℃</span> | {{wind}}
|
|
<span style="color:rgb(23,231,232);height: 50%;align-items: center;display: flex;">{{windLevel}}</span>级
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<router-view />
|
|
|
|
</div>
|
|
<div
|
|
class="pdfShow"
|
|
v-show="fileType"
|
|
style="
|
|
width: 20%;
|
|
height: 85%;
|
|
position: absolute;
|
|
background: rgb(5,53,45);
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
overflow-y:scroll
|
|
z-index: 9999;
|
|
top: 98px;
|
|
border: 20px solid rgb(5,53,45);
|
|
"
|
|
>
|
|
<div
|
|
style="
|
|
position: fixed;
|
|
width: 20%;
|
|
height: 3%;
|
|
font-size: 18px;
|
|
padding: 5px 10px 0 0;
|
|
color: #fff;
|
|
text-align: right;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
background: rgb(5,53,45,0.7);
|
|
z-index: 9999;
|
|
"
|
|
@click="handleClosePdf"
|
|
>
|
|
x
|
|
</div>
|
|
<pdf v-for="i in numPages" :key="i" :page="i" :src="filePdf" style="top:3.2%;z-index:999"></pdf>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import pdf from 'vue-pdf'
|
|
import axios from "axios"
|
|
import {getData} from './api/index.js'
|
|
export default {
|
|
data(){
|
|
return{
|
|
time:'',
|
|
handleAction:'',
|
|
handleAction1:'',
|
|
fileType:false, //pdf显示
|
|
numPages: 1, //pdf页数
|
|
filePdf:'', //pdf文件
|
|
weather:require('./assets/weather/Cloudy .png'),
|
|
weekList:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
|
|
week:'',
|
|
highTemperature:'',
|
|
lowTemperature:'',
|
|
wind:'',
|
|
weatherText:'',
|
|
windLevel:'',
|
|
}
|
|
},
|
|
mounted() {
|
|
//pdf文件加载
|
|
// this.$nextTick(()=>{
|
|
// this.filePdf.promise.then((pdf) => {
|
|
// this.numPages = pdf.numPages
|
|
// }).catch(err =>{
|
|
// console.log(err);
|
|
// })
|
|
// })
|
|
let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
|
|
this.week = this.weekList[week]
|
|
window.setInterval(()=>{
|
|
this.time = this.$moment().format("YYYY-MM-DD hh:mm:ss")
|
|
},1000)
|
|
getData({
|
|
action:'one',
|
|
key:'天气情况'
|
|
}).then((res)=>{
|
|
let toDay = this.$moment().format("D")
|
|
for (let i = 0; i < res.data.data.length; i++) {
|
|
if (toDay == res.data.data[i].第N天) {
|
|
this.highTemperature = res.data.data[i].最高温度;
|
|
this.lowTemperature = res.data.data[i].最低温度;
|
|
this.wind = res.data.data[i].风向;
|
|
this.weatherText = res.data.data[i].天气;
|
|
this.windLevel = res.data.data[i].风力等级;
|
|
switch (this.weatherText) {
|
|
case "多云":
|
|
return this.weather = require('./assets/weather/Cloudy .png');
|
|
case "阴":
|
|
return this.weather = require('./assets/weather/Cloudy .png')
|
|
case "暴雨":
|
|
return this.weather = require('./assets/weather/rainstorm.png')
|
|
case "冰雹":
|
|
return this.weather = require('./assets/weather/hail.png')
|
|
case "大风":
|
|
return this.weather = require('./assets/weather/gale.png')
|
|
case "大雪":
|
|
return this.weather = require('./assets/weather/bigsnow.png')
|
|
case "大雨":
|
|
return this.weather = require('./assets/weather/bigrain.png')
|
|
case "雷电":
|
|
return this.weather = require('./assets/weather/thunder.png')
|
|
case "雷阵雨":
|
|
return this.weather = require('./assets/weather/shower.png')
|
|
case "沙尘暴":
|
|
return this.weather = require('./assets/weather/sand.png')
|
|
case "晴":
|
|
return this.weather = require('./assets/weather/sun.png')
|
|
case "雾霾":
|
|
return this.weather = require('./assets/weather/smog.png')
|
|
case "小雪":
|
|
return this.weather = require('./assets/weather/snow.png')
|
|
case "小雨":
|
|
return this.weather = require('./assets/weather/rain.png')
|
|
case "雪":
|
|
return this.weather = require('./assets/weather/rainlitter.png')
|
|
case "多云":
|
|
return this.weather = require('./assets/weather/night.png')
|
|
case "雨夹雪":
|
|
return this.weather = require('./assets/weather/rainsnow.png')
|
|
case "月亮":
|
|
return this.weather = require('./assets/weather/moon.png')
|
|
case "中雪":
|
|
return this.weather = require('./assets/weather/mieddlesnow.png')
|
|
case "中雨":
|
|
return this.weather = require('./assets/weather/middlerain.png')
|
|
}
|
|
}else{
|
|
this.highTemperature = '0';
|
|
this.lowTemperature = '0';
|
|
this.wind = '东风';
|
|
this.windLevel = '0'
|
|
this.weatherText = '阴';
|
|
this.weather = require('./assets/weather/Cloudy .png');
|
|
}
|
|
}
|
|
})
|
|
},
|
|
methods:{
|
|
//关闭PDF文件
|
|
handleClosePdf(){
|
|
this.fileType = false
|
|
this.filePdf = ''
|
|
this.$nextTick(()=>{
|
|
this.handleAction = ''
|
|
this.handleAction1 = ''
|
|
})
|
|
},
|
|
powerPdf(){
|
|
this.filePdf = ''
|
|
let fileUrl = "/pdf/power.pdf";
|
|
this.numPages = 20
|
|
this.filePdf = pdf.createLoadingTask(fileUrl)
|
|
this.fileType = true
|
|
this.handleAction = '电力行业发展'
|
|
},
|
|
energyPdf(){
|
|
this.filePdf = ''
|
|
let fileUrl = "/pdf/energy.pdf";
|
|
this.filePdf = pdf.createLoadingTask(fileUrl)
|
|
this.numPages = 27
|
|
this.fileType = true
|
|
this.handleAction1 = '能源发展综述'
|
|
}
|
|
},
|
|
components: {
|
|
pdf
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
/*将大屏设置为1920*1080,设置缩放的方向*/
|
|
#app {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-align: center;
|
|
// color: #2c3e50;
|
|
// margin-top: 60px;
|
|
width: 5760px;
|
|
height: 1080px;
|
|
transition: all .2s linear;
|
|
transform-origin: left top;
|
|
background: url("./assets/images/home.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.top{
|
|
width: 100%;
|
|
height: 10%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px 40px;
|
|
box-sizing: border-box;
|
|
background: url("./assets/images/homeTop.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.left{
|
|
width: 10%;
|
|
height: 100%;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
align-items: flex-start;
|
|
-webkit-box-pack: start;
|
|
justify-content: space-around;
|
|
font-weight: 800;
|
|
font-family:"Microsoft YaHei";
|
|
}
|
|
.middle{
|
|
width: 50%;
|
|
height: 100%;
|
|
font-size:28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.leftBtn{
|
|
width:25%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
color:#ffffff;
|
|
.leftBtnText{
|
|
height: 61%;
|
|
// width: 56.62%;
|
|
width: 100%;
|
|
background: url("./assets/images/btnLeftPdf.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 25px;
|
|
}
|
|
}
|
|
.handleAction{
|
|
width:25%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
color:rgb(15,251,251);
|
|
.leftBtnText{
|
|
height: 61%;
|
|
// width: 56.62%;
|
|
width: 100%;
|
|
background: url("./assets/images/leftAct.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 25px;
|
|
}
|
|
}
|
|
.middleText{
|
|
width:59%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
color:#ffffff;
|
|
font-size: 60px;
|
|
font-weight: 800;
|
|
// font-style:italic;
|
|
letter-spacing:6px;
|
|
font-family:"微软雅黑";
|
|
}
|
|
// .middleText:before{
|
|
// content: attr(text);
|
|
// position: absolute;
|
|
// z-index: 100;
|
|
// color:rgba(84,255,233,0.4);
|
|
// -webkit-mask:linear-gradient(to top, rgb(58,253,228), transparent );
|
|
// }
|
|
.rightBtn{
|
|
width:25%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
color:#ffffff;
|
|
.rightBtnText{
|
|
height: 61%;
|
|
// width: 56.62%;
|
|
width: 100%;
|
|
background: url("./assets/images/btnRightPdf.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 25px;
|
|
}
|
|
}
|
|
.handleAction1{
|
|
width:25%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
color:rgb(15,251,251);
|
|
.rightBtnText{
|
|
height: 61%;
|
|
// width: 56.62%;
|
|
width: 100%;
|
|
background: url("./assets/images/rightAct.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 25px;
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
width: 9%;
|
|
height: 100%;
|
|
font-size:28px;
|
|
display: flex;
|
|
-webkit-box-pack: end;
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
.content {
|
|
width: 100%;
|
|
height: calc(100% - 11%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
.pdfShow{
|
|
&::-webkit-scrollbar{
|
|
width: 0;
|
|
}
|
|
}
|
|
</style>>
|