empAna.vue

<style lang="less">
    @import url("../../../styles/common.less");
    #empAna{
        background:#dce9fe;
        >.CONTENT{
            .iCard{
                height:260px;
                >p{
                    margin:0;
                    height:30px;
                    line-height: 30px;
                    background: linear-gradient(90deg,#708bf6, #2d8cf0, #00B2EE);
                    color: #fff;
                    text-align: center;
                }
                &:last-child{
                    margin-bottom:8px;
                }
            }
        }
        .noData{
            height:calc(100% - 30px);
            width:100%;
            img{
                width:100%;
            }
        }
    }
</style>
<template>
    <div id="empAna">
        <div class="HEADER">
            <dateMonth @month="searchData" />
        </div>
        <div class="CONTENT">
            <div class="iCard" ref="chart1">
                <p>前十名员工（联动）</p>
                <canvas id="chart1" v-if="chartData1.length > 0" width="400" height="260" style="width:100%;height:240px; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas>
                <div class="noData" v-if="chartData1.length <= 0">
                    <img src="@/assets/noData.jpg" class="_img" alt="">
                </div>
            </div>
            <div class="iCard" ref="chart2">
                <p>{{title}}每月回款率</p>
                <canvas id="chart2" v-if="chartData2.length > 0" width="400" height="260" style="width:100%;height:240px;"></canvas>
                <div class="noData" v-if="chartData2.length <= 0">
                    <img src="@/assets/noData.jpg" class="_img" alt="">
                </div>
            </div>
            <div class="iCard" ref="chart3">
                <p>{{title}}按月统计订单金额</p>
                <canvas id="chart3" v-if="chartData3.length > 0" width="400" height="260" style="width:100%;height:240px;"></canvas>
                <div class="noData" v-if="chartData3.length <= 0">
                    <img src="@/assets/noData.jpg" class="_img" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Util from '@/libs/util.js'
import dateMonth from '@/components/dateMonth'
import { employees } from '@/view/shopVersion/form/empAna/mixins/employees'
import { receivable } from '@/view/shopVersion/form/empAna/mixins/receivable'
import { orderAmount } from '@/view/shopVersion/form/empAna/mixins/orderAmount'
import { setTimeout } from 'timers';
export default {
    name:"empAna",
    components:{dateMonth},
    mixins: [employees,receivable,orderAmount],
    data(){
        return{
            searchValue:{
                dBeginDate:null,
                dEndDate:null,
            },
            typeList:{time:true},
            direction:'vertical',
            tempChartData2:[],
            tempChartData3:[],
            title:"",
        }
    },
    async mounted(){
        window.em=this
        window.addEventListener("resize",()=>{
            setTimeout(async ()=>{
                this.renderResize();
                if(this.chartData1.length>0){
                    this.chart1.changeSize(this.$refs['chart1'].offsetWidth);
                    this.chart1.destroy();
                }
                if(this.chartData2.length > 0){
                    this.chart2.changeSize(this.$refs['chart2'].offsetWidth); // 清除
                    this.chart2.destroy();
                }
                if(this.chartData3.length > 0){
                    this.chart3.changeSize(this.$refs['chart3'].offsetWidth); // 清除
                    this.chart3.destroy();
                }

                if(this.chartData1.length > 0){
                    await this.renderChart1();
                }
                if(this.chartData2.length > 0){
                    await this.renderChart2();
                }
                if(this.chartData3.length > 0){
                    await this.renderChart3();
                }
            })
        })

        this.$nextTick(async ()=>{
            this.renderResize();
            // await this.getData();
            // if(this.chartData1.length>0){
            //     await this.renderChart1()
            // }
            // if(this.chartData2.length>0){
            //     await this.renderChart2()
            // }
            // if(this.chartData3.length>0){
            //     await this.renderChart3()
            // }
        })

        // this.global.$off("searchData");
        // this.global.$on("searchData",async ()=>{
        //     this.chartData1=[]
        //     this.chartData2=[]
        //     this.chartData3=[]
            
        //     if(this.chartData1.length > 0){
        //         await this.chart1.destroy();
        //     }
        //     if(this.chartData2.length > 0){
        //         await this.chart2.destroy();
        //     }
        //     if(this.chartData3.length > 0){
        //         await this.chart3.destroy();
        //     }
        //     await this.getData();
        //     if(this.chartData1.length > 0){
        //         await this.renderChart1();
        //     }
        //     if(this.chartData2.length > 0){
        //         await this.renderChart2();
        //     }
        //     if(this.chartData3.length > 0){
        //         await this.renderChart3();
        //     }

        // });
    },
    methods:{
        searchData(start,end){
            this.searchValue.dBeginDate=start
            this.searchValue.dEndDate=end
            this.$nextTick(async ()=>{
                this.chartData1=[]
                this.chartData2=[]
                this.chartData3=[]
                
                if(this.chartData1.length > 0){
                    await this.chart1.destroy();
                }
                if(this.chartData2.length > 0){
                    await this.chart2.destroy();
                }
                if(this.chartData3.length > 0){
                    await this.chart3.destroy();
                }

                await this.getData();
                if(this.chartData1.length > 0){
                    await this.renderChart1();
                }
                if(this.chartData2.length > 0){
                    await this.renderChart2();
                }
                if(this.chartData3.length > 0){
                    await this.renderChart3();
                }
            })
        },
        renderResize(){
            let width = document.documentElement.clientWidth;
            let height = document.documentElement.clientHeight;
            if(width > height) {
                this.direction = 'cross';
            }else{
                this.direction = 'vertical';
            }
        },
        async getData(){
            var res=await this.request("getTiipSalesinfo",{
                data:{
                    dStartDate:this.searchValue.dBeginDate,
                    dEndDate:this.searchValue.dEndDate,
                }
            },"加载中",{})
            if(res.set1.length>0){
                this.title=res.set1[0].sSalesName
                this.chartData1=res.set1.map(v=>{
                    return{
                        sSalesName:v.sSalesName,
                        nAmount:v.nAmount,
                        iSalesId:v.sSalesName,
                    }
                })
            }
            if(res.set2.length>0){
                this.tempChartData2 = res.set2.map(v=>{
                    return{
                        nPaydAmount:v.nPaydAmount,
                        sMonth:v.sMonth,
                        iSalesId:v.sSalesName,
                    }
                })
                this.chartData2=this.tempChartData2.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId)
            }
            if(res.set3.length>0){
                this.tempChartData3 = res.set3.map(v=>{
                    return{
                        iSalesId:v.sSalesName,
                        sMonth:v.sMonth,
                        nAmount:v.nAmount,
                    }
                })
                this.chartData3=this.tempChartData3.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId)
            }
        },
    },
}
</script>