|  | @@ -0,0 +1,292 @@
 | 
	
		
			
				|  |  | +$(document).ready(function() {
 | 
	
		
			
				|  |  | +    autoFlashHeight();
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    const expensesPieValues = [
 | 
	
		
			
				|  |  | +        {value: _.filter(expensesList, function (item) {
 | 
	
		
			
				|  |  | +            return !item.settle_code && item.yf_price < item.total_price;
 | 
	
		
			
				|  |  | +        }).length, name: '履行中'},
 | 
	
		
			
				|  |  | +        {value: _.filter(expensesList, function (item) {
 | 
	
		
			
				|  |  | +            return !item.settle_code && item.yf_price >= item.total_price;
 | 
	
		
			
				|  |  | +        }).length, name: '已完成'},
 | 
	
		
			
				|  |  | +        {value: _.filter(expensesList, function (item) {
 | 
	
		
			
				|  |  | +            return !!item.settle_code;
 | 
	
		
			
				|  |  | +        }).length, name: '已结算'}
 | 
	
		
			
				|  |  | +    ];
 | 
	
		
			
				|  |  | +    console.log(expensesPieValues);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    const expensesPieChart = echarts.init(document.getElementById('expensesPieChart'));
 | 
	
		
			
				|  |  | +    const expensesPieOption = {
 | 
	
		
			
				|  |  | +        color: ['#c7b8a1','#9ca8b8','#7b8b6f','#d8caaf'],
 | 
	
		
			
				|  |  | +        tooltip: {
 | 
	
		
			
				|  |  | +            trigger: 'item',
 | 
	
		
			
				|  |  | +            formatter: '{a} <br/>{b}: {c} ({d}%)'
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        legend: {
 | 
	
		
			
				|  |  | +            orient: 'horizontal',
 | 
	
		
			
				|  |  | +            left: 0,
 | 
	
		
			
				|  |  | +            data: ['履行中', '已完成', '已结算']
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        series: [
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +                name: '合同',
 | 
	
		
			
				|  |  | +                type: 'pie',
 | 
	
		
			
				|  |  | +                radius: ['50%', '70%'],
 | 
	
		
			
				|  |  | +                avoidLabelOverlap: false,
 | 
	
		
			
				|  |  | +                label: {
 | 
	
		
			
				|  |  | +                    show: false,
 | 
	
		
			
				|  |  | +                    position: 'center'
 | 
	
		
			
				|  |  | +                },
 | 
	
		
			
				|  |  | +                emphasis: {
 | 
	
		
			
				|  |  | +                    label: {
 | 
	
		
			
				|  |  | +                        show: true,
 | 
	
		
			
				|  |  | +                        fontSize: '20',
 | 
	
		
			
				|  |  | +                        fontWeight: 'bold'
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                },
 | 
	
		
			
				|  |  | +                labelLine: {
 | 
	
		
			
				|  |  | +                    show: false
 | 
	
		
			
				|  |  | +                },
 | 
	
		
			
				|  |  | +                data: expensesPieValues,
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        ]
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +    expensesPieChart.setOption(expensesPieOption);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    // 按create_time月份整理expensesList数据
 | 
	
		
			
				|  |  | +    const expensesBarDatas = [];
 | 
	
		
			
				|  |  | +    for (const expenses of expensesList) {
 | 
	
		
			
				|  |  | +        const yearMonth = moment(expenses.create_time).format('YYYY年MM月');
 | 
	
		
			
				|  |  | +        const ymExpenses = _.find(expensesBarDatas, { yearMonth });
 | 
	
		
			
				|  |  | +        if (ymExpenses) {
 | 
	
		
			
				|  |  | +            ymExpenses.yf_price = ZhCalc.add(ymExpenses.yf_price, expenses.yf_price);
 | 
	
		
			
				|  |  | +        } else {
 | 
	
		
			
				|  |  | +            expensesBarDatas.push({ yearMonth, yf_price: expenses.yf_price });
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    for (const e of expensesBarDatas) {
 | 
	
		
			
				|  |  | +        e.rate = ZhCalc.round(ZhCalc.div(e.yf_price, prices.expenses_total_price) * 100, 2);
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    console.log(expensesBarDatas);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    const expensesBarChart = echarts.init(document.getElementById('expensesBarChart'));
 | 
	
		
			
				|  |  | +    const expensesBarOption = {
 | 
	
		
			
				|  |  | +        color: ['#b5c4b1','#965454','#9ca8b8','#d8caaf'],
 | 
	
		
			
				|  |  | +        title : {
 | 
	
		
			
				|  |  | +            text: '支出合同结算趋势'
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        tooltip : {
 | 
	
		
			
				|  |  | +            trigger: 'axis'
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        calculable : true,
 | 
	
		
			
				|  |  | +        legend: {
 | 
	
		
			
				|  |  | +            data:['支付金额','占总金额比例']
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        dataZoom: [
 | 
	
		
			
				|  |  | +            {show: true,start: 0, end: 100}
 | 
	
		
			
				|  |  | +        ],
 | 
	
		
			
				|  |  | +        xAxis : [
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +                type : 'category',
 | 
	
		
			
				|  |  | +                splitLine : {show : true},
 | 
	
		
			
				|  |  | +                data : _.map(expensesBarDatas, 'yearMonth'),
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        ],
 | 
	
		
			
				|  |  | +        yAxis : [
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +                type : 'value',
 | 
	
		
			
				|  |  | +                name : '金额',
 | 
	
		
			
				|  |  | +                position:'left',
 | 
	
		
			
				|  |  | +                axisLabel : {
 | 
	
		
			
				|  |  | +                    formatter: '{value} 元'
 | 
	
		
			
				|  |  | +                },
 | 
	
		
			
				|  |  | +                splitArea : {show : true}
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +                type : 'value',
 | 
	
		
			
				|  |  | +                name:'占总金额比例',
 | 
	
		
			
				|  |  | +                axisLabel : {
 | 
	
		
			
				|  |  | +                    formatter: '{value} %'
 | 
	
		
			
				|  |  | +                },
 | 
	
		
			
				|  |  | +                position: 'right',
 | 
	
		
			
				|  |  | +                splitArea : {show : true}
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        ],
 | 
	
		
			
				|  |  | +        series : [
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +                name:'支付金额',
 | 
	
		
			
				|  |  | +                type:'bar',
 | 
	
		
			
				|  |  | +                tooltip : {formatter: "{b}<br/>{a}:{c} %"},
 | 
	
		
			
				|  |  | +                stack: '结算金额',
 | 
	
		
			
				|  |  | +                data: _.map(expensesBarDatas, 'yf_price'),
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +                name:'占总金额比例',
 | 
	
		
			
				|  |  | +                type:'line',
 | 
	
		
			
				|  |  | +                tooltip : {trigger: 'axis',formatter: "{b}<br/>{a}:{c} %"},
 | 
	
		
			
				|  |  | +                yAxisIndex: 1,
 | 
	
		
			
				|  |  | +                data: _.map(expensesBarDatas, 'rate'),
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +        ]
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +    expensesBarChart.setOption(expensesBarOption);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    const incomePieValues = [
 | 
	
		
			
				|  |  | +        {value: _.filter(incomeList, function (item) {
 | 
	
		
			
				|  |  | +                return !item.settle_code && item.yf_price < item.total_price;
 | 
	
		
			
				|  |  | +            }).length, name: '履行中'},
 | 
	
		
			
				|  |  | +        {value: _.filter(incomeList, function (item) {
 | 
	
		
			
				|  |  | +                return !item.settle_code && item.yf_price >= item.total_price;
 | 
	
		
			
				|  |  | +            }).length, name: '已完成'},
 | 
	
		
			
				|  |  | +        {value: _.filter(incomeList, function (item) {
 | 
	
		
			
				|  |  | +                return !!item.settle_code;
 | 
	
		
			
				|  |  | +            }).length, name: '已结算'}
 | 
	
		
			
				|  |  | +    ];
 | 
	
		
			
				|  |  | +    console.log(incomePieValues);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    const incomePieChart = echarts.init(document.getElementById('incomePieChart'));
 | 
	
		
			
				|  |  | +    const incomePieOption = {
 | 
	
		
			
				|  |  | +        color: ['#c7b8a1','#9ca8b8','#7b8b6f','#d8caaf'],
 | 
	
		
			
				|  |  | +        tooltip: {
 | 
	
		
			
				|  |  | +            trigger: 'item',
 | 
	
		
			
				|  |  | +            formatter: '{a} <br/>{b}: {c} ({d}%)'
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        legend: {
 | 
	
		
			
				|  |  | +            orient: 'horizontal',
 | 
	
		
			
				|  |  | +            left: 0,
 | 
	
		
			
				|  |  | +            data: ['履行中', '已完成', '已结算']
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        series: [
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +                name: '合同',
 | 
	
		
			
				|  |  | +                type: 'pie',
 | 
	
		
			
				|  |  | +                radius: ['50%', '70%'],
 | 
	
		
			
				|  |  | +                avoidLabelOverlap: false,
 | 
	
		
			
				|  |  | +                label: {
 | 
	
		
			
				|  |  | +                    show: false,
 | 
	
		
			
				|  |  | +                    position: 'center'
 | 
	
		
			
				|  |  | +                },
 | 
	
		
			
				|  |  | +                emphasis: {
 | 
	
		
			
				|  |  | +                    label: {
 | 
	
		
			
				|  |  | +                        show: true,
 | 
	
		
			
				|  |  | +                        fontSize: '20',
 | 
	
		
			
				|  |  | +                        fontWeight: 'bold'
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                },
 | 
	
		
			
				|  |  | +                labelLine: {
 | 
	
		
			
				|  |  | +                    show: false
 | 
	
		
			
				|  |  | +                },
 | 
	
		
			
				|  |  | +                data: incomePieValues,
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        ]
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +    // 为echarts对象加载数据
 | 
	
		
			
				|  |  | +    incomePieChart.setOption(incomePieOption);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    const incomeBarDatas = [];
 | 
	
		
			
				|  |  | +    for (const income of incomeList) {
 | 
	
		
			
				|  |  | +        const yearMonth = moment(income.create_time).format('YYYY年MM月');
 | 
	
		
			
				|  |  | +        const ymIncome = _.find(incomeBarDatas, { yearMonth });
 | 
	
		
			
				|  |  | +        if (ymIncome) {
 | 
	
		
			
				|  |  | +            ymIncome.yf_price = ZhCalc.add(ymIncome.yf_price, income.yf_price);
 | 
	
		
			
				|  |  | +        } else {
 | 
	
		
			
				|  |  | +            incomeBarDatas.push({ yearMonth, yf_price: income.yf_price });
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    for (const i of incomeBarDatas) {
 | 
	
		
			
				|  |  | +        i.rate = ZhCalc.round(ZhCalc.div(i.yf_price, prices.income_total_price) * 100, 2);
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    console.log(incomeBarDatas);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    const incomeBarChart = echarts.init(document.getElementById('incomeBarChart'));
 | 
	
		
			
				|  |  | +    const incomeBarOption = {
 | 
	
		
			
				|  |  | +        color: ['#a27e7e','#656565','#b5c4b1','#d8caaf'],
 | 
	
		
			
				|  |  | +        title : {
 | 
	
		
			
				|  |  | +            text: '收入合同结算趋势'
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        tooltip : {
 | 
	
		
			
				|  |  | +            trigger: 'axis'
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        calculable : true,
 | 
	
		
			
				|  |  | +        legend: {
 | 
	
		
			
				|  |  | +            data:['回款金额','占总金额比例']
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        dataZoom: [
 | 
	
		
			
				|  |  | +            {show: true,start: 0, end: 100}
 | 
	
		
			
				|  |  | +        ],
 | 
	
		
			
				|  |  | +        xAxis : [
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +                type : 'category',
 | 
	
		
			
				|  |  | +                splitLine : {show : true},
 | 
	
		
			
				|  |  | +                data : _.map(incomeBarDatas, 'yearMonth'),
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        ],
 | 
	
		
			
				|  |  | +        yAxis : [
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +                type : 'value',
 | 
	
		
			
				|  |  | +                name : '金额',
 | 
	
		
			
				|  |  | +                position:'left',
 | 
	
		
			
				|  |  | +                axisLabel : {
 | 
	
		
			
				|  |  | +                    formatter: '{value} 元'
 | 
	
		
			
				|  |  | +                },
 | 
	
		
			
				|  |  | +                splitArea : {show : true}
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +                type : 'value',
 | 
	
		
			
				|  |  | +                name:'占总金额比例',
 | 
	
		
			
				|  |  | +                axisLabel : {
 | 
	
		
			
				|  |  | +                    formatter: '{value} %'
 | 
	
		
			
				|  |  | +                },
 | 
	
		
			
				|  |  | +                position: 'right',
 | 
	
		
			
				|  |  | +                splitArea : {show : true}
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        ],
 | 
	
		
			
				|  |  | +        series : [
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +                name:'回款金额',
 | 
	
		
			
				|  |  | +                type:'bar',
 | 
	
		
			
				|  |  | +                tooltip : {formatter: "{b}<br/>{a}:{c} %"},
 | 
	
		
			
				|  |  | +                stack: '回款金额',
 | 
	
		
			
				|  |  | +                data: _.map(incomeBarDatas, 'yf_price'),
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +                name:'占总金额比例',
 | 
	
		
			
				|  |  | +                type:'line',
 | 
	
		
			
				|  |  | +                tooltip : {trigger: 'axis',formatter: "{b}<br/>{a}:{c} %"},
 | 
	
		
			
				|  |  | +                yAxisIndex: 1,
 | 
	
		
			
				|  |  | +                data: _.map(incomeBarDatas, 'rate'),
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +        ]
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +    incomeBarChart.setOption(incomeBarOption);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    let resizeTimer = null;
 | 
	
		
			
				|  |  | +    $(window).bind('resize', function () {
 | 
	
		
			
				|  |  | +        if (resizeTimer) clearTimeout(resizeTimer);
 | 
	
		
			
				|  |  | +        resizeTimer = setTimeout(function () {
 | 
	
		
			
				|  |  | +            echartsReset();
 | 
	
		
			
				|  |  | +        }, 500);
 | 
	
		
			
				|  |  | +    });
 | 
	
		
			
				|  |  | +    function echartsReset() {
 | 
	
		
			
				|  |  | +        expensesPieChart.resize();
 | 
	
		
			
				|  |  | +        incomePieChart.resize();
 | 
	
		
			
				|  |  | +        expensesBarChart.resize();
 | 
	
		
			
				|  |  | +        incomeBarChart.resize();
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    $.subMenu({
 | 
	
		
			
				|  |  | +        menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
 | 
	
		
			
				|  |  | +        toMenu: '#to-menu', toMiniMenu: '#to-mini-menu',
 | 
	
		
			
				|  |  | +        key: 'menu.1.0.0',
 | 
	
		
			
				|  |  | +        miniHint: '#sub-mini-hint', hintKey: 'menu.hint.1.0.1',
 | 
	
		
			
				|  |  | +        callback: function (info) {
 | 
	
		
			
				|  |  | +            if (info.mini) {
 | 
	
		
			
				|  |  | +                $('.panel-title').addClass('fluid');
 | 
	
		
			
				|  |  | +                $('#sub-menu').removeClass('panel-sidebar');
 | 
	
		
			
				|  |  | +            } else {
 | 
	
		
			
				|  |  | +                $('.panel-title').removeClass('fluid');
 | 
	
		
			
				|  |  | +                $('#sub-menu').addClass('panel-sidebar');
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +            autoFlashHeight();
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +    });
 | 
	
		
			
				|  |  | +});
 |