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

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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>