Repayment.vue

<style lang="less">
    @import url("../../../styles/common.less");
    #repayment{
        .head{
            display:flex;
            >div{
                flex-grow:1;
                display: flex;
                flex-direction: column;
                align-items:center;
                color:#fff;
                >span{
                    margin-top:6px;
                }
            }
        }
        .noData{
            position:absolute;
            top:0;
            height: calc(100% - 30px);
            width:100%;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .DATA{
            width:100%;
            >tr:first-child{
                font-weight: bold;
                text-align: center;
                background:#f2f2f2;
            }
            >tr{
                >td{
                    padding:5px 3px;
                }
                >td:not(:first-child){
                    border-left:1px solid #ddd;
                }
                &:not(:last-child)>td{
                    border-bottom:1px solid #ddd;
                }
            }
            // >tr:nth-child(2n)>td{ background:#00C4FF;color:#fff; }
        }
    }
</style>
<template>
    <div id="repayment">
        <dateMonth @month="searchData"/>
        <div class="iCard">
            <div class="head">
                <div style="background:#3BA5EF">
                    <span>年度回款目标</span>
                    <span>{{number(value1["年度回款目标"])}}元</span>
                </div>
                <div style="background:#6480ED">
                    <span>年度回款金额</span>
                    <span>{{number(value1["年度回款金额"])}}元</span>
                </div>
                <div style="background:#3BA5EF">
                    <span>年度完成比</span>
                    <span>{{parent}}%</span>
                </div>
            </div>
            <div class="content" style="position:relative;">
                <div ref="chart" :style='{width:"100%",height:"240px",overflow:"hidden"}' />
                <div class="noData" v-if="value2.length <= 0">
                    <img src="@/assets/noData.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="iCard" style="margin-bottom:8px;">
            <div style="color: #fff;background: #009BDE;padding: 10px;display: flex;justify-content: space-between;">
                <span>{{new Date().getFullYear()}}年各客户回款达成率</span>
                <span>单位:(万元)</span>
            </div>
            <table class="DATA">
                <tr>
                    <td>序号</td>
                    <td>回款目标</td>
                    <td>回款金额</td>
                    <td>客户</td>
                </tr>
                <tr v-for="(v,k) in value3" :key="k">
                   <td>{{v.iIden}}</td>
                   <td>{{v['回款目标']}}</td>
                   <td>{{v["回款金额"]}}</td>
                   <td>{{v["客户"]}}</td> 
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
import Util from '@/libs/util.js'
import { Confirm } from 'vux'
import dateMonth from '@/components/dateMonth'
import { setTimeout } from 'timers';

export default {
    name:"repayment",
    components:{dateMonth},
    data(){
        return{
            value1:{},
            value2:[],
            option:{
                dataZoom: {
                    type: 'inside',
                    xAxisIndex: 0,
                    filterMode: 'empty'
                },
                tooltip:{
                    trigger: 'axis'
                },
                legend: {
                    data:['回款金额','回款目标'],
                    right:0,
                },
                grid:{
                    top:"13%",
                    left:"10",
                    bottom:"10",
                    right:10,
                    containLabel: true,
                },
                calculable : true,
            },
            chart:null,
            value3:[],
        }
    },
    mounted(){
        window.req=this

        window.addEventListener("resize",()=>{
            setTimeout(async ()=>{
                if(this.value2.length>0){
                    this.chart.resize()
                }
            })
        })
        this.$nextTick(async ()=>{
            this.chart=this.$echarts.init(this.$refs.chart)
        })
    },
    methods:{
        number(val){
            return (Math.round((val||0)*100)/100).toLocaleString()
        },
        async searchData(start,end){
            this.value2=[]
            this.value3=[]

            var value=await this.request("getTiipReceive",{
                data:{
                    dStartDate:start,
                    dEndDate:end
                }
            },"加载中",{})
            value.set1[0]&&(this.value1=value.set1[0])
            this.value2=value.set2||[]
            this.value3=value.set3||[]
            var isOver=0
            this.value2.forEach(v=>{
                if(Math.abs(v["回款金额"])>10000||Math.abs(v["回款目标"])>10000){
                    isOver=isOver<=1?1:isOver
                }
                if(Math.abs(v["回款金额"])>100000||Math.abs(v["回款目标"])>100000){
                    isOver=isOver<=2?2:isOver
                }
                if(Math.abs(v["回款金额"])>1000000||Math.abs(v["回款目标"])>1000000){
                    isOver=3
                }
            })

            this.chart.setOption(Object.assign({
                xAxis:{
                    type:'category',
                    data:this.value2.map((v,i)=>v["销售员"]),
                    axisLabel:{
                        interval:0,
                        rotate:-15,
                    },
                },
                yAxis :{
                    type : 'value',
                    boundaryGap: [0, 0.01],
                    name:isOver?`(${String(isOver).replace('2','十').replace('3','百')}万元)`:'',
                    axisLabel:{
                        formatter(v){
                            return isOver?Math.round(v/(isOver==1?100:(isOver==2?1000:10000)))/100:v;
                        }
                    },
                },
                series:[ {
                    name:'回款金额',
                    type:'bar',
                    data:this.value2.map(v=>v["回款金额"]),
                    itemStyle:{
                        color:"#1F12F7"
                    }
                },
                {
                    name:'回款目标',
                    type:'bar',
                    data:this.value2.map(v=>v["回款目标"]),
                    itemStyle:{
                        color:"#3BA5EF"
                    }
                } ]
            },this.option))
        },
    },
    computed:{
        parent(){
            return Math.round(this.value1["年度完成比"]*100)/100
        },
    },
}
</script>