Compare commits
55 Commits
Author | SHA1 | Date |
---|---|---|
吕天方 | 6ebc70e99d | 4 days ago |
吕天方 | 3b311a7687 | 4 days ago |
吕天方 | b2c99eab5d | 6 days ago |
吕天方 | df49b2fa3b | 2 weeks ago |
吕天方 | 7eeefbfa2c | 2 weeks ago |
吕天方 | 8194c39cad | 1 month ago |
吕天方 | 89009bb344 | 1 month ago |
吕天方 | 7d0b6ad439 | 1 month ago |
吕天方 | ef597aea0e | 1 month ago |
吕天方 | 13789bd958 | 1 month ago |
吕天方 | 4c90355d20 | 1 month ago |
吕天方 | dfc7d661e1 | 1 month ago |
吕天方 | 3ffc4127aa | 2 months ago |
吕天方 | 09baa7820c | 2 months ago |
吕天方 | 668e794a17 | 2 months ago |
吕天方 | 1867c4d015 | 2 months ago |
吕天方 | 342913fb40 | 2 months ago |
吕天方 | 867d91b66f | 2 months ago |
吕天方 | ca7a5d04a5 | 3 months ago |
吕天方 | 1948b31604 | 3 months ago |
吕天方 | c3ada92397 | 3 months ago |
吕天方 | fdc447b1f7 | 3 months ago |
吕天方 | cd9046f7a6 | 3 months ago |
吕天方 | ac96880b32 | 3 months ago |
吕天方 | 4e88a68f8d | 4 months ago |
吕天方 | bafa5f71bc | 4 months ago |
吕天方 | cbf7b95050 | 4 months ago |
吕天方 | 2f9789dbf2 | 4 months ago |
吕天方 | a0531deade | 4 months ago |
吕天方 | 7d7798188c | 4 months ago |
吕天方 | 058205efc7 | 4 months ago |
吕天方 | e2c0251d17 | 4 months ago |
吕天方 | 9dc6e90092 | 4 months ago |
吕天方 | a6e3e05503 | 4 months ago |
吕天方 | f833c4e8f0 | 4 months ago |
吕天方 | d946acd5fa | 4 months ago |
吕天方 | 60db50f594 | 4 months ago |
吕天方 | 0b4de5ce10 | 4 months ago |
吕天方 | 877520b880 | 4 months ago |
吕天方 | 7fc8d0c10e | 4 months ago |
吕天方 | fbf28d97c3 | 4 months ago |
吕天方 | e27751fdcc | 4 months ago |
吕天方 | 24396a880c | 4 months ago |
吕天方 | 5ca400fd27 | 4 months ago |
吕天方 | 9edf466df5 | 4 months ago |
吕天方 | 1a8e079823 | 4 months ago |
吕天方 | f3d0cf7315 | 4 months ago |
吕天方 | 0ed06a2545 | 5 months ago |
吕天方 | dad0034760 | 5 months ago |
吕天方 | 8586c7b41d | 5 months ago |
吕天方 | fd8d96315f | 5 months ago |
李劲龙 | bf790ba234 | 5 months ago |
李劲龙 | 81c1be1ce5 | 5 months ago |
吕天方 | 139b39fe12 | 5 months ago |
李劲龙 | d8147a02c8 | 5 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