243 lines
8.2 KiB
Vue
243 lines
8.2 KiB
Vue
|
<template>
|
|||
|
|
<div class="pd10" :style="`height:${vh}`" id="jzhylv">
|
|||
|
|
<el-button
|
|||
|
|
style="position: absolute; right: 10px; z-index: 20000"
|
|||
|
|
type="text"
|
|||
|
|
icon="el-icon-download"
|
|||
|
|
title="生成图片"
|
|||
|
|
@click="download"
|
|||
|
|
>
|
|||
|
|
下载
|
|||
|
|
</el-button>
|
|||
|
|
<div id="jzharmonicvoltage" ref="jzxbhylv"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div id="electriccurrent" style="'width:900px;height:500px"></div> -->
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
echartsheight: undefined,
|
|||
|
|
echartswidth: undefined,
|
|||
|
|
zoom: '',
|
|||
|
|
myChartes: '',
|
|||
|
|
vh: null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {},
|
|||
|
|
mounted() {
|
|||
|
|
this.setHeight()
|
|||
|
|
window.addEventListener('resize', this.setHeight)
|
|||
|
|
|
|||
|
|
this.resizeEchartjhylz()
|
|||
|
|
|
|||
|
|
//this.$nextTick(()=> {
|
|||
|
|
this.electriccurrentdata()
|
|||
|
|
// })
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
window.removeEventListener('resize', this.setHeight)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
setHeight() {
|
|||
|
|
this.echartsheight = window.sessionStorage.getItem('appheight') - 200
|
|||
|
|
this.vh = window.sessionStorage.getItem('appheight') - 246 + 'px'
|
|||
|
|
if (this.myChartes !== '') {
|
|||
|
|
this.myChartes.resize()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
resizeEchartjhylz() {
|
|||
|
|
var elementResizeDetectorMaker = require('element-resize-detector')
|
|||
|
|
if (document.getElementById('jzhylv')) {
|
|||
|
|
var erd = elementResizeDetectorMaker()
|
|||
|
|
erd.listenTo(document.getElementById('jzhylv'), element => {
|
|||
|
|
let domeId = document.getElementById('jzhylv')
|
|||
|
|
let domeId2 = document.getElementById('jzharmonicvoltage')
|
|||
|
|
domeId2.style.width = domeId.offsetWidth - 10 + 'px'
|
|||
|
|
if (this.myChartes !== '') {
|
|||
|
|
this.myChartes.resize()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
download() {
|
|||
|
|
// 转换成canvas
|
|||
|
|
html2canvas(document.getElementById('hylv'), {
|
|||
|
|
//backgroundColor: 'white',
|
|||
|
|
background: '#fff',
|
|||
|
|
scale: 1
|
|||
|
|
}).then(function (canvas) {
|
|||
|
|
// 创建a标签，实现下载
|
|||
|
|
var creatIMg = document.createElement('a')
|
|||
|
|
creatIMg.download = '谐波电压含有率.png' // 设置下载的文件名，
|
|||
|
|
creatIMg.href = canvas.toDataURL() // 下载url
|
|||
|
|
creatIMg.click()
|
|||
|
|
creatIMg.remove() // 下载之后把创建的元素删除
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
random(min, max) {
|
|||
|
|
return parseInt(Math.random() * (max - min) + min)
|
|||
|
|
},
|
|||
|
|
//电能质量图表
|
|||
|
|
electriccurrentdata() {
|
|||
|
|
const echarts = require('echarts')
|
|||
|
|
var domID1 = document.getElementById('jzharmonicvoltage')
|
|||
|
|
setTimeout(() => {
|
|||
|
|
domID1.style.width = document.getElementById('jzhylv').offsetWidth - 10 + 'px'
|
|||
|
|
domID1.style.height = window.sessionStorage.getItem('appheight') - 246 + 'px'
|
|||
|
|
}, 0)
|
|||
|
|
var myChartes = echarts.init(domID1)
|
|||
|
|
this.myChartes = myChartes
|
|||
|
|
myChartes.clear()
|
|||
|
|
var xData = []
|
|||
|
|
var yData = []
|
|||
|
|
var yData1 = []
|
|||
|
|
function random(min, max) {
|
|||
|
|
return parseInt(Math.random() * (max - min) + min)
|
|||
|
|
}
|
|||
|
|
for (var i = 0; i < 50; i++) {
|
|||
|
|
xData.push(i + '次')
|
|||
|
|
}
|
|||
|
|
for (var i = 0; i < xData.length; i++) {
|
|||
|
|
let value = random(10, 100)
|
|||
|
|
yData.push(value)
|
|||
|
|
}
|
|||
|
|
for (var i = 0; i < xData.length; i++) {
|
|||
|
|
let value = random(10, 100)
|
|||
|
|
yData1.push(value)
|
|||
|
|
}
|
|||
|
|
var option = {
|
|||
|
|
//backgroundColor: '#fff',
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
// 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '10px',
|
|||
|
|
right: '50px',
|
|||
|
|
bottom: '40px',
|
|||
|
|
top: '50px',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['国标限值', '电流幅值'],
|
|||
|
|
left: '20px',
|
|||
|
|
top: 0,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#333'
|
|||
|
|
}
|
|||
|
|
//itemWidth: 10,
|
|||
|
|
//itemHeight: 10,
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
name: '次数',
|
|||
|
|
data: xData,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
symbol: ['none', 'arrow'],
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(0,0,0,0.5)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: true,
|
|||
|
|
alignWithLabel: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
max: '100',
|
|||
|
|
name: '单位:%',
|
|||
|
|
nameTextStyle: {
|
|||
|
|
// color: '#000',
|
|||
|
|
fontSize: 12,
|
|||
|
|
left: '0%'
|
|||
|
|
},
|
|||
|
|
position: 'left',
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
symbol: ['none', 'arrow'],
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#333'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#f1f1f1'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color: '#999',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: true,
|
|||
|
|
alignWithLabel: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
type: 'inside',
|
|||
|
|
height: 13,
|
|||
|
|
start: 0,
|
|||
|
|
bottom: '20px',
|
|||
|
|
end: 100
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
start: 0,
|
|||
|
|
height: 13,
|
|||
|
|
bottom: '20px',
|
|||
|
|
end: 100
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '国标限值',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: '25%',
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#00CC99',
|
|||
|
|
barBorderRadius: [5, 5, 0, 0]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: yData
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '电流幅值',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: '25%',
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#FF9900',
|
|||
|
|
barBorderRadius: [12, 12, 0, 0]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: yData1
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChartes.setOption(option)
|
|||
|
|
window.echartsArr.push(myChartes)
|
|||
|
|
let _this = this
|
|||
|
|
_this.$erd.listenTo(_this.$refs.jzxbhylv, element => {
|
|||
|
|
_this.$nextTick(() => {
|
|||
|
|
domID1.style.width = document.getElementById('jzhylv').offsetWidth - 10 + 'px'
|
|||
|
|
myChartes.resize()
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
setInterval(() => {
|
|||
|
|
myChartes.resize()
|
|||
|
|
}, 100)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|