|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta 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" />
|
|
|
<script src="../Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
|
|
|
<!--layui-->
|
|
|
<script src="../Scripts/layui/layui/lay/modules/layer.js"></script>
|
|
|
<link href="../Scripts/layui/layui/css/modules/layer/default/layer.css" rel="stylesheet" />
|
|
|
<link href="../Scripts/layui/layui/css/layui.css" rel="stylesheet" />
|
|
|
<script src="../Scripts/layui/layui/layui.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/layui/LayuiDialog.js" type="text/javascript"></script>
|
|
|
<link href="../Scripts/layui/style/admin.css" rel="stylesheet" />
|
|
|
<!--通用的JS-->
|
|
|
<script src="../Scripts/config.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/QueryString.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/QueryString.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/echartsjs/echarts.min.js" type="text/javascript"></script>
|
|
|
<script src="Gener.js" type="text/javascript"></script>
|
|
|
<script src="Search.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/xss.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/layui/ext/xmSelect.js" type="text/javascript"></script>
|
|
|
<link href="Style/Search.css" rel="stylesheet" />
|
|
|
<style id="theme-data"></style>
|
|
|
<style type="text/css">
|
|
|
.layui-form-label {
|
|
|
padding: 9px 0px;
|
|
|
width: auto;
|
|
|
}
|
|
|
|
|
|
.layui-form-label {
|
|
|
margin-bottom: 0px;
|
|
|
}
|
|
|
|
|
|
xm-select > .xm-body .xm-toolbar {
|
|
|
padding: 0 5px;
|
|
|
}
|
|
|
|
|
|
.layui-table-view {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.layui-elem-field legend {
|
|
|
font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.layui-btn {
|
|
|
height: 28px !important;
|
|
|
line-height: 28px !important;
|
|
|
}
|
|
|
|
|
|
.input-icon {
|
|
|
position: absolute;
|
|
|
left: calc(100% - 40px);
|
|
|
top: 1px;
|
|
|
height: 28px !important;
|
|
|
line-height: 28px !important;
|
|
|
text-align: center;
|
|
|
color: #d2d2d2;
|
|
|
}
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
width: 5px;
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
background: rgb(239, 239, 239);
|
|
|
border-radius: 2px;
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
background: #bfbfbf;
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
|
|
|
.layui-tab-content {
|
|
|
overflow-y: scroll;
|
|
|
}
|
|
|
|
|
|
.layui-table-patch > .layui-table-cell {
|
|
|
width: 10px !important;
|
|
|
}
|
|
|
|
|
|
.label-content {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
display: revert !important;
|
|
|
}
|
|
|
</style>
|
|
|
<script type="text/javascript">
|
|
|
//查询的文本字段
|
|
|
var fields = [];
|
|
|
//定义公共个变量.
|
|
|
var webUser = new WebUser();
|
|
|
|
|
|
var ensName = GetQueryString("EnsName");
|
|
|
|
|
|
//页面设置信息
|
|
|
var cfg = new Entity("BP.Sys.EnCfg");
|
|
|
cfg.No = ensName;
|
|
|
cfg.RetrieveFromDBSources();
|
|
|
|
|
|
//当前用户页面信息.
|
|
|
var urMyPK = webUser.No + ensName + "_Group";
|
|
|
var ur = GetUserRegedit();
|
|
|
|
|
|
|
|
|
var count = ur.GetPara("RecCount");
|
|
|
var mapBase;
|
|
|
var searchAttrs;
|
|
|
var firstLoadTable = true;
|
|
|
//获取用户的查询信息
|
|
|
function GetUserRegedit() {
|
|
|
urMyPK = webUser.No + "_" + ensName + "_SearchAttrs";
|
|
|
var ur = new Entity("BP.Sys.UserRegedit");
|
|
|
ur.SetPKVal(urMyPK);
|
|
|
var count = ur.RetrieveFromDBSources();
|
|
|
if (count == 0)
|
|
|
ur.Insert();
|
|
|
if (firstLoadTable != undefined && firstLoadTable == true) {
|
|
|
//清空Seach记录查询
|
|
|
if (isClearSearchCond == 1) {
|
|
|
ur.MyPK = urMyPK;
|
|
|
ur.SearchKey = "";
|
|
|
ur.AtPara = "";
|
|
|
ur.DTFrom = "";
|
|
|
ur.DTTo = "";
|
|
|
ur.FK_Emp = webUser.No;
|
|
|
ur.CfgKey = "SearchAttrs";
|
|
|
ur.Vals = "";
|
|
|
ur.FK_MapData = ensName;
|
|
|
ur.OrderBy = "";
|
|
|
ur.OrderWay = "";
|
|
|
ur.Save();
|
|
|
}
|
|
|
|
|
|
//获取Url传的查询Key值
|
|
|
var key = GetQueryString("Key");
|
|
|
if (key != null && key != undefined && firstLoadTable == true)
|
|
|
ur.SearchKey = key;
|
|
|
|
|
|
var dtFrom = GetQueryString("DTFrom");
|
|
|
if (dtFrom != null && dtFrom != undefined && firstLoadTable == true)
|
|
|
ur.DTFrom = dtFrom;
|
|
|
var dtTo = GetQueryString("DTTo");
|
|
|
if (dtTo != null && dtTo != undefined && firstLoadTable == true)
|
|
|
ur.DTTo = dtTo;
|
|
|
|
|
|
|
|
|
}
|
|
|
return ur;
|
|
|
}
|
|
|
/**
|
|
|
*
|
|
|
* 初始化页面
|
|
|
*/
|
|
|
$(function () {
|
|
|
|
|
|
InitToolbar("group"); //初始化按钮
|
|
|
$('.toolbar').on('click', function () {
|
|
|
var id = this.id;
|
|
|
switch (id) {
|
|
|
case "Search":
|
|
|
SearchCondtion();
|
|
|
//查询
|
|
|
Group_Search();
|
|
|
break;
|
|
|
case "ToSearch":
|
|
|
var url = GetHrefUrl().replace("Group.htm", "Search.htm");
|
|
|
SetHref(url);
|
|
|
break;
|
|
|
case "Setting":
|
|
|
Setting();
|
|
|
break;
|
|
|
default: break;
|
|
|
|
|
|
}
|
|
|
});
|
|
|
firstLoadTable = false;
|
|
|
//显示内容
|
|
|
DealGroupContent();
|
|
|
//分析项目
|
|
|
GroupAnalysis();
|
|
|
layui.form.render();
|
|
|
//分析结果显示
|
|
|
ShowData();
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
/**
|
|
|
*
|
|
|
* 分组条件
|
|
|
*/
|
|
|
function DealGroupContent() {
|
|
|
//创建处理器.
|
|
|
var handler = new HttpHandler("BP.WF.HttpHandler.WF_Comm");
|
|
|
handler.AddUrlData(); //增加参数.
|
|
|
var data = handler.DoMethodReturnString("Group_ContentAttrs");
|
|
|
if (data.indexOf('err@') != -1) {
|
|
|
layer.alert(data);
|
|
|
console.log(data);
|
|
|
return;
|
|
|
}
|
|
|
data = JSON.parse(data);
|
|
|
var groupAttrs = data;
|
|
|
if (groupAttrs.length == 0) {
|
|
|
alert("[" + document.title + "]没有外键或枚举，不能做分组查询.");
|
|
|
return;
|
|
|
}
|
|
|
var _html = "";
|
|
|
for (var i = 0; i < groupAttrs.length; i++) {
|
|
|
|
|
|
var checked = "";
|
|
|
if (groupAttrs[i].Checked && groupAttrs[i].Checked.toString() == "true") {
|
|
|
checked = "checked=checked";
|
|
|
}
|
|
|
_html += '<div class="layui-form-item" style="margin-bottom:0px">';
|
|
|
|
|
|
_html += '<div class="layui-input-block" style="margin-left:20px">';
|
|
|
_html += "<input type='checkbox' id='" + groupAttrs[i].Field + "' name='groupContent' " + checked + " onclick='javascript:ShowData(this,\"\")' value='" + groupAttrs[i].Field + "' lay-skin='primary' lay-filter='switch' title='" + groupAttrs[i].Name + "'/>";
|
|
|
_html += '</div>';
|
|
|
_html += '</div>';
|
|
|
}
|
|
|
$("#CheckBoxList").html(_html);
|
|
|
|
|
|
}
|
|
|
/**
|
|
|
* 分析项目
|
|
|
*/
|
|
|
function GroupAnalysis() {
|
|
|
//创建处理器.
|
|
|
var handler = new HttpHandler("BP.WF.HttpHandler.WF_Comm");
|
|
|
handler.AddUrlData(); //增加参数.
|
|
|
var data = handler.DoMethodReturnString("Group_Analysis");
|
|
|
if (data.indexOf('err@') != -1) {
|
|
|
layer.alert(data);
|
|
|
console.log(data);
|
|
|
return;
|
|
|
}
|
|
|
var data = JSON.parse(data);
|
|
|
var analyAtts = data["Attrs"];
|
|
|
|
|
|
var _html = "";
|
|
|
for (var i = 0; i < analyAtts.length; i++) {
|
|
|
|
|
|
var checked = "";
|
|
|
if (analyAtts[i].Checked && analyAtts[i].Checked.toString() == "true") {
|
|
|
checked = "checked=checked";
|
|
|
}
|
|
|
_html += '<div class="layui-form-item" style="margin-bottom:0px">';
|
|
|
_html += '<div class="layui-inline">';
|
|
|
_html += '<div class="layui-input-block" style="margin-left:20px">';
|
|
|
_html += "<input type='checkbox' id='" + analyAtts[i].Field + "' name='groupAnaly' " + checked + " onclick='javascript:ShowData(this,\"\")' value='" + analyAtts[i].Field + "' lay-skin='primary' lay-filter='switch' title='" + analyAtts[i].Name + "'/>";
|
|
|
_html += '</div>';
|
|
|
_html += '</div>';
|
|
|
_html += '<div class="layui-inline" style="width:100px;margin-top:5px">';
|
|
|
_html += "<select style='width:80%' class='form-control' name='DDL_Aly_" + analyAtts[i].Field + "' ID='DDL_Aly_" + analyAtts[i].Field + "' onchange='javascript:ShowData(this,\"\")' lay-filter='switch'>" + InitDDLAnalysisOperation(data, analyAtts[i], null) + "</select>";
|
|
|
_html += '</div>';
|
|
|
_html += '</div>';
|
|
|
_html += '</div>';
|
|
|
}
|
|
|
$("#AnalyGroup").html(_html);
|
|
|
}
|
|
|
/**
|
|
|
* 显示数据
|
|
|
*
|
|
|
*/
|
|
|
function ShowData() {
|
|
|
var groupCount = $('input[name="groupContent"]:checked');
|
|
|
if (groupCount.length == 0) {
|
|
|
var _html = "";
|
|
|
_html += '<div class="layadmin-tips">'
|
|
|
_html += '<i class="layui-icon layui-icon-help" face=""></i>';
|
|
|
|
|
|
_html += '<div class="layui-text" style="font-size: 30px;color:red;color: red;display: inline-block;height: 300px;text-align: left;vertical-align: middle;border-top:0px">必须选择一项分组条件</div>'
|
|
|
|
|
|
_html += '</div>'
|
|
|
$("#Content").html(_html);
|
|
|
return false;
|
|
|
}
|
|
|
var groupAnaly = $('input[name="groupAnaly"]:checked');
|
|
|
if (groupAnaly.length == 0) {
|
|
|
var _html = "";
|
|
|
_html += '<div class="layadmin-tips">'
|
|
|
_html += '<i class="layui-icon layui-icon-help" face=""></i>';
|
|
|
|
|
|
_html += '<div class="layui-text" style="font-size: 30px;color:red;color: red;display: inline-block;height: 300px;text-align: left;vertical-align: middle;border-top:0px">必须选择一项分析项</div>'
|
|
|
|
|
|
_html += '</div>'
|
|
|
$("#Content").html(_html);
|
|
|
|
|
|
return false;
|
|
|
}
|
|
|
if (groupCount.length > 1) {
|
|
|
|
|
|
$("#CB_IsShowPict").attr("disabled", "disabled");
|
|
|
|
|
|
$("#CB_IsShowPict").prop("checked", false);
|
|
|
$($("#CB_IsShowPict").next()[0]).removeClass("layui-form-checked");
|
|
|
$("#Chart").hide();
|
|
|
}
|
|
|
|
|
|
else {
|
|
|
$("#Chart").show();
|
|
|
$("#CB_IsShowPict").attr("disabled", false);
|
|
|
$($("#CB_IsShowPict").next()[0]).removeClass("layui-checkbox-disbaled").removeClass("layui-disabled");
|
|
|
$("#CB_IsShowPict").prop("checked", true);
|
|
|
$($("#CB_IsShowPict").next()[0]).addClass("layui-form-checked");
|
|
|
}
|
|
|
|
|
|
|
|
|
//给注册表信息重新赋值
|
|
|
ur = new Entity("BP.Sys.UserRegedit");
|
|
|
ur.MyPK = webUser.No + ensName + "_Group";
|
|
|
ur.RetrieveFromDBSources();
|
|
|
var selectedGroupKey = "";
|
|
|
groupCount.each(function () {
|
|
|
selectedGroupKey += ',' + $(this).val() + ","; //将选中的值添加到数组chk_value中
|
|
|
});
|
|
|
var stateNumKey = "";
|
|
|
|
|
|
groupAnaly.each(function () {
|
|
|
var key = $(this).val();
|
|
|
//获取下拉框的值
|
|
|
var defVal = $("#DDL_Aly_" + key).val();
|
|
|
|
|
|
stateNumKey += ',' + $(this).val() + '=' + defVal + ","; //将选中的值添加到数组chk_value中
|
|
|
});
|
|
|
|
|
|
ur.Vals = "@SelectedGroupKey=" + selectedGroupKey + "@StateNumKey=" + stateNumKey;
|
|
|
|
|
|
if ($("#CB_IsShowPict").is(":checked") == true)
|
|
|
ur.IsPic = 1;
|
|
|
else
|
|
|
ur.IsPic = 0;
|
|
|
|
|
|
ur.SetPKVal(ur.MyPK);
|
|
|
ur.FK_Emp = webUser.No;
|
|
|
ur.CfgKy = ensName;
|
|
|
ur.Save();
|
|
|
|
|
|
SearchCondtion();
|
|
|
|
|
|
Group_Search();
|
|
|
}
|
|
|
function Group_Search() {
|
|
|
|
|
|
//重新获取注册信息
|
|
|
ur = new Entity("BP.Sys.UserRegedit");
|
|
|
ur.MyPK = webUser.No + ensName + "_Group";
|
|
|
|
|
|
ur.RetrieveFromDBSources();
|
|
|
|
|
|
//创建处理器.
|
|
|
var handler = new HttpHandler("BP.WF.HttpHandler.WF_Comm");
|
|
|
handler.AddUrlData(); //增加参数.
|
|
|
//handler.AddFormData();
|
|
|
var groupList = "";
|
|
|
$('input[name="groupContent"]').each(function () {
|
|
|
groupList += '@' + $(this).val(); //将选中的值添加到数组chk_value中
|
|
|
});
|
|
|
handler.AddPara("GroupList", groupList);
|
|
|
|
|
|
var data = handler.DoMethodReturnString("Group_Search");
|
|
|
if (data.indexOf('err@') != -1) {
|
|
|
layer.alert(data);
|
|
|
console.log(data);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (data.indexOf('info@') != -1) {
|
|
|
data = data.replace("info@", "");
|
|
|
$("#Content").html("").append(data);
|
|
|
return;
|
|
|
}
|
|
|
$("#Content").html("");
|
|
|
var data = JSON.parse(data);
|
|
|
|
|
|
var mainData = data["MainData"];
|
|
|
var mapAttrs = data["Sys_MapAttr"];
|
|
|
var attrsOfNum = data["AttrsOfNum"];
|
|
|
//生成表格
|
|
|
if (ur.IsPic == 0) {
|
|
|
GenerTable("Content", mainData, mapAttrs, attrsOfNum);
|
|
|
//生成图表
|
|
|
} else {
|
|
|
GenerChart(mainData, mapAttrs, attrsOfNum);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
function GenerTable(divID, mainData, mapAttrs, attrsOfNum) {
|
|
|
//获取分析的字段
|
|
|
var analysikeys = ",";
|
|
|
attrsOfNum.forEach(item => {
|
|
|
analysikeys += item.KeyOfEn + ",";
|
|
|
})
|
|
|
$("#" + divID).append($("<table class='layui-hide' id='groupTable' lay-filter='groubTable'></table>"));
|
|
|
//表格显示的列
|
|
|
var columns = new Array();;
|
|
|
columns.push({
|
|
|
title: '序',
|
|
|
field: '',
|
|
|
align: 'center',
|
|
|
width: 50,
|
|
|
type: 'numbers',
|
|
|
totalRowText: '汇总'
|
|
|
});
|
|
|
$.each(mapAttrs, function (i, attr) {
|
|
|
var field = attr.KeyOfEn;
|
|
|
var title = attr.Name;
|
|
|
var width = attr.Width;
|
|
|
|
|
|
if (field == "Title") {
|
|
|
width = 230;
|
|
|
}
|
|
|
var isTotalRow = false;
|
|
|
if (field == "Group_Number")
|
|
|
isTotalRow = true;
|
|
|
if (ur.Vals.indexOf(field + "=") != -1)
|
|
|
isTotalRow = true;
|
|
|
|
|
|
if (attr.UIContralType == 1) {
|
|
|
if (width == null || width == "" || width == undefined)
|
|
|
width = 180;
|
|
|
|
|
|
columns.push({
|
|
|
field: field, //字段名
|
|
|
title: title, //标题名称
|
|
|
minWidth: width, //宽度
|
|
|
sort: true,
|
|
|
totalRow: isTotalRow,
|
|
|
templet: function (data) {
|
|
|
var val = data[this.field + "Text"];
|
|
|
if (val == null && val == undefined)
|
|
|
val = data[this.field + "T"];
|
|
|
if (val == null && val == undefined)
|
|
|
val = data[this.field];
|
|
|
return val;
|
|
|
}
|
|
|
});
|
|
|
return true;
|
|
|
}
|
|
|
if (attr.UIContralType == 2) {
|
|
|
if (width == null || width == "" || width == undefined) {
|
|
|
width = 60;
|
|
|
}
|
|
|
|
|
|
columns.push({
|
|
|
field: field,
|
|
|
title: title,
|
|
|
minWidth: width,
|
|
|
sort: true,
|
|
|
totalRow: isTotalRow,
|
|
|
templet: function (data) {
|
|
|
if (data[this.field] == "0") return "否";
|
|
|
if (data[this.field] == "1") return "是";
|
|
|
}
|
|
|
});
|
|
|
return true;
|
|
|
}
|
|
|
if (width == null || width == "" || width == undefined)
|
|
|
width = 100;
|
|
|
if (field == "FlowStartRDT")
|
|
|
width = 160;
|
|
|
columns.push({
|
|
|
field: field,
|
|
|
title: title,
|
|
|
minWidth: width,
|
|
|
sort: true,
|
|
|
totalRow: isTotalRow,
|
|
|
});
|
|
|
});
|
|
|
columns.push({
|
|
|
field: "oper",
|
|
|
title: "操作",
|
|
|
minWidth: 80,
|
|
|
templet: function (data) {
|
|
|
var url = "ContrastDtl.htm?EnsName=" + ensName + "&TitleName=" + mapBase.EnDesc;
|
|
|
$.each(mapAttrs, function (k, o) {
|
|
|
if (url.indexOf(o.KeyOfEn) == -1 && analysikeys.indexOf(","+o.KeyOfEn+",")==-1)
|
|
|
url += "&" + o.KeyOfEn + "=" + data[o.KeyOfEn];
|
|
|
});
|
|
|
|
|
|
return "<a href=\"javascript:WinOpen('" + url + "', 'wincommgroup',900,900);\" style='color: dodgerblue' class='btn btn-default btn-sm easyui-linkbutton'>查看</a>"
|
|
|
}
|
|
|
});
|
|
|
|
|
|
layui.use(['table', 'form'], function () {
|
|
|
var table = layui.table;
|
|
|
var height = $(document).height() - $("#toolBar").height() - 100;
|
|
|
if ($(".layui-tab-title").length != 0)
|
|
|
height = 470;
|
|
|
table.render({
|
|
|
elem: '#groupTable'
|
|
|
, data: mainData
|
|
|
//, cellMinWidth: 80
|
|
|
, toolbar: 'true' //开启头部工具栏，并为其绑定左侧模板
|
|
|
, defaultToolbar: []
|
|
|
, title: '数据分析'
|
|
|
, cols: [columns]
|
|
|
, limit: Number.MAX_VALUE
|
|
|
, height: height
|
|
|
, totalRow: true
|
|
|
, done: function (res, curr, count) {
|
|
|
var tds = $(".layui-table-total tr td");
|
|
|
$.each(tds, function (i, item) {
|
|
|
|
|
|
var key = $(item).attr("data-field");
|
|
|
if (ur.Vals.indexOf(key + "=AVG") != -1) {
|
|
|
var children = $($(item).find("div")[0]);
|
|
|
|
|
|
//获取子节点的值
|
|
|
var value = children.html();
|
|
|
children.html((value / count).toFixed(2));
|
|
|
}
|
|
|
|
|
|
});
|
|
|
}
|
|
|
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 图标展示
|
|
|
* @param mainData
|
|
|
* @param mapAttrs
|
|
|
* @param AttrsOfNum
|
|
|
* @param ur
|
|
|
* @param ActiveAttr
|
|
|
* @param noShowSum
|
|
|
*/
|
|
|
function GenerChart(mainData, mapAttrs, attrsOfNum) {
|
|
|
//groupSearch = thisGroupSearch;
|
|
|
//AttrsOfNum = thisAttrsOfNum;
|
|
|
//AttrsOfGroup = thisAttrsOfGroup;
|
|
|
var width = $("#TB_W").val();
|
|
|
if (width == "" || width == 0)
|
|
|
width = 300;
|
|
|
var height = $("#TB_H").val();
|
|
|
if (height == "" || height == 0)
|
|
|
height = 300;
|
|
|
|
|
|
var _html = "";
|
|
|
_html += '<div class="layui-tab layui-tab-card" style="height:550px" >';
|
|
|
_html += '<ul class="layui-tab-title" id="tabEchart">';
|
|
|
_html += '<li class="layui-this">分组数据</li>';
|
|
|
_html += '<li >柱状图</li>';
|
|
|
_html += '<li>折线图</li>';
|
|
|
_html += '<li >饼状图</li>';
|
|
|
_html += '</ul>';
|
|
|
|
|
|
_html += '<div class="layui-tab-content" style="">';
|
|
|
|
|
|
_html += '<div class="layui-tab-item layui-show" id="table_div"></div>';
|
|
|
_html += '<div class="layui-tab-item layui-form layui-border-box layui-table-view" id="bar_chart_div" style="width:' + width + 'px:height:' + height + 'px" ></div>';
|
|
|
_html += '<div class="layui-tab-item " id="line_chart_div">4</div>';
|
|
|
|
|
|
_html += '<div class="layui-tab-item" id="pie_chart_div">3</div>';
|
|
|
|
|
|
_html += '</div>';
|
|
|
_html += '</div>';
|
|
|
|
|
|
|
|
|
|
|
|
$("#Content").html(_html);
|
|
|
|
|
|
var xAxis = [];
|
|
|
for (var i = 0; i < mainData.length; i++) {
|
|
|
var str = mainData[i][mapAttrs[0].KeyOfEn + "Text"];
|
|
|
if (str == null || str == undefined)
|
|
|
str = mainData[i][mapAttrs[0].KeyOfEn + "T"];
|
|
|
xAxis[i] = str || mainData[i][mapAttrs[0].KeyOfEn];
|
|
|
}
|
|
|
//分析项目
|
|
|
var analyKey = ur.Vals.substring(ur.Vals.indexOf("@StateNumKey"));
|
|
|
|
|
|
|
|
|
//表格
|
|
|
GenerTable("table_div", mainData, mapAttrs, attrsOfNum);
|
|
|
var width = $("#table_div").width();
|
|
|
//柱状图
|
|
|
GenerateBarChart(mainData, mapAttrs, attrsOfNum, xAxis, width);
|
|
|
|
|
|
//折线图
|
|
|
GenerateLineChart(mainData, mapAttrs, attrsOfNum, xAxis, width);
|
|
|
|
|
|
//饼状图
|
|
|
GeneratePieChart(mainData, mapAttrs, attrsOfNum, xAxis, mapAttrs[0].KeyOfEn, width);
|
|
|
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 柱状图
|
|
|
* @param groupSearch
|
|
|
* @param AttrsOfNum
|
|
|
* @param xAxis
|
|
|
*/
|
|
|
function GenerateBarChart(mainData, mapAttrs, attrsOfNum, xAxis, width) {
|
|
|
|
|
|
$("#bar_chart_div").css("width", width + "px").css("height", "300px");
|
|
|
var myChart = echarts.init(document.getElementById('bar_chart_div'));
|
|
|
var series = [];
|
|
|
for (var i = 0; i < attrsOfNum.length; i++) {
|
|
|
if (attrsOfNum[i].Name == null || attrsOfNum[i].Name == "")
|
|
|
continue;
|
|
|
var data = [];
|
|
|
for (var j = 0; j < mainData.length; j++) {
|
|
|
data[j] = mainData[j][attrsOfNum[i].KeyOfEn];
|
|
|
}
|
|
|
series.push({
|
|
|
name: attrsOfNum[i].Name,
|
|
|
data: data,
|
|
|
type: 'bar',
|
|
|
smooth: true,
|
|
|
|
|
|
});
|
|
|
}
|
|
|
// 指定图表的配置项和数据
|
|
|
var option = {
|
|
|
grid: {
|
|
|
top: '5%',
|
|
|
right: '1%',
|
|
|
left: '1%',
|
|
|
bottom: '10%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: xAxis
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
series: series
|
|
|
};
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
/**
|
|
|
* 折线图
|
|
|
* @param groupSearch
|
|
|
* @param AttrsOfNum
|
|
|
* @param xAxis
|
|
|
*/
|
|
|
function GenerateLineChart(mainData, mapAttrs, attrsOfNum, xAxis, width) {
|
|
|
$("#line_chart_div").css("width", width + "px").css("height", "300px");
|
|
|
var myChart = echarts.init(document.getElementById('line_chart_div'));
|
|
|
var series = [];
|
|
|
|
|
|
for (var i = 0; i < attrsOfNum.length; i++) {
|
|
|
if (attrsOfNum[i].Name == null || attrsOfNum[i].Name == "")
|
|
|
continue;
|
|
|
var data = [];
|
|
|
for (var j = 0; j < mainData.length; j++) {
|
|
|
data[j] = mainData[j][attrsOfNum[i].KeyOfEn];
|
|
|
}
|
|
|
series.push({
|
|
|
name: attrsOfNum[i].Name,
|
|
|
data: data,
|
|
|
type: 'line',
|
|
|
|
|
|
});
|
|
|
}
|
|
|
// 指定图表的配置项和数据
|
|
|
var option = {
|
|
|
grid: {
|
|
|
top: '5%',
|
|
|
right: '1%',
|
|
|
left: '1%',
|
|
|
bottom: '10%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: xAxis
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
series: series
|
|
|
};
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
function GeneratePieChart(mainData, mapAttrs, attrsOfNum, xAxis, KeyOfEn, width) {
|
|
|
$("#pie_chart_div").css("width", width + "px").css("height", "300px");
|
|
|
var myChart = echarts.init(document.getElementById('pie_chart_div'));
|
|
|
var series = [];
|
|
|
var dataSet = [];
|
|
|
var arr = xAxis.concat();
|
|
|
arr.unshift('quarter');
|
|
|
dataSet.push(arr);
|
|
|
var center = 0;
|
|
|
for (var i = 0; i < attrsOfNum.length; i++) {
|
|
|
if (attrsOfNum[i].Name == null || attrsOfNum[i].Name == "")
|
|
|
continue;
|
|
|
var data = [];
|
|
|
for (var j = 0; j < mainData.length; j++) {
|
|
|
var val = mainData[j][KeyOfEn + "Text"];
|
|
|
if (val == null || val == undefined)
|
|
|
val = mainData[j][KeyOfEn + "T"];
|
|
|
val = val || mainData[j][KeyOfEn];
|
|
|
data.push({
|
|
|
"value": mainData[j][attrsOfNum[i].KeyOfEn],
|
|
|
"name": val
|
|
|
});
|
|
|
}
|
|
|
if (center == 0)
|
|
|
center += 25;
|
|
|
else
|
|
|
center += 15;
|
|
|
dataSet.push(data);
|
|
|
series.push({
|
|
|
name: attrsOfNum[i].Name,
|
|
|
data: data,
|
|
|
type: 'pie',
|
|
|
center: [center + '%', '50%'], //圆心横坐标、纵坐标
|
|
|
radius: '40%',
|
|
|
seriesLayoutBy: 'row',
|
|
|
encode: {
|
|
|
itemName: 0, //数据项名称，在legend中展示
|
|
|
value: 1
|
|
|
},
|
|
|
label: {
|
|
|
show: false
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
var option = {
|
|
|
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
},
|
|
|
legend: {
|
|
|
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
|
|
|
orient: 'vertical',
|
|
|
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
|
|
|
x: 'left',
|
|
|
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
|
|
|
y: 'center',
|
|
|
type: 'scroll', // 设置图例的类型。可选值：'plain' ¦ 'scroll'。（'plain'：普通图例。缺省就是普通图例，'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。）
|
|
|
itemWidth: 24, // 设置图例图形的宽
|
|
|
itemHeight: 18, // 设置图例图形的高
|
|
|
textStyle: {
|
|
|
color: '#666' // 图例文字颜色
|
|
|
},
|
|
|
// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
|
|
|
itemGap: 10,
|
|
|
//backgroundColor: '#f8f8f8', // 设置整个图例区域背景颜色
|
|
|
data: xAxis
|
|
|
},
|
|
|
dataset: {
|
|
|
source: dataSet
|
|
|
},
|
|
|
series: series
|
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function Exp() {
|
|
|
var handler = new HttpHandler("BP.WF.HttpHandler.WF_Comm");
|
|
|
handler.AddPara("EnsName", GetQueryString("EnsName"));
|
|
|
handler.AddUrlData(); //增加参数.
|
|
|
handler.AddFormData();
|
|
|
var groupList = "";
|
|
|
$('input[name="groupContent"]').each(function () {
|
|
|
groupList += '@' + $(this).val(); //将选中的值添加到数组chk_value中
|
|
|
});
|
|
|
handler.AddPara("GroupList", groupList);
|
|
|
//查询集合
|
|
|
var data = handler.DoMethodReturnString("Group_Exp");
|
|
|
if (data.indexOf('err@') == 0 || data.indexOf('info@') == 0) {
|
|
|
alert(data);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
|
|
|
window.open(data);
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
function WinOpen(url, winName) {
|
|
|
layer.open({
|
|
|
type: 2,
|
|
|
title: mapBase.EnDesc + "数据分析详情",
|
|
|
shade: false,
|
|
|
maxmin: true,
|
|
|
area: ['80%', '90%'],
|
|
|
content: url
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
</script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="layui-body layui-tab-content site-demo site-demo-body" style="left:0px !important">
|
|
|
<form class="layui-form">
|
|
|
<div id="toolbar" class="layui-header layui-card" style="height:auto;padding:10px"></div>
|
|
|
<div class="layui-col-md3" style="height:550px">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header">分组条件</div>
|
|
|
<div class="layui-card-body" style="height:135px;overflow-y:auto">
|
|
|
<div id="CheckBoxList"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header" style="border-top:1px solid #f6f6f6;">分析项目</div>
|
|
|
<div class="layui-card-body" style="height:105px;overflow-y:auto"><div id="AnalyGroup"></div></div>
|
|
|
</div>
|
|
|
<div class="layui-card" style="height:150px" id="Chart">
|
|
|
<div class="layui-card-header">图表</div>
|
|
|
<div class="layui-card-body">
|
|
|
<div class="layui-form-item" style="margin-top:0px;margin-bottom:0px;">
|
|
|
<div class="layui-inline">
|
|
|
<label class="layui-form-label" style="width:30px">高度</label>
|
|
|
<div class="layui-input-inline" style="width:60px">
|
|
|
<input type="text" name="TB_H" id="TB_H" lay-verify="required|number" autocomplete="off" class="layui-input" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-inline">
|
|
|
<label class="layui-form-label" style="width:30px">宽度</label>
|
|
|
<div class="layui-input-inline" style="width:60px">
|
|
|
<input type="text" name="TB_W" id="TB_W" lay-verify="required|number" autocomplete="off" class="layui-input" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<br />
|
|
|
<div class="layui-input-inline" style="margin-left:20px">
|
|
|
<input type="checkbox" checked="" name="CB_IsShowPict" id="CB_IsShowPict" lay-skin='primary' title="显示图表" lay-filter="switch">
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--<div class="layui-form-item" style="margin-bottom:0px;">
|
|
|
|
|
|
<div class="layui-input-block" style="margin-left:20px">
|
|
|
<input type="checkbox" checked="" name="CB_IsShowPict" id="CB_IsShowPict" lay-skin='primary' title="显示图表" lay-filter="switch">
|
|
|
</div>
|
|
|
</div>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-col-md9">
|
|
|
<div class="layui-card" id="Content" style="margin-left:20px;">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
layui.use(['layedit', 'table', 'element', 'laydate'], function () {
|
|
|
var table = layui.table;
|
|
|
var form = layui.form;
|
|
|
form.on('checkbox(switch)', function (data) {
|
|
|
ShowData();
|
|
|
});
|
|
|
form.on('select(switch)', function(data){
|
|
|
ShowData();
|
|
|
});
|
|
|
if ($("#TB_DTFrom").length == 1) {
|
|
|
layui.laydate.render({
|
|
|
elem: '#TB_DTFrom'
|
|
|
, format: $("#TB_DTFrom").attr("data-info")
|
|
|
});
|
|
|
layui.laydate.render({
|
|
|
elem: '#TB_DTTo'
|
|
|
, format: $("#TB_DTTo").attr("data-info")
|
|
|
});
|
|
|
}
|
|
|
|
|
|
});
|
|
|
/**
|
|
|
* 初始化下拉框
|
|
|
* @param frmData
|
|
|
* @param mapAttr
|
|
|
* @param defVal
|
|
|
*/
|
|
|
function InitDDLAnalysisOperation(frmData, mapAttr, defVal) {
|
|
|
|
|
|
var operations = "";
|
|
|
if (defVal == "all")
|
|
|
operations += "<option value='all' >全部</option>";
|
|
|
|
|
|
var ens = frmData[mapAttr.Field];
|
|
|
if (ens == null) {
|
|
|
ens = [{ 'IntKey': 0, 'Lab': '否' }, { 'IntKey': 1, 'Lab': '是' }];
|
|
|
}
|
|
|
for (var i = 0; i < ens.length; i++) {
|
|
|
|
|
|
var en = ens[i];
|
|
|
|
|
|
var selected = "";
|
|
|
if (en.Selected && en.Selected.toString() == "true")
|
|
|
selected = "selected=selected";
|
|
|
|
|
|
if (en.No == undefined)
|
|
|
operations += "<option value='" + en.IntKey + "' " + selected + ">" + en.Lab + "</option>";
|
|
|
else
|
|
|
operations += "<option value='" + en.No + "' " + selected + ">" + en.Name + "</option>";
|
|
|
}
|
|
|
return operations;
|
|
|
}
|
|
|
</script>
|
|
|
<script type="text/javascript">
|
|
|
$(function () {
|
|
|
var theme = filterXSS(localStorage.getItem("themeColorInfo"));
|
|
|
if (theme == null || theme == undefined || theme == "")
|
|
|
return;
|
|
|
var data = JSON.parse(theme);
|
|
|
var html = "\n .layui-btn{\n background-color:" + data.selectedMenu + ";\n}\n .layui-laypage .layui-laypage-curr .layui-laypage-em{\n background-color:" + data.selectedMenu + ";\n}";
|
|
|
html += "\n .layui-laypage input:focus,.layui-laypage select:focus{\n border-color:" + data.selectedMenu + " !important\n}";
|
|
|
html += "\n .layui-form-select dl dd.layui-this{\n background-color:" + data.selectedMenu + " !important;\n}";
|
|
|
//html += "\n .layui-tab-title .layui-this{\n background-color:" + data.selectedMenu + " !important;\n} \n .layui-tab-title>.layui-this{\n color:#fff;\n} \n .layui-tab-title li {border: 1px solid " + data.selectedMenu + ";}";
|
|
|
html += "\n .layui-a-this{\n background-color:" + data.selectedMenu + ";\n color: #fff;\n}";
|
|
|
var styleScope = document.getElementById("theme-data");
|
|
|
styleScope.innerHTML = filterXSS(html);
|
|
|
})
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |