You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

619 lines
27 KiB
Plaintext

11 months ago
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="../../WF/Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
<link href="../layuiadmin/layui/css/layui.css" rel="stylesheet" />
<link href="../layuiadmin/style/admin.css" rel="stylesheet" />
<script src="../layuiadmin/layui/layui.js"></script>
<link href="../layuiadmin/layui/css/modules/layer/default/layer.css" rel="stylesheet" />
<script src="../layuiadmin/layui/lay/modules/layer.js"></script>
<!-- 引用通用的js文件. -->
<script src="/WF/Scripts/config.js?v=1.0" type="text/javascript"></script>
<script src="/WF/Comm/Gener.js?v=1.0" type="text/javascript"></script>
<script src="../../WF/Scripts/QueryString.js" type="text/javascript"></script>
<script src="../../WF/Scripts/echartsjs/echarts.min.js" type="text/javascript"></script>
<style type="text/css">
.au-but {
font-size: 0.6rem;
background-color: transparent;
border: none;
outline: none;
border: 1px solid #E59C26;
padding: 0 0.25rem;
color: #E59C26;
border-radius: 0.125rem;
}
.but-color1 {
border-color: #0F81EC;
color: #0F81EC;
}
.but-color2 {
border-color: #FF4E00;
color: #FF4E00;
}
.but-color3 {
border-color: #3c763d;
color: #3c763d;
}
.layuiadmin-card-status dd div a {
color: #2f4050 !important;
}
</style>
<script type="text/javascript">
var frmID = GetQueryString("FrmID");
var workModel = GetQueryString("WorkModel");
$(function () {
//数据分析-总的概况
GetGenerWorksByDept();
//分析项
// GetAnalyseGroupByRpt();
//按月份/按人员统计
FlowAnalyse_DataSet();
});
/**
* 获取本部门的数据统计
*/
function GetGenerWorksByDept() {
var handler = new HttpHandler("BP.Cloud.HttpHandler.App_OneFrm");
handler.AddPara("FrmID", frmID);
var data = handler.DoMethodReturnString("DataPanelDept_Init");
if (data.indexOf("err@") != -1) {
layer.alert(data);
console.log(data);
return;
}
data = JSON.parse(data);
//本部门的
$("#Dept_Counts").html(data.Dept_Create);
//个人的
$("#My_Counts").html(data.My_Create);
}
/**
*
* 分析项的解析
*/
function GetAnalyseGroupByRpt() {
var handler = new HttpHandler("BP.Cloud.HttpHandler.App_OneFrm");
handler.AddPara("FrmID", frmID);
var data = handler.DoMethodReturnString("DataPanelDept_GetAnalyseGroupByRpt");
if (data.indexOf("err@") != -1) {
layer.alert(data);
console.log(data);
return;
}
data = JSON.parse(data);
var _html = "<div class='layui-form'>";
$.each(data, function (idx, item) {
if (item.KeyOfEn != "WorkID" && item.KeyOfEn != "OID" && item.KeyOfEn != "PWorkID"
&& item.KeyOfEn != "FID" && item.KeyOfEn != "PNodeID" && item.KeyOfEn != "FlowEndNode") {
_html += '<li>';
if (item.KeyOfEn == "WFState")
_html += '<input type="radio" name="deptAnaly" id="' + item.KeyOfEn + '" title="' + item.Name + '" checked lay-filter="CheckedState">';
else
_html += '<input type="radio" name="deptAnaly" id="' + item.KeyOfEn + '" title="' + item.Name + '" lay-filter="CheckedState">';
//_html += '<div class="layui-unselect layui-form-radio" onclick="CheckedState(\'' + item.KeyOfEn + '\',this)">';
//_html += '<i class="layui-anim layui-icon"></i>';
//_html += '<div>' + item.Name + '</div>';
//_html += '</div>';
_html += '</li>';
}
});
_html += "</div>";
$("#flowByNYPanel").html(_html);
layui.use(['form', 'element'], function () {
var form = layui.form;
//此处即为 radio 的监听事件
form.on('radio(CheckedState)', function (data) {
var keyOfEn = data.elem.id; // DOM元素的ID
//根据分析项获取分析数据
var handler = new HttpHandler("BP.Cloud.HttpHandler.App_OneFrm");
handler.AddPara("FK_Flow", fk_flow);
handler.AddPara("KeyOfEn", keyOfEn);
handler.AddPara("GroupBy", "FK_NY");
var data = handler.DoMethodReturnString("DataPanelDept_GetAnalyseBySpecifyField_DataSet");
});
});
}
function ShowPanel(panelId) {
$("#" + panelId).show();
}
function hidePanel() {
$(".layui-table-tool-panel").hide();
}
function CheckedState(key, obj) {
if ($(obj).hasClass("layui-form-radioed") == true) {
$(obj).removeClass("layui-form-checked");
$("#" + key).removeAttr("checked");
} else {
$(obj).addClass("layui-form-radioed");
$("#" + key).attr("checked", "checked");
}
}
/**
* 实体单据数据分析
*/
var frmData;
function FlowAnalyse_DataSet() {
var handler = new HttpHandler("BP.Cloud.HttpHandler.App_OneFrm");
handler.AddPara("FrmID", frmID);
var data = handler.DoMethodReturnString("DataPanelDept_GetAnalyseByFrmIDDept_DataSet");
if (data.indexOf("err@") != -1) {
layer.alert(data);
console.log(data);
return;
}
frmData = JSON.parse(data);
var _html = "";
//按月份分析 发起的数量,完成的数量
queryFlowAnalyse("DictBillByNY", "实体、单据-月", true, false, false);
//按人员分析
queryFlowAnalyse("DictBillByEmp", "实体、单据-人员", false, false, true);
}
function queryFlowAnalyse(frmType, title, isLineShow, isPieShow, isBarShow) {
var Flow_X = [];
var Pie_Flow_X = [];
if (frmType == "DictBillByNY") {
if (isPieShow == true)
Pie_Flow_X = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
Flow_X = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
}
if (frmType == "DictBillByEmp")
$.each(frmData.DictBillByEmp, function (i, item) {
Flow_X[i] = item.StarterName;
});
var myCreatecount = 0;
var deptCreatecount = 0;
var myCreateFrm = [];
var deptCreateFrm = [];
var startFrmPie = [];
if (frmType == "DictBillByNY") {
for (var i = 0; i < Flow_X.length; i++) {
var isHave = false;
for (var k = 0; k < frmData.DictBillByNYOfMy.length; k++) {
if (Flow_X[i] == frmData.DictBillByNYOfMy[k].FK_NY) {
isHave = true;
myCreateFrm[i] = frmData.DictBillByNYOfMy[k].Num;
myCreatecount += frmData.DictBillByNYOfMy[k].Num;
startFrmPie[i] = { name: Pie_Flow_X[i], value: frmData.DictBillByNYOfMy[k].Num };
break;
}
}
if (isHave == false)
myCreateFrm[i] = 0;
isHave = false;
for (var k = 0; k < frmData.DictBillByNYOfMyOfDept.length; k++) {
if (Flow_X[i] == frmData.DictBillByNYOfMyOfDept[k].FK_NY) {
isHave = true;
deptCreateFrm[i] = frmData.DictBillByNYOfMyOfDept[k].Num;
deptCreatecount += frmData.DictBillByNYOfMyOfDept[k].Num;
break;
}
}
if (isHave == false)
deptCreateFrm[i] = 0;
}
if (isPieShow == true)
Flow_X = Pie_Flow_X;
}
if (frmType == "DictBillByEmp") {
for (var k = 0; k < frmData.DictBillByEmp.length; k++) {
deptCreateFrm[k] = frmData.DictBillByEmp[k].Num;
deptCreatecount += frmData.DictBillByEmp[k].Num;
startFrmPie[k] = { name: Flow_X[k], value: frmData.DictBillByEmp[k].Num };
}
}
var pie = [];
pie[0] = myCreatecount;
pie[1] = deptCreatecount;
//$.each(flowData.FlowStartByNY, function (i, item) {
// startFlow[i] = item.Num;
//});
//$.each(flowData.FlowCompleteByNY, function (i, item) {
// completeFlow[i] = item.Num;
//});
/*********************************************折线图*****************************************************/
// 基于准备好的dom初始化echarts实例
if (isLineShow) {
var myChart = echarts.init(document.getElementById(frmType + '_Line'));
// 指定图表的配置项和数据
var option = {
grid: {
top: '5%',
right: '1%',
left: '1%',
bottom: '10%',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: Flow_X
},
yAxis: {
type: 'value'
},
series: [{
name: '我创建的实体单据数',
data: myCreateFrm,
type: 'line',
smooth: true,
symbol: 'emptydiamond',
itemStyle: {
normal: {
color: '#8cd5c2', //改变折线点的颜色
lineStyle: {
color: '#8cd5c2' //改变折线颜色
}
}
},
areaStyle: {
normal: {}
},
}, {
name: '我部门创建的实体单据数',
data: deptCreateFrm,
type: 'line',
smooth: true,
symbol: 'emptydiamond',
areaStyle: {
normal: {}
},
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
/*********************************************饼状图*****************************************************/
// 基于准备好的dom初始化echarts实例
if (isPieShow) {
var myChart = echarts.init(document.getElementById(frmType + '_Pie'));
// 指定图表的配置项和数据
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',
itemWidth: 24, // 设置图例图形的宽
itemHeight: 18, // 设置图例图形的高
textStyle: {
color: '#666' // 图例文字颜色
},
// itemGap设置各个item之间的间隔单位px默认为10横向布局时为水平间隔纵向布局时为纵向间隔
itemGap: 10,
//backgroundColor: '#f8f8f8', // 设置整个图例区域背景颜色
data: Flow_X
},
series: [{
type: 'pie',
name: '',
radius: '60%',
center: ['60%', '50%'],
data: startFrmPie,
itemStyle: {
// emphasis英文意思是 强调;着重;(轮廓、图形等的)鲜明;突出,重读
// emphasis设置鼠标放到哪一块扇形上面的时候扇形样式、阴影
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(30, 144, 2550.5)'
}
},
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
/*********************************************柱状图*****************************************************/
// 基于准备好的dom初始化echarts实例
if (isBarShow) {
var myChart = echarts.init(document.getElementById(frmType + '_Bar'));
////设计显示的颜色
//var colorList = [];
//for (var i = 0; i < Flow_X.length; i++) {
// if (i % 3 == 0)
// colorList[i] = '#ff4844';
// if (i % 3 == 1)
// colorList[i] = '#9ac3e5';
// if (i % 3 == 2)
// colorList[i] = '#66ac52';
//}
// 指定图表的配置项和数据
var option = {
grid: {
top: '5%',
right: '1%',
left: '1%',
bottom: '10%',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['实体单据个数']
},
xAxis: {
type: 'category',
data: Flow_X
},
yAxis: {
type: 'value'
},
series: [{
name: '我创建的数量',
data: myCreateFrm,
type: 'bar',
smooth: true,
itemStyle: {
normal: {
color: 'red'
}
}
}, {
name: '部门创建的数量',
data: deptCreateFrm,
type: 'bar',
smooth: true,
itemStyle: {
normal: {
color: 'blue'
}
}
} ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
function ChangeShowDiv(flowType, chartType, obj) {
$(obj).addClass("layui-this");
if (chartType == "Line") {
$("#" + flowType + "_Pie").removeClass("layui-this");
$("#" + flowType + "_Bar").removeClass("layui-this");
$("#" + flowType + "_Line").addClass("layui-this");
$("#" + flowType + "_Pie_i").removeClass("layui-this");
$("#" + flowType + "_Bar_i").removeClass("layui-this");
queryFlowAnalyse(flowType, "", true, false, false);
}
if (chartType == "Pie") {
$("#" + flowType + "_Pie").addClass("layui-this");
$("#" + flowType + "_Bar").removeClass("layui-this");
$("#" + flowType + "_Line").removeClass("layui-this");
$("#" + flowType + "_Line_i").removeClass("layui-this");
$("#" + flowType + "_Bar_i").removeClass("layui-this");
queryFlowAnalyse( flowType, "", false, true, false);
}
if (chartType == "Bar") {
$("#" + flowType + "_Pie").removeClass("layui-this");
$("#" + flowType + "_Bar").addClass("layui-this");
$("#" + flowType + "_Line").removeClass("layui-this");
$("#" + flowType + "_Pie_i").removeClass("layui-this");
$("#" + flowType + "_Line_i").removeClass("layui-this");
queryFlowAnalyse(flowType, "", false, false, true);
}
}
//已知URL,在右侧打开页面
function OpenWindowRight(url, title) {
if (url.indexOf("?") == -1)
url += "?1=1";
if (url.indexOf("FrmID") == -1)
url += "&FrmID=" + frmID + "&FK_MapData=" + frmID + "&WorkModel=" + workModel;
if (top.layui.index) {
top.layui.index.openTabsPage(url, title)
} else {
window.open(url)
}
}
</script>
</head>
<body layadmin-themealias="coffee">
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">数据统计(实体、单据,本部门)</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 95px !important;">
<div carousel-item="">
<ul class="layui-row layui-col-space10 layui-this">
<li class="layui-col-xs4">
<a href="javascript:;" onclick="OpenWindowRight('/App/OneFrm/FrmSearch.htm?SearchType=MyDept','我部门创建的')" class="layadmin-backlog-body">
<h3>总数</h3>
<p><cite id="Dept_Counts">66</cite></p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">数据统计(实体、单据,我的)</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 95px !important;">
<div carousel-item="">
<ul class="layui-row layui-col-space10 layui-this">
<li class="layui-col-xs4">
<a href="javascript:;" onclick="OpenWindowRight('/App/OneFrm/FrmSearch.htm?SearchType=My','我创建的')" class="layadmin-backlog-body">
<h3>总数</h3>
<p><cite id="My_Counts">66</cite></p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">实体、单据-按月份统计</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview" lay-anim="fade" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;">
<div carousel-item id="DictBillByN">
<div id="DictBillByNY_Line" class="layui-this"></div>
<div id="DictBillByNY_Bar"></div>
<div id="DictBillByNY_Pie"></div>
</div>
<div class="layui-carousel-ind">
<!--<div class="layui-inline" title="筛选列" onclick="ShowPanel('flowByNYPanel')">
<i class="layui-icon layui-icon-cols"></i>
<ul class="layui-table-tool-panel" style="display:none;" id="flowByNYPanel">
<li >
<input type="checkbox" name="id" checked="" title="ID" style="display:none">
<div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
<span>ID</span>
<i class="layui-icon layui-icon-ok"></i>
</div>
</li>
</ul>
</div>-->
<ul>
<li class="layui-this" id="DictBillByNY_Line_i" onclick="ChangeShowDiv('DictBillByNY','Line',this)"></li>
<li class="" id="DictBillByNY_Bar_i" onclick="ChangeShowDiv('DictBillByNY','Bar',this)"></li>
<li class="" id="DictBillByNY_Pie_i" onclick="ChangeShowDiv('DictBillByNY','Pie',this)"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">实体、单据-按人员统计</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
<div carousel-item id="DictBillByEmp">
<div id="DictBillByEmp_Bar" class="layui-this"></div>
<div id="DictBillByEmp_Line"></div>
<div id="DictBillByEmp_Pie"></div>
</div>
<div class="layui-carousel-ind">
<ul>
<li class="layui-this" id="DictBillByEmp_Bar_i" onclick="ChangeShowDiv('DictBillByEmp','Bar',this)"></li>
<li class="" id="DictBillByEmp_Line_i" onclick="ChangeShowDiv('DictBillByEmp','Line',this)"></li>
<li class="" id="DictBillByEmp_Pie_i" onclick="ChangeShowDiv('DictBillByEmp','Pie',this)"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">
.layui-table-tool-panel {
position: absolute;
top: 29px;
left: auto !important;
right: -1px !important;
min-width: 150px;
min-height: 40px;
text-align: left;
overflow-y: auto;
background-color: rgb(255, 255, 255) !important;
box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px;
padding: 5px 0px;
border-width: 1px;
border-style: solid;
border-color: rgb(210, 210, 210);
border-image: initial;
border-radius: 0px !important;
}
.layui-table-tool-panel li {
padding: 0 10px;
line-height: 30px;
-webkit-transition: .5s all;
transition: .5s all;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: auto !important;
height: auto !important;
border-radius: 0px !important;
background-color: white !important;
}
</style>
</body>
</html>