Compare commits
55 Commits
master
...
Lvtianfang
Author | SHA1 | Date |
---|---|---|
|
6ebc70e99d | 2 months ago |
|
3b311a7687 | 2 months ago |
|
b2c99eab5d | 2 months ago |
|
df49b2fa3b | 2 months ago |
|
7eeefbfa2c | 2 months ago |
|
8194c39cad | 2 months ago |
|
89009bb344 | 3 months ago |
|
7d0b6ad439 | 3 months ago |
|
ef597aea0e | 3 months ago |
|
13789bd958 | 3 months ago |
|
4c90355d20 | 3 months ago |
|
dfc7d661e1 | 3 months ago |
|
3ffc4127aa | 3 months ago |
|
09baa7820c | 3 months ago |
|
668e794a17 | 3 months ago |
|
1867c4d015 | 3 months ago |
|
342913fb40 | 3 months ago |
|
867d91b66f | 3 months ago |
|
ca7a5d04a5 | 4 months ago |
|
1948b31604 | 4 months ago |
|
c3ada92397 | 4 months ago |
|
fdc447b1f7 | 4 months ago |
|
cd9046f7a6 | 5 months ago |
|
ac96880b32 | 5 months ago |
|
4e88a68f8d | 5 months ago |
|
bafa5f71bc | 5 months ago |
|
cbf7b95050 | 5 months ago |
|
2f9789dbf2 | 5 months ago |
|
a0531deade | 5 months ago |
|
7d7798188c | 5 months ago |
|
058205efc7 | 5 months ago |
|
e2c0251d17 | 6 months ago |
|
9dc6e90092 | 6 months ago |
|
a6e3e05503 | 6 months ago |
|
f833c4e8f0 | 6 months ago |
|
d946acd5fa | 6 months ago |
|
60db50f594 | 6 months ago |
|
0b4de5ce10 | 6 months ago |
|
877520b880 | 6 months ago |
|
7fc8d0c10e | 6 months ago |
|
fbf28d97c3 | 6 months ago |
|
e27751fdcc | 6 months ago |
|
24396a880c | 6 months ago |
|
5ca400fd27 | 6 months ago |
|
9edf466df5 | 6 months ago |
|
1a8e079823 | 6 months ago |
|
f3d0cf7315 | 6 months ago |
|
0ed06a2545 | 6 months ago |
|
dad0034760 | 6 months ago |
|
8586c7b41d | 6 months ago |
|
fd8d96315f | 6 months ago |
|
bf790ba234 | 6 months ago |
|
81c1be1ce5 | 6 months ago |
|
139b39fe12 | 6 months ago |
|
d8147a02c8 | 6 months ago |
Binary file not shown.
After Width: | Height: | Size: 173 KiB |
@ -0,0 +1,103 @@
|
|||||||
|
<!-- 拨付资金企业申请情况TOP5 -->
|
||||||
|
<template>
|
||||||
|
<div class="AFuwufazhanzonglan">
|
||||||
|
<div class="AFuwufazhanzonglan-listbox">
|
||||||
|
<div class="AFuwufazhanzonglan-niandu">
|
||||||
|
【 上一年度 】
|
||||||
|
</div>
|
||||||
|
<div class="AFuwufazhanzonglan-neirongBox">
|
||||||
|
<div class="AFuwufazhanzonglan-item">
|
||||||
|
<div class=" AFuwufazhanzonglan-img-box img-box_0"></div>
|
||||||
|
<div class="AFuwufazhanzonglan-item-top">
|
||||||
|
<div>{{ objYear.valueAdded }} <span>亿元</span></div>
|
||||||
|
<div>服务业增加值</div>
|
||||||
|
<div>[{{ objYear.developYear }}]</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="AFuwufazhanzonglan-item">
|
||||||
|
<div class=" AFuwufazhanzonglan-img-box img-box_1"></div>
|
||||||
|
<div class="AFuwufazhanzonglan-item-top">
|
||||||
|
<div>{{ objYear.increaseSpeed }} <span>%</span></div>
|
||||||
|
<div>服务业增速</div>
|
||||||
|
<div>[{{ objYear.developYear }}]</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="AFuwufazhanzonglan-item">
|
||||||
|
<div class=" AFuwufazhanzonglan-img-box img-box_2"></div>
|
||||||
|
<div class="AFuwufazhanzonglan-item-top">
|
||||||
|
<div>{{ objYear.gdpProportion }} <span>%</span></div>
|
||||||
|
<div>服务业增加值GDP比重</div>
|
||||||
|
<div>[{{ objYear.developYear }}]</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="AFuwufazhanzonglan-listbox">
|
||||||
|
<div class="AFuwufazhanzonglan-niandu">
|
||||||
|
【 上一季度 】
|
||||||
|
</div>
|
||||||
|
<div class="AFuwufazhanzonglan-neirongBox">
|
||||||
|
<div class="AFuwufazhanzonglan-item">
|
||||||
|
<div class=" AFuwufazhanzonglan-img-box img-box_0"></div>
|
||||||
|
<div class="AFuwufazhanzonglan-item-top">
|
||||||
|
<div>{{ objQuarter.valueAdded }} <span>亿元</span></div>
|
||||||
|
<div>服务业增加值</div>
|
||||||
|
<div>[{{ objQuarter.developYear + '-' +objQuarter.quarterly}}季度]</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="AFuwufazhanzonglan-item">
|
||||||
|
<div class=" AFuwufazhanzonglan-img-box img-box_1"></div>
|
||||||
|
<div class="AFuwufazhanzonglan-item-top">
|
||||||
|
<div>{{ objQuarter.increaseSpeed }} <span>%</span></div>
|
||||||
|
<div>服务业增速</div>
|
||||||
|
<div>[{{ objQuarter.developYear + '-' +objQuarter.quarterly}}季度]</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="AFuwufazhanzonglan-item">
|
||||||
|
<div class=" AFuwufazhanzonglan-img-box img-box_2"></div>
|
||||||
|
<div class="AFuwufazhanzonglan-item-top">
|
||||||
|
<div>{{ objQuarter.gdpProportion }} <span>%</span></div>
|
||||||
|
<div>服务业增加值GDP比重</div>
|
||||||
|
<div>[{{ objQuarter.developYear + '-' +objQuarter.quarterly}}季度]</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { servicesDevelop } from "@/api/jin_ji_hu/zijinbiao"
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
objYear:{
|
||||||
|
developYear:"",
|
||||||
|
valueAdded:"",
|
||||||
|
increaseSpeed:"",
|
||||||
|
gdpProportion:"",
|
||||||
|
},
|
||||||
|
objQuarter:{
|
||||||
|
developYear:"",
|
||||||
|
quarterly:"",
|
||||||
|
valueAdded:"",
|
||||||
|
increaseSpeed:"",
|
||||||
|
gdpProportion:"",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getServicesDevelop();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取top5列表
|
||||||
|
getServicesDevelop(){
|
||||||
|
servicesDevelop().then(res=>{
|
||||||
|
this.objYear = {...res.data[0]}
|
||||||
|
this.objQuarter = {...res.data[1]}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss"></style>
|
@ -0,0 +1,290 @@
|
|||||||
|
<template>
|
||||||
|
<div class="BJinsannianzijin">
|
||||||
|
<div class="echart_boxs">
|
||||||
|
<div class="echart_boxs_top">
|
||||||
|
<div class="echart_boxs_title">【服务业专项资金】</div>
|
||||||
|
<!-- <div class="echart_boxs_btn">
|
||||||
|
<span v-for="item,index in fuwuyeYear" :class="changeFuwuyeYear == index ? 'changeFuwuyeYear_span': ''" @click="changeFuwuyeYear = index">{{ item.year }}</span>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="echart_boxs_middle">
|
||||||
|
<div class="BJinsannianzijinchart-left" id="BJinsannianzijinchart-left"></div>
|
||||||
|
<div class="BJinsannianzijinchart-right">
|
||||||
|
<div class="yushuan">
|
||||||
|
<span>资金预算</span>
|
||||||
|
<div class="number-box">{{ obj.fundBudget ? obj.fundBudget : 0 }} <span class="number-unit-box">万元</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="yushuan">
|
||||||
|
<span>追加预算</span>
|
||||||
|
<div class="bottom_number number-box">{{ obj.additionBudget ? obj.additionBudget : 0 }} <span class="number-unit-box">万元</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="echart_boxs_bottom">拨付资金 <span>{{ obj.appropriationFund ? obj.appropriationFund : 0 }}</span>万元 (执行率 <span>{{ obj.implementationRate ? obj.implementationRate : 0 }}</span>% )</div>
|
||||||
|
</div>
|
||||||
|
<div class="echart_boxs echart_boxs_right">
|
||||||
|
<div class="echart_boxs_top">
|
||||||
|
<div class="echart_boxs_title">【总部专项资金】</div>
|
||||||
|
<!-- <div class="echart_boxs_btn">
|
||||||
|
<span v-for="item,index in fuwuyeYear" :class="changeFuwuyeYear == index ? 'changeFuwuyeYear_span': ''" @click="changeFuwuyeYear = index">{{ item.year }}</span>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="echart_boxs_middle">
|
||||||
|
<div class="zongbuzhuanxing-box" id="zongbuzhuanxing-box"></div>
|
||||||
|
<div class="BJinsannianzijinchart-right">
|
||||||
|
<div class="yushuan">
|
||||||
|
<span>资金预算</span>
|
||||||
|
<div class="number-box">{{ objTwo.fundBudget ? objTwo.fundBudget : 0 }} <span class="number-unit-box">万元</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="yushuan">
|
||||||
|
<span>追加预算</span>
|
||||||
|
<div class="bottom_number number-box">{{ objTwo.additionBudget ? objTwo.additionBudget : 0 }} <span class="number-unit-box">万元</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="echart_boxs_bottom">拨付资金 <span>{{ objTwo.appropriationFund ? objTwo.appropriationFund : 0 }}</span>万元 (执行率 <span>{{ objTwo.implementationRate ? objTwo.implementationRate : 0 }}</span>% )</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
// import resize from './mixins/resize'
|
||||||
|
import { threeYearsFund } from "@/api/jin_ji_hu/zijinbiao"
|
||||||
|
const animationDuration = 6000
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// mixins: [resize],
|
||||||
|
props: {
|
||||||
|
className: {
|
||||||
|
type: String,
|
||||||
|
default: 'chart'
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '50%'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '200px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
let date = new Date();
|
||||||
|
const currentYear = date.getFullYear();
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
chartTwo:null,
|
||||||
|
changeFuwuyeYear: currentYear,
|
||||||
|
fuwuyeYear:[
|
||||||
|
{
|
||||||
|
year: currentYear - 1,
|
||||||
|
},{
|
||||||
|
year: currentYear - 2,
|
||||||
|
},{
|
||||||
|
year: currentYear - 3,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
obj:{},
|
||||||
|
objTwo:{}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart(this.changeFuwuyeYear)
|
||||||
|
window.addEventListener('resize', this.cancalDebounce);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
// if (!this.chart) {
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
// this.chart.dispose()
|
||||||
|
// this.chart = null
|
||||||
|
window.removeEventListener('resize', this.cancalDebounce);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
cancalDebounce(){
|
||||||
|
// console.log("11111");
|
||||||
|
window.onresize = this.chart.resize();
|
||||||
|
window.onresize = this.chartTwo.resize();
|
||||||
|
},
|
||||||
|
initChart(Year) {
|
||||||
|
this.chart = echarts.init(document.getElementById('BJinsannianzijinchart-left'))
|
||||||
|
this.chartTwo = echarts.init(document.getElementById('zongbuzhuanxing-box'))
|
||||||
|
let option = {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
splitNumber: 3,
|
||||||
|
radius: 70,
|
||||||
|
center: ["45%", "95%"],
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
pointer: {
|
||||||
|
show: true,
|
||||||
|
icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVpJREFUWEftlr1KxEAURu9NsBLRDGJh7bqbpBJx3yCJ4KJgp4WFINjaCFZaCoIvIdrZKZhEn8AtFiFZ/AHBwkbMaiGuRXIlnUqWTMbVFZkp5975vsOpBuGb58Uqj/b7l/eiMSj6MH0XWcYqAlQ1P1wWzREGeJgtDyht9QYBRlQFpwdPAlcEQhigZeu7BLiWliJQXfOaU78G8GRXJhNQ6p8LaZ15zZ2iEEIGIsc8AqKZj2UI8EYJjLPT8K4IRGGAyDEXgWg/s4Rwj/nB0s8C2MY1AIx1LEGqMbd5zAtRyMCjbWwhwGZOeIN54UTXAZ4tvRQjXnEGbzAv3ObZ5TYQOfoBEC7whAJQrEBfaci7uM3b5wKI7EoNUZ3LCNPSOyJsI9Lr17nmBitdAegUEtkGpbMkxurwWXCeV5Y15zLwZwFajnlIRPM9MyABpAFpQBqQBqQBaaDnBv7Fj+gdzkcMMPGkRt0AAAAASUVORK5CYII=",
|
||||||
|
width: 20,
|
||||||
|
length: "80%",
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 10,
|
||||||
|
color: [
|
||||||
|
[0.6, '#00AEFF'], // 第一个颜色
|
||||||
|
[0.63, '#F5F8FA'],
|
||||||
|
[1, '#FFA42B '] // 第二个颜色
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
color: "#666",
|
||||||
|
fontSize: 16,
|
||||||
|
formatter: function (value) {
|
||||||
|
return value.toFixed(0);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
length: "28%",
|
||||||
|
lineStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 61.5,
|
||||||
|
name: '决策层国际化导向'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
let optionTwo = {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
splitNumber: 3,
|
||||||
|
radius: 70,
|
||||||
|
center: ["45%", "95%"],
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
pointer: {
|
||||||
|
show: true,
|
||||||
|
icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVpJREFUWEftlr1KxEAURu9NsBLRDGJh7bqbpBJx3yCJ4KJgp4WFINjaCFZaCoIvIdrZKZhEn8AtFiFZ/AHBwkbMaiGuRXIlnUqWTMbVFZkp5975vsOpBuGb58Uqj/b7l/eiMSj6MH0XWcYqAlQ1P1wWzREGeJgtDyht9QYBRlQFpwdPAlcEQhigZeu7BLiWliJQXfOaU78G8GRXJhNQ6p8LaZ15zZ2iEEIGIsc8AqKZj2UI8EYJjLPT8K4IRGGAyDEXgWg/s4Rwj/nB0s8C2MY1AIx1LEGqMbd5zAtRyMCjbWwhwGZOeIN54UTXAZ4tvRQjXnEGbzAv3ObZ5TYQOfoBEC7whAJQrEBfaci7uM3b5wKI7EoNUZ3LCNPSOyJsI9Lr17nmBitdAegUEtkGpbMkxurwWXCeV5Y15zLwZwFajnlIRPM9MyABpAFpQBqQBqQBaaDnBv7Fj+gdzkcMMPGkRt0AAAAASUVORK5CYII=",
|
||||||
|
width: 20,
|
||||||
|
length: "80%",
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 10,
|
||||||
|
color: [
|
||||||
|
[0.6, '#00AEFF'], // 第一个颜色
|
||||||
|
[0.63, '#F5F8FA'],
|
||||||
|
[1, '#FFA42B '] // 第二个颜色
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
color: "#666",
|
||||||
|
fontSize: 16,
|
||||||
|
formatter: function (value) {
|
||||||
|
return value.toFixed(0);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
length: "28%",
|
||||||
|
lineStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 61.5,
|
||||||
|
name: '决策层国际化导向'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
threeYearsFund(Year).then(res=>{
|
||||||
|
if(res.data.length == 0) {
|
||||||
|
let color = [ [1, '#00AEFF']] // 第二个颜色
|
||||||
|
option.series[0].axisLine.lineStyle.color = color
|
||||||
|
optionTwo.series[0].axisLine.lineStyle.color = color
|
||||||
|
option.series[0].data[0].value = 0
|
||||||
|
optionTwo.series[0].data[0].value = 0
|
||||||
|
this.obj = {}
|
||||||
|
this.objTwo = {}
|
||||||
|
} else {
|
||||||
|
res.data.map(item=>{
|
||||||
|
if(item.serviceType == "1") {
|
||||||
|
this.obj = item;
|
||||||
|
option.series[0].data[0].value = item.implementationRate
|
||||||
|
// 资金预算 fundBudget 追加预算 additionBudget
|
||||||
|
if(item.fundBudget <= 0) {
|
||||||
|
let color = [ [0, '#00AEFF'], [1, '#FFA42B ']] // 第二个颜色
|
||||||
|
option.series[0].axisLine.lineStyle.color = color
|
||||||
|
} else if(item.additionBudget <= 0) {
|
||||||
|
let color = [ [1, '#00AEFF'], [1, '#FFA42B ']] // 第二个颜色
|
||||||
|
option.series[0].axisLine.lineStyle.color = color
|
||||||
|
} else {
|
||||||
|
let count = item.fundBudget + item.additionBudget;
|
||||||
|
const percentage = (item.fundBudget / count);
|
||||||
|
let color = [ [Number(percentage.toFixed(1)), '#00AEFF'], [Number(percentage.toFixed(1)) + 0.03, '#F5F8FA'], [1, '#FFA42B ']]
|
||||||
|
option.series[0].axisLine.lineStyle.color = color;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.objTwo = item;
|
||||||
|
optionTwo.series[0].data[0].value = item.implementationRate
|
||||||
|
if(item.fundBudget <= 0) {
|
||||||
|
let color = [ [0, '#00AEFF'], [1, '#FFA42B ']] // 第二个颜色
|
||||||
|
optionTwo.series[0].axisLine.lineStyle.color = color
|
||||||
|
} else if(item.additionBudget <= 0) {
|
||||||
|
let color = [ [1, '#00AEFF'], [1, '#FFA42B ']] // 第二个颜色
|
||||||
|
optionTwo.series[0].axisLine.lineStyle.color = color
|
||||||
|
} else {
|
||||||
|
let count = item.fundBudget + item.additionBudget;
|
||||||
|
const percentage = (item.fundBudget / count);
|
||||||
|
let color = [ [Number(percentage.toFixed(1)), '#00AEFF'], [Number(percentage.toFixed(1)) + 0.03, '#F5F8FA'], [1, '#FFA42B ']]
|
||||||
|
optionTwo.series[0].axisLine.lineStyle.color = color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.chart.setOption(option)
|
||||||
|
this.chartTwo.setOption(optionTwo)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
@ -0,0 +1,57 @@
|
|||||||
|
import { debounce } from '@/utils'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
$_sidebarElm: null,
|
||||||
|
$_resizeHandler: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initListener()
|
||||||
|
},
|
||||||
|
activated() {
|
||||||
|
if (!this.$_resizeHandler) {
|
||||||
|
// avoid duplication init
|
||||||
|
this.initListener()
|
||||||
|
}
|
||||||
|
|
||||||
|
// when keep-alive chart activated, auto resize
|
||||||
|
this.resize()
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.destroyListener()
|
||||||
|
},
|
||||||
|
deactivated() {
|
||||||
|
this.destroyListener()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// use $_ for mixins properties
|
||||||
|
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||||
|
$_sidebarResizeHandler(e) {
|
||||||
|
if (e.propertyName === 'width') {
|
||||||
|
this.$_resizeHandler()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initListener() {
|
||||||
|
this.$_resizeHandler = debounce(() => {
|
||||||
|
this.resize()
|
||||||
|
}, 100)
|
||||||
|
window.addEventListener('resize', this.$_resizeHandler)
|
||||||
|
|
||||||
|
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||||
|
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||||
|
},
|
||||||
|
destroyListener() {
|
||||||
|
window.removeEventListener('resize', this.$_resizeHandler)
|
||||||
|
this.$_resizeHandler = null
|
||||||
|
|
||||||
|
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||||
|
},
|
||||||
|
resize() {
|
||||||
|
const { chart, chartTwo } = this
|
||||||
|
chart && chart.resize()
|
||||||
|
chartTwo && chartTwo.resize()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in new issue