<!--
 * @Author: liyingjing ll47991367@qq.com
 * @Date: 2023-06-15 14:34:21
 * @LastEditors: liyingjing ll47991367@qq.com
 * @LastEditTime: 2023-06-15 15:44:00
 * @FilePath: \projectMoment\src\views\assessment\components\overview\runoff.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="runoff-page" 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" />
            <el-table-column prop="runOff" label="降雨量(m³)" align="center" />
            <el-table-column prop="evaporationCapacity" label="蒸发量(m³)" align="center" />
            <el-table-column prop="infiltrationCapacity" label="入渗及蓄水量(m³)" align="center" />
            <el-table-column prop="columeOfRunoff" label="径流量(m³)" align="center" />
            <el-table-column prop="volumeOfRunoffRate" label="年径流总量控制率" align="center" />
        </el-table>
    </div>
</template>
<script>
import { runoffData } from '@/services';
import VBar1 from './VBar1';
export default {
    name: 'Runoff',
    components: {
        VBar1
    },
    data() {
        return {
            isFlag:false,
            loading: false,
            tableData: [],
            data: {
                
                xData: [],
                data: [],
               
            }
        }
    },
    methods: {
        async getData() {
            this.loading = true;
            let res = await runoffData();
            this.loading = false;
            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.volumeOfRunoffRate))
                })
                this.data = {
                    xData: _xData,
                    data: _data,
                    title:'年径流总量控制率',
                    yTitle: '控制率'
                }
                this.isFlag=true
            }
        }
    },
    mounted() {
        this.getData();
    }
}
</script>
<style lang="less">
.runoff-page {
    text-align: center;
}
</style>