134 lines
5.0 KiB
HTML
134 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=1" />
|
|
<title>到账</title>
|
|
<style>
|
|
</style>
|
|
<link href="../Scripts/layui-v2.4.5/css/layui.css" rel="stylesheet" />
|
|
<!--<script src="../Scripts/jquery-1.10.2.min.js"></script>-->
|
|
<script src="../Scripts/layui-v2.4.5/layui.js" charset="utf-8"></script>
|
|
<script src="../Scripts/echarts-4.8.0/dist/echarts.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="layui-container">
|
|
<table class="layui-hide" id="table"></table>
|
|
<br />
|
|
<div id="main"></div>
|
|
<br />
|
|
<p><span>月度目标：</span><span id="MonthBudget"></span></p>
|
|
<br />
|
|
<p><span>本月收款：</span><span id="OpenPrice"></span></p>
|
|
<p><span>收款订单：</span><span id="OpenCount"></span></p>
|
|
<br />
|
|
<p><span>本月退款：</span><span id="Refund"></span></p>
|
|
<p><span>退款订单：</span><span id="RefundCount"></span></p>
|
|
<br />
|
|
<p><span>本月实际收款：</span><span id="Cost"></span></p>
|
|
<p><span>实际订单：</span><span id="CostCount"></span></p>
|
|
<br />
|
|
<p><span>完成进度：</span><span id="MonthCompletion"></span></p>
|
|
<br />
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
layui.use(['table', 'laydate', 'form'], function () {
|
|
var table = layui.table;
|
|
var $ = layui.jquery;
|
|
|
|
var userid = "";
|
|
var yearMonth = "2020-05";
|
|
$.getJSON('../Performance/MonthCost?userid=' + userid + "&yearmonth=" + yearMonth, function (rsp) {
|
|
//console.log(rsp);
|
|
|
|
table.render({
|
|
elem: '#table'
|
|
, cols: [[
|
|
{ field: 'DeptmentName', title: '事业部' }
|
|
, { field: 'OpenCount', title: '订单' }
|
|
, { field: 'OpenPrice', title: '收款' }
|
|
, { field: 'Cost', title: '实际收款' }
|
|
, { field: 'Refund', title: '退款' }
|
|
]]
|
|
, data: rsp.List
|
|
});
|
|
|
|
$.each(rsp.List, function (i,j) {
|
|
if (j.DeptmentName == "合计") {
|
|
$("#MonthBudget").html(j.MonthBudget);
|
|
$("#OpenPrice").html(j.OpenPrice);
|
|
$("#OpenCount").html(j.OpenCount);
|
|
$("#Refund").html(j.Refund);
|
|
$("#RefundCount").html(j.RefundCount);
|
|
$("#Cost").html(j.Cost);
|
|
$("#CostCount").html(j.CostCount);
|
|
$("#MonthCompletion").html(j.MonthCompletion);
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
|
|
var width = document.documentElement.clientWidth;
|
|
var height = document.documentElement.clientHeight;
|
|
//$("#main").css("width", width).css("height", height);
|
|
$("#main").css("height", height);
|
|
|
|
//console.log(width);
|
|
//console.log(height);
|
|
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
var option = {
|
|
baseOption: {
|
|
//grid: {
|
|
// left: '3%',
|
|
// right: '4%',
|
|
// bottom: '3%',
|
|
// containLabel: true,
|
|
// borderWidth: 0
|
|
//},
|
|
xAxis: {
|
|
type: 'value'//, name: '万元'
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ["01", "02", '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30']
|
|
},
|
|
//legend: {
|
|
// data: ['销量']
|
|
//},
|
|
series: [
|
|
{ name: '销量', type: 'bar', data: [50, 100, 150, 200, 250, 300, 200, 350, 150] }
|
|
]
|
|
},
|
|
media: [{
|
|
//query: { minWidth: 350, maxWidth: 550 },
|
|
option: {
|
|
//legend: {
|
|
// orient: 'vertical',
|
|
// left: 'right',
|
|
// itemGap: 10
|
|
//},
|
|
//xAxis: {
|
|
// splitNumber: 2
|
|
//},
|
|
}
|
|
}],
|
|
//options: [{
|
|
// series: [{
|
|
// data: [5, 20, 36, 10, 10, 20, 20, 30, 40, 50]
|
|
// }]
|
|
//}]
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
//console.log(myChart.resize);
|
|
window.onresize = myChart.resize;
|
|
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |