statistics.vue

<style lang="less" scoped>
    #statistics{
        background:#f2f2f2;
        height:100%;
        display: flex;
        flex-direction: column;
        .Content{
            height:100%;
            // height:1px;
            // flex-grow: 1;
            // overflow: auto;
            // -webkit-overflow-scrolling: touch;
        }
        .Content>.double{
            display:flex;
            >.card{
                flex-grow:1;
                width:50%;
            }
        }
        .card{
            border-radius: 6px;
            background:#fff;
            box-shadow: 1px 1px 10px -1px #888;
            overflow: hidden;
            margin:6px;
            position:relative;
            .imgBC{
                position:absolute;
                top:32px;
            }
            img{
                max-height: 80%;
                left: 50%;
                transform: translate(-50%,0);
            }
            >.head{
                background: linear-gradient(90deg,#708bf6, #2d8cf0, #00B2EE);
                padding:5px 0;
                color:#fff;
                text-align: center;
            }
            >.foot{
                display:flex;
                font-size:10px;
                >div{
                    flex-grow:1;
                    width:50%;
                    margin:4px 0;
                    text-align: center;
                    >p{
                        margin:2px 0;
                        &:last-child{
                            color:#009BDE;
                        }
                    }
                }
            }
        }
    }
</style>
<template>
    <div id="statistics">
        <searchComponent :search='search' />
        <div class="Content">
            <div class='double'>
                <div class="card">
                    <div class="head">月总订单金额同比率</div>
                    <div  ref='chart1' style="width:100%;height:150px;"/>
                </div>
                <div class="card">
                    <div class="head">月总订单金额环比率</div>
                    <div  ref='chart2' style="width:100%;height:150px;"/>
                </div>
            </div>

            <div class="card">
                <div class="head">销售排行</div>
                <div ref='chart3' :style="{width:'100%',height:'180px',opacity:chartData.set3.length>0?'1':'0'}" />
                <img v-if="chartData.set3.length==0" src="@/assets/noData.jpg" class="imgBC" />
                <div class="foot">
                    <div style="border-right:1px solid #009BDE;">
                        <p>销售笔数</p>
                        <p >{{chartData.set4.iSellCount}}</p>
                    </div>
                    <div>
                        <p>销售额</p>
                        <p>￥{{chartData.set4.nSellAmount}}万</p>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="head">产品颜色销售排行</div>
                <div ref='chart5' :style="{width:'100%',height:'230px',opacity:chartData.set5.length>0?'1':'0'}" />
                <img v-if="chartData.set5.length==0" src="@/assets/noData.jpg" class="imgBC" />
            </div>
            <div class="card">
                <div class="head">产品销售排行</div>
                <div ref='chart6' :style="{width:'100%',height:'230px',opacity:chartData.set6.length>0?'1':'0'}" />
                <img v-if="chartData.set6.length==0" src="@/assets/noData.jpg" class="imgBC" />
            </div>
        </div>
        
    </div>
</template>
<script>
import Util from '@/libs/util.js'
import searchComponent from '@/components/search'
import { Confirm } from 'vux'
import { clearTimeout, setTimeout } from 'timers';
import { toUnicode } from 'punycode';
import echarts from 'echarts';

