<template>
    <div v-loading="loading" element-loading-text="数据加载中">
        <VBar1 :data="data" style="width: 100%;"   max-height="700" v-if="isFlag"  />
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="year" label="年份" align="center" width="100" />
            <el-table-column prop="number" label="设施数量" align="center" />
            <el-table-column prop="maximum" label="最大调蓄容积" align="center" />
            <el-table-column prop="resources" label="雨水资源利用量" align="center" />
            <el-table-column prop="resourcesRate" label="雨水资源利用率" align="center" />
        </el-table>
    </div>
</template>
<script>
import { runoffrateData } from '@/services';
import VBar1 from './VBar1';
export default {
    name: 'runoffrate',
    components: {
        VBar1
    },
    data() {
        return {
            isFlag: false,
            loading: false,
            tableData: [],
            data: {
                yTitle: '利用率',
                title: '雨水资源利用率',
                xData: [],
                data: []
            }
        }
    },
    methods: {
        async getData() {
            this.loading = true;
            let res = await runoffrateData();
            this.loading = false;
            if (res.code === 200) {
                if (res.code === 200) {
                    let _xData = [];
                    let _data = [];
                    this.tableData = res.data;
                    res.data.length && res.data.map(item => {
                        _xData.push(item.year);
                        _data.push(parseFloat(item.resourcesRate))
                    })
                    this.data = {
                        xData: _xData,
                        data: _data
                    }
                }
                this.isFlag = true

            }
        }
    },
    mounted() {
        this.getData();
    }
}
</script>