You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
287 lines
9.6 KiB
287 lines
9.6 KiB
4 years ago
|
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/AppMaster.Master"
|
||
|
|
Inherits="System.Web.Mvc.ViewPage<QMAPP.MESReport.Web.Models.LineQTY.AnDongCallVModel>" %>
|
||
|
|
|
||
|
|
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
|
||
|
|
安东呼叫类型统计
|
||
|
|
</asp:Content>
|
||
|
|
|
||
|
|
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
|
||
|
|
|
||
|
|
<%=Html.QPSeach(80,true) %>
|
||
|
|
<table id="condiTable">
|
||
|
|
<tr>
|
||
|
|
<th align="right">
|
||
|
|
呼叫日期
|
||
|
|
</th>
|
||
|
|
<td>
|
||
|
|
<%=Html.QC(p => p.START_DATE)%>
|
||
|
|
</td>
|
||
|
|
<th align="right">
|
||
|
|
至
|
||
|
|
</th>
|
||
|
|
<td>
|
||
|
|
<%=Html.QC(p => p.END_DATE)%>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<th align="right">
|
||
|
|
<%=Html.QV(p => p.CALL_TYPE)%>
|
||
|
|
</th>
|
||
|
|
<td>
|
||
|
|
<%=Html.QC(p => p.CALL_TYPE)%>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<%=Html.QPEnd()%>
|
||
|
|
<%=Html.QPList() %>
|
||
|
|
|
||
|
|
<!--图表配置-->
|
||
|
|
<%=QMAPP.Common.Web.AppConfig.QMEChartPageConfig()%>
|
||
|
|
<%--异步获取数据生成图表--%>
|
||
|
|
<div style="overflow: auto; height: 99%;">
|
||
|
|
<div style="width: 100%; text-align: center;">
|
||
|
|
<%=QMFrameWork.WebUI.QMEChart.QMEChartHelper.CreateEchart("echartID", "/AnDongCall/GetEchartDataBar2", new string[] { "line", "bar" }, "myEChart")%>
|
||
|
|
</div>
|
||
|
|
<div style="width: 100%; text-align: center;">
|
||
|
|
<table id="maintb" class="mtbtt" style="width:90%; margin:0px auto;">
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
function GetTable() {
|
||
|
|
$.ajax({
|
||
|
|
type: "POST",
|
||
|
|
url: "/AnDongCall/GetTable?CALL_TYPE=" + $("input[name='CALL_TYPE']").val() + "&START_DATE=" + $("input[name='START_DATE']").val() + "&END_DATE=" + $("input[name='END_DATE']").val(),
|
||
|
|
dataType: "json",
|
||
|
|
data: {},
|
||
|
|
success: function (data) {
|
||
|
|
$("#maintb").html(data);
|
||
|
|
},
|
||
|
|
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
||
|
|
//alert(errorThrown);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
}
|
||
|
|
$(function () { refreshEChartbar2(); });
|
||
|
|
function refreshEChartbar2() {
|
||
|
|
|
||
|
|
var endtime = document.getElementById("END_DATE").value;
|
||
|
|
if (parseDate($("#START_DATE").val()) > parseDate($("#END_DATE").val()) && endtime != "") {
|
||
|
|
alert("开始时间不能大于结束时间！");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var ps = [];
|
||
|
|
|
||
|
|
var CALL_TYPE = {};
|
||
|
|
CALL_TYPE.key = "CALL_TYPE";
|
||
|
|
CALL_TYPE.value = $("input[name='CALL_TYPE']").val();
|
||
|
|
ps.push(CALL_TYPE);
|
||
|
|
|
||
|
|
var START_DATE = {};
|
||
|
|
START_DATE.key = "START_DATE";
|
||
|
|
START_DATE.value = $("input[name='START_DATE']").val();
|
||
|
|
ps.push(START_DATE);
|
||
|
|
|
||
|
|
var END_DATE = {};
|
||
|
|
END_DATE.key = "END_DATE";
|
||
|
|
END_DATE.value = $("input[name='END_DATE']").val();
|
||
|
|
ps.push(END_DATE);
|
||
|
|
|
||
|
|
//先隐藏然后延迟处理
|
||
|
|
document.getElementById("echartID").style.display = 'none';
|
||
|
|
GetEchartData("/AnDongCall/GetEchartDataBar2", myEChart, ps);
|
||
|
|
GetTable();
|
||
|
|
setTimeout("ConfigxAxisLable(myEChart)", 500);
|
||
|
|
}
|
||
|
|
|
||
|
|
//导出
|
||
|
|
// function Export() {
|
||
|
|
// var img = myEChart.getDataURL("png");
|
||
|
|
// $("#hiChartImg").val(img);
|
||
|
|
// submitByButton("ExportBanCi");
|
||
|
|
// }
|
||
|
|
|
||
|
|
//导出Excel
|
||
|
|
function Export() {
|
||
|
|
var ids = document.getElementById("selectKey").value;
|
||
|
|
$.get("/AnDongCall/ExportExcel", $("form").serializeArray(), function (data) {
|
||
|
|
submitByButton("/AnDongCall/ExportFile?FileName=" + data);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<input id="hiChartImg" name="hiChartImg" type="hidden" />
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<%=Html.QPEnd() %>
|
||
|
|
<%=Html.Hidden("selectKey")%>
|
||
|
|
<%=Html.Hidden("PID")%>
|
||
|
|
|
||
|
|
</asp:Content>
|
||
|
|
|
||
|
|
<asp:Content ID="Content3" ContentPlaceHolderID="ToolContent" runat="server">
|
||
|
|
<style type="text/css">
|
||
|
|
.mtbtt
|
||
|
|
{
|
||
|
|
border-collapse:collapse;
|
||
|
|
}
|
||
|
|
.mtbtt tr td
|
||
|
|
{
|
||
|
|
border: 1px solid grey;
|
||
|
|
}
|
||
|
|
.L1cos
|
||
|
|
{
|
||
|
|
width:160px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<table cellpadding="0" cellspacing="0">
|
||
|
|
<tr>
|
||
|
|
<td align="center">
|
||
|
|
<%=Html.QTButtonSearch("AnDongCall", "Index", "refreshEChartbar2()", QMAPP.Common.Web.SystemLimit.isLimt)%>
|
||
|
|
<%=Html.QTButton("export", "ExportExcel", QMFrameWork.WebUI.IconCls.redo, "Export()", QMAPP.Common.Web.SystemLimit.isLimt)%>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<script type="text/javascript" language="javascript">
|
||
|
|
//长文本配置
|
||
|
|
var longtextoption = {
|
||
|
|
grid: {
|
||
|
|
y2: 80
|
||
|
|
},
|
||
|
|
xAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
axisLabel: {
|
||
|
|
interval: 0,
|
||
|
|
rotate: 30,
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 14
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
//竖文本配置
|
||
|
|
var vtextoption = {
|
||
|
|
grid: {
|
||
|
|
y2: 80
|
||
|
|
},
|
||
|
|
xAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
axisLabel: {
|
||
|
|
formatter: function (value) { return value.split("").join("\n") },
|
||
|
|
interval: 0,
|
||
|
|
rotate: 0,
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 12
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
var normaltextoption = {
|
||
|
|
grid: {
|
||
|
|
y2: 80
|
||
|
|
},
|
||
|
|
dataZoom: {
|
||
|
|
show: true,
|
||
|
|
realtime: true,
|
||
|
|
start: 0,
|
||
|
|
end: 100
|
||
|
|
},
|
||
|
|
xAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
axisLabel: {
|
||
|
|
interval: 0,
|
||
|
|
rotate: 0
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
//加载图表数据
|
||
|
|
function LoadChartData(chartObj, url) {
|
||
|
|
//debugger;
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: url,
|
||
|
|
dataType: 'html',
|
||
|
|
success: function (data) {
|
||
|
|
eval("var dataStr=" + data + ";");
|
||
|
|
chartObj.hideLoading();
|
||
|
|
chartObj.clear();
|
||
|
|
chartObj.setOption(dataStr);
|
||
|
|
},
|
||
|
|
error: function (err) {
|
||
|
|
_closeProgress();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
//设置X轴标签
|
||
|
|
function ConfigxAxisLable(chartObj) {
|
||
|
|
//debugger;
|
||
|
|
//x轴标签高度的系数
|
||
|
|
var lengthHight = 12;
|
||
|
|
var option = chartObj.getOption();
|
||
|
|
|
||
|
|
var cwidth = $(chartObj.getDom()).width();
|
||
|
|
//预防data为空，预先赋值。
|
||
|
|
var oxdLength = 12;
|
||
|
|
if (option.xAxis[0].data != undefined) {
|
||
|
|
|
||
|
|
oxdLength = option.xAxis[0].data.length;
|
||
|
|
}
|
||
|
|
var citemwidth = cwidth / oxdLength;
|
||
|
|
|
||
|
|
var maxlabelwidth = 0;
|
||
|
|
for (var i = 0; i < oxdLength; i++) {
|
||
|
|
if (option.xAxis[0].data != undefined) {
|
||
|
|
if (option.xAxis[0].data[i].length * lengthHight > maxlabelwidth) {
|
||
|
|
maxlabelwidth = option.xAxis[0].data[i].length * lengthHight;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (citemwidth <= 35) {
|
||
|
|
vtextoption.grid.y2 = maxlabelwidth + 10;
|
||
|
|
chartObj.setOption(vtextoption);
|
||
|
|
}
|
||
|
|
else if (maxlabelwidth > citemwidth) {
|
||
|
|
longtextoption.grid.y2 = maxlabelwidth / 2 + 25;
|
||
|
|
chartObj.setOption(longtextoption);
|
||
|
|
}
|
||
|
|
document.getElementById("echartID").style.display = 'block';
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// $(function () {
|
||
|
|
// LoadChartData(myEChart, "/LineShiftQTYCount/GetEchartDataLine1");
|
||
|
|
// });
|
||
|
|
|
||
|
|
var labelformatter = function (value) {
|
||
|
|
//debugger
|
||
|
|
var ret = ""; //拼接加\n返回的类目项
|
||
|
|
var maxLength = 1; //每项显示文字个数
|
||
|
|
var valLength = value.length; //X轴类目项的文字个数
|
||
|
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
||
|
|
if (rowN > 1)//如果类目项的文字大于3,
|
||
|
|
{
|
||
|
|
for (var i = 0; i < rowN; i++) {
|
||
|
|
var temp = ""; //每次截取的字符串
|
||
|
|
var start = i * maxLength; //开始截取的位置
|
||
|
|
var end = start + maxLength; //结束截取的位置
|
||
|
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
||
|
|
temp = value.substring(start, end) + "\n";
|
||
|
|
ret += temp; //凭借最终的字符串
|
||
|
|
}
|
||
|
|
return ret;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</asp:Content>
|