<%@ Page Language=“C#” AutoEventWireup=“true” CodeFile=“WMS_BIONE.aspx.cs” Inherits=“WMS_WMS_BIONE” %>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../jqgrid/jquery.jqGrid.js"></script>
<script type="text/javascript" src="../jqgrid/grid.locale-cn.js"></script>
<style type="text/css">
.leftDivBgColor {
background-color:rgba(231, 247, 251, 1);
}
.rightUpDivBgC {
background-color:rgba(231, 247, 251, 1);
}
#outMain {
width: 98%;
height: 95%;
position: absolute;
margin-left: 1%;
margin-top: 1%;
/*border: 1px solid black;*/
}
#leftDiv {
width: 28%;
height: 100%;
float: left;
position: relative;
}
#rightUpDiv {
width: 70%;
height: 48%;
float: right;
position: relative;
/*border: 1px solid black;*/
left: -10px;
}
#rightDowDiv {
width: 70%;
height: 48%;
float: right;
position: relative;
/*border: 1px solid #00ff21;*/
bottom: -10px;
left: -10px;
/*overflow:scroll;*/
/*//overflow-x: hidden;
//overflow-y: hidden;*/
}
#leftDivOne {
width: 100%;
height: 33%;
float: left;
position: relative;
/*border: 1px solid blue;*/
}
#leftDivTwo {
width: 100%;
height: 34%;
float: left;
position: relative;
margin-top:3px;
border: 0px solid blue;
}
#leftDivThree {
width: 100%;
height: 34%;
float: left;
position: relative;
margin-top:3px;
border: 0px solid blue;
}
#rightUpDivOne {
width: 49%;
height: 100%;
float: left;
position: relative;
border: 0px solid #ffffff;
}
#rightUpDivTwo {
width: 50%;
height: 100%;
float: right;
position: relative;
border: 1px solid #ffffff;
}
#leftDivOnetable {
position: relative;
}
</style>
<script type="text/javascript">
$(function () {
///----------------领用数量by类型柱状图------------\\\\\\\\\\\\\\\\\\\\\
//基于准备好的dom 初始化echarts实例
var myChart = echarts.init(document.getElementById("rightUpDivOne"));
//指定图表的配置项和数据
var option = {
toolbox: {
show: true,
feature: {
saveAsImage: { show: true },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true }
},
},
title: {
text: '领用数量by类型',
textStyle: {//标题内容的样式
color: '#ffffff',//京东红
fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
fontWeight: "bold",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
fontFamily: "san-serif",//主题文字字体，默认微软雅黑
fontSize: 13//主题文字字体大小，默认为18px
},
backgroundColor: '#5c9ccc'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legeng: {
data: ['数量']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.1],
show: false
},
yAxis: {
type: 'category',
data: tempbytypeS,
axisLine: { show: false } //坐标轴
},
series: [
{
name: '数值',
type: 'bar',
data: tempbytypeN,
itemStyle: {
//通常情况下：
normal: {
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
var colorList = ['rgb(164,205,238)', 'rgb(42,170,227)', 'rgb(25,46,94)', 'rgb(195,229,235)'];
return colorList[params.dataIndex];
}
},
//设置数值显示
normal: { label: { show: true, position: 'right' } }
},
}
]
};
//使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
///----------------领用数量by类型柱状图------------\\\\\\\\\\\\\\\\\\\\\
///----------------领用数量by名称柱状图------------\\\\\\\\\\\\\\\\\\\\\
var myChartMC = echarts.init(document.getElementById("rightUpDivTwo"));
var optionTwo = {
toolbox: {
show: true,
feature: {
saveAsImage: { show: true },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true }
},
right:20
},
title: {
text: '领用数量by名称',
textStyle: {//标题内容的样式
color: '#ffffff',//京东红
fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
fontWeight: "bold",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
fontFamily: "san-serif",//主题文字字体，默认微软雅黑
fontSize: 13//主题文字字体大小，默认为18px
},
backgroundColor: '#5c9ccc'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
type: 'scroll', //----图例类型，默认为'plain'，当图例很多时可使用'scroll'
top: '1%',
},
legeng: {
data: ['数量']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
show: false,
type: 'value',
boundaryGap: [0, 0.1]
},
yAxis: {
type: 'category',
data: tempbynameS,
axisLine: { show: false }, //坐标轴
axisTick: [{ //坐标轴小标记
show: false
}],
axisLabel: {
textStyle: {
fontSize: '10'
}
},
},
series: [
{
name: '',
type: 'bar',
data: tempbynameN,
itemStyle: {
// 通常情况下：
normal: {
// 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
var colorList = ['#00aff0'];
return colorList[params.dataIndex];
}
},
设置数值显示
normal: { label: { show: true, position: 'right' } }
},
}
],
};
myChartMC.setOption(optionTwo);
///----------------领用数量by名称柱状图------------\\\\\\\\\\\\\\\\\\\\\
///----------------备件进销存分析饼状图------------\\\\\\\\\\\\\\\\\\\\\
var myChartThree = echarts.init(document.getElementById("leftDivTwo"));
var optionThree = {
title: {
x: 'left',
text: '备件进销存分析 ',
textStyle: {//标题内容的样式
color: '#ffffff',//京东红
fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
fontWeight: "bold",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
fontFamily: "san-serif",//主题文字字体，默认微软雅黑
fontSize: 13//主题文字字体大小，默认为18px
},
backgroundColor: '#5c9ccc'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}"
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: benbyZ,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChartThree.setOption(optionThree);
///----------------备件进销存分析饼状图------------\\\\\\\\\\\\\\\\\\\\\
///----------------备件领用统计分析饼状图------------\\\\\\\\\\\\\\\\\\\\\
var myChartFour = echarts.init(document.getElementById("leftDivThree"));
var optionFour = {
title: {
text: '备件领用统计分析 ',
textStyle: {//标题内容的样式
color: '#ffffff',//京东红
fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
fontWeight: "bold",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
fontFamily: "san-serif",//主题文字字体，默认微软雅黑
fontSize: 13//主题文字字体大小，默认为18px
},
backgroundColor: '#5c9ccc',
x: 'left'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}"
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: benbyLY,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChartFour.setOption(optionFour);
///----------------备件领用统计分析饼状图------------\\\\\\\\\\\\\\\\\\\\\
///点击事件
//点击数据还原事件 （点击左上角第一个table即可还原）
$("#leftDivOnetable").click(function () {
if ($(this).attr("id") == "leftDivOnetable") {
myChart.setOption(option);
myChartMC.setOption(optionTwo);
myChartThree.setOption(optionThree);
myChartFour.setOption(optionFour);
jQuery("#rightDowDivtable").jqGrid("clearGridData");
AddData("明细统计");
}
});
//类型柱状图 点击事件
myChart.on('click', function (params) {
$.ajax({
url: "WMS_BIONE.aspx",
type: "Post",
dataType: "text", //请求到服务器返回的数据类型
data: {
"id": "类型柱状图",
"bdtype": params.name
},
success: function (data) {
//jqgrid_json = $.parseJSON(data);
var typeMC = data.split('|');
//领用数量by名称柱状图
tempbynameS = HandleFormat(typeMC[0], "柱状图");
tempbynameN = HandleFormat(typeMC[1], "柱状图");
var optionTwo = myChartMC.getOption();
optionTwo.series[0].data = tempbynameN;
optionTwo.yAxis[0].data = tempbynameS;
myChartMC.setOption(optionTwo);
//备件进销存分析饼状图
var optionThree = myChartThree.getOption();
var tempbynameS = typeMC[2].split('=');
var reValue = tempbynameS[0].split(';');
var reName = tempbynameS[1].split(';');
for (var j = 0; j < reValue.length; j++) {
optionThree.series[0].data[j].value = reValue[j];
optionThree.series[0].data[j].name = reName[j];
}
myChartThree.setOption(optionThree);
//备件领用统计分析饼状图
var optionFour = myChartFour.getOption();
//optionFour.series[0].data = [];
var tempbynameSl = typeMC[3].split('=');
var reValuel = tempbynameSl[0].split(';');
var reNamel = tempbynameSl[1].split(';');
for (var l = 0; l < optionFour.series[0].data.length; l++) {
optionFour.series[0].data[l].value = [];
optionFour.series[0].data[l].name = [];
}
for (var k = 0; k < reValuel.length; k++) {
optionFour.series[0].data[k].value = reValuel[k];
optionFour.series[0].data[k].name = reNamel[k];
}
myChartFour.setOption(optionFour);
//重新加载明细
jqgrid_jsonMM = $.parseJSON(typeMC[4]);
jQuery("#rightDowDivtable").jqGrid("clearGridData");
$("#rightDowDivtable").jqGrid('setGridParam', { // 重新加载数据
datatype: 'local',
data: jqgrid_jsonMM[0].rootlist, // newdata 是符合格式要求的需要重新加载的数据
}).trigger("reloadGrid");
}
})
});
//名称柱状图 点击事件
myChartMC.on('click', function (params) {
$.ajax({
url: "WMS_BIONE.aspx",
type: "Post",
dataType: "text", //请求到服务器返回的数据类型
data: {
"id": "名称柱状图",
"bdtype": params.name
},
success: function (data) {
//jqgrid_json = $.parseJSON(data);
var typeMC = data.split('|');
//领用数量by类型柱状图
tempbynameS = HandleFormat(typeMC[0], "柱状图");
tempbynameN = HandleFormat(typeMC[1], "柱状图");
var option = myChart.getOption();
option.series[0].data = tempbynameN;
option.yAxis[0].data = tempbynameS;
myChart.setOption(option);
//备件进销存分析饼状图
var optionThree = myChartThree.getOption();
var tempbynameS = typeMC[2].split('=');
var reValue = tempbynameS[0].split(';');
var reName = tempbynameS[1].split(';');
for (var j = 0; j < reValue.length; j++) {
optionThree.series[0].data[j].value = reValue[j];
optionThree.series[0].data[j].name = reName[j];
}
myChartThree.setOption(optionThree);
//备件领用统计分析饼状图
var optionFour = myChartFour.getOption();
//optionFour.series[0].data = [];
var tempbynameSl = typeMC[3].split('=');
var reValuel = tempbynameSl[0].split(';');
var reNamel = tempbynameSl[1].split(';');
for (var l = 0; l < optionFour.series[0].data.length; l++) {
optionFour.series[0].data[l].value = [];
optionFour.series[0].data[l].name = [];
}
for (var k = 0; k < reValuel.length; k++) {
optionFour.series[0].data[k].value = reValuel[k];
optionFour.series[0].data[k].name = reNamel[k];
}
myChartFour.setOption(optionFour);
//重新加载明细
jqgrid_jsonMM = $.parseJSON(typeMC[4]);
jQuery("#rightDowDivtable").jqGrid("clearGridData");
$("#rightDowDivtable").jqGrid('setGridParam', { // 重新加载数据
datatype: 'local',
data: jqgrid_jsonMM[0].rootlist, // newdata 是符合格式要求的需要重新加载的数据
}).trigger("reloadGrid");
}
})
});
//进销存分析饼状图 点击事件
myChartThree.on('click', function (params) {
});
//领用统计分析饼状图 点击事件
myChartFour.on('click', function (params) {
$.ajax({
url: "WMS_BIONE.aspx",
type: "Post",
dataType: "text", //请求到服务器返回的数据类型
data: {
"id": "领用分析饼状图",
"bdtype": params.name
},
success: function (data) {
//jqgrid_json = $.parseJSON(data);
var typeMC = data.split('|');
//领用数量by类型柱状图
var tempbynameSL = HandleFormat(typeMC[5], "柱状图");
var tempbynameNL = HandleFormat(typeMC[6], "柱状图");
var option = myChart.getOption();
option.series[0].data = tempbynameNL;
option.yAxis[0].data = tempbynameSL;
myChart.setOption(option);
//领用数量by名称柱状图
tempbynameS = HandleFormat(typeMC[0], "柱状图");
tempbynameN = HandleFormat(typeMC[1], "柱状图");
var optionTwo = myChartMC.getOption();
optionTwo.series[0].data = tempbynameN;
optionTwo.yAxis[0].data = tempbynameS;
myChartMC.setOption(optionTwo);
//备件进销存分析饼状图
var optionThree = myChartThree.getOption();
var tempbynameS = typeMC[2].split('=');
var reValue = tempbynameS[0].split(';');
var reName = tempbynameS[1].split(';');
for (var j = 0; j < reValue.length; j++) {
optionThree.series[0].data[j].value = reValue[j];
optionThree.series[0].data[j].name = reName[j];
}
myChartThree.setOption(optionThree);
//重新加载明细
jqgrid_jsonMM = $.parseJSON(typeMC[4]);
jQuery("#rightDowDivtable").jqGrid("clearGridData");
$("#rightDowDivtable").jqGrid('setGridParam', { // 重新加载数据
datatype: 'local',
data: jqgrid_jsonMM[0].rootlist, // newdata 是符合格式要求的需要重新加载的数据
}).trigger("reloadGrid");
}
})
});
$("#leftDivOnetable").jqGrid({
datatype: "local",
cellEdit: true,
height: 100,//$(window).height() - 200,
width: 320,
colNames: ['日期', '类型', '数量', '金额'],
colModel: [
{ name: 'DateTime', index: 'DateTime', width: 20, align: "center", sorttype: "text", sortable: false },
{ name: 'type', index: 'type', width: 20, align: "center", sorttype: "text", sortable: false },
{ name: 'Quantity', index: 'Quantity', width: 20, align: "center", sortable: false },
{ name: 'Money', index: 'Money', width: 20, align: "center", sortable: false },
],
viewrecords: true,
sortable: true,
sortorder: 'asc',
cellsubmit: 'clientArray',
caption: "总体情况"
});
$("#rightDowDivtable").jqGrid({
datatype: "local",
cellEdit: true,
height: 160,//$(window).height() - 200,
width: 790,
colNames: ['时间', '设备类型', '设备名称', '备件名称', '备件属性', "采购数量", '采购金额', '在库数量', '在库金额', '出库数量', "出库金额"],
colModel: [
{ name: 'DateTime', index: 'DateTime', width: 50, hidden: false },
{ name: 'Equipment_Type', index: 'Equipment_Type', width: 80, align: "center", sorttype: "text", sortable: false },
{ name: 'Equipment_Name', index: 'Equipment_Name', width: 100, align: "center", sortable: false },
{ name: 'SpareParts_Name', index: 'SpareParts_Name', width: 90, align: "center", sortable: false },
{ name: 'SpareParts_Attribute', index: 'SpareParts_Attribute', width: 50, align: "center", sorttype: "number", sortable: false },
{ name: 'PurchaseQuantity', index: 'PurchaseQuantity', width: 50, align: "center", sorttype: "number", sortable: false },
{ name: 'PurchaseMoney', index: 'PurchaseMoney', width: 50, align: "center", sorttype: "number", sortable: false },
{ name: 'StockQuantity', index: 'StockQuantity', width: 50, align: "center", sorttype: "number", sortable: false },
{ name: 'StockMoney', index: 'StockMoney', width: 50, align: "center", sorttype: "number", sortable: false },
{ name: 'OutStockQuantity', index: 'OutStockQuantity', width: 50, align: "center", sorttype: "number", sortable: false },
{ name: 'OutStockMoney', index: 'OutStockMoney', width: 50, align: "center", sorttype: "number", sortable: false }
],
pager: "#pager_list_2",
viewrecords: true,
hidegrid: true,
rowNum: 10, //每页显示记录数
viewrecords: true, //是否显示行数
rowList: [10, 30, 50], //可调整每页显示的记录数
multiselect: false, //是否支持多选
rowNum: 50,
cellsubmit: 'clientArray',
loadonce: true,
rownumbers: true,
shrinkToFit: false,
autoScroll: true,
caption: "设备备件明细统计分析表"
});
AddData("总体情况");
AddData("明细统计");
});
//表格加载数据
function AddData(type) {
if (type == "总体情况") {
$("#leftDivOnetable").jqGrid('setGridParam', { // 重新加载数据
datatype: 'local',
data: jqgrid_jsonZ[0].rootlist, // newdata 是符合格式要求的需要重新加载的数据
}).trigger("reloadGrid");
}
if (type == "明细统计") {
$("#rightDowDivtable").jqGrid('setGridParam', { // 重新加载数据
datatype: 'local',
data: jqgrid_jsonM[0].rootlist, // newdata 是符合格式要求的需要重新加载的数据
}).trigger("reloadGrid");
}
}
//处理柱状图/饼状图通过ajax返回回来的数据格式
function HandleFormat(typeArray, typename) {
if (typename == "柱状图") {
var tempbynameS = typeArray.substr(1, typeArray.length - 2).split(',');
for (var i = 0; i < tempbynameS.length; i++) {
tempbynameS[i] = tempbynameS[i].replace("\"", "").replace("\"", "");
}
return tempbynameS;
}
if (typename == "饼状图") {
var reBenValue = "[";
var tempbynameS = typeArray.split('=');
var reValue = tempbynameS[0].split(';');
var reName = tempbynameS[1].split(';');
for (var j = 0; j < reValue.length; j++) {
reBenValue += "{ value:" + reValue[j] + "," + "name:" + reName[j] + "},";
}
reBenValue += reBenValue.substr(0, typeArray.length - 1);
reBenValue += "]";
return tempbynameS;
}
}
</script>
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using LitJson;
using System.Data.SqlClient;
using System.Linq;
public partial class WMS_WMS_BIONE : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
selectData();
}
string id = Request["id"]; //如果不是通过ajax 请求提交数据 就不会取到这个id ，所以此时的id 为null。但是如果是通过ajax请求提交数据，因为提交数据中有提交id，所以就能够取到这个id ，此时的id就有值了。
string bdtype = Request["bdtype"];
if (!string.IsNullOrEmpty(id)) // 如果不是通过ajax 请求提交数据 就不会进入花括号来调用GetUserData(string id) 方法
{
selectDa(id, bdtype); //如果是通过ajax请求提交数据，就会进入花括号来调用方法
}
}
/// <summary>
/// 初始化加载页面数据
/// </summary>
public void selectData()
{
string jsonZ = "[]";
string jsonM = "[]";
string tempbytypeS = "[]";
string tempbytypeN = "[]";
string tempbynameS = "[]";
string tempbynameN = "[]";
string benbyZ = "[]";
string benbyLY = "[]";
#region 获取总体情况数据
string sql = "select * from (select \"DateTime\" as DateTime , '采购' as type ,sum( \"PurchaseQuantity\" ) Quantity ,sum(\"PurchaseMoney\") Money from lmep_bi_equipmentanalysis group by \"DateTime\" union all select \"DateTime\", '领用' as type1 ,sum(\"OutStockQuantity\") OutStockQuantity ,sum(\"OutStockMoney\") OutStockMoney from lmep_bi_equipmentanalysis group by \"DateTime\" union all select \"DateTime\", '在库' as type1 ,sum(\"StockQuantity\") StockQuantity ,sum(\"StockMoney\") StockMoney from lmep_bi_equipmentanalysis group by \"DateTime\")tt where tt.DateTime = to_char(sysdate, 'yyyyMM')";
DataTable dt = ClassDB.db_select_all(sql);
if (dt.Rows.Count>0)
{
jsonZ = "[";
jsonZ += "{\"totals\":\"8\",\"pages\":\"1\",\"recordss\":\"8\",\"rootlist\":[";
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonZ += "{\"DateTime\":\"" + Convert.ToString(dt.Rows[i]["DateTime"]) + "\"" +
",\"type\":\"" + Convert.ToString(dt.Rows[i]["type"]) + "\"" +
",\"Quantity\":\"" + Convert.ToString(dt.Rows[i]["Quantity"]) + "\"" +
",\"Money\":\"" + Convert.ToString(dt.Rows[i]["Money"]) + "\"},";
}
jsonZ = jsonZ.Substring(0, jsonZ.Length - 1);
jsonZ += "]}]";
}
#endregion
#region 获取明细数据
string sqlM = "select \"DateTime\" as DateTime, \"Equipment_Type\" as Equipment_Type, \"Equipment_Name\" as Equipment_Name, \"SpareParts_Name\" as SpareParts_Name, \"SpareParts_Attribute\" as SpareParts_Attribute, sum(\"PurchaseQuantity\") as PurchaseQuantity, sum(\"PurchaseMoney\") as PurchaseMoney, sum(\"StockQuantity\") as StockQuantity, sum(\"StockMoney\") as StockMoney, sum(\"OutStockQuantity\") as OutStockQuantity, sum(\"OutStockMoney\") as OutStockMoney from lmep_bi_equipmentanalysis where \"DateTime\" = to_char(sysdate, 'yyyyMM') group by \"DateTime\",\"Equipment_Type\",\"Equipment_Name\",\"SpareParts_Name\",\"SpareParts_Attribute\" order by \"Equipment_Type\"";
DataTable dtM = ClassDB.db_select_all(sqlM);
if (dtM.Rows.Count>0)
{
jsonM = "[";
jsonM += "{\"totals\":\"8\",\"pages\":\"1\",\"recordss\":\"8\",\"rootlist\":[";
for (int i = 0; i < dtM.Rows.Count; i++)
{
jsonM += "{\"DateTime\":\"" + Convert.ToString(dtM.Rows[i]["DateTime"]) + "\"" +
",\"Equipment_Type\":\"" + Convert.ToString(dtM.Rows[i]["Equipment_Type"]) + "\"" +
",\"Equipment_Name\":\"" + Convert.ToString(dtM.Rows[i]["Equipment_Name"]) + "\"" +
",\"SpareParts_Name\":\"" + Convert.ToString(dtM.Rows[i]["SpareParts_Name"]) + "\"" +
",\"SpareParts_Attribute\":\"" + Convert.ToString(dtM.Rows[i]["SpareParts_Attribute"]) + "\"" +
",\"PurchaseQuantity\":\"" + Convert.ToString(dtM.Rows[i]["PurchaseQuantity"]) + "\"" +
",\"PurchaseMoney\":\"" + Convert.ToString(dtM.Rows[i]["PurchaseMoney"]) + "\"" +
",\"StockQuantity\":\"" + Convert.ToString(dtM.Rows[i]["StockQuantity"]) + "\"" +
",\"StockMoney\":\"" + Convert.ToString(dtM.Rows[i]["StockMoney"]) + "\"" +
",\"OutStockQuantity\":\"" + Convert.ToString(dtM.Rows[i]["OutStockQuantity"]) + "\"" +
",\"OutStockMoney\":\"" + Convert.ToString(dtM.Rows[i]["OutStockMoney"]) + "\"},";
}
jsonM = jsonM.Substring(0, jsonM.Length - 1);
jsonM += "]}]";
}
#endregion
//领用数量by类型
string sqlbytype = "select distinct \"Equipment_Type\" Equipment_Type,sum(\"OutStockQuantity\") as OutStockQuantity from lmep_bi_equipmentanalysis where \"DateTime\" = to_char(sysdate, 'yyyyMM') group by \"DateTime\",\"Equipment_Type\" order by \"Equipment_Type\"";
DataTable bytype = ClassDB.db_select_all(sqlbytype);
if (bytype.Rows.Count>0)
{
tempbytypeS = reArray(bytype, "Equipment_Type");
tempbytypeN = reArray(bytype, "OutStockQuantity");
}
//领用数量by名称
string sqlbyname = "select distinct \"Equipment_Name\" Equipment_Name,sum(\"OutStockQuantity\") as OutStockQuantity from lmep_bi_equipmentanalysis where \"DateTime\" = to_char(sysdate, 'yyyyMM') group by \"DateTime\",\"Equipment_Name\" order by \"Equipment_Name\"";
DataTable byname = ClassDB.db_select_all(sqlbyname);
if (byname.Rows.Count>0)
{
tempbynameS = reArray(byname, "Equipment_Name");
tempbynameN = reArray(byname, "OutStockQuantity");
}
//饼状图总体分析
benbyZ = reBinArray(dt, "type", "Quantity");
//饼状图领用分析
string sqlbyBen = "select distinct \"SpareParts_Attribute\" SpareParts_Attribute,sum(\"OutStockQuantity\") as OutStockQuantity from lmep_bi_equipmentanalysis where \"DateTime\" = to_char(sysdate, 'yyyyMM') group by \"DateTime\",\"SpareParts_Attribute\" order by \"SpareParts_Attribute\"";
DataTable byBen = ClassDB.db_select_all(sqlbyBen);
if (byBen.Rows.Count >0)
{
benbyLY = reBinArray(byBen, "SpareParts_Attribute", "OutStockQuantity");
}
if (!Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), "json"))
{
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "json", "var jqgrid_jsonZ=" + jsonZ + "; var jqgrid_jsonM="+ jsonM + ";", true);
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Array",
"var tempbytypeS=" + tempbytypeS + "" +
";var tempbytypeN=" + tempbytypeN + "" +
";var tempbynameS=" + tempbynameS + "" +
";var tempbynameN=" + tempbynameN + "" +
";var benbyZ=" + benbyZ + "" +
";var benbyLY=" + benbyLY + "", true);
}
}
/// <summary>
///点击事件 ajax调用此函数请求数据
/// </summary>
/// <param name="id">点击的模块</param>
/// <param name="bdtype">查询的参数</param>
public void selectDa(string id,string bdtype)
{
string tempbynameSL = "[]"; //类型柱状图数量by名称---y轴
string tempbynameNL = "[]";//类型柱状图数量by名称---x轴
string tempbynameS = "[]"; //领用数量by名称---y轴
string tempbynameN = "[]";//领用数量by名称---x轴
string benbyZ = "[]";//饼状图总体分析---数据
string benbyLY = "[]";//饼状图领用分析---数据
string jsonM = "[]";//明细数据--数据
if (id== "类型柱状图")
{
//领用数量by名称
string sqlbyname = "select distinct \"Equipment_Name\" Equipment_Name,sum(\"OutStockQuantity\") as OutStockQuantity from lmep_bi_equipmentanalysis where \"DateTime\" = to_char(sysdate, 'yyyyMM') and \"Equipment_Type\"='" + bdtype + "' group by \"DateTime\",\"Equipment_Name\" order by \"Equipment_Name\"";
DataTable byname = ClassDB.db_select_all(sqlbyname);
if (byname.Rows.Count>0)
{
tempbynameS = reArray(byname, "Equipment_Name");
tempbynameN = reArray(byname, "OutStockQuantity");
}
//饼状图总体分析
string sql = "select * from (select \"DateTime\" as DateTime , '采购' as type ,sum( \"PurchaseQuantity\" ) Quantity ,sum(\"PurchaseMoney\") Money from lmep_bi_equipmentanalysis where \"Equipment_Type\"='" + bdtype + "' group by \"DateTime\" union all select \"DateTime\", '领用' as type1 ,sum(\"OutStockQuantity\") OutStockQuantity ,sum(\"OutStockMoney\") OutStockMoney from lmep_bi_equipmentanalysis where \"Equipment_Type\"='" + bdtype + "' group by \"DateTime\" union all select \"DateTime\", '在库' as type1 ,sum(\"StockQuantity\") StockQuantity ,sum(\"StockMoney\") StockMoney from lmep_bi_equipmentanalysis where \"Equipment_Type\"='" + bdtype + "' group by \"DateTime\")tt where tt.DateTime = to_char(sysdate, 'yyyyMM')";
DataTable dt = ClassDB.db_select_all(sql);
if (dt.Rows.Count>0)
{
benbyZ = reBinArrayTwo(dt, "type", "Quantity");
}
//饼状图领用分析
string sqlbyBen = "select distinct \"SpareParts_Attribute\" SpareParts_Attribute,sum(\"OutStockQuantity\") as OutStockQuantity from lmep_bi_equipmentanalysis where \"DateTime\" = to_char(sysdate, 'yyyyMM') and \"Equipment_Type\"='" + bdtype + "' group by \"DateTime\",\"SpareParts_Attribute\" order by \"SpareParts_Attribute\"";
DataTable byBen = ClassDB.db_select_all(sqlbyBen);
if (byBen.Rows.Count>0)
{
benbyLY = reBinArrayTwo(byBen, "SpareParts_Attribute", "OutStockQuantity");
}
//明细数据
string sqlM = "select \"DateTime\" as DateTime, \"Equipment_Type\" as Equipment_Type, \"Equipment_Name\" as Equipment_Name, \"SpareParts_Name\" as SpareParts_Name, \"SpareParts_Attribute\" as SpareParts_Attribute, sum(\"PurchaseQuantity\") as PurchaseQuantity, sum(\"PurchaseMoney\") as PurchaseMoney, sum(\"StockQuantity\") as StockQuantity, sum(\"StockMoney\") as StockMoney, sum(\"OutStockQuantity\") as OutStockQuantity, sum(\"OutStockMoney\") as OutStockMoney from lmep_bi_equipmentanalysis where \"DateTime\" = to_char(sysdate, 'yyyyMM') and \"Equipment_Type\"='" + bdtype + "' group by \"DateTime\",\"Equipment_Type\",\"Equipment_Name\",\"SpareParts_Name\",\"SpareParts_Attribute\" order by \"Equipment_Type\"";
DataTable dtM = ClassDB.db_select_all(sqlM);
if (dtM.Rows.Count>0)
{
jsonM = "[";
jsonM += "{\"totals\":\"8\",\"pages\":\"1\",\"recordss\":\"8\",\"rootlist\":[";
for (int i = 0; i < dtM.Rows.Count; i++)
{
jsonM += "{\"DateTime\":\"" + Convert.ToString(dtM.Rows[i]["DateTime"]) + "\"" +
",\"Equipment_Type\":\"" + Convert.ToString(dtM.Rows[i]["Equipment_Type"]) + "\"" +
",\"Equipment_Name\":\"" + Convert.ToString(dtM.Rows[i]["Equipment_Name"]) + "\"" +
",\"SpareParts_Name\":\"" + Convert.ToString(dtM.Rows[i]["SpareParts_Name"]) + "\"" +
",\"SpareParts_Attribute\":\"" + Convert.ToString(dtM.Rows[i]["SpareParts_Attribute"]) + "\"" +
",\"PurchaseQuantity\":\"" + Convert.ToString(dtM.Rows[i]["PurchaseQuantity"]) + "\"" +
",\"PurchaseMoney\":\"" + Convert.ToString(dtM.Rows[i]["PurchaseMoney"]) + "\"" +
",\"StockQuantity\":\"" + Convert.ToString(dtM.Rows[i]["StockQuantity"]) + "\"" +
",\"StockMoney\":\"" + Convert.ToString(dtM.Rows[i]["StockMoney"]) + "\"" +
",\"OutStockQuantity\":\"" + Convert.ToString(dtM.Rows[i]["OutStockQuantity"]) + "\"" +
",\"OutStockMoney\":\"" + Convert.ToString(dtM.Rows[i]["OutStockMoney"]) + "\"},";
}
jsonM = jsonM.Substring(0, jsonM.Length - 1);
jsonM += "]}]";
}
}
if (id == "名称柱状图")
{
//类型柱状by名称
string sqlbyname = "select distinct \"Equipment_Type\" Equipment_Type ,nvl(tt.OutStockQuantity, 0) OutStockQuantity from lmep_bi_equipmentanalysis a left join (select distinct \"Equipment_Type\" Equipment_Type ,sum(\"OutStockQuantity\") as OutStockQuantity from lmep_bi_equipmentanalysis where \"DateTime\" = to_char(sysdate, 'yyyyMM') and \"Equipment_Name\"='" + bdtype + "' group by \"DateTime\",\"Equipment_Type\" order by \"Equipment_Type\") tt on a.\"Equipment_Type\" = tt.Equipment_Type";
DataTable byname = ClassDB.db_select_all(sqlbyname);
if (byname.Rows.Count>0)
{
tempbynameS = reArray(byname, "Equipment_Type");
tempbynameN = reArray(byname, "OutStockQuantity");
}
//饼状图总体分析
string sql = "select * from (select \"DateTime\" as DateTime , '采购' as type ,sum( \"PurchaseQuantity\" ) Quantity ,sum(\"PurchaseMoney\") Money from lmep_bi_equipmentanalysis where \"Equipment_Name\"='" + bdtype + "' group by \"DateTime\" union all select \"DateTime\", '领用' as type1 ,sum(\"OutStockQuantity\") OutStockQuantity ,sum(\"OutStockMoney\") OutStockMoney from lmep_bi_equipmentanalysis where \"Equipment_Name\"='" + bdtype + "' group by \"DateTime\" union all select \"DateTime\", '在库' as type1 ,sum(\"StockQuantity\") StockQuantity ,sum(\"StockMoney\") StockMoney from lmep_bi_equipmentanalysis where \"Equipment_Name\"='" + bdtype + "' group by \"DateTime\")tt where tt.DateTime = to_char(sysdate, 'yyyyMM')";
DataTable dt = ClassDB.db_select_all(sql);
if (dt.Rows.Count>0)
{
benbyZ = reBinArrayTwo(dt, "type", "Quantity");
}
//饼状图领用分析
string sqlbyBen = "select distinct \"SpareParts_Attribute\" SpareParts_Attribute,sum(\"OutStockQuantity\") as OutStockQuantity from lmep_bi_equipmentanalysis where \"DateTime\" = to_char(sysdate, 'yyyyMM') and \"Equipment_Name\"='" + bdtype + "' group by \"DateTime\",\"SpareParts_Attribute\" order by \"SpareParts_Attribute\"";
DataTable byBen = ClassDB.db_select_all(sqlbyBen);
if (byBen.Rows.Count>0)
{
benbyLY = reBinArrayTwo(byBen, "SpareParts_Attribute", "OutStockQuantity");
}
//明细数据
string sqlM = "select \"DateTime\" as DateTime, \"Equipment_Type\" as Equipment_Type, \"Equipment_Name\" as Equipment_Name, \"SpareParts_Name\" as SpareParts_Name, \"SpareParts_Attribute\" as SpareParts_Attribute, sum(\"PurchaseQuantity\") as PurchaseQuantity, sum(\"PurchaseMoney\") as PurchaseMoney, sum(\"StockQuantity\") as StockQuantity, sum(\"StockMoney\") as StockMoney, sum(\"OutStockQuantity\") as OutStockQuantity, sum(\"OutStockMoney\") as OutStockMoney from lmep_bi_equipmentanalysis where \"DateTime\" = to_char(sysdate, 'yyyyMM') and \"Equipment_Name\"='" + bdtype + "' group by \"DateTime\",\"Equipment_Type\",\"Equipment_Name\",\"SpareParts_Name\",\"SpareParts_Attribute\" order by \"Equipment_Type\"";
DataTable dtM = ClassDB.db_select_all(sqlM);
if (dtM.Rows.Count>0)
{
jsonM = "[";
jsonM += "{\"totals\":\"8\",\"pages\":\"1\",\"recordss\":\"8\",\"rootlist\":[";
for (int i = 0; i < dtM.Rows.Count; i++)
{
jsonM += "{\"DateTime\":\"" + Convert.ToString(dtM.Rows[i]["DateTime"]) + "\"" +
",\"Equipment_Type\":\"" + Convert.ToString(dtM.Rows[i]["Equipment_Type"]) + "\"" +
",\"Equipment_Name\":\"" + Convert.ToString(dtM.Rows[i]["Equipment_Name"]) + "\"" +
",\"SpareParts_Name\":\"" + Convert.ToString(dtM.Rows[i]["SpareParts_Name"]) + "\"" +
",\"SpareParts_Attribute\":\"" + Convert.ToString(dtM.Rows[i]["SpareParts_Attribute"]) + "\"" +
",\"PurchaseQuantity\":\"" + Convert.ToString(dtM.Rows[i]["PurchaseQuantity"]) + "\"" +
",\"PurchaseMoney\":\"" + Convert.ToString(dtM.Rows[i]["PurchaseMoney"]) + "\"" +
",\"StockQuantity\":\"" + Convert.ToString(dtM.Rows[i]["StockQuantity"]) + "\"" +
",\"StockMoney\":\"" + Convert.ToString(dtM.Rows[i]["StockMoney"]) + "\"" +
",\"OutStockQuantity\":\"" + Convert.ToString(dtM.Rows[i]["OutStockQuantity"]) + "\"" +
",\"OutStockMoney\":\"" + Convert.ToString(dtM.Rows[i]["OutStockMoney"]) + "\"},";
}
jsonM = jsonM.Substring(0, jsonM.Length - 1);
jsonM += "]}]";
}
}
if (id == "领用分析饼状图")
{
//类型柱状by名称
string sqlbynameL = "select distinct \"Equipment_Type\" Equipment_Type ,nvl(tt.OutStockQuantity, 0) OutStockQuantity from lmep_bi_equipmentanalysis a left join (select distinct \"Equipment_Type\" Equipment_Type ,sum(\"OutStockQuantity\") as OutStockQuantity from lmep_bi_equipmentanalysis where \"DateTime\" = to_char(sysdate, 'yyyyMM') and \"SpareParts_Attribute\"='" + bdtype + "' group by \"DateTime\",\"Equipment_Type\" order by \"Equipment_Type\") tt on a.\"Equipment_Type\" = tt.Equipment_Type";
DataTable bynameL = ClassDB.db_select_all(sqlbynameL);
if (bynameL.Rows.Count>0)
{
tempbynameSL = reArray(bynameL, "Equipment_Type");
tempbynameNL = reArray(bynameL, "OutStockQuantity");
}
//领用数量by名称
string sqlbyname = "select distinct \"Equipment_Name\" Equipment_Name,sum(\"OutStockQuantity\") as OutStockQuantity from lmep_bi_equipmentanalysis where \"DateTime\" = to_char(sysdate, 'yyyyMM') and \"SpareParts_Attribute\"='" + bdtype + "' group by \"DateTime\",\"Equipment_Name\" order by \"Equipment_Name\"";
DataTable byname = ClassDB.db_select_all(sqlbyname);
if (byname.Rows.Count>0)
{
tempbynameS = reArray(byname, "Equipment_Name");
tempbynameN = reArray(byname, "OutStockQuantity");
}
//饼状图总体分析
string sql = "select * from (select \"DateTime\" as DateTime , '采购' as type ,sum( \"PurchaseQuantity\" ) Quantity ,sum(\"PurchaseMoney\") Money from lmep_bi_equipmentanalysis where \"SpareParts_Attribute\"='" + bdtype + "' group by \"DateTime\" union all select \"DateTime\", '领用' as type1 ,sum(\"OutStockQuantity\") OutStockQuantity ,sum(\"OutStockMoney\") OutStockMoney from lmep_bi_equipmentanalysis where \"SpareParts_Attribute\"='" + bdtype + "' group by \"DateTime\" union all select \"DateTime\", '在库' as type1 ,sum(\"StockQuantity\") StockQuantity ,sum(\"StockMoney\") StockMoney from lmep_bi_equipmentanalysis where \"SpareParts_Attribute\"='" + bdtype + "' group by \"DateTime\")tt where tt.DateTime = to_char(sysdate, 'yyyyMM')";
DataTable dt = ClassDB.db_select_all(sql);
if (dt.Rows.Count>0)
{
benbyZ = reBinArrayTwo(dt, "type", "Quantity");
}
//明细数据
string sqlM = "select \"DateTime\" as DateTime, \"Equipment_Type\" as Equipment_Type, \"Equipment_Name\" as Equipment_Name, \"SpareParts_Name\" as SpareParts_Name, \"SpareParts_Attribute\" as SpareParts_Attribute, sum(\"PurchaseQuantity\") as PurchaseQuantity, sum(\"PurchaseMoney\") as PurchaseMoney, sum(\"StockQuantity\") as StockQuantity, sum(\"StockMoney\") as StockMoney, sum(\"OutStockQuantity\") as OutStockQuantity, sum(\"OutStockMoney\") as OutStockMoney from lmep_bi_equipmentanalysis where \"DateTime\" = to_char(sysdate, 'yyyyMM') and \"SpareParts_Attribute\"='" + bdtype + "' group by \"DateTime\",\"Equipment_Type\",\"Equipment_Name\",\"SpareParts_Name\",\"SpareParts_Attribute\" order by \"Equipment_Type\"";
DataTable dtM = ClassDB.db_select_all(sqlM);
if (dtM.Rows.Count>0)
{
jsonM = "[";
jsonM += "{\"totals\":\"8\",\"pages\":\"1\",\"recordss\":\"8\",\"rootlist\":[";
for (int i = 0; i < dtM.Rows.Count; i++)
{
jsonM += "{\"DateTime\":\"" + Convert.ToString(dtM.Rows[i]["DateTime"]) + "\"" +
",\"Equipment_Type\":\"" + Convert.ToString(dtM.Rows[i]["Equipment_Type"]) + "\"" +
",\"Equipment_Name\":\"" + Convert.ToString(dtM.Rows[i]["Equipment_Name"]) + "\"" +
",\"SpareParts_Name\":\"" + Convert.ToString(dtM.Rows[i]["SpareParts_Name"]) + "\"" +
",\"SpareParts_Attribute\":\"" + Convert.ToString(dtM.Rows[i]["SpareParts_Attribute"]) + "\"" +
",\"PurchaseQuantity\":\"" + Convert.ToString(dtM.Rows[i]["PurchaseQuantity"]) + "\"" +
",\"PurchaseMoney\":\"" + Convert.ToString(dtM.Rows[i]["PurchaseMoney"]) + "\"" +
",\"StockQuantity\":\"" + Convert.ToString(dtM.Rows[i]["StockQuantity"]) + "\"" +
",\"StockMoney\":\"" + Convert.ToString(dtM.Rows[i]["StockMoney"]) + "\"" +
",\"OutStockQuantity\":\"" + Convert.ToString(dtM.Rows[i]["OutStockQuantity"]) + "\"" +
",\"OutStockMoney\":\"" + Convert.ToString(dtM.Rows[i]["OutStockMoney"]) + "\"},";
}
jsonM = jsonM.Substring(0, jsonM.Length - 1);
jsonM += "]}]";
}
}
Response.Write(tempbynameS+"|"+ tempbynameN+"|"+ benbyZ+"|"+ benbyLY+"|"+ jsonM+"|"+ tempbynameSL+"|"+ tempbynameNL);
Response.End();
}
/// <summary>
/// 返回一个数组字符串
/// </summary>
/// <param name="dat">datable</param>
/// <param name="clounm">表列名</param>
/// <returns></returns>
public string reArray(DataTable dat,string clounm)
{
string tempbytypeS = "[";
foreach (DataRow dr in dat.Rows)
{
//temp[n] = dr["Equipment_Type"].ToString();//字段
tempbytypeS += "\"" + dr[clounm].ToString() + "\",";
}
tempbytypeS = tempbytypeS.Substring(0, tempbytypeS.Length - 1);
tempbytypeS += "]";
return tempbytypeS;
}
/// <summary>
/// 返回饼状图所需的数据格式
/// </summary>
/// <param name="dat"></param>
/// <param name="clounm1"></param>
/// <param name="clounm2"></param>
/// <returns></returns>
public string reBinArray(DataTable dat, string clounm1, string clounm2)
{
string tempbytypeS = "[";
foreach (DataRow dr in dat.Rows)
{
//temp[n] = dr["Equipment_Type"].ToString();//字段
tempbytypeS += "{ value: "+dr[clounm2].ToString()+ ", name: '"+ dr[clounm1].ToString() + "' },";
}
tempbytypeS = tempbytypeS.Substring(0, tempbytypeS.Length - 1);
tempbytypeS += "]";
return tempbytypeS;
}
/// <summary>
/// Ajax返回饼状图所需的数据格式
/// </summary>
/// <param name="dat"></param>
/// <param name="clounm1"></param>
/// <param name="clounm2"></param>
/// <returns></returns>
public string reBinArrayTwo(DataTable dat, string clounm1, string clounm2)
{
string tempbytypevalue = "";
string tempbytypename = "";
foreach (DataRow dr in dat.Rows)
{
//temp[n] = dr["Equipment_Type"].ToString();//字段
tempbytypevalue += dr[clounm2].ToString() + ";";
tempbytypename += dr[clounm1].ToString() + ";";
}
string tempbytypeS = tempbytypevalue.Substring(0, tempbytypevalue.Length - 1)+"="+ tempbytypename.Substring(0, tempbytypename.Length - 1);
return tempbytypeS;
}
}
<%@ Page Language=“C#” AutoEventWireup=“true” CodeFile=“WMS_BITWO.aspx.cs” Inherits=“WMS_WMS_BITWO” %>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../jqgrid/jquery.jqGrid.js"></script>
<script type="text/javascript" src="../jqgrid/grid.locale-cn.js"></script>
<style type="text/css">
.leftDivBgColor {
background-color: rgba(231, 247, 251, 1);
}
.rightUpDivBgC {
background-color: rgba(231, 247, 251, 1);
}
#outMain {
width: 98%;
height: 95%;
position: absolute;
margin-left: 1%;
margin-top: 1%;
border: 1px solid #ffffff;
}
#leftDiv {
width: 28%;
height: 100%;
float: left;
position: relative;
/*border: 1px solid blue;*/
}
#rightUpDiv {
width: 70%;
height: 48%;
float: right;
position: relative;
/*border: 1px solid black;*/
left: -10px;
}
#rightDowDiv {
width: 70%;
height: 48%;
float: right;
position: relative;
/*border: 1px solid #00ff21;*/
bottom: -10px;
left: -10px;
/*overflow:scroll;*/
/*//overflow-x: hidden;
//overflow-y: hidden;*/
}
#leftDivOne {
width: 100%;
height: 35%;
float: left;
position: relative;
/*border: 1px solid blue;*/
}
#leftDivTwo {
width: 100%;
height: 32%;
float: left;
position: relative;
margin-top:3px;
/*border: 1px solid blue;*/
}
#leftDivThree {
width: 100%;
height: 33%;
float: left;
position: relative;
margin-top:3px;
/*border: 1px solid blue;*/
}
#rightUpDivOne {
width: 49%;
height: 100%;
float: left;
position: relative;
/*border: 1px solid #00ff21;*/
}
#rightUpDivTwo {
width: 48%;
height: 100%;
float: right;
position: relative;
/*border: 1px solid #00ff21;*/
overflow: auto;
}
#leftDivOnetable {
position: relative;
}
</style>
<script type="text/javascript">
//var jqgrid_jsonZ = [];//总体情况表格数据源
//var jqgrid_jsonM = [];//运行情况表格数据源
//var datax1 = [];var datasS1 = [];var datasG1 = [];//设备工作时间vs故障停机时间分析 x轴和y轴
//var datax2= [];var datas2 = [];//设备故障停机时间(小时) x轴和y轴
//var datax3= [];var datas3 = [];//设备维修费用(元) x轴和y轴
$(function () {
/----------------设备工作时间vs故障停机时间分析------------\\\\\\\\\\\\\\\\\\\\\
//基于准备好的dom 初始化echarts实例
var myChart = echarts.init(document.getElementById("rightUpDiv"));
//指定图表的配置项和数据
var option = {
toolbox: {
show: true,
feature: {
saveAsImage: { show: true },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true }
},
},
title: {
text: '设备工作时间vs故障停机时间分析',
x: 'left',
textStyle: {//标题内容的样式
color: '#ffffff',//京东红
fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
fontWeight: "bold",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
fontFamily: "san-serif",//主题文字字体，默认微软雅黑
fontSize: 13//主题文字字体大小，默认为18px
},
padding: [4, 450, 4, 2],
backgroundColor: '#5c9ccc'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value',
boundaryGap: [0, 0]
},
xAxis: {
type: 'category',
data: datax1,
axisLabel: {
interval: 0,
rotate: 25,
fontSize: 8,
fontWeight: 'lighter'
},
},
series: [
{
name: '工作时间',
type: 'bar',
data: datasS1,
itemStyle: {
//通常情况下：
normal: {
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
var colorList = ['rgb(164,205,238)', 'rgb(42,170,227)', 'rgb(25,46,94)', 'rgb(195,229,235)'];
return colorList[params.dataIndex];
}
},
//设置数值显示
normal: { label: { show: true, position: 'top' } }
},
},
{
name: '故障停机时间',
type: 'bar',
data: datasG1,
itemStyle: {
//通常情况下：
normal: {
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
var colorList = ['rgb(195,229,235)', 'rgb(164,205,238)', 'rgb(42,170,227)', 'rgb(25,46,94)'];
return colorList[params.dataIndex];
}
},
//设置数值显示
normal: { label: { show: true, position: 'top' } }
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
/----------------设备工作时间vs故障停机时间分析------------\\\\\\\\\\\\\\\\\\\\\
/----------------设备故障停机时间(小时)------------\\\\\\\\\\\\\\\\\\\\\
var myChartThree = echarts.init(document.getElementById("leftDivTwo"));
var optionThree = {
toolbox: {
show: true,
feature: {
saveAsImage: { show: true },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true }
},
},
title: {
text: '设备故障停机时间(小时)',
x: 'left',
textStyle: {//标题内容的样式
color: '#ffffff',//京东红
fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
fontWeight: "bold",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
fontFamily: "san-serif",//主题文字字体，默认微软雅黑
fontSize: 13//主题文字字体大小，默认为18px
},
//padding: [10, 150, 10, 50],
backgroundColor: '#5c9ccc'
},
calculable: true,
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}"
},
xAxis: {
type: 'category',
data: datax2,
axisLine: { show: true }, //坐标轴
axisLabel: {
interval: 0,
rotate: 25,
fontSize: 8,
fontWeight: 'lighter'
},
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.1],
show: true,
splitNumber: 1,
},
series: [
{
name: '停机时间(小时)',
type: 'bar',
data: datas2,
itemStyle: {
//通常情况下：
normal: {
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
var colorList = ['rgb(164,205,238)', 'rgb(42,170,227)', 'rgb(25,46,94)', 'rgb(195,229,235)'];
return colorList[params.dataIndex];
}
},
//设置数值显示
normal: { label: { show: true, position: 'top' } }
},
}
]
};
myChartThree.setOption(optionThree);
/----------------设备故障停机时间(小时)------------\\\\\\\\\\\\\\\\\\\\\
/----------------设备维修费用(元)------------\\\\\\\\\\\\\\\\\\\\\
var myChartFour = echarts.init(document.getElementById("leftDivThree"));
var optionFour = {
toolbox: {
show: true,
feature: {
saveAsImage: { show: true },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true }
},
},
title: {
text: '设备维修费用(元)',
x: 'left',
textStyle: {//标题内容的样式
color: '#ffffff',//京东红
fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
fontWeight: "bold",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
fontFamily: "san-serif",//主题文字字体，默认微软雅黑
fontSize: 13,//主题文字字体大小，默认为18px
},
padding: [4, 50, 4, 2],
backgroundColor: '#5c9ccc'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}"
},
xAxis: {
type: 'category',
data: datax3,
axisLine: { show: true }, //坐标轴
axisLabel: {
interval: 0,
rotate: 25,
fontSize: 8,
fontWeight: 'lighter'
},
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.1],
show: true,
splitNumber: 1,
axisLabel: {
interval: 0,
rotate: 30,
fontSize: 8,
fontWeight: 'lighter'
},
},
series: [
{
name: '设备维修费用(元)',
type: 'bar',
data: datas3,
itemStyle: {
//通常情况下：
normal: {
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
var colorList = ['rgb(164,205,238)', 'rgb(42,170,227)', 'rgb(25,46,94)', 'rgb(195,229,235)'];
return colorList[params.dataIndex];
}
},
//设置数值显示
normal: { label: { show: true, position: 'top' } }
},
}
]
};
myChartFour.setOption(optionFour);
/----------------设备维修费用(元)------------\\\\\\\\\\\\\\\\\\\\\
///点击事件
//点击数据还原事件 （点击左上角第一个table即可还原）
$("#leftDivOnetable").click(function () {
if ($(this).attr("id") == "leftDivOnetable") {
myChart.setOption(option);
myChartThree.setOption(optionThree);
myChartFour.setOption(optionFour);
jQuery("#rightDowDivtable").jqGrid("clearGridData");
AddData("明细统计");
}
});
///设备工作时间vs故障停机时间分析 点击事件
myChart.on('click', function (params) {
$.ajax({
url: "WMS_BITWO.aspx",
type: "Post",
dataType: "text", //请求到服务器返回的数据类型
data: {
"id": "设备运行故障时间",
"bdtype": params.name
},
success: function (data) {
//jqgrid_json = $.parseJSON(data);
var typeMC = data.split('|');
//设备故障停机时间(小时)
var tempbynameS = HandleFormat(typeMC[4], "柱状图");
var tempbynameN = HandleFormat(typeMC[5], "柱状图");
var optionThree = myChartThree.getOption();
optionThree.series[0].data = tempbynameN;
optionThree.xAxis[0].data = tempbynameS;
myChartThree.setOption(optionThree);
//设备维修费用(元)
var tempbynameS = HandleFormat(typeMC[6], "柱状图");
var tempbynameN = HandleFormat(typeMC[7], "柱状图");
var optionFour = myChartFour.getOption();
optionFour.series[0].data = tempbynameN;
optionFour.xAxis[0].data = tempbynameS;
myChartFour.setOption(optionFour);
//重新加载明细
jqgrid_jsonMM = $.parseJSON(typeMC[0]);
jQuery("#rightDowDivtable").jqGrid("clearGridData");
$("#rightDowDivtable").jqGrid('setGridParam', { // 重新加载数据
datatype: 'local',
data: jqgrid_jsonMM[0].rootlist, // newdata 是符合格式要求的需要重新加载的数据
}).trigger("reloadGrid");
}
})
});
//设备故障停机时间(小时)
myChartThree.on('click', function (params) {
$.ajax({
url: "WMS_BITWO.aspx",
type: "Post",
dataType: "text", //请求到服务器返回的数据类型
data: {
"id": "故障停机时间",
"bdtype": params.name
},
success: function (data) {
//jqgrid_json = $.parseJSON(data);
var typeMC = data.split('|');
//设备工作时间vs故障停机时间分析
var tempbynameS = HandleFormat(typeMC[1], "柱状图");
var tempbynameN = HandleFormat(typeMC[2], "柱状图");
var tempbynameN2 = HandleFormat(typeMC[3], "柱状图");
var option = myChart.getOption();
option.series[0].data = tempbynameN;
option.series[0].data = tempbynameN2;
option.xAxis[0].data = tempbynameS;
myChart.setOption(option);
//设备维修费用(元)
var tempbynameS = HandleFormat(typeMC[6], "柱状图");
var tempbynameN = HandleFormat(typeMC[7], "柱状图");
var optionFour = myChartFour.getOption();
optionFour.series[0].data = tempbynameN;
optionFour.xAxis[0].data = tempbynameS;
myChartFour.setOption(optionFour);
//重新加载明细
jqgrid_jsonMM = $.parseJSON(typeMC[0]);
jQuery("#rightDowDivtable").jqGrid("clearGridData");
$("#rightDowDivtable").jqGrid('setGridParam', { // 重新加载数据
datatype: 'local',
data: jqgrid_jsonMM[0].rootlist, // newdata 是符合格式要求的需要重新加载的数据
}).trigger("reloadGrid");
}
})
});
//设备维修费用(元)
myChartFour.on('click', function (params) {
$.ajax({
url: "WMS_BITWO.aspx",
type: "Post",
dataType: "text", //请求到服务器返回的数据类型
data: {
"id": "设备维修费用",
"bdtype": params.name
},
success: function (data) {
//jqgrid_json = $.parseJSON(data);
var typeMC = data.split('|');
//设备工作时间vs故障停机时间分析
var tempbynameS = HandleFormat(typeMC[1], "柱状图");
var tempbynameN = HandleFormat(typeMC[2], "柱状图");
var tempbynameN2 = HandleFormat(typeMC[3], "柱状图");
var option = myChart.getOption();
option.series[0].data = tempbynameN;
option.series[0].data = tempbynameN2;
option.xAxis[0].data = tempbynameS;
myChart.setOption(option);
//设备故障停机时间(小时)
var tempbynameS = HandleFormat(typeMC[4], "柱状图");
var tempbynameN = HandleFormat(typeMC[5], "柱状图");
var optionThree = myChartThree.getOption();
optionThree.series[0].data = tempbynameN;
optionThree.xAxis[0].data = tempbynameS;
myChartThree.setOption(optionThree);
//重新加载明细
jqgrid_jsonMM = $.parseJSON(typeMC[0]);
jQuery("#rightDowDivtable").jqGrid("clearGridData");
$("#rightDowDivtable").jqGrid('setGridParam', { // 重新加载数据
datatype: 'local',
data: jqgrid_jsonMM[0].rootlist, // newdata 是符合格式要求的需要重新加载的数据
}).trigger("reloadGrid");
}
})
});
$("#leftDivOnetable").jqGrid({
datatype: "local",
cellEdit: true,
height: 110,//$(window).height() - 200,
width: 315,
colNames: ['日期', '类型', '数值'],
colModel: [
{ name: 'DATETIME', index: 'DATETIME', width: 20, align: "center", sorttype: "text", sortable: false },
{ name: 'TYPEKEY', index: 'TYPEKEY', width: 40, align: "center", sorttype: "text", sortable: false },
{ name: 'DATANUMBER', index: 'DATANUMBER', width: 20, align: "center", sortable: false },
],
viewrecords: true,
sortable: true,
//sortorder: 'asc',
cellsubmit: 'clientArray',
caption: "总体情况"
});
$("#rightDowDivtable").jqGrid({
datatype: "local",
cellEdit: true,
height: 160,//$(window).height() - 200,
width: 790,
colNames: ['日期', '设备类型', '设备名称', '实际运行效率', '工作时间(小时)', "故障次数", '故障停机时间(小时)', '备件更换次数', '维修费用(元)'],
colModel: [
{ name: 'DATETIME', index: 'DATETIME', width: 50, align: "center", hidden: false },
{ name: 'EQUIPMENT_TYPE', index: 'EQUIPMENT_TYPE', width: 100, align: "center", sorttype: "text", sortable: false },
{ name: 'EQUIPMENT_NAME', index: 'EQUIPMENT_NAME', width: 100, align: "center", sortable: false },
{ name: 'OPERATINGEFFICIENCYFAC', index: 'OPERATINGEFFICIENCYFAC', width: 60, align: "center", sortable: false },
{ name: 'WORK_HOUR', index: 'WORK_HOUR', width: 95, align: "center", sorttype: "number", sortable: false },
{ name: 'FAILURES_NUMBER', index: 'FAILURES_NUMBER', width: 60, align: "center", sorttype: "number", sortable: false },
{ name: 'FAILURES_HOUR', index: 'FAILURES_HOUR', width: 80, align: "center", sorttype: "number", sortable: false },
{ name: 'REPLACE_NUMBER', index: 'REPLACE_NUMBER', width: 60, align: "center", sorttype: "number", sortable: false },
{ name: 'MAINTENANCE_COST', index: 'MAINTENANCE_COST', width: 80, align: "center", sorttype: "number", sortable: false },
],
pager: "#pager_list_2",
viewrecords: true,
hidegrid: true,
rowNum: 10, //每页显示记录数
viewrecords: true, //是否显示行数
rowList: [10, 30, 50], //可调整每页显示的记录数
multiselect: false, //是否支持多选
rowNum: 50,
cellsubmit: 'clientArray',
loadonce: true,
rownumbers: true,
shrinkToFit: false,
autoScroll: true,
caption: "设备运行情况分析表"
});
AddData("总体情况");
AddData("明细统计");
$(window).resize(function () {
$(window).unbind("onresize");
$("#leftDivOnetable").setGridHeight($(window).height() - 540);
$("#leftDivOnetable").setGridWidth($(window).width() - 1050);
$("#rightDowDivtable").setGridHeight($(window).height() - 520);
$("#rightDowDivtable").setGridWidth($(window).width() - 600);
$(window).bind("onresize", this);
});
});
//表格加载数据
function AddData(type) {
if (type == "总体情况") {
$("#leftDivOnetable").jqGrid('setGridParam', { // 重新加载数据
datatype: 'local',
data: jqgrid_jsonZ[0].rootlist, // newdata 是符合格式要求的需要重新加载的数据
}).trigger("reloadGrid");
}
if (type == "明细统计") {
$("#rightDowDivtable").jqGrid('setGridParam', { // 重新加载数据
datatype: 'local',
data: jqgrid_jsonM[0].rootlist, // newdata 是符合格式要求的需要重新加载的数据
}).trigger("reloadGrid");
}
}
//处理柱状图/饼状图通过ajax返回回来的数据格式
function HandleFormat(typeArray, typename) {
if (typename == "柱状图") {
var tempbynameS = typeArray.substr(1, typeArray.length - 2).split(',');
for (var i = 0; i < tempbynameS.length; i++) {
tempbynameS[i] = tempbynameS[i].replace("\"", "").replace("\"", "");
}
return tempbynameS;
}
if (typename == "饼状图") {
var reBenValue = "[";
var tempbynameS = typeArray.split('=');
var reValue = tempbynameS[0].split(';');
var reName = tempbynameS[1].split(';');
for (var j = 0; j < reValue.length; j++) {
reBenValue += "{ value:" + reValue[j] + "," + "name:" + reName[j] + "},";
}
reBenValue += reBenValue.substr(0, typeArray.length - 1);
reBenValue += "]";
return tempbynameS;
}
}
</script>
<%@ Page Language=“C#” AutoEventWireup=“true” CodeFile=“WMS_BITHREE.aspx.cs” Inherits=“WMS_WMS_BITHREE” %>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../jqgrid/jquery.jqGrid.js"></script>
<script type="text/javascript" src="../jqgrid/grid.locale-cn.js"></script>
<style type="text/css">
.leftDivBgColor {
background-color: rgba(231, 247, 251, 1);
}
.rightUpDivBgC {
background-color: rgba(231, 247, 251, 1);
}
#outMain {
width: 98%;
height: 95%;
position: absolute;
margin-left: 1%;
margin-top: 1%;
border: 1px solid #ffffff;
}
#leftDiv {
width: 28%;
height: 100%;
float: left;
position: relative;
/*border: 1px solid blue;*/
}
#rightUpDiv {
width: 70%;
height: 48%;
float: right;
position: relative;
/*border: 1px solid black;*/
left: -10px;
}
#rightDowDiv {
width: 70%;
height: 48%;
float: right;
position: relative;
/*border: 1px solid #00ff21;*/
bottom: -10px;
left: -10px;
/*overflow:scroll;*/
/*//overflow-x: hidden;
//overflow-y: hidden;*/
}
#leftDivOne {
width: 100%;
height: 35%;
float: left;
position: relative;
/*border: 1px solid blue;*/
}
#leftDivTwo {
width: 100%;
height: 60%;
float: left;
position: relative;
margin-top: 3px;
/*border: 1px solid blue;*/
}
#leftDivThree {
width: 100%;
height: 33%;
float: left;
position: relative;
margin-top: 3px;
/*border: 1px solid blue;*/
}
#rightUpDivOne {
width: 49%;
height: 100%;
float: left;
position: relative;
border: 0px solid #ffffff;
}
#rightUpDivTwo {
width: 50%;
height: 100%;
float: right;
position: relative;
border: 1px solid #ffffff;
}
#leftDivOnetable {
position: relative;
}
</style>
<script type="text/javascript">
var jqgrid_jsonZ = [];//总体情况表格数据源
var jqgrid_jsonM = [];//运行情况表格数据源
var datax1 = []; var datasS1 = []; var datasG1 = [];//设备工作时间vs故障停机时间分析 x轴和y轴
var datax2 = []; var datas2 = [];//设备故障停机时间(小时) x轴和y轴
var datax3 = []; var datas3 = [];//设备维修费用(元) x轴和y轴
$(function () {
/----------------维修时长by故障区域------------\\\\\\\\\\\\\\\\\\\\\
//基于准备好的dom 初始化echarts实例
var myChart = echarts.init(document.getElementById("rightUpDivOne"));
//指定图表的配置项和数据
var option = {
toolbox: {
show: true,
feature: {
saveAsImage: { show: true },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true }
},
},
title: {
text: '维修时长by故障区域',
x: 'left',
textStyle: {//标题内容的样式
color: '#ffffff',//京东红
fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
fontWeight: "bold",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
fontFamily: "san-serif",//主题文字字体，默认微软雅黑
fontSize: 13//主题文字字体大小，默认为18px
},
//padding: [4, 450, 4, 2],
backgroundColor: '#5c9ccc'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0]
},
yAxis: {
type: 'category',
data: datax2,
axisLabel: {
interval: 0,
rotate: 25,
fontSize: 8,
fontWeight: 'lighter'
},
},
series: [
{
name: '维修时长',
type: 'bar',
data: datas2,
itemStyle: {
//通常情况下：
normal: {
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
var colorList = ['rgb(164,205,238)', 'rgb(42,170,227)', 'rgb(25,46,94)', 'rgb(195,229,235)'];
return colorList[params.dataIndex];
}
},
//设置数值显示
normal: { label: { show: true, position: 'right' } }
},
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
/----------------维修时长by故障区域------------\\\\\\\\\\\\\\\\\\\\\
///----------------维修人员运维分析------------\\\\\\\\\\\\\\\\\\\\\
var myChartMC = echarts.init(document.getElementById("rightUpDivTwo"));
var optionTwo = {
toolbox: {
show: true,
feature: {
saveAsImage: { show: true },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true }
},
right: 20
},
title: {
text: '维修人员运维分析',
textStyle: {//标题内容的样式
color: '#ffffff',//京东红
fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
fontWeight: "bold",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
fontFamily: "san-serif",//主题文字字体，默认微软雅黑
fontSize: 13//主题文字字体大小，默认为18px
},
backgroundColor: '#5c9ccc'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
type: 'scroll', //----图例类型，默认为'plain'，当图例很多时可使用'scroll'
top: '1%',
},
legeng: {
data: ['数量']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
//show: false,
type: 'value',
boundaryGap: [0, 0.1]
},
xAxis: {
type: 'category',
data: datax1,
axisLine: { show: false }, //坐标轴
axisTick: [{ //坐标轴小标记
show: false
}],
axisLabel: {
interval: 0,
rotate: 25,
fontSize: 8,
fontWeight: 'lighter'
},
},
series: [
{
name: '维护次数',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: datasS1,
itemStyle: {
// 通常情况下：
normal: {
// 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
var colorList = ['#00aff0'];
return colorList[params.dataIndex];
}
},
设置数值显示
normal: { label: { show: true, position: 'right' } }
},
},
{
name: '维护时长',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: datasG1,
itemStyle: {
// 通常情况下：
normal: {
// 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
var colorList = ['#00aff0'];
return colorList[params.dataIndex];
}
},
设置数值显示
normal: { label: { show: true, position: 'right' } }
},
}
],
};
myChartMC.setOption(optionTwo);
///----------------维修人员运维分析------------\\\\\\\\\\\\\\\\\\\\\
/----------------维修费用by故障类型------------\\\\\\\\\\\\\\\\\\\\\
var myChartThree = echarts.init(document.getElementById("leftDivTwo"));
var optionThree = {
toolbox: {
show: true,
feature: {
saveAsImage: { show: true },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true }
},
},
title: {
text: '维修费用by故障类型',
x: 'left',
textStyle: {//标题内容的样式
color: '#ffffff',//京东红
fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
fontWeight: "bold",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
fontFamily: "san-serif",//主题文字字体，默认微软雅黑
fontSize: 13//主题文字字体大小，默认为18px
},
backgroundColor: '#5c9ccc'
},
calculable: true,
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}"
},
xAxis: {
type: 'category',
data: datax3,
axisLine: { show: true }, //坐标轴
axisLabel: {
interval: 0,
rotate: 25,
fontSize: 8,
fontWeight: 'lighter'
},
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.1],
show: true,
splitNumber: 1,
},
series: [
{
name: '维修费用',
type: 'bar',
data: datas3,
itemStyle: {
//通常情况下：
normal: {
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
var colorList = ['rgb(164,205,238)', 'rgb(42,170,227)', 'rgb(25,46,94)', 'rgb(195,229,235)'];
return colorList[params.dataIndex];
}
},
//设置数值显示
normal: { label: { show: true, position: 'top' } }
},
}
]
};
myChartThree.setOption(optionThree);
/----------------维修费用by故障类型------------\\\\\\\\\\\\\\\\\\\\\
///点击事件
//点击数据还原事件 （点击左上角第一个table即可还原）
$("#leftDivOnetable").click(function () {
if ($(this).attr("id") == "leftDivOnetable") {
myChart.setOption(option);
myChartMC.setOption(optionTwo);
myChartThree.setOption(optionThree);
jQuery("#rightDowDivtable").jqGrid("clearGridData");
AddData("明细统计");
}
});
///设备工作时间vs故障停机时间分析 点击事件
myChart.on('click', function (params) {
$.ajax({
url: "WMS_BITHREE.aspx",
type: "Post",
dataType: "text", //请求到服务器返回的数据类型
data: {
"id": "维修时长",
"bdtype": params.name
},
success: function (data) {
//jqgrid_json = $.parseJSON(data);
var typeMC = data.split('|');
//维修人员运维分析
var tempbynameS = HandleFormat(typeMC[1], "柱状图");
var tempbynameN = HandleFormat(typeMC[2], "柱状图");
var tempbynameN2 = HandleFormat(typeMC[3], "柱状图");
var optionThree = myChartMC.getOption();
optionThree.series[0].data = tempbynameN;
optionThree.series[1].data = tempbynameN2;
optionThree.xAxis[0].data = tempbynameS;
myChartMC.setOption(optionThree);
//维修费用by故障类型
var tempbynameS = HandleFormat(typeMC[6], "柱状图");
var tempbynameN = HandleFormat(typeMC[7], "柱状图");
var optionFour = myChartThree.getOption();
optionFour.series[0].data = tempbynameN;
optionFour.xAxis[0].data = tempbynameS;
myChartThree.setOption(optionFour);
//重新加载明细
jqgrid_jsonMM = $.parseJSON(typeMC[0]);
jQuery("#rightDowDivtable").jqGrid("clearGridData");
$("#rightDowDivtable").jqGrid('setGridParam', { // 重新加载数据
datatype: 'local',
data: jqgrid_jsonMM[0].rootlist, // newdata 是符合格式要求的需要重新加载的数据
}).trigger("reloadGrid");
}
})
});
//维修人员运维分析 点击事件
myChartMC.on('click', function (params) {
$.ajax({
url: "WMS_BITHREE.aspx",
type: "Post",
dataType: "text", //请求到服务器返回的数据类型
data: {
"id": "维修人员",
"bdtype": params.name
},
success: function (data) {
//jqgrid_json = $.parseJSON(data);
var typeMC = data.split('|');
//维修时长
var tempbynameS = HandleFormat(typeMC[4], "柱状图");
var tempbynameN = HandleFormat(typeMC[5], "柱状图");
var optionFour = myChart.getOption();
optionFour.series[0].data = tempbynameN;
optionFour.xAxis[0].data = tempbynameS;
myChart.setOption(optionFour);
//设备维修费用(元)
var tempbynameS = HandleFormat(typeMC[6], "柱状图");
var tempbynameN = HandleFormat(typeMC[7], "柱状图");
var optionFour = myChartThree.getOption();
optionFour.series[0].data = tempbynameN;
optionFour.xAxis[0].data = tempbynameS;
myChartThree.setOption(optionFour);
//重新加载明细
jqgrid_jsonMM = $.parseJSON(typeMC[0]);
jQuery("#rightDowDivtable").jqGrid("clearGridData");
$("#rightDowDivtable").jqGrid('setGridParam', { // 重新加载数据
datatype: 'local',
data: jqgrid_jsonMM[0].rootlist, // newdata 是符合格式要求的需要重新加载的数据
}).trigger("reloadGrid");
}
})
});
//维修费用by故障类型
myChartThree.on('click', function (params) {
$.ajax({
url: "WMS_BITHREE.aspx",
type: "Post",
dataType: "text", //请求到服务器返回的数据类型
data: {
"id": "维修费用",
"bdtype": params.name
},
success: function (data) {
//jqgrid_json = $.parseJSON(data);
var typeMC = data.split('|');
//设备工作时间vs故障停机时间分析
var tempbynameS = HandleFormat(typeMC[1], "柱状图");
var tempbynameN = HandleFormat(typeMC[2], "柱状图");
var tempbynameN2 = HandleFormat(typeMC[3], "柱状图");
var option = myChartMC.getOption();
option.series[0].data = tempbynameN;
option.series[0].data = tempbynameN2;
option.xAxis[0].data = tempbynameS;
myChartMC.setOption(option);
//维修时长
var tempbynameS = HandleFormat(typeMC[4], "柱状图");
var tempbynameN = HandleFormat(typeMC[5], "柱状图");
var optionFour = myChart.getOption();
optionFour.series[0].data = tempbynameN;
optionFour.xAxis[0].data = tempbynameS;
myChart.setOption(optionFour);
//重新加载明细
jqgrid_jsonMM = $.parseJSON(typeMC[0]);
jQuery("#rightDowDivtable").jqGrid("clearGridData");
$("#rightDowDivtable").jqGrid('setGridParam', { // 重新加载数据
datatype: 'local',
data: jqgrid_jsonMM[0].rootlist, // newdata 是符合格式要求的需要重新加载的数据
}).trigger("reloadGrid");
}
})
});
$("#leftDivOnetable").jqGrid({
datatype: "local",
cellEdit: true,
height: 110,//$(window).height() - 200,
width: 315,
colNames: ['日期', '指标', '数值'],
colModel: [
{ name: 'DATETIME', index: 'DATETIME', width: 20, align: "center", sorttype: "text", sortable: false },
{ name: 'TYPEZB', index: 'TYPEZB', width: 40, align: "center", sorttype: "text", sortable: false },
{ name: 'NUMBERSZ', index: 'NUMBERSZ', width: 20, align: "center", sortable: false },
],
viewrecords: true,
sortable: true,
//sortorder: 'asc',
cellsubmit: 'clientArray',
caption: "总体情况"
});
$("#rightDowDivtable").jqGrid({
datatype: "local",
cellEdit: true,
height: 160,//$(window).height() - 200,
width: 790,
colNames: ['日期', '故障区域', '故障具体区域', '故障类型', '故障部件', "维修员", '维修时长(小时)', '维修费用(元)', '维修次数', '维护次数'],
colModel: [
{ name: 'DATETIME', index: 'DATETIME', width: 50, align: "center", hidden: false },
{ name: 'FAULTAREA', index: 'FAULTAREA', width: 60, align: "center", sorttype: "text", sortable: false },
{ name: 'FAULTAREA_SPEC', index: 'FAULTAREA_SPEC', width: 100, align: "center", sortable: false },
{ name: 'FAULT_TYPE', index: 'FAULT_TYPE', width: 60, align: "center", sortable: false },
{ name: 'FAULT_PARTS', index: 'FAULT_PARTS', width: 85, align: "center", sorttype: "number", sortable: false },
{ name: 'REPAIRMAN', index: 'REPAIRMAN', width: 60, align: "center", sorttype: "number", sortable: false },
{ name: 'REPAIR_HOUR', index: 'REPAIR_HOUR', width: 60, align: "center", sorttype: "number", sortable: false },
{ name: 'REPAIR_COSR', index: 'REPAIR_COSR', width: 60, align: "center", sorttype: "number", sortable: false },
{ name: 'REPAIR_TIMES', index: 'REPAIR_TIMES', width: 60, align: "center", sorttype: "number", sortable: false },
{ name: 'MAINTENANCE_TIMES', index: 'MAINTENANCE_TIMES', width: 60, align: "center", sorttype: "number", sortable: false },
],
pager: "#pager_list_2",
viewrecords: true,
hidegrid: true,
rowNum: 10, //每页显示记录数
viewrecords: true, //是否显示行数
rowList: [10, 30, 50], //可调整每页显示的记录数
multiselect: false, //是否支持多选
rowNum: 50,
cellsubmit: 'clientArray',
loadonce: true,
rownumbers: true,
shrinkToFit: false,
autoScroll: true,
caption: "设备运行情况分析表"
});
AddData("总体情况");
AddData("明细统计");
$(window).resize(function () {
$(window).unbind("onresize");
$("#leftDivOnetable").setGridHeight($(window).height() - 540);
$("#leftDivOnetable").setGridWidth($(window).width() - 1050);
$("#rightDowDivtable").setGridHeight($(window).height() - 520);
$("#rightDowDivtable").setGridWidth($(window).width() - 600);
$(window).bind("onresize", this);
});
});
//表格加载数据
function AddData(type) {
if (type == "总体情况") {
$("#leftDivOnetable").jqGrid('setGridParam', { // 重新加载数据
datatype: 'local',
data: jqgrid_jsonZ[0].rootlist, // newdata 是符合格式要求的需要重新加载的数据
}).trigger("reloadGrid");
}
if (type == "明细统计") {
$("#rightDowDivtable").jqGrid('setGridParam', { // 重新加载数据
datatype: 'local',
data: jqgrid_jsonM[0].rootlist, // newdata 是符合格式要求的需要重新加载的数据
}).trigger("reloadGrid");
}
}
//处理柱状图/饼状图通过ajax返回回来的数据格式
function HandleFormat(typeArray, typename) {
if (typename == "柱状图") {
var tempbynameS = typeArray.substr(1, typeArray.length - 2).split(',');
for (var i = 0; i < tempbynameS.length; i++) {
tempbynameS[i] = tempbynameS[i].replace("\"", "").replace("\"", "");
}
return tempbynameS;
}
if (typename == "饼状图") {
var reBenValue = "[";
var tempbynameS = typeArray.split('=');
var reValue = tempbynameS[0].split(';');
var reName = tempbynameS[1].split(';');
for (var j = 0; j < reValue.length; j++) {
reBenValue += "{ value:" + reValue[j] + "," + "name:" + reName[j] + "},";
}
reBenValue += reBenValue.substr(0, typeArray.length - 1);
reBenValue += "]";
return tempbynameS;
}
}
</script>
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
