SmartCommunity/operationSupport/src/views/newWorkBench/components/complaintsSuggestions.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>
            <el-date-picker
                value-format="yyyyMM"
                v-model="mixins_query.date"
                type="month"
                placeholder="选择月"
                class="saveColumn-select"
                @change="getData"
            >
            </el-date-picker>
        </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 { GradualChange, ringType } from './indexOptionChart';
export default {
    data() {
        return {
            mixins_query: {
                communityId: '',
                date: ''
            },
            total: 0,
            clientOptions: ringType(
                [
                    GradualChange('#22D8FF', '#00B2FF'),
                    GradualChange('#F0646C', '#F4994E'),
                    GradualChange('#5EEDCC ', '#24C3F1'),
                    GradualChange('#7178FF', '#D2A4FF'),
                    GradualChange('#884DD2', '#DF63CC')
                ],
                [
                    { value: 0, name: '扰民投诉' },
                    { value: 0, name: '物业投诉' },
                    { value: 0, name: '公共卫生' },
                    { value: 0, name: '安全建议' },
                    { value: 0, name: '其他' }
                ]
            )
        };
    },
    computed: {
        communityList() {
            return this.$store.getters['getAreaSelect'];
        }
    },
    methods: {
        getData() {
            this.$http.get('/sc-community/statisticComplaint', this.mixins_query).then(({ data, msg, status }) => {
                if (status == 0) {
                    this.clientOptions = ringType(
                        [
                            GradualChange('#22D8FF', '#00B2FF'),
                            GradualChange('#F0646C', '#F4994E'),
                            GradualChange('#5EEDCC ', '#24C3F1'),
                            GradualChange('#7178FF', '#D2A4FF'),
                            GradualChange('#884DD2', '#DF63CC')
                        ],
                        this.eachartObj(data)
                    );
                }
            });
        },
        eachartObj(data) {
            this.total = data.total;
            let typeName = {
                1: '扰民投诉',
                2: '物业投诉',
                3: '公共卫生',
                4: '安全建议',
                5: '其他'
            };
            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>