|
@@ -1,58 +1,58 @@
|
|
|
<template>
|
|
|
- <div class="sfqfdata" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0)">
|
|
|
+ <div class="sfqfdata" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0)">
|
|
|
<div class="smallTitle">上月收费、欠费统计</div>
|
|
|
<div class="userchart" ref="chart"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { GetLastSfQf } from '@/api/dataBoard/misdata'
|
|
|
+import { owingStat } from '@/views/dataBoard/api/smartMarketing'
|
|
|
import comMixins from '@/views/dataBoard/mixins/comMixins'
|
|
|
|
|
|
export default {
|
|
|
name: 'sfqfdata',
|
|
|
- props: {
|
|
|
+ props:{
|
|
|
|
|
|
},
|
|
|
mixins: [comMixins],
|
|
|
data() {
|
|
|
return {
|
|
|
- loading: true,
|
|
|
+ loading:true,
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
},
|
|
|
- created() {
|
|
|
+ created(){
|
|
|
this.GetLastSfQfList()
|
|
|
},
|
|
|
mounted() {
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
/**
|
|
|
* @description 上月各个用水性质的收费金额
|
|
|
*/
|
|
|
- GetLastSfQfList() {
|
|
|
+ GetLastSfQfList(){
|
|
|
const that = this
|
|
|
- GetLastSfQf({}).then((res) => {
|
|
|
- //console.log("GetLastSfQf" + JSON.stringify(res))
|
|
|
- if (res.Code == 200) {
|
|
|
+ owingStat({}).then((res) => {
|
|
|
+ //console.log("GetLastSfQf"+JSON.stringify(res))
|
|
|
+ if(res.code == 1){
|
|
|
let seriesData = [
|
|
|
{ value: 0, name: '欠费' },
|
|
|
{ value: 0, name: '收费' },
|
|
|
]
|
|
|
- if (res.Result.total > 0) {
|
|
|
- seriesData[0].value = that.accDiv(res.Result.rows[0].QFJE, 10000).toFixed(2)
|
|
|
- seriesData[1].value = that.accDiv(res.Result.rows[0].SFJE, 10000).toFixed(2)
|
|
|
+ if(res.result){
|
|
|
+ seriesData[0].value = that.accDiv(res.result.qfje,10000).toFixed(2)
|
|
|
+ seriesData[1].value = that.accDiv(res.result.sfje,10000).toFixed(2)
|
|
|
}
|
|
|
that.drawChart(seriesData)
|
|
|
that.loading = false
|
|
|
- } else {
|
|
|
- //console.log("GetLastSfQf:" + res.Message)
|
|
|
+ }else{
|
|
|
+ //console.log("GetLastSfQf:"+res.Message)
|
|
|
that.loading = false
|
|
|
}
|
|
|
}).catch((err) => {
|
|
|
- //console.log("GetLastSfQf:" + err)
|
|
|
+ //console.log("GetLastSfQf:"+err)
|
|
|
that.loading = false
|
|
|
});
|
|
|
},
|
|
@@ -63,152 +63,50 @@ export default {
|
|
|
drawChart(seriesData) {
|
|
|
const that = this;
|
|
|
const chartReady = that.$echarts.init(that.$refs.chart)
|
|
|
- let zb = that.accMul(that.accDiv(seriesData[1].value, that.accAdd(seriesData[0].value, seriesData[1].value)), 100).toFixed(0)
|
|
|
-
|
|
|
const options = {
|
|
|
- title: {
|
|
|
- text: zb + "%",
|
|
|
- subtext: '收费占比',
|
|
|
- x: 'center',
|
|
|
- y: 'center',
|
|
|
- textStyle: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: 24,
|
|
|
- fontWeight: 'bold'
|
|
|
- },
|
|
|
- subtextStyle: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: 14,
|
|
|
- fontWeight: 'normal'
|
|
|
- }
|
|
|
- },
|
|
|
tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
|
+ trigger: 'item'
|
|
|
},
|
|
|
- series:
|
|
|
- [
|
|
|
- {
|
|
|
- name: '收费、欠费',
|
|
|
- type: 'pie',
|
|
|
- radius: ['40%', '55%'],
|
|
|
- center: ['50%', '50%'],
|
|
|
- data: [{
|
|
|
- value: seriesData[0].value,
|
|
|
- name: seriesData[0].name,
|
|
|
- itemStyle: {
|
|
|
- color: new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
- offset: 0,
|
|
|
- color: '#f6e3a1'
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: '#ff4236'
|
|
|
- }])
|
|
|
- },
|
|
|
- label: {
|
|
|
- color: "#fff",
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '收费、欠费统计',
|
|
|
+ type: 'pie',
|
|
|
+ // radius: '50%',
|
|
|
+ radius: ['40%', '64%'],
|
|
|
+ center: ['50%', '55%'],
|
|
|
+ color: ['#2BAEFD', '#BEB56A', '#02A9C2', '#1D5D8D', '#6f81da', '#00ffb4'],
|
|
|
+ label: {
|
|
|
+ formatter: '{c|{c}万元}\n{b|{b}} ',
|
|
|
+ rich: {
|
|
|
+ b: {
|
|
|
+ color: '#A4D9F9',
|
|
|
fontSize: 14,
|
|
|
- formatter: '欠费\n{a|' + seriesData[0].value + '}万元',
|
|
|
- rich: {
|
|
|
- a: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: 16,
|
|
|
- lineHeight: 30
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- value: seriesData[1].value,
|
|
|
- name: seriesData[1].name,
|
|
|
- itemStyle: {
|
|
|
- color: "transparent"
|
|
|
+ fontWeight: 'bold',
|
|
|
+ lineHeight: 33
|
|
|
},
|
|
|
- label: {
|
|
|
- show: false
|
|
|
+ c: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 16,
|
|
|
+ fontFamily: "myFont"
|
|
|
}
|
|
|
}
|
|
|
- ]
|
|
|
},
|
|
|
- {
|
|
|
- name: '收费、欠费',
|
|
|
- type: 'pie',
|
|
|
- radius: ['45%', '50%'],
|
|
|
- center: ['50%', '50%'],
|
|
|
- data: [{
|
|
|
- value: seriesData[0].value,
|
|
|
- name: seriesData[0].name,
|
|
|
- itemStyle: {
|
|
|
- color: "transparent"
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- value: seriesData[1].value,
|
|
|
- name: seriesData[1].name,
|
|
|
- itemStyle: {
|
|
|
- color: new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
- offset: 0,
|
|
|
- color: '#348fe6'
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: '#625bef'
|
|
|
- }])
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- color: "#fff",
|
|
|
- fontSize: 14,
|
|
|
- formatter: '收费\n{a|' + seriesData[1].value + '}万元',
|
|
|
- rich: {
|
|
|
- a: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: 16,
|
|
|
- lineHeight: 30
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
+ data: seriesData,
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
}
|
|
|
- ]
|
|
|
}
|
|
|
- // {
|
|
|
- // name: '收费、欠费统计',
|
|
|
- // type: 'pie',
|
|
|
- // // radius: '50%',
|
|
|
- // radius: ['40%', '64%'],
|
|
|
- // center: ['50%', '55%'],
|
|
|
- // color: ['#2BAEFD', '#BEB56A', '#02A9C2', '#1D5D8D', '#6f81da', '#00ffb4'],
|
|
|
- // label: {
|
|
|
- // formatter: '{c|{c}万元}\n{b|{b}} ',
|
|
|
- // rich: {
|
|
|
- // b: {
|
|
|
- // color: '#A4D9F9',
|
|
|
- // fontSize: 14,
|
|
|
- // fontWeight: 'bold',
|
|
|
- // lineHeight: 33
|
|
|
- // },
|
|
|
- // c: {
|
|
|
- // color: '#fff',
|
|
|
- // fontSize: 16,
|
|
|
- // fontFamily: "myFont"
|
|
|
- // }
|
|
|
- // }
|
|
|
- // },
|
|
|
- // data: seriesData,
|
|
|
- // emphasis: {
|
|
|
- // itemStyle: {
|
|
|
- // shadowBlur: 10,
|
|
|
- // shadowOffsetX: 0,
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
chartReady.setOption(options)
|
|
|
|
|
|
//自定义缩放
|
|
|
window.addEventListener("resize", () => {
|
|
|
- if (chartReady) {
|
|
|
+ if(chartReady){
|
|
|
chartReady.resize()
|
|
|
}
|
|
|
})
|
|
@@ -218,17 +116,17 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang='scss'>
|
|
|
-.sfqfdata {
|
|
|
- width: calc(100% - 16px);
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- padding: 0 8px;
|
|
|
- // border: 1px yellow solid;
|
|
|
+ .sfqfdata{
|
|
|
+ width: calc(100% - 16px);
|
|
|
+ height: calc(100% - 16px);
|
|
|
+ position: relative;
|
|
|
+ padding: 8px;
|
|
|
+ // border: 1px yellow solid;
|
|
|
|
|
|
- .userchart {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- // border: 1px red solid;
|
|
|
+ .userchart{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // border: 1px red solid;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
</style>>
|