SmartCommunity/operationSupport/src/views/newWorkBench/components/householdGender.vue

<template>
    <div class="modelBlock">
        <div class="model-title">
            <div class="model-title-text">住户性别占比</div>
            <el-select v-model="mixins_query.communityId" placeholder="所有社区" clearable class="saveColumn-select" @change="getData">
                <el-option v-for="(item, index) in communityList" :label="item.communityName" :value="item.id" :key="index"></el-option>
            </el-select>
        </div>
        <div class="model-content">
            <zz-echart :option="clientOptions" class="chart"></zz-echart>
            <div class="totals">
                <span>{{ total }}</span>
                <span class="numbers">总人数</span>
            </div>
        </div>
    </div>
</template>
<script>
import { ringType } from './indexOptionChart';
export default {
    data() {
        return {
            mixins_query: {
                communityId: ''
            },
            total: 0,
            clientOptions: ringType(
                [],
                [
                    { value: 0, name: '男' },
                    { value: 0, name: '女' }
                ],
                {},
                { type: '%', total: 0 }
            )
        };
    },
    computed: {
        communityList() {
            return this.$store.getters['getAreaSelect'];
        }
    },
    methods: {
        getData() {
            this.$http.get('/sc-community/statisticUserGender', this.mixins_query).then(({ data, msg, status }) => {
                if (status == 0 && !!data.datas) {
                    this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '%', total: data.total });
                } else {
                    this.clientOptions = ringType(
                        [],
                        [
                            { value: 0, name: '男' },
                            { value: 0, name: '女' }
                        ],
                        {},
                        { type: '%', total: 0 }
                    );
                }
            });
        },
        eachartObj(data) {
            this.total = data.total;
            let typeName = {
                0: '其他',
                1: '男',
                2: '女'
            };
            let newData = [];
            for (let a in data.datas) {
                newData.push({
                    value: data.datas[a],
                    name: typeName[a]
                });
            }
            return newData;
        }
    },
    created() {
        this.getData();
    }
};
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>