|
@@ -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();
|
|
|
+ }
|
|
|
+ });
|
|
|
+});
|