306 lines
10 KiB
Plaintext
306 lines
10 KiB
Plaintext
@using WX.CRM.WebHelper
|
||
|
||
@{
|
||
ViewBag.Title = "";
|
||
Layout = "~/Views/Shared/_Index_Layout2.cshtml";
|
||
}
|
||
<style>
|
||
.txt-expand {
|
||
width: 16px;
|
||
height: 16px;
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.expand-activity {
|
||
background: url("/Content/Images/tools.png") no-repeat scroll 0 0;
|
||
}
|
||
|
||
.close-activity {
|
||
background: url("/Content/Images/icon/edit_remove.png") no-repeat;
|
||
}
|
||
|
||
.bas_datagrid_table td {
|
||
text-align: left;
|
||
padding-left: 10px;
|
||
}
|
||
|
||
.btr {
|
||
background: antiquewhite
|
||
}
|
||
|
||
.btr2 {
|
||
background: #e0ecff;
|
||
}
|
||
|
||
.tr_onmouser_over .btr, .tr_onmouser_over .btr2 {
|
||
background: #DEE4EC;
|
||
}
|
||
|
||
.tr_onclick .btr, .tr_onclick .btr2 {
|
||
background: #FBEC88;
|
||
}
|
||
</style>
|
||
<script src="~/Scripts/echarts.min.js"></script>
|
||
<div class="mvctool">
|
||
@Html.ToolButton("btnQuery", "icon-search", "查询", true)
|
||
@Html.ToolButton("btnExport", "icon-export", "导出", true)
|
||
@Html.Action("ToolBar", "Control", ViewBag.ToolBar as ToolBar)
|
||
</div>
|
||
<div class="bas_datagrid">
|
||
<div id="tb" style="padding:5px;height:auto" class="grid_toolbar">
|
||
<ul class="toolBar_ul">
|
||
<li>
|
||
年：<select id="SltYear">
|
||
<option>2017</option>
|
||
<option>2018</option>
|
||
</select>
|
||
月：<select id="SltMonth">
|
||
<option>01</option>
|
||
<option>02</option>
|
||
<option>03</option>
|
||
<option>04</option>
|
||
<option>05</option>
|
||
<option>06</option>
|
||
<option>07</option>
|
||
<option>08</option>
|
||
<option>09</option>
|
||
<option>10</option>
|
||
<option>11</option>
|
||
<option>12</option>
|
||
</select>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
@Html.Raw(ViewBag.RptList)
|
||
</div>
|
||
|
||
<div>
|
||
@*<a href="javascript:void(0)" id="btnBar">柱状图</a>
|
||
<a href="javascript:void(0)" id="btnPie">饼图</a>*@
|
||
<div id="main" style="width: 600px;height:280px; float:left;"></div>
|
||
<div id="main2" style="width: 600px;height:280px; float:left;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
//var ofix1 = null;
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
var myChart2 = echarts.init(document.getElementById('main2'));
|
||
$(function () {
|
||
$(window).resize(function () {
|
||
$('#tablist').tablegrid('resize', {
|
||
height: $(window).height()/2
|
||
});
|
||
//if(ofix1 != null)
|
||
// ofix1.resize();
|
||
});
|
||
|
||
var today = new Date();
|
||
$("#SltYear").val(today.getFullYear());
|
||
var m = "0000" + today.getMonth() + "";
|
||
$("#SltMonth").val(m.substring(m.length - 2));
|
||
|
||
$("#btnQuery").click(function () {
|
||
//$('#tablist').tablegrid("Search");
|
||
LoadData();
|
||
});
|
||
$("#btnExport").click(function () {
|
||
BtnExportAll_Click();
|
||
});
|
||
$(".txt-expand").live("click", function () {
|
||
if ($(this).hasClass("expand-activity")) {
|
||
$(this).removeClass("expand-activity").addClass("close-activity");
|
||
$("[typeName='" + $(this).attr("title") + "']").css("display", "");
|
||
}
|
||
else {
|
||
$(this).removeClass("close-activity").addClass("expand-activity");
|
||
$("[typeName='" + $(this).attr("title") + "']").css("display", "none");
|
||
}
|
||
});
|
||
|
||
|
||
InitChart();
|
||
|
||
LoadData();
|
||
|
||
//$("#btnBar").click(function () {
|
||
|
||
//});
|
||
//$("#btnPie").click(function () {
|
||
|
||
//});
|
||
});
|
||
function LoadData() {
|
||
$("#tablist").tablegrid({
|
||
url: '/weixin/OrderResourceReport/index',
|
||
height: $(window).height()/2,
|
||
loadNow: true,
|
||
data: GetControlValue(),
|
||
onLoadSuccess: function (data) {
|
||
//if (ofix1 == null) {
|
||
// ofix1 = new oFixedTable('ofix1', document.getElementById('tablist'), {});
|
||
//} else {
|
||
// ofix1.resize();
|
||
//}
|
||
}
|
||
});
|
||
|
||
LoadChart();
|
||
}
|
||
|
||
function GetControlValue() {
|
||
//return {
|
||
// saleDeptId: $("#nb1_uc_org_depts").val()
|
||
// , groupId: $("#nb1_uc_org_groups").val()
|
||
// , userId: $("#nb1_uc_org_ids").val()
|
||
//};
|
||
var MCode = $("#SltYear").val() + "-" + $("#SltMonth").val() + "-01";
|
||
return { month: MCode }
|
||
}
|
||
function frameReturnByClose() {
|
||
$("#modalwindow").window('close');
|
||
}
|
||
function frameReturnByReload(flag) {
|
||
$("#tablist").tablegrid("Load");
|
||
}
|
||
//获取datagrid头部及字段
|
||
function getDataGridHeader() {
|
||
var columns = $('#tablist').tablegrid("getHead");
|
||
return columns;
|
||
}
|
||
function GetIframeHtml(src) {
|
||
return "<iframe width='100%' height='98%' scrolling='no' frameborder='0' src='" + src + "'></iframe>";
|
||
}
|
||
function BtnExportAll_Click() {
|
||
var MCode = $("#SltYear").val() + "-" + $("#SltMonth").val() + "-01";
|
||
$("#modalwindow").html(GetIframeHtml("/Control/ExcelExport?Query=" + encodeURIComponent("/weixin/OrderResourceReport/Export?" + GetQueryStr() + "&month=" + MCode + "&winrand=" + Math.random())));
|
||
$("#modalwindow").window({ title: '导出', width: 480, height: 300, iconCls: 'icon-export' }).window('open');
|
||
}
|
||
function InitChart() {
|
||
|
||
//var optionPie = {
|
||
// tooltip: {
|
||
// trigger: 'item',
|
||
// formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||
// },
|
||
// legend: {
|
||
// orient: 'vertical',
|
||
// x: 'left',
|
||
// data: []
|
||
// },
|
||
// series: [
|
||
// {
|
||
// name: '数量',
|
||
// type: 'pie',
|
||
// selectedMode: 'single',
|
||
// radius: [0, '30%'],
|
||
// label: {
|
||
// normal: {
|
||
// position: 'inner'
|
||
// }
|
||
// },
|
||
// labelLine: {
|
||
// normal: {
|
||
// show: false
|
||
// }
|
||
// },
|
||
// data: []
|
||
// },
|
||
// {
|
||
// name: '数量',
|
||
// type: 'pie',
|
||
// radius: ['40%', '55%'],
|
||
// label: {
|
||
// normal: {
|
||
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
|
||
// backgroundColor: '#eee',
|
||
// borderColor: '#aaa',
|
||
// borderWidth: 1,
|
||
// borderRadius: 4,
|
||
// rich: {
|
||
// a: {
|
||
// color: '#999',
|
||
// lineHeight: 22,
|
||
// align: 'center'
|
||
// },
|
||
// hr: {
|
||
// borderColor: '#aaa',
|
||
// width: '100%',
|
||
// borderWidth: 0.5,
|
||
// height: 0
|
||
// },
|
||
// b: {
|
||
// fontSize: 16,
|
||
// lineHeight: 33
|
||
// },
|
||
// per: {
|
||
// color: '#eee',
|
||
// backgroundColor: '#334455',
|
||
// padding: [2, 4],
|
||
// borderRadius: 2
|
||
// }
|
||
// }
|
||
// }
|
||
// },
|
||
// data: []
|
||
// }
|
||
// ]
|
||
//};
|
||
|
||
var optionBar = {
|
||
title: { text: '订单来源统计数量' },
|
||
tooltip: {},
|
||
legend: { data: ["新开单数量", "升级订单数量"] },
|
||
grid: {
|
||
left: '5%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: { data: [] } ,
|
||
yAxis: {},
|
||
series: [
|
||
{ name: "新开单数量", type: "bar", stack: "数量", data: [] },
|
||
{ name: "升级订单数量", type: "bar", stack: "数量", data: [] }
|
||
]
|
||
};
|
||
|
||
myChart.setOption(optionBar);
|
||
myChart2.setOption(optionBar);
|
||
}
|
||
function LoadChart() {
|
||
|
||
var month = $("#SltYear").val() + "-" + $("#SltMonth").val() + "-01";
|
||
$.getJSON("/weixin/OrderResourceReport/Chart?month=" + month, function (data) {
|
||
//console.log(data);
|
||
//myChart.setOption({
|
||
// legend: { data: data[0].legend },
|
||
// series: [
|
||
// { name: "数量", data: data[0].series[0].data },
|
||
// { name: "数量", data: data[0].series[1].data }
|
||
// ]
|
||
//});
|
||
myChart.setOption({
|
||
xAxis: { data: data[0].xAxis.data },
|
||
series: [
|
||
{ data: data[0].series[0].data },
|
||
{ data: data[0].series[1].data }
|
||
]
|
||
});
|
||
myChart2.setOption({
|
||
title: { text: '订单来源统计业绩'},
|
||
legend: { data: ["新开单业绩", "升级订单业绩"]},
|
||
xAxis: { data: data[1].xAxis.data },
|
||
series: [
|
||
{ name: "新开单业绩", stack: "业绩", data: data[1].series[0].data },
|
||
{ name: "升级订单业绩", stack: "业绩", data: data[1].series[1].data }
|
||
]
|
||
});
|
||
//myChart.on('click', function (params) {
|
||
// console.log(params.name);
|
||
//});
|
||
});
|
||
}
|
||
</script> |