|
@@ -1,149 +1,160 @@
|
|
|
<template>
|
|
|
- <div class="modelBlock">
|
|
|
- <template v-if="permissionFiltering">
|
|
|
- <div class="model-title">
|
|
|
- <div class="model-title-text">收款率分析</div>
|
|
|
- <div class="model-title-right">
|
|
|
- <el-date-picker
|
|
|
- value-format="yyyy-MM"
|
|
|
- v-model="date"
|
|
|
- type="month"
|
|
|
- placeholder="选择月"
|
|
|
- class="saveColumn-select saveColumn-select-time"
|
|
|
- @change="changeTime"
|
|
|
- :clearable="false"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
- <el-select
|
|
|
- v-model="mixins_query.chargeType"
|
|
|
- placeholder="所有费用"
|
|
|
- clearable
|
|
|
- class="saveColumn-select"
|
|
|
- @change="getData"
|
|
|
- >
|
|
|
- <el-option v-for="(item, index) in amountType" :label="item.name" :value="item.value" :key="index"></el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="model-content">
|
|
|
- <process-circle
|
|
|
- class="item"
|
|
|
- :strokeWidth="strokeWidth"
|
|
|
- :strokeColor="strokeColor"
|
|
|
- :trailWidth="trailWidth"
|
|
|
- :trailColor="trailColor"
|
|
|
- :percent="dataObj.receivedAmount"
|
|
|
- >
|
|
|
- <span class="ashText" style="font-size: 14px">收款率</span>
|
|
|
- <span> {{ parseInt((dataObj.receivedAmount / dataObj.receivableAmount || 0).toFixed(2) * 100) }}%</span>
|
|
|
- </process-circle>
|
|
|
- <div class="textAmount">
|
|
|
- <div class="listAmount">
|
|
|
- <div class="listText">应收金额</div>
|
|
|
- <div class="listNumber">{{ dataObj.receivableAmount }}</div>
|
|
|
- </div>
|
|
|
- <div class="listAmount">
|
|
|
- <div class="listText">已收金额</div>
|
|
|
- <div class="listNumber">{{ dataObj.receivedAmount }}</div>
|
|
|
- </div>
|
|
|
- <div class="listAmount">
|
|
|
- <div class="listText">未收金额</div>
|
|
|
- <div class="listNumber">{{ dataObj.uncollected }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <no-permission v-else tipsText="收款率分析"></no-permission>
|
|
|
- </div>
|
|
|
+ <div class="modelBlock">
|
|
|
+ <template v-if="permissionFiltering">
|
|
|
+ <div class="model-title">
|
|
|
+ <div class="model-title-text">收款率分析</div>
|
|
|
+ <div class="model-title-right">
|
|
|
+ <el-date-picker
|
|
|
+ value-format="yyyy-MM"
|
|
|
+ v-model="date"
|
|
|
+ type="month"
|
|
|
+ placeholder="选择月"
|
|
|
+ class="saveColumn-select saveColumn-select-time"
|
|
|
+ @change="changeTime"
|
|
|
+ :clearable="false"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <el-select
|
|
|
+ v-model="mixins_query.chargeType"
|
|
|
+ placeholder="所有费用"
|
|
|
+ clearable
|
|
|
+ class="saveColumn-select"
|
|
|
+ @change="getData"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in amountType"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.value"
|
|
|
+ :key="index"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="model-content">
|
|
|
+ <process-circle
|
|
|
+ class="item"
|
|
|
+ :strokeWidth="strokeWidth"
|
|
|
+ :strokeColor="strokeColor"
|
|
|
+ :trailWidth="trailWidth"
|
|
|
+ :trailColor="trailColor"
|
|
|
+ :percent="dataObj.receivedAmount"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="ashText"
|
|
|
+ style="font-size: 14px"
|
|
|
+ >收款率</span>
|
|
|
+ <span> {{ parseInt((dataObj.receivedAmount / dataObj.receivableAmount || 0).toFixed(2) * 100) }}%</span>
|
|
|
+ </process-circle>
|
|
|
+ <div class="textAmount">
|
|
|
+ <div class="listAmount">
|
|
|
+ <div class="listText">应收金额</div>
|
|
|
+ <div class="listNumber">{{ dataObj.receivableAmount }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="listAmount">
|
|
|
+ <div class="listText">已收金额</div>
|
|
|
+ <div class="listNumber">{{ dataObj.receivedAmount }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="listAmount">
|
|
|
+ <div class="listText">未收金额</div>
|
|
|
+ <div class="listNumber">{{ dataObj.uncollected }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <no-permission
|
|
|
+ v-else
|
|
|
+ tipsText="收款率分析"
|
|
|
+ ></no-permission>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import processCircle from './circle'; // 环形进度条
|
|
|
import permissionComponent from './permissionComponent';
|
|
|
export default {
|
|
|
- mixins: [permissionComponent],
|
|
|
- components: {
|
|
|
- processCircle
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- defaultModel: {
|
|
|
- permissUrl: '14',
|
|
|
- titleName: '收费管理'
|
|
|
- },
|
|
|
- strokeWidth: 15, // 线条宽度
|
|
|
- trailWidth: 15, // 背景线条宽度
|
|
|
- trailColor: '#2C3345', // 背景线条宽度
|
|
|
- mixins_query: {
|
|
|
- communityId: '',
|
|
|
- chargeType: '',
|
|
|
- date: ''
|
|
|
- },
|
|
|
- date: '',
|
|
|
- amountType: [
|
|
|
- {
|
|
|
- value: 1,
|
|
|
- name: '物业费'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 2,
|
|
|
- name: '水费'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 3,
|
|
|
- name: '电费'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 4,
|
|
|
- name: '车位费'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 6,
|
|
|
- name: '卫生费'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 7,
|
|
|
- name: '其他费用'
|
|
|
- }
|
|
|
- ],
|
|
|
- dataObj: {
|
|
|
- receivedAmount: 0,
|
|
|
- receivableAmount: 0,
|
|
|
- uncollected: 0
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- getData() {
|
|
|
- this.$http.get('/sc-community/statisticsCollectionRate', this.mixins_query).then(({ data, msg, status }) => {
|
|
|
- let rep = /[\.]/;
|
|
|
- if (status == 0 && !!data) {
|
|
|
- this.dataObj = {
|
|
|
- receivableAmount: !!data.receivableAmount && data.receivableAmount !== 0 ? data.receivableAmount.toFixed(2) : 0,
|
|
|
- receivedAmount: !!data.receivedAmount && data.receivedAmount !== 0 ? data.receivedAmount.toFixed(2) : 0,
|
|
|
- uncollected: rep.test(data.receivableAmount - data.receivedAmount || 0)
|
|
|
- ? (data.receivableAmount - data.receivedAmount || 0).toFixed(2)
|
|
|
- : 0
|
|
|
- };
|
|
|
- } else {
|
|
|
- this.dataObj = {
|
|
|
- receivableAmount: 0,
|
|
|
- receivedAmount: 0,
|
|
|
- uncollected: 0
|
|
|
- };
|
|
|
- }
|
|
|
- });
|
|
|
+ mixins: [permissionComponent],
|
|
|
+ components: {
|
|
|
+ processCircle
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ defaultModel: {
|
|
|
+ permissUrl: '14',
|
|
|
+ titleName: '收费管理'
|
|
|
+ },
|
|
|
+ strokeWidth: 15, // 线条宽度
|
|
|
+ trailWidth: 15, // 背景线条宽度
|
|
|
+ trailColor: '#2C3345', // 背景线条宽度
|
|
|
+ mixins_query: {
|
|
|
+ communityId: '',
|
|
|
+ chargeType: '',
|
|
|
+ date: ''
|
|
|
+ },
|
|
|
+ date: '',
|
|
|
+ amountType: [
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ name: '物业费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ name: '水费'
|
|
|
},
|
|
|
- changeTime(v) {
|
|
|
- this.mixins_query.date = v + '-01';
|
|
|
- this.getData();
|
|
|
+ {
|
|
|
+ value: 3,
|
|
|
+ name: '电费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 4,
|
|
|
+ name: '车位费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 6,
|
|
|
+ name: '卫生费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 7,
|
|
|
+ name: '其他费用'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataObj: {
|
|
|
+ receivedAmount: 0,
|
|
|
+ receivableAmount: 0,
|
|
|
+ uncollected: 0
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ getData () {
|
|
|
+ this.$http.get('/sc-community/statisticsCollectionRate', this.mixins_query).then(({ data, msg, status }) => {
|
|
|
+ let rep = /[\.]/;
|
|
|
+ if (status == 0 && !!data) {
|
|
|
+ this.dataObj = {
|
|
|
+ receivableAmount: !!data.receivableAmount && data.receivableAmount !== 0 ? data.receivableAmount.toFixed(2) : 0,
|
|
|
+ receivedAmount: !!data.receivedAmount && data.receivedAmount !== 0 ? data.receivedAmount.toFixed(2) : 0,
|
|
|
+ uncollected: rep.test(data.receivableAmount - data.receivedAmount || 0)
|
|
|
+ ? (data.receivableAmount - data.receivedAmount || 0).toFixed(2)
|
|
|
+ : 0
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ this.dataObj = {
|
|
|
+ receivableAmount: 0,
|
|
|
+ receivedAmount: 0,
|
|
|
+ uncollected: 0
|
|
|
+ };
|
|
|
}
|
|
|
+ });
|
|
|
},
|
|
|
- created() {
|
|
|
- this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
|
|
|
- this.date = this.$moment().format('YYYY-MM');
|
|
|
- this.getData();
|
|
|
+ changeTime (v) {
|
|
|
+ this.mixins_query.date = v + '-01';
|
|
|
+ this.getData();
|
|
|
}
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
|
|
|
+ this.date = this.$moment().format('YYYY-MM');
|
|
|
+ this.getData();
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|