|
|
@@ -1,162 +1,178 @@
|
|
|
<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"
|
|
|
- @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">
|
|
|
- <zz-echart
|
|
|
- :option="clientOptions"
|
|
|
- class="chart"
|
|
|
- ></zz-echart>
|
|
|
- <div class="totals">
|
|
|
- <span
|
|
|
- style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
|
|
|
- :title="total + '元'"
|
|
|
- >{{ total }}元</span>
|
|
|
- <span
|
|
|
- class="numbers"
|
|
|
- style="white-space: nowrap;"
|
|
|
- >总收入</span>
|
|
|
- </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"
|
|
|
+ @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">
|
|
|
+ <zz-echart :option="clientOptions" class="chart"></zz-echart>
|
|
|
+ <div class="totals">
|
|
|
+ <span
|
|
|
+ style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
|
|
|
+ :title="unitConvert(total).num + unitConvert(total).unit"
|
|
|
+ >{{ unitConvert(total).num }}{{ unitConvert(total).unit }}</span
|
|
|
+ >
|
|
|
+ <span class="numbers" style="white-space: nowrap">总收入</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <no-permission v-else tipsText="收入方式占比"></no-permission>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { GradualChange, ringType } from '../indexOptionChart';
|
|
|
import permissionComponent from '../permissionComponent';
|
|
|
const colors = [
|
|
|
- GradualChange('#22D8FF', '#00B2FF'),
|
|
|
- GradualChange('#F0646C', '#F4994E'),
|
|
|
- GradualChange('#5EEDCC ', '#24C3F1'),
|
|
|
- GradualChange('#7178FF', '#D2A4FF'),
|
|
|
- GradualChange('#884DD2', '#DF63CC')
|
|
|
+ GradualChange('#22D8FF', '#00B2FF'),
|
|
|
+ GradualChange('#F0646C', '#F4994E'),
|
|
|
+ GradualChange('#5EEDCC ', '#24C3F1'),
|
|
|
+ GradualChange('#7178FF', '#D2A4FF'),
|
|
|
+ GradualChange('#884DD2', '#DF63CC')
|
|
|
];
|
|
|
export default {
|
|
|
- mixins: [permissionComponent],
|
|
|
- data () {
|
|
|
- return {
|
|
|
- defaultModel: {
|
|
|
- permissUrl: '14',
|
|
|
- titleName: '收费管理'
|
|
|
- },
|
|
|
- mixins_query: {
|
|
|
- communityId: '',
|
|
|
- date: '',
|
|
|
- chargeType: ''
|
|
|
- },
|
|
|
- date: '',
|
|
|
- total: 0,
|
|
|
- clientOptions: ringType(
|
|
|
- colors,
|
|
|
- [
|
|
|
- { value: 0, name: '微信' },
|
|
|
- { value: 0, name: '支付宝' },
|
|
|
- { value: 0, name: '现金' },
|
|
|
- { value: 0, name: '预存' },
|
|
|
- { value: 0, name: '其他' }
|
|
|
- ],
|
|
|
- {},
|
|
|
- { type: 'number', total: 0 }
|
|
|
- ),
|
|
|
- amountType: [
|
|
|
- {
|
|
|
- value: 1,
|
|
|
- name: '物业费'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 2,
|
|
|
- name: '水费'
|
|
|
+ mixins: [permissionComponent],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ defaultModel: {
|
|
|
+ permissUrl: '14',
|
|
|
+ titleName: '收费管理'
|
|
|
+ },
|
|
|
+ mixins_query: {
|
|
|
+ communityId: '',
|
|
|
+ date: '',
|
|
|
+ chargeType: ''
|
|
|
+ },
|
|
|
+ date: '',
|
|
|
+ total: 0,
|
|
|
+ clientOptions: ringType(
|
|
|
+ colors,
|
|
|
+ [
|
|
|
+ { value: 0, name: '微信' },
|
|
|
+ { value: 0, name: '支付宝' },
|
|
|
+ { value: 0, name: '现金' },
|
|
|
+ { value: 0, name: '预存' },
|
|
|
+ { value: 0, name: '其他' }
|
|
|
+ ],
|
|
|
+ {},
|
|
|
+ { type: 'number', total: 0 }
|
|
|
+ ),
|
|
|
+ amountType: [
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ name: '物业费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ name: '水费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 3,
|
|
|
+ name: '电费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 4,
|
|
|
+ name: '车位费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 6,
|
|
|
+ name: '卫生费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 7,
|
|
|
+ name: '其他费用'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ this.$http.get('/sc-community/statisticIncomeMethod', this.mixins_query).then(({ data, msg, status }) => {
|
|
|
+ debugger;
|
|
|
+ if (status == 0 && !!data.datas) {
|
|
|
+ this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: this.total });
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- {
|
|
|
- value: 3,
|
|
|
- name: '电费'
|
|
|
+ changeTime(v) {
|
|
|
+ this.mixins_query.date = v + '-01';
|
|
|
+ this.getData();
|
|
|
},
|
|
|
- {
|
|
|
- value: 4,
|
|
|
- name: '车位费'
|
|
|
+ unitConvert(num) {
|
|
|
+ var moneyUnits = ['元', '万元', '亿元', '万亿'];
|
|
|
+ var dividend = 10000;
|
|
|
+ var curentNum = num;
|
|
|
+ //转换数字
|
|
|
+ var curentUnit = moneyUnits[0];
|
|
|
+ //转换单位
|
|
|
+ for (var i = 0; i < 4; i++) {
|
|
|
+ curentUnit = moneyUnits[i];
|
|
|
+ if (this.strNumSize(curentNum) < 5) {
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ curentNum = curentNum / dividend;
|
|
|
+ }
|
|
|
+ var m = { num: '', unit: '' };
|
|
|
+ m.num = curentNum.toFixed(2);
|
|
|
+ m.unit = curentUnit;
|
|
|
+ return m;
|
|
|
},
|
|
|
- {
|
|
|
- value: 6,
|
|
|
- name: '卫生费'
|
|
|
+ strNumSize(tempNum) {
|
|
|
+ var stringNum = tempNum.toString();
|
|
|
+ var index = stringNum.indexOf('.');
|
|
|
+ var newNum = stringNum;
|
|
|
+ if (index != -1) {
|
|
|
+ newNum = stringNum.substring(0, index);
|
|
|
+ }
|
|
|
+ return newNum.length;
|
|
|
},
|
|
|
- {
|
|
|
- value: 7,
|
|
|
- name: '其他费用'
|
|
|
- }
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getData () {
|
|
|
- this.$http.get('/sc-community/statisticIncomeMethod', this.mixins_query).then(({ data, msg, status }) => {
|
|
|
- debugger
|
|
|
- if (status == 0 && !!data.datas) {
|
|
|
- this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: this.total });
|
|
|
+ eachartObj(data) {
|
|
|
+ this.total = data.total || 0;
|
|
|
+ let typeName = {
|
|
|
+ 1: '微信在线',
|
|
|
+ 2: '支付宝',
|
|
|
+ 3: '现金',
|
|
|
+ 4: '预存',
|
|
|
+ 5: '其他',
|
|
|
+ 6: '刷卡',
|
|
|
+ 7: '微信扫码'
|
|
|
+ };
|
|
|
+ let newData = [];
|
|
|
+ for (let a in data.datas) {
|
|
|
+ newData.push({
|
|
|
+ value: this.unitConvert(data.datas[a]).num,
|
|
|
+ name: typeName[a]
|
|
|
+ });
|
|
|
+ this.total = this.total + data.datas[a];
|
|
|
+ }
|
|
|
+ return newData;
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- changeTime (v) {
|
|
|
- this.mixins_query.date = v + '-01';
|
|
|
- this.getData();
|
|
|
},
|
|
|
- eachartObj (data) {
|
|
|
- this.total = data.total || 0;
|
|
|
- let typeName = {
|
|
|
- 7: '微信',
|
|
|
- 2: '支付宝',
|
|
|
- 3: '现金',
|
|
|
- 4: '预存',
|
|
|
- 5: '其他'
|
|
|
- };
|
|
|
- let newData = [];
|
|
|
- debugger
|
|
|
- for (let a in data.datas) {
|
|
|
- newData.push({
|
|
|
- value: data.datas[a],
|
|
|
- name: typeName[a]
|
|
|
- });
|
|
|
- this.total = this.total + data.datas[a];
|
|
|
- }
|
|
|
- return newData;
|
|
|
+ created() {
|
|
|
+ this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
|
|
|
+ this.date = this.$moment().format('YYYY-MM');
|
|
|
+ this.getData();
|
|
|
}
|
|
|
- },
|
|
|
- created () {
|
|
|
- this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
|
|
|
- this.date = this.$moment().format('YYYY-MM');
|
|
|
- this.getData();
|
|
|
- }
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
Shannon_mu