<template>
<div class="chart-container">
<div class="filter">
<div class="startTime">
<span class="timeText">起始时间</span>
<el-date-picker
v-model="startTime"
format="yyyy-MM-dd"
:clearable="false"
type="datetime"
value-format="timestamp"
placeholder="选择日期">
</el-date-picker>
</div>
<div class="endTime">
<span class="timeText">截止时间</span>
<el-date-picker
v-model="endTime"
format="yyyy-MM-dd"
:clearable="false"
type="datetime"
value-format="timestamp"
placeholder="选择日期">
</el-date-picker>
</div>
<div class="ago">
<span class="timeText">点位位置</span>
<el-select v-model="ago" placeholder="请选择" >
<el-option
v-for="item in agoAgo"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="timeQuery">
<el-button size="small" :loading="loading" @click="dateQuery">查询</el-button>
</div>
</div>
<div class="content">
<el-tabs type="card" v-model="activeName">
<el-tab-pane label="图表" name="first">
<div class="tableContent" ref="bannerHeight" @load="imgLoad">
<el-carousel :interval="5000" type="card" :height="bannerHeight + 'px'" style="width: 100%">
<el-carousel-item v-for="item in rpImages" :key="item">
<div style="height: 100%;width: 100%;display: flex;justify-content:center;align-items:center ">
<div class="qrCodeText">
<div class="animated rotateInDownLeft">{{item}}</div>
</div>
<div id="qrCode" ref="qrCodeDiv" name="qrCodeDiv"
:style="{width:(bannerHeight-25) + 'px',height:(bannerHeight-150) + 'px'}"></div>
<div class="qrCodeText">
<div class="animated rotateInDownLeft">上报可用功率</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
<div class="tableContent" ref="bannerHeight" @load="imgLoad">
<el-carousel :interval="5000" type="card" :height="bannerHeight + 'px'" style="width: 100%">
<el-carousel-item v-for="item in rpImages1" :key="item">
<div style="height: 100%;width: 100%;display: flex;justify-content:center;align-items:center ">
<div class="qrCodeText">
<div class="animated rotateInDownLeft">{{item}}</div>
</div>
<div id="qrCode1" ref="qrCodeDiv1" name="qrCodeDiv1"
:style="{width:(bannerHeight-25) + 'px',height:(bannerHeight-150) + 'px'}"></div>
<div class="qrCodeText">
<div class="animated rotateInDownLeft">上报短期功率</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import QRCode from 'qrcodejs2';
export default {
name: 'nwp',
data() {
return {
chart: null,
queryStartTime: '',
queryEndTime: '',
startTime: new Date(new Date().toLocaleDateString()).getTime(),
endTime: new Date(new Date().toLocaleDateString()).getTime() + 1000 * 60 * 60 * 24 - 1000,
agoAgo:[
{value:'1',label:'提前一天'},
{value:'2',label:'提前二天'},
{value:'3',label:'提前三天'},
{value:'4',label:'提前四天'},
{value:'5',label:'提前五天'},
{value:'6',label:'提前六天'},
{value:'7',label:'提前七天'},
{value:'8',label:'提前八天'},
{value:'9',label:'提前九天'},
{value:'10',label:'提前十天'},
],
ago:'1',
loading: true,
qrCodeContents: [],
qrCodeContents1: [],
bannerHeight: '',
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
rpImages: 1,
rpImages1: 1,
activeName: 'first',
timeSteps: [{key: '5分钟', value: 5}, {key: '15分钟', value: 15}],
timeStep: 15,
}
},
created() {
this.dateQuery()
},
mounted() {
window.addEventListener('resize', () => {
this.imgLoad()
}, false)
},
methods: {
dateQuery() {
var between = this.endTime - this.startTime
if (between < 2678400000 && between > 0) {
this.loading = true
this.$axios.get('/qrCode/reportshortterm/' + this.startTime + '/' + this.endTime+ '/' +this.ago).then((res) => {
console.log(res.data)
this.qrCodeContents = res.data.qrcode
this.qrCodeContents1 = res.data.qrcode1
this.rpImages = this.qrCodeContents.length
this.rpImages1 = this.qrCodeContents1.length
this.loading = false
this.imgLoad()
}).catch((error) => {
this.loading = false
this.$message.error('查询二维码内容出错' + error)
})
} else {
this.$message.warning('时间过长或不规范')
return
}
},
// 下面的 imgLoad 是页面渲染完成的加载方法，确保屏幕中的图片的高度第一次渲染到页面。
imgLoad() {
this.$nextTick(() => {
var height = this.$refs.bannerHeight.offsetHeight - 70
this.bannerHeight = height
var divs = document.getElementsByName('qrCodeDiv')
for (var j = 0; j < divs.length; j++) {
divs[j].innerHTML = ""
}
for (var i = 0; i < this.$refs.qrCodeDiv.length; i++) {
new QRCode(this.$refs.qrCodeDiv[i], {
text: this.qrCodeContents[i],
width: 200,
height: 200,
colorDark: "#333333", //二维码颜色
colorLight: "#ffffff", //二维码背景色
correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
})
}
var divs1 = document.getElementsByName('qrCodeDiv1')
for (var j = 0; j < divs1.length; j++) {
divs1[j].innerHTML = ""
}
for (var i = 0; i < this.$refs.qrCodeDiv1.length; i++) {
new QRCode(this.$refs.qrCodeDiv1[i], {
text: this.qrCodeContents1[i],
width: 200,
height: 200,
colorDark: "#333333", //二维码颜色
colorLight: "#ffffff", //二维码背景色
correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
})
}
})
}
},
}
</script>
<style scoped>
/*.chart-container {*/
/*position: relative;*/
/*width: 100%;*/
/*height: calc(100vh - 50px);*/
/*}*/
/*.filter {*/
/*position: relative;*/
/*display: flex;*/
/*padding: 20px 0 10px 15px;*/
/*font-size: 12px;*/
/*line-height: 11px;*/
/*color: white;*/
/*}*/
/*input {*/
/*background: transparent;*/
/*border: none;*/
/*color: white;*/
/*}*/
/*.timeText {*/
/*opacity: 0.69;*/
/*padding-right: 7px;*/
/*font-size: 14px;*/
/*}*/
/*.startTime {*/
/*display: inline-block;*/
/*}*/
/*.endTime {*/
/*display: inline-block;*/
/*padding-left: 42px;*/
/*}*/
/*.timeQuery {*/
/*background: transparent;*/
/*}*/
/*.el-button {*/
/*background: transparent;*/
/*color: white;*/
/*}*/
/*.filter {*/
/*width: 100%;*/
/*background-color: transparent;*/
/*height: 10%*/
/*}*/
/*.filter >>> input {*/
/*background: transparent;*/
/*border: none;*/
/*color: white;*/
/*}*/
/*.content {*/
/*width: 100%;*/
/*background-color: transparent;*/
/*height: 90%;*/
/*padding-left: 5px;*/
/*padding-right: 5px;*/
/*}*/
/*.content >>> .el-tabs__item {*/
/*color: white;*/
/*}*/
/*.content >>> .el-tabs__item.is-active {*/
/*color: #409EFF;*/
/*}*/
.tableContent {
width:50%;
/*height: calc(80vh - 50px);*/
float: left;
padding-top: 10px;
padding-left: 10px;
padding-right: 5px;
}
/*.tableContent >>> td {*/
/*border: 1px solid #ffffff;*/
/*}*/
/*.el-carousel__item h3 {*/
/*color: #475669;*/
/*font-size: 18px;*/
/*opacity: 0.75;*/
/*line-height: 300px;*/
/*margin: 0;*/
/*}*/
/*.el-carousel__item:nth-child(2n) {*/
/*background-color: #000000;*/
/*}*/
/*.el-carousel__item:nth-child(2n+1) {*/
/*background-color: #000000;*/
/*}*/
</style>
用的是element组件,直接用el-image 图片预览就完事
参考: https://element.eleme.cn/#/zh-CN/component/image