<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>每日使用情况报表</title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
<script src="../../../layuiadmin/layui/layui.js"></script>
|
<script src="../../../layuiadmin/Scripts/json2.js"></script>
|
<script src="../../../layuiadmin/Scripts/jquery-1.4.1.js"></script>
|
<script src="../../../layuiadmin/Scripts/webConfig.js"></script>
|
<script src="../../../layuiadmin/PubCustom.js"></script>
|
<script src="../../../layuiadmin/zgqCustom/zgqCustom.js"></script>
|
<script src="../../../layuiadmin/HideButton.js"></script>
|
<script src='../../../layuiadmin/lib/extend/echarts.min.js'></script>
|
<style type="text/css">
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
html, body { height: 100%; }
|
.page-container {
|
height: 100%;
|
padding: 10px;
|
background: linear-gradient(180deg, #eef2f5 0%, #e4e8eb 100%);
|
display: flex;
|
flex-direction: column;
|
}
|
.query-bar {
|
background: #fff;
|
padding: 10px 15px;
|
border-radius: 6px;
|
margin-bottom: 10px;
|
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
|
flex-shrink: 0;
|
}
|
.summary-row {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 10px;
|
flex-shrink: 0;
|
}
|
.chart-container {
|
background: #fff;
|
border-radius: 6px;
|
padding: 8px;
|
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
|
flex: 1;
|
overflow: hidden;
|
min-height: 0;
|
}
|
.chart-row { display: flex; height: 100%; }
|
.chart-box { flex: 1; margin: 4px; border: 1px solid #eee; border-radius: 4px; background: #fafbfc; }
|
|
/* 汇总统计卡片样式 */
|
.summary-card {
|
margin: 4px;
|
border: 1px solid #eee;
|
border-radius: 4px;
|
background: #fafbfc;
|
text-align: center;
|
padding: 8px 4px;
|
min-width: 200px;
|
}
|
.summary-card.total-card {
|
background: linear-gradient(135deg, #1e9fff 0%, #5fb3ff 100%);
|
border-color: #1e9fff;
|
}
|
.summary-card.total-card .summary-number,
|
.summary-card.total-card .summary-label { color: #fff; }
|
.summary-number { font-size: 16px; font-weight: bold; color: #1e9fff; }
|
.summary-label { font-size: 11px; color: #888; margin-top: 2px; }
|
</style>
|
</head>
|
<body>
|
<div class="page-container">
|
<!-- 查询栏 -->
|
<div class="query-bar">
|
<form class="layui-form" action="" lay-filter="component-form-group">
|
<div class="layui-inline">
|
<label class="layui-form-label" style="width: 75px;">开始日期</label>
|
<div class="layui-input-inline">
|
<input type="date" class="layui-input" id="HBeginDate" style="width:140px;">
|
</div>
|
</div>
|
<div class="layui-inline">
|
<label class="layui-form-label" style="width: 75px;">结束日期</label>
|
<div class="layui-input-inline">
|
<input type="date" class="layui-input" id="HEndDate" style="width:140px;">
|
</div>
|
</div>
|
<button class="layui-btn layuiadmin-btn-order" type="button" lay-submit="" lay-filter="btnSearch" id="btnSearch">
|
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查询
|
</button>
|
<button class="layui-btn layui-btn-primary layuiadmin-btn-order" type="button" lay-submit="" lay-filter="btnReSearch" id="btnReSearch">重置</button>
|
</form>
|
</div>
|
|
<!-- 汇总统计（动态生成） -->
|
<div class="summary-row" id="summaryRow"></div>
|
|
<!-- 图表区域（动态生成） -->
|
<div class="chart-container" id="chartContainer"></div>
|
</div>
|
|
<script>
|
layui.config({
|
base: '../../../layuiadmin/'
|
}).extend({
|
index: 'lib/index',
|
}).use(['index', 'form', 'element'], function () {
|
|
var $ = layui.$, layer = layui.layer, form = layui.form;
|
var chartInstances = {};
|
var chartConfigKeys = []; // 存储配置key顺序
|
|
//#region ========== 图表配置（新增图表只需在此处添加配置）==========
|
/*
|
* 配置说明：
|
* - chartTitle: 图表标题
|
* - chartType: 图表类型 (pie/bar)
|
* - chartColors: 图表颜色数组
|
* - api: 接口配置
|
* - url: 接口地址
|
* - method: 请求方法 (GET/POST)
|
* - buildParams: 构建参数的函数(beginDate, endDate)
|
* - dataPath: 数据在返回结果中的路径，如 'data' 或 'data.list'
|
* - successCode: 成功的状态码
|
* - statusMap: 状态映射配置
|
* - name: 状态名称
|
* - condition: 判断条件表达式
|
*
|
* 新增图表只需在此处添加配置，页面会自动生成对应的汇总卡片和图表
|
*/
|
var ChartConfig = {
|
// 领用单
|
lingyong: {
|
chartTitle: '领用单统计',
|
chartType: 'pie',
|
chartColors: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
|
api: {
|
url: '/Sc_MouldProdOutBillController/page',
|
method: 'GET',
|
buildParams: function(beginDate, endDate) {
|
return {
|
sWhere: " and 日期 between '" + beginDate + "' and '" + endDate + "'" + " and 往来类型='部门'",
|
user: sessionStorage["HUserName"] || '',
|
page: 1,
|
size: 999999,
|
Type: '3802'
|
};
|
},
|
dataPath: 'data',
|
successCode: 1
|
},
|
statusMap: [
|
{ name: '创建', condition: '审核人=="" || 审核人==null' },
|
{ name: '已审核', condition: '审核人!="" && 审核人!=null && (关闭人=="" || 关闭人==null)' },
|
{ name: '已关闭', condition: '关闭人!="" && 关闭人!=null' }
|
]
|
},
|
// 退库单
|
tuiku: {
|
chartTitle: '退库单统计',
|
chartType: 'pie',
|
chartColors: ['#73c0de', '#3ba272', '#fc8452', '#9a60b4'],
|
api: {
|
url: '/Sc_MouldProdBackBillController/page',
|
method: 'GET',
|
buildParams: function(beginDate, endDate) {
|
return {
|
sWhere: " and 日期 between '" + beginDate + "' and '" + endDate + "'" + " and 往来类型='部门'",
|
user: sessionStorage["HUserName"] || '',
|
page: 1,
|
size: 999999,
|
Type: '3803'
|
};
|
},
|
dataPath: 'data',
|
successCode: 1
|
},
|
statusMap: [
|
{ name: '创建', condition: '审核人=="" || 审核人==null' },
|
{ name: '已审核', condition: '审核人!="" && 审核人!=null' },
|
{ name: '已关闭', condition: '关闭人!="" && 关闭人!=null' }
|
]
|
},
|
// 调拨单
|
diaobo: {
|
chartTitle: '调拨单统计',
|
chartType: 'pie',
|
chartColors: ['#ea7ccc', '#5470c6', '#91cc75', '#fac858'],
|
api: {
|
url: '/Sc_MouldProdMoveBillController/page',
|
method: 'GET',
|
buildParams: function(beginDate, endDate) {
|
return {
|
sWhere: " and 日期 between '" + beginDate + "' and '" + endDate + "'",
|
user: sessionStorage["HUserName"] || '',
|
page: 1,
|
size: 999999,
|
Type: '3814'
|
};
|
},
|
dataPath: 'data',
|
successCode: 1
|
},
|
statusMap: [
|
{ name: '创建', condition: '审核人=="" || 审核人==null' },
|
{ name: '已审核', condition: '审核人!="" && 审核人!=null' },
|
{ name: '已关闭', condition: '关闭人!="" && 关闭人!=null' }
|
]
|
},
|
// 借出单
|
jiechu: {
|
chartTitle: '借出单统计',
|
chartType: 'pie',
|
chartColors: ['#fc8452', '#73c0de', '#3ba272', '#ee6666'],
|
api: {
|
url: '/Sc_MouldProdOutBillController/page',
|
method: 'GET',
|
buildParams: function(beginDate, endDate) {
|
return {
|
sWhere: " and 日期 between '" + beginDate + "' and '" + endDate + "'" + " and 往来类型='供应商'",
|
user: sessionStorage["HUserName"] || '',
|
page: 1,
|
size: 999999,
|
Type: '3802'
|
};
|
},
|
dataPath: 'data',
|
successCode: 1
|
},
|
statusMap: [
|
{ name: '创建', condition: '审核人=="" || 审核人==null' },
|
{ name: '已审核', condition: '审核人!="" && 审核人!=null' },
|
{ name: '已关闭', condition: '关闭人!="" && 关闭人!=null' }
|
]
|
},
|
// 归还单
|
guihuan: {
|
chartTitle: '归还单统计',
|
chartType: 'pie',
|
chartColors: ['#9a60b4', '#ea7ccc', '#5470c6', '#fac858'],
|
api: {
|
url: '/Sc_MouldProdBackBillController/page',
|
method: 'GET',
|
buildParams: function(beginDate, endDate) {
|
return {
|
sWhere: " and 日期 between '" + beginDate + "' and '" + endDate + "'" + " and 往来类型='供应商'",
|
user: sessionStorage["HUserName"] || '',
|
page: 1,
|
size: 999999,
|
Type: '3803'
|
};
|
},
|
dataPath: 'data',
|
successCode: 1
|
},
|
statusMap: [
|
{ name: '创建', condition: '审核人=="" || 审核人==null' },
|
{ name: '已审核', condition: '审核人!="" && 审核人!=null' },
|
{ name: '已关闭', condition: '关闭人!="" && 关闭人!=null' }
|
]
|
},
|
// 上模单
|
shangmo: {
|
chartTitle: '上模单统计',
|
chartType: 'pie',
|
chartColors: ['#3ba272', '#fc8452', '#73c0de', '#ee6666'],
|
api: {
|
url: '/Sc_MouldUpperBill/Sc_MouldUpperBillListPage',
|
method: 'GET',
|
buildParams: function(beginDate, endDate) {
|
return {
|
sWhere: " and 日期 between '" + beginDate + "' and '" + endDate + "'",
|
user: sessionStorage["HUserName"] || '',
|
page: 1,
|
size: 999999
|
};
|
},
|
dataPath: 'data',
|
successCode: 1
|
},
|
statusMap: [
|
{ name: '创建', condition: '审核人=="" || 审核人==null' },
|
{ name: '已审核', condition: '审核人!="" && 审核人!=null' },
|
{ name: '已关闭', condition: '关闭人!="" && 关闭人!=null' }
|
]
|
},
|
// 下模单
|
xiamo: {
|
chartTitle: '下模单统计',
|
chartType: 'pie',
|
chartColors: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
|
api: {
|
url: '/Sc_MouldUpperBill/Sc_MouldLowerBillListPage',
|
method: 'GET',
|
buildParams: function(beginDate, endDate) {
|
return {
|
sWhere: " and 日期 between '" + beginDate + "' and '" + endDate + "'",
|
user: sessionStorage["HUserName"] || '',
|
page: 1,
|
size: 999999
|
};
|
},
|
dataPath: 'data',
|
successCode: 1
|
},
|
statusMap: [
|
{ name: '创建', condition: '审核人=="" || 审核人==null' },
|
{ name: '已审核', condition: '审核人!="" && 审核人!=null' },
|
{ name: '已关闭', condition: '关闭人!="" && 关闭人!=null' }
|
]
|
},
|
// 保养记录
|
baoyang: {
|
chartTitle: '保养记录统计',
|
chartType: 'pie',
|
chartColors: ['#73c0de', '#3ba272', '#fc8452', '#ee6666'],
|
api: {
|
url: '/Sc_MouldMaintainBill/GetMouldMaintainBillListPage',
|
method: 'GET',
|
buildParams: function(beginDate, endDate) {
|
return {
|
sWhere: " and 日期 between '" + beginDate + "' and '" + endDate + "'",
|
user: sessionStorage["HUserName"] || '',
|
page: 1,
|
size: 999999
|
};
|
},
|
dataPath: 'data',
|
successCode: 1
|
},
|
statusMap: [
|
{ name: '创建', condition: '审核人=="" || 审核人==null' },
|
{ name: '已审核', condition: '审核人!="" && 审核人!=null' },
|
{ name: '待保养', condition: '1==1' }
|
]
|
},
|
// 点检记录
|
dianjian: {
|
chartTitle: '点检记录统计',
|
chartType: 'pie',
|
chartColors: ['#91cc75', '#fac858', '#5470c6', '#ee6666'],
|
api: {
|
url: '/Sc_MouldDotCheckBill/GetMouldDotCheckBillListPage',
|
method: 'GET',
|
buildParams: function(beginDate, endDate) {
|
return {
|
sWhere: " and 日期 between '" + beginDate + "' and '" + endDate + "'",
|
user: sessionStorage["HUserName"] || '',
|
page: 1,
|
size: 999999
|
};
|
},
|
dataPath: 'data',
|
successCode: 1
|
},
|
statusMap: [
|
{ name: '创建', condition: '审核人=="" || 审核人==null' },
|
{ name: '已审核', condition: '审核人!="" && 审核人!=null' },
|
{ name: '异常', condition: '1==1' }
|
]
|
},
|
// 维修记录
|
weixiu: {
|
chartTitle: '维修记录统计',
|
chartType: 'pie',
|
chartColors: ['#3ba272', '#fc8452', '#73c0de', '#9a60b4'],
|
api: {
|
url: '/Sb_MouldRepairWorkBill/GetMouldRepairWorkBillListPage',
|
method: 'GET',
|
buildParams: function(beginDate, endDate) {
|
return {
|
sWhere: " and 日期 between '" + beginDate + "' and '" + endDate + "'",
|
user: sessionStorage["HUserName"] || '',
|
page: 1,
|
size: 999999
|
};
|
},
|
dataPath: 'data',
|
successCode: 1
|
},
|
statusMap: [
|
{ name: '创建', condition: '审核人=="" || 审核人==null' },
|
{ name: '已审核', condition: '审核人!="" && 审核人!=null' },
|
{ name: '已关闭', condition: '关闭人!="" && 关闭人!=null' }
|
]
|
},
|
// 寿命调整单
|
shoumingtiaozheng: {
|
chartTitle: '寿命调整单',
|
chartType: 'pie',
|
chartColors: ['#5470c6', '#fac858', '#ee6666', '#73c0de'],
|
api: {
|
url: '/Sc_MouldLifeChangeBill/page',
|
method: 'GET',
|
buildParams: function(beginDate, endDate) {
|
return {
|
sWhere: " and 日期 between '" + beginDate + "' and '" + endDate + "'",
|
user: sessionStorage["HUserName"] || '',
|
Organization: sessionStorage["Organization"] || '',
|
page: 1,
|
size: 999999
|
};
|
},
|
dataPath: 'data',
|
successCode: 1
|
},
|
statusMap: [
|
{ name: '创建', condition: '审核人=="" || 审核人==null' },
|
{ name: '已审核', condition: '审核人!="" && 审核人!=null' },
|
{ name: '已关闭', condition: '关闭人!="" && 关闭人!=null' }
|
]
|
},
|
// 寿命耗用单
|
shouminghaoyon: {
|
chartTitle: '寿命耗用单',
|
chartType: 'pie',
|
chartColors: ['#91cc75', '#3ba272', '#fc8452', '#ea7ccc'],
|
api: {
|
url: '/Sc_MouldLifeUseBill/page',
|
method: 'GET',
|
buildParams: function(beginDate, endDate) {
|
return {
|
sWhere: " and 日期 between '" + beginDate + "' and '" + endDate + "'",
|
user: sessionStorage["HUserName"] || '',
|
Organization: sessionStorage["Organization"] || '',
|
page: 1,
|
size: 999999
|
};
|
},
|
dataPath: 'data',
|
successCode: 1
|
},
|
statusMap: [
|
{ name: '创建', condition: '审核人=="" || 审核人==null' },
|
{ name: '已审核', condition: '审核人!="" && 审核人!=null' },
|
{ name: '已关闭', condition: '关闭人!="" && 关闭人!=null' }
|
]
|
}
|
};
|
//#endregion
|
|
//#region ========== 动态生成页面结构 ==========
|
|
/**
|
* 根据ChartConfig动态生成汇总卡片和图表容器
|
*/
|
function generatePageStructure() {
|
// 获取配置key顺序
|
chartConfigKeys = [];
|
for (var key in ChartConfig) {
|
chartConfigKeys.push(key);
|
}
|
|
var chartCount = chartConfigKeys.length;
|
|
// 生成汇总卡片
|
generateSummaryCards(chartCount);
|
|
// 生成图表容器
|
generateChartBoxes(chartCount);
|
|
// 计算高度
|
calculateHeights(chartCount);
|
}
|
|
/**
|
* 生成汇总卡片
|
*/
|
function generateSummaryCards(chartCount) {
|
var $summaryRow = $('#summaryRow');
|
$summaryRow.empty();
|
|
// 总计卡片
|
var cardWidth = calculateCardWidth(chartCount + 1);
|
$summaryRow.append('<div class="summary-card total-card" id="card-total" style="width:' + cardWidth + '">' +
|
'<div class="summary-number">0</div><div class="summary-label">总计</div></div>');
|
|
// 各类型卡片
|
for (var i = 0; i < chartConfigKeys.length; i++) {
|
var key = chartConfigKeys[i];
|
var config = ChartConfig[key];
|
var label = config.chartTitle.replace('统计', '').replace('单', '');
|
$summaryRow.append('<div class="summary-card" id="card-' + key + '" style="width:' + cardWidth + '">' +
|
'<div class="summary-number">0</div><div class="summary-label">' + label + '</div></div>');
|
}
|
}
|
|
/**
|
* 计算卡片宽度
|
*/
|
function calculateCardWidth(count) {
|
// 每行最多12个，根据数量计算宽度
|
var perRow = Math.min(count, 12);
|
return 'calc(' + (100 / perRow) + '% - 8px)';
|
}
|
|
/**
|
* 生成图表容器（每行4个）
|
*/
|
function generateChartBoxes(chartCount) {
|
var $chartContainer = $('#chartContainer');
|
$chartContainer.empty();
|
|
var colsPerRow = 4; // 每行4个图表
|
var rows = Math.ceil(chartCount / colsPerRow);
|
|
for (var row = 0; row < rows; row++) {
|
var $rowDiv = $('<div class="chart-row"></div>');
|
|
for (var col = 0; col < colsPerRow; col++) {
|
var index = row * colsPerRow + col;
|
if (index < chartCount) {
|
var key = chartConfigKeys[index];
|
$rowDiv.append('<div class="chart-box" id="chart-' + key + '"></div>');
|
} else {
|
// 填充空白盒子保持布局
|
$rowDiv.append('<div class="chart-box" style="visibility:hidden;"></div>');
|
}
|
}
|
|
$chartContainer.append($rowDiv);
|
}
|
}
|
|
/**
|
* 计算各部分高度
|
*/
|
function calculateHeights(chartCount) {
|
var rows = Math.ceil(chartCount / 4);
|
// chart-container已通过flex:1自动填充，只需设置每行高度
|
$('.chart-row').css('height', (100 / rows) + '%');
|
}
|
|
//#endregion
|
|
//#region ========== 通用数据获取方法 ==========
|
|
function getValueByPath(obj, path) {
|
if (!path) return obj;
|
var keys = path.split('.');
|
var result = obj;
|
for (var i = 0; i < keys.length; i++) {
|
if (result && result[keys[i]] !== undefined) {
|
result = result[keys[i]];
|
} else {
|
return null;
|
}
|
}
|
return result;
|
}
|
|
function fetchChartData(chartKey, beginDate, endDate) {
|
var config = ChartConfig[chartKey];
|
if (!config) return Promise.resolve([]);
|
|
return new Promise(function(resolve) {
|
var params = {};
|
if (config.api.buildParams) {
|
params = config.api.buildParams(beginDate, endDate);
|
}
|
|
$.ajax({
|
url: GetWEBURL() + config.api.url,
|
type: config.api.method || 'GET',
|
data: params,
|
success: function(result) {
|
var successCode = config.api.successCode || 1;
|
var dataPath = config.api.dataPath || 'data';
|
|
if (result.code == successCode || result.count == successCode) {
|
var data = getValueByPath(result, dataPath);
|
resolve(data || []);
|
} else {
|
resolve([]);
|
}
|
},
|
error: function() {
|
resolve([]);
|
}
|
});
|
});
|
}
|
|
function countByStatusConfig(dataList, config) {
|
var result = [];
|
var statusMap = config.statusMap;
|
|
for (var i = 0; i < statusMap.length; i++) {
|
var statusItem = statusMap[i];
|
var count = 0;
|
|
for (var j = 0; j < dataList.length; j++) {
|
if (evalCondition(dataList[j], statusItem.condition)) {
|
count++;
|
}
|
}
|
|
result.push({
|
name: statusItem.name,
|
value: count
|
});
|
}
|
|
return result;
|
}
|
|
function evalCondition(item, condition) {
|
if (!condition) return true;
|
|
if (condition.indexOf('==""') > -1 || condition.indexOf('==null') > -1) {
|
var fieldMatch = condition.match(/(\S+)==""/);
|
if (fieldMatch) {
|
var field = fieldMatch[1];
|
return !item[field] || item[field] === '';
|
}
|
}
|
|
if (condition.indexOf('!=""') > -1 || condition.indexOf('!=null') > -1) {
|
var notEmptyMatch = condition.match(/(\S+)!=""/);
|
if (notEmptyMatch) {
|
var field = notEmptyMatch[1];
|
return item[field] && item[field] !== '';
|
}
|
}
|
|
var equalMatch = condition.match(/(\S+)==\"([^\"]+)\"/);
|
if (equalMatch) {
|
var field = equalMatch[1];
|
var value = equalMatch[2];
|
return item[field] === value;
|
}
|
|
return condition === '1==1';
|
}
|
|
function fetchAllChartData(beginDate, endDate) {
|
var promises = [];
|
var results = {};
|
|
for (var i = 0; i < chartConfigKeys.length; i++) {
|
var key = chartConfigKeys[i];
|
(function(chartKey) {
|
var promise = fetchChartData(chartKey, beginDate, endDate).then(function(data) {
|
results[chartKey] = countByStatusConfig(data, ChartConfig[chartKey]);
|
});
|
promises.push(promise);
|
})(key);
|
}
|
|
return Promise.all(promises).then(function() {
|
return results;
|
});
|
}
|
|
//#endregion
|
|
//#region ========== 图表渲染 ==========
|
|
function renderPieChart(chartId, title, data, colors) {
|
var chartDom = document.getElementById(chartId);
|
if (!chartDom) return;
|
|
var chart = echarts.init(chartDom);
|
chartInstances[chartId] = chart;
|
|
var pieData = data.map(function(item) {
|
return { name: item.name, value: item.value };
|
});
|
|
chart.setOption({
|
title: {
|
text: title,
|
left: 'center',
|
top: 5,
|
textStyle: { fontSize: 12, fontWeight: 'bold' }
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{b}: {c} ({d}%)'
|
},
|
series: [{
|
type: 'pie',
|
radius: ['30%', '50%'],
|
center: ['50%', '55%'],
|
data: pieData,
|
itemStyle: { borderRadius: 3, borderColor: '#fff', borderWidth: 1 },
|
label: { show: true, fontSize: 10, formatter: '{b}\n{c}' },
|
color: colors || ['#91cc75', '#fac858', '#ee6666', '#73c0de']
|
}]
|
});
|
}
|
|
function renderAllCharts(data) {
|
for (var i = 0; i < chartConfigKeys.length; i++) {
|
var key = chartConfigKeys[i];
|
var config = ChartConfig[key];
|
if (config.chartType === 'pie') {
|
renderPieChart('chart-' + key, config.chartTitle, data[key] || [], config.chartColors);
|
}
|
}
|
|
updateSummaryCards(data);
|
}
|
|
function updateSummaryCards(data) {
|
var grandTotal = 0;
|
|
for (var i = 0; i < chartConfigKeys.length; i++) {
|
var key = chartConfigKeys[i];
|
var config = ChartConfig[key];
|
var total = 0;
|
if (data[key]) {
|
for (var j = 0; j < data[key].length; j++) {
|
total += data[key][j].value;
|
}
|
}
|
grandTotal += total;
|
$('#card-' + key).find('.summary-number').text(total);
|
}
|
|
$('#card-total').find('.summary-number').text(grandTotal);
|
}
|
|
//#endregion
|
|
//#region ========== 事件绑定 ==========
|
|
form.on('submit(btnReSearch)', function(data) {
|
set_ClearQuery();
|
});
|
|
form.on('submit(btnSearch)', function(data) {
|
get_FastQuery();
|
});
|
|
function set_ClearBill() {
|
// 先生成页面结构
|
generatePageStructure();
|
|
// 设置日期并查询
|
var today = Format(new Date(), "yyyy-MM-dd");
|
$("#HBeginDate").val(Format(new Date(new Date().setDate(new Date().getDate() - 5)), "yyyy-MM-dd"));
|
$("#HEndDate").val(today);
|
get_FastQuery();
|
}
|
|
function get_FastQuery() {
|
var wait = layer.load();
|
var beginDate = $("#HBeginDate").val();
|
var endDate = $("#HEndDate").val();
|
|
fetchAllChartData(beginDate, endDate).then(function(statsData) {
|
var hasData = false;
|
for (var i = 0; i < chartConfigKeys.length; i++) {
|
var key = chartConfigKeys[i];
|
if (statsData[key] && statsData[key].length > 0) {
|
var sum = 0;
|
for (var j = 0; j < statsData[key].length; j++) {
|
sum += statsData[key][j].value;
|
}
|
if (sum > 0) {
|
hasData = true;
|
break;
|
}
|
}
|
}
|
|
if (hasData) {
|
renderAllCharts(statsData);
|
} else {
|
renderAllCharts(getMockData());
|
}
|
layer.close(wait);
|
}).catch(function() {
|
renderAllCharts(getMockData());
|
layer.close(wait);
|
});
|
}
|
|
function set_ClearQuery() {
|
var today = Format(new Date(), "yyyy-MM-dd");
|
$("#HBeginDate").val(today);
|
$("#HEndDate").val(today);
|
get_FastQuery();
|
}
|
|
//#endregion
|
|
//#region ========== 模拟数据 ==========
|
|
function getMockData() {
|
var mockData = {};
|
for (var i = 0; i < chartConfigKeys.length; i++) {
|
var key = chartConfigKeys[i];
|
var config = ChartConfig[key];
|
mockData[key] = [];
|
for (var j = 0; j < config.statusMap.length; j++) {
|
mockData[key].push({
|
name: config.statusMap[j].name,
|
value: Math.floor(Math.random() * 20) + 5
|
});
|
}
|
}
|
return mockData;
|
}
|
|
//#endregion
|
|
// 初始化
|
set_ClearBill();
|
|
// 窗口大小变化时重新渲染图表
|
window.onresize = function() {
|
setTimeout(function() {
|
for (var key in chartInstances) {
|
if (chartInstances[key]) {
|
chartInstances[key].resize();
|
}
|
}
|
}, 100);
|
};
|
});
|
</script>
|
</body>
|
</html>
|
