<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="traditionName" label="传统模式污染负荷总量" align="center" />
            <el-table-column prop="postConstruction" label="海绵建设后污染负荷总量" align="center" />
            <el-table-column prop="annualRate" label="年污染负荷削减率" align="center" />
            <el-table-column prop="totalAnnualLoad" label="面源污染控制率" align="center" />
        </el-table>
    </div>
</template>
<script>
import { pollutionData } from '@/services';
import VBar1 from './VBar1';
export default {
    name: 'pollution',
    components: {
        VBar1
    },
    data() {
        return {
            isFlag: false,
            loading: false,
            tableData: [],
            data: {
                title: '面源污染控制率',
                xData: [],
                data: []
            }
        }
    },
    methods: {
        async getData() {
            this.loading = true;
            let res = await pollutionData();
            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.totalAnnualLoad))
                    })
                    this.data = {
                        xData: _xData,
                        data: _data
                    }
                    this.isFlag = true

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