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

<template>
    <div class="modelBlock">
        <div class="model-title">
            <div class="model-title-text">{{ labeText }}</div>
            <div class="model-title-right">
                <el-date-picker
                    value-format="yyyy"
                    v-model="year"
                    type="year"
                    placeholder="选择年"
                    class="saveColumn-select"
                    @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 { columnOptionsChart } from './indexOptionChart';
let dataArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
import allcommunit from './allcommunit';
export default {
    mixins: [allcommunit],
    props: {
        labeText: {
            type: String,
            default: '年度水费支出'
        },
        type: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            mixins_query: {
                communityId: '',
                year: '',
                type: this.type
            },
            year: '',
            clientOptions: columnOptionsChart('(元)', [], [{ data: dataArr, name: this.labeText }], [], 10)
        };
    },
    methods: {
        getData() {
            this.$http.get('/sc-charge/charge/report/sum/shared/meter/amount', this.mixins_query).then(({ data, msg, status }) => {
                if (status == 0 && !!data.length) {
                    let timeDay = [],
                        datas = [];
                    data.map((item) => {
                        timeDay.push(item.month);
                        datas.push(item.volume);
                    });
                    this.clientOptions = columnOptionsChart('(元)', timeDay, [{ data: datas, name: this.labeText }], [], 10);
                } else {
                    this.clientOptions = columnOptionsChart('(元)', [], [{ data: dataArr, name: this.labeText }], [], 10);
                }
            });
        },
        changeTime(v) {
            this.mixins_query.year = v;
            this.getData();
        }
    },
    created() {
        this.year = this.$moment().format('YYYY');
        this.mixins_query.year = this.$moment().format('YYYY');
    }
};
</script>
<style scoped lang="scss">
@import './style.scss';
</style>