SmartCommunity/commandCenter/src/views/financialAnalysis/smallModuleIndex/incomeMode.vue

<template>
    <div class="modelBlock">
        <div class="model-title">
            <div class="model-title-text">收入方式</div>
            <div class="model-title-right">
                <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>
                <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>
            </div>
        </div>
        <div class="model-content">
            <zz-echart :option="clientOptions" class="chart"></zz-echart>
        </div>
    </div>
</template>
<script>
import { GradualChange, ringType } from './indexOptionChart';
const colors = [
    GradualChange('#22D8FF', '#00B2FF'),
    GradualChange('#F0646C', '#F4994E'),
    GradualChange('#5EEDCC ', '#24C3F1'),
    GradualChange('#7178FF', '#D2A4FF'),
    GradualChange('#884DD2', '#DF63CC')
];
import allcommunit from './allcommunit';
export default {
    mixins: [allcommunit],
    data() {
        return {
            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: '%', total: 0 },
                30
            )
        };
    },
    methods: {
        getData() {
            this.$http.get('/sc-community/statisticIncomeMethod', this.mixins_query).then(({ data, msg, status }) => {
                if (status == 0 &&  !!data.datas && Object.keys(data.datas).length !==0) {
                    this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: '%', total: data.total }, 30);
                } else {
                    this.clientOptions = ringType(
                        colors,
                        [
                            { value: 0, name: '微信' },
                            { value: 0, name: '支付宝' },
                            { value: 0, name: '现金' },
                            { value: 0, name: '预存' },
                            { value: 0, name: '其他' }
                        ],
                        {},
                        { type: '%', total: 0 },
                        30
                    );
                }
            });
        },
        changeTime(v) {
            this.mixins_query.date = v + '-01';
            this.getData();
        },
        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: 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');
    }
};
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>