From e8e4c460232ea714a0309c79826e2c54d0ddd30f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9C002001lixiaobang=E2=80=9D?= <2547956374@qq.com> Date: Sat, 7 Jan 2023 15:36:08 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 96 ++++++++++++++++++++++++++++++------------ src/views/greenPop.vue | 79 ++++++++++++++++++++++++++++++++++ src/views/index.vue | 9 +++- 3 files changed, 155 insertions(+), 29 deletions(-) create mode 100644 src/views/greenPop.vue diff --git a/src/App.vue b/src/App.vue index d525cc2..969d4ab 100644 --- a/src/App.vue +++ b/src/App.vue @@ -33,7 +33,7 @@ overflow-y:scroll z-index: 9999; top: 98px; - border: 20px solid rgb(5,53,45); + border: 10px solid rgb(5,53,45); " >
- x +
@@ -70,7 +67,7 @@ import {getData} from './api/index.js' handleAction:'', handleAction1:'', fileType:false, //pdf显示 - numPages: 1, //pdf页数 + numPages: null, //pdf页数 filePdf:'', //pdf文件 weather:require('./assets/weather/Cloudy .png'), weekList:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], @@ -83,14 +80,6 @@ import {getData} from './api/index.js' } }, 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(()=>{ @@ -159,33 +148,56 @@ import {getData} from './api/index.js' this.weather = require('./assets/weather/Cloudy .png'); } } - }) + }); }, methods:{ //关闭PDF文件 handleClosePdf(){ this.fileType = false this.filePdf = '' + this.numPages = null 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 = '电力行业发展' + if (this.filePdf != '') { + return false + }else{ + this.filePdf = '' + let fileUrl = "/pdf/power.pdf"; + this.filePdf = pdf.createLoadingTask(fileUrl) + //pdf文件加载 + this.filePdf.promise.then(pdf => { + this.numPages = pdf.numPages + }).catch(err =>{ + // this.$message.error(err.message); + console.log('pdf加载失败',err); + }) + 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 = '能源发展综述' + if (this.filePdf != '') { + return false + }else{ + this.filePdf = '' + let fileUrl = "/pdf/energy.pdf"; + this.filePdf = pdf.createLoadingTask(fileUrl) + //pdf文件加载 + this.filePdf.promise.then(pdf => { + this.numPages = pdf.numPages + }).catch(err =>{ + // this.$message.error(err.message); + console.log('pdf加载失败',err); + }) + this.fileType = true + this.handleAction1 = '能源发展综述' + } + } }, components: { @@ -350,8 +362,38 @@ import {getData} from './api/index.js' justify-content: space-around; } .pdfShow{ + -webkit-animation: fadeInDown 0.3s; + animation: fadeInDown 0.3s; &::-webkit-scrollbar{ width: 0; } } +/** +下拉显示动画效果 +*/ +@keyframes fadeInDown { + 0% { + -webkit-transform: translate3d(0, -20%, 0); + transform: translate3d(0, -20%, 0); + opacity: 0; + } + + 100% { + -webkit-transform: none; + transform: none; + opacity: 1; + } +} + +@-webkit-keyframes fadeInDown { + 0% { + -webkit-transform: translate3d(0, -20%, 0); + opacity: 0; + } + + 100% { + -webkit-transform: none; + opacity: 1; + } +} > diff --git a/src/views/greenPop.vue b/src/views/greenPop.vue new file mode 100644 index 0000000..4d8f17e --- /dev/null +++ b/src/views/greenPop.vue @@ -0,0 +1,79 @@ + + + + + \ No newline at end of file diff --git a/src/views/index.vue b/src/views/index.vue index 2463c9c..c63aa72 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -117,7 +117,7 @@
-
+
@@ -303,6 +303,7 @@ import geoJson from '../json/320900.json'; import axios from 'axios' import pop from './pop.vue' +import greenPop from './greenPop.vue' import {getData} from '../api/index.js' export default { data(){ @@ -4326,11 +4327,15 @@ export default { this.componentShow = 'pop'; this.popName = '非统调光伏电站装机容量分布'; this.popTableShow = val + }else if (val == 5) { + this.modelOthers = true + this.componentShow = 'greenPop'; } } }, components:{ - pop + pop, //弹窗 + greenPop //绿色双碳弹窗 } }