@@ -52,9 +52,7 @@ export default { | |||
}; | |||
}, | |||
mounted () { | |||
setTimeout(()=>{ | |||
this.initChart(); | |||
},2000) | |||
this.initChart(); | |||
}, | |||
computed: { | |||
}, | |||
@@ -145,20 +143,21 @@ export default { | |||
type: "pie", | |||
radius: ["48%", "70%"], | |||
color: ["rgba(15, 252, 252, 1)", "rgba(134, 91, 252, 1)", "rgba(49, 129, 246, 1)", "rgba(29, 197, 104, 1)","#ffc72b"], | |||
color: ["rgba(15, 252, 252, 1)", "rgba(134, 91, 252, 1)", "rgba(49, 129, 246, 1)", "rgba(29, 197, 104, 1)", "#ffc72b"], | |||
label: { | |||
normal: { | |||
formatter: function (params, ticket, callback) { | |||
var total = 0; //考生总数量 | |||
var percent = 0; //考生占比 | |||
echartData.forEach(function (value, index, array) { | |||
total += value.value; | |||
total += value; | |||
}); | |||
percent = ((params.value / total) * 100).toFixed(1); | |||
return ( | |||
"{white|" + percent + "%" + "}\n" + | |||
"{white|" + params.percent | |||
+ "%" + "}\n" + | |||
"{blue|" + params.name + "}\n" + | |||
(that.showTit ? "{hr|}\n{yellow|" + params.value + params.data.unit + '}':'') | |||
(that.showTit ? "{hr|}\n{yellow|" + params.value + params.data.unit + '}' : '') | |||
); | |||
}, | |||
rich: rich, | |||
@@ -11,4 +11,29 @@ export function lefttopMonetaryFundAnalysis (deptId, year) { | |||
method: 'get', | |||
params: query | |||
}) | |||
} | |||
// 资金一张图-左中-资金收入分析(类型) | |||
export function leftbottomcapitalgainstype (deptId, year) { | |||
let query = { | |||
deptId, | |||
year | |||
} | |||
return request({ | |||
url: 'api/home/xixia/finance/zjsrlxfx', | |||
method: 'get', | |||
params: query | |||
}) | |||
} | |||
// 资金一张图-左中-资金收入分析(趋势) | |||
export function leftbottomcapitalgainstrend (deptId, year) { | |||
let query = { | |||
deptId, | |||
year | |||
} | |||
return request({ | |||
url: 'api/home/xixia/finance/zjsrqsfx', | |||
method: 'get', | |||
params: query | |||
}) | |||
} |
@@ -1,11 +1,16 @@ | |||
<Pannel title="资金收入分析" height="340"> | |||
<Pannel title="资金收入分析" height="340" | |||
v-loading="!isLoad" | |||
element-loading-text="拼命加载中" | |||
element-loading-spinner="el-icon-loading" | |||
element-loading-background="rgba(0, 0, 0, 0.1)" | |||
> | |||
<div class="full"> | |||
<div class="top"> | |||
<PannelTabs @change="tabChange"></PannelTabs> | |||
</div> | |||
<div class="buttom"> | |||
<LineCharts v-if="tabIndex === '1'"></LineCharts> | |||
<PieCharts v-if="tabIndex === '2'"></PieCharts> | |||
<LineCharts v-if="tabIndex === '1' && isLoad" :data="data"></LineCharts> | |||
<PieCharts v-if="tabIndex === '2' && isLoad" :data="data"></PieCharts> | |||
</div> | |||
</div> | |||
</Pannel> |
@@ -2,7 +2,15 @@ import Pannel from '@/components/pannel/index.vue'; | |||
import PannelTabs from '@/components/pannel-tabs/index.vue'; | |||
import LineCharts from '@/components/charts/line/index.vue'; | |||
import PieCharts from '@/components/charts/pie/index.vue'; | |||
import { mapGetters } from 'vuex'; | |||
import { leftbottomcapitalgainstrend, leftbottomcapitalgainstype } from '../../../../api/index.js'; | |||
const map = { | |||
'经营收入': '万元', | |||
'补助收入': '万吨', | |||
'投资收益': '万元', | |||
'其他收入': '万吨' | |||
} | |||
export default { | |||
components: { | |||
LineCharts, | |||
@@ -12,16 +20,73 @@ export default { | |||
}, | |||
data () { | |||
return { | |||
data: [], // 数据 | |||
isLoad: false, // 是否加载完成 | |||
tabIndex: '1' | |||
}; | |||
}, | |||
computed: { | |||
...mapGetters(['year', 'deptId']) | |||
}, | |||
watch: { | |||
year: { | |||
handler () { | |||
this.getData(); | |||
}, | |||
immediate: true, // 立即执行 | |||
}, | |||
deptId: { | |||
handler () { | |||
this.getData(); | |||
}, | |||
immediate: true, // 立即执行 | |||
} | |||
}, | |||
created () { | |||
}, | |||
mounted () { | |||
}, | |||
methods: { | |||
// 获取数据 | |||
getData () { | |||
if (this.year || this.deptId) { | |||
this.isLoad = false; | |||
// 如果是趋势 | |||
if (this.tabIndex == 1) { | |||
leftbottomcapitalgainstrend(this.year, this.deptId).then(res => { | |||
let data = res.data.map(item => { | |||
return { | |||
name: item.name + '月', | |||
value: item.value | |||
} | |||
}) | |||
this.data = data; | |||
this.isLoad = true; | |||
}) | |||
} else if (this.tabIndex == 2) { | |||
// 获取类型 | |||
leftbottomcapitalgainstype(this.year, this.deptId).then(res => { | |||
let data = res.data.list.map(item => { | |||
return { | |||
name: item.name, | |||
value: item.value, | |||
unit: this.unitMaker(item.name) | |||
} | |||
}) | |||
this.data = data | |||
this.isLoad = true; | |||
}) | |||
} | |||
} | |||
}, | |||
unitMaker (val) { | |||
return map[val]; | |||
}, | |||
tabChange (info) { | |||
this.tabIndex = info.id | |||
this.getData() | |||
} | |||
} | |||
}; |
@@ -6,6 +6,7 @@ export default { | |||
Bar, | |||
Pannel | |||
}, | |||
data () { | |||
return { | |||
}; | |||