<template>
    <div class="utilizationrate-page">
        <div class="item">
            <div class="title">
                <!-- <img src="@/assets/images/bg_icon_01.png" alt=""> -->
                <p>数据分析</p>
            </div>
            <div class="container">
                <VBarLine :data="barData" style="height: 400px;" />
            </div>
        </div>
        <div class="item">
            <div class="title">
                <!-- <img src="@/assets/images/bg_icon_01.png" alt=""> -->
                <p>污水资源利用走向</p>
            </div>
            <div class="container">22</div>
        </div>
    </div>
</template>
<script>
    import { utilizationrateData } from '@/services';
    import VBarLine from './VBarLine';
    export default {
        name: 'Utilizationrate',
        components: {
            VBarLine
        },
        data() {
            return {
                barData: [
                    []
                ]
            }
        },
        methods: {
            // 获取污水资源利用率
            async getData() {
                let res = await utilizationrateData();
                if (res.code === 200) {
                    let len = res.data.length;
                    let list = Array(len).fill([]);
                    for (let i = 0; i < len; i++) {
                        list[i] = [
                            res.data[i].year,
                            res.data[i].totalAmount,
                            res.data[i].treatmentCapacity,
                            res.data[i].totalWastewater,
                            parseFloat(res.data[i].treatmentRate),
                        ]
                    }
                    this.barData = list;
                }
            }
        },
        mounted() {
            this.getData();
        }
    }
</script>
<style lang="less" scoped>
    .utilizationrate-page {
        display: flex;

        .item {
            flex: 1;

            .title {
                display: flex;
                align-items: center;
                font-size: 14px;
                margin-bottom: 10px;

                img {
                    margin-right: 10px;
                }
            }
        }
    }
</style>