export default {
    name:"statistics",
    components:{searchComponent},
    data(){
        return{
            search:{
                dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
                dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
            },
            iProjectId:5599,
            chartData:{
                set3:[],
                set4:{
                    iSellCount:0,
                    nSellAmount:0,
                },
                set5:[],
                set6:[],
            },
            chart1:null,
            chart2:null,
            chart3:null,
            chart5:null,
            chart6:null,
        }
    },
    created(){
        window.s=this
    },
    activated(){
        setTimeout(()=>{
            this.chart1.resize()
            this.chart2.resize()
            this.resize(this.chart3,1.15)
            this.resize(this.chart5,1.35)
            this.resize(this.chart6,1.35)
        })
    },
    mounted(){
        window.h=this

        this.createChart('chart1')
        this.createChart('chart2')
        this.createChart('chart3')
        this.createChart('chart5','set5',true)
        this.createChart('chart6','set6',true)
        window.addEventListener('resize',()=>{
            setTimeout(()=>{
                this.chart1.resize()
                this.chart2.resize()
                this.resize(this.chart3,1.15)
                this.resize(this.chart5,1.35)
                this.resize(this.chart6,1.35)
            })
        })

        this.iProjectId= this.$route.params.iProjectId;
        this.$store.dispatch('setIproject',this.iProjectId);
        this.searchData();
        
        this.global.$off('searchData');
        this.global.$on('searchData',()=>{
            this.searchData()
        })
    },
    methods:{
        createChart(name,kield,isLinstener){
            var myChart=this.$echarts.init(this.$refs[name])
            if(isLinstener){
                let time=0
                myChart.getZr().on('mousedown',param=>{
                    const pointInPixel = [param.offsetX, param.offsetY]
                    if (myChart.containPixel('grid', pointInPixel)) {
                        let index = myChart.convertFromPixel({ seriesIndex: 0 }, [param.offsetX, param.offsetY])[0]
                        time=setTimeout(()=>{
                            var data=this.chartData[kield]
                            var options=myChart.getOption()
                            options.tooltip[0].show=false
                            myChart.setOption(options)
                            this.$vux.confirm.show({
                                title:"提示",
                                content:"是否查看详情",
                                onConfirm:()=>{
                                    this.$store.dispatch('setChartHearData',data[index]).then(()=>{
                                        this.$router.push({name:"chartMmcolorsaleDetail"});
                                    })
                                    options.tooltip[0].show=true
                                    myChart.setOption(options)
                                },
                                onCancel(){
                                    options.tooltip[0].show=true
                                    myChart.setOption(options)
                                }
                            })
                        },500)
                    }
                })
                myChart.getZr().on('mousemove',()=>{
                    clearTimeout(time)
                })
                myChart.getZr().on('mouseup',()=>{
                    clearTimeout(time)
                })
            };
            this[name]=myChart
        },
        resize(chart,rate){
            var options=chart.getOption()
            if(!options)return;
            options.dataZoom[0].end=options.dataZoom[0].start+(window.innerWidth*rate)/options.xAxis[0].data.length
            chart.setOption(options)
            chart.resize()
        },

        async searchData(){//搜索数据
            await this.chart1Data()
            await this.chart2Data()
            this.showValue()
        },
        async chart1Data(){
            var value =await this.request('sellinfo',{
                params:{
                    dStartDate:this.search.dBeginDate,
                    dEndDate:this.search.dEndDate
                }
            },true,{iProjectId:this.iProjectId})
            Object.assign(this.chartData,{
                nOrderSameRatio:Math.round((value.set1&&value.set1[0]&&value.set1[0].nOrderSameRatio||0)*100)/100,
                nOrderRingRatio:Math.round((value.set2&&value.set2[0]&&value.set2[0].nOrderRingRatio||0)*100)/100,
                set4:{
                    iSellCount:value.set4&&value.set4[0]&&value.set4[0].iSellCount||0,
                    nSellAmount:Math.round((value.set4&&value.set4[0]&&value.set4[0].nSellAmount||0)/100)/100
                }
            })
            console.log()
            this.chartData.set3=typeof value.set3=='object'&&value.set3.length>0&&value.set3.map(v=>{
                v.value=Math.round(v.nAmount/100)/100
                return v
            })||[]
        },
        async chart2Data(){
            var value=await this.request('getMmcolorsaletop',{
                params:this.search
            },true,{iProjectId:this.iProjectId})

            this.chartData.set5=typeof value=='object'&&value.length>0&&value||[]
            this.chartData.set5.forEach(v=>v.type='mmcolorsaletop')

            var value=await this.request('getMmsaletop',{
                params:this.search
            },true,{iProjectId:this.iProjectId})

            this.chartData.set6=typeof value=='object'&&value.length>0&&value||[]
            this.chartData.set6.forEach(v=>v.type='mmsaletop')
        },
        showValue(){
            this.drawRing({
                e:this.chart1,
                value:this.chartData.nOrderSameRatio
            })
            this.drawRing({
                e:this.chart2,
                value:this.chartData.nOrderRingRatio
            })
            this.drawLing({
                e:this.chart3,
                value:this.chartData.set3
            })
            this.drawLing2({
                e:this.chart5,
                value:this.chartData.set5
            })
            this.drawLing2({
                e:this.chart6,
                value:this.chartData.set6
            })
        },
        drawRing(data){//仪表盘
            data.e.setOption({
                tooltip : {
                    show:false,
                },
                series: [
                    {
                        type: 'gauge',
                        data: [{value: data.value, name: '比例'}],
                        radius:"90%",
                        min:-100,
                        max:100,
                        title:{
                            fontSize:10
                        },
                        detail:{
                            fontSize:11,
                            formatter:'{value}%',
                            padding:[50,0,0,0],
                        },
                        axisLine:{
                            show:false,
                            lineStyle:{
                                color:[[0.5,'red'],[0.75,'#1CB712'],[0.90,'#156F8E'],[1,'#152989']],
                                width:15
                            }
                        },
                        splitLine:{
                            length:15
                        },
                        axisLabel:{
                            fontSize:9,
                            distance:1,
                        },
                        itemStyle:{
                            opacity:0.3,
                        },
                    }
                ]
            })
        },
        drawLing(data){//折线
            data.e.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#111'
                        }
                    },
                    formatter:val=>{
                        return data.value[val[0].dataIndex].nAmount
                    }
                },
                toolbox: {
                    feature: {
                        restore: {show: true},
                    },
                },
                grid: {
                    top:30,
                    height:130,
                    right:10,
                },
                xAxis: {
                    type:"category",
                    data:data.value.map(v=>v.sYearMonth),
                    axisPointer:{
                        type:"shadow"
                    },
                    axisTick:{
                        alignWithLabel: true
                    },
                    axisLabel: {
                        interval:0 
                    },
                    minInterval:10,
                },
                yAxis: {
                    type: 'value',
                    name:"金额(万)",
                    offset:-10,
                },
                dataZoom: [{
                    type: 'inside',
                    xAxisIndex: 0,
                    show: false, //flase直接隐藏图形
                    filterMode: 'empty',
                    start: 0,//滚动条的起始位置
                    end: (window.innerWidth*1.15)/data.value.length //滚动条的截止位置（按比例分割你的柱状图x轴长度）
                }],
                series: [
                    {
                        id: 'a',
                        type: 'line',
                        smooth: true,
                        symbolSize: 10,
                        data: data.value.map(v=>v.value),
                        label:{
                            show:true,
                            formatter:val=>{
                                return `${val.data}万`
                            }
                        },
                        itemStyle:{
                            normal:{
                                color:'#708bf6'
                            }
                        }
                    }
                ]
            })
        },
        drawLing2(data){
            data.e.setOption({
                color:['#5cadff','#1c2438'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#111'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        // dataView: {show: true, readOnly: false},
                        // magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        // saveAsImage: {show: true}
                    },
                },
                grid: {
                    left: '2%',   // 与容器左侧的距离
                    right: '2%', // 与容器右侧的距离
                    height:160,
                    containLabel: true
                },
                legend: {
                    data:['金额','数量'],
                    x: 'left'
                },
                xAxis: [{
                    type: 'category',
                    data: data.value.map(v=>`${v.sMaterialNo}\n${v.sColorNo || ''}\n${v.sUnit || ''}`),
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        interval:0 
                    },
                }],
                yAxis: [
                    {
                        type: 'value',
                        name: '金额',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        scale:true,
                        axisLine:{
                            lineStyle:{
                                color:'#5CADFF',
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '数量',
                        scale:true,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name:'金额',
                        type:'bar',
                        data:data.value.map(v=>v.nAmount),
                        barWidth:32,
                        color:new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [{
                                offset: 0,
                                color: '#708bf6'
                            }, {
                                offset: 1,
                                color: '#00B2EE'
                        }])
                    },
                    {
                        name:'数量',
                        type:'line',
                        yAxisIndex: 1,
                        data:data.value.map(v=>v.nQty),
                        itemStyle:{
                            normal:{
                                color:'#708bf6'
                            }
                        }
                    }
                ],
                dataZoom: [{
                    type: 'inside',
                    show: true, //flase直接隐藏图形
                    xAxisIndex: [0],
                    left: '9%', //滚动条靠左侧的百分比
                    start: 0,//滚动条的起始位置
                    end: (window.innerWidth*1.35)/data.value.length //滚动条的截止位置（按比例分割你的柱状图x轴长度）
                }],
            })
        }
    },
}
</script>