index.vue

<style lang="less">
    @import url('../../../../styles/common.less');
    #shopVersionFormEmpAna{
        min-height:100%;
        display:flex;
        flex-direction: column;
        background: #DCE9FE;
        .HEADER{

        }
        .CONTENT{
            height:100%;
            // height:1px;
            // flex-grow: 1;
            // overflow-y: scroll;
            // -webkit-overflow-scrolling: touch;
            .iCard{
                height:260px;
                >p{
                    margin:0;
                    height:30px;
                    line-height: 30px;
                    background: linear-gradient(90deg,#708bf6, #2d8cf0, #00B2EE);
                    color: #fff;
                    text-align: center;
                }
            }
            .iCard:last-child{
                margin-bottom:8px;
            }
        }
        .noData{
            height: calc(100% - 30px);
            width:100%;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
</style>

<template>
    <div id="shopVersionFormEmpAna">
        <div class="HEADER">
            <searchComponent placeholder="请输入单号／客户进行搜索" :search="search" :typeList="typeList"/>
        </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;"></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 { mapState } from 'vuex'
import searchComponent from '@/components/search'
import { employees } from './mixins/employees'
import { receivable } from './mixins/receivable'
import { orderAmount } from './mixins/orderAmount'

export default {
    name: 'shopVersionFormEmpAna',
    mixins: [employees,receivable,orderAmount],
    data () {
        return {
            search:{
                dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
                dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd')
            },
            typeList:{time:true},
            direction:'vertical',
            tempChartData2:[],
            tempChartData3:[],
            title:''
        }
    },
    computed:{
        ...mapState({
            iProjectId:state => state.app.iProjectId,
        })
    },
    async mounted(){
        this.$store.dispatch('saveUserId',this.$route.params.userId);
        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();
            }
        })

        window.d = this;
        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();
            // this.chart1.changeData(this.chartData1)

            if(this.chartData1.length > 0){
                await this.renderChart1();
            }
            if(this.chartData2.length > 0){
                await this.renderChart2();
            }
            if(this.chartData3.length > 0){
                await this.renderChart3();
            }
        });
    },
    async activated(){
        
    },
    methods:{
        renderResize() {
            // 判断横竖屏
            let width = document.documentElement.clientWidth;
            let height = document.documentElement.clientHeight;
            if(width > height) {
                this.direction = 'cross';
            }else{
                this.direction = 'vertical';
            }
        },
        async getData(){
            let data = Util.deepClone(this.search);
            let res = await this.request('getCipSalesinfo',{
                data:{
                    dStartDate:data.dBeginDate,
                    dEndDate:data.dEndDate
                },
                params:{},
            },'加载中',{iProjectId:this.iProjectId})
            this.chartData1 = res.set1;
            if(this.chartData1.length > 0){
                this.title = res.set1[0].sSalesName;

                this.tempChartData2 = Util.deepClone(res.set2);
                this.tempChartData3 = Util.deepClone(res.set3);

                this.chartData2 = res.set2.filter(x=>x.iSalesId == this.chartData1[0].iSalesId);
                this.chartData3 = res.set3.filter(x=>x.iSalesId == this.chartData1[0].iSalesId);
            }
        },
    },
    components:{
        searchComponent
    },
}
</script>