|
@@ -1,166 +1,125 @@
|
|
|
<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"
|
|
|
- v-model="date"
|
|
|
- type="year"
|
|
|
- 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>
|
|
|
- </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"
|
|
|
+ v-model="date"
|
|
|
+ type="year"
|
|
|
+ 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
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ v-for="(item, index) in $publicArray.chargeType()"
|
|
|
+ :key="index"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="model-content">
|
|
|
+ <zz-echart :option="clientOptions" class="chart"></zz-echart>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <no-permission v-else tipsText="实收分析"></no-permission>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { discountedChart } from '../indexOptionChart';
|
|
|
import permissionComponent from '../permissionComponent';
|
|
|
let dataArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
|
|
-let dataDay = [
|
|
|
- '1月',
|
|
|
- '2月',
|
|
|
- '3月',
|
|
|
- '4月',
|
|
|
- '5月',
|
|
|
- '6月',
|
|
|
- '7月',
|
|
|
- '8月',
|
|
|
- '9月',
|
|
|
- '10月',
|
|
|
- '11月',
|
|
|
- '12月',
|
|
|
-];
|
|
|
+let dataDay = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
|
|
export default {
|
|
|
- mixins: [permissionComponent],
|
|
|
- data () {
|
|
|
- return {
|
|
|
- defaultModel: {
|
|
|
- permissUrl: '16',
|
|
|
- titleName: '告警管理'
|
|
|
- },
|
|
|
- clientOptions: discountedChart('(元)', dataDay, dataArr),
|
|
|
- mixins_query: {
|
|
|
- communityId: '',
|
|
|
- year: '',
|
|
|
- chargeType: ''
|
|
|
- },
|
|
|
- date: '',
|
|
|
- amountType: [
|
|
|
- {
|
|
|
- value: 1,
|
|
|
- name: '物业费'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 2,
|
|
|
- name: '水费'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 3,
|
|
|
- name: '电费'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 4,
|
|
|
- name: '车位费'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 6,
|
|
|
- name: '卫生费'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 7,
|
|
|
- name: '其他费用'
|
|
|
- }
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- created () {
|
|
|
-
|
|
|
- this.mixins_query.year = this.$moment().format('YYYY');
|
|
|
- this.date = this.$moment().format('YYYY');
|
|
|
- this.getData();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getData () {
|
|
|
- this.$http.get('/sc-charge/charge/report/months/total', this.mixins_query).then(({ status, data, msg }) => {
|
|
|
- if (status == 0) {
|
|
|
- if (data != null) {
|
|
|
- let dateTimes = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
|
|
- let dateRes = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
|
|
- dateRes[0] = data.january == null ? 0 : data.january;
|
|
|
- dateRes[1] = data.february == null ? 0 : data.february;
|
|
|
- dateRes[2] = data.march == null ? 0 : data.march;
|
|
|
- dateRes[3] = data.april == null ? 0 : data.april;
|
|
|
- dateRes[4] = data.may == null ? 0 : data.may;
|
|
|
- dateRes[5] = data.june == null ? 0 : data.june;
|
|
|
- dateRes[6] = data.july == null ? 0 : data.july;
|
|
|
- dateRes[7] = data.august == null ? 0 : data.august;
|
|
|
- dateRes[8] = data.september == null ? 0 : data.september;
|
|
|
- dateRes[9] = data.october == null ? 0 : data.october;
|
|
|
- dateRes[10] = data.november == null ? 0 : data.november;
|
|
|
- dateRes[11] = data.december == null ? 0 : data.december;
|
|
|
- this.clientOptions = discountedChart('(元)', dateTimes, dateRes);
|
|
|
- } else {
|
|
|
- let dateTimes = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
|
|
- let dateRes = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
|
|
- this.clientOptions = discountedChart('(元)', dateTimes, dateRes);
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- // if (status == 0) {
|
|
|
- // let dateTime = [];
|
|
|
- // // let dateTimes = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
|
|
|
- // let dateTimes = [];
|
|
|
- // let dateRes = [];
|
|
|
- // for (let i = 0; i < data.length; i++) {
|
|
|
- // dateTime.push(data[i].months)
|
|
|
- // dateRes.push(data[i].totalAmount)
|
|
|
- // }
|
|
|
- // for (let j = 0; j < dateTime.length; j++) {
|
|
|
- // dateTimes.push(dateTime[j] + '月')
|
|
|
- // }
|
|
|
- // this.clientOptions = discountedChart('(元)', dateTimes, dateRes);
|
|
|
- // }
|
|
|
- })
|
|
|
- .catch((err) => { });
|
|
|
+ mixins: [permissionComponent],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ defaultModel: {
|
|
|
+ permissUrl: '16',
|
|
|
+ titleName: '告警管理'
|
|
|
+ },
|
|
|
+ clientOptions: discountedChart('(元)', dataDay, dataArr),
|
|
|
+ mixins_query: {
|
|
|
+ communityId: '',
|
|
|
+ year: '',
|
|
|
+ chargeType: ''
|
|
|
+ },
|
|
|
+ date: ''
|
|
|
+ };
|
|
|
},
|
|
|
- changeTime (v) {
|
|
|
- this.mixins_query.year = v;
|
|
|
- this.getData();
|
|
|
+ created() {
|
|
|
+ this.mixins_query.year = this.$moment().format('YYYY');
|
|
|
+ this.date = this.$moment().format('YYYY');
|
|
|
+ this.getData();
|
|
|
},
|
|
|
- }
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ this.$http
|
|
|
+ .get('/sc-charge/charge/report/months/total', this.mixins_query)
|
|
|
+ .then(({ status, data, msg }) => {
|
|
|
+ if (status == 0) {
|
|
|
+ if (data != null) {
|
|
|
+ let dateTimes = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
|
|
+ let dateRes = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
|
|
+ dateRes[0] = data.january == null ? 0 : data.january;
|
|
|
+ dateRes[1] = data.february == null ? 0 : data.february;
|
|
|
+ dateRes[2] = data.march == null ? 0 : data.march;
|
|
|
+ dateRes[3] = data.april == null ? 0 : data.april;
|
|
|
+ dateRes[4] = data.may == null ? 0 : data.may;
|
|
|
+ dateRes[5] = data.june == null ? 0 : data.june;
|
|
|
+ dateRes[6] = data.july == null ? 0 : data.july;
|
|
|
+ dateRes[7] = data.august == null ? 0 : data.august;
|
|
|
+ dateRes[8] = data.september == null ? 0 : data.september;
|
|
|
+ dateRes[9] = data.october == null ? 0 : data.october;
|
|
|
+ dateRes[10] = data.november == null ? 0 : data.november;
|
|
|
+ dateRes[11] = data.december == null ? 0 : data.december;
|
|
|
+ this.clientOptions = discountedChart('(元)', dateTimes, dateRes);
|
|
|
+ } else {
|
|
|
+ let dateTimes = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
|
|
+ let dateRes = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
|
|
+ this.clientOptions = discountedChart('(元)', dateTimes, dateRes);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // if (status == 0) {
|
|
|
+ // let dateTime = [];
|
|
|
+ // // let dateTimes = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
|
|
|
+ // let dateTimes = [];
|
|
|
+ // let dateRes = [];
|
|
|
+ // for (let i = 0; i < data.length; i++) {
|
|
|
+ // dateTime.push(data[i].months)
|
|
|
+ // dateRes.push(data[i].totalAmount)
|
|
|
+ // }
|
|
|
+ // for (let j = 0; j < dateTime.length; j++) {
|
|
|
+ // dateTimes.push(dateTime[j] + '月')
|
|
|
+ // }
|
|
|
+ // this.clientOptions = discountedChart('(元)', dateTimes, dateRes);
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ .catch((err) => {});
|
|
|
+ },
|
|
|
+ changeTime(v) {
|
|
|
+ this.mixins_query.year = v;
|
|
|
+ this.getData();
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
@import '../style.scss';
|
|
|
+
|
|
|
+.model-title .model-title-right .saveColumn-select:not(:first-child) {
|
|
|
+ margin-left: rem(10);
|
|
|
+}
|
|
|
</style>
